Google Drawingsでアイコンを作ってみる

ここではAndroidのホーム画面に表示するアイコンを192px ✕ 192pxで作っていきます

• Drawingsで新規ファイルを作る
• サイズを設定する
• 図形を描く
• Googleドライブにpngとして保存する
• 画像のURLを取得する

ということを順番にやっていきます

---

Drawingsで新規ファイルを作る

1. 新規でDrawingsのファイルを開きます
https://docs.google.com/drawings/create

サイズを設定する

2. 画像サイズを設定するために
ファイル > ページ設定 を選択します



3. ページ設定画面で「カスタム」を選択します



4. 「ピクセル」を選択します



5. 192 ✕ 192に設定して「OK」をクリックします

図形を描く

6. 挿入 > 図形 から好きな図形を選択します
この例では 吹き出し > 角丸四角形吹き出し を選択しています



7. 左上からマウスを押しながら右下に移動して
適当な大きさの吹き出しを作ります



8. 塗りつぶしの色のアイコンをクリックして好きな色を選択します



9. 枠線の色のアイコンをクリックして好きな色を選択します



10. 枠線の太さのアイコンをクリックして好きな太さを選択します



11. 図形をダブルクリックしてテキストを入力します



12. 文字サイズを任意で変更します



13. テキストの色のアイコンをクリックして好きな色を選択します



14. フォントアイコンから好きな文字を選択します



15. これでアイコンは完成



16. ファイル名を任意の名前に変更します

Googleドライブにpngとして保存する

17. ダウンロードするために
ファイル > 形式を指定してダウンロード > PNG 画像（.png）
を選択します



18. 保存場所を決めて「保存」をクリックします



19. ダウンロード完了後
ブラウザでGoogleドライブを開いて「新規」をクリックします



20. 「ファイルのアップロード」を選択します



21. 先程ダウンロードしたファイルを選択して「開く」をクリックします



22. Googleドライブにアップロードされます

画像のURLを取得する

23. 右上にカーソルを移動して︙から「共有」を選択します

24. 共有設定画面の右下の「詳細設定」をクリックします



25. 共有リンクが表示されます

https://drive.google.com/file/d/ここがこのファイルのID/view?usp=sharing


26. これをファビコンとして使うには
HtmlServiceでファビコンを設定したい で .setFaviconUrl('https://drive.google.com/uc?id=ID&.png') にIDを設定します

---

参考

setFaviconUrl(iconUrl)
https://developers.google.com/apps-script/reference/html/html-output#setFaviconUrl(String)

Displaying files (e.g. images) stored in Google Drive on a website
https://stackoverflow.com/questions/10311092/displaying-files-e-g-images-stored-in-google-drive-on-a-website/13715473

マニフェストで少なくとも 192px のアイコンを定義する
https://developers.google.com/web/tools/lighthouse/audits/manifest-contains-192px-icon?hl=ja

Favicon
https://ja.wikipedia.org/wiki/Favicon