senmyou | senmyou's blog

私のいる地域（岩手沿岸）では台風１０号の影響で健康診断が一か月延期になりました。そして今日、待ちに待ってない健康診断に行ってきました。外で順番待ちの間とても寒かったのと、血を抜かれたのとでだるだるです。ということでリハビリがてらブログ更新です。今週のアプリのアップデート作業はほとんど進まず。おもしろいようにハマるので、もう無理せず行くことにしました。転んでただで起きるのは損なので、この一週間でハマったことをネタにします。

HTML/CSS 編

その１

display: black;

正解は「block」。どうやら blackを指定してもディスプレイは黒くならないようです。勉強になりました。

その２

<div style="margin:10px;width:100px;height:100px;" class="..." style="padding:10px">

デバッガで直接要素のスタイルを書き換えてレイアウトやデザインを調整しているとき、style属性に値を設定しても反映されず悩みました。よく見ると前のほうにすでにstyle属性が。これはきっと属性を複数使っちゃダメということですね。上記の例では２つ目の「style=”padding:10px”」が無効になりました。

ons-input type=”radio” 編

その１

これまでラジオボタンは 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");

なんかほかにもあったような気がしますが今日はここまで。

投稿者: senmyou

Meditation Note V1.1.0 アップデート

こまったときのお助けリンク集

公式サイト

フォーラム/コミュニティ

ons-input について

HTML/CSS 編

その１

その２

ons-input type=”radio” 編

その１

その２