Pitfall of using gradle-cobertura-plugin in Travis-CI

(This post will soon be obsolete.)

In Travis-CI, oracle jdk version is 1.7 and gradle version is 1.6. That's ok. But using with gradle-cobertura-plugin, there is a problem.

gradle-cobertura-plugin 1.x only works with java 1.6 and below, so it doesn't work in Travis-CI because its oracle jdk is 1.7.

gradle-cobertura-plugin 2.x only works with gradle 1.7 and above, so it doesn't work in Travis-CI because its gradle is 1.6.

So if you want to use gradle-cobertura-plugin in Travis-CI, following .travis.yml trick will help:

before_install:
# use Gradle 1.7 
- wget http://services.gradle.org/distributions/gradle-1.7-bin.zip
- unzip gradle-1.7-bin.zip
- export GRADLE_HOME=$PWD/gradle-1.7
- export PATH=$GRADLE_HOME/bin:$PATH

Add above lines to the .travis.yml and the build run with local gradle 1.7. So in this settings gradle-cobertura-plugin 2.x works fine with Travic-CI.

See example at https://github.com/kt3k/straw-android-plugin

Have a good test run!

Cutting out rounded rectangle from canvas in JavaScript

In JavaScript, you can easily cut out rounded rectangle from existing canvas drawings, using the combination of the two technics; drawing a rounded rectangle and globalCompositionOperation = 'destination-in'.

First, you draw anything you want on any position of the canvas, then set the canvas context's globalCompositionOperation property to 'destination-in' and then fill rounded rectangle using above technic and you get rounded version of your image :)

The following function cut out rounded rectangle with given left, top, width and height and rounding radius on given canvas context.

var cutRoundedRect = function(ctx, radius, x, y, w, h) {
    var left = x;
    var top = y;
    var right = x + w;
    var bottom = y + h;

    ctx.globalCompositeOperation = 'destination-in';
    ctx.fillStyle = 'black';

    ctx.beginPath();
    ctx.moveTo(left + radius, top);
    ctx.lineTo(right - radius, top);
    ctx.quadraticCurveTo(right, top, right, top + radius);
    ctx.lineTo(right, bottom - radius);
    ctx.quadraticCurveTo(right, bottom, right - radius, bottom);
    ctx.lineTo(left + radius, bottom);
    ctx.quadraticCurveTo(left, bottom, left, bottom - radius);
    ctx.lineTo(left, top + radius);
    ctx.quadraticCurveTo(left, top, left + radius, top);
    ctx.fill();
};

d3.js のスライド

About d3.js っていうスライドを作りました。
http://kt3k.github.com/d3intro/

JavaScript の data visualization library d3.js の紹介です。

new and not new

x() instanceof x と new x() instanceof x を同時に満たすような x の作り方。

var x = (function () {
    var constructor = function (args) {
        /* constructor */
    };

    /* other definitions */

    var exports = function (args) {
        return new constructor(args);
    };

    constructor.prototype.constructor = exports;
    exports.prototype = constructor.prototype;

    return exports;
}());

とやると、x() instanceof x && new x() instanceof x となる。

jQuery も似たような事やってる。https://github.com/jquery/jquery/blob/master/src/core.js

メモ: 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 を作成。

<?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 みたいなのを何となく自作。

#! /usr/bin/env python

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

$ 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 ページで上のブックマークレットを実行すると、
元の記事ページが見れます。


ソースコード

