高橋rf.html 0.3

2012/1/3 rayflood.org/mozilla/

プレゼンツール
⾼橋rf.html 0.3
アップデート
by ABE Hiroki aka hATrayflood


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



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



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


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


※0.2は
　紛失しました


動作
環境 by ABE Hiroki aka hATrayflood


・Firefox 3.6
・Firefox 9.0
・Seamonkey 2.x


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


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


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



使い⽅


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


エディタで
編集します


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


タイトル


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



ヘッダ
フッタ by ABE Hiroki aka hATrayflood


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



本⽂ by ABE Hiroki aka hATrayflood


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


本⽂の
書き⽅ by ABE Hiroki aka hATrayflood


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



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


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


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


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


⾃動処理
HTML要素


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



例：
<a href="http://rayﬂood.org/mozilla/#tkhs"></a>
　↓
http://rayﬂood.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⾏で書く必要があります。



Tips by ABE Hiroki aka hATrayflood


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



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



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


2012/1/3 ray flood. o rg /mozilla/

例：
ユーザスタイルを適用すると
センタリングや
エヴァモードも使えるよ！
　
※エヴァはbodyでの指定を推奨…

by ABE H iroki aka h AT ray flood


フォント


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


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



プレゼン


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


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


PDF by ABE Hiroki aka hATrayflood


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


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


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


slideshare
にうｐ


補⾜ by ABE Hiroki aka hATrayflood


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


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


Win版Firefoxのみでの
状況でもhATrayﬂoodが
満⾜なたため



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


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


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


ライセンスは
MPL 1.1でどぞ


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


高橋rf.html 0.3

More Related Content

Viewers also liked (11)

Similar to 高橋rf.html 0.3 (20)

More from hATrayflood (9)

高橋rf.html 0.3