This article is from Kronos Co., Ltd. "~ Spring 2020 ~ I will do it without permission Advent Calendar" This is the article on the 19th day.

Introduction

Do you know the Google Calendar favicon? スクリーンショット 2020-03-15 17.56.17.png

This image was taken on March 15th, but in fact, the numbers inside may change depending on the date of access.

So I myself I made a calendar-like app before, so I will introduce it.

It used to be like this.

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

Yes, this is the default. I made it with Vue.js! !! !! !! It feels like **. The appeal of the technology is important, but it's a bit uncool as an app, so I'll fix it.

Looking at the Google calendar with the developer tools, it seems that all patterns of favicon are prepared from 1 to 31, so I will try to prepare all patterns and switch the display according to Google.

Prepare the image

Tools used

Google Colaboratory --Python 3.6.9 (version included in Colaboratory)
PIL(Python Image Library) --ICOOON MONO (icon)

Prepare a base image

This time, I will generate an image by overlaying numbers on the calendar icon in ICOOON MONO. [Here](https://icooon-mono.com/12567-%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC%E3%81 Use the% AE% E3% 83% 95% E3% 83% AA% E3% 83% BC% E3% 82% A2% E3% 82% A4% E3% 82% B3% E3% 83% B320 /) icon I was allowed to.

キャプチャ.PNG

The size is 48 x 48, and the color is purple (rgb (121, 88, 214)) according to the theme of the app.

Open Colaboratory

Make it look like the image below.

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

First, upload the base image. This time I uploaded it with the name base.png. Next, create a folder to store the processed image. This time I created a folder called out.

When you're ready, let's write the Python code. I do some tricky things to put the numbers in the middle.

`Code to synthesize images`


from PIL import Image

#various settings
IMAGE_WIDTH = 48
IMAGE_HEIGHT = 48
THEME_COLOR = (121, 88, 214)

#Create by looping from 1 to 31
for i in range(1, 32):
  #Number to display on favicon
  i_str = str(i)

  #Set Font name and size
  fnt = ImageFont.truetype('LiberationMono-BoldItalic', 25)
  #Get the width and height of the characters to calculate where to place the numbers
  w, h = fnt.getsize(i_str)

  #Load the base image
  im = Image.open('./base.png')
  draw = ImageDraw.Draw(im)
  #Synthesize text with the imported image
  draw.text(
      #If you write like this, it seems that you can place it in the middle (only the height is fine-tuned by 3px)
      xy=((IMAGE_WIDTH - w) / 2, (IMAGE_HEIGHT - h) / 2 + 3 ), 
      text=i_str, 
      fill=THEME_COLOR, 
      font=fnt
  )

  #Save./out/favicon01.The file name is like png
  im.save("./out/favicon{}.png ".format(i_str.zfill(2)))

By the way, you can use fonts by downloading your favorite fonts and uploading them to Calaboratory, but you can check the built-in fonts by executing the following code. This time I only dealt with numbers, so I used the built-in one.

`Code to check the font of Colaboratory`


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

If all goes well, the following image should be generated in the out folder. Download the images in the out folder. With Colaboratory, it seems that you can not download the entire folder You can easily download it by zipping it with the following code.

`Zip the out folder`


import shutil

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

Incorporate into Vue project

Place the generated image in the public folder of your Vue project.

Modify index.html. Add a script that rewrites the href attribute of the link tag that sets the 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">
    <!--Additional part-->
    <script>
      const faviconLink = document.querySelector("link[rel='icon']");
      //0 Get the filled date favicon01.I'm generating a string like 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>

It feels good. (Satisfaction)

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

The rest is to build and deploy to the production environment. Congratulations ...

I think ...

When I access the next day (16th), the icon hasn't changed from 15. why…! I thought, and when I looked at the transpiled index.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']");
This → 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>

It's fixed to the date when the build was executed. If you use JavaScript template notation in index.html, it seems to be fixed to the value at runtime.

Eventually, I modified it as follows and it worked as expected.

<!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']");
      //Changed to store in a variable
      const now = new Date();
      const nowDate = ("0" + now.getDate()).slice(-2);
      // +Concatenate strings with operators
      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>

This time it feels good. (Satisfied)

reference

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

I generated a lot of images like Google Calendar favicon with Python and incorporated it into Vue's project