いがにんのぼやき

WEBエンジニアのブログ。IT、WEB、バンド、アニメ。

Vue.js Tokyo v-meetup #4に参加してきた

vuejs-meetup.connpass.com

参加してきました。
その時の雑な自分用メモを公開します。

お仕事でNuxt.jsを使うか検討した話

お仕事で Nuxt.js を使うか検討した話 / decision about whether to use nuxtjs // Speaker Deck

GMOペパポ おいちゃんによる発表
ReactであるNext.jsのVue.js版

プリレンダリング -> リクエストを受ける前にレンダリングの準備

prerender-spa-plugin

Webpackのプラグイン phantomjsを使用してコンパイル時にレンダリング
Vue.jsのガイドにも載っている

SSR VS プリレンダリング

同じ商品ページでもユーザーによって見せる内容が異なる、多数の商品データが更新される等のユースケースによりけり

Vueコンポーネントユニットテスト

Vueコンポーネントのユニットテスト // Speaker Deck

vue-test-utils
Vue.js公式のテストライブラリ
β版すらまだ未公開

avoriazの開発者のeddyerburghがメインで開発中
ベースはavoriazに近いものになる?

シンプルなAPI
豊富なドキュメント、サンプルコード

テスト方法

shaddown rendering

コンポーネントを展開せずにレンダリングする
対象のコンポーネントは全てコメントアウトされる

Integration Test

コンポーネントも含めて画面全体が正常にレンダリングされているか

Full Rendering

コンポーネント全体をレンダリングする

triger

.triggerでイベントを発火することができる

VueConf 2017 参加レポート

dev.oro.com

オロ ktsn

vetur .vueファイルのlint
animating in vue

※この度過去に参加したイベントのメモなどを公開することにしたので、投稿日時をイベント当日に変更してあります。

YAP(achimon)C::Asia Hachioji 2016mid(2日目)に参加してきた

connpass.com

参加してきました。
その時の雑な自分用メモを公開します。

コンテナ on Windows

Nomura Tsubasa(tsubasaxZZZ)
Microsoft サービス&サポート Active Directory・Azure

ハイパーバイザー型とコンテナ型

Hyper-V ホストOSとカーネルは共有しない
Dockerはカーネルを共有する

コンテナのメリット

  • 軽量
  • ハイパーバイザー型に比べ性能を向上させやすい

デメリット

  • カーネルを共有しているためノイジーネイバーを受けやすい
  • OS縛り

windowsのコンテナ

Windows Server 2016 or Windows 10でコンテナを使用可能
カーネルを共有するのでLinuxコンテナは動かない
Docker for Windowsとはまた別

Windows Server core GUIだとか不必要なものをそぎ落としたもの
nanoserver 更に最低限なもののみで構成したもの コンテナの分野ではこちらが用いられていくのではないか
全てPowerShellで操作

Windowsのコンテナ

Windows Server コンテナー

Dockerのようなもの
コンテナ間でカーネルを共有
同一組織を想定

Hyper-V コンテナー

カーネル
別管理部署での仕様を想定

Nested Hyper-V

Windows Server 2016だとHyper-Vの中でHyper-Vを動かすことができる

コマンド

dockerコマンドを使用
PowerShellは開発中
MicrosoftとDocker社で協力する流れがあるため
普通のdockerコマンドが使用できる

Process Explore プロセスを追う

Bashで話題の最近のMicrosoft、まとめて知りたくないですか?

久本 まいんだー
PerlMySQLMicrosoftに入社

日本交通株式会社
レアル マドリード
メモの内容を覚えてないけど確か上は使っている会社だった気がする
Azureを海に沈めるプロジェクトも存在

ジオ(日本) リージョン(西日本) データセンター クラスタという区切り

複数の障害ドメインから構成、可用性セットなどAWSなどとは構成が違う
Azureのデータサーバーはある程度の数のコンピューターが壊れたら破棄、修理はしない

windows azure strage

Congnitive Services API経由で色々試せるサービス

AMP

AMPはGithubオープンソース TwitterGoogleが採用

AMPの構成要素

  • AMP HTML
  • AMP JS

ニュースやブログなどの静的なHTMLに向いている

HTTP/2でウェブサイトを高速化(実践編)

DeNA Kazuho Oku

MSの発表 500ms遅くなると1.2%の売り上げが落ちた

先にCSS、JSをダウンロードできるようになる
DBに問い合わせている途中にCSS、JSを送ることができる
CDNで先にCSS、JSを先に、重いアプリを同時に処理する

Link: rel=preload ヘッダー
これが付与されているファイルを先に読み込む
対応: Apache, H2O, nginx

LRP + 100-continue
configure httpd

Service Worker

expiresをつけよう

※この度過去に参加したイベントのメモなどを公開することにしたので、投稿日時をイベント当日に変更してあります。

