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

アプリ紹介のBookmarklet「AppHtml2」公開♪

AppStoreのアプリ紹介を効率化してくれるBookmarklet「AppHtml」を大幅にバージョンUPさせました。名付けて「AppHtml2」としました。今回の紹介で、暫くはバージョンUPしなくても良いかなと思うくらい進化させてます(・∀・)!

「AppHtml2」とは何じゃ?

ブラウザ、および、iPhone上で使えます。ブラウザ上で使う場合、選択した文字(もしくは入力した文字)でiTunesを検索し、ヒットしたアプリを自分好みの書式で出力してくれます。尚、iPhone上で使う場合、Textforce等々のアプリと連動して動きます。

主な機能は以下の通り。前のAppHtmlから新しくなった部分はNew!部分です。

  • 選択文字(もしくはアプリ名入力)によるアプリ検索
  • 検索サイトの絞り込み指定(他国のAppStoreも指定可)New!
  • 出力テンプレート(標準4パターン)の指定 New!
  • 出力テンプレートの定義ファイルの指定 New!
  • 出力テンプレートのパターン追加(もしくは編集) New!
  • アイコン画像のファイル名の指定 New!
  • iPhoneスクショサイズの指定 New!
  • iPad画像とiPhone画像の比率の指定 New!
  • 結果を別ウィンドウ表示(HTMLタグ+プレビュー)するモードの指定 New!
  • 結果を確認しながら途中終了するモードの指定 New!

これまでYahoo! Pipesでやっていたことの全てをBookmarkletの中身で指定できるようにしました。使われる方は、Yahoo! Pipesの知識を必要とすることなく、Bookmarkletの本体をいじるだけで自分好みのBookmarkletに仕上がります。

PC上でのデモ

使い勝手がかなり変わってますので実際にデモしてみましょう。

ブラウザ上で文字(=アプリ名)を選択します。

文字を選択した状態でBookmakletを起動します。

もし文字の選択が無い場合、入力ボックスでアプリ名を入れることもできます。

ヒットした総件数とひとつ目のアプリ名が表示されます。出力したいアプリの場合は「OK」出力したくないアプリの場合は「キャンセル」を押します。

全てが終わると結果が別ウィンドウに表示されます。以前までのAppHtmlは、複数アプリのHTMLを吐き出した時に、個々のアプリのHTMLの間に「空行」が入らなかったのですが、今回は入ります。結果を見ながら、自由に切り出して使えます。

※表示されない場合、ブラウザのポップアップブロックを無効にして下さい。

結果を別ウィンドウに表示させる出力形式は、複数アプリ(例えば有料版と無料版)を一気に紹介したいといった用途で使えるはずです。

一方「ひとつのアプリがヒットできれば良いんだ。別ウィンドウなんていらん。軽いのがいい。」という方の為にもうひとつの出力形式が選べるようになっています。

この出力形式の場合、別ウィンドウは表示しません。ヒットしたアプリ毎に、該当のHTMLをポップアップで表示させます。「OK」を押せば次のアプリへ。「キャンセル」を押せば、その場で終了。関係ないアプリに対するアクションの手間を省きます。

※出力形式の変更は、Bookmarklet内の「out=1」を「2」に変えるとできます。

iPhone上でのデモ(Textforce等)

iPhoneで使う場合には、これまでのAppHtmlと挙動は同じです。アプリによって連動のさせ方が違う為、Bookmarkletはアプリの分だけ必要になります。

例えば、Textforce(=Dropbox連携のメモアプリ)と連動してみましょう。

Safari等のBookmarkletが使えるブラウザでBookmarkletを起動します。iPhoneの場合は、選択文字による入力は無く、アプリ名の入力が必須になります。

ヒットすると画面上に「OK」「キャンセル」が出てきます。選択が終わるとアプリ連動が勝手にされて、すぐにメモアプリで編集を続けることができます。

※iPhone用は出力形式の変更はありません…。ご要望があれば作ります。

Bookmarklet本体

