ran
日本語

設計方法、コンポーネント、ツール

Ran Design、ranui、ranuts で製品を構築。各機能を独立して使い、開発者とエージェントを支援します。

エージェントで構築GitHub でスターする
サンプル

メンバーを招待

閲覧者編集者管理者
リクエストの失敗を再現招待を送信

このサンプルに対応するガイドの章InteractionWords

本物の ranui コンポーネントです。メールを空のままにするか、失敗を再現すると各状態を確認できます。

コンポーネント
41
ユーティリティ
90+
言語
8
ライセンス
MIT

ranui で組んだ実際の状態

アップロード中
quarterly-report.pdf64%
キャンセル
エージェント実行
  1. 4 ファイルを読み込む
  2. テストを実行
  3. プルリクエストを作成
読み込み中
ガラス
<r-glass>

どこから始めるか選ぶ

ranui

フレームワーク非依存の Web Components ライブラリ。スタイル済みの r- 要素 41 個を Vue・React・素の HTML のどこにでも置けます。

コンポーネント一覧

ranuts

文字列・オブジェクト・色・時間・ファイル・DOM を扱う型付きユーティリティが 90 以上。tree-shaking 対応、依存ゼロ。

ドキュメントを読む

Ran Design

レイアウト、操作、モーション、実際の検証を扱う、ライブラリに依存しない設計方法。

設計方法を見る

多くのライブラリが用意していないもの

ranuiコンポーネント
  • プレーヤー <r-player>モジュール化されたコントローラーを核とする HLS アダプティブ配信の動画プレーヤー。
  • カラーピッカー <r-colorpicker>色相とアルファのスライダーを備えた HSV ピッカー。HEX / RGBA をリアルタイムに出力します。
  • レーダーチャート <r-radar>Canvas 描画のレーダーチャート。軸ごとのラベルとその個別スタイルに対応。
  • 数式 <r-math>遅延読み込みの Temml で、属性ひとつから LaTeX をネイティブ MathML に描画します。
  • スクラッチカード <r-scratch>完了しきい値つきの、削って表示する Canvas インタラクション。
ranutsユーティリティ
  • Bridge PostMessageBridgepostMessage 上の Promise ベース RPC。iframe・Worker・タブをまたぎ、構造化クローン転送とチャネル分離に対応します。
  • Visual ApplicationPixiJS 風のシーングラフ。WebGPU / WebGL / Canvas のレンダラーを差し替えられます。
  • 仮想 DOM h() · init()snabbdom 風の vDOM。hyperscript、patch、差し替え可能なモジュールとライフサイクルフック。
  • TOTP TOTPRFC-6238 のワンタイムパスワード。SHA-1 から SHA3-512 まで、暗号ライブラリへの依存はゼロ。
  • MIME レジストリ getMime()約 1000 件の MIME ⇄ 拡張子の双方向検索。

インストールして使う

2 つのパッケージを入れ、要素を一度登録すれば、どこでも使えます。ビルド工程もフレームワークも必要ありません。

npm i ranui ranuts
インストールと登録
$ npm i ranui ranuts

// register the <r-*> elements once
import 'ranui'
import { debounce } from 'ranuts'
どこでも使う
<!-- Vue, React, or plain HTML -->
<r-button type="primary">Save</r-button>
<r-progress percent="66"></r-progress>