iOSのボタンスタイル指定ではまらないための1行

<input type="submit"> とか <input type="button"> とか、
自分でスタイルごにょごにょしたボタンがiOSだと思うように表示されなくて気持ち悪いなあと思ってたんだけど、

-webkit-appearance: none;

指定したら一発で解決した。
他のフォーム要素にも使えるみたい。

2013年、今年も見ず知らずのいろんな人たちに助けてもらいました。
感謝。
皆様よいお年を。

参考：
フォーム要素にデザインを設定するときは-webkit-appearanceでリセット | WEBdev

jQueryのloadでセレクタ指定した時のscript

検証不足だけどとりあえずメモ。
例えばloadで読み込むHTMLに

<script type="text/javascript" src="hogehoge.js"></script>
<script type="text/javascript">
$(function() {
	hogehoge();
});
</script>

みたいなの（hogehoge.js内でhogehoge関数を定義）が書いてあったとして、
セレクタを指定せずにファイルまるごとloadした時はhogehoge()が実行される（と思う）。
しかしどうもこれがセレクタを指定してHTMLの一部をloadした場合には無視されるっぽい。

$('#container').load('hogehoge.html #content');

こんな感じのやつ。
#contentの中にscriptが書いてあっても実行されない。
で、とりあえず回避策。

$('#container').load('hogehoge.html #content', function() {
	$.getScript('hogehoge.js', function() {
		hogehoge();
	});
});

たまたまload先の一部のファイルだけscriptが実行されなくて、どうしてだろうって小1時間悩んだ結果、たぶんそういうことなんだろなって結論に達した次第。
ちゃんと調べてないんで間違ってたらすみません。

clickイベントが無視されるタッチパネル対策

aじゃない要素にjQueryでclickイベント設定したら、iPhoneやiPadで見事に無視されたので、ググってみたら簡単な解決策が見つかった。
CSS側で該当する要素を cursor: pointer にすればOK。
やっかいなことにならずに済んでほっと胸をなで下ろした瞬間。

参考：roundropブログ implements Programmable

FancyboxのインラインフレームをiOSでスクロール

Lightbox系のモーダルウィンドウの中でも見た目がとても美しいFancybox。
その上痒いところに手が届くオプション満載で、ほとんど文句のつけようがないんだけど、近年スマホやタブレット端末が勢力を拡大していく中で、インラインフレームで読み込んだページをタッチパネルではスクロールできないのが悩みの種でした。
非推奨だからって言われればそれまでだし、Androidは手に負えなかったりするんで使わないのが一番いいんだろうけど、そうもいかない案件もあるんで今回重い腰を上げてとりあえずiOSだけは無理矢理スクロール（フリック）できるようにしてみました。

単なるインラインフレーム表示で使う際に書いてた設定が下記。

$("a.preview").fancybox({
    'width': 800,
    'height': 600,
    'type': 'iframe'
});

previewってクラスのついたaの対象ページを幅800px、高さ600pxで表示させてくださいって感じ。
この状態でaをクリックすると、Fancyboxは「#fancybox-inner」という高さ600pxの箱（div）の中に「#fancybox-frame」というiframeを作って対象ページを見せてくれます。
で、PCだと高さ600pxを超えるコンテンツは自動的にスクロールバーが表示されるわけですが、スマホやタブレットだとスクロールバーは表示されず、フリックもできないので、600pxより下に書いてあることは全く読めないわけです。
なんとかならないものかとソースを見てみたら、幸いFancybox側でiframeをdivで囲んでくれてるのに気づき、これならコンテンツ部分はフリックできなくても、うまくやればフリックするエリアくらいは作れるかなと思いました。

とりあえずデフォルトだと「#fancybox-inner」のoverflowがhiddenになってるので、これをautoに変えたい。
やっかいなことになるのかなあと思ってたんだけど、蓋を開けてみたら上記設定のオプションに
'scrolling': 'yes'
を追加するだけであっけなくできました。
あとは「#fancybox-frame」の幅を800pxより若干小さくして、フリックするエリアを作ってやる寸法です。
以下おそるおそる書いたソース。

