どうもこんばんは、みかんです。

！！！！とつぜんですがたいせつなおしらせ！！！！

2020年1月27日
App Maker の提供終了に向けた対応のご案内
https://support.google.com/a/answer/9682494?p=am_announcement&visit_id=637157414793613981-426262357&rd=1

??!???!?!?!???!?

残念ながら2021年1月19日には終了してしまうそうです(涙)
移行先はAppSheetかApp EngineかGoogleフォームだそうです・・・

消すのは忍びないので記事は残して置きますが、何かの間違いじゃ無い限り役に立つことはないでしょう・・・

！！！！おしらせはおわりです！！！！！

今回はサイトのファビコンを取得して画像ウィジェットにセットする方法を書いてみます。
下記ステップでやっていきます。

アプリの下準備
URLからドメインを取得するコードを書く
ファビコンを取得できるURLを作成するコードを書く
入力値からファビコン用URLを作成し、画像ウィジェットに設定するコードを書く

アプリの下準備

Blank Applicationからアプリを作成して、NewPageにウィジェットを3つ置きます。
スクリプトからウィジェットを参照するので、わかりやすい名前を付けておきましょう。

ボタンのonclickに「loadFavicon」という関数を書いておきます。

URLからドメインを取得するコードを書く

クライアントスクリプトを新規作成しましょう。
下記関数を追加します。

function getDomain(url) {
  return url.match(/^https?:\/{2,}(.*?)(?:\/|\?|#|$)/)[1];
}

渡したURLのドメイン部分だけを返す関数になります。

ファビコンを取得できるURLを作成するコードを書く

続けて、下記関数も追加します。

function getFaviconUrl(url) {
  return "http://www.google.com/s2/favicons?domain=" + getDomain(url);
}

このようなURLの末尾にドメインをつけたURLを作ると、そのドメインのfaviconを取ってきてくれるURLの出来上がりです。

入力値からファビコン用URLを作成し、画像ウィジェットに設定する処理を書く

必要な関数は出揃ったので、各ウィジェットと連動させましょう。下記のような関数を作ります。

function loadFavicon() {
  var uiRef = app.pages.NewPage.descendants;
  var url = uiRef.UrlBox.value;
  var faviconUrl = getFaviconUrl(url);
  uiRef.FaviconImage.url = faviconUrl;
}

ボタンを押された時に呼び出される想定の関数です。
特定のウィジェットを参照する方法はいくつかあるのですが、ここでは絶対参照方式を使っています。
長くなると見づらいので、一旦uiRefという名前で変数に持っておいてます。
入力値(URLを想定)を取ってきて、
favicon用のURLに変換し、
画像ウィジェットにセットしています。

説明のために、UrlBoxが空だったらとかURL形式じゃなかったらとかは無視しています。

動作確認

Previewで動作確認してみましょう。

以上です。良いApp Makerライフを!