Bookmarkletの本体は以下の通り。そのまんま登録用は、リンクをクリックするだけでも使えますので、是非とも使って試してみて下さい。

尚、iPhone用はTextforce用のみ掲載しています。

Textforce – Dropbox text editing 1.4 for iPhoneApp
カテゴリ: 仕事効率化 価格: ¥230
更新: 2010/12/22

PC用(結果の別ウィンドウ表示モード)

PC用(結果が途中終了できるモード)

iPhone用(Textforce版)※他アプリへの連携は必要であれば要望下さい。

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

iPhoneからのBookmarkletの登録の仕方はこちらを参考にして下さい。

結果の見え方

標準で準備した4パターンのHTMLですが、私のBlogで見ると以下のようになります。使ってるCSSによって見え方が異なると思いますので参考までに。


Echofon for Twitter 3.1.8(無料)

iPhone、iPod touch および iPad 互換 iOS 3.0 以降が必要

Echofon for Twitter 3.1.8
カテゴリ: ソーシャルネットワーキング
価格: 無料 App
更新: 2010/12/17

imagesimages


Echofon for Twitter 3.1.8App
iPhone、iPod touch および iPad 互換 iOS 3.0 以降が必要
カテゴリ: ソーシャルネットワーキング 価格: 無料
更新: 2010/12/17

Echofon for Twitter 3.1.8 for iPhoneApp
カテゴリ: ソーシャルネットワーキング 価格: 無料
更新: 2010/12/17

Bookmarkletのカスタマイズ項目

Bookmarkletの中身は暗号みたいで申し訳ないのですが、以下の図の部分だけはBookmarkletにてカスタマイズできる項目になります。

aff (affiliate id)
LinkshareのDを指定します。これを入れるとiTunesリンクがLinkshareリンクになります。アフィリエイトをされて無い方は「DMY」と入れて下さい。その場合は、Lnikshareリンクには変換されずに純粋なiTunesリンクになります。

fmt (html format)
出力テンプレートのパターン(標準で4パターン準備)を指定します。1だと「中アイコン+スクショ2枚」2だと「大アイコン」3だと「小アイコン」4だと「文字のみ」です。

out (output mode)
AppHtmlの結果の見せ方。1だとアプリ全てを「OK・キャンセル」で選択して「OK」のものだけ合体して別ウィンドウにHTMLとプレビューを表示します。2だとヒット順にアプリのHTMLを表示し「OK」で次アプリ「キャンセル」で終了します。

icn (icon file)
アイコンの画像のファイル名を指定します。iTunes上のアイコン画像の名称は何パターンか既に決まったものがあるので、それを指定します。「75×75-65」だと幅が75ピクセル「175×175-75」だと幅が175ピクセルのサイズになります。

img (image width)
スクショのiPhone縦画面の場合の幅を指定します。今は192を設定してます。

ipd (ipad rate)
ヒットしたアプリがiPadアプリだった場合のiPhone画像との比率を指定します。今は1.4を設定してます。iPhone画像の1.4倍の大きさでiPad画像は表示されます。

res (restriction url)
検索時に絞り込むサイトを指定。jpの部分をus等にすれば海外のiTunesサイトから情報を取得し、出力することもできます。他国の方でもこれで使えるはずです。

tmp (template file)
「fmt」で指定される出力テンプレートを格納してあるファイル名のフルパスです。DropboxのPublicフォルダにファイルを置くのが楽ちん。私はそうしてます。

dmt (delimiter)
出力テンプレートのファイル内のパターンとパターンを区切る為の文字です。

出力テンプレートファイルの設定

出力テンプレートは、これまではYahoo! Pipes内で定義していた為、カスタマイズするには、Pipesの知識が必要でした。しかし、AppHtml2では、この部分を外出しにしてファイルから読み込むようにしています。

私の場合、DropboxのPublicフォルダ内にテンプレートファイルを置いています。AppHtml2を標準で使われる方の場合、私のテンプレートファイルを見ることになります。カスタマイズされる方は、ご自身のテンプレートファイルを指定できます。

