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

技術 - HTML5の記事一覧

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

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

もっと見る

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はマイクへのアクセスを許可する必要があ...

List

  • 2016/04/09

Github Visualizer - GitHubリポジトリを可視化

GitHubはそれまでのリポジトリサービスと異なり、ソーシャルに特に注力しています。それはユーザはもちろん、編集したコンテンツでも同様です。今回はそんなGitHubリポジトリのファイル構成をビジュアル化するGithub Visualizerを紹介します。## Github Visualizerの使い方これはAtomのリ...

List

  • 2016/04/05

Textcomplete - GitHub風な絵文字アイコン入力補完

GitHubあたりからテキストエリアでの絵文字入力が使われるようになったと思います。アイコンはコミュニケーションを円滑にしたり、ちょっとしたコメントであれば絵文字だけで済んでしまうので手軽に使うことができます。そんな絵文字入力を自分のサイトにも取り込みたいと思うならばTextcompleteを使ってみましょう。## T...

List

  • 2016/04/05

Mobility - スマートフォン用Web/ハイブリッドアプリ向けUIフレームワーク

スマートフォン向けにWebサイトであったり、Cordovaを使ったハイブリッドアプリを作る場合にはデスクトップ向けとは異なるUIフレームワークを使うのがお勧めです。UIはもちろん、スワイプ操作などのUXも専用の方がユーザビリティが高いでしょう。今回紹介するのはMobility、軽量なスマートフォンブラウザ向けUIフレー...

List

  • 2016/04/02

AdminPlus Lite - Bootstrap4対応の管理画面テンプレート

Bootstrapは便利なUIフレームワークなのですが、進化がとても早いのが玉に瑕かも知れません(進化しないのも困るのですが…)。せっかく便利に作られたライブラリも本体が進化すると使えなくなってしまうことがあります。そうしたらどうするか。さらに最新版に合わせたライブラリを作るのです。ということで今回は最新のBootst...

List

  • 2016/03/23

360Viewer - Webベースの全天球画像ビューワー

全天球画像、動画に注目が集まっています。VRグラスなどを通してみると、没入感が強く、かつ視点を自由に変えられるコンテンツになります。通常の写真や動画とはまったく違う体験が得られることでしょう。そんな全天球画像/動画は専用のビューワーを通してしか楽しめないのが欠点でした。そこで使ってみたいのが360Viewer、Webベ...

List

  • 2016/03/21

xterm.js - JavaScriptで作られたWebベースのコンソール風UI

クラウドサービスの中には、Webブラウザからサーバにログインして操作できるような機能を提供しているものがあります。エンジニアであればWeb上で設定するのではなく、コンソールで操作した方が手軽と言うことは多いかと思います。そんな機能を実現してくれるソフトウェアがxterm.jsです。JavaScriptで作られたターミナ...

List

  • 2016/03/20

React-designer - React製のベクターグラフィックスエディタ

Reactを使った多くのコンポーネントが出てきました。Reactの利点として、デザインも一緒になっているので再利用しやすいということが挙げられます。そのため、良いコンポーネントだと思ったら、自分のプロジェクトに取り込むのも難しくないでしょう。今回はその一つとしてReact-designerを紹介します。Reactで作ら...

List

  • 2016/03/19

GrapesJS - Web上で動作するオーサリング/テンプレートエディタ

Web開発用のオーサリングソフトウェアと言えばDreamweaverですが、価格や使いこなせないことを考えて購入まで至れない人は多いのではないでしょうか。それにWebブラウザ上でデザインした方がレンダリングエンジンによる差異に悩むこともありません。そこで使ってみたいのがGrapesJSです。Webブラウザ上で動作するオ...