<?xml version="1.0" encoding="UTF-8"?> <rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:xhtml="http://www.w3.org/1999/xhtml" ><channel><title>gaspanik weblog &#187; lifehacks</title> <atom:link href="http://blog.gaspanik.com/category/articles/lifehacks/feed" rel="self" type="application/rss+xml" /><link>http://blog.gaspanik.com</link> <description>beat one&#039;s brain</description> <lastBuildDate>Thu, 15 Dec 2011 23:53:18 +0000</lastBuildDate> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <generator>http://wordpress.org/?v=</generator> <xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/category/articles/lifehacks/feed" /> <atom:link rel='hub' href='http://blog.gaspanik.com/?pushpress=hub'/> <cloud domain='blog.gaspanik.com' port='80' path='/?rsscloud=notify' registerProcedure='' protocol='http-post' /> <item><title>iPhoneの通知センターからアプリを起動する、の巻</title><link>http://blog.gaspanik.com/launch-any-apps-from-ios-notification-center</link> <comments>http://blog.gaspanik.com/launch-any-apps-from-ios-notification-center#comments</comments> <pubDate>Mon, 12 Dec 2011 01:52:01 +0000</pubDate> <dc:creator>[cipher]</dc:creator> <category><![CDATA[articles]]></category> <category><![CDATA[lifehacks]]></category> <category><![CDATA[scribbling]]></category> <category><![CDATA[applications]]></category> <category><![CDATA[iOS]]></category> <category><![CDATA[ipad]]></category> <category><![CDATA[iphone]]></category><guid isPermaLink="false">http://blog.gaspanik.com/?p=6794</guid> <description><![CDATA[Androidのパクリ？な感じでiPhoneやiPadにiOS 5から搭載された「Notification Center（日本語だと通知センター？）」から、電話やメール、SMS送信、アプリの起動ができる「App Switcher」の使い方を簡単にまとめておきます。 ]]></description> <content:encoded><![CDATA[<p>Androidのパクリ？な感じでiPhoneやiPadにiOS 5から搭載された「Notification Center（日本語だと通知センター？）」から、電話やメール、SMS送信、アプリの起動ができる「<a href="http://bit.ly/sDcBF7">App Switcher</a>」の使い方を簡単にまとめておきます。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/12/appswitcher-000.jpg" alt="appswitcher-000" title="appswitcher-000" width="450" height="253" class="alignnone size-full wp-image-6783" /></p><p>最初はホームのアイコンから起動できる方が便利じゃね？と思ったんですが、考えてみたら他のアプリ起動中でもスルスルッと通知センターをドラッグすればアプリが起動できるので意外と便利です（笑）。では、いってみましょう。</p><p>（追記）8つ登録できる別のアプリも出たみたいなので下にリンク入れてます。</p><p><span id="more-6794"></span></p><h3>まずは、通知センターの設定を</h3><p>最初に言っておきますが、有償（170円）のアプリです。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/12/appswitcher-001.jpg" alt="appswitcher-001" title="appswitcher-001" width="450" height="253" class="alignnone size-full wp-image-6784" /></p><p>アプリをインストールして起動したら、通知センターの設定を変更しなければいけません。具体的には…、</p><ul><li>アプリの通知を有効にする</li><li>最新の5個を表示</li><li>表示方法は「None」</li><li>バッジとかサウンドはオフ</li></ul><p>こんな感じです。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/12/appswitcher-002.jpg" alt="appswitcher-002" title="appswitcher-002" width="450" height="253" class="alignnone size-full wp-image-6785" /></p><p>通知を有効にして、最新の5つを表示します。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/12/appswitcher-003.jpg" alt="appswitcher-003" title="appswitcher-003" width="450" height="253" class="alignnone size-full wp-image-6786" /></p><p>アラートの表示は一番左の「なし」でオッケイ。その下に並んでる「バッジ」とか「サウンド」はナシにしておきましょう。</p><h3>通知センターから起動するものを追加する</h3><p>App Switcherにもどって、左下の「Quick Launch」のタブを選択して、通知センターから起動したいアクションを追加します。右上の「＋」ボタンがアクションの追加です。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/12/appswitcher-004.jpg" alt="appswitcher-004" title="appswitcher-004" width="450" height="253" class="alignnone size-full wp-image-6787" /></p><p>ポチッと押すと、アクションの追加画面に移動します。ここで設定できるのは、表示名とアイコン、そしてアクションの内容です。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/12/appswitcher-005.jpg" alt="appswitcher-005" title="appswitcher-005" width="450" height="253" class="alignnone size-full wp-image-6788" /></p><p>初期設定されてるアイコンはタップすれば、プリセットされたものとかライブラリから選択できます。どのみち、通知センターの画面には出てきませんから何でもいいです（笑）。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/12/appswitcher-006.jpg" alt="appswitcher-006" title="appswitcher-006" width="450" height="253" class="alignnone size-full wp-image-6789" /></p><p>通知センターに出てくる表示名をいれて、次にやりたいアクションを追加します。電話するのか、メールするのか、アプリを起動するのか、ってことですね。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/12/appswitcher-007.jpg" alt="appswitcher-007" title="appswitcher-007" width="450" height="253" class="alignnone size-full wp-image-6790" /></p><p>アプリを起動する場合は「URL」をタップしましょう。インストールされたアプリは、たとえばTwitterなら「twitter:」っていう書き方をすれば呼び出すことができるんですね（このURLスキームってのはアプリ毎に違います）。</p><p>自分の使っているアプリとか調べたかったら「<a href="http://bit.ly/rFfSAc">handleOpenURL</a>」で調べることもできますし、有名どころのものはApp Switcherのサイトから直接登録することもできます。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/12/appswitcher-008.jpg" alt="appswitcher-008" title="appswitcher-008" width="450" height="253" class="alignnone size-full wp-image-6791" /></p><p>こんな感じですね。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/12/appswitcher-009.jpg" alt="appswitcher-009" title="appswitcher-009" width="450" height="253" class="alignnone size-full wp-image-6792" /></p><p>iPhone版が出て最近話題になっているFlipboardは「flipboard:」って入れれば大丈夫です。他をあげておくと…、Twitter（公式）は「twitter:」、Tweetbotは「tweetbot:」、Facebookは「fb:」とかですね。その他マニュアルは<a href="http://bit.ly/uezg7I">こちら</a>に。</p><p>（追記）システム設定まわりのもろもろは<a href="http://bit.ly/swOlfM">こちら</a>を参考に。</p><h3>登録したアクションを通知センターに登録</h3><p>アクションを追加しただけでは、通知センターには表示されません。今度はApp Switcherの右下の「Setup」のタブに切り替えて、4つの空欄に登録したアクションを追加します。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/12/appswitcher-010.jpg" alt="appswitcher-010" title="appswitcher-010" width="450" height="253" class="alignnone size-full wp-image-6793" /></p><p>残念ながら4つまでしか登録できないんですが、通知センターに表示する順番で右側の「＋」ボタンを押してアクションを登録しましょう。</p><p>「Show Quick Launch」は、App Switcherの画面を表示しますので、アクション自体をたくさん登録しておけばそこから起動できます。登録が4つまでしかできないのが残念なところですが、他のアプリを起動中でも通知センターをスルスルッと引き出せばいいのは案外便利です。</p><p>&rarr; <a href="http://bit.ly/sDcBF7">Pepper Stuff &#8211; App Switcher</a></p><p>（追記）こんな記事を書いてたら、なんか8個登録できるのも出たみたいですね（笑）。詳しくは以下のサイトをご覧ください。</p><p>&rarr; <a href="http://bit.ly/urOuyG">[FlashLaunch] – 通知センターにWi-Fi/輝度などの設定ショートカットを置くならApp SwitcherよりFlashLaunchがおすすめ | iPhone/iPadアプリを紹介するAppPot</a></p> ]]></content:encoded> <wfw:commentRss>http://blog.gaspanik.com/launch-any-apps-from-ios-notification-center/feed</wfw:commentRss> <slash:comments>0</slash:comments> <xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/launch-any-apps-from-ios-notification-center" /> </item> <item><title>便利な人には便利なChromeの拡張機能 33＋1コ</title><link>http://blog.gaspanik.com/chrome-extensions-for-better-browsing</link> <comments>http://blog.gaspanik.com/chrome-extensions-for-better-browsing#comments</comments> <pubDate>Thu, 22 Sep 2011 22:42:08 +0000</pubDate> <dc:creator>[cipher]</dc:creator> <category><![CDATA[articles]]></category> <category><![CDATA[lifehacks]]></category> <category><![CDATA[scribbling]]></category> <category><![CDATA[browser]]></category> <category><![CDATA[chrome]]></category> <category><![CDATA[extensions]]></category> <category><![CDATA[services]]></category> <category><![CDATA[tools]]></category><guid isPermaLink="false">http://blog.gaspanik.com/?p=6467</guid> <description><![CDATA[皆さんの普段使いのWebブラウザはなんですか？ ここ最近のボクはといえば、GoogleさんのChromeをメインブラウザとして使っています。Chromeも公開されているアプリや拡張機能を追加して、自分なりのブラウジング環境を作れます。そのまま使うか、拡張機能でカスタマイズするかはあなた次第です。そんなわけで、今日は数多ある拡張機能の中からボクが選んだ入れておくと便利かもしれない拡張機能を33＋1コ集めてみました。]]></description> <content:encoded><![CDATA[<p>皆さんの普段使いのWebブラウザはなんですか？ ここ最近のボクはといえば、GoogleさんのChromeをメインブラウザとして使っています。Chromeも公開されているアプリや拡張機能を追加して、自分なりのブラウジング環境を作れます。そのまま使うか、拡張機能でカスタマイズするかはあなた次第です。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-extensions-000.jpg" alt="chrome-extensions-000" title="chrome-extensions-000" width="450" height="253" class="alignnone size-full wp-image-6473" /></p><p>そんなわけで、今日は数多ある拡張機能の中からボクが選んだ入れておくと便利かもしれない拡張機能を33＋1コ集めてみました。前半は多くの人を対象に日常のブラウジング体験を快適にするもの、後半はWebサイトの開発系でちょっと役立つものといった感じでジャンル分けしてお届けします。ま、あくまでもボクが普段使ってるものベースですが…、キャプチャ中の★やユーザー数も参考に。</p><p>いくら拡張機能が便利だって言っても、入れすぎたらそれは重くなるだけですからね。適当に取捨選択して入れるなり、使う時だけオンにするなりしましょう。では、33＋1コいってみましょう。</p><p><span id="more-6467"></span></p><h3>日常のブラウジングを快適にする拡張機能</h3><h4 id="byextension"><a href="http://bit.ly/efzPnX">緊急地震速報 by Extension</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-001.jpg" alt="chrome-ext-001" title="chrome-ext-001" width="450" height="253" class="alignnone size-full wp-image-6494" /></p><p>震災以降、さすがに入れておこうかと思ったのが地震速報系のアプリ。スマートフォンにも一応入れてはいますが、仕事中はほったらかしだったりもするし…ということで、こちらの「<a href="http://bit.ly/efzPnX">緊急地震速報 by Extension</a>」を。必ず動作するという保証がないのは同じですが、他の通知系よりも速いので重宝しています。ちなみに今震源地を表示するβ版がテスト中です。</p><h4 id="offlinegooglemail"><a href="http://bit.ly/qYLJkW">Offline Google Mail</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-002.jpg" alt="chrome-ext-002" title="chrome-ext-002" width="450" height="253" class="alignnone size-full wp-image-6495" /></p><p>ボクはあまりGmailのヘビーユーザーではないのですが、「<a href="http://bit.ly/qYLJkW">Offline Google Mail</a>」は入れておくと便利な人が多いかもしれませんね。その名の通りで、オフラインでGmailを読むためのものです。必ずしもネットに繋がった環境にいるとも限りませんからね。備えあれば、嬉しいな、アハハハで。</p><h4 id="googlecalendar"><a href="http://bit.ly/qFjb3M">Google Calendar</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-003.jpg" alt="chrome-ext-003" title="chrome-ext-003" width="450" height="253" class="alignnone size-full wp-image-6496" /></p><p>Googleさん謹製の「<a href="http://bit.ly/qFjb3M">Google Calendar</a>」、こちらはGoogleカレンダーをパッと起動するもの。Googleカレンダーの設定でオフラインユースを有効にすればオフラインモードで開きます。ボクは便利だと思いながらも、Googleさんにさほど依存してないのでほぼ使っていません…。</p><h4 id="autopagerize"><a href="http://bit.ly/qJIShg">AutoPagerize</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-004.jpg" alt="chrome-ext-004" title="chrome-ext-004" width="450" height="253" class="alignnone size-full wp-image-6497" /></p><p>いや、これは大事でしょう。先日もOS Xアプリの記事後半のSafariの機能拡張で紹介した「<a href="http://bit.ly/qJIShg">AutoPagerize</a>」。もうこれがない生活なんて、続きのない連続ドラマですよ（なんだそれ）。検索ポータルの検索結果や「次ページへ」といったリンクがあるサイトの次のページを取得して自動的に繋げてくれます。</p><h4 id="fittrflickr"><a href="http://bit.ly/nsTggi">Fittr Flickr</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-005.jpg" alt="chrome-ext-005" title="chrome-ext-005" width="450" height="253" class="alignnone size-full wp-image-6498" /></p><p>ガラッと目的は変わりまして、「<a href="http://bit.ly/nsTggi">Fittr Flickr</a>」は写真共有サイトである<a href="http://flickr.com/">Flickr</a>の閲覧をしやすくするものです。しやすくというか、かゆいところに手が届く感じのカスタマイズをしてくれます。あまりいろいろ詰め込んでもなんなので、Flickrの閲覧を便利にするものはこれだけ入れてます。</p><h4 id="readabilityredux"><a href="http://bit.ly/mfCAR7">Readability Redux</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-006.jpg" alt="chrome-ext-006" title="chrome-ext-006" width="450" height="253" class="alignnone size-full wp-image-6499" /></p><p>ページの両脇ならともかく、「なぜ記事の本文中に嫌がらせのように広告が入ってるんだろう？」と思ったことはありませんか？、きっとありますよね（笑）。「<a href="http://readability.com">Readability</a>」はSafariのリーダーの元になったサービスで閲覧中のページから余計な装飾要素を全排除して表示してくれます。こちらの「<a href="http://bit.ly/mfCAR7">Readability Redux</a>」は公式ではありませんが同様のことができるんです。</p><h4 id="cloudsave"><a href="http://bit.ly/nsuInN">Cloud Save</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-007.jpg" alt="chrome-ext-007" title="chrome-ext-007" width="450" height="253" class="alignnone size-full wp-image-6500" /></p><p>公開されているコンテンツには著作権がありますし、そんな頻繁に使うとは思えませんが、サイト中の画像をクラウドなストレージサービスに保存する拡張機能が「<a href="http://bit.ly/nsuInN">Cloud Save</a>」。参考資料になりそうな画像とか、ちょっと後から見たい時に役立ちます。だって、Dropboxとかに直接保存できるんですもん。</p><h4 id="screencapture"><a href="http://bit.ly/ntVYzH">Screen Capture (by Google)</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-008.jpg" alt="chrome-ext-008" title="chrome-ext-008" width="450" height="253" class="alignnone size-full wp-image-6501" /></p><p>見ているブラウザの画面をキャプチャして、一言書いて友達に渡したい！って時に重宝するのが、こちらの「<a href="http://bit.ly/ntVYzH">Screen Capture</a>」。画面ショットを撮影して手書きで何か書き足して保存したり、Google+（というかPicasa）に送ったりすることができます。似たようなのに「<a href="http://bit.ly/oPnPPf">Awesome Screenshot</a>」とかもありますね。</p><h4 id="stylebotext"><a href="http://bit.ly/pfL0oq">Stylebot</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-009.jpg" alt="chrome-ext-009" title="chrome-ext-009" width="450" height="253" class="alignnone size-full wp-image-6502" /></p><p>「<a href="http://bit.ly/pfL0oq">Stylebot</a>」は、任意のドメインの下にあるコンテンツのCSSをカスタマイズしてしまう拡張機能です。たとえば、Twitterの右側に出てくる流行ってるキーワードとかこの人知ってるかも系のブロックを見えなくしてしまうことができます。<a href="http://stylebot.me/">Stylebot Social</a>というサイトもあって、有志がカスタマイズして公開しているサイト毎のCSSをインストールすることもできます。</p><h3>ソーシャルメディア系な拡張機能</h3><h4 id="pbtweet"><a href="http://bit.ly/lqxBjV">PBTweet+</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-010.jpg" alt="chrome-ext-010" title="chrome-ext-010" width="450" height="253" class="alignnone size-full wp-image-6503" /></p><p>ボクは、Twitterのタイムラインは普通にブラウザで見てるんです。で、こちらの「<a href="http://bit.ly/lqxBjV">PBTweet+</a>」は、Webブラウザで見るTwitterの画面にいろいろな機能を追加してくれる拡張機能です。タイムラインで見たくないキーワードを指定したり、一時的に任意のユーザーを非表示にしたりね。「#」とか非公式RTを排除する「RT」とか追加しておくとスッキリ（笑）。</p><h4 id="facebooklikebutton"><a href="http://bit.ly/qgRpBj">Facebook Like Button</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-011.jpg" alt="chrome-ext-011" title="chrome-ext-011" width="450" height="253" class="alignnone size-full wp-image-6504" /></p><p>「<a href="http://bit.ly/qgRpBj">Facebook Like Button</a>」はその名の通り、FacebookのLikeのボタンです。ツールバーのトコに「いいね！」のアイコンと見ているページのLike数が表示されます。もちろんここから「いいね！」することもできますよ。</p><h4 id="bitlyasimpleurlshortener"><a href="http://bit.ly/ne2QYt">bitly | a simple URL shortener</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-012.jpg" alt="chrome-ext-012" title="chrome-ext-012" width="450" height="253" class="alignnone size-full wp-image-6505" /></p><p>「<a href="http://bit.ly/ne2QYt">bitly</a>」は、長ったらしいURLを短縮してくれるサービスの拡張機能です。アカウントを登録してツールバーのフグみたいなボタンをポチッとすれば、自分のTwitterやらFacebookのアカウントにいま見ているサイトのタイトルとURLに何か一言付け加えて放り投げることができます。</p><h4 id="bufferforchrome"><a href="http://bit.ly/mT3j7c">Buffer for Chrome</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-013.jpg" alt="chrome-ext-013" title="chrome-ext-013" width="450" height="253" class="alignnone size-full wp-image-6506" /></p><p>Tweetを指定時刻に自動でおこなうサービスである「<a href="http://bufferapp.com">Buffer</a>」の公式の拡張機能です。前述のbit.lyと同じように即時に放り投げることもできるし、アカウントを登録して時刻を指定しておけば、投稿リストに保存しておくことも可能です。Bufferは、RT数などでどれぐらいの範囲に拡まったか（まぁ、理論値というかただの合計ですが）もトラックできます。ソーシャルメディアをフル活用して宣伝とかしたい方は、無料で使えるこのサービスは使った方がいいですね（謎）。</p><h4 id="kloutbeta"><a href="http://bit.ly/jvuh4e">Klout (beta)</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-014.jpg" alt="chrome-ext-014" title="chrome-ext-014" width="450" height="253" class="alignnone size-full wp-image-6507" /></p><p>ソーシャルメディアにおける発言者の影響力をはかるサービスで有名な「<a href="http://klout.com">Klout</a>」の公式拡張機能です。残念ながら、発言の内容までは精査されないので、Kloutスコアが高くても…ってことも往々にしてあります。人のネタぱくっててもRTとかされたら数値高くなりますからね（笑）。ただ、コレ入れておくとTwitterの画面にみんなのスコアが表示されます。</p><h3>広告系のアレとかソレを無効化する拡張機能</h3><h4 id="adblockplus"><a href="http://bit.ly/r3UfHZ">Adblock Plus for Google Chrome&#8482; (Beta)</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-015.jpg" alt="chrome-ext-015" title="chrome-ext-015" width="450" height="253" class="alignnone size-full wp-image-6508" /></p><p>実はボク、数年前コレ系の話題でAERAにインタビューされてます（笑）。いや、ページ内に広告は入れるのはいいんですが、できれば邪魔にならないトコに入れて欲しい…だけなんですがね。「<a href="http://bit.ly/r3UfHZ">Adblock Plus</a>」は、入れるだけでサイト内の広告を非表示にしてくれます。もちろん、特定の配信サーバを指定することもできます、はい。ま、それ以前に右端とかは視界にいれませんがｗ</p><h4 id="googleanalyticsopt-out"><a href="http://bit.ly/rnBIgD">Google Analytics Opt-out Add-on (by Google)</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-016.jpg" alt="chrome-ext-016" title="chrome-ext-016" width="450" height="253" class="alignnone size-full wp-image-6509" /></p><p>「<a href="http://bit.ly/rnBIgD">Google Analytics Opt-out</a>」は、Googleさんのアクセス解析であるGoogle Analyticsに余計なデータを送らないようにするための拡張機能です。別にアクセスしたことぐらいは教えてもいいんですけど（笑）。この後紹介するChromeblockは、GA以外のトラッキング系もまるごとブロック、必要に応じてサイト毎にオンオフできます、はい。</p><p>Opt-Out（オプトアウト）って何だよ、って方はこちらをどうぞ。<br /> &rarr; <a href="http://bit.ly/apxfV6">オプトアウトとは【opt-out】：IT用語辞典</a></p><h4 id="ibaopt-outbygoogle"><a href="http://bit.ly/p2qlgg">IBA Opt-out (by Google)</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-017.jpg" alt="chrome-ext-017" title="chrome-ext-017" width="450" height="253" class="alignnone size-full wp-image-6510" /></p><p>これまた排除系です。「IBA」ってのは Interest-Based Advertisingの略、つまるところインタレストマッチな広告を永続的に無効化するための拡張機能で、説明文を見る感じではGoogleさんのDoubleClick系のを無効化してくれる、と。</p><h4 id="keepmyopt-outs"><a href="http://bit.ly/mXulpB">Keep My Opt-Outs</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-018.jpg" alt="chrome-ext-018" title="chrome-ext-018" width="450" height="253" class="alignnone size-full wp-image-6511" /></p><p>「<a href="http://bit.ly/mXulpB">Keep My Opt-Outs</a>」はCookieを使ったオンライン広告のカスタマイズを永続的に無効化するための拡張機能。<a href="http://www.aboutads.info/choices/">ココ</a>とか見ると、今自分がどの程度カスタマイズされた広告を出されてるかわかります。ちなみにiPhone 4専用だけど、<a href="http://oo.apple.com">こんなサイト</a>もあります（これはiAd）。</p><h4 id="chromeblock"><a href="http://bit.ly/qaR084">Chromeblock</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-020.jpg" alt="chrome-ext-020" title="chrome-ext-020" width="450" height="253" class="alignnone size-full wp-image-6513" /></p><p>似たようなのをいくつも紹介してますが、Webサイトってのは皆さんがあずかり知らないところで行動履歴というか何をクリックしたかをチェックしてます。「<a href="http://bit.ly/qaR084">Chromeblock</a>」は、そういったアクセス解析というかトラッキング系をがっつりブロックしてくれます。同じAbineの「<a href="http://bit.ly/oBjqpF">Abine TACO</a>」はKeep My Opt-Outsみたいなのです。</p><h3>セキュリティ的なものが心配なあなたへ、な拡張機能</h3><h4 id="vanillacookiemanager"><a href="http://bit.ly/osfkXj">Vanilla Cookie Manager</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-021.jpg" alt="chrome-ext-021" title="chrome-ext-021" width="450" height="253" class="alignnone size-full wp-image-6514" /></p><p>「<a href="http://bit.ly/osfkXj">Vanilla Cookie Manager</a>」は、接続しているサイトのドメインのCookieを管理するための拡張機能。ブラウザ自体の機能で十分というか、サードパーティ製のCookieを無効化するとかで良い気はしますが、接続中のドメインのCookieを個別に受け入れる受け入れないを簡単に管理したければどうぞ。</p><h4 id="notscripts"><a href="http://bit.ly/rv1dnF">NotScripts</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-022.jpg" alt="chrome-ext-022" title="chrome-ext-022" width="450" height="253" class="alignnone size-full wp-image-6515" /></p><p>インストールするのにちょっと手間がかかるのですが、閲覧中のサイトにおけるJavaScriptの実行を「許可する・許可しない」ってのをドメインごとに指定できる拡張機能です。Firefoxで有名な「NoScript」と同じようなものです。たまに JavaScriptをトリガーにしてイタズラされたりしますしね（笑）、一時的に特定のサイトだけJavaScriptを無効化するといった使い方ができるので便利です。</p><h4 id="flashblock"><a href="http://bit.ly/mWMMow">FlashBlock</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-023.jpg" alt="chrome-ext-023" title="chrome-ext-023" width="450" height="253" class="alignnone size-full wp-image-6516" /></p><p>ボクはMac側で元からFlashプラグインを遮断する別の「FlashBlock」を入れているんですけど、こっちの「<a href="http://bit.ly/mWMMow">FlashBlock</a>」は特定のサイトだけFlashコンテンツを有効にすることができる拡張機能です。許可するサイトをドメイン毎にコントロールできます。</p><h4 id="kbsslenforcer"><a href="http://bit.ly/pADzGf">KB SSL Enforcer</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-024.jpg" alt="chrome-ext-024" title="chrome-ext-024" width="450" height="253" class="alignnone size-full wp-image-6517" /></p><p>「<a href="http://bit.ly/pADzGf">KB SSL Enforcer</a>」は、強制的に「https」でサイトに繋ぐ拡張機能です。今となっては割とどのサービスも「常にhttpsで接続する」みたいなオプションができてますが。公衆無線LANとかで接続する人は入れておいても損はないですかね。この機能のオンオフをツールバーからできるようにする「<a href="http://bit.ly/nQtie8">KB SSL Enforcer Browser Button</a>」もあります。</p><h3>Webデザイン、開発とかでお役立ちな拡張機能</h3><h4 id="pendule"><a href="http://bit.ly/lFvGJO">Pendule</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-025.jpg" alt="chrome-ext-025" title="chrome-ext-025" width="450" height="253" class="alignnone size-full wp-image-6518" /></p><p>「<a href="http://bit.ly/lFvGJO">Pendule</a>」は、なにげに便利です。機能的には若干後述のWeb Developerとかぶる部分がありますが、これにしかできないもの、他に足りないものを補ってくれます。たとえば、MinifyされたCSSを読みやすい形に戻したり、カラーピッカーが付いていたり、ルーラーなんかもあります。機能別に複数の拡張機能をいれるぐらいならコレ一個でも。</p><h4 id="webdeveloper"><a href="http://bit.ly/q2kz4J">Web Developer</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-026.jpg" alt="chrome-ext-026" title="chrome-ext-026" width="450" height="253" class="alignnone size-full wp-image-6519" /></p><p>言うまでもなく、表示しているWebサイトの情報をもろもろチェックできる素敵な拡張機能ですね。Chrome版もちゃんとあります。</p><h4 id="firebuglite"><a href="http://bit.ly/qm8G6B">Firebug Lite for Google Chrome&#8482;</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-027.jpg" alt="chrome-ext-027" title="chrome-ext-027" width="450" height="253" class="alignnone size-full wp-image-6520" /></p><p>こちらも説明の必要がないですね。Web開発者必携ともいわれる有名な拡張機能「Firebug」のChrome版。Firefox版のアドオンはメモリ食いとして一部でささやかれたりしますが（<a href="http://kb.mozillazine.org/Problematic_extensions">参考資料</a>: Firebugのとこ見てください）、こちらはそれほどでもないんですかね。たまにFirefoxを速くするとかって記事で「Firebugを入れる」とか書いてあったりしますが、むしろ逆で「使う時だけオン」にした方が良いと思ってます…（笑）。</p><h4 id="chromesniffer"><a href="http://bit.ly/rd3pay">Chrome Sniffer</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-028.jpg" alt="chrome-ext-028" title="chrome-ext-028" width="450" height="253" class="alignnone size-full wp-image-6521" /></p><p>表示しているWebサイトで使われている技術というか、サービスとかライブラリみたいなのを表示してくれる拡張機能が「<a href="http://bit.ly/rd3pay">Chrome Sniffer</a>」。アドレスバーのとこに各種サービスとかのアイコンが出てくるので、何が仕込まれているかよくわかります（笑）。サイトの研究のために入れておいても損はありません。</p><h4 id="pagespeed"><a href="http://bit.ly/q9pRh6">Page Speed</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-029.jpg" alt="chrome-ext-029" title="chrome-ext-029" width="450" height="253" class="alignnone size-full wp-image-6522" /></p><p>数年前からGoogleさんのサイト表示スピードへのこだわりはすごいんですが、「Page Speed」は任意のサイトの構成要素をチェックしてパフォーマンスをあげるための改善点を提示してくれる拡張機能です。インストールして使うためには、アドレスバーに「chrome:flags」と入れて「試験運用版の拡張機能 API」を有効にしなければなりません（<a href="http://code.google.com/speed/page-speed/docs/using_chrome.html">詳しいことはこちらに</a>）。</p><p>面倒くさかったら、「<a href="http://pagespeed.googlelabs.com/">Page Speed Online</a>」でチェックしましょう（PC向けもモバイル向けもチェックできます）。</p><h4 id="yslow"><a href="http://bit.ly/nwWDHA">YSlow</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-030.jpg" alt="chrome-ext-030" title="chrome-ext-030" width="450" height="253" class="alignnone size-full wp-image-6523" /></p><p>「<a href="http://bit.ly/nwWDHA">YSlow</a>」は、Yahoo!さんのページパフォーマンスチェックツールですね。チェック項目はGoogleさんのそれとは微妙に異なりますが、チェックすれば改善点を教えてくれます。まぁ、GoogleのソレとYahoo!のソレ、同時にやりたかったらオンラインサービスの「<a href="http://gtmetrix.com">GTmetrix</a>」でどうぞ。</p><h4 id="speedtracer"><a href="http://bit.ly/p9Z3sq">Speed Tracer (by Google)</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-031.jpg" alt="chrome-ext-031" title="chrome-ext-031" width="450" height="253" class="alignnone size-full wp-image-6524" /></p><p>GoogleさんのPage Speedはチェックして改善点を教えてくれますが、「<a href="http://bit.ly/p9Z3sq">Speed Tracer</a>」はページを読み込んでから何がおこなわれているかを事細かに教えてくれる拡張機能です。以前は、Windowsでしか使えませんでしたが、最近はOS Xでも「ChromeWithSpeedTracer」というアプリを入れて、そこからChromeを起動すれば使えます（ただし、Chromeはβ版とかにしないとダメです）。詳しい話は<a href="https://code.google.com/webtoolkit/speedtracer/get-started.html">この辺</a>に。</p><h4 id="googleanalyticsdebugger"><a href="http://bit.ly/phrPcp">Google Analytics Debugger (by Google)</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-032.jpg" alt="chrome-ext-032" title="chrome-ext-032" width="450" height="253" class="alignnone size-full wp-image-6525" /></p><p>「<a href="http://bit.ly/phrPcp">Google Analytics Debugger</a>」は、その名の通りでGoogle Analyticsが送っているデータをデバッグするための拡張機能です。有効にしてサイトにアクセスすると、何を拾い上げてるのとかがわかります。あ、Webインスペクタの画面の下に出てきます。使う時は、GAのOpt-Outsの拡張機能とか入れてる人は無効にしてくださいね、じゃないと表示されませんから（笑）。</p><h4 id="imagepropertiescontextmenu"><a href="http://bit.ly/oOUm1N">Image Properties Context Menu</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-033.jpg" alt="chrome-ext-033" title="chrome-ext-033" width="450" height="253" class="alignnone size-full wp-image-6526" /></p><p>前述したPenduleには、ページ内で使用している画像の一覧を取得する機能がありますが、こちらは任意の画像を右クリックして新しいウィンドウで表示してくれる便利な拡張機能です。サイト内に一杯画像あると探すのも大変ですからね。右クリックで情報が拾えるのはありがたいです。</p><h4 id="corporateipsum"><a href="http://bit.ly/pemI3T">Corporate Ipsum</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-034.jpg" alt="chrome-ext-034" title="chrome-ext-034" width="450" height="253" class="alignnone size-full wp-image-6527" /></p><p>これを便利だと思う人はかなり限られているとは思いますが…。よくあるLorem Ipsumなテキストを会社的な文章で作ってくれる拡張機能です。といっても、英語なんですけどね。大体どれぐらいのワード数でみたいなことができるので、ラフ作る時のダミーテキストとして使えるんじゃないでしょうか。</p><h3>最後に、拡張機能のオン・オフを簡単にする拡張機能</h3><p>冒頭にも書きましたが、何でもかんでも入れればいいというわけでもなく、入れたら入れた分だけメモリを使います。非力な環境であれば、使う時だけ必要な機能をオンにする方がいいですね。拡張機能がどれぐらいメモリとか使ってるかは、「タスクマネージャ」で確認できます。</p><h4 id="extensionsmanagerakaswitcher"><a href="http://bit.ly/ruYwtf">Extensions Manager (aka Switcher)</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-035.jpg" alt="chrome-ext-035" title="chrome-ext-035" width="450" height="253" class="alignnone size-full wp-image-6528" /></p><p>オンオフは「拡張機能」メニューからも変更できますが、この「<a href="http://bit.ly/ruYwtf">Extensions Manager</a>」でツールバーから簡単に切り替えられます。これが一番メモリ食ってる気もしますがｗ</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/chrome-ext-036.jpg" alt="chrome-ext-036" title="chrome-ext-036" width="450" height="253" class="alignnone size-full wp-image-6529" /></p><p>こんな感じです。</p><h3>ま、あとは自分で選んでくださいｗ</h3><p>機能が重複しているのもいくつかありますが、日々の使い勝手をちょっと改善するものからWeb制作関係のお仕事に従事されてる方に役立ちそうなものを集めてみました。以上、なにかのご参考まで。</p><p>＃たしかに変なタイトルですね。「人によっては便利な〜」です（笑）。</p> ]]></content:encoded> <wfw:commentRss>http://blog.gaspanik.com/chrome-extensions-for-better-browsing/feed</wfw:commentRss> <slash:comments>1</slash:comments> <xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/chrome-extensions-for-better-browsing" /> </item> <item><title>MacBook Proに入れたアプリ22個＋おまけ</title><link>http://blog.gaspanik.com/os-x-apps-for-mac-beginners</link> <comments>http://blog.gaspanik.com/os-x-apps-for-mac-beginners#comments</comments> <pubDate>Sun, 11 Sep 2011 07:45:07 +0000</pubDate> <dc:creator>[cipher]</dc:creator> <category><![CDATA[articles]]></category> <category><![CDATA[lifehacks]]></category> <category><![CDATA[scribbling]]></category> <category><![CDATA[applications]]></category> <category><![CDATA[apps]]></category> <category><![CDATA[mac]]></category> <category><![CDATA[macbook]]></category> <category><![CDATA[osx]]></category> <category><![CDATA[productivity]]></category> <category><![CDATA[softwares]]></category> <category><![CDATA[tips]]></category> <category><![CDATA[tools]]></category><guid isPermaLink="false">http://blog.gaspanik.com/?p=6339</guid> <description><![CDATA[今回はMacに乗り換えようかなと思ってる方や乗り換えたばっかりの方、MacBookなんちゃらを使ってカフェやコワーキングスペースなどをノマド気味にウロウロしてる方のために、ボクがMBPにインストールしたアプリを22個紹介したいと思います。あと、最後の方には日常のブラウジングを少し快適にするだろう Safariの機能拡張もおまけでいくつか。]]></description> <content:encoded><![CDATA[<p><a href="http://bit.ly/rjGOhN">先日の記事</a>が思わぬ爆発をして驚いてるこもりです、こんにちは。実は、こないだ2年ぶりぐらいにマシンを新調したんですよね（といっても、MacBook Proの13インチの最安仕様 笑）。で、あの記事で紹介した以外にも直接仕事に関係しないけど、MacBook生活のアレコレを便利にするアプリも入れています。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/mac-apps-000.png" alt="OS X Apps for Mac Beginners" title="mac-apps-000" width="450" height="253" class="alignnone size-full wp-image-6309" /></p><p>今回もまた懲りずに、Macに乗り換えようかなと思ってる方や乗り換えたばっかりの方、MacBookなんちゃらを使ってカフェやコワーキングスペースなどをノマド気味にウロウロしてる方のために、ボクがMBPにインストールしたアプリを22個紹介したいと思います。</p><p>MacBookをお使いの方もそうでない方も。今回はジャンル分けはしてませんが、アレコレと多岐にわたっています。あと、最後の方には日常のブラウジングを少し快適にするだろう Safariの機能拡張もおまけでいくつか。</p><p>では、ちょっと短めですがいってみましょうか。</p><p><span id="more-6339"></span></p><h3 id="alfredapp"><a href="http://bit.ly/qBxKLL">Alfred App</a></h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/mac-apps-001.jpg" alt="Alfred" title="mac-apps-001" width="450" height="253" class="alignnone size-full wp-image-6310" /></p><p>MacBookのようなノート単体だったり、マウスを使えるスペースがない場合は、Dockに並んだアイコンをクリックするか、LionのLauchpadを呼び出してアプリを起動することになります。いちいちマウス操作も面倒なので、できればキーボードショートカットで呼び出せるランチャーがあると便利です。</p><p>定番といえば「<a href="http://bit.ly/qGehER">Quicksilver</a>」だったりしましたが、最近はランチャーもいろいろ豊富にそろってます。今回はアプリの起動ぐらいができればいいかな、と「<a href="http://bit.ly/qBxKLL">Alfred App</a>」にしてみました（でも、一応有償のPower Pack込）。他にも「<a href="http://bit.ly/oI9Bge">Launcher</a>」とか良さそうですね、そのまま辞書ひけるし。</p><h3 id="sparrow"><a href="http://bit.ly/oEVd7l">Sparrow</a></h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/mac-apps-002.jpg" alt="Sparrow" title="mac-apps-002" width="450" height="253" class="alignnone size-full wp-image-6311" /></p><p>元はといえば、Gmailのメーラーとして登場したはずの「<a href="http://bit.ly/oEVd7l">Sparrow</a>」は、だいぶ進化をしたようですね。無償のLiteはGmailのアカウントひとつしか使えませんが、有償版であればマルチアカウントはもちろん、その他のメールサーバ（IMAP）にも対応してます。様子見でいまはLite使ってます。</p><h3 id="cloudapp"><a href="http://bit.ly/95TegI">CloudApp</a></h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/mac-apps-003.jpg" alt="CloudApp" title="mac-apps-003" width="450" height="253" class="alignnone size-full wp-image-6312" /></p><p>クラウドを使ってちょっとしたファイル共有やメモをやりとりするのに、DropboxやEvernoteを使ってる方も多いでしょう。ボクはDropboxは使ってますが、ちょっとしたファイルの送付やURLのメモには「<a href="http://bit.ly/95TegI">CloudApp</a>」を。スクリーンショットやブラウザで表示しているURLはショートカットで送れます。Dropboxで似たようなことやるなら、「<a href="http://bit.ly/pKdiWD">DropIn</a>」ですかね。Twitterクライアントの「Tweetbot」がCloudAppに対応しています。</p><h3 id="flashblock"><a href="http://bit.ly/qkxfq6">Flash Block</a></h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/mac-apps-004.jpg" alt="Flash Block" title="mac-apps-004" width="450" height="253" class="alignnone size-full wp-image-6313" /></p><p>出先でMacBook使ってるとバッテリーの残りが気になります。いや、それでなくても非力なマシンでFlashコンテンツを再生し始めるとブンブンうるさくなったり熱持ったりします。これまではブラウザごとにFlashコンテンツを無効化するプラグインを入れていたのですが、起動していることに変わりはなし（笑）。</p><p>ブラウザごとに異なるプラグインで抑止するのは面倒だしいろいろ問題もあるので、今回はブラウザを選ばず元から絶つ、みたいな「<a href="http://bit.ly/qkxfq6">Flash Block</a>」という常駐アプリを入れることにしました。Chromeだけは元々組み込み済みなので、ひょっとしたら「chrome:plugins」で止めないといけないかも。</p><h3 id="apptamer"><a href="http://bit.ly/nhxCpC">App Tamer</a></h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/mac-apps-005.jpg" alt="App Tamer" title="mac-apps-005" width="450" height="253" class="alignnone size-full wp-image-6314" /></p><p>だから、バッテリーの残りが大事なんですよ（笑）。この「<a href="http://bit.ly/nhxCpC">App Tamer</a>」は、指定したアプリがバックグラウンドにある時は止めちゃうものです。止めるって言っても、一時停止状態にして無駄なCPUを使わせないという仕組みですから、前に出せばすぐ使えます。MacBookを外で使う人にはオススメです。</p><p>Chromeみたいなブラウザは勝手に登録されると思いますが、バックグラウンドで実行しながら定期的にネットに接続するようなアプリは指定しない方がいいですかね。アプリケーションごとに止める止めないは指定できます。</p><h3 id="isolator"><a href="http://bit.ly/1sPxLz">Isolator</a></h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/mac-apps-006.jpg" alt="Isolator" title="mac-apps-006" width="450" height="253" class="alignnone size-full wp-image-6315" /></p><p>ノマドとかいう仕事スタイルが流行っているらしいですね（笑）。「そんなの何年も前から俺やってたわー」って誰かさん風に言ってもいいのですが、出先で仕事するのはいいんだけどたまに覗き込まれたり、背後から視線を感じることもあります。「<a href="http://bit.ly/1sPxLz">Isolator</a>」は、一番前の画面以外を塗りつぶして見えなくすることができるもの。出先で作業する人は入れておいて損はないです。</p><h3 id="growl"><a href="http://bit.ly/nv0dRB">Growl</a></h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/mac-apps-007.jpg" alt="Growl" title="mac-apps-007" width="450" height="253" class="alignnone size-full wp-image-6316" /></p><p>「<a href="http://bit.ly/nv0dRB">Growl</a>」は、通知をしてくれるアプリというかシステム環境設定に放り込まれるもので定番ですね。いろいろなアプリケーションと連動するので、何かイベントが発生するごと（たとえば、ダウンロードが終わったよー、メールが届いたよー、とか）に通知が欲しい場合は入れておくと良いですね。有効にするしないは、アプリごとに設定できますのでうざかったらオフにすればいいです。</p><h3 id="walletformac"><a href="http://bit.ly/owDyUG">Wallet for Mac</a></h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/mac-apps-008.jpg" alt="Wallet" title="mac-apps-008" width="450" height="253" class="alignnone size-full wp-image-6317" /></p><p>シリアルやパスワード、暗証番号の類の管理には「1 Password」を使ってる方が多いかもしれませんが、ボクは「<a href="http://bit.ly/owDyUG">Wallet for Mac</a>」をずっと使っています。機能的には似たようなもんです。MobileMeとかDropboxと同期できるし、iPhoneアプリからも確認できます。</p><h3 id="iphoneexplorer"><a href="http://bit.ly/eydR17">iPhone Explorer</a></h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/mac-apps-009.jpg" alt="iPhone Explorer" title="mac-apps-009" width="450" height="253" class="alignnone size-full wp-image-6318" /></p><p>「<a href="http://bit.ly/eydR17">iPhone Explorer</a>」は、iPhoneやiPodなんかをUSBで直結してドライブとしてマウントさせることができます。つまるところ、写真のデータとかをフォルダごとごっそり転送するのが簡単です。iPhotoとか使って管理してない（OSが古いとそもそも拾えないのがあったりするし）、ただバックアップしたいだけって人には便利ですよ。MacもWinも対応してます。</p><p>壊れたり水没する前に定期的に拾い上げる癖をつけましょう（笑）。</p><h3 id="namebench"><a href="http://bit.ly/jWAs3a">namebench</a></h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/mac-apps-010.jpg" alt="namebench" title="mac-apps-010" width="450" height="253" class="alignnone size-full wp-image-6319" /></p><p>「ネットの接続を速くする」みたいな記事で、よく GoogleのPublic DNSにすれば速くなるとか書いてる人がいますけど、アレはそもそも海の向こうを対象に数年前に始まったものです。日本国内からそれを指定しても、必ずしも速くなるとは限りません。確かに速いは速いけど、それは気のせいかもね…（笑）。</p><p>自分の接続環境から本当に速いDNSを探すのであれば、この「<a href="http://bit.ly/jWAs3a">namebench</a>」を入れてチェックしてみましょう。GoogleのDNSよりも国内の別のサーバの反応の方が良かったりしますから。テストが終わったら、オススメされた3つのDNSを環境設定の「ネットワーク」で登録しましょう。</p><p>それでもGoogleのPublic DNSが速いのならそれにすればいいでしょう。</p><h3 id="galleried"><a href="http://bit.ly/nJ7IdS">Galleried</a></h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/mac-apps-011.jpg" alt="Galleried" title="mac-apps-011" width="450" height="253" class="alignnone size-full wp-image-6320" /></p><p>さて、話はガラッと変わりますが、ボクの本業はWebサイトのあれこれをやる仕事なので、海外のデザイン系のサイトを見る機会も多いです。「<a href="http://bit.ly/nJ7IdS">Galleried</a>」は、海外のクリエイターSNSの「Dribbble」だったり、ギャラリー系の「creattica」「css mania」「folio focus」などを一気にまとめて見れるものです。DribbbleなんかはiPhoneやiPadのアプリもありますが、ちまちまサイトに行ってなんか見てられないですからね。オススメです。</p><h3 id="instadesk"><a href="http://bit.ly/f3qZSj">InstaDesk</a></h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/mac-apps-012.jpg" alt="InstaDesk" title="mac-apps-012" width="450" height="253" class="alignnone size-full wp-image-6321" /></p><p>どうも、今となっては日本で何番目なのかわかりませんが、実はフォロワー数35,000弱のInstagramer、こもり（<a href=“http://bit.ly/noyu7C”>@cipher</a>）です。フォローしていただいてる皆さんありがとうございます。で、そのInstagramをMacから見る時に便利なのがこちらの「<a href="http://bit.ly/f3qZSj">InstaDesk</a>」。他にも「<a href="http://bit.ly/l81JQx">Carousel</a>」とかありますね。入れておくとブラウザ起動しなくてもいいです。</p><h3 id="mplayerx"><a href="http://bit.ly/mVxKNN">MPlayerX</a></h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/mac-apps-013.jpg" alt="MPlayer" title="mac-apps-013" width="450" height="253" class="alignnone size-full wp-image-6322" /></p><p>こないだの記事にも書きましたが、ムービー系のファイルってのはコーデックっていうのがありまして、拡張子が名のしれたものでもその中の映像と音声のコーデックによっては再生できなかったりします。Windowsだと問題ないのかもしれませんがね…。で、そんな特殊なコーデックでも再生できるプレーヤーが「<a href="http://bit.ly/mVxKNN">MPlayerX</a>」です。次に紹介する「VNC（Video LAN）」も同じようなもの。</p><h3 id="videolan"><a href="http://bit.ly/ni5IrO">VideoLAN</a></h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/mac-apps-014.jpg" alt="VLC" title="mac-apps-014" width="450" height="253" class="alignnone size-full wp-image-6323" /></p><p>前述のように「<a href="http://bit.ly/ni5IrO">VideoLAN</a>」も映像の再生アプリケーションです。似たようなのをなぜ並べているかというと理由があります（笑）。「<a href="http://bit.ly/q2cKkY">HandBrake</a>」というDVDリッパーでDVDの中身をぶっこ抜いて、iPadやiPhoneで再生できるようにエンコードしようとするとこの VNCが必要になってます。なので、あわせて入れておくと何でもできるんですね〜（謎）。</p><h3 id="adium"><a href="http://bit.ly/phUKUs">Adium</a></h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/mac-apps-015.jpg" alt="Adium" title="mac-apps-015" width="450" height="253" class="alignnone size-full wp-image-6324" /></p><p>ボク個人は最近ではまったく使うこともなくなったメッセンジャーのサービス、古くはICQ、AOL、MSN、JabberにGTalk…。おぅ、挙げればアカウントだけはちゃんと持ってます（笑）。で、その辺のメッセンジャー系のサービスを一元管理できるクライアントが「<a href="http://bit.ly/phUKUs">Adium</a>」で、もう説明の必要もないぐらい有名ですね。アイコンもメンバーリストもチャットウィンドウ、エモーティコンなども自分の好みでカスタマイズ可能です。</p><h3 id="skype"><a href="http://bit.ly/qHrIAS">Skype</a></h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/mac-apps-016.jpg" alt="Skype" title="mac-apps-016" width="450" height="253" class="alignnone size-full wp-image-6325" /></p><p>ごめんなさい、入れてるものの「<a href="http://bit.ly/qHrIAS">Skype</a>」も使っていません（笑）。世間様では他のメッセンジャーサービスよりもこっちの方が人気なんですかね。とりあえずバージョンアップのたびウィンドウがでかくなってるのは気のせいでしょうか…。あ、ボクへの連絡はTwitterのDMとかFacebookのメッセンジャーが確実です。</p><h3 id="skypestyles"><a href="http://bit.ly/rjsOT1">SkypeStyles</a></h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/mac-apps-017.jpg" alt="SkypeStyles" title="mac-apps-017" width="450" height="253" class="alignnone size-full wp-image-6326" /></p><p>使ってないSkypeなんですが、見た目を変更する「<a href="http://bit.ly/rjsOT1">SkypeStyles</a>」ってのもあります。ファイルをダウンロード後、解凍してダブルクリックでインストールされます。あと、本家Skypeでも「<a href="http://bit.ly/pPYaeF">Create a Skype for Mac chat style</a>」というコンテスト？が始まってますね。</p><h3 id="kindleformac"><a href="http://amzn.to/pRDWVw">Kindle for Mac</a></h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/mac-apps-018.jpg" alt="Kindle for Mac" title="mac-apps-018" width="450" height="253" class="alignnone size-full wp-image-6327" /></p><p>日本国内の電子書籍市場は混沌としてますが、海外ではKindleやePub、PDF、mobiでのファイルの提供が盛んです。特にボクは洋書で勉強することが多いので「<a href="http://amzn.to/pRDWVw">Kindle for Mac</a>」は入れています。iPhone、iPad、Kindleと同期できるから便利なんですよね。あ、mobiのファイルとかも読めます。</p><h3 id="zinioreader"><a href="http://bit.ly/qmhObO">Zinio Reader</a></h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/mac-apps-019.jpg" alt="Zinio Reader" title="mac-apps-019" width="450" height="253" class="alignnone size-full wp-image-6328" /></p><p>こちらは書籍というよりは雑誌ですね。これまで何度も出してますが、もうZinioでいいじゃないかと。国内の出版社も古いモノからちょこちょこZinioに出てるみたいですけど。海外の雑誌を読むなら、書店で買うよりははるかに安いしきれいだし、すぐ読めてテキストだけ抽出したりもできます（ものによるけど）。</p><h3 id="calibre"><a href="http://bit.ly/5vcTfe">calibre</a></h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/mac-apps-020.jpg" alt="Calibre" title="mac-apps-020" width="450" height="253" class="alignnone size-full wp-image-6329" /></p><p>ePubリーダーはなかなか決定版がありません。「<a href="http://bit.ly/5vcTfe">calibre</a>」は指定されたCSSなんかもちゃんと反映されていいんですが、いちいち動作が重いのが難点です。ただ、Adobeさんの「<a href=“http://adobe.ly/nJhf1L”>Digital Editions</a>」はLionだとシステム要件を満たしてないとかでインストールできないし、仮にインストールできたとしてもリーダーとしては…なので、我慢してcalibreを。あ、作るなら「<a href="http://bit.ly/oTvKXW">sigil</a>」が便利ですよ。</p><h3 id="mobilemouse"><a href="http://bit.ly/pu6uZY">Mobile Mouse</a></h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/mac-apps-021.jpg" alt="Mobile Mouse Server" title="mac-apps-021" width="450" height="253" class="alignnone size-full wp-image-6330" /></p><p>えー、来週の17日（土）にもイベントで登壇する予定なのですが、ボクはたまに人前でしゃべることがあって、この「<a href="http://bit.ly/pu6uZY">Mobile Mouse</a>」を入れています。これ入れておくと、iPhoneをマウス代わりにMacが操作できます。イカのにぎり寿司みたいなマウスがない時とか家の中でも（笑）。</p><h3 id="mousepose"><a href="http://bit.ly/nDHavD">Mousepos&eacute;</a></h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/mac-apps-022.jpg" alt="Mousepose" title="mac-apps-022" width="450" height="253" class="alignnone size-full wp-image-6331" /></p><p>やはりこれもどちらかというとイベントだったり、Ustreamの放送だったりで使うのですが、マウスのクリックでピカッと光らせたり、ポインタの場所だけを明るく表示してくれるユーティリティです。ショートカットでパッと切り替えながらプレゼンできると、オーって言われるかもしれません。そういう歓声が欲しい方は入れておきましょう（笑）。</p><h3 id="safariextensionsgallery"><a href="https://extensions.apple.com/">Safari Extensions Gallery</a></h3><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/mac-apps-023.jpg" alt="Safari Extensions Gallery" title="mac-apps-023" width="450" height="253" class="alignnone size-full wp-image-6332" /></p><p>さて、ここからはおまけコーナー。ボク個人は仕事の関係もあって、日常的なブラウジングには GoogleさんのChromeを使っているのですが、Safariでブラウジングする時に入れておくと便利な機能拡張（Extensions）を紹介しておきますね。直接機能拡張へのリンクができないので、ギャラリーから探してください。</p><h4 id="adblock">AdBlock</h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/mac-apps-024.jpg" alt="AdBlock" title="mac-apps-024" width="450" height="253" class="alignnone size-full wp-image-6333" /></p><p>「AdBlock」は言うまでもありません。Webサイトを見ていてうざったい広告を何もしないで非表示にしてくれるモノです。オプションで個別に登録もできますが、自動的にリストを拾ってそれを反映してくれるので楽です。特にほら、MacBookで出先で回線が細い時とか邪魔でしょ？（笑）。</p><h4 id="facebookcleaner">Facebook Cleaner</h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/mac-apps-025.jpg" alt="Facebook Cleaner" title="mac-apps-025" width="450" height="253" class="alignnone size-full wp-image-6334" /></p><p>「Facebook Cleaner」は、Facebookの右側に出てる広告とかPokeとかを非表示にしてくれます。右側のカラムがスッキリして気分もよろしゅうございます。</p><h4 id="autopagerize">AutoPagerize</h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/mac-apps-026.jpg" alt="AutoPagerize" title="mac-apps-026" width="450" height="253" class="alignnone size-full wp-image-6335" /></p><p>「AutoPagerize」を知らない方もまだまだ多いかもしれませんね。えっと、ページが連続するもの、たとえばGoogleの検索結果とかで数字とか「次へ」をクリックしてなくても、自動的に次のページを取得して繋げてくれる機能拡張です。Safariだけでなく、いろいろなブラウザで使えます。ありがたや…。</p><h4 id="stopreloadbutton">Stop/Reload Button</h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/mac-apps-027.jpg" alt="Stop-Reload button" title="mac-apps-027" width="450" height="253" class="alignnone size-full wp-image-6336" /></p><p>ページをリロードしたければ Cmd＋Rのショートカットでいいわけですが、昔のブラウザみたいにツールバーに出しておきたければこちらの「Stop/Reload Button」を。</p><h4 id="javascriptblacklist">JavaScript Blacklist</h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/mac-apps-028.jpg" alt="JavaScript Blacklist" title="mac-apps-028" width="450" height="253" class="alignnone size-full wp-image-6337" /></p><p>いまの世の中、 JavaScriptがないと動かない（見れない）サイトもあったりしますが、たまにそれが原因でイタズラされちゃったりもしますからね。「JavaScript Blacklist」を入れておけば、特定のドメインのJavaScriptを実行しないようにできます。何かサイトにアクセスすることで問題がおきた時のために。</p><h4 id="googleanaliticsopt-out"><a href="http://bit.ly/d9912w">Google Analitics Opt-out</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/mac-apps-029.jpg" alt="Google Analytics Opt-out" title="mac-apps-029" width="450" height="253" class="alignnone size-full wp-image-6338" /></p><p>最後はSafariのギャラリーからはインストールできない「<a href="http://bit.ly/d9912w">Google Analitics Opt-out</a>」を。そのままです、サイトにアクセスした情報を取得・解析するGoogle Analyticsにデータを送信しないようにするものですね（別にアクセスした情報ぐらいはいいんですけどｗ）。他のブラウザだと、広告系も排除するプラグインが配布されているのですが、残念ながらSafariはこれだけしか提供されていません。</p><h3>というわけで、次回は…</h3><p>おまけを入れたら長くなっちゃいました（笑）。ま、そんなわけで、今回は日常生活をちょっと便利にするかもしれないアプリケーションを紹介してみました。いかがでしたかね？ ちなみにソーシャル系のサービスのクライアントは何一つ入れていません。画面の上とか下でチコチコお知らせされたりしても気になるだけなので、何か見たくなったらブラウザで繋いでます。</p><p>次回は、またWebデザイナーさん向けに、Google Chromeの拡張機能でも紹介してみましょうか。</p> ]]></content:encoded> <wfw:commentRss>http://blog.gaspanik.com/os-x-apps-for-mac-beginners/feed</wfw:commentRss> <slash:comments>6</slash:comments> <xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/os-x-apps-for-mac-beginners" /> </item> <item><title>MacでWebデザイン、あると便利なアプリ48＋2</title><link>http://blog.gaspanik.com/osx-apps-for-web-designer</link> <comments>http://blog.gaspanik.com/osx-apps-for-web-designer#comments</comments> <pubDate>Thu, 08 Sep 2011 09:38:05 +0000</pubDate> <dc:creator>[cipher]</dc:creator> <category><![CDATA[articles]]></category> <category><![CDATA[lifehacks]]></category> <category><![CDATA[scribbling]]></category> <category><![CDATA[works]]></category> <category><![CDATA[applications]]></category> <category><![CDATA[apps]]></category> <category><![CDATA[lion]]></category> <category><![CDATA[osx]]></category> <category><![CDATA[softwares]]></category> <category><![CDATA[system]]></category> <category><![CDATA[tools]]></category> <category><![CDATA[webdesign]]></category><guid isPermaLink="false">http://blog.gaspanik.com/?p=6250</guid> <description><![CDATA[これからWebデザイナーになりたいなとか、これからMacに変えちゃおうかな？と思ってる皆さんに向けて、Macを使ってWeb制作とかする時にあると便利なアプリをまとめてみました。今現在MacでWeb制作をしている皆さんには定番なのも多く含まれますが、最後まで流し読むと「え？何それ」みたいなのがあるかもです。]]></description> <content:encoded><![CDATA[<p>最近Webデザイン系のいろいろなセミナーやイベントに出ると、MacBookなんとかを持ってる方を多く見かけます。で、これからWebデザイナーになりたいなとか、これからMacに変えちゃおうかな？と思ってる皆さんに向けて、Macを使ってWeb制作とかする時にあると便利なアプリをまとめてみました。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-000.png" alt="OS X Apps for Web Designers" title="webdev_tools-000" width="450" height="253" class="alignnone size-full wp-image-6201" /></p><p>「Web制作といえば、AdobeのCreative Suite」みたいな人も多いでしょうが、サブスクリプションプランが始まったとはいえ、いきなりウン十万もソフト含め投資できないこともありますからね（会社が買ってくれるならいいですｗ）。別にそれがなくても、他で代用すれば仕事はできるから大丈夫です。</p><p>いま現在MacでWeb制作をしている皆さんには定番なのも多く含まれますが、ちょうどこないだLionデビューして環境整備がてらまとめたので、最後まで流し読むと「え？何それ」みたいなのがあるかもです。</p><p>今回は各種ブラウザとサーバ関係なんかは入れてません。では、48（＋2）個いってみましょうか。</p><p><span id="more-6250"></span></p><h3>グラフィック関係のエディタやツール</h3><h4 id="lineform"><a href="http://bit.ly/pi8wvG">Lineform</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-001.jpg" alt="Lineform" title="webdev_tools-001" width="450" height="253" class="alignnone size-full wp-image-6202" /></p><p>「<a href="http://bit.ly/pi8wvG">Lineform</a>」は、Illustratorの置き換えになるというか、パスを使ってイラストを描いたりとかっていうベクタードローイングアプリケーション。</p><h4 id="sketch"><a href="http://bit.ly/nfNeAG">Sketch</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-002.jpg" alt="Sketch" title="webdev_tools-002" width="450" height="253" class="alignnone size-full wp-image-6203" /></p><p>「<a href="http://bit.ly/nfNeAG">Sketch</a>」もまたベクタードローイングアプリケーション。App Storeのレビューではバグがあるとか書いてありますが、比較的安価なのと書き出しのフォーマットが多いのでいいかな、と。</p><h4 id="drawit"><a href="http://bit.ly/rsm4Qq">Drawit</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-003.jpg" alt="Drawit" title="webdev_tools-003" width="450" height="253" class="alignnone size-full wp-image-6204" /></p><p>Sketchを出しているところのもう一個のアプリ「<a href="http://bit.ly/rsm4Qq">Drawit</a>」は、ベクターデータをビットマップ風に扱えるもの。フィルターかけたりとか。Web制作だと、UIとかアイコンとか作ったりもしますからね。</p><h4 id="inkscape"><a href="http://bit.ly/qMExzl">Inkscape</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-004.jpg" alt="Inkscape" title="webdev_tools-004" width="450" height="253" class="alignnone size-full wp-image-6205" /></p><p>Illustratorの置き換えになるアプリケーションとして有名な「<a href="http://bit.ly/qMExzl">Inkscape</a>」は、オープンソースで開発されています。SVGベースになってますが、.aiファイルとかを読み込んだり.epsで書き出したりといったことも（開けないのもあるとは思う）。</p><h4 id="adobephotoshopelements"><a href="http://adobe.ly/aUacht">Adobe Photoshop Elements</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-005.jpg" alt="Photoshop Elements" title="webdev_tools-005" width="450" height="253" class="alignnone size-full wp-image-6206" /></p><p>Webデザインにおいて、ゴリゴリとレイヤー重ねてイメージを作るって用途ではなく、簡単に写真を修正・加工するぐらいなら「<a href="http://adobe.ly/aUacht">Photoshop Elements</a>」で十分じゃないかと。実際、ボクは一番使ってました（一応過去形）。</p><h4 id="pixelmator"><a href="http://bit.ly/bHig3W">Pixelmator</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-006.jpg" alt="Pixelmator" title="webdev_tools-006" width="450" height="253" class="alignnone size-full wp-image-6207" /></p><p>Photoshopの完全なる置き換えにはならないと思いますが、安価で一通りの画像編集ができることで有名な「<a href="http://bit.ly/bHig3W">Pixelmator</a>」。App Storeでも2,600円です。桁は間違っていません（笑）。パスがないとか、そのぐらいですか？</p><h4 id="imageoptim"><a href="http://bit.ly/j9hSRQ">ImageOptim</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-007.jpg" alt="ImageOptim" title="webdev_tools-007" width="450" height="253" class="alignnone size-full wp-image-6208" /></p><p>Webサイトの表示に時間がかかる原因のひとつは、サイトで使ってる画像の量やサイズだったりもします。そんなJPGやPNGの画像は、最適化すればもっと軽くなるわけで。最近「<a href="http://jpegmini.com/">jpegmini</a>」というとんでもないサービスが話題ですが、それはそれとして「<a href="http://bit.ly/j9hSRQ">ImageOptim</a>」は入れとかないと。</p><h4 id="quickspritesformacosx"><a href="http://bit.ly/qR42hm">Quick Sprites for Mac OS X</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-008.jpg" alt="Quick Sprites" title="webdev_tools-008" width="450" height="253" class="alignnone size-full wp-image-6209" /></p><p>CSS Sprite作るのって、画像を並べるだけなら簡単なんだけど（笑）、それからCSSを作ってとかって作業がちょっと面倒。そんな作業を簡略化してくれるのが、この「<a href="http://bit.ly/qR42hm">Quick Sprites</a>」です。デモの動画がサイトにありますよ。</p><h4 id="omnigraffle"><a href="http://bit.ly/neQsCI">OmniGraffle</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-009.jpg" alt="OmniGraffle" title="webdev_tools-009" width="450" height="253" class="alignnone size-full wp-image-6210" /></p><p>ダイアグラムやフローチャートといった図を作れるアプリケーションとして有名な「<a href="http://bit.ly/neQsCI">OmniGraffle</a>」は、ワイヤーフレームとか作るのにも重宝します。海外に目を向けると、Webサイトやスマートフォンサイト用のOmniGraffle用のステンシル（拡張パックみたいなのね）が沢山公開されています。</p><h4 id="review"><a href="http://bit.ly/o4vBmj">Review</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-010.jpg" alt="Review" title="webdev_tools-010" width="450" height="253" class="alignnone size-full wp-image-6211" /></p><p>「<a href="http://bit.ly/o4vBmj">Review</a>」は、MacからpsdをiPhoneに飛ばして、実機でモックアップを確認できる代物のようです。もちろんRetinaも古いのも対応。なにげに初期段階では便利ですよね、きっと。似たようなので「<a href="http://bit.ly/keffgG">Prototypes</a>」ってのもあって、こっちはボタンの指定なんかもできちゃったり。</p><h3>テキストエディタとかコーディング系</h3><h4 id="coda"><a href="http://bit.ly/pelFqB">Coda</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-011.jpg" alt="Coda" title="webdev_tools-011" width="450" height="253" class="alignnone size-full wp-image-6212" /></p><p>いまさら説明の必要もない気はしますが、Dreamweaverの置き換え的にコードの入力補完機能やサイト管理機能などが充実しているアプリケーションが「<a href="http://bit.ly/pelFqB">Coda</a>」です。最新版はSubversionにも対応してます。</p><h4 id="sublimetext2"><a href="http://bit.ly/o0HPHm">Sublime Text 2</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-012.jpg" alt="Sublime Text 2" title="webdev_tools-012" width="450" height="253" class="alignnone size-full wp-image-6213" /></p><p>ボクは普段 TextMateというエディタを使ってるんですが、今回 Lionにするにあたって最近日本語が使えるようになったという「<a href="http://bit.ly/o0HPHm">Sublime Text 2</a>」に。いろいろな言語に対応したテキストエディタです。省略形からコードを展開する機能はデフォで搭載されていて、Windows版とかもあります。</p><h4 id="sublime2zencoding"><a href="http://bit.ly/qPXkFf">Sublime 2 ZenCoding</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-013.jpg" alt="ZenCoding for Sublime 2" title="webdev_tools-013" width="450" height="253" class="alignnone size-full wp-image-6214" /></p><p>Sublime 2は、HTMLとかJSなら省略形から展開してくれるんですが、さすがにZen-Codingになれた指先にはCSSを展開してくれないのが困るわけで…。欧米の皆さんは仕事が速くて助かります、こちら <a href="http://bit.ly/qPXkFf">Sublime 2用のZen-Codingプラグイン</a>です。</p><h4 id="byword"><a href="http://bit.ly/nxsNfJ">Byword</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-014.jpg" alt="Byword" title="webdev_tools-014" width="450" height="253" class="alignnone size-full wp-image-6215" /></p><p>「<a href="http://bit.ly/nxsNfJ">Byword</a>」はテキストエディタの一種で、Markdownでテキストを編集できる素敵アプリ。Markdownは、サイト内の記事をHTML込みで書くときとか便利で、いちいちマークアップしなくてよくて書き出せばHTMLになります。iA Writerでも使えるのかな？ フルスクリーンにも対応しているので書くことにも集中できます。</p><h4 id="jeditx"><a href="http://bit.ly/piu6V5">Jedit X</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-015.jpg" alt="Jedit X" title="webdev_tools-015" width="450" height="253" class="alignnone size-full wp-image-6216" /></p><p>日本語のテキストエディタの定番「<a href="http://bit.ly/piu6V5">Jedit X</a>」。テキストだけを集中して書く、文字数とかを気にしながら書くといった時だけでなく、送られてきたテキスト原稿の「全角・半角」を統一する時、複数ファイルに含まれるテキストの検索・置換とかにも重宝します。ないと困ります。</p><h4 id="textexpander"><a href="http://bit.ly/otvgdK">TextExpander</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-016.jpg" alt="TextExpander" title="webdev_tools-016" width="450" height="253" class="alignnone size-full wp-image-6217" /></p><p>「<a href="http://bit.ly/otvgdK">Text Expander</a>」はテキストの入力支援というか、登録した文字列を任意の文字入力で呼び出すアプリケーションです。IMEの単語登録だと文字数の限界とかもありますから、ちょっとしたコードなどをスニピットとして登録して呼び出す、みたいな使い方ができます。HTMLコードのスニピットとかも公開されてます。</p><h3>HTTP、FTP、その他のクライアントとか</h3><h4 id="webkit"><a href="http://nightly.webkit.org/">WebKit</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-017.jpg" alt="Webkit" title="webdev_tools-017" width="450" height="253" class="alignnone size-full wp-image-6218" /></p><p>「<a href="http://nightly.webkit.org/">Webkit</a>」は、SafariやChromeのレンダリングエンジンとして有名ですね。オープンソースで開発されています。で、なぜWebkitまでっていうと、電子書籍のフォーマットであるePub 3.0の確認用として入れてます。縦書きとかその辺もあるんで（Chromeでも見れるかな、いまは）。</p><h4 id="transmit"><a href="http://bit.ly/r2sAOS">Transmit</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-018.jpg" alt="Transmit" title="webdev_tools-018" width="450" height="253" class="alignnone size-full wp-image-6219" /></p><p>Codaを出しているPanicさんが、古くから単体のFTPクライアントとして出しているのが「<a href="http://bit.ly/r2sAOS">Transmit</a>」です。Mac用のFTPクライアントには、CyberduckやForkLift、FileZillaなんかもありますけど、対応しているプロトコルの多さとタブで複数サイトに接続できるのが決め手ですかね。ずっと使ってます。</p><h4 id="interarchy"><a href="http://bit.ly/qfQQG9">Interarchy</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-019.jpg" alt="Interarchy" title="webdev_tools-019" width="450" height="253" class="alignnone size-full wp-image-6220" /></p><p>なんか久しぶりに名前を聞いた気がするんですが、「<a href="http://bit.ly/qfQQG9">Interarchy</a>」もFTPクライアントのひとつです。これをなんで取り上げるかというと、Transmitでも対応していないサーバ（Google Storage、Rackspace Cloud Files）もオッケイと。いざという時のために。</p><h4 id="tower"><a href="http://bit.ly/efpCQF">Tower</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-020.jpg" alt="Tower" title="webdev_tools-020" width="450" height="253" class="alignnone size-full wp-image-6221" /></p><p>ボクは普段ひとりで自己完結してる仕事が多くて、Gitとか使うこともないんですが一応。「<a href="http://bit.ly/efpCQF">Tower</a>」はゲームじゃなくて、GitのGUIクライアントです。Gitのクライアントは他にもいろいろあります。</p><h4 id="githubformac"><a href="http://bit.ly/mcRHH2">GitHub for Mac</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-021.jpg" alt="GitHub for Mac" title="webdev_tools-021" width="450" height="253" class="alignnone size-full wp-image-6222" /></p><p>ま、そんなわけなので GitHubを使うこともないわけですが（笑）、いざ使わなければならないという時のために、GitHubのGUIクライアント「<a href="http://bit.ly/mcRHH2">GitHub for Mac</a>」もね。</p><h4 id="versions"><a href="http://bit.ly/rsKqsI">Versions</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-022.jpg" alt="Versions" title="webdev_tools-022" width="450" height="253" class="alignnone size-full wp-image-6223" /></p><p>DreamweaverやCodaでもSubversionはサポートしてますが、他にもSubversionのGUIクライアントがいくつかあります。そのひとつがこの「<a href="http://bit.ly/rsKqsI">Versions</a>」。余談ですが、こちらの開発元はこないだFacebookに買収されました。</p><h4 id="terminal"><a href="http://bit.ly/rsf422">Terminal</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-023.jpg" alt="Terminal" title="webdev_tools-023" width="450" height="253" class="alignnone size-full wp-image-6224" /></p><p>これがあるとないとでは大違いなのが、OS Xに標準搭載されている「<a href="http://bit.ly/rsf422">ターミナル</a>」です。いや、ないと困ります。直接サーバにログインしてファイル操作したり、いざとなったらこれからSFTPするぐらいの勢いで。この中では「vi（vim）」とか使います。</p><h4 id="alkane"><a href="http://bit.ly/fcK1cj">Alkaline</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-049.jpg" alt="Alkane" title="webdev_tools-049" width="450" height="253" class="alignnone size-full wp-image-6273" /></p><p>「<a href="http://bit.ly/fcK1cj">Alkaline</a>」は、MacでWindowsのIEの確認を…というか、URLを入力して指定したブラウザのバージョンでプレビューできるアプリケーション。LitmusというEメールのプレビューサービスとか解析をやってる会社のです。無償だと制限がありますが、HTMLメールの確認とかも必要であればいいかも。</p><h4 id="betterlinktester"><a href="http://bit.ly/qVDhbU">Better Link Tester</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-024.jpg" alt="Better Link Tester" title="webdev_tools-024" width="450" height="253" class="alignnone size-full wp-image-6225" /></p><p>「<a href="http://bit.ly/qVDhbU">Better Link Tester</a>」はリンクチェッカー。404とか出てないかとか、ちまちま確認とかしてられないですからね。Dreamweaverとか使ってない方へ。</p><h4 id="charleswebdebuggingproxy"><a href="http://bit.ly/jh7v9w">Charles Web Debugging Proxy</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-025.jpg" alt="Charles" title="webdev_tools-025" width="450" height="253" class="alignnone size-full wp-image-6226" /></p><p>普通に表向きのWebデザインだけやってるとあまり用はないかもしれませんが、「<a href="http://bit.ly/jh7v9w">Charles</a>」はWebサイトのデバッグ用のプロキシアプリです。これがあると、リクエストに応じて何（どういうデータ）が戻ってきてるとかわかるし、回線速度のシミュレートができます。ふふふ（謎）。</p><h3>ファイルのやりとり、原稿表示・確認系ツール</h3><h4 id="dropbox"><a href="http://bit.ly/oCvZlm">Dropbox</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-026.jpg" alt="Dropbox" title="webdev_tools-026" width="450" height="253" class="alignnone size-full wp-image-6227" /></p><p>「<a href="http://bit.ly/oCvZlm">Dropbox</a>」は説明の必要もないですよね。ファイルのやりとりする時には、メールで添付する以外の選択肢としてオンラインストレージとか使うと便利です。ローカルのファイルのやりとりでも便利なので、ちょっとしたファイルを移動する時はバックアップ代わりに使っています。</p><h4 id="iwork09keynotenumberspages"><a href="http://bit.ly/nHnqlb">iWork ’09</a>（Keynote / Numbers /Pages）</h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-027.jpg" alt="iWork" title="webdev_tools-027" width="450" height="253" class="alignnone size-full wp-image-6228" /></p><p>いわゆるMac版のオフィスアプリケーション「<a href="http://bit.ly/nHnqlb">iWork ’09</a>」。Keynoteはプレゼン用途だけでなく、ワイヤーフレームを作ったりもできますからね。Keynote用のパーツとかも海外では公開されていますよ。</p><h4 id="openoffice"><a href="http://ja.openoffice.org/">OpenOffice</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-028.jpg" alt="OpenOffice" title="webdev_tools-028" width="450" height="253" class="alignnone size-full wp-image-6229" /></p><p>オープンソースで開発されているオフィススイートといえば「<a href="http://ja.openoffice.org/">OpenOffice</a>」が有名ですね。これをMacに最適化した「<a href="http://bit.ly/nnRftG">NeoOffice</a>」もありますが、いろいろあってこっち入れてます（謎）。</p><h4 id="preview"><a href="http://bit.ly/pArbEc">Preview</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-029.jpg" alt="Preview" title="webdev_tools-029" width="450" height="253" class="alignnone size-full wp-image-6230" /></p><p>これもOS X標準搭載のアプリケーションですが…（笑）、「<a href="http://bit.ly/pArbEc">Preview</a>」は送られてくる原稿のちょっとした確認に重宝しています。フォルダをドラッグすれば中のファイルが一個にまとまったり、簡単な編集もできるし便利っす。</p><h4 id="graphicconverter"><a href="http://bit.ly/qfoVCW">GraphicConverter</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-030.jpg" alt="GraphicConvertor" title="webdev_tools-030" width="450" height="253" class="alignnone size-full wp-image-6231" /></p><p>これで開けない画像形式とかあるのかな？って思うぐらい、多種多様なフォーマットに対応したグラフィックエディタが「<a href="http://bit.ly/qfoVCW">GraphicConverter</a>」です。いまではPhotoshopにもバッチ処理とかありますけど、これのバッチ処理とかも強力です。開けない画像はとりあえずコレにドラッグ。</p><h3>メディア系プラグイン、映像編集・コンバートなど</h3><h4 id="adobeflashplayer"><a href="http://bit.ly/cf1Ptd">Adobe Flash Player</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-031.jpg" alt="Flash Player" title="webdev_tools-031" width="450" height="253" class="alignnone size-full wp-image-6232" /></p><p>いや、Creative Suite入れれば入りますけど、Lionからは標準でインストールされてないようで（笑）。Flashコンテンツ見るためには必要ですからね…。あ、そうそう、Chromeの中のFlash Playerは別であらかじめ組み込み済みです。Flash Playerに脆弱性があったとしても、先に更新されちゃったりします（笑）。</p><h4 id="windowsmediaplayerformacflip4macwmv"><a href="http://bit.ly/oxxqCd">Windows Media player for Mac</a>（Flip4Mac WMV）</h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-032.jpg" alt="Windows Media player for Mac" title="webdev_tools-032" width="450" height="253" class="alignnone size-full wp-image-6233" /></p><p>「<a href="http://bit.ly/oxxqCd">Flip4Mac WMV</a>」は、無償で利用できるWMV用のQuickTimeコンポーネントです。無償版は見るだけですけど、元がWMVのファイルをコンバートしないといけない時とかもあります。ライセンスを買って入力するだけで、書き出しできるバージョンへ切り替わります。</p><h4 id="microsoftsilverlight"><a href="http://bit.ly/oQ2PvB">Microsoft Silverlight</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-033.jpg" alt="Silverlight" title="webdev_tools-033" width="450" height="253" class="alignnone size-full wp-image-6234" /></p><p>Microsoftさんの「<a href="http://bit.ly/oQ2PvB">Silverlight</a>」も閲覧用になりますが、念のため入れておきましょう。なくて困ったことはほとんどないのですが…（笑）。</p><h4 id="mirovideoconverter"><a href="http://bit.ly/pIdGUI">Miro Video Converter</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-034.jpg" alt="Miro Video Converter" title="webdev_tools-034" width="450" height="253" class="alignnone size-full wp-image-6235" /></p><p>ボクは仕事の関係上、動画を扱うことが多かったのもありますが、世のWebデザイナーさんもこれから動画を掲載しなければ…とかあるかもしれません。映像にはコーデックというややこしいものがあるんですが、これを入れておくと多様なフォーマット（MP4 / WebM / Ogg Theora）に変換できます。</p><h4 id="quicktime7pro"><a href="http://bit.ly/qF6Bry">QuickTime 7 Pro</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-035.jpg" alt="QuickTime 7" title="webdev_tools-035" width="450" height="253" class="alignnone size-full wp-image-6236" /></p><p>OS X LionになってからQuickTime Xになってしまって、一部の形式を除いてファイルの書き出しとかができなくなってしまい…。仕事だと何かあった時にちょっと困るので、Lionにも入れられる<a href="http://bit.ly/qF6Bry">Snow Leopard対応の7.6.6</a>を入れてPro版に。</p><h4 id="finalcutprox"><a href="http://bit.ly/ntYjqT">Final Cut Pro X</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-036.jpg" alt="Final Cut Pro" title="webdev_tools-036" width="450" height="253" class="alignnone size-full wp-image-6237" /></p><p>普通のWebデザイナーさんだと動画編集までしないかもしれませんけど（笑）。以前は、簡単な動画編集用としてFinal Cut Expressがありましたが、統合されて「<a href="http://bit.ly/ntYjqT">Final Cut Pro X</a>」になってましてね…、これからはコレで。</p><h4 id="ustreamproducer"><a href="http://bit.ly/pfyGgR">Ustream Producer</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-037.jpg" alt="Ustream Producer" title="webdev_tools-037" width="450" height="253" class="alignnone size-full wp-image-6238" /></p><p>やはり普通に生活していると動画配信とかもやることはないでしょうが、ボクは仕事でやる機会がゼロとは言えないので、最近はUstreamでしょうねってことで「<a href="http://bit.ly/pfyGgR">Ustream Producer</a>」。</p><h4 id="camtwist"><a href="http://bit.ly/pl2rL7">CamTwist</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-038.jpg" alt="CamTwist" title="webdev_tools-038" width="450" height="253" class="alignnone size-full wp-image-6239" /></p><p>Ustream Producerだけでも十分ですが、テロップ入れたりとかするのに重宝する「<a href="http://bit.ly/pl2rL7">CamTwist</a>」も入れておけば万全ですね。</p><h3>圧縮、解凍、その他ツール</h3><h4 id="macwinzipperwinarchiver"><a href="http://bit.ly/nMJyM4">MacWinZipper</a>（WinArchiver）</h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-039.jpg" alt="MacWinZipper" title="webdev_tools-039" width="450" height="253" class="alignnone size-full wp-image-6240" /></p><p>ファイルのzip圧縮なら選択して右クリックで「〜を圧縮」でいいんですけど、世の中には「Thumbs.db」入れてくる割には「.DSstore」を嫌う人もいますからね（笑）。Windowsの方にもそうでない方にもクリーンなzipを送るために。あと、日本語のファイル名をつける人は文字化けしないアーカイブになります。</p><h4 id="theunarchiver"><a href="http://bit.ly/qeov1K">The Unarchiver</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-040.jpg" alt="The Unarchiver" title="webdev_tools-040" width="450" height="253" class="alignnone size-full wp-image-6241" /></p><p>zipはダブルクリックで展開されるし、他の圧縮形式を解凍するなら後述のStuffit Expander一個あればどうにかなりはするものの、.lhaだとフォルダ付きが全部一カ所に展開されるとか不具合もあって、こちらの「<a href="http://bit.ly/qeov1K">Unarchiver</a>」を入れてます。</p><h4 id="stuffitexpander"><a href="http://bit.ly/oH7C2U">StuffIt Expander</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-041.jpg" alt="StuffIt Expander" title="webdev_tools-041" width="450" height="253" class="alignnone size-full wp-image-6242" /></p><p>前述のUnarchiverは、.sitにも対応しているみたいですが、開けないのとかあっても困るので、念のため「<a href="http://bit.ly/oH7C2U">Stuffit Expander</a>」も用意しておきましょう。いまどきあんまり見かけませんよね、サイトを見ても昔の勢いは感じられません（笑）。</p><h3>システム関係のアプリケーションなど</h3><h4 id="menupop"><a href="http://bit.ly/qa8S92">MenuPop</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-050.jpg" alt="MenuPop" title="webdev_tools-050" width="450" height="253" class="alignnone size-full wp-image-6288" /></p><p>MBPとかMBAとかで作業してる人はショートカットの達人かもしれませんが、ショートカットがなければトラックパッドでえっちらほっちらメニューまで…。大きなモニタの人も似たようなもんですね。「<a href="http://bit.ly/qa8S92">MenuPop</a>」は、任意のキー入力でメニューをカーソルの位置に表示します。便利です、はい。</p><h4 id="appcleaner"><a href="http://bit.ly/qOgGhk">AppCleaner</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-042.jpg" alt="AppCleaner" title="webdev_tools-042" width="450" height="253" class="alignnone size-full wp-image-6243" /></p><p>アンインストーラーのないことで有名なOS Xです。アプリケーションをゴミ箱に捨てればそれはなくなりますけど、関連ファイルまでは消去されません。そこで「<a href="http://bit.ly/qOgGhk">AppCleaner</a>」とかを入れておくわけですね。ドラッグすれば関連ファイルも一網打尽。ゴミ箱に入れれば勝手にやってくれるオートデリートみたいな機能は初期設定で有効にできます。</p><h4 id="cleanapp"><a href="http://bit.ly/eqMTFd">CleanApp</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-043.jpg" alt="CleanApp" title="webdev_tools-043" width="450" height="253" class="alignnone size-full wp-image-6244" /></p><p>「<a href="http://bit.ly/eqMTFd">CleanApp</a>」もアンインストーラーの一種なんですが、こちらはファイルのインストールのログとかも記録できたり、長期間使ってないファイルの表示、使わない言語を削除したりもできます。これはこれで便利なんですよね。あ、有償です。似たような別のだと<a href="http://bit.ly/oIVebF">CleanMyMac</a>とか。</p><h4 id="launchpad-control"><a href="http://bit.ly/r4zdlZ">Launchpad-Control</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-044.jpg" alt="Launchpad-Control" title="webdev_tools-044" width="450" height="253" class="alignnone size-full wp-image-6245" /></p><p>OS X Lionから搭載されたLaunchpadですが、何のためにあるのかいまいちわかりません（笑）。別にLaunchpadになくてもいい、インストールしたアプリもずらずら並んでいくのでかえって使いづらいというね…。そんなLaunchpadのアプリの表示非表示をコントロールするのがこの「<a href="http://bit.ly/r4zdlZ">Lauchpad-Control</a>」です。</p><h4 id="clamxavwclamxavsentry"><a href="http://www.ClamXav.com">ClamXav</a>（w/ ClamXav Sentry）</h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-045.jpg" alt="ClamXav" title="webdev_tools-045" width="450" height="253" class="alignnone size-full wp-image-6246" /></p><p>OS Xはゼロとは言いませんが、いわゆるウイルス的なものの数はさほど多くはありません。とはいえ、アンチウイルスソフトも入れておきましょう。市販のアプリもいくつかありますが、ボクはサーバにも使ってたりしたコレを入れてます。なお、App Store版は常駐監視してくれるClamXav Sentryが入ってません。</p><h4 id="fontcase"><a href="http://bit.ly/nQFoLW">Fontcase</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-046.jpg" alt="Fontcase" title="webdev_tools-046" width="450" height="253" class="alignnone size-full wp-image-6247" /></p><p>OS Xに標準搭載されているFont Bookでも十分な気はしますが、フォント管理ソフトが必要であれば「<a href="http://bit.ly/nQFoLW">Fontcase</a>」とか「Font Explorer X」とか入れておくといいですかね。ちょっとバグとかあるみたいですけどｗ</p><h4 id="memorysweeperpro"><a href="http://bit.ly/oSHNdr">Memory Sweeper Pro</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-047.jpg" alt="Memory Sweeper Pro" title="webdev_tools-047" width="450" height="253" class="alignnone size-full wp-image-6248" /></p><p>メモリの空き容量を増やしてくれるお掃除アプリ。この類のアプリはいろいろあります。しかし、どれもこれもアイコンとか表示とかがダサいというか、美しさのかけらも感じられない。で、この「<a href="http://bit.ly/oSHNdr">Memory Sweeper Pro</a>」を。</p><h4 id=“namemangler”><a href="http://bit.ly/mZJQBN">Name Mangler</a></h4><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/09/webdev_tools-048.jpg" alt="Name Mangler" title="webdev_tools-048" width="450" height="253" class="alignnone size-full wp-image-6249" /></p><p>ファイルのリネームとか膨大な数だと気が狂いますね…、拡張子の変更とかそういうの含め。「<a href="http://bit.ly/mZJQBN">Name Mangler</a>」は、フォルダ内のファイル名を検索置換したり、連番に変えたりで重宝します。リネーム系のソフトはいろいろあります。</p><h3>といった感じでどうでしょうか？</h3><p>AdobeさんのCSなど定番中の定番はのぞいて、できるだけ安価で用意できそうなものを中心にしてみましたがいかがでしたでしょうか。テキストエディタなどは好みなんかもあるので、必ずしもココにあるものがいいとは言いませんが（笑）。ま、それ以外はインストールしないまでも頭の中に覚えておけば、いずれ使う時がくるかもしれません。</p><p>ひとつのアプリケーションでの作業に固執すると、作業内容によっては無駄に時間もかかることもあります。やりたいことにあわせて適材適所で切り替えるのが仕事効率化のコツです。では、Macで良いWeb制作ライフを。</p><p>&rarr; <a href="http://bit.ly/q1907Z">MacBook Proに入れたアプリ22個＋おまけ | gaspanik weblog</a><br /> &rarr; <a href="http://bit.ly/rfhCES">人によっては便利なiPadアプリあれこれ | gaspanik weblog</a></p> ]]></content:encoded> <wfw:commentRss>http://blog.gaspanik.com/osx-apps-for-web-designer/feed</wfw:commentRss> <slash:comments>4</slash:comments> <xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/osx-apps-for-web-designer" /> </item> <item><title>ソーシャルなePubリーダー、Readmill</title><link>http://blog.gaspanik.com/social-epub-reader-app-readmill</link> <comments>http://blog.gaspanik.com/social-epub-reader-app-readmill#comments</comments> <pubDate>Wed, 24 Aug 2011 00:11:08 +0000</pubDate> <dc:creator>[cipher]</dc:creator> <category><![CDATA[articles]]></category> <category><![CDATA[lifehacks]]></category> <category><![CDATA[scribbling]]></category><guid isPermaLink="false">http://blog.gaspanik.com/?p=6143</guid> <description><![CDATA[Readmillは、iPad用のいわゆる普通のePubリーダーアプリで、前述したような他のソーシャルメディアと連携してハイライトをポストする機能も有しています。ただ、ReadmillのWebサイトと連動して新しい本を探したり、気になる人をフォローしたりといったソーシャルな側面を持っているんです。]]></description> <content:encoded><![CDATA[<p>最近の電子書籍リーダーアプリは、TwitterやFacebookと連携させて、ハイライトした箇所をポストするという機能をもつものが多くなってきました。AmazonのKindleしかり、先日紹介したDocStormしかり。それだと単に放り投げるだけなのですが、今回紹介する「<a href="http://readmill.com">Readmill</a>」はひと味違います。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/08/readmill-000.png" alt="readmill-000" title="readmill-000" width="450" height="253" class="alignnone size-full wp-image-6133" /></p><p>というわけで、また写真付きでどんなものかを説明してみましょう。</p><p><span id="more-6143"></span></p><h3>ソーシャルリーディングに向いてる、Readmill</h3><p>Readmillは、iPad用のいわゆる普通のePubリーダーアプリで、前述したような他のソーシャルメディアと連携してハイライトをポストする機能も有しています。ただ、ReadmillのWebサイトと連動して新しい本を探したり、気になる人をフォローしたりといったソーシャルな側面を持っているんですね。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/08/readmill-001.png" alt="readmill-001" title="readmill-001" width="450" height="253" class="alignnone size-full wp-image-6134" /></p><p>アカウントを登録するとこんな画面が出てきます。サイトにはリーダーの機能はないので、iPadアプリを落とせと言われます。素直にダウンロードしましょう。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/08/readmill-002.png" alt="readmill-002" title="readmill-002" width="450" height="253" class="alignnone size-full wp-image-6135" /></p><p>TwitterやFacebookのアカウントを使ってログインすることもできますが、それとは別にアカウントを作成して個別に連動させることもできます。</p><h3>Readmill for iPad をインストールする</h3><p>言われたとおり、iPad用のアプリをインストールします。アカウントを持っている場合は、サインインするとこのようなアカウントの連動の許可・不許可がでます。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/08/readmill-003.png" alt="readmill-003" title="readmill-003" width="450" height="253" class="alignnone size-full wp-image-6136" /></p><p>連動しないと意味もないので「ALLOW」で。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/08/readmill-004.png" alt="readmill-004" title="readmill-004" width="450" height="253" class="alignnone size-full wp-image-6137" /></p><p>Readmill for iPadの初回起動時にはこのような画面が出てきて、Readmillの使い方的なイントロダクションのePubがひとつ表示されます。これをタップすれば中身が読める、と。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/08/readmill-005.png" alt="readmill-005" title="readmill-005" width="450" height="253" class="alignnone size-full wp-image-6138" /></p><p>Readmillのアプリは日本語表示に問題ありませんが、現時点では縦の表示しかサポートしていないのと、いくつかのePubには既に仕込まれているだろうCSSがうまく反映されないとこでしょうか。それ以外は、文字サイズの変更や画面の輝度調整といった一般的なリーダーと同じ感じです。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/08/readmill-006.png" alt="readmill-006" title="readmill-006" width="450" height="253" class="alignnone size-full wp-image-6139" /></p><p>肝心のePubファイルの取り込みですが、DRMフリーなePubのみ対応しています。こちらは、オンラインのサービスから直接ダウンロードする方法、既にiPadに入ってるePubをReadmillで開きなおす方法、iTunesのアプリで転送する方法のいずれかで取り込みましょう。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/08/readmill-007.png" alt="readmill-007" title="readmill-007" width="450" height="253" class="alignnone size-full wp-image-6140" /></p><p>するとこんな感じの画面が出て「CONNECT」ボタンを押せばサイトの方に読んでる本が登録されます。読み始める際には、TwitterやFacebookにお知らせを出すことも可。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/08/readmill-008.png" alt="readmill-008" title="readmill-008" width="450" height="253" class="alignnone size-full wp-image-6141" /></p><p>サイトを確認すると登録した電子書籍が並んでいきます。読んでる途中のものは「Reading」、読み終わったものは「Finished」に表示が変わりますね（どこまで読んだか出るような気もしますが）。<a href="http://readmill.com/cipher">こんな感じです</a>。</p><h3>Readmillがソーシャルなとこ</h3><p>Readmillはソーシャルな側面を持っていますから、書籍に対するコメントやハイライトしてポストされた内容が表示されるようになっています。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/08/readmill-009.png" alt="readmill-009" title="readmill-009" width="450" height="253" class="alignnone size-full wp-image-6142" /></p><p>この本にはまだ誰も何も書いてませんけど（笑）。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/08/readmill-010.png" alt="readmill-010" title="readmill-010" width="450" height="253" class="alignnone size-full wp-image-6159" /></p><p>また、このような感じで登録されている書籍の一覧から次に読む本をブックマーク的に登録したり、気になるユーザーをフォローするといったこともできます。</p><p>これまでも自分が読んでいる本を登録したり、気になる箇所を書き留めるサービスはありましたし、一昨日ぐらいから始まった「<a href="http://liblar.com/">liblar</a>」もソーシャルメディアを使った人の繋がりを介して本の情報を共有するといった感じですね。</p><p>これから日本における電子書籍はどういう形で普及していくかわかりませんが、独自のフォーマットやアプリを使ってひとつの箱で囲ってしまうのか、比較的オープンな形にして個人の影響力やソーシャルの力を使って拡げていくのか、さぁどっちがいいんでしょう（笑）。</p> ]]></content:encoded> <wfw:commentRss>http://blog.gaspanik.com/social-epub-reader-app-readmill/feed</wfw:commentRss> <slash:comments>0</slash:comments> <xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/social-epub-reader-app-readmill" /> </item> <item><title>人によっては便利なiPadアプリあれこれ</title><link>http://blog.gaspanik.com/useful-ipad-apps-for-web-developer</link> <comments>http://blog.gaspanik.com/useful-ipad-apps-for-web-developer#comments</comments> <pubDate>Thu, 04 Aug 2011 14:23:55 +0000</pubDate> <dc:creator>[cipher]</dc:creator> <category><![CDATA[articles]]></category> <category><![CDATA[lifehacks]]></category> <category><![CDATA[scribbling]]></category> <category><![CDATA[apps]]></category> <category><![CDATA[ipad]]></category> <category><![CDATA[iphone]]></category> <category><![CDATA[productivity]]></category> <category><![CDATA[webdevelopment]]></category><guid isPermaLink="false">http://blog.gaspanik.com/?p=6078</guid> <description><![CDATA[他ではあまり紹介されないんだけどボクがiPadにインストールしている、Web制作とかそっち系のお仕事に従事されてる人たちには「あると便利かもしれないiPadアプリ」を選んでみました。]]></description> <content:encoded><![CDATA[<p>これまでちょこちょことiPadやiPhoneのアプリで便利そうなものを紹介してきました。で、今日はちょっと気が向いたので、他ではあまり紹介されないんだけどボクがiPadにインストールしている、Web制作とかそっち系のお仕事に従事されてる人たちには「あると便利かもしれないiPadアプリ」を選んでみました。</p><p>おまけ的にiPhoneしかないものもいくつか。あまりにも有名なものとかは省いてますので、あしからず。リンク先は、基本オフィシャルサイトで。</p><p><span id="more-6078"></span></p><h3>アクセス解析とか</h3><h4>AnalyticsPro for iPad</h4><p>Google Analyticsとかの集計を見るので有名なところだと「Analytics」とかがありますが、ボクが入れてるのはAnalyticsProです（AnalyticsはiPhoneだけ）。まぁぶっちゃけどれも変わらんよね、とは思うのですが（笑）。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/08/app-analyticspro.jpg" alt="app-analyticspro" title="app-analyticspro" width="450" height="253" class="alignnone size-full wp-image-6060" /></p><p>&rarr; <a href="http://bit.ly/91duL7">AnalyticsPro for iPad</a></p><h4>Ego</h4><p>Egoは、GAだけではなくてFeed BurnerとかMint、TwitterやTumblrのフォロワー数などを見れるダッシュボード的なアプリ。サービスを登録してドラッグしてあげるとその管理画面とかが表示されるものです。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/08/app-mint.jpg" alt="app-ego" title="app-ego" width="450" height="253" class="alignnone size-full wp-image-6069" /></p><p>&rarr; <a href="http://bit.ly/qyldQf">Ego — You&#8217;re important.</a></p><h3>Web制作効率化とか</h3><h4>Textastic</h4><p>Web制作系でコードを書いたりする人たちは手元にFTPとかが使えるエディタがひとつあると便利だと思います。これもまた有名どころだと「FTP On The Go」とかが紹介されたりするんですが、残念ながらSFTPとかFTPSとかのプロトコルに対応してなかったりします。</p><p>ボクは、FTPやSFTP（FTPS）、WebDAVだけでなくDropboxまでサポートし、80のファイルタイプを認識するエディタ「Textastic」を入れてます。ちょっと操作に癖があったり日本語の表示がいまひとつなんですが、プレビュー機能なんかもついてて便利です。他にSFTPに対応してるのは「Gusto」がありますね。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/08/app-textastic.jpg" alt="app-textastic" title="app-textastic" width="450" height="253" class="alignnone size-full wp-image-6074" /></p><p>&rarr; <a href="http://bit.ly/gq0vzt">Textastic – Syntax highlighting text editor, FTP, SFTP, Dropbox</a></p><h4>PlainText</h4><p>Dropboxと連動するテキストエディタの類は「iA Writer」とかが有名ですが、ボクは「WriteRoom」を作っていたところが出してる「PlainText」をメインで使っています。他にもMarkdownとかで書いた方が良い場合（自動的にHTMLにして保存したい時）は「Writing Kit」を使ったりもします。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/08/app-plaintext.jpg" alt="app-plaintext" title="app-plaintext" width="450" height="253" class="alignnone size-full wp-image-6071" /></p><p>&rarr; <a href="http://bit.ly/qxSsPc">PlainText — Dropbox text editing for iPad &#038; iPhone</a></p><h4>PhotoForge 2</h4><p>写真の修正などに使えるアプリは、「PS Express」がよく取り上げられてますけどあれじゃ役不足すぎるので、「PhotoForge 2」とか「Photogene」をインストールしています。レベル補正、トーンカーブをはじめとした各種補正が充実してるのはもちろんですが（Photogeneにトーンカーブはないけど）、修正したファイルを直接Dropboxに保存できるとか、そういうことの方が大事（笑）。そうすれば、あとはReaddleDocsからSFTPサーバにアップもできますからね。</p><p>ちなみにPhotoForge 2は、Dropboxの他にFlickrやPicasa、Tumblr、Twitter、Facebook、FTPにメールとか保存先もいろいろ選べます。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/08/app-photoforge.jpg" alt="app-photoforge" title="app-photoforge" width="450" height="253" class="alignnone size-full wp-image-6070" /></p><p>&rarr; <a href="http://bit.ly/mLpCIB">PhotoForge 2 &#8211; GhostBird Software</a></p><h4>UI Sketcher</h4><p>落書き程度にしろ何にしろ頭に思い浮かんだイメージなんかをメモ代わりに書いておく、場合によってはワイヤーフレームの下絵みたいなものを書いたりするアプリはいろいろありますね。ボクは方眼付きで1面もしくは6面で書けてDropboxに放り投げられる「UI Sketcher」、その他いくつかを使い分けています。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/08/app-uisketcher.jpg" alt="app-uisketcher" title="app-uisketcher" width="450" height="253" class="alignnone size-full wp-image-6075" /></p><p>&rarr; <a href="http://bit.ly/rcX68I">UI Sketcher: The User Interface Sketching Tool iPad App</a></p><h4>Prompt</h4><p>SSHでサーバに繋いでそこで直接ファイルを操作したりするターミナルアプリは、「iSSH」とかをはじめいろいろ出てるんですけど、「Coda」や「Transmit」で有名なパニックさんの「Prompt」をiPad、iPhoneの双方に入れています。これさえあれば、WordPressのインストールとか出先でも数分で終わります。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/08/app-prompt.jpg" alt="app-prompt" title="app-prompt" width="450" height="253" class="alignnone size-full wp-image-6072" /></p><p>&rarr; <a href="http://bit.ly/qmtdna">Prompt, nice SSH for iOS</a></p><h3>ファイルや電子書籍ビューアとか</h3><h4>ReaddleDocs</h4><p>PDFをはじめとしたドキュメントビューアといえば「GoodReader」とかが有名ですかね。でもね、アイコン嫌いなんですアレ（笑）。機能的にはGoodReaderとほぼほぼ一緒で、zip/unzipはもちろんメールの添付だけ拾い上げたりみたいなこともできます。取り扱えるファイル形式が若干多いぐらいでしょうか。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/08/app-readdle.jpg" alt="app-readdle" title="app-readdle" width="450" height="253" class="alignnone size-full wp-image-6106" /></p><p>&rarr; <a href="http://bit.ly/qaKdt5">ReaddleDocs for iPad</a></p><h4>Mercury</h4><p>ブラウザです（笑）。いわゆるタブブラウザなんですけど、リンク先のファイルダウンロード、Dropboxへの転送、輝度設定、UAの変更、アドブロッカー、フルスクリーン表示みたいな感じで、Safariではできないことを補完するために入れています。ブラウザによっては動作しないブックマークレットもちゃんと動作します。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/08/app-mercury.jpg" alt="app-mercury" title="app-mercury" width="450" height="253" class="alignnone size-full wp-image-6068" /></p><p>&rarr; <a href="http://bit.ly/gNjS8q">Mercury Browser</a></p><h4>DocStorm</h4><p>先日も紹介した「DocStorm」は、pdf/text/ePubを読むのに特化したビューアーです。Dropboxに放り込んでReaddleDocsで開くのでも全然よいのですが、iBooksと同じようにePubに含まれたCSSをちゃんと反映してくれるのと、輝度調整ができたり内容をシェアしたりといったこともできるのでこっちを。これ以外にmobiとかの閲覧用に「Kindle」も入れてます、はい。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/08/app-docstorm.jpg" alt="app-docstorm" title="app-docstorm" width="450" height="253" class="alignnone size-full wp-image-6062" /></p><p>&rarr; <a href="http://itun.es/igW3PX">DocStorm</a>（iTunes Store）</p><h4>Zinio</h4><p>もうね、Zinioで良いですよ、電子雑誌は（笑）。日本の出版社もぼちぼち過去のものから出してくれてますが、電子雑誌のオンラインストアのビューアですね。PDFベースだと思うんですけど見開き単位で誌面が見れるのと、モノによっては中の本文をテキストだけ抽出して読めたりします。</p><p>どこぞの電子雑誌みたいにページ毎にダウンロードとかではなく、まとめてゴソッとダウンロードされるので一回落としておけばネットに繫がってなくてもどこでも読めます。映像が入ってたらそれも再生されますね。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/08/app-zinio.jpg" alt="app-zinio" title="app-zinio" width="450" height="253" class="alignnone size-full wp-image-6076" /></p><p>&rarr; <a href="http://bit.ly/pIaikv">Zinio Digital Magazines</a></p><h3>その他、情報収集系</h3><h4>Zite</h4><p>「え？まだRSSリーダとか使ってんの？」とか言ってしまいたくなる、Google ReaderとかTwitterなどと連動するジャンル別のオートサジェスト機能付きのRSSリーダみたいなアプリです。ジャンルというかキーワードを自分で設定できますが、日本語のブログとかが出るかどうかは知りません。情報収集は主に英語みたいな人には探す手間も省けて便利だと思います。気になる記事は、DeliciousやInstapaper、ReadItLater、Twitter、Facebookにメールと好きなトコに放り投げられます。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/08/app-zite.jpg" alt="app-zite" title="app-zite" width="450" height="253" class="alignnone size-full wp-image-6077" /></p><p>&rarr; <a href="http://bit.ly/qmWVus">Zite: Personalized Magazine for iPad</a></p><h4>Dribbbits</h4><p>海外のクリエイターSNSである「Dribbble」のコンテンツを見るためのビューアです。Dribbbleを見るクライアントアプリは、iPad用の「Dribbblr」とかiPhone用の「Swish」なんかがありますね。このアプリは掲載された作品で気に入ったモノをまとめておくことができるので使っています。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/08/app-dribbbits.jpg" alt="app-dribbbits" title="app-dribbbits" width="450" height="253" class="alignnone size-full wp-image-6063" /></p><p>&rarr; <a href="http://itun.es/igW3kP">Dribbbits for iPad</a>（iTunes Store）</p><h4>Instapaper</h4><p>「Instapaper」は、「Read It Later」と並んで後で読む系のブックマークサービスで有名ですね。これがないといつまで経ってもダウンロードされないようなコンテンツを読むのは辛い…。Instapaperに放り投げておけば、Webサイトから広告とか余計な装飾を取り除いて本文だけを抽出して保存してくれます。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/08/app-instapaper.jpg" alt="app-instapaper" title="app-instapaper" width="450" height="253" class="alignnone size-full wp-image-6065" /></p><p>&rarr; <a href="http://www.instapaper.com/">Instapaper</a></p><h4>Articles</h4><p>Wikipediaの閲覧に特化したアプリです。それ系だと他には「Wikipanion」とかが有名ですかね。Articlesは多言語対応はもちろんですが、Wikipediaのページを再整形して読みやすくしてくれるのでこれを使ってます、はい。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/08/app-articles.jpg" alt="app-articles" title="app-articles" width="450" height="253" class="alignnone size-full wp-image-6061" /></p><p>&rarr; <a href="http://bit.ly/nOXYIG">Articles &#8211; The Wikipedia App</a></p><h4>Mashable</h4><p>海外のIT系のニュースのまとめといえば、Mashableをはじめとしていくつかのサイトがあります。読んでいらっしゃる方も多いですね。普段はブラウザで見てることが多いのですが、念のためアプリも。まぁ、サイトが重いんすよ（笑）。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/08/app-mashable.jpg" alt="app-mashable" title="app-mashable" width="450" height="253" class="alignnone size-full wp-image-6067" /></p><p>&rarr; <a href="http://on.mash.to/nSBJoJ">Social Media News and Web Tips – Mashable</a></p><p>ニュース系のは他にもちょっとあるんですけど内緒にしておきます（笑）。</p><h3>おまけ、iPhoneにしかないアプリ</h3><h4>Momento、phiRatio、Chartbeat</h4><p>iPhoneのみになるんですが、あると何気に便利なモノをちょっとだけ。</p><p>「Momento」は、Twitter、Facebook、FourSquare、Instagramなどのソーシャル系サービスの自分の発言などを日毎にまとめてくれるもの。「phiRatio」は、任意の数値に対する黄金比や16:9の比率の計算に特化したアプリ。「Chartbeat」はリアルタイムアクセス解析のサービスと連動したアプリで、その時のアクセス数とかを表示してくれるだけでなく、サーバが落ちたりしたら通知を出してくれます。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/08/app-iphones.jpg" alt="app-iphones" title="app-iphones" width="450" height="253" class="alignnone size-full wp-image-6066" /></p><p>&rarr; <a href="http://bit.ly/cPuXbB">Momento &#8211; diary writing for iPhone and iPod touch</a><br /> &rarr; <a href="http://bit.ly/kLHosV">phiRatio Proportions Calculator</a><br /> &rarr; <a href="http://chartbeat.com/">Chartbeat</a></p><p>まだまだ便利なモノがあるんですけど、長くなりますからこの辺で。何かの参考になれば幸いです、はい。</p><h3>最後にお礼を</h3><p>えっと、この記事を作るにあたってオンラインに公開されているiPadやiPhoneのイメージを使わせていただきました。</p><p>&rarr; <a href="http://mrforscreen.deviantart.com/gallery/?offset=24#/d2ymsyc">iPad Wall Presenter</a> by <a href="http://mrforscreen.deviantart.com/">mrforscreen</a><br /> &rarr; <a href="http://psd.tutsplus.com/freebies/psd/freebie-vector-iphone-4-psd-file/">Vector iPhone 4 PSD File</a> by <a href="http://psd.tutsplus.com">psdtuts+</a></p> ]]></content:encoded> <wfw:commentRss>http://blog.gaspanik.com/useful-ipad-apps-for-web-developer/feed</wfw:commentRss> <slash:comments>3</slash:comments> <xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/useful-ipad-apps-for-web-developer" /> </item> <item><title>電子書籍読むのに便利なDocStorm</title><link>http://blog.gaspanik.com/ebooks-reader-docstorm-for-ipad</link> <comments>http://blog.gaspanik.com/ebooks-reader-docstorm-for-ipad#comments</comments> <pubDate>Sun, 31 Jul 2011 04:04:35 +0000</pubDate> <dc:creator>[cipher]</dc:creator> <category><![CDATA[articles]]></category> <category><![CDATA[lifehacks]]></category> <category><![CDATA[scribbling]]></category> <category><![CDATA[apps]]></category> <category><![CDATA[ebooks]]></category> <category><![CDATA[epub]]></category> <category><![CDATA[ipad]]></category> <category><![CDATA[pdf]]></category> <category><![CDATA[reader]]></category> <category><![CDATA[tools]]></category><guid isPermaLink="false">http://blog.gaspanik.com/?p=6004</guid> <description><![CDATA[DocStormは、ドキュメントを読むことに特化したリーダーアプリです。]]></description> <content:encoded><![CDATA[<p>iPadでPDFやテキストなどの書類を読むためのアプリは数多くあれど、それにePubまで付け足すと選択肢が結構狭まったりするものです。ボクが使ってる「ReaddleDocs」は、PDFやテキストはもちろんePubにも対応していますが、さすがにePubの中に適用されたCSSまでは現時点ではちゃんと反映してはくれません。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/07/docstorm-000.jpg" alt="docstorm-000" title="docstorm-000" width="450" height="253" class="alignnone size-full wp-image-5999" /></p><p>Stanzaのような電子書籍ビューアでも同じで、ePubを入れただけでは単に読めるってだけ（強制的にCSSを適用する方法はあるとはいえ）。そういう面では PDFも読めるiBooksがよかったりするんですが、いちいちiTunesで同期したりダウンロードとかでデータを追加するのはちょっと面倒…。</p><p>そこで登場するのがこちらの「<a href="http://bit.ly/pzzbGK">DocStorm</a>」。</p><p><span id="more-6004"></span></p><h3>転送はWiFiだけど…。一通りの機能は備えるDocStorm</h3><p>DocStormは、ドキュメントを読むことに特化したリーダーアプリです。</p><p>対応しているフォーマットは「PDF/TEXT/ePub」しかありませんが、PDFの場合はサムネイルも表示されますし、ePubの場合はちゃんとその中に指定されたCSSによるレイアウト・デザイン情報がちゃんと反映されます（Webkit使ってるのかな？）。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/07/docstorm-001.jpg" alt="docstorm-001" title="docstorm-001" width="450" height="253" class="alignnone size-full wp-image-6000" /></p><p>輝度調整の機能、ブックマーク機能、TwitterやFacebookを使った共有機能などもちゃんと用意されていて、その辺はまるでKindle for iPad。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/07/docstorm-002.jpg" alt="docstorm-002" title="docstorm-002" width="450" height="253" class="alignnone size-full wp-image-6001" /></p><p>PDFを開いた時は、埋め込まれた目次からはもちろんですが、画面下の方をタップしてサムネイルから読みたいページを選択することができます。サムネイルから読みたいトコにジャンプ。この辺はZinioみたいな感じですね。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/07/docstorm-003.jpg" alt="docstorm-003" title="docstorm-003" width="450" height="253" class="alignnone size-full wp-image-6002" /></p><p>ePubの場合は、さすがにその仕様上サムネイルは表示されることはありませんがスライダで移動できますし、フォントサイズの調整も当然のことながらできます。もちろん日本語のePubでも問題ありません。ひょっとしたら縦書きのePubもいけるかもしれませんね（試してはいませんが 笑）。</p><p><img src="http://content.gaspanik.com/wp-content/uploads/2011/07/docstorm-004.jpg" alt="docstorm-004" title="docstorm-004" width="450" height="253" class="alignnone size-full wp-image-6003" /></p><p>画面が暗くキャプチャされていまってるんですが、ePub内にCSSが含まれレイアウトやデザインが適用されていればご覧のとおり、よくあるePubリーダーみたいな地味な表示ではなく、ちゃんとそれが適用された状態で閲覧できます。この辺はiBooksも同じですね。</p><p>データの登録は、現時点ではiTunesを使った転送以外にWiFiでアプリに直接アップロードという二通りの選択肢しかありません。ePubの場合は「めくった感」という余計なギミックがありますが、これがオン・オフできるようになったり、Dropboxとかから転送できるようになったらもっと便利になるんでしょうね。</p><p>今後に期待です。</p><p>&rarr; <a href="http://bit.ly/pzzbGK">DocStorm for iPad on the iTunes App Store</a></p> ]]></content:encoded> <wfw:commentRss>http://blog.gaspanik.com/ebooks-reader-docstorm-for-ipad/feed</wfw:commentRss> <slash:comments>0</slash:comments> <xhtml:link rel="alternate" media="handheld" type="text/html" href="http://blog.gaspanik.com/ebooks-reader-docstorm-for-ipad" /> </item> </channel> </rss>
<!-- Served from: blog.gaspanik.com @ 2012-02-07 09:19:40 by W3 Total Cache -->
