Cómo Configurar Un Favicon en Una Página Web Creada Por GAS

18/3/2019 Cómo configurar un favicon en una página web creada por GAS
Cómo configurar un favicon en una página web creada por GAS
Crédito de la foto: scloopy
Hola amigos!
Es Takahashi ( @ ntakahashi0505 ).
Presentamos HTML para usuarios de GAS, cómo hacer una página web simple .
El último artículo está aquí.
Cómo configurar el título de la página al crear una página web con GAS
Una introducción a HTML para usuarios de GAS muestra cómo crear una página web simple. Esta vez es cómo usar el método setTitle p
tonari-it.com
Te dije cómo configurar el título en la página web de GAS.
Por cierto, voy a hablar sobre el favicon de la misma manera esta vez .
En otras palabras, algunas de las descripciones de la etiqueta de cabecera se ignoran en GAS, pero esto también se aplica a los favicons, por lo que es necesar
Por lo tanto, cómo configurar el favicon de la página Web que creó en el gas continuará dirá.
Vamonos
Revisión de la última vez.

La última vez fue establecer el título de la página en la página web de GAS.
El archivo HTML es "index.html" a continuación.
index.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <base target="_top">
5 <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
6 </head>
7 <body>
8 <nav class="navbar navbar-light bg-light">
9 <a class="navbar-brand" href="https://tonari-it.com">
10 <img src="https://drive.google.com/uc?id=1jDk8h0egYxfKbTTX0YNs-cTHd93Xi68O" width="30" height="30" alt="いつも隣にITのお仕事ロゴ">
11 いつも隣にITのお仕事 
12 </a>
https://tonari-it.com/gas-web-set-favicon/ 1/5
13 </nav>
14 <div class="jumbotron">
15 <h1>GASのおすすめ記事⼀覧</h1>
16 いつも隣にITのお仕事からGASのおすすめの記事をピックアップしています。
17 </div>
18 <div class="container">
19 <h2>連載⽬次：超初⼼者向けGASでBotを作りながら基礎を学ぶ</h2>
20 Google Apps Script（GAS）をはじめるためのメリットは⼭程ありますが、何を作ったらいいの？と悩んでしまうこともありますよね。そんな時に、おすすめした
21 <ol>
22 <li><a href="https://tonari-it.com/gas-script-editor/">【初⼼者向けGAS】本当の最初の⼀歩！スクリプトエディタでプロジェクトを開く</a></li>
23 <li><a href="https://tonari-it.com/gas-script-create-save-run/">【初⼼者向けGAS】はじめてのスクリプトを作成し、保存し、実⾏する</a></li>
24 <li><a href="https://tonari-it.com/gas-variable-data-type/">【初⼼者向けGAS】プログラミングに必須の変数の使い⽅とデータ型について</a></li>
25 <li><a href="https://tonari-it.com/gas-logger-log/">【初⼼者向けGAS】ログを表⽰するLogger.logの使い⽅</a></li>
26 <li><a href="https://tonari-it.com/gas-script-approval/">【初⼼者向けGAS】スクリプト実⾏時の「承認」でびっくりしないために</a></li>
27 </ol>
28 <p >（以下略）</p>
29
30 <h2>連載⽬次：GASユーザーのための初めてのHTML・CSS講座</h2>
31 Google Apps ScriptではHTML・CSSを使ってWebページを作成し、公開することもできます。本シリーズでは、HTMLやCSSの全くの初⼼者が、GAS環境を利⽤し
32 <ol>
33 <li><a href="https://tonari-it.com/gas-html-web-page/">Google Apps Scriptで最も簡単なWebページを作成して公開する</a></li>
34 <li><a href="https://tonari-it.com/gas-web-doget-html-output/">GASでWebページを表⽰するdoGet関数のスクリプトについて丁寧に解説</a></li>
35 <li><a href="https://tonari-it.com/gas-html-tag/">GASで作成した最も簡単なWebページのHTMLコードについて丁寧に解説</a></li>
36 </ol>
37 </div>
38 <?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
39 </body>
40 </html>
Normalmente, la etiqueta del título se establece en la etiqueta principal, pero en el caso de GAS, el método setTitle se inserta en "code.gs" de la siguiente man
1 <head>
2 <base target="_top">
3 <title>いつも隣にITのお仕事-GASのおすすめ記事⼀覧</title>
4 <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
5 </head>
Ahora cuando veas la página verás algo como esto:
Con favicon
Como viste en la página anterior, si miras detenidamente la pestaña del navegador, el ícono es el de Google Apps Script.
Esto se denomina favicon , pero para las páginas web creadas con GAS, el icono de GAS se asigna de forma predeterminada.
Bueno, puedo cambiar esto.
Especificando un favicon en la producción general de páginas web.

