text2applink をアップデート、アプリリンクの複数取得に対応!

2013-08-02-001

iPhone からテキストエディタだけでアプリのリンクタグを取得できる自作の JavaScript コード、text2applink をアップデートし、リンクを一度に複数取得する機能を追加しました。スクリプトを1回実行するだけで、いろいろなアプリのリンクをまとめてコピーしてこれるようになりました!

目次

  1. text2applink の機能概要
  2. アップデートの内容
  3. リンクの複数取得
  4. 「続きを読み込む」機能
  5. 検索対象範囲のカスタマイズ
  6. PC で使う方法
  7. アップデート後のコード
  8. 謝辞

text2applink の機能概要

text2applink は App Store にある iPhone や iPad、Mac のアプリを検索し、ブログで紹介するためのリンクタグを取得することができます。実体は JavaScript のコードをテキストベースで記述しているだけなので、HTML プレビュー機能のあるテキストエディタさえあれば実行できます。公開時の記事と動画はこちらです。

アップデートの内容

アップデートの内容は次の通りです。

機能追加:

  • リンクの複数取得に対応
  • スクリプト実行後に別アプリを再検索可能に
  • 検索後の「続きを読み込む」機能
  • 検索対象にするアプリの範囲を iPhone、iPad、Mac の中から選べるように
  • PC での .html ファイルとしての利用に対応 (Mac + Safari)

バグフィックス:

  • アプリ名に ' が含まれているとリンクを取得できない問題を修正
  • WordPress のテーマによって、デフォルトの出力フォーマットで表示が崩れる問題を修正

フィードバックを寄せてくださった皆さん、大変ありがとうございます。

リンクの複数取得

今回追加したリンクの複数取得機能について、動画を用意しました。

手順としては、アプリ検索後に「複数選択モード」ボタンをタップ。モード切り替え後は、各アプリの「リンクを取得」ボタンをタップするたびに、リンクタグが JavaScript の配列にどんどん追加されていきます。

左上の「再検索」ボタンから別アプリを検索しても、いったん配列に追加したリンクタグはそのまま残っているので、再検索後にさらにリンクを取得していくことが可能です(「再検索」ボタンは通常モードでも使えます)。

リンクの取得が終わったら、右上の「複数リンクを出力」ボタンをタップします。溜め込んだ複数のリンクタグがまとめてポップアップされるので、「全選択」→「コピー」してください。

なお、複数選択モードの状態で再度、「複数選択モード」ボタンをタップすると、取得したリンクタグをクリアして通常モードに戻すことができます(確認画面が表示されるので、タップしただけでデータがクリアされることはありません)。

「続きを読み込む」機能

デフォルトでは iPhone、iPad、Mac の各アプリを3つずつ検索するようになっていますが、1回目でお目当てのアプリが表示されないこともあるかもしれません。そういったケースでは、画面の1番下にある「続きを読み込む」ボタンをタップしてください。

そうすると、検索ワードはそのままで、検索件数を5件プラスした上で再度検索をかけます。デフォルトでは検索件数が3なので、3+5で8件となり、iPhone、iPad、Mac それぞれで8つずつ、検索結果が表示されます。もう一度タップすると、13個ずつになります。

「続きを読み込む」機能を使った場合、追加で検索されたアプリはすでに検索済みのアプリの上に表示されていくので、画面を下までスクロールする必要はありません。また、画面の上にも「続きを読み込む」ボタンが現れます。

検索対象範囲のカスタマイズ

検索対象は iPhone アプリだけで十分、iPad や Mac のアプリまで表示しなくていいよって人は、コードを修正してカスタマイズすることができます。コードの最初の部分に、次の記述があります。

/* 検索対象にするアプリと検索件数を設定します。デフォルトではiPhoneアプリのみ検索、検索件数は3件となっています。 */
var entities=new Array();

entities[entities.length]='software'; /* iPhoneアプリを検索対象から外す場合、先頭の'e'の前に'//'を入れてください。 */

entities[entities.length]='iPadSoftware'; /* iPadアプリを検索対象から外す場合、先頭の'e'の前に'//'を入れてください。 */

entities[entities.length]='macSoftware'; /* Macアプリを検索対象から外す場合、先頭の'e'の前に'//'を入れてください。 */

var limit=3; /* iPhoneアプリ、iPadアプリ、Macアプリそれぞれの検索件数です。 */

検索対象を iPhone だけにするなら、iPad と Mac 用のコードをコメントアウトして無効化します。それには、行の先頭に // を入れて次のようにします。

//entities[entities.length]='iPadSoftware'; /* iPadアプリを検索対象から外す場合、先頭の'e'の前に'//'を入れてください。 */

//entities[entities.length]='macSoftware'; /* Macアプリを検索対象から外す場合、先頭の'e'の前に'//'を入れてください。 */

対象を絞った分、検索件数を増やそうという人は、たとえば10件にするなら次のように修正します。

var limit=10; /* iPhoneアプリ、iPadアプリ、Macアプリそれぞれの検索件数です。 */

PC で使う方法

PC でも iPhone と同じようにプレビュー機能のあるテキストエディタでスクリプトを動かすことができますが、別の方法でもできるようにしました。

まずはテキストエディタ(プレビュー機能のないものでも大丈夫です)にコードを全文ペーストします。

そして保存する際に、ファイルの拡張子を .html にします。もし文字コードがどうのこうのと言われたら、UTF-8 を選んでください。text2applink 自体に、文字コードを UTF-8 に指定する記述を今回加えたので、これで文字化けせずに使えるはずです。

ファイルをデスクトップなどに保存したら、後はダブルクリックで開くだけです。ブラウザが立ち上がり、スクリプトが実行されます。ただ、私は Mac 環境なので Windows では試すことができていません。もしお試しになった方がいらっしゃいましたら、ぜひ結果を教えてください。

