6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

転職を機にリハビリも兼ねたWebサイト開発

Last updated at Posted at 2018-05-13

※2019/04/22
諸事情でサイト公開を停止しました。すみません。


 おはこんばんにちわ。初めてのQiita投稿です。

 しばらく開発から離れてなんちゃってマネジメントをしていたため、リハビリを兼ねてPHPとYoutube API, Qiita APIを使ったツール開発をしてみました。

#作ったものの概要
###QiitaTube

 Qiitaに多く関連付けられているタグをYouTubeで検索し、解説動画を再生リストごとに表示するツールです。
 思いつきと勢いで作ったのでかなり雑な作りです。(ゴメンナサイ)

 Qiitaで投稿された記事から関連付けられたタグを抽出し、関連付けれた数が多い順にタグを出力しています。
 そのタグでYouTubeで再生リストを取得し、解説動画をパパっと見られるようにしています。

 開発にはphp、apacheが使える無料レンタルサーバを使い、ほぼphpで実装。かなり昔にLAMPでWebアプリを作ったくらいの知識しかなかったので、レガシィな感じに。。。今の流行りって何ですかね?

 作ってみてQiitaで関連付けられているタグはWeb系が多いなぁというのと、機械学習関係がそれに負けないくらい多いというのが分かりました。
 また、解説動画を流したいけど、言語とかで中国語のものがヒットしたり、解説動画とは無関係の動画が出てくることもあります。(タイトルと内容が合致していないようなノイズ)
 まだまだ改善すべきポイントはあるので、これからも育てていきたいです。

###背景
 作ろうと思ったきっかけは以下の2点

  1. 個人的に開発言語や技術系の解説動画をYouTubeで見ることがあるため、サクッと見られるツールが欲しかった
  2. @jabba さんの『技術書ランキングサイトをQiita記事の集計から作ったら、2700冊の技術本がいい感じに並んだ』に感化された

###環境

  1. 開発環境はCentOSにphp, apacheをインストールしたものを使いテスト。
  2. 本番はphp+apacheが実行できる無料レンタルサーバにPHPファイルをアップ。
  3. コーディングはIDEは使わず、viでゴリゴリ。理由はIDEを探すのと慣れるのに時間がかかると思ったから。あとはコンソールの使い方を思い出すためです。

###WEBページの構成

  1. トップページ
     ここではQiitaのAPIを使い、Qiitaに投稿された記事に関連付けられているタグを多い順に取得しています。
     タグを検索キーワードとして、タグ毎にリンクを作り、リンクを踏むと次のページに移動します。

  2. 選択したタグで検索した再生リストの一覧
     トップページで選択したタグを使ってにYouTubeAPIで再生リストを取得しています。APIの仕様で再生リストは5つずつの取得のため、pageTokenを使って5つずつ再生リストを表示するようにしています。
     タイトル、サムネイルにリンクを張り、リンクをクリックすると再生ページを表示します。

  3. 再生リストを再生するページ
     再生リストの動画を再生するページです。PlayerはYouTube APIを使うことでiframeで取得できる便利仕様でした。

 取り敢えずこれでQiitaのタグをもとにYouTubeの動画検索をするWebアプリ?ができました。

###作ってみてわかったこと、今後の課題
 まず作ってみて、インフラ系に比べてWeb系の言語の記事が多いのだと実感。
 最近ホットな機械学習系のタグはもっと少ないかと思っていたが、以外にもそうでもなかったので、今後も増えてきそうだなと思いました。
 
 今後の課題としては下記の点を改善していきたいなと思っています。

  1. デザイン。スマホ、PCに対応したレスポンシブデザインにしたい。
  2. 検索精度の向上。キーワードを単純にタグにしているため、中国語の解説動画などが出てきたり、内容とタイトルが合わない再生リストが出てきたりします。ここはキーワードをいろいろ絡めてみてチューニングしていくか、ユーザが選択できるようにしたいですね。(入門or解説or講座などなど)

###謝辞
 きっかけを作っていただいた @jabba さんに感謝申し上げます。

6
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?