たけるのプログラミング

作ったものとか、気ままにアップします。

iTunes Search APIを使って、音楽検索してみた！

今回は「 iTunes Search API 」を使ってみました。

ドキュメントはこちら
developer.apple.com

アップルはUIが優れているイメージがありますが、ドキュメントもシンプルでわかりやすいです。

今回作ったWebアプリ

f:id:takeru232423:20210724225201p:plain

検索したキーワードに関連する曲の情報(アーティスト名、アルバム画像、iTunesの曲のリンク)が10個表示されます。

ソースコード

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <h1>曲検索アプリ</h1>
    <input id="serch_keyword" type="text"><input id="serch_button" type="button" value="検索">
    <div class="result"></div><!--ここに検索結果を表示します-->
    <script type="text/javascript" src="script.js"></script>
</body>
</html>
style.js
let keyword='';
let music_infos = {};

$('#serch_button').click(function(){
    keyword = $('#serch_keyword').val();
    console.log(keyword);
    $('#serch_keyword').val('');
    $('.result').empty();
    $.ajax({
        url:'https://itunes.apple.com/search',
        type:'GET',
        dataType:'json',
        data:{
            lang: 'ja_jp',
            media: 'music',
            entity:'song',
            country: 'JP',
            term: keyword,
            limit: '10'
        }
    }).done(
        function(data){
            for(let i=0;i<10;i++){
               let music_info ={};
               music_info.artworkUrl = data.results[i].artworkUrl100;
               music_info.artistName = data.results[i].artistName;
               music_info.trackName = data.results[i].trackName;
               music_info.collectionViewUrl = data.results[i].collectionViewUrl;
               music_infos[i] = music_info;
            }
            console.log(music_infos);
            for(let i=0;i<10;i++){
            $('.result').append("<img src=\""+music_infos[i].artworkUrl+"\">");
            $('.result').append("<h3>"+music_infos[i].artistName+"</h3>");
            $('.result').append("<p>"+music_infos[i].trackName+"</p>");
            $('.result').append("<a href=\""+music_infos[i].collectionViewUrl+"\">曲のページへ</a><br>");
            }
        }
    ).fail(
        function(data){
            console.log('失敗しました！');
        }
    );
});


今回は曲について検索を行いましたが、ドキュメントによると他にも映画やポットキャスト、電子書籍などさまざまな情報を取得することができるみたいです。

ハンバーガーメニューを作ってみた【jQuery】

こんにちは。

大学の期末テストやレポートが落ち着いて、やっとコーディングできます！

今回は、レスポンシブデザインにおいて必須と言っても過言ではない「ハンバーガーメニュー」を作っていきたいと思います！

こちらの記事を参考にさせてもらいました。
ハンバーガーメニュー（ドロワーメニュー）の作り方 | KUBOGEN

完成品


See the Pen
by sk (@sk232423)
on CodePen.


ソースコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <header>
      <div class="hamburger_and_logo">
        <div class="hamburger">
          <span></span><!--ハンバーガーの棒たち-->
          <span></span><!--ハンバーガーの棒たち-->
          <span></span><!--ハンバーガーの棒たち-->
        </div>
        <img src="https://cdn.pixabay.com/photo/2017/11/10/05/05/youtube-2935416_1280.png" alt="" style="height:50px"><!--ヘッダーのロゴ-->
      </div>
        <nav class="menu"><!--横からでてくるメニュー-->
            <div class="menu_bottom_border"><!--線引くためのクラス-->
            <div class="menu-hamburger"><!--横からでてくるハンバーガー-->
                <span></span><!--横からでてくるハンバーガーの棒たち-->
                <span></span><!--横からでてくるハンバーガーの棒たち-->
                <span></span><!--横からでてくるハンバーガーの棒たち-->
            </div>
            <img src="https://cdn.pixabay.com/photo/2017/11/10/05/05/youtube-2935416_1280.png" alt="" style="height:50px"><!--ヘッダーのロゴ-->
            </div>
          <ul class="menu-content"><!--横からでてくるメニューの内容-->
            <li>メニュー1</li>
            <li>メニュー2</li>
            <li>メニュー3</li>
            <li>メニュー4</li>
            <li>メニュー5</li>
          </ul> 
        </nav>
    <div class="menu-background"></div><!--ハンバーガー押されたら、背景をグレーにする-->
    </header>
    <p>テスト</p>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
    //toggleは表示していたら非表示に、非表示の場合は表示にしてくれる！！！
   $(function(){
  $('.hamburger').click(function(){
    $('.menu').toggleClass('open');
    $('.menu-background').toggleClass('menu-background2');
  });
  $('.menu-hamburger').click(function(){
    $('.menu').toggleClass('open');
    $('.menu-background').toggleClass('menu-background2');
  });
  $('.menu-background').click(function(){
    $('.menu').toggleClass('open');
    $('.menu-background').toggleClass('menu-background2');
  });
});
</script>
</html>

