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

プログラミング言語 - JavaScriptの記事一覧

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

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

もっと見る

List

  • 2017/03/28

HTML5 Bombergirl - HTML5製のボンバーマン

最近のゲームはやり方を覚えるまでにそれなりに時間がかかります。そのため、時間がない人は遊びたくともなかなかできません。その点、昔ながらの古典的ゲームであれば操作もシンプルですぐに遊べます。今回は昔懐かしいボンバーマンをWeb上で再現したHTML5 Bombergirlを紹介します。## HTML5 Bombergirl...

List

  • 2017/03/28

Clappr - 機能拡張できるWeb用動画プレイヤー

動画コンテンツが一気に広がっています。スマートフォンやアクションカメラ、360度動画など様々な撮影デバイスも登場しており、今後もますます利用が広がっていくことでしょう。そんな動画コンテンツで必要なのがプレイヤーです。今回紹介するClapprは機能拡張がサポートされた動画プレイヤーになります。## Clapprの使い方使...

List

  • 2017/03/27

Resumable.js - HTML5 File APIを使ったリジューム付きファイルアップローダー

Webで面倒に感じるのがファイルのアップロードです。特に途中でネットワークが切れた時には大きなストレスになります。1回で数百MB、数GBの大きなファイルをアップロードするとなればリジューム機能が欲しくなるはずです。そこで使ってみたいのがResumable.jsです。HTML5のFile APIを使ってリジューム機能を実...

List

  • 2017/03/25

WebPack Playground - WebPackをWeb上で体験しよう

JavaScriptの利用範囲が広がるのに合わせてライブラリを使ったり、ソースコードが分かれているのを統合したりする必要が出てきました。その際に使われているのがBrowserifyであったり、WebPackです。今回はWebPackをWebブラウザ上で体感できるWebPack Playgroundを紹介します。## W...

List

  • 2017/03/24

LayaAir - 一つの言語からFlash/HTML5/モバイル向けにコード出力できるアニメーションエンジン

HTML5によって(またはiOSによって)Flashは絶滅に瀕しています。問題はFlashがなくなった後の世界でいかに効果的なアニメーションやインタラクティブな操作を実現できるかです。HTML5でできますが、非常に面倒でしょう。そこで使ってみたいのがLayaAirです。ゲームやアニメーションで使えるレンダリングを行って...

List

  • 2017/03/23

Shape Shifter - 異なるSVGに変化するアニメーションを生成

SVGとこれまでの画像バイナリと決定的に違う部分はなんと言ってもプログラムから操作しやすいということでしょう。アニメーションの定義などはSVG内でもできますが、より詳細なアニメーションはJavaScriptで制御できます。そんなSVGを使って形状変化するアニメーションを定義できるのがShape Shifterです。##...

List

  • 2017/03/22

ag-Grid - 業務要件の殆どを満たせそうなグリッドライブラリ

業務システムなどをWebベースで作っていると求められるのがリッチなグリッド機能です。ヘッダの固定、フィルタリング、チェック、カラムの順番変更、一回あたりのデータ表示件数変更…挙げれば実にきりがありません。そこで使ってみたいのがag-Gridです。ほぼこれでニーズを満たせるのではないかというくらいリッチなグリッド機能を提...

List

  • 2017/03/21

CanvasEffect.js - Canvasで画像にエフェクト

HTML5のCanvasを使うと画像を取り込んで表示し、エフェクトを行うことができます。しかしCanvasの扱いは意外と面倒で、コードも多くなりがちです。そのためメンテナンス性が低くなってしまいます。そこで使ってみたいのがCanvasEffect.jsです。画像を編集するための専用ライブラリとなっています。## Can...

List

  • 2017/03/21

Djvu HTML5 browser - WebベースのDjvuビューワー

Djvuというファイル形式があります。共通したDjvuビューワーをインストールしておけば、どのプラットフォームでも同じように文書を閲覧できるというものです。つまりPDFのような形式で、圧縮率に優れていると言われています。PDFに比べるとシェアは低いですが、Djvu HTML5 browserを使えばWebブラウザ上でD...

List

  • 2017/03/20

zPath.js - SVGをアニメーションしながら描画

SVGの良いところはベクターベースのデータである点と、内容がXMLなのでプログラマブルに操作可能ということです。バイナリデータと異なり、一部だけを描画したり色を変えると言ったことも簡単にできます。そこで使ってみたいのがzPath.jsです。SVGを読み込んでアニメーションしながら描画してくれます。## zPath.js...

