Sumirexxx

今日もiPhone片手に出かけます

AppHTMLをカスタマイズする手順すべて見せます☆ はてなブックマーク - AppHTMLをカスタマイズする手順すべて見せます☆

ブックマークレット

おはようございます。雨の音で目が覚めた♡

AppHTMLのカスタマイズに手を出しました

AppHTMLは、アプリ紹介リンクを自動的に作ってくれるありがた〜いものです。 よくブログに載っている、アイコンとアプリ名が書いてあって「App Storeから購入」とかいうボタンがついてるアレです。 基本的なことはこちらにありますので、まだ使ったことのない方はまずはこちらでどんなものかをご覧ください。(表示が変だったので修正してあります)

初心者のブックマークレット②AppHtmlをつかってみる! | sumirexxx

今日はこの見た目のカスタマイズをしようと思います。

今回やりたいのは

  1. シンプルがいい
  2. ボタンを作る

です!多くは求めない!いまは!…ではさっそく。

シンプルにしたい

前回の記事で不要な画像は削除してるので、あらかじめカットした体ですすめます。

AppHTMLリンク切れの修正方法をご紹介 | sumirexxx

個人的には、アプリ名と値段とジャンルが出ていればいいかなと思うので、こんな感じにしました。修正前と修正後で比べてみます。

修正前

Textwell 1.0(¥250)
カテゴリ: 仕事効率化, ユーティリティ
販売元: Sociomedia – Sociomedia, Inc.(サイズ: 1.3 MB)
全てのバージョンの評価:(0件の評価)

修正後

Textwell 1.0(¥250)
カテゴリ: 仕事効率化, ユーティリティ


こんな感じです。 このカスタマイズの仕方は簡単でした。不要な部分をカットするだけ。まず、AppHTMLメーカーを開いてソースを取得します。

スクリーンショット 2013 09 15 9 08 10

ソースを修正する

各項目を任意で設定すると、カスタマイズ書式の項目にソースが出力されます。以前はスルーしていましたが、今回はココを修正します。 ソースをコピーしてエディタに貼付けます。(私はCoda2を使っているのでそこに。)

スクリーンショット 2013 09 15 9 09 40

いらない部分を削除していきます。 前回気づいた、画像が表示されない箇所をカット。 次に、「販売元・サイズ・すべてのバージョン評価」の部分をカット。

スクリーンショット 2013 09 15 9 09 44
スクリーンショット 2013 09 15 9 10 10

編集したソースを、AppHTMLのさきほどコピーした部分に上書きします。 そして、Bookmarklet生成ボタンを選択。

スクリーンショット 2013 09 15 9 09 31

※ここで注意するのは「改行しないこと・あるいは改行したら戻すこと」です。編集した内容をAppHTMLに貼付けるとき、改行が含まれているとBookmarkletが起動しません。

下の方にAppHTML(Mac用・iPhone)登録用が出力されましたか?試しに実行してみましょう。

私はプレビュー表示にしたので、こんな感じで確認できました。

スクリーンショット 2013 09 15 9 10 34

スクリーンショット 2013 09 15 9 10 47

私が削除した部分を記述しておきます。ご参考まで…。

<br> カテゴリ: ${category}
<br> 販売元: <a href="${selleritunes}" target="_blank" rel="nofollow">${seller}</a>
(サイズ: ${appsize})<br> 全てのバージョンの評価: ${allverstar}(${allreviewcnt})
<br> ${gamecenter} ${univ}

ボタンを作る

ボタンはココで作りました。かなり簡単に作ることができます。私はイラレ買ったので使えば良かったんですが、まったくわからないので今回はこちらでさくっと作りました。
ボタン素材 自動生成サイト – ButtonMakerアフラット

なんかそれっぽくなってきた…かな?

アプリをダウンロードする

出来上がったボタンは、右クリックの画像を保存で保存します。自分が使っているWordPressテーマの中に入れます。こんな感じで。

スクリーンショット 2013 09 15 9 58 10

ソースとボタンを組み合わせる

形が決まったら、先ほど試しに作ってみたソースと合体させます。
divの”apphtml”と、”appDownloadButton”という表示があります。
これは、apphtmlはアプリリンク全体を囲っています。
”appDownloadButton”は、アプリをダウンロードボタンだけを囲って、中央寄せにしています。

<div id="apphtml">
	<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"></a><br> 
	カテゴリ: ${category}<br style="clear: both;">
	<div class="appDownloadButton">
		<a href="${linkshareurl}" rel="nofollow" target="_blank">
		<img src="http://sumirexxx.com/wp-content/themes/sample/images/apri_downloadbutton.gif" alt="アプリをダウンロードする" width="280" height="50" />
		</a>
	</div>
</div>

このソースをAppHTMLに戻って貼付けます。そして再度Bookmarklet生成を選択。実行すると、下のように新しいアプリリンクが完成しました。

スクリーンショット 2013 09 15 10 04 20

スクリーンショット 2013 09 15 10 04 40

これで完成です。

Textwell 1.0(¥250)
カテゴリ: 仕事効率化, ユーティリティ

アプリをダウンロードする

コード消すときに注意しないと、変な出力になってしまうのと、改行があるとAppHTML作れません。この2点にはくれぐれもご注意を!

今回はPCで作ったので、これをコピーしてiPhoneの方のAppHTMLも忘れないうちに置き換えないとメモメモ_φ(・_・

ということで、少しおおざっぱだったかもしれませんが概要はつかんでいただけたでしょうか?ソースをじっくり見れば、自分にいらない部分、足したい項目など見えてくると思います。

参考にさせていただいた記事

AppHtmlをカスタマイズして「アプリをダウンロードする」ボタンを追加!『 ButtomMaker 』でボタン画像も簡単に作れた! | PrimedMode

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

<