Norelを支えたい技術たち
Qiitaで書いてしまったので背景が寂しいのはお許しを
今後norelに提案していく技術について、ご紹介をさせていただきます。
自己紹介
高橋和秀（たかはし かずひで）
1981年8月31日（36歳？）北海道札幌市
高校の先輩に「大泉洋＆杉村太蔵」
既婚、子供2名
ゲーム：たまに子供とminecraft
エンジニア歴：2000年～ 18年目
株式会社オービット代表取締役会長
サービス開発＆SES 従業員7名
norelを支えたい技術
Terraform
- AWS CloudFrontのJSONより楽＆コメント可
- インフラコード実現(githubにおける！)
- 事前にテストが可能（環境や工数が必要）
- AWSは現状からリバース可(terraforming)
- 部分的な運用も可
- イミュータブルインフラを目指せる
sample
https://github.com/o-kazuhide-takahashi/terraform-sample
resource "aws_instance" "web1" {
depends_on = ["aws_iam_instance_profile.ec2base_profile"]
ami = "${var.ami}"
instance_type = "t2.micro"
subnet_id = "${aws_subnet.subnet-aza.id}"
associate_public_ip_address = true
vpc_security_group_ids = ["${aws_security_group.websg.id}"]
key_name = "ec2testkey" # Currently this resource only supports importing an existing key pair.
iam_instance_profile = "ec2base_profile"
user_data = "${file("ec2_web_shells/web_ebs_mount.sh")}"
root_block_device = {
volume_type = "gp2"
volume_size = "16"
delete_on_termination = "true" // EBSの消し忘れ防止のためtrue(料金がかかる)
}
～略～
}
provisioner "file" {
source = "ec2_web_shells/awslogs/awslogs.conf"
destination = "/home/centos/awslogs.conf"
connection { type = "ssh" user = "centos" private_key = "${file("keys/ec2testkey.pem")}" }
}
～略～
provisioner "remote-exec" {
inline = [
"chmod +x /home/centos/base_provisioning.sh",
"source /home/centos/base_provisioning.sh"
]
connection { type = "ssh" user = "centos" private_key = "${file("keys/ec2testkey.pem")}" }
}
- 課題
- ec2で使う時にプロビジョニングを何でやるか？(宗教戦争)
- bash(私)、ansible、chef、puppet...
- 柔軟に合わせられる
どこを支えるか？
- CloudWatch Alarm 設定のインフラコード化
- 開発環境のインフラコード化
- CI環境のインフライミュータブル化
- フロントのインフライミュータブル化
- chat ops やってみたい
Angular
- フロントフレームワークの傾向 (Vueが強い…)
世界
日本
- Angular1 -> AngularJS
- Angular2 不安定＆使い方のノウハウが少なかった＆書籍もなし 2016年～2017年初頭
- Angular3（欠番なのでなし）
- Angular4 安定したが遅い 2017年初頭～
- Angular5 Angular4の遅さを改善した（と言われている）
Angular 5
- Googleがメンテナンスしている
- すべてそろっている（エコシステムが充実）
- Typescriptを前提にしている(Microsoftがメンテナンス、型が使える)
- UIに必要なライブラリが多い(VueとReactも)
- ReactiveFormが使える(コードに集約できるので相関検証も容易)
- AOT Build
ng build --aot - SSRやPWAにも対応
- たぶん3層webやmvcの開発者はとっつきやすい
おすすめソースツリー
公式とは異なります
https://angular.io/guide/styleguide#application-structure-and-ngmodules
├─app
│ ├─common // UtilやHelperを集める
│ ├─component // コンポーネントを集める
│ │ ├─section// layoutレベルの切り出し
│ │ ├─modal // モーダルを集める
│ │ ├─page // ページごとのcomponent
│ │ └─parts // ページ内のパーツを集める
│ ├─model // モデルを集める
│ │ ├─form // formの型
│ │ └─api // apiの型
│ └─service // serviceクラス
├─assets // css js img
└─environments // 環境ごとの設定(apiエンドポイントなど)
angular-cliのnewでつくったものをIntelliJから整えます
どこを支えるか？
- （開発者用）管理ツールで使おうとしている
- とある複雑な費用の計算確認ツール（フロントと同一ロジックを使う）
- 今後も、問い合わせや、フロント実装と同一ロジックが必要な作業のツールとして残したい
マテリアルデザイン
- マテリアルデザイン
- マテリアルデザイン
- 日本語：https://material.io/jp/guidelines/
- googleのサービスがどんどんmaterial化しているので、今後慣れてくるのでは？
- googleが言うには「視覚言語」だそうです
- デザインのフレームワークととらえます！
- デザイナへの負担を軽減でき開発スピードもUP
Google Inbox
Google Material Icons
Google Fonts (Roboto)
Materialize
- マテリアルデザイン仕様実装のデザインフレームワーク(css/scss)
- 数あるMaterialのフレームワークの中でUI一番実装が多い（いくつか使ってみての筆者感想）
- angular2-materializeが最新対応＆安定している(いくつか使ってみての筆者感想)
timepicker
stepper
サンプル
どこを支えるか？
- 管理ツール
- フロント 申し込み、マイページ、法人特化機能など
Angular & Materialize
おまけ
AngularへのMaterialize導入方法
angular2-materializeを使う
angular cliでプロジェクトを作成後に実施
cd angular-project-name
npm install materialize-css --save
npm install angular2-materialize --save
npm install jquery@^2.2.4 --save
npm install hammerjs --save
angular-cli.json
"styles": [
"../node_modules/materialize-css/dist/css/materialize.css",
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/hammerjs/hammer.js",
"../node_modules/materialize-css/dist/js/materialize.js"
],
src/index.html
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
