Pythonで作るGUI付き翻訳支援アプリの作成 Part2 レイアウトとディレクトリ構成

アプリのレイアウト

今回開発するアプリのレイアウトを検討します。図1で示すように、今回はメイン画面とDeepL設計画面の２つのウィンドウを作成します。それぞれの画面を行き来出来るようにし、どちらか一つの画面しか表示されないようにしていきます。

図1

メイン画面の検討

メイン画面には、①翻訳したい原文を入力するためのMultilineウィジェットを設定します。②と③もMultilineウィジェットですが、それぞれDeepL翻訳の結果と、その結果をさらにDeepLで逆翻訳した結果を表示させるようにウィジェットを配置します。①と③は、同じ言語が入りますので比較し易いように縦に並べて、④で示すように画面全体を縦に２分割します（横に並べても構いませんが、その場合はレイアウトを横に分割します）。

⑤には、DeepL翻訳＆逆翻訳の実行ボタンウィジェットを設置します。このボタンが押されるとDeepL APIで翻訳＆逆翻訳が実行されます。

⑥は、DeepLの現在の使用量を表示させます。DeepL API feeは500,000文字まではフリーです。DeepL API Proは無制限になりますが、予め予算管理機能もついており何文字まで使用する事にするかを決めておく事が出来ます。使い過ぎを防ぐためにも、常に表示出来るようにしておきます。

⑦の歯車画像でDeepLの設定画面に遷移出来るようにします。

DeepL設定画面の検討

DeepL設定画面には、⑧APIキーを入力するインプットウィジェットを設定します。毎回入力するのは手間ですので、設定ファイルの読み出しと更新を出来るようにします。
⑨の更新ボタンを押すことで、APIキーに変更があった場合は設定ファイルが更新されて、メイン画像に遷移します。変更がなかった場合もメイン画面に遷移するようにします。

アプリのディレクトリ構成

今回開発するアプリのディレクトリ構成を検討します。１つのファイルに全ての処理やGUIレイアウトをコーディングしても良いのですが、再利用がし難くなりますので機能別にファイルを分けたいと思います。また、静的なファイル（画像など）はstaticフォルダに格納する事とします（djangoでよく使われています）。

DeepLTranslator
├── main.py
├── static
│   ├── font_.py
│   ├── gear.png
│   ├── deepL_logo.png
│   └── deepL_btn.png
├── config.ini
├── deepl.py
└── gui.py

今回のプロジェクトフォルダをDeepLTranslatorとして、ルートディレクトリとします。ルート直下には、プログラムのエントリーポイントの,、設定ファイルのconfig.ini、deepl翻訳に関連するdeepl.py、そしてGUIに関連するgui.pyを作成していきます。今回は、イベントが少ないのでmain.pyにイベント発生時の処理をコーディングしていきます。
また、staticフォルダ内にはGUIで使用する画像およびお気に入りのフォントを入れたfont.pyを作成します。
将来的にこのアプリに機能を追加したい場合は、例えばGmail送信機能を追加する場合は、gmail.pyを作成してその中にgmailに関わる処理をコーディングします。また、gmailへのログイン情報などはconfig.iniに保存するようにします。

レイアウトとディレクトリ構成について検討が終了しましたので、次回はmain.pyとgui.pyについて作成していきます。

記事が参考になりましたら、❤️を押していただけると励みになります😊