GUIライブラリ FLTK 使ってみた

GUIライブラリ FLTK 使ってみた Sora Arakawa (arkw) 第4回バーチャル学生LT on YouTube Live
2020/05/09

はじめに・５分しか無いので急ぎます・このスライドは42枚あります・ SpeakersDeckにスライド上げるので後でゆっくり見て下さい

自己紹介 Sora Arakawa (arkw) ・静岡大学情報学部行動情報学科1年 └ 今は在宅授業です（そろそろ通学開始？）
・愛知県岡崎市在住・ conflict歌えます・最近ウェブサイトをリニューアルしました └ https://arkw.net/

自己紹介・ 2019/06/09 第25回学生エンジニアLT大会@名古屋

【悲報】相変わらず理系の屑英語 169点 / 200 地理Ｂ 83点 / 100

本題

目次１. FLTKについて２. FLUIDについて３. 実践

FLTKとは？・クロスプラットフォームのGUIライブラリ（主にLinuxだけど）・ QtやwxWidgetsより軽量・日本語が使える・ C++での利用に適している（Python、Ruby、Lua向けバインディングもある）・
「フルティック」と読むフルテカ

選んだ理由・ Tiny Core Linuxで動く └ ISOファイル容量18MBの超軽量Linux └ FLTKが標準GUIライブラリのため他のものより楽・
C++が使える └ 競プロやってるので一応書けます

FLUIDとは？・ FLTK用の開発ツール（IDEほど高機能ではない）・ UIを設計できる・ C++用のヘッダーとソースを自動生成・エディタ機能は貧弱・
ビルド機能は無い（端末使え）・ＵＩが英語（勉強しろ） ※ FLUID無しでもFLTKの開発はできます

FLUIDとは？

今回の環境・ Ubuntu 16.04.6 LTS （32ビット）・ g++ ・ FLTK
1.3 ・ FLUID ※５分しか無いので実演はありません

インストール sudo apt-get install libfltk1.3 libfltk1.3-dev ・インストール容量は70MBくらい

今回の目標・ FLUIDでウインドウを設計する。 └ ＰＮＧ形式の画像 └ ボタン（クリックでダイアログを表示）・ FLUIDで生成したC++コードを端末でビルドする。・
完成した実行ファイルをUbuntuとTiny Coreで実行する。

今回の目標・アプリ名は「hello」以下、ファイル名にはこの名前を使用例： hello.fl、hello.cxx、hello.h など

FLUIDの起動

(１) プロジェクトの作成・プロジェクトは *.fl 形式のファイルで保存できる「File」→「Save As…」で保存・同じ位置にコードや実行ファイルが生成されるので、
空のフォルダへの保存を推奨・ファイルパスに日本語は入れない（海外製ツールなので一応）

FLUIDの構造関数（Function）ウインドウ（Window）ボックス、ボタン、メニューバーなど

(２) 関数の作成・ウインドウより先に関数「New」→「Code」→「Function/Method…」・「Name (args)」を空白にするとmain関数になる

(３) ウインドウの作成「New」→「Group」→「Window…」 ← こうなっていればＯＫ

(３) ウインドウの作成「Double_Window」をダブルクリックしてプロパティを表示「Label」タイトルバー「X」初期表示X座標「Y」初期表示Y座標「Width」
画面幅「Height」画面高さ

(４) 画像の表示

(４) 画像の表示・「Box」を使う └ 文章や画像を表示するパーツ「New」→「Other」→「Box…」

(４) 画像の表示「Box」をダブルクリックしてプロパティを表示「Image」背景画像「X」 X座標「Y」 Y座標「Width」
幅「Height」高さ

(４) 画像の表示画像はRGB値として C++コードに直接書かれるあたまおかしい…

(５) ボタンの表示・「Button」を使う「New」→「Buttons」→「Button…」・プロパティはWindow、Boxと同じように入力

(５) ボタンの表示・ C++コードの入力プロパティの「C++」タブをクリック「Callback」欄にC++コードを直接入力（クラスは自動生成）

(５) ボタンの表示・何書けば良いの？ドキュメント読め（英語） https://www.fltk.org/doc-1.3/modules.html

C++コードの生成・「File」→「Write Code…」・ hello.cxx と hello.h が生成される

ビルドの前に… ・ hello.h を開く・必要なモジュールの #include を書き足す └ 各関数の依存モジュールはドキュメントに書いてあります
└ 今回（fl_message) は fl_ask.H が必要 #include <FL/fl_ask.H> // これを書き足す

ビルドの前に… ・ hello.h を開く・必要なモジュールの #include を書き足す └ ドキュメントの関数説明に書いてあります
└ 今回（fl_message) は fl_ask.H が必要・この作業は「Write Code…」する度に必要めんどい！！！

コンパイル・予めcdコマンドでプロジェクトフォルダに移動 fltk-config --compile hello.cxx → 実行ファイル「hello」が生成される

動作例（Ubuntu）

動作例（Tiny Core Linux）

まとめ・ Linux推奨だけどWindowsでも使える・ 32ビット版OS推奨・困ったらドキュメントを読む・入門したばかりなのでFLTKわからない・
FLUIDの仕様が割とクソ・ FLUIDの謎挙動に注意

各種データ配布・「hello」ソースコード、バイナリ・「hello2」ソースコード、バイナリ（日本語テスト）のダウンロード → http://arkw.client.jp/ ※ パブリックドメインとします。自由に使って下さい

おしまい

More Decks by Sora Arakawa