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

Webの記事一覧

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

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

もっと見る

List

  • 2019/10/17

shiori - ターミナル/Webで使えるシンプルなブックマーク管理

ブックマークを管理するのはWebブラウザに付属のものを使うのが基本ですが、大量のブックマークをすると管理が煩雑になります。そこでソーシャルブックマークを使うようになりますが、データを公開したくないと考える人も大勢います。そこで使ってみたいのがshioriです。ターミナルやWebで使えるブックマーク管理です。## shi...

List

  • 2019/10/16

Textyle.js - シンプルなテキストエフェクトライブラリ

単純にテキストを表示しただけでは誰も気付きません。大事な文言であれば色やサイズを変えたりして、目立つ仕組みが必要です。それでももっと目立たせたい、ユーザの目に届けたいならばアニメーションしてみてはいかがでしょうか。あまり派手なものは嫌われるかも知れませんので、シンプルなものが良いという方はTextyle.jsを使ってみ...

List

  • 2019/10/15

Emoji Button - フレームワークに頼らない絵文字ピッカー

JavaScriptライブラリの多くが外部のフレームワークやライブラリに依存しています。そうした外部ライブラリを用いることで、コード量が減らせるメリットがありますが、依存性が発生してしまいます。そこで逆に依存性が一切ないライブラリに需要が出ます。今回紹介するEmoji Buttonは依存ライブラリのない絵文字ピッカーで...

List

  • 2019/10/14

Dark Mode Toggle - ダークモード切り替え用Webコンポーネント

macOSから始まったダークモードは一気に広がっています。デスクトップはもちろん、Webサイトにおいてもダークモードの需要が高まっています。しかし、単純に暗いCSSを用意すれば良いだけではありません。ユーザにとって使いやすいダークモードを提供するために使ってみたいのがDark Mode Toggleです。Googleが...

List

  • 2019/10/14

Looper - Webブラウザ上でループするアニメーションGIFを作成

アニメーションGIFはループする動画が簡単に作れるとあって、繋ぎが感じられないループアニメーションが映えます。アニメーションGIFを一から作るのは大変ですが、動画を使ったりプログラムで組んだりできます。今回紹介するLooperはそんなアニメーションGIFを生成するためのソフトウェアです。すべてプログラミングして作成しま...

List

  • 2019/10/11

TaskTreemap - プロジェクトのタスク規模と進捗をツリーマップで可視化

プロジェクト管理において可視化は大事な要件です。一覧にすると膨大に見えるタスク群も、規模を比べたり、その進捗を可視化することで全体像が見えてきます。定性的に「たくさん」ではなく、定量的に見なければなりません。そこで使ってみたいのがTaskTreemapです。タスクの規模と進捗をツリーマップを用いて表現します。## Ta...

List

  • 2019/10/11

VOIDCALL - 13KBという制限の中で作られたJavaScript製ゲーム

かつてのファミコンゲームがごくわずかなリソースを活用して作られていたりして話題になります。リソースが潤沢な現在ではなかなか思いつかないようなアイディアに溢れています。今回紹介するVOIDCALLはJavaScriptのゲームを13KB以下で作成する、そんなコンテストで作られた作品です。## VOIDCALLの使い方ゲー...

None

  • 2019/10/10

jsonbox.io - ユーザ登録不要で使えるJSONストレージサーバ

ただちょっとしたデータを保存したいだけなのに面倒なユーザ登録であったり、設定が必要となると気持ちが萎えてしまいます。せっかくの作ろうという熱量を維持するためには、とにかく簡単に使える仕組みが必要です。今回紹介するjsonbox.ioはまさにそのためのソフトウェアです。ユーザ登録も不要でJSONデータの送受信ができます。...

List

  • 2019/10/09

Web Radio Visualizer - Webラジオを音源としたビジュアライザー

オーディオのビジュアライザーをずっと見ていても飽きないという人は多いでしょう。ただ音楽を流すだけでなく、可視化することで別な楽しさが生まれます。そのため、幾つものパターンが作られています。今回紹介するWeb Radio VisualizerはWebラジオを音源としたビジュアライザーです。## Web Radio Vis...

List

  • 2019/10/06

Goodwork - ストレスないプロジェクト管理

システム開発に限りませんが、プロジェクト管理の有無が成否を分けるのは間違いありません。ステータスや新しい要望を適切に管理することで、スムーズな開発を実現できます。今回紹介するのはLaravel製のシンプルなプロジェクト管理、Goodworkです。## Goodworkの使い方ホーム画面です。並んでいるのはタスクです。!

