iPad の UIWebView で twitter.com を表示したときに出てくるアプリの宣伝広告を出さない方法

iOS　アプリ内で Twitter のタイムラインを表示したり、投稿させたり、 Tweet Button を置きたいみたいな要求は結構あると思うのですが、ここで問題になるのが iPad の UIWebViewで twitter.com を表示したときです。以下の画像のように、 Twitter for iPad をオススメする広告が最初に表示されてしまうのです。



一度 Continue on mobile.twitter.com ボタンを押せば次の画面に遷移して二度と表示されなくなるのですが、大抵のお客さんはこの画面を見た瞬間意味不明になってしまうと思うので、表示されないようにしなければなりません。

最初に思いついた方法は以下の



http://mobile.twitter.com/settings/dismiss?d=2

このリンクを　NSHTTPConnection なんかで踏ませればいいんじゃないかと思っていたのですが、調査してみた結果もっと簡単に何とかできることがわかりました。このアプリの宣伝広告を消すのに一番簡単な方法は、以下のように Cookie をセットしてやることです。

// mobile.twitter.comにUIWebViewからアクセスしたときに、"Get Twitter for iPad NOW"とかなんとか表示されるのを防ぐため、
// UIWebViewが使うcookieにd=2をセットしておく
// NSHTTPCookieExpiresはセットしなくても大丈夫です（その場合起動ごとにCookieがけされてしまうので、起動時に毎回セットしてください）
NSHTTPCookie *twitterForIPadAdBlockCookie = [NSHTTPCookie cookieWithProperties:[NSDictionary dictionaryWithObjectsAndKeys:
                                                                                @"d", NSHTTPCookieName,
                                                                                @"2", NSHTTPCookieValue,
                                                                                @".twitter.com", NSHTTPCookieDomain,
                                                                                @"/", NSHTTPCookiePath,
                                                                                [NSDate distantFuture], NSHTTPCookieExpires,
                                                                                nil]];
[[NSHTTPCookieStorage sharedHTTPCookieStorage] setCookie:twitterForIPadAdBlockCookie];

これだけでご覧の通り！嘘のように広告が出なくなります。




■おまけ: javascript:スキームを使ってみよう

今回のように UIWebView をアプリ内で使って特定のWebアプリを表示する場合にWebアプリの挙動が知りたくなったときは、iPadのSafariブラウザから javascript: スキームを使って JavaScript のコードを流し込んでデバッグするとなかなかはかどると言うことがわかりました。たとえばクッキーを表示させてやるだけなら、以下のように超簡単にできます:

javascript:alert(document.cookie);

クッキーを流し込むのも、流し込むだけならこれまた簡単:

javascript:document.cookie="foo=bar";

より詳細な調査はPC側のブラウザでゆっくりやって、最後にちょっとだけ試したいところを実機でやってみることができるのがいい感じです。多分この用途のためのブラウザアプリなんかも App Store をあされば出てくると思うので、そういうのを使えばさらにはかどると思います。

Google Code Prettify のテスト

■Python（自動判別）

abesi='abesi'
hidebu=3
print abesi+hidebu
def tawaba(n=0):
  result = 0
  for i in range(n):
    result = result + i
  return result

きちんと自動判別してくれているみたいです

■Python（言語指定）

abesi='abesi'
hidebu=3
print abesi+hidebu
def tawaba(n=0):
  result = 0
  for i in range(n):
    result = result + i
  return result

lang-pyを指定してみました

■Objective-C（自動判別）

NSString *abesi = @"abesi";
int hidebu = 3;
NSLog(@"%@%d", abesi, hidebu);
@synthesize anProperty;
#pragma mark -
#pragma mark Functions
int tawaba(int n) {
  int result = 0;
  for (int i=0; i<n; i++) {
    result += i;
  }
  return result;
}

こちらも判別に成功。

■JavaScript（自動判別）

var abesi = 'abesi';
var hidebu = 3;
console.log("%s%d", abesi, hidebu);
// 日本語コメントのテスト
/**
 * 日本語コメントのテスト
 */
function tawaba(n) {
  var result = 0;
  for (var i=0; i<n; i++) {
    result += i;
  }
  return result;
}

日本語コメントのテストなど。

いまいち配色が気に入りませんが、svnのtrunkに直リンクしていてこちらでは修正できないのでまぁ仕方ないかなと思います。それからActionScript3に未対応なのがかなり不満です。外部CSSとJavaScriptが増えて重くなるしonloadのタイミングで実行しなくちゃいけないし・・・Googleらしからぬイマイチさ。

Highcharts.js を使ってみた

最近IDEA*IDEAさんで取り上げられていたHighcharts.jsを試してみましたので、躓いた点などをメモしておきます。


■公式サイト
http://www.highcharts.com/
ダウンロード、更新履歴はこちらから見られます。ライセンスもこちらに記載があります。
個人利用、教育目的の利用、および非営利組織での利用については無料ですが、商用利用の際にはライセンスの購入（1サイト$80、複数サイト$360）が必要になるので注意です。


