GASでWebページを作るときにページのタイトルを設定する方法


title

photo credit: ::RodrixParedes:: Page, AZ. via photopin (license)

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

GASユーザーのためのHTML入門ということで、簡単なWebページの作り方を紹介しています。

前回の記事はコチラ!

GASとBootstrapでWebページを超簡単にいい感じのレイアウトにする方法
GASユーザーのためのHTML入門、簡単なWebページの作り方をお伝えしています。今回は、GASとBootstrapでWebページを簡単にいい感じのレイアウトにする方法。ジャンボトロンとコンテナを使います。

Bootstrapを使ってGASでいい感じのレイアウトのWebページを作る方法をお伝えしました。

これで、だいぶ整ったWebページは作れるようになってきたと思いますが、もう少しだけお付き合いください。

ページ以外にもちょっと気を使いたいところがあるのです。

例えば、その中にページのタイトルというものがありますよ。

今回は、GASでWebページを作るときにページのタイトルを設定する方法についてお伝えします。

では、行ってみましょう!

前回までのおさらいと今回のお題

まず、これまでのおさらいとして、前回までに作成したコードを紹介します。

HTMLファイル「index.html」はコチラ。

それで、サーバー側URLのリクエストを受ける関数doGetが記述されている「コード.gs」はコチラです。

その他、Bootstrapを導入するために、「css.html」「js.html」を作成しています。

これでWebページを表示してみると、こうなります。

GASのWebサイトでBootstrapのコンテナを適用

いい感じです。

今回のお題:ページのタイトルを設定したい

ページ自体はほぼ完成といってもいいのですが、ちょっと別の視点でみてみましょう。

ここです、ここ。

GASのWebページのタイトル

本来、ブラウザで開いたWebページのタブには、そのページを表現するためのアイコン(ファビコンといいます)と、タイトルが表示されることになっているんです。

ただ、GASで作ったページは、なんだかApps Scriptのアイコンと、URLがそのままという…ちょっと、そのまんますぎるんですね。

今回は、まずタイトルのほうを変更していきたいと思いますよ!

一般的なWebページ制作でのページタイトルの指定

一般的なWebページ制作の場合、ページのタイトルを設定するのは簡単です。

headタグ内に以下のようなtitleタグを設置すればOKなのです。

<title>ページのタイトル</title>

GASではhead内の記述のいくつかは無効になる

ただ、GASの場合はそうはいきません。

例えば、以下のようにindex.htmlのheadタグ内にtitleタグを記述しても、表示したWebぺージのタブには一切の変化もありません。

GASでWebページを作る場合、headタグ内の記述のいくつかは意味をなさずに無視されます。

今回のtitleタグもそうですし、後の記事で紹介するファビコンの設定や、metaタグによる指定もそうです。

大事なので、もう一度言います。

GASでWebページを作る場合、headタグ内の記述のいくつかは意味をなさずに無視されます。

じゃあ、どうすればいいんだ?って話ですよね。

setTitleメソッドでページのタイトルを設定する

安心してください。

GASのHTMLサービスのメソッドとして用意されているんです。

HtmlOutputオブジェクトに対して、setTitleメソッドを用いることで、ページのタイトルを設定することができます。

書式はコチラ。

HtmlOutputオブジェクト.setTitle(ページのタイトル)

「index.html」ではなくて「コード.gs」のほうをいじればいいんですね。

つまり、こんな感じです。

これでWebページを表示すると…

GASのWebページにページのタイトルを設定した

バッチリ、ページのタイトルが表示されていますね。

まとめ

以上、GASのWebページを作る際にページのタイトルを設定する方法についてお伝えしました。

headタグのいくつかの記述が無効になる…これを知らないと、ひたすらハマるので注意してほしいです。

ただ、タネがわかれば対処はそれほど難しくはなくて、ページタイトルを設定するためのsetTitleメソッドのように、代替策が用意されています。

次回、この流れでファビコンの設定の方法についてお伝えしますね。

GASで作成したWebページにファビコンを設定する方法
GASユーザーのためのHTML入門、簡単なWebページの作り方をお伝えしています。今回は、GASで作成したWebページにファビコンを設定する方法です。Googleドライブ内の画像の指定の仕方もありますよ。

どうぞお楽しみに!

連載目次:GASユーザーのための初めてのHTML・CSS講座

Google Apps ScriptではHTML・CSSを使ってWebページを作成し、公開することもできます。本シリーズでは、HTMLやCSSの全くの初心者が、GAS環境を利用してその基本的な知識を身に着けられるようにお手伝いしますよ!
  1. Google Apps Scriptで最も簡単なWebページを作成して公開する
  2. GASでWebページを表示するdoGet関数のスクリプトについて丁寧に解説
  3. GASで作成した最も簡単なWebページのHTMLコードについて丁寧に解説
  4. 【GASユーザーのためのHTML入門】よく使う基本のHTMLタグを紹介します
  5. 【GASユーザーのためのHTML入門】アンカーリンクを張るaタグの書き方
  6. GASのWebページにGoogleドライブ内の画像を挿入する方法
  7. GASで作ったWebページにCSSでスタイルをする最初の一歩
  8. 【GASユーザーのためのHTML入門】好きな要素にだけCSSでスタイルを適用する
  9. 【GASユーザーのためのHTML入門】範囲指定するだけの便利なdivタグとspanタグ
  10. GASでWebページを作るときにHTMLとCSSを別ファイルに記述する方法
  11. GASでWebページを作成する際にCSSフレームワークBootstrapを導入する方法
  12. GASのWebページのナビゲーションをBootstrapでスタイルする方法
  13. GASとBootstrapでWebページを超簡単にいい感じのレイアウトにする方法
  14. GASでWebページを作るときにページのタイトルを設定する方法
  15. GASで作成したWebページにファビコンを設定する方法
  16. GASで作成したWebページをスマホで表示させたいときのmetaタグviewportの設定

  投稿者プロフィール

タカハシノリアキ株式会社プランノーツ 代表取締役
株式会社プランノーツ代表、コミュニティ「ノンプロ研」主宰。1976年こどもの日生まれ。東京板橋区在住。「ITで日本の『働く』の価値を上げる!」をテーマに、VBA&GASの開発、講師、執筆などをしております。→詳しいプロフィールはコチラ
★ご依頼・ご相談はお気軽にどうぞ!→お問い合わせはコチラ
★フォロー頂ければ嬉しいです。

コメント