front act of tochigi ruby kaigi 07

Slide 1

Slide 1 text

RubyͰͭ͘ΔΧʔυήʔϜ seki@ruby-lang.org

Slide 2

Slide 2 text

slide sponsors ְאַせ〢㾊3VCZ⠓陽ח⿫⸇׃׋ְ㖑⯋孖זךד!JXBEPO E3VCZח״׷ⴓ侔٥8FCفؚٗٓىؚٝ ؔ٦ي爡F#PPL4UPSF IUUQFTUPSFPINTIBDPKQUJUMFT1!IJTBTIJN 窫额寸皾⚥!BXB[FLJ ࢲͷ3VCZ,BJHJࢀՃඅ༻ͷεϥΠυεϙϯαʔΛืू͍ͯ͠·͢ɻ

Slide 3

Slide 3 text

@m_seki فٗך⵸䏟せ〢㾊דכ溪䩧衼⡲

Slide 4

Slide 4 text

2005 - ·ͩॳ࡮Γങ͑·͢ dRuby ʹΑΔ ؔকढ़ஶ ෼ࢄ ɾ Web ϓϩάϥϛϯά

Slide 5

Slide 5 text

2012 (-2014 ઈ൛)

Slide 6

Slide 6 text

2017 Web൛ʹͯ͠์ྲྀ ⰕꟚ儗ך׫鑧겗ח

Slide 7

Slide 7 text

఻આ্ͷଘࡏ -FBSOGSPNMFHFOEBSZ+BQBOFTF3VCZ IBDLFS .BTBUPTIJ 4FLJ JO UIJT STU &OHMJTI MBOHVBHF CPPL PO IJT PXO %JTUSJCVUFE 3VCZ MJCSBSZ :PVMMOEPVUBCPVUEJTUSJCVUFEDPNQVUJOH BEWBODFE 3VCZDPODFQUTBOEUFDIOJRVFT BOEUIFQIJMPTPQIZPG UIF3VCZXBZTUSBJHIUGSPNUIFTPVSDF

Slide 8

Slide 8 text

History of dRuby 1999-3 ERB 1999-9 DRb 2003 committer 2010 pokemon-master 2000 Rinda 1998 started ruby 2006 - 2011 Ruby Kaigi MFHFOEBSZ

Slide 9

Slide 9 text

2010 ಢ໦୅ද ؕ٦س鿇Ꟍوأة٦ٔ٦ؚ ֶַ־דְְֿהָ֮׏׋

Slide 10

Slide 10 text

ΧʔυήʔϜͷϨϏϡʔ ず➂ؕ٦س؜٦يךٖؽُ٦ 鑐麇׾⣛걾ׁ׸׋ ׻٦ְ

Slide 11

Slide 11 text

໰୊ 暟椚晛ؕ٦س؜٦يכת׌㾈ַזְ הְֲַ⳿勻♳ָ׏גַ׵דכֶ׉ְ

Slide 12

Slide 12 text

ղܾ 暟椚晛ָזְז׵⟎䟝晛׾אֻ׹ֲ ؒٝسِ٦ؠ٦ぢֽדכזֻծٕ٦ٕװ ؜٦يغٓٝأָ׻ַ׷玎䏝ך׮ך

Slide 13

Slide 13 text

Ͱ͖ͨ ➙傈כ׉ךرؠ؎ٝ׾铡僇׃׋ְ ⡲䧭麓玎׮ֶ׮׃׹ְָ⵸䏟זךד荈ꅾ

Slide 14

Slide 14 text

આ໌ॻʢಋೖʣ

Slide 15

Slide 15 text

આ໌ॻʢ৔ͷΑ͏͢ʣ

Slide 16

Slide 16 text

ͦ͜Ͱങ͑Δ ➙傈顠ִתׅկ

Slide 17

Slide 17 text

σϞ

Slide 18

Slide 18 text

࣮૷ʹ͍ͭͯ 4JOHMF1BHF"QQMJDBUJPO )5.-ך圓䧭 +4ה"1* 3VCZ⩎

Slide 19

Slide 19 text

SPA ل٦آ鼂獳ז׃ ؕ٦س׾乼⡲ׅ׷׋ןծ倜׃ְ㜥ך朐䡾׾ +40/ד《䖤׃ծ鋅׋湡׾刿倜ׅ׷

Slide 20

Slide 20 text

DOM໦ NFOV GJFME 卐ⴓךJNH銲稆 QSPNQU

Slide 21

Slide 21 text

60ຕ෼ͷimgཁૉ

Slide 22

Slide 22 text

60ຕ෼ͷimgཁૉ ؕ٦سָ㜥ךוֿח㾩ׅךַ̔朐䡾 ؜٦ي⚥ךؕ٦سך侧כ♶㢌 ؕ٦س侧ⴓךJNH銲稆朐䡾ח䖞ְծJNH銲稆ך㾩䚍װTUZMF׾㢌刿

Slide 23

Slide 23 text

