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

Webの記事一覧

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

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

もっと見る

List

  • 2020/05/29

Gallery - 軽量、レスポンシブなWeb写真ギャラリー

写真をWebサイト上で並べて閲覧できるようにすることはよくあります。その際問題になるのが、各種Webブラウザ(スマートフォンなど含む)への対応や、サイズの異なる写真を綺麗に並べることです。そこで使ってみたいのがGalleryです。JavaScript製の軽量なギャラリーソフトウェアです。## Galleryの使い方一覧...

List

  • 2020/05/29

Mi Band 2 - Web Bluetooth APIを使ってアクティビティトラッカーと通信

スマートウォッチとしてApple Watchを使っている人は大勢いますが、個人的にはAmazfit Bipを使っています。一度充電すれば1ヶ月以上保つので、ずっと付けっぱなしにできるのが魅力です。そんなAmazfit Bipをはじめ、Mi Bandなどのアクティビティトラッカーを簡単にWebブラウザと通信させられるのが...

List

  • 2020/05/28

QR角印 - 現代風。QRコードを含んだ角印

コロナウィルスによって社会に大きな影響が出ています。その一つとして、ハンコ文化の見直しが行われています。ハンコを押すためだけに出社するといった愚策がなくなるかも知れません。しかし承認という問題に対するニーズに対する代案は必要です。そこで注目したいのがQR角印になります。## QR角印の使い方キーワード(発注番号など)を...

List

  • 2020/05/27

WebWormhole - WebRTCを使ってファイル送受信

デバイス間でファイルを送受信するのがなんと面倒なことか。同じLANで繋がっていればまだしも、隣にいる人にさえファイルを送るのも面倒だったり、PCとスマートフォンでの送受信したいと思ってもメールを使ったりします。これはとても面倒です。そこで使ってみたいのがWebWormholeです。WebRTCを使って手軽にファイルを送...

List

  • 2020/05/26

Marpit - MarkdownからHTML/PDFのスライドを作成

プレゼンテーション用のスライドを作る際には何を使っているでしょうか。PowerPointやKeynote、Googleスライドを使っている人が多いと思いますが、開発者であれば見た目の装飾よりも内容にこだわりたいはずです。そんな方に使ってみて欲しいのがMarpitです。Markdownからスライド、そしてPDFを生成する...

List

  • 2020/05/25

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

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

List

  • 2020/05/24

Bridge.NET - C#をJavaScriptに変換するコンパイラ

Webブラウザ上で動作する保証があるプログラミング言語はJavaScriptしかありません。しかし、型がないスクリプト言語とあって、素のまま使うのを躊躇してしまう人は大勢います。その結果、TypeScriptなどを使う人も多いです。今回紹介するBridge.NETはC#からJavaScriptに変換するコンパイラです。...

List

  • 2020/05/24

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

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

List

  • 2020/05/23

Somoji - 絵文字で効果音

オンラインミーティングやミートアップ時において、周囲の反応は欲しいものです。しかし、声を出してしまうと話しづらくなってしまうという問題があります。そこで試したいのがリアクションです。チャットなどではテキストで返す代わりに絵文字を使ったリアクションが便利です。同様に音声チャットであればSomojiが便利かも知れません。#...

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/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ライブラリで...

List

  • 2020/05/15

Box Line Text - Webで動くバーチャルホワイトボード

会社にあって個人の家にないもの、その一つがホワイトボードではないでしょうか。リモートワークが続いて、ホワイトボードが恋しくなっている人はいないでしょうか。イメージを具体化したり、共有するのにホワイトボードはとても優れています。今回紹介するBox Line TextはWebブラウザ上で使えるホワイトボードアプリです。##...

List

  • 2020/05/14

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

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

List

  • 2020/05/14

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

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