#164
スマートフォンサイトつくりました
2015-4-21
気がついたらすっかりスマートフォンが広く普及する世の中になりました。
近頃のインターネットはスマートフォンからのアクセスが多くなった、とは耳にしていてましたが、自分にはあまり関係ない、と思っていたのですけれども。
しかし先日、ずいぶん前に手をつけたもののよくわからずにそのまま放置していたGoogle Adsenseをもう一回見直してみました。
そうしたらGoogle Adsenseのページビューを見てちょっとびっくり。
私のサイトのページビューの6割は、ハイエンド携帯端末、いわゆるスマートフォンから。デスクトップはわずか3割、というレポート。
え?皆さん、(大雑把に言って)10人に6人は、これを見てるってこと? ↓
・・・いやいや大変だ。(もちろんスワイプして拡大するのでしょうけれど)それは気の毒なことをしてました。
しかも数日前にGoogle Adsenseからこんなメールが来ました。
もうすっかりモバイル(→ハイエンド携帯端末など)が大きな影響力をもった世の中になったってことですか。
確かに、私が昨年、最後に見た東京の通勤の光景といえば、ホームに並んだ人や列車の車両の中の人の、見たところざっと6〜7割の人が、スマートフォンを眺めている、という姿。
あれは正直、ゾッとしますね。
私はそんな人たちの一人に見られるのがイヤで、必ず本を持って歩いて、空いた時間にはそれを読むようにしてましたが、やっぱりスマートフォンを見てしまうんですよね、本を取り出すのも面倒な、もっとわずかな時間に。
で、宮崎に住み始めたらスマートフォンを見る時間も格段に減ったので、見たいサイトがモバイル対応してないからといってもさほど不便は感じなかったのですが、世の中はそうではないということに改めて気づかされました。
それで、スマートフォンサイトを作ることは決心したのですが、じゃあどうするか。
今流行のWordPressに乗り換える、っていうのも考えましたが、今まで作ってきたものをそれに合わせて作り直すのも気が重いなあ、と。今まで自分が作ったサイトに愛着もあるし。
それならば、使い慣れたウェブサイト制作ソフトで、いままでのサイトのコピーと手直しで済むスマートフォンサイトを新たに作った方がいいのではないか?
ということで、今のPCサイトはBiNDというソフトで作っているのですが、それでモバイルサイトも作成できるのでつくり始めました。
BiNDというソフトには、PCサイトを簡単にモバイルサイトに変換できる機能があるらしい。
試しにシミュレータでやってみましたが・・・
TOPページ
最新のページ
・・・これか。
画像を縮めたり、文字を大きくしたり。全体のバランスがいまいち。
しかも、WEBLIFE*serverというのを利用しないと使えないらしい。
仕方ないので自分で手作業で作ることにしました。
PC版で元ネタがありますので1から作るほどの苦労はありませんが、一番手間取ったのが、同じアドレスでPCとスマートフォンに応じてそれぞれPCサイトとスマートフォンサイトに自動的に切り替えられるようにすること。しかも手動での切り替えもできるようにすること。
いろいろ調べてみると、サーバで切り替え指令を自動でできるよう、サーバに.htaccessというファイルを設置するのが一番簡単、とあったのでやってみましたが、自動で切り替えできなかったり、自動で切り替えできても手動で切り替えできなかったりと、どうも不安定。
たどりついたのが、ヘッダにHTMLで切り替えの命令を書き込むというものでした。
HTMLを勉強したことのない自分にとってはなかなかの苦労でしたが、なんとか基本形はできました。
TOPページ
最新のページ
これで、高崎線(上野東京ライン直通)のギュウギュウの通勤列車の中でも、見やすくなりましたよー。(地元ネタ)
ちなみに移住前、お仕事の移動中に撮った、上野東京ライン(2015年3月開業)の建設時の姿。早く乗ってみたい。
@秋葉原駅
@神田駅
横道にそれましたが、これからもPCサイト・スマートフォンサイト共に可愛がってください m(_ _)m
カテゴリー:つぶやき