「HTML5」タグアーカイブ

click addEventListener

前回なにげに書いたコードを見返してアレ？となった。
addEventListener には click イベントを指定できるのか。
touchend とか mouseup みたいなのでなくていいんだね。

タッチパネルとマウスの両方がこの指定でイケるみたい。
それぞれでどんな感じになるか実験ページを書いてみよう。

?
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>タップとクリック</title>
<!-- for Smart Phone -->
<meta name="viewport" content="
    width=device-width,
    initial-scale=1.0,
    minimum-scale=1.0,
    maximum-scale=1.0,
    user-scalable=no" />
<style>
body {
    -webkit-text-size-adjust: 100%;
    font-size: 24pt;
}
div {
    background-color: #000088;
    border: 1px solid #0000ff;
    color: #ffffff;
}
</style>
<script type="text/javascript"><!--
 
    var counts = [0, 0, 0];
    var touch, mouse, click = null;
 
    var init = function() {
        // Touch
        //if (window.TouchEvent) {
            touch = document.getElementById("ID_TAP");
            touch.addEventListener("touchend", function() {
                counts[0] += 1;
                touch.innerHTML = "タップカウント: " + counts[0];
            });
        //}
        // Mouse
        mouse = document.getElementById("ID_MOUSE");
        mouse.addEventListener("mouseup", function() {
            counts[1] += 1;
            mouse.innerHTML = "マウスカウント: " + counts[1];
        });
        // Click
        click = document.getElementById("ID_CLICK");
        click.addEventListener("click", function() {
            counts[2] += 1;
            click.innerHTML = "クリックカウント: " + counts[2];
        });
    }
    //-->
</script>
 
</head>
<body onLoad="init()">
 
<div id="ID_TAP">タップカウント: 0</div>
<br />
<div id="ID_MOUSE">マウスカウント: 0</div>
<br />
<div id="ID_CLICK">クリックカウント: 0</div>
<br />
<p><a href=".">Back</a></p>
</body>
</html>

タップとクリック

tap_click

あれ？タッチパネルエミュレートで mouseup イベントが発生するのね。
iPhone Safari で試してもやはり同じ、そういうものなのか。

touchend は当然タッチパネルかエミュレートでしか反応しない。
まあこのイベントは本来マルチタッチ用途ですし使い道が違うかと。

click イベントという名前も直感的だし両対応だし今後はコイツだな。
しかし HTML5 関連サイトでもあまり見かけないような。

a download

Web を回って気になるタグを見つけた。
a 要素には download 属性を付けることができるんですね。

a 要素 – HTML | MDN

Safari は現在未対応か、残念。
Apple はセキュリティ関連で対応しないのかもだけど。

JavaScript – aタグのdownload属性 – Qiita

こんなことができるみたい。
いや、これって通常はダウンロードできないファイルに使えないか？
application/x-php とかね。
PHP が実行される前のファイルのままダウンロードできるかも。

?
1
<a href="#" download="index.php">PHP ファイルをダウンロード</a>

とやってみると Chrome は OK だけど Firefox はダメ。
PHP は当然のように実行されてしまった、残念。
うーん、素直に MDN の方法を試してみる。

?
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
32
33
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>a download</title>
<!-- for Smart Phone -->
<meta name="viewport" content="
    width=device-width,
    initial-scale=1.0,
    minimum-scale=1.0,
    maximum-scale=1.0,
    user-scalable=no" />
<script type="text/javascript"><!--
    var init = function() {
        var link = document.createElement('a');
        link.innerHTML = 'download php file';
 
        link.addEventListener('click', function(ev) {
            link.href = 'index.php';
            link.download = "download.php";
        }, false);
        document.getElementById("ID_DL").appendChild(link);
    }
    //-->
</script>
</head>
<body onLoad="init()">
<div id="ID_DL"></div>
 
<br />
<p><a href=".">戻る</a></p>
</body>
</html>

