Webの記事一覧
JavaScriptのイベントをたくさん見られるサイト - 開発時に役立つ。JavaScriptのイベント処理を確認
JavaScriptでのアプリケーション開発において肝になるのがイベントのハンドリングです。マウスやキーボード操作などによって多様なイベントが呼ばれます。それらの購読、解除によってアプリケーションを構築するのですが、慣れている人であっても複雑で分かりづらいものです。どんなイベントがあって、どうデータが送られてくるのかを...
ReLaXed - Web技術からPDFを生成
PDFを作るのは数年前に比べると、さほど難しくなくなっています。プリンタドライバ形式でPDFを生成するプロダクトは多く、簡単な体裁のものであればすぐに作成できます。しかし、よりこだわったレイアウトであったり、自動化となると、まだまだ技術が必要です。今回はWeb技術でPDFが作れるReLaXedを紹介します。## ReL...
File Browser - Webベースのファイル管理
Webアプリケーションが増えてきて、Webブラウザ上でドキュメントを作ったりする機会が増えています。そうした中で欲しくなるのはファイル管理ツールでしょう。これもまた、Webブラウザ上で使えるものが便利です。今回はそんなWeb上でのファイル管理に使えるFile Browserを紹介します。## File Browserの...
Snibox - 自分で立てるスニペットサーバ
スニペットは開発中によく使います。同じコードは存在しない方が良いのですが、プロジェクトが異なる場合や、よく使う正規表現など取っておくと便利なコードの断片はよくあります。今回はそんなスニペットを管理するためのSniboxを紹介します。## Sniboxの使い方画面は3ペインに分かれています。一番左が言語、次がタイトル、そ...
Statup - Go製のステータスページ
Web APIやクラウドサービスを提供する際にはステータスページを作っておくと良いでしょう。サービスに万一のことがあった場合に、ステータスページがあることで障害の発生状況や回復状況が分かるようになります。今回紹介するStatupはステータスページを作成するためのシステムになります。## Statupの使い方デモページで...
Canvas Sketch - ビジネスモデルキャンバスをWeb上で
ビジネスモデルを考える際にビジネスモデルキャンバスを使うと、見逃していた視点を発見したり、相互の関連性を俯瞰的に確認できるようになります。A4の紙を使ってすぐに作れるのも魅力でしょう。今回はビジネスモデルキャンバスをWeb上で作れるCanvas Sketchを紹介します。Web上であれば何度も書き直したり、共有しやすい...
React Site Nav - Stripeにインスパイアされたメニュー表示
良いデザインは真似してみると、その良さやエッセンス、理由などが見えてくるものです。細部にまでこだわったデザインはやはり美しく、使いやすいUIやUXになるものでしょう。今回はReact Site Navというライブラリを紹介します。Stripeのメニューを真似したUIコンポーネントです。## React Site Nav...
lexrank.js - 日英対応のテキスト要約
情報は日々増える一方です。もはやすべての情報を収集するメリットは薄くなっています。次に大事なのは必要な情報だけをいかにして収集するかです。一つはフィルタリングで、情報の取捨選択です。もう一つは情報数は変えずに情報量を変えるのです。つまりテキスト要約で、lexrank.jsは日本語/英語に対応しています。## lexra...
Trends - GitHub Trendsを高速表示するWebアプリ
Webサイトの高速表示に注目が集まっています。日本で有名なところと言えば日経新聞のサイトがありますが、PWAやSPAといった技術を活用することで表示を高速化できるようになります。そんなPWAを駆使してGitHub Trendsを高速化にチャレンジしたソフトウェアがTrendsです。## Trendsの使い方最初の表示で...
Badgen - 各種サービスに対応したバッジを表示
GitHubのREADMEを見ると、様々なバッジが表示されています。バージョンいくつかコンパイル通った、テストが通過したといった情報であったり、ライブラリのバージョンを明記したりもします。そんなバッジを柔軟に生成できるのがBadgenです。SVG製なので軽量です。## Badgenの使い方デモです。横幅の広いバッジも作...
Pushbar.js - 上下左右どこからでも出せるドロワー
最近は常にヘッダーバーを表示しているサイトが増えていますが、正直うざいを感じることがあります。画面の大きくないスマートフォンなどではヘッダーが常にあることで表示されるコンテンツが狭くなってしまいます。そこで使ってみたいのがドロワーです。ユーザアクションに応じてヘッダーなどを表示する方がユーザビリティが高いと言えるでしょ...
Container web TTY - Dockerコンテナ用のWebベースのターミナル
Dockerコンテナに入ってシェルを叩きたいという時は多いです。そんな時にはIDを調べて、docker execで中に入ったりします。しかし都度IDを調べたり、コマンドを叩くのは面倒ではないでしょうか。そこで使ってみたいのがContainer web TTYです。コンテナの内部に入るのがとても簡単になるソフトウェアです...
webdiff - WebベースのGit差分表示
バージョン管理を入れていて役立つのが差分（Diff）です。Gitでは標準で git diff が使えますが、大きな変更を行っている時には見づらいでしょう。かといって専用のソフトウェアを使うのも面倒です。そこで使ってみて欲しいのがwebdiffです。Gitコマンドに連携したWebブラウザベースの差分表示ツールです。## ...
TOAST UI Image Editor - Canvasを使ったリッチな画像編集
画像編集と言えばPhotoshopを思い浮かべる人が多いでしょう（またはGIMP）。しかしPhotoshopのすべての機能を満遍なく使いこなしている方はほとんどいないはずです。それどころか、無料のソフトウェアでも実は十分だったという方もいるでしょう。そこで注目したいのがTOAST UI Image Editorです。W...
lepto - WebとCLIで画像最適化
スマートフォンやデジカメなど、画像コンテンツがどんどん増えています。綺麗な写真を、と思うとファイルサイズも大きくなる一方で、あっという間にストレージを逼迫してしまいます。そこで使ってみたいのがleptoです。様々なフィルタリングをつけた上で自動的に画像を最適化してくれるソフトウェアです。## leptoの使い方Web版...
Simple Keyboard - Web上のシンプルなバーチャルキーボード
セキュリティへの意識が高いサイト、例えば銀行などではログイン時にソフトウェアキーボードを提供しています。しかしアルファベットの順番がキーボードと異なるので入力しづらいこともしばしばです。そこでより本格的なバーチャルキーボードとしてSimple Keyboardを紹介します。日本語入力はできませんが、標準キーボードと変わ...
PWACompat - PWAに対応しない古いブラウザでもWeb App Manifestに対応させる
PWAの一要素としてWeb App Manifestがあります。JSONファイルを用意しておくことで、Webアプリをローカルアプリケーションかのように保存できます。この時、アイコンやスプラッシュスクリーンも大事な要素です。古いブラウザでは対応していないPWAについて、PWACompatが対応させてくれます。## PWA...
MediaStreamRecorder - Webで音声/動画を録画
HTML5ではWebカメラやマイクにアクセスできます。例えばWebチャットなどで使われたりしますが、ARに使ったりとアイディア次第で面白い使い方が考えられます。録音、録画だって可能です。今回紹介するMediaStreamRecorderはMediaRecorder APIを使った録音/録画が実装できます。## Medi...
page-transitions-travelapp - ネイティブレベルのUXを体感できるWebアプリ
ハイブリッドアプリやPWAなど、Webアプリケーションをスマートフォンのネイティブアプリ風に使う技術が発展しています。ネイティブアプリと異なり、インストールの手間がなく、プラットフォーマーによる縛りもないのがWebの魅力と言えます。そんなWeb技術を駆使して作られたのがpage-transitions-travelap...
mobile-drag-drop - スマートフォン/タブレットでもドラッグ&ドロップAPIを使う
HTML5で追加されたAPIの一つ、ドラッグ&ドロップはWebアプリケーションをよりローカルアプリケーションのように使えるようにするAPIです。主なターゲットはデスクトップのようですが、タブレットやスマートフォンも業務利用が増えています。そこで使ってみて欲しいのがmobile-drag-dropです。モバイル向けにドラ...