XDのプラグインを制作しました。(言いたいだけ)になったのですが、実は内容としてはとてもかんたんなものです。Illustratorなどではデフォルトである機能です。Voiceにも挙がっており、前々よりVoteしていますがなかなか実装されていませんでした。XDでも同様にプラグインで実現しようと思ったのがはじまりです。実現までの道のりをトレースしてみるさて、まず方法は以下のように考えていました。オブジェクトが選択されているいない場合はアラートを出す選択されているオブジェクトの線の色と塗りの色を変数として持つオブジェクトの線と塗りの色をあらたに代入する雛形をつくってコンソールログで中身を見てみるまずはプラグインの基本設定をして、オブジェクトがの値の持ち方を知るために中身を見てみたところからです。今回はmanifest.jsonについては、はじめにコードだけ載せてあとは深く書きませんので、ご興味のある方は次の記事を参考にどうぞ。Borderを動かすと、選択されているアイテムの情報が見れます。以下に返ってくる内容の例をあげます。1’で、持っている各値が中に書かれています。今回のプラグインでは、strokeとfillを利用するわけですね。ちなみに、中に入っている値は、rgbaの16進数表記のようですね。module.exportsの記述を省略します。border;}これで、選択されたオブジェクトの線の塗とを入れ替えられます。アートボードを選択時にプラグインを動かすとコンソールにエラーが出るという点を認識しました。複数オブジェクトはクリティカルですね。グループやRGは中のオブジェクトを選択すれば動作する点から後から対応と判断。エラー処理は、選択されているitemsの種類で処理しないとかとも考えましたが、選択されているitemsがFillかStrokeのどちらかで値を持っていなかったら何もしなければよいと考えるとかなりラクに処理できそうです。if文は、borderとfillの値が両方あるならの処理。オブジェクト選択していないときに何もおきないのなんとかして。みんな知ってそうな機能だし、むしろアラート出すのが迷惑かなと思って省いてたけど、プラグイン開発のガイドライン上やっぱり必要らしい。ここで、dialogs.jsをrequireする決意。}};選択されたオブジェクトがない場合の処理のreturnを早めにしたかったので、そういう処理。煽ってくるのでぜひご覧あれ。プラグインの説明、短すぎはい。moment”しか最初書いていなかったので、情報追加しました。リリースにこぎつけました。制作までの時間的なものを振り返る会社のメンバーともくもく会をやった1時間でリジェクト前までのJavaScript側の処理は書けて、提出用の処理などでプラス1時間ちょっととかです。後者ははじめてだったので、なれてくれば時間は減るでしょう。その後リジェクトの連絡来て都度対応したのがトータル1時間くらいですかね。東京市ヶ谷で12/13に開催されます。道場でのライブ配信、アーカイブ配信も予定しています。2018の2日目です。XDは2018年を通して進化を続け、1年前まではまったく想像もしなかったほど使い勝手がよくなりました。その中ですこし物議を醸していそうな気がしなくもないような機能が10月のアップデートでやってきました。自動アニメーションです。#AdobeXDさて、アニメーションの実装は、デザイナーとエンジニア感でのエアポケットになりがちな部分です。そのため、この記事ではCSSアニメーションの入門としての内容を書いています。XDにおけるアニメーションのEasingTrigerがタップな状態で、ActionをAuto-Animate(自動アニメーション)に設定すると以下のようなオプションが選べるようになります。Destination(移動先)Easing(イージング)DurationDestinationについては、遷移先のことで遷移先アートボードのレイヤー情報と遷移元のアートボードのレイヤー情報をベースに自動アニメーションします。残る2つの、EasingとDurationによってアニメーションの動きが変わります。Durationはアニメーション開始から終了までの時間のことで、0.2秒〜1.0秒の値を0.2秒刻みで選択できます。XDのEasingが取りうる値は以下のようなものです。UpBounce動画で見るEasing毎の違い言葉では説明が難しいものですので、すべての動きを動画であげました。行きは1秒、帰りは0.6秒で実行させています。XDのEasingオプションでどのような動きになるかを見てきたので、次からはCSSのお話をします。Transitionというもので、プロパティの変更を一定時間をかけて単純な動きのアニメーションを実装することができます。delay;という形で記載します。このショートハンドの形を分解すると、下のように4つになります。挙動上の違いはありません。1234transition-propertytransition-delaytransition-timing-functiontransition-durationtransition-propertyは何をトランジションさせるかの選択をして、transition-durationはトリガーとなったアクションからどれだけ遅らせるかを記述します。XD上のDurationと同じで何秒かけてTransitionするかです。ミリ秒単位ならmsを、秒単位ならsをつければよいです。XD上で選択しうるものに対応しています。CSS側ではこの選択肢に限ることなく、実質的に無限の選択が可能です。指定すれば一日をかけてのアニメーションができるわけです。CodePen.ふわっと今回のポイントになるところを書いておきます。PostCSSでネストさせる書き方をしています。Transitionの対応表これらの値を先に説明したXDの取りうる値と対応させると以下の通りです。XD上での正確な動きが数値ベースで把握できていないため、あくまでも名前の対応上で細かくは違う動きである可能性もあります。cubic-bezier(n,n,n,n);という値を設定することで、トランジションをカーブで設定できます。Upの動きっぽいことが書けます。詳細には踏み込みませんが、cubic-bezier.comが便利なので、参考にどうぞ。XDで設定されたアニメーションをコード化するのかんたん?さて、見てきた限りではすくなくとも、transition-timing-functionで定義されているease-in-outなどは非常にかんたんに実装できそうですね。この記事で埋め込んだコードは解説用に用意したものなので実は転用しようとするとすこし問題があります。margin-leftを絶対値であるpxで指定していることです。今回は親要素にiPhone8サイズdivを用意し、どんなウインドウサイズでも375pxの中で動くという状態にしましたが、親要素が可変であると対応しきれません。相対値である%で指定すればよい、といったお話でもありません。オブジェクトである丸のサイズが絶対値であることの影響を受けてしまいますので、右側の余白が必ずしも一定にはなりません。アニメーションを付けること自体はかんたんですが、クロスプラットフォームのブラウザ間における振る舞いの把握が大変なのです。そのため、あるアートボードサイズのみならず複数のサイズでどうアニメーションされるのかを考えておきましょう。たいへんな要因はあるのですが、今回は入門っぽい位置付けなのでこれ以上は深く書きません。CSSで済ませずにJavaScriptを使うことになります。有名なライブラリでは、TweenMaxがありますし、XDで制作したオブジェクトをSVGとして書き出せば、svg.jsでの操作もできます。svgでも線のみを扱う場合、Vivus.jsはとてもカンタンに使えて便利です。iOSアプリではアニメーションどうなの?1animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:っていういわゆるスプリングが、Bounceっぽい動きをするはず。(よく知らない)参考記事載せておくので、気が向いたらgifだけでも見てください。1)アプリでの利用を高めようとすると、どちらかというとTriggerの選択肢がすくないことがキツいですかね。私はWebの人で、アプリの世界もPWAで攻めていきたいのでそこまでクリティカルには感じていませんが、iOS専門という人にはまだ物足りないんでしょう。XDのアニメーションを使い倒したい!今回は非常にカンタンな例を見てきましたが、もっと使いこなして使い倒したい!という方もいるでしょう。そんな人には必見な投稿は12/21に予定されています。さんが『プロトタイプのアニメーションを使い倒す』というタイトルで書いてくれます。それまでもとても役に立つ記事がたくさん出るので、ぜひアドベントカレンダーのチェックをおすすめします。デザインツールSketchがv.50になりましたね。Studioといった他ツールにインポートできなくなってしまい困っている人もいるのではないでしょうか?ということで、v49に落とす方法を書きました。手順ターミナルを開きましょう。以下のコマンドでbrewを入れます。brew-caskは勝手についてくるはず。https://raw.githubusercontent.com/Homebrew/install/master/install)"以下のコマンドで既存のsketchをアンインストールします。caskコマンドでv49系のSketchを指定してインストールする。https://raw.githubusercontent.com/caskroom/homebrew-cask/c3ee11b90fe3546e26b01d449b5876ec1a850627/Casks/sketch.rbちなみに、reinstallを使っているのはすでにbrew-caskでインストールしたことある人でも、したことない人でも両方いけるからです。Sketchを起動しましょう。v49.3が入っているはずです。ふつうにサイトから落とせるよ。直近1ヶ月以内のバージョンはすべて公開されているそうです。https://www.sketchapp.com/updates/1ヶ月以上経ってからまだインポートの問題が解消されてなかったらこの記事は役に立つんや......。Magazineに掲載されたAdobeのスポンサー記事を許可を得て掲載しているものです。Secretsすべての都市にはまだ知られていないスポットがあります。日の入りを見るのに最高のところ、エスプレッソがとてもおいしい隠れ家的コーヒー屋さん、ガイドブックでは見つけられないようなすばらしい建築などなどです。いったすばらしいに偶然ひょっこり出会ったりします。現地の人以上にこういったことに詳しい人なんていませんよね?そう、あなたの視点で、あなたの都市をクリエイティブな人たちに知らせる機会です。同時に、あなたのデザインスキルを試す機会でもあります。コンテスト』をAdobeのメンバーが立ち上げました。XDを使って、アプリのプロトタイプをデザインして、都市体験の手助けをしましょうというものです。あなたのクリエイティビティが刺激される場所、長ーい仕事で疲れた後にリラックスする場所、あなたの心がきらめく場所を、みんなに紹介しましょう。チャレンジする方法ですが、たったひとつの条件があるだけです。Adobeが最近リリースした3つのすばらしいアイコンKitからすくなくとも5つのアイコンを選んで使用するだけです。Destructといった面々にデザインされたアイコンです。これらはあなたのプロトタイプに入れるだけで、特別なものとなるでしょう。締切は日本時間で3月16日、7:59です。Chaize氏で勝者を選びます。Maxへすべての費用込で招待いたします。CloudとAdobeストック100枚分のチケットをお渡しします。CloudとAdobeストック50枚分のチケットをお渡しします。参加の流れやりたくなりましたか?参加フローのすべてをお教えしましょう。XDをインストールしましょうアイコンkitを落としましょうモバイルアプリのプロトタイプをすくなくとも5つのアイコンを使って作りましょう。あなたの都市のあなたのお気に入りの場所を伝えましょう。公開されている資料も参考になります。下で説明しています)プロトタイプをBehanceで公開、#IconContestXDを付けましょう。利用したAdobeツールをタグ付けします。Twitterで#IconContestXDと付けて共有しましょう。締切は日本時間で3月16日、7:59です。pageを見てください。PDFにサンプルが紹介されています。https://shared-assets.adobe.com/link/d9153691-d500-49e3-6deb-bd17101769ec/?file=CREATIVE%20SPOTS%20ICON%20KITS%20DESIGNERS.pdf先鋭的な作品とか陽のあたるバーといったふわっとしたものから、特定のお店の名前まで30種類載っています。皆さまの周りで考えるときにどんなものを紹介すればの参考にどうぞ。IconのダウンロードについてLP一枚挟まっているのですが、ぶっちゃけ以下のリンクからいくのが早いです。https://shared-assets.adobe.com/link/59698c21-c010-4718-78fb-0b5346a5200d私としてもなんとか時間を作って参加したいところです。雑記PlayColorKの36色セットをなんてことのない報告。デルデというサンスター文具から出ているペンケースにすっぽり入ってよかったと安心しています。PlayColor2を愛用していたにも関わらず、PlayColorKを買った理由は、割ともっと細いのがほしいと思う場面が個人的にはあったからですね。肌色あればと思わなくもなかったけど、別にいいか感はある。36色もいるのか?12色で十分では?というのは、「ああ、買っておけばよかったなあ」という時の後悔のリスクを消すためであって特に深く考えていない。GCF-013で、デルデにおさめたの状態がこれ。Goodこちらのペンケースもいろんなのあるからなかなか被らないと思うけど、売り切れも多いので注意。他にほしいなって思った候補3つあげときます。雑記あけましておめでとうございます。2日になってしまいましたが、今年もよろしくお願いいたします。去年の12月にブログを開設して、もっといろいろ書きたかったはずがといった部分が多いので、今年こそはと思っています。今年もあんまり気負わずに生きていきたいなあとまったりした考えなのですが、おみくじを引いたら大吉だったので、特に深く考えなくても今年は上手くいきそうだなって思ってます。こんな雑な投稿ですが、今年もよろしくお願いいたします。思って帰省中に撮った写真でも載っけておきます。家の近くの踏切にて、朝6時半くらいに撮りました。こどもの視点みたいなのを意識してたと思うんですけど、とりあえず寒かったのは覚えてます。上の写真を撮った帰りとかだと思う。ここで初詣しようとして、なんか予想以上に並んでたので別の場所に行きましたwなんかよい絵だっただけに自分の写真の下手さが苦しい一枚。これあげようか迷ったんだけど、うん、よい絵だったので。精進します......。今年もよろしくお願いします。10日目の記事なのでベスト10です。ショートカットのカスタム方針は以下の通り似た機能は似たショートカットにしたい独自性高いものを使わなくなるので基準を他に寄せる(Fnはじまりなど)XDに寄せたい特に今までIllustratorやPhotoshopに寄せていた人は多いと思います。私もそのフシがありましたが、XDを使用開始してしばらくしてからすべて見直しました。Kみんなだいすきシンボル化です。別のものにしていたのですが、XD使用する機会があったのでそれに合わせてます。おかげさまでScaleをぶっ潰していますが、正直インスペクタから操作することが多いので個人的な被害はすくないです。ついでに、ライブラリに追加を下のようにアサインしています。Kぜんぜん使う機会ない。MXDに合わせました。Illustratorに合わせる、Photoshopに合わせるでまたバリエーションは違います。MaskなのでMっていうのはわかりやすいです。Shiftに変更しています。Cこれを実行するとこうなります。CmdでなくCtrlはじまりにしたのは、レイヤーリストの操作をCtrlやTab基準にしたかったため。次のページの切り替えのとろこでまた書きます。↓なことにまったく慣れられないので変更。ひとつだけFn始まりとかいう斜に構えた感じになってるせいで使わなくなってるよなって思ってから変えた。Fn始まりのショートカットを駆逐できたというのが功績。レイヤー操作は特にescとenterでごにょごにょできるの覚えておくとよい。これで、レイヤーリストの操作をほとんどごにょごにょできる。左手で完結させて、右手はマウスに置いておきたかった願望あるけど、enterは割り切った。lockにenter割り当てという方法もあるにはあるけど実践はしていない。Nだけど、これもCtrlはじまりにしようかと思ったけども、別にあんまり使わないからいいやってなってます。CこれもXDに合わせてます。Centerなので、CArtboardに整列するオプションには、Altを追加する形にしてます。]これもX(rySketch仕様に慣れたと思ってたけど、XD使うようになってから見事に「は?」ってなったので変更した。余談だが、ページの切り替えとこれを両方設定することで、矢印での操作はサイズの変更、位置調整のみになる。(と思う)言い方を変えると、アートボード上でのX軸、Y軸の操作のみに使われるようになり、メタファー的にぴったりだと思う。2次元の上下左右でZ軸まで操作できていたのに抵抗感がある人にはオススメ。これは記事書いてるときに気付いたんですけどね......。X何もカスタマイズしていませんn!!!!!なぜならデフォルトがXDと同じだからです!!!!おさらい気分で載せました。MこれはSketch以外も共通させている。Finderとかこれでまとめられるようにしている。Pixelmaterでも使ってる気がする。最近あんまりPixelmater自体を使っていないけど。iTerm使っているからできないけど、Terminalはできるので開きすぎて混乱したら便利そう。Mにしていたけど、そっちはMaskに譲った。?たぶんデフォルトですべてのアプリで共通として入ってるものなんだけど、これをチェックしていないとヘルプページをブラウザで開かれて甚だ迷惑なのでチェックが入っているか確認しておくとよい。だいたい困ったらここから検索してます。Pluginの機能を呼び出すショートカットまでなんやかんややろうとすると記憶の限界を感じるので、ほとんどここからなんとかしてます。こちらからは以上です。帰りの電車で唐突に、「あ、あれ書こう」ってなったので書いた。タイトルで『サイト探索における三種の神器』と大仰な名前を付けて書いてしまったので、平易な言葉で問いかけなおそうと思う。ユーザーがサイトで自分にマッチしたものを探すときに重要な3つの機能って?なんかまだ硬い。サイトに来た人が見つけたいものを見つけるのにたいせつな機能ってなーんだ?いえす。すごくかんたんな質問だ。これは特に引っかけ問題でもなんでもない。探索とかいう言葉をタイトルで使ってしまった理由もおおよその予想が付くと思うのだが、早い話が『検索』という言葉が回答のひとつになるので使いたくなかったのだ。ひとつは、検索機能だ。これが重要じゃないという人は、そうそういないと思う。いうものの重要性を感じるためのかんたんな方法の紹介として、それがなかったらどうなるか想像するというかんたんな手法を実践してみよう。Amazonから検索機能が消えた場合を想像できるだろうか?Facebookで検索ができなかったらどうやってつながればよいのだろうか?Googleに検索がなかったら?Googleに検索がなかったら、どうなるんだろうはちょっと自分で言ってすこし興味あるのでやってみた。完全にこれがやりたかただけやろという状態になってしまった感があるが、とにかく情報過多な中で検索というのはすごく重要なのである。Sortいえす、並べ替え機能だ。だいたい新着順やら人気順、おすすめだったり関連度みたいなのでソートができるというのもたいせつな要因だ。この点は、日々の実感としてAmazonは流石だと思う。こじらせ英語UIがお話を複雑にしているが、項目としては上から次の通り。関連する順と評価の高い順って変わるの?みたいなところがあると思うのだが、内部的なアルゴリズムは、きっと想像した以上に、騒がしい未来がぼくを待ってるじゃなくて複雑だと思う。いえ、何がすごいかっていうと、評価の高い順で表示されるものと上位6件すべて違う上に、やはり見た感じのタイトルの並びとして、関連する順の方が私の読みたいものが並んでいたという事実だ。選択肢を無理くり増やして、「これ意味なくね?」とか「これとこれ結果変わんなくね?」とかいったサイトは山ほどあるけど、意味あるソート順を提供しているところで出てきたの真っ先にAmazonだった。Kongで実際にキーノート聞いたりワークショップ受けたりしてるといったこともあって、「なんだ?航空券のチケット情報でも抜いてんのか?」って疑うレベルである。ちなみに、ほしいものリストでは優先順位を付ける機能があってそれ順にソートできたりする。えーと、Google検索はソートなんてぜんぜんできないと思うんですがどうなんですか?ってお話をしておきます。Webを横断的に検索するといった極度に広いデータを探索してかつ万人に使用される機会があるものは、パーソナライズし過ぎない方がよいといったこともあると思っています。同じワードで検索したのに、ある人の検索結果には1つ目に出るのに、ある人の検索結果には1ページ目にすら出ないといったのは、明らかに混乱を生み出すし、そんな世界をGoogleは望んでいない。(と思う)はい、つぎー。Sortと来ているので、次は何のSでしょうねー。Filterいえす、絞り込み機能だ。当然ながらSではない。たってURLにsearch-sort-filterって書いてるからな。いえ本題は実は次だから、また例え話だけしてごまかそう。私の足のサイズは28cmなのでそのサイズ周辺の在庫がないなら除外したい表参道でランチする店を探しているので周辺以外は除外したい東京勤務で考えているのでそれ以外は除外したい確か8月のメールなのでそれ以外は除外したいとにかく情報過多な時代の皆さまは除外したいものだらけなのですよ。明確に順序が付けられるものはソートできる。versa明確に順序が付けられるものは、区分を作ることでフィルターの候補にできる。日付が一番わかりやすい。時間は古い→新しいの時系列に沿って明確に順序付けられるし、年や月、日などを区切ることによって絞り込みの選択肢にできる。区分は別に等間隔である必要はない。統計かじった人とかは何か区分をつくろうとすると、どうしても等間隔にしたいといったのあるかもしれないけど。Google検索の絞り込みは、もう間隔が同じものなど何ひとつない。これが使いやすいのだ。違いといったものを挙げると一番大きいのはこれだろうソートの選択はひとつまでで、フィルターは複数選択可能。それっぽいこと書いてるけど、堂々の脳内出典。ソートとフィルターは明確に別だという設計をした方がよいぞ。ごっちゃになってるところ多いよね。いうか自分がやらかしたって気付いて調べて思ったんだけど。いやなんていうかそれでうまくいってるんだろうし、ユーザー使うし、困ってないし、むしろ上手くいってるんだろうなと思うけど。絞り込みやソート順の要素を追加する度に整合性を保つのにめちゃくちゃ苦労するんだろうなーこのサービスって勝手に思ってる。