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

Webの記事一覧

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

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

もっと見る

List

  • 2020/03/28

css.gg - 500種類を超えるCSSアイコン集

Web上でアイコン画像を使う方法は幾つかあります。オーソドックスな画像に加えて、アイコンフォントを使うこともできます。画像はバイナリもあれば、SVGも利用できます。高解像度でもぼやけず、小さな画面でもつぶれないSVGは最近利用が広まっています。さらに覚えておきたいアイコンがCSSアイコンです。SVG同様に拡大しても綺麗...

List

  • 2020/03/27

Blocks UI - JSXベースの画面をWeb上で設計

Webページを作るのは主にWebデザイナーの役割ですが、毎回依頼するのではお互い時間がかかってしまいます。運用担当者でも定型であれば画面を作りたいと思うでしょう。そして、それがReact製のWebサービスだったりすれば、デザイナーからエンジニアへと、さらに時間を要するかも知れません。そこで使ってみたいのがBlocks ...

List

  • 2020/03/26

Minesweeper - Angular製のクラシカルなマインスイーパ

Windowsにはソリティアとともに有名なゲームとしてマインスイーパが知られています。ちょっとした時間つぶしのつもりでトライして、気付いたら数時間やっていたなんて経験は誰もがあるのではないでしょうか。そんな時間を奪い去る恐ろしさを秘めたゲームがMinesweeperです。Webブラウザだけで遊べる、恐ろしいゲームです。...

List

  • 2020/03/25

Web Demo Suit - Webカメラの映像にスーツを着せる

コロナウイルスの影響により、リモートワークが行われるようになっています。開発者であれば思ったよりも影響がなかったり、むしろ通勤時間がなくなって仕事がしやすくなったという人も多いのではないでしょうか。そんな中、オンラインミーティングなどでは寝間着や変な格好で出られず、わざわざ着替えたりしているかも知れません。そんな方はW...

List

  • 2020/03/24

Exment - 日本製のWebデータベースシステム

業務システムのほとんどはデータの登録と一覧表示、そしてメンテナンスという仕組みになっています。そして、そのデータのステータスによってワークフローが発生し、メールが出たり承認フローが開始します。顧客管理、商品管理、在庫管理など、ほとんどのシステムの基本は同じです。今回紹介するExmentはWebデータベースシステムです。...

List

  • 2020/03/22

第N曜日 - 第2水曜日の一覧などをWeb APIで

ミーティングなどで、毎月第1、第3水曜日に行うなんて決めたりすることがあります。個人的にはコミュニティの勉強会を毎月第1水曜日と第3水曜日で行っています。そうした時に、次のミーティングやイベントの日がいつになるのか忘れてしまったりします。それを防ぎ、次の予定がいつなのかすぐに分かるのが第N曜日です。Web API形式で...

List

  • 2020/03/22

Copy Excel Paste Markdown - Excelの表をMarkdownに変換

Excelで作成した表をWebページに使いたいと思うことは多いでしょう。そんな時、Markdownを使っている場合はどうするでしょうか。テキストファイルに貼り付けて、正規表現でタブを|に変換したりすることでしょう。しかしカラムの数を間違えたりして、なかなかうまくいきません。そこで使ってみたいのがCopy Excel P...

List

  • 2020/03/20

Linkalot - シンプルなPHP製のブックマーク管理

ブックマークはどうやって管理していますか。Webブラウザのブックマーク機能を使っている人、ソーシャルブックマークを使っている人などいそうです。しかし、複数のWebブラウザで共通したブックマーク、かつ他人に絶対見られないものとなると、どちらも最適ではないでしょうか。そこで使ってみたいのがLinkalotです。個人のPC上...

None

  • 2020/03/19

Edtr.io - React製のWebページ編集コンポーネント

Webページを編集する際、管理画面で行わせる方式だと、編集した内容と実際の適用された状態とかかけ離れていることがあります。開発者であればイメージできることでも、そうでない人たちにとってはとても難しいでしょう。そこで便利なのが、Webページ上でWYSIWYGに編集できる仕組みです。今回はReact向けに提供されるEdtr...

List

  • 2020/03/16

Neat URL - トラッキング情報をURLから削除

