技術 - HTML5の記事一覧
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...
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になります。ドラッ...