【 GUI講座：基礎 】第１回 GUIって何？
今回のお話
- 本講座について
- 用語を理解しよう
- UI
- CUI
- GUI
- 次回以降の内容について
- まとめ
1. 本講座について
本講座は処理単体の自作ツールに、グラフィカルなUIを付けられるようになることを最終目的とします。
【 注意事項 】
- WPF、Tkinter の２通りで、基礎的なことを説明します。
- 筆者が記載する内容がすべて正しいとは限りません。
誤った情報があるかもしれませんので、ご注意ください。 - プログラミングの基礎的な事項は理解している前提で進めます。( for文、if文、関数 etc. )
【 更新時期 】
大体1か月程度の間隔で更新しようと考えていますが、需要がない場合は打ち切り ます。
見てるよって方は 絵文字でもいいのでコメントをいただけると大変ありがたい です。
やる気と気力があれば早く更新することもあるかも…
【 質疑応答について 】
この講座が続いている間は、コメントを見るようにします。
質問に関しては、私に分かる範囲で解答します。
2. 用語を理解しよう
今回は、講座を始める前の事前説明会です。
さっそくですが、”GUI” とは何でしょうか。そもそも “UI” って…？
よくよく考えてみると、意味を知らない人もいるのではないでしょうか。
これらの言葉の意味を知らなくてもアプリは作成できますが、せっかくなので意味を押さえておきましょう。
2.1. UI
“UI” とは、”User Interface” の略です。
ユーザーインターフェース。何かよくわからん横文字でなんのこっちゃという話ですよね。
インターフェースは、２つの事柄を接続する役割を持っているものです。
なんていくら言葉で詳しく言ってもようわからんですよね。
具体例で考えてみましょう。
【 例1：PC-人 】
さて、あなたの目の前には、パソコン君がいます。
手始めに、簡単な計算をやってもらいましょうか。
となったとき、パソコン君だけあっても、あなたは何もできなくて困ってしまう訳です。
では、何があればいいか考えてみましょう。
- あなたの指示をパソコン君に伝える手段：キーボード
- パソコン君からの応答を確認する手段：ディスプレイ
ひとまずこれぐらいあれば何とかなりそうです。
というわけで、今出てきたキーボードとディスプレイがパソコン君とあなたを繋ぐ UI というわけです。
他にも、ペンタブやマウス、タッチパネルなんかも同様にUIです。
【 例2：電子レンジ-人 】
全然違う例でも考えてみましょう。
あなたは冷凍食品をレンチンして食べたいと思っています。
目の前にはマイクロ波を内部に発生させる箱型の機械、いわゆる電子レンジがあります。
が、ただの箱です。では困るわけです。
出力ワット数は？時間は？いつ運転開始する？
これらを設定するために、以下 UI があるわけです。
- 出力や時間を設定するダイヤル
- 設定値を表示するデジタル表示盤
- 開始ボタン（あったりなかったり）
こんな感じで何となくのイメージが持てたでしょうか？
人と機械を繋ぐ仲介役って感じです。
2.2. CUI
“CUI” とは、”Character User Interface” の略です。
ユーザーインターフェースにキャラクターが付きました。はて、キャラクターとは？
これはプログラムを書いている皆さんなら、何か思い当たるものがあるのではないでしょうか。
「Char型」ってありますよね。何だかすごくそれっぽい気がしませんか？
Chara型って文字ですよね。つまり、CUI とは 文字でパソコン君とやり取りするユーザーインターフェースってことです。
cmd や PowerShell なんかがこれに値します。
2.3. GUI
ようやく本題です。じゃあ、結局 “GUI” って何なんでしょうか。
ずばり、”Graphical User Interface” の略です。
グラフィカルなUI、つまり画像や図、表、グラフなどの視覚的なUIっていうことです。
Windows でファイルやフォルダを操作するときに使用するエクスプローラー、
Windows の設定画面、VisualStadio、VSCode、電卓アプリなんかもありますよね、
これらが全部GUIっていうことです。
3. 次回以降の内容について
以下内容を予定しています。
- 第１回 GUIって何？
- 第２回 ベース機能の作成
- 第２.１回 ツールの作成（CUI）
- 第２.２回 画面デザインの作成
- 第３回 WPF
- 第３.１回 MVVMモデルについて
- 第３.２回 Viewの実装
- 第３.３回 Modelの実装
- 第３.４回 ViewModelの実装
- 第４回 Tkinter
- 第４.１回 MVCモデルについて
- 第４.２回 Tkinter：Viewの実装
- 第４.３回 Tkinter：Modelの実装
- 第４.４回 Tkinter：Controllerの実装
なんて沢山書きましたが、全部やるかはわからないです。私のやる気次第ですね。
書き出してみたら意外と量が多かったので、全然やる気が続かないかも…
もし最後まで見たいよって方がいましたら、なんとか私のやる気を出させてください。
そうじゃないと、もうすでに途中で辞めちゃう気がしています…
4. まとめ
今回は事前知識として、GUIという言葉の意味について確認をしました。
GUIとはグラフィカルなUIのことで、主に画面上に表示する画像や図、
表などの視覚的な情報で人と機械を繋ぐ機能です。
次回はGUIを作る前段階として、何かしらのツールを作りたいと思います。
これから何かいいネタがないか探す旅に出るので、そんなにすぐに更新できません。
思い立ったら更新します。多分。
コメント入力