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

技術 - HTML5の記事一覧

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

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

もっと見る

List

  • 2016/06/16

Yarrow - アニメーションする矢印をSVGで作成

SVGコンテンツの面白いところとして、Flashのようなアニメーションもサポートしていると言うことです。コンテンツを徐々に描いていくようにすれば良いだけなのですが、手作業で実現するのは無理があるでしょう。そこで使ってみたいのがYarrowです。HTMLのプレゼンなどと組み合わせると効果的かも知れません。## Yarro...

List

  • 2016/06/16

SVG panzoom - SVGのズームイン/アウト機能を提供

Web上でSVGが多く使われるようになってきました。SVGの利点の一つに挙げられるのが、ベクターなので拡大しても綺麗ということです。拡大や縮小するというのは、情報の粒度を自分で変更したいという時に便利です。そこで紹介したいのがSVG panzoomです。その名の通り、SVGのズームイン/アウトを実現するためのライブラリ...

List

  • 2016/06/15

handsontable - グリッド表示にExcel並の機能を

業務システムと言えばグリッド、テーブルが求められます。最初はHTMLで簡単に作成するのですが、すぐに追加の機能が求められます。ソート、フィルタリング、ヘッダーや左側の列を固定して欲しいと言った具合です。そんな厄介な要望をスクラッチで対応していたのではとても時間がかかってしまいます。ぜひhandsontableを試してみ...

List

  • 2016/06/13

atrament.js - スムーズな線の描けるドローソフトウェア

今なお個人的に好きなソフトウェアがSkitchです。Evernoteに買収されてしまいましたが、一番シンプルで使いやすかったバージョン1系を未だに使っています。何よりいいのがマウスで線を描いたとしても滑らかな曲線に置き換えてくれる機能です。そんなSkitchを彷彿とさせるソフトウェアがatrament.jsです。Jav...

List

  • 2016/06/12

Zebra - リッチなUIが作れるWebアプリケーションフレームワーク

HTML5によってUI周りは大きく改善されましたが、それでもまだまだ物足りないと感じることは多いです。その結果、外部ライブラリを導入せざるを得ず、互換性や組み合わせによる不具合が発生することもあります。今回は多くのリッチなUIライブラリを提供するZebraを紹介します。Zebraを使えば他のライブラリを使わずともリッチ...

None

  • Premium_s 2016/06/10

業務で使えるオープンソース(194)「WebGL」

今回のテーマはWebGLです。HTML5が普及し、その中でWebGLも使いやすくなってきました。iOS9でもWebGLがサポートされたこともあって、スマートフォンでもWebGLコンテンツが普及しはじめています。今回はそんなWebGLの使われ方と、関連オープンソース・ソフトウェアを紹介します。### ゲームWebGLと聞...

List

  • 2016/06/10

Spy - Webページ中でのユーザの動きをトラッキング

アクセス解析を使うとユーザがどう回遊しているか分かります。しかし、ページの中でどういう風に動いているかは分かりません。そこで何か問題にあってページを閉じてしまっている可能性もあります。そんなユーザの操作を記録、再現してくれるのがSpyです。アクセス解析と組み合わせて使ってみると面白そうです。## Spyの使い方Spyの...

List

  • 2016/06/10

Bootstrap Clean Dashboard Theme - 管理画面に向いたBootstrap製ダッシュボードテンプレート

Bootstrapが最もよく使われるのは個人のWebサービス、そして企業の管理画面ではないでしょうか。そこまでデザインがよくある必要はないですが、見逃し防止の一覧性やグラフの見やすさなどが求められます。そんなBootstrapを使った管理画面テンプレート、Bootstrap Clean Dashboard Themeを...

List

  • 2016/06/09

Blueprint: Vertical Timeline - スタイリッシュな縦型タイムラインデザイン

Webサイトの記念的なエントリーやページを作成する際には縦向けのタイムラインがよく使われます。Webページは縦にスクロールされるものが多いので、一番上が過去とすれば、スクロールするごとに経過時間をたどれるようになります。そんなサイトを作る際に使えるのがBlueprint: Vertical Timelineです。センス...

List

  • 2016/06/07

Editor - Web用のMarkdownエディタ

世の中、Markdownばかりになってきました。その効果として、コンテンツが増えたり、関連ツールも多数出てきています。特にMarkdownエディタについてはかつてのWikiのように多数の言語で実装されるようになっています。今回紹介するEditorもその一つですが、単独で動くものではなくWebサイトに埋め込んで使うタイプ...

