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 --version
v14.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 webpack
npm 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.0
npm 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 description
npm WARN FHIRPatientBrowser No repository field.
npm WARN FHIRPatientBrowser No README data
npm WARN FHIRPatientBrowser No license field.
+ webpack@4.44.1
added 198 packages from 146 contributors and audited 577 packages in 11.122s
6 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities
C:\Users\ISJ\Node\FHIRPatientBrowser>

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

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

C:\Users\ISJ\Node\FHIRPatientBrowser>npm install fhir.js
npm 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 description
npm WARN FHIRPatientBrowser No repository field.
npm WARN FHIRPatientBrowser No README data
npm 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.22
updated 1 package and audited 688 packages in 4.068s
6 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities
C:\Users\ISJ\Node\FHIRPatientBrowser>

6. webpackの実行

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

C:\Users\ISJ\Node\FHIRPatientBrowser>npx webpack --config webpack.config.js
Hash: b7ebd92d749c94e55bf7
Version: webpack 4.44.1
Time: 660ms
Built at: 2020/08/03 11:53:56
  Asset      Size  Chunks             Chunk Names
dist.js  18.1 KiB       0  [emitted]  main
Entrypoint main = dist.js
[2] ./main.js 3.79 KiB {0} [built]
[6] (webpack)/buildin/module.js 497 bytes {0} [built]
    + 16 hidden modules
WARNING in configuration
The '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 アプリケーション開発者の方のご参考になれば幸いです。