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サイトでも今後は利用する機会が増えてくるんじゃないでしょうか。

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

iphone、androidの幅固定ページ用viewport設定

500ピクセル幅固定のページをiphone、androidで最適化表示するために色々調べ、試しました。

最終的に以下に落ち着きました。
できればiphoneもandroidも共通のviewportにしたかったんですが、無理っぽかったのでユーザーエージェントで分けました。

<?php if(preg_match("/Android/", $_SERVER["HTTP_USER_AGENT"])): ?>
  <meta name="viewport" content="target-densitydpi=device-dpi, width=500px, initial-scale=1.0, user-scalable=yes">
<?php else: ?>
  <meta name="viewport" content="width=500px">
<?php endif; ?>

iphoneは「width=500px」を指定するだけでＯＫです。

問題はandroidです。
「width=500px」だけだと、まず最初にブラウザデフォルトのサイズでページをレンダリングし、ページをすべて読み込んだ"後に"widthを500pxに変更する、という仕様になってるようです。

一回読み込んだ後変更するので、文字の改行位置が変わったりして、ページがカクカク動いてしまいます。

そこで登場するのが「target-densitydpi=device-dpi」。
このandroid独自の属性を指定することで、表示が最適化されます。


とりあえずこれで問題は解決。iphoneでもandroidでもビシっと表示がキマるようになりました。


とは言ってもやはりスマホページは固定幅は不向きです。特にandroidは変な動きが多いです。

ユーザビリティのことを考えても、スマホに最適化したページを作ったほうが、間違いなく良いです。


参考ページ
http://www.tasuhiku.com/tips/214

Androidブラウザの「パソコンサイト表示」のユーザーエージェント

スマホはHTC EVO 3D(ISW12HT)を使ってます。

Androidブラウザのユーザーエージェントはこんな感じです。

Mozilla/5.0 (Linux; U; Android 4.0.3; ja-jp; ISW12HT Build/IML74K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

androidブラウザの設定で「パソコンサイト表示」というのがあります。



これをチェックした状態でユーザーエージェントを見ると、以下になりました。

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.34 Safari/534.24

見ての通り、Chromeに変わりました。


これは今自分が使ってるChromeのユーザーエージェント。OSとバージョン以外は全く同じです。

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36