リリース済みのアプリのアップデート作業ということでサクっと終わると思っていたのですが、ことあるごとにはまってしまい悪戦苦闘しています。さぼってるわけではないんですが、スキル不足というか集中力が続かないというか。。。
アプリを制作する上でAngularJSと英語がわからないことの不便さも痛感します。いまさらですがAngularJSの勉強をしようかと思っています（英語は来世で）。
進捗
とりあえず、このアップデート作業で何をしていたのか、制作日記から抜粋し振り返ってみます。
- 10/25 アップデート作業を開始する
- 10/28 v1.0.0のファイルデータの変換関数完成。前機能の削除、管理テーブルの変更
- 11/3 日付・時間表示形式設定機能完成
- 11/8 グラフ機能完成。ブログにAdSense広告が表示されるようになってうかれる
- 11/9 メモ機能完成。アメリカ大統領選挙。アンドロイダーの公認デベロッパー登録が完了してうかれる
- 11/14 ニフティバックエンドを利用した機能追加
- 11/15 レイジーリピート導入
- 11/16 Onsen UI v2に移行
グラフはずっとflotr2を使っているのですが、今回はじめて棒グラフと線グラフを一緒に表示することにしたのでちょっと時間がかかってしまいました。あと、ニフティバックエンドを使ってみたくて、いろいろ調べたりサンプルを作って勉強したりもしてました。
現在Onsen UI v2対応とマテリアルデザイン化を行っているところです。
この作業に意外と手間取っています。
Onsen UI v2への移行
Onsen UI v1からv2への移行自体は割とスムーズにいきました。Onsen UIドキュメント「Onsen UI 1 系からの移行」や、Monaca公式ブログ「Onsen UIをバージョン1から2へ移行するには」にわかりやすい説明があります。ただ私の場合（localkit）、「JS/CSSコンポーネントの設定画面で Onsen UI をいったん削除する」とあったのですが、インストールしたコンポーネントの一覧に Onsen UI がなかったため、そのまま Onsen UI v2.0.3をインストールしました。そうしたところ、アプリの画面がへんてこに。調べてみると、なぜか v1.3.8 の CSS ファイルを参照しているらしく、Onsen UI を削除してから再度インストールをしたら正常に動作するようになりました。
マテリアルデザイン
Onsen UI v2をインストール後アプリを起動すると、自動的にマテリアルデザイン化されるようです（IDEのプレビューは ons.platform.select(‘android’); を実行すると対応します）。最初、マテリアルデザインに違和感があり、元のデザインに戻そうかと考えたのですが、何度も見ているうちに慣れてきたというか逆にシンプルさが気に入り、今回アプリをマテリアルデザインに対応させることにしました。
Onsen UIコンポーネント（ons-xxx）は自動的にマテリアルデザイン化してくれるのですが、それ以外の要素（div, li, …）は手動で対応させる必要があります。今、この作業をOnsen UI Theme Rollerを参考にしながら行っています。例えば、ulリストは以下のような記述になります（Material List引用）。
<ul class="list list--material">
<li class="list__item list__item--material">
<div class="list__item__center list__item--material__center">
<div class="list__item__title list__item--material__title">Orange</div>
<div class="list__item__subtitle list__item--material__subtitle">Sweet fruit that grows on trees.</div>
</div>
</li>
<li class="list__item list__item--material">
<div class="list__item__center list__item--material__center">
<div class="list__item__title list__item--material__title">Pear</div>
<div class="list__item__subtitle list__item--material__subtitle">Funny-shaped fruit.</div>
</div>
</li>
</ul>
クラス名はBEM（Block Element Modifier）を適用しているので慣れてない私にはどこで切れてるか見分けるのが大変。目がしょぼしょぼしてきますが、これを自分で作成するのはもっと大変なわけで、こういうサンプルは非常にありがたいです。
なお、マテリアルデザインについてはグーグルがガイドラインを公開しています。
・公式サイト： Material design
・日本語のドキュメントはこちらからダウンロードできます。
おわり
来週リリースを目標に明日から本気出します。