[HTML][JavaScript]modern.IEって

modern.IEって何っすか？
modern.ieのサイトに行って確認してみると、どうやら、色々なブラウザで試すことができるようです。

前回インストールしたVirtual PCでIE10とかを確認することができるようです。

使える期限は3ヶ月ぐらいしかないそうなのですが、また入れなおせば使えるとのことなので、便利だなーと。

[HTML]IE10での条件付コメントについて

なに！！

相互運用性の向上と HTML5 準拠のため、Internet Explorer 10 の標準モードと Quirks モードでは、条件付きコメントのサポートが削除されました。 これは、条件付きコメントが、その他のブラウザーの場合と同様に、通常のコメントとして扱われることを意味します。

via:条件付きコメントがサポートされなくなった

なんか対応方法として、下の方法が紹介されていたが、それじゃー、根本的な解決になってないと思うんだけど。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

Virtual PCってなんぞや？

「Virtual PC」という言葉を目にした。

そもそも、いったいなんぞや？

Microsoft社が無償で提供している、コンピュータ上に仮想マシン(VM：Virtual Machine)環境を構築するためのソフトウェア。

Virtual PCをインストールすることで、一台のコンピュータ上で仮想的に複数台のコンピュータが動作しているように見せかけることができる。

via:Virtual PC

と書かれている。

なるほど。ということで、windows7環境下でインストール方法を調べてみると、ダウンロードサイトにアクセスしてmsuファイルのダウンロードを行いダブルクリックすればおｋ。

意外にあさっり完了してびっくり。

[iOS][Objective-C][Twitter]ツイートを実装する

View上でツイート画面を表示するにはどうすればいいのだろうか？

答えは、下のようにすればいいようだ。

if([TWTweetComposeViewController canSendTweet]){
  TWTweetComposeViewController *tWTweetComposeViewController = [[TWTweetComposeViewController alloc] init];
  tWTweetComposeViewController.completionHandler = ^(TWTweetComposeViewControllerResult result){
     if (result == TWTweetComposeViewControllerResultDone) {
     }
  };
  [self presentViewController:tWTweetComposeViewController animated:YES completion:NULL];
}

これ、すごく悩んだのが、下のように組んでしまうとtweet画面が表示されないということ。

TWTweetComposeViewController *tWTweetComposeViewController = [[TWTweetComposeViewController alloc] initWithNibName:nil bundle:nil];

TWTweetComposeViewController でツィートを読んでinitでいいんだと知る。

[本]JavaScriptグラフィックス ―ゲーム・スマートフォン・ウェブで使う最新テクニック

読了

JavaScriptグラフィックス ―ゲーム・スマートフォン・ウェブで使う最新テクニック
オライリージャパン

訳者まえがき
まえがき

1章　コードの再利用と最適化
1.1　高速化
1.2　何をいつ最適化するか
1.3　自家製コードプロファイリング
1.4　JavaScriptの最適化
1.4.1　ルックアップテーブル
1.4.2　ビット演算、整数、2進数
1.5　jQueryとDOM操作の最適化
1.5.1　CSSスタイル変更の最適化
1.5.2　DOM挿入の最適化
1.6　その他の情報

2章　 DHTML
2.1　DHTMLスプライトの作成
2.1.1　アニメーション
2.1.2　カプセル化と描画の抽象化（詳細隠蔽）
2.1.3　DOMの挿入と削除を最小化
2.1.4　スプライトのコード
2.1.5　簡単な Spriteアプリ
2.1.6　より動きのあるスプライト
2.2　jQueryプラグインに変換
2.3　タイマー、スピード、フレームレート
2.3.1　setIntervalとsetTimeoutの使用
2.3.2　タイマーの精度
2.3.3　一定スピードの実現
2.3.4　Internet Explorer 6の背景画像キャッシュ

3章　スクロール
3.1　CSSだけを使ったスクロール効果
3.2　JavaScriptを使ったスクロール
3.2.1　背景画像のスクロール
3.2.2　タイルベース画像のスクロール

4章　高度な UI
4.1　HTML5のフォーム
4.2　JavaScriptのUIライブラリ
4.2.1　jQueryUIを用いた Webインタフェース強化
4.2.2　ExtJSを用いた強力なUI
4.3　UI要素の自作
4.3.1　3D回転木馬の作成

