狛ログ

オフィス狛 技術部のmmm（むー）です。

フロント担当になったけど、APIがまだ作成されていない... Databaseもない...
そんな時のために大量のダミーデータがあるREST APIサーバーの作り方をご説明します😶

Nodeとnpmがインストールされていること

1. JSON Serveのインストール

JSON Serverを使用すると、REST APIのモックサーバーを簡単に作成できます。

使用したいプロジェクト配下に移動し、下記を実行します。

$ cd ~/<プロジェクトパス>
$ npm install --save json-server 

# もしグローバルインストールしたい場合はこちら
$ npm install -g json-server

2. Faker.jsのインストール

Faker.jsを使用すると、大量のダミーデータを簡単に作成することができます。

Faker.jsのデータを保存する用に新たなファイルを作成します。

$ vi database.json

中身は下記のようにしてください。

{
     "info": []
 }

Faker.jsをインストールします。

$ npm install faker --save

Faker.jsでデータを作成する用のファイルを作成します。

$ vi generate.js

中身は下記のようにしてください。
(これは一例なので、名前とメールアドレスがセットのデータを10個作成していますが、必要なデータに合わせて変更してください)

var faker = require('faker');
 
 var database = { info: []};
 
 for (var i = 1; i<= 10; i++) {
   database.products.push({
     id: i,
     name: faker.name.findName(),
     email: faker.internet.email(),
   });
 }
 
 console.log(JSON.stringify(database));

以下のURLのNameSpacesに 、Faker.jsの用意されているダミーデータが記載されていますので必要なものを使用してください。
http://marak.github.io/faker.js/index.html

generate.jsのコードを実行して、出力結果をdatabase.jsonに書き込みます。

$ node generate.js > database.json

database.json中身が下記のようになりました。

$ cat database.json

 {"products":[
  {"id":1,"name":"Newton Kris","email":"Precious40@hotmail.com"},
  {"id":2,"name":"Dee Hackett","email":"Kasandra.Trantow91@gmail.com"},
  ~ 省略 ~
  {"id":10,"name":"Alvera Russel","email":"Felicia57@hotmail.com"}
 ]}

database.json のデータを返す、jsonServerを起動します。

$ json-server --watch database.json
 
 　# 　下記のように表示されたら、起動成功です
   \{^_^}/ hi!
 
   Loading database.json
   Done
 
   Resources
   http://localhost:3000/info
 
   Home
   http://localhost:3000

ブラウザにて、http://localhost:3000/info にアクセスしてみましょう。
作成したデータが表示されているはずです。

3. コマンドラインから確認する場合

curlコマンドを使用して確認します。

 # GET：全てのデータ取得
 $ curl -X GET "http://localhost:3000/info"
 
 # GET：「idが1」のデータだけ取得
 $ curl -X GET "http://localhost:3000/info/1/"
 
 # POST：「idが11」「nameがhoge」「emailがfuga@gmail.com」のデータ作成
 $ curl -X POST -d "id=11&name="hoge"&email=fuga@gmail.com" "http://localhost:3000/info"
 
 # PUT：idが1のデータの「nameをtest」「emailをupdate@gmail.com」に更新
 $ curl -X PUT -d "name=test&email=update@gmail.com" "http://localhost:3000/info/1"
 
 # DELETE：「idが11」のデータを削除
 $ curl -X DELETE "http://localhost:3000/info/11"

🍭 以下おまけ

既存プロジェクトのpackage.jsonのscript箇所に、データを作成するコマンドとjsonServerを起動するコマンドを入れると 便利です。

   // 一例として、angularのプロジェクトのpackage.json
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
     "generate": "node generate.js > database.json", // 追加
     "server": "json-server --watch database.json" // 追加
   },

下記のようにスクリプトを実行することができます。

# ダミーデータの作成
 $ npm run generate
 
 # jsonServerの起動
 $ npm run server

以上となります。
簡単に使用できるので、REST APIサーバーが至急必要な場合はぜひ試してみてください。

こんにちは、オフィス狛 モバイル開発担当Aika-yuy です。
今回の投稿は、viewなどの一部分を角丸にしたい場合にインスペクタから設定できるようにする拡張クラスをご紹介します。
iOS11以降は、バージョンアップして以前より簡単に部分的に角丸にできるようになりました。

〜iOS10の設定方法

