Embed Size (px)
Citation preview
RubyからJavaSctiptへ!tDiary会議 2011/7/18
1
http://sho.tdiary.net/20110607.html
JavaScript
2
JavaScript
http://sho.tdiary.net/20110716.html#p02
3
js対応
social_button
highlight
flickr
その他
ogp対応
tDiaryプラグイン作成
4
social_buttonプラグイン
これ
5
簡単 動く 楽しい
6
tDiary + jQuery
-> オレってばスゲー2011
7
jsプラグイン作成のコツ
8
1. 巨人の肩に乗る
9
jQueryプラグインhttp://plugins.jquery.com/project/socialbutton
10
71 function socialbutton(target) { 72 $('.socialbuttons').css('height', '1em'); 73 $('.section', target).each(function() { 74 var url = $(this).children('h3').children('a').get(0).href; 75 var title = $(this).children('h3').children('a').attr('title'); 76 var socialbuttons = $(this).find('.socialbuttons'); 77 78 append_button(url, title, socialbuttons); 79 }); 80 } 81 82 function append_button(url, title, socialbuttons) { 83 $.each(config.enables, function(i, service) { 84 var options = callbacks[service](url, title.replace(/"/g, '"')); 85 $.extend(options, config.options[service]); 86 $('<div class="socialbutton"></div>') 87 .css("float", "left") 88 .css("margin-right", "0.5em") 89 .appendTo(socialbuttons) 90 .socialbutton(service, options); 91 }); 92 }
← これだけでおｋ
11
2. jsでできることはjsに
12
ソーシャルボタン表示
エントリのPermalinkエントリのタイトル表示するボタンの種類オプション (ex: twitter id)
13
function socialbutton(target) { 72 $('.socialbuttons').css('height', '1em'); 73 $('.section', target).each(function() { 74 var url = $(this).children('h3').children('a').get(0).href; 75 var title = $(this).children('h3').children('a').attr('title'); 76 var socialbuttons = $(this).find('.socialbuttons'); 77 78 append_button(url, title, socialbuttons); 79 }); 80 } 81 82 function append_button(url, title, socialbuttons) { 83 $.each(config.enables, function(i, service) { 84 var options = callbacks[service](url, title.replace(/"/g, '"')); 85 $.extend(options, config.options[service]); 86 $('<div class="socialbutton"></div>') 87 .css("float", "left") 88 .css("margin-right", "0.5em") 89 .appendTo(socialbuttons) 90 .socialbutton(service, options); 91 }); 92 }
DOMから取得
14
$tDiaryでの値の受け渡し
Rubyプラグイン
(social_button.rb)
JavaScriptプラグイン
(social_button.js)
enable_js(‘social_button.js’)add_js_setting(’$tDiary.plugin.social_button’, “‘test’”)
$tDiary
x = $tDiary.plugin.social_button;
15
課題: JSONエスケープ
add_js_setting('$tDiary.plugin.socialbutton')
# convert array to jsonadd_js_setting('$tDiary.plugin.socialbutton.enables', %Q|["#{@conf['socialbutton.enables'].split(',').join('", "')}"]|)
options = "{ twitter: { via: '#{@conf['socialbutton.twitter.via']}' } }"
→ それto_jsonで（ｒｙ
16
3. jQueryの落とし穴
17
$('[name=' +
document.location.hash.substr(1) +
']')
tdiary-core/js/highlight.js
$()の引数
18
jQueryの落とし穴
http://subtech.g.hatena.ne.jp/mala/20110624/1308881526
19
まとめ
1. 巨人の肩に乗る2. jsでできることはjsに3. jQueryの落とし穴に注意
20
おわりにtDiaryの気になるあれこれ
21
テストtestable -> master継続ビルド (CI)@hsbt ++
対象は？speccapybaraは?
22
http://www.tdiary.org/doc/HOWTO-testing-tDiary.html23
Rack対応とりあえずrack上で動く状態？
内部構造はリファクタリング中？
tDiaryハック会議が必要ではないか
TDiary::Request
defaultio
24
その他自分の日記が何か重い
レスポンスタイムが5～30秒
Android端末から更新したい
Evernoteをクライアントに
セクション単位の編集がネック
25
