当ブログで、iPhoneアプリセールMacアプリセールの記事を書く時に手放せなくなったのが、WordPressのプラグイン「WP-Appbox」です。リリース自体は2012年辺りのようで、無料で利用でき、PHGのアフィリエイトにも対応、バージョンアップもマメに行われているプラグインだったのですが、日本のApp Storeでの価格取得がうまくできなかったため当初は利用できませんでした。ですが、あまりにも勿体無いのでサポートフォーラムでお願いした所、その日のうちにVersion 3.0.5(当時のバージョン)として直してもらえましたので、早速ご紹介します!

WP-Appboxはこんなプラグイン

WordPressの投稿画面から、簡単なショートコードにアプリのIDを付け加えて投稿するだけで、下記のようにアイコン付きのリンクが作れるというものです。まずはどんなものが作れるか実際に見て行きましょう。

シンプル表示

Feedly - Get Smarter
Feedly - Get Smarter

スクリーンショット表示

Feedly - Get Smarter
Feedly - Get Smarter
  • Feedly - Get Smarter Screenshot
  • Feedly - Get Smarter Screenshot
  • Feedly - Get Smarter Screenshot
  • Feedly - Get Smarter Screenshot
  • Feedly - Get Smarter Screenshot
  • Feedly - Get Smarter Screenshot
  • Feedly - Get Smarter Screenshot
  • Feedly - Get Smarter Screenshot
  • Feedly - Get Smarter Screenshot
  • Feedly - Get Smarter Screenshot

スクリーンショットのみ

  • Feedly - Get Smarter Screenshot
  • Feedly - Get Smarter Screenshot
  • Feedly - Get Smarter Screenshot
  • Feedly - Get Smarter Screenshot
  • Feedly - Get Smarter Screenshot
  • Feedly - Get Smarter Screenshot
  • Feedly - Get Smarter Screenshot
  • Feedly - Get Smarter Screenshot
  • Feedly - Get Smarter Screenshot
  • Feedly - Get Smarter Screenshot

コンパクト表示

Chrome Remote Desktop
Price: Free
Amazon for Opera
Price: Free
Excel Mobile
Price: Free
WP-Appbox
Price: Free

このように、iTunes App StoreやMac App Storeを始め、以下のアプリストアに対応しています。

※Version 3.1.3の時点では、Amazon Appsでは文字化けが発生するようです。

また、ショートコード内に表示モードを決定するキーワードを含めるか、設定からデフォルト値を選択することで、シンプル表示、コンパクト表示、スクリーンショット表示、スクリーンショットのみと、表示スタイルを変えることも出来ます。では早速プラグインを導入してみましょう。

WP-Appboxを新規追加する

ワードプレスのダッシュボードから、[プラグイン]→[新規追加]で”WP-Appbox”を検索して有効化するか、上記のリンクからダウンロードし、FTPでアップロードした後有効化して下さい。

WP-Appboxを有効化
WP-Appboxを有効化

WP-Appboxの設定を行う

設定>WP-Appbox有効化が終わったら、まずは設定を行います。WordPressの[設定]>[WP-Appbox]から設定画面に移行します。

※日本語化しないですぐ利用したい方は、以下からのWP-Appboxの設定項目の解説を参考にして下さい。日本語化したい方は、WP-Appbox 日本語化ファイルをご利用下さい。

設定>Cache

設定>Cache
設定>Cache

Cacheタブでは、このアプリで溜まったキャッシュを更新したり、削除したりすることが出来ます(Version 3.0.5 時点では溜まった所は見たことないですし、今のところ溜まらなくても困ってはいないのですが、どうやら修正中とのこと)。

設定>Settings

