Androidエンジニアの古家です。先日、私が所属するチーム内でAndroidアプリを作成するワークショップを開催しました。

私が所属するチーム(社内ではユニットと呼ばれています)は、ProttのWebフロントエンド / Mac app / iOS / Androidの各エンジニアが所属しています。

普段は各自の専門分野でUIを実装していますが、実際のアウトプットを見る機会はあっても、どのように実現されているか、知る機会はあまりありません。
他のプラットフォームのUIを実装してみることで、チーム内でのコミュニケーションの活性化や、普段他のメンバーがやっていることを知ってみよう、という試みです。今回はそんなワークショップのレポートをお届けします。

Androidアプリを作ってみよう!

Androidエンジニア陣で検討した結果、「ConstraintLayoutを使ったUI実装」をメインテーマに置くことにしました。
ConstraintLayoutであれば、UIベースのエディタで比較的直感的に編集を行うことができるため、Androidに馴染みの薄いメンバーでも取っ付き易いのではないかと考えました。
iOSのAutoLayoutにも少し似ていますね。

今回は、事前に環境設定用のドキュメントとサンプルプロジェクトを用意し、お題に沿ってUIをカスタマイズしてもらいました。

 

余談ですが、ConstraintLayoutは昨年登場した比較的新しいUIの実装方法です。
複数の画面サイズに対応する際に簡潔に定義できる点や、描画パフォーマンスの面で利点があります。
レイアウトXMLに慣れ親しんだAndroidエンジニアは、息をするようにXMLエディタだけでUIを構築出来るため、なかなか導入が進んでいません。
※私のことです。

当日の様子

当日はAndroidエンジニア2名で進行しました。
まずはじめに、Android StudioやConstraintLayoutの基本的な使い方をレクチャーし、簡単なカスタマイズを一緒に行いました。

当日用意した課題

講師が実演してリアルタイムにエディタに反映されると、「おお〜」と声が上がっていましたよ!
普段からUIを実装しているメンバーだけあって飲み込みが早く、最後はお題がなくなって進行役の我々が焦る場面も・・・。

参加者の声

楽しかったー!!!要素の端と端を繋いだら見た目がぐにぐに動くのがおもしろかったです。

直感的にUIがつくれていいなーとおもった。Webにはこういう仕組みないので。

普段Webアプリケーションを実装しているメンバーは、UIエディタを使って実装する方法が新鮮だったようです。
またiOSエンジニアとは環境構築やプロジェクトの依存するライブラリの準備方法の違いについて話すことができました。

今回は、UI実装に特化する形のワークショップを開催しました。
参加したメンバーからは、APIとの連携や、もっとKotlin書いてみたい!といった感想ももらっています。
次回はもう少し時間を使って、踏み込んだアプリを作ってみるのも良いのかもしれませんね。

最後に

次期iPhoneの噂や、Andy Rubin率いるEssentialのPH-1やSamsung Galaxy S8のような全面ディスプレイ端末が市場に増えていくようで、モバイルアプリのUIは、新たな岐路に立っているのかもしれません。
iOS11でのAppStoreをはじめとした大幅なUI変更も気になりますね。
Androidは今のところメーカー独自の取り組みが中心ですが、OSとして何か手を加えてくるのか、今後の展開に注目しています!


弊社では、UIデザインを真剣に考えたいフロントエンド/モバイルアプリエンジニアを募集しています!
興味のある方は、ぜひ一度弊社に遊びにきてください!