text2applink のフォーマットをカスタマイズする方法

2013-07-31-001

昨日の記事で、テキストエディタだけでアプリのリンクタグを取得する JavaScript を紹介しました。意外にも多くの方が興味を持ってくださって、うれしい限りです。出力するフォーマットをカスタマイズする方法について問い合わせがあったので、今日はその方法をもうちょっと詳しく書いてみます。

目次

  1. text2applink のフォーマット
  2. カスタマイズ用は2番目の format
  3. フォーマットの中身
  4. コードを修正
  5. ダウンロードボタンを付ける
  6. CSS の設定
  7. もちろん自分でクラスやスタイルを定義することも可能
  8. 予約語一覧
  9. 最後に

text2applink のフォーマット

text2applink というのは、ただの JavaScript のコードなのに自分で勝手に付けた名前です(笑)。概要は次の記事をご覧ください。

text2applink では、出力するフォーマットを format という変数にセットして使っています。コードの後半部分に出てきます。

var format='・・・省略・・・';

/* スタイルをHTMLに記述せず・・・省略・・・ */

//format='・・・省略・・・';

カスタマイズ用は2番目の format

カスタマイズする際は、1番目の var format の方は気にせず、2番目の //format の方を弄ってください。ここは // でコメントアウトしてあるので、まずは // を削除して有効化します。

/* スタイルをHTMLに記述せず・・・省略・・・ */

format='・・・省略・・・';

フォーマットの中身

// を削除したら、あとは format='・・・'; のうち、・・・ の部分を編集します。ここには次のコードが入っています。

<div class="app-link"><img src="'+icon150+'" alt="'+name+'"><ul><li><span>'+name+'</span></li><li>カテゴリ: '+genres+'</li><li>価格: '+price+'(記事掲載時)</li><li>開発元: '+developer+'</li></ul><a href="'+linkshareurl+'" target="_blank" rel="nofollow">App Store</a></div>

これでは見にくいので、改行とインデントを入れてみます。

<div class="app-link">
  <img src="'+icon150+'" alt="'+name+'">
  <ul>
    <li><span>'+name+'</span></li>
    <li>カテゴリ: '+genres+'</li>
    <li>価格: '+price+'(記事掲載時)</li>
    <li>開発元: '+developer+'</li>
  </ul>
  <a href="'+linkshareurl+'" target="_blank" rel="nofollow">App Store</a>
</div>

構造としては、アプリのアイコン画像を表示(<img> タグ)、続いて箇条書きを入れ(<ul></ul> タグ)、箇条書きの項目としてアプリの名前、カテゴリ、価格、開発元を記述(<li></li> タグ)しています。アプリの名前は、CSS を適用しやすいように <span></span> タグで囲っています。最後に App Store へのリンク(<a></a> タグ)を書いています。

コードを修正

それでは、実際にコードを修正していきます。今回は凛さん (@rin_wan) のブログにモデルになっていただきました。

凛さんのところでは「アプリの名前」「価格」「カテゴリ」の順番で表示されているので、次のコードのように、「カテゴリ」の文字が含まれている行と「価格」の文字が含まれている行を入れ替えます。「価格」の後に書いてある「(記事掲載時)」という文字も削除。また、「開発元」の文字が含まれている行も削除します。

<div class="app-link">
  <img src="'+icon150+'" alt="'+name+'">
  <ul>
    <li><span>'+name+'</span></li>
    <li>価格: '+price+'</li>
    <li>カテゴリ: '+genres+'</li>
  </ul>
  <a href="'+linkshareurl+'" target="_blank" rel="nofollow">App Store</a>
</div>

ダウンロードボタンを付ける

これで終わってしまうと「わんこのダウンロードボタンをどうしてくれるのよ!」と怒られてしまうので、ボタンも付けます。

<a href="'+linkshareurl+'" target="_blank" rel="nofollow">App Store</a>