設定>Settings
設定>Settings
Basic settings(基本的な設定)
App-Raitings: チェックを入れるとアプリ評価のが表示されます。またプラグインのテンプレートファイル(wp-appbox>tpl>simple.php等)の {RATING} 部分がそれに該当します。
Colored store icons:  チェックを入れると、各ショップのアイコンがグレーからカラーに変わります。
Nofollow:  チェックを入れると、アプリのリンクタグにnofollowの属性を追加します。
Open links in a new window: チェックを入れると、アプリのリンクをクリックした時に新しいウインドウ(タブ)で開くことが出来ます。
Show Reload-link: チェックを入れると、アプリ名部分にアプリデータの再読み込み用ボタンが表示されます。
Downloadbutton caption: 任意の文字を入力することで、ダウンロードボタンの表示を変更することが出来ます(ver.3.05の時点では動作せず。変数を記入し忘れてる模様)。
Caching options(キャッシュの設定)
Data caching (minutes)  サーバーからのデータ更新の間隔を設定します。推奨値は300分。基本的には変更するべきではありません。
Error output & troubleshooting(エラー出力とトラブルシューティング)
Server timeout:  サーバーからのタイムアウトの秒数を設定します。推奨値は5秒。基本的には変更するべきではありません。
Error messages:  チェックを入れると、投稿者のみにエラーメッセージが表示されます。
Parse output:  チェックを入れると、管理者のみに見える解析出力がオンになります。
Disable cache:  ショートコードに”?wpappbox_nocache”を付与するとキャッシュが無効になります。
Force reloading:  キャッシュ設定にもかかわらず再読み込みされる場合には、ショートコードに”?wpappbox_reload_cache”を付与すると、一旦強制リロードされます。
Disable the plugins sheet: チェックを入れると、このプラグインのスタイルシートが無効になります。自分で好きなデザインに変更したい場合などに便利です。
Avoid Google Fonts: チェックを入れると、このプラグインがGoogle Fonts (OpenSans)を読み込むのを避けられます。
Apple App Store Icons: チェックを入れると、App Storeのアプリアイコンが互換モードに?

各種設定を行うことが出来ますが、基本的にはこのままでも問題ありません。

※末尾に?が付いている設定項目は、動作が確認できませんでした。

設定>App-Badge

設定>App-Badge
設定>App-Badge
Standard App-Badge Simple Badge (スクリーンショットなしの中サイズの表示モード)
Screenshots (スクリーンショット有り大サイズの表示モード)
Screenshots Only (スクリーンショットのみの表示モード)
Compact Badge (スクリーンショットなしの小サイズの表示モード)
Standard Simple Compact Screenshots Screenshots Only
各ストア名 ボタンを配置する場合にチェックを入れる

App-Badge設定タブで、デフォルトの表示モードを指定します。例えば、常にスクリーンショット表示を行いたいのであれば、[Standard App-Badge]のプルダウンメニューから[Screesshots]を選び、例外として[Google Play Apps]だけはコンパクト表示を行う場合、[Google Play Apps]のラジオボタンを[Compact]としておく、といった感じになります。

またこの設定は、あくまでデフォルト値を決めるだけなので、ショートコードを利用する際に表示モードを指定するワードを追加することで、ここの設定とは違った表示モードにすることが可能なので、初期値のままでも構いません。

設定>Buttons

設定>Buttons
設定>Buttons
Button behavior Show all App Store button in the editor(全てのボタンを個別に配置)
Show all App Store button in the editor within the AppBox-button
(AppBoxボタン内に個々のボタンを配置)
Show no buttons in the editor(各ボタンを配置しない)
Custom Setting(下記の設定に従う)
Appbox-Button
(AppBoxボタン内に配置)
Stand-Alone
(単独で配置)
HTML-View
(ビジュアルエディタにも配置)
Hide button
(ボタンを配置しない)
各ストア名 ボタンを配置する場合にチェックを入れる

この[Buttons]の設定は、記事入力画面のツールバーに、WP-Appboxのボタンを配置する設定となります。押すとショートコードを入力できる各ストア毎のボタンが用意されていて、それを配置するかどうかの設定となります。

ツールバーのボタン
ツールバーのボタン

例えば[Button behavior]のプルダウンメニューから、[Show all App Store button in the editor]を選ぶと、ビジュアルエディターのツールバーに全てのストアのボタンが配置されます。ただそれだと使わないボタンまで沢山配置されてしまうので、[Show all App Store button in the editor within the AppBox-button]でAppBoxのボタン一個を配置し、そこから選択するのがいいと思います。また、[Custom Setting]を選んで、必要なボタンのみ配置するという手もあります。

設定>Affiliate IDs

