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