サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
やる気の出し方
ndruger.hatenadiary.org
リクエスト受付時のログ(コントローラーレイヤー) PhoenixでのPlugの定義(https://github.com/phoenixframework/phoenix/blob/master/lib/phoenix/controller/logger.ex) Plugでは.callの第2引数がlevelになっている PhoenixでのPlugの設定場所(https://github.com/phoenixframework/phoenix/blob/master/lib/phoenix/controller.ex#L126) __using__のoptsをそのままPhoenix.Controller.Loggerに渡している サーバアプリでレベルをdebugではなくinfoにしたい場合 Phoenix.Controllerのusingに引数で設定する(https://github.co
(function(){ var timer_id; var i = 0; timer_id = setInterval((function(){ console.log(i); i++; if (i == 10) { clearInterval(timer_id); } }), 1000); })(); 結論としては、ライブラリの物を使うのがいい。
生成するhtmlコードに関する部分が中心。 まだ修正・追記をする予定。Adobe Edgeを追加予定。 [2011/12/31 コメントで指摘をいただいたExGameの間違いを修正] Swiffy v3.6 Flash(swf)をhtml5を使ったコンテンツに変換できるGoogleのwebサービス。ActionScript2まで対応。 Google Lab廃止から生き残ったし、アップデートもされているので、Googleも力を入れている模様。 生成するhtmlコード Flashの変換結果として大量のjsonデータが出力され、それがランタイム(runtime.js)によって実行される。 Flashのアニメーションのオブジェクトの移動は、SVGのtransform属性のmatrixに変換している。相当重くiPhone4ではシンプルなコンテンツでないと厳しい。 ベクタ画像はSVGに変換される ja
ChromeとSafariの最新版で動きます。 自動で回転 javascript:(function(){var%20url='http://ndruger.lolipop.jp/hatena/20110919/css_3d_bookmarklet.js';var%20e=document.createElement('script');e.charset='UTF-8';e.src=url;document.getElementsByTagName('head')[0].appendChild(e);})(); 手動で回転 javascript:(function(){var%20url='http://ndruger.lolipop.jp/hatena/20110919/css_3d_bookmarklet.js?mode=manual';var%20e=document.create
iPhoneでのCSS 3D Transforms利用の可能性を探るために、CSS 3D Transformsを使って3Dゲームを作ってみました。 javascriptによる3DゲームですがiPhoneのブラウザで結構スムーズに動きます。 デモページ http://ndruger.lolipop.jp/hatena/20110705/css_3d_game/css_3d_game.htm 動作環境 iPhone4 OS 4.3 Chrome14, Safari5 iPhone用ゲームですが、デバッグ用にマウスのドラッグでも操作できます 非対応環境の例 Android 傾きがブラウザから取れないので動きません。 iPod touch 第2世代 OS 4.2.1 deviceorientationイベントが発火しないので動きません。devicemotionイベントは発火するのでそちらで回転の検
基本 拡大・縮小を避ける 下記の指定 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"> iPhone4の解像度はiPhone3Gより縦・横に倍大きいが、width=device-widthを指定してもiPhone3Gと同じ320pxが返り、表示時に2倍に拡大されて描画される。style指定で見かけ上の拡大を避けれなくはないが、今回はしない。 img.width / img.heighが画像の実サイズと異なる値を入れたり、canvasでの拡大をすると遅くなるのでしない タイマーはまとめる ゲームと同じように1つのループで行う。タイマーを増やすと遅くなるし、canvasならclearRect()が増える。 移動量は経過時間ベースで
Androidはorientationchangeイベントが来ても、その時点でまだdocument.documentElement.clientHeight / document.body.clientHeight / window.innerHeightがまだ変わっていない。iPod touchは変わっている。 Androidはorientationchangeがアラートダイアログで発生するので、orientationchangeのリスナー内でアラートダイアログを出すと無限ループする。iPod touchはアラートダイアログでは発生しない。 参考 javascript - Android Browser orientationchange event keeps firing - Stack Overflow この仕様の理由は、Androidはアプリ切り替えが前提にあるので、ブラウザから
CSSで描かれたぐぬぬ画像などを見てたら、ふとhtml + CSSだけでアクションゲームが作れないかと思ったので作ってみました。 ページ移動すればいくらでも可能ですが、それだとつまらないので、1ページ内で作るという縛りもつけてます。 デモページ http://ndruger.lolipop.jp//hatena/20110429/css_game/css_game.htm Chrome / Safariの最新版で動きます。Firefox / IEだと動きません。 ソースコード https://github.com/ndruger/css-game 技術的な説明 アニメーションはCSS Animationを使うだけなので簡単ですが、問題は状態管理です。 アクションゲームを作るには、基本的に下記の要素が必要です。 1. ユーザー入力に対する状態の変更 2. 状態の保持 3. 状態に応じて見た目
こてさきAjax:Stream APIで、カメラの映像をWebSocket ライブ配信 - livedoor Blog(ブログ) http://blog.livedoor.jp/kotesaki/archives/1667452.html 上記のブログで、Stream APIを使ってカメラの映像をブラウザで取得できると知ったので、下記のjavascriptで顔認識ができるライブラリを使って、カメラの映像の顔認識を試してみた。 JavaScript+canvasで顔認識 - 開発な日々 http://hinata.in/blog/20100227231617.html 実行 1. http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview にあるOpera mobileのテクニカルプレビューをインストール 2. op
Firefox 4 for Mobile: Demos! ✩ Mozilla Hacks – the Web developer blog http://hacks.mozilla.org/2011/03/webowonder-mobile/ 上記のページを見て、WebGLはどうだろうと思ってFirefox for Mobile4.0b1で試したら動いた。・・・ただし、なぜか逆さま。 まずはLearning WebGLのLesson2(http://learningwebgl.com/lessons/lesson02/index.html)。 次にScene.jsのティーポット(http://scenejs.org/dist/curr/extr/examples/hello-teapot/index.html)。 最後に自作のWebGLサンプルゲーム(http://www.syspri.o
Kinect(キネクト)勉強会 Vol.1で発表した物です。 以前Kinectを使ってブラウザのWebGL内を動いてみた - 最高のコンピューティング環境とは?にて、Kinectとブラウザをnode.jsで繋げたので、それを少し発展させて、ゲーム(?)を作ってみました。 HMD(VR920)使ってWebGL内を見渡してみた(試作) - 最高のコンピューティング環境とは?の実験結果も併用して、VR920で周りを見渡すことも出来ます。 デモムービー VR920モード off VR920モード on 対応ブラウザはChromeの最新版とFirefox4の最新版。 ただし、Firefox4だとnetwork.websocket.override-security-blockを変更しないと、WebSocketが使われないので、檄重。 WebGLを使うのでPCにプログラマブルシェーダーが必要。 操作方
この作品は「第0回 HTML5プログラミング&クリエイティブ・コンテスト」へ応募した作品です。 WebSocketの普及により、ブラウザの載っている端末は、他のブラウザで表示している物の、リアルタイムなコントローラーとして利用できるようになることを実感できるような内容となっています。 iPhone / Androidをマルチプレイヤーゲームコントローラーとしての利用する作品として2つのパートに分かれています。 パート2が、加速度センサーとWebGLを使った物です。 パート1. WebSocketを利用したiPhone / Androidによるマルチプレイヤーゲームコントローラーのサンプルゲーム1 この作品では、WebSocketを使えば、特定の場所に集まった人々が、iPhone / Androidをコントローラーとして利用して、一緒に簡単にゲームに参加できることを示します。 技術的な内容は
HMDのVR920には加速度センサーがついているので、それを使うと、顔をどこに向けているのか分かります。 その情報を、node.jsのアプリを経由してWebSocketに送ると、顔の向きでWebGL内の視点の方向を動かして、WebGL内を見渡せます。 不完全な部分が多いので試作ですが、別な作業に移るので一旦ポストします。 デモムービー 実現方法とソースコード 1.VR920 --> 2.VR920のSDKのサンプルを改造したアプリ --[TCP]--> 3.ローカルNode.jsサーバー --[WebSocket(SocketIO)]--> 4.ブラウザでWebGL(scene.js)を使って表示 "2.VR920のサンプルを改造したアプリ" HelloTracker2を改造。適当にフィルターしてTCPで投げる。 改造点のdiff: http://ndruger.lolipop.jp/ha
仕組みはほとんどKinectを使ってブラウザのWebGL内を動いてみた - 最高のコンピューティング環境とは?と同じ。 デモムービー ムービーではChrome10のWebGLでWiiリモコン入力の棒を動かしています。ちょっと入力を省きすぎたのかカクカクしてます。 Firefox4 / Safari5とかでも動きます。 やってることとそれぞれのソースコード 1.Wiiリモコン --> 2.WiiYourself!のデモを改造したアプリ --[TCP]--> 3.ローカルNode.jsサーバー --[WebSocket(SocketIO)]--> 4.ブラウザでWebGL(three.js)を使って表示 "2.WiiYourself!のデモを改造したアプリ" WiiYourself!のデモに、ビルドのためにDDKのパスを追加して、TCPで回転座標を投げるように改造した物。差分が小さい場合は送ら
Kinectを買ったので、最近熱いWebGLの入力として使ってみた。 遊び・デモ用で汎用的には作ってない。 デモムービー ムービーではChrome10のWebGLでKinect入力の棒人間が動いてます。 Firefox4 / Safari5とかでも動きます。 Firefox3でも動かなくはないですが、WebGL非対応なので檄重です。 やってることとそれぞれのソースコード 1.Kinect --> 2.OpenNI(PC用のKinect対応フレームワーク)を使ったアプリ --[TCP]--> 3.ローカルNode.jsサーバー --[WebSocket(SocketIO)]--> 4.ブラウザでWebGL(three.js)を使って表示 最初はDepthJSを使おうとしたけど、特定のブラウザでしか動かない拡張らしく、OpenCVとかも面倒だと思っていた時に、下記のサイトでOpenNIから簡単
知らないことが多い分野のメモなので、間違いが多数あるかも。 方式 入力方式 インターリーブ方式 youtube 3dの"Interleaved rows, columns or checkerboard"に相当。縦or横orチェックの1pxごとに入れ替え。 サイドバイサイド方式 youtube 3dの"Side by side"に相当。視点のずれた画像を横に並べる。 アナグリフ方式 youtube 3dの"Colored Glasses"に相当。 フィールドシーケンシャル方式 インターリーブ方式と同じ? フレームシーケンシャル方式 フレームごとに入れ替え。HMDの入力方式では通常使われない。(2011/01/10 [修正]: VR920の機器への入力はこれが使われている)。3DTVの出力としてシャッター方式のメガネと同時に利用される。 HMDの例 Wrap920 PC以外のメディア機器用。
ゲーム作るのに遅延がどの程度なのか把握するため、計測をしてみた。 環境 Node.js v0.2.5 SocketIO npm, 0.6.1 websocket-server npm, 1.4.01 Firefox Firefox3.5/4は特定のアドインがあると遅くなるため、アドイン無効のセーフモードで実行している Firefox4は4.0b7 -> 7.0b8でwebsocketが無効化されたため、network.websocket.override-security-block;trueにして無理やり有効化している Firebugのデバッグコンソールを開いていると遅くなる速度が変わるので注意 iPod touch OS4.2 / NexusOne Android 2.2.1のネットへの接続 モバイルルーターDWR−PGにDocomoのSIMを刺して接続 計測用コンテンツ http:/
加速度センサーはwiiリモコンなどについているけど、wiiリモコンをPCのブラウザと繋げるのは、利用者側の準備が大きすぎる。 AndroidやiPhoneを簡単に加速度センサー付きのコントローラーとして利用できるなら、結構手軽に加速度コントローラーを利用したゲームが作れそうなので、試してみた。 ただ、現在Androidの標準ブラウザはWebSocket非対応で、AndroidのMobile FirefoxはNexus OneでMozOrientationイベントを取得しようとしたらフリーズしたため、とりあえずWebSocket対応のiPod touch OS4.2で動くようにする。 デモ http://syspri.org/test/motion-sensor-controller/client/src/client.htm or http://goo.gl/SN4io WebSocket
とりあえず試作として下記で作った奴を3D化してみた。上下移動がないしアクションが地味なのでWebGLのデモに向かないけど。 http://d.hatena.ne.jp/ndruger/20101123/1290493871 デモ http://syspri.org/test/websocket_tile_3d/client/src/websocket_tile_3d.html ゲームして楽しめるようには作ってません キャラクターが接続しているブラウザの数(+[ダミープレイヤーが1人])だけ表示されます 動作は全てのブラウザに反映されます。複数のブラウザ or windowで動かすと分かりやすいです WebSocket + WebGLを使うのでFirefox4.xの一部とChromeの最新版でしか動きません。また、WebGLの利用のためグラフィックボードがプログラマブルシェーダーを持ってない
まだ技術デモで、まともに遊べるレベルじゃないけど。 デモ http://syspri.org/test/websocket_tile_nosocketio/src/tile.htm キャラクターが接続しているブラウザの数(+ダミープレイヤーが1人)だけ表示されます 動作は全てのブラウザに反映されます。複数のブラウザ or windowで動かすと分かりやすいです。 WebSocketを使うのでsafari/chromeの最新版で動きます。firefoxでは動きません。 ソース サーバー側スクリプト http://syspri.org/test/websocket_tile_nosocketio/src/server.js miksago-node-websocket-serverを使っている。Socket.ioはなぜかやたら遅くなるので、とりあえず使ってない。 クライアント側スクリプト ht
WebSocketを使えば、これまでFlashで作られていたユーザー対戦のあるアクションゲームをhtml + javascriptで作れるようになると思っていたけど、実際に現実的かどうか試してみた。 テストなので、とりあえずゲームとして遊べるようには作ってない。 デモ 接続しているブラウザ全てに、板とボールの動きが反映される。 Socket.io未使用版: http://syspri.org/test/websocket_pingpong_nosocketio/pingpong.htm WebSocketを使っているので、対応ブラウザはsafariとchromeの最新版。firefoxでは動かない。 Socket.io使用版: http://syspri.org/test/websocket_pingpong/pingpong.htm firefoxでも動くが、flashで通信され檄重 s
この時代に行数なんてものを考えるのもあれだが、ふと気になったので。 単位: M:Million Lines 行数はPhysical SLOC(コメント、空行を含む) OS Windows(Windows XP): 40M Source lines of code - Wikipediaによると40M Mac OS X 10.4: 86M Source lines of code - Wikipediaによると86M Linux(Linux 2.6): 11M The Linux Kernel Open Source Project on Open Hubによると11M Android: 11M? The Android Open Source Project on Open Hubによると4Mだが、これはたぶんLinuxを含めてない。あと、XMLが一番占めている。 [dwm] androi
長期間の不健康な生活に耐えるためのトレーニング・健康器具のまとめ。 利用中の物 懸垂マシン BangTong&Li ぶら下がり健康器 マルチジム 懸垂マシン 耐荷重150kg 懸垂 器具 筋肉トレーニング 背筋 腹筋 大胸筋 懸垂バー (ブラック+レッド 背面クッションあり) メディア: その他 腕立てより短い時間で強い負荷をかけれる。 自分の体を持ち上げるのは楽しくモチベーションが上がる。 横の棒の持つところは手のひらが痛いのでこのグリップテープを巻いて使っている。 懸垂で回数をこなしたい場合はこのトレーニンググローブを利用している。 フィットネスバイク 【FITBOX 第3世代フィットネスバイク 極静音】 スピンバイク メーカー1年保証 エクササイズセンサー付き 組立簡単 トレーニング トレーニングバイク ダイエット器具 メディア: 台があるのでノートPCを置いて動画を見ながら使える。
目的 エアコンはWeb対応が必要だと思います。 なぜなら、会社から帰ってきたら、部屋が冷えていてほしいから。 会社を出るときに、家のクーラーをOnにできればいいのです。 実際にそういうのはもちろん存在します。 これ(http://www.itmedia.co.jp/news/0104/12/carrier.html)とか。 問題は、「私の自宅のエアコン」が対応していないことなのです。 しょうがないので、無理やり対応させることにしましたー。 実現方法 PCからモーターを動かして、エアコンのリモコンのボタンを押す。 赤外線を使ったほうが楽だが、汎用性を考え(お風呂の湯張り対応なども・・・)、モーターを使う。 シーケンス 1. 会社で帰宅前に、ブラウザで自宅鯖にアクセスして、「家のクーラーを オン」ボタンを押す。 2. 自宅鯖のCGIが呼び出される 3. CGIから、USB-IO(PCから外部ハ
このページを最初にブックマークしてみませんか?
『最高のコンピューティング環境とは?』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く