スマホサイト・レスポンシブサイトのコーディングにはAdobe Edge Inspectが必須

Adobe Edge Inspect

Adobe Edge Inspectは数年前から使っていて、正直コレ無しでスマホサイトやレスポンシブサイト作るのは無理!というくらいAdobe Edge Inspectに頼っています。

Adobe Edge Inspectって何?という人はここ見てください。

で、さらに便利にするために下記の2項目も設定しておくと便利です。
・バーチャルホストも確認できるようにする
・ローカルのWordpressも確認できるようにする

これで、大体のウェブサイトの制作には十分だと思います。

方法はこちら。

バーチャルホストも確認できるようにする

  1. バーチャルホストの設定ににServerAlias siteName.*.xip.ioの記述を追加する。
    ※userName、Client1の箇所はそれぞれ変更して下さい。
    
        DocumentRoot "/Users/userName/Sites/Client1"
        ServerName client1
        ServerAlias client1.*.xip.io
    
    
  2. ブラウザからは、http://client1.10.0.0.1.xip.ioでアクセスする。
    ※10.0.0.1の箇所は各PCのIPに置き換えてください。
    IPの確認はChromeのinspectで確認できます。

    ip

参照:Shadow + xip.io: Virtual Hosts Workflow Simplified

WordPressも確認できるようにする

  1. Root Relative URLsプラグインを使用する。
    以上です。
    ただし、ワードプレス構築でCSSや画像のパスを相対で記述している人は上記のプラグインを使用しなくても確認できると思います。
    また、バーチャルホストでの構築でない場合も、プラグイン無しで確認できると思います。(たぶん)

参照:Edge Inspect + WordPress workflow

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Post Navigation