2012/06/20

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

follow us in feedly
follow us in RSS
Reading a book at the beach
Reading a book at the beach / Simon Cocks
本を続けて2冊読んだら、少し目が腫れぼったいすなふ(@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さんが公開されたバージョンを使うことになっているようですw

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の設定からですが、
FocusHtml NEO設定画像1

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

Focus NEO設定画像2
ツイッターIDの変更と、あと「書式」を「生暖かいネタ達形式」にして、Bookmarkletを生成するをクリックすると、ボタンの下にずずいと作成されたものが表示されます。

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

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


Googleリーダーの設定

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

まず、Googleリーダーを開いて、
Googleリーダー側設定画像1
リーダーの設定をクリック!

Googleリーダー側設定画像2

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

Googleリーダー側設定画像3
リーダーに書式の説明もあるので、そこまでややこしくはないのかもしれません。私は1時間ほど、ここで引っかかりましたけどね!w

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

私が設定した「URL」はこんな感じ↓
http://twitter.com/share?url=&text=:【share】${title} - ${source}:${url}
参考サイトで、見たものとは少し変更して、『/share?url=』のURLは指定していません。
FocusHtmlでの表示は確認出来たので、これで問題はなさそうなのです。自信はありません!

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


実際に使うときには、
Googleリーダー側設定画像4

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

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


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

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


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


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

登録しておいたブックマークレットをクリックして、
FocusHtml NEO起動画像1
私の場合、【share】を入力して、検索するようにします。
自分で、お好きな単語を決めてもいいと思いますよ~。その場合はGoogleリーダーの設定を変えましょう。

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

FocusHtml NEO結果画像1

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

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

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

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


Create Linkの設定


Chrome ウェブストア - Create Link

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

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

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

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

CreateLinkオプション画像1

新しく
:【share】%title%:%url%
を「Tweet」と名付けて設定!

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


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

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


追記

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

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

以上、報告でした!


関連する記事


サムネイル付きで!参考リンクを貼るのに便利なブックマークレットがありました。 - sunabox
ブログのデザインを変えたり、色々したりする際、けっこう参考にさせて頂くサイトを貼ることが多くなってきて、文字だけっていうのも味気ないかな?・・・と思っていたところに、良さそうなブックマークレットを作っ ...


おまけ

実際に使ってみた物を貼っておきますので、リンクのURLの表示だとか、イメージを確認してみて下さい!


ヤフーとCCCは「最強タッグ」--Tポイントの新会社設立へ - CNET Japan 最新情報 総合

ふむふむ





アイコンが素敵なアプリだからこそ毎日使いたくなる!新しい視点でアプリを紹介するサイト「App Mode」 * 男子ハック

ほんと、そう思いますね





「MacBook Air (Mid 2012」と旧モデルとのSSDのパフォーマンス比較 - 気になる、記になる…

え?こんなに差出るんですか( ̄O ̄; 





「MacBook Air (Mid 2012)」のSSD、Samsung製と東芝製の速度比較 - 気になる、記になる…

ふむむ





旧から新MacBook Airへ、データ・アプリ等全てを移行する手順(無線LAN使用) - おまえは今までスキャンした本の冊数をおぼえているのか?

ほんとに簡単なんですね・・・。





自分普通が誰かの普通とは限らない「Reeder3.0の便利機能」 - iに生きるライオン

色々出来るんですねぇ・w・





LANだけで動作するコンピュータ 電源不要のオールインワン型【デジ通】 - livedoor NEWS - ITライフハック

シンクライアントって、かなり気になります(*-*)





マクドナルドの実物とかけ離れた商品写真の撮影手順を詳細にレポートしたムービー - GIGAZINE

冷凍状態のパティからして、日本の2倍の厚みな件(元バイトの証言w)

3 件のコメント:

  1. おお、なんか凄そう。
    これ、Twitterのアイコン変更したら反映されるんですかね?

    返信削除
  2. なんとか確認できました!
    ツイート毎にアイコンをとっているようで、アイコンを変更した後に、再度
    取得用にツイートしたものは変更されました!

    返信削除
  3. なるほどー、ありがとうございます。

    返信削除

Related Posts Plugin for WordPress, Blogger...