タグ別アーカイブ: Prototyping

デザイナーが開発中のモバイル用webサービスにスタイルを追加して、あれこれスマホで確認したい時にやってる方法

はじめに

大規模なモバイルwebサービスをチームで開発している時に、なるべくデザイナーとしても開発効率をあげるため、精度の高い状態で次の工程(主にフロントエンジニア)に修正依頼や、追加要素の実装のお願いをしたいと考えているのですが、Photoshopなどのアプリケーションを用いて画像でいくら精度をつめても、結局実装してみるとイマイチで再度修正してもらうなんとことはよくあると思います。

また、追加要素としてwebページのパーツにCSSでアニメーションを加えて華やかにしたいとか、現場入ってるアニメーションの速度を微調整したいといった時になかなか感覚的なものなので口頭だと伝えづらいなんとこともあったりと。

デザイナーでも多少のCSSの知識がある人は多いと思うのですが、大規模なwebサービスになるとおいそれと実際に使用されているCSSをデザイナーがいじくるわけにはいきません。

自分の書いたCSSファイルを一つだけでも開発中のサービスに突っ込めれば・・・、CSSアニメーションなどもいい感じに調整後数値でエンジニアに伝えることができるのに・・・

一応これが今回の経緯になります。

必要なスキル

  • CSSの知識

自身のスタイルシートを開発中のwebサービスに突っ込むまでの流れ

  1. 自身のPCにXAMPPを用いてローカルにwebサーバーをたてる
  2. Fiddlerを用いて自身のPCを通信するとき経由させ、立てたwebサーバーにおいてあるJSファイルをつっこむようにする
  3. つっこまれたJSファイルから立てたwebサーバーにおいてあるCSSをつっこむ
  4. 実機で確認するためにスマホでプロキシを経由するようにする

それでは順を追って説明していこうと思います。

1.自身のPCにXAMPPを用いてローカルにwebサーバーをたてる

これはもう溢れんばかりの記事があるので以下記事がわかりやすいので参考にしてもらえればと思います。
http://techacademy.jp/magazine/1722

そしてさらにLAN内で公開できるようにhttpd.confの設定を変更して下さい。以下の記事がわかりやすいので参考に。
http://weble.org/2009/11/28/xampp-intranet

そしてxamppのhtdocsフォルダ内にprotoというフォルダを作って、その中にテキストエディタでproto.jsとproto.cssという名前の空のからのテキストファイルを保存し、apacheを起動しておいて下さい。

2.Fiddlerを用いて自身のPCを通信するとき経由させ、立てたwebサーバーにおいてあるJSファイルをつっこむようにする

まずはFiddlerをインストール

以下のリンクからFiddlerをダウンロードして下さい。
https://www.telerik.com/download/fiddler/fiddler4

Fiddlerの起動

Fiddlerを起動して、開いてるブラウザのページのどれかをリロードしてみると勝手に通信内容がつらつらと表示されていくと思います。
fiddler_1

CustomizeRulesの修正をしてbodyダグの一番下にscriptタグを突っ込むように修正

まずFiddler上部のメニューリストから
Rules > Customize Rulesと選択して下さい
そうすると何かしらのテキストエディタが起動してスクリプトを表示してくれます。

次にこのスクリプトのOnBeforeResponseメソッドを修正します。
(だいたい277行目くらいから)

を以下のようにまるっと書き換えて下さい。

[開発中のサービスのドメイン]と[自身のPCのIP]はそれぞれに適した値を入力して下さい。

JSファイルの用意

次にFiddlerでつっこむJSファイルの準備を行います。
先ほど作った空のproto.jsに以下のスクリプトをコピーして下さい。

このスクリプトによってwebサーバーに用意してあるproto.cssファイルを開発しているwebサービスのheadタグ内に追加することができます。
実際ここで少しproto.cssに何かスタイルを記載してみて見た目がが変更されているかをPCのブラウザで確認して下さい。

4.実機で確認するためにスマホでプロキシを経由するようにする

最後にスマホで確認する方法です。以下の記事はiPhoneの例です。
わかりやすいので参考にして下さい。
http://qiita.com/hikoma/items/2c983a521ba2dae5972b

まとめ

以上の流れで自身の任意のスタイルシートを追加した開発中のwebサービスの表示が、スマホでも確認できるようになると思います。