Guides

アクションをカスタマイズしよう

Suggest Edits

前の記事：アクションを配信しよう

このセクションでやること

KARTEの特徴の一つとして、非常に自由度の高い表現力があります。ウェブ、アプリともにWidget APIを利用することで、１つのアプリケーションのような表現力をアクションに持たせることが可能です。

このセクションでは タイマーウィジェットを作成するところまでを説明します。

カウントできるようにする

アクションを配信しよう で作成したアクションの編集画面から、 [カスタマイズ] を開き、HTML、CSS、Scriptをそれぞれ次のように書き換えてください。

<div class="wrapper">
    <h1>count = {{count}}</h1>
</div>

.wrapper {
    position: relative;
    width: 100px;
    text-align: center;
    padding: 10px;
    background-color: #333;
    color: white;
}

var count = 0;

setInterval(function() {
  count += 1;
  widget.setVal('count', count);
}, 1000);

widget.show();

[保存する] を押して、配信中のサイトを再度ブラウザで開き、以下のようなウィジェットが表示され、1秒毎にカウントアップされるのが確認できたら成功です。

120

📘

[アクションの再実行] ボタン

サイト側ではなく、[プレビュー] タブを使って挙動を確認する場合、[アクションの再実行] をクリックすることで書き換えたスクリプトを再読み込みすることができます。

カウントをスタート/ストップするボタンを追加する

次にボタンの挙動を制御をしてみましょう。HTMLとScriptを次のように書き換えます。

<div class="wrapper">
    <h1>count = {{count}}</h1>
    <button krt-on:click="clicked">{{stopped ? 'start' : 'stop'}}</button>
</div>

var count = 0;

setInterval(function() {
  if (widget.getVal('stopped')) return;
  
  count += 1;
  widget.setVal('count', count);
}, 1000);


// set button handler.
widget.method('clicked', function(){
  widget.setVal('stopped', !widget.getVal('stopped'));
});

widget.show();

ボタンをクリックすることでカウントがスタート/ストップすることが確認できたら成功です。

Widgetはこの他にも if 、for などの制御文や、双方向バインディングなどを使用することができます。詳しい情報は [アクションのカスタマイズを理解する] (https://developers.karte.io/v1.0/docs/customize-actions-advanced) を参考にして下さい。

ここまででクイックスタートは終了です！お疲れ様でした！

Updated 12 months ago