javascript

  • Feb
  • 18
  • 2013

IT

JSONPについて勉強した

JSONP(JSON with padding)とは、scriptタグを使用してクロスドメインなデータを取得する仕組みのことである。HTMLのscriptタグ、JavaScript(関数)、JSONを組み合わせて実現される。 ブラウザなどに実装されている「同一生成元ポリシー」という制約により、Webページは通常、自分を生成したドメイン以外のドメインのサーバと通信することはできない。 しかし、HTMLのscriptタグのsrc属性には別ドメインのURLを指定して通信することができるという点を利用することによって別ドメインのサーバからデータを取得することが可能になる。 JSONPでは、通常、上記src属性のレスポンスの内容はjavascript関数呼び出しの形式となるため、src属性に指定するURLにその関数の名前をクエリ文字列の形式で付加する。一般的な方法では、この時に指定する関数名はWebページ側ですでに定義されているコールバック用の関数の名前になる。

Wikipediaより

サーバ側は?callback=hogeで指定したコールバックでJSONを包んで返してくれるようなAPIで、
クライアントはそれを<script>タグのsrcで指定して呼び出す仕組みらしい。
<script>タグを使うからドメインを超えて通信できるのでレスポンスヘッダに

Access-Control-Allow-Origin: *

が入っていないJSON-APIをブラウザから呼ぶ時とかに使うといいっぽい。

実践編

githubのAPIをJSONPで叩いてみる


JSONPの結果をココに表示


このページのソース

<script type="text/javascript">
              $("#jsonp_run").on("click",function(){
                var jsonp = new JSONP();
                jsonp.request("https://api.github.com/users/georgeosddev",function(res){
                  var flagment = document.createDocumentFragment();
                  for (var key in res["data"]){
                    var span = document.createElement('span');
                    span.innerText = key+":"+res["data"][key]+"\r\n";
                    flagment.appendChild(span);
                  }
                  $("#jsonp_result").append(flagment);
                });
              }).on("touchstart",function(){
                $(this).trigger("click");
              });
              </script>
              

jsonp-client.js

できた。\(^o^)/

はじめての被PullRequest

先日公開したマークダウンエディターに早速PullRequestやIssueが登録された。 相変わらずソーシャルコーディングコワイけど、自分のプロダクトを見て、無償でアドバイスをくれる人がいるってすごく喜ばしいことです。 Thank you @balupton

でgitやGithubの使い方をよーく理解していないのでわかんないことが多くて困る。 とりあえずマージはREADMEファイルの簡単な修正だったので、github上で1クリックでできた。超便利。 でIssueにあった「markedっていうライブラリ使ってみ」、ってのも対応した。 gitのコミットメッセージからissueをcloseできたりするんですね。

でプロダクトそのものはgithub-pages上に公開しているので、 gh-pagesのブランチにmasterを同期させたかったけどやり方がよーわからん。 自分のmasterとgh-pagesは基本的にモジュールは同じなのですが、コミット履歴がちがうからなのか、

git rebase master
              

ってやったらまーなんかconflictが大量発生でパニックに。 なおそうとなんかいろいろやってたら、masterの履歴も更新されたり、グダグダに。 で困ったときは

git checkout -- <file>
              

とかで元にもどしたりして、 最終的にmasterとgh-pagesが履歴も含めて完全に同じ状態になったっぽいので良しとしよう。

いやーこの辺りのgitの使い方をしっかり覚えておかないと、 今後OSSで人様に迷惑かけることになりそうでコワイ。 まじで勉強しよう。

関係ないけどjsとNode.jsの本も

サーバサイドJavaScript Node.js入門

合わせて注文した、全部で¥9,000…


ちなみにMarkdown-Editのほうは 以下の機能追加をしたのでオフラインでも便利に使えるよ!

  • localStorage サポート
    inputの内容をlocalStorageにキャッシュするので、メモ帳として使えます。TODOとかに便利

  • marked.js & highlight.js サポート
    ConverterをGithubAPIかmarkedを選べるようにしました。markedを選んだ場合はGFMのTableとかAnchorとか一部制限はあるけど、早いしOfflineでも使えるぜー。

はじめてのPullRequest、はじめてのnpm publish、そしてソーシャルコーディングコワイ

githubで自分のプロダクト公開するのにも慣れてきたので 初めてPullRequestをやってみた。

作ったのはdocpadのプラグインで、
プラグインはたくさんあって、テストのやり方とかも既にあるのを真似てやったらなんかうまく行ったので、勇気をだしてPullRequestを送ってみた。

そしたらこれ
なんかリポジトリの管理を変更するからどうのこうの。
お前らどう思う?とかチョット待っとけ的なことを言われて最終的にここにマージされた。

