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

技術 - HTML5の記事一覧

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

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

もっと見る

List

  • 2018/02/08

Clang In Browser - Web上でC言語を記述して WebAssemblyに

Webブラウザでコンパイルされたプログラムを実行できる WebAssembly。個人的に非常に注目している技術で、これまで難しかった、認証キーを公開せずにWebアプリケーションでも使えるようになっていくのでさらにWebアプリケーションの利用幅が広がっていくと思われます。そんな WebAssembly はC/C++/C#...

List

  • 2018/02/03

jspaint - 懐かしのペイントをWebアプリケーション化

昔のソフトウェアであっても、別な言語や別な環境で実行できると新しい魅力に出会うことがあります。最近であれば、ローカルOSで動いていたソフトウェアをWebアプリケーション化するだけでも面白いです。今回はWindowsではお馴染みのペイントをWebアプリケーション化したjspaintを紹介します。## jspaintの使い...

List

  • 2018/01/25

canvas-area - Canvasの表示内容をマウスで操作

CanvasはHTML5においてWebの表現力を飛躍的に高めてくれるAPIですが、その使い方に慣れるまでが意外と面倒なものに感じます。通常のDOMのようにスタイル設定ですぐに表示を変化できるのではなく、描画した内容をリフレッシュしながら使わなければなりません。そんなCanvasに柔軟性を持たせてくれそうなライブラリがc...

List

  • 2018/01/21

Dwitter - 140文字以下で作るデジタルアート

昔はハードウェアリソースが足らず、何とか小さなサイズに納めようとコードを短縮するようなことがありました。今はリソースが潤沢であり、そんな心配は不要になっているのですが、それでもコードの短さにこだわる人たちがいます。今回紹介するDwitterはTwitterに書き込める、140文字の長さでグラフィカルなプログラミングを行...

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