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

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

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

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

もっと見る

None

  • 2021/01/25

TabFS - Webブラウザのタブをファイルシステムとしてマウント

FUSE(Filesystem in Userspace)という技術があります。ファイルシステムAPIを仮想化しており、ユーザが独自のファイルシステムを作れる技術です。外部のAPIをファイルシステム化したりするのに使われます。そんなFUSEを使って変わったものがファイルシステム化されました。それはWebブラウザのタブ情...

List

  • 2021/01/24

Fonio - 複数人でコンテンツを作成するWebベースのエディタ

書籍を書く際に一人で書く単著と、複数人で書く共著があります。一人で書くのも気楽ですが、個人的には共著の方が楽しいです。一つのストーリーをみんなで作り上げる過程が面白いです。今回紹介するFonioは複数人でコラボレーションできるWebベースのテキストエディタです。共著での文章作成などにも使えそうです。## Fonioの使...

List

  • 2021/01/24

ytGREP - YouTube動画の字幕を検索

動画コンテンツの難しいところは、映像から検索できないことでしょう。動画の中の色や表情などで検索するのは難しい(できないことはないですが)ですが、字幕を使えばセリフの検索はできないことはなさそうです。そんな機能をGoogle機能拡張として提供してくれるのがytGREPです。## ytGREPの使い方字幕が公開されている動...

List

  • 2021/01/23

newsdash - iGoogleに似たニュースダッシュボード

iGoogleは2013年に終了したサービスですが、ダッシュボードとして情報を閲覧するのに便利なサービスでした。RSSフィードのように購読するまでではなく、ざっと最新記事だけチェックしたいという時に使えます。同様の画面をフィードで実現してくれるのがnewsdashになります。iGoogleが忘れられない方はぜひ。## ...

List

  • 2021/01/21

PixelCraft - Webベースのドット絵エディタ

どれだけグラフィックスが綺麗になっても今なお人気なのがドット絵です。1ピクセル1ピクセル、色を決めていくことでできあがっていく絵は決して滑らかな線ではないにも関わらず、とても魅力的です。そんなドット絵をWeb上で描けるソフトウェアがPixelCraftになります。## PixelCraftの使い方最初に大きさを決めます...

List

  • 2021/01/21

Memo App - GitHub Gist連携型ノートアプリ

メモをどこに残すのか、それは大きな問題です。ローカルにあればオフライン時でも使えます。しかしほかのマシンと共有するのが面倒です。Webベースのものも多いですが、インターネットが貧弱な環境では操作がしんどいでしょう。そこで使ってみたいのがMemo Appです。オフラインで使えつつ、GitHub Gistにデータをアップロ...

List

  • 2021/01/17

jQuery Numerator - 滑らかなカウントアップ/ダウンライブラリ

アニメーションを一工夫すると、自然な動きを実現できます。物体を単純に移動させるのは簡単ですが、それは自然ではありません。いわゆるイージングを付けることで、自然な動きに近づけられます。イージングは種類も多く、そのアルゴリズムも公開されています。今回紹介するjQuery Numeratorは数字のカウントアップ/ダウンを滑...

List

  • 2021/01/15

Unleash - A/Bテストやユーザテストに使えるフラグ管理システム

Webサービスやアプリを改善する際にA/Bテストは欠かせません。また、ベータ機能を試せるようにしたり、特定のユーザに機能を提供したりすることもあります。そうした時に使われるのがいわゆるフラグで、その状態によって機能を見せたり、逆に消したりします。今回紹介するUnleashはWebベースのフラグ管理ソフトウェアです。##...

List

  • 2021/01/13

github-readme-quotes - GitHubのREADMEに名言を表示しよう

GitHubのREADMEに用いるバッジは数多く存在します。たとえばビルド結果を出したり、バージョンを出したりします。多くはそのソフトウェアを知るための情報です。開発者もそうした情報を埋め込むことで、ソフトウェアの信頼を獲得できます。今回紹介するgithub-readme-quotesはそういった信頼性とは一線を画す存...

List

  • 2021/01/12

BangleJS - シンプルで使いやすいWYSIWYGエディタ

開発者であればテキストエリアにMarkdown記法がサポートされていれば十分でしょう。しかしそれ以外の方にとっては不便きわまりないものになってしまいます。やはり見た目のいいエディタがある方が使いやすいはずです。リッチすぎるごてごてしたものはよくないですが、シンプルであれば開発者にとっても使いやすいでしょう。今回紹介する...

