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

技術 - HTML5の記事一覧

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

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

もっと見る

List

  • 2016/11/02

exerslide - React製のHTMLプレゼンテーション作成ツール

HTMLのスライドをよく見かけるようになってきました。派手なアニメーションはなくとも、作成のしやすさであったりデザインのカスタマイズが容易なのが利点です。オンラインでの公開も簡単です。今回はFacebookインキュベーターで生まれたHTMLスライド作成ツールexerslideを紹介します。## exerslideの使い...

List

  • 2016/10/28

Orb - Web上でピボットテーブルを実現

Web上でテーブル/グリッド表示をすると多くの機能が求められるようになります。ソートであったり、一括更新などの機能が有名ですが、業務担当者ではなくマーケティング担当者などが求めるものとしてピボットテーブルがあります。作るのはとても大変ですが、Orbを使えば容易に実現できそうです。## Orbの使い方メイン画面です。!

List

  • 2016/10/23

Textillate.js - CSS3を使って華麗なテキストアニメーションを実現

CSS3になって表現力が広がっています。これまでFlashやJavaScriptを駆使しないとできなかったことが、スタイルシートだけで実現できるようになっています。スタイルシートを使えばGPUを使うのでより滑らかに表現できます。今回はTextillate.js、CSS3を使ってテキストアニメーションソフトウェアを紹介し...

List

  • 2016/10/21

sereny - マテリアルデザインを使ったタイマー

タイマーは意外と多くの場面で役立ちます。それだけにアプリとしても多数存在するのですが、本当に使いやすいものは限られます。ダウンロードして使ってみて何か違うと感じることも少なくありません。今回はマテリアルデザインにインスパイアされたエレガントなカウントダウンタイマー、serenyを紹介します。## serenyの使い方タ...

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アプ...