ঢ়ଶ as JSON 㜥׾邌植׃׋.BQ 㜥䨽ךせ⵸ָؗ٦ 銲稆כؕ٦سךꂁ⴨ 갫䎷ח䠐㄂֮׷ַ׵

Slide 24

Slide 24 text

৔ͷΑ͏͢

Slide 25

Slide 25 text

MapͷΩʔ FOUSBODF DPTUBSFB

Slide 26

Slide 26 text

JS "1*ך鵤׃׋.BQ׾㜥ח⿾僥ׇׁ׷

Slide 27

Slide 27 text

ঢ়ଶΛऔಘ var load_state = (function(url) { var x; try { ... } if (x) { x.onreadystatechange = function() { if (x.readyState == 4 && x.status == 200) { var state = JSON.parse(x.responseText); apply_state(state); } } x.open("GET", url); x.send(null); } }); 9.-)UUQ3FRVFTUך 鷌㾄זⳢ椚铣׭׋׵⿾僥

Slide 28

Slide 28 text

ঢ়ଶΛ৔ʹ൓ө var apply_state = (function ( state ) { put_entrance(state, last_state); put_hand(state.hand); put_current(state.current, state.prompt); put_outlet(state.outlet, state.prompt); put_costarea(state.costarea); put_candy(state.candy); put_gift(state.gift); put_map(state.map); put_kanban(state.kanban); put_break(state.break); put_red(state.red); put_yellow(state.yellow); put_blue(state.blue); put_prompt(state); last_state = state; }); 朐䡾㜥䨽חؕ٦س׾ 縧ֻⳢ椚ך⚛ן

Slide 29

Slide 29 text

handΛ഑ஔ var put_hand = (function (cards) { var x = 400, z = 1; cards.forEach( function( name ) { card = document.getElementById('mog-' + name); card.src = image_path(name); card.className = "mog-card mog-shadow" card.style.top = 20; card.style.left = x; card.style.zIndex = z; card.draggable = true; { var url = '/api/?tofu_id=api;tofu_cmd=choose;opt=' + (z - 1); card.onclick = function () { load_state(url); }; }; x = x + 125; z = z + 1; }); }); POMJDL ָ٦׿ ֿ׸׮ֲ⢪׏גזְװא 嶊׃䘌׸ 鋅׋湡ך鏣㹀

Slide 30

Slide 30 text

costareaΛ഑ஔ var put_costarea = (function (cards) { var y = -40, z = 1; cards.forEach( function( name ) { card = document.getElementById('mog-' + name); card.src = image_path("ura"); card.className = "mog-card mog-costarea"; card.style.top = y; card.style.left = 100; card.style.zIndex = z; card.draggable = false; card.onclick = null; z = z + 1; y = y + 2; if ( z % 5 === 1 ) { y = y + 2;} }); }); POMJDL OVMM ؕ٦سכ酅ח

Slide 31

Slide 31 text

ͦ͏͍͑͹Ruby 䘌׸גתׇ׿ ؟٦غ٦؟؎سכ3VCZ

Slide 32

Slide 32 text

Ҩ࢈Λར༻ 5PGV8SJDL

Slide 33

Slide 33 text

Tofu on WEBrick ➙㔐כ8SJDLך)551؟٦غ٦ה5PGVד ׋ְגְךהֿ׹חכ鯹׷ה䙼ֲ

Slide 34

Slide 34 text

