モバイルフレンドリー 攻略

爆発的に普及したスマホ

おくらばせながら、私自身もガラ携帯から、
スマホに替えて早、数ヶ月だ。


手のひらサイズのパソコンは本当に便利で、いつでも気楽に検索三昧。
家電話から携帯電話に移行したように、パソコンからスマホに移行するのだろう。

一億、総スマホ検索時代はそこまで来ている。
逆に言うとPC用の見栄えの良いサイト構築は、今後は無意味となるのかもしれない。




そんな昨今、

検索される側はスマホに対応したサイトを用意する必要に迫られる。
何故なら検索ランキングに影響が出るからだ。


検索されないサイトは世の中に存在しないのと同じだから、
生き残りたいなら対応は必至。


検索すると分かるが、スマホ対応サイトは検索結果で、
頭に「スマホ対応」と、表示される。




そうなる為には

Googleが仕切るモバイルフレンドリー対応サイトの構築が必須となり、
モバイルフレンドリー診断を突破しなければならない！




数年前なら、壁の突破を楽しめたかもしれない。
ＹＡＨｏｏカテゴリ登録！ 突破を楽しんだように。

ＹＡＨｏｏカテゴリ登録！
http://members3.jcom.home.ne.jp/kojintaxi-tokyo/kategori.html
タクシー運転手カテゴリ
http://dir.yahoo.co.jp/Recreation/Travel/Transportation/Taxis/Taxi_Drivers/?q=Taxi_Drivers


しかし、未知への挑戦への動機が、なかなか見いだせないでいた。
「もう僕は時代について行けない。これまでだ。」と、考えるようになり、
何より興味すら沸かない中、時だけが流れていた。


スマホに切り替えるまでは、、、、、


ところが私自身、スマホに切り替え、改めてスマホの便利さを学習して行く中、
モバイルフレンドリー対応サイト構築知識の習得願望が増していく。


問題は、相応の時間が必要なのは明らかだったが、
時間さえ取れればチャレンジしたいと思い始めた矢先、
先日の冷却液流出での緊急運休はモバイルフレンドリー診断突破を目論む絶好の機会となった。


私の場合、業者の有料ひながたや、ソフトを使う手法には興味がない。
あくまでもパソコンのメモ帳での構築が目標となる。
理由は、一番楽だからだ。


正直、全く手探りで、「さっぱりわからん」　ガラ携帯時代とは違い、
数ヶ月間、実際にスマホを手に取り、仮設を組み立てたりし、
少なからず手ごたえは掴んでいた。

つまり、スマホ側の立ち位置で考えられるようになり、
遂にモバイルフレンドリーを突破した。


後は微調整と精度を上げるのが当面の課題ですが、コツは掴んだつもりで、応用で対応可能。
達成感はヤフーカテゴリ突破並です。！





以下はモバイルフレンドリー対応ファイル習得工程（10時間位を投入）


モバイルフレンドリー診断で落ちると、


1テキストが小さすぎて読めません

2リンク同士が近すぎます。


3モバイル用 viewport が設定されていません

などがGoogleから表示されるので、これらを一つ一つ潰していきます。


1と2はスマホ側の視点で考え、ひたすら試行錯誤した。

方法としては、仮説を試すためにhtmlファイルを修正し、サーバへ転送。
そして自分のスマホで変化を確認。そして修正。

この作業を延々と繰り返す。

（詳細については企業秘密）


3に関してはネット上で魔法の呪文を探した。
要は<これHEAD>と<これ/HEAD>の間にぶち込むメタタグ挿入だが、以下の魔法の呪文で落ち着きました。
発表から3ヶ月経つので、情報は豊富でした。まさに情報社会です。



ご参考まで呪文例


<メタMETA http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
link rel="stylesheet" media="all" type="text/css" href="style.css" />
<　　メタ!-- @media screen and (min-width: 769px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
#container{
width:100%;
}（style.css） -->
<メタlink rel="stylesheet" media="all" type="text/css" href="tablet.css" />
<メタ!-- @media screen and (max-width: 768px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
#container{
width:100%;
}
（tablet.css） -->
<メタlink rel="stylesheet" media="all" type="text/css" href="smart.css" />
<メタ!-- @media screen and (max-width:640px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
#container{
width:100%;
}
（smart.css） -->

（〇　メタは抜く事）

年度も替わり、巷は暇だったようだし、なかなか有意義な休暇でした。
得たものはとてつもなく大きい。