アマチュアプログラマがWebサービスを作ってみた /Amateur_Programer_Web_Service

非ITエンジニアがYoutubeを使用したタイピングゲーム生成サービスを作成しました。

Transcript

1. アマチュアプログラマがWebサービス を作ってみた 1 「Youtube Typing Game Generator」 Youtubeの動画URL入力でタイピングゲーム自動生成
2. 自己紹介  プロフィール  村瀬 正樹（むらせ まさき）  平成4年生まれ  愛知県出身  経歴  情報系大学卒業・大学院修了  地図データを使った研究を行った  システムはJava, Javascriptで実装  愛知県内の自動車部品メーカー就職  非IT系業務、入社3年目 2
3. 目次 1. Webサービス作成背景 2. 基本機能紹介 3. 使用技術 4. 機能詳細 5. 開発環境 3
4. 1. Webサービス作成背景 「Youtube Typing Game Generator」 Youtubeの動画URL入力でタイピングゲーム自動生成 4
5. タイピングゲーム  タイピングゲームとは  画面に表示されたテキストをキーボードで入力をするゲーム  タイピングゲームの目的  タイピング能力向上  タイピング速度の表示や間違えて入力したキーを表示  練習して早く打てるようになるとうれしい  娯楽  文字入力が楽しい  キーボードの打鍵音が心地良い  ランキング上位に入ると嬉しい 5
6. タイピングゲームの種類  シンプルなタイピング練習  シンプルにタイピングをする  ex. e-typing、美佳タイプ、タイプウェル  ゲーム感覚  ゲーム感覚で楽しい  ex.ゾンビ打、寿司打  音楽に合わせて  音楽に合わせて歌詞をタイピングできて楽しい  ex.歌謡タイピング劇場、火曜タイピング激情、 Typing Tube 6 インターネットでタイピング練習 e-typing (https://www.e-typing.ne.jp/member/) ゾンビ打 THE TYPING OF THE DEAD (https://ameblo.jp/tetchiri/entry-10021182575.html) 歌謡タイピング劇場 (http://casual.hangame.co.jp/typing/)
7. 音楽に合わせたタイピングゲームの例  歌謡タイピング劇場（http://casual.hangame.co.jp/typing/）  運営が用意した音楽を使用してタイピングゲームができる  複数人で協力プレイもできる  火曜タイピング激情（http://mekas.web.fc2.com/ ダウンロード先はリンク切れ）  好きな音楽を使ってタイピングゲームを作ったり遊ぶことができる  ローカル環境のみで動作  Typing Tube（https://typing-tube.net/）  Youtubeの動画を使ってタイピングゲームを作ったり遊ぶことができる  Webベースでユーザーが作成した多くのデータがあり、それらで遊ぶ ことができる 7 欠点：自分の好きな音楽を使ってタイピングができない 欠点：自分で作成するのがめんどくさい 欠点：ユーザーが作ったものがなければ自分で作成する → めんどくさい
8. Webサービス作成の目的  目的  好きな音楽を使って簡単にタイピングゲームを作成したい  実現可能かどうか  音楽はYoutubeが使える  タイピングテキストもYoutubeの字幕を使えそう  Youtube動画のURLを入力して自動でタイピングゲームができ そう 8 Youtube Typing Game Generatorの作成
9. 2. 基本機能紹介 「Youtube Typing Game Generator」 Youtubeの動画URL入力でタイピングゲーム自動生成 9
10. 動画自動生成  動画URLを入力して生成ボタンを押すと自動でタイピン グゲームを生成する 10
11. 登録動画一覧  登録された動画一覧を見ることができる 11
12. タイピングゲーム  スタートボタンを押すと動画が再生され、タイピングす るテキストが表示される 12
13. テキスト編集  必要に応じでテキストを編集できる 13
14. ブックマーク機能  お気に入りの動画をブックマークしたり、 フィルターできる（ログイン時のみ） 14
15. アカウント機能  アカウントを作成し、ログインするとお気に入り動画を 登録できる 15
16. 2. 使用技術 「Youtube Typing Game Generator」 Youtubeの動画URL入力でタイピングゲーム自動生成 16
17. プログラミング言語  使ったことがある言語  C, Java, PHP, Ruby, Python, Javascript, Node.js  フロントエンドはJavascript  型付きのTypescriptも気になったが・・・  サーバサイドはPHP  文法がC, Javaライクで馴染みがある  LAMPのPでありWebで広く使われていて、簡単に始められる 17
18. PHPフレームワーク  PHPフレームワーク  Laravel, Symfony, CakePHP, CodeIgniter, FuelPHP, Zend Framework, Slim Framework,…  最近のトレンドはLaravelらしいが、 フルスタックフレームワークなので初心者には難しい・・・  Slim Frameworkはシンプルなフレームワークなので 扱いやすそう  Slim Framework  a micro framework for PHP  ルーティング  ミドルウェア  DI  PSR-7（HTTP Request, Response）  Webサービスを作成するのに必要最低限の機能はある 18 PHPのWAF 多すぎ問題 採用
19. Javascriptフレームワーク  Javascriptフレームワーク、ライブラリ  jQuery・・・広く使われており実績はあるが、 最近はどうなんでしょうか？  Vue.js・・・最近流行っている、学習コスト低め  React, AngularJS・・・敷居が高そう  Vue.js  単一コンポーネントで部品化できる  双方向バインディングがいい感じ  VueCLIを使えばコマンド1つでトランスパイル、ビルド可能 19 採用
20. 開発環境  IDE、テキストエディタ  秀丸エディタ・・・テキストエディタでは辛い  VScode・・・無料ではあるがIDE並に高機能 拡張機能を自分で入れたり設定がめんどう  PhpStorm・・・有料だが、一通りの機能が揃っている コード補完やジャンプ機能が優秀  開発環境インフラ  Vagrant・・・仮想マシンをコマンドで作成できる 簡単に使える  Docker・・・少し前から流行っているが、 学習コストを考えて今回はやめる 20 採用 採用
21. その他使用ツール  バージョン管理システム関係  Git, GitHub, SourceTree 21
22. Webサービス構成要素  OS  オープンソースで有名所はUbuntuとCentOS  今回はUbuntuを採用  Database  馴染みのあるPostgreSQLを採用  Web Server, AP Server  馴染みのあるApache(mod_php)を採用  インフラ  自由度が高いIaaS型クラウドのAWSを採用 22
23. 4. 機能詳細 「Youtube Typing Game Generator」 Youtubeの動画URL入力でタイピングゲーム自動生成 23
24. おおまかな処理の流れ 1. クライアント(Webブラウザ)からRequest受け取る 2. ルーティング処理をし、Controllerに渡す 3. 必要に応じてModel でDB処理や外部API通信、 ロジック処理をし、結果をControllerに返す 4. Controllerは必要なデータをViewに渡す 5. Controllerから受け取ったデータとテンプレートを紐づけて クライアントに返す 25 ① ② ③ ④ ⑤
25. データベース構造  accountテーブル  アカウントデータ  typing_gameテーブル  タイピングゲームに 必要なデータ  type_textは１つ動画の タイピングテキストと表示の タイミング時間をあわせた データ(json型)  bookmarkテーブル  ブックマークに必要な データ 26
26. 動画自動生成  Slim（サーバサイド）実装 1. URLをバリデーションチェック  動画がYoutubeのURLか  すでに登録されていないか  字幕データがあるのか 2. 字幕取得サイトで字幕データ取得（Webスクレイピング） 3. 字幕テキストからタイピング用にひらがなに変換（外部APIを利用）  不要な記号はここで削除 4. DB保存（タイピングに必要なデータはjson形式で保存）  表示テキスト、入力文字（ひらがな or 英数字）、 テキスト表示の開始・終了のタイミング 28
27. 登録動画一覧  フロントはTwigテンプレートで実装  動的な処理はないのでJavascript使用せず  表示するデータの条件にリクエストパラメータを使用  例 : /typingGame/list?page=3& isFilterBookmark=true  3ページ目＆ブックマーク済みの動画を表示  DBからリクエストパラメータに基づいて必要な情報を取得して Viewに渡す（サーバサイド実装） 29
28. タイピングゲーム  Vue.js実装  主なクライアント処理  再生時間に応じたテキストの表示  ひらがな -> ローマ字候補変換  キー入力判定  入力文字画面表示（ローマ字・ひらがな） 30
29. テキスト編集  Vue.js実装  テキストフィールドを編集すると内部の変数も変化する （双方向データバインディング）  保存ボタンを押すと現在の状態をjsonに変換してサーバーへ送る →DBに保存される 31
30. ブックマーク機能  Vue.js実装  ブックマークアイコンをクリックをするとajaxで ブックマーク情報がDBに登録・削除される 32
31. アカウント機能  Slim（サーバサイド）実装  登録  入力文字列のバリデーションチェック  slim-validationをMiddlewareとして登録  アカウント情報をDB保存  パスワードは暗号化して保存  認証  DBにあるデータと一致するか  一致すれば認証情報をセッションに登録  CookieにセッションIDを記録してログイン状態を保持する 33
32. セキュリティー対策  XSS対策  出力にエスケープ処理が必要  →テンプレートエンジンにTwigを使用  CSRF対策  ワンタイムトークンを使用してリクエスト元が正しいか確認  → slim-csrfを使用  SQLインジェクション対策  SQLにエスケープ処理が必要  → PDOのプリペアードメソッドを使用  その他  GitHubにAPI keyやPasswordを入れないようにセンシティブな データは環境変数に格納 34
33. 5. 開発環境 「Youtube Typing Game Generator」 Youtubeの動画URL入力でタイピングゲーム自動生成 35
34. 開発の流れ  コーディング・デバッグ  開発用サーバはVagrant上の仮想マシン  コーディングはホスト側のPhpStorm  ホスト側のブラウザで動作確認  テストコード作成、動作確認  PHPUnit, Selenium  Commit, Push  その日の終わりor区切りのいいところでCommitする  MasterブランチにPushすると、GitHubのWebhookで本番環境のサーバ内の スクリプトを実行し、GitHubからPullする。 37
35. バージョン管理システム運用  使用するブランチ  Masterブランチ：本番環境用  Developブランチ：開発環境用  Topic#??ブランチ：機能追加用  運用方法 1. GitHubでISSUE#??を発行 2. Topic#??ブランチ作成してISSUEに対するコードを書く 3. 終わったらDevelopブランチにPull Request  問題なければDevelopブランチにマージする 4. MasterブランチにDevelopブランチをマージする  GitHubにPush→自動デプロイで本番環境反映 38
36. テスト  単体テスト  PHPUnitで作成  ロジックのみに切り出せているクラスのみ （ModelでDBアクセスがないもの）  E2Eテスト  Selenium, facebook/php-webdriverで実装  大部分がテストできていないのE2Eテストで動作を保証する 39 テストは勉強不足です
37. 終わりに  反省点  とにかく目的のものを作ることが優先されてイマイチなところが多い  勉強不足なところが多い  テスト方法、設計、インフラ周り、デザインパターン  コーディングルールを決めてから始めればよかった  キャメルケース、スネークケース、ケバブケースが混ざっているとこがある  苦労したこと  トラブルを一人で解決しないといけないこと  工夫したこと  シェルスクリプトでサーバ設定を半自動化したこと  学んだこと  初めて使用した  Slim, Vue.js, Selenium  PhpStorm便利  コードフォーマット、ジャンプ、リファクタリング  感想  初めてWebサービス公開までできたのが楽しかった  完璧なものを目指さなければモチベーションは維持できる  とにかく技術不足、Webサービスを作るのにやることがたくさんある 40