2014年11月29日

Steamのサイトを便利にするブックマークレット

 この記事も含めて、まとめはこちらLink


 私が今よく利用している、PCゲーム販売サイト、Steamについて。

20141129-01.jpg
Steam トップページ

 ここでゲームを回覧していると、ゲームタイトルやURLをコピーしたい時や、ここから関連するページに移動したい事がよくあるが、いちいちいくつかのボタンをクリックしたり手間がかかる場合が多い。
 その辺を簡略化するブックマークレット、ブラウザでブックマークで登録したらそれを押すだけで様々な事ができるものを作ってみた。

タイトル・URL抽出
 Steamのストアやコミュニティページから、タイトルやURLをコピーして使いたい事が多いが、そのために、
「ページに書かれているゲームタイトルを範囲指定してコピーしてメモ帳などに貼り付けて今度はURLを・・・」などと面倒なので、それを簡単にできるブックマークレット。

タイトル&URL抽出
(↑リンクをブックマークとして保存すれば使用可)
// ブックマークレット //
javascript:(function(){t=document.title.replace(/Steam[^:|^%EF%BC%9A]*[:|%EF%BC%9A| ]+/,'');window.prompt('Title+URL',t+' '+document.URL);})();

// コメント付解説 //
javascript:(function(){
t=document.title.replace(
/Steam[^:|^%EF%BC%9A]*[:|%EF%BC%9A| ]+/,''
); // タイトル置換
window.prompt( // 入力ダイアログ
'Title+URL', // タイトル
t+' '+document.URL // コピー文字書式
);
})();
 リストの先頭にある「タイトル&URL抽出」の部分はリンクにしているので、これをマウス右クリック「このリンクをブックマーク」や、ドラッグしてブックマークに登録すれば、ボタンとして使用可能。

20141129-04.png
 このブックマークレットを実行すれば、このようなダイアログが表示されるので、Ctrl+InsやCtrl+Cで文字をコピーすればOK。

 Javascriptを使った簡単なプログラムだが、ゲームタイトルを取得するために利用しているのが、各ゲームのページに記載されているページタイトル。Steam上ではこのようになっている。
 この日記を書いている時点でのタイトルとなるが、ストアページは「○○%オフ」の表記があるものと無いもの、しかもオフ表示が無い時だけ「:(コロン)」は全角。コミュニティではコロン2つとスペース1つと、現時点で3種類の形式がある。
 これら全てからタイトルの先頭部分のみ削除すれば、ゲームタイトルのみ抽出できる。その正規表現書式は、

Steam[^:|^:]*[:|:| ]+

 となる。これを置換コマンド「replace()」を使って削除するという処理。

ストア←→コミュニティページ移動
 次は、各ゲームのURLを利用するもの。
 同じゲームで、ストアページとコミュニティページのURLは、

20141129-02.jpg
http://store.steampowered.com/app/219890

20141129-03.jpg
http://steamcommunity.com/app/219890

 と、それぞれアドレスに商品No.を加えたものなので、先頭の部分だけ変えてやれば、その間を移動可能になる。
 そこで、1つのボタンでストアとコミュニティ両方を移動できる、トグル形式にしたブックマークレット。

ストア←→コミュニティ
ストア←→コミュニティ(新規タブで開く)
// ブックマークレット //
javascript:(function(){u=document.location.href;re=new RegExp("/app/[0-9]+","i");ur=u.match(re);if(ur!=null&&ur!=''){u1="http://store.steampowered.com";u2="http://steamcommunity.com";r1=new RegExp(u1,"i");if(u.match(r1)!=null)location.href=u2+ur;else location.href=u1+ur;}})();

// ブックマークレット(新規タブで開く) //
javascript:(function(){u=document.location.href;re=new RegExp("/app/[0-9]+","i");ur=u.match(re);if(ur!=null&&ur!=''){u1="http://store.steampowered.com";u2="http://steamcommunity.com";r1=new RegExp(u1,"i");if(u.match(r1)!=null)open(u2+ur,'_blank');else open(u1+ur,'_blank');}})();