こちらが置いてあるパスです。

DropboxのPublicフォルダに置いたファイルのパスは、上記のように右クリックで調べることができます。このパスをBookmarkletに指定すればOKです。

次にファイルの中身を見ていきましょう。

このファイルは、Htmlファイルです。リンクを右クリックして保存し、直接HTMLを編集、パターンを追加していくことでご自身の出力テンプレートファイルが作れます。

編集にはいくつかの決められたルールがあります。区切り文字が肝になりますが、区切り文字自体もBookmarklet内で設定ができます。デフォルトは「=====」です。

  • ルール1:最初の「区切り文字」より上の部分は触らないで下さい
  • ルール2:最初の「区切り文字」より下の部分から書式として認識します
  • ルール3:「区切り文字」と「区切り文字」の間に好みの書式を入れて下さい
  • ルール4:書式には「予約語」が使えます(例えば、${title}など)
  • ルール5:書式は上から勝手に「1、2、…」という書式名になります(fmtで指定)
  • ルール6:一番最後の書式が終わったらbodyタグを終了します
  • ルール7:ファイルは必ず「.html」の拡張子をつけて下さい

ちなみに私のテンプレートは6つの書式が既に設定されています。これらを参考にご自身で編集し、カスタマイズして下さい。

以上で説明は終わり。最後にひとつだけ。

以前までのAppHtmlについてですが、こちらも従来通りに動くようにしてあります。しかし、将来的に旧バージョンのメンテも大変なので予告なく消してしまう可能性もあります…。ですので、今後も踏まえて新しいAppHtml2を使って頂ければ幸いです m(_ _)m

皆さま、良きiPhoneライフ、Blogライフを!
ご質問、ご要望があれば、コメントもしくはTwitterにてお知らせ下さい。

(追伸)
AppHtml2の開発にあたり、donpyさん、tobu1さん、gamecast_blogさん、kuracyanさんのフィードバックをたくさん頂きました。この場を借りてお礼申し上げます。

(追記)
ma2marsさんが、DraftDad用とNote&Share用のAppHtml2対応のBookmarkletを作って下さいました!感謝です。むっちゃ嬉しいです!詳しくはこちらから♪

-

タグ: AppStore, Bookmarklet, hiroスタイル, HTML, iTunes, Linkshare, Yahoo!Pipes

Similar Posts:

