【社内勉強会レポート】enchant.jsを使って3時間でゲームを作る会｜技術ブログ｜北海道札幌市・宮城県仙台市のVR・ゲーム・システム開発 インフィニットループ
【社内勉強会レポート】enchant.jsを使って3時間でゲームを作る会 matsuiです。 インフィニットループでは、毎週金曜日に社内勉強会を行っています。 今回は「enchant.jsを使って3時間でゲームを作る会」を行いましたので、そのレポートを書かせていただきます。 enchant.jsは、カンタンにゲームやアプリを開発できる、オープンソースのHTML5 + JavaScriptフレームワークです。 その取っつきやすさから利用者も多く、9leapには多くのゲームが公開されています。 以前、私も札幌で行われた3時間開発ハンズオンに参加したことがあったので、それと同じことを社内でもやってみようと思いました。 「3時間で何ができるんだよ」とお思いでしょうが、これが意外とできるものです。 私は波乗りゲームを作ってみました。 昔、アタリ社からLynxというゲーム機が出ていまして、その中にカリ
多人数オンラインプレイ可能なボンバーマン風ゲーム「Bombermine」が人気を博す理由とは | アナクロセンス-ゲーム情報-
「Bombermine」とは一体？ 広すぎるくらいのマップで1000人同時対戦できるMMOボンバーマン風ゲームです。昨今話題のHTML5で作成されており、HTML5対応のブラウザで利用出来ます。 Firefox,Chrome,safari等。（IEは10以上が必要です。） サイトに飛ぶとログイン画面が表示されます。 ユーザ名を決めて入力しましょう。 開始画面が表示されるので、スペースキーを押して開始致しましょう。 ゲーム画面です。最初は薄くキャラが表示されます。 表示されました、さあバトル開始です。 開始三秒で玄人プレーヤーに瞬殺されました。 基本プレーシステム 自分のキャラクターが死ぬと、開始画面に戻りますので、そのままスペースキーですぐに再プレー可能です。 １ゲーム20分で計算され、合計の倒した数と倒された数でプレイヤー同士競いあいます。 「Bombermine」の人気の理
爆速でわかるjQuery.Deferred超入門
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。これまで、JavaScriptで非同期処理を書く上での問題として、コールバック地獄やエラー処理に例外が使えないことなどを解説してきました。 これらの問題に対処するライブラリの1つであるjQuery.Deferredに関して、もう少し丁寧に解説いたします。なお、jQueryのバージョンは記事執筆時点の最新である、1.9.1を想定しています。 jQuery.Deferredとは jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結
アイデア満載！レスポンシブ対応のナビゲーションを実装するチュートリアルのまとめ
デスクトップ、タブレット、スマートフォン、それぞれに適した表示にするナビゲーションを実装するチュートリアルを紹介します。 CSSで、JavaScript併用、jQueryのプラグインで簡単実装など、いろいろあります。
新しくなるappCacheとtemplateでWebアプリケーションの作り方が変わる
WebComponents仕様の一部として議論されているテンプレートの機能は、Ajaxが登場したときのようにWebアプリケーションを変えていくだろう。W3Cのマイケル・スミス（Michael Smith）氏は2月18日に都内で開催された「第36回HTML5とか勉強」でそう説明し、HTML5.1に相当する議論中の新機能への期待を示しました。 先週紹介した「オフラインファーストの思想と実践」の前に行われたスミス氏のセッション「勧告候補になったHTML5.0の仕様についてと、HTML5.1の始まり」の内容をダイジェストで紹介しましょう。 新しくなるアプリケーションキャッシュ マイケル・スミス氏。今日はappCacheとtemplateと、HTML5のテストをgithub上に置き始めた、などの話をします。 アプリケーションキャッシュ（appCache）はご存じですか？ HTML5でオフラインアプリ
ページ内の見出しに合わせて目次を自動生成する - かちびと.net
Result 簡易的なものなので汎用性は高くは無いかも。 jQuery (function($) { $.fn.toc = function(o, p) { p = $.extend({ title: "タイトル" }, p); //見出しを入れるボックスを生成 this.prepend('<div id="toc-list"><strong>' + p.title + '</strong><ol></ol></div>').children(o).each(function(i) { i = i + 1; //IDを合わせて見出しへのページ内リンクと目次へのページ内リンクを生成 $(this).attr('id', 'section-' + i).nextUntil(o).after('<a href="#toc-list">Topへ ⇑</a>'); $('<li><a hr
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
Chrome上で動くLocal Proxy "Klepto"をベースにしたフロントエンド開発フローの展望
（HTTP）Proxyとは ブラウザとサーバの通信を中継したりする 高速通信のためにデータをキャッシュしたり サーバ側でリバースプロキシとして使ったり 大学や企業で検閲に使ったり SquidやDeleGateとか有名
Webシステムのフロントエンド高速化で最初にやるべきこと - かみやんの技術者ブログ
前回のエントリーで、Dartの次は、TypeScriptを検証する。と書いたけど、なぜか自分のPCでは、VisualStudio for WebにTypeScriptのプラグインがインストールできなかったので、TypeScriptを使うことを諦めました。コマンドラインでコンパイルはできたけど、それでは型付け言語のメリットであるIDEによる補完や参照検索やリネームリファクタリングが効かないので。ちなみにプログラマのPCではあっさりインストールできたとのこと。がっくり。 というわけで、Dartを実戦投入することを決定してDartで開発をしています。 フロントエンド高速化のExpiresヘッダ さて、今日の本題。Webシステムのフロントエンド高速化のお話です。Webシステムの速度の大きなボトルネックとしてDB負荷がありますが、ブラウザ側のレンダリングを高速化する話としてフロントエンド高速化があり
『スマートフォン向けJavaScriptライブラリchikuwa.js』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは！スマートフォン版Ameba（通称：デカグラフ）でフロントエンドの開発をしている2012年度新卒入社のオオシモと申します。 デカグラフでは、主にSNS機能（サークル・掲示板・メッセージ・写真など）のNode.jsからフロントエンドのJavaScriptを担当しています。ちなみにエディタはSublime Text 2を使用しています。とっても軽くて高機能でオススメです。jQueryを使用しているのではないでしょうか。 デカグラフでは、chikuwa.jsと呼ばれるスマートフォンに特化した軽量ライブラリを使用しています。このライブラリは弊社の首
Google Map を簡単お洒落にカスタマイズ！「Styled Map Wizard」使ってみた。 | バシャログ。
今月発売予定の「メタルギアライジング」をそわそわ楽しみにしているアクションゲー好き seki です。 今回もWebサービスのご紹介です！ 最近よくよく見かける、「Google map」のデザインをお洒落にカスタマイズして載せているサイト。皆さんも一度は目にしたことがあるかと思いますが、こちら、どうやって作っているか気になりますよね。 今回は、js無知な私でも簡単に作れる Google Maps API 「Styled Map Wizard」の使い方を、ざっくりと例を挙げてご紹介します。 【参考サイト】 今回はこちらの記事より、参考・引用して解説します。こちら、とても丁寧に解説されているので、jsが分らなくても出来るかと。 今回作成したもの 画像ですみませんがこちら。 アイコンは seki になっていますが場所はバシャログ。本陣です。 色をモノクロにして、交差点やコンビニ、銀行などのアイコン
これはもはや魔法！ HTML5, JavaScriptで実装されたリッチなアプリケーション5選 | らふらく ^^
最近、話題になっているJavaScriptですごいものを 実装している方々がいたので紹介したいと思います。 これだけできるなんて正直驚きました。 ①3Dゲームのような画面を再現 Minecraft4kJS こちらは、画面上でダンジョンを進んでいくような間隔を味わえるアプリケーションです。 こんな猛者がいるなんて.. ②めちゃくちゃかっこいい時計 orked from: パーティクル時計 クリックするたびに、画面がはじけるような演出がかっこいい！ JSだけでこんなにリッチな作品がつくれる！ ③洗練されまくってるToDoアプリ soda todo これは、ぜひ、実際に使ってみてほしいです。 タスクを追加したときの演出が格好よすぎて、 めちゃくちゃ気持ちいいです。 こんなTodoがあったら、仕事のモチベーションも上がるのではないでしょうか？ ④チャット形式の登録フォーム
[JS]便利で簡単！スクリプトやスタイルシートをブラウザ・OSごとに分岐して利用できる超軽量高速のスクリプト -Conditionizr
IE6/7/8/9/10, Firefox, Chrome, Safari, Operaなどのブラウザだけでなく、Win, Mac LinuxなどのOS、iPadやiPhoneのRetinaディスプレイ用に条件分岐して、外部スクリプトやスタイルシートをロードさせたり、classを付与してHTMLで利用できたりする超軽量高速の単体で動作するスクリプトを紹介します。 Conditionizr Conditionizrの特徴 Conditionizrの使い方 Conditionizrの特徴 ConditionizrはjQueryより50%高速に動作し、条件付きのJavaScriptとCSSをサポートする3KBの超軽量スクリプトです。 条件付きのHTMLタグ 条件付きの外部スクリプトやスタイルシートのロード カスタマイズされたスクリプトにも対応 IE, Firefox, Chrome, Safar
ブラウザキャッシュではなくローカルストレージを使ったキャッシュシステム·basket.js MOONGIFT
basket.jsはローカルストレージにJavaScriptをキャッシュして高速化をはかるソフトウェアです。 Webの高速化を語る上でキャッシュの存在は欠かせません。そこで使ってみたいのがbasket.jsです。何とHTML5のローカルストレージを使ってキャッシュする仕組みを提供します。 最初の実行。underscore.jsなどが読み込まれています。2回目以降は消えます。 でもちゃんとjQueryオブジェクトは存在します。 basket.requireメソッドを使って対象ファイルを読み込みます。有効期限を設定することも可能です。読み込み失敗をハンドリングすることもできます。普段はそのまま利用でき、remove()やclear()でファイルを解除できます。 basket.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る ロ
時間によって発信する内容を変える·Aware.js MOONGIFT
Aware.jsは時間によってデザインやテキストを変えるJavaScriptです。 昔、JavaScriptと言えばWebサイトの表示をちょこっと変えるアクセントのような位置づけでした。訪問した時間によって「おはようございます！」といったメッセージを出すのに使われたりしていました。同様のことを、さらに今風にしたのがAware.jsです。 デフォルトは表示した時間によります。 朝8時に訪れるとこんな感じ。ちょっと朝焼け風。 朝6時。 夜9時。 夜11時。 Aware.jsが行っているのは訪問した時間によってテキストの色や背景色、メッセージを変えるという操作です。まさにresponds to timeなデザインとなっています。使いどころは難しいですが参考にどうぞ。 Aware.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る
ドラッグ＆ドロップによるクールなファイルアップロードを実現できる「Dropzone.js」:phpspot開発日誌
Dropzone.js ドラッグ＆ドロップによるクールなファイルアップロードを実現できる「Dropzone.js」。 ファイルをブラウザ内にD&Dすると画像ならサムネイルがすぐに表示されつつ、プログレスバーが表示されて進捗が分かり、更に完了した際にはチェックマークでアップロード完了が分かります なかなかカッコいいだけでなく、便利なアップロードが可能。 ブラウザ非対応時のフェイルバックも 関連エントリ クロスブラウザでファイルのドラッグ＆ドロップ、Ajaxアップロードを可能にする「FileDrop」 DropBoxからファイルアップロードをする＆切り取って保存するデモ jQueryとHTML5でドラッグ＆ドロップアップロードを実現するチュートリアル ファイルアップロードのレジュームをブラウザ上で行える「Resumable.js」
JavaScriptのスマホ対応時に知らないと損する16のコト
JavaScriptのスマホ対応時に知らないと損する16のコト：スマホ向けサイト制作で泣かないための秘伝ノウハウ（3）（1/3 ページ） スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。今回は、スマホ向けサイトにおけるJavaScriptの4つの主な役割、実装上の3つの注意点、よく使われるOSSライブラリ4選、OS／機種依存事例5選などを紹介します こんにちは。KSK「フレックスファームビジネスユニット」の渡辺です。前回の「HTML5のスマホ対応の基礎知識とハマリどころ3選」では、HTML5に対する対応状況、代表的なHTMLタグに対する依存事例を紹介しました。 今回は、KSKの製品「x-fit（クロスフィット）の開発・販売や、実機での
jQuery Mobile 1.3β公開。レスポンシブなテーブル、グリッド、追加コンポーネントなど大幅強化
HTML5のマークアップだけでモバイル対応のWebアプリが構築できるJavaScriptフレームワークのjQuery Mobile。レスポンシブWebデザインにフォーカスし大幅に強化された新バージョンjQuery Mobile 1.3βが公開されました。 jQuery Mobile 1.3では、表示幅に対応して自動的にフォーマットが変化する「Responsive tables」や「Responsive grids」、1つのスライダーで値を2つ設定できる「Range Slider」、新しいウィジェットの「Panel」をはじめ、多くの機能追加が行われています。 ブログでは、今回のバージョンでレスポンシブWebデザインにフォーカスする経緯について、以下のように説明しています。 We’ve seen the question “What should I use: RWD or jQuery Mo
HTML5 × CSS3 × jQueryを真面目に勉強 – #12 Pinterest風グリッドレイアウトを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPinterest(ぴんたれすと)。従来のグリッド式レイアウトのように高さが均一のグリッドが整然と並べられているのと違い、異なる高さのグリッドが画面いっぱいに敷き詰められているレイアウトが特徴的でオサレです。（※こういったレイアウトはピンボード風と呼べば良いのでしょうか…？） Pinterest Pinterest とはピンボード風の写真共有のソーシャル・ネットワーキング・サービス。特に女性に人気がある。ウェブサイトとアプリはテーマに基づいて写真のコレクションを作ることが出来る。サイトのミッションステートメントは「面白いと感じるものを通じて世界全員をつなぐ」。アメリカ Palo Alto にある Cold Brew Labs によって運営されている。 Wikipediaより引用(http://ja.wikipedia.org/wiki/Pinteres
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
creatorish.com