Slide 1
Slide 1 text
Ұൠࣾஂ๏ਓϦϨʔγϣϯσβΠϯݚڀॴ
දཧࣄɹࡗݪণ
ʮͳΜͪΌͬͯʯϑϩϯτΤϯυ
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
ࣗݾհ
ࡗݪণ
Ұൠࣾஂ๏ਓϦϨʔγϣϯσβΠϯ
ݚڀॴදཧࣄ
Ұൠࣾஂ๏ਓΤϦΞɾ
ΠϊϕʔγϣϯɾΞϥΠΞϯε$50
*POJD+BQBOද
*POJDίΞίϯτϦϏϡʔλʔ
Slide 4
Slide 4 text
<1SPEVDU>"SFB*OOPWBUJPO3FWJFX
Slide 5
Slide 5 text
<1SPEVDU>UJQTZT
Slide 6
Slide 6 text
$POUSJCVUF
ionic-team/ionic
ionic-team/starters
ionic-team/ionic-cli
Slide 7
Slide 7 text
։ൃαϙʔταʔϏε
Slide 8
Slide 8 text
ϑϩϯτΤϯυͱ
Ϣʔβͷग़ೖྗΠϯλʔϑΣΠεͷͯ͢
マークアップ UI Design
プログラミング
Slide 9
Slide 9 text
੩తαΠτ
マークアップ
Slide 10
Slide 10 text
ಈతαΠτ
出力結果
動的プログラミング言語
Slide 11
Slide 11 text
1)1ͷಛ
の中に を書くための言語
ここにもHTML書けちゃう！
Slide 12
Slide 12 text
ͪΌΜͱϑϩϯτΤϯυΛΈΑ͏
Slide 13
Slide 13 text
8FCͷτϨϯυ
੩తαΠτ
4JOHMF1BHF"QQMJDBUJPO 41"
3&45"1*(SBQI2-ʹΑΔόοΫΤ
ϯυͱϑϩϯτΤϯυͷϒϦοδ
+BWB4DSJQUʹΑΔϦονͳ6*
1SPHSFTTJWF8FC"QQT 18"
41"8FC"1*
ಈతαΠτ
ΑΓΑ͍69Λࢦ͢
Slide 14
Slide 14 text
41"18"ʹ͓͚Δ1)1ͷׂ
フロントエンド
動的プログラミング言語
API
Slide 15
Slide 15 text
41"ͰγʔϜϨεͳϢʔβମݧΛɻ
Slide 16
Slide 16 text
41"ͰγʔϜϨεͳϢʔβମݧΛɻ
index.html
4JOHMF1BHF"QQMJDBUJPO
Slide 17
Slide 17 text
41"ͰγʔϜϨεͳϢʔβମݧΛɻ
Slide 18
Slide 18 text
41"ͰγʔϜϨεͳϢʔβମݧΛɻ
ৗʹߴͰ҆ఆͨ͠ύϑΥʔϚϯε
ॳظϩʔυͰTIFMMͷϩʔυྃʗϖʔδ
ભҠͷߴԽʗ-B[Z-PBEJOH
ωΠςΟϒΞϓϦͷΑ͏ͳૢ࡞ੑ
ʢ1SPHSFTTJWF8FC"QQTͰޙड़ʣ
σʔλͷޮతͳ༻
࠶ϩʔυΛߦΘͳ͍ʗ+40/ϑΝΠϧ
ʢ3&45"1*ʣͷޮతར༻
\n^
Slide 19
Slide 19 text
41"ͰγʔϜϨεͳϢʔβମݧΛɻ
͜Εͷ௨৴ίετ
Slide 20
Slide 20 text
41"ͰγʔϜϨεͳϢʔβମݧΛɻ
2435文字
Slide 21
Slide 21 text
41"ͰγʔϜϨεͳϢʔβମݧΛɻ
[{
"name": "tipsys",
"desc": "国内で唯一の女友だちをつくる女性専用ソーシャルサービス。PWA・iOS・Androidアプリで配信中。ユーザ数1万人を
突破しました！",
"image": "assets/images/tipsys.svg",
"miniImage": "assets/images/tipsys.svg",
"url": "https://tipsys.me"
},
{
"name": "Ionic-WP.com",
"desc": "アプリ制作に興味をもつWeb制作者のためのパッケージをオープンソースで公開。WordPressとIonicで簡単にアプリ
をつくることができます。",
"image": "assets/images/[email protected]",
"miniImage": "assets/images/[email protected]",
"url": "https://ionic-wp.com"
},
{
"name": "執筆・出版",
"desc": "技術書籍の執筆を行っております。「Ionicで作る モバイルアプリ制作入門」「PHPフレームワークCodeIgniter3 超入
門」好評発売中！",
"image": "assets/images/[email protected]",
"miniImage": "assets/images/[email protected]",
"url": "https://amzn.to/2HOhiy1"
}]
716文字
Slide 22
Slide 22 text
41"ͰγʔϜϨεͳϢʔβମݧΛɻ
Slide 23
Slide 23 text
41"ͰγʔϜϨεͳϢʔβମݧΛɻ
Slide 24
Slide 24 text
18"Ͱ8ΛΞϓϦͱͯ͠ਐԽͤ͞Α͏
Slide 25
Slide 25 text
18"Ͱ8ΛΞϓϦͱͯ͠ਐԽͤ͞Α͏
ΦϑϥΠϯදࣔ
#BDLHSPVOE4ZOD
1VTI௨
ϗʔϜը໘ʹՃ
(14ΧϝϥͳͲͷ
/BUJWFػೳͷΞΫηε
Slide 26
Slide 26 text
ΦϑϥΠϯදࣔʢΩϟογϡදࣔʣ
w ࣗͰνΣοΫ͓ͯ͠ؾʹೖΓʹೖΕ͓ͨ
ళใΛग़ઌͰݟ͢
w ిंͷதͰϒϥβόοΫͨ͠ॠؒʹτϯ
ωϧʹೖͬͨ
w ʰΠϯλʔωοτଓ͕͋Γ·ͤΜʱ
8FCͰํͳ͍ʁ
σϞ
IUUQTBJSBSFBJBKQ
18"Ͱ8ΛΞϓϦͱͯ͠ਐԽͤ͞Α͏
Slide 27
Slide 27 text
#BDLHSPVOE4ZOD
ΦϑϥΠϯ࣌ʹૹ৴ͨ͠σʔλΛ࣋ͪଓ
͚ɺΦϯϥΠϯʹ෮ؼͨ࣌͠ʹࣗಈతʹ
ૹ৴͢Δػೳ
18"Ͱ8ΛΞϓϦͱͯ͠ਐԽͤ͞Α͏
Slide 28
Slide 28 text
1VTI௨
࢈ܦ৽ฉΛ͡Ίͱͯ͠ଟ͘ͷେखϝσΟ
Ξ'BDFCPPL5XJUUFSͳͲ͕͢Ͱʹ࣮
ɻϒϥβͰ1VTI௨͕ૹΕ·͢ɻ
ϗʔϜը໘ʹՃ
ΞϓϦͱಉ༷ʹϗʔϜʹΞΠίϯΛஔ
Ͱ͖ΔɻωΠςΟϒΞϓϦͬΆ͘ىಈɻ
(14ΧϝϥͳͲͷ
εϚϗػೳͷΞΫηε
18"Ͱ8ΛΞϓϦͱͯ͠ਐԽͤ͞Α͏
Slide 29
Slide 29 text
18"Ͱ8ΛΞϓϦͱͯ͠ਐԽͤ͞Α͏
RAIL モデル
100ms 60FPS 1000ms
活用
Slide 30
Slide 30 text
18"Ͱ8ΛΞϓϦͱͯ͠ਐԽͤ͞Α͏
https://developers.google.com/web/fundamentals/performance/rail?hl=ja
Slide 31
Slide 31 text
18"Ͱ8ΛΞϓϦͱͯ͠ਐԽͤ͞Α͏
Slide 32
Slide 32 text
18"Ͱ8ΛΞϓϦͱͯ͠ਐԽͤ͞Α͏
Slide 33
Slide 33 text
Ϣʔβ·ͩϓϥοτϑΥʔϜΛબͳ͍ͷʁ
Slide 34
Slide 34 text
Ϣʔβ·ͩϓϥοτϑΥʔϜΛબͳ͍ͷʁ
)5.-
$
+BWB
"QBDIF'PVOEBUJPO
Slide 35
Slide 35 text
)5.-
$
+BWB
4XJGU
,PUMJO
*POJDUFBN
/BUJWF1SPHSFTTJWF8FC"QQT
Ϣʔβ·ͩϓϥοτϑΥʔϜΛબͳ͍ͷʁ
Slide 36
Slide 36 text
Ϣʔβ·ͩϓϥοτϑΥʔϜΛબͳ͍ͷʁ
/BUJWF6*4IFMMʢ/BUJWFͱ8FC7JFXͷ༥߹ʣ
.JYJOH/BUJWF6*BOE8FCXBDSPTTQMBUGPSN6*
Slide 37
Slide 37 text
Ϣʔβ·ͩϓϥοτϑΥʔϜΛબͳ͍ͷʁ
https://vimeo.com/55486684
Slide 38
Slide 38 text
Ϣʔβ·ͩϓϥοτϑΥʔϜΛબͳ͍ͷʁ
888
Slide 39
Slide 39 text
Ϣʔβ͚ͩ͡Όͳͯ͘ɺαʔόʹ༏͘͠
Slide 40
Slide 40 text
Ϣʔβ͚ͩ͡Όͳͯ͘ɺαʔόʹ༏͘͠
.PEFMͰσʔλΛܗͯ͠
߹ʹΑͬͯ$PUSPMMFSͰ
ͦΕΛల։ɾ࠶ܗͯ͠
7JFXͰల։͢Δ
7JFXͷϨϯμϦϯάॏ͍ɻ
Slide 41
Slide 41 text
Ϣʔβ͚ͩ͡Όͳͯ͘ɺαʔόʹ༏͘͠
EC2��コスト1 （t2 small1台）
RDS��コスト3 (t2 small 1台/ medium 1台）
���������※ チューニング前はコスト8
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
フロントエンド
動的プログラミング言語
HTTPレスポンス
ࣗ༝ࣗࡏͳΤϥʔϋϯυϦϯά
Slide 49
Slide 49 text
"1*ͱϑϩϯτΤϯυͷଟ༷ͳؔ
Slide 50
Slide 50 text
"1*ͱϑϩϯτΤϯυͷଟ༷ͳؔ
"1*ʹΑΓɺ
ίϯςϯπͱ6*Λ
ૄ݁߹ͳؔʹɻ
\n^
https://speakerdeck.com/hideokamoto/javascriptdehazimeru-multi-ui-application
Slide 51
Slide 51 text
"1*ͱϑϩϯτΤϯυͷଟ༷ͳؔ
ユーザ、コメント管理
記事の既読管理
カテゴリへのアイキャッチ画像
記事と画像
閲覧
Slide 52
Slide 52 text
"1*ͱϑϩϯτΤϯυͷଟ༷ͳؔ
期間の記事を取得して
文字列でメルマガ自動生成
記事と画像
メルマガ配信
Slide 53
Slide 53 text
41"18"ʹ͓͚Δޡղ
Slide 54
Slide 54 text
ىಈ͍ΜͰ͠ΐʁ
(PPHMFݕࡧͰͪΌΜͱಡΈࠐΜͰ͘Εͳ͍ͷͰ
0(1λάͱ͔ͪΌΜͱಈ͔ͳ͍ΜͰ͠ΐʁ
18"͍ͬͯ·͍ͪ͡Όͳ͍ͷʁ
Slide 55
Slide 55 text
w 4&-&$5͍
w ෳ$16Λ༻͍ͯΫΤϦ࣮ߦ͢ΔʮύϥϨϧΫΤϦʯʢતʣ
w 1PTU(*4ΛͬͯਤσʔλΛѻ͑Δʢۭؒσʔλѻ͑Δ
w ܕ͕ݫ֨ͳͷͰൺֱ͕ࣜॻ͖͍͢
w ϒϩοΩϯάॲཧ͕ݰਓࢦ
18"͍ͬͯ·͍ͪ͡Όͳ͍ͷʁ
Slide 56
Slide 56 text
18"͍ͬͯ·͍ͪ͡Όͳ͍ͷʁ
Slide 57
Slide 57 text
18"͍ͬͯ·͍ͪ͡Όͳ͍ͷʁ
Slide 58
Slide 58 text
18"͍ͬͯ·͍ͪ͡Όͳ͍ͷʁ
Slide 59
Slide 59 text
͜Ε͔Βͷ1)1
で フロントエンドを描画するのが
ΞϯνύλʔϯʹͳΔ͙ͦͩ͢͜ɻ
Slide 60
Slide 60 text
/&9545&1ϑϩϯτΤϯυΛֶ΅͏
Slide 61
Slide 61 text
1)1Ͱ3&45"1*ͭ͘Δͷ؆୯
Slide 62
Slide 62 text
ϑϩϯτΤϯυΛ͡ΊΔ͓͢͢Ίύοέʔδ
&4Y 8FC1BDL 4$44
443 QSFSFOEFS 5ZQF4DSJQU
3FBDU "OHVMBS 7VFKT
-B[Z-PBE
$BQBDJUPS
$PSEPWB
"QQ
.BOJGFTU
'MBU
%FTJHO
.BUFSJBM
%FTJHO
Slide 63
Slide 63 text
ϑϩϯτΤϯυΛ͡ΊΔ͓͢͢Ίύοέʔδ
&4Y 8FC1BDL 4$44
443 QSFSFOEFS
3FBDU "OHVMBS 7VFKT
-B[Z-PBE
$BQBDJUPS
$PSEPWB
"QQ
.BOJGFTU
'MBU
%FTJHO
.BUFSJBM
%FTJHO
5ZQF4DSJQU
Slide 64
Slide 64 text
ϑϩϯτΤϯυΛ͡ΊΔ͓͢͢Ίύοέʔδ
$-* %FTJHO 4VQQPSU
18"$PSEPWB$BQBDJUPSϑϧαϙʔτͷ
+BWB4DSJQU6*'SBNFXPSLʢશ෦ࡌͤʣ
Slide 65
Slide 65 text
*POJDϓϩμΫτ
Slide 66
Slide 66 text
*POJDϓϩμΫτ
Slide 67
Slide 67 text
*POJDϓϩμΫτ
Slide 68
Slide 68 text
*POJDϓϩμΫτ
Slide 69
Slide 69 text
ॻ੶ʮ*POJDͰ࡞ΔϞόΠϧΞϓϦ੍࡞ೖʯ
IUUQTBN[OUP[I$QQ[
Slide 70
Slide 70 text
8FCσβΠφʔ͕ͰεϚϗΞϓϦΛެ։
Slide 71
Slide 71 text
͡Ό͋ɺ8PSE1SFTTͲ͏ͳͷ͞ʢʣ
Slide 72
Slide 72 text
͡Ό͋ɺ8PSE1SFTTͲ͏ͳͷ͞ʢʣ
Slide 73
Slide 73 text
όοΫΤϯυݴޠͰ
ϑϩϯτΤϯυΛॻ͘ͷΊΑ͏ɻ
݁
Slide 74
Slide 74 text
No content