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

技術 - HTML5の記事一覧

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

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

もっと見る

List

  • 2017/12/31

LeaderLine - 情報に関連性を持たせる線を描画

情報はただ並べただけではその関連性が分かりづらいものです。線を使って表現すると情報同士の関連性が分かるようになり、理解度が増します。多くの場合、そうした内容はプレゼンテーション用のソフトウェアで作ったり画像編集ソフトウェアを使います。しかしそれではメンテナンスが面倒になります。そこで使ってみたいのがLeaderLine...

List

  • 2017/12/25

じゃぱりうぉっち - 某アニメのキャラクターを使った懐かしいUIのゲーム

最近のゲーム専用デバイスではリッチなゲームばかりになり、スマートフォンでは予算ばかりかかる割に結局ポチゲーといったものが増えています。そんな中、インディーゲームはアイディアがこらされた面白いものが出ています。今回はノスタルジックで面白い、某アニメのキャラクターが題材になったゲーム、じゃぱりうぉっちを紹介します。## じ...

List

  • 2017/12/25

WebDNN - Web上で試せる機械学習環境

機械学習は今、人気のある技術です。様々な使い方が考えられていますが、問題なのはトレーニングでしょう。GPUが積まれていないと速度面で問題があったり、大量のデータをあらかじめ学習しないと期待した結果が返ってきません。とは言え、まずは機械学習を試してみたいという方はWebDNNを使ってみましょう。Webブラウザ上で手軽に試...

List

  • 2017/12/23

Rocket wasm - WebAssemblyで作られたシューティングゲーム

WebAssemblyが実用的になってきています。今のところWebAssemblyが書ける言語としてはC/C++またはRustといった感じですが、Rustが個人的には分かりやすくて好きです。そんなRustで作られたゲームがRocket wasmになります。WebAssemblyなのでストレスなく遊べます。## Rock...

List

  • 2017/12/19

Dashboards - 自由度の高いダッシュボードライブラリ

Webサービスや業務システムを通じて集められたデータを表示するのに必要なのがダッシュボードです。ダッシュボードは常に固定表示よりも、各自の使い方に合わせて情報の並び替えが求められます。そんなUIを作成できるのがDashboardsです。ユーザが自由に画面要素を変更できます。## Dashboardsの使い方最初の表示で...

List

  • 2017/12/16

PaintCoin - オリジナルのゴールドコインを作る

海外製のコインを集める人や、記念コインをコレクションしている人たちがいます。コインには通常の貨幣としての価値以外にも、怪しい魅力があるのでしょう。貨幣を表すアイコンや、リッチな雰囲気を出す場合などでもコインはよく使われます。今回はそんなコインをオリジナルで作れるPaintCoinを紹介します。## PaintCoinの...

List

  • 2017/12/16

SwipeVideo - スワイプで視点を変えられる動画プレイヤー

最近のコンテンツはユーザの自由度を上げる方に進んでいます。ユーザが見たい場所、注目したい箇所は人によって違います。それをテクノロジーで可能にします。VRや360度動画などはまさにそうした側面が反映されています。その一つとしてSwipeVideoを紹介します。見たい角度を自由に変更できるHTML5の動画プレイヤーです。#...

List

  • 2017/11/28

js2flowchart.js - JavaScriptのコードをフローチャート化

複雑なコードはバグを含みやすくなります。インデントは浅い方が良いですし、関数は短く機能は単機能になっている方が良いでしょう。そうした複雑性の基準はどうやって設けたら良いでしょうか。一つのアイディアとして使えそうなのがjs2flowchart.jsです。JavaScriptのコードをビジュアル化し、フローチャート化してく...

List

  • 2017/11/27

billboard.js - インタラクティブ、プログラマブルなグラフライブラリ

HTML5の表現力を活かすにはJavaScriptの活用が欠かせません。SVGやCanvasを使って図を描画することはできますが、JavaScriptを組み合わせることでよりインタラクティブにしたり、マウスイベントを使ったりできます。今回紹介するのはbillboard.js、JavaScript製の再利用が容易なグラフ...

List

  • 2017/11/25

tlx-editor - フォーム入力に特化したWeb components

Web componentsは多くの可能性を持っています。Web標準ではまだまだ貧弱なUIも、Web componentsを使うことでリッチであったり、複雑なUIコンポーネントが生まれていくことでしょう。今回紹介するtlx-editorはその一例です。入力系コンポーネントを一手に提供するライブラリになります。## tl...

