Open Exchange: FHIR Patient Browser の実行方法

みなさん、こんにちは。

Open Exchangeで FHIRリポジトリに接続するFHIR Patient Browserが公開されました。

https://openexchange.intersystems.com/package/FHIR-Patient-Browser

Open-Source のJavaScriptライブラリであるfhir.jsを利用した、FHIRサーバに接続するためのFHIRクライアントアプリケーションです。

この記事では、このOpen Exchangeアプリケーション実行に必要なNode.jsのインストールや、コンパイルおよび実行方法について解説します。(筆者もNode.jsのインストールや実行は初めてです！)

1.FHIRPatientBrowserのソースのダウンロード

上記Open Exchangeリンク先の「Download」をクリックすると、以下のGithubサイトへ移動します。

https://github.com/antonum/FHIRPatientBrowser
 

以下の画像のようにCodeからZIP形式でダウンロードし、展開します。（もちろんGitなどのツールを利用して入手してもOKです。）

2. Node.jsのインストール

Node.jsのインストーラーはこちらのサイトからダウンロード可能です。

https://nodejs.org/ja/download/

私はWindows上にインストールしました。

インストール後には以下のようにバージョンを確認してみてください。

C:\Users\ISJ>node --versionv14.7.0

3. FHIRサーバ接続先の変更

公開されているgithub上ののREADMEにも記載されていますが、まずは接続するFHIRサーバの構成を環境に合わせて変更します。

私は別サーバで起動している、IRIS for Health 2020.3 Preview エディション上で起動しているFHIRリポジトリに接続するように構成しました。

ユーザ名パスワードの指定もできます。以下の内容を参考にしてください。

main.js

4. webpackのインストール

すでにNode.jsを利用しているユーザの方は不要かもしれませんが、私のように初めてNode.jsを利用する方は、最初にwebpackというパッケージのインストールが必要です。

webpackはその名の通り、Webサイトの必要な複数のファイルを1つにまとめてくれる、便利なビルドツールです。

C:\Users\ISJ\Node\FHIRPatientBrowser>npm install --save-dev webpacknpm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\ISJ\Node\FHIRPatientBrowser\package.json'npm WARN notsup Unsupported engine for watchpack-chokidar2@2.0.0: wanted: {"node":"<8.10.0"} (current: {"node":"14.7.0","npm":"6.14.7"})npm WARN notsup Not compatible with your version of node/npm: watchpack-chokidar2@2.0.0npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules\chokidar\node_modules\fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\watchpack-chokidar2\node_modules\chokidar\node_modules\fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\ISJ\Node\FHIRPatientBrowser\package.json'npm WARN FHIRPatientBrowser No descriptionnpm WARN FHIRPatientBrowser No repository field.npm WARN FHIRPatientBrowser No README datanpm WARN FHIRPatientBrowser No license field.+ webpack@4.44.1added 198 packages from 146 contributors and audited 577 packages in 11.122s6 packages are looking for funding  run `npm fund` for detailsfound 0 vulnerabilitiesC:\Users\ISJ\Node\FHIRPatientBrowser>

5. fhir.jsのインストール

次にこちらもREADMEにある通り、fhir.jsのインストールを行います。

C:\Users\ISJ\Node\FHIRPatientBrowser>npm install fhir.jsnpm WARN saveError ENOENT: no such file or directory, open 'C:\Users\ISJ\Node\FHIRPatientBrowser\package.json'npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\ISJ\Node\FHIRPatientBrowser\package.json'npm WARN FHIRPatientBrowser No descriptionnpm WARN FHIRPatientBrowser No repository field.npm WARN FHIRPatientBrowser No README datanpm WARN FHIRPatientBrowser No license field.npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\watchpack-chokidar2\node_modules\fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})+ fhir.js@0.0.22updated 1 package and audited 688 packages in 4.068s6 packages are looking for funding  run `npm fund` for detailsfound 0 vulnerabilitiesC:\Users\ISJ\Node\FHIRPatientBrowser>

6. webpackの実行

最後にwebpackのコマンドを実行します。

C:\Users\ISJ\Node\FHIRPatientBrowser>npx webpack --config webpack.config.jsHash: b7ebd92d749c94e55bf7Version: webpack 4.44.1Time: 660msBuilt at: 2020/08/03 11:53:56  Asset      Size  Chunks             Chunk Namesdist.js  18.1 KiB       0  [emitted]  mainEntrypoint main = dist.js[2] ./main.js 3.79 KiB {0} [built][6] (webpack)/buildin/module.js 497 bytes {0} [built]    + 16 hidden modulesWARNING in configurationThe 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/C:\Users\ISJ\Node\FHIRPatientBrowser>

7. Webアプリケーションの実行

index.htmlをダブルクリックしてアプリケーションを実行することができます。

あるいは任意のWebサーバに index.html + dist.js をコピーしても参照することができます。

アプリケーションは非常にシンプルで接続先として構成したFHIRリポジトリから最大25件の患者情報を取得して、Name,Gender,DOBの情報を表示します。

Search フィールドでは、検索も実行可能です。検索対象は、Patientリソースのname Search parameterで、以下のようなFHIRリクエストが実行されます。

名前をクリックすると取得したPatientリソース全体が表示されます。

いかがでしょうか？皆さんFHIRリポジトリからのPatietリソースの取得に成功できたでしょうか？

fhir.jsを使用した実際のコードは、接続先を変更した main.js に含まれています。

HTML+JavaScript+FHIR アプリケーション開発者の方のご参考になれば幸いです。