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

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

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

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

もっと見る

List

  • 2021/03/26

Counter - プライバシーを重視したWebアクセス解析

Webアクセスの解析と言えばGoogleアナリティクスが有名です。しかし最近ではプライバシーを懸念する声もあり、自分の情報をトラッキングされることを嫌がる人も多くなっています。ただシンプルにWebサイトの利用状態を知りたい、そんな時にはCounterを使ってみるのはいかがでしょう。## Counterの使い方ダッシュボ...

List

  • 2021/03/25

Lowdefy - YAMLでWebアプリケーションを作るローコードプラットフォーム

最近はノーコードやローコードといったツールが人気です。いわゆるシチズンデベロッパーと呼ばれる、コーディングを生業としていない人であってもソフトウェアを開発できます。今回紹介するLowdefyはそんなローコードツールの一つです。YAMLファイルを記述することでアプリケーションを開発できます。## Lowdefyの使い方お...

List

  • 2021/03/22

Browser Image Compression - Webブラウザで画像サイズを軽減

Webサービスでユーザに画像をアップロードしてもらう機能を付けることは良くあります。最近ではスマートフォンカメラの解像度が上がり、ファイルサイズも大きくなっています。プロフィールアイコンのために数MBのアップロードをしてもらうのはサービス、ユーザ双方にとって負担です。そこで使ってみたいのがBrowser Image C...

List

  • 2021/03/21

Telestrator - プレゼンに。数秒で消えるスクリーンドローイング

プレゼンテーションをしていたり、オンライン配信を行っている時に画面上に説明を加えたいと思うことがあります。ボタンを目立たせたり、見て欲しい部分を囲んだりといった具合です。そんな時に使えるのがTelestratorです。画面上で自由にドローできます。## Telestratorの使い方画面左側にツールバーが出ます。普段は...

List

  • 2021/03/20

Isepic Chess UI - チェスの棋譜プレイヤー

チェスは海外で人気のあるゲームです。AIが発展してなお、人同士が競う楽しさは色褪せません。自分でプレイするだけでなく、有名な人たちの棋譜を見てワクワクしたり、新しい知見を得たりするのも楽しさの一つです。今回紹介するIsepic Chess UIはisepic-chess.jsに対応した棋譜を表示するUIです。## Is...

List

  • 2021/03/15

v86 - Webブラウザでx86をシミュレーション

Webブラウザで各種OSを実行するような試みが多数あります。それっぽいUIにしているだけというものもあれば、一つのOSについて忠実に再現しようとしているものもあります。古いOSであれば、現状のWebブラウザでも十分に使い物になる速度で動作していたりします。今回紹介するv86のアプローチはもっと広く、x86をWebブラウ...

List

  • 2021/03/13

GhostText - 好きなエディタでテキストエディタを編集

Web上で長文を書くことがあります。しかしWebベースのエディタや独特な使い勝手やツールバーを用意したものが多く、使いやすいとは言いづらいでしょう。そこで、普段使っているエディタで書いて、コピペしたりします。そんな手間を軽減してくれるのがGhostTextです。普段使っているエディタで文章を書けるようにします。## G...

List

  • 2021/03/11

Tweet-Text-Fragment-Link-Bookmarklet - Text Fragment付きのURL生成するツイート用ブックマークレット

Text FragmentsはURLのアンカー以降に特殊なコードを付けることで、URLを開いた時に該当部分をハイライトしてくれる仕組みです。今のところGoogle Chrome 81以降が対応しています。そんなText Fragmentsを使ったURLを生成し、さらにツイートできるのがTweet-Text-Fragme...

List

  • 2021/03/10

Jam - Clubhouse的な音声チャットを楽しもう

Clubhouseが日本で流行っています。不特定多数が集まってわいわい話すような感じを再現してくれます。何より録音や公開が禁止されているので、ちょっと込み入った話もしやすいのが特徴です。そんなClubhouseに似たサービスがJamです。音声だけが使えるチャットです。## Jamの使い方名前を決めてルームを開始します。...

List

  • 2021/03/09

walklog - ウォーキングログを可視化する

コロナ禍にあって、出回ることが減ってしまいました。その結果、あえて歩こうと思わないとなかなか歩数を稼げません。個人的には毎日1万歩を必達として、ようやく2ヶ月くらい経っているところです。そんな徒歩のログを可視化してくれるのがwalklogです。Googleマップと合わせて、とても楽しくログを閲覧できます。## walk...

List

  • 2021/03/07

