狛ログ

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

先日pngファイルをPhotoshopで開いて編集しようと思った際に編集できず、困ったことがありました。

レイヤーロックを解除しようとレイヤーの上でダブルクリックしても解除できないのです。

よく見てみるとロックされているレイヤー名が「インデックス」になっています。

「インデックス」レイヤーは普段Photoshopでよく見る背景レイヤーと違い、レイヤーパネルの操作だけではロックが解除できずどうしたら編集できるのか分かりづらかったので、ロック解除のしかたを記載します。

まずレイヤーパレットからはインデックレイヤーを普通のレイヤーにすることはできません。レイヤーのカラーモードが関係しているので、レイヤーのカラーモードを通常のカラーモード（RGBやCMYKなど）に変更する必要があります。

Photoshopメニューバーの「イメージ」内の「モード」にマウスカーソルを合わせます。

インデックスカラーにチェックがついているので「RGBカラー」や「CMYKカラー」など使用する用途に合わせた項目をクリックします。

この操作で、今までインデックスレイヤーとして変更ができなかったレイヤーが通常レイヤーに変わり、ロックも外れて編集ができるようになります。

インデックスカラーの事を今回初めて知ったので、Adobeのカラーモードの説明を読んでみた所、

インデックスカラーモードは使用できる色を制限する事で目に見える画質を維持しながらファイルサイズを小さく保存できるというなかなか魅力的なカラーモード……。のようですがレイヤーが編集できないので何も知らないまま開くと少しびっくりしますね。

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

最近久々にAngularプロジェクトを開発する機会があり、そこでまたいろいろと勉強になったことがあったので、ご存知の方には基本的なお話しなのかとは思いますが、今回は「angularで複数のチェックボックスを使った記述方法」の一例をご紹介できればと思います。

■作りたい画面

今回作る画面のイメージとしては、下記のような登録画面で、基本情報の入力と共にチェックボックスが複数設置され、その内容をフォーム送信して登録というようなシンプルな画面構造を想定します。

画面イメージ

■コンポーネント

まずコンポーネント側の記述ですが、今回フォーム送信を行うので、Angularのリアクティブフォームから、FormControl、FormGroup、FormBuilder、FormArrayクラスをそれぞれ利用します。 各クラスの細かな説明はAngularの公式ドキュメント内のリアクティブフォームの説明を見ていただいたほうがわかりやすいかもですが、めちゃくちゃざっくり書くとこんな感じかなと思います。
さらに、今回は入力の必須チェックも行いたいので、Validatorsクラスもインポートします。

では、実際に上記をインポートし、コンポーネント側を記述します。

export class AppComponent implements OnInit {
  favoriteFruitsList: {key: string, value: string}[] = [
    {key: '1', value: 'りんご'},
    {key: '2', value: 'バナナ'},
    {key: '3', value: 'みかん'},
    {key: '4', value: 'ぶどう'},
  ];

  checkBoxFormArray: FormArray;
  groups: FormGroup[] = [];

  form: FormGroup = this.formBuilder.group(
    {
      name: ['', [Validators.required]],
      age: ['', [Validators.required]],
      tel: ['', [Validators.required]],
      formFavoriteFruitsList: this.formBuilder.array(this.groups, [Validators.required, this.checkBoxValidator]),
    }
  );

  constructor(
    private formBuilder: FormBuilder,
    public v: UserValidator,
  ) {}

  ngOnInit() {
    this.v.formGroup = this.form;
  }

  checkBoxValidator(control: FormArray) {
    for (let i = 0, loop_cnt = control.length; i < loop_cnt; i++) {
      if (control.at(i).value) {
        return null;
      }
    }
    return { unChecked: true };
  }

  onChange(value, isChecked: boolean) {
    this.checkBoxFormArray = this.form.get('formFavoriteFruitsList') as FormArray;
    if (isChecked) {
      this.checkBoxFormArray.push(new FormControl(value));
    } else {
      const index = this.checkBoxFormArray.controls.findIndex(x => x.value === value);
      this.checkBoxFormArray.removeAt(index);
    }
  }

