ただのにっき

■ Adobe Shadowを使ってみた

ようやく、Adobe Shadowを入れてみた。PCのブラウザで表示しているのと同じURLを、スマートフォンやタブレット端末にも同時に表示してくれるツール。Responsive Web Designを狙ったサイトの確認作業に威力を発揮するというので、tDiaryのテーマ作成に役立ちそうだ。このサイトをスマホで表示するとわかるけど、ちょっと幅が大きくなっちゃってて、微妙にフィットしてないんだよね。そういうのを直すのに便利そう。

導入は以下のステップ。「Adobe Shadow」というソフトウェアだけで3種類入れないといけないので混乱する(笑):

1. Adobe ShadowのページからWindows用クライアントをダウンロード、インストール
2. Chrome拡張のAdobe Shadowを入れる
3. AndroidアプリのAdobe Shadowをスマホにインストール

PCとスマホを同じネットワークに置いて、まずPCアプリを起動(Chromeのツールバーにある「Sd」マークが青く変わる)。続いてAndroid側のアプリを起動すると、ネットワークをスキャンしてShadowが動いているPCを発見してくれるので、それを選択。すると6桁の数字が出るので、それをChrome拡張の方に入力することでペアリングが完了。PC側で表示しているURLがスマホに渡って、同じページが表示される。

面白いのがインスペクター機能で、Chromeのデベロッパーツールとそっくりな画面が立ち上がるんだけど、操作対象がスマホ側になるってところ。これでDOMやCSSをいろいろ調整しながら動作やデザインの確認ができる。さすがにレスポンスは悪いけど、これはいいな。

で、デザインの不具合は直ったのかというと、いやまぁなんだ……CSSって難しいよなぁ!