2019年5月31日金曜日

Node.jsでknex.jsを使ったSQL書き方Tips


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

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

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

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

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

■基本的なSQL

例えば出身地、名前、年齢が登録されているテーブルがあったとして、下記のようなSQLでとあるデータを取得するとします。
    select
        name
    from users
    where
        birth_place = '東京都'
        and age >= '20';
これを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の記述の方法で複数ソートしたいとき、公式の書き方だとちょっと面倒です。
    select *
    from users
    order by email asc, age desc
これを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的な事象が出てきたら書きたいと思います。

,

2019年5月30日木曜日

AppStoreアプリ審査の際にスクリーンショットでリジェクトされた!リジェクトされポイント


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

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


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

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

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

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


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


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


2019年5月29日水曜日

Amazon ConnectとLambdaで電話をかける ②IAMでロールを作成


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









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




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

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


②IAMでロールを作成

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


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

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


,

2019年5月1日水曜日

AngularのEventEmitter(Output、emit) で複数の値を送りたい。


オフィス狛 技術部の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()」の使い方の基本です。

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

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

モデル(クラス)を利用すれば、引数としては1つですが、複数の値を送る事が実現できます。
[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ライフを!