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

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

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

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

もっと見る

None

  • 2017/10/19

youtube-to - YouTube動画を動画/MP3としてダウンロード

YouTubeで気に入った音楽や動画があってもユーザの意思によっていつでも消すことができます。視聴する側としてはいつでも聞けると思っていただけに、突然の削除でがっかりしてしまいます。そこで使ってみたいのがyoutube-toです。YouTube動画を動画または音楽ファイルにするソフトウェアです。## youtube-t...

None

  • 2017/10/17

Code Quality Checker - プログラムコードの品質チェッカー

コードの品質はどう判断したら良いでしょうか。幾つかの判断基準はあると思いますが、複雑さやコードの重複などは挙げられるでしょう。そうしたネガティブな要素が積み重なった結果、バグを含みやすくなると言うことはあると言えます。今回紹介するCode Quality Checkerはコードの品質チェックを行ってくれるソフトウェアで...

List

  • 2017/10/15

guiflow - 画面遷移を表現するUI Flowsエディタ

UI FlowsというのはRuby on Railsの開発元で知られるBasecampが考えたツールで、画面遷移を画面とアクションをシンプルに記述します。それらを矢印でつなぐことで、全体の画面遷移を分かりやすく管理できます。そんなUI FlowsをGUIで手軽に書けるようにしてくれるのがguiflowです。## gui...

List

  • 2017/10/15

Franchise - 多数のデータベースに対応したSQLノートブック

SQLを覚えると実務で使える様々なデータを取得できるようになります。毎回同じようなSQLを記述するのが面倒で、テキストファイルに定番のSQLをメモで残している方も多いのではないでしょうか。そんな方にお勧めなのがFranchiseです。SQLを残しておけるノートブックです。## Franchiseの使い方メイン画面です。...

None

  • 2017/10/14

strip-debug-cli - JavaScriptのコードからデバッグ系出力を取り除く

開発していてデバッグメッセージを出力させることはよくあります。そしてそのままリリースしてしまったりして、本番環境でもデバッグメッセージが出てしまうことがあります。これは恥ずかしいでしょう。そこで使ってみたいのがstrip-debug-cliです。コードの中からデバッグメッセージを見つけ出して除外してくれます。## st...

List

  • 2017/10/13

Terminal Kit - CLIのソフトウェアをパワーアップ

開発者向けのツールを開発する場合、GUIがない方が手軽で自動化も考えられるのでメリットがあります。しかしユーザビリティを考えるならばインジケータを付けたり、インタラクティブに入力がある方が良いでしょう。今回はそんなCLIツールを便利にしてくれる機能を満載したTerminal Kitを紹介します。## Terminal ...

List

  • 2017/10/12

Carbon - コードを綺麗な画像に変換

SDKやフレームワーク、ライブラリなどを公開しているサイトであれば大事なのは実際の使い方を示したコードでしょう。それもただテキストで書いてあるより、格好良いフォントや色合いで見せたいと思うはずです。そこで使ってみたいのがCarbonです。コードを格好良い画像にしてくれます。## Carbonの使い方実際に作成した画像で...

List

  • 2017/10/11

Draggable JS - HTML5のドラッグ&ドロップを多機能に

HTML5の新しい機能の一つにドラッグ&ドロップAPIがあります。Gmailなどでは当たり前になっていますし、WYSIWYGな機能を提供する上では必須の存在です。Webアプリケーションでは大事な機能でしょう。そんなドラッグ&ドロップAPIを多機能にしてくれるライブラリがDraggable JSです。## Draggab...

List

  • 2017/10/10

Animated_GIF - クライアントサイドでアニメーションGIFを生成

ここ数年でアニメーションGIFの価値が見直されています。動画とは違ってハイライト部分だけを取り上げていたり、何度も繰り返せるのが魅力になっています。動画は再生までの手間がありますが、アニメーションGIFは自動的に再生もできます。そんなアニメーションGIFをWebブラウザで操作できるのがAnimated_GIFです。##...

None

  • 2017/10/09

node-read - URLからメインコンテンツをピックアップ

オンラインにはテキストコンテンツが溢れています。問題はそうしたテキストコンテンツから意味のある情報をどう得るかです。HTMLタグを外しただけでは意味がありません。そこで使ってみたいのがnode-readです。メインコンテンツとおぼしき部分をピックアップしてくれるnode用ライブラリです。## node-readの使い方...

