開発者の皆さん、こんにちは! Flaskを使うと簡単にWebアプリが作成できるようでしたので、Embedded Pythonを利用してIRISに保存した月毎の歩数データ(テーブル/グローバル)を matplotlibを利用してグラフ表示する簡単なWebアプリを作成してみました。 使っているPythonスクリプトファイルやHTMLは以下の通りです(図例はテーブルからデータを取る例ですが、サンプルにはグローバルからデータを取得する例も含まれます)。 ![](/sites/default/files/inline/images/images/image(4247).png) サンプルはこちらに置いています👉 IRISのインストール環境に合わせて、サンプルのディレクトリを分けています。 **<Windows にIRISをインストールされている場合>**  をご覧ください。 Windows上Pythonのバージョンは3.9で試しています。3.10では動作しませんでしたので、3.9でお試しください。 **<Windows以外にIRISをインストールされている場合>**  をご覧ください。​​   できあがりのイメージは以下の通りです。 ![](/sites/default/files/inline/images/images/image(4249).png) * * *   ### 1) 事前準備について flaskとmatplitlib を pip でインストールします(Windows上にインストールしたIRISを使う場合もpipでインストールしてください​)。 WindowsにインストールしたIRISを利用する場合のみ、以下ご確認ください。

テーブルからデータを取得する例を試される場合は table_goiris.py の2行目、グローバルからデータを取得する例を試される場合は、global_goiris.py の2行目に記載のある sys.path のディレクトリを変更します。

