React.jsの勉強も兼ねて某RPG風レベルアップカウンターを作ってみた

Facebookが開発を行っているReact.jsを勉強しておきたいなぁと思っていながら大分経ってしまいましたが、ちょっと先週末に簡単なカウンターを必要だったので、土曜日にReact.jsを使って作ってみました。 作る 今回はFluxまでには手を付けず、コチラのスライドのデモを参考にさせていただきました。(Fluxっぽい作りにはなっていますが、Dispatcherの代わりに簡易的なEventEmitterを噛ませているようです。) 後は、キーボードのイベント追加したり、効果音を鳴らしたりする処理を加えたりと、大きな機能変更はしていなかったりするので、実はそこまで書くことが無かったりします…。 ということで、出来上がったものがコチラ。 (アクセス時に名前の入力が求められます。) 8×8 ドットのフリーフォント「美咲フォント」をインストールしているPCで閲覧していただくと、さらに某RPGっぽい雰囲気が感じられると思います。 雑感 JavaScriptの中にHTML書くのはちょっと気持ち悪いですが、 »

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

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

ローカルファイルをブラウザにドラッグするJavaScriptを試してみた

随分前からある機能ですが、今更ながら調べてみて自分にとって使いやすいライブラリとして用意したのでメモしておきます。 仕様について どうせやるならウィンドウ全体に出来ると良いよね、ということでGmailとかWodPressとかみたいに、ウィンドウの何処でもいいのでドラッグ出来るような方法でやってます。 処理としては単純で、下記の通りです。参考にさせていただいたのはコチラ、感謝です。 画面全体を覆う空のdiv(マスク)を用意して、最初は非表示にしておく bodyに対してdragoverイベントを付与、マスクにはdragleave、dropイベントを付与 dragoverイベント発火時にマスクを表示 dragleave、dropイベント発火時にはマスクを非表示 という方法を取れば、ローカルファイルをブラウザ内にドラッグした時にマスクが表示されて次の工程のイベントが発火出来る状態になるので、ウィンドウ全体でドロップできるようになります。 オレオレライブラリ ライブラリ全体はGistにアップしてあります。 使い方はこんな感じ。 »

TickTack.js - requestAnimationFrameをもうちょっと使いやすいモノにしてみた

以前に「setTimeoutの代替関数?requestAnimationFrameを試してみた」という記事を書きましたが、ちょっと実行時間に狂いが激しかったので、色々と試してみてラッパークラスを作ってみたのでメモ。 改善点 ある程度FPSに近づける→FPSの実行回数に近づける 以前のデモだと実はIE8非対応だったのですが解消 使い方 <script src="path/to/TickTack.js"></script> <script> var »

setTimeoutの代替関数?requestAnimationFrameを試してみた

アニメーションを実装するときに、setTimeoutやsetIntervalを利用してDOMやCSSをいじってアニメーションを実装していましたが、今更ながらrequestAnimationFrameというものの存在を知りました。 調べてみると完全に代替出来るものではなさそうなので、自分なりに使い方とどんな時に利用できるのかを残しておこうと思います。 requestAnimationFrameとは setTimeoutは指定したミリ秒間隔で渡した関数を実行しますが、requestAnimationFrameは「再描画を実行する前に実行」します。 そのため、PCのスペックや同じタイミングで動作している処理の内容によって実行される間隔が変化します。(MDNによると毎秒60回程度実行されるとのこと) 利用するメリット 毎回描画出来るタイミングで実行されるため、描画できないタイミングでDOMやCSSを書き換えても実際には動いていない、というような無駄な処理が発生しません。 また、タブが非アクティブな状態になると処理が軽減される、そうなのですが、実はsetTimeoutでも同じような処理がなされているそうです。 利用するデメリット 処理が実行されるタイミングがブラウザ側に依存されるため、狙ったタイミングで実行することができません。 また、実行されるタイミングも必ずしも一定とは限らないため、 »

Backbone.localStorage.jsを使ってオフラインWebアプリケーションを作ってみた

