こんにちは。ビデオリサーチの新卒社員フルヤです。
4月に入社し、ITサービス推進ユニットに配属された私ですが、実は大学時代は文学部でした。そんなド文系IT未経験者の私は、日々たくさんのことを学びながらお仕事に励んでおります。
そこで、私の日々の業務や挑戦したことなどを、月一で、ここテックブログにてお届けしていきたいと思います！
私は現在、自動化アプリを作成中なので、初回はそのフロントエンド（画面）作成の一部をお届けしたいと思います！
（このアプリ作成を通して私は、プログラミングの世界では、フロントエンド（画面など目に直接触れる表面の部分）とバックエンド（機能やデータなど中身の部分）というものがあり、それぞれ専門のエンジニアがいるということを知りました。外と中で別々に作るという考えが私の中にはなかったので、驚きでした。一緒に作っているわけではないんですね…！）
使用した言語
今回アプリ制作に使用したのはPythonのtkinterという、GUIアプリを作成できるモジュールです。
ボタンなどの配置には、「Frame」、「pack」、「grid」というものを使うとできるということを教えてもらいました。
・Frame：複数のウィジェット（ボタンなど）を一つにまとめることのできる入れ物のようなものです。
・pack：指定した方向にどんどんウィジェットを詰め込んでいくものです。詰める方向は「side」で決めます。その他、横方向の隙間の設定（padx）、縦方向の隙間の設定（pady）などもできます。
・grid：ウィジェットを２次元的に配置させるものです。行位置は「row」、列位置は「column」で決めます。その他、横方向の隙間の設定（padx）、縦方向の隙間の設定（pady）、配置の寄席方向の指定(sticky)などもできます。
使用した生成AIサービス
今回コードを書くにあたって、ChatGPTという生成AIサービスを使用しました。
生成AIとは、人工知能の一種で、データやパターンを学習し、そこから新しい情報コンテンツを生成することができる技術のことです。
ChatGPTとは、高度な自然言語処理技術が使われていて、人間を相手にしているかのような会話のキャッチボールをすることができるサービスです。
自分で考えてみる
今、このようなものが出来上がっています。
ここで、一番右端（赤丸の所）に「実行」のボタンを付けたいとなりました。今からその作業をやっていきます！
まずは私がこうかな？と思ったコードを書いて実行してみました。
実行結果↓
ボタンはできたけれど、そこじゃない(´；ω；`)
フレームのcolumnを1にしてみました。（ほかのフレームたちはcolumn=0）
実行結果↓
右に行き過ぎてしまいました。
「label（文字を表示できる）」を使って、空白をたくさん入れ、その横にボタンを設置してみました。
実行結果↓
思い通りの場所に置けたけれど、やり方があまりにも原始的、、
絶対もっと良い方法があるはず！
生成AIを活用してみる
もっと綺麗なコードを書きたい。しかし、もう私の考えは出し尽くした、ということで、生成AIに相談してみました。
私：～書いたコード（省略）～
このようなコードを書きました。
ここの、空白テキストをたくさん入れて実行ボタンを右に寄せているという手法はスクリプトとして美しくないので、実行ボタンの位置は変えずに、もっと美しいスクリプトになるよう考えて欲しいです。
AI：コードを美しくするために、グリッドレイアウトを使用してウィジェットを配置する方法を提案します。以下は、修正されたコードです。
この修正により、実行ボタンは右寄せになり、空白テキストを使用する必要がなくなります。また、execution_button_frameのpadyを増やして、実行ボタンが下部に余白を持つようにしました。
packを使って右に配置してくれているし、なんかやってくれたっぽい？！
ということで、実行してみます。
実行結果↓
惜しい！右にいきすぎです。もう少し左にあったら良いのに。
その思いを伝えます。
私：実行してみたら、私の理想より実行ボタンが右に行ってしまっていました。縦の位置はそのままでいいのですが、横の位置が、ちょうど「Auto」ボタンの真下にくるように修正して欲しいです。
AI：実行ボタンの位置を「Auto」ボタンの真下に配置するためには、グリッドレイアウトを調整する必要があります。具体的には、実行ボタンを配置するフレームのカラムスパンを調整し、適切な位置に配置します。
以下のようにコードを修正してみてください：
この修正では、execution_buttonをexecution_button_frameのカラム2に配置し、sticky="e"を指定して右寄せにしています。これにより、実行ボタンが「Auto」ボタンの真下に配置されるはずです。
実行ボタンの配置方法がpackからgridに変わっているが結果はいかに…？
実行結果↓
振り出しに戻ってしまいました。
違う方法が無いか聞いていきます。
私：今のとは違う方法で最初に提示した、空白テキストをたくさん入れて「実行」ボタンを右に寄せているという手法で作成したスクリプトを実行したときと同じ位置に「実行」ボタンが来るようなコードを教えてください。
AI：了解しました。gridレイアウトマネージャを使用して、空白テキストを使わずに「実行」ボタンを右に寄せる方法を提案します。gridのカラムの重みを調整することで、ボタンを右に寄せることができます。
以下のように修正してみてください：
このコードでは、execution_button_frameのカラムの重みを設定することで、execution_buttonを右に寄せています。これにより、空白テキストを使わずにボタンを右に配置することができます。
どうやらcolumnには重みがつけられるらしいです。（後ほど生成AIに聞いたところ、weightとは、行や列がウィンドウのサイズ変更に対してどの程度の割合で伸縮するかを指定するもので、大きいほどスペースが大きくなるらしいです。伸縮の割合は、各columnの合計に対する比率で決まるそうです。今回教えてもらったコードでは、frameの最初のcolumn（インデックス0）には重みをつけず（重み0）、2番目のcolumn（インデックス1）に重み1が設定してあり、ボタンは2番目のcolumnに配置されています。）
実行結果↓
先ほどと同じく、右にいきすぎています。
もしかして、AIさんはただ右に寄せれば良いと思っている…？もしそうであるならばただ右に寄せれば良い訳ではないと、もっと強調しなければ。具体的な位置を指定してみます。
私：右には寄ったのですが、私が希望している位置である「Auto」ボタンの真下には来ていなくて、それより少しだけ右に寄ってしまっています。この「実行」ボタンをもう少しだけ左に移動させて、「Auto」ボタンの真下くらいに配置させることはできますか？
AI：「実行」ボタンを「Auto」ボタンの真下に配置するためには、グリッドレイアウトのカラムスパンを調整する方法が有効です。以下のように修正してみてください。
このコードでは、execution_buttonをexecution_button_frameのカラム1に配置し、sticky="e"を使用して右寄せにしています。これにより、「Auto」ボタンの真下に「実行」ボタンが配置されるはずです。
実行結果↓
左に戻ってしまいました。
（後々気づいたのですが、これと、私が初めに作って左端に寄ってしまった時と、2つ前でAIに頼んで左端になってしまった時とは、実行ボタンのcolumnが違うだけであとは同じでした。columnを変えても意味がないということにもう少し早く気づいていればもっと早くゴールにたどり着いていたかもしれないです(´;ω;｀)）
私：また左端に戻ってしまいました。
AI：「実行」ボタンを「Auto」ボタンの真下に配置するためには、グリッドレイアウトを適切に使用する必要があります。以下のコードでは、execution_button_frameのカラム設定を調整し、「実行」ボタンが「Auto」ボタンの真下に来るように配置します。
このコードでは、execution_button_frameのカラムの重みを設定し、execution_buttonをカラム1に配置して、右寄せにしています。これにより、「Auto」ボタンの真下に「実行」ボタンが配置されるはずです。
またweightが出てきました。さっきはフレームを２つに分けてweightを設定していましたが、今回はさらに細かく3つに分けてくれました。今度こそ行けるか！？
実行結果↓
うわぁ惜しい！さっきの右に行き過ぎた時とこれの間くらいになればいいのに。
その思いをそのまま伝えてみます。
私：もう少し右に寄せられるような、でも「このコードでは、execution_button_frameのカラムの重みを設定することで、execution_buttonを右に寄せています。これにより、空白テキストを使わずにボタンを右に配置することができます。」の時ほどは右にいかないようなコードを書いてください
AI：了解しました。execution_button_frameのカラムの重みを調整しつつ、execution_buttonの位置を微調整する方法を試してみましょう。以下のコードを試してみてください。
このコードでは、execution_button_frameのカラムの重みを設定し、execution_buttonを中央寄せにしています。これにより、ボタンが「Auto」ボタンの真下に近い位置に配置されるはずです。
いやさっきとコード変わってないですやん。
もうこのweight作戦は出尽くしたということなのでしょうか？
別の方法を考えてもらいます。
私：位置が変わっていないです。execution_button_frameのカラムの重みを調整しつつ、execution_buttonの位置を微調整する以外でいい方法はないですか？
AI：了解しました。execution_button_frameのカラムの重みを調整する以外の方法として、gridのpadxオプションを使ってボタンの位置を微調整する方法があります。これにより、ボタンの位置を細かく調整できます。
以下のコードでは、padxオプションを使って「実行」ボタンの位置を微調整しています。
このコードでは、execution_buttonのpadxオプションを使って、ボタンの位置を微調整しています。padx=(200, 0)の値を調整することで、ボタンの位置をさらに細かく調整できます。必要に応じてこの値を変更して、理想の位置にボタンを配置してください。
なんと、今回は微調整の方法まで教えてくれました！（後にpadxオプションはどのようなものか聞いてみたところ、padxオプションはウィジェットの横方向の余白を設定するためのオプションで、padx=(左, 右)で設定できるらしいです。今回は、左に200の余白をつけてくれています。）
実行結果↓
これ自体は理想的ではないけれど、教えてもらったように、padxの値を変更すればうまくいきそうです！
padx = (300, 0)↓
惜しい。もう少しだけ右にいってくれれば。
padx = (350, 0)↓
少し行き過ぎてしまいました。
padx = (330, 0)↓
きたーー！！！これです！
遂に完成しました！長かった( ；∀；)
まとめ
いかがだったでしょうか。
IT初心者新卒社員の私でも、生成AIを活用することでコードを書くことができました！
しかし、納得のいくものに辿り着くまで時間がかかりすぎていますし（しれっとカットしていますが、実はもっと会話しては失敗してを繰り返しておりました）、今回辿り着いたコードは最適解ではないかもしれません。
生成AIとの会話力も、Pythonへの理解も、まだまだ伸び代しかないので、これからもたくさん学んで精進していきたいと思います！
今回はコードについての質問をしていましたが、生成AIはコードを書く以外にも、アイデア出しや、タスク整理など、使い方次第で様々な場面において役に立つツールです。皆さんも、活用してみてはいかがでしょうか？
お読みいただきありがとうございました！