設定>Affiliate IDs
設定>Affiliate IDs
(Mac) App Store & App Store: PHG
Affiliate Token: ここに自分のPHGアフィリエイトトークンを入力します。ない場合は未記入でも可。
Use the ID of the developer: プラグイン開発者のIDを使用する場合にはここにチェック。開発の足しにしてもらえます。
Amazon Apps: Amazon PartnerNet
Amazon PartnerNet ID: AmazonのPartnerNet IDを持っている場合にはここに入力します。
Use the ID of the developer: プラグイン開発者のIDを使用する場合にはここにチェック。開発の足しにしてもらえます。
Custon affiliate IDs
Activate custom ID: カスタムアフィリエイトID(ユーザーや投稿者ごとに異なるIDを利用できます)を利用する場合はここにチェック。その場合ユーザー設定からIDを設定可能。

PHGなどのアフィリエイトIDを設定することが出来ます。

設定>Store-URLs

設定>Store-URLs
設定>Store-URLs
Store-URLs
Amazon Apps: japan http://www.amazon.co.jp/gp/product/{APPID}/?ie=UTF8
(Mac) App Store: japan https://itunes.apple.com/jp/{APPID}
Chrome Web Store: No language selection supported.
Firefox Erweiterungen: Use own URL https://addons.mozilla.org/jp/firefox/addon/{APPID}/
Firefox Marketplace: Use own URL https://marketplace.firefox.com/api/v1/apps/app/{APPID}/?region=jp&lang=jp
Google Play Apps: Use own URL https://play.google.com/store/apps/details?id={APPID}&hl=jp
Opera Add-ons: Use own URL https://addons.opera.com/ja/extensions/details/{APPID}/
Windows Store: Use own URL https://www.microsoft.com/ja-jp/store/apps/app/{APPID}
WordPress Plugins: No language selection supported.

ここから各国のストアのアドレス(URL)を指定します。Version 3.0.5の時点では、AmazonとApp Storeのみ[japan]の選択肢があるのですが、それ以外は[Use own URL]を選択した後、自分で入力してやる必要があります。今後のバージョンアップに伴い[japan]を選ぶだけで設定完了になると思われますが、それまでは上記のURLをコピーして入力してください。

設定>Help

設定>Help
設定>Help

最後のHelpタブには、各アプリのURLのどの部分がアプリ固有のIDになるかが載っています。

例えば、iPhoneアプリのHipstamaticのURLは、
https://itunes.apple.com/jp/app/slpro-x-for-iphone/id342115564?mt=8
ですが、赤色の数字部分がIDとなります。

設定が終わったら[Save change]を押して保存します。

WP-Appboxを使い、記事中に表示させてみる

[投稿]→[新規追加]を選び、記事入力部分に下記のショートコードを入力するか、ツールバーのWP-Appboxのボタンを押すとショートコードが入力されるので、アプリのIDも付け加えた上で、プレビューしてみてください。

デフォルト表示

[appbox appstore 718043190]

App-Badgeの設定をどう行っているかによってデフォルトの表示モードは変わりますが、このように表示されれば成功です。IDの後ろに半角スペースを開けて、”simple”と入力しても上記のような表示になります。

コンパクト表示

[appbox appstore 718043190 compact]

ショートコード内に”compact”と付け加えると、デフォルト設定がどうであれコンパクト表示になります。

スクリーンショット表示

[appbox appstore 718043190 screenshots]

ショートコード内に”screenshots”と付け加えると、デフォルト設定がどうであれスクリーンショット表示になります。”screenshots-only”だと、スクリーンショットのみとなります。

ユニバーサルアプリの場合

iPhone版のスクリーンショットのみを表示

[appbox appstore 718043190-iphone screenshots]

iPhoneとiPad両対応のアプリはユニバーサルアプリ、ユニバーサル対応などと呼ばれますが、通常の[screenshots]指定だと両方のスクリーンショットが表示されてしまいます。どちらか片方だけを表示させたい場合は、アプリIDのすぐ後ろに[-iphone]もしくは[-ipad]と付け加えることで、ユニバーサルアプリでも、iPhoneだけ、あるいはiPadだけのスクリーンショットを表示させることが出来ます。

Apple Watch版のスクリーンショットのみを表示

[appbox appstore 718043190-watch screenshots]

Apple Watch版のスクリーンショットのみを表示させたい場合は、アプリIDのすぐ後ろに[-watch]と付け加えることで、Apple Watch版のスクリーンショットのみを表示させることが出来ます。

