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

ShareHtmlとFocusHtmlもリニューアルしました♪

AppHtmlに続きまして他のBookmarkletも順次リニューアル中です。
今回はShareHtmlとFocusHtmlが一週間ほど前ですが完成しましたのでご紹介します。

ShareHtmlとFocusHtml

ShareHtmlはお気に入りのサイトのブログで紹介する為のBookmarklet、FocusHtmlはGoogleリーダーの共有メモを一括でブログで紹介する為のBookmarkletです。

それぞれの進化っぷりを列挙してみます。

  • 爆速になった(ShareHtml、FocusHtml)
  • 選択テキストを囲むHTMLタグを指定できるようにした(ShareHtml)
  • Popupメモを囲むHTMLタグを指定できるようにした(ShareHtml)
  • 記事本文を囲むHTMLタグを指定できるようにした(FocusHtml)
  • 共有メモを囲むHTMLタグを指定できるようにした(FocusHtml)

ShareHtmlやFocusHtmlで気にくわなかったのが、選択テキストやPopupメモ、記事本文や共有メモを書式テンプレート上に設定している状態で、Bookmarklet起動時に空にした場合、余計なタグができてしまい、見栄えが崩れてしまうという欠点があったのです。

今回の変更で選択テキスト、Popupメモ、記事本文、共有メモに関してはもし値が空ならば囲むHTMLも吐き出さないようになりました。

Bookmarkletメーカーとは?

今回もAppHtmlに引き続き、Bookmarkletメーカーを作りました。

ShareHtmlメーカー

ShareHtmlメーカー

FocusHtmlメーカー

FocusHtmlメーカー

順次設定していけばOK。書式テンプレートは各々5個ほど準備しました。
サムネイル画像をどうやって作っているのかと言うと…。以下のサービスを使ってます。

HeartRails Capture | サムネイル画像/PDF ファイル作成サービス

他にも同様のサービスがあるようですが一番安定してるのでここを使ってます。
サムネイルが表示されないって時にはこのサイトがメンテ中の場合が多いです。

吐き出された結果は?

他のBookmarkletと出力方法は同じです。今回はAppHtmlも含めてプレビュー機能を強化しました。なんとその場でHTMLを修正し、プレビューし直すことができるのです。

ShareHtmlメーカー

この機能。実はFocusHtmlで大活躍します。

大量の結果が一括出力された後、ブログで紹介する為に紹介の順番を変更したり、もしくは紹介から除外したり、そんな加工作業をこの画面でできるんです。終わったらHTMLを選択してブログへコピペすればOK。そんな運用を想定して作りました。

Bookmarkletメーカーのリンク集

AppHtmlに続いてどんどんBookmarkletメーカーが増えると都度リンクを紹介するのも面倒になってきます…。ということでBookmarkletメーカーのリンク集を作りました。

Bookmarkletリンク集

Bookmarkletリンク集

このリンク上に新作や修正が蓄積されていきます。

ShareHtmlギャラリー

ShareHtmlで吐き出したものをギャラリーとして並べてみます。


左サムネイル大 – alignleft
iOS/Macアプリ紹介のAppHtmlが大幅リニューアル♬ | 普通のサラリーマンのiPhone日記
AppHtmlが、v2になっちゃいました。がーん、がーんです。 ということで8月を待たずに、AppHtmlはご臨終です。・゚・(ノД`)・゚・。 そこで優先順位マックスでAppHtmlの新作を作りま …
AppHtmlは先日以降、裏でこっそり進化中。


左サムネイル小 – alignleft
iOS/Macアプリ紹介のAppHtmlが大幅リニューアル♬ | 普通のサラリーマンのiPhone日記
AppHtmlが、v2になっちゃいました。がーん、がーんです。 ということで8月を待たずに、AppHtmlはご臨終です。・゚・(ノД`)・゚・。 そこで優先順位マックスでAppHtmlの新作を作りま …
AppHtmlは先日以降、裏でこっそり進化中。


左サムネイル大 – table

iOS/Macアプリ紹介のAppHtmlが大幅リニューアル♬ | 普通のサラリーマンのiPhone日記
AppHtmlが、v2になっちゃいました。がーん、がーんです。 ということで8月を待たずに、AppHtmlはご臨終です。・゚・(ノД`)・゚・。 そこで優先順位マックスでAppHtmlの新作を作りま …
AppHtmlは先日以降、裏でこっそり進化中。

右サムネイル大 – table

iOS/Macアプリ紹介のAppHtmlが大幅リニューアル♬ | 普通のサラリーマンのiPhone日記
AppHtmlが、v2になっちゃいました。がーん、がーんです。 ということで8月を待たずに、AppHtmlはご臨終です。・゚・(ノД`)・゚・。 そこで優先順位マックスでAppHtmlの新作を作りま …
AppHtmlは先日以降、裏でこっそり進化中。

サムネイル無し
iOS/Macアプリ紹介のAppHtmlが大幅リニューアル♬ | 普通のサラリーマンのiPhone日記
AppHtmlが、v2になっちゃいました。がーん、がーんです。 ということで8月を待たずに、AppHtmlはご臨終です。・゚・(ノД`)・゚・。 そこで優先順位マックスでAppHtmlの新作を作りま …
AppHtmlは先日以降、裏でこっそり進化中。

FocusHtmlギャラリー

FocusHtmlで吐き出したものはShareHtmlと似ていますが、記事名とブログ名を分離することができたのでvia形式で表現するようにしてます。FocusHtmlでのみこれが可能です。


左サムネイル大 – alignleft
アマゾン商品紹介用ブックマークレット「AmazonHtml」の脱Yahoo!Pipes対応完了のお知らせ
(via matuダイアリー)
すべてのはじまりはこれでした。 The V2 engine will be phased in 2 steps. June 28, 2011 – All new Pipes will use …
@matubiz さんもバージョンup!


左サムネイル小 – alignleft
アマゾン商品紹介用ブックマークレット「AmazonHtml」の脱Yahoo!Pipes対応完了のお知らせ
(via matuダイアリー)
すべてのはじまりはこれでした。 The V2 engine will be phased in 2 steps. June 28, 2011 – All new Pipes will use …
@matubiz さんもバージョンup!


左サムネイル大 – table

アマゾン商品紹介用ブックマークレット「AmazonHtml」の脱Yahoo!Pipes対応完了のお知らせ
(via matuダイアリー)
すべてのはじまりはこれでした。 The V2 engine will be phased in 2 steps. June 28, 2011 – All new Pipes will use …
@matubiz さんもバージョンup!

右サムネイル大 – table

アマゾン商品紹介用ブックマークレット「AmazonHtml」の脱Yahoo!Pipes対応完了のお知らせ
(via matuダイアリー)
すべてのはじまりはこれでした。 The V2 engine will be phased in 2 steps. June 28, 2011 – All new Pipes will use …
@matubiz さんもバージョンup!

サムネイル無し
アマゾン商品紹介用ブックマークレット「AmazonHtml」の脱Yahoo!Pipes対応完了のお知らせ
(via matuダイアリー)
@matubiz さんもバージョンup!

記事書いてて思ったのですがFocusHtmlは時間間隔の指定だけじゃなく、件数指定があっても良いかも知れませんね…。こっそりバージョンupしときます。

-

タグ: Blog, Bookmarklet, Googleリーダー, hiroスタイル, HTML, WordPress, Yahoo!Pipes

Similar Posts:

One Comment

  1. universe より:

    ものすごく便利なサービスをありがとうございます。
    早速使わせて頂きました。

    すごくいいですね!!(^^)

コメントをどうぞ

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>