https://b.hatena.ne.jp/System/HTML5/ HTML5に関するSystemのはてなブックマーク (46) https://coliss.com/articles/build-websites/operation/work/html-boilerplate-by-mmatuzo.html System 2021-05-05T08:04:48Z テンプレート html html5 css js 解説 840 <blockquote cite="https://coliss.com/articles/build-websites/operation/work/html-boilerplate-by-mmatuzo.html" title="最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fwork%2Fhtml-boilerplate-by-mmatuzo.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/work/html-boilerplate-by-mmatuzo.html">最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/work/html-boilerplate-by-mmatuzo.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/8a89b932efa78d11869d748845a189ff799214b7/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202102%2F2021042701%402x.png" alt="最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説" title="最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説" class="entry-image" /></a></p><p>最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。 レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel=&quot;preload&quot;なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごと...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/html-boilerplate-by-mmatuzo.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/work/html-boilerplate-by-mmatuzo.html" alt="はてなブックマーク - 最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説" title="はてなブックマーク - 最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/html-boilerplate-by-mmatuzo.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://www.html5rocks.com/ja/tutorials/webaudio/intro/ System 2015-03-03T11:43:31Z audio HTML5 api javascript 119 <blockquote cite="https://www.html5rocks.com/ja/tutorials/webaudio/intro/" title="Getting started with Web Audio API  |  Articles  |  web.dev"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.html5rocks.com%2Fja%2Ftutorials%2Fwebaudio%2Fintro%2F" alt="" /> <a href="https://www.html5rocks.com/ja/tutorials/webaudio/intro/">Getting started with Web Audio API  |  Articles  |  web.dev</a></cite><p><a href="https://www.html5rocks.com/ja/tutorials/webaudio/intro/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/1e6d208f8ef5acfce243f4a66ea6a7b7c71c096c/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fweb-dev.imgix.net%2Fimage%2FFNkVSAX8UDTTQWQkKftSgGe9clO2%2FuZ3hQS2EPrA9csOgkoXI.png%3Fauto%3Dformat%26fit%3Dmax%26w%3D1200%26fm%3Dauto" alt="Getting started with Web Audio API  |  Articles  |  web.dev" title="Getting started with Web Audio API  |  Articles  |  web.dev" class="entry-image" /></a></p><p>Before the HTML5 &lt;audio&gt; element, Flash or another plugin was required to break the silence of the web. While audio on the web no longer requires a plugin, the audio tag brings significant limitations for implementing sophisticated games and interactive applications. The Web Audio API is a high-l...</p><p><a href="https://b.hatena.ne.jp/entry/s/www.html5rocks.com/ja/tutorials/webaudio/intro/"><img src="https://b.hatena.ne.jp/entry/image/https://www.html5rocks.com/ja/tutorials/webaudio/intro/" alt="はてなブックマーク - Getting started with Web Audio API  |  Articles  |  web.dev" title="はてなブックマーク - Getting started with Web Audio API  |  Articles  |  web.dev" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.html5rocks.com/ja/tutorials/webaudio/intro/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://blog.agektmr.com/ja/2012/03/websocket.html System 2014-12-26T00:13:56Z audio HTML5 javascript 484 <blockquote cite="https://blog.agektmr.com/ja/2012/03/websocket.html" title="WebSocket のバイナリメッセージを試したら、ウェブの未来が垣間見えた"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fblog.agektmr.com%2Fja%2F2012%2F03%2Fwebsocket.html" alt="" /> <a href="https://blog.agektmr.com/ja/2012/03/websocket.html">WebSocket のバイナリメッセージを試したら、ウェブの未来が垣間見えた</a></cite><p><a href="https://blog.agektmr.com/ja/2012/03/websocket.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/ba5c1f535285a08e02fcac3ac37a8f9ac2be157d/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fblog.agektmr.com%2Fimages%2Fwebsocket%2FAudioStreamer.png" alt="WebSocket のバイナリメッセージを試したら、ウェブの未来が垣間見えた" title="WebSocket のバイナリメッセージを試したら、ウェブの未来が垣間見えた" class="entry-image" /></a></p><p>Posted: 2012年3月14日 / Last updated: 2012年3月14日 / オーガニック度: 100% / Read in English 長い記事なので、先に結論だけ書いておきます。WebSocketのバイナリメッセージ機能は、これまでのインターネットのあり方をひっくり返します。「そんなの知ってるよ」という方もいるとは思います。僕も理屈では分かって...</p><p><a href="https://b.hatena.ne.jp/entry/s/blog.agektmr.com/ja/2012/03/websocket.html"><img src="https://b.hatena.ne.jp/entry/image/https://blog.agektmr.com/ja/2012/03/websocket.html" alt="はてなブックマーク - WebSocket のバイナリメッセージを試したら、ウェブの未来が垣間見えた" title="はてなブックマーク - WebSocket のバイナリメッセージを試したら、ウェブの未来が垣間見えた" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/blog.agektmr.com/ja/2012/03/websocket.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://s3pw.com/milestoner/2012/08/pushstate-popstate/ System 2013-09-25T09:22:56Z pushState html5 JavaScript github 92 <blockquote cite="http://s3pw.com/milestoner/2012/08/pushstate-popstate/" title="Loading..."><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fs3pw.com%2Fmilestoner%2F2012%2F08%2Fpushstate-popstate%2F" alt="" /> <a href="http://s3pw.com/milestoner/2012/08/pushstate-popstate/">Loading...</a></cite><p><a href="http://s3pw.com/milestoner/2012/08/pushstate-popstate/"><img src="" alt="Loading..." title="Loading..." class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/s3pw.com/milestoner/2012/08/pushstate-popstate/"><img src="https://b.hatena.ne.jp/entry/image/http://s3pw.com/milestoner/2012/08/pushstate-popstate/" alt="はてなブックマーク - Loading..." title="はてなブックマーク - Loading..." border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s3pw.com/milestoner/2012/08/pushstate-popstate/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://thinkit.co.jp/story/2012/05/15/3542 System 2013-06-26T06:35:26Z websocket html5 まとめ javascript network 12 <blockquote cite="https://thinkit.co.jp/story/2012/05/15/3542" title="クロスドキュメントメッセージングやWebSocketを使ってみる | 今さら聞けないHTML5総おさらい | Think IT（シンクイット）"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fthinkit.co.jp%2Fstory%2F2012%2F05%2F15%2F3542" alt="" /> <a href="https://thinkit.co.jp/story/2012/05/15/3542">クロスドキュメントメッセージングやWebSocketを使ってみる | 今さら聞けないHTML5総おさらい | Think IT（シンクイット）</a></cite><p><a href="https://thinkit.co.jp/story/2012/05/15/3542"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/39aef9a2a10ce8a5c428f27c06c7a5968708dfe5/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fthinkit.co.jp%2Fsites%2Fdefault%2Ffiles%2Fstyles%2F1200x630%2Fpublic%2Fmain_images%2F3542_main_7.png%3Fitok%3Ds5cjMhu1" alt="クロスドキュメントメッセージングやWebSocketを使ってみる | 今さら聞けないHTML5総おさらい | Think IT（シンクイット）" title="クロスドキュメントメッセージングやWebSocketを使ってみる | 今さら聞けないHTML5総おさらい | Think IT（シンクイット）" class="entry-image" /></a></p><p>Linuxディストリビューション「Zorin OS 18.1」リリース ─ LTS版の改良と互換性強化 4月17日 1:28</p><p><a href="https://b.hatena.ne.jp/entry/s/thinkit.co.jp/story/2012/05/15/3542"><img src="https://b.hatena.ne.jp/entry/image/https://thinkit.co.jp/story/2012/05/15/3542" alt="はてなブックマーク - クロスドキュメントメッセージングやWebSocketを使ってみる | 今さら聞けないHTML5総おさらい | Think IT（シンクイット）" title="はてなブックマーク - クロスドキュメントメッセージングやWebSocketを使ってみる | 今さら聞けないHTML5総おさらい | Think IT（シンクイット）" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/thinkit.co.jp/story/2012/05/15/3542"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://www.slideshare.net/slideshow/chromehtml5-developers-live-japan-5/22410066 System 2013-06-05T03:01:26Z html html5 Chrome Android Canvas javascript css3 mobile 25 <blockquote cite="https://www.slideshare.net/slideshow/chromehtml5-developers-live-japan-5/22410066" title="Chrome+HTML5 Developers Live Japan #5"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.slideshare.net%2Fslideshow%2Fchromehtml5-developers-live-japan-5%2F22410066" alt="" /> <a href="https://www.slideshare.net/slideshow/chromehtml5-developers-live-japan-5/22410066">Chrome+HTML5 Developers Live Japan #5</a></cite><p><a href="https://www.slideshare.net/slideshow/chromehtml5-developers-live-japan-5/22410066"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/eb14a6d078cef14c4e116afedfa159adbb166e36/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2Fgoogledeveloperlive-130603211145-phpapp02-thumbnail.jpg%3Fwidth%3D640%26height%3D640%26fit%3Dbounds" alt="Chrome+HTML5 Developers Live Japan #5" title="Chrome+HTML5 Developers Live Japan #5" class="entry-image" /></a></p><p>【Canvasを使ったモバイルHTML5ゲームの最適化 for Chrome Mobile】 このセッションでは、Google I/O で展示した HTML5 版 Blood Brothers のデモを実機で紹介しながら、スマートフォンにおける Canvas を用いた細かい最適化の方法を中級者向けに解説します。</p><p><a href="https://b.hatena.ne.jp/entry/s/www.slideshare.net/slideshow/chromehtml5-developers-live-japan-5/22410066"><img src="https://b.hatena.ne.jp/entry/image/https://www.slideshare.net/slideshow/chromehtml5-developers-live-japan-5/22410066" alt="はてなブックマーク - Chrome+HTML5 Developers Live Japan #5" title="はてなブックマーク - Chrome+HTML5 Developers Live Japan #5" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.slideshare.net/slideshow/chromehtml5-developers-live-japan-5/22410066"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://ke-tai.org/blog/2011/04/18/jquery-qrcode/ System 2013-05-01T04:38:44Z jquery QRコード jQuery Canvas HTML5 javascript 34 <blockquote cite="http://ke-tai.org/blog/2011/04/18/jquery-qrcode/" title="ke-tai.org &gt; Blog Archive &gt; JavaScriptを使ってQRコードを作れる「jQuery.qrcode」"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fke-tai.org%2Fblog%2F2011%2F04%2F18%2Fjquery-qrcode%2F" alt="" /> <a href="http://ke-tai.org/blog/2011/04/18/jquery-qrcode/">ke-tai.org &gt; Blog Archive &gt; JavaScriptを使ってQRコードを作れる「jQuery.qrcode」</a></cite><p><a href="http://ke-tai.org/blog/2011/04/18/jquery-qrcode/"><img src="" alt="ke-tai.org &gt; Blog Archive &gt; JavaScriptを使ってQRコードを作れる「jQuery.qrcode」" title="ke-tai.org &gt; Blog Archive &gt; JavaScriptを使ってQRコードを作れる「jQuery.qrcode」" class="entry-image" /></a></p><p>JavaScriptを使ってQRコードを作れる「jQuery.qrcode」 Tweet 2011/4/18 月曜日 matsui Posted in ソフト紹介, 記事紹介・リンク | No Comments » もはやモバイルとは切っても切れない関係となっているQRコードですが、JavaScriptを使ってQRコードを作れるjQueryプラグイン「jQuery.qrcode」というものがあるようです。 ...</p><p><a href="https://b.hatena.ne.jp/entry/ke-tai.org/blog/2011/04/18/jquery-qrcode/"><img src="https://b.hatena.ne.jp/entry/image/http://ke-tai.org/blog/2011/04/18/jquery-qrcode/" alt="はてなブックマーク - ke-tai.org &gt; Blog Archive &gt; JavaScriptを使ってQRコードを作れる「jQuery.qrcode」" title="はてなブックマーク - ke-tai.org &gt; Blog Archive &gt; JavaScriptを使ってQRコードを作れる「jQuery.qrcode」" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/ke-tai.org/blog/2011/04/18/jquery-qrcode/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://www.slideshare.net/slideshow/yeoman-html5-web20130424-2/19576592 System 2013-04-24T03:46:27Z html5 アプリ javascript Webサービス yeoman 125 <blockquote cite="https://www.slideshare.net/slideshow/yeoman-html5-web20130424-2/19576592" title="つかってみよう！Yeoman 〜HTML5 Webアプリ開発を効率化するツールの紹介〜"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.slideshare.net%2Fslideshow%2Fyeoman-html5-web20130424-2%2F19576592" alt="" /> <a href="https://www.slideshare.net/slideshow/yeoman-html5-web20130424-2/19576592">つかってみよう！Yeoman 〜HTML5 Webアプリ開発を効率化するツールの紹介〜</a></cite><p><a href="https://www.slideshare.net/slideshow/yeoman-html5-web20130424-2/19576592"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/70e558152926d1f5456f8e2a3f8088f212cae4f2/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2Fyeomanhtml5web201304242-130422085813-phpapp01-thumbnail.jpg%3Fwidth%3D640%26height%3D640%26fit%3Dbounds" alt="つかってみよう！Yeoman 〜HTML5 Webアプリ開発を効率化するツールの紹介〜" title="つかってみよう！Yeoman 〜HTML5 Webアプリ開発を効率化するツールの紹介〜" class="entry-image" /></a></p><p>Yeomanの基礎からちょっとした応用までを紹介。 Chrome+HTML5 Developers Live Japan #4 https://plus.google.com/events/c9p1aclqe3fhl6gpo9p5hj4a01g のライブ配信用スライドです。</p><p><a href="https://b.hatena.ne.jp/entry/s/www.slideshare.net/slideshow/yeoman-html5-web20130424-2/19576592"><img src="https://b.hatena.ne.jp/entry/image/https://www.slideshare.net/slideshow/yeoman-html5-web20130424-2/19576592" alt="はてなブックマーク - つかってみよう！Yeoman 〜HTML5 Webアプリ開発を効率化するツールの紹介〜" title="はてなブックマーク - つかってみよう！Yeoman 〜HTML5 Webアプリ開発を効率化するツールの紹介〜" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.slideshare.net/slideshow/yeoman-html5-web20130424-2/19576592"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://jonobr1.com/Physics/ System 2013-04-22T00:45:52Z library javascript html5 48 <blockquote cite="https://jonobr1.com/Physics/" title="Physics for JavaScript"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fjonobr1.com%2FPhysics%2F" alt="" /> <a href="https://jonobr1.com/Physics/">Physics for JavaScript</a></cite><p><a href="https://jonobr1.com/Physics/"><img src="" alt="Physics for JavaScript" title="Physics for JavaScript" class="entry-image" /></a></p><p>A two-dimensional port into JavaScript of the popular Traer Physics Library from Processing. Downloads Development Version Uncompressed with comments about 25kb Production Version Minified using Closure Compiler about 12kb Or check out the source code on github. Purpose There are many great physi...</p><p><a href="https://b.hatena.ne.jp/entry/s/jonobr1.com/Physics/"><img src="https://b.hatena.ne.jp/entry/image/https://jonobr1.com/Physics/" alt="はてなブックマーク - Physics for JavaScript" title="はてなブックマーク - Physics for JavaScript" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/jonobr1.com/Physics/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://componentjs.com/ System 2013-02-13T04:16:39Z html5 JavaScript フレームワーク 12 <blockquote cite="http://componentjs.com/" title="ComponentJS"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fcomponentjs.com%2F" alt="" /> <a href="http://componentjs.com/">ComponentJS</a></cite><p><a href="http://componentjs.com/"><img src="" alt="ComponentJS" title="ComponentJS" class="entry-image" /></a></p><p>Powerful run-time Component System for structuring HTML5-based Rich Clients ComponentJS is a stand-alone MPL-licensed Open Source library for JavaScript, providing a powerful run-time Component System for hierarchically structuring the User-Interface (UI) dialogs of complex HTML5-based Rich Clien...</p><p><a href="https://b.hatena.ne.jp/entry/componentjs.com/"><img src="https://b.hatena.ne.jp/entry/image/http://componentjs.com/" alt="はてなブックマーク - ComponentJS" title="はてなブックマーク - ComponentJS" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/componentjs.com/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://html5quintus.com/ System 2012-12-25T02:57:19Z game html5 Quintus game engine 35 <blockquote cite="http://html5quintus.com/" title="Quintus JavaScript HTML5 Game Engine"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fhtml5quintus.com%2F" alt="" /> <a href="http://html5quintus.com/">Quintus JavaScript HTML5 Game Engine</a></cite><p><a href="http://html5quintus.com/"><img src="" alt="Quintus JavaScript HTML5 Game Engine" title="Quintus JavaScript HTML5 Game Engine" class="entry-image" /></a></p><p>Quintus is an easy-to-learn, fun-to-use JavaScript HTML5 game engine for mobile, desktop and beyond!Demo Game a platfomer in ~80 lines of code, you can edit the code on the left. Click to focus, arrow keys to move. more var Q = Quintus() .include(&quot;Sprites, Scenes, Input, 2D, Touch, UI&quot;) .setup({ ...</p><p><a href="https://b.hatena.ne.jp/entry/html5quintus.com/"><img src="https://b.hatena.ne.jp/entry/image/http://html5quintus.com/" alt="はてなブックマーク - Quintus JavaScript HTML5 Game Engine" title="はてなブックマーク - Quintus JavaScript HTML5 Game Engine" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/html5quintus.com/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://enchantjs.com/ja/ System 2012-12-21T02:05:38Z enchant.js 開発 js ゲーム html5 javascript ライブラリ 533 <blockquote cite="http://enchantjs.com/ja/" title="enchant.js - A simple JavaScript framework for creating games and apps."><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fenchantjs.com%2Fja%2F" alt="" /> <a href="http://enchantjs.com/ja/">enchant.js - A simple JavaScript framework for creating games and apps.</a></cite><p><a href="http://enchantjs.com/ja/"><img src="" alt="enchant.js - A simple JavaScript framework for creating games and apps." title="enchant.js - A simple JavaScript framework for creating games and apps." class="entry-image" /></a></p><p>enchant.js is … カンタンにゲームやアプリを開発できる HTML5 + JavaScript フレームワークです。 2011年に公開され、すでに 1,000 本以上のゲーム/アプリが公開されています。 オープンソース (MITライセンス) で、無料で利用できます。 ドキュメント・書籍・チュートリアルサイトが充実しています。 たくさんのプラグ...</p><p><a href="https://b.hatena.ne.jp/entry/enchantjs.com/ja/"><img src="https://b.hatena.ne.jp/entry/image/http://enchantjs.com/ja/" alt="はてなブックマーク - enchant.js - A simple JavaScript framework for creating games and apps." title="はてなブックマーク - enchant.js - A simple JavaScript framework for creating games and apps." border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/enchantjs.com/ja/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://mobile.smashingmagazine.com/2012/10/19/design-your-own-mobile-game/ System 2012-10-20T09:14:53Z HTML5 チュートリアル 8 <blockquote cite="https://mobile.smashingmagazine.com/2012/10/19/design-your-own-mobile-game/" title="How To Design A Mobile Game With HTML5 — Smashing Magazine"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fmobile.smashingmagazine.com%2F2012%2F10%2F19%2Fdesign-your-own-mobile-game%2F" alt="" /> <a href="https://mobile.smashingmagazine.com/2012/10/19/design-your-own-mobile-game/">How To Design A Mobile Game With HTML5 — Smashing Magazine</a></cite><p><a href="https://mobile.smashingmagazine.com/2012/10/19/design-your-own-mobile-game/"><img src="" alt="How To Design A Mobile Game With HTML5 — Smashing Magazine" title="How To Design A Mobile Game With HTML5 — Smashing Magazine" class="entry-image" /></a></p><p>Tricks and techniques for making an HTML5 game. In this post, Eoin McGrath creates a very simple game that works on most smartphones as well as modern browsers. The great thing about these titles is that they work equally well on both mobile and desktop using the same code. Could HTML5 finally fu...</p><p><a href="https://b.hatena.ne.jp/entry/s/mobile.smashingmagazine.com/2012/10/19/design-your-own-mobile-game/"><img src="https://b.hatena.ne.jp/entry/image/https://mobile.smashingmagazine.com/2012/10/19/design-your-own-mobile-game/" alt="はてなブックマーク - How To Design A Mobile Game With HTML5 — Smashing Magazine" title="はてなブックマーク - How To Design A Mobile Game With HTML5 — Smashing Magazine" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/mobile.smashingmagazine.com/2012/10/19/design-your-own-mobile-game/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://jp.techcrunch.com/2012/10/09/20121008google-microsoft-facebook-and-others-launch-web-platform-docs-a-web-standards-documentation-site/ System 2012-10-09T01:11:03Z facebook Google 情報 Adobe microsoft Apple html5 css 249 <blockquote cite="https://jp.techcrunch.com/2012/10/09/20121008google-microsoft-facebook-and-others-launch-web-platform-docs-a-web-standards-documentation-site/" title="TechCrunch | Startup and Technology News"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fjp.techcrunch.com%2F2012%2F10%2F09%2F20121008google-microsoft-facebook-and-others-launch-web-platform-docs-a-web-standards-documentation-site%2F" alt="" /> <a href="https://jp.techcrunch.com/2012/10/09/20121008google-microsoft-facebook-and-others-launch-web-platform-docs-a-web-standards-documentation-site/">TechCrunch | Startup and Technology News</a></cite><p><a href="https://jp.techcrunch.com/2012/10/09/20121008google-microsoft-facebook-and-others-launch-web-platform-docs-a-web-standards-documentation-site/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/ae4c41fd8bdfb0a40f6e1e45309b727b8d5cee4e/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Ftechcrunch.com%2Fwp-content%2Fuploads%2F2018%2F04%2Ftc-logo-2018-square-reverse2x.png" alt="TechCrunch | Startup and Technology News" title="TechCrunch | Startup and Technology News" class="entry-image" /></a></p><p>Limited space! Get on waitlist to be the first to know when tickets go live!</p><p><a href="https://b.hatena.ne.jp/entry/s/jp.techcrunch.com/2012/10/09/20121008google-microsoft-facebook-and-others-launch-web-platform-docs-a-web-standards-documentation-site/"><img src="https://b.hatena.ne.jp/entry/image/https://jp.techcrunch.com/2012/10/09/20121008google-microsoft-facebook-and-others-launch-web-platform-docs-a-web-standards-documentation-site/" alt="はてなブックマーク - TechCrunch | Startup and Technology News" title="はてなブックマーク - TechCrunch | Startup and Technology News" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/jp.techcrunch.com/2012/10/09/20121008google-microsoft-facebook-and-others-launch-web-platform-docs-a-web-standards-documentation-site/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://www.ibm.com/developerworks/jp/java/library/j-html5-game1/index.html System 2012-09-28T04:27:43Z 情報 html5 ゲーム チュートリアル 106 <blockquote cite="http://www.ibm.com/developerworks/jp/java/library/j-html5-game1/index.html" title="IBM Developer"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fwww.ibm.com%2Fdeveloperworks%2Fjp%2Fjava%2Flibrary%2Fj-html5-game1%2Findex.html" alt="" /> <a href="http://www.ibm.com/developerworks/jp/java/library/j-html5-game1/index.html">IBM Developer</a></cite><p><a href="http://www.ibm.com/developerworks/jp/java/library/j-html5-game1/index.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/19857c7de7ed65091690ab2e51011ea31f141cfd/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fopengraph.githubassets.com%2F96cacf76e18bd2e22f49b4be3e7c5550cb8716ba61bd04e564a756e4e5d41262%2FIBM%2Fjapan-technology" alt="IBM Developer" title="IBM Developer" class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/www.ibm.com/developerworks/jp/java/library/j-html5-game1/index.html"><img src="https://b.hatena.ne.jp/entry/image/http://www.ibm.com/developerworks/jp/java/library/j-html5-game1/index.html" alt="はてなブックマーク - IBM Developer" title="はてなブックマーク - IBM Developer" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/www.ibm.com/developerworks/jp/java/library/j-html5-game1/index.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://www.chrome-life.com/html5/5447/ System 2012-07-11T04:34:47Z HTML5 エディタ ブラウザ コーディング CSS CSS3 javascript 899 <blockquote cite="http://www.chrome-life.com/html5/5447/" title="chrome-life.com"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fwww.chrome-life.com%2Fhtml5%2F5447%2F" alt="" /> <a href="http://www.chrome-life.com/html5/5447/">chrome-life.com</a></cite><p><a href="http://www.chrome-life.com/html5/5447/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/609b5a55e975f6514f7d69e6efe7a80dcd5d2d84/backend=imagemagick;height=90;version=1;width=120/http%3A%2F%2Fcontents.liveout.co.jp%2Fchrome-life%2Fwp-content%2Fuploads%2F2012%2F07%2FLiveweave-HTML5-CSS3-JavaScript-playground-for-web-developers-and-designers.jpg" alt="chrome-life.com" title="chrome-life.com" class="entry-image" /></a></p><p>Click here to enter</p><p><a href="https://b.hatena.ne.jp/entry/www.chrome-life.com/html5/5447/"><img src="https://b.hatena.ne.jp/entry/image/http://www.chrome-life.com/html5/5447/" alt="はてなブックマーク - chrome-life.com" title="はてなブックマーク - chrome-life.com" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/www.chrome-life.com/html5/5447/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://kray.jp/blog/three-js/ System 2012-06-29T09:32:25Z 3D javascript html5 three.js canvas 345 <blockquote cite="https://kray.jp/blog/three-js/" title="JavaScript 3DレンダリングエンジンのThree.jsを試す"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fkray.jp%2Fblog%2Fthree-js%2F" alt="" /> <a href="https://kray.jp/blog/three-js/">JavaScript 3DレンダリングエンジンのThree.jsを試す</a></cite><p><a href="https://kray.jp/blog/three-js/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/2f72f14da5f92cca862127f8238df95056c4063a/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fkray.jp%2Fwp%2Fwp-content%2Fuploads%2F2021%2F05%2Fogp.jpg" alt="JavaScript 3DレンダリングエンジンのThree.jsを試す" title="JavaScript 3DレンダリングエンジンのThree.jsを試す" class="entry-image" /></a></p><p>こんにちは。 KRAYアルバイトの浅海です。 今回は、最近ちまたで噂のThree.jsで遊んでみようとおもいます。 http://github.com/mrdoob/three.js webgl対応のブラウザで見ている方は、右上に3Dのボックスが表示されていると思います。 Three.jsを使えば、このようなことを簡単にJavascriptで実現できるのです。 半信半疑...</p><p><a href="https://b.hatena.ne.jp/entry/s/kray.jp/blog/three-js/"><img src="https://b.hatena.ne.jp/entry/image/https://kray.jp/blog/three-js/" alt="はてなブックマーク - JavaScript 3DレンダリングエンジンのThree.jsを試す" title="はてなブックマーク - JavaScript 3DレンダリングエンジンのThree.jsを試す" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/kray.jp/blog/three-js/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://lab.hakim.se/scroll-effects/ System 2012-04-17T02:46:05Z CSS javascript webデザイン CSS3 HTML5 680 <blockquote cite="https://lab.hakim.se/scroll-effects/" title="stroll.js - CSS3 Scroll Effects"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Flab.hakim.se%2Fscroll-effects%2F" alt="" /> <a href="https://lab.hakim.se/scroll-effects/">stroll.js - CSS3 Scroll Effects</a></cite><p><a href="https://lab.hakim.se/scroll-effects/"><img src="" alt="stroll.js - CSS3 Scroll Effects" title="stroll.js - CSS3 Scroll Effects" class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/s/lab.hakim.se/scroll-effects/"><img src="https://b.hatena.ne.jp/entry/image/https://lab.hakim.se/scroll-effects/" alt="はてなブックマーク - stroll.js - CSS3 Scroll Effects" title="はてなブックマーク - stroll.js - CSS3 Scroll Effects" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/lab.hakim.se/scroll-effects/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://browserquest.mozilla.org/ System 2012-03-28T14:59:37Z WEB ゲーム html5 283 <blockquote cite="http://browserquest.mozilla.org/" title="BrowserQuest"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fbrowserquest.mozilla.org%2F" alt="" /> <a href="http://browserquest.mozilla.org/">BrowserQuest</a></cite><p><a href="http://browserquest.mozilla.org/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/3b687362790e95d0302d4cc0ddd58ac8fc87ff08/backend=imagemagick;height=90;version=1;width=120/http%3A%2F%2Fbrowserquest.mozilla.org%2Fimg%2Fcommon%2Fpromo-title.jpg" alt="BrowserQuest" title="BrowserQuest" class="entry-image" /></a></p><p>What is BrowserQuest? BrowserQuest is a multiplayer game inviting you to explore a world of adventure from your Web browser. This demo is powered by HTML5 and WebSockets, which allow for real-time gaming and apps on the Web. Learn more about the technology</p><p><a href="https://b.hatena.ne.jp/entry/browserquest.mozilla.org/"><img src="https://b.hatena.ne.jp/entry/image/http://browserquest.mozilla.org/" alt="はてなブックマーク - BrowserQuest" title="はてなブックマーク - BrowserQuest" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/browserquest.mozilla.org/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://coliss.com/articles/build-websites/operation/work/open-source-collection-chico-ui.html System 2012-03-02T15:42:56Z ui ブラウザ フレームワーク html5 javascript css3 WEBデザイン 1267 <blockquote cite="https://coliss.com/articles/build-websites/operation/work/open-source-collection-chico-ui.html" title="ウェブ制作の時間を大幅に短縮する、今時のUIコンポーネントが簡単に実装できる -Chico UI"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fwork%2Fopen-source-collection-chico-ui.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/work/open-source-collection-chico-ui.html">ウェブ制作の時間を大幅に短縮する、今時のUIコンポーネントが簡単に実装できる -Chico UI</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/work/open-source-collection-chico-ui.html"><img src="" alt="ウェブ制作の時間を大幅に短縮する、今時のUIコンポーネントが簡単に実装できる -Chico UI" title="ウェブ制作の時間を大幅に短縮する、今時のUIコンポーネントが簡単に実装できる -Chico UI" class="entry-image" /></a></p><p>HTML5+CSS3+JavaScriptで制作されたオープンソースのUIコンポーネントコレクションを紹介します。 Chico UI [ad#ad-2] Chico UIの対応ブラウザは下記の通りです。 IE6には対応していませんが、十分でしょう。 対応ブラウザ Google Chrome Safari Firefox 4+ Internet Explorer 7+ Opera Chico UIのウェブページに使用す...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/open-source-collection-chico-ui.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/work/open-source-collection-chico-ui.html" alt="はてなブックマーク - ウェブ制作の時間を大幅に短縮する、今時のUIコンポーネントが簡単に実装できる -Chico UI" title="はてなブックマーク - ウェブ制作の時間を大幅に短縮する、今時のUIコンポーネントが簡単に実装できる -Chico UI" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/open-source-collection-chico-ui.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote>