UserAgent 判別でモバイル用にコンテンツを振り分ける【WordPress】

- -

プラグインに頼ってもいいじゃない。

結論から言うとmobbleというプラグインを使います。

What functions are available?The most useful ones are:

  <?php 
  is_handheld(); // any handheld device (phone, tablet, Nintendo)
  is_mobile(); // any type of mobile phone (iPhone, Android, etc)
  is_tablet(); // any tablet device
  is_ios(); // any Apple device (iPhone, iPad, iPod)
  ?>

– WordPress › mobble « WordPress Plugins

使用例

  <?php if (( !function_exists(’is_mobile’)) || !is_mobile()) :?>
  /* for PC */
  <?php else :?>
  /* for Mobile */
  <?php endif; ?>

mobbleをインストール後、上記コードを好きなところに記述すれば動きます。
（関数名がis_mobile()でfunctions.phpで対応する場合と一緒なのでプラグイン使わない場合も上記コードで OK。）

なぜプラグインか？

WordPressにはwp_is_mobile « WordPress CodexというUAを判別する関数がバージョン3.4から存在しますが、iPadなどのタブレットもモバイルと判定してしまいます。それはダメ。ということで却下。

そこでis_mobile関数をfunctions.phpで実装するという選択肢が浮上します。これは下記サイトが参考になります。

これはどこからどう見てもスマートフォン判別用の文字列 (の配列)。どうやらこれを HTTP ヘッダの User-Agent と突き合わせて、スマートフォンからのアクセスを判別しているらしい。そうとわかればあとは簡単で、自作テーマの functions.php にこんな関数を書いてみました:

– Web サイトのスマートフォン最適化: UA 判別篇 – terkel.jp

おそらくこれが賢い選択肢だと思うのですが、このサイトでも言われてるように欠点がある気がします。

判別のために文字列のリストを用意するっていう部分が、どうもいまいちなんじゃないかって気がするんですよね。たとえば、今後出てくるであろう新しいスマートフォンに対応しようとすると、このリストを永遠にメンテナンスし続けなきゃなんないじゃないですか。

– Web サイトのスマートフォン最適化: UA 判別篇 – terkel.jp

調べてはいませんが参考サイトの記事が書かれた年が2010年。それから新しいスマートフォンはたくさんでていますし、これから出てくるたくさんの端末にその都度対応するのはしんどい。

じゃあメンテナンスを何かに任せればいいじゃない。何に任せるか？プラグインでしょ？

他人任せですがちゃんとアップデートされてるプラグインを選べば自分で書くよりも上手く対応してくれると思います。

一応僕はfunctions.phpにもis_mobile関数を記述してコメントアウトする形をとりました。これならいざという時すぐ対応できるかなと…

Media Queryでよくない？

Media Query使ってdisplay:none;で対応すればユーザーエージェントに関係なくviewportで一括管理できます。しかし、これだとモバイルでアクセスした時、PC用のコンテンツを読み込んでCSSで隠すという無駄な読み込みが発生します。

また、レスポンシブデザイン対応する時に困るのがGoogleAdsense。Googleさん、レスポンシブデザイン推してるのにレスポンシブ用の広告はありません。もちろんCSS弄ったらBAN!

このときMedia Queryで対応するよりis_mobile関数でそもそも読み込ませない方法のほうが安全かも？[要出典]

MarkdownQuote & AmazonQuote

- -

これで君も引用厨。

MarkdownQuote

Markdown記法で、選択部分を引用し、引用元リンクをciteタグで囲むブックマークレットです。今回の転送先はDraftPadではなく新規タブでSafariで走る韋駄天エディタDarkRoomの「ほぼ完成版」 – W&R : Jazzと読書の日々を改造したMyDarkroomのtextareaに表示させます。下記コードをブックマークして、引用したい部分を選択した状態（しなくても動きます）で実行。

MarkdownQuote

  javascript:fontsize="20";color="#5ccdb6";bgcolor="#453933";font="Hiragino Kaku Gothic ProN";MarkdownURL=encodeURIComponent('\n\n>-- <cite>['+document.title+']('+location.href+')</cite>');text="data:text/html;charset=UTF-8,<meta name=viewport content=initial-scale=1,maximum-scale=1><title>MarkdownCite</title><body style=margin:0;><textarea id=wine rows=999 style='border:0;width:100%;height:100%;margin-right:1px;background:#F7F6EB;color:black;font-size:"+fontsize+"px;font-family:"+font+";'>"+">"+document.getSelection()+MarkdownURL+"</textarea></body>";window.open(text,"_blank");

