プログラミング言語 - JavaScriptの記事一覧
Vandal - Web Archiveを使って過去のサイトへアクセス
Webサイトは常に恒久的に存在し、変化しない訳ではありません。コンテンツは日々追加され、突然閉鎖されることもあります。そんな時に過去のWebサイトを見られるサービスが便利です。日本ではウェブ魚拓がよく知られていますが、世界で見ればWeb Archiveが有名でしょう。そんなWeb Archiveを素早く使えて、まるでタ...
Trombone.js - Web上で奏でるトロンボーン
HTML5のAPIには音楽を奏でるものもあります。Web上でピアノを演奏したり、MIDIを解析するサービスが作られ、将来的にはWebブラウザだけで曲も作られていくかも知れません。今回紹介するTrombone.jsは名前の通り、Web上で奏でるトロンボーンです。## Trombone.jsの使い方トップページです。トロン...
Spearmint - React/Redux/アクセシビリティのテストを実行管理
ソフトウェアにはテストが付き物です。しかしテスト環境を整えるのは意外と面倒だったりします。ユニットテストならまだしも、Webブラウザを使ったようなテストだと、プロジェクトごとに環境を整えるのが大変です。そこで使ってみたいのがSpearmintです。ユーザビリティテストをはじめ、Webブラウザのテストを管理するGUIアプ...
Bibliogram - Instagramフロントエンド代替
Instagramを見る際には専用のアプリを使うのが基本です。Webからも使えますが、広告が表示されたり、アクセス元などの個人の情報が取られているかも知れません。彼らのメインビジネスなので致し方ありませんが、閲覧だけで情報が抜き取られるのは良い気がしません。そこで使ってみたいのがBibliogramです。Instagr...
Dataflow - JavaScriptが実行できるノートブック
データが幾ら集まっていても、ただ集めているだけでは意味がありません。そこから何からの価値を見出すためには、データを可視化しなければならないでしょう。しかし可視化するのにも工夫が必要です。今回紹介するDataflowはPythonを使ってデータをビジュアル化するソフトウェアです。## Dataflowの使い方Wikipe...
Editable React Table - React用の編集できるテーブルコンポーネント
業務システムでは常に一覧表示が求められます。一覧化されたデータは一気に内容を確認できるので便利ですが、次にはデータのソートや絞り込みが必要になるでしょう。さらにインラインで編集したいと要望されるかも知れません。今回紹介するEditable React TableはReactの中で使える編集可能なテーブルコンポーネントで...
sqliteviz - オフラインでも使えるWebベースのデータビジュアライズ
データのビジュアライズを行う際に、Excelなどの表計算ソフトウェアを使っていないでしょうか。全データを対象とするなら良いですが、絞り込んだ上でグラフ化するのはちょっと面倒です。そこで使ってみたいのがsqlitevizです。Webブラウザで使えるデータビジュアルツールです。## sqlitevizの使い方CSVやSQl...
Animate - 画面に表示されたタイミングを管理するJavaScriptライブラリ
最近、スクロールと連動するアニメーションを行うWebサイトが増えています。主にLPのような広告系のところに多いですが、スクロールに合わせて制御するのはとても大変です。今回紹介するAnimateはDOMが表示されたタイミングで発火するイベントを追加できるJavaScriptライブラリです。## Animateの使い方利用...
WinBox.js - Webアプリ用のウィンドウ管理
Webアプリケーションが次々と登場しており、複雑な画面を持ったものも増えています。Gmailなどはメールは個別のウィンドウで作成でき、複数のメールを開いて編集できます。こうしたウィンドウ管理がWebアプリケーションのレベルを引き上げることでしょう。今回紹介するWinBox.jsはWeb向けのウィンドウ管理ライブラリにな...
jquery.graphviz.svg - GraphvizのSVGデータを表示/機能追加するjQueryプラグイン
チャートやネットワーク図などを描くのに使われるのがGraphvizです。多くの場合PNGなどの画像で出力して利用しますが、SVGへのエクスポートも可能です。Web向けであれば、画像よりも使い勝手が良いでしょう。そんなGraphvizで出力したSVGを表示するのがjquery.graphviz.svgです。## jque...
Eva.js - Web向けのJavaScript製ゲームエンジン
ゲーム開発を行う際に一から作ることは多くありません。ゲームに関わる多くの機能を提供するゲームエンジンを選択するのが基本でしょう。モバイルアプリであればUnityやUnreal、WebであればPixiJSなどが有名です。今回紹介するEva.jsもWeb向けのゲームエンジンになります。Canvasベースのパフォーマンスに優...
What Time Today? - 空いている日程を素早く確認
リモートワークになってミーティングが増えたと感じている人は多そうです。そんな時に、参加者の時間調整をするのが一番面倒だったりします。空いている時間を見つけるのはとても大変です。そこで使ってみたいのがWhat Time Today?です。カレンダーから選ぶだけで空いている時間をリストアップできます。## What Tim...
playground-macos - Web上でmacOS風のUI/UXを再現
ポートフォリオサイトには2つの面があります。まず自分の関わってきたプロジェクトや持ち合わせている技術を一覧するものです。そしてもう一つはポートフォリオサイト自体が一つの作品になっているケースです。今回紹介するplayground-macosはまさに後者で、Xiaohan Zou氏の技術力をうかがわせるものとなっています...
proofreading-tool - 開発者以外でも使える文書校正ツール
読みやすい文章というのは、ある程度体系化されています。漢字や平仮名の使い方、句読点の使い方などで読みやすさは大きく改善できます。そして、それらのチェックは自動的に行えます。そこで使われているのがLintツールになります。そんなLintツールは開発者であれば使うのは容易ですが、開発者でない人たちにとっては敷居が高いもので...
satellite-viewer - 30行で作られた衛星トラッカー
夜空の星を見上げると、ISSが見えることがあります。同様に地球上には数多の人工衛星が飛んでいますが、小さいものは肉眼では見られないでしょう。しかし、どこを飛んでいるのか分かるだけでもロマンがあります。今回紹介するsatellite-viewerは、そんな衛星の周回軌道を再現するビューワーアプリです。## satelli...
zx - より手軽にNodejs用のスクリプトを書くためのツール
nodeを使ってCLIで動くツールを作っている人は多いでしょう。そんな時、デフォルトのnodeでは不便なことも多いです。ルートでasync/awaitが使えなかったり、コマンドを実行して、その結果を受け取るのも面倒です。そこで使ってみたいのがzxです。Google製のコマンド実行ソフトウェアです。## zxの使い方サン...
ClearURLs - 自動でトラッキング情報を削除してプライバシーを守るブラウザ機能拡張
Webの世界ではプライバシーが重視されます。リンククリック一つ取っても、そこから得られる情報は多いです。さらにそれが膨大な量となれば、プライバシーなどなくなってしまうでしょう。今回紹介するClearURLsはURLからトラッキングコードを削除してプライバシー保護に貢献するブラウザ機能拡張です。## ClearURLsの...
React Email Editor - HTMLメールをドラッグ&ドロップで作成するReact用コンポーネント
HTMLメールを作る際に、一からコーディングするのはとても難しいでしょう。特にレスポンシブに気をつけたり、各デバイスできちんと表示できるかを確認するのは手間も時間もかかります。今回紹介するReact Email Editorを使えばHTMLメールをビジュアル的に作成できます。## React Email Editorの...
Pomospendo - Webベースのポモドーロテクニック用タイマー
ポモドーロテクニックはすぐに使える時間管理手法です。キッチンタイマーさえあれば良く、別にトマト型にこだわる必要はありません（ポモドーロはイタリア語でトマトです）。しかしタイマーすらない場合にはどうしたら良いでしょうか。そんな時にはPomospendoを使いましょう。## Pomospendoの使い方時間をセットします。...
Spotlight.js - モダンなイメージギャラリー
Webページで画像を並べて表示したいケースは良くあります。その際、クリックして単に画像を拡大表示するのでは面白くありません。浮かび上がるような演出だったり、アニメーションがUXを向上させます。今回紹介するSpotlight.jsはモダンなイメージギャラリーになります。## Spotlight.jsの使い方一覧表示の状態...