ニューヨーク 2年目

ビザを取ってニューヨークに引っ越すと決めて、最初に東京を離れたのが2014年1月末。

ESTAだから90日以内に帰らないといけない、フジロックと朝霧は欠かせない、
ビザは取れたのに東京で納品だ、と結局3ヶ月に一度は東京に戻っているけれど、
前回東京を出たのが今年の1月下旬、ちょうど1年の区切りでした。あっと言う間の1年。早かった。

4-5月のGW頃にまた一度東京に帰る予定です。

Sketch vs Photoshop

12/15時点で最新のver.3.2.1を使っています。
現時点で問題がありそうなのが、

・日本語の行間が正しく反映されない。

・Symbol (スマートオブジェクト的なもの) がネストできない

・レイヤーをレイヤーパレット内でドラッグして並び替えられない

・単位がpxのみで、dpi, pt という考えが無いので、フォントサイズなどが、CSS、Xcodeに記述したい値の2倍になってしまう。(RetinaオプションONで作業しているせい?)

・シンボルや定義したテキストフォーマットに対して、レイヤー効果的なものを重ねられない

・ショートカットキーを覚えるのが面倒 (末尾に自分で設定したものを載せてます)

 

唯一、Photoshopよりも優れているかもしれないのは、素材のエクスポート機能。
SVGの書き出しや、3x素材の書き出しは、Photoshop × Slicy でもまだ対応出来ていないので、Sketchの方が優れている。

Sketch Appが最高で、Photoshopはオワコンみたいな空気が気になっていたので、
1週間触って、1案件分のデザインデータを移植してみたけど、まだ全然実用レベルじゃなかった。
(※ PhotoshopはCC2014ではなく、CCを使っています)

Sketchを絶賛している人は、Photoshopの使い方が下手か、マシンスペックが足りてない。
または、来月日本に帰る時に、ぜひSketchマスターのレクチャーを受けたいです。(連絡先: @soohei, http://td-inc.jp/contact)

 

———

・Photoshopライクにするショートカットキー

拡大

Center Canvas
Cmd + 0

Actual Size
Cmd + 1

ガイドの表示非表示

Show Smart Guides
Cmd + ;

Hide Smart Guides
Cmd + ;

レイヤーの重ね順

Backward
Cmd + [

Move To Back
Shift + Cmd + [

Forward
Cmd + ]

Move To Front
Shift + Cmd + ]

フォントサイズ変更

Smaller
Shift +Cmd + ,

Bigger
Shift + Cmd + .

 

・Flashライクにするショートカットキー

同じ場所にペースト
Paste in Place
Shift + Cmd + V

オブジェクトを拡大・縮小
Scale…
Option + Cmd + S

 

・以下は、https://designcode.io/sketch を見ながら設定

Make Grid…
Shift + Cmd + M

Round to Nearest Pixel Edge
Shift + Cmd + R

Create Symbol
Shift + Cmd + J

Create Shared Style
Shift + Cmd + K

Paste and Match Style
Shift + Cmd + B

 

プラグインも、
http://www.newmediacampaigns.com/blog/essential-sketch-plugins-for-web-design
https://designcode.io/sketch
を参照して追加しました。

 

Yeoman + AngularJS + RequireJS (+ Ionic)

これまでに書いたリサーチ系ポスト

環境構築メモ (1) Gulp
環境構築メモ (2) Grunt
環境構築メモ (3) RequireJS
環境構築メモ (4) Bower
フレームワーク習得メモ (1) AngularJS
フレームワーク習得メモ (2完) Ionic
環境構築メモ (5完) Yeoman

これらをまとめるクライマックスです。

これまでに、Gulp, Gruntで自己流ワークフローを確立し、今までキャッチアップしそびれていたツールとして、Require, Bower, AngularJS を勉強してきました。

そして、これらを一式、きちんと動くように束ねたものが、
soohei/yeoman-angular-coffee-requirejs-seed
です。

 

Yeomanで、
yo angular –minsafe –coffee
して出来るテンプレートをベースに、AngularJSをRequireJSから始動するように変更し。
distのビルドプロセスにも、RequireJSのOptimizerを追加しました。

Gruntの処理への主な変更箇所は、
wiredepを無効に
useminでJSをconcatするのを無効に
などです

また、RequireJSでOptimizeする時に、JS内の変数名を書き換えられてしまうと、Angularが動かなくなってしまうので、
mangle: false
にして、JS内の変数名を保護しています。

 

RequireJSの処理としては、

・angularは、exportの記述が必要
domready! を使う (!は意味がある)
・bower_compornents 内のコードを書き換えたくないので、一旦CDNは諦める。
※ optimizeでファイルを結合してしまうと、CDN読み込み前に、jQueryプラグインや、Angularの依存ファイルが読まれてしまい、エラーになる
※ jQuery依存のライブラリを一つ一つ、「define([‘jquery’], function($) { })」のように囲めば解決は出来る)
※ angular依存のライブラリを一つ一つ、「define([‘angular’], function(angular) {  })」のように囲めば解決は出来る)