5章　 JavaScriptゲーム
5.1　ゲームで使うオブジェクトの概要
5.2　ゲームのコード
5.2.1　ゲーム全体で用いる変数
5.2.2　キーの読み込み
5.2.3　キャラクタの移動
5.2.4　簡単なアニメーション効果
5.2.5　衝突判定
5.2.6　インベーダー
5.2.7　プレイヤー
5.2.8　シールド
5.2.9　UFO
5.2.10　gameオブジェクト
5.2.11　ひとつにまとめる

6章　 HTML5 Canvas
6.1　Canvasのサポート
6.2ビットマップかベクターか？あるいは、その両方か？
6.3　Canvasの制限
6.4　CanvasとSVGの比較
6.5　CanvasとFlashの違い
6.6　Canvasエクスポータ
6.7　Canvasの描画の基本
6.7.1　Canvas要素
6.7.2　描画コンテクスト
6.7.3　矩形の描画
6.7.4　直線と曲線を使ったパスの描画
6.7.5　ビットマップ画像の描画
6.7.6　色、境界線、塗り潰し
6.8　Canvasを使ったアニメーション
6.9　Canvasと再帰的な描画
6.9.1　Canvasによる樹木のページレイアウト
6.10　DHTMLスプライトをCanvasのスプライトに置き換える
6.10.1　CanvasSpriteオブジェクト
6.10.2　他のコード修正
6.11 CanvasとWebSocketを使ったグラフィカルなチャットアプリ
6.11.1　WebSocketの利点
6.11.2　WebSocketのサポートとセキュリティ
6.11.3　チャットアプリ

7章　ベクトル計算
7.1　ベクトルの演算
7.1.1　足し算と引き算
7.1.2　拡大・縮小
7.1.3　正規化
7.1.4　回転
7.1.5　内積
7.2　JavaScriptによるベクトルオブジェクトの作成
7.3　ベクトルを使った大砲シミュレーション
7.3.1　シミュレーション全体で用いる変数
7.3.2　弾丸
7.3.3　大砲
7.3.4　背景
7.3.5　メインループ
7.3.6　ページレイアウト
7.4　ロケットのシミュレーション
7.4.1　ゲームオブジェクト
7.4.2　障害物オブジェクト
7.4.3　ロケットオブジェクト
7.4.4　背景
7.4.5　衝突判定と反作用
7.4.6　ページレイアウト
7.4.7　改良・改造のアイデア

8章　 Google Chart Tools
8.1　制限事項
8.2　グラフ一覧
8.3　画像グラフ
8.3.1　データ形式とグラフ分解能
8.3.2　動的なデータの使用
8.3.3　まとめ
8.4　インタラクティブなグラフ
8.4.1　インタラクティブなグラフのイベント

9章　 jQuery Mobile
9.1　jQuery Mobileの基本
9.2　TilePic：モバイル向けのWebアプリ
9.2.1　TilePicゲームの説明
9.2.2　TilePicゲームのコード
9.3　PhoneGapとは

10章　 PhoneGap
10.1　インストール
10.1.1　JDKのインストール
10.1.2　AndroidSDKのインストール
10.1.3　Eclipseのインストール
10.1.4　ADTのインストール
10.1.5　PhoneGapのインストール
10.2　Eclipseでの PhoneGapプロジェクトの作成
10.2.1　App.javaファイルの変更
10.2.2　AndroidManifest.xmlファイルの変更
10.2.3　簡単な Webアプリを作成してのテスト
10.2.4　TilePicアプリのテスト

付録 A　ソケットサーバのソースコード

付録 B　モバイル版Orbit Assault
B.1　jQuery Mobileによるモバイル対応
B.1.1　タッチによる砲台操作
B.1.2　画面回転の対応
B.1.3　ページレイアウト
B.2　PhoneGapによるネイティブアプリ化

索引

via:目次

ゲームプログラミングよりもパララックス効果の解説に興味があったので、購入したのですが、中身濃！！

一読してもわからないところがあったので、サンプルコードを眺めつつ追わないと結構厳しかったなー。

