フロントエンド/サーバーサイドの技術ソースまとめ、、、 http://blog.xlune.com/ 2013-11-03T05:20:00+09:00 Xlune http://blog.xlune.com/2013/11/blogmove.html 2013-11-03T05:20:00+09:00 2016-11-20T16:09:36+09:00 Xlune <!-- article --> <h3 id="blog">Blog仕分けします</h3> <p>さすがに安いvpsでも、こんな更新もしないBlog用にサーバ腐らせておくのはもったいない事に気付いた、、、さっき。</p> <p>なんか、他にやらなきゃいけないことが沢山ある気がするけど、そう思い立ってしまったので仕方ない。<br /> やらなきゃいけない事は、やらなくていいことの後にやればいいじゃん。<br /> どうせやらなきゃいけないんだからー</p> <h3 id="middleman">Middlemanで記事生成</h3> <p>ローカルで記事生成するために、軽量なブログツールをローカルサーバに入れようかと思ったんだけど、Middlemanに公式のブログ機能拡張があったのを思い出したので、それで行くことにした。</p> <p><a href="http://middlemanapp.com/blogging/">Middleman: Blogging</a></p> <p><pre><code>$ mkdir blog $ cd blog $ bundle init $ vim Gemfile + gem "unf" + gem "middleman" + gem "middleman-blog" + gem "middleman-s3_sync" $ bundle install --path=vendor/bundle $ bundle exec middleman init . --template=blog --js_dir=js --css_dir=css $ bundle exec middleman </code></pre></p> <p>な感じで足場を作ったら、テンプレ設定や記事移行を行って完了。</p> <p>ちなみに手動で記事移した。<br /> 記事数少なかったのと、古い記事は軒並み捨てて問題ない感じのばっかだったから。</p> <h3 id="github">GitHubで記事管理</h3> <p>記事というか、MiddlemanプロジェクトをGitHubで管理しとく。しかも、プライベートで。<br /> まぁ、プライベートリポジトリが余ってるのもあるんだけど、公開しとくようなもんでもないかなと。</p> <p>あとせっかくだから、<a href="http://about.travis-ci.org/docs/user/deployment/s3/">Travis CI使ってS3に自動デプロイ</a>してもらおうかと思って設定を調べてたんだけど、Travis CIってプライベートリポジトリの場合は有料なの思い出した。<br /> それで、おいくらですかーと料金見に行ったら$129/月とか書いてあって、鼻水出たので諦めました。</p> <p>さっきしれーっと入れてた、"middleman-s3_sync"はこういう事情からでした。</p> <h3 id="s3web">S3でWebホスティング</h3> <p>ちょっと、<a href="http://pages.github.com/">GitHub Pages</a>でホスティングしてもらうのもいいかなと思ったんだけど、なんか用途が違う気がしたので、S3のWebホスティングを利用することにしました。</p> <p>設定方法は下記の記事がとても丁寧です。<br /> <a href="http://blog.qnyp.com/2013/05/21/middleman-sync/">Middlemanで生成したサイトをAmazon S3で運用する - QNYP Blog</a></p> <p>ただ、"middleman-sync"がうまく動かなかったので、<a href="https://github.com/fredjean/middleman-s3_sync">"middleman-s3_sync"</a>を使いました。<br /> これでコマンド一発でビルドファイルがS3にデプロイされるようになった。便利。</p> <h3 id="section">まとめ</h3> <p>こうしてみると、世の中すげー便利になってんなーって気になりました。<br /> おわり。</p> <p>ーー<br /> さぁ、やらなきゃいけないことやるか、、、</p> <!-- /article --> http://blog.xlune.com/2011/05/jquerysmartpage.html 2011-05-15T21:07:00+09:00 2016-11-20T16:09:36+09:00 Xlune <!-- article --> <h3>非同期ページ(部分)遷移jQueryプラグイン(jquery.smartPage.js)</h3> <p class="mb10"> 元々jQueryは基本的な非同期ページ遷移機能は付いてんだけど、もうちょっと機能を追加しつつ、汎用性を持たせたものが欲しいなーと思ってとりあえず書いてはみました。 </p> <p class="mb10"> ステータスとしては、「書いたよ」じゃなくて「書き始めた」けど限が無さそうなので、自分のサイトで使える程度でいいや、、、です。 </p> <p class="mb10"> html5のpushState(pjax)と"#!"を利用したロケーションハッシュによる非同期ページ遷移の両方を実装したモノを目指してます。非対応(IEとか)の場合は普通に同期遷移します。 </p> <p class="mb30"> 非同期ソースに、"script"タグがあったり、"document.write"の記述があっても、なるべく表示を再現するよう試みますよー。 </p> <h3>jquery.smartPageのオプション/コード</h3> <script src="http://pastebin.com/embed_js.php?i=M0sTMe22"></script> <h3>Download</h3> <ul> <li><a href="https://github.com/xlune/jQuery-SmartPage-Plugin">github</a></li> <li><a href="https://github.com/xlune/jQuery-SmartPage-Plugin/archive/master.zip">zip file</a></li> </ul> <p class="mb30">利用には、<a href="http://jquery.com/">jQuery</a>本体が必要です。別途読み込んでください。</p> <h3>まとめ</h3> <p class="mb10"> なんか久しぶりにjQueryを見てDeferredとか、新しい機能をうまく使わなきゃいけないなーとか思ったけど、使いこなせませんでした。 </p> <p class="mb10"> Deferredにキャンセル機能がほしい、_Deferredにはあるのに、、、Promiseにrejectがほしい、Deferredにはあるのに。。。とか歯がゆい感じになったので早々に諦めました。 </p> <p class="mb30"> もちろん、状態を外部からいじられないようにカプセル化するのは重要なことなんだと思います。。。 </p> <p class="mb10"> --<br /> Chrome Web Storeのアプリ内課金とかが気になる、、、 </p> <!-- /article --> http://blog.xlune.com/2011/04/threejs-cube-3.html 2011-04-24T07:42:00+09:00 2016-11-20T16:09:36+09:00 Xlune <!-- article --> <h3>はじめに</h3> <p class="mb10"><img src="http://blog.xlune.com/up_images/20110424_001.jpg" width="690" height="280" alt="" /></p> <p class="mb10"><a href="http://blog.xlune.com/2011/04/threejs_cube_2.html">前回の記事</a>では<a href="https://github.com/mrdoob/three.js/">three.js</a>のCubeを迷路内で歩かせるものを作りました。</p> <p class="mb10">今回は別パターンの移動方法、経路探索を利用したマウスクリックベースの移動デモをやってみます。</p> <p class="mb10">下記は、今回用に書いたJSコードです。その他汎用ライブラリと合わせて読み込んでください。</p> <ul class="mb30"> <li><a href="http://labs.xlune.com/demo/javascript/square-three-js/js/FieldGenerator.js">FieldGenerator.js</a></li> <li><a href="http://labs.xlune.com/demo/javascript/square-three-js/js/FieldStage.js">FieldStage.js</a></li> <li><a href="http://labs.xlune.com/demo/javascript/square-three-js/js/MrCube.js">MrCube.js</a></li> <li><a href="http://labs.xlune.com/demo/javascript/square-three-js/js/RouteSearch.js">RouteSearch.js</a></li> </ul> <h3>フィールド生成</h3> <p class="mb10"><a href="http://labs.xlune.com/demo/javascript/square-three-js/square001.html"><img src="http://blog.xlune.com/up_images/20110424_002.jpg" width="690" height="280" alt="" /></a></p> <p class="mb10"><a href="http://blog.xlune.com/2011/04/threejs_cube_2.html">前回</a>までは迷路が舞台でしたが、今回はマウスクリックベースの移動なので、戦略ゲームのようなフィールドを用意することにしました。</p> <p>[Demo]</p> <ul> <li><a href="http://labs.xlune.com/demo/javascript/square-three-js/square001.html">Square_001 (WebGLRenderer or CanvasRenderer)</a></li> </ul> <p>[JSソース]</p> <script src="http://pastebin.com/embed_js.php?i=2PyXL1Cb"></script> <p class="mb30">マウスドラッグでフィールドの回転、マウスホイールでズームが行えます。</p> <h3>マウスのヒット判定</h3> <p class="mb10"><a href="http://labs.xlune.com/demo/javascript/square-three-js/square002.html"><img src="http://blog.xlune.com/up_images/20110424_003.jpg" width="690" height="280" alt="" /></a></p> <p class="mb10">まずやらなければいけないのは、フィールドのどこをクリックしているかを判定することです。</p> <p class="mb10">とりあえず、それぞれのブロックの上にクリック対象となるPlaneオブジェクトを敷き詰めました。マウスがそれにヒットすると、表示/非表示処理が行われます。</p> <p>[Demo]</p> <ul> <li><a href="http://labs.xlune.com/demo/javascript/square-three-js/square002.html">Square_002 (WebGLRenderer or CanvasRenderer)</a></li> </ul> <p>[JSソース]</p> <script src="http://pastebin.com/embed_js.php?i=3yQG8s9j"></script> <p class="mb30">現状の<a href="https://github.com/mrdoob/three.js/">three.js</a>では、オブジェクトにイベントを登録する手法はなさそうです。カメラ位置/アングルと表示領域のマウス位置などから3D計算によってヒット判定を行います。また、r39からColliderによる衝突判定ライブラリも追加されているようなので、オブジェクト同士のヒット判定も含め、ある程度簡単になってるのかもしれません。</p> <h3>Cube君の投入</h3> <p class="mb10"><a href="http://labs.xlune.com/demo/javascript/square-three-js/square003.html"><img src="http://blog.xlune.com/up_images/20110424_004.jpg" width="690" height="280" alt="" /></a></p> <p class="mb10">経路探索の前に、<a href="http://blog.xlune.com/2011/04/threejs_cube_2.html">前回</a>と同じ矢印キーで動くCubeを投入します。段差要素がある以外は、前回とほぼ同じものです。</p> <p class="mb10">ここでCube君の動きの微調整を行って、あとは経路探索実装を残すのみです。</p> <p>[Demo]</p> <ul> <li><a href="http://labs.xlune.com/demo/javascript/square-three-js/square003.html">Square_003 (WebGLRenderer or CanvasRenderer)</a></li> </ul> <p>[JSソース]</p> <script src="http://pastebin.com/embed_js.php?i=Q4VXAmDZ"></script> <p class="mb30">今回は、WebGL寄りのデモにして、Cube君を光らせてみました。canvasの方でもライト設定はできますが、重くてなかなかに使いづらいので、canvasの方はライト反射をオフってます。</p> <h3>経路探索の実装</h3> <p class="mb10"><a href="http://labs.xlune.com/demo/javascript/square-three-js/square004.html"><img src="http://blog.xlune.com/up_images/20110424_005.jpg" width="690" height="280" alt="" /></a></p> <p class="mb10">経路探索のアルゴリズムは<a href="http://ja.wikipedia.org/wiki/A*">A*(A-star)</a>を利用しました。wikiにある&quot;アルゴリズムの流れ&quot;をそのまま<a href="http://labs.xlune.com/demo/javascript/square-three-js/js/RouteSearch.js">JSコード</a>に起こしただけになります。</p> <p class="mb10">経路探索用のライブラリはいっぱい落ちてますが、それほど長いコードにならないので自分専用に作ったほうが融通が効いて便利な気がしますね。</p> <p>[Demo]</p> <ul> <li><a href="http://labs.xlune.com/demo/javascript/square-three-js/square004.html">Square_004 (WebGLRenderer or CanvasRenderer)</a></li> </ul> <p>[JSソース]</p> <script src="http://pastebin.com/embed_js.php?i=GaC6xKyK"></script> <p class="mb10">Cube君(正確には足元のパネル)をクリックすると、移動可能領域パネルが表示されます。そこから移動したい場所をクリックすると移動を開始しますよー。<br />戦略ゲームでよく見る移動方式になりましたね。</p> <p class="mb30">移動ルールは、赤いブロックに侵入できない事と、段差は一段差までしか超えられない事となってます。そういうブロックはちゃんと迂回するか確認してみましょう。</p> <h3>まとめ</h3> <p class="mb10">firefox4だとメチャメチャ重いんですけど、、、chromeが速過ぎるのだろうか。。。まぁ、スクリプトちゃんと書けば速くなるのかも。</p> <p class="mb20"><a href="https://github.com/mrdoob/three.js/">three.js本家デモ</a>のクオリティに全然近づけない感じがしてる、やっぱり3Dの知識が必要なようですねぇ。</p> <p class="mb30">まー、クオリティは気にせずに、次回は今回までにやったことを利用しつつ、facebookアプリ(ゲーム)を作っていきたいと思いますー。</p> <ul class="mb30"> <li><a href="http://blog.xlune.com/2011/04/threejs_cube.html">Cubeで遊ぼう！ 迷路生成編</a></li> <li><a href="http://blog.xlune.com/2011/04/threejs_cube_2.html">Cubeで遊ぼう！ Tweenアニメーション編</a></li> <li><a href="http://blog.xlune.com/2011/04/threejs_cube_3.html">Cubeで遊ぼう！ 経路探索編</a></li> </ul> <p>--<br /> ソーシャルアプリでのnode.js実績が気になる、、、GAEでpythonにした方がいいかな。。。 </p> <!-- /article --> http://blog.xlune.com/2011/04/threejs-cube-2.html 2011-04-18T12:33:00+09:00 2016-11-20T16:09:36+09:00 Xlune <!-- article --> <h3>はじめに</h3> <p class="mb10"><img src="http://blog.xlune.com/up_images/20110418_001.jpg" alt="" /></p> <p class="mb10"><a href="http://blog.xlune.com/2011/04/threejs_cube.html">前回の記事</a>では<a href="https://github.com/mrdoob/three.js/">three.js</a>のCubeを使って迷路データを3Dで書きだすまでをやりました。</p> <p class="mb30">今回はその迷路の中を歩きまわるCube君を投入していきますよー。</p> <p class="mb10">・・・その前に、JSコードがかさばるので前回分のコードは最適化して外部ファイルにしてます。事前に読み込んでください。</p> <ul> <li><a href="http://labs.xlune.com/demo/javascript/cube-three-js/js/Maze.js">Maze.js</a></li> <li><a href="http://labs.xlune.com/demo/javascript/cube-three-js/js/Stage.js">Stage.js</a></li> </ul> <p class="mb10">そして下記が、今回の開始時のスクリプトになります。</p> <script src="http://pastebin.com/embed_js.php?i=KAPZgApD"></script> <p class="mb10">その他の外部ファイルは<a href="http://blog.xlune.com/2011/04/threejs_cube.html">前回</a>とほぼ同じですが "RequestAnimationFrame.js" だけ外してあります。</p> <p>[Demo]</p> <ul class="mb30"> <li><a href="http://labs.xlune.com/demo/javascript/cube-three-js/cube001.html">Cube_001 (WebGLRenderer or CanvasRenderer)</a></li> <li><a href="http://labs.xlune.com/demo/javascript/cube-three-js/cube001.html#nowebgl">Cube_001 (CanvasRenderer)</a></li> </ul> <h3>配置と移動</h3> <p class="mb10">壁と同じ要領で、Cubeを作って開始位置に設置します。また、矢印キーで上下左右に移動する実装もここで行っています。</p> <p>[Demo]</p> <ul> <li><a href="http://labs.xlune.com/demo/javascript/cube-three-js/cube002.html">Cube_002 (WebGLRenderer or CanvasRenderer)</a></li> <li><a href="http://labs.xlune.com/demo/javascript/cube-three-js/cube002.html#nowebgl">Cube_002 (CanvasRenderer)</a></li> </ul> <p>[JSソース]</p> <script src="http://pastebin.com/embed_js.php?i=vGPSAQmU"></script> <p class="mb30">上下左右の移動可否は迷路データと照らし合わせて、キーが押されるたびに毎回判定しています。ソース内のCubeクラスがここでのメインコードになります。</p> <h3>Tweenアニメーションさせてみる</h3> <p class="mb10">ものすごく淡白な動きを見せるCube君ですが、やっぱりしっかりと動いている表現が欲しいですよね。ということでTweenアニメーションを実装します。</p> <p class="mb10">TweenアニメーションをさせるにはTweenライブラリを利用するのが手っ取り早いです。有名どころの汎用ライブラリを利用するのもいいんですが、three.jsのソースにはTween.jsが同封されてるようなのでこれを使っていきます。場所は "examples/js/Tween.js" です。配置して読み込みましょう。(<a href="https://github.com/sole/tween.js">GitHubに使い方もあります</a>)</p> <p class="mb10">そして下記がTweenを実装したデモとソースになります。</p> <p>[Demo]</p> <ul> <li><a href="http://labs.xlune.com/demo/javascript/cube-three-js/cube003.html">Cube_003 (WebGLRenderer or CanvasRenderer)</a></li> <li><a href="http://labs.xlune.com/demo/javascript/cube-three-js/cube003.html#nowebgl">Cube_003 (CanvasRenderer)</a></li> </ul> <p>[JSソース]</p> <script src="http://pastebin.com/embed_js.php?i=EeXnjqNq"></script> <p class="mb10">"TWEEN.Tween"のインスタンスに対して各パラメータ設定をメソッドチェーンで繋げていくタイプのTweenライブラリのようです。上記ソースではCubeの動きに連動(onUpdateを利用)して回転も加えています。それ以外はシンプルなTween移動になります。</p> <p class="mb30">また、既にフレーム毎実行の"update"関数があるので、TWEEN自身のエンジンを使わずに、毎フレーム"TWEEN.update()"を呼んで実行しています。</p> <h3>カメラを追従させる</h3> <p class="mb10">今までのデモは、引きの画面で見づらいという印象だったと思います。今回はCube君が主役なので、Cube君をズームアップして追従するカメラを実装します。</p> <p class="mb10">下記のデモでは矢印キーの移動に加えて、Shiftキーによるズームアウトコントロールも追加されています。</p> <p>[Demo]</p> <ul> <li><a href="http://labs.xlune.com/demo/javascript/cube-three-js/cube004.html">Cube_004 (WebGLRenderer or CanvasRenderer)</a></li> <li><a href="http://labs.xlune.com/demo/javascript/cube-three-js/cube004.html#nowebgl">Cube_004 (CanvasRenderer)</a></li> </ul> <p>[JSソース]</p> <script src="http://pastebin.com/embed_js.php?i=38MesqZc"></script> <p class="mb10">カメラの"target.position"にターゲットの位置を入れるとその方向を向くんですが、これだけだとLookAt処理なのでカメラのアングルが変わってしまいます。アングルもそのままにしたい場合は、LookAt処理と同時(処理的には前かな)にカメラの位置もターゲットの移動量に合わせて移動する必要があります。(これは<a href="http://labs.xlune.com/demo/javascript/cube-three-js/js/Stage.js">Stage.js</a>の"update"関数の中に実装があります)</p> <p class="mb30">こういう視点にするだけで、迷路ゲームっぽくなるので不思議ですね。</p> <h3>とりあえず完成</h3> <p class="mb10">テクスチャをそれっぽいのに貼り替えて、ゴール処理(アラートが出るだけです)を追加して、とりあえずは「Cube君の冒険」完成です。</p> <p>[Demo]</p> <ul> <li><a href="http://labs.xlune.com/demo/javascript/cube-three-js/cube005.html">Cube_005 (WebGLRenderer or CanvasRenderer)</a></li> <li><a href="http://labs.xlune.com/demo/javascript/cube-three-js/cube005.html#nowebgl">Cube_005 (CanvasRenderer)</a></li> </ul> <p>[JSソース]</p> <script src="http://pastebin.com/embed_js.php?i=v6e5EymV"></script> <p class="mb30">Cube回転にテクスチャがついていかないように見えるんですが、まぁそのうち。。。</p> <h3>まとめ</h3> <p class="mb20">今回のデモページはWebGLが有効ならWebGLRenderer、無効ならCanvasRendererでレンダリングするようにしたんですが、WebGLが有効だけどWebGLの調子が悪い場合、全く表示されなくなったりしました。。。ので、CanvasRendererのみ版のリンクも貼ってあります。<BR />WebGLはマシン(というかグラボ？)によって機嫌が変わるので、まだちょっとめんどくさいかもしれません。</p> <p class="mb20">とりあえずここまで時点の、three.jsの浅い知識でもPac-Manとかなら3D表現で作れちゃうなーというのが感想としてありますね。<a href="https://github.com/mrdoob/three.js/">three.js</a>、楽しいかも、、、</p> <p class="mb30">次回はCube君を矢印キーではなく、マウスクリックで動かすデモをやりたいと思います。箱庭/戦略系ゲームでよく使う経路探索アルゴリズムを利用した移動方法ですよー。</p> <ul class="mb30"> <li><a href="http://blog.xlune.com/2011/04/threejs_cube.html">Cubeで遊ぼう！ 迷路生成編</a></li> <li><a href="http://blog.xlune.com/2011/04/threejs_cube_2.html">Cubeで遊ぼう！ Tweenアニメーション編</a></li> <li><a href="http://blog.xlune.com/2011/04/threejs_cube_3.html">Cubeで遊ぼう！ 経路探索編</a></li> </ul> <p>--<br /> Unity3Dの方がニーズ高いのかも、、、 </p> <!-- /article --> http://blog.xlune.com/2011/04/threejs-cube.html 2011-04-16T09:40:00+09:00 2016-11-20T16:09:36+09:00 Xlune <!-- article --> <h3>はじめに</h3> <p class="mb10"><img src="http://blog.xlune.com/up_images/20110416_001.jpg" alt="" /></p> <p class="mb10"><a href="https://github.com/mrdoob/three.js/">three.js</a>はレンダラを変えるだけで、Canvas(2D)にもWebGLにも書き出せるっていう、色々と技術遷移中の今の時代にピッタリなJavascript 3D Engineです。</p> <p class="mb30"><a href="http://nodejs.org/">node.js</a>も楽しいけど、表現系でも遊んでみたい！って時に手軽にさわれる逸品です。(3Dよくわかりませんが・・・)</p> <h3>とりあえずは準備</h3> <p class="mb10">まず、<a href="https://github.com/mrdoob/three.js/">GitHub</a>からソース落としてきます。gitで落としてもいいし、zipファイル(右の方にダウンロードボタンがあるよ)でも落とせます。</p> <p class="mb30">展開すると色々入ってますが、基本必要なのは "build/Three.js" です。サンプルでは他のも利用しますが、随時配置してください。</p> <p class="mb10">あー、それと<a href="https://github.com/mrdoob/three.js/">three.jsのデモ</a>を見た人は、3Dモデリングソフトで作ったモデルを読み込んでグリグリ・・・みたいなのを期待してるかもしれませんが、今回そーいうの無いですよ、自分、3Dソフト使えませんし。。。</p> <p class="mb30">そっちに興味ある人は、ソースの "utils/exporters" の中にそれぞれの形式の書き出しプラグインやコンバータと、読み込み方が記載されてるんで試してみてください。ただ、一応やってみた限りでは、WebGLRenderer以外ではほぼ使えないです、重さ的な意味で。</p> <h3>HelloWorld的なのを表示してみる</h3> <p class="mb10"><a href="https://github.com/mrdoob/three.js/">three.jsページ</a>の"README&gt;Usage"の所に回転Cubeを表示するシンプルなコードが記載されてます。たぶんこれが、three.jsでのHelloWorldだと思うのでまずこれを表示してみます。</p> <p>[Demo]</p> <ul> <li><a href="http://labs.xlune.com/demo/javascript/hello-three-js/hello001c.html">HelloWorld_001 (CanvasRenderer)</a></li> <li><a href="http://labs.xlune.com/demo/javascript/hello-three-js/hello001w.html">HelloWorld_001 (WebGLRenderer)</a></li> </ul> <p>[JSソース]</p> <script src="http://pastebin.com/embed_js.php?i=t9dAwiS0"></script> <p class="mb10">回転するワイヤーフレームCubeが表示されたかと思います。ページに合わせてサイズなどをいじってますが基本そのままです。</p> <p class="mb10">このサンプルに必要な追加ソースは "examples/js/RequestAnimationFrame.js" です。別途読み込みましょう。(さらに上記デモでは "examples/js/Stats.js" と<a href="http://jquery.com/">jQuery</a>も読み込んでいます)</p> <p class="mb30">では、これをいじって遊んで行きましょう。</p> <h3>テクスチャを貼ってみる</h3> <p class="mb10">ワイヤーフレームでは寂しいので、なんか貼ってみます。次の画像が用意したものです。</p> <p class="mb10"><img src="http://labs.xlune.com/demo/javascript/hello-three-js/images/texture001.png" width="40" height="40" alt="0" /></p> <p class="mb10">テクスチャを貼るには、Cubeに対してマテリアルを指定してあげます。指定方法はソースの"THREE.Cube"をnewするあたりを参照してみてください。またコンストラクタ引数の簡易説明もコメントで入れてあるので参考にしてみてください。</p> <p>[Demo]</p> <ul> <li><a href="http://labs.xlune.com/demo/javascript/hello-three-js/hello002c.html">HelloWorld_002 (CanvasRenderer)</a></li> <li><a href="http://labs.xlune.com/demo/javascript/hello-three-js/hello002w.html">HelloWorld_002 (WebGLRenderer)</a></li> </ul> <p>[JSソース]</p> <script src="http://pastebin.com/embed_js.php?i=V6QHY945"></script> <p class="mb10">Cubeは面のそれぞれに違うテクスチャを張れるんですが、今回は全部同じ物を貼ってます。用意するテクスチャの画像サイズについては詳しくないのでわからないんですが、とりあえずCubeの面に対して自動フィットしてくれるのでいいかなと。。。</p> <p class="mb30">とりあえずソースを漁っていかないと、使い方が分からないですね、一応<a href="https://github.com/mrdoob/three.js/wiki/API-Reference">APIドキュメント</a>はあるようですが。。。</p> <h3>カメラを動かしてみる</h3> <p class="mb10">カメラがターゲットの周りをグルグル回るようにしてみます。ターゲットがCube一つだとわかりにくいので複数置くことにしましたよ。</p> <p class="mb10">カメラの移動はカメラのインスタンスプロパティ "position" を変更します。"position" は "THREE.Vector3" という型で "x, y, z" のプロパティを持ちます。</p> <p>[Demo]</p> <ul> <li><a href="http://labs.xlune.com/demo/javascript/hello-three-js/hello003c.html">HelloWorld_003 (CanvasRenderer)</a></li> <li><a href="http://labs.xlune.com/demo/javascript/hello-three-js/hello003w.html">HelloWorld_003 (WebGLRenderer)</a></li> </ul> <p>[JSソース]</p> <script src="http://pastebin.com/embed_js.php?i=Ncgyb1tp"></script> <p class="mb10">矢印キーの、左と右で回転します。見た目じゃわかりませんが、オブジェクトではなくてカメラが動いてますよー。</p> <p class="mb30">THREE.Cameraのインスタンスプロパティには自分自身の位置 "position" と注視点である "target.position" があります。Demoは注視点固定(0,0,0)でカメラ位置だけがグルグル回ります。</p> <h3>迷路を表示してみる</h3> <p class="mb10">以前、<a href="http://blog.xlune.com/2008/07/javascript_1.html">迷路生成のJSを書いてた</a>ようなので、それを流用して迷路データを3Dで表示するDemoを作ってみました。</p> <p>[Demo]</p> <ul> <li><a href="http://labs.xlune.com/demo/javascript/hello-three-js/hello004c.html">HelloWorld_004 (CanvasRenderer)</a></li> <li><a href="http://labs.xlune.com/demo/javascript/hello-three-js/hello004w.html">HelloWorld_004 (WebGLRenderer)</a></li> </ul> <p>[JSソース]</p> <script src="http://pastebin.com/embed_js.php?i=0N8G6fSZ"></script> <p class="mb10">基本は迷路データに合わせてCubeを配置していくだけなんですが、面数が多くなりがちなので注意が必要です。とりあえず隣り合っていて表示の必要がない面は生成しないようにしましょう。</p> <p class="mb10">具体的には"THREE.Cube"コンストラクタ第9引数の"sides"で生成しない面を指定していきます。(詳しくはソースを参照してください)</p> <p class="mb30">あと、テクスチャにラインが入ってるせいで、カメラが引きの状態だとモデル全体がビガビガしますね、、、テクスチャはちゃんと作りましょう。</p> <h3>まとめ</h3> <p class="mb10">まだちょっとドキュメントが少ない印象があるんですが、ソース自体は多くないので、詰まったらソース追っかけた方が早そうです。</p> <p class="mb30">マルチレンダラで便利かとも思ったんですが、やはりそれぞれ微調整は必要なようです。あとこれは仕方ないですが、仕様がコロコロ変わりますね。リビジョン上げるときは覚悟しましょう。</p> <p class="mb30">今回はフィールド環境を作る部分をやったので、次回は迷路を歩きまわるCube君(仮)を作ってみたいと思います。</p> <ul class="mb30"> <li><a href="http://blog.xlune.com/2011/04/threejs_cube.html">Cubeで遊ぼう！ 迷路生成編</a></li> <li><a href="http://blog.xlune.com/2011/04/threejs_cube_2.html">Cubeで遊ぼう！ Tweenアニメーション編</a></li> <li><a href="http://blog.xlune.com/2011/04/threejs_cube_3.html">Cubeで遊ぼう！ 経路探索編</a></li> </ul> <p>--<br /> いや、後半ウトウトしてグダグダになっちゃたな。。。 </p> <!-- /article --> http://blog.xlune.com/2010/02/jquerygcomplete.html 2010-02-21T07:20:00+09:00 2016-11-20T16:09:36+09:00 Xlune <!-- article --> <h3>テキストオートコンプリートjQueryプラグイン(jquery.gcomplete.js) by Google API</h3> <p class="mb30"> いやー、Googleの検索って便利ですよね。特にローマ字で打ってんのに日本語候補出してくれるのがシビれます。 なので、あの恩恵を普通のテキストフィールドでも受けれるようにしたいなーって思って勢いで書きました。<br /> <br /> もちろん、GoogleSuggest系のjQueryプラグインが山ほどあるのは知ってるんですが、山ほどありすぎて逆にわけわからんのでもっと混沌とさせようかと。。。 </p> <h3>Demo</h3> <ul> <li><a href="/2010/02/gcomplete/">Demo Page</a></li> </ul> <p class="mb30">利用方法はデモのソースを確認してください。</p> <h3>Download</h3> <ul> <li><a href="https://github.com/xlune/jQuery-gComplete-Plugin">github</a> </li> <li><a href="https://github.com/xlune/jQuery-gComplete-Plugin/archive/master.zip">zip file</a></li> </ul> <p class="mb30">利用には、<a href="http://jquery.com/">jQuery</a>本体(必須)と<a href="http://plugins.jquery.com/project/mousewheel">jquery.mousewheel</a>プラグイン(オプション)が必要です。別途読み込んでください。</p> <h3>更新情報</h3> <dl class="mb30"> <dt>v0.1.2 (20100223)</dt> <dd>バックエンドをカスタマイスしたデモを追加。</dd> <dd>上記のカスタマイス関連とその他スクリプト修正。</dd> </dl> <dl class="mb30"> <dt>v0.1.1 (20100221)</dt> <dd>単語ごとにテキスト補完する、"oneword"オプション追加(タグ入力みたいに使えます)</dd> </dl> <dl class="mb30"> <dt>v0.1.0 (20100221)</dt> <dd>Betaバージョンリリース</dd> </dl> <h3>Todo</h3> <ul> <li><strike>Google APIを利用しない、カスタマイズ版のデモを用意</strike></li> <li>グリモン書いて、どのページでも使えるようにしたい</li> <li>必要があればIE6対応のCSSを用意</li> <li>とりあえず、テストする</li> </ul> <p class="mb30">あとは<a href="http://twitter.com/xlune">Twitter</a>でゴニョゴニョします。</p> <h3>まとめ</h3> <p class="mb30"> IE6とかでは表示崩れますが、CSSいじれば対応できると思います。もうIE6とか用にCSS書きたくないので全体的にレギュレーションから外して欲しいですね。<br /> あと冷静に考えると、普通のテキストフィールドでグーグルのキーワードでるとウザイだけですねー。。。 </p> <p class="mb10"> --<br /> DevFest Quiz面白かったです。もっとやってください。 </p> <!-- /article -->