プログラミング言語 - TypeScriptの記事一覧
Screenshot.Rocks - スクリーンショットを使ってWebブラウザのモックアップを作成
スクリーンショットをそのまま貼り付けるだけでは芸がありません。そこには余計な情報も入ってしまっているかも知れませんし、アイコンなどを消したいと思うこともあります。そんな時に使ってみたいのがScreenshot.Rocksです。Webブラウザのモックアップを使ったスクリーンショットを作成します。## Screenshot...
Trex - deno用のパッケージ管理
新しいJavaScript実行環境であるdenoでは、パッケージ管理を行いません。ネットワーク上からのファイルも読み込み可能で、実行時に取得します。これは便利な仕組みですが、場合によってはパッケージ管理したいでしょう（特にバージョンを固定化したい、キャッシュしたい場合など）。そこで使えるのがTrexです。JSONファイ...
Noodel.js - ダイナミックなコンテンツをスムーズに閲覧
Webページは上から下へ、縦スクロールで辿るのが一般的です。しかし、それが最適ではないコンテンツもあるでしょう。例えばドリルダウンしていくコンテンツの場合、縦よりも横の方が合っているかも知れません。今回紹介するNoodel.jsはマウスやキーボードを組み合わせて使えるダイナミックコンテンツ用ライブラリです。## Noo...
SVGuitar - SVGでギターコードを表示
ギターはコードを覚えて弾き方をマスターしていきます。今はオンライン上にもたくさんのギターコードがアップロードされています。しかし、表示形式が特殊なので、画像でできているものが殆どです。画像の場合、別なコードを作成したり、修正するのも面倒です。そこで使ってみたいのがSVGuitarです。## SVGuitarの使い方左側...
Grid.js - React/Angular/VueをサポートしたHTMLテーブルライブラリ
HTMLで使ってデータをテーブル表示するのは簡単です。しかし、ちょっとUIをよくしたり、ソートなどの機能を追加しようと思うと、途端に面倒になります。素のHTMLのままではとても使い勝手がいいとはいえません。そんなHTMLテーブルを手軽に高機能化してくれるライブラリがGrid.jsになります。## Grid.jsの使い方...
Excalidraw Claymate - Excalidrawを使ったアニメーション作成ソフトウェア
教科書や書籍の端っこでパラパラ漫画を書いた経験は多くの人があるはずです。その際には前の絵とちょっとだけずらして書いていくのがポイントになります。ちょっとずつずらして書くのを繰り返すことで、一気にページをめくると動いて見えるようになります。そんなパラパラ漫画風のアニメーションGIFを作れるのがExcalidraw Cla...
Color Copy Paste - リアルの物体から色情報を取得
任意の場所から色情報を取得してくれるカラーピッカーは便利な機能です。Webブラウザでも使っていますし、プレゼン作成ソフトウェアや画像編集ソフトウェアでもよく使います。今回紹介するColor Copy Pasteはそんなカラーピッカーソフトウェアなのですが、抽出する対象が異なります。それはリアルの物から色情報を取得するの...
MapGenerator - 空想のリアルな地図を生成
ゲームや小説などで街の地図が欲しくなることがあります。現実のものを使ってもいいですが、地図サービスのデータは著作権が関わってきます。それに現実のものでは創造性が阻害されてしまうかも知れません。そこで使ってみたいのがMapGeneratorです。架空の地図を自動生成してくれるソフトウェアです。## MapGenerato...
RoughNotation - ラフな感じに仕上がる注釈ライブラリ
コンピュータで直線や綺麗な真円を書くのは簡単です。逆に手書きのような乱れた線を書いたりするのは不得意です。しかし正確な描画は、ちょっとしたズレが気になったり、執拗に整えようとして時間を無駄にしてしまいがちです。そこで参考にしたいのがRoughNotationです。いわゆる注釈ツールなのですが、ラフな感じに描けるのが特徴...
AskQL - 次世代のWeb API用クエリ言語
Web APIの歴史としてはREST APIが大きな転換期になったと思われます。10年以上に渡って使われ続けていますが、徐々に向き不向きが出てきました。そんな中、ここ数年はGraphQLに注目が集まっています。今回紹介するのはさらに次世代のWeb APIともいえそうなAskQLを紹介します。askを冠につけたクエリ言語...
Asteroid - JavaScriptの実行環境を備えたMarkdownエディタ
Markdownをコンテンツとして利用しているWebサイトが増えています。HTMLに比べれば簡易的な記法ですし、知らずに書いても決して読めないものにはならないでしょう。そして素のMarkdownエディタだけでなく、ちょっとした付加価値を追加したものも多数作られています。今回紹介するAsteroidはMarkdownエデ...
Selecto.js - Web上でドラッグで選択するUXを実現
Webアプリケーションが広く使われるようになり、さもローカルアプリケーションと同じように操作できるようになっています。しかし、デスクトップの操作に近づけば近づくほど、ちょっとした操作性の違いに違和感を感じるようになります。今回はドラッグして選択する操作をサポートするSelecto.jsを紹介します。この操作、デスクトッ...
Dark Reader - 任意のWebサイトをダークモードで表示
ダークモードに対応したサイトが増えてきています。多くは自動的に設定されたり、設定画面を使って自分で切り替えるようになっています。しかし、まだまだ未対応のサイトが多いのも事実です。そこで使ってみたいのがDark Readerです。任意のWebサイトをダークモード対応にします。## Dark Readerの使い方MOONG...
Virtual Reality DOS - VRの中でDOSに触れる
DOSの懐かしい世界に戻りたいと思ったことはないでしょうか。今でこそOSはGUIがあって、マウスを使うのが当たり前ですが、かつてはCUI、ブルーや黒の世界で動かすのが当たり前でした。そんな昔懐かしいDOSの世界に浸ってみたい方はVirtual Reality DOSを使ってみましょう。## Virtual Realit...
Deno - nodeの課題を解決する新しいJavaScriptランタイム
nodeを開発したRyan Dahl氏は、その開発過程において様々な課題点が含まれてしまったとしています。パッケージ管理やasync/await、セキュリティ面などで改善すべき点が多いと語っています。そうした課題を解決すべく開発されているのがDenoになります。"node".split
AC Flower Planner - Web上で花壇のプランニング
手戻りはなるべく避けた方がいいでしょう。多くの場合、手戻りのコストは実行よりも大きいものです。シミュレーションできる場があれば、まずはそこで試すべきです。何度も試し、最善と思える形になったら実行するのです。今回紹介するAC Flower Plannerは、花壇のプランニングツールです。同じような仕組みは他でも流用できそ...
React Flow - Reactでノード型インタフェースを実装する
ノード同士を連結するインタフェースは色々な場面で使えます。ビジュアルプログラミングであったり、マインドマップのような思考整理、ノーコーディングプラットフォームでも使えるでしょう。そうしたノードベースのビジュアルインタフェースを作る際に使えるのがReact Flowです。Reactで開発する際に便利でしょう。## Rea...
kmdr - コマンドの実行内容を教えてくれるCLI
開発者であれば、ターミナルを使って各種コマンドを入力するかと思います。コマンドを探す際に、Webで検索する人も多いでしょう。そんな時、各種オプションがすでに付いており、それぞれの説明がないために何となく実行してしまったりしていないでしょうか。きちんと把握していないコマンドを打つ際に使ってみて欲しいのがkmdrです。実行...
LightProxy - ネットワークをキャプチャ。Web開発用プロキシ
Webアプリケーションやスマートフォンアプリの開発時に、ネットワークのやり取りを確認したいことがあります。その手のソフトウェアとしてCharlesが知られていますが、有償であるために避けている人もいるかも知れません。そんな方に使ってみて欲しいのはLightProxyになります。Charles同様、ネットワークをキャプチ...