2013-08-03 追記: Mac では Safari で動作確認ができていますが、Chrome と Firefox では正常に動作しません。Chrome や Firefox をデフォルトブラウザにしている方は次の方法で、text2applink.html ファイルのみ Safari をデフォルトアプリにしていただければ幸いです。また、Windows 7 の IE と Chrome では実行できなかった旨、情報提供をいただいています。

text2applink.html を右クリック→「情報を見る」→「このアプリケーションで開く」をクリック→「Safari」を選択。これで text2applink.html は Safari で開かれるようになります。

アップデート後のコード

アップデート後のコードを掲載します。全文コピーして、テキストエディタに張り付けてお使いください。前回のコードですでに出力フォーマットをカスタマイズ済みの方は、format='・・・';・・・ の部分にカスタマイズ後のコードを挿入されているはずです。今回も同じように挿入してください(カスタマイズについては text2applink のフォーマットをカスタマイズする方法 をご参照ください)。

<meta charset="utf-8">
<script>

/* text2applink */

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

/* 検索対象にするアプリと検索件数を設定します。デフォルトではiPhone、iPad、Macアプリすべてが対象、検索件数はそれぞれ3件となっています。 */
var entities=new Array();

entities[entities.length]='software'; /* iPhoneアプリを検索対象から外す場合、先頭の'e'の前に'//'を入れてください。 */

entities[entities.length]='iPadSoftware'; /* iPadアプリを検索対象から外す場合、先頭の'e'の前に'//'を入れてください。 */

entities[entities.length]='macSoftware'; /* Macアプリを検索対象から外す場合、先頭の'e'の前に'//'を入れてください。 */

var limit=3; /* iPhoneアプリ、iPadアプリ、Macアプリそれぞれの検索件数です。 */

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

function main(arg)
{
var buttons='<div style="margin:10px 0;text-align:center"><input type="button" value="再検索" onclick="anothersearch()" style="margin-right:10px"><input type="button" value="複数選択モード" onclick="multiplemode()" style="margin-right:10px"><input type="button" value="複数リンクを出力" onclick="multipleoutput()"></div>';
document.write(buttons);
var morebutton='<div style="margin:20px 0 10px;text-align:center"><input type="button" value="続きを読み込む" onclick="more()"></div>';
if(newlimit!=limit)
{
document.write(morebutton);
}
for(var i=0;i<entities.length;i++)
{
var entity=entities[i];
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);
appsearch(entity,arg);
}
document.write(morebutton);
var topbutton='<div style="margin-top:20px;text-align:center"><input type="button" value="ページトップへ戻る" onclick="scrollTo(0,screenTop)"></div>';
document.write(topbutton);
document.close();
}

function appsearch(arg1,arg2)
{
var searchurl='http://itunes.apple.com/search?term='+term+'&country=jp&entity='+arg1+'&limit='+arg2;
var xmlhttp=new XMLHttpRequest();
xmlhttp.open('get',searchurl,false);
xmlhttp.send();
var response=xmlhttp.responseText;
var results=JSON.parse(response).results;
rendering(arg1,results);
}

function rendering(arg1,arg2)
{
if(newlimit!=limit)
{
arg2=arg2.reverse();
}
for(var i=0;i<arg2.length;i++)
{
var app=arg2[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(arg1!='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 style="margin:0;padding:0"><span style="color:#37709c;font-size:larger;font-weight:bold">'+name+'</span></li><li style="margin:0;padding:0">カテゴリ: '+genres+'</li><li style="margin:0;padding:0">価格: '+price+'(記事掲載時)</li><li style="margin:0;padding:0">開発元: '+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);
product=product.replace(/\'/g,'%27');
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);
if(products==undefined)
{
prompt('以下のタグを全選択してコピーしてください。',arg);
}
else
{
products[products.length]=arg;
alert('リンクを取得しました。');
}
}

function anothersearch()
{
term=prompt('アプリ名を入力してください。');
if(term)
{
newlimit=limit;
main(limit);
}
}

function multiplemode()
{
if(products==undefined)
{
products=new Array();
alert('複数選択モードに切り替えました。');
}
else
{
var answer=confirm('通常モードに戻しますか?(すでに取得したリンクはクリアされます。)');
if(answer==true)
{
products=undefined;
}
}
}

function multipleoutput()
{
if(products==undefined)
{
alert('複数のリンクを取得するには、まず「複数選択モード」を押してください。');
}
else if(products.length==0)
{
alert('取得されたリンクがありません。')
}
else
{
var join=products.join('\n\n');
prompt('以下のタグを全選択してコピーしてください。',join);
}
}

function more()
{
newlimit+=5;
main(newlimit);
scrollTo(0,screenTop);
}

/* 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 li {
 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>

謝辞

最後に、この text2applink に対して凛さん (@rin_wan) が素敵な紹介記事を書いてくださいました!すごくうれしいです!今回追加したリンクの複数取得機能も、凛さんから「こんなのできたら便利」とアイデアを頂いたものでした。たくさんのフィードバック、大変ありがとうございます。こちらがその素敵記事になります。

もし text2applink を使ってくださった方の中で、何か気づいたことなどある人がいらっしゃいましたら、お気軽に hirose (@shirose_jp) までご連絡ください。

2 thoughts on “text2applink をアップデート、アプリリンクの複数取得に対応!

  1. Pingback: [U・ω・U]text2applinkアップデート!アプリのリンク挿入が超絶便利に! | りんろぐ。

  2. Pingback: HTMLでブログを書いてみようと思い立った。その2【Mac編/TextExpander for Mac】 | futapapa

コメントを残す

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