Vue.jsとLaravelでYouTube動画収集系Webサービスを作ってみた

とりあえずJQueryを卒業したかった

今更感はありますが、僕個人的に今までJavaScriptといえば、素のJSか、JQueryを使って実装することが一般的でした。

新しく入った現場で「Angular.js」に初めて触れることになり、真面目にES2015以降のJavaScriptに触れることになりました。

話には聞いていましたが、JSなのに高級言語的な扱いができるのが衝撃でした。

JavaScriptなのに「コンパイル」とか「ビルド」する。

JavaScriptなのに型宣言が必要になる。

JavaScriptなのにclassやinterfaceを使ったオブジェクト指向的な記述ができる。

よくJavaの現場にはいると、JSの実装は「ついで」や「所詮クライアントなのでそんなに労力を費やしたくない」といった考え方が根付いた古い体質の企業を目にします。

ですがそういう企業に限って使っているのはES2015より前の古いJavaScriptで、結局新しいものを取り入れることによる学習コストが大きいことによるためらいや、新しい技術についていけなくなることを恐れて躊躇しているだけのように感じました。

僕自身、そういう古い体質の現場で仕事をしている間はその考え方にあまり疑問を抱きませんでしたが、いざ新しい技術に触れてみると、

「古い技術にしがみついていたら取り残されるだけだ」

ということを実感しました。

手っ取り早くなんか作ってみるならVue.jsがおすすめ

とりあえず何か作るために、現場で経験した「Angular.js」で考えてみましたが、そこまで大規模なアプリケーションを作るつもりもなかったので、もっと簡易的にwebサイトが作れそうな「Vue.js」に手をつけてみることにしました。

Vue.jsのいいところはコンポーネント単位のファイルでhtmlとjsとcssを記述していけるところで、作りながらどういう構成にしていくかを柔軟に考えながら手を動かせるところがよかったと思います。

Angular.jsやReactにも興味はあったのですが、これらは高級言語感が強いので設計からがっちりやりたい時に触ってみようと思います。

今流行りのYouTubeの動画まとめサイトを作ってみることにした

Youtubeが一般的に提供している「Youtube Data API」というものがあったので、このAPIからデータを取得して画面表示するみたいなものをVue.jsでやってみようと思いました。

ただ一つ問題がありました。

Youtube Data Api には使用料上限というものがあり、一つのAPIキーが1日にリクエストできる上限値が定められています。このリクエストの消費量は取得するデータの種類によっても異なるのですが、画面を表示するたびに毎回Youtube Data API にリクエストを投げるのは違う気がしました。

別APIを作り Youtube Data Api から定期的にデータを取得する

ということで YouTube Data API から定期的に動画情報を取得するバッチ処理Vue.jsのクライアント側から欲しいデータを呼び出せるAPIになるアプリケーションをLaravelで作ることにしました。

画面デザインはVue.js 専用のライブラリを使用

Vue.jsで実装する場合、素のCSSを使用してもいいのですが、使用できるデザイン用のライブラリがいくつかあるようだったので、その中から「Vuetify」を選択しました。

参考: https://qiita.com/yusuke_ten/items/4103f032dd0c6fbe5607

  • Bootstrapと同じく、直接CSSを書かなくてもクラスでグリッド分けができる。
  • 細かいUIパーツをタグで記述して実現できる。
  • UIパーツ用の固定タグはあるが、親子コンポーネント間でデータの受け渡しはできるので、自由度は高い。
  • UIパーツは「マテリアルデザイン」を採用していて全体的におしゃれ

要するに余り手間をかけずにおしゃれなサイトが作れるということです。

Vue.jsで作成したWebサイトの公開方法の検討

Vue.jsはAngular.jsなどと同様にNode.jsをベースに動いています。

なので、アップするサーバー環境にはNode.js及びnpm関連モジュールをインストールしておく必要があるのですが、現在使用しているレンタルサーバーにnode環境を作ると色々npmエラーが吐かれて少々面倒でした。

そこで検討したのが 「Firebase Hosting」というサービスです。

https://firebase.google.com/docs/hosting?hl=ja

Googleが提供してるアプリケーション公開用のホスティングサービスで初期状態でNode.js環境も同梱されています。

そして何よりVue.jsがFirebase Hostingをサポートしているようでコマンド一つでデプロイしてサービスの公開までできます。(正確には少し手順を踏む必要がりますが)

料金プランについても調べてみたところ、そこまでのアクセスも見込まれないものをアップするだけなら無料プランで事足りるとのことだったのでこのサービスを使うことに決めました。

ざっくりと作ったものを公開してみる

クライアントとサーバーを切り分けることで必要な時に必要な場所のみの表示切り替えを行うSPA(シングルページアプリケーション)の仕組みで実装することができました。

これもVue.jsがコンポーネント単位で構築できる仕組みがあるおかげです。

作ったものをざっくり公開しようと思います。

https://ytproject-256512.web.app/

最新動画一覧

チャンネル一覧

カテゴリ別動画

統計情報

そこまでかっちり作り込むことはしませんでしたが、Vuetifyを使うとそれなりに今風のサイトを簡単に作ることができました。

プログラム的な構成や備忘録的な話は別の記事で書きたいと思います。

コメントを残す