お父さんのための 実用 JavaScript プログラミング ~入門篇~ @cherenkov 2012 2/8 hamamatsu.rb #12
レジュメ <ul><li>自己紹介
実用JavaScriptとは?
ユーザースクリプトとは?
ユーザースクリプト紹介
習得方法
まとめ </li></ul>
@cherenkov
@cherenkov
@cherenkov
@cherenkov
@cherenkov <ul><li>人力検索はてなの検索エンジン </li></ul>
@cherenkov <ul><li>人力検索はてなの検索エンジン
XSSハンター </li></ul>
XSSとは 悪意を持ったユーザがフォームなどを通してJavaScriptなどのスクリプトコードを入力した時に、プログラム側に適切なチェック機構がないと、そのスクリプト内容がそのままHTMLに埋め込まれ、ページを閲覧したコンピュータでスクリプトが...
 
 
 
 
 
 
 
 
 
@cherenkov <ul><li>人力検索はてなの検索エンジン
XSSハンター </li></ul>
@cherenkov <ul><li>人力検索はてなの検索エンジン
XSSハンター </li><ul><li>1/21から2/8までに 30件 発見 </li></ul></ul>
@cherenkov <ul><li>人力検索はてなの検索エンジン
XSSハンター </li><ul><li>1/21から2/8までに 30件 発見 </li></ul><li>mixiアプリモバイルをCakePHPで開発 </li></ul>
@cherenkov <ul><li>人力検索はてなの検索エンジン
XSSハンター </li><ul><li>1/21から2/8までに 30件 発見 </li></ul><li>mixiアプリモバイルをCakePHPで開発
duplicate twitter followers Twitter ユーザ同士の重複したフォロワーを数える </li></ul>
 
@cherenkov <ul><li>人力検索はてなの検索エンジン
XSSハンター </li><ul><li>1/21から2/8までに 30件 発見 </li></ul><li>mixiアプリモバイルをCakePHPで開発
duplicate twitter followers Twitter ユーザ同士の重複したフォロワーを数える
croppi! 画像を任意のサイズに楽ちんクロップ </li></ul>
 
@cherenkov <ul><li>人力検索はてなの検索エンジン
XSSハンター </li><ul><li>1/21から2/8までに 30件 発見 </li></ul><li>mixiアプリモバイルをCakePHPで開発
duplicate twitter followers Twitter ユーザ同士の重複したフォロワーを数える
croppi! 画像を任意のサイズに楽ちんクロップ </li></ul>
お父さんのための 実用 JavaScript プログラミング ~入門篇~
実用JavaScriptとは?
 
 
 
 
実用JavaScriptとは?
実用JavaScriptとは? <ul>業務効率化支援 </ul>
実用JavaScriptとは? 業務効率大幅アップ! お父さんのための“生活に役立つツール” さまざまなスクリプトを書いて、 キャリアアップを目指そう
どうやるの? <ul><li>ユーザースクリプト用のブラウザ拡張を導入
ブックマークレット(”お気に入り”のURLにスクリプトを仕込む javascript:~) </li></ul>
<ul>ユーザースクリプトとは? </ul>
<ul>ユーザースクリプトとは? </ul><ul>一方的に受け取るだけだったウェブサイトを ユーザーが独自に拡張する目的で書いたスクリプトの総称 </ul>
どうすればいいの??
どうすればいいの?? <ul>Firefox </ul><ul>Chrome </ul><ul><li>ユーザースクリプトにネイティブ対応 (GM の機能制限版 )
Ninjakit  (Firefox の GM と同等。オススメ ) </li></ul><ul><li>Greasemonkey ( オススメ )
Scriptish (GM 拡張版 ) </li></ul><ul>ユーザースクリプトのインストールは ◯◯◯ .user.js  のリンクをクリックするか ブラウザに D&D </ul>
Upcoming SlideShare
Loading in …5
×

お父さんのための実用JavaScriptプログラミング~入門篇~

1,851 views

Published on

Hamamatsu.rb #12
20120208

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,851
On SlideShare
0
From Embeds
0
Number of Embeds
36
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

