uga.dev - A Front-end Engineer's shed

現在のテーマは「ライトモード」です。

ツール集

作ったものをまとめている階層です。

入力された値は収集されたり外部に送信されることはありません。詳しくはプライバシーポリシーをご覧ください。

HTMLでtable実装するときとかに役立つツール
オフィスツールなどで作成された表をHTMLとして実装する人のための支援ツールです。業務上公開前の情報を外部に送信できないケースにおいて、指示書にある表を整形されたHTMLにフォーマットして実装しやすくすることを主な用途に想定しています。
  • 開発者向け
Slack reminder command generator
Slackのリマインダーコマンドを生成するためのツールです。リマインダーの内容・時間・繰り返しの設定を行うためのコマンドを生成できます。
WebページからURLを抽出できるツール
リンク先一覧の調査や、画像のURL一覧を作ったりするタスクがある人のためのツールです。URLを抽出したいページの内容(DOM)をコピー&ペーストしてください。Slackやエクセルなどのアプリケーションの内容からも抽出できます。
  • ディレクター向け
  • プランナー向け
代替テキスト2択チャート
An alt Decision Treeを参考に作られた、画像の代替テキストと呼ばれるalt属性値を決める手助けをする2択チャートです。
  • 開発者向け
  • ディレクター向け
  • プランナー向け
  • ライター向け
文字数カウント
文章の文字数をカウントするツールです。原稿用紙換算、段落数も確認できます。

Playground

Accessible Name and Description Computation Playground
アクセシブルな名前および説明がどう計算されるかをテストするためのページです。
CSS Units Playground
それぞれのCSSの単位が、実際にはどのようなCSSピクセルになるのかを確認できるページです。
DOM Event Playground
JavaScriptがどのようなイベントを受け取るのかを確認できます。
Kaprekar Number Playground
カプレカ数のテストができます。ある整数を大きい順と小さい順に並べ替えてから、大きい数から小さい数を引いたとき、その結果が元の整数と同じになる値をカプレカ数といいます。入力した数字が特定の値を繰り返すようになる様子を確認してみましょう。
KeyboardEvent Playground
キーボード操作のテストができます。キーボードのキー名やキーコード、修飾キーの状態を確認しましょう。
Render Text in React Playground
Reactでテキストを出力する際の書き方の違いが、どのような読み上げの違いが生じさせるか確認してみましょう。
Sort Playground
さまざまなソート手法を試して、どのようにデータが並べ替えられるかを観察しましょう。
TouchEvent.touches Playground
タッチ操作のテストができます。デバイスのタッチ操作が利用可能か、何本の指でタッチできるのかを確認しましょう。