Furyu
[フリュー公式]

Tech Blog

フリュー株式会社の技術ブログです

2018年09月3日

furusin

AndroidでKotlin Coroutinesを使ってみる

こんにちは。ピクトリンク事業部の古川です。

Androidでは従来ReactiveXが主流ですが、最近話題になっているCoroutinesを使った非同期処理の実装について解説します。

Coroutinesとは?

よく誤解されますが、CoroutinesとReactiveXは全くの別物です。

ReactiveXは非同期処理をストリームで実施するためのものですが、

Coroutinesは、「特定のスレッドに束縛されない、中断可能な計算処理インスタンス」です。

「特例のスレッドに束縛されない」ため、Androidでは非同期処理に用いられることが多いです。

そのためReactiveXとの比較で語られることが多いですが、性質が異なることを意識しておいてください。

Kotlinの公式ドキュメントに

「Coroutines simplify asynchronous programming by putting the complications into libraries.」(コルーチンは非同期処理をシンプルに書けるようにする)

と書いているのも誤解を呼ぶ要因の一つかと思います…

 

Kotlin Coroutinesを導入する

利用するにはbuild.gradleに情報を追加します。

また、Experimentalですので、その情報も追加します。

使い方

今回はサンプルとして、GitHubのAPIをRetrofitでコールしたレスポンスを画面に表示するアプリを作ってみます。

事前準備

RetforitでAPIを叩くために、InterfaceとModelを準備します。

実際に使ってみる

次に、このAPIを叩くメソッドを用意します。今回はViewModelに実装します。

fetchUserメソッドの1行目が最も重要な部分です。

まず返却値の型としてUserをDeferredで返します。ReactiveXだとSingle<User>になると思います。

async(CommonPool)はコルーチン内をスレッドプールで実行する、という理解でいいと思います(こちらを参考に)

後は通常通り、userを返却してあげているだけです。

それでは、このメソッドを呼び出してみます。

単純に「処理開始時にダイアログを表示し、終わったら画面に反映して閉じるだけ」の処理をしています。

launch(UI)は「UIスレッドで実行してね」という意味になります。

ここで .await() を呼んでいますが、これは「この処理が終わるまで続きの処理は awaitする(待つ)」という意味です。

最後に、画面に表示するXMLと画面イメージです。

activity-MainActivity-08302018161310

まとめ

非常に簡単ではありますが、以上でCoroutinesを試してみることができました。

完全にReactiveXをCoroutinesに置き換えることはまだまだ難しいとは思いますが、ReactiveXよりも考えることが比較的少なく、実装も容易ですので

今後はCoroutinesも選択肢のひとつになっていくと思います。

 


2018年08月23日

furusin

BottomAppBarにめり込んだFloatingActionButtonを設置する

こんにちは。ピクトリンク事業部の古川です。

今回は、Google IO 2018アプリで突如現れて衝撃的だった、BottomAppBarにめり込んだFloatingActionButtonの実装方法を紹介します。

このようなレイアウトです。

fabWithBottonAppBar

下部のView(ここではおそらくBottomAppBarのみ)にFloatingActionButtonがめり込んでいて、被る部分はうまく避けられています。

今回の最終形態は次のような画面を目指します。

bottomnavigationviewsample-MainActivity-08212018170527

事前準備

app/build.gradleに必要なものを追加します。

 

BottomAppBarを設置する

今回実装したい方法を実現するには、BottomAppBarを利用します。

また、BottomAppBarはCoordinatorLayoutを親に持つ必要があることに注意してください。

ここまでで、次のようなとてもシンプルな画面が完成しました。

bottomnavigationviewsample-MainActivity-08212018173254

ちなみに

の「56dp」は、Google IO 2018アプリBottomNavigationViewの高さを参考にしました。

Material Design Guidelineにも56dpにするように指定されています

FloatingActionButtonを設置する

次に、めり込ませるFloatingActionButtonを設置します。

重要なのは

この部分です。

この1行だけで、BottomAppBarによしなに設置してくれます。

これだけで、BottomAppBarにFloatingActionButtonがめり込みました。

bottomnavigationviewsample-MainActivity-08212018173937

ちなみに、BottomAppBarの

を “end” に変えると、FloatingActionButtonが右側に設置されます。

bottomnavigationviewsample-MainActivity-08212018174105

おまけ

