« 自転車の空気が抜ける理由はパンクだけじゃない-虫ゴムの交換 | トップページ | twitterアイコン付加スクリプトで「&」で切れる問題修正-ココログ無料版用 »

2012年7月 5日 (木曜日)

iTunes & App Storeリンク作成をブックマークレットでカンタンに Sticky iTunes Link Maker用

 ご要望に応えてブックマークレット公開。App StoreのiPhone/iPadアプリ、iTunes Storeの楽曲へのリンクがカンタンに作れるサービス「Sticky iTunes Link Maker - iTunes リンク作成ツールはてなブックマーク - Sticky iTunes Link Maker - iTunes リンク作成ツール」への機能追加です。これでブログ投稿時のアフィリエイトがもっとカンタンになる!(はず)

Sticky iTunes Link Maker これまではSticky iTunes Link Makerのページに移動、キーワードを入力して検索という手順が必要でしたが、このブックマークレットでもうちょっと作業が楽になります(のはず)。
 まだ、仕様が固まってない(もっといいようにできそう)ので、とりあえず暫定版という感じで公開。

 まずはこれを使用するとどんな感じになるのかっていう紹介。

  • キーワード入力はページ内のテキストを選択するだけ
  • ページ内にキーワードがなければ、プロンプトに入力

 こんな感じですね。では、具体的に手順を画面入りで見ていただきましょう。

キーワード入力は文字列選択でOK!

 まずは今読んでいる記事にあるアプリや楽曲を紹介したいと思ったら。検索のキーワードとなる文字列をマウスで選択-反転させます。

キーワードを反転

 上記画面は、AppBankChromeの記事なんですが、このアプリを紹介したい場合は「Chrome」を反転させます。

 続いて、あらかじめ登録してあったブックマークレットをクリック(ブックマークレットの導入方法は後述)。

ブックマークレットをクリック

 すると、ページが移動して、Sticky iTunes Link Makerで「Chrome」で検索した結果が表示されます。

結果表示

 「あれ? 表示されてるのはアプリじゃなくって、音楽アルバムの結果なんだけど」

 そうなんです。まず表示されるのはアルバムの結果でした。ここで、たとえば「iPadアプリ」を選択し直して「検索」ボタン押してください。

商品カテゴリを選択

 「検索」クリックで結果画面へ。

アルバムの検索結果

 はい。これで目的のアプリが表示されましたね。これまでよりだいぶ楽になったはず。

 あとは、チェックして画面下のコード作成エリアでHTMLコードを出力して使ってください。Sticky iTunes Link Makerの基本的な使いかたは以下のを参照してください。

 捗るiTunesリンク作成! 検索結果まとめて iPhoneアプリ&楽曲対応: point of view pointはてなブックマーク - 捗るiTunesリンク作成! 検索結果まとめて iPhoneアプリ&楽曲対応: point of view point

キーワードを入力したいんだけど

 表示しているページ内に検索する文字列がない場合は手動で文字を入力することもできます。

 まずは、ページ内で文字列を選択していない状態で(つまりそのまま)、ブックマークレットをクリック!

プロンプト

 上記のようにプロンプトが出るので、検索キーワードを入力(画面は開発中のもので、変更される可能性があります)。

 すると、検索結果が出ます。あとは、最初の例と同じですね。

 Sticky iTunes Link Makerのページに移動してからキーワード入力、という手順よりはちょっと楽かな、と。商品カテゴリの選択が面倒では!? という人には別途用意してます。後述。

ページ移動に注意!

 文字列選択、プロンプトでの入力、いずれの場合でも注意点が1つ。

 検索結果を表示する際にページが移動します。

 これの何が問題かというと、たとえば、ブログ投稿時に記事を入力中にブックマークレットを起動すると、ページ移動になってしまい、それまで入力した内容がなくなってしまったりしてしまうのです。

 ということで、ブックマークレットを起動する際は別途ウィンドウを開いた状態で行うなどしてください。

 「別ページで開くようにできないの?」という声もあるかもしれませんが、今回はやめておきました。

 というのも。最近のブラウザはポップアップブロックにより、JavaScriptで新規ページを開こうとするとなんらかの警告が出ます。これを回避するには設定が必要だったり、許可するための操作が必要になったりします。その対処をさせるのもどうかな、と思い、こういう仕様としました。何かほかにうまい対策方法があれば教えてください。

