hoihoiはじめに
大規模なモバイルwebサービスをチームで開発している時に、なるべくデザイナーとしても開発効率をあげるため、精度の高い状態で次の工程（主にフロントエンジニア）に修正依頼や、追加要素の実装のお願いをしたいと考えているのですが、Photoshopなどのアプリケーションを用いて画像でいくら精度をつめても、結局実装してみるとイマイチで再度修正してもらうなんとことはよくあると思います。
また、追加要素としてwebページのパーツにCSSでアニメーションを加えて華やかにしたいとか、現場入ってるアニメーションの速度を微調整したいといった時になかなか感覚的なものなので口頭だと伝えづらいなんとこともあったりと。
デザイナーでも多少のCSSの知識がある人は多いと思うのですが、大規模なwebサービスになるとおいそれと実際に使用されているCSSをデザイナーがいじくるわけにはいきません。
自分の書いたCSSファイルを一つだけでも開発中のサービスに突っ込めれば・・・、CSSアニメーションなどもいい感じに調整後数値でエンジニアに伝えることができるのに・・・
一応これが今回の経緯になります。
必要なスキル
- CSSの知識
自身のスタイルシートを開発中のwebサービスに突っ込むまでの流れ
- 自身のPCにXAMPPを用いてローカルにwebサーバーをたてる
- Fiddlerを用いて自身のPCを通信するとき経由させ、立てたwebサーバーにおいてあるJSファイルをつっこむようにする
- つっこまれたJSファイルから立てたwebサーバーにおいてあるCSSをつっこむ
- 実機で確認するためにスマホでプロキシを経由するようにする
それでは順を追って説明していこうと思います。
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を起動して、開いてるブラウザのページのどれかをリロードしてみると勝手に通信内容がつらつらと表示されていくと思います。
CustomizeRulesの修正をしてbodyダグの一番下にscriptタグを突っ込むように修正
まずFiddler上部のメニューリストから
Rules > Customize Rulesと選択して下さい
そうすると何かしらのテキストエディタが起動してスクリプトを表示してくれます。
次にこのスクリプトのOnBeforeResponseメソッドを修正します。
（だいたい277行目くらいから）
|
1 2 3 |
static function OnBeforeResponse(oSession: Session) { // 以下略 } |
を以下のようにまるっと書き換えて下さい。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
static function OnBeforeResponse(oSession: Session) { if (m_Hide304s && oSession.responseCode == 304) { oSession["ui-hide"] = "true"; } if (oSession.oResponse.headers.ExistsAndContains("Content-Type", "html")) { if (oSession.HostnameIs("[開発中のサービスのドメイン]")) { var oBody = oSession.GetResponseBodyAsString(); // Remove any compression or chunking oSession.utilDecodeResponse(); var oBody = System.Text.Encoding.UTF8.GetString(oSession.responseBodyBytes); oBody = oBody.Replace("</body>", "<script src=\"http://[自身のPCのIP]/proto/proto.js\"></script></body>"); oSession.utilSetResponseBody(oBody); } } } |
[開発中のサービスのドメイン]と[自身のPCのIP]はそれぞれに適した値を入力して下さい。
JSファイルの用意
次にFiddlerでつっこむJSファイルの準備を行います。
先ほど作った空のproto.jsに以下のスクリプトをコピーして下さい。
|
1 2 3 4 5 6 7 |
(function() { var tag = document.createElement('link'); tag.setAttribute('href','http://[自身のPCのIP]/proto/proto.css'); tag.setAttribute('type','text/css'); tag.setAttribute('rel','stylesheet'); document.getElementsByTagName('head')[0].appendChild(tag); })(); |
このスクリプトによってwebサーバーに用意してあるproto.cssファイルを開発しているwebサービスのheadタグ内に追加することができます。
実際ここで少しproto.cssに何かスタイルを記載してみて見た目がが変更されているかをPCのブラウザで確認して下さい。
4.実機で確認するためにスマホでプロキシを経由するようにする
最後にスマホで確認する方法です。以下の記事はiPhoneの例です。
わかりやすいので参考にして下さい。
http://qiita.com/hikoma/items/2c983a521ba2dae5972b
まとめ
以上の流れで自身の任意のスタイルシートを追加した開発中のwebサービスの表示が、スマホでも確認できるようになると思います。