「HTML5」タグアーカイブ

CSS3 FlexBox

本サイトを iPhone 対応にしたしたのは随分前だがスカスカのまま放置。

Windows をまったく使っていないのでもう Windows アプリの公開をヤメる。
するともっとスカスカに、いいかげんに隙間を埋める感じにしたい。

スマートフォン（以下スマホ）を考慮するならやはり CSS3 の FlexBox が一番だよな。
ユーザーエージェントで CSS を振り分けるほど豪華なコンテンツがあるならまだしも。

CSS flexible box の利用 – Web developer guide | MDN

tips 毎にブロックを作って横一列に並べ横幅いっぱいになったら改行。
そうすればスマホでハミ出さないし隙間も埋まる。

MDN のコードを参考に iPhone Safari 対策を入れてテスト。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0" />
<title>FlexBox Test</title>
<style>
body {
	font-family: sans-serif;
	margin: 0;
	-webkit-text-size-adjust: 100%; /* iPhone */
}
.flex {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
	text-align: left;
	margin: 5px 0px;
}
.flex > div {
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0.5em;
    margin:  0.5em;
    border: 1px solid #7c93b2;
    border-radius: 7pt;
    line-height: 1.7em;
}
</style>
</head>

<body>

<div class="flex">

<div>
aaaaaaaaaaaa<br />
bbbbbb<br />
cccccccc
</div>

<div>
d<br />
eeeeeeeeee<br />
</div>

<div>
fffffffffffffffffffffffffffffff<br />
gg<br />
</div>

<div>
hhhhhhhhhhhh
</div>

<div>
iiiiiiiiiiiiiiiiiiii<br />
jjjjjjjjjjjjj<br />
</div>

</div>

</body>
</html>

Firefox, Google Chrome, iPhone エミュレート問題無し。
実物の iPhone 5 Safari でも綺麗に横幅で埋まりました。
仕様はもうコレで固まっている、ということでいいのかな？

Google Chrome でイケるから現行 Android でも大丈夫だろう。
コッチは Blink だしエミュレートで確認すれば充分だと思う。

Internet Explorer では確認していない、ぶっちゃけどうでもいい。
せっかくデュアルブートにして残したミニノートの Windows7 なのだが…
もう半年以上起動すらしていない、残す必要なんて無かったな。

ということで本サイトにとっとと適用。
それとフォントサイズ指定を廃止したり行間を空けたりでタッチしやすく…
いやコンテンツを整理したり増やしたいのですけどね。

Girlfriend

スマホ学園恋愛ゲーム「ガールフレンド（仮）」からPC向けのブラウザ版がリリース – ねとらぼ

Linux 版 Chrome でも普通にログインできた。
レベルが結構進んでいたり HR クロエをコンプしているのは気にしないで。
ゲームは全然面白くないけど[ウチ姫]と頻繁にコラボするからヤメられない。

ちなみにコイツに課金する気は皆無なので SR がちっとも当たらないw
部活（という名のギルド）に入る気もないし横取りイベントとかは完全不参加w
たまにくれるコインは sim 無し Xperia を起動してウチ姫のガチャに使うw
それでも HR クロエ等はコンプできるしまあいいかと。

ちなみに少し前のコラボでもらった月のカケラでロリカグヤをゲット。
ロリィナが来なかったので称号クエストはソコソコにアリスを集めているけど。
水 SR が何故か全然当たらないのでシンディ取りたいけど進化無理っぽいんで。

しかしランキングを見るとロリィナだらけで引く、みなドンダケ課金してんの？
ウチ姫の知名度でこれだとパズドラやモンストはいったい…
ってこれは関係ないね。

YouTube とかを見れば解るけど JavaScript コンソールでエミュレートすれば実は以前から可能だったというオチがありますが。
せっかく普通にパソコンで見れるので Ctrl+U して中身を見てみよう。

viewport 指定はお約束どおり。
パソコン版も見事に css にて 320px に指定しているんだね。
スゲェちいさいけどスマートフォンとつじつまを合わせるにはやはりこれしかないか。

バトルシーンや劇場等のスクロールしない画面は 320×400 になっているっぽい。
しかし女の子画像を「名前を付けて保存」すると 640×800 になる。
Android and iPhone word-break | PaePoi
max-width: 100%; で縮小表示しているようだ。

トップページはリロード毎に女の子の画像とセリフが変わる。
試すと毎回ランダムに読み込んでいるので Java か PHP だろうね。

他にも色々と参考になったけど後は各自で。
簡単にソースを参考にできる環境にしてくれた運営に感謝。

面白くないとケナしておいて参考にする私もアレだと思うけど。
ウチ姫面白いです、で許してください。

HTML5 Dynamic Select

HTML5 で SeeMe(Opera serch.ini 編集アプリ) を作りたい。

Opera 使いは全員最新版を使うのでバージョンを気にする必要が無い。
ぶっちゃけ Opera にだけ対応させればいいので面倒が無い、素晴らしい。
まさに HTML5 で作るにはうってつけではないか！

