Webエンジニア向けプログラミング解説動画をYouTubeで配信中!
▶ チャンネル登録はこちら

【ITニュース解説】NaturalDex: Building an Offline-First Nature Collection Game During Hacktoberfest 2026

2026年10月12日に「Dev.to」が公開したITニュース「NaturalDex: Building an Offline-First Nature Collection Game During Hacktoberfest 2026」について初心者にもわかりやすく解説しています。

作成日: 更新日:

ITニュース概要

NaturalDexは、屋外での自然探索を促すオフライン対応の収集ゲームだ。ユーザーは植物などの写真を撮り、ローカルAIで種を特定し、プライバシーに配慮した図鑑に記録できる。このモバイルファーストなWebアプリは、Hacktoberfestプロジェクトとして開発された。

ITニュース解説

現代社会では、スマートフォンやパソコンの画面を見る時間が多く、屋外での活動や自然との触れ合いが減少しているという問題がある。このような状況に対し、「NaturalDex」というアプリケーションが開発された。このアプリは「Touch Grass(自然に触れよう)」という考えに基づき、ユーザーが外に出て自然を探索し、学びを深めることを促すことを目指している。このプロジェクトは、Hacktoberfest 2026という開発イベントの中で、アウトドア探索のアイデアを、プライバシーを重視し、機能するアプリケーションとして具体化する取り組みとして進められた。

NaturalDexは、屋外での観察をゲームのように楽しめるコレクションアプリだ。ユーザーは、外出先で出会った植物、動物、菌類などをスマートフォンで3枚の写真に収める。これらの写真は、ユーザー自身の自宅にあるパソコン(これを「ホームベース」と呼ぶ)上で動作するAI(人工知能)プログラム「Ollama」によって、それが何の種であるかを識別される。識別された種の情報は、図鑑のように整理された「フィールドジャーナル」に追加され、ユーザーは自分だけの発見した種カードをコレクションしていく。このゲームを通して、外での探索が楽しくなり、地域の固有種を特定したり、自然に関する知識を深めたりすることが促される。

このシステムの全体像を見ると、大きく分けて四つの主要な部分で構成されている。一つは、ユーザーが直接操作する画面部分である「フロントエンド」。二つ目は、フロントエンドからの要求を受け取り、データの処理やAIとの連携を行う「バックエンド」。三つ目は、各種データを保存する「データベース」。そして四つ目は、写真から種を識別する「AIコンポーネント」だ。これら全てが連携し合い、ユーザーに一連の体験を提供している。

開発に使われている技術も多岐にわたる。ユーザーインターフェース(UI)を作るフロントエンドには、モダンなウェブ開発で広く使われるJavaScriptのフレームワーク「React 18」が採用されており、開発効率を高めるために「Vite 6」というビルドツールが使われている。デザインには、柔軟で効率的なスタイリングを可能にする「TailwindCSS v4」が使われている。バックエンドには、Python言語で書かれた高性能なWebフレームワーク「FastAPI」が採用され、データモデルの定義には「Pydantic v2」が使われている。データベースとのやり取りを簡単にするために「SQLAlchemy 2.0」というORMツールが使われ、データはファイル形式の軽量データベース「SQLite」に保存される。AIによる画像認識は、自宅のパソコンで動く「Ollama」というローカルAIソリューションが使われ、特に「llava-phi3」のような画像認識モデルが利用されている。ユーザー認証には「JWT(JSON Web Tokens)」と、パスワードを安全に保存するための「Argon2」というハッシュ関数が使われ、これらはHttpOnlyクッキーに保存されることでセキュリティが強化されている。

NaturalDexの特に重要な特徴は、「プライバシーファースト」と「オフライン対応」という設計思想だ。多くのAI画像識別サービスは画像をクラウドに送信するが、NaturalDexではユーザーの画像データを外部サーバーに送らず、全てをユーザーのホームベース(自宅のパソコン)で処理する。これは、Ollamaをホームベースにセットアップし、必要なAIモデルをダウンロードして実行することで実現される。モバイルデバイスとホームベースはQRコードを使って連携するため、インターネット接続が不安定な場所でも、写真撮影や既に同期された図鑑の閲覧といった基本機能はオフラインで利用できる。AIによる画像識別自体はホームベースでの処理が必要だが、発見した種の情報は一度同期されればオフラインで確認できるため、ユーザーはプライバシーを気にせず安心して自然探索に集中できる。

