Sketch 3 の魅力

どうも。@1shiharaTです。
今度 「Sketch 3 勉強会 in NAGOYA」を開くついでに集客がうまくいっていない(汗) ので記事を欠かさせていただきます。

Sketch の魅力

Sketch 3 は、Bohemian Coding 社が開発・販売している Mac 用のベクタードローイングソフトです。

ベクタードローイングソフトといえば思いつくのは、米 Adobe 社が開発・販売している Illustrator
もしくは Inkscape などが頭に浮かぶかも知れません。

Sketch はベクタードローイングソフトという名を冠しながら、
ピクセルを前提にしているという不思議なソフトです。

「新規開発が事実上中止となっている Adobe Fireworks の後継ソフト」

というキャッチコピーを良く聞くかもしれませんが、
実際に使っている身としては、その機能・操作性を大きく凌駕しているのではないかと感じています。

そこで Sketch の魅力について、幾つか上げていこうと思います。

1. 軽い。Mac に特化している。

Adobe 製品を使っていると感じる、重い という感覚。
誰しもその胸にしまいながら、仕方なく使用しているという方も多いのではないでしょうか?

Sketch はとにかく軽いです。さくさく軽快に動きます。

起動・操作のレスポンス供に Adobe 製品とは比べ物になりません.

Apple のフレームワークを活用し、ネイティブアプリとして開発されているため、iCloud や バージョン機能などもフルに取り込まれています。

Artboard 2

2. 細かい操作性。

Sketch の ユーザーインターフェース は、初見で見た時に「こんなシンプルでまともなの作れんの?」と不安を覚えることがあるかもしれません。

しかし、シンプル イズ ベスト とはよく言ったもので、そのUIにすべてがつまっています。

キーセットを覚えるまでは慣れないかもしれませんが、
(といっても自然に使える程度) ほとんど Adobe 製品と同じような感覚で使用できます。

9bc78e0013062bcf047c408041ebc0a2

上記のGIFのような操作はもちろん、
これに Shift キーを合わせて使用すると 10px ずつマージンを測りながら移動できます。

3. シンボル・スタイルの共有

sketch-share

Fireworks にはお馴染みの機能である、シンボル機能も Sketch には搭載されています。

ボタンを繰り返し設置したり、
h1,h2,h3 などのHTMLタグに合わせてスタイルを共有したり。

より、コーディングの時のことを頭で考えながら作ることができるようになりました。

4. 充実した書き出し機能

5bfd179df55e0d0adc312e3bedff44aa

Sketch はベクターベースのドローイングソフトですが、
豊富な書き出し機能により、 Web デザインにもより使いやすいものとなっています。

png, jpg といった従来のフォーマットはもちろん、
svg,eps, PDF での書き出しも容易です。

シェイブやレイヤーをスライスする時も、一々選択範囲を指定せずとも、簡単にスライスすることができます。

5. プラグインによる拡張

Sketch は、jstalk で機能拡張用のプラグインを書くことができ、その多くが Github などで公開されています。

最近では、 Sketch toolbox というアプリでプラグイン管理をすることができるようになりました。(まだベータ版ですが)

  • sketch-mesure : レイヤーの幅や高さ、丸みなどの情報を別レイヤーとして自動生成してくれます。
    2014-10-07 22.06.20

  • content-generator : 写真やテキストのダミーを自動生成してくれます。
    日本語版も配布されています。

  • Duplicator : 素の状態でもレイヤーをコピーしやすいですが、このプラグインを使用することでより柔軟に複製することが出来ます。

25272d8a99674f5396f3a86eef1f6f03

6. ページ・アートボード

イラストレーターではおなじみのアートボード、
Fireworks でお馴染みのページが Sketch には容易されています。

Web サイトを作る時に、ページ毎にファイルを分けて保存するとなると、
ファイル数も膨大になりがちですが、
Sketch では、一つのファイル内で完結することができます。

また、アートボードも作成できるため、
一つのページ内に、PC・タブレット・モバイルのデザインを作成しつつ、
ページ毎にデザイン制作を進めていくことができます。

もちろん、前述した「シンボル」機能もページ・アートボードを超えて共有することができます。

