Re:

のあんのブログ

カテゴリ:開発 > JavaScript

けっこう深刻。

だって動かないんだからw

ホントかよーって思ったけど、確かに2回目以降はサーバサイドにリクエストは投げず、ブラウザがキャッシュしてるレスポンスデータで処理されてた。

なんてこったい!


とりあえず引用サイトでサンプルコード載せてくれてるので、ほぼそのまま実装しとけば $.ajax({type:'POST'}) や $.post() によるキャッシュ回避が可能。

タイムスタンプ付けて違うリクエストとして処理させる騙し技で十分な場合のみね。

iOS6 Mobile SafariがAjax POSTでキャッシュする問題を回避する方法 | クラスメソッド開発ブログ
http://dev.classmethod.jp/smartphone/ios6-safari-post-jquery/

ただ、jQueryMobile の section 動作においては GET, POST いずれでもなく、originalOptions に type プロパティが存在しないので、 jQueryMobile を導入したサイトでは上記サイトのサンプルコードそのままではエラーが起こってしまう。

なので、undefined チェックを追加しておく。以下。

$.ajaxPrefilter(function (options, originalOptions, jqXHR) {
+ if(originalOptions.type == undefined) {
+   return;
+ }
  if(originalOptions.type.toLowerCase() == 'post'){
    options.data = jQuery.param($.extend(originalOptions.data||{}, {
      timeStamp: new Date().getTime()
   }));
  }
});

ondevicemotionイベントハンドラで加速度センサーを拾う。

各座標のオブジェクトプロパティは

accelerationIncludingGravity.x;
accelerationIncludingGravity.y;
accelerationIncludingGravity.z;


んで、jQueryでbindした際

$(window).bind('devicemotion', function(event){
    ax = event.accelerationIncludingGravity.x;
    ay = event.accelerationIncludingGravity.y;
    az = event.accelerationIncludingGravity.z;
});

では取れない。jQueryのドキュメント(Event Object – jQuery API)にSperial Propertiesの項目

Certain native events may have special properties that can be accessed as properties of the event.originalEvent object.

があるように、加速度センサーのイベントは特別なイベントなんだろうね。

だから、

$(window).bind('devicemotion', function(event){
    ax = event.originalEvent.accelerationIncludingGravity.x;
    ay = event.originalEvent.accelerationIncludingGravity.y;
    az = event.originalEvent.accelerationIncludingGravity.z;
});

とプロパティにアクセスする。


余談。

jQueryでcanvasとなるオブジェクトを拾う場合

e.g.
//var cv = document.getElementById('hoge');
var cv = $('#hoge').get(0); # or $('#hoge')[0];
var ctx = cv.getContext('2d');
<canvas id="hoge"></canvas>


ポケモンカードバトルのルールを数日前に覚えた!

ごくシンプルながら、仮にケータイでそのバトルを実装しようと思ったら、そんなシンプルさでもボリュームがある。

それに同時刻に、どこの誰かとの対戦をどう実装する?とか課題は多い。

でも、単純な強さの大小で勝敗が決まるよりは、相手の種が何かわかった上で攻撃を仕掛ける面白さはデッキによるカードバトルが楽しまれている前提としてあるため、実現したいところ。


タイマーによって互いの実行時間を限定的にかつリアルタイム進行することはでき…そう?

という浅い考えで、とりあえずiモードブラウザ2.0のjavascript実行でsetInterval()をテストしてみた。


どうやら…かなりアバウトのようだ。

数分しないうちに1秒のズレが…。

いずれにしても、サーバ時刻をマスタ時間としてその測定を個々のブラウザに行わせるタイマー利用になると思われるため、まぁ数秒のズレは「仕様です」と言い切ればw


30枚デッキでも枚数は多いので、さらにその半分の15枚デッキにて5ターンくらいのバトルで勝敗を競うようなものが作れれば。


iモードブラウザ2.0によるsetIntervalのサンプルはこちら
http://d.mbg.jp/

※タイトルは、文面を作るところでTinyMCEを用いるという意味
※差し込まれた画像パスをcidにしたり、base64エンコードしたり、マルチパート化したり、実際の送信までにはあれこれ処理が必要デス!


多機能は良いのだが、やれることが多すぎてちょっとのことで悩ましいTinyMCEです…。


TwitterのTLを見てたら、はてなに質問がありました。

「spanタグではなくfontで出力したい」

さっそく答えてみた。


…ファーストコンタクト失敗w


ちゃんとTinyMCEをダウンロードしてきて、サンプルを開いて確認!


/jscripts/tiny_mce/tiny_mce_src.js


コアソースを漁ったところ、初期設定はspanになっているようだ。

あとは設定が置換出来れば良いわけで、設定のドキュメントを探してみたらありました。

http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/formats


ということで、TinyMCEのエディタメニューでフォントサイズ、カラーをfont出力したい場合は設定で以下のようにします。

tinyMCE.init({
convert_fonts_to_spans:false, /*spanタグに変換されないように*/
    formats : {
        forecolor:{inline:'font',attributes:{color:'%value'}},
        fontsize:{inline:'font',attributes:{size:'%value'}},
    },
    theme_advanced_font_sizes:"小さい=1,ちょい小さい=2,ふつう=3,
ちょい大きい=4,大きい=5,わりと大きい=6,すごく大きい=7", /*←実際には一行で*/
    font_size_style_values:'1,2,3,4,5,6,7',
}

spanをfontで出力するにはそれで事足りるのですが、そのままだとエディタのFont Size一覧表示だったりsizeの値が異なることになるため、他の設定も併せて行なっています。
  • theme_advanced_font_sizesを指定して、デフォルトの表示を変更します。
  • font_size_style_valuesを指定して、xx-smallなどのcss値を1〜7のフォントサイズ(size="?")となるようにします。
以上です。

1271169611535

CSS Dock Menu
http://www.ndesign-studio.com/blog/css-dock-menu

Dockのにゅるにゅる感がプラグインで簡単に作れるヤツ。

こんなインターフェースにしたいな〜と思って検索するとすぐに見つかる便利な世の中。

みんなに感謝!

↑このページのトップヘ