ブログ更新が捗って仕方がないリソースプラグインまとめ!ドヤ顔で晒してしまう私のブログ更新術の全ての裏側

タイムライン

ブログ更新が捗って仕方がないリソースプラグインまとめ!ドヤ顔で晒してしまう私のブログ更新術の全ての裏側

推しブロ投票は1日1回、つまり、毎日でも投票できるんだぜ!

さあ、3月は実に書きまくっています。推しブロ祭り開催中により、ブログ環境を見直したいと思いました。@フレッシュです。

まずは、私の環境を晒して、シェアー、問題点を浮き彫りにし、新たな便利機能を探したいと思っています。
ここで、私がどのようにブログを書くのか、書き方といえば仰々しいですが、便利なリソースやブックマークレットを晒してシェアーします。

【予告記事】全部見せます私のブログ更新術 | 見る前に飛ぶ、それが*frasm イケすぎてヤバすぎてヤバい超人力キュレーションメディア


コチラの予告記事をあわせて読んでもらえると、2度美味しいと思います。良ければどうぞ。

以下で気になるものがあれば是非試してみてください。
ブログ更新が快適になれば嬉しいですが。

目的別で目次を

目的別目次
  1. iPhoneアプリやwebサービスを紹介する
  2. まとめ記事を作る
  3. 好きなモノ・コトを紹介する
  4. 日記や雑記

現状私が書いている記事の種類は、大別してこのくらいだと思います。
無かったらおそらくブログをとうに辞めていると言っても過言ではないツールたち、紹介していきます。

まずは基本中の基本のブラウザ


まずは普段更新に使っているブラウザです。PC環境はwindows7 64bitです。
複数使っているのはどうしても得手不得手、出来ること出来ないことがあるからです、でも、基本的にはfirefoxを使っています。
Firefox11でアドオンの同期まで出来るようになって、怖いもの知らず感は今すごいです。

firefox

次世代ブラウザ Firefox — 高速・安全・カスタマイズ自在な無料ブラウザ
Firefoxじゃないと走らないブックマークレットがあるので、基本的にブログを書くときはFirefoxを使います。
どうしても長時間起動させておくと処理が重くなるのだけは勘弁ですが、アドオンや、拡張機能の高さは他に類をみませんね。

chrome

Google Chrome – ブラウザのダウンロード
とにかく早い、ぶっちぎりに早い。
既に書いたブログの修正用に使います。本当のことを言えば、Chrome一本にしたいのですが、どうしても走らないブックマークレットがあるので、ブログの更新には使っていません。
ネットサーフィンしたり、動画みたりするのに使います。

safari

アップル – Safari – ウェブブラウジングをもっとスマートに、パワフルに。
もっぱらiPhoneでどういう風に見えるかシュミレート用。
実際のiPhoneで見るのが面倒なときに使います。ほとんど同じように見えるので、デザイン崩れが無いかもこれでチェックします。
でも、私の場合、スマホからの閲覧は無視に近い状態です。読めればいいよね?くらいの感覚です。

iPhone、iPadでどのようにWebページ・ブログが表示されているのかを確認する方法 | OZPAの表4
そんなわけでせっせかとスマートフォン用切り替えテーマを作成中なのですが、その際にPC上でiPhoneではどのようにwebページが表示されているのかを確認する必要があるわけなんです。 …

iPhone

番外編として、wordpress純正のアプリを使ってタイトルだけ考えています。
純正のアプリでは、作った記事を下書きの状態にして置けるので、良いタイトルを思いついた時にパパっとタイトルだけ打つことがあります。
別にメモ帳でも、Evernoteでも構わないんですが、純正だと、ブラウザから見た時、編集画面ですぐに記事を書くことができるので、コピペの手間を省けます。
あと、写真を添付するのも高速です。これはパソコンよりも圧倒的に早いです。このへんはwordpressの人だけの話になってしまいました。別にwordpressの人じゃなくても大丈夫なように書くつもりですが。

WordPress 2.9.6(無料)

