個人開発

はじめに 先日、初めてReact Nativeを触ってみたというポスト をしました。 まずはAndroidアプリを公開したいと考えており、組織アカウントとして登録するためにDUNS Numberの取得申請中でございます。 （東京商工リサーチで申請し、7営業日程たちますが、まだ音沙汰なしです。。） スマホアプリで収益を得たいと考えていますが、まずは一番ハードルが低そうな広告収入を目指していきます。 今回は、Expoで作ったAndroidアプリに、react-native-google-mobile-adsライブラリを使ってAdMobを設置する手順をご紹介します。 1. AdMobの設定手順 Google AdMobのアカウント作成とアプリ登録 AdMob（https://admob.google.com/ ）にアクセスし、ユーザー登録します。 その後、アプリを追加します。 プラットフォームは「Android」を選択、まだストアにアプリを公開していないので、「いいえ」を選択。 アプリの名前を入力し、「アプリを追加」をクリック。 アプリの作成が完了しました。「完了」をクリック。 広告ユニットの作成 次は、広告ユニットを作成します。「広告ユニットを追加」をクリック。 広告のフォーマットがいくつかあります。起動時に全面表示するものだったり、全部見たら報酬を得られる系のものだったり。今回は、単純に画面の一部に広告が表示されればよいため、「バナー」を選択。 広告ユニット名には、自分で識別できるように適当に名前を付けて、「広告ユニットの作成」をクリック。 広告ユニットの作成が完了したら、アプリIDと広告ユニットIDが表示されるので、コピーしておきます。 （こちらの画像の広告ユニットIDは、すでに無効となっています） 2. Expoアプリへの実装 ライブラリのインストール react-native-google-mobile-adsをインストールします。最新バージョン（v15）をインストールしたところ後続手順でビルドエラーが発生したため、v14でインストールするようにしました。 npx expo install [email protected] app.jsonの設定 react-native-google-mobile-adsをインストールすると、app.jsonに"react-native-google-mobile-ads"の記載が追加されていると思います。 その部分を、以下のように修正します。 [ "react-native-google-mobile-ads", { "android_app_id": "ca-app-pub-6970209880901801~7980726474" // アプリIDを設定します } ] 開発ビルドの作成 広告を使用するには、Expo Goのみでは対応できないので、開発ビルドを行う必要があります。 npx eas-cli build --profile development ビルドが完了したら、表示されているQRコードをスマホで読み取ってリンクに飛び、Installボタンを押してダウンロードおよびインストールを行います。 その後、npx expo startで開発サーバーを起動した上で、アプリを起動しておきます。 広告コンポーネントの実装 実際に、アプリに広告を配置してみます。 アプリの初回起動時に、SDKの初期化を行う必要があるようです。 とりあえずホーム画面においてuseEffectで初回時のみ初期化するようにしてみました。 もしかしたらもっといいやり方があるかもしれません。 参考までに。 ...

