ビルドする方法 Mendix TypeScript を使用したビデオ プレーヤー ウィジェット | Mendix

メインコンテンツへスキップ

サイト内検索

営業担当者へ連絡
無料でお試し

ビルドする方法 Mendix TypeScript を使用したビデオ プレーヤー ウィジェット

主要なポイント（要点）

  • の作成方法を学ぶ Mendix TypeScript でゼロからウィジェットを作成します。
  • ウィジェットのプロパティを XML で定義し、Studio Pro で構成します。
  • ネイティブHTMLを使用してビデオプレーヤーを実装する <video> 素子
  • REST APIを設定してテストする Mendix ビデオコンテンツを提供する

2025年も半分が過ぎたが、まだウィジェットを作っていない。 Mendix 11が正式リリースされ、急に練習不足を感じてしまいました。お気に入りのテクノロジーは常に最新の状態にしておくのが良いので、自分のスキルアップとテストのために何か作ってみることにしました。

 課題

GitHubやその他のコード共有プラットフォームのリポジトリを使わずに、Webアプリ用のシンプルなビデオプレーヤーウィジェットを構築します。また、TypeScriptを使用します。

1。 準備

最初のステップは、必要なツールをすべてインストールしてアップデートすることでした。この手順に従う場合は、以下のツールをダウンロードしてインストールしてください。

最後に、私は プラグイン可能なウィジェットのチュートリアル in Mendix ドキュメントで基礎を復習しましょう。

2.はじめに

開発を始めるために、Studio Pro で新しいアプリを作成しました。

  • Studio Pro で、空の Web アプリ テンプレートを使用して新しいアプリを作成します。
  • プロジェクト ディレクトリに移動します。
  • MyWidgetという名前の新しいフォルダを作成します
  • ターミナルを開いてフォルダに移動します

3. ウィジェットのスキャフォールディング

Yeoman Widget Generatorを使えば、ウィジェットのスキャフォールドを簡単に生成できます。まずは、既に開いているターミナルで、以下のコマンドを使ってジェネレーターを起動します。

npx @mendix/generator-widget MyVideoPlayer

次に、ジェネレーターはいくつかの簡単な質問で残りのセットアップを案内してくれました。


Widget name: MyVideoPlayer
Widget Description: My widget description
Organization Name: Mendix
Copyright: {Your copyright date}
License: {Your license}
Initial Version: {Your initial version number}
Author: {Your author name}
Mendix App path: ../../
Programming language: TypeScript
Which type of components do you want to use? Function Components
Widget type: For web and hybrid mobile apps
Widget template: Empty widget (recommended for more experienced developers)
Unit tests: No
End-to-end tests: No

すべての質問に答えると、ウィジェットジェネレーターがアプリディレクトリに必要なファイルを作成しました。そして、 マイビデオプレーヤー Visual Studio Code でファイルを開いてウィジェットのコーディングを開始します。

4. ウィジェットのプロパティを定義する

ウィジェットのスケルトンが完成したので、追加作業を開始できます。ウィジェットのプロパティをxmlで更新しました。 マイビデオプレーヤー.xml ファイルにソフトウェアを指定する必要があります。

<?xml version="1.0" encoding="utf-8"?>
<widget id="mendix.myvideoplayer.MyVideoPlayer" pluginWidget="true" needsEntityContext="true" offlineCapable="true" supportedPlatform="Web"
    xmlns="https://www.mendix.com/widget/1.0/"
    xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://www.mendix.com/widget/1.0/ ../node_modules/mendix/custom_widget.xsd">
    <name>My Video Player</name>
    <description>My widget description</description>
    <icon/>
    <properties>
        <propertyGroup caption="General">
            <property key="videoUrl" type="attribute" required="true">
                <caption>Video URL</caption>
                <description>Direct URL to the video file (e.g. CDN/API)</description>
                <attributeTypes>
                        <attributeType name="String"/>
                    </attributeTypes>
            </property>
            <property key="controls" type="boolean" defaultValue="true">
                <caption>Show controls</caption>
                <description>Toggles controls on or off</description>
            </property>
            <property key="autoPlay" type="boolean" defaultValue="true">
                <caption>Autoplay</caption>
                <description>Autoplay on video load</description>
            </property>
            <property key="muted" type="boolean" defaultValue="true">
                <caption>Muted</caption>
                <description>Include sound with your video</description>
            </property>
            <property key="loop" type="boolean" defaultValue="true">
                <caption>Loop</caption>
                <description>Enable back to back playback</description>
            </property>
            <property key="width" type="integer" defaultValue="640">
                <caption>Width (px)</caption>
                <description>Width of the video player in pixels</description>
            </property>
            <property key="height" type="integer" defaultValue="360">
                <caption>Height (px)</caption>
                <description>Height of the video player in pixels</description>
            </property>
        </propertyGroup>
    </properties>
</widget>

これにより、ウィジェットを構成するために使用されるいくつかのプロパティが作成されます。
  • ビデオのURL（文字列）
  • コントロールを表示（ブール値）
  • 自動再生（ブール値）
  • ミュート（ブール値）
  • ループ（ブール）
  • 幅（整数）
  • 高さ（整数）

これらは Studio Pro でウィジェットのプロパティを構成するための基本的なオプションの一部です。URL は文字列属性 VideoURL を介して渡されますが、これはウィジェットの外部で設定し、コンテキスト エンティティを介して渡す必要があります。

5. ウィジェットの実装

プロパティの設定が完了したら、ウィジェット自体の作成に移りました。 マイビデオプレーヤー.tsx Visual Studio Codeで。私が設定した課題の一環として、ウィジェットの作成にビデオライブラリは使えませんでした。そこで、 ビデオを再生するには、a を使用します。以下のコードは、ビデオプレーヤーを作成し、プロパティを渡して、ページにビデオを表示する方法を示しています。

