ひらい ぶらり Hi-Library

ぷろぐらみんぐについて。ときどきどうでもいいことについて。

JavaScript

canvasで爆裂ブロック崩し

時間はないけど,実験のTA中とか暇なので作ってみよう!というわけで爆裂ブロック崩しJavaScript版に挑戦. もちろんIEでは絶対に動きません.自己満足です. ちなみに今のところFireFoxでも重すぎてお話しにならなそう. Chrome限定の予感.とりあえず,本…

FireFoxで右クリックだけの処理をしたい

右クリック検知にはcontextmenuなるプロパティがあるらしいですが、FireFoxでは右クリックと同時にクリックも呼び出されちゃいます。 そんなわけで、mouseupかmousedownを使いましょう。mouseupが本来の動作に近いのかもしれない。 var icon = document.getE…

XULでdiplayを使うとき

FireFoxのアドオンとかでXULに対して hoge { display: none; } を使う場合の注意。 noneは良いけど、他の値はうまく動かない。使う場合は hoge { display: -moz-box; } を使う。visibilityの時はcollapseにしておけば問題ないらしい。参考:http://piro.saku…

XmlHttpRequestでPOSTする時の文字コード

POSTする先がUTF8ならいいのかな?問題はUTF8じゃない時。 普通は文字コードを指定するパラメタか何かあって、それを元に受け取る側で文字変換してくれればいいんだけど、今回はmixiエコーにポストしようとしていたので見事に弾かれた。 仕方ないからEUCに変…

FireFoxアドオンでModule化した際にApplicationを使う場合

var Application = Cc["@mozilla.org/fuel/application;1"].getService(Ci.fuelIApplication); モジュールではApplicationが定義されていないため、自前で定義してやる必要がある・・・んだと思う。追記 CCもCiも定義されていないので、正確には↓ const Cc =…

XUL でdescriptionの子要素として動的に文字列を格納する

