ITエンジニア/デザイナ向けにオープンソースを毎日紹介

技術 - HTML5の記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2018/06/29

Annict Mimi - PWAなAnnictコメントビューワー

PWA(Progressive Web App)というキーワードが流行です。特定の技術を指すわけではなく、スマートフォンとWebのあり方のベストプラクティスという位置づけです。そのため若干分かりづらく、理解するためには自分で実際に手を動かすのが良いようです。今回はそんなPWAをAnnicと連携させたAnnict Mim...

List

  • 2018/06/27

woscope - WebGLベースのオシロスコープ

電気などの波形を見るのに使われるのがオシロスコープです。工学系の方であれば誰もが一度は使ったことがあるのではないでしょうか。ツマミを回して写し出される波形の変化を楽しんだことがあるはずです。そんなオシロスコープをWebGLで再現したのがwoscopeです。## woscopeの使い方もちろん電気は流せないので、音楽を使...

List

  • 2018/06/23

rawson.js - JavaScriptでRAWデータを読み込み

デジカメで撮影した写真は基本、JPEGで保存されます。しかし、よりカメラや写真にこだわりがある人は、JPEGの不可逆な変換を嫌い、撮影したデータをそのまま残したいと考えるものです。そのためにRAWデータが存在します。通常、RAWデータをレタッチソフトウェアなどでJPEGに変換しますが、rawson.jsを使えばRAWデ...

List

  • 2018/06/22

Snake - HTML5製のスネークゲーム

HTML5でゲームを提供する環境が増えています。Webブラウザ上で楽しめるゲームであればインストールする必要がないのですぐに遊べます。ダウンロードも軽量な、簡単なゲームが好まれる傾向があります。今回はそんなお手軽ゲームの一つ、Snakeを紹介します。いわゆるスネークゲームです。## Snakeの使い方スマホ向けになって...

List

  • 2018/06/21

DevTools Timeline Viewer - 開発者ツールのパフォーマンス結果を共有/閲覧

Webページを表示するまでには様々な処理が行われています。DOM構築、HTMLのレンダリング、JavaScriptなど様々な処理が行われた結果、一つの画面を表示します。さらにWebアプリケーションであれば、その画面のまま要素が変化します。そうした中でパフォーマンスを測定する機能がGoogle Chromeにありますが、...

List

  • 2018/06/16

jeelizFaceFilter - Webカメラで使える顔認識&トラッキング

Webカメラやスマートフォンのカメラはリアルとデジタルの入り口です。そのため、写し出された映像を加工したり、そこにある情報を解析する類のソフトウェアはとても人気があります。スマートフォンアプリにある、動画チャットしながらリアルタイムに情報を付与する、それと同じことがWeb上でできるのがjeelizFaceFilterで...

List

  • 2018/06/15

PIB - PHPをWebAssembly化してWebブラウザ上で実行

WebAssemblyはCやC++、Rustなどの言語で開発できます(他にもLLVMを生成する言語であれば何でも良いのですが)。つまり元々Cで開発されたソフトウェアはWebAssembly化できる可能性(あくまでも可能性)がある訳です。そんな無謀とも言える可能性を感じさせるのがPIBです。なんとPHPをWebブラウザ上...

List

  • 2018/06/12

Wired Elements - ラフなデザインになるカスタムタグ

ワイヤーフレームなど、ラフに作りたいという時は手書きなどが向いています。それをドローのソフトウェアなどできっちりと書き始めてしまうと、些細な部分にこだわってしまって目的であるプロトタイプがなかなか作れなかったりします。そこで使ってみたいのがWired Elementsです。Web上でラフなデザインを再現できるWebコン...

List

  • 2018/06/08

KnzkApp - ハイブリッドアプリのMastodonクライアント

一時期燃えるように注目が集まり、さっと引いてしまったように見えるMastodon。一時的なブームはさておき、ゆっくりと着実な成長をしていけば何の問題もないでしょう。個人的にもまだ使っています。そんなMastodonクライアントとしてKnzkAppを紹介します。Monacaを使ったハイブリッドアプリになります。## Kn...

List

  • 2018/06/06

Maji - ハイブリッドアプリ開発のベストプラクティスを提供

ハイブリッドアプリと言うのはHTML5でUI、ロジックを作成したスマートフォンアプリです。ネイティブとの繋ぎ込みはCordovaなどの技術を使います。かつては遅いと言った問題がありましたが、今はほぼ分からないくらいの速度で実行できます。そんなハイブリッドアプリは画面遷移やUIなどを自分で用意する必要があります。ここが敷...

