プログラミング言語 - JavaScriptの記事一覧
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ブラウ...
PiP any site - Picture in PictureでWebサイトを表示するGoogle Chrome機能拡張
Webブラウザで動作を再生している際、スクロールすると動画が見られなくなってしまいます。動画の説明文が長かったりすると不便です。そこで使えるのがPicture in Picture（以下PiP）になります。このPiPはWebブラウザのAPI（chrome.tabCapture APIなど）として提供されており、何も動画...
Progressive Web Maps - オフラインでも使えるPWAの地図アプリ
PWA（Progressive Web Apps）が広まることで、スマートフォンアプリとWebアプリの垣根がなくなってきています。タスク管理や電卓のような簡易的なアプリケーションはもちろん、IDEのような大型なWebアプリケーションもPWA対応してきています。今回紹介するProgressive Web Mapsは地図ア...
Link Lock - シェアできるパスワードロック付きURLを生成
URLを他の人には分からない形でシェアしたいと思うことはないでしょうか。認証などを使えばできるでしょうが、それは面倒です。あらかじめキーワードを決めておいて、それだけでシェアできると便利でしょう。今回紹介するLink LockはURLをAESで暗号化し、パスワードを知らないと復号化できない状態にしてくれます。## Li...
YTMDesktop - YouTube Liveをデスクトップで楽しむ
Google Musicが終了し、YouTube Musicに統合されると発表されています。動画のCMもなくなるので、使っている人は多いのではないでしょうか。SpotifyやApple Music、Amazon Musicのようなライバルがある中、どこが抜きんでるでしょうか。今回紹介するYTMDesktopはYouTu...
Responsively App - レスポンシブWebデザインを効率化
レスポンシブなWebサイトを開発する際には、様々なデバイスでの表示を一気に確認できると便利です。デバイス毎に画面幅が数多くあるので、それらをまとめて表示確認して調整していくという作業が不可欠です。今回紹介するResponsively Appはそうした表示をまとめて行えるアプリになります。スクロールやイベントの追従もでき...
twigl - オンラインのGLSLエディタ
GLSLはOpenGLやWebGLなどで使われているシェーダーを記述するための言語になります。3D CGなどを行っている方であれば馴染みのある言語でしょう。書き方がJavaScriptなどのプログラミング言語とは異なるので、慣れないとなかなか使い方を覚えられないかも知れません。そんなGLSLをWeb上で書いて試せるのが...
DeepL Chrome Extension - Google ChromeからDeepLを使って簡単に翻訳
Google翻訳よりも自然な翻訳ができているとして、DeepLに注目が集まっています。執筆時点ではまだAPIベースの翻訳は日本では使えないのですが、提供されればWebサービスやビジネスでの利用も進むでしょう。そんなDeepLをGoogle Chromeから簡単に使えるようにするのがDeepL Chrome Extens...