Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
GUIライブラリ FLTK 使ってみた
Search
Sora Arakawa
May 09, 2020
Programming
0
2.5k
GUIライブラリ FLTK 使ってみた
第4回バーチャル学生LT On YouTube Live
Sora Arakawa
May 09, 2020
Tweet
Share
More Decks by Sora Arakawa
See All by Sora Arakawa
非root化Androidスマホでも動く仮想マシンアプリを試してみた
arkw
0
240
技術島の指定ツール「LaTeX」で同人誌を作ろう
arkw
2
170
ポスト・パソコン時代のジャンク遊び スマートデバイス編
arkw
0
130
ジャンカーよ、車も買え ~10分でわかる!? 中古車選び入門~
arkw
1
120
arkw vs. サーバ移転 -2024年1月版-
arkw
0
290
なれる! 村上さん Misskeyサーバ構築入門
arkw
0
540
Cloudflare Tunnelで自宅サーバを公開してみた
arkw
0
1.5k
5分でわかる!? 7セグメントLED制御
arkw
0
73
ヤフオクで原付買った話
arkw
0
230
Other Decks in Programming
See All in Programming
Hack Claude Code with Claude Code
choplin
4
2k
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
18k
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
120
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
100
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
13
3.5k
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
効率的な開発手段として VRTを活用する
ishkawa
0
140
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
770
技術同人誌をMCP Serverにしてみた
74th
1
640
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Why Our Code Smells
bkeepers
PRO
336
57k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
RailsConf 2023
tenderlove
30
1.1k
Faster Mobile Websites
deanohume
307
31k
4 Signs Your Business is Dying
shpigford
184
22k
Transcript
GUIライブラリ FLTK 使ってみた Sora Arakawa (arkw) 第4回バーチャル学生LT on YouTube Live
2020/05/09
はじめに ・ 5分しか無いので急ぎます ・ このスライドは42枚あります ・ SpeakersDeckにスライド上げるので 後でゆっくり見て下さい
自己紹介 Sora Arakawa (arkw) ・ 静岡大学 情報学部 行動情報学科1年 └ 今は在宅授業です(そろそろ通学開始?)
・ 愛知県岡崎市在住 ・ conflict歌えます ・ 最近ウェブサイトをリニューアルしました └ https://arkw.net/
自己紹介 ・ 2019/06/09 第25回学生エンジニアLT大会@名古屋
【悲報】相変わらず理系の屑 英語 169点 / 200 地理B 83点 / 100
本 題
目次 1. FLTKについて 2. FLUIDについて 3. 実践
目次 1. FLTKについて 2. FLUIDについて 3. 実践
FLTKとは? ・ クロスプラットフォームのGUIライブラリ(主にLinuxだけど) ・ QtやwxWidgetsより軽量 ・ 日本語が使える ・ C++での利用に適している(Python、Ruby、Lua向けバインディングもある) ・
「フルティック」と読む フルテカ
選んだ理由 ・ Tiny Core Linuxで動く └ ISOファイル容量18MBの超軽量Linux └ FLTKが標準GUIライブラリのため他のものより楽 ・
C++が使える └ 競プロやってるので一応書けます
目次 1. FLTKについて 2. FLUIDについて 3. 実践
FLUIDとは? ・ FLTK用の開発ツール(IDEほど高機能ではない) ・ UIを設計できる ・ C++用のヘッダーとソースを自動生成 ・ エディタ機能は貧弱 ・
ビルド機能は無い(端末使え) ・ UIが英語(勉強しろ) ※ FLUID無しでもFLTKの開発はできます
FLUIDとは?
目次 1. FLTKについて 2. FLUIDについて 3. 実践
今回の環境 ・ Ubuntu 16.04.6 LTS (32ビット) ・ g++ ・ FLTK
1.3 ・ FLUID ※5分しか無いので実演はありません
インストール sudo apt-get install libfltk1.3 libfltk1.3-dev ・ インストール容量は70MBくらい
今回の目標 ・ FLUIDでウインドウを設計する。 └ PNG形式の画像 └ ボタン(クリックでダイアログを表示) ・ FLUIDで生成したC++コードを端末でビルドする。 ・
完成した実行ファイルをUbuntuとTiny Coreで実行する。
今回の目標 ・ アプリ名は「hello」 以下、ファイル名にはこの名前を使用 例: hello.fl、hello.cxx、hello.h など
FLUIDの起動
(1) プロジェクトの作成 ・ プロジェクトは *.fl 形式のファイルで保存できる 「File」→「Save As…」で保存 ・ 同じ位置にコードや実行ファイルが生成されるので、
空のフォルダへの保存を推奨 ・ ファイルパスに日本語は入れない(海外製ツールなので一応)
FLUIDの構造 関数 (Function) ウインドウ (Window) ボックス、ボタン、メニューバーなど
(2) 関数の作成 ・ ウインドウより先に関数 「New」→「Code」→「Function/Method…」 ・ 「Name (args)」を空白にするとmain関数になる
(3) ウインドウの作成 「New」→「Group」→「Window…」 ← こうなっていればOK
(3) ウインドウの作成 「Double_Window」をダブルクリックしてプロパティを表示 「Label」 タイトルバー 「X」 初期表示X座標 「Y」 初期表示Y座標 「Width」
画面幅 「Height」 画面高さ
(4) 画像の表示
(4) 画像の表示 ・ 「Box」を使う └ 文章や画像を表示するパーツ 「New」→「Other」→「Box…」
(4) 画像の表示 「Box」をダブルクリックしてプロパティを表示 「Image」 背景画像 「X」 X座標 「Y」 Y座標 「Width」
幅 「Height」 高さ
(4) 画像の表示 画像はRGB値として C++コードに直接書かれる あたまおかしい…
(5) ボタンの表示 ・ 「Button」を使う 「New」→「Buttons」→「Button…」 ・ プロパティはWindow、Boxと同じように入力
(5) ボタンの表示 ・ C++コードの入力 プロパティの「C++」タブをクリック 「Callback」欄にC++コードを直接入力 (クラスは自動生成)
(5) ボタンの表示 ・ 何書けば良いの? ドキュメント読め(英語) 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)
動作例(Ubuntu)
動作例(Tiny Core Linux)
動作例(Tiny Core Linux)
まとめ ・ Linux推奨だけどWindowsでも使える ・ 32ビット版OS推奨 ・ 困ったらドキュメントを読む ・ 入門したばかりなのでFLTKわからない ・
FLUIDの仕様が割とクソ ・ FLUIDの謎挙動に注意
各種データ配布 ・ 「hello」ソースコード、バイナリ ・ 「hello2」ソースコード、バイナリ(日本語テスト) のダウンロード → http://arkw.client.jp/ ※ パブリックドメインとします。自由に使って下さい
おしまい