お父さんのための実用JavaScriptプログラミング~入門篇~

  1. 1. お父さんのための 実用 JavaScript プログラミング ~入門篇~ @cherenkov 2012 2/8 hamamatsu.rb #12
  2. 2. レジュメ <ul><li>自己紹介
  3. 3. 実用JavaScriptとは?
  4. 4. ユーザースクリプトとは?
  5. 5. ユーザースクリプト紹介
  6. 6. 習得方法
  7. 7. まとめ </li></ul>
  8. 8. @cherenkov
  9. 9. @cherenkov
  10. 10. @cherenkov
  11. 11. @cherenkov
  12. 12. @cherenkov <ul><li>人力検索はてなの検索エンジン </li></ul>
  13. 13. @cherenkov <ul><li>人力検索はてなの検索エンジン
  14. 14. XSSハンター </li></ul>
  15. 15. XSSとは 悪意を持ったユーザがフォームなどを通してJavaScriptなどのスクリプトコードを入力した時に、プログラム側に適切なチェック機構がないと、そのスクリプト内容がそのままHTMLに埋め込まれ、ページを閲覧したコンピュータでスクリプトが実行されてしまうことがある。 IT用語辞典より
  16. 25. @cherenkov <ul><li>人力検索はてなの検索エンジン
  17. 26. XSSハンター </li></ul>
  18. 27. @cherenkov <ul><li>人力検索はてなの検索エンジン
  19. 28. XSSハンター </li><ul><li>1/21から2/8までに 30件 発見 </li></ul></ul>
  20. 29. @cherenkov <ul><li>人力検索はてなの検索エンジン
  21. 30. XSSハンター </li><ul><li>1/21から2/8までに 30件 発見 </li></ul><li>mixiアプリモバイルをCakePHPで開発 </li></ul>
  22. 31. @cherenkov <ul><li>人力検索はてなの検索エンジン
  23. 32. XSSハンター </li><ul><li>1/21から2/8までに 30件 発見 </li></ul><li>mixiアプリモバイルをCakePHPで開発
  24. 33. duplicate twitter followers Twitter ユーザ同士の重複したフォロワーを数える </li></ul>
  25. 35. @cherenkov <ul><li>人力検索はてなの検索エンジン
  26. 36. XSSハンター </li><ul><li>1/21から2/8までに 30件 発見 </li></ul><li>mixiアプリモバイルをCakePHPで開発
  27. 37. duplicate twitter followers Twitter ユーザ同士の重複したフォロワーを数える
  28. 38. croppi! 画像を任意のサイズに楽ちんクロップ </li></ul>
  29. 40. @cherenkov <ul><li>人力検索はてなの検索エンジン
  30. 41. XSSハンター </li><ul><li>1/21から2/8までに 30件 発見 </li></ul><li>mixiアプリモバイルをCakePHPで開発
  31. 42. duplicate twitter followers Twitter ユーザ同士の重複したフォロワーを数える
  32. 43. croppi! 画像を任意のサイズに楽ちんクロップ </li></ul>
  33. 44. お父さんのための 実用 JavaScript プログラミング ~入門篇~
  34. 45. 実用JavaScriptとは?
  35. 50. 実用JavaScriptとは?
  36. 51. 実用JavaScriptとは? <ul>業務効率化支援 </ul>
  37. 52. 実用JavaScriptとは? 業務効率大幅アップ! お父さんのための“生活に役立つツール” さまざまなスクリプトを書いて、 キャリアアップを目指そう
  38. 53. どうやるの? <ul><li>ユーザースクリプト用のブラウザ拡張を導入
  39. 54. ブックマークレット(”お気に入り”のURLにスクリプトを仕込む javascript:~) </li></ul>
  40. 55. <ul>ユーザースクリプトとは? </ul>
  41. 56. <ul>ユーザースクリプトとは? </ul><ul>一方的に受け取るだけだったウェブサイトを ユーザーが独自に拡張する目的で書いたスクリプトの総称 </ul>
  42. 57. どうすればいいの??
  43. 58. どうすればいいの?? <ul>Firefox </ul><ul>Chrome </ul><ul><li>ユーザースクリプトにネイティブ対応 (GM の機能制限版 )
  44. 59. Ninjakit (Firefox の GM と同等。オススメ ) </li></ul><ul><li>Greasemonkey ( オススメ )
  45. 60. Scriptish (GM 拡張版 ) </li></ul><ul>ユーザースクリプトのインストールは ◯◯◯ .user.js のリンクをクリックするか ブラウザに D&D </ul>
  46. 61. 具体的にできること <ul><li>JavaScriptで出来ること全て
  47. 62. スクリプトの自動実行
  48. 63. データの永続化
  49. 64. クロスドメイン通信(Web APIが使える)
  50. 65. メニューコマンド追加
  51. 66. クリップボードへコピー(*) </li></ul>
  52. 67. ユーザースクリプト紹介 <ul><li>AutoPagerize </li></ul>
  53. 68. <ul>AutoPagerize </ul>
  54. 69. cherenkovが作ったもの <ul>http://userscripts.org/users/84424/scripts </ul>
  55. 70. cherenkovが作ったもの wikipedia - image plus
  56. 71. cherenkovが作ったもの github charcode converter
  57. 72. cherenkovが作ったもの google docs chat notification
  58. 73. cherenkovが作ったもの Togetter - Who's tweeting?
  59. 74. cherenkovが作ったもの Twitter - Undo tweet
  60. 75. cherenkovが作ったもの gist.github - display file name
  61. 76. // ==UserScript== // @name gist.github - display file name // @namespace http://d.hatena.ne.jp/Cherenkov/ // @include http://gist.github.com/* // @include https://gist.github.com/* // @version 0.2 // @date 20110305 // ==/UserScript== function disp(doc) { Array.forEach(doc.querySelectorAll(&quot;.meta .info a:first-child&quot;), function(e) { var id = e.href.replace(/^https?://gist.github.com//,&quot;&quot;); GM_xmlhttpRequest({ method: &quot;get&quot;, url: &quot;http://gist.github.com/api/v1/json/&quot; + id, headers: {&quot;User-Agent&quot;:&quot;Mozilla/5.0&quot;, &quot;Accept&quot;:&quot;text/xml&quot;}, onload: function(res) { var gists = JSON.parse(res.responseText).gists[0]; var fileName = document.createElement(&quot;span&quot;); fileName.style.fontStyle = &quot;italic&quot;; fileName.appendChild(document.createTextNode(gists.files.join())); e.parentNode.parentNode.insertBefore(fileName, e.parentNode.nextSibling); } }); }); } if(!document.getElementById(&quot;repos&quot;)) { disp(document); document.addEventListener(&quot;AutoPagerize_DOMNodeInserted&quot;, function(evt) { disp(evt.target); }, false); }
  62. 77. 習得方法 <ul><li>徹底的な観察 Firebugとにらめっこ (Firefox 拡張 ) </li></ul>
  63. 80. 習得方法 <ul><li>徹底的な観察 Firebugとにらめっこ (Firefox 拡張 )
  64. 81. DOM 、 JavaScript 、 HTML 、 CSS の知識 </li><ul><li>https://developer.mozilla.org/ja/Gecko_DOM_Reference </li><ul><li>DOM document リファレンス
  65. 82. DOM element リファレンス
  66. 83. DOM window リファレンス </li></ul><li>https://developer.mozilla.org/ja/JavaScript </li></ul></ul>超重要
  67. 84. 習得方法 <ul><li>徹底的な観察 Firebugとにらめっこ (Firefox 拡張 )
  68. 85. DOM 、 JavaScript 、 HTML 、 CSS の知識 </li><ul><li>https://developer.mozilla.org/ja/Gecko_DOM_Reference </li><ul><li>DOM document リファレンス
  69. 86. DOM element リファレンス
  70. 87. DOM window リファレンス </li></ul><li>https://developer.mozilla.org/ja/JavaScript </li></ul><li>GreaseSpot http://wiki.greasespot.net </li></ul>超重要
  71. 88. 習得方法 <ul><li>徹底的な観察 Firebugとにらめっこ (Firefox 拡張 )
  72. 89. DOM 、 JavaScript 、 HTML 、 CSS の知識 </li><ul><li>https://developer.mozilla.org/ja/Gecko_DOM_Reference </li><ul><li>DOM document リファレンス
  73. 90. DOM element リファレンス
  74. 91. DOM window リファレンス </li></ul><li>https://developer.mozilla.org/ja/JavaScript </li></ul><li>GreaseSpot http://wiki.greasespot.net
  75. 92. Try & Error </li></ul>超重要
  76. 93. 習得の心得 <ul><li>Firefox + Firebug + Greasemonkey の組み合わせが最強
  77. 94. ChromeユーザもまずはFirefox + Greasemonkeyで動作確認してから
  78. 95. ユーザースクリプトのエラーなどは「エラーコンソール」に出力されるっぽい 本来エラーなどは、 Firebug コンソールの表示設定で 「クロームのエラーを表示」 「クロームのメッセージを表示」を有効にすれば こちらに表示されるはず。バグかも。 </li></ul>
  79. 96. まとめ <ul><li>ブラウザの機能・役割りが拡大していく中で、クライアントサイドスクリプティングの技術は重要である。
  80. 97. ユーザースクリプトを通して技術や知識を養い業務に応用することも可能。
  81. 98. 1クリックする手間を省き効率よくブラウジングしよう。 </li></ul>

×