2019年11月30日土曜日

knex.jsで実行したSQL文を確認する。

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

以前の投稿で、knex.jsのtipsをいくつか書いたりNode.jsでknex.jsを使ったSQL書き方Tips、弊社技術部のmmm(むー)が書いたりしていますが(knex.jsでfromに2つ以上のサブクエリを書く方法)、今回はもう1つ「実行したSQL文を確認する」やり方を書きたいと思います。

これ意外とよく使うのに、やり方がぱっとわからなくて、社内でもどうやるのか質問があったりしたので新たにtipsとして追加したいと思います。

もちろん公式サイトにも載ってはいるのですが、日本語対応されていないのでちょっとわかりずらいんですよね。
で、やり方は単純で、SQL実行文に.toSQL()という記述を追加することで確認可能です。

具体的には

■記述例1

knex
  .select('*').from('users')
  .where('id = ?', [1]))
  .toSQL()

上記の結果を出力すると、
bindings: [1],
method: 'select',
sql: 'select * from "users" where id = ?',
options: undefined,
のように出力されて、バインド値と実際のSQL文を確認することができます。

ちなみにpostgresqlはSQL実行文に.toSQL().toNative()と記述することで同様の結果が得られるようです。

■記述例2

knex
  .select('*').from('users')
  .where(knex.raw('id = ?', [1]))
  .toSQL().toNative()

出力結果
bindings: [1],
sql: 'select * from "users" where id = $1',

自分も最初はこのやり方を知らずに、デバッグでステップ実行してどこでSQL作っているのかずーっと奥の方まで追って行って、確認するのに結構苦労してました(苦笑)

以上のように知ってしまえば簡単なんですが、知らないとかなりやりずらいので、ご参考にしてみてください。

,

SpringBoot「1.5」を「2.1」へバージョンアップ。


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

SpringBoot 1系が2019/8/1にEOLになり、担当しているプロジェクトもバージョンアップ要件(1.5 → 2.1)がありました。
バージョンアップで対応した内容の一部をご紹介します。

① application.ymlファイルのエラー

非推奨となったプロパティが大量に出てきました。こちらは全てメッセージに従いキー名を変更することで解決しました。

【参考)メッセージ】
Property 'spring.thymeleaf.content-type' is Deprecated: Use 'spring.thymeleaf.servlet.content-type' instead.
Property 'server.session.timeout' is Deprecated: Use 'server.servlet.session.timeout' instead.
Property 'spring.messages.cache-seconds' is Deprecated: Use 'spring.messages.cache-duration' instead.
Property 'spring.http.multipart.max-file-size' is Deprecated: Use 'spring.servlet.multipart.max-file-size' instead.
Property 'spring.http.multipart.max-request-size' is Deprecated: Use 'spring.servlet.multipart.max-request-size' instead.
Property 'spring.datasource.initialize' is Deprecated: Use 'spring.datasource.initialization-mode' instead.

② Beanオーバーライドが無効

次に下記エラーが発生しました。
The bean 'XXX', defined in class path resource [XXX.class], could not be registered. A bean with that name has already been defined in class path resource [XXX.class] and overriding is disabled.

SpringBoot 2系では、Beanオーバーライドがデフォルトで無効になったようです。
メッセージのActionに従い、application.ymlファイルに下記を追記しました。
spring.main.allow-bean-definition-overriding: true

③ 非推奨、廃止、構成変更のパッケージ

非推奨、廃止、構成変更になったパッケージがいくつかありましたので、下記のように修正しました。

■非推奨
【変更前】
import org.hibernate.validator.constraints.NotBlank;
import org.hibernate.validator.constraints.NotEmpty;
【変更後】
import javax.validation.constraints.NotBlank;
import javax.validation.constraints.NotEmpty;

■廃止
【変更前】
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
public class MessageConfig extends WebMvcConfigurerAdapter { ・・・
【変更後】
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
public class MessageConfig implements WebMvcConfigurer { ・・・

■構成変更
【変更前】
import org.springframework.boot.web.support.SpringBootServletInitializer;
【変更後】
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;

④ application.ymlファイルから@ConfigurationPropertiesで値が設定されない

こちらは動作確認をして気が付いたのですが、@ConfigurationPropertiesアノテーションを付けたクラスでsetterメソッドがstaticだと、application.ymlファイルから値を設定できなくなってしまいました。
下記のように非staticなメソッドに変更することで無事設定されました。
@Component
@ConfigurationProperties(prefix = "outerconf")
public class OuterConf {

  private static String rootdir;

  public static String getRootdir() {
    return rootdir;
  }

