狛ログ

こんにちは、オフィス狛 モバイル開発担当 Aika-yuy です。
今回の投稿は、 AmazonConnectとLambdaで任意の番号に電話をかける方法をご紹介します。


AmazonConnectはコールセンターをメインとして、簡易に作成できるというものなので、
受電する記事をよく見かけますが、架電方法の記事は少なかったので記事にしました。




難しそうに見えますが、簡単で短時間で作成できますので試してみてください。
こちらの4ステップで紹介していきます。

①Amazon Connectで電話番号、お問い合わせフローの作成
②IAMでロールを作成
③Lambda関数の作成←　今回はこちら
④実行！！←　今回はこちら

　

③Lambda関数の作成

今回はいよいよ、Lambda関数からスマフォに電話をかけてみます！ とっても簡単なので、あと少し頑張りましょう。

〜必要なもの〜

１、①で作成した電話番号
２、①で作成したお問い合わせフローのインスタンスID、リージョン名、コンタクトフローID
３、②で作成した、ロール
４、任意の電話番号


AWSにログイン後、Lambdaを選択します。
ページ遷移後、関数の作成ボタンを押してください。
下の画像のように入力選択していきます。
1.関数名に任意の関数名をつけてください。
2.実行ロールを既存のロールを使用するを選択してください。
3.②IAMでロールを作成で、作成したロールを選択してください。
※作成したロールがすぐに反映されないことがあるので、作成したロールが見つからない場合は少し時間をおいてからもう一度試してみてください。
4.関数を作成ボタンを押す

それではいよいよ関数を作っていきましょう！

exports.handler = (event) => {
     
    // import entire SDK
    var AWS = require('aws-sdk');
 
    var connect;
    // create amazon connect object
    // ①で作成したお問い合わせフローのリージョン名を入力してください。
    connect = new AWS.Connect({apiVersion: '2017-08-08', region:"ap-northeast-1"});
 
    // create API request parameter
    var params = {
　　　　　　// ①で作成したお問い合わせフローのコンタクトフローID
      ContactFlowId: "XXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",
      // 今回かける先の電話番号
      DestinationPhoneNumber: "XXXXXXXXXXXXXX",
      // ①で作成したお問い合わせフローのインスタンスID
      InstanceId: "XXXXXXXXXXXXXXXXXXXXXX",
      // かける元の電話番号(作成した電話番号)
      SourcePhoneNumber: "+8XXXXXXXXXXX"
    };
  
  // call API with parameter
  console.log("開始！！");
  var calling = connect.startOutboundVoiceContact(params, function(err, data) {
    if (err) {
      console.log(err);
    } else {
      console.log("終了！！電話を切る");
    }
  });
  return calling;
};

これで完成です！

④実行！！

それではいよいよ電話をかけてみます。
Lambdaのページの一番上、右にあるテストボタンを押してください。

任意の電話番号に、電話がかかれば成功です。

意外と簡単に作成できましたね。
アレクサから電話したり色々できそうで、夢が広がりますね。
次回はアプリ(ios)から電話をかけるをやっていきます。

オフィス狛 技術部のKoma（Twitterアカウントの中の人＆CEO）です。

私の担当がいつの間にかAngular専任になっていますが・・・・今回もやっぱりAngularネタです。

Angularで、NgRxなどでAPIから値を取得した場合、そのままView（template・html）側にデータを流し込んであげれば、取得したデータは問題なく表示されます。
ところが、component（TypeScript）側で取得したデータをstore.selectで取得すると、View（template・html）側に表示データが反映されない場合があります。

うーん、言葉だけで説明するのが難しい。
この辺はいつかNgRxの使い方とかで詳しく説明したいですが、前者の場合、ストリーム（川の流れ）は繋ぎっぱなしですが、
後者は、一度ストリーム（川の流れ）から、データ取っているので、流れが止まっている、という事ですね。

強制的に画面に反映させる為には、「changeDetectorRef の detectChanges() 」メソッドを使います。

では、ここで使い方の例を一つ。

import { Component, ChangeDetectorRef, OnInit } from '@angular/core';
// （中略）
export class HogeKomaComponent implements OnInit {
// （中略）
  constructor(
    public store: Store,
    private changeDetectorRef: ChangeDetectorRef
  ) {}
 