LogoMor - UCBLogoのプレイグラウンド

Logoは1960年代にMITで作られたプログラミング言語で、グラフィックスなどをプログラマブルに描ける言語です。拡張版が色々とあるようですが、バークレー大学製のUCBLogoもその一つです。今回紹介するLogoMorはUCBLogoをWeb上で記述して、その結果(グラフィックス)を描画できるプレイグラウンドになります...

List

  • 2021/03/05

Content Edit & Blur - ブラウザ上でコンテンツを編集、ぼかす

Webサイトのスクリーンショットを撮って、ちょっと加工すると言ったことはよくあります。見せたくないコンテンツをぼかしたり、文字を編集したい時もあるでしょう。そんな時に使えるのがContent Edit & Blurです。Webブラウザ上でコンテンツを編集できる機能拡張です。## Content Edit & Blurの...

List

  • 2021/03/04

Gifuct-js - アニメーションGIFの再生と停止&簡易編集

アニメーションGIFは一番面白いポイントだけを繰り返し楽しめるので、とても楽しいメディアです。しかしWebブラウザで表示すると強制的に繰り返し再生になってしまうので、いきなりオチを見てしまう可能性もあります。そうした悲劇を避けるために用意しておきたいのがGifuct-jsです。アニメーションGIFの再生と停止、簡易的な...

List

  • 2021/03/04

Source Map Visualization - Source Mapファイルの可視化

Source MapはWebフロントエンドを開発している際にブレークポイントを入れたり、エラー箇所を見やすくするのに使われています。コードがミニファイされていたりして分かりづらいJavaScript、CSSファイルがSource Mapによって分かりやすくなります。そんなSource MapをビジュアライズするのがSo...

List

  • 2021/03/03

webgl-lines - 線を使ったインタラクティブなWebGLコンテンツ

WebGLの使い方を覚えたいと思いつつ、その独特な書き方で断念してしまっています。もし覚えることができれば、これまでとはまったく異なる表現力が手に入ることでしょう。今回紹介するwebgl-linesはそんな表現の一例です。各コンテンツはブログの中に埋め込んで表示されています。## webgl-linesの使い方オンマウ...

List

  • 2021/03/02

Dad Joke Generator - 英語圏の親父ギャグ検索

いつの時代も、どの国でもおっさんは面白くない冗談を言うようです。一説によると、脳が年を取ると言うべきでない言葉を制御できず、口から出てしまうとされています。日本で言えば親父ギャグ、英語圏ではDad Jokeと言われているので、どちらも同じ概念があるようです。そんな親父ギャグを表示したり、検索できるサービスがDad Jo...

List

  • 2021/03/01

Violentmonkey - WebExtensions APIに対応したユーザスクリプト管理

Webブラウジングをユーザ自身で拡張できるのがユーザスクリプトです。任意のWebサイトで特定のコンテンツを非表示にしたり、機能を追加したりできます。筆者も色々なWebサイトで使っています。そんなユーザスクリプトを管理するのに使われる機能拡張がViolentmonkeyになります。類似のソフトウェアは幾つかありますが、そ...

List

  • 2021/02/28

Powerlets - ブックマークレットを素早く呼び出すGoogle Chrome機能拡張

Webブラウザから任意のJavaScriptを実行できるブックマークレットは便利です。便利なだけに色々登録してしまって、目的のスクリプトを探したりします。ツールバーに並べておくのも大変で、なるべく文字数を減らしている人もいるでしょう。今回紹介するPowerletsはブックマークレットを検索、そして実行できるGoogle...

List

  • 2021/02/28

Chocolaスマートコントラクト - チョコレートの代わりにハッシュ値を送ろう

2月14日は何の日でしょうか。そう、待ちに待った(?)バレンタインデーです。今年はコロナ禍とあって、実際に会って渡せないという人たちも多いでしょう。本命はもちろん、義理チョコであればわざわざ会ってまで渡したいとも思わないはずです。そこで使ってみたいのがChocolaスマートコントラクトです。ブロックチェーンを使い、チョ...

List

  • 2021/02/23

gDriveOCR - Google Driveを使ったOCR

OCRは大抵スキャナなどに備わっています。オープンソースのOCRもあることはあるのですが、品質はあまり高くありません。画像の中から効率的に情報を取り出す方法は手間がかかるイメージがあります。紙文書からテキストデータを取り出すのに苦労した人も多いでしょう。今回紹介するgDriveOCRはスマートな解決手法になるそうです。...