
数々のプロトタイピングツールを試しているうちに、エンジニアの方なら誰しもが思ったこと…それは
「ここまで出来るんならコード生成してよ……」
ってことなんじゃないでしょうか?
目次
プロトタイピングツール?NO!新しいデザインツールだ。
たぶんこのAnimaが開発中の「Sketch to Code」という新しいツールは今までのプロトタイピングツールを利用した工程に縛られているとピンと来ないツールなのではないでしょうか?
今まではデザイナーがどんなに頑張ってアニメーションを作っても、それをエンジニアが再び頑張って実装する…という二重構造だったわけですが、これからはAnima上でレイアウトやアニメーションがバッチリ決まれば、エンジニアはよしなに生成されたコードを利用すればいいということに。
とりあえずデモを見てください。
Auto Layoutからアニメーションまで。
リアルタイムプレビューしながらAuto Layoutを調整
画面幅に合わせて要素のレイアウトを整える「Auto Layout」をリアルタイムプレビューしながら設定できます。
Flashのようなタイムラインを利用したアニメーションも
ボタンをタップしたときの動きなど、インタラクションをつけたい箇所を指定すると、タイムラインが表示されて要素の変化などを描くことができます
画面遷移のアニメーションももちろん出来る
もちろん画面が切り替わるときの様子も再現できます
コードを生成してあとはXcodeで開くだけ
出来上がった画面&アニメーションをObjective-CもしくはSwiftで出力します。そしてそのファイルとXcodeで開くと…Storyboardにはちゃんと画面が表示され、画面同士もきちんと接続されています。Simulatorを立ち上げて確認するとちゃんとスクロールも画面遷移もできています…なんと…。
これで開発者を困らせていたUI実装についての悩みはすべて解決…?
現在、事前登録をやっているようなのでぜひ登録してみてください!リリースが楽しみ!!
Anima Sketch to Code
![]() |
書き手:小島 芳樹 Webやスマートフォンアプリによるサービスを開発・提供する会社で働いています。 Twitter: @yoshikikoji |
この記事が気に入ったらいいね・フォローお願いします!