Ink to Code を使ってみた

はじめに

Microsoft の Ink to Codeを使ってみました。（OS の言語を英語に変えたときに、たまたまダウンロードできたので…）

何ができるの？

• アプリの画面をお絵描き感覚で作成することができます
• 作成した画面を UI コードにエクスポートすることができます

使い方

使い方を簡単に記載しておきます。

メイン画面

Ink to Code を起動すると以下のようなメイン画面が表示されます。

• サイドメニュー

  • 描画に利用するメニューが提供されています
    • ペン
    • 消しゴム
    • コントロールを整列させるための制約
    • ルーラー（定規）
    • Undo, Redo
    • 拡大、縮小

• ツールメニュー（上部）

  • プロジェクトの新規作成、ファイルのオープン・保存、アプリケーションの UI コードへのエクスポートメニューが提供されています

View を作る

View は長方形を描くことで作成できます。

View を作成したら、View の中にコントロールを描いていきます。以下のコントロールを描くことができます。

• Label
• Textbox
• Button
• Image
• Paragraph

Guide ボタンを押すと、各コントロールの描き方が表示されるので、参考にするとよいと思います。

コントロールの整列

手描きで描いた複数のコントロールを整列させることができます。サイドメニューの「Constraint Pen」を選択して、基準線を描いた後、基準線と整列したいコントロールを選択すると、コントロールを整列させることができます。

エクスポート機能

Ink to Code には、作成した View をアプリケーションの UI コードにエクスポートする機能が提供されています。以下の種類のアプリケーションの UI コードをエクスポートすることができます。

• Android 用の XML ファイル
• UWP 用の XAML ファイル

以下のサンプルを Android にエクスポートしました。

エクスポートした UI コードを Xamarin.Android プロジェクトに取り込んでみたのが、以下のスクリーンショットです。

ImageView の src 属性と Button の text 属性に適当な値を入れて、アプリケーションを実行した結果が以下のスクリーンショットです。

まとめ

• 良い点
  • お絵描き感覚で View がデザインできる点
    • 操作になれるのに時間がかかるかも
• 改善してほしい点
  • エクスポートしたコードに不要なタグが出力されているように見える
    • 例えば、Android にエクスポートした場合に、不要と思われる TextView 要素が出力されていた
      • 文字の編集、削除を何度か行っていたので、その残骸のようなものが残っているのかもしれない
  • テキストのサイズ調整が難しい
    • サイズを小さくする場合には、ペンで描きなおす必要がある
  • テキストを書く時の認識制度がよくない
    • OS が日本語環境だからかもしれませんが、英語、日本語ともに、なかなか認識してもらえません
      • 途中で、文字入力はあきらめました…
• 追加してほしい機能
  • コントロールの種類を増やしてほしい
  • カラーパレットがない
    • 手軽に View を描くことができるので、色も塗りたくなる
  • Xamarin.Forms の XAML にエクスポート機能
  • 複数の View が作成できるので、画面遷移も定義できるとうれしい

参考リンク

以下に参考になる YouTube のリンクを記載します。

• YouTube: Ink to Code, a Microsoft Garage Project
• YouTube: Drawing Xamarin Apps to Life with Ink to Code | The Xamarin Show