ここ数ヶ月やっとMacでブログで書くのに慣れてきたかなぁという感じなのですが、Macは便利なAppが色々あっていいですね！

なかでも今回紹介する「Skitch」は、Macなブロガーなら絶対使うべきAppです。効率が格段にあがります！
かなり有名なAppなので、既に使っていらっしゃる方も多いでしょう。

今回は、この「Skitch」で私がブログ用画像を作る一連の流れを紹介します！

Skitchって？

まずはSkitchをご存じない方のためにどんなAppか簡単に説明します。

Skitchはスクリーンショットが簡単に撮れて、それをシームレスに編集できる優れものです。編集もリサイズ、トリミング、文字・図形の挿入などブログ用画像に必要な加工がほとんどできてしまうのです。使ってみると、これがないとブログにスクリーンショットを貼る作業なんかできたもんじゃないってなります。絶対。

まだSkitchをダウンロードしていない方は、MacAppStoreかSkicthの公式ページからダウンロードしましょう。Skitchの公式ページには機能が少し制限された無料版もあります。この記事で紹介する方法は無料版Skitchを使って書いていますので、無料版でも無問題ですよ！

Skitch
カテゴリ: 仕事効率化
価格: ￥1,200

スクリーンショットを撮る

まず、Skitchを起動します。そして画面右上にある「Snap」をクリックしましょう。

すると、Skitchが隠れてカーソルが十字線になるのでドラッグして撮りたい範囲を決定します。

マウスボタンを放すと「カシャッ」という音と共にSkitchが出てきて、指定した範囲のスクリーンショットがSkitchのキャンバス内に撮られています。簡単ー！

Snapモードはドラッグで範囲指定以外にも以下のような操作で様々な形でスクリーンショットが撮れます。

• ウィンドウをクリックでそのウィンドウ全体
• デスクトップをクリックでデスクトップ全体
• デスクトップアイコンをクリックでアイコンのみ
• メニューバーをクリックでメニューバーのみ
• メニューバーアイコンをクリックでメニューバーアイコンのみ
• ドックバーをクリックでドックバーのみ

どんだけ高機能！Mac標準のスクリーンショット（Shift+command+4+Space）でできることは一通りできます。

Snapモード以外のモードもありますが今回は割愛。

トリミングする

これから説明する画像の加工は、先ほど撮ってキャンパスにあるスクリーンショットをそのまま編集できちゃいます。簡単ー！

早速、スクリーンショットをトリミングしてみましょう。

Skitchのキャンパスの端にカーソルを持って行き、カーソルが変わったらドラッグしてトリミングします。

これだけでトリミング完了です！

トリミングを一旦終わっても、消えた部分はまたキャンパスの端をドラッグすれば現れます。また、元の画像以上にキャンパスを広げると白い余白が作れます。細かいところまで気が利くいい奴ですｗ

リサイズする

必要な範囲をSnapしたけど画像が大きすぎるときもSkitchで簡単にリサイズできます。

右下をドラッグするとスクリーンショットをリサイズできます。

現在のサイズが左下に表示されているので、それを確認しながらリサイズしたいpxに合わせることもできますよ。

マスキングする

注目して欲しいところにスポットライトを当てているようなマスキングを行います。

まず左の「□」ボタンを選択し、右の「Color」で灰色のチェックのようなカラー（黒の半透明）を選びます。

そして、スポットライトを当てたいところを四角で囲むようにドラッグします。

最後に左のペンキバケツを選んで、囲んだ場所の外をクリックすれば完成。

逆に、四角で囲んだ場所を塗りつぶしたいときはペンキバケツで囲んだ場所の中をクリックすればOK！

矢印と文字を入れる

次はスクリーンショットに矢印と文字を入れてより分かりやすいものに加工します。

左の「矢印」を選択して右の色とサイズ（3レベル目がオススメ）を適当に選びます。

あとはドラッグすれば、はい、矢印が書けました。

文字も同様に左の「a」を選択して右の色とサイズ（2レベル目がオススメ）を適当に選びます。そして文字を挿入したい場所をクリックして、タイプすれば完了です。

矢印はドロップシャドウが付きますし、文字もアウトラインとドロップシャドウが付いてくれます。簡単に矢印と文字が挿入できる上、デザイン的にもなかなかスタイリッシュなので本当にSkitchがあれば十分です！

リネームして保存する

最後に編集したスクリーンショットに名前を付けて任意の場所に保存します。

画面中央下部の入力欄がファイル名です。ここを編集すればそのファイル名で保存ができます。そして「DragMe」をドラッグして任意の場所（今回はデスクトップ）にドロップすればファイルの保存が完了です。

