カテゴリー別アーカイブ: Javascript

Javascript

stravaKudoser

< stravaKudoser >
Stravaの “スゴイね” ボタンをまとめて押すブックマークレットを作ってみました。
https://github.com/mecrazy/stravaKudoser

< たくさんの “スゴイね” ボタンを押すのが面倒なとき >
大勢の人にフォローされていたり、大勢の人をフォローしている場合、このブックマークレットを使うと楽です。Windows/OSX/LinuxといったPC環境で実行してください。AndroidやiOSといったモバイルOSではテストしていません。

stravaFollowers

< stravaFollowers >
Strava用のフォロワーチェッカーのようなものを作ってみました。ブックマークレットです。
https://github.com/mecrazy/stravaFollowers

< Stravaに無い機能 >
たまにですが、Stravaではフォローした直後にフォロー解除する人がいます。そしてその人を自分が何気なくフォローしてしまっていた場合、フォロワーが多い場合などは探すのは非常に困難かと思います。そのままにしている方も多いのではないでしょうか。これを改善したくて相互フォローかどうかがひと目でわかるようなブックマークレットを作ってみました。
Windows/OSX/LinuxといったPC環境で実行してください。AndroidやiOSといったモバイルOSではテストしていません。

Raspberry Pi用にPhantomJS 2.1.1をビルドしてみました

Raspberry Pi用にPhantomJS 2.1.1をビルドしてみました。その他のarmhfアーキテクチャのマシンでも動くと思います。

https://www.scaleway.com/ のARM VPSにDebianをインストールしてビルドしました。ビルド方法は ここ に忠実に従いました。

