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

技術 - HTML5の記事一覧

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

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

もっと見る

List

  • 2016/07/11

Pokémon Engine - ポケモンを舞台にしたMMO

ポケモンは世界的に人気のゲームです。新しい新作はもちろんのこと、旧作であっても今なおプレイする人たちがいます。個人で楽しんでも良いですし、育てたモンスターでバトルをするとさらに盛り上がるでしょう。そんなポケモンをMMOとして再現しようとしているのがPokémon Engineです。WebGLを使い、綺麗なグラフィックス...

List

  • 2016/07/09

Chain - Webベースのビジュアルプログラミング環境

タブレットが普及するのに伴ってビジュアルプログラミングに注目が集まっています。小学生や中学生向けのプログラミング学習として使われるのはもちろん、よりプログラミング学習の敷居を下げられるのが魅力的です。今回はビジュアルプログラミング環境の一つとして、Chainを紹介します。Webブラウザ上で動くのですぐに試せるのが魅力に...

List

  • 2016/07/08

IdeaSpace - VRコンテンツ用CMS

Webサイトの基本と言えばCMS(コンテンツ・マネージメント・システム)です。しかしすべて同じCMSで良いかと言えばそうではなく、C(コンテンツ)によってシステムの選定は分かれるべきです。今回紹介するIdeaSpace、今話題性のあるVR向けコンテンツを管理するCMSです。## IdeaSpaceの使い方管理画面です。...

List

  • 2016/07/05

Sankey - マウスオーバーでハイライトするチャートライブラリ

HTML5になってWebの表現力は格段に向上しています。特にJavaScriptと絡めてインタラクティブに変化するチャートはインパクトが強く、ユーザへの訴求力も強くなります。しかし作るのが難しいというのが問題です。解決策としては様々なチャートライブラリを知り、表現したいものに合わせてライブラリを選択するのが良いでしょう...

List

  • 2016/06/30

Shine CSS Framework - ビビッドなカラーリングが特徴のCSSフレームワーク

CSSフレームワークは多数ありますが、どうしても色が感じられるようになってしまいます。なんとなくBootstrapで作っただろうなと言うサイトは分かるはずです。便利だけど、あまり使われているものは避けたいと考えるのではないでしょうか。今回は新しいCSSフレームワーク、Shine CSS Frameworkを紹介します。...

List

  • 2016/06/28

formAnimation - フォームを揺らすバリデーションライブラリ

一般的にフォームの入力エラーがあると上の方にエラーメッセージが表示されます。多くの場合、エラーメッセージは表示が残るので、二回目のエラーとなった時に表示が更新されずに分かりづらいことがあります。エラーが起きたんだ、ということを強くアピールしたい時にはformAnimationを使ってみましょう。アニメーションでインパク...

List

  • 2016/06/19

gridfolio - グリッド主体のポートフォリオ

デザイナーの方にとってポートフォリオはとても大事です。デザインや写真を使って自分の実力をアピールすることで転職や新しい仕事の獲得につながるでしょう。そして、そのポートフォリオの見せ方も重要です。作品が良くても、肝心のポートフォリオサイトが変だったら実力が疑われてしまいます。そこで使ってみたいのがgridfolioです。...

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