以下2つのディレクトリを確認し、sys.pathに追加してください。

  • IRISインストールディレクトリ/mgr/python
  • IRISインストールディレクトリ/lib/python
  • ​​例:

    sys.path+=[<span class="hljs-string">'c:\\intersystems\\irishealth\\mgr\\python'</span>,<span class="hljs-string">'c:\\intersystems\\irishealth\\lib\\python'</span>]
    ###   ### 2)画面表示について 画面表示に使用しているHTMLは、[index.html](https://github.com/Intersystems-jp/WalkSteps/blob/master/Linux/templates/index.html) で、Flaskの render_template() 関数を利用し、HTTP応答としてHTML文書を返送しています。 ​​​(HTMLの継承ができたので、ベースとなるHTMLを [base.html](https://github.com/Intersystems-jp/WalkSteps/blob/master/Linux/templates/base.html)に作成し、index.htmlの中で **_{% extends 'base.html' %}_** と指定して [base.html](https://github.com/Intersystems-jp/WalkSteps/blob/master/Linux/templates/base.html) を継承しています)
    {% extends 'base.html' %}
    
    {% block body %}
    <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">"/"</span> <span class="hljs-attr">method</span>=<span class="hljs-string">'POST'</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">H2</span>></span>{{selectmonth}}月の歩数<span class="hljs-tag"></<span class="hljs-name">H2</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"alert alert-warning"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"alert"</span>></span>
                <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"title"</span>></span> 確認したい月を指定してください。<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
                <span class="hljs-tag"><<span class="hljs-name">select</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"selectmonth"</span>></span>
                {% for month in monthlist %}
                    <span class="hljs-tag"><<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"{{ month }}"</span>></span>{{ month }}月<span class="hljs-tag"></<span class="hljs-name">option</span>></span>
                {% endfor %}
                <span class="hljs-tag"></<span class="hljs-name">select</span>></span>
                <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"歩数確認"</span>></span>
            <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
        <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
        {% if rdate != "" %}
        <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-body"</span>></span>
            {{ image | safe }}
        <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
        {% endif %}
    <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
    {% endblock %}
      ### 3)画面表示に使うグラフとデータについて 以下、[Linux用ディレクトリ](https://github.com/Intersystems-jp/WalkSteps/tree/master/Linux)以下にあるコード例で解説しますが、[Windowsディレクトリ](https://github.com/Intersystems-jp/WalkSteps/tree/master/Windows)以下にある内容と大枠に違いはありません。   #### 3-1) テーブルデータを利用する場合 IRISからデータを取得する処理は、[table_goiris.py](https://github.com/Intersystems-jp/WalkSteps/blob/master/Linux/table_goiris.py) に記述しています。 [getMonthTbl()関数](https://github.com/Intersystems-jp/WalkSteps/blob/9203e5dca96bc9dd918160aed03cd8494ab18934/Linux/table_goiris.py#L6)では、保存されている歩数データの「月」情報をSELECTで取得し、Pythonリストに格納し戻しています。
    <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">getMonthTbl</span><span class="hljs-params">()</span>:</span>
        rs=iris.sql.exec(<span class="hljs-string">"select DATEPART('MM',RecordDate) As month from MyHealth.Steps group by DATEPART('MM',RecordDate)"</span>)
        monthlist=[]
        <span class="hljs-keyword">for</span> row <span class="hljs-keyword">in</span> enumerate(rs):
            monthlist.append(row[<span class="hljs-number">1</span>][<span class="hljs-number">0</span>]) 
        <span class="hljs-keyword">return</span> monthlist
      [createChartFromTbl()関数](https://github.com/Intersystems-jp/WalkSteps/blob/9203e5dca96bc9dd918160aed03cd8494ab18934/Linux/table_goiris.py#L14)では、指定月の日付と歩数をSELECTで取得し、Pythonリストに格納し戻しています。
    <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">createChartFromTbl</span><span class="hljs-params">(monthnumber)</span>:</span>
        sql=<span class="hljs-string">"select tochar(RecordDate,'DD'),Steps from MyHealth.Steps WHERE DATEPART('MM',recorddate) = ?"</span>
        stmt=iris.sql.prepare(sql)
        rs=stmt.execute(monthnumber) 
        
        rdate=[]
        steps=[]
        <span class="hljs-keyword">for</span> row <span class="hljs-keyword">in</span> enumerate(rs):
            rdate.append(row[<span class="hljs-number">1</span>][<span class="hljs-number">0</span>])
            steps.append(row[<span class="hljs-number">1</span>][<span class="hljs-number">1</span>])
    
        <span class="hljs-keyword">return</span> rdate,steps
    
      [table_goiris.py](https://github.com/Intersystems-jp/WalkSteps/blob/master/Linux/table_goiris.py) で作成したリストを利用して、[table_app.py](https://github.com/Intersystems-jp/WalkSteps/blob/master/Linux/table_app.py)の中でグラフを生成しています。 matplotlibで作成したグラフを、HTMLに埋め込む方法については、こちらのページ()を参考にさせていただきました。 (imgタグのsrcにBase64でエンコードしたグラフのデータをセットし、index.htmlに当てはめる方法をとっています)​​​
    <span class="hljs-keyword">import</span> base64
    <span class="hljs-keyword">from</span> io <span class="hljs-keyword">import</span> BytesIO
    <span class="hljs-keyword">import</span> matplotlib.pyplot <span class="hljs-keyword">as</span> plt
    
    <span class="hljs-keyword">from</span> flask <span class="hljs-keyword">import</span> Flask, render_template, request
    <span class="hljs-keyword">import</span> table_goiris <span class="hljs-keyword">as</span> goiris
    
    app = Flask(__name__)
    
    <span class="hljs-meta">@app.route('/',methods=['GET','POST'])</span>
    <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">index</span><span class="hljs-params">()</span>:</span>
        <span class="hljs-comment">#月取得(テーブル編)</span>
        monthlist=goiris.getMonthTbl()
        <span class="hljs-keyword">if</span> request.method==<span class="hljs-string">'GET'</span>:
            defaultmonth=<span class="hljs-number">7</span>
        <span class="hljs-keyword">else</span>:
            result=request.form
            defaultmonth=result[<span class="hljs-string">'selectmonth'</span>]
    
        <span class="hljs-comment">#print(defaultmonth)</span>
        <span class="hljs-comment">#データ取得(テーブル編)</span>
        result=goiris.createChartFromTbl(defaultmonth)
    
        rdate=result[<span class="hljs-number">0</span>]
        steps=result[<span class="hljs-number">1</span>]
    
        <span class="hljs-comment">#参考にしたページ:https://shiren-blog.com/flask-matplotlib-graph-demo/</span>
        <span class="hljs-comment">#グラフ作成</span>
        fig = plt.figure(figsize=(<span class="hljs-number">10</span>, <span class="hljs-number">5</span>))
        ax = fig.add_subplot(<span class="hljs-number">111</span>)
    
        <span class="hljs-keyword">if</span> defaultmonth==<span class="hljs-string">"5"</span>:
            color=<span class="hljs-string">"green"</span>
        <span class="hljs-keyword">elif</span> defaultmonth==<span class="hljs-string">"6"</span>:
            color=<span class="hljs-string">"orange"</span>
        <span class="hljs-keyword">else</span>:
            color=<span class="hljs-string">"blue"</span>
        ax.plot(rdate, steps, label=<span class="hljs-string">"test"</span>,marker=<span class="hljs-string">"o"</span>,color=color,linestyle=<span class="hljs-string">"-."</span>)
        <span class="hljs-comment">#バッファに保存</span>
        buf=BytesIO()
        fig.savefig(buf,format=<span class="hljs-string">'png'</span>)
        <span class="hljs-comment">#グラフをHTMLに埋め込むように変換</span>
        data=base64.b64encode(buf.getbuffer()).decode(<span class="hljs-string">'ascii'</span>)
        image_tag = <span class="hljs-string">f'<img src="data:image/png;base64,<span class="hljs-subst">{data}</span>"/>'</span>
        <span class="hljs-keyword">return</span> render_template(<span class="hljs-string">"index.html"</span>,image=image_tag,monthlist=monthlist,selectmonth=defaultmonth)
    
    
    <span class="hljs-keyword">if</span> __name__==<span class="hljs-string">"__main__"</span>:
        <span class="hljs-comment">#app.run(debug=True,host='0,0,0,0',port="8081")</span>
        app.run(debug=<span class="hljs-keyword">True</span>,host=<span class="hljs-string">'0.0.0.0'</span>)
    
    ​ #### 3-2) グローバルを利用する場合 IRISからデータを取得する処理は、[global_goiris.py](https://github.com/Intersystems-jp/WalkSteps/blob/master/Linux/global_goiris.py) に記述しています。 [getMonthGlo()関数](https://github.com/Intersystems-jp/WalkSteps/blob/9203e5dca96bc9dd918160aed03cd8494ab18934/Linux/global_goiris.py#L6)では、保存されている歩数データの「月」情報を取得し、Pythonリストに格納し戻しています(ObjectScriptで$Order()してるのと同じイメージで記述できます)。
    <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">getMonthGlo</span><span class="hljs-params">()</span>:</span>
        glo=iris.gref(<span class="hljs-string">"^MySteps"</span>)
        monthlist=[]
        month=<span class="hljs-string">""</span>
        <span class="hljs-keyword">while</span> <span class="hljs-keyword">True</span>:
            month=glo.order([<span class="hljs-number">2022</span>,month])
            <span class="hljs-keyword">if</span> (month==<span class="hljs-keyword">None</span>):
                <span class="hljs-keyword">break</span>
            monthlist.append(month)
        <span class="hljs-keyword">return</span> monthlist     
      [createChartFromGlo()関数](https://github.com/Intersystems-jp/WalkSteps/blob/9203e5dca96bc9dd918160aed03cd8494ab18934/Linux/global_goiris.py#L17)では、指定月の日付と歩数を得し、Pythonリストに格納し戻しています(ObjectScriptで$Order()してるのと同じイメージで記述できます)。
    <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">createChartFromGlo</span><span class="hljs-params">(monthnumber)</span>:</span>
        glo=iris.gref(<span class="hljs-string">"^MySteps"</span>)
    
        rdate=[]
        steps=[]
        date=<span class="hljs-string">""</span>
        <span class="hljs-keyword">while</span> <span class="hljs-keyword">True</span>:
            date=glo.order([<span class="hljs-number">2022</span>,monthnumber,date])
            <span class="hljs-keyword">if</span> (date==<span class="hljs-keyword">None</span>):
                <span class="hljs-keyword">break</span>
            rdate.append(date)
            steps.append(glo[<span class="hljs-number">2022</span>,monthnumber,date])
        
        <span class="hljs-keyword">return</span> rdate,steps
      [global_goiris.py](https://github.com/Intersystems-jp/WalkSteps/blob/master/Linux/global_goiris.py)  で作成したリストを利用して、[global_app.py](https://github.com/Intersystems-jp/WalkSteps/blob/master/Linux/global_app.py)の中でグラフを生成しています。 matplotlibで作成したグラフを、HTMLに埋め込む方法については、こちらのページ()を参考にさせていただきました。 (imgタグのsrcにBase64でエンコードしたグラフのデータをセットし、index.htmlに当てはめる方法をとっています)​​​
    <span class="hljs-keyword">import</span> base64
    <span class="hljs-keyword">from</span> io <span class="hljs-keyword">import</span> BytesIO
    <span class="hljs-keyword">import</span> matplotlib.pyplot <span class="hljs-keyword">as</span> plt
    
    <span class="hljs-keyword">from</span> flask <span class="hljs-keyword">import</span> Flask, render_template, request
    <span class="hljs-keyword">import</span> global_goiris <span class="hljs-keyword">as</span> goiris
    
    app = Flask(__name__)
    
    <span class="hljs-meta">@app.route('/',methods=['GET','POST'])</span>
    <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">index</span><span class="hljs-params">()</span>:</span>
        <span class="hljs-comment">#月取得(グローバル編)</span>
        monthlist=goiris.getMonthGlo()
        <span class="hljs-keyword">if</span> request.method==<span class="hljs-string">'GET'</span>:
            defaultmonth=<span class="hljs-number">7</span>
        <span class="hljs-keyword">else</span>:
            result=request.form
            defaultmonth=result[<span class="hljs-string">'selectmonth'</span>]
    
        <span class="hljs-comment">#print(defaultmonth)</span>
        <span class="hljs-comment">#データ取得(グローバル編)</span>
        result=goiris.createChartFromGlo(defaultmonth)
    
        rdate=result[<span class="hljs-number">0</span>]
        steps=result[<span class="hljs-number">1</span>]
    
        <span class="hljs-comment">#参考にしたページ:https://shiren-blog.com/flask-matplotlib-graph-demo/</span>
        <span class="hljs-comment">#グラフ作成</span>
        fig = plt.figure(figsize=(<span class="hljs-number">10</span>, <span class="hljs-number">5</span>))
        ax = fig.add_subplot(<span class="hljs-number">111</span>)
    
        <span class="hljs-keyword">if</span> defaultmonth==<span class="hljs-string">"5"</span>:
            color=<span class="hljs-string">"green"</span>
        <span class="hljs-keyword">elif</span> defaultmonth==<span class="hljs-string">"6"</span>:
            color=<span class="hljs-string">"orange"</span>
        <span class="hljs-keyword">else</span>:
            color=<span class="hljs-string">"blue"</span>
        ax.plot(rdate, steps, label=<span class="hljs-string">"test"</span>,marker=<span class="hljs-string">"o"</span>,color=color,linestyle=<span class="hljs-string">"-."</span>)
        <span class="hljs-comment">#バッファに保存</span>
        buf=BytesIO()
        fig.savefig(buf,format=<span class="hljs-string">'png'</span>)
        <span class="hljs-comment">#グラフをHTMLに埋め込むように変換</span>
        data=base64.b64encode(buf.getbuffer()).decode(<span class="hljs-string">'ascii'</span>)
        image_tag = <span class="hljs-string">f'<img src="data:image/png;base64,<span class="hljs-subst">{data}</span>"/>'</span>
        <span class="hljs-keyword">return</span> render_template(<span class="hljs-string">"index.html"</span>,image=image_tag,monthlist=monthlist,selectmonth=defaultmonth)
    
    
    <span class="hljs-keyword">if</span> __name__==<span class="hljs-string">"__main__"</span>:
        <span class="hljs-comment">#app.run(debug=True,host='0,0,0,0',port="8081")</span>
        app.run(debug=<span class="hljs-keyword">True</span>,host=<span class="hljs-string">'0.0.0.0'</span>)
      ### 4)サンプルデータの作成 サンプルデータの作成に利用する[MyHealth.Stepクラス](https://github.com/Intersystems-jp/WalkSteps/blob/master/MyHealth/Steps.cls)をIRISのUSERネームスペースにインポートします。​​​ * スタジオを利用されている場合は、USERネームスペースに接続先を変更した後、*.cls をスタジオにドラッグ&ドロップするとインポートできます。 * VSCodeを利用されている場合は、使用するIRISのUSERネームスペースに接続した後、[MyHealth.Step.cls](https://github.com/Intersystems-jp/WalkSteps/blob/master/MyHealth/Steps.cls)をワークスペースで開き、保存します(保存と同時にコンパイルが実行されます)。 * 管理ポータルからインポートする場合は、**管理ポータル > システムエクスプローラ > クラス (USERネームスペース選択) **の画面で「インポート」ボタンからインポートできます。 続いて、IRISにログインし(またはターミナルを開き)USERネームスペースに接続していることを確認し、以下実行します。 テーブルを利用する場合: do ##class(MyHealth.Steps).create() グローバルを利用する場合:​​​ do ##class(MyHealth.Steps).createGlobal() _※2022年5月1日~7月31日の歩数データがランダムに作成されます(実行毎に再作成するようにしています)。_   ### 5)実行! #### 5-1)Windows以外で試す場合 IRISインストールディレクトリ/bin/irispythonコマンドを利用して [table_app.py](https://github.com/Intersystems-jp/WalkSteps/blob/master/Linux/table_app.py) または [global_app.py](https://github.com/Intersystems-jp/WalkSteps/blob/master/Linux/global_app.py) を実行します。 > impor irisを行うため、irispythonを利用しています。 IRISインストールディレクトリが、 /usr/irissys である場合の例は以下の通りです(実行環境に合わせてディレクトリはご変更ください)。 ※実行する table\_app.py または global\_app.py もフルパスで指定しています。 テーブル編 /usr/irissys/bin/irispython /home/isjedu/WalkSteps/Linux/table_app.py グローバル編 /usr/irissys/bin/irispython /home/isjedu/WalkSteps/Linux/global_app.py   #### 5-2)Windowsで試す場合 [実行前の準備](https://github.com/Intersystems-jp/WalkSteps/tree/master/Windows#%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AE%E6%BA%96%E5%82%99)が完了しているかご確認ください(リンク先の「3.実行前の確認」をご確認ください)。 Pythonコマンドの後に、[table_app.py](https://github.com/Intersystems-jp/WalkSteps/blob/master/Windows/table_app.py) または [global_app.py](https://github.com/Intersystems-jp/WalkSteps/blob/master/Windows/global_app.py) をフルパスで指定してください。 テーブル編 python c:\WorkSpace\WalkSteps\Windows\table_app.py グローバル編 python c:\WorkSpace\WalkSteps\Windows\global_app.py   いかがでしたでしょうか。FlaskもPythonもとても便利ですね!🐍 もっと良い方法をご存知の方いらっしゃいましたら、ぜひ共有いただけると嬉しいです! コミュニティへの投稿、お待ちしております\_(.\_.)_   * * * 👇Embedded Python概要やEmbedded Pythonでデータベースプログラミング(SQLアクセス編)を解説するYouTubeプレイリストとサンプルコード一式公開中です!👇 [【はじめてのInterSystems IRIS】Embedded Python セルフラーニングビデオシリーズ公開!](https://jp.community.intersystems.com/node/520751)