年末に kotlin に興味を持つ機会があり、自宅環境に Android Studio をいれて触ってみたのですが、
言語そのものを気にいったのもあるけど、Android Studio の kotlin 対応の出来の良さと、アプリ実装のし易さが気持ちよかったので、そのまま本格的に勉強しながら アプリを一本作ってみました。
期間は丸一月くらいですが、法事と腸炎で10日ちょっと作業できない日があったので、実質20日弱くらいの可動日数ですかね。
方眼紙マッピング - Google Play の Android アプリ
もの自体は比較的簡単な構造のエディタアプリで、方眼紙状のキャンバスのセル1つ1つに、アイコンや文字を置いて色を変えて記録する為のものです。
昨年『The Witness』をプレイした際に、用途に適したメモアプリを発見出来ず、最終的に手書きのメモアプリに自分で線を引いてメモしたのを覚えていたので、題材はアレにしよう と気軽に決めた感じでした。
まずぶっちゃけると、出発点は kotlin の勉強のつもりだったけど、どっちかというと Android の Layout & View についてと、マテリアルデザインについて学ぶ時間が大半だった。
kotlin(とKotlin Android Extensions) は確かに非常に書きやすいというか、Java でアプリ書く時に必要なお約束ごとを大量に省略できるので、コードがスッキリして良かったが、本来的には Java の実装を把握した上で、それを置き換えるような学習フローをとるべきなのかも。
いきなり kotlin から入ると、Android の実装を学ぶ為に大量に読む事になるであろう Java のサンプルコードが直感的に読み取れなくて大変つらかった。(そもそも Java も10年触ってねーしな......)
ただもう 今更 Java に戻して書き直す気もしないので、やっていく気持ちでやっていくしかないのである。
(Android Studio には高機能な Java -> kotlin 変換機能がついていて、Java のコードを貼り付けるとある程度のコードなら自動変換してくれたりするが)
さて Kotlin は置いといて、Android の実装自体は Windows Phone の実装と似た感覚で出来たというか、当時の xaml よりも 書きやすいしエディタも優秀で編集しやすいし Android Studio 様々だな っといった感じ。
WEB 開発者が取っ付き易いというか、ある程度似通った構造になってて、エンジニアの流動性が確保されてる感がある。
あと門外漢ながらアプリ全体のデザインもやらなければならない個人開発者としては、共通的なデザイン指標としてマテリアルデザインが存在している事に多いに助けられた。
この辺はデザイン的な素養次第なとこもあるけど、こーゆー指標みたいなのが無いと手探りで実装した上で見た目もダサい みたいな微妙なものになりかねないので、WindowsPhone アプリ作ってた時の Modern UI と同じく かなり楽させてもらった。
ただ実際に「こーゆー用途のメニューはココにこーゆー形で実装するのが望ましい」みたいな指標が明確な割に、その機能を実装する為の方法が公式で提供されてないケースが多々あってちょっと辛い。
サポートライブラリでカバーしてるものもあるが、その他には有志のライブラリにも助けられた。
この辺、SDKの世代ごとの変遷がけっこう激しいので、検索する時はある程度記事の時期を絞って参照した方が良い。
今回触れた技術的なトピックは以下
・独自実装のビュー - Custom Views
並べている Cell 1つ1つが独自ビューになってる。
canva 描画関係の色々なノウハウが学べた。
View の配置に関しては DOM に似てるようで、ちょっと違う所があるので 似たようなもんだと思ってやってると痛い目みる事がある。
・全ての画像データを Vector で処理 - Vector Drawable
各サイズにアイコンを準備する手間が省け、また表示サイズをあまり意識しなくて良い。
実際にアプリのアイコンも最終的に Inkspace で自分で SVG ファイル作ったりした。
・ActionBar と Option Menu - menu
デフォルトのテーマに組込まれているものなので特段変わった事はしていないが、undo/redoボタンの色変更時の再描画とかわりと癖があった。
・ボトムシート(下からニュッて出るやつ) - Bottom sheets (Material Design)
Google Maps アプリとかその他大半のアプリで下から出るダイアログ変わりのメニュー的なもの。
今回はエディタの編集パレット的なものを全部ここに出している。
・ナビゲーションドロワー(左からニュッて出るやつ) - Navigation Drawer
左側にメインメニューを出したり、チャットアプリだとチャンネル一覧を出したりなど、多彩に使われている片付けられるサイドバー的なもの。
今回はファイル関連のメニューを突っ込んだ。
・FAB (右下にある丸いやつ) - Floating Action Button (Material Design)
SDK に組込まれているものは ボタン機能のみで、展開するメニュー等の実装方法は提供されていない為、サードのライブラリを使わせてもらった。
メニューがスッキリしたが、現状展開用のボタンのアイコンを途中変更する機能が無いので、
モード選択等に使いやすい UI なわりには current を示すのに使えない点が少し不満。(今は色だけ変えて対処してる)
・ファイル入出力
Android は SDK が新しくなるにつれ、セキュリティ的な制限が厳しくなっていく為、やる事はシンプルだけど気をつける点は多かった。
画像をシェアなどでアプリローカルに保存した画像をシェアさせる所が詰まりがち。
実際のフォーマットは json と csv の合わせ技みたいになってる。
あと Android だと保存せず終了されるケースが多そうなので、オートバックアップ機能なんかも組み込んだ。
・画像をシェア、または FB と Twitter の SDK 組み込み
難しかった点についてはすでに書いたが、ここで Facebook と Twitter のフィシャル SDK の組み込みを行った。
実際に投稿するテストまでは行えたが、最終的に個別メニューとして置く事をやめ intent による共有に統一したため、ライブラリは削除した。
・View の拡大縮小 - natario1/ZoomLayout
これはちょっとカスタムビューの勉強と平行するのは面倒くさかったのでライブラリに頼りました。
初期のズームサイズがビューがすべて入り切るまで縮小してしまう仕様に難があり、最終的にソースほぼ全部読む羽目になったので、果たして早かったのか遅かったのかは不明。
2本指スクロールに対応していない為、レイヤー機能実装の前段階で こちらのライブラリを自前で拡張する事になるかも。
・アダプターによるデータの流し込み - AdapterView
アイコン画像の選択画面やファイルの一覧表示など、Adapter を使って流し込むのが大変楽でした。
データバインディングとは別で一方通行なのだが、出来れば Cell 全体のデータについて 二重のコンテナと結び付けてデータバインディングしたいのだが、少し根が深そう。
・広告の表示と Firebase - AdMod
AdMod による広告表示を実装。
以前 ads SDK で組込まれていた所が、Firebase ベースに置き換え中のようで、
古い情報が混ざっているのでオフィシャルのサンプルみるのが一番良かった。
なお、広告はある程度ユーザーにバラつきが発生するまで配信されないケースもしばしばなようで、自分で見てみても全然表示されない。(test ad は見れる)
・ライセンス表示
ビルドツールの設定から自動生成してライセンスを表示する為のプラグインなんかもあるんだけど、その辺選びつつ Qiita に記事書きながら cookpad さんのやつ組み込んだ。
Androidアプリにライセンス表示を埋め込むライブラリいくつか - Qiita
正直他の人どうしてんだろう?って所が気になる。
やらないといけない所だけど時間かけたくない所でもあるし、もっとノウハウあってもいい気がする。
今後組込みたい機能と技術トピック
・アプリ内課金
広告を消すくらいしか提供できるものがないが、とりあえず組み込んでみたいトピック。
・多言語化
すでにアプリ内の文字列データに関しては 外部データ化しながら実装してあるので、言語パックを用意すればいいだけだとは思う。
海外向けにもリリースするとなると、ストアとかの表示もローカライズしないとなので、ちょっと準備がいりそう。
(組み込みの sample ファイルは言語に依存しないようにしてある)
・提供された機能を利用する形のサーバー通信 - Firebase
公開直後に、ユーザー間で編集を共有できると使い方に広がりができるのではないか?というアドバイスをもらったのですが、
とりあえずスタンドアロンのエディタとして作ってる間には手を出せないけど、Firebase のサービスを使って Map データを共有できるチャット機能を組込むのは面白そうだな っと思ってます。
ただ、実際につかうと Firebase にどの程度データを送る事になるのか考えないと、無料アプリの運用で金が飛んでいく事になりかねいないけども......
・多重レイヤへの描きこみ機能と2本指スクロール
現在、メインのビューへの操作は全て ZoomLayout が処理しており、スクロールとピンチ操作を処理しつつ、子ビューに伝播させるか判断しているのだけど、
これだと子ビュー側でスライド操作が利用できない為、範囲選択や線を描いたりといった操作が実装できない。
まず ZoomLayout を拡張するなりして、2本指スクロールを実装して、通常のスライド操作を子ビューで使えるようにする事。
その上で、マッピングした Cell の上にレイヤを置けて フリーハンドで書きこんだり、ラインツールで線を描けるようにしたいと思ってます。
こんなトコかな。
久し振りに土日もガッツリ開発にかけれてハマっていた楽しかった。
UI 回りは使いまわせる部分も多いし、同程度の規模の独自View詰んだエディタアプリなら、今なら1週間で仕上げられる気がする。
なんか面白いアイデアないかな~
コメントする