Top » サイトのスマホ対応記録

サイトのスマホ対応-何が問題???

 スマホ対応全く考慮せずにこのサイト構築してましたが、やはりスマホ対応が必要と感じてその研究始めました。Googleのウェブマスター ツールにも「モバイル ユーザビリティ上の問題が検出されました」と出てくるようになり、より一層スマホへの対応が重要と思いその対応を始めた次第です。このページは、スマホ対応しながら書きまして行きますので、メモ書きみたいになるかもしれませんが、ご容赦ください。ある程度対応済んだら纏め直したいと思っています。

現状サイトの問題点

 Googleが提供しているウェブマスター ツールというサービスを利用していますが、「モバイル ユーザビリティ上の問題が検出されました」表示されるようになりました。以前はこのようなエラーメッセージなかったのですが、Googleもスマホ対応が重要と考え始めたためなのでしょうか? その詳細を開けてみると次の項目がエラーとして表示されていました。スマホの事など全く考慮してなかったので当然といえば当然ですけど。
  1. ビューポートが設定されていません
  2. フォントサイズが小です
  3. タップ要素同士が近すぎます
  4. コンテンツのサイズがビューポートに対応していません
  5. Flash が使用されています

スマホの表示確認方法

 私はガラゲー族で、スマホ持っていません。そういう環境だったので、スマホ対応が後手に廻ってしまった訳なのですが、既に手をこまねいている時期ではなくなってしまいました。スマホ無くても何とかならないかと、net探し回ったらスマホ画面を確認出来る方法を見つけました。CHROMEがスマホ表示をエミュレートするツールを提供してくれてます。以下の例は私のサイトtopページをエミュレート表示させた状態です。

 CHROME右上の  をクリック → その他のツール(L) → ディベロッパー ツール(D)

 と進むと、ブラウザ下段にディベロッパー ツールのメニューが出てくるので、Emulationタブを選択し、Modelに表示したい機種を選んでやるとエミュレート画面になります。今回の表示は iphone5 にしてあります。 娘のiphone5借りて確認してみたところ、ほぼ同じ表示になってました。画面回転(Swap dimensions)のボタンもあるので、スマホ横向きで表示させた時も確認できます。
 「フォントが小さすぎ」「タップ要素同士が近すぎ」ており、ウェブマスター ツールの指摘通りです。
 最終的には、スマホ専用の1ペインタイプのページを用意する積りですが、取りあえず現行のサイトを何とかスマホで見れるレベルにはしたいと思います。

追記(2015年04月08日)
 娘の機種変更で不要になったiphoneが有ったので、お下がりならぬお上がりで貰いました。携帯電話会社との契約切れているので、通常のスマホとしての接続できないのですが、家のWi-Fiでネット接続できるので、サイトの表示確認程度でしたら十分です。 機種は iPhone 4 。
 早速サイトの確認してみました。やはりエミュレーターで全て確認するというのは無理ありますね。フォントサイズなど、実使用に耐えられるのか、実機で確認してみないと分からないです。エミュレーターは、あくまで表示の雰囲気確認程度にとどめていた方が良さそうです。古い機種ですが、これでサイトのスマホ対応を進めていけそうです。

「ビューポートが設定されていません」の対応

 ビューポート(Viewport)というのは、スマートフォンでWeb サイトを表示する際の仮想的なウィンドウサイズといえる機能で、デフォルトは横幅が980pxに設定されているようです。PCのブラウザを横幅980pxにして見た状態がスマートフォンの小さな画面に表示されます。
 Google Developersページ「ビューポートを設定する」の解説に従って、設定tryしてみました。解説の通り以下のコードを <head> に追加しました。TOPページを iphone4 で表示させたのが、下の写真になります。スマホを縦、横に向けて表示させています。
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 ページ表示の更新してあげると、右上が表示された状態になります。画面スクロールしてあげると、フォントの大きさも十分大きくなっており、文字の視認性は良くなります。ただ、上下左右のスクロールが必要なり、個人的には好きになれないですね。
「initial-scale=1.0」という属性を指定してありますが、Googleページの解説によると、
 一部のブラウザでは、横向きモードに回転した際もページが同じ幅に保たれ、リフローではなくズームによってコンテンツを画面サイズに合わせます。属性 initial-scale=1 を追加すると、デバイスの向きに関係なく CSS ピクセルとデバイス非依存ピクセルとの間に 1:1 の関係を確立するようブラウザに指示が与えられます。これにより、横向きにした場合にページ幅全体を利用できるようになります。
「initial-scale=1.0」の属性を外して、iphone4で表示更新したのが、下の写真です。
   <meta name="viewport" content="width=device-width">
 フォントが小さくなり文字の視認性は犠牲にせざるを得ませんが、上下スクロールだけで済むので、暫定対応策としてこの方法を選択しようかと思っています。スマホを横向きにすればフォントも十分大きくなります。私のページ構成は俗に言う3ペインタイプでデザインしてあるのですが、スマホ対応させようとすると3ペインは厳しいですね。

 それから反省ですが、styleのtransformプロパティ使って、マウスカーソルが画像上を hover すると拡大表示するようにしてあります。PCでの表示なら良い感じかと思ってましたが、スマホではこの動きが煩わしいですね。

