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

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

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

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

もっと見る

List

  • 2017/02/20

Playlister - YouTube動画でプレイリストを作成&共有

YouTube上にはたくさんの音楽動画が揃っています。殆どのアーティストがMVをYouTube上にアップし、新譜も期間限定でアップロードします。音楽だけよりは若干使い勝手が悪いですが、高速なインターネットがある環境であれば十分でしょう。そんなYouTube上の音楽をプレイリスト化し、みんなでシェアできるのがPlayli...

List

  • 2017/02/20

Turbo Download Manager - マルチスレッドでダウンロードを高速化

オンライン上で扱うファイルの容量はどんどん増えています。一つのファイルで数GBなんてこともざらにあります。ダウンロードを高速化するためにTorrentのような仕組みもありますが、企業内では使えないことが多いでしょう。そこで使ってみたいのがTurbo Download Managerです。マルチスレッドでダウンロードを高...

List

  • 2017/02/19

AirSlide - Webでスライド操作を共有

プロジェクターが暗かったり、そもそもなかったりすると小さなラップトップの画面を全員で共有することになります。これでは見る方に集中しなければならず、良い会議になりません。資料は各自で見られる方が便利です。そこで使ってみたいのがAirSlideです。Webブラウザでスライドを共有し、さらに操作もオーナー側でできるソフトウェ...

List

  • 2017/02/18

Codebox - デスクトップとクラウドで動作するIDE

開発を効率的に進める上でIDEの存在は欠かせません。スクリプト言語の多くはプログラミングエディタで作成しますが、それでも自動補完やエラーチェックなどの機能があると開発がスムーズになるでしょう。今回紹介するCodeboxはデスクトップまたはクラウドで動作する想定のIDEになります。## Codeboxの使い方ディレクトリ...

List

  • 2017/02/17

mediacenterjs - Webベースのメディアセンター

使ってみると意外と便利なのがメディアセンターです。ローカルやネットワーク内にある動画、音楽ファイルなどを一箇所で管理でき、スマートフォンなどから操作して音楽や映画を楽しめるようになります。そんなメディアセンターをWebベースで提供するのがmediacenterjsです。## mediacenterjsの使い方セットアッ...

List

  • 2017/02/16

Spectacle Editor - HTMLスライドをグラフィカルに作成

HTMLで作るプレゼンテーション用のスライドが流行っていますが、作成するのが意外と面倒だったりします。多くはMarkdownファイルをベースにしたものですが、エフェクトを定義できなかったりとスライドとしてのインパクトに欠けるものもあります。そこで使ってみたいのがSpectacle Editorです。HTMLをベースにし...

List

  • 2017/02/15

QArt.js - 好きな画像と組み合わせたQRコード生成

QRコードというと小さな四角が並んだ白黒の模様で、一般の人からするとよく分からないものに見えます。見た目の違いも分かりづらく、目を引きづらいため最近ではカラーにしたり、他の絵柄を混ぜると言った手法も開発されています。今回紹介するQArt.jsもその一つで、好きな画像をベースにQRコードを生成してくれます。## QArt...

List

  • 2017/02/14

multi.js - 複数選択のドロップダウンをリッチに変身

WebのフォームはHTML5でリッチになっていますが、それでもまだまだ標準では使い勝手がよくありません。とは言え、それを改善するためのライブラリも出てきていますので、積極的に取り入れていきましょう。今回紹介するのはmulti.js、複数選択できるselectタグを格好良くしてくれるライブラリです。## multi.js...

List

  • 2017/02/13

photo-screen-saver - Electronで作るWindows用スクリーンセーバー

今時スクリーンセーバーは不要という考えがあります。確かに液晶ディスプレイでは焼き付けはほぼ起こりません。しかしプラズマTVでは起こりえます(もちろん対処されているでしょうが)。また、なんとなくスクリーンセーバーは見ていて面白いものです。そんなスクリーンセーバーをHTML標準の技術で作れるのがphoto-screen-s...

List

  • 2017/02/12

svg2png - SVGファイルをPNGに変換

最近、画像の代わりにSVGを使っているサイトが増えてきました。それは良いことなのですが、まだまだ対応していないソフトウェアも多く、使い回す際に若干の不便があります。そんな時はWebブラウザでSVGを表示して、それのスクリーンショットを取るなんて面倒なことをしたりします。今回紹介するオープンソース・ソフトウェアはsvg2...

