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

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

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

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

もっと見る

List

  • 2018/02/25

life-commit - Gitのように人生を記録する

時間は止めようがなく、気付かない間にもどんどん流れていってしまいます。それを留めておくためには日記を書いたり、写真を撮ったりして活動を記録しておかなければなりません。後で振り返ろうと思っても、何の記録もしていないとおぼろげになってしまうでしょう。そこで使ってみたいのがlife-commitです。生活の上での思い出深い出...

List

  • 2018/02/25

Winamp2-js - Webベースで蘇るWinamp

Winampと言えばMP3が出始めた頃に一世を風靡したMP3プレイヤーです。軽快に動作し、MP3ファイルをたくさん登録して音楽を聴いていた方も多いのではないでしょうか。今では多数の音楽プレイヤーがありますが、影響を受けたものも多いはずです。そんなWinampをJavaScriptで再現してしまったのがWinamp2-j...

List

  • 2018/02/24

Abricotine - インラインプレビューのMarkdownエディタ

Markdownエディタは何を使っているでしょうか。多くは2ペインのエディタで、左側で編集して右側でプレビューするタイプではないでしょうか。編集範囲が狭くなってしまうので、あまり長文を書くのには向いていないように見えます。そこで使ってみたいのがAbricotineです。インラインでMarkdown記法が表示されるソフト...

List

  • 2018/02/21

Regexper - JavaScriptの正規表現を可視化

正規表現は慣れないと分かりづらいものです。また、複雑なものを作ってしまうと、作った時は良くとも、後でメンテナンスができなくなってしまいます。正規表現のデバッグも困難で、どう判定されているのか理解するのに時間を要するでしょう。そこで使ってみたいのがRegexperです。Web上で正規表現を可視化してくれます。## Reg...

List

  • 2018/02/21

Katamuki.js - テキストや画像を滑らかに表示

WindowsのWebブラウザはmacOSに比べて文字が汚いです。綺麗に表示しようと思うとWeb Fontを使うのが一般的ですが、日本語フォントは文字数が多いので重たくなってしまったり、動的に生成するクラウドエンジンを使う必要があります。そこで手軽にJavaScriptだけで文字や画像を綺麗にしてくれるのがKatamu...

List

  • 2018/02/20

SimpleMDE - シンプルなMarkdownエディタ

Markdownのシェアが広まるのに合わせて、より慣れていない人たちが使いやすくなる環境が必要になっています。WYSIWYGで入力支援できるツールはもちろんのこと、プレビューなども必要です。今回紹介するSimpleMDEはシンプルなUIのMarkdownエディタになります。決して多機能ではありませんが十分なエディタとな...

List

  • 2018/02/20

convForm - インタラクティブなチャットUIを実現するjQueryプラグイン

最近はAIを使ったチャットボットが流行です。ウィザード形式で言われるままに答えるのではなく、自然言語で対話しながらステップを踏んでいけるのが特徴です。そのためにチャット形式のUIがよく使われています。今回紹介するconvFormはそんなチャット形式のUIを手軽に実装できるjQueryプラグインになります。## conv...

List

  • 2018/02/19

Reacteroids - React製のアステロイド

新しい言語やフレームワークを覚えるのに、まず何か作ってみるのはお勧めです。書籍を見るだけでなく、実際に手を動かしてみると分かることがたくさんあります。脳の刺激にもなり、記憶定着に役立つでしょう。今回紹介するのはReacteroids、Reactを使ったアステロイドです。## Reacteroidsの使い方ゲーム画面です...

List

  • 2018/02/18

ReForum - React × MongoDBの掲示板

掲示板はインターネット黎明期の頃から存在しました。今でも某巨大掲示板をはじめとして、掲示板システムは健在です。チャットと異なり、多少の非同期感がちょうど良く、多くの人たちによって日夜会話が続いています。そんな掲示板システムの最新版としてReForumを紹介します。Reactを使った先鋭的な掲示板となっています。## R...

List

  • 2018/02/17

BootLeaf - Bootstrap/Leafletを使った地図テンプレート

地図とWebは相性が良いです。移動中に地図を見たいと思うことは多いですし、旅行や出張前に計画を立てる上でも地図が必要です。それもあり、Googleマップをマッシュアップする地図サービスは無数に存在します。今回紹介するBootLeafはそんな地図マッシュアップのベースになるようなソフトウェアです。様々な情報を地図に載せや...

