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

ライセンス - MIT Licenseの記事一覧

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

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

もっと見る

List

  • 2020/05/20

pattern.css - 背景に使えるパターンをCSSで

Webサイトの背景というと、一色で塗りつぶされたものをつい想像してしまいます。派手なものになると画像を使いますが、用意するのも面倒です。もう少し手軽に、それでいて印象深い方法はないでしょうか。そこで使ってみたいのがpattern.cssです。繰り返しのパターンを背景に適用できるCSSライブラリです。## pattern...

List

  • 2020/05/20

98.css - Windows 98を再現するCSS

世の中は進化しており、どんどんいい方向に進んでいるはずです(恐らく)。コンピュータも年々進化しており、時代に合わせて使い勝手がよくなっています。しかし、人はつい過去の思い出を美化し、ノスタルジックに浸りたくなるもののようです。今回紹介する98.cssはWindows 98を彷彿とさせるCSSになります。## 98.cs...

List

  • 2020/05/19

Zoom Web Browser - Zoomのバーチャル背景を変更するコマンド

Zoomではバーチャル背景と呼ばれる機能で、背景画像を別なものに差し替えられます。一般的には画像、または動画を指定できます。画像の場合、設定画面で差し替えないといけないので面倒です。そこで使ってみたいのがZoom Web Browserです。背景画像をコマンド一つで差し替えられるようになります。## Zoom Web ...

List

  • 2020/05/19

Bypass Paywalls Clean for Chrome - ペイウォールを乗り越えるChrome機能拡張

多くのニュースサイトではペイウォールと呼ばれる仕組みを導入しています。毎月、決まった記事数は読めるものの、一定数以上読もうとすると支払いを迫る仕組みです。サーバ側で制御している場合もありますが、多くはWebブラウザだけで簡易的に行っています。そんな簡易的な制御を破るのがBypass Paywalls Clean for...

List

  • 2020/05/18

PWA install - PWAインストール体験を向上させる

PWA(Progressive Web Apps)ではWebアプリケーションをローカルアプリのようにインストールできます。しかし、ユーザとしてはインストールするメリットが見えないとインストールしてくれないでしょう。そこで使ってみたいのがPWA installです。ユーザがインストールしたくなるように促せるウィザードライ...

List

  • 2020/05/17

midori - 背景画像を格好よくアニメーション

画像をただ表示して終わりでは印象に残りづらいです。しかし、JavaScriptやCSSでちょっとアニメーションさせるだけでもインパクトが大きく違います。さらにエフェクトまで行われれば、さらに印象深くなります。今回紹介するmidoriはまさにそのためのライブラリになります。画像の切り替え時にアニメーションやエフェクトを行...

List

  • 2020/05/17

PDF-LIB - JavaScriptでPDFを作成、更新

Web上で扱うことも多いPDF。ただドキュメントとして表示するだけで、あえてJavaScriptから操作することは殆どないでしょう。しかし、JavaScriptとPDFが連携できるようになれば、もっと可能性が広がりそうです。今回紹介するPDF-LIBはWebブラウザ、nodeのどちらからでも操作できるPDFライブラリで...

None

  • 2020/05/16

clikan - CUIで使えるカンバン

カンバンを使ってプロジェクトのタスクを可視化するケースが増えています。そこで、カンバンを使って個人のタスクについても管理したいと思う人もいることでしょう。かといって、そのためにWebサーバを立ち上げたりするのは面倒です。そこで使ってみたいのがclikanです。CUIで使えるカンバンです。## clikanの使い方cli...

List

  • 2020/05/16

AirPods Battery Monitor For MAC OS - AirPodsの充電状態をステータスバーで確認

AirPodsを使っている時、突然バッテリーがなくなって焦った経験はないでしょうか。ケースを使って充電もできますが、それすらバッテリーがないこともあります。普段から充電しておけばいのですが、ついつい忘れてしまいがちです。もしmacOSとAirPodsを繋いでいるならAirPods Battery Monitor For...

List

  • 2020/05/15

qrcp - QRコードを使ってファイル送信

ファイルを送り合うのは意外と手間です。Apple製品同士であればAirDropが使えますが、これもWiFiが有効になっていなければなりません。つまり有線LANではできません。さらにAndroidやWindowsなどとはファイル交換が面倒です。そこで使ってみたいのがqrcpです。コマンドラインとWebブラウザで簡単にファ...

List

  • 2020/05/14