というのは建前で…
Windows をまったく使っていないので Windows 版を作りたくないから。
HTML5 なら Linux で作ってツジツマを合わせればいいだけだもの。

後々で更新が面倒くさいからセクション丸ごと textarea に書き出すだけにでも…
それはどうでもよくて。

とりあえず ListBox みたいなのを作るには <select> タグでいいようだ。
コレを動的に作成して順番の入れ替えなんかの処理を入れればイケる。

Select in HTML 5
Dynamic Select in HTML with Ajax

何故か動的な JavaScript 編集コードはフランスで見つける。
日本の HTML5 解説サイトって何故かみんな似たようなのばかりでこういうのが見つからない、探し方が悪いのだろうけど英語で探したほうが早いのはたしか。
どうでもいいがドイツからコメントスパムが来るようになったぞ。

とにかく SeeMe に必要な新規作成、上下移動、削除のテストコード。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SeeMe for HTML5</title>

<style>
#id_name { float: left; }
#id_edit { float: left; }
</style>

<script>
function on_up(listbox) {
    var i = listbox.selectedIndex;
    if (i > 0) {
        var str = listbox.options[i].text;
        listbox.options[i].text = listbox.options[i-1].text;
        listbox.options[i-1].text = str;
        listbox.selectedIndex = listbox.selectedIndex - 1;
    }
}
function on_down(listbox) {
    var i = listbox.selectedIndex;
    var len = listbox.length;
    if (i < len-1) {
        var str = listbox.options[i].text;
        listbox.options[i].text = listbox.options[i+1].text;
        listbox.options[i+1].text = str;
        listbox.selectedIndex = listbox.selectedIndex + 1;
    }
}
function on_new(listbox) {
    var len = listbox.length;
    listbox[len] = new Option("new!");
    listbox.size = len + 1;
    listbox.selectedIndex = len;
}
function on_delete(listbox) {
    var i = listbox.selectedIndex;
    if (i == -1) return;
    listbox.options[i] = null;
    listbox.size = listbox.size - 1;
    var len = listbox.length;
    if (len == 0) {
        return;
    }
    else if (i == len) {
        listbox.selectedIndex = i-1;
    }
    else {
        listbox.selectedIndex = i;
    }
}
function on_select(form) {
    var i = form.listbox.selectedIndex;
    form.edit1.value = form.listbox.options[i].text;
    form.message1.value = form.listbox.options[i].text;
}
function init() {
    var listbox = document.getElementById("id_select");
    for (var i=0; i<10; i++) {
        listbox[i] = new Option("Item" + i);
    }
    listbox.size = 10;
}
</script>

</head>

<body onLoad="init()">


<form>
<div>
<input type="button" value="up" onclick="on_up(this.form.listbox)">
<input type="button" value="down" onclick="on_down(this.form.listbox)">
<input type="button" value="new item" onclick="on_new(this.form.listbox)">
<input type="button" value="delete item" onclick="on_delete(this.form.listbox)">
</div>
<div id="id_name">
<select id="id_select" name="listbox" onchange="on_select(this.form)"></select>
</div>
<div id="id_edit">
<input type="text" name="edit1" size=20><br />
<textarea name="message1" rows="6" cols="60px"></textarea>
</div>
</form>

</body>
</html>

問題なく移動な削除ができるようだ。
ということで早速こんな感じにしようと作っていた。
ユーザー名と OS さえ解れば ini のパスは解るからと思ったけど…

File オブジェクトはパスや URI の文字列からは作成できないんだね。
間に PHP あたりを噛ませてなんとかするしか無いかな…
挫折したらごめん、多分もう Windows 版は更新しない。

HTML5 Local File Drop and Input File

HTML5 は Local ファイルの編集もできる。
一番利用されるだろうと思われるのはやはりテキストファイルの編集。
ということで今回はファイルの読み込みを勉強する。
<imput> を利用するかドラッグアンドドロップで読み取る方法を。

これは興味がある人が多いようで検索するとワラワラ見つかるね。
でも手段が結構バラバラだったりするので一番最適と思われる方法を探す。
手段は File object を得て FileReader で読み込めばいいようだ。

残念ながら Opera 11.51 はドラッグアンドドロップ未対応だ…
HTML5 の仕様に含まれているのだから今後は対応してくれるだろう。
IE はどうでもいい。

とにかく Firefox, WebKit で上手くいったコード。
Opera も Input だけなら読み込みできる。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Drop and Input</title>

<script>
function writeText(f) {
    var reader = new FileReader();
    reader.readAsText(f, "utf-8");
    var text = document.getElementById("IDTEXT");
    reader.onload = function(e) {
        text.innerHTML = e.target.result;
    }
    reader.onerror = function(e) {
        switch (e.target.error.code) {
        case 1:
            text.innerHTML = "NOT_FOUND_ERROR!";
            break;
        case 2:
            text.innerHTML = "SECURITY_ERROR!";
            break;
        case 3:
            text.innerHTML = "ABORT_ERROR!";
            break;
        case 4:
            text.innerHTML = "NOT_READABLE_ERROR!";
            break;
        case 5:
            text.innerHTML = "ENCODING_ERROR!";
            break;
        default:
            text.innerHTML = "Unknown ERROR!";
        }
    }
}
function changeInputValue(e) {
    var f = e.target.files[0];
    writeText(f);
}
function init() {
    document.addEventListener("dragover", function(e) {
        e.preventDefault();
    }, false);
    document.addEventListener("drop", function(e) {
        e.preventDefault();
        var f = e.dataTransfer.files[0];
        writeText(f);
    }, false);
}
</script>

