ITエンジニア/デザイナ向けにオープンソースを毎日紹介

プログラミング言語 - JavaScriptの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2020/05/14

台東区周辺のテイクアウト可能なお店マップ - 地元のお店でテイクアウトしよう

コロナウィルスの影響によって、飲食店が閉店したり、テイクアウト主体に移り変わっています。こういった時に、地域の人たちが主体になって買うようにしないと、店が潰れて、外出できるようになった時に本当に困るようになります。そこで便利なのが台東区周辺のテイクアウト可能なお店マップです。名前の通り、台東区周辺でテイクアウトに対応し...

List

  • 2020/05/14

Calla - JitsiをベースにしたRPG風に会って話すチャット

オンラインで多人数の会議をすると分かりますが、複数人が同時に喋ることはできません。全員が耳元で喋りかけてくるのと同じなので、複数人が話すと訳が分からなくなります。そのため、話がなかなか盛り上がりません。そうした状態を打破する試みが幾つもありますが、今回はCallaを紹介します。## Callaの使い方まずルームに入りま...

List

  • 2020/05/13

organice - Webブラウザで使えるOrg mode

Emacsユーザであれば大抵の人たちが知っているOrg mode。個人的にもEmacsをメインで使っていた頃はOrg modeでメモを取っていました。世にあるメモ環境の多くが持っている機能はOrg modeで実現されていたのではないでしょうか。そんなOrg modeをWeb上で使えるようにしたのがorganiceです。...

List

  • 2020/05/12

Plasma Ball Simulation - プラズマボールの動きを再現

プラズマボールを知っていますか(覚えていますか、が正しいかも)。球体の中でプラズマが飛び交っており、手を付けると、その部分にプラズマが吸い付いてくるものです。今ではほとんど見かけることがなくなりましたが、昔はオシャレな部屋にあった(ような)気がします。そんな懐かしいプラズマボールを再現するのがPlasma Ball S...

List

  • 2020/05/12

Zipcall - URLを決めればすぐに動画チャット

Zoomがオンラインミーティングでよく使われるようになっています。しかしセキュリティ上の懸念が強く存在し、有名なIT企業や政府によって禁止されるところも出てきました。Zoomは目下セキュリティ対策を進めているようですが、不穏なソフトウェアの動きがあるなど信頼回復はしばらくかかりそうです。そんな中、代替となるソフトウェア...

List

  • 2020/05/11

Scrawl-canvas - Canvasを使ったアニメーションライブラリ

HTMLではDOMを使ってデザインを構築するだけでなく、Canvasで自由度高くコンテンツをレンダリングできます(他にWebGLもありますが)。Canvasは扱いが難しいですが、アニメーションなども実現でき、可用性の高い技術です。そんなCanvasを使って面白いアニメーションを実演してくれるのがScrawl-canva...

List

  • 2020/05/10

mobileSelect - モバイル特化型のドロップリスト

スマートフォンとデスクトップでは画面の大きさが異なるため、最適なUI/UXが異なります。しかしWebは基本的に共通のコンポーネントとなっており、JavaScriptやCSSで工夫しなければなりません。よく使われる割にUXがいけてない、セレクトをスマートフォン向けにいい感じにしてくれるmobileSelectを紹介します...

List

  • 2020/05/09

unsup3d - 2D画像を3Dに展開

