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

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

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

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

もっと見る

List

  • 2020/05/25

lit - 軽量なレスポンシブWebフレームワーク

CSSフレームワークは大型なものになるほど便利な機能が追加されますが、その制約もまた大きくなります。Webデザイナーであれば、レスポンシブなどの機能だけあって、他は自由度が高いものを選びたいと思うのではないでしょうか。今回紹介するlitはわずか395byteしかないレスポンシブWebフレームワークになります。小さいだけ...

List

  • 2020/05/24

styled-icons - 13,500種を超えるアイコンフォント集

Webサイトを使いやすくしてくれるアイコンフォントは多数存在します。一つですべて済む場合もあれば、幾つも組み合わせたい場合もあるでしょう。足りない時に、都度追加していくのは面倒です。そこで使ってみたいのがstyled-iconsです。13,500種類以上のアイコンが使えるようになるライブラリです。## styled-i...

List

  • 2020/05/23

Strike - 白黒時代を感じさせるペイントソフトウェア

ペイントソフトウェアは幾つも存在します。自由に線を引いたり、模様を描いたり、レイヤーがあったりと多機能なものもたくさんあります。写真の上に線を引いたり、地図に注釈を付けたりするのにもペイントソフトウェアが活躍します。そんなペイントソフトウェアとしてStrikeを紹介します。白黒調の、ちょっと変わったペイントソフトウェア...

List

  • 2020/05/22

Paint By Wasm - 画像からカラーパレットを生成

デザインを行う際に、色数が多すぎるのはよくありません。数種類の絞り込まれたカラーパレットを作り、そこから選んで使うのが一般的でしょう。そのためカラーパレットを作るのが最も重要な作業になります。写真やイラストなどからカラーパレットを作る場合、便利そうなのがPaint By Wasmになります。## Paint By Wa...

List

  • 2020/05/21

Play FLV in Browser - FLVファイルをWeb上で再生する

Flashといえば、2000年代を代表するWeb技術でした。HTML5とスマートフォン(iPhone)の登場によって一気に主役の場を奪われましたが、それでもかつて作成した資産が多数残っています。例えばFlash製の動画コンテンツもその一つです。今回はFlv形式の動画ファイルをHTML5で再生するPlay FLV in ...

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