ios7 safariのURLバー、ステータスバー問題

ios7になって、safariのURLバーとステータスバーが伸びたり縮んだりする仕様になっています。

狭いスマホの画面をフルに活用するために実装した機能と思われます。これはこれでとても便利です。

ただしこのバー。伸びたり縮んだりしてもresizeイベントが発生しないのです。

例えばブラウザゲームのサイトとか、画面サイズを固定してるサイトでは死活問題となります。

画面下に操作ボタンとか設置してると、ステータスバーのせいで見えなくなったり、といった影響が考えられます。

ちなみにbody全体にoverfow:hiddenを設定してやると、URLバーとステータスバーは強制的に表示されるので、それで回避できるようです。画面は狭くなっちゃいますが。

そもそもoverfow:hiddenが使えない場合はお手上げです。

そんなわけで別のやり方を考える必要がありそうです。
上はロゴ、下はバナーとか、見えなくても差し支えないようなコンテンツを置いておくとか。

今後スマホサイトを作る上で注意すべき点だと思います。

jquery.hashchangeでスマホ用ページ遷移に対応

スマホサイトでよくある、#(ハッシュ)を使ったページ遷移をやろうと思って調べていたら、hashchangeというのがありました。

http://benalman.com/projects/jquery-hashchange-plugin/

jqueryのプラグインです。さっそく読み込んで使ってみます。

使い方は簡単。こんな感じです。

$(window).hashchange( function(){ 
  // URLハッシュが変わったら何かする
});

さらに

$(window).hashchange(function(){ 
  if(location.hash.match(/^#hash_/)) {
    // #hash_で始まる時に何かする
  }
});

こんな感じで、ハッシュの文字列によって処理を変えてやることで、目的が実現できそうな感じです。

それから最近ではhtml5のpushStateってのもあるみたいです。こちらは今度時間のあるときに調べてみます。

※pushStateはAndroid4.1以上でサポートされるようになったみたいです。普及にはまだ少し時間がかかりそうです。

1回のinsertでまとめて複数行を挿入する

DBMSはmysqlです。

1回のinsertでまとめて複数行挿入できないかな、できるんじゃないかな、と思って検索したら、やっぱりできました。

insertで複数行追加する

INSERT INTO user_table (id, name, memo, status) VALUES
(1, 'test1', 'メモ', 1),
(2, 'test2', 'メモ', 1),
(3, 'test3', 'メモ', 1),
(4, 'test4', 'メモ', 1);

こんな感じ。けっこう便利です。

混在アクティブコンテンツ "http://..." の読み込みをブロックしました

いつも使っているウェブアプリが動かなくなっていて、Firefoxのコンソールを見てみたら

混在アクティブコンテンツ "http://..." の読み込みをブロックしました

というエラーが出てました。

調べてみたところ、Firefoxバージョン23以降からセキュリティが強化され、今まで普通に動いていたものがエラーになったようです。

httpsのページからhttpのコンテンツを呼び出すとブロックされてしまうようです。

詳細はこちら→混在コンテンツ

とりあえず自分のケースでは呼び出すコンテンツがhttpsにも対応していたのでプロトコルを変更するだけで対応できました。

mobile safariでjqueryのliveが効かない

正しく設定しても、どうしてもliveが効かず、ボタンが反応しない、ということがありました。

しばらく試行錯誤した後、ググってみたら2秒で解決しました。

http://aqubiblog.blogspot.jp/2011/04/jqueryliveiphonesafari.html?m=1

該当要素に「onlick=""」を追加すれば動くようになるということです。驚きの解決方法。

これで問題なく動作するようになりましたが、思わず脱力してしまいました。

ユーザーエージェント「Serf」の大量アクセス

GoogleAnalyticsを見てたら「Serf」というブラウザ名で大量アクセスがあることに気がつきました。

Apacheのログを見てみたところ、「Serf」のユーザーエージェントは「Serf/1.1.0 mod_pagespeed/1.4.26.3-3101」となっています。

ここまで見てだいたい察しがつきました。先日興味本位で導入した「mod_pagespeed」の仕業でした。

携帯用GoogleAnalyticsはimgタグでga.phpを呼び出しているのですが、それが影響していたようです。


対処法はここに書いてあります。

https://developers.google.com/speed/pagespeed/module/faq

とりあえず /etc/httpd/conf.d/pagespeed.conf に

ModPagespeedDisallow "*/ga.php*"

を追記。

# service httpd configtest

で確認して問題なかったので、そのままhttpdを再起動しました。

翌日analyticsを確認したところSerfのアクセスは記録されなくなっていました。
平和が戻りました。

display:tableが便利

display:tableという、cssのプロパティがあります。
要素を擬似テーブルにすることができるというもので、こんなふうに使います。

<div style="display:table;">
  <div style="display:table-cell;">左</div>
  <div style="display:table-cell;">中央</div>
  <div style="display:table-cell;">右</div>
</div>

floatでも同じことができますが、display:tableのほうがだいぶ楽です。
崩れとかあまり気にしなくてよくなるし、cssの記述量もかなり減ると思います。


さらにwidth:100%とかvertical-alignとかも使えるのでかなり柔軟にレイアウトできるようになります。

例えばこんなのとか。

<div style="display:table;width:500px;">
  <div style="display:table-cell;background-color:orange;padding:10px;">左<br>左<br>左<br>左<br>左</div>
  <div style="display:table-cell;background-color:limegreen;width:100%;padding:10px;vertical-align:middle;text-align:center;">中央</div>
  <div style="display:table-cell;background-color:yellow;vertical-align:bottom;padding:10px;">右</div>
</div>

左
左
左
左
左

中央

右

各ブラウザの対応状況はこちらを参照。

http://fmbip.com/litmus/


気になるのはieの対応状況ですが、8以降は対応してるようです。

そろそろie7も切り捨てられる頃合いだと思うので、pcサイトでも今後は利用する機会が増えてくるんじゃないでしょうか。

自分はガンガン使っていこうと思ってます。