【一休 × bitFlyer】C#を使ったサービス開発の裏側に参加してきた

ikyu.connpass.com

C#を使ったサービス開発の裏側に参加してきました。
その時の雑な自分用メモを公開します。

新メール配信基盤とその移行の話

一休から

新メール配信基盤への移行 /ikyu-mail-platform // Speaker Deck

背景

全てのサービスをオンプレからクラウドへ移行中
トランザクションメールを対象
マーケティングは対象外

課題

メール送信処理が同期処理
メールである必要のないものをメールしていたり(SaaS)を使っていたので料金が・・・

対応

Masil SaasはSendGridに
送信ログはDynamoDB

appサーバーからSendGridへ
SendGridからWebhookでLamda、DynamoDBに

送信履歴検索

送信できてないものを見るときは前はVPNにつないでWindowsServerのRDPで確認
社内管理ツールでWEBから閲覧可能に

移行方針

送信量の少ないサービスから移行
AWS側のリソース調整
IPウォームアップ
送信量の少ないサービスは一括、他は徐々に
添付ファイルはなるべくやめる

AWS API Gateway + Lamda

部分移行
1%, 10%, 50%, 100%と徐々に新APIに移行
テストしてるけどやっぱり戻るなら少ない方がいい

宿泊だけで3万通

バッチ処理結果や特定の例外をメールで送っていた
GASでメールを振り分けてSlackにアラートしていた

Log Saas(Logentries)へ流すように
アラート条件変更が簡単だが、Slack通知機能は微妙
Azure FunctionsでWebhookを受けとってSlackに通知するようにした
AWSだとGatewayとLamdaの二つを管理しないといけないのでAzure Functionsを使用した

バッチ処理でメールにファイルを添付していたのをS3に保存し、ダウンロードURLに変更

docomo/au/yahooのバウンス率が高い
Yahooは一定期間が使わないとSuspendされるようになる

DynamoDB
読み書きの性能を予約しておくスタイル、超過すると例外が発生
負荷が途中で止まるようにバッチを調整
Office365のBlacklist入り

SendGrid、エヴァンジェリストサポートが強い

今後の課題

ブラックリスト検知
HTMLメール対応

ビットコイン取引所の裏側、開発者の苦労話あれこれ

ワーカー bitflyerから
同時接続数数千くらい
WEBページもSignalRも同一サーバー

ワーカー

取引所のエンジンとしては最大1台で直列に処理しなければいけない
ダウンタイムは最小限に、アクティブ・スタンバイ構成で

Azure Cloud Services
東日本、西日本の切り替えも考慮しなければいけない

SignalR
複数サーバーでデータを共有するためのbackplaneという機能を使用している
Service busを使っていたが台数が増えると不安定になる、Azure上のtopicが増える??
Redisに移行した

通信料が多すぎるのでSignalRでデータを垂れ流すのはそろそろ無理がある?
モバイルではバッテリーの問題も

クライアントサイド

SPAではない
RxJSでのデータフロー管理
Vue.jsを使用
LINQを使える
サーバー側ではRxJSは使っていない
今はロジックが増えてきて複雑度が上がってきているので適切な設計が必要
TypeScriptを検討していたが、まだ実施できておらず

Effective C#新版(LT)

varの使用を推奨する
明示的な型指定に起因するバグが発生する

LINQSQLに関してはWhereでIEnumerableだと全件取得することになってしまい、SQLのWhereを使えなくなってしまう場合があるので注意
数値はvarを使わない方がいい

補完文字列
$で文字を変換できる

null条件演算子

.NET Coreに最適なクラウドサービスとは(LT)

Windows Server + IIS
安定感・Visual Studio 統合

Linux(Docker)
軽量・高速・ポータビリティ

AWS

Elastic Beanstalk
Visual Studioからデプロイできる
EC2 ~~~~~~

Azure

App Service Web Apps
Azure Container Service
Windowsはbeta

GCP

App Engine Flexible Environment
Docker対応
Container Engine

Hyper.sh

めっちゃ安い

一休の新データ分析基盤におけるC#の役割(LT)

データサイエンティスト部門が分析

メール経由でのプライスダウンお知らせ

fastly
athena

Lamdaは全てC#
バグを踏んだため、一度Windowsを経由するなどを行なった

※この度過去に参加したイベントのメモなどを公開することにしたので、投稿日時をイベント当日に変更してあります。

コード改善 meetup #1に参加してきた

kaizen.connpass.com

参加してきました。
その時の雑な自分用メモを公開します。

circle ci

circleymlでgitを追加
CircleCIはREST APIで課金周り以外全てできる(APIでしかできないこともある)
PHPUnitカバレッジを取る時以外はXdebugをオフにしたほうが早い
移行には2週間くらい(composerを新規に入れた)

レビューーおじさん

トレタ レビューおじさんの出現 レビューの一極集中

