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 コメント

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 コメント

07月18日 

javascript

jQueryでお手軽CSS制御（Chromeでのバグの話も）

CSSの制御というか、Classの制御というか。
CSSを直接触っちゃうより、Classを用意しておいて付加したり外したりのほうが何かと管理もしやすいでしょ？

PLAIN TEXT
JAVASCRIPT:
  1. (function($) {
  2.     $(document).ready(function() {
  3.         $('#target tr:odd').addClass('odd');
  4.     });
  5. })(jQuery);

targetというIDを持つテーブルの奇数行trにoddというクラスを追加してあげてます。
行数の多いテーブルだと、いちいち奇数行にクラスを指定してやるのも面倒だし、行の入れ替えが発生した日にゃぁ、アンタ。リアルで「キーッ！！！」って叫んじゃうってモンですよ。

Javascriptの使用がOKだったら、とてもとても助かるね。

でも例えば、テーブルが2つ続いてて、それらにも奇数行毎にClassを付加したい場合、単純に考えて…

PLAIN TEXT
JAVASCRIPT:
  1. $('table tr:odd').addClass('odd');

としてしまうんだけど、1つめのテーブルが奇数行（例として5）で終わってしまった場合、2つめのテーブルのtrは「リセットされて1から」ではなく「5の続きの6から」となってしまい、なぜか偶数行スタート（本来は1だから奇数）になってしまい、具合が悪いことになっちゃうんですね～困る。
（解決法、探り中。末尾に空の<tr></tr>入れちゃうのでもOK。だけど文法的にはNG）

さらにGoogle Chromeで発見した不具合。
複数の要素を指定する時、コンマ（,）でセレクタを区切れば同時に選択できるのですが、

PLAIN TEXT
JAVASCRIPT:
  1. $('table tr:odd, ul li:odd').addClass('odd');

IEやFirefoxでは意図したとおりの動きになってるんですが、Chromeだけは最初の要素しか識別してくれない。単純な解決方法は、

PLAIN TEXT
JAVASCRIPT:
  1. $('table tr:odd').addClass('odd');
  2. $('ul li:odd').addClass('odd');

2行に分割…orz
うーむ、ちょっと切ないですね…

ちょっと検証が甘いですが、便利なjQueryもちょっとした落とし穴が用意されていますよ…というお話しでした。それでも便利すぎて手から離せないｊQueryなのです。罪なヤツ。

2 コメント

06月29日 

javascript

jQueryネタで喋ってきました

二宮さん（design studio PENCIL）から「jQueryネタで1時間喋れ」とお達しが来てしまったので、京都で立ち上がったグループ「Web★Choco@KYOTO」でデザイナーさん向けのjQuery導入をテーマに喋ってきました。

資料作りの最中に紆余曲折あり、当初予定していた手法でのプレゼン資料ではなく、パワーポイントで作り直すハメに。これが当日の午前3時。そこからコピペ＆原稿追加＆アニメーションなどの調整をして、5時半に就寝。早めに起きて再調整。

早めに出て、嫁と外で飯を食ってから行こうと思ったけど結局その余裕もなく、一緒に家を出たものの1本早い電車に乗って、京都は烏丸にある会場「ちおん舎」に向かいました。
天然方向音痴の自分は、当然の如く駅を出て逆に進んでしまい、なかなかの距離を歩いて目的地へ到着。京都の歴史ある建物でのプレゼンです。とても雰囲気が良いです。

しばらく皆さんが集まるのを待って会が始まりました。
スピーカー1人目は二宮さんで、タイポグラフィーの話。

が、資料の最終確認と調整をしてたので、あまり聞いてません（爆）

1つめのレクチャー終了後、自己紹介タイムと休憩時間。当初喋らないはずだった自己紹介も急遽喋ることになり。。。あまり何を喋ったのか覚えてません。休憩時間も手直しやら眠いやら…
そうこうしてたら自分が喋る番になって。

今回は、「過去にトライしたけど挫折した」、「これからちょっと始めてみたい」、というデザイナーさんに向けた内容を心がけてたので、ちょっと自分としては使用するのが微妙な表現方法なども織り交ぜてしまいながらのプレゼンでした（本職のプログラマーさんからすれば反感買うかもしれない的な）。

順を追って見てもらって、考え方や雰囲気を掴んでもらえたらイイかな？という期待を込めて、これまた予定していなかったライブコーディング（実際にその場でコードを書きながら説明する）をやることにしました（決めたのは当日の午前5時ｗ）。

緊張していないように見えて実は相当しているので、ライブコーディングで単純なミスにすぐに気付くことが出来ず大焦りしてしまった場面が。しかし、スピーカーから「あれが悪いんじゃない？」とか声を上げて下さったので、「これはいい（ニヤリ）」と、“みんなでバグを探して考えてみよう“的な流れに無理矢理持ち込んでみたところ、結構な盛り上がりになってくれてシメシメ。
思わぬ所で、雨降って地固まるというか雨のあとは上天気というか。

持ち時間も数分オーバーで収まって、なかなか良いプレゼンだったのではないかな？と、終わった後に声を掛けて下さったリスナーの方達の反応からも伺うことができた気がします。

んで、質問タイムの時に出た「初心者にお勧めの書籍も紹介すべきでは？」という事だったので今日、本屋に行って立ち読んできました。あまり冊数は無かったのですが、その中でも自分的に良書だな、と思ったのはMYCOM BOOKSの「実践!Ajaxフレームワーク jQuery」です。“Ajax“と入っているので、初心者向けとは異なるのかな？と思ったんですけど、意外とそうでもなく今回のプレゼント併せて読むとイイ感じなのでは無いかな？という印象でした。
興味のある方は読んでみて下さいね。

当日使用した資料は、Web★Choco@KYOTOのサイトにあるのですが、登録とかしてなくても見られるのかな？
興味のある方はご覧下さい。

まー、そんなに喋れるネタを持ち合わせている訳では無いのですが、またこういう機会を与えていただければ喋ってみたいと思います。

たぶんVol.2とかもやるのだと思うので、興味のある方はmixiのコミュニティーなど参加してみては如何でしょうか？

コメントなし

次の記事 »