let path = UIBezierPath(roundedRect:layer.bounds,
                                byRoundingCorners:[//角丸にしたい場所を指定
                                                                    .topRight,
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　.topLeft,
                                                                    .bottomRight,
                                                                    .bottomLeft
                                                                   ],
                                cornerRadii: CGSize(width: XX, height: XX))
        let maskLayer = CAShapeLayer()
        maskLayer.path = path.cgPath
        layer.mask = maskLayer

iOS11〜の設定方法

layer.maskedCorners = [//角丸にしたい場所を指定
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　.layerMaxXMaxYCorner,//右上
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　.layerMinXMaxYCorner,//左上
                                          .layerMaxXMinYCorner,//右下
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 .layerMinXMinYCorner//左下
                                         ]

CustomViewを作成しました

角丸の位置の指定は、ビット値で設定しているため、cornersではそれぞれの角丸に設定された値の合計を出しています。

class CustomView : UIView {
　　　　@IBInspectable var cornerRadius: CGFloat = 0.0 { didSet { self.setNeedsLayout() } }
    @IBInspectable var cornerTopRight: Bool = false { didSet { self.setNeedsLayout() } }
    @IBInspectable var cornerTopLeft: Bool = false { didSet { self.setNeedsLayout() } }
    @IBInspectable var cornerBottomRight: Bool = false { didSet { self.setNeedsLayout() } }
    @IBInspectable var cornerBottomLeft: Bool = false { didSet { self.setNeedsLayout() } }
    
    private var corners: UInt {
        return UInt((cornerTopLeft ? 2 : 0) + (cornerTopLeft ? 1 : 0) + (cornerBottomRight ? 8 : 0) + (cornerBottomLeft ? 4 : 0))
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        self.setcornerRadius()
    }
    
    private func setcornerRadius() {
        layer.cornerRadius = self.cornerRadius
        if #available(iOS 11.0, *) {
            layer.maskedCorners = CACornerMask(rawValue: corners)
        } else {
            let path = UIBezierPath(roundedRect: layer.bounds,
                                    byRoundingCorners: UIRectCorner(rawValue: self.corners),
                                    cornerRadii: CGSize(width: self.cornerRadius, height: self.cornerRadius))
            let maskLayer = CAShapeLayer()
            maskLayer.path = path.cgPath
            layer.mask = maskLayer
        }
        layer.masksToBounds = self.cornerRadius > 0
    }
}

CustomViewを使用すると、インスペクタからon/offで部分的に角丸を設定できるようになります。 細かい角丸の設定が必要な際は使ってみてください！

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

弊社ではknex.jsを一部のプロジェクトで使用しているのですが、
これまで開発中にハマってしまった事象と対処方法を２点ご紹介したいと思います。

【環境】
・node.js：12.14.0
・knex.js：0.15.2
・SQL Server 2017

１．「Invalid column name」エラー

内部結合でand条件を追加するため、マニュアルを参考に下記のように記述したのですが、エラーが発生しました。

  const number = '1234';
  return await knex
    .select('id')
    .from('tbl_1')
    .innerJoin('tbl_2', function cond() {
      this.on('tbl_2.id', 'tbl_1.id');
      this.andOn('tbl_2.number', number);
    });

エラー内容）

Invalid column name '1234'.

function内で変数を使用すると、カラム名として扱われてしまいまいた。
対処として、プレースホルダを使用すると、値として正しく扱うことができました。

対処方法：プレースホルダを使用する）

  const number = '1234';
  return await knex
    .select('id')
    .from('tbl_1')
    .innerJoin('tbl_2', function cond() {
      this.on('tbl_2.id', 'tbl_1.id');
      this.andOn(knex.raw('tbl_2.number = ?', [number]),
      );
    });

２．insertした値を「returning」で取得できない

「returning」を使うとinsertした行の、指定したカラムの値を取得することができます。
（マニュアルを見ると、PostgreSQL、MSSQL、およびOracleで使用できるようです）

通常は以下のように記述します。この場合、insertしたデータのidの値「2」を取得できます。
（insertする値を取得するというちょっと意味のないことをしていますが、本来はオートインクリメントの値などを取得したい時などに使用します）

  return await knex
    .insert({ id: 2, memo: 'メモ' })
    .into('memo_tbl')
    .returning('id');

次に、insert句にknex.rawを使用して記述してみると、値が取得できませんでした。

ＮＧ：値が取得できない）

  return await knex
    .insert(knex.raw("(id, memo) VALUES (2, 'メモ')"))
    .into('memo_tbl')
    .returning('id');

