高橋rf.html 0.3
TRANSCRIPT
![Page 1: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/1.jpg)
2012/1/3 rayflood.org/mozilla/
プレゼンツール⾼橋rf.html 0.3
アップデートby ABE Hiroki aka hATrayflood
![Page 2: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/2.jpg)
2012/1/3 rayflood.org/mozilla/
⾃⼰紹介・名前:アベヒロキ (@hATrayflood)・職業:⾃宅サーバ管理者・URL:http://rayflood.org/diary/・住所:⻑野市 地元:東部町
by ABE Hiroki aka hATrayflood
![Page 3: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/3.jpg)
2012/1/3 rayflood.org/mozilla/
ver0.1としてリリースした⾼橋rf.htmlですが
by ABE Hiroki aka hATrayflood
![Page 4: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/4.jpg)
2012/1/3 rayflood.org/mozilla/
プレゼンの都度直してたけど
by ABE Hiroki aka hATrayflood
![Page 5: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/5.jpg)
2012/1/3 rayflood.org/mozilla/
リリースしてはなかったので0.3としてうp
by ABE Hiroki aka hATrayflood
![Page 6: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/6.jpg)
2012/1/3 rayflood.org/mozilla/
※0.2は 紛失しました
by ABE Hiroki aka hATrayflood
![Page 7: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/7.jpg)
2012/1/3 rayflood.org/mozilla/
動作環境
by ABE Hiroki aka hATrayflood
![Page 8: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/8.jpg)
2012/1/3 rayflood.org/mozilla/
・Firefox 3.6・Firefox 9.0・Seamonkey 2.x
by ABE Hiroki aka hATrayflood
![Page 9: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/9.jpg)
2012/1/3 rayflood.org/mozilla/
・IE 8, IE 9・Chrome 16・Safari 5.1・Opera 11
by ABE Hiroki aka hATrayflood
![Page 10: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/10.jpg)
2012/1/3 rayflood.org/mozilla/
なんと、まさかのクロスブラウザ化
by ABE Hiroki aka hATrayflood
![Page 11: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/11.jpg)
2012/1/3 rayflood.org/mozilla/
※いずれもWindows版で 動作を確認
by ABE Hiroki aka hATrayflood
![Page 12: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/12.jpg)
2012/1/3 rayflood.org/mozilla/
使い⽅by ABE Hiroki aka hATrayflood
![Page 13: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/13.jpg)
2012/1/3 rayflood.org/mozilla/
まずローカルにダウンロード
by ABE Hiroki aka hATrayflood
![Page 14: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/14.jpg)
2012/1/3 rayflood.org/mozilla/
エディタで編集します
by ABE Hiroki aka hATrayflood
![Page 15: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/15.jpg)
2012/1/3 rayflood.org/mozilla/
基本的にはHTMLをベタで書く感じ
by ABE Hiroki aka hATrayflood
![Page 16: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/16.jpg)
2012/1/3 rayflood.org/mozilla/
タイトルby ABE Hiroki aka hATrayflood
![Page 17: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/17.jpg)
2012/1/3 rayflood.org/mozilla/
titleタグを直接編集 <title>⾼橋rf.html 0.3</title>
by ABE Hiroki aka hATrayflood
![Page 18: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/18.jpg)
2012/1/3 rayflood.org/mozilla/
ヘッダフッタ
by ABE Hiroki aka hATrayflood
![Page 19: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/19.jpg)
2012/1/3 rayflood.org/mozilla/
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
![Page 20: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/20.jpg)
2012/1/3 rayflood.org/mozilla/
本⽂by ABE Hiroki aka hATrayflood
![Page 21: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/21.jpg)
2012/1/3 rayflood.org/mozilla/
bodyタグ内のtextareaの値を直接編集 <textarea id="content">プレゼンツール⾼橋rf.html <strong>0.3<strong>アップデート---⾃⼰紹介 …</textarea>
by ABE Hiroki aka hATrayflood
![Page 22: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/22.jpg)
2012/1/3 rayflood.org/mozilla/
本⽂の書き⽅
by ABE Hiroki aka hATrayflood
![Page 23: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/23.jpg)
2012/1/3 rayflood.org/mozilla/
1ページの内容に応じて⽂字サイズを⾃動で調整画⾯に収まる最⼤サイズ
by ABE Hiroki aka hATrayflood
![Page 24: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/24.jpg)
2012/1/3 rayflood.org/mozilla/
ページ区切りは⾏頭で「---」「-」が3つ以上
by ABE Hiroki aka hATrayflood
![Page 25: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/25.jpg)
2012/1/3 rayflood.org/mozilla/
⾏区切りは⾃動textareaの値の改⾏がそのまま
by ABE Hiroki aka hATrayflood
![Page 26: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/26.jpg)
2012/1/3 rayflood.org/mozilla/
その他はすべてHTMLをそのまま書く
by ABE Hiroki aka hATrayflood
![Page 27: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/27.jpg)
2012/1/3 rayflood.org/mozilla/
ただし、HTMLタグは始めと終わりが⾏をまたがないように
by ABE Hiroki aka hATrayflood
![Page 28: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/28.jpg)
2012/1/3 rayflood.org/mozilla/
⾃動処理HTML要素
by ABE Hiroki aka hATrayflood
![Page 29: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/29.jpg)
2012/1/3 rayflood.org/mozilla/
aタグ・ラベルがない場合はURLを表⽰・target指定がない場合は⾃動で「̲blank」・クリック時に⾃動でフォーカスを外す
by ABE Hiroki aka hATrayflood
![Page 30: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/30.jpg)
2012/1/3 rayflood.org/mozilla/
例:<a href="http://rayflood.org/mozilla/#tkhs"></a> ↓http://rayflood.org/mozilla/#tkhs
by ABE Hiroki aka hATrayflood
![Page 31: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/31.jpg)
2012/1/3 rayflood.org/mozilla/
画像・現在の表⽰幅で収まらない場合は width="100%"を設定し、⾃動で幅調整・正しく表⽰するには要リロード!
by ABE Hiroki aka hATrayflood
![Page 32: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/32.jpg)
2012/1/3 rayflood.org/mozilla/
例:2500px x 200px<img src="LeavesHeader2.png"> ↓2500px x 200px
by ABE Hiroki aka hATrayflood
![Page 33: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/33.jpg)
2012/1/3 rayflood.org/mozilla/
strongタグ・⾚字で表⽰・これはCSSで実装。35⾏目を参照。
by ABE Hiroki aka hATrayflood
![Page 34: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/34.jpg)
2012/1/3 rayflood.org/mozilla/
例:<strong>strongタグ</strong> ↓strongタグ
by ABE Hiroki aka hATrayflood
![Page 35: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/35.jpg)
2012/1/3 rayflood.org/mozilla/
emタグ・⻘字、斜体、明朝体で表⽰・これもCSSで実装。39⾏目を参照。
by ABE Hiroki aka hATrayflood
![Page 36: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/36.jpg)
2012/1/3 rayflood.org/mozilla/
例:<em>emタグ</em> ↓emタグ
by ABE Hiroki aka hATrayflood
![Page 37: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/37.jpg)
2012/1/3 rayflood.org/mozilla/
テーブル・枠線すっきり・⾃動折り返し禁⽌・空セルも表⽰・これもCSSで実装。48⾏目を参照。・ただし、1⾏で書け!!
by ABE Hiroki aka hATrayflood
![Page 38: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/38.jpg)
2012/1/3 rayflood.org/mozilla/
例:<table><tr><th>ヘッダ1</th><th>ヘッダ2</th></tr><tr><td>データ1</td><td>データ2</td></tr></table> ↓ヘッダ1 ヘッダ2データ1 データ2
※1⾏で書く必要があります。
by ABE Hiroki aka hATrayflood
![Page 39: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/39.jpg)
2012/1/3 rayflood.org/mozilla/
Tipsby ABE Hiroki aka hATrayflood
![Page 40: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/40.jpg)
2012/1/3 rayflood.org/mozilla/
・空⾏は全角空⽩がお勧め・インデントは ・「<」「>」を出すには⼀⼯夫
by ABE Hiroki aka hATrayflood
![Page 41: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/41.jpg)
2012/1/3 rayflood.org/mozilla/
例: → 「<」「>」→「&lt;」「&gt;」 ※空⾏とインデントは着⾊しています
by ABE Hiroki aka hATrayflood
![Page 42: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/42.jpg)
2012/1/3 rayflood.org/mozilla/
・ページごとにidが振ってあります・ページ全体が #page1・ヘッダ、フッタが #page1header, #page1footer・ページの本⽂が #page1lineBlock・本⽂の⾏ごとに #page1line1, #page1line2, … つまり、CSSでのスタイル指定が可能
by ABE Hiroki aka hATrayflood
![Page 43: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/43.jpg)
2012/1/3 rayflood.o rg/mozil la/
例:ユーザスタイルを適用すると
センタリングやエヴァモードも使えるよ!
※エヴァはbodyでの指定を推奨…
by ABE Hiroki aka h ATrayflood
![Page 44: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/44.jpg)
2012/1/3 rayflood.org/mozilla/
フォントby ABE Hiroki aka hATrayflood
![Page 45: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/45.jpg)
2012/1/3 rayflood.org/mozilla/
Meiryo UI, メイリオがデフォルトフォント83⾏目を参照
by ABE Hiroki aka hATrayflood
![Page 46: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/46.jpg)
2012/1/3 rayflood.org/mozilla/
XPでは、コントロールパネル→画⾯→デザイン→効果でClearTypeを推奨
by ABE Hiroki aka hATrayflood
![Page 47: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/47.jpg)
2012/1/3 rayflood.org/mozilla/
プレゼンby ABE Hiroki aka hATrayflood
![Page 48: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/48.jpg)
2012/1/3 rayflood.org/mozilla/
ブラウザで開いてプロジェクタに映してください
by ABE Hiroki aka hATrayflood
![Page 49: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/49.jpg)
2012/1/3 rayflood.org/mozilla/
ページ移動はEnterで進むBackSpaceで戻るそれだけ
by ABE Hiroki aka hATrayflood
![Page 50: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/50.jpg)
2012/1/3 rayflood.org/mozilla/
PDFby ABE Hiroki aka hATrayflood
![Page 51: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/51.jpg)
2012/1/3 rayflood.org/mozilla/
まずは印刷プレビューで全体の⼤きさと四⽅の余⽩空⽩ページの有無を確認⽤紙⽅向を横向きに変更
by ABE Hiroki aka hATrayflood
![Page 52: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/52.jpg)
2012/1/3 rayflood.org/mozilla/
よさそうなら「ファイル」→「printplus PDF」
by ABE Hiroki aka hATrayflood
![Page 53: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/53.jpg)
2012/1/3 rayflood.org/mozilla/
ファイル選択が出るので適当な名前で保存
by ABE Hiroki aka hATrayflood
![Page 54: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/54.jpg)
2012/1/3 rayflood.org/mozilla/
slideshareにうp
by ABE Hiroki aka hATrayflood
![Page 55: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/55.jpg)
2012/1/3 rayflood.org/mozilla/
補⾜by ABE Hiroki aka hATrayflood
![Page 56: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/56.jpg)
2012/1/3 rayflood.org/mozilla/
⾼橋rf.htmlの他ブラウザ対応は優先度低です対応しました
by ABE Hiroki aka hATrayflood
![Page 57: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/57.jpg)
2012/1/3 rayflood.org/mozilla/
PDF出⼒も他の環境への対応は優先度低です
by ABE Hiroki aka hATrayflood
![Page 58: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/58.jpg)
2012/1/3 rayflood.org/mozilla/
Win版Firefoxのみでの状況でもhATrayfloodが満⾜なたため
by ABE Hiroki aka hATrayflood
![Page 59: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/59.jpg)
2012/1/3 rayflood.org/mozilla/
パッチは⼤歓迎!どこかにうpして@投げてください
by ABE Hiroki aka hATrayflood
![Page 60: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/60.jpg)
2012/1/3 rayflood.org/mozilla/
外部リソースからプレゼン表⽰は対応しないつもり
by ABE Hiroki aka hATrayflood
![Page 61: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/61.jpg)
2012/1/3 rayflood.org/mozilla/
セキュリティ上やばいケースが想定されるため
by ABE Hiroki aka hATrayflood
![Page 62: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/62.jpg)
2012/1/3 rayflood.org/mozilla/
ライセンスはMPL 1.1でどぞ
by ABE Hiroki aka hATrayflood
![Page 63: 高橋rf.html 0.3](https://reader034.vdocuments.mx/reader034/viewer/2022042518/559b5d2b1a28abd77f8b47f5/html5/thumbnails/63.jpg)
2012/1/3 rayflood.org/mozilla/
・リンク集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
by ABE Hiroki aka hATrayflood