a download

a_download

リンクの下線が表示されないしマウスカーソルも矢印のまま。
でもクリックすれば Chrome, Firefox 共ダウンロードできた。
クリックした後は下線が付くのは何故なんだろうな？

PHP はやはり実行された後のファイルしか取得できない。
そういう使い方ではないということでしょう。

でも通常はダウンロードにならない PHP でもダウンロードになるのは確認できた。
iOS 版 Chrome はガン無視されたじゃねーかコノヤロウ。
モバイルで便利そうな仕組みなのにモバイル未対応という…
まあ今後どうなるかはワカンナイZE!

Smart Phone Auto Link

iOS 9.0.1 にアップデートが早速きた。
window.innerWidth 初期値の不具合は直っていなかった。
うーん、やっぱり対策しなきゃダメか。

面倒だから当面は全部モバイル用 CSS にする。
いや、上手い回避法が思いつかないだけです。

色々調べているうちに面白いことを見つける。

自動リンクの確認

住所をタップで Map が開くのって便利そうだな。
iPhone でもやってほしいな日式住所対応で。

てか Google ってココまでやるのかと。
スマホのアプリ作りは個人じゃ話にならんレベルになっているや。

JavaScript Map to ComboBox

Javascript tips – 連想配列(ハッシュ)の要素取得

あれ、JavaScript の配列って普通に for in が使えたの？
Python 等と違ってキーが戻るってことなのね。

てっきりメソッド列挙しかできないと思いこんでいた。
ちと Gjs で試してみるか。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
#!/usr/bin/env gjs
 
// Map
var map = {TOYOTA: "LEXUS", HONDA: "ACURA"};
map["NISSAN"] = "DATSUN";
for (var key in map) {
    print(key + " : " + map[key]);
}
print(" ");
// Array
var array = ["YAMAHA", "HONDA", "SUZUKI"];
array.push("KAWASAKI");
for (var key in array) {
    print(array[key]);
}
print(" ");
// Method
const Gtk = imports.gi.Gtk;
for (var s in Gtk.Window) {
    print(s);
}

gjs

うん Gjs でも問題無し、仕様のようだ。
forEach でも結果は同じだけどコッチのほうが違和感が少なくていい。

Array.forEach – JavaScript | MDN
Map.prototype.forEach() – JavaScript | MDN

ということで、JavaScript でコンボボックスを作る。
スマートフォンを考慮すると ListBox は使いたくない。

?
1
2
3
4
5
6
<form>
    <select>
        <option>KAWASAKI
        <option>SUZUKI
    </select>
</form>

実際の運用ではこういう HTML に直書きなんてほぼありえない。
データベースやファイルから読み込んで割り当てていくわけでして。
多分 Java か PHP で動的にタグを追加していくのが主流だと思う。

というか IE というゴミがさ。
それについては企業向けな人達にまかせてと。
IE をガン無視、スマートフォンはバッチリなサンプルコード。

?
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- for Smart Phone -->
<meta name="viewport" content="
    width=device-width,
    initial-scale=1.0,
    minimum-scale=1.0,
    maximum-scale=1.0,
    user-scalable=no" />
<title>コンボボックスを使う</title>
<style>
body {
    font-family: sans-serif;
    /*margin: 0;*/
    -webkit-text-size-adjust: 100%; /* iPhone */
}
</style>
<script type="text/javascript"><!--
 
    const truck = {
        "大好きな 4t トラックを選んでください": "未選択",
        "ISUZU":  "フォワード",
        "FUSO":   "ファイター",
        "TOYOTA": "トヨエース",
        "HINO":   "レンジャー"
    };
 
    var init = function() {
        var combobox = document.getElementById("ID_COMBOBOX");
        combobox.onchange = function() {
            var item = combobox.options[combobox.selectedIndex].value;
            var text = document.getElementById("ID_TEXT");
            text.innerHTML = item + " です";
        };
        for (var key in truck) {
            combobox.appendChild(new Option(key, truck[key]));
        };
    }
    //-->
