Home > webプログラム > javascript

03月07日 

javascript

.coder（どっとこーだー）Session1で喋ります

関西Javascriptの雄、noriさんが中心となってコーダー/デザイナー向けLT勉強会「.coder（どっとこーだー）」を主催される、ということでSession1テーマ「Javascript」で喋ることになりました。

最初はjQuery1.4で追加された機能でもタラタラ並べ上げようかとも思ってたんですが、なんかそれも面白くない。
O3Dで3D描画とかも考えたけど、LTだと「こんなん出来ますよ」が関の山。
フロントだけで完結しちゃうデザイン周りを触るようなJSのお話は誰かがしてくれるだろうし。

んで、これはある方とお話してる時にチラリと言われたことなのだけど、「サーバー側を理解しているJSer」。
ということでサーバーとのやりとりをAjax通信で行うときのTipsを題材にしようと思いました。

サーバー側とのやりとりで、小ネタを喋るより先にセキュリティが大事でしょ、ということで、そこら辺の話をさくっとしようと思います。
やっぱり肝はサーバー側の処理になってくるんですが、こういったセキュリティ対策が必要、という認識をフロント側も持っているだけで、実装の漏れを防ぐことが出来ますしね（Ajax通信でやりとりをしたことがないサーバー側担当って意外に多い）

残念ながら既に定員マックス（というかオーバー）なので追加での参加は難しいかと思いますが。。。
参加される皆様、相変わらず小難しい話しますが、お付き合い下さいませ。

2 コメント

02月03日 

javascript

パノラマ関係

Google独自の3D「O3D」で全方位パノラマを再生してみる

HTML5規格ではブラウザ上で3Dがウンタラ、とかありますが、イマイチ資料など目に付かず。

ブラウザでイケる3D APIといえば、MozillaのCanvas:3Dか、GoogleのO3D。んで、ようやく策定の始まった（？）WebGLと。
HTML5はWebGL規格になるのかな？誰かkwsk。

0203ま、そんなん待ってても仕方ないので、いっちょ実装してみることに。
互換性を大事にAPIを単純にしてしまってるCanvas:3Dではなく、結構エグいことが出来るO3Dを選択してみました。O3Dのイケてるところは、GPUを活用できちゃう、という点。
Actionscript3+Papervision3Dでなくても、高速に綺麗に3Dの描画が行けるんちゃうか？ということなんですなぁ。

ということで、実装した感じは…
の前に、再生するにはプラグインをインストールする必要があるので、まずは

http://code.google.com/intl/ja/apis/o3d/

上記URLページの右側にある「O3Dのダウンロード」を押してプラグインをインストールした後、いったんブラウザを再起動してから、

http://www.studio-bloom.net/public/o3d_pano/

をご覧くださいませ（環境によっては表示されない場合もあります）。
あぁ、ChromeかFirefoxでお願いしますよ。Mac？知らん。

画像の読み込みが終わるまでグレーになってますが、しばらくお待ちください。マウスでクリックしたまま動かすとグリグリできます。

平面プリミティブ6面を配置して、それぞれにテクスチャを貼り付けてるんですが、平面同士の境目が見えてしまってるんですよね…（PV3Dでは境目も出ないし動作が軽い）

境目を消すには、正方体プリミティブを作って各面にテクスチャを貼ることで解決できないかな？と思いつつ。ただ正方体プリミティブの面ごとにテクスチャを変える方法がイマイチ掴めず。。。ちょっと描画かプリミティブのパラメータをいじったらイイ感じにならないかな？と思ったりしてます。

結果としては、画質なんかはイイ感じなんだけど、GPU使ったりしてる割には妙に重い。PCの問題なのか、ブラウザの問題なのか？V8エンジンを使用すると速くなるよ、とのTipsもあるんだけど…（Chromeだけかよ！）