https://github.com/mecrazy/phantomjs-binaries からダウンロードしてください。
( Pull requestが通れば”https://github.com/avaynshtok/phantomjs-binaries”に書き換える予定です )

個人的にはRaspberry Piを各種サーバアプリのテストに使っていてWEBスクレイピングもその一つです。でもPhantomJSのarmhf用のバイナリがWEB上になかったのでビルドしてみました。欲しい方は使ってください。ただし、くれぐれも自己責任でお願いします。

< "PhantomJS"とは? >
PhantomJSとはJavaScript APIによるWEBスクレイピングツールです。PDFやPNGやその他いくつかの形式でWEB画面のキャプチャーが可能です。PhantomJSについてもっと詳しく知りたいという方は http://phantomjs.org/ をチェックしてみてください。

JSONP形式で新バージョンのGoogleスプレッドシートの内容を取得

< 注意 >
このページの投稿内容に従ってWEBサイトを公開すると、Gmailアドレスが一般公開のJSONPファイルに記載されてしまうため、公開専用のGoogleアカウントを新たに取得することをお勧めします。

< Googleスプレッドシート >
旧バージョンではXMLやJSONなどさまざまな形式で公開する機能が提供されていましたが、新しいバージョンになってから取得できなくなっていました。 …… と思っていたのですが、StackOverflowに興味深い投稿を見つけました。
Unable to publish specific cells in new Google Spreadsheets – StackOverflow
JSONPで取得できる …… えJSONP!?クロスドメインで取得可能なようですww
StackOverflowの回答によるとAPI自体は新しいものではないようです。私は気にしませんが、気に入らない方は使用しない方が良いかもしれません。

< URLフォーマット >
↓こんな感じです。

https://spreadsheets.google.com/feeds/cells/[ スプレッドシートのキー ]/od6/public/values?min-row=[ 開始行番号 ]&max-row=[ 終了行番号 ]&min-col=[ 開始列番号 ]&max-col=[ 終了列番号 ]&alt=json-in-script&callback=[ コールバック関数名 ]

< どうやって使う? >
JSONPフォーマットなので特にパーサなども必要とせずJavascriptから使用可能です。個人的にはもう少し便利に使用したいので、ページ指定の引数をGETリクエストパラメータに変換するスクリプトを作ろうかと思います。

< jQueryプラグイン >
jQueryプラグインを作ってみました。ネーミングは適当ですが “generateGoogleJsonpUri” というものです。
generateGoogleJsonpUri – github
↓こちらがブログフレームワーク的に使用してみたサンプルです。
https://mecrazy.net/sample/generateGoogleJsonpUri/
このプラグインを使用すればシートの内容を取得し2次元配列に変換可能ですので、お好きなHTMLと組み合わせて使用できるかと思います。

< 使い方 – 定義 >
定義は

var test = $.genJsonpGDU("スプレッドシートのキー");

もしくは

var test = $.genJsonpGDU({key:"スプレッドシートのキー"});

のような感じです。

スプレッドシートのキーは以下のキャプチャにもあるようにURLに含まれているので簡単に特定できます。
spreadsheet_sample_001
このキャプチャではURLは “https://docs.google.com/spreadsheets/d/1IG2QEOXehU01b6DoMQi19CvFpm2EZJOUM2y4lqXKduw/edit#gid=0” となっており、スプレッドシートのキーは “1IG2QEOXehU01b6DoMQi19CvFpm2EZJOUM2y4lqXKduw” です。ご自身の使用したいシートのキーを取得してみてください。

< 使い方 – ページング設定 >

test.pager({
  startRow:2,//開始行番号 ( 必須 )
  minCol:2,//開始列番号 ( 必須 )
  maxCol:7,//終了列番号 ( 必須 )
  recsPerPage:5//1ページで読み込む行数 ( 任意 )
});

上の設定と下のテーブルを比較してみてください。1ページ目として読み込むのがピンクの範囲で、2ページ目として読み込まれるのは緑の範囲です。”B2:G2″ が最初の行で、 “B6:G6” が5番目の行といった具合です。.

A1 B1 C1 D1 E1 F1 G1 H1
A2 B2 C2 D2 E2 F2 G2 H2
A3 B3 C3 D3 E3 F3 G3 H3
A4 B4 C4 D4 E4 F4 G4 H4
A5 B5 C5 D5 E5 F5 G5 H5
A6 B6 C6 D6 E6 F6 G6 H6
A7 B7 C7 D7 E7 F7 G7 H7
A8 B8 C8 D8 E8 F8 G8 H8
A9 B9 C9 D9 E9 F9 G9 H9
A10 B10 C10 D10 E10 F10 G10 H10
A11 B11 C11 D11 E11 F11 G11 H11
A12 B12 C12 D12 E12 F12 G12 H12
A13 B13 C13 D13 E13 F13 G13 H13

< 使い方 – ページURLの取得 >
1ページ目のURLはこんな感じで取得します。

var pageUrl = test.page(1);

< 使い方 – Ajax通信 >
“test.ajax” の引数は jQuery.ajax の引数と全く同じですので、 “http://api.jquery.com/jQuery.ajax/” を参照ください。

test.ajax({
  url:test.page(1),
  success:function(json){
    console.log(json);
  }
});

前のページの有無や次のページの有無をコールバックのsuccess関数内で判定したい場合は “test.get()” を使用してください。

test.ajax({
  url:test.page(1),
  success:function(json){
    console.log(json);
    var param = test.get();
    if(param.pager.prev){
      console.log('前のページあり');
    }else{
      console.log('前のページなし');
    }
    if(param.pager.next){
      console.log('次のページあり');
    }else{
      console.log('次のページなし');
    }
  }
});

< 使い方 – JSONから2次元配列への変換 >
GoogleのJSONレイアウトは結構階層が深いのでセルを2次元配列に変換する関数 “test.jsonToArr” を実装してみました。

test.ajax({
  url:test.page(1),
  success:function(json){
    var arr2d = test.jsonToArr(json);
    console.log(arr2d);
  }
});

< 使い方 – 変数キャッシュ >

test.set({cache:true});

ページング機能を使用した際にキャッシング機能を有効にするかどうかの設定です。デフォルトでは20分おきにJSONPファイルをチェックし更新日が変更されていたらキャッシュをクリアします。チェックする間隔を指定したい場合は以下のようにしてください。

test.set({
  cache:true,
  cacheInterval:{
    sec:0,min:50,hour:0
  }
});

Bootstrap 3用ベースHTML生成プログラム

< これは何? >
Bootstrap 3用のベースとなるHTMLを生成します。作成時にはオプションを指定可能です。私自身も同じものをいつも使っています。よかったらブックマークして使ってみて下さい。


< HTML生成プログラム >
タイトル :
言語コード :
Bootstrapバージョン :
古いIEとの互換性を維持する :
ナビゲーションバーを上部固定にする :
フッタを最下部固定にする :
jQueryのCDNロード失敗を考慮する ( Failover ) :
jQuery UIのCDNロード失敗を考慮する ( Failover ) :
backbone.jsを使用する :
underscore.jsを使用する :
bootboxを使用する :

“古いIEとの互換性を維持する” で “はい” を選択した場合は必ず “bootstrap.min.css” と “respond.min.js” をHTMLファイルと同じドメインのサーバ上に設置してください。基本的に “respond.min.js” はCDNや他ドメインに置いた状態では正常に動作しません。

< スクリプト >
ここで生成するHTMLで使用しているスクリプトは下記リンクからダウンロード可能です。お好みでサーバ上に設置したりしてHTMLのパスを書き換えてしまってください。
Bootstrap
jQuery
jQuery UI
backbone.js
underscore.js
bootbox
html5shiv
Respond.js
( BootstrapRespond.jsのダウンロードは古いIE向けには必須ですのでご注意ください。 )