こんにちは、デザイナーの上松です。
アプリ制作というものは、プログラムにしても画像などのアセット制作においても非常に煩雑な作業が多いのではないでしょうか。
そこで今回は、日々の作業を少しでも効率化したい！という方に向けて、厳選したテクニックを紹介したいと思います。
主に以下のような方を対象にして書いてあります。
・プログラムを書いたことがある
・ターミナルもたまに触る
・モバイルアプリを作るために最近Macを触り始めた
お品書き
1. まずはショートカットを覚えよう!
2. 様々なアプリでショートカットを作成する
3. ホットコーナーで素早いオペレーションを！
4. Finderからターミナルを開く「cdto」
5. リファレンスを極める! 「Dash」
6. PNGを簡単小さく圧縮する!
7. エディタに迷ったらこれ! 作業を覆す「Sublime Text」
8. ターミナルで素早く技を繰り出す!
9. Finderからシェルコマンドを呼び出す、commandファイル
10. 画像周りをさくさく自動化! 「Image Magick」
1. まずはショートカットを覚えよう!
作業の基本はショートカットにあり!です。使うと使わないのではかなりの差がありますので、ぜひぜひ覚えてしまいましょう。
まずはショートカット記号です。
| ⌘ | Commandキー |
| ⌥ | Optionキー(Alt) |
| ⇧ | Shiftキー |
| ^ | Controlキー |
初めて見た時は、なかなか形とキーがマッチしませんでしたが、慣れるとすぐに読めるようになるので便利です。
以下使用頻度の高いショートカット（と一部マウス操作）です。
これだけは覚えておくと重宝します！
| ウィンドウ操作 | |
| ⌘+N | 新規ウィンドウ |
| ⌘+W | ウィンドウを閉じる |
| ⌘+Q | アプリを閉じる |
| ⌘+M | ウィンドウ最小化 |
| ⌘+H | アクティブのアプリを隠す |
| ⌘+⌥+H | アクティブのアプリ以外を隠す |
| スクリーンショット | |
| ⌘+⇧+3 | 画面全体のスクリーンショット |
| ⌘+⇧+4 | 部分スクリーンショット 最中にspaceでウィンドウ単位のスクリーンショット |
| OS X基本機能系 | |
| ^+Space | Spotlightを開く。^+Space後に、英語名でアプリを打ち込みEnterをするとランチャーのように使えます。これがあればDockに登録するのは最小限で済むスグレモノです。 |
| ^+→ ^+← | 仮想デスクトップの移動 |
| ⌘+⌥+D | Dockを隠す/表示 |
| ^+クリック | 右クリック。ペンタブ操作時は、サブボタンよりこっちのが早い場合もあります。 |
| Finder | |
| ⌘+ダブルクリック | フォルダを新規ウィンドウで開く |
| ⌘+1 ⌘+2 ⌘+3 | 左から、アイコン表示 / リスト表示 / カラム表示 |
| Enter | ファイル名を変更 |
| ⌘+D | ファイル・フォルダを複製 |
| ⌘+↑ ⌘+↓ | 一つ上の階層へ / 一つ下の階層へ |
| ⌘+O | 項目を開く |
| Space | QuickLookを開く |
| テキスト | |
| ⌘+O | ファイルを開く |
| ⌥+→ ⌥+← | 適当な単位でのカーソル移動。Shiftキーと合わせて、適度な単位で選択すると便利です。 |
| テキストをダブルクリック | 適当な単位で選択。 |
| Xcode | |
| ⌘+R | 実行 |
| ⌘+B | ビルド |
| ⌘+⇧+K | クリーン |
| ⌘+/ | コメントアウト |
| ⌘+] ⌘+[ | インデント |
| ⌘+t | タブを開く |
| ⌘+クリック | 定義に移動 |
| Safari | |
| ⌘+r | リロード |
| ⌘+1 ⌘+2 ... | ブックマークバーにあるリンクを開く。Googleやグループウェアを割り当てておくと大変便利です。 |
| ⌥+Enter | 現在のURLをダウンロードする。画像や動画などを直接開いて使うとさくさく保存できます。 |
2. 様々なアプリでショートカットを作成する
よく使う機能なのにショートカットがない！という場合に使えるテクニック。
特に、ショートカットの設定が無いアプリに使えます。
環境設定のキーボードの中にあります。
キーボードショートカットのタブを開き、アプリケーションをクリック後、+ボタンから追加できます。
3. ホットコーナーで素早いオペレーションを！
Mission Controlの中のホットコーナーにあります。
マウス・ペンタブ派向けです。デスクトップなどを表示させるときに素早くできる上、操作に迷いにくいのがメリットです。
また、Dashboardはデフォルトのままでは不便なので、このチェックを外してしまいましょう。
現在のデスクトップの上にオーバレイ表示させることができます。
4. Finderからターミナルを開く「cdto」
いちいちドラッグするのが面倒くさい方へ。
Finderで開いているフォルダを、ターミナルで即座に開くことができるようになります。
cdto
http://code.google.com/p/cdto/
ダウンロードして、アプリケーションフォルダに入れたら、
ドラッグしてFinderのツールバーに放り込みましょう。
これで、Finderからターミナルを開くことができます。便利！
5. リファレンスを極める! 「Dash」
iOS、C++、Cocos2d-x、PHPやHTML5、jQuery、OpenGLまでOK！素敵リファレンスツール、Dashです。
Dash
ダウンロードもボタンひとつで簡単です。
環境設定で、HUDモードにしておき、ショートカットを設定しておくといい感じです。
欲しい時にさっと現れて、エディタに戻るときにはさっと消えてくれます。
Googleで検索している方は、これを入れるだけで随分早くなるはずです。
6. PNGを簡単小さく圧縮する!
アプリ制作ではpngファイルをよく使いますが、Photoshopの圧縮でもなかなかファイルサイズが落ちないこともしばしば。
他のGUI系フリーウェアもあまりサイズダウンできません。
しっかりとサイズダウンをしてくれるツールとしては、Webサイトの「tinypng」（http://tinypng.org）もお勧めですが、いちいちアップロード・ダウンロードをするのが不便です。
そこで、プログラマらしくコマンドラインから圧縮できるツールをインストールしてしまいましょう。
24bitのPNGからだとおよそ1/3から1/4の圧縮が期待できます。
pngquant
http://pngquant.org
ソースが欲しい場合でなければ、「Binary for Mac OS X」からビルド済みのバイナリを落としてくる方法がお勧めです。
適当なフォルダ（Applicationsやパスが通っているフォルダ）へ移動して、以下のコマンドから呼び出します。
$ /path/to/pngquant ***.png
findコマンドと組み合わせて、ディレクトリ内のpngを一括でサイズダウンできます。
$ find . -type f | grep "png$" | xargs -I{} /path/to/pngquant -force {}
*-forceは上書きオプションです。
Automatorのサービスを作成機能と組み合わせると、Finderから右クリックで使うことができるようになります。
Automatorを立ち上げて、サービスを選び、以下の様な感じに。
*pngquantまでのパスは各自設定してください。
これで、Finderから以下のようにコマンドを実行できます。便利！
7. エディタに迷ったらこれ! 作業を覆す「Sublime Text」
エディタの選択肢はいくつかありますが、個人的におすすめはSublime Textです。
Sublime Text
http://www.sublimetext.com
簡単に説明すると、
・軽い上に多機能
・選択を拡張する機能が優秀
・（ソフト上で）パッケージをインストールして拡張可能、便利な拡張機能がいっぱい
文字列を選択して、⌘+Dで、次々と同じワードを選択して編集したり、
⌘+⇧+Lで行を選択して、複数行を一括に編集できるなど、ちょっと聞いただけでも便利そうな機能が目白押しです。
HTMLやCSSを高速に書くことのできる「ZEN Coding」の後継「Emmet」が使えることも好印象です。
8. ターミナルで素早く技を繰り出す!
ターミナルを使ってコマンドを打ち込むとき、複雑だったり長いかったり、打ち込むのは面倒だけどあちこちで使うコマンド、ってありませんか？
決まったファイルのrsync、gz2の圧縮・解凍、SSHでの接続、pngquantの一括圧縮などなど。
.bashrcにaliasを書いておくと、コマンドとオプション組み合わせなどの一文を、省略して繰り出すことができるようになります。
作り方は以下に。
・Macには.bashrcがデフォルトではないようなので作ります。
ターミナルを開いて、以下を入力。
$ cd ~ $ touch .bashrc
次に、vimで.bashrcにaliasを記述してみます。
$ vim .bashrc
画面が開いたら、「i」を押し、INSERTモードに切り替えてから以下を入力してみます。
alias hw='echo "Hello World"'
入力が終わったら「esc」を押してコマンドモードに戻し、「:w」で、保存、「:q」で終了します。
通常のターミナル画面に戻ったら
$ source ~/.bashrc
で、作成した.bashrcを反映させます。
ターミナルで「hw」と打ち込んで、Hello Worldと表示されれば成功です。
以下、よく使いそうなレシピです。
#SSHサーバに接続。 alias ssh-***='ssh -i /path/to/key.pem user@server' #フォルダ以下のpngを圧縮 alias pc='find . -type f | grep "png$" | xargs -I{} /path/to/pngquant -force {}' #フォルダ以下のwavをcafに変換 alias tocaf='find . -name '*.wav' -exec /usr/bin/afconvert -f caff -d ima4 {} \;'
9. Finderからシェルコマンドを呼び出す、commandファイル
Windowsでは.batとファイルに付けるだけでコマンドを実行してくれましたが、Macではちょっと複雑です。
しかし、commandファイルを作ることで、いちいちターミナルを起動する手間が省ける他に、
Dockから任意のコマンドを実行したり、複製して使いまわしたりすることができるなど利点が多いのです。
作るときは作業の流れ上、ターミナルから作成すると便利です。
*実行権を与えないと使用できないためです
$ touch myscript. command $ chmod +x myscript. command
*ドットの後のスペースは入力しないように気をつけてください。
作成されたファイルは、お好きなエディタで編集できます。
ちなみに、どこのフォルダにあっても、カレントディレクトリがホームディレクトリになってしまうので、
ほかのサイトでも語られているように、冒頭に
#カレントディレクトリに移動
cd dirname </span><span class="synPreProc">$0</span><span class="synSpecial">
を付けておくと幸せになれます。
10. 画像周りをさくさく自動化! 「Image Magick」
最後に紹介するのはImageMagickです。
こちらは、結構古くからあるコマンドラインツールですが、便利さは衰えていないので最後に紹介。
ターミナルから実行できるので、上記のテクニックと合わせることで、面倒な作業を手早く終わらせることができます。
大量にある画像のサムネイル化や、特定のサイズでの分割、余白の削除や仮画像の生成などができます。
本当に複雑なことはPhotoshopのアクションでやった方が早いですが、単純な作業はダントツでImageMagickです。
OS Xにインストールするにはちょっと手順が必要です。
・Xcodeをインストール
Xcodeをインストールしていない人はインストールして、コマンドラインツールを先にインストールしてください。
・MacPortsをインストール
様々なコマンドラインツールを手軽に導入・削除できるMacPortsをインストールします。
MacPorts
http://www.macports.org/install.php
上記サイトの「Mac OS X Package (.pkg) Installer」から、お使いのOSの文字をクリックしてpkgファイルをダウンロードしてインストールしてください。
・MacPortsを使ってImageMagickをインストール
上記作業が終わったら、ターミナルを開き、以下コマンドを入力します。
$ sudo port selfupdate
$ sudo port install ImageMagick
これでインストール完了です。
以下、よくあるサンプルです。
#フォルダ内のPNGファイルを70px以下のサムネイルにする find . -type f | grep "png$" | xargs -I{} convert -thumbnail 70 {} {}.thumbnail.png #とあるファイルを、256x256サイズで分解する convert -crop 256x256 source.png cropped.png #フォルダ内のPNGファイルを、画質60のJPEGに変換する find . -type f | grep "png$" | xargs -I{} convert -quality 60 {} {}.jpg
最後に
これですべてになります！いかがだったでしょうか？
私は面倒臭がりタイプです。そのため、以後もやりそうな単純作業が3分以上かかる場合はすぐに自動化を考えることを癖にしています。
上に紹介したテクニックをケースごとに当てはめれば、多くの面倒くさい作業を自動化して、本当に時間をかけたいことに時間を使うことができるようになります。
簡単便利に使いこなして、目指すは快速アプリ開発です！