しかも、なぜかうちのノートPCではテクスチャ画像を読んでくれなくて（オフィシャルのサンプルも）再生できませんでした。
ちょっとここら辺はAPIの熟成を待つしかなさそうですねぇ。。。

再生するにはプラグインの導入が必要だし、一般的に使用されるようになるか、というのは疑問ちょっと疑問。WebGLも策定から各ブラウザへの実装がどれほど時間の掛かることか、と考えると、現状のAS3+PV3Dはしばらく鉄板な気がします。

2 コメント

01月27日 

javascript

jQuery1.4いいね！～$.proxy編～ とJSで動的に画像読込

jQueryも1.4にバージョンアップして、高速化しただけじゃなくていろいろ機能追加されてるそうで。
偶然KAYACさんのところで紹介されてて、感動してしまった機能をここでもご紹介。

それは…

$.proxy()

Takes a function and returns a new one that will always have a particular scope.
ということなので、関数を与えると特定のスコープを常に持った新しい関数を返しますよ、という訳であってるんだと思うんですが…

本家のサイトにあるサンプルでは

PLAIN TEXT
JAVASCRIPT:
  1. var obj = {
  2.   name: "John",
  3.   test: function() {
  4.     alert( this.name );
  5.     $("#test").unbind("click", obj.test);
  6.   }
  7. };
  8.  
  9. $("#test").click( jQuery.proxy( obj, "test" ) );

はい、便利ですね～

と、ちょうど作ってたのがJSでの動的な画像の読み込み。
FirefoxやChromeだと、普通に要素のsrc属性に画像のURLを指定してあげれば読み込み完了と同時に画像を差し替えてくれるのですが、そこはホラ、IEですよ、奥さん。

Imageオブジェクトのcompleteプロパティを監視してtrueになったときにsrcに突っ込んであげないと画像を切り替えてくれない、というオマケ付きな訳なんですよ…orz

そこで、setIntervalで定期的にループさせてプロパティを監視することに。
ということは読み込みが完了したときにはclearIntervalでループを止めないといけないですよね～
そんな時に、この$.proxy()が役に立つ！

PLAIN TEXT
JAVASCRIPT:
  1. function ImageLoad() {
  2.     this.img=new Image();
  3. };
  4.  
  5. ImageLoad.prototype = {
  6.     changeImage:function(e, s) {
  7.         this.elm = e;
  8.        
  9.         this.img.src = s;
  10.        
  11.         this.timer = setInterval($.proxy(function() {
  12.             if (this.img.complete) {
  13.                 $(this.elm).attr('src', this.img.src);
  14.                 clearInterval(this.timer);
  15.                
  16.             }
  17.         }, this), 200);
  18.     }
  19. };
  20.  
  21. var img = new ImageLoad();
  22.  
  23. $('hoge').click(function() {
  24.         img.changeImage('#image', 'path/to/image.jpg');
  25. });

こんな感じで使えます。
$.proxy()が無いと、thisのスコープが変わっちゃうので、なんか適当な変数を用意して、とかちょっと力業で実装したりかと思うのですが、綺麗にコーディングできますね！

いや～いいですね！jQuery1.4！
他にも素敵な機能追加があったりするので、また紹介できれば。

コメントなし

01月21日 

javascript

ウェブテコでお話します

神戸で毎月開催されているウェブの勉強会にてピーチクパーチクります。

今回はテーマが”HTML5&CSS3”ということで、「なんかそこら辺に絡む事を話せや」とお誘い頂いたので、Client-side Database strageについてお話することにしました。

HTML5から、Webのシステムで今や必須とも言えるデータベース（DB）を、サーバー上でなくローカルPC上で使えるようにしましょう、といった技術なんです。
めちゃくちゃ乱暴な言い方をすればCookieの高機能版（どちらかというと同じくHTML5で追加されたキーバリューストアという機能の方がCookieには近いのだが…）。

