• HOME
  • BLOG
  • Web制作
  • MacアプリMarsEditでiTunesアフィリエイトに最適なリンクがつくれるツール「AppHtmlME」

MacアプリMarsEditでiTunesアフィリエイトに最適なリンクがつくれるツール「AppHtmlME」

Web制作

iPhoneやMacのアプリへのリンクを貼るときに、当ブログではiTunesアフィリエイト謹製の「ウィジェットビルダー」を使用していたのですが、他のツールを使ってみようと探したところ、MacアプリMarsEditで使える「AppHtmlME」がとてもよかったので、使いかたなどをメモします。

今回やりたいこと

「ウィジェットビルダー」ではなく、APIをつかった他のツールを使いたいと思いました。

  • 見ためをもっとカスタマイズしたい
  • （環境によるのかもしれませんが）「ウィジェットビルダー」を使っている当ブログの記事をFirefoxで開くとどうも下記のエラーが出るようで、気になるのでちがうものを使いたい
    140129_01

また、ツールには下記のような機能があることが希望です。

  • 見ためがカスタマイズできるもの
    → 表示する項目をえらべて、html/CSSで見ためをカスタマイズできる
  • iPhoneアプリだけではなくMacアプリなど日本のiTunesで提供されているコンテンツにも対応している
  • 投稿時に手間がかからないようにしたい
    →　記事を書いている最中に気軽にリンクなりウィジェットなりを記事内に入れられるようにしたい

選んだツール

希望に合うツールがないか、いろいろなWordPressプラグインやブックマークレットなどを試してみたところ、やりたいことに一番マッチした「AppHtml」を使わせていただくことにしました。
→　Happy-Go-Lucky: AppHtmlME 3.0 PHG 対応その他

AppHtmlは、Web版・ブックマークレット・Macアプリ「MarsEdit」に対応しているのですが、いつも記事を書くのにつかっているMacアプリ「MarsEdit」に対応した「AppHtmlME」を使うことにします。
→　connect1ngdots/AppHtmlME · GitHub

※Web版やブックマークレットについてはこちら
→　AppHtml正式版をリニューアルしました♪ | 普通のサラリーマンのiPhone日記

ちなみに、MarsEditは、ブログ記事を書くのにとても便利なMacアプリです。

[column size=1/3][/column]
[column size=2/3]MarsEdit – the blog editor for WordPress, Tumblr, Blogger and more.

  • カテゴリ：ソーシャルネットワーキング, 仕事効率化
  • 価格：￥4,000 （2014.02.10 時点）

Mac APP Storeでチェック[/column]
[clear]

AppHtmlMEの使いかた

使いかたはかんたんで、MarsEditのメニューバーから［Services］＞「AppHtmlME」を選ぶと、
140128_02

ポップアップ画面が開いてストアの一覧が表示されるので、対象を選んで、
140128_03

表示したいアプリや曲などを検索します。
140128_04

検索結果が表示されたら、そこから紹介したいアプリなどを選び、
140128_05

表示する書式テンプレート（見ため）を選ぶと、
140128_06

記事内に下記のような商品紹介表示用のソースが入ります。（下記はデフォルトの「アイコン付き（大）」書式テンプレートでiPhoneアプリ「WordPress」を選んだ例です）
[code]<span class=”appIcon”><img class=”appIconImg” height=”100″ src=”http://a894.phobos.apple.com/us/r30/Purple4/v4/ba/35/74/ba3574b1-9711-e5cf-f46b-92566264218a/mzl.idytcllq.png” style=”float:left;;margin: 0px 15px 15px 5px;”></span>
<span class=”appName”><strong><a href=”https://itunes.apple.com/jp/app/wordpress/id335703880?mt=8&uo=4″ target=”itunes_store”>WordPress</a></strong></span><br>
<span class=”appCategory”>カテゴリ: ソーシャルネットワーキング, 仕事効率化</span><br>
<span class=”badgeL” style=”display:inline-block; margin:4px”><a href=”https://itunes.apple.com/jp/app/wordpress/id335703880?mt=8&uo=4″ target=”itunes_store” style=”display:inline-block;overflow:hidden;background:url(http://linkmaker.itunes.apple.com/htmlResources/assets/ja_jp//images/web/linkmaker/badge_appstore-lrg.png) no-repeat;width:135px;height:40px;@media only screen{background-image:url(http://linkmaker.itunes.apple.com/htmlResources/assets/ja_jp//images/web/linkmaker/badge_appstore-lrg.svg);}”></a></span><br style=”clear:both;”>[/code]

そして、こんなかんじで表示されます。
140128_07

また、他の書式テンプレートを選ぶと、それぞれこんなかんじで表示されます。
140128_08

こんなふうに、記事を書いている途中で、その場でアプリなどを検索してタグが挿入できるので、手間がかからず便利ですね。

インストール

MarsEditで「AppHtmlME」をつかうためには、まず「AppHtmlME」をインストールします。下記のページに「AppHtmlME」のダウンロードリンクがあるので、Zipファイルをダウンロードします。
→　Happy-Go-Lucky: AppHtmlME 3.0 PHG 対応その他