Safari版DarkroomはData URI schemeを使ってるので、対応していればiOS以外のモダンブラウザで使えるかも（フォントを弄る必要は少なくともありそう）。もちろんtextareaなので細かい編集可能です。そして何よりブックマークレットが使える!

Safariで走るエディタ DarkRoom。ブラウザ上で動いているので、ブックマークレットが使えます。テキスト領域の変数は「wine」。これを使えば文章加工が出来るわけ。　 * wine.value：全文を対象にします。　 * wine.selectionStart：カーソル位置を示します。あるいは選択領域の始端。 * wine.selectionEnd：選択領域の終端を示します。 —

Safari版韋駄天エディタDarkRoomをブックマークレットで拡張する方法 – W&R : Jazzと読書の日々

可能性は無限大。

AmazonQuote

MarkdownQuoteのURLをAmazonアソシエイトIDに対応させただけ。あとページタイトルではなく商品タイトルに変更しています。参考リンク今見てるページタイトルとURLをコピーし、Amazon商品ページだったらアフィIDを付けるブックマークレット | Stocker.jp / diary
小説の一節をちょっと引用したいってときに使えるかも。普通に商品紹介するなら既存のブックマークレットの方が数万倍クオリティー高い。下記コードのhaya14busa-22の部分を自分のIDに変えてください。

AmazonQuote

  javascript:fontsize="20";color="#5ccdb6";bgcolor="#453933";font="Hiragino Kaku Gothic ProN"; title = document.getElementById('btAsinTitle').innerText; param = (document.URL.indexOf('?') == -1) ? '?' : '&'; MarkdownURL=encodeURIComponent('\n\n>-- <cite>['+title+']('+document.URL+param+'tag=haya14busa-22)</cite>'); text="data:text/html;charset=UTF-8,<meta name=viewport content=initial-scale=1,maximum-scale=1><title>AmazonCite</title><body style=margin:0;><textarea id=wine rows=999 style='border:0;width:100%;height:100%;margin-right:1px;background:#F7F6EB;color:black;font-size:"+fontsize+"px;font-family:"+font+";'>"+"> "+document.getSelection()+MarkdownURL+" </textarea></body>";window.open(text,"_blank");

人間は、本当に真剣に、誰がどう見ても絶対に信用するような顔で、平気で嘘をつく。

– 決壊〈上〉 (新潮文庫) [文庫]

blockquoteにcite属性でISBN指定した方がいいんでしょうがMarkdown記法では実装できなさそうなので諦めました。諦めるのは記法の方だとか言わない。
そして実際使ってみて気づいた…著者名が表示されない…

MarkdownURL->DraftPad

- -

作りました。

ぐぐっても見つからなかったので。（需要ないだけ？）

Safariから下記ブックマークレット起動でDraftPadにMarkdown型式のURLリンクを吐き出します。

MarkdownURL->DraftPad

  javascript:location.href='draftpad:///insert?after='+encodeURIComponent('\n['+document.title+']('+location.href+')\n');

Markdown記法の中でHTMLのリンクで書いても差し支えないですが、統一したかったのでちょっと既存のブックマークレットを編集しただけです。

Example

例えばこのページで実行すると下記のコードをDraftPadに吐き出します。

[MarkdownURL->DraftPad « haya14busa](http://haya14busa.com/markdownurl2draftpad/)

Memo

location.href: ページのURLを取得
document.title: ページのタイトルを取得

ブログ作った。

- -

動機

前に一回WordPressでサイトを作った時、もう一つ個人的なWebサイト欲しいなって考えてたこともあって勢いで作った。作ったといってもWPのレスポンシブテーマを改造しただけ。あとまだ完成してない。
日記的に日々の出来事を書くっていうよりは、何かを外部に向けて公開しようって思ったときのプラットホームみたいなイメージ。その何かに「日々の出来事」が入るかもしれないけど。

抱負

無理しない程度に続けれたらいいかなって思う。嫌になったらなかったことにします。そんな感じです。お願いします。

Blog Archives Newer →