www.knockknock.jpメニューコンテンツへ移動HomeAboutContactWorksHeadlessCMS「contentful」を試したみたヘッドレスCMSとは、WordPressやMovableTypeなどと違い、テンプレートを表示する部分を持たず、APIでデータを提供することに特化している点が特徴です。未分類GLSLを使って影を表現してみた気がつけば10ヶ月以上、更新してなかったんですね。今回は、GLSL(OpenGLShadingLanguage)を使って影の表現を試してみました。GLSL2次元物理演算ライブラリ、LiquidFun.jsを使ってみた今回は、Googleが提供する2次元物理演算ライブラリ、LiquidFun.jsを使ってみました。LiquidFunthree.jsサンプルを解析してみた。今回はアニメーションをブレンドするサンプルを作ってみました。このサンプルでは「静止状態」→「ゆっくり歩く」→「早く歩く」とアニメーション情報をブレンドして、より自然な動きになるように設定しています。THREE.AnimationMixerthree.jsサンプルを解析してみた。今回からthree.jsの大量にあるサンプルを、気楽に解析していきたいと思います。風ではためく布のような表現方法です。2015に向けて投稿したものです。グリーティングカードを集めて共有する事が出来るWebアプリを作りましたので投稿します。未分類HTML5を使ったGreetingCard投稿Webアプリグリーティングカードを集めて共有する事が出来るWebアプリを作りましたので投稿します。ソースコードを公開していますので、個人の責任の上でしたら、ご自由にご利用ください。JavaScript軽量な2次元物理演算エンジン「Matter.js」を使って、マルチデバイスなブラウザゲームを作ってみた。軽量な2次元物理演算エンジン「Matter.js」を使って、マルチデバイスなブラウザゲームを作ってみた。今回は、軽量な2次元物理演算エンジン「Matter.js」を紹介します。これまで、物理演算エンジンとして「Box2DJS」や「Physijs」や「Cannon.js」などを紹介してきました。Matter.jsthree.jsとOculusRiftを使ってのVR化OculusRiftDK2を触る機会があったので、以前作ったJS-RacingをOculusRift用に改良しました。WebVRBlenderとthree.jsを使って行うモーフィングアニメーション今回は、Blenderでモデリング、アニメーションをつけて、JSON形式で書き出して、three.jsでJSONデータを読み込んで、モーフィングアニメーションを再現する流れを、ざっくりと説明出来ればと思います。モーフィングCannon.jsのRaycastVehicleのデモ前回の三次元物理演算エンジン、Cannon.jsを使ってみた。引き続き、Cannon.jsを触ってみました。Heightfieldシェイプで地面を作成するところは一緒ですが、今回はそこに車両を走らせてみました。RaycastVehicle三次元物理演算エンジン、Cannon.jsを使ってみた。使って、three.jsの三次元物理演算プラグインPhysijsを使ってみた。three.jsWebGLとWebSocketを使った3DオンラインレースゲームR&Dの一環として、今年の夏に開催されたHTML5JapanCup2014に、JS-Racingというコンテンツを作ったのですが、よい評価を頂きまして、WebGL賞と優秀賞を受賞させていただきました。TypeScriptPhotoShopのレイヤーから画像とHTMLとCSSを出力するJSX久しぶりの更新になります。今回はWebGLから離れて、仕事の効率化に関してのネタになります。自動化three.jsの三次元物理演算プラグインPhysijsを使ってみた。今回はthree.jsの三次元物理演算プラグインのPhysijsを使用して、ジャンプ台や、デコボコ道を通る、オフロードレースゲームサンプルを作成しました。three.jsBox2DJS(二次元物理エンジン)とthree.js(3D表現)のシンプルな組み合わせ今回は二次元物理エンジンBox2DJSとWebGLライブラリ、three.jsを組み合わせて、カーレースゲームのサンプルを作成しました。three.jsゲームエンジンとしてのenchant.jsと3D表現としてのthree.jsのシンプルな組み合わせ前回の記事で作成したenchant.jsのゲームロジックを元に、three.jsで3D表現を行いました。three.jsはWebGLをサポートしたJavaScriptの3D描画ライブラリです。three.jsenchant.jsを使ってみた今回は国産のJavaScriptゲームエンジンとして定評のあるenchant.jsを触ってみました。JavaScriptCreateJSを使ってみた。前回のHaxeとTypeScriptの記事からしばらく時間がたってしまいましたが、今回は以前から気になっていましたCreateJSを触ってみました。CreateJSHaxeとTypeScriptで同じコンテンツを作って比較してみた。ここしばらく仕事で忙しく、久しぶりの更新となってしまいましたが、ここ1週間程時間に余裕が出来きましたので、改めて更新していこうと思います。今回のネタはAltJSに関してです。TypeScriptJavaScriptのシンプルなトゥイーンエンジンJS系のTweenライブラリだと、オブジェクトのCSSプロパティにトゥイーンをかける事を基本に設計されている場合が多いかとおもいます。トゥイーンCSS3で疑似3D表現を実現するSprite3D.jsを触ってみた、その2以前の記事で紹介しましたが、JavaScriptとCSS3だけで疑似的に3D表現を行うことができるSprite3D.jsを再びさわりましたので投稿します。Sprite3DPostMessageを使ったクロスドメイン通信JavaScriptはXMLHttpRequestにてセキュリティの関係上、ファイルが置かれているドメインのサーバとしか通信できないという制約(クロスドメイン制約)があります。クロスドメインCSS3のtransition-timing-functionの値、cubic-bezier()に関してCSS3のアニメーションを使う場合、「transition-timing-function」を設定することで、時間ごとの変化量を変更することができます。イージングCSS3で疑似3D表現を実現するSprite3D.jsを触ってみたJavaScriptとCSS3だけで疑似的に3D表現を行うことができるSprite3D.jsを、モックアップ作成ついでに触ったので投稿します。Sprite3DWebStormの素敵な機能、その3。FileWatchersにCompassを前回の記事でFileWatchersに関して紹介しましたが、SASSをコンパイルするのはいいのですが、Compassも一緒に使いたいと思いまして何とかうまく動くようになりましたので共有します。SASSWebStormの素敵な機能、その2。FileWatchers前回の記事で、WebStormの素敵な機能LiveTemplatesを紹介しましたが、今回は6以降から使えるFileWatchersです。※投稿時点での筆者のバージョンは6.0.1です。SCSSWebStormの素敵な機能。LiveTemplatesここ半年程、フロントエンド開発でWebStormを利用しています。話題になるのはもっぱらSublimeTextですが、WebStormを使っています。LiveTemplatesスマートフォンサイトのデザイン画像をPCとSmartphoneで確認するツールクライアント先へのプレビューの際に、これまでのPCコンテンツの場合は、PCで添付画像を見ていただければ十分だったかと思いますが、スマートフォンサイトのデザインをPCで確認というのもいまいちかも知れません。その2以前調べた動画形式に関してのメモその2です。非可逆の動画圧縮ファイルフォーマット、または、そのコーデック。情報整理SWFを読み込む際、wmodeをtransparentにした時のバグSWFをページに読み込む際にwmodeの設定をtransparentにするとバグが発生するということが多々あります。「wmode、バグ」で検索すると多くの事象が確認できます。バグ動画形式に関してのメモ以前調べた動画形式に関してのメモです。情報整理PhotoShopをFlashに読み込む(インポートする)JSXとJSFL以前、某制作会社の技術ブログに投稿していたときのネタがいくつかあり、今でも使えそうなものがいくつかありますので、ピックアップして投稿します。読み込むIntroductionあるウェブ制作会社にてフロントエンドエンジニアをしています。日々仕事をしていると、様々な問題にあたりますが、その解決の手法はたいがいウェブから探すことができます。2016/06/10three.jsサンプルを解析してみた。2016/04/21three.jsサンプルを解析してみた。2015/11/26軽量な2次元物理演算エンジン「Matter.js」を使って、マルチデバイスなブラウザゲームを作ってみた。2015/10/19軽量な2次元物理演算エンジン「Matter.js」を使って、マルチデバイスなブラウザゲームを作ってみた。(3)KnockKnockHeadlessCMS「contentful」を試したみたGLSLを使って影を表現してみた2次元物理演算ライブラリ、LiquidFun.jsを使ってみたthree.jsサンプルを解析してみた。アニメーションミキサーthree.jsサンプルを解析してみた。