未経験からYouTube APIで筋トレ動画を取得するWebアプリを開発してみた

16418 ワード
HTML YouTubeAPI Webアプリケーション JavaScript HTML テキストリンク

はじめに

医療職からIT業界に転職し、全くの未経験でしたが趣味でプログラミングを少しずつ勉強しています。
最近は在宅勤務が続いているため、YouTubeで筋トレやフィットネス動画を見て、体を動かすことが多くなりました！

そこで、「YouTubeにトレーニング動画はたくさんあるが、トレーニング前に沢山の動画の中からトレーニング動画を探すのが手間…」そんな悩みを解決するべく、
性別、鍛えたい部位を選択することでトレーニング動画を出力してくれるWebアプリを作成したので学習記録として残します！

現在開発中のWebアプリの画面はこちらです。
まだまだシンプルな画面ですが、ここから少しずつ改良していく予定です。

この画面のように、性別や鍛えたい部位を選択することで、YouTubeAPIを経由して関連動画を検索することができます。

現段階では、簡易的な機能のみですが、ここからLINE Botの自動通知機能を実装して、自宅でのエクササイズを継続できるようにしていきたいです。

コードの解説

ここからは、自分の勉強記録として、コードを解説していきます。

(1) YouTubeAPI keyの取得。

参考にした記事はこちら↓

https://qiita.com/iroiro_bot/items/1016a6a439dfb8d21eca

(2)htmlで性別を選択するラジオボタン作成。

<p> 性別<br>
   <input type="radio" class="sex" name="sex" value="男性" required> 男性
   <input type="radio" class="sex" name="sex" value="女性"> 女性
</p>

(３)鍛えたい部位は複数選択可能なチェックボックスを作成。

valueに○○トレと代入することでトレーニング関連動画のみ表示するようにしています。

<p> 部位<br>
    <input type="checkbox" class="parts" name="parts" value="胸筋トレ"> 胸
    <input type="checkbox" class="parts" name="parts" value="腹筋トレ"> 腹部
    <input type="checkbox" class="parts" name="parts" value="背筋トレ"> 背中
    <input type="checkbox" class="parts" name="parts" value="上腕筋トレ"> 腕
    <input type="checkbox" class="parts" name="parts" value="下半身筋トレ"> 下半身<br>
    <input type="checkbox" class="parts" name="parts" value="ヨガ"> ヨガ
</p>

(4)callAPIでチェックボックスで選択したkeywordsのYouTubeAPIを呼び出し出力。

async function callApi(keywords) {
  const res = await fetch("https://www.googleapis.com/youtube/v3/search?type=video&part=snippet&q=" + keywords + "&key=XXXXXXX（ここにAPIキーが入ります）XXXXXXXX");
  //jsonとして解析
  const content = await res.json();
  console.log(content);//結果

  return content;
}

(5)(2)で作成したチェックボックスのキーワードを出力。

function getKeywords(checks){
  var keywords = '';
  for ( i = 0; i < checks.length; i++) {
    if (checks[i].checked === true ) {
      keywords += checks[i].value + "+";
    }
  }
  return keywords;
}

(６)Youtubeの検索結果を取得。

async function updateSearchResult(keywords){}

(７)検索結果を画面に表示。

documennt.getElementById(ID) はIDを指定してHTML要素を1つ取得するメソッド。

var result_element = document.getElementById('result_view');

(８)innerHTMLはhtml要素の中身を変更できる。””で内容を空にしている。

result_element.innerHTML = "";

(9) リンクを１つずつ追加

for (i=0; i < content["items"].length; i++){
    var videoID = content["items"][i]["id"]["videoId"];
    var title = content["items"][i]["snippet"]["title"];
    var url = "https://www.youtube.com/watch?v=" + videoID;

(10) YouTubeURLをaタグでリンクとして表示。

br で改行として表示する。

var atag = document.createElement('a');
var br = document.createElement('br');
atag.href = url;  // URL
atag.textContent = title; // タイトル
// 指定した要素の中の末尾に挿入
result_element.appendChild(atag);
result_element.appendChild(br);

(11) 検索ボタンを押すと、まずはgetValueが実行される。

未入力がある場合、アラート文字を表示。

function getValue(){

  var sex_checks = document.getElementsByClassName('sex');
  var parts_checks = document.getElementsByClassName('parts');

  var sex_keywords = getKeywords(sex_checks);
  var parts_keywords = getKeywords(parts_checks);

  if (sex_keywords && parts_keywords){
    var keywords = sex_keywords + parts_keywords + "分";
    console.log(keywords);

    updateSearchResult(keywords);
  }
  else{
    var result_element = document.getElementById('result_view');
    result_element.innerHTML = "";
    var message = document.createElement("p");
    message.innerText = "未入力の項目があります。";
    result_element.appendChild(message);
  }
}

今後の展望

LINEbotで自動通知を行い、トレーニングのリテンション目的、トレーナーの代わりとなるようなアプリとしていきたい。