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

技術 - HTML5の記事一覧

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

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

もっと見る

List

  • 2016/09/16

Web Quick Editor - Google Driveに保存するサーバレスなメモ帳

メモをしようと思った時にエディタを開いたり、ファイルを新規作成してメモして保存…などというのはとても面倒です。簡単に呼び出して内容を記述して閉じて終わり、というくらいの素早さが必要です。そこで使ってみたいのがWeb Quick Editorです。Google Driveチームが作ったサンプルテキストエディタです。## ...

List

  • 2016/09/11

NEditorJS - ビジュアルプログラミング環境の基盤にどうぞ

ビジュアルプログラミングの多くはノードがあり、それらをマウスでくっつけて処理を繋げていきます。各ノードには機能があり、必要に応じて処理判定を行うノード、繰り返し処理を行うノードを選択します。そういったビジュアル化された環境を提供するのがNEditorJSです。工夫次第で様々な使い方が考えられるでしょう。## NEdit...

List

  • 2016/09/10

JpegCamera - Webカメラの映像を画像化

最近のノートPCではWebカメラが搭載されるのも当たり前になっています。そしてHTML5ではWebカメラから映像の取り込みが可能です(Safariはできませんが)。しかしなかなか活用事例は多くありません。そこにはWebカメラから取り込んだ映像を画像ファイル化したりするのが面倒という問題があります。そこで使ってみたいのが...

List

  • 2016/09/09

Whitewater Mobile Video - iPhoneでも動画をインラインで再生

iPhoneを使ってサイト内で動画を再生しようとすると背景が真っ黒になって動画だけの再生モードになります。動画だけを見せたい場合はこれでもいいですが、一緒にテキストを見せたい時などには不便な表示です。そこで使ってみたいのがWhitewater Mobile Videoです。音声は出ませんが、動画のインラインでの再生を可...

List

  • 2016/09/08

Aquarelle - 色のついた水が広がっていくような表現

Webの表現力はHTML5によって格段にあがっています。それまではFlashなどを使わないといけなかったような表現がCSS3とJavaScript、Canvasなどによってできるようになっています。今回はそんなWebの新しい表現力を実感できるソフトウェア、Aquarelleを紹介します。## Aquarelleの使い方...

List

  • 2016/09/07

Hakoniwa - 標高メッシュデータを使った3D表示

JAXAでは30mメートル単位でメッシュを作った標高データを公開しています

List

  • 2016/09/04

flappy-bird - HTML5製のFlappy Birdクローン

有名なサービスはすぐに真似されます。パクリというと悪い印象がありますが、技術者にしてみると真似することでその中で使われている技術、デザインを実践的に学べるという利点があります。今回紹介するflappy-birdはその名の通り、Flappy Birdを真似したソフトウェアです。特徴としてはReactを使ってHTML5アプ...

List

  • 2016/09/02

Monaco Editor - VS Codeでも使われているWebベースのプログラミングエディタ

Web上でコードを書けるサービスが増えています。そのままファイルとして保存したり、クラウド上で実行できるようになっています。そうした時にデフォルトのテキストエリアを使っていては全く書く気がなくなってしまうでしょう。そこで使ってみたいのがMonaco Editorです。Microsoft製のプログラミングエディタVS C...

List

  • 2016/08/31

Froala WYSIWYG HTML Editor - 綺麗なデザインのWYSIWYGエディタ

昔のWYSIWYGエディタと言うとツールバーに多くの機能が並んでおり、生成されるHTMLは相当分かりづらいものでした。機能が豊富すぎたために表示速度が重たかったり、一般ユーザにとっても混乱しかねないものだったと思います。現在ではずいぶん進化しており、すっきりとしたデザインで使いやすいものが増えています。今回はFroal...

List

  • 2016/08/30

SimcirJS - Webベースの電子回路シミュレータ

最近IoTに注目が集まっています。自分でもセンサーやマイコンを買って試してみたという方もいるのではないでしょうか。しかしコンピュータ上のプログラミングとは異なり、簡単には動かないケースも多々あります。それを解決するために一度はシミュレータで試してみてはいかがでしょう。SimcirJSを使えばWeb上で回路図を作成できま...

List

  • 2016/08/09

WebGazer.js - WebカメラとJavaScriptによるアイトラッキングシステム

ユーザテストでユーザの視線がどこに移動しているのかチェックするのは必要です。ただし、アイトラッキングシステムを使うのはとても複雑ですし、コストもかかります。手軽にするため、マウスのトラッキングで済ましてしまっているケースもあります。そこで使ってみたいのがWebGazer.jsです。JavaScriptとWebカムを組み...

List

  • 2016/08/08

DPlayer - ニコニコ動画風弾幕動画プレーヤー

ニコニコ動画で一気に広まったのが動画の上にコメントを載せて表示するシステムです。コメントが多すぎると肝心の動画が見えなくなりますが、盛り上がっている中に自分もいるという動画を見るだけでない楽しみ方も生まれています。そんなコメントシステム(弾幕コメント)をHTML5の動画プレイヤーとして再現するのがDPlayerになりま...

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