GAS x HtmlでWebアプリを作ってみよう④ 検索機能の実装

さて、いよいよ今回は、YouTube検索Webアプリの心臓部分である機能を実装していきます。
とは言っても、基本部分は、スプレッドシートアプリ（Webサイトから情報を取得する⑤ Web API vol.2）として作ったコードを利用できますので、効率的です。
では、やっていきましょう！

getVideoInfos関数をそのまま利用

getVideoInfos関数は、何にもいじらずそのまま利用できます。

function getVideoInfos(id) {
  const results = YouTube.Videos.list('statistics', {
    id: id
  });
  const viewCount = results.items[0].statistics.viewCount;
  const likeCount = results.items[0].statistics.likeCount;
  return [viewCount, likeCount];
}

searchByKeyword関数をWebアプリ用にカスタマイズ

searchByKeyword関数は、Webアプリ用に一部カスタマイズが必要です。
スプレッドシートからの検索ワードの取得が不要なので、その部分を削除します。

function searchByKeyword(query) {
  try {
    const results = YouTube.Search.list('id,snippet', {
      q: query,
      maxResults: 25,
      type: 'video',
    });
    if (results === null) {
      console.log('Unable to search videos');
      return;
    }
    const data = [];
    results.items.forEach(item => {
      const url = 'https://www.youtube.com/watch?v=';
      const id = item.id.videoId;
      const rowData = [item.snippet.title, url + id];
      const [viewCount, likeCount] = getVideoInfos(id);
      rowData.push(viewCount, likeCount);
      data.push(rowData);
    });
    return data;
  } catch (err) {
    // TODO (developer) - Handle exceptions from Youtube API
    console.log('Failed with an error %s', err.message);
  }
}

doPost関数に追記

コード.gsファイルに記述したdoPost関数にオレンジ枠の2行を追記します。
e.parameter.queryで検索ワードが取得できることは、シリーズ③で確認しました。
検索ワードを変数queryに格納し、searchByKeyword関数の引数として渡します。
そして、その戻り値を変数dataに格納します。

function doGet() {
  const template = HtmlService.createTemplateFromFile('index');
  template.deployUrl = ScriptApp.getService().getUrl();
  const htmlOutput = template.evaluate();
  return htmlOutput;
}

function doPost(e) {
  const query = e.parameter.query;
  const data = searchByKeyword(query);
  const template = HtmlService.createTemplateFromFile('result');
  template.deployUrl = ScriptApp.getService().getUrl();
  const htmlOutput = template.evaluate();
  return htmlOutput;
}

dataの中身を確認してみよう

では一旦、console.log(data);として、dataが正しく取得できているかどうか確かめてみましょう。
1. ファイルを保存
2. 新しくデプロイし、アプリのURLをクリック
3. 入力ページで「大谷翔平」と入力し、検索をクリック
4. スクリプトに戻り「実行数」から最新のdoPostを開く

問題ないようです。
dataが取得できています。
動画のタイトル、URL、再生数、いいね数が25件、二次元配列で格納されています。

dataを検索結果ページに書き出そう

いよいよ、検索機能の最終段階です。
取得したdataを検索結果ページに書き出すことができれば、ほぼ完成ですね。
やり方としては、result.htmlファイルに表形式でdataを書き出しますので、<table>タグを使います。
中身の<tr><td>タグは同じパターンで繰り返すので、for文でループします。
これらの処理をgetTableHtml関数を作成して行います。
今回、Webアプリ用の関数として全く新しく作るのはこの関数だけです。

getTableHtml関数を作成

テンプレートリテラルを使います。

function getTableHtml(data) {
  let html = `<table border="1">`;
  html += `<tr><th>No</th><th>タイトル</th><th>Link</th><th>再生数</th><th>いいね</th></tr>`;
  for (let i = 0; i < data.length; i++) {
    const [title, url, viewCount, likeCount] = data[i].flat();
    html += `<tr>`;
    html += `<td>${i+1}</td>`;
    html += `<td>${title}</td>`;
    html += `<td><a href="${url}" target="_blank" rel="noopener noreferrer">Link</a></td>`;
    html += `<td>${viewCount}</td>`;
    html += `<td>${likeCount}</td>`;
    html += `</tr>`;
  }
  html += `</table>`; 
  return html;
}

doPost関数に追記

doPost関数に次の1行を追記します。
template.tableHtml = getTableHtml(data);
これで、変数tableHtml をresult.htmlで利用可能になります。

result.htmlに追記

result.htmlに次の1行を追記します。
<? output._ = tableHtml ?>

実装完了です！
試してみましょう。
1. ファイルを保存
2. 新しくデプロイし、アプリのURLをクリック
3. 入力ページで「大谷翔平」と入力し、検索をクリック

検索結果ページに書き出し成功です！

Homeボタンを設置

検索結果ページの下にHomeボタンがあると便利ですね。
ワンクリックで入力画面に戻れます。
設置しましょう。

result.htmlに次の1行を追記します。
<p id="uni"><a href="<?!= deployUrl ?>" class="btn">Home</a></p>
<?!= ?>スクリプトレットタグで変数の呼び出しが可能です。
<p>タグにuniというid属性、<a>タグにbtnというclass属性を付けたので、それらを作っていきます。

css.htmlにオレンジ枠の内容を追記します。
追記したら、
1. ファイルを保存
2. 新しくデプロイし、アプリのURLをクリック
3. 入力ページで「大谷翔平」と入力し、検索をクリック
でテストしてみましょう。

<style>
  .container {
    max-width: 1000px;
    margin: auto;
    padding: 10px 30px 50px;
    background-color: #f5f5f5;
  }

  .btn {
    border-radius: 5px;
    background-color: blue;
    padding: 10px;
    text-decoration: none;
    color: white;
    transition: all .2s;
  }

  .btn:hover {
    background-color: #f5f5f5;
    color: blue;
    border: 1px solid blue;
  }

  #uni {
    margin-top: 50px;
  }
</style>

結果ページのタイトル頭に検索ワードを付ける

下図のように、検索結果ページのタイトル頭に検索ワードを入れましょう。
変数queryをスクリプトレットタグで呼び出せばできそうですね。

コード.gsのdoPost関数に次の1行を追記します。
template.query = query;
GASのHtmlサービスの独特の記法ですね。
こう書くんだと覚えてしまいましょう。
これで変数queryを呼び出せます。

result.htmlの<h1>タグに下図のように追記します。
<h1>“<?!= query ?>"の検索結果</h1>
追記したら、
1. ファイルを保存
2. 新しくデプロイし、アプリのURLをクリック
3. 入力ページで「大谷翔平」と入力し、検索をクリック
でテストしてみましょう。

お疲れ様でしたファビコン

シリーズ目次：GAS x HtmlでWebアプリを作ってみよう

  1. GAS x HtmlでWebアプリを作ってみよう① はじめの一歩
  2. GAS x HtmlでWebアプリを作ってみよう② CSSでスタイリング
  3. GAS x HtmlでWebアプリを作ってみよう③ 検索結果ページの作成
  4. GAS x HtmlでWebアプリを作ってみよう④ 検索機能の実装

GAShtml,Webアプリ

Posted by botw