List

  • 2021/01/11

静かなる密林 - Amazonの商品レビューを消し去る

AmazonのWebページは情報量が多すぎると感じられてしまいます。特にレビュー周りは役立つこともありますが、やらせが多いこともあって、惑わされる原因になります。いっそのことレビューは見ない方が、自分の心に従って購入を決断できそうです。そう感じる方は静かなる密林をインストールしてみましょう。Amazonレビューを極力減...

List

  • 2021/01/11

Formeo - ドラッグ&ドロップでフォームを作成

お問い合わせや申込時に使われるのがフォームです。柔軟性のあるフォームが欲しいと思っても、なかなか作るのは難しいでしょう。都度開発チームに依頼するのが大変で、Googleフォームなどを頼ってしまいがちです。確かに便利ですが、痒いところに手が届かなかったりもします。そこで使ってみたいのがフォームビルダーです。今回はWebベ...

List

  • 2021/01/10

Koodo Reader - 機能十分な電子書籍管理ソフトウェア

ePubやPDFなど電子書籍コンテンツが増えてきています。少しの文書であればフォルダに入れておけば良いですが、数多くなると管理用のソフトウェアが必要になるでしょう。メモを残したり、ブックマーク機能も欲しくなるはずです。しかもマルチプラットフォームで動くと便利です。今回紹介するKoodo Readerはデスクトップ向けの...

List

  • 2021/01/06

BrowserTime - Google Chromeの履歴ページをより便利に

Webブラウザでどのサイトを閲覧したのか分からなくなってしまった時、閲覧履歴(ヒストリー)画面が便利です。しかしGoogle Chrome標準のものは単なる一覧であり、そこから探すのは難しいでしょう。そこで使ってみたいのがBrowserTimeです。よりモダンで使いやすい履歴ページを提供してくれます。## Browse...

List

  • 2021/01/06

Panelle.js - マンガのコマ割り用エディタ

マンガは日本が世界に誇るコンテンツです。日々多くのマンガが書かれ、年間数え切れないほどの雑誌やマンガが発刊されています。そのマンガの肝ともいえるのがコマ割りではないでしょうか。今回紹介するPanelle.jsはマンガのレイアウト(コマ割り)を作成するエディタです。## Panelle.jsの使い方メインページです。あら...

List

  • 2021/01/05

piratepx - 画像表示型のシンプルなアクセス解析

Webサイトの解析を行う際にはGoogleアナリティクスなどを利用します。その際、JavaScriptを利用し、Cookie利用の承諾を得たりと手順が面倒です。ユーザにとってもプライバシー情報を多少なりとも取られることに良い気はしないでしょう。そこで使ってみたいのがpiratepxです。JavaScriptを使わない、...

List

  • 2021/01/05

TikZJax - TikZを使ってWebAssemblyでドロー

論文など数式を用いる場合には専用のエディタや機能を使うことが多いです。たとえばLaTeXでは数式の描画用の記法が用意されています。しかし線や円など、汎用的な描画をしたい場合にはTikZなどを用います。今回紹介するTikZJaxはWeb上でTikZ記法が使えるようになるライブラリです。## TikZJaxの使い方記述例で...

List

  • 2021/01/04

MarkdownIt - 書いた内容をホスティングできるMarkdownエディタ

Markdownエディタは多数あります。それぞれに特徴はありますが、多いのはMarkdownを左側に書いて右側にプレビューが出るタイプです。このタイプは慣れている人も多く、ローカルで利用している人もいるでしょう。今回紹介するMarkdownItは2画面型のMarkdownエディタですが、書いた内容をWeb上にホスティン...

List

  • 2021/01/04

Procedural GL JS - WebGLで地図を立体的に表示

WebGLを使うと通常のDOMでは表現しづらいことも実現できます。GPUを使うことでグラフィックスの性能も向上しますが、JavaScriptの実装と大きく異なるので習得の時間が必要です。今回紹介するProcedural GL JSはWebGLを使った実装例になります。こうした表現もできるのだという学びになるでしょう。#...

List

  • 2021/01/02

Screenity - 画面を録画できるGoogle Chrome機能拡張

オンラインコンテンツが隆盛の現在にあって、Webアプリケーションを紹介したり、Googleスライドでプレゼンテーションを行ったりする機会は多いはずです。ローカルアプリケーションをほとんど使っていない人もいるでしょう。そんな方に使ってみて欲しいのがScreenityです。Google Chrome拡張で画面の録画を行える...