List

  • 2018/05/20

scrumblr - 自然な移動が可能なカンバン

スクラム開発ではカンバンがよく使われます。イテレーションごとに作業項目をリストアップし、そのステータスを可視化します。そして作業しきれなかったものはバックログに登録され、次のイテレーションに回されます。多くはTrelloのような整然と並んだカンバンですが、今回紹介するscrumblrはよりリアルなものになっています。#...

List

  • 2018/05/17

layerJS - レイヤーを使ったUIコンポーネントフレームワーク

Webアプリケーション化が進んでいく中で、画面遷移にも気を配る必要があります。従来のように全体を読み込み直すのではなく、アプリのように滑らかな画面遷移が求められます。もちろん、そういった動きの中でも履歴管理はきちんとしていなければなりません。今回紹介するlayerJSは表示部をレイヤーとして構成することで画面遷移やパラ...

List

  • 2018/05/16

MediumEditor - Medium風に文字装飾を行う

Markdownを開発者が使うのは問題ないでしょう。今やほぼすべての開発者に対して普及した記法と言えます。しかし、開発者以外の方が使いこなすには、まだ若干問題がある状態です。そこで使ってみたいのがMediumEditorです。Mediumのエディタを模したツールバーです。## MediumEditorの使い方ツールバー...

List

  • 2018/05/15

pico.js - わずか200行の顔認識プログラム

画像の中から抽出される情報として、最も多いのは人の顔ではないでしょうか。セルフィはもちろん、集合写真であったり、友達や家族と撮影した写真には必ず顔が存在します。顔を見つけることで、様々な情報と結びつけられるでしょう。今回紹介するpico.jsは、Webカメラから取り込んで人の顔を認識するコードをわずか200行で実現して...

List

  • 2018/05/04

Text2MindMap - テキストで記述するマインドマップ

マインドマップは思考整理ツールとしてよく使われますが、ビジュアルにこだわりはじめると考えを整理するよりも並びであったり、ノードの見た目にこだわったりしてしまいます。これは思考の邪魔になるでしょう。そこで使ってみたいのがText2MindMapです。テキストで記述してビジュアルで確認できるマインドマップソフトウェアです。...

List

  • 2018/04/27

React Kanban - React製のTrello風カンバン

カンバンといえばトヨタの生産システムですが、Webで提供されるカンバンはすでに独自の進化を遂げつつあります。アジャイル的な使い方に限らず、情報を整理する方法としてカンバンを用いるケースがあります。そんなカンバンとして有名なのはTrelloですが、そのクローンをReactで作成したのがReact Kanbanです。## ...

List

  • 2018/04/26

Matrix Vision - Webカメラの映像をマトリックス風に

マトリックスと言えば黒バックに緑の文字が流れるシーンが有名です。あの文字は実は寿司のメニューだった、なんて話があります。コンソールっぽい雰囲気がデジタルの世界を感じさせるものになっています。そんなマトリックスの世界観をWebカメラを使ってリアルタイムに再現するのがMatrix Visionです。## Matrix Vi...

List

  • 2018/04/20

tracking.js - 画像/動画をトラッキング

写真はテキスト以上に情報が含まれています。人物を撮影しただけでも、そこには背景があったり、洋服があったり、天気なども映し出されます。しかし、そのためには写真から情報を収集する技術が必要です。tracking.jsはWebブラウザ上で人やオブジェクトを認識するJavaScriptライブラリになります。## trackin...

List

  • 2018/04/17

Vipercard - 懐かしのHypercardを現代に復活

表現したいと思った人が自由にデザインし、アプリケーションを作れる環境として有名だったのがHypercardです。白黒画面の時代から使われており、クリックした時や選択肢によって自由にフローを変えたりしてアプリケーションが作れました。自分で作ったり、人が作ったものをダウンロードして遊んだ人も多いはずです。そんなHyperc...

List

  • 2018/04/17

Sufee Admin - Bootstrap4対応の多機能ダッシュボードデザインテンプレート

Bootstrap4がそろそろ本格的に導入されるようになっています。後方互換性がないため、これまでのテンプレートが使えなくなってしまったのが残念です。しかし、これによって新しいチャンスが生まれたとも言えるでしょう。Sufee AdminはBootstrap4向けの管理ページテンプレートになります。今後のことを考えるなら...