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

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

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

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

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

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

ブロネクロビーで初めての非公開ハングアウトオフ会「オフネクBeeeeeeer!!!」をやってきました | delaymania

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

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

でもね。

写真の顔にサンタをかぶせるアプリ「強制サンタ」をリリースしました | delaymania

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

「なにこれ、超ラク！」

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

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

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

「覚醒する ＠CDiP」と「MagLog」にアプリをダウンロードするボタンを提供しました | delaymania

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

マジであざっす！

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

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

AppHtmlにボタンを組み込む

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

AppHTMLの画像リンク切れ対策で、AppHTMLをカスタマイズした | jinnaitakumi.com

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

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

いままでと違うのは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="https://jinnaitakumi.com/wp-content/uploads/appDownloadButton_3090f0.png" width="300"></a></div>
<br style="clear: both;"></div>

ライフロガー必見！ 「定型文」をQuickaと組み合わせると最強過ぎて笑える！ #定型文 | jinnaitakumi.com

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

ありがとう大ちゃん！

まとめ

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

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

の3つです！

最高ですよ！

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