こんばんはお月様

 

せっかくの夏休みなのに雨続きでどこも遊びに行けませんえーん

 

前回「サッカー馬鹿のBOTが話す?!~お試し編~」を紹介しましたが、

 

 

そもそもコレ、

タグで書くのならXPages関係なくね?

 

 

そんなわけで・・・

他のXPageでも簡単に流用できるようにカスタムコントロール化したいと思います!

 

Google先生で調べたところ、詳しいやり方を英語で説明していましたゲローので

英語ができない自分のために覚書としてここに書きたいと思います!!(不安・・・)

 

では、長丁場になりますのでとっとと始めます!!

 

1.カスタムコントロールを作成します。

名前は分かりやすければ何でもいいです。

 

2.Audioタグのサンプルを貼り付けます。

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

 

タグについては、こちらを参考に→w3schools.com

 

 

3.属性を確認します。

autoplay、controls、loop、muted、preload、srcとありますね。

 

src以外の属性をタグに書き足します。

 

4.<source・・・のタグ部分を気持ちよく削除します。

 

5.autoplay、controls、loop、muted、preloadに値をセットします。

定番のcompositeDataですね!

 

 

6.以下の黄色の場所を作りたいので・・・

 

繰り返しコントロールを配置して以下のようにします。

※繰り返しコントロールを使う理由としては、上記タグのようにsourceを複数セットする場合があるからです。

 

7.追加した繰り返しコントロールの下に計算結果テキストコントロールを追加します。

タグで説明すると、黄色のラインのところを作成しています。

 

また、先ほどの繰り返しコントロールの中のsourceタグには

以下のように値をセットします。

 

 

8.ここまでで、タグ関連の作成は完了です。

次はお待ちかねのcompositeDataの定義です。

 

カスタムコントロール>プロパティ定義を選択します。

選択すると[新規プロパティ]があるのでクリックします。

 

9.名前・表示名に「autoplay」と入力します。

 

10.属性を一度確認しましょう。

autoplayは有効にするか無効にするかの2択しかないようですね。

 

ということで、エディタは「コンボボックス」を選択し、パラメータは以下のように設定します。

autoplay|Enable Autoplay

|Disable Autoplay

 

※|(パイプ)の右側は分かりやすく有効/無効でもいいと思います。

 

ちなみに|(パイプ)を使う理由は、Notesで散々勉強しているということで割愛します・・・滝汗

 

 

11.同じく「controls、loop、muted、preload」も作成していきます。

 

controlsは有効にするか無効にするかの2択しかないので・・・

 

loopも有効にするか無効にするかの2択しかないので・・・

 

mutedも有効にするか無効にするかの2択しかないので・・・

 

preloadは「auto/metadata/none」と無効の4つが必要です!

(ヒッカケですねびっくり

このようにセットしてみました。

auto|auto

metadata|metadata

none|none

|Disable Preload

 

 

12.最後の属性のsrcです。

 

タグを確認してみましょう。

sourceという定義が必要ですね。

sourceの中にsrcとtypeがあります。

 

 

autoplay、controls、loop、muted、preloadは新規プロパティで作成しましたが、

sourceは[新規グループ]で作成します。

名前はsourceにします。

 

 

複数のインスタンスが必要になるのでチェックを入れます。

 

sourceの下に新しいプロパティ定義が出来上がっているので

以下のようにsrcの設定を行います。

 

 

検証タブを選択して[必須フィールド]にチェックをいれます。

 

13.続いて、typeプロパティを作成します。

sourceを選択した状態で[新規プロパティ]をクリックしてください。

 

以下のように設定します。

 

先ほどと同様、検証タブを選択して[必須フィールド]にチェックをいれます。

 

14.さて、最後の仕上げです。

未対応ブラウザへのコメントを表示させる箇所です。

 

こちらは、ルートを選択した状態で[新規プロパティ]を作成します。

 

以下のように設定をします。

デフォルト値に警告文を入力しておきます。

 

任意ですが、せっかくなのでこちらにも必須フィールドの設定を入れておきましょう。

 

15.さて、こちらでも十分なのですがデザインを施します。

 

デザインの設定は、カスタムコントロール>設計定義で行います。

(以前のサインくださいでとても気になっていたところなんですが、

こんな使い方をするみたいですね)

 

以下のように書き込みます。

 

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

    <xp:div style="border:2px solid #333;background-color #ffff88;">
        <h3>XPages Audio</h3>
    </xp:div>

</xp:view>

 

 

お疲れさまでした。

以上でAudioカスタムコントロールは完成です。

 

次回は、Xpageに組み込むやり方をご紹介します。

 

今日はこの辺でウインク

 

 

あでゅーパー

 

P.S

最近Twitterでブログ書きました通知ができることを知りましたゲロー