  ngOnInit() {
    this.hogeKomaSubscription.push(
      this.store
        .select(fromHoge.getKomaList)
        .pipe(skip(1))
        .subscribe(result => {
            //
            // ここで取得したデータを編集し、Template側の変数へ再設定（これだけだと、画面は更新されない）
            //
 
            // 画面の表示を更新する（これを実施する事で画面が更新される）
            this.changeDetectorRef.detectChanges();
    }));
 
    // データ取得
    this.store.dispatch(new KomaListActions.GetKomaList());
  }

で、ここからが本題なのですが、「detectChanges()」を使っていると、以下のようなエラーが発生する事があります。

    common.96cfb6ba445916612966.js:1 ERROR Error: ViewDestroyedError: Attempt to use a destroyed view: detectChanges
    at pm (main.35927d7a5d9b4fa62e08.js:1)
    at Object.m_ [as updateDirectives] (main.35927d7a5d9b4fa62e08.js:1)
    at jv (main.35927d7a5d9b4fa62e08.js:1)
    at D_ (main.35927d7a5d9b4fa62e08.js:1)
    at Object.i_ [as checkAndUpdateView] (main.35927d7a5d9b4fa62e08.js:1)
    at n.detectChanges (main.35927d7a5d9b4fa62e08.js:1)
    at e._next (10.ab643854ddb1ed074304.js:1)
    at e.__tryOrUnsub (main.35927d7a5d9b4fa62e08.js:1)
    at e.next (main.35927d7a5d9b4fa62e08.js:1)
    at e._next (main.35927d7a5d9b4fa62e08.js:1)

エラーメッセージは、
ViewDestroyedError: Attempt to use a destroyed view: detectChanges
という事ですが、要は、「画面表示を行おうとしたけど、もう対象のViewが存在しない」という事ですね。

こういう場合は、

