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

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

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

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

もっと見る

List

  • 2017/09/06

SketchCode - オフラインで使えるJSFiddle/CodePen/JSBin代替

JSFiddleやCodePenなど、オンライン上でHTML/JavaScript/CSSを書いた結果をすぐに確認できるサービスがあります。非常に便利なサービスなのですが、インターネットに繋がっていないと使えないという欠点があります。そこで使ってみたいのがSketchCodeです。ローカルで利用でき、さらにGUIアプリ...

List

  • 2017/09/05

Docbase - Markdownから生成する開発者向けドキュメント

開発者向けのドキュメントはDX(Developer Experience。開発者体験)を語る上で欠かせない存在です。ドキュメントが間違っているのはもっての外ですが、さらに可読性が高かったり、機能面においても体験を向上できる要素があります。そんな中、メンテナンスのしやすさもまた大事な要素になります。今回はMarkdown...

List

  • 2017/09/04

Medis - Electron製のRedis管理インタフェース

キュー管理やKVSとしてRedisを使うケースが増えています。オンメモリのKVSながらデータの保存をサポートしているのも特徴で、データの永続化も可能と使い勝手良いシステムです。そんなRedisの管理インタフェースがMedisです。シンプルなUIで使い勝手が良いソフトウェアです。## Medisの使い方接続画面です。SS...

List

  • 2017/09/03

upterm - Electron製、21世紀のターミナル

ターミナルは何をお使いですか。個人的には色々試したのですが、結局macOS標準のTerminalでいいやと落ち着いてしまっています。iTerm2も有名ですが、普段使っている作業は殆どがサーバ上のことなので敢えて多機能である必要がなかったりします。しかしそんな前時代から進化しないものではなく、革新的なターミナルを試したい...

List

  • 2017/09/02

Chartkick.js - 多数のグラフに対応したラッパーライブラリ

Webシステムで一番苦労させられるのがグラフではないでしょうか。HTMLの表現力が上がったと言っても、コードを書かなければなりません。特にグラフやチャートになるとコード量も増えがちです。そこで使ってみたいのがChartkick.jsです。多くのパターンに対応したクライアントサイドのグラフライブラリです。## Chart...

List

  • 2017/09/02

CharCanvas.js - 計算処理を使ってアスキーアートを描画

アスキーアートを描くのは専用のエディタを使うほど、手間がかかる作業になります。記号を組み合わせてイラストを描きますのでペイントほど柔軟にはいきません。慣れるまでに相当な時間を要するでしょう。そこで使ってみたいのがCharCanvas.jsです。計算によってアスキーアートを作成します。## CharCanvas.jsの使...

List

  • 2017/09/01

PxView - React Native製のpixivブラウザ

多くの絵描きさんが集まっているpixiv。公式にもスマートフォンアプリは提供されていますが、自分好みじゃないという方もいるでしょう。特に広告などが入っていると気になってしまう人はいるでしょう。そんな方はPxViewを使ってみてはいかがでしょう。React Nativeで作られたAndorid/iOS用のpixivクライ...

List

  • 2017/09/01

openKB - node/MarkdownによるFAQシステム

Webは疑問を解消するのに使えますが、そのためには疑問(とその回答)をまずどこかに載せておく必要があります。最近ではQ&Aが人気ですが、それでもよくある質問についてはFAQのが役立つ場合があります。そこで使ってみたいのがopenKBです。自社のFAQシステムを構築するのに使えるでしょう。## openKBの使い方トップ...

None

  • 2017/08/31

markdownlint-cli - より良いMarkdownドキュメントを目指す

Markdownは柔軟な記法をサポートしています。なんとなく書いてもそれっぽく表示されます。しかし、会社などで何人もMarkdownを使うようになると一定の統一された基準が必要になるでしょう。そこで使ってみたいのがmarkdownlint-cliです。MarkdownのLintツールかつCLIになります。## mark...

List

  • 2017/08/31

CodeSandbox - Reactのオンラインプレイグラウンド

Reactの勉強をしたいと思ったとしても、環境の準備に色々と手間がかかっていたらやる気がなくなってしまうでしょう。その途中でエラーが出たり、nodeのバージョンが古いなどと警告が出たりしても萎えてしまいます。そこで使ってみたいのがCodeSandboxです。オンラインでReactの記述と実行ができるプレイグラウンドです...

