プログラミング言語 - JavaScriptの記事一覧
Chrome Extension CLI - Google Chrome機能拡張開発を強力にサポート
Google Chrome機能拡張を使えばWebブラウザがさらに便利になります。普段物足りない、痒いところに手が届かないと感じているなら自分で機能拡張を作ってしまいましょう。しかし作り方を一から学ぶのは面倒ですよね。そこで使ってみたいのがChrome Extension CLIです。Google Chrome機能拡張作...
ReportBro - Web上で帳票をデザイン
レポートは生成するのも大変で、さらにそのデザインを行うのも大変です。デザインをコーディングしてしまうと、ちょっとした修正でも手間になります。その結果、専用のツールやExcelでテンプレートを作れるようにするでしょう。今回はWebブラウザ上でレポートのテンプレートが作れるReportBroを紹介します。## Report...
PlainDraggable - SVG/DOMのドラッグ&ドロップライブラリ
Webアプリケーションが多機能になるにつれて、ローカルアプリケーションライクな操作が求められるようになっています。例えばドラッグ&ドロップはローカルアプリケーションであれば良くある操作と言えます。そんなドラッグ&ドロップをスムーズに行えるライブラリがPlainDraggableです。## PlainDraggableの...
Rainmap - 現在の降雨情報を地図に表示
最近の台風や水害によって天気を見る癖がついてしまった人は多いでしょう。明日の天気はまだまだ精度が低いように思いますが、現在の天候を使って5分後から数時間後くらいの天気であればかなり精度の高い予測ができるようになっています。今どこで雨が降っているのか、知りたい人はRainmapを見てみましょう。## Rainmapの使い...
hterm - Chromeアプリとして動作するターミナルエミュレータ
開発者であればターミナルを使う機会が多いですが、そうでない場合は時々しか使わないでしょう。そのためにソフトウェアをインストールしても使い方を忘れてしまったり、そもそもインストールしたことを忘れてしまうかも知れません。そんな方に使ってみて欲しいのがhtermです。Google Chromeアプリとしてｔインストールするの...
darkmodejs - ライト/ダークモードをWebブラウザでも認識
最近のOSではダークモードが導入されています。時間によって変わることもできれば、単に暗めのUIが好きという人も選択できます。開発者であればダークモードを好む人も多いでしょう。そんな中、ダークモードなのにWebサイトが明るいままだと興ざめです。解決してくれるライブラリとしてdarkmodejsを紹介します。## dark...
uPlot - 大量のデータを高速に描画するグラフライブラリ
チャートライブラリに求められるニーズはたくさんあります。使えるグラフの種類が多いこと、カスタマイズが容易なこと、リアルタイムデータにも使えることなどなどです。すべてをまかなえるライブラリは多くないので、目的に合わせてライブラリを使い分けるのが良いでしょう。今回紹介するuPlotはとにかく大量のデータを即座に表示したいと...
Bullshit.js - よく分からない単語は見ない
開発者にとって、マーケターであったり経営者の話している内容はさっぱり分からないことがあります。そのため、彼らが登壇して語りかけても意味が通じず、心に刺さりません。そんな状況を端的に表しているのがBullshit.jsです。分かりづらい単語を理解できるものにしてくれます。## Bullshit.jsの使い方変換前です。!
newsroom - ニュースを手軽にチェックできるコマンド
インターネットを使うことで世界中から情報を入手できますが、それが膨大な量になってしまって情報過多に陥っています。常に収集するのではなく、必要なタイミングでチェックするくらいでも十分と言えそうです。そこで使ってみたいのがnewsroomです。CUIで使えるニュースリーダーです。## newsroomの使い方実行すると、ま...
roughViz - 手書きのようなラフなグラフを描く
正確に書かれた図は見やすいものですが、かしこまった雰囲気が出てしまいます。モックアップのレベルであまり正確なものを作るとデザイン上の些細な部分にこだわりはじめてしまうのでお勧めできません。そこで使ってみたいのがroughVizです。手で書いたような乱雑なグラフが描けるライブラリです。## roughVizの使い方棒グラ...
WebAssembly.sh - WebAssembly製のWebターミナル
Webブラウザでも十分ターミナルが実装できるようになってきました。あえて専用のソフトウェアをインストールする必要もなく、すぐにサーバにアクセスできます。公開鍵認証などは多少面倒ですが、十分使えるレベルです。今回紹介するWebAssembly.shもそんなターミナルの一つですが、WebAssemblyで作られており、PW...
s3st - Amazon S3にある複数オブジェクトの内容を標準出力
システムのログをAmazon S3に保存しているという会社は多いかと思います。そして、そのログの中で特定のメッセージが来たら分かるようにしたいというワークフローは多いでしょう。定型化されればシステムを組んでも良いですが、都度変わる場合にはデータをダウンロードして検索して…といった手間暇をかける必要があります。そこで使っ...
jsoff - JavaScriptオンオフを切り替えるGoogle Chrome機能拡張
JavaScriptが高機能化し、もはやJavaScriptを使っていないWebサイトが見当たらないくらいです。しかし、だからこそJavaScriptをオフにした状態でどう表示されるのか気になることがあります。Google ChromeでJavaScriptをオフにするのは開発者ツールを使わないといけないですが、jso...
Mini Tokyo - 電車の動きを地図にマッピング
都内では毎日たくさんの電車が動き続けています。数分おきに厳密な時間管理に基づいて動き続けるのは有機的ですらあります。それを殆ど事故なく稼働し続けるのは奇跡的とすら言えるでしょう。そんな公共交通機関のデータを実際の地図上にマッピングしたのがMini Tokyoです。## Mini Tokyoの使い方メイン画面です。地図上...
GrapesJS MJML - Web上でHTMLメールをオーサリング
メールマーケティングにおいて、HTMLメールを利用する機会が多くなっていますが、使い勝手はWebでHTMLを表示するのとは多少異なります。さらにレスポンシブなフォーマットに対応させるのは大変です。そんなHTMLメール用に作られたマークアップとしてMJMLがありますが、そのMJMLを使ってWeb上でオーサリングできるのが...
Jekyll Admin - Jekyll用のWeb管理画面
個人的に最近利用が多いJekyll。GitHub Pagesが標準で対応してくれていることもあって、JekyllベースでWebサイトを構築することが多いです。そんなJekyllでちょっと面倒なのが、データ管理がすべてローカルOSのファイル管理頼りなことでしょう（それが良さでもあるのですが）。そこで使ってみたいのがJek...
jsmind - Webベースのマインドマッピング
マインドマッピングは考えを整理するのに便利なツールです。人によって会議の内容をマインドマッピングでまとめていたり、ブレインストーミング側に使ったりします。いずれにしても思考を広げるのに使えます。そんなマインドマッピングをWeb上でできるようにするのがjsmindです。## jsmindの使い方メイン画面です。!
ASS.js - 動画に字幕を表示
英語や中国語など、他言語で流れる動画には字幕が欲しいものでしょう。YouTubeやNetflixなど動画配信サイトでは字幕の表示、非表示を切り替えられます。あんな機能が欲しいと思ったことはないでしょうか。今回紹介するASS.jsはHTML5のvideoタグに対してASSフォーマットの字幕を表示できるライブラリです。##...
upload.express - React製のファイル共有サービス
インターネットを通じたファイル共有サービスはたくさんあります。日本でも幾つかあり、ビジネスでも使われていたりします（ユーザ情報漏洩して炎上したりもしていましたが）。それだけ需要が大きい分野なのでしょう。今回紹介するupload.expressはそんなファイル共有サービスの一つです。UIでReactを採用し、モダンな作り...
SeaPig - 多彩な図形埋め込みに対応したMarkdownエディタ
Markdownは開発者にとってデファクトスタンダードと言えるフォーマットになっています。そうなるとたくさんのエディタが生まれます。その中には独自の拡張を追加して、標準のMarkdownでは物足りない機能を補うことでしょう。今回紹介するSeaPigもそんなMarkdownエディタの一つです。チャートを書くことの多いプロ...