見出し画像

未経験の非エンジニアが、2か月でWebアプリを受注してリリースした話。【Flutter】

はがくん＠薬剤師xエンジニア
ハイライト
・完全独学でもFlutterでアプリがリリースできるぞ！という話。
・アプリ制作イメージの共有にはAdobe XDがめちゃ便利という話。
・頭を悩ませながら作ったツールはかわいいぞという話。

■推し色メーカー、ついにリリース！🎊✨

推し色 (1)

つい先日、アラートさんの依頼で、推し色メーカーを開発しリリースしました！

推し色メーカーは、好きな言葉から3色のカラーコードを生成し、拡散することができるアプリ。言葉を色に変換して、色を思う存分楽しむツールです。WebアプリなのでiOS・Android・PCすべてのプラットフォームに対応しています。  *ブラウザはChrome推奨（Safariも可）

配色も、ちょっとしたデザインに対応できるよう、キレイな色が出るように工夫しています。色をタップするとカラーコードをコピーできるので、Web配色やバナー画像の配色にも使えます。

この記事のバナーも
推し色メーカーで作りました！

同じ言葉からでも、少しずつ違う色を生成できるように工夫しているので、満足できる色を求めてガチャをぶん回す感覚で試してくださいな🎊

プログラムとかはほぼ未経験。まともなアプリなんて一つも作った事ない僕が、たった2ヵ月でWebアプリをリリースできるようになった理由と方法をご紹介します。


■開発はFlutterで🦦

Flutterというフレームワークを使ってアプリを作成しました。
Flutterは、iOS・Android・Web・デスクトップアプリ全てを共通のコードで書ける、今話題のフレームワークです。

これまでは、アプリ開発をやってみたいな～と思っても、iOSならiOSだけ。AndroidならAndroidだけでコードを書くのが普通でした。日本ならiOSが普及しているし、海外ならAndroidだし・・・どっちも勉強するのはしんどいしなぁ・・・などと考えていると、なかなか勉強に踏み出せませんでした。

しかし、Flutterなら全てのプラットフォームで同一のコードを流用できると知り、これは今やるしかないなと思い、手を付けてみました！

Flutterのコードはdartという、ほぼFlutter専用の言語で書いていきます。モバイルアプリ開発でFlutterとよく比較されるのはReact Nativeでしょうか。向こうはReactのコードが使えるので、そっちが得意な人はReact Nativeをえらべばいいと思います。

ただ、僕は特にアプリの開発経験があるわけでもなく、ReactのバーチャルDOMという考え方が直感的でなく、抽象的で好きになれなそうなので、Flutterを選択しました。

勉強して思ったのは、Flutterは見た目の中に機能を書き込むので、直感的で分かりやすいんですよね。Flutter分かりやすくていいよ、Flutter。

それ故に複雑なアプリは向かないとされていますが、僕が1人で複雑なアプリを作ることはこれからもないでしょうし、Flutterではちゃんと機能部分を分離しながら丁寧に書くこともできます。

開発に使えるAndroid Studioの補完機能も非常に優秀で、プログラミングにありがちなワケのわからんタイプミスで詰まることや、綴りが分からなくて開発が進まないといったことが避けられます。

いまからアプリ開発を学ぶなら超オススメです。

■Flutterの最も効率の良い最強ロードマップ🗺️

この方が考えたロードマップに従って勉強を進めていきました。

Flutterは公式ドキュメント（無料）が充実しています。英語なんですが、FlutterはGoogleが開発を進めているフレームワーク。機械翻訳しやすいように作ってあるようで、Google翻訳に任せるとだいたい対応できます。


とはいえ、ドキュメントやチュートリアルだけだと初心者にはイマイチ理解しきれませんでした。そこでロードマップに従ってUdemyのコースを購入して全て受け切りました。（*土日はだいたいセールしてて、￥2,000以下で購入可能）

残念ながら優良な教材は英語が多いです。Udemyの日本語Flutter講座もあり、無料版を見たんですが、ちょっと使えそうにありませんでした。何より楽しくない。

「正確かもしれないけど、続かなそうだな・・・」という直感に従い、↑のコースを受講しました。

このUdemyのコースは英語ですが、

・なんども繰り返し説明してくれる
・若い女性の声で聴きとりやすい（Angela先生ありがとう）
・英語だが字幕が出てくる
・結局のところコードはdart言語で書かなきゃいけないので、話し言葉が何語だろうが関係ない
・教材が面白そう（イラスト豊富、作れるアプリたくさん！）
・イギリス英語はアメリカ英語よりも聞き取りやすい！