「フォントサイズが小です」への対応

 スマホ最適化したフォントサイズやページデザインは後日に回すとして、現状サイト構成(3ペイン方式)での取りうる暫定対応でのフォントサイズ調整をしてみました。現在のサイトは、スタイルシートのbody項目で12pxとしてページ全体のフォントサイズ設定しています。今回は全体のフォントサイズを大きくするのではなく、メインの記事領域のフォントサイズだけを大きく(フォントサイズ:16px)して表示する暫定的な対応してみました。この対応をした iphone4 での表示は、上の写真の通りです。サイドメニューの視認性は犠牲にしました。
メインの記事領域のフォントサイズ色々変更して表示させてみましたが、16px以上にしても殆ど表示に変化しませんでした。ビューポート設定の都合なのでしょうか???

「タップ要素同士が近すぎます」への対応

 3ペイン方式を採っている以上、暫定レベルでの対応難しそうなので、この項目への対応は諦めました。 本格対応する時に対策しようとかと思っています。

「Flash が使用されています」の対応

 「Flash が使用されています」の何が問題なのか調べてみました。
 娘のスマホちょっと借りて動画埋め込んであるページ見てみたところ、「iphone5」「iphone4」では再生できずでした。「Android」のChromeでも試してみましたが、Flashで埋め込んだ動画は、同じく再生できずでした。
特別なアプリインストールすれば Flash 動画見れる様になりそうですが、そんな面倒な事する人は希でしょうね。私の様な単に動画埋め込むだけなら、 Flash は諦めた方が良さそうです。

 私が別に編集している「ホームページに動画を埋め込む」で、色んな埋め込み方法を試してみましたが、html <video> タグを使って、h.264形式の動画を埋め込むのが良さそうです。「iphone5」「iphone4」「Android」のChromeで試してみましたが、いずれも再生出来ました。埋め込み方法は、上のリンクのページに記載してますので見てください。

 少し余談ですが、再度ページの改造したくないので、各ブラウザの動画形式の対応状況調べてみました。
 今一良く分からないのが、Google Chromeです。ググってみると、2011年初旬の記事に「Google ChromeがH.264対応をとりやめ、WebM推進を鮮明に」という様な記事が結構ヒットします。だけど、2015年4月時点ではChromeでh.264形式動画再生出来ます。その後、「対応」するというな正式アナウンス記事は見かけないのが気になるところですが、Googleの動画サイト「Youtube」のサポートページには H.264 対応がうたわれているので、それほど心配する必要ないかもしれません。
 IEやFirefoxは、H.264対応を表明しているので、将来問題は発生しないでしょう。

 という事で、私のサイトでは Flash での動画埋め込みを止めて、html <video> タグを使って、h.264形式の動画埋め込みに切り替えて行きます。

このサイトのスマホ対応

 少々強引な方法ですが、私が運営しているサイトもスマホ対応始めました。その方法は後程追記します。
このページもスマホ用の対応してありますので、スマホお持ちでしたら見てやってください。Chromeお使いでしたら、上に書いた「ディベロッパー ツール(D)」でも雰囲気は分かります。(ディベロッパーツール起動したら、再読み込みしてください。)

 少々強引な手段ですが、私が採用したスマホ対応の方法を紹介します。
簡単に説明すると、画面の狭いスマホ用のスタイルシートを用意し、アクセスしてきた機器によってスタイルシートを切り替える方法を採用しました。スタイルシートを切り替える方法は多数あるようですが、私のサイトでは "javascript" を使って切り替える様にしました。

PC用とスマホのスタイルシートについて

PC用スタイルシートデザイン
 今まで運営してきたサイトは、PCでの閲覧を前提として下図の概略デザインで運営してきました。中心となる部分を "container" として中央揃え配置し、幅を1005pxとしています。PC用のブラウザは閲覧者自由に幅変えられるので、ブラウザの幅によってデザインの影響受けないように固定値幅にしてあります。 ページは、"sidebar"内にメニュー と "main"内に記事という構成でデザインしています。一番下に "footer"を配置してますが、ページ全体の見栄えの為だけなので、コンテンツとしては余り重要度はありません。
 PC用のスタイルシートの概略デザイン部分だけ抜き出しすと以下になります。(このスタイルシートに準じたhtml記述であることは当然ですが。)
#container{
width: 1005px;
margin: 0 auto;
text-align:left;
padding: 0px;
overflow:hidden;
}

#header{
margin: 0px;
padding: 0px;
overflow: hidden;
}

#contents{
margin-top: 5px;
overflow:hidden;
}

