プログラミング言語 - JavaScriptの記事一覧
Ward - ポップなデザインのシステム管理画面
一般的に開発者向けに作られるものは、UIが質実剛健で、簡素なものが多いように感じます。必要な情報だけを並べて、遊び心は少ないのではないでしょうか。それでもいいのですが、どうせなら触っていて楽しい気持ちになれるものがいいですよね。今回紹介するWardはサーバのダッシュボードUIになります。デザインがほんの少しポップです。...
ベクトルタイルを用いた3D風地図 - 地図上にベクトルタイルの建物データを表示
地図好きな人は大勢います。地図を見ているだけで、その街を空想したり、旅している自分を想像できます。さらに最近ではストリートマップや、写真によって、自分が本当にいるかのように感じることだってできるようになりました。今回紹介するベクトルタイルを用いた3D風地図は、地図の上に3Dオブジェクトを配置し、建物データを描画するデモ...
Gantt Chart - SVG/Canvas/SSRをサポートしたガントチャート
プロジェクト管理で度々使われるのがガントチャートです。タスク間のつながりが分かり、どのタスクがネックになるかが明確になります。また、スケジュール全体の進行状況であったり、担当者ごとのタスク量も分かります。そんなガントチャートを綺麗に表示してくれるライブラリがGantt Chartです。## Gantt Chartの使い...
OpenAPI Map - OpenAPI Speficaitionをチャート化
情報は一覧で出した方がいいことも、ビジュアル的に出した方がいいこともあります。それによって複雑性や、全体像の把握のしやすさが異なるでしょう。閲覧側が自由に選択できると便利です。今回紹介するOpenAPI MapはOpenAPI Specificationのファイルをビジュアル化してくれるソフトウェアです。## Open...
FaceMeshFaceGeometry - FaceMeshをWebカメラで体感する
FaceMeshというのは顔の凹凸や境界、ランドマークを認識します。映像に映った顔を凹凸ある3Dオブジェクトとして認識できます。これを使えば、2Dの画像を貼り付けて、立体感ある映像に仕上げたりできます。ということで実際にどんな感じになるのかはFaceMeshFaceGeometryを見てみましょう。## FaceMes...
Parallax-effect - Webカメラを使ったパララックスエフェクト
パララックスエフェクトというと、マウスのスクロールに差異を持たせて奥行きを感じさせるのが一般的です。手前は早く、奥はゆっくり動かすことで、距離を感じさせるのはアニメやゲームでもよく行われている手法です。今回紹介するParallax-effectはWebベースで、顔をトラッキングして行うパララックスエフェクトです。## ...
particles.js - Web上のパーティクルライブラリ
格好いいパーティクルは魅力的です。アプリケーションやWebサイトの彩りとして、未来感を与えたり、インタラクティブ性を感じられます。炎や星空など、様々なパーティクルがあるでしょう。今回紹介するparticles.jsは線が結びついたパーティクルを生成します。使いどころは意外とありそうです。## particles.jsの...
Ct.js - Web上で動く2Dゲームを開発できるプラットフォーム
ゲームを開発する際に、一から組み上げていくのはとても時間や工数がかかるでしょう。ゲームではマウスやキーボードとの連携であったり、グラフィックスの扱いも必要です。衝突判定や物理エンジンなども必要で、これらを自力で組み立てたり、既存ライブラリを組み合わせるのも選定が問題になります。そこで使ってみたいのがゲームエディタになり...
asperitas - シンプルなRedditクローン
Redditは歴史の長いコミュニティサイトです。様々なカテゴリ（Subreddit）があり、トレンドからディープな話題まで話されています。日本語のカテゴリも幾つかあります。そんなRedditのシンプルなクローンがasperitasです。## asperitasの使い方一覧です。!
SpacedTime - 覚えておかなきゃいけないことを記録
人の記録はあやふやなもので、だいたいのことは数日経つと忘れてしまいます。その結果、人との約束事や重要なことまで忘れてしまったりします。そうならないために、きちんと記録しておかないといけません。記憶するために記録し、それを何度も繰り返せば記憶の定着ができるでしょう。そのためのツールがSpacedTimeです。## Spa...
table-magic - CSV/TSV/HTML/Markdownの相互変換
HTMLのテーブル組はよく使われますが、その組み方は意外と面倒です。CSVから手軽に変換できるといいなと思うことがよくあります。同様にMarkdownでの表組も記法が複雑で、ずれることがよくあります。そんな苦労を味わった方であれば便利さが分かるのがtable-magicです。CSVとHTML、そしてMarkdownを相...
shapez.io - 自動化された工場を構築するゲーム
物を作っていくゲームはなんと面白いことでしょう。一気に大きなものを作るのではなく、小さなものを積み重ねていくのに楽しさを感じます。シムシティはもちろん、Factorioのような工場建設ゲームもそうです。今回紹介するshapez.ioはFactorioにインスパイアされた工場製造ゲームです。## shapez.ioの使い...
tragopan - 別ライブラリへの依存性のないズーム/パン用JavaScriptライブラリ
デジカメやスマートフォンで撮影した写真はどんどん画素数が増え、巨大になっています。Webブラウザで表示したくらいでは確認できないくらい小さな部分まで撮影できます。拡大表示したい時は多いです。そこで使えるライブラリがtragopanです。Web上でJavaScriptを使って画像のズームイン/アウトができるライブラリです...
CindyJS - インタラクティブなコンテンツ作成に役立つJavaScriptフレームワーク
JavaScriptを使えば画面内の要素を動かすことができます。とはいえ、それを素のJavaScriptだけで自力で実装するのは現実的ではありません。特に物理的な動きと組み合わせるのは大変です。今回はインタラクティブなコンテンツを作るのに特化したJavaScriptフレームワーク、CindyJSを紹介します。## Ci...
Zettlr - 多機能で使いやすいMarkdownエディタ
Markdownエディタは世の中にたくさん存在します。しかし、日々新しい物が出てきます。それはなぜかといえば、自分のニーズにほんの少しだけ合わないものがあるからです。確かにかゆいところに手が届かないものもあるでしょう。今回紹介するZettlrは21世紀のMarkdownエディタを標榜しています（Markdownが出てき...
Briefing - プライバシーに配慮した動画チャット
リモートワークが増えて、動画で会議をすることが増えました。また、ソーシャルディスタンスによって直接会えずに動画チャットを使う機会も多くなっています。その際問題になっているのがプライバシーです。Zoomなどでもプライバシーが大きな問題になっています。今回はプライバシーに配慮した動画チャットアプリBriefingを紹介しま...
Quotebacks - コンテンツ引用をしやすくするGoogle Chrome機能拡張
Webはページ同士がリンクで繋がって構成されています。その際、単にURLを付けるだけでもいいですし、内容を引用することもできます。引用を使うことで、リンク先の内容が分かりやすくなり、誘導につなげることができます。今回紹介するQuotebacksはそんな引用をしやすくするGoogle Chrome機能拡張になります。##...
tubuler - 簡単に使えるyoutube-dlのGUIラッパー
YouTube動画をダウンロードしておきたいと思ったことはないでしょうか。誰かがアップロードした動画は常にあるとは限りません。いつ消えてしまうか分からないだけに、手元に残しておきたい場合もあるはずです。そこで使えるのがyoutube-dlですが、CLIなので人によっては使いづらいでしょう。そこで使えるのがtubuler...
Notence - Markdownとカンバンをサポートしたノートアプリ
メモを取る用のノートアプリはどんなものを使っているでしょうか。普段使っているテキストエディタをそのまま利用している人も多いはずです。しかしテキストエディタでは記述できるフォーマットに限界があるのが問題です。今回紹介するNotenceはリストとカンバン、二つの記述方法をサポートしたノートアプリになります。## Noten...
WiFi Login Card - WiFi接続情報を載せたカードを作成
コワーキングスペースやイベント会場に行くとWiFiのSSIDとパスワードが書かれた紙があります。それを入力しないとインターネットにつなげられないので、とてもアナログな操作が求められます。これはとても面倒です。そこで使ってみたいのがWiFi Login Cardです。WiFiの接続情報を記述したQRコードを手軽に作成して...