JavaScript初心者には、きつい内容っすな。

ちなみに、第三章のRetro TheaeterのURLは、http://www.csszengarden.com/202//にありました。

[JavaScript][smartjs]オブジェクトを削除する

smart.jsで一度、作ったオブジェクトを消すにはどうすればいいのだろうか？

smart.ready({},function(S,imgs){
  var stage = new S.Stage("sample");
  var box = new S.Canvas(225,225,imgs.box);
  box.x     = 59;
  box.y     = 95;
  box = stage.addChild(box);
  setTimeout(function(){
    stage.removeChild(box);
  },1000);
});

上のプログラムの例では、1秒後にboxオブジェクトが削除される仕組みになっています。

一度、覚えれば後はラクチンですね。

[Twitter][iOS][Objective-C]followerを取得する

iOS上でtwitter frameworkを使ってログイン者のfollowerを取得するにはどうすればいいだろうか？

TWRequest *tWRequest;
    ACAccount *acAccount;
    NSNumber *cursor = [NSNumber numberWithInteger:-1];
    tWRequest = [[TWRequest alloc] initWithURL:[NSURL URLWithString:@"https://api.twitter.com/1.1/followers/list.json"]
                                               parameters:@{
                                                            @"user_id":[acAccount valueForKeyPath:@"properties.user_id"],
                                                            @"count":@"100",
                                                            @"cursor":[cursor stringValue]
                                                            }
                                            requestMethod:TWRequestMethodGET];
    tWRequest.account = acAccount;
    
    
    dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH,0);
    dispatch_async(queue, ^{
        [tWRequest performRequestWithHandler:^(NSData *responseData, NSHTTPURLResponse *urlResponse, NSError *error){
            if(!error){

                NSDictionary *dictJSON = [NSJSONSerialization JSONObjectWithData:responseData options:NSJSONReadingMutableContainers error:nil];

                cursor = (NSNumber *)[dictJSON objectForKey:@"previous_cursor"];
                NSArray *users = (NSArray *)[dictJSON objectForKey:@"users"];
                dispatch_async(dispatch_get_main_queue(),^{
                    tWRequest = nil;
                });
            }
        }];
    });

こうやってまとめておけば便利かなと。

[iOS][Objective-C]UIActionSheetのボタンを動的に増やす

キャンセルボタンを一番下にして、動的にボタンを追加するにはどうすればいいのだろうか？

UIActionSheet Class Referenceを読むと

- (id)initWithTitle:(NSString *)title delegate:(id < UIActionSheetDelegate >)delegate cancelButtonTitle:(NSString *)cancelButtonTitle destructiveButtonTitle:(NSString *)destructiveButtonTitle otherButtonTitles:(NSString *)otherButtonTitles, ...{

}

となっており、ボタンを追加するには、NSStringで設定しなければならない。

NSArrayに格納されているNSStringを設定するには結構やっかいな問題で、どうすればいいかなーっと思っていたら、stackoverflowのUse NSArray to specify otherButtonTitles?を読むとgoodな答えがあった。

UIActionSheet *alert = [[UIActionSheet alloc] initWithTitle: titleString
delegate: self
cancelButtonTitle: nil
destructiveButtonTitle: nil
otherButtonTitles: nil];

for( NSString *title in titles) {
[alert addButtonWithTitle:title];
}

[alert addButtonWithTitle:cancelString];

alert.cancelButtonIndex = [titles count];

via:Use NSArray to specify otherButtonTitles?

これ上通りに試しましたけど、すんごい便利。

[HTML][JavaScript]templateタグを使う

本日のグノシー経由でHTML で利用可能になった Template タグをちょっと試してみる。

<script>
  jQuery(function($){

    if(!supportsTemplate())return;

    var $template = $('template');
    var content = $template[0].content;
    var clone = content.cloneNode(true);
    clone.querySelector('#foo').textContent = 'say ho';

    var $hoge = $('#hoge');
    $hoge.append($(clone));

    function supportsTemplate() {
      return 'content' in document.createElement('template');
    }

  });
</script>
<div id="hoge"></div>
<template>
  <div id="foo"></div>
</template>

chromeで実行した結果、「say ho」と表示されたが、IE9では何も表示されない。

