🏝サンダルリリースセールまもなく🏝
  1. テストアカウントのジャーナルズ
  2. FlutterでSUZURIのAndroidアプリ作りました。

FlutterでSUZURIのAndroidアプリ作りました。

最近はといえば、FlutterでSUZURIのAndroidアプリを作っていました。
自分はUIのデザインとフロントエンドの設計・実装をやりました。

https://suzuri.jp/android

発端

  • Androidアプリをつくるエンジニアがずっといなくてヤバい状況だった。
  • 元同僚からFlutterっていうのがイイらしいというのを飲みの席やTwitter経由で聞いていた。
  • 自由研究で冬休みにFlutterで遊んでみた。
  • これは結構自分でも簡単に扱えそうだしイケそうだとなった。

やったこと

  • 社内で「Flutterのつどい」という宗教儀式を開催したら20人くらい集まった。
  • このころちょうどコロナになったので、リモートで「Flutterのつどい」を続けた。
    • ERSeFRqU0AEqNlM
  • Flutter Widget of the Weekをちまちま全部見た。

SUZURIアプリのはじまり

  • 練習がてら、会社のGithubリポジトリにSUZURIコンポーネント(通称: Nachiguro)をDartで実装していくという個人プロジェクトを立ち上げた。
  • そのころちょうど同僚エンジニアの@tokkyがSUZURIの簡易的なアプリをFlutterで作っていたのを観測した。
  • 一緒にやればいいやんとなった。
  • フュージョン。
  • なんかやってる感を社のSlackの#mobileとかで出しまくっていたら気づいたら1つの公式なプロジェクトになってた。
  • 爆誕。

デザイナーにとってのFlutterのよさそうな学び方

  • Flutterとは何か、Getting Startedみたいなのは散々いろんなところで説明されてるので省略。「Flutter とは」で検索。
  • Flutter公式のチュートリアルをまずはやった。
    • どんなふうに動くのか、いかに簡単に動くかわかりやすかった。
  • Udacityで公式がやってる教材に入門した。
    • 上のチュートリアルより細かい実装について知れた。
    • 動画だしわかりやすかった。
  • 自分のサービスのコンポーネント集を作った。
    • Material Designを踏襲しながらどうやって上書きしながら独自のWidgetを構築するかが身についた。
    • CSSでいうところのCSS設計、コンポーネント設計みたいなのが身についた。
    • 色変数を保持する方法とか、状態によって見た目が変わるボタンの設計とか。
  • Material Designにないコンポーネントを実装するために FlutterのGithubにあるmaterialのライブラリを隅々まで読んで理解を深めた。
  • このへんまでやるとだいたいHTMLやCSSやJSを書くようにDartのフロントエンド側のコードが書けるようになった。

自分はSwiftでiOSアプリとかも実装したことがあったので、デザイナーにとってどれくらい簡単にできるかはあまり測れないけど、少なくともSwiftやKotlinでやるよりは敷居は低かったように思います。

HTMLやCSSやJSを書くようにネイティブアプリのフロントエンドのコードをデザイナが書くのが当たり前になっていくといいなと思います。

追記

追伸

まだできないことも多くてご不便おかけしますが、ちょこちょこ作ってるので暖かくみまもってください :pray:

Written by

Recommended items