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

技術 - HTML5の記事一覧

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

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

もっと見る

List

  • 2016/10/18

Draggable Google Modal - ドラッグして動かせるモーダルウィンドウ

Webでよく使われるモーダルウィンドウは閉じたり入力しないと次のアクションに進めないのでユーザに処理を強制するのに便利です。しかしモーダルは動かすこともできないのでモーダルの裏に参考したい情報があった時にとてもストレスを感じます。そこでGoogleではドラッグできるモーダルウィンドウを提供しています。同じような実装を実...

List

  • 2016/10/17

Wormhole - タブ間通信に使えるイベント通知ライブラリ

今はタブブラウザが基本となっています。そのため、リンクをまとめて開くのも簡単で、気がついたら同じサイトのタブがたくさん開いていたなんてことがあります。そして、一つ一つのタブは独立して動くのが当たり前になっています。そこで使ってみたいのがWormholeです。Wormholeを使うと同じサイトのタブ間で通信できるようにな...

List

  • 2016/10/16

Proton - 高度な表現も実現できるHTML5のパーティクルライブラリ

Webの表現力はHTML5によって高まっていますが、そう簡単に高度な表現ができるわけではありません。目を引くようなアニメーション、グラフィックスを実現させようと思ったら相当量のコードを書かなければならないでしょう。今回はそんな作業を軽減してくれるパーティクルライブラリProtonを紹介します。## Protonの使い方...

List

  • 2016/10/08

WebGLDetector.js - ブラウザのWebGLバージョンを判定

iOSでもWebGLが使えるようになり、デスクトップとスマートフォンでWebGLを使った、より高度な表現が実現できるようになりました。しかしWebGLにもバージョンがあり、バージョンによって実現できる機能差があります。WebGLのバージョンを逐一調べながら表現法を変えるのは面倒ですが、WebGLDetector.jsを...

List

  • 2016/10/08

g9 - インタラクティブなWebグラフィックスを実現

HTML5によってWeb上での表現力が高くなり、これまでFlashなどを使わないとできなかったようなアニメーション表現がWeb標準だけで実現できるようになっています。とは言え、ただアニメーションするだけでは面白くありません。面白いのはよりインタラクティブな、マウスやキーボードを使って自分で操作できるものでしょう。今回は...

List

  • 2016/10/04

debugger.html - Web技術で作られたデバッガー

MozillaはPDFビューワーをpdf.js

List

  • 2016/09/29

argon.js - Web技術を使ったARフレームワーク

Holo Lensであったり、Magick LeapなどARグラスと呼ばれるデバイスが登場してきています。そうしたデバイスを使えば、リアルの上にデジタルな情報を載せるのが容易に実現できます。今回紹介するオープンソースソフトウェアはargon.js、Web技術でARを実現するソフトウェアです。## argon.jsの使い...

List

  • 2016/09/17

City Generator - Web上に動かせる3D地図を表示

JAXAが公開している細かいメッシュでの地球上の高度データを使ってどんなことができるのか。主な目的は災害対策であったり、都市計画を立てる際の基礎データになるのですが、そういった目的で使う人は限られた業界の人たちになるでしょう。もっと面白い使い方が考えられれば、地図データの活用幅も広がります。今回はその一つ、City G...

List

  • 2016/09/17

Quasar Framework - SPA/ハイブリッドアプリを想定したHTML5デザインフレームワーク

Cordovaに代表されるHTML5/JavaScriptを使ったスマートフォンアプリ、いわゆるハイブリッドアプリは海外では普及しています。HTML5やJavaScriptの実行速度が速くなったので、多くの目的において十分なパフォーマンスを出すようになっています。そんなハイブリッドアプリから通常のWebサイトまで幅広く...

List

  • 2016/09/16

Web Quick Editor - Google Driveに保存するサーバレスなメモ帳

メモをしようと思った時にエディタを開いたり、ファイルを新規作成してメモして保存…などというのはとても面倒です。簡単に呼び出して内容を記述して閉じて終わり、というくらいの素早さが必要です。そこで使ってみたいのがWeb Quick Editorです。Google Driveチームが作ったサンプルテキストエディタです。## ...

