FocusHtml NEOがすごい！Twitterアイコンまで加えた全部のせリンクを作るブックマークレットをご紹介！

Reading a book at the beach / Simon Cocks

本を続けて２冊読んだら、少し目が腫れぼったいすなふ(@sunafu35)です、こんばんは(°□°;)

どこをどう巡って辿り着いたのかを忘れてしまったのですが、こんなブックマークレットを使って、なんとも素敵なリンク紹介をされているサイトを見て、自分でも使ってみることにしました！

参考させて頂いたサイト

”FocusHtml NEO を改造して貰って嬉しいのでエントリfor @toshiya240 | おすすめ | MagLog 〜まぐろにくじゃぱん〜”

完全にBookmarklet依存症です、まぐにぃです。皆様ご存じでしょうか、Bookmarklet、ブログを書く上で最高の補助をしてくれるスーパー憎い奴なんですが、そんなBookmarklet中 ...

ツイートを任意の文字列で分解してhtmlに再構成するブックマークレット（FocusHtml NEO @donpyさん命名）。 | Feelingplace

今日公開するものは、@hiro45jpさんがMy神アプリSylfeedの設定を公開しますヽ(´ー`)ﾉ | 普通のサラリーマンのiPhone日記の中でFocusHtml Newと書いているもの。 ...

神ブックマークレット「FocusHTML NEO」を設定した際にちょっと戸惑った部分の備忘録 | なまら春友流

@feelingplace さんの神ブックマークレット FocusHTML NEO 今までツイートまとめ記事的なものを書いていなかったので使っていなかったのですが使ってみると本当にこれはすごいです。 ...

Feelingplaceさんの「FocusHtml NEO」の設定で、私がつまずいたことのメモ | iPhoneとマヨテキメモ

@feelingplaceさんの記事を読んでいると、RSSでチェックした記事をなんとブログにアイコン付きで素敵に表示させる方法が、紹介されていました。 ...

BookmarkletとRSSフィード – 告知とお伺い | 普通のサラリーマンのiPhone日記

BookmarkletとRSSフィード本ブログでは、ユーザー向け、ブロガー向けに以下のサービスを作ってます。全て「Yahoo!Pipes」というWebサービスを使って作ってます。 ...

大元は、@hiro45jpさんの公開されていたFocusHtmlだとは思うのですが、色々なカスタマイズバージョンが出来ていて、なんだか自分でも、よくわからない状態に( >д<)

でも、最終的に使ったのは、どうやら@feelingplaceさんが公開されたバージョンを使うことになっているようですｗ

FocusHtml NEOでTwitterアイコンも出力できるようにしました。 | Feelingplace

きっかけは@maguro29さんのこのエントリー。”FocusHtml NEO を改造して貰って嬉しいのでエントリfor @toshiya240 | おすすめ | MagLog 〜まぐろにくじゃぱん〜 ...

FocusHtml NEO

今回設定したこと。

FocusHtml NEOの設定
Googleリーダーから書式を合わせたツイートを飛ばせるように設定
Chrome拡張機能「Create Link」にも設定

と、こんな感じになっています。
Goolgeリーダーからツイートすることで、FocusHtmlの書式に合うように出来るのと、ツイッターから参照したサイトなどから直接書式にあったツイートが出来るようにCreate Linkも設定したのがポイントです。

これで、全方位戦えます( *｀ω´)

FocusHtml NEOの設定

まず、FocusHtml NEOの設定からですが、

画像だと、こんな感じの設定になります。
初期の状態からだと、ツイッターIDを自分のにしたのと、書式を選んだくらいで、そのまま使いました。

ツイッターIDの変更と、あと「書式」を「生暖かいネタ達形式」にして、Ｂｏｏｋｍａｒｋｌｅｔを生成するをクリックすると、ボタンの下にずずいと作成されたものが表示されます。

画像のように、生成されたリンク部分をドラッグして、ブックマークバーに登録します。
説明では、Chromeだと、コード部分をコピペしないとダメということなんですが、ShareHtmlの時と同様、問題なく動作出来る感じでした。
実は「：」のキーワードでは取得出来ないと言う問題があったんですが、「【share】」を付けてツイートして、それを取得キーワードにしたら動きました。原因を探すのもありですが、動けばこっちのもんなので、結果オーライで。。。

FocusHtmlの設定はこれでOK！
これは、ツイートしたものの中から拾う為のブックマークマークレットなので、次にその為のツイートが簡単に出来るようにしていきます。

Googleリーダーの設定

私は普段、情報を得るのにGoogleリーダーとツイッターを基本にするようになってきたので、その２つから、ブログに使うように手軽さを求めたいと思います。
といっても、参考サイトさんで、説明してあるので、設定はそれを見ながらしたんですが（・・

まず、Googleリーダーを開いて、

リーダーの設定をクリック！

画像では、すでに作った後にスクリーンショットを撮ったのであれですが、「カスタムリンクを作成」をクリックします。

リーダーに書式の説明もあるので、そこまでややこしくはないのかもしれません。私は１時間ほど、ここで引っかかりましたけどね！ｗ

「名前」は、自分で付ける分かりやすい自由な名前です。
「URL」で、一番大事な設定をします。ツイートの書式です。
「アイコンのURL」は、Googleリーダーでの表示用なので、無ければなしでいいと思います。

私が設定した「URL」はこんな感じ↓

http://twitter.com/share?url=&text=：【share】${title} - ${source}：${url}

参考サイトで、見たものとは少し変更して、『/share?url=』のURLは指定していません。
FocusHtmlでの表示は確認出来たので、これで問題はなさそうなのです。自信はありません！

プラス。FocusHtml用のツイートは、【share】を入れて管理しようと思いましたので、【share】を書き込むようにしています。

実際に使うときには、

記事下の送信先をクリックして、設定した項目をクリックすると、

新しいタブで、ツイート画面が開きます。
冒頭にコメントを入れてツイートしましょう(*-*)

注意点！
ココでの注意点としては、FocusHtmlと設定を合わせることが重要なので、

「：」←は全角になるところ。「：」自体をFocusHtmlの区切り文字としても他のものに変更するときは、自分のツイート内で、FocusHtml以外では使わない文字にすることも重要です。
あと、「：」関係では、前後にスペースを入れないことも必要のようです。
また、Googleリーダーではないですが、短縮URLを使えるRSSリーダーでは、FocusHtml用のツイートには使わないようにします。

それじゃ、ココで試してみましょう。

試す時のページは、Chromeなら、システム関係画面以外・・・まぁ、『about:blank』で、空白ページを開いて試すのが、見易くていいかな？と思います。

登録しておいたブックマークレットをクリックして、

私の場合、【share】を入力して、検索するようにします。
自分で、お好きな単語を決めてもいいと思いますよ～。その場合はGoogleリーダーの設定を変えましょう。

次に現れるポップアップは、何時間遡って探すかという設定です。
一日ごとにまとめるのが無難かな？と思って、このままOKをクリックします。

おぉぉぉぉ！
アイコンついて、コメントついて、リンクもあるし、画像もある！
素晴らしい*( ・ロ・ )*

ここで、「【share】」を消してしまうのも有りだと思いますよ。

あとは、コードをコピーして、ブログの記事投稿のHTML画面に貼り付けるだけ！
１日のニュースをまとめたりするのに最適ですよね！

そして、更に使いやすくするように

Create Linkの設定

Chrome ウェブストア - Create Link

Create Linkは、Chromeの拡張機能で、右クリックから、参照しているサイトのリンクを作成するためのアプリです。

[Google Chrome]これが使える18個！Chrome拡張機能で使っているものを整理してみました。 - sunabox

この記事の中の「リンク作成」の機能として、紹介させて頂いています。

FocusHtml NEO用の設定として、オプション画面から、項目を追加しますよ！

新しく

：【share】%title%：%url%

を「Tweet」と名付けて設定！

これで、リーダー以外から見ている記事でも、FocusHtml NEO用の書式が作成出来ます(´～｀)
こちらは、作った物をツイート画面にコピペして、コメントを追加するだけです。

どんどん利用して、ブログのコンテンツの１つに育てられるといいなぁと、わくわくしますね！
情報をあげてくださったり、公開してくださったサイトの方々、ありがとうございます！

また、「これ書くの抜けてるよ？」という部分がありましたら、ご教授下さい( >д<)

追記

翌日にテストしていると、またブックマークレットが動かない事態があったのですが、私が検索用に使っている語句「【share】」を、他のツイートで使ったのが原因のようでした。
時間帯で、例えば24時間前までのツイートを取得という風に動かそうとした場合に、関係ないツイートが混じっていて、恐らくなんですが、そのツイートに「：」の区切り文字が書式の沿って入ってなかったため、エラーが出てしまったんだと思います。
そのツイートが入らないように、短時間の取得にしたら動いたので・・・。

ブックマークレットがうまく動かない時、まずはツイートの確認をするのが良さそうですね。あと、時間を短くしてみて動くかどうかの確認と。

以上、報告でした！