astamuse Lab

astamuse Labとは、アスタミューゼのエンジニアとデザイナーのブログです。アスタミューゼの事業・サービスを支えている知識と舞台裏の今を発信しています。

Blue Ocean on Jenkins

お久しぶりでございます。scalaでバックエンドを開発しているaxtstar(@axtstart)でございます。

前回はExcelにはVBAがある! の話をしましたが、今回は、、、、 やっとScalaの話…ではなく、Scalaは私よりも詳しい方にお任せして ご存じ、今年、新しくJenkinsに仲間入りしたJenkins Blue Oceanの話をしてみます。

Jenkinsあれ

弊社ではCI・CDツールとしてJenkinsを使用しています。

最近までは、GUIによる設定を行っていました。

↓よくあるこんな感じ↓

f:id:astamuse:20161219163520p:plain

最近、遅ればせながら、Jenkins PipelineとBlue Oceanを使いだしているので、その紹介と活用方法を書いてみたいと思います。

Jenkins Pipeline

jenkins.io

Jenkins Pipelineとは、かつて Workflow Pluginと呼ばれていた、Jenkins内でGroovyによって記述できるワークフロープラグインです。

このプラグインは、

  • Jenkins 2.x以上で動作
  • Code as Config
  • Groovy
  • Versatile
  • Durable

説明されています

通常のJobと異なり、Jobの定義に言語(Groovy)を使用することで、 今までGUIで設定していた部分をコードで記述することができます。 SCM内にJenkinsfileと呼ばれる設定ファイルを保存することが可能であり、レビューが(通常のJOBと比較して)容易です。 ファイルであるためコピーが可能で、GUIを用いた連携では全くできないような処理も記述できます。 *1

↓おなじみHello World

f:id:astamuse:20161220193451p:plain

node
{
  echo 'Hello World'
}

gitから取得する場合

f:id:astamuse:20161220193700p:plain

Jenkinsfileと呼ばれるファイルに処理を記述し、例えばgithubで管理できます。

例:

node {
  try { 
    //def array = ["a", "b", "c"] as String[]
    stage('prepare'){
      sh 'uname -a'
    }
    stage ('git'){
      checkout scm
    }
    stage ('build'){
      parallel 'sbt build':{
         sh 'sbt compile'
      }, 'node build':{
          sh 'npm -v'
      }
    }
    stage ('test'){
      sh 'sbt test'
    }
    stage ('staging deploy'){
      sh 'sbt publish'
    }
    stage ('test after staging deploy'){
      parallel 'chrome':{
         sh 'echo test'
      }, 'firefox':{
         sh 'echo test'
      }, 'edge':{
         sh 'echo test'
      }
    }
    stage ('puroduction deploy'){
      sh 'echo test'
    }
    stage ('test after production deploy'){
      parallel 'chrome':{
         sh 'echo test'
      }, 'firefox':{
         sh 'echo test'
      }, 'edge':{
         sh 'echo test'
      }
    }
    stage('Archive result') {
      sh 'touch dummy.xml'
      archiveArtifacts 'dummy.xml'
    }
  } catch(e){
    //slackSend (channel: '#general', color: '#FF0000', message: 'Error happened!')
    throw e
  }
}

こちらに置いておきました。

↓上記pipeline実行の様子

f:id:astamuse:20161220155148p:plain

stageと記載したブロックごとの状況と履歴が一目瞭然のビューになっています。

また、通常のJobと異なり、PipelineはJenkinsが落ちても処理を継続できるように設計されています。

担当プロジェクトではまず、Webからのトランザクションテストを別々のJOBとして、起動していたのですが、 プラグインで置き換えることで、ひとまとめの処理として閲覧できるようになりました。

Jenkinsの設定が比較的多かったプロジェクトなのでかなり効果を発揮しています。

ハマったところ

以下の2点は少しハマりました。

  • In-process Script Approval

RejectedAccessExceptionという例外が発生して落ちる。 Jenkinsの管理 -> In-process Script Approvalで許可する必要がある。

  • シリアル化エラー

NotSerializableExceptionという例外が発生して落ちる。 落ちる箇所をメソッドにして「@NonCPS」アノテーションを与える必要がある。

上記ともこちらに説明があります。

Blue Ocean

Jenkins Blue OceanはJenkinsのUIを変えるプラグインで、Jenkins Worldの資料 *2 を見ると、それまであまり変更の無かった、UX部分に手を加えることで、昨今のDevOpsChatOpsといった要請にこたえていくという方向性のようです。