2Dと3Dには超えられない壁が存在します。しかし描かれている絵、または撮影された写真の奥にものを見てみたいと思う欲求は常にあります。最近では3D調に撮影できるカメラや、2Dのイラストを動かす技術も出てきました。今回紹介するunsup3dもそんな2Dと3Dの境目を乗り越えるための技術になります。2Dの顔写真(またはイラス...

List

  • 2020/05/08

Artyom.js - Webサイトにボイスコマンドを追加

ボイスコマンドといえばSiri、Google Home、Alexaなどが有名です。スピーカーやスマートフォンに語りかけるだけでアクションしてくれるのは、一度慣れると手放せません。他にももっと音声だけで操作できれば便利なのにと思ってしまうでしょう。そこで使ってみたいのがArtyom.jsです。WebサイトでJavaScr...

None

  • 2020/05/07

runmd - Markdown中のコードを実行

Markdownの中にコードを書くことはよくあります。そんな時、このコードが実行できればいいのにと思ったことはないでしょうか。コードの実行結果をドキュメントに反映できれば、本当の結果との齟齬もなくなります。そんな使い方ができそうなのがrunmdです。プログラムを実行し、ドキュメント内に反映できます。## runmdの使...

List

  • 2020/05/06

jeelizAR - ニューラルネットワークを用いた物体認識を使ったWebAR

かつてのARといえば、QRコードに似たマーカーを認識して情報を表示するものでしたが、今では画像認識、位置情報、さらにマーカーレスなんてものも出てきています。スマートフォンの活用によって、ARは大きく進化しています。そんな新しいARをWebブラウザでも体験できるのがjeelizARです。WebGLを使い、高速な描画が可能...

List

  • 2020/05/05

QuakeJS - あの名作QuakeをEmscriptenでWeb化

QuakeといえばFPSゲームの傑作ともいえる存在です。DOOMにはなかった高さの概念を組み入れ、多人数での対戦ができるなど、ゲームとしての面白さに満ちています。すでに20年以上前のゲームのようですが、今なお多くのユーザに愛されています。そんなQuake 3をベースにオープンソースとして作られたIOQUAKE3を、Em...

List

  • 2020/05/02

Tablist - URLをまとめて取得、開く

Google Chromeで開いているタブをまとめてコピーしたいことはよくあります。また、そのための機能拡張も多数あります。これらはまとめ記事を作ったりするのに便利です。しかし、その逆も需要がありそうです。それは多数のURLをまとめて開きたいというニーズです。そのために使える機能拡張がTablistです。## Tabl...

List

  • 2020/04/30

VanillaJSChess - 対戦もできるチェスエンジン

オセロやチェス、将棋、碁など様々な競技がAIによって蹂躙され、人はとても太刀打ちできないレベルになってしまっています。しかし、だからといって楽しさがなくなった訳ではありません。AIを研究することで、人のレベルもまた進化していたりします。今回紹介するVanillaJSChessは外部ライブラリに依存しないJavaScri...

List

  • 2020/04/27

Smooth Scrolling Image Effects - スクロールを使って画像にアニメーションを起こす

Webブラウザでは様々なユーザアクションを使ってイベントを実行できます。クリックや文字入力はもちろん、ウィンドウのリサイズやマウスオーバーなど細かく指定して、よりユーザビリティの高い仕組みを提供できます。Smooth Scrolling Image Effectsは名前の通り、スクロールを使って画像エフェクトを実行しま...

List

  • 2020/04/26

LibreSpeed - Webブラウザだけでインターネット速度測定

コロナウイルスの影響で自宅勤務を余儀なくされている、遠出できずに自宅にこもっている人が増えています。その結果、動画サイトをはじめとしたインターネット利用は上がる一方だそうです。そうなると気になるのがネットワーク速度ではないでしょうか。LibreSpeedはWebブラウザだけでインターネットの速度を計測できます。## L...

List

  • 2020/04/25

gifcap - デスクトップの操作をキャプチャ&アニメーションGIF化するWebアプリ

HTML5 APIが拡充されることで、これまでデスクトップアプリケーションでしかできなかったことが、どんどんWebブラウザ上で実現できるようになっています。開発環境だってAtomやVS CodeのようにHTML5で作られたものが主流になってきています。今回紹介するgifcapはWebベースでアニメーションGIFを作成す...

List

  • 2020/04/24

Hatena::Group Static Site Generator - はてなグループのデータから静的サイトを生成

はてなグループは2004年くらいにはじまったサービスで、複数人で日記を書いたり、カレンダーを使ったりとコミュニティ内のグループウェア的な存在でした。しかし時代の変化に取り残されたのか、2019年に終了が発表されました。Hatena::Group Static Site Generatorはそんなはてなグループのデータを...

List

  • 2020/04/24

Trollo - Vue/Vuex製のカンバンシステム

Trelloのようなカンバン機能はプロジェクト管理に限らず利用できそうです。自分たちで開発しているWebサービスの中に組み込みたいと思った方も少なくないでしょう。しかし実際に開発してみると意外と機能が多いと感じるかも知れません。そこで使ってみたいのがTrolloです。Vueで作られていますので、Vueアプリケーションの...

None

  • 2020/04/23

download - JavaScriptで簡単にファイルダウンロード実行

Webアプリケーションなどでファイルをダウンロードさせたいと思ったことはないでしょうか。別なタブで開いて自分で保存してくださいというのは格好悪いです。ZipなどであればWebブラウザ任せですが、画像などはそうはいきません。そこで使いたいのがdownloadです。とても簡単で使いやすいダウンロードライブラリです。## d...