低予算で既存のウェブサイトをスマホ対応してほしいという案件がたまたまあって、じゃあPC用のデザインはそのままにしてスマホ対応だけしましょうということになりました。
こういうお客さんに限ってウェブサイトのデータをダウンロードしたいからSSHのアカウントくれとか言うといろいろとコミュニケーションコストが発生してめんどくさいので、ブックマークレットでCSSを適用してそれで作業しちゃえということでそれ用の雛形をつくりました。
それほど時間を掛けるつもりがない場合、SSHアカウントとかを待ってる間に作業を始めてしまおうという作戦です。
あとわりと初心者な感じのところに外注するときにもいろいろ安心です。
ワークフロー
使い方は以下のような感じです。
$ git clone git@github.com:miya0001/css-anywhere.git
$ npm install
$ npm start
最後の npm start でウェブサーバーが起動して以下のようなHTMLが表示されます。
このリンクをブックマークバーにドラッグアンドドロップしてクリックすると、表示中の画面の背景が真っ赤になるはず。
スマホ対応したいウェブサイトに移動して試してください。
あとは、build/ 以下の CSS や JS を好きなように編集して出来上がったら本番環境に組み込む感じです。