JavaScript Archive

iPhone向け(Androidも？)にゲームなどを作る際、 連続でタップをする可能性のあるインターフェース(例えばADVの会話シーンなど)に、 event.click を使ってしまうと、どうも動きがもっさりとしてサクサク進まない。

そういう時は、event.click ではなく event.touchstart/touchend を使うとサクサク進むようになる。

Continue reading

指摘を受けたのでメモ。

例えば http://example.com/ に以下のようなコードを書いたとする。

var url = location.href;
document.write('<a href="' + url + '">リロードするお！</a>');

この状態でアドレスバーに http://example.com/#’>”><script>alert(0)</script> と打ち込むと、 IE8以下及びIE9互換モードの場合、alertが実行されてしまう。

Continue reading

げこたんが色々いじってるのを横目で見てたらなんだか楽しそうなのでやってみました。 wget とか make とかやってたみたいですがとりあえず MacPorts でサーチかけてみたらしっかりあるではないですか。 というわけで、インストール。

sudo port install nodejs

インストール作業はとりあえずこれで終了。

あとはここに書いてあるJSを作成して実行！

node test.js

127.0.0.1:8124 でしっかりと「HelloWorld」が表示されていたので、これにて終了。

ぱっと見てみた感じ色々できそうで楽しそうだったので今後何に使っていくか検討してみようと思います。 とりあえずは社内の作業用ツールで実験実験。

JPEGとかPNGとかの画像をダウンロードさせるページを作っていたのですが、 aタグのhrefに画像のパスを書いても、対象の画像に遷移して困ってしまいました。 ZIP等をダウンロードするときみたいに確認ダイアログを出したかったので、 色々調べてみました。

perlやPHPでファイルのダウンロード確認ダイアログを表示させる方法 | perl/CGI | 阿部辰也のブログ――人生はひまつぶし。

ここのPHPのソースを一部改変してJSからドーンします。

<?
$files = $_GET;
$src = &quot;./hoge/{$files['filename']}&quot;;</p>

<h1>HTTPヘッダを送信</h1>

<p>if(file_exists($src)){
header(&quot;Content-type: application/octet-stream&quot;);
header(&quot;Content-Disposition: attachment; filename=\&quot;{$files['filename']}\&quot;&quot;);</p>

<h1>出力</h1>

<p>readfile($src);
}else{
  header(&quot;Location: ./fuga.html&quot;);
}
?&gt;

