アプリ開発ブログ
私がよく利用させてもらっている Monaca / Onsen UI 関連サイトをまとめました。
Monaca
https://ja.monaca.io/
Onsen UI
https://ja.onsen.io/
Cordova
https://cordova.apache.org/
teratail（テラテイル）
https://teratail.com/tags/Onsen+UI
Monaca × Onsen Community
https://community.onsen.io/
GitHub
https://github.com/OnsenUI/OnsenUI/issues
stack overflow（スタック・オーバーフロー）
> 日本
http://ja.stackoverflow.com/
> 海外
http://stackoverflow.com/
Qiita（キータ）
https://qiita.com/
私のいる地域（岩手沿岸）では台風１０号の影響で健康診断が一か月延期になりました。そして今日、待ちに待ってない健康診断に行ってきました。外で順番待ちの間とても寒かったのと、血を抜かれたのとでだるだるです。ということでリハビリがてらブログ更新です。今週のアプリのアップデート作業はほとんど進まず。おもしろいようにハマるので、もう無理せず行くことにしました。転んでただで起きるのは損なので、この一週間でハマったことをネタにします。
display: black;
正解は「block」。どうやら blackを指定してもディスプレイは黒くならないようです。勉強になりました。
<div style="margin:10px;width:100px;height:100px;" class="..." style="padding:10px">
デバッガで直接要素のスタイルを書き換えてレイアウトやデザインを調整しているとき、style属性に値を設定しても反映されず悩みました。よく見ると前のほうにすでにstyle属性が。これはきっと属性を複数使っちゃダメということですね。上記の例では２つ目の「style=”padding:10px”」が無効になりました。
これまでラジオボタンは input要素で作成していましたが、今回 Onsen UI v2を使用するにあたり、はじめて ons-input 要素を使ってみました。そこで謎の現象が。マテリアルデザインのラジオボタンをタップすると、checkedが付加されることでCSSのアニメーション処理が発生し、緑の丸がscale(0)からscale(1)に拡大します。心地よいアニメーションです。ところが、IDEのプレビュー動作はスムーズなのですが、Monacaデバッガでは緑の丸が表示される前に四角形が一瞬表示され、ちらついて見えます。私だけ？
ソースを出すほどではありませんが、とりあえず載せてみます。
... 略 ...
<script src="lib/angular/angular.min.js"></script>
<script src="lib/onsenui/js/onsenui.min.js"></script>
<script src="lib/onsenui/js/angular-onsenui.min.js"></script>
... 略 ...
<body>
<ons-page>
<ons-toolbar>
<div class="center">radio button - test</div>
</ons-toolbar>
<div style="margin: 10px;">
<ons-list>
<ons-list-item tappable>
<label class="left"><ons-input name="g1" type="radio" input-id="r1" checked></ons-input></label>
<label for="r1" class="center">radio 1</label>
</ons-list-item>
<ons-list-item tappable>
<label class="left"><ons-input name="g1" type="radio" input-id="r2"></ons-input></label>
<label for="r2" class="center">radio 2</label>
</ons-list-item>
<ons-list-item tappable>
<label class="left"><ons-input name="g1" type="radio" input-id="r3"></ons-input></label>
<label for="r3" class="center">radio 3</label>
</ons-list-item>
</ons-list>
</div>
</ons-page>
</body>
</html>
いろいろ調べたり試しました。ネットで検索していると「:checked擬似クラスの隣接セレクターのWebkit系での挙動とか」や、そこで紹介されている「Chrome/webkit not rendering css display change on input:checked + element + element」という記事を見つけ、これで解決と喜び勇んで隣接セレクタを間接セレクタに変更してみたのですが効果なしでした。
結局、よく分からないながらも以下のようにチェック前の内側（:after）のopacityを１から０に変更することで四角形の表示を抑止できました。
.radio-button--material__input + .radio-button__checkmark:after {
opacity: 0;
}
これでうまくいってそうに見えますが、ダイアログ上のラジオボタンで試すとアニメーションが発生しないようです。別問題かもしれませんけど。とりあえず、私としては四角形はこれで防いで、アニメーションは最悪なくてもいいかなと思ってます。ほんとは原因・対策がはっきりするのが一番いいのですが、留意事項ということで。
input 要素でラジオボタンを作成していた時は、以下のように document.getElementsByName() で input要素にアクセスしていました。
// チェックしている項目を取得
var radioList = document.getElementsByName("background");
for(var i=0; i<radioList.length; i++){
if (radioList[i].checked) {
...
}
}
// チェックする
var radioList = document.getElementsByName("background");
radioList[mdt.setting.backgroundType].checked = true;
ここで、ons-inputにname属性を設定し上記と同様にアクセスすると、うまくいきませんでした。
原因は、ons-input に設定した name属性が、ons-input の子要素として生成される input要素にも設定されるため、document.getElementsByName()で取得した配列には input要素と ons-inputコンポーネント両方が格納されるからです。マニュアルの属性欄にはnameの記載がありませんが実例の５ページ目でname属性を使用していますし、name属性はあったほうが自然だと思います。ons-inputの input-id属性と同じように input-name属性を用意してinput要素にだけ name属性を付けるようにするといいような気がします、素人考えですが。
現状でラジオボタンへアクセスするために、ラジオボタンの親要素にidを追加し、document.getElementsByName() を document.querySelectorAll() に変更してアクセスするようにしました。
var radioList = document.querySelectorAll("#background-list input");
なんかほかにもあったような気がしますが今日はここまで。
リリース済みのアプリのアップデート作業ということでサクっと終わると思っていたのですが、ことあるごとにはまってしまい悪戦苦闘しています。さぼってるわけではないんですが、スキル不足というか集中力が続かないというか。。。
アプリを制作する上でAngularJSと英語がわからないことの不便さも痛感します。いまさらですがAngularJSの勉強をしようかと思っています（英語は来世で）。
とりあえず、このアップデート作業で何をしていたのか、制作日記から抜粋し振り返ってみます。
グラフはずっとflotr2を使っているのですが、今回はじめて棒グラフと線グラフを一緒に表示することにしたのでちょっと時間がかかってしまいました。あと、ニフティバックエンドを使ってみたくて、いろいろ調べたりサンプルを作って勉強したりもしてました。
現在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
・日本語のドキュメントはこちらからダウンロードできます。
来週リリースを目標に明日から本気出します。