Tweet
Tweet

Slide 1

Slide 1 text

いばらき総文連2014コンピュータ部会 プログラミング研修会 (株)ユビキタスエンターテインメント enchant.js 開発チームリーダー 東京大学工学部 伏見遼平

Slide 2

Slide 2 text

今日の日程 10:30 - 11:30 enchant.js 初級編 11:30 - 12:30 実習 … アクションゲーム 13:30 - 14:15 実習 … フルーツパニック 13:15 - 13:30 enchant.js 中級編 14:15 - 15:15 Monaca + enchant.js 15:15 - 16:00　 コンテスト & 講評

Slide 3

Slide 3 text

コンテスト & 講評会について • 今日学んだことを元に、30分間でゲームを開発 してください。 • もちろん、すでにあるゲームのソースコードを 元にしてもらってもかまいません。 • 完成した方全員にプレゼンしていただきます。 • 完成度・ユニークなアイデア・プレゼンテーシ ョンを評価します。

Slide 4

Slide 4 text

ࣗݾ঺հ

Slide 5

Slide 5 text

෬ݟྒྷฏ ౦ژେֶ޻ֶ෦೥ ৘ใֶ؀ڭҭ෦ גࣜձࣾϢϏΩλε ΤϯλʔςΠϯϝϯτ

Slide 6

Slide 6 text

ࣗݾ঺հ ෬ݟྒྷฏ !TJEFTUFQJTN גࣜձࣾϢϏΩλεΤϯλʔςΠϯϝϯτ ळ༿ݪϦαʔνηϯλʔॴଐ FODIBOUKT։ൃνʔϜϦʔμʔ MFBQϓϩδΣΫτϦʔμʔ ౦ژେֶ޻ֶ෦ɾେֶӃ৘ใֶ؀ॴଐ

Slide 7

Slide 7 text

౦ژେֶ ڭཆֶ෦ ޻ֶ෦ ཧֶ෦ ೶ֶ෦ ༀֶ෦ จֶ෦ ܦࡁֶ෦ ڭҭֶ෦ ๏ֶ෦ લظ՝ఔ ೥ ޙظ՝ఔ ೥

Slide 8

Slide 8 text

ࣗݾ঺հ ೥ੜ ೥ɹେֶೖֶ ೥ɹגࣜձࣾϢϏΩλεΤϯλʔςΠϯϝϯτೖࣾ ɹɹɹFODIBOUKT MFBQͷ։ൃ ೥ɹDPEFMFBQͷ։ൃ ɹɹɹɹ౦ژେֶେֶӃ৘ใֶ؀ڭҭ෦ೖֶ ೥ɹ౦ژେֶ޻ֶ෦ਐֶ

Slide 9

Slide 9 text

ʮϓϩάϥϛϯάڭҭʯͷ ͨΊͷϓϩδΣΫτ

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

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

͜͜ͰΞϯέʔτ

Slide 22

Slide 22 text

தֶੜ

Slide 23

Slide 23 text

ߴߍੜ

Slide 24

Slide 24 text

େֶੜ

Slide 25

Slide 25 text

ઌੜ

Slide 26

Slide 26 text

ҵ৓ݝʹॅΜͰ͍Δਓ

Slide 27

Slide 27 text

ͦΕҎ֎ͷਓ

Slide 28

Slide 28 text

ֶߍΛ͢Ͱʹଔۀͨ͠ํ

Slide 29

Slide 29 text

ࣗ෼͕ࣗ༝ʹ࢖͑Δ ύιίϯΛ͍࣋ͬͯΔ

Slide 30

Slide 30 text

ͦΕ͸8JOEPXT

Slide 31

Slide 31 text

ͦΕ͸.BD

Slide 32

Slide 32 text

Ոͷύιίϯ͸Կ࣌·Ͱ ࢖͑Δ͔ܾ·͍ͬͯΔ

Slide 33

Slide 33 text

೔ʹɺ࣌ؒҎ্ύιίϯΛ࢖͏ਓ

Slide 34

Slide 34 text

೔ʹɺ࣌ؒҎ্ύιίϯΛ࢖͏ਓ

Slide 35

Slide 35 text

ϓϩάϥϜΛॻ͍ͨ͜ͱ͕͋Δਓ

Slide 36

Slide 36 text

ϓϩάϥϜΛॻ͍ͨ͜ͱ͕ͳ͍ਓ

Slide 37

Slide 37 text

िؒʹɺ ࣌ؒҎ্ϓϩάϥϜΛॻ͍͍ͯΔਓ

Slide 38

Slide 38 text

िؒʹɺ ࣌ؒҎ্ϓϩάϥϜΛॻ͍͍ͯΔਓ

Slide 39

Slide 39 text

ͦ΋ͦ΋ϓϩάϥϜͬͯ Կ͔஌͍ͬͯΔਓ

Slide 40

Slide 40 text

ϓϩάϥϛϯάͨ͜͠ͱ͋Δਓ

Slide 41

Slide 41 text

ʮϓϩάϥϛϯάʯͷఆٛΛݴ͑Δਓ

Slide 42

Slide 42 text

ϓϩάϥϛϯάͬͯԿ͔ͩ Α͘෼͔Βͳ͍͚Ͳ ΍ͬͨ͜ͱ͸͋Δਓ

Slide 43

Slide 43 text

·ͣ਎ͷճΓʹ͋ΔʮϓϩάϥϜʯΛ ࢥ͍ු͔΂ͯԼ͍͞

Slide 44

Slide 44 text

਎ۙʹ͋ΔϓϩάϥϜ

Slide 45

Slide 45 text

਎ۙʹ͋ΔϓϩάϥϜ

Slide 46

Slide 46 text

਎ۙʹ͋ΔϓϩάϥϜ

Slide 47

Slide 47 text

਎ۙʹ͋ΔϓϩάϥϜ

Slide 48

Slide 48 text

਎ۙʹ͋ΔϓϩάϥϜ

Slide 49

Slide 49 text

਎ۙʹ͋ΔϓϩάϥϜ

Slide 50

Slide 50 text

