○ 作成した サイト ホームページ の確認はどうやっていますか?
ホームページを作成した際に、ページのチェックを行ってると思います。
レイアウトはどうか、誤字脱字はないか、写真はイけてるか(笑)
しかし確認しているのは、ホームページを作成したPC&ブラウザだけでは
ないでしょうか?
○ いろいろな環境を想定する
環境!?
そう、環境とはご自分の「ホームページ」をご覧になっている閲覧者
「お客様」の「ホームページを見る環境」のことを指しています。
たとえば・・・
・Windows XP で Internet Explorer
・Macintosh OS X で Safari
こんな感じが最近は多いのではないでしょうか。
ところが、実際にはもっと多くのOS&ブラウザが存在します。
そして普通にこの2つでサイトチェックを行うだけでも大変です。
○ チェックする方法は・・・
チェックする方法を教えましょう!!!
・・・それは全環境をそろえることです。
いやいやいやいやいやいや
それはそうなんですよね。
それが一番です。
実際大手のコンテンツ会社さんはそういったPCルームがあり
テスト要員がチェックするなんて夢のような話もあります。(笑)
しかーし!!
実際そんなにコストはかけられません;;
そこで!!!
今回は簡単に他の環境を再現できる方法をいくつかご紹介します。
■ Safariブラウザ・IEブラウザ を再現
■■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
◎Windowsで制作・確認を行っている方が
Macintoshでどう見えているか? を確認したい
◎Macintoshで制作・確認を行っている方が
Windowsでどう見えているか? を確認したい
これが一番多い要望ではないでしょうか。
実はそれをプレビュー形式で見せてくれるサイトがありました!!!
海外の方のページです。
▼ Daniel Eric Vine トップにあるコンテンツです。
メニューにはかわいい赤ちゃん写真集(?)もあります。
そして、 『IEでの表示を再現してくれる』サイト
▼ ieCapture
次に、 『Safariでの表示を再現してくれる』サイト
▼ iCapture
共に使い方は共通です。
一応説明を・・・
【使い方】
1.まずは 「ieCapture」または「iCapture」確認したい方のサイトを
開きます。
2.ページ上部に「http://□」という入力ボックスがありますので
そちらに確認したいサイトのURLアドレスを入力します。
3.その下にある「Submit a URL」というラジオボタンをチェックし
(はじめからチェックしてあると思います)、書いてある数字を
右隣の入力ボックスに入力します。
4.下の「OK」ボタンを押すとサイトの収集処理が始まるようですので
しばしお待ちを・・・・
5.しばらく待つとページ下部「Your recent requests..」タイトルの
下に確認したいサイトの画像とURLが表示されます。
(いくつか行うと一覧表になります。)
6.このまま画像をクリックすると大きな画像で表示される・・・
はずなのですが、画像の処理にしばらく時間が掛かるようですので
「404 not found」のようなエラーが出た方は再度同じ画面に戻って
少々待ってからもう一度画像をクリックしてください。
7.素晴らしいキャプチャー画像が閲覧できましたか?
このサイトちょっと素敵すぎです。
一度、お試しを!癖になりそうです。(笑)
■ 携帯サイトのチェック
■■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
これをわすれちゃいけない!!
しかも、PCよりいろいろな環境が存在する・・・・
それが、携帯サイトです。
携帯サイトの確認ってちょっと厄介ですよね。
現状、携帯会社は大きく言って3社+PHS1社です。
この4社で仕様が違う上に携帯電話機個体によっても
結構差があるんですよ。
たとえば同じDocomoでも PDCと呼ばれる 通常のiモード機
(現在通常ってFOMAかも・・・)
と
第3世代のFOMAでは相当仕様が違います。
これはauでもSoftbank(Vodafone)でも同じですよね。
さすがに全部チェックするのは無理!
でも、今回は簡易的にチェックする方法をお教えします。
【 iモード での確認】
iモードブラウザのシミュレータをご紹介します。
シミュレータの意味は下記リンクからご覧下さい。
要するに擬似的にiモードで閲覧した状態を再現するツールです。
下記リンク集の「iモードHTMLシミュレータII」がオススメです。
詳細はリンク先に書いてあります。
使い方はインストールして実行してURL入れて見るだけ!です。
しかし、Windows用しかないんですよね・・・
『参考資料リンク』
▼ シミュレータとは
▼ 作ろうiモードコンテンツ
▼ 作ろうiモードコンテンツ:ツール一覧
▼ iモードHTMLシミュレータII
【 EZweb の確認】
EZweb のシミュレータも存在します。
ただ、なんだか古いんですよね・・・
一応、ご紹介まで
下記リンク集の「KDDI au : EZfactory ダウンロード Openwave SDK 6.2K」
です。
説明もリンク先にあります。
実際使用してみると古い機種での見え方がわかります。
確認用には・・・ですが。
『参考資料リンク』
▼ KDDI au : EZfactory
▼ KDDI au : EZfactory ダウンロード
▼ KDDI au : EZfactory ダウンロード Openwave SDK 6.2K
【 Softbank の確認】
ソフトバンクって呼びなれない・・・・
すでに前にVアプリとか呼んでいたものも
S!アプリとかになってました。
そんなこんなでサイト確認ツールも存在しています。
下記リンク集の「ソフトバンク ウェブコンテンツビューア」
を開くとサイト確認用のツールがダウンロードできるようになっています。
こちらはEZwebと違って最新版のようです。
ただ使用方法が結構難しいので
よ~~く説明を読んでご使用ください。
簡単な説明だけ載せときます。
『ウェブコンテンツヴューアー使用方法』
1.ウェブコンテンツヴューアーを起動します。
2.画面上部のメニューから「表示」をクリック
クリックされて広がったメニュー一覧から
「エミュレータ」というメニューを選択します。
3.携帯電話の形が表示されますので
その携帯電話の真ん中「2」の上にある
土星のようなマークのボタンをクリックします。
4.するとURLを入力するボックスが表示されますので
そこにURLを入力し「OK」を押します。
※PCに保存してあるHTMLファイルを見ることもできます。
そのときは「参照」ボタンを押しファイルを選択します。
5.表示されますのでチェックしましょう!!
『※注意点!』
このシミュレータで注意しなければならない点があります。
このシミュレータでは「USER_AGENT」という識別子を発信して
いません。
携帯で閲覧すると自動で振り替えを行う.htaccess や
.cgi などをご使用の際は確認できないことがありますので
注意してください。
その際はSoftbank用(Vodafone用)のページのアドレスを
直接入力するようにしてください。
『参考資料リンク』
▼ ソフトバンク ウェブ
▼ ソフトバンク ウェブコンテンツビューア
■ その他の環境
■■━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
上記のほかにも様々なOS、ブラウザその組み合わせが存在します。
一応、主なものについては対応しておくのが良いと思いますが、無理して
あまり使用されていないブラウザまで対応する必要はないと思います。
たとえばMacintoshのSafariでレイアウトが乱れたりした場合
サイトに一言「このサイトはWindows IE6で動作確認しております。」など
の文言を入れるだけでお客様からの苦情の声はちょっと色が違うのでは
ないでしょうか。
結構忘れがちなことですがその対応もがんばって行ってください!
有効な手としましては「友人を利用する」ということもお教えしておきます。
(笑)
私はよく利用させていただいております。
周りの皆様、いつも感謝しております。
この場を借りて感謝の言葉を述べさせていただきます。
ありがとう!!
サイトの確認方法
筆者のプロフィール
さとーさん
WordPressのカスタマイズや PHP, Python その他各種開発言語 でゴニョゴニョしながら Stripe で決済させるお仕事をしています。
必殺!システム屋のさとーさん システム開発も得意だよ。(本業はそっち)
所属: 株式会社ジーティーアイ 代表取締役アルバイト 佐藤毅(さとう たけし)
Twitter: ウェブ屋のさとーさん
必殺!システム屋のさとーさん システム開発も得意だよ。(本業はそっち)
所属: 株式会社ジーティーアイ 代表取締役アルバイト 佐藤毅(さとう たけし)
Twitter: ウェブ屋のさとーさん