「WP-Appbox」iPhoneやAndroidアプリの紹介に便利なWordPressプラグイン

前回、アプリーチを使用してiPhoneやAndroidアプリをブログで格好よく紹介する方法を紹介した。

今回はWordPressプラグインの「WP-Appbox」を使用してiPhoneやAndroidアプリをブログで紹介する方法を紹介する。

WP-Appboxとは

概要

WP-Appboxは、投稿記事にショートコードを追加するだけで、以下のようにきれいに成型されたモバイルアプリ（iPhoneア,Android）の紹介リンクを表示することが出来るワードプレスプラグインだ。

iTunesアフィリエイト(PHG)にも対応しており、iPhoneアプリの紹介リンクをアフィリエイトリンクに変換し収益化を図ることも可能だ。

WP-AppboxプラグインでiPhoneアプリやAndroidアプリの紹介を行えば、クールな見た目でアプリを紹介することが出来る。

このプラグインの最大の特徴は、iPhoneアプリとAndroidアプリだけでなく、それ以外にもWordPressプラグインやFirefoxアドオン、Chrome ウェブストア等全１２種類のアプリストアに対応している点だ。

対応しているアプリストは以下の通り。

• Amazon App Shop (Android)
• App Store (iPhone, iPad, Apple Watch, Apple TV and app bundles) and Mac App Store
• Chrome Web Store
• Firefox Add-ons
• Firefox Marketplace
• GOG.com (Good Old Games)
• Google Play Store
• Opera Add-ons
• Steam (only single games)
• Windows Store (Universal and Xbox Live)
• WordPress-Plugins
• XDA Labs (Android)

以下のようにワードプレスプラグインを紹介する際にも利用できる優れものだ。

モバイルアプリだけでなく、WordPressプラグインやWebブラウザのアドオン等をブログで紹介している人にとっても、うってつけのプラグインとなっている。

特徴・その他機能まとめ

• ショートコードを追加するだけで簡単にモバイルアプリの紹介リンクを生成
• ４種類の表示方法
• 12種類のアプリストアに対応
• マウスオーバーでQRコードの表示が可能
• 小型モバイル機器での表示に対応
• フィード出力への適合
• データをキャッシュし高速表示
• App StoreでのPHGアフィリエイトに対応
• HTMLとCSSで表示のカスタマイズが可能

インストール方法

WordPressにログインし、管理画面左メニューの「プラグイン」から「新規追加」をクリックする。

「プラグインを追加」画面が表示されるので、キーワード欄に「WP-Appbox」と入力する。

画面に「WP-Appbox」プラグインが表示されるので、「今すぐインストール」をクリックする。

インストールが完了すると「有効化」ボタンが表示されるので、ボタンをクリックする。

プラグイン一覧画面が表示され「プラグインを有効化しました。」と表示されればインストール作業は全て完了だ。

設定方法

WP-Appboxの設定を行うには、WordPress管理画面左メニューの「設定」から「WP-Appbox」をクリックする。

以下の画面が表示され、上部のタブから各種設定メニューにアクセスすることが出来る。

Outputタブ

Outputタブではリンクパーツの表示スタイルに関する設定を行う。

Standard App-Badge

紹介リンクのデフォルトの表示形式を指定する。

以下の４種類から選択することができる。

• Simple Badge（シンプルに表示）
• Screenshots（スクリーンショット付きで表示）
• Screenshots Only（スクリーンショットのみ表示）
• Compact Badge（Simple Badgeよりさらにシンプル・コンパクトに表示）

すぐ下に掲載イメージが表示されるので、好みの表示形式を選択しよう。デフォルトはSimple Badgeに設定されている。

Colored store icons

Colored store iconsは、ストアのアイコン表示色を設定する。

Colored store iconsにチェックを入れるとストアアイコンがカラー表示されるようになる。

デフォルトはチェックなしで、その場合ストアアイコンはグレイ色で表示される。

個人的にはチェックを入れてカラー表示にするのが見た目的におすすめだ。

App-Ratings

App-Ratingsは、アプリのレーティング表示に関する設定を行う。

以下の３種類から選択可能だ。

• Monochrome Stars（グレー色の☆で表示）
• Colorful Stars（黄色の☆で表示）
• Hide app-ratings（評価表示なし）

こちらも、すぐ下に掲載イメージが表示されるので、好みの物を選択しよう。デフォルトはMonochrome Starsに設定されている。

個人的には黄色い☆で表示したほうが華やかなので「Colorful Stars」に設定することをお勧めしたい。

Downloadbutton caption

Downloadbutton captionには、ダウンロードボタンのキャプション（表示文字）を設定する。

デフォルトは「Download」に設定されている。

日本語を設定することも可能だが、文字が長いと全ての文字が表示されない。