Para la creación de una página web general , para establecer el favicon , use la etiqueta de enlace en la etiqueta de encabezado y especifique lo siguiente.
 <link rel = "icono de acceso directo" href = "URL del archivo de imagen de favicon" >
¿Qué es, el caso de la página Web del SAG, será ignorado en la descripción del favicon también etiqueta de la cabeza.
Así que necesitamos usar otro método.
Establece el favicon con el método setFaviconUrl

Para configurar el favicon en la página web de GAS, use los métodos de servicio de GAS HTML.
Utilice el método setFaviconUrl en el objeto HtmlOutput .
 Objeto HtmlOutput. SetFaviconUrl (URL del archivo de imagen favicon)
Ahora, especifiquemos la URL de la imagen en Google Drive, que se especifica en la etiqueta de navegación.
コード.gs
1 function doGet() {
2 var htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();
3 htmlOutput
4 .setTitle('いつも隣にITのお仕事-GASのおすすめ記事⼀覧')
5 .setFaviconUrl('https://drive.google.com/uc?id=1jDk8h0egYxfKbTTX0YNs-cTHd93Xi68O');
6 return htmlOutput;
7 }
Sin embargo ... solo se muestra el mensaje "Este formato de imagen de favicon no es compatible" como se muestra a continuación ...
Cómo configurar una imagen de favicon en Google Drive
Así es, al configurar los archivos en Google Drive, las siguientes URL introducidas en el artículo anterior no se pueden usar como están.
 https://drive.google.com/uc?id={file ID}
Por ejemplo, está escrito a continuación como una explicación del argumento del método setFaviconUrl del documento oficial de GAS.
“la dirección URL de la imagen favicon, con la extensión de imagen que indica el tipo de imagen
URL de la imagen favicon, extensión de imagen que indica el tipo de imagen
Aparentemente, parece inútil a menos que incluyas la "extensión de imagen" .
Esta es realmente una solución muy simple, vamos a especificar la URL a continuación,
 https://drive.google.com/uc?id={file ID} &. png
Acabo de añadir "&. Png" al final .
Si usas esta URL ...
Un lote, favicon se ha establecido.
Resumen
O más, y cómo configurar un favicon a una página web para que en el gas era informarle sobre.
Además, al especificar una imagen en Google Drive, se requería una pequeña técnica, así que manténgala presionada.
Como código de resumen, se publica "code. Gs".
コード.gs
1 function doGet() {
2 var htmlOutput = HtmlService.createTemplateFromFile("index").evaluate();
3 htmlOutput
4 .setTitle('いつも隣にITのお仕事-GASのおすすめ記事⼀覧')
5 .setFaviconUrl('https://drive.google.com/uc?id=1jDk8h0egYxfKbTTX0YNs-cTHd93Xi68O&.png');
6 return htmlOutput;
7 }
La próxima vez, contaré la configuración de la metaetiqueta para mostrar la página web de GAS con un teléfono inteligente.
Configuración de la ventana metaetiqueta cuando desee visualizar una página web creada por GAS con
Presentamos HTML para usuarios de GAS y cómo crear una página web simple. Esta vez, sobre el método de configuración de la ventan
tonari-it.com
¡Por favor espérenlo!
Serie de contenidos: El primer curso de HTML / CSS para usuarios de GAS.

