Appearance
kyDumix OKONOMI
概要
今まで、コード中で定数としていたダミーデータを、より実践的にAPI経由で「お好み」の形で呼び出すことが可能になるツールです。
使用例
Before
tsx
const article = {
title: "TITLE",
body: "THIS IS BODY...",
created_at: "2024-06-01T12:00:00+09:00",
updated_at: "2024-06-01T12:14:00+09:00"
}
export const Article: FC = () => {
return (
<div>
<h2>{ article.title }</h2>
<div>
CreatedAt: { article.created_at }
UpdatedAt: { article.updated_at }
</div>
<div>{ article.body }</div>
</div>
)
};After
tsx
export const Article: FC = () => {
const { data, error, isLoading } = useSWR(`https://api.dumix.ky-y.app/okonomi?r={
"title": "$text/min:10,max:20",
"body": "$text/min:100,max:200",
"created_at": "$dateISO8601",
"updated_at": "$dateISO8601"
}`, fetcher);
if (error) return <div>Failed to Load</div>
if (isLoading) return <div>Loading...</div>
return (
<div>
<h2>{ article.title }</h2>
<div>
CreatedAt: { article.created_at }
UpdatedAt: { article.updated_at }
</div>
<div>{ article.body }</div>
</div>
)
};実際に動作するサンプル
リクエスト方法
APIエンドポイント:https://api.dumix.ky-y.app/okonomi
現状、GET, POST, PUT, DELETEリクエストに対応してます。 URLの最大文字数に注意してください。
JSON形式で下記に従いリクエスト文を発行し、URLのクエリーrに設定してリクエストを送信してください。
(.../okonomi?r={"hoge": "$int" ...の形
用語説明
いくつか独自の用語が存在します。
ValueKeyについて
このAPIでは、ランダムな整数等の生成をリクエストするために、ValueKeyというものを利用します。
具体的には、整数なら$int、小数なら$floatを指定します。詳細は後述します。
ValueKeyを指定する場合、空白等の余計な文字を入力しないことをお勧めします。
完全一致により、ValueKeyの識別を行います。識別が不能な場合は、生成をスキップします。
Operatorについて
このアプリケーションでは、値域や文字数, 言語等の指定を表現するためにOperatorという仕組みを用いています。
OperatorにはKeyとValueが存在し、Keyにはmax, min, localeなど、Valueには200やja_JPなどを指定します。
例えば、最小値200、最大値300の、整数$intを指定する場合には以下のような表記を行います。
JSON
{
"int": "$int/min:200,max:300"
}ValueKeyと同様にOperatorを指定する場合、空白等の余計な文字を入力しないことをお勧めします。
対応コンテンツ
ランダム数字系
$int
64bit符号付き整数の範囲内で乱数を生成することが可能です。
多分必要ありませんが、CSPRNGで生成しています。
対応Operatorは以下の通りです。
| Key | 解説 | 値域 | デフォルト設定 |
|---|---|---|---|
min | 最小値 | 64bit符号付き整数の範囲内 | 0 |
max | 最大値 | 64bit符号付き整数の範囲内 | 2147483647 |
l | 文字数 | 1 ~ 18 | なし |
※min <= maxの関係性である必要があります
※lが入力された場合、min, maxの両方ともが無視されます
例
https://api.dumix.ky-y.app/okonomi?r=["$int"]
=> [901277036]
https://api.dumix.ky-y.app/okonomi?r=["$int/min:0,max:100"]
=> [38]
https://api.dumix.ky-y.app/okonomi?r=["$int/l:3"]
=> [998]$float
有効数字最大5桁の小数を生成することが可能です。
多分必要ありませんが、CSPRNGで生成しています。
対応Operatorは以下の通りです。
| Key | 解説 | 値域 | デフォルト設定 |
|---|---|---|---|
min | 最小値 | -10000 ~ 10000 | 0 |
max | 最大値 | -10000 ~ 10000 | 1 |
sig | 有効数字 | 1 ~ 5 | 1 ~ 5のランダム |
※min <= maxの関係性である必要があります
例
https://api.dumix.ky-y.app/okonomi?r=["$float"]
=> [0.07]
https://api.dumix.ky-y.app/okonomi?r=["$float/min:0,max:100"]
=> [51.5]
https://api.dumix.ky-y.app/okonomi?r=["$float/sig:3"]
=> [0.789]ランダム文字列系
$base64
ランダムなBase64を生成することが可能です。
多分必要ありませんが、CSPRNGで生成しています。
対応Operatorは以下の通りです。
| Key | 解説 | 値域 | デフォルト設定 |
|---|---|---|---|
min | 最小文字数 | 0 ~ 5000 | 1 |
max | 最大文字数 | 0 ~ 5000 | 2000 |
l | 文字数 | 1 ~ 5 | なし |
※min <= maxの関係性である必要があります
※lが入力された場合、min, maxの両方ともが無視されます
例
https://api.dumix.ky-y.app/okonomi?r=["$base64"]
=> ["eWAQZ"]
https://api.dumix.ky-y.app/okonomi?r=["$base64/min:0,max:100"]
=> ["FrwxIXgBuZR9OxteeeodtJc8WLRN0j3g/Sqj+qgwtH6uE51zZrTy08wC8FQjHfwq82x+l9DC2kA3yX+T"]
https://api.dumix.ky-y.app/okonomi?r=["$base64/l:20"]
=> ["T+e0+HX9CsQrdNAEFRFi"]$base32
ランダムなBase32を生成することが可能です。
多分必要ありませんが、CSPRNGで生成しています。
対応Operatorは以下の通りです。
| Key | 解説 | 値域 | デフォルト設定 |
|---|---|---|---|
min | 最小文字数 | 0 ~ 5000 | 1 |
max | 最大文字数 | 0 ~ 5000 | 2000 |
l | 文字数 | 1 ~ 5 | なし |
※min <= maxの関係性である必要があります
※lが入力された場合、min, maxの両方ともが無視されます
例
https://api.dumix.ky-y.app/okonomi?r=["$base32"]
=> ["6XXLLN2"]
https://api.dumix.ky-y.app/okonomi?r=["$base32/min:0,max:100"]
=> ["3CTT43PP7FMXSY"]
https://api.dumix.ky-y.app/okonomi?r=["$base32/l:20"]
=> ["OQ5RCMJBGJPU5ICOSOUM"]$hex
ランダムなHEXを生成することが可能です。
多分必要ありませんが、CSPRNGで生成しています。
対応Operatorは以下の通りです。
| Key | 解説 | 値域 | デフォルト設定 |
|---|---|---|---|
min | 最小文字数 | 0 ~ 5000 | 1 |
max | 最大文字数 | 0 ~ 5000 | 2000 |
l | 文字数 | 1 ~ 5 | なし |
※min <= maxの関係性である必要があります
※lが入力された場合、min, maxの両方ともが無視されます
例
https://api.dumix.ky-y.app/okonomi?r=["$hex"]
=> ["583FE39A1115F59CB2350"]
https://api.dumix.ky-y.app/okonomi?r=["$hex/min:0,max:100"]
=> ["983A0C068F48BA2C08E40276FE2D20D4386FB24B2B07FE1D1BC7"]
https://api.dumix.ky-y.app/okonomi?r=["$hex/l:20"]
=> ["E71E107E208ABD0D46EB"]$heColor
ランダムなHEXカラーを生成することが可能です。
多分必要ありませんが、CSPRNGで生成しています。
対応Operatorはありません。
例
https://api.dumix.ky-y.app/okonomi?r=["$hexColor"]
=> ["#320591"]$rgbColor
ランダムなRGBカラーを生成することが可能です。
多分必要ありませんが、CSPRNGで生成しています。
対応Operatorはありません。
例
https://api.dumix.ky-y.app/okonomi?r=["$rgbColor"]
=> ["rgb(171,145,117)"]ランダムコンテンツ系
$uuid
ランダムなUUIDv4を生成することが可能です。
多分必要ありませんが、CSPRNGで生成しています。
対応Operatorは存在しません。
例
https://api.dumix.ky-y.app/okonomi?r=["$uuid"]
=> ["0ac96b71-1371-4db1-ab13-f0d9764fd334"]$email
emailを生成することが可能です。
ドメインはexample.comやexample.orgなどのExample Domainが指定されます。
対応Operatorは存在しません。
例
https://api.dumix.ky-y.app/okonomi?r=["$email"]
=> ["[email protected]"]$dateISO8601
dateISO8601形式の日時を生成することが可能です。
対応Operatorは以下の通りです。
| Key | 解説 | 値域 | デフォルト設定 |
|---|---|---|---|
min | 開始日時(UNIX Timestamp) | 64bit符号付き整数の範囲内 | UNIXエポック |
max | 終了日時(UNIX Timestamp) | 64bit符号付き整数の範囲内 | 現在時刻 |
tx | タイムゾーン | 参照 | UTC |
例
https://api.dumix.ky-y.app/okonomi?r=["$dateISO8601"]
=> ["2000-07-05T18:10:58+00:00"]
https://api.dumix.ky-y.app/okonomi?r=["$dateISO8601/min:1704067200"]
=> ["2024-01-17T22:19:14+00:00"]$text
テキストを生成することが可能です。
対応Operatorは以下の通りです。
| Key | 解説 | 値域 | デフォルト設定 |
|---|---|---|---|
min | 最小文字数 | 0 ~ 2000 | 100 |
max | 最大文字数 | 0 ~ 2000 | 1000 |
locale | 言語 | en_US or ja_JP | en_US |
例
https://api.dumix.ky-y.app/okonomi?r=["$text"]
=> ["Magpie began wrapping itself up and saying, 'Thank you, it's a set of verses.' 'Are they in the kitchen that did not notice this last remark that had fallen into the."]
https://api.dumix.ky-y.app/okonomi?r=["$text/min:10,max:20"]
=> ["Gryphon whispered."]
https://api.dumix.ky-y.app/okonomi?r=["$text/locale:ja_JP"]
=> ["吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。"]$name
人名を生成することが可能です。
対応Operatorは以下の通りです。
| Key | 解説 | 値域 | デフォルト設定 |
|---|---|---|---|
locale | 言語 | en_US or ja_JP | en_US |
例
https://api.dumix.ky-y.app/okonomi?r=["$name"]
=> ["Mr. Mose Windler III"]
https://api.dumix.ky-y.app/okonomi?r=["$name/locale:ja_JP"]
=> ["津田 充"]$firstname
名前を生成することが可能です。
対応Operatorは以下の通りです。
| Key | 解説 | 値域 | デフォルト設定 |
|---|---|---|---|
locale | 言語 | en_US or ja_JP | en_US |
例
https://api.dumix.ky-y.app/okonomi?r=["$firstname"]
=> ["Cristobal"]
https://api.dumix.ky-y.app/okonomi?r=["$firstname/locale:ja_JP"]
=> ["翼"]$lastname
苗字を生成することが可能です。
対応Operatorは以下の通りです。
| Key | 解説 | 値域 | デフォルト設定 |
|---|---|---|---|
locale | 言語 | en_US or ja_JP | en_US |
例
https://api.dumix.ky-y.app/okonomi?r=["$lastname"]
=> ["Dickinson"]
https://api.dumix.ky-y.app/okonomi?r=["$lastname/locale:ja_JP"]
=> ["桐山"]実装予定
- UUID v7
- 変数機能
- 例えば、updated_atの方がcreated_atより後。みたいな指定ができるように。
- Base32とHEXのlowerCase, upperCase