ここがリンクを記述しているコードなので、App Store の文字を、ボタン画像の <img> タグに置き換えます。

<a href="'+linkshareurl+'" target="_blank" rel="nofollow"><img src="http://xxx.com/xxx/xxx.jpg" width="300" height="75"></a>

そして、このコードを <div></div> タグで囲みます。<div> タグ に付けるクラス名は、凛さんのソースコードをそのまま借用して appDownloadButton としました。

<div class="appDownloadButton"><a href="'+linkshareurl+'" target="_blank" rel="nofollow"><img src="http://xxx.com/xxx/xxx.jpg" width="300" height="75"></a></div>

できあがったコードがこちらです。

<div class="app-link">
  <img src="'+icon150+'" alt="'+name+'">
  <ul>
    <li><span>'+name+'</span></li>
    <li>価格: '+price+'</li>
    <li>カテゴリ: '+genres+'</li>
  </ul>
  <div class="appDownloadButton"><a href="'+linkshareurl+'" target="_blank" rel="nofollow"><img src="http://xxx.com/xxx/xxx.jpg" width="300" height="75"></a></div>
</div>

改行とインデントを削除して1行のコードに戻した上で、format='・・・';・・・ の部分に挿入します。つまり、'' の間に入れます。

CSS の設定

フォーマットの修正が終わったら、CSS の編集です。サンプルの CSS コードがあるので、スタイルシートに追記してください。

.app-link {
  border: 1px dashed #ccc;
  margin: 10px;
  overflow: hidden;
  padding: 15px;
}

.app-link img {
  border-radius: 13px;
  float: left;
  height: 75px;
  margin-bottom: 5px;
  margin-right: 15px;
  width: 75px;
}

.app-link ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-link span {
  color: #37709c;
  font-size: larger;
  font-weight: bold;
}

.app-link a {
  font-size: larger;
  font-weight: bold;
}

とりあえずはこれだけでもそれらしくなるのですが、ダウンロードボタンの画像を付けている場合は次のコードのせいでボタンが残念なことになってしまいます。

.app-link img {
  border-radius: 13px;
  float: left;
  height: 75px;
  margin-bottom: 5px;
  margin-right: 15px;
  width: 75px;
}

これはアプリのアイコンを角丸にしたり、表示サイズを指定したりするための記述なのですが、このコードがダウンロードボタンの画像にも適用されてしまうのです。それを回避するために、1行目を次のようにします。

