Home » iPod touch, WordPress, プラグイン, プログラミング

このサイト(Blueな雑日記)をiPhone/iPod touchに対応しました  このエントリをはてなブックマークに登録 

[ 2010年04月02日 | No Comment | 0 Trackbackk ]


このサイトをiPhone/iPod touch(以下、iPhone)に対応しました! って言っても実はリニューアル版の公開前には一応は対応していたんです。しかし、デフォルトのままの設定でしたので、一部レイアウトの崩れ等の不具合が発生していました。でも、まぁ、iPhoneでアクセスする人なんいないだろう。なんて思っていましたが、ふとアクセスログを見るとWinows、Macに続いて3番目にiPhoneからのアクセスがあるのに気づきました。もっとも、その割合はWindowsが86.25%、Macが8.72%でiPhoneからは僅か3.01%だけなんですが、見てくれる人がいるのならば、なるべくちゃんと見てもらいたいので一念発起してちゃんと表示するようにしました。

作業環境

PHP:5.2.5
WordPress:2.9.2
WPtouch:1.9.9.8
WordTwit:2.3.2

まず、大きな問題点が以下の2つありました。

  1. 画像の大きさがバラバラに表示される
  2. TwitterへのFollow Meとページトップへのタブボタンの表示の不具合

スクリーンショット

1つ目の「画像の大きさがバラバラに表示される」という問題は、これはあきらかに私が書くソースコードに問題があります。通常レイアウトはスタイルシートでコントロールするのが鉄則となっていますが、この問題のあるソースコードはずいぶん前に書かれたもので、当時はまだテーブルでレイアウトをコントロールしていました。

この画像を見てもらえばわかると思いますが、左に画像、右に文字列がある場合、文字列が多い時に左の画像が小さく縮小されています。この例はまだマシな方でもっと文字が長い場合は、画像は豆粒のようになって何が写っているのかさえ判断できなくなります。

リニューアルの際に全てのコードの書き直しをすればよかったのですが、量がかなりあったため修正は面倒だったので昔のコードをほぼそのままで移植したがために起こった問題です。

逆に言えば、問題点がわかっているので修正も簡単です。結論を先に言うとiPhone用のスタイルシートを用意しました。


スクリーンショット

次の問題は、パソコンで見ている方はブラウザの右端に「Fllow Me」と「Page Top」というタブが確認出来ると思いますが、これはどちらもプラグインを使用して表示しています。しかし、これらのプラグインはiPhoneには対応していないらしく、表示に不具合が発生します。

まずは「Fllow Me」の方はプラグインの「WPtouch」と「WordTwit」を連携させると同じような事が出来るようになるので、必要無し。もっともこの「Fllow Me」はFlashを使用しているようなので表示しようが無いのですが・・・。

次に「Page Top」の方は、もともとiPhoneのsafariには同じ機能があります。画面の最上部中央にある時計をタップすると、そのページの一番上にスクロールします。なので、これもiPhoneの時は非表示にします。

 


つまり、両方共iPhoneでは表示しなくてもOKというわけです。では、実際にこれらを非表示するにはどうすればよいか? 一応ネットで調べてみたけど、同じような悩みを持っている人は見つからず、、、というか5分探しても見つからなかった場合は、私の場合は自分でソースを見て対応しちゃいますが・・・。

そんな訳で、まず書き出されているソースを確認します。単純にiPhoneの時だけ表示しなくさせるにはエージェントを取得して、iPhoneからのアクセス時には表示させないようにしちゃえば簡単なんですが、実はこの「WPtouch」というプラグインは結構頻繁にアップデートがあります。なのでPHPファイルの書き換えはアップデートの度に書き直さなくちゃいけないので面倒です。なのでまずソースを確認してもっと簡単に非表示に出来ないかと思ったら、どちらも(あたりまえですが)ブロックレベルの<DIV>に囲まれている事が確認出来ました。「WPtouch」ではiPhoneからアクセスされた時だけスタイルシートをかけることが出来ます。なので設定画面の「Stats & Custom Code」のところに

<style>
/* followmeを隠す */
.wp_followme_c2{display: none}

/* トップに戻るを隠す */
#back-to-top{display: none}
</style>

と記述するだけです。

私の場合は1つ目の問題の「画像の大きさがバラバラに表示される」というのがあるので、iPhone表示用のスタイルシートを別ファイルで作りそこにiPhone表示用のスタイルシートを設定して、それを読み込ませるようしています。

<style>
@import url("/xxxxxx/xxxxx/xxxxx.css");
</style>

こんな感じです。

ただし、この方法はひとつ問題があります。それはここに記述したコードはソースの最後の方で読み込まれます。なので、iPhoneで表示する際には一瞬タブが表示されてしまいます。まぁ、ホントに一瞬なのであまり問題ではないですが、それが嫌な場合は直接iPhone用のヘッダのテンプレートに書きこむのアリかと思います。ただし、これはバージョンアップの度に書き込む必要があるのでちょっと面倒ですが・・・。


修正前
修正前
修正後
修正後

画像の大きさが統一されて見やすくなったと思います。まぁ、完全にパソコンと同じ画面ってわけにはいきませんが、iPhoneを横にするとほぼパソコンと同じ表示になります。


修正前
修正前
修正後
修正後

ぱっと見には分かりづらいですが、画面の右側の中途半端な表示のタブが消えています。それと同時にメインタイトルのすぐ下の「Search」の左横に「Twitter」が追加されていると思います。これは「WPtouch」と「WordTwit」を連携しています。ここからTwitterの自分のタイムラインを見ることやFollow Meも出来るので、「WP FollowMe」の代わりとします。


これでとりあえず、iPhoneで見ても大丈夫なハズです。

 

スポンサーリンク

スーパーコピー時計

パートナーのブランド時計コピーを探すなら

 

  にほんブログ村 アウトドアブログ アウトドア用品へ 人気ブログランキングへ  

関連する(かもしれない)記事

Trackback URL

コメントを投稿する(承認後に表示されます)