2番煎じMEMO

「どこかで見たことあるよ」的な内容を中心に  Mac のことなど いろいろ

icnsファイルの作り方(Mac)

高解像度のRetinaディスプレイ登場以降、Mac で使われるアイコンの作り方は以前より複雑になり、用意する画像も多くなって面倒になりました。

僕はアイコンの元となる icnsファイルの作り方をよく忘れるので、自分なりの見解も含めてメモしておきます。

 

アイコン用の画像ファイルを用意する

下の表のように、アイコン用の画像ファイル(png)を各サイズ、それぞれのファイル名にして用意します。(すべてのサイズを用意しなくても icnsファイル は一応作れる)

( macOS Human Interface Guidelines: Designing App Icons より参考)

ファイル名+拡張子画像サイズ(pixel)dpi
icon_512x512@2x.png 1024 × 1024 144
icon_512x512.png 512 × 512 72
icon_256x256@2x.png 512 × 512 144
icon_256x256.png 256 × 256 72
icon_128x128@2x.png 256 × 256 144
icon_128x128.png 128 × 128 72
icon_32x32@2x.png 64 × 64 144
icon_32x32.png 32 × 32 72
icon_16x16@2x.png 32 × 32 144
icon_16x16.png 16 × 16 72

ファイル名の後ろに「@2x」が付くものはRetina用の画像。

ガイドラインにはdpiの指示はないけど、Apple純正のアプリケーションのアイコンの仕様では @2xが 144dpi、普通が 72dpi になっています。

 

iTunes のアイコンの例↓)

f:id:wakabamark_mac:20170402011835j:plain

 

またpngファイルのカラープロファイルsRGB が推奨されてます。

 

 

ちなみに、僕はアイコンを描くのに Sketch を利用しています。

Sketch ではpngファイルに出力すると72dpiで書き出されます。

僕は1024pxで描いて、それを「@2x」で2048px-72dpiのpngファイルに出力し、それを1024px-144dpiに縮小してアイコンの基本の画像としています。

 

それと Sketch で書き出したpngファイルのカラープロファイルは「一般RGB」です。これを sRGB に変更すると、かなり見た目の色が変わってしまうので原則「一般RGB」のまま使用しています。(強制ではなく「推奨」なので)

(一般RGB から sRGB に変更した画像サンプル↓)

f:id:wakabamark_mac:20170402023932j:plain

 

 

iconset フォルダを作成する

用意した画像ファイル群を1つのフォルダにまとめ、そのフォルダに拡張子「.iconset」を付け加えます。

このフォルダは QuickLook でアイコンファイルのように確認できます。

f:id:wakabamark_mac:20170402025436j:plain

 

 

 

 

iconutil コマンドで変換

目的の iconsetフォルダを内包するディレクトリに cd して iconutil コマンドで icnsファイルに変換します。

 

例えば「ピクチャ」フォルダに存在する「hoge.iconset」を icns ファイルに変換するならば、ターミナルなどで下のようにコマンドを実行します。

$ cd ~/Pictures

$ iconutil -c icns hoge.iconset

 

これで出来上がり。

 

 

もし、icnsファイル → iconsetフォルダ に変換するなら、下のように実行します。

$ iconutil -c iconset hoge.icns

 

 

参考

 Optimizing for High Resolution 

Macアプリの.icnsを作るときのメモ - Qiita

macOS Human Interface Guidelines: Designing App Icons

 

 

日本語名と英語名を併せ持つフォルダを作る(.localized ディレクトリを作る)

タイトルの意味がよくわからないかもしれないけど・・・。

例えばホームフォルダ内にあるフォルダの名前は

  • 書類 ←→ Documents
  • デスクトップ ←→ Desktop
  • ピクチャ ←→ Pictures
  • ミュージック ←→ Music

 こんな感じで日本語名と英語名を併せ持つようになっています。

これらは設定した言語環境によって名称表示の言語が変わってきます。システム環境設定の言語の設定で「English」を優先させるようにすれば、Finder でのこれらのフォルダ名の表示が英語表記に変わります。

 

