Devnaga6 高橋rf.html + printplusリリース

2010/10/27 NSEG長野開発オフ Vol .6

プレゼンツール高橋rf.html + printplusリリースのお知らせ

by ABE Hi rok i aka h ATrayf lood


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



Mozilla 勉強会@名古屋でLTした高橋rf.html + printplusですが



一応、まともに動くようになったので



ver0.1としてリリースしますhttp://rayflood.org/mozilla/#tkhs



動作環境



高橋rf.html・Firefox・Seamonkey　他ブラウザは　未対応



printplus・Firefox・Thunderbird・Seamonkey　Windows版のみ



使い方by ABE Hi rok i aka h ATrayf lood


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



エディタで編集します



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



タイトルby ABE Hi rok i aka h ATrayf lood


titleタグを直接編集　<title>高橋rf.html + printplusリリース</title>



ヘッダフッタ



titleタグのすぐ下のscript内の変数を直接編集　<title>高橋rf.html + printplusリリース</title><script type="text/javascript">var headerText = "2010/10/27 NSEG長野開発オフ Vol.6";var footerText = "by ABE Hiroki aka hATrayflood";



本文by ABE Hi rok i aka h ATrayf lood


bodyタグ内のtextareaの値を直接編集　<textarea id="content">プレゼンツール高橋rf.html + printplus<strong>リリース</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で実装。19行目を参照。



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



テーブル・枠線すっきり・自動折り返し禁止・空セルも表示・これもCSSで実装。26行目を参照。・ただし、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 Hi rok i aka h ATrayf lood


・空行は全角空白がお勧め・インデントは・「<」「>」を出すには一工夫



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



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


2010/10/27 NSEG長野開発オフ Vol.6

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

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

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

by ABE Hiroki aka h ATrayflood


プレゼンby ABE Hi rok i aka h ATrayf lood


Firefoxで開いてプロジェクタに映してください



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



PDFby ABE Hi rok i aka h ATrayf lood


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



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



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



slideshareにうｐ



補足by ABE Hi rok i aka h ATrayf lood


高橋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

Devnaga6 高橋rf.html + printplusリリース