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

いろんな環境でBookmarkletを動かしてみる♪

Bookmarkletですが、こっそり色々なところを見直してます…。

実は今現在公開してる最新版のBookmarkletのプレビュー版は、別ウィンドウを立ち上げず、起動したページを強制的に上書きし、プレビュー表示するように変更済みです。

Bookmarklet
毎回エントリー投稿してると何がBookmarkletの最新版か分からなくなってくるんで、常に最新版を維持する為のページを作成しました。今後はトップページのタブから飛べるこのページに最新情報を記載していきますヽ(´ー`)ノ
最新版はこちらに随時アップしていきます。

「強制上書きプレビュー表示」のメリットは、以下な感じ。

  • 起動したページのCSSを引き継いでプレビュー表示できる
  • iPhoneやiPadのSafariでもBookmarkletの結果をプレビュー表示できる
  • リンク集を作ればアプリ内でもプレビュー表示できる

結果として、Bookmarkletの活用の幅が広がったのでしたヽ(´ー`)ノ
尚、リンク集ですが以下にサンプルのHTMLを作りました。

上記のテキストを雛形としてメモ帳にコピペ。メモ帳上で、変換候補をご自身のIDに変換します。編集が終わったら「Bookmark.html」とか好みの名前を付けて、インターネット上で見える場所(例えば Dropbox上のPublic)に保存しとけばいつでも呼べます。

変換候補 変換内容(ご自身のID)
DMY Linkshare登録しているならばサイトIDに置換
GOOGLE_ID ShareやStarをしているGoogleリーダーのIDに置換
API_KEY FlickrのAPIキーを発番して置換
NSID FlickrのユーザーID(NSID)に置換

保存の際には拡張子を「.html」にするのをお忘れ無く。

ちなみに私、PCのFirefox、Chrome、Safari、iPhoneのSafari、iPadのSafariと同じブックマークにする為にX-MarksやMobile Meを使って自動同期してます。しかし、URLエンコーディングの関係なのか、SafariだとBookmarkletが動かないんです…ヽ(;´Д`)ノ

ということで、最近はリンク集のページ自体をブックマークし、リンク集を呼び出してからBookmarkletを呼び出すようになりました。これなら環境依存無しなのでヽ(´ー`)ノ

以下、これまでできなかった環境でのBookmarkletの呼び出しデモです。

iPhoneのSafariで使ってみる

iPhoneのSafariからリンク集を呼び出し、そこでプレビュー版を動かしてみます。

10000009351000000940

「PictShare」と入れてみる。すると「Safari」上でプレビューが確認できます。

iPhoneのアプリ内(Textforce)で使ってみる

HTMLを見ることができるアプリからならばOK。iCab Mobile、そしてTextforceでの動作は確認済みです。

10000009411000000942

「PictShare」と入れてみる。すると「Textforce」上でプレビューが確認できます。

ちなみに今回はデモ目的でTextforceを使ってますが、本来はTextforceであるならば専用のBookmarkletも作ってあるんでそっちを使う方が簡単です。あしからず。

iPadのSafariで使ってみる

iPadのSafariからリンク集を呼び出し、そこでプレビュー版を動かしてみます。

1000000036

「PictShare」と入れてみる。

1000000037

すると「Safari」上でプレビューが確認できます。

iPadのアプリ内(するぷろ)で使ってみる

HTMLを見ることができるアプリからならばOK。するぷろでの動作は確認済みです。

1000000039

リンク集をブックマークに登録、必要に応じて呼び出します。

「PictShare」と入れてみる。

1000000040

すると「するぷろ」上でプレビューが確認できます。

PCのアプリ内(MarsEdit)で使ってみる

HTMLを見ることができるアプリからならばOK。MarsEditでの動作は確認済みです。予めLocalDraftにリンク集を置いておき、必要に応じて呼び出します。

110212-0002

プレビューからBookmarkletを起動し「PictShare」と入れてみる。

110212-0004

プレビューが切り替わりAppHtmlの結果が「MarsEdit」上で確認できます。

以上、簡単なデモでしたが、PC/iPhone/iPadに依存せず、しかもHTML表示ができるアプリならば、アプリの内側でBookmarkletが使えるようになりました。理想に近づいたってこともあり、しばらくはBookmarkletいじりはお休みしたいと思いますヽ(´ー`)ノ

Google拡張機能でAppHtmlを動かす

ここからはおまけトピック。実はTextforceの作者様であるytkaさんが、Google Chromeの拡張機能としてAppHtmlをお試しで作って下さいました。

AppHtmlの Chrome拡張版を作成しました « domo Apps
Chrome拡張にしたことでインストールが簡単になります。bookmarkletよりも自由度が高いため、ダイアログボックスによる入力ではなく、アプリ検索専用のフォームから利用できるようになります。
アイコンが(゚Д゚ )!

何とありがたい。Chromeを使ってらっしゃる方にとっては朗報♪

110212-0005

「選択文字からの検索」や「iTunesウェブからの直作成」には対応していませんが、検索でヒットしたアプリが複数ある場合、チェックボックスで選んでいくと動的にテキストエリアにHTMLが入ってきます。斬新(゚Д゚ )!

インストールはChromeからこちらをクリックして下さい。

ytkaさんありがとうですヽ(´ー`)ノ

-

タグ: Bookmarklet, Dropbox, hiroスタイル, HTML, MarsEdit, Safari, Textforce, するぷろ

Similar Posts:

2 Comments

  1. sayuki0821 より:

    以前から気になっていたのですが、今日ついにブックマークレットデビューしました!こんなに快適&便利とは!!これからがっつがつ使っていきます^^

  2. hiro45jp より:

    sayuki0821さん、

    コメントありがとうございます。
    使って下さってありがとうございます。嬉しいですヽ(´ー`)ノ
    何かご要望とかあったらTwitterでも遠慮なく言って下さい!
    今後とも宜しくですm(_ _)m

コメントをどうぞ

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>