■公式リファレンス
http://www.highcharts.com/ref/
おそらく全部JSで実装されているのだと思いますが、凄いクオリティ高いです・・・


■実際に導入してみて躓いたポイント
以下、すべてバージョン1.0.2（2009/12/09）での気づきです。

グラフを描画する領域のサイズは、CSSでは定義できない、直接style属性に書く必要がある

たとえばCSSを使って、

<style>#chart_area {width:800px; height:400px;}</style>
<div id="chart_area" ></div>

のようにしても描画時に無視され、高さが0になります。必ず直接style属性を用いて

<div id="chart_area" style="width:800px; height:400px;"></div>

のように書く必要があります。

Zoom機能を使う際、画面のスクロールが発生すると選択領域がバグる

Mac OS X 10.6上のFirefox3.5.6とSafari4.0.4にて再現。他のブラウザは未チェックです。論より証拠、こちらのページを開いて、少し画面全体を下にスクロールしてから、チャートを縦にドラッグしてY軸ズームしようとしてみてください。まぁ、ひどいバグなのですぐに直るとは思いますが。

seriesに与えるデータは、必ずX軸方向の昇順にソートされている必要がある

特にxAxisにdatetimeを指定しているときが危険です。たとえばこのようなデータはNGです。

series: [{
        name: 'Plague Rider',
        data: [[Date.UTC(2009, 12, 4), 57.4],
        [Date.UTC(2009, 12, 3), 57.6],
        [Date.UTC(2009, 12, 2), 59.1]]
}]

かならずこのようにソートしなければなりません。

series: [{
        name: 'Plague Rider',
        data: [[Date.UTC(2009, 12, 2), 59.1],
        [Date.UTC(2009, 12, 3), 57.6],
        [Date.UTC(2009, 12, 4), 57.4]]
}]

ソートされていないと、チャートにマウスカーソルを合わせてもラベルが表示されなくなります。気づきにくいバグでした。

seriesに与えるデータにnullがあると、0として扱われる

そのため、たとえば12月1日は100、12月2日は110、12月3日はデータが分からないのでnull・・・とすると、12月3日のところだけいきなり0になってグラフが滅茶苦茶になります。回避方法としてはxAxisのtypeをdatetimeにするか、yAxisのminを自分で計算して指定してください。

xAxisのtypeがdatetimeのとき、連続していないデータがあるとsplineは使用できない（lineは使用できる）

原因は不明です。たぶんバグじゃないだろうかと思ってますが、公式のxAxisのtypeがdatetimeなサンプルを見てもsplineではなくてlineを使っているのでひょっとしたら仕様かもしれません。

■まとめ
公開されたのがつい先月の末ということで、まだちょっとBuggyな感じです。また、エラーメッセージがまともに表示されないため、JSファイルのどこでエラーになっているかはわかっても原因が何か分からないなど、デバッグが結構大変です。しかしながらデザイン美麗で機能豊富、カスタマイズも容易と、一通り優れた点は持ち合わせていると思います。PrototypeやjQueryなど他の外部ライブラリに依存しないのも良い点です。$80なら支払ってもよいのでは？


■Google Charts APIとの比較
やはり気になるのはGoogle Charts APIと比べてどちらが使えるかでしょう。ちょっと調べてみました。ただしGoogle Charts APIについては実際に試したことがないのであくまで公式ページのドキュメントを見て気づいた点のみです。間違っていたらごめんなさい。

Highcharts.jsの優れている点

• 美麗なデザイン
• ズームや特定データの一時消去、ラベル表示など、対話性に優れたUI
• 単体のJSファイルなので外部のサーバに依存しない
• Ajax対応が容易

Google Charts APIの優れている点

• より多数のグラフに対応（レーダーチャートや地図など）
• 商用利用でも完全に無料

表示専用のカレンダーJSが欲しい

日付を選択するためのカレンダーJSはよく見るのですが、表示に特化したものは余り見ないので。たとえばこんな感じでjQueryのプラグインみたいに使えるカレンダーが欲しいのです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Calendar object test</title>
<script type="text/javascript" src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript" >
    $(function(){
        // add a new text and set its style
        $("calendar")
        .from(2009, 10, 30)
        .to(2009, 10, 31)
        .text("Halloween")
        .color("#ffcccc")
        .style("bold")
        .backgroundcolor("#ffddcc");
    });

    // calendar event handling
    // use customized Event object which has "day" and "from, to" attr
    $("calendar").click(function(e){
        day = e.day
        this.day(day).text("clicked")
    });
    $("calendar").select(function(e){
        from = e.from
        to = e.to
        this.from(from).to(to).text("selected")
    });
</script>
</head>
<body>
    <div id="calendar">Calendar will be shown here</div>
</body>
</html>

どうでしょ？探せばあると思うのですが・・・

vim javascript indent plugin syntax

javascript用のvimプラグインがたくさんあって探してもこれといったまとめがなかったので探した範囲でまとめました。タイトルが釣りっぽいです。ごめんなさい。


■syntax
JavaScript syntax : Better JavaScrirpt syntax support
http://www.vim.org/scripts/script.php?script_id=1491

悪くはないです。ただし中身を見た感じFirefox + Dojoで使うことを想定されているようで、jQueryとかでprototype.jsでハイライトして欲しいオブジェクトがなかったりします。気に入らなければ適当に改造するのがよいと思います。それに、所詮syntaxですから無くてもあんまり困りません。


■indent
よさげなのが2つあります。まず一つ目、Ryan Fabellaさん作。スタンドアロンで動くもの。
OOP javascript indentation : This indentation script for OOP javascript (especially for EXTJS)
http://www.vim.org/scripts/script.php?script_id=1936
especially for EXTJSとか書かれてますがjQueryでも全く問題ないです。快適。

実際にインデントしてみた結果はこんな感じです。




//でコメントアウトすると完全にレイアウトが壊れてしまいます。/**/を使えば問題ないようです。


二つ目、Tye Zdrojewskiさん作。別にプラグインが必要になるもの。
http://www.vim.org/scripts/script.php?script_id=1840
会社のマシンにはこちらを入れています。実際にインデントしてみた結果はこちら。





こちらは//だと問題ありませんが、/**/だと崩れてしまいます。あと、$(function(){hogehoge...});を綺麗にインデントできていません。


どちらも一長一短なので、どちらを使うかは好みの問題ですね。


■plugin
IndentAnything : Write indentations or enhance existing indentations without writing code
http://www.vim.org/scripts/script.php?script_id=1839

Tye Zdrojewskiさんのjavascript indentを動かすために必要です。なんか勝手にIndentAnything_htmlなんていうindentが付属で付いてきますので、既にhtmlのインデントを持っている人は注意です（IndentAnything_htmlはおまけなので入れなくても大丈夫だと思います）。

canvasとJavaScriptでゲームなど(2) タイトルつけてみました

http://akisuesandbox.appspot.com/games/zzz
（前回とパスが変わってます、注意）

前回のゲームに悪のりしてタイトルをつけてみました。

ついでにソースコードも公開してみました。まぁ、JavaScriptなので意図しようとも意図すまいとも自動的にオープンソースになってしまいますけれども、一応ｗ
http://github.com/akisute/gae_akisutesandbox/tree/master

---

以下、余談。

ゲームの画面を制御するにはループと入力受付を制御しなくてはならないのですが、
JavaScriptを用いると、
ループの制御はsetIntevalとclearInterval
入力受付の制御はhogehoge.onmousemoveとかhogehoge.onmousedownに適切なファンクションをセットする
ことで制御が出来るので比較的簡単な気がします。

すごーく昔にDirectXでプログラムを作ったときに
このあたりの制御をするのが余りにも面倒で（といいますか手続き型のプログラミングが面倒で）嫌になって辞めてしまった記憶があります。

最近のゲーム開発環境はどうなんでしょう。特にiPhoneのゲーム開発フレームワークとか大いに気になります。

canvasとJavaScriptでゲームなど

http://akisuesandbox.appspot.com/welcome/zzz

こんなの作ってました。中身は無いに等しいです。

---

以下駄文。

canvasとJavaScriptは思っていたよりは高速に動作しますが、やはりFlashに比べると遅いです。
ですが２Dグラフィックスの勉強にはcanvas + JavaScriptのほうがFlashより向いていると思います。Flashはかじった程度ですが、２Dグラフィックス（線引いたり四角描いたり）というよりはオブジェクトとアニメーションの制御が中心のような印象を受けました。

Firebugのconsole APIを使ってLoggerもどきを作ってみた

突然ですが、Firebugのconsole APIは凄く便利です。

console.log("abesi");
console.debug("object:%o, decimal:%d, float:%f", anObject, count, Math.PI);

問題はこれ、Firebugがインストールされていて、かつコンソールが有効になっているとき以外は
エラーになってしまいます。
（consoleというオブジェクトがないから）
これをなんとかしたい。
それからついでに、せっかくlog, debug, info, warn, errorと5つも種類があるので、ログレベル制御もしてみたい。

ということで思い立ったが吉日、車輪の再発明をしようということで、ちょっとLoggerもどきを書いてみました。
http://gist.github.com/79018

使い方はこんな感じです。

    //Get logger
    var logger = new Logger(Logger.LEVEL_DEBUG);

    logger.debug($("abesi"));
    logger.info(hidebu);
    logger.warn("tawaba=%d", 100);

ログレベル制御をしているので、ログレベルをInfoにするとdebugログが出なくなる・・・はずです。
JavaScriptのprototypeなんて触ったのは実は人生初なので問題点が多々あるかと思いますが、まぁ、せっかくですから、どうぞお使いください。