ホーム > タグ > JavaScript

JavaScript

Rails に XML をボディとするリクエストを JavaScript で送る

Rails における XML でのリクエスト

Rails に、Content-Type: application/xml で、ボディが XML のリクエストを送ると、コントローラ中では params に展開される。

# リクエスト # ヘッダはいろいろ省略してます POST /entries HTTP/1.1 Content-Type: application/xml <?xml version="1.0" encoding="UTF-8"?> <entry> <body>New blog entry</body> </entry> # EntriesController def create p params # => {"entry" => {"body" => "New blog entry"}, ... ...

これは主に ActiveResource のための仕様だろうが、XML によるレコードのエクスポートとインポートを行う目的で、同じインターフェイスを HTML から使いたいと考えた。

JavaScript によるリクエスト

HTML の form で Content-Type を application/xml にすることはできない (よね?) ので、jQuery を使って JavaScript で送る。

// url に URL 文字列、 // xml に XML 文字列が格納されているものとする。 $.ajax({ type: "POST", url: url, dataType: "xml", // Accept ヘッダをセットする。レスポンスを XML で受けとるなら必要。なくてもよい。 contentType: "application/xml", // Content-Type を XML にする data: xml, success: function(res, type) { alert(res); }, error: function(req, message, error){ alert(error); }, });

しかし、HTTP メソッドが GET 以外の場合、リクエストに含まれる authenticity_token をチェックし、無いか session[:authenticity_token] と一致しないと、session が空になってしまう (※)。

これは具合が悪いので authenticity_token を送信する方法を考える。

※ ApplicationController などで protect_from_forgery メソッドが呼ばれている場合。普通呼ばれてます。

CSRF プロテクショントークンを送る

form_for で作ったフォームには authenticity_token が hidden フィールドで格納されているので、そのまま submit すればよい。また、Ajax 通信でも、JSON で送るなら、送信するオブジェクトに authenticity_token プロパティを付与すればよい。この場合 authenticity_token は meta タグから取得する。

<!-- 最近の Rails (3 以降?) なら application.html.erb の head 要素にこんな記述があるはず --> <%= csrf_meta_tag %> <!-- これにより下記のような meta 要素が生成される --> <meta content="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" name="csrf-token"> // jQuery でこれを取得する var csrf_token = $("meta[name=csrf-token]").attr("content");

しかし、XML はルート要素が 1 つと決められているし、ルート要素は params の 1 要素に納められてしまうため、リクエストボディに authenticity_token を含めることはできない。

そこで、authenticity_token をチェックしているコードをみてみる。

# actionpack/lib/action_controller/metal/request_forgery_protection.rb def verified_request? !protect_against_forgery? || request.get? || form_authenticity_token == params[request_forgery_protection_token] || form_authenticity_token == request.headers['X-CSRF-Token'] end

どうやら X-CSRF-Token ヘッダにトークンを書いてもいいらしい。

jQuery.ajax は beforeSend オプションで、XMLHttpRequest オブジェクトを変更できるので、XMLHttpRequest.setRequestHeader() を使って X-CSRF-Token ヘッダを追加する。