ネイティブアプリとして作るにしてはコストや、制限がかかりすぎてしまう件を考慮して、Webアプリをの方が良いと判断し、Backbone.localStorage.jsを使ってオフラインWebアプリケーションを構築した時のメモを残しておきます。 Backbone.localStorage.js Backbone.jsのModel、CollectionのSave、CreateのメソッドをOverrideし、HTML5のlocalStorage機能を利用してクライアント側に保存するライブラリです。 DLはこちらから:jeromegn/Backbone.localStorage 通常であればAjaxで通信する所をlocalStorageに保存する流れになりますので、通信したい場合はjQueryやZeptoを利用して手動で行う必要があります。 例えばCollectionでBackbone.localStorage.jsを利用する場合はこんな感じに記述します。 ( function( $ ) { /** * FugaModel */ FugaModel »

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

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

「Raphaël」を使ってSVGによる図を描いてみた

やけに解像度の高いRetinaディスプレイが登場したり、手持ちのタブレット端末が流行ったりと、固定の画像で対応するには大変になってきそうな気がしたので、SVG等のベクタ画像をサイトに表示させる必要性があるのではないかと感じています。 そこで、実験的にJavaScriptを利用してベクタ画像を描画するRaphaëlを使って自サイトに線を引いてみました。 その他、矩形や円を描画したり、色を塗ったり出来るみたいなので、その辺りも含めて残しておきます。 Raphaëlを使う準備 .entry-content svg{border:1px solid #999;} 何だか最近フレームワークばかり触っていたので、色々読み込まないと行けないかと思ってましたが、ファイルは一つだけ。 また、描画するDOMを用意しておきます。 <div id="canvas" »

Backbone.jsのpjaxを試してみた

なんだか名前を良く聞くような気がするBackbone.jsを一度触ってみたかったので、Twitterの仕様が変わってタイムラインが取得できなくなった自サイトに組み込んでみました。 中でもpjaxが出来るとかなんとか聞いたので、その辺りを中心に試しています。むしろそれ以外は別にBackbone.jsじゃなくても良いくらいの状態なので、少しずつ試していこうかと思います。 Backbone.jsを使う準備 Backbone.jsは単体で動くわけではないみたいなので、下記ライブラリを用意しました。 Backbone.js Underscore.js jQuery jQueryの代わりにZepto.jsでも良いのですが、IE非対応みたいなので、一応jQueryにしました。 Backbone.RouterとBackbone.history Backbone. »

スマホ用の下からニュッとGoogleマップを表示するJavaScriptライブラリ

以前jQueryライブラリとして公開していましたが、そもそもスマホサイトでjQueryを読み込むこと自体が重荷のように感じたので、ネイティブのライブラリを作ってみました。 ただ、ちょっと実機の実験がiOS6の純正ブラウザのみしか出来ていないので、他のデバイスで動くか心配です。 変更点 変換する時に1KB程度増加しましたが、jQueryそのものが要らなくなるので、90KB程度削減できたと考えられます。 実行時の関数が少し変わっています。詳細はGitHubをご覧ください。 デモ デモページ(スマートフォンでご覧ください)はこちらから ダウンロード(GitHub) »

JavaScriptで追加したoption要素を選択状態にしたい時にIE6に阻まれた時の対処

とある案件で、JavaScript(jQuery)を利用してセレクトボックスの数を変動させて、場合によっては追加した要素をそのまま選択状態にしたかったのですが、IE6でエラーが発生してしまうという事例が発生してしまったので、メモ代わりに残しておきます。 発生事例 まずは、エラーが起きてしまった時の記述について。 var val = "foo", text = "bar"; $("#select").append($("<option>", {"value":val, "text":text})).val(val) »

jquery-pjax + WordPressでスニペット集を作ってみた

Ajaxを利用しつつ、戻る・進むリンクが効くような作りで、Twitterと同じようにHashchangeイベントを使ったことがあったのですが、HTML5ならpushstateを覚えなくては―と思っていた頃にこの記事を読んでjquery-pjaxの存在を知りました。 また、ちょっとしたコードをメモして置く場所が欲しかったので、WordPressと組み合わせてスニペット集を作ってみました。 こんな感じです » Snippets | SUSH-i LOG まだまだ分類分けが中途半端だったり、導線が不十分だったり、ブラウザの進む・戻るを使った時に少し不具合がありますが、何とか形になったかな?と思っています。 クライアントサイド ソースファイルは、defunkt/jquery-pjax – GitHubからダウンロードできます。 クライアントサイドの記述方法は参考リンク先でもご紹介されていますが、こんな感じ。 »

JavaScript非同期ローダーを試しに作ってみた

バラバラのJavaScriptいっぱい読み込むときに、最近のモダンブラウザは「async」属性を使えばバックグラウンドで読んでくれるそうなのですが、そうでない環境では非同期通信を使って読むと早くなる、とかいう記事を見かけたことがあったので作ってみました。 デモ まずは、通常の呼び出し、defer属性、async属性、非同期ローダーを使った呼び出しのそれぞれのデモを置いておきます。 初めにjqueryと、ダミーのテキストをコメントアウトして無理やりファイルサイズを大きくした10個のJSファイルを呼び出しています。 ※同じJavaScriptを呼び出しているので、キャッシュを削除してから次のデモを見ると比較しやすいと思います。 デモ(何もなしなHTML記述) デモ(deferなHTML記述) デモ(asyncなHTML記述) デモ(非同期ローダーを利用) それぞれ特徴があって面白い動きをしますね。 async属性を利用した場合は、 »

jQueryを使ってスマートフォン用のイベントを扱ってみた

スマートフォン用のサイトを作る場合は、jQuery Mobileやら、jQTouchやら、Sencha Touchやら色々ありますが、ちょっとそこまで必要ないときに、スマートフォン特有のイベントをjQueryを使って扱えないか触ってみました。 スマホ特有のイベント スマホ特有のイベントは幾つかありますが、今回は特に使われるであろうタッチ、スライド、ピンチイン、ピンチアウトに重点を置いて調べてみました。 上記操作に必要なイベントは以下の通りです。 touchstart touchmove touchend touchcancel gesturestart gesturechange gestureend 「touch***」というイベントが画面に指でタッチした、している時のイベント、「gesture* »

Google+1風にJavaScriptに渡す変数をページ毎に変更する

javascriptをページ毎に違う変数を渡したいと思ったときに、読み込むscriptタグの前に、グローバル変数で定義する方法が一般的だと思いますが、もうちょっとスマートな方法が無いか探していました。 そこで、Google+1の埋め込みタグを見ていると、以下のようになっているのに気づきました。 <script type="text/javascript" src="https://apis.google.com/js/plusone.js">{lang: 'ja'}</script& »

正方形の要素を敷き詰めるjQueryライブラリ – jquery.square.js

2010年12月23日、修正を行いました。 ブログではなくて、トップページに使ってみようと作ってみた正方形の要素を敷き詰めるjQueryライブラリを作ってみたので公開してみようかと思います。 オプションで、一つの正方形のサイズ、隣の要素との間隔等などの設定が可能です。 使い方はこんな感じ。 $("#hoge").square(); 上の記述で、「hoge」というidの付いた要素に適用されます。 デモはこちら ダウンロード(名前をつけて保存) 以下は詳細説明。 関数概要 {target}.alphaRo({option}); {target}適用する対象{option}[target](string) »

Google AJAX Feed API用のjQuery独自関数

ブログで更新を行ったものをRSSを利用して読み込む際に、サーバが別でもJavaScriptのみで実現できるので、何回か使ったことがあるのですが、毎度毎度HTMLの構成が変わったりしたので読み込みのJSを書き換えていました。 もう少し便利に使えないかな?と、jQueryを用いて汎用性高める目的で作ってみました。 ダウンロードはこちらから、デモページはこちらから確認できます。 関数概要 {target}.gRssFeed({url}, {num}, {option}); {target}適用する対象{url}読み込むRSSのURL{num}表示させるエントリー数{option}[bdate](string) = "<li& »

Google Map API V3を試してみた

一年以上前に公開されていたらしいのですが、今更ながらGoogleMap APIのV3の存在を知ったので試してみました。 V3での主な変更点 V2からV3へとバージョンアップに伴い、以下のような変更・改善点があります。 API Keyが不要になったURL毎に発行していたAPI Keyが不要となりました。開発者側にとっては結構うれしいことです。スマートフォンへの対応がなされた携帯端末用に表示速度が改善され、またGPS機能との連動が可能となりました。JavaScriptの記述方法が変更されたV2に比べてJavaScriptの記述方法に変更があったようです。 テストコード まずHTML側に地図を表示させるdiv要素を配置します。 <div id="gmap"></div> 地図を表示させる基本のコードは以下のとおりです。 google. »

FlashとJavaScriptを連動させてみる

FlashからHTMLへのアクションを起こしたり、その逆を実現するために、間にJavaScriptをかませる方法を取っています。 しかし、何回かやってみても毎回調べなおしをしている気がするので、ここに書いておくことで、また調べる時には簡単に見直すことが出来るようにしたいと思います。 FlashからJavaScriptを実行 Flashのボタンをクリックした時にJavaScriptを実行するなど、Flash側からJavaScriptを実行させるためには、Flashから実行されるJavaScriptの関数の用意と、ActionScriptに用意したJavaScriptの関数を呼び出す記述を行います。 まずはJavaScriptに関数を用意します。ここでの注意点は特にありません。 function hoge() { alert("done"); } 次に用意したJavaScriptの関数を呼び出すActionScriptを記述します。 button_mc.addEventListener(MouseEvent.CLICK, buttonClickHandler); function »

jQueryを利用した透明度の変化でロールオーバーを表現するプラグイン

何番煎じになるかどうかわかりませんが、自分でも透明度を操作して、ロールオーバーを表現するプラグインを作ってみました。 オプションで、ロールオーバー前の透明度、ロールオーバー後の透明度、フェードアニメーションの有無、フェードありならフェードするスピードの設定が可能です。 使い方はこんな感じ。 $("#hoge").alphaRo(); 上の記述で、「hoge」というidの付いた要素に適用されます。 以下は詳細説明。 関数概要 {target}.alphaRo({option}); {target}適用する対象{option}[from](number) = 1ロールオーバー前の透明度[to] »