カテゴリ: ソーシャルネットワーキング, 仕事効率化
現在の価格: 無料(サイズ: 3 MB)
販売元: Automattic – Automattic, Inc.
リリース日: 2009/10/29
iPhone/iPadの両方に対応

これもレスポンシブデザインなテーマを当てているからです。wordpress最高。
サーバーインストール型のwordpressはもちろんウェブサービスの無料ブログよりも少しだけ敷居が高いですが、ほぼすべて思い通りに出来るという自由は、何者にも代えがたいものがあります。

なぜなら、じぶんが気に入って更新できないブログでは、長続きしないからです。一番好きなブログは自分のブログです、と言うためにも、最低限デザインにもこだわりたいものです。

ちなみに私がインストールしているテーマは

WordPress › Yoko « Free WordPress Themes

WordPress › Yoko コレです。
ほっといても閲覧するブラウザに勝手にあわせてくれます。試しにウインドウを縮めてみてください。
サイドバーが消えたり出てきたりします。これ、ほとんどテーマを当ててるだけです。
変えてるのは、トップの画像と、背景の画像くらいです。

wordpressがいかに恐ろしいか、ご理解いただければ恐縮です。

ブログ記事種目別に行きます

iPhoneアプリやwebサービスを紹介する

最近このブログのメインのコンテンツとなっています。そこまでアプリに詳しいわけでは無いですが、気に入ったもの、美しい美appを紹介しています。と言っても以下のリソースが無ければとうに諦めています。

紹介記事に必要なもの
  1. アプリの情報
  2. アプリのアイコン、スクリーンショット
  3. サポートウェブの情報リンク
  4. サポートページのスクリーンショット
  5. iPhoneのスクリーンショット

これくらいでしょうか。
工程はたくさんありますが、端折る方法がいくらでもある有り難いご時世。
まずはアプリの情報を取得するブックマークレット、コレがないともう記事がかけないよotzとなること請け合い。

AppHtmlです!

iOS/Macアプリ紹介のAppHtmlが大幅リニューアル♬ | 普通のサラリーマンのiPhone日記
そこで優先順位マックスでAppHtmlの新作を作りました。「転んでもただでは起きない。逆にバネにしちゃる!」ということで超進化版になりました。 …

もっぱらコチラを使わせていただいてます。いいところ、数えきれないくらいありますが、カスタマイズが事細かくできるし、デフォルトで使ったとしても全然問題がないところ、そして、アフィリエイト出来るところが最高です。ブログでマネタイズは悪ではありませんが、度が過ぎると醜悪です。僕が有料のアプリばっかり紹介していたら、ああ、frasmは拝金主義かくすくすと笑ってください。

ブラウザで立ち上げれば

Twitter 4.1.2(無料)

カテゴリ: ソーシャルネットワーキング, ユーティリティ
現在の価格: 無料(サイズ: 10.5 MB)
販売元: Twitter, Inc. – Twitter, Inc.
リリース日: 2009/10/09

iPhone/iPadの両方に対応

こういうのが作れます。

具体的には、ブックマークレットを走らせるとこういうコードを吐き出してくれるので、このコードを、ブログの編集画面にコピペするだけです。
これで、iTunesへのリンク、アプリの詳細、スクリーンショット、全てが含まれた記事を簡単に書くことが出来るのです。

あの超絶便利ブックマークレット「AppHTML」を使うとき、百発百中で任意のアプリを取得する方法 | 見る前に飛ぶ、それが*frasm イケすぎてヤバすぎてヤバい超人力キュレーションメディア

コチラの方法もあわせて試してみてください。

次に、オフィシャルサイトや、紹介したいアプリをもう既に便利に使っている方のページをリンクしたい場合、以下のリソースが有効すぎます。

スクリンショット付きでサイトを紹介する

ShareHtmlとFocusHtmlもリニューアルしました♪ | 普通のサラリーマンのiPhone日記

もっぱらコチラを使わせていただいています。

紹介したいページを開いてブックマークレットを走らせます。
このとき、紹介したサイトの文章を選択した状態でブックマークレットを走らせると、最終のアウトプットに選択した文章がリードとして吐き出されます。