これにより、いくつかのページをコンポーネントデザイン用のページに当てて、シンボル機能を使用し、ページごとにコンポーネントを挿入するなんてことも可能です。

sketch-workflow

7.その他地味に使えるところ

1. 画像の切り抜き・貼り付け

Sketch は画像の編集が苦手なのですが、
なんとかごまかせます。

例えば、ダブルクリック後に選択範囲を決めコピペすると、
その選択した範囲のビットマップ画像を別レイヤーとして作成してくれたりします。

2. Photoshop、Illustrator からコピペ

その他デザインソフトから、コピペでデータを受け渡しもできます。
ベクターベースのレイヤーでしたら、ほとんど誤差なしで Sketch に貼り付けることができます。


いかがでしょうか?
上記のことは、Sketch 3 の機能ほんの一部です。
10月18日の Sketch 3 勉強会 in NAGOYA では、こもりまさあき さんにもっと詳しくわかりやすく Sketch 3 の解説をしていただけますので、
是非ご来場ください!

Sketch 3 勉強会 in NAGOYA + Webデザインと開発の未来

EC-CUBE に tinyMCE と メディアアップローダー を設置!

2014-10-03 0.22.27

二回続けて EC-CUBE のメモ。


EC-CUBE で商品情報などを入力する際、
どうしても HTML を書かなければならない場合があると思います。

今回は既存サイトがすでに Futureshop で動いており、
そこから EC-CUBE へ移行するって具合の案件でした。
しかも、バリバリHTMLタグで組んでます!!!というタイプのサイトです。
LP のオンパレード。むしろ LPしかない..
予算があまりないので取り敢えず移行するだけなんですが、
画像が多いのでこれから更新する時面倒だなと。

せめて少しでも更新しやすいようにと、TinyMCE を導入することにしました。

でも、デフォルトでは画像をアップロードする機能はついてない。
一々 FTP・またはEC-CUBEの管理画面から別途画像をアップロードし、
URLをコピペして貼り付けないといけません。

いや、これは面倒くさいでしょ。

でも、TinyMCE と連動できるファイルマネージャーを探してもなんかUIがださいんです
諦めず探していたら、結構いいソフトウェアが見つかりました。

ResponsiveFilemanager

2014-10-03 0.22.27

デモ

デモを見てみるとイケてる!
日本語対応してる!
これは使える!

ってことで実装してみたのがこちら。

16095e85f21c4ba70dd8b8615cbdf61d

取り敢えず、超絶簡単に設置できました。
でもセキュリティとか大丈夫かこれ。
もうちょい様子見っすかね。

EC-CUBE と Gulp と いろいろ。

今回、久しぶりに EC-CUBE 案件を引き受けたのでメモ。


昨今のフロント界隈では、 Grunt や Gulp などのタスクランナーが当たり前のように使われていますね。
EC-CUBE でも当然その恩恵を受けることは可能です。

  • Sass のコンパイル

  • JavaScript の minify と jshint で構文チェック

  • 画像の最適化

  • ブラウザリロード

  • EC-CUBE 本体の phpunit の実行

上記 5つを自動化してみたいと思います。

0. 前提

0-1. 開発環境

  • Mac book pro retina

各ソフトウェアのバージョン

  • php : 5.4.28
  • composer : 1e4229e22aefe50582734964d027fc1bfec16b1d
  • node : v0.10.26
  • npm : 1.4.3
  • ruby : 2.0.0p353
  • Sass : 3.4.3

上記が僕が実際に作業を行った環境となります。 
composer は php 5.3 以上を動作環境としています。
node, npm のインストールと、sass を使用するために ruby と sass のインストールを前提としています。

0-2. ファイル階層

今回は EC-CUBE の開発用リポジトリデータを前提として話を進めていきます。

  • バージョン : 2_13_2

EC-CUBE 公式 リポジトリ

Github にも大河内さんが非公式ミラーを立ててくださっているので、
そちらの方が見やすいかもしれません。

2014-10-01 22.07.05

また、本記事ではこのリポジトリの一番上の階層を「プロジェクトルートディレクトリ」と呼称します。

0-3. テンプレート

デフォルトテンプレートを使用します。
自作のテンプレートを作る方はご自身の環境に合わせてください。

Smarty テンプレートは通常通りの配置でOKです。

css, 画像ファイル, .js,.scss などの静的なファイルの階層は以下のとおりです。

html/
   upload/
       save_image/
   user_data/
       packages/
          default/
              css/
              img/
              js/
                  _main.js
              scss/
                  main.scss
  • html/user_data/packages/default/scss/main.scsscss/main.min.css にコンパイル
  • html/user_data/packages/default/js/_main.jsjs/scripts.min.js に コンパイル
  • html/user_data/packages/default/img 内の画像ファイルを最適化
  • html/upload/save_image 内の画像ファイルを最適化

大体こんなことをやっていきます。

1. Node.js パッケージ のインストール

package.json

npm の設定ファイルです。
このファイルに Gulp のプラグインや依存パッケージを定義していきます。

$ npm init 

というコマンドを打つことでひな形を作成できますが、
面倒なので下記をコピペして、プロジェクトルートディレクトリに用意してください。

http://liberty-technology.biz/PublicItems/npm/package.json.html

その後、ターミナルにてプロジェクトルートディレクトリに移動し、

$ npm install 

とコマンドを打てば、packages.json に定義してあるパッケージが自動的にインストールされていきます。

2. composer によるパッケージのインストール

node の npm のような、ruby でいう gem のような php の 依存管理ツールです。
comporser 自体のインストールについては、他にもリソースがあるので参考に。

http://kore1server.com/175
Composer ドキュメント日本語訳

今回は、phpunit をインストールするために使用します。
公式リポジトリ・github からダウンロードした方はそのままの comporser.json ファイルで大丈夫です。

$ comporser install

comporser.json と同じ階層 ( プロジェクトルートディレクトリ )でコマンドをターミナルで打つと
phpunit がインストールされます。

3. .jshintrc の設置

JSHint は JavaScript の 構文チェックを行うためのツールです。
利用するためには、構文チェックの設定をこの .jshintrc というファイルに定義します。

Gulp を実行する階層に設置する必要があるので、
プロジェクトルートディレクトリに設置してください。

4. Gulp のインストールと gulpfile.js の作成

Gulp は グローバルとローカル両方にインストールする必要があります。
ローカルの Gulp は最初に npm install でインストールしましたが、
まだ グローバルインストールを行っていない方は次のコマンドをターミナルで打ってください。

$ npm install -g gulp

Gulp で行う動作を定義していきます。
こちらも .jshintrc と同じくプロジェクトルートに設置します。

この gulpfile.js では、「watch」「production」というタスクを定義しています。

  
    $ gulp watch 
  

とターミナルでコマンドを打つと、ファイルの監視が始まり、
ファイルを保存する際に sass, js のコンパイル、
サーバーのリロード、変更があった画像の最適化を自動的に行ってくれます。

  
    $ gulp production 
  

production タスクを実行すると、sassのコンパイルとjsのminify、商品画像の最適化を行ってくれます。

  
    $ gulp phpunit
  

を実行すると、EC-CUBEの本体のテストを実行してくれます。

5. /data/Smarty/templates/default/site_main.tpl に タグの追加

上記の gulp watch というタスクを走らせた時、
ターミナルで下のような通知が出ると思います。

  
[BS] Copy the following snippet into your website, just before the closing </body> tag

<script type='text/javascript'>//<![CDATA[
document.write("<script async src='//HOST:3000/browser-sync/browser-sync-client.1.5.2.js'><\/script>".replace(/HOST/g, location.hostname).replace(/PORT/g, location.port));
//]]></script>

  

下記の script タグを body タグの直前にコピペしてくださいって書いてあるので、そのまま実行します。

/data/Smarty/templates/default/site_main.tpl を開き、上記タグを貼り付けてください。

2014-10-02 23

ちゃんとできていれば、上記のように右上に 「Connected to BrowserSync」とのメッセージがでます。
これで、ファイルを保存するたびにブラウザがリロードしてくれます。
BrowserSync は liveReload よりも高機能なんで、
複数のデバイス・ブラウザで同期したりなんかもできます。


以上、少し長くなりましたがこれで。
沖縄が再来週に迫ってきました。