旧価格を表示させたい場合

[appbox appstore 585027354 oldprice="¥300"]

※上記の旧価格は表示例です。Google Mapは以前から無料です。

アプリのセール情報などを紹介する時、旧価格を載せたい場合があります。その場合にはショートコード内に[oldprice=”¥300″]というような形式で追記して下さい。これは、旧価格と現在の価格が同一となった場合、旧価格の表示が自動で消えるという仕様になっているためで、フォーマットが統一されていないと同一価格とみなされず自動で消えてくれません。

  • 例:oldprice=”¥2400″で、現在の価格が”¥2,400″だと、カンマがないので同一とみなされません。
  • 例:oldprice=”2,400円”で、現在の価格が”¥2,400″だと、カンマはあっても単位が違うので同一とはみなされません。

まとめ

ちょっと前に有料のアプリ紹介プラグインを買ったばかりでレビュー記事まで書いたのに、無料でこんなにいいプラグインがあったなんて…。ただ、つい先日まで日本のストアに対応していなかったので、いずれにしても使えなかったんですけどね。でもVersion 3.0.5からは問題なく使えるようになったので、アプリ紹介をやってる方は、ぜひ利用してみてください。CSSをいじれば、見た目もかなり自由に変更できますので。

WP-Appbox日本語化ファイル

WP-Appbox日本語化ファイルのダウンロードはこちらから。

WP-Appbox 日本語化ファイル (Version 3.2.17)

ダウンロードした後、解凍して出てきたwp-appbox-ja.moとwp-appbox-ja.poを、plugins > wp-appbox > langディレクトリにアップロードしてお使い下さい。

コンパクト表示とシンプル表示で、下に隙間があく場合

どうやら開発者の方が、自分のブログのCSSが適用された状態のままデザインしたようで、コンパクト表示とシンプル表示の場合のみ、下側に若干隙間があくようです。気になるのでCSSを修正してみました。

とりあえず、これで修正できているようなので、ご紹介しておきます。別に気にならない方はスルーして下さい。

iPhoneでアプリのIDを取得するには?

MacやWindowsでの作業を前提に記事を書いていましたが、iPhoneで記事を書く場合、アプリのIDを取得する方法がわかりにくいので、追記です。

iPhoneからIDを収得
iPhoneからIDを収得

まず目的のアプリ名をSafariなどのブラウザで検索します。検索結果が表示されるので、iTunes App Storeへのリンクを長押しすると、上記のようなメニューが表示されます。そこで[コピー]をタップすれば、アプリのIDが含まれたリンクがコピーされるので、ID部分だけをブログ投稿画面のショートコード内に貼り付ければOKです。

※Googleの検索結果は、常に改善されているので、上記の画面とは異なる場合が有るかもしれませんが、どれがアプリへのリンクかわからない場合は、タップした時App Storeに飛ばされるリンクがそのリンクだと思って下さい。

リンク

WP-Appboxのレビュー
機能性
デザイン
他言語対応
更新頻度
使いやすさ
Summary
無料でここまでできれば文句なしですね!できれば日本のストアも標準でプルダウンメニューから選択できるといいのですが、これは今後のアップデートに期待ですね。個別に入力すれば、問題なく使用は出来ますし。また言語ファイルを用意すれば日本語化も可能ですしね。
89 %
Good
Load More Related Articles
Load More By kenc0224
Load More In プラグイン