</script>
</head>
 
<body onLoad="init()">
 
<form>
<select id="ID_COMBOBOX">
</select>
</form>
 
<p id="ID_TEXT">未選択</p>
 
<p><a href=".">Back</a></p>
 
</body>
</html>

コンボボックスを使う

連想配列を利用して動的にコンボボックスに追加してみました。
こうしておくと追加や並べ替えをしたくなった時に便利。
珍しくパソコンブラウザでも動くよ、IE は知らない。

ところで iPhone でコンボボックスを使うとこうなります。

iphone_combobox

小さい画面でも使い易いように工夫してますね。
wonder なんとかは小さいボタンに耐えられず削除しました。

CSS3 table

glib ネタが尽きてきたので久々に HTML5 で。

モバイル Yahoo なんかで使われている等間隔テーブルが使いたい。
企業のモバイルサイトでよくヘッダに使われています。

つい FlexBox と思ってしまいますが素直にテーブルでいいようです。

display: table;
table-layout: fixed;

子要素は table-cell 指定で普通の table タグと同様に扱える。
むしろ table タグより簡単でした。

細かい解説は既に星の数ほど解説サイトがあるので省略。
今回はコチラを参考にしました。
横一列に並ぶ複数要素を均等幅で配置する | NAKAZI LAB.（ナカジラボ）

まあ相変わらずスマートフォンを考慮していない所が多いですが。
とにかく iPhone Safari 対策を入れて実験。

?
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- for Smart Phone -->
<meta name="viewport" content="
    width=device-width,
    initial-scale=1.0,
    minimum-scale=1.0,
    maximum-scale=1.0,
    user-scalable=no" />
<title>等間隔ヘッダ</title>
<style>
body {
    font-family: sans-serif;
    margin: 0;
    -webkit-text-size-adjust: 100%; /* iPhone */
}
.header {
    display: table;
    table-layout: fixed;
    width: 100%;
    margin: 0;
}
.header > div {
    display: table-cell;
    margin: 0;
    background-color: #0066ff;
    border-right: 1px solid rgba(0, 255, 255, 0.5);
}
.header > div a {
    display: block;
    text-align: center;
    padding: 0.5em;
    text-decoration: none;
     
    color: #ffffff;
}
</style>
</head>
 
<body>
 
<div class="header">
 
<div><a href="1.html">Top</a></div>
<div><a href="2.html">Page2</a></div>
<div><a href="3.html">Page3</a></div>
<div><a href="4.html">a</a></div>
<div><a href="5.html">About</a></div>
 
</div>
 
<pre>
# 親要素
display: table;
table-layout: fixed;
 
# 子要素
display: table-cell;
 
を CSS で指定
</pre>
<p><a href=".">Back</a></p>
 
</body>
</html>

等間隔ヘッダ

display_table

狙ったとおりの等間隔配置になりました。
Chrome, Firefox ならブラウザをリサイズ、スマートフォンなら横向きにして。
リサイズしても等間隔が維持で幅いっぱいになるのが確認できると思う。

ぶっちゃけこのサイズが iPhone5S で普通にタップできる最小限です。

というのも、ウチ姫からいいかげん別ゲーに乗り換えようと。
wonder4world ってのが iPhone 版で出たばかりらしいので試すと。

close_button_small

閉じるボタンが全然タップできなくてイライラする！
この開発者達は本当に iPhone で操作性を確認したのか？
ゲーム自体も他にどこにでもある…

小さいボタンはマウスだったから成立していたんだよ。
メニューバーやツリービューも同様、タッチパネルで使えない。
だから Windows も GNOME も取っ払う方向に動いているわけで。

まさかスマホゲーでこんな小さなボタンを見るとは思わなかった。
とにかく皆様、もっとスマートフォンを考慮しましょう。