Tips のぎのき（noginoki）

iTunes StoreやApp Storeのリンクを簡単に作成する方法

iOS向けの音楽やアプリは、iTunes Store、App Storeと言ったそれぞれのストアからダウンロードします。iPhoneやiPadから、直接iTunes StoreやApp Storeを開いてダウンロードして楽しむ分には、コンテンツのリンクを意識する必要はありません。

しかし、自身が運営するブログ上で音楽やアプリのレビュー記事を書こうとした時に、iTunes StoreやApp Storeのコンテンツリンクも同時に貼りたいと思った事は無いでしょうか。

今回お届けするのは、iTunes StoreやApp Storeコンテンツのリンクを作成する方法についてです。

iTunes StoreやApp Storeのリンク作成方法

iTunes StoreやApp Storeのリンクを作成する方法は2つあります。

一つはiOSをご利用の方ならおなじみのソフトウェアである「iTunes」を使う方法、もう一つはAppleが公式に提供しているWebサイト「iTunes Link Maker」を使う方法です。

ブログを執筆する環境によって使い分けする事が出来ますので、二つの方法をお伝えします。

「iTunes」を使う方法

PCにインストールして使うiTunesは、iPhone等の端末のバックアップを取得する機能のほか、音楽再生ソフトとして、音楽やアプリを購入するストアとして、様々な用途で使います。

昨今では、PCよりもスマホの普及率が上回っているので、PCは所有していない方もいらっしゃるかも知れません。その方は次の「iTunes Link Maker」を使う方法を参照下さい。

  1. PCにインストールしているiTunesを起動します。
  2. iTunesの上側の真ん中あたり（リンゴマークの下あたり）に、ストアへの入り口があります。
    ※今まで特にiTunes上でApp Storeなどを開いた状態にしていない限り、ミュージックが最初に表示されます。
  3. iTunesの左上のプルダウンで、ミュージック、App等を切替する事が出来ます。
  4. 試しにアプリのリンクを取得したいと思います。
    左のプルダウンで「App」を選択すると、App Storeに遷移しますので、リンクを取得したいアプリ上で右クリックをします。
  5. すると、「リンクをコピー」が表示されます。
  6. メモ帳などに貼付けすると、以下のようなURLがクリップボードにコピーされています。
    サンプルで、たまたまトップに表示されていた「けものフレンズあらーむ」のリンクをコピーしてみました。
    https://itunes.apple.com/jp/app/%E3%81%91%E3%82%82%E3%81%AE%E3%83%95%E3%83%AC%E3%83%B3%E3%82%BA%E3%81%82%E3%82%89%E3%83%BC%E3%82%80/id1268624173?mt=8
  7. これで完了です。

非常にシンプルかつ、簡単ですね。

「iTunes Link Maker」を使う方法

もう一つのリンクの作成方法は、Appleが公式に提供しているWebサイトを使用する方法です。

PCが手元に無い環境や、スマートフォンやタブレット上でブログを作成している人にはこの「iTunes Link Maker」がオススメです。

iTunesを使う方法でサンプルで取り上げた「けものフレンズあらーむ」のリンクを作成してみようと思います。

  1. 「iTunes Link Maker」にアクセスします。
  2. 上記リンクは、言語を日本語に設定していますので、ある程度日本語で表示されるのですが、1点注意が必要なところがあります。
    初期表示のストアが『米国』になっているのです。

  3. そのままでは、日本向けのリンクは作れませんので、ストア国を『日本』に変更する必要があります。
    「米国」をクリックすると、検索枠が表示されますので、『日本』と入力すると、予測変換で絞込されます。
  4. ストア国を「日本」に切り替えたら、次にその右にあるMedia Typeで、どのコンテンツのリンクを作成するのかを選択します。
  5. 今回はAppのリンクを作成しますので、Media TypeをAppにし、検索枠にアプリの名前を入力します。
    検索結果は、iPhone／iPad用それぞれ別に表示されます。
  6. アプリの画像をタップ／クリックすると、リンク作成画面に遷移します。
    ここでは、バッジ、テキストリンク、スモール・バッジの3通りのリンクが作成出来ます。
  7. 作りたいリンク形式を選択したら、あとは埋め込みコードに表示されたソースをブログに埋め込み記載するだけです。
    ※ただしWordPressの場合、単純コピーしただけでは、ソースコードが消えてしまい、バッジおよびスモール・バッジを上手く表示する事が出来ません。
  8. これで完了です。

