three.jsを少し触ってみたのでテクスチャを利用する際のメモ

次世代Canvasとも言える、WebGLを簡単に扱うことができる、three.jsを少しだけ触ってみたのでメモです。 インストールから初期設定、簡単なサンプルの実行までは、既に詳細に分かりやすく説明されている記事がありますので、そちらをご覧頂ければと思います。 ※「THREE.CubeGeometry」は「THREE.BoxGeometry」に名称変更されている様なので注意。 画像をテクスチャとして貼る 画像をテクスチャとして貼る場合は、「THREE.ImageUtils.loadTexture」で読み込んで、Materialに貼り付けます。 // 立方体を用意 var geometry = new THREE....

CreateJSを使って簡単なゲームを作ったのでメモ

とある案件でCreateJSを利用してスマホ用のWebゲームを作ったので、その時に調べた内容をメモメモ。 Canvasを利用すること自体あんまり無かったのですが、結構簡単に実装することが出来ました。 CreteJS そもそもCreateJSとは、HTMLの要素であるCanvas要素の描画をFlashの様に操作出来るライブラリで、実際に自分もFlashを利用することもあったことから、比較的とっつきやすい内容でした。 また、実際には Canvasへの描画を制御する「EaselJS」 アニメーションの動きを制御する「TweenJS」 外部ファイルの読み込みを制御する「PreloadJS」 今回利用していなかったのでご紹介は省かせて頂きますが音声データを制御する「SoundJS」 の4つをパッケージ化したものが「CreateJS」となります。 そのため、一部の機能だけ必要という事であれば、バラバラに利用することも可能です。 Canvasを用意...

HTML5で追加されたフォームの新機能を試してみた

HTML5から実装されるフォームの要素が多数あり、事前調査とスマートフォンサイトにも使えそうなことから、ちょこちょことメモを残しておきます。 input typeの追加属性 inputタグのtype属性に、要素が幾つか追加されました。追加された項目については、この辺りで網羅されているので、そちらを参照ください。 中でも、number・date・tel・email等はお問い合わせフォームにも良くある項目なので、実装された時には活用したいですね。 また、rangeの様に入力形式が大幅に変わったものもあります。 ※対応していないブラウザでは、ただのテキスト入力欄になります。 JavaScriptを利用しないと作れなかったスライドバーでの入力方法は、色々な使い道がありそうです。 placeholder属性 サンプルとして予め表示させておき、フォーカス時に非表示になるテキストを追加できるplaceholder要素が実装されます。 この機能についても、...

html5移行作業その3

今回はsection要素とaside要素の適用。記事一つ一つに対してsection、サイドバーにasideを適用させました。 セクション要素毎にh1要素を入れれるとか、article要素の扱いとか…この辺りがまだ理解しきってないところになるので、もうちょっと勉強の余地があると思うのですが、このデザインではとりあえずこれでOKということにします。 今度は自分でデザインからやってみたいと思うのですが、自分勝手にやってもいいデザインでも中々巧くいかない…難しいなぁ。 進行状況 記事周りをsection要素に変更 サイドバー周りをaside要素に変更...