アプリをダウンロードするボタンが付くようにAppHTMLをカスタマイズしました

appdownloadbutton_apphtml_eyecatch

ブログでアプリを紹介することが多いのですが、思うところあってアプリをダウンロードするためのボタンを設置しました。

それにともない、AppHTMLもカスタマイズしましたのでご紹介します。

アプリをダウンロードするボタンを設置することにした理由

先日友人が僕の目の前で僕のブログを見ながらアプリを購入するということがありました。

そのときに「どこを押せばいいの?」って言われたのが衝撃だったんですよね。分かりやすいように作ったつもりだったんですが分かる人にしか分からない形になっていたとは。

というわけで、先日ハングアウトオフ会「オフネクBeeeeeeer!!!」をやったときに「アプリをダウンロードする」というボタンを作ることにしたわけです。

▼これがアプリをダウンロードするボタンです。
アプリをダウンロードする

色は僕のブログにあわせて#008ee1の色をベースに作りました。

横幅はモバイルを意識して300pxにしました。

AppHTMLに埋め込むには

この画像をサーバーにアップすれば使えるには使えますが、毎回HTML手打ちするのめんどうですよね。

というわけで、AppHTMLで一発で取得できるようにカスタマイズしました。

ソースはこちらを使ってください。画像のURLをご自身のものに差し替えるだけでおっけーです。

ボタンのみバージョン

<div class="appDownloadButton">
<a href="${linkshareurl}" target="_blank" rel="nofollow"><img src="http://delaymania.com/wp/wp-content/uploads/appDownloadButton.png" width="300" height="75" alt="アプリをダウンロードする" /></a>
</div>

いつものAppHTMLにボタンをつけたバージョン

<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>
<div class="appDownloadButton"><a href="${linkshareurl}" target="_blank" rel="nofollow"><img src="http://delaymania.com/wp/wp-content/uploads/appDownloadButton.png" width="300" height="75" alt="アプリをダウンロードする"></a></div>
<br style="clear: both;">
</div>
上記ソースの改行を削除してお使いください。

ブックマークレットの作成に関しては下記記事を参照してください。
アプリを紹介するブックマークレット「AppHTML」をカスタマイズしました

CSSはこんな感じ

ボタン自体はセンタリングして、いつものAppHTMLのアプリアイコンのfloatを解除してあげてるだけ。

マウスを乗せたときの挙動はtransitionでじわっとフィルターかけました。

.appDownloadButton{
	clear:both;
	text-align:center;
	margin:0 auto;
}

.appDownloadButton a{
		transition: 0.6s ease-out;
-webkit-transition: 0.6s ease-out; /* chrome, safari */
   -moz-transition: 0.6s ease-out; /* firefox */
	-ms-transition: 0.6s ease-out; /* ie */
	 -o-transition: 0.6s ease-out; /* opera */
}
.appDownloadButton a:hover{
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
}

最後に

CSS3だけでもボタン作れるので画像にしなくてもいいんですけど、細かいことやろうとするとやっぱり画像の方が楽ですよね。

アプリのダウンロードボタンがあるとユーザーにも親切でいいと思いますよ。

是非皆さんもお試しください。