テキストエディタだけでアプリのリンクタグを取得できる JavaScript を書いたよ

2013-07-29-001

いつもブログで iPhone などのアプリを紹介する時は MyScripts スクリプトの AllAppStoreHtml を使ってきました。同じようなことをテキストエディタの中で直接実行したいと前々から思っていたので、このたび JavaScript で作ってみました。MyScripts を持っていない人でも、HTML プレビュー機能のあるエディタアプリがあれば実行できるのが特徴です。

2013-08-09 追記: 最新版のコードを公開しました。(追加記事: text2applink ver.1.2—URL スキームによる出力に対応

目次

  1. text2applink でできること
  2. 必要な物
  3. コード
  4. 設定項目
  5. CSS について
  6. 最後に

text2applink でできること

いっちょまえに名前を付けてしまいましたが、実体は JavaScript のコードを記述したただのテキストです(コードは下の方で紹介します)。

このコードをテキストエディタ(写真は Drafts です)に張り付け、プレビュー機能を実行します。

アプリ名の入力を受け付けるダイアログが表示されます。検索したいアプリの名前を入力し、「OK」をタップします。

すると、検索結果がプレビュー表示されます。初期設定では iPhone アプリ、iPad アプリ、Mac アプリをそれぞれ3つずつ検索します。紹介したいアプリが見つかったら、「リンクを取得」ボタンをタップします。

リンクタグがポップアップされるので、「全選択」→「コピー」します。コピーしたら「OK」をタップし、プレビュー画面も終了させます。

コピーした文字列をペーストすると、選んだアプリのリンクタグが挿入されます。

ブログ上ではこのように表示されます。アイコンは 150 x 150 px のサイズで取得して 75 x 75 px に縮小表示させているので、Retina ディスプレイでもきれいに表示されます。

動作の様子をまとめた動画はこちらです。

必要な物

text2applink を実行するためには、HTML タグや Markdown 記法を使って記述したテキストファイルを、HTML 形式でプレビュー表示する機能が付いたアプリがあれば十分です。

私の環境では Drafts のほかに、BywordDraftPad で動作確認ができました。DraftPad の場合は「HTML Preview」アシストで実行できます。また、Mac アプリの Byword でもきちんと動作してくれました。

コード

テキストエディタアプリに張り付けるコードは以下の通りです。全文まるまるコピペして使ってください。JavaScript のコードを <script></script> タグで囲っているので、HTML プレビューした際に実際にスクリプトが実行される仕組みです。

<script>

/* text2applink */

/* リンクシェアのIDを''の中に入力してください。利用していない人はそのままで結構です。 */
var linkshareid='';

/* 検索結果の表示件数です。初期設定ではiPhone、iPad、Macの各アプリを3つずつ検索します。 */
var limit=3;

/* これ以降は基本的に修正する必要はありません。スタイルをCSSで制御する場合は後半部分にあるコメントをお読みください。 */
var term=prompt('アプリ名を入力してください。');

var entities=new Array('software','iPadSoftware','macSoftware');
for(var i=0;i<3;i++)
{
var entity=entities[i];
appsearch(entity);
}

function appsearch(arg)
{
var searchurl='http://itunes.apple.com/search?term='+term+'&country=jp&entity='+arg+'&limit='+limit;

var xmlhttp=new XMLHttpRequest();
xmlhttp.open('get',searchurl,false);
xmlhttp.send();
var response=xmlhttp.responseText;
var results=JSON.parse(response).results;

var type;
if(entity=='software')
{
type='iPhone';
}
else if(entity=='iPadSoftware')
{
type='iPad';
}
else 
{
type='Mac';
}
var title='<div style="background:#37709c;color:#fff;margin-bottom:5px;text-align:center">'+type+'</div>';
document.write(title);

for(var i=0;i<results.length;i++)
{
var app=results[i];
var icon60=app.artworkUrl60;
var icon150=app.artworkUrl512.replace(/512x512-75.\w*$|\w*$/, '150x150-75.png');
var developer=app.artistName;
var genres=app.genres.join(', ');
var name=app.trackName;
var price=app.formattedPrice;
var storeurl=app.trackViewUrl;

var universal='';
if(entity!='macSoftware')
{
var features=app.features;
var check=features.indexOf('iosUniversal');
if(check!=-1)
{
universal='iOS Universal';
}
}

var linkshareurl=storeurl;
if(linkshareid.length==11)
{
linkshareurl='http://click.linksynergy.com/fs-bin/stat?id='+linkshareid+'&offerid=94348&type=3&subid=0&tmpid=2192&RD_PARM1='+storeurl+'&partnerId=30';
}

var format='<div style="border:1px dashed #ccc;margin:10px;overflow:hidden;padding:15px"><img src="'+icon150+'" alt="'+name+'" style="border-radius:13px;float:left;height:75px;margin-bottom:5px;margin-right:15px;width:75px"><ul style="list-style:none;margin:0;padding:0"><li><span style="color:#37709c;font-size:larger;font-weight:bold">'+name+'</span></li><li>カテゴリ: '+genres+'</li><li>価格: '+price+'(記事掲載時)</li><li>開発元: '+developer+'</li></ul><a href="'+linkshareurl+'" target="_blank" rel="nofollow" style="font-size:larger;font-weight:bold">App Store</a></div>';

/* スタイルをHTMLに記述せず、CSSで制御する場合は次のコードの先頭、'format'の前にある'//'を削除し、フォーマットを自由に編集してください。CSSのサンプルは末尾にあります。 */

//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>';

var product=encodeURIComponent(format);

var preview='<div style="border:1px dashed #ccc;margin-bottom:10px;overflow:hidden;padding:10px"><img src="'+icon60+'" style="border-radius:10px;float:left;height:57px;margin-right:10px;width:57px">'+name+' ('+price+')<br>'+developer+'<br><input type="button" value="リンクを取得" onclick="output(\''+product+'\')" style="float:right"><span style="color:#37709c;float:right;margin-right:10px">'+universal+'</span></div>';

document.write(preview);
}
}

function output(arg)
{
arg=decodeURIComponent(arg);
prompt('以下のタグを全選択してコピーしてください。',arg);
}

/* 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;
}

サンプルはここまでです。 */

</script>

設定項目

基本的な設定項目は冒頭にあります。

<script>

/* text2applink */

/* リンクシェアのIDを''の中に入力してください。利用していない人はそのままで結構です。 */
var linkshareid='';

/* 検索結果の表示件数です。初期設定ではiPhone、iPad、Macの各アプリを3つずつ検索します。 */
var limit=3;

まず、リンクシェアの ID をお持ちの方は var linkshareid='xxxxxxxxxxx'; となるように11桁のコードを入力してください。11桁で入力されていればリンクシェア形式のリンクタグを、空欄など11桁以外の場合は通常のリンクタグを出力するようになっています。

<script>

/* text2applink */

/* リンクシェアのIDを''の中に入力してください。利用していない人はそのままで結構です。 */
var linkshareid='';

/* 検索結果の表示件数です。初期設定ではiPhone、iPad、Macの各アプリを3つずつ検索します。 */
var limit=3;

続いて、検索結果の表示件数。ここをたとえば var limit=5; にすると、iPhone、iPad、Macの各アプリを5つずつで計15個のアプリがプレビュー画面に表示されます。

CSS について

text2applink では、誰でもすぐに使えるように、出力される HTML タグの見た目の制御を HTML に直接記述しています。ただ、本来は見た目に関する記述は CSS に書くのが望ましいとされています。また、CSS を適用することで自分の好きな見た目に変更することもできます。出力される形式をカスタマイズしたい人は、コードの後半部分にあるコメントをご確認ください。

/* スタイルをHTMLに記述せず、CSSで制御する場合は次のコードの先頭、'format'の前にある'//'を削除し、フォーマットを自由に編集してください。CSSのサンプルは末尾にあります。 */

//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>';

コメントが記述されている場所が見つかったら、//format// を削除し、format で始まるようにしてください。そうすることで、コメントよりも上の場所でいったん定義した変数 format を新たに上書きすることができます。そして、この2番目の format の方を編集すれば出力形式をカスタマイズできます。

ここでは1番外側の <div>app-link というクラスを充てているだけです。クラスなどは適宜編集してください。コードの末尾にある CSS のサンプルをスタイルシートに書けば、もともとのインラインで記述していたスタイルと同じ見た目になります。

2013-07-31 追記: カスタマイズについてもう少し詳しい記事も書きました。(追加記事: text2applink のフォーマットをカスタマイズする方法

最後に

今回のコードを書くに当たっては、AllAppStoreHtml を参考にさせていただきました。また、JavaScript の書き方については、熊谷さん (@EasyStyleGK) の次の記事が大変参考になりました。この場を借りてお礼申し上げます。

コード自体は自分で一から書いていますので、環境によってはうまく動作しないケースもあるかもしれません。そんな時は hirose (@shirose_jp) まで「動かないよー」とご一報いただければ幸いです。

One thought on “テキストエディタだけでアプリのリンクタグを取得できる JavaScript を書いたよ

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

コメントを残す

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