HTML5の記事一覧プレミアムユーザー限定記事MOONGIFTプレミアムは、月額500円の有料サービスです。SVGで3Dを描くHTML5以降、APIがどんどん拡張されており、Webにおける表現力が増しています。支える技術として知られているのがSVGとCanvasでしょう。これらは2Dグラフィックスを描画するのに使われることが多いです。なんとSVGで3Dを描くためのライブラリです。IndexedDBを使いやすくするO/Rマッパー風ライブラリHTML5でWebブラウザ内にデータを残す方法としてlocalStorageが有名ですが、他にIndexedDBがあります。IndexedDBは検索できるKVSであったり、localStorageと違って非同期で使う、スキーマが必要など何かと面倒なイメージがあります。そこで使ってみたいのがJsStoreです。Visioは人気のあるソフトウェアです。プロジェクトマネージャなどがアーキテクチャを図化したり、データベースのモデリングをしたりするのに使われます。その使い方に対して価格が非常に高いと感じてしまう方もいるでしょう。画像編集と言えばPhotoshopを思い浮かべる人が多いでしょう(またはGIMP)。Photoshopのすべての機能を満遍なく使いこなしている方はほとんどいないはずです。それどころか、無料のソフトウェアでも実は十分だったという方もいるでしょう。Manifestがあります。JSONファイルを用意しておくことで、Webアプリをローカルアプリケーションかのように保存できます。この時、アイコンやスプラッシュスクリーンも大事な要素です。古いブラウザでは対応していないPWAについて、PWACompatが対応させてくれます。Webで音声/動画を録画HTML5ではWebカメラやマイクにアクセスできます。Webチャットなどで使われたりしますが、ARに使ったりとアイディア次第で面白い使い方が考えられます。録音、録画だって可能です。APIを使った録音/録画が実装できます。ネイティブレベルのUXを体感できるWebアプリハイブリッドアプリやPWAなど、Webアプリケーションをスマートフォンのネイティブアプリ風に使う技術が発展しています。ネイティブアプリと異なり、インストールの手間がなく、プラットフォーマーによる縛りもないのがWebの魅力と言えます。スマートフォン/タブレットでもドラッグ&ドロップAPIを使うHTML5で追加されたAPIの一つ、ドラッグ&ドロップはWebアプリケーションをよりローカルアプリケーションのように使えるようにするAPIです。主なターゲットはデスクトップのようですが、タブレットやスマートフォンも業務利用が増えています。そこで使ってみて欲しいのがmobile-drag-dropです。WebVRサイト用の便利UIライブラリVRが人気です。Unityなどで作るのも良いですが、WebVRであればWeb技術だけでできるので、より障壁が低いと言えるでしょう。多くのWebVRサイトでは、ボタンをクリックしてWebVRモードに入る仕組みが使われています。WebVRモードになると最大化されたり、左右の視差を使うために表示が二分割されたりします。Canvas上にピクセルアートなテキストを出力Canvasを使えばDOMとはまったく違うグラフィックスを描けます。DOMやCSSとは異なる使い方なので、適切に描くのに苦労することも多いでしょう。いうときには最適なライブラリを使うのが一番です。今回紹介するpng-font.jsはピクセルアートなテキストを出力できるライブラリです。マウス/タッチ操作に対応したドローアプリスマートフォンで文字を入力するのは面倒ですが、画面にタッチ操作できるので指で絵を描いたりするのは簡単です。写真のレタッチであったり、自分が書いた絵をそのままアップロードしたりと絵には様々な使い道があります。App、Webブラウザを使ったドローアプリです。Webブラウザのスワイプ操作、ズームを検知スマートフォンはこれまでにない操作を生み出しました。スワイプ操作であったり、ズームやパンといった操作もインタラクティブに行われます。デスクトップとの整合性を取るのに苦労することもあるでしょう。画像をピンチ操作で拡大スマートフォンアプリでよく使われるのがピンチ操作です。複数指を使って操作することで、デスクトップではできなかったような操作が可能になります。直感的で、誰でもすぐに使いこなせるのも利点です。そんなピンチ、ズームと言った操作をWeb上でも使えるようにするのがRTP.PinchZoom.jsです。ビジュエルドをWebで宝石を3つ並べると消えるBejeweled(ビジュエルド)というゲームは昔から人気です。ルールがとても簡単で、誰でも覚えられるのが人気の秘密でしょう。様々なプラットフォームに対して提供されています。そんなBejeweledをWebブラウザ上で遊べるのがその名もBejeweledです。WebブラウザベースのGitエディタ開発者にとって、Gitの存在は欠かせなくなっています。開発に限らず、操作の履歴をとっておきたいと思うことはよくあります。した時にGitを使うことで手軽にバックアップを取ったり、GitHubと連携させることもできるようになります。量子力学を学べるHTML5ゲーム勉強だって楽しくできる方が良いに決まっています。苦しんでやるような勉強では覚えが悪いのは当然です。勉強とゲームは実は相性が良いのではないかと思っています。ゲームで楽しく学べるならば、それが一番のはずです。Gameを紹介します。App)というキーワードが流行です。特定の技術を指すわけではなく、スマートフォンとWebのあり方のベストプラクティスという位置づけです。そのため若干分かりづらく、理解するためには自分で実際に手を動かすのが良いようです。WebGLベースのオシロスコープ電気などの波形を見るのに使われるのがオシロスコープです。工学系の方であれば誰もが一度は使ったことがあるのではないでしょうか。ツマミを回して写し出される波形の変化を楽しんだことがあるはずです。そんなオシロスコープをWebGLで再現したのがwoscopeです。JavaScriptでRAWデータを読み込みデジカメで撮影した写真は基本、JPEGで保存されます。カメラや写真にこだわりがある人は、JPEGの不可逆な変換を嫌い、撮影したデータをそのまま残したいと考えるものです。そのためにRAWデータが存在します。HTML5製のスネークゲームHTML5でゲームを提供する環境が増えています。Webブラウザ上で楽しめるゲームであればインストールする必要がないのですぐに遊べます。ダウンロードも軽量な、簡単なゲームが好まれる傾向があります。今回はそんなお手軽ゲームの一つ、Snakeを紹介します。いわゆるスネークゲームです。${article.post_date_view}${article.post_title}${article.except_content}プレミアムでしか読めない記事が733あります。blockworks。