IE10を試してないので、断定はできないが少なくともIE9までは未対応のようだ。


確かに便利といえば便利だが、underscore.jsのように動的にhtmlの出力を制御することができるのだろうか？

また、毎回、毎回、textContentメソッドを使うのがうざい。

もうちょっと使いやすくならないのだろうか？

[Google App Engine]taskQueueの更新

appcfg.pyを使ってupdateを叩いてもなぜか、taskQueueが更新されず。

なぜかなーっと思ったら、下のように少しコマンドを変更する必要があるようです。

appcfg.py update_queues アプリのディレクトリ/

これを実行したら、ちゃんと反映された。

[JavaScript][smartjs]timeline設定

smart.jsでは、setIntervalの代わりにTimelineオブジェクトが用意されているようです。

//fpsの設定
var timeline = new S.Timeline(30);
timeline.enterframe(function(e){
  //処理を記述する
});
timeline.play();

上の処理をストップさせたい場合は、

timeline.stop();

とすればおｋ

fpsベースの設定なので、滑らかなアニメーションを実装したい場合に便利かなと。

[本]フラット化する世界 増補改訂版 下

ようやく読了

フラット化する世界 [増補改訂版] (下)
トーマス フリードマン

第二部　アメリカとフラット化する世界（承前）
第７章　理想の才能を求めて――教育と競争の問題
第８章　静かな危機――科学教育にひそむ恥ずかしい秘密
第９章　これはテストではない

第三部　発展途上国とフラット化する世界
第10章　メキシコの守護聖人の嘆き

第四部　企業とフラット化する世界
第11章　企業はどう対処しているか

第五部　あなたとフラット化する世界
第12章　ローカルのグローバル化――新しい文化大革命が始まる
第13章　実現しないのは、やろうとしないからだ
第14章　人間がみんな犬の聴覚をそなえたら、どんなことになるだろう？

第六部　地政学とフラット化する世界
第15章　フラットでない世界――銃と携帯電話の持込みは禁止です
第16章　デルの紛争回避理論――オールド・タイムvsカンバン方式

結　論　イマジネーション
第17章　二つの選択肢と人間の未来――11・９vs９・11

via:目次

上巻と比べて下巻では、主に、フラット化によるデメリットにフォーカスされているかなと。

特段、今となっては、目新しいことはなかった。

[JavaScript]zepto.jsのdataメソッドについて

どうやら、zeptojsのdataメソッドは、jQueryのそれとは違うようだ。

$.data()

Zepto.js の $.fn.data は jQuery の $.data とは全く違う動作。jQuery は対象の DOM Element について JavaScript のハッシュ（オブジェクト）を作るのに対し、Zepto では data-* 属性に書き込むため文字列しか扱えない。

data プラグインを使用することによって jQeury と同様の動作を行える。

via:Zepto.js (v1.0rc1) の jQuery との互換性

従って、jQueryと同じメソッドとして使いたい場合は、data.jsをダウンロードして、次のようにする必要がある。

<script src="./zepto.js"><script>
<script src="./data.js"><script>

これ、jQueryのプラグインを使うときとかに適用する必要性もあるので、注意したいですね。

[JavaScript]jrumbleをZeptoに対応

以前、紹介したjRumbleプラグインをZeptoでも動くようにするには、どうすればいいだろうか？

プラグインの一番下にこう書かれています。

});// End return this.each
  };// End $.fn.jrumble
})(jQuery);

上を下のようにします。

});// End return this.each
  };// End $.fn.jrumble
})(Zepto);

ちなみに、両方対応させるには、こうする。

});// End return this.each
  };// End $.fn.jrumble
})(((typeof jQuery !== 'undefined')? jQuery : Zepto));

結構便利な技かなと。

[JavaScript][smartjs]矩形を描画する

smart.jsを使って矩形を描画する方法を調査しました。

めっちゃ簡単です。

<div style="position:relative;margin:20px 20px;" id="container">
  <div id="sample" style="width:300px;height:300px;background-color:black;"></div>
</div>
<script>
smart.ready({},function(S,imgs){
  var stage = new S.Stage("sample");
  var box = new S.Box(200,100);
  box.x = 50;
  box.y = 100;
  box.bg.color = "pink";
 
  stage.addChild(box);

});
</script>