var agent = navigator.userAgent;
if (agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1) {
    var isTouch = true;
}
var fbInner = $('#fancybox-inner');

$("a.preview").fancybox({
    'width': 800,
    'height': 600,
    'type': 'iframe',
    'scrolling': 'yes',
    'onComplete': function() {
        if (isTouch == true) {
            $('#fancybox-frame').load(function() {
                var fbHeight = fbInner.height();
                var ifHeight = $(this).contents().find('body').height();
                if (ifHeight > fbHeight) {
                    $(this).css('width', '760px');
                    fbInner.css('background', 'url(xxx.jpg) right center no-repeat');
                } else {
                    $(this).css('width', '100%');
                    fbInner.css('background', 'none');
                }
            });
        }
    },
    'onCleanup': function() {
        fbInner.css('background', 'none');
    }
});

最初のほうに出てくる「isTouch」はiOSを判別するために設定してます。
Fancyboxのオプションで
'scrolling': 'yes'
を追加した後の「onComplete」以降が、Fancyboxを開いた後の処理になります。
とりあえず条件分岐でPCかiOSかを判別して、iOSなら処理を実行します。
インラインフレームの幅を760pxに縮小してるのが
$(this).css('width', '760px');
で、それによってできた40px分の余白に「ここをスクロールしてね」って感じの画像をあてはめてるのが
fbInner.css('background', 'url(xxx.jpg) right center no-repeat');
です。
今回作った画像はコレ。
あてはめたイメージはこんな感じ↓です。



これだけでもよかったんだけど、どうせなんでスクロールする必要がないコンテンツを読み込んだ場合は何も処理をしないようにしてみました。
var fbHeight = fbInner.height();
はインラインフレームを囲む箱「#fancybox-inner」の高さ。
var ifHeight = $(this).contents().find('body').height();
はインラインフレーム「#fancybox-frame」で読み込むコンテンツの高さ。
if (ifHeight > fbHeight) { ... }
で箱よりコンテンツの高さが大きかった時だけ処理するように分岐しています。

あと最後のほうの「onCleanup」オプションはFancyboxを閉じた時に実行される内容です。
fbInner.css('background', 'none');
ってやらないと同一ページ内の他のFancybox（iframeじゃないやつ）を実行した時に画像が残っちゃうんで。
「onClose」ってオプションもあったけど、これだと続けざまにFancyboxを開いた時にうまく処理してくれませんでした。

以上けっこう無理矢理だし、iPhoneなんかだと画面が小さくてフリック自体しにくいんで、今後はどうしてもって時だけ使おうと思ってます。

どんな感じか見てみたい人は下記のページをiPadとかで開いて、右側のほうにある「総括」とか「遺書」とかをタップしてみてください。
PCでは通常と何ら変わりませんのでご注意を。

実装ページ → bochi

メニューのリストでwhite-space

今まであまり使う機会がなかったんだけど、

<ul>
<li><a href="aaa.html">AAA</a></li>
<li><a href="bbb.html">BBB</a></li>
<li><a href="ccc.html">CCC</a></li>
<li><a href="ddd.html">DDD</a></li>
</ul>

みたいなよくあるメニューのリストをCSSでliのwidthを指定せずに

li { float: left; }

ってして横並びにすると、ulの横幅に収まらなくなったliは自動的に次の行に折り返してくれる。
ただこれがIEだと、横幅が足りないとか関係なく、入る分の領域にliの要素を改行してでも入れ込んじゃうみたいでタチが悪い。
そんな時に white-space が使えるってのをはじめて知った。
CSSで

li { float:left; white-space: nowrap; }
a { display: block; }

ってするとIEでもちゃんとliを折り返してくれる。
これほんと便利。

参考： CSSサンプルブログ

