「アプリをダウンロードする」ボタンを大ちゃんに頂いたので、AppHtmlに組み込んだ!

2012/12/19
ブログ / WordPress

AppHtmlDownloadButton

iPhoneで記事をチェックすることが増えてきた、@jinnaitakumiです!

最近、スマートフォンからの閲覧が増えています。
先日のオフネクでやよこさんも、スマートフォンばかりで読んでるぅ、と仰っていました。

そんなスマートフォンでの閲覧で便利なボタンをdelaymaniaの大ちゃんが作ったのです!

経緯 〜ものごとには経緯というものがある〜

大ちゃんが「アプリをダウンロードする」ボタンを作る

このエントリを読んだときは
「なるほど〜、確かにボタンがあった方が分かりやすいよな〜」
程度に思っただけで、特に気にしていませんでした。

いつか実装してみようかな〜、くらいの感じ。

でもね。

このエントリをiPhoneで読んで、そのままアプリをダウンロードしたときに衝撃を受けたわけで。

「なにこれ、超ラク!」

普通のリンクだとタップしにくいけれど、この「アプリをダウンロードする」ボタンがあると、めちゃめちゃ快適!

「これはスマートフォンユーザー向けに絶対実装したい!」
と思ったのです。

大ちゃんが@donpyさんと@maguro29に作ってた

そんなときに覚醒するCDiPとMagLog向きにダウンロードボタンを提供していて、「これは僕も欲しい((((;゚Д゚))))」的なツイートをしたら、作ってくれました!

マジであざっす!

大ちゃんは天使です! ヒーローです!

「アプリをダウンロードする」ボタンは僕のブログに合わせて「#3090f0」をベースに作っていただきました。

▼これが作っていただいたボタン

AppDownloadButton 3090f0

AppHtmlにボタンを組み込む

まあ、AppHtmlの末尾にボタンを付け足せばいいわけです。

▼以前のカスタマイズエントリはこちら!


これをベースに、delaymaniaの実装エントリを参考にしつつ、ボタン部分を追加して、あとからCSSでいじれるようにいろいろ囲ったりしました。

いままでと違うのはdivとかclassだとかでちょこちょこ囲うようにして、あとからCSSを編集することでいじれるようにしたこと。

▼できあがったソースはこちら。
<div class="appHtmlStyle">
<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;">
<strong><a href="${linkshareurl}" target="_blank" rel="nofollow">${appname}</a></strong>
<apphtml><br> 価格: ${price} サイズ:${appsize}
<br> カテゴリ:${category}
<br><a href="${linkshareurl}" target="_black" rel="nofollow">iTunesで詳しく見る</a></apphtml>
<div class"appDownloadButtonStyle"><br><a href="${linkshareurl}" target"_black" rel="nofollow">
<img src="http://jinnaitakumi.com/wp-content/uploads/appDownloadButton_3090f0.png" width="300"></a></div>
<br style="clear: both;"></div>
ソースをコピペして使う場合は改行を削除してください。それとボタンの画像リンクは自分の(レンタル)サーバーにアップロードしたものを使ってください。そのまま使うと直リンクになっちゃって私が困るので。
▼こんな感じで出力されます。

▼試しに使ってみたエントリがこちら!


▼iPhoneで見るとこんな感じに。

IMG 4021

ホント押しやすい。
初心者の人にもダウンロードするにはどこを押せばいいのか分かりやすいし、マジでいいことばっかりだぜ!

ありがとう大ちゃん!

まとめ

ということで、今回のポイントをまとめると

  • 大ちゃんの作った「アプリをダウンロードする」ボタンが快適!
  • 僕にも色を「#3090f0」を使ったボタンをくれた!
  • AppHtmlにボタンを組み込んだ!

の3つです!

最高ですよ!

そして調子に乗ってそのままShareHtmlもいじりはじめたせいで、更新が遅れたりした次第ですw