自分で作成したファイルやフォルダの名前にも、上記のうような英語名も併せ持つフォルダを作りたい!なぜなら Quicksilver を使ってると日本語の名前のファイルやフォルダは検索しづらいので。

最初から「英語」もしくはアルファベットを使ったローマ字とかの名前をつければ済む話ですが、やっぱり日本語の名前の方がわかりやすくていいのです。

 

ずっと以前に「Create Localized Folder」というものがあったのですが、今はもう無いので検索してみると・・・

d.hatena.ne.jp

 

ここの 2. はシステムフォルダ内のファイルをいじるので、あまりやりたくない。なので1.の .localized ディレクトリを作る方法をターミナルとか使わないで真似してやってみましょう。(名前の後ろに「.localized」がくっつくけど)

 

 

例として

柴犬画像  ←→ shibainu_pics.localized

という日本語名・英語名を併せ持つフォルダを作っていきます。

① まず英語名でフォルダを新規作成

Finder で「shibainu_pics.localized」という名前のフォルダを新規作成(Finder上では「.localized」は省かれた状態で表示される)

f:id:wakabamark_mac:20170326015707j:plain

 

② .localized ディレクトリ内に「ja.strings」ファイルを作成

 テキストエディタで新規ファイルを作成し、内容を

"shibainu_pics" = "柴犬画像";

と入力します。

f:id:wakabamark_mac:20170326020150j:plain

テキストエディタCotEditor を使ってます)

 

 

これで保存ダイアログを開いて、「新規フォルダ」ボタンをクリックして、「shibainu_pics.localized」フォルダ内に「.localized」フォルダ(Finder上では不可視)を新規作成します。

そしてファイル名を「ja.strings」として保存。

f:id:wakabamark_mac:20170326021242j:plain

 

 ③ Finder 再起動して出来上がり

Finder を再起動すると、先ほどのフォルダ名の表記が変わります。

f:id:wakabamark_mac:20170326021733j:plain

こんな風に「柴犬画像」という日本語名で表示されるようになりました。(当然ながら言語設定で日本語を指定した場合)

 

Quicksilver でこのフォルダを見るとこんな感じ。↓

f:id:wakabamark_mac:20170326022333j:plain

名前の後ろに「.localized」が付くけど、日本語環境で使っている時には見えることもそうそう無いので、大して気になりません。

さあ、これで Quicksilver でフォルダ検索しやすくなりました。

めでたし、めでたし。

 

 

Quicksilver 再び

welcom

OSをクリーンインストール後、ぼちぼちと作業環境を再構築している最中で、 Quicksilver をインストールしました。

昔々アイデア次第でなんでもかんでも出来てしまう、この「Quicksilver」というアプリケーションにはまり、毎日のようにいじり倒していました。

 

久々に使ってみると、⌘command+英数(JISキーボードのみ)の呼び出しホットキーの裏技的な設定が未だ健在、懐かしい。

 spaceキー で階層移動・QuickLookの表示、⌘command+return で「Alternate Action」を実行、「Event Trigger」の追加など、僕の知らない新しい機能も追加されてました。

 

このアプリケーションを使う一番の理由は、この見た目がかっこいいから。

f:id:wakabamark_mac:20170319013404j:plain

 (インターフェイスプラグインを追加して変更可)

使い勝手もよく、手に馴染みます。

 

 

Blacktree による開発が止まってオープンソースになって以降、現在の Quicksilver は下記サイトからダウンロードできます。

qsapp.com

 

あえて書くけど Quicksilverドネーションウェア(寄付)です。「フリー」ではありません。最近いろいろ気になることがあるので・・・。

 

 

 Quicksilver とは?

初めての人にとっては「Quicksilver」って何者?となるので簡単に説明します。

ランチャであったり、ファイルブラウザであったり、Safari の履歴・ブックマークをブラウズできたり、AppleScriptの実行、コマンドの実行、iTunesのライブラリにアクセス・再生する(※)・・・などなど。

