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

第4回バーチャル学生LT On YouTube Live

Transcript

1. GUIライブラリ FLTK 使ってみた Sora Arakawa (arkw) 第4回バーチャル学生LT on YouTube Live 2020/05/09
2. はじめに ・ ５分しか無いので急ぎます ・ このスライドは42枚あります ・ SpeakersDeckにスライド上げるので 後でゆっくり見て下さい
3. 自己紹介 Sora Arakawa (arkw) ・ 静岡大学 情報学部 行動情報学科1年 └ 今は在宅授業です（そろそろ通学開始？） ・ 愛知県岡崎市在住 ・ conflict歌えます ・ 最近ウェブサイトをリニューアルしました └ https://arkw.net/
4. 自己紹介 ・ 2019/06/09 第25回学生エンジニアLT大会@名古屋
5. 【悲報】相変わらず理系の屑 英語 169点 / 200 地理Ｂ 83点 / 100
6. 本 題
7. 目次 １. FLTKについて ２. FLUIDについて ３. 実践
8. 目次 １. FLTKについて ２. FLUIDについて ３. 実践
9. FLTKとは？ ・ クロスプラットフォームのGUIライブラリ（主にLinuxだけど） ・ QtやwxWidgetsより軽量 ・ 日本語が使える ・ C++での利用に適している（Python、Ruby、Lua向けバインディングもある） ・ 「フルティック」と読む フルテカ
10. 選んだ理由 ・ Tiny Core Linuxで動く └ ISOファイル容量18MBの超軽量Linux └ FLTKが標準GUIライブラリのため他のものより楽 ・ C++が使える └ 競プロやってるので一応書けます
11. 目次 １. FLTKについて ２. FLUIDについて ３. 実践
12. FLUIDとは？ ・ FLTK用の開発ツール（IDEほど高機能ではない） ・ UIを設計できる ・ C++用のヘッダーとソースを自動生成 ・ エディタ機能は貧弱 ・ ビルド機能は無い（端末使え） ・ ＵＩが英語（勉強しろ） ※ FLUID無しでもFLTKの開発はできます
13. FLUIDとは？
14. 目次 １. FLTKについて ２. FLUIDについて ３. 実践
15. 今回の環境 ・ Ubuntu 16.04.6 LTS （32ビット） ・ g++ ・ FLTK 1.3 ・ FLUID ※５分しか無いので実演はありません
16. インストール sudo apt-get install libfltk1.3 libfltk1.3-dev ・ インストール容量は70MBくらい
17. 今回の目標 ・ FLUIDでウインドウを設計する。 └ ＰＮＧ形式の画像 └ ボタン（クリックでダイアログを表示） ・ FLUIDで生成したC++コードを端末でビルドする。 ・ 完成した実行ファイルをUbuntuとTiny Coreで実行する。
18. 今回の目標 ・ アプリ名は「hello」 以下、ファイル名にはこの名前を使用 例： hello.fl、hello.cxx、hello.h など
19. FLUIDの起動
20. (１) プロジェクトの作成 ・ プロジェクトは *.fl 形式のファイルで保存できる 「File」→「Save As…」で保存 ・ 同じ位置にコードや実行ファイルが生成されるので、 空のフォルダへの保存を推奨 ・ ファイルパスに日本語は入れない（海外製ツールなので一応）
21. FLUIDの構造 関数 （Function） ウインドウ （Window） ボックス、ボタン、メニューバーなど
22. (２) 関数の作成 ・ ウインドウより先に関数 「New」→「Code」→「Function/Method…」 ・ 「Name (args)」を空白にするとmain関数になる
23. (３) ウインドウの作成 「New」→「Group」→「Window…」 ← こうなっていればＯＫ
24. (３) ウインドウの作成 「Double_Window」をダブルクリックしてプロパティを表示 「Label」 タイトルバー 「X」 初期表示X座標 「Y」 初期表示Y座標 「Width」 画面幅 「Height」 画面高さ
25. (４) 画像の表示
26. (４) 画像の表示 ・ 「Box」を使う └ 文章や画像を表示するパーツ 「New」→「Other」→「Box…」
27. (４) 画像の表示 「Box」をダブルクリックしてプロパティを表示 「Image」 背景画像 「X」 X座標 「Y」 Y座標 「Width」 幅 「Height」 高さ
28. (４) 画像の表示 画像はRGB値として C++コードに直接書かれる あたまおかしい…
29. (５) ボタンの表示 ・ 「Button」を使う 「New」→「Buttons」→「Button…」 ・ プロパティはWindow、Boxと同じように入力
30. (５) ボタンの表示 ・ C++コードの入力 プロパティの「C++」タブをクリック 「Callback」欄にC++コードを直接入力 （クラスは自動生成）
31. (５) ボタンの表示 ・ 何書けば良いの？ ドキュメント読め（英語） https://www.fltk.org/doc-1.3/modules.html
32. C++コードの生成 ・ 「File」→「Write Code…」 ・ hello.cxx と hello.h が生成される
33. ビルドの前に… ・ hello.h を開く ・ 必要なモジュールの #include を書き足す └ 各関数の依存モジュールはドキュメントに書いてあります └ 今回 （fl_message) は fl_ask.H が必要 #include <FL/fl_ask.H> // これを書き足す
34. ビルドの前に… ・ hello.h を開く ・ 必要なモジュールの #include を書き足す └ ドキュメントの関数説明に書いてあります └ 今回 （fl_message) は fl_ask.H が必要 ・ この作業は「Write Code…」する度に必要 めんどい！！！
35. コンパイル ・ 予めcdコマンドでプロジェクトフォルダに移動 fltk-config --compile hello.cxx → 実行ファイル「hello」が生成される
36. 動作例（Ubuntu）
37. 動作例（Ubuntu）
38. 動作例（Tiny Core Linux）
39. 動作例（Tiny Core Linux）
40. まとめ ・ Linux推奨だけどWindowsでも使える ・ 32ビット版OS推奨 ・ 困ったらドキュメントを読む ・ 入門したばかりなのでFLTKわからない ・ FLUIDの仕様が割とクソ ・ FLUIDの謎挙動に注意
41. 各種データ配布 ・ 「hello」ソースコード、バイナリ ・ 「hello2」ソースコード、バイナリ（日本語テスト） のダウンロード → http://arkw.client.jp/ ※ パブリックドメインとします。自由に使って下さい
42. おしまい