Nofollow

リンクにnofollow属性を付加する場合は「Nofollow」にチェックを付けておく。

ここは、デフォルト設定のまま（チェックを付けた状態）をお勧めする。

Open links in a new window

チェックを付けるとリンクをクリックした時に新規ウィンドウでリンク先が表示される。

ここも、デフォルト設定のまま（チェックを付けた状態）をお勧めする。

Cacheタブ

Cacheタブでは、キャッシュ関連の設定が行える。

ここは、基本的に変更する必要はなく、デフォルトのままでＯＫだ。

affiliate IDsタブ

affiliate IDsタブでは、アフィリエイトに関する設定を行う。

各種アフィリエイトを行う場合は、必ずアフィリエイトトークンの設定しておこう。

設定を行わない場合は、開発者のIDが自動で設定されるようだ。

(Mac) App Store & App Store: PHG

(Mac) App Store & App Store: PHGには、iTunesアフィリエイト（PHG）のアフィリエイト・トークンを設定する。

iTunesアフィリエイト(PHG)については以下を参照してほしい。

Amazon Apps: Amazon Associates Program

Amazonアプリ（Android）のアフィリエイトを行う場合に、AmazonアソシエイトIDを設定する。

Windows Store: Microsoft Private Affiliate Program at TradeDoubler

Windows Storeのアフィリエイト設定を行う。

TradeDoublerという海外ASPで、Microsoft Private Affiliateプログラムというのがあるらしい。

私は使ったことがないので詳しいことはわからない。

Custom affiliate IDs

チェックを入れると、ユーザーや投稿者毎に異なるIDが利用できる模様。

１人で利用する一般的なブログの場合、チェックなしのままで問題ない。

Editor-Buttonsタブ

Editor-Buttonsタブでは、記事投稿画面エディタ上部に追加される「ショートコード追加用ボタン」の表示に関する設定を行う。

以下の４つから好みの物を選択することが出来る。

• Show all App Store buttons in the editor
  （すべてのボタンをエディタ上部に表示）
• Show all App Store buttons in the editor within the AppBox-Button
  （AppBoxボタンの中にすべてのボタンを表示）
• Show no buttons in the editor
  （エディタ上部にボタンを表示しない）
• Custom settings（カスタム設定）

Show all App Store buttons in the editor

Show all App Store buttons in the editorを選択すると、以下のようにすべてのStoreボタン（ショートコード追加ボタン）が記事投稿画面のエディタ上部に表示される。

Show all App Store buttons in the editor within the AppBox-Button

Show all App Store buttons in the editor within the AppBox-Buttonを選択すると、以下のように１つのAppBoxボタンが表示される。

AppBoxボタンをクリックすると、プルダウンメニューが展開し、各Storeボタンを選択することができる。

Show no buttons in the editor

Show no buttons in the editorを選択すると、記事投稿画面エディタ上部にStoreボタンは表示されなくなる。

Custom settings

Custom settingsを選択すると、各Storeボタン毎にどこに表示するか詳細に設定することが出来る。

個人的にはここで利用するボタンのみ表示させる設定を行うことをお勧めしたい。

設定を行う場合は、一番右にある「Hide button」のAllをクリックし、すべてのボタンをHideに設定してから、利用するボタンに対する設定を行えば楽に設定できる。

私の場合、よく利用するであろう(Mac) App Store、Google Play Apps、WordPress Pluginsの「Appbox-Button」のみにチェックを入れ、その他はすべてHideにしたので、投稿画面の表示は、以下のようになった。

１つのボタン内に３つのStoreボタンを集約でき、非常にすっきりできた。

Store-URLsタブ

Store-URLsでは、各ストアのクエリーURLの設定を行う。

このクエリーＵＲＬは各国ごとに使用するURLが異なるため適切に設定を行う必要がある。

設定を行わないと、ドイツのクエリーURLが使用されてしまうので要注意。

「Amazon Apps」と「(Mac) App Store」に関しては、セレクトボックスの中に「Japan」という選択肢があるのでそれを選択すればよい。

それ以外については、「Use own URL」を選択し、右横に適切なURLを入力しよう。

全て設定すると以下のようになる。

Advancedタブ

Advancedタブではより高度な設定を行えるが、基本的にデフォルト設定のままで問題ない。

使い方（ショートコードの記述方法）

WP-Appboxプラグインの設定が終わったら、アプリの紹介リンクの作成方法を覚えよう。

WP-Appboxでは、ブログで記事を投稿する際にショートコードを記述するだけで、紹介リンクの作成ができるようになっている。

ショートコードを作成するには以下の手順を実行しよう。

１．アプリのIDを取得する。

２．ストアアイコンからショートコードの雛形を作成

３．作成したショートコードの雛形にアプリのIDを付け加える