[JavaScript][smartjs]tweenを実装する

昨日、smart.jsで画像を描画する方法を書きましたがアニメーションする方法を書きたいと思います。

ずばり下のように実装すればおｋ

<div style="position:relative;margin:20px 20px;" id="container">
  <div id="sample" style="width:300px;height:300px;background-color:black;"></div>
</div>
<script>
smart.ready({},function(S,imgs){
  var stage = new S.Stage("sample");
  var box = new S.Box(200,100);
  box.x = 50;
  box.y = 100;
  box.bg.color = "pink";

  stage.addChild(box);

  S.tween.start(box,{x:0,y:0},'linear',0.25,0,function(){
    console.log('animation end')
  });
});
</script>

アニメーションの部分は、

S.tween.start(box,{x:0,y:0},'linear',0.25,0,function(){
  console.log('animation end')
});

で最後は、コールバックですね。easingも色々あって便利です。

[JavaScript]smart.jsで画像を描画

スマホ対応に特化したアニメーションライブラリsmart.jsというのがあったので、使い方をちょっと勉強。

画像を描画するだけなら、めっちゃ簡単。

<div id="demo" style="width:100px;height:100px;"></div>
<script>
smart.ready({
  //表示したい画像をJSON形式で設定
  fstimg:"img/hoge.png"
},function(S,imgs){
  var stage = new S.Stage("demo");

  //第一引数に幅、第二引数に高さ
  var fstImg = new S.Canvas(60,60,imgs.fstimg);
  //表示位置(x座標)を指定
  fstimg.x     = 10;
  //表示位置(y座標)を指定
  fstimg.y     = 20;
  stage.addChild(fstimg);
});
</script>

アニメーションとかはまだ勉強中なので、明日以降に書こうかなと。

[jQuery]jRumbleプラグイン

結構まえからあるプラグインなのですが、あるbox要素を揺らしてくれるjRumbleプラグインというのがあります。

導入はめちゃくちゃ簡単で、下のような感じにすればおｋ

<div id="hoge"></div>
<script>
jQuery(function($){
  //setup
  $('#hoge').jrumble(
    x: 10,
    y: 10,
    rotation: 4
  );

  //揺れる動作をする
  $('#hoge').trigger('startRumble');

  //揺れる動作をストップさせる
  $('#hoge').trigger('stopRumble');
});
</script>

おもしろいエフェクトを追加したい場合に、役に立つかなと。

[Xcode]エディタを縦分割する

デフォルトでは、Xcodeは、エディタを横分割するんだけど、秀丸のように縦分割できるか調査。

結果としてできるようです。

まずは、下のボタンを押します。

次に、下のようにすると縦分割になりました。

分割されたのはいいんだけど、なんで、.mファイルに対して、.hファイルを開いちゃうんだろー。

そのまま.mファイルを開いてほしんだけど。

[iOS][Objective-C]mainQueueを使ってHTTPリクエスト

前回、NSOperationQueueを使ったHTTPリクエストについて書きました。

今日は、mainQueueを使ったリクエストの方法について。

NSOperationQueue *operationQueue = [NSOperationQueue mainQueue];
NSURLRequest *request;
[NSURLConnection sendAsynchronousRequest:request queue:queue completionHandler:^(NSURLResponse *response, NSData *data, NSError *error){
  //処理を書く
}];

とっても簡単ですね！！

[jQuery]perfect-scrollbarプラグイン

PHPSPOTで完璧なスクロールバーを実現できるjQueryプラグイン「perfect-scrollbar」というプラグインが紹介されていたので、導入方法を調べることに。

下のようなdom構成で考える。

<div style="overflow:hidden;position:relative;width:100px;height:100px;" id="container">
  <div>
    <img src="/img.png">
  </div>
</div>

あとは、
perfect-scrollbar.css
と
perfect-scrollbar.js
を入れて、

jQuery(function($){
  $('#container').perfectScrollbar();
});

とすればおｋ

id="container"のwidthとheightは任意の値でいけそうだ。
IE9で試したら、横スクロールがカクカクしていてちょっと気になったけど、それ以外は大丈夫かなと。

