プログラミング言語 - JavaScriptの記事一覧
handwritten.js - テキストを瞬時に手書き風PDFに変換
パソコンで書いたレポートを教諭のところに持っていったら、手書きで提出しろと理不尽なことを言われたことはないでしょうか。印刷したドキュメントを真正直に書き直してもいいですが、それでは屈したと感じてしまいます（個人の感想です）。そこで使ってみたいのがhandwritten.jsです。テキストファイルを瞬時にして手書き風に変...
電脳麻将 - Webブラウザだけで遊べる麻雀
麻雀が好きな人は多いですが、コロナウイルスの影響で雀荘が軒並み営業できない状態です。オンラインに流れている人もいますが、顔も分からない人と打つのにちょっと気後れしてしまっている人もいるでしょう。今回紹介する電脳麻将はWebブラウザ、JavaScriptで実装された麻雀アプリです。## 電脳麻将の使い方最初に書いておくと...
Better - よりよいサービス/製品を提案してくれるWebブラウザ機能拡張
自分が使っているサービスやソフトウェアを完全に信用していますか。例えばZoomはセキュリティやプライバシー意識が低いと、一時期批判を受けていました。同様に、ユーザのデータよりも利益や企業メリットを優先しているサービスもあります。そうしたサービスに対して代替になるものを提案してくれるのがBetterです。## Bette...
Text to Handwriting - テキストを手書き風に変換
宿題などは手書きで提出するように求められたことはないでしょうか。コンピュータで出力するのと何が違うのかと思ってしまいますが、そうした時代錯誤は常に存在します。そこで屈して手で書くのは凡人であり、そうした逆境を克服するのもまた開発者です。今回紹介するText to Handwritingはテキストを手書き風にしてくれるソ...
NSFW Filter - Tensorflow.jsでいかがわしいコンテンツをフィルタリング
仕事中に見てはいけないもの（色々ありますよね）を総称して、NSFW（Not Safe For Work）といいます。逆にこのキーワードで探すと色々な情報にたどり着けたりする訳ですが、少なくとも仕事中やリモートワーク中の家庭で見るものではありません。そうした際どいコンテンツについて、自動的にフィルタリングしてくれるGoo...
wasgen - Web Audio用のサウンドを生成するライブラリ
Web Audio APIを使いこなせば音楽を奏でられることは分かっています。しかしWeb Audio APIはかなりローレベルなので、音を奏でるために必要な実装をすべてやらなければなりません。単純なビープ音であればまだしも、音楽として聞かせられるレベルではないでしょう。そこで使ってみたいのがwasgenです。Web ...
city-roads - 地図の道ごとに色分けして表示
地図を元々提供されているままではなく、オリジナルのデータを載せたり、描画方法を変えたいと思ったりすることはないでしょうか。その手のことをしようと思うとGoogleマップでは難しかったりします。そうした目的でよく使われるのがOpenStreetMapです。今回紹介するcity-roadsもそうした一例になります。地図の道...
Perfect Edition - HTMLとePub対応の電子書籍テンプレート
電子書籍といえば標準のフォーマットがePubですが、もっと手軽に読みたい場合にはWebブラウザが使えます。コンテンツさえあれば、その見せ方は様々な形にすることができます。もちろん、読みやすい形式のためにはデザインなども考える必要があるでしょう。そこで使えるのがテンプレートです。今回はWebとePubに最適化されたPer...
WAVE.js/WAVE.wasm.js - 音楽ファイルをWeb上で自在に操作
Webブラウザで音楽を奏でる場合にはWebAudioがよく使われます。ローレベルなAPIなので、使いこなすのは時間がかかるかも知れません。それでも多くのライブラリが作られており、それらを使うことで、より簡易的に音楽ファイルなどを操作できるようになっています。今回紹介するWAVE.js/WAVE.wasm.jsもその一つ...
Anime-Chan - アニメのセリフを返すWeb API
アニメやマンガには有名なセリフがたくさんあります。例えばガンダムの「親父にもぶたれたことないのに」であったり、ジョジョの「おまえはいままで食ったパンの枚数をおぼえているのか？」などがあります。きっと、皆さんも心に残る言葉があるはずです。そんなアニメのセリフを探せるAPIがAnime-Chanになります。今日の一言的に使...
macintosh.js - Electronを使って懐かしのSystem 8を動かす
昔からAppleのパソコンを使っている人たちは、起動時に機能拡張が読み込まれていく表示がとても懐かしいことでしょう。読み込む機能拡張によっては起動中に止まってしまったりすることもしばしばあり、ちょっとした操作で爆弾が出るなど、今とは比較にならないくらい不安定なOSでした。そんな懐かしいmacOSの世界を再び味わえるのが...
Franz - メッセージに関連するサービスを一カ所で管理
メッセージアプリは何を使っていますか。最近では多種多様に増えており、Slack、Teams、Facebook Messenger、Discordなど様々です。これらを参加しているコミュニティやプロジェクト、企業によって使い分けるのは大変です。そこで使ってみたいのがFranzです。各種メッセージアプリの情報を一つのアプリ...
Community Geocoder - 住所から位置情報に変換するオープンソースなWeb API
位置情報と住所については、常に相互に変換したいというニーズがあります。位置情報はスマートフォンやWebブラウザから取得できますが、住所の文字列から位置情報を取り出すのは意外と面倒です。GoogleマップのAPIなどを使う人も多いでしょう。今回紹介するCommunity Geocoderはオープンソースのジオコーディング...
Google Meet Studio Mini - Webカメラの映像にフィルタを適用
Zoomなどがオンライン会議ツールとして注目されており、Google Meetはシンプルながら、カスタマイズがほとんどできないのが残念に感じられています。Webカメラの映像を少しでもカスタマイズしたい人は多いはずです。今回紹介するGoogle Meet Studio Miniは、仮想背景などはできないものの、映像を手軽...
Luckysheet - 強力な機能を持ったオンライン表計算ソフトウェア
表計算機能はあらゆるソフトウェアで利用できます。データベースのようなものの管理インタフェースであったり、家計簿、従業員管理、タイムスケジュールなどでも用いることができるでしょう。非常に利便性の高いUIです。そんな表計算風のUIを導入する際に使えそうなのがLuckysheetです。Webベースで使える表計算ソフトウェアで...
1Keys - 1KBのWebピアノ
なるべく小さいコード量で何ができるのか、そんなチャレンジをしたことがあるでしょうか。長いコードを書けば実現できるのは分かっていても、コード量の縛りを設けることで、よりロジックに頭を悩ませたり、新しいアイディアが必要になったりします。今回紹介するのは1KBでできたJavaScriptのピアノです。小さいながらもちゃんと演...
CookieMonster - クッキークリッカーを楽しむための情報を追加表示
クッキークリッカー
Text Caret Position - テキスト入力時のキャレットの位置情報を取得
Webのテキストエリア入力で、入力補完を提供するサービスがあります。例えばGitHubのコメント欄です。この時、テキストエリアのキャレット位置を取得するのですが、意外と面倒だったりします。そこでライブラリを使いましょう。Text Caret Positionを使えばキャレットのポジションが簡単に取得できます。## Te...
barchartrace - アニメーションする横棒グラフ
世の中にはたくさんのチャートが存在します。ただ数字を並べるだけでは分かりづらく、可視化することでトレンドが見えたり、全体の雰囲気を学べるようになります。さらに一回表示するだけでなく、変化をアニメーション化することで、よりダイナミックな変化を掴めるチャートになります。今回紹介するbarchartraceは横棒グラフでアニ...
WebTorrent Desktop - ストリーミング配信対応のWebTorrentをデスクトップアプリ化
WebTorrentはBitTorrentクライアントですが、Webブラウザだけで利用できます。インストール不要でファイルを自由にやり取りしたり、ストリーミングにも利用できます。そんなWebTorrentをGUIアプリとしてラッピングしたのがWebTorrent Desktopになります。## WebTorrent D...