List

  • 2016/09/11

NEditorJS - ビジュアルプログラミング環境の基盤にどうぞ

ビジュアルプログラミングの多くはノードがあり、それらをマウスでくっつけて処理を繋げていきます。各ノードには機能があり、必要に応じて処理判定を行うノード、繰り返し処理を行うノードを選択します。そういったビジュアル化された環境を提供するのがNEditorJSです。工夫次第で様々な使い方が考えられるでしょう。## NEdit...

List

  • 2016/09/10

JpegCamera - Webカメラの映像を画像化

最近のノートPCではWebカメラが搭載されるのも当たり前になっています。そしてHTML5ではWebカメラから映像の取り込みが可能です(Safariはできませんが)。しかしなかなか活用事例は多くありません。そこにはWebカメラから取り込んだ映像を画像ファイル化したりするのが面倒という問題があります。そこで使ってみたいのが...

List

  • 2016/09/09

Whitewater Mobile Video - iPhoneでも動画をインラインで再生

iPhoneを使ってサイト内で動画を再生しようとすると背景が真っ黒になって動画だけの再生モードになります。動画だけを見せたい場合はこれでもいいですが、一緒にテキストを見せたい時などには不便な表示です。そこで使ってみたいのがWhitewater Mobile Videoです。音声は出ませんが、動画のインラインでの再生を可...

List

  • 2016/09/08

Aquarelle - 色のついた水が広がっていくような表現

Webの表現力はHTML5によって格段にあがっています。それまではFlashなどを使わないといけなかったような表現がCSS3とJavaScript、Canvasなどによってできるようになっています。今回はそんなWebの新しい表現力を実感できるソフトウェア、Aquarelleを紹介します。## Aquarelleの使い方...

List

  • 2016/09/07

Hakoniwa - 標高メッシュデータを使った3D表示

JAXAでは30mメートル単位でメッシュを作った標高データを公開しています

List

  • 2016/09/04

flappy-bird - HTML5製のFlappy Birdクローン

有名なサービスはすぐに真似されます。パクリというと悪い印象がありますが、技術者にしてみると真似することでその中で使われている技術、デザインを実践的に学べるという利点があります。今回紹介するflappy-birdはその名の通り、Flappy Birdを真似したソフトウェアです。特徴としてはReactを使ってHTML5アプ...

List

  • 2016/09/02

Monaco Editor - VS Codeでも使われているWebベースのプログラミングエディタ

Web上でコードを書けるサービスが増えています。そのままファイルとして保存したり、クラウド上で実行できるようになっています。そうした時にデフォルトのテキストエリアを使っていては全く書く気がなくなってしまうでしょう。そこで使ってみたいのがMonaco Editorです。Microsoft製のプログラミングエディタVS C...

List

  • 2016/08/31

Froala WYSIWYG HTML Editor - 綺麗なデザインのWYSIWYGエディタ

昔のWYSIWYGエディタと言うとツールバーに多くの機能が並んでおり、生成されるHTMLは相当分かりづらいものでした。機能が豊富すぎたために表示速度が重たかったり、一般ユーザにとっても混乱しかねないものだったと思います。現在ではずいぶん進化しており、すっきりとしたデザインで使いやすいものが増えています。今回はFroal...

List

  • 2016/08/30

SimcirJS - Webベースの電子回路シミュレータ

最近IoTに注目が集まっています。自分でもセンサーやマイコンを買って試してみたという方もいるのではないでしょうか。しかしコンピュータ上のプログラミングとは異なり、簡単には動かないケースも多々あります。それを解決するために一度はシミュレータで試してみてはいかがでしょう。SimcirJSを使えばWeb上で回路図を作成できま...

List

  • 2016/08/09

WebGazer.js - WebカメラとJavaScriptによるアイトラッキングシステム

ユーザテストでユーザの視線がどこに移動しているのかチェックするのは必要です。ただし、アイトラッキングシステムを使うのはとても複雑ですし、コストもかかります。手軽にするため、マウスのトラッキングで済ましてしまっているケースもあります。そこで使ってみたいのがWebGazer.jsです。JavaScriptとWebカムを組み...