Blog株式会社マネーフォワード公式開発者向けブログです。技術や開発手法、イベント登壇などを発信します。サービスに関するご質問は、各サービス窓口までご連絡ください。Libraryを積極的に使ってみるこんにちは。エンジニアの細谷です。以前にも当エンジニアブログの「Android版マネーフォワードをマテリアルデザイン対応したときのあれこれ」で紹介しましたが、マネーフォワードのAndroidアプリのUIはマテリアルデザインを積極採用しています。マテリアルデザインを採用した開発を効率的に進める上で欠かせないのがAndroidのサポートライブラリです。v22.2(2015年5月公開)で追加になったデザインサポートライブラリの一部は実際にマネーフォワードのAndroidアプリにも導入していますので、その中でも特に簡単に導入できる3つのコンポーネントを紹介します。発表されて間もないv23(2015年8月公開)についても、未導入ながら今後の展望として紹介します。Libraryの更新状況等はこちらなどで確認できます。以下のデザインサポートライブラリが追加されています。CollapsingToolbarLayout今回は上から3つを紹介していきます。TextInputLayoutTextInputLayoutは、EditText等のフォームのヒント情報をフローティングラベルとして表示するためのコンポーネントです。Androidでフォームを作成する際、フォームのヒントや説明情報はEditTextのhintを使って表示するのが一般的です。(HTMLでいうplaceholder)ただし、この場合ユーザが入力を始めるとヒントが消えてしまうため、「何文字までって書いてあっただろう?」と、ユーザの短期記憶に負荷をかけてしまい、結果としてコンバージョン率も下げてしまう可能性もあります。フローティングラベルはこれを解決する手段として非常に優秀で、このように入力を始めてもヒントや説明が表示され続けるため、ユーザは迷うことなく入力することが出来ますし、動きのあるリッチなUIを提供できます。使い方はとても簡単で、EditTextをTextInputLayoutの子Viewにするだけです。</android.support.design.widget.TextInputLayout>アプリでバリデーションを行っている場合は、Java側でエラー文言を表示させることもできます。findViewById(R.id.text_input_layout);textInputLayout.setError("入力は必須です!");このFloatLabelPatternと呼ばれるUIは、iOSやWEBでの実現方法も多く作られていますので様々なフォームで活用できると思います。いう不具合があるので注意が必要です。https://code.google.com/p/android/issues/detail?id=175228Snackbarこれまでユーザへの簡易的な通知にはToastを使用することが一般的でした。Snackbarはこれに替わる新しい通知表示用コンポーネントです。Toastでは一方的な通知のみでしたが、Snackbarではアクションを設定出来るため、よりインタラクティブなUIを実現出来ます。実装もToastと似ているので、使ったことがあればすぐに採用でき、置き換えも簡単です。toastsを参照ください。FloatingActionButtonもはや説明不要のフローティングボタンです。フローティングボタンは、重要なアクションボタンが常に表示されることができ、かつ、見た目的にも邪魔をしないように設計されている非常に優れたUIです。最近ではiOSアプリやWEBでも採用されているのをよく見かけます。これまでマネーフォワードでは、Github等で公開されているFABライブラリを使用していましたが、公式対応されたということで順次置き換えを行っています。Evernote等でも採用しているFABをタップするとそこから複数のFABが飛び出すような場合には対応できていないので、これらは引き続きライブラリを使用するか自作する必要があります。いう不具合があるので注意が必要です。v23では以下の新たなライブラリが追加されています。TV発表されて間もないため、マネーフォワードのアプリには導入できていませんが、どういったライブラリで、どのように活用できそうかを簡単に紹介します。libraryこれまで比率を指定したレイアウト配置を行うためには、LinearLayoutとlayout_weightを駆使し、かつlayout_width=0dpという本質ではない記載もする必要がありました。libraryでは、PercentRelativeLayoutとPercentFrameLayoutが使用できるようになり、サイズだけでなく、マージンも「親Viewのサイズの何パーセント」という指定ができるようになりました。タブレット向けのレイアウト等で活用できるのではないかと期待しています。libraryこれまでアプリ内からWEBページを開く場合、外部ブラウザで開くかWebViewで開くかのどちらかを行っていましたが、いずれの場合においてもユーザから見ると、これまで行っていた操作が中断された印象を受けてしまいます。そのため、まるでアプリ内の画面かのようにChromeを呼び出すことができます。マネーフォワードでもURLを外部ブラウザで開かせている箇所がありますが、遷移後にアプリに戻ってきてくれるだろうかという懸念が常につきまといます。このライブラリを使うことでそのような問題を解決できるのではないかと期待しています。TVこちらはまだ未調査なので、いつか紹介できたらと思います。弊社のAndroidエンジニアが導入の際にハマったことをQiitaに投稿していますので、こちらもご参照ください。v23入れた時にハマったポイント@AndroidStudio最後にマネーフォワードでは、最新のライブラリの積極的な活用を技術的な興味だけでなく、問題解決な手段として意義を持って活用できるエンジニアを募集しています。08:00Tweet関連記事2015-06-09ジモティーの光の戦士がやって来たぞこんにちは、エンジニアの越川です。読者になるこのブログについてはてなブログをはじめよう!moneyforwardDevさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。