৽ӳ࿨தࣙయ ୈ̒൛ ʢݚڀࣾʣΑΓҾ༻ http://www.excite.co.jp/dictionary/english_japanese/?search=program&match=beginswith&dictionary=NEW_EJJE&block=41438&offset=1206

Slide 51

Slide 51 text

Hackers’ Cafe ϓϩάϥϜͱ͍͑͹ɾɾɾ ήʔϜϓϩάϥϜ ӡಈձͷϓϩάϥϜ ݁ࠗࣜͷࣜ࣍ୈ ςϨϏ൪૊ ӳޠͰ571SPHSBN ΧϦΩϡϥϜ ڭҭϓϩάϥϜͳͲ ϓϩάϥϜ͸਎ۙʹᷓΕͯΔ

Slide 52

Slide 52 text

ܚጯٛक़େֶͷ૿Ҫढ़೭ઌੜʹΑΕ͹ɺ ͜Μͳ΋ͷ΋ϓϩάϥϜʹͳΔͦ͏Ͱ͢ ໨֮·࣌͠ܭͷઃఆ ϏσΦσοΩͷ࿥ը༧໿ ࣗಈυΞͷ։ൃ

Slide 53

Slide 53 text

Hackers’ Cafe ӳ࿨ࣙయΛҾ͖·͠ΐ͏ ৽ӳ࿨தࣙయ ୈ̒൛ ʢݚڀࣾʣΑΓҾ༻ http://www.excite.co.jp/dictionary/english_japanese/?search=program&match=beginswith&dictionary=NEW_EJJE&block=41438&offset=1206

Slide 54

Slide 54 text

ʲిࢉʳ ϓϩάϥϜ ʬిࢉػʹࢦྩ͢Δ ࡞ۀखॱͷਫ਼ີͳهड़ʭ

Slide 55

Slide 55 text

ϓϩάϥϜ࡞ۀͷखॱͷৄ͍͠هड़

Slide 56

Slide 56 text

Hackers’ Cafe ϓϩάϥϜͷ͍Ζ͍Ζ ӡಈձͷϓϩάϥϜ ݁ࠗࣜͷࣜ࣍ୈ ΧϦΩϡϥϜ ։ձࣜ ۄೖΕ N૸ ٍഅઓ େۄૹΓ ΨΠμϯε ϓϩάϥϛϯά֓࿦ ܭࢉػՊֶͷجૅ ΞϧΰϦζϜͱσʔλߏ଄ ϓϩάϥϛϯά࣮श ։৔ ৽࿠৽්ೖ৔ ओෂѫࡰɾסഋ έʔΩೖ౛ ͓৭௚͠ ΩϟϯυϧαʔϏε ༑ਓʹΑΔ༨ڵ ՖՇ͔Β෕΁ͷखࢴ ดձ ·͞ʹखॱΛهड़ͯ͠Δ

Slide 57

Slide 57 text

૿Ҫढ़೭ઌੜͷྫࣔΛ࡞ۀखॱʹͯ͠ΈΔ ໨֮·࣌͠ܭͷઃఆ ɹˠɹ".ʹͳͬͨΒԻΛ໐Βͤ ϏσΦσοΩͷ࿥ը༧໿ ɹˠɹ೔༵ʹͳͬͨΒ ɹɹɹνϟϯωϧʹ͋Θͤͯ ɹ࣌ؒ࿥ը͠Ζ ࣗಈυΞͷ։ൃ ɹˠɹυΞͷલʹਓཱ͕ͬͨΒ ɹɹɹυΞΛ։͚ ɹɹɹਓཱ͕ͪڈͬͨΒ ɹɹɹυΞΛด͡Ζ

Slide 58

Slide 58 text

࣌ʹɺίϯϐϡʔλͱ͸

Slide 59

Slide 59 text

࣮͸ɺ೥લɺίϯϐϡʔλ͸ɺ৬ۀͰͨ͠

Slide 60

Slide 60 text

/"$"ͷܭࢉख ίϯϐϡʔλ ͷํʑ ग़యϑϦʔඦՊࣄయɹ8JLJQFEJB

Slide 61

Slide 61 text

ୈೋ࣍ੈքେઓͷ຤ظ ిࢠίϯϐϡʔλ͕࢈·Ε·ͨ͠

Slide 62

Slide 62 text

δϣϯɾϑΥϯɾϊΠϚϯ ग़యϑϦʔඦՊࣄయɹ8JLJQFEJB ϋϯΨϦʔग़਎ͷΞϝϦΧͷ਺ֶऀ ਺ֶɺ෺ཧֶɺؾ৅ֶɺܦࡁֶɺܭࢉػՊֶʹ େͳӨڹΛ༩͑ͨɻ ݪരͷ։ൃऀͷҰਓͰ΋͋Δɻ ͦͯ͠ిࢠίϯϐϡʔλൃ໌ऀͷҰਓ

Slide 63

Slide 63 text

ίϯϐϡʔλΛൃ໌ͨ͠ͱ͖ɺ ϊΠϚϯ͸͜͏ݴ͍·ͨ͠ ग़యϑϦʔඦՊࣄయɹ8JLJQFEJB Զͷ࣍ʹ಄ͷౕ͍͍͕Ͱ͖ͨ ࣮ࡍɺίϯϐϡʔλΑΓ΋ ܭࢉ͕଎͔ͬͨΒ͍͠

Slide 64

Slide 64 text