List

  • 2017/11/24

permission.site - HTML5 APIの実装を確認する

HTML5によって多数のAPIが追加されています。それらはすべてのブラウザで使える訳ではなく、まだまだ実装に差異があります。それをチェックできるCan I use

List

  • 2017/11/23

tikzcd-editor - Web上で可換図式を描く

Webの表現力はCanvasやSVGによって大きく広がっています。しかし、それらを使いこなすにはプログラミングを駆使する必要があります。例えば、ちょっとした数式を埋め込むダメにプログラミングを行うのは面倒です。そこで使ってみたいのが外部ライブラリです。今回は可換図式をWebベースで実現するtikzcd-editorを紹...

Missing

  • 2017/11/19

wast-game - 弾幕ゲーム好きはトライ!

シューティングゲームの中でも弾幕系はそれだけで別ジャンルと言えるほど激しいゲームです。ピクセル単位での細かい操作が求められ、ほんの少しのミスが命取りになります。そんな弾幕系シューティングゲームをWeb上で実現してくれるのがwast-gameになります。## wast-gameの使い方実際に遊んでいるところです。!

List

  • 2017/11/18

Frappe Charts - GitHub風グラフもあるSVGグラフライブラリ

WebはSVG/CanvasによってWeb標準だけで高度な表現が実現できるようになりました。しかし、それを使いこなすのは大変で、多くの場合ライブラリを使って実現しているでしょう。今回紹介するFrappe ChartsはSVGを使ってグラフ表示を行うライブラリです。## Frappe Chartsの使い方棒グラフ。マウス...

List

  • 2017/11/17

Snake Wasm - Rustで作られたスネークゲーム

ゲームというのは作っている方も楽しく、遊ぶのも楽しいと学習素材として最適です。特にあまりこだわったキャラクターゲームではなく、ルールがシンプルですぐに遊べるものが良いでしょう。今回は誰もが知っているであろうスネークゲームをHTML5化した、Snake Wasmを紹介します。## Snake Wasmの使い方ゲーム中の画...

List

  • 2017/11/14

GDevelop - コーディングレスでゲームを作るプラットフォーム

ゲームを作ってみたいという考えつつも、プログラミングが敷居になってしまっている人は多いでしょう。Webシステムを作ったりするプログラミングとはまた異なる知識が必要です。Unityでさえ、本格的に作ろうと思うとプログラミングの知識が必要になります。今回紹介するGDevelopはプログラミングをせずにHTML5でゲームが作...

List

  • 2017/11/10

EVADE AND DESTROY - HTML5製。デスクトップとスマートフォン両方対応のシューティングゲーム

HTML5の表現力、JavaScriptの性能向上があり、Webブラウザでも十分なゲームが作れるようになっています。Webベースであれば、デスクトップはもちろん、スマートフォンでも遊べます。今回はシューティングゲームのEVADE AND DESTROYを紹介します。シンプルな操作で楽しめるはずです。## EVADE A...

List

  • 2017/11/10

musicvideo-generator - ミュージックビデオを自動生成

音楽は耳で楽しむものですが、ミュージックビデオのように目でも楽しめます。ビジュアライザーのように格好良く可視化されていたり、アルバムアートなどが表示されることでさらに魅力的になります。そんなミュージックビデオを自動生成してくれるのがmusicvideo-generatorです。## musicvideo-generat...

List

  • 2017/11/08

FollowCursor - マウスカーソルに合わせてDOMを変形

WebはJavaScriptを活用することでインタラクティブな効果が実現できます。ユーザにとってみれば、自分の起こしたアクションに対して反応があるのは嬉しいことです。ユーザ体験という意味でも見逃せません。今回はユーザのマウス操作を追従してくれるFollowCursorを紹介します。DOMの形をマウスに合わせて変更できま...

List

  • 2017/11/07

Temporalis - Webカメラの映像をスライスして描画

Webカメラの映像はHTMLからgetUserMediaで取り込むことができます。そのままvideoタグに当てはめたり、一部だけ切り出してCanvasや画像のソースに当てることも可能です。しかし見たまま使っても面白くありません。そこで一例としてTemporalisを紹介します。Webカメラの映像に面白い効果を施してくれ...