![3 / 22
3. 襦 讌 覦覯 覦 谿
豐覦 谿 襾殊 瑚骸 蠍磯レ 螳牛蟆 蟲蠍 Prototype 螻, 螻殊
蠍磯リ骸, 企 蠍磯レ 螳 企朱 殊給. 豕譬 Prototype
焔 危, 覲瑚鴬 覿願鍵 Front-end Back-end 給.
Front-end 蟆曙 Back-end 讀, Controller る JSON 覦, http Request襯 螻殊朱
覦 蠍 伎螻 覦 讌譴給. Back-end 蟆曙 蠍磯蓋 DB
語 蠍磯(曙, , ) 蠍磯レ 襾殊 蟲螻 危, 蠍磯, 襦蠏語 蠍磯, 蟯
襴 蠍磯レ ｌ螻 Progressive Web App 蟲 給.
[Heroku PaaS 蠍磯 る]
襦碁 Node.js Express MySQL 蟆曙 襾殊 襦貉 蟲 れ, 襦
貉 朱 讌襯 豌危螻 覯 Heroku 覦壱 螻殊朱 企伎
給. Heroku 蟆曙 PaaS 轟煙 一企 覯 蟯襴蠍磯(dynos れ, 襦蠏 覿, DB蟯襴, 讌覲
覈) 螳讌螻 蠍 覓語 覦壱 蟯襴螻殊 螳ｸ蠍 覓語.
豐蠍一 覯 Hosting 覦 Database PaaS 企殊磯 觜る 蟲蠍 Firebase襯
り 朱, 螻 Cloud Firestore Database螳 讌 beta覯伎蠍一 蟯
document螳 覿譟燕 蠍 るり 給. 磯殊 豺覃伎 ろ 蟯螻
一危 覯伎れ MySQL 伎蠍磯 螻 企 MySQL Database 蟆曙 ClearDB add-on
牛 讌 Heroku 觜るゼ 伎蟆 給.](https://image.slidesharecdn.com/paralleldiary-181229075111/85/Parallel-diary-3-320.jpg)
![4 / 22
4. 襦 り
手鍵 Node.js Express MySQL 伎 MVC 蟲譟磯 り給. DB 企麹
Model 蟆曙一 MySQL 螻, 企殊伎誤 伎 企麹 View 蟆曙一 EJS
襴 讌 朱 覿 Materialize 殊企襴 JQuery襯 給. 危語
覯 豸 蠍磯レ 企麹 Controller 蟆曙一 螳 Router 企麹 伎 蠍磯レ 讌
燕給. 螳螳 磯Μ 覲企 れ螻 螳給.
[ Model ] [ View ] [ Controller ]](https://image.slidesharecdn.com/paralleldiary-181229075111/85/Parallel-diary-4-320.jpg)
![19 / 22
7. り 螳
7-1. 焔
[Lighthouse Report]
Lighthouse 讌 螳 襦 report伎朱 ろ 蟲.
手鍵襯 Lighthouse襯 牛 焔(Performance), 襦蠏碁觚 (Progressive Web App),
覿覿 蟆 覲伎給.
襾殊 焔ル伎 豌 襴 螳 覓語螳 給. 讌襷 企 覓語 螳 語,
手鍵 覯 覦 一危磯伎る Heroku 觜るゼ 伎螻 覿覩語 豺
螻 Heroku 覓企 覯 轟煙 襯 覲伎 覦 給. 企 覓語
襭 觜るゼ 伎る 螳 蟆企 .
PWA 蟲ロ 襯 覲伎給. 覓語螳 譟伎 PWA 轟煙 HTTPS襦
蠏殊 襷 PWA れ 蠍磯レ 蠍一 HTTP襦 蠏狩 HTTPS襦 redirect
貅譴 煙 給. 讌襷 企 蠍磯レ 螻牛蠍 伎 CloudFlare 螳
HTTPS CDN 伎 企 觜るれ 襭願鍵 伎蠍 企旧給.
れ襦 企 手鍵襯 一広蟆 る 企 襭 觜るゼ 伎朱 願屋
蟆.](https://image.slidesharecdn.com/paralleldiary-181229075111/85/Parallel-diary-19-320.jpg)
![PWA - overview [written in KOREAN]](https://cdn.slidesharecdn.com/ss_thumbnails/pwa-170721082628-thumbnail.jpg?width=560&fit=bounds)
![[124] ＝求梶求 ≡ ≡＝ 求戟＝](https://cdn.slidesharecdn.com/ss_thumbnails/124-161023163714-thumbnail.jpg?width=560&fit=bounds)
![[蠖/110903] 覃語朱り 4](https://cdn.slidesharecdn.com/ss_thumbnails/110903-110903003107-phpapp02-thumbnail.jpg?width=560&fit=bounds)
More Related Content
Similar to Parallel diary (20)
Parallel diary
- 1. 1 / 22 手鍵 蟆郁骸覲願 螻蠍 麹襦蠏碁覦 14109388 讌 覦 14109362 谿 14109367 譬 讌
- 2. 2 / 22 1. 焔 覯 磯曙 e-mail 讌覦 貉危郁概螻 3 14109388 01034069654 eurobin1234@gmail.com 伎綾 貉危郁概螻 3 14109362 01029821831 ckdwomn@live.com レ讌 貉危郁概螻 3 14109367 01055287018 triplejjj03@gmail.com 2. 襦 螳 覦 覈 一碁れ 蟯 覿覿 襴貅伎れ 襦 螳 覃 覦 覩碁 螻旧 蠍 ル 讌 訖 蠏 伎 蠍磯レ 螻牛讌 給. 蟆り 覃 覦 覩碁 螻旧 豺伎拘 ′企 殊瑚骸 螳 企 豌 螳ロ 譬 觜るれ 襷給. 覲 襦語 '手鍵(Parallel Diary)'朱 襦蠏碁觚 襴貅伎(Progressive Web Application) 襷り . 煙 蠏語 ｸ 覃螳 . 襭襯 襷 覓企Μ覃伎 る 襭螳 企讌, 企 殊 讌襯 蠍磯 襦 殊 覃伎 螻 '手鍵' 襴貅伎. 手鍵 襦 譯 襷讌 覈詩 リ碓襴 貉ろ 譯殊 蟆. 覲危 リ碓襴 貉ろ 覃 襦襷 ｸ朱 螳 伎手鍵襯 り, 蟆郁記 覦蠍磯 螻 覿譟燕 覲企 曙 伎 覯襴 蟆曙郁 襷給. 磯殊 覲 襦碁 手鍵襯 牛 語ろ危語 螳 覃螳 襷豺 ｸ 讌豌, Slow-food 螳 觜るゼ 螻牛 蟆 豕譬 覈. 手鍵 一語蟆 螻旧螻, 伎手鍵襯 螻旧, 襦 襷 伎 螳 蟆 譴 蟆.
- 3. 3 / 22 3. 襦 讌 覦覯 覦 谿 豐覦 谿 襾殊 瑚骸 蠍磯レ 螳牛蟆 蟲蠍 Prototype 螻, 螻殊 蠍磯リ骸, 企 蠍磯レ 螳 企朱 殊給. 豕譬 Prototype 焔 危, 覲瑚鴬 覿願鍵 Front-end Back-end 給. Front-end 蟆曙 Back-end 讀, Controller る JSON 覦, http Request襯 螻殊朱 覦 蠍 伎螻 覦 讌譴給. Back-end 蟆曙 蠍磯蓋 DB 語 蠍磯(曙, , ) 蠍磯レ 襾殊 蟲螻 危, 蠍磯, 襦蠏語 蠍磯, 蟯 襴 蠍磯レ ｌ螻 Progressive Web App 蟲 給. [Heroku PaaS 蠍磯 る] 襦碁 Node.js Express MySQL 蟆曙 襾殊 襦貉 蟲 れ, 襦 貉 朱 讌襯 豌危螻 覯 Heroku 覦壱 螻殊朱 企伎 給. Heroku 蟆曙 PaaS 轟煙 一企 覯 蟯襴蠍磯(dynos れ, 襦蠏 覿, DB蟯襴, 讌覲 覈) 螳讌螻 蠍 覓語 覦壱 蟯襴螻殊 螳ｸ蠍 覓語. 豐蠍一 覯 Hosting 覦 Database PaaS 企殊磯 觜る 蟲蠍 Firebase襯 り 朱, 螻 Cloud Firestore Database螳 讌 beta覯伎蠍一 蟯 document螳 覿譟燕 蠍 るり 給. 磯殊 豺覃伎 ろ 蟯螻 一危 覯伎れ MySQL 伎蠍磯 螻 企 MySQL Database 蟆曙 ClearDB add-on 牛 讌 Heroku 觜るゼ 伎蟆 給.
- 4. 4 / 22 4. 襦 り 手鍵 Node.js Express MySQL 伎 MVC 蟲譟磯 り給. DB 企麹 Model 蟆曙一 MySQL 螻, 企殊伎誤 伎 企麹 View 蟆曙一 EJS 襴 讌 朱 覿 Materialize 殊企襴 JQuery襯 給. 危語 覯 豸 蠍磯レ 企麹 Controller 蟆曙一 螳 Router 企麹 伎 蠍磯レ 讌 燕給. 螳螳 磯Μ 覲企 れ螻 螳給. [ Model ] [ View ] [ Controller ]
- 5. 5 / 22 4-1. DB 蟲譟 USER TABLE USER_PID : PRIMARY_KEY 螳 襯 覲蠍 . NICKNAME : 螳 れ / ID 朱 . PASSWORD : れ / 覲伎 SHA-256 朱 語. E_MAIL : 企 / 襦蠏語語, 覲朱 . MATCH : 襦 貉ろ襦 焔 PID 螳 ル. IS_COUPLE : 貉ろ語 覿襯 ロ 一語 蟆曙一 null / 貉ろ 豌 覦 蟆曙一 0 貉ろ 蟆曙一 1 / 貉ろ 豌 覲企 蟆曙一 2 OP1 : 觜覦覯 谿剰鍵襯 讌覓誤 1 / 覲伎 SHA-256 朱 語. OP2 : 觜覦覯 谿剰鍵襯 讌覓誤 2 / 覲伎 SHA-256 朱 語. OP3 : 觜覦覯 谿剰鍵襯 讌覓誤 3 / 覲伎 SHA-256 朱 語. ANSWER1 : 觜覦覯 谿剰鍵 讌覓 給 1 / 覲伎 SHA-256 朱 語. ANSWER2 : 觜覦覯 谿剰鍵 讌覓 給 2 / 覲伎 SHA-256 朱 語 ANSWER3 : 觜覦覯 谿剰鍵 讌覓 給 3 / 覲伎 SHA-256 朱 語 TOKEN : FCM 覲 DIARY TABLE DIARY_PID : PRIMARY_KEY 螳 手鍵襯 覲蠍 DATE : 手鍵襯 燕 讌. / YYYYMMDD 朱 ル. USER_PID : FOREIGN KEY 手鍵襯 燕 USER_PID 螳. TEXT : 手鍵 伎. / HTML 貊螳 れ願. IMG_URL : 手鍵 企語 企語 url ル. TIME : 手鍵襯 燕 螳 ル. / JS Date() 螳豌 螳 IS_DELETED : 手鍵襯 覿襯 ロ DB 蟲譟磯 れ螻 螳給. 手鍵襯 燕 給. 磯殊 USER TABLE 螻 DIARY TABLE 蟯螻襯 螳讌螻, DIARY TABLE USER_PID螳 USER TABLE USER_PID Foreign Key襯 襷崎 給. れ 覲伎 企 譴 螳語覲願 覲, 襯 れ 觜覦覯, 讌覓 , 讌覓 れ , 覲 煙 覿 SHA-256朱 誤. れ, 手鍵 伎(TEXT) 蟆 一 蠍豌襴 伎 覲危碁ゼ 伎 BASE64襦 語 給.
- 6. 6 / 22 4-2. 蠍磯ル 4-3. 螳螳 覈 螳螳 蠍磯レ 覈 れ螻 螳給. 1. mysql 覈 2. express 蠍磯蓋 螻 覈 : ejs, body-parser, 3. 蟲螳 れ 覈 : moment, moment-timezone 4. Firebase 覈 : firebase, firebase-functions, firebase-admin 5. 誤/語 覈 : sha-256, base64, utf-8 6. 企語 襦 覈 : multer 7. 豢 覈 : path
- 7. 7 / 22 4-4. Progressive Web App 覲 手鍵 朱 Web App Progressive Web App(危 PWA)朱 蟲給 . 朱 Web App PWA螳 蠍 伎 譟郁唄 襷譟燕伎 讌襷 蠏 譟郁唄 譴 蟆 Native App / Push Alarm / Offline 瑚讌. 企 瑚讌 譟郁唄 襷譟燕蠍 れ螻 螳 り給. 1. Native App 襾殊 PWA螳 蠍 伎 Native App豌 れ螳 螳ロ伎 . 企ゼ れ螻 螳 Web App Manifest襯 蟲燕給. 危 企 manifest襯 螳 伎 link貅郁, 螳 伎豌伎覲襦 Native Application 蟆曙 螻牛蠍 伎 覦 襷 れ れ螻 螳 り給.
- 8. 8 / 22 2. Push Alarm 覯讌碁 PWA螳 蠍 伎 れ 谿語煙 Push Alarm 讌伎 る . 企ゼ 覲 手鍵 Firebase Cloud Messaging(危 FCM)觜るゼ 伎 れ螻 螳 り給. 襾殊 FCM 伎蠍 伎 蠍郁鍵 語 螳 . 螳 襦蠏語語 螻 Push Alarm , 企殊伎誤碁 Firebase messaging 襯 伎 FCM 覯襦覿 焔 蠍郁鍵 螳 覦 ajax 牛 覯 襦 蟆 DB レ . Push Alarm ′ 覯 企伎. 螳螻 覃讌 覈, 覲碁, 襴 企, 襴 伎, 蠏碁Μ螻 襴殊 企Ν 覲伎 ′, 譴襯 れ payload覲 伎 fcm襯 伎 ′. Push Alarm 螳讌襦 . 豌 覯讌碁 手鍵 襴貅伎 螻 蟆曙一 Foreground 蟆曙, 覯讌碁 襴貅伎 螻 讌 Background 蟆曙 螳螳 企至 伎 讌 れ伎 . 覲危旧 螳讌 蟆曙磯ゼ 蟲覿 覿襯 蟲讌襷 企 襦語 foreground background 覈 Service Worker襯 伎 蟲給. Push 企欧瑚 覦 蟆曙一 企 磯 襯 firebase-messaging-sw.js襯 牛 Service Worker襯 蟲 手鍵襯 豌 企 觜 貉り れ襦 り給.
- 9. 9 / 22 3. Offline 覯讌碁 PWA螳 蠍 伎 ろ語 襴曙伎 る . ろ殊 企 覿 ろ語 郁屋 企 襴貅伎 螳ロ伎 . れ襦 れ 螳ロ Native App る慨覃 ろ殊 ろ殊 朱 覲企ゼ 企 襴貅伎 襷 UI襦 れ. 磯殊 企 蠍磯レ 蟲蠍 れ螻 螳 Service Worker襯 り給. 襾殊 pwabuilder-sw-register.js襯 牛 navigator Service Worker螳 れ 讌 誤. れ 朱 れ る 襦蠏碁ゼ 貊 蠍郁, れ 讌 覃 pwabuilder-sw.js襯 Service Worker れ. pwabuilder-sw.js れ螻 螳 蠍磯レ 企麹襦 り給. 朱 企 Service Worker螳 れ 覩碁Μ 蟲 ろ殊語 伎襯 貂 れ °. 襷 豺 ろ 蟆曙(Error) ろ殊 襦 螳譯狩螻 伎 貂 れ企 ろ 殊 伎襯 譴. 襦 れ螳 る 燕 り 襷 伎螳 fire Service Worker蟆 ろ殊 伎襯 一危誤襦 豌.
- 10. 10 / 22 5. 襦 讌 伎 譯殊姶 碁 螻 1譯殊姶 蠍磯蓋 蟲譟 覦 り (Prototype) 2譯殊姶 Front-end + Back-end り/蟲 3譯殊姶 4譯殊姶 誤 覦 襴襷 5譯殊姶 覯蟾 覦 覯 ろ, 企殊磯 覯 覦壱 襦 讌螻 蟯 螻 覯 蟯襴 覦, 覯蟾 覲 襦語 GitHub襯 螳覦 給. 1譯殊姶 蠍磯蓋蟲譟 覦 り 襾殊 襦 燕螻 り襯 給. 襦 蟆曙 Materialize CSS Library襯 覦 伎 螳牛蟆 れ給. 蠏碁Μ 螻 危語 DB table 蟲譟磯ゼ 螻, 螳覦 覦螻 貊 蠏豺 給. 2~3譯殊姶 蟆曙一 1譯 谿 り 襦 蠍磯朱, 企殊伎誤 豸′ 伎 Front- end 螻 覯 豸 Back-end 螳 讌給. 螻殊 GitHub襯 牛 螳覦 襭伎朱, 覿覿 襦 螻 襭 襦 れ蟆 襴螻 螳覦 覿覿 貉る(Commit) 覦朱 讌給. 企 覿覿 誤 讌 GitHub Commit 襦蠏語 蠍磯 給. 4譯 谿 危 覯 覦壱蠍 朱 覯 誤 蟇一海給 . 螻殊 覦 る襯 豕 覯蟾(Debugging) 蟇一海螻 貊 襯 譴願鍵 Hard-coding 覿覿 襴襷(Refactoring) 給.
- 11. 11 / 22 5譯 谿 覯蟾 覈, 覯 ろ 覈朱 蟲燕, 讌譴 覯蟾 蟇一海螻 危 覯, Heroku 覦壱 給. 蠏 蠍一 譯殊 蠍磯ルり骸 Progressive Web App 蠍磯ルれ 覯 蟆曙 襦 讌, 襯 伎豌伎 覦 蟆曙 覦襯願 讌, 蠏碁Μ螻 豸°伎 CSS螳 蟾讌 覿覿 讌 煙 企朱 ろ 給. 蠏碁Μ螻 企 企 ろ 襭 危 譯朱 豺蟲 讌碁り 覯 ろ 覦 朱覦煙 豌給. 企 覯蠏 襴 覦 朱覦 覦 蟆螻 覿覿れ 豈 蟲朱 手鍵 焔襯 給. 企 襦蠏碁れ 誤 GitHub wiki 1谿, 2谿 襦蠏 伎 誤 給. 6. 襦 蟆郁骸 6-1. 覃 蠍磯 6-1-1. 覃 伎 覃 伎 手鍵 螳 蠍 覲 螻 nav覦襯 牛 るジ 讌襦 企 給. 覦 語 豈蠍一 覈覦 覃伎 覦 覯蟇 覃願 焔螻, 企覦襯 牛 るジ 伎襦 企 給.
- 12. 12 / 22 6-1-2. 襦蠏語 伎 襦蠏語 伎 襦蠏語 弬骸, 螳, 觜覦覯 れ 伎 襷螳 給. 6-1-2. 螳 伎 螳 蟆曙一 れ螻 觜覦覯, 蠏碁Μ螻 企殊 讌. 觜覦覯 谿剰鍵 讌覓語 ロ 觜覦覯碁ゼ 企襴蟇磯 れ 覲語語語朱 . 螳 讌 觜覦覯 谿剰鍵 讌覓語 螻給螻 給 螻給 豈 覲旧°襯 襴 覦レ朱 り給.
- 13. 13 / 22 ロ 觜覦覯碁ゼ 企語 觜覦覯碁ゼ 谿剰鍵 覦 覲伎企襦, 覿 豌危襦 蟲給. 豌危讌 螳 企伎讌 給. 6-1-3. 觜覦覯 れ 伎 蠍磯蓋覲伎 觜覦覯 谿剰鍵 讌覓語 牛 觜覦覯碁ゼ れ 伎. 覈 覲願 殊伎 觜覦覯碁ゼ 給. 企 伎 襦蠏語語 讌 , 讀 觜覦覯碁ゼ 企瑚碓 襦蠏語 觜覦覯碁ゼ 覲蟆渚 貅伎れ 伎.
- 14. 14 / 22 6-1-4. 手鍵 伎 螳螳 手鍵 伎 覈覦 蠍一 讓, 一ろ 蠍一 殊曙 手鍵螳 覲伎企, 覦ｸ 覦 手鍵螳 覲伎. 豌 覲伎企 手鍵 殊 蠍一 朱 讌襷 燕 伎螳 . 手鍵 る 手鍵襯 燕 給. 企語 豌覿 螳ロ. 伎 るジ讓 覿覿 る 覯殊 企 覯殊 企Ν覃 れ螻 螳 ｼ豎讌 Floating Action Button. 豌 ル れ螻 螳 螻手碓 燕 手鍵襦 企 給. 蠏碁Μ螻 蠏 れ 襦螻豺, 蠏 覦 伎 豕朱 ろ襦る ｸ蠍磯レ 給.
- 15. 15 / 22 6-1-5. 螻 伎 螻 伎 觜覦覯 一危, 貉ろ豌(貉ろ 焔 ), 企豌(貉ろ 焔 ) 給. れ螻 企, 蠏碁Μ螻 貉ろ 豌襯 覯瑚 給.
- 16. 16 / 22 れ 貉ろ 豌 覲企願 覃 譴螳 殊 れ螻 螳 覲蟆暑. 豌 覲企 覦 貉ろ豌 覦 蟾讌 蠍磯るΜ蟇磯 豬 螻 豌 覦 渚蟇磯 蟇一 給. 企豌 豌 螻 螳 豐 5覯 蟆所 谿曙 . 企 豌蠍 れ 覯 讌朱 螳 覲 襦 蠍 覦磯る 給. 企豌 企伎覃 覲語語 手鍵 企 貉ろ 燕 手鍵, 蠏碁Μ螻 覈 企語 殊 覦蟆 給慨 讀 螻 覲語語 螻 蠍磯.
- 17. 17 / 22 6-2. Progressive Web App 6-2-1. Native App 螳 Web App Manifest襯 蟲燕 手鍵 襷豺 Native App豌 れ 螳 蟆 誤 給. れ襦 蟲 , 蠍一ヾ Web App 殊所骸 螳 誤磯 觚殊一 伎 襷豺 襴貅伎豌 蟆 覦, PWA るジ讓所骸 螳 れ 襴貅伎豌 蟆 誤 給. 企 Native App 蠍磯レ PC 伎豌伎襦 Windows OS, 覈覦 伎豌伎襦 Android, iOS 蟆曙一 11.3伎 覯覿 給. Mac OS iOS 11.3 覩 襷 覯 れ 螳ロ讌襷 Native App豌 讌 給.
- 18. 18 / 22 6-2-2. Push Alarm Firebase Cloud Messaging 觜るゼ 伎 Service Worker襯 牛 Push Alarm 蟲 手鍵 螳 PC 覈覦殊 Push Alarm 給. 手鍵 螻牛 Push Alarm るジ 蟲郁襦覿 貉ろ 豌 覦 , 豌 渚 , 豌 蟇一 , 蠏碁Μ螻 貉ろ 襦 蠍 焔 Push Alarm 覦°. 企 Push Alarm 蠍磯レ PC 伎豌伎襦 Windows OS, 覈覦 伎豌伎襦 Android 給. Mac OS iOS 讌蟾讌 PWA蠍磯レ朱 Push Alarm 讌 讌 蠍 覓語 給. 6-2-3. Offline Service Worker襯 牛 ろ殊語 伎襯 貂 れ 手鍵 螳 ろ殊 企 伎襯 譯朱 蟆 誤 給. 企ゼ 豸 Native App螻 螳 蟆曙 れ蟆 螻牛 譴 給. 企 Native App 蠍磯レ PC 伎豌伎襦 Windows OS Safari 11.1 伎 覯 豺 Mac OS, 覈覦 伎豌伎襦 Android, iOS 蟆曙一 11.3伎 覯覿 給. Safari 11.1 覩碁 Mac OS iOS 11.3 覩碁 覯 企 蠍磯レ 旧 蠍一 Service Worker襯 讌讌 蠍 覓語 給.
- 19. 19 / 22 7. り 螳 7-1. 焔 [Lighthouse Report] Lighthouse 讌 螳 襦 report伎朱 ろ 蟲. 手鍵襯 Lighthouse襯 牛 焔(Performance), 襦蠏碁觚 (Progressive Web App), 覿覿 蟆 覲伎給. 襾殊 焔ル伎 豌 襴 螳 覓語螳 給. 讌襷 企 覓語 螳 語, 手鍵 覯 覦 一危磯伎る Heroku 觜るゼ 伎螻 覿覩語 豺 螻 Heroku 覓企 覯 轟煙 襯 覲伎 覦 給. 企 覓語 襭 觜るゼ 伎る 螳 蟆企 . PWA 蟲ロ 襯 覲伎給. 覓語螳 譟伎 PWA 轟煙 HTTPS襦 蠏殊 襷 PWA れ 蠍磯レ 蠍一 HTTP襦 蠏狩 HTTPS襦 redirect 貅譴 煙 給. 讌襷 企 蠍磯レ 螻牛蠍 伎 CloudFlare 螳 HTTPS CDN 伎 企 觜るれ 襭願鍵 伎蠍 企旧給. れ襦 企 手鍵襯 一広蟆 る 企 襭 觜るゼ 伎朱 願屋 蟆.
- 20. 20 / 22 7-2. 襾殊 覲伎 蟆曙一 覈 貊 base64襦 誤 朱, 覩手 螳語覲伎 蟆曙 煙 蟆讀 sha256 誤 螻襴讀 牛 企伎螻 給. 企 讌螳 豬讌 襦 覈 企語 企 sha256朱 誤給. 覯 覯蟾 螻殊 蟇一 蟆郁骸 覯螳 旧Ц襦 れ企 煙 螳 . 企 覯 ろ 襦蠏碁 GitHub wiki 焔 給. https://github.com/eurobin4321/parallel_diary/wiki 7-3. 蟲蠍郁 蟲 蠍郁 豐 5譯 企伎朱, 讌ъ 螳覦蠍郁 蠍壱 襦 れ 蠍磯レ ｋ 螻殊 企れ 襷給. 麹 襷 れ 襯 覃伎 螳覦 讌豌企 給. 讌襷 企 螻殊 覈 蠏豪概企企伎 覈 旧 蠍磯リ骸, 豐蠍 蠍壱 覈 覿 蟆郁骸襯 豕譬朱 襷れ企 給. 7-4. 蠍磯レ 蠍磯レ 螳覈 れ螻 螳給. 一危 蠍磯 企朱Μ (ILF) : 2螳(, れ伎企Μ伎) 碁郁(EIF) : 1螳(Firebase) 碁 碁(EI) : 螳, (企豌), , 手鍵, 手鍵, 手鍵, 貉ろ豌 碁豢(EO) : 0 碁譟壱(EQ) : 覲 譟壱, 襦蠏語, 手鍵伎 襴ろ, 貉ろ譟壱
- 21. 21 / 22 豐 64企 螳覦 螳 覲伎 螳覦 螳 れ螻 螳給. 8. 豢 襦 覦 覦 手鍵 豢ろ 蠍磯蓋 蠍磯リ骸 一企 , 蠏碁Μ螻 PWA襯 牛 蠏殊 螻 ｸ煙 覲伎ロ螻 給. 讌襷 れ 手鍵 伎 覈 螳讌 螳伎 譟伎. 一朱 語 螳. 麹 覃 伎螳 讌 手鍵襯 願碓 碁 れ 企れ企 麹 覿ろ. 蠏碁Μ螻 手鍵襯 螻殊 覯 ろ磯れ 轟 蠍磯レ企 覲願 企 讌 谿剰鍵 企れ 蟆曙郁 給. 磯殊 譬 讌蟯願 手鍵襯 覿螳 襦 覈覈 伎れ 螳 . 手鍵 蠍磯蓋 蠍磯レ 豢ろ. 讌襷 讌蠏麹 蠍磯蓋 蠍磯レ襷 豢ろ蠍一 覿螳 ｸ 蠍磯ルれ 襷 覿ろ. 覯 ろ磯れ 蟆朱 襦蠏語語 讌伎が朱 譬蟆, 手鍵 襴 讌 企Ν 覲 讌 覲 朱 譬蟆, 手鍵 伎 覈 一 螻 螳 企 れ 企 螳ロ 覯殊 朱 譬蟆 れ 朱覦煙 給. 企 れ 朱覦煙 覦 れ ｸ 覿螳蠍磯レ 螳 煙 給. PWA 伎 Offline 蠍磯レ 譬 覦 煙 給. ろ殊語 ろ殊 伎襯 譯朱 蠍磯ル 螻牛. 讌襷 譯手鍵朱 伎襯 貂 レ貅 ろ殊語 貂 覦煙 伎 蟆曙一 ろ殊 伎螳 企 伎襯 譯朱 覦朱 覦貅 ｸ煙 蟆. 手鍵 蟇企殊 讌蠍一 襷れ 覿讌 螳給. 蠍磯 れ 朱 覦煙 覦れ 覿螳蠍磯ルり骸 讌蟯企伎 語 螳朱 豢 企 襦碁ゼ 覦貅 螳 蟆.
- 22. 22 / 22 9. 譬 讌覦() 蠍一ヾ 企 覦企, Front-end Back-end襯 蟲 螻殊 襷 谿 り 給. Pure CSS JQuery襯 螻殊 一煙 覿覿 襷給. jQuery 豺 焔 覓語螳 襷 覦 蟆 螳給. 蠍一ヾ 蠍壱(CRUD 蟲) 炎概讌襷 襷 蟯襴 蠍磯リ骸, 語襴, 蠏碁Μ螻 覯 蟯襴 襷る伎殊 襷る 譬 蟆 螳り 螳. 伎綾 讌 Google I/O 2016 覦 PWA 蠍一 覲願 襷 ル碁 蠍一企手, 朱 蠍壱螳 る 襷 蟲 覲願 矩る 螳 襷壱 螳語 企 襦碁ゼ 牛 企 蠍一 襦 覈貅 覲 伎 譬給. 讌蟾讌 PWA 螳覦 譴 蠍一願鍵 螳覲企 蟯 襭れ 蟾蟆 螻れ願襦 襷 覿譟燕螻 企 蠍一 螻糾 蟲蠍 弰 誤螻 OS 蟆曙一 讌 覿覿 曙 れ ろ誤 螻殊 襷 企れ螻 谿り 讌襷 蟆郁記 PWA螳 讌 覿覿蟾讌 覓語襯 覿 願屋 給. 讌 襷 ろ殊 貂覿覿 伎 譴 蠍磯ル 蟲 螻 企 蠍一 覿覿蟾讌 蟲 覲伎 覈詩 蠍壱螳 る 危 企 覿覿 譬 覦貅覺れ朱 . 手鍵 豌伎 伎 豌伎 瑚骸 螻 伎襯 企麹 襷 企 覿覿 豕 ｸ煙 覈螻 朱 讌 覃 伎 語 れ 蠍 蠍一 襷 覿譟燕螻, 蠏 覿螳蠍磯ル 覿譟燕り 螳. 危 手鍵 伎 企 覿覿 覦 り 螳. レ讌 襴手骸 螳 觜るゼ 覦覯 企 螳 伎螳 朱 譬蟆給. 蠍磯 螳豢 覿覿 觜るれ 覃伎 螳 豌覿 螳 觜るゼ 所 襦 襴殊 螻牛 譴. 觜る 蟆 襯 伎 application program 螳 蟾 覈旧 覲伎企襦 る 螳 蟆 り 螳. 手鍵 螳 る 觜る 豢覿 螳ロ 蟆 螳給. 轟危碁 (application program) 螳蟾 觜るゼ 螻牛覩襦 豢覿 螳豺螳 給. 磯殊 蠍一ヾ レ 手鍵螻旧朱 谿覲 觜るゼ 牛 蟆曙レ 螳豢螻 り 螳. 螳讌 襦 蠍磯レ 豢螳 襯 讌襷 觜 蠍 殊 覓語 蠍壱 蠍磯ルれ 襷蠍一 襦語 螳覦蠍郁 讌ъ 給.