技術 - HTML5の記事一覧
lorca - Go + HTML5でデスクトップアプリを開発する
Web技術を使ってデスクトップアプリケーションを作る技術としてElectronが知られています。Electronで利用するのはnode/JavaScriptですが、別な言語使う技術も存在します。今回紹介するlorcaはGoを使ってデスクトップアプリを作ります。UIこそHTML5ですが、大きな可能性を秘めた存在と言えそう...
HiraganaStream - 平仮名を学習
言葉を覚える方法は幾つかありますが、まずは使われている文字を覚えるのが基本でしょう。英語であればアルファベットだけですが、日本では平仮名と片仮名、さらに漢字を覚えなければなりません。今回紹介するHiraganaStreamは日本語の中でも平仮名を覚えるために作られたソフトウェアになります。## HiraganaStre...
The Every Day Calendar - 日々タスクを達成し続けるカレンダー
ロボットやIoTといった分野で活躍しているSimone Giertzさん。口紅を塗ったり、頭を叩いて起こしたりとロボットとプログラミングを組み合わせて楽しい動画を公開しています。そんな彼女が作った毎日のタスク達成を記録するガジェットがThe Every Day Calendar
HTML5 Speedtest - HTML5でインターネット速度テスト
ネットワーク速度は常に気になるものです。モバイルネットワーク、光ファイバの速度など宣伝されているものほど速く感じないときにはスピードテストを行うでしょう。しかし昔からあったものはFlashを使っており、モダンなブラウザでは使えなくなってきています。そこで使ってみたいのがHTML5 Speedtestです。HTML5で作...
Vvverb.js - ドラッグ&ドロップでWebサイトを作成
かつてはWebサイトを構築する際にオーサリングツールを使うのが当たり前でしたが、最近ではUIフレームワークが出てきたり、CSS3の多機能性によってHTMLを手打ちすることも増えてきました。とはいえ、簡易的な内容であればオーサリングツールを使った方が簡単でしょう。そこで使ってみたいのがVvverb.jsになります。ドラッ...
Book Management PWA Onsen UI Vue
新しい技術を習得したいと思ったら、実際に手を動かして何かを作ってみるのがオススメです。手を動かした経験は誰にも奪われず、自分の知識になります。また、手を動かすことで問題点やハマりどころも理解でき、実際に利用する際に応用できます。今回はPWA（Progressive Web App）を体感するためのアプリケーション、Bo...
Trigonoparty - 三角関数を可視化
三角関数は高校生くらいで習い始めます。sin/cos/tanなどの関数は懐かしいものでしょう。単純に関数だけを言われても覚えるのは難しいですが、図形を使いながら説明されると腑に落ち、覚えられるかと思います。そこで使ってみたいのがTrigonopartyです。三角関数の基礎について、図形を用いながら可視化します。## T...
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...