技術 - HTML5の記事一覧
React Kanban - React製のTrello風カンバン
カンバンといえばトヨタの生産システムですが、Webで提供されるカンバンはすでに独自の進化を遂げつつあります。アジャイル的な使い方に限らず、情報を整理する方法としてカンバンを用いるケースがあります。そんなカンバンとして有名なのはTrelloですが、そのクローンをReactで作成したのがReact Kanbanです。## ...
Matrix Vision - Webカメラの映像をマトリックス風に
マトリックスと言えば黒バックに緑の文字が流れるシーンが有名です。あの文字は実は寿司のメニューだった、なんて話があります。コンソールっぽい雰囲気がデジタルの世界を感じさせるものになっています。そんなマトリックスの世界観をWebカメラを使ってリアルタイムに再現するのがMatrix Visionです。## Matrix Vi...
tracking.js - 画像/動画をトラッキング
写真はテキスト以上に情報が含まれています。人物を撮影しただけでも、そこには背景があったり、洋服があったり、天気なども映し出されます。しかし、そのためには写真から情報を収集する技術が必要です。tracking.jsはWebブラウザ上で人やオブジェクトを認識するJavaScriptライブラリになります。## trackin...
Vipercard - 懐かしのHypercardを現代に復活
表現したいと思った人が自由にデザインし、アプリケーションを作れる環境として有名だったのがHypercardです。白黒画面の時代から使われており、クリックした時や選択肢によって自由にフローを変えたりしてアプリケーションが作れました。自分で作ったり、人が作ったものをダウンロードして遊んだ人も多いはずです。そんなHyperc...
Sufee Admin - Bootstrap4対応の多機能ダッシュボードデザインテンプレート
Bootstrap4がそろそろ本格的に導入されるようになっています。後方互換性がないため、これまでのテンプレートが使えなくなってしまったのが残念です。しかし、これによって新しいチャンスが生まれたとも言えるでしょう。Sufee AdminはBootstrap4向けの管理ページテンプレートになります。今後のことを考えるなら...
blend.js - 二つの画像を重ね合わせるJavaScriptライブラリ
一つ一つの素材は単純でも、素材同士を合成することで新しい素材を生み出すことができます。最近ではAIによって、風景写真を別な風合いに変えたりするものもあります。従来、人手でやっていたような作業がすべて自動でできるようになっています。今回紹介するblend.jsはAIほど高度な訳ではありませんが、二つの画像をWeb上でミッ...
Coördinator - SVGの描き方を自由にカスタマイズ
SVGを使う面白さはベクターベースであるために一回描いた図形をカスタマイズしやすいということです。さらにカスタマイズするのもXMLを直に編集するのではなく、プログラムからできるのが利点です。今回紹介するCoördinatorは音楽サービスで知られるSpotifyが開発したSVGカスタマイズツールです。## Coördi...
FileReader.js - Web上でファイル/クリップボードを簡単に扱う
HTML5で便利になったAPIの一つがファイルの読み込み、FileReaderではないでしょうか。しかし非同期処理で行うものが多く、実装が若干面倒なイメージがあります。さらにこのデータを扱うのはファイルボックスまたはファイルのドラッグ&ドロップと二種類あるのも面倒です。そこで使ってみたいのがFileReader.jsで...
OpenSC2K - Electronベースのシムシティ2000クローン
これは恐ろしい…。開発者の多くはシミュレーションゲームが好きな気がします（もちろん開発者以外でも好きな人が多いですが）。最初に理想系を設計し、その通りに作品を作り上げていくのに喜びを覚えるものではないでしょうか。そんな開発者だからこそ、OpenSC2Kのようなソフトウェアが完成された日には大変なことになりそうです。Op...
Perspective - WebAssemblyによるピボットテーブル/グラフ
Webブラウザ上で動かすプログラムは遅い、と感じてしまう方はぜひWebAssemblyにトライしてみましょう。表示にCanvasを使えば高速ですし、コンパイルされているのでコードを見られることもありません。ロジックの隠蔽と表示の高速化、二つのメリットがあります。そんなWebAssemblyによるデモとしてPerspec...
rustynes - Rust製のファミコンエミュレータ
個人的にWebAssemblyにハマっているのでRustを触る機会があるのですが、まだまだWebAssemblyに対応したサードパーティーのライブラリが少なく、実践的ではないと思っていました。しかし、Rustは日進月歩で進化しています。そしてついにRustでファミコンエミュレータが作られました。もちろんWebAssem...
Clang In Browser - Web上でC言語を記述して WebAssemblyに
Webブラウザでコンパイルされたプログラムを実行できる WebAssembly。個人的に非常に注目している技術で、これまで難しかった、認証キーを公開せずにWebアプリケーションでも使えるようになっていくのでさらにWebアプリケーションの利用幅が広がっていくと思われます。そんな WebAssembly はC/C++/C#...
jspaint - 懐かしのペイントをWebアプリケーション化
昔のソフトウェアであっても、別な言語や別な環境で実行できると新しい魅力に出会うことがあります。最近であれば、ローカルOSで動いていたソフトウェアをWebアプリケーション化するだけでも面白いです。今回はWindowsではお馴染みのペイントをWebアプリケーション化したjspaintを紹介します。## jspaintの使い...
canvas-area - Canvasの表示内容をマウスで操作
CanvasはHTML5においてWebの表現力を飛躍的に高めてくれるAPIですが、その使い方に慣れるまでが意外と面倒なものに感じます。通常のDOMのようにスタイル設定ですぐに表示を変化できるのではなく、描画した内容をリフレッシュしながら使わなければなりません。そんなCanvasに柔軟性を持たせてくれそうなライブラリがc...
Dwitter - 140文字以下で作るデジタルアート
昔はハードウェアリソースが足らず、何とか小さなサイズに納めようとコードを短縮するようなことがありました。今はリソースが潤沢であり、そんな心配は不要になっているのですが、それでもコードの短さにこだわる人たちがいます。今回紹介するDwitterはTwitterに書き込める、140文字の長さでグラフィカルなプログラミングを行...
WebGL Scroll Spiral - WebGLとスクロールを組み合わせたデジタル作品
WebGLは普段使っているJavaScriptではなく、OpenGLに近いものになります。そのため、自分のやりたいことを実現するために覚えるべきことがたくさんあります。しかしゲームなどでも使える技術なので覚える価値があるでしょう。そんなWebGLとWebブラウザのスクロールを組み合わせた作品がWebGL Scroll ...
Via.js - Web WorkerでもDOMを利用可能に
JavaScriptはシングルスレッドなので、重たい処理を実行するとWebブラウザが固まってしまいます。それを防ぐため、Web Workerというバックグラウンドで処理を実行するAPIがあります。しかしWeb WorkerではDOM操作ができないという欠点があります。それを解決してくれるのがVia.jsです。## Vi...
Animation Worklet Explainer - Web上でスムーズなアニメーションを目指す
HTML5の高い表現力によって、アニメーションはなくてはならないものになっています。しかしJavaScriptの書き方であったり、CSS3の使い方によってはアニメーションというのは非常に重たい処理で、スムーズに表示されなかったりします。そんな現状を変えていこうと活動しているのがCSS Houdiniタスクフォースで、そ...
PaintBBS NEO - HTML5版お絵描きしぃ掲示板
イラスト掲示板は昔から人気があります。その多くは画像がアップロードできるものですが、中にはWeb上でイラストを描いて、そのまま貼り付けられるものもあります。昔はよくJavaアプレットで実装されていました。そんな古き良き（？）時代を彷彿とさせるWebペイントがPaintBBS NEOになります。## PaintBBS N...
Vue2 editor - Vueを使ったテキストエディタ
Web上で文章を書く機会が増えています。しかし多くの場合、テキストエリアそのままであったり、普段使っているエディタに比べて操作性が格段に落ちるものばかりです。これでは生産性が損なわれてしまうため、結局エディタで書いてコピー&ペーストせざるを得ません。より使いやすいWebベースのエディタを目指すならVue2 editor...