XULにおいて <description>ほげほげ</discription> のように書くと文字列は自動的に折り返してくれるようになる。 が、XULにはinnerHTMLとかinnerTextがない。 descritptionのvalueプロパティに文字列を格納しても一行になってしまう。 var desc = document.createElement("description"…

外部CSSで設定した値やクラスで指定したCSSをJavaScriptで取得する

element.style.* で取得できるのはインラインCSSだけ。 function getStyle(element, style) { if(!/*@cc_on!@*/false) { var cs = document.defaultView.getComputedStyle(element, null); var value = cs.getPropertyValue (style); return value; } else {…

keydown keypressの違い

http://cgi14.plala.or.jp/uz/ubbs/wforum.cgi?mode=allread&pastlog=0001&no=182&page=20&act=pastkeydownは文字通り、なにかのキーが押されたときに反応する。keypressは「文字が入力」された時に反応する。という感じらしい。なのでkeypressでは矢印キー…

IE でsetAttributeは半端な実装 classとかstyleを指定しても反映されない

本日三つ目のエントリー うち二つがIEのダメエントリー。 マウスオーバーでクラス名を変更しようとして e.setAttribute("class", "hoge"); のように実行しても、クラス名が変わる(二重になる?)だけで、cssは反映されない。 どうもIEの実装が終わってるら…

foreach と for + in は違う

これはIEが悪いのかどうかわからないが、とりあえずメモ。 foreachのような挙動をするものとしてfor (var i in data)見たいな文がある。が、これはforeachではない。らしい。詳しくはこちら http://d.hatena.ne.jp/amachang/20070202 for (var i in document…

IEでJSONを扱うときの注意 カンマに気をつけろ!

var test = { url : "http://example.com", text : "test", } って書くとIEではエラー。text : "test", の「,」が曲者。FireFoxとかでは問題ないが、IEではエラーになるようです。

 addEventListenerの罠

for (var i in data) { getElementsByName("div").item(i).addEventListener("click", function() { alert(i) }, false); }こんな風にして、期待しているのは 一個目のdivでは0 二個目のdivでは1 みたいな出方。しかしそうならない。 仮にdata[10]だとすると…

JSONPのAjax的使い方

以前、Googleデスクトップのガジェットを作るときにgessyさんの作ったLEAFBANK APIを利用させてもらおうとしたら 「JSONP作ってないから、JSONP作って使っちゃいなYO」 というようなことを言われて 「なるほどなるほど、JSONP使ったほうがいいですね」 って…

GoogleデスクトップでAjax

GoogleデスクトップでAjaxを使う場合は、普段と勝手が少し違うみたいだ。 シンプルなAjaxの書き方は以下なかんじ var httpObj; function loadTextFile() { httpObj = new XMLHttpRequest(); httpObj.onload = displayData; httpObj.open("GET","data.txt",tr…

クロージャについて3

クロージャについてって言っておいて、肝心のクロージャについて触れてなかったので書きます。 クロージャとは・・・・・・リーフってください。っていうと丸投げすぎるので、なんとなくしかわかってないですけど一生懸命自分なりの解釈を書きたいと思います。 基…

$(function(){})を使う際の注意

自分で全部JavaScriptを書いているのならいいけれども、どこかにぶち込んで使ってもらうような、ライブラリチックな使い方をするときは注意したいこと。$(function())は$(document).ready(function())の省略系で、この記述が複数個あっても何も問題ない。が…

IEのBODY BORDER=0

IE(多分6まで)でのborderプロパティの値を0にしてやると、ブラウザの周りを囲っている1pxの線が消せます。 コレをやると、背景色をそろえてやればあら不思議、まるでブラウザにくっついてるようにみえる・・・わけですが、そのあたりもDOCUMENT TYPEによ…

大学にて GEO BATTLER 晴れて一位です

「一位は皆さんすでに分かってると思いますが、一つだけなにか凄いのがまじってましたよね」 という前置きのもと、一位をかっさらってきました。 あでぃんごぁーとしてはこれくらい当然にやってこなきゃいけないですね。 何やら、JavaScriptを使ったリッチな…

jQueryで音楽を鳴らす

いまいち調べキレなかったけれども、サウンド系はブラウザでいろいろと処理が違うので厄介そうである。 FireFoxなんかは、QuickTimeのプラグインで再生してたりするようなので、古いとならないのか?要調査。 前回はMP3ファイルだけしか利用できなかったので…

scriptaculousで音楽を鳴らす

GEO BATTLERでキャラクターの攻撃時に音声や効果音が出したかったので調べた。 prototype.jsのプラグインであるscriptaculousでどうやらできるらしい。 使い方はいたって簡単。 Sound.play('sword.mp3');楽勝っすね。 因みに同時に音を鳴らしたい場合は Soun…

GEO BATTLER をぼちぼちPHPにしてみる

大学の課題だったのでJSPで作っていたけれども、とりあえずPHPにしてせっかくだから公開しようかなん。と思うております。 今のところネックなのが6つのAPIを順番に叩いているため、どうしてもキャラクター作成に時間がかかってしまうということ。 んで、JSP…

ブラウザの表示領域を取得する2

ではスクロールバーなしのサイズを取ってこれないIEでどうするか。 というわけで、以下の手段をとることにする。 ・現在の横幅を取得 ・すべての要素の一番右端に当たるx座標を取得 ・横幅<x座標ならばスクロールバーありとして、表示領域を-15pxする みた…

ブラウザの表示領域を取得する

今、常にブラウザの下らへんに表示されるツールバーもどきを作ってるわけですが、その際に重要になってくるのがブラウザの表示領域。 ブラウザのの表示領域-もどきの高さ = y座標 となるわけですが、ブラウザ間で取得できる表示領域は違うし、DOCUMENT TYPE…

と思ったら「DebugBar」なるものもありました

Debeloper Toolbarに比べると、機能はすくないもののIEのDOM解析できるツールは他にもあったみたいです。 「DebugBar」というものです。http://www.debugbar.com/download.php 全体的に機能はやはりDebeloper Toolbarに劣るものの、JavaScriptの解析はこちら…

IEでCSSやらJavaScriptを解析する「Developer Toolbar」

ブラウザでのCSSやJavaScriptの解析の定番と言えば「Fire bug」ですね。 IEやSafari、OperaではJavaScript版の「Fire bug lite」なんかが定番ですね。 しかし「Developer Toolbar」なんてMicrosoftが出してる純正のツールがあるみたいです。とりあえずCSSや…

怪しげなJavaScript解析(1)

http://rapa.jp/w_3/bonji.html どうやらサイトそのものをでくくっちゃって、ツールバーもどきはなぜかでくくれている。 のpositionプロパティをabsoluteにして、mouseMoveイベントを取ってきて、 topとleftを操作して動かしている模様。それだけでこうなる…

テキストを一文字ずつゲームっぽく表示する

さてさて、開発中のGEO BATTLERですが、開発言語がJAVAってことでレンタルサーバじゃ公開できないのでサンプルを表示できないのが残念です。 大学休み入ったらPHPかRubyで書き直して公開しようかと思います。 勉強がてらRubyかなぁ・・・。 さておき。GEO BA…

CSS3のアニメーションを色々検証してみる

そんなわけで、CSS3のアニメーションを実装するために色々と検証してみる。 前回は //パターン1 #box1 { -webkit-transition-propaty: all; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out; }といった感じに紹介しまし…

重すぎるiPhoneSafariをどうにかする

重い。遅い。もっさりすぎる。 とはいえ、それはそれなりの情報を画面に表示している状態に限った話で、一画面に収まる程度の画像なり文字列ならばそこまで重たくない・・・はず。 あとJavaScriptのメモリも開放してやらなければいけないのかもしれない。 今ま…

CSS3のアニメーション

どうやら下手にJavaScriptを使うよりも、CSS3のアニメーションを使ったほうが軽快な動作をするようです。 しかしよくよく調べてみると、i4Uは1JavaScriptで作成されている。 そこまで違いはないようです。 結局もっさりしてしまう原因は実際にブラウザ上で表…

電車にて

余りにももっさりすぎるiPhoneの動作。 どうにもならなそうなので、今電車の中で思いついたことやってだめだったら諦めよう! 思いついたこと •Ajaxで取得したデータを一気に表示するのではなく、一度画面に表示できる分だけ表示して、スライド。後に全文表…

Double Postに気をつけろ

本日はAjaxな話題。 iPhone用のユーザインタフェースを作るうえで引っかかったバグ。 普通にしてると、時々うまく行ったりするからたちが悪いバグだったりする。 AjaxはもちろんJavaScriptを使うわけですが、JavaScript未対応だったり、JavaScriptを切ってい…

続・GEO BATTLER

http://paseo102.sakura.ne.jp/test/index.html 引き続き改良しております。 scriptaculousのshakeアニメーションって一体どういう神経している人が使うのだろうと思っていたのですが、僕でした。本当にありがとうございました。 一見用途のなさそうなもので…

GEO BATTLER

インターンにてアカギ達のチームの案として上がっていながらも、開発期間を考慮して没ったアイディアの「GEO BATTLER」。 位置情報からキャラクターを作成して戦わせるというものだったが、そのアイディアを大学の授業で利用させてもらうことに。(※アカギ了…

window.onloadでは遅い

jQueryに慣れると、prototypeよか便利な気がしますね。 最新版のprototypeはjQueryにある機能を大体備えてますが、調べていると先に実装いているのはjQueryの方が早いということを書いてある記事をちらほら目にします。 jQueryの場合は$()で指定できるものが…

jQueryを理解する

一日が立つ時間が早いですね。 もう明日IT企業運動会ですよ。 早く寝なければ・・・っ!というわけで、今回も手抜き感MAXです。 JavaScriptのライブラリで有名なのが「prototype」と「jQuery」ですが、どちらのライブラリも「$」を使った機能があるんですが…

スライダーを作る その1

iPhone用に作るに当たって、coda-sliderを使っていたけど動的にページや要素のサイズが変わってしまうと、スライドする長さが変わってしまい上手く動作しない。 そんなわけで、ライブラリの中身を覗いてみたけど、意味が分からない。 で、自分でゴリゴリ作る…