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

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

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

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

もっと見る

List

  • 2020/07/05

Color Copy Paste - リアルの物体から色情報を取得

任意の場所から色情報を取得してくれるカラーピッカーは便利な機能です。Webブラウザでも使っていますし、プレゼン作成ソフトウェアや画像編集ソフトウェアでもよく使います。今回紹介するColor Copy Pasteはそんなカラーピッカーソフトウェアなのですが、抽出する対象が異なります。それはリアルの物から色情報を取得するの...

List

  • 2020/07/03

MapGenerator - 空想のリアルな地図を生成

ゲームや小説などで街の地図が欲しくなることがあります。現実のものを使ってもいいですが、地図サービスのデータは著作権が関わってきます。それに現実のものでは創造性が阻害されてしまうかも知れません。そこで使ってみたいのがMapGeneratorです。架空の地図を自動生成してくれるソフトウェアです。## MapGenerato...

List

  • 2020/06/29

RoughNotation - ラフな感じに仕上がる注釈ライブラリ

コンピュータで直線や綺麗な真円を書くのは簡単です。逆に手書きのような乱れた線を書いたりするのは不得意です。しかし正確な描画は、ちょっとしたズレが気になったり、執拗に整えようとして時間を無駄にしてしまいがちです。そこで参考にしたいのがRoughNotationです。いわゆる注釈ツールなのですが、ラフな感じに描けるのが特徴...

None

  • 2020/06/27

AskQL - 次世代のWeb API用クエリ言語

Web APIの歴史としてはREST APIが大きな転換期になったと思われます。10年以上に渡って使われ続けていますが、徐々に向き不向きが出てきました。そんな中、ここ数年はGraphQLに注目が集まっています。今回紹介するのはさらに次世代のWeb APIともいえそうなAskQLを紹介します。askを冠につけたクエリ言語...

List

  • 2020/06/23

Asteroid - JavaScriptの実行環境を備えたMarkdownエディタ

Markdownをコンテンツとして利用しているWebサイトが増えています。HTMLに比べれば簡易的な記法ですし、知らずに書いても決して読めないものにはならないでしょう。そして素のMarkdownエディタだけでなく、ちょっとした付加価値を追加したものも多数作られています。今回紹介するAsteroidはMarkdownエデ...

List

  • 2020/06/22

Selecto.js - Web上でドラッグで選択するUXを実現

Webアプリケーションが広く使われるようになり、さもローカルアプリケーションと同じように操作できるようになっています。しかし、デスクトップの操作に近づけば近づくほど、ちょっとした操作性の違いに違和感を感じるようになります。今回はドラッグして選択する操作をサポートするSelecto.jsを紹介します。この操作、デスクトッ...

List

  • 2020/06/17

Dark Reader - 任意のWebサイトをダークモードで表示

ダークモードに対応したサイトが増えてきています。多くは自動的に設定されたり、設定画面を使って自分で切り替えるようになっています。しかし、まだまだ未対応のサイトが多いのも事実です。そこで使ってみたいのがDark Readerです。任意のWebサイトをダークモード対応にします。## Dark Readerの使い方MOONG...

List

  • 2020/06/12

Virtual Reality DOS - VRの中でDOSに触れる

DOSの懐かしい世界に戻りたいと思ったことはないでしょうか。今でこそOSはGUIがあって、マウスを使うのが当たり前ですが、かつてはCUI、ブルーや黒の世界で動かすのが当たり前でした。そんな昔懐かしいDOSの世界に浸ってみたい方はVirtual Reality DOSを使ってみましょう。## Virtual Realit...

None

  • 2020/06/08

Deno - nodeの課題を解決する新しいJavaScriptランタイム

nodeを開発したRyan Dahl氏は、その開発過程において様々な課題点が含まれてしまったとしています。パッケージ管理やasync/await、セキュリティ面などで改善すべき点が多いと語っています。そうした課題を解決すべく開発されているのがDenoになります。"node".split

List

  • 2020/06/04

AC Flower Planner - Web上で花壇のプランニング

