技術 - HTML5の記事一覧
Fractal Fantasy - WebGLを使った芸術的表現
Webブラウザの表現力は年々増しています。特にCanvasやWebGLによって、表現できる幅が大きく広がりました。使いこなすのは簡単ではありませんが、これまでのWebとは一線を画す表現が可能になります。今回紹介するFractal FantasyはそんなWebGLを使った多彩な表現を集めたソフトウェアです。極めればここま...
Dark Mode Toggle - ダークモード切り替え用Webコンポーネント
macOSから始まったダークモードは一気に広がっています。デスクトップはもちろん、Webサイトにおいてもダークモードの需要が高まっています。しかし、単純に暗いCSSを用意すれば良いだけではありません。ユーザにとって使いやすいダークモードを提供するために使ってみたいのがDark Mode Toggleです。Googleが...
Tone.js - Web上で音を奏でるためのフレームワーク
Web Audio APIによって、Webブラウザ上で音楽を奏でられるようになりましたが、このAPIはかなり低レベルなものとなっています。何でもできますが、すべて自分で実装しなければなりません。そのため、なかなか普及していません。そこで使ってみたいのがフレームワークになるライブラリです。今回はTone.jsを紹介します...
vmsg - Webサービスにボイスメッセージ機能を追加
電話ではボイスメッセージ機能があります。テキストでは伝わらない内容を音声で残したり、人によっては文字を入力するよりも口で言った方が早いという人もいるでしょう。しかしオンラインのサービスではあまり音声をサポートしたものは見かけません。常にテキスト入力が求められます。そこで使ってみたいのがvmsgです。ボイスメッセージを手...
Ambient Canvas Backgrounds - JavaScriptで背景アニメーションを生成
Webサイトの背景に動画を流したりするケースが見られますが、動画はサイズが大きくなりがちです。もっと軽量で、見た目のインパクトがある方法もあるでしょう。そのためにはJavaScriptで動的に作り出す方法が考えられます。今回はその一つの方法として、Ambient Canvas Backgroundsを紹介します。Can...
DJEN - メタル・ロックな音楽を生成
音楽の創作活動というのは才能と時間のかかるものです。数年かかって新しいシングルを一曲なんてのも珍しくありません。また、そうやってできあがった楽曲は著作権に縛られ、作曲家本人ですら自由に使えなかったりします。そこで使ってみたいのがDJEN、メタルやロックな音楽を生成してくれるソフトウェアです。## DJENの使い方プリセ...
RainingChain - HTML5で作られたMMORPG
Webブラウザさえあれば実現できることがどんどん増えています。Webブラウザさえあればインストール不要でWebアプリケーションが利用でき、データの共有なども簡単です。今回はRainingChainを紹介します。Webブラウザ向けに作られたMMOPRGです。## RainingChainの使い方ゲーム画面です。まずユーザ...
JS.Sketcher - Web上で3Dモデリング
IoTや3Dプリンタと言った文脈の中でハードウェアが存在意義を増しています。ちょっとしたオリジナルの部品を3Dプリンタで作ったり、IoTプロジェクトのハードカバーを作ったりします。そんな時に必要なのが3D CADになるでしょう。今回はWebブラウザ上で3DモデリングができるJS.Sketcherを紹介します。## JS...
indigo-player - 高い拡張性を誇る動画プレイヤー
videoタグの登場によってWeb上でも動画が再生できるようになりました。しかし機能的には実に簡素で、ただ再生する以上の機能がありません。大抵は別途ライブラリを用意して、そのライブラリ経由でvideoタグを使うでしょう。今回紹介するindigo-playerもそんな動画プレイヤーの一つです。扱える動画が多いのが特徴です...
fur - 3Dモデルからぬいぐるみ用の型紙を作る
個人的に立体物をコンピュータの中で表現できる人を尊敬します。平面なディスプレイの中で、立体を想像して描くのは非常に難易度が高い操作です。さらにそれをリアルな物体に展開することを考慮して（3Dプリンタのような）作成するとなると高度なスキルでしょう。今回紹介するfurは3Dモデルをベースに、ぬいぐるみの型紙に展開する作業を...
OpenCV.js WASM Web Worker Webpack Demo - WebAssebmlyによるOpenCV.js実装デモ
Web標準の進化は速く、どんどん新しい技術が出てきます。さらに、それらを使った開発を容易にするフレームワークやビルドライブラリも次々とトレンドが変わります。正直、ついていくのが大変な状況です。しかしそんな中だからこそ開発者は果敢にトライしていかなければなりません。今こそ試し、知見をためられるチャンスと言えるでしょう。今...
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...