開発の過程ではいくつかの技術的な課題も生じた。一つは、ユーザーが撮影した3枚の写真をAIに渡し、正確な種名や科学名、識別精度などの情報をJSON形式で出力させることだった。また、ユーザーが画像認識に対応していないAIモデルを使っている場合に備え、バックエンドで厳密なデータの検証(バリデーション)を行い、適切なエラー処理を実装する必要があった。 もう一つの課題は、モバイルデバイスとホームベースのネットワーク連携だった。スマートフォンがモバイルデータ通信を使っている場合、自宅のWi-Fiネットワーク内のパソコンと直接通信するのは難しい。この問題を解決するため、QRコードを使ったペアリングフローを設計し、必要に応じて「ngrok」というツールを利用して、モバイルデバイスから自宅のパソコンに安全にアクセスできるようにした。 また、ユーザーが写真を複数回アップロードした際に、図鑑の登録や経験値(XP)の付与が重複しないように「冪等性」を確保することも重要だった。これは、バックエンドで各観察にユニークなIDを付与し、すでに処理済みのものとして識別する仕組みを導入することで解決された。 開発スコープの管理も重要な課題だった。最初から完全なネイティブモバイルアプリを目指すのではなく、まずはWeb技術でネイティブアプリのように動作する「PWA(Progressive Web App)」として、核となる識別と収集の機能を完璧にすることに焦点を当てた。これにより、開発範囲を適切に管理し、品質の高いプロトタイプを効率的に構築することができた。

アプリケーションの安定性と信頼性を確保するために、多岐にわたるテストが実施された。バックエンドのAPIエンドポイント(ユーザー認証、発見情報、コレクション、日課タスク、ホームベース連携など)に対しては、「Pytest」というPythonのテストフレームワークを使った自動テストが行われた。AIによる画像識別におけるポリシーチェックも行われ、低品質な画像や複数枚の写真が不一致であった場合にバックエンドが適切に拒否するかどうかが検証された。データベースとORMに関しても、ユーザー、カード、種別、経験値イベントなどのテーブル間の関係性が正しく機能しているかを確認するテストが行われた。最終的には、異なるモバイルデバイスでのカメラ機能、画面表示、QRスキャン機能などが意図通りに動作するかどうか、手動でのクロスデバイスUXチェックも行われ、ユーザー体験の品質が確保された。

今後の展望として、NaturalDexにはさらなる改善の余地があると考えられている。将来的には、より高度なカメラ制御やパフォーマンス向上のために、フロントエンドを「React Native」や「Expo」といったネイティブモバイルアプリケーションに変換することが検討されている。また、電波の届かない場所での写真投稿に備えて、オフライン中に撮影した写真を一時的に保存し、オンラインになった際に自動で送信する「オフラインキューイング」機能の追加も視野に入っている。 このプロジェクトを通じて、開発者は多くの学びを得た。AIアプリケーションの開発は単にAPIを呼び出すだけでなく、ローカルのハードウェア制約、堅牢なデータ検証、ユーザープライバシーの保護、そして効果的な状態管理といった多岐にわたる要素を統合する「オーケストレーション」が必要であることを痛感した。また、AIを活用した開発支援ツールを使う中で、エンジニアリングマネージャーのように具体的で明確な制約を与えてプロンプトを作成することが、より優れたアーキテクチャとクリーンなコードを生み出す上で非常に重要であることも学んだ。NaturalDexは、現代社会の問題に対し技術で解決策を提供するユニークなプロジェクトであり、システムエンジニアを目指す人にとって、その開発プロセス全体から多くの示唆を得られるだろう。

関連コンテンツ

関連IT用語

関連ITニュース