ݪॳͷTofu 䎃갦%JW5PGV (6*فؚٗٓىؚٝך״ֲח8FC،فٔ剅 ֹ׋ְ 9דך穗꿀ַ׵ ֶתֽ $(* 8SJDLך؎ٝة٦ؿؑ؎أך麩ְ ׾ェ　ׅ׷3BDLךכ׷ַ僓זךד

Slide 35

Slide 35 text

౰࣌ͷࣗຫ UDMULה8FC،فָٔずׄا٦أ؝٦سד (6*鿇ⴓ׾ה׶ִַ׵׸׷ ְֻאַך8JEHFUإحز

Slide 36

Slide 36 text

͍·ͷTofu 8SJDLך؎ٝة٦ؿؑ؎أח窟さ إحءّٝך盖椚 ؙٔؒأزךꂁ⥋ ٖأهٝأך穈׫甧ג "1*ה׃ג⢪ֲ׋׭ךꂁ䣁 NJYJד㣐僓ח갭谏ֻ׿ח䭷䶯ׁ׸׋䠐㄂ ָ剑鵚װ׏ה׻ַ׏׋

Slide 37

Slide 37 text

ϦΫΤετͱϨεϙϯε ؙٔؒأزכ朐䡾׾㢌⻉ׇׁ׷הֹ׮֮׷ ٖأهٝأכ׉ך澓꟦ך剑倜ך朐䡾׾鵤ׅ

Slide 38

Slide 38 text

ؔ਺Ά͘ͳ͍ طحزٙ٦ؙך鹼䒀ծⱄ鷏ծ醱侧ך歗꬗ ؐ؍ٝسؐծةـַ׵ך乼⡲ծ鸬䩧 ؙٔؒأزָꅾ醱ׅ׷ֿהכ״ֻ֮׷ֿה ꟼ侧שֻ罋ִג醱侧ך朐䡾׾鏩ׅ⚛遤⚅歲 ׮ַ׏ְְֽֿו5PGVכ׉ֲ׃זַ׏׋

Slide 39

Slide 39 text

API༻ͷWidget class StateTofu < Tofu::Tofu def to_html(context) context.res_header('content-type', 'application/json') body = @session.to_hash.to_json context.res_body(body) context.done end def tofu_id 'api' end ٖأهٝأכKTPOדׅ״ せ⵸䝤ְ 8JEHFUך*%

Slide 40

Slide 40 text

URLͷྫ BQJ UPGV@JEBQJUPGV@DNEDIPPTFPQU var put_hand = (function (cards) { ... var url = '/api/?tofu_id=api;tofu_cmd=choose;opt=' + (z - 1); ... 8JEHFUך陎ⴽ㶨乼⡲ 䒷侧

Slide 41

Slide 41 text

chooseίϚϯυͷϋϯυϥ def do_choose(context, params) return if @session.finish? deck = @session.deck kind, opt = deck.prompt case kind when :spread_else, :outlet_else it ,= params['opt'] num = Integer(it) rescue nil return unless num if (0...(deck.hand.size)) === num card = deck.hand[num] deck.send(kind, card) end end end 䒷侧ךغٔر٦ءّٝ EFDLכְתדֹ׷ֿה׾ 濼׏גְ׷ 朐䡾ך刿倜 EFDLָ؜٦يך朐䡾

Slide 42

Slide 42 text

Web෦෼͸΋͏͍͍͔ 剑鵚ך➂ךקֲָ׆׏הֲת׉ֲ 罈㹱

Slide 43

Slide 43 text

ΧʔυήʔϜຊମ ٕ٦ٕ׾鎸鶢ׅ׷鿇ⴓ 7%. הַ⢪׏גזְ

Slide 44

Slide 44 text

ग़དྷ্͕͔ͬͯΒݟΕ͹͞ʔ דֹגַ׵鋅׸לֲֿ剅ֻ׃ַזְ׌׹ ה䙼ֲֽוծ罋ִגְ׷꟦כ鑐遤ꐪ铎ָ㢳 ַ׏׋

Slide 45

Slide 45 text

શମͷϧʔϧ Χʔυݻ༗ͷϧʔϧ ًةٕ٦ٕ؜٦يך崧׸הؕ٦س㔿剣 ךٕ٦ٕח׃ג׫׋ ه؛ؕהַ倜ؕ٦سכ㛇劤ךٕ٦ٕ׾♳ 剅ֹׅ׷״ֲזؕ٦سך鎸鶢לַ׶ ✲⵸ח窟さׁ׸׋ٕ٦ٕכ⡲׸זְ״ֲ ז孡ָׅ׷

Slide 46

Slide 46 text

ΧʔυΛબΜͩͱ͖ʹ.. ؕ٦س׀החװ׷ץֹֿהך"SSBZ׾䭯א !UPEP 鼅׿׌׵㜥؜٦يחUPEP׾鯄鎸 ؜٦يכֿךUPEP׾갫ח嶊顤׃גְֻ ؜٦يהְֲ7.חفؚٗٓي׾ٗ٦سׅ׷ 䠬ׄ

Slide 47

Slide 47 text

͍͔ͭ΍Γ͍ͨ ه؛ؕךرحؗך荈⹛欰䧭

Slide 48

Slide 48 text

CUI൛ Ꟛ涪䔲ⴱכ$6*晛ך؎ٝة٦ؿؑ؎أ׾⡲ ׶㹋꿀

Slide 49

Slide 49 text

ࢼ༡ͨ͠ ٕ٦ָٕ然钠דֹ׋ ֽ׏ֲֶֿ׮׃׹ְ

Slide 50

Slide 50 text

ڽΔ΂͖ͱ͜Ζ ر؝ٖ٦ءّٝחⳔ׷״׶ծ稆傍ְ乼⡲ծ ⽃秪זؙٔحؙזוָ荈ⴓחכ䗳銲 ׉ך穠卓ծⴽך➂ח麇׿ד׮׵ִזַ׏׋

Slide 51

Slide 51 text

੒Ռ ⹧׍瘡鋅אֽ׋ ְֻאַךٕ٦ٕך䲿周׾׃ג㹋ꥷח鷄⸇ ׃ג׮׵׏׋

Slide 52

Slide 52 text

Ծ૝ΧʔυήʔϜͷ໰୊఺ ءٍحؿָٕ蕱חז׵זְ չءٍحؿָٕ㢳ְպٕ٦ٕד֮׷ֿה ָ孡בֹחְֻ

Slide 53

Slide 53 text

લ࠲͸͜͜·Ͱ 劤箟׾ֶ嚂׃׫ֻ׌ְׁ