Blogフリュー株式会社の技術ブログです2018年09月25日フリュー主催の勉強会(京都Devかふぇ#3)を開催しました!JavaScriptVueVue.js勉強会こんにちは。ピクトリンク事業部の古川です。前回に引き続き、フリュー主催の勉強会を開催しましたのでご報告します。〜フロントエンド〜今回も合計で30名以上とたくさんの方々にご参加頂きました!これまで開催した2回はどちらもモバイルに特化した内容でしたが、今回は初のフロントエンドでしたので、はじめましての方が多かったです!勉強会の様子トップバッターは弊社の佐藤Johnより、「Vue.jsを使うようになるまで」を発表しました。Vue.jsを導入するまでに至った経緯から、Vue.jsのいいところを纏めて発表しました。様より、「Puppeteerのお話」でした。APIのライブラリで、どんなモチベーションで触り始めたか、簡単にどんなことができるかを発表してくださりました。様より、「あえてNuxtを使わずプロフィールサイトを作った話」でした。プロフィールサイトを作ってみた実体験を基に、デモを交えてVue.jsの良いところを発表してくださりました。様、そして私の4人が登壇しました。開催したいと思います!Tweet2018年09月20日sshfsを使ってみました!Ansiblesshfsインフラみなさん、こんにちは。ピクトリンク事業部インフラ課の藤本佳世です。今回は、使ってみてとても便利だった「sshfs」をご紹介したいと思います。sshfsとはSSHを経由して、他のサーバのディレクトリをマウントすることができるコマンドです。便利なのか?私は日々の業務でよくAnsibleを使ってサーバのミドルウェアのインストールや設定などを行います。※Ansibleについては、以前ブログを書いているのでこちらをご覧ください。今までは自分のローカルUbuntu環境からAnsibleを実行していたのですが、Macから実行すると環境違いでエラーになる事などがありました。この状況を解消すべく、インフラ課のメンバー全員が同じ環境でAnsibleを実行できるよう専用サーバを構築しました。ローカルとリモートのコードを2重で管理という面倒な仕様になってしまい、何か解消する方法はないかと悩んでいました。そんな時見つけたのが「sshfs」です。これを使ってリモートで直接コードを修正しつつ、ローカルでのデバッグ実行も可能となり、とても便利になりました。NFSと比較した場合、リモートサーバでコマンドを実行する(=SSHでログインして実行する)環境が既にできあがっているので、ローカル側にプログラムをインストールするだけで実現可能というお手軽さもあります。例として、私のローカルマシーンの/testというディレクトリを作成し、サーバserver1の/home/fujimoto.kayoディレクトリをマウントします。/testあとは、sshfsコマンドをローカルマシーンから実行するだけです。/testこれでマウントができた状態です。実際にサーバserver1の/home/fujimoto.kayo配下には、example-ansibleディレクトリが存在しますが、ローカルマシーンの/test配下にも同じexample-ansibleが存在します。/test最後にコードの2重管理がなくなったり、コードの修正をローカルで使い慣れている環境のエディタで編集できたり、ちょっとした工夫で日々の業務がスムーズに行えるようになりました。Library28.0.0-alpha1で追加されたChipGroupを試してみるAndroidこんにちは。ピクトリンク事業部の古川です。Library28.0.0(Alpha1)で追加された、Chip/ChipGroupについて解説します。Chip/ChipGroupとは?タグのようなものを指すViewです。以下のようにスキルセットの一覧を表示するために使ったりします。それでは具体的に見ていきましょう。Chip/ChipGroupの導入まずはbuild.gradleにAndroidXの情報を追加します。2018年9月5日時点ではRC02が最新です。"androidx.legacy:legacy-support-v4:1.0.0-rc02"実際に使ってみる感覚的には、RadioButtonの実装に非常に似ています。それでは実際に使ってみましょう。ViewのXMLに情報を追加します。/></com.google.android.material.chip.ChipGroup>これだけでもシンプルなChip/ChipGroupが設置できました。ひとつずつ見ていきます。Chipは独立しても使えますが、RadioButtonのようにChipGroupの子要素としてセットします。8行目、Chipにはいくつかのスタイルが事前に用意されており、XMLで指定できるようになっています。styleによって設定できるものは以下のものがあります。チップ(チェックマーク)クリック(選択状態)閉じるアイコン上記3点をStyleの種別によって設定できます。閉じるアイコン:オプション通常、ChipGroupに属したChipとして利用する際に指定します。styleを設定しなかった場合、これがデフォルトとなる。通常、ChipGroupに属したChipとして利用する際に指定します。閉じるアイコン:不可ユーザーが「選択している」ことをわかりやすく表示してくれる。通常、ChipGroupに属したChipとして利用する際に指定します。@style/Widget.MaterialComponents.Chip.Entryチップ:オプションクリック:オプション閉じるアイコン:オプション通常、ChipGroupではなく独立したChipDrawableとして利用する際に指定します。セットしていますが、これはSupportLibraryの時はセットしなくても問題なかったので、今後正式リリース版が出る場合には不要になるかと思います。(セットしなかった場合、IllegalArgumentExceptionがコールされます。通常のandroid:text(setText)を使うようにしましょう。setOnCloseIconClickListenerと、チェックや閉じるボタンに対応したリスナーが用意されています。setOnCloseIconClickListenerについては、コード中の実態はOnClickListenerとなっており、XMLから指定はできませんのでご注意ください。試しに実装してみます。/></com.google.android.material.chip.ChipGroup></androidx.constraintlayout.widget.ConstraintLayout></layout>次のような画面になります。View.GONE}}}閉じるボタン(✕ボタン)をタップすると、ちゃんとViewがGONEになりました。まとめ実装自体はRadioButtonに形が似ていて、直感的で使いやすいものになっていました。Coroutinesを使ってみるAndroidKotlinこんにちは。ピクトリンク事業部の古川です。Androidでは従来ReactiveXが主流ですが、最近話題になっているCoroutinesを使った非同期処理の実装について解説します。Coroutinesとは?よく誤解されますが、CoroutinesとReactiveXは全くの別物です。ReactiveXは非同期処理をストリームで実施するためのものですが、Coroutinesは、「特定のスレッドに束縛されない、中断可能な計算処理インスタンス」です。「特例のスレッドに束縛されない」ため、Androidでは非同期処理に用いられることが多いです。そのためReactiveXとの比較で語られることが多いですが、性質が異なることを意識しておいてください。Coroutinesを導入する利用するにはbuild.gradleに情報を追加します。Experimentalですので、その情報も追加します。今回はサンプルとして、GitHubのAPIをRetrofitでコールしたレスポンスを画面に表示するアプリを作ってみます。事前準備RetforitでAPIを叩くために、InterfaceとModelを準備します。"http://www.github.com")実際に使ってみる次に、このAPIを叩くメソッドを用意します。今回はViewModelに実装します。User()}}fetchUserメソッドの1行目が最も重要な部分です。返却値の型としてUserをDeferredで返します。ReactiveXだとSingle<User>になると思います。async(CommonPool)はコルーチン内をスレッドプールで実行する、という理解でいいと思います(こちらを参考に)後は通常通り、userを返却してあげているだけです。それでは、このメソッドを呼び出してみます。{dialog.show()mainViewModel.fetchUser("furusin").await()dialog.dismiss()}}}}単純に「処理開始時にダイアログを表示し、終わったら画面に反映して閉じるだけ」の処理をしています。launch(UI)は「UIスレッドで実行してね」という意味になります。awaitする(待つ)」という意味です。最後に、画面に表示するXMLと画面イメージです。/></androidx.constraintlayout.widget.ConstraintLayout></layout>まとめ非常に簡単ではありますが、以上でCoroutinesを試してみることができました。完全にReactiveXをCoroutinesに置き換えることはまだまだ難しいとは思いますが、ReactiveXよりも考えることが比較的少なく、実装も容易ですので今後はCoroutinesも選択肢のひとつになっていくと思います。