読者です 読者をやめる 読者になる 読者になる

クロスドメインの画像処理

クロスドメイン画像にJSでcanvasのgetImageData()を使ってエラーが出ました。
サーバー側プログラムのrequestっぽところ、responseっぽいところのヘッダーに
「"Access-Control-Allow-Origin" => "*"」をいれてみたけどやっぱり

Uncaught Error: SECURITY_ERR: DOM Exception 18

Security error" code: "1000
がでます。


ググった限りも「出ない」の文字が多いし、
今のところ仮説は「Instagramの画像に再度フィルターする計画頓挫

試してみるのは「サーバー側で処理できるか?


ねます。

Access-Control-Allow-Originメモ

localhostにサーバー立ててテストしていて(WEBrick)
JSでcanvasのメソッドtoDataURL()で別ドメインの画像を加工するときに


chromeでは
Uncaught Error: SECURITY_ERR: DOM Exception 18


Fxでは
Security error" code: "1000



とエラーが出て実行できないみたいです。

であいかわらずAccess-Control-Allow-Originさんが関係してるみたいで、
どうしたらいいのかさっぱりわかりません(・ω・)!

localhostにサーバー立ててテストしたい時
プロの方々はどうしてるんだろう?


サーバーにヘッダ追加するか、
アプリに起動オプション付加のどちらかだと思うのですが。


Windowsは起動オプションでなんとかなったけど
Macの起動オプション付加がshとかためしてもはてなでした……



以下メモ:

Access-Control-Allow-Origin試してみた。 - ミルク色の手紙
404 Blog Not Found:Ajax - Goodbye, JSONP. Hello, Access-Control-Allow-Origin

rubyではまったこと

1. `requie': no such file to load -- example
十中八九パスが通っていません。
RubyやgemをMacportにあるのにバイナリからインストールして
/opt/local/bin/ruby
/usr/local/bin/ruby
とか、
/usr/bin/gem
/usr/local/gem
とかあっちこっちにインストールしてしまい、さらに/usr/local/binを優先するようにするとgem listで今まで入れたのどこいったの(泣)となりました。

解決方法:ユーザーが後からインストールするのは/usr/local/のほうがいいみたいなのでそっちにパスが通るよう統一


2. `requie': no such file to load -- example
い っ し ょ や ん !とつっこみつつも……
Ruby 1.9.2リリース
>$:はカレントディレクトリを含みません
環境変数で$LOAD_PATHに"."(カレントディレクトリ)を設定していないと、
require('./example')は動いてrequire('example')はうごかなくてあれれ?(泣)という事態に。

どういう経緯でこういう仕様になったのかわかりませんが、環境変数に頼らず仕様に合わせてrequire('./example')としたほうがいいのかな。
>LoadErrorが発生する
$:はカレントディレクトリを含まなくなりました。そのためスクリプトは修正を要することがあります。ともあれ、もともとスクリプトはできるだけカレントディレクトリに依存しないように書いた方がよいでしょう。

書いてました。
大事なことはだいたい公式に載ってる!


まだまだ初心者丸出しですね(・ω・)がんばります!

ふぁぼられ数をTwitter web ホームで見るUserScript

twitterの各アカウントのwebホームでその人のふぁぼられ数(favstar調べ)がわかるUserScript書きましたー。
よければお使いください。


インストール:
chrome → リンククリックする。→左下のやつ「続行」→上に出てくるの「インストール」
firefox → greasmonkeyなんちゃら入れてリンククリック。

(2001/09/06修正 : ☆画像の取得方法がよくわからないので固定値にしてみました)
https://gist.github.com/raw/1129263/96e9c1c43c1a6e54f360cea1ee25c52bc2f9e3eb/favster.user.js


ソース:
https://gist.github.com/1129263

macのchromefirefoxでしか動作確認してないので動かなかったら教えて下さい。
いらないなと思ったらすぐ消せるよ!

chromeでXMLHttpRequestするとき

chromeでローカル環境からweb上のデータをXMLHttpRequestで拾いたいなーとおもってやってみたけど

Cross origin requests are only supported for HTTP
とか
Origin http://(ドメイン)/ is not allowed by Access-Control-Allow-Origin.
とか出て困った。

どうやら前者は「ローカルからアクセスしていいのは自分自身だけだぜHAHAHA」ということらしい。
後者は「Access-Control-Allow-Origin」というヘッダをサーバーで仕込まないといけないみたいです。クライアント側(XMLHttpRequest)ではこのヘッダーを付けてもpostしてもダメでした。(jQueryのメソッドでもダメだった)


今回はRubyでcgiを書いて、
クライアントでRubyのcgiにデータのっけてXMLHttpRequestRubyでヘッダセットしてpost → レスポンスをクライアント側に返す
とすればなんとかいけました。

404 Blog Not Found:Ajax - Goodbye, JSONP. Hello, Access-Control-Allow-Origin
こうすればいいらしいのですがどう使うのかぼくの今のレベルではワカラナイヨ……



一応Rubyのコード(初めてRubyで実用できるの書いよ!)
tumblrのdashboardの内容が欲しかったのです。

#!ruby

require 'cgi'
require 'net/http'
require 'uri'

cgi = CGI.new
uri = URI.parse('http://www.tumblr.com/api/dashboard')
http = Net::HTTP.new(uri.host, uri.port)
header = {"Access-Control-Allow-Origin" => "*"}
body = "email=#{cgi["email"]}&password=#{cgi["password"]}"
response = http.post(uri.path, body, header)

puts "Content-Type: text/html\n\n"
puts response.body

tumblr api参考
チラシの裏 — Tumblr APIの使い方を勝手に和訳したもの Tumblr,...

これでxmlがとれたので明日はパースして整形してみよう。

chrome & firefoxでUserScriptを作るときに気をつけること

mac版のchrome(13.0.782.107)とfirefox(5.0.1)でUserScriptを書いていて思ったこと。




1.addEventListener()の第三引数(true or false)は必ずつける
firefoxで動作しない


2.DOMのタグ内文字列にはinnerHTMLを使う
→innerTextはfirefoxではただのプロパティ値になってしまう


3.AjaxXMLHttpRequestではなくGM_xmlhttpRequestを使う
firefoxではXMLHttpRequestがクロスドメインで使えない
→また、GM_xmlhttpRequestはsetTimeout(function(){/***/}, 0)で囲わないと
"Greasemonkey access violation: unsafeWindow cannot call GM_xmlhttpRequest."
というエラーがfirefox側に出る。



僕のはまったことのことで、調べた範囲では現状こんな感じだった。
あとwindow.eventが関数またぐとchromeはのこっていてfirefoxは消えたりと謎の動きがあったり。
chromeは乱暴にやってもよしなにしてくれて、firefoxは規則に忠実な印象でした。