設定を追加
Application Mashup (WireCloud) course @ https://fiware-academy.readthedocs.io/
Presenter Notes
設定を追加
イントロダクション
Presenter Notes
イントロダクション
このウィジェットは、"設定の追加" のチュートリアルのリファレンス実装を表します。 このチュートリアルは以前のチュートリアルに基づいています。Weather underground service のためにハードコードされた値の API キーを使用しました。 これはウィジェットの基本バージョンには十分かもしれませんが、実際は、 これは設定として実装されているほうがよいでしょう。
このチュートリアルでは、"[リクエストとワイヤリング][prev_tutorial]" のチュートリアルから提案された解決策を基本として使います。 このリンクを使ってウィジェットのコードをダウンロードすることが できます。
[prev_tutorial]: 3.1.3_Making\ requests\ and\ wiring
Presenter Notes
設定を追加
config.xml に設定を追加
config.xml に設定を追加Presenter Notes
config.xml に設定を追加
設定を追加するための最初のステップは、config.xml ファイル内でそれを宣言する
ことです。これは、preferences 要素に preference 要素を追加することによって
実現できます。最終結果は次のようになります :
...
<preferences>
<preference
name="api_key"
type="text"
description="Weather Underground API key"
label="API key"
/>
</preferences>
...
Presenter Notes
config.xml に設定を追加
属性の説明 :
name属性は、JavaScript API を使用するときにこの設定を参照するために 使用されますtype属性は、この設定を保存しようとしているデータの種類を示します。 有効な値は、ブール値、リスト、番号、パスワード、およびテキストですlabel属性は、たとえばユーザ・インターフェイスでこの設定の値をユーザに 要求するために使用されます。また、この属性は翻訳できますが、name属性は翻訳できませんdescription属性は設定についての詳細な説明を提供するために使用されます
Presenter Notes
config.xml に設定を追加
これは同じ宣言ですが、RDF (turtle) を使用します :
...
wire:hasPlatformPreference [ a wire:PlatformPreference ;
rdfs:label "API key" ;
dcterms:description "Weather Underground API key" ;
dcterms:title "api_key" ;
wire:index "0" ;
wire:type "text" ] ;
...
Presenter Notes
config.xml に設定を追加
list タイプの設定は、ユーザ・インターフェースで提供されるオプションのリストを
提供する必要があります。これは option 要素を使用することによって達成されます。
この要素には2つの属性が必要です。
value属性は、ユーザがこのオプションを選択した場合に返される値ですlabel属性は、このオプション/値を参照する場合、ユーザ・インターフェイスで 使用されます。この属性は翻訳可能です
Presenter Notes
config.xml に設定を追加
これは、リスト設定を宣言する方法の例です :
...
<preferences>
<preference name="list" type="list" label="list" description="list preference" default="default">
<option value="default" label="Default value"/>
<option value="1" label="value1"/>
<option value="2" label="value2"/>
</preference>
</preferences>
...
Presenter Notes
設定を追加
基本的な使い方
Presenter Notes
基本的な使い方
ウィジェットまたはオペレータの記述子でユーザ設定を宣言したら、
MashupPlatform.prefs.get メソッドを使用して設定の現在の値を
読み取ることができます。このメソッドは、設定の型に関連付けられた型を使用して
値を返します :
text,password,listタイプの設定にはstringnumberタイプの設定にはnumberboolean設定にはboolean
Presenter Notes
基本的な使い方
たとえば、前のチュートリアルで使用したコードを考慮してください :
var getForecastByCoord = function getForecastByCoord(coord, onSuccess, onError) {
...
url = 'http://api.wunderground.com/api/' + API_KEY + '/conditions/forecast/q/';
url += coord.lat + ',' + coord.lon;
url += '.json';
MashupPlatform.http.makeRequest(url, {
...
};
Presenter Notes
基本的な使い方
次のようにに変換する必要があります :
var getForecastByCoord = function getForecastByCoord(coord, onSuccess, onError) {
...
url = 'http://api.wunderground.com/api/' + MashupPlatform.prefs.get('api_key') + '/conditions/forecast/q/';
url += coord.lat + ',' + coord.lon;
url += '.json';
MashupPlatform.http.makeRequest(url, {
...
};
この変更の後、API_KEY 定数はもう使用されないので、ソースコードから安全に削除できます。
Presenter Notes
設定を追加
設定の変化に対応
Presenter Notes
設定の変化に対応
ウィジェットは設定の変更に対応することが必要な場合があります。これは
MashupPlatform.prefs.registerCallback メソッドを
用いて実現することができます。たとえば、api-key 設定の新しい値が有効でない場合に
備えて、アラート・メッセージをユーザに表示するためにこのサポートを利用できます :
var updateMissingAPIKeyAlert = function updateMissingAPIKeyAlert() {
if (MashupPlatform.prefs.get('api_key').trim().length !== 16) {
document.getElementById('api-key-alert').classList.remove('hide');
} else {
document.getElementById('api-key-alert').classList.add('hide');
}
};
MashupPlatform.prefs.registerCallback(function (new_values) {
if ('api_key' in new_values) {
updateMissingAPIKeyAlert();
}
});
Presenter Notes
設定の変化に対応
これは、明らかに、設定が変更されたときに設定の値をチェックするだけなので、
ウィジェットがロードされたときに手動で updateMissingAPIKeyAlert 関数を呼び出す
必要があります。これは、次のコードを使用して実現できます :
window.addEventListener('load', function () {
updateMissingAPIKeyAlert();
}, true);
Presenter Notes
設定を追加
設定をテスト
Presenter Notes
設定をテスト
新しいウィジェットを実装したら、期待どおりに機能するかどうかをテストする必要が あります。このウィジェットは、"[リクエストと配線][prev_tutorial]" の手順に 従って作成されたウィジェットが提供する機能と同じです。
Presenter Notes