これだけだとシンプルすぎるので、BottomAppBarにBottomNavigationViewを追加します。

まずはBottomNavigationViewで表示するためのメニューを res/menu/bnv_menu.xml に用意します。

次に、BottomNavigatoinViewをBottomAppBarの中へ追加します。

これで次のような画面が完成しました!

bottomnavigationviewsample-MainActivity-08212018170527

BottomNavigationViewのItemが選択された時に画面(Fragment)を切り替えたい場合は次のようにします。

まとめ

とても簡単に実装できました!

これをうまく活用すれば、リッチでかっこいい画面が作れるかもしれませんね!


2018年06月25日

furusin

フリュー主催の勉強会(京都Devかふぇ#2)を開催しました!

こんにちは。ピクトリンク事業部の古川です。

前回に引き続き、フリュー主催の勉強会を開催しましたのでご報告します。

前回のレポートはこちらから

京都Devかふぇ#2 〜WWDC & Google IO総復習会〜

今回も30名以上とたくさんの方々にご参加頂きました!

新たな取組みとして「突発LTやりたい人がいたらどうぞ!」としてみました。

実際には手は上がらず私が登壇しましたが、発表における門扉を広くできたらなと考えています。

 

勉強会の様子

15分発表枠

トップバッターは弊社の足立より、WWDC 2018 のまとめを発表しました。

IMG03135

WWDCの情報は日本語では意外と多くなく、情報を欲している方が多かったようで、皆さん食い入るように聴かれていました。

発表資料はこちら

 

2人目は @kwmt27 様より、Google IO 2018で発表されたNavigation Architecture Component についての発表でした。

Navigation Architecture Component(京都Devかふぇ バージョン) from Yasutaka Kawamoto

実際にGoogle IOに参加されただけあって、非常にわかりやすく、かつ深く解説されていました!

XcodeのStoryboardに似ており、注目されているコンポーネントです。

 

3人目は@AkihiroTokai 様より、実際にGoogle IO 2018に参加されたレポートの発表でした。

現場の写真をたくさん見せて頂き、当日の臨場感をたくさん感じられる発表でした!

LT大会

1人目は弊社の森嶋より、WWDCで発表されたiOS12におけるUITextContentTypeについての発表でした。

IMG03137

ユーモアを交えた発表で、会場からは笑いがあり、LT大会ならではな感じがあってとてもいい雰囲気でした!

UITextField iOS12 from kenta morishima

最後は私がGoogle IOでも会場で実際に触る場所が設けられた、Google Codelabsを実際に触ってみた感想について発表しました。

意外とハマり所もありますが、非常に良いツールですので皆さんにも触ってみて頂きたいです。

Google Codelabsをやってみた from furusin

 

懇親会の様子

 

簡単ですが食事を用意し、前回に引き続き好評頂きました!

IMG_20180615_195730749

IMG_20180615_195711721

今回から、ティーンズやソフトドリンク派な皆さん向けにステッカーを用意しました。

IMG_20180615_200501595

これで間違ってお酒を勧めてしまい「あああ・・・すみません・・・」を減らす対応ができました。

まとめ

参加した皆さんもたくさんTwitterでツイートしてくださり、とても盛り上がった勉強会となりました!

懇親会でお話した方から「とても楽しいからまたやってほしい!」というお声を頂きましたので、

是非ともまた開催したいと思います!


2018年06月4日

furusin

フリュー主催の勉強会を開催しました!

IMG02937

 

こんにちは!ピクトリンク事業部サービス開発2課の古川です。

5/25(金)に、先日告知していました勉強会を開催しました。

30名程度集まれば大成功かな、と思っていたところに55名もの方が参加してくださり大盛況となりました。

また、ハッシュタグ #KyotoDevCafe でもたくさんツイートがありました。

今回はそのレポートをお送りします。

勉強会の様子

大盛況となったことから、多少席が詰まってしまったことは申し訳ない限りです。

ですが皆さん発表者のお話を食い入るように聞かれていました!

こちらは始まりの挨拶の様子です。

IMG_20180525_190353

初めてAndroidアプリを作ってみた話やiOSのニッチな話、

Swiftをアプリからサーバサイドまで使い倒した話まで幅広く発表いただきました!

懇親会の様子

簡単ですが弊社よりケータリングを用意しました!

IMG02949

カツサンドが非常に好評でした!

運営メンバーも美味しくいただきました。

また、懇親会中に弊社荒木より突発的LTがありました!

IMG_7554

このLTは本当に突発的でしたが意外とウケていたようで、非常に好評でした!

最近流行りのVRに関した発表で、Daydreamを持ってきて装着していました。

 

全体を通して

今回は「モバイル」という少し広めのテーマでの開催となりましたが、Android/iOSのバランスがが丁度よく、開場も盛り上がっていました。

また、難易度もコアな発表から初心者向けのものまで幅広く、多くの方に楽しんで頂ける内容になり、

運営として非常に嬉しい限りです。

初めての開催でしたので拙い部分もあったかと思いますが、どんどん回数を重ねてより良い勉強会にしていきたいと思っております。


2017年03月17日

araki

DroidKaigi 2017 に参加しました。会場の様子をレポートします!

コンテンツ・メディア第1事業部の荒木です。ピクトリンクというプリントシール画像を使ったアプリの Android 版を開発しています。

前回の記事では、DroidKaigi 2017 の参加前レポートを書きました。今回は、DroidKaigi 2017 の参加後レポートとなります。ほとんどのセッションはスライドと動画が公開されるようなので、この記事では DroidKaigi に参加できなかった方に向けて、会場の様子をお伝えします!

DroidKaigi とは?

※ 前回の記事と同じ内容を、再掲いたします。

公式サイト より引用:

DroidKaigiはエンジニアが主役のAndroidカンファレンスです。
Android技術情報の共有とコミュニケーションを目的に、2017/3/9(木)、3/10(金)の2日間開催します。

DroidKaigi とは、Android エンジニアのカンファレンスです。参加者は500人を超え、日本国内の Android カンファレンスとしては最大級の規模を誇ります。2015 年から開催されており、今回の DroidKaigi 2017 で3回目の開催となります。私は今回が初めての参加となります。

会場の様子

会場の様子をレポートいたします。今回の会場は、ベルサール新宿グランド コンファレンスセンターでした。

セッション

セッションルームは全部で6つありました。どのセッションも多くのエンジニアが発表を聞きに来ており、人気のセッションでは立ち見の人が出るほどでした。写真は Room3 の真ん中くらいから撮影したもので、私の後ろにもたくさんの聴講者がいました。

Session Room3

Session Room3 の様子

ランチ、おやつ

会場には、お菓子部屋がありました。各社のロゴの入ったお菓子や、マフィンなどがおいてあります。運営の方曰く、無限に湧いてくるとのことでした。

IMG_20170310_095808

 

他にも記念撮影スポットがあったり、

IMG_20170309_184112

 

バリスタの方がコーヒーを淹れてくれるというサービスもありました。常に長蛇の列ができていて、私は飲みそびれてしまいました。。

オフィスアワー

各セッションの後には、オフィスアワーが設けられました。オフィスアワーでは、発表者の方が質問やフィードバックを受けるために、お菓子部屋にしばらく滞在していました。発表者の周りには多くのエンジニアが集まり、発表内容について熱い議論を交わしていました。私もオフィスアワーで議論に参加したり、発表内容に関する疑問をぶつけてみたりしました。こうした貴重な経験は、カンファレンスに参加したからこそ得られるものだと感じました。

 

こちらのセッションのオフィスアワーで、MVVM について発表者の方と議論を交わしていました。とても楽しかったです!

アフターパーティー

全てのセッションが終わった後のアフターパーティーの様子です。ここでも、たくさんのエンジニアの方たちと交流することができました。

IMG_20170310_183106

 

寿司職人が握るお寿司。去年もあったそうです。大人気で、すぐに売り切れてしまいました。

IMG_20170310_191355

 

遠いですが、運営責任者の mhidaka さんが壇上にいらっしゃいます。この後、運営スタッフの方々に会場全体から感謝の拍手がありました。スタッフの方々のおかげでカンファレンス中、気持ちよく過ごすことができました。ありがとうございました!

IMG_20170310_202008

さいごに

今回は、DroidKaigi に参加できなかった方に向けて会場の様子をお伝えしました。楽しそうな雰囲気が伝わって「来年は DroidKaigi に参加するぞ!」と思っていただければ幸いです。私は来年も参加する予定ですので、ぜひみなさんも参加しましょう!