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

技術 - HTML5の記事一覧

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

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

もっと見る

List

  • 2017/10/11

Draggable JS - HTML5のドラッグ&ドロップを多機能に

HTML5の新しい機能の一つにドラッグ&ドロップAPIがあります。Gmailなどでは当たり前になっていますし、WYSIWYGな機能を提供する上では必須の存在です。Webアプリケーションでは大事な機能でしょう。そんなドラッグ&ドロップAPIを多機能にしてくれるライブラリがDraggable JSです。## Draggab...

List

  • 2017/10/08

dokieli - Web上のコンテンツエディタ/コメントシステム

Web上にコンテンツを公開し、それに対して指摘が欲しいと思った時にはチャットなどを使うでしょう。できればWeb上でそのままコンテンツに書き込みができると便利です。それを可能にするのがdokieliです。コンテンツの編集やコメントに加えて様々な機能が備わっています。## dokieliの使い方デモです。右側にあるメニュー...

List

  • 2017/09/26

Phosphor Float Area - 自由度の高いレイアウト変更ライブラリ

業務システムなどでは情報をいかに分かりやすい整理できるかが作業効率化の肝になります。しかし担当する業務であったり、作業によって必要な幅は違ったりします。そうした時にユーザ毎に好きな配置に変更できる仕組みは便利です。使えるライブラリはPhosphor Float Areaです。## Phosphor Float Area...

List

  • 2017/09/16

CrossStorage - クロスドメインで使えるlocalStorage

HTML5で追加されたAPIの一つにlocalStorageがあります。特定のサイト内で使える簡易的なストレージですが、一つのサイトでしか使えないのが難点です。時に別なサイトでも使いたいと思うことがあるでしょう(特にサブドメイン)。そこで使ってみたいのがCrossStorageです。クロスドメインで使えるストレージです...

List

  • 2017/09/02

Chartkick.js - 多数のグラフに対応したラッパーライブラリ

Webシステムで一番苦労させられるのがグラフではないでしょうか。HTMLの表現力が上がったと言っても、コードを書かなければなりません。特にグラフやチャートになるとコード量も増えがちです。そこで使ってみたいのがChartkick.jsです。多くのパターンに対応したクライアントサイドのグラフライブラリです。## Chart...

List

  • 2017/08/28

Web Audio Synth V2 - Web上でシンセサイザーを操作

HTML5によって新しく追加された技術にWeb Audioがあります。その名の通り、Web上で音楽を奏でるためのAPIですが、利用が難しいものとなっています。だからこそ使いこなすと凄いソフトウェアができます。今回紹介するWeb Audio Synth V2はまさにWeb Audioを使い、シンセサイザーを作り上げてしま...

List

  • 2017/08/18

Ring UI - JetBrains製のUIコンポーネント集

Webアプリケーションを作る際に大事なのがUIです。Bootstrapのようなテーマもありますが、まだまだ足りない部品があることも多いでしょう。そうしたときに工夫すれば実装できるのか、または最初から用意されているのかで大きな違いがあります。今回紹介するRing UIはJetBrains社製のUIフレームワークになります...

List

  • 2017/08/17

Uppy - クラウドストレージも使える高機能なファイルアップローダー

HTML5は素のままではあまりUXは向上していません。APIを使って開発者自身で拡張しなければなりません。しかしその開発もそう簡単ではありません。そこですでに他の方が開発したものを積極的に使っていくのが良いでしょう。今回は多機能なファイルアップロード機能が手に入れられるUppyを紹介します。## Uppyの使い方利用し...

List

  • 2017/08/16

wordcloud2.js - JavaScriptでタグクラウドを生成

たくさんの文字が良い感じに詰め込んだ状態で並んだ状態がタグクラウドやワードルと呼ばれます。それを手作業で作成するという選択はまず考えられないでしょう。また、画像で作ってしまうと後からの更新が面倒です。そこで使ってみたいのがwordcloud2.jsです。与えられた文字列を良い感じに配置してくれます。## wordclo...

List

  • 2017/08/13

Space Invaders - プログラミング学習に使えるHTML5ゲーム

プログラミングを学習する上で良い題材があるとスムーズです。特に自分が作りたいものに合っていると、そのカスタマイズができたり、より学習意欲が高まるはずです。今回はWebブラウザ上でゲームを作る際の学習教材になるSpace Invadersを紹介します。## Space Invadersの使い方スペースキーを押すと開始しま...

