Furyu
[フリュー公式]

Tech Blog

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

2018年09月25日

furusin

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

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

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

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

京都Devかふぇ#3 〜フロントエンド〜

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

これまで開催した2回はどちらもモバイルに特化した内容でしたが、今回は初のフロントエンドでしたので、はじめましての方が多かったです!

勉強会の様子

トップバッターは弊社の佐藤Johnより、「Vue.jsを使うようになるまで」を発表しました。

IMG_20180914_190946

Vue.jsを導入するまでに至った経緯から、Vue.jsのいいところを纏めて発表しました。

二人目は @kobashinG 様より、「Puppeteerのお話」でした。

IMG_20180914_192804

Googleが出しているHeadless Chrome Node APIのライブラリで、

どんなモチベーションで触り始めたか、簡単にどんなことができるかを発表してくださりました。

 

3人目は@jiyuujinlab 様より、「あえてNuxtを使わずプロフィールサイトを作った話」でした。

IMG_20180914_194229

プロフィールサイトを作ってみた実体験を基に、デモを交えてVue.jsの良いところを発表してくださりました。

人生初の登壇だったとのことで、そのような場を提供することができて運営として嬉しい限りです!

 

LT大会

LT大会では@RyosukeIzumi 様、るい 様、@funnelbit 様、そして私の4人が登壇しました。

IMG_20180914_200814

IMG_20180914_201327

IMG_20180914_202051

IMG_20180914_202544

懇親会の様子

一度休憩を挟み、LT大会を終えて、懇親会です!

今回は北海道を応援する意味でも、いつものケータリング(カツサンドが好評)に加え、サッポロビールをご提供しました!

IMG_20180914_200603

 

 

まとめ

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

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

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


2018年09月20日

Kayo

sshfsを使ってみました!

みなさん、こんにちは。ピクトリンク事業部インフラ課の藤本佳世です。
今回は、使ってみてとても便利だった「sshfs」をご紹介したいと思います。

sshfsとは

SSHを経由して、他のサーバのディレクトリをマウントすることができるコマンドです。

なぜ便利なのか?

私は日々の業務でよくAnsibleを使ってサーバのミドルウェアのインストールや設定などを行います。
※Ansibleについては、以前ブログを書いているのでこちらをご覧ください。

 

今までは自分のローカルUbuntu環境からAnsibleを実行していたのですが、Macから実行すると環境違いでエラーになる事などがありました。
この状況を解消すべく、インフラ課のメンバー全員が同じ環境でAnsibleを実行できるよう専用サーバを構築しました。しかし、ローカルとリモートのコードを2重で管理という面倒な仕様になってしまい、何か解消する方法はないかと悩んでいました。

blog1

そんな時見つけたのが「sshfs」です。
これを使ってリモートで直接コードを修正しつつ、ローカルでのデバッグ実行も可能となり、とても便利になりました。

NFSと比較した場合、リモートサーバでコマンドを実行する(=SSHでログインして実行する)環境が既にできあがっているので、ローカル側にプログラムをインストールするだけで実現可能というお手軽さもあります。

使い方は簡単

  • sshfsのインストール(Ubuntuの場合)

  • マウント方法

例として、私のローカルマシーンの/testというディレクトリを作成し、サーバserver1の/home/fujimoto.kayoディレクトリをマウントします。

あとは、sshfsコマンドをローカルマシーンから実行するだけです。

これでマウントができた状態です。実際にサーバserver1の/home/fujimoto.kayo配下には、example-ansibleディレクトリが存在しますが、
ローカルマシーンの/test配下にも同じexample-ansibleが存在します。

  • アンマウント方法も簡単

最後に

コードの2重管理がなくなったり、コードの修正をローカルで使い慣れている環境のエディタで編集できたり、ちょっとした工夫で日々の業務がスムーズに行えるようになりました。

是非、皆さんもこの「sshfs」を使ってみて下さい!


2018年09月18日

furusin

Android Support Library28.0.0-alpha1で追加されたChipGroupを試してみる

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

今回は、Android Support Library28.0.0(Alpha1)で追加された、Chip/ChipGroupについて解説します。

Chip/ChipGroupとは?

タグのようなものを指すViewです。

例えば、以下のようにスキルセットの一覧を表示するために使ったりします。

top crop

それでは具体的に見ていきましょう。

Chip/ChipGroupの導入

