tafuji's blog

C#, Xamarin, Azure DevOps を中心に書いています。

Ink to Code を使ってみた

Qiita より転載

はじめに

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 にエクスポートしました。

SampleView

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

AndroidXml

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

AndroidXml

まとめ

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

参考リンク

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