.app-link > img {

> を間に入れることで、app-link クラスが割り当てられている要素(今回のケースでは1番外側の <div class="app-link">)を直接親に持つ <img> 要素(アプリアイコン)だけにスタイルが適用されるようになります。ボタン画像は <div class="app-link"> との間に <div class="appDownloadButton"> タグやら <a> タグやらが入っているので、アプリアイコン用のスタイルは適用されません。

<div class="app-link">
  <img src="'+icon150+'" alt="'+name+'"><!-- アプリアイコン。スタイルが適用される。 -->
  ・・・省略・・・
  <div class="appDownloadButton"><a href="'+linkshareurl+'" target="_blank" rel="nofollow"><img src="http://xxx.com/xxx/xxx.jpg" width="300" height="75"></a></div><!-- ダウンロードボタン。アイコン用のスタイルは適用されない。 -->
</div>

また、もしダウンロードボタンが枠線からはみ出してしまうようなケースでは、スタイルシートに次のコードを追記するときちんと収まるようになります。

.appDownloadButton img {
  max-width: 100%;
  height: auto;
}

アプリの名前の表示スタイルを変えたい時は、次のコードを編集します。

.app-link span {
  color: #37709c;
  font-size: larger;
  font-weight: bold;
}

2行目は文字の色です。文字の大きさや太さは普通でいい、ということであれば、3–4行目を削除してください。

これで完成。手元の環境ではこんな風に再現できました。

これ以外では、たとえばアイコンの表示サイズを 100 x 100 px にしたい場合は、先ほどの .app-link > img に対するスタイルを次のようにします。

.app-link > img {
  border-radius: 20px;
  float: left;
  height: 100px;
  margin-bottom: 5px;
  margin-right: 15px;
  width: 100px;
}

もちろん自分でクラスやスタイルを定義することも可能

サンプルの CSS を使わなくても、出力されるフォーマットに好きなクラスを充てて、自分で CSS を書いていくことももちろんできます。まず、おおもとのフォーマットを再掲します。

<div class="app-link">
  <img src="'+icon150+'" alt="'+name+'">
  <ul>
    <li><span>'+name+'</span></li>
    <li>カテゴリ: '+genres+'</li>
    <li>価格: '+price+'(記事掲載時)</li>
    <li>開発元: '+developer+'</li>
  </ul>
  <a href="'+linkshareurl+'" target="_blank" rel="nofollow">App Store</a>
</div>

たとえば各要素にこんな風にクラスを割り当てることで、CSS でより詳細な見た目の制御ができるようになると思います。

<div class="app-link">
  <img src="'+icon150+'" alt="'+name+'" class="app-icon">
  <ul>
    <li class="app-name">'+name+'</li>
    <li class="app-category">カテゴリ: '+genres+'</li>
    <li class="app-price">価格: '+price+'(記事掲載時)</li>
    <li class="app-developer">開発元: '+developer+'</li>
  </ul>
  <a class="button" href="'+linkshareurl+'" target="_blank" rel="nofollow">App Store</a>
</div>

改行タグの <br> を連続して使用するのは望ましくないという記事を以前目にしたことがあるため、リスト形式で出力するようにしてありますが、<span></span> タグで区切ることもできます。

<div class="app-link">
  <img src="'+icon150+'" alt="'+name+'" class="app-icon">
  <span class="app-name">'+name+'</span><br />
  <span class="app-category">カテゴリ: '+genres+'</span><br />
  <span class="app-price">価格: '+price+'(記事掲載時)</span><br />
  <span class="app-developer">開発元: '+developer+'</span><br />
  <a class="button" href="'+linkshareurl+'" target="_blank" rel="nofollow">App Store</a>
</div>

カスタマイズする際の注意点としては、'+name+' とか '+genres+' というのが JavaScript で取得した情報を変数から呼び出しているところなので、シングルクォーテーション(')と半角のプラス記号(+)で前後を囲むということです。

次のような書き方だといずれもエラーになります。

<li>+name+</li>

<li>'name'</li>

このように書いていただければ大丈夫です。

<li>'+name+'</li>

予約語一覧

今のところ、予約語として変数にセットしているアプリの情報は以下のようになっています。あまり多くの情報は取得していないので、たとえばアプリのバージョンやファイルサイズを出力することはできません。この辺はもしご希望がありましたらご連絡ください。

予約語一覧
変数記述方法情報
icon60‘+icon60+’57 x 57 px のアイコン画像の URL
icon150‘+icon150+’150 x 150 px のアイコン画像の URL
developer‘+developer+’開発者
genres‘+genres+’カテゴリー
name‘+name+’名前
price‘+price+’価格
linkshareurl‘+linkshareurl+’App Store へのリンク URL

最後に

前回の記事で不十分だったと思われるところをなるべく分かりやすく書いてきたつもりですが、これでもまだ分かりにくい、といったこともあるかもしれません。質問、要望などありましたら、私にできる範囲で対応させていただきたいと思いますので、@shirose_jp までご連絡ください。

2 thoughts on “text2applink のフォーマットをカスタマイズする方法

  1. Pingback: [U・ω・U]モブログしながらアプリ紹介リンクを挿入するのがさらに便利になった! | りんろぐ。

  2. Pingback: text2applinkの導入&ダウンロードボタン設置!!後もう一息! | 工学博士のLifelog Diary

コメントを残す

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