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

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

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

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

もっと見る

List

  • 2020/09/28

Leaflet Image - 地図上にフリーハンドでヒートマップを描く

地図とヒートマップの相性はよいです。どの地域で特に問題が発生しているか、気温が高い、風が強いかなど多くの情報が地図とヒートマップの組み合わせで表現されています。しかし自分で作るのは骨が折れるでしょう。そこで使ってみたいのがLeaflet Imageです。地図を使ってフリーハンドで描けるヒートマップライブラリになります。...

List

  • 2020/09/27

Talk - 登録不要ですぐに使えるビデオ会議

Webでビデオ会議をする際には、WebRTCを使うのが基本です。そしてWebRTCでほかの人たちとつながる際には2つの選択肢があります。一つはMeshで、P2Pで接続します。もう一つはSFUで中央サーバがある形です。SFUで中央サーバの方が多くの人数が接続できますが、P2Pの方がセキュアです。今回紹介するTalkはMe...

List

  • 2020/09/27

css3d-game - CSS3製のファーストパーソンゲームエンジン

自分視点で楽しめるゲーム、いわゆるファーストパーソン系のゲームは主にシューティングで採用されています。しかし、自分の視点なのでより没入感が高く、他のジャンルでも応用できます。脱出ゲームなどもこの視点で提供されることが多いジャンルです。今回紹介するcss3d-gameはCSS3を駆使して提供されるファーストパーソン視点の...

List

  • 2020/09/26

Flexbox Defense - タワーディフェンスゲームを通じてFlexboxの使い方を学ぶ

ゲームを通じて技術を学ぶのは興味深い手法です。体験する人も楽しみながらプログラミングが学べます。書籍やオンライン情報を元に自分だけで学んでいくのは困難ですが、ゲームで対話を楽しみながらできれば継続できそうです。今回紹介するFlexbox DefenseはCSS3のFlexboxをタワーディフェンスゲームをベースに学ぶソ...

List

  • 2020/09/24

danfo.js - データを素早く手軽にビジュアル化

データのビジュアライズはとても大きな問題です。ツールによって使い勝手がばらばらで、簡単に使えるものもあれば、とても複雑なものもあります。データ量によって選択肢が変わり、最適な表示方法も異なります。今回紹介するdanfo.jsは、とても簡単に使えるデータビジュアライズソフトウェアです。## danfo.jsの使い方dan...

List

  • 2020/09/23

Speech to Text Webcam Overlay - Webカメラの映像に音声認識した字幕を表示

コロナ禍にあって、さまざまな変化が生じています。ネガティブな変化も多いですが、そうした中だからこそ生まれる新しいしくみもあります。多くのイベントがオンライン開催になる中、聴覚障害がある方に字幕を見せるような試みも行われています。今回紹介するSpeech to Text Webcam Overlayはブラウザ上に移ったW...

List

  • 2020/09/22

Fuzbal - ページ内でファジーな検索を可能にするGoogle Chrome機能拡張

ブラウザのページ内検索で、微妙に文字が違っていて結果に出てこない思いをしたことはないでしょうか。GoogleのWeb検索などでは大文字小文字はもちろん、異なる単語でも意味をくみ取ってくれたりします。そうした柔軟性がローカルの検索でも欲しいと思わないでしょうか。今回紹介するFuzbalはあやふやな検索も可能なページ内検索...

List

  • 2020/09/19

handwritten.js - テキストを瞬時に手書き風PDFに変換

パソコンで書いたレポートを教諭のところに持っていったら、手書きで提出しろと理不尽なことを言われたことはないでしょうか。印刷したドキュメントを真正直に書き直してもいいですが、それでは屈したと感じてしまいます(個人の感想です)。そこで使ってみたいのがhandwritten.jsです。テキストファイルを瞬時にして手書き風に変...

List

  • 2020/09/18

電脳麻将 - Webブラウザだけで遊べる麻雀

麻雀が好きな人は多いですが、コロナウイルスの影響で雀荘が軒並み営業できない状態です。オンラインに流れている人もいますが、顔も分からない人と打つのにちょっと気後れしてしまっている人もいるでしょう。今回紹介する電脳麻将はWebブラウザ、JavaScriptで実装された麻雀アプリです。## 電脳麻将の使い方最初に書いておくと...

List

  • 2020/09/16

Better - よりよいサービス/製品を提案してくれるWebブラウザ機能拡張

自分が使っているサービスやソフトウェアを完全に信用していますか。例えばZoomはセキュリティやプライバシー意識が低いと、一時期批判を受けていました。同様に、ユーザのデータよりも利益や企業メリットを優先しているサービスもあります。そうしたサービスに対して代替になるものを提案してくれるのがBetterです。## Bette...

