「XDプラグインでDart言語自動生成してみた」 ~私文男子の格闘第3話~

はじめに

(2020/5/6投稿)
オンライン授業にも慣れ、もうずっとオンラインでいいよとすら思っている私文男子です。

本日はいつも私が使っているAdobe XDから、自動的にコードの生成をするということをやっていきたいと思います。

私がモバイルアプリエンジニアを始めようなった時にFlutterを選んだ理由でもあるので、とてもワクワクしながら作業していました。今までプログラム系統を触ったことがなくてもめちゃくちゃ簡単にできてかつ衝撃が大きい作業だったので是非ご覧ください。

環境紹介

まずは環境紹介からいきましょう。

私のPC環境

Adobe XDの環境

ソフト自体のバージョン

Adobe XD ver27.2.12.4
Creative Cloud Sync4.3.36.1

プラグインのバージョン

Xd to Flutter 2.1.0

Flutterのバージョン

Flutter for Mac OS ver1.12.13

それではいざ！

それでは実際にXDで作ったプロトタイプをDart言語のコードにしていきましょう。

手順1 「XDを起動しプラグインを追加」

手順1-1「ファイルを作成」

まずは、XDを立ち上げ、ファイルを作ります。
私が持っているのはiPhone8なのでiPhone8の大きさで作れるファイルを作りました。

手順1-2「プラグインをXDにインストール」

次にプラグインを下記のURLからインストールします。

まずはこのリンクに飛んでみてください。
https://github.com/thize/xd-to-flutter/releases

リンク先の.xdxで終わるファイルをインストールします。これが「XD to Flutter」というプラグインです。
プラグインとは、「拡張機能」のことで、XDからDart言語へコードを自動生成するという機能はもともとのXDには入っていないので、そのためのインストールです。

インストールが無事完了すると、「XDのプラグインがインストールされました」という旨のポップアップが出てきます(スクショし忘れた...)

余談ですがGithubから行かずともXD上からプラグインを検索して追加することもできます。その場合バージョンが少し古いものになるようなので、ご注意ください。

手順1-3「プラグインが追加されているか確認」

インストールが終わったら、XDに戻り
「プラグイン」
↓
「プラグインを管理」を押して、以下のように「インストール済み」と表示されていればOKです。

手順2 「コードを自動生成」

いよいよきました。ドキドキの瞬間です。簡単な画面を作って、コードにしたいと思います。

手順2-1「XDに画面を描く」

まずはコードにしたい画面を普通にGUIで作ってみます。
今回は簡単にできるようにTwitterのヘッダーとフッターをそれとなく真似してみました。
XDの扱い方なども今後紹介できたらなと思います。

テキストが自動生成されてどんな感じに表せるかも気になったのでテキストデータも画面に組み込んでみました。

手順2-2「プラグインをアクティブにする」

このままでは使えないのでプラグインをツールバー部分に表示させます。
「プラグイン」
↓
「XD to Flutter」を選択

選択をするとツールバー部分にXD to Flutterのメニューが表示されます。これでこのステップは完了です。

手順2-3「生成」

いよいよ(早くも？)きました。衝撃の瞬間です。
まずは、画面を選択。
選択をすると「Generate」ボタンが変色するのでポチッとすると

はい！出ました！「Copied to clip board」

これで自動生成ができたようです。あまりにも一瞬の出来事すぎて疑いつつもクリップボードの中身を確認すると、、、

Stack(children:<Widget>[
    Container(
      width: 375,
       height: 667,
       color: const Color(0xffffffff),
       child:
    Container(
      width: 375,
       height: 667,
       color: const Color(0xff11171e),
       child:Column(children:<Widget>[
    Container(
      width: 375,
       height: 242,
       color: const Color(0xff151f2b),
       child:SvgPicture.asset(
      'assets/Icon awesome-twitter.svg',
      width: 28,
      height: 22.74,
    ),
    ),
    Container(
      width: 375,
       height: 413,
       color: const Color(0xff151f2b),
       child:Column(children:<Widget>[const Text(
      'Twitterのまね',

      style: TextStyle(
      fontFamily: 'Hiragino Kaku Gothic ProN',
      fontSize: 20,

      color: Color(0xffffffff),


    ),
    ),Row(children:<Widget>[SvgPicture.asset(
      'assets/Icon material-home.svg',
      width: 23.89,
      height: 20.31,
    ),SvgPicture.asset(
      'assets/Icon ionic-ios-search.svg',
      width: 21.8,
      height: 21.8,
    ),Column(children:<Widget>[SvgPicture.asset(
      'assets/パス 1.svg',
      width: 17.72,
      height: 14.77,
    ),SvgPicture.asset(
      'assets/パス 2.svg',
      width: 3.41,
      height: 0.98,
    )],),SvgPicture.asset(
      'assets/Icon material-mail-outline.svg',
      width: 22.14,
      height: 17.71,
    )],)],),
    )],),
    ),
    ),
    Container(
      width: 376,
       height: 1,
       color: const Color(0xff596875),

    ),
    Container(
      width: 376,
       height: 1,
       color: const Color(0xff596875),

    )],)

なんとこんな長文のコードが!
めちゃくちゃこれ書くの大変なんだろうなと思いつつ、目が飛び出ました。

感想・気付き・疑問

今回は、自動生成に取り組んでみました。驚くほど簡単に立派なコードができてとっても満足でした。
気付きとしては、コードが生成されたは良いものの、今度はこれが合っているのかをある程度Dart言語を読めるようになって検証する必要があると思いました。

疑問としては、生成されたコードを如何にして実機に反映させるか、といったことや、どう動かすんだろう、という点があるので次回以降チャレンジして解決していきたいです。

次回は「自動生成されたコードを実機に反映する」にチャレンジしたいと思います。
それではまた！