狛ログ

こんにちは。
最近は、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

まとめ

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

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

去年、Spring Fest 2019（12/18 御茶ノ水ソラシティ）が開催されました。
弊社プロジェクトの一部でSpring Bootを使用しているため、情報収集を目的に今回初めて参加してみました。
年々参加者数が増えているとのことで、とてもたくさんの方が来場されていました。

と言うことで、年は明けてしまいましたが、感想をブログに残したいと思います。

【公式ページ】
https://springfest2019.springframework.jp/

基調講演

Spring Boot 2.2の概要、2.3の紹介がありました。
そのなかでも気になったのが、今後、Spring Bootはリリース周期が１年から６ヶ月と短くなるそうで、バージョンアップのタイミングにも注意が必要になりそうです。また、2.1系は2020/11にEOLとなるそうです。

Spring Boot爆速開発超絶技巧

サムライズムさん
https://speakerdeck.com/yusuke/spring-boot-and-intellij-idea-technique
これまで開発では、STSしか使用したことが無かったのですが、「IntelliJ IDEA」とはどのようなものか、タイトルにも興味があり参加してみました。
極力キーのみで操作するということで、様々なショートカットを使用したデモでは、早い、便利と大変驚きました。
機会があれば無料版を弄ってみようと思います。

徹底解剖Spring MVCアーキテクチャー -DispatcherServletの中身を覗いてきました

カサレアルさん
https://www.slideshare.net/ssuser070fa9/spring-fest-2019spring-mvc
Spring MVCのアーキテクチャーをソースコードリーディングで解説されていました。
スライドの内容が主にソースコードでしたので、なかなか説明に追いつけずに苦労しましたが、内部構造まで説明があり、他のセッションと比べて内容が深かったです。
（周りの参加者の皆さんは、ノートPCやタブレットでスライドを参照されて便利そうでした。。。次回は用意しようと思います）

システム間連携を担うSpring Integrationのエンタープライズ開発での活用

NTT DATAさん
https://www.slideshare.net/apkiban/spring-integration-207667949
異なる仕様やオンプレ×クラウドなどのシステム間連携が増える中で、システム間連携の技術として、Enterprise Integration Patternsで推奨されている「非同期メッセージング」を実現するために「Spring Integration」を紹介されていました。
「Message」、「Channel」、「Endpoint」のキーワードとフローを用いた概要と、実際の作成ステップなど説明があり、勉強になりました。

Spring Developer のための コンテナ入門

Google Cloudさん

Kubernetes、Jibと勉強不足で初めて聞く単語でしたが、Jibを使用することでJavaのアプリケーションのDockerコンテナを簡単に作成できることに驚きました。Kubernetesについては、コンテナ管理（監視や制御）を知ることができました。

JSP/JSF から Spring Web + Thymeleaf への移行

伊賀 敏樹さん
https://www.slideshare.net/ssuser2e0217/practical-migration-from-jsp-to-thymeleaf
Thymeleafの紹介と利点についてのセッションでした。Thymeleafは使用しているので復習になりました。

Springアプリケーションのテスト道具 使いどころ、使わないどころ

いろふさん
https://speakerdeck.com/irof/decide-to-use-test-tool-for-spring-application
Springのテスト道具として、JUnit 5、Mockito、Spring Test、Selenium、Dockerの紹介から始まり、
「原則として、テストしたいことの近くでテストを行う」、「道具の向き不向きを考えてテスト道具の使いどころを見極める」ということに重点を置いて説明されていました。
Springというより、テストについて改めて勉強になったセッションでした。


１日のセッションを通じて、自身はまだまだスキル不足だと実感しましたが、新しい情報を得ることができ、非常に勉強になりました。
次回も是非参加したいと思います。

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

今回はIllustratorでデザインを作ったオブジェクトのグラデーションなどの設定をCSSで再現したい時に使える機能をご紹介します。
この機能のを使えばグラデーションが細かいボタンをの色をCSSで数分で再現できるのでコーディングがかなり楽になります。最高の機能なのでもうAdobeに足を向けて寝れません！


Illustratorのグラデーション機能を使い作成したボタンを用意しました。
色が多くて設定も少し複雑なのでCSSで再現するのが大変そうです。


今回は「CSSプロパティ」という機能を利用してグラデーションの色味などの設定を書き出していきます。

最初にCSSプロパティパネルをワークスペースに表示させます。
Illustratorメニューバーの「ウィンドウ」の「CSSプロパティ」をクリックします。
CSSプロパティパネルがワークスペースに表示されます。

グラデーションの設定をコピーしたいオブジェクトのオブジェクト名を設定します。
オブジェクト名がclass名になるので、class名で使用できる文字以外（全角英数字や日本語など）を入れると何も設定を変更していない場合エラーでCSSを生成してくれません…（書き出しオプションで「名称未設定オブジェクト用に CSS を生成」にチェックを入れると書き出してくれるようになるようです）

グラデーションの設定をコピーしたいオブジェクトを選択するとCSSプロパティパネルにCSSが表示されます。
選択スタイルをコピーボタンをクリックすると生成されたCSSが全てコピーされます。
これをcssファイルにペーストすると色、角丸の角度などが設定できました。

ボタンの高さや幅、ボタンの中のフォントサイズなどの調整は必要ですがIllustratorで作ったボタンをほぼそのまま再現できます。
CSSのグラデーションに苦手意識があったのでいつも時間がかかっていたのですが、この機能を知ってから数分でグラデーションを再現できるようになったので助かっています。

新年あけましておめでとうございます！オフィス狛 デザイン部のSatoです。
今年もどうぞよろしくお願いいたします。

もう一月も終わってしまいそうですが、デザイン部の年明け初めての記事ですので今年の年賀状のおはなしをしようと思います。
（今まで全然紹介してこなかったのですが、2018年の年賀状から毎年私がイラストを描いています）



弊社サイトやSNSなどのアイコンなどで登場している狛犬ちゃん（社内ではたまに「こまちゃん」と呼ばれています）が今年の干支であるネズミの着ぐるみを着ている……という可愛い（自画自賛）テイストなイラストがメインな年賀状です。


最初は時事ネタを毎年取り入れているので元号発表のシーンのパロディっぽくしてみたり迷走していたのですが、
「Satoさん、ジョ●ョって知ってますか？
ジョ●ョ６部の主人公がスタ●ド攻撃のせいで小さくなってネズミの毛皮を着ぐるみのように被るシーンがあるんですよ……。
あれみたいにこまちゃんがネズミの着ぐるみを着ていたらすごく可愛いと思うんです」
というアドバイスを受けて、ファンシーグッズを出しているメーカーの年賀状を色々参考にしつつシンプルにネズミ着ぐるみ可愛いですよという直球なイラストを描きました。
（ここだけの話ですが、ジョ●ョは３部までしか読んでいないので６部の主人公がネズミの毛皮を被るシーンはいまだに見ていません）

年賀状用に描いたイラストに辿り着くまでこんな感じのラフを描いたりしていました↓


メインのイラスト以外にも、ネズミのイラストに合わせてブラシツールで描いた四角を散らしてみたり手書きっぽい雰囲気のフォントを使ってみたりしてみました。
Happy New Year!の部分のフォントはフリーフォントのしろくまフォントを使用しています。
手書き風なのに幼くなりすぎないオシャレなフォントなので大好きです。


今年は来年の年賀状はどうしようかな？と考えたり普段描かないのでイラストを練習したり一年を過ごそうと思います！ｶﾞﾝﾊﾞﾙｿﾞ💪(´・_・｀💪）