&/*"$ถ܉ͷ஄ಓܭࢉ༻ίϯϐϡʔλ ग़యϑϦʔඦՊࣄయɹ8JLJQFEJB

Slide 65

Slide 65 text

ίϩοαεӳࠃւ܉৘ใ෦ͷ։ൃͨ͠҉߸ղಡػ ग़యϑϦʔඦՊࣄయɹ8JLJQFEJB

Slide 66

Slide 66 text

;VTF;υΠπਓՊֶऀπʔθ͕։ൃͨ͠ίϯϐϡʔλ ग़యϑϦʔඦՊࣄయɹ8JLJQFEJB

Slide 67

Slide 67 text

࣮͸࠷ॳͷίϯϐϡʔλΛ ୭͕ൃ໌ͨ͠ͷ͔ਖ਼֬ͳ ͱ͜Ζ͸Θ͔͍ͬͯ·ͤΜ ग़యϑϦʔඦՊࣄయɹ8JLJQFEJB ΞϨɺΦϨ͕ߟ͑ͨΜͩ ͱɺϊΠϚϯ͕ݴ͍࢝ΊͨͷͰ ࢓ํͳ͘ɺͦͷޙͷίϯϐϡʔλ ͸͜͏ݺ͹ΕΔΑ͏ʹͳΓ·ͨ͠

Slide 68

Slide 68 text

ʮϊΠϚϯܕίϯϐϡʔλʯ ͦͯ͜͠ͷ࣌ͦ͜ɺ ίϯϐϡλʔϓϩάϥϜ஀ੜͷॠؒͳͷͰ͢

Slide 69

Slide 69 text

ϓϩάϥϛϯάݴޠͷ͍Ζ͍Ζ

Slide 70

Slide 70 text

࣮͸ɺίϯϐϡʔλ͕ཧղͰ͖Δݴޠ͸ $16ʹΑͬͯҧ͍·͢ *OUFM "3.

Slide 71

Slide 71 text

ίϯϐϡʔλ͕௚઀ཧղͰ͖ΔݴޠΛ ʮػցޠ Ϛγϯޠ ʯͱݺͼ·͢

Slide 72

Slide 72 text

Ϛγϯޠͬͯ͜Μͳײ͡Ͱ͢

Slide 73

Slide 73 text

͜ΕͲ͏΍ͬͯॻ͘ͷ ;ͭ͏ͷਓؒʹ͸ແཧͰ͢ ͔ͩΒੲͷϓϩάϥϚʔ͸ ੌ͍ਓ͔͍͠ͳ͔ͬͨͷͰ͢ ˣ

Slide 74

Slide 74 text

΋ͬͱ؆୯ʹϓϩάϥϜ͢ΔͨΊʹ ϚγϯޠҎ֎ͷϓϩάϥϛϯάݴޠ͕ ͨ͘͞Μ࢈·Ε·ͨ͠

Slide 75

Slide 75 text

FORTRAN ೥ʹ*#.Ͱ։ൃ͞Εͨखଓ͖ܕݴޠ 'PSNVMB5SBOTMBUJPO ਺ࣜ຋༁ ʹ ༝དྷ͢ΔɺՊֶٕज़ܭࢉ༻ݴޠ εʔύʔίϯϐϡʔλͳͲͰ͸ ࠓݱࡏ΋࢖ΘΕ͍ͯΔ

Slide 76

Slide 76 text

LISP ೥ੜ·Εͷؔ਺ܕݴޠ -JTU1SPDFTTPS͕༝དྷͰɺू߹ॲཧ͕ಘҙ +BWB4DSJQUͷ௚ܥͷઌ૆

Slide 77

Slide 77 text

Cݴޠ ೥ੜ·Εͷखଓ͖ܕݴޠ ߏ଄ԽϓϩάϥϛϯάΛಋೖ͠ɺ։ൃޮ཰͕Ξοϓ ݱࡏͰ΋෯޿͘࢖ΘΕ͍ͯΔݴޠͷͻͱͭͰ͋Δ

Slide 78

Slide 78 text

Smalltalk ೥ʹެ։͞ΕͨΦϒδΣΫτࢦ޲ݴޠ ؔ਺͕ଞݴޠͷ-*41΍-0(0ʹӨڹΛड͚ͨ ΞϥϯɾέΠ͕ઃܭͨ͠04ͷࢥ૝ʹ·Ͱ೾ٴ͢Δ ݴޠͰɺͦͷޙͷݴޠઃܭʹઈେͳӨڹΛ༩͑Δ

Slide 79

Slide 79 text

C++ ೥ʹ։ൃ͞ΕͨΦϒδΣΫτࢦ޲ݴޠ खଓ͖ܕݴޠͷ$ݴޠΛϕʔεͱͯ͠ΦϒδΣΫτ ࢦ޲ػೳΛ௥Ճͨ͠

Slide 80

Slide 80 text

Objective-C $ݴޠΛϕʔεͱͯ͠4NBMMUBML෩ͷΦϒδΣΫτࢦ ޲ػೳΛ௥Ճͨ͠΋ͷɻ J04΍.BDͳͲͰ࢖༻͞Ε͍ͯΔ

Slide 81

Slide 81 text

Java $Λϕʔεͱͯ͠ચ࿅ͤͨ͞΋ͷɻߴ౓ͳϝϞϦ ؅ཧػߏ΍ιϑτ΢ΣΞίϯϙʔωϯτͳͲΛ࣮ݱ

Slide 82

Slide 82 text

Ruby ೥ʹ·ͭ΋ͱΏ͖ͻΖࢯ͕ൃදͨ͠ࠃ࢈ϓϩ άϥϛϯάݴޠɻʮଟ༷ੑ͸ળʯͷεϩʔΨϯͷ΋ ͱ։ൃ͕ਐΊΒΕͨɻੈքͰ࠷΋ਐΜͩݴޠͷͻͱ ͭͰɺϑΝϯ΋ଟ͍ɻ

Slide 83

Slide 83 text

JavaScript ೥ʹ։ൃ͞Εͨ8FCϒϥ΢β༻ϓϩάϥϛϯ άݴޠɻ-*41ͷྲྀΕΛ૊Ήؔ਺ܕݴޠͰ͋Γͳ͕ Βɺ+BWBʹࣅͤͨจ๏ͷ࠾༻ͰղΓ΍͢͞΋ཱ྆͞ ͤΔɻ)5.-Ͱ࢖༻͞ΕΔࣄ্࣮ͷඪ४ݴޠ

Slide 84

Slide 84 text

enchant.js ೥ʹ։ൃ͞Εͨࠃ࢈+BWB4DSJQU༻ΞϓϦέʔ γϣϯΤϯδϯɻಠࣗͷΫϥεΠϕϯτػߏΛ੝Γ ࠐΈɺॳ৺ऀ͔Β্ڃऀ·Ͱ࢖͍΍͘͢վྑͨ͠

Slide 85

Slide 85 text

લాϒϩοΫ ೥ʹ։ൃ͞ΕͨϏδϡΞϧݴޠ FODIBOUKTΛϕʔεͱͨ͠ΫϩεϓϥοτϑΥʔϜ ͱɺ༮ࣇ͔Βେਓ·Ͱ࢖͑ΔݴޠΛ໨ࢦͯ͠։ൃ͞ Ε͍ͯΔɻ

Slide 86

Slide 86 text

今日学ぶのは… 前田ブロック と enchant.js

Slide 87

Slide 87 text

講義 enchant.jsについて

Slide 88

Slide 88 text

プログラミング言語 • C • C++ • Java • PHP • Ruby • JavaScript • Perl • Lisp • Haskell • Scheme • Objective-C • Visual Basic

Slide 89

Slide 89 text

Slide 90

Slide 90 text

Slide 91

Slide 91 text

プログラミング言語 • C言語・C++ - 言語の祖先 … ラテン語 - いろいろな言語に影響を与えた • JavaScript - 比較的新しい言語 … 英語 - 使っている人が多い

Slide 92

Slide 92 text

プログラミング言語 • 今回扱うのは、JavaScript • プログラミングの本質的な部分に注力するため • もちろん、ソフトウェアの中身を知るためには、 C言語やアーキテクチャに関する知識が必要です。

Slide 93

Slide 93 text

JavaScript とは?

Slide 94

Slide 94 text

JavaScript とは? 4DSJQU

Slide 95

Slide 95 text

JavaScript とは? 4DSJQU ʷ

Slide 96

Slide 96 text

JavaScript とは? • Brendan Rich (Java嫌い) • Netscape … 最初に普及した無料ブラウザ • Netscape「Javaっぽい言語を作ってくれ」 • Rich「えーっ」

Slide 97

Slide 97 text

JavaScript とは? 仕方ないから 見た目だけJavaっぽくしよう Brendan Rich

Slide 98

Slide 98 text

JavaScript とは? ʺJavaScript

Slide 99

Slide 99 text

JavaScript とは? • シンプルな文法 • 強力な記述力 • ただしちょっと遅い (cf. C言語の約10倍)

Slide 100

Slide 100 text

JavaScript とは? • Webブラウザ上で動く • いろんなデバイスで動く - iOS (iPhone, iPad) - Android - Mac, Windows, Linux

Slide 101

Slide 101 text

Slide 102

Slide 102 text

JavaScript とは? • 「JavaScript の知識」は 「プログラミング の知恵」ではない • プログラミングの知恵とは? → あとで話します

Slide 103

Slide 103 text

実習 前田ブロック編

Slide 104

Slide 104 text

(PPHMF$ISPNFͰ։͍ͯΈΑ͏ IUUQNBFEBCMPDLKQ

Slide 105

Slide 105 text

(PPHMF$ISPNFͰ։͍ͯΈΑ͏ IUUQNBFEBCMPDLKQ

Slide 106

Slide 106 text

͜ͷϓϩάϥϛϯά؀ڥͷओ໾

Slide 107

Slide 107 text

FODIBOUKTͷެࣜΩϟϥΫλʔ γʔϧͳͲͷ άοζਐग़Λܦͯ ͍ͭʹண͙ΔΈԽ

Slide 108

Slide 108 text

ʮ͜ͷΫϚΛಈ͔͢खॱʯ ΛϓϩάϥϜ͠·͠ΐ͏

Slide 109

Slide 109 text

͜ͷதͰಈ͖·͢ ࣮ߦϘλϯ

Slide 110

Slide 110 text

ʮύϖοτʯͷശ

Slide 111

Slide 111 text

ύϖοτϒϩοΫ ΛऔΓग़͢

Slide 112

Slide 112 text

͜ͷͭͷϒϩοΫΛ औΓग़͍ͯͩ͘͠͞

Slide 113

Slide 113 text

͸·ͬͨ

Slide 114

Slide 114 text

޿͕ͬͨ

Slide 115

Slide 115 text

ԼஈͷɹɹɹΛԡ͢ͱʜ ӈ্ͷը໘͕มΘΓ·͢

Slide 116

Slide 116 text

ΫϦοΫ͢Δͱɺ ग़ݱํ๏͕มΘΔ ʮͨ͘͞ΜͰΔʯ ʮ্͔Βग़ͯ͘Δʯ ʹม͑ͯɹɹɹͯ͠Έ·͠ΐ͏

Slide 117

Slide 117 text

͜ͷϒϩοΫΛग़ͯ͜͠Α͏

Slide 118

Slide 118 text

՝୊ ͦͷ

Slide 119

Slide 119 text

͜ͷಈ͖Λ࡞ͬͯΈΑ͏

Slide 120

Slide 120 text

ώϯτ࢖͏ϒϩοΫ͸͜ͷछྨ

Slide 121

Slide 121 text

ώϯτ͜ͷϒϩοΫΛෳ਺࢖͏

Slide 122

Slide 122 text

ώϯτ͜ͷϒϩοΫΛෳ਺࢖͏

Slide 123

Slide 123 text

λςͱϤίͷ δάβάΛՃ͑Δ

Slide 124

Slide 124 text

ը૾ΛΫϦοΫ͢Δͱ ը૾Λม͑ΒΕ·͢

Slide 125

Slide 125 text

ࠓ೔࡞Δͷ͸ ʮγϡʔςΟϯάήʔϜʯ

Slide 126

Slide 126 text

γϡʔςΟϯάήʔϜʹ͸Կ͕ඞཁ

Slide 127

Slide 127 text

ࣗػ

Slide 128

Slide 128 text

ఢ

Slide 129

Slide 129 text

ࣗ෼ͷ஄

Slide 130

Slide 130 text

ఢͷ஄

Slide 131

Slide 131 text

ύϖοτ͕ͭ͋Ε͹࡞ΕΔ

Slide 132

Slide 132 text

՝୊ ͦͷ

Slide 133

Slide 133 text

͜͏͍͏ϒϩοΫΛ࡞ͬͯΈ͍ͯͩ͘͞

Slide 134

Slide 134 text

͜͏͍͏ϒϩοΫΛ࡞ͬͯΈ͍ͯͩ͘͞ ͜ͷϒϩοΫͷ ໾ׂʹ஫໨

Slide 135

Slide 135 text

৽͍͠ϒϩοΫΛ঺հ ΠϕϯτϦεφ ϒϩοΫ ύϖοτग़ݱ ϒϩοΫ ͋Δ৚݅Ͱ Կ͔ͷखॱΛߦ͏ ύϖοτΛ ग़ݱͤ͞Δ

Slide 136

Slide 136 text

·ͣʮʙͷͱ͖ʯ ϒϩοΫΛ௥Ճ ύϖοτग़ݱ ϒϩοΫΛ௥Ճ ૣ଎࢖ͬͯΈΑ͏

Slide 137

Slide 137 text

·ͣʮʙͷͱ͖ʯ ϒϩοΫΛ௥Ճ ύϖοτग़ݱ ϒϩοΫΛ௥Ճ ͳΜ͔΍͹͍͜ͱʹˠ

Slide 138

Slide 138 text

৽͍͠ϒϩοΫΛ঺հ JGϒϩοΫ ৚݅ϒϩοΫ

Slide 139

Slide 139 text

JGϒϩοΫͱ৚݅ϒϩοΫΛ ૊Έ߹Θͤͯ࢖͏ ඵʹίϚͳͷͰɺ໿ඵʹ౓

Slide 140

Slide 140 text

தʹύϖοτग़ݱ ϒϩοΫΛೖΕΔ

Slide 141

Slide 141 text

͜ͷΧλϚϦΛதʹ ͍ΕͯΈΔ

Slide 142

Slide 142 text

͜ͷΧλϚϦΛதʹ ͍ΕͯΈΔ εϥΠϜͷग़ݱස౓͕ݮΓ·ͨ͠

Slide 143

Slide 143 text

஄ͳΜ͔ͩΒ લʹਐΜͰ΄͍͠

Slide 144

Slide 144 text

ʮࣗ෼ͷ஄ʯύϖοτʹ ʮಈ͖ʯϏϔΠϏΞΛ௥Ճ

Slide 145

Slide 145 text

Slide 146

Slide 146 text

ʮఢʯύϖοτʹ ʮ͋ͨΔʯϏϔΠϏΞΛ௥Ճ

Slide 147

Slide 147 text

Slide 148

Slide 148 text

͍ͩͿγϡʔςΟϯάήʔϜ

Slide 149

Slide 149 text

͋ͱ͸ɺఢ΋஄Λଧͬͯɺ ఢͷ஄ʹ౰ͨΔͱήʔϜΦʔόʔ ࠓ·ͰशͬͨϒϩοΫ ͜ͷϒϩοΫͰ0,

Slide 150

Slide 150 text

ϓϩάϥϛϯά͸ ʮ෦඼Λ૊Έ߹ΘͤΔʯ͚ͩͰͰ͖Δ ͲΜͳݴޠͰ΋ جຊతʹ͸ಉ͡

Slide 151

Slide 151 text

実習 enchant.js 編

Slide 152

Slide 152 text

IUUQDPEFMFBQOFU

Slide 153

Slide 153 text

IUUQDPEFMFBQOFU ͔Β͸͡ΊΑ͏

Slide 154

Slide 154 text

Slide 155

Slide 155 text

注意点 赤い ×が出ていたら 「文法エラー」です。 赤い ×にカーソルを合わせると、 文法ミスの内容がわかります。 この場合は、「)」 閉じカッコが足りません。 (閉じカッコのあるべきところに、「game」 があります)

Slide 156

Slide 156 text

注意点 • プログラムはすべて半角で打ち込みます。 • “”() + - = などの記号や、スペースも すべて半角です。 • 全角を使うと、たとえばこんな文法エラーが 出ます

Slide 157

Slide 157 text

注意点 • 文法エラーがなくても、スペルミスや、必要な命令 が足りないなどでうまく動かない場合があります。 • 今回は、どうしようもなくなったら、焦らずに、 もう一度「Fork」してやり直しましょう。

Slide 158

Slide 158 text

アカウント作成 • 「新規登録」をクリック

Slide 159

Slide 159 text

アカウント作成 • ユーザ名(半角英数) • パスワード(6文字以上) を入力 • 「利用規約」にチェック

Slide 160

Slide 160 text

• 「プログラミング講座」をクリック

Slide 161

Slide 161 text

Y Z

Slide 162

Slide 162 text

いばらき総文連2014コンピュータ部会 プログラミング研修会 後半戦 (株)ユビキタスエンターテインメント enchant.js 開発チームリーダー 東京大学工学部 伏見遼平

Slide 163

Slide 163 text

総文祭の話 • 総文祭…文化部のインターハイ • 協賛部門…今回限定の部門 • 定例開催になるかどうか…今回の盛り上がり次第 • 定例開催になれば…「第1回コンピュータ部門 全国優勝」 ௒͓τΫ

Slide 164

Slide 164 text

　　　interhigh • 中高校生向け「9leap」投稿サイト • 野球で言う「練習試合」のようなもの • 事務局や他のユーザから、スコアのデータやアドバイス がもらえます • 準備中!!! IUUQJOUFSIJHIMFBQOFU

Slide 165

Slide 165 text

おさらい • プログラムはすべて半角で打ち込みます。 • “”() + - = などの記号や、スペースも すべて半角です。 • 全角を使うと、たとえばこんな文法エラーが 出ます

Slide 166

Slide 166 text

おさらい • Sprite の基本的な使い方 - x座標、y座標、拡大、回転(rotation) - 移動 (enterframe イベントリスナ) • クラスの作り方 - コンストラクタの定義 (initialize) - new でコンストラクタ呼び出し - 継承

Slide 167

Slide 167 text

おさらい • アニメーション - Sprite#frame によるパラパラアニメ - Sprite#tl によるキュー制御 • Sprite 同士の当たり判定 • ゲームオーバー • スコア

Slide 168

Slide 168 text

プログラミングをなぜ学ぶのか?

Slide 169

Slide 169 text

1つは「複雑な現象を理解する」のため

Slide 170

Slide 170 text

ࣗ෼ ఢ ஄ ࣗ෼ͷ஄ ఢͷ஄ ੑ࣭Λड͚ܧ͙ લʹਐΉ ఢͱͿ͔ͭΔ ৭͸੨ ࣗ෼ͱͿ͔ͭΔ ৭͸੺ ੑ࣭Λ֦ு͢Δ

Slide 171

Slide 171 text

ڞ௨͢Δ ϏϔΠϏΞ͕ଟ͍

Slide 172

Slide 172 text

ʮࣅͨ΋ͷΛ͘͘Γɺੑ࣭Λఆٛ͢Δʯ ʮڞ௨͢Δੑ࣭ΛऔΓग़͢ʯ ʮΫϥεͷؒͷ૬ޓ࡞༻Λఆٛ͢Δʯ ʮϞσϦϯάೳྗʯ

Slide 173

Slide 173 text

すごく大きなプログラムをつくる時…

Slide 174

Slide 174 text

すごく大きなプログラムをつくる時…

Slide 175

Slide 175 text

461&3."3*0

Slide 176

Slide 176 text

ϚϦΦ ΫϦϘʔ ϒϩοΫ ʁϒϩοΫ Ωϊί

Slide 177

Slide 177 text

461&3."3*0 ϚϦΦ ΫϦϘʔ ϒϩοΫ ʁϒϩοΫ είΞ ίΠϯ ϫʔϧυ λΠϜ ԡͨ͠ޙͷ ʁϒϩοΫ Ωϊί େϚϦΦ ϑϥϫʔ ϑΝΠΞ ϚϦΦ

Slide 178

Slide 178 text

ϚϦΦ ΫϦϘʔ ϒϩοΫ ʁϒϩοΫ είΞ ίΠϯ ϫʔϧυ λΠϜ ԡͨ͠ޙͷ ʁϒϩοΫ Ωϊί େϚϦΦ ϑϥϫʔ ϑΝΠΞ ϚϦΦ

Slide 179

Slide 179 text

ϚϦΦ ΫϦϘʔ ϒϩοΫ ʁϒϩοΫ είΞ ίΠϯ ϫʔϧυ λΠϜ ԡͨ͠ޙͷ ʁϒϩοΫ Ωϊί େϚϦΦ ϑϥϫʔ ϑΝΠΞ ϚϦΦ

Slide 180

Slide 180 text

࿈བྷ໢σʔλϕʔε

Slide 181

Slide 181 text

ਓΫϥε ࿈བྷΫϥε ࢯ໊ɾి࿩൪߸Λ஌͍ͬͯΔ ࿈བྷݩɾ࿈བྷઌͷਓΛ஌͍ͬͯΔ

Slide 182

Slide 182 text

ਓ ࿈བྷ ࿈བྷ ਓ ਓ ࿈བྷ ਓ

Slide 183

Slide 183 text

࿈བྷݩ ࿈བྷઌ Ώ͏͡ ·ΏΈ Ώ͏͡ ͱ΋Α ·ΏΈ Α͏͚͢ Α͏͚͢ ͨ͘΍ Α͏͚͢ Έ͞ͱ ͱ΋Α ͻΖ͠ ͱ΋Α ΏΈ͜ ࢯ໊ ి࿩൪߸ ·ΏΈ YYYYYYYYY ͱ΋Α YYYYYYYYY Α͏͚͢ YYYYYYYYY ͨ͘΍ YYYYYYYYY Έ͞ͱ YYYYYYYYY ͻΖ͠ YYYYYYYYY ΏΈ͜ YYYYYYYYY

Slide 184

Slide 184 text

࿈བྷ໢ͷߏ଄ʹண໨ ਓ͸ɺਓͷਓ͔ΒͷΈ࿈བྷΛड͚Δ

Slide 185

Slide 185 text

࿈བྷݩ ࿈བྷઌ Ώ͏͡ ·ΏΈ Ώ͏͡ ͱ΋Α ·ΏΈ Α͏͚͢ Α͏͚͢ ͨ͘΍ Α͏͚͢ Έ͞ͱ ͱ΋Α ͻΖ͠ ͱ΋Α ΏΈ͜ ࢯ໊ ి࿩൪߸ ·ΏΈ YYYYYYYYY ͱ΋Α YYYYYYYYY Α͏͚͢ YYYYYYYYY ͨ͘΍ YYYYYYYYY Έ͞ͱ YYYYYYYYY ͻΖ͠ YYYYYYYYY ΏΈ͜ YYYYYYYYY

Slide 186

Slide 186 text

ࢯ໊ ి࿩൪߸ ࿈བྷݩ ·ΏΈ YYYYYYYYY Ώ͏͡ ͱ΋Α YYYYYYYYY Ώ͏͡ Α͏͚͢ YYYYYYYYY ·ΏΈ ͨ͘΍ YYYYYYYYY Α͏͚͢ Έ͞ͱ YYYYYYYYY Α͏͚͢ ͻΖ͠ YYYYYYYYY ͱ΋Α ΏΈ͜ YYYYYYYYY ͱ΋Α

Slide 187

Slide 187 text

ਓΫϥε ࢯ໊ɾి࿩൪߸ɾ࿈བྷΛड͚Δਓ Λ஌͍ͬͯΔ ࿈བྷΫϥε

Slide 188

Slide 188 text

ਓ ਓ ਓ ਓ ॲཧ͕؆୯ʹͳΔ σʔλ༰ྔ͕খ͘͞ͳΔ

Slide 189

Slide 189 text

ʮϞσϦϯάೳྗʯ ͜Ε΋

Slide 190

Slide 190 text

プログラミングの「モデリング」は、 科学の考え方と同じ。

Slide 191

Slide 191 text

1つは「コンピュータを使えるようになる」ため

Slide 192

Slide 192 text

数学

Slide 193

Slide 193 text

掛け算しよう ※ 解ける人は手を挙げて

Slide 194

Slide 194 text

2 ×6 = ?

Slide 195

Slide 195 text

12222 ×1666 = ?

Slide 196

Slide 196 text

2 ×6 = ?

Slide 197

Slide 197 text

12 ×6 = ?

Slide 198

Slide 198 text

122 ×6 = ?

Slide 199

Slide 199 text

122 ×16 = ?

Slide 200

Slide 200 text

筆算ならできる? 1 2 2 × 1 6 7 3 2 1 2 2 0 1 9 5 2

Slide 201

Slide 201 text

12222 ×1666 = ?

Slide 202

Slide 202 text

頑張れば、解ける 1 2 2 2 2 × 1 6 6 6

Slide 203

Slide 203 text

(たぶん) 頑張れば、解ける 1 2 2 2 2 2 2 × 1 6 6 6 6 6

Slide 204

Slide 204 text

もし、筆算を知らなかったら… 「どう解いていいかわからない」 1 2 2 2 2 2 2 × 1 6 6 6 6 6

Slide 205

Slide 205 text

どう解いていいのか 分からない問題 頑張れば、時間はかかるけど 解ける問題 問題の答え 12222 ×1666 たくさんの 九九と足し算の組み合わせに 分解 20,321,852 1 2 2 2 2 2 2 × 1 6 6 6 6 6

Slide 206

Slide 206 text

「大きな問題を、小さな問題に分けて考える」のは 科学の考え方と同じ。

Slide 207

Slide 207 text

Slide 208

Slide 208 text

どう解いていいのか 分からない問題 問題の答え

Slide 209

Slide 209 text

どう解いていいのか 分からない問題 問題の答え

Slide 210

Slide 210 text

どう解いていいのか 分からない問題 頑張れば、時間はかかるけど 解ける問題 問題の答え

Slide 211

Slide 211 text

どう解いていいのか 分からない問題 頑張れば、時間はかかるけど 解ける問題 問題の答え

Slide 212

Slide 212 text

どう解いていいのか 分からない問題 頑張れば、時間はかかるけど 解ける問題 問題の答え コンピュータの力 数学の力、 プログラミングの力

Slide 213

Slide 213 text

プログラミングが できるようになりたい! ならば… 今習っている「数学」を きちんと勉強しよう

Slide 214

Slide 214 text

58888 ×6411 = ? 将来、こんな難しい問題が出てきても…

Slide 215

Slide 215 text

58888 ×6411 = ? 1 2 2 × 1 6 7 3 2 1 2 2 0 1 9 5 2 122 ×16 = ? 小さな問題に分割すれば、大丈夫

Slide 216

Slide 216 text

なぜプログラミングを学ぶのか 1. 複雑な現象を理解できる 2. 大きな問題を、小さく分けて解ける 「科学の考え方」を 自然に身につけられる

Slide 217

Slide 217 text

• 自分で考えたものを、作って動かすのは楽しい! • 複雑なアプリケーションが、自分の思い通りに動 くともっと楽しい! なぜプログラミングを学ぶのか

Slide 218

Slide 218 text

ͬͯԿ

Slide 219

Slide 219 text

͖͔ͬ͞Βઆ໌ͳ͠ʹ ࢖ͬͯΔ͚Ͳ͞ʜ UTVEBYͱ͔B[VNBTBZͱ͔ "[VNBJOUFSTFDUͱ͔ ͍͍ͬͨͬͯɺͳΜͳͷ͞

Slide 220

Slide 220 text

͔͜͜Β͸ +BWB4DSJQUͷࠜװ෦෼Λ Ͱ͖Δ͚ͩ͝·͔ͣ͞ʹઆ໌͠·͢

Slide 221

Slide 221 text

GVODUJPO \^ lϙετϞμϯl B[VNB "[VNB

Slide 222

Slide 222 text

+BWB4DSJQUͷੈքͰ͸ʜ ѻ͑Δ΋ͷ͸ɺ͢΂ͯzΦϒδΣΫτz GVODUJPO \^ lϙετϞμϯl B[VNB "[VNB

Slide 223

Slide 223 text

lΦϒδΣΫτz͸zϓϩύςΟzΛ͍࣋ͬͯΔ ผ໊ʮεϩοτʯʮϝιουʯ ϓϩύςΟ ஋ JNBHF HBNFBTTFUT Z TDBMF9 POFOUFSGSBNF GVODUJPO \^ B[VNB ΦϒδΣΫτ

Slide 224

Slide 224 text

lΦϒδΣΫτz͸zϓϩύςΟzΛ͍࣋ͬͯΔ ϓϩύςΟ ஋ JNBHF HBNFBTTFUT Z TDBMF9 POFOUFSGSBNF GVODUJPO \^ ϓϩτλΠϓ "[VNBQSPUPUZQF B[VNB ΦϒδΣΫτ

Slide 225

Slide 225 text

ϓϩύςΟ ஋ POFOUFSGSBNF GVODUJPO \^ ϓϩτλΠϓ 4QSJUFQSPUPUZQF CFBS ϓϩύςΟ ஋ JNBHF OVMM ϓϩτλΠϓ &OUJUZQSPUPUZQF 4QSJUF ϓϩύςΟ ஋ Y Z TDBMF9 TDBMF: ϓϩτλΠϓ /PEFQSPUPUZQF &OUJUZ

Slide 226

Slide 226 text

ϓϩύςΟ ஋ POFOUFSGSBNF GVODUJPO \^ ϓϩτλΠϓ 4QSJUFQSPUPUZQF CFBS ϓϩύςΟ ஋ JNBHF OVMM ϓϩτλΠϓ &OUJUZQSPUPUZQF 4QSJUF ϓϩύςΟ ஋ Y Z TDBMF9 TDBMF: ϓϩτλΠϓ /PEFQSPUPUZQF &OUJUZ Zͷ஋ڭ͑ͯ

Slide 227

Slide 227 text

ϓϩύςΟ ஋ POFOUFSGSBNF GVODUJPO \^ ϓϩτλΠϓ 4QSJUFQSPUPUZQF CFBS ϓϩύςΟ ஋ JNBHF OVMM ϓϩτλΠϓ &OUJUZQSPUPUZQF 4QSJUF ϓϩύςΟ ஋ Y Z TDBMF9 TDBMF: ϓϩτλΠϓ /PEFQSPUPUZQF &OUJUZ

Slide 228

Slide 228 text

ϓϩύςΟ ஋ POFOUFSGSBNF GVODUJPO \^ ϓϩτλΠϓ 4QSJUFQSPUPUZQF CFBS ϓϩύςΟ ஋ JNBHF OVMM ϓϩτλΠϓ &OUJUZQSPUPUZQF 4QSJUF ϓϩύςΟ ஋ Y Z TDBMF9 TDBMF: ϓϩτλΠϓ /PEFQSPUPUZQF &OUJUZ

Slide 229

Slide 229 text

ϓϩύςΟ ஋ POFOUFSGSBNF GVODUJPO \^ ϓϩτλΠϓ 4QSJUFQSPUPUZQF CFBS ϓϩύςΟ ஋ JNBHF OVMM ϓϩτλΠϓ &OUJUZQSPUPUZQF 4QSJUF ϓϩύςΟ ஋ Y Z TDBMF9 TDBMF: ϓϩτλΠϓ /PEFQSPUPUZQF &OUJUZ ·ͩͩΑ

Slide 230

Slide 230 text

ϓϩύςΟ ஋ POFOUFSGSBNF GVODUJPO \^ ϓϩτλΠϓ 4QSJUFQSPUPUZQF "[VNBQSPUPUZQF ϓϩύςΟ ஋ JNBHF OVMM ϓϩτλΠϓ &OUJUZQSPUPUZQF 4QSJUFQSPUPUZQF ϓϩύςΟ ஋ Y &OUJUZQSPUPUZQF ϓϩύςΟ ஋ JNBHF HBNFBTTFUT ϓϩτλΠϓ "[VNBQSPUPUZQF B[VNB

Slide 231

Slide 231 text

ϓϩύςΟ ஋ POFOUFSGSBNF GVODUJPO \^ ϓϩτλΠϓ 4QSJUFQSPUPUZQF "[VNBQSPUPUZQF ϓϩύςΟ ஋ JNBHF OVMM ϓϩτλΠϓ &OUJUZQSPUPUZQF 4QSJUFQSPUPUZQF ϓϩύςΟ ஋ Y &OUJUZQSPUPUZQF ͡Ό͋ɺOFX"[VNB ͬͯͲ͏͍͏͜ͱ

Slide 232

Slide 232 text

ϓϩύςΟ ஋ POFOUFSGSBNF GVODUJPO \^ ϓϩτλΠϓ 4QSJUFQSPUPUZQF "[VNBQSPUPUZQF ϓϩύςΟ ஋ JNBHF OVMM ϓϩτλΠϓ &OUJUZQSPUPUZQF 4QSJUFQSPUPUZQF ϓϩύςΟ ஋ Y &OUJUZQSPUPUZQF ϓϩύςΟ ஋ JNBHF HBNFBTTFUT ϓϩτλΠϓ "[VNBQSPUPUZQF B[VNB "[VNBQSPUPUZQFΛ ϓϩτλΠϓͱͨ͠ ৽͍͠ΦϒδΣΫτΛ࡞Δ

Slide 233

Slide 233 text

͍ͬͨΜ๨Ε·͠ΐ͏

Slide 234

Slide 234 text

OFX"[VNB ͬͯͲ͏͍͏͜ͱ ˣ ʮ"[VNBʯͱ͍͏ܕ Ϋϥε Λݩʹ ৽͍͠ΦϒδΣΫτ Πϯελϯε Λ࡞Δ Ϋϥεϕʔεͷଊ͑ํ

Slide 235

Slide 235 text

+BWB4DSJQU͸ʮϓϩτλΠϓʯϕʔεͳͷʹɺ ʮΫϥεʯϕʔεͷଊ͑ํ΋Ͱ͖Δෆࢥٞͳݴޠ

Slide 236

Slide 236 text

ʙΛ΋ͱʹͯ͠ਐΊΔ

Slide 237

Slide 237 text

プログラミングに、 興味を持ってもらえましたか?

Slide 238

Slide 238 text

΋ͬͱֶͼ͍ͨਓ޲͚ IUUQEPUJOTUBMMDPN

Slide 239

Slide 239 text

΋ͬͱֶͼ͍ͨਓ޲͚ νϡʔτϦΞϧ IUUQFODIBOUKTDPN 3FTPVSDFʹղઆ͋Γ ೔ຊޠ

Slide 240

Slide 240 text

΋ͬͱֶͼ͍ͨਓ޲͚ IUUQMFBQOFU

Slide 241

Slide 241 text

΋ͬͱֶͼ͍ͨਓ޲͚ IUUQMFBQOFU

Slide 242

Slide 242 text

΋ͬͱֶͼ͍ͨਓ޲͚ IUUQXXXDPEFBDBEFNZDPN ӳޠ

Slide 243

Slide 243 text

今日学んだことは、 プログラミングにおける 「はじめの一歩」

Slide 244

Slide 244 text

プログラミングに関しては、 「はじめの一歩」を踏み出せない人のほうが 多いのです

Slide 245

Slide 245 text

実は、この講座と同じ内容を オトナの社会人向けにすでに教えています 「学生・社会人なんて関係ない!」 のがプログラミングの世界

Slide 246

Slide 246 text

プログラムを書いて、 面白いゲームを作ったら、 その後 どうすればいいの…?

Slide 247

Slide 247 text

まずは、今日作ったプログラムを 友達と共有してみよう 率直な意見を聞ける友達・先生は とても大切です!

Slide 248

Slide 248 text

「enchant.js」を使った ゲーム開発コンテスト 「9leap」

Slide 249

Slide 249 text

「9leap」に ぜひ投稿してみてください! 「優秀賞」「最優秀賞」に選ばれれば 最新ノートパソコンがもらえる & シリコンバレーに行けるチャンス!!

Slide 250

Slide 250 text

「9leap」本戦はちょっとハイレベルなので… 2013年・夏から高校生以下限定 「9leap youth」がスタートします。

Slide 251

Slide 251 text

2014年・夏には、 茨城で開催される全国総合文化祭で プログラミングが正式種目採用。 「9leap」本戦はちょっとハイレベルなので… 2013年・夏から高校生以下限定 「9leap youth」がスタートします。

Slide 252

Slide 252 text

2014年・夏には、 茨城で開催される全国総合文化祭で プログラミングが正式種目採用。

Slide 253

Slide 253 text

質疑応答