（2014年2月10日追記）
GitHubで最新のものがダウンロードできるようなので、こちらからのほうがよいかもしれません。
→　connect1ngdots/AppHtmlME · GitHub
2014-02-10_01

Zipを解凍して「AppHtmlME.workflow」を開き、
140128_09

インストールして、
140128_10

完了です。
140128_11

カスタマイズ

見ためのカスタマイズや、iTunesストアへのリンクに自分のPHGアフィリエイトトークンを入れるためには、「AppHtmlME」のREADMEに記載のある下記の「apphtml_setting.py」ファイルをテキストエディタなどで開いて、手を加えます。

~/Library/Services/AppHtmlMe.workflow/Scripts/apphtml_settings.py を ~/ にコピーして書き換えるとこちらの設定が使用されます。

ー　connect1ngdots/AppHtmlME · GitHub

このファイルです。
140128_12

※「apphtml_setting.py」ファイルがどこにあるかわからない場合は、下記の方法で上記のパス（「~/Library/〜/apphtml_settings.pyまで）を入れると表示できます
→　Macのユーザライブラリフォルダにアクセスする方法 | nekonomemo.net

※上記に「コピーして書き換える」とあるのですが、そのファイルに上書きしても設定が変更できました（手を加えたときに間違って動作しなくなると困るので、バックアップを取ってから上書きしましょう！）

アフィリエイトトークンを入れる

商品紹介時にiTunesアフィリエイトを利用したい場合は、iTunesのPHGアフィリエイトトークンを「apphtml_setting.py」ファイルに書き込みます。

ソースの「settings」のところに「’phg’」とあるので、その後のダブルクォーテーションの間にアフィリエイトトークンを入れます。
140128_13

アフィリエイトトークンは、iTunesアフィリエイト管理画面の上部に書いてあります。
140128_14

※アフィリエイトトークンを設定したら、ちゃんと計測されるかどうかのテストをお忘れなく！

見ためのカスタマイズ

見ためのカスタマイズをしたい場合は、同ファイル内にあるテンプレートのhtml/cssを編集します。各書式（ボタン・アイコン付きなど）ごとにカスタマイズができます。また、表示する項目を追加・削除したい場合は、テンプレートの中に表示したい項目の「予約語」を入れます。予約語の一覧はこちらに掲載されています。
→　connect1ngdots/AppHtmlME · GitHub

（下記はテンプレートのデフォルトソース）
[code]defaultTemplate = {
‘1) 小さいボタン’: ‘${badgeS}’,
‘2) 大きいボタン’: ‘${badgeL}’,
‘3) テキストのみ’: ‘${textonly}’,
“4) アイコン付き(小)”: u”””<span class=”appIcon”><img class=”appIconImg” height=”60″ src=”${icon60url}” style=”float:left;margin: 0px 15px 15px 5px;”></span>
<span class=”appName”><strong><a href=”${url}” target=”itunes_store”>${name}</a></strong></span><br>
<span class=”appCategory”>カテゴリ: ${category}</span><br>
<span class=”badgeS” style=”display:inline-block; margin:6px”>${badgeS}</span><br style=”clear:both;”>
“””,
“5) アイコン付き(大)”: u”””<span class=”appIcon”><img class=”appIconImg” height=”100″ src=”${icon100url}” style=”float:left;;margin: 0px 15px 15px 5px;”></span>
<span class=”appName”><strong><a href=”${url}” target=”itunes_store”>${name}</a></strong></span><br>
<span class=”appCategory”>カテゴリ: ${category}</span><br>
<span class=”badgeL” style=”display:inline-block; margin:4px”>${badgeL}</span><br style=”clear:both;”>
“””
}
[/code]

また、ストアごとにちがうテンプレートを呼び出すことができます。「apphtml_setting.py」ファイル内に下記の記述がありますので、各ストアごとにちがう見ためを設定できます。たとえば、上記の「defaultTemplate」以下をコピー＆ペーストしてテンプレート名（「defaultTemplate」）に別名をつけて、そのテンプレート名を下記の箇所でストアと紐付ければOKです（下記は「macSoftware」だけオリジナルのテンプレートにしてみた例）。

[code]
‘template’: {
‘software’: defaultTemplate,
‘iPadSoftware’: defaultTemplate,
‘macSoftware’: nekonomemoTemplate,
‘song’: defaultTemplate,
‘album’: defaultTemplate,
‘movie’: defaultTemplate,
‘ebook’: defaultTemplate
}[/code]

※softwareは「iPhoneアプリ」のようです。

まとめ

同様のツールやプラグインもいくつか試してみたのですが、iPhoneアプリに特化したものだったり海外のストアの商品しか扱えないものがあったり、なかなかよいものが見つけられずにいましたが、この「AppHtmlME」は私がやりたいことに一番合っていて、使いやすくて大満足です。開発者のみなさま、ありがとうございます！

html/cssの知識があれば、比較的簡単に見ためのカスタマイズができるところがとてもうれしいですね。当ブログではこんなかんじで表示することにしました。
140129_10

renaf

renaf

WEB制作・開発、iPhoneアプリ、DTMなどのTipsやメモを書いています。

関連記事