Chrome バージョン 30 から変更された API の影響により、現在公開されている Edge Inspect の Chorme 用拡張は、そのままでは動作しません。
アドビ側での対応は進められていることなので、そのうち修正版が公開されるとは思いますが、Chrome 30 に更新してしまった人のために、一時回避策が公開されていましたのでご紹介します。
なお、Chrome 拡張を自分で一部書き直すことになるので、対応を行うには JavaScript を多少知っていた方が安全かもです。
1. まず、作業を始める前に、Edge Inspect の拡張を無効にします。
CSS Regions は、現在 W3C で標準化が進められている CSS のレイアウト機能の 1 つです。従来の HTML コンテンツのレイアウトの常識を変える革新的な試みです。
従来の Web レイアウトは、テキストや画像を含むタグの並びを指定することで実現されてきました。この方式では、HTML 文書の構造が、実現可能なレイアウトを大きく制限します。これに対し、コンテンツの定義をレイアウトに使う領域の定義から分離するのが CSS Regions です。
CSS Regions では、「このコンテンツをこの領域に流し込む」 という指定ができます。そのため、DOM 構造そのままだったら表示されていたはずの場所とはまったく違う場所にコンテンツを表示することが可能になります。
また、複数の領域にまたがった流し込みの指定もできるので、あるコンテンツを別のコンテンツの両側分けてに表示、なんてこともごく簡単に実現できます。
特に、全ての画面で同じソースを利用するレスポンシブデザインでは、CSS Regions による恩恵が大きそうです。例えば、下の例では、複数カラム表示時には、真ん中に見出しを配置してその周りにテキストが回りこむような配置になっていますが、1 カラム表示時は見出しがブロック間に移動します。
Edge Inspect と言えば、すっかりデバイス上での表示テストには欠かせないツールとなりました。
その Edge Inspect の機能を JavaScript から呼び出して利用できるという API が公開されました。GitHub にリポジトリが作られています。 （edge-inspect-api）
API として提供される機能は、Edge Inspect の Chrome 拡張に実装されている機能のサブセットです。これを使えば、Chrome 以外のブラウザからも Edge Inspect を利用したり、Edge Reflow や Edge Code のように、ツールから直接表示確認を行えるようになります。
この API は Apache 2.0 ライセンスの元、自由に利用することができます。ただし、Edge Inspect の正式な利用ライセンスは必要です。
デバイス上での表示を確認できるツール Edge Inspect が日本語化されました。あわせていくつか細かな改良やバグ修正が行われています。
今回、日本語化されたのは Edge Inspect の Chrome 拡張と、iOS および Android のクライアントアプリです。明記されていませんが、おそらく Kindle クライアントも日本語対応しているものと想像されます。 （実機が手元に無いので未確認です）
デスクトップ上で動作する Edge Inspect アプリケーション本体は、まだ日本語に対応していません。こちらは来年の早い時期に公開が予定されているそうです。
この機会に Edge Inspect を始めてみようという方には、ちょっと古いですが、「Adobe Edge Inspect：様々なデバイスで手軽にブラウザーテスト」 あたりが参考になると思います。その他の情報は、過去の関連記事もご参考まで。
Edge Inspect の iOS アプリの新しいバージョンが公開されました。主要な変更点は、iOS6 への最適化と、iPhone 5 の新しい画面サイズへの対応です。
今回から、Adobe Shadow から Edge Inspect へと名前が変更されています。ついでに、対応する OS のバージョンが iOS 4.3 以降に変更されました。まだ Edge Inspect アプリをインストールしてなかった iOS 4.3 より前の環境は、iOS 4.3 以降のバージョンにアップデートする必要があります。
iOS 4.x 且つ iOS 4.3 より前の環境では、今後アップデートの対象とはならないものの、旧バージョンの Adobe Shadow アプリを引き続き利用できます。
Edge Inspect アプリの古いバージョンはもう入手できないので、iOS 4.3 より前の環境でテストしたい場合、既に Adobe Shadow を導入済みのデバイスがあるなら、そのままにしておいた方が良さそうです。iOS のアップデートの速度は比較的早いので、あまりそんな心配は要らないかもですが。
昨日 Edge Inspect が正式に発表されました。これまでは Shadow というコード名で Adobe Labs に公開されていたソフトウェアが、正式にアドビ製品の 1 つになった、という位置づけです。
Edge Inspect は Creative Cloud メンバーシップに含まれています。まだ未登録の人は、とりあえず無料会員として登録すると Edge Inspect がダウンロードできます。
現在、既に Shadow をインストールしている場合は、上の製品ページ内のリンクから、手動で Edge Inspect にアップデートする必要があります。そのまま使っていると、設定済みの期限 （10 月末） が来た時点で利用できなくなるそうです。
一方、インストール済みの Shadow の Chrome 拡張は、自動的に Edge Inspect の Chrome 拡張に置き換えられるそうです。更新後はアイコンが変わるので、一目で確認できるようになっています。
Adobe Shadow の新しいリリースが Labs に公開されました。 （Shadow@Labs）
今回から、Chrome 拡張は、自動的に更新が行われるそうです。そうすると、他の Shadow 関連アプリも更新しなければなりません。
ということで、ダウンロード用のリンクです。
Shadow の制約の 1 つに、バーチャルホストの未サポートがあります。テスト用に 1 台のサーバで複数サイトの代わりをさせているような環境では、Shadow をそのまま利用することができないかもしれません。
この問題を Shadow だけで解決するのは難しい様です。そこで、今回は、xip.io を使って、バーチャルホスト環境で Shadow を利用する方法をご紹介します。
xip.io は、37signals によって運営されている無償のサービスで、独自の DNS を使うことで、任意の IP アドレスを返せるようになっています。例えば、xip.io に 10.0.0.1.xip.io というドメイン名を送信すると、 10.0.0.1 がアクセスすべき IP アドレスとして返されます。
つまり、xip.io の前のサブドメインとして 4 つの数字を指定すると、それが、そのドメインの IP アドレスになるわけです。
Adobe Labs に Shadow の新しいバージョンが公開されました。 （Shadow@Adobe Labs）
今回は、インフラの更新も行われました。そのため、今後 Shadow を使用する際、関連する環境全てのソフトウェアの更新が必須だそうです。ご注意下さい。
以下は、プログラムの入手先です。
Adobe Labs に Shadow の新バージョンが公開されました。 （Shadow@Labs）
Shadow は、デスクトップ上の Chrome とネットワーク接続されたデバイス上の表示を自動的に同期させるツールです。利用方法はちょっとめんどくさいので、始めての方は以前の記事をご覧下さい。（Adobe Shadow の設定方法と注意点）
Shadow のプログラム一式はこちらからダウンロードできます。サポートされる環境はリリース 1 と同じです。デバイス用は iTune Store や Google Play に直接行った方が早いかもしれません。
なお、iOS 版 （1.0.184） はまだ公開されていないようでした。新しい iPad には、このバージョンが必要な様です。
さて、リリース 2 で追加された新機能は以下のとおりです。
先週の記事で紹介した Adobe Shadow の設定方法と使用時の注意点について、改めてご紹介します。
まず、必要な環境です。
デスクトップ環境には、Shadow と、Chrome と、Chrome 用 Shadow プラグインをインストールします。デバイスには Shadow クライアント （iOS, Android） をインストールします。
Windows 7 のみ、Shadow と一緒にインストールされる BonjourPSSetup.exe を使って Bonjour の設定も行います。
ここまでできたら、PC とデバイスを接続します。以下はその具体的な手順です。
アドビの新しい Web 制作支援ツールとして Shadow の Labs リリース 1 が Adobe Labs に公開されました。 （Shadow@Adobe Labs）
今回公開された Shadow の主な機能は、以下の 2 つです。
サイトの表示確認および修正作業中に、デバイス （閲覧環境） とデスクトップ （開発環境） を行ったり来たりする必要がなくなるため、スマホサイトの開発が効率的になりそうです。