// コメント付解説 //
javascript:(function(){
u=document.location.href; // URL取得
re=new RegExp("/app/[0-9]+","i"); // 正規表現定義
ur=u.match(re); // 検索
if(ur!=null&&ur!=''){ // 文字があれば
u1="http://store.steampowered.com"; // URL 1
u2="http://steamcommunity.com"; // URL 2
r1=new RegExp(u1,"i"); // 正規表現定義
if(u.match(r1)!=null) // URL 1と合えば
location.href=u2+ur; // URL 2に変換
else // 違えば
location.href=u1+ur; // URL 1に変換
}
})();
 方法としてはまず、アドレスの中から「/app/0000000」と表記された商品No.部分を、検索コマンド「match()」で抽出する。
 文字があれば、ストアとコミュ、2つのURLを登録して、現在表示されているのがストアならコミュに、違えばストアページのアドレスに、先ほどの商品No.を加えたURLに移動する。

日本語レビューに移動
 その応用。
 ゲームに対して、コミュニティに書かれたレビューが確認したい、しかも日本語のみ表示させたい場合のURLは、

http://steamcommunity.com/app/219890/reviews/?filterLanguage=japanese&browsefilter=toprated

 となるので、それに変換するブックマークレット。

日本語レビューに移動
// ブックマークレット //
javascript:(function(){ur=document.URL.match(/\/app\/[0-9]+/);if(ur!=null&&ur!='')open("http://steamcommunity.com"+ur+"/reviews/?filterLanguage=japanese&browsefilter=toprated",'_blank');})();

// コメント付解説 //
javascript:(function(){
ur=document.URL.match(/\/app\/[0-9]+/); // 検索
if(ur!=null&&ur!='') // 文字があれば
open("http://steamcommunity.com"+ur
+"/reviews/?filterLanguage=japanese&browsefilter=toprated"
,'_blank'); // 指定URLで開く
})();

自分の実績
 今度は、No.のみ抽出するものとして、

自分の実績
// ブックマークレット //
javascript:(function(){ur=document.URL.match(/app\/[0-9]+/)[0].replace(/app\//,"");if(ur!=null&&ur!='')open("http://steamcommunity.com/profiles/【Profile No.】/stats/"+ur+"/achievements/",'_blank');})();

// コメント付解説 //
javascript:(function(){
ur=document.URL
.match(/app\/[0-9]+/)[0] // "app/【No.】"を取得
.replace(/app\//,""); // "app/"を削除してNo.だけに
if(ur!=null&&ur!='') // 文字があれば
open("http://steamcommunity.com/profiles/
【Profile No.】/stats/"
+ur+"/achievements/"
,'_blank'); // 指定URLで開く
})();
 赤文字で書いた"【Profile No.】"の所に、自分のSteam ID No.を入れておけば、ストアやコミュニティページから、そのゲームで自分の実績を表示するページに飛ぶ。
 ただし、自分が購入していないものや実績が存在しないゲームはエラーになるので注意。

 方法として、URLから一度matchで"/app/【No.】"の部分だけ取り出してから、replaceで"/app"を削除してNo.を残して取得するが、ここでも注意する事。
 matchで抽出した文字は、変数でも「配列変数」として入っている。つまり、後にreplaceなどで取り出すためには、配列の先頭である[0]を指定しないといけない。
 この辺、私自身のメモ書きとして。

日本語化されているか検索
 外部サイトを使ったもの。
 ゲームが日本語に、有志によるMOD導入のものも含めて対応されているか確認したい時、Wikiでまとめられているサイトがある。

有志が日本語化した海外ゲームのまとめ Wiki*

 そこに検索をかけた時のURLは、

http://wikiwiki.jp/nihongoka/?cmd=search&word=The%20Stanley%20Parable&type=AND

 となるので、そのためのブックマークレット。

日本語化の検索
// ブックマークレット //
javascript:(function(){t=document.title.replace(/Steam[^:|^%EF%BC%9A]*[:|%EF%BC%9A]/,'');if(t!=null&&t!='')open("http://wikiwiki.jp/nihongoka/?cmd=search&word="+t+"&type=AND",'_blank');})();

// コメント付解説 //
javascript:(function(){
t=document.title.replace( // タイトル置換
/Steam[^:|^%EF%BC%9A]*[:|%EF%BC%9A| ]+/,'');
if(t!=null&&t!='') // 置換されたら
open("http://wikiwiki.jp/nihongoka/?cmd=search&word="
+t+"&type=AND",'_blank'); // 指定URLで開く
})();

 という感じで、色々と応用が利くので、好きな形にすると便利だと思う。

タグ:Steam javascript

posted by 司隆 at 11:41 | Comment(0) | Internet
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]