GAS x HtmlでWebアプリを作ってみよう③ 検索結果ページの作成
YouTube検索アプリでは、検索ワードを入力して、検索ボタンをクリックすると、検索結果を表示するページに遷移します。
今回は、この検索結果ページを作っていきましょう。
検索結果ページ用のhtmlファイルを用意する
新たにHTMLファイルを立ち上げ名前を付けます。
今回は「result」としました。
下図のようにコードを記述します。
こちらにもcontainerクラスのCSSを当てますので、オレンジ枠の記述をお忘れなく。
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
</head>
<body>
<div class="container">
<h1>検索結果</h1>
</div>
</body>
</html>doPost(e)関数
コード.gsファイルにdoPost(e)関数を図のように記述します。
ScriptApp.getService( ).getUrl( )で最新のデプロイURLを取得できます。その値をtemplateのdeployUrlとして格納します。
同じ1行をdoGet( )関数にも追加します。
function doGet() {
const template = HtmlService.createTemplateFromFile('index');
template.deployUrl = ScriptApp.getService().getUrl();
const htmlOutput = template.evaluate();
return htmlOutput;
}
function doPost(e) {
const template = HtmlService.createTemplateFromFile('result');
template.deployUrl = ScriptApp.getService().getUrl();
const htmlOutput = template.evaluate();
return htmlOutput;
}<form>タグにpostメソッドを追記する
index.htmlファイルの<form>タグに method="post" action="<?!= deployUrl ?>"を追記します。
これで、検索ボタンをクリックした時に検索結果ページに遷移すれば成功です。
保存して、新しくデプロイし、URLをクリック。
続いて、入力ページの検索をクリックしてみましょう。
検索結果ページに遷移できました！
<input>タグにname属性を追記する
index.htmlファイルの<input>タグにname="query"を追記します。
このname属性を使えば、<input>タグに入力された検索ワードを取得することができるようになります。
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
</head>
<body>
<div class="container">
<h1>YouTube 検索</h1>
<p>検索ワードを入力して、検索ボタンを押してください。</p>
<p>関連動画25件のタイトル、リンク、再生数、いいね数が取得できます。</p>
<form method="post" action="<?!= deployUrl ?>">
<input type="text" name="query">
<button type="submit">検索</button>
</form>
</div>
</body>
</html>イベントオブジェクトから検索ワードを取得する
doPost(e)の引数に与えられた「e」とはイベントオブジェクトのことで、POSTリクエストされた時の情報がこの引数eに格納されています。
ではまず、図のように一時的にconsole.log(e);として、eの中身を確認してみましょう。
検索ワード入力画面から「大谷翔平」と入力して、検索ボタンをクリックします。
画面が検索結果ページに遷移すればOKです。
続いて、スクリプトに戻り、左メニューから「実行数」をクリックします。
一番上のdoPostをクリックします。
ログが開いて、eの中身が表示されました。
複数の情報(プロパティ)があることがわかります。
入力した検索ワード情報もしっかり格納されています。
オブジェクト構造としては、parameterプロパティの子プロパティとして、<input>タグのname属性の値とした「query」がセットされており、その値が入力ワード(大谷翔平)となっています。
つまり、e.parameter.queryとすれば、検索ワードが取得できるわけです。
次回、シリーズ④では、いよいよアプリの心臓部分である検索機能を実装していきます。