狛ログ

オフィス狛 技術部の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()

上記の結果を出力すると、
のように出力されて、バインド値と実際のSQL文を確認することができます。

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

■記述例2

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

出力結果

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

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

オフィス狛 技術部の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のバージョンアップはたくさんの方が記事にされていますが、環境によって対応が異なるとは思いますので、何かお役に立てれば幸いです。

こんにちは、オフィス狛 デザイン部の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サービスも写真をよく使っているようです。
今回使用した写真含め、とても綺麗な写真が多いので見ているだけでも楽しいサイトですので、ぜひ活用してみてください。

オフィス狛 技術部の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について調べたことがあれば、都度更新していこうと思います。

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

数か月前になりますが、Apache HTTP Web Server 2.4系における複数の脆弱性に対応した Apache HTTP Web Server 2.4.41 が公開されました。
https://www.apachelounge.com/

担当したプロジェクトのWindows Serverがアップデート要のバージョンであったため、Apacheのアップデートを行ったのですが、「インストーラーをダウンロードして実行」のように簡単にはいかなかったので、備忘も兼ねて記事にしてみました。

アップデートを実施した環境は以下になります。
※OSやバージョンにより手順が異なる場合があるのでご注意ください。
OS：Windows Server 2012 R2
Apache：2.4.29 → 2.4.41

Apacheのアップデート

①Apacheのダウンロード

下記サイトよりダウンロードします。
https://www.apachelounge.com/

[手順]
左のメニューから「Downloads」を選択
→ ビルドバージョン（VCxx、VSxx など）を選択
→ 対象のApacheバージョンを選択してダウンロード

※ビルドバージョンの「VCxx、VSxx」は、ビルドされたVisual Studioのバージョンになるので、ご利用の環境により選択してください。
・VC14：Visual Studio C++ 2015
・VC15：Visual Studio C++ 2017
・VS16：Visual Studio C++ 2019

②アップデート前Apacheバックアップ

アップデート前の「Apache24」フォルダを別の場所へバックアップしておきます。
※アップデート後に、ソースや設定ファイル等を移行します

③コマンドプロンプト起動（管理者）

コマンドプロンプトを管理者として実行します。

④Apacheアンインストール

コマンドプロンプトで下記のコマンドを入力し、Apacheを停止してアンインストールします。

cd [Apacheのインストール先フォルダ]\bin
httpd -k shutdown
httpd -k uninstall

⑤Apacheフォルダ配置

上記①でダウンロードしたファイルを解凍した新しいバージョンの「Apache24」フォルダを、Apacheのインストール先フォルダに配置します。（旧バージョンのフォルダはバックアップしているので、私はこのタイミングで削除しました）

⑥インストール

コマンドプロンプトで下記のコマンドを入力し、Apacheをインストールします。

cd [Apacheのインストール先フォルダ]\bin
httpd -k install

⑦設定ファイル反映

ソースや設定ファイルを、アップデート後の「Apache24」フォルダに移行します。

⑧Apacheスタート

コマンドプロンプトで下記のコマンドを入力し、Apacheをスタートします。

cd [Apacheのインストール先フォルダ]\bin
httpd -k start

⑨バージョン確認

コマンドプロンプトで下記のコマンドを入力し、Apacheをスタートします。

cd [Apacheのインストール先フォルダ]\bin
httpd -v

以下のように出力され、正しくアップデートされました。

C:\Program Files\Apache Software Foundation\Apache24\bin>httpd -v
Server version: Apache/2.4.41 (Win64)
Apache Lounge VC14 Server built:   Aug 12 2019 10:48:01

⑩サービスの設定を確認

Apacheの自動起動などを設定している場合は、念のためサービスで設定を確認しておきます。


以上でアップデートが完了になります。

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

iOSに限ったことではないですが、
クライアントアプリとバックエンド（API）のバージョンの整合性を取るの面倒ですよね・・・・
バックエンドの都合で、どうしてもiOSを強制的にアップデートさせたい事もあります。

弊社の場合、プロジェクトにもよりますが、独自実装を行う方法と、プラグインを使う方法を使い分けています。
独自実装を行うのは、業務の兼ね合いだったり、バックエンド（API）の都合だったり、様々です。

今回はプラグインを使うパターンを説明します。
使うプラグインは「Siren」というものです。

ArtSabintsev/Siren

他のサイトなどで、導入方法は説明あるのですが、実用的な説明をしているものは少ないので、そこにポイントを絞って説明します。

と言っても・・・・・

let siren = Siren.shared
siren.presentationManager = PresentationManager(forceLanguageLocalization: .japanese)
siren.rulesManager = RulesManager(
    majorUpdateRules: Rules(promptFrequency: .immediately, forAlertType: .force), // A.b.c.d
    minorUpdateRules: Rules(promptFrequency: .immediately, forAlertType: .option), // a.B.c.d
    patchUpdateRules: Rules(promptFrequency: .daily, forAlertType: .option), // a.b.C.d
    revisionUpdateRules: Rules(promptFrequency: .weekly, forAlertType: .skip) // a.b.c.D
)
siren.wail()