#sidebar{
float: left;
width: 200px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}

#main{
float: right;
overflow:hidden;
width: 770px;
margin-top: 0px;
margin-right:0px;
}

#footer{
clear: both;
height: 80px;
margin-right: auto;
margin-left: auto;
}

#footer_box{
width: 1005px;
margin-right: auto;
margin-left: auto;
}
スマホ用スタイルシートデザイン
 スマホでの閲覧は表示が限られている以上、何かを犠牲にするしかありません。私の場合は、"sidebar" 領域に記述されているメニュー関係を犠牲にする事にしました。その代りに、スマホ閲覧時にページ上部に全体的概略メニューは配置するようにしました。今後になりますが、スマホ用のサイトマップページは用意しようかと思います。
 スマホで閲覧された時に、スタイルシートを切り替えて、下図の様な表示となるようにしました。"container"領域を画面全体で表示させる様にしました。下図で"sidebar"領域を説明の都合上狭く描いていますが、実際には表示されないように設定しています。その代り"main"領域が画面幅全体に表示されるようにしました。 スマホ専用のページレイアウトとしては重複する領域があり、無駄な構成となっていますが、一つの html ファイルで見え方を2種類にしようとしている為、やむを得ずという事になります。

 スマホ用スタイルシートでポイントとなるのは、"sidebar"領域を表示させないようにする事。
スタイルシート"#sidebar"に以下の属性のどちらかを追加すれば表示させないように出来るが、動作が異なるので注意が必要。

     visibility: hidden;    →要素は読み込まれるが見えない状態

     display: none;        →要素も読み込まれず、完全にその場にない扱い

 私のページデザインでは、非表示にしたい sidebar 領域にアクセスカウンターが設置されており、カウンター表示されなくてもカウントアップはして欲しいので、当面の対応として "visibility: hidden;" 属性とした。 カウンターの設置場所の変更作業も進めており、完了後は、余計な読み込み負荷発生させないためにも ";display: none;"属性に変更する積りです。
 container領域には、"overflow:hidden;" の属性をセットしておいた方が良いでしょう。コンテンツに幅広の要素入れ込んでしまった場合(例えば、スマホ画面幅を超える固定値の画像等)、横スクロールが発生してしまいます。"overflow:hidden;"をセットしておくと、幅広要素は切れて表示されてしまいますが、横スクロールは発生しません。
 以下がスマホ用として作成しているスタイルシートの抜粋です。必要な領域がスマホ全幅表示になるよう、width属性等を変えたりして、確認する必要あります。このスタイルシートは骨格だけ設定されている状態ですので、適切なスマホ表示には程遠いかもしれません。
#container{
width: 100%;
margin: 0 auto;
text-align:left;
padding: 0px;
overflow:hidden;
}
#header{
margin: 0px;
padding: 0px;
overflow: hidden;
}

#contents{
margin-top: 5px;
overflow:hidden;
}

#sidebar{
visibility: hidden;

/* display: none; */
カウンターの移設終了したらこの属性に変更する積り

float: left;
width: 200px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}

#main{
float: right;
overflow:hidden;
width: 100%;
margin-top: 0px;
margin-right:0px;
}

#footer{
clear: both;
height: 80px;
margin-right: auto;
margin-left: auto;
}

#footer_box{
margin-right: auto;
margin-left: auto;
}

閲覧機材毎のスタイルシート切り替え

 スマホのスタイルシートが出来たら、しかるべきサーバーディレクトリーにuploadしておきます。私の場合だと、スタイルシート置き場は、"/css" なので、そのディレクトリにuploadしました。PC用表示のスタイルシートを "main_style.css"、スマホ用を "mobile_style.css" としています。
 今回は javascriptを使ってスタイルシート切り替える事にしたので、以下のスクリプトを htmlファイル <head> ~ </head>内に記述します。 iPhone、iPad、iPod、Android機器から閲覧要求来た場合には、"mobile_style.css"を読み込み、それ以外の場合は、"main_style.css"を読み込むようになります。以前 viewportについて書きましたが、モバイル機器から閲覧要求来た場合に、

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 を読み込む様にしました。"viewport"が設定してあっても、PC閲覧で何も問題発生しないので一々切り替える必要はなく、<meta>タグを html ファイルに書き込んでも良いですが・・・。

 上のスクリプト動作が確認出来たら、外部のjavascriptファイルにして、そのファイルを読み込む形式にした方が、メンテナンスが楽かもしれません。

 この段階では、スマホ閲覧の骨格が出来たに過ぎません。PC閲覧用の html ファイルをスマホで表示させた時には、結構問題出るかもしれません。スタイルシートのデバッグは、サーバー上に必要ファイルをuploadしないと出来ないので、私は問題発生承知の上で、サーバー上でデバッグしていきました。次のセッションは私の備忘録になってしまいますが、スマホ閲覧のファインチューニング方法を紹介する積りです。