GASで作成したWebページにファビコンを設定する方法


favicon

photo credit: scloopy favidrop via photopin (license)

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

GASユーザーのためのHTML入門、簡単なWebページの作り方をお伝えしています。

前回の記事はコチラ。

GASでWebページを作るときにページのタイトルを設定する方法
GASユーザーのためのHTML入門ということで、簡単なWebページの作り方を紹介しています。今回は、GASでWebページを作るときにページのタイトルを設定するsetTitleメソッドの使い方です。

GASのWebページにタイトルを設定する方法をお伝えしました。

さて、今回もその流れで、ファビコンについてお伝えしますよ。

つまり、GASではheadタグの記述のいくつかが無視されちゃうんですけど、ファビコンについてもそうなっちゃうので、GAS流の対策が必要なんですね。

ということで、GASで作成したWebページにファビコンを設定する方法をお伝えしていきます。

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

前回のおさらい

前回は、GASのWebページにページのタイトルを設定する方法でした。

HTMLファイルは以下の「index.html」です。

本来であれば、headタグ内にtitleタグを設定するのですが、GASの場合は、以下のように「コード.gs」内にsetTitleメソッドを仕込むんでしたね。

これで、ページを表示すると以下のような表示になります。

GASで作成したWebページ

ファビコンとは

先ほどのページですが、ブラウザのタブの部分をよく見ると、アイコンがGoogle Apps Scriptのものになっていますよね。

GASのWebページのデフォルトのファビコン

これはファビコンというのですが、GASで作成したWebページの場合、デフォルトではGASのアイコンが割り当てられます。

で、これは変更できるんです。

一般的なWebページ制作でのファビコンの指定

一般的なWebページの制作の場合、ファビコンを設定するには、headタグ内にlinkタグを使って、以下のように指定します。

<link rel=”shortcut icon” href=“ファビコン画像ファイルのURL”>

なんですが、GASのWebページの場合、ファビコンの記述もheadタグ内で無視されてしまいます。

なので、別の方法を使う必要があるのです。

setFaviconUrlメソッドでファビコンを設定する

GASのWebページでファビコンを設定するには、GASのHTMLサービスのメソッドを使います。

HtmlOutputオブジェクトに対して、setFaviconUrlメソッドを使います。

HtmlOutputオブジェクト.setFaviconUrl(ファビコン画像ファイルのURL)

では、navタグに指定している、Googleドライブ内の画像のURLを指定してみましょう。

しかし…以下のように、「このファビコンの画像形式はサポートされていません。」というメッセージが表示されるのみ…。

このファビコンの画像形式はサポートされていません

Googleドライブ内のファビコン画像の設定方法

そうなんです、Googleドライブ内のファイルを設定する場合、以前の記事で紹介した以下のURLはそのままでは使えません。

https://drive.google.com/uc?id={ファイルID}

というのも、GASの公式ドキュメントのsetFaviconUrlメソッドの引数の説明として以下のように書いてあります。

the URL of the favicon image, with the image extension indicating the image type
ファビコン画像のURL、画像の種類を示す画像の拡張子

どうやら、「画像の拡張子」を含めないと駄目のようです。

これ、実はすごく解決は単純で、指定するURLを以下のようにしてみましょう、

https://drive.google.com/uc?id={ファイルID}&.png

「&.png」を最後に付与しただけです。

こちらのURLを使うと…

GASのWebページでファビコンを設定

バッチリ、ファビコンが設定されましたね。

まとめ

以上、GASで作るWebページにファビコンを設定する方法についてお伝えしました。

また、Googleドライブ内の画像を指定する場合は、ちょっとしたテクニックが必要でしたので、抑えておいてくださいね。

まとめのコードとして、「コード.gs」を掲載しておきますね。

次回は、GASのWebページをスマホでも表示すべく、metaタグの設定についてお伝えします。

GASで作成したWebページをスマホで表示させたいときのmetaタグviewportの設定
GASユーザーのためのHTML入門、簡単なWebページの作り方についてお伝えしています。今回は、GASで作成したWebページをスマホで表示させたいときのmetaタグviewportの設定の方法についてです。

どうぞお楽しみに!

連載目次: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の設定

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

コメント