📱

Flutterの知識ゼロから始めて2週間で個人開発の禁煙アプリをiOSとAndroidで公開した私の旅

2023/05/25に公開

Android

Flutter

iOS

tech

自己紹介

こんにちは！株式会社クルービットのマイキーです。現在、Webエンジニア3年目です。メインはAWSエンジニアとしてフルリモートで働きながら、空き時間にLaravelを使ったプロジェクトも手掛けています。また、数百枚、将来的には数千枚ものスライドを駆使して新人エンジニアに対する教育も積極的に手掛けています。技術者として新たな領域に常に挑戦することが好きです。趣味は海外の言葉を調べること。現在、17ヶ国の言葉を調べるのに熱中しています。アプリ開発は専門領域ではないのですが、最近個人開発でアプリを2週間でiOS・Androidにリリースする挑戦を行いました！その経験を共有したいと思います。どうぞよろしくお願いします！

アプリ紹介

「Successmoke」－これが私が開発したアプリの名前です。これは、喫煙習慣をストレスフリーに管理するための完全永久無料のアプリです。もちろん、禁煙を考えている人だけでなく、禁煙を考えていない人も利用できます。

Successmokeの独自の特徴は何かと言うと、アプリがユーザーの成功を称え、喫煙の瞬間には軽い後悔感を刺激する点です。これにより、ユーザーは自分の喫煙行動についてより意識的になり、それをコントロールしやすくなるよう設計されています。

また、「Successmoke」はグローバルに展開することを目指し、初回リリースではすでに17言語に対応しています。これからも、より良いユーザーエクスペリエンスを提供するために、アプリの機能と表現を磨いていくつもりです。

「Successmoke」で、節約できたお金をより有意義なものに投資できるようにし、健康的な生活への一歩を踏み出しましょう。

🍏iOSユーザーの方はこちらからダウンロード可能です: Successmoke for iOS

🤖Androidユーザーの方はこちらからダウンロード可能です: Successmoke for Android

アプリを作ろうと思ったきっかけ

世界には約11億の喫煙者がおり、その年間売上は驚くべきことに約148兆円にも上ります。だとしたら、もし喫煙者全員がその量を半分に減らせたら、年間で70兆円もの経済的な節約が生まれ、それが有意義なことに使われるならば、何と素晴らしいことでしょう！

それが「Successmoke」を開発した背景にあります。

私自身も、かつては1日に30本ものタバコを吸っていました。しかし、将来のことを考えると、このままではいけないと感じました。そんな中で、「Successmoke」を使い始めてから、私は自分の喫煙本数を半分に減らすことができました。

もちろん、これはまだ2〜3週間の経験に過ぎませんが、その効果は明らかです。私のTwitterでも、Successmokeの使用結果を定期的に報告していますので、興味があればぜひ覗いてみてください。

そして、このアプリが、世界の喫煙者たちにも同じように助けとなり、我々が節約したお金でより良い世界を作り上げる一助となれば幸いです。

開発環境と開発期間

開発に当たっての環境と期間は以下のとおりです。

開発PC: M1 Mac
テスト用の実機: iPhoneXとAndroidのSO-04J
開発フレームワーク: Flutter 3.7.12
エディタ: Visual Studio Code

開発期間:

アプリの開発: 約1週間
ストアへの公開申請: 約1週間

本来であればゴールデンウィーク中に完了させるつもりでした。しかし、開発にはゴールデンウィーク中とその後数日程度のプライベートな時間のほぼ全てを費やしてしまいました。その結果、妻からは怪訝な視線を浴びせられましたが、それも今となっては良い思い出です。

Flutterの経験となぜFlutter？

私がFlutterを選んだのには、特に深い理由はありません。事実、Flutterの経験は全くなく、書籍を購入したりネットで勉強したりする前に、ただ開発を始めてみました。それは、開発の旅の中で学び、成長するという自分自身の好奇心からでした。それに、手元にはOpenAIのChatGPT-4がありましたから、何か詰まった時にはそれをフル活用して解決策を探しました。

React Nativeは実務での経験がありますが、Flutterが良い評判を得ていると聞き、自分もそれを試してみたいと思いました。個人プロジェクトであれば、新しい技術に挑戦してみることに何のリスクもありません。それどころか、逆に新しい視点や技術の理解を深める絶好の機会となりました。