はじめに これまでWeb開発を中心に行ってきた私が、新たな挑戦としてスマホアプリ開発に取り組むことにしました。Android StudioやKotlinでの開発経験はあるものの、コード量の多さや学習の難しさから断念した過去があります。しかし、自己啓発と収益化の可能性を考え、まずはAndroidアプリから始めてみることにしました。 技術選定：React Native vs Flutter スマホアプリ開発の主要な選択肢として、React NativeとFlutterが挙げられます。X（旧Twitter）で個人開発者の投稿を見ると、Flutterを採用している方が多い印象でした。しかし、Reactの経験がある私にとっては、React Nativeの方が学習コストが低いと判断し、Cursorと共に開発を始めることにしました。 Cursorに最新のReact Nativeドキュメントを読み込ませて、順に一緒にやってもらいました。余談ですが、今後新しい技術がでてきたら、とりあえずドキュメントを読ませてハンズオンを一緒にやってみるのが一番早いのかなと思ってます。 最新のドキュメントを読んではいたものの、古いコマンドを提案してきていたようで途中でうまく起動せず、結局ドキュメントで最新のコマンドを探して打つという・・（笑）まああるあるですね。 React Native + Expoでの開発の流れ 細かい話は省略しますが、ざっくりと開発の流れを記載します。 1. 初期セットアップ Expoを使用することで、開発のハードルを大幅に下げることができました。VSCodeで開発できる点も大きなメリットです。以前はAndroid Studioが必要でしたが、その重さと待ち時間の長さがネックでした。 プロジェクトの作成は以下のコマンドで簡単に行えます。 npx create-expo-app@latest その後、以下のコマンドで開発サーバーを起動します。（tunnelオプションを付けないとExpo Goアプリがブルースクリーンになりました） npx expo start --tunnel 驚くほどReactと開発体験が似てますね。すばらしい。 2. Expo Goでの開発 そしてExpo GoアプリをGoogle Play ストアから探してインストールします。 （Expoでアカウント登録もしました） npx expo start でターミナルに表示されたQRコードを、Expo Goアプリから起動したスキャナで読み取ると、デフォルトアプリが動き出します。 コードを修正すると、ホットリロードでスマホ側に即座に修正が反映されます。 以前は、実機で確認するには毎回ビルドして転送コードでファイルを転送して、というのが必要だった記憶があるので、スピーディーにできるようになりましたね。 開発自体も、コンポーネントをどんどん配置していくという流れがReactの開発と非常によく似ています。これほどスムーズにWebアプリ開発からスマホアプリ開発に移行できるとは。食わず嫌いせずにもっと早くやってればよかったです。 実際の仕様決めやコード実装は、生成AIと協働で進めていきます。まずはシンプルなアプリを作って公開するまでの一連の手順を経験してみたいと思います。 3. 開発ビルドの作成 ある程度開発が進んでくると、Expo Goだけでは対応できなくなってくるので、ちゃんとビルドして実機で動かせるようにする必要があります。 ドキュメントでは、唐突に「Development Build」を作る的な話になるので、最初は混乱しました。 要するに、Expo Goアプリというのは、Expoの開発体験をお試しできるように作られた、プレビュー用のアプリという位置付けのようです。 標準的な機能しか対応しておらず、ちょっとコミいったことをしようと思ったら、改めてビルドして実機にインストールして動作させる必要があります。 開発ビルドをゲットするには、プロジェクトにexpo-dev-clientライブラリを追加した上で、EASというビルド用のツールを使います。 下記コマンドにより、Androidアプリの開発用にビルドを作成できます。 eas build --platform android --profile development ビルドの時間は10～15分程かかりました。 ビルドが終了したら、スマホでExpoの開発者ページに飛んでファイルをダウンロードして実行すると、勝手にインストールが開始されます。 （ビルドは時間が長いので、途中でターミナルを閉じても問題ないようです。しばらくしてからExpoの開発者ページに飛べば、インストールのボタンが表示されています。） 開発ビルドを動作させるには、Expo Goと同様、起動コマンドが必要になります。 ...

タロット占いアプリ 🔗 アプリへのリンク かねてより興味があったタロット占いのアプリを作ってみました。 1枚でサクッと占ったり、10枚でじっくり占うこともできます。 このアプリを作った経緯としましては、最近うちの子供がタロット占いにハマっておりまして、カードの意味を覚えたり、カードを組み合わせてどのように解釈するか、といったところの練習になるといいなと思い開発しました！ アドバイスの部分は、生成AIを使って自然な文章で提案してくれるようにしました。 技術的なこと 以前公開したタイピング練習用のアプリ の基本構成と同じ、Next.js＆Cloudflare Pagesを採用しています。 ほどんと同じなので、異なる部分のみ記載したいと思います。 ちなみにこちらは現時点（2025年3月末時点）のものであり、まだまだ改善点がありますので変わる可能性ありです。 Next.jsのAPIルート タイピング練習用アプリ においては、フロントエンドのみの構成でした。 今回のアプリでは、生成AIのエンドポイントをたたく必要があったため、セキュリティのためにAPIルートを使用しました。 Cloudflare Pagesにデプロイすると、自動的にCloudflare Functionsとして動作させることができました。 ただ途中、ビルドがうまく通らなかったので、Next.jsのバージョンを15→14に落としました。 Cursor（AIコードエディタ） 月$20の課金をして、Cursorを導入してみました。 ものすごい速さで画面を作り上げてくれて、驚愕です。。 結構メンタルやられるレベルで速いですねww バージョンは0.47.8を利用。 直近アップデートがあり、これまではComposerとChatが分かれていたところのUIが、統合されたようです。 チャットでのやり取りの中で、適宜Agent（自動でコーディングしてくれるモード）とAsk（質問モード）を使い分けられるようになっています。コンテキストが分断されることなく使い分けられるのがとてもいいですね。 生成AI（Gemini2.0 Flash Lite） 初めて自作アプリの中に生成AIを組み込んでみました。 今のところは無料枠で全く問題ないです。 使ってみた感想としては、ドメイン制限やレートリミット、入力文字のサニタイジングなど、結構考えることが多かったです。 普段の業務では、組織内で使うアプリに組み込む程度で、悪意を持ったプロンプトへの対応を想定していないことが多いため、勉強になりました。 まとめ タロット占いアプリ を公開しました。 Cursorを使った開発の速度は爆上がり！！ アプリに生成AIを積極的に組み込んでいきたいです。

