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

  • 1,418 views
Uploaded on

Hamamatsu.rb #12 …

Hamamatsu.rb #12
20120208

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,418
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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