この経験は私にとって大変有意義なもので、新しい技術に挑戦する勇気と、それを習得するための能力を得ることができました。そして、それによってこのアプリ「Successmoke」が成り立っています。

FlutterとReactNativeどちらがいい？

この質問への答えは個々の開発者やプロジェクトの要件に大きく依存します。私個人の経験と感じたことを元に話すならば、現在はFlutterの方が個人的には好きだと言えます。それはなぜかというと、以下のような理由からです。

まず、コーディング体験について言えば、React NativeはフロントエンドをHTMLに似たような感じで書くのに対して、Flutterはウィジェットという単位でコードを書くスタイルを採用しています。このウィジェットベースのアプローチは、私にとって非常に直感的で、かつ組織的にコードを書くことが可能だと感じました。

加えて、リファクタリングのしやすさについても、私はFlutterの方が優れていると感じました。コードの変更や改良がしやすく、新機能の追加もスムーズで、これが開発体験を一層爽快なものにしています。

ライブラリの追加や設定についても、FlutterはReact Nativeと比較してシンプルで使いやすいと感じました。また、実機ビルドやリリースビルドの手順も特に問題なく、思ったよりもスムーズに進行しました。

しかし、これは私の個人的な経験に過ぎません。両者ともにその長所と短所がありますし、どちらが「ベスト」であるかは具体的なプロジェクトの要件や開発者のスキルセットに大きく依存します。どちらのフレームワークを選ぶべきかは、自身のニーズに最も適合するツールを選ぶという視点から判断することをお勧めします。

各種機能と使用したライブラリ

以下に本アプリ「Successmoke」の各種機能とそれぞれの実装に使用したライブラリを列挙します。

カウントアップ
デフォルト機能を利用しました。
アイコン
使用したライブラリ: cupertino_icons, font_awesome_flutter
紙吹雪演出
使用したライブラリ: confetti
バイブレーション
使用したライブラリ: vibration
ボタンアニメーション
デフォルト機能を利用しました。
効果音
使用したライブラリ: audioplayers
ローカライズ
使用したライブラリ: intl, flutter_localizations, provider
ヘルプ
デフォルト機能を利用しました。
ツイート
使用したライブラリ: url_launcher
グラフ
使用したライブラリ: charts_flutter
保存
使用したライブラリ: shared_preferences
広告
使用したライブラリ: google_mobile_ads（通称AdMob）
アイコン一括作成
使用したライブラリ: flutter_launcher_icons
スプラッシュ一括作成
使用したライブラリ: flutter_native_splash

使用した拡張機能

以下にVisual Studio Codeで使用した拡張機能を列挙します。

ARB Editor: Flutterアプリの多言語化を支援するためのツール。この拡張機能を使うことで、簡単に多言語対応のARBファイルを管理することができました。
Blockman: コードのブロックを視覚的に区切ってくれる。これにより、どのブロックがどの範囲にあるのか一目でわかるようになり、コードの視認性が格段に向上しました。
Better Comments: コード内のコメントを色分けして可視化し、重要なコメントやタスクを見逃さないようにするツール。これにより、TODO箇所へ辿るのがスムーズになりました。
Code Spell Checker: コード内のスペルミスをチェックしてくれる。これにより、タイプミスによるバグを防ぐことができました。
Dart: Dart言語のサポートを提供。コード補完や構文ハイライト機能が含まれており、Dartでの開発を大いに助けてくれました。
Error Lens: エラーと警告をコード上に直接表示してくれる。これにより、エラー解決の効率が大幅に上がりました。
Flutter: Flutterの開発をサポートする公式拡張機能。コード補完、スニペット、エミュレーターの起動などの機能があり、Flutter開発に必須でした。
Flutter Widget Snippets: Flutterのウィジェットを簡単に追加できるスニペット。これにより、コードの記述が早くなり、効率的に開発を進めることができました。
Git History: Gitの履歴を視覚的に確認できる。これにより、過去の変更点を簡単に探すことができました。
GitLens: Gitのブレームアノテーションやログ、変更のハイライトなどを提供。これにより、コードの変更履歴や責任者を一目で確認でき、コードの理解が容易になりました。
Gitmoji: コミットメッセージに絵文字を追加するためのツール。これにより、コミットの意図を視覚的にわかりやすくすることができました。
Trailing Spaces: 不要なスペースをハイライトしてくれる。これにより、コードのクリーンさを維持するのに役立ちました。
vscode-icons: ファイルとフォルダーにアイコンを表示してくれる。これにより、ファイルの種類を一目で確認でき、プロジェクトのナビゲーションが楽になりました。