対処として、returningは使用せず、SQL Serverで同じく操作した行の値を取得するOUTPUT句をそのまま記述することで値を取得することができました。
（OUTPUT句はSQL Serverで使用可能です。他のデータベースは異なります）

対処方法：OUTPUT句をそのまま記述する）

  return await knex
    .insert(knex.raw("(id, memo) OUTPUT INSERTED.id VALUES (2, 'メモ')"))
    .into('memo_tbl');

今回ご紹介した事象のように、一見すると正しい記述のようですが、
思わぬところで期待通りに動作しないことがありますので、ご注意ください。

こんにちは。
最近は、CI/CD周りの環境構築にどっぷり浸かっていましたKoma（Twitterアカウントの中の人＆CEO）です。
CI/CD周りはいずれ投稿するとして、今日はAngularのアップデート時に発生したエラーの解消方法です。

結論から言うと、バージョン「9」がリリースされた今だけ限定の事象ではあるのですが、
日本語で解決策を載せているサイトが無かったので、勢いで書きました。

（１）エラーが出る前にやっていたこと

今回やっていたことは以下の通りです。
・既存のAngularプロジェクトのバージョンをアップデート（8.2へ）
・既存のバージョンは「7.2」

バージョンアップ自体は、いつもの通り、Angular Update Guideを参考に行なっています。

（２）エラーの内容

アップデート自体は、うまく行ったのですが、その後の起動（ng serve）で下記のエラーが発生しました。

An unhandled exception occurred: Job name "..getProjectMetadata" does not exist.

（３）対応した内容

実は、本家のissueにも登録されている内容なのですが、
アップデート後に、「npm audit fix」をやってしまった事が原因です。
（というか、普通やりますけど）

「npm audit fix」によって、関連のプラグインがアップデートされますが、
この時、「@angular-devkit/build-angular」のバージョンが上がってしまうことに問題があります。
「npm audit fix」後の package.jsonを見ると・・・・

"@angular-devkit/build-angular": "^0.900.4",

となっています。
これが、Angular 9用のバージョンなのですが、今回アップデートしようとしているのはバージョン8なので、エラーになってしまうのですね。

と言うことで、

"@angular-devkit/build-angular": "~0.803.24",

に戻したところ、エラーはなくなり、無事に起動（ng serve）出来ました。

気持ち的には、「Angular 9」にアップデートしたいところなのですが、使用しているプラグインの対応を待たないといけないので、もどかしいところですね。
（時間さえあれば、プラグインの更新に貢献したいところなのですが・・・）

さて、これから残り３サイトのアップデートを行おうと思います。😭
しんどいけど、アップデートされず放置されているシステムが世の中に溢れていることを考えると、
アップデート出来るだけ、恵まれてますね😄

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

オフィス狛 技術部のmmm（むー）です。

nodenvを使用してローカル環境のプロジェクトごとにnode.jsのバージョンを切り替える方法を説明します。
もちろん全てのプロジェクトで最新のバージョンを使用するべきですが、難しい時もありますよね...¯\_(ツ)_/¯

MacOS Mojava
バージョン 10.14.6

1. anyenvのインストール

anyenvをインストールします。
（anyenvとは、ローカル環境で言語ごとに複数のバージョンを使用するためのツールです。node.jsだけでなく、pythonやPHPにも使用できます🍭）

➜ 😶git clone https://github.com/riywo/anyenv ~/.anyenv

パスを通す

➜ 😶echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.bash_profile
➜ 😶echo 'eval "$(anyenv init -)"' >> ~/.bash_profile

shelの再起動

➜ 😶exec $SHELL -l

anyenvの初期化

➜ 😶anyenv install --init

2.nodenvとnode-buildのインストール

nodenvをインストールします。

➜ 😶anyenv install nodenv

node-buildをインストールします。

➜ 😶brew install node-build

default-packagesファイル作成する。

➜ 😶echo yarn >> $NODENV_ROOT/default-packages
  // 実行しないと 後続作業でnodeをインストールするときに下記エラーがでる
  // nodenv: default-packages file not found

3.node.jsのインストール

インストールできるnode.jsのバージョン一覧を確認する。

➜ 😶nodenv install --list

使用したいバージョンをインストールする。

➜ 😶nodenv install <バージョン>

4.プロジェクトで使用するnode.jsのバージョンの設定

使用したいプロジェクト配下へ移動する。

➜ 😶cd <プロジェクトパス>

そのプロジェクトで使用するバージョン指定する。