という理由で↑の講座を選択。
結果から言うとマジで正解でした。

チャットアプリや天気予報アプリなどを作りながら楽しくFlutterを学べます。しかも環境構築から詳しく説明してくれるので、徹底的に躓かないように考えて作ってくれているので、この講座はオススメです。

28時間ほど動画を見終わると、カンタンなアプリなら作れる自信がついてきます。

ロードマップには「英語を勉強しよう」みたいなことが書いてあるんですが、もはやUdemyで動画見ながら英語とFlutterを同時に学ぶのが最も効率的なんじゃないか・・・？と思いました。

僕の英語レベルは英検4級程度。TOEICなんか受けたこともありませんが、特に問題はありませんでした。だって、目的は英語を完璧に理解することではなく、Flutterを難なくかけるようになることだったので。

細かいところで足踏みせず、どんどん進む。
分からないところは自分でググって日本語の資料を探す
（Qiitaにいっぱい転がってる）

このやり方でオールオッケーです。
いきなりトップエンジニアを目指すより、まずは小さな目標達成が大事！👍

だいたい1か月ほどでUdemyの内容をある程度マスターできました。

*ロードマップにも書いてありますが、本はあまり良い教材じゃないです。
動画の方が、コードのどの部分を消して、何を追加しているのかという全体の流れがつかみやすく学習効率が圧倒的に高いので、動画の方がオススメ。


■制作イメージの共有🤝

そもそものオーダーは、↑のようにシェア時に表示されるOGP画像（シェアするときに画像が付いてくるやつ）をその都度生成するシングルページアプリケーションを作りたいというものでした。

アラートさんは自分で文字を文字コードに変換し、そこから色コード（HEX）を生成するというロジックを考えていてくれていたので、まずはどんなデザインにしていくかを情報交換しました。

イメージ共有に便利だったのがAdobe XDです。

Adobe XDは体験版でもかなり綺麗にレイアウトを作ることができます。しかも素早く。今回は実際に手を動かすのが私だけだったので、ざっくりとしたイメージを共有して、Flutterの方で細かいレイアウトを作るという手順を取りました。

シングルページなので複雑なデザインは必要ありませんでしたが、出来上がったものがオーダーのイメージとあまりにも違うと、せっかく発注してくれたアラートさんに申し訳ない。そんな思いからAdobe XDを選択しました。


手書きやパワーポイントで作ると、ページ遷移のイメージがつかめなかったり、レイアウトのバランス感などが一切つかめないので、その情報が無駄になってしまいます。

Adobe XDでは、ページ遷移の設定はもちろん、余白やテキストのサイズ、四角形の角をどのくらい丸くするかなどの情報をあらかじめ設定して、数値をそのまま使えるというメリットがあります。

ボタン

例えば、ボタンの角をどのくらい丸くするか？を考える時、Flutterだけでも数値をいじって確認することは可能。でも、AdobeXDを使ってグリグリ動かしながら設定したあと、その値をFlutterに入れ込む方が何倍も速く実装できます。
さらに、Adobe XDで作ったデザインをそのままFlutterのコードにしてくれるXD to Flutterプラグインもリリースされています。まだリリースされたばかりなので自由自在とはいきませんが、これからはAdobe XDのデザインをそのままコード化して、ロジック部分だけに集中することができる仕組みになるかも！！

カンタンなイメージだけなら5分～10分程度で作れるので、
迅速にイメージを共有するのにとても役立ちました。

その後、アラートさんと相談しながら実装イメージをより良いものに仕上げていきました。

画像3

カラーイメージをどうするのか尋ねると、こんな感じがいいとのことだったので、この画像を参考にデザインを考えます。

本来ならここでAdobe XDを使い、完璧なデザインを作っていくべきなのかもしれません。しかし、イメージの大枠がつかめた今、実際のレイアウトはコードを組みながら調節していく方が効率的と考え、さっそく実装に入りました。

XD to Flutterプラグインの小回りがもう少し効くようになったら、UIの実装をコードでやる時代は本当に終わりが来るかもしれません...!!

推し色 (1)

実際のデザイン↑はこんな感じ。プロのデザイナーのようには行きませんが、イメージさえ固まってしまえば、僕みたいな素人でもキレイっぽくまとめられるのがFlutterの良いところですね！

画像5

