ねこじゃすり
猫を魅了する魔法の装備品！
【最新機種】GoPro hero11 Black
最新機種でVlogの思い出を撮影しよう！
[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット
防水暴風で耐久性抜群なので旅行で大活躍です！
レッドブル エナジードリンク 250ml×24本
翼を授けよう！
モンスターエナジー 355ml×24本 [エナジードリンク]
脳を活性化させるにはこれ！
Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK
メインデスクの横に置くのにぴったりなおしゃれな可動式ラック！
サンディスク microSD 128GB
スマホからSwitchまで使える大容量MicroSDカード！
スポンサーリンク
目次
アイコン画像を作りたい
レトロなやり方はやめたい
Webサイト制作をしていると、ほぼ100%の確率でfaviconを作成することになると思うのですが、このfaviconの作成方法について、以外と確立されていないのが現状です。
イラストレーターで作ったり、無料のWebツールで作成したりと手段は様々ありますが、画質が荒くなったりサイズごとの画像を用意しないといけなかったり課題がたくさんです。
Electronでもアイコン画像が必要
最近のデスクトップアプリの開発でよく使われているElectronでも、アプリアイコンが必要となっています。
Electron自体はマルチプラットフォームのアプリなのでWindowsでもMacでも動くのですが、それぞれ別のアイコンファイルを作成する必要があり、これもそれぞれ作らないといけないのが手間ですね。orz
npmのicon-genを使えば一発でまとめて作成
そんなあなたにオススメなのが、icon-genです！
こちらを使えば、コマンドベースで単一の画像ファイルからサクッと様々な形式のアイコン画像をまとめて作ることが出来ます。
マルチアイコンにも対応
さらに、このicon-genの強みとして、マルチアイコンの作成にも対応している点が挙げられます。
一つのSVGからコマンド一発でWindows/mac/ホームページのそれぞれのマルチアイコンを生成出来るのは最強すぎませんかね？！
手順
インストール
まずは今回使うicon-genを以下のコマンドでインストールしましょう。
|
1 |
npm install icon-gen |
以下のように依存パッケージ含めインストールが完了します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 |
└─┬ icon-gen@2.0.0 ├─┬ del@3.0.0 │ ├─┬ globby@6.1.0 │ │ ├─┬ array-union@1.0.2 │ │ │ └── array-uniq@1.0.3 │ │ ├─┬ glob@7.1.3 │ │ │ ├── fs.realpath@1.0.0 │ │ │ ├─┬ inflight@1.0.6 │ │ │ │ └── wrappy@1.0.2 │ │ │ ├── inherits@2.0.3 │ │ │ ├─┬ minimatch@3.0.4 │ │ │ │ └─┬ brace-expansion@1.1.11 │ │ │ │ ├── balanced-match@1.0.0 │ │ │ │ └── concat-map@0.0.1 │ │ │ ├── once@1.4.0 │ │ │ └── path-is-absolute@1.0.1 │ │ ├── object-assign@4.1.1 │ │ ├── pify@2.3.0 │ │ └─┬ pinkie-promise@2.0.1 │ │ └── pinkie@2.0.4 │ ├── is-path-cwd@1.0.0 │ ├─┬ is-path-in-cwd@1.0.1 │ │ └─┬ is-path-inside@1.0.1 │ │ └── path-is-inside@1.0.2 │ ├── p-map@1.2.0 │ ├── pify@3.0.0 │ └── rimraf@2.6.2 ├─┬ mkdirp@0.5.1 │ └── minimist@0.0.8 ├── pngjs-nozlib@1.0.0 ├─┬ svg2png@4.1.1 │ ├── file-url@2.0.2 │ ├─┬ phantomjs-prebuilt@2.1.16 │ │ ├── es6-promise@4.2.5 │ │ ├─┬ extract-zip@1.6.7 │ │ │ ├─┬ concat-stream@1.6.2 │ │ │ │ ├── buffer-from@1.1.1 │ │ │ │ ├─┬ readable-stream@2.3.6 │ │ │ │ │ ├── core-util-is@1.0.2 │ │ │ │ │ ├── isarray@1.0.0 │ │ │ │ │ ├── process-nextick-args@2.0.0 │ │ │ │ │ ├── string_decoder@1.1.1 │ │ │ │ │ └── util-deprecate@1.0.2 │ │ │ │ └── typedarray@0.0.6 │ │ │ ├─┬ debug@2.6.9 │ │ │ │ └── ms@2.0.0 │ │ │ └─┬ yauzl@2.4.1 │ │ │ └─┬ fd-slicer@1.0.1 │ │ │ └── pend@1.2.0 │ │ ├─┬ fs-extra@1.0.0 │ │ │ ├── graceful-fs@4.1.15 │ │ │ ├── jsonfile@2.4.0 │ │ │ └── klaw@1.3.1 │ │ ├─┬ hasha@2.2.0 │ │ │ └── is-stream@1.1.0 │ │ ├── kew@0.7.0 │ │ ├── progress@1.1.8 │ │ ├─┬ request@2.88.0 │ │ │ ├── aws-sign2@0.7.0 │ │ │ ├── aws4@1.8.0 │ │ │ ├── caseless@0.12.0 │ │ │ ├─┬ combined-stream@1.0.7 │ │ │ │ └── delayed-stream@1.0.0 │ │ │ ├── extend@3.0.2 │ │ │ ├── forever-agent@0.6.1 │ │ │ ├─┬ form-data@2.3.3 │ │ │ │ └── asynckit@0.4.0 │ │ │ ├─┬ har-validator@5.1.3 │ │ │ │ ├─┬ ajv@6.6.1 │ │ │ │ │ ├── fast-deep-equal@2.0.1 │ │ │ │ │ ├── fast-json-stable-stringify@2.0.0 │ │ │ │ │ ├── json-schema-traverse@0.4.1 │ │ │ │ │ └─┬ uri-js@4.2.2 │ │ │ │ │ └── punycode@2.1.1 │ │ │ │ └── har-schema@2.0.0 │ │ │ ├─┬ http-signature@1.2.0 │ │ │ │ ├── assert-plus@1.0.0 │ │ │ │ ├─┬ jsprim@1.4.1 │ │ │ │ │ ├── extsprintf@1.3.0 │ │ │ │ │ ├── json-schema@0.2.3 │ │ │ │ │ └── verror@1.10.0 │ │ │ │ └─┬ sshpk@1.15.2 │ │ │ │ ├── asn1@0.2.4 │ │ │ │ ├── bcrypt-pbkdf@1.0.2 │ │ │ │ ├── dashdash@1.14.1 │ │ │ │ ├── ecc-jsbn@0.1.2 │ │ │ │ ├── getpass@0.1.7 │ │ │ │ ├── jsbn@0.1.1 │ │ │ │ ├── safer-buffer@2.1.2 │ │ │ │ └── tweetnacl@0.14.5 │ │ │ ├── is-typedarray@1.0.0 │ │ │ ├── isstream@0.1.2 │ │ │ ├── json-stringify-safe@5.0.1 │ │ │ ├─┬ mime-types@2.1.21 │ │ │ │ └── mime-db@1.37.0 │ │ │ ├── oauth-sign@0.9.0 │ │ │ ├── performance-now@2.1.0 │ │ │ ├── qs@6.5.2 │ │ │ ├── safe-buffer@5.1.2 │ │ │ ├─┬ tough-cookie@2.4.3 │ │ │ │ ├── psl@1.1.29 │ │ │ │ └── punycode@1.4.1 │ │ │ └── tunnel-agent@0.6.0 │ │ ├─┬ request-progress@2.0.1 │ │ │ └── throttleit@1.0.0 │ │ └─┬ which@1.3.1 │ │ └── isexe@2.0.0 │ ├── pn@1.1.0 │ └─┬ yargs@6.6.0 │ ├── camelcase@3.0.0 │ ├─┬ cliui@3.2.0 │ │ ├─┬ strip-ansi@3.0.1 │ │ │ └── ansi-regex@2.1.1 │ │ └── wrap-ansi@2.1.0 │ ├── decamelize@1.2.0 │ ├── get-caller-file@1.0.3 │ ├─┬ os-locale@1.4.0 │ │ └─┬ lcid@1.0.0 │ │ └── invert-kv@1.0.0 │ ├─┬ read-pkg-up@1.0.1 │ │ ├─┬ find-up@1.1.2 │ │ │ └── path-exists@2.1.0 │ │ └─┬ read-pkg@1.1.0 │ │ ├─┬ load-json-file@1.1.0 │ │ │ ├─┬ parse-json@2.2.0 │ │ │ │ └─┬ error-ex@1.3.2 │ │ │ │ └── is-arrayish@0.2.1 │ │ │ ├── pify@2.3.0 │ │ │ └─┬ strip-bom@2.0.0 │ │ │ └── is-utf8@0.2.1 │ │ ├─┬ normalize-package-data@2.4.0 │ │ │ ├── hosted-git-info@2.7.1 │ │ │ ├─┬ is-builtin-module@1.0.0 │ │ │ │ └── builtin-modules@1.1.1 │ │ │ ├── semver@5.6.0 │ │ │ └─┬ validate-npm-package-license@3.0.4 │ │ │ ├─┬ spdx-correct@3.0.2 │ │ │ │ └── spdx-license-ids@3.0.2 │ │ │ └─┬ spdx-expression-parse@3.0.0 │ │ │ └── spdx-exceptions@2.2.0 │ │ └─┬ path-type@1.1.0 │ │ └── pify@2.3.0 │ ├── require-directory@2.1.1 │ ├── require-main-filename@1.0.1 │ ├── set-blocking@2.0.0 │ ├─┬ string-width@1.0.2 │ │ ├── code-point-at@1.1.0 │ │ └─┬ is-fullwidth-code-point@1.0.0 │ │ └── number-is-nan@1.0.1 │ ├── which-module@1.0.0 │ ├── y18n@3.2.1 │ └── yargs-parser@4.2.1 └── uuid@3.3.2 |
次に、以下のコマンドでpackage.jsonを作成しましょう。
対話は基本空欄でいいのでエンター連打でOKです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg> --save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. name: (icon-gen) version: (1.0.0) description: entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to /Users/blogenist/tmp/work/javaScript/npm/icon-gen/package.json: { "name": "icon-gen", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "icon-gen": "^2.0.0" }, "devDependencies": {}, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } Is this ok? (yes) yes |
すると、以下のようにpackage.jsonが生成されます。
|
1 2 3 |
. ├── node_modules # 省略 └── package.json |
package.jsonの中身はこんな感じ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ "name": "icon-gen", "version": "1.0.0", "description": "", "main": "script.js", "dependencies": { "icon-gen": "^2.0.0" }, "devDependencies": {}, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } |
スクリプトの準備
では、実際にicon-genを使うスクリプトを用意しましょう。
今回は同階層にあるblogenist_icon.svgと言うsvg画像から生成してみます。
まずは、script.jsと言うファイルを用意して以下の内容をコーディングしてください。
※${XXX}は適時変えてください
|
1 2 3 4 5 6 7 8 9 |
const icongen = require('icon-gen'); icongen('${iconにしたいファイル}', '${出力先ディレクトリ}', { report: true }) .then((results) => { console.log(results) }) .catch((err) => { console.error(err) }); |
出力先ディレクトリの作成
ここで指定したディレクトリが存在しない場合は自動生成されないため、エラーが発生するので存在するディレクトリを指定する必要があります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
> icon-gen@1.0.0 start /Users/blogenist/tmp/work/javaScript/npm/icon-gen > node script.js Error: Output directory is not found. at GenerateIcon (/Users/blogenist/tmp/work/javaScript/npm/icon-gen/node_modules/icon-gen/dist/lib/icon-generator.js:209:27) at Object.<anonymous> (/Users/blogenist/tmp/work/javaScript/npm/icon-gen/script.js:3:1) at Module._compile (module.js:570:32) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) at Module.runMain (module.js:604:10) at run (bootstrap_node.js:394:7) at startup (bootstrap_node.js:149:9) |
package.jsonに起動スクリプトの追加
次に、package.jsonに起動スクリプトを定義します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{ "name": "icon-gen", "version": "1.0.0", "description": "", "main": "script.js", "dependencies": { "icon-gen": "^2.0.0" }, "devDependencies": {}, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", // Json形式なのでカンマ(,)をお忘れなく "start": "node script.js" // 追加 }, "author": "", "license": "ISC" } |
実行
では、実際に以下のコマンドで実行をしてみましょう。
|
1 |
npm run start |
すると、以下のようなログが出始めて処理が開始されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
> icon-gen@1.0.0 start /Users/blogenist/tmp/work/javaScript/npm/icon-gen > node script.js Icon generator from SVG: src: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/blogenist_icon.svg dir: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons SVG to PNG: Create: /var/folders/qs/XXX/T/YYY/16.png Create: /var/folders/qs/XXX/T/YYY/24.png Create: /var/folders/qs/XXX/T/YYY/32.png Create: /var/folders/qs/XXX/T/YYY/48.png Create: /var/folders/qs/XXX/T/YYY/57.png Create: /var/folders/qs/XXX/T/YYY/64.png Create: /var/folders/qs/XXX/T/YYY/72.png Create: /var/folders/qs/XXX/T/YYY/96.png Create: /var/folders/qs/XXX/T/YYY/120.png Create: /var/folders/qs/XXX/T/YYY/128.png Create: /var/folders/qs/XXX/T/YYY/144.png Create: /var/folders/qs/XXX/T/YYY/152.png Create: /var/folders/qs/XXX/T/YYY/195.png Create: /var/folders/qs/XXX/T/YYY/228.png Create: /var/folders/qs/XXX/T/YYY/256.png Create: /var/folders/qs/XXX/T/YYY/512.png Create: /var/folders/qs/XXX/T/YYY/1024.png ICNS: Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/app.icns ICO: Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/app.ico ICO: Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon.ico Favicon: Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-32.png Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-57.png Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-72.png Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-96.png Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-120.png Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-128.png Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-144.png Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-152.png Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-195.png Create: /Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-228.png [ '/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/app.icns', '/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/app.ico', '/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon.ico', '/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-32.png', '/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-57.png', '/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-72.png', '/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-96.png', '/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-120.png', '/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-128.png', '/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-144.png', '/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-152.png', '/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-195.png', '/Users/blogenist/tmp/work/javaScript/npm/icon-gen/icons/favicon-228.png' ] |
確認
iconsディレクトリの中を見ると一通りのアイコンファイルが生成されています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
icons ├── app.icns ├── app.ico ├── favicon-120.png ├── favicon-128.png ├── favicon-144.png ├── favicon-152.png ├── favicon-195.png ├── favicon-228.png ├── favicon-32.png ├── favicon-57.png ├── favicon-72.png ├── favicon-96.png └── favicon.ico |
マルチアイコンにもしっかりなっていますね♪
終わりに
以上のように簡単にSVG画像から各種アイコン画像を生成することが出来ました。
もちろん、SVGだけでなくPNGからの生成も出来ますし、様々なオプションが備わっているので是非試してみてください♪
Travenist
Otakenist