➜ 😶nodenv local <バージョン>

// プロジェクト配下ディレクトリで使用するNode.jsのバージョンが「.node-version」に記載される
➜ 😶cat .node-version
 10.12.0

設定したバージョンと同じものが表示されていれば成功。

➜ 😶node -v
10.12.0　

補足1）インストールしたNode.jsのバージョン一覧を表示

➜ 😶ls ~/.anyenv/envs/nodenv/versions

補足2）アンインストールする場合

➜ 😶nodenv uninstall <バージョン>

以上となります。
最新のバージョンを使用するべきですが、プロジェクトごとに違うバージョンのnode.jsを使用しないといけない際はぜひ参考にしてください。

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

node.jsを使った開発を行う時に、JavaScriptライブラリのパッケージマネージャーであるnpmを使いますが、このnpmにはプロジェクトの情報管理ファイルであるpackege.jsonがあります。
基本的なpackege.jsonの記載方法については割愛しますが、このpackege.json内にscriptsという記述を設定することによって、独自のコマンドを設定することができます。
これによって、例えばローカルサーバーの起動や停止等、良く使うコマンドを設定しておけば、いろいろコマンドを打たずに済むといった感じになります。

例えばAngularの開発では、package.jsonには下記のようにscriptsの記載したりします。

  "scripts": {
    "start": "ng serve",
    "test": "ng test",
    "build": "ng build",
    "copy": "cpx ./dist/* ../server/",
    "precommit": "lint-staged",
    "ng": "ng",
  },

とscripts内にいくつかのコマンドを設定しておきます。そして、

$ npm run [スクリプト名]

と打てば上記で設定したコマンドが実行されます。
よく使うコマンドは独自に作っておけば結構楽な場合があります。

また、上記scriptsには予約語があり、start、stop、restart、testが予約語として用意されています。
なので、たとえばstartのスクリプトを実行するときは、npm run startと打たなくても

$ npm start

とコマンドを打つだけで実行可能です。

もっと細かくいろいろ設定したりもできます。
たとえばscriptsに記述したコマンドを複数一気に実行したい場合、以下のようにscript内に記述しておきます。

  "scripts": {
    "start": "ng serve",
    "test": "ng test",
    "all": "run-s build copy",  // 追加
    "build": "ng build",
    "copy": "cpx ./dist/* ../server/",
    "precommit": "lint-staged",
    "ng": "ng",
  },

そして、上記スクリプト名の"all"を

$ npm run all

と実行すれば、"build"と"copy"というスクリプトが実行されます。

    "all": "run-s build copy"

の記述の run-s というコマンドが、複数実行で直列に実行するnpm-run-allのショートカットの意味で、指定したスクリプトを順番に実行してくれます。
また、応用で run-p というコマンドもあるのですが、こちらも複数実行ですが、スクリプトを並列に実行するコマンドになります。

上記以外にももっといろいろ細かく設定できるようなのですが、まずは上記のような設定で、ライトに使い始めてもいいかなと思いました。

はじめまして、オフィス狛のyuckieee（ゆっきー）です。

初投稿となる今回は、技術よりではなく開発付帯作業で使えそうなツールをご紹介しようと思います。

はじめに

みなさんが関わっているプロジェクトが、割とガッチリしたところだと「生産性の分析」のために開発ステップ数を集計されているのではないでしょうか。
例えば、母体のソースコードのステップ数、変更後の追加・修正・削除ステップ数などです。

狛ではソースコードをGitで管理しており、Git自体にもブランチ間の差分をとるdiffコマンドが存在します。ですが、このdiffコマンドがイケていない（笑）

そこで、幾つかネットで探して、最終的に「cloc」というオープンソースのツールを導入してみることにしました。
これが割と快適だったので、導入方法や出力イメージなどをご紹介します。

１．clocについて

「cloc(Count Lines of Code)」は、指定ディレクトリ又はファイルのステップ数を解析してくれる便利ツールです。Git diffコマンドとの大きな違いは、ブランチ間の差分ステップ数を「追加」「変更」「削除」で識別し、カウントしてくれる点です。
　現在、オープンソースとしてGitHubに公開されており無償で利用が可能です。

　GitHub : cloc
　※clocは、他のソースからコピーされた部分を除きGNU General Public License v2の下でライセンスされています。

２．導入方法

「cloc」は、MacBookやWindows、Linuxなど幅広いOSで利用が可能です。
今回は、私が開発で使っているのがMacBookなので、そちらへの導入方法をご紹介します。