プラグインを追加インストールすることによって、様々な機能が追加されていくアプリケーションです。

 

(※)iTunesの環境設定で「iTunes ライブラリ XML をほかのアプリケーションと共有」する設定にしておく

 

 

最初に設定したホットキーで Quicksilver のウインドウを呼び出して操作していきます。

f:id:wakabamark_mac:20170319025327j:plain

Quicksilver のウインドウは

  • 1st Pane - Object(ファイルなど対象とするもの)
  • 2nd Pane - Action(行動)
  • 3rd Pane - Argument(引数)

の3つのペインによって構成されます。それぞれのペインで半角英数のキーボード入力で目的のものを選択していき、ペイン間のフォーカス移動は tab(or shift+tab) 、最終的に returnキー で実行します。

 

日本語でいえば

「(1stPane)〇〇を  (2ndPane)□□する  (3rdPane)△△で

の文章を Quicksilver 上で完成させて実行するようなものです。

 

 

 

Quicksilver の基本的な使い方の例

Quicksilver を呼び出して、例えば(半角英数入力で)「s」と入力します。

f:id:wakabamark_mac:20170319032544j:plain

1st Pane に Safari が表示されて、このまま returnキー で実行すれば、Safari が起動します。

もし 1st Pane に他のものが表示されていたなら、「safa」とか入力して Safari を選択します。また下のサブウインドウを or などでブラウズして選択することもできます。

 

このあたりの使い勝手は学習して、入力した文字に対してよく使うものがより上位に表示されるようになっていきます。(省略語を設定することも可)

 

spaceキー or or /Safari の履歴やブックマークをブラウズしていくこともできます。

(要 Safari Plugin)

f:id:wakabamark_mac:20170319034136j:plain

 webページを選択して space もしくは ⌘command+Y でQuickLook表示します。

 

 

 

いろいろショートカットキーなど

 ⌘command+esc(サービス)

Finderで選択しているファイルや、最前面のアプリケーションで選択しているテキストを1stPaneにピックアップした状態で、Quicksilver を呼び出します。

f:id:wakabamark_mac:20170319040514j:plain

 

似たようなショートカットキーに、Quicksilver のウインドウを表示しておいてから ⌘command+G で Finderで選択中のアイテムをピックアップできます。

 

 

 

「=」を入力してから計算式を入力

f:id:wakabamark_mac:20170319041510j:plain

(要 Calculator Plugin)

 

 

 

「.」ピリオドを入力してからテキスト入力

f:id:wakabamark_mac:20170319041757j:plain

 

 

 

「,」コンマで複数アイテムを選択

f:id:wakabamark_mac:20170319042605j:plain

 

 

 

 不可視ファイルやパッケージ内をブラウズ

 ⌥option+ でフォルダ内の不可視ファイルを見ることができたり、アプリケーションなどのパッケージ内のフォルダにアクセスできます。

f:id:wakabamark_mac:20170319043101j:plain

 

 

 

Command Object を使う

例えば「システムをスリープさせるスクリプト」を実行するように Quicksilver で下のように表示する。

f:id:wakabamark_mac:20170319044910j:plain

ここで ⌃control+return を入力すると、Command Object と呼ばれるものになり、 『「システムをスリープさせるスクリプト」を実行すること』が 1stPaneに集約されてウインドウを開き直します。

 

こうやって例えば「Run after Delay...」Action で実行したりします。

f:id:wakabamark_mac:20170319045847j:plain

 

 

 

こんな感じで Quicksilver には、まだまだいっぱい機能があります。

 ほんとにキリがないので、どこかに詳しいサイトはないかなあー?

・・・・

・・・

・・

あった!

わかばマークのMacの備忘録 : Quicksilver

( ´_ゝ`)。o0(わざとらしい・・・)

 

まあ古いけど、内容は似たようなものです。

 さあ、また Quicksilver 使っていきましょう。