Marionette Docs
English GitHub

ナビゲーション

検索 Ctrl K

コンテンツ

  • ホーム
  • デモギャラリー
  • AI-friendly
  • ベンチマーク
  • レポート
  • チュートリアル
    • 最初のアプリを作る
    • 静的アセットを配信する
    • バックエンドとフロントエンドの通信
    • データアプリ構築手順
    • DashWind管理画面
    • デスクトップアプリ
  • コンポーネント

    一致する項目がありません。

    • 一覧ページ
    • レイアウト
      • Container
      • PageHeader
      • Section
      • Card
      • Stack
      • Grid
      • Split
      • Layout stories
    • タイポグラフィ
      • H1-H4
      • P
      • Span
    • アクション / リンク
      • Button
      • Link
      • ThemeToggleButton
      • Dropdown
      • Menu
      • Collapse
    • フォーム / 入力
      • Form
      • FormField
      • Input
      • FileUpload
      • Textarea
      • Select
      • Checkbox
      • RadioGroup
      • Switch
      • Toggle
      • Range
      • Rating
    • ナビゲーション
      • Sidebar
      • Breadcrumb
      • Tabs
      • Pagination
      • Navigation stories
      • Navbar
      • Steps
      • Step
      • Join
    • フィードバック / オーバーレイ
      • Alert
      • Toast
      • Progress
      • Skeleton
      • EmptyState
      • Modal
      • Overlay System Demo
      • Toast / Alert / EmptyState / Skeleton
      • Tooltip
      • Loading
      • Indicator
      • RadialProgress
    • データ / メディア
      • Table
      • Image
      • DataFrame
      • DataFrameChart
      • Avatar
      • Carousel
      • CarouselItem
      • Mask
      • Stat
      • Markdown
      • Code
      • Kbd
      • FontIcon
    • ページセクション
      • Hero
      • Timeline
      • Drawer
      • Footer
      • ChatBubble
      • MockupWindow
    • チャート
      • Chart
      • Chart (Line)
      • Chart (Bar)
      • Chart (Pie)
      • Chart (Doughnut)
      • Chart (Scatter)
    • その他
      • ThemeController
      • Actions
      • Divider
      • Box
      • AppShell
      • Region
      • Badge
      • TextComponent
      • LoadingWithVariants
      • TableWithVariants
      • TooltipWithVariants
      • DashWind Shell
      • DashWind PageHeader
      • DashWind CardPanel
      • DashWind AuthCard
      • DashWind SettingsSection
      • DashWind MetricGrid
      • DashWind DataTable
      • DashWind ResourcePage
  • API Docs
    • 一覧ページ
    • APIドキュメント(日本語版)
    • 2. App
    • 3. Context
    • 4. 低レベルHTML (`frontend/html`)
    • 5. Form APIs
    • 6.5 daisyUI 便利コンポーネント
    • 6.3 データ表示
    • 6.4 レイアウト・サーフェス
    • 6.1 リンク・ボタン・入力
    • 6.2 オーバーレイ・通知・状態表示
    • 6. Component APIs
    • 7. Flash APIs
    • 8. Runtime
    • DashWind API
  • 検索

Demo Gallery

Marionette デモを試す

README の Quick Start に置いていたサンプルアプリを集約しました。各デモはリポジトリルートから起動します。

管理画面サンプルダッシュボードのスクリーンショット

管理画面サンプルダッシュボード

ダッシュボードウィジェット、データ探索、運用操作を含む代表的な管理画面サンプルです。

起動
go run ./cmd/admin-sample
開く
http://127.0.0.1:8082
ソース
cmd/admin-sample/main.go
DashWind デモダッシュボードのスクリーンショット

DashWind 風 DaisyUI ダッシュボードデモ

Marionette の DashWind shell とヘルパーで構成した DaisyUI 風の管理画面デモです。

起動
go run ./cmd/dashwind-demo
開く
http://127.0.0.1:8083
ソース
cmd/dashwind-demo/main.go, internal/dashwinddemo/app.go

最小構成では dw.Use(app, dw.Options{}) の 1 回の呼び出しで DaisyUI テンプレート、DashWind CSS、ブラウザヘルパーを登録できます。

Marionette フルデモのスクリーンショット

Marionette フルデモ

Marionette のページ、データビュー、チャート、アクション、状態フローをまとめて確認できるフルデモです。

起動
go run ./cmd/marionette
開く
http://127.0.0.1:8080
ソース
cmd/marionette
最小サンプルのスクリーンショット

最小サンプル

Marionette の最小の実行形を確認したいときに便利な、自己完結した小さなアプリです。

起動
go run ./cmd/simple-sample
開く
http://127.0.0.1:8081
ソース
cmd/simple-sample/main.go
AI チャットサンプルのスクリーンショット

AI チャットサンプル

外部 API キーなしで、ストリーミング応答のシミュレーションを確認できるチャットサンプルです。

起動
go run ./cmd/ai-chat-sample
開く
http://127.0.0.1:8084
ソース
cmd/ai-chat-sample/main.go
Custom JavaScript サンプルのスクリーンショット

Custom JavaScript サンプル

外部 MathJax とアプリ単位の JavaScript hook を組み合わせた、小さなブラウザ側拡張のサンプルです。

起動
go run ./cmd/custom-javascript-sample
開く
http://127.0.0.1:8082
ソース
cmd/custom-javascript-sample/main.go

デスクトップ WebView サンプル

同じ Marionette アプリモデルを localhost サーバーとネイティブ WebView シェルの背後で動かします。

起動
go run -tags marionette_desktop ./cmd/marionette-desktop
開く
デスクトップウィンドウ
ソース
cmd/marionette-desktop

Linux で desktop tag をビルドするには、GTK 3 と WebKitGTK の開発パッケージが必要です。