今まで当ブログでは、macOSのnumbersを使って様々なオーディオ関連のグラフ（例えばスペクトルなど）を添付して来ましたが、Python を使えばグラフ描画機能が充実しており、CSVファイル（データ）があれば、簡単にグラフ作成が可能であることが分かりました。 そこで、Pythonの勉強を兼ねてGUI (グラフィカルユーザーインターフェース）ベースで「入力処理」を含め「CSVからグラフ化」する一連のPythonプログラムに挑戦することにしました。
Pythonの挑戦過程を下の4部構成に分けて紹介して行きたいと思います。
先ず、完成した入力画面とCSVからグラフ化した描画例をご覧ください。
入力設定画面
入力操作：CSVファイルを選択し、x軸、y軸に対するCSVの列番号を記入して，【入力終了】ボタンを押せばグラフが表示されます。 グラフ線の太さや色指定も変更できます。
ここから、【 準 備 編 】の説明に移ります。
Pythonの開発環境（開発ツール）について
Pythonの開発ツール(IDE)は無償から有償まで開発ツールは多数ありますが、今回はPythonに触れてみることが目的なので取敢えず、scriptの編集と実行が出来るmacOSに付属するショートカットアプリの「シェルスクリプトを実行」を利用することにしました。 また、ショートカットアプリを使うメリットは、完成したPythonを簡単に単独実行できるapp化が作成できる点です。 欠点は、Python特有のインデントエラーやシンタックスエラーに対応できません。 その点はChatGPTで校正を任せることにしました。
今回の開発環境をマトメると以下になります。
- macOSのショートカットアプリの利用：
下に示す「シェルスクリプトを実行」のシェルをpython3に設定し、テキストエディタにPython コードを記述して、実行ボタンを押せば、直ぐに実行確認ができます。 ただし、他の開発ツールと違い、シンタックスエラーやインデントエラーなどに対して弱点がありますので、この弱点は ChatGPT の力を借りて補うことにしました。 - ChatGPTの活用：
pythonはインデントに対して厳格で、往々にしてエラーが発生するので、ChatGPTを活用（質問）して仕様に対するscriptのアドバイスや、インデントの校正、プログラミングのミス・バグ修正などのサポートをしてもらいます。 - パソコン環境等：
M1-macbook air macOS:14.1(Sonoma)
python3のバージョン：Python 3.9.6 (/usr/bin/python3)
pip3のバージョン：pip 21.2.4 (/usr/bin/pip3)
M1-macbookにデフォルトでインストールされているpython3及びpip3を使用しています。（Homebrewなどでpythonをインストールしたものではありません） これは、下で示す「シェルスクリプトを実行」でpython3を選択するとシステムサイドの/usr/bin/python3が指定されるためです。
「シェルスクリプトを実行」の操作
ショートカットアプリを起動して、ファイル ＞ 新規ショートカット を選択し、「シェルスクリプトを実行」をアクションエリアにドラックするすると、下の画面が表示されます。
「シェルスクリプトを実行」画面で、下の「シェル」選択でpython3(/usr/bin/python3)を選びます。
テキストエディタ内にpython script コードを記述して 右上の [ ▶ ]ボタンを押すことでプログラムが直ぐに実行されます。
Pythonライブラリをインストール
今回使用するPythonのライブラリは、以下になります。 事前にインストールしておきます。
- flet：入力設定画面用のフレームワーク
TkinterでもOKですが、今回は今後のWeb対応も考慮してfletにしました。 - pandas：CSV読み込み用のライブラリ
- matplotlib：グラフ描画用のライブラリ
３つのライブラリをインストールするには、ターミナルを開いて、以下のコードでインストールします。
zsh or bash ↓ ３つのライブラリを一括インストール pip3 install flet matplotlib pandas ↓ インストール済ライブラリを確認するには pip3 list
ここから、PythonのFletライブラリを利用した【入力画面ウィンドウ作成編 】の説明に移ります。
入力画面ウインドウと各部の説明（入力仕様）
「シェルスクリプトを実行」画面で、テキストエディタ内にpython script コードを記述して 右上の [ ▶ ]ボタンを押すことでプログラムが実行され下の入力画面ウィンドウが開きます。
- 【CSVファイルを選択】ボタンを押すと、Finderが開きCSVファイルを選択します。（CSVのみ選択可能です） 選択されたファイル名がフルパスでボタンの下部に表示されます。
- 四角で囲まれたオプションボックス(TextField)内に必要な内容をセットします。
- 最後に、【入力終了】ボタンを押すと、入力画面が消えてグラフウィンドウが立ち上がります。
- オプションに誤入力があった場合、【入力終了】ボタンを押すと入力画面が消え終了します。
PythonのFletライブラリを利用した入力画面ウィンドウ作成
下のコードを、準備編で説明したmacOSのショートカットアプリ「シェルスクリプトを実行」のエディタ部にコピペします。黄色でハイライト行は、後段で説明している部分です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
### 入力画面ウィンドウ #### import flet as ft import sys # グローバル変数の初期設定 text1, text2, text3, text4, text5, text6, text7, selected_file = 'None', 'None', 'None', 'None', 'None', 'None', 'None', 'None' # ファイル名表示用のテキストラベルをグローバル変数として定義 text_label , file_path = None ,"non" def main(page: ft.Page): global text_label # text_label をグローバル変数として参照 page.title = "CSVからグラフ作成" # タイトル # ウィンドウサイズの外観設定 page.window_width = 500 page.window_height = 600 page.window_minimizable = False # 最小化ボタン page.window_maximizable = False # 最大化ボタン page.window_resizable = False # ウィンドウサイズ変更可否 page.window_always_on_top = True # ウィンドウを最前面に固定 # ファイル選択ダイアログを作成 file_picker = ft.FilePicker(on_result=file_selected) # 初期状態のラベルを作成（選択前） text_label = ft.Text("ファイルが選択されていません",color=ft.colors.BLUE, size=12, weight=ft.FontWeight.W_900) # テキスト入力欄を6つ作成 input1 = ft.TextField(label="x軸・列番号", width=100, value="2", height=40) input2 = ft.TextField(label="y軸・列番号", width=100, value="3", height=40) input3 = ft.TextField(label="graph Title", width=100, value="graph Title", height=40) # 未使用 input4 = ft.TextField(label="x軸・単位名", width=100, value="Time sec", height=40) input5 = ft.TextField(label="y軸・単位名", width=100, value="kbps", height=40) input6 = ft.TextField(label="line width", width=100, value="1", height=40) input7 = ft.TextField(label="line color", width=100, value="navy", height=40) # 「入力終了」ボタンが押されると入力値を変数に代入してウィンドウを閉じる関数 def on_submit(e): global text1, text2, text3, text4, text5, text6, text7 # 入力された値をグローバル変数に代入 text1 = input1.value # 入力欄1の値 text2 = input2.value # 入力欄2の値 text3 = input3.value # 入力欄3の値 現在は使用していません【グラフのタイトル用として、（予備）】 text4 = input4.value # 入力欄4の値 text5 = input5.value # 入力欄5の値 text6 = input6.value # 入力欄6の値 text7 = input7.value # 入力欄7の値 # ウィンドウを閉じる page.window.close() submit_button = ft.FilledButton("入力終了", on_click=on_submit) #### ウィンドウに部品を配置する #### # ページにファイル選択ボタンとラベルを追加 page.add(ft.Text("",size=0)) #スペースを追加 page.add( ft.OutlinedButton("CSVファイルを選択", on_click=lambda e: file_picker.pick_files()), file_picker, text_label ) page.add( ft.Container( ft.Column([ ft.Text("x軸とy軸に対応するCSVの列番号を入力します\n列番号が正しく無い時は画面が閉じます！", color=ft.colors.RED, size=12, weight=ft.FontWeight.W_900), ft.Row([input1, input2]), ]), margin=10, padding=20, bgcolor=ft.colors.BLACK12, border_radius=10, ) ) page.add( ft.Container( ft.Column([ ft.Text("ここにグラフオプションを入力します", color=ft.colors.RED, size=12), ft.Row([input4, input5]), ft.Row([input6, input7]), ft.Text("備考：グラフTitle名はcsvのy軸ヘッダーで表示"), ]), margin=10, padding=20, bgcolor=ft.colors.BLACK12, border_radius=10, ) ) page.add(ft.Row([ft.Text(" "), ft.Text("「入力終了」ボタンでグラフが表示されます。 \n 入力が不正の場合、グラフは表示されません! ",size=13), submit_button])) # ファイル選択結果を処理するコールバック関数 def file_selected(e): global text_label ,file_path # ファイルが選択された場合 if e.files: file_path = e.files[0].path # 選択したファイルのフルパスを取得 # ラベルのテキストを更新 # 拡張子が ".csv" か確認 if file_path.lower().endswith(".csv"): # CSVファイルの場合 text_label.value = f"選択されたファイル: {file_path}" else: # CSV以外のファイルが選択された場合 text_label.value = "ファイルの種類が違います。 CSVファイルを選択してください‼️" file_path = "non" # UIの更新 text_label.page.update() # アプリケーションを実行 ft.app(target=main) print(text1, text2, text3, text4, text5, text6, text7) print(file_path) ## ウィンドウ閉じる赤丸ボタンが押された時のエラー処理‼️ if file_path == "non" or text1 == "None": print("異常終了") sys.exit(0) else: print("正常終了") |
Python Scriptの簡単な説明
12行目：
def main(page: ft.Page)は、入力画面ウィンドウのレイアウト含め、全体が記述された関数で、119行目のft.app(target=main)で、def main(page: ft.Page)関数を呼び出しFlet を起動します。
16〜23行：
ウィンドウのサイズなどを設定しています。 ウインドウの上部にある最小化、最大化ボタンを無効、ウインドウサイズの変更を無効にしています。 更に、ウィンドウを最前面で表示する様にしています。
59〜96行目：
この部分が、ウィンドウ内の入力部品やボタンなどの配置及びコメントなどが記述されています。
124〜129行目：
ウインドウ上部の赤丸ボタンの機能を無効にすることが出来ません。 この代替で、ウインドウ上部の赤丸ボタンが押された時のエラーを回避する処理です。
その他：
print()コードで「シェルスクリプトを実行」の欄外に下で示す様に、【CSVファイルのグラフ化編】で使用するglobal変数や、終了状態を示すステータスが表示されます。
ここから、Pythonの matplotlibライブラリを利用した【CSVファイルのグラフ化とアプリ化】の説明に移ります。