技術 - HTML5の記事一覧
jeelizFaceFilter - Webカメラで使える顔認識&トラッキング
Webカメラやスマートフォンのカメラはリアルとデジタルの入り口です。そのため、写し出された映像を加工したり、そこにある情報を解析する類のソフトウェアはとても人気があります。スマートフォンアプリにある、動画チャットしながらリアルタイムに情報を付与する、それと同じことがWeb上でできるのがjeelizFaceFilterで...
PIB - PHPをWebAssembly化してWebブラウザ上で実行
WebAssemblyはCやC++、Rustなどの言語で開発できます（他にもLLVMを生成する言語であれば何でも良いのですが）。つまり元々Cで開発されたソフトウェアはWebAssembly化できる可能性（あくまでも可能性）がある訳です。そんな無謀とも言える可能性を感じさせるのがPIBです。なんとPHPをWebブラウザ上...
Wired Elements - ラフなデザインになるカスタムタグ
ワイヤーフレームなど、ラフに作りたいという時は手書きなどが向いています。それをドローのソフトウェアなどできっちりと書き始めてしまうと、些細な部分にこだわってしまって目的であるプロトタイプがなかなか作れなかったりします。そこで使ってみたいのがWired Elementsです。Web上でラフなデザインを再現できるWebコン...
KnzkApp - ハイブリッドアプリのMastodonクライアント
一時期燃えるように注目が集まり、さっと引いてしまったように見えるMastodon。一時的なブームはさておき、ゆっくりと着実な成長をしていけば何の問題もないでしょう。個人的にもまだ使っています。そんなMastodonクライアントとしてKnzkAppを紹介します。Monacaを使ったハイブリッドアプリになります。## Kn...
Maji - ハイブリッドアプリ開発のベストプラクティスを提供
ハイブリッドアプリと言うのはHTML5でUI、ロジックを作成したスマートフォンアプリです。ネイティブとの繋ぎ込みはCordovaなどの技術を使います。かつては遅いと言った問題がありましたが、今はほぼ分からないくらいの速度で実行できます。そんなハイブリッドアプリは画面遷移やUIなどを自分で用意する必要があります。ここが敷...
scrumblr - 自然な移動が可能なカンバン
スクラム開発ではカンバンがよく使われます。イテレーションごとに作業項目をリストアップし、そのステータスを可視化します。そして作業しきれなかったものはバックログに登録され、次のイテレーションに回されます。多くはTrelloのような整然と並んだカンバンですが、今回紹介するscrumblrはよりリアルなものになっています。#...
layerJS - レイヤーを使ったUIコンポーネントフレームワーク
Webアプリケーション化が進んでいく中で、画面遷移にも気を配る必要があります。従来のように全体を読み込み直すのではなく、アプリのように滑らかな画面遷移が求められます。もちろん、そういった動きの中でも履歴管理はきちんとしていなければなりません。今回紹介するlayerJSは表示部をレイヤーとして構成することで画面遷移やパラ...
MediumEditor - Medium風に文字装飾を行う
Markdownを開発者が使うのは問題ないでしょう。今やほぼすべての開発者に対して普及した記法と言えます。しかし、開発者以外の方が使いこなすには、まだ若干問題がある状態です。そこで使ってみたいのがMediumEditorです。Mediumのエディタを模したツールバーです。## MediumEditorの使い方ツールバー...
pico.js - わずか200行の顔認識プログラム
画像の中から抽出される情報として、最も多いのは人の顔ではないでしょうか。セルフィはもちろん、集合写真であったり、友達や家族と撮影した写真には必ず顔が存在します。顔を見つけることで、様々な情報と結びつけられるでしょう。今回紹介するpico.jsは、Webカメラから取り込んで人の顔を認識するコードをわずか200行で実現して...
Text2MindMap - テキストで記述するマインドマップ
マインドマップは思考整理ツールとしてよく使われますが、ビジュアルにこだわりはじめると考えを整理するよりも並びであったり、ノードの見た目にこだわったりしてしまいます。これは思考の邪魔になるでしょう。そこで使ってみたいのがText2MindMapです。テキストで記述してビジュアルで確認できるマインドマップソフトウェアです。...
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...