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要素に変更 »

HTML5 Reset Stylesheetを適用

前の記事を書いた後、他のブラウザで見ていたら、Firefoxでも崩れていました。 さすがにFirefoxで崩れてしまうのはまずいので、色々調べていると、HTML5の新要素に対して、「disiplay:block;」をかけると以前の記述とほぼ同等でかけることが分かりました。 また、HTML5用のreset.cssを発見したので適用してみました。 HTML5 Reset Stylesheet | HTML5 Doctor Firefoxでも崩れてなくてバッチリ。だけど、残念ながらIE6は直りませんでした。 進行状況 HTML5 Reset Stylesheetの適用 »

html5に移行中

今後html5の知識は必要になってくると思うのですが、仕事では使えないのでこのブログで色々と実験をしていこうかと思います。 とりあえず少しだけタグを入れ替えたりしてみましたが、ずれたりしてないかな・・・。 さっきIE6で見た時はすでにスタイルが聞いていないところが出てきていたので、もう気にしないことにしました。 まだあまり理解できていない箇所もあるので、少しずつ変更をかけていきたいと思います。 進行状況 html宣言変更 head内部変更 div#header → header div#footer → footer »