Webアプリ「OTENKI MUSIC」（YoutubeAPI）

https://github.com/kenta66448284/weatherapri

概要

授業で作成した天気予報のAPIを使用したオリジナルのお天気アプリです。今回はYoutubeのAPIも利用して音楽が流れるようなアプリを作成しました。サイトに入るとランダムで天気に合わせて設定したリストからランダムに曲を流すようにし、天気に合わせて背景や文字の色を変えるようにしています。そして上の2つのボタンを押すとその時の気分によっておすすめの曲をリスト化し画面に表示するようにしています。

制作時期	2022年6月
製作期間	約1カ月
担当箇所	デザイン・コーディング
制作人数	個人製作
公開URL	https://kentalog.work/weatherapri/index.html

◆制作工程

APIの知識を学ぶ
簡単なラフ図の作成
コーディング作業、公開

大変だった点

◆どのようなお天気アプリを作るか

まず最初にお天気アプリを作る際に普通に天気を表示させるだけではつまらないと感じたのでなにかいい案がないかと考えるのが大変でした。そこで今回は私の大好きな音楽を使用して天気によって流す曲やおすすめする曲を変えるアプリを作ることにしました。

◆YouTubeAPIデータの取得

別の授業で習ったyoutubeAPIをうまく使用したいと思い調べていましたが中々うまく行かずに苦労しました。取得をした後もYouTube IFrame Player APIに上手くデータを持っていけなかったりして苦労しましたが、友人から助言をもらいなんとか乗り切ることができました。

for(let i= 0;i<Btn.length;i++){
            Btn[i].addEventListener("click",function(){
                textbun.innerHTML="";
                three.innerHTML="";
                ul.innerHTML="";
                for(let i=0;i<deta[0].timeSeries[0].areas[0].weathers.length;i++){
                    let p = document.createElement("p");
                    const west = deta[0].timeSeries[0].areas[0].weathers[i];
                    p.innerHTML =text[i]+ west;
                    three.appendChild(p);
                    console.log(west)
                }
                if(i===0){
                    textbun.innerHTML= "そんなテンション高めなあなたにお勧めの曲はこちらっ！"
                    read.appendChild(textbun)
                    console.log(read)
                    const musicUrl=`https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId=${Music_list[Btn[0].value]}&key=AIzaSyC0QUgrDMD28Dtocuf9n7qw_IwWsj2UB6U`
                    fetch(musicUrl)
                    .then(function (response) {
                    return response.json();
                    })
                    .then(function(deta){
                        console.log(deta)
                        
                        for(let i = 0;i<deta.items.length;i++){
                            let li = document.createElement("li");
                            let a = document.createElement("a");
                            let title = deta.items[i].snippet.title;
                            a.innerHTML = title;
                            console.log(deta.items[i].snippet.title);
                            youtubelist[i]=deta.items[i].snippet.resourceId.videoId;
                            a.setAttribute("href","https://www.youtube.com/watch?v="+youtubelist[i])
                            li.appendChild(a);
                            ul.appendChild(li);
                            console.log(ul)
                            list.appendChild(ul);
                        }
                        console.log(youtubelist)
                        random = Math.floor(Math.random()*3);
                        console.log(random)
                        youtubeid = youtubelist[random];
                        console.log(youtubeid)
                        
                        
                        // console.log(youtubelist)
                    })


Resources

このお天気アプリ制作で特に工夫した点は質問ボタンを押した後の見せ方です。本来ならボタンを押した後に表示されるリンクはそのままouTube IFrame に入れても良かったのですが再生されない動画も多くそこが嫌だったのでsetattributeを使用してリンクを貼るようにしてそのままYouTubeの方に飛ぶようにしました。

作品を通して

初めてJavaScriptを使用してアプリを作成したけど自分の知らないこと、わからないことが多くもっと勉強していく必要があるなと感じました。今回なんとか完成させることができましたが、関数の仕様や引数の使用でもっとわかりやすく見やすいコードになると思うのでこれからも自主的に作品制作やAPIについて学んでいきたいと思います。