PWA Night vol.27 ～HitRate 活用事例～

https://pwanight.connpass.com/event/211250/

Transcript

1. 弓道部のためのWebアプリ 「HitRate」をPWA化した話 浅原 昌大(あさはら まさひろ) 
 

2. 目次 1.自己紹介 2.弓道ってどんなスポーツ？ 3.個人開発アプリ「HitRate」について 4.GatsbyでPWA化 5.なぜPWA化したのか？ 6.PWAとその他の技術との比較 7.PWAを導入した結果
3. 自己紹介
4. 大学院・研究室 徳島大学大学院　修士1年 ヒューマンセンシング研究室 脳波×機械学習 部活 弓道 4
 氏名 浅原昌大(あさはら まさひろ）22歳 自己紹介
5. 株式会社 Thinkings 雑誌に載りました 採用管理システム|SONAR ATS
6. SONAR ATS
7. 弓道って どんなスポーツ？
8. 弓道ってどんなスポーツ？ 8
 
 的まで距離が28mある 
 とにかく的にあたればいい 
 的中率に波がある 28m
9. 実際の写真 9

10. HitRate〜概要〜 
 
 概要：部員の的中率や出欠などを管理できる 開発・運用期間：1年7ヶ月 導入大学：徳島大学、香川大学、高知大学 ユーザー数:82人 LPサイト：https://hitrate.site/ 
 10
 部員記録 連絡 出欠 弓道部専用アプリ|HitRate
11. 個人開発アプリ 「HitRate」について
12. 作った理由 • 集計ミスが起きていた • 的中率のソートができない • 試合前は、記録を再計算しなければいけない 全員分の記録を エクセルに記入 エクセルによる部員の的中率の集計 
 的中ノート しんどっ • 部員一人一人、自己分析をしてほしかった 
 • 自主練習をする人を増やしたかった 部員の弓道レベルの向上 1,問題点 2,願望
13. アプリの仕組み
14. Gatsbyを使っている理由 静的サイトジェネレーター
 →よくLPやブログに使用される
 
 特徴
 • ビルド時に表示したい画像やデータをまとめ て静的HTMLを生成する
 
 • Reactアプリとして実行する
 
 • サーバーレスで爆速なサイトが誕生
 
 • OGP設定が簡単

15. ホスティングサービス VS Win
 lose

16. GatsbyでPWA化
17. PWA化する方法 SSL化(httpsでアクセスできる状態にしておく) Webアプリマニフェストの生成 ServiceWorkerを有効にする
18. Webアプリマニフェストの生成 インストールコマンド：npm install gatsby-plugin-manifest 
 ＊Gatsbyのスターターでは、すでにgatsby-plugin-manifestプラグインが導入済み。 
 

19. gatsby-config.jsの設定
20. ServiceWorkerを有効にする インストールコマンド：npm install gatsby-plugin-offline 
 ＊Gatsbyのスターターでは、すでにgatsby-plugin-offlineプラグインが導入済みです。 
 

21. gatsby-config.jsの設定
22. 反映の確認方法
23. なぜ PWA化したのか？
24. PWA化した理由 徳島大学
 自分
 ネイティブに書き換えるのは、正直一人じゃむり スマホアプリのように全画面で使用したい！ Thinkingsのエンジニアさん
 PWAってのがあるよ
25. PWA化した主な目的 アドレスバーと ボトムバーの廃止!
26. PWAとその他 の技術との比較
27. １、ハイブリッドアプリ 青：ネイティブアプリの開発言語 ReacNativeなど 赤：webアプリの開発言語 HTML5,jsなど その他、WebViewが使われているアプリ クックパッド
28. 2、LINEミニアプリ
29. LINEミニアプリvs PWAvsハイブリッドアプリ
30. PWAを導入した結果
31. ユーザビリティーの向上 下からバナーが出てきて、簡単にインストールできました! 徳島大学の後輩 見やすいやい! 香川大学の友人
32. 少し困った点 アプリを開発した当初の自分 サイトをホーム画面に置く ように！ PWA後 PWA前 PWA化の前にホーム画面に置いているとPWAが反映されない!!

33. 最後に HitRateのLPサイト→ https://hitrate.site/ Qiita:https://qiita.com/citron1605 Twitter:@assa1605 雑誌に載りました