ローカルでもプレビューできるJollyを使ってみた

だいぶご無沙汰しておりました。こもりでございます。前回の更新から随分時は流れてしまいましたが、その間には「レスポンシブ・ウェブデザイン標準ガイド」という書籍を出したりしてます(宣伝しろよ)。

jolly-000

いまどきのWebサイト制作は、これまでのようにPCのみを対象とするわけにはいきません。スマートフォンにタブレット、そしてこれから出てくるであろう未知なるデバイス、嗚呼アタマが痛くなりそうです(笑)。最近なんだかレスポンシブなんとかが話題になることも多いのですが、今日はそんな制作効率をあげるためのツール「Jolly」を紹介したいと思います。

多様なデバイスでの見た目や操作感を確認するのに、Adobeさんが「Edge Inspect」なるものをリリースしていますが、こちらCreative Cloudの契約とデバイス側にアプリが必要です。これでも良いのですが、今のところの最大の弱点はバーチャルホストの設定が簡単にできないのと、「file:///」ではじまるローカルのファイルをプレビューできないこと(いずれ改良されるでしょうけど)。

バーチャルホストの設定はこちらの記事にもあるように37signalsのxip.io使う方法とか、うちでも紹介しているCharles Debugging Proxyを使う方法なんてのがありますが、そこはほらわかる人にしかわからないという…。

そんな面倒なことをしなくても、簡単にローカルのファイルをその場で編集しながらいろんなデバイスでもプレビューできるのが、このJolly(900円の有償アプリ)というわけです。でも、このJollyがまたマニュアルとかヘルプの類が一切ありません(笑)。とはいっても、実のところ別に難しいわけでもないので簡単に説明を。

Jollyの使い方

jolly-001

Jollyを起動すると黒いUIが出てきます。インターフェイスはこれだけで設定もありません。とりあえず何も追加しないことには始まらないので、左下の「+」ボタンをクリックします。

jolly-002

上の方にデータの所在を追加するエリアが出てくるので、歯車ボタンから追加しましょう。ここで追加するのは、Webサイトのドキュメントルートにあたる場所ですね。やることはこれだけ。

jolly-003

jolly-004

で、ブラウザで開きます。

jolly-005

jolly-006

他のデバイスからアクセスする場合は、URLのとこの「ローカルマシン名.local:XXXXX」をブラウザに入れてあげましょう。あとはファイルを編集すれば、自動的にリロードされるという仕組み。

簡単でしょ?

ただ残念なのは、PCで遷移したからといって他のデバイスも同時にページを移動するみたいなことはありません。そこは手動でページを遷移しましょう(※直接ファイル名をいれたかったら、ブラウザではなくJollyのロゴ横にあるアドレスバーに)。

追記: たとえばローカルでWordPressとかを動かしてる場合はどうもうまくいかないようです。静的なものであれば「example.local」みたいなサブドメイン使うとかもいけるんですが。

あ、そうだ。忘れてた。これOS X版しかありません(笑)。というかですね、いまどきのWeb制作はOS Xの方が良いですよ、真面目な話…。

Tags: , ,

   

Comments are closed.


Performance Optimization WordPress Plugins by W3 EDGE