プログラミング言語 - JavaScriptの記事一覧
Object Visualizer - Web上のJSONビューワー
JSONがWeb APIのフォーマットとして使われるようになり、複雑なデータも作られています。そうした内容を確認する際に開発者ツールは便利です。一部だけ展開したり、折りたたんだりできます。そんなJSON閲覧機能をWebブラウザ上で実現するのがObject Visualizerです。## Object Visualize...
RecordRTC - WebRTCを使って録画/録音するライブラリ
WebRTCというと、Webブラウザで動画チャットを行うためのプロトコルだと思うでしょう。しかし、必ずしも外部との通信が必須ではないようです。となれば、オーディオや動画を自由にカスタマイズできるでしょう。そんなライブラリがRecordRTCが名前の通り、録画や録音を基本としたWebRTC用ライブラリです。## Reco...
DotYouTube - YouTubeの再生前広告を回避するChrome機能拡張
筆者環境で動作しているという確認はできていないので、利用は自己責任でお願いします。YouTubeは世界最大級の動画共有サイトですが、その多くの機能が無料で提供されています。プレミアム機能で広告をオフにできますが、無料のまま使っている人も多いでしょう。しかし、動画はなんとかして回避したいと考えていたりします。そんな方々向...
AKAINO WARAI - Twitter上で遊べるミニゲーム
TwitterにはWebサイトを埋め込める機能があります。それは主にアニメーションGIFであったり、動画を再生させるための機能なのですが、特に機能的に限定されている訳ではないようです（規約上は制限されているようです）。そんな機能を使って作られたのがAKAINO WARAIになります。Twitter上で動く福笑いアプリで...
Placeholdifier - 既存のサイトをワイヤフレーム化
Webサイトのデザインを作る際には、テキストや画像を適当に塗りつぶした状態で作ります。あまり情報を多くすると余計なところが気になってしまうものです。これは既存のWebサイトを改善する際に、元のスクリーンショットを使うと問題になります。余計なログインアイコン、テキストなどに注目が集まってしまって、本来考えるべきデザインに...
XP Paint - 懐かしいWindows XPのペイントアプリをWebアプリケーションとして再現
少し前ではローカルでしか実行できなかったようなアプリケーションが、今ではWebブラウザ上でさくさく動くようになっています。それによってOSの垣根を越えて、自由に使えるようになるでしょう。今回紹介するのは懐かしいWindows XPベースのPaintアプリを再現したXP Paintです。## XP Paintの使い方メイ...
FontCDN - GoogleのWeb Fontをまとめてプレビュー
GoogleではWebフォントを無料で公開しています。サイズが大きくなりがちなWebフォントをGoogleが高速なCDNで配信し、さらに多数のWebサイトで共有することでキャッシュも有効になります。日本語フォントはあまり多くありませんが、多少のフォントは対応しているようです。そんなWebフォントでの表示をまとめて確認で...
map33.js - Three.jsを使って3D地図を生成
ただ地図を表示するだけでも面白いのに、それが立体になるとさらにワクワクします。これはGoogleアースなどで立体的な地図を見た時、誰もが感じた感情でしょう。立体化されることで、より体験がリアルに感じられます。今回紹介するmap33.jsはWeb上で地図を立体的に表示してくれます。建物などではなく、等高線に基づいた立体化...
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の使い...