デスクトップに編集したファイルが保存されました。

最終的にできた画像がこちら。

説明するとかなり長くなってしまいましたが、この画像を作るのには1分とかかりません。あーすっごい便利。

Macなブロガーの方でまだ使ってない方がいらっしゃったら、是非使うことをオススメします！僕はもうSkitchなしではブログを書けません！

Skitchは今回紹介しきれなかった様々な便利機能を備えてます。興味がある方は調べてみてください。そして僕にもっと便利な方法とか機能を教えてください！ｗ

Skitch
カテゴリ: 仕事効率化
価格: ￥1,200

Skicth公式サイト

このブログ「WooFla!」のコメントシステムをWordPressのものからDisqusというコメントシステムに移行しました。

今回WordpressのDisqus対応・既にあるコメントの移行をしたんですが、その方法を簡単に説明します。

Disqusって？

Disqusは単にコメントができるというだけではなく、Disqusにログインしていればコメントする側が色んなサイトのコメントを一元管理できるという特徴をもったコメントシステムです。更にTwitterなどからのリアクションを各記事に表示してくれたりもします。

Lifehaking.jpさんの下記の記事がDisqusがどういったものかが分かりやすいです。

Lifehacking.jp V2 に移行しました！ | Lifehacking.jp

Disqusにユーザー登録・初期設定

Discover your community – DISQUS

Disqusにアクセスして、「Sign Up」をクリックして登録を行います。

必要事項を記入しましょう。

• Site URL: Disqusを設置するサイトURL
• Site Name: サイトの名前
• Site Shortname: サイトの略称（DisqusのページURLになります）
• Username: Disqusに登録するユーザーネーム
• Password: Disqusに登録するパスワード
• Email Address: Disqusに登録するメールアドレス

ユーザー登録ができると登録したメールアドレスにメールが届きます。

登録が終わったら、Disqusの設定を行います。

• Twitter @Replies: アカウントを入力するとTwitterアカウント経由でコメントされた場合にこのアカウントにリプライされます
• Disable Like Buttons: DisqusのLike（Dislike）ボタンを非表示にします
• Media Attachments: Disqusのコメントに画像などのメディアのアップロードをできるようにします
• Mentions: コメントに第3者が返信できるようにします
• Trackbacks: 記事のトラックバックURLを表示します
• Akismet: WordPressにも標準装備されているスパム排除サービスのAkismetを有効にします。APIKeyはWordPressのプラグインに入力しているものを入力すれば問題ありません
• Reactions: Twitterなどでのリアクションも表示します
• Display login buttons with comment box: Disqus以外を経由するログインボタンを設置します。Narcissusテーマを利用しているときだけ有効です（デフォルトではNarcissusテーマではない方になっているのでこれを有効にしたい場合はあとでAppearanceからの変更が必要です）

Disqusの設定が終わったら、WordPressへ設置するためWordPressを選択します。WordPressへの設置はプラグインを利用します。

WordPressを選択後、表示されるページのdownload the plugin hereをクリックするとzip形式のプラグインがダウンロードできます。

WordPress3を使っていれば、ご自身のWordPressのプラグインページからアップロードを選択し、zipをアップロードするだけでプラグインインストールが完了します。

WordPressでDisqusを設定

最後にDisqusプラグインをインストールしたWordPressでDisqusの設定を行います。

DisqusプラグインをインストールしたWordPressにログインすると上部に設定を行う必要があると注意書きが出ていますので、そのメッセージボックスのリンクをクリックしてWordPress側のDisqus初期設定を行います。初期設定といってもDisqusに登録したサイトを選択するくらいしかやることはありません。

それが終わったらWordPressのコメントシステムが無事にDisqusになっています。

WordPressのコメントをDisqusへ移行

Disqusに移行する前に書きこまれているコメントに関しては手動で移行する必要があります。（トラックバックはとくに移行などの作業をしなくても大丈夫です。）

既に書きこまれていたコメントをDisqusに移行するにはまずWordPressの管理ページにログインし、コメントのDisqusを選択します。

Disqusの設定ページが表示されますので右上のAdvanced Optionsを選択します。

そして、ページ下部のImport/ExportのところにあるExport Commentsをクリックするだけです。失敗するときもありますがRetryを行えば問題なく移行できました。

これで、今まで書きこまれていたコメントをDisqusに移行することができます。Disqusの管理ページなどが英語なので詳細な設定となると少し調べたりしないと分かりませんが、とにかくコメントシステムをDisqusにする程度だと設定もコメントの移行も簡単ですぐに乗り換えできちゃいました！