デフォルトでは導入されていないので、Jenkinsの管理->プラグインの管理->利用可能 に行き、フィルターで「Blue Ocean」と入力してBlue Ocean betaをインストールすれば、 必要なプラグインを合わせてインストールしてくれます。

f:id:astamuse:20161220203856p:plain

インストールが成功すると、下記のようにBlue Ocean UXへのリンクができますので、それをクリックすれば、Blue OceanのUXに行けます。 元々のViewも無くなるわけではありません。

f:id:astamuse:20161220204128p:plain

Pipeline Pluginの結果をBlue OceanのViewで見ると、昨今のCIツールであるTravis CIなどが提供している画面に似た画面が表示されます。

f:id:astamuse:20161220172033p:plain

f:id:astamuse:20161220185603p:plain

このよう感じで今風の画面が出てきて、個々のビルド結果とその詳細が見れます。

f:id:astamuse:20161220171820p:plain

f:id:astamuse:20161220205321p:plain

stage内でパラレルで実行した処理に関しては、デフォルトのViewではわからないのですが、

Blue Oceanの場合はそういった部分もパラレルである様に表示されています。

また該当部分のエラーにも素早く移動することができます。

さていかがだったでしょうか?

最後に

今年最後の投稿になってしまいました。

寒い時節が続きますが、皆様もお体にお気をつけてよいお年をお迎えください。

Have a good new year!

*1:まだまだ発展途上で全プラグインがPipeline上で動くとかそういうレベルではないようです。

*2:Jenkins WorldでのBlue Oceanのプレゼンビデオyoutube

Play Framework 2.5で入力チェックしてみる

https://www.playframework.com/assets/images/logos/play_full_color.png

アスタミューゼ 開発部のYanagitaです。

Play Frameworkの記事も3回目になります。
連載的な形で続けているので過去分のリンクを貼っておきます。
Play Frameworkが初めての人や前回の見直しはそちらへ

lab.astamuse.co.jp

lab.astamuse.co.jp

今回は前回予告していた入力チェックについて書きます。

事前準備

今回も前回の延長で説明を行います。
事前準備がまだの方はこちらを参照にして下さい。

それから少しそれますが、Play Frameworkはリリースの周期が早く最新版はv2.5.10(2016/12/08時点)となっています。
なるべく最新のバージョンに合わせて記載したいので、v2.5.10から始める方向けにテンプレートプロジェクトの作成と本記事のための修正を記載しておきます。

※ 今回はGiter8を使用してテンプレートプロジェクトを作成します。

1. 作業環境にsbt(v0.13.13以降)をインストールします。

2. ターミナルで以下のコマンドを実行します。

sbt new playframework/play-scala-seed.g8

この後、プロジェクトの名前(本記事では「sample-app」)、組織名などを聞かれますが、デフォルトのままでも問題ありません。
ここからは本記事のための修正です。

3. Filtersライブラリのコメントアウト
sample-app/sample-app.sbt

libraryDependencies += filters ← 10行目あたり
↓
// libraryDependencies += filters

4. Filtersクラス(sample-app/app/Filters.scala)の削除

削除したのはCSRF(クロスサイトリクエストフォージェリ)対策のフィルターになります。
過去の記事で使用していないため今回無効化しました。

でわでわ、本題の入力チェックに入っていきます。

入力チェック

これまでの記事を試された方は既にお気づきかもしれませんが、 前回説明したマッピングクラスには既に入力チェック機能が含まれています。
今回はこのマッピングクラスの入力チェックをコントロールして、目的に合った入力チェックの実装方法を説明します。
まずは前回作成したフォームに下記の入力チェックをかけてみます。

  • 名前(name) ・・・ 入力必須、かつ、入力文字数を2文字以上
  • 性別(sex) ・・・入力必須のみ
  • 誕生日(birthday) ・・・ 未入力を許容する
  • 身長(height) ・・・ 入力必須、かつ、100以上
  • 血液型(bloodType) ・・・ 入力必須のみ

ソースコードだと以下の通り修正
/sample-app/app/controllers/SampleController.scala

// 入力チェック適用前
val form = Form(
   mapping(
      "name" -> text,
      "sex" -> text,
      "birthday" -> date,
      "height" -> number,
      "bloodType" -> text
   )(RequestForm.apply)(RequestForm.unapply)
  )

