プログラミング言語 - JavaScriptの記事一覧
Quotebacks - コンテンツ引用をしやすくするGoogle Chrome機能拡張
Webはページ同士がリンクで繋がって構成されています。その際、単にURLを付けるだけでもいいですし、内容を引用することもできます。引用を使うことで、リンク先の内容が分かりやすくなり、誘導につなげることができます。今回紹介するQuotebacksはそんな引用をしやすくするGoogle Chrome機能拡張になります。##...
tubuler - 簡単に使えるyoutube-dlのGUIラッパー
YouTube動画をダウンロードしておきたいと思ったことはないでしょうか。誰かがアップロードした動画は常にあるとは限りません。いつ消えてしまうか分からないだけに、手元に残しておきたい場合もあるはずです。そこで使えるのがyoutube-dlですが、CLIなので人によっては使いづらいでしょう。そこで使えるのがtubuler...
Notence - Markdownとカンバンをサポートしたノートアプリ
メモを取る用のノートアプリはどんなものを使っているでしょうか。普段使っているテキストエディタをそのまま利用している人も多いはずです。しかしテキストエディタでは記述できるフォーマットに限界があるのが問題です。今回紹介するNotenceはリストとカンバン、二つの記述方法をサポートしたノートアプリになります。## Noten...
WiFi Login Card - WiFi接続情報を載せたカードを作成
コワーキングスペースやイベント会場に行くとWiFiのSSIDとパスワードが書かれた紙があります。それを入力しないとインターネットにつなげられないので、とてもアナログな操作が求められます。これはとても面倒です。そこで使ってみたいのがWiFi Login Cardです。WiFiの接続情報を記述したQRコードを手軽に作成して...
passmass - ストレージレスなパスワード管理
パスワード管理は何を使っているでしょうか。1Password、LastPassなどクラウドサービスやオープンソース・ソフトウェアなど多種多様に存在します。しかし、どこかにデータを残すということは、そこがセキュリティ上のネックになるのは間違いありません。その問題を回避するのはストレージレスになることです。今回紹介するpa...
Image Scrubber - Webブラウザで上でプライバシーに配慮した写真加工を行う
この記事が一般公開される頃にはBLMも落ち着いているでしょうか。欧米ではBLM運動が活発に行われており、様々な余波が生じています。今はソーシャルの時代であり、デモで撮影された写真があっという間に拡散されています。そうやって撮影された写真には肖像権があり、おいそれとアップロードするのはよくありません。まず最低限の処理をI...
TitleRun - これならバレない！タイトル部分で行うゲーム
仕事中に堂々とゲームをやるのは難しいですが、多少の息抜きがあってもいいのではないでしょうか（あくまでも個人の意見です）。問題はいかに見つからないかになりますが、ぱっと見で分からなければ問題ないでしょう（あくまでも個人のry）。今回紹介するTitleRunはWebブラウザのタイトル部分を使って行うゲームになります。## ...
tailblocks - Tailwindをベースにしたブロックデザインパターン
CSSフレームワークとしてTailwindが知られています。画一的なデザインを提供するBootstrapなどと異なり、個別のスタイルのみを提供します。UI部品にする際には、それらのスタイルを組み合わせて自作する必要があります。より自由度が高く、作業を効率化してくれるフレームワークです。そんなTailwindを使ってブロ...
tw-style - TwitterのUIを自分好みにカスタマイズ
住めば都という言葉はありますが、普段使いしているツールのUIが変わると慣れるまで相当なストレスになります。ネットの世界においては自分でカスタマイズできる領域も大きいので、リアルほど我慢を強いられることはありません。自分なりの都にすればいいのです。今回はtw-styleを紹介します。新しいTwitterのUIについて、自...
Wiper - Google検索結果から指定したサイトを除外するブロックリストアドオン
Google検索を使っていて、いつも出てくる邪魔なサイトは存在しないでしょうか。まとめサイトだったり、噂レベルの内容を載せているだけのサイトもあります。Googleのインデックス力に期待したいところですが、現状ではノイズが増えてしまっています。そこで使ってみたいのがWiperです。手動で登録するブロックリスト機能拡張で...
Live.js - JavaScriptを読み込むだけで使えるライブリロードライブラリ
Webサイトを開発している時には、その修正内容を素早く確認したいはずです。ライブリロードやホットリロードといった技術もありますが、専用のサーバなどを用意するのでちょっと手間です。そこで使ってみたいのがLive.jsです。JavaScriptを読み込むだけで使えるライブ/ホットリロードを実現します。## Live.jsの...
CLaD ASCII - アスキーアート製ミュージックビデオ
ミュージックビデオはミュージシャンにとって、音楽を知ってもらうために大事な作品です。しかしコロナウイルスの影響や、遠隔地に住むグループではすぐに集まって撮影するのが難しいです。Charlotte Light and Darkもそんなミュージシャンの一つです。そこで彼らはアスキーアート製のミュージックビデオを作ることにし...
MYukkuriVoice - macOS用のゆっくりボイス作成ソフトウェア
ゆっくりボイスはニコニコ動画をはじめ、各種動画サイトで使われています。作成者は声を発せず、テキストで作れるので便利です。読み間違えることも、撮り直しも簡単です。動画はちょっとしたミスによる撮り直し作業が面倒なので、自動生成される音声ファイルは便利です。今回紹介するMYukkuriVoiceはmacOS用のゆっくりボイス...
Skip Silence - 動画の無音部分だけを高速再生するGoogle Chrome機能拡張
動画はテキストと異なり、自分のペースで見続けづらいコンテンツです。再生速度は調整できますが、あまり速いと何をいっているのか分からなくなります。不要な場面は飛ばしつつ、大事なところだけは聞きたいという時にはどうしたらいいでしょうか。その答えになりそうなのがです。無音部分を飛ばしてくれるGoogle Chrome機能拡張で...
GraphEditor - プレビュー付きのグラフエディタ
情報は単独で存在するのではなく、それぞれが紐付いています。ある一つの処理の出力は別な処理の入力になります。最終的な成果物にたどり着くまで、複数の処理がつながっていくのです。今回紹介するGraphEditorはそうした情報の紐付きを表現するためのエディタになります。## GraphEditorの使い方上がプレビュー、下が...
Simpdf - Web上でPDFを編集して再生成
PDFは編集できないものだと決めつけていないでしょうか。ちょっとした装飾であればフリーのソフトウェアでもできますし、Adobe Acrobatを使って注釈を入れたりすることもできます。決してまったく編集できない訳ではありません。試してみて欲しいのがSimpdfです。元のPDFファイルそのままではありませんが、編集を行え...
Image Compare Viewer - Web上で2つの画像を比較
変更前のと変更後の画像や動画は見る目を引くものです。何が変わったのか、どう変わったのか分かると、どこに工夫がこらされているのか分かります。ビフォーアフターのようなリフォーム番組でも、前後の動画を効果的に使っています。今回紹介するImage Compare Viewerもそんな比較を効果的に行えるライブラリです。二つの画...
mewcam - 背景を取り去ったWebカメラ映像をデスクトップに表示
ソフトウェアやプログラミングの解説動画を作る際に、ワイプで自分の映像を流すことがあります。しかし、背景に不要なものが写ってしまうのが気になる人も多いでしょう。バーチャル背景を使う手もありますが、いっそ何もない方が気にならないはずです。そこで使ってみたいのがmewcamです。Webカメラの背景を消して、デスクトップに表示...
Speech to Text Webcam Overlay - Webカメラの映像に音声認識したテキストを追加表示
オンラインで会議をしている際に字幕を出してくれるととても助かります。特に海外の人たちのミーティングで、口元がよく見えなかったりすると字幕の有無で理解度、進めやすさがまったく変わってくるでしょう。今回紹介するSpeech to Text Webcam OverlayはWebカメラの映像に字幕を追加してくれるソフトウェアで...
Webrecorder Desktop App - Webブラウジングを記録するアプリ
未知の情報を探すのにWeb検索は便利です。しかし既知の情報になると途端に探しづらくなります。すでにある知識が邪魔をして、検索がうまくできなかったりします。そこで、Webブラウジングした情報をアーカイブしておいて、そこから検索したくなります。そこで使えるのがWebrecorder Desktop Appです。Webブラウ...