皆もDisqusを使ってコメントしまくればいいと思うよ！

おまけ: サイドバーのコメント一覧をDisqusのウィジットにする方法

このブログも右サイドバーにある「コメント一覧」にはDisqusのウィジットを利用してます。このウィジットをWordPressに設定するまでを簡単にご紹介。

Disqusの管理ページのToolsを選択すると、Extra Widgetsというページが出てくるのですが、これがウィジット作成ページです。

ウィジットをカスタマイズして、下のコードをコピーし、WordPressのテキストウィジットに貼り付けるだけです。

Disqusは何から何まで設置が簡単なのがいいですねぇ。

Googleリーダーで選択中の記事をEvernoteへいい感じにクリップできるブックマークレットを作りました。

ブックマークレットはJavascriptを使って作るというのは知っていましたが、Javascriptをまともに触ったことはないですし、ましてやブックマークレットなんて作ったことはありません。

そんなJavascriptド素人がブックマークレットを作成した手順をサラっとご紹介します。

ブックマークレットはどうやって作る？

そもそもブックマークレットを作ったことがないので、どんな感じで作ればいいのかすらわかりませんでした。これはもうGoogle先生に聞くしかない！

Google先生から返ってきた答えがこれ。

ブックマークレットサービス・Hatena::Let を作りました – 川o・-・）＜2nd life

なんとあの「はてな」に「Hatena::Let」というブックマークレット作成支援サービスがあったのです。

この記事を詳細に読んでみると、どうやら文字数の調整やら改行削除やら更には動作URLの限定とかjsの外部読み込みまで、ブックマークレットを作る際の面倒なところをお任せできちゃうみたいじゃないですか！

ということで、「Hatena::Let」を利用して作ることに決定です。

Hatena::Let利用のポイント

上にもちょこっと書きましたが、Hatena::Letのいいところをササッと箇条書き。

• 簡単に公開・作成できる。ブックマークレットの置き場所がはてなのサーバーなので負荷対策にもなりそう（多分）。
• ブックマークレットには文字限界があるけど、それを自動で調整してくれる（文字数を超える場合は外部読み込みに変換してくれる）。
• 改行や空白を自動で詰めてくれる。
• ブックマークレットが動作するURLを簡単に制限できる。
• 外部jsの読み込みも簡単に記述できる。（今回はEvernoteのサイトメモリーに使われてるjsを読み込む必要があったのですごく助かった）。
• デバッグが簡単にできる。（DebugLetというブックマークレットを使うと保存だけでブックマークレットに反映される）。

ブックマークレット作るときは使わないともったいないですな。
このサービスを詳しく紹介した記事も書こう！

Evernoteサイトメモリーのカスタマイズ方法

Evernoteに記事をクリップには最近公開されたサイトメモリーに使われているnoteit.jsというjsを使いますよ。

最初はAPIを使おうかなぁとか考えてたんですが、調べてみるとどうやらEvenoteのAPIを使うには申請やらなんやらをしないといけないようなので、記事をクリップするだけならサイトメモリーのjsを使えないかと思ってそちらを試しました。

その際に参考にしたサイトがこちら。

シゴタノ！ — Evernote サイトメモリーで「一歩先」のブログをつくる

純粋にブログボタンとしてサイトメモリーを使うときのカスタマイズ方法が紹介されています。

実はnoteit.jsを使う方法はとても簡単。Evernote.doClip()というメソッドを呼び出して引数でオプションを渡すだけでEvernoteにクリップできちゃいます。

オプションとして渡す必要があるのは「元記事のURL」と「記事タイトル」と「記事のid」です。それぞれ「url」、「title」、「contentId」というオプションなのでオブジェクトに詰めてEvernote.doClip()メソッドに渡します。

Googleリーダーを解析

さて、ここからが一番面倒な部分。といってもそんなに難しくありませんでしたよ。

Googleリーダーの構造解析にはFirebugを使いました。これはもう常套手段ですね。

解析するは選択した際に指定されるidと元記事のURLと記事タイトルが書かれている要素だけ。

選択中の記事のidは「current-entry」、元記事URLと記事タイトルは「current-entry」の中の「h2」要素内。これだけ分かればあとは「h2」から元記事URLと記事タイトルをすっぱ抜くjsを書くだけです。結局jsはそれだけで済んじゃいました。

最後にjsを書く

HTMLの要素をすっぱ抜くjsくらいならサクっと調べればjs初心者の僕でも書くことができましたよ。はい。結局jsの解説はほぼなしですｗ

そしてできたjsがこれ。

