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

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (11)

Similar to 高橋rf.html 0.3

Similar to 高橋rf.html 0.3 (20)

More from hATrayflood

More from hATrayflood (9)

Recently uploaded

Recently uploaded (16)

高橋rf.html 0.3