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

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

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

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

もっと見る

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です。別なページの内容でも印刷できるよ...

List

  • 2017/03/11

box - ハマりすぎ注意。Webベースの2Dパズルゲーム

もしこの記事を読むのが仕事中であれば、さっさと別なところに移動した方が良いでしょう。プライベートな時間で暇な時にぜひ読んで欲しいです。単純なゲームというのはそれくらい中毒性があるものです。今回紹介するオープンソース・ソフトウェアはbox、Webベースの2Dゲームです。## boxの使い方boxのゲーム画面です。WASD...

List

  • 2017/03/10

Diffy.js - JavaScriptでモーション検知

例えば監視カメラなどで、定常的に流れている情報を常に記録し続けると容量がどんどん大きくなってしまいます。そこで使われるのがモーション検知です。動きがあった時だけ記録するようにすれば容量が削減されます。Webカメラでモーション検知を可能にするのがDiffy.jsです。JavaScriptだけで実現できます。## Diff...

List

  • 2017/03/09

Chromenu - メニュー常駐型のWebブラウザ

Webブラウザを複数使いこなす人がいます。普段のブラウジング用と開発用で分けると言った具合です。そうすると必要な機能拡張やブックマークも変わるので、重たくなったりするのを防げるようになります。今回はさらに常駐系サイトを登録しておくのに便利そうなChromenuを紹介します。## Chromenuの使い方Chromenu...

List

  • 2017/03/08

S3 Bucket Listing - Amazon S3のインデックスページを生成

Amazon S3は静的なファイルのホスティングに最適ですが、一覧ページを作れません。静的なWebサイトとして使うのであればindex.htmlを置けば良いですが、単純にファイルを置いているのであれば一覧ページがある方が便利です。あらかじめ生成しておくこともできますが、S3 Bucket Listingを使えばもっと簡...

None

  • 2017/03/07

mdstore - 危険なドメインのリスト

インターネットは便利な仕組みですが、危ないWebサイトもたくさん存在します。プロキシのようなソフトウェアでアクセスを防いだり、Google Chromeなどはアクセスしそうになった時に警告を出してくれたりします。そんな危ないサイトへのアクセスを自己防衛できるのがmdstoreです。## mdstoreの使い方mdsto...

List

  • 2017/03/07

a-table.js - リッチな機能を持ったHTMLテーブルを出力

Web上でのテーブル表示はよく使われているだけに、そのUXが優れているかどうかでサービス全体の印象が変わってきます。Excel並とまでは言いませんが、ソートや絞り込み機能はあると便利です。そんなHTMLテーブルを手軽に優れたUIで提供してくれるのがa-table.jsになります。## a-table.jsの使い方デモで...

List

  • 2017/03/06

HyperApp - 1KBのビューライブラリ

ReactやVue、Riot.js、Angular2などバーチャルDOMを使ったフレームワークが増えています。個人的にはVueが好きなのですが、多くのビューライブラリは大型化し、ちょっとした表示に使いたいというニーズにはマッチしなくなります。そこで使ってみたいのがHyperAppです。1KBのJavaScriptライブ...

List

  • 2017/03/05

Caption - 字幕を簡単に検索&ダウンロード

海外の映画などで字幕がないと分かりづらいと感じることはあるでしょう。そのためのWebサイトはとても数多く存在しますが、検索が面倒だったりダウンロードするのにユーザ登録が必要なんてケースもあります。そこで使ってみたいのがCaptionです。とても簡単に字幕の検索、ダウンロードができるソフトウェアです。## Caption...

List

  • 2017/03/04

drag-drop - HTML5のドラッグ&ドロップAPIをごく簡単に扱う

HTML5で便利になった機能の一つにファイルのドラッグ&ドロップがあります。Webブラウザ上にファイルをドロップしてアップロードしたり、DOMをドラッグ&ドロップできたりします。しかしできるとは言ってもコードをそれなりに書かないと使えないのが難点です。そこで使ってみたいのがdrag-dropです。HTML5のドラッグ&...

List

  • 2017/03/04

html-docx-js - Web上でWordファイルを生成

MS Officeのファイルはデファクトといって言いほど広く使われるようになっています。企業なども特に何も気にすることなくMS Officeのファイルをメールで送信したりします。これが他のオフィススイートをであればそうはいかないでしょう。もしあなたがMS Wordを持っていないならばhtml-docx-jsを使って生成...

None

  • 2017/03/03

Breakdance - HTMLをMarkdownに変換するライブラリ

Markdownが流行っています。とりあえずMarkdownで書いておけばHTMLはもちろん、PDFなどにも展開できます。しかしこれまでに書いた資産はどうしたら良いでしょうか。WYSIWYGエディタで作られたHTMLコンテンツは捨て置くしかないのでしょうか。そんなことはありません。Breakdanceを使えばHTMLコ...

List

  • 2017/03/03

Rythm.js - 音楽/音声に合わせてアニメーション

Webは基本的に静的なものです。アニメーションを使うこともできますが、何度も繰り返したり、マウスクリックのタイミングでアニメーションが実行される程度です。よりインタラクティブ性が欲しいと思ったことはないでしょうか。そこで紹介したいのがRythm.jsです。なんと音声に反応するアニメーションライブラリです。## Ryth...

None

  • 2017/03/02

prh - コマンドラインで文章を校正

文章を書くというのは難しいものです。文字数もそうですが、分かりやすい文章を書くには漢字の使い方にも気をつける必要があります。あまり多用すると文章が固くなりますし、使わなすぎると幼稚に見えます。今回紹介するオープンソース・ソフトウェアはprh、そんな文章の構成を行ってくれるソフトウェアです。## prhの使い方prhはコ...

List

  • 2017/03/02

どうぶつしょうぎ名人 - 絶対勝てないどうぶつしょうぎ

どうぶつしょうぎはご存じでしょうか。4種類のコマ(ライオン、ひよこ、ゾウ、キリン)で遊ぶ将棋なのですが、実は後手が必ず勝つという論文が発表されています

List

  • 2017/03/01

Piskel - Web上でアニメーションGIFを作れるドット絵エディタ

動画をアニメーションGIFとして保存するソフトウェアは幾つも存在します。アニメーションは手元に素材がないとなかなか作るのは難しいかも知れません。しかし、ごく小さなサイズであれば何とかなるかも知れません。それを可能にするのがPiskelです。いわゆるドット絵の感覚でアニメーションGIFが作成できます。## Piskelの...

List

  • 2017/02/27

Deadbird - 削除されたツイートだけを保存

Twitterは時に炎上が起きます。何気ない一言を簡単に投稿できてしまうので、後になってニュアンスに問題があったり、自分の気付かなかった人たちを傷つけてしまっていたなんてことが起こります。そんな時に悪手ではありますが、ツイートを削除してしまうことがあります。そんな削除されたツイートを発掘してしまうのがDeadbirdで...