List

  • 2018/02/16

GitHub Pull Request Tree - GitHubのPRを確認しやすく

GitHubのPull Request(以下PR)はオープンソースとして外部の方に開発へ参加してもらうのに良い仕組みです。企業においてはチーム開発を支える大切な技術です。しかし大きなソフトウェアになると、PRがどのファイルを指しているのか分かりづらくなります。特にフォルダで区別してファイル名は同じものが並んでいる時など...

List

  • 2018/02/15

SQLECTRON - MySQL/PostgreSQLに対応したターミナル用データベースクライアント

WebであればphpMyAdminやphpPgAdminといったデータベース管理が使われることが多いですが、ターミナルの場合はどうでしょう。それぞれ別なクライアントソフトウェアを使って、独自のコマンドも覚えないといけません。そこで使ってみたいのがSQLECTRONです。MySQL/PostgreSQLに対応したシンプル...

List

  • 2018/02/14

WildDuck - Gmailのデザインを模したWebメーラー

Webブラウザが多機能になるにつれて、多くのアプリケーションがWeb化しています。その先進とも言えるのがWebメーラーではないかと思います。元々Webブラウザ向けにメール機能を提供するサービスは多かったですが、Gmailによって爆発的に広がっています。そんなWebメーラーの最新版がWildDuckです。Gmailのデザ...

List

  • 2018/02/13

DepthKit.js - 奥行きをもった動画を再生

従来のコンピュータでは平面の情報を取り扱うだけでしたが、最近では奥行きを数値化するのがトレンドです。それによってARやVR、MRといった分野に活かされたり、3Dがより本格的に楽しめるようになります。そんな奥行きを計測するデモを紹介します。Three.jsと組み合わせたDepthKit.jsです。## DepthKit....

List

  • 2018/02/10

Kuker - React/Angular/Vue開発用デバッガー

最近のフロントエンド界隈でのトレンドはVirtualDOMです。これまで苦労してきたDOMのステータス変更を気にすることなく、サーバサイドのようにレンダリングできるようになる技術です。しかし、その結果として通常のJavaScriptよりもデバッグしづらくなっています。そこで使ってみて欲しいのがKukerです。各種Vir...

List

  • 2018/02/10

Analog Film Emulator - フィルムで撮影したような写真に加工

西洋の風景画が廃れた原因の一つにカメラがあります。ただ目の前の情景をそのまま写し取るのであれば、カメラの方が正確です。さらにそんなカメラでもフィルム式は廃られており、枚数がほぼ無制限なデジタルに移り変わっています。とは言え、今なおフィルムの味のある撮れ方が好きという方はたくさんいます。そうした方に触れてみて欲しいのがA...

List

  • 2018/02/09

mono-wasm - C#から WebAssemblyを作る

WebAssemblyを記述できるのはC/C++/Rustだけだと思っていないでしょうか。実はLLVMにさえなれば、他の言語でも記述できます。そのため、やろうと思えばSwiftから作ることもできるそうです。そこで注目したいのがmono-wasmです。Monoを使ってC#で記述された内容を WebAssembly にする...

List

  • 2018/02/03

jspaint - 懐かしのペイントをWebアプリケーション化

昔のソフトウェアであっても、別な言語や別な環境で実行できると新しい魅力に出会うことがあります。最近であれば、ローカルOSで動いていたソフトウェアをWebアプリケーション化するだけでも面白いです。今回はWindowsではお馴染みのペイントをWebアプリケーション化したjspaintを紹介します。## jspaintの使い...

None

  • 2018/02/03

detect-es - ESnextのコード有無をチェック

旧来のJavaScriptは変数のスコープに問題があったり、クラスをサポートしていないなど大きなWebアプリケーションを作るには不向きな言語でした。しかし現在はPromiseやクラス、Proxyなど多彩な機能が追加されています。これらはESnextと呼ばれる仕様で、すべてのWebブラウザで間違いなく使える訳ではありませ...

List

  • 2018/02/01

mind - node/JavaScript製のニューラルネットワークライブラリ

ディープラーニングはここ数年人気の高い技術ですが、技術の基礎は理解しつつもそれをコードレベルで表現するのはとても難しいでしょう。そして、そのためのライブラリは多数出てきています。もしWebブラウザ上で手軽に試したいのであればmindを使ってみてください。## mindの使い方こちらはデモです。映画を10本、レーティング...