スマホの時代

ドロワーメニューとアクセス解析、JSのバッティング

MTネタではないですが。

最近、スマホサイトを担当しているのですが、SEO担当者に「ドロワーメニューの構造がSEO的に評価が高い」と言われ、作ってみました。

参考サイトはこちら
「jQueryを使ってドロワーメニューを実装する」
http://www.fsfield.info/develop/javascript/020/

構築はわりとカンタンだったのですが、

アクセス解析タグを入れたら、画面が真っ白になってしまった!!!
うわー。。。

JavaScript同士のバッティングだと思い、いろいろやってみました。
アクセス解析タグは<body></body>間に入れると指示があったので、
まーいろいろ。やってみました。

アクセス数は、次の日になってみないと結果が分からないので、手を加えては次の日を待つ。そのくり返し。
辛い日々だった~。

そして、こんな記事を見つけ、

「トラッキングコードをどこに埋め込むか、のおさらい」
http://susumukatachi.jp/archives/1100

上記によると、<body></body>間に入れると指示があっても、<head></head>内に入れる必要がある場合もあると言うことで。。
そこで<head></head>内に入れてみたら、次の日!

出た!!!

いやー。感動したー。

スマホ用ページ作成 覚書その1

MTに限定した話ではないですが、覚書ということで。

近年、スマホの爆発的な売れ行きは、はたから見ててもすごいですよね。
って、はたからのん気に驚いていたけど、そんな悠長なこと言ってられなくなったのは、会社でもスマホ対応することになり、担当になってしまった~。。

スマホでGoogle検索などすると、スマホページとPCページとふたつあっても、今はPCページの方が上がってくる場合が多いのではないでしょうか。

そのうち、スマホが追い抜くのか。
それとも、検索エンジンが何らかの対応するのか。
そりゃ後者は必須よね。PCでスマホページが表示されたら、ビックリしますよ。素人さんは。
画像とか、%表示なので。

ま、それはそのうちという話で。


振り分けの、スマートなJavaScriptを見つけたので、手始めと言う事でご紹介しましょう。

 <script type="text/javascript">
if ((   navigator.userAgent.indexOf('iPhone') > 0 &&
        navigator.userAgent.indexOf('iPad') == -1) ||
        navigator.userAgent.indexOf('iPod') > 0 ||
        navigator.userAgent.indexOf('Android') > 0) {
        if(confirm('スマートフォン用サイトがあります。表示しますか?')) {
            location.href = 'スマホサイトのアドレス';
        }
}
 </script>

上記を<head></head>内に記述します。
PCで表示すると無視して通常に表示しますが、スマホで表示すると、ダイアログが出ます。

「スマートフォン用サイトがあります。表示しますか?」

はいを選ぶとスマホページ、いいえを選ぶとPCページを表示します。

とても、シンプルでスマートですね。


しかし。
結局PCとスマホとふたつファイルを用意しなくちゃいけないのは変わりません。
修正等、結構大変だったりしますよねん。

次回予告
レスポンシブWEBデザインに挑戦。
1つのファイルで、PC・スマホ、CSSで表示を変える方法です。
お楽しみに。

特定のカテゴリの記事だけをページに表示させる

アーカイブテンプレートの「カテゴリ別ブログ記事リスト」の他に、カテゴリページを作りたい場合。 

というのは、PC版とiPhone版とを同じMT内に作ってたのですが、カテゴリ別ブログ記事リストのテンプレートを複製して、そこに表示させるのがなんか難しいんです。 
なにか、考え方やコツがあるんだと思うんですが。。。 

で作業時間も限られていたので、インデックステンプレートにiPhone用の各カテゴリページをつくって対応したわけですが。 

 <MTEntries category="カテゴリA OR カテゴリB OR カテゴリC">

 ~ 記事 ~ 

 </MTEntries> 

 これでABC三つのカテゴリのどれかを含むカテゴリを表示します。
 OR は大文字で。 
AND なんかの組み合わせも可能です。

 タグリファレンスはこちら 
http://www.movabletype.jp/documentation/appendices/tags/entries.html

MTの、スマホ対応ページを作る。

インデックスページに、スマホのHTMLを新規で設置すればできるのかと思っていたのですが、なんか、うまくいかないですね。
アーカイブなページの生成も、知識が必要なようですので。

プラグインを入れて必要最小限の表示をさせて、そこから肉付けしていくことにしました。

こちらを参考にさせていただきました。ありがとうございます。
http://www.somaclip.jp/2011/09/iphone_mt5.html

まだ、カスタマイズ中なので、何か困ったことが起こったら追記します。(*^^)v

雑談ですが、iPhone欲しくなりました。
auをiPhone化しようと思っているのですが・・・。
財布と相談。