【ITニュース解説】Escuchar Primero, Programar Después: Case Study de una App Odontológica

このニュース記事は、ある歯科医が抱えていた業務上の課題を、最新のデジタル技術を駆使したアプリケーション開発によってどのように解決したかという、実践的なケーススタディを紹介している。システムエンジニアを目指す皆さんにとって、顧客のニーズを深く理解し、それを具体的なソフトウェアとして実現していく過程は非常に参考になるだろう。

このプロジェクトのきっかけは、歯科医が日々の業務で使う「odontograma（オドントグラム）」、つまり歯の状態を記録するデジタルシステムに不満を持っていたことだ。従来のソフトウェアは操作が難しく、柔軟性がなく、また患者管理に使っていた「Airtable」というデータベースシステムとの連携もできなかった。歯科医は、歯の状態を正確に記録し、管理するための、もっと使いやすく、既存のシステムと連携できる新しいツールを求めていた。開発チームは、この歯科医の要望に応え、強固で使いやすく、将来的な拡張性も考慮された歯科アプリを開発することになった。このプロジェクトの最大のテーマは「Escuchar Primero, Programar Después」（まず聞いて、それからプログラムする）であり、開発が始まる前に顧客である歯科医の業務フローを徹底的に理解することに重点が置かれた。

開発チームはまず、歯科医と何度も話し合いの場を持ち、実際の業務の流れを観察した。このヒアリングによって、従来のシステムで特に不便だった点や、新しいアプリに本当に必要な機能が明らかになった。具体的には、普段使い慣れた感覚で操作できる直感的なインターフェース、歯の表面レベルでの正確な記録（FDIシステムに基づく）、歯ごとのメモ機能、治療の有無を示す二重の注釈レイヤー、そしてAirtableや「Softr.io」といった既存システムへの簡単なデータ連携が求められた。特に、新たなアプリの導入によって歯科医が特別な学習をすることなく、すぐに使えるようにすることが重要視された。

開発のスコープとしては、Airtable上に構築された患者管理システムと連携するためのウェブアプリケーションの設計と実装が中心だった。顧客はSoftr.ioというノーコードプラットフォームを使ってAirtableのデータを表示するフロントエンドを既に用意していたため、我々が開発する odontograma アプリは、画像や構造化されたデータをAirtableにエクスポートする役割を担い、Softr.ioがそのデータを表示・管理するという役割分担が明確にされていた。

ここで、「FDI」というキーワードが出てくる。FDIは「Fédération Dentaire Internationale（国際歯科連盟）」の略で、世界中で使われている歯の番号付けシステムのことだ。このシステムは、各歯とその位置を2桁の数字で特定するため、歯科医間で歯の情報を正確に、かつ国際的に共通の理解のもとでやり取りできる。新しいアプリでは、このFDIシステムに基づいて歯の状態を記録する機能が不可欠だった。

技術面では、多岐にわたるモダンなウェブ技術が採用された。フロントエンド、つまりユーザーが直接操作する画面部分には、アプリケーションの主要なロジックを動かす「JavaScript (ES6+)」、ウェブページの要素を操作する「jQuery」、歯のイラストを描画し高解像度のレポートを作成する「HTML5 Canvas」、そしてデザインとレスポンシブな表示を実現する「CSS3」が使われた。特に、インタラクティブな odontograma を実現するために、「jQuery Odontogram」という既存のオープンソースプラグインが基盤として活用され、顧客の要件に合わせて機能が拡張された。

データの構造化と連携には「JSON」が用いられ、バックエンド、つまりアプリの裏側でデータの処理や連携を行う部分には「Node.js」と「Express」で構築されたAPIが使われた。このAPIは、生成された歯の画像（PNG形式）や構造化されたデータ（JSON形式）を受け取り、それらを適切な場所に保存・連携する役割を担った。画像ファイルは、安全でスケーラブルなクラウドストレージサービスである「Cloudinary API」を通じて保存され、そのURLと構造化データは「Airtable API」を使って患者の記録としてAirtableに添付された。このように、各技術がそれぞれの役割を果たすことで、全体としてスムーズなデータ連携が実現されている。

特に技術的な挑戦だったのは、FDIに基づく解剖学的なマッピングの実装だ。歯科では、歯のイラスト上の同じ「左」という位置でも、歯がどの象限にあるかによって「遠心（distal）」になったり「近心（mesial）」になったりする。開発チームは、イラスト上の位置（上、下、左、右、中央）を、実際の歯の解剖学的な表面（頬側、口蓋側/舌側、近心、遠心、咬合面/切端）に正確に変換するシステムを開発した。これにより、臨床的に正確な記録と情報共有が可能になった。