List

  • 2017/08/30

Git Point - React Native製のGitHubクライアント

GitHubは単なるコードリポジトリサービスではありません。よく使っているプロジェクトの動向をチェックしたり、気になる開発者をフォローしたりできます。スターはちょっとした応援になります。そんなGitHubをiPhone/Androidの中で使えるGit Pointを紹介します。## Git Pointの使い方起動してG...

List

  • 2017/08/30

node dependencies view - nodeプロジェクトの依存性を可視化

nodeに限った話ではありませんが、各プログラミング言語では多くのライブラリを利用します。自分では一つしか使っていないつもりでも、そのライブラリが別なライブラリに依存し、そのライブラリがまた別な…と広がっていくのはよくある話です。そんなnodeプロジェクトの依存性を可視化してくれるのがnode dependencies...

List

  • 2017/08/28

octohint - GitHub上のコードでインテリセンスを提供

IDEを使う魅力の一つが関数や変数の説明を表示してくれるインテリセンスにあるのではないでしょうか。入力補完と異なり、すでに入力されているものに対して説明を付与してくれます。コードリーディングで非常に役立つでしょう。そんなインテリセンスをGitHub上のコードに対して提供してくれるのがoctohintになります。## o...

List

  • 2017/08/28

Web Audio Synth V2 - Web上でシンセサイザーを操作

HTML5によって新しく追加された技術にWeb Audioがあります。その名の通り、Web上で音楽を奏でるためのAPIですが、利用が難しいものとなっています。だからこそ使いこなすと凄いソフトウェアができます。今回紹介するWeb Audio Synth V2はまさにWeb Audioを使い、シンセサイザーを作り上げてしま...

List

  • 2017/08/27

gtop - ターミナル上のシステムダッシュボード

システム管理者はシステム全体のステータスを把握する必要があります。そのためにサーバ側データを送信して可視化するダッシュボードソフトウェアがたくさんあります。しかしデータをあえて飛ばすことなく、ターミナル上でそのまま確認できるのがgtopです。## gtopの使い方メイン画面です。!

List

  • 2017/08/27

CSS Grid Highlighter for Chrome - CSS Gridをハイライト表示するChrome機能拡張

レスポンシブWebデザインの広がりに合わせて利用が広がっているのがグリッドベースのデザインです。そんな中、ついに登場したのがCSS Gridになります。Web標準だけで手軽にグリッドデザインが実現できるようになりました。そんなCSS Gridもまだまだ普及していない技術だけに手探り感があります。そこで使ってみたいのがC...

List

  • 2017/08/26

RichText - シンプルなWYSIWYGエディタ

自分の見たままに編集する、いわゆるWYSIWYGな環境を提供するソフトウェアは開発者以外の方には必須のソフトウェアです。Markdownがいかに分かりやすい記法とは言え、開発者以外の方には使いづらいはずです。今回はjQueryプラグインのRichTextを紹介します。シンプルなデザインのWYSIWYGエディタとなってい...

List

  • 2017/08/24

image-compressor - Webブラウザ上で画像圧縮

スマートフォンのカメラの性能が大幅に向上し、1ファイルのサイズが肥大化する傾向にあります。JPEGなのである程度圧縮がかかっているものの、それでも数MBあったりします。ブログなどで使うのであれば、正直そこまでの品質や画像の大きさは不要でしょう。そこで使ってみたいのがimage-compressorです。Webブラウザベ...

List

  • 2017/08/23

Kantu Browser Automation - Google Chromeの操作を記録して自動再生

Webブラウザを自動操作したいというニーズはよくあります。同じような操作を繰り返す場合や、Webブラウザを使ったテストなども同様です。そのため、Seleniumやヘッドレスブラウザ系のソフトウェアが幾つも存在します。今回はGoogle Chrome機能拡張として提供されるKantu Browser Automation...

List

  • 2017/08/23

Authenticator - Google Chrome機能拡張として動作する二段階認証アプリ

二段階認証は使っているでしょうか。方法は幾つかありますが、一番多いのはスマートフォンを使ったものではないかと思います。しかし毎回スマートフォンで表示された数字を入力するのは面倒です。そこで使ってみたいのがAuthenticatorです。Google Chrome機能拡張として動作する二段階認証アプリです。## Auth...