普通のサラリーマンのiPhone日記 Rotating Header Image

お気に入りのBlogを気軽に紹介する – Bookmarklet 1.0(DP版含む)

KAZUGIMIさんからのリクエストでfacebookのリンク共有のようなことができないか?と要望があったのでBookmarkletを作ってみました。すっかり職人になってしまいましたが、それもこれもiPhoneでのBlog投稿が少しでも楽になるように…との想いから。

基本機能は以下の通り。

  • 気になるWebページをブラウザで見る
  • 気になるキーワードがあったら選択(これは任意)
  • Bookmarkletを起動(ShareHtml)
  • ダイアログが出てくるのでコメントを記入(無くても良いけど)
  • HTMLが生成されるんでBlog投稿編集ページにコピペ
  • プレビューして投稿

PCでの使い方(デモ)

題材は、独特の個性で頭角を現してきたspring_friendsさん。先日もttachiさん主催のDpubで会ってきました。イケメンで礼儀正しい男です。多分。

丁度、オフ会レポートを書かれてましたんでじっくり読んでみます。

気になるワードがあったので選択。私のことが書いてある。だから普通ですってば…。

ここでBookmarklet起動。

ダイアログが出てくるんでコメントを記入します。ちなみにコメント記入は任意です。

OKを押すとHTML完成。これをBlogに貼り付けると以下のようになります。

スタイルシートの設定によって、この通りに表示されるかは分かりませんが、私のBlogだと上記な感じにうまーくHTMLを作ってくれます。

  • タイトルのリンクには「はてブ」数を付与
  • 選択したキーワードを80%のフォントの大きさで転記
  • ソース記事へのリンク(facebookのマネ)
  • サイトのサムネイル画像を自動作成して付与(リンク付き)
  • 最後に入力したコメントを太字で表現

いかがでしょう?結構、綺麗でしょー。