(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 に戻しています。

jQuery UI Datepicker で、日本語表記にする設定例

$('#datePicker').datepicker( "option", {
    dayNamesMin: ['日', '月', '火', '水', '木', '金', '土'],
    monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    showMonthAfterYear: true,
    yearSuffix: '年'
});

さくらのレンタルサーバに git をインストールする方法 version 2011/11/28

課題

さくらのレンタルサーバに git をインストールする。

環境

さくらのレンタルサーバ スタンダード

インストール方法

$ #create git install directory($HOME/usr/local)
$ cd
$ mkdir $HOME/usr
$ mkdir $HOME/usr/local

$ #create git source directory
$ cd
$ mkdir $HOME/src
$ mkdir $HOME/src/git

$ cd $HOME/src/git
$ wget 'http://git-core.googlecode.com/files/git-1.7.7.4.tar.gz'
$ tar xzf git-1.7.7.4.tar.gz
$ cd git-1.7.7.4
$ ./configure --prefix=$HOME/usr/local
$ gmake prefix=$HOME/usr/local
$ gmake prefix=$HOME/usr/local install
$ export PATH=$HOME/usr/local/bin:$PATH

$ git version
git version 1.7.7.4

参考

さくらのレンタルサーバにgitをインストールする方法(public static void main)

さくらのレンサバで codeigniter

さくらのレンサバで codeigniter を使いたいときの
.htaccess の書き方メモ。

CI-2 系だと公式のおすすめ .htaccess は

RewriteEngine on
RewriteCond $1 !^(index\.php|images|robots\.txt)
RewriteRule ^(.*)$ /index.php/$1 [L]

となっていますが、これだとさくらのレンサバでは動きません。

ポイントとしては、まず、RewriteBase /my_dir/ というディレクティブがいる事。(これをやればまずはリライト自体は動く。)

もう一つは RewriteRule の index.php の後に ? がいる事。(これをやらないと CI の index.php へわたる引数がおかしくなるらしく、何も動きません。)

まとめると、

RewriteEngine on 
RewriteBase /my_dir/
RewriteCond $1 !^(index\.php|images|robots\.txt)
RewriteRule ^(.*)$ index.php?/$1 [L]

(codeigniter のバージョンは 2.0.3)

URL を QR コードに変換する Bookmarklet + CSS3 animation.

今開いているページの URL を QR コードに変換したものを
そのページ内に画像として挿入するブックマークレットを作成しました。
挿入時のアニメーションに CSS3 を使っています。
chrome 14.0.835.186, firefox 6.0.2, safari 5.1 で動作確認。
ブックマークバーなんかに登録して使うと使いやすいかと思います。

QR! <- これをブックマークに登録

(function(){
  var size=150;
  var t0=50;
  var t1=32;
  var img=document.createElement('img');
  img.src='http://chart.apis.google.com/chart?cht=qr&chs='+size+'x'+size+'&choe=UTF-8&chld=H&chl='+encodeURIComponent(location.href);
  var s=img.style;
  s.opacity=0;
  s.position='absolute';
  s.top=''+(pageYOffset+t1)+'px';
  s.left=''+(-t0)+'px';
  s.zIndex=9999;
  s.boxShadow='1px 1px 5px black';
  s.borderRadius='0 15px 15px 0';
  s.webkitTransition='0.3s linear';
  s.MozTransition='0.3s linear';
  img.onclick=function(){
    s.opacity=0;
    s.left=''+(-t0)+'px';
    setTimeout(function(){
      document.body.removeChild(img);
    },1000);
  };
  document.body.appendChild(img);
  setTimeout(function(){
    s.left='0px';
    s.opacity=0.9;
  },30);
})();

やっている事としては、<img /> タグの dom を作って、
src に google chart api の
QR の api のアドレスを代入して、まず画像を作ります。
それのスタイルをいろいろ設定した後、
body に appendChild します。
body に append した後で、left と opacity を再度代入する事で、
CSS3 transition が効くので animation して img が出現します。
img の onclick に逆のスタイル変更を設定しおけば、消えるときは逆の
アニメーションで消えていきます。
アニメーションで消えた後、ちょっと間をおいて、
body から removeChild する事で、GC 対象になるように
しています。
size とか t1 変数の値を変更する事で、見た目のサイズとか、出現位置を変更できます。
size = QRコードのサイズ
t1 = 画像の出現位置、画面の上からの距離 (px単位)

SQLite 日本語を含む文字列の長さとバイト数の出し方

文字列としての長さを出したい場合は、単純に length 関数

select length('あいう');
=> 3

エンコーディングされた上でのバイト数を出したい時は、
hex で16進数表記にしてからlength をとって、2 で割る。

select length(hex('あいう')) / 2;
=> 9

HTML5 Web Sql Database に使われている Sqlite のバージョンを調べるワンライナー

openDatabase(1,1,1,1).transaction(function(t){t.executeSql("select sqlite_version()a",[],function(t,r){alert(r.rows.item(0).a);})});

たとえば、Google Chrome 13.0.782.220 m というバージョンだと、Sqlite は 3.7.6.3 というバージョンらしい・・・

Accept-charset in IE

たとえば、API 経由で 何かを POST したいときなんかに、

フォームのあるページの文字コードと、POST の受け側の文字コードが

違うという場合があって、そういう時にそのままPOSTすると、日本語が文字化けする。

そういう時の為の HTML 属性があって、　たとえば、<form charset="utf-8">

とかすると、もとのページの文字コードに関係なく、utf-8 でエンコードしたデータ

を POST することが出来る。

はず、なのだけど、IE だと、なぜか上の指定が効かなかったりする。

web を眺めていると主に 2通りの解決方法が考えられていて、

一つは onclick などで、submit に対して、javascript をフックして、

document.charset = "utf-8";

などとして、ページの文字コードを変換してしまう方法。

もうひとつは、そもそも、accept-charset が無視されるのは、

form の input の中にそのページの文字コードで解釈できない文字がある場合だけだ

という、tips を利用し、ダミーで

<input type="hidden" name="dummyForIE" value="&#65533;">

というようなフォームを用意して、強制的に、accept-charset を解釈させるという方法。

元の文字コードで表示できなくて、POST 先の文字コードでは表示出来る文字がすぐに

分かるのであれば、後者のやり方の方が良さそう。

(上のダミー input は ecu-jp から、utf-8 の場合の例)

bit.ly に icon 画像を保存してみた。

やり方:
まず、PHP が動くサーバーに次のような PHP スクリプトを用意する。(PHP が無ければ、適宜同内容で置き換える。)

<img src="<?php echo $_GET['d']; ?>" />

この PHP を仮に、http://kt3k.org/m.php というアドレスに置いたとする。
こうすると、d に data URI scheme に変換した画像文字列 A を入れれば、A に相当する画像が表示される。
具体的には、
http://kt3k.org/m.php?d=A
にアクセスすれば、A に相当する画像が表示される。
この時、
http://kt3k.org/m.php?d=A
に相当する文字列が、2048 Byte を超えていなければ、bit.ly で短縮する事が出来る。(=bit.ly に画像データを保存している。)

data URI は
http://www.kawa.net/works/js/data-scheme/base64.html
ここなんかで作成可能。

ブラウザに貼付けるときはこのままでいけるけど、
bit.ly で短縮するためには、さらに、urlencode する必要あり。
スクリプト書くのが面倒なときは、
http://urlencode.net/
ここなんかにコピペする。

たとえば、

のような画像を上の方法で URL に変換すると、

http://kt3k.org/m.php?d=data%3Aimage%2Fgif%3Bbase64%2CR0lGODlhKgAuAIYAAAEBAoSEhERERcTDtiUlKLmWkHJdWuPj5FxbUxMTE6Cgnu%2FCukI1NLi1pFRTTHR0dfPz85OSjjMzMyMdHNivqItxbAkJClVFQ9PT1GtqZhsbG7OztNnVvsvLzDMsK6qqrLq6vPz89dvb3AkHCIyLe0xMTCsrK%2Bvr7GRkYxgTFKamqUk9O3x8fZycnZx%2FetzdvwcHCE9APsLCxMSfmFxcXBYWGKOjpDs7PL27qlVVVHh2bvf3%2BJKSlDY2OeO4sZN3cw8PEVxLSGtrbB4eIc%2FP0L6%2BwP39%2FYuLiS0tMe%2Fv8ODcw%2F%2F%2F%2FwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAEsALAAAAAAqAC4AAAj%2BAJdYAECQxZKDCBMqXHiQwIQUIwAwXAJgRIoJDm9M3JjwQpALDAgAscAQCAEGHkFq5DjRQIUfFQysIJCAoYcYLmEaiCGA5UIDLgrMKODCQEiGK4AKJWoUiE%2BEFyoUoOCDQoEKQTwwjDq16tULE1ayJBDkxwwfC3zM%2BBFko1m0atkSIKjBAQkcHJQoedEggwkAE7hStYp1o9TBXyfQLXHEiGPHA3SYsJCCgdKhRS9svMyUQQoAFgjkeEw6gAQLIwjgfBkzhgmOOVsTiBh6tOMQj00nAGAS5cejHH2DFEkQgOjHuB0LmUzQIsaHI3w%2Bh1gcgIYSyB%2FTmFu9%2BlOK3en%2BCsju2IGG8AS%2Fg%2B9uQcN40o5znEevvjqC4u7hK59MI3x9gv1BQBABDuhnxBFHnCdgf6AhZAFJG6GXgAQoQHDCgw%2BecOAR4UGIIYQMFccgABIIgQEGHz7YAQY2zNefBTUJhGGExSVAwA1HdHCAEaDB8CAARpyAgQiTDQTjQR%2FSCAAMGtzAAwYQGEjaARgI8GOKD2400IARYCClfkKiQBCWIC6UgAUwJHCEhl%2FqB8EGZ56J5UQSmEBAjm1%2BeYQJp5E5EQ145inlEQ6QmeVEeEZJmggfqAACm%2FodIaehG3WgHwYfrCjDB17C10EHIxl6KEM5WioCBiuKQGUHKkD66RH%2BBIiaJEMlsNACCJ%2BeAMGuFn4qAoIICjCprBMRIMADnB6gK68QKNuBDEXwsJ2ssy40xA0PgHBAlIo6ZqGQH6AgQQ3UzsjQjQHIsKwR3HorZAslaBBquRM1GUAHbLZr4a4Y8CBsueYupAESQhShK7vsnnDCAQzLcMQNw1I7UQLu2SACtwyfKsKpIAQAMcCjCiwBCxtgsPDGCrUgxA0E1HDmSEBEHLC1ApCcqggTlSABARq4nEACQ5A050ZCZDokzhv1YGfPNWgAYoocGY0ySxIM4XINsTpoAcwcKXvC1BzdWAINOZQAogA0sBAADxwpfADYG2mAwgM8HGEQQg8c8QFMCCC0fTLSLLWQqQwbJORoB3AnpKrbiU8kgwgKAy6DDEcDrpCyFr5t%2BUYmZ47QiSdunpDXX4vOEAakm87Swl9%2FpyrDb6sn%2B%2BWwq35QQAA7

となって、
ちゃんと bit.ly に保存できる。

http://bit.ly/bnoWjm

cannot mount an NTFS-volume in Mac OS X (even using NTFS-3g)

NTFS-3g for Mac というのをインストール
すると Mac でも NTFS の外付け HDD を
読み書きできて非常に便利。
(NTFS は本来は windows 用のファイルシステム)

だけど、あるとき、何らかの事情で、
NTFS の volume を unmount せずに、
USB コネクタぶち抜きしたのを境に
どうも、書き込みが出来なくなった。

システム環境設定の中にある、
NTFS-3g の設定項目を見ていると、
どうも NTFS としてマウントできていないらしい。

検索した結果、HDD ぶち抜きで mount できなく
なるのはたまにある事らしく、
このページの指示に従って、

問題の HDD を
windows に持っていって、
[winボタン] + r
で、ファイル名を指定して実行を起動し、
cmd
と入力して、コマンドプロンプトを開いた後、
d:[Enter]
と入力して(D: ドライブとして認識された場合)、
当該 drive 上に移動した後、

chkdsk /f

コマンドを入力してみると、
いろいろな処理の後、

ファイル システムを修正しました。

というメッセージが表示され、
そのディスクを再度 Mac に移して読み込んでみたところ、
見事に NTFS-3g volume として mount され、
読み書きが可能になった。

そのディスク自体は TSUTAYA で借りた DVD が一週間で
見切れない時に、保存しておくためだけの用途の、外付け
HDD なのだけど、危うく残りの 150G が無駄になるところだった。

/etc/motd

Amazon EC2 で、RightScale 提供の CentOS イメージを
ベースにして、MoE のテスト/開発サーバーを作成中、
どうも、最初のログイン時の welcome メッセージが
しっくりこない。

     ___   _        __   __   ____            __
    / _ \ (_)___ _ / /  / /_ / __/____ ___ _ / /___
   / , _// // _ `// _ \/ __/_\ \ / __// _ `// // -_)
  /_/|_|/_/ \_, //_//_/\__//___/ \__/ \_,_//_/ \__/
           /___/

Welcome to a public Amazon EC2 image brought to you by RightScale!

********************************************************************
********************************************************************
***       Your EC2 Instance is now operational.                  ***
***       All of the configuration has completed.                ***
***       Please check /var/log/install for details.             ***
********************************************************************
********************************************************************

このメッセージは一体どこから出ているのだろうと思って、

~/.bash_profile
~/.bashrc
/etc/bashrc
/etc/profile
/etc/profile.d/*

あたりのファイルを端から見ていったけど、どうも、それらしいところが
見つからない。
読んだ感じだと、/etc/profile が一番最初に呼ばれていそうな感じがしたけど、
/etc/profile の先頭に echo test と書いても、
上のバナーの下に test と表示されてしまう。
その後すこし調べたところ、/etc/motd というのを発見。

Message Of The Day

の略で、その日のお知らせをユーザーに知らせるためのファイルらしい。
分かるか。