Webの記事一覧
upload.express - React製のファイル共有サービス
インターネットを通じたファイル共有サービスはたくさんあります。日本でも幾つかあり、ビジネスでも使われていたりします（ユーザ情報漏洩して炎上したりもしていましたが）。それだけ需要が大きい分野なのでしょう。今回紹介するupload.expressはそんなファイル共有サービスの一つです。UIでReactを採用し、モダンな作り...
shiori - ターミナル/Webで使えるシンプルなブックマーク管理
ブックマークを管理するのはWebブラウザに付属のものを使うのが基本ですが、大量のブックマークをすると管理が煩雑になります。そこでソーシャルブックマークを使うようになりますが、データを公開したくないと考える人も大勢います。そこで使ってみたいのがshioriです。ターミナルやWebで使えるブックマーク管理です。## shi...
Textyle.js - シンプルなテキストエフェクトライブラリ
単純にテキストを表示しただけでは誰も気付きません。大事な文言であれば色やサイズを変えたりして、目立つ仕組みが必要です。それでももっと目立たせたい、ユーザの目に届けたいならばアニメーションしてみてはいかがでしょうか。あまり派手なものは嫌われるかも知れませんので、シンプルなものが良いという方はTextyle.jsを使ってみ...
Emoji Button - フレームワークに頼らない絵文字ピッカー
JavaScriptライブラリの多くが外部のフレームワークやライブラリに依存しています。そうした外部ライブラリを用いることで、コード量が減らせるメリットがありますが、依存性が発生してしまいます。そこで逆に依存性が一切ないライブラリに需要が出ます。今回紹介するEmoji Buttonは依存ライブラリのない絵文字ピッカーで...
Dark Mode Toggle - ダークモード切り替え用Webコンポーネント
macOSから始まったダークモードは一気に広がっています。デスクトップはもちろん、Webサイトにおいてもダークモードの需要が高まっています。しかし、単純に暗いCSSを用意すれば良いだけではありません。ユーザにとって使いやすいダークモードを提供するために使ってみたいのがDark Mode Toggleです。Googleが...
Looper - Webブラウザ上でループするアニメーションGIFを作成
アニメーションGIFはループする動画が簡単に作れるとあって、繋ぎが感じられないループアニメーションが映えます。アニメーションGIFを一から作るのは大変ですが、動画を使ったりプログラムで組んだりできます。今回紹介するLooperはそんなアニメーションGIFを生成するためのソフトウェアです。すべてプログラミングして作成しま...
TaskTreemap - プロジェクトのタスク規模と進捗をツリーマップで可視化
プロジェクト管理において可視化は大事な要件です。一覧にすると膨大に見えるタスク群も、規模を比べたり、その進捗を可視化することで全体像が見えてきます。定性的に「たくさん」ではなく、定量的に見なければなりません。そこで使ってみたいのがTaskTreemapです。タスクの規模と進捗をツリーマップを用いて表現します。## Ta...
VOIDCALL - 13KBという制限の中で作られたJavaScript製ゲーム
かつてのファミコンゲームがごくわずかなリソースを活用して作られていたりして話題になります。リソースが潤沢な現在ではなかなか思いつかないようなアイディアに溢れています。今回紹介するVOIDCALLはJavaScriptのゲームを13KB以下で作成する、そんなコンテストで作られた作品です。## VOIDCALLの使い方ゲー...
jsonbox.io - ユーザ登録不要で使えるJSONストレージサーバ
ただちょっとしたデータを保存したいだけなのに面倒なユーザ登録であったり、設定が必要となると気持ちが萎えてしまいます。せっかくの作ろうという熱量を維持するためには、とにかく簡単に使える仕組みが必要です。今回紹介するjsonbox.ioはまさにそのためのソフトウェアです。ユーザ登録も不要でJSONデータの送受信ができます。...
Web Radio Visualizer - Webラジオを音源としたビジュアライザー
オーディオのビジュアライザーをずっと見ていても飽きないという人は多いでしょう。ただ音楽を流すだけでなく、可視化することで別な楽しさが生まれます。そのため、幾つものパターンが作られています。今回紹介するWeb Radio VisualizerはWebラジオを音源としたビジュアライザーです。## Web Radio Vis...
Goodwork - ストレスないプロジェクト管理
システム開発に限りませんが、プロジェクト管理の有無が成否を分けるのは間違いありません。ステータスや新しい要望を適切に管理することで、スムーズな開発を実現できます。今回紹介するのはLaravel製のシンプルなプロジェクト管理、Goodworkです。## Goodworkの使い方ホーム画面です。並んでいるのはタスクです。!
Ackee - プライバシーへ配慮したアクセス解析
Webサイトのアクセス解析と言えばGoogleアナリティクスを使っているケースが多いですが、社内のセキュリティ上利用できないという場合もあるでしょう。そうした時には代替になるソフトウェアが必要です。今回紹介するのはnodeで作られたAckeeです。## Ackeeの使い方基本的にはページビューとリファラーが取れます。!
Sshwifty - Webブラウザ向けのSSH/Telnetクライアント
従来はローカルアプリケーションだったものが、どんどんWebアプリケーション化しています。開発環境においてもクラウドIDEが使われるようになっています。殆どの操作がWebブラウザ上でできるようになるでしょう。今回紹介するSshwiftyはSSHクライアントをWebブラウザベースで提供します。## Sshwiftyの使い方...
MarioHTML - Web製のマリオブラザーズ
マリオブラザーズは登場以来、世界中の人たちに愛されるキャラクターになっています。そして、開発者にとってはマリオブラザーズ風のゲームを作るのが楽しみの一つにさえなっています。今回紹介するMarioHTMLはWebブラウザ上で遊べるマリオになっています。## MarioHTMLの使い方ゲーム画面です。土管には入れませんが、...
Featmap - Webでユーザストーリーマッピング
ユーザーストーリーマッピングという考え方があります。左右にユーザ体験の価値を時系列とし、上下に優先順位を指定してストーリーを並べていきます。類似したストーリーは優先順位に沿って上下に並べます。そんなユーザーストーリーマッピングによってストーリーの漏れを防ぐことができます。Featmapはまさにそのためのソフトウェアにな...
hashids.js - 数字からYouTube風のID文字列を生成
WebサービスでユニークなURLを提供する際に、IDを数字のまま出してしまうとデータ件数が何件あるのかバレてしまいます。そこでランダムな文字列を作ってIDの代わりにしたりします。しかし、数字のIDとランダムな文字列、二つ管理するのは面倒です。そこで使ってみたいのがhashids.jsです。数字からYouTube風なID...
Universal Résumé Template - 多彩なデバイスに対応したレジュメテンプレート
日本であれば履歴書のフォーマットが一つの形に決まっていますが、多くの国ではそういったものはありません。特定の紙のフォーマットではなく、見やすく自分の経歴や経験を記述するのが肝要になります。今回紹介するUniversal Résumé Templateはとある開発者の履歴書（レジュメ）であり、テンプレートとして再利用でき...
The Most Dangerous Writing App - 書き続けることが強制されるテキストエディタ
集中して文章を書くためにはどうしたら良いでしょうか。自然と筆が進んでゾーンに入れる人もいますが、それは特別な人たちです。凡人たる我々は何かきっかけが必要です。人によってはご褒美だったり、逆にペナルティだったりするでしょう。今回紹介するThe Most Dangerous Writing Appはその名の通り、ペナルティ...
Firefly III - 機能豊富なWeb家計簿
お金の管理は大事です。残高も気にせずお金を使っていれば、貯金などできようもありません。お金に関して言えばマイクロマネジメントしても良いでしょう。特に何か目的のある貯金であれば尚更です。今回はWebベースの家計簿、Firefly IIIを紹介します。多機能、レポートの多さが魅力です。## Firefly IIIの使い方ダ...
laptop CSS - ラップトップ風の枠を表示するCSS
同じ映像であっても、その見せ方によって受ける印象は大きく異なります。レトロな映像を、同じくレトロなテレビの枠に当てはめて再生すると雰囲気が出ます。人は単純に映像だけでなく、その周辺環境の影響も受けて楽しむことができます。今回紹介するlaptop CSSはそんな映像を表示する枠のようなものです。何がマッチするのか考えさせ...