技術 - HTML5の記事一覧
Origami Simulator - 折り紙をWebGLでシミュレーション
折り紙は日本のみならず、世界中で愛されている存在です。1枚の紙から、技巧を凝らして折ることでさまざまな造形を可能にします。中には、どうやって折ったのか分からないものも多数あります。そんな折り紙をシミュレーションできるソフトウェアがOrigami Simulatorになります。## Origami Simulatorの使...
OpenPlayerJS - 軽量なHTML5動画プレーヤー
HTML5で動画を再生する際にはvideoタグを利用します。しかし、このvideoタグはごく基本的な機能しかなく、使い勝手はよくありません。そこで、外部のライブラリを使って機能を追加するのが基本です。今回紹介するOpenPlayerJSもそんなHTML5用の動画プレーヤーになります。## OpenPlayerJSの使い...
essentia.js - WebAssemblyを使って音声/音楽を高速解析
インターネット上で扱うメディアにはいくつかの種類があります。プログラミングで解析しやすいのはテキストでしょう。次に画像を解析するライブラリも多数あります。最近では機械学習が盛り上がっているので、動画解析を行うライブラリも増えています。意外と少ないのは音楽ファイルの解析ツールです。essentia.jsはそんな中で数少な...
Github card - GitHubリポジトリ情報を表示するカスタムエレメント
HTML5ではカスタムエレメントという機能で、独自のHTMLタグを追加できます。あまり使われている例は見ませんが、特定のUIや機能をサンドボックス化できるので便利です。今回紹介するGithub cardはGitHubリポジトリの紹介をカスタムエレメント化したソフトウェアになります。## Github cardの使い方こ...
Mi Band 2 - Web Bluetooth APIを使ってアクティビティトラッカーと通信
スマートウォッチとしてApple Watchを使っている人は大勢いますが、個人的にはAmazfit Bipを使っています。一度充電すれば1ヶ月以上保つので、ずっと付けっぱなしにできるのが魅力です。そんなAmazfit Bipをはじめ、Mi Bandなどのアクティビティトラッカーを簡単にWebブラウザと通信させられるのが...
Audio DSL - AudioWorkletを手軽に扱えるDSL
Web AudioはWebブラウザ上で音楽を扱えるAPIですが、処理をメインスレッドで行う必要があります。それに対してAudioWorkletはオーディオ処理に特化したWorkerで、バックグラウンドで音声処理が可能になります。しかしオーディオ自体の処理は複雑なイメージがあります。そうした処理をDSLでシンプルにしてく...
OpenSilver - SilverlightアプリをHTML5上で動かす
Flashは長く愛され続けた技術でしたが、HTML5やiPhoneの登場によって表舞台から姿を消しました。他にも類似技術としてJavaアプレットもありましたが、こちらも使われなくなっています。そしてもう一つはSilverlightです。SilverlightはMicrosoftが開発したFlash類似技術ですが、こちら...
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...