  if (!this.changeDetectorRef['destroyed']) {
    this.changeDetectorRef.detectChanges();
  }

上記のように、既にViewが破棄されていないか確認する事で回避出来ます。

今回も内容の割には長くなってしまいました・・・・
（エラーメッセージと対応内容書けば、ある意味終了なんですけどね。）

こんな内容でも、誰かの役に立つ事を願って・・・・

では、より良いAngularライフを！

オフィス狛 技術部のJoeです。

先日、Dockerによる開発環境を作成しました。
とはいっても、Docker初心者なので一から構築した訳でなく、既にymlファイルなどの定義は作成されていたので、必要なパッケージをインストールして起動するだけ。。。
のはずだったのですが、なぜか私の端末でのみいくつか問題が発生したので、対処方法と併せてご紹介します。

【環境】
・Windows10 Home
・Docker Toolbox 18.03.0-ce

問題１．仮想化を有効にできない。

まず、Docker用の仮想マシンを構築するため、「Docker Quickstart Terminal」を実行すると以下のエラーが発生しました。

Running pre-create checks...
Error with pre-create check: "This computer doesn't have VT-X/AMD-v enabled. Enabling it in the BIOS is mandatory"

すぐにBIOSで仮想化の有効化を忘れていたと思い、BIOSを起動しましたが、「VirtualizationTechnology」など、仮想化に関する項目が見当たりません。

これが意外と事例が無く、解決までに結構時間が掛かってしまったのですが、結局、BIOSをアップデートすることで仮想化の項目が現れ、有効化することができました。

参考までに、今回アップデートしたBIOS情報を載せておきます。
・BIOS：VC65-C1
・バージョン：更新前）0501　更新後）0801
・ダウンロード先：https://www.asus.com/jp/Mini-PCs/VivoMini-VC65-C1/HelpDesk_BIOS/

問題２．bashが実行できない。

仮想化を有効できたので、再度「Docker Quickstart Terminal」を実行すると、今度は以下のエラーが発生しました。

このショートカットは、リンク先の'bash.exe'が変更または移動されているので、正しく機能しません。

「Docker Quickstart Terminal」で実行される「start.sh」はbashなのですが、Docker Toolboxと一緒にインストールするGitの「bash.exe」を使用します。

こちらは、Docker Toolboxをインストールする前に、Gitを既にDドライブにインストールしていたことが原因でした。
「Docker Quickstart Terminal」のショートカットのリンク先、「bash.exe」のパスをCからDドライブに変更することで、エラーを解消できました。

問題３．コンテナが起動しない。

スタートからつまずきましたが、やっとコンテナの起動ということで、「docker-compose up」コマンドを実行したところ、以下のエラーで起動に失敗しました。

【コンテナのログ】

npm ERR! path /usr/src/app/package.json
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall open
npm ERR! enoent ENOENT: no such file or directory, open '/usr/src/app/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

「package.json」が見つからないと言ってますが、コンテナにコピーした時にエラーは出てなく、npmのインストールも正常に実行できていました。

docker psコマンドでSTATUSを見ると、Restartingが繰り返されている状態になっています。

CONTAINER ID  IMAGE  COMMAND                CREATED         STATUS                          PORTS  NAMES
6438e1e2df74  test   "bash -c 'npm run de…" 29 seconds ago  Restarting (254) 2 seconds ago         test

エラーになったコマンド「docker-compose up」では、ymlファイルを２ファイル（共通、環境別用に分けている）指定していたのですが、定義内容を１ファイルにまとめて指定することで起動できました。

２ファイルで起動できなかった原因がどうしても見つからなかったので、こちらは引き続き調べてみたいと思います。

オフィス狛 技術部のHammarです。

皆さんNode.jsとRDBを使って開発をされるときに、クエリビルダは何をお使いでしょうか？

以前にもブログで何度か書きましたが、弊社の一部プロジェクトではknex.jsというクエリビルダを使っています。

結構クセのある書き方ではじめは手こずりましたが、やはり人間慣れは重要で、今では意外と使いやすいなと思う部分も結構あります。
幅広いDBの種類に対応しているので、DBの種類によってインストールするモジュールを変える必要はなく、これ１つで同じ書き方ができるのでお勧めです。

ただあまり日本語の解説記事がないので、SQLの特殊な書き方をするときにどう書けばいいかわからなくて、ちょっとだけハマった事象について、自分への備忘録も兼ねて書こうと思います。

■基本的なSQL

例えば出身地、名前、年齢が登録されているテーブルがあったとして、下記のようなSQLでとあるデータを取得するとします。
これをnodeでknexを使って書くと（knexはrequire済みとします）

knex
    .select('name')
    .from('users')
    .where('birth_place', '東京都')
    .andWhere('age', '>=', '20')

という感じで基本的にはSQLの書き方に沿った感じで書くことが可能です。

基本的な書き方は公式リファレンスをみていただければほとんど大丈夫なのですが、公式にも詳しくのっていなかったりするものもあります。

■数値をプレースホルダにいれる場合

以前ブログにも書きました数値をプレースホルダにいれる場合、下記のように書きます。
（狛ログ：knexライブラリのIN句でプレースホルダを使うときの注意点）

const array = [1, 2, 3];
knex
    .select('name')
    .from('users')
    .whereRaw('id in (?)', [array]);

■from句でエイリアスを使いたい場合

knex
    .select('name')
    .from(users.clone().as('u'));

これはたとえばサブクエリでいろいろ結合した結果をセレクトしたいとき等で、別名にしたいときに利用できます。

const subQuery = サブクエリの内容
knex
    .select('sub_name')
    .from(subQuery.clone().as('sub'));

■order byで複数設定したい場合

通常のorder byの記述の方法で複数ソートしたいとき、公式の書き方だとちょっと面倒です。
これをknexで書くと

knex
    .('users')
    .orderBy(['email', { column: 'age', order: 'desc' }])

上記でも全然問題ないんですが、ちょっとぱっと見わかりにくいのと、ソートが沢山あるとさらにわかりにくくなるので、下記のような書き方のほうがいいと思っています。

knex
    .('users')
    .orderByRaw('email asc, age desc');

このRawというのは基本的にそのままSQL文を記述が可能で、join句にもjoinRawというのがあったり、where句にもwhereRawというのあります。
select句にはselectRawみたいな書き方はないのですが、knex.raw()を使うことができ、例えば下記のようにselectにcase文を使いたい時など、select句で特殊なことをするときに使えます。

knex
    .select(
        'name',
        knex.raw('case when age >= 10 then categoryA else categoryB end as category'),
    )
    .from('users')
    .where('birth_place', '東京都')

で、knex.raw()はfrom句だろうが、where句だろうがどこにでも使えて、これを使うともはやknexの書き方に従わなくともSQLがそのまま書けますw
そこは臨機応変にだと思いますが、このように結構自由度も高いのでknexは個人的にはお勧めだと思います。

またtips的な事象が出てきたら書きたいと思います。

こんにちは、オフィス狛 デザイン部のSatoです。

今回はAppStoreアプリ審査の際にスクリーンショットでリジェクトされた話です。
私は確認不足で色々とAppStoreアプリ審査の際にやらかしがちなのでスクリーンショットを理由にリジェクトされたりなことがあります。
スクリーンショットでリジェクトされるとやっぱりエンジニアさんに申し訳なくなる……ので、リジェクトされないように自分のミスを共有していこうと思います。

①AppStoreアプリ審査する際に必要なスクリーショットのサイズが変更になった。

リジェクト以前にアプリ審査が出せません！
AppStoreアプリ申請について必要なものを分かりやすくまとめているブログサイトは便利でわかりやすいのですが、「数日前に増えた申請必須項目」は当然載ってないことが多いので、アプリのアップデートや新規申請の際はApp Store Connectのニュースページを確認しましょう。（このページ探すのが地味に大変でした）

②スクリーンショットの端末対応サイズとスクリーショットに使用している端末が違う。

例えばiPhoneXなどの端末で表示するためのスクリーンショットに写っている端末がiPhone8な時はリジェクトされます。
悲しいですね。
直前に①に気づくと端末枠用意していないからスクリーンショットのサイズだけ変えて申請！としたくなりますがリジェクトされます。
（スクリーショットをはめこんでいる端末っぽい枠がイラストっぽくても色が違くても大丈夫みたいです。今後変わる可能性がありますが……）


今後、またスクリーンショットでリジェクトされたらその話題でブログを書こうと思います。
自分のミスでリジェクトされないのが一番いいですが！


（こぼれ話なのですが、今回のブログの最初に表示される画像の背景みたいな柄が可愛いくて大好きなのですが、なんていう名前なのか分からないので困っています。
分からないままこういう感じの幾何学模様ごちゃ混ぜみたいな柄を真似して作りました。
柄名を知ってる方！なんていう柄なのか教えてください！）

こんにちは、オフィス狛 モバイル開発担当 Aika-yuy です。
今回の投稿は、 AmazonConnectとLambdaで任意の番号に電話をかける方法をご紹介します。


AmazonConnectはコールセンターをメインとして、簡易に作成できるというものなので、
受電する記事をよく見かけますが、架電方法の記事は少なかったので記事にしました。




難しそうに見えますが、簡単で短時間で作成できますので試してみてください。
こちらの4ステップで紹介していきます。

①Amazon Connectで電話番号、お問い合わせフローの作成
②IAMでロールを作成←　今回はこちら
③Lambda関数の作成
④実行！！

②IAMでロールを作成

Lambda関数から、Connectを呼ぶ際に、権限を設定する必要があります。
設定するのは、下記の２つです。
・StartOutboundVoiceContact(電話をかける権限)
・StopContact(電話を切る権限)
IAM→ロール→ロール作成→
Lambdaを選択→次のステップにアクセス→
ポリシーの作成→サービスでConnect選択→StartOutboundVoiceContact、StopContact選択→
全てのリソースにチェック→ポリシーの確認→
名前を入力→ポリシーの作成→完成！！！

意外と簡単に作成できましたね。

次回は③Lambda関数の作成を書いていきます。

オフィス狛 技術部のKoma（Twitterアカウントの中の人＆CEO）です。

令和最初のブログはAngularです。

今回は、普段は意識しないけど、「そう言えばどうやるんだ？」的な小ネタです。

Angularでは、親コンポーネントから子コンポートに値を渡す時は「@Input()」を使用します。
イメージ的には変数経由で値を渡す、と言う感じですかね。
逆に子コンポーネントから親コンポートに値を渡す時は「@Output()」を使用します。
こちらは、メソッドに経由で値を渡す、と言う感じです。

この「@Output()」ですが、簡単な使い方として、
親コンポーネント側（hoge-parent.component.ts）で、以下のように記載します。
分かりやすくする為にView（html）はファイルを分けています。（hoge-parent.component.html）

[hoge-parent.component.ts]

@Component({
  selector: 'koma-hoge-parent',
  templateUrl: './hoge-parent.component.html'
})
export class HogeParentComponent {

// （中略）

  onSubmit(childValue: string) {
    console.log(childValue);
  }
}

[hoge-parent.component.html]

<koma-hoge-child
  (formSubmit)="onSubmit($event)">
</koma-hoge-child>

「onSubmit($event)」が子コンポーネントからの指示（formSubmit）を待ち構えている、と言う表現がしっくりきますね。

子コンポーネント側（hoge-child.component.ts）は、以下のように記載します。
[hoge-child.component.ts]

@Component({
  selector: 'koma-hoge-child',
  templateUrl: './hoge-child.component.html'
})
export class HogeChildComponent {
  @Output() formSubmit = new EventEmitter<string>();

// （中略）

  onClickButton(textValue: string) {
    this.formSubmit.emit(textValue);
  }
}

onClickButton のメソッドの中で、textValue を引数に、「emit」を使って、親コンポーネント側の処理を実行します。

と、前置きが長くなったのですが、上記までが「@Output()」の使い方の基本です。

ある時、ふと思ったんですよね。
「あれ？これ、複数の引数を送りたい場合どうするんだ？」
と。

モデル（クラス）を利用して複数の値を送る場合

モデル（クラス）を利用すれば、引数としては１つですが、複数の値を送る事が実現できます。
[hoge.ts]

export class HogeHogeModel {
  hogeId: string;
  hoge1: string;
  hoge2: number;
}

[hoge-child.component.ts]

@Component({
  selector: 'koma-hoge-child',
  templateUrl: './hoge-child.component.html'
})
export class HogeChildComponent {
  @Output() formSubmit = new EventEmitter<HogeHogeModel>();

// （中略）