apple-touch-iconとBasic認証

知ってればどうってことないことで小1時間悩んだので早速メモ。
iPhoneやAndroidでサイトのアイコンをアプリみたいにホーム画面に追加する時に使用するapple-touch-iconは、Basic認証のかかった領域内では使用できないらしい。
考えてみれば合理性はあるけど、明け方にこれで時間食ったのはきつかった。
Basic認証かけてないとこにアイコンアップし直して、URLで指定したらすんなり表示されました。
こーゆーのはすぐさま迷わず検索するが吉ってことで。

phpMyAdminで消失したMYIファイルの復旧

件のファーストサーバ障害の後、データベースのリカバリーファイルが戻ってきたもののどうにも不完全っぽい。
ひとつのテーブルに対してfrmファイル、MYIファイル、MYDファイルがセットになってるはずなのに、MYIファイルがないものがある。
でもまあMYIはインデックス情報なんで、なんとかなるかなって思ってたら実際なんとかなった。

ひとまず戻ってきたファイルをすべて初期化されたdbディレクトリに戻して、管理者パネルからデータベースを起動。
この状態でとりあえずphpMyAdminを見てみると、MYIファイルのないテーブル情報にはアクセスできず。
SSHが使えないので、phpMyAdminのSQLフォームに下記のコマンドを打ち込んでみる。

REPAIR TABLE （該当テーブル名） USE_FRM;

frmはテーブルの構造情報なので、USE_FRMってオプション指定することで、構造情報使ってインデックスを再構成してくれるらしい。
これで新たにMYIファイルが作成されて、全てのテーブルにアクセスできるようになりました。

参考：
MysqlのMYI（インデックス）について － Insider.NET － ＠IT
LifeHack～WCCFとプログラムのお話～｜ 【MYSQL】MYIが壊れた

inputタグの横幅合わせで目から鱗が落ちた件

問い合わせフォームの入力欄とか。
これまでどのブラウザで見ても横幅きっちり合わせたい時はCSSでwidth指定してたけど、まさかこんな裏ワザがあったとは。

input {
font-family:Arial,Helvetica,sans-serif;
}

正直今までまったく知らんかった。
Code.Loverさんに感謝。

参考：input タグのサイズについて CSSでの制御

週末にドメイン設定する恐怖

月曜から稼働の案件で週末にドメイン設定するのってほんとに恐いなあと。
だいたいDNSの設定が反映されるのにけっこう時間がかかるって書いてあったりするけど、普段わりと早くに反映されるんで金曜日に設定して余裕かましてたら、今回は24時間たってもいっこうに設定が反映されない。
そんでもってこりゃやばいと思いはじめた頃にはサポートとかお休みになってるし。
今回はnslookupコマンドで凡ミス発見できたからよかったけど。

$ nslookup xxxxx.jp（調べたいドメイン）

これしたらAddressが 123.123.123.123 になってた。
ネームサーバのゾーンファイルの設定でサンプルをコピペしたままIPアドレス書き直してなかったのが原因。
正しいIPアドレスに書き換えて再起動したらちゃんとアクセスできました。
しかし一時は寿命が縮まるかと思った。
ドメイン関連の設定は早め早めにやっとかなきゃってことで。

スマートフォンの文字サイズ

例えばスマートフォンを横向きにした時、文字サイズが大きくなってしまってレイアウトが崩れたりとか、スマートフォンに最適化してないページでも一定の文字だけがやたら大きく表示されてしまったりとか、そんな現象についてあまり深く考えてなかったんだけど、ようやく謎が解けた。
どうやら「-webkit-text-size-adjust」ってCSSのプロパティがこのへんを制御してるらしい。
デフォルトの値が「auto」になってるんでこれを変更。

-webkit-text-size-adjust: none;

CSSファイルのbodyに書き足したら一発で解決した。
知らないってほんとに恐ろしい・・・。

参考：CSS HappyLife ZERO