これらの拡張機能はすべて私の開発環境を整理し、効率的に作業を進めるためのものでした。特にFlutterの開発には、上記のような多くのVisual Studio Code拡張機能が役立つと思います。

開発で大変だったこと

「Successmoke」の開発は、まさに一種の冒険でした。まずは、私の相棒、ChatGPT-4との共同作業から話を始めましょう。彼とのやり取りは、時に疲れ果てるほど混乱させられることもありました。生成されたコードに一貫性が欠け、誤ったライブラリや不正確な使用法のアドバイスが飛び出すこともしばしばでした。それでも、彼がいなければ「Successmoke」はリリースされなかったことでしょう。今では、彼に対する感謝の気持ちでいっぱいです。

さて、次にストア公開までの道のりです。開発完了から公開までに要した時間は、開発そのもの以上でした。公開に向けて必要な情報の準備、それらの設定場所の特定、不明なエラーへの対処など、思わぬ苦労が次から次へと押し寄せました。しかし、それらを乗り越え、最終的に無事リリースできたことは、本当に達成感がありました。

開発のもう一つの大きな挑戦は、17言語対応です。それ自体は、ChatGPT-4のおかげで大幅に負担を軽減できましたが、それぞれの言語に対応したアプリ紹介の文言やスクリーンショットの準備が必要となりました。GooglePlayStoreとAppStore、それぞれに対応した素材作りは、言葉にならないほどの労力を必要としました。しかし、そこに至るまでの一貫した努力が、一層「Successmoke」の価値を高めてくれたと信じています。これもまた、開発の一部であり、挑戦でした。

アプリの使い方

「Successmoke」は誰でも簡単に使うことができます。まずはアプリを開き、自身の使用言語を選択します。これが「Successmoke」の未来永劫、唯一の初期設定となります。

主な操作は、たった2つのボタンタップだけ。喫煙を我慢したときは左側の緑色のボタンをタップ。もし喫煙してしまったときは右側の赤色のボタンをタップします。これだけで喫煙履歴を記録し、禁煙効果を視覚的に追跡できます。

さらに、アプリでは各種の統計を週、月、年単位で確認することができます。これらの統計はグラフ形式で表示され、禁煙効果を一目で確認することができます。

設定画面では各種カスタマイズが可能です。自身の使用言語を変更したり、1日の喫煙本数を変更したりすることができます。これにより「Successmoke」はあなたの禁煙のパートナーとして、よりパーソナライズされたサポートを提供します。

喫煙を我慢した回数を、Twitterにシェアすることができます。これにより、喫煙を抑制するためのモチベーション維持のお役に立てることでしょう。

これらが「Successmoke」の使い方となります。簡単でしょう？

今後の改良内容

「Successmoke」は、ユーザーの皆様からのフィードバックを重視し、より良い体験を提供するために常に改良を続けています。以下に、今後の改良予定をまとめました。

効果音の修正: ミュート設定なのに本体の音量設定を反映して効果音が再生されてしまう不具合、及び外部音声出力装置と接続しているにも関わらず本体から効果音が再生されてしまう不具合を修正予定です。

表示の最適化: OS設定の文字サイズをデフォルト以外のものにすると画面の表示が崩れる不具合を修正予定です。さらに、iPadやAndroidTabletの表示も最適化予定です。

節約額計算機能の追加: 1日の喫煙本数と実際に喫煙した本数から、節約できた額を算出して自分の国で使用している通貨の単位で確認できる機能を追加予定です。

ボタンの演出改善: ボタンを押した時の演出を、よりユーザー体験を向上させるものに変更する予定です。

多言語対応: さらに多くの言語への対応を予定しています。世界中の人々が「Successmoke」を利用して禁煙を成功させる手助けができるように、より多くの言語に対応します。

これらの改良を通じて、皆様の禁煙を更にサポートしていくことをお約束します。

最後に

皆様、ここまでお読みいただき、本当にありがとうございます。私は「Successmoke」を通じて、皆様の禁煙の旅を全力でサポートしたいと思っています。

もしまだダウンロードしていない場合は、ぜひ一度試してみてください。禁煙に成功するための、強力なパートナーになることを約束します。