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

技術 - HTML5の記事一覧

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

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

もっと見る

List

  • 2017/03/27

Resumable.js - HTML5 File APIを使ったリジューム付きファイルアップローダー

Webで面倒に感じるのがファイルのアップロードです。特に途中でネットワークが切れた時には大きなストレスになります。1回で数百MB、数GBの大きなファイルをアップロードするとなればリジューム機能が欲しくなるはずです。そこで使ってみたいのがResumable.jsです。HTML5のFile APIを使ってリジューム機能を実...

List

  • 2017/03/25

WebPack Playground - WebPackをWeb上で体験しよう

JavaScriptの利用範囲が広がるのに合わせてライブラリを使ったり、ソースコードが分かれているのを統合したりする必要が出てきました。その際に使われているのがBrowserifyであったり、WebPackです。今回はWebPackをWebブラウザ上で体感できるWebPack Playgroundを紹介します。## W...

List

  • 2017/03/24

LayaAir - 一つの言語からFlash/HTML5/モバイル向けにコード出力できるアニメーションエンジン

HTML5によって(またはiOSによって)Flashは絶滅に瀕しています。問題はFlashがなくなった後の世界でいかに効果的なアニメーションやインタラクティブな操作を実現できるかです。HTML5でできますが、非常に面倒でしょう。そこで使ってみたいのがLayaAirです。ゲームやアニメーションで使えるレンダリングを行って...

List

  • 2017/03/23

Shape Shifter - 異なるSVGに変化するアニメーションを生成

SVGとこれまでの画像バイナリと決定的に違う部分はなんと言ってもプログラムから操作しやすいということでしょう。アニメーションの定義などはSVG内でもできますが、より詳細なアニメーションはJavaScriptで制御できます。そんなSVGを使って形状変化するアニメーションを定義できるのがShape Shifterです。##...

List

  • 2017/03/22

ag-Grid - 業務要件の殆どを満たせそうなグリッドライブラリ

業務システムなどをWebベースで作っていると求められるのがリッチなグリッド機能です。ヘッダの固定、フィルタリング、チェック、カラムの順番変更、一回あたりのデータ表示件数変更…挙げれば実にきりがありません。そこで使ってみたいのがag-Gridです。ほぼこれでニーズを満たせるのではないかというくらいリッチなグリッド機能を提...

List

  • 2017/03/21

CanvasEffect.js - Canvasで画像にエフェクト

HTML5のCanvasを使うと画像を取り込んで表示し、エフェクトを行うことができます。しかしCanvasの扱いは意外と面倒で、コードも多くなりがちです。そのためメンテナンス性が低くなってしまいます。そこで使ってみたいのがCanvasEffect.jsです。画像を編集するための専用ライブラリとなっています。## Can...

List

  • 2017/03/21

Djvu HTML5 browser - WebベースのDjvuビューワー

Djvuというファイル形式があります。共通したDjvuビューワーをインストールしておけば、どのプラットフォームでも同じように文書を閲覧できるというものです。つまりPDFのような形式で、圧縮率に優れていると言われています。PDFに比べるとシェアは低いですが、Djvu HTML5 browserを使えばWebブラウザ上でD...

List

  • 2017/03/13

Flatris - React製。プログレッシブWebなテトリス

HTML5がどんどん高機能化、表現力が高くなっているのに合わせて、これまでローカルアプリケーションでしか実現できなかったようなことがWeb上でできるようになっています。ゲームもその一つです。今回紹介するFlatrisはプログレッシブなWebテトリスです。HTML5でさくさくと遊べます。## Flatrisの使い方ゲーム...

List

  • 2017/03/07

a-table.js - リッチな機能を持ったHTMLテーブルを出力

Web上でのテーブル表示はよく使われているだけに、そのUXが優れているかどうかでサービス全体の印象が変わってきます。Excel並とまでは言いませんが、ソートや絞り込み機能はあると便利です。そんなHTMLテーブルを手軽に優れたUIで提供してくれるのがa-table.jsになります。## a-table.jsの使い方デモで...

List

  • 2017/03/04

drag-drop - HTML5のドラッグ&ドロップAPIをごく簡単に扱う