以下のDescriptionをテンプレ化

  • 解決する問題
  • 背景
  • TODO

レビュアーを公平に割り振るようにした

テストで疲弊しないために

seleniumでdiffをとってテストしてみるとか?

終わって

あまりメモを取ってなかったけど、各発表後に質問、議論タイムみたいなのがあって参加者みんな質問と意見を交えるという形でざっくばらんに意見を聞いたり言えたりして面白かった。

※この度過去に参加したイベントのメモなどを公開することにしたので、投稿日時をイベント当日に変更してあります。

JapanTaxi×エニグモ×一休のモダンな環境へのリプレイスに関する勉強会に参加してきた

atnd.org

ヒカラボ主催でシステムリプレースの話を聞いてきました。
その時の雑な自分用メモを公開します。

エニグモ

まずはエニグモから。

www.enigmo.co.jp

上記記事に詳細とスライドがあります。

BUYMAの商品検索システムの改善の取り組み

Solrを使用していた
検索で出品者がSEOしていて関係ないものもキーワード検索に引っかかった

対策として形態素解析を導入 ファーで検索してもサーファーやファーストを引っかからないように クリック、タップを計測することでCTRから数字で影響を確認

React導入時の苦労話とこれからについて

Reactの導入
PHPからRailsに移行中
React、Redux,Rails(API)の構成

Reactと非Reactでの連携
ReduxMddleware+jQuery
android4.0の標準ブラウザではES5が動かない
Reactのページとは別に、ブラウザを判定して非Reactの普通のページにリダイレクト
メソッドを呼び出して例外を処理してブラウザを判定

webpackのビルド処理時間
webpackdllplugin共通のライブラリをきりだせる
happypack複数ワーカーでビルド

全国タクシー

全国タクシーのサーバーサイド言語をVB.NetからRuby on Railsに書き換えた話

VB.NetからRuby
300万DL
322社
2015年10月にCTO岩田が入社
ServiceBus
キューイングシステムが作成のみで通信がRubyに対応していなかった 2300行を超えるVB
2016年9月リリース
Lineタクシーの裏側のAPIを提供中

新タクシー配車システムの裏側 by Rails + React

とりあえずIDパターン
あらゆるテーブルにIDを入れてしまう
テーブルモデル中毒
テーブルと対になるモデルを作ってしまう
一つのモデルで全て表現するのはRailsWayというのは間違い
リクエストとレスポンスに言語内DSLによって型をつけた
適宜400と500になるように
JSON SchemaはRubyで生成

一休

Legacy development meets webpack

ビルドパイプライン導入苦労話
レストランの話
前年度30パーセント成長
npm scripts と webpackでビルド
Lintも導入
babel esnext
postcss cssnext
誰も使わなかった
aspとグローバルJS実装からモジュール性を持った実装に進まなかった
実装をロックインすることで矯正した

VBScript meets Vue.js

VBJSON周りの作成話が辛そうだった

※この度過去に参加したイベントのメモなどを公開することにしたので、投稿日時をイベント当日に変更してあります。

Railsを使ってサービスの成長を継続させるぞ!(FiNC×みんなのウェディング)に参加してきた

mwed.connpass.com

参加してきました。
その時の雑な自分用メモを公開します。

サービスの成長を支えたRailsとMicroservices

v3/meという巨大なユーザー情報を返すAPI

interegest/prmd
committee

開発スピードの原則と再加速

MobaSiFというフレームワークで開発が始まった
ガラケー向けのフレームワーク
負債がたまりやすい(自由な)ものだった
テストやコードレビュー、命名規則など取り組んだが、改善しなかった
そのためそもそもフレームワークを変えて、開発を一転させることにした

nginxでリバースプロキシで振り分け、1ページずつRails
GithubとCircleCIでテスト
テストとレビューが通ればmasterブランチに反映してテスト、ステージングへ反映
本番へのリリースはステージング環境のリビジョンを使用
採番テーブル(インクリメントではなく、最大の数字を保存したテーブルから取得して+1してIDを登録する)の問題
Shift-JISが残っている問題

OSSの付き合い方

OSS活動ならなんでも可の週一OSS活動会をやっている
基本的にはソースコードリーディング
問題点や悩んでいるところの相談
コミッターたちからPRの返答がわからなかった時は相談したり

コードレビューについて

デザイナ、エンジニア、ディレクタで40人
Rails
Haml Sass ES6

スプリントレビュー
1週間に1回、全部所を集めて実施
青果物、予定を共有する
esaに各チームできたこと、できなかったことを書く
エンジニアからデザインレビューをお願いすることもある
rubocop,hamlintなどはCIでチェックされる
コードレビューにかかる時間を改善したい

※この度過去に参加したイベントのメモなどを公開することにしたので、投稿日時をイベント当日に変更してあります。