Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

高橋rf.html 0.3

881 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

高橋rf.html 0.3

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

×