インストール環境：MacOS Catalina バージョン 10.15.2

①HomeBrewをインストール

今回は、HomeBrewを使用してインストールするため、HomeBrew自体をインストールします。 MacOSへのインストール要件はコチラを参照ください。

最初に対象のMacにHomeBrewがインストールされているかどうか確認します。

% brew --version
zsh: command not found: brew

インストールされていない場合は、ターミナルから下記のコマンドを実行し、インストールしてください。 ※インストールコマンドはHomeBrewの公式ページより取得

% /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

実行完了後、正常にインストールされた事を確認します。

% brew --version
Homebrew 2.2.5

②clocをインストール

cloc本体のインストールを行います。
ターミナルを立ち上げ、以下のコマンドを実行してください。

% brew install cloc

実行完了後、正常にインストールされた事を確認します。

% cloc --version
1.84

導入作業はこれで完了です🎉

３．利用方法

主目的はブランチ間の差分ステップ数取得ですが、今回は２つ利用方法をご紹介します。

パターン①　現行のブランチに対するステップ数解析

①ターミナルを立ち上げ、該当のGitローカルリポジトリに対しclocコマンドを実行します

% cloc /Users/yuckieeee/Gitローカルリポジトリ

＜実行結果（例）＞

    3000 text files.
    3000 unique files.                                          
      500 files ignored.

github.com/AlDanial/cloc v 1.84  T=5.70 s (355.9 files/s, 33435.9 lines/s)
-------------------------------------------------------------------------------
Language                     files          blank        comment           code
-------------------------------------------------------------------------------
Java                           350           4000              350          25000
XML                            250           2500              300         12000
　・
　・
　・
-------------------------------------------------------------------------------
SUM:                          1500       10000            2000     60000
-------------------------------------------------------------------------------

パターン② ブランチ間のステップ数の差分解析

①比較対象のブランチ２つをGitからダウンロードしてください
　GitLabだとリポジトリのトップ画面右上にダウンロードアイコンがあります。

②ターミナルを立ち上げ、ダウンロード先のディレクトリに移動します

③下記のclocコマンドを実行してください
　zipやtarのままでもステップ数の解析が可能です。

% cloc --diff master.tar branch.tar

※圧縮ファイルの場合は、拡張子まで指定してください

＜実行結果（例）＞

     300 text files.
     300 text files.
          0 files ignored.                                         

github.com/AlDanial/cloc v 1.84  T=1.55 s (337.8 files/s, 22344.2 lines/s)
-------------------------------------------------------------------------------
Language                     files          blank        comment           code
-------------------------------------------------------------------------------
Kotlin
 same                          200           1800            400          12000
 modified                      90                  0                 0               180
 added                             3             300           122              1300
 removed                         0                 0                0                100
XML
 same                          100            800             50            10000
　　・
　　・
　　・
-------------------------------------------------------------------------------
SUM:
 same                          100           200           100          10000
 modified                       20                0                3               100
 added                           20            200           150            1800
 removed                      30               10               0               100
-------------------------------------------------------------------------------

これでブランチ間の追加・修正・削除ステップ数が確認できました。 clocは、改行、コメントやコードごとに集計されるので、非常に分かり易いです。
欲を言うなら、パータン②のダウンロード作業が無くなってくれれば最高です☺️←

４．コマンドオプション

最後に、重宝しそうなオプションをいくつか紹介して終わろうと思います。

・比較対象を指定

clocはディレクトリ、ファイル、Git hashによる比較対象の指定が可能です。
Git hashでのコマンド指定を例示します。

// ローカルリポジトリに遷移
% cd /Users/yuckieeee/ローカルリポジトリ/
// 対象コミットのハッシュを確認する
% git log
// 上記で確認したハッシュを指定する
% cloc --diff <コミットハッシュ①> <コミットハッシュ②> 

・ファイルごとに解析結果を表示

何も指定しない場合は、プログラム言語ごとに集計されます。
ファイル単位に確認したい場合は、以下のように--by-fileオプションを追加すればOKです。

% cloc --diff master.tar branch.tar --by-file

・CSVファイル出力

CSVファイル出力したい場合は、以下のようにcsvタイプ指定と出力先指定をすればOKです。

% cloc --diff master.tar branch.tar --csv > result.csv

まとめ

開発の付帯作業の必要性は分かるものの、出来るだけ時間を掛けたくなですよね。。
これからも便利そうなツールや機能があれば紹介していきたいと思います。