CSS Nite LP54「Coder's High 2017」フォローアップ（1）前川 昌幸さん（イー・ネットワークス）

2017年11月4日（土）ベルサール半蔵門 イベントホールで開催したCSS Nite LP54「Coder's High 2017」のフォローアップとして、前川 昌幸さん（イー・ネットワークス）の『コーダーの前仕事、後仕事』セッションのスライドなどを公開します。

• スライド（PDF）
• 動画

フォローアップメッセージは、イベント開催直後（2017年11月）の時点のものです。

フォローアップメッセージ（補足など）

「コーダーの前仕事、後仕事」のセッションを行った前川です。ありがとうございました。

内容はTipsやツールの紹介でしたが、何かひとつでも明日から使えるものがあれば嬉しいです。
また、セッション中からTwitterで、みなさんが利用しているツールやTipsをツイートしてくれました。ありがとうございます。
全てを拾ってはいませんが、いくつか紹介します。

• MAMPの有料版、MAMP Proについて @sivacchi さん
• node.jsのバージョン管理について @turusuke さん
• ウェブベースのエミュレーター、Browserstack（ https://www.browserstack.com/ ）について @AVELWP さん
• Photoshopでの書き出し設定について @crema さん

今日の他のみなさんのセッションのように、ひとくちに「コードを書く」といってもさまざまな方法論やツールがあるように、その前後の作業でも同様にさまざまな方法論やツールがあります。

私のセッションがきっかけになって、自身の作業の棚卸しや周りの人たちとの共有などしてみてください。

【告知：書籍】

Webサイト、これからどうなるの? キーワードから探るWeb制作の未来像
こもりまさあき、栄前田 勝太郎、坂上 北斗、塚口 祐司、前川 昌幸、松田 直樹 共著
エムディエヌコーポレーション (2017/9/20 発売)
価格（本体2,000円＋税）

Amazonでの購入

告知：イベント

WCK Meeting Vol.56「キーワードから探るWeb制作の未来像」
高知で上記の書籍出版に関連したイベントを行います。
開催日時 2017年12月2日（土）13:30 開場
会場 高知市文化プラザ　かるぽーと　9F 第1学習室

「コーダーの前仕事、後仕事」のセッションを行った前川です。

アンケートでのコメント、質問

アンケートでのコメント、質問についてまとめます。

Local by Flywheel

Local by Flywheelについて、「使ってみます」というコメントが多かったです。導入の際には以下のエントリーが参考になります。

WordPressのローカル環境のためのGUIツールLocal by Flywheelが便利 - Capital P

Windowsでは、batファイルではなくcmdファイルが最近の流れ?

というコメントがありました。ざっと調べてみたところ、大きな違いは無いようですが、もしこのあたりアップデートするようであれば、どこかでアウトプットします。

Windowsのアプリも紹介してほしい

今回紹介したうちで、VirtualHostXとFluid BrowserはMacのアプリでした。すいません。
Local by FlywheelやGenymotionなど他のアプリやツールは全てWindowsでも使えるものですので、活用してください。

Photoshopの書き出し形式の「すべてのスケール」使うのキライですか？

defaultレイヤーでの作業に慣れきっているので、ほぼ使っていないです（キライではないです）。
結果同じ書き出しになるので、性に合う方を使うのが良いと思います。

乗算でパーセント指定された時に困っています。解決方法はありますか？

すいません、そのケースは遭遇した経験がなく。なにか見つかれば共有します。

会社では gyazo.com を使っています。便利です。

これでフィードバックの指示を作成されているデザイン会社さんと仕事しています。確かに便利ですね。ありがとうございます。

Gyazo

WindowsでPC、モバイル一通り利用できるエミュレーターを知りたい

クラウド型のエミュレーターのBrowserstackがカバー範囲も広いので良いかもしれません。

デフォルトで利用できるApacheで良いのでは？

私もその意見には同意する部分も多く、以前はMacに搭載されているApacheを利用していました。
ただ、並行した案件が多くなると管理が煩雑になってきたので、VirtualhostXなどを利用するようになったので、状況によってはツールに頼るのも選択肢のひとつと考えています。

XAMPPを使っていて、Browsersyncを使うことはできるのでしょうか？

できます。BrowsersyncのProxyオプションを利用すれば、Browsesync越しにXAMPPの出力を表示することができます。
（このやり方は弊社でも行っています）

Windows/Macが混在する環境の場合、違いをうまく埋める方法はありますか？

node.jsなどを利用するツールの場合は、ほぼほぼどちらでも動作するので特に気にする必要はないと考えています。
ツール類は確かにいろいろ変わってきますが、環境よりも成果物に差が出ないようにフォーカスして考えていくとよいのでは、と考えています。
なので、あくまでも弊社の場合はエディターなど利用するものは結構違っていますが、その違いを埋めることについてはあまり気を使っていません。

画像をきれいに軽量化して書き出すおすすめの方法はありますか？

私は書き出した後にImageOptimを利用して最適化しています。WindowsだとFileOptimizerなど似たようなツールがありますので、そちらを活用してみてください。

アイコンフォントやCSSスプライトの生成、更新時の管理方法が知りたい

アイコンフォントについては、生成するgulpを作成したことがあります。

https://github.com/enetworks/iconfontcreation。

このあたりが参考になれば。

CSSスプライトに関してはあまり最近使っていないので、すいません。目新しい管理方法などは持っていません。

対象ブラウザの決定はどのようにしていますか？提案していますか？言いなりですか？

提案できる案件であれば提案するのですが、そうでない状況の場合は、ほぼ抵抗せず、言いなりでやっています。

最近Sketchを使うことが多いですが、制作会社ではどうなのでしょうか？

個人的にSketchは所有していて、利用することはありますが、案件では弊社の場合は無いです。商流など環境的要因が大きいので、制作会社でも積極的に採用されているところはあると思います。

nodebrewは利用しませんか？

以前は利用していましたが、今年に入ってからnodenvに変わりました。

ルートパスってなんですか？

href="/hoge.html"という形で、「/」から書くファイルの指定です。説明不足失礼しました。

Photoshopでレイヤーマスクだとサイズの変更や確認がやりづらい、なにか良い対応方法はないか？

いまはこれと言った対応方法は持っていないので、なにかないか探してみます。