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

技術 - HTML5の記事一覧

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

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

もっと見る

List

  • 2016/08/05

Material Kit - Bootstrapをベースにしたマテリアルデザインフレームワーク

マテリアルデザインが人気です。単なるフラットなデザインだとどこがボタンなのか、さらにクリックした時の反応がないためアクションを起こしたのかどうかも分かりづらいと言った問題があります。マテリアルによって反応が得られるようになればユーザビリティが高くなるでしょう。そこでBootstrapに対してマテリアルデザインを適用でき...

List

  • 2016/08/02

THE FUR - 何でも可愛くモフモフ加工

人が対象を可愛いと判断する要素は「小さい」「丸い」「柔らかい」といったところにあります。特にぬいぐるみなどは大きくても可愛いと思われることが多いので、丸くて柔らかそうなものは可愛いと思われる対象として大きな要素が感じられます。そこで使ってみたいのがTHE FURです。どんな対象であっても柔らかそうに変化させてしまうWe...

List

  • 2016/07/27

Keen-UI - マテリアルデザインのUIコンポーネント集

デザインは徐々にシンプルな方向に進んでいます。フラットであったり、マテリアルデザインなどがそうです。しかしシンプルであるが故に空間の取り方であったり、マテリアルデザインならではのアニメーションなど実装が難しい部分も増えています。今回はそんなマテリアルデザインに合わせた各種UIコンポーネントを提供しているKeen-UIを...

List

  • 2016/07/25

mobile-videoplayer - iOSでも自動再生できる動画プレイヤー

スマートフォン(特にiOS)は動画を自動再生してくれないという問題があります。また、動画再生時はフルスクリーンになってしまったり、JavaScriptから操作できないといった問題もあります。それらを解決してくれるかも知れないのがmobile-videoplayerです。音は出ないですが、上記問題は解決できます。## m...

List

  • 2016/07/24

video-resize - videoタグの大きさをダイナミックに変更

HTML5で追加されたタグの中で注目度が高いのはvideoタグではないでしょうか。動画は人気コンテンツの一つですし、Flashが終わる中とあってvideoタグに期待がかかっています。しかしそんなvideoタグはあまり柔軟にできていません。例えばリサイズですが、標準では問題があるのでvideo-resizeを使ってカバー...

List

  • 2016/07/19

Pica - Canvasよりも高品質、かつ高速な画像リサイズライブラリ

HTML5のCanvasとJavaScriptを使うことによって画像をクライアントサイドで加工できるようになりました。特に多いのが縮小に関するニーズです。スマートフォンで撮影した画像はサイズが大きいので、転送にかかる時間や帯域の問題があります。そこで事前に縮小するのです。しかし縮小した時の画像の品質はブラウザに依存して...

List

  • 2016/07/16

Star Wars Intro - スターウォーズのイントロをスタイルシートだけで再現

みんな大好きなスターウォーズ。そしてスターウォーズと言えば、映画開始直後のオープニングの演出は誰もが知っているところだと思います。あの瞬間からスターウォーズの世界に引き込まれていくことでしょう。そんなスターウォーズのイントロをCSSだけで再現したのがStar Wars Introです。ぜひご覧ください!## Star ...

List

  • 2016/07/12

executor editor - JavaScriptを実行できる埋め込み型エディタ

かつてWebブラウザ上で任意のJavaScriptを実行しようと思ったらアドレスバーに入力するしかありませんでした。今はDevToolsが使えるようになり、自由にJavaScriptが実行できます。しかしこれはまだ開発者向けであって一般ユーザ向けではありません。そこで使ってみたいのがWebブラウザ上で任意のJavaSc...

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を使えば他のライブラリを使わずともリッチ...