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

技術 - HTML5の記事一覧

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

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

もっと見る

List

  • 2018/01/19

WebGL Scroll Spiral - WebGLとスクロールを組み合わせたデジタル作品

WebGLは普段使っているJavaScriptではなく、OpenGLに近いものになります。そのため、自分のやりたいことを実現するために覚えるべきことがたくさんあります。しかしゲームなどでも使える技術なので覚える価値があるでしょう。そんなWebGLとWebブラウザのスクロールを組み合わせた作品がWebGL Scroll ...

List

  • 2018/01/16

Via.js - Web WorkerでもDOMを利用可能に

JavaScriptはシングルスレッドなので、重たい処理を実行するとWebブラウザが固まってしまいます。それを防ぐため、Web Workerというバックグラウンドで処理を実行するAPIがあります。しかしWeb WorkerではDOM操作ができないという欠点があります。それを解決してくれるのがVia.jsです。## Vi...

List

  • 2018/01/05

Animation Worklet Explainer - Web上でスムーズなアニメーションを目指す

HTML5の高い表現力によって、アニメーションはなくてはならないものになっています。しかしJavaScriptの書き方であったり、CSS3の使い方によってはアニメーションというのは非常に重たい処理で、スムーズに表示されなかったりします。そんな現状を変えていこうと活動しているのがCSS Houdiniタスクフォースで、そ...

List

  • 2018/01/04

PaintBBS NEO - HTML5版お絵描きしぃ掲示板

イラスト掲示板は昔から人気があります。その多くは画像がアップロードできるものですが、中にはWeb上でイラストを描いて、そのまま貼り付けられるものもあります。昔はよくJavaアプレットで実装されていました。そんな古き良き(?)時代を彷彿とさせるWebペイントがPaintBBS NEOになります。## PaintBBS N...

List

  • 2018/01/01

Vue2 editor - Vueを使ったテキストエディタ

Web上で文章を書く機会が増えています。しかし多くの場合、テキストエリアそのままであったり、普段使っているエディタに比べて操作性が格段に落ちるものばかりです。これでは生産性が損なわれてしまうため、結局エディタで書いてコピー&ペーストせざるを得ません。より使いやすいWebベースのエディタを目指すならVue2 editor...

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の使い方ゲーム中の画...