また、アプリには、実際の歯科診療の現場を反映した独自の機能が盛り込まれている。「二重レイヤーの注釈」機能では、「既存の病状や治療済み箇所（赤色）」と「これから治療が必要な箇所（青色）」を分けて記録できる。これにより、歯科医はワンクリックでレイヤーを切り替えながら、患者の歯の状態を視覚的に素早く把握できる。さらに、「歯ごとのメモ機能」も実装され、個々の歯に対して詳細なメモを記録できる。これらのメモは自動で保存され、必要に応じて手動で保存・削除も可能だ。メモの内容は、データエクスポート時にも含まれるため、包括的な臨床記録が残せる。

データのエクスポート機能も充実している。一つは、すべての odontograma データを構造化された「JSON形式」でエクスポートする機能だ。これにより、日付、患者名、注釈された歯、状態、治療内容、メモといった詳細な情報がデジタルデータとして取り出せる。もう一つは、プロフェッショナルな「PNG形式のレポート」を生成する機能だ。これはA4サイズに最適化されており、 odontograma のイラスト、治療内容、メモ、患者名、タイムスタンプなどが含まれるため、印刷して患者に説明したり、紙媒体での保管にも適している。

CloudinaryとAirtableとの連携は、ワークフローを劇的に改善する重要な要素だった。PNGレポートが生成されると、その画像はCloudinaryのAPIを通じてクラウドにアップロードされ、安全かつスケーラブルに保管される。同時に、バックエンド（Node.js/Express）がCloudinaryから取得した画像のURLと、JSON形式の構造化データをAirtable APIを使って対応する患者の記録に添付する。これにより、すべての odontograma の画像とメモが、患者のデータベースレコードに瞬時に反映され、一元管理が可能になる。

Softr.ioは、顧客がAirtable上に構築したノーコードのフロントエンドプラットフォームであり、患者データの管理や、我々が開発した odontograma アプリによって生成された画像やメモの表示に利用される。我々のアプリがAirtableにデータを送ることで、Softr.ioのダッシュボードに自動的に情報が表示され、歯科医は技術的な知識がなくても、すべての情報を一箇所で確認・操作できるようになった。

開発を通して、顧客である歯科医には頻繁に進捗が共有され、フィードバックが求められた。これにより、アプリは歯科医の使い慣れた操作感を保ちつつ、自動メモ保存、色分けされた注釈レイヤー、プロフェッショナルなレポート生成といった現代的な機能が追加され、利便性が向上した。この「ユーザーの習慣を尊重し、なじみのある操作感を維持する」というアプローチが、新しいシステムのスムーズな導入と定着に大きく貢献した。

このプロジェクトから得られた教訓は、システムエンジニアを目指す上で非常に重要だ。第一に、「ユーザー中心設計の重要性」だ。顧客である歯科医からの頻繁なフィードバックがあったからこそ、開発が顧客の実際のニーズから外れることなく、最終的なアプリケーションが受け入れられるものになった。第二に、「使い慣れた感覚を失わずに革新すること」だ。新しい機能は価値があるが、技術に詳しくないユーザーにとっての使いやすさを犠牲にしてはならないという原則が守られた。第三に、「統合の重要性」だ。顧客が既に使っていたAirtableやSoftr.ioといったツールにアプリケーションを適応させたことで、真に生産性を向上させるソリューションが提供できた。第四に、「オープンソースの活用」だ。既存の強力なオープンソースプロジェクト（jQuery Odontogram Plugin）を基盤とすることで、開発チームは顧客固有の要件に集中して取り組むことができた。

結論として、このプロジェクトは、顧客の声を真摯に聞き、それを最新の技術スタック（JavaScript, jQuery, HTML5 Canvas, CSS3, Node.js, Express, Cloudinary API, Airtable API, Softr.ioなど）を用いて実現することで、現代的で強力かつアクセスしやすい歯科ウェブアプリケーションを開発した成功事例と言える。このアプリは、歯科医の日常業務にシームレスに統合され、臨床記録の作成、管理をより迅速に、より正確に、より簡単にすることで、歯科医療のデジタル化を推進している。この事例は、「まず聞いて、それからプログラムする」という原則が、顧客の課題を解決し、真に価値あるシステムを構築するためにいかに重要であるかを明確に示している。