2013/07/08スマホサイト制作において役に立ちそうなツールを見つけたのでご紹介します。InspectWebサイト制作のコストとして、クロスブラウジングというものがあります。作成したWebサイトがいかなるOS、ブラウザ上でも同等のコンテンツを提供できているか保障しなければなりません。(厳密に全く同じように見えているのかという事ではなく、同等のコンテンツ内容を提供できているかというのがポイント。)最近ではスマートフォンの普及が加速し、これらの端末でもきちんとWebが表示するように制作時には設計する必要があります。スマホの種類も日々急速に増え続けているので、その確認作業コストは増加傾向にあります。これまでの確認作業手順これまでの確認作業方法として、たいていはテストサーバを立ち上げ、そこにコンテンツをアップロードし、手元の複数のスマホ端末で確認します。この時、テストサーバは公に公開はできないので、認証などをかける必要があります。世の中の全てのスマホで確認することは現実的ではないので、社員の端末をかき集めたり、協力会社やクライアントの端末をお借りしたり、なるべく多くの環境で確認することで信頼性を高めます。Chromeとで見ているコンテンツを同期します。現在Chromeで見ているものを、スマホで別モニタとして閲覧している感覚です。Chromeでブラウジング操作すると、スマホはそれに連動するので、操作せずともさまざまなページを多くのモバイル端末で一斉に確認することができます。ここではIDは取得済みとします。Inspect」をダウンロードしてインストールします。Chromeの拡張機能をインストールします。Chrome本体はインストール済みの状態とします。https://chrome.google.com/webstore/detail/adobe-edge-inspect/ijoeapleklopieoejahbpdnhkjjgddem?hl=ja次に、例えばWeb画面をAndroid端末で確認したい場合、その端末に以下のアプリをインストールします。アプリこれで準備は完了です。Inspect」のアイコンをクリックし、ツールが待機状態であることを確認します。次にスマホ側のアプリを起動し、同期する接続先のPCを選択します。ここで自動検索が実行されますが、なかなか見つからない場合は手動でIPを入力します。PCが見つかると以下のようにパスコードが生成されるので、これをPC側のツールに入力します。実際にChrome側で下記のサイトを閲覧した場合に、スマホでモニタリングした図が以下になります。Inspect動作は快適です。無償バージョンではスマホの複数同時接続が1台と限定されているので、複数端末で確認したい場合は順次接続を切り替える必要があります。月額1,000円となっているようです。Inspect少々期待はずれ私がこのツールに期待していたのは、PCとスマホがLAN内で通信するため、グローバルを介した接続が必要ないのではないかという点です。仮に、主となるPCで閲覧しているコンテンツをLAN経由でスマホに流しているのならば、外部にテストサーバを立てる必要もありません。ローカルで開発しているものを社内のスマホで一斉に確認できるとなると作業コストを大幅にカットできるのではないかと。Webサーバもない状況で、PCでHTMLファイルを直接ブラウザで開いて、それをスマホで確認できるものかと。実際に使用してみたところ、LAN内でコンテンツを流しているというよりは、URLを共有しているだけで、結局、モニタリングしているスマホ端末は外部にアクセスしにいっているようです。実際にこのツールを使うメリットとしては、スマホでURLを手動で入力する手間を省いた程度でしょうか。外部にテストサーバを立てて、ファイルをアップロードし、アクセス認証をかけるという手順は省略できません。それだけのために各端末にツールをインストール、設定したり、後には月額を払ってフルバージョンを利用したり、少し大がかりな気がします。期待していただけに、何だかもったいないですね。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。IE8でjQueryのアニメーションがうまく動作しない場合の対処法auにMNPで乗り換えて半年。スマホが壊れちゃいました。inc.Profileサイト「helog」は私がWeb制作に携わるなかでの経験を中心に記しています。前にも発生したんだよなぁ。」といった無駄な時間を省くことを目的に書き始めました。「へ」の「ログ」です。個人的な技術メモのようなものですが、みなさんの何か役に立つことがあればこの上ないです。