まずはbuild.gradleにAndroidXの情報を追加します。

2018年9月5日時点ではRC02が最新です。

実際に使ってみる

感覚的には、RadioButtonの実装に非常に似ています。

それでは実際に使ってみましょう。

ViewのXMLに情報を追加します。

 

head

 

これだけでもシンプルなChip/ChipGroupが設置できました。

ひとつずつ見ていきます。

Chipは独立しても使えますが、RadioButtonのようにChipGroupの子要素としてセットします。

8行目、Chipにはいくつかのスタイルが事前に用意されており、XMLで指定できるようになっています。

styleによって設定できるものは以下のものがあります。

  • チップ(チェックマーク)
  • クリック(選択状態)
  • 閉じるアイコン

上記3点をStyleの種別によって設定できます。

種類 概要 イメージ
@style/Widget.MaterialComponents.Chip.Filter
  • チップ:オプション
  • クリック:常に有効
  • 閉じるアイコン:オプション

通常、ChipGroupに属したChipとして利用する際に指定します。

filter

filter_filtered

@style/Widget.MaterialComponents.Chip.Action styleを設定しなかった場合、これがデフォルトとなる。

  • チップ:オプション
  • クリック:不可
  • 閉じるアイコン:不可

通常、ChipGroupに属したChipとして利用する際に指定します。

 action
@style/Widget.MaterialComponents.Chip.Choice
  • チップ:オプション
  • クリック:常に有効
  • 閉じるアイコン:不可

ユーザーが「選択している」ことをわかりやすく表示してくれる。

通常、ChipGroupに属したChipとして利用する際に指定します。

choice

choice_selected

@style/Widget.MaterialComponents.Chip.Entry
  • チップ:オプション
  • クリック:オプション
  • 閉じるアイコン:オプション

通常、ChipGroupではなく独立したChipDrawableとして利用する際に指定します。

entryentry_filtered

最後に android:textAppearance をセットしていますが、これはSupportLibraryの時はセットしなくても問題なかったので、今後正式リリース版が出る場合には不要になるかと思います。

(セットしなかった場合、IllegalArgumentExceptionがコールされます。)

11行目、android:textについては、SupportLibraryでは app:chipText(setChipText) でしたがdeprecated になっています。

通常のandroid:text(setText)を使うようにしましょう。

 

リスナーも豊富に用意されておりsetOnClickListener, setOnCheckedChangeListener, setOnCloseIconClickListenerと、チェックや閉じるボタンに対応したリスナーが用意されています。

なお、setOnCloseIconClickListenerについては、コード中の実態はOnClickListenerとなっており、XMLから指定はできませんのでご注意ください。

試しに実装してみます。

次のような画面になります。

activity-MainActivity-09052018123549

setOnCloseIconClickListenerもKotlinのコード上で実装してみましょう

閉じるボタン(✕ボタン)をタップすると、ちゃんとViewがGONEになりました。

まとめ

実装自体はRadioButtonに形が似ていて、直感的で使いやすいものになっていました。

Chip/ChipGroupはまだ正式リリースはされていませんが、タグの表示など、活用できるシーンは多いかと思いますので、正式リリースが楽しみですね!


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月29日

furusin

Kotlin ExtensionsのParcelizeアノテーションでdata classをスッキリさせる

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

今回はKotlinの便利機能である @Parcelize アノテーションについて解説します。

公式ドキュメントはこちらです。

ちなみにこの内容は、2018/08/25に行われたKotlin Fest 2018のセッション(start from Convert to Kotlin by 望月美帆さん)によって少し解説されたものです。

Parcelable とは

Parcelableは、例えばAndroidだとActivity間のデータ通信の際、一時的にデータを保存したい場合に利用します。

Kotlinでは、 バージョン1.1.4からExperimentalとして追加されました。

使い方

利用するにはkotlin-android-extensionsが必要ですので、build.gradleに追加しましょう。

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

このアノテーションを利用しなかった場合は次のようになります。

このクラスに次のように @Parcelize アノテーションを追加すると、とてもシンプルになります。

関数すら無くなりました。

もちろん、何か独自のロジックを入れたい場合は追加することも可能です。

ちなみに

このUser.ktクラスをKotlinでなくJavaで書くと、次のようになります。

Javaだと膨大な量ですが、Kotlinだとたったの1行で完結しました!

Kotlin最高!

Kotlinかわいい!