あとはブラウザのタブにちっちゃく配置されるfaviconと、アプリをインストールしてくれた人のためのPWAアイコンをPhotoshopで作って設定したら完成です。


■難しかったところ

1.配色を考えるところ🎨

画像6

*開発初期の色。
なかなかきれいな色がでない。

発色はかなり難しく、最後までこだわった部分です。
開発初期は↑のような感じの配色になっていました。

文字コードから色を生成するだけならカンタンなんですが、せっかくならキレイな配色にしたかったのもあって、ロジックは何度も修正しました。

考えれば当たり前ですが、RGBの各値が近い値になると、黒→灰→白のどれかになってしまうので、それを避けるような実装を考えたりする必要があったりと、実装してみないと分からないことがたくさんあるなぁ。。。と頭を悩ませていました。

2.OGP画像を生成するところ⚗️

iOS/Androidアプリなら画面をキャプチャして、画像を取得するのはカンタン。しかしWebアプリとしてリリースしようとすると、ブラウザの方で画像取得に制限がかかるため、単純な手法で画像化するのが困難でした。

したがって、この記事を参考にFlutter側でCanvasを作ってそこにSVGを描画。それをpngデータに変換してデータベースにアップロードするという手順を踏んで何とか実装。（本当はもっときれいに実装できるのかも）

Flutter webはまだβ版。これならイケそうだ・・・という情報を探すのが大変でしたが無事実装できたので良しとしましょう。

3.Firebaseとの連携🔥

通常のiOS/Androidなどのネイティブアプリを作るだけなら、めちゃくちゃカンタンです。FirebaseもFlutterもGoogleのサービスですから、ドキュメントや個人のQ&Aにもたくさん情報があります。よって導入はカンタン。

ただし、Flutter webはまだβ版ということもあり、情報はかなり限られてきます。公式のFirebaseパッケージもWebだけ未対応というのはよくあること。

したがって、JavaScriptを使ったりFlutter側で処理したりと連携する必要があり、ここはかなり難しかったです。どこまでがFlutterでできる部分なのかハッキリせず、とにかくトライ&エラーの繰り返しでした。

ただし、JavaScriptとFlutterで使うDart言語はかなり近い言語なので、そこでの学習コストはほぼゼロ。ちゃんとFlutterを使えれば、このレベルでのJavaScriptは難なく使えることでしょう。

あくまでプログラミング言語の差ではなく、情報を検索する技術（根気）が必要だなぁと思いました。困ったらググる。大事。


✅まとめ

2ヵ月あればシングルページアプリケーションを公開するところまでたどり着けることが証明されました！

大変だったことを中心に書かせて頂きましたが、Udemyの講座で勉強している時から、アラートさんとディスカッションをすすめる時まで、すべてが楽しい経験でした。

プログラミングは覚えることが多いと思っていましたが、スペルなど細かい部分はIDE（エディタ）の方で勝手に補完してくれます。開発に使ったAndroid Studioは本当に優秀です。

Flutter（dart）はウィジットの最後には勝手にコメントを入れてくれるので、可読性が上がる工夫があったりと、かなりユーザーフレンドリーだと思います。作業効率は非常に高く、初心者にはとっつきやすかったです。

こんなひよっこの僕ですが、アラートさんは本業PdMなだけあって、自由にのびのびと僕の実力が発揮できるような環境を整えてくれたのが一番感謝すべきポイント。本当にありがとうございます🙌✨

意思疎通に役立ってくれたAdobe XDにも感謝！

色んなツールを駆使しながら、ものづくりを楽しむ。
頭を悩ませながら、できたものの喜び。
そして、繋がり。

たまらない経験でした！

画像7

🐱‍🏍Twitter：https://twitter.com/hagakun_yakuzai


*反響があったら、Flutterの詳しい入門講座的なものを開こうと考えています。

Flutterは非常に直感的で分かりやすいフレームワークですが、やっぱり英語文献が多いFlutterを学びにくいと感じる人も多いでしょう。初心者が詰まりやすいところを救済していけたら嬉しいな。

何も経験していない素人でも簡単なアプリが作れる幸せをシェアしていきたいと思っています。希望者してくださる方はぜひコメント欄やTwitterに連絡ください。Flutterの記事を書くモチベーションになります！


私の記事は、ほとんどが無料です。 それは、情報を皆さんに正しく、広く知っていただくため。 質の高い情報発信を続けていけるよう、 サポートで応援をお願いします。