SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Adobe Developer Connection(AD)

マルチデバイス対応のウェブ開発を効率化する「Adobe Edge Inspect」の使い方

  • X ポスト
  • このエントリーをはてなブックマークに追加

ペアリングまでの手順

 同期ブラウジングを開始するには、互いのデバイスを正確に認識しあうことが必要です。Bluetoothデバイスでの接続などでお馴染みのペアリング設定に似た手順です。端末側には何桁かの数字が(パスコード)表示されていると思います。

パスコード端末
パスコード端末
パスコードPC
パスコードPC

 これをGoogle Chrome拡張機能のコントロールパネルに入力します。問題なく認証されれば、端末側のアプリにGoogle Chromeで表示しているページと同じURLへ瞬時にアクセスしているはずです。これで同期ブラウジングが開始されました。

Edge Inspectを使った開発

 Edge Inspectを使った開発をイメージしてもらうために、実際にどこかのウェブサイトにGoogle Chromeでアクセスしてみてください。

 例えば、レスポンシブWebデザインに対応したAdobe Creative Cloudのページを表示してみましょう。

同期ブラウジング

 同期ブラウジングはさきほど体験したとおり、Google Chromeで表示しているURLをリアルタイムに端末でも表示する機能です。実際にネイティブのWebViewを使ってのレンダリングなので、レスポンシブデザインのサイトや端末専用サイトであれば、その差が見て取れるでしょう。

レスポンシブ表示例(PC、端末)
レスポンシブ表示例(PC、端末)

 デバイスごとに表示が振り分けられているのを確認できると思います。この同期ブラウジングはリンク移動などの通常遷移はもちろん、リロード、ハッシュチェンジ、クエリパラメータなどの遷移にも対応しています。ちなみに、同期ブラウジングはGoogle Chromeのアクティブなタブに対して行われます。

無償版の機能制限

 無償版では同期ブラウジングが可能なデバイスは1台までなので、別のデバイスで確認するのであれば、拡張機能のコントロールパネルから都度デバイスを切り替えます。有償版にすることで複数台のデバイスを一気に操作できるので、対応環境が多い場合はぜひ検討してみてください。

リモートインスペクタとデバッグ

 ふだんのウェブ開発に、Google Chromeに用意されているデベロッパーツールを使用している開発者も多いのではないでしょうか。ページ上の要素を動的に書き換えたり、CSSルールを新たに適用するなど、なくてはならない開発ツールの一つだと思います。

インスペクタ
インスペクタ

 Edge Inspectはweinreを内蔵しているので、デベロッパーツールによく似たWebインスペクタをつかった開発が手軽に行えます。weinreとは、リモートデバッグを可能にするサービスですが、node.js環境が必要だったり、元のコードに一文を加えるなどの手間がありますが、Edge Inspectであれば、コントロールパネルからボタン一つですぐに利用できます。

コントロールパネル-インスペクタ
コントロールパネル-インスペクタ

 使い慣れたWebインスペクタでの開発ができるので、導入のしやすさも魅力です。

次のページ
スクリーンショット撮影

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Adobe Developer Connection連載記事一覧

もっと読む

この記事の著者

中農 稔(面白法人カヤック)(ナカノ ミノル)

株式会社カヤック HTMLファイ部所属。フロントエンドエンジニア。HTML5を駆使してアニメーションやミニゲーム実装を中心に、広告キャンペーンを手がける。これまでの実績に「Domino's App feat.初音ミク」「RAIZIN」など。好きな言語はJavaScript、好きな動物は鳩、好きな言葉は「吐いた豆はくわぬ」。 Twitter: @nenjiru Facebook: https://www.facebook.com/minoru.nakanou

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7131 2013/05/24 10:42

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング