アラートを表示する方法とデバイス毎の表示

#目次
1. はじめに
2. 画面の作成
3. 実装方法（コーディング）
4. 実装方法（GUI）
5. まとめ
6. 参考

#はじめに
アラート表示は、適切に表示することで、ユーザへの案内や説明となります。
またユーザが実行したいアクションを行うことができます。
今回はアラートを表示する方法を2つ、またデバイス毎の見え方をご紹介します。

* **コーディングで設定する場合**
* **GUIで設定する場合**

それぞれの方法で使うメリットをご紹介しますので、
どちらを使用するかは以下を参考にしていただければと思います:eyes:

* **コーディングで設定する場合**
:sunny:メリット
・共通モジュールを使用することで、アラート機能の呼び出しが容易になる
・アラートを複数表示する場合、GUIで設定するよりも手間がかからない
:umbrella2:デメリット
・直感的ではない

* **GUIで設定する場合**
:sunny:メリット
・直感的で使いやすい
:umbrella2:デメリット
・ウィジェットごとに設定する必要がある

Konyのアラートタイプは以下になります。  

| アラートタイプ |定数 | 説明 | 
| ------- | ------ | ------ | 
| インフォーメーション | ALERT_TYPE_INFO(デフォルト) | インフォーメーションメッセージが表示されます。<br>このメッセージは、警告メッセージまたは成功メッセージとなります。|
| コンファーメーション | ALERT_TYPE_CONFIRMATION | 「はい」と「いいえ」が付いた確認メッセージが表示されます。|
| エラー | ALERT_TYPE_ERROR | エラーメッセージが表示されます。 |

※アラートが表示された場合、ユーザは他の操作を行うことができません。

#画面の作成
**◆Responsive Web**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/0bf6f380-ad95-40b6-2bac-a91a6a1578d3.png)

**◆Mobile**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/8774541f-1fd8-4566-e9af-4b263ff446fa.png)

今回は6つのボタンを配置しました。
それぞれのボタンをクリックすると、アラートが表示されます。

#実装方法（コーディング）
Form1Controllerのコーディングを行います。

```Fomr1.js
define({ 

  // OKを押した場合
  onClickOk: function(){
    alert("あなたはOKを押しました");
  },

  // キャンセルを押した場合
  onClickCancel: function(){
    alert("あなたはキャンセルを押しました");
  },

  // エラーの時にOKを押した場合  
  onClickError: function(){
    alert("あなたはOKを押しました（エラーアラート）");
  },

  // インフォーメーションアラート表示
  onClickInformationAlert : function() {
    var self = this;
    CmnAlertUtil.showInfoAlert(
      "インフォーメーション",
      "このインフォーメーションはコーディングで表示しています",
      self.onClickOk
    );
  },

  // コンファーメーションアラート表示
  onClickConfirmationAlert : function() {
    var self = this;
    CmnAlertUtil.showConfirmationAlert(
      "コンファーメーション",
      "このインフォーメーションはコーディングで表示しています",
      function(isYes) {
        if (isYes) {
          self.onClickOk();
        }else{
          self.onClickCancel();
        }
      }
    );
  },

  // エラーアラート表示  
  onClickErrorAlert : function() {
    var self = this;
    CmnAlertUtil.showErrorAlert(
      "エラー",
      "このエラーはコーディングで表示しています",
      self.onClickError
    );
  },
});
```

今回はResponsive WebとMobile上で同じアラートを表示させたいため、共通モジュール上で作成します。
他のフォームでも同じようにアラートを表示させたい時とかにも使えます。

```CmnAlertUtil.js

const CmnAlertUtil = function() {

  const showInfoAlert = function(title, message, callback) {
    // Show Infomation Alert
    kony.ui.Alert(
      {
        message : message,
        alertType : constants.ALERT_TYPE_INFO,
        alertTitle : title,
        yesLabel : "OK",
        alertIcon : "none",
        alertHandler : callback
      },
      {}
    );
  };

  const showErrorAlert = function(title, message, callback) {
    // Show Error Alert
    kony.ui.Alert(
      {
        message : message,
        alertType : constants.ALERT_TYPE_ERROR,
        alertTitle : title,
        yesLabel : "OK",
        alertIcon : "none",
        alertHandler : callback
      },
      {}
    );
  };

  const showConfirmationAlert = function(title, message, callback) {
    // Show Confirm Alert
    kony.ui.Alert(
      {
        message : message,
        alertType : constants.ALERT_TYPE_CONFIRMATION,
        alertTitle : title,
        yesLabel : "OK",
        noLabel : "Cancel",
        alertIcon : "none",
        alertHandler : callback
      },
      {}
    );
  };


  return {
    showInfoAlert : showInfoAlert,
    showErrorAlert : showErrorAlert,
    showConfirmationAlert : showConfirmationAlert
  };
}();
```

上を説明します。

**kony.ui.Alert**：アラートを表示します。
構文は`kony.ui.Alert（basicConfig、pspConfig）`

パラメータは以下になります。
**basicConfig**

|パラメータ | 説明 |  必須or任意 |
| ------ | ----- | ------ |
| message | メッセージ | 必須 |
| alertType | アラートタイプ<br>入力可能な値は以下の通り<br>1. ALERT_TYPE_CONFIRMATION<br>2. ALERT_TYPE_ERROR<br>3. ALERT_TYPE_INFO|必須|
| alertTitle | タイトル | 任意 |
| yesLabel | イエスラベル | 任意 |
| noLabel | ノーラベル | 任意 |
|alertIcon|アイコン | 任意 |
|alertHandler | イエスラベルボタンまたはノーラベルボタンのいずれかを選択してアラートが閉じられたときに呼び出されるJavaScript関数。|任意|

**pspConfig**

|パラメータ | 説明 |  必須or任意 |
| ------ | ----- | ------ |
| ondeviceback| アラートが開いていてデバイスの戻るボタンが押されたときに呼び出されるJavaScript関数<br>※サポート対象はWindowsのみ| 任意|
|contentAlignment|アラートの内容の位置の調整。<br>1. constants.ALERT_CONTENT_ALIGN_LEFT //デフォルト<br>2. constants.ALERT_CONTENT_ALIGN_CENTER<br>3. constants.ALERT_CONTENT_ALIGN_RIGHT |任意|
|iconPosition|アイコンの位置の調整。<br>1. constants.ALERT_ICON_POSITION_LEFT //デフォルト<br>2. constants.ALERT_ICON_POSITION_RIGHT|任意|

Actionと紐づけていきます。
`btnInformation`(インフォーメーションアラート（コーディング）ボタン)を選択 > `Action`タブをクリック > `onClick`のEditをクリック > Action(`onClickInformationAlert`)紐づけ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/277df171-1f71-9913-a0ba-c6309d22a809.png)
他のボタンも同じように紐付けます。
コーディングの実装方法は以上になります。

#実装方法（GUI）
GUIでの実装方法を説明します。
1. ボタンをクリック > 左のPropertiesから`Action`タブをクリック > `onClick`のEditをクリック
2. `Show Alert`をクリックし、以下のように設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/630d7ffe-19c2-588a-4001-7a8dae333bd8.png)

各項目を説明します。

**Alert Type**：アラートのタイプを示します。可能な値は次のとおりです。
ALERT_TYPE_CONFIRMATION
ALERT_TYPE_ERROR
ALERT_TYPE_INFO

**Alert Title**：アラートのタイトルを示します。
**Yes Label**：はいラベルに表示されるテキスト。未指定の場合、デフォルト値が表示されます。
**No Label**：いいえラベルに表示されるテキスト。未指定の場合、デフォルト値が表示されます。※コンファーメーションのみ
**Alert Icon**：アイコン。※iPhoneではサポートされていません。
**Icon Position**：アイコンの位置[右か左か]
**Message Type**：[Constant]または[Expression]のいずれかを選択します。
Constantは、入力したメッセージが表示されます。Expressionは、表示メッセージが式から形成されます。式の作成の詳細については、以下を参照にしてください。
https://docs.kony.com/6_5/konylibrary/studio/studio_user_guide/Content/Working_with_Expression_Editor.htm

実際にどうなるかみていきましょう！

#実装の確認
今回はコンファーメーションのみ、タイトルの右に画像（スマートフォン）を設定しています。（Androidのみ適用）

**◆Responsive Web**

| アクション | 表示 |
| ------ | ----- |
| インフォーメーションボタンをクリック | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/330a651e-3b63-175a-d677-da87c83f8917.png)|
| コンファーメーションボタンをクリック |  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/14278fb0-8459-ef99-9b84-d207605f0eab.png)|
| エラーボタンをクリック |  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c89f4ca5-e8b5-2bbf-2819-0c774e1c8d1f.png)|

**◆iPhone**

| アクション | 表示 |
| ------ | ----- |
| インフォーメーションボタンをタップ | <img width="200" " src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/2a85654d-c8d2-3cd9-602e-cc6f3356b6dc.png">|
| コンファーメーションボタンをタップ | <img width="200" " src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/5fa3d578-cfc0-8e4b-4df9-797c20b186a1.png">|
| エラーボタンをタップ | <img width="200" " src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/a67bee29-bfa0-db19-eeaf-b9b039bdf4ae.png">|

**◆Android**

| アクション | 表示 |
| ------ | ----- |
| インフォーメーションボタンをタップ | <img width="200" " src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/584e52b9-d723-2fb4-7d9a-3e86460994eb.png">|
| コンファーメーションボタンをタップ | <img width="200" " src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/c98a920a-99b2-cef3-c9ef-44b612d9988d.png">|
| エラーボタンをタップ | <img width="200" " src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592264/7fc1bb36-95f0-35ec-e2fa-d2b7bcaf2ea0.png">|

デバイス毎にアラートの表示が異なることが分かりますね！

#まとめ
コーディングおよびGUIでの実装方法の説明およびデバイス毎の表示をご紹介しました。
よろしければ、みなさんもぜひ活用してみてくださいね:wave:

#参考
kony.ui.Alert Function：
https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/content/kony.ui_functions_alert.htm

kony.ui Namespace：
https://docs.kony.com/konylibrary/visualizer/viz_api_dev_guide/content/kony.ui_functions.htm

Alert Widget：
https://docs.kony.com/konylibrary/visualizer/viz_widget_prog_guide/content/Alert.htm

Working with Expression Editor：
https://docs.kony.com/6_5/konylibrary/studio/studio_user_guide/Content/Working_with_Expression_Editor.htm