A-Frameのサンプル

A-Frame」というHTML(カスタム)タグでWebGLの3D図形表示ができるライブラリを試してみました。
大きさ、位置、回転確認用サンプル

<a-scene>〜</a-scene>と同じページにパラメータ入力用の<input>を書いたら入力できません。
どうも、描画のための処理が動き続けていて処理を渡してくれないみたいです。
なので、上記サンプルページみたいに外部からA-Frameの要素をいじる場合は、描画用のページを別にして<iframe>で表示する必要があるようです。

本体HTML
<a-scene>〜</a-scene>を操作するためのJavascriptはここに書く

<iframe>
ここに<a-scene>〜</a-scene>を置く
</iframe>


以上、備忘録。
スポンサーサイト

inputタグ

今日知ったこと。
JavaScriptから<input type="checkbox">にテキストを突っ込もうとしたらエラーになった。
<input type="checkbox">は子要素にテキストを持てませんと。

ということは次のように書くのは間違っているらしい。
<input type="checkbox" name="group" value="hoge">ほげ<input>

調べたらチェックボックスとかラジオボタンにテキストを関連付けたい時は<label>を使うのが正しいらしい。

ホームページのモバイル対応

ホームページの主要なページをモバイル環境でも見やすくなるように対応しました。私のページをスマートフォンなどから見る人はいないだろうと思って何もしていなかったのですが、Search Consoleを使ってみたら40%ほどのアクセスがモバイルだったので急遽対応することにしました。

以前から、CSSを切り分けて対応できることは知っていたんですが、もう少しマシな方法がないかと思って調べてみたらありました。基本、1つのCSSで対応できる方法が。

【CSS】
@media screen and (min-width: 641px){
    /* ここにPC用のスタイルを定義 */
    div#Hoge {
        position: relative;
        width: 640px;
        position: border: solid black 1px;
    }
}
@media screen and (max-width:640px){
    /* ここにモバイル用のスタイルを定義 */
    div#Hoge {
        position: relative;
        width: 100%;
        position: border: solid black 1px;
    }
}
/* ここに共通のスタイルを定義 */
・・・

このようにデバイスの解像度によって切り分けると。
で、調べて知ったのですが、モバイル用のブラウザは仮想的な画面解像度によって動作するので上のように実際よりも小さな解像度を指定すると上手く行くようです。

【HTML】
<meta name="viewport" content="width=device-width, initial-scale=1">

もう一つ、上記のようにview-pointを指定しないとスタイルシートの設定が有効になりません。

私の場合はこの対応だけでほとんど対応できたので手間も大してかからず助かりました。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。