これで終わりなんですけどね。
上記は、「AppDelegate」に記載します。

まずは、下記１行で、日本語化しています。

siren.presentationManager = PresentationManager(forceLanguageLocalization: .japanese)

次にRulesManagerを使って、複数パターンのルールを設定しています。
これで、バージョンアップの内容によって、アップデートの促し方を変えることが可能です。

コメントの「A.b.c.d」は、バージョン表示を示していて、大文字の部分が、変更となる箇所を表しています。
以下で細かく説明していきます。

メジャーアップデート（A.b.c.d）の時

例えば、現在使っているアプリのバージョンが「1.0.1.1」で、
App Storeにあるアプリのバージョンが「2.0.0.0」になっている場合です。

majorUpdateRules: Rules(promptFrequency: .immediately, forAlertType: .force), // A.b.c.d

この場合は、すぐにでもアップデートさせたいので、
promptFrequency: .immediately
で、アプリ起動時にすぐさまチェックし、
forAlertType: .force
で、アップデートを強制させています。
この時のダイアログ表示は、下記となります。

マイナーアップデート（a.B.c.d）の時

例えば、現在使っているアプリのバージョンが「1.1.0.0」で、
App Storeにあるアプリのバージョンが「1.2.0.0」になっている場合です。

minorUpdateRules: Rules(promptFrequency: .immediately, forAlertType: .option), // a.B.c.d

この場合も、出来ればすぐにアップデートして欲しいので、
promptFrequency: .immediately
で、アプリ起動時にすぐさまチェックしますが、
forAlertType: .option
で、アップデートはあくまで任意としています。
（まあ、毎回ダイアログが出るので、大抵の人はアップデートしてくれますけどね）
この時のダイアログ表示は、下記となります。

パッチアップデート（a.b.C.d）の時

例えば、現在使っているアプリのバージョンが「1.1.0.0」で、
App Storeにあるアプリのバージョンが「1.1.1.0」になっている場合です。

patchUpdateRules: Rules(promptFrequency: .daily, forAlertType: .option), // a.b.C.d

この場合も、出来ればすぐにアップデートして欲しいものの、
promptFrequency: .daily
で、チェック自体を１日に１回のみ行なって、
forAlertType: .option
で、アップデートもあくまで任意としています。
（この場合でも、大抵の人は2回目か３回目のダイアログ（つまり２日、３日目）ぐらいには、アップデートしてくれます）
この時のダイアログ表示は、下記となります。（マイナーアップデートと同じです。）

リビジョンアップデート（a.b.c.D）の時

例えば、現在使っているアプリのバージョンが「1.1.0.0」で、
App Storeにあるアプリのバージョンが「1.1.0.1」になっている場合です。

revisionUpdateRules: Rules(promptFrequency: .weekly, forAlertType: .skip) // a.b.c.D

この場合は、重要なアップデートではない事（少しの機能改善など）が多いので、
promptFrequency: .weekly
で、チェック自体を１週間に１回のみ行なって、
forAlertType: .skip
で、アップデート自体をスキップする事を可能としています。
（スキップの選択肢を出してしまうと、大抵の人はスキップして、アップデートしてくれません（泣））
この時のダイアログ表示は、下記となります。


以上となります。今回は、あくまで例として挙げましたが、
プロジェクトによって、色々な設定で組み合わせを試してみてはいかがでしょうか。

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

AWSのCloudWatchはいろいろな統計やデータ解析にも非常に役立つので、AWS環境で開発されている方は頻繁に見る機会があると思いますが、基本的にはグラフを見ながら、この時間にCPU使用率が～とか、ネットワーク数が～と見たりすると思います。

ただ、グラフではなく、この期間のこのCPU使用率の「平均値」とか、ネットワーク入力数の「合計」とか見たい場合があり、それらの情報もCloudWatchで確認することができたので、備忘録として記載したいと思います。

ある期間のEC2のCPU使用率の平均値を知りたい場合

①CloudWatchメニューの「メトリクス」を選択

②「すべてのメトリクス」タブで対象のEC2インスタンスの「CPUUtilization」（CPU使用率）にチェックをいれる

③「グラフ化したメトリクス」タブの統計欄で「平均」を選択する

④「グラフのオプション」タブのウィジェットタイプで「数値」を選択し、値に「時間範囲の値」を選択する

⑤画面右上の表示範囲を設定する
　「カスタム」を選択して細かな期間で表示可能です。
例えば直近1ヶ月等の平均値を表示したい場合は「絶対値」タブで開始日時、終了日時を設定し、「適用」ボタンをクリックします。

以上の設定でEC2のCPU使用率の平均値が数値で表示されます。


同じような設定方法で、その他のメトリクスの期間内の合計や平均値の数値情報のみを取得することが可能ですので、グラフ以外の使い方として利用してみてはいかがでしょうか。