こんなかんじで

コメントを付けるポップアップが出ますので一言書くこともできますし、なしでも大丈夫です。

そうすればこういうコードを吐き出してくれるので、html編集画面にコピペするだけで

ShareHtmlとFocusHtmlもリニューアルしました♪ | 普通のサラリーマンのiPhone日記
ShareHtmlはお気に入りのサイトのブログで紹介する為のBookmarklet、FocusHtmlはGoogleリーダーの共有メモを一括でブログで紹介する為のBookmarkletです。 …
これはヤバイ!

こういうスクショ付きのリンクがワンポチで完成してしまうのです。ね、便利でしょ?知らなかったら損してるでしょ?
これらのブックマークレットが走る環境が僕の場合Firefoxなので、ブラウザはfirefoxを使っています。

これらブックマークレットはhtmlをはっつけられるブログシステムなら、どのサービスでも使えるので、役立ち度が半端ないです。
しかも、ブックマークなので、別のパソコンで更新する場合でも、環境を同期させておけばどの環境でも使えます。最高です。最強です。

ブラウザのアドオン・プラグインでリンクを簡単に取得する

記事を書くときにさっくりと今見てるページのリンクをページのタイトル付きで貼りたいと思うことは少なくないと思います。
そういう時に便利なのが

firefoxの場合
Make Link :: Add-ons for Firefox
Chromeの場合
Chrome ウェブストア – Create Link

コチラのアドオン・プラグインです
見ているページを開いているときに右クリックから起動して、好みの形でリンクを取得してくれます。
上の2つの紹介リンクもこのアドオンで取得したものです。

右クリックから起動すれば、メニューの中にあります。
例えばこの中からHTMLを選べば

<a href="https://addons.mozilla.org/ja/firefox/addon/make-link/">Make Link :: Add-ons for Firefox</a>

こういうコードをクリップボードに保存してくれるので、後はペーストするだけです。

さらにwordpressの場合より快適に

WP自慢ばっかりですが、プラグインでさらに快適にスクリーンショットを使うことができます。

WordPress Website Screenshot Plugin

このプラグインがどのようにやばいかというと、インストールすると

[ browsershot url=”ここにスクショを撮りたいページのURL”width=”300とか600とか好きな数字” ]
というショートコードだけでスクリーンショットが記事に貼れるんです!

さらに、このプラグインと、さっきのMakeLinkを合体して使った場合

こういうふうに、タイトルとアドレスを自動で取得できる上に、ショートコードごとクリップボードに

WordPress Website Screenshot Plugin

WordPress Website Screenshot Plugin
ペーストすれば、こんなふうなダイナミックなスクショと紹介が!

ちなみにもちろんのことですが、wordpressにプラグインをインストールしていないと出来ない方法です。先にインストールを済ませてMake Linkで以下の設定で試してみてください。

<h4><a href=”%url%”>%text%</a></h4><a href=”%url%”>%text%</a>「browsershot url=”%url%” width=”600″」

「」は[]に変換して使ってください。
これで見ているページを一瞬でスクリーンショット付きのリンクで取得できます。後はペーストするだけです。

他に便利な機能はコチラの記事にまとめています。あわせて参照ください。

知らないwordpressブロガーは損をしている!?wordpressの知らいと損する5つのあれこれ #WPshira-son5 「プラグイン編」 | 見る前に飛ぶ、それが*frasm イケすぎてヤバすぎてヤバい超人力キュレーションメディア

繰り返ししなければいけないことや、メディアを貼り付ける際に便利なプラグインを紹介しています。そうです、私はこうして、面倒な部分を端折っているんです。
知らないと知っているとでは全然違うでしょ?

ブログ記事種別、まとめ記事を作る

  1. これは上のアプリ紹介の応用編です。
  2. スクリーンショット付きで記事を紹介する
  3. 写真やスクショを貼る

コレが簡単に出来れば相当スムーズに出来ると思います。
定型文なんかを作ってコピペできる環境なんかがアレば、比較的簡単にまとめ記事は作ることができます。