// 入力チェック適用後
val form = Form(
   mapping(
      "name" -> nonEmptyText(minLength = 2), // 入力必須、かつ、入力文字数を2文字以上
      "sex" -> nonEmptyText,                               // 入力必須のみ
      "birthday" -> optional(date),                        // 未入力を許容する
      "height" -> number(min = 100),                   // 入力必須、かつ、100以上
      "bloodType" -> nonEmptyText                    //  入力必須のみ
    )(RequestForm.apply)(RequestForm.unapply)

textクラス以外のマッピングはデフォルト入力必須のチェックが入ります。
textクラスは未入力/空文字を許容してしまうため、入力必須にする場合はnonEmptyTextクラスを使用します。(name, sex, bloodTypeの設定を参照)
逆に未入力を許容する場合は、optionalクラスを使って未入力を許容します。(birthdayを参照)
ここでoptionalを使用した場合、マッピング先の変数をOption型に変更が必要となります。

/sample-app/app/forms/RequestForm.scala

// 変更前
case class RequestForm(
                        name: String, // 名前
                        sex: String, // 性別
                        birthday: Date, // 誕生日
                        height: Int, // 身長
                        bloodType: String // 血液型
                      )

// 変更後
case class RequestForm(
                        name: String, // 名前
                        sex: String, // 性別
                        birthday: Option[Date], // 誕生日 ← Date型からOption[Date]型に変更
                        height: Int, // 身長
                        bloodType: String // 血液型
                      )

入力文字数や入力値の条件については各マッピングの引数に宣言します。 例えば、入力文字数を2文字以上とする場合は、引数に「minLength=2」を設定します。(nameを参照)
逆に文字数の上限を設定する場合は、引数に「maxLength = 上限値」を設定します。
入力値の制限についても変数名が変わるだけで設定方法は同じです。

上記の入力チェックであればマッピングの入力チェック機能で実現できます。

ここまで実装できたらエラーメッセージの表示実装に移るケースが多いと思いますが、
今回フォームの表示に使用しているForm template helpersは、エラーメッセージの表示機能も含まれているためテンプレートの修正は不要となります。
が、そのままではエラーメッセージの見分けがつかないので(黒文字表示となるため)input.htmlテンプレートにStyleを追加して、 エラーメッセージを赤色にして目立たせます。

/sample-app/app/views/sample/input.scala.html

    <!-- titleタグの下に追加 -->
    <style>
        dd.error { color: red; }
    </style>

では、早速動作を確認してみましょう。

初期表示
f:id:astamuse:20161209114417p:plain

入力エラー後
f:id:astamuse:20161209114416p:plain

エラーメッセージが確認できましたね。
基本的なチェックであればマッピングクラスの機能で十分ですが、実際開発をしてみるとそれだけでは足りないケースがあります。
例えば、メールアドレスや郵便番号など入力フォーマットが決まっている場合の入力チェックです。 この場合は、マッピングクラスのverifyingメソッドを使用します。 今回は名前の入力チェックに英字のみを許容するよう変更します。

/sample-app/app/controllers/SampleController.scala

// 名前(name)に英字のみチェックの適用前
val form = Form(
   mapping(
      "name" -> nonEmptyText(minLength = 2),
      "sex" -> nonEmptyText,
      "birthday" -> optional(date),
      "height" -> number(min = 100),
      "bloodType" -> nonEmptyText
    )(RequestForm.apply)(RequestForm.unapply)

// 名前(name)に英字のみチェックの適用後
val form = Form(
   mapping(
      "name" -> nonEmptyText(minLength = 2).verifying("Alphabet only", name => "^[a-zA-Z]+$".matches(name)), // ← 入力条件に一致する場合のみTRUEを返す
      "sex" -> nonEmptyText,
      "birthday" -> optional(date),
      "height" -> number(min = 100),
      "bloodType" -> nonEmptyText
    )(RequestForm.apply)(RequestForm.unapply)

では、もう一度動作確認
入力内容
f:id:astamuse:20161209121204p:plain

入力エラー後
f:id:astamuse:20161209121202p:plain

名前に数字が含まれているので入力エラーになりましたね。

という風に、基本的なところはマッピングクラスの入力チェック機能を使用し、特殊なチェックはverifyingメソッドを使用することで多少複雑なチェックもカバーできます。

が、しかし
たまに2つの項目を同時にチェックする相関チェックとよばれる入力チェックも存在します。
これについては次回説明します。 今日はここまで

エンジニア&デザイナーの皆様へ

アスタミューゼではまだまだエンジニア&デザイナーを募集中しています。
すこしでも気になった方は下のバナーから採用情報をご確認下さい!

でわでわ

何がベスト?最新のデザインフローとツール比較

f:id:astamuse:20161206153715p:plain

アスタミューゼデザイン部のMatsumotoです。
今回の投稿は、デザイン部の勉強会で話した内容を、ブログ用にアップデート+加筆した内容になります。 ちなみに弊社開発部とデザイン部では、持ち回りで勉強会を開催しています。(開発部毎週、デザイン部隔週開催。どちらの勉強会にも自由に参加できます。)

テーマは「デザインツール」。
ちょうど9月にAdobe MAX JAPANが開催されたこともあって、XDについて取り上げました。

 目次

Adobe MAX JAPANで学ぶ

Adobe MAX JAPANとは、Adobeのクリエーター向けのカンファレンスで、毎年アメリカで開催されている「MAX」の日本版です。 今年は、本場アメリカでの開催(11月)に先立って、日本では9月に開催されました。アメリカに比べて規模は縮小されますが、7年ぶりの日本開催ということで、かなり盛り上がっていたようです。

ただ、7年前のMAXというのは、デベロッパーのためのカンファレンスという位置付けで、開発関連ツールの発表が主でしたので、そこまでデザイナーやクリエーターのみなさんの注目は浴びていなかった気がします。 7年前のMAX JAPANを知っている方からすると、今回のMAX JAPANはまったく別物に感じたのでは!?

f:id:astamuse:20161129124931p:plain

すごく行きたかったのですが、会社の創立記念祭と同日だったため、残念ながら行けませんでした。 ちなみに弊社の創立日は、2005年9月2日。毎年創立祝いのイベントが行われます!

来年は、日にち被らないといいな・・そして、いつか(来年?)は、アメリカで開催のMAXに行きたい。意外と良心的なツアー価格?30万位(往復航空券+宿泊費+3日間のカンファレンスパス10万位+アドビ本社訪問含む)

では、MAX JAPANの講演内容から、デザイナーの日々の仕事に役立ちそうな内容を、ピックアップして紹介していきます。

Adobe MAX JAPAN講演ビデオアーカイブ 

当日の講演を視聴することができます。(XDに関する講演は下記)

  • 「Creative Cloudワークフロー 手戻りの激減+制作効率の向上」
  • 「アドビ初のUI/UXデザインツール、Adobe XDの使い方とロードマップ」
  • 「プロトタイプで舵を取れ!Adobe XDを使った最強のUI/UXデザイン手法」

f:id:astamuse:20161129150145p:plain

XD猛プッシュな内容です。
そんなわけで、私もこちらの講演に触発されて、XDを使い始めました。

直近の制作環境&ツール導入経緯
* ~7月 - Windowsのみ / Adobeツールのみ
* 8月 - Windows + Mac導入 / Sketch導入 / プロトタイピングツール導入
* 9月 - Windows + Mac / XD試験的導入

半年ほど前から、astamuseのスマホ対応が始まったのに合わせて、会社で使われていなかったMacを使い始めました。(自分の入社時は、MacかWinの選択はできませんでしたが、現在は入社前に自由に選べます!)プロトタイピングツールについては、前回ブログに書きましたので興味がある方はどうぞ。

lab.astamuse.co.jp

Adobeが勧める最新のワークフローとXD

Adobe MAX JAPANの講演の中では、繰り返し「Creative Cloudワークフロー」という言葉がキーワードで使われていました。 制作のすべてを、クラウド上のアドビ製品を使ってシームレスに行うことで、手戻りの激減+制作効率が向上するとという話をされていました。

ポイントとしては、 最新のCreative Cloud、特にCCライブラリーやAdobe Stock(写真ストックサービス)を使っている人は、それ以外のデザイナーより10倍効率向上とのこと。

f:id:astamuse:20161129125408p:plain

Creative Cloud ラーニングとサポート

CCライブラリーというのは、各プロジェクトでデザインの一貫性を保つために共有のカラースキームやフォント、画像、UIパーツを格納しておけるクラウド上のフォルダのようなものです。

CCライブラリー内の写真からカンプを作って、クライアントに見せ、その後必要であれば、その写真やイラストをアプリ内でそのまま購入できる。とっても便利そう。

Adobe Stock(写真ストックサービス)とは、去年アドビが「Fotolia」を買収して始めたサービスです。ある時気づいたら、ふと始まっていてアドビだから高いんだろうなと思って調べてもいませんでしたが・・・月額利用は、Creative Cloud 4,980円/月 とは別に、年間契約でさらに月額写真10点3,480円からという値段設定になっています。

ちなみに弊社でよく使っている写真ストックサービスの値段と比べてみると、そこまで高くない価格設定なので導入してもいいかも。(ちなみに弊社では、Adobe Stockをすでに導入しているプロジェクトチームもあります。)

次に、実際の講演の中で、カンプ作成から印刷・WEB制作までのワークフローを実演披露していましたので、その流れを下記で簡単に紹介していきます。

1:Adobe Comp使ってカンプをつくる

f:id:astamuse:20161130173848p:plain

Adobe Compとは、タブレット上でデザインカンプが作れる、タブレット用のアプリ。
なんか使いづらそうと思ったのですが、はじめからタブレット向けとして本格的に開発されたということで、かなり感覚的に操作がおこなえそう。

PCに向かう必要がないので、MTGや電車の中でのちょっとした場面でパッと作業ができるところもポイントです。

ダミー画像などは、Adobe stockから選んでラフカンプをサクサクと作っていました。 この時点で、写真を使って具体的に作成して共有できるので、クライアントも含め、理解度が高く、手戻りが少ないという話をされていました。

2:Adobe Illustrator にて印刷データを作成

カンプ作成後は、チラシの作成にうつります。 見た目を整えるために、CCライブラリーに事前においてある共有デザインスタイルを使って、カラーやロゴデータなどをカンプに反映。共有のデザインスタイルを使用しているので、すでにこの時点で最終のイメージに近いカンプができていました。

3:Adobe Photoshopで写真データを購入&加工

Adobe stockの写真は、IllustratorやPhotoshopのアプリ内で写真が購入できて、購入前に加工したフィルタ等も同時に反映されます。このフローも制作効率が向上するポイント。

4:Adobe Photoshopでフォントを検索

今まで知らなかった新機能がこちらでは紹介されていました。 今年6月のアップデートで追加されたPhotoshopの画像からフォントを検索できるという新機能「マッチフォント」。

f:id:astamuse:20161130174906p:plain

”ふと目にしたポスターや雑誌、パッケージなどのタイポグラフィからインスピレーションを受けて、こんな感じのフォントを使ってみたい、と思うことはありませんか。そんな時は「マッチフォント」が便利です。Photoshopが画像内の文字から似た欧文フォントを探してくれます。お使いのPCにフォントがあまり入っていなかったとしても大丈夫。数多くのフォントを提供するTypekitからも似ているフォントを検索して、すぐに利用することができるのです。- Adobe 公式サイトより”

このシチュエーションよくある!これは便利!

5:Illustratorで書き出し

Webデザインでは、ほとんどIllustratorは使っていなかったのですが、知らぬまに便利な機能がたくさん増えていました。 オブジェクトをドラッグ&ドロップで簡単に書き出せます。Web・アプリデザイン用アセットの書き出し機能(今年6月にアップデートされた機能) Webデザイン対応への期待が高まるIllustratorは、今後のアップデートも要チェックかなと思いました。

6:XDにてプロトタイプ作成

ここでようやくXDの登場。画面遷移+動きを作っていきます。 ワイヤーフレーム作成もできちゃいます。パワポより断然見やすいのでいいかも。(※他のプロトタイピングツールでもカンプ作成できるものもあります。)

8:XDにて写真・テキストも簡単に自動配置

テキストファイルをデザインに直接ドラッグ&ドロップする読み込み機能自動でマスク処理される画像の配置機能、繰り返しアイテムを簡単デザインできるRepeat Gridなど他のアプリにはないとっても便利な機能満載。面倒な作業が自動化されて、今まで以上に作業時間が短縮されそうです。 やっぱりAdobeは最強かも。 この後は、DreamWeaverにて実装の説明でしたが、ここでは割愛します。

XDを他ツールと比較

使う前は、Sketch のようなUIをデザインするソフトかと思っていましたが、XDは、UIデザイン機能とプロトタイピングツールが合体したソフト。タブ切り替えで、デザインとプロトタイプが一瞬で切り替わり、作業できます。UIデザインとプロトタイピングが一つのアプリ内でできるのが最大の特長かと。

とういう事で、UIデザイン機能単体で比べるなら・・・ XD vs sketch?
プロトタイピング機能単体で比べるなら・・・ XD vs プロトタイピングツール? (※現在はかなりたくさんのプロトタイピングツールがありますが、ここでの比較は私が実際使ったことのあるツールで比較しておりますので、ご了承ください)

XD vs Sketch

f:id:astamuse:20161206113909p:plain

XD利点

前項でも触れましたが、Sketchにはない面倒くさい作業を自動化してくれる機能が満載。

  • テキストファイルをデザインに直接ドラッグ&ドロップする読み込み機能
  • 自動でマスク処理される画像の配置機能
  • リピートグリッド機能(同じパーツを繰り返し自動的に生成してくれる機能)

XD難点

  • XDに一番期待していたのは、Photoshop/Illustratorの連携。同じAdobe製品なのに互換性がないのは残念すぎる。Sketchを使ってても一番欲しいと思った機能
  • psdやaiファイルで保存できない (psd/aiで書き出してブラッシュアップしたい。この連携機能は早々に追加してほしい)
  • 単独でデザインを完成させるのは難しい(Photoshop/Illustratorありきでデザインする設計)
  • パス・シェイプの編集が困難(Illustratorまかせ?)

9月の勉強会の時点では、まだまだSketch>XDでしたが、11月のアップデートで同等レベルまでXDが追い付いてきました。弊社でも実作業で、XDを導入する可能性は近いかもしれません。(あとはWindowsバージョンを待つのみ?)

XD vs プロトタイピングツール

f:id:astamuse:20161206113925p:plain

XD利点

  • プレビュー時に画面操作を録画できる

XD難点

  • シェアされたプロトタイプにコメントを書き込むには、AdobeIDへログインが必要(フィードバック機能)
  • プロトタイプを修正する度に、共有リンクを作り直す必要がある
  • ヘッダー&フッターの固定設定ができない
  • 画面の操作性がいまいち

プロトタイピングについては、いま使っているツール(Prott/Marvel/Invision)の方に軍配が上がるかなという印象です。

今後のXDアップデート予定

今年3月にプレビュー版がリリースされてから、毎月アップデートされてきたXDですが、先月ついに、ベータ版がリリースされました。 ユーザーのリクエストを元に機能追加を検討しているため、ユーザーのフィードバックが反映されやすく、色々あったらいいのにと思っていた機能が11月のアップデートですべて実装されていました。

さすがAdobe。今後のアップデートにも期待できます。ただ、色々機能つけすぎて重くならないでほしいなと・・。

そして、来たる12月のアップデートで注目すべきは、Windows版の対応でしょうか!
Adobeとのお付き合いは、なんとなんと今年で、18年目ですが、こんなにもAdobeのアップデートを心待ちにしているのはいつ振りだろう・・。楽しみ!

世の中のデザイナーたちの状況

今後の動きで気になっているのは、実際にどのくらいの企業でXDを導入していくのか?ということです。まだベータ版なので導入している企業は少数だと思いますが、みなさん、今使っているSketch、プロトタイピングツールをXDに切り替えていくのか気になるところです。

ちなみに、現在Wantedly内で掲載しているデザイナーの求人募集要項をチェックしてみました。「XD」で検索をかけてみると、12月現在時点:3件。一方、「Sketch」は、151件も!

XDが正式リリースした後は、どうなっていくんだろう・・・。 今後は、XDがデザイナーの必須ツールとなりえるのか、しばらくウォッチしつづけないとと思っています。

まとめ

で、何が最適なツールなのか?
先月のXDマンスリーアップデートによって、最終的には、Sketch+プロトタイピングツールから、XDに乗り換えていく可能性がだいぶ高まってきました。 他Adobe製品との互換性次第ではありますが、やっぱりまたAdobeに戻っていくのかな。

ただ、Sketchや他のプロトタイピングツールも素晴らしく便利なツールで、ようやく使い慣れて快適になってきたのでしばらくは使い続けたい。こちらのさらなるバージョンアップにも、期待したいなと思います。しばらくウォッチしながら、自分のベストな方法を模索していこうと思います。

参考サイト

Copyright © astamuse company, ltd. all rights reserved.