javascriptの最近のブログ記事

　具体的には、twitter公式短縮URLサービス、bitlyさんのAPIなんだけど。
このAPIを使うためには、bitlyにユーザー登録して、APIキーというのを取得します。で、そのユーザー名とAPIキーがあれば、

http://api.bit.ly/shorten?version=2.0.1&login=[ユーザー名]&apiKey=[API Key]&longUrl=［目的のURL］

というようなURLにアクセスすることで短縮URLを生成することが出来ます。

問題なのは、このAPIキーをJavaScriptでも使うことが想定されていることで。

JavaScriptで使うということは、ブラウザでソースを見たらユーザー名もAPIキーも丸わかりなのに、堂々と使っている方が結構おられます。

悪用シナリオ１

　被害者Aさんが、JavaScriptでbitlyAPIを使ったWEBページを開設していたとします。
スパム業者がやってきて、Aさんのページからユーザー名とAPIキーを拾います。
スパム業者は、このユーザー名とAPIキーを使ってスパムページへの短縮URLを生成して、スパムメールに貼り付けて送信しました。
数日すると、このURLはスパムメールであるという通報がbitlyに届くので、該当の短縮URLは凍結されます。
ついでに、スパム生成に使われたAさんのアカウントも凍結される可能性が高いですよね。悪くすると、Aさんはスパムメールの送信者と疑われてしまうかも知れません。

悪用シナリオ２

悪意のある第三者Bが、Aさんのページからユーザー名とAPIキーを拾います。
Bは、Aさんのユーザー名とAPIキーを使ってアダルトサイトの短縮URLを生成しました。
Bさんはこういう風に公表します。「あれ？Aさんこんなページも見てるんだぁ！やーい、エッチエッチ！」
Aさんにとって身に覚えのない話ではありますが、自分の生成履歴にある以上、なかなか説明の難しい立場に追い込まれてしまいました。

対策

　本来ならば、bitlyがAPIキーの仕様を変えて、登録されたドメイン以外からアクセスがあったらはじいてしまうようになっているべきだと思います。
googleMapsとかはそうなっています。

でも、公式フォーラムに出ている指摘を見ると、「そんなのいいじゃない、気になるならJavaScript以外から使えば？」と思う人もいらっしゃるみたいです。


上記のようなシナリオは困るよね、と思う方は、bit.lyのAPIをJavaScriptから直接使うのではなくて、PHPやRubyなどのサーバ側で動作する言語から使うことをオススメします。

[PHP]bitlyのAPIKeyを遮蔽する方法まとめ-RinGoonPOP!!

今ちょっと変わったサイトを開発中です。 開発中に「1280×1024のブラウザで見ると様子がおかしい」というレポートをいただいて。

そういえばあまりそういうテストをしていなかったな、と思って、ブラウザのサイズを自在に変える仕組みというのを作ってみました。

• ボタンを押すとブラウザのサイズが変わります。
• IE7だと、複数タブを開いた状態では上記動作が利かないみたいです。最初にこのページを開いてブラウザサイズを変えてから所望のサイトに移動するのがいいみたい。
• ウィンドウを指定したサイズに変更するを参考にしました

　ブックマークレットというのがあって、 ブラウザのブックマーク(お気に入り)に登録しておくと、色々便利な機能を使うことが出来ます。
特に多いのが、選択した文字列をWikipedia/英和辞典/和英辞典などで検索するというもの。ところが、インターネットエクスプローラー用です、FireFox用です、と分けてあったり、そもそもFireFoxでしか動かない物が多かったりするのですよね。

Google英語検索ブックマークレットは、インターネットエクスプローラーと、FireFoxと、ChromeとSafariで動作確認してあります。あ。Operaも。

ということで、インターネットエクスプローラーと、FireFoxと、ChromeとSafari(Operaも)で動く、選択した文字列に対して～するブックマークレットを作る方法まとめです。

IEで選択文字列を取得

「document.selection.createRange().text」。IE以外では全く動かない。

FireFoxで選択した文字列を取得

window.getSelection。document.getSelectionだと、Chromeやsafariで動かない。

Chrome/Safariで選択した文字列を取得

window.getSelectionでうごく。ただし、to_stringが微妙らしく、そのまま文字列として扱うことが出来ないので、「window.getSelection()+""」としておくと文字列として取得することが出来る。これは、FireFoxやOperaでも動作する。

IEとそれ以外の分岐

if(navigator.appName=="Microsoft Internet Explorer") がまっとうだけど、長いのでdocument.allが定義されているかどうかで代用。

ここまでをまとめると

「var q=(document.all)?document.selection.createRange().text:(window.getSelection()+'');」

文字列を選択していない時

「if(!q){void(q=prompt('keyword:',''))}; 」としておくと、文字列を選択していない時は入力を促すことが出来て親切。

おまけ

URLを移動させる場合、window.location.hrefにURLを入れる人が多いけれど、これもChromeで動かない。location.hrefなら共通で動く。 動作確認環境は以下の通り。

• InternetExplorer7.0.5730.13
• FireFox3.08
• GoogleChrome1.0.154.53
• Safari3.2.2
• Opera/9.60

ブックマークレットを作る時は、参考にしていただけると嬉しいです。

webteko 第五回に行ってきました。会を重ねて、なんだか安定感が出てきましたね。

今回は、「JavaScript入門 ～なぜCSSにclassとidがあるのか～」というお話をさせていただきました。


HTMLを書く人向けに、JavaScriptを書く人の事情を知っておいていただくと、ちょっと幸せになれるよ、というようなお話です。

プレゼン中で紹介した二つのサンプルはこちらです。

• 小さい"つ"が消えるマシーンJavaScriptバージョン
• メールアドレスのミスを指摘してくれる入力フォーム

＃この記事は、[javascript]Re:入力ミスを減らすメールアドレス入力フォームの作り方 - もぎゃろぐで紹介したものをまとめ直したものです。

お問い合わせフォームとかイベントの申し込みなどで、ユーザーさんにメールアドレスを入力していただく場面はたくさんあると思うのですが、ユーザーさんは結構な頻度で入力ミスをします。
で、その間違いをその場で指摘できたら、入力ミスが減るんじゃないかということで、ありがちな間違いを指摘してくれるライブラリというのを作りました。

試してみる

---

メールアドレス：

mogya@example.co.jpではないですか？mogya@example.cojpと入力されています。

---

"mogya@example.cojp"(ドットが一個抜けた)とか、"mogya@example.co"(.comのmが抜けた)とか、"mogya@gmai.com"(gmail?)などを入力してみてください。入力欄を抜けた時点で指摘が表示されます。

ダウンロード

checkEmail.js

使い方

　普通のメールアドレス入力欄はこんなタグで出来ているかと思います。

メールアドレス: <input type="text" name="email"/>

これをこういうふうに変えてください。

メールアドレス <input type="text" name="email" id="email_input"/>
<p class="warn" id="mail_error_msg"></p>

つまり、

• メールアドレス入力欄のinputタグのidを"email_input"にする
• 警告メッセージを表示できるように、"mail_error_msg"というidのpタグを用意する

あとは、タグの中で、

<script type="text/javascript" charset="UTF-8" src="checkmailaddress.js}"></script>

という具合にライブラリを読み込んであげれば、ライブラリが入力フォームにイベントを設定して、入力されたメールアドレスのチェックを行います。

ライセンス

このライブラリは、パブリックドメインに寄付してしまいます。使いたい人は自由に使ってくださいませ。著作権表示もリンクも不要です。