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

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. おしまい