photo credit: Cristiano Betta via photopin ccAppleアフィリエイトプログラムがPHGに切り替わった時に作りなおしたはずのAppHtmlが、突然使えなくなったりMacアプリを検索してくれなかったりとイマイチ使い勝手が悪いので、作りなおすことにしました。
AppHemlブックマークレットメーカー
今回使わせていただいたブックマークメーカーはこちらです。
以前も使おうと試みたことはあったのですが、テンプレートのカスタマイズ性が良すぎて、予約語の使い方とかが分からず、思い通りの結果にできなかったため別のブックマークメーカーで作成したものを使っていました。
AppHtmlメーカー for PHG対応版
デフォルトのままで使う分には、ボタン選択だけで簡単に出来て、見た目も綺麗にできるので予備知識なしでも使えて便利でした。
しかし基本的にiPhoneアプリの検索メインのようで、Macアプリを見つけてくれなかったり、なぜか反応しなくなったりしました。
新AppHtmlブックマークレットの作成
AppHtmlブックマークレット・メーカーは、iPhone用、iPad用そしてMac用と、検索範囲をそれぞれ分けて作れます。
今回作ったサンプル↓
・iPhone用
iPhoto価格: ￥500(記事公開時)
サイズ: 287.3 MB
カテゴリ: 写真／ビデオ, ライフスタイル
・iPad用
iPhoto価格: ￥500(記事公開時)
サイズ: 287.3 MB
カテゴリ: 写真／ビデオ, ライフスタイル
・Mac用
iPhoto価格: ￥1,500(記事公開時)
サイズ: 1,152.9 MB
カテゴリ: 写真, ライフスタイル
iPhoneとiPadのアイコンには角丸処理を、Mac用のものは処理をせずにデフォルトのまま使用しています。内容は価格とサイズ、カテゴリのみにしました。
レビューや製作者情報などは、興味のある方ならAppStoreで確認されると思うので割愛。カテゴリも正直いらないかなと思いましたが、スカスカになって寂しいので入れときました＾＾
作成にあたって、こちらのサイトを参考にさせていただきました。
角丸処理についてiOS7への対応が、わかりやすく解説されています。
また同じサイトの方が作られたこちらのツールも、予約語使用方法の参考に活用させていただきました。
AppHtmlメーカー for PHG対応版で作っていた旧ブックマークレットを変換して、AppHtmlブックマークレット・メーカーのデフォルトの内容と比較しながら予約語の使い方を学びました。
カスタマイズしたテンプレート
AppHtmlブックマークレットを使う人なら自分で作れる人がほとんどだと思いますが、私のように悩んでる人もいると思うので、今回作ったテンプレート貼っときます。(私も公開されてるテンプレート探してました＾＾；)
AppHtmlブックマークレット・メーカーの「テンプレートを直接カスタマイズできます（但し ' は禁止文字）」欄にコピペして下さい。
そのままでサンプルと同じ書式でスクリプトが生成されるはずです。
[iPhone用]
<span class="appIcon"><a href="${url}" target="itunes_store"><img class="appIconImg" height="100" src="${icon100url}" style="border-radius:22px;-moz-border-radius:22px;-webkit-border-radius:22px;margin: 0px 15px 1px 5px;border:none;padding:0px;float:left;"></a></span><span class="appName"><strong><a href="${url}" target="itunes_store">${name}</a></strong></span><span class="badgeS" style="display:inline-block; margin:4px">${badgeS}</span><br><span class="appPrice">価格: ${price}(記事公開時)</span><br><span class="appSize">サイズ: ${appsize}</span><br><span class="appCategory">カテゴリ: ${category}</span><br><br style="clear:both;">[iPad用]
<span class="appIcon"><a href="${url}" target="itunes_store"><img class="appIconImg" height="100" src="${icon100url}" style="border-radius:22px;-moz-border-radius:22px;-webkit-border-radius:22px;margin: 0px 15px 1px 5px;border:none;padding:0px;float:left;"></a></span><span class="appName"><strong><a href="${url}" target="itunes_store">${name}</a></strong></span><span class="badgeS" style="display:inline-block; margin:4px">${badgeS}</span><br><span class="appPrice">価格: ${price}(記事公開時)</span><br><span class="appSize">サイズ: ${appsize}</span><br><span class="appCategory">カテゴリ: ${category}</span><br><br style="clear:both;">[Mac用]
<span class="appIcon"><a href="${url}" target="itunes_store"><img class="appIconImg" height="100" src="${icon100url}" style="float:left;margin: 0px 15px 15px 5px;"></a></span><span class="appName"><strong><a href="${url}" target="itunes_store">${name}</a></strong></span><span class="badgeS" style="display:inline-block; margin:4px">${badgeS}</span><br><span class="appPrice">価格: ${price}(記事公開時)</span><br><span class="appSize">サイズ: ${appsize}</span><br><span class="appCategory">カテゴリ: ${category}</span><br><br style="clear:both;">