Bookmarklet(PC版)はこちら。そのまんま登録版は、お気に入りにドラッグすればOK。iPhone登録版は、リンクをブックマークしてから中身を編集。アドレスの「javascript:〜」よりも前(http://iphone-diary.com/?まで)を削除して下さい。

iPhoneでの使い方(デモ)

先ほど紹介したBookmarkletは、iPhoneでも同じように使えるんですが、DraftPadと絡めると更に簡単になります。ということでDraftPad版のBookmarkletも作りました。

上記、iPhoneからの登録用です。リンクをブックマークしてから中身を編集。アドレスの「javascript:〜」よりも前(http://iphone-diary.com/?まで)を削除して下さい。

DraftPad 1.2.1
カテゴリ: 仕事効率化
価格: 無料 App
更新:2010/08/01

DraftPadは、Safariと連携するメモ帳。どんどん書き足していくことができます。

では、先ほどと同じデモを行います。今度のデモは、こするこするのnonokoo嬢。彼女のBlogはまだスタートしたばかり。ですが、縁あってずっとチェックしてます。

iPhoneのSafariでblogを見て、そこでBookmarklet起動。コメントを入力します。

OKを押すとすぐにDraftPadが起動するので、内容をコピー。後はiPhoneで使えるBlogの投稿アプリの方へペーストすれば完成です。

尚、はてなダイアリーの場合、iPhone最適化のサイトはURLが違うようなので、Safari上でPC版のURLにしてからBookmarkletを起動しました。

又、iPhoneの場合、マルチタップの制約上、キーワード選択した状態でBookmarkletを起動できません。どうしてもキーワードを選択して引用したい場合は、別途、SafariやDraftPadでコピペして下さい….。今回は、そうやって引用を付けてます。

この部分、matubizさんがやっていたように、やろうと思えばやれるんですが、使い方が変わってしまうので、作るのやめました。ニーズがあれば考えます。

出来上がったHTMLは上記な感じ。

HTMLを自分の思うように変更もできるんですけど、その部分の説明は難しくなってしまうので割愛します。もし挑戦されたい方がいましたら Twitterにて質問して下さい。

簡単に言っちゃうと、Bookmarkletで呼んでるYahoo! Pipesのクローンを作って中身のHTMLテンプレートを自分好みに書き換える感じ。AppHtmlと一緒です。

以上。駆け足でしたが、今日はここまで♪

Bookmarkletはご自由にお使い下さいなー!良きiPhoneライフを(´∀`)


『Dpub Meets up! 1st』in 豚組 Produced by@ttachi オフ会レポート – 春友日記 〜なまらiPhone〜
目的地の六本木までもう少し、途中からは日本に一人しかいない普通のサラリーマンな人と合流。 やはりどこからどう見ても普通のサラリーマンではない。 普通じゃないことを述べるとそれだけで長くなるので割愛する。link: Full Article…

はるさんの文章はホント面白い。臨場感が抜群です。

のののおふれぽっぽ【2010.9.21】9/17川崎あみやき亭 – nonokoo’s room*NOISE*
Twitterののこはいつもフリーダム みんな大好き構ってちゃんの体当たり あ、これでいいんだ(°▽°)と勘違いして 心おきなく自由まっしぐらな日々。 でも実はリアルののこは ひとりで電車に乗れないからつって、 オフ会のお誘いもどうしたらいいか頭を抱えたりした。 私には普通の人のふりは無理だと思って Twitterから逃げ出そうともした。link: Full Article…

nonokoo嬢のBlogは独特で面白いっす。いつもドキドキします。

実は私、上記二人と既にお会いしたことがあるんです。いやー美男美女でした♪

-

タグ: Bookmarklet, hiroスタイル, HTML, Share, Yahoo!Pipes, サムネイル画像

Similar Posts:

26 Comments

  1. [...] てなブックマーク新着情報です。 お気に入りのBlogを気軽に紹介する – Bookmarklet 1.0(DP版含む) | 普通のサラリーマンのiPhone日記 [...]

  2. [...] お気に入りのBlogを気軽に紹介する ? Bookmarklet 1.0(DP版含む) | 普通のサラリーマンのiPhone日記 すっかり職人になってしまいましたが、それもこれもiPhoneでのBlog投稿が少しでも楽になる [...]

  3. [...] お気に入りのBlogを気軽に紹介する – Bookmarklet 1.0(DP版含む) | 普通のサラリーマンのiPhone日記 [...]

  4. [...] お気に入りのBlogを気軽に紹介する – Bookmarklet 1.0(DP版含む) | 普通のサラリーマンのiPhone日記 KAZUGIMIさんからのリクエストでfacebookのリンク共有のようなことができないか?と要望があ [...]

  5. [...] お気に入りのBlogを気軽に紹介する – Bookmarklet 1.0(DP版含む) | 普通のサラリーマンのiPhone日記 iPhoneでの使い方(デモ) [...]

  6. [...] お気に入りのBlogを気軽に紹介する – Bookmarklet 1.0(DP版含む) | 普通のサラリーマンのiPhone日記 すっかり職人になってしまいましたが、それもこれもiPhoneでのBlog投稿が少しでも楽になる [...]

  7. [...] お気に入りのBlogを気軽に紹介する – Bookmarklet 1.0(DP版含む) | 普通のサラリーマンのiPhone日記 link: Full Article… [...]

  8. [...] ◆ 普通のサラリーマンのiPhone日記 お気に入りのBlogを気軽に紹介する – Bookmarklet 1.0(DP版含む) ◆ shinhori’s Blog [iPhone]普通じゃ作れないぞ!New BookMarklet! [...]

  9. [...] お気に入りのBlogを気軽に紹介する – Bookmarklet 1.0(DP版含む) | 普通のサラリーマンのiPhone日記 link: Full Article… [...]

  10. [...] お気に入りのBlogを気軽に紹介する – Bookmarklet 1.0(DP版含む) | 普通のサラリーマンのiPhone日記 link: Full Article… [...]

  11. [...] のBookmarkletを何度も利用させて頂きました。 お気に入りのBlogを気軽に紹介する – Bookmarklet 1.0(DP版含む) | 普通のサラリーマンのiPhone日記 App紹介の自動HTML作成(DraftPad版を含む) – [...]

  12. Suzahiro's Blog より:

    [...] お気に入りのBlogを気軽に紹介する – Bookmarklet 1.0(DP版含む) | 普通のサラリーマンのiPhone日記 神すぎるウェブサイト紹介Bookmarklet [...]

  13. [...] お気に入りのBlogを気軽に紹介する – Bookmarklet 1.0(DP版含む) | 普通のサラリーマンのiPhone日記 [...]

  14. [...] お気に入りのBlogを気軽に紹介する – Bookmarklet 1.0(DP版含む) [...]

  15. [...] お気に入りのBlogを気軽に紹介する – Bookmarklet 1.0(DP版含む) [...]

  16. カレン より:

    とても素晴らしい機能をありがとうございます!

    iPhoneからの場合、写真が枠しか映りません。
    iPhone最適化のサイトが違うということなのかもしれませんが、
    元のURLを知るにはどうしたらいいのでしょう?

    アメブロは全部そうなのでしょうか…

  17. hiro45jp より:

    カレンさん、

    コメントありがとうございます!
    写真とは紹介サイトの画像のことでしょうか?
    この画像は実は私が作っているのではなく
    HartRailsという会社の無料サービスを使って作ってます。
    http://capture.heartrails.com/

    で元のURLですが以下のような感じです。
    http://capture.heartrails.com/115×100/shadow?http://iphone-diary.com

    置き換えのルールは単純で、
    「http://iphone-diary.com」の部分だけURLを置き換えてます。

    尚、枠だけになっていた理由ですが、過去の経験上、
    HartRailsのサイトそのものが落ちている場合に起こります。
    つまり、iPhoneだからとか、アメブロだから
    という理由ではありません。

    HartRailsのサイトが復旧すると中身も見えるようになるみたいです。
    質問の答えになっているかな…。
    もしご不明な点があれば言って下さい。

    この記事の後で、紹介のbookmarkletにいくつかバリエーションを
    作りましたので、宜しければこちらもお使い下さいまし♪
    http://iphone-diary.com/?p=7810

  18. [...] お気に入りのBlogを気軽に紹介する – Bookmarklet 1.0(DP版含む) | 普通のサラリーマンのiPhone日記 link: Full Article… とても素晴らしいブックマークレットを作ってくれています [...]

  19. [...] お気に入りのBlogを気軽に紹介する – Bookmarklet 1.0(DP版含む) [...]

  20. [...] お気に入りのBlogを気軽に紹介する – Bookmarklet 1.0(DP版含む) | 普通のサラリーマンのiPhone日記. [...]

  21. [...] 参考:お気に入りのBlogを気軽に紹介する – Bookmarklet 1.0(DP版含む) | 普通のサラリーマンのiPhone日記 [...]

  22. [...] 参考:お気に入りのBlogを気軽に紹介する – Bookmarklet 1.0(DP版含む) | 普通のサラリーマンのiPhone日記 [...]

  23. [...] お気に入りのBlogを気軽に紹介する – Bookmarklet 1.0(DP版含む) | 普通のサラリーマンのiPhone日記 基本機能は以下の通り。 [...]

  24. [...] お気に入りのBlogを気軽に紹介する – Bookmarklet 1.0(DP版含む) | 普通のサラリーマンのiPhone日記 [...]

コメントをどうぞ

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>