プログラミング言語 - JavaScriptの記事一覧
Scrawl-canvas - Canvasを使ったアニメーションライブラリ
HTMLではDOMを使ってデザインを構築するだけでなく、Canvasで自由度高くコンテンツをレンダリングできます（他にWebGLもありますが）。Canvasは扱いが難しいですが、アニメーションなども実現でき、可用性の高い技術です。そんなCanvasを使って面白いアニメーションを実演してくれるのがScrawl-canva...
mobileSelect - モバイル特化型のドロップリスト
スマートフォンとデスクトップでは画面の大きさが異なるため、最適なUI/UXが異なります。しかしWebは基本的に共通のコンポーネントとなっており、JavaScriptやCSSで工夫しなければなりません。よく使われる割にUXがいけてない、セレクトをスマートフォン向けにいい感じにしてくれるmobileSelectを紹介します...
unsup3d - 2D画像を3Dに展開
2Dと3Dには超えられない壁が存在します。しかし描かれている絵、または撮影された写真の奥にものを見てみたいと思う欲求は常にあります。最近では3D調に撮影できるカメラや、2Dのイラストを動かす技術も出てきました。今回紹介するunsup3dもそんな2Dと3Dの境目を乗り越えるための技術になります。2Dの顔写真（またはイラス...
Artyom.js - Webサイトにボイスコマンドを追加
ボイスコマンドといえばSiri、Google Home、Alexaなどが有名です。スピーカーやスマートフォンに語りかけるだけでアクションしてくれるのは、一度慣れると手放せません。他にももっと音声だけで操作できれば便利なのにと思ってしまうでしょう。そこで使ってみたいのがArtyom.jsです。WebサイトでJavaScr...
runmd - Markdown中のコードを実行
Markdownの中にコードを書くことはよくあります。そんな時、このコードが実行できればいいのにと思ったことはないでしょうか。コードの実行結果をドキュメントに反映できれば、本当の結果との齟齬もなくなります。そんな使い方ができそうなのがrunmdです。プログラムを実行し、ドキュメント内に反映できます。## runmdの使...
jeelizAR - ニューラルネットワークを用いた物体認識を使ったWebAR
かつてのARといえば、QRコードに似たマーカーを認識して情報を表示するものでしたが、今では画像認識、位置情報、さらにマーカーレスなんてものも出てきています。スマートフォンの活用によって、ARは大きく進化しています。そんな新しいARをWebブラウザでも体験できるのがjeelizARです。WebGLを使い、高速な描画が可能...
QuakeJS - あの名作QuakeをEmscriptenでWeb化
QuakeといえばFPSゲームの傑作ともいえる存在です。DOOMにはなかった高さの概念を組み入れ、多人数での対戦ができるなど、ゲームとしての面白さに満ちています。すでに20年以上前のゲームのようですが、今なお多くのユーザに愛されています。そんなQuake 3をベースにオープンソースとして作られたIOQUAKE3を、Em...
Tablist - URLをまとめて取得、開く
Google Chromeで開いているタブをまとめてコピーしたいことはよくあります。また、そのための機能拡張も多数あります。これらはまとめ記事を作ったりするのに便利です。しかし、その逆も需要がありそうです。それは多数のURLをまとめて開きたいというニーズです。そのために使える機能拡張がTablistです。## Tabl...
VanillaJSChess - 対戦もできるチェスエンジン
オセロやチェス、将棋、碁など様々な競技がAIによって蹂躙され、人はとても太刀打ちできないレベルになってしまっています。しかし、だからといって楽しさがなくなった訳ではありません。AIを研究することで、人のレベルもまた進化していたりします。今回紹介するVanillaJSChessは外部ライブラリに依存しないJavaScri...
Smooth Scrolling Image Effects - スクロールを使って画像にアニメーションを起こす
Webブラウザでは様々なユーザアクションを使ってイベントを実行できます。クリックや文字入力はもちろん、ウィンドウのリサイズやマウスオーバーなど細かく指定して、よりユーザビリティの高い仕組みを提供できます。Smooth Scrolling Image Effectsは名前の通り、スクロールを使って画像エフェクトを実行しま...
LibreSpeed - Webブラウザだけでインターネット速度測定
コロナウイルスの影響で自宅勤務を余儀なくされている、遠出できずに自宅にこもっている人が増えています。その結果、動画サイトをはじめとしたインターネット利用は上がる一方だそうです。そうなると気になるのがネットワーク速度ではないでしょうか。LibreSpeedはWebブラウザだけでインターネットの速度を計測できます。## L...
gifcap - デスクトップの操作をキャプチャ&アニメーションGIF化するWebアプリ
HTML5 APIが拡充されることで、これまでデスクトップアプリケーションでしかできなかったことが、どんどんWebブラウザ上で実現できるようになっています。開発環境だってAtomやVS CodeのようにHTML5で作られたものが主流になってきています。今回紹介するgifcapはWebベースでアニメーションGIFを作成す...
Hatena::Group Static Site Generator - はてなグループのデータから静的サイトを生成
はてなグループは2004年くらいにはじまったサービスで、複数人で日記を書いたり、カレンダーを使ったりとコミュニティ内のグループウェア的な存在でした。しかし時代の変化に取り残されたのか、2019年に終了が発表されました。Hatena::Group Static Site Generatorはそんなはてなグループのデータを...
Trollo - Vue/Vuex製のカンバンシステム
Trelloのようなカンバン機能はプロジェクト管理に限らず利用できそうです。自分たちで開発しているWebサービスの中に組み込みたいと思った方も少なくないでしょう。しかし実際に開発してみると意外と機能が多いと感じるかも知れません。そこで使ってみたいのがTrolloです。Vueで作られていますので、Vueアプリケーションの...
download - JavaScriptで簡単にファイルダウンロード実行
Webアプリケーションなどでファイルをダウンロードさせたいと思ったことはないでしょうか。別なタブで開いて自分で保存してくださいというのは格好悪いです。ZipなどであればWebブラウザ任せですが、画像などはそうはいきません。そこで使いたいのがdownloadです。とても簡単で使いやすいダウンロードライブラリです。## d...
wow.js - スクロールで開始するCSSアニメーションライブラリ
Web上でアニメーションを実現させるのはとても大変です。それだけに閲覧者にとっては大きなインパクトがあります。少しでも楽に実現させるために、ライブラリを使うのがいいでしょう。様々なライブラリを知っておけば、ぴったりの場面がありそうです。今回紹介するwow.jsはスクロールによって出現するアニメーションライブラリになりま...
Raycast - HTML5でレイキャスティングを楽しむコンポーネント
3Dゲームでよくあるのがレイキャスティングによる表示です。壁などが垂直に表示されて、前後左右に動いたり、視点を変えると見える映像が変わるというものです。DOOMなどでよく知られている表示形式です。そんなレイキャスティングをReactで再現したのがRaycastになります。HTML5でも十分に3Dゲームが楽しめそうです。...
Mathup - MathMLを簡単に書ける記法&レンダー
Web上で数式を表示する際に使われる記法は幾つかあります。最も有名なのはMathMLではないでしょうか。他にASCIIMathMLもあります。高度な表現が可能な分、その記法がかなり難しいという難点があります。そこで作られたのがMathupです。既存の記法に比べてずいぶん分かりやすく、MathML互換の表現が可能となって...
ROYGBIV - Web向けの3Dゲームエンジン
ゲームを開発する際にスクラッチでゼロから開発するのは非効率的です。作りたいゲームジャンルに応じてフレームワークを選ぶことで、より早く、効率的に開発できます。ゲームで求められる要素はそれくらい複雑になっています。もしあなたが3Dゲームを開発したいならばROYGBIVをチェックしてみましょう。3Dアクションゲーム対応のフレ...
GoIndex - Google Driveのファイルをインデックス表示
Google Driveでファイルを管理している企業は多いでしょう。そして、フォルダ内にあるファイルを公開したいと考える場合もありそうです。わざわざHTTPサーバを立てずにGoogle Drive上のファイルをメンテナンスするだけでよければ簡単です。そこで使ってみたいのがGoIndexです。Google Driveのフ...