となりました。

 

最後にIonicですが、

bower install ionic#1.0.0-beta.13 –save

して、


ionic: {
  exports: 'ionic'
}

ionicAngular: {
  deps: [
    'ionic'
    'angular'
    'angularAnimate'
    'angularSanitize'
    'uiRouter'
  ]
  exports: 'ionicAngular'
}


define [
  'angular'
  'ionic'
  'ionicAngular'
],

(angular) ->
  'use strict'
  return angular.module 'MyApp', ['ionic']

 

という感じで使えましたが、フレームワーク自体がバギーで、ドキュメント通りにやっても正しく動かないことがある。

具体的には、ion-nav-barが勝手にinvisibleになる。
http://stackoverflow.com/questions/27460173/ng-include-with-ion-nav-bar-not-displaying
http://forum.ionicframework.com/t/ionic-beta-1-0-0-navbar-not-show-on-screen/2346
http://forum.ionicframework.com/t/ionic-beta-1-0-0-navbar-not-show-on-screen/2346

ionicを読み込んだ時点で、ウィンドウのスクロールが無効になり、
スクロールの可否をIonicに委ねる羽目になる。

というあたりで思考停止して、部分的な利用は難しそうだと思いました。

Ionicのエキスパートがいたら教えてください。(連絡先: @soohei, http://td-inc.jp/contact)

環境構築メモ (5完) Yeoman

Yeomanというのは、

・scaffoldingツールのyo
・buildツールのGrunt
・package managerのBower

を組み合わせて、プロジェクトのひな形を自動生成してくれるツール。

つまり、今までに習得した、GruntBower の思想や知識があれば、
yoが書き出すひな形を理解することが出来るし、
GruntとBowerの設定ファイルを読み書き出来れば、
RequireJS を導入したり、Ionic を導入することも出来る。

長いので、結論は一番下にあります。

 

まずは、yoが書き出す基本的なプロジェクト構造を理解するために、、

 

・YeomanでAngularJSのテンプレ作成

yo angular --minsafe MyApp

※ –minsafeはminify時のエラーを出なくするためのオプション

 

Gruntfile.js を見ているといくつか見たことのない記述と出会ったのでメモ。

<%= yeoman.app %>

<%= %> はGruntfile.js内で他のtaskで定義された値を変数として扱う時に使う

・test/spec/{,*/}*.js

通常は、test/spec/**/*.js と書いて無限に階層を掘るんだけれど、
1階層に限定したい時に使う

 

続いて初めて見るGruntのtaskを理解する。

・grunt-concurrent

https://github.com/sindresorhus/grunt-concurrent

タスクを並列処理する。

 

・grunt-wiredep

https://github.com/stephenplusplus/grunt-wiredep

bowerで管理しているJS, CSSファイルへの参照を、htmlファイル内の、

<!– bower:css –>
<!– endbower –>

<!– bower:js –>
<!– endbower –>

の間や、scssファイル内の

// bower:scss
// endbower

の間に挿入する。トリガーのタイミングは、 bower.json を watch している。

 

・grunt-usemin

https://github.com/yeoman/grunt-usemin

<!– build:css(.) styles/vendor.css –>
<link rel=”stylesheet” href=”~~~~.css” />
<link rel=”stylesheet” href=”~~~~.css” />
<!– endbuild –>

<!– build:css(.tmp) styles/main.css –>
<link rel=”stylesheet” href=”~~~~.css” />
<!– endbuild –>

<!– build:js(.) scripts/vendor.js –>
<script src=”~~~~.js”></script>
<script src=”~~~~.js”></script>
<!– endbuild –>

それぞれに挟まれた、CSSやJSファイルを1ファイルに結合して、
HTMLも書き換える。すごい。リリース用のビルド時に行う。

CSSが.tmp内に入っていたりするのは、Yeomanの設計思想だと思う。
また、.tmpに入ったものをそのままブラウザに読み込ませるために、
connect の livereload オプションで色々やっている。(次に説明)

 

 ・grunt-contrib-connect の  connect.static module

http://www.senchalabs.org/connect/static.html

connect.static(‘.tmp’) と書くと、
.tmp/styles の中身を /style にあるように振る舞わせたりできる。

 

・grunt-filerev

https://github.com/yeoman/grunt-filerev

ファイル名にリビジョン番号を追加

 

・grunt-cdnify

https://github.com/callumlocke/grunt-cdnify

ファイルの参照にCDNのURLを書き換えてくれる。
サンプルプロジェクトで必要とされているか不明。

 

・grunt-ng-annotate

https://github.com/mzgol/grunt-ng-annotate

AngularJS関連。まだありがたみがわからない。

 

 

このあと、

yo angular --minsafe --coffee MyApp

して、CoffeeScriptバージョンのプロジェクトと見比べてみると、
coffeeファイルもコンパイル後に、.tmp に書き出していて、
リリースビルド時に、concatしているみたい。

 

結論:

・grunt-wiredep で、Bower のコンポーネントを自動的にHTML内に引っ張ってきている。

・grunt-usemin によって、リリースビルド時に CSS, JS を concat して、
HTMLからの参照も書き直すということをやっている。

・connect.static module で、connect のサーバーの base の外のディレクトリも参照できる。
それによって、Compass、Coffeeともに、コンパイル後の css, js ファイルを、
不可視ディレクトリ (.tmp) に書き出したり、
bower_components を、appディレクトリの外に置いたりしても大丈夫。

・人間がエディタで編集すべきファイルのみを、appディレクトリに集めている。

・今後、Ionic や RequireJS と共存する場合は、適宜 task を切り捨てても良いと思う。

 

 

フレームワーク習得メモ (2完) Ionic

Ionic はHTMLベースで、スマホUIのベーシックなパターンを提供しているフレームワーク。

Cordova という、HTMLベースでのネイティブアプリ開発キットを経由して、
ネイティブの機能を叩いたり、アプリ形式でビルドして実機で実行したりすることも出来る。

チュートリアル通りにサンプルプロジェクトを作った場合、

ionic serve

と実行すれば、サーバーを立ち上げてブラウザで動作確認することができるので、
ブラウザ専用のコンテンツを作る時は、この利用法だけを考え、Cordovaのことは忘れて良い。
※ サンプルコードに含まれる <script src=”cordova.js”></script> という箇所も不要。

Ionic自体が、BowerAngularJSに依存した状態で初期化されるので、以降の勉強はYeomanの管轄内で行う。

フレームワーク習得メモ (1) AngularJS

環境構築メモ (4) Bower

Bowerは、パッケージマネージャーと呼ばれていて、
開発者がコマンドを叩くことで、configファイルに定義された、
必要なコンポーネント(外部ライブラリ) を全てオンラインから集めてきてくれる。
(node.jsのnpm installのように、bower installというコマンドを叩く)

例えば、modernizerを使いたかったら、bower install modernizer。

これを、今までの soohei/grunt-requirejs-seed に組み込んだものが、

soohei/grunt-bower-requirejs-seed

.bowerrc というファイルで、bowerのコンポーネントを配置する場所を定義できるので、
今回は、 “directory”: “www/assets/bower_components/”  を指定。

また、Grunt内の bower というタスクで、RequireJSのベースとなるファイルのパスを指定でき、
target: { rjsConfig: ‘www/assets/js/app.js’ }
というようにしておくと、タスク実行時に、各コンポーネントへのパスをapp.jsに書き込んでくれる。

その他のタスクの連携は今までと同じ。

これで開発時の、コンポーネント (外部ライブラリ) のダウンロードと、ソースコードのビルドの自動化、
Webサイトロード時の、コンポーネントの依存関係やロード順序の交通整理の自動化、
が実現できました。

こういった目的を持ったワークフローのタスク定義や、フレームワーク (AngularJS, Ionic…) の導入を行って、
さらにプロジェクトのひな型生成をやってくれるのが、Yeomanのようです。(Yo + Bower + Grunt)

ここまで手動で積み重ねたものが、Yeomanによってどんな風になるか、明日勉強します。
勉強結果を書く予定の場所はここ

環境構築メモ (3) RequireJS

RequireJSは、JSファイルの依存関係・実行順を、設定ファイル内に予め定義しておくことで、
html上のsourceタグでは先頭のJSファイル1つだけを読み込んで、
残りのJSファイルの非同期ロード・処理順をRequireJSに一任できるライブラリ。

これをワークフローに組み込んだものが、 soohei/grunt-requirejs-seed

今までからの変更点として、開発用のディレクトリをwwwとして、
デプロイ用のディレクトリはwww-buildを別に作るようにした。(www-buildはgitignoreしてある)
またjQueryはCDNからロードしたり、自分が書くコードはRequireJS関係も含め、
全てsource/coffee内でCoffeeScriptで書けるようにした。

この www-build の書き出しは、デプロイ時の処理の中に新たに導入した、RequireJS Optimizer が行う。
(toolsディレクトリの中、Gruntのタスク名は、 exec:build )

また、Optimizerの設定に、”removeCombined”: true を追記することで、
結合に使ったファイルをビルド先にコピーしないようにしたり、
(参考: Do not copy source file when optimizing using requirejs – Stack Overflow)
前回紹介した、Gruntでのugilify時のオプション preserveComments: ‘some’ も採用してます。

それとRequireJSの書き方の話で、requireとdefineの違いについては、
「javascript – RequireJs – Define vs Require – Stack Overflow」 に書かれているベストアンサーが的確。

そもそものRequireJSの理解は、bouzeの 「Require.jsを試してみた | blog.bouze.me」 に超救われた。

最後に、gruntのコマンドなどを整理すると、
人間が作業するのはwww/source以下。Gulpが頑張るのがwww/assets以下。
デプロイに使うのは、www-buildに残ったファイル一式
普段は、grunt
デプロイ前に、grunt -dist
www-buildをルートにしてサーバーを立てて、動作チェックをするとは、 grunt prod-serve

次回は、JSのライブラリの管理をする「パッケージマネージャー」、Bowerです。

環境構築メモ (2) Grunt

前エントリーのgulp編 でGulpに鞍替えしたけど、色々あってGruntに戻ります。

最初のGrunt〜Gulpのノウハウを込めて、Gruntの作業環境もアップデート。

こちらです。 soohei/grunt-seed

Gulpと同じことをしているけど、だいぶ設定ファイルが短くなった。

Gulpの時と同様、assets/libs/js の中身を機械的にconcatして、
source/js/libs.js としているので、ライブラリの依存関係や読み込み順によっては地雷になります。
そこでこの後導入されるのが、もっと歴史が古いけど、手付かずだった、RequireJSです。

それと、JS, CSSのライセンス表記を残すために、distタスク内で、
ugilify後にライセンスをconcat (concat:libs_js, concat:libs_css) しているけど、

uglifyのオプションで、 preserveComments: ‘some’ というのがあることを後日知りました。
CSSはだいたい同じ作者のJSとセットなので、JSにライセンス残せばOKな気が。

gulp編の繰り返しになるけど、
人間が作業するのはsource以下。Gulpが頑張るのがassets以下。
デプロイ時はsource不要で、assetsフォルダのみでOK。
普段は、grunt
デプロイ前に、grunt -dist

次回へ続く。

環境構築メモ (1) Gulp

Gruntを覚えたばかりだったけれど、Gulpへ乗り換えた仲間がいたので実践。

Gruntだろうが、Gulpだろうが、やりたいことは同じ。

基本ワークフロー

・Compass(Sass)の変更をwatchして、コンパイル、適宜結合
・CoffeeScriptの変更をwatchして、コンパイル、適宜結合
・Slicy連携、自作スプライトイメージ処理用Rubyスクリプトを自動実行 → これをCompassが良い感じに処理
・これらの処理に応じてブラウザを自動的に再読み込み

デプロイ用ワークフロー

・CSSを最適化 (ベンダープレフィックスやmedia-query周り、プロパティのソートなど)
・CSSをminify
・pngをminify
・JavaScriptをUglify
・JSライブラリのライセンスも良い感じに残す

こうして出来たのが、
soohei/gulp-seed
です。

人間が作業するのはsource以下。Gulpが頑張るのがassets以下。
デプロイ時はsource不要で、assetsフォルダのみでOK。
普段は、gulp
デプロイ前に、gulp -dist

次回へ続く。