アプリを紹介するブックマークレット「AppHTML」をカスタマイズしました

AppHTML_customize00.png

ブログを書くのにブックマークレットのお世話になりまくってます@delaymaniaです。

特にアプリ紹介するのに「AppHTML」は使いまくってます。

いままでデフォルトの設定で使ってたんですが、自分好みにいじってみました。

ソースも載せてありますので、よかったらソースごと持って行ってください。

ブックマークレット「AppHTML」をカスタマイズする目的

AppHTMLはアプリを紹介するときに使うブックマークレットです。

手軽にアプリの紹介画像とテキストを貼りつけられるので重宝しています。

今回AppHTMLをカスタマイズする目的は3つ。

  • (個人的に)必要のない情報を削りたい
  • デザインをCSSで一括変更できるようにしたい(各項目にclass名をつけておく)
  • 個人的にこだわりたい部分を細かく修正をしたい

▼元々使ってたブックマークレットではこんな感じに出力されてました。
apphtml_customize-01

アプリ買うときにおおよそ気にしないであろう余計な情報満載ですね。

特にバージョンの情報は、過去記事を紹介するときに余計な情報だなって思ってたんですよね。

あと、アプリのサイズ気にする人もそうそういないだろうなって。

というわけで、使いやすいようにカスタマイズしてみます。

実際にカスタマイズしてみる

AppHTMLメーカーでAppHTMLのひな形を作成する

まずはAppHTMLメーカーのサイトへ行きます。

「AppHTML」のカスタマイズに使える特殊な文字

カスタマイズするにあたり、独自のタグというか、特殊な文字があります。

これを足したり引いたりすれば自分だけのブックマークレットが作れます。

${appname} アプリの名前
${version} バージョン
${price} 値段
${title} 上の三つを合わせたもの
${linkshareurl} アプリのURLアドレス
${icon100url} アイコンのURLアドレス
${seller} 販売元
${category} カテゴリー
${appsize} サイズ
${pubdate} 公開日
${rating} レーティング

ソースを書き換える

ソースを書いておきますが、いまいち見づらくてごめんなさい。
見やすいようにちょっとだけ改行入れてます。
テキストエディタなどにコピペして見てください。

▼こちらが「中アイコン表示」にしたときのデフォルトのソースです。

<a href="${linkshareurl}" target="_blank" rel="nofollow"><img width="100" class="alignleft" align="left" src="${icon100url}" style="border-radius: 20px 20px 20px 20px;-moz-border-radius: 20px 20px 20px 20px;-webkit-border-radius: 20px 20px 20px 20px;box-shadow: 1px 4px 6px 1px #999999;-moz-box-shadow: 1px 4px 6px 1px #999999;-webkit-box-shadow: 1px 4px 6px 1px #999999;margin: -5px 15px 1px 5px;"></a>
<strong> ${title}</strong>
<a href="${linkshareurl}" target="_blank" rel="nofollow"><img src="http://s.mzstatic.com/htmlResources/E6C6/web-storefront/images/viewinitunes_jp.png" style="vertical-align:bottom;" width="90" alt="App"></a><br> 
カテゴリ: ${category}<br> 
販売元: <a href="${selleritunes}" target="_blank" rel="nofollow">${seller}</a>
(サイズ: ${appsize})<br> 
全てのバージョンの評価: ${allverstar}(${allreviewcnt})<br> 
${gamecenter} ${univ}<br style="clear: both;">

▼そしてこちらが変更後。

<div class="appHtmlFrame">
<span class="appIcon">
<a href="${linkshareurl}" target="_blank" rel="nofollow"><img src="${icon100url}" width="100" height="100" class="appIconImg" style="border-radius: 20px 20px 20px 20px;-moz-border-radius: 20px 20px 20px 20px;-webkit-border-radius: 20px 20px 20px 20px;box-shadow: 1px 4px 6px 1px #999999;-moz-box-shadow: 1px 4px 6px 1px #999999;-webkit-box-shadow: 1px 4px 6px 1px #999999;margin: -5px 15px 1px 5px; float:left;" alt="${appname}"></a>
</span>
<span class="appTitle">
<a href="${linkshareurl}" target="_blank" rel="nofollow"> ${appname}</a>
</span><br> 
<span class="appPrice">価格: ${price}</span><br> 
<span class="appCat">カテゴリ: ${category}</span><br> 
<span class="appLink"><a href="${linkshareurl}" target="_blank" rel="nofollow">App Storeで詳細を見る</a>
</span>
<br style="clear: both;">
</div>

主な変更点は

  • 全体をdivでくくってclass名をつけた
  • 各パーツをspanでくくってそれぞれclass名をつけた
  • ${title}を${appname}に変更してテキストリンクにした
  • 価格とカテゴリ以外を削除
  • 最後に「App Storeで詳細を見る」という一文を追加してテキストリンクにした
  • HTML5で廃止される予定のimgタグのalign="left"style="float:left;"に変更
  • imgタグのclass名を変更
  • imgタグにheightを指定して読み込みを高速化
  • imgタグのaltにアプリ名が入るようにした

ポイントは、各項目ごとにspanでくくって、全体をdivでくくったことです。

class名を細かく設定したことで、各項目のデザインをあとで変えたいときに一括で変更できるようになりました。これがCSSの利点です。

それとなぜかデフォルトではimgタグにheightが指定されてませんでした。画像は幅と高さを指定することで読み込み時間が短くなりますのでこれも指定しました。

altもついてなかったのでアプリの名前を入れました。空のままでも入れておくだけで十分ですがせっかくなのでアプリ名入れておくことにします。

あとは先ほど紹介した特殊な文字一覧を見ながらいらないものを消して、必要な項目だけで構築しました。

AppHTMLメーカーでブックマークレットを作成する

ここまでくれば、先ほどのソースをAppHTMLメーカーの任意の場所に入れてブックマークレットを作成すればおっけーです。

▼ここに入れます。
AppHTML customize01

▼というわけでカスタマイズしたブックマークレットで生成したリンクがこれ。必要最低限の情報だけ載せることで見やすくなりました。
apphtml_customize-02

分かる人は分かると思うのですが、AppStoreHelperで作ったリンクと同じ感じになるようにしました。

AppStoreHelperとの違いは、Macじゃなくてもどの環境でも使えるという点ですね。

カスタマイズの際の注意点

カスタマイズする際に、HTML5で廃止されてるタグを使うのはやめておきましょう。

たとえばRSS配信のことを考えて特別な色を付けたいと思うなら直接styleで色をつけても問題ありませんが、fontタグではなくspanタグを使いましょう。

<!-- 正しい例 -->
<span style="color:#0088cc;">テキストリンク</span>

<!-- 使ってはいけない例 -->
<font color="#0088cc">テキストリンク</font>

最後に

おそらくほとんどの人が疑いもせずカスタマイズせずに使ってると思うので、いじれるっていうことが分かってもらえるだけでもこの記事の意味があるかなと。

試しにいろいろやってみると面白いですよ。

ShareHTMLもいじってみたので、そちらもまた記事書きますね。