GUIアプリの作り方 - 浜村拓夫（・∀・）作品集

コンピューター（電子計算機）を搭載した機器の操作は、CUI（キャラクター・ユーザー・インターフェース）よりも、GUI（グラフィック・ユーザー・インターフェース）の方が、手軽で便利ですね。

コンピュータ用語で「ユーザインタフェース」 (User Interface) とは、「コンピュータと人間を結びつけている仕掛け」のことを言います。

皆さんが普段使っているコンピュータは、OS (Operating System) の種類 (Windows、Linux、Mac OS など) に関係なく、ウィンドウやアイコンなどをマウスで操作して、キーボードで文字入力を行うタイプの仕掛けが使われています。これは一般的に GUI (Graphical User Interface) のシステムと言います。

これに対し、kterm 等のターミナル内でコンピュータを操作する場合はキーボード入力と画面の文字表示のみでコンピュータを操作することになります。このような仕掛けを CUI (Character User Interface) と言います。

●GUIアプリの作り方

GUIの基本的な作り方は、

(1) 「GUIビルダー」等と呼ばれる、画面を作成するツールを使って、操作に必要なボタン等を配置して、画面を作る。

(2) プログラミング言語を使って、ボタン等を押したときに行われる処理を作る。

(3) 画面のボタンと、プログラムの処理を結び付けて、実際に機能するようにする。

という３ステップを踏めばOK、とのこと。

（参考）

・RubyアプリケーションのGUIの作り方を教えて下さい(1668)｜teratail

GUI アプリの一般的な作り方ですが、画面はコードで書いたり、 XML で書いてそれから生成したりします。ただ、実際には GUI ビルダーと呼ばれるツールを使ってボタンやテキストボックスなどの部品をレイアウトすることが多いです。 Visual Studio や Eclipse などの IDE がその機能を持つこともあります。

GUI の動作は基本的にイベント駆動で、呼び方はいろいろですが、イベント-コールバックという仕組みです。例えばボタンの"クリック"のイベントにコールバック関数を対応付けておくと、ボタンがクリックされた時にその関数が実行されます。その関数にいろいろなアプリの処理を書いておきます。

web アプリにある GET, POST のようなデータのやり取りは GUI アプリにはありません。
各部品がオブジェクトになっているのが一般的で、テキストボックスなどの内容をメソッドで直接取得することができます。
ただ、簡単にアクセスができすぎるため、モジュール性を上げる目的であえてやり取りを制限するといったことはあります。

web アプリのイメージで言えば、画面のレイアウトが html で、これを GUI ビルダーを使って作り、残りの部分は全て JavaScript で作るようなものです。ただ、 JavaScript と違い、 html に埋め込むのではなく、別ファイルで作りますし、直接ファイルや DB にアクセスもできます。

web アプリは簡単だけど、 GUI アプリは難しそうというのはただの慣れの問題だと思います。
私などは GUI アプリをメインでやっているので、 web アプリの GUI ビルダーの無いところや GET, POST のようなデータのやり取りは面倒だと感じてしまいます。

●プラットフォーム別のGUIビルダー

プラットフォーム別の、GUIビルダーの一例。

プラットフォーム	GUIビルダー	フレームワーク	プログラミング言語
Webアプリ	DreamWeaver	Ruby on Rails	JavaScript、PHP、Ruby
iOS	Xcode	iOS SDK	Swift、Objective-C
Android	Android Studio	Android SDK	Kotlin、Java
Windows	Visual Studio	.NET Framework	C#