Site Under MaintenanceWe'll be back soon! Our site is currently undergoing maintenance. Please check back later.
無料で使えるHTML5 JavaScriptゲームエンジンまとめ
HTML5とJavaScriptによるインタラクティブなWebアプリケーションの開発が注目される中、ゲーム分野では数多くのHTML5 JavaScriptゲームエンジン（ゲーム開発用のフレームワーク）が登場している。JavaScriptのライブラリーや情報をまとめているJSwikiによると、その数は70以上に上り、開発者はどのゲームエンジンを選べばいいのか判断が難しい状況だ。 本記事では、数多くあるJavaScriptゲームエンジンの中から、筆者がおすすめするライブラリーを紹介しよう。紹介するゲームエンジンはすべてMIT Licenseで提供されているので、個人はもちろん、商用でも利用できる。 Cocos2D JavaScript (http://cocos2d-javascript.org/) Crafty (http://craftyjs.com/) enchant.js (http:
iPhone4のRetinaディスプレイで閲覧したらjQueryでRetina向け画像(@2xのやつ)に自動で切り替える - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 iPhone4のRetinaディスプレイで閲覧 された際に自動で高解像度の画像に 自動で切り替えるjQueryのコード。 @2xが付くアレです。ちょっと今更 な話題なので誰も見て無さそうな 日曜日に書いて置こうと思います。 jQuery Retinaっていうプラグインがありますが、このライブラリのように色々宜しくやってくれるようなものじゃなく、ただのスニペットです。実際にはもうちょい工夫しないとならないと思いますので参考程度で。というか僕がRetinaなんとかの事を良く分かって無いでｓ コード if (window.devicePixelRatio > 1) $('img').each(function() { var t = $(this); t.attr('sr
JSX のアレな所 - ぐるぐる～
注意！このエントリは既に古いので、JSX の進化速度が半端ない - ぐるぐる〜もあわせて読んでください。最新のコードを参照するのが手っ取り早いです。 JSX なる言語がリリースされました。 この言語が謳っているのが、 高速 安全 簡単(生産性が高い、とも) という 3 点です。 高速と安全はまぁいいでしょう*1。 問題は、はたしてこの言語は簡単なのか？という点です。 簡単かどうかは人によるのでアレなのですが、まぁ一部の人にとっては簡単とは言えない (というか書く気がしない) 書き方を強制されるのです。 関数型 数値を受け取って文字列を返す関数を表す型は、JSX では以下のように書きます。 function(:number):string これ単体で見ると分かりやすそうな気配はします。 では、これ読めますか？ function f(g: function(:number):number):
クリエイターのためのWebテク講座 - jQueryを使ってフォトライブラリを作ろう
これから主流になっていくであろうHTML5は、JavaScript無しでは語れません。当講座でも、これからHTML5+CSS3の作例を紹介するにあたっては、jQueryを使うシーンが多くなるでしょう。そこで、第一回目となる今回は、jQueryプラグインに頼らず、jQueryだけを使ってフォトライブラリを作って、改めてjQueryの仕組みをおさらいしましょう。 セレクタを理解する。 jQueryを使うと、ブラウザに依存することなく、CSSライクなセレクタで、とても簡単にDOM要素を検索することができます。 具体的には、$("CSS文字列")と入力すると、CSSで指定した要素を検索してjQueryオブジェクトを返してくれます。 いくつかサンプルを見ながら、セレクタの使い方をおさらいしてみましょう。 ※DOM（Document Object Model）とは、XMLやHTMLの各要素(たとえば<
JavaScripterから見たJSX
私は2001年からJavaScriptを専門にして実装をしており、かなり長い間JavaScriptを使い続けてきました。ExGameをはじめとして、異常なほどにJavaScriptを使い倒したプロジェクトを何個か完遂させています。前の会社「ブロードテイル」がDeNAに買収されたのは、JavaScriptのプロダクトだけでなく、私たちのJavaScriptのスキルを生かしたいという側面も大きくあったと感じています。 そんな私ですが、正直に言うとJSXの開発にはほとんど関わっていません。JSXは基本的に一穂さんが主導し、gfxがフォローし、a_bickyがドッグフードを食べる（自分たちのプロダクトをまず自分たちで率先して使う）という形で進んできました。私が強くかかわったのは、主に3月の言語仕様を決めるときの議論程度です。なのでJSXについてそこまで詳しい訳ではないのですが、そばで開発を見てきた
DeNA開発、高速なJavascriptコードを生成できる新言語「jsx」への反応まとめ - Togetter
Kazuho Oku @kazuho 公開ed！ ウェブブラウザ上で JavaScript より速く動作するプログラミング言語です。よろしくお願いします m(__)m / “JSX - a faster, safer, easier alternative to Java…” http://t.co/UdsmdvI3 2012-05-31 07:52:09 Takuto Wada @t_wada DeNA が開発したオブジェクト指向、静的型付け、(ほとんど)型安全なプログラミング言語。コンパイルすると JavaScript が生成される。ライセンスは MIT. / “JSX - a faster, safer, easier …” http://t.co/eONyUpS8 2012-05-31 08:15:41
Google ChromeでiPhoneとかのtouch系イベントをエミュレートできるようになってた。これは便利。 | Ginpen.com
右上User Agentのところね。Emulate touch eventsにチェックを入れると、マウスのクリックやドラッグ＆ドロップでtouchstart, touchmove, touchendが発火するようになる。 開発時にいちいち実機やXcodeのエミュレーターを用意しなくても動作確認できるようになるのはとても便利。さすがにマルチタッチはできないけど、とりあえずエラーが出てないとかそういう確認ならできる。 ついでに隣の項目のOverrride User AgentでiPhoneやiPadを選ぶとなお良さそう。（ちなみにIEとかも指定できます。もちろんエミュレートはないけどね。） 画面サイズは、それを指定値に変更できるプラグインがあるから、探してみてください。 Settingsの項目は、なんか気がついたら（Chromeが更新されてて）変わってるから、ときどき覗いてみるといいんじゃない
How To Enable HTML5 In Chrome | Robots.net
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
HTML5によるアニメーション作成を容易にする「Adobe Edge」 - builder by ZDNet Japan
Adobe Edgeとは 「Adobe Edge」（以下、Edge）は、Adobe Systemsが開発中のHTML5アニメーション作成ツールである。Edgeでは、HTML5、CSS3、JavaScriptを利用したアニメーションを、コードをほとんど記述することなく作成することができる。 HTML5を使えばWeb標準の技術だけでインタラクティブなコンテンツを実現できるが、Flashなどの既存技術に比べると完成されたオーサリングツールがない点が課題とされていた。それに対して、デザインツールベンダーの雄ともいえるAdobeが送り出したのがEdgeだ。 Edgeで提供される主な機能としては、次のようなものが挙げられている。 シンプルで直感的に使いやすい描画ツール 既存のWebページにEdgeで作成したアニメーションを埋め込むことが可能 WebKitベースのプレビュー画面 スニペットを有したJav
初心者のためのjQueryプログラミング入門 - libro
※ページが正常に表示されない場合 AddBlockなどの広告ブロックツールがONになっていると、ページの一部が表示されないことがあります。これらのツールをOFFにしてみてください。
JavaScript アニメーションのデザインパターン
JavaScript でアニメーションを作る アニメーションとは何？ ビューを少しずつ回転、拡大縮小、移動、変色などを行い、連続的な動きを作る こんな感じ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; setInterval(function() { el.style.opacity -= 0.01; }, 10); </script> なんで、あんな感じの書き方になるの？ setInterval の意味が分からない こんな感じで書けないの？ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; w
HTMLとJSだけで何か作るときの - hitode909の日記
HTMLとJSだけで何か作ることが多くて，開発環境をどう作るかとか，ノウハウみたいなのがたまってきたと思う． ローカルのHTMLファイルをブラウザで開くと，いろんな制約がある．たとえば，ファイルAPIを使えないとか，YouTubeのプレイヤー貼り付けできないとか，/js/みたいに絶対パスで指定することもできない．ページ1枚なら他のページにリンクとかいらないけど，ウェブサイトを作ってるときとかは，/help/でヘルプページを表示するとか書いたときに，ローカルのファイルを見てリンクが切れてるということになる．開発中はリンク切れだけど本番サーバーに置くと見れるはずとか言って開発するのは怖い． サーバーでRubyとかPerlが動いてるみたいなときはローカルでサーバーを立てて開発してると思う．HTMLとJSだけ使うときでもローカルでサーバーを立てて開発したほうがいいと思う． 開発中は，nginxでフ
旧・Macの手書き説明書 - FC2 BLOG パスワード認証
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ https://mac-tegaki.comへ移転中 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
Android 2.x系でCanvasタグのtoDataURLメソッドをサポート·todataurl-png-js MOONGIFT
todataurl-png-jsはAndroid 2.x系でCanvasタグのtoDataURLをサポートするJavaScriptライブラリです。Canvasタグの内容をPNG画像として出力できます。 todataurl-png-jsはAndroid 2.x系においてCanvasタグに描いた内容をdataURIとして画像で取り出した上で再利用できるようにするJavaScriptライブラリです。 例です。自分で描いた模様をバックグラウンドに設定しています。 こちらはCanvasタグに生成した画像を背景に使っています。 実際のコードです。CanvasのデータをtoDataURL()で取り出してバックグラウンドイメージに適用しています。 toDataURLメソッドはHTML5対応のWebブラウザであれば使えるかと思っていましたが、Android 2.x系のWebブラウザでは使えないそうです。そこ
1分でWebアプリを作れて、3分で公開できた！オールJavaScriptでWebアプリを開発できるMeteorを触ってみた - IT-Walker on hatena
もうJavaもRubyも要らない？–JavaScriptオンリーの未来派WebアプリフレームワークMeteorがデビューという記事で知った、新しいフレームワークMeteor。 ちょっと気になったので、軽く触ってみました。すごすぎるフレームワークの登場です！！ 正確に言うと、実行環境＆フレームワーク＆クラウドPaaS＆パッケージマネージャーといったところでしょうか。Node.jsとHerokuとnpmが一緒になったようなもんだと思えば、イメージがわくと思いますが、実態はそれらを上回っています（パッケージ数はnpmの比じゃありませんが・・・使い勝手という意味で）。 インストール ターミナルをたちあげて、以下のコマンドを実行するだけ。 （行頭の$はターミナルであることを表してるだけで、コマンドの一部じゃありません） $ curl install.meteor.com | sh これで /usr/
Yahoo!がJavaScriptのフレームワーク「Mojito」をオープンソースで公開。同一のJavaScriptコードが、サーバ、ブラウザどちらでも実行可能
Yahoo!がJavaScriptのフレームワーク「Mojito」をオープンソースで公開。同一のJavaScriptコードが、サーバ、ブラウザどちらでも実行可能 Webアプリケーションのためのコードを1つだけ書けば、それがPC上でそのままローカルアプリケーションとなり、Node.jsのサーバへ持っていけばWebブラウザからWebアプリケーションとして利用でき、さらにモバイルデバイスからアクセスすれば、そのデバイスに最適な表示が行われる。米Yahoo!が4月1日にオープンソースとして公開した「Mojito」（モヒート）は、JavaScriptで書かれたアプリケーションフレームワークです。 Mojitoは昨年11月にYahoo!が開発中であることを明らかにし、今年の第1四半期にオープンソースとして公開予定としていました。 米Yahoo!がJavaScriptフレームワーク「Mojito」と、N
スマホを判別するのに便利なJSスニペット:phpspot開発日誌
Detecting Mobile Devices with JavaScript | A Beautiful Blog スマホを判別するのに便利なJSスニペットが公開されています。 JavaScriptによってAndroid, iOSの差を吸収する際に使えそうです。 iOSかどうかの判別は、以下のように超シンプル if( isMobile.iOS() ) alert('iOS'); Android のタブレットの場合は Mobile が入らないので、タブレットも考慮する場合はそのへんのコードを追加するとよさそうです。 関連エントリ iPhoneかiPodかiPadかを調べるPHPとJSのソースコード例 利用者のブラウザ・OS・バージョンを取得できるクラスライブラリ「Browser.php」
Facebookの開発者登録とモバイルアプリの作成準備
Graph APIとJavaScriptライブラリー「jAction」を使ったFacebookモバイルアプリの作り方を解説する本連載。第1回では、モバイル向けFacebookアプリの2つのアプローチと、それぞれのメリットをお伝えしました。今回からは、実際のFacebookモバイルアプリの作り方を手順を追って解説します。まずは、開発にあたって必要な手続きを紹介しましょう。 Step 1：Facebookアプリの開発者として登録しよう Facebookモバイルアプリを作るためには、Facebookアプリの開発者として登録する必要があります。ログインした状態でFacebook開発者ページへ移動してください。 画面上部のメニューバーの「アプリ」を選択します。その後、ダイアログに従ってFacebookパスワードを入力し、「アプリの許可」を選択します。
HTML5/CSS3にも対応、HTML/CSS/JavaScriptを整形・チェックするオンラインツール -Dirty Markup
Dirty Markup [ad#ad-2] Dirty Markupはウェブ制作者がよく使う下記のツールをまとめたような感じです。 HTML Tidy CSS Tidy JS Beautify Dirty Markupの使い方は簡単で、右側にコードをペーストし、左側でHTML/CSS/JavaScriptを設定し「Clean」ボタンをクリックするだけです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