  onClickButton(textValue: string) {
   const hogeObj = new HogeHogeModel();
    hogeObj.hogeId = textValue;
    hogeObj.hoge1 = '名前';
    hogeObj.hoge2 = 1234;
    this.formSubmit.emit(hogeObj);
  }
}

親コンポーネント側（hoge-parent.component.ts）は下記のようになります。
※View（hoge-parent.component.html）は変更不要です。
[hoge-parent.component.ts]

@Component({
  selector: 'koma-hoge-parent',
  templateUrl: './hoge-parent.component.html'
})
export class HogeParentComponent {

// （中略）

  onSubmit(childObj: HogeHogeModel) {
    console.log(childObj.hogeId);
    console.log(childObj.hoge1);
    console.log(childObj.hoge2);
  }
}

記載は省略していますが、モデル（クラス）のimportは必須です。

「モデル（クラス）を送れば解決」でも良いんですが、
わざわざモデル（クラス）を作るのもなぁ・・・・と思う事があるかもしれません。
（個人的にはそれでもモデル（クラス）作るべきだと思いますが）

連想配列をその場で定義し、複数の値を送る場合

ちょっと特殊ですが、もう一つの書き方を紹介します。
子コンポーネント側（hoge-child.component.ts）を以下のように記載します。
[hoge-child.component.ts]

@Component({
  selector: 'koma-hoge-child',
  templateUrl: './hoge-child.component.html'
})
export class HogeChildComponent {
  @Output() formSubmit = new EventEmitter<{ hogeId: string; hoge1: string; hoge2: number }>();

// （中略）

  onClickButton(textValue: string) {
    this.formSubmit.emit({
      hogeId: textValue,
      hoge1: '名前';,
      hoge2: 1234
    });
  }
}

まあ、分かってしまえば、「そりゃそうだよな」と言う書き方なのですが。

続いて、親コンポーネント側（hoge-parent.component.ts）は下記のようになります。
※View（hoge-parent.component.html）は変更不要です。
[hoge-parent.component.ts]

@Component({
  selector: 'koma-hoge-parent',
  templateUrl: './hoge-parent.component.html'
})
export class HogeParentComponent {

// （中略）

  onSubmit(childObj: any) {
    console.log(childObj.hogeId);
    console.log(childObj.hoge1);
    console.log(childObj.hoge2);
  }
}

気を付ける事は引数の型を「any」にする事ぐらいですかね。
型を特定出来ない（any）と言う事は、実行時にエラーになる可能性が高いので、やはりオススメしません。

以上です。今回も内容の割には長くなってしまいました・・・・

では、令和も良いAngularライフを！