List

  • 2017/08/09

Google Pacman - 今でも遊べるGoogle製パックマン

かつてGoogleが作成し、世界中の生産性を低下させたのがWebベースのパックマンです。パックマンの○周年を記念して作られたものですが、みんながこぞってチャレンジし続けました。そんなパックマンを今でも遊びたい方がいるならばGoogle Pacmanにトライしてみましょう。## Google Pacmanの使い方メイン画...

List

  • 2017/08/08

Skypad - Skygearを使ったリアルタイムコラボレーションエディタ

Webアプリケーションに魅力を加えてくれるのがリアルタイムコラボレーションです。遠く離れた人と一つのデータを同期して作成、編集して一気に作品を創り出していけます。しかし技術的に難関な部分も多いです。それを簡単に解決してくれるのがSkygear

List

  • 2017/08/07

AniJS - 効果的なアニメーションとUIコンポーネント集

最近はWebデザインと言っても静的なものだけでなく、クリックやマウスオーバー時などのイベントに基づくアニメーションなども必要になっています。それによって一歩先行くデザインに仕上がります。しかしアニメーションはちょっとした違和感などで台無しになってしまう可能性も秘めています。今回はそんな失敗を防ぐべく、AniJSを紹介し...

List

  • 2017/08/06

VideoEditorJS - Webベースの動画編集

Webブラウザ上でできることがどんどん増えています。さらにローカルアプリケーションではあるものの、ElectronのようにWeb技術で動くソフトウェアがあったり、Cordovaのようにスマートフォンアプリも作れます。今回紹介するVideoEditorJSはWebブラウザ上でビデオの編集ができてしまうソフトウェアです。#...

List

  • 2017/08/06

iPhone Inline Video - iPhone上で動画を埋め込み再生

iPhoneで動画を再生すると自動的にフルスクリーンになってしまいます。アプリでは最初はインライン再生できるものも出てきています。これらは独自に実装しているケースです。Web上でも同じようにインライン再生できるようにするライブラリがiPhone Inline Videoです。## iPhone Inline Video...

List

  • 2017/08/02

Chameleon.js - 画像からカラーパターンをピックアップ

Webサイトのデザインを考える上で色彩は重要なパーツです。それだけに慎重に選ばざるを得ません。同系色でまとめれば良いという訳でもなく、一見すると合わないような色合いでも意外とマッチするケースもあります。そんなカラーパターンを既存の画像からピックアップしてくれるのがChameleon.jsです。## Chameleon....

List

  • 2017/08/01

PlantUML Editor - WebベースのUMLエディタ/ビューワー

個人的にはUMLは嫌いではありません。問題はビジュアルエディタと、UMLを非開発者層にまで理解させようとしたことにあります。開発者が開発者のためだけに用いるならばシステムの可視化は大きな意味があります。そんなUMLをテキストで作成し、さらに表示の確認までできるのがPlantUML Editorです。## PlantUM...

List

  • 2017/07/25

Propeller - レスポンシブ/マテリアルデザイン対応の管理画面テンプレート

最近のWebデザインのトレンドはどんどんアプリ風に、複雑になっています。レスポンシブWebデザインによって、画面幅を意識したデザインになり、さらにマテリアルデザインによってユーザのアクションを意識するようになっています。これをすべて実装したサイトのデザインはとても難しいでしょう。そこで使ってみたいのがPropeller...

List

  • 2017/07/09

ecola - タッチスクリーン用のツリーエディタ

この操作は新しい!デスクトップとタブレット、スマートフォンではユーザ体験が全く異なります。同じ操作を行うにしても、デスクトップらしい操作、タブレットらしい操作があります。特に大きな違いとしてタッチディスプレイが当たり前な操作かどうかがあります。今回紹介するecolaは特にタッチスクリーンを対象としたツリーエディタになり...

List

  • 2017/06/16

Hardbin - P2Pを使ったスニペットサービス

オンラインで情報を発信したいと思ったら、サーバを借りたり、クラウドに立てる必要があります。またはどこかのネットサービスを使う手もありますが、そのデータはネットサービスが終了する際に消失してしまったりします。そうした面倒さやリスクを避けて使えるテキストスニペットサービスがHardbinです。## Hardbinの使い方メ...