新しく作りたいアプリについて 先日、タイピングアプリ をリリースしました。 こちらはこちらでまだ改善の余地ありですが、新しくアプリ作っていきたいと思います！ うちの子どもたちが、昨年から家庭内で会社を立ち上げまして、親を相手に商売を始めました( ´∀｀ ) お手伝いチケットを紙で手作りして、何枚かつづりで売ってくれます。 例えば、「マッサージ10分券を10枚つづりで〇円」、「夕食作り代行券を5枚つづりで〇円」、のような感じです。 親としてはとても助かってます✨ 子どもとしても、前金でお金を受け取れるのでモチベーションが維持できるみたいです。 趣味でほしいものがあったら、あのお手伝いを〇回すれば買える・・のように逆算できるので良いですね。 ただ、チケットを作ったり授受したりするのが徐々に（お互いに）面倒くさくなってきたので、電子化したいという娘からの要望でした。 できれば通知機能とかを備えたスマホアプリ化したいのですが、一旦はMVPを備えたWebアプリとして実装してみたいと思います。 （スマホ用アプリは、テスト的に作ったことはありますが、実際にストアにリリースしたことはありません。おいおいやっていきたいです！） データベースを選ぶ 前回のタイピングアプリではデータベースを使用しませんでした。 今回作るアプリではデータベースが必要になります。 一旦は家庭内で使うだけだけど、よさそうなら一般公開できると嬉しい。 個人開発で無料から始められるデータベースサービスをいくつかピックアップしてみました。 Firestore（FirebaseのDB） 以前使ったことがある。・・が、NoSQLのツボをいまいちつかめなかった記憶がある。 Supabase Firestoreの代替サービスという位置づけらしい。最近はこちらの方が人気がある模様 RDBが使えるので違和感なく使えそう Neon PlanetScale（以前無料で使えてた）の代替として使っている記事がいくつかあった Cloudflare D1（CloudflareのDB） SQLiteベースのデータベース。 SQLiteとは、単一のファイルにどんどんデータを書き込んでいく方式のDB。簡易利用向け Cloudflare D1を使ってみる アプリをCloudFlare Pagesにデプロイしようと思っているので、まずは相性のよさそうなCloudflare D1を使ってみようと思います。 SQLiteは以前軽く学習目的で触ったことがあって、その時はあまり意識してなったのですが、実際にアプリに組み込もうと思うと結構制約が出てきそうです。 大規模な集計ができなかったり、同時並行で読み書きができなかったり、あたりでしょうか。 実際に無料枠で使ってみて、支障があるなら別のサービスに切り替えるようにしてみます。 課金体系と無料枠について D1の使用料金は、読み書きの行数（レコード数）と、保存されているデータの容量で決まるようです。 また、制限を超えるとクエリが実行できなくなって、課金すれば制限を解除できるとのこと。 途中で勝手に課金が始まる訳ではないのは良いですね。 無料枠は以下の通り。 読み取り行数：500万/日 書き込み行数：100,000/日 ストレージ：5GB 読み取り行数は、スキャンが走ったレコードの件数がカウントされる。1000件のレコードが入ったテーブルをフルスキャンすると1000とカウントされ、結合などでスキャンが走るとその件数分カウントされる。 適切にインデックスをはると節約できるようですが、インデックス更新は書き込み件数にカウントされる、と。 最初は慣れるまで時間かかるかな。実際にテーブルいくつか作ってみただけで何回かクエリ発行されてました。 実際に作ってみる 実際にDBとテーブルを作ってみました。 Cloudflareダッシュボード、「ストレージとデータベース」→「D1 SQLデータベース」→「作成」でデータベースを作成。 名前を入れるだけで作れました。 次にDBの中にテーブルを作成します。 列の型（タイプ）では、以下の4つしか選べませんでした！ text（文字列） integer（整数） real（小数） blob（ファイル類） 日付とか、真偽値とか、もろもろtextに突っ込む形のようです。SQLiteってこんな感じなのね～。 これをPagesとかWorkersとかで使うとかなりシームレスに使えるのかな？ 大きな支障がない限りはこのまま進めてみます。 次回へ続く。