/*
 * @title GoogleReader to Evernote
 * @description GoogleReaderの選択中記事をEvernoteにクリップします。
 * @include http://www.google.com/reader/view/#stream/*
 * @license MIT License
 * @require http://static.evernote.com/noteit.js
 */

var obj = document.getElementById("current-entry").firstChild.firstChild.firstChild.firstChild;
var elems = obj.getElementsByTagName("h2");
var elem = elems[0];
var title = elem.firstChild.firstChild.textContent;
var url = elem.firstChild.href;
var param = new function(){
             this.contentId = 'current-entry';
             this.title = title;
             this.url = url;
             }

Evernote.doClip(param);

void(0);

最初のコメント部分はHatena::Letの機能でブックマークレットのタイトル、説明、動作するURL、ライセンス、外部読み込みするjsを指定しています。これだけで初期動作をいい感じにしてくれます。

var obj = document.getElementById("current-entry").firstChild.firstChild.firstChild.firstChild;
var elems = obj.getElementsByTagName("h2");
var elem = elems[0];
var title = elem.firstChild.firstChild.textContent;
var url = elem.firstChild.href;

そしてここでGoogleリーダーから現在選択中の元記事URLと記事タイトルを抽出。

var param = new function(){
             this.contentId = 'current-entry';
             this.title = title;
             this.url = url;
             }

抽出したものをオブジェクトにつめる。

Evernote.doClip(param);

そしてオプションを渡してdoClip！

void(0);

最後のこれはおまじないみたいな感じ。

ソースコードを見やすくするために、適時改行をいれて書いてみます。最後のvoid(0)は、決まり文句みたいなもので、これを入れ忘れるとページ遷移がおきてしまうので、必ず記述して下さい。

ソースコードを見やすくするために、適時改行をいれて書いてみます。最後のvoid(0)は、決まり文句みたいなもので、これを入れ忘れるとページ遷移がおきてしまうので、必ず記述して下さい。

こんな感じで解説してあったので一応付けときました。必要なのかどうなのかは分かりませんｗ

ちょっと長くなってしまいましたが、js初心者な僕でも案外簡単にブックマークレットが作れてしまいまいた。

なのでjs分からんという方も臆することなくチャレンジしてみるといいと思います！

今までフィード購読はlivedoorReaderを使っていたのですが、最近思うところがあってGoogleReaderに移行してみました。

思うところがあってというのは、iPadを購入してからというもの、自宅でのフィードの消化はほとんどiPadを使ってるんですね。

で、iPadのリーダーアプリは基本的にGoogleReaderとの同期なんですね。livedoorReaderはまぁ日本の企業ということもあって、なかなか「これだ！」というリーダーアプリは出てきてないんですよ。

GoogleReaderの方はというとすごい話題になっているアプリがいくつかあったりするんですよね。「Reeder for iPad」とか。

なので一度移行してみて注目アプリを試してみようという魂胆で、livedoorReadeからGoogleReaderに移行をしてみた訳です。

移行はかなり簡単で、livedoorReaderでエクスポートしたXMLをGoogleReaderにインポートするだけです。

この方法をわざわざ詳細に書く必要もないかもしれませんが、一応メモ的に書いておきます。

livedoorReaderでエクスポート

まずlivedoorReadeにログインして、右上の「設定変更」を押します。

画面が切り替わったら、「データのインポート/エクスポート」から「エクスポート」をクリック。「export.xml」をダウンロードするダイアログが出てくるので、デスクトップなりに保存しておきます。

GoogleReaderでインポート

GoogleReaderにログインして、右上の「設定▼」をクリック。そして「リーダー設定」をクリック。

画面が切り替わったら「インポート/エクスポート」タブをクリックします。「選択」ボタンを押して、livedoorReaderからダウンロードしてきた「export.xml」を選択。あとは「アップロード」ボタンを押すだけで完了です。超簡単！
livedoorReaderのフォルダ構成もそのまま移行できるのでとても簡単です。残念なところを強いていうならば、レートが移行できないこと。livedoorReaderのレートって意外と便利なんですよね。タグでレートを付け直してもいいのかもしれませんが、レートのみで分類表示というのができないから「んー」という感じですね。

おまけ：Reeder for iPad

早速iPadに「Reeder for iPad」を入れてGoogleReaderと同期。実はこれが使いたかっただけっていうねｗ
ちょっとまだGoogleReaderには慣れないので、これから使ってみて最終的にどちらを使うか決めるというところですね。まぁでも「Reeder for iPad」が凄まじくいい出来っぽいので、このアプリがlivedoorReaderに対応しない限りは戻ることはないのかなーｗ