他にも色々とパラメータ調整できるようだが、そこはもうちょっと時間をかけてみていきいたい。

[iOS][Objective-C]NSOperationQueueのnil化について

昨日、sendAsynchronousRequest:queue:completionHandler:について書きましたが、このメソッドは非同期かつ、

NSOperationQueue *queue = [[NSOperationQueue alloc] init];

としているため、マルチスレッドで実行してしまう。

そこで、問い合わせ中は、上のメソッドを実行してほしくない場合として下のように実装しました。

//NSOperationQueue *queue;
if(queue != nil){return;}

queue = [[NSOperationQueue alloc] init];
NSURLRequest *request;
[NSURLConnection sendAsynchronousRequest:request queue:queue completionHandler:^(NSURLResponse *response, NSData *data, NSError *error){
  //処理を書く
  dispatch_async(dispatch_get_main_queue(),^{
    queue = nil;
  });
}];

こうすれば再度、この処理が呼ばれても、問い合わせ中は、queueにobjectが設定されているため、nilではなくなるので、処理をせずにすむのかなと。

これは便利なんで、コピペできるようにしとこーっと。

[iOS][Objective-C]sendAsynchronousRequest:queue:completionHandler:について

iOS5から追加されたsendAsynchronousRequest:queue:completionHandler:の使い方を勉強。

NSURLRequest *request;
NSOperationQueue *queue = [[NSOperationQueue alloc] init];
[NSURLConnection sendAsynchronousRequest:request queue:queue completionHandler:^(NSURLResponse *response, NSData *data, NSError *error){
  //処理を書く
}];

今まで、GCDを使って書いていたけど、こっちも便利そうです。

[jQuery]twinkleプラグイン

PHPSPOTのクリックで水滴を落としたようにアニメーションさせられるｊQueryプラグイン「jQuery.twinkle」を見て、ちょっと面白そうだったので、実装方法を確認しました。

jQuery.twinkleを読むと、たった、これだけ

$(selector).twinkle();

別にクリックしなくても上のプラグインで呼び出すことができる。

なんか、callbackパラメータがないとエラーがでてしまうので、それだけは注意。

繰り返し再生用に下のようにしました。

function _twinkle(){

  $('#hoge').twinkle({
    effect: 'splash',
    effectOptions: {
      color: 'rgba(255,0,0,0.5)',
      radius: 100
    },
    callback:_twinkle
  });

}

_twinkle();

アニメーションもいろいろなパターンがあるので、是非、お試しあれ。

[jQuery]あるDOMが表示されたときにイベントを発生させるinviewプラグイン

あるdom要素が表示領域内に入ったときにイベントを発火したい場合があります。

そんな場合は、inviewプラグインが便利そう。

バシャログの【jQuery】要素が見えたタイミングでイベントを発生させるjQueryプラグインとは別にdomのすべてが表示領域内に入った場合は、このように実装することもできる。

$(someMyOneDiv).on('inview', function(e, isInView, visiblePartX, visiblePartY) {
  var elem = $(this);

  if (elem.data('inviewtimer')) {
    clearTimeout(elem.data('inviewtimer'));
    elem.removeData('inviewtimer');
  }

  if (isInView) {
    elem.data('inviewtimer', setTimeout(function() {
      if (visiblePartY == 'top') {
        elem.data('seenTop', true);
      } else if (visiblePartY == 'bottom') {
        elem.data('seenBottom', true);
      } else {
        elem.data('seenTop', true);
        elem.data('seenBottom', true);
      }

      if (elem.data('seenTop') && elem.data('seenBottom')) {
        elem.unbind('inview');
        //ここに処理を書く
      }
    }, 1000));
  }
});

ただし、これは、1秒後にチェックしているので、間隔を狭くすることでより精度が高い状態でイベントを発生させることができる。

[jQuery]アニメーション中かどうかの確認

animateメソッドを使って、オブジェクトがアニメーション中かどうか確認したい。

jQuery 特定要素がアニメーション中か判別する方法によると、以下のプログラムでいけそうだ。

$('#hoge').is(':animated')

trueを返したらアニメーション中、falseだったら、停止ということになりますね。