List

  • 2019/10/05

Ackee - プライバシーへ配慮したアクセス解析

Webサイトのアクセス解析と言えばGoogleアナリティクスを使っているケースが多いですが、社内のセキュリティ上利用できないという場合もあるでしょう。そうした時には代替になるソフトウェアが必要です。今回紹介するのはnodeで作られたAckeeです。## Ackeeの使い方基本的にはページビューとリファラーが取れます。!

List

  • 2019/10/04

Sshwifty - Webブラウザ向けのSSH/Telnetクライアント

従来はローカルアプリケーションだったものが、どんどんWebアプリケーション化しています。開発環境においてもクラウドIDEが使われるようになっています。殆どの操作がWebブラウザ上でできるようになるでしょう。今回紹介するSshwiftyはSSHクライアントをWebブラウザベースで提供します。## Sshwiftyの使い方...

List

  • 2019/10/04

MarioHTML - Web製のマリオブラザーズ

マリオブラザーズは登場以来、世界中の人たちに愛されるキャラクターになっています。そして、開発者にとってはマリオブラザーズ風のゲームを作るのが楽しみの一つにさえなっています。今回紹介するMarioHTMLはWebブラウザ上で遊べるマリオになっています。## MarioHTMLの使い方ゲーム画面です。土管には入れませんが、...

List

  • 2019/10/03

Featmap - Webでユーザストーリーマッピング

ユーザーストーリーマッピングという考え方があります。左右にユーザ体験の価値を時系列とし、上下に優先順位を指定してストーリーを並べていきます。類似したストーリーは優先順位に沿って上下に並べます。そんなユーザーストーリーマッピングによってストーリーの漏れを防ぐことができます。Featmapはまさにそのためのソフトウェアにな...

List

  • 2019/10/03

hashids.js - 数字からYouTube風のID文字列を生成

WebサービスでユニークなURLを提供する際に、IDを数字のまま出してしまうとデータ件数が何件あるのかバレてしまいます。そこでランダムな文字列を作ってIDの代わりにしたりします。しかし、数字のIDとランダムな文字列、二つ管理するのは面倒です。そこで使ってみたいのがhashids.jsです。数字からYouTube風なID...

List

  • 2019/10/02

Universal Résumé Template - 多彩なデバイスに対応したレジュメテンプレート

日本であれば履歴書のフォーマットが一つの形に決まっていますが、多くの国ではそういったものはありません。特定の紙のフォーマットではなく、見やすく自分の経歴や経験を記述するのが肝要になります。今回紹介するUniversal Résumé Templateはとある開発者の履歴書(レジュメ)であり、テンプレートとして再利用でき...

List

  • 2019/10/02

The Most Dangerous Writing App - 書き続けることが強制されるテキストエディタ

集中して文章を書くためにはどうしたら良いでしょうか。自然と筆が進んでゾーンに入れる人もいますが、それは特別な人たちです。凡人たる我々は何かきっかけが必要です。人によってはご褒美だったり、逆にペナルティだったりするでしょう。今回紹介するThe Most Dangerous Writing Appはその名の通り、ペナルティ...

List

  • 2019/10/01

Firefly III - 機能豊富なWeb家計簿

お金の管理は大事です。残高も気にせずお金を使っていれば、貯金などできようもありません。お金に関して言えばマイクロマネジメントしても良いでしょう。特に何か目的のある貯金であれば尚更です。今回はWebベースの家計簿、Firefly IIIを紹介します。多機能、レポートの多さが魅力です。## Firefly IIIの使い方ダ...

List

  • 2019/09/30

laptop CSS - ラップトップ風の枠を表示するCSS

同じ映像であっても、その見せ方によって受ける印象は大きく異なります。レトロな映像を、同じくレトロなテレビの枠に当てはめて再生すると雰囲気が出ます。人は単純に映像だけでなく、その周辺環境の影響も受けて楽しむことができます。今回紹介するlaptop CSSはそんな映像を表示する枠のようなものです。何がマッチするのか考えさせ...

List

  • 2019/09/28

SOUNDSCAPE - WebAudioを使って音楽を自動生成

BGMを必要とした時、その著作権は注意が必要です。下手に使うと後で某団体から請求が来るかも知れません。フリーな音楽を使えばそういった心配はありませんが、探すのが大変です。そこで使ってみたいのがSOUNDSCAPEです。Webブラウザ上で動的に音楽を生成します。## SOUNDSCAPEの使い方音が出ないのが残念ですが、...