kawama.jp

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

カテゴリ: スマホ・android — タグ: , — 2013年12月5日 10:55 — Comments (0)hatebu count

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

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

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

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

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

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

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

そんなわけで別のやり方を考える必要がありそうです。

上はロゴ、下はバナーとか、見えなくても差し支えないようなコンテンツを置いておくとか。

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

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

カテゴリ: Ajax,JavaScript,スマホ・android — タグ: , , , , , — 2013年11月29日 22:50 — Comments (0)hatebu count

スマホサイトでよくある、#(ハッシュ)を使ったページ遷移をやろうと思って調べていたら、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でまとめて複数行を挿入する

カテゴリ: MySQL — タグ: — 2013年11月8日 18:00 — Comments (0)hatebu count

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://…” の読み込みをブロックしました

カテゴリ: Ajax,JavaScript — タグ: , , — 2013年8月21日 07:08 — Comments (0)hatebu count

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

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

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

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

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

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

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

mobile safariでjqueryのliveが効かない

カテゴリ: Ajax,JavaScript,スマホ・android — タグ: , , , — 2013年7月28日 18:58 — Comments (0)hatebu count

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

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

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

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

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

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

カテゴリ: Apache,サーバー — タグ: , , — 2013年7月9日 21:02 — Comments (0)hatebu count

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が便利

カテゴリ: CSS — タグ: , , — 2013年7月5日 21:15 — Comments (0)hatebu count

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設定

カテゴリ: スマホ・android — タグ: — 2013年7月4日 22:02 — Comments (0)hatebu count

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」を指定するだけでOKです。

問題はandroidです。

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

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

そこで登場するのが「target-densitydpi=device-dpi」。

このandroid独自の属性を指定することで、表示が最適化されます。

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

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

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

参考ページ

http://www.tasuhiku.com/tips/214

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

カテゴリ: スマホ・android — タグ: , — 20:53 — Comments (0)hatebu count

スマホは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ブラウザの設定で「パソコンサイト表示」というのがあります。

Screenshot_2013-07-04-09-02-24

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

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

Google ReaderからFeedlyへの移行時に設定すべきたったひとつのこと(Android用)

カテゴリ: スマホ・android — タグ: , — 2013年6月27日 22:16 — Comments (0)hatebu count

フォントを変えましょう。

デフォルトのフォントだと、こんな感じです。

feedlyフォント設定1

何か変です。タイトルが表示されていないので、この状態だとほとんど使いものになりません。

Advanced Settingsからフォントを「Sans Serif」に変更します。(Sol、Robotoでも大丈夫っぽいです)

feedlyフォント設定2

するとこのようにタイトルが表示されるようになります。

feedlyフォント設定3

これでマトモに使えるようになりました。

Google Readerとそれほど変わらない操作性です。このままFeedlyを使っていこうと思います。

Copyright (C) 2002 - 2017 kawama All Rights Reserved. — Powered by WordPress

css.php