header(“Content-Disposition: attachment; filename=\”{$files['filename']}\”"); ここの記述でダイアログを表示させる(ついでにファイル名を決めることができる)ようですが、 セキュリティ的に問題もある模様。 [Studying HTTP] HTTP Header Fields

あと、ファイルによってMIMEタイプ(Content-Type)が異なるので、それもなんとかしなければならず。 PHP の mime_content_type() を使おうとするも非推奨とのことで断念。 とりあえず application/octet-stream とすることで回避(と言えるのかわかりませんが)しました。

で、このPHPをJSから叩く

    $('a.download').click(function(e){
      e.preventDefault();
      var filename = ($(this).attr('href')).split('/');
      filename = filename[filename.length-1];
      location.href = './fuga.php?filename='+filename;
    });

firebug とかで href 書き換えられて押されたりすると怖いので、 ファイル名の部分だけを切り取って送るようにしました。

ここまでできたので、今度は欲しい画像を選んでZIPに圧縮してダウンロード、とか作りたいのですが。 さぁ、時間が無い。

■おまけ application/octet-stream とはなんぞ web用語辞典 – application/octet－stream

なんだかわからないけど何かのファイル っていう意味っぽいです。

---

追記 Hatena::Letに投稿してみました。

http://let.hatelabo.jp/cancer6/let/gYC-ypbCp6mDIQ

Google Font API なるものが公開されていたのでちょっと遊んでみた。 下記の一文を”Twitterのページを開いている状態”でロケーションバーにはりつけてエンターキーどーん。

javascript:(function(s){s.src="http://unolabo.boo.jp/misc/googleapi/google_fonts.js";document.body.appendChild(s)})(document.createElement('script'));

JSについては下記。

Continue reading

—————-【追記(2010/03/26 19:07)】—————- 下記の方法でやっていたところ、再度エラーが出る(例によって表示はされないけど)ので、 結局 window.parent.fn() で取りました。

エラーがでたりでなかったりなんなんだよもう。。

昨日のiframeの続きで、 iframe の中の子ページから親の関数を呼び出したかったので、 とりあえず window.parent.fn() で取ってみました。

すると、IE6で動かない。 きっとスコープ的な何かがおかしいんだろうなぁと思い、 window.parent.document.fn() とか色々試しつつ調べつつ。 そうこうしているうちにこんな記事を発見。

parent – hoshikuzu | star_dust の書斎

これによると、IEの場合 document.parentWindow なるものが存在するらしい。 へーなんかきもい。

それでもとりあえず6以外ではちゃんと動いてたので、6だけに適用。なんか怖いし。 document.parentWindow.fn() で無事取得できました。

こんな感じ

if(undefined !== window.ActiveXObject && $.browser.version.indexOf('6.') != -1){
  document.parentWindow.ｆｎ();
}else{
  window.parent.fn();
}

っていう JavaScript を書いたとき、 func1 の処理が完全に終わってから func2 の処理を行いたい。 そんなことを考えてたわけなのですが。 どうにかしてうまいこと処理したい、そう思って調べてたら、

動的スクリプトローディング（さんざん既出だと思うけど｜IT戦記

こんな記事を発見。 jQuery が完全に読み込まれたのを確認してから実際の処理を行う、というものなのだったので一部拝借。

Continue reading

去る1月14日にjQueryの最新版1.4がリリースされました。 既に出遅れた感全開ですが気にせず書いてきましょう。

とりあえず気になった新機能とか

Continue reading

元ネタはこちら、問題文もこちら http://ameblo.jp/programming/entry-10001721422.html

実際に書いたコード(そのまま)

var Cards = {
  "deal" : function(numPlayers, deck){
    var cardsNum = deck.length,
        results = [];
    for(var i=0; i<numPlayers; i++){
      if(cardsNum/numPlayers < 1){
        results[i] = "\"\"";
      }
      else{
        var _temp = [];
        for(var j=i; j<cardsNum; j+=numPlayers){
          _temp.push(deck.charAt(j));
        }
        results[i] = "\"" + _temp.join('') + "\"";
      }
      alert(results[i]);
    }
/*
    for(i=0; i<numPlayers;i++){
      var _temp = [];
      var cpp = Math.floor(cardsNum/numPlayers); //cards per player
      for(j=0; j<cpp; j++){
        _temp.push(((cardsNum/numPlayers) < 1) ? "" : deck.charAt(j*cpp + i));
      }
      results[i] = _temp.join('');
        console.log(results[i]);
    }
*/
//      document.getElementById('result').innerHTMl = "results:{\"" + results.join('\", \"') + "\"};
  }
}

所要時間：40分 …orz

コメントアウトで消してるところで30分ほどかかっておりました。 ただ着眼点変えてみてからは10分かかってないので、ひらめき力の問題のようです。

もっとがんばろう。。。

げこがなにか作ってたのでいじってみた。

http://unolabo.boo.jp/twitter/talkTwitter/ FF2/3/3.5　Chrome4　Safari3/4　で確認。 IE6-8 Opera Chrome3では動きませんでした。

元記事はこちら http://jp.techcrunch.com/archives/20091214the-unofficial-google-text-to-speech-api/

げこが使ってたjQueryFlexPlayerがどうもFF以外ではまともに動かないようなので、ｊPlayerに変えただけです。

これを使って目下モリモリ作り中。。。