Welcome ! 👋

はじめに これまで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 その後、必要なパッケージをインストールし、開発サーバーを起動します。 npm install 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の開発体験をお試しできるように作られた、プレビュー用のアプリという位置付けのようです。 標準的な機能しか対応しておらず、ちょっとコミいったことをしようと思ったら、改めてビルドして実機にインストールして動作させる必要があります。 ビルドをするには、EASというビルド用のツールを使います。 下記コマンドにより、Androidアプリの開発用にビルドを作成できます。 eas build --platform android --profile development ビルドが終了したら、スマホでExpoの開発者ページに飛んでファイルをダウンロードして実行すると、勝手にインストールが開始されます。 （ビルドは時間が長いので、途中でターミナルを閉じても問題ないようです。しばらくしてからExpoの開発者ページに飛べば、インストールのボタンが表示されています。） ビルドの時間は10～15分程かかるのですが、こちらも基本的にはコードを修正したらホットリロードでリアルタイム反映されるので、開発体験としてそれほど変わりません。 なので、一度Expo Goでの開発を経験したら、次回からは最初からDevelopment Buildを使って開発を進めるでもいいかなと思いました。 ...

タロット占いアプリ 🔗 アプリへのリンク かねてより興味があったタロット占いのアプリを作ってみました。 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を積極的に組み込んでいきたいです。

最近、Cursorというエディタを使い始めたので、その感想を少し書いてみます。 Cursorとの出会い これまでAIツールに課金することにあまり積極的ではなかったのですが、Cursorの2週間無料体験を試してみたところ、思いのほか便利で、そのまま課金してProプランに移行することにしました。 すごいのはCursorというよりClaude 3.7 Sonnet 実際のところ、Cursorそのものよりも、裏で動いているClaude 3.7 Sonnetの性能に驚かされます。このレベルのAIを定額で使えるというのは、開発者にとってはありがたい限りですね。 文脈理解力について コードの文脈をよく理解して、適切な提案をしてくれるのが印象的です。要件を伝えるだけで、それなりに使えるコードを出力してくれることも多いです。将来的には要件定義の部分までAIがサポートしてくれるようになるかもしれません。 現状は、新規開発はとても良いけど、既存コードがある場合の改修ではまだ人間の出番はありそうです。（複数の情報ソースを照らし合わせて仕様の整合性を保つなど） 生産性と疲労のバランス Cursorを使うと確かに開発は早くなります。ただ、実際にガッツリ使ってみると思いのほか脳が疲れます・・・。 AIが次々と情報やコードの提案を出してくれるのですが、それを確認して選別するだけでも結構な労力が必要になります。 1日中Cursorを使って開発していると、翌日はちょっと休みたくなるくらい疲れることがあります。情報が多すぎて頭が追いつかなくなる感覚ですね。 働き方の変化 この体験から、古代ギリシャの社会構造を思い出しました。昔は奴隷が労働をして、上級階級の人々は思索に時間を使っていたわけですが、AIの発展で私たちも単純作業から解放され、もっと考えることに集中できる時代が来るのかもしれません。 ただ、今はまだその過渡期で、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からフォーしたエディタで、会話しながらコードを修正してくれる模様。 対象のソースを指定して、これに対して修正してという指示ができるのは便利そう。 ...

ブログを始めます。 以前、WordPressでブログを書いていたことがあります。 次第に書く頻度が落ちてきて、サーバー代払うのがもったいなく感じるようになったのでやめてしまいました。 今回は、維持費を抑えてまた再開してみます！ 構成要素 以前のブログでは、Xserverでドメイン＆サーバーを取って、WordPressを動かしていました。 今回の構成では以下を使用しました。 Hugo（静的サイトジェネレーター） PaperMod（Hugoのテンプレート） CloudFlare Pages（ビルド＆ホスティング） Github（ソース管理） CloudFlare Register（ドメイン取得） 以下、それぞれの構成要素について詳述します。 Hugo 以前のWordPressではDBとPHPサーバーが必要となるので、ちょっとオーバースペック気味でした。今回は簡単に作りたい。 後述のCloudFlare Pagesで動かしたい。 マークダウンで書けると嬉しい。 上記のような理由から適切な手段を探していたところ、静的サイトジェネレーターというものを見つけました。 マークダウンファイルから事前にHTML化しておいて、リクエストがきたらそのページを表示するだけ、という仕組みのようです。 WordPressのようにリクエストに応じてDBアクセスしてその場でページを作り上げる仕組みと違い、表示速度が速いようです。 シンプルで分かりやすくてよさそう！！ いくつかあるものから、Goでできていてビルド速度が速いと評判のHugoを使ってみることにしました。 Hugoではテンプレートが多数用意されているので、好きなものを選びます。 PaperMod いくつもあるテンプレートの中から、PaperModというものを選んでみました。 このテンプレートの選んだポイントは以下の通りです。 Githubのスター数を見て、人気が高めだった。 Githubで最終更新日が新しめで、長く放置されていない。（人気があってもすでに公開停止されているものが結構あった） カテゴリー表示やタグ表示など、必要十分の機能を備えていた。（テンプレートによってはカテゴリー表示やタグ表示に対応していないものもあるようです） CloudFlare Pages こちらは既に個人開発のアプリで利用しており、簡単にデプロイできることが分かっているため是非使いたいということで採用しました。 無料枠の中で十分使用できています。 Github こちらは定番。 CloudFlare PagesはGithubのリポジトリとブランチを選択するだけで、自動的にビルド＆デプロイができます。 また、ブランチに変更があったら自動的に最新化してくれるため、CI/CDを個別に書く必要なし！ ありがたすぎる。 CloudFlare Register 今回はここだけ課金してます。 最近、ドメイン代がどんどん高くなってますよね・・。 CloudFlare Registerではドメインを原価提供してくれているそうです。 他のドメイン管理サービスではキャンペーン価格で初年度無料などあるため単純に比較はできないのですが、長く運用するとしたらそんな大差ないだろうと、こちらを選びました。 サービスをまとめた方が運用がラクかなとも思いました。 お名前ドットコムでも別のドメイン持ってますが、正直、サイトが見づらくてあまり好きではないです。 最近の興味・関心 前からずっとやってみたかったこととして、個人開発にチャレンジしてみようと思ってます。 生成AIが登場し、個人での開発はだいぶハードルが下がってきた印象です。 加えて気軽に使えるBaaSなどお仕事の中で使う機会が増え、自信がついてきたというのもあります。 今年から業務の稼働時間を減らしたので、空いた時間でちょこちょこ開発していきたいと思います。 ライスワークとライフワーク、バランスよくいきたいですね。