Cet article est de Kronos Co., Ltd. "~ Printemps 2020 ~ Je le ferai sans autorisation Calendrier de l'Avent" Ceci est l'article du 19ème jour.

introduction

Connaissez-vous le favicon de Google Agenda? スクリーンショット 2020-03-15 17.56.17.png

Cette image a été prise le 15 mars, mais en fait, les chiffres à l'intérieur peuvent changer en fonction de la date d'accès.

Donc, moi-même j'ai déjà créé une application de type calendrier, je vais donc la présenter.

C'était comme ça.

スクリーンショット 2020-03-15 17.59.33.png

Oui, c'est la valeur par défaut. C'est fait avec ** Vue.js! !! !! !! C'est comme ressentir **. L'attrait de la technologie est important, mais c'est un peu pas cool en tant qu'application, alors je vais y remédier.

En regardant le calendrier Google avec les outils de développement, il semble que tous les modèles de favicon soient préparés de 1 à 31, donc je vais essayer de préparer tous les modèles et de changer l'affichage selon Google.

Préparez une image

Les outils utilisés

Google Colaboratory --Python 3.6.9 (version incluse dans Colaboratory)
PIL(Python Image Library) --ICOOON MONO (icône)

Préparer une image de base

Cette fois, je vais générer une image en superposant des nombres sur l'icône du calendrier dans ICOOON MONO. [Ici](https://icooon-mono.com/12567-%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC%E3%81 Utilisez l'icône% AE% E3% 83% 95% E3% 83% AA% E3% 83% BC% E3% 82% A2% E3% 82% A4% E3% 82% B3% E3% 83% B320 /) J'étais autorisé à le faire.

キャプチャ.PNG

La taille est 48x48 et la couleur est violette (rgb (121, 88, 214)) selon le thème de l'application.

Colaboratoire ouvert

Faites ressembler à l'image ci-dessous.

スクリーンショット 2020-03-15 18.23.25.png

Tout d'abord, téléchargez l'image de base. Cette fois, je l'ai téléchargé avec le nom base.png. Ensuite, créez un dossier pour stocker l'image traitée. Cette fois, j'ai créé un dossier appelé.

Lorsque vous êtes prêt, écrivons le code Python. Je fais des choses délicates pour mettre les chiffres au milieu.

`Code pour synthétiser des images`


from PIL import Image

#divers paramètres
IMAGE_WIDTH = 48
IMAGE_HEIGHT = 48
THEME_COLOR = (121, 88, 214)

#Créer en boucle de 1 à 31
for i in range(1, 32):
  #Numéro à afficher dans le favicon
  i_str = str(i)

  #Définir le nom et la taille de la police
  fnt = ImageFont.truetype('LiberationMono-BoldItalic', 25)
  #Obtenez la largeur et la hauteur des caractères pour calculer où placer les nombres
  w, h = fnt.getsize(i_str)

  #Chargez l'image de base
  im = Image.open('./base.png')
  draw = ImageDraw.Draw(im)
  #Synthétiser le texte avec l'image importée
  draw.text(
      #Si vous écrivez comme ça, il semble que vous puissiez le placer au milieu (seule la hauteur est affinée de 3px)
      xy=((IMAGE_WIDTH - w) / 2, (IMAGE_HEIGHT - h) / 2 + 3 ), 
      text=i_str, 
      fill=THEME_COLOR, 
      font=fnt
  )

  #sauvegarder./out/favicon01.Le nom du fichier est comme png
  im.save("./out/favicon{}.png ".format(i_str.zfill(2)))

À propos, vous pouvez utiliser la police en téléchargeant celle que vous aimez et en la téléchargeant sur Calaboratory, mais vous pouvez vérifier la police intégrée en exécutant le code suivant. Cette fois, je n'ai traité que des nombres, j'ai donc utilisé celui intégré.

`Code pour vérifier la police de Colaboratory`


import subprocess
 
res = subprocess.check_output("fc-list")
 
print(str(res).replace(":", "\n"))

Si tout se passe bien, l'image suivante doit être générée dans le dossier out. Téléchargez les images dans le dossier out. Avec Colaboratory, il semble que vous ne puissiez pas télécharger l'intégralité du dossier Vous pouvez facilement le télécharger en le compressant avec le code suivant.

`Emballez le dossier de sortie dans un zip`


import shutil

shutil.make_archive('./out', 'zip', root_dir='./out')

Incorporer dans les projets Vue

Placez l'image générée dans le dossier public de votre projet Vue.

Modifiez index.html. Ajoutez un script qui réécrit l'attribut href de la balise de lien qui définit le favicon.

`index.html`


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!--Partie supplémentaire-->
    <script>
      const faviconLink = document.querySelector("link[rel='icon']");
      //0 Obtenez la date remplie et le favicon01.Je génère une chaîne comme png
      faviconLink.href = `favicon${("0" + new Date().getDate()).slice(-2)}.png`
    </script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Ça fait du bien. (La satisfaction)

スクリーンショット 2020-03-15 18.56.02.png

Le reste consiste à créer et à déployer dans l'environnement de production. Toutes nos félicitations ...

Je pense ...

Lorsque j'y accède le lendemain (16), l'icône n'a pas changé depuis 15. Pourquoi…! J'ai pensé, et quand j'ai regardé l'index transpilé.html

`dist/index.html`


<!DOCTYPE html><html lang=ja><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><script>const faviconLink = document.querySelector("link[rel='icon']");
Ceci → faviconLink.href =  `favicon15.png`</script><link rel=stylesheet href=https://use.fontawesome.com/releases/v5.2.0/css/all.css><title>ad-calendar</title><link href=/css/app.9c57fa73.css rel=preload as=style><link href=/css/chunk-vendors.a4393e1d.css rel=preload as=style><link href=/js/app.ed32e83e.js rel=preload as=script><link href=/js/chunk-vendors.80e1df9b.js rel=preload as=script><link href=/css/chunk-vendors.a4393e1d.css rel=stylesheet><link href=/css/app.9c57fa73.css rel=stylesheet></head><body><noscript><strong>We're sorry but ad-calendar doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/js/chunk-vendors.80e1df9b.js></script><script src=/js/app.ed32e83e.js></script></body></html>

Il est fixé à la date à laquelle la construction a été exécutée. Si vous utilisez la notation de modèle JavaScript dans index.html, elle semble être fixée à la valeur au moment de l'exécution.

Finalement, je l'ai modifié comme suit et cela a fonctionné comme prévu.

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <script>
      const faviconLink = document.querySelector("link[rel='icon']");
      //Changé pour stocker dans une variable
      const now = new Date();
      const nowDate = ("0" + now.getDate()).slice(-2);
      // +Combiner des chaînes avec des opérateurs
      faviconLink.href = "<%= BASE_URL %>favicon" + nowDate + ".png ";
    </script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Cette fois, ça fait du bien. (Satisfait)

référence

https://qiita.com/agajo/items/90a29627e7c9a06ec24a https://www.tech-tech.xyz/drawtext.html https://icooon-mono.com/license/ https://stackoverflow.com/questions/1970807/center-middle-align-text-with-pil

J'ai généré beaucoup d'images comme le favicon du calendrier Google avec Python et je l'ai incorporé dans le projet de Vue