ブックマークレットだけで出来てしまうと思いますよ。

ShareHtmlとFocusHtmlもリニューアルしました♪ | 普通のサラリーマンのiPhone日記
ShareHtmlはお気に入りのサイトのブログで紹介する為のBookmarklet、FocusHtmlはGoogleリーダーの共有メモを一括でブログで紹介する為のBookmarkletです。 …
これはヤバイ!

好きなモノ・コトを紹介する

ここで記事を書くときに必要なのが、自分が紹介した品物や、サービスの写真や、リンクです。
コチラもブックマークレットで処理することが出来るんです。

商品紹介ブログパーツ カエレバ

商品紹介ブログパーツ カエレバコチラを使えば様々なショッピングサイトへの写真付きリンクを作ることができます。


コチラも最終的にこういうコードを吐き出してくれるので、コレをコピペするだけです。

しかも、このブックマークレットは、楽天の好きな商品ページで立ち上げればその商品を取得してくれます。

初期設定が少し大変ですが、落ち着いてやれば、そんなに難しくはないと思います。
他にもアマゾンや、カカクコムなどで商品リンクツールはいろいろありますが、この「カエレバ」が今のところ一番優秀で、見た目にも拘ることができます。
ぜひコレを使って、自分のお気に入りのものを紹介してみてください。

スクリーンショットブクマと、この「カエレバ」ブクマがあれば、雑貨ブログや買い物ブログは、きっと簡単に更新できると思います。

私は、好きなiPadや、iPhoneのアクセサリーを紹介するときによく使います。

日記や雑記記事を書きたい


ブログを彩る基本ですが、文字ばかりでは味気ないですね?
そういう時は進んで写真を取り入れましょう。

具体的には、記事の一番上や、小見出しの下、↑このへんが画像を入れるのに適したポイントだと思います。


【ブログ】ブログに華を咲かせましょ 〜ブログで使える無料画像サービスまとめ〜 | Design × Lifehack × CrossOver Lab
ブログを細分化して、個々に情報を充実させていこうかと思ったときに、ふと思ったのが「文字ばかりのブログ」は、ちょっと堅苦しいかな?と思っていました。 そんなときに素材集サービスのことを思い出して色々調 …

フリーの画像サービスはいくらでもあります。ネットに転がっている写真を勝手に使うのは、権利上よくないので、フリーのリソースを使わせてもらいましょう画像加工の知識がなくてもリサイズはフリーソフトでも出来ます。


リサイズ超簡単!
便利です


僕は画像の加工にphotoshopを使っていますが、誰でも持ってるソフトではないので、簡単な加工ならgimpや、picasaで十分だと思います。

GIMP – The GNU Image Manipulation Program

Picasa

このリンクもMakeLinkで貼りましたよ。

画像を使うというのはブログを書く上で大事なテクニックです。なぜなら何千文字以上の情報を一枚の画像は表現してくれる時があるからです。
読むより見たほうが圧倒的に早いともある。コレを是非覚えておいて欲しいです。

例えばこういう操作説明の場合、文字で打つよりも画像なら見た瞬間理解できると思います。

firefoxとChromeには、スクリーンショットを撮って、さらに編集できるアドオンもあります。ここであわせて紹介しておきます。

Aviary.com

Aviary.comとにかくブラウザでなんでも出来る超絶すぐれもの。
コレがあれば、リサイズや、切り抜きわけないです。

Chrome ウェブストア – Quick Markup::キャプチャーと注釈

Chrome ウェブストア – Quick Markup::キャプチャーと注釈こっちはChromeの拡張、画像編集の他、文字をスクショに入れたり、キャプションをつけたり、ブラウザでここまで出来るのかと、ある意味photoshopよりも早いかもしれない拡張。

高価なソフトと同等の働きです。使いこなせばよりブログは説得力を増すし、華やかになるでしょう。

ブラウザでなんでも出来てしまいますね。コチラの記事もあわせてどうぞ。