List

  • 2020/09/16

Text to Handwriting - テキストを手書き風に変換

宿題などは手書きで提出するように求められたことはないでしょうか。コンピュータで出力するのと何が違うのかと思ってしまいますが、そうした時代錯誤は常に存在します。そこで屈して手で書くのは凡人であり、そうした逆境を克服するのもまた開発者です。今回紹介するText to Handwritingはテキストを手書き風にしてくれるソ...

List

  • 2020/09/15

NSFW Filter - Tensorflow.jsでいかがわしいコンテンツをフィルタリング

仕事中に見てはいけないもの(色々ありますよね)を総称して、NSFW(Not Safe For Work)といいます。逆にこのキーワードで探すと色々な情報にたどり着けたりする訳ですが、少なくとも仕事中やリモートワーク中の家庭で見るものではありません。そうした際どいコンテンツについて、自動的にフィルタリングしてくれるGoo...

List

  • 2020/09/12

wasgen - Web Audio用のサウンドを生成するライブラリ

Web Audio APIを使いこなせば音楽を奏でられることは分かっています。しかしWeb Audio APIはかなりローレベルなので、音を奏でるために必要な実装をすべてやらなければなりません。単純なビープ音であればまだしも、音楽として聞かせられるレベルではないでしょう。そこで使ってみたいのがwasgenです。Web ...

List

  • 2020/09/11

city-roads - 地図の道ごとに色分けして表示

地図を元々提供されているままではなく、オリジナルのデータを載せたり、描画方法を変えたいと思ったりすることはないでしょうか。その手のことをしようと思うとGoogleマップでは難しかったりします。そうした目的でよく使われるのがOpenStreetMapです。今回紹介するcity-roadsもそうした一例になります。地図の道...

List

  • 2020/09/10

Perfect Edition - HTMLとePub対応の電子書籍テンプレート

電子書籍といえば標準のフォーマットがePubですが、もっと手軽に読みたい場合にはWebブラウザが使えます。コンテンツさえあれば、その見せ方は様々な形にすることができます。もちろん、読みやすい形式のためにはデザインなども考える必要があるでしょう。そこで使えるのがテンプレートです。今回はWebとePubに最適化されたPer...

List

  • 2020/09/05

WAVE.js/WAVE.wasm.js - 音楽ファイルをWeb上で自在に操作

Webブラウザで音楽を奏でる場合にはWebAudioがよく使われます。ローレベルなAPIなので、使いこなすのは時間がかかるかも知れません。それでも多くのライブラリが作られており、それらを使うことで、より簡易的に音楽ファイルなどを操作できるようになっています。今回紹介するWAVE.js/WAVE.wasm.jsもその一つ...

List

  • 2020/09/03

Anime-Chan - アニメのセリフを返すWeb API

アニメやマンガには有名なセリフがたくさんあります。例えばガンダムの「親父にもぶたれたことないのに」であったり、ジョジョの「おまえはいままで食ったパンの枚数をおぼえているのか?」などがあります。きっと、皆さんも心に残る言葉があるはずです。そんなアニメのセリフを探せるAPIがAnime-Chanになります。今日の一言的に使...

List

  • 2020/09/01

macintosh.js - Electronを使って懐かしのSystem 8を動かす

昔からAppleのパソコンを使っている人たちは、起動時に機能拡張が読み込まれていく表示がとても懐かしいことでしょう。読み込む機能拡張によっては起動中に止まってしまったりすることもしばしばあり、ちょっとした操作で爆弾が出るなど、今とは比較にならないくらい不安定なOSでした。そんな懐かしいmacOSの世界を再び味わえるのが...

List

  • 2020/08/30

Franz - メッセージに関連するサービスを一カ所で管理

メッセージアプリは何を使っていますか。最近では多種多様に増えており、Slack、Teams、Facebook Messenger、Discordなど様々です。これらを参加しているコミュニティやプロジェクト、企業によって使い分けるのは大変です。そこで使ってみたいのがFranzです。各種メッセージアプリの情報を一つのアプリ...

List

  • 2020/08/29

Community Geocoder - 住所から位置情報に変換するオープンソースなWeb API

位置情報と住所については、常に相互に変換したいというニーズがあります。位置情報はスマートフォンやWebブラウザから取得できますが、住所の文字列から位置情報を取り出すのは意外と面倒です。GoogleマップのAPIなどを使う人も多いでしょう。今回紹介するCommunity Geocoderはオープンソースのジオコーディング...