概要

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

そろそろスギ花粉の季節ですね。

医療費を削減する目的で一部の花粉症の薬が今後医療機関で処方できなくなるかもしれないといわれています。そうすると市販の薬で対応しなけらばならない花粉症患者さんが少なからず出てきそうです。そのような時に自分に合った花粉症の薬が探せるアプリがあれば良いかと思い作ってみました。

今回Electronでデスクトップアプリを作成する勉強をしたので、先日勉強したAuth0のユーザー認証も実装して自分に最適な花粉症薬を探すことが出来るデスクトップアプリを作成してみようと思いました。

花粉症の重症度が分かるWEBアプリの作成～Auth0でユーザー認証～

動作確認

今回デスクトップアプリは出来ましたが、Auth0によるユーザー認証が実装できませんでした。

https://t.co/bkiK9V31Fd
— 病気のセルフチェック (@Selfcheckhealt1) December 15, 2019

実装内容

・眠気の強さや効き目の強さ、服用回数、値段など自分の好みの花粉症の薬を探すことが出来るデスクトップアプリ。
・ユーザー認証機能は実装できず。

作成方法

1.Electronの導入
Electronとは簡単にでデスクトップアプリを開発できるものです。
Electron

まず適当にフォルダを作り、以下のコマンドを打ちます。

git clone https://github.com/electron/electron-quick-start

フォルダに移動します。

cd electron-quick-start

インストールします。

npm i

起動します。

npm start

このような画面が出てくればOKです。

2.HTMLの作成
サンプルのHTMLを変えていきます。
眠気の強さや効き目の強さ＞服用回数＞値段で花粉症薬を絞り込んでいくようにしました。
今回はmaterializeを使用しています。

<h3>あなたに最適な花粉症の薬を探そう！</h3>
        <h3></h3>

        <h5>眠気の出やすさで薬を探す</h5>        
        <form action="#">
                <p>
                  <label>
                    <input class="with-gap" name="group1" type="radio" value="候補薬剤：フェキソフェナジン、ロラタジン" id="med1" />
                    <span>眠気が出る可能性がほとんどない薬（使用中の自動車運転制限なし）</span>
                  </label>
                </p>
                <p>
                  <label>
                    <input class="with-gap" name="group1" type="radio" value="候補薬剤：エピナスチン、エバスチン" id="med2" />
                    <span>眠気が出る可能性がすこしある薬（使用中の自動車運転は注意が必要）</span>
                  </label>
                </p>
                <p>
                  <label>
                    <input class="with-gap"name="group1" type="radio" value="候補薬剤：セチリジン、ケトチフェン" id="med3" />
                    <span>眠気の出る可能性があるが、効果も期待できる薬（使用中の自動車運転はひかえる）</span>
                  </label>
                </p>
                
               </form>
               <p class="result1" id="res1">候補薬剤：</p>

        
        <h5>服用回数で絞り込み</h5>
        <form action="#">
                <p>
                  <label>
                    <input class="with-gap" name="group2" type="radio" value="候補薬剤：ロラタジン、エピナスチン、エバスチン、セチリジン" id=""  />
                    <span>1日1回</span>
                  </label>
                </p>
                <p>
                  <label>
                    <input class="with-gap"name="group2" type="radio" value="候補薬剤：フェキソフェナジン、ケトチフェン" id=""/>
                    <span>1日2回</span>
                  </label>
                </p>                                
              </form>
              <p class="result2">候補薬剤：</p>
                             

        <h5>価格で絞り込み</h5> 
        <a class="waves-effect waves-light btn-large" id="search">薬を検索</a>
        <p class="result3">あなたが探しているアレルギー薬は：</p>         
        <p class="comment"></p>

Scriptは以下のように書きました。
今回はjqueryを使用しています。