var csrf_token = $("meta[name=csrf-token]").attr("content"); $.ajax({ type: "POST", url: url, dataType: "xml", // Accept contentType: "application/xml", beforeSend: function(xhr) { // X-CSRF-Token ヘッダのセット xhr.setRequestHeader("X-CSRF-Token", csrf_token) }, data: xml, success: function(res, type) { alert(res); }, error: function(req, message, error){ alert(error); }, });

これで OK。

Processing 環境の比較

このところ、花火シミュレートアプリ HANABICS (Chrome で見てね) というのを開発している (仕事じゃないよ)。

Processing というフレームワークで動かしてるんだけど、開発の過程でいろいろな環境を渡り歩いたので、それぞれの特徴についてまとめてみる。

続きを読む

iPhone 等で任意の Webclip アイコンを設定するブックマークレット

iPhone をはじめとする iOS デバイスでは、Web ページのブックマークをホーム画面に置くことができる (これを Webclip と呼ぶ) 。このとき、下記のような要素が head 要素にあれば、指定したアイコンで表示される (ない場合はページを縮小した画像が表示される) 。

<link rel="apple-touch-icon" href="(アイコンのURL)"/>

しかし、多くのサイトではこの画像が設定されていないし、あったとしても気に入らない場合もある。

そこで、ユーザーが任意の画像を Webclip アイコンに設定するためのブックマークレットを作った。

使い方は・・・

  1. アイコンにしたい画像のURLをコピーしておく
  2. アイコンを設定したいページを開く
  3. 上のブックマークレットを実行
  4. 画像の URL を貼り付けして OK をタップ
  5. 通常通りホーム画面へ追加

ただ、なぜか、iPhone 用のリンクをタップ後のこのページでは動作しません。ほかのページでも実行出来ない場合があるかも。原因わかりました。追記参照。

ちなみに、アイコンは、Iconfinder あたりで探すのがおすすめ。

なお、コードを見やすいように書き下したのがこちら。

javascript:(function(){ u = prompt('Image URL'); h = document.getElementsByTagName('head')[0]; e = document.createElement('link'); e.setAttribute('rel', 'apple-touch-icon'); e.setAttribute('href', u); h.appendChild(e); })()

link要素を追加してるだけですね。

追記 (2010-10-01)

このページでリンクタップ後に実行出来ない問題について、Mobile Safari のデバッグコンソールをオンにして、再現してみたところ、下記のようなエラーが。

JavaScript エラー:1行目 Refused to execute a JavaScript script. Source code of script found within request.

実行しようとするスクリプトが URL 中に含まれてるとブロックされるようです。最近よくきく、クライアント側での XSS 対策というやつですね。これはたしかに有効かも。ということで、実行できないのは正しい動作で、別のページでは問題なく動くはず。

Wikipedia にレファレンス協同データベースでの検索結果を表示する Greasemonkey スクリプト

NDLが提供するレファレンス事例共有サービス「レファレンス協同データベース」がAPIを提供していたので使ってみました。せっかくなので「API腕自慢」にも応募してみます。

タイトルの通り、Wikipedia の記事にレファレンス協同データベースでの検索結果を表示する Greasemonkey スクリプトです。

このスクリプトをインストールして、たとえば「ヴァイオリン」の記事を見てみると、下のほうがこんなことになります。

CiNii のときみたいに Google の検索結果に表示しようかとも思ったんだけど、ちょっと検索に時間かかるし、Wikipedia のほうが親和性が高そうだったので Wikipedia で。ちょこちょこおもしろそうな事例がひっかかって良い感じ。記事執筆にも役立つかもしれません。

Firefox 3.6.10 + Greasemonkey 0.8.20100408.6 で動作確認。

それにしても jQuery なしの DOM 操作はめんどくさいな・・・。

追記 (2010/09/27)

何箇所か(というかコピペしたとこ以外全部・・・)「レファレンス共同データベース」と書いてましたが、正しくは「レファレンス協同データベース」でしたので修正しました。失礼しました。

サクっと配達状況確認 アップデート (1.1)

iPhone / iPod touch 向け荷物配達状況確認フロントエンド「サクっと配達状況確認」をちょっとだけアップデートしました。

追加した機能は配達業者および問い合わせ番号の保存。一度問い合わせを行ったら、次に表示したときに、前に入力した情報を表示します。毎回コピペしなくていいので、便利ですよ。

また、これに関連して、入力した情報(と保存している情報)をクリアするボタンも追加しました。

なお、保存にはCookieなどでなくlocalStorageを利用しています。私が問い合わせ番号等を知ることはありません。

ちなみに今回、iPhone 4 用にアイコン変えようと思ったものの、元となる素材の解像度が足らず断念。自分で描く技術ないし。どうしよう。

それにしてもこのブログ、もはやリリース情報だけになりつつあるなあ・・・。

Harmonograph.js アップデート (1.2)

4ヶ月振りの更新です。twitterあるとほんとにブログ書かないな、私。

JavaScriptによるハーモノグラフ・シミュレータ「Harmonograph.js」をちょっとアップデートしました。

今回追加した主な機能は「パラメータのランダム設定」。

新たに「Physical parameters / 物理パラメータ」のあたりにできた「Randomize / ランダム」ボタンをクリックすると、音程・抵抗・振幅比がランダムな値に設定され、まともな音程とはひと味違う、複雑な図形が楽しめます。

下が、この機能で作図した例

パラメータの意味がわからなくても「Randomize / ランダム」と「Draw」を交互にクリックしてみてください。

なお、(パーマリンク以外で)Harmonograph.jsにアクセスしたときにも、これと同じ処理をしていますので、アクセスするたびに、違うハーモノグラフを楽しめます。

ハーモノグラフにはもうだいぶ思い入れがあるので、今後もいろいろやろうと考えてます。

その他の変更

  • 「ハーモノグラフの種類」の初期設定を回転ハーモノグラフに。直交だとランダムにしても地味なので・・・。
  • 「ギャラリー」の読み込みを非同期に。ページの読み込みを高速化するために、ギャラリーはあとで読み込むことにしました。
  • コードの整理

iPhone / iPod touch 向け、はてブ検索Webアプリ「HatebuSearch」をリリース

iPhone / iPod touch から自分のはてなブックマークにアクセスする場合、iPhone / iPod touch 向けのはてブのページでも、公式アプリでも、ブックマークの検索ができず不便なので、 はてブ検索Webアプリ「HatebuSearch」を開発。本日、リリースしました。

HTML5の機能を生かした、速くて軽い動作が売りです。

こちらは紹介動画。

はてなから取ってきたデータは端末に保存するため、一度データを取ってこれば通信なしで検索ができ、素早くブックマークにアクセスできます。

ただし、端末に保存されたブックマークは自動ではアップデートされないので、たまに(時間と通信料が気にならないときに)左上の「更新」をタップして、ブックマークを更新してください。

なお、iPhone以外でもWin版Safari、Chromeでも動作確認してますが、まあ、PC使ってるなら、公式のはてブのページを使えばいいと思います。Androidは持ってないからわからん!

バグや要望等あれば、twitterで @labocho つきでつぶやく、この記事にコメント、 labocho[at]penguinlab.jp 宛にメールなどの方法で伝えていただくと対応できるかもしれません。

iPhone向けサイト、HTML5でのWebアプリ開発については、そのうち記事を書きたいと思ってます。

「サクっと配達状況確認」をリリース

佐川急便/クロネコヤマト/日本郵便の3社の、iPhone / iPod touch 向け荷物配達状況確認フロントエンド「サクっと配達状況確認」をリリースしました。

ネットで買い物すると、届くのが待ち遠しくて、配達状況をよく確認するのですが、毎回、各社のページを検索→重いトップページを開く→入力というのが面倒になってきたので作成しました。

tracking-ss

使い方は見ればわかると思いますが、配達業者を選択して、各社の問い合わせ番号を入力、確認をクリックすれば、各社の確認結果のページへリダイレクトします。ハイフンやスペースが入ってしまっても、自動で除去します。

iPhone / iPod touch のホーム画面に置いとくと便利かもしれません。

今回、ホーム画面用のアイコンは「Flavour Extended: The Ultimate Icon Set For Web Designers – Smashing Magazine」をほぼそのまま利用さしてもらいました。ありがたい。

なお、PCや他のスマートフォンでも使えると思いますが、見た目と動作は保証しません。

PDFへのリンクにアイコンを表示するGreasemonkeyスクリプト

PDFへのリンク、嫌ですよね。非力なマシンで対策(PDF Downloadとか)もなくクリックしてしまった日にゃ、「PDFトラップ」なんて言葉も思い浮かぶってものです。

でも、なぜか、官公庁はPDF大好きだし、それもHTMLへのリンクと同じように並んでたりするからタチが悪い。

そこで、ひと目でPDFへのリンクがわかるようになるGreasemonkeyスクリプトを作成しました。

これを導入して、たとえば、厚生労働省のWebサイトを見てみましょう。

まずはbefore。

つづいてafter。

「緊急情報」に隠されたPDFトラップが白日の下に! アイコンちっちゃく見えるかもしれないけど、実際使ってみると十分なサイズですよ。

処理としては、a要素のhref属性が「.pdf」で終わってたら、アイコンを追加するという簡単なもの。URLが.pdfで終わってない場合は無力です。

ただし、適用範囲がhttp通信のWebページ全部と広すぎるので、場合によって適用範囲を制限してください。

Naxos Music Library にIMSLPの楽譜を検索するアイコンを追加するGreasemonkeyスクリプト

日々愛用の(主に)クラシック音楽配信サービス Naxos Music Library。

音楽を聴きながら楽譜が見れればいいなと思って、パブリックドメインの楽譜を収集・公開しているIMSLPを検索するGreasemonkeyスクリプトを作成した。

こんな感じで表示され、虫眼鏡アイコンをクリックすれば、(運がよければ)IMSLPの作品ページに飛ぶ。

nml2imslp1

中身はかなりおおざっぱで、Naxos Music Library に載っているラテン文字のタイトルを、Googleでsite:imslp.org内を検索するリンクを作成(調名が入ってるとヒットしづらい場合があったので、調名は削除している)。その際に I’m feeling luckey が働くようにリンクを作り、Googleのページを経ずにIMSLPにリダイレクトするようにする。

もちろん、Googleの検索が100%ではないし、I’m feeling luckey の精度も信頼できるものではないが、それでもIMSLPに楽譜があれば、8割くらいヒットすると思う(そしてIMSLPの充実ぶりに驚く。もちろん近現代は少ないけど)。

I’m feeling luckey のリダイレクトが邪魔、という人は、39行目をコメントアウト(行頭に//を書く)、または行ごと削除してしまえば、Googleの検索結果ページへ飛ぶ。

今回、楽しようと思って、jQueryを使った。GreasemonkeyでjQueryが使えると20倍は速くスクリプト書けるね(単に私がJavaScriptのDOM操作に慣れてないからか)。参考というか丸写しにしたのが下記ページ

まあしかし、いつものことながらニッチだなあ・・・。

ホーム > タグ > JavaScript
検索
Author: labocho

@labocho
labocho @penguinlab.jp
Works

運用中のサービスです

twitter
アーカイブ
Tag cloud
検索
フィード
メタ情報

ページの上部に戻る