import {createElement, useRef} from "react";

import "./ui/MyVideoPlayer.css";

// The generator creates this file for you after editing the XML:
import type { MyVideoPlayerContainerProps } from "../typings/MyVideoPlayerProps";

export default function MyVideoPlayer(props: MyVideoPlayerContainerProps) {
  const videoUrl = props.videoUrl?.value ?? "";//assing video url to entity attribute in Studio Pro
  const {
    controls,
    autoPlay,
    muted,
    loop,
    width,
    height,
    class: className,
    style,
    tabIndex
  } = props;

  const videoRef = useRef(null);

  if (!videoUrl || videoUrl.length === 0) {//URL String validation
    return (

//Video Player error message
        No video URL provided



);
    }

  return (//return video player
     ); }

6. あれば便利

ウィジェットを完成させる前の最後のステップは、 MyVideoPlayer.editorPreview.tsx ファイルです。これは、Studio Pro がデザイン時にエディターウィンドウに表示するために使用するものです（ウィジェットがブラウザではなく Studio Pro 内でどのように表示されるかを示します）。
これは、ウィジェットのデザインビューが美しく見えるように、いくつかのシンプルなスタイルが添付された div を返すだけです。

import { createElement } from "react";

export function preview() {
  return (
    <div
      style={{
        width: 320,
        height: 180,
        border: "1px dashed #bbb",
        borderRadius: 12,
        display: "grid",
        placeItems: "center",
        fontSize: 12,
        color: "#666"
      }}
    >
      Video Player (bind Video URL)
    </div>
  );
}

export function getPreviewCss() {
  return "";
}

7. Studio Proにウィジェットを追加する

作業が完了したので、ターミナルのビルド コマンドを使用してウィジェットをコンパイルしました。

npm run build //(You can also use npm start to have the widget autocompile after every change)

このコマンドは、コードをパッケージにコンパイルし、アプリのウィジェット フォルダーにコピーします。

8. Studio Proの場合

ウィジェットを正常にビルドした後、アプリをプロジェクト ディレクトリと同期し、すべてのウィジェットを更新することが重要です。そうしないと、ウィジェットがツールボックスに表示されない可能性があります。

  • ドメインモデルに永続化可能なエンティティを作成しました。 ビデオこの実体は、 ファイルドキュメント 3 つの属性があります。 タイトル (文字列)、ビデオ ID (自動番号), ビデオURL(文字列).
  • ウィジェットは動画を再生するためのURLを必要とします。これを実現するために、動画をREST APIとして公開し、 ビデオID（自動採番） の鍵として Get_ByKey エンドポイント。REST API の URL は、ビデオ プレーヤーの URL として機能します。

私はドメインモデルからREST APIを生成することを選択しました。ビデオエ​​ンティティを右クリックし、それを次のように公開することを選択しました。 REST APIStudio ProにAPIを作成させ、 オートナンバー フィールドをサービスのキーとして設定します（ すべて取得 の三脚と GetByKey APIのエンドポイントはありますが、 GetByKey 必要だ）。 GetByKey 応答を処理するマイクロフローを更新することにより、エンドポイントを更新します。

サービスが正しく動作するには、レスポンスに正しいContent Typeヘッダーを付加する必要があります。以下の値を持つHTTPHeaderを追加しました。

  • キー: コンテンツタイプ
  • 値: video/mp4

また、HTTP レスポンス エンティティへの関連付けも設定しました。

9. ウィジェットの設定

ウィジェットはコンテキスト エンティティからの属性を期待するため、ページに追加するときにデータビューに配置しました。

 

次に、プロパティを開いて設定しました。

  • ビデオ URL (コンテキスト エンティティからの文字列)
  • コントロールを表示 (true)
  • 自動再生（true）
  • ミュート（偽）
  • ループ（偽）
  • 幅 (640)
  • 身長（360年）

10. URLの設定

最後のステップは、動画ファイルを保存するときに動画のURLを自動的に設定することです。動画の保存ボタンにアタッチされたマイクロフローに、変更アクションを追加し、コミュニティコモンズの「Get application URL」Javaアクションを使用して文字列を設定しました。

  • $AppURL+'/rest/myvideoservice/v1/video/'+$Video/VideoID
  • (例: https://localhost:8080/rest/myvideoservice/v1/video/2)

11. ウィジェットのテスト

ここまでの作業を経て、いよいよウィジェットのテストです。エンティティに動画をアップロードし、VideoIDフィールドと、その動画のGetByKey APIエンドポイントのURLを表示するシンプルな画面を作成しました。

アプリを実行してテスト ビデオをアップロードした後、ビデオの完全な URL を取得し、ウィジェットのビデオ URL プロパティを更新できました。
最後にもう一度アプリを実行すると、ウィジェットが正しく読み込まれ、ビデオも正常に再生されました！ついに成功です！

最終的な考え

これまで多くのプロジェクトでマルチメディアを扱ったことがなかったので、これは楽しい挑戦でした。今後は、ウィジェットをいくつかの重要な領域で拡張したいと考えています。

    1. より洗練されたスタイリング
    2. オプション機能（2倍速、字幕など）
    3. 動画の「ポスター」（サムネイル、プレースホルダーとしての画像）を追加します

この楽しいチャレンジで自分を試すのは本当に楽しかったです。皆さんも楽しんで読んでいただけたら嬉しいです。何かご提案、ご批評、ご意見などございましたら、ぜひお知らせください。後日、アップデート記事を書くかもしれません。

よくある質問

言語を選択してください