ブラウザだけでここまで出来てしまう時代が来たんだ!画像加工からコーディングまで、ブラウザであれこれ出来るまとめ | 見る前に飛ぶ、それが*frasm イケすぎてヤバすぎてヤバい超人力キュレーションメディア

情報収集が一番大事かもしれない

さて、ここまでのツールを使えば、ほとんど私と同じ環境を手に入れたといっても過言ではありません。実際はIllustratorとかPhotoshopとかを使っているので、完全に同じではありませんが、コレばっかりは人それぞれ、仕事のスキルも絡んでくるので、一概には言えません。オンラインリソースははっきり言って、私が使っているもの全てです。
Macでの検証はしてませんが、多分同じことが出来ると思います。

そして、書く道具を手に入れたら、書く材料も提供します。
私イチオシの情報源、ソーシャルニューサーです。


Crowsnestツイッターでフォローしている人が読んでいる記事や、話題になっている記事を集めてくれるソーシャルニュースリーダーです。
ほぼ完璧に、気になるネタを提供してくれます。iOSで見ても全然問題ない設計。webアプリの域まで高められた設計に脱帽。


Gunosyこちらも、自分のSNSから興味がありそうなネタをメールで毎日送ってくれます。Crowsnestとあわせて使うと取りこぼしがほぼなくなります。


Strawberryjamサイトの設計が最高にかっこいいストロベリージャム、こちらもSNSからニュースを引っ張ってきてメール配信してくれます。
同じ設計しそうだと思いますが、それぞれ選んでくるニュースが微妙に違うので、楽しいです。

iPhoneアプリ



News.me私がこれからレビューしようと思っている、ニュースリーダーです。コチラもSNSから気になる記事を引っ張って来てくれます。
見た目もすっきりとして美app感が半端ない、かなり出来のいいアプリです。アプリ自体は英語ですが、使っていくうちに、日本語の記事を集めてくれるので、問題なしです。


あなたも明日から日刊のニュースネタ記事が書ける。興味のあるネタがバンバン集まる国産のニュース・キュレーションサービスこっそり教えます。 | 見る前に飛ぶ、それが*frasm イケすぎてヤバすぎてヤバい超人力キュレーションメディア

コチラの記事もあわせてどうぞ。少し詳しく書いてます。

まとめ

いかがでしたでしょうか。
少なくともこの記事を書くのに、多分すべてのリソースを使っていると思います。
これだけのツールを駆使して、少しでも毎日の負担を減らしているんです。
負担というと、嫌なことをしているようですが、時間はかけがえがないので、少しでも有効に時間を使えるように、いろんなツールにお手伝いをしてもらってます。

知っているのがアリましたか?全部知っていましたか?
だったらあなたはもう既に、武器と戦う準備をどちらも手にしていると思いますよ。

予告編でも少し書きましたが、私はこれらのツールやノウハウがないと、ブログを書けません。
ノートパッドだけではとてもじゃないけど、無理です。

ましてやwordpressじゃないともっと無理かもしれません。

これからブログを書いてみた人に必要なのは、もちろん、精神論や、諸ブログ論かもしれませんが、もっと実践的なツール群だと思ってます。
私にだって、ツール群は必要不可欠です。

ほとんどのツールは無料です。作ってくれた人、デベロッパーの人に感謝を忘れず、私は、今日も明日も、明後日も、書いて行きたいなぁと、そう思う次第です。はい。

注:実は、全部というのは、嘘でして、釣られたらすみません。長くなりすぎるので、シリーズにします。

もう少し使っているツールが有るんですが、長くなりそうなので今日はこのへんで。出し惜しみなく行くので、よろしくお願いします。

最後におまけで便利なブックマークレット群を

Bookmarkletリンク集

Flickrの写真をはっつけるなんて、超絶便利ですよ。

ふう、、、すっきりと丸裸になった@シンタロヲフレッシュでした。


文:シンタロヲフレッシュ

一緒に読んで欲しい記事

前の記事(Previous)
今度は大好きなフォントを<h2>に当ててみた。最高やなモリサワのwebフォント「TypeSquare」が無料で最高すぎた
次の記事(Next)
3月の振り返り