2020年5月28日木曜日
SUZURIでオリジナルグッズを作りました。
5月 28, 2020
こんにちは、オフィス狛 デザイン部のSatoです。
弊社のWEBサイトなどで使用しているイラストのグッズをSUZURIというサービスで作成し、社員が注文した現物が届きましたので紹介します。
SUZURIはpngまたはjpg画像を１枚アップロードするだけでオリジナルプリントのグッズが販売できるようになるサービスです。
Tシャツなどのポピュラーなアイテム以外にも赤ちゃんのよだれかけなどの様々なアイテムに、注文がある度に印刷して発送してくれます。
在庫の管理をしなくてよいので売れるかどうかを気せずに、気軽にオリジナルの絵柄のグッズをオンライン販売できるのが有難いですね。
グラスなど調整が必要なグッズもありましたが基本的にWEBサイトなどに使用した画像のカラーモードを変えただけの画像をほぼそのままアップロードするだけでオリジナルプリントのアイテムのモックアップが自動的に生成されました。
（ちなみに調整が一番大変だったのはスマートフォンケースでした。自動的にいろいろな端末のケースが作られてしまうのでシンプルな絵柄のものでないと調整が難しく感じました）
また、利益分も個人的に100円単位で設定できるのが有難いと思います。（弊社のグッズは利益分は初期設定または初期設定以下に設定にしてあります。）
今回、サイトで作ったTシャツとステッカーを社員が購入したので実物の写真を撮影してみました。
（Tシャツの上に置いて撮影したステッカー自体の色が暗いので雑なコラージュのようになってしまいました…）
あまりにも作業が簡単なのでもっと安っぽい印刷かと思いましたがほとんど普通にお店で売っているプリントTシャツと同じようなプリントなのではないでしょうか…？
カラーモードをRGB（画面で表示する際のカラーモード）→CMYK（印刷する際のカラーモード）に変更したので少々くすんでいるかと思いましたが非常に色も鮮やかに見えます……！
個人的にはTシャツは大満足の出来です。
ステッカーの方はモックアップをPC画面で見た時よりも少し暗めの色になってしまっていますね。ステッカー自体の色が暗い色だからでしょうか…？
でも印刷自体は色ムラもなくかなり綺麗だと思います。
現在オフィス狛のSUZURIのページの方でオリジナルグッズをオンライン販売中ですので気になる方はぜひアクセスしてみてはいかがでしょうか。
私も緊急事態宣言がおさまり次第、トートバックを買おうかと思っています。
2020年5月19日火曜日
MacOS Catalinaはデフォルトのログインシェルがbashではないらしい。
5月 19, 2020
オフィス狛のyuckieee（ゆっきー）です。
最近Angularの環境構築をする機会があったのですが、その際以下の事象に悩まされました。
「ターミナルを起動するたびに"source ~/.bash_profile"を実行しないとパスが通らない!!!」
最初は毎回コマンド叩いてたのですが、煩わしくなって調べたら簡単な話でした...。
そこで本事象の原因や対処方法について軽くまとめておきます。
事象の原因
MacOS Cataliaからデフォルトログインシェルが「bash」から「zsh」に変更された事で、設定対象と読み込み対象のシェルが食い違っていることで本事象が発生していました。もう少し細かく説明すると、環境構築方法を説明した多くの記事はbash（.bash_profile等）にパス設定する手順が書かれています。 ですが、MacOS Catalinaからはデフォルトのログインシェルが変更されており、ログイン時に読み込まれるのはzshの設定ファイルです。 いくらbashに設定を追加しても読み込まれることはなく、毎回強制読み込みコマンド("source ~/.bash_profile")を実行する必要があるのでした。
そりゃそうだ...。
現状の設定確認
それでは、実際にデフォルトのログインシェルの設定状況を確認してみましょう。ターミナルを起動し、以下のコマンドを実行してください。
$ echo $SHELL
/bin/zsh
なぜデフォルトログインシェルが切り替わったのか？
公式での見解は見つからなかったのですが、幾つか記事を参照しているとライセンス問題と推測する声が多くありました。 そもそも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
$ 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 ユーザー名: 🗝
$ echo $SHELL
/bin/bash
$ source ~/.bash_profile
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の使用に切り替えるよう対応しました。
また、改めて環境構築周りの知識を強化しなければと反省。
2020年5月8日金曜日
AWS EC2でプロキシサーバー（Linux）を構築する。
5月 08, 2020
オフィス狛 技術部の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アドレスが、表示されると思います。
2020年4月14日火曜日
JSON ServerとFaker.jsを使って、大量のダミーデータがあるREST APIサーバーの作り方
4月 14, 2020
オフィス狛 技術部の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 --saveFaker.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.jsondatabase.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サーバーが至急必要な場合はぜひ試してみてください。
2020年3月31日火曜日
iOSでViewの一部分を角丸にしたい時の拡張クラスの作り方。
3月 31, 2020
こんにちは、オフィス狛 モバイル開発担当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で部分的に角丸を設定できるようになります。 細かい角丸の設定が必要な際は使ってみてください！
2020年2月28日金曜日
knex.jsで発生した問題と対処方法（Invalid columnエラー、returningで取得できない）
2月 28, 2020
オフィス狛 技術部の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');
今回ご紹介した事象のように、一見すると正しい記述のようですが、
思わぬところで期待通りに動作しないことがありますので、ご注意ください。
Angularのバージョンアップ（7から8）後に「An unhandled exception occurred: Job name "..getProjectMetadata" does not exist.」が発生した場合の対処。
2月 28, 2020
こんにちは。
最近は、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ライフを❗️
登録:
投稿 (Atom)