投稿

2月, 2022の投稿を表示しています

【pack/grid/placeの使い分け】Pythonのtkinterで制作のGUIアプリでの部品のレイアウト方法【Docker & Jupyterlab環境】

イメージ
はじめに 一応デザイナーでもあるので、tkinterで制作のGUIアプリであろうと、レイアウトには気を配りたい。 性格的に、寸法に寸分違わず配置したい性分でもある。 ということで、tkinterで制作のGUIアプリでの部品のレイアウト方法について解説していく。 tkinterでのレイアウト手法 pack 、 grid 、 place の3種類がある。以下に各々の概要を記す。 pack 一番簡単なレイアウト手法。 配置用の数値を用いずに、画面上部から下へ順に配置するだけならこのpackで十分。 grid 画面を任意の数に分割された碁盤の目に見立て、それに合わせてレイアウトする手法。 一見きっちりレイアウト出来そうだが、凝ったレイアウトの場合、思わぬところでレイアウトが崩れる場合があり、制御が難しくなる嫌いがある。 入り組んだレイアウトではないが、そこそこのレイアウトをしたい時に。 place 画面のある点(分かりやすいのは画面左端上)を基点に、画面を平面上の直交座標系(デカルト座標系)に見立て、パーツの位置を(x, y)で決めて配置する手法。 他の影響を受けずレイアウト出来る。 Adobe IllustratorやAdobe InDesignと同じ考え方なので、自分的には一番しっくり来る。 入り組んだ、凝ったレイアウト向け。 ここでは、 pack 、 grid の使い方は他に譲り、 place の使い方を解説する。 placeでのレイアウト手法 紙面デザインやWEBデザインでのレイアウト手法として、 Grid System というものがある。 紙面や画面を何分割かしてグリッドを作り、そのグリッド上にパーツを配置する手法である。 gridは恐らくこの手法の考えを取り入れたものなのだろうが、凝った配置ではレイアウトが崩れる。 それよりも、place使用時にこの手法を採用する方がレイアウトを制御しやすい。 画面の縦横を適当な長さで分割し、交差点の座標に合わせて配置するだけである。 Windowの画面サイズを決める 例では、1920x1176にしている(自分のPCの画面フルサイズ)。 グリッドを定める 画面サイズを適宜何分割かにして、というかぶっちゃけ適当に縦横サイズを各々素因数分解いって、自

【完成版】Pythonのtkinterで辞書の語義を並列表示するGUIアプリを制作してみた【Docker & Jupyterlab環境】

イメージ
はじめに tkinterで初めてのGUIアプリ開発 を行う。 制作したいのは、アメリカ版とイギリス版を有するとある英語辞書サイトから調べたい単語の語義をスクレイピングして 並列表示 させるインターフェイス。 Pythonは様々なモジュールがあるので色々なことが出来るだろうし、実際それに助けられた訳だが、 実装するのに難儀した意外なコトも存在 した。 それの 解決方法は英語サイト にあって、それを見つけて試してテストして思い通りの結果になった時のアレときたら(酒飲むべきだろうが何せ下戸なもので)。 ということで今回は、完成できた喜びを噛み締めつつ、 難儀したコトの実装方法の概説 をしていくことにする。 コードの各詳説は別エントリにて行う予定。 開発環境 Python、およびそのモジュールは、Docker内に環境を整備し、Jupyterlabで操作していく。 マシン: MacBook Pro OS: macOS Big Sur (11.6.3) 仮想環境: Docker Desktop (4.4.2 (73305)) エディタ: JupyterLab (3.2.9)、 Sublime Text (Build 4126) XQuartz :2.8.1 python :3.8.10 tkinter :8.6 requests :2.27.1 beautifulsoup4 :4.10.0 階層構造 ファイルのディレクトリは以下の通りに予め設定。 desktop └python_webscrapingフォルダ      ├Docker Composeファイル      ├Dockerfile      └workフォルダ └pythonファイル(jupyterlabで作成・編集) Xquartzの導入と設定 上記に追加で、 予めXquartzの導入と設定が必要 になります。 導入および設定の方法は、下記エントリの『 1 MacにXQuartzをインストール 』および『 2 XQuartzの環境設定を開く 』をご覧あれ。 MacでPythonのGUIライブラリをDocker Container内のJupyterlabから稼働させる方法 Doc