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

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

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

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

もっと見る

List

  • 2021/04/18

htmbox - htmlxを使ったDropbox風のUI

何かの技術をアピールする際にデモアプリを作るのは良い方法です。何ができるのか想像するのは難しいですが、デモアプリを見ることで学べることは多いでしょう。たとえばRailsはブックマークサービスのようなものを10分で作ったりして、その開発効率をアピールしていました。今回紹介するhtmboxはHTMLでAjaxを扱いやすくす...

List

  • 2021/04/17

Codeist - Webのコードをすぐに試せるプレイグラウンド

フロントエンド開発の便利な点は、Webブラウザじ実装されているJavaScriptエンジンでコードをすぐに実行、確認できることでしょう。HTMLやCSSをデバッグすることもでき、開発がさくさくと進められます。そんなフロントエンド開発時にちょっとしたプレイグラウンドが欲しかったらCodeistを使ってみましょう。## C...

List

  • 2021/04/17

Remote Mob - リモートで使えるモブプログラミング用タイマー

モブプログラミングは複数人集まって、わいわいがやがやしながら行うプログラミングです。ペアプログラミングの複数人版とも言えます。一つのタスクを成し遂げる際に、指摘をリアルタイムに行えるので情報共有にも役立ちます。そんなモブプログラミングをリモートで行えるのがRemote Mobです。リモートワークが隆盛の現在、試してみる...

List

  • 2021/04/12

Copenhagen - 高機能なWeb埋め込み型プログラミングエディタ

Web上でユーザにコードを書いてもらう機能を用意するとします。その際、ただのテキストエリアを配置するのは良くありません。ハイライトもありませんし、Tabキーを押すと別なコントロールにフォーカスが移動したとしたら、使う気も失せてしまいます。Webページに埋め込める高機能なエディタが欲しければ、Copenhagenの利用を...

List

  • 2021/04/10

Prismarine Web Client - ブラウザで動くマインクラフトクライアント

マインクラフトは面白いゲームですが、専用クライアントソフトウェアをインストールしないといけないのが面倒です。最初の一歩はインストール不要で軽く体験できると手軽になるでしょう。そこで使ってみたいのがPrismarine Web Clientです。マインクラフトをWebブラウザだけで遊べるようになります。## Prisma...

List

  • 2021/04/10

Sorted CSS Colors - 関連する色合いを提案

デザインで色を選択する際、関連し合う色を選ぶことで全体のバランスを崩さずに済みます。しかし一つ一つの色を選んでいると時間がかかってしまうでしょう。ある程度自動的に選択してくれると便利です。今回はそんな関連した色を選択するのに便利なSorted CSS Colorsを紹介します。## Sorted CSS Colorsの...

List

  • 2021/04/07

MyDrive - Google DriveクローンなWebファイル管理

Google Driveを使っている人は多いです。ファイルが見やすく、検索しやすいので使い勝手が良いでしょう。それに対して独自でストレージサービスを作る場合、使い勝手の悪いUIになりがちです。そんな時に使ってみたいのがMyDriveです。Google Driveクローンとして開発されているオンラインストレージです。##...

List

  • 2021/04/07

Appo Music - Apple Music for Webクローン

Webブラウザで何でも実行できるようになると、PC側の負担は小さくなります。ストレージも不要になりますし、負荷の高い計算処理はサーバサイドに任せれば良いでしょう。今回紹介するAppo MusicはApple Music for WebのUIを再現したソフトウェアになります。## Appo Musicの使い方トップページ...

None

  • 2021/04/05

いま世界で寝ているのは何%? - 世界中で最も寝ている人が多いのは何時でしょう

地球は自転しており、各地域には時差があります。今自分たちが昼であっても、夜の地域があったり、起床したばかりという人もいます。コロナ禍にあってオンラインミーティングが当たり前になると、特に時差を意識することになります。そんな世界にあって、今世界で寝ている人たちがどれくらいいるのか、それを計算してくれるのがいま世界で寝てい...

List

  • 2021/04/03

floccus bookmarks sync - 異なるWebブラウザ間でブックマークを同期

Webブラウザにはブックマーク機能があります。それは大抵ローカル上に保存されますが、Google Chromeのようにマシン間で同期できるものもあります。しかし、これらは個々のブラウザ特有のもので、異なるブラウザ間では共有できません。そこで使ってみたいのがfloccus bookmarks syncです。Webブラウザ...

List

  • 2021/04/03

RegEx Crossword - 正規表現を駆使するクロスワードパズル

クロスワードパズルは世界中で楽しまれているパズルです。縦の列、横の列に対してヒントが提示されており、矛盾しないように文字を埋めていけば完成です。誰でも楽しめるパズルです。今回紹介するRegEx Crosswordはひと味違います。これを楽しめるのは開発者に限定されることでしょう。## RegEx Crosswordの使...

List

  • 2021/04/02

Local PDF - クライアントサイドでPDFをマージ

Webアプリケーションは便利ですが、サーバサイドで動く際には常にセキュリティに注意が必要です。一旦サーバに送られたデータは消されているかは分からず、容易にアップロードはできません。しかしローカルでのみ動作するWebアプリケーションなら安心して利用できます。今回紹介するLocal PDFはローカルでのみ動作するWebアプ...

List

  • 2021/04/01

CSS Windows 10 - Windows 10風のUIをCSSで再現

WebはもはやOSといっても過言ではありません。多くのアプリケーションが動作し、情報が保存されています。しかしOSとは雰囲気が異なるので、使い方も大きく違います。垣根を越えるためにはOS風のUIが必要です。そんな可能性が感じさせてくれるのがCSS Windows 10です。Windows 10風のUIをCSS/HTML...

List

  • 2021/03/30

8x8DotJPFont - Arduboy用の日本語表示ライブラリ

IoTの盛り上がりによって、多種多様なマイコンが開発されました。その一つがArduboyです。ゲームボーイ風の見た目ですが、大きさはクレジットカードくらいです。自作のゲームを開発して、Arduboyでロードできます。そんなゲームの中で日本語を使いたいと思ったら8x8DotJPFontを利用しましょう。## 8x8Dot...

List

  • 2021/03/29

Taro - 軽量なWeb 3Dゲームエンジン

3Dゲームを一から作るのはとても大変です。何らかのフレームワークを利用するのが良いでしょう。スマートフォンアプリなどであればUnityやUnreal Engineといった選択肢があります。Web用の3DライブラリとしてはThree.jsが知られていますが、それをゲームエンジンとして活用しているのがTaroです。## T...

List

  • 2021/03/28

ZerangYab - 相互フォローしていない人を確認できるブラウザ機能拡張

Twitterで相互に繋がっていると思ったら、いつの間にかフォローを切られていることがあります。そのままでも良いのですが、何となくもやっとします。一方的に慕っているならともかく、そうでないなら相互フォローしてこそ意味があるというものでしょう。今回紹介するZerangYabはTwitterのフォロー状態をチェックして、片...

List

  • 2021/03/28

Web-minecraft - Webブラウザ用のMinecraftクライアント

Minecraftを遊ぶ場合、デスクトップアプリケーションやスマートフォン、タブレットアプリをインストールします。しかしインストールするのが手間だったり、業務用PCで自由にインストールできない環境という人もいるでしょう。そんな方に使ってみて欲しいのがWeb-minecraftです。Webブラウザで動作するMinecra...

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...