HTML5で便利になった機能の一つにファイルのドラッグ&ドロップがあります。Webブラウザ上にファイルをドロップしてアップロードしたり、DOMをドラッグ&ドロップできたりします。しかしできるとは言ってもコードをそれなりに書かないと使えないのが難点です。そこで使ってみたいのがdrag-dropです。HTML5のドラッグ&...

List

  • 2017/03/03

Rythm.js - 音楽/音声に合わせてアニメーション

Webは基本的に静的なものです。アニメーションを使うこともできますが、何度も繰り返したり、マウスクリックのタイミングでアニメーションが実行される程度です。よりインタラクティブ性が欲しいと思ったことはないでしょうか。そこで紹介したいのがRythm.jsです。なんと音声に反応するアニメーションライブラリです。## Ryth...

List

  • 2017/03/02

どうぶつしょうぎ名人 - 絶対勝てないどうぶつしょうぎ

どうぶつしょうぎはご存じでしょうか。4種類のコマ(ライオン、ひよこ、ゾウ、キリン)で遊ぶ将棋なのですが、実は後手が必ず勝つという論文が発表されています

List

  • 2017/03/01

Piskel - Web上でアニメーションGIFを作れるドット絵エディタ

動画をアニメーションGIFとして保存するソフトウェアは幾つも存在します。アニメーションは手元に素材がないとなかなか作るのは難しいかも知れません。しかし、ごく小さなサイズであれば何とかなるかも知れません。それを可能にするのがPiskelです。いわゆるドット絵の感覚でアニメーションGIFが作成できます。## Piskelの...

List

  • 2017/02/25

Path Graph - レイトレーシングをビジュアル化

レイトレーシングは波の線(伝播経路)を追跡することで、ある点において観測される画像・音像などをシミュレートする計算手法になります(via レイトレーシング - Wikipedia

List

  • 2017/02/21

Citii - 各都市で生活するにはどれくらいお金がかかるのか、が分かるアプリケーション

海外で暮らしてみたいというのは島国の日本ならではの夢かも知れません。海外には海外の良さがありますが、もちろん悪いところもあります。まず現状と同等の生活を送れるのかをチェックしなければなりません。そこで使えるのがCitiiです。各国の生活コストがどれくらいなのか分かるソフトウェアです。## Citiiの使い方例えば東京で...

List

  • 2017/02/13

photo-screen-saver - Electronで作るWindows用スクリーンセーバー

今時スクリーンセーバーは不要という考えがあります。確かに液晶ディスプレイでは焼き付けはほぼ起こりません。しかしプラズマTVでは起こりえます(もちろん対処されているでしょうが)。また、なんとなくスクリーンセーバーは見ていて面白いものです。そんなスクリーンセーバーをHTML標準の技術で作れるのがphoto-screen-s...

List

  • 2017/02/11

mo · js - Web上でモーションアニメーションを実現

Webの表現力は上がったと言われていますが、そのためのテクニックは必要です。SVGやCanvasを使いこなすのは相当難しく、専用のライブラリを使う方が手軽にアニメーションなどが実現できます。今回紹介するmo · jsもその一つで、モーションアニメーションが実装できるライブラリです。## mo · jsの使い方実装例です...

List

  • 2017/02/06

formbase - 見栄えの良いフォームデザイン

Webの表現力はHTML5によって格段に上がりましたが、それもスタイルシートなどを駆使してデザインを行った場合に限ります。標準のままでは貧弱なデザインのままです。標準でももっと見栄えの良いデザインが欲しいのではないでしょうか。そこで使ってみたいのがformbaseです。ごくシンプルな指定で見栄えの良いフォームにデザイン...

List

  • 2017/02/05

Frappe Gantt - マウス操作が便利なガントチャート

個人的にはあまり好きではないのですが、プロジェクト管理において重宝されるのがガントチャートです。各タスクが時系列上に並ぶことで、タスクが重なる期間が分かりやすくなったり、タスクの関連度を可視化することでボトルネックを発見できます。そんなガントチャートを作成できるライブラリがFrappe Ganttです。## Frapp...

List

  • 2017/02/04

json.browse - 開発者ツールを使ったJSONブラウザ

JSONはRESTful APIをはじめとして、最近最も多く使われているフォーマットになっているのではないでしょうか。そのため、開発者はJSONデータを表示、確認するためのツールが必要になっています。今回紹介するjson.browseもその一つですが、特徴的なのはDevToolsも組み合わせて使う点です。## json...