なんか単独のリポジトリになってる。
しかも2つあるのは最初にuglifyのpullrequest出したあとにgistのプラグイン作って自分のリポジトリにコミットしたらそれも一緒にリクエストのとこに出ちゃったから。gitのブランチの使い方がよくわかってない故です。
意味分かんないことしてんじゃねーよって怒られそうでコワイ。

でも両方とりこまれたからオッケー。

でさらに嬉しいことに
コミュニティのメンバーとして入れてくれた。

イェーイ。githubのプロフィールに表示されたりしないのかな?

で喜んでたら今日早速issueが飛んできた。

使えねーよコラって怒られてるようでコワイ。 Cannot find module… そういえばnpmに登録してないからそりゃそうだわな、ってことで 初めての

npm publish .
              

package.jsonの書き方で悩んだけど.npmignoreとか他のプラグインのほとんど同じで公開したらとりあえずうまく行ったっぽい。

さっそく自分のdocpadプロジェクトで使用してみたところうまく動いているようで一安心。

とりあえずソーシャルコーディングはコワイ。けどなんか承認されてるようでうれしい。
それと英語、git、テストをちゃんと勉強しないとこの先やってけなさそうなのでガンバロー。

Source Sans Proを使ってみた。ついでにgh-pagesをCDN風に使ってみた。

Adobe謹製のソースコード表示用のフォントSource Sans Proが出たらしいので早速使ってみた。 

フォント自体はGoogle Web Fonts自体にすでに上がっているのでそこから利用。
 でこんなの作ってみた。

 Demo:autoPrettify.js sample
 Repositry:georgeOsdDev/autoPrettify.js 

prettify.jsをラップして、font-familyにSource Sans Proを指定しています。
 prettify.jsって便利だけどいちいちpreタグにclass指定したり、onloadで`prettyPrint()`呼び出したり面倒くさいのでautoPrettify.jsをインクルードするだけで完結するようにしています。blogとかに使えると思います。(このブログにも適用したいんだけど、いまいちlokkaの仕組みがわかっていないので見着手。。。rubyも勉強しなくては。)


さて
autoPrettify.jsの中身といえば、documentにlinkとscriptタグ追加してprettify.jsを実行している単純なものなのだけど、ソースの取得先をgithub-pageにしてみたところが勉強になった。
なぜならprettify.jsのjsはcdn.jsに上がっているけどprettify.cssをホスティングしているCDNが見つからず、困ったからです。

github上のファイルを直接参照する方法は、最初rawファイルを指定したらダメっぽかったのでこの辺とかこの辺を参考にgithub-pagesを作成してやってみた。
とりあえずmasterとgh-pagesのブランチができてちゃんと動いているようだけどいまいちgitの仕組みがよく分かってないのでをもっとちゃんと理解しようと思う。

Backbone.jsでプレゼンテーション

Backbone.js入門中です。 OfficialのTODOをひと通りやって自分でも何か作ってみようと思い作りました。

Backbone-slide.js

本当はサーバ上のデータを取得してそれをModelで管理してViewで表示〜みたいなアプリの方がBackbone.jsのMVフレームワークを使うメリットが発揮できるのだろうけれど、とりあえず思いついたのがDOM操作だったのでプレゼンテーションツールになりました。

html中の<section>タグを取得してModel,Collectionとして管理して、Viewでひとつづつ表示するような仕組みになってます。

使い方はcssとjsファイルをインポートして最後にBackboneSlide.init();を呼ぶだけです。 ホントはinitにオプション引数渡してアニメーションとか可変にしたいけど、そこまで作れなかったので画面遷移はfadeIn/Outだけとなってます。 また、backbone-slide.cssはプレゼンとしての表示のためだけなので、見た目のデザインは独自のcss等を読みこめば基本的には反映されます。

    <head>
                      <meta charset="UTF-8">
                      <link rel="stylesheet" href="./css/backbone-slide.css">
                      <title>Backbone-Slide.js</title>
                  </head>
                  <body>
                      <section><p>HelloWorld!</p></section>
                      ...
                      <script src="./javascript/lib/jquery-1.7.1.js"></script>
                      <script src="./javascript/lib/underscore.js"></script>
                      <script src="./javascript/lib/backbone-min.js"></script>
                      <script src="./javascript/backbone-slide.js"></script>
                      <script type="text/javascript">
                        $(function(){
                          BackboneSlide.init();
                        });
                      </script>
                  </body>
              

backbone.jsとかunderscore.jsとかイケてるテクニックをもっと使えるようになりたいなー。 あとテストもしっかり書くようにしよう。 この本も途中までしか読んでないのでちゃんと読もう。


参考にしたサイト


あと今回は静的なファイルだけなので、初めてgithub-pagesを作ってみた。

gitの仕組みがわかっているようで全然わかってないのでこの本を注文した。