銀杏の木

google は「モバイルフレンドリーテスト」という機能を持っている。

これは、あるサイトの表示が、スマートフォンなどでの表示に適切に対応しているかどうかをチェックしてくれる機能だ。

rNote の現状を考えてみると、 docomo や au などのガラケーに対する対応しかされていない。その対応方法は、クライアントからの request http header を見て、 user agent が携帯のものであった場合には、PC用の表示とは異なる携帯用の表示を行うよう動作するようになっている。

この方法は、スマートフォン全盛の現在でも有効だが、その場合、「スマホ向け表示を分けているときはVary HTTPヘッダーを使うこと など10+4記事（海外&国内SEO情報）」で説明されているように、サーバからの response http header に vary http であることが示されるようにすると良いようだ。

具体的には、 apache2 を使用しているサーバの場合、 .htaccess に、

と記述するだけでよい。

ただ、この方法だと、前述の google のテストに通らない場合があるようだ。理由は簡単で、 google がテストのためにサイトにアクセスしてくる際の bot の user agent が不明なため、サイト側でその　user agent をスマートフォンからのアクセスとして認識しないためだ。これを解決するためには、一度 google のテストを実行し、その際にアクセスしてきた google の got の user agent 名を調査し、その名前にサイト側で対応しておく必要がある。しかし、 google の bot の user agent 名は、いつ変更されるか分からないため、変更された場合、 google にモバイルフレンドリーなサイトであると認定されなくなることになる。

一方で、モバイルフレンドリーなサイトにするためのもうひとつの方法として、「メディアクエリ」を使用する方法がある。これは、ヘッダでスタイルシートを読み込むタグの要素に media　要素を追加し、

<link rel="stylesheet" href="/ichounoki/rnote/medium.css" media="screen and (min-width:480px) and (max-width:1024px)"> 

のように、画面の幅などによって異なるスタイルシートを読み込むようにする方法だ。または、「レスポンシブの基本、メディアクエリの書き方」で説明されているように、

@media screen and (min-width:480px) and ( max-width:1024px) {p {  } /* 横幅が 480 pixcel から 1024 pixcel までの場合の p タグのスタイル */}

のように、画面の幅などによって異なるスタイルが選択されるようにスタイルシート内に記述する方法だ。

ただ、この方法を試したところ、実際には、画面ではなく、ブラウザのウィンドウの幅によって切り替わってしまうようだ。つまり、例えば、PCで表示させていても、ブラウザのウィンドウの幅を短くしていくと、タブレットやスマートフォン用の表示に切り替わってしまう。これでは、まずいのだが、提示されたサンプルを見る限り、条件分けの記述に screen も指定されているようなので、この指定で画面の幅であるように動作しないのであれば、お手上げな気がする。

また、根本的な問題だが、この方法では、クライアントの表示サイズによって切り替えることができるのは、あくまでも「スタイルシートだけ」なので、「タグで表現された表示内容そのものは変更できない」のだ。現在の rNote が携帯用の表示を行う場合に、その小さな画面と画像表示能力を考慮して、表示する項目や表示するテキスト自体を変更していることを考えても、ただスタイルシートだけしか変更できないのでは、小さな画面用の表示として満足のいく設定ができるとは思えないので、自分的には、この、「メディアクエリ」という方法自体、構造的に既にダメである。

というわけで、 rNote-re の機能として、現状に対応させるためにモバイルフレンドリーにするとしたら、実装方法としては、 rNote と同様にクライアントの種別を user agent で読み取って表示自体を切り替えるという方法になるだろう。ただし、上述した通り google の変更を小豆に発見して対応する必要がある。