[和訳]Craft Prototype:InVisionのAdobe XDキラー
この文章は、原文(Craft Prototype: InVision’s Adobe XD Killer)の著者であるJoe Toscano 氏の許可を得て日本語訳をしています。
It is allowed by Joe Toscano that I translated the article to Japanese and republished it.InVisionはSketchの中でプロトタイプを作れるようにしようとしている。それは、完全なコード化したプロトタイプのような見た目や使い心地になる。
この文章はこれから何ができるようになるかのスニークピークだ。けっして尻込みしないだろう。
未来の先端
私はキャリアの中でたくさんのプロトタイピングツールを使ってきた、InVisionのSketch向けのCraft Prototype Pluginはまだベータ中ではあるけれど、容易に今まで使ってきたなかで、最も素晴らしいインタフェース構築の組み合わせであり、強力なプロダクトになっている。
Like a Tesla with a v8 engine (V8エンジンの乗ったテスラのようだ)
ページトランジッション
ページトランジッションはかなり基本的なもので、これはほとんどのプロトタイピングソフトウエア製品の中で使用することができる。
Prototypeは、考えうるあらゆる種類のトランジッションを実行することを可能にする。含まれているのは次のものだ。
- タップ
- タップ＋ホールド(例: 3Dタッチ)
- 左へスワイプ
- 右へスワイプ
- 上へスワイプ
- 下へスワイプ
これらのトリガーに基づいたアニメーションも可能だ。例として
- 即時(アニメーションなし)
- ディゾルブイン
- 右からスライドイン
- 左からスライドイン
- 上からスライドイン
- 下からスライドイン
レイヤーはオーバーレイモデルに変更でき、うまい具合に設定を追加できる。しかし、まだ嬉しいことに続きがある。
スティッキーヘッダー/フッター
スティッキーヘッダーとフッターはボードを横断するかなり標準的なもう一つの機能であるがCraft Prototypeでは限りなくシンプルでレイヤーグループを選んで、スティッキーになれと唱えるだけ良い
編集できるテキストフィールド
編集できるテキストフィールドは未来に向けたステップの一つだ。この機能がある多くのプロトタイピングソフトウエアはグラフィカルプログラミング言語を覚えることを要求する。Craft Prototypeを使えば、一行のテキストを作って選んで、「c」を押しPrototypeを有効にする、そしてライブテキストになぁれと唱えれば済む。
テキストフィールドを作った上で、どんなキーボード(例：標準キーボード、電話、Eメールなど)を表示するかを決められるし、プレースホルダーのテキストに何を表示するか、「全てのテキストをクリア」ボタンへの簡易アクセスを必要とするかどうか、多くの他のオプションを指定できる。
そのソフトウェアは複数のデフォルト入力タイプをプリセットビヘイビアとして用意している。
- 1行入力
- 複数行入力
- 保護されたパスワード
- Eメールアドレス
保護されたパスワードフィールド
技術的にコレは最後のセクションにすべきだが、保護されたパスワードフィールドを作れるという驚異的なことに感謝して、二番目に取扱いたいと考えた。
写真撮影
写真撮影はもう一つの信じられないほど強力な機能である。これは一般的にはグラフィカルプログラミング・ソフトウェアあるいはフルコードを通して提供されるものだ。
2回のクリックだけでその携帯電話のカメラにアクセスして、あなたのプロトタイプで写真を取ることができる。しかも、レイヤーを「_photo」と名付けば、そのプロトタイプは写真のためのマスクのようにそのレイヤーを使えるようになる。
カメラロールアクセス
写真を撮るだけでなく、携帯電話のカメラロールから写真を選択することもできる。ちょうどに写真撮影機能のように、写真が適切に配置されるためにレイヤーに「_photo」と名前をつけておく必要がある。
電話をかける
プロトタイプの中でどのくらいの頻度でコレが使われるのかは分からないが、静的なレイヤーを使って電話をかけるボタンを作ることができることも素晴らしい機能だ。
iMessageの送信
電話をかけた上にさらにiMessageも送ることができる。メッセージを送りたければ、そのメッセージをテキストフィールドに埋めれば良い。一方で、テキストをカラにしておけばブランクで開いてインタラクティブなiMessageとなる。
Safariへのアクセス
アプリから何処かへリンクする必要はないだろうか？数クリックでプロトタイプの中に、あなたが見せたいサイトに人々を連れて行くネイティブなリンクを作ることができる。
レイヤーを選択し「C」キーを押しPrototypeを起動し、そのGUIをSafariブラウザアイコンへドラッグし、移動させたいサイトに入れることは非常に簡単だ。
Web Viewの埋め込み
プロトタイプの中でリンクよりもずっとクールなのはサイトやデータをプロトタイプに埋め込む機能だ。
これはそんなに大したことでないようにみえるが、今まで動くGoogle Mapを備えたプロトタイプ見たことがあるだろうか？
コードが得意で、真に格好いいマイクロインタラクションを作るためにそのシステムをハックしたいなら、Nikolas Klein によるこの文章をチェックしよう。hack live code into your prototype!
今日からCraft Prototypeをためそう
まずベータコードを取得する必要がある。既にベータを持っている友人に尋ねたり、support@invisionapp.com にメールし、礼儀正しくPrototypeにアクセスするためのコードをほしいこと彼らに伝えたりすればコードを取得することができる。
コードを取得したあとに、Craft Prototypeをセットアップすることは、それを使うための一番困難な部分だ。幸いなことに、InVisionは私達のために完全なガイドを作ってくれている。だから、多少かんたんになっている。
Download The Demo
私はこの手順のすべてを通して一通り体験できるデモプロトタイプを作った。あるいは、ただこの文章を開いておいてプロトタイプをデザインするようにGIFアニメーションをじっくり見る事もできる。
もし私があなたなら、デモをダウンロードするだろうけど！
なにか新しいものを作るちょっと前に、それを繋いであなたのスマートフォンで触ってみて欲しい。私はどうやってプロトタイプを作るのか教えるためにそのプロトタイプを構築したのだ。
このデモファイルを使った多くの人からかなり良いレビューをいくつも聞いている。それは、私のサンフランシスコ、ポートランド、そしてニューヨークのR/GAチームメートや、Nikeの数人も含まれている。あなたにも役立つと良いのだが。
もっと知りたくなったら?
Prototypeでできるすべての機能のより詳細なドキュメントのために、InVisionが出しているこの文章をチェックしよう。
このプロセスの過程で何か気になることがあったら、気軽に手を伸ばして！私はほんの一握りの人を助けてきた。だから私たちは起き上がってすぐさま走っていけるだろう。
プロトタイピングの未来
Craft Prototypeは、今まで私がプロトタイプを作ってきた中で遥かにずっと容易で強力な方法である。更にこれはまだほんのベータにすぎないのだ！
Prototype スケールがプラットフォームのバラエティーが増えていくとどうなるのか、Sketchの新しいレスポンシブアートボードと統合されたら何が始まるのか、そして、そのユーザの需要と出会ったとき何が更新されるのか想像してみてほしい。その時、一行のコードも書くことなしに、私たちは完全に機能する製品に限りなく近づけるだろう。
その夢は、毎回のソフトウェア更新のたびに、どんどん近づいてきている。そして、疑いようもなく、InVisionとSketchはその道を先導している。
もしこの文章を好むなら、ぜひ ❤️ して、他の人にも広めてほしい(訳者注：原文のLikeを/も、お願いします)
快く日本語訳した記事を公開していいよと了承いただいた上にアニメーション画像やサンプルファイルまで提供していただいた Joe Toscano 氏に感謝します。
Thank you, Joe!
細かい操作や、各種設定画面などを見たい方は原文のカバー画像から飛べる次の文章もおすすめです。(2016年6月のものなので変わっている可能性もあります。)