  // 非staticに変更
  public void setRootdir(String rootdir) {
    OuterConf.rootdir = rootdir;
  }
}


SpringBootのバージョンアップはたくさんの方が記事にされていますが、環境によって対応が異なるとは思いますので、何かお役に立てれば幸いです。

,

2019年11月29日金曜日

「コンテンツに応じた塗りつぶし」で写真の不要なものを消す。


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

今回はPhotoshopCC2019から機能が強化された「コンテンツに応じた塗りつぶし」という機能を使って写真から不要なものを消す方法をご紹介しようと思います。
この機能を使うとあのAdobe Senseiが数分で遠目で見る分には問題ないくらいに自然に選択した部分の中身を近くの部分そっくりにしてくれます。

https://unsplash.com/photos/Osd4ngHD4kM
↑今回はこの写真から中央に立っている人物を消してみます。
とっても綺麗な写真ですが今は無人の廃墟の写真が欲しいので女の子にはどいてもらいましょう……。


まず、消したいものを選択していきます。
精密に消したい方は自動選択ツールなどがいいかと思いますが、今回はなげなわツールでざっくり選択しました。


選択後、Photoshopメニューバーの「編集」の「コンテンツに応じた塗りつぶし」をクリックします。


コンテンツに応じた塗りつぶしツールのワークスペースが表示されます。
左が編集画面、右がプレビュー画面です。


緑になっている部分はサンプリングされる(人工知能が参考にする)部分です。
右上のサンプリングブラシツールを使って緑の部分を微調整していきます。
サンプリング箇所の拡張と削除のブラシの切り替えは上部のサンプリングブラシツールのオプションの+と-のアイコンでも切り替えできます。またOptionかAltキーを押しっぱなしにしても切り替えができます。

消したい選択範囲を広げたい場合なげわツールで追加しましょう。


プレビュー画面で確認しつつ、いい感じになったら右下にあるOKボタンを押すと通常のワークスペース画面に戻り、(右にある出力先設定の値が初期設定の「新規レイヤー」になっている場合)修正した部分の新しいレイヤーができています。


違和感があまりなく人物が消えましたね!
しかし拡大しよく見ると、木と石が合体したような瓦礫などができあがってしまっていたり少し違和感があります。
拡大すると意外と気になりますね…。
このような気になる部分はコピースタンプツールで微調整をします。
全体的に見ると少し違いが分かりづらいので比較画像にまとめてみました。

この方法で修正した後の画像がこちらです。
遠目だと分かりずらいですが、比較画像の通り変になっている部分と人物の影をコピースタンプツールで消しました。
拡大しても大丈夫なくらいに違和感が減りました!
「コンテンツに応じた塗りつぶし」のみで完璧なものができる訳ではなさそうですが、コピースタンプツールやパッチツールで修正するよりもかなり手早く「遠目で見ると違和感ないレベルまで」修正できて感激です。

他の空の写真と組み合わせて夕暮れの写真を作ってみました。
この写真の空の部分のみトリミングし使いました。
色々と細かい調整が大変で人物を消す+微調整の10倍以上の時間がかかってしまいました。
つまり「コンテンツに応じた塗りつぶし機能」は本当に素早く人物を消すことができます!
コピースタンプツールで人や邪魔なものをチマチマ……消さなくていいのは本当にありがたいですね……。

Adobeのマニュアルに「コンテンツに応じた塗りつぶし」機能の詳しい使い方が書いてあるのでそちらもチェックしてみてください。


今回のブログ記事に使用した写真は全てUnsplashというフォトストックサイトのものを使わせていただきました。
Unsplashに掲載されている写真は無料かつクレジット不要で写真加工や商業利用可なのでデザイナー的に非常にありがたいサイトです。
More precisely, Unsplash grants you an irrevocable, nonexclusive, worldwide copyright license to
download, copy, modify, distribute, perform, and use photos from Unsplash for free, including for
commercial purposes, without permission from or attributing the photographer or Unsplash.
This license does not include the right to compile photos from Unsplash to replicate a similar or competing service.

Licenseページより引用
上記の通り利用規約が非常に緩い+Unsplash APIというなにやら便利なものもあるらしいのでTrelloなどのwebサービスも写真をよく使っているようです。
今回使用した写真含め、とても綺麗な写真が多いので見ているだけでも楽しいサイトですので、ぜひ活用してみてください。

2019年11月28日木曜日

knex.jsでfromに2つ以上のサブクエリを書く方法。


オフィス狛 技術部のmmm(むー)です。
今回初投稿になります。
業務ではNode.jsを使用してAPI作成をしています。

今回は、Node.jsでDB操作を行う為のknex.jsと言うクエリビルダにて、from句に2つ以上のサブクエリを記載する方法を記載します。
SQL自体はなんてことないものですが、knex.jsでの書き方がわからず検索するのに時間がかかったため備忘録も込めて。

■実行環境

// node
node -v
// v10.16.3

// Knex.js
npm list --depth=0 | grep knex
// knex@0.15.2

// SQL Server
SELECT @@VERSION
// Microsoft SQL Server 2017 (RTM-CU13) (KB4466404) - 14.0.3048.4 (X64)  Nov 30 2018 12:57:58  Copyright (C) 2017 Microsoft Corporation Developer Edition (64-bit) on Linux (Ubuntu 16.04.5 LTS)

■書き方

結論から記載すると、半直書きするしかありません。
ちなみにこの方法に従わなくても全て直書きする方法もあります。

const subQuery1 = knex.select('id').from('table1');
const subQuery2 = knex.select('name').from('table2');

knex
    .select('*')
    .from(
        knex.raw([
            knex.raw(subQuery1).wrap('(', ') as sub_1'),
            knex.raw(subQuery2).wrap('(', ') as sub_2'),
        ]),
    );

説明
knex.raw そのままのSQLを書くことが可能
wrap knex.rawの中で使用でき、クエリをラッピング(クエリの前後に何か挿入)できる


以上となります。
またknex.jsについて調べたことがあれば、都度更新していこうと思います。


,