プログラミング言語 - JavaScriptの記事一覧
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...
Twitterclone - Twitter風のUIデザイン
Twitter風のWebサイトを作ってみたいと思ったことはないでしょうか。プロフィール画面やタイムラインがあって、そこにフォロワーがいて…などTwitterの基本的なデザイン構成はそれほど部品が多くはありません。TwittercloneはそうしたTwitter風のデザインを模したソフトウェアになります。少しだけサーバサ...
Github card - GitHubリポジトリ情報を表示するカスタムエレメント
HTML5ではカスタムエレメントという機能で、独自のHTMLタグを追加できます。あまり使われている例は見ませんが、特定のUIや機能をサンドボックス化できるので便利です。今回紹介するGithub cardはGitHubリポジトリの紹介をカスタムエレメント化したソフトウェアになります。## Github cardの使い方こ...
G-Desktop-Suite - Google Driveデスクトップアプリ
Google Driveを使って、ドキュメントや表計算、スライドなどの資料を作っている人は多いのではないでしょうか。Webブラウザから使うのが基本だと思いますが、毎度Google Driveを開くのは面倒だったりします。そこで使ってみたいのがG-Desktop-Suiteです。普段使っているWebブラウザから切り離すこ...
GitHub Theme - GitHub Codespaces用のカラーテーマ
GitHubで新しいサービス、GitHub Codespacesが発表されました。GitHubのリポジトリから、Web上でVisual Studio Codeを立ち上げて、ファイルを編集できる機能です。そんなGitHub Codespacesで使われているテーマがGitHub Themeになります。Web上で合わせるこ...
nicoSlack - Slackの新着メッセージをニコニコ動画のコメント風に表示
ニコニコ動画のコメント表示は当時としては画期的なものでした。横に流れていくコメントは、動画共有だけでなく、様々なサービスやソフトウェアでも取り入れられています。今回紹介するnicoSlackは名前の通り、Slackの新着通知をニコニコ動画のコメント風に表示するソフトウェアです。## nicoSlackの使い方新しいコメ...
dixitOnline - オンラインでDiXitを遊ぶ
DiXit（ディクシット）というのは語り部（親的なもの）とプレイヤーに分かれるゲームで、語り部のヒントを元にカードを選択し、そのカードが全員一致または不一致じゃない場合に語り部がポイントを得るというゲームです（詳しくは日本一わかりやすい「ディクシット