"HTML5ゲーム重い問題"をいかに解決するか？ CPU負荷を改善する方法 | ログミーBusiness
2019年10月9日、『神姫PROJECT』などソーシャルゲームの企画・開発を手がける株式会社テクロスが主催するイベント「TECH x GAME COLLEGE」が開催されました。第27回となる今回のテーマは「HTML5で『重い』問題をクリアしてリッチなゲームを作る」。株式会社ノックノート執行役員の岡山知弘氏が、話題のHTML5ゲームを作るにあたって、いかにJavaScriptでリッチなゲームを作りながら重い問題を解決していくかを語りました。前半パートとなる今回は、負荷改善における前提とCPUの問題についてレクチャーしました。 HTML5で「重い」問題岡山知弘氏：それでは、30分ほどお時間をみなさんにいただいて、HTML5で重たい問題は、みなさんがHTML5を触られている方であれば、まさに直面しているかなとは思うんですけど、そこで弊社でどういうふうにアプローチしたのかをお伝えさせていただけ
Excel2Js紹介ページ - リーサ制作物の部屋
どんなソフト？ ExcelのシートをHtml+Css+Javascriptに変換するフリーソフトです。 数式も変換できるので、Excelで作ったツールをWebで公開する時などにご利用下さい。 サンプル1 サンプル2 DQ10『魔法使い火力シミュレータ』はフィオルさんが作成したExcelシートをExce2Jsで変換することで作成されています。 ダウンロード Excel2Js（本体）ダウンロード ヘルプ（マニュアル）のページはこちら 更新履歴 2016/01/03 ver.0.1.3 数式結果をコピーできるように改善 2016/01/03 ver.0.1.2 表示形式が適切に変換されないバグを修正 2016/01/03 ver.0.1.1 ROUND関数・CHAR関数の追加、テンプレ選択周りのUI改善、バグ修正 2016/01/03 ver.0.1.0 アルファ版公開 主な機能 基本機能 数式
XSound - Web Audio API Library for Synthesizer, Effects, Visualization, Recording ... -
XSound - Web Audio API Library for Synthesizer, Effects, Visualization, Recording ... - NEW !! XSound 2.0 がリリースされました. 以下の変更が加えられています. ES5 から ES2015 ~ へコードの書き換え const, let アロー関数式 class 構文 ES Modules ... etc ESLint によるコード検証 webpack によるビルド環境 つまり, 内部が変わっただけで, 外部, すなわち, API は 1.x と同じです. コードリーディングしやすくなったことで, issue をたてたり PR を送ったりする敷居を低くしました. XSound とは ? Web Audio API のライブラリの1つで, サウンドの生成 ワンショットオーディオの再生 楽曲
HTML5 CanvasとWebGLの使い分け―CreateJS勉強会/池田発表資料 (前編) ― ICS LAB
2015年2月10日（火）、アドビシステムズ株式会社でCreateJS勉強会 (第5回)が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSで制作するスペシャルコンテンツ」のスライドをブログ記事という形で公開します。本記事では口頭で発表した内容もできる限り記載しました。 なお、前編（CanvasとWebGLの比較）と後編(WebGLの最適化)の二部構成にしています。前編となる本記事ではスペシャルコンテンツ制作にあたり調査したHTML CanvasとWebGLの双方の利点・欠点をまとめています。 HTML CanvasとWebGL 今回のテーマは「HTML CanvasとWebGLの使い分け」です。皆さんもご存知の通り、HTML5のCanvas要素 (JavaScript ではCanvasRenderingContext2Dオブジェクト）は従
誰でもAndroid 5.0のMaterial DesginをWebに持ち込めるPolymer
誰でもAndroid 5.0のMaterial DesginをWebに持ち込めるPolymer：HTML5アプリ作ろうぜ！（13）（1/4 ページ） Material DesginでWeb ComponentsでオープンソースでレスポンシブなJavaScriptフレームワーク「Polymer」をWeb上で活用するためのチュートリアル記事です。Bootstrapライクなレイアウトを実現するサンプルを交えてインストール方法や使い方を紹介します。
Webクリエイタースクール デジタルハリウッドSTUDIO by LIG(デジLIG)
デジタルハリウッドSTUDIO by LIG（通称：デジLIG）は弊社LIGとデジタルハリウッドが業務提携し運営しているWebクリエイタースクールです。9万人以上のクリエイターを輩出する社会人向けプロ養成クリエイティブスクール・デジタルハリウッドのカリキュラムを提供します。
Google I/O 2014 ── ServiceWorker でネイティブアプリとの差を縮めよう
Google I/O 2014 ── ServiceWorker でネイティブアプリとの差を縮めよう 矢倉 眞隆（myakura） 今回お届けするのは、Jake Archibald氏とAlex Russell氏によるServiceWorkerのセッション「Appy Times with ServiceWorker – Bridging the gap between the web and apps」です。 Alex氏はService Workers仕様のEditorで、古くはDojoやChrome Frameに携わっています。TC39やW3CのTAGのメンバーとしても活動し、Extensible Web構想を推し進める一人です。 Jake氏はService Workers仕様の「ゴーストオーサー」だそうです。とても面白い人で、今回も彼のユーモアが炸裂、笑いに包まれた楽しいセッションとなり
Ajaxと組み合わせて便利なHistory APIを使おう - PR TIMESデザイナー&エンジニアブログ BREAK TIMES
こんにちは。PR TIMESフロント・エンジニアの山田です。 弊社ではAjaxを使ったサイトやサービスも多く運営しています。 さて、そのAjaxですがページ遷移なしにコンテンツを切り替える場合、当然ながらそのままではブラウザのURLも変わりません。これではユーザーが直接読み込み先にアクセスしたり、ブラウザのBACKボタンで前に戻ったりできないので不便です。そんな時に使えるのが、Hisotry API。これはブラウザの履歴をJavascriptから管理、操作できる便利なAPIです。 まず以下の4つは以前からあり、古いブラウザでも動作します。 history.back();//表示した履歴の1つ前のページにもどる history.go(4);//表示した履歴の4つ前のページにもどる history.go(2);//表示した履歴の2つ先のページに進む history.forward();//表示
HTML5ゲームエンジン「Phaser」が初心者とモバイルにやさしくていい感じです - syonx
Phaser - Desktop and Mobile HTML5 game framework モバイル/デスクトップ向けのHTML5製の2Dゲームフレームワーク。 Pixi.jsベースでCanvasやWebGLのレンダリングもサポート。 Tags: flash-like 2d sounds collisions physics typescript webgl free cdnjs: //cdnjs.cloudflare.com/ajax/libs/phaser/2.0.5/phaser.min.js Examples - PixiJS ベースとなっている Pixi.js のサンプル。レンダリング結果の雰囲気がつかめる。 HTML5 Game Engines - Find Which is Right For You HTML5ベースのゲームエンジン一覧。比較がしやすい。 Phaser
Lockr – localStorageを使いたくなる小さなJavaScriptライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5で提供される新しいAPIの一つにlocalStorageがあります。使ってみたいと思いつつも何となく面倒そうで避けてしまっている、なんて人もいるのではないでしょうか。利用するのに複雑な仕組みになっているとつい敬遠してしまうでしょう。 そこで紹介したいのがLockrです。ごく小さなlocalStorageラッパーで、高校のロッカーくらい簡単な仕組みだそうです。 使い方 Lockrは依存ライブラリもなく、JavaScriptファイルを読み込むだけで使えます。 <script src="/path/to/lockr.js" type="text/javascript"></script> これで準備完了です。 デモ APIはRedisを参考にしている層で、set/getでシンプ
世の中のHTML5アプリケーションが糞だから、俺が「初期化」の作り方を教えてやんよ - mizchi's blog
2chまとめみたいなタイトルにしてみた。(してみたかった) HTML5のアーキテクチャと初期化とキャッシュの考え方が、「ウェブエンジニア」は本当に出来てない。 とくにソシャゲをウェブビューに貼ってスマホ対応しました系。本当にダメ。 じゃあどうするか？基本的に「初期化」の考え方を直せばどうにかなる。 (この記事はBackboneを使うときに考えてることだけど、他でも一緒だと思う) 前提 シングルページアプリケーション セマンティクスやSEOは考慮しない 基本哲学 共通モデルの初期化を徹底的に行う サーバーにリクエストを投げるのは最小限 クライアントでサーバーモデルのキャッシュを作り、更新が期待されるまで再取得しない 理由 いくらDOMの最適化したところでUXに影響が大きいのはサーバーリクエスト(200~2000ms)で、プログラミング段階で辛さがあつまるのは非同期処理の部分。 プログラマとし
Webアニメーションを高速化するために知っておくべき10のこと（後編）
Webアニメーションを高速化するために知っておくべき10のこと（後編） 斉藤 祐也（株式会社リッチメディア） 前編から引き続き、後編でも最適化のために知っておきたいレンダリングプロセス、計測方法、そして最適化を妨げるよくあるアクシデントとその回避方法について紹介していきます。 アニメーションを高速化するために知っておきたいレンダリングプロセス ブラウザがどのようにウェブサイトを表示しているのかを知ることは、アニメーションだけに限らず、Webのパフォーマンス全体の高速化を行うために大切なステップです。 イスラエルの開発者であるTali Garsiel氏が公開した『How Browsers Work』は、HTML5 Rocksに転載され、複数の日本語訳も提供されている、ブラウザの内部動作を学ぶために読んでおきたいリソースの1つです。 そのリソースを参考に、レンダリングエンジンのメインフローにつ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptでデスクトップ通知（HTML5 Notification） - Qiita
Code4Sec | LinkedIn
HTMLのテンプレート的なの - Qiita
DeNA Engineering - DeNAエンジニアのポータルサイト
DeNA Engineering - DeNAエンジニアのポータルサイト
Google HTML/CSS Style Guide まとめ - Qiita
GitHub - PexJS/PexJS: HTML5 Flash Lite 1.1 Runtime Engine
Flatis