使用STS4和Youtube Data API v3创建一个简单的网页应用程序
一、目录
二、目录清单
三、目录索引
四、目录列表
五、目次表
1.起始
2.概览
3.生成API密钥
4.创建STS4项目
首先
本次我们将介绍使用YouTube Data API v3和Spring Tool Suite 4(STS4)创建简单web应用的步骤。
首先，我将列出正在使用的软件清单及其版本。版本等如下所示：
・春季工具套件4(STS4) 4-4.17.0
・YouTube数据API v3-rev222-1.25.0
・谷歌云平台(GCP)
概述
這個API是免費使用的，但會有請求數量的限制，因此在進行除錯等操作時需要注意剩餘次數（可以申請提高限制的上限）。
本次將不詳細介紹解除請求數量限制的方法。
3. 发行API密钥
请点击以下链接访问Google Cloud，并进行API密钥和OAuth客户端ID的发行。
https://console.cloud.google.com/apis/dashboard
选项1:
步骤1：登录Google Cloud后，选择下拉菜单”选择项目”。
第二步。弹出一个窗口，选择右上角的”新建项目”。选择后，将显示用于创建项目的界面，请输入适当的项目名称，并点击”创建”按钮。
确认项目名称在下拉菜单中显示后，点击左侧菜单栏中的“认证信息”。从“创建认证信息”中选择“API密钥”，然后点击。
如果API密钥显示出来，那么创建就完成了。
您可以在左侧菜单栏的“认证信息”中查看创建的API密钥。
激活Youtube Data API v3.
进行如下步骤：点击”启用API服务”。之后，API库画面会显示出来，然后在搜索栏中输入”youtube”进行搜索，并从搜索结果中选择”YouTube数据API v3″。
执行步骤2，选择”启用”，将API激活。
4. 创建STS4项目
第二步，编辑pom.xml文件。
请注意，如果这里的版本设置不正确，Java代码可能无法正常运行。
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>3.0.6</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.hoge</groupId>
<artifactId>HogeProject-01</artifactId>
<packaging>jar</packaging>
<version>0.0.1-SNAPSHOT</version>
<name>HogeProject-01</name>
<url>http://maven.apache.org</url>
<description>Demo project for Spring Boot</description>
<properties>
<project.youtube.version>v3-rev222-1.25.0</project.youtube.version>
<project.http.version>1.25.0</project.http.version>
<project.oauth.version>1.25.0</project.oauth.version>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<java.version>17</java.version>
</properties>
<repositories>
<repository>
<id>google-api-services</id>
<url>http://google-api-client-libraries.appspot.com/mavenrepo</url>
</repository>
</repositories>
<dependencies>
<!-- YouTube Data V3 support -->
<dependency>
<groupId>com.google.apis</groupId>
<artifactId>google-api-services-youtube</artifactId>
<version>${project.youtube.version}</version>
</dependency>
<dependency>
<groupId>com.google.http-client</groupId>
<artifactId>google-http-client-jackson2</artifactId>
<version>${project.http.version}</version>
</dependency>
<dependency>
<groupId>com.google.oauth-client</groupId>
<artifactId>google-oauth-client-jetty</artifactId>
<version>${project.oauth.version}</version>
</dependency>
<dependency>
<groupId>com.google.collections</groupId>
<artifactId>google-collections</artifactId>
<version>1.0</version>
</dependency>
<!-- YouTube Data V3 support -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jdbc</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<dependency>
<groupId>org.thymeleaf.extras</groupId>
<artifactId>thymeleaf-extras-springsecurity6</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-test</artifactId>
<scope>test</scope>
</dependency>
<!-- DBは今回は使用しない -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.31</version>
<scope>runtime</scope>
</dependency>
<!-- DBは今回は使用しない -->
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<version>1.2.1</version>
<configuration>
<mainClass>com.hoge.api.SampleAPI</mainClass>
</configuration>
</plugin>
<!-- Forces Maven to use Java 1.6 -->
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>2.3.2</version>
<configuration>
<source>1.6</source>
<target>1.6</target>
<compilerArgument></compilerArgument>
</configuration>
</plugin>
</plugins>
</build>
</project>
创建一个Controller类。
package com.hoge.controller;
import com.hoge.api.SampleAPI;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import jakarta.servlet.http.HttpServletRequest;
@Controller
public class ViewController {
@GetMapping("/")
public String homeGet(Model model, HttpServletRequest request) {
try {
model.addAttribute("video", new SampleAPI().getSearchList());
} catch (Exception e) {
e.printStackTrace();
}
return "view.html";
}
}
创建一个名为SampleAPI的类，用于获取视频信息的步骤4。
package com.hoge.api;
import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.util.ArrayList;
import java.util.List;
import java.util.Properties;
import com.google.api.client.googleapis.json.GoogleJsonResponseException;
import com.google.api.client.http.HttpRequest;
import com.google.api.client.http.HttpRequestInitializer;
import com.google.api.client.http.HttpTransport;
import com.google.api.client.http.javanet.NetHttpTransport;
import com.google.api.client.json.JsonFactory;
import com.google.api.client.json.jackson2.JacksonFactory;
import com.google.api.services.youtube.YouTube;
import com.google.api.services.youtube.YouTube.Search;
import com.google.api.services.youtube.model.SearchListResponse;
import com.hoge.model.VideoBean;
public class SampleAPI {
/** Global instance of YouTube object to make all API requests. */
private static YouTube youtube;
private static final JsonFactory JSON_FACTORY = JacksonFactory.getDefaultInstance();
private static final HttpTransport HTTP_TRANSPORT = new NetHttpTransport();
private static final String PROPERTIES_FILENAME = "youtube.properties";
/** HTTPリクエストの初期化クラス */
private static final HttpRequestInitializer HTTP_REQUEST_INITIALIZER = new HttpRequestInitializer() {
public void initialize(HttpRequest request) throws IOException {}
};
// 検索したい動画情報の取得
public List<VideoBean> getSearchList() throws Exception {
List<VideoBean> list = new ArrayList<>();
try {
// youtubeオブジェクト生成
youtube = new YouTube.Builder(HTTP_TRANSPORT, JSON_FACTORY, HTTP_REQUEST_INITIALIZER).setApplicationName("youtube-web2023").build();
// apikeyをセットする
Properties properties = new Properties();
// プロパティファイルに定義したAPIキーを設定する
InputStream in = Search.class.getResourceAsStream("/" + PROPERTIES_FILENAME);
properties.load(in);
String apiKey = properties.getProperty("youtube.apikey");
// 検索結果のbean
SearchListResponse res = new SearchListResponse();
YouTube.Search.List search = youtube.search().list("snippet")
.setQ("三毛猫") // 検索したいキーワードを入力する
.setKey(apiKey);
// VideoBeanにデータを格納する
do {
res = search
.setMaxResults(50L) // 最大50件
.setPageToken(res.getNextPageToken())
.execute();
for (int i = 0; i < res.getItems().size(); i++) {
VideoBean bean = new VideoBean();
bean.setVideoTitle(res.getItems().get(i).getSnippet().getTitle()); // 動画タイトル
bean.setThumbnail((res.getItems().get(i).getSnippet().getThumbnails().getDefault().getUrl())); // サムネイル画像)
list.add(bean);
}
} while (res.getNextPageToken() != null); // 51件以降のデータも格納する
} catch (GoogleJsonResponseException e) {
e.printStackTrace();
System.err.println("There was a service error: " + e.getDetails().getCode() + " : " + e.getDetails().getMessage());
} catch (Throwable t) {
t.printStackTrace();
}
//登録しているチャンネルのidを返却する
return list;
}
}
第五步：创建名为”youtube.properties”的文件，并根据以下内容进行编辑。将其存放在之前第二步和第三步中创建的Java文件所在的同一包下。
youtube.apikey=ここに作成したapiキーを貼り付け
步骤6：在templates中创建用于显示的HTML类。
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<meta charset="UTF-8">
</head>
<body>
<table border="1" class="nara-table" style="table-layout: fixed;">
<thead>
<tr>
<th style="background:#AD002D;font-weight: bold;color:#fff;">動画のタイトル</th>
<th style="background:#AD002D;font-weight: bold;color:#fff;">サムネイル</th>
</tr>
</thead>
<th:block th:each="v : ${video}">
<tbody>
<tr>
<td th:text="${v.videoTitle}"></td>
<td><img th:src="@{${v.thumbnail}}" /></td>
</tr>
</tbody>
</th:block>
</table>
</body>
</html>
第六步。这次，我们需要视频的标题和缩略图信息，因此我们将创建一个仅存储所需信息的bean。
package com.hoge.model;
public class VideoBean {
private String videoTitle = "";
private String thumbnail = "";
public String getVideoTitle() {
return videoTitle;
}
public void setVideoTitle(String videoTitle) {
this.videoTitle = videoTitle;
}
public String getThumbnail() {
return thumbnail;
}
public void setThumbnail(String thumbnail) {
this.thumbnail = thumbnail;
}
}