よく似た技術で、Google Gearにもこの機能がありましたね。結局HTML5で標準化されるのに伴ってGearの方は終了してしまいましたが。。。
「ローカルでもWebシステムが使用できる」という触れ込みだったかと思うのですが、これだけデバイスやインフラが整ってくると、あまりローカルに環境を持ってこなくても…と思ったりもしてしまう訳なんですが…

よく考えてみたら、iPhoneにもSafariが搭載されてるので（しかもClient-side DBは現在Safariにしか実装されてない）、簡単なiPhoneアプリくらいだと作れてしまうではないか、と。

ということで、今回の内容は簡単にClient-side DBの説明と、DBを操作するためのSQLのこれまた簡単な解説、クエリを投げるjsのコード紹介、んでこのDBを使って書籍を管理する超簡単なアプリの実演という流れで行こうと思ってます。
本当はアプリの実際のコードを追って行こうかとも思ったんですが、案外ボチボチな行数になってしまったので、実際のソースコードは配布してもらって、各自で見て頂くことになるかと思われ。
jQueryもちょこっと使ったりjsの説明は一切無しなので、そこらへんの知識が無いとツラいと思われますが、時間のこともあるので割愛御免。

興味のある方は是非ご参加ください。

日時：1/23（土） 13:30～17:30
場所：神戸元町 インキュベーションオフィスエリンサーブ KCCビル3F会議室
参加費：500円（運営費）
http://webteko.jp/

懇親会もありますので、そちらも是非ｗ

4 コメント

01月06日 

javascript

javascriptで関数の引数を不定にしてみる

あけましておめでとうございます。
本年もよろしくお願いいたします。

新年一発目のエントリは技術ネタ、というかTipsというか、あんまり使いどころがよく分からんというか。。。

javascriptは関数の引数に変数を与えなくても

PLAIN TEXT
JAVASCRIPT:
  1. function hoge() {
  2.      var arg1 = arguments[0];
  3.      var arg2 = arguments[1];
  4.  
  5.     return arg1+arg2;
  6. }
  7.  
  8. var sum = hoge(1, 2);

なんて感じで引数を取ることが出来ちゃうんですけれども、これだと引数の順番が固定になっちゃったりで、いまいちフレキシブルではないので、もうちょっと柔軟に出来んもんか、と考えたのがオブジェクトを渡す方法。

PLAIN TEXT
JAVASCRIPT:
  1. function hoge(args) {
  2.     var arg1 = args["arg1"];
  3.     var arg2 = args["arg2"];
  4.  
  5.     return arg1 + arg2;
  6. }
  7.  
  8. var sum = hoge({"arg1":1, "arg2":2});

キーと変数渡してやればどうでしょ？ということで。

で、何の役に立つねん？というとこなんですが、実行したい関数を変数で与えて、その引数が関数毎に微妙に違うけど、処理は共通、みたいな。ややこしや。

PLAIN TEXT
JAVASCRIPT:
  1. var funcs = {
  2.     //var getMemberPhoto = function(args) { <- 文法ミス
  3.     getMemberPhoto : function(args) {
  4.         var params = {
  5.             member_id:args["member_id"]
  6.         };
  7.         ...
  8.     },
  9.     //var getCategoryPhoto = function(args) { <- 文法ミス
  10.     getCategoryPhoto : function(args) {
  11.         var params = {
  12.             category_id:args["category_id"]
  13.         };
  14.         ...
  15.     },
  16.     //var getPhotoByPeriod = function(args) { <- 文法ミス
  17.     getPhotoByPeriod : function(args) {
  18.         var params = {
  19.             start_date:args["start_date"],
  20.             end_date:args["end_date"]
  21.         };
  22.         ....
  23.     }
  24. };
  25.  
  26. function getPhotos() {
  27.     var func = $("input[name=select_func]:checked").val();
  28.     var params = {};
  29.     $("#" + func + " .params").each(function() {
  30.         params[$(this).attr("name")] = $(this).val();
  31.     });
  32.  
  33.     if (typeof funcs[func] == "function") {
  34.         funcs[func](params);
  35.     }
  36. }