List

  • 2017/02/11

mo · js - Web上でモーションアニメーションを実現

Webの表現力は上がったと言われていますが、そのためのテクニックは必要です。SVGやCanvasを使いこなすのは相当難しく、専用のライブラリを使う方が手軽にアニメーションなどが実現できます。今回紹介するmo · jsもその一つで、モーションアニメーションが実装できるライブラリです。## mo · jsの使い方実装例です...

List

  • 2017/02/10

pen - React製のシンプルなMarkdownプレビューワー

Markdownはプログラマー界隈では広く普及した記法となっています。そのための専用エディタも多数存在します。しかしエディタはプログラマにとって大事なものであり、手に馴染むかどうかに大きな隔たりがあります。専用エディタは馴染まず、でもMarkdownのプレビューはしたいという方はpenを使ってみましょう。## penの...

List

  • 2017/02/09

参加者の名は。 - Connpassから参加者用ネームカードを生成

勉強会などで全く知らない人たちといきなり会話をするのは気後れしてしまいますが、実はTwitter上でつながっていたなんてことはよくあります。また、顔は知らなくともオンライン上の名前は知っているなんてことも多々あります。そうした良い出会いの助けになりそうなのが参加者の名は。です。Connpassの参加者一覧からネームカー...

List

  • 2017/02/08

Q Accelerator - Qiitaをよりアグレッシブに使いこなすためのChrome機能拡張

よく使っているサービスこそ、ちょっとした工夫でさらに便利にできることがあります。時々しか使わないものを改善するのに比べて圧倒的に分かりやすく、かつドッグフーティングで改善策がどんどん出てくるはずです。もしあなたがQiitaをよく使っているのであれば、Q Acceleratorをインストールするとより便利になることでしょ...

List

  • 2017/02/08

tlapse - 指定したURLに定期的にアクセスしてスクリーンショットを保存

Webサイトの作成はゼロから形になるものを作っていく、作品としての一面を持っています。いきなり完成品ができあがる訳ではなく、色々試行錯誤しながら、再読込を繰り返しつつできあがっていきます。そんなWebサイトのできあがっていく様を残し続けてくれるのがtlapseです。## tlapseの使い方tlapseは以下のように利...

List

  • 2017/02/07

blindpad - 音声チャット付きのコラボレーションエディタ

コラボレーションエディタは多数ありますが、単に同時に編集するだけではなかなか効率的に文章は作れません。多くの場合、チャットしながら編集状況を確認し合ったりします。しかしテキストチャットでは文字を入力するので若干手間がかかると言えます。そこで使ってみたいのがblindpadです。コラボレーションエディタに音声チャットを付...

List

  • 2017/02/05

Frappe Gantt - マウス操作が便利なガントチャート

個人的にはあまり好きではないのですが、プロジェクト管理において重宝されるのがガントチャートです。各タスクが時系列上に並ぶことで、タスクが重なる期間が分かりやすくなったり、タスクの関連度を可視化することでボトルネックを発見できます。そんなガントチャートを作成できるライブラリがFrappe Ganttです。## Frapp...

List

  • 2017/02/04

json.browse - 開発者ツールを使ったJSONブラウザ

JSONはRESTful APIをはじめとして、最近最も多く使われているフォーマットになっているのではないでしょうか。そのため、開発者はJSONデータを表示、確認するためのツールが必要になっています。今回紹介するjson.browseもその一つですが、特徴的なのはDevToolsも組み合わせて使う点です。## json...

List

  • 2017/02/04

Pepyaka - 任意のテキストを派手な画像で表現

文字をそのまま普通のフォントで表示しても面白みがないですよね。そのために面白みが感じられるユニークなフォントが存在するのですが、それでも同じフォントだけを使っていては飽きが来ます。そこで使ってみたいのがPepyakaです。任意のテキストに対して面白いアニメーションGIFで表示してくれます。## Pepyakaの使い方普...

None

  • 2017/02/03

Shrimpit - 使われていない変数を発見するJavaScript解析ツール

nodeが使われるようになって、大きなシステムも作られるようになっています。そんな中で生まれるのがrequire/import地獄です。毎回ファイルごとにライブラリを読み込まなければならず、管理が煩雑になっていきます。そこで使ってみたいのがShrimpitです。ディレクトリを解析し、使われていない箇所を抽出してくれます...