プログラミング言語 - JavaScriptの記事一覧
gDriveOCR - Google Driveを使ったOCR
OCRは大抵スキャナなどに備わっています。オープンソースのOCRもあることはあるのですが、品質はあまり高くありません。画像の中から効率的に情報を取り出す方法は手間がかかるイメージがあります。紙文書からテキストデータを取り出すのに苦労した人も多いでしょう。今回紹介するgDriveOCRはスマートな解決手法になるそうです。...
Sweep The Mine - スマホでも遊べるレスポンシブなマインスイーパ
突然、マインスイーパをプレイしたくなることがあるでしょう。昔のWindowsであれば標準で入っていましたが、今はストアでインストールしなければなりません。これは手間です。そこで使ってみたいのがSweep The Mineです。Webベース、かつレスポンシブデザインなマインスイーパです。## Sweep The Mine...
Pencil.js - インタラクティブな2Dオブジェクトライブラリ
Web上で2Dのオブジェクトを描くとなると、途端に敷居が上がります。CanvasやSVGを使うことで2Dオブジェクトは描けますが、星の形を描くのすら苦戦するでしょう。さらにそれをJavaScriptと連携させるとなると大変です。そこで使いたいのが専用のライブラリです。今回はPencil.jsというCanvas向けに出力...
Graphviz Visual Editor - GraphvizをWeb上で表示、さらに編集も！
昔から開発者がビジュアル化のために使ってきたライブラリがGraphvizではないでしょうか。DOT言語と呼ばれる記法に沿って書くことで、画像やSVGとしてドローされたデータを出力できます。そんなGraphvizのビジュアル化をWeb上で行い、さらに編集まで行えるのがGraphviz Visual Editorです。##...
Kind Stranger - モバイルに最適化されたRedditビューワー
海外で有名な掲示板といえばRedditがあります。テクノロジーから日常的なことまで含め、さまざまな内容で日々会話されています。Subredditごとに異なる文化があり、レギュレーションも異なるのが面白さの一つです。そんなRedditビューワーとしてKind Strangerを紹介します。ぜひお気に入りのSubreddi...
Emoji Finder - 絵文字検索ツール
絵文字は今や世界中で使われている単語になっています。そしてiOSなどがバージョンアップする度に新しい絵文字が追加されています。もはや、そのすべてを把握している人は多くないでしょう。そこで使ってみたいのがEmoji Finderです。絵文字を素早く検索できるツールです。## Emoji Finderの使い方トップページで...
Heart Rate Monitor - Webベースの脈拍モニター
日々の健康状態をモニタリングすると、ちょっとした変化にすぐ感じ取れるようになります。雰囲気で感じるよりも、個人的には数値として取れている方が好みです。スマートウォッチなどを使うとそうしたバイタルもすぐに取れます。今回紹介するHeart Rate MonitorはWebアプリケーションながら、脈拍を測定できるアプリケーシ...
Enigma - Web暗号機
エニグマといえば、第二次世界大戦中にドイツが開発した高性能暗号機です。キーを定期的に変えることで、メッセージが解読されづらい仕組みになっています。ハッシュ値などの不可逆ではなく、原文に戻せる可逆変更なのが特徴です。そんなエニグマと同じ名前を持った暗号化ツールがEnigmaです。ぜひ体験してみてください。## Enigm...
MemgameJS - メモリ探索ゲーム
コンピュータの基本要素の一つであるメモリ。高速にアクセスできる一時記録領域として使われています。ソフトウェアが動作する上で重要な存在であり、時にクラッキングで内容を悪用されることにあります。そんなメモリの内容を探索できるゲーム（アート）がMemgameJSになります。## MemgameJSの使い方最初に表示される四角...
Air horn - エアホーンを奏でるPWA
スポーツなどで使われるエアホーン。コロナ禍とあって利用が禁止されている場合も多いようですが、サッカーや野球などで使ったことがある人も多いのではないでしょうか。スポーツが盛り上がる、楽しいツールです。そんなエアホーンをWebベースで再現したのがAir hornです。技術的な実験的ソフトウェアになります。## Air ho...
blymp.io - とても簡単に使えるデバイス間ファイル送受信ツール
目の前にあるデバイスからファイルを受け取りたい、逆に送信したいと思うことはよくあります。しかしUSBで繋いだり、専用アプリをインストールするのは面倒です。結局メールを使うことになったりします。これは体験として下の下です。今回紹介するblymp.ioはURLさえ覚えておけば簡単に使えるデバイス間ファイル送受信ツールです。...
Dancing☆Onigiri (CW Edition) - HTML5製のリズムゲーム
アミューズメント施設（ゲームセンター）に行くと必ずあるのがリズムゲームです。太鼓の達人、ポップンミュージックなど利用する体の部位、道具は異なるものの、リズムに合わせて叩いたり、踏んだりするのは同じです。最近ではスマホでも数多くのリズムゲームがあります。今回紹介するDancing☆Onigiri
emoji-rain - 絵文字の雨を降らせるWeb Components
絵文字は単純にテキストメッセージに使うだけでなく、色々な場面で利用できます。アイコンフォントとして使うこともできますし、UTF8に対応しているプログラミング言語なら変数名に使うことだってできます。今回紹介するemoji-rainはそんな絵文字の使い方として参考になりそうなソフトウェアです。絵文字の雨が降ってきます。##...
andala - シンメトリーを活かしたWebペイント
左右対称なデザインはシンメトリーと呼ばれます。もちろん左右だけでなく、上下や斜めの線に対して対称という場合もあるでしょう。鏡合わせなデザインは昔から憧れの想像美といわれています。今回紹介するandalaはそんなシンメトリーな図形を描けるペイントツールです。1つの線だけでなく、複数のシンメトリーが描けます。## anda...
AR Sudoku Solver - ARを使って数独の答えを表示
数独は日本はもちろん、世界中で楽しまれているパズルです。数字の数によって難易度が異なり、上級なものになると何日も悩み続けないと解けないかも知れません。しかし、コンピュータであれば瞬時に解けるでしょう。今回紹介するAR Sudoku Solverはまさにそんな数独を解くためのソフトウェアです。面白いのはARを用いることで...
JPEG.rocks - WASMを使ってクライアントサイドでJPEG画像を最適化
オンライン上では画像コンテンツが多用されています。その結果、1ページの容量が大きくなり、ネットワーク負荷が高まっています。表示上では不要なデータを削除することで、画像データは大幅に軽減できます。今回紹介するJPEG.rocksはプライバシーに配慮したJPEG最適化ツールです。## JPEG.rocksの使い方トップペー...
social-analyzer - キーワードの意味やアカウント有無をチェック
新しいサービスをはじめる、新しいソフトウェアを作る、新しいアカウントを作る際などには、すでに同じ名前がないか確認が必要です。最悪、商標が関係することもありますし、少なくとも既存のものがあればググラビリティが悪くなります。今回紹介するsocial-analyzerは指定したサービスで名前の存在を調べたり、意味をチェックし...
Handtrackjs - 手をリアルタイムに認識する
機械学習を用いることで、オブジェクトを認識する精度が飛躍的に向上しています。写真の中に何が映っているかタグ付けしたり、顔認識したりする例があります。特定のオブジェクトに関して認識する例もあります。今回のHandtrackjsも特定のオブジェクトを認識します。それは名前の通り、手の認識です。## Handtrackjsの...
EasyGrid - 外部依存のないグリッドライブラリ
コンテンツを綺麗に並べる際に必要なのがグリッドです。さらにレスポンシブに対応しようと思うとJavaScriptライブラリが欲しくなるでしょう。グリッドと一言でいっても奥が深い技術です。今回はそんなグリッドを手軽に導入できるEasyGridを紹介します。## EasyGridの使い方基本的な同じ高さのコンテンツを並べる例...
js-image-zoom - 外部依存のない画像ズームライブラリ
最近は高解像度な写真が増えたので、元の大きさのまま貼り付けてしまうと、閲覧に苦労するでしょう。かといって、見たい部分は拡大してみたいと思うはずです。この相反するニーズを解決するのがズーム機能です。今回紹介するjs-image-zoomは外部ライブラリに依存しないJavaScript製の画像ズームライブラリです。## j...