GLOBAL-ALIGN::center
SET-TIMER::10min
キミならどう書く
～プレゼンソフトを作る～
----
HEADER::自己紹介
XULで作る
プレゼン
----
FOOTER::Agile Presentation in Takahashi Method in XUL!?
下田洋志
（Piro）
----
株式会社
クリアコード
在籍
----
Firefoxの
拡張機能とか
作ってます
----
最新作
[[EM:Text Shadow]]
[[https://piro.sakura.ne.jp/xul/textshadow/]]
----
Firefoxに
念願の
text-shadow
サポートを!!
----
HEADER::
宣伝
おわり
----
HEADER::おしらせ
さて
----
「キミならどう書く」
といわれましたが
----
新刊
落としました
（´Д｀；）
----
もとい
----
新作
作れません
でした
（´Д｀；）
----
なので
----
ありものを
ご紹介
----
一部の
方には
----
毎度
お馴染み
----
高橋メソッド
in XUL
[[EM:RETURNS]]
----
HEADER::
アジェンダ
----
ALIGN::left
1. XULって何？
2. 何が嬉しい？
3. このツールについて
----
1
----
XUL
----
HEADER::XULって何？
ALIGN::left
[[EM:X]]ML-based
[[EM:U]]ser-interface
[[EM:L]]anguage
----
ALIGN::center
XMLベースの構造記述言語
[[PRE:
]]
----
[[RAW:
]]
----
Firefox
とか
----
Thunderbird
とか
----
のGUIが
XUL
----
これらの
高い拡張性を
支える鍵
----
同時に
----
これらの
重さの
根本的原因
----
基本的に
----
[[EM:Gecko]]
専用
----
重要な
ポイント
----
XULだけじゃ
プレゼンソフトは
作れません
（´・ω・｀）
----
ALIGN::left
[[EM:XUL]]
→[構造]を定義
----
ALIGN::left
[[EM:挙動]]の制御
→[JavaScript]
[[EM:見た目]]の定義
→[CSS]
----
AjaxやDHTMLで
プレゼン作るのと
変わらんがな
（´・ω・｀）
----
＝移行が
容易
----
でも
----
乗り換えに
何の意味が
あるの？
----
HEADER::
2
----
XULの
何が
嬉しい？
----
HEADER::XULの何が嬉しい？
3つの
ポイント
----
ポイント
1
----
気軽に
使える
----
menuとか
buttonとか
タグ名が
分かりやすい
----
HTMLで
無理して作るより
ずっとスマート
----
なので
----
憶え
やすい
----
テキスト
エディタで
サクッと
書ける
----
コードを
読みやすい
----
対極：[SVG]
----
モックアップ
を作る
----
とか
----
ALIGN::left
スピーディーに作って
スピーディーに使い捨て
----
とか
----
そういう
スタイルに
向いてるかも
----
ポイント
2
----
豊富な
ウィジェット
----
ALIGN::left
※Mac OS Xのアレや
Operaのアレや
iGoogleのアレ
ではない
----
GUIの[[EM:部品]]
----
GLOBAL-ALIGN::left
ツールバー
----
ツールバー
スクロールバー
----
ツールバー
スクロールバー
階層型メニュー
----
ツールバー
スクロールバー
階層型メニュー
フォルダツリー
----
ツールバー
スクロールバー
階層型メニュー
フォルダツリー
プログレスメーター
----
ツールバー
スクロールバー
階層型メニュー
フォルダツリー
プログレスメーター
タブ
----
ツールバー
スクロールバー
階層型メニュー
フォルダツリー
プログレスメーター
タブ
ウィザード
----
ツールバー
スクロールバー
階層型メニュー
フォルダツリー
プログレスメーター
タブ
ウィザード
カラーピッカー
----
ツールバー
スクロールバー
階層型メニュー
フォルダツリー
プログレスメーター
タブ
ウィザード
カラーピッカー
スライダー（Firefox 3～）
----
ツールバー
スクロールバー
階層型メニュー
フォルダツリー
プログレスメーター
タブ
ウィザード
カラーピッカー
スライダー（Firefox 3～）
日付ピッカー（Firefox 3～）
----
GLOBAL-ALIGN::center
実質
的には
----
XUL＝
Ajaxで使える
[GUIライブラリ]
----
ただし
Firefox専用
（´・ω・｀）
----
逆に
考えるんだ
----
Firefox
専用だから
イイのさと
考えるんだ
----
ポイント
3
----
実行環境が
Gecko
----
ブラウザ間
の差異
----
気にしなくて
イイ！
----
便利な機能
使い放題！
----
ALIGN::left
・JavaScript 1.7
Arrayの拡張
yieldとか
・E4X
・DOM3 XPath
----
Ajaxの便利な
ライブラリは？
----
HTMLを前提にした
ライブラリは
動かない
かもしれない
----
拡張機能に
ライブラリを入れると
オブジェクト汚染で
Firefoxが動かなく
なるかもしれない
----
結局
----
嫌われ者
----
の
----
W3C DOM
----
とか
----
Web標準のAPIで
頑張るしかない
ところが多い
----
あんまり
嬉しく
ない……
----
つまり
----
ただの
ニッチ
言語？
----
orz
----
気を
取り直して
----
XULの
いいところ
-----
GUI記述の
ための言語
----
ツールの
インターフェースを
サクッと作れる
----
なので
----
このツールも
サクッと
作りました
（当時）
----
HEADER::
3
----
高橋メソッド
in XUL
[[EM:RETURNS]]
----
とは
どういう
ツールか
----
HEADER::高橋メソッド in XUL RETURNS
出自
----
malaさん
（最速の中の人）
作
[[高橋メソッドな|http://la.ma.la/blog/diary_200504080545.htm]]
[[プレゼンツール|http://la.ma.la/blog/diary_200504080545.htm]]
----
の
XUL
移植版
----
でした
----
が
----
GLOBAL-ALIGN::left
[[リンク|https://piro.sakura.ne.jp/]]とか
----
[[リンク|https://piro.sakura.ne.jp/]]とか
[もんたメソッド]とか
----
[[リンク|https://piro.sakura.ne.jp/]]とか
もんたメソッドとか
[[IMG src="fx.png" width="119" height="119"]]画像埋め込みとか
----
[[リンク|https://piro.sakura.ne.jp/]]とか
もんたメソッドとか
[[IMG src="fx.png" width="119" height="119"]]画像埋め込みとか
[[EM:文字の強調]]とか
----
[[リンク|https://piro.sakura.ne.jp/]]とか
もんたメソッドとか
[[IMG src="fx.png" width="119" height="119"]]画像埋め込みとか
[[EM:文字の強調]]とか
[[PRE:整形済みテキスト]]とか
----
[[リンク|https://piro.sakura.ne.jp/]]とか
もんたメソッドとか
[[IMG src="fx.png" width="119" height="119"]]画像埋め込みとか
[[EM:文字の強調]]とか
[[PRE:整形済みテキスト]]とか
|~|~ごく
|~簡単な|表組み
|~機能|とか
----
GLOBAL-ALIGN::center
気がついたら
色々機能が
増えてました
----
全然
高橋メソッド
じゃない
（´・ω・｀）
----
その他の
機能も充実
----
ALIGN::left
・ペン
・印刷用
ドキュメント出力
・タイマー
（Rabbitのパクリ）
・エヴァモード
・ソース表示
----
ALIGN::left
・任意のページから
始められる
・CSSでカスタマイズ
・リロードしても
タイマーが自動復帰
----
欠点
----
見た目が
地味
（´・ω・｀）
----
アニメー
ション効果
----
基本的に
[[EM:無]]
----
ALIGN::left
理由：
[スピード感があるのが好き]
[実装がめんどかった]
[sinとかcosとか見たくもないです]
[ループとかタイマーとか以下略]
----
特徴
----
ALIGN::left
・プレゼンを
簡単に作れる
・プレゼンを
簡単に公開できる
（Firefox内で動く）
----
プレゼンの
作り方
----
ただの
テキスト
----
[[PRE:
[[EM:強調]-]
]]
みたいな文法
----
文字の色や
表示スタイル
→[CSS]
----
字の大きさ
→[自動調整]
----
これ
重要
----
文字サイズを
手動で調整
→[死ねる]
----
実例
----
高橋メソッド
in XUL製のプレゼン
（ページ数150前後）
を
OpenOffice.org Impress
のプレゼンに
手作業で移植
----
丸三日
かかりました
（´Д｀；）
----
このプレゼン
（ページ数110前後）
----
3時間で
できました
＼(^o^)／
----
高橋メソッド
in XUL
の
基本コンセプト
----
ALIGN::left
とにかく手軽に
とにかく簡単に
とにかく楽チンに
----
ALIGN::left
・ものぐさな人
・直前まで資料を
用意してない人
にやさしいツール
----
採用
実績
----
ALIGN::left
・[[某大学の講義|http://nu.ike.tottori-u.ac.jp/kawamura/p_blog/]]でも
使われてるらしい
・会社のプレゼンに
使う人もいるらしい
----
ALIGN::left
・英語に翻訳されてた
・[[中国語に翻訳されてた|http://magicdesign.blogspot.com/2006/06/blog-post_16.html]]
・[[韓国語に翻訳されてた|http://aero.dnip.net/takahashi/]]
・YAPC::Asia Tokyoでも
使われてたという噂
----
世界に羽ばたく
高橋メソッド
in XUL
----
Firefox
ユーザの人
----
ぜひ一度
お試しあれ
----
HEADER::
質疑
応答