プログラミング言語 - TypeScriptの記事一覧
Minesweeper - Angular製のクラシカルなマインスイーパ
Windowsにはソリティアとともに有名なゲームとしてマインスイーパが知られています。ちょっとした時間つぶしのつもりでトライして、気付いたら数時間やっていたなんて経験は誰もがあるのではないでしょうか。そんな時間を奪い去る恐ろしさを秘めたゲームがMinesweeperです。Webブラウザだけで遊べる、恐ろしいゲームです。...
Web Demo Suit - Webカメラの映像にスーツを着せる
コロナウイルスの影響により、リモートワークが行われるようになっています。開発者であれば思ったよりも影響がなかったり、むしろ通勤時間がなくなって仕事がしやすくなったという人も多いのではないでしょうか。そんな中、オンラインミーティングなどでは寝間着や変な格好で出られず、わざわざ着替えたりしているかも知れません。そんな方はW...
Edtr.io - React製のWebページ編集コンポーネント
Webページを編集する際、管理画面で行わせる方式だと、編集した内容と実際の適用された状態とかかけ離れていることがあります。開発者であればイメージできることでも、そうでない人たちにとってはとても難しいでしょう。そこで便利なのが、Webページ上でWYSIWYGに編集できる仕組みです。今回はReact向けに提供されるEdtr...
OpenChakra - Chakra UI用のビジュアルエディタ
Chakra UIというのはReact向けに開発されているシンプルなUIコンポーネントです。Reactではコードの中にHTML構造が入り込んでいるので、デザイナーにとっては作業しづらいイメージがあります。そこで使ってみたいのがOpenChakraです。ドラッグ&ドロップでChakra UIを使ったデザインを行えます。#...
BreakTimer App - 強制してでも休憩をとろう
人は仕事の時間中、ずっと集中することはできません。適度に休憩を取らないと、生産性はむしろ下がっていきます。人や作業内容によって休憩を挟む間隔は異なるでしょう。今回紹介するBreakTimer Appは強制的に休憩を取らせてくれるユーティリティになります。## BreakTimer Appの使い方開始しました。!
Hacker UI - 開発者向けのWeb UIフレームワーク
Webサイトはシンプルなデザインが好みです。情報量が多いと、どこを見ていいのか分かりませんし、情報の取りこぼし（メールマガジンの送付設定など）があってイライラしたりします。開発者には開発者に合ったUIがあるはずです。今回紹介するHacker UIはまさに開発者のために作られたWeb UIフレームワークです。## Hac...
drop.lol - WebRTCを使って任意の相手とファイルの送受信
ファイルを送受信というのは意外と面倒です。特に目の前の相手にファイルを送りたい時です。メールアドレスを聞くのも面倒ですし、そのためにソーシャルメディアを交換するのも手間です。ファイル共有サービスを使おうにも、そのURLを通知するのはどうしたらいいでしょうか。そこで使ってみたいのがdrop.lolです。共通のURLを介し...
Muino Time Accounting - 時間管理と会計システムを一つに
フリーランスで、時間単位で働いている場合、請求書にその稼働実績を載せるよう依頼されることがあります。また、弁護士や会計士のように時間毎の報酬を決めている職業でも同様のレポートが必要になるでしょう。そうした人たちに使ってみて欲しいのがMuino Time Accountingです。プロジェクトとタスク毎の時間管理、会計シ...
JSON Editor - シンプルなUIのJSONエディタ
システム開発時にJSONを使う機会が増えています。Web APIなどで自動で出力させる場合もありますが、設定ファイルなどで自分の手作業で作る場合もあります。しかし、手作業で作るとミスしやすく、ストレスがたまります。そこで使ってみたいのが専用のエディタです。今回はシンプルなUIのJSON Editorを紹介します。## ...
WASM-ImageMagick - ImageMagickをWebAssemblyでWebアプリから使いやすく
様々なローカルアプリケーションがWeb化していますが、JavaScriptの実行速度はネイティブアプリケーションに比べて劣ってしまいます。しかしWebAssemblyを用いることで大幅に改善できます。今回紹介するWASM-ImageMagickは名前の通り、ImageMagickをWebAssembly化したソフトウェ...
Padloc - 個人/チームに対応したパスワード管理
パスワード管理はどのように行っていますか。個人であればGoogle Chromeのパスワード管理やキーチェーンなどで管理できますが、チームになると別物です。他の人が分かりやすいようにと安易なものを設定したり、チャットなどで共有していないでしょうか。今回紹介するPadlocは個人はもちろん、チーム管理にも対応したパスワー...
S3Uploader - Amazon S3上のファイルをアップロード&ダウンロード
Amazon S3にファイルをアップロードする場合、いくつかの方法があります。専用のUIを作ってアップロードする方法、Cyberduckのような汎用ソフトウェアを使ってアップロードする方法、そしてAmazon S3の管理画面でアップロードする方法です。セキュリティ上、Amazon S3の管理画面が使えない場合もあるでし...
Excalidraw - プロトタイプに。ラフな線が書けるドローツール
きっちりした、正確な図を書くと、ほんの少しの乱れが気になって修正に時間がかかってしまったりします。それは些細な問題で、本質的な問題ではないにも関わらずです。特にプロトタイプなどではラフさを残した方がはやく作れます。今回紹介するExcalidrawは手書き風の図を書けるソフトウェアです。乱れている分、細かな点は気にせず作...
React Spectrum - カラフルなテキスト用プレースホルダーを生成
Webやアプリのデザインを行う際に、アテで文字列を適用します。同じ文字を繰り返す、小説の一文を使うなど様々な方法がありますが、むしろテキストでない方がいいこともあるでしょう。そんな時に使ってみたいのがReact Spectrumです。カラフルなプレースホルダーを生成します。## React Spectrumの使い方生成...
git-story - GitのコミットメッセージをWebページ化
Gitのコミットメッセージは細かく書いていますか？CUIで管理していると長文が書きづらいのでついつい簡単なメッセージになってしまっていないでしょうか。どうせ、そんなに読まないだろうとなおざりになっていると尚更です。そこで使ってみたいのがgit-storyです。GitのコミットメッセージをHTMLにしてくれるソフトウェア...
TextCast - 画面上に文字を表示
プレゼンテーション中にテキストを流したり、ニコニコ動画のように応援メッセージを流したりと、画面の上にテキストを表示したいというニーズはよくあります。そうしたソフトウェアの多くは特定のサービスに関連付いています。今回紹介するTextCastは送られてきたテキストを画面に表示するのに特化しています。表示するテキストの送り元...
Screenshot to Google Slides - スクリーンショットを撮影してスライドに貼り付け、スクリーンショットを撮影してスライドに貼り付け…
Googleスライドを使ってスライドを作っている際に、Webサイトのスクリーンショットを多数貼り付けたいと思うことがあるかも知れません。そのためスクリーンショットを保存して、アップロードするのは面倒です。何度も繰り返すと、心が折れてしまうかも知れません。そんな特定用途に限って使えるのがScreenshot to Goo...
Falco - Webサイトのパフォーマンスを可視化するダッシュボード
Webの解析ツールというと、アクセスを解析するものが殆どです。ビューやUUを計測して、Webサイトの改善に活かします。それらのデータは管理者向けのものであり、訪問者はデータを渡すだけでした。Falcoは異なる視点でデータを収集します。それはWebサイトの使いやすさ、パフォーマンスに注目しています。## Falcoの使い...
wasm2lua - WebAssemblyをLuaに変換
WebAssemblyはユニバーサルバイナリとも表現されます。どんな言語であってもWebAssemblyに変換できれば、各プログラミング言語にあるWebAssembly環境（機能拡張など）で実行できます。そんな万能的に使えるWebAssemblyをあえてLuaに変換するのがwasm2luaです。## wasm2luaの...
LegraJS - レゴ風ブリックを使ってドローイング
レゴはみんなが好きなおもちゃでしょう。一つ一つは小さなブリックですが、それを組み合わせることで何でも自分が好きなものを作り上げられます。最近ではIoTとも組み合わせて使われています。そんなレゴ風のブロックを使ってドローするライブラリがLegraJSです。## LegraJSの使い方スマイルマークのアニメーション。!