20 Comments

  1. […] ※現在、無料で高機能のプラグインがリリースされたため、このプラグインは利用停止しています。そのためサンプルは表示されていません。サンプルは配布先のブログをご覧ください […]

    Reply

  2. […] WordPressでアプリを紹介するなら必須のプラグイン、WP-Appbox! […]

    Reply

  3. […] WP-Appbox:WordPressでアプリを楽々リンクするプラグイン登場! | タノコレWP-Appbox … […]

    Reply

  4. […] WP-Appbox:WordPressでアプリを楽々リンクするプラグイン登場! | タノコレWP-Appbox … […]

    Reply

  5. […] WP-Appbox:WordPressでアプリを楽々リンクするプラグイン登場! | タノコレ WP-Appbox:WordPressでアプリを楽々リンクするプラグイン登場!先日、WordPressでアプリをサクっと紹介できる有料プ […]

    Reply

  6. Ryo-KA

    2015年11月22日 at 15:10

    とても良くまとまっていて、読みやすい記事でした。
    ちょうど、このプラグインの設定に困っていたので助かりました!!
    ありがとうございます。
    これからも、この様な良記事を書き続けて下さい!!
    本当に、ありがとうございました!!

    Reply

    • kenc0224

      2015年11月22日 at 23:59

      ありがとうございます!
      そう言って頂けると、頑張って書いた甲斐がありました。
      これからも頑張りたいと思いますので、よろしくお願いします。

      Reply

  7. […] WP-Appbox 日本語化ファイル […]

    Reply

  8. しゅん

    2016年3月8日 at 02:04

    デザインが気に入った良プラグインなどでとても参考になりました。
    ただ、Playストアの場合、有料アプリでも「free」表記になってしまう点に困っています。応急的な物でも良いのですが何か良い方法はないでしょうか。

    Reply

    • kenc0224

      2016年3月8日 at 11:10

      こんにちは。有料のアプリでもFree表記ですか!
      念のために確認していただきたいのが、プラグインは最新版になっているか、WP-Appbox内の更新ボタン(丸い矢印)を押しても変わらないのか、の二点ぐらいでしょうか。
      一応、このページのPlayストアのサンプルを有料アプリのAtokにしてみましたが、価格表示はされるようです。
      差し支えなければ、どのアプリのIDを使用したか教えていただければ、こちらでも試してみたいと思うのですが。

      Reply

      • しゅん

        2016年3月8日 at 14:15

        お返事ありがとうございます。
        今のところ
        Goat Simulator
        com.coffeestainstudios.goatsimulator

        MineCraft
        com.mojang.minecraftpe
        など、1000円未満のアプリがダメみたいです。
        1000円以上のものは正常に表示できています。

        Reply

        • kenc0224

          2016年3月8日 at 19:08

          確かに、Googleプレイの低価格帯のアプリだとFree表示になってしまいますね。
          いつもApp storeしか使っていないので気がつきませんでした。
          とりあえず、サポートフォーラムで開発者の方に問い合わせしてみました。
          次バージョンで修正されるといいのですが……。
          返事をもらえたらお知らせしたいと思います。

          Reply

  9. […] WP-Appbox:WordPressでアプリを楽々リンクするプラグイン」タノコレ […]

    Reply

  10. こーや

    2016年3月18日 at 15:31

    はじめまして!
    サイトデザインに合ったアプリストアへのリンクがとても簡単に作れるプラグインでとても助かりました!
    Google Playでの価格表記問題はどうやら円表示限定で起こっているみたいですが、その内修正されると良いですね。

    Reply

    • kenc0224

      2016年3月18日 at 23:50

      フォーラムで聞いてみたのですが、Google翻訳任せだったためか、「ちょっと何言ってるかわからないです」と言われてしまいました。。。
      もう一度、今度はドイツ語+画像付きで挑戦してみようと思います。

      Reply

  11. […] タノコレさんサイト サイトにアクセスしたら「CTRL+F」でWP-Appbox 日本語化ファイルと入力 してEnterキーを2回押せば目的のファイルがダウンロード出来ます。 […]

    Reply

  12. […] WP-Appbox:WordPressでアプリを楽々リンクするプラグイン […]

    Reply

  13. 2001Y

    2016年9月9日 at 00:54

    color表示がないきがするのですが、WP-Appbox (Version 3.4.1)です。

    Reply

  14. […] もちろん、アフィリエイトのIDの埋め込みもできます。 WP-Appbox:WordPressでアプリを楽々リンクするプラグイン | タノコレ 投稿者 halka045投稿日: […]

    Reply

  15. […] タノコレさんのブログ ブログにアクセスしたら「CTRL+F」キーを押し、「WP-Appbox 日本語化ファイル」と検索すると、すぐに目的の日本語化ファイルが見つかります。 […]

    Reply

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Check Also

CloudMounter:クラウドストレージを外付けディスクのように扱えるMacアプリ

クラウドストレージを外付けディスクのように扱うことができるMacアプリ、「CloudMounter」が3,600円→240円のセール中となっています! クラウドストーリッジをネット…