AppHtmlブックマークレットメーカーのテンプレートを公開します


photo credit: Cristiano Betta via photopin cc

AppleアフィリエイトプログラムがPHGに切り替わった時に作りなおしたはずのAppHtmlが、突然使えなくなったりMacアプリを検索してくれなかったりとイマイチ使い勝手が悪いので、作りなおすことにしました。

AppHemlブックマークレットメーカー

今回使わせていただいたブックマークメーカーはこちらです。

AppHtml正式版をリニューアルしました♪ | 普通のサラリーマンのiPhone日記

AppHtmlブックマークレット・メーカー

以前も使おうと試みたことはあったのですが、テンプレートのカスタマイズ性が良すぎて、予約語の使い方とかが分からず、思い通りの結果にできなかったため別のブックマークメーカーで作成したものを使っていました。

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で確認されると思うので割愛。カテゴリも正直いらないかなと思いましたが、スカスカになって寂しいので入れときました^^

作成にあたって、こちらのサイトを参考にさせていただきました。

AppHtmlのテンプレートをiOS7風にカスタマイズ | 代助のブログ

角丸処理についてiOS7への対応が、わかりやすく解説されています。

また同じサイトの方が作られたこちらのツールも、予約語使用方法の参考に活用させていただきました。

新AppHtmlへの移行アシスタントツールを作りました | 代助のブログ

AppHtml移行アシスタント

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;">
スポンサーリンク







シェアする

フォローする