台東区周辺のテイクアウト可能なお店マップ - 地元のお店でテイクアウトしよう

コロナウィルスの影響によって、飲食店が閉店したり、テイクアウト主体に移り変わっています。こういった時に、地域の人たちが主体になって買うようにしないと、店が潰れて、外出できるようになった時に本当に困るようになります。そこで便利なのが台東区周辺のテイクアウト可能なお店マップです。名前の通り、台東区周辺でテイクアウトに対応し...

List

  • 2020/05/14

Calla - JitsiをベースにしたRPG風に会って話すチャット

オンラインで多人数の会議をすると分かりますが、複数人が同時に喋ることはできません。全員が耳元で喋りかけてくるのと同じなので、複数人が話すと訳が分からなくなります。そのため、話がなかなか盛り上がりません。そうした状態を打破する試みが幾つもありますが、今回はCallaを紹介します。## Callaの使い方まずルームに入りま...

List

  • 2020/05/11

Scrawl-canvas - Canvasを使ったアニメーションライブラリ

HTMLではDOMを使ってデザインを構築するだけでなく、Canvasで自由度高くコンテンツをレンダリングできます(他にWebGLもありますが)。Canvasは扱いが難しいですが、アニメーションなども実現でき、可用性の高い技術です。そんなCanvasを使って面白いアニメーションを実演してくれるのがScrawl-canva...

List

  • 2020/05/10

mobileSelect - モバイル特化型のドロップリスト

スマートフォンとデスクトップでは画面の大きさが異なるため、最適なUI/UXが異なります。しかしWebは基本的に共通のコンポーネントとなっており、JavaScriptやCSSで工夫しなければなりません。よく使われる割にUXがいけてない、セレクトをスマートフォン向けにいい感じにしてくれるmobileSelectを紹介します...

List

  • 2020/05/09

tower-of-go - 30秒アタックの迷路ゲーム

ターミナルで長時間作業していると、白黒の画面でメリハリがないため、疲れを感じてしまうかも知れません。そんな時には気分転換に少し遊んでみるのもよさそうです。もちろんずっと遊び続けてはいけません。そこでお勧めなのがtower-of-goです。1回30秒で終わる迷路ゲームです。## tower-of-goの使い方開始はsキー...

List

  • 2020/05/09

unsup3d - 2D画像を3Dに展開

2Dと3Dには超えられない壁が存在します。しかし描かれている絵、または撮影された写真の奥にものを見てみたいと思う欲求は常にあります。最近では3D調に撮影できるカメラや、2Dのイラストを動かす技術も出てきました。今回紹介するunsup3dもそんな2Dと3Dの境目を乗り越えるための技術になります。2Dの顔写真(またはイラス...

List

  • 2020/05/08

Audio DSL - AudioWorkletを手軽に扱えるDSL

Web AudioはWebブラウザ上で音楽を扱えるAPIですが、処理をメインスレッドで行う必要があります。それに対してAudioWorkletはオーディオ処理に特化したWorkerで、バックグラウンドで音声処理が可能になります。しかしオーディオ自体の処理は複雑なイメージがあります。そうした処理をDSLでシンプルにしてく...

List

  • 2020/05/08

Artyom.js - Webサイトにボイスコマンドを追加

ボイスコマンドといえばSiri、Google Home、Alexaなどが有名です。スピーカーやスマートフォンに語りかけるだけでアクションしてくれるのは、一度慣れると手放せません。他にももっと音声だけで操作できれば便利なのにと思ってしまうでしょう。そこで使ってみたいのがArtyom.jsです。WebサイトでJavaScr...

None

  • 2020/05/07

runmd - Markdown中のコードを実行

Markdownの中にコードを書くことはよくあります。そんな時、このコードが実行できればいいのにと思ったことはないでしょうか。コードの実行結果をドキュメントに反映できれば、本当の結果との齟齬もなくなります。そんな使い方ができそうなのがrunmdです。プログラムを実行し、ドキュメント内に反映できます。## runmdの使...

List

  • 2020/05/06

Mailu - Dockerで立てられるメールサーバ

メールサーバを立てるのはとても面倒なイメージがあります。安定して動かしておかないとメールが受信できない、なんて問題にもなりかねません。メールがビジネスの根幹を担っている場合にはなおさらです。そこで紹介したいのがMailuです。Dockerで簡単に立ち上げられるメールサーバです。## Mailuの使い方ログインします。!