ソーシャルメディアなどでリンクをクリックするとutm_ではじまるパラメータが追加されていることがあります。これはUrchinトラッカーと呼ばれるもので、アクセス解析サービスを提供していたUrchin社がトラッキングに用いていたものです(Urchinは現在Googleに買収され、Googleアナリティクスのベースになりま...

List

  • 2020/03/14

glTF Viewer - WebGLを使ったglTFビューワー

glTFは3Dモデル界隈で今最も注目されているフォーマットだそうです。3Dモデル界隈におけるJPEGを目指すと言われているので、まさにデファクトを目指すべく作られています。執筆時点での最新版は2.0で、1.0とは互換性がないとのことです。そんなglTFのファイルをWebブラウザ上で閲覧するビューワーがglTF View...

List

  • 2020/03/13

Panolens.js - Three.jsを使ったパノラマビューワー

全天球動画(画像)やパノラマ写真など、従来の写真にはなかった形のメディアが登場しています。そうしたメディアを楽しむためには専用のビューワーが必要です。それによって、より強い没入感や楽しみ方が生まれるでしょう。今回紹介するPanolens.jsはThree.jsを使ったパノラマビューワーです。## Panolens.js...

List

  • 2020/03/11

東京都 新型コロナウイルス感染症対策サイト - オープンデータを活用したコロナウイルス情報集約サイト

新型コロナウイルスが一気に広まっています。学校が休校になり、会社はリモートワーク推奨に、さらに多くのイベントが中止や無観客での開催を余儀なくされています。いつまでこの状況が続くのか先行き不透明な状態ですが、ただうつむいていても意味がありません。この時だからこそできることもあるはずです。今回紹介する東京都 新型コロナウイ...

List

  • 2020/03/08

Fiber - Go言語製のWebフレームワーク

ちょっとしたWebアプリケーションを作る際に、よくExpressを使います。仕組みがシンプルで分かりやすく、静的ファイルやJSONの取り扱いなど拡張性も考えられているのが便利な点です。そんなExpressにインスパイアされて作られたGo言語のWebフレームワークがFiberです。## Fiberの使い方例えばHello...

List

  • 2020/03/07

人工芝 - GitHubのアクティビティを綺麗に

GitHubの影響からか、アクティビティを小さなグラフで表示するサイトが幾つかあります。GitHubのものは緑色なこともあって、芝と呼ばれることがあります。芝はなるべく綺麗な緑に染まっている方が気持ちいいのは確かです。そこまで活動できていないという人は人工芝を使ってみましょう。あくまでも自己満足ですが、GitHubのア...

List

  • 2020/03/01

Pervane - ローカルファイルを使ったメモアプリ

メモする場所は一カ所に決めておくのが大事です。散在させてしまうと、どこにメモしたのか分からなくなり、探すのに時間がかかってしまいます。一カ所にあれば、探す手間もありません。過去に書いたメモを参照するのも簡単です。今回紹介するPervaneはメモソフトウェアです。ローカルにあるテキストファイルを利用するのがポイントです。...

List

  • 2020/02/28

Work Time Logger - 作業前にクリックするだけの時間管理

仕事中は何らかのタスクを行っています。例え、それが休憩中だったとしても休憩というタスクにあるといえるでしょう。つまり、タスクの変わり目を記録し続ければ、自分がどんな時間の使い方をしているのが分かるはずです。そんな時間管理ツールとしてWork Time Loggerを紹介します。作業開始時にクリックするだけの簡単な時間管...

List

  • 2020/02/28

shhgit - 危険なセキュリティ情報を含んだコードを調査

GitHubではオープンソース・ソフトウェアを扱うので、アップロードされているコードは基本的にオープンです。そして、その中には危険な内容が含まれる場合があります。いわゆるシークレットキーに属するものです。そういった危険な情報だけを専門的に扱う検索サービスがshhgitです。## shhgitの使い方基本的に能動的に検索...

List

  • 2020/02/27

terminal.js - Web上にターミナル風UIを

開発者用のドキュメントなどでターミナル風のUIを用いることはよくあります。ユーザに何か入力してもらい、その内容に応じて出力を変えたりすると、インタラクティブでユーザビリティの高いドキュメントが実現します。今回はそんな面白い仕組みを作るのに使えそうなterminal.jsを紹介します。## terminal.jsの使い方...

List

  • 2020/02/26

drop.lol - WebRTCを使って任意の相手とファイルの送受信

ファイルを送受信というのは意外と面倒です。特に目の前の相手にファイルを送りたい時です。メールアドレスを聞くのも面倒ですし、そのためにソーシャルメディアを交換するのも手間です。ファイル共有サービスを使おうにも、そのURLを通知するのはどうしたらいいでしょうか。そこで使ってみたいのがdrop.lolです。共通のURLを介し...