Preferences 使用例

preferencesとは

Preferenceはみなさんが作ったPieceがiiideaの一部として実行される前に、エンドユーザーにセットしてほしい設定項目を定義します。ユーザーはiPhone/Android端末から設定することになります。
ここでは各UIについての定義方法を説明します。

drumroll

いくつか決められた項目から一つを選択できるUIとなります。
有効なtypestringnumberです。
UIの性質上、選択肢が多すぎると入力が煩雑になってしまいますので、多くても100個前後までとしておくことを推奨します。

drumroll(string)

PieceJsonの例
      "prefecture": {
        "type": "string",
        "x-description": {
          "en": "Enter your favorite prefecture",
          "ja": "好きな地域を入力してください。"
        },
        "enum": [
          "Saitama",
          "Chiba",
          "Tokyo",
          "Kanagawa"
        ],
        "x-input-type": "drumroll",
        "default": "Tokyo",
        "x-title": {
          "ja": "地域",
          "en": "Light setting"
        },
        "x-enum-titles": {
          "Saitama": {
            "ja": "埼玉県",
            "en": "Saitama"
          },
          "Chiba": {
            "ja": "千葉県",
            "en": "Chiba"
          },
          "Tokyo": {
            "ja": "東京都",
            "en": "Tokyo"
          },
          "Kanagawa": {
            "ja": "神奈川県",
            "en": "Kanagawa"
          }
        }
      },
preferences画面の例

drumroll close時

drumroll open時

ProxyCoreの例
  // drumrollで入力された値が入る("Saitama" or "Chiba" or "Tokyo" or "Kanagawa")
  let prefecture = event.properties.preferences.prefecture;

drumroll(number)

PieceJsonの例

10(minimum)から200(maximum)の範囲を1の間隔(multipleOf)で入力できるdrumrollとなります。

      "height": {
        "type": "number",
        "x-description": {
          "ja": "あなたの身長を入力してください。",
          "en": "Please enter your height."
        },
        "maximum": 200,
        "minimum": 10,
        "multipleOf": 1,
        "x-input-type": "drumroll",
        "default": 150,
        "x-title": {
          "ja": "身長",
          "en": "height"
        }
      },
preferences画面の例

drumroll close時

drumroll open時

ProxyCoreの例
  // drumrollで入力された値が入る(10〜200)
  let height = event.properties.preferences.height;

text

1行の文字列を入力できるUIとなります。
有効なtypestringです。
ユーザーに柔軟に入力を求めることが可能です。

PieceJsonの例

      "name": {
        "type": "string",
        "x-description": {
          "ja": "名前を入力してください。",
          "en": "Please enter your name."
        },
        "x-input-type": "text",
        "default": "テスト",
        "x-title": {
          "ja": "名前",
          "en": "name"
        }
      },

preferences画面の例

ProxyCoreの例

  // textで入力された値が入る(文字列)
  let name = event.properties.preferences.name;

textarea

複数行の文字列を入力できるUIとなります。
有効なtypestringです。
ユーザーに柔軟に入力を求めることが可能です。

PieceJsonの例

      "message": {
        "type": "string",
        "x-description": {
          "ja": "メッセージを入力してください。",
          "en": "Please enter your message."
        },
        "x-input-type": "textarea",
        "default": "テスト",
        "x-title": {
          "ja": "メッセージ",
          "en": "message"
        }
      },

preferences画面の例

ProxyCoreの例

  // textareaで入力された値が入る(文字列)
  let message = event.properties.preferences.message;

slider

指定した範囲の数値を入力できるUIとなります。
有効なtypenumberです。
指定した値が全体の範囲のどの位置にあるのかが視覚的にわかりやすくなります。

PieceJsonの例

0(minimum)から100(maximum)の範囲を10の間隔(multipleOf)で入力できるsliderとなります。

      "brightness": {
        "type": "number",
        "x-description": {
          "ja": "ライトの明るさを指定してください。",
          "en": "Please enter the brightness."
        },
        "maximum":100,
        "minimum":0,
        "multipleOf":10,
        "x-input-type": "slider",
        "default": 30,
        "x-title": {
          "ja": "明るさ",
          "en": "brightness"
        }
      },

preferences画面の例

ProxyCoreの例

  // sliderで入力された値が入る(0〜100)
  let brightness = event.properties.preferences.brightness;

calendar

カレンダーから年月日を入力できるUIとなります。
有効なtypestringです。
年月日の範囲で入力してほしい場合に使用します。

PieceJsonの例

     "reservation": {
        "type": "string",
        "x-description": {
          "ja": "予約日を指定してください。",
          "en": "Please enter a reservation date."
        },
        "format": "date",
        "default": "2019-5-13",
        "x-input-type": "calendar",
        "x-title": {
          "ja": "予約日",
          "en": "reservation"
        }
      },

preferences画面の例

ProxyCoreの例

  // calendarで入力された値が入る(yyyy-mm-dd)
  let reservation = event.properties.preferences.reservation;

radio

いくつか決められた項目から一つを選択できるUIとなります。
有効なtypestringです。
drumrollとは違い、選択項目が画面上に見えているため、2〜5項目前後の選択肢であればこちらを使うことを推奨します。

PieceJsonの例

      "age": {
        "type": "string",
        "x-description": {
          "ja": "年齢を選んでください。",
          "en": "Please enter your age."
        },
        "enum": ["age18", "age29", "age39", "age49", "age50"],
        "default": "age29",
        "x-input-type": "radio",
        "x-title": {
          "ja": "年齢",
          "en": "age"
        },
        "x-enum-titles": {
          "age18": {
            "ja": "18歳未満",
            "en": "Radio1"
          },
          "age29": {
            "ja": "18〜29歳",
            "en": "Radio2"
          },
          "age39": {
            "ja": "30〜39歳",
            "en": "Radio3"
          },
          "age49": {
              "ja": "40〜49歳",
              "en": "Radio3"
          },
          "age50": {
              "ja": "50歳以上",
              "en": "Radio3"
          }
        }
      },

preferences画面の例

ProxyCoreの例

  // radioで入力された値が入る("age18" or "age29" or "age39" or "age49" or "age50")
  let age = event.properties.preferences.age;

map

地図上から位置を選択できるUIとなります。
有効なtypearrayです。
場所を指定してほしい場合に使用します。

PieceJsonの例

      "destination": {
        "type": "array",
        "x-description": {
          "ja": "行き先を指定してください。",
          "en": "Please enter your destination."
        },
        "default":[
            "35.681247","139.767019"
        ],
        "x-input-type": "map",
        "x-title": {
          "ja": "行き先",
          "en": "destination"
        }
      },

preferences画面の例

ProxyCoreの例

  // mapで入力された値が入る([latitude,longitude])
  let destination = event.properties.preferences.destination;
  let latitude = destination[0];
  let longitude = destination[1];

switch

2択用のUIとなります。
有効なtypebooleanです。
シンプルに2択で表現できる情報であればこちらを使うことを推奨します。

PieceJsonの例

      "function": {
        "type": "boolean",
        "x-description": {
          "ja": "機能を有効にします。",
          "en": "Enable the function."
        },
        "x-input-type": "switch",
        "default": true,
        "x-title": {
          "ja": "機能の有効",
          "en": "Function enabled."
        }
      },

preferences画面の例

ProxyCoreの例

  // switchで入力された値が入る(true or false)
  let func = event.properties.preferences.function;

time

時刻入力用のUIとなります。
有効なtypearrayです。
時刻の範囲で入力してほしい場合に使用します。

PieceJsonの例

      "wakeUp": {
        "type": "array",
        "x-description": {
          "ja": "今日起きた時間を入力してください。",
          "en": "Enter the time you woke up"
        },
        "x-input-type": "time",
        "default": [10,15],
        "x-title": {
          "ja": "起床時間",
          "en": "Wake-up time"
        }
      }

preferences画面の例

ProxyCoreの例

  // timeで入力された値が入る([hour,minute])
  let wakeUp = event.properties.preferences.wakeUp;
  let hour = wakeUp[0];
  let minute = wakeUp[1];

Preferencesの表示順

Preferences内のpropertiesの表示順を指定することができます。表示順を指定しない場合には、記載した順番にならないことがあります。

指定方法

“x-field-order”を用いて指定します。下記例では、”travelmode”、”select”、”dest1″、”dest2″の順にpropertiesを記述しています。”x-field-order” : [“select”,”dest1″,”dest2″,”travelmode”]を記述することで、表示の並びを指定できます。

  "preferences": {
    "type": "object",
    "x-field-order" : ["select","dest1","dest2","travelmode"],
    "properties": {
      "travelmode": {
        "type": "string",
        "x-description": {
          "en": "Select your Select your travelmode",
          "ja": "交通手段を選択してください。"
        },
        "enum": [
          "none",
          "drive",
          "walk",
          "transit"
        ],
        "x-input-type": "drumroll",
        "default": "none",
        "x-title": {
          "ja": "(オプション)交通手段",
          "en": "(Option) Travelmode"
        }
      },
      "select": {
        "type": "string",
        "x-description": {
          "ja": "どちらの目的地を使用しますか?",
          "en": "Please Select Map1 or Map2 as Destination"
        },
        "enum": ["map1", "map2"],
        "default": "map1",
        "x-input-type": "radio",
        "x-title": {
          "ja": "目的地を選択",
          "en": "Select to set destination"
        },
      },
      "dest1": {
        "type": "array",
        "x-description": {
          "ja": "目的地を指定してください。",
          "en": "Please enter your destination."
        },
        "x-input-type": "map",
        "x-title": {
          "ja": "Map1",
          "en": "Map1"
        }
      },
      "dest2": {
        "type": "array",
        "x-description": {
          "ja": "目的地を指定してください。",
          "en": "Please enter your destination."
        },
        "x-input-type": "map",
        "x-title": {
          "ja": "Map2",
          "en": "Map2"
        }
      }
    }
  },