gulpのbrowser-syncでphotoshopカンプのスマホ実機リアルタイム確認ができる

最終更新日から1年以上過ぎています。
内容が古くなっている可能性もあるのでご注意ください。

スマホのカンプはスマホ実機で確認するのが正義です。
Chromeのデベロッパーツールなどを使えば疑似的にスマホの画面サイズを再現はできるものの、やはり実機での確認に勝るものはありません。

実機確認をサボると、パーツがやけに小さくなっちゃったりする

でも、スマホカンプの実機確認ってめちゃくちゃめんどくさい。
photoshopから書き出して、lineやslackで自分宛に送って、確認する。なんか変だなと思って微修正をするたびに、また同じステップを繰り返す。溜まっていく画像、溜まっていくストレス。やってられません。

リアルタイム確認ができるサードパーティーアプリもありますが、Macオンリーなんですよねえ…

そこで、自分の持てる限りの環境構築知識をつぎ込んで、スマホカンプ確認を快適にする方法を編み出してみました。

活用する知識

フォトショの画像アセットでアートボードも生成可能

photoshopの画像アセット生成機能、便利ですよねえ。
レイヤーやグループにお作法に沿って名前をつければ、対象のフォルダに画像ファイルになって吐き出されます。面倒なスライス作業もトリミング作業ももはや不要。

もはやこれがなくちゃやってられないレベル

この画像アセット機能ですが、実はレイヤー・グループだけでなく「アートボード」も対象にできます。

アートボードの名前に画像ファイル名を指定すれば…

カンプの吐き出しもワンステップ！

これだけでも革新的

スマホからもlocalhostは見られる

これを初めて知った時は嬉しさで卒倒するかと思ったのですが、ローカルサーバーを動かしているPCとスマホが同じWi-fiに接続していれば、スマホから直接localhostが閲覧できます。

面倒な前準備も不要、一抹の不安を抱えながら外部サービスに頼るステップも不要。スマホから特定のURLにアクセスするだけです。

URL

http://123.456.0.789:8000
(自分のPCのIP : ポート番号)

gulpのbrowser-syncを使っているなら、起動時にコマンドプロンプト/ターミナルに「External:」として表示されるURL。あれです。あれをスマホで入れるだけ。

今までこれを知らずにずっとテストサーバーに上げてたんですよ…

gulpのbrowser-syncモジュールで対象ファイルが更新されるたびにブラウザリフレッシュ

gulpを使っている方なら99%お世話になっているであろうbrowser-syncモジュール。watch対象のフォルダ/ファイルに更新があった際に自動でブラウザリフレッシュがかかります。
もちろん、画像もwatch対象にできます。

もうお分かりですね

構築

フォルダの構築

PC内任意の場所に、カンプ用のフォルダを作成し、gulpをインストールします。

フォルダ構成

任意の場所にフォルダ/
|-- node_modules/
|-- gulpfile.js
|-- package.json
|-- package-lock.json
`-- camph/
　|-- camph.psd
　|-- index.html
　`-- style.css

photoshopの画像アセット機能に、アセットの吐き出し場所を指定するオプションがあればもっとスマートな構築にできるのですが…。
いまのところは「psdを置いた場所と同じ階層に、自動的にpsdと同じ名前のフォルダが生成されてそこに入る」仕様なので、実機確認したくなった段階で対象のpsdファイルを一時的にそこに置く、という運用になります。

必要なgulpモジュールは以下のとおり。
最低限gulpとbrowser-syncだけあればOKですが、一応エラー処理用のgulp-notifyとgulp-plumberも入れています。

package.json

{
  "name": "camph",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.12",
    "gulp": "^4.0.2",
    "gulp-notify": "^3.2.0",
    "gulp-plumber": "^1.2.1"
  }
}

表示用のhtmlとcssを作成

browser-syncのリフレッシュが働くのはきちんとbody要素を持つhtmlファイルだけです。画像をそのままブラウザに表示してもうまく動いてくれません。
なので、表示用の簡単なhtmlページを作ってあげます。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>カンプ確認用</title>
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <div class="pc"><img src="camph-assets/pc.png"></div>
    <div class="sp"><img src="camph-assets/sp.png"></div>
  </body>
</html>

style.css

html,body{
	background-color:#111111
}

div{
	width:100vw;
	margin:auto
}
div img{
	width:100%
}

div.pc{
	max-width:1300px
}
div.sp{
	max-width:375px
}

@media only screen and (min-width: 768px){
	div.sp{
		display:none
	}
}
@media only screen and (max-width: 767px){
	div.pc{
		display:none
	}
}

せっかくなのでPC用カンプにも対応

gulpfile.jsを作成

あとはアセットが吐き出されるフォルダをwatchしてくれるコードを書けば完了です。

gulpfile.js

const gulp = require("gulp");
const browserSync = require("browser-sync");
const notify = require("gulp-notify");
const plumber = require("gulp-plumber");

//ブラウザリロード
function reload(done) {
	browserSync.reload();
  done();
};
exports.reload = reload;

//ブラウザ表示
function browser_sync(done) {
  browserSync({
    server: {
      baseDir: "./camph/",
      index: "index.html"
    },
    reloadOnRestart: true
  });
    gulp.watch('camph/camph-assets/*', reload);
  done();
};
exports.browser_sync = browser_sync;

//起動時
exports.default = gulp.series(
  browser_sync
);

gulp4仕様です