技術 - HTML5の記事一覧
MineCraftWebGL - WebGL製のMinecraft
Minecraftにハマっている人は大勢います。サバイバルで生き残るのはもちろん、クリエイターとして大きなものを作るのも楽しみ方の一つです。難点なのはアプリケーションをインストールしなければならないことでしょう。そこで使ってみたいのがMineCraftWebGLです。WebGLで作られたMinecraftです。## M...
Worker DOM - Web WorkerでDOM操作を実現
HTML5 APIの一つにWeb Workerがあります。通常のWebブラウザ上で動作するJavaScriptとは別で、バックグラウンドで動作するJavaScriptです。時間のかかる処理を行ったりするのに便利ですが、一つの欠点にDOMが使えないという点が挙げられます。そこで使ってみたいのがWorker DOMです。W...
3D Builder - SVGで3Dを描く
HTML5以降、APIがどんどん拡張されており、Webにおける表現力が増しています。支える技術として知られているのがSVGとCanvasでしょう。これらは2Dグラフィックスを描画するのに使われることが多いです。そんな中、登場したのが3D Builderです。なんとSVGで3Dを描くためのライブラリです。## 3D Bu...
JsStore - IndexedDBを使いやすくするO/Rマッパー風ライブラリ
HTML5でWebブラウザ内にデータを残す方法としてlocalStorageが有名ですが、他にIndexedDBがあります。しかしIndexedDBは検索できるKVSであったり、localStorageと違って非同期で使う、スキーマが必要など何かと面倒なイメージがあります。そこで使ってみたいのがJsStoreです。In...
Draw2D touch - Webブラウザ上でVisio風のドローイングを実現する
開発現場においてMicrosoft Visioは人気のあるソフトウェアです。特にプロジェクトマネージャなどがアーキテクチャを図化したり、データベースのモデリングをしたりするのに使われます。しかし、その使い方に対して価格が非常に高いと感じてしまう方もいるでしょう。そこで使ってみたいのがDraw2D touchです。HTM...
TOAST UI Image Editor - Canvasを使ったリッチな画像編集
画像編集と言えばPhotoshopを思い浮かべる人が多いでしょう（またはGIMP）。しかしPhotoshopのすべての機能を満遍なく使いこなしている方はほとんどいないはずです。それどころか、無料のソフトウェアでも実は十分だったという方もいるでしょう。そこで注目したいのがTOAST UI Image Editorです。W...
PWACompat - PWAに対応しない古いブラウザでもWeb App Manifestに対応させる
PWAの一要素としてWeb App Manifestがあります。JSONファイルを用意しておくことで、Webアプリをローカルアプリケーションかのように保存できます。この時、アイコンやスプラッシュスクリーンも大事な要素です。古いブラウザでは対応していないPWAについて、PWACompatが対応させてくれます。## PWA...
MediaStreamRecorder - Webで音声/動画を録画
HTML5ではWebカメラやマイクにアクセスできます。例えばWebチャットなどで使われたりしますが、ARに使ったりとアイディア次第で面白い使い方が考えられます。録音、録画だって可能です。今回紹介するMediaStreamRecorderはMediaRecorder APIを使った録音/録画が実装できます。## Medi...
page-transitions-travelapp - ネイティブレベルのUXを体感できるWebアプリ
ハイブリッドアプリやPWAなど、Webアプリケーションをスマートフォンのネイティブアプリ風に使う技術が発展しています。ネイティブアプリと異なり、インストールの手間がなく、プラットフォーマーによる縛りもないのがWebの魅力と言えます。そんなWeb技術を駆使して作られたのがpage-transitions-travelap...
mobile-drag-drop - スマートフォン/タブレットでもドラッグ&ドロップAPIを使う
HTML5で追加されたAPIの一つ、ドラッグ&ドロップはWebアプリケーションをよりローカルアプリケーションのように使えるようにするAPIです。主なターゲットはデスクトップのようですが、タブレットやスマートフォンも業務利用が増えています。そこで使ってみて欲しいのがmobile-drag-dropです。モバイル向けにドラ...
WebVR UI - WebVRサイト用の便利UIライブラリ
VRが人気です。Unityなどで作るのも良いですが、WebVRであればWeb技術だけでできるので、より障壁が低いと言えるでしょう。そして多くのWebVRサイトでは、ボタンをクリックしてWebVRモードに入る仕組みが使われています。WebVRモードになると最大化されたり、左右の視差を使うために表示が二分割されたりします。...
png-font.js - Canvas上にピクセルアートなテキストを出力
Canvasを使えばDOMとはまったく違うグラフィックスを描けます。しかしDOMやCSSとは異なる使い方なので、適切に描くのに苦労することも多いでしょう。そういうときには最適なライブラリを使うのが一番です。今回紹介するpng-font.jsはピクセルアートなテキストを出力できるライブラリです。## png-font.j...
HTML5 Canvas Drawing App - マウス/タッチ操作に対応したドローアプリ
スマートフォンで文字を入力するのは面倒ですが、画面にタッチ操作できるので指で絵を描いたりするのは簡単です。写真のレタッチであったり、自分が書いた絵をそのままアップロードしたりと絵には様々な使い道があります。今回紹介するのはHTML5 Canvas Drawing App、Webブラウザを使ったドローアプリです。## H...
Gesture Helper - Webブラウザのスワイプ操作、ズームを検知
スマートフォンはこれまでにない操作を生み出しました。例えばスワイプ操作であったり、ズームやパンといった操作もインタラクティブに行われます。デスクトップとの整合性を取るのに苦労することもあるでしょう。そこで使ってみたいのがGesture Helperです。スマートフォンのみならず、デスクトップでもスワイプ操作などを可能に...
RTP.PinchZoom.js - 画像をピンチ操作で拡大
スマートフォンアプリでよく使われるのがピンチ操作です。複数指を使って操作することで、デスクトップではできなかったような操作が可能になります。より直感的で、誰でもすぐに使いこなせるのも利点です。そんなピンチ、ズームと言った操作をWeb上でも使えるようにするのがRTP.PinchZoom.jsです。## RTP.Pinch...
Bejeweled - ビジュエルドをWebで
宝石を3つ並べると消えるBejeweled（ビジュエルド）というゲームは昔から人気です。ルールがとても簡単で、誰でも覚えられるのが人気の秘密でしょう。様々なプラットフォームに対して提供されています。そんなBejeweledをWebブラウザ上で遊べるのがその名もBejeweledです。## Bejeweledの使い方ゲー...
next-editor - WebブラウザベースのGitエディタ
開発者にとって、Gitの存在は欠かせなくなっています。開発に限らず、操作の履歴をとっておきたいと思うことはよくあります。そうした時にGitを使うことで手軽にバックアップを取ったり、GitHubと連携させることもできるようになります。今回紹介するnext-editorはWebブラウザ上で動作するGitブラウザ/エディタで...
Quantum Game - 量子力学を学べるHTML5ゲーム
勉強だって楽しくできる方が良いに決まっています。苦しんでやるような勉強では覚えが悪いのは当然です。なので勉強とゲームは実は相性が良いのではないかと思っています。ゲームで楽しく学べるならば、それが一番のはずです。今回は量子力学を学べるゲーム、Quantum Gameを紹介します。## Quantum Gameの使い方光源...
Annict Mimi - PWAなAnnictコメントビューワー
PWA（Progressive Web App）というキーワードが流行です。特定の技術を指すわけではなく、スマートフォンとWebのあり方のベストプラクティスという位置づけです。そのため若干分かりづらく、理解するためには自分で実際に手を動かすのが良いようです。今回はそんなPWAをAnnicと連携させたAnnict Mim...
woscope - WebGLベースのオシロスコープ
電気などの波形を見るのに使われるのがオシロスコープです。工学系の方であれば誰もが一度は使ったことがあるのではないでしょうか。ツマミを回して写し出される波形の変化を楽しんだことがあるはずです。そんなオシロスコープをWebGLで再現したのがwoscopeです。## woscopeの使い方もちろん電気は流せないので、音楽を使...