(Google+)5この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。はじめに前回のこれからはじめるGulp(18):SketchToolで何ができるのかコマンドと主要なオプションを使ってみるでSketchToolの各コマンドとオプションを試して、Gulp.jsと連携するための下調べをしました。今回はgulp-sketchプラグインを使ったGulp.jsとSketchToolとの連携に加え、SketchToolで書き出す画像をページ毎に別々のフォルダに整理できるようにいくつかの方法を試してみたいと思います。gulp-sketchプラグインを使ってみるまずはgulp-sketchプラグインについてできること・できないことを確認しながらスライスの書き出しとgulp-imageminプラグインを使った画像の軽量化を行うタスクを作ってみます。gulp-sketchはSketchToolをGulp.jsで使うためのプラグインです。一部のオプションには対応していませんが、SketchToolからエクスポートされる画像をStreamにのせることができます。パイプラインでそのままgulp-imagemin等の圧縮処理が行えgulp.dest()で出力先を指定できます。対応しているSketchToolオプションgulp-sketchが対応しているSketchToolオプションは以下の通りです。SketchToolのオプションはこちらを参考にしてください。formatsscalesitemsboundssave-for-webcompacttrimmedgulp-sketchプラグインのインストールgulp-sketchプラグインをインストールします。readable-stream@1.0.33)サンプルデザインファイル以下のようなサンプルを用意しました。前回説明したとおり、SketchToolからエクスポートした画像のファイル名はレイヤー名そのままで出力されます。sketchタスクを作るgulp-sketchプラグインのインストールが完了したらGulpタスクを作ります。gulp-sketchとgulp-imageminの他にStream上で処理されているファイルを把握するためにgulp-filelogというプラグインを使います。);sketchタスクを試すsketchタスクを試してみましょう。μs8つのスライスが書き出され、gulp-imageminで46.3%軽量化されました。単純なデザインファイルであればgulp-sketchは使い勝手が良さそうです。ページ毎に書き出し先のディレクトリを分けたいページやアートボード毎に出力先ディレクトリを分けたいと思いますよね。SketchToolにその機能はなくコードで制御できません。代わりにSketch側でレイヤー名を/で区切ることによりサブディレクトリへの書き出しが可能になります。この仕様はSketchTool側も対応しています。下記のようにスライス対象のレイヤー名をhome/mb/buttonのようにすることでページ/アートボード/画像のようなディレクトリ構造を持たせた画像の書き出しが行えます。このようにレイヤー名にディレクトリ構造を定義してエクスポートすると下記のようにサブディレクトリ作られ画像のファイルも末端の名前だけが付きます。button_1x.pngとても便利な機能でエクスポート後の画像管理が一気に楽になります。残念なことにgulp-sketchではこのサブディレクトリへの書き出しに対応していないためfsモジュールでエラーが起こり利用できません。(node.js:419:13)これは仕方ないこととも思えます。いうのも本来出力先の制御はGulp.js側で行うべきだからです。gulp-sketchを使う場合はGulp.jsの利点を活かし画像の名前をもとにファイルを整理するのも良いかもしれません。方法1:ファイル名で振り分ける例えば以下のようにプレフィックスを基準にページ・アートボード毎にディレクトリを定義しファイルをコピーするタスクを用意します。}});こうすることで画像のファイル名にプレフィックスは残ってしまいますがgulp-sketchを使っていてもページ・アートボードでディレクトリを分けることができます。home_tablet_button_1x.png方法2:–outputJSONオプションを活用して振り分ける--outputJSONオプションを使って出力したjsonファイルはページとスライスの情報を含んでいます。このjsonファイルにはアートボードの情報がないのでjsonの情報だけをベースに振り分けられるのはページ単位のみです。jsonを使うメリットは振り分けるためのページ名をjsonから取得できるので大量のページを持ったSketchファイルなどの場合に都度ページ名を変更せずに済みます。}}エクスポートとコピータスクタスクにはSketchToolとgulp-execプラグインを使ったエクスポート用タスクとjsonを元にディレクトリを分けるコピータスクを作ります。jsonファイルはfsモジュールを使ってコピータスクに読み込みます。}});実際にタスクを実行するとこのように処理されcopyタスクでStreamを使った処理が行えます。files.--outputJSONで書き出すjsonはjekyll等のテンプレートエンジンで活用することで、デザインデータを編集してGulpタスクを実行するだけ静的なサイトを更新したりできそうですね。方法3:Sketchのレイヤー名で振り分ける最終的にこの方法が一番無駄がなくファイル名もシンプルです。デザインデータのスライス名をhome/mb/buttonのように書き換えます。ちなみにサブディレクトリに書き出せるのはスライスだけではなくアートボードでも可能です。slices.jsonこれで望ましいかたちで画像を書き出すことができました。あとは圧縮用のタスク等を用意してあげればデザインデータからのスライス書き出しを自動化できます。欲を言うとSketchToolのexportコマンドでページ・アートボードを制限するオプションがあると便利ですね。あとはgulp-sketchもレイヤー名のサブディレクトリ指定を上手く扱ってくれればなぁといったところですね。以上、SketchToolを使ったスライスの書き出しとディレクトリの振り分けでした。3デザインデータの画像書き出しの転載です。1,574,543クラスメソッドのWebサイト全般の運用・制作を担当しています。リモート】クラスメソッドの会社説明会を開催しますクラスメソッドでは、AWS・AI・ビッグデータ・モバイルなどの技術職や営業のメンバーとして一緒にお仕事をする仲間を大募集しています。#cmdevio新型コロナウイルスの感染拡大を受け、本イベントを延期させていただくことになりました(開催時期未定)。お申し込みいただいた皆様には大変申し訳ございませんが、何卒ご理解いただけますようよろしくお願いいたします。AWSについてライトに色んな情報交換をしましょう。CAFEの他、NTTデータとセブンイレブンの取り組みや、サインポスト、Zippinなどの各社と流通・小売業との連携を業界マップに作成してみました。濱田孝治70re:Invnetの動画検索でもめちゃくちゃ便利ですが、その他ブログやホワイトペーパーやGitHubも横断検索できるので、是非一度使ってみてください。PolicyのConditionにaws:CalledViaというキーが追加されました。いったキーなのかご説明します。夏目祐樹403こんにちは、CX事業本部の夏目です。MacのタッチバーのタッチIDが非常に便利なのですが、Terminalでsudoを叩かないと行けないときに使えたらなぁと思ったので、情報を共有します。臼田佳祐295ワークフロー自動化OSSのn8nをAWS環境で建てて検証してみました。非常に期待できるサービスです。Fargateの勉強をしています。使ってみたい方は参考にしてください。洋介256SnowflakeがAWSの東京リージョン上で稼働するようになりました。データを日本に置けます。芳賀健233こんにちは!猫様の忠実なるしもべ、芳賀健です。Tokyoで開催されました。クラスメソッド株式会社が運営するAWS・iOS・HTML5に関する技術情報サイトです。