None

  • 2017/03/19

Uber CLI - Uberの見積もり、到着時間が分かるCLIコマンド

海外出張などでUberを使わないことはほぼあり得なくなっています。Googleマップとも連携し、行きたい場所まですぐに連れて行ってくれるUberはとても便利です(各地で問題となっていますが、利用者としては最高の仕組みでしょう)。そんなUberのAPIを使って作られているのがUber CLIです。閲覧のみですが面白い仕組...

List

  • 2017/03/17

Export Tool for Vector Tiles to SVG - タイルデータを一つのSVGに統合

SVGはディスプレイの高画質化が進んでいく中で、バイナリに変わる画像フォーマットとして有力です。JavaScriptで動的に書き換えたり、拡大や縮小にも強い作りとなっています。今後ますます広がっていくことでしょう。そうした中面白そうなのがExport Tool for Vector Tiles to SVGです。地図デ...

List

  • 2017/03/16

Sly - 上下左右のスクロールを便利にするJavaScriptライブラリ

Webページの多くは縦長に作られています。縦方向のスクロールについてはホイールなどを使って簡単にできますが、それでもあまりに長いと操作が面倒です。さらに横向きのスクロールはストレスでしょう。そこで使ってみたいのがSlyです。上下または左右など一方向でのスクロールナビゲーションが便利になるライブラリです。## Slyの使...

List

  • 2017/03/15

opentype.js - 既存のフォントをちょっと変更。JavaScript製のOpenType/TrueTypeフォントパーサー

フォントをイチから作るのは大変です。日本語フォントはもちろんのこと、英語フォントにおいても多数の文字をデザインしなければなりませんし、それが統一されたデザインになっている必要があります。そこで使ってみたいのがはopentype.jsです。opentype.jsは既存のOpenType/TrueTypeフォントのパーサー...

List

  • 2017/03/15

Unique Machine - Cookieを使わないトラッキング。コンピュータ/ブラウザごとのユニークIDを生成

広告のトラッキングなどでコンピュータを特定するという技術がよく使われています。しかしプライバシーの問題もあり、最近ではCookieで余計な情報を渡さなくなったり、ブロックするような動きも増えています。しかしそれでもトラッキングしたい!という方はUnique Machineを使ってみてはいかがでしょうか。## Uniqu...

List

  • 2017/03/14

Snipe - インクリメンタルにWebブラウザのタブを検索

Webブラウザはタブ機能を標準で持っており、気がついたら数十のタブが開いていたなんてことも少なくありません。そんな中から自分が見たい情報を探すのは本当に大変で、面倒になってウィンドウごと閉じてしまったりしないでしょうか。いつもタブ管理で困っているという方はSnipeをインストールしてみましょう。タブを手軽に探せるChr...

List

  • 2017/03/13

Comma Chameleon - Electron製のCSVエディタ

CSVファイルをExcelなどで編集しようとすると、余計なコンバートが行われたり、文字化けしたりします。かといってテキストエディタで編集するのは相当面倒で、ミスも起こりやすいでしょう。そこで使ってみたいのがCSVエディタです。今回はマルチプラットフォームで使えるComma Chameleonを紹介します。## Comm...

List

  • 2017/03/13

Flatris - React製。プログレッシブWebなテトリス

HTML5がどんどん高機能化、表現力が高くなっているのに合わせて、これまでローカルアプリケーションでしか実現できなかったようなことがWeb上でできるようになっています。ゲームもその一つです。今回紹介するFlatrisはプログレッシブなWebテトリスです。HTML5でさくさくと遊べます。## Flatrisの使い方ゲーム...

List

  • 2017/03/12

ScalaFiddle - Scala.jsをWeb上で試す

Scala.jsを使うと、普段使い慣れたScalaの文法でJavaScriptが書けるようになります。とは言え、すべてがScalaと同じように書けるわけではありません。Webならではの作法だって存在します。そこで使ってみたいのがScalaFiddleです。あらかじめWebブラウザ上で手軽に試せるScala実行環境です。...

List

  • 2017/03/12

jQuery printPage plugin - 違うページをクリック一つで印刷

Webブラウザの印刷機能はとても貧弱です。少なくとも現在見ているページしか印刷できないし、印刷内容の制御もスタイルシートで行うしかありません。業務系などではもっと自由度が高い印刷機能が求められることも多いでしょう。そこで使ってみたいのがjQuery printPage pluginです。別なページの内容でも印刷できるよ...