List

  • 2016/06/05

MML-editor - Webブラウザ上でMMLを作成、実行

MMLというのはMusic Macro Languageの略で、音楽を表現するためのDSLになります。コマンドがシンプルで、C〜Bがドレミファソラシドに紐付いています。他にも多数用意されているコマンドを使って音楽を奏でます。通常、MMLで作成したファイルをコンパイラを使って音楽ファイルに変換するのですが、MML-edi...

List

  • 2016/05/31

Satoshi Visualizer - BitCoinのビジュアラズ

FinTechの盛り上がりもあり、ブロックチェーン技術やそれを使ったBitCoinが今なお熱いです。そこには先進的で面白い技術が使われているため、技術的な乗っ取りが発生するだの、通貨システムとして問題があるだの様々なことが言われつつも実際に使われ続けています。技術者として非常に興味が膨らむ分野だけに、それに絡んだ多くの...

List

  • 2016/05/28

RazorFlow - 多数のグラフをサポートするHTML5ダッシュボードフレームワーク

業務システムといえど、UIが整っている方がやる気が出るはずです。特にダッシュボード系のよく見る画面であれば分かりやすくなっているかどうかで生産性が大きく変わってきます。今回紹介するオープンソース・ソフトウェアはRazorFlow、HTML5のダッシュボードフレームワークです。## RazorFlowの使い方RazorF...

List

  • 2016/05/25

長雨 - 日本向けの縦書きTumblrテーマ

Tumblrはコンテンツを簡単にシェアしたり、公開できるとあってとても人気のあるサービスとなっています。さらにテーマがカスタマイズできるとあって、自由度が高さも売りとなっています。今回はそんなTumblrテーマの一つ、長雨を紹介します。特に和なコンテンツを公開していくのに最適なテーマとなっています。## 長雨の使い方長...

List

  • 2016/05/21

Dante - Medium風WYSIWYGエディタ

ブログシステムとしてMediumが人気です。シンプルなUIで、文章を書くという目的にぴったりです。特にエディタが良くできていて、セクションごとに動画や写真を挿入したり、文章を装飾する際に表示されるツールバーも良い感じです。そんなMediumのエディタを真似たのがDanteです。自分のサービスの中にMedium風エディッ...

None

  • 2016/05/17

MidiWriterJS - JavaScriptによるMIDIファイル生成

MIDIというと20年くらい前のWebで、ブラウザで音楽を流すのに使ったり、耳コピーした映画やドラマ、ゲームの音楽を配布するのに使われていた覚えがあります。最近ではあまり聞きませんが、音楽の創作をもっとプログラマブルにすることで新しい可能性が出てくるかも知れません。そう感じさせるのがMidiWriterJSです。## ...

List

  • 2016/05/15

Tumbless - Amazon S3を使ったサーバレスなブログシステム

ブログシステムはどんどんカジュアルな方へ進化しているように感じます。データベースレスになり、静的サイトになり、余計な仕組みを取り払って提供されるようになっています。今回はその最新版ともいえるTumblessを紹介します。Amazon S3を使うことで、サーバレスアーキテクチャを実現しています。## Tumblessの使...

List

  • 2016/05/14

TopicTimer - Webベースの手軽なタイマー

仕事は時間に沿って進められます。ミーティングなどは決まった時間にはじまって、決まった時間に終わる必要があるのですが、つい延び延びになってしまうことがあります。そういった問題を防ぐために使いたいのがTopicTimerです。タイマーを使って残り時間を管理できます。## TopicTimerの使い方まず最初にトピックを作り...

List

  • 2016/04/24

ABCD-Animal-Book - ABCを覚えるための電子絵本

日本語で言えば平仮名、英語で言えばABCの学習は読み書きの基本です。間違ってもそこでつまずかないよう、分かりやすく楽しく学べるようにする工夫が必要です。絵本を通じて覚える人も多いでしょう。今回紹介するオープンソース・ソフトウェアはABCD-Animal-Bookです。タブレットを使った電子絵本とも言うべきソフトウェアで...

List

  • 2016/04/23

statuspage - GitHubのIssue連携型ステータスページ

Webサービスのステータスページは大事です。きちんと正常動作しているのか、不具合が発生しているのか、またはメンテナンスしているのかなどが分からないと、利用者は安心して使えないでしょう。そこで使ってみたいのがstatuspageです。GitHubを使ってステータスページを生成してくれるソフトウェアです。## status...