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

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

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

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

もっと見る

List

  • 2020/10/22

player.html - ディレクトリインデックス代わりに使える動画プレイヤー

Apacheやnginxにはディレクトリインデックス機能があります。これを使えばHTMLファイル以外のコンテンツを公開する際に、ディレクトリに放り込めばいいだけです。しかし単なるリストであり、見栄えはよくありません。もし公開するのが動画であれば使ってみたいのがplayer.htmlになります。プレイヤー付きで格好良いイ...

List

  • 2020/10/19

RiggingJs - 機械学習を使ってWebカメラの人物に沿って3Dモデルを動かす

機械学習はさまざまな分野で活用されています。画像や動画の分析で使われていることも多いです。人の目で見れば認知できる情報も、従来のアルゴリズムではコンピュータには判別しがたいものでした。しかし、機械学習の柔軟性によって乗り越えられています。そんな機械学習を使ってスケルトンモデルに動きを与えられるのがRiggingJsです...

List

  • 2020/10/17

Twake - Todo/カレンダー/ストレージが合わさったチャットツール

リモートワークが広まるのに合わせて、オンラインコミュニケーションツールが増えています。SlackやTeamsを採用するケースが多いようですが、他にもたくさんの選択肢があります。今回紹介するTwakeはSlackに似たチャットツールになります。オープンソースで、自分で立てられるのが大きな魅力です。## Twakeの使い方...

List

  • 2020/10/15

XML Viewer - XMLの構造をWeb上で閲覧

開発時によく使われるドキュメントフォーマットといえば、最近ではJSONが一番多いかと思います。しかし、少し前であればXMLが主流でした。閉じタグがあったり、可読性の低さがあってXMLはJSONに取って代わられたように見えます。今回紹介するXML Viewerはそんな懐かしい(?)XMLを見やすく表示できるビューワーです...

List

  • 2020/10/15

Apple ][js - Web上で動くApple ][エミュレータ

Apple はAppleの歴史を語る上で欠かせないハードウェアです。Apple Iの成功から、パーソナルコンピュータの市場を確立すべく投入されたマシンで、当時は多くの開発者が触った筐体です。そんなApple をWebブラウザ上でエミュレーションするのがApple jsになります。## Apple jsの使い方起動します...

List

  • 2020/10/14

Drawflow - データフローを作成するライブラリ

ノーコードプラットフォームが普及してきています。プログラミングはせずに、多くの場合はGUIで部品同士を組み合わせて一つの機能を作り上げていきます。そうしたUIを作るのに使えそうなUIライブラリとしてDrawflowを紹介します。## Drawflowの使い方デモのUIです。!

List

  • 2020/10/13

Percollate - コマンドラインでWebサイトをPDF/ePub化

Webページを見るのはWebブラウザと思い込んでいないでしょうか。小説サイトであれば、WebブラウザよりもPDFなどでオフライン化して読んだ方が可読性が高いでしょう。今回紹介するPercollateはWebページをPDFやePubに変換してくれるコマンドラインユーティリティです。## Percollateの使い方PDF...

List

  • 2020/10/12

yotaka - LAN内で使えるポッドキャスティング配信サーバ

ポッドキャスティングというと、インターネット上に公開されているイメージが強いですが、社内専用であったり、家庭内だけの限定的なポッドキャスティングがあっても面白いでしょう。今回紹介するyotakaはそんな限定領域のでポッドキャスティングを簡単に行えるソフトウェアです。## yotakaの使い方起動しました。常駐してくれま...

List

  • 2020/10/07

Ultralight - Electron対抗馬になる軽量なHTML UIエンジン

ElectronやNW.jsを使うことでHTML/JavaScript/CSSを使ってデスクトップアプリケーションが開発できます。しかしエンジンのサイズが大きかったり、パフォーマンスを気にしている人も多いです。今回紹介するUltralightは軽量なHTML UIエンジンになります。デスクトップやゲームを想定しています...

List

  • 2020/10/05

ZzFXM - JavaScript製の小さな音楽ジェネレータ

音楽を作ったり、奏でるのは大変です。才能に恵まれないと、人々を感動させる曲を作るのは難しいでしょう。しかしできあがった音楽をWebではインする際には開発者の力が必要になるはずです。今回紹介するZzFXMはごくごく小さな音楽ジェネレータです。## ZzFXMの使い方デモです。実際には音楽が流れます。数字の配列だけで音楽が...

List

  • 2020/10/05

umami - Google Analytics代替を目指すシンプルなアクセス解析

Google Analyticsを使っているWebサイトは多いです。しかし、個人のプライバシーに関わるデータがGoogleに吸い上げられていることを懸念する声もあります。サイト運営側にとっても、アクセスデータという重要なものがGoogleに蓄積されるのを嬉しくは思わないでしょう。そこで使ってみたいのが自分たちで立てるア...

List

  • 2020/10/03

Shift-Ctrl-F - 自然言語によるWebページ内検索

世の中には検索が上手な人もいれば、苦手という人もいます。具体的なキーワードが思いつかない場合、雰囲気で検索してしまいがちです。それでは欲しかった答えにたどり着けないでしょう。しかし、それを克服するのもまた、技術の力です。そこで使ってみたいのがShift-Ctrl-Fです。Webページ内で自然言語による検索を可能にします...

List

  • 2020/10/03

Arwes - サイバーパンクな世界を再現するWebデザイン

開発者であれば、誰しもSFに興味を持つはず(個人の意見です)。近未来を舞台にした映画は数多くありますが、その多くで電気的な、かつ薄暗い世界が描かれています。粗暴な人たちがいたり、裏路地のような看板が並ぶ中、デバイスや乗り物だけは進化している世界です。そんな世界観にぴったりなWebデザインフレームワークがArwesになり...

List

  • 2020/10/02

ztext.js - テキストや絵文字、画像を3D化

2Dのものを3Dで表現する試みは多数あります。人の脳は2次元であったとしても、奥行きを持たせることで、向こう側にある空間を意識します。さらに静的ではなく、動かしたりするとより、立体感が生まれます。今回紹介するztext.jsはテキストや絵文字を3D化するソフトウェアです。## ztext.jsの使い方実際に試していると...

List

  • 2020/10/01

Screenshoteer - コマンド一つでWebサイトのスクリーンショット取得

Webサイトのスクリーンショットを撮る際にはどうしているでしょうか。ドキュメントやヘルプ、スライドなどスクリーンショットが必要になる場面は実に多いです。ブラウザをそのままキャプチャしてもよいですが、個人の機能拡張など余計な情報が入ってしまいます。今回紹介するScreenshoteerはスクリーンショットが取得できるCL...

List

  • 2020/09/30

Paged.js - まるで電子書籍のような表示に

Webページと電子書籍では見え方が大きく違います。Webページの内容をそのまま電子書籍にしたいと思っても、その見え方がまったく異なることに不安を感じる人もいるでしょう。両者の見せ方を同じものにする場合、Webページを電子書籍側に寄せるのがよさそうです。今回紹介するPaged.jsはWebページをまるで電子書籍であるかの...

List

  • 2020/09/29

splashy - 画像から色情報をピックアップ

デザインのカラーパレットを決める際に、別なものからインスピレーションを得たいと考えないでしょうか。格好良いロゴがあったなら、そこで使われている色情報をベースに、Webページを作れば雰囲気のよいものができあがりそうです。今回紹介するsplashyは画像を読み込み、そこからメインとおぼしき色情報を抽出するソフトウェアです。...

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を駆使して提供されるファーストパーソン視点の...