プロトアウトスタジオアドベントカレンダー5発目の記事です！

概要

プログラムの勉強を始めて5か月ほどの開業医です。

以前、診療を進める時に役に立つ診療ガイドラインを簡単に利用できるLINE Botを作成しました。
急性中耳炎の重症度が分かるLINE Botの作成
 急性中耳炎診断支援LINE Botを改良しHerokuにデプロイ

これらは中耳炎の重症度判定と推奨治療を提示させる目的で作られたものです。

今回は病気の状態や、行われた治療、治療効果といったデータも管理できる機能を追加したWebアプリを作成したいと思いました。

収集された医療データを利用して治療法の改善や新しい治療法の開発ができないかと考えています。

鼓膜画像は診療のデジタル化の研究やCNNの教師データとしての利用に同意いただいた患者さんに画像提供いただいております。

実装

小児急性中耳炎診療ガイドライン（日本耳科学会　2018年）に沿った中耳炎診療を支援するWebアプリ
・初診時、急性中耳炎の重症度を判定し推奨される治療を表示。
・再来時、前回の治療内容と再来時の状況により推奨される治療を表示。
・患者の症状や鼓膜所見（画像含む)のデータを匿名化した上でFirebaseに保存し、検索可能
・メールとパスワードによる認証、ログイン機能。
・他の医師が保存した患者情報は閲覧できないため、複数の医療機関で利用可能。（共同研究時はデータの共有も可能）

完成動画

中耳炎診療支援webアプリ https://t.co/S6omwwZqfh @YouTubeより
— 病気のセルフチェック (@Selfcheckhealt1) November 12, 2019

## 作成 **1.Firebaseでkeyの取得**

・Firebaseにアクセスします。
　https://firebase.google.com/
・プロジェクト追加をクリックします。
・プロジェクトに名前を付けます。
・Googleアナリティクスは設定せず進めます。
・プロジェクトが作成されるので続行をクリックします。
・「>」を選択します（Webアプリ）。
・アプリ名を決め登録します。
・Firebaseに接続するためのKEY（スクリプト）をコピーします。
・bodyタグの下部に貼り付けます。
・コピーしたコードの一部を削除します。

<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase-app.js"></script>
//「-app」の文字を削除
<script src="https://www.gstatic.com/firebasejs/7.3.0/firebase.js"></script>

※デフォルト「firebase-app.js」ではコアライブラリのみ読み込んでいるのでdatabase.js など他の処理は入っていません。全部入りの「firebase.js」を読み込んで使います。

２．ログイン方法の設定

今回はメールとパスワードで認証された人のみが利用できるように設定します。

・「Authentication」→「ログイン方法」→「メール/パスワード」の順番で選択します。
・「有効にする」→「保存」の順番でクリックします。

３．データベースの作成

認証されたユーザーのみがデータにアクセスできるようにします。

・「Database」→「データベースの作成」の順番で選択し、「テストモード」に設定し「完了」をクリックします。
・「Cloud Firestore」→「Realtime Database」の順番で選択します。
・「ルール」をクリックし「false」から「 "auth!=null"」に変更します。

{
  /* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */
  "rules": {
    ".read": "auth!=null",
    ".write": "auth!=null"
  }
}

4.ログイン機能の実装

こちらを参考にさせていただきました。
以下のようなコードを書きます。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>[firebase] my-sample-project</title>

  <script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/4.10.1/firebase-auth.js"></script>

  <script src="https://cdn.firebase.com/libs/firebaseui/2.5.1/firebaseui.js"></script>
  <link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.5.1/firebaseui.css" />

  <script>
    // Firebaseの初期化
    var config = {
      apiKey: "<API_KEY>",
      authDomain: "<PROJECT_ID>.firebaseapp.com",
    };
    firebase.initializeApp(config);

    // FirebaseUIインスタンス初期化
    var ui = new firebaseui.auth.AuthUI(firebase.auth());

    // FirebaseUIの各種設定
    var uiConfig = {
      callbacks: {
        signInSuccess: function(currentUser, credential, redirectUrl) {
          // サインイン成功時のコールバック関数
          // 戻り値で自動的にリダイレクトするかどうかを指定
          return true;
        },
        uiShown: function() {
          // FirebaseUIウィジェット描画完了時のコールバック関数
          // 読込中で表示しているローダー要素を消す
          document.getElementById('loader').style.display = 'none';
        }
      },
      // リダイレクトではなく、ポップアップでサインインフローを表示
      signInFlow: 'popup',
      signInSuccessUrl: '<url-to-redirect-to-on-success>',
      signInOptions: [
        // サポートするプロバイダ(メールアドレス)を指定
        firebase.auth.EmailAuthProvider.PROVIDER_ID,
      ],
      // Terms of service url.(サービス利用規約ページの)
      tosUrl: '<your-tos-url>'
    };

    // FirebaseUI描画開始
    ui.start('#firebaseui-auth-container', uiConfig);
  </script>
</head>
<body>
  <div id="firebaseui-auth-container"></div>
  <div id="loader">Loading...</div>
</body>
</html>

未登録のメールアドレスを入力すると、アカウント作成のフォームが表示されます。

アカウント登録すると、firebaseにユーザー情報が登録され、認証されます。

登録済のメールアドレスを入れると、パスワードの入力を求められます。

明日の記事では画面作成～canvasで画像表示を行います。