好きなWebサイトをMacのアプリ(.app)にする方法

Takashi Fujisakiのアバター
3550文字

こんにちは。
僕は「Readability」という、後で読む系のサービスを利用しています。iPhoneやiPadには専用のiOSアプリがあってデバイスごとに最適な形で閲覧できます。で、Macの場合はWebブラウザを介して使う、いわゆるWebアプリという形で利用するようになってます。つまり、ネイティブなアプリ(.app)は用意されていませんです。

ただ、普段iPadなんかで使ってると、いざMacで使おうと思った時についついLaunchPadの中でアプリのアイコンを探してしまったり。ないなーと思ってたらそもそもアプリないじゃないかと気づいて、ブラウザを開き、URLを入力して開く。というアレです。何度やってもまたやってしまうという。

というわけで、ReadabilityのアプリアイコンがLaunchPadの中にあって、それをクリックするとそのWebサイト(Webアプリ)が開く、というものを実現すべく、Readabilityを例に、超簡易Mac版オリジナルアプリの作成方法を紹介です。

とりあえずReadabilityはこちら

[applink id=460156587 title=”Readability™”]

A Free Web & Mobile App for Reading Comfortably — Readability

Read Comfortably— Anytime, Anywhere READABILITY turns any web page into a clean view for reading now …

Automatorでアプリの機能を作成

icn_Automator_128

さて、ここからアプリ作成です。

Mac標準の「Automator」というアプリを利用して作成します。Automatorとは、Macの持つさまざまな機能を組み合わせて、独自のアプリケーションやサービスが作成できるすぐれもの。

とりあえず、LaunchPadまたはアプリケーションフォルダなどからこのロボアイコンを探してAutomatorを起動。
僕の環境だと、LaunchPadの「その他」っていうフォルダに入ってるけど、最初っから入ってたのか自分で入れたのかは覚えてませんですはい。

スクリーンショット_2013-03-18_9.56.34

Automatorが起動したら、「アプリケーション」を選んで「選択」
スクリーンショット_2013-03-18_10.16.56

ここから、これから作るアプリに持たせる機能を組み合わせていきます。

ちなみに、作ろうとしてるアプリは

「http://www.readability.com」にアクセスする

という実に単純な仕組みのものです。

流れとしては、

  1. というURLを取得する
  2. 取得したURLにアクセスする

となり、これらを実行するための機能を作成するわけですはい。

Automatorのウィンドウ左側の「ライブラリ」に、さまざまな機能がカテゴリ分けされて並んでます。今回はインターネットに関連する機能を実装していくので、「インターネット」というカテゴリ内に機能が全部あります。

まずは、「インターネット」→「指定されたURLを取得」をダブルクリック。すると、右側にアイテムが追加されるので、「http://www.apple.com/jp」となっているURLをダブルクリックして入力モードにしたら「http://www.readability.com」に変更します。

スクリーンショット_2013-03-18_10.29.50

次に、「インターネット」→「Webページを表示」をダブルクリックして追加。「Webページを表示」の文字を右側の欄にドラッグしても追加できるよ。

スクリーンショット_2013-03-18_10.36.57

さて、これでアプリの機能の作成は完了。次は「Readability.app」という名前で保存。
まず名前を変更しておきましょう。

ウィンドウの上の「編集済み」てなってるあたりをクリックすると、このアプリの名前を変更できます。ここで「Readability」に変更。

スクリーンショット_2013-03-18_10.41.43

ダイアログが出てくるので、ひとまずデスクトップにでも保存しときましょう。

デスクトップに、ロボアイコンの「Readability.app」が出てきたらアプリ本体の作成は完了!これを起動してReadabilytyのWebサイトが表示されたらOKです。

アイコンをReadabilityのアイコンに変更

さて、このままじゃReadabilityのアプリだと分かりにくいので、アプリのアイコンを変更。赤い座椅子のアイコンにしたいと思います。

親切なことにReadabilityのアイコンは公式で用意されている

Readabilityのサイトの左上のアイコンを副ボタンクリックすると、アイコンダウンロードができます。しかも、psd,ai,pngの3形式入り。うーん親切。

ちなみに、ひとまず座椅子マークのpngを作成して、その後でアイコンで使える形式に変換します。

zipなので解凍しましょう。Adobe製品を持ってる方は、aiで編集して座椅子のアイコンを作って下さい。aiなら、512px × 512pxくらいにしとくといいかも知れません。

Adobe持ってない方は、Mac標準のプレビューアプリで編集しましょう。

「Readability_logo.png」をダブルクリックして「プレビュー」アプリで開く。

上の方にある鉛筆マークをクリックすると、編集用のメニューバーが出てきます。

スクリーンショット_2013-03-18_11.12.01

「長方形で選択」をクリックして、座椅子アイコンを選択。できるだけギリギリで囲う感じで。

スクリーンショット_2013-03-18_11.08.04-2

選択ができたら、「選択範囲で切り抜き」のボタンをクリック。これで座椅子アイコンの画像が完成。デスクトップに保存しときましょう。

上の「編集済み」をクリックして「移動」→デスクトップを選択して→「移動」
スクリーンショット_2013-03-18_11.21.32

これでひとまず必要な素材は完成。あとは、アプリのアイコンを今つくったこの画像に変更する作業です。

ここで、Readability.appを副ボタンクリック→「パッケージの内容を表示」をクリック。すると、アプリの中身が表示されます。.app形式のアプリって、要はフォルダみたいなもんで、実際は必要なファイルが中に入ってるわけです。

スクリーンショット 2013-03-18 11.26.23

で、「Contents/Resources」と開くと、「AutomatorApplet.icns」というのがありますね。これがアプリのアイコンを表示するファイルなわけです。

スクリーンショット 2013-03-18 11.31.21

つまり、これを入れ替えちゃえばいいんだけど、png→icnsというファイル形式に変換する作業が必要。

コマンドラインで簡単に作成する方法もありますが、ここは分かりやすくアプリを利用します。

「Img2icns」アプリを下記よりダウンロードしインストール。

ちなみに、インストールと言ってもImg2icns.appを「アプリケーションフォルダ」に移動するだけです。初起動時は「開発元が云々〜」と言われて開けない場合があるんで、副ボタンクリック→「開く」で開きます。

アプリの使い方は見たままで、まずさっき作ったアイコン画像をドラッグ。その後icnsを選択してデスクトップに保存。

スクリーンショット 2013-03-18 11.40.25
スクリーンショット_2013-03-18_11.40.41

これでicns形式に変換完了!先ほどのAutomatorApplet.icnsのあった場所にこのアイコンを全く同じ名前に変更して入れ替えます。名前が間違えてるとちゃんと認識してくれませんです。

スクリーンショット 2013-03-18 11.46.52

アプリ完成!

これでアプリは完成。最後に、「アプリケーション」フォルダに移動して終了です。

LaunchPadにもちゃんと表示されてますね!

スクリーンショット 2013-03-18 11.50.51

つーかフツーにブックマークで良くね

という声がそこかしこから聞こえてきそうですねはい。

ただ、今回のReadabilityに関しては、iPadでやってるよーに、勘違いしてアイコンを探してしまったりすることがあるのでアプリアイコン作りたかったってのと、

あとは、Spotlightの検索にも出てくるので、Control + Space でさくっと起動させたりもできるので、利便性はあるかと思います。

そんなわけでではまたのし