ネームスペースすら存在しないjavascriptに秩序と安寧をもたらす一筋の光。AMD(以下require.jsを想定)との出会いにより、javascriptは文字通り大舗装されていった。 なんと言ってもJavaやC#的なクラス(モジュール)単位でのファイル分割と、ファイル間の依存関係を一挙に解決してくれる恩恵は絶大であった。 さらに嬉しいことに、ビルドする必要がなくブラウザで即動かすことができるというjavascriptの利点はそのまま残る。そして公開するタイミングになったらr.js使ってビルド圧縮と至れり尽くせり。 こうして全てのフロントエンドjavascriptに平和は訪れたのである、めでたしめでたし・・・と最近までは思っていた。 AMDで作った自作javascriptをライブラリとして公開するにはどうすんの??? 困った、困った困った。 何がしたいのかと言うと、jqueryみたいにAMDで製造をするけど、公開時には$に全ての機能が集約されているという状態にビルドしたい。 とりあえずお手本としてjqueryがどうやってビルドしているのか研究しようと思うも、正直全く理解できない。というのも、r.jsとかでモジュール結合して終了という単純なものではなく、結合してからさらに別ファイルの記述をconcatするとかいろいろしていて全容がなかなか掴めない。 極めつけは、githubのそれぞれのソースファイルではdefineやrequireが登場しているのに、公開されているjquery.jsの中身にはそれらしき記述が登場しなくてAMD系ライブラリがなくても問題なく利用できる。…

タッチ系の操作を行うときにcanvasが選択されてしまうと非常に煩わしいのでそれを無効化する方法。 とりあえずThree.jsとは関係なく選択を無効化するにはcssでこんな設定をしておけばよい。 body { user-select: none; -moz-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } 4つ全部設定する必要はない気もするが、とりあえずこれで選択を無効化できる。 もちろんbody全体に対して設定する必要は別にない。 この設定で選択は無効化できるが、なぜかThree.jsで追加したcanvasをスマホで長押しすると暗転処理がされてしまう。 htmlに元々書いておいたcanvasは暗転しなかったり、iframeで読み込むと暗転しない場合もあったりとどうもよく挙動がよくわからない。 選択自体は無効化されているので操作には影響しないが、やはりいちいち暗転されるとかなり煩わしい。 そして解決策を探しまくってやっと見つけた方法がこちらサイト様に記述されているリンクタップ時のハイライト表示を変更する方法。 つまりこうすればよい。 body { user-select: none; -moz-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color:rgba(…

タイトルの通り。 とりあえず下記サイト様の方法で問題なく実現できる。 WebGL対応のライブラリThree.jsを爆速にする方法 ただしこの方法は少し古いらしく、コンソールには「mergeというメソッドはGeometryUtilsクラスからGeometryクラスに移動しました。」的な表示がされてしまう。 原文は「THREE.GeometryUtils: .merge() has been moved to Geometry. Use geometry.merge( geometry2, matrix, materialIndexOffset ) instead.」 暫定最新版の仕様通りに実装してこのアラートを消す方法のメモ。 以下では上記サイトのコード内容に沿って進めます。 //Geometryオブジェクト var geometry; //Meshオブジェクト var meshItem; まずはアラートに従って素直に THREE.GeometryUtils.…

以前Three.jsを触り始めた頃に、2次元ではブロック崩しが定番なように、3次元ならルービックキューブが定番だろと勝手に決めつけてチャレンジしたことがある。 しかし結局ルービックキューブを完成させることはできず、妥協して違うものを作ったという半年ほど前の苦い過去。 そのときどうしても解決できなかったのがブロックの回転。 クォータニオンという概念を初めて知ったのもあって解決策が全く分からなかった。 状況としては、大体以下のような感じ。 ルービックキューブなのだからブロックの回転は常にx,y,zの3軸に対して行いたい。 となればまぁ普通にこんな風な回転用のクォータニオンオブジェクトを作成する。 //操作対象メッシュ var mesh; /* メッシュ等の作成部分省略 */ //3軸 var Axis = { "x" : new THREE.Vector3(1, 0, 0).normalize(), "y" : new THREE.Vector3(0,…

前回 の記事でDataTablesが内部的に持っているデータを取得できるはずと書いたが、やはりというか当然というかもちろん実装されていた。 普通に日本語の解説サイトで便利機能が網羅されている。 ただこのページの右下には 「Last-modified: Tue, 12 Jun 2012 23:16:16 JST (1043d)」 とあるからちょっっと古い雰囲気。 やはり本家さんのが最新バージョンでの使い方なのかな。 ということで今回は本家のマニュアルを参考したプロパティ設定でやってみる(引き続き@DataTables 1.10.6)。 とりあえず列定義用のオブジェクトはこんな風でいける。 var colDef = [ { "title" : "お名前", "data" : "name" }, { "title" : "出席", "data" : "attend", "render"…