プログラミング言語 - JavaScriptの記事一覧
Web Vitals Chrome Extension - Web Vitalsの評価を可視化するGoogle Chrome機能拡張
最近GoogleがWeb UXの指標として提示しているのがWeb Vitalsです。3つの指標があり、ローディングとインタラクティブ性、そして視覚的安定性となっています。これらの3つの指標に沿って、Webページを判定します。そんなWeb Vitalsを判定するGoogle Chrome機能拡張がWeb Vitals C...
japan-map-js - 日本のクリッカブルな地図を表示
集まったデータをただ一覧にしているだけではインパクトは薄くなってしまいます。どう可視化するかが問題です。時系列で比較する場合は棒グラフや折れ線グラフ、グループの場合は円グラフなど、データによって選ばれるグラフは異なります。もしデータが地域に合わせて作られるなら、地図上にマッピングするのがいいでしょう。日本地図にマッピン...
simpleParallax.js - 画像を使ったシンプルなパララックスエフェクト
パララックスエフェクトは見ている人にちょっとした違和感を与え、注目を集めるのに使えます。しかしスクロール時の処理を実装するのは大変で、後々のメンテナンスも面倒です。そこで専用ライブラリの利用をお勧めします。今回紹介するのはsimpleParallax.jsです。## simpleParallax.jsの使い方デモです。...
Gallery - 軽量、レスポンシブなWeb写真ギャラリー
写真をWebサイト上で並べて閲覧できるようにすることはよくあります。その際問題になるのが、各種Webブラウザ（スマートフォンなど含む）への対応や、サイズの異なる写真を綺麗に並べることです。そこで使ってみたいのがGalleryです。JavaScript製の軽量なギャラリーソフトウェアです。## Galleryの使い方一覧...
Mi Band 2 - Web Bluetooth APIを使ってアクティビティトラッカーと通信
スマートウォッチとしてApple Watchを使っている人は大勢いますが、個人的にはAmazfit Bipを使っています。一度充電すれば1ヶ月以上保つので、ずっと付けっぱなしにできるのが魅力です。そんなAmazfit Bipをはじめ、Mi Bandなどのアクティビティトラッカーを簡単にWebブラウザと通信させられるのが...
QR角印 - 現代風。QRコードを含んだ角印
コロナウィルスによって社会に大きな影響が出ています。その一つとして、ハンコ文化の見直しが行われています。ハンコを押すためだけに出社するといった愚策がなくなるかも知れません。しかし承認という問題に対するニーズに対する代案は必要です。そこで注目したいのがQR角印になります。## QR角印の使い方キーワード（発注番号など）を...
Marpit - MarkdownからHTML/PDFのスライドを作成
プレゼンテーション用のスライドを作る際には何を使っているでしょうか。PowerPointやKeynote、Googleスライドを使っている人が多いと思いますが、開発者であれば見た目の装飾よりも内容にこだわりたいはずです。そんな方に使ってみて欲しいのがMarpitです。Markdownからスライド、そしてPDFを生成する...
Bridge.NET - C#をJavaScriptに変換するコンパイラ
Webブラウザ上で動作する保証があるプログラミング言語はJavaScriptしかありません。しかし、型がないスクリプト言語とあって、素のまま使うのを躊躇してしまう人は大勢います。その結果、TypeScriptなどを使う人も多いです。今回紹介するBridge.NETはC#からJavaScriptに変換するコンパイラです。...
styled-icons - 13,500種を超えるアイコンフォント集
Webサイトを使いやすくしてくれるアイコンフォントは多数存在します。一つですべて済む場合もあれば、幾つも組み合わせたい場合もあるでしょう。足りない時に、都度追加していくのは面倒です。そこで使ってみたいのがstyled-iconsです。13,500種類以上のアイコンが使えるようになるライブラリです。## styled-i...
Somoji - 絵文字で効果音
オンラインミーティングやミートアップ時において、周囲の反応は欲しいものです。しかし、声を出してしまうと話しづらくなってしまうという問題があります。そこで試したいのがリアクションです。チャットなどではテキストで返す代わりに絵文字を使ったリアクションが便利です。同様に音声チャットであればSomojiが便利かも知れません。#...
Strike - 白黒時代を感じさせるペイントソフトウェア
ペイントソフトウェアは幾つも存在します。自由に線を引いたり、模様を描いたり、レイヤーがあったりと多機能なものもたくさんあります。写真の上に線を引いたり、地図に注釈を付けたりするのにもペイントソフトウェアが活躍します。そんなペイントソフトウェアとしてStrikeを紹介します。白黒調の、ちょっと変わったペイントソフトウェア...
hourTimer - 1時間集中して作業するためのタイマー
人が集中して作業できる時間はそれほど長くありません。そのため、期限も決めずに作業し続けるのは困難でしょう。例えば30分、1時間といった具合に、あらかじめ終わりを決めて取り組むことで集中力を維持して仕事を行えます。今回紹介するhourTimerは1時間タイマーのアプリになります。集中して仕事を進める時に使ってみましょう。...
Bypass Paywalls Clean for Chrome - ペイウォールを乗り越えるChrome機能拡張
多くのニュースサイトではペイウォールと呼ばれる仕組みを導入しています。毎月、決まった記事数は読めるものの、一定数以上読もうとすると支払いを迫る仕組みです。サーバ側で制御している場合もありますが、多くはWebブラウザだけで簡易的に行っています。そんな簡易的な制御を破るのがBypass Paywalls Clean for...
Kanmail - カンバンライクなUIのメールクライアント
カンバンはプロジェクトに限らず、様々な場面で利用できます。元々トヨタで生産管理で使っていたアイディアですし、ステータスを可視化するという意味では、もっと利用場面は多そうです。今回紹介するKanmailはカンバンをメールに適用するアイディアを持ったソフトウェアです。## Kanmailの使い方まずアカウントを登録します。...
Box Line Text - Webで動くバーチャルホワイトボード
会社にあって個人の家にないもの、その一つがホワイトボードではないでしょうか。リモートワークが続いて、ホワイトボードが恋しくなっている人はいないでしょうか。イメージを具体化したり、共有するのにホワイトボードはとても優れています。今回紹介するBox Line TextはWebブラウザ上で使えるホワイトボードアプリです。##...
台東区周辺のテイクアウト可能なお店マップ - 地元のお店でテイクアウトしよう
コロナウィルスの影響によって、飲食店が閉店したり、テイクアウト主体に移り変わっています。こういった時に、地域の人たちが主体になって買うようにしないと、店が潰れて、外出できるようになった時に本当に困るようになります。そこで便利なのが台東区周辺のテイクアウト可能なお店マップです。名前の通り、台東区周辺でテイクアウトに対応し...
Calla - JitsiをベースにしたRPG風に会って話すチャット
オンラインで多人数の会議をすると分かりますが、複数人が同時に喋ることはできません。全員が耳元で喋りかけてくるのと同じなので、複数人が話すと訳が分からなくなります。そのため、話がなかなか盛り上がりません。そうした状態を打破する試みが幾つもありますが、今回はCallaを紹介します。## Callaの使い方まずルームに入りま...
organice - Webブラウザで使えるOrg mode
Emacsユーザであれば大抵の人たちが知っているOrg mode。個人的にもEmacsをメインで使っていた頃はOrg modeでメモを取っていました。世にあるメモ環境の多くが持っている機能はOrg modeで実現されていたのではないでしょうか。そんなOrg modeをWeb上で使えるようにしたのがorganiceです。...
Plasma Ball Simulation - プラズマボールの動きを再現
プラズマボールを知っていますか（覚えていますか、が正しいかも）。球体の中でプラズマが飛び交っており、手を付けると、その部分にプラズマが吸い付いてくるものです。今ではほとんど見かけることがなくなりましたが、昔はオシャレな部屋にあった（ような）気がします。そんな懐かしいプラズマボールを再現するのがPlasma Ball S...
Zipcall - URLを決めればすぐに動画チャット
Zoomがオンラインミーティングでよく使われるようになっています。しかしセキュリティ上の懸念が強く存在し、有名なIT企業や政府によって禁止されるところも出てきました。Zoomは目下セキュリティ対策を進めているようですが、不穏なソフトウェアの動きがあるなど信頼回復はしばらくかかりそうです。そんな中、代替となるソフトウェア...