バックエンドエンジニアが個人開発した話 (Go+Flutter+React with GraphQL)
はじめに
この記事は、バックエンドエンジニアとして仕事をしている著者が、個人でサービスを作った記録です。
使用している技術は以下になります。
- Go (gqlgen) - バックエンド
- TypeScript (React) - フロントエンド
- Dart (Flutter) - モバイル(ios, Android)
- GraphQL - API
- Firebase - 認証
- MySQL - DB
- ConoHa - サーバー
- GCS - ストレージ
- CLIP STUDIO - 画像編集
土日を中心に、気が向いたら平日の夜も書く、という時間の使い方をして、ブラウザで動くようになるまでに1ヶ月、アプリを作るのに２週間 (Appleとのやり取りで更に2週間)程度かけて作りました。
iosの審査が終わって公開されたので、今は「これから何をしようかな」と考えているところです。
作ったもの
Rabbytという、デジタルキャンバスサービスを作りました。
タブレットやスマホに全画面表示で絵を表示することで、「絵を買わなくても絵を飾れる」サービスです。
有名な画家や名画を用意していて、壁にかけたりスタンドを使ったりすることで簡単に絵を飾ることができます。
また、Twitterでいいねした画像を表示することも出来るので、イラスト収集用のアカウントを持っている人にはこちらがおすすめです。
作ろうと思ったきっかけは在宅での仕事が基本になったことです。
コロナが始まってから家で仕事をしているのですが、いつも同じ壁を見ているのに飽きてしまい、「なにか絵でも飾ろうかな」と考えていた時に、「絵を買う代わりにタブレット使えば、色々な絵を見れるな」と思ったのですが、そういうサービスが見つからなかったので作りました。
公開するまで
難しいことをしたいわけではなかったので、作りはじめる前は「ブラウザを使ってフルスクリーンで表示すれば速攻で出来る」と簡単に考えていました。
そのため、深く考えずに、趣味で常用しているGoを使うことにしました。
フルスタックフレームワークの方が効率が良いですが、仕事でフルスタックな構成を使うことはもう無いと思っているので、フロントエンドとバックエンドは分離しました。
また、最近はバックエンドを頑張らなくても簡単に作れるツールが色々ありますが、バックエンドが好きでプログラムを書いているので、そういうのは使っていません。
フロントエンドに関してはよくわからないので、流行っているReactを使っています。
ReactにするならNext.jsにも手を出そうかな、とも思いましたが、色々手を伸ばすと大変なので、そこまでは手を出しませんでした。
ただし、環境構築を一からやるのは面倒なのでViteを使っています。
で、バックエンドとフロントエンドを分離したので、APIにはGraphQLを使うことにしました。
RESTでも問題は無いですが、最近の流れを見るに、フロントエンドとの通信に使用するのはGraphQLが多数派になる(なっている)だろうなと思っているので、それ用にGoはgqlgen、TypeScriptはApollo clientとgraphql-code-generatorを入れました。
gqlgen以外にもGraphQLには色々を扱えるものはありますが、他との連携に使用する仕様をコードから起こすのは嫌いなので、スキーマファーストなgqlgenにしました。
gqlgenを使うのであればGoに大きなフレームワークは必要ないので、Goではgorilla/muxとgorm、sql-migrateを入れてお茶を濁しています。
認証にはFirabase Authenticationを使っています。
自分で認証を作る気は無かったので、気に入っているFirebase Authenticationを選びました。
サーバー側でのユーザーの識別の時にFirebaseのJWTをそのまま使うか、Firebaseの認証結果を基にサーバー側でCookieを発行するか悩みましたが、今回は「ユーザーを拒否したくなったら、サーバー側でユーザーを無視するようにすれば即時に拒否できるから、そこまで頑張らなくてもいいかな」と考えてJWTをそのまま使っています。
サーバーにはConoHaを使っていますが、ConoHaに強い思いがあるわけではなく、元々持っていたものを使い回しているだけです。
クラウドを使うならGCPかなと思っていますが、小規模サービスにクラウドは高いのでVPSで済ませています。
最初は画像もgitに突っ込んでサーバーから配信していましたが、画像が1Gを超えたあたりでGCSに切り替えました。
ここまで決まれば後は作るだけなので、適当に作りました。
作るのは慣れているので、コード自体は大変ではなく、どちらかといえば、アイコンや素材づくりの方が面倒でした。
元々クリスタを持っていたので、クリスタを使ったのですが、OSの行き来が大変でした。
普段はUbuntuを使っているのですが、クリスタはUbuntuに対応していないので、クリスタを使う時はWindowsを使っています。そのせいでWindowsとUbuntuを何回も行き来する必要があり萎えそうになったのを覚えています。
モバイルに手を出す
そうして無事に公開でき、落ち着いていたのですが、「iphoneやipadを使うとブラウザをフルスクリーンにしてもボタンが隠れないので、フルスクリーン感が出ない」という話を聞きました。
これにはかなりイラッとしたのですが、アプリに手を出す良い機会かな、と思いアプリ版も作ることにしました。
ただ、Appleの製品を何も持っていなかったので、買うことから始めました。
動作確認やビルドのためだけに高いものを買う気にはなれなかったので安いのを探したのですが、結果的にはAppleのDeveloper Programも含めて、13万弱かかりました。
買ったのは以下です。
- iPhone 8
- iPad (第7世代)
- Mac mini (2018)
最初は「Codemagicを使えばMacは買わなくてもいいかな」と考えていましたが、Codemagicの設定方法が「Xcodeの設定をコマンドラインで代替する方法」のような話ばかりで何をしているのか全く理解できず、諦めてMac miniを買いました。
Codemagicは、リリースが安定して、自動化したくなった時に出番が来るかなと期待しています。
アプリに関して、流石にAndroidとiOS用に2つ作る気力は起きなかったので、クロスプラットフォームで作ることにしました。
ただ、アプリの事は全くわからないので、適当に、ブームになっていそうなFlutterを選びました。
FlutterにはUIがAndroid風(Material)とios風(Cupertino)の2種類が用意されていますが、
- iosのためにアプリを作りはじめた
- 日本はiosのほうが強い
ことから、Cupertinoを使うことにしました。
Flutterについてはレイアウト方法がHTMLと違ったり、Androidやiosの仕様を把握していないと理解できない機能があったりと、勝手が違う部分もあって戸惑いましたが、概ね順調に出来たかなと思います。
この頃に苦戦したのもやはり素材づくりで、アプリ自体に使うものだけでなく、マーケットのための画像も用意する必要がありました。
ios用の画像を作っている時には、MacとWindowsとUbuntuを行き来した上、机には液タブとキーボード2つにマウス2つを置いている状態で、かなり大変でした。
そのような感じでアプリを作り、幸いなことに審査では大した指摘はされませんでした。
で、無事に公開出来るかな、と思っていたところ、Apple Developerのアカウント名に本名を使っていなかったせいでアカウントに入れなくなり、やり取りに2週間かかりました。
それが解消して、ようやく、今、公開されています。
作り終わって気づいたのですが、Androidを使っていてもブラウザよりアプリの方が使いやすいので、アプリを作ってよかったなと思っています。
これから
「絵を買わなくても絵を飾れる」という当初の目的は出来たので、これからは「絵を探すのが面倒くさい」という問題に対応しようと思っています。
今はArtveeなどを使って、画像を手作業で集めているのですが、探すのが大変なので手間をかけずに画像が集められるようにしたいと思っています。
具体的には、ユーザーが投稿できるようにしたり、サイトの巡回を自動化したりするように出来ればな、と考えています。
せっかく作ったので、よかったら、アプリを一度使ってみてください。
以上、Rabbytを作った記録でした。
Discussion
良記事ありがとうございます！！