ブックマークレットの導入方法

 では、最後に、ブックマークレットの導入方法です。基本的に、通常のページをブック(お気に入り)に追加する方法と変わりません。

 以下のリンクをブックマーク(とかお気に入り)に追加。リンクバーなど(IEならお気に入りバー)にドラッグ&ドロップがカンタンでオススメ。

Sticky bookmarklet (←クリックするものではないですよ)

 なお、Windows版SafariではURLがそのままブックマーク名になるので、登録時にわかりやすい名前に変更してください(登録時に名前の入力が促されます)。登録後の変更も可能です。Macだとどうなんですかね?
 

アルバムの検索結果が最初に表示されるのはどうなの?

 最初の例で示したとおり、このブックマークレットで最初に表示されるのは音楽アルバムの検索結果です。

 基本的にアプリしか紹介しないから、最初からアプリの結果を出してほしいという方もいるでしょう。

 ということで、それ用のブックマークレットもひととおり置いておきますね。

 一番使いそうなやつだけ登録して、あとは開いたページで商品カテゴリを指定し直す、っていう感じで対処するのがいいかと思われます。

Sticky bookmarklet iOS(iOSアプリ用)

Sticky bookmarklet iPad(iPadアプリ用)

Sticky bookmarklet album (音楽-アルバム)

Sticky bookmarklet song(音楽-曲)

 基本的にURLの ent='○○' の部分を書き換えてるだけなので、movieとかmusicVideoとかpodcastとかにすれば映画、ミュージック・ビデオ、ポッドキャストにも対応できます。一応。

補足とかおまけとかいろいろ

 というわけで、前々から作ってはあったのですが、公開を忘れてた&ドキュメントを書くのが面倒だったので、ここまで遅くなってしまいました。もうほかのツールでいいよ、ってなってる人も多いかと思いますが、一応公開しておきます。

 キーワードだけでなく商品カテゴリもブックマークレット側で選べるように、とかも考えたのですが、jQueryとか動的にロードして……とかいろいろ面倒になり、最もシンプルな形で落ち着きました。修正とかメンテナンスも楽だし。

 そういえば、以前するぷさんに紹介いただいたエントリ。

速攻でiTunes Storeの曲や映画のアフィリエイトリンクが作れるウェブサービス「Sticky iTunes Link Maker」がネ申すぎる件! | 和洋風◎はてなブックマーク - 速攻でiTunes Storeの曲や映画のアフィリエイトリンクが作れるウェブサービス「Sticky iTunes Link Maker」がネ申すぎる件! | 和洋風◎

 では、「あとはブックマークレット対応と、テンプレートを自力でいじれるようになったら、なにもいうことはない完成度です」と言われてました。とりあえず、ブックマークレット対応は完了したのですが、これでどうでしょうか?
 この記事で、作ると表明しつつ、こんなタイミングになってしまいましたが。

 あと、使いかたとしては、Safariならショートカットキーに割り当てるのもいいかもですね。

 [N] キーボードショートカットでSafariのブックマークレットを便利に使うTipsはてなブックマーク - [N] キーボードショートカットでSafariのブックマークレットを便利に使うTips

 それから、iOSのSafariでも試したんですが、選択範囲の文字列がうまく拾えないので保留。っていうか、範囲選択の作業自体がけっこう面倒なので、どうしたもんかと。

 まあ、それは別として。

 動作確認はWindowsはIE9、Firefox、Safari、Chromeで、MacのSafariで行ないました。投稿時に書き写す際にミスしてる可能性もあります。「こうしたほうがいいんじゃない?」とかも含め、なんかありましたらコメントください。

 では、よろしくお願いします。


|

« 自転車の空気が抜ける理由はパンクだけじゃない-虫ゴムの交換 | トップページ | twitterアイコン付加スクリプトで「&」で切れる問題修正-ココログ無料版用 »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35726/55125228

この記事へのトラックバック一覧です: iTunes & App Storeリンク作成をブックマークレットでカンタンに Sticky iTunes Link Maker用:

» twitterアイコン付加スクリプトで「 [point of view point]
 URLに「 [続きを読む]

受信: 2012年7月 6日 (金曜日) 午後 07時13分

« 自転車の空気が抜ける理由はパンクだけじゃない-虫ゴムの交換 | トップページ | twitterアイコン付加スクリプトで「&」で切れる問題修正-ココログ無料版用 »