１．アプリのIDを取得する

ショートコードを作成するには、紹介したいアプリのIDが必要になる。

ここでは、iPhoneアプリとAndroidアプリのアプリIDの確認の手順を紹介する。

例としてTwitterアプリのアプリIDを確認してみよう。

App Store(iPhoneアプリ)の場合

iPhoneアプリのアプリIDを取得するにはリンクメーカーを使うのが手っ取り早い。

リンクメーカーにアクセスし以下の手順を実行する。

1. ストア国に日本を選択
2. メディアタイプにAppを選択
3. 検索ボックスにアプリ名を入力しエンターキーを押す
4. 検索結果の中から目的のアプリをクリックする

以下のようにアプリの詳細画面が表示されるので、ページ下部にある直リンクのURLに注目しよう。

Twitterアプリの場合だと以下のようになっており、リンク中のidで始まる数字の箇所があるはずだ。そのidの文字を省いた数字がアプリIDとなる。

https://itunes.apple.com/jp/app/twitter/id333903271?mt=8

つまり、Twitterアプリの場合だと「333903271」がアプリIDということになる。

Google Play Appsの場合

Google Play StoreにあるAndroidアプリのアプリIDを取得するには、Google Play Storeでアプリ検索をまず行おう。

https://play.google.com/store/apps

上記のURLにアクセスし、検索ボックスにTwitterと入力して検索を実行。

検索結果の中から目的のアプリをクリックする。

アプリの詳細画面が表示されたら、URLの部分を確認しよう。

Google Play StoreのTwitterアプリ（Android）の場合、以下のURLとなっており、URL中のid=で指定されているのがアプリIDだ。

https://play.google.com/store/apps/details?id=com.twitter.android

この場合、「com.twitter.android」がアプリIDとなる。

他のStoreのIDの確認方法

AppStore、Google Play Store以外のの各StoreのアプリIDについてはここでは解説しないが、WP-Appboxプラグインの「Help」内「Get the ID of an app」にアプリIDの確認方法が掲載されているので、そちらを参照してほしい。

２．ストアアイコンからショートコードの雛形を作成

記事投稿画面のエディタ上部に表示されている、目的のStoreアイコンもしくは、Appbox-Buttonをクリックして表示されるプルダウンメニューから目的のStoreをクリックする。

ここでは、iPhoneアプリを紹介する場合の例を見てみよう。

iPhoneアプリの紹介なので(Mac)App Storeを選択する。

すると以下のような文字がエディタ内に入力される。

この、[appbox appstore]というのが、App Storeのショートコードの雛形だ。

３．作成したショートコードの雛形にアプリのIDを付け加える。

2.でApp Storeのショートコードの雛形を作成したが、せっかくなのでGoogle Play Storeのショートコードの雛形も以下の通り追加した。

このショートコードの雛形に、1.で確認したアプリIDを下記の通り追加すれば、ショートコードの完成だ。

App Store Twitterアプリのショートコード

[appbox appstore 333903271]

GooglePlay Store Twitterアプリのショートコード

[appbox googleplay com.twitter.android]

ショートコードが完成したら、「プレビュー」ボタンをクリックして確認してみよう。

問題がなければ、以下のように表示されるはずだ。

ショートコードのバリエーション

ショートコードの基本的な記述方法は以下の通り。是非とも覚えておこう。

先ほど作成したショートコードの中に、表示フォーマットを指定するこで、表示スタイルを変更することが可能だ。

表示フォーマットには以下の4種類が指定できる。

• シンプル
• コンパクト
• スクリーンショット
• スクリーンショットオンリー

表示フォーマットを指定しない場合は、Output設定で指定したデフォルトの表示方法が使用される。

各表示フォーマットの記述例と表示例は以下を参照してほしい。全て覚えて状況に応じて使い分けられるようにしておこう。

シンプル

ショートコードの記述例

[appbox appstore 333903271 simple]

表示サンプル

コンパクト

ショートコードの記述例

[appbox appstore 333903271 compact]

表示サンプル

スクリーンショット

ショートコードの記述例

[appbox appstore 333903271 screenshots]

表示サンプル

スクリーンショットオンリー

ショートコードの記述例

[appbox appstore 333903271 screenshots-only]

表示サンプル

最後に

今回は、WordPressプラグインのWP-Appboxを使用してモバイルアプリの紹介リンクを掲載する方法を解説した。

最初のURL設定等がちょっと面倒だが、一度設定を行えば後はショートコードを記述するだけで手軽に効果的な紹介リンクを作成することができる。

先日紹介したアプリーチも便利だが、WP-Appboxはモバイルアプリだけでなく様々なストアに対応しているので、活用の幅が広がるはずだ。

アプリーチ共に有効に活用してほしい。