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
230
技術島の指定ツール「LaTeX」で同人誌を作ろう
arkw
2
170
ポスト・パソコン時代のジャンク遊び スマートデバイス編
arkw
0
130
ジャンカーよ、車も買え ~10分でわかる!? 中古車選び入門~
arkw
1
110
arkw vs. サーバ移転 -2024年1月版-
arkw
0
290
なれる! 村上さん Misskeyサーバ構築入門
arkw
0
530
Cloudflare Tunnelで自宅サーバを公開してみた
arkw
0
1.5k
5分でわかる!? 7セグメントLED制御
arkw
0
73
ヤフオクで原付買った話
arkw
0
230
Other Decks in Programming
See All in Programming
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
740
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
340
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.9k
PicoRuby on Rails
makicamel
2
120
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
100
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
140
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
150
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
8.5k
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
420
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
700
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
It's Worth the Effort
3n
185
28k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
730
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
The Language of Interfaces
destraynor
158
25k
Writing Fast Ruby
sferik
628
62k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Visualization
eitanlees
146
16k
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/ ※ パブリックドメインとします。自由に使って下さい
おしまい