Google Apps Script también puede crear y publicar páginas web utilizando HTML y CSS. En esta serie, ayudaremos a todos los principiantes de HTML y CSS a
1. Crea y publica la página web más sencilla con Google Apps Script
2. Explique cuidadosamente el script de la función doGet que muestra la página web con GAS.

3. Explique cuidadosamente el código HTML de la página web más simple creada por GAS.
4. [Introducción a HTML para usuarios de GAS] Introduzca las etiquetas HTML básicas que usa con frecuencia
5. [Introducción a HTML para usuarios de GAS] Cómo escribir una etiqueta con un enlace de ancla
6. Cómo insertar una imagen en Google Drive en la página web de GAS
7. El primer paso para diseñar CSS con páginas web creadas por GAS
8. 【Introducción a HTML para usuarios de GAS】 Aplique estilos con CSS solo a elementos favoritos
9. 【Introducción a HTML para usuarios de GAS tags Convenientes etiquetas div y etiquetas de rango para solo especificar el alcance
10. Cómo escribir HTML y CSS en archivos separados al crear una página web con GAS
11. Cómo introducir CSS framework Bootstrap al crear una página web con GAS
12. Cómo el estilo de navegación de la página web de GAS con Bootstrap
13. Cómo hacer una página web muy fácil y un buen diseño con GAS y Bootstrap
14. Cómo configurar el título de la página al crear una página web con GAS
15. Cómo configurar un favicon en una página web creada por GAS
16. Configuración de la ventana metaetiqueta cuando desee visualizar una página web creada por GAS con un teléfono inteligente
Perfil de colaborador
Takahashi Shinoaki
Co., Ltd. Director de Representantes de Notas del Plan
Presidente de Plan Notes Co., Ltd., jefe de la comunidad "instituto de investigación no profesional" Nacido en 1976 en el día del niño. Vive en Tokio, Ita
detallado
★ ¡No dude en contactarnos si tiene alguna solicitud o consulta! → Haga clic aquí para consultas
★ Me alegro si puede seguir.
     
Ultima publicación
2010.03.18
Resumen del informe de actividades de la
"un grupo de estudio de habilidades para no programadores"
Evento de la
comunidad
la
comunidad
2010.03.17 ¡Entra a la
comunidad y rompe la
Evento de trampa
! La historia de que el valor es realmente alto.
2010.03.12 ¡El
primer aterrizaje en Sendai! Mantenido "Skills up study para no programadores y Mokumoku"
Evento comunitario
2017.03.03
【¡Felicitaciones! Blog 4º aniversario] Pensaremos en el futuro y expondremos sobre fotovoltaica, ingresos, el número de solicitudes hasta el momento.
WordPress · blog

Cómo Configurar Un Favicon en Una Página Web Creada Por GAS

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Cómo Configurar Un Favicon en Una Página Web Creada Por GAS

Enviado por

Direitos autorais:

Formatos disponíveis

18/3/2019 Cómo configurar un favicon en una página web creada por GAS

Cómo conﬁgurar un favicon en una página web creada por GAS

Crédito de la foto: scloopy

El último artículo está aquí.

Te dije cómo conﬁgurar el título en la página web de GAS.

Revisión de la última vez.

El archivo HTML es "index.html" a continuación.

Ahora cuando veas la página verás algo como esto:

Bueno, puedo cambiar esto.

Especiﬁcando un favicon en la producción general de páginas web.

Así que necesitamos usar otro método.

Establece el favicon con el método setFaviconUrl

Utilice el método setFaviconUrl en el objeto HtmlOutput .

 Objeto HtmlOutput. SetFaviconUrl (URL del archivo de imagen favicon)

Cómo conﬁgurar una imagen de favicon en Google Drive

Aparentemente, parece inútil a menos que incluyas la "extensión de imagen" .

 https://drive.google.com/uc?id={ﬁle ID} &. png

Acabo de añadir "&. Png" al ﬁnal .

Si usas esta URL ...

Un lote, favicon se ha establecido.

Como código de resumen, se publica "code. Gs".

¡Por favor espérenlo!

Serie de contenidos: El primer curso de HTML / CSS para usuarios de GAS.

Você também pode gostar