コロナと共に新卒でエンジニアとなった人のブログ

コロナ蔓延と同時に新卒エンジニアとなった自分の記録。技術に限らず考え方や色んな情報をシェアしていきます

トップ > IT開発 > FlutterとAdobe XDプラグインの導入

FlutterとAdobe XDプラグインの導入

IT開発 ITエンジニア

FlutterとXDプラグインの導入

Androidなどモバイルアプリ開発に従事するに当たって、Flutterでの開発も視野に入れる必要性が増してきました。

FlutterはAndroidやiOSなど、本来は異なるプラットフォームを使用して開発するものを一元化して開発ができるというものです。

flutter.dev

Dartと呼ばれるプログラミング言語を使用して開発を行います。

JavaやJavaScriptが理解できていれば、比較的容易に踏み込めるというのもメリットが大きいですね。

ザックリ以下のメリットがあると思われます。

  • Android(Java, Kotlin)やiOS(Swift)ごとに異なる言語を使用しなくてもよい
  • AndroidStudioやXCodeなど別々の開発環境を用意しなくてもよい
  • Adobe XDからのエクスポートが可能なプラグインもあり、デザイナーと連携が取りやすい

AndroidであればJavaかKotlin、iOSであればObjective-CかSwiftなどへのプログラミング言語が可能な技術者を整備せねばいけません。

また、iOSの開発にはWindows環境では実機での確認ができないなど、ハード面でのコストが必要となってきます。

そういった点を考慮するとAndroidStudioからプラグインを追加するだけで、AndroidとiOSの両方で開発が行えるのは良いですよね。

実際使ってみると、様々なデメリットも見えて一長一短ではありますが、、、、

環境構築は簡単

AndroidStudioの環境構築が完了している方であれば、WindowsでもMacでも容易に導入することができます。

下記のサイトであれば、AndroidStudioとXCodeの両方への導入まで確認できます。

qiita.com

Adobe XDのプラグインを導入してUI反映

Flutterの導入が完了したら、Adobe XDでUIを作成してエクスポートできるプラグインを揃えていきましょう！

以下の条件で導入しました。

  • AndroidStudio 4.1
  • Mac OS Catalina
  • Flutter 1.22.1
  • Dart 2.10.1
  • Adobe XD

Adobe XDメニューからプラグイン> プラグインを見つける

"fu"と検索に入力して、、、

XD to Flutterを選択してインストールします。

インストールが完了したら、Adobe XDで簡単なUIを作成します。

XDのメニューからプラグイン>XD to Flutter > UI Panel を開きます。

AndroidStudioのFlutterプロジェクトのlibフォルダがあるディレクトリをPath指定すれば、後はデフォルトで大丈夫です。

そして、AndroidStudioのFlutterプロジェクトのpubspec.yamlファイルに17行目のようにadobe_xdを加えてあげれば準備オッケーです。（":" コロンの後は入れなくても動作します）

ビルドするとUIが反映されていることが確認できました！

無事に環境が構築でき、Adobe XDでのUIエクスポートも導入できました。

かなり便利！？

メリットづくしのように感じますが、実際に開発を進めていくとそれなりに問題が生じてきます。

UIをDartコードにエクスポートできても、その後のアクションを加えるときには、Widget構成がむちゃくちゃで苦労します。

KeynoteをPowerPointに無理やり変換したような感じでしょうか、、、

あくまでエクスポートであるため、好き放題にXDでデザイナーさんに作成されるとメリットがほぼありません（笑）

それなりに制約があることを把握して、しっかりと事前にすり合わせをしましょう！ （XDのコンポーネントがUIに含まれているとエクスポートできない？など私の環境では問題が発生しました）

使いこなせると強力なツールであるのは間違いありません。

今後も時間をかけて学習を継続していきます。

最後に

入社して半年が経過しましたが、まだまだわからないことだらけです。

それでも、自分なりに必要となることや、今時間を積み重ねておくべきことをやれているように感じます。

実際に一人前のプログラマになることを目指して、Android/iOS開発は毎日必ず手を動かして感覚をなくさないようにしています。

With COVID19の中で新卒のキャリアをスタートさせましたが、少しながら日々に自分の成長 があります。

今年から社会人になった皆さん、大変な中ではありますが、通勤や娯楽にかけていた時間を学びの時間として、今後も一緒に成長を続けて行きましょう！

とりあえず。。。

メモ代わりに書いていますが、これから理解が深まれば書き足していきます。 いつか誰かのお役に立てると嬉しいですね。

初学者から一人前まで、、、

ここでは一人前のプログラマの定義を

「自力で様々なツールを活用しながら、ある程度思い通りの実装ができること」

とします。

また、人生においてプログラミングに向き合う時間として、現時点で2000時間取り組めればある程度の基盤が備わると仮定しています。 （言語やツールに依存しない思考法や情報収集能力）

プログラミングは大学で学んで来ましたが、特に根詰めてやってきていないので、ノーカウントとして取り組みます。

現在までの学習時間

およそ520時間

どんどん更新していきます。