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

技術 - HTML5の記事一覧

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

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

もっと見る

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ブラウザ上で動作するオ...

List

  • 2016/03/18

GLSlideshow.js – WebGLを使ったスライドショー

Web上で写真やスライドを切り替えるスライドショーは数多くあります。その多くはCSS3を使ったアニメーションで切り替えるものが多いかと思います。しかしもっと高度なエフェクトを実装したいと思ったことはないでしょうか。今回はWebGLを使ったスライドショーアプリケーション、GLSlideshow.jsを紹介します。写真のス...

List

  • 2016/03/01

Pixel Art to CSS - スタイルシートで出力できるドット絵エディタ

ピクセルアート、いわゆるドット絵は昔から変わらず人気があります。今のゲーム機ではほとんど見られなくなりましたが、Webやスマートフォンアプリでは使われていたりします。そんなドット絵を作るためのエディタがPixel Art to CSSです。特徴はReactJSで作られていること、さらにCSSで出力できることです。## ...

List

  • 2016/02/25

Pressure.js - JavaScriptで3D Touch/Force Touchのイベント管理

iPhone6では3D Touchという機能が追加され、さらに新しいMacBookなどでもForce Touchと呼ばれる感圧タッチパッドが採用されています。これにより、単純なクリックに奥行きを持たせることができるようになっています。そこで紹介したいのがPressure.jsです。Webブラウザ上でForce Touc...

List

  • 2016/02/24

TOUCH with Leap Motion - Leap Motionを使った新しいユーザ体験

最近、VRに人気が集まっています。VRグラスは視覚的に仮想現実を体感させてくれますが、視点の移動を行う際にはキーボードやマウスを使う必要があります。視覚だけでなく入力の仮想現実化も必要でしょう。今回は新しい入力デバイスであるLeap Motionを使った新しい体験を提供するTOUCH with Leap Motionを...

List

  • 2016/02/24

かんたんMarkdown - 単一ファイルのMarkdownエディタ/ビューワー

Markdownがどれだけ普及しつつも、ビューワーやエディタがないというケースはとても多いです。そのためにHTMLに変換して送ったりするのは面倒で、もっと手軽にさくっと使えるエディタがあると便利とは思っていました。そんな世界を実現してくれそうなのがかんたんMarkdownです。ごく手軽なMarkdownエディタ/ビュー...

List

  • 2016/02/22

Clipboard Hook - カット/コピー/ペーストをイベントフックするJavaScriptライブラリ

Webのコンテンツをコピーしたり、逆にペーストすると言ったことはよくあるかと思います。そんな時、URLであれば自動的にリンク展開したり、画像や動画を埋め込み表示にできたりするとUXがとても良くなるはずです。そんな操作を実現してくれるのがClipboard Hookです。コピー、カット、ペーストと言ったクリックボード操作...

List

  • 2016/02/17

Pacman in HTML 5 Canvas - さぁ遊ぼう!HTML5製のパックマン

以前Googleがロゴをパックマンにしたことがありました。みんなそれに飛びついて遊び続け、経済的損失が1億2,048億ドルに達したと言われています。単純だけど、それだけにハマってしまう…それがパックマンの魅力と言えるでしょう。今回はそんなパックマンの恐怖再び、というHTML5ベースのパックマン、Pacman in HT...

List

  • 2016/02/16

Snapdrop - これは便利!WebベースのAirDrop

Mac OSXやiOSで使えるAirDropは便利で、近くにいる人(デバイス)と簡単にファイルを送りあうことができます。AndroidやWindowsなど、他のデバイスでも同じことがしたいと思うケースは多々あります。擬似的に似たようなことができるアプリもあるのですが、Snapdropはなんとアプリのインストール不要で使...

List

  • 2016/02/13

FractalJS - JavaScriptで描くフラクタル画像

印象的なひょうたん風の図形と、幾ら拡大しても幾何学的図形が繰り返されていくフラクタル画像。ついついズームを繰り返していって、いつか終わるが来るのではないかと見入ってしまう魅力があります。そんなフラクタル画像をWeb上で実現してくれるのがFractalJSです。多くのパターンがありますのでぜひ色々試してみてください。##...

List

  • 2016/02/13

Dinos - HTML5を活用。日本製WebOS

HTML5の高い表現力とJavaScriptのパワーが合わさることで、かつてのコンピュータ上で実行されていたものがWebブラウザ上で再現できるようになっています。ChromeOSはその最たるものと言えるでしょう。HTML5を使ってどこまでできるのか、それに挑戦したのがDinosです。いわゆるWebOSと呼ばれるソフトウ...

List

  • 2016/02/11

SVGnest - 工作加工に。一つの部材から効率的に部品を切り出す

最近、IoTもあって工作が流行っています。3Dプリンタもありますが、CNC旋盤のように予めコンピューティングした上で加工してくれる機械もあります。そこで大事になるのが素材の切り出し法です。同じ部材からでも切り出す部品を上手に隙間なく並べることで無駄なく取り出せるようになります。そのための計算を行ってくれるのがSVGne...

List

  • 2016/02/11

Philter - Webブラウザ上の写真加工ライブラリ

サイト上で写真を綺麗に見せようと思ったら多少の加工は欠かせません。しかし大量にある写真を一つ一つメンテナンスするのは大変ですし、加工前の写真も保存しておくと容量が2倍必要になってしまいます。そこで使ってみたいのがJavaScript、つまりクライアントサイドでの写真加工です。今回はPhilterを紹介します。## Ph...