Webの記事一覧
Quotebacks - コンテンツ引用をしやすくするGoogle Chrome機能拡張
Webはページ同士がリンクで繋がって構成されています。その際、単にURLを付けるだけでもいいですし、内容を引用することもできます。引用を使うことで、リンク先の内容が分かりやすくなり、誘導につなげることができます。今回紹介するQuotebacksはそんな引用をしやすくするGoogle Chrome機能拡張になります。##...
Photon - WebAssemblyで高速画像編集
WebAssembly（WASM）の大きな特徴として、その実行速度が挙げられます。Webブラウザ上で実行されるJavaScriptでは限界があった速度も、WebAssemblyであればネイティブ並の速度で実行できます。そんな実行速度の速さを活かしたソフトウェアがPhotonです。WebAssemblyの力で画像を処理し...
Grid.js - React/Angular/VueをサポートしたHTMLテーブルライブラリ
HTMLで使ってデータをテーブル表示するのは簡単です。しかし、ちょっとUIをよくしたり、ソートなどの機能を追加しようと思うと、途端に面倒になります。素のHTMLのままではとても使い勝手がいいとはいえません。そんなHTMLテーブルを手軽に高機能化してくれるライブラリがGrid.jsになります。## Grid.jsの使い方...
Notence - Markdownとカンバンをサポートしたノートアプリ
メモを取る用のノートアプリはどんなものを使っているでしょうか。普段使っているテキストエディタをそのまま利用している人も多いはずです。しかしテキストエディタでは記述できるフォーマットに限界があるのが問題です。今回紹介するNotenceはリストとカンバン、二つの記述方法をサポートしたノートアプリになります。## Noten...
WiFi Login Card - WiFi接続情報を載せたカードを作成
コワーキングスペースやイベント会場に行くとWiFiのSSIDとパスワードが書かれた紙があります。それを入力しないとインターネットにつなげられないので、とてもアナログな操作が求められます。これはとても面倒です。そこで使ってみたいのがWiFi Login Cardです。WiFiの接続情報を記述したQRコードを手軽に作成して...
Image Scrubber - Webブラウザで上でプライバシーに配慮した写真加工を行う
この記事が一般公開される頃にはBLMも落ち着いているでしょうか。欧米ではBLM運動が活発に行われており、様々な余波が生じています。今はソーシャルの時代であり、デモで撮影された写真があっという間に拡散されています。そうやって撮影された写真には肖像権があり、おいそれとアップロードするのはよくありません。まず最低限の処理をI...
TitleRun - これならバレない！タイトル部分で行うゲーム
仕事中に堂々とゲームをやるのは難しいですが、多少の息抜きがあってもいいのではないでしょうか（あくまでも個人の意見です）。問題はいかに見つからないかになりますが、ぱっと見で分からなければ問題ないでしょう（あくまでも個人のry）。今回紹介するTitleRunはWebブラウザのタイトル部分を使って行うゲームになります。## ...
Airshare - LANでファイル共有するコマンド
最近では各家庭でコンピュータとスマートフォン、タブレットが混在しています。しかしファイルサーバのようなものはないので、データの受け渡しにメッセージアプリやメールを使っていたりしないでしょうか。そこで使ってみて欲しいのがAirshareです。LAN内でファイルを授受するのに使えるファイル共有ソフトウェアです。## Air...
tailblocks - Tailwindをベースにしたブロックデザインパターン
CSSフレームワークとしてTailwindが知られています。画一的なデザインを提供するBootstrapなどと異なり、個別のスタイルのみを提供します。UI部品にする際には、それらのスタイルを組み合わせて自作する必要があります。より自由度が高く、作業を効率化してくれるフレームワークです。そんなTailwindを使ってブロ...
tw-style - TwitterのUIを自分好みにカスタマイズ
住めば都という言葉はありますが、普段使いしているツールのUIが変わると慣れるまで相当なストレスになります。ネットの世界においては自分でカスタマイズできる領域も大きいので、リアルほど我慢を強いられることはありません。自分なりの都にすればいいのです。今回はtw-styleを紹介します。新しいTwitterのUIについて、自...
Excalidraw Claymate - Excalidrawを使ったアニメーション作成ソフトウェア
教科書や書籍の端っこでパラパラ漫画を書いた経験は多くの人があるはずです。その際には前の絵とちょっとだけずらして書いていくのがポイントになります。ちょっとずつずらして書くのを繰り返すことで、一気にページをめくると動いて見えるようになります。そんなパラパラ漫画風のアニメーションGIFを作れるのがExcalidraw Cla...
Tweeter Go - ツイート機能のみのTwitterクローン
Twitterっぽいアプリを作ってみたいと考える人は多いようです。本家は多機能ですが、ツイートしたり、フォローするような仕組みだけ見れば、他でも使えそうなテクニックになりそうです。ソーシャルネットワークアプリの基礎ともいえます。もしGoを使うならばTweeter Goが参考になるかも知れません。ミニTwitterクロー...
Color Copy Paste - リアルの物体から色情報を取得
任意の場所から色情報を取得してくれるカラーピッカーは便利な機能です。Webブラウザでも使っていますし、プレゼン作成ソフトウェアや画像編集ソフトウェアでもよく使います。今回紹介するColor Copy Pasteはそんなカラーピッカーソフトウェアなのですが、抽出する対象が異なります。それはリアルの物から色情報を取得するの...
Live.js - JavaScriptを読み込むだけで使えるライブリロードライブラリ
Webサイトを開発している時には、その修正内容を素早く確認したいはずです。ライブリロードやホットリロードといった技術もありますが、専用のサーバなどを用意するのでちょっと手間です。そこで使ってみたいのがLive.jsです。JavaScriptを読み込むだけで使えるライブ/ホットリロードを実現します。## Live.jsの...
CLaD ASCII - アスキーアート製ミュージックビデオ
ミュージックビデオはミュージシャンにとって、音楽を知ってもらうために大事な作品です。しかしコロナウイルスの影響や、遠隔地に住むグループではすぐに集まって撮影するのが難しいです。Charlotte Light and Darkもそんなミュージシャンの一つです。そこで彼らはアスキーアート製のミュージックビデオを作ることにし...
MapGenerator - 空想のリアルな地図を生成
ゲームや小説などで街の地図が欲しくなることがあります。現実のものを使ってもいいですが、地図サービスのデータは著作権が関わってきます。それに現実のものでは創造性が阻害されてしまうかも知れません。そこで使ってみたいのがMapGeneratorです。架空の地図を自動生成してくれるソフトウェアです。## MapGenerato...
OBS Remote Tablet - OBSの操作をリモートから行う
オンラインでイベントが行われるようになって俄然注目が集まっているのがOBSです。OBSを使ってウェビナーやミートアップを配信している人は多いでしょう。機能が多いだけに、OBSの使いこなしによって品質が大きく変わります。今回はOBSをタブレット、Webブラウザから使えるようにするOBS Remote Tabletを紹介し...
Stoplight Studio - Web APIの設計とドキュメントを管理するエディタ
Web APIを綺麗に設計するのはとても大変です。リソース名の決め方一つとってもそうですし、単純にCRUD操作だけで済まない場合のアクション名をどう指定するか、HTTPメソッドを何にするかといった問題もあります。今回紹介するStoplight StudioはWeb APIのデザイン、ドキュメント整備を一括して行えるエデ...
PreBill - サブスクリプションの支出管理&リマインダー
今は所有より利用の時代といわれています。物を買うのではなく、その利用する権利を月額で購入するイメージです。そのため、多くのサービスを課金してつ買っているのではないでしょうか。そうした支出は積もるとバカにならないかも知れません。ぜひPreBillを使って確認してみましょう。## PreBillの使い方トップページです。!
GraphEditor - プレビュー付きのグラフエディタ
情報は単独で存在するのではなく、それぞれが紐付いています。ある一つの処理の出力は別な処理の入力になります。最終的な成果物にたどり着くまで、複数の処理がつながっていくのです。今回紹介するGraphEditorはそうした情報の紐付きを表現するためのエディタになります。## GraphEditorの使い方上がプレビュー、下が...