20 Comments

  1. [...] iPhoneに関する、はてなブックマーク新着情報です。 アプリ紹介のBookmarklet「AppHtml2」公開♪ | 普通のサラリーマンのiPhone日記 [...]

  2. [...] Fit for Rhythm お正月に美味しいものを食べ過ぎて、すっかり肥えてしまった。加えて最近甘いものを沢山食べるようになって体重の増加が止まらない。何か良いエクササイズアプリがないかなと思っていたところ、ちょうど#RyoAnnaBlogでfit for RhythmというiPhoneアプリが紹介されていたので、試した所とても楽しくエクササイズができるので早速始めてみた。 Fit for Rhythm Unlocked 1.0.2(¥350)iPhone、iPod touch および iPad 互換 iOS 3.1.3 以降が必要Fit for Rhythm Unlocked 1.0.2カテゴリ: 健康&フィットネス価格: ¥350 更新: 2010/11/20 運動不足なiPhoneユーザーにお勧めするゲーム感覚エクササイズ|Fit for Rhythm – #RyoAnnaBlog運動不足なので僕も早速始めてみたのだが楽しい! 「ちょっと脇に」は魔法の言葉! | Find the meaning of my life.僕も見習いたいです★ アプリ紹介のBookmarklet「AppHtml2」公開♪ | 普通のサラリーマンのiPhone日記いつも愛用させて頂いてるヒロさんのブックマークレットがバージョンアップです。ありがとうございます! Mac Fan編集部に遊びにいってきました! | 和洋風◎楽しそうですね★ [...]

  3. [...] Turn it on in Settings › Safari to view this website. アプリ紹介のBookmarklet「AppHtml2」公開♪ | 普通のサラリーマンのiPhone日記 1月 8th, 2011 @ 07:03 pm › tyudon ↓ Leave a comment アプリ紹 [...]

  4. [...] 使用したアプリと参照したサイトは以下より。 アプリ紹介のBookmarklet「AppHtml2」公開♪ | 普通のサラリーマンのiPhone日記 [...]

  5. [...] アプリ紹介のBookmarklet「AppHtml2」公開♪ | 普通のサラリーマンのiPhone日記 [...]

  6. [...] アプリ紹介のBookmarklet「AppHtml2」公開♪ | 普通のサラリーマンのiPhone日記 「AppHtml2」とは何じゃ? ブラウザ、および、iPhone上で使えます。ブラウザ上で使う場合、選択した文字(もしく [...]

  7. [...] ◆ 普通のサラリーマンのiPhone日記 アプリ紹介のBookmarklet「AppHtml2」公開♪ [...]

  8. [...] アプリ紹介のBookmarklet「AppHtml2」公開♪ | 普通のサラリーマンのiPhone日記 [...]

  9. [...] アプリ紹介のBookmarklet「AppHtml2」公開♪ 普通のサラリーマンのiPhone日記 カテゴリー: iPhone/iPad タグ: iPhoneアプリ, [...]

  10. [...] アプリ紹介のBookmarklet「AppHtml2」公開♪ 普通のサラリーマンのiPhone日記 (追記) [...]

  11. moff&moff より:

    [...] アプリ紹介のBookmarklet「AppHtml2」公開♪ | 普通のサラリーマンのiPhone日記 [...]

  12. [...] @hiro45jp さんのブックマークレット AppHtml アプリ紹介のBookmarklet「AppHtml2」公開♪ | 普通のサラリーマンのiPhone日記 ぶっちゃけこれがないと書くスピードが全然違ってきます。 @hiro45jp [...]

  13. [...] ブログを書くのには欠かせないツールがアップデート アプリ紹介のBookmarklet「AppHtml2」公開♪ | 普通のサラリーマンのiPhone日記 [...]

  14. [...] ブログを書くのには欠かせないツールがアップデート アプリ紹介のBookmarklet「AppHtml2」公開♪ | 普通のサラリーマンのiPhone日記 [...]

  15. [...] ブログ、アプリをキレイに紹介するための設定をする7月 9th, 2012 @ 11:43 pm › kskotetsu ↓ Leave a commentiPhoneアプリ・ゲーム紹介なんかをしたいので、カッコよく貼り付けたいと思い、色々調べてました。みんなきれいに貼ってるもんね。きっと誰かが簡単にできるようにしてるだろうから、とりあえず「ブログ bookmarklet」で検索すると、AppHtml他が見つかりました。あー、みんなこんなの使ってるんだ。ずるい。早く教えてほしい。アプリ紹介のBookmarklet「AppHtml2」公開♪ | 普通のサラリーマンのiPhone日記これでアプリや他のサイトも超おもしろカッコよく紹介できるようになります。作者さん、どうもありがとう。あと、ここまで書いて今日設定したのは古い方のAppHtmlだったことに気づきました。明日入れ替えます。ともかくこれを使えばこの前のはてなブックマーク数表示も不必要になります・・・。とりあえずスクリプト外しておこう。あとはまあ、そろそろ書くのに慣れてきたのでフランクにいこうかな。Related posts:WordPressとtwitterの連携をやってみる7月1日のうるう秒の影響でMySQLがCPU 100%になっていた件 Categories: iPhone, Mac, PC, ソフトウェア Tags: apphtml, blog, iphone, wordpress Del.icio.us Digg Technorati Magnolia Newsvine Reddit Success! Comment added. › Refresh the page to see your comment. (If your comment requires moderation it will be added soon.)Leave A Comment [...]

  16. [...] ブックマークレットがAppHTML。 アプリ紹介のBookmarklet「AppHtml2」公開♪ | 普通のサラリーマンの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>