メモ: javascrpt で qrcode 生成

jquery.qrcode.js

http://jeromeetienne.github.com/jquery-qrcode/

QR Code Generator

http://www.d-project.com/qrcode/index.html

chrome devtool に定規が付いた！

iOS6 の safari の ajax POST のキャッシュを検証

iOS 6 Safari caches AJAX POST requests — Daniel15

上の記事などで、iOS6 の safari は ajax の POST リクエストをキャッシュしているという話を読んだので検証してみました。

まずは、以下のようなランダムな色を生成する API を作成。

view plainprint?

1. <?php  
2. echo 'hsl(' . rand(0, 360) . ',' . rand(0, 100) . '%, 50%)';  

<?php
echo 'hsl(' . rand(0, 360) . ',' . rand(0, 100) . '%, 50%)';

上の API を、$.get と $.post で取得してみて、
返ってきた色を並べるデモページを作成。

デモページ

結果

確かに、iOS6 の safari は ajax の post をキャッシュしているようでした。
しかも、なぜか、GET リクエストのキャッシュよりも強いポリシーで POST リクエストをキャッシュしている模様。

ちなみに、http ヘッダーで Cache-Control: no-cache を指定すれば、普通にキャッシュしなくなるようでした。

デモページ

その他, 細かい事:
- 全く同じ ajax POST リクエストをし続ける限り、ページをリロードしてもキャッシュを使い続ける。
- GET リクエストが挟まると、POST のキャッシュがリセットされる。(上のデモで POST → GET → POST とやるとキャッシュが使われない)


ということで、とりあえず、POST で叩かれる可能性のある API で、iOS6 の safari をサポートする必要がある場合には、Cache-Control ヘッダーを入れるのがほぼ必須かと思いました。

参考: iOS6 Safari Caching $.ajax Results - Stack Overflow

DIY checkip

確認君とか、checkip.dyndns.com みたいなのを何となく自作。

view plainprint?

1. #! /usr/bin/env python  
2.   
3. import os  
4. print 'content-type:text/plain;'  
5. print  
6. print 'Your IP address is:', os.environ['REMOTE_ADDR']  

#! /usr/bin/env python

import os
print 'content-type:text/plain;'
print
print 'Your IP address is:', os.environ['REMOTE_ADDR']

view plainprint?

1. $ curl http://checkip.kt3k.com/  
2. Your IP address is: 59.106.13.209  

$ curl http://checkip.kt3k.com/
Your IP address is: 59.106.13.209

Google +1 ボタンがふわ〜っと出て来て、Google+ でシェアも出来る Bookmarklet

Google +1 ボタンがふわ〜っと出て来て、Google+ でシェアも出来る Bookmarkletを作りました。

見た目的にはこんな感じのが、画面左からひゅーっと出てきます。( Chrome, Firefox 対応 )

Add +1 ← これをブックマークバーに追加 (ドラッグ & ドロップ )


+1 ボタン上にマウスオーバーで、Google+ でシェアするためのツール
チップみたいなものが出てきて、そのまま画面内から Google+ に投稿できます。(要ログイン)


ソースコード

やっている事を大雑把に解説すると、
まず、画面外で div を作って、その中に +1 button のソースコードを書いたものを設置しています。そして、+1 の解釈用 JavaScript を dom 内に取り込んで、+1 ボタンをレンダリングしつつ、div のポジションを画面内に設定して、CSS3 transition をトリガーして、div を画面内にスライドさせています。

2012年1月18日でも wikipedia 英語版を見れるようにするブックマークレット

特に政治的な意味はありませんが、
2012年1月18日でも wikipedia 英語版を見れるように
するブックマークレットを作りました。


これをブックマークに保存！

上のブックマークレットをブックマークに登録した後に、
en.wikipedia ページで上のブックマークレットを実行すると、
元の記事ページが見れます。


ソースコード

view plainprint?

1. (function() {  
2.   
3. var ol = document.getElementById("mw-sopaOverlay");  
4. ol.parentElement.removeChild(ol);  
5.   
6. var list = document.body.children;  
7. for (var i = 0; i < list.length; i ++) {  
8.     var dom = list[i];  
9.     if (dom.tagName === "DIV" || dom.tagName === "div") {  
10.         dom.style.display = "block";  
11.     }  
12. }  
13.   
14. })();  

(function() {

var ol = document.getElementById("mw-sopaOverlay");
ol.parentElement.removeChild(ol);

var list = document.body.children;
for (var i = 0; i < list.length; i ++) {
    var dom = list[i];
    if (dom.tagName === "DIV" || dom.tagName === "div") {
        dom.style.display = "block";
    }
}

})();

やっていることとしては、まず、id="mw-sopaOverlay" の div を削除してから、body 直下の div の display が none になっているので、それを全部 block に戻しています。