three.jsをさわってみた話
3Dに興味あります。そこでjavascriptで3Dに関することを扱うライブラリでthree.jsというのを触ってみました。レンダリングにwebglを使えることが特徴です。コード書いたのだいぶ前だけど忘れないうちにメモ。
○three.js
○three.jsを使って作ったもの
ゲームっぽいもの。すぐに動きます。
https://dl.dropboxusercontent.com/u/19360039/threejs-sandbox/examples/game_avoidblock.html
○ソースコード
https://github.com/arvelt/threejs-sandbox/blob/master/examples/game_avoidblock.html
3Dのあれやこれをあれほどの少ないコード量で書くことができます。3Dのことを全く知らない状態から初めていますが、とりあえず動くものを作ることができました。
○気づいたこと
・3Dがそもそもわからない
サイトならここ
http://wgld.org/d/webgl/w003.html
本ならこれ
1,2,3章あたりに、コンピューターで3Dを扱うことの体系的な概念が書いてあるので、ほんとうの初学者におすすめ。
コンピューターで2Dとか3Dとかって意味わからんしと思ってたのが、ぼんやりとわかるようになる。
・んでthree.jsで何ができんの
公式サイトのexsample。
http://stemkoski.github.io/Three.js/
three.jsのサンプルを集めたサイト。こういうことやりたいときはどうやんのってときに探しに行くときに眺めると閃きを得たりする。
webglはそもそもなんやねんというのがわからないときなど。体系的に書いてるので読みやすい。
・実際にとるべき手順
1.まず3Dの概念をおぼろげに理解する
2.それらがthree.js上でどう抽象化されているか把握する
3.自分がやりたいことは3D的にどう実現したらいいかを分割する
4.その分割した要素をやってるサンプルを探す。
5.ソースを読んで真似をする
6.コード書く、動かす、デバッグする。
7.4-6を繰り返す。
8.完成!
・まとめ的な
three.jsはシーン、ジオメトリ、ライト、カメラ、レンダリング、を書いていくと完成する。
three.jsはいまだ黎明期であり、バージョン上がれば動かなかったりするようなものがざらにあるので注意しないといけない。
3Dのモデルは形状と表面を分けて考える。
表示するものがないとなにも意味が無いので、3Dモデリングが最も重要。
3Dの本質は数学の世界なのでかつて因数分解でつまづいた私には手に負えない。もし続けていくならば、抽象化したものに対する操作の概念として把握しなければならない。
小さなチーム、大きな仕事(完全版)の読書メモ
小さなチーム、大きな仕事を読みました。サクサク読めていいですね。
1つのことを、自分たちだけでやれ。技術をどうこうというかは、意識を高めてくれる良書です。
内容メモ
現実の世界とは場所ではなく言い訳だ。何も試さないことの正当化だ。あなたには関係ない。
現実と折り合わない計画にしたがうのはもっと恐ろしい。
本当のヒーローは仕事をさっさと片づける方法を見つけ出し、とっくに帰宅している。
すごい製品やサービスを生み出す最も単純な方法はあなたが使いたいものを作ることだ。
中途半端な1つのものよりも、とてもよくできた半分の大きさのもののほうがいいに決まってる。
始めるときは、ディティールは忘れろ。
一番大切なものが残るまで切り落としてそれを繰り返していく。
副産物を生み出していることすら気づかない。だが副産物も売れる。
どういった問題を解決するのか?ほんとにそれに価値があるのか?
睡眠をとろう。
問題を可能な限り小さな要素に分解する。
模倣の問題は理解を飛ばしてしまうこと。
競合の一つ上をいくのではなく、一つ下回るようにしてみる。その代わりそれをうまくやる。
顧客が常に正しいと信じてはいけない。
既存の顧客にこだわり続けると、新しい顧客が切り離されてしまう
偉大な料理人はレシピを公開し料理本を書く。ビジネスも彼らを見習うべきなのだ。
試してもらう。それが顧客にとって手放せないものであるなら、利益を得られる。
まず自分自身でやってみる
限界の時こそ人を雇う、その前の段階ではない。
有能な人でも、必要のない人間を雇うことはない。
顧客と社員の間に人が多いほど、顧客の声は歪んだり失われる。
ポジティブな意見よりネガティブな意見のほうが情熱的にうるさい。
文化とは方針ではない、物や行事や言葉でもない。行動だ。
何でも許可が必要を必要とする環境は、何も自分で考えない文化を作る。社員を子供扱いする必要はない。
書き物が格式高くある必要はない、あなたらしく正直であればよい
小さなチーム、大きな仕事〔完全版〕: 37シグナルズ成功の法則
- 作者: ジェイソン・フリード,デイヴィッド・ハイネマイヤー・ハンソン,黒沢 健二,松永 肇一,美谷 広海,祐佳 ヤング
- 出版社/メーカー: 早川書房
- 発売日: 2012/01/11
- メディア: 単行本
- 購入: 21人 クリック: 325回
- この商品を含むブログ (32件) を見る
Developer Summit 2014にいったときのメモ
pythonのflaskで自分用アップローダを作った話
ニンテンドー 3DSありますよね。
あれの新絵心教室っていうゲームで、書いた絵を写真として保存しておけるんです。
その写真を取り出してネットにあげようとおもうと、SDカードを取り出してPCにつなげてコピーしてアップロードしないといけないんですね。
これがめんどくさい。
3DSのブラウザから直接ネットにアップロードして、
PCから同じ場所みてその画像を取得できるようにしたいと思いました。
そこで自分用の3DSのブラウザで使えるアップローダを作りました。
こんな感じ。なお実物は私しか知らない場所にありますのでご了承ください。
https://github.com/arvelt/flask-fileupload-sample
作ってから調べたらやはりすでにあったんですけど全く問題ありません。
はいでは作ってみてわかったことや気になったコトなど書いていきます。
○以下ハイライト
・flaskすごい。pythonのsinatraみたいなやつ http://flask.pocoo.org/
・コントローラーとテンプレートをさくっと提供してくれて楽
・os.pathがすごい
・3dsブラウザのUserAgentは「Nintendo 3DS」
・gitで空のディレクトリを保持したいときは.gitkeep入れるといい
・flask.url_forを使うと欲しいurlはだいたいとれるのでちゃんとドキュメントかソースを読むのがおすすめ
・デプロイはちゃんとわかってないとめんどくさい
○以下参考にした場所とか
http://flask.pocoo.org/docs/quickstart/
公式ドキュメントのクイックスタート。ここ読むとだいたいはわかる。ちゃんとFile Uploadsの項目があってありがたい。
http://memo.yomukaku.net/entries/195
空のディレクトリを保持したいときは空の.getkeepをおいておくらしいという話。
http://zafiel.wingall.com/archives/7513
flaskアプリをapache上にデプロイするときのやり方について。自分でやってみるとこのパスはどう書くんだよってなりがち。
○気になること
・モデル
DBとマッパーはpeewee+SQLiteだと小さく手軽にやれそう。https://pypi.python.org/pypi/peewee
・python
python自体をあまりわかってないことに気づいた。文字コード。日付操作。型とか。
・pythonエコシステム
python自体以下略。virtualenv、setuptool、pip、pep8とかよくわかってない
・Paas
flaskはかなり手軽なのでなにかさっと書きたいときによさそう。そこでさっと書いたやつをぱっと公開するためにPaasに載せる方法を調べておきたい。
Windows8を新規インストールしたときに行うことメモ
http://arvelt.hatenablog.com/entry/2013/09/24/110048
これに追加で8系のときに必要な設定。
デスクトップで使用するために変える。
1.起動したらスタート画面じゃなくてデスクトップを表示するようにする。
http://www.atmarkit.co.jp/ait/articles/1302/22/news054.html
2.アプリ起動でスタート画面までいかないと行けないので、デスクトップにランチャーおく。Orchis
http://www.eonet.ne.jp/~gorota/
3.ロック画面を表示しないようにする。
http://windows8.a-windows.com/login.html
Unity入門1
Unityを触っていきます。
できたもの。リンクはあとで変えるかも
https://dl.dropboxusercontent.com/u/19360039/block-ball1/block-ball1.html
・できたこと、わかったこと
Unityではシーンという単位でゲームを作る。
ゲーム内に存在する全ての概念を、ゲームオブジェクトとして扱う。
ゲームオブジェクトに挙動や設定やスクリプトを、コンポーネントとして追加していく。
カメラとライトが必ず必要。
オブジェクトに物理的な特性(硬さ、重さ、重力の影響)を与えたい場合はRigidbodyコンポーネントを使用する。
jsの場合、コンテキストメニューのcreate-javascriptからスクリプトを作成し、オブジェクトにドラッグすると紐付けできる。start()は開始時に1度、update()は毎フレーム呼ばれる。gameObject変数が自分自身を指す模様。変数を関数スコープ外で宣言することで、インスペクターUIで直接設定できるようになる。
反射等はPhysic Materialコンポーネントで設定できる。
ユーザー入力はInput Managerによって抽象化されている。Input.GetAxisRaw("Horizontal")で左右、Input.GetAxisRaw("Vertical")で上下が取得できる。それぞれ-1~1が返る。
Coliderが設定されたもの同士が衝突するとOnCollisionEnter()が発生する。その中でDestoy(gameObject)と書くと自分自身が消える。ブロックにこのスクリプトを設定すれば、ボールが当たったときに消える。
参考にしたもの
http://japan.unity3d.com/developer/document/tutorial/my-first-unity/01
公式にあるチュートリアル。
惜しむらくは全四回のうち第一回しか公開されていない。
http://dotinstall.com/lessons/basic_unity/24624
http://kusogamer.blogspot.jp/2013/05/unity_16.html
衝突検知はここから。
ステートフルJavascriptを読んでのまとめ
ステートフルJavascriptを読んであとで思い返すためのメモ。
フロントエンドでMVCをやるという今流行りの知見における走りなのかと思う。
コントローラーはURLハッシュの変化を検知する。ビューはテンプレート使い、モデルと対応する。モデルの更新でビューが同時に更新される。このへんのMVCの役割を把握しておけばあとはFWで処理する感じ。紹介されてたBackborn.jsのサンプルをいつでも見れるようにしておいた。
https://github.com/arvelt/backborn-sample
以下メモ
・クライアントでMVCをやる
・モデル、ビュー、コントローラーの役割とは。
・JavascriptのProttypeの仕組み
事実上の継承とみなせる。それを用いたクラスっぽい定義。
・要素の外側から内側の順にイベントが発生していくイベントキャプチャリング。要素の内側から外側へイベントが発生していくイベントバブリングがある。実際にはイベントバブリングが使われることが多い。
・イベントに関係するプロパティ。bubbles,button,ctrlKey,altKey,shiftKey,metaKey,isChar,charCode,keyCode,which,pageX、pageY,screenX、screenY,currentTarget,target、originalTarget,relatedTarget。
・非Domにも使用できるパブリッシュ/サブスクライブパターンについて。
・ORMを用いてサーバーのデータをモデルとして扱う。モデルのインスタンスをDomと関連付けて扱う。
・コントローラーの内部状態をローカルスコープに保存し、モジュール内にカプセル化するやりかた。
・コントローラー1つにビュー1つを対応させる。
・URLのハッシュを検知することでルーティングをする。
・モデルの更新をすることで、テンプレートで定義されたビューが更新されるようにする。
・RequireJSで依存性を管理する。
・WebSocketで表現するリアルタイム性。Node.jsとSocket.IO
・Xunit系のQUnitやSpec系のJasmineを用いたユニットテスト。
・開発コンソールで使用できる。consoleオブジェクト。log()、trace()、profile()、time()など
・デプロイ時に有効的な、YUI Compressorを用いたコードの最小化。
ステートフルJavaScript ―MVCアーキテクチャに基づくWebアプリケーションの状態管理
- 作者: Alex MacCaw,牧野聡
- 出版社/メーカー: オライリージャパン
- 発売日: 2012/06/09
- メディア: 大型本
- 購入: 7人 クリック: 356回
- この商品を含むブログ (10件) を見る