画面下の直リンクは、iTunesからコピーしたURLと全く同じものが表示されていますので、PCを持っておらず、単純にURLだけ取得したい人はここからコピーすればOKです。

App StoreのバッジをWordPressに表示する方法

当ブログは、WordPressで出来ていますので、「iTunes Link Maker」を使う方法の手順7に記載したとおり、単純コピーしただけではソースコードが消えてしまい、バッジが上手く表示できませんでした。

悪戦苦闘した結果、なんとか安定して表示できる状態にする事が出来ましたので、方法をまとめておきます。

ソースコードが消えてしまう事象とは

「iTunes Link Maker」からコピーしたバッジの埋め込みコードは下記の通りです。

  1. 上記コードを、WordPressの投稿画面の「テキスト」に貼付けします。
  2. その後、「テキスト」→「ビジュアル」に切り替えてみると・・・何も表示されなくなります。
  3. 何故？と思い、再び「ビジュアル」→「テキスト」に切り替えても、ソースコードは消えたままです。

このソースコードが消えてしまう事象は、「iTunes Link Maker」に限った話ではなく、他にも発生しているようで、WordPressが独自に記述コードを整理しているのが理由のようです。

ソースコードが消えないように加工する

つまり、「iTunes Link Maker」が提供しているコード記述だと、WordPressに整理されてしまうのはわかりましたので、整理されない記述に書き換えてしまえば解決するのではないか？という事です。

そこで、WordPressのエディタ画面で使うことの出来るhtmlタグで記述しなおした結果、念願のバッジを表示出来ましたので、やり方をご説明します。

  1. まず、埋め込みコードを必要な部分に分解します。
  2. 黄色のマーカーで塗っている部分は、アプリのリンクで、その次の黄色の下線部分が、App Storeのバッジ画像のリンクになっている事が確認できます。
    そこで得られた情報を元に、imgタグでApp Storeのバッジ画像を呼び出しし、その画像に対して、リンクを設定するという記述に書き換えます。
  3. 実際に書き換えた結果は下記の通りになります。
  4. 上記コードを試しにコピペしてみて下さい。
    下記の通りバッジが表示されればOKです。
    App Storeからダウンロード

あとは、ソースコードの書き換えをするだけで、他のアプリやiTunes Storeの音楽コンテンツなどにも応用出来ます。

「iTunes Link Maker」で作成したコードを、上記手順でアプリのリンクとバッジ画像のリンクに分解し、それぞれ下記のコードに置き換えれば完了です。

試し頂ければと思います。

まとめ

二つのリンク作成方法はどちらも非常に簡単ですので、すぐにでも、お手持ちの音楽やアプリのレビュー記事にリンクを付ける事が可能になります。

ただ、WordPressを利用されている方は、埋め込みコードに手を加えるなど一工夫必要になります。慣れてしまえばそこまで苦では無いかと思いますが、私自身が頻繁にApp Storeのコードを作成する訳ではありませんので、次に作業する際の備忘録としてまとめました。

同様の事象で困っている方の参考になれば幸いです。

今回も最後までお読みいただき有難うございました。

もし宜しければ、Twitterのフォロー／facebookページのいいねを宜しくお願い致します。

RECOMMENDこちらの記事も人気です。

ABOUTこの記事をかいた人

当ブログでは、私自身が困って調べたこと、試した事を中心に記事を書いています。何か少しでもお役に立てれば幸いです。 最近では、企業様からのレビュー記事のご依頼を頂くことも出てきました。 お気軽にお問合わせよりご連絡下さい。

NEW POSTこのライターの最新記事