Top Banner
RubyからJava Sctipt !tDiary会議 2011/7/18 1
25

RubyからJavaScriptへ (!tDiary会議 2011)

Jul 20, 2015

Download

Technology

Kohei MATSUOKA
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: RubyからJavaScriptへ (!tDiary会議 2011)

RubyからJavaSctiptへ!tDiary会議 2011/7/18

1

Page 2: RubyからJavaScriptへ (!tDiary会議 2011)

http://sho.tdiary.net/20110607.html

JavaScript

2

Page 3: RubyからJavaScriptへ (!tDiary会議 2011)

JavaScript

http://sho.tdiary.net/20110716.html#p02

3

Page 4: RubyからJavaScriptへ (!tDiary会議 2011)

js対応

social_button

highlight

flickr

その他

ogp対応

tDiaryプラグイン作成

4

Page 5: RubyからJavaScriptへ (!tDiary会議 2011)

social_buttonプラグイン

これ

5

Page 6: RubyからJavaScriptへ (!tDiary会議 2011)

簡単 動く 楽しい

6

Page 7: RubyからJavaScriptへ (!tDiary会議 2011)

tDiary + jQuery

-> オレってばスゲー2011

7

Page 8: RubyからJavaScriptへ (!tDiary会議 2011)

jsプラグイン作成のコツ

8

Page 9: RubyからJavaScriptへ (!tDiary会議 2011)

1. 巨人の肩に乗る

9

Page 11: RubyからJavaScriptへ (!tDiary会議 2011)

 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, '&quot;')); 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   }

← これだけでおk

11

Page 12: RubyからJavaScriptへ (!tDiary会議 2011)

2. jsでできることはjsに

12

Page 13: RubyからJavaScriptへ (!tDiary会議 2011)

ソーシャルボタン表示

エントリのPermalinkエントリのタイトル表示するボタンの種類オプション (ex: twitter id)

13

Page 14: RubyからJavaScriptへ (!tDiary会議 2011)

   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, '&quot;')); 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

Page 15: RubyからJavaScriptへ (!tDiary会議 2011)

$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

Page 16: RubyからJavaScriptへ (!tDiary会議 2011)

課題: 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で(ry

16

Page 17: RubyからJavaScriptへ (!tDiary会議 2011)

3. jQueryの落とし穴

17

Page 18: RubyからJavaScriptへ (!tDiary会議 2011)

$('[name=' +

document.location.hash.substr(1) +

 ']')

tdiary-core/js/highlight.js

$()の引数

18

Page 20: RubyからJavaScriptへ (!tDiary会議 2011)

まとめ

1. 巨人の肩に乗る2. jsでできることはjsに3. jQueryの落とし穴に注意

20

Page 21: RubyからJavaScriptへ (!tDiary会議 2011)

おわりにtDiaryの気になるあれこれ

21

Page 22: RubyからJavaScriptへ (!tDiary会議 2011)

テストtestable -> master継続ビルド (CI)@hsbt ++

対象は?speccapybaraは?

22

Page 24: RubyからJavaScriptへ (!tDiary会議 2011)

Rack対応とりあえずrack上で動く状態?

内部構造はリファクタリング中?

tDiaryハック会議が必要ではないか

TDiary::Request

defaultio

24

Page 25: RubyからJavaScriptへ (!tDiary会議 2011)

その他自分の日記が何か重い

レスポンスタイムが5~30秒

Android端末から更新したい

Evernoteをクライアントに

セクション単位の編集がネック

25