高橋rf.html 0.3

2012/1/3 rayflood.org/mozilla/

プレゼンツール⾼橋rf.html 0.3

アップデートby ABE Hiroki aka hATrayflood


⾃⼰紹介・名前：アベヒロキ (@hATrayflood)・職業：⾃宅サーバ管理者・URL：http://rayflood.org/diary/・住所：⻑野市地元：東部町

by ABE Hiroki aka hATrayflood


ver0.1としてリリースした⾼橋rf.htmlですが



プレゼンの都度直してたけど



リリースしてはなかったので0.3としてうｐ



※0.2は　紛失しました



動作環境



・Firefox 3.6・Firefox 9.0・Seamonkey 2.x



・IE 8, IE 9・Chrome 16・Safari 5.1・Opera 11



なんと、まさかのクロスブラウザ化



※いずれもWindows版で　動作を確認



使い⽅by ABE Hiroki aka hATrayflood


まずローカルにダウンロード



エディタで編集します



基本的にはHTMLをベタで書く感じ



タイトルby ABE Hiroki aka hATrayflood


titleタグを直接編集　<title>⾼橋rf.html 0.3</title>



ヘッダフッタ



titleタグのすぐ下のscript内の変数を直接編集　<title>⾼橋rf.html 0.3</title><script type="text/javascript">var headerText = "2012/1/3 rayflood.org/mozilla/";var footerText = "by ABE Hiroki aka hATrayflood";



本⽂by ABE Hiroki aka hATrayflood


bodyタグ内のtextareaの値を直接編集　<textarea id="content">プレゼンツール⾼橋rf.html <strong>0.3<strong>アップデート---⾃⼰紹介　…</textarea>



本⽂の書き⽅



1ページの内容に応じて⽂字サイズを⾃動で調整画⾯に収まる最⼤サイズ



ページ区切りは⾏頭で「---」「-」が3つ以上



⾏区切りは⾃動textareaの値の改⾏がそのまま



その他はすべてHTMLをそのまま書く



ただし、HTMLタグは始めと終わりが⾏をまたがないように



⾃動処理HTML要素



aタグ・ラベルがない場合はURLを表⽰・target指定がない場合は⾃動で「̲blank」・クリック時に⾃動でフォーカスを外す



例：<a href="http://rayflood.org/mozilla/#tkhs"></a>　↓http://rayflood.org/mozilla/#tkhs



画像・現在の表⽰幅で収まらない場合は　width="100%"を設定し、⾃動で幅調整・正しく表⽰するには要リロード！



例：2500px x 200px<img src="LeavesHeader2.png">　↓2500px x 200px



strongタグ・⾚字で表⽰・これはCSSで実装。35⾏目を参照。



例：<strong>strongタグ</strong>　↓strongタグ



emタグ・⻘字、斜体、明朝体で表⽰・これもCSSで実装。39⾏目を参照。



例：<em>emタグ</em>　↓emタグ



テーブル・枠線すっきり・⾃動折り返し禁⽌・空セルも表⽰・これもCSSで実装。48⾏目を参照。・ただし、1⾏で書け！！



例：<table><tr><th>ヘッダ1</th><th>ヘッダ2</th></tr><tr><td>データ1</td><td>データ2</td></tr></table>　↓ヘッダ1 ヘッダ2データ1 データ2

　※1⾏で書く必要があります。



Tipsby ABE Hiroki aka hATrayflood


・空⾏は全角空⽩がお勧め・インデントは・「<」「>」を出すには⼀⼯夫



例：　 → 「<」「>」→「<」「>」　※空⾏とインデントは着⾊しています



・ページごとにidが振ってあります・ページ全体が #page1・ヘッダ、フッタが #page1header, #page1footer・ページの本⽂が #page1lineBlock・本⽂の⾏ごとに #page1line1, #page1line2, …　つまり、CSSでのスタイル指定が可能


2012/1/3 rayflood.o rg/mozil la/

例：ユーザスタイルを適用すると

センタリングやエヴァモードも使えるよ！

　※エヴァはbodyでの指定を推奨…

by ABE Hiroki aka h ATrayflood


フォントby ABE Hiroki aka hATrayflood


Meiryo UI, メイリオがデフォルトフォント83⾏目を参照



XPでは、コントロールパネル→画⾯→デザイン→効果でClearTypeを推奨



プレゼンby ABE Hiroki aka hATrayflood


ブラウザで開いてプロジェクタに映してください



ページ移動はEnterで進むBackSpaceで戻るそれだけ



PDFby ABE Hiroki aka hATrayflood


まずは印刷プレビューで全体の⼤きさと四⽅の余⽩空⽩ページの有無を確認⽤紙⽅向を横向きに変更



よさそうなら「ファイル」→「printplus PDF」



ファイル選択が出るので適当な名前で保存



slideshareにうｐ



補⾜by ABE Hiroki aka hATrayflood


⾼橋rf.htmlの他ブラウザ対応は優先度低です対応しました



PDF出⼒も他の環境への対応は優先度低です



Win版Firefoxのみでの状況でもhATrayfloodが満⾜なたため



パッチは⼤歓迎！どこかにうｐして@投げてください



外部リソースからプレゼン表⽰は対応しないつもり



セキュリティ上やばいケースが想定されるため



ライセンスはMPL 1.1でどぞ



・リンク集twitter @hATrayfloodhttp://twitter.com/hATrayfloodmozilla rayflood独⾃ビルド⾼橋rf.html + printplushttp://rayflood.org/mozilla/#tkhsMozilla 勉強会@名古屋https://dev.mozilla.jp/events/workshop07/Mozilla 勉強会@名古屋でのスライドhttp://www.slideshare.net/hATrayflood/rfhtml-printplus-5459082SlideSharehttp://www.slideshare.net/⾼橋メソッドなプレゼンツール in XUL リターンズhttp://piro.sakura.ne.jp/xul/applications/takahashi-r/Add-ons for Firefox PrintPDFhttps://addons.mozilla.org/ja/firefox/addon/5971/Mozilla Public License Version 1.1http://www.mozilla.org/MPL/MPL-1.1.html


Technology

高橋rf.html 0.3