안녕하세요, 귤입니다.

! ! ! ! 트젠젠입니다만 굉장한 소식! ! ! !

2020년 1월 27일
App Maker 제공 종료를 위한 대응 안내
htps : // 꼬리 rt. 오, ぇ. 이 m/아/안수 r/9682494? p=아 m_안오 응원 t&ゔぃしt_いd=637157414793613981-426262357&rd=1

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

불행히도 2021 년 1 월 19 일에는 종료 될 것 같습니다 (눈물)
마이그레이션 대상은 AppSheet, App Engine 또는 Google 양식이라고합니다 ...

지우는 것은 참을 수 없기 때문에 기사는 남겨두고 둡니다만, 무언가의 실수가 아닌 한 도움이 되지는 않을 것입니다・・・

! ! ! ! 알림은 끝입니다! ! ! ! !

이번에는 사이트의 파비콘을 취득하여 이미지 위젯에 설정하는 방법을 써 보겠습니다.
아래 단계로 진행합니다.

앱 아래 준비

URL에서 도메인을 검색하는 코드 작성

favicon을 얻을 수있는 URL을 작성하는 코드를 작성한다

입력 값에서 favicon URL을 만들고 이미지 위젯에 설정할 코드를 작성합니다.

앱 아래 준비

Blank Application에서 앱을 만들고 NewPage에 위젯을 세 개 넣습니다.
스크립트에서 위젯을 참조하므로 이해하기 쉬운 이름을 지정합니다.






버튼 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의 완성입니다.

입력 값에서 favicon 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 생활을!