</head>

<body onLoad="init()">
<p>Drop here</p>

<form>
<input type="file" id="IDURI" onchange="changeInputValue(event);">
</form>

<p id="IDTEXT">URI</p>

</body>
</html>

コンストラクタ（という表現は正しいのだろうか？）
init でこう書けば event object が得られるようだ。
preventDefault メソッドを呼んでブラウザのデフォルト動作を無効にする。
dataTransfer.files メソッドで File object の List が得られる。
その List から添字を使って取り出す、複数ファイルなら for 文を使う。

input は onchange でこう書けば event object 付きで関数が呼べるようだ。
target.files メソッドで File object の List が同様に得られる。

肝心なファイルを読み込んで書き出す処理は少し面倒。
C の fopen や Python の open, read みたいにはいかないようだ。
FileReader の readAsText 関数で読み込んでコールバックで処理する。
読み込みが正常終了すると onload が呼ばれるので event object の target.result プロパティからテキストを得る。

どうでもいいけど Python ばかりやっているとこういう書き方が不自然で…
IronPython の時も思ったけどイコールでの代入時に括弧が無いと変に感じる。

ところで onerror の処理をやたら丁寧に書いていますが…
Original Webkit Browser @ Fedora 15 | PaePoi
で表示できなかったから原因を調べるためである。

WebKitWebSettings

# setting
setting = self.webview.get_settings()
setting.set_property("enable-file-access-from-file-uris", True)

を __init__() のどこかに入れれば表示できるようになります。
Local のファイルアクセスは WebKit デフォルト状態では弾かれるようです。
Chrome では読み込めるようなのにとコレだけで一日悩んでしまったぞと。

書き込みは FileWriter を使う、後日。
その前にリストボックス作成と JavaSclipt で ini ファイル読み書きをやりたい。
何を作ろうとしているかはわかる人には解る。
現実として作りたいアプリが無いとプログラミングの勉強は絶対に続かないよ。

HTML5 Keyboard and Mouse Event

HTML5 を勉強しているけど、多岐に渡りすぎてポイントが掴めない人が多いかも。
とにかく解ったことで普通に利用しそうなもの。

innerHTML 等でリロードせずとも動的にページ内容を変更可能
canvas で図形描写の動的変更が可能
css3 アニメーション等で見栄えのよい UI を構築できる
マウスイベントやキーボードイベントを利用できる
ローカルファイルの編集にも使える

つまり今までは実行ファイル形式で作っていたアプリケーションを Web ブラウザ上で動くアプリケーションにて実現できる技術ということなんだね。
JAVA や Flash 等の特定企業提供に頼らず標準仕様として確立させたわけだ。

ということで。
キーボードとマウスのイベントを捕まえて処理するコードを試す。

書くまでもなく IE はガン無視、Fedora Linux だもん私は。
少なくとも IE9 が使えない Windows XP のサポートが終了するまでは IE なんて意図的に無視したほうが賢明なくらいだ。
アクセスログを見ると IE6 がまだ沢山いて呆れるよ…

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Keyboard and Mouse Event</title>

<script>
function on_keypress(e) {
    var num = e.keyCode || e.charCode;
    var text = document.getElementById("IDTEXT");
    text.innerHTML += String.fromCharCode(num);
}
function on_mousemove(e) {
    var text = document.getElementById("IDMOVE");
    text.innerHTML = "x=" + e.clientX + " y=" + e.clientY;
}
function init() {
    document.addEventListener("keypress", on_keypress, false);
    document.addEventListener("mousemove", on_mousemove, false);
}
</script>

</head>

<body onLoad="init()">
<p id="IDMOVE">x= , y=</p>
<p id="IDTEXT">Press Keyboard Charactor.</br /></p>
</body>
</html>

addEventListener は document に指定すればフォーカスを気にする必要は無くなる。
逆にフォーカスがある時だけハンドリングしたい場合は getElementById で指定。

イベントハンドラ引数の e から詳細が得られる。
e.keyCode は Opera と WebKit のみ
e.charCode は Firefox と WebKit のみ
しかたがないからこうすることに。
mouse の e.offsetX は Opera と WebKit
e.clientX なら全部でまかなえた。

流石はアホみたく更新しまくっている WebKit が一番柔軟だ。
今後の更新でどうなるか解らないけど現時点なら上記でハンドリングできる。

ただキーボードはブラウザの割り当てというものが…
主にマウスやタッチパネルで扱うアプリが主流になるのだろう。
だからタブレットはやたら HTML5 を押しているのか、と今更な発見であった。

日	月	火	水	木	金	土
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31