Edited at

Ink to Code を使ってみた

More than 1 year has passed since last update.


はじめに

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


何ができるの?


  • アプリの画面をお絵描き感覚で作成することができます

  • 作成した画面を UI コードにエクスポートすることができます


使い方

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


メイン画面

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

MainScrenn



  • サイドメニュー


    • 描画に利用するメニューが提供されています


      • ペン

      • 消しゴム

      • コントロールを整列させるための制約

      • ルーラー(定規)

      • Undo, Redo

      • 拡大、縮小






  • ツールメニュー(上部)


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




View を作る

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

CreateView

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


  • Label

  • Textbox

  • Button

  • Image

  • Paragraph

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

Controls


コントロールの整列

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

Constraint


エクスポート機能

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


  • Android 用の XML ファイル

  • UWP 用の XAML ファイル

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

SampleView

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

AndroidXml

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

AndroidXml


まとめ


  • 良い点


    • お絵描き感覚で View がデザインできる点


      • 操作になれるのに時間がかかるかも





  • 改善してほしい点


    • エクスポートしたコードに不要なタグが出力されているように見える


      • 例えば、Android にエクスポートした場合に、不要と思われる TextView 要素が出力されていた


        • 文字の編集、削除を何度か行っていたので、その残骸のようなものが残っているのかもしれない





    • テキストのサイズ調整が難しい


      • サイズを小さくする場合には、ペンで描きなおす必要がある



    • テキストを書く時の認識制度がよくない


      • OS が日本語環境だからかもしれませんが、英語、日本語ともに、なかなか認識してもらえません


        • 途中で、文字入力はあきらめました…







  • 追加してほしい機能


    • コントロールの種類を増やしてほしい

    • カラーパレットがない


      • 手軽に View を描くことができるので、色も塗りたくなる



    • Xamarin.Forms の XAML にエクスポート機能

    • 複数の View が作成できるので、画面遷移も定義できるとうれしい




参考リンク

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