//group1   
    let reco_medi1 ="";  
    $('input[name="group1"]').change(function() {
        $('.result2').html("");
        $('input[name="group2"]').prop('checked', false);
        var result = $(this).val();
        if(result=="候補薬剤：フェキソフェナジン、ロラタジン"){
          reco_medi1="フェキソフェナジン:ロラタジン";
        }else if(result=="候補薬剤：エピナスチン、エバスチン"){
          reco_medi1="エピナスチン:エバスチン"
        }else{
          reco_medi1="セチリジン:ケトチフェン"
        }
        $('.result1').html(reco_medi1);
        console.log(reco_medi1);
        
        let [compo1, compo2] = reco_medi1.split(":"); 
        let compo3,compo4;

        //group2    
        let reco_medi2 =""; 
        $('input[name="group2"]').change(function() {
            var result = $(this).val();            
            if(result=="候補薬剤：ロラタジン、エピナスチン、エバスチン、セチリジン"){
              if(compo2=="ロラタジン"){
                reco_medi2="ロラタジン";
              }else if(compo1=="エピナスチン"){
                reco_medi2="エピナスチン:エバスチン";
                compo2="エバスチン";//
              }else if(compo1=="セチリジン"){
                reco_medi2="セチリジン";
              }else{
                reco_medi2="候補薬剤はありません。再選択して下さい。";
              };              
            }else{
              if(compo1=="フェキソフェナジン"){
                reco_medi2="フェキソフェナジン"
              }else if(compo2=="ケトチフェン")
              reco_medi2="ケトチフェン"
              else{
                reco_medi2="候補薬剤はありません。再選択して下さい。";
              }
            }
            $('.result2').html(reco_medi2);
            
          });

        //価格表示
        let reco_medi3="テスト";
        let comment;
        let img_src;   

        $("#search").click(function() {
          console.log(reco_medi2 ,reco_medi3);

          if(reco_medi2=="フェキソフェナジン"){
          reco_medi3="アレルビ";
          comment="*この薬剤は通販でもお買い求め頂けます。" 
          
          }else if(reco_medi2=="ロラタジン"){
          reco_medi3="クラリチンEX";
          comment="*この薬剤は薬局でのみお買い求め頂けます。";   
          console.log(reco_medi2,reco_medi3)     
          }else if(reco_medi2=="エピナスチン:エバスチン"){
          reco_medi3="アレジオン20";
          comment="*この薬剤は通販でもお買い求め頂けます。";
          
          }else if(reco_medi2=="セチリジン"){
          reco_medi3="ストナリニZ";
          comment="*この薬剤は通販でもお買い求め頂けます。";
          
          }else if(reco_medi2=="ケトチフェン"){
          reco_medi3="ザジテンAL鼻炎カプセル";
          comment="*この薬剤は通販でもお買い求め頂けます。";
          
          }      
              $(".result3").html(`<h7>あなたが探しているアレルギー薬は：${reco_medi3}</h7>`);
              $('.comment').html(`${comment}`);
              // $('.image').src=img_src;
              $('.image').html(`${comment}`);
              console.log(reco_medi2, reco_medi3);
          });
    });

[View]の[Reload]をクリックするとリロードされます。

3.Auth0の導入（今回うまくいきませんでした。）

expressインストール

npm i express

public フォルダ作成

publicの中にindex.html を移動

main.jsを以下に書き換える

// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')

// express setting
const express = require('express');
const appExpress = express();
appExpress.use(express.static(__dirname + '/public'));
appExpress.listen(3000);

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  // mainWindow.loadFile('index.html')
  // ログインページにアクセスして、画面に表示する
  mainWindow.loadURL("http://localhost:3000/" );

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()

  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) createWindow()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

サンプルファイル自動作成で素のJavaScriptのVanillaJSログインファイル一式を持っておきます。
サンプルファイル自動作成で指示される、Application Settings の Allowed Callback URLs、Allowed Web Origins、Allowed Logout URLsでの http://localhost:3000 の許可設定は忘れないようにしておきます。

参照：花粉症の重症度が分かるWEBアプリの作成～Auth0でユーザー認証～

Electron側の最上部のフォルダに、 Auth0サンプル側の auth_config.json を移植します。
publicフォルダに、Auth0サンプル側のpublicフォルダにあるcss,images,jsフォルダを移植します。

起動して完成ですが…

npm start

ログインボタンがありません。Auth0がうまく導入できていないようです。

考察
残念ながらログイン認証機能が実装できませんでした。
今度は自分に最適な花粉症薬を探すことが出来るLINE Botを作ってみようと思います。