  onSubmit() {
   // 登録処理
  }

}

form: FormGroup = this.formBuilder.group(...

の記述で、まずはフォームの初期設定をおこないます。
ここでチェックボックスとなるformFavoriteFruitsListはarray()メソッドでフォーム配列とし、さらにその中でチェックボックスをグループ化しています。これはcheckBoxValidatorでチェックボックスの必須チェックの為にこのような記述にしておきます。
ちなみにここで作成したcheckBoxValidatorは、チェックボックスのいずれかにチェックが入っているかのバリデーションで、Validatorsクラスには無いオリジナルのバリデーションになります。
onChangeについてはhtml側の記載で説明します。

■html

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <h2>名前</h2><input type="text" formControlName="name">
  <h2>年齢</h2><input type="text" formControlName="age">
  <h2>電話</h2><input type="text" formControlName="tel">
  <h2>好きな果物</h2>
  <ng-container formArrayName="formFavoriteFruitsList">
    <ng-container *ngFor="let item of favoriteFruitsList;">
      <label>
        <input type="checkbox" [value]="item.key" (change)="onChange(item.key, $event.target.checked)"><span>{{ item.value }}</span>
      </label>
    </ng-container>
  </ng-container>
  <button type="submit">登録</button>
</form>

ここでformArrayNameにコンポーネント側で設定したformFavoriteFruitsListを記載します。
これによりこのチェックボックスは配列要素のフォームとして扱います。
またここで、コンポーネント側に作成した、チェックボックスをチェックした時に発火するonChangeを使います。
チェックをON、OFFする際に、checkBoxFormArrayの配列内で、値を追加、削除する関数になります。
これにより、submitした時に、実際にチェックした値だけフォーム送信されます。


今回記載した内容はあくまで一例で、結構他の記載方法もあるようで、もしかしたらもう少し簡単に書ける部分もあるかもしれません。
また画面的には非常にシンプルなのですが、まだAngularのリアクティブフォームの使い方をうまく把握できていないと最初は難しく、結構苦戦しました（苦笑）。

自分のようなAngular初心者の方で、もしご参考になればと思います。

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

Node.jsで動いているアプリケーションのコードの修正をした後、サーバーの再起動が必要になリます。
コードを修正した後、毎回手動で再起動するのは面倒ですし、再起動し忘れることもあります。
nodemonを使用すれば、その煩わしい作業を自動化できます😶

nodemonとはNode.jsベースのアプリケーションのコードの変更を監視し、変更があった際に自動でサーバーの再起動をしてくれるツールです。
参考：https://nodemon.io/

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

1. nodemonのインストール

使用したいプロジェクト配下に移動し、下記を実行します。
devDependencies オプションは開発環境でのみ使用するため、今回つけています。

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

--save-dev オプションを使用してインストールすると、 package.json に下記のように追記されます。
devDependencies 配下のパッケージは本番環境で npm install --production コマンドを実行すると除外されます。

// package.json

"devDependencies": {
    "nodemon": "^2.0.3"
  }

2. nodemonでアプリケーションを実行する

package.jsonに nodeコマンドの代わりにnodemonで起動するscriptを追加します。
script名(start-watch)は自分可変です。

   // package.json

"scripts": {
     "start": "node src/index.js",
     "start-watch": "nodemon src/index.js", // 🌟追加
     "test": "echo \"Error: no test specified\" && exit 1"
   },

nodemonを使用して、アプリを起動します。

$ npm run start-watch

下記のように起動ログが出力されれば、起動成功です。

 [nodemon] watching path(s): *.*
 [nodemon] watching extensions: js,mjs,json
 [nodemon] starting `node src/index.js`

コードに何か変更があった場合、下記のようにログが出力されます。

 [nodemon] restarting due to changes...
 [nodemon] starting `node src/index.js`

また手動で再起動したい場合は、 rs コマンドを打ってください

$ rs
 
 [nodemon] starting `node src/index.js`

以上となります。
インストールして少し設定するだけで、開発が楽になるのでまだ使用していない方はぜひお試しください🍭

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

弊社のWEBサイトなどで使用しているイラストのグッズをSUZURIというサービスで作成し、社員が注文した現物が届きましたので紹介します。


SUZURIはpngまたはjpg画像を１枚アップロードするだけでオリジナルプリントのグッズが販売できるようになるサービスです。
Tシャツなどのポピュラーなアイテム以外にも赤ちゃんのよだれかけなどの様々なアイテムに、注文がある度に印刷して発送してくれます。
在庫の管理をしなくてよいので売れるかどうかを気せずに、気軽にオリジナルの絵柄のグッズをオンライン販売できるのが有難いですね。


試しにいろいろなグッズを作ってしまいました。
グラスなど調整が必要なグッズもありましたが基本的にWEBサイトなどに使用した画像のカラーモードを変えただけの画像をほぼそのままアップロードするだけでオリジナルプリントのアイテムのモックアップが自動的に生成されました。
（ちなみに調整が一番大変だったのはスマートフォンケースでした。自動的にいろいろな端末のケースが作られてしまうのでシンプルな絵柄のものでないと調整が難しく感じました）

また、利益分も個人的に100円単位で設定できるのが有難いと思います。（弊社のグッズは利益分は初期設定または初期設定以下に設定にしてあります。）


今回、サイトで作ったTシャツとステッカーを社員が購入したので実物の写真を撮影してみました。
（Tシャツの上に置いて撮影したステッカー自体の色が暗いので雑なコラージュのようになってしまいました…）

綺麗に印刷されていますね。写真では分かりにくいかもしれませんが、Tシャツ自体は厚手で非常にしっかりした作りです。
あまりにも作業が簡単なのでもっと安っぽい印刷かと思いましたがほとんど普通にお店で売っているプリントTシャツと同じようなプリントなのではないでしょうか…？

カラーモードをRGB（画面で表示する際のカラーモード）→CMYK（印刷する際のカラーモード）に変更したので少々くすんでいるかと思いましたが非常に色も鮮やかに見えます……！
個人的にはTシャツは大満足の出来です。

ステッカーの方はモックアップをPC画面で見た時よりも少し暗めの色になってしまっていますね。ステッカー自体の色が暗い色だからでしょうか…？
でも印刷自体は色ムラもなくかなり綺麗だと思います。


現在オフィス狛のSUZURIのページの方でオリジナルグッズをオンライン販売中ですので気になる方はぜひアクセスしてみてはいかがでしょうか。
私も緊急事態宣言がおさまり次第、トートバックを買おうかと思っています。

オフィス狛のyuckieee（ゆっきー）です。
最近Angularの環境構築をする機会があったのですが、その際以下の事象に悩まされました。

「ターミナルを起動するたびに"source ~/.bash_profile"を実行しないとパスが通らない!!!」

最初は毎回コマンド叩いてたのですが、煩わしくなって調べたら簡単な話でした...。
そこで本事象の原因や対処方法について軽くまとめておきます。

事象の原因

MacOS Cataliaからデフォルトログインシェルが「bash」から「zsh」に変更された事で、設定対象と読み込み対象のシェルが食い違っていることで本事象が発生していました。

もう少し細かく説明すると、環境構築方法を説明した多くの記事はbash（.bash_profile等）にパス設定する手順が書かれています。 ですが、MacOS Catalinaからはデフォルトのログインシェルが変更されており、ログイン時に読み込まれるのはzshの設定ファイルです。 いくらbashに設定を追加しても読み込まれることはなく、毎回強制読み込みコマンド("source ~/.bash_profile")を実行する必要があるのでした。
そりゃそうだ...。

現状の設定確認

それでは、実際にデフォルトのログインシェルの設定状況を確認してみましょう。
ターミナルを起動し、以下のコマンドを実行してください。

$ echo $SHELL
/bin/zsh

実行結果が"/bin/bash"以外であれば、パスを書き込むべきは".bash_profile"ではありません。

なぜデフォルトログインシェルが切り替わったのか？

公式での見解は見つからなかったのですが、幾つか記事を参照しているとライセンス問題と推測する声が多くありました。 そもそもmacOS Mojave以下のデフォルトログインシェルはbashですが、バージョンは最新(2020/05/08時点でver5.0)ではないようです。
セキュリティ上、最新化すべきと考えるのが自然ですが、ライセンス問題から旧バージョンのままとなっていたと思われます。
そして、この解決策として、ライセンスに課題を抱えるbash最新化ではなく、別のシェル(zsh)への乗り換えを選択したのでしょう。多分。

対応方法

対応方法としては、大きく２パターンが考えられます。

　パターン① zsh用の設定を行う
　パターン② デフォルトのログインシェルをbashに切り替える

切り替わった理由を推し量ると、推奨される対応方法はパターン①だと思います。
また、もしbashに切り替えるなら最新化もセットで行う必要がありそうです。

とはいえ、今回はパターン①、②双方の切り替え方法をご紹介しておきます。

パターン①zsh用の設定を行う

パスを通すだけであれば、基本的に設定ファイル名称を変更すれば済みます。
bash設定ファイルとの対比は以下のとおり。

bash	zsh	補足
.bash_profile	.zprofile	ログイン時 (SSH ログインも含む) に実行
.bashrc	.zshrc	新しいターミナルセッションごとに実行

指定例は以下のとおり。
今まで".bash_profile"を指定していた箇所をzsh用の".zprofile"に置き換えるのみです。

$ echo export PATH='/usr/local/bin:$PATH' >> ~/.zprofile
$ vim .zprofile

既に".bash_profile"にパスを設定している場合は、ファイルコピーで対応が可能です。

$ cp .bash_profile .zprofile

パターン②デフォルトのログインシェルをbashに切り替える

推奨ではないと思われますが、以下の手順でbashへの切り替えも可能です。
まず、切り替え対象のシェルが利用可能か確認するため、以下のコマンドを実行します。
bashに切り替える場合、本リスト内に"/bin/bash"があればOKです。

$ cat /etc/shells
# List of acceptable shells for chpass(1).
# Ftpd will not allow users to connect who are not using
# one of these shells.
/bin/bash
/bin/csh
/bin/dash
/bin/ksh
/bin/sh
/bin/tcsh
/bin/zsh

前項の確認結果を基にシェルの切り替えコマンドを実行します。
実行時にパスワードを求められるので入力してください。

$ chsh -s /bin/bash
Changing shell for ユーザー名.
Password for ユーザー名: 🗝

再度デフォルトログインシェルを確認し、切り替わっていればOKです。

$ echo $SHELL
/bin/bash

パスを直ぐに通したい場合は、以下のコマンドでパスを読み込ませます。

$ source ~/.bash_profile

Appleのサポートページでは、この他にもシステム環境設定画面からシェルを切り替える方法なども紹介されています。
Apple公式サポート：zshをMacのデフォルトシェルとして使う

【　おまけ　】

bash切り替え後にターミナルを立ち上げると以下のようなメッセージが表示されます。
「デフォルトシェルはzshに変わったから切り替えて！」と言うようなメッセージです。

　The default interactive shell is now zsh.
　To update your account to use zsh, please run `chsh -s /bin/zsh`.
　For more details, please visit https://support.apple.com/kb/HT208050.

本メッセージは、以下のコマンドを実行することで非表示にできます。

　$ export BASH_SILENCE_DEPRECATION_WARNING=1

事象が解決しない場合に確認すべきこと

ログインシェルの設定はソフトウェア単位にも設定可能な場合がありますので、そちらが有効となっていないか確認してみてください。

例としてターミナルでの設定確認方法をご紹介します。
ターミナルを起動し、[ターミナル] > [環境設定]を開き、環境設定画面[一般]タブの[開くシェル]設定が[コマンド(完全パス)]になっている場合、こちらの設定が優先となっています。

まとめ

セキュリティ上の懸念やAppleの対応(zshに切り替え)を考えると、個人的には利用者側もzshに切り替えるのが最善だと思います。
私もbashに切り替えるのではなく、zshの使用に切り替えるよう対応しました。
また、改めて環境構築周りの知識を強化しなければと反省。

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

最近担当したプロジェクトで、開発用に用意した複数のAmazon WorkSpaces（Windows）から、外部の開発用VPNへ接続する必要があったのですが、 VPNに接続可能なIPアドレスが１つという制限がありましたので、EC2でプロキシサーバーを構築することにしました。

AWSであれば、NAT（インスタンス、ゲートウェイ）でも実現可能ですが、 今回の開発環境では、一部ネットワークの接続制限がありましたので、プロキシサーバーを選択しました。

最低限の設定にはなりますが、手順をご紹介します。
※VPC、サブネット等は、事前に作成されている前提です

1．EC2インスタンス作成（Linux）

プロキシサーバー用のEC2インスタンス（Linux）を作成します。
細かい手順は省略させていただきますが、注意点としては以下のようになります。
・インスタンスタイプは最小を選択
・「インスタンスの詳細の設定」で、「自動割り当てパブリックIP」は「無効化」に設定
　※後で「Elastic IPアドレス」を関連付けます

2．Elastic IPアドレスの割り当てとEC2への関連付け

EC2サービスの「Elastic IP」から、プロキシサーバー用の固定IPアドレスを割り当てます。
・スコープ：VPC
・パブリックIPv4 アドレスプール：Amazon の IPv4 アドレスプール

続けて、割り当てたIPアドレスを選択して、Actionの「Elastic IP アドレスの関連付け」から、1．で作成したEC2に関連付けます。

3．Squidの設定

プロキシサーバー用のEC2インスタンス（Linux）に、プロキシサーバーソフトの「Squid」を、以下の手順で設定します。

①Squidインストール

sudo yum install -y squid

②Squid有効化

sudo systemctl enable squid

③有効化の確認（squid.serviceがenabledであること）

sudo systemctl list-unit-files -t service | grep squid

④Squid設定ファイル修正
設定ファイルに、プロキシサーバーに接続するIPアドレスを設定します。

※注意
必ず、「http_access deny all」の記述より「上」に設定してください。
（上記は「そのほかのアクセスはすべて拒否する」という意味になりますので、下に設定してしまうと有効になりません）

sudo vim /etc/squid/squid.conf

【追記内容】

# 接続したいIPアドレスを指定（複数指定可能）
acl myip src [IPアドレス１]/32
acl myip src [IPアドレス２]/32

# 接続したいIPを許可
http_access allow myip

⑤Squidリロード
設定ファイルを反映する場合、再読み込みを行います。

sudo systemctl reload squid

⑥squidアクセスログ確認
ログでアクセス状況を確認することもできます。

sudo cat /var/log/squid/access.log

4．WorkSpaces（Windows）側の設定

最後に接続側の設定です。
インターネットオプションから、「接続」タブの「LANの設定」ボタン押下します。

続けて「プロキシサーバーを使用する」をチェックして、
・アドレス：2．で割り当てたElastic IPアドレス
・ポート：Squid設定ファイルにの「http_port」に定義されているポート番号（デフォルトは3128）

※プロキシサーバーを使用したくない接続先がある場合は、「詳細設定」ボタンから、例外を指定してください。


以上が、必要最低限の設定になります。

接続側のグローバルIPを確認（確認くん など）すると 「2．Elastic IPアドレス」のIPアドレスが、表示されると思います。

オフィス狛 技術部の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サーバーが至急必要な場合はぜひ試してみてください。