50行で作る、HTML5+JavaScriptで『ラングトンのアリ』の簡単プログラミング！ - あのねノート。
2013-09-16 50行で作る、HTML5+JavaScriptで『ラングトンのアリ』の簡単プログラミング！ やり方 適当プログラミング解説シリーズ はじめに。 ラングトンのアリ(Langton's ant)を知っていますか？ラングトンのアリはWikipediaのラングトンのアリによると、以下のように記述されています。 ラングトンのアリ（英: Langton's ant）は、クリストファー・ラングトンが発明した単純な規則で記述される2次元チューリングマシンである。 実際の3匹のラングトンのアリの早送りされた動きです。 一見複雑そうに見えますが、ルールはたったこれだけです。(上のgifでは色のあるマスが白のマスとしています。) 黒いマスにアリがいた場合、90°右に方向転換し、そのマスの色を反転させ、1マス前進する。 白いマスにアリがいた場合、90°左に方向転換し、そのマスの色を反転させ、
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう - ICS MEDIA
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。 スプライトシートを使う方法 ベクターアニメーションを使う方法 スプライトシートビルダーを使う方法 おまけ：GIFアニメーションを使う方法 おまけ：Flashアニメーションを使う方法 スプライトシートを使う スプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。 表現の再現性が高いう
HTML5/JavaScriptで作るAndroidアプリ開発seminar
Androidアプリを作るのには、Javaの知識が必要？！いいえ、HTMLと少しのJavaScriptが使えればいいんです！HTML5/JavaScriptでAndroidアプリを作る方法を紹介します。
Facebookアプリを、HTML5でどうしてサクサクにできたのか。Sencha Touch開発チームが用いた3つのテクニック
Sencha Touchの開発チームがHTML5で高速に動作するFacebookアプリを開発したことを紹介した1つ前の記事 「Facebookのモバイルアプリが失敗した理由はHTML5のせいじゃない。HTML5でサクサク動くFacebookアプリを作って見せたSencha Touch開発チーム」は、非常に多くの読者に注目されました。 この記事で紹介したSencha Touch開発チームのブログ「The Making of Fastbook: An HTML5 Love Story」の後半では、どのようなテクニックを用いて高速なHTML5アプリケーションを実現したのかも紹介されています。 この記事では、その3つのテクニックについてポイントを紹介したいと思います。タイムラインやニュースフィードのようなユーザーインターフェイスを備えたモバイルアプリケーションは、これから広く開発されていくことにな
JavaScript でのローカル ファイルの読み込み - HTML5 Rocks
Selecting and interacting with files on the user's local device is one of the most commonly used features of the web. It allows users to select files and upload them to a server, for example, when sharing photos or submitting tax documents. It also allows sites to read and manipulate them without ever having to transfer the data across the network. This page walks through how to use JavaScript to
Cloud9 - Your development environment, in the cloud
AWS Cloud9 is no longer available to new customers. Existing customers of AWS Cloud9 can continue to use the service as normal. Learn more. AWS Cloud9 is a cloud-based integrated development environment (IDE) that lets you write, run, and debug your code with just a browser. It includes a code editor, debugger, and terminal. AWS Cloud9 comes prepackaged with essential tools for popular programming
DeNA、HTML5開発支援フレームワーク「Arctic.js」を オープンソースとして公開 - [DeNA] 株式会社ディー・エヌ・エー
株式会社ディー・エヌ・エー（本社：東京都渋谷区、代表取締役社長：守安功、以下DeNA）は、人気ゲームタイトルで使用されているHTML5開発支援フレームワーク「Arctic.js」をオープンソースとして公開しました。 「Arctic.js」は、スマートフォン向けブラウザゲームにおけるインタラクティブなアクションゲーム操作や、複雑なアニメーション表現を支援するJavaScript＊1フレームワークです。開発者は「Arctic.js」を用いてJavaScriptのコーディングを行うことで、短期間かつ一度の開発でAndroid＊2とiOS＊3双方の様々なスマートフォンデバイスへ高品質なゲームを提供することが可能になります。＊4
『2012年のHTML5、CSS3、JavaScriptはこうなる〜実際のサービス事例で考えるHTML5の近未来』に参加してきた #html5semi - Diary of absj31
2012年のHTML5、CSS3、JavaScriptはこうなる〜実際のサービス事例で考えるHTML5の近未来 : ATND 2012/01/20 2012年のHTML5、CSS3、JavaScriptはこうなる〜実際のサービス事例で考えるHTML5の近未来 #html5semi - Togetter (写真：神保町駅改札前) HTML5関連ネタはやろうやろうと思いつつ個人的にはリーチ出来てない分野でして、ちょっくら拝見してきました。ちなみに上記の募集サイト、凄い人気で200人の定員に一時は倍の400人が登録すると言う事態に。HTML5人気は凄いですね〜。 開催開場は株式会社オプト１F大会議室＠神保町。この日は朝から雪が降るなどして天候が崩れていましたが、夕方〜開催の頃には問題無く止んでおりました。しかし外は寒かった！(>_<) 入場時の状況で5分程遅れて本編スタート。以下メモです。 基調
『HTML5 Web Applicationのつくりかた』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 サイバーエージェントでフロントエンドの開発をしております 原(@herablog) です。 スマートフォン版 アメーバピグ新規作成で使用した技術について触れたいと思います。 #ちなみにこの記事ではHTML5を「最新ブラウザ向けのwebアプリケーション作成技術」というかなり広い解釈で使用していますので予めご理解ください。 今までDesktop・Android向けはFlashで作成されていたのですが、今回はiOS, Androidともに対応したいということで、HTML5でできるところまでやってみることにしました。 No Lag作るにあたり
[JS]一行追加するだけで、IE6/7/8でもHTML5のvideoとaudioを利用できる -html5media
HTML5のvideo要素やaudio要素をサポートしていないメジャーブラウザでもたった一行、ページに追加するだけでこれらを利用できるようにするスクリプトを紹介します。 html5media デモページ [ad#ad-2] html5mediaの実装 html5mediaの利用方法は簡単です。 ページに追加する一行 下記をページのhead内に記述します。 <script src="http://api.html5media.info/1.1.4/html5media.min.js"></script> これだけで、すべてのメジャーブラウザでHTML5のvideoとaudioを利用できるようになります。 video, audioに非対応のIE7でも期待通りに動画が再生されます。 IE6(IE Tester)でのキャプチャ 参考：video, audioのサポート状況 video, audio
ユビキタスエンターテインメント，無料で使用できるHTML5/JavaScriptベースのゲームエンジン「enchant.js」をリリース
ユビキタスエンターテインメント，無料で使用できるHTML5/JavaScriptベースのゲームエンジン「enchant.js」をリリース 編集部：aueki ユビキタスエンターテインメントは，主にスマートフォン用のゲームをターゲットにしたHTML5とJavaScriptによるゲームライブラリ「enchant.js」を公開した。 このライブラリは，2Dゲームを作成するための基本システムをまとめたもので，スプライトやバックグラウンド（BG）などのほか，バーチャルゲームパッド機能などをサポートしており，利用者が無料でゲーム作成に利用できる。 HTML5は，Webページ記述に使われるHTMLを大幅に強化したもので，さまざまなオブジェクトを動的に扱う機能に優れており，現在Flashなどで作られているWebページの多くと同等なものを実現できる技術として期待されている。対応ブラウザを使えば，プラグインな
「enchant.js」でゲームを作ろう！ HTML5とJavaScriptによるアクションゲーム制作入門
「enchant.js」でゲームを作ろう！ HTML5とJavaScriptによるアクションゲーム制作入門 ライター：Veki HTML5でゲームが作れるライブラリ「enchant.js」がユビキタスエンターテインメントから発表されました。Webブラウザだけでスプライトを使ったゲームが動くとのことで興味を持った人も多いのではないかと思います。ここではenchant.jsを使ったゲーム作りについて見ていきたいと思います。 enchant.jsがサポートしているHTML5は，長らく使われていたHTML4に代わる次世代Webシステムの要となるものです。HTML5ではWebページの動的な要素，とくにグラフィックスの描画機能などが大幅に強化されており，これまでFlashを使わないとできなかったようなことが，HTMLとJavaScriptだけでできるというのが最大の特徴となっています。 ここにきてIn
head要素に読み込むべき唯一のスクリプト「headjs」 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 「Modernizr」や「html5.js」等、 モダンな環境の為の便利なスクリプトは多々ありますが、 「headjs」はそんな彼らの仕事を一気に引き受けてくれる働き者のスクリプトです。 使い方 Head JS :: The only script in your HEAD 謳い文句はhead要素に読み込む唯一のスクリプト ダウンロードして読み込むだけ。おしまい。 <script type="text/javascript" src="head.js"></script> その多彩な機能 環境の判別 CSS3のプロパティの対応状況、画面のサイズ、ブラウザなどの情報を Modernizrと同じ手法でHTML要素のクラスに出力してくれます。 こんな感じに… <html lang="ja" id="test-page" class="
これからは電子書籍でもJavaScriptプログラミングができる
これから普及が予想される電子書籍や電子雑誌がインタラクティブになっていくことは間違いありません。映像が埋め込まれたニュース、好きな角度から洋服が見られるファッション雑誌、操作しながら解いていけるパズル、途中で登場するモンスターを倒さないとその先が読めないロールプレイング小説、なんていうのもあるかもしれませんね。 将来の電子書籍はアプリケーションと区別がつかなくなる、と僕は考えています。 先日ワーキングドラフトが公開された次世代電子書籍フォーマット「EPUB 3」では、JavaScriptが仕様の中に組み込まれる予定です。将来の電子書籍でのインタラクティブな実装はJavaScriptによって行われることになります。 HTML5/SVGで定義されたスクリプティングをサポート 昨年の12月22日にインプレスR&Dが創刊した電子出版をテーマにした電子雑誌「On Deck（オンデッキ）」の1月18日
githubのアレ(history.replaceStateとかhistory.pushStateの話) - 愛と勇気と缶ビール
会社で下の記事についてリマインドしてもらって、なんとなく気になっていたことを調べたメモ。 http://webtech-walker.com/archive/2010/12/06160539.html 記事を読んで、history.replaceState(null, "title", "/new.html") とかやると遷移なしでページのcontentも勝手に置き換わるのかなー、だったらあのアニメーションはどこで発火してんだ？とか考えていたがそもそもreplaceStateの動作について勘違いしていた。 要は、次のようなhtml書いてボタンをクリックしても、historyの先頭が置き換わるだけでページ自体には何も起こらない。(ただしlocation.hrefは置き換わっており、reloadすると/replace.htmlにいく) <!DOCTYPE HTML> <html lang="e
JavaScriptで振り分けてスマホサイト完成！ (1/5)
スマートフォンサイトの設計・デザイン、HTML5+CSS3による基本的なマークアップについて前回までに解説してきました。今回はページ内の要素にリンクを設定してスマートフォンサイトを仕上げます。 ページ内リンクを張る 今回制作しているスマートフォンサイトは、ページ内の各コーナーに移動できるナビゲーション（ジャンプボタン）を設置しています。まずはジャンプボタンにページ内リンクを設定しましょう。ページ内リンクは、PCサイトと同様、リンク先の要素にID属性を振り、a要素を次のように記述します。 <ul class="clearfix"> <li><a href="#access">アクセス</a></li> <li><a href="#tel">電話</a></li> <li><a href="#mail">メール</a></li> </ul> ボタン全体にリンクを貼る ページ内リンクを設定したサ
2011年のJavaScript ─ウェブアプリ全盛の時代へ | gihyo.jp
あけましておめでとうございます。昨年に引き続き、今年もJavaScriptの近い未来についてちょっとだけお話させて頂きます。 最初に昨年の予想を見返しておきましょう。昨年は次の3つを2010年の鍵として取り上げました。 ウェブ標準 ブラウザ拡張 サーバーサイドJavaScript この3つを軸に2010年を振り返ってみます。 2010年のJavaScript界隈でのニュース ウェブ標準 2010年最初のビッグニュースはなんといってもIE 9のPlatform Preview版の登場でした。これまでの独自実装路線から一転して（正確にはIE 8の時点でJSONやWeb Storageのサポートなど、その徴候はあったのですが）、HTML5などのウェブ標準のサポートを進めることを表明しました。そして実際に8週おきにPlatform Preview版をアップデートして、ECMAScript5・S
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
https://jp.techcrunch.com/2011/02/18/20110217game-closure-makes-it-a-breeze-to-build-multiplayer-cross-platform-games/
「スマートフォン版GREE HTML5+JavaScript & Android」講演資料公開いたしました | GREE Engineering
