プレゼンツール 高橋rf.html <strong>0.4</strong> アップデート --- 自己紹介 ・名前：アベヒロキ (<a href="http://twitter.com/hATrayflood">@hATrayflood</a>) ・職業：自宅サーバ管理者 ・URL：<a href="http://rayflood.org/diary/">http://rayflood.org/diary/</a> ・地元：東部町 --- ver0.1として<strong>リリース</strong>した <a href="http://rayflood.org/mozilla/#tkhs">高橋rf.html</a>ですが --- プレゼンの都度 直してたけど --- リリースしては なかったので <strong>0.3としてうｐ</strong> --- ※0.2は <em>紛失</em>しました --- 動作 環境 --- ・Firefox 3.0 ・Firefox 33.0 ・Seamonkey 2.x --- ・IE 9 ・Chrome 38 ・Safari 5.0 ・Opera 12 --- なんと、まさかの <strong>クロスブラウザ</strong>化 --- ※いずれもWindows版で 動作を確認 --- 使い方 --- まずローカルに ダウンロード --- エディタで 編集します --- 基本的には HTMLをベタで 書く感じ --- タイトル --- 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"; --- 本文 --- bodyタグ内のtextareaの値を直接編集 <textarea id="content"> プレゼンツール 高橋rf.html <strong>0.3<strong> アップデート --- 自己紹介 … </textarea> --- 本文の 書き方 --- 1ページの内容に応じて 文字サイズを<strong>自動で調整</strong> 画面に収まる<strong>最大サイズ</strong> --- ページ区切りは 行頭で「<strong>---</strong>」 「<strong>-</strong>」が3つ以上 --- 行区切りは<strong>自動</strong> textareaの値の 改行がそのまま --- その他は すべてHTMLを そのまま書く --- ただし、HTMLタグは 始めと終わりが 行を<strong>またがない</strong>ように --- 自動処理 HTML要素 --- aタグ ・ラベルがない場合はURLを表示 ・target指定がない場合は自動で「_blank」 ・クリック時に自動でフォーカスを外す --- 例： <a href="http://rayflood.org/mozilla/#tkhs"></a> ↓ <a href="http://rayflood.org/mozilla/#tkhs"></a> --- 画像 ・現在の表示幅で収まらない場合は width="100%"を設定し、自動で幅調整 ・正しく表示するには<strong>要リロード！</strong> --- 例： 2500px x 200px <img src="LeavesHeader2.png"> ↓ 2500px x 200px <img src="http://rayflood.org/diary-temp/LeavesHeader2.png"> --- strongタグ ・赤字で表示 ・これはCSSで実装。35行目を参照。 --- 例： <strong>strongタグ</strong> ↓ <strong>strongタグ</strong> --- emタグ ・青字、斜体、明朝体で表示 ・これもCSSで実装。39行目を参照。 --- 例： <em>emタグ</em> ↓ <em>emタグ</em> --- テーブル ・枠線すっきり ・自動折り返し禁止 ・空セルも表示 ・これもCSSで実装。48行目を参照。 ・ただし、<strong>1行で</strong>書け！！ --- 例： <table><tr><th>ヘッダ1</th><th>ヘッダ2</th></tr><tr><td>データ1</td><td>データ2</td></tr></table> ↓ <table><tr><th>ヘッダ1</th><th>ヘッダ2</th></tr><tr><td>データ1</td><td>データ2</td></tr></table> ※1行で書く必要があります。 --- Tips --- ・<del>空行は全角空白がお勧め</del> ・<del>インデントは&nbsp;</del> ・スペースのインデントはそのまま表示 ・タブのインデントはスペース4文字に変換 ・空行はスペース1文字に変換 ・「&」「<」「>」を出すには一工夫 --- 例： →&nbsp;&nbsp; 「&」「<」「>」→「&amp;amp;」「&amp;lt;」「&amp;gt;」 ※空行とインデントは着色しています --- ・ページごとにidが振ってあります ・ページ全体が #page1 ・ヘッダ、フッタが #page1header, #page1footer ・ページの本文が #page1lineBlock ・本文の行ごとに #page1line1, #page1line2, … つまり、CSSでのスタイル指定が可能 --- 例： ユーザスタイルを適用すると <em>センタリング</em>や <em>エヴァモード</em>も使えるよ！ ※エヴァは<strong>body</strong>での指定を推奨… --- フォント --- Meiryo UI, メイリオが デフォルトフォント 83行目を参照 --- XPでは、コントロールパネル →画面→デザイン→効果で <strong>ClearType</strong>を推奨 --- プレゼン --- ブラウザで開いて プロジェクタに 映してください --- ページ移動は Enterで進む BackSpaceで戻る それだけ --- PDF --- まずは印刷プレビューで 全体の大きさと四方の余白 空白ページの有無を確認 用紙方向を<strong>横向き</strong>に変更 --- よさそうなら 「ファイル」→ 「printplus PDF」 --- ファイル選択が 出るので適当な 名前で保存 --- <a href="http://www.slideshare.net/">slideshare</a> にうｐ --- 補足 --- 高橋rf.htmlの 他ブラウザ対応は <del>優先度<strong>低</strong>です</del> <strong>対応しました</strong> --- PDF出力も他の 環境への対応は 優先度<strong>低</strong>です --- Win版Firefoxのみでの 状況でもhATrayfloodが <strong>満足</strong>なたため --- パッチは<strong>大歓迎！</strong> どこかにうｐして @投げてください --- 外部リソースから プレゼン表示は <strong>対応しない</strong>つもり --- セキュリティ上 <strong>やばい</strong>ケースが 想定されるため --- ライセンスは <a href="https://www.mozilla.org/MPL/2.0/">MPL 2.0</a>でどぞ --- ・リンク集 twitter @hATrayflood <a href="http://twitter.com/hATrayflood"></a> mozilla rayflood独自ビルド 高橋rf.html + printplus <a href="http://rayflood.org/mozilla/#tkhs"></a> Mozilla 勉強会@名古屋 <a href="https://dev.mozilla.jp/events/workshop07/"></a> Mozilla 勉強会@名古屋でのスライド <a href="http://www.slideshare.net/hATrayflood/rfhtml-printplus-5459082"></a> SlideShare <a href="http://www.slideshare.net/"></a> 高橋メソッドなプレゼンツール in XUL リターンズ <a href="http://piro.sakura.ne.jp/xul/applications/takahashi-r/"></a> Add-ons for Firefox PrintPDF <a href="https://addons.mozilla.org/ja/firefox/addon/5971/"></a> Mozilla Public License Version 2.0 <a href="https://www.mozilla.org/MPL/2.0/"></a>