CSS

body {
    margin: 0;
    background-color:rgb(248, 248, 248);
  }
  /*----------------------------ハンバーガーメニュー----------------------------*/
  header{
      height:50px;
      position: relative;
      background-color: white;
  }
  .hamburger_and_logo{
    display: flex;
  }
  .hamburger {
    width: 30px;
    height: 30px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
  }
  .hamburger:hover {
    cursor: pointer;
  }
  .hamburger span {
    background: black;
    width: 20px;
    height: 2px;
    position: absolute;
  }
  .hamburger span:nth-of-type(1) {
    top: 19px;
  }
  .hamburger span:nth-of-type(3) {
    bottom: 19px;
  }
  /*---------------------メニュー-----------------------*/
  .menu {
    z-index:3;
    width: 300px;
    height: 100vh;
    background-color: white;
    color: black;
    position: absolute;
    top:0;
    transform: translate(-300px);
    transition: 0.3s ease-out;
  }
  .menu_bottom_border{
    display: flex;
      height:50px;
      border-bottom: 1px solid rgb(225, 225, 225);
  }
  .menu-hamburger{
    width: 30px;
    height: 30px;
    padding: 10px;
    position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .menu-hamburger:hover {
    cursor: pointer;
  }
  .menu-hamburger span {
    background: black;
    width: 20px;
    height: 2px;
    position: absolute;
  }
  .menu-hamburger span:nth-of-type(1) {
    top: 19px;
  }
  .menu-hamburger span:nth-of-type(3) {
    bottom: 19px;
  }
  .menu-content{
      margin-top: 50px;
  }
  li {
    margin-bottom: 10px;
  }
  /*----------------------メニューにopenクラスがついたときのスタイル------------------------*/
  .menu.open {
    transform: translate(0);
    transition: 0.3s ease-out;
  }
  /*--------------背景を黒くする、押したらメニューを閉じる--------------------*/
  .menu-background {
  position: fixed;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 0;
  height: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
  opacity: 0; /* 透明度を0にすることで隠す */
  transition: opacity 0.3s; /* 透明度の0→1になる速度 */
}
.menu-background2{
  width: 100%;
  height: 100%;
  opacity: 1; /* メニューが表示されているときには背景が表示 */
}

感想

jQuery書きやすい！今回作ったヘッダーのデザインはYouTubeを参考にしました。ハンバーガーメニューは、三を押すと×に変化するデザインが多いですが、
YouTubeはハンバーガー自体にアニメーションが無いんですよね。
最近、色々なサイトを見る際にこのサイトbootstrap使ってるな！と感じることが増えてきました。bootstrapでヘッダーを作りたい際はこちらから↓
getbootstrap.jp

【jQuery】jQueryのプラグインを使って簡単にバリデーションを実装してみた！

Webアプリケーションを作る際に、考えなくてはいけないのが


入力フォームのバリデーションです。


ユーザーが値を入力しなかった場合の処理や、フォーマットとは違う値を入力した場合など、


色々なケースを考え、対処法を考える必要があります。


今回は「jQuery Validation Plugin」を使って、入力フォームのバリデーションを簡単に実装してみました。
jQuery Validation Plugin | Form validation with jQuery


ソースコード


See the Pen
rNyYXdm by sk (@sk232423)
on CodePen.

ポイント

この入力フォームには、url形式のデータを入力し、送信することができます。また何も入力しないと送信できない仕様となっています。
このurl形式のデータの指定はValidation methodsにおいて url:true　とし、
入力を必須と指定するためにValidation methodsにおいて　required:true　としています。


より多くのデモはドキュメントに載っています。分かりやすいです。


バリデーションは、バックエンドにおいての処理も必要なので、このプラグインだけでは十分ではないと思います。しかし手軽にバリデーションを実装できるのは最大のメリットですね。


間違いなど、ご指摘ありましたらよろしくお願いいたします。

【PHP】YouTubeのDATA APIを使ってみた。

こんにちは、なんとなくYouTubeのデータを使ってプログラムを書きたいと思ったので、

PHPを使って、YouTubeのDATA APIを使ってみたいと思います。

GoogleのデベロッパーコンソールからAPIキーの獲得の流れについては以下記事が分かりやすいです。
qiita.com

実際に、公式のデモを動かしてみました。

実行結果

キーワードを入力して、最大表示数を指定して、
f:id:takeru232423:20210530212006p:plain

検索すると
f:id:takeru232423:20210530212120p:plain
該当する動画タイトルやid、チャンネルが表示されました。

ソースコード

Search: list  |  YouTube Data API  |  Google Developers ←公式サイト載っています。

<?php

/**
 * Library Requirements
 *
 * 1. Install composer (https://getcomposer.org)
 * 2. On the command line, change to this directory (api-samples/php)
 * 3. Require the google/apiclient library
 *    $ composer require google/apiclient:~2.0
 */
if (!file_exists(__DIR__ . '/vendor/autoload.php')) {
  throw new \Exception('please run "composer require google/apiclient:~2.0" in "' . __DIR__ .'"');
}

require_once __DIR__ . '/vendor/autoload.php';

$htmlBody = <<<END
<form method="GET">
  <div>
    Search Term: <input type="search" id="q" name="q" placeholder="Enter Search Term">
  </div>
  <div>
    Max Results: <input type="number" id="maxResults" name="maxResults" min="1" max="50" step="1" value="25">
  </div>
  <input type="submit" value="Search">
</form>
END;

// This code will execute if the user entered a search query in the form
// and submitted the form. Otherwise, the page displays the form above.
if (isset($_GET['q']) && isset($_GET['maxResults'])) {
  /*
   * Set $DEVELOPER_KEY to the "API key" value from the "Access" tab of the
   * Google API Console <https://console.developers.google.com/>
   * Please ensure that you have enabled the YouTube Data API for your project.
   */
  $DEVELOPER_KEY = 'REPLACE_ME';

  $client = new Google_Client();
  $client->setDeveloperKey($DEVELOPER_KEY);

  // Define an object that will be used to make all API requests.
  $youtube = new Google_Service_YouTube($client);

  $htmlBody = '';
  try {

    // Call the search.list method to retrieve results matching the specified
    // query term.
    $searchResponse = $youtube->search->listSearch('id,snippet', array(
      'q' => $_GET['q'],
      'maxResults' => $_GET['maxResults'],
    ));

    $videos = '';
    $channels = '';
    $playlists = '';

    // Add each result to the appropriate list, and then display the lists of
    // matching videos, channels, and playlists.
    foreach ($searchResponse['items'] as $searchResult) {
      switch ($searchResult['id']['kind']) {
        case 'youtube#video':
          $videos .= sprintf('<li>%s (%s)</li>',
              $searchResult['snippet']['title'], $searchResult['id']['videoId']);
          break;
        case 'youtube#channel':
          $channels .= sprintf('<li>%s (%s)</li>',
              $searchResult['snippet']['title'], $searchResult['id']['channelId']);
          break;
        case 'youtube#playlist':
          $playlists .= sprintf('<li>%s (%s)</li>',
              $searchResult['snippet']['title'], $searchResult['id']['playlistId']);
          break;
      }
    }

    $htmlBody .= <<<END
    <h3>Videos</h3>
    <ul>$videos</ul>
    <h3>Channels</h3>
    <ul>$channels</ul>
    <h3>Playlists</h3>
    <ul>$playlists</ul>
END;
  } catch (Google_Service_Exception $e) {
    $htmlBody .= sprintf('<p>A service error occurred: <code>%s</code></p>',
      htmlspecialchars($e->getMessage()));
  } catch (Google_Exception $e) {
    $htmlBody .= sprintf('<p>An client error occurred: <code>%s</code></p>',
      htmlspecialchars($e->getMessage()));
  }
}
?>

<!doctype html>
<html>
  <head>
    <title>YouTube Search</title>
  </head>
  <body>
    <?=$htmlBody?>
  </body>
</html>

ポイント

 $DEVELOPER_KEY = 'REPLACE_ME';

の 'REPLACE_ME'は自分のAPIキーを記述します。

$searchResponse = $youtube->search->listSearch('id,snippet', array(
      'q' => $_GET['q'],
      'maxResults' => $_GET['maxResults'],
    ));

の’id,snippet’のpart部分は必須パラメータで、id、snipperは以下スクリーンショットの通りとなっている。
f:id:takeru232423:20210530213041p:plain
f:id:takeru232423:20210530213215p:plain
f:id:takeru232423:20210530213232p:plain


第二パラメータには連想配列としてキーが’q’の値と、’maxResults’の値が指定されている。各値の説明は以下スクリーンショット通り。
f:id:takeru232423:20210530213336p:plain
f:id:takeru232423:20210530213350p:plain


そして$searchResponseに検索結果が代入され、あとは$searchResponseから欲しいデータを抜き取る作業をするだけです。


$searchResponseで取得できるリソースは複数あり、
例えばリソースがvideoかchannelかplaylistかを判断するために、以下スクリーンショットのkindの部分で判断することができます。
videoの場合:
"kind": "youtube#video"
channelの場合:
"kind": "youtube#channel",
Playlistの場合:
"kind": "youtube#playlist"
f:id:takeru232423:20210530213602p:plain



比較的に簡単にAPIを使うことができました。 近いうちにこのAPIを利用したWEBアプリを作りたいです。

間違えなど、ご指摘がありましたらよろしくお願いいたします。

GitHub Pagesを使ってみた！

結構前にherokuを使ったことがあり、同じことができるサービスないかなとネットをみていたら

「GitHub Pages」というサービスがあったので使ってみました。

無料で静的サイトを公開することができ、JavaScriptも動作するようです。

自分ははてなブログに来る前、独自ドメイン&レンタルサーバーでサイトを運営していたので、

このサービスが無料であることが驚きです。


作ったサイト

shota232423.github.io

NBAオタクの私が、オススメのNBAプレイヤーを紹介しているサイトです。

CSSのFlexboxが便利すぎました。
webdesign-trends.net


使い方で参考になるサイト

prog-8.com

「2020 NBA プレイオフ」のスタッツが落ちてたので、javaで遊んでみた。

今日はネットにオーランドのディズニーワールドで行われた「2020 nba プレイオフ」のスタッツが記されたExcelファイルが落ちていたので、


Javaでデータを取り出して、遊んでみたいと思います。


昔pythonでcsvファイルの読み取りをやった記憶があったので、Javaでできるのか調べながらやってみました。


使用するExcelファイルは以下サイトからダウンロードすることができます。

www.nbastuffer.com

nbaファンにとって、選手のスタッツをみるだけでも楽しいものです。


完成したもの

平均得点と平均リバウンド、平均アシストを指定し、指定した成績以上のプレイヤーの名前とポジション、スタッツを出力するプログラム。

平均20得点10リバウンド0アシストを指定した例

f:id:takeru232423:20210117165153p:plain

平均15得点5リバウンド5アシストを指定した例

f:id:takeru232423:20210117165644p:plain

ソースコード

package nba_app1;
import java.io.BufferedReader;
import java.io.File;
import java.io.FileReader;
import java.util.ArrayList;
import java.util.List;
public class nba_app {

	public static void main(String[] args) {
		int count =0;
		BufferedReader br = null;
		List<nbaplayer> list = new ArrayList<>(); //nbaplayer型のリストを宣言
		String file_name = "2019-2020_stats.csv"; // 入力ファイルの指定
		try {
			File file = new File(file_name); //javaでファイルを扱うために、引数にファイル名を指定し、Fileオブジェクトを生成
			br = new BufferedReader(new FileReader(file)); //javaでファイルからデータを読み取るために、引数にFileオブジェクトを指定し、BufferedReaderオブジェクトを生成

			String line;
			String[] data;

			while ((line = br.readLine()) != null) { //readLine()メソッドを使い、一行ずつデータを取得
				count++;
				data = line.split(",");
				if(count>=3) {
					//-------------以下のprintはテストコードとして使用しました-----------------
					//System.out.print(data[1]);//名前出力
					//System.out.print(" "+data[3]);//ポジション 出力
					//System.out.print(" "+data[18]);//平均得点 出力
					//System.out.print(" "+data[19]);//平均リバウンド 出力
					//System.out.print(" "+data[21]);//平均アシスト 出力
					//System.out.println();
					list.add(new nbaplayer(data[1],data[3],data[18],data[19],data[21]));
				}
			}

			nbaplayer.serch_player(list, 15, 5, 5);//nbaプレイヤー検索メソッド

		} catch (Exception e) {
			System.out.println(e.getMessage());
		} finally {
			try {
				br.close();
			} catch (Exception e) {
				System.out.println(e.getMessage());
			}
		}

	}

}

class nbaplayer{
	String name;
	String position;
	String PPG;
	String RPG;
	String APG;
	public nbaplayer(String name,String position,String PPG,String RPG,String APG) {
		this.name=name;
		this.position=position;
		this.PPG=PPG;
		this.RPG=RPG;
		this.APG=APG;
	}

	public static void serch_player(List<nbaplayer> list,double PPG,double RPG,double APG) {
		for(nbaplayer n:list) {
			double p = Double.parseDouble(n.PPG);
			double r = Double.parseDouble(n.RPG);
			double a = Double.parseDouble(n.APG);
			if(p>=PPG&&r>=RPG&&a>=APG) {
				System.out.print(n.name);//名前出力
				System.out.print(" "+n.position);//ポジション 出力
				System.out.print(" "+n.PPG);//平均得点 出力
				System.out.print(" "+n.RPG);//平均リバウンド 出力
				System.out.print(" "+n.APG);//平均アシスト 出力
				System.out.println();
			}
		}
	}

}

ソースコードの説明

コードについて、簡単に流れを説明すると、指定ファイルから名前、ポジション、平均得点、平均アシスト、平均リバウンドのデータを抜き出し、
それらのデータを使ってnbaplayerオブジェクトを生成。そしてnbaplayer型リストを作り、nbaplayerオブジェクトを入れていき、
そのリストを利用して、nbaプレイヤーを検索するという流れです。

以下ポイントとなるコードを説明します。

while ((line = br.readLine()) != null) { //readLine()メソッドを使い、一行ずつデータを取得
				count++;
				data = line.split(",");
				if(count>=3) {
					//-------------以下のprintはテストコードとして使用しました-----------------
					//System.out.print(data[1]);//名前出力
					//System.out.print(" "+data[3]);//ポジション 出力
					//System.out.print(" "+data[18]);//平均得点 出力
					//System.out.print(" "+data[19]);//平均リバウンド 出力
					//System.out.print(" "+data[21]);//平均アシスト 出力
					//System.out.println();
					list.add(new nbaplayer(data[1],data[3],data[18],data[19],data[21]));
				}
			}

使うExcelファイルについて、１行目と２行目はこのプログラムを作る上で必要ないので、count++とif(count>=3)を使いました。

他のコードの説明については、コードにコメントを書いておきました。

コロナウイルスに関するオープンデータを使ってみた。

こんにちは、今回は題名の通り、内閣官房が公開しているコロナウイルスのオープンデータを利用してみたいと思います。

corona.go.jp

公開されているデータを見てみると、データの形式はjsonのようです。

1月14日に公開されているデータを見てみると、最新のもので1月12日のものになっていました。

開発環境

実行結果

f:id:takeru232423:20210114214310p:plain

XMLHttpRequestを利用して、web上にあるjsonデータを取得できるようにします。なのでこのページにアクセスする日時によって日付、感染者数が変化します。

ソースコード

index.html

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>コロナ感染者数</title>
  <link rel="stylesheet" href="style.css">
 
  </head>
  <body>
    <h1>コロナ感染者数</h1>
    <h2 id="test1"></h2>
    <p id="test2"></p>
    <script type="text/javascript" src="index.js"></script>
  </body>
</html>

index.js

var request = new XMLHttpRequest();
 
request.open('GET', 'https://opendata.corona.go.jp/api/Covid19JapanAll?dataName=東京都', true);
request.responseType = 'json';

request.onload = function () {
  var data = this.response;
  console.log(data.itemList[0]);

  var elem = document.getElementById("test1");
  elem.innerHTML = data.itemList[0].date+"　までの"

  var elem = document.getElementById("test2");
  elem.innerHTML = data.itemList[0].name_jp+"のコロナウイルス感染者の合計は　"+data.itemList[0].npatients+"人です。";
};
request.send();

ソースコードの説明

"itemList":[{"date":"2021-01-12","name_jp":"東京都","npatients":"77133"},,,,,,,]

取得できるjsonデータの形式は上記のような感じです。

data.itemList[0]

最新のデータは配列のインデックス0番目なので、上記のように最新のデータを取得。

日にちは以下のように取得。

data.itemList[0].date

感染者数は以下のように取得。

data.itemList[0].npatients

あとは得たデータをDocument.getElementById()を使ってindex.htmlに表示させるだけです。

感想

めちゃくちゃ久しぶりにjavascript触ったので、たくさんググりました。
知りたい情報を見つけた時の嬉しさは半端ないです。

もっとjavascriptを勉強して、今回のプログラムを応用したものを今後作りたいと思います。

話が変わりますがポケモンapiがあることを、今回初めて知りました。他にもおもしろそうなapiがweb上にあると思うので

暇な時探してみたいと思います。