iPhone を iOS9 にアップデート。
まずは Safari で我がサイトの表示確認だな。
ナンジャコリャ！
window.innerWidth が仕事をしていないようだ。
そうだ、ソレを確認できるページを自分で作っていたじゃないか。
画面サイズ取得
上段が縦持ちで表示した時、下段は一度横向きにして戻した時。
一度横向きにすれば iOS8 までと同じ値になるようだ。
window.innerWidth | PaePoi
完全にバグですね。
しかしこれじゃ一時凌ぎの手段も無いぞ。
WordPress のほうは Google 公式プラグインなので問題無し。
本サイトのほうは別の手段でも用意するかな、とほほ。
久々の更新がそれだけってのもアレなので何か…
Javascript tips – 連想配列(ハッシュ)の要素取得
あれ、JavaScript の配列って普通に for in が使えたの？
Python 等と違ってキーが戻るってことなのね。
てっきりメソッド列挙しかできないと思いこんでいた。
ちと Gjs で試してみるか。
#!/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 でも問題無し、仕様のようだ。
forEach でも結果は同じだけどコッチのほうが違和感が少なくていい。
Array.forEach – JavaScript | MDN
Map.prototype.forEach() – JavaScript | MDN
ということで、JavaScript でコンボボックスを作る。
スマートフォンを考慮すると ListBox は使いたくない。
<form>
<select>
<option>KAWASAKI
<option>SUZUKI
</select>
</form>
実際の運用ではこういう HTML に直書きなんてほぼありえない。
データベースやファイルから読み込んで割り当てていくわけでして。
多分 Java か PHP で動的にタグを追加していくのが主流だと思う。
というか IE というゴミがさ。
それについては企業向けな人達にまかせてと。
IE をガン無視、スマートフォンはバッチリなサンプルコード。
<!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 でコンボボックスを使うとこうなります。
小さい画面でも使い易いように工夫してますね。
wonder なんとかは小さいボタンに耐えられず削除しました。
glib ネタが尽きてきたので久々に HTML5 で。
モバイル Yahoo なんかで使われている等間隔テーブルが使いたい。
企業のモバイルサイトでよくヘッダに使われています。
つい FlexBox と思ってしまいますが素直にテーブルでいいようです。
display: table; table-layout: fixed;
子要素は table-cell 指定で普通の table タグと同様に扱える。
むしろ table タグより簡単でした。
細かい解説は既に星の数ほど解説サイトがあるので省略。
今回はコチラを参考にしました。
横一列に並ぶ複数要素を均等幅で配置する | NAKAZI LAB.（ナカジラボ）
まあ相変わらずスマートフォンを考慮していない所が多いですが。
とにかく iPhone Safari 対策を入れて実験。
<!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>
狙ったとおりの等間隔配置になりました。
Chrome, Firefox ならブラウザをリサイズ、スマートフォンなら横向きにして。
リサイズしても等間隔が維持で幅いっぱいになるのが確認できると思う。
ぶっちゃけこのサイズが iPhone5S で普通にタップできる最小限です。
というのも、ウチ姫からいいかげん別ゲーに乗り換えようと。
wonder4world ってのが iPhone 版で出たばかりらしいので試すと。
閉じるボタンが全然タップできなくてイライラする！
この開発者達は本当に iPhone で操作性を確認したのか？
ゲーム自体も他にどこにでもある…
小さいボタンはマウスだったから成立していたんだよ。
メニューバーやツリービューも同様、タッチパネルで使えない。
だから Windows も GNOME も取っ払う方向に動いているわけで。
まさかスマホゲーでこんな小さなボタンを見るとは思わなかった。
とにかく皆様、もっとスマートフォンを考慮しましょう。
二年近く前のネタだけどこんなのを見つけた。
世界が熱狂する「100万のタマゴ」アプリ 日本の個人開発者のアプリが620万DLを達成 | 【EXドロイド（エックスドロイド）】
これならスマートフォン向け Web アプリで作れそう。
しかしパソコン対応なんかにしたらネクラでキモチワルイ奴がスクリプトでアッサリ百万突破してドヤッ！てやるのが目に見える…
まあそれは別の話として。
ゲーム再開用に行うタップ回数の保持は当然ローカルストレージとなるわけで。
スマートフォンのブラウザなら必ず実装しているので使わない手はない。
問題はそのストレージ内と変数値の同期をいつどう行うか。
ページを閉じた時を検知して変数の整数値を保存が一番確実なのだが
window.onbeforeunload – Web API インターフェイス | MDN
これ iPhone で使えなかった。
サイトの後処理にはonpagehideを使う – 読み書きプログラミング ブログ
onpagehide じゃ環境依存になってしまうようだ。
やはり値変更毎に localStorage へ保存するしか確実な手段は無さそう。
しかし[ピアノ打ち]とかされた場合にストレージへの同期は追い付くのかな？
iOSのlocalStorageは非同期でディスクに保存されるっぽい – Qiita
なんてページを発見。
自動的に非同期になるなら何も問題無さそう、コードを書いて実験だ。
毎度のようにスマートフォンかエミュレートでしか動きません。
<!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%;
}
</style>
<script type="text/javascript"><!--
var count = 0;
var writeText = function() {
var num = 1000000 - count;
var out = String(num).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,' );
document.getElementById("ID_TEXT").innerHTML = out;
}
// Event Handler
var onTouchEnd = function() {
if (count < 1000000) {
count += 1;
localStorage.setItem("count", count);
writeText();
}
}
// Connect
var init = function() {
if (window.TouchEvent) {
var tap = document.getElementById("ID_TAP");
tap.addEventListener("touchend",onTouchEnd);
}
/* can not iPhone
window.onbeforeunload = function(e) {
localStorage.setItem("count", count);
return null;
);*/
if (localStorage.getItem("count") != null) {
count = Number(localStorage.getItem("count"));
};
writeText();
}
//-->
</script>
</head>
<body onLoad="init()">
<div id="ID_TEXT" style="font-size:48pt">1,000,000</div>
<div id="ID_TAP" style="font-size:96pt">Tap!</div>
<p><a href=".">Back</a></p>
</body>
</html>
これだけだと本当につまらないアプリです。
卵がちょっぴりづつ割れていくみたいな演出があると先が気になるってことか。
メモしとこ。
本サイトを 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 なのだが…
もう半年以上起動すらしていない、残す必要なんて無かったな。
ということで本サイトにとっとと適用。
それとフォントサイズ指定を廃止したり行間を空けたりでタッチしやすく…
いやコンテンツを整理したり増やしたいのですけどね。