手戻りはなるべく避けた方がいいでしょう。多くの場合、手戻りのコストは実行よりも大きいものです。シミュレーションできる場があれば、まずはそこで試すべきです。何度も試し、最善と思える形になったら実行するのです。今回紹介するAC Flower Plannerは、花壇のプランニングツールです。同じような仕組みは他でも流用できそ...

List

  • 2020/06/01

React Flow - Reactでノード型インタフェースを実装する

ノード同士を連結するインタフェースは色々な場面で使えます。ビジュアルプログラミングであったり、マインドマップのような思考整理、ノーコーディングプラットフォームでも使えるでしょう。そうしたノードベースのビジュアルインタフェースを作る際に使えるのがReact Flowです。Reactで開発する際に便利でしょう。## Rea...

None

  • 2020/05/26

kmdr - コマンドの実行内容を教えてくれるCLI

開発者であれば、ターミナルを使って各種コマンドを入力するかと思います。コマンドを探す際に、Webで検索する人も多いでしょう。そんな時、各種オプションがすでに付いており、それぞれの説明がないために何となく実行してしまったりしていないでしょうか。きちんと把握していないコマンドを打つ際に使ってみて欲しいのがkmdrです。実行...

List

  • 2020/05/25

LightProxy - ネットワークをキャプチャ。Web開発用プロキシ

Webアプリケーションやスマートフォンアプリの開発時に、ネットワークのやり取りを確認したいことがあります。その手のソフトウェアとしてCharlesが知られていますが、有償であるために避けている人もいるかも知れません。そんな方に使ってみて欲しいのはLightProxyになります。Charles同様、ネットワークをキャプチ...

List

  • 2020/05/18

PWA install - PWAインストール体験を向上させる

PWA(Progressive Web Apps)ではWebアプリケーションをローカルアプリのようにインストールできます。しかし、ユーザとしてはインストールするメリットが見えないとインストールしてくれないでしょう。そこで使ってみたいのがPWA installです。ユーザがインストールしたくなるように促せるウィザードライ...

List

  • 2020/05/17

midori - 背景画像を格好よくアニメーション

画像をただ表示して終わりでは印象に残りづらいです。しかし、JavaScriptやCSSでちょっとアニメーションさせるだけでもインパクトが大きく違います。さらにエフェクトまで行われれば、さらに印象深くなります。今回紹介するmidoriはまさにそのためのライブラリになります。画像の切り替え時にアニメーションやエフェクトを行...

List

  • 2020/05/17

PDF-LIB - JavaScriptでPDFを作成、更新

Web上で扱うことも多いPDF。ただドキュメントとして表示するだけで、あえてJavaScriptから操作することは殆どないでしょう。しかし、JavaScriptとPDFが連携できるようになれば、もっと可能性が広がりそうです。今回紹介するPDF-LIBはWebブラウザ、nodeのどちらからでも操作できるPDFライブラリで...

List

  • 2020/05/11

Fishbowl - みんなで遊べるジェスチャーゲーム

Fishbowlというのは一種のジェスチャーゲームのようなものです。ルールは簡単にいえば、一人3つずつ単語やフレーズを書き出します(アイスクリームなど)。それを一カ所に集め(ここが金魚鉢)、2つのチームに分かれます。各チーム代表者が紙を引いて、その単語を口に出さずにチームメイトに説明します(暑い日に食べる冷たいもの、な...

List

  • 2020/05/08

Audio DSL - AudioWorkletを手軽に扱えるDSL

Web AudioはWebブラウザ上で音楽を扱えるAPIですが、処理をメインスレッドで行う必要があります。それに対してAudioWorkletはオーディオ処理に特化したWorkerで、バックグラウンドで音声処理が可能になります。しかしオーディオ自体の処理は複雑なイメージがあります。そうした処理をDSLでシンプルにしてく...

List

  • 2020/05/03

Nautilus - Docker Composeの設定を可視化

開発時にDockerを利用している開発現場は多いでしょう。そして、複数のコンテナを組み合わせる場合、Docker Composeを使って管理しているのではないでしょうか。Docker Composeの設定を細かくこだわると、徐々に複雑なものになっていきます。そこで使ってみたいのがNautilusです。Docker Co...