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

技術 - HTML5の記事一覧

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

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

もっと見る

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

List

  • 2016/04/22

Able Player - 多機能でリッチなUIの動画/音楽プレーヤー

HTML5からvideo/audioタグが追加されました。しかしこれでFlash並の再生、表現ができると思ってはいけません。基本的な機能はとても貧弱なので、使いやすくするためには大幅なカスタマイズが必要です。今回紹介するAble Playerは、HTML5のオーディオ/動画プレイヤーです。多彩な機能が追加されています。...

List

  • 2016/04/21

MDWriter - 多彩なエクスポートが可能なMarkdownエディタ

最近、Markdownエディタが数多く作られています。それぞれプラットフォームが異なっていたり、フレームワークが違うなど、一時期のWikiエンジンを思わせるくらい流行っています。こうした中では数多くのエディタに触れて、自分に合っているものを選んでいきましょう。今回はMDWriterを紹介します。ブログやMarkdown...

List

  • 2016/04/19

Rec - Eletron製のスクリーンキャスト

ソフトウェアを紹介する際にデスクトップの操作を記録することは多々あります。最近はアニメーションGIFをよく使うのですが、YouTubeにアップロードする場合は動画で録画する方が良いでしょう。今回紹介するオープンソース・ソフトウェアはRec、Electron製のデスクトップレコーダーです。## Recの使い方Recを実行...

List

  • 2016/04/16

Simple UI - 学習コストの低いシンプルなUIフレームワーク

Bootstrapはとても便利に使えるUIフレームワークですが、多機能になるにつれて設定するクラスや作法が増えていきます。バージョンアップも早いので追従するのが大変です。今回はもっとシンプルに使えるUIフレームワーク、その名もSimple UIを紹介します。## Simple UIの使い方Simple UIはあまりクラ...

List

  • 2016/04/12

Voix JS - Webブラウザに音声コマンド機能を追加

スマートフォンやタブレットではボイス入力による音声コントロールが人気です。ウェアラブルや車の運転中による音声操作など、ITの利用範囲が広がる技術となっています。そんな音声コントロールをWebブラウザにも追加してくれるのがVoix JSです。## Voix JSの使い方Voix JSはマイクへのアクセスを許可する必要があ...