ベクトルドロー・レベルゼロ+

ホーム > コンピュータ > webツール > Mobile対応への道

非モバイルユーザーのサイトのモバイル対応への道

作成日 2015.01.16
最終更新日 2015.01.19

ページ作成の経緯

グーグル・ウェブマスターさんからお手紙をもらいました。 「あなたのサイトのページをテストし、そのうちの 100% に重大なモバイル ユーザビリティ上の問題を検出しました。」 モバイルディバイスを持っていない私への嫌がらせ?モバイル・ハラスメント? モバイルデバイスを持っていない人による、サイトのモバイル対応の記録をつけていくことにしました。

始まりは、突然に、というわけでもない。

モバイル表示に問題が発生してるのは、以前から理解していました。 今回、作業する気になった理由は…。

まずは、簡単にできることだけ。

まずは、情報収集、加えて、簡単にできる修正をしました。

ビューポートの設定

Adsense広告ユニットをレスポンシブ広告に置換

レスポンシブ対応していなかったのは、

レスポンシブ対応は、早い段階で考えたのですが、途中で断念しました。
その理由は、気に入ったHTMLエディタが見つからなかったためです。 WYSIWYGタイプ、コードのハイライト表示、コードの入力補助機能を持ち、HTML5とCSS3に対応するエディタを探せなかったのです。 ちなみに、今使用してる、Expresson Web 4は、無料で使えて高機能なのですが、 ビュー表示が対応していないことと、スクリプトがあると動作が一時停止することがあります。 そこで、対応を先延ばしにしてきたのですが、この機会に何とかしたいと思います。

まずは、環境を整えよう

無料で使えるHtmlエディタを使ってみました。
アプリケーション名 WISIWYG ハイライト 入力補助 適用
Expresson Web 4 html5,css3でビューに不備があります。
Aptana × 日本語の操作方法の説明がほとんどありません。
KompZer × × 最終更新は2010-03-11です
Seamonkey Composer × × ブラウザ部分には、こまめに更新があります。
BlueGriffon cssエディタは有料です。
Chrme Dev Editor × 入力補助は動きが少し他のアプリケーションと違います。 ブラウザで表示させるためのボタンがあります。
Chrme Dev Editor × 入力補助は動きが少し他のアプリケーションと違います。 ブラウザで表示させるためのボタンがあります。
間違っているかもしれないのでご自身で使い心地を確認してください。 この記事作成時点では、「Aptana」、「BlueGriffon」、「Chrme Dev Editor」の中から選ぼうと考えています。 もちろん、他のエディタも探していくつもりです。

テンプレートは書籍から

書籍で紹介されている例を基にページを作成するのがお勧めです。書籍の中で、コードの書き方や考え方も説明されているので、合わせてコードの理解もできます。

既存ページの変更は、検索置換で行います

1ページ1ページ手動で変更していくのは、気力をすり減らしますのでできれば避けたいものです。 その気力は、むしろ、新しいページを作成するために使うべきです。 このような作業で大活躍するのは、検索置換と呼ばれる機能です。
ただ、今回のように、修正を重ねてきたサイトを検索置換で移行しようとすると、 かなり置換漏れが派生します。
結局、手作業で頑張ることになりました。

終わりに

かなり、時間と手間をかけましたが、なんとかモバイル対応できました。
サイトのページ数が増えてくると何らかの管理ツールが必要になるのだと思います。 今回は、力技で、なんどかしましたが、なんらかの方法を探す必要があるようです。
Mobile対応への道 >> 始まりは、突然に、というわけでもない。
Mobile対応への道
Copyright (C) 2011-2016 kukekko All Rights Reserved.
kukekko@gmail.com
ご連絡の際はアドレスの@は半角にしてください。 また、お問い合わせページのURLの明記をお願いします。
「掲載内容は私自身の見解であり、所属する組織を代表するものではありません 」。
inserted by FC2 system