前回の記事

前回の記事に続き、GASのHTMLを試しています。

GASで動的HTML②　HTML内でGoogleドライブ内の画像ファイルをダイナミックに表示させる。
https://qiita.com/jooji/items/b89ce338af359742e813

本記事でやること

Font Awesomeを使ってファビコンの設定をします。ついでにページタイトルも。

Font Awesomeの使い方
GASで作成したHTMLへファビコンの設定する方法
GASで作成したHTMLへタイトルを設定する方法

①Font Awesome

Font Awesome とは

Web用のSVG形式のアイコンを提供するサービスです。無料利用は利用できるアイコンが制限されていますが、それでも種類豊富なアイコンを利用できます。
アイコンはダウンロードすることもできます。

Font Awesome利用登録

サイトへアクセスします。
https://fontawesome.com/

アカウントを持っていない場合は、「Start for Free」をクリックします。

登録に利用するメールアドレスを入力します。

メールを確認しましょう。下のようなメールが来ていますのでリンクボタンをクリックします。

ログインパスワードを作成します。

登録に必要な情報を入力します。初めて利用する場合は、3番と4番の質問は未回答で大丈夫です。

図の赤枠部分にScriptタグのコードが発行されます。
このタグをHTMLに埋め込むことでFont Awesomeが利用できるようになります。コピーしておきましょう。

Font Awesomeの使い方

さて、好きなアイコンを探してみます。トップページから「icon」をクリックしアイコン一覧ページを表示します。

このアイコンを使うことにしました。「start using this icon」をクリックします。

アイコンのタグが表示されますのでコピーします。


  <head>
    <base target="_top">

    <!-- ①headタグに利用するためのタグを挿入-->
    <script src="https://kit.fontawesome.com/6af5a95155.js" crossorigin="anonymous"></script>

  </head>
  
  <body>
    <!-- ②アイコンを表示したい箇所にアイコンのタグを挿入 fa-5xはサイズを指定している。-->
    <i class="fas fa-ambulance fa-5x"></i>

サイズを変更したりCSSで色を変えたりも出来ます。詳細は「参考」のサイトなどで確認してください。

アイコンを表示することが出来ました。

②Font Awesomeのアイコンをファビコンとして設定する。

一般的なHTMLでは、ファビコンの設定の記述はHTMLのheadタグの中に<link rel=”icon” href=“/image/favicon.ico”>のような形で記述しますが、GASではこの方法は使えません。

GASコードのメソッドを使って設定します。

手順は下記です。

ファビコン用画像をGoogleDriveに保存する。
ファビコン用画像のリンクの共有をしてファイルidをコピーする。
GASの.setFaviconUrlメソッドにファビコン画像のURLを渡す。

勿論、Googleドライブ以外のファイルでも、Web上のアクセス可能な場所に保存されているファイルであれば問題ありません。

Font Awesomeの画像DL方法

アイコンページの下図のアイコンをクリックします。

ダウンロードしたらGoogleドライブの任意の場所に保存し、ファイルの共有を行い、ファイルIDをコピーしておきます。

GASコード


function doGet() {
  var html = HtmlService.createTemplateFromFile("index").evaluate()
  html.setFaviconUrl("https://drive.google.com/uc?id=[ファイルID]&.ico");
  return html;
}

リンクの共有で取得したURLはそのまま使うことが出来ません。上記のようなURLの形式で渡す必要がありますので注意が必要です。

拡張子を.svgとするとエラーになる。

Font Awesomeからダウンロードする画像は「.svg」という拡張子の形式の画像ファイルになります。これをこのままhtml.setFaviconUrl("https://drive.google.com/uc?id=[ファイルID]&.svg");のように.svgとして記述すると下図のエラーが出ます。

「ファビコンの画像形式に対応していないよ。」とのことです。これは.icoか.pngに書き換えることで設定可能となりました。（画像ファイルそのものをsvgからpngに変換する必要はありません）

③ページタイトルを設定する。

ページタイトルもtitleタグではなく、GASメソッドで設定します。


function doGet() {
  var html = HtmlService.createTemplateFromFile("index").evaluate()
  html.setFaviconUrl("https://drive.google.com/uc?id=[ファイルID]&.ico");
  html.setTitle("jojiのテストサイト");
  return html;
}

ファビコンとページタイトルの設定結果

図のように、ファビコンとページタイトルがブラウザのタブにて設定が出来ていることが確認出来ました。

GASでHTML

次回は表示したアイコンにCSSアニメーションを適用したいと思います。

GASで動的HTML① HTMLの中のJavascriptを実行して動的HTMLを作成する。(Dog API使う)
https://qiita.com/jooji/items/6227821eb5f9b48e2e87

GASで動的HTML②　HTML内でGoogleドライブ内の画像ファイルをダイナミックに表示させる。
https://qiita.com/jooji/items/b89ce338af359742e813

参考

（いつも隣にITのお仕事）
GASで作成したWebページにファビコンを設定する方法
https://tonari-it.com/gas-web-set-favicon/

（サルワカ）
【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう
https://saruwakakun.com/html-css/basic/font-awesome#san2