List

  • 2017/10/08

dokieli - Web上のコンテンツエディタ/コメントシステム

Web上にコンテンツを公開し、それに対して指摘が欲しいと思った時にはチャットなどを使うでしょう。できればWeb上でそのままコンテンツに書き込みができると便利です。それを可能にするのがdokieliです。コンテンツの編集やコメントに加えて様々な機能が備わっています。## dokieliの使い方デモです。右側にあるメニュー...

List

  • 2017/10/07

Chrome IG Story - InstagramストーリーをChrome上で楽しむ

Instagramが再成長しているように感じます。利用者が大幅に増えつつあり、インスタ映えなんて言葉も作られています。他のソーシャルサービスとの使い分けも行われているようです。そんなInstagramは基本的にスマートフォンアプリですが、ストーリーをChrome上で楽しめるようにしたのがChrome IG Storyで...

List

  • 2017/10/07

Slide Presentation Framework - HTMLスライドのフレームワーク

HTMLでプレゼンテーションを作るケースが増えています。HTMLであれば専用のソフトウェアを使わずに済み、バージョン管理も簡単です。さらにアニメーションなどは難しい分、逆にコンテンツに集中できるのが利点です。最近ではMarkdownベースのものが増えていますが、今回紹介するSlide Presentation Fram...

None

  • 2017/10/06

jsize - nodeパッケージのサイズをチェック&比較

JavaScriptのプロジェクトでは大抵ミニファイされた上で提供されます。3KBといってもミニファイし、GZipした上での数字だったりします。そうした中で採用するテクノロジーがどれくらいのサイズなのかを比較したいと思うことがあるでしょう。そこで使ってみたいのがjsizeです。npmパッケージのファイルサイズを比較でき...

List

  • 2017/10/05

src2png - ソースコードを画像に変換

ソースコードを埋め込んで表示してくれるサービスは多数ありますが、ブログによっては対応していないこともあります。さらにそもそもコードのシンタックスハイライト表示にも対応しておらず、コード表示が微妙になってしまうこともあります。そんな時にはsrc2pngを使ってみましょう。画像ではありますが、ソースコードを綺麗に表示してく...

List

  • 2017/10/04

favemoji.safariextension - なんと!SafariのタブにFaviconっぽく絵文字を表示

macOSのSafariはなぜかFaviconを表示してくれません。これは意外と不便です。そのためのAPIもないので拡張で対応するのも難しいようです。しかし世の中にはできないからといって諦めるのではなく、多少強引な手で解決する人たちがいます。今回紹介するfavemoji.safariextensionもその一つです。F...

List

  • 2017/10/04

FaviconBar - Safari用。Faviconでブックマークを管理

お気に入りのWebサイトであれば大抵Faviconを見ただけで判別ができますよね。であるにも関わらずSafariは頑なにFavicon表示に対応しようとしません。お気に入りバーはいつも文字でいっぱいになってしまいます。そこで使ってみたいのがFaviconBarです。普段のお気に入りバーとは別でFaviconベースのツー...

List

  • 2017/10/02

UI Recorder - node.js製のSelenium IDE代替

Selenium IDEが最新のFirefoxで動かなくなりました。これに伴い、新しいAPIで動くIDEも開発がスタートしたようですが、それを待つのも辛いでしょう。かといって旧バージョンを使い続けるのも問題です。そこで使ってみたいのがUI Recorderです。新しく登場したSelenium IDEライクなWebブラウ...

List

  • 2017/10/01

Nulis - 文章を書く人のためのツリーエディタ

文章を書くときにはまず構成を考える必要があります。章立てを考えて、その中で何を書くのかを順番に決めていきます。段階的に掘り下げていくことで、その中で何を書くべきかを明確にしていけるでしょう。そんな時に役立つのがNulisです。文章を書くためのツリーエディタです。## Nulisの使い方メイン画面です。幾つかのブロックに...

List

  • 2017/09/30

ドラえもんのタイトルジェネレーター - ドラえもんで脳内再生されるタイトル画像ジェネレータ

ドラえもんと言えば国民的アニメです。アニメやテレビは見ないという人でも、一度は最初のタイトルコールを見たことがあるのではないでしょうか。そして表示された文字がドラえもんの声で(世代によって分かれると思いますが)再生されることでしょう。そんなドラえもんのタイトルを生成してくれるソフトウェアがドラえもんのタイトルジェネレー...