まじめに学ぶタッチタイピング 🔗 アプリへのリンク 🔗 アプリに対する思いはこちらに記載しました。 このアプリは、子どもたちにタッチタイピングを効率的に習得してほしいという思いで開発しました。 必要最低限の内容で、スピーディーに学ぶことができます。 ここでタッチタイピングを習得したら、寿司打のスコアもアップするかも！？ 技術構成 アプリを公開するにあたり、以下の技術を使用しました。 開発環境・使用言語 Visual Studio Code Next.js TypeScript App Router Tailwind　CSS 今回はフロントエンドのみの構成としました。 ソース管理 Github デプロイ Cloudflare Pages Githubのブランチを指定すると、自動でビルド＆デプロイまでしてくれます。 今回初めて使いましたが、非常に便利です！！ 個人レベルでは無料プランで十分です。 ビルド回数が月500回までの制限があるので、そこだけ意識しています。 デプロイ先の選定にあたっては、以下を考慮しました。 商用利用できること（広告はったりしたい） 無料プランだと商用利用できないところが多い。 従量課金ではなく定額であること いつの間にか金額が増えてた！を気にしたくない。 上記の条件を満たしていれば課金しても良かったのですが、無料プランで対応できたのはありがたいです。 ドメイン取得 Cloudflare Register 今後アプリ増やしていきたい思いですが、アプリごとにドメインをとるか、サブドメインで分けて増やしていくかは悩んだところ。 一旦はサブドメインを増やしていくこととし、評判良いものができたら切り出してアプリ固有のドメインをとる方向でいくことにしました。 長く使っていく想定なので、ドメインを原価提供してくれているCloudflare Registerを利用することとしました。 アクセス分析 Cloudflare Web Analytics Hotjar アクセス分析=Google Analytics の頭でいましたが、Cloudflare Web Analyticsというものを知り、そのまま使うこととしました。 こちらはあくまでサーバー側に届いたリクエストを分析するというものなので、Google Analyticsと得られる情報は異なるようです。 とりあえずPV数など簡易な情報が得られればよいので、採用することにしました。 Hotjarは、画面レコーディングやヒートマップ（画面のどこが頻繁にクリックされるか等）などを提供してくれるサービスです。 その他 今回、認証やDBは使用していません。ユーザー登録なしのシンプル構成としました。 アプリ内のメニューをどこまで進んだかを保存するために、ローカルストレージを使用しています。 ChatGPTにコード生成を助けてもらってます。課金はせずに、ブラウザの無料版のみ使用。課金するタイミング完全に見失ってる。 画面のスケッチとかはしないタイプの人間です。実装しながら画面作ってます。 アプリの中で使っている画像については、娘にお絵描きしてもらいました。 所要時間 2024年の年末あたりから着手し始め、お正月にぼちぼち開発していたのですが、公開までには全部合わせて1ヵ月くらいでした。 アプリの開発自体はAIが助けてくれたので比較的スムーズに行きましたが、デプロイ先の選定や、周辺で使うサービスの選定などに少し時間をかけました。 今後について ちゃんと生成AIに課金して、アプリ作ってもらうのを試したいですね。 以下、試してみたいプロダクト。 Cursor(カーソル) VSCodeからフォーしたエディタで、会話しながらコードを修正してくれる模様。 対象のソースを指定して、これに対して修正してという指示ができるのは便利そう。 ...