Mashup Builder > マッシュアップ > カスタム CSS > カスタム CSS チュートリアル
カスタム CSS チュートリアル
前提条件
開始する前に、次のステップを実行します。
• ThingWorx 8.4 を使用していることを確認します
• サンプルチュートリアルファイルをダウンロードします
• 以下のサンプルファイルを ThingWorx Platform にインポートします
◦ Mashups_CustomCssTutorialMashup
◦ Things_SampleCssFileRepo
ThingWorx リポジトリへのカスタム CSS ファイルのアップロード
1. Composer の左側のナビゲーション表示枠で、「管理」をクリックします。
2. 「リポジトリ」で、SampleCSSFileRepo リポジトリを選択します。このリポジトリにあるすべてのファイルとフォルダがリストされます。
3. SampleCSSFileRepo フォルダの「操作」で、省略記号 (...) をクリックしてから、「アップロード」を選択します。ダイアログボックスが開きます。
4. システムから tutorial-buttons.css を選択し、「アップロード」をクリックします。
CSS ファイルが SampleCSSFileRepo Thing リポジトリにアップロードされます。
マッシュアップへのカスタム CSS クラスの追加
1. Mashup Builder で Mashups_CustomCssTutorialMashup マッシュアップを開き、「マッシュアップを表示」をクリックします。マッシュアップは、CSS 規則の適用先となるフィールドセット内の一連のボタンで構成されます。
2. 「エクスプローラ」パネルで、「マッシュアップ」を選択します。
3. 「プロパティ」パネルで、CustomClass フィールドに myMashupClass を追加します。
4. 「カスタム CSS」タブをクリックして、次の CSS コードを入力します:
.myMashupClass .widget-fieldset .widget-button {
box-shadow: 5px 5px 5px #888888;
}
5. 「保存」をクリックして、マッシュアップを表示します。フィールドセットウィジェット内のボタンにドロップシャドウが表示されます。
マッシュアップへのカスタム CSS の追加
1. Mashup Builder の「エクスプローラ」パネルで、button-3 を選択します。
2. 「プロパティ」パネルで、CustomClass フィールドに myMashupClass を追加します。
3. CSS 規則ブロックを追加するには、「カスタム CSS」タブをクリックして、次の CSS コードを入力します:
.myButtonClass .widget-button .widget-button-text {
text-transform: uppercase;
}
4. 「保存」をクリックして、マッシュアップを表示します。2 つ目のボタンにはまだドロップシャドウが表示されていますが、テキストは大文字で表示されます。
ウィジェット CustomClass プロパティのバインド
1. Mashup Builder で、「エクスプローラ」パネルを開き、eventsrouter-6 を選択します。
2. eventsrouter-6 からの出力を button-4 の CustomClass にバインドします。
3. 「カスタム CSS」タブをクリックして、次の CSS コードを入力します。
.myButtonClass .widget-button .widget-button-text {
text-transform: uppercase;
}

.myBoundButtonClass1 .widget-button,
.myBoundButtonClass1 .widget-button .button-element {
border-radius: 15px 0 15px 0;
}
.myBoundButtonClass2 .widget-button,
.myBoundButtonClass2 .widget-button .button-element {
border-radius: 0 15px 0 15px;
}
4. 「保存」をクリックして、マッシュアップを表示します。
5. 最初の「適用」ボタンをクリックして、myBoundButtonClass1 をフィールドセットウィジェット内の 3 つ目のボタンに追加し、次に 2 つ目の「適用」ボタンをクリックします。ボタンの境界の半径は、CSS クラスの適用に基づいて変化します。
カスタム CSS ファイルのインポート
次の手順では、ThingWorx リポジトリから CSS ファイルをインポートする方法について説明します。このファイルは、フィールドセットウィジェット内のボタンウィジェットにアニメーションと不透明度の変更を適用します。
@keyframes buttonSlideIn {
0% { left: 100px; opacity: 0 }
100% { left: 0; opacity: 1 }
}

.widget-fieldset .widget-button {
animation: buttonSlideIn 2s;
opacity: 0.5;
}
.widget-fieldset .widget-button:hover {
opacity: 1;
1. Composer で、「カスタム CSS」タブをクリックし、次の CSS コードを入力します。
@import url("/Thingworx/FileRepositories/SampleCssFileRepo/tutorial-buttons.css");
2. 「保存」をクリックして、マッシュアップを表示します。ボタンがアニメーション化され、右側から入ってきてフェードインします。アニメーションの完了後 (2 秒)、ユーザーがボタンをロールオーバーするまで、ボタンは 50 % 不透過になります。