（追記）JSの文法ミスってました（汗）

PLAIN TEXT
HTML:
  1. <label><input type="radio" name="select_func" value="getMemberPhoto" />指定メンバーの画像取得
  2. <label><input type="radio" name="select_func" value="getCategoryPhoto" />指定カテゴリの画像取得</label>
  3. <label><input type="radio" name="select_func" value="getPhotoByPeriod" />期間を指定して画像を取得</label>
  4.  
  5. <div id="getMemberPhoto">
  6.     <select class="params" name="member_id">
  7.         <option value="1">だれそれ</option>
  8.         ...
  9.     </select>
  10. </div>
  11.  
  12. <div id="getCategoryPhoto">
  13. ...
  14. </div>
  15.  
  16. <div id="getPhotoByPeriod">
  17. ...
  18. </div>
  19.  
  20. <input type="button" value="画像取得" onclick="getPhotos" />

と、こんな感じで使えるよね？ということで（引数、微妙にも違ってないし）。
要jQueryなコードで、且つ実際に組んだコードではないので（爆）←古い、動かない可能性大ですが何かの参考にでもなれば。

ってならんな、こんなん。どこで使うねん。

2 コメント

12月24日 

javascript

javascriptのmatchで変数を抜き出す

文字列の中からパラメータを抜き出したいとき、

PLAIN TEXT
JAVASCRIPT:
  1. var hoge = "/member_id/29/".match(\/member_id\/(\d)\//);
  2. if (hoge != -1) {
  3.     var member_id = Regexp.$1;
  4. }

みたいな書き方が一般的だと思うんだけど、

PLAIN TEXT
JAVASCRIPT:
  1. var member_id = "/member_id/29/".match(\/member_id\/(\d)\//)[1];
  2. if (member_id != null) {
  3.     ...
  4. }

みたいな書き方も出来るよ、という覚え書き。
もち、複数の値を抽出したいときは前者の手法を使えば良し、ということで。

コメントなし

11月30日 

javascript

Google Mapで表示位置がおかしくてグレーが表示される時

急に気温が高下するこの季節、椎間板ヘルニアはもとより頸椎ヘルニアも目を覚まし猛威を振るってくれるので2,3日死んでることがあるんですが、今年のは微妙に軽症が続いててシンドイなーと思ってたら、週末に来てくれました。
息してるだけで吐きそうな頭痛ｗ

これはいむら整体院に行くしか！ｗ（日曜日はお休みですよ）

閑話休題。

最初は非表示にしておいて、ボタンを押したときにGoogle Map表示させたい、という時なんかに起き勝ちなんだけど、地図の中心位置がおかしくて、半分がグレーで地図が表示されない、などの症状。

原因は地図を表示させる要素のサイズがまだ確定してない状態でGoogle Mapの処理が走ると、変なサイズで初期化されちゃう、ということらしい。

そんな時は要素のサイズが確定したタイミングで

PLAIN TEXT
JAVASCRIPT:
  1. map.checkResize();

案外知らないもので、1ピクセル四方の要素を作ってみたり画面外に要素を置いておいて、とかいろいろ試してみたんですが、結局は上記の1行で済んでしまったというオチなのでありますorz

ちなみに、地図の読み込みが終わったかどうかは

PLAIN TEXT
JAVASCRIPT:
  1. var map = new GMap2(document.getElementById('map'));
  2. // その他初期化処理
  3. GEvent.addListener(map, "load", function() { ... });

ではイベントの登録が既に遅い（じゃいつ指定するのよ？と）、ということだそうで（というか使い方が違う？）、地図画像がすべて読み込まれたかどうかを

PLAIN TEXT
JAVASCRIPT:
  1. GEvent.addListener(map, "tilesloaded", function() { ... });

で取ることができます。

が一応、"undocumented（ドキュメントに記載されてない）"情報のようなので、将来的な動作が保証されるものではない、ということをご承知おき下さいませ。

Google Map API 小ネタでした。

2 コメント

08月16日 

webプログラム

痩せログ

WS000031嫁と共に腹のサイズが成長し続けている今日この頃ですが、嫁の場合、産み落としてしまえば引っ込む一方、こちらの腹はなんかしないと引っ込まないわけで…
ということで先日から寝る前に腹筋を行ってたりはするんですが…

最近効果があると聞くのは、食べたものとかを記録するレコーディングダイエット。
食べたものを細かく書かないといけないので間食とかしなくなる、前の日に食べた量を確認できることで今日の食事量を調整できる、などなど実体験者の意見もあり、FM802のDJも実践中とか。

そこで燃えてくるのがレコーディングダイエットへの取り組みではなく、ソレ用のシステムを作ろうとしてしまう意識がメタボプログラマーたる所以か…orz

ということでお盆期間を使って作ってみました。その名も「痩せログ」。
サービスとして公開するには細かい調整などが必要なのでボチボチ進めるとして、とりあえず携帯からの投稿や流行のtwitterのBOTにつぶやくと記録できる機能など考えております。
そして、このサービスの怖いところは、登録した人同士には全て公開されてしまうという点。ダイエットをサボっちゃ居られないｗ
「激励」や「拍手」ボタンなんかも作らないとなぁ。

脱メタボを志すアナタ、乞うご期待ｗ

5 コメント

08月05日 

Papervision3D

Progression

Progression+Wordpressでポートフォリオ的な

  1. ブログの記事に投稿した画像を抽出して←これはWordpressのテンプレート
  2. Progressionで読み込んで
  3. CoverFlowみたいな←これはPapervision3D

ポートフォリオ的な物を作る。

ということで出来たのがコレ。
http://www.studio-bloom.net/public/portforio/

1は昨日の記事で、
2は案外すんなり行けて、
3で躓いてた。

ローディングのプリローダーなんかの実装がまだだったり、ボタンがボタンとも言えない作りだったりするのは実験だからです。言い訳です。

画面遷移なんかの実装が超簡単に作れちゃうProgression、マジオヌヌメです（というか乗り遅れすぎ…orz）

2 コメント

07月29日 

javascript

IEでjavascriptでのsubmitが実行されない時

連日の妙なバタバタでお疲れ＆返信の滞りがちな今日この頃です（関係者の皆様、申し訳ございません）。

そんな時にハマってしまった今回の一件。

「IE6でだけ、javascriptでsubmitさせてるのが効かない」

PLAIN TEXT
HTML:
  1. <a href="javascript:void(0);" onclick="hoge();">fuga</a>

で

PLAIN TEXT
JAVASCRIPT:
  1. function hoge() {
  2. ...
  3. document.form.submit();
  4. }

が、FirefoxやChromeでは動くのに、IE6だと動かない罠。

答えは簡単で、

PLAIN TEXT
JAVASCRIPT:
  1. function hoge() {
  2. ...
  3. document.form.submit();
  4. return false;
  5. }

末尾でfalseを返しましょう、とそんだけ。

ということで、これは癖を付けておかなくちゃ駄目ですね～

週末は、親族の法事やパノラマ撮影、先輩のお見舞い。今日は今日とてママパパ教室に駆り出され、沐浴のお勉強。そこで妊婦体験とか言いながら疑似体験パーツを着けて辱められｳﾜｧｧ-----｡ﾟ(ﾟ´Д｀ﾟ)ﾟ｡-----ﾝ!!!!
帰ってから収穫したバジルを一杯使った晩飯を作って食ったらバタンQ（古い）。風呂から上がって復活して、一仕事終えたところであります。

家がバジル臭い。

4 コメント

次の記事 »