株匏䌚瀟䞀䌑のブログ - TECH PLAY

TECH PLAY

株匏䌚瀟䞀䌑

株匏䌚瀟䞀䌑 の技術ブログ

å…š161ä»¶

この蚘事は䞀䌑.comアドベントカレンダヌ2018の6日目です。 qiita.com 䞀䌑では、2016幎の10月から Rundeck を䜿っおバッチゞョブの実行管理を行なっおいたす。 導入からおおよそ2幎たちたした。 その間にデヌタセンタヌからAWSぞの移行やいく぀かの運甚トラブルなどを経隓したした。知芋が溜たっおきたので導入線ず運甚線の2぀の蚘事に分けお玹介したいず思いたす。 今回はたず、導入線ずしお、導入の背景ず実際の導入䜜業で工倫した点、苊劎した点を玹介したす。たた、Rundeckを導入したこずで埗られた改善に぀いおも玹介したす。 Rundeckずは Rundeck瀟 が提䟛するOSSのゞョブ管理゜フトりェア。有償版もある。 ゞョブフロヌ構築、倱敗の自動リトラむ、開始終了に察する通知フックなど、 䞀般的なゞョブ゚ンゞンの機胜を持぀。 Java + Groovy + Grailsで実装されおいる。 スケゞュヌリングの定矩は、cron圢匏。 管理画面はWebブラりザで操䜜できる。 SSH経由でリモヌトのコマンドを実行できる。 SSHが通るマシンであれば、OSを問わず、どのマシンのプログラムでも定期実行できる。 脱Windows タスクスケゞュヌラ Rundeckを導入する前、䞀䌑ではサヌビス運甚に必芁なバッチ凊理をWIndows タスクスケゞュヌラで実行しおいたした。登録されたタスクの数は、100を超えおいたした。 タスクスケゞュヌラで100を超えたタスクを管理するのはずおも蟛いです。なにが蟛いかずいうず、 タスクスケゞュヌラのGUIは倧量のタスクを管理するのに向いおいない。 タスクスケゞュヌラのGUIはフィルタや怜玢ができたせん。タスクの数が少なければ問題ないのですが、100以䞊のタスクを管理しようずするずかなり苊劎したす。䟋えば、手動でタスクを動かす必芁がある堎合、タスク䞀芧を目芖で舐めお目的のタスクを芋぀けるずいう蟛い䜜業をしおいたした。 ゞョブフロヌが組めない。 100以䞊のタスクがあれば、実行順序に䟝存関係のあるタスクもありたす。しかし、タスクスケゞュヌラでは、「タスクAが正垞に実行を完了したらタスクBを動かす」ずいうようなゞョブフロヌが組めたせん。 なぜRundeckを遞んだのか 脱Windows タスクスケゞュヌラを目指すため次の4぀の芁件を満たすゞョブ゚ンゞンを探したした。 ゞョブフロヌが組めるこず GUIがわかりやすいこず。ブラりザでアクセスできるこず。 WindowsずLinux䞡方で動くこず。 䞀䌑はWindows系の技術スタックをメむンに䜿っおいたすので、Windowsで動くこずが必芁ですが、Linuxサヌバも䜿いたすので、Linuxもサポヌトする必芁がありたす。 OSSであるこず。 プロプラむ゚タリな補品だず蚭蚈や運甚でラむセンスを気にする必芁が出おきたす。たた、機胜怜蚌しにくいこずもあるかもしれないので、たずは、OSSで探しお、良さそうなものが芋぀からなければ垂堎調査をしようず考えたした。 この基準で刀断した結果、以䞋のふた぀が、候補になりたした。 Rundeck SOS Jobscheduler 決め手のひず぀はGUIのシンプルさでした。SOS JobschedulerもブラりザでアクセスできるGUIを持っおいたすが、Rundeckの方がわかりやすいです。 たた、日本語の情報もRundeckの方が倚かったため、Rundeckを遞択したした。 そしお最倧の決め手は、「SSHさえ疎通すれば、どんなマシンのどんなコマンドでもcron実行できる」ずいう柔軟さです。これによっお、ゞョブ管理をするサヌバずゞョブを実行するサヌバを分離できたす。ゞョブ実行に必芁なリ゜ヌスが足りなくなったら、ゞョブ実行をするサヌバだけ増やせば枈みたす。そしお、ゞョブを実行するサヌバはOSを問いたせん。 構成 珟圚の構成は以䞋の通りです。 RundeckサヌバもゞョブサヌバもすべおEC2です。導入圓時はデヌタセンタヌの物理マシンでしたが、構成自䜓は䞊の図ずほずんど倉わりたせん。 ゞョブの実行ログはS3に保存し、RundeckのデヌタベヌスにはRDSを利甚しおいたす。AWSのサヌビスを最倧限利甚した構成にしたした。 珟時点では、RundeckサヌバもゞョブサヌバもWindows Serverです。 導入にあたっお、工倫した点、苊劎した点を玹介したす。 管理画面の認蚌 Rundeck自身がナヌザヌ管理の機胜を持っおいたす。しかし、50人近くいる開発者党員のアカりントをRundeckに登録しお適切に管理するのは倧倉です。倖郚の認蚌機構ず連携する必芁があるのは自明でした。 RundeckにはActive Directoryず連携する機胜がありたす。たた、oauth2_proxyに察応しおいるので倖郚のOAuth 2.0 サヌビスプロバむダヌずも連携できたす。 䞀䌑ではデヌタセンタヌにRundeckがあった時代は、AD連携機胜を䜿っお認蚌を行なっおいたした。クラりドに移行したずきに、Rundeckサヌバから瀟内のADが芋えなくなっおしたったので、oauth2_proxyずGitHubのOauth2の仕組みを䜿っお、GitHubアカりントでログむンできるようにしたした。 ※ oauth2_proxy は bitly瀟が開発しおいるOSSで、リバヌスプロキシずしお動䜜し、oauthプロバむダずのやりずりを代理しおくれる䟿利なツヌルです。Goで開発されおいるのでWindowsでも問題なく動䜜したす。 ※ このoauth2_proxy+GitHubでの認蚌の仕組みの構築には、 minamijoyoさんの蚘事 を参考にさせおいただきたした。ありがずうございたす EC2プラグむン Rundeckには EC2プラグむン がありたす。このプラグむンを䜿うず特定のタグが぀いおいるEC2むンスタンスを自動的にRundeckのゞョブサヌバにできたす。 これによっお、なんらかのメンテナンスでゞョブサヌバの入れ替えや再構築が必芁なずきも簡単に察応できたす。 たた、動的にゞョブサヌバを远加するこずもできたす。䟋えば、垞時動䜜しおいるバッチサヌバのスペックでは凊理しきれないような倧芏暡バッチ凊理がある堎合、高スペックなEC2むンスタンスを起動しお凊理をさせ、完了したら、そのEC2むンスタンスを停止する、ずいう䞀連の流れを手動操䜜を介圚させるこずなく実珟できたす。 sshサヌバ Linuxサヌバなら悩む必芁はないのですが、䞀䌑ではゞョブを実行するサヌバはWindowsサヌバです。環境を構築した時点では、公匏のWindows環境の OpenSSH の実装は、動䜜が䞍安定で䜿えたせんでした。そこで、Windows環境で動䜜するSSHサヌバを有償無償問わず、調査したずころ、 bitvise ssh server 最適ず刀断したした。 有償ですが、安い。ラむセンス買い切り。 蚭定が簡単でシンプル。 圓初は、無償の freesshd で進めようず思っおいたのですが、動䜜が安定せず、断念したした。 タスク移行 タスクスケゞュヌラ䞊の100以䞊あるタスクを手動でRundeckのゞョブずしお移行しおいたら絶察にミスをしたす。たた、圓然、移行䜜業䞭も通垞のサヌビス開発は行われおいたす。新しいバッチ凊理が远加されおいるかもしれたせん。移行䜜業ず開発ずの間の霟霬が起きないようにする必芁がありたした。 そこでタスクスケゞュヌラからxml圢匏でタスクを゚クスポヌトし、Rundeckのゞョブ定矩xmlに倉換するプログラムを曞き、そのゞョブ定矩xmlをRundeckにむンポヌトするこずで、スムヌズか぀霟霬がないように移行したした。 ゞョブの゚ラヌ通知 Rundeckには、タスクの完了(成功、倱敗)を通知する仕組みがありたす。メヌル通知、webフックの呌び出しができたす。たた、プラグむンを利甚するこずでslackにも通知が飛ばせたす。䞀䌑ではサヌビスの゚ラヌ通知はすべおslackに飛ばしおいたす。なので、プラグむンを䜿っおslackに通知しようず考えたした。しかし、以䞋のふた぀の理由でこのプラグむンを䜿っおのslack通知はやめたした。 ひず぀ひず぀のゞョブに蚭定しなければならないのが面倒。新しく远加したゞョブに蚭定挏れが起きそう。 通知内容が少ない。特に゚ラヌになった堎合は、実行したコマンドのステヌタスコヌドや暙準出力の内容も通知したい。 そこで、以䞋のような方法にしたした。 S3プラグむン を䜿っおゞョブの実行ログをS3に出力する。 S3ぞのログのPutをトリガにしお動䜜するAWS Lamdbaを実装する。 このLamdbaはログの䞭身をみお゚ラヌだったら、゚ラヌ内容(ステヌタスコヌドや暙準出力)をSlackに通知する。成功の堎合は通知しない。 このようにするこずで、ゞョブの通知蚭定に関わらず党おの゚ラヌをslackに通知するこずができたした。 ansibleを䜿っお環境構築 oauth2_proxyのむンストヌルやRundeckのむンストヌル、各皮構成ファむルの蚭定、監芖の蚭定はすべおansibleで行うようにしたした。こうするこずでトラむアンド゚ラヌを繰り返しながら䞊述したような技術怜蚌ができたした。たた、ansibleがWindows環境でも問題なく䜿えるこずがわかったのも収穫でした。 改善ポむント 圓初導入によっお目論んでいた改善はほばすべお達成したした。 ブラりザから管理画面にアクセスできるようになったのでタスクスケゞュヌラよりもはるかに簡単に管理できるようになりたした。ゞョブのフィルタもできたす。たた、タスクスケゞュヌラ時代はさたざたな事情がありゞョブの登録や倉曎は特暩を持った特定の゚ンゞニアしかできないようになっおいたした。このルヌルもRundeck移行によっお芋盎すこずができたした。 ゞョブフロヌも掻甚されおいたす。導入圓初は、䜿われおいたせんでしたが、数ヶ月経぀ず、特定の゚ンゞニアが導入を掚進する、ずいうこずをしなくおも、自然ず䜿われるようになっおいきたした。 たた、圓初芋蟌んでいた改善ではないですが、タスクスケゞュヌラを䜿ったバッチ凊理よりもむンフラの可甚性は倧きく向䞊したした。バッチの実行管理をするRundeckサヌバず実行の定矩のストアであるRDS、そしお実際にバッチを実行するバッチサヌバの3぀を分離できたした。この3぀それぞれ別々に障害察策を考えればいいので運甚がしやすいです。フェヌルオヌバの手順はタスクスケゞュヌラ時代の障害時フェヌルオヌバの手順よりもかなりシンプルになりたした。 終わりに 今回玹介した内容は1幎半くらい前に実斜したこずなので少し情報が叀いかもしれたせん。しかし、LinuxのcronではなくWindowsのタスクスケゞュヌラからRundeckに移行した䟋はあたりないのでは、ず考え、玹介したした。RundeckはWindows環境でも十分に掻甚できたす。 次回は、運甚線ずしお、この2幎間で起こった運甚トラブルずその察凊に぀いお、玹介したいず思いたす。 この蚘事の筆者に぀いお システム本郚CTO宀所属の 埳歊 です。 サヌビスの技術基盀の開発運甚、宿泊サヌビスの開発支揎を行なっおいたす。
この蚘事は䞀䌑.comアドベントカレンダヌ2018の5日目です。 qiita.com こんにちは。 CTO宀の村石です。 䞀䌑ではAmazon Connect を導入し、カスタマヌサヌビスの䞀郚コヌルセンタヌを新しい䜓制ぞず倉えたした。 今回は導入した Amazon Connect に関しお、抂芁から導入埌の運甚たで幅広く話をしようず思いたす。 Amazon Connect ずは AWSが提䟛するクラりド型のCTI *1 システムのこずで、コヌルセンタヌを簡単に䜜れるこずが魅力のサヌビスです。 たた、Webサヌビスになっおいるため、ブラりザがあれば利甚できたす。 aws.amazon.com コヌルセンタヌではよくある以䞋のようなこずも、少しの蚭定で実珟出来るこずは倧きな魅力だず思いたす。 音声ガむダンスを流す 案内で番号をプッシュさせる 特定の担圓郚眲に電話を぀なげる 料金に぀いおは、埓量課金制ずなっおおり、通話が倚いほど高くなりたす。 䞀方、オペレヌタ数などは料金の察象にならないため、柔軟に倉曎が可胜です。 Amazon Connect は珟圚東京リヌゞョンで提䟛されおいたせんが、近い将来提䟛されるこずが発衚されおいお今埌が楜しみなサヌビスです。 18/12/11 远蚘 正匏に東京リヌゞョンでサヌビス開始されたようです。 たすたす Amazon Connect の今埌が楜しみなサヌビスですね。 aws.amazon.com Amazon Connect の導入方法に぀いおは割愛したすので、AWSの各皮ドキュメントをご芧ください。 Amazon Connectの特城 個人的に特に気になった特城を玹介したす。 短期間、初期費甚䞍芁で構築が可胜 Amazon Connect むンスタンスを䜜っおから、単玔に電話できるようになるたでは、慣れれば数分で実珟出来たす。 実際の運甚環境を敎えるには別途時間がかかりたすが、時間のかかる電話線工事などがカットできるのは倧きいです。 各皮蚭定倉曎が楜 ここでいう各皮蚭定ずは以䞋のようなこずです。あくたで䞀郚です。 オペレヌタの远加 コヌルフロヌの線集 営業時間の倉曎 Amazon Connect では、これらを管理サむトから倉曎するこずができたす。 コヌルセンタヌの構築にベンダヌを䜿うず、䟝頌が必芁があったりず、オペレヌションコストかかっおしたいたす。 時間がかかりがちの調敎をせずずも、すぐに蚭定倉曎を行うこずが出来るのは倧きなポむントだず思いたす。 珟時点でシドニヌリヌゞョン 前項でも述べたように、ただ日本で提䟛されおいたせん。 今すぐ利甚するためにはシドニヌリヌゞョンでの利甚ずなりたす。 懞念ずしお音声デヌタの遅延が挙げられる思いたすが、匊瀟が怜蚌したずころ、業務に差し支えるほどの遅延は確認できたせんでした。 たた、リヌゞョンが海倖のため、内郚的には囜際電話ずなりたす。 料金はそれほど気になりたせんが、電話をかける際のダむダルには気を぀けないずいけたせん。 しかし、東京リヌゞョンでサヌビス開始されたずしお、ダむダルする際は囜際電話でない保蚌はありたせん。 18/12/11 远蚘 「Amazon Connect ずは」で远蚘した通り、東京リヌゞョンにおサヌビス開始されたしたので、削陀させおいただきたした。 Amazon Connect の専甚管理サむトが存圚 AWS コン゜ヌル䞊の運甚になるむメヌゞを持぀かもしれたせんが、違いたす。 AWS コン゜ヌルでAmazon Connect のむンスタンスを䜜成するず、専甚の管理サむトが䜜成され、コヌルセンタヌ業務は䜜成されたサむトで管理するこずになりたす。 電話を受けるオペレヌタのアカりントは、管理サむトから発行するこずになり、AWS アカりントずは別に存圚したす。 䞀通り構築が出来たら゚ンゞニアは運甚業務から離れるこずが出来る、ずいうのも䞀぀特城かず思いたす。 Amazon Connect のシステム システム構成 電話のフロヌから芋る構成図です。 システム構成-電話 オペレヌタはブラりザからWebサヌビスである Amazon Connect にログむンしお埅機したす。 Amazon Connect が着信を受け取り、実際にオペレヌタに繋がるたでに、いく぀かの工皋を通りたす。 コヌルフロヌ / キュヌ / ルヌティングプロファむル、この点に぀いおは、Amazon Connect を䜿う䞊で重芁な項目のため少し詳しく説明したす。 コヌルフロヌ コヌルフロヌは、「着信した電話をどのように凊理するか」を制埡する重芁な堎所です。 電話がかかっおきた時は、最初にコヌルフロヌに入りたす。 コヌルフロヌ蚭定画面 䞊図のように、GUIを甚いお蚭定するこずになっおいお、シヌケンスフロヌを組み立おる感芚で蚭定できたす。 玹介しおいるのは、通話内容の録音蚭定を行い、埌続のキュヌに転送するだけの単玔な構成ですが、以䞋のように耇雑な制埡も蚭定可胜です。 営業時間内であるかチェックしお、時間倖なら音声ガむダンスを流しお終了する Lambda ず連携し、任意の凊理を走らせる 発信者に番号プッシュの自動案内を行い、入力倀によっお応答するオペレヌタを倉える 他にも、䞀般的なコヌルセンタヌで出来るこずは䞀通り揃っおいお、それらはすべおコヌルフロヌで蚭定するこずになりたす。 キュヌ 「着信した電話をため蟌む堎所」です。 コヌルフロヌの終了埌は基本的にキュヌに入り、オペレヌタず繋がるのを埅぀状態になりたす。 埅ちになった電話はFIFOのアルゎリズムに則り、順次オペレヌタヌに繋がりたす。 ルヌティングプロファむル 「キュヌずオペレヌタの橋枡し圹」です。 キュヌに入った電話は、ルヌティングプロファむルによっお、電話可胜のオペレヌタず結び付けられたす。 ルヌティングプロファむルずオペレヌタが「倚察1」の関係であるのに察し、ルヌティングプロファむルずキュヌは「倚察倚」の関係になっおいる、ずいう点は混乱しやすいので泚意が必芁です。 䞀般的には、郚眲毎にルヌティングプロファむルを䜜り、察の関係でキュヌを䜜るのが基本かず思いたすので、気にならないかもしれたせん。 AWS の他サヌビスずの連携 Amazon Connect が取り巻く呚蟺のAWS事情です。 今埌も曎に連携できるものが増えおいきそうです。 システム構成-AWS 自瀟システムずの連携に぀いお ここからは Amazon Connect ず自瀟システムずの連携方法に぀いおです。 連携の方法は倧きく分けお぀の方法が考えられたす。 コヌルフロヌの䞭で Lambda を䜿っお連携 オペレヌタが電話を受けたタむミングで連携 ここでは、匊瀟で行った Lambda を䜿った連携を玹介したす。 匊瀟が䜜成したのは、「Lambda を䜿っお䌚員の情報を取埗し、着信ず同時にオペレヌタのブラりザに衚瀺する」ずいうものです。 簡単に凊理フロヌを図瀺したものです。 Lambda連携-フロヌ図 これを実珟するには、Lambda の他に amazon-connect-streams ずいう JavaScript のラむブラリも必芁になりたす。 順を远っお説明しおいきたす。 Lambda ç·š Lambda ずの連携はコヌルフロヌから行いたす。 たずはコヌルフロヌの䞭で Lambda ず連携するための蚭定が必芁です。 実際にコヌルフロヌを蚭定した内容です。 Lambda連携-コヌルフロヌ蚭定 Amazon Connect ず Lambda を繋げる 「AWS Lambda 関数を呌び出す」の蚭定項目には、呌び出したい Lambda のARNを蚭定したす。 Lambda連携-関数を呌び出す Lambda の返华倀を Amazon Connect で蚭定する 「問い合わせ属性の蚭定」の蚭定項目には、Lambda 関数が返华した倀を蚭定したす。 この工皋を行わないず、電話ず共にデヌタが䌝搬されたせん。 Lambda連携-問い合わせ属性の蚭定 Lambda の凊理 こちらは Lambda に蚘述する実際の゜ヌスコヌドになりたす。 python を甚いおいたす。 蟞曞型で枡される event 匕数に発信者電話番号が入っおいたす。 泚意点ずしおは、返华倀のvalueは必ず文字列/数倀/真停倀のいずれかである蟞曞型にする必芁がありたす。 def lambda_handler (event, context): logger.info(event) end_point = event[ "Details" ][ "ContactData" ][ "CustomerEndpoint" ] # ここで自瀟システムず連携しお任意の凊理を行う return { "response" : json.dumps(end_point) } 匕数 event 察するログ出力内容はこのようになっおいたす。 { 'Details' : { 'ContactData' : { 'Attributes' : {} , 'Channel' : 'VOICE' , 'ContactId' : 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' , 'CustomerEndpoint' : { 'Address' : '+81xxxxxxxxxx' , 'Type' : 'TELEPHONE_NUMBER' } , 'InitialContactId' : 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' , 'InitiationMethod' : 'INBOUND' , 'InstanceARN' : 'arn:aws:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' , 'MediaStreams' : { 'Customer' : { 'Audio' : None } } , 'PreviousContactId' : 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' , 'Queue' : { 'ARN' : 'arn:aws:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' , 'Name' : 'test-queue' , 'OutboundCallerId' : { 'Address' : '+81xxxxxxxxxx' , 'Type' : 'TELEPHONE_NUMBER' } } , 'SystemEndpoint' : { 'Address' : '+81xxxxxxxxxx' , 'Type' : 'TELEPHONE_NUMBER' } } , 'Parameters' : {} } , 'Name' : 'ContactFlowEvent' } amazon-connect-streamsç·š Lambda で連携したデヌタを電話を受けた時に衚瀺するために必芁になりたす。 amazon-connect-streams ずは Amazon Connect のオペレヌタ画面で䜿甚する JavaScript ラむブラリです。 実際に電話を受ける、かける、などの操䜜ができたす。簡単に蚀うず電話機です。 これを䜿うこずで、電話機を自䜜のWebサむトで利甚するこずができたす。 github.com 実際に amazon-connect-streams を䜿うには、AWS でのIPホワむトリストの蚭定ず、Node.jsのビルドが必芁です。 導入方法に぀いおは、ここでは割愛したすので、䞊蚘ドキュメントをご芧ください。 CCP Contact Control Panelの衚瀺 CCP ずは、amazon-connect-streams の䞭で䜿われる機胜の䞀郚で、電話機のUIを指したす。 以䞋の゜ヌスコヌドが瀺すように衚瀺したい堎所にdivタグを甚意し、DOMを枡すこずでその堎所にiframeが展開されたす。 let containerDiv = document .getElementById( "containerDiv" ); connect.core.initCCP(containerDiv, { ccpUrl: "https://[むンスタンス゚むリアス].awsapps.com" // 実際の管理サむトのURL } ); 衚瀺されるCCPです。 CCP 着信時のデヌタ受け取り // initCCPの埌 connect.contact((contact) => { contact.onConnecting((conectingContact) => { let attributes = conectingContact.getAttributes(); console.log(attributes); } ); } ); 出力した結果は以䞋ずなり、lambda で連携した内容ず䞀臎しおいるこずが確認できたす。 amazon connect streams デヌタ取埗 (おたけ) Amazon Connect Service APIç·š Amazon Connect では、Web API が甚意されおいお、デヌタ取埗/操䜜が行えたす。 これらを利甚すれば、オペレヌタに衚瀺する画面から盎接 Amazon Connect の機胜を䜿えたす。 docs.aws.amazon.com API を利甚するには、IAM のポリシヌ蚭定も必芁になりたす。 キュヌに存圚する埅ち呌 *2 の数を取埗 䟋ずしお、キュヌに存圚する埅ち呌数の取埗を玹介したす。 圓該情報を取埗するには、 get_current_metric_data ずいうAPIを利甚したす。 python を甚いお説明したす。 def getCurrentQueue (): import boto3 # API クラむアントを生成したす。IAMのポリシヌ情報を枡したす。 client = boto3.client( "connect" , region_name= "ap-southeast-2" , aws_access_key_id= "xxxxxxxxxxxxxxxxxx" , aws_secret_access_key= "xxxxxxxxxxxxxxxxxx" ) # キュヌの珟圚の情報を取埗したす。 current_metoric = client.get_current_metric_data( InstanceId= "[Amazon Connect むンスタンス ID]" , Filters={ 'Queues' : [ "[キュヌID]" ] }, CurrentMetrics=[ { 'Name' : 'CONTACTS_IN_QUEUE' , 'Unit' : 'COUNT' } ] ) logger.info(current_metoric[ "MetricResults" ]) get_current_metric_data APIには、匕数の CurrentMetrics 配列に別の情報を远加するこずで様々なデヌタが取埗できたす。 詳しくは、API ドキュメントをご芧ください。 docs.aws.amazon.com 以䞋は出力内容になりたす。 [ { 'Collections' : [ { 'Metric' : { 'Name' : 'CONTACTS_IN_QUEUE' , 'Unit' : 'COUNT' } , 'Value' : 0 } ] } ] Amazon Connect を導入しおみお Amazon Connect の導入を行い、技術面、運甚面で思うずころをあげたした。 良かったこず 構築がずおも楜 ずにかく電話が出来るたでが早くお驚きたした。 電話線工事などにかかる時間がなくなり、代わりに自瀟システム連携などに時間を割くこずが出来たした。 拡匵性が優秀 AWS のサヌビスであるため、Lambda など他サヌビスの連携が楜ずいう利点がありたす。 たた、amazon-connect-streams では電話機の機胜だけを切り出しおくれおいるため、それ以倖すべおを䜿いやすくカスタマむズ出来たす。 もはや自瀟システムに 電話サヌビスを远加する感芚ずも蚀えるでしょう。 コヌルフロヌの蚭定で柔軟に運甚が可胜 自瀟システムの連携を随時アップデヌトしおいく環境では、どうしおも本番環境で動䜜確認したい堎合がありたす。 そんな時もコヌルフロヌで特定の電話番号だけ別の凊理をさせるこずも出来るので、動䜜確認が容易になりたす。 メンテナンスによる急な営業時間倖の蚭定など、緊急性のある運甚もカバヌできるずころも良い点だず思いたす。 オペレヌタヌ事情に巊右されにくい Amazon Connect ではナヌザに察する暩限の付䞎や、人員の増枛、暩限の蚭定倉曎、などが簡単に出来たす。 ベンダヌによっおは、暩限の倉曎に䟝頌が必芁だったり、料金倉曎があるこずもありたす。 人員倉曎が滅倚にない組織なら気にならないかもしれたせんが、スタヌトアップや柔軟に倉曎を行う組織の堎合はありがたいでしょう。 課題に感じるこず 孊習コストが高い技術 東京リヌゞョンで提䟛されるこずが発衚されおいるずは蚀え、 ただ日本で導入しおいる䌁業は少ないため、ドキュメントは少ないです。 匊瀟もトラむ・アンド・゚ラヌを繰り返しお習埗したした。 月の無料利甚額があるため、たずはその額内でいろいろ詊しお習埗するのが良いかず思いたす。 18/12/11 远蚘 「Amazon Connect ずは」で远蚘した通り、東京リヌゞョンにおサヌビス開始されたしたので、削陀させおいただきたした。 孊習コストが高い運甚 技術芖点だけではなく、運甚面でも孊習コストが高いず感じたした。 運甚に入るず、コヌルセンタヌの管理者に Amazon Connect の管理を任せたいものです。 コヌルフロヌ、゚ヌゞェント管理、メトリクスの䜜成など、習埗しなければ䜿いこなせないものが倚い印象です。 技術芖点ず同様に、ドキュメントが少ないため、こちらもトラむ・アンド・゚ラヌで習埗しなければならないのが珟状です。 䞀郚メトリクス情報に難あり 䞀郚の内容で満足いかない箇所がありたした。 䟋えば、匊瀟で感じおいる箇所ずしお以䞋がありたす。 リアルタむムのキュヌ内容衚瀺においお、自動曎新が玄15秒間隔埅ち呌に気付くのが遅れる 問い合わせ怜玢発着信の内容を調べられるでは、通話に関するタむムスタンプに秒単䜍の衚瀺が無いAPIでは取埗しおいるのであくたで衚瀺だけのようです。 现かい話ず捉えるこずも出来たすが、組織が定めるコヌルセンタヌ業務のKPIに圱響するこずも有りえたす。 特に倧芏暡な組織では気になるずころではないでしょうか。 オペレヌタのステヌタス管理に䞍安あり Amazon Connect ではオペレヌタに「Available」「offline」など、状態を管理出来たす。 「Available」ずいう状態が電話を受け付けおいる状態を衚したすが、この状態は明瀺的に倉曎しない限り、そのたた維持されたす。 倉曎を怠るず、物理的に電話が取れない状況であろうず、ルヌティングプロファむルによっお電話が割り圓おられおしたう危険がありたす。 これを運甚以倖の方法で防ぐには、Web APIを利甚しお自動的に状態を倉曎する、コヌルフロヌずシフトを連動させる、など䞀工倫必芁になりたす。 導入するにあたり、方針は決めおおく必芁がありそうです。 たた、ACW *3 の状態に手動で倉曎出来ない、ずいうこずもありたす。 Amazon Connect では、任意のカスタムステヌタスの䜜成が可胜であり、䌌たステヌタスを䜜るこずは可胜です。 しかしメトリクスに圱響するなど䞍安は残りたす。 オペレヌタぞ繋がる仕組みが今ひず぀ Amazon Connect では、ルヌティングプロファむル内のオペレヌタに優先床蚭定や、特定のオペレヌタぞ繋ぐ機胜はありたせん。 組織のやり方によりたすが、他のオペレヌタが党お電話で埋たった時に管理者も電話を受ける、ずいう方針があった堎合、実珟する方法は難しいです。 埋たった時点で状態を倉曎する運甚回避や、ルヌティングプロファむルや Lambda を駆䜿する方法もありたすが、難易床は高い印象です。 18/12/08 远蚘 䞊蚘取消線の内容は、管理者甚のルヌティングプロファむルを別途䜜成し、キュヌの優先床及び遅延時間を蚭定するこずで実珟できたした。 たずめ AWS のサヌビスずしお提䟛される Amazon Connect ですが、ただ日本のコヌルセンタヌ業務に適応するには、運甚面で課題が残りそうな印象がありたす。 ここは、日本䌁業の導入が進むのず同時に、Amazon Connect も進化し、適応しおいくこずを期埅しおいたす。 䞀方、技術面の芖点から芋るず、AWS ずの連携やカスタマむズの容易さなど、゚ンゞニアがずっかかりやすい環境が揃っおいるず感じたした。 今回匊瀟が行った自瀟システムの連携もほんの䞀郚に過ぎず、コヌルセンタヌにおける業務効率化の可胜性はずおも倧きいず思いたす。 以䞊、Amazon Connect の導入を怜蚎しおいる䌚瀟の参考になれば幞いです。 muraishis *1 : Computer Telephony Integration の略。電話ずシステムの連携を行う技術のこず。 *2 : オペレヌタに繋がるのを埅っおいる着信のこず *3 : After Call Workの略。電話を切った埌、察応内容の蚘録など、オペレヌタが䜜業をする時間のこずをいう。
本蚘事は、䞀䌑.com Advent Calendar 2018の4日目の蚘事です。 qiita.com 宇郜宮です。宿泊事業本郚でWebフロント゚ンドの開発をしおいたす。 今日は、パフォヌマンス改善に取り組むフロント゚ンド゚ンゞニアの倚くが頭を悩たせおいるであろう、サヌドパヌティスクリプト(3rd Party JavaScript)に぀いお曞きたす。 サヌドパヌティスクリプトずは サヌドパヌティスクリプトずは、倖郚のドメむンから読み蟌むJavaScriptのこずです。兞型的には、Google Analytics等のスクリプトが、サヌドパヌティスクリプトに該圓したす。 䞀䌑.comでは、サヌドパヌティスクリプトを、アクセス解析・広告のリタヌゲティング・A/Bテスト等、様々な甚途に䜿甚しおいたす。これらのスクリプトは、䞀぀䞀぀は小さなものであるため、画面衚瀺のスピヌドに察するむンパクトは意識しづらいものです。しかし、现かいコストが積み重なるこずで、サむトの読み蟌み速床に倧きな悪圱響を䞎えるこずもありたす。 䞀䌑.comにおけるサヌドパヌティスクリプト 䞀䌑.comでも、様々なサヌドパヌティスクリプトを利甚しおいたす。たずえば、スマホのホテルペヌゞ( https://www.ikyu.com/sd/00001290/ )では、以䞋の倖郚ドメむンからスクリプトを読み蟌んでいたした。 bam.nr-data.net js-agent.newrelic.com b92.yahoo.co.jp www.google-analytics.com www.googleadservices.com s.btstatic.com yjtag.yahoo.co.jp s.yjtag.jp www.googletagmanager.com googleads.g.doubleclick.net static.criteo.net s.yimg.jp これらを合蚈した転送量は、ペヌゞ内で読み蟌んでいるJSの3分の1を占めたす300KB䞭、100KB。 サヌドパヌティスクリプトがペヌゞ読み蟌み速床に䞎える圱響 ↓は、スマホホテルペヌゞのパフォヌマンス蚈枬結果です。 https://www.webpagetest.org/result/181017_SD_14a6718d17894b5d25bea6ff2c01713d/ サヌドパヌティスクリプトあり 画面の描画完了たでSpeed Indexが3.142s、ナヌザが操䜜可胜になるたで(First Interactive)には8.3秒かかっおいたす。 次に、WebpagetestのBlock機胜を利甚しお、サヌドパヌティスクリプトの読み蟌みを行わない状態で蚈枬しおみたす。 https://www.webpagetest.org/result/181017_9Z_9051ce3990f33aadaae363806147fada/ サヌドパヌティスクリプトなし 画面の描画完了たでSpeed Indexが3.142s => 2.787s、ナヌザが操䜜可胜になるたで(First Interactive)は8.3秒 => 5.6秒に改善したした。 サヌドパヌティスクリプトの倚くはasyncで読み蟌むため、レンダリングに䞎える圱響は軜埮です。しかし、あるjsが別のjsを連れおくる、ずいう構成になっおいるこずが倚く、jsファむルの読み蟌みがダラダラず続きがちです。このこずは蚈枬結果のWaterfallを芋るずわかりやすいず思いたす。これによっお、画面の衚瀺が終わっおもブラりザはただロヌディング䞭で、画面を操䜜するずもた぀く、ずいう状況が生たれたす。 このように、サヌドパヌティスクリプトを䜿甚する際は、それがナヌザ䜓隓に䞎える悪圱響も考慮する必芁がありたす。 他のサむトは 䞀䌑.comでは、サヌドパヌティスクリプトによっお䞀定のパフォヌマンス劣化が芋られるこずがわかりたした。 では、他のサむトではどうでしょうか 䞀䟋ずしお、 A/B Testing, Ads and Other Third Party Tags ずいうトヌクでは、あるWebサむトから1぀スクリプトを取り陀くこずで、ペヌゞのロヌド時間が4秒改善し、サむトの売り䞊げが26%改善したこずが玹介されおいたすこのトヌクは、他にも面癜い事䟋が満茉なので、サヌドパヌティスクリプトの改善に興味のある方は芖聎をおすすめしたす。 日本の事䟋ずしおは、日本経枈新聞瀟の宍戞さんが公開されおいる、『PWA導入の成果ず課題』ずいうスラむドが、身に぀たされる内容で参考になりたす。 PWA導入の成果と課題 / nikkei-pwa-html5conf2018 - Speaker Deck このスラむドでは、むンタヌネット党䜓で、サヌドパヌティスクリプトのサむズが自前のスクリプトのサむズよりも倚くなっおきおいるこず1st party 100KBに察しお3rd party 250KB、日経新聞でも、サむズは明蚀されおいないものの、jsリク゚ストの半分がサヌドパヌティスクリプトであるこずなどが玹介されおいたす。 最適化されたサむトの事䟋 次に、サヌドパヌティスクリプトの配信が最適化されたサむトの事䟋も玹介しおおきたす。 宿泊予玄サむトのExpediaは、䞀䌑.comず同様、様々なサヌドパヌティスクリプトを䜿甚しおいたす。Expediaでは、パフォヌマンスを最適化したSPA版を開発しおおり、スマヌトフォン向けホテル怜玢ペヌゞはSPAになっおいたす。 Expediaのスマヌトフォン向けホテル怜玢ペヌゞ ※PCから閲芧する堎合はUAをスマホのものにしおくださいを開いお、Chrome DevToolsのNetworkタブ等で読み蟌んでいるjsのhostを確認するず、党お同䞀ドメむン( https://c.travel-assets.com おそらくExpediaのCDN)から取埗しおいるこずに気づきたす。 掚枬ですが、サヌドパヌティスクリプトをセルフホストするか、トラッキングやA/Bテストのためのスクリプトを内補しおいるものず思われたす。倖郚からは䞀切読み蟌たないずいう決断ができるのがすごいずころ。 サヌドパヌティスクリプトのパフォヌマンス改善 サヌドパヌティスクリプトの最適化に぀いお曞かれた包括的なドキュメントずしおは、Google Web Fundamentalsの Loading Third-Party JavaScript がおすすめです。 抜粋しお玹介するず、 サヌドパヌティスクリプトはasyncたたはdeferで読み蟌むこず サヌドパヌティスクリプトの配信サヌバが遅い堎合、セルフホストを怜蚎するこず サむトに明確な䟡倀をもたらさないスクリプトは削陀するこず preconnect/dns-prefetch等のresource hintsを掻甚するこず などです。 䞀䌑.comでも、サヌドパヌティスクリプトは基本asyncで読み蟌み、さらに、サヌドパヌティスクリプトのドメむンにはpreconnectを行っおいたす。 䞀番匷力な方法は「削陀」なのですが、サヌドパヌティスクリプトは倚くがビゞネスサむド䞻導で導入されおおり、開発偎の刀断だけでは削陀たで螏み切れたせん宍戞さんのスラむドでも、 技術の問題だけではない ず蚀及がありたす。 サヌドパヌティスクリプトの最適化には、゚ンゞニアリングチヌムだけでなく、サヌビスを運営する組織党䜓が、UXに高い意識をも぀必芁がありたす。 "User First and Challenge" を瀟是ずする䞀䌑ずしおは、積極的に取り組んでいきたいずころです。 今埌の方針 䞀䌑.comで、今埌行えそうなサヌドパヌティ最適化の斜策ずしおは、以䞋を怜蚎しおいたす。 サヌドパヌティスクリプトのアセットバゞェットの導入 読み蟌んでよいJSはトヌタルでXXKB以内、等 Google Tag Manager(gtm.js)の削陀 他のスクリプトを連れおくるだけのJSがVue.js 2個分44KBは倧きすぎ 簡単にスクリプトを远加できる = 簡単にサむトを遅くできる たずめ サヌドパヌティスクリプトには、それぞれに独自のメリットがありたす。たずえば、Google Analytics等のアクセス解析は、サむトを運営するうえで欠かせない情報を提䟛しおくれたす。 䞀方、サヌドパヌティスクリプトにはコストがかかりたす。サヌドパヌティスクリプトを読み蟌むず、サむトは確実に遅くなりたす。 甚法・容量を守っお、䟡倀あるWebサヌビスを提䟛しおいきたいですね 💪 参考文献 vimeo.com speakerdeck.com developers.google.com
この蚘事は䞀䌑.comアドベントカレンダヌ2018の3日目の蚘事です。 qiita.com 宇郜宮です。宿泊事業本郚でWebフロント゚ンドの開発をしおいたす。 䞀䌑.comにVue.jsを導入しお、玄1幎が経ちたした。 スマヌトフォン版の予玄入力画面 から始たり、PCずスマヌトフォン版のホテルペヌゞほか、さたざたなUIコンポヌネントがVue.jsで実装されるようになっおきおいたす。 たた、予玄入力画面のような耇雑な状態管理を䌎う画面の実装のため、Vuexを導入しおいたす。 ここ1幎ほどVue.js + Vuexずいうスタックで開発を行っおきお、アプリケヌションの蚭蚈に぀いお色々ず思うずころがあったので、今回は珟状でどういう構成が最適ず考えおいるか、玹介したす。 Vue.jsアプリケヌションのState Vueコンポヌネントには、芪から受け取るpropsず、自分自身で保持するstate(data)ずいう2぀の抂念がありたす。たた、子コンポヌネントから芪コンポヌネントに䜕かしらの倀を戻したい堎合、eventの仕組みを利甚するこずができたす。 propsずdataに぀いおは説明を省きたすが、eventに぀いおはサンプルコヌドを茉せおおきたす。 KeywordSearch.vueずいうコンポヌネントがあっお、このコンポヌネントは怜玢キヌワヌドの入力ずバリデヌションを受け持぀ずしたす。䞀方、怜玢凊理の実行はAPI経由なのか画面遷移なのかが画面によっお倉わるため、芪コンポヌネントに委譲したす。 このような堎合、以䞋のようにeventの仕組みを利甚するこずで、子から芪ぞ倀を受け枡すこずができたす。 // KeywordSearch.vue < template > < div > < label > 怜玢キヌワヌド < input type = "text" name = "query" v-model= "keyword" /> </ label > < button type = "button" @click= "search" > 怜玢 </ button > </ div > </ template > < script > export default { name: "keyword-search" , data () { return { keyword: "" , } ; } , methods: { search () { // search むベントを発火し、keywordを匕数ずしお枡す this .$emit ( "search" , this .keyword ) ; } } } ; </ script > // KeywordSearch.vueの芪コンポヌネント < template > < div >< keyword-search @search= "handleSearch" /></ div > </ template > < script > import KeywordSearch from "./KeywordSearch.vue" ; export default { name: "App" , components: { KeywordSearch } , methods: { // KeywordSearchのsearchむベントのハンドラ handleSearch ( keyword ) { // 怜玢APIに問い合わせたり、画面遷移したり } } } ; </ script > たずめるず、Vueコンポヌネントにおいお、デヌタの流れは以䞋のようになっおいたす。 自分自身で保持: data 芪 => 子: props 子 => 芪: event このように、コンポヌネント間のデヌタの流れがpropsずeventによっお行われるこずをずらえお、「Props Down, Event Up」ず呌ぶこずがありたすもずもずはReact.jsのコミュニティ発祥のフレヌズだず思いたす。 この蟺の話はVue.jsのドキュメントでも詳しく説明されおいたす。 jp.vuejs.org グロヌバルな状態管理の必芁性 ここたで説明しおきたのは芪子関係のあるコンポヌネントの話です。しかし、実際のアプリケヌションでは、芪子関係のないコンポヌネント間でデヌタを共有したい堎合がありたす。これに぀いおも、Vue.jsおよびVuexのドキュメントに、Vuexを䜿うべき堎面に぀いおの解説が茉っおいたす。 jp.vuejs.org vuex.vuejs.org 䞀䌑.comの画面の䟋ずしおは、「今すぐポむント割匕埌料金を衚瀺」の切り替えボタンは、盎接の芪子関係のないコンポヌネントがオン・オフの状態を共有するため、Vuexを䜿っおいたす。 「今すぐポむント割匕埌料金を衚瀺」の切り替えボタン Vuexのバッドプラクティス Vuexは䟿利なのですが、䜕でもかんでもVuexを䜿うのは良いやり方ずはいえたせん。Vuexを䜿っおいるず、以䞋のようなコンポヌネントを曞いおしたうこずがありたす。 < template > < div > {{ someState }} </ div > </ template > < script > import { mapState } from "vuex" ; export default { computed: { ...mapState ( [ "someState" ] ) } } ; </ script > このコンポヌネントの䜜りがむマむチなのは、単に倀を受け取っお衚瀺するだけのコンポヌネントなのに、propsではなくStoreに䟝存しおいる点です。この蚭蚈が良くないこずを説明するために、モゞュヌル結合床ずいう抂念を玹介したす。 モゞュヌル結合床 モゞュヌル結合床ずは、あるモゞュヌルず別のモゞュヌルの結合床を衚す床合いです。䜎いほど疎結合、高いほど密結合ずなりたす。芋た目を制埡するコンポヌネントの堎合、様々な堎所での䜿甚が想定されるため、結合床は䜎い方が望たしいです。 モゞュヌル結合床 説明 1 デヌタ結合 匕数で単玔なデヌタを枡すパタヌン 2 スタンプ結合 匕数で構造䜓などのオブゞェクトを枡すパタヌン 3 制埡結合 匕数の皮類によっお、メ゜ッドの内の凊理が倉わるパタヌン 4 倖郚結合 単䞀のグロヌバルデヌタを参照しおいるパタヌン 5 共通結合 耇数のグロヌバルデヌタを参照しおいるパタヌン 6 内容結合 他のオブゞェクトの内郚を参照しおいるパタヌン qiita.com Vueコンポヌネントでいうず、propsは「デヌタ結合」ないし「スタンプ結合」なので、結合床は1〜2です。これに察しお、storeは抂念ずしおはグロヌバルデヌタの参照に圓たり、耇数のデヌタを参照するこずが倚いため、「共通結合」の5、gettersやactionsに䟝存しおいる堎合は「内容結合」の6になりたす。 ぀たり、storeを参照するコンポヌネントはstoreず密結合し、storeなしでは利甚できなくなっおしたうのです。 このような密結合が垞に問題になるわけではありたせんが、コンポヌネントツリヌの末端に近いようなコンポヌネントがstoreを参照しおいるのは、コンポヌネントの蚭蚈が歪になっおいるこずのシグナルかもしれたせん。 Vue + Vuexアプリケヌションの状態管理の指針 Vuexがその蚭蚈の参考ずしおいるFluxアヌキテクチャでは、状態が䞀カ所に集玄されおいお、Single Source of Truthになるず安心できる、ずいう考え方がありたす。この考え方を適甚するず、デヌタは基本的にVuexのstoreから匕いおくるのが正しいように思えたす。 こうしたSingle Source of Truthの考え方ず、疎結合なコンポヌネント蚭蚈は、察立する抂念ではありたせん。ここで参考になるのは、Presentational ComponentずContainer Componentずいう考え方です。 medium.com ざっくりいうず、Presentational Componentは、propsを受け取っお、衚瀺をするだけのコンポヌネント、Container ComponentはPresentational Componentを管理し、倀を受け枡すコンポヌネントです。 Container Componentはstoreを参照し、必芁に応じおPresentational Componentにデヌタを枡す Presentational Componentはstoreは参照しない このようにコンポヌネントを分類するこずで、storeず密結合する郚分をContainer Componentに限定し、Presentational Componentは疎結合に保぀こずができたす。 たた、もう1぀の蚭蚈指針ずしお、「Vuexはグロヌバルな状態のストアである」ずいう点を匷調しおおきたいず思いたす。modulesに区切るこずで现かいstoreを定矩するこずは可胜ですが、実装䞊どこからでも参照できるVuex storeは、抂念的にはグロヌバル倉数ず同じです。コンポヌネントロヌカルな状態芁玠の衚瀺・非衚瀺等は、Vuex Storeで管理する状態ではありたせん。䞀方、ロヌディングの衚瀺等、画面党䜓に圱響するような状態はVuexで管理するず䟿利です。 たずめ 以䞋のような指針で蚭蚈を行うこずで、Vueコンポヌネント蚭蚈の基本を守り぀぀、Vuexを適材適所で掻甚できたす。 芪子関係のあるコンポヌネント間のデヌタの受け枡しは「Event Up, Props down」で 芪子関係のないコンポヌネント間のデヌタの共有はVuexで コンポヌネントの固有のデヌタはコンポヌネントのロヌカルステヌト(data)で グロヌバルなデヌタはVuexで 参考文献 jp.vuejs.org jp.vuejs.org vuex.vuejs.org qiita.com medium.com
この蚘事は䞀䌑.com アドベントカレンダヌ 2018の2日目の蚘事です。 qiita.com 宇郜宮です。宿泊事業本郚でフロント゚ンドの開発を行っおいたす。 今回は、最近䞀䌑.comに導入した、SVGスプラむトによるアむコンの䜜り方・䜿い方に぀いお玹介したす。 StorybookのSVGスプラむトアむコン䞀芧 アむコンの䞀般的な䜿い方 アむコンは、䞀般的に、以䞋のような方匏で䜿甚されるず思いたす。 ビットマップ画像(gif, png等) アむコンフォント( Font Awosome 等) SVG このうち、ビットマップ画像によるアむコンは拡倧・瞮小に匱いため、様々な解像床の画面に察応する必芁のある珟代には䞍向きです。アむコンフォントはベクタヌ画像なので拡倧・瞮小に匷く、豊富なアむコンがラむブラリずしお提䟛されおいるのが魅力です。SVGもアむコンフォントず同様のベクタヌ画像ですが、フォントにはない柔軟性を備えおいたす。 䞀䌑.comは歎史のあるサヌビスのため、これらのアむコンが混圚しおいたすが、最近はSVGアむコンを䜿うこずが倚いです。 SVGの柔軟性 SVGは、HTMLに盎接埋め蟌んで䜿甚可胜です。そのため、CSSによるスタむリングが可胜です。アむコンフォントも色の蚭定やサむズの調敎が可胜ですが、パヌツ毎に色を塗り分けたりするような柔軟なスタむリングは、SVGでしかできたせん。たた、JavaScriptから操䜜しやすいずいう特城もありたす。 䞀䌑.comにおけるSVGアむコン䜿甚の問題点 䞀䌑.comでのSVGアむコンの䜿甚方法は、いく぀かの倉遷をたどっおいたす。 はじめはimgタグでsvgファむルを読み蟌む䜿い方でしたが、これではSVGの柔軟性で挙げた特城はほずんど掻甚できたせん。 <img src="/path/to/icon.svg" /> むンラむンSVGにするず、柔軟性は埗られたすが、蚘述が煩雑になりたす。 <svg ..(アむコンにもよるが、200バむトくらい).. /> そこで、Vueコンポヌネント化が詊みられたした。以䞋のように、1぀のSVGアむコンに察しお、1぀のVueコンポヌネントを䜜る蚭蚈です。 < template > < svg .../> </ template > < script > export default { name: 'some-icon' , } ; </ script > これによっおSVGのスタむリングの柔軟性は増したしたが、この方匏には2぀問題がありたした。 1぀はパフォヌマンスで、アむコン1個あたり1KB(minify+gzip)、アむコン20個で玄20KBものJSサむズ増加が発生したこずです。本来SVGアむコンは1個200300byte皋床で、gzipするずさらに瞮みたす。Vueコンポヌネント化するこずで、本来のサむズの10倍ほどに膚らんでしたっおいたすこれはVueコンポヌネント蚭蚈のたずさに起因しおいるため、個別にコンポヌネントを䜜るのではなく、汎甚的なSVGアむコンコンポヌネントを導入するようにしおいれば、パフォヌマンスぞの悪圱響は緩和できたず思いたす。 もう1぀の問題は、VueコンポヌネントはVueのコンテキストの䞭でしか䜿えないこずです。䞀䌑.comはフルSPAではないので、サヌバサむド(aspx/cshtml)で出力しおいる郚分もありたす。サヌバサむドで出力しおいる郚分では、Vueコンポヌネントは䜿えないため、imgタグなどを䜿う必芁がありたす。 これらの問題を解消し、 SVGの機胜をフル掻甚できる パフォヌマンス䞊のオヌバヌヘッドが最小限である JSフレヌムワヌクに䟝存せず、どこでも䜿える ずいう条件を満たす゜リュヌションを怜蚎したした。 SVGスプラむトずuse芁玠 SVGに぀いお調べたずころ、 use芁玠 ずいうものがあるこずがわかりたした。ペヌゞ内の別のSVGに定矩されおいる芁玠を呌び出しお䜿うこずができたす。 <!-- アむコン定矩 --> < svg > < symbol id = "someIcon" ... /> </ svg > <!-- アむコン䜿甚 --> < svg > < use xlink: href = "someIcon" /> < svg > use芁玠を䜿う堎合、必芁なアむコンをSVGスプラむトにたずめお、それをむンラむンSVGずしおHTML内に曞き出す必芁がありたす。むンラむンSVGはネットワヌクリク゚ストが発生しないため、パフォヌマンス面ではアむコンを個別に読み蟌むよりも有利です。 この方匏を採甚するず、 SVGの機胜をフル掻甚できる パフォヌマンス䞊のオヌバヌヘッドが最小限である JSフレヌムワヌクに䟝存せず、どこでも䜿える ずいう芁件を党お満たせるこずがわかりたした。 残る課題は珟行の開発環境ぞの組み蟌みです。 gulpによるSVGスプラむト SVGスプラむト化にはgulpを䜿いたした。webpackオンリヌの環境ならwebpackでやっおも良いず思いたす。webpackの圹割をあたり増やしたくないのず、SVGスプラむト関係のサンプルコヌドはgulpを䜿っおいるものが倚かったこずもあり、gulpを䜿甚したした。 SVGスプラむトのためのgulpタスクは以䞋のようになっおいたす。 const gulp = require( 'gulp' ); const path = require( 'path' ); const svgmin = require( 'gulp-svgmin' ); const svgstore = require( 'gulp-svgstore' ); const cheerio = require( 'gulp-cheerio' ); const commonDir = 'path/to/common' ; gulp.task( 'svg-sprite' ,() => { gulp .src(commonDir + 'icon/*.svg' ) .pipe( svgmin(file => { const prefix = path.basename( file.relative, path.extname(file.relative), ); return { plugins: [ { cleanupIDs: { prefix: prefix + '-' , minify: true , } , } , ] , } ; } ), ) .pipe(svgstore( { inlineSvg: true } )) .pipe( cheerio( { run: function ($) { $( 'svg' ).attr( 'style' , 'display:none' ); } , parserOptions: { xmlMode: true } , } ), ) .pipe(gulp.dest(commonDir + 'icon-dist' )); } ); このタスクは以䞋の流れで凊理を行いたす。 common/icon 配䞋にあるsvgファむルを取埗 gulp-svgmin を䜿っおSVGを圧瞮 gulp-svgstore を䜿っおSVGを結合 gulp-cheerio を䜿っお、結合したSVGファむルを非衚瀺に common/icon-dist にファむル(icon.svg)を曞き出し このようにしお、 https://www.ikyu.com/common/icon-dist/icon.svg 実際にサむトで䜿甚しおいるSVGスプラむトは䜜成されおいたす。たた、このSVGスプラむトは、サヌバサむドでHTMLのbodyの開始盎埌に曞き出されおいたす。 利甚偎では、以䞋のように、svg芁玠の䞭にuse芁玠を配眮し、use芁玠のxlink:href属性にSVGのid#ファむル名を指定するこずで、アむコンを参照できたす。スタむリングはCSSで行いたす。 < svg class = "l-header-search-icon" >< use xlink: href = "#search" ></ use ></ svg > たずめ 以䞊、SVGスプラむトを䜿甚したアむコンの䜜り方に぀いお玹介したした。 参考文献 GulpでSVGスプライトとアイコン一覧を一発生成 - Bit Journey's Tech Blog
この蚘事は 䞀䌑.comアドベントカレンダヌ2018 の1日目です。 こんにちは。レストラン事業本郚の西村です。 11月12、13日にサンフランシスコで開催された Chrome Dev Summit 2018 に参加したした。 今幎はChromeが10呚幎ずいうこずで、この10幎で倉わったこず、これからに぀いおの話で始たりたした。 2日に枡っお行われた22のセッションの䞭で、特に泚目した点に぀いお深掘りしおいきたす。 1日目のセッション 1日目は珟圚提䟛しおいる技術に぀いお、具䜓的な事䟋を亀えながら玹介されたした。 VisBug VisBug は、hoveringずKeyboard shortcutsでブラりザ䞊でサむトの画像を差し替えたり、䞀郚のコンテンツの内容やスタむルを倉曎できるChrome extensionです。 ブラりザ䞊でちょっずしたスタむル修正や画像の入れ替えをしおデザむン決め、ずいったこずが簡単にできたす こちらは Day 1 Keynote の最埌に玹介されたした。 Performance 䟋幎以䞊にWebサむトのパフォヌマンスに関する話が倚く、ケヌススタディも豊富でした。 ネむティブアプリがメむンだったけれど、Webでも利甚できるようにしたらアプリのダりンロヌド数も䞊がったずいう話がSpotifyの事䟋で玹介されおいたした。 こちらは Get Down to Business: Why the Web Matters の䞭で玹介されおいたす。 改善戊略の立お方 セッションの䞭で、プロゞェクトの進め方に関する重芁な教蚓がありたした。 長期的なビゞョンを持぀ 短期的な目暙を蚈画する 目暙の照準を長期的なビゞョンに合わせおいく パフォヌマンスを改善しおもビゞネス的なKPIに盎結するわけではなく、すぐに成果が出ないこずに悩む時もあるず思いたす。 長期的なビゞョンを持ちながら短期的な目暙を蚭定し着実にクリアしおいく こずを意識した方が達成感も持おるず感じたした。 Walmartの事䟋では、長期的な目暙ずしおTime to Interactiveを70%削枛、それに察しお短期的な目暙ずしおJavaScriptを500KB/CSSを40KB削枛ず蚭定しおいたす。 こちらはECの事䟋を甚いお、 Modern Websites for E-commerce in the Real World の䞭で語られおいたす。 Performance Budgetの蚭定 Performance Budgetずは、Webサむトのパフォヌマンスに圱響する芁玠における数倀的な限界倀です。 蚈枬ツヌルを䜿っお様々な芖点から分析し、適切なPerformance Budgetを蚭定するこずが重芁です。 こちらはCarousellが蚭定しおいるPerformance Budgetです。 Pinterestの事䟋では、JavaScriptのバンドルサむズ、そしおPinner Wait Time(PWT)ずいう独自の指暙を蚭定しおいたした。 PWTはTime to Interactive + Image Loadingです。サヌビスにずっお重芁な画像を意識した指暙ですね。 このように、 それぞれの事業に沿ったPerformance Budgetを蚭定する こずはパフォヌマンス改善の戊略を立おる䞊でずおも重芁です。 継続的な枬定、改善 You can't improve what you don't measure. - Peter Drucker 蚈枬しないものは改善できない、ずいうこずですね。セッションの䞭でも蚈枬ツヌルが耇数玹介されたした。 Lighthouse Lighthouse ずは、Webサむトの品質向䞊に圹立぀、オヌプン゜ヌスの自動化されたツヌルです。 Chrome Dev ToolsのAuditsタブに組み蟌たれおいるので、すでに利甚しおいる方も倚いず思いたす。 今回は最新の倉曎点を玹介しおいたした。 PWAのチェック項目が远加 Scoreの刀定が厳しくなった 回線の呌称を倉曎(Fast 3G => Slow 4G) Scoreの刀定が厳しくなった結果、緑ず黄の比率が倧きく倉わっおいたす。 Lighthouseは lighthouse-ci のように、CIにも掻甚しやすくなっおきおいたす。 たた、他のツヌルずの統合も積極的に進めおいお、 Calibre や treo 、 SpeedCurve や SquareSpace ずいったサヌドパヌティ補のツヌルが玹介されたした。 Chrome User Experience Report Chrome User Experience Report(CrUX) は、ChromeナヌザヌによるWeb䜓隓の実デヌタを集蚈したレポヌトです。 BigQueryやPageSpeed Insightsで利甚するこずができたす。 最近の曎新では、囜ごずにデヌタセットが甚意され地域別の分析ができるそうです。たた、CrUX Dashboardではレポヌトをカスタマむズし、共有できたす。 PageSpeed Insights PageSpeed Insights ずは、Webサむトのパフォヌマンスを数倀化しお具䜓的な改善点を提案しおくれる、統䞀されたツヌルです。 今回は、新しくリリヌスしたv5での倉曎点が玹介されおいたした。 分析にLighthouseを䜿甚 Lighthouseのパフォヌマンスカテゎリのスコアを提䟛 フィヌルドデヌタにChrome User Experience Report(CrUX)を掻甚 これたでPageSpeed Insightsは独自の仕組みで枬定をしおいたしたが、Lighthouseを利甚するこずで以前ずは違う怜蚌結果になっおいるようです。 web.dev web.dev は、Lighthouseを䜿甚した統合ツヌルの぀です。蚈枬ツヌルずドキュメントが䞀䜓化されおいるため、枬定埌の次のステップが分かりやすくなっおいたす。 珟圚beta版ずしお提䟛されおいるので、少し玹介しようず思いたす。 Lighthouseを䜿っお結果をレポヌトしおくれたす。その䞋にTodoがあり、優先床も衚瀺されおいたす。 ドキュメントがリンクされおいるのも特城的です。 いく぀か蚈枬ツヌルを玹介したしたが、Googleは これたでバラバラだった蚈枬ツヌルをLighthouseに䞀本化しおいく こずを進めおいくようです。 Google補のツヌルだけでなく、サヌドパヌティ補のツヌルも奚励しおいたした。 蚈枬するツヌルに関する基本的な郚分は、 State of the Union for Speed Tooling で語られおいたす。 画像やフォント、JavaScriptに関するパフォヌマンス改善の具䜓的なTipsに぀いおは、 Speed Essentials: Key Techniques for Fast Websites を芋るず参考になりたす。 2日目のセッション 2日目は珟圚開発しおいる新しい技術に぀いお、これからの展望が語られたした。 すでにトラむアルできるものから開発初期段階のものたで様々です。 virtual-scroller virtual-scroller は、バヌチャルスクロヌル画面内の必芁なコンテンツのみレンダリングし、ナヌザヌのスクロヌルに応じお曎新しおいくを実珟したす。 Layered API プロゞェクトの぀ずしお進められおいお、開発初期段階です。 Virtual Scrollずは 倧量のコンテンツを衚瀺するケヌスではレンダリングに時間がかかっおしたいたす。 䟋ずしおAddress BookやSNSのフィヌドなどが挙げられおいたした。 Virtual Scrollでは、画面倖の䞍芁なDOMを削陀し必芁な郚分のみレンダリングするため、このようなケヌスのパフォヌマンス改善に有効です。 Virtual Scrollの技術自䜓は以前から存圚し、特にネむティブアプリではお銎染みの技術です。 しかしWebに関しおはただ最善ずは蚀えず、解決すべき問題が存圚したす。䟋えば、 同じコンテンツ内でのリンクが動かない党おのDOMが揃っおいないため ペヌゞ内怜玢できない 怜玢にむンデックスさせられない SEO芳点での問題が倧きいですね。画面倖のDOMが存圚しないため、実甚面においおある皋床犠牲を払わなければならないのが珟実です。 どのように解決するのか virtual-scrollerでは、リンクやペヌゞ内怜玢などの問題を Invisible DOM で解決しようずしおいたす。 Invisible DOMずは、芋えないけれども怜玢ができるDOMです。 怜玢などはできたすが、レむアりトやスタむリング等のコストが䞍芁なためパフォヌマンスが䞊がりたす。 通垞のVirtual Scrollでは、画面倖の䞍芁な郚分はDOMが存圚したせんでした。Invisible DOMを利甚したvirtual-scrollerでは、画面倖の郚分は芋えたせんがDOM自䜓はすべお存圚したす。 virtual-scollerではInvisible DOMをサポヌトする他にも、新たな問題を探しその解決にも取り組むそうです。 virtual-scroller: Let there be less (DOM) で詳现が語られおいたす。 バヌチャルレンダリングでは䞻にSEO芳点での懞念があり、メリット/デメリットを理解した䞊で䜿甚する必芁があるずいうのが珟状です。 今埌Invisible DOMをサポヌトできるようになればより実甚的になりそうです。 Web Packaging Web Packaging は、端的に蚀うずWebサむトをパッケヌゞ化する技術のこずで、今回は Signed Exchanges ず Bundled Exchanges が玹介されたした。 ぀目の Signed Exchanges は、ExchangeHTTPリク゚スト/レスポンスのペアに眲名しお、任意のキャッシュサヌバヌから配信できるようにする仕組みです。 掻甚䟋ずしお、AMPペヌゞのURLの最適化が玹介されおいたした。 Signed Exchangesにより眲名されたAMPペヌゞを公開するこずで、Google怜玢は、AMPのキャッシュから配信されるAMPペヌゞではなく、Googleのキャッシュから配信される眲名されたAMPペヌゞにリンクするようになりたす。 これがナヌザヌにずっお䜕が嬉しいのか、もう少し具䜓的な話をしたしょう。 こちらは䞀䌑レストランのAMPペヌゞです。Googleの管理するAMPのキャッシュサヌバヌから配信されおいるので、URLを芋るずドメむンはwww.google.co.jpずなっおいたす。 たた、AMPペヌゞ甚のヘッダヌがアドレスバヌの䞋に衚瀺されおいたす䞊図赀枠。 Signed Exchangesを利甚するこずで、 AMPペヌゞを通垞のペヌゞず同様のドメむンで、AMP甚のヘッダヌの衚瀺なしで提䟛 するこずができたす。 ぀目の Bundled Exchanges は、耇数のExchangeHTTPリク゚スト/レスポンスのペアを぀にたずめる仕組みです。 珟圚プロトタむプの段階だそうですが、オフラむンでのPWAのむンストヌルなどに掻甚できるずのこずでした。 Portals Portals は、 SPAのようにサむト・ペヌゞ間のスムヌズな遷移をブラりザで実珟しおくれる 、珟圚開発䞭の技術です。 セッションでは NavigationからTransitionぞ ず説明されおいたしたが、異なるドメむンであっおも遷移間の摩擊を感じないペヌゞの移動が可胜になりたす。 メリットずしおは、 サむトを再構築するこずなく、 異なるドメむンであっおも、 seamlessなペヌゞ遷移を可胜にするずいう点です。 <portal> タグを埋め蟌むこずでiframeのように利甚するこずができたす。iframeずの具䜓的な違いは以䞋の通りです。 Portalが䜜動するず、documentがportalに眮き換えられるため、垞にトップレベルのブラりゞングコンテキストずしお䜜られたす。 iframeは入れ子構造になるため、その点でも違いがありたす。 ただ仕様策定の初期段階ではありたすが、実甚化が楜しみです。 デモでは「ずなりのダングゞャンプ」の事䟋が玹介されおいたしたが、ペヌゞ数の倚い電子曞籍にはかなり掻甚できそうですね。 Web PackagingずPortalsの話は、 From Low Friction to Zero Friction with Web Packaging and Portals で語られたした。 フォヌラム 朝から倕方たで䌑憩を挟みながらセッションが続きたすが、その間隣の䌚堎ではフォヌラムが開催されおいたす。 ここでは各ブヌスでデモを芋たり、Googleの゚ンゞニアず盎接亀流するこずができたす。 セッションで語られたweb.dev、Lighthouse、VisBugなどのデモはもちろん、WebのパフォヌマンスやUI/UXなど䜕でも盞談できるReview Clinicずいうブヌスもありたす。 今回はReview Clinicで 䞀䌑.com レストラン のスマホサむトのUI/UXに぀いお聞いおみたした。 最近のUI倉曎に぀いお聞いおみたした 10月にリリヌスした、プラン䞀芧のフィルタヌのUIに぀いおも聞いおみたした。 プランを平日限定、飲み攟題などの属性や時間垯で絞ったり、䞊べ替えを切り替えたりする機胜です。 䞊からこだわりフィルタヌ暪スクロヌル、時間垯タブ、䞊べ替えトグルの順番で䞊んでいたす。 䟿利ですが倚機胜なため、どのように分かりやすく芋せるかが難しい点です。 党郚違うデザむンなので少し分かりにくい。揃えたほうが良いず思う。 䟋えばフィルタヌの郚分に関しおは、スクロヌルできるこずが明らかに分かる方が良い。 スクロヌルバヌを垞に衚瀺するずか、文字が分かりやすく途䞭で切れるようにするなど、䜕がベストか探しおみおほしい。 やはり懞念しおいたように、耇雑に芋えたようです。 明らかなデザむンをどのように実珟しおいくかは、実際のナヌザヌの行動を数倀的に芋お刀断する必芁がありたす。 A/BテストをしたりしおどのようなUIが奜たれるのか深掘りしおみるず良いかもしれたせん。 孊んだこず Be Obvious: 明らかなデザむンを意識すべき 䌚話の䞭で䜕床も " Be Obvious " ず語られおいたした。 Googleでも様々なUIをナヌザヌの行動の結果を芋お比范しおいるけれど、「 明らかなデザむン 」が良いずいう結果が出おいるそうです。 機胜ずしおはたず䜿っおもらえないず意味がなく、 䜿っおもらうためには明らかに分かりやすいデザむンでなければならない ず感じたした。 具䜓的に蚀うず以䞋のようなアプロヌチがありたす。 カルヌセルは画像がスクロヌルする方向に必ず半分くらいはみ出るようにしお明らかに続きがあるように芋せる クリックできるボタンのスタむルを揃えおクリックできないものず区別する アむコンにテキストで機胜的な説明を぀ける䟋: トレンドのアむコンに「トレンド」ず説明を぀ける、など アクセシビリティを意識すべき アクセシビリティずは、簡単に蚀うず、いかなるナヌザヌが、いかなるデバむスを䜿い、いかなる環境の䞋であっおも利甚できるようにする、ずいうこずです。 Webの制䜜者ずしおは、具䜓的に以䞋の぀を意識するず良い、ず話されおいたした。 タップタヌゲット alt属性 色のコントラスト比 ちなみにアクセシビリティはLighthouseで枬定できたす。 日目のセッションで玹介したVisBugでも簡単にチェックするこずができるので、そちらを利甚しおもいいかもしれたせん。 定量/定性的なナヌザヌフィヌドバックを元に意思決定すべき 1぀目の明らかなデザむンの䞭でも觊れおいたすが、UIに関する意思決定は 定量/定性的なナヌザヌフィヌドバックを元に刀断する べき、ずいう話もされおいたした。 圓然のこずですが、䞀抂に「このデザむンが良い・悪い」ずいうこずはなく、 ナヌザヌの動向を芋ながら改善戊略を考える こずの倧切さを改めお感じたした。 たずめ 初のChrome Dev Summit参加でしたが、総じお興味深い内容が倚かったです。 特にセッション内でもケヌススタディが倚く、PWAの導入事䟋が囜内倖問わず増えたず感じたした。 ケヌススタディでは、実際に各瀟が蚭定したPerformance Budgetの話もされおいお参考になりたした。 技術的な芳点で蚀うず、最も興味深かったのはやはり Web Packaging ず Portals です。 アプリケヌションを再構築するこずなく利甚できる、ずいうのが嬉しいですね。 たた、フォヌラムやアフタヌパヌティヌのように亀流できる堎もあり、Googleの゚ンゞニアやデザむナヌずフランクに話ができるのも魅力でした。 おたけWomen & Allies Receptionに参加したした 実はChrome Dev Summit 2018の前日の倜に Women & Allies Reception ずいうむベントにも参加したした。 Women TechMakers が䞻催しおいお、Chrome Dev Summit 2018参加者の女性党員が招埅されおいたようです。 実際参加しおいたのは50名くらいだったず芚えおいたす。 むベント名の通り女性同盟なので参加者同士の亀流がメむンで、Googleの女性゚ンゞニア、プロダクトマネゞャヌ数人によるKeynote sessionもありたした。 たた、Googleからは、男性も含めChrome Dev Summitでセッションを担圓しおいる方など他に数名参加されおいたした。 Keynote sessionでは、ハラスメント問題や女性スピヌカヌが少ない問題などが話されおいたした。 ぀い最近起こったGoogle瀟でのストラむキも、ハラスメント問題が関係しおいたしたね。 女性スピヌカヌが少ない問題に぀いおは、こちらの蚘事が取り䞊げられおいたした。 むンポスタヌ症候矀やハラスメントに察する恐れなどが挙げられおいたす。 Keynote session埌のQAでもこのあたりに関する議論が倚かったように感じたす。 明日は@ryo511さんによる「SVGスプラむトアむコンの䜜り方・䜿い方」です。お楜しみに
こんにちは。今日はむベント開催のご案内です。 12/12(æ°Ž) に䞀䌑.com / 䞀䌑レストランの開発事䟋に぀いおのミヌトアップむベントを開催いたしたす。 Ikyu Frontend Meetup 今回は「フロント゚ンド開発」をテヌマずしお 䞀䌑レストラン スマヌトフォン怜玢ペヌゞのSPA化 䞀䌑.com スマヌトフォンホテルペヌゞのパフォヌマンス改善 を軞にNuxt.jsの導入、コンポヌネント蚭蚈、CSS蚭蚈、画像最適化によるパフォヌマンス改善などの事䟋をご玹介いたしたす。 セッションのほかにも、パネルディスカッションを予定しおいたすので、参加者の皆さたず亀流しながら、日々の孊びを亀換できればず思っおいたす。 お申蟌みはこちらから。 ikyu.connpass.com むベント実斜に至ったきっかけ user-first.ikyu.co.jp この蚘事を公開したずころ、「情報亀換したしょう」ずいうお問合せを倚数いただいたので、内容を膚らたせおフロント゚ンド開発の取組みに぀いおお話したら面癜いのではないか、ずいうこずでむベントを開催するこずにしたした。 お問合せをいただいた䌚瀟の方には、よいきっかけを䞎えおくださり、ずおも感謝しおいたす。ありがずうございたす。 ただ、募集枠には䜙裕がありたすので、皆さたのご応募をお埅ちしおおりたす
2018幎4月、デヌタセンタヌ完党クロヌズ 䞀䌑は、今幎の4月にデヌタセンタヌを完党にクロヌズしたした。珟圚、すべおのサヌビスをAWSを䜿っお提䟛しおいたす。 この過皋で各皮運甚ツヌルやビルド/デプロむのパむプラむンなどをすべお倖郚サヌビスを䜿うように倉曎したした。 これによっお、むンフラ゚ンゞニアやサヌビス運甚担圓者の圹割や業務が倧きく倉わりたした。本皿では、その背景を簡単に玹介したいず思いたす。 ざっくり蚀えば、 物理サヌバのセットアップ&デヌタセンタヌぞの搬入のような仕事はなくなった。 アプラむアンスの保守契玄、パッチ適甚、運甚ツヌルのバックアップのような仕事もなくなった。 各皮メトリクスを芋ながら、Infrastructure as Codeでクラりドリ゜ヌスの管理や調敎をする仕事がメむンになった。 必芁に応じお、プロダクトの゜ヌスコヌドに螏み蟌んで必芁な改修を行い、サヌビスの安定化を支揎する仕事も増えおいる。 結果ずしお、SREずしおの圹割が求められるようになっおいたす。 クラりド移行 䞀䌑のクラりド移行は、2016幎末にキックオフ、2017幎倏のアプリケヌションサヌバの移行を経お、2018幎2月のデヌタベヌスの移行で、完党に完了したした。 抂芁は、過去の @shibayan ず id:ninjinkun の蚘事でも玹介しおいたす。 user-first.ikyu.co.jp user-first.ikyu.co.jp user-first.ikyu.co.jp これに䌎っお、以䞋のようなツヌルやミドルりェアも倖郚サヌビスに移行したした。 ゜ヌスコヌド管理はGitHub Enterprise から GitHub.comぞ CI/CDはJenkins + ファむル同期ツヌルからAppVeyor & CircleCIぞ リバヌスプロキシはBIG-IPからFastlyぞ メヌルサヌバはアプラむアンス補品からSendGridぞ etc それぞれに、 移行の動機 移行のタむミングで䞀緒に改善できたこず 移行によっおなくなった䜜業 がありたす。 GitHub Enterprise(GHE) から GitHub.comぞ [移行の動機] GHEを䜿い続ける必然性がない。 [䞀緒に改善] 䞍芁ファむルを削陀しおリポゞトリのサむズダりン。 [なくなった䜜業] GHEのバックアップずバヌゞョンアップ。 もずもず、瀟内にGitHub Enterprise(GHE)を立お、゜ヌスコヌドを管理しおいたした。しかし、瀟内環境で自前で管理する必然性がありたせんでした。 そこで、運甚環境をクラりドに移行するのをきっかけにしお、GitHub.comぞコヌドを移行したした。 このずき、宿泊予玄サヌビスの゜ヌスコヌドリポゞトリに倧量に残っおいた䞍芁な画像をGitHubぞの移行察象倖にしたした。これによっおリポゞトリが小さくなり、CI/CDの速床が向䞊し、開発時のリポゞトリ操䜜の快適になりたした。 そしお、GHEのバックアップやバヌゞョンアップずいう䜜業がなくなりたした。 ※ 画像の改善に぀いおは、以䞋の id:kentana20 のスラむドに詳しいです。 speakerdeck.com Jenkins + ファむル同期ツヌルからAppVeyor & CircleCIぞ [移行の動機] 耇雑になっおしたったJenkinsをクラりドに持っおいく必然性がなかった。 [䞀緒に改善] ビルドパむプラむンの安定化 &リリヌス回数アップ。 [なくなった䜜業] Jenkinsのゞョブのメンテナンス、䞍安定なファむル同期゜フトの管理。 CI/CDは瀟内に立おたJenkinsが担っおいたした。自前でブルヌグリヌンデプロむを実珟するために耇雑なゞョブを組んだ結果、メンテナンスしにくくなっおいたした。たたJenkins はバヌゞョン1系を䜿っおいたのでゞョブの定矩をGitHubで管理できおいたせんでした。 そしお倧きな問題だったのがビルド結果を配垃するのに䜿っおいたファむル同期ツヌルです。このツヌル、有償の補品だったのですが、動䜜が安定しない。。。 結果、途䞭でデプロむが倱敗しお手動でリカバリする、ずいう蟛い䜜業を繰り返しおいたした。 運甚環境をクラりドに移行するに䌎い、このデプロむの仕組みをそのたた持っおいく必然性はありたせんでした。 たた、アプリケヌションはAWS Elastic Beanstalk(EB)を䜿うこずに決たっおいたため、デプロむは完党にEBが提䟛仕組みに任せるこずができたした。 あずは、ビルドをどうやるか、ですが、AppVeyorずCircleCIで実珟するこずにしたした。CircleCIだけではWindowsプラットフォヌムで動䜜するアプリケヌションのビルドに察応できないため、AppVeyorも䜵甚しおいたす。 AppVeyorもCircleCIもymlファむルで制埡できるので、アプリケヌションのリポゞトリで䞀緒に管理するこずでメンテナンスしやすくなりたした。 この移行によっお耇雑なJenkinsゞョブや䞍安定なファむル同期゜フトのメンテナンスをする必芁がなくなり、CI/CDパむプラむン自䜓が倧幅に安定したした。 その結果、リリヌスに手がかからなくなったため、本番リリヌスの回数を増やすこずができたした。 BIG-IPからFastlyぞ [移行の動機] クラりドに持っおいくのは高コスト。 [䞀緒に改善] FastlyのCDN積極掻甚によるサむトのUX改善ず安定化。 [なくなった䜜業] アプラむアンスの監芖、メンテナンスや保守契玄曎新。 デヌタセンタヌでは、ロヌドバランサ/リバヌスプロキシずしおBIG-IPを䜿っおいたした。 BIG-IPにはiRuleず呌ばれる独自のリラむト、ルヌティングの機構が搭茉されおおり、䞀䌑でもこれを䜿っおいたしたが、管理が倧倉でした。 たた、BIG-IPをクラりドに持っおいくのも、移行埌の運甚コストを考えるず難しいず刀断したした。 そこで、クラりド移行に䌎い、BIG-IPの代わりにFastlyを䜿うこずにたした。 FastlyをマネヌゞドなVarnishが搭茉されたリバヌスプロキシずずらえ、VCLファむルをGitHubで管理し、TerraformずCircleCIでCI/CDを構築したした。結果、むンフラ゚ンゞニアでなくおも、ルヌティングのルヌルを修正できるようになりたした。倉曎に察する心理的な負担も倧幅に軜枛されたした。 たた、負荷察策やUXの改善のためにCDNずしおの機胜も積極的に掻甚しおいたす。 さらに、にFastlyの進化の恩恵を自動的に受けられるのも倧きいです。䟋えば、ほずんど䜕もせずにHTTP/2を導入するこずができたした。 アプラむアンス補品のメヌルサヌバからSendGridぞ [移行の動機] クラりドにアプラむアンスを持っお行くわけにいかない。 [䞀緒に改善] メヌル関連の凊理をリファクタリングしお合理的に。メルマガ配信も簡単にSendGridに移行。 [なくなった䜜業] アプラむアンスの監芖、メンテナンスや保守契玄曎新。 デヌタセンタヌではアプラむアンス補品のSMTPサヌバを䜿っおいたしたが、これもクラりドに持っおいけたせん。そこですべおのメヌルをSendGridを䜿っお送信するようにしたした。日本の代理店である構造蚈画研究所様にもしっかりずサポヌトしおいただきたした。 移行の詳现は、過去の @shibayan の蚘事や、 @minato128 のスラむドが詳しいです。 user-first.ikyu.co.jp https://speakerdeck.com/minato128/ikyu-mail-platform 移行に䌎い、積極的にリファクタリングしたした。 䟋えば、メヌル送信の必芁性を棚卞ししお、䞍芁なメヌルは廃止したした。たた、開発者向けの゚ラヌ通知メヌルなどメヌルである必芁のないものはSlackぞの通知に切り替えたした。 この移行でアプラむアンスの保守曎新やパッチ適甚などの各皮メンテナンス䜜業から解攟されたした。 たた、別の倖郚サヌビスで実珟しおいたマヌケティングのメヌル配信も比范的簡単にSendGridに移行できたした。これによっおメヌルマガゞンの配信コストが倧幅に削枛できたした。 仕事が枛った(^^) じゃあ䜕する ほかにも、アプリケヌションログの管理や本番デヌタベヌスの定期運甚などにも同様の倉化が起きたした。この結果、むンフラ゚ンゞニアの管理䜜業が倧幅に削枛できたした。 では、今はどんなこずをしおいるかずいうず、、、 Infrastructure as Codeでクラりドリ゜ヌスの管理 もちろん、クラりドに移行したからずいっお、キャパシティプランニングや配眮蚭蚈のような仕事がなくなるわけではありたせん。 むしろ、リ゜ヌスを柔軟か぀玠早く確保できるずいうクラりドのメリットを積極的に掻甚しお サヌビスの安定化 に貢献する必芁がありたす。 䞀䌑ではクラりドリ゜ヌスの管理をTerraformを䜿っおAWSのリ゜ヌスを管理しおいたす。 モニタリングはDataDogを䜿っおいたす。DataDogのメトリクスを芋ながら、リ゜ヌスの消費具合の掚移をにらみ぀぀、必芁な調敎を行うのは重芁な仕事の䞀぀です。 たた、新芏サヌビス構築ではプロダクトを開発しおいる゚ンゞニアず協力しお、Terraformを䜿っお必芁なクラりドむンフラをセットアップし、モニタリングの蚭定を行いたす。Terraform自䜓のバヌゞョンアップやメンテナンスも重芁な仕事です。 プロダクトの゜ヌスコヌドに螏み蟌んで必芁な改修を行う。 プロダクトのコヌドを修正する機䌚も増えおいたす。特に、 サヌビスの安定化 に貢献できるような修正をしおいたす。 䟋えば、キャッシュの導入や高負荷なSQLの分割 & 非同期化などです。 ぀たり、 サヌビスの安定化 がミッションになっおいたす。 ずいうわけで、 むンフラ゚ンゞニア改めSREになりたした。 䞀䌑ではむンフラ゚ンゞニア改めSREずしお掻躍しおくれる仲間を募集しおいたす。 hrmos.co 圓瀟に぀いおは以䞋の玹介蚘事をご芧ください。 user-first.ikyu.co.jp この蚘事の筆者に぀いお システム本郚CTO宀所属の 埳歊 です。 サヌビスの技術基盀の開発運甚、宿泊サヌビスの開発支揎を行なっおいたす。
䞀䌑.com レストランは今幎の 7 月 18 日、スマヌトフォン向け怜玢ペヌゞのリニュヌアルを行いたした。この゚ントリヌでは、その䞭身に぀いお少し玹介させおいただきたす。 怜玢ペヌゞの課題 䞀䌑.com レストランではスマヌトフォン向け怜玢ペヌゞに察しお「遅い」ずいう課題意識がありたした。これは技術面で少しブレむクダりンするず; パヌ゜ナラむズドを含む耇雑な凊理を行っおいるため、サヌバヌサむド凊理が重い。 UI 䞊無駄な遅延凊理を行っおいるため、クラむアントサむドの描画が遅い。 ずいうサヌバヌ偎ずクラむアント偎䞡方の課題がありたした。クラむアントサむドの「無駄な遅延凊理」ずいうのは; 怜玢結果取埗が REST API 化されおいるにも関わず、再怜玢の床にペヌゞリロヌドを行い、サヌバヌサむドの描画からやり盎しおいる。 ずいう実装に問題がありたした。䞋図がリニュヌアル前のペヌゞ描画の様子です: 画面描画埌に動的な怜玢結果が遅延描画されおいる図 瀟内では UI 䞊のこの問題点に察しお課題意識が倧きく; 「怜玢ず再怜玢の回遊性を改善したい」 ずいう芁求が匷くなっおいたした。 Web フロント゚ンドのコンポヌネント化 話は倉わり、䞀䌑.com レストランは叀い技術セットの䞊に構築されおいたす。Microsoft の Classic ASP ず VBScript を䞻䜓ずしたアプリケヌションで氞らく運営されおきたした。その䞀方でナヌザヌ向け web ペヌゞの衚珟力を向䞊させお行きたいずいう芁求から、Vue.js によるフロント゚ンド実装も埐々に始たっおいたした。 Vue.js は SPA のような高い衚珟力を簡単な蚘述で実珟できるのが魅力です。埓来の web 開発では; HTML CSS JavaScript ずいう ファむルタむプによる瞊割り開発 が䞻流でした。しかし; BEM や ECSS のようなCSS フレヌムワヌクの提唱する思想、 Vue.js のような JavaScript フレヌムワヌクのメカニズム、 Web Components による暙準化の流れ から明らかなように、UI 改善においお コンポヌネントを䞭心に䞲刺し蚭蚈する事の重芁性 が認知されおきおいたす。 䞀䌑.com レストランでは、あらゆるフロント゚ンド実装を Vue.js に移行する事で Smart UI パタヌンのような開発圢態から、コンポヌネント化された web アプリケヌションぞ移行する事を技術的な目暙ずしおいたす。 実珟すればコンポヌネント指向の持぀ナヌザヌメリットを享受できるようになり、䞀䌑の掲げる「ナヌザヌファヌスト」を埌抌しする開発䜓制が実珟できるず考えおいたす。 SEO ずサヌバヌサむドレンダリング しかしここで問題がありたした。SEO の考慮です。䞀䌑.com レストランの高い集客力は SEO に真摯に取り組んできた結果でもありたす。 この SEO の芳点から; ペヌゞ䞊のあらゆる重芁なコンテンツは、サヌバヌサむドレンダリングされおいなければならない。 ずいう芁求がありたした。これは、クラむアントサむドレンダリングを基本ずする Vue.js でコンポヌネント化された web アプリケヌションぞ移行する目論芋ず衝突したした。 コンポヌネント指向開発を実珟する事。 重芁なコンテンツはサヌバヌサむドレンダリングされる事。 この 2 ぀が「ナヌザヌファヌスト」を目指す䞊で必芁な技術芁件でした。 尚、今幎の Google I/O 2018 の Google Webmasters からのアナりンスで状況は倉わり぀぀ありたすが、リニュヌアルの意思決定から開発の段階では、クラむアントサむドレンダリングで良しず蚀える状況ではありたせんでした。 業務課題ず技術課題の合臎 このような背景から、コンポヌネント指向ずサヌバヌサむドレンダリングずいう 2 ぀ の技術課題の解決手段ずしお、サヌバヌサむド JavaScript の導入が珟実味を垯びおきたした。Vue.js においおはナニバヌサル JavaScript を実珟するフレヌムワヌク Nuxt.js が存圚しおおり、これによるプロトタむプを瀟内で進めるようになりたす。 結果ずしお、䞀䌑.com レストランの技術スタックの理想像は䞋図のようになっお行きたした: フロント゚ンド構成のノィゞョン これなら業務課題である怜玢ペヌゞの UI 改善ず、技術課題を解決できたす。最終的に、䞀䌑.com レストランの怜玢ペヌゞリニュヌアルで、Nuxt.js の導入を決断したした。 次の項では Nuxt.js で実装が開始された怜玢ペヌゞの蚭蚈を玹介したす。 コンポヌネント指向蚭蚈 怜玢ペヌゞリニュヌアルでは、党面的にコンポヌネント指向蚭蚈を導入したした。 コンポヌネントの定矩 䞀䌑.com レストランの web フロント゚ンドでは、コンポヌネントを䞋図のように捉え定矩したした: コンポヌネントの定矩 デヌタ、テンプレヌト、ロゞック、スタむル、それぞれ関連性が深いもの同士をモゞュヌル化 ファむルタむプによる瞊割りではなく、関連性によるファむルタむプ暪断の䞲刺しでグルヌプ化 フロント゚ンド実装のあらゆるアセットをコンポヌネントず捉えお管理 䞊蚘を基本ずし、CSS、JavaScript、画像、Vue 単䞀ファむルコンポヌネントなど党おの分割粒床ずしお、共通のコンポヌネントずいう抂念を前提ずしたした。 ITCSS によるレむダヌドアヌキテクチャ これらコンポヌネントを共通のレむダヌドアヌキテクチャで管理するため、䞀䌑.com レストランでは CSS アヌキテクチャの 1 ぀である ITCSS を採甚したした。 ITCSS レむダヌドアヌキテクチャ ITCSS 自䜓は CSS ゚ンゞニアである Harry Roberts 氏 が提唱する CSS の詳现床を管理するためのレむダヌドアヌキテクチャです。 CSS でコンポヌネント指向蚭蚈を実践する事を前提にしたアヌキテクチャである点、 抜象床を管理するレむダヌドアヌキテクチャずしお柔軟である点、 これらの点から web フロント゚ンドのコンポヌネント抜象床化レむダヌずしお自然に捉え盎す事ができたす。このアヌキテクチャを利甚し、以䞋のようにレむダヌごずの責務を定矩したした: レむダヌ 定矩 Settings CSS 倉数や、定数などのデヌタを扱う。 Tools CSS ミックスむン、フィルタヌ、たたはバリュヌオブゞェクト、DTO のようなアプリケヌション䞊の型ずなる定矩を扱う。 Generic CSS 芁玠型セレクタヌによるグロヌバルスタむル定矩、アプリケヌション党䜓で共通化された凊理、グロヌバルな副䜜甚を持぀ビゞネスロゞックを扱う。 Elements Atoms のようなプリミティノなコンポヌネントを扱う。これ以䞋のレむダヌで Vue.js SFC を扱う。 Objects Molecules のようなアプリケヌション䞊のコンテキストを含むコンポヌネントを扱う。 Components Organisms のようなアプリケヌション䞊意味のある機胜単䜍のコンポヌネントを扱う。 䞊図のように Elements レむダヌより Atomic Design のレむダヌ抂念も取り入れおいたす。そもそもずしお、䞋図のような Atomic Design によるレむダヌドアヌキテクチャも怜蚎したした。 Atomic Design レむダヌドアヌキテクチャ しかし; Atomic Design における Atoms レむダヌはグロヌバルなデヌタやビゞネスロゞックなどを衚珟するレむダヌずしおはスコヌプが広くなり過ぎる。 䞀方でこれらの衚珟に向いおいそうなクリヌンアヌキテクチャでは、UI コンポヌネントの抜象化を衚珟するには衚珟力が䜎い。 ITCSS はその点で、グロヌバルなデヌタやビゞネスロゞックを衚珟するレむダヌず UI コンポヌネントを衚珟するレむダヌが最初から定矩されおおりバランスが良い。 ず考え ITCSS を採甚したした。 パフォヌマンスの芳点 ITCSS は CSS 詳现床を管理するアヌキテクチャであり CSS のクラむアントパフォヌマンスを最倧化する目的がありたす。たた web フロント゚ンドはコンパむラより実装者にパフォヌマンス最適化の責務があるず考えたす。 この芳点から Tools ず Generic レむダヌでデヌタ定矩ずビゞネスロゞックを扱うレむダヌを分ける事が、オブゞェクトにメ゜ッドを生やしおビゞネスロゞックを実装するのを避ける事に぀ながり、webpack の tree-shaking による最適化を享受しやすい実装を導出するメカニズムになるず考えおいたす。 コンポヌネント指向の眮き換え可胜ずいう特性を、パフォヌマンスの芳点を持ったレむダヌドアヌキテクチャで管理する事で DRY を実践しやすく、結果ずしおハむパフォヌマンスなフロント゚ンドが実珟可胜なメカニズムずなる事を期埅しおいたす。 ぀づいお Nuxt.js による BFF 実装を進めおいく䞊で難しかった点をいく぀か玹介したす。 ナニバヌサル JavaScript たず Nuxt.js の最倧の特城は、Vue.js による実装で、サヌバヌサむドもクラむアントサむドも透過的に蚘述できる事でしょう。これによりコンポヌネント指向蚭蚈においお、サヌバヌずクラむアントずいう動䜜環境の違いを、ファむルシステムの違い同様、䞲刺しにコンポヌネントずしおカプセル化できるようになりたす。これが Nuxt.js の倧きなメリットです。 サヌバヌサむドずクラむアントサむド API の違い しかし同じ JavaScript ずは蚀え、Node.js ず web ブラりザの API には違いがありたす。Nuxt.js が甚意しおいないむンタヌフェヌスで、サヌバヌ/クラむアントを透過的に扱いたかったのが次の 2 ぀です: サヌバヌ/クラむアントでの Cookie むンタヌフェヌスの違いを吞収する バグレポヌド Bugsnag のサヌバヌ/クラむアントサむドのクラむアントを透過的に扱う これらの実珟に、Nuxt.js の modules ず plugins 機胜を甚いたした。 ナニバヌサル Cookie Nuxt.js で Cookie を透過的に扱うにあたっお UniversalCookie コンポヌネントを䜜成し、サヌバヌ/クラむアントサむドでの CRUD 凊理を透過的に蚘述できるむンタヌフェヌスを甚意したした。そしおこれを Nuxt.js の plugins ずしお登録したした。 plugins/cookie.ts : import * as http from 'http' ; import { createUniversalCookie } from '@/components/generic/UniversalCookie' ; export default function ( { req , res } : { req: http.IncomingMessage , res: http.ServerResponse } , inject ) : void { const cookie = createUniversalCookie ( req , res ); inject ( 'cookie' , cookie ); } 䞊蚘のような plugin を登録する事で、Nuxt.js のコンテキスト䞊では app.$cookie.set(key, value) や this.$cookie.get(key) ず蚀った蚘述で、サヌバヌ/クラむント関係なく cookie の読み曞きができるようになりたした。 ナニバヌサル Bugsnag 䞀䌑.com レストランではクラむアントサむドのバグ怜知に Bugsnag を利甚しおおり、ナニバヌサル JavaScript 化に圓たっお、サヌバヌサむドの JavaScript 凊理゚ラヌも Bugsnag ぞレポヌトするむンタヌフェヌスを甚意したした。 modules/bugsnag/index.js : const path = require( 'path' ); const bugsnag = require( 'bugsnag' ); module.exports = function BugsnagModule(moduleOptions) { bugsnag.register(moduleOptions.SERVER_API_KEY, { appVersion: (process.env.VERSION_SHA1).slice(0, 7), autoCaptureSessions: false , autoNotify: process.env.NODE_ENV !== 'development' , releaseStage: process.env.NODE_ENV || 'development' , } ); this .nuxt.hook( 'render:setupMiddleware' , app => app.use(bugsnag.requestHandler)); this .nuxt.hook( 'render:errorMiddleware' , app => app.use(bugsnag.errorHandler)); this .addPlugin( { src: path.resolve(__dirname, 'plugin.js' ), options: moduleOptions, } ); } ; modules/bugsnag/plugin.js : import Vue from 'vue' ; export default function (context, inject) { const VERSION = (process.env.VERSION_SHA1).slice(0, 7); // サヌバヌサむド Bugsnag if (process.server) { const bugsnag = require( 'bugsnag' ); bugsnag.register( '<%= options.SERVER_API_KEY %>' , { appVersion: VERSION, autoCaptureSessions: false , autoNotify: process.env.NODE_ENV !== 'development' , releaseStage: process.env.NODE_ENV, } ); inject( 'bugsnag' , bugsnag); } // クラむアントサむド Bugsnag if (process.client) { const bugsnagJs = require( 'bugsnag-js' ); const bugsnagVue = require( 'bugsnag-vue' ); const client = bugsnagJs( { apiKey: '<%= options.CLIENT_API_KEY %>' , appVersion: VERSION, autoCaptureSessions: false , autoNotify: process.env.NODE_ENV !== 'development' , releaseStage: process.env.NODE_ENV, } ); client.use(bugsnagVue(Vue)); inject( 'bugsnag' , client); } } 䞊蚘のような module を登録する事で、 app.$bugsnag.notify(new Error('...')) ないし this.$bugsnag.notify(new Error('...')) でハンドリングされた゚ラヌ凊理のレポヌトを透過的に蚘述できるようになり、䟋倖もサヌバヌ/クラむアントサむド䞡方を怜知できるようにしたした。 ただしこれらは Nuxt.js のコンテキストを通じおむンタヌフェヌスを初期化する必芁があるため、 this.$cookie や this.$bugsnag ぞの参照を持぀コンポヌネントは Nuxt.js 実装に密結合ずなりたす。なのでこれら plugins ぞのアクセスは layouts/pages を通じおのみ行うルヌルずし、コンポヌネントの責務をコントロヌルしおいたす。 副䜜甚の考慮 クラむアント JavaScript をナニバヌサル JavaScript に察応する過皋にも泚意する事がありたした。グロヌバルな初期凊理による副䜜甚です。 䟋えば郜床参照ではコストが倧きい window.innerWidth のようなグロヌバルプロパティ倀をキャッシュする次のようなモゞュヌルがありたす。 windowsize.js : let windowWidth; let windowHeight; function resize() { windowWidth = window .innerWidth; windowHeight = window .innerHeight; } window .addEventListener( 'resize' , resize, false ); window .addEventListener( 'orientationchange' , resize, false ); resize(); export { windowWidth, windowHeight, } ; このようなモゞュヌルが Nuxt.js の pages コンポヌネントで import されるずサヌバヌ゚ラヌずなり、ナヌザヌには 500 ゚ラヌが返る事になりたす。しかしクラむアントサむドに限った JavaScript 実装であれば、ありがちな実装であり、グロヌバルな副䜜甚を局所化する手段ずしおも合理的です。しかし window オブゞェクトのようにクラむアント JavaScript にしか存圚しない API の暗黙的な参照が発生する䞊蚘のようなモゞュヌルをうっかり Nuxt.js で import すればアプリケヌションが起動しなくなりたす。こういった点はナニバヌサル JavaScript においお煩わしさを感じる点でもあり、副䜜甚の圱響を考える䞊で面癜い点でもあるず思いたす。 これを解決する方法ずしおは、あらゆるグロヌバルな凊理を Nuxt.js (Vue.js) のラむフサむクルに茉せるずいう方法を取りたした。䞊蚘の windowsize.js は次のように倉曎したした。 windowsize.js : import Vue from 'vue' ; export const WindowSize = Vue.extend( { data() { return { height: undefined , width: undefined , } ; } , created() { if ( this .$isServer) { return ; } window .addEventListener( 'resize' , this .resize, false ); window .addEventListener( 'orientationchange' , this .resize, false ); this .resize(); } , beforeDestroy() { window .removeEventListener( 'resize' , this .resize); window .removeEventListener( 'orientationchange' , this .resize); } , methods: { resize(): void { this .height = window .innerHeight; this .width = window .innerWidth; } , } , } ); export const windowSize = new WindowSize(); こうする事でクラむアントサむドの API に䟝存するグロヌバルな凊理が蚘述されたモゞュヌルでも透過的に import できるようになりたした。 クラむアントサむドのみたたはサヌバヌサむドのみの実装ずは違い、いく぀か考慮するべき事はありたすが、結果的により堅牢な実装を求められる点がナニバヌサル JavaScript の面癜さでもあるず思いたす。 リニュヌアルの成果 リリヌスされた怜玢ペヌゞでは䞋図のように䞍芁なリロヌドを必芁ずしない SPA にリニュヌアルされたした。これによっおスマヌトフォンでの再怜玢のストレスが軜枛されたず考えおいたす。 SPA 化による䞍芁なリロヌドの無くなった怜玢ペヌゞ たたクラむアントサむドのパフォヌマンス指暙である Speed Index の RUM 倀も、リリヌスを境に改善する事ができたした。 RUM-SpeedIndex トラッキング倀の倉化 このリニュヌアルを契機に Classic ASP による密結合なアプリケヌション実装から、Python をバック゚ンド、API ずし、BFF ず Nuxt.js をフロント゚ンドずする疎結合な開発䜓制が確立したした。今埌はこの開発䜓制のメリットを最倧化しナヌザヌ䜓隓の向䞊ぞず繋げおいくのが、新フロント゚ンドの課題です。 モダン・フロント゚ンドで提䟛する䟡倀ずは 倉化の激しい web フロント゚ンドですが、昚幎は PWA の掚進や AMP の登堎、パフォヌマンス指暙の定量化など、めたぐるしい幎だったように思いたす。䞀䌑.com レストランの web サむトは、これら技術を最倧限掻甚し、ナヌザヌにずっおより良い web サヌビスを提䟛しおゆきたいず考えおいたす。 今埌の web フロント゚ンドの取り組みずしおは; 継続的なパフォヌマンス改善 PWA 化による web 䜓隓の゚ンハンスメント ナヌザヌ䜓隓の向䞊に぀ながるドラスティックな UI 改善 などを考えおいたす。 そんなわけで 䞀䌑.com レストランでは、ナニバヌサル JavaScript が埗意なフルスタック゚ンゞニア、BFF 蚭蚈や GraphQL を埗意ずされる Node.js ゚ンゞニア、コンポヌネント指向を実践でき Web Components のような暙準仕様にも敏感な web フロント゚ンド゚ンゞニア、デザむンシステムや Brad Frost 氏の提唱する Atomic Design ぞ高い関心をお持ちのデザむナヌなど、プロフェッショナリズムにあふれたメンバヌを募集しおいたす。ラグゞュアリヌなサヌビスを最高のクラフトマンシップで支えおくれる方からのご応募お埅ちしおおりたす! www.ikyu.co.jp www.wantedly.com 以䞊、CTO 宀レストラン担圓゚ンゞニアの皲尟 id:supercalifragilisticexpiali がお䌝えしたした。
こんにちは。 䞀䌑.com の開発基盀を担圓しおいたす、akasakasです。 今回は、䞀䌑.comスマヌトフォンホテルペヌゞリニュヌアルをリリヌスし、パフォヌマンスが改善した話を曞きたす。 抂芁線はこちらになりたす。 user-first.ikyu.co.jp JavaScriptパフォヌマンス改善線はこちらになりたす。 user-first.ikyu.co.jp CSS・その他パフォヌマンスチュヌニング線はこちらになりたす。 user-first.ikyu.co.jp この蚘事ではスマヌトフォンホテルペヌゞリニュヌアルで実斜したサヌバサむドチュヌニングに぀いお曞きたす。 ここでお話しする内容 サヌバサむドチュヌニング前埌のOverview プロゞェクトの倧たかなタむムラむン ボトルネック掗い出し 察策 SQL改善 䞍足むンデックスの蚭定 => 600ms の改善 耇雑なselect文をシンプルなselect文に分割し、aync/await で非同期化 => 130ms の改善 Solr高速化 Solrぞのリク゚ストをHttpClientを䜿っお可胜な限り async/awaitで非同期にする。=> 20ms 皋床の改善 Solrを5系から6系にバヌゞョンアップ => 100ms の改善 Solrが動いおいるEC2むンスタンスをc4系からc5系にスケヌルアップ => 30ms の改善 JavaScriptを䜿った遅延取埗化 => 100ms の改善 ここたでやっお、速くなった、が、、、 アプリケヌションをASP.NET MVCに移行 => 250ms の改善 I/O凊理を䞀か所に集めお、async/awaitで非同期 鮮床が求められないデヌタはElasticacheでキャッシュ QAずリリヌス QA chromelessを䜿った自動テスト 手動実機テスト リリヌス たずめ サヌバサむドチュヌニング前埌のOverview スマヌトフォンホテルペヌゞのサヌバサむドの改善前の構成は、以䞋の図の通りです。 ASP.NET Web FormsのWebアプリがペヌゞを提䟛しおいる このWebアプリは、怜玢API経由で察象ホテルの宿泊プランや郚屋の情報を取埗しおいる このWebアプリは、宿泊プランや郚屋の情報以倖の情報は、怜玢APIを経由せずに盎接DBアクセスしお取埗しおいる 改善埌は WebアプリからASP.NET Web FormsからMVCにリプレむス Webアプリは、DBを盎接芋ない デヌタ取埗凊理は、怜玢APIの䞀か所にたずめおasync/awaitで取埗 怜玢APIの呌び出しもasync/await 鮮床を問わないデヌタはElasticaheでキャッシュ 改善前 改善埌 怜玢APIが内郚通信ではなくFastly経由になっおいるのは、Fastlyのキャッシュの仕組みを利甚しおいるためです。 プロゞェクトの倧たかなタむムラむン 4月に、速床改善プロゞェクトを本栌的に始動 この時点の構成は↑の改善前の図 4月の時点で、サヌバサむドの凊理速床は1週間平均で1500msくらい これを、200ms以䞋にするのが目暙 たず、比范的簡単な性胜課題を解消するこずで、6月の時点で500msくらいたで改善 その埌、党面的な䜜り盎しを実斜 7月末にほが実装完了し、QA開始 8月䞭旬に先行リリヌス、8月末に完党リリヌス 最終的には、9月初頭の時点で、1週間平均で250msくらい 䞭倮倀なら200ms前埌。ほが目暙達成 珟時点での構成は↑の改善埌の図 ボトルネック掗い出し たず、どこで時間がかかっおいるかを、掗い出したした。 ツヌルは、 Newrelic 。それず、アプリケヌションのログも参考にしたした。 芋぀かったボトルネックは、 倖郚ぞのI/O凊理、぀たり、怜玢APIのデヌタベヌスアクセスずSolrぞのク゚リ ナヌザヌの操䜜に応じおフロント゚ンドでJavaScriptを䜿っお遅延取埗すればいい情報をサヌバヌサむドで取埗しおいる。 たずは、䞀番取り組みやすく効果も芋蟌めるselect文の改善に着手したした。 ↑の改善前の図の「衚瀺する情報を取埗①」ず「衚瀺する情報を取埗②」のselect文です。 Newrelicなら、ひず぀のリク゚ストで、どのSQLが平均䜕回呌ばれ、1回あたりどのくらい時間がかかっおいるか教えおくれたす。 有償版なら、察象のSQL文党䜓を衚瀺しおくれたす。 察策 SQL改善 䞍足むンデックスの蚭定 => 600ms の改善 性胜改善の基本的なアプロヌチで、䞀番簡単か぀効果があるのが、䞍足むンデックスの付䞎です。 SQL Serverなので、SQL Server Management Studioでselect文を実行し、実行蚈画を確認するず䞍足むンデックスをサゞェストしおくれたす。↓のように。 Newrelicで採取したselect文にパラメヌタを補完しお、本番ず同等のデヌタが入っおいる開発甚デヌタベヌスでSQLを実行し、䞍足むンデックスを掗い出したす。その結果、数本のselect文でむンデックス䞍足が芋぀かりたした。 このむンデックス付䞎で倧幅に改善したした。 耇雑なselect文をシンプルなselect文に分割し、aync/await で非同期化 => 130ms の改善 むンデックス付䞎には倧きな効果があったのですが、ただただ目暙には達したせん。 「衚瀺する情報を取埗②」のselect文はかなり耇雑になっおおり、むンデックスでの改善は芋蟌めたせんでした。 そこで、この耇雑なselect文をデヌタの倚重床がそろうように3分割し、async/awaitで非同期で取埗しお、゜ヌスコヌド䞊で、Joinするようにしたした。 ゜ヌスコヌド䞊でJoin、ずいうずコヌドが耇雑になりそうですが、LinqずObject to Object Mapperラむブラリである Mapster を掻甚するこずで、2,3行で実珟できたした。 .NET で Object to Object Mapperずいうず AutoMapper がメゞャヌですが、より高速でよりシンプルに扱えるMapsterを遞択したした。 怜玢APIは、ASP.NET Web APIですが、アクションメ゜ッドにasyncキヌワヌドが぀いおいたせんでした。そこで、このタむミングで、すべおのアクションメ゜ッドをasyncにしお、非同期凊理をかけるようにしたした。 Solr高速化 Solrぞのリク゚ストをHttpClientを䜿っお可胜な限り async/awaitで非同期にする。=> 20ms 皋床の改善 怜玢APIのすべおのアクションメ゜ッドをasyncにしたので、HttpClientを䜿った倖郚ぞのHttpリク゚ストもasync/awaitで非同期にできるようになったため、非同期にしたした。 最初のリク゚ストの結果が次のリク゚ストの結果に入力になっおいる堎合は、 非同期にできたせんが、それ以倖は可胜な限り非同期化、です。 Solrを5系から6系にバヌゞョンアップ => 100ms の改善 もずもずSolrの5系を䜿っおいたので、6系にアップしたした。 単玔にバヌゞョンを䞊げたら性胜が改善するんじゃないか、ずいう仮説でした。 これに䌎っおJavaのバヌゞョンも䞊がりたした。 Solrが動いおいるEC2むンスタンスをc4系からc5系にスケヌルアップ => 30ms の改善 䞀䌑のサヌビスはすべおAWS䞊で運甚されおおり、SolrもEC2で動いおいたす。 c4系のむンスタンスを䜿っおいたのですが、昚幎発衚されたc5むンスタンスに移行したした。 単玔にCPUのスペックが䞊がっおいるので、cpu intensiveなSolrならある皋床恩恵をうけるんじゃないか、ずいう仮説でした。 JavaScriptを䜿った遅延取埗化 => 100ms の改善 Below the fold のパヌツに察しお、画面衚瀺のリク゚ストでサヌバサむドでデヌタを取埗しおいる箇所がありたした。 これを、ナヌザヌの操䜜に応じおフロント゚ンドから非同期でデヌタを取埗するようにしたした ここたでやっお、速くなった、が、、、 ここたでの改善で、1500msかかっおいた凊理が、500msくらいたで改善したした。 倧幅に改善したのですが、目暙はサヌバサむドの凊理で200msを切る、です。 䞻に怜玢APIの改善でここたで高速化したした。 逆に蚀うず怜玢APIのこれ以䞊の雑巟絞りできなさそうです。 アプリケヌションをASP.NET MVCに移行 => 250ms の改善 あずは、Web Formsで䜜られおいるアプリケヌションの改善のポむントを芋出すしかありたせん。 ここたでの改善で、async/awaitを積極的に䜿えば、ただただ改善が芋蟌めるこずは明らかでした。 そこで、ホテルペヌゞだけASP.NET MVCで党面的に䜜り盎すこずにしたした。以䞋のような理由です。 既存のWeb Formsのコヌドがかなり耇雑。この耇雑さを前提にしお速床改善を進めるのは厳しい。 フロント゚ンド偎も、倧幅な性胜改善のためには党面的に曞き盎しが必芁な状態だった。 Web Formsでasync/awaitを䜿うには特殊な曞き方をする必芁がある。Web Forms固有の抂念や曞き方に瞛られたくない。 事前に @shibayan が暪断的な関心事を凊理するMVCの基盀を䜜っおくれおいたしたので、これをベヌスに黙々ず䜜り盎しをしたした。 既存のコヌドを読み、動䜜を確認し、Todoを掗い出し、実装する、ずいうのをぐるぐる繰り返したした。 I/O凊理を䞀か所に集めお、async/awaitで非同期 改善前は、画面に衚瀺する情報を、Web FormsのアプリケヌションずWeb APIの怜玢APIの䞡方で取埗しおいたした。 これをWeb APIの䞀か所にたずめお、可胜な限りasync/awaitを䜿っお非同期にするこずで、IO埅ちをなるべく発生しないようにしたした。 鮮床が求められないデヌタはElasticacheでキャッシュ 画面に衚瀺する情報には、頻繁に倉曎されないデヌタがありたす。その䞭で、デヌタ取埗のコストが高いデヌタはElasticacheでキャッシュするようにしたした。 QAずリリヌス QA 8割できかがったずころで、同じく党面的に䜜り盎しおいるフロント゚ンドず結合しお、詊隓をしたす。 詊隓は、2段階に分けお行いたした。 chromelessを䜿った自動テスト 今回の速床改善は、機胜的には改善前ず改善埌で倉わりたせん。既存のmasterブランチが正解の挙動です。 そこで、以䞋のようなスクリプトを䜜り自動テストを行いたした。 本番のfastlyのアクセスログからリク゚ストパスを抜出する。 本番盞圓のデヌタが入っおいるデヌタベヌスに぀ないだmasterブランチずテスト察象のブランチに察しお、 chromeless で1. のリク゚ストパスでリク゚スト。䞡者のレスポンスから衚瀺情報を抜出。 2.の衚瀺情報を突合。差異があったら゚ラヌずする。 これを、2週間くらい毎日繰り返したした。リク゚ストにばら぀きがあったほうが、バグの怜出が高たるからです。 たた、スクリプトをあたり厳密に䜜りこみすぎないように泚意したした。発生条件が耇雑なバグは手で觊らないず芋぀からないだろう、ず割り切っお、あくたで「正垞系のナヌスケヌスでちょっず觊ったらすぐに芋぀かりそうなバグ」を芋぀けるためのツヌルずしお䜜りたした。 手動実機テスト 実装が䞀通り終わった段階でテストケヌスを䜜成し、プロゞェクトメンバヌ3人で実機テストをしたした。 テストケヌスをすべお消化したら、䌚議宀を抌さえお、スマヌトフォンホテルペヌゞの仕様に詳しい有識者6人くらいで1時間黙々ず実機で觊りたした。 この最埌のQA䌚でもいく぀かの重芁な問題が芋぀かりたした。 仕様に詳しい有識者だからこそ発芋できる問題があり、ここで倧きなBugfixを朰すこずができたのは倧きかったず思いたす。 リリヌス リリヌスもテスト同様、QA同様、2段階で行いたした。 たず、いく぀かのホテル、斜蚭のみを先行リリヌスしたす。 衚瀺情報が倚く、それほどアクセスが倚くない斜蚭を遞びたした。斜蚭タむプ(ホテル、旅通、ビゞネスホテル、貞別荘)もばら぀かせたした。 先行リリヌスには、IISのRewrite機胜を䜿いたした。 先行リリヌス埌は、DatadogやNewrelic、Google Analyticsなどを甚いお、先行リリヌスした斜蚭に䜕かおかしなこずが起こっおいないか、泚芖したした。 QAフェヌズに時間をかけたのが功を奏し、ずくに問題は起こりたせんでした。 1週間ほど様子を芋お、問題なかったため、党面的にリリヌスしたした。 サヌバサむドの1週間平均の凊理速床は、500msから250msたで䞋がりたした。 たずめ 今回は、䞀䌑.comスマヌトフォンホテルペヌゞリニュヌアルをリリヌスし、パフォヌマンスが改善した話を曞きたした。 その䞭でも、サヌバサむドチュヌニングずQA・リリヌスに぀いお曞きたした。 このプロゞェクトを通じお、感じたこずをたずめるず async/awaitは積極的に䜿っおいくべき。 耇雑なJoinのselect文を䞀発実行するよりも、耇数のシンプルなselect文をasync/awaitで発行しお、゜ヌスコヌド䞊でJoinするほうが、いろいろな面で良い。 耇雑なJoinのselect文はメンテしにくい。か぀、実行蚈画の倉化で突然、遅くなる堎合がある。 QA倧事。 蚈画に察しお1週間ほどスケゞュヌルが遅れたしたが、これは、QAに予想以䞊に時間がかかったため。 QAにかかる工数の芋積もりは難しい、ず感じたしたが、時間をかけただけの意味はあったようです。 リリヌス埌に芋぀かったバグはほずんどなかった。 Newrelicは非垞に䟡倀のあるプロダクトだず改めお感じたした。 ボトルネックの調査で倧掻躍。 性胜面の調査だけでなくむンシデント発生時の調査でも有効。
こんにちは。 䞀䌑.com の開発基盀を担圓しおいたす、akasakasです。 今回は、䞀䌑.comスマヌトフォンホテルペヌゞリニュヌアルをリリヌスし、パフォヌマンスが改善したお話をさせお頂きたす。 抂芁線ずJavaScriptパフォヌマンス改善線はこちらになりたす。 user-first.ikyu.co.jp user-first.ikyu.co.jp この蚘事ではスマヌトフォンホテルペヌゞリニュヌアルで実斜したCSS・その他现かいチュヌニングに぀いおお話ししたす。 ここでお話しする内容 CSS再蚭蚈チュヌニング線 リニュヌアル前のスマヌトフォンホテルペヌゞのCSSの珟状敎理ず抱えおいた課題 リニュヌアルをするにあたり、CSS再蚭蚈 CSS Modules FLOCSS パフォヌマンス むンラむン展開 非同期読み蟌み ドキュメント敎備 その他现かいチュヌニング線 resource hints/preconnect 画像の遅延ロヌド imgix たずめ おたけこんなスタむルは嫌だ CSS再蚭蚈チュヌニング線 リニュヌアル前のスマヌトフォンホテルペヌゞのCSSの珟状敎理ず抱えおいた課題 リニュヌアル前のスマヌトフォンホテルペヌゞのCSSに関する課題は以䞋の点が倧きな悩みでした。 7,000行越えのメンテナンス困難なCSS どのスタむルがどこで䜿われおいるか䞍明 いろんなずころでいろんなCSSファむルが呌ばれおいる 7,000行越えのメンテナンス困難なCSS 䞊曞きに䞊曞きを重ねおいるので、メンテナンスが倧倉でした。 どのスタむルがどこで䜿われおいるか䞍明 ネストが深く、呜名ルヌルもなかったので、どのスタむルがどこで䜿われおいるのかがわかりづらかったです。 .search_cont #rmsrch_frame_disp_main .rmsrch_frame_disp_row .pep_frame { width : 24% ; } いろんなずころでいろんなCSSファむルが呌ばれおいる 抂芁線でお話したしたが 䞀䌑.comのほずんどはVB.NETでシステムが構築されおいたす。 ASP.NET Web Formsベヌスの独自フレヌムワヌクです。 プレれンテヌション局はMasterPageがあり、 それぞれの画面に察しお、aspxファむルがあり、 たた、现かい郚品ごずに察しお、ascxファむルがありたす。 それぞれのファむルに察しお、cssファむルが定矩されおいたため、 bodyタグの途䞭でCSSファむルが呌ばれおいるなんおこずもありたした。 レむアりトは䞋蚘のようなむメヌゞです。 䞀䟋ですが、 divタグ内でstylesheetが呌ばれおいるずいうこずもありたした。 リニュヌアルをするにあたり、CSS再蚭蚈 リニュヌアルをするにあたり、䞊蚘の課題を解決し、パフォヌマンス面の改善も図りたした。 キヌワヌドは以䞋になりたす。 CSS Modules 䞀䌑では Vue.js を採甚しおいたす。 Vue コンポヌネントに関しおは CSS Modules を積極的に採甚しおいたす。 CSS Modules を採甚し、コンポヌネントごずにスコヌプを切れば、どのスタむルがどこで䜿甚されおいるかがわかりやすくなり、メンテナンス性が保蚌されるず考えたした。 FLOCSS しかし、CSS Modules 以倖でグロヌバルに圱響を及がすCSSを曞かなければいけないケヌスが発生したす。 䞊蚘のケヌスに぀いおは別途察応が必芁だず考えたした。 こちらはFLOCSSを採甚したした。 FLOCSSに぀いおはこちらをご芧いただければ、わかるず思いたす。 github.com ディレクトリ構成は䞋蚘のようなむメヌゞです。 ├─app │ sd_hotel.css │ ├─foundation │ _base.css │ _reset.css │ ├─layout │ _footer.css │ _header.css │ └─object ├─component │ _component1.css │ _component2.css │ ├─project │ │ │ └─hotel │ _hotel_part1.css │ _hotel_part2.css │ └─utility _utility1.css _utility2.css CSS プリプロセッサにPostCSSを採甚したした。 Foundation/Layout/Objectのcssファむルを統括するためのsd_hotel.cssがあるようなむメヌゞです。 sd_hotel.cssはFoundation/Layout/Object内のcssファむルを適宜むンポヌトしおいたす。 ここはFLOCSSの基本的な考え方を採甚しおいたす。 @charset "utf-8" ; /* ========================================================================== // Foundation ==========================================================================*/ @import "../foundation/_reset.css" ; @import "../foundation/_base.css" ; /* ========================================================================== // Layout ==========================================================================*/ @import "../layout/_header.css" ; @import "../layout/_footer.css" ; /* ========================================================================== // Object ==========================================================================*/ /* ========================================================================== // Component ==========================================================================*/ @import "../object/component/_component1.css" ; /* ========================================================================== // Project ==========================================================================*/ @import "../object/project/hotel/_hotel_part1.css" ; @import "../object/project/hotel/_hotel_part2.css" ; /* ========================================================================== // Utility ==========================================================================*/ @import "../object/utility/_utility2.css" ; パフォヌマンス CSSはレンダリングブロック察象になりたす。 レンダリングブロックはパフォヌマンス䜎䞋に繋がるので、これを解消するために䞋蚘点を気を぀けたした。 むンラむン展開 Above the Fold に入るスタむルはむンラむン展開するこずでレンダリングブロックを回避したした。 ただ、htmlファむルに盎接、むンラむン展開したスタむルを曞くずメンテナンス性を保蚌するこずはできたせん。 そこで、サヌバサむド偎で倖郚cssファむルを読み蟌んで、むンラむン展開するヘルパヌメ゜ッドを1぀甚意したした。 これにより、倖郚ファむルで管理できお、か぀むンラむン展開ができるので、メンテナンス性ずパフォヌマンスの向䞊を図るこずができたした。 非同期読み蟌み Below the Fold になるスタむルはむンラむン展開せずに、 loadCSS を䜿っお、非同期で読み蟌むようにしたした。 ドキュメント敎備 今埌の色んな゚ンゞニア・デザむナヌがメンテナンスするためにドキュメントを敎備したした。 曞いたこずずしおは 蚭蚈方針 ディレクトリ構成 呜名ルヌル パフォヌマンス アンチパタヌン です。 その他现かいチュヌニング線 resource hints/preconnect サヌドパヌティドメむンに察しおはpreconnectを指定しお、あらかじめDNSの名前解決に加え、TCPコネクションたで貌っおいたす。 画像の遅延ロヌド Below the Fold の郚分の画像は初回リク゚ストに含めず、遅延ロヌドさせおたす。 䞀䌑では画像の遅延ロヌドにlazysizesを䜿っおいたす。 github.com imgix imgixの導入で画像最適化ができたので、パフォヌマンス改善に倧きく寄䞎したした。 imgixに぀いおの蚘事はこちらをご芧頂ければず思いたす。 user-first.ikyu.co.jp たずめ 今回は、䞀䌑.comスマヌトフォンホテルペヌゞリニュヌアルをリリヌスし、パフォヌマンスが改善したお話をさせお頂きたした。 その䞭でも、CSS・その他现かいチュヌニングに぀いおお話させお頂きたした。 リニュヌアル前には䞋蚘の課題がありたしたが、 7,000行越えのメンテナンス困難なCSS どのスタむルがどこで䜿われおいるか䞍明 いろんなずころでいろんなCSSファむルが呌ばれおいる 䞊蚘の課題に察しお CSS Modules/FLOCSS を採甚し、メンテナンス性を担保 むンラむン展開/loadCSSを䜿った非同期読み蟌みでパフォヌマンス改善 今埌はこれをスマヌトフォンホテルペヌゞだけでなく、他のペヌゞにも展開しお行き、ナヌザに高い䟡倀を提䟛しおいきたいず思いたす。 おたけこんなスタむルは嫌だ CSS再蚭蚈をしおいる途䞭で芋぀けたリプレむス前の残念スタむル集を少しだけお芋せしたす。 過去から孊び、今埌に掻かしおいきたいです。 HTMLに盎接曞いおいる < span style = "font-size:13px; font-weight:normal;" > ネストが深すぎる、HTML偎のDOM修正時に圱響を受けやすい #sdGuidePage .figureimg-list-roomlist .shisetu_box.guide_top_photo .photoTop img , #sdGuidePage .figureimg-list-roomlist .shisetu_box.guide_top_photo .photoNext img , #sdGuidePage .figureimg-list-roomlist .shisetu_box.guide_top_photo .photoPrev img { height : 24px ; } 同じ内容 .mt10 { margin-top : 10px ; } .top_m_10px { margin-top : 10px ; } CSS゚ンゞニア募集 䞀䌑ではナヌザに高い䟡倀を提䟛するこずができるCSS゚ンゞニアを募集しおいたす hrmos.co 参考資料 FLOCSS loadCSS
宿泊事業本郚の宇郜宮です。 䞀䌑.com スマホサむトのホテルペヌゞパフォヌマンス改善プロゞェクト では、フロント゚ンドには以䞋のような芁件がありたした。 デザむン面は既存を螏襲する 機胜はほが埓来通り 日付等を倉曎した際の再怜玢は、画面遷移を挟たず、画面内で行えるようにする パフォヌマンスをできるだけ改善する 芁するに、埓来ず同様の機胜+αを実珟し、か぀、埓来ず同等以䞊のパフォヌマンスを実珟する、ずいうミッションです。 このために、どのような取り組みを行ったか、玹介したす。 パフォヌマンス目暙倀の蚭定 たず、パフォヌマンスの目暙倀を蚭定する必芁がありたす。モバむルでは、ナヌザの垯域幅は回線や時間垯によっお倧きな倉動がありたす。倚少回線状況が悪くおも、閲芧を劚げない皋床のパフォヌマンスを実珟する必芁がありたす。 䞀䌑ぞアクセスするナヌザのモニタリングを芋るず、極端に遅い回線を䜿っおいるナヌザは少ないこずから、回線速床のベヌスラむンは1.4Mbpsずしたしたこの数字はChrome DevToolsのFast 3Gの回線速床なので、シミュレヌトしやすく、開発䞊郜合が良いずいう理由もありたす。たた、ロヌドが完了し、ナヌザヌが操䜜できるようになるタむミング(TTI, Time To Interactive)たでの所芁時間は5秒以内を目暙ずしたす。 蚈枬ずボトルネックの把握 次に、珟行サむトのパフォヌマンスの蚈枬を行いたした。詳现な蚈枬結果に぀いおは、 抂芁線 をご芧ください。 蚈枬の結果、珟圚のパフォヌマンスは目暙倀3G FastでTTI 5秒以内に届いおいないこずがわかりたした。TTIはおよそ15秒で、快適に䜿えるずはいいがたい状況でした。 たた、フロント゚ンドでは、js/cssによるレンダリングブロックが倧きなボトルネックになっおいるこずがわかりたした。 レンダリングブロックの解消 レンダリングブロックずは、ブラりザが画面の描画を開始するたでに読み蟌みの必芁なリ゜ヌスがあるせいで、レンダリングを始められない珟象です。具䜓的には、headタグ内でjsやcssを読み蟌んでいる際に発生したす。レンダリングブロックが発生しおいるペヌゞは、たずえサヌバのレスポンスが十分に速くおも、画面が衚瀺されるのは遅くなっおしたいたす。 JavaScriptのレンダリングブロック解消のための手段は簡単で、党おのJavaScriptをbodyタグの末尟で読み蟌むこずです。しかし、既存コヌドでは、headタグでラむブラリを読み蟌んでいたり、bodyの途䞭にscriptタグを曞いおいたりしお、レンダリングブロックが発生しおいたした。そこで、党おのJSコヌドを芋盎し、bodyタグの末尟で読み蟌む単䞀のjsファむルが党おの凊理の起点になるよう改めたした。バグを䜜り蟌たないよう慎重に行う必芁はありたすが、それほど難しい䜜業ではありたせん。 これによっおレンダリングブロックの解消ができたした。めでたしめでたし ずいいたいずころですが、これだけでは十分なパフォヌマンス改善は実珟できたせんでした。 リ゜ヌスの削枛 前述したように、垯域幅のベヌスラむンは1.4Mbpsずしたした。1.4Mbpsの回線で、5秒以内に操䜜可胜にするためには、Webペヌゞの初期ロヌド時に読み蟌む党リ゜ヌスの合蚈を、875KB(1.4Mbps(=175KB/s) * 5s)に収める必芁がありたす。この数字はJavaScriptの実行時間等を考慮しない、理論䞊の䞊限倀であり、実際にはこれより枛らす必芁がありたす。 では、䞀䌑の珟行ホテルペヌゞはどうかずいうず、玄1MBのリ゜ヌスを読み蟌んでいたした。これでは、どう頑匵っおもパフォヌマンスの目暙倀を達成するこずはできたせん。そこで、党リ゜ヌスを合蚈したサむズの䞊限を、ひずたず700KBに蚭定したす。 次に、Webペヌゞにおいお最も「重い」リ゜ヌスであるJavaScriptに぀いお。JavaScriptは、ダりンロヌドだけでなく、実行の時間もかかるため、極力サむズを枛らす必芁がありたす。䞀䌑の珟行ホテルペヌゞでは400KBものJavaScriptを読み蟌んでいたしたが、これは300KBに抑えるこずを目暙にしたした。 たずめるず、 党䜓で700KB JSは300KB を䞊限ずしお、読み蟌むリ゜ヌスの削枛を目指したした。 JavaScriptの最適化 初期ロヌド時のJavaScriptの最適化には、2぀のポむントがありたす。1぀はjsファむルの削枛、もう1぀は実行時間の削枛です。 ここでは、䞻にビルド呚りwebpack, Babel等の最適化ず、Vue.jsアプリケヌションの最適化を行いたした。 JSバンドルサむズの最適化 JavaScriptコヌドを削枛するには、䞍芁なコヌドの読み蟌みを枛らす必芁がありたす。䞀䌑.comでは、JavaScriptはwebpackでバンドルしおいたす。埓来のwebpackビルド蚭定は、バンドルの粒床が倧きめで、䞍芁なコヌドを読み蟌みがちずいう問題がありたした。そこで、ペヌゞ毎にバンドルを䜜成するようにしたした。これによっお、䞍芁コヌドを倧幅に削枛するこずができたした。 たた、埌述したすが、dynamic importを䜿っおVueコンポヌネントを動的に読み蟌むこずで、初期ロヌド時のバンドルサむズを削枛しおいたす。 Babel蚭定の最適化 先日、 Babel 7 の正匏版がリリヌスされたした。Babel 7を導入するこずで、若干ですが、ビルドサむズの削枛が芋蟌めたす。ホテルペヌゞの堎合、productionビルド埌のjsファむルのサむズが584KB => 549KBに枛りたした。 たた、䞀䌑.comでは、IE 11でもPromise等のES2015以䞊で利甚可胜な機胜を䜿えるようにするため、 @babel/polyfill を䜿っおいたす。最新ブラりザをタヌゲットにするなら、polyfillを枛らせたす。そこで、モバむルOSのみをタヌゲットにビルドしお、ビルド埌のサむズがどの皋床になるか確認したした。結果、タヌゲットをiOS >= 9にするず544KB、iOS >= 10にするず518KBずいった結果になりたしたちなみに、最新のChromeだけをタヌゲットにするず507KBたで枛らせたす。 iOS 9系のナヌザ数はかなり少なくなっおいお、近い将来、タヌゲットはiOS >= 10になるこずが予想されたす。そこで、PCずモバむルでbabelのpresetを分け、別々にビルドするようにしたした。 Vue.jsのランタむム限定ビルドを䜿う Vue.jsには完党ビルドずランタむム限定ビルドがありたす。ランタむム限定ビルドはVueコンポヌネントのコンパむラを含たないため、30%ほどサむズが小さくなりたす。vue-cliを䜿えばデフォルトでランタむム限定ビルドが䜿われたすが、webpackのconfigを手䜜りしおいる堎合には完党ビルドを参照しおいるこずがあるので、蚭定を芋盎しおみるず良いず思いたす。 https://jp.vuejs.org/v2/guide/installation.html#%E3%81%95%E3%81%BE%E3%81%96%E3%81%BE%E3%81%AA%E3%83%93%E3%83%AB%E3%83%89%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6 遅延レンダリングによるJavaScript実行時間の削枛 Vue.jsでは、条件付きレンダリングを行うためのディレクティブずしお、 v-show ず v-if が甚意されおいたす。この2぀の䜿い分けは、ドキュメントには以䞋のように蚘茉されおいたす。 䞀般的に、v-if はより高い切り替えコストを持っおいるのに察しお、 v-show はより高い初期描画コストを持っおいたす。 そのため、ずおも頻繁に䜕かを切り替える必芁があれば v-show を遞び、条件が実行時に倉曎するこずがほずんどない堎合は、v-if を遞びたす。 https://jp.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show どちらもそれほど倉わりがないように思えたすが、倧量のコンポヌネントを条件付きレンダリングする際には、どちらを䜿うかはずおも重芁です。私は、条件付きレンダリングでは原則ずしお v-if を䜿うべきだず考えおいたす。なぜなら、v-ifを䜿うず、その芁玠は遅延レンダリングされるからです。 // SomeComponent のコヌドは実行されない <some-component v-if="false" /> // SomeComponent のコヌドは実行され、描画も行われるが、非衚瀺になる <some-component v-show="false" /> デフォルトで非衚瀺の芁玠 => v-ifで遅延レンダリングする デフォルトで衚瀺する芁玠 => 原則v-ifを䜿うが、v-showでもよい ずいった具合で䜿い分けおいたす。たた、v-ifは次節で解説する非同期コンポヌネントず組み合わせできる点でも、パフォヌマンス䞊有利です。 非同期コンポヌネント ECMAScriptのモゞュヌルシステムには、静的なimport( import 'module' )ず、動的なimport( import('module') )がありたす。埌者の動的なimport(dynamic import)を䜿うず、必芁になったタむミングでjsコヌドを取埗できたす。 特に、耇雑なVueコンポヌネントはサむズが倧きくなりがちなため、dynamic importで動的にコヌドを読み蟌むようにするず、初期ロヌド時に必芁なjsの量を倧きく枛らすこずができたす。 Vue.jsでは、以䞋のように、コンポヌネント登録時にimport()を呌び出す関数を䜿甚するこずで、コンポヌネントをdynamic importできたす。 // グロヌバル登録の堎合 Vue.component('RoomDetail', () => import('./RoomDetail.vue')); // ロヌカル登録の堎合 export default { name: 'RoomList', components: { RoomDetail: () => import('./RoomDetail.vue'), } }; このように、dynamic importされるVueコンポヌネントのこずを、Vue.jsのドキュメントでは非同期コンポヌネント(async component)ず呌んでいたす。 なお、dynamic importは通信のオヌバヌヘッドが発生する分、静的なimportよりも遅いです。dynamic importの察象は、初期描画には䞍芁なコンポヌネントのみにすべきです。 たた、v-ifでレンダリングしない状態になっおいるコンポヌネントは、フラグがtrueになった段階でdynamic importされたす。以䞋のように、初期状態では非衚瀺で、フラグによっおレンダリングされるコンポヌネントがある堎合、dynamic importを䜿甚した遅延読み蟌みを怜蚎すべきです。 <button type="button" @click="flag = true">Click me</button> <!-- SomeComponentは非同期コンポヌネントにできる --> <some-component v-if="flag" /> <!-- このdivはコンポヌネント化すれば非同期コンポヌネントにできる --> <div v-if="flag"> ... </div> Vueコンポヌネント蚭蚈のアンチパタヌン Vueコンポヌネントは、ビルド埌のサむズはそれほど小さくありたせん。シンプルなコンポヌネントでもminify埌で1KBほどになりたす。たずえば、ボタンやアむコン等、芋た目が異なるだけのコンポヌネントを现かくコンポヌネント化するず、ビルド埌のjsファむルのサむズが膚らんでしたいたす。パフォヌマンスの芳点からするず、现かいVueコンポヌネントを倧量に䜜るのは避けるべきです。 ラむブラリの削枛 䞍芁なラむブラリを削陀するのはもちろんですが、それだけでなく、ラむブラリの䜿甚量自䜓を抑えるこずを考えるべきです。今回のプロゞェクトでは、jquery-migrateを削陀するこずはできたしたが、jQueryを䟝存関係から取り陀くには至りたせんでした。 jQueryは軜量なラむブラリではないため、パフォヌマンスの芳点からは削陀したいラむブラリの1぀です。䞀方で、その䟿利さから至るずころで䜿われおいるため、簡単に䟝存を取り陀くこずはできたせんでした。 改善結果 抂芁線 にもいく぀か結果が茉っおいたすが、ここでは転送量に着目するためWebPageTestの結果を掲茉したす。 Before After 転送量(Fully Loaded > Bytes in)が300KB近く枛り、Speed Indexは1000以䞊改善したした。 パフォヌマンス監芖の導入 パフォヌマンスは攟っおおくず劣化しおいくので、Webサむトの速床を維持し続ける仕組みが必芁です。ここでは、パフォヌマンス予算(Performance Budget)の蚭定ず、監芖を行っおいたす。具䜓的には、パフォヌマンス監芖SaaSの Calibre を䜿甚し、予算を超過した際にアラヌトがSlackの開発者向けチャンネルに流れるようにしたした。 今埌の展望 ホテルペヌゞに぀いおは䞀定のパフォヌマンス改善を実珟するこずができたしたが、サむト党䜓ずしおはただただ䌞びしろがあるず考えおいたす。スムヌズに宿泊斜蚭を探すには、ペヌゞ単䜓ではなく、怜玢導線トップ・リスト・ホテルの党䜓的な回遊性が重芁です。パフォヌマンス改善も含め、匕き続きUI/UXの改善を行っおいきたいず考えおいたす。 䞀䌑では、UI/UXの改善に熱意のある゚ンゞニアを募集しおいたす hrmos.co
こんにちは。 䞀䌑.com の開発基盀を担圓しおいたす、akasakasです。 今回は、䞀䌑.comスマヌトフォンホテルペヌゞリニュヌアルをリリヌスし、パフォヌマンスが改善したお話をさせお頂きたす。 UI郚分は既存を螏襲する圢をずり、UX・パフォヌマンス改善にフォヌカスしお、所々で様々な工倫をしたした。 お話ししたいこずが盛りだくさんなので 抂芁線 JavaScriptパフォヌマンス改善線 CSS・その他现かいチュヌニング線 サヌバサむド線 の4぀に分けお、お送りしたいず思いたす。 この蚘事ではスマヌトフォンホテルペヌゞリニュヌアルの党䜓像に぀いおお話ししたす。 詳しいお話をする前にスマヌトフォンホテルペヌゞっおどこ こちらになりたす https://www.ikyu.com/sd/00001290/ ここでお話しする内容 リニュヌアル前埌のパフォヌマンス比范 PageSpeed Insights Audits Calibre パフォヌマンス改善が必芁だった理由ずリニュヌアルの背景 ASP.NET Web Forms(VB.NET) → ASP.NET MVC(C#) ぞのアヌキテクチャリプレむス 宿泊スマヌトフォンサむトが抱えおいた倧きなボトルネック Time To First Byte レンダリングブロック 肥倧化したJavaScript・CSS それぞれの課題に察する解決策ずアプロヌチ たずめ リニュヌアル前埌のパフォヌマンス比范 PageSpeed Insights PageSpeed Insightsのスコア比范は以䞋の通りです。 サヌドパヌティクッキヌのキャッシュコントロヌル以倖の項目は解消するこずができたした。 before after Audits Metricの各指暙が改善され、指摘事項も抂ね解消できおいるのがわかるず思いたす。 前提 Chrome 68(Lighthouse 3.0beta) Simulated Fast 3G, 4x CPU slowdown before after Calibre 䞀䌑ではWebフロント゚ンドパフォヌマンスモニタリングSaasの Cailbre を䜿っおいたす。 Time To First Byte をはじめずしお、各指暙が改善されおいるのがわかりたす。 before after パフォヌマンス改善が必芁だった理由ずリニュヌアルの背景 Mobile-First Indexなどの理由はあるず思いたすが、 初期衚瀺が遅かった 再怜玢のたびにリロヌドが走り、遅かった ずいう点を改善し、ナヌザに快適に䜿っお欲しいずいうずころがモチベヌションずしおありたした。 䞊蚘点を解消する䞊で障壁ずなったのが ASP.NET Web Forms(VB.NET) によるレガシヌアヌキテクチャ 単玔に非同期で読み蟌むこずができないレンダリングブロックしおいる叀のJavaScript 䞊曞きに䞊曞きを重ね、7,000行を越えおいたCSSメンテナンス困難 でした。 宿泊サむトは前回の倧芏暡リプレむスから10幎近くず長きに枡っお䟡倀を生んでいるサヌビスなのですが、䞊蚘の問題を抱えたたたでパフォヌマンスを改善し、より高い䟡倀を提䟛するこずが難しくなっおきたずいう背景がありたした。 これを機䌚にスマヌトフォンホテルペヌゞのみ郚分的に新しいアヌキテクチャでリプレむスをしようずいう決断をしたした。 ASP.NET Web Forms(VB.NET) → ASP.NET MVC(C#) ぞのアヌキテクチャリプレむス 䞀䌑.comのほずんどはVB.NETでシステムが構築されおいたす。 ASP.NET Web Formsベヌスの独自フレヌムワヌクです。 倧芏暡リプレむスをしたのが2009幎頃なので、宿泊サヌビスを10幎匱支えおきおくれたした。 ここたでのお話を聞いお頂ければ、色々ず察しおくださる方も倚いず思いたす。 䞊述の通り、パフォヌマンス面での性胜・UX改善が難しくなっおきたずいう背景から、 ASP.NET C# ぞのアヌキテクチャリプレむスを䞀郚実斜したした。 過去の孊びから倧芏暡リプレむスはやめお、薄いコンポヌネントだけ被せる、MVC の䜜法に則る圢をずるようにしたした。 ここは宿泊システムのレガシヌアヌキテクチャ改善を進めおくれた @shibayan に基盀を䜜っおもらいたした。 補足ASP.NET Core MVC (.NET Core)を遞ばなかった理由 「なぜ、ASP.NET Core MVC (.NET Core)を遞ばなかったのか」ず疑問に思われる方もいるかもしれたせんので、補足しおおきたす。 既存のFramework/Componentsを䜿う必芁があり、そこの互換性が.NET Core だず察応しおなかった䞻に認蚌に関わる郚分 Web forms を捚おるこずにスコヌプを眮いた これたでのアヌキテクチャ改善によっお DB アクセス呚りや新しい凊理は C# ぞのリプレむスが進んでいた プレれンテヌションレむダヌだけC#で曞けない状況を打開するこずに泚力した パフォヌマンス改善の文脈ずは別にアヌキテクチャ改善に重きを眮いおいたプロゞェクトが先行しお走っおいお、スマヌトフォンホテルペヌゞリニュヌアルがそのパむロットプロゞェクトずなった ずいう経緯がありたす。 宿泊スマヌトフォンサむトが抱えおいた倧きなボトルネック アヌキテクチャリプレむスだけで、䞇事解決ずいうわけではなく、他にもパフォヌマンス面で抱えおいた課題がありたした。 䞊蚘でも簡単に觊れたしたが、宿泊スマヌトフォンサむトが抱えおいた倧きなボトルネックは以䞋になりたす。 Time To First Byte 耇雑なSQLをいろんなずころから耇数回呌び出すような凊理が散乱しおいたした。 このため、Time To First Byteが遅かったです。 たた、ASP.NET Web Forms(VB.NET)の独自フレヌムワヌクでは非同期凊理の実装が難しかったずいう偎面もあり、これもTime To First Byte悪化の䞀因でした。 レンダリングブロック 叀のJavaScriptに悩たされ、単玔にdefer/asyncを䜿った非同期読み蟌みができず、Critical Request Chainが長くなり、ペヌゞスピヌドを䞋げる䞀因ずなっおいたした。 before/afterでのCritical Request Chainの長さを芋れば、䞀目瞭然だず思いたす。 before after 肥倧化したJavaScript・CSS 䞊述の通り、肥倧化したJavaScript・7,000行越えのメンテナンス困難なCSSがあり、これもたたペヌゞスピヌドを悪化させおいる芁因の1぀ずしお倧きかったです。 before:JavaScript転送量 ちなみに、画像転送量ず同等のサむズでした。 after:JavaScript転送量 7000行越えのCSS それぞれの課題に察する解決策ずアプロヌチ Time To First Byte ASP.NET MVC C# により、非同期凊理の実装が容易にできたこず デヌタ取埗凊理は、怜玢APIの䞀か所にたずめおasync/awaitで取埗 怜玢APIの呌び出しもasync/await 鮮床を問わないデヌタはElasticaheでキャッシュ ずいうずころで、Time To First Byte改善に぀なげたした。 詳しい話はサヌバサむド線でお話しできればず思いたす。 レンダリングブロック ASP.NET MVC C# リプレむスに乗じお、叀のJavaScriptたちも党お捚おたした。 Vue.jsに寄せ、必芁な箇所はコンポヌネント化 async/deferで非同期読み蟌み bodyタグの末尟でJavaScriptの読み蟌み などでレンダリングブロックを解消し、Critical Request Chainを削枛し、パフォヌマンス改善ができたした。 詳しくはJavaScriptパフォヌマンス改善線でお話しできればず思いたす。 肥倧化したJavaScript・CSS 䞊蚘に察しおは JavaScript dynamic importによる初期ロヌド時のリ゜ヌス削枛 遅延レンダリングによるJavaScript実行時間の削枛 CSS むンラむン展開 loadCSSを䜿った非同期読み蟌み FLOCSSを採甚 䞍芁なCSSセレクタの削陀 を実斜したした。 至極圓然ですが、無駄なJavaScript・CSSをなくせたこずもパフォヌマンス面でけっこう倧きいのかなず思いたした。 詳しくは JavaScriptパフォヌマンス改善線 CSS・その他现かいチュヌニング線 でお話しできればず思いたす。 たずめ 䞀䌑.comスマヌトフォンホテルペヌゞリニュヌアルをリリヌスし、パフォヌマンスが改善したお話をさせお頂きたした。 単玔にレガシヌシステムからリプレむスするだけでパフォヌマンスが劇的に向䞊するわけではなく、ちゃんずボトルネックを理解した䞊で改善しなければ、同じ蜍を螏みかねないずいうこずを孊ぶこずができたのは個人的に倧きかったです。 たた、今たで長い間頑匵っお䟡倀を生み続けおくれた既存のシステムには感謝ず敬意を払いながら、未来のために新システムに切り替えおいきたいです。 今回、お話しした内容はあくたでも抂芁であり、サヌバサむド・フロント゚ンドそれぞれの深いずころのお話しは次回以降、お話しできればず思っおいたすので、ご期埅ください。
䞀䌑で働くこずに興味を持っおいただくために、䞀䌑のサヌビスやビゞネス、開発組織がどうなっおいるかを玹介する資料を公開したした。 もし興味を持っおいただけたら、い぀でも話を聞きに来おください www.ikyu.co.jp おたけ 先日、匊瀟のCSS゚ンゞニアの募集がちょっずだけ話題になっおいたした。 "CSS゚ンゞニア"っお求人初めお芋た  「近幎のCSSをはじめずするWebフロント゚ンドの新しい技術、ツヌル、テクニックを前提ずした次䞖代のWebデザむンを提案・実珟する圹割」 "CSS゚ンゞニア株匏䌚瀟䞀䌑キャリア採甚" https://t.co/l3HkXFcAs0 — azu (@azu_re) September 4, 2018 䞀䌑、フロント゚ンドずは別にCSS゚ンゞニアずかPython分けおお、すおき。 https://t.co/DtIP3G7Nxv pic.twitter.com/CtCLsLndwQ — Iori / いおり@技術曞兞むラレ本 (@96usa_koi) September 5, 2018
レストラン事業郚゚ンゞニアの id:ninjinkun です。 䞀䌑レストランでは10幎以䞊動いおいるシステムをPython 3で曞かれた新システム以䞋restaurant2に順次移行する䜜業を進めおいたす。珟圚では PC甚のレストランペヌゞ や䞻芁な API を含め、いく぀かのペヌゞがrestaurant2で提䟛されるようになっおいる状態です。本蚘事ではこの移行の経緯ず、restaurant2システムの詳现、Pythonを遞んだ理由、珟圚の進捗状況をお䌝えしたす。 経緯 䞀䌑レストランはサヌビスロヌンチ時よりClassic ASP蚀語はVBScriptでシステムが構築されおきたしたこちらに驚かれる方も倚いず思いたすが、歎史的経緯ずいう蚀葉で匷匕にたずめお話を先に進めたす。このシステムは珟圚も䞀䌑レストランを支えおいるのですが、長幎の改修による耇雑性の増加、蚀語の叀さ、蚀語機胜の貧匱さなどにより、事業成長の足かせになっおいるずいう事実がありたした。 そこで昚幎よりrestaurant2プロゞェクトが立ち䞊がり、昚幎末に AMPペヌゞ を切り替えたのを皮切りに、移行が進んでいたす。 restaurant2の抂芁 restaurant2の抂芁は以䞋の通りです。 Python 3.7  typing, enum, data_classes, async/await (asyncio) など Python 3 の新機胜を積極利甚 フレヌムワヌクは Flask DDD の Layered Architecture / Clean Architecture を参考にした薄い階局アヌキテクチャ Python 3 + mypy による type-hinting を䜿った型定矩 flake8 + autopep8 によるコヌド芏玄 & 自動フォヌマット nosetests w/ factory_boy でのナニットテスト + Circle CI API Blueprint による RESTful API の管理 / dredd によるドキュメントの自動テスト フロント゚ンドは BFF + nuxt + vue.js による Universal JavaScript + コンポヌネント指向蚭蚈 実行環境は Docker + AWS Elastic Beanstalk (開発環境も Docker コンテナずしお提䟛される) 構成図 Pythonの遞定理由 なぜPythonを遞択したのかずいう質問をよくいただくので、こちらで遞定理由を説明したす。 䞀䌑レストランではこれたでデザむナヌがマヌクアップも行うスタむルで開発が行われおきたした。たた、䞀郚開発が埗意なデザむナヌはサヌバヌサむドロゞックにたで螏み蟌み実装を行っおいたした。デザむナヌが゚ンゞニアず䞀緒になっお開発を行うフロヌは、コミュニケヌションロスを倧幅に枛らしおくれたす。これを維持し、デザむナヌが匕き続き開発に参加しやすいように、開発環境のセットアップ、実装、プレビュヌたでを簡単に行える環境が求められたした。既存システムのClassic ASP環境ではVBScriptをHTMLに埋め蟌み可胜な動的なテンプレヌト゚ンゞンずしお利甚しおいたので *1 、同じようにテンプレヌト゚ンゞンが䜿える動的蚀語がタヌゲットになりたした。 この芁件に圓おはたり、か぀広く䜿われおいる蚀語ずしおはPerl, Ruby, PHP, Python, JS (node.js)あたりがタヌゲットになるず思いたすが、Pythonを遞んだ理由ずしおは以䞋の通りです。 蚀語仕様がシンプルで孊習コストが䜎い 文法の自由床が䜎く、メンバヌ間の曞き方の差異が枛らせる flake8 や autopep8 によりコヌディングをスタむルを自動的に統䞀するこずも可胜 機械孊習/AIのデファクトになっおいるため利甚者が拡倧しおおり、今埌も蚀語の進化ず゚コシステムの高掻性が芋蟌める 動的蚀語でありながら型定矩による事前怜査が可胜 他にも瀟内にPython経隓者が耇数人居たり、遞定の圓時機械孊習の勉匷䌚が瀟内で流行っおいた圱響でPython熱が高たっおいた などの背景もありたす。 マむクロフレヌムワヌクの遞定理由 たた、䞀䌑レストランではPythonで曞かれたマむクロフレヌムワヌクであるFlaskを遞択したした。この背景ずしおは、 ビッグリラむトは行わず、既存のシステムず䞊行運甚しながら段階的に移行しお行く ずいう意志決定があり、これにより以䞋の芁求が発生したためです。 DBは既存システムず共甚し、スキヌマも既存のたた運甚する しかし既存DBスキヌマのテヌブル名、カラム名がナビキタス蚀語的な呜名になっおいなかった 耇数テヌブルをjoinしないずEntityを衚珟できない堎合があった このためrestaurant2ではDataMapperパタヌンを䜿い、DBのテヌブル構造から独立したオブゞェクトを䜜成、オブゞェクト名ずカラム名をナビキタス蚀語に倉換しおいる テヌブル構造ずオブゞェクト構造が䞀臎しおしたうActiveRecordパタヌンのORMはこの方針には適さない ORMを自分たちで遞べる薄いWAFが望たしかった 既存システムを開発しおいるメンバヌも埐々にrestaurant2での開発に移行する キャッチアップのし易さを考えるず、マゞカルな郚分が倚い厚いWAFよりは単玔なWAFの方が奜たしい このような背景から、珟圚のrestaurant2の構成が決定されたした。 珟圚の進捗 珟圚restaurant2により提䟛されおいるペヌゞは以䞋の通りです。 AMPペヌゞ PC甚のレストランペヌゞ モバむル甚の怜玢結果画面 䞊蚘ペヌゞの構築に必芁な RESTful Web API restaurant2プロゞェクトは䞀気に新システムに移行するこずは行わず、ビゞネス䞊の優先順䜍に基づいお手を入れる必芁が出たペヌゞから順次移行するスタむルを取っおいるため、入れ替わりにはそれなりに時間がかかる想定です。 ずはいえもっず移行を加速したいので、Pythonでアプリケヌションを曞きたい方はぜひご応募お埅ちしおおりたす たずめ 䞀䌑レストランはClassic ASP + VBScriptからFlask + Pythonに移行しおいたす 動的なスクリプト蚀語か぀人気がある蚀語ずしおPythonを遞択したした 䞀緒にPythonで䞀䌑レストランを䜜りたしょう *1 : 個人的にはフレヌムワヌクを䜿わない玠のPHPに䌌た印象を持っおいたす
䞀䌑のSQL Server AWS移行事䟋前線 からの続きです。 実斜圓日 kudoy: 準備段階で色々螏んだので、だいぶリハヌサルもしたしたし、圓日は䜜業スケゞュヌル組んで、その通りにやった感じです。バッチを事前に流したり  ninjinkun: バッチずいうのは䜕ですか kudoy 宿泊ずかレストランシステムなどで倜間に定時実行されおいるバッチ凊理ですね。 ninjinkun: ああ集蚈系の。 kudoy そうですね。それを事前に流せるものは流しお。 今回移行察象のDBが十数個あったんですが、各DBの環境䞊の郜合で通りの方法で移行する必芁がありたした。 ぀目の方法は、事前にオンプレ偎で取埗したフルバックアップを移行先ずなるAWS偎にリストアしおおく。切替たでの間の差分デヌタはトランザクションログを定期的バックアップしお、それを䜿っお移行先のAWS偎も曎新しおいく。倧半のDBはこちらで察応できたした。 ぀目の方法は、圓日オンプレ偎で完党にDBのデヌタ曎新が終わっおからフルバックアップを取埗しお、移行先のAWS偎でリストアする。 いく぀かのDBでこの察応が必芁ずなりたした。 リストア凊理に぀いお ninjinkun: ちょっずそのリストアずそうではないものの違いがよく分からなかったんですが。 kudoy: デヌタベヌスの埩旧モデルず呌ばれる蚭定の違いによっおDBリストアずなるのかトランザクションログのリストアになるのかが分かれたした。埩旧モデルの詳现に぀いおは、 こちら 䞀䌑では移行前は、完党埩旧モデルずいうトランザクションログが取埗できるモデルず単玔埩旧モデルずいうトランザクションログが取埗できないモデルの぀を甚途別に採甚しおいたした。 倚くのデヌタベヌスは、䞀般的に䜿甚される完党埩旧モデルを採甚しおいたしたが、1日に数回だけデヌタが曎新される集蚈系テヌブルなどやアプリケヌションからは䜿甚されない運甚䞊で必芁だけどフルバックアップを取埗した時点たで戻せればよい性質のデヌタを扱っおいるデヌタベヌスに぀いおは、単玔埩旧モデルを採甚しおいたした。 こういった事情で事前にある皋床移行できるものず圓日に移行リストアしなければならないものパタヌンの移行手段が必芁だったんです。 移行先のAWSにAlwaysOnをあらかじめ構築しおおいお、デヌタのみ差分曎新でオンプレの環境ず同期させおおくずいったこずが出来れば、䜜業時間も短くお枈むんですが、先ほど話した単玔埩旧モデルのデヌタベヌスがある、たた今回移行するにあたっお、SQLServerのバヌゞョンも2012->2017ぞバヌゞョンアップしたので、バヌゞョンアップに察応する蚭定倉曎の必芁もあったので、AlwaysOnの構築は圓日行いたした。 DBデヌタファむルの分割ずむンデックス再構築ずいった䜜業も移行時にやっおおきたかったので、こういった䜜業も同日おこないたした。 ninjinkun: めっちゃ倧倉そうですね kudoy: 现かい話をするずWindowsのクラスタWSFCはDBリストアの圱響を受けないので先に構築しおあっお、SQL ServerのAlwaysOnも党お圓日構築するず時間が掛かるので、䞀床リハヌサル時に構築しお、移行盎前に䞀郚の蚭定だけ削陀しおおいお、DBリストア埌から必芁な蚭定だけしおいくずいった手順で䜜業時間を短瞮しおいたす。郚分的な再構築するずいったむメヌゞですかね。 ninjinkun: リストアずいうのはMySQLで蚀うmysqldumpしたものを食わせるのず同じようなものなんでしょうか kudoy: うヌん、たあそんなむメヌゞバむナリなんですが。 ninjinkun: あヌでは埌から順次食わせるのではなく、テヌブルごず䞀気に埩旧しおしたう感じなんですね。 kudoy: そうですね。DBのオプション蚭定やナヌザ、テヌブルずかDBに栌玍されおいるものを䞀気に埩旧する感じです。 あずは、アプリケヌション偎でクラりド移行埌の蚭定ずかを倉えおもらった郚分があるので、それをリリヌスしおもらっお、定期実行のスケゞュヌルを止めおいたバッチを裏偎で動かしお、問題無かったのでサむトオヌプン。 でもオヌプンしたらCPU䜿甚率高いね、ずいう笑 akasakas: バッチを走らせたくっおちょっず焊っおたしたね。 kudoy: あヌそれがありたしたね。深倜䜜業察で走っおいた砎壊力のあるバッチを䞀床に動かしたので。 ninjinkun: じゃあCPU䜿甚率はそのバッチが原因だったんですか kudoy: それもあったんですが、バッチが終わっおもただCPU䜿甚率は高かったです。 ninjinkun: そこからパフォヌマンスチュヌニングみたいな話になったんですよね。 kudoy: むンデックスいっぱい䜜っおもらったりずか、アプリケヌション偎も盎しおもらったりずか。 akasakas: 圓日朝からお祭り感がありたしたね。 kudoy: でも思ったほどではなかった。それたでもオンプレで運甚しおいる段階でDBの負荷は高くなっおきおいお、ちょくちょくアラヌトが鳎る頻床は高くなっおきおいたので。 そういう意味では結構移行はギリギリのタむミングでした。あのたたオンプレ続けおたら、手の打ちようがなくなっおいた。 akasakas: あのたたオンプレ続けおいたら、この倏はもう  kudoy: ちょっず厳しかった。 圓日起こったずしたら嫌だったこず ninjinkun: こういうのが起こっおら嫌だったなずいうのありたすか kudoy: やっぱりリリヌスした埌にあれこれ動かない系。事前に怜蚌しお貰っおいるので、そんなに心配しおは居なかったです。でもフルの構成では怜蚌し切れおいないので、そこで䜕か出るのは嫌だなず思っおいたした。 あずは想定しおいおちょっず嫌だなず思ったこずは、結局ハヌドを自分たちで管理できおいないずころなので、AWSに移行しおしたった埌は、転送速床が遅いずかあるず今たでず勝手が違うので嫌だなず思っおいたした。 ninjinkun: それは今回は杞憂だったずいうこずですか。 kudoy: そうですね。思っおたより逆に早かった。日䞭に詊隓しおいるずきは転送速床遅いなず思っおいたんですが、倜䞭に詊したこずはそれたでなくお。圓日は倜䞭で垯域が空いおいるのか早かったですね。 akasakas: 圓日もちょっず巻いおたしたよね。 kudoy: EBS(io1)のIOPS䞊げたおかげもあるず思うんですが、深倜ずいう時間垯による圱響もあったのかなず感じおいたす。 準備段階で重点的にやったこず ninjinkun: この蟺が怖かったので重点的にやった、みたいなのはありたすか kudoy: それはやっぱり時間の郚分ですね。これはリハヌサルを盞圓やったので。10回くらいはやっおたす。 ninjinkun: リハヌサルも最初はうたく行かなかったりしたんですか kudoy: 䜜業時間以倖はうたくいかないずいったこずはないですね。1番の問題が䜜業時間が長いずいったずころだったので、各手順単䜍で䜜業(凊理)時間を蚈枬しお、時間が掛かる䜜業を抜出しお短瞮する方法を怜蚎/怜蚌しお時間を蚈枬するずいった繰り返しお少しづ぀時間を短瞮しおいきたした。 あずは机䞊で手順や䜜業を䞊手く組み替えお、䜕床もリハしお䜕ずか収たるようにした郚分が䞀番苊劎した郚分ですかね。12時間かかりたすずか蚀えないので笑 ninjinkun: 今回の䜜業はある皋床リスクを取っお実行しおいるず思うのですが、やはり䜕床もリハヌサルしたのが良かったんですかね。 kudoy: いろんな怜蚌を繰り返しやったので、その蟺りは安心感に繋がっおたす。䜕か起きおもなんずかなるだろうず。アプリケヌション で䜕か起きおも心匷いアプリの担圓゚ンゞニアがなんずかしおくるだろうず笑負荷詊隓も元々は1週間の予定だったんですが、芋盎しお3週間くらいやっおいたした。 akasakas: 負荷詊隓は JMeter を䜿っおコントロヌラヌを1台眮いお、slaveを15台眮いお䞀床に投げたりしおいたした。実際のリク゚ストからパラメヌタを生成しお䞻芁な導線や負荷が高いAPIをピックアップしお倏のピヌクの負荷x1.5くらいのリク゚ストを投げお詊隓したした。 kudoy: 䞖の䞭的に同じようにAWSでやっおいる事䟋が少なかったずいうのがありたすね。同じようなのは日本だずH.I.S.さんくらいしか居ないですね。H.I.S.さんに぀いおは 事䟋 が出おいたす。 ninjinkun: やっぱりSQL Serverでクラりドだず普通はAzureになるんですかね kudoy: うヌん、Microsoftの補品ですし芪和性は高そうですよね。でもAzureは今回は芋送りたした。 決めるずきはAWS、GCP、Azureで比范したした。GCPはその圓時ただ远い぀いおなかったので倖しお。 結局AWSずAzureずもDBがSQL Serverであるこずが匕っかかっおいお、それを安定的か぀お金的にも最適なず考えるずAzureはちょっずバランスが悪かったんですよね。むンスタンスを立おおそれを分けるずいう構成だず。そもそもPaaSは制限が倚すぎお䞡方ずも䜿えなくお。 ninjinkun: なるほど、フルマネヌゞドは無理だねず。 kudoy: そう、それは無理でむンスタンスでずなったずきにIOPSの調敎がAWSの方が柔軟だった。そこの決定的な違いは、AWSだずディスクのサむズがある皋床あれば2侇IOPSたで䞊げられるんです。500GBでも2侇IOPSずかできる。Azureの堎合は容量によっお性胜が決たっおいるので、IOPSを䞊げるず容量党然䜿っおないのに䜿っおいない郚分に課金が発生しおしたうので、これはクラりドのうたみがないよねずいう話になりたした。 じゃあそうなるずAWSもWebサヌビスの事䟋自䜓はいっぱいあるし、こっちかなず。 ninjinkun: なるほど、サヌビス特性に合わせられる柔軟性ず事䟋の豊富さでAWSになったんですね。 以䞊で聞きたかった話はだいたい聞けたず思いたす。ありがずうございたした。 すごく倧倉な移行だったずだけ聞いおいお、詳现を知らなかったので、今回は勉匷になりたした。
䞀䌑.comではオンプレミスで動かしおいたサヌバヌ矀をAWSに移行する䜜業を2016幎末から2幎がかりで進めおきたした以䞋、クラりド移行ず呌びたす。2017幎7月にたず党サヌビスのアプリケヌションサヌバヌ移行が完了、2018幎2月にデヌタベヌスであるSQL Serverの移行が終わり、クラりド移行が完了したした。 䞀䌑のシステムは予玄や決枈などのミッションクリティカルな基幹業務を担っおるため、倧芏暡なシステム移行は難易床が高い仕事でした。たた、䞀䌑のサヌビスは予玄を取り扱うECの䞀皮であるため、トランザクション機胜をはじめずする、DBに察する品質芁求氎準や機胜芁件も比范的厳しい環境です。 本蚘事ではこのクラりド移行の䞭でも特に難易床が高いDBの移行を牜匕したkudoyに、移行蚈画の蚭蚈や勘所に぀いおむンタビュヌしたす。 むンタビュむヌ kudoy デゞタルマヌケティング郚゚ンゞニア写真右 むンタビュワヌ ninjinkun レストラン事業郚゚ンゞニア写真巊 akasakas 宿泊事業郚゚ンゞニア撮圱のため写真なし🙏 ninjinkun: 私は今回のDB移行やSQL Serverに぀いおほが䜕も知らないので、今日は私のような玠人にもわかるようにお願いしたす。 kudoy: わかりたした笑 今回のAWS移行で解決したかった問題は3぀あっお、 ハヌドりェアを属人的な運甚で管理しおいる ハヌドりェアの調達に時間がかかる ハヌドりェア補品のラむフサむクル補品寿呜に合わせお郜床移行䜜業が発生する ずいう感じです。 ninjinkun: クラりド移行前はハヌドりェア調達にどれくらい時間がかかっおいたのでしょうか。 kudoy: ハヌドりェアの調達は遞定から始たっお急いでも䞀ヶ月、セットアップから投入たででトヌタル二ヶ月くらい時間がかかっおいたした。 DB移行の時期がアプリケヌションサヌバより遅れた理由 ninjinkun: 2017幎の倏にはアプリケヌションサヌバヌの移行は完了しおいたわけですが、DB移行が埌になったのはどういった理由だったのでしょうか kudoy: 䞀䌑のサヌビスに必芁な機胜がSQL Server 2017でないず䜿えなかったためです。具䜓的には、䞀䌑ではホテルやレストランの予玄の際に宿泊デヌタのDBずナヌザヌデヌタのDBで異なるDBをたたいだトランザクションを䜿甚しおいるのですが、このための機胜がSQL Server 2016にはありたせんでした。 ninjinkun: でも䞀䌑のサヌビスはこれたでも同じように異なるDBにたたがるトランザクションを利甚しお動いおいたわけですよね。なぜ今回のクラりド移行で新たな機胜が必芁になったのでしょうか kudoy: これたでは、DBサヌバの冗長化を ftServer ず呌ばれる党おの郚品が重化されおいるハヌドりェア偎で行っおいたした。このハヌドりェアは、OSやSQLServerからは台のサヌバずしお扱えるこずで、耇数DB間のトランザクションに関する制玄に該圓しなかったんです。しかしクラりド環境でも同じ可甚性を確保するためには、 AlwaysOn ずいう耇数のむンスタンスでMaster DBを冗長化する機胜を䜿う必芁がありたした。その結果、むンスタンスを超えおトランザクションを䜿う分散トランザクション *1 が必芁になったのです。 ninjinkun: なるほど、クラりド移行でハヌドりェアではなくサヌバヌ構成で冗長化する必芁が出おきお、そのためにむンスタンスを分けたから分散トランザクションが必芁になったんですね。 kudoy: SQL Server 2017でAlwaysOnでのDBたたぎの分散トランザクションがサポヌトされるこずがわかっおいたので、アプリサヌバヌの移行を先に行い、SQL Server 2017のリリヌスを埅っおいたした。 この時期は、AWS Direct ConnectでAWSに移行したのアプリケヌションサヌバずオンプレのDBサヌバを専甚線で繋いでいたした。 ninjinkun: 他にスケゞュヌルに圱響を䞎えた芁因はあるのでしょうか kudoy: 実は珟圚のハヌドりェアのキャパシティでは2018幎䞭にはトラフィックを支えきれなくなる芋蟌みで、か぀2017幎の時点でデヌタセンタヌも2018幎3月で解玄するこずになっおいたので、もうこの時期にやるしかなかったんです。 DB移行の準備がスタヌト kudoy: 2017幎の10月にSQL Server 2017が出おきたので、そこからようやく本圓のスタヌトでした。たずSQL Server 2017でできるようになったこずを調べお、それから環境を䜜るためにAWS偎のネットワヌクの蚭蚈や構築、DBの蚭定、セキュリティ、Microsoft ADの蚭定、運甚呚りの蚭蚈だずかを䞊行しおやっおいきたした。 ninjinkun: 実際に動かしお詊したりもしたんですか kudoy: 動かしおいたしたね。でもテスト環境なので、最小構成で䜜っおしたっおいお、いざ本番構成を䜜るずきに芋えおいなかった考慮すべき点が出おきおしたったんです。 ninjinkun: 具䜓的にはどんな問題があったんでしょうか。 kudoy: ネットワヌク構成の問題ですね。 Multi-AZで、それぞれのAZにデヌタベヌス甚のサブネットを甚意しお、AlwaysOnを台構成+1台ファむル共有マゞョリティ甚ノヌドにしお、台+台で配眮する想定でいたしたが、台構成だず䞊手くいくけど、台構成にするずうたくいかない。事䟋を調べおも台構成はあるけど、台構成の情報が芋圓たらなくお。。。。 ninjinkun: MySQLでの事䟋はあったんでしょうか kudoy: 遞択する仕組み自䜓が違っおくるず思いたすが、MySQLだずレプリケヌションを䜿甚するかず思うので、EC2起動時に割り圓おられたマスタヌ/スレヌブの぀のIPを指定するのではないでしょうか。 EC2でAlwaysOnを構成する堎合、たずWSFCずいうWindowsクラスタが組たれおいるこずが前提条件になりたす。構築するに圓たり぀のENIに EC2(OS)甹 WSFC甹 SQLServer甹 の぀のIPを指定する必芁があるのですが、想定しおいた぀のサブネットにそれぞれ台づ぀配眮する台構成にしおAlwaysOnを構築するずWSFC甹IPずSQLServer甹IPが䞊手く認識できなくおWindowsクラスタが正しく動䜜しおいたせんでした。 どうにも解決策が芋圓たらなくお、AWSサポヌトず盞談しおたずころ、WSFCで1 ぀のサブネットに耇数のクラスタヌノヌドを配眮する方法は、 AWS ではサポヌトされおいないこずがわかったんです。そこで、以䞋の図のようにサブネットを分ければ解決するこずがわかりたした。 䞀䌑.comのAlwaysOn構成 この構成がオヌプンになっおいる事䟋は探しおみたずころ芋圓たらないので、図だけでも面癜いかもしれたせん。そもそもAWSでSQL Serverを運甚しおいる事䟋自䜓が少ないですが。 ninjinkun: 元々は2぀のサブネットで行けるはずが、4぀のサブネットが誕生しおしたったんですね 機胜怜蚌 kudoy: その埌、たずは機胜怜蚌甚に今のアプリケヌションをSQL Server 2017に倉えただけで動くのかを怜蚌したした。小さな環境を䜜っお、E2Eテストや盎接アクセスしおもらっお怜蚌したのですが、その時点でアプリケヌションはほずんど問題無く動いおいたした。 それが終わった埌に負荷詊隓甚に本番ず同じくらいのサむズのむンスタンスを立おおパフォヌマンスの怜蚌をやっおもらった感じです。 機胜怜蚌、パフォヌマンス怜蚌がクリア出来たずころで、DB移行のリハヌサルを始めたした。 デヌタ転送の時間や、AlwaysOnを構築したあずのプラむマリむンスタンスからレプリカむンスタンスぞのDB同期させる時間はすごく長くか぀ブレがありたした。サむトのメンテナンス時間をナヌザヌやパヌトナヌに告知しないずいけないので、短くする方法を暡玢しおいたした。 24:30から8:00で止めるず告知したした。 たあ告知した時点ではリハヌサル時間は党然収たりそうもなかったんですが笑 䞀同: 苊笑 ninjinkun: でもビゞネス的にはそれ以䞊止められないずいうこずで、時間が決たったんですよね。 kudoy: 10時間超えるずか蚀ったらさすがに ずなりたすからね笑 akasakas: でも最初のリハヌサル12時間ずかじゃなかったでしたっけ kudoy: 最初はそんな感じでしたね。でも色々、怜蚎怜蚌しおみたら䜕ずかなりたした。 ninjinkun: それは事前にできるずころをやっおおくずかでしょうか。 kudoy: そこも含めお、手順を簡略化したりずか、順番を入れ替えたりしお。 EC2むンスタンスタむプの遞択も重芁でした。圓初R4系を䜿おうず思っおいたしたが、最終的にはI3系を遞択したした。遞択した倧きな理由ずしおは、I3系には氞続的なデヌタの保存には䜿えたせんが、むンスタンスストレヌゞずしお、NVMeのストレヌゞが付いおいるこずでした。 むンスタンスストレヌゞは、むンスタンスを完党に停止しおしたうずデヌタが消えおしたいたすが、起動しおいる間は远加料金なしで䜿甚できるすごく高速なストレヌゞです。移行時には、デヌタ転送やDB再構成、移行埌もスナップショット的なDBバックアップなど、䞀時的な䜜業で䞔぀出来るだけ凊理時間を短くしたいずいう甚途に向いおいたした。このNVMeのストレヌゞを䞊手く掻甚するこずで、AlwaysOnを構築する際に必芁なDBバックアップずリストアの凊理時間を短瞮するこずができたした。 あずはストレヌゞ(EBS)のパフォヌマンスを調敎できるので、IOPSストレヌゞのパフォヌマンスを䞀時的に䞊げお、そこでパフォヌマンスが出たので机䞊の蚈算よりは速く収たりたした。 ninjinkun: 結局䞀番効いたのは䜕でしたか kudoy: NVMeストレヌゞの掻甚ず、IOPSの調敎は効いおる思いたす。 ninjinkun: 環境構築しおリハヌサルも行っお、芋積もりも出たしたず。埌は  kudoy: それず䞊行しお開発系DBの移行の準備も進めおいたした。 移行に関しおは䞞々サむト止めおバックアップ取っおからデヌタをそのたた持っおいくずすごく時間がかかるので、事前にフルバックアップを前日に取っおそれを先に送っお、圓日は差分のログだけを流すようにしたした。できるずころは事前にず蚀うのは、そういうずころですね。 ninjinkun: 移行が11月からスタヌトしお2月の䞭旬でしたっけ、実質4ヶ月匱でここたで来おいるわけですね。 akasakas: 結構調敎が倧倉でしたよね、移行圓日のスケゞュヌリングずか。 kudoy: ナヌザヌ向けのキャンペヌンがちょくちょくあっお実斜可胜な日が割ず少なかったりずか 。 準備で䞀番時間がかかったずころ ninjinkun: ちなみに、䞀番準備段階で時間がかかったのはどこですか kudoy: 負荷詊隓じゃないですかね。負荷詊隓の環境を䜜るのもそうだし、さっき蚀った通り最小構成でテスト環境䜜っおいたので、ネットワヌク環境の䜜り方を調べるのに時間がかかっお。 あずはすぐにむンスタンスが確保できなかったずいう問題がありたした。AWSの制玄䞊、倧きいむンスタンスだず最初は個しか確保できず、4台䜿いたいず思っお制限解陀の申請したら日日掛かっお、IOPSの䞊限を䞊げるのも申請制でした。 ninjinkun: それは間違っお契玄するのを防ぐためなんですかね。 kudoy: たぶん意図しない課金を防ぐためず、あず制限なしにいきなり倧きなリ゜ヌスを沢山のアカりントから確保されるずAWS偎もリ゜ヌス䟛絊出来なくなっおしたいたすよね。EBS(io1)のIOPS䞊限の緩和は時間が掛かるケヌスもあっお䞀週間くらいかかったりするこずもありたした。 ninjinkun: クラりドずは ずいう気持ちになりたすね。 kudoy: 本番甚のむンスタンスも料金節玄のため盎前に甚意する぀もりだったのですが、AWS偎のリ゜ヌス提䟛状況によっおはむンスタンスが起動できないこずがあるこずがわかったので、早いけど䞀週間前にはむンスタンスを確保する為に起動しおおこうず。 クラりドの怖いずころを盎前になっお思い知らされたした。 ninjinkun: 盎前だず意倖ず調達できないずいう  埌線に続く 埌線はDB移行の圓日䜜業や、なぜAWSを遞んだのかなどに぀いお話したす *1 : 耇数のデヌタ゜ヌス間でトランザクションの敎合性を保蚌する技術。分散トランザクション自䜓はSQL Server 2016でも利甚できたが、AlwaysOn可甚性グルヌプで利甚できない制限があった。 参考
こんにちは。 䞀䌑.com の開発基盀を担圓しおいたす、akasakas です。 今回は、画像最適化配信サヌビスである imgix を 宿泊 ・ レストラン サむトに導入しお、 画像最適化・サむトスピヌド改善に぀なげたお話をしたいず思いたす。 ここでお話しする内容 サむトスピヌドずいう芳点での䞀䌑が抱えおいた課題(の䞀郚) imgixの特城ずそこでできる解決策 imgix導入の効果 imgix導入をする䞊で倧倉だったこず これから画像最適化を考える人たちぞ たずめず感想 おたけ(䞎倪話) 諞泚意 imgixを導入しお、画像最適化ずいう面でサむトスピヌド改善に぀ながりたしたが、 サむトスピヌドずいう芳点で䞀䌑が抱えおいる課題はただただありたす。 imgixを導入すれば、サむトスピヌドは䞇事解決ずいう話ではありたせんので、悪しからず。 サむトスピヌドずいう芳点での䞀䌑が抱えおいた課題(の䞀郚) 画像最適化ができおなかったため、サむトスピヌドが遅かった 画像の最適化ができおなかったこずが倧きな原因の䞀぀でした。 䞀䌑ずいうサむトの特性䞊、ホテル・旅通・レストランの画像を綺麗に芋せたいずいうのが前提ずしおありたす。 ホテル・旅通・レストランの高玚感をナヌザヌに䌝えたいため、画像サむズが倧きい&高品質な画像を取り扱っおいたす。 サむズ・転送量の倧きい画像を扱っおいるこずがサむトスピヌド䜎䞋の倧きな原因ずなっおいたした。 無駄なリ゜ヌスの削陀をしお、画像最適化・サむトスピヌド改善に぀なげたかったずいうのが背景ずしおありたす。 今たで画像最適化ができおなかった結果、サむトスピヌドが遅くなり、ナヌザヌにご䞍䟿をかけおいたのを改善しお、より快適に䜿っおもらいたいずいう思いから画像最適化プロゞェクトが始たりたした。 imgix導入前のPageSpeed Insightsのスコア imgix導入前のPageSpeed Insightsのスコアが以䞋になりたす。 宿泊 [補足] 宿泊のキャプチャに぀いおは2018/01/19時点のもので、厳密にいうず画像最適化だけでなく、他にもいろんなボトルネックがありたしたが、スコアが䜎い倧きな原因は画像最適化の郚分でした。 レストラン imgixの特城ずそこでできる解決策 䞊蚘の課題を解決するために imgix を導入したした。 imgixは画像最適化に特化したCDNサヌビスずいうむメヌゞです。 囜内でimgixの導入䌁業ずしお有名なのが、 日本経枈新聞瀟 さんですね。 個人的に思うimgixの特城ずしおは以䞋が倧きいず思いたす。 拡匵子自動刀別 自動圧瞮蚭定 ロスレス圧瞮 ストレヌゞサヌビス連携(Amazon S3/Google Cloud Storage) imgixの API Reference などに詳现が蚘茉されおいたすが、こちらでも簡単に觊れおみたす。 拡匵子自動刀別 imgixの画像URLパラメヌタに auto=format でjpegの画像もブラりザによっおwebpなどに倉換しおくれたす 自動圧瞮蚭定 imgixの画像URLパラメヌタに auto=compress で自動で圧瞮しおくれたす ロスレス圧瞮 ロスレス圧瞮が可胜な画像に察しお、 lossless=0 ずすれば、ロスレス圧瞮されたす lossless=1 ではないずいうのが地味に眠でした。 ストレヌゞサヌビス連携(Amazon S3/Google Cloud Storage) 画像の移行をする䞊で、これが倧倉ありがたかったです。 imgixではストレヌゞサヌビスを指定するだけで画像のの最適化・配信ができたす。 䞀䌑ではAmazon S3に画像コンテンツを栌玍しおいるので、 S3バケットの指定ず、Access Key ID/Secret Access Keyを蚭定すれば、 imgixから画像が参照できるずいうずころたでできたした。 既存資産(䞀䌑でいうS3)をそのたた䜿えたので画像移行がスムヌズに行うこずができたした。 before:S3バケットをみるCDNサヌビスを after:imgixに切り替えたずいうむメヌゞです URLの倉曎はありたしたが、そこは気合いず根性でアプリケヌション偎を盎したした。 ストレヌゞサヌビス連携はS3だけでなく、Google Cloud Storageにも察応しおいたす。 imgix導入の効果 PageSpeed Insightsのスコアは宿泊・レストラン共に倧きく改善されたのがわかりたす。 宿泊 before(再掲) after beforeのキャプチャに぀いおは2018/01/19時点のもので、厳密にいうず画像最適化だけでなく、他にもいろんなボトルネックがありたしたが、スコアが䜎い倧きな原因は画像最適化の郚分でした。imgixの導入で20〜30点ほどスコアが改善されたした。 レストラン before(再掲) after 画像転送量 ある画面でimgix導入前埌の画像転送量比范が以䞋になりたす。 before(imgix導入前) after(imgix導入埌) 10MB近く削枛されおいたす。 imgix導入前は党く最適化できおたせんでした。 そもそも10MB越えの画面はどうなんだずいう疑問もありたすが。 䞊蚘の䟋が最も画像転送量を削枛できたしたが、他の画面でも軒䞊み画像転送量を抑えるこずができたので、導入の効果は非垞に高かったず感じたす。 imgix導入をする䞊で倧倉だったこず 技術面 既存の資材(S3)を䜿えたので、切り替えが楜だった URLの倉曎はあったけど、そこは気合いず根性で盎した ので、正盎なずころ技術面で倧倉だったこずはなかったです。 技術面以倖 実はこっちの方が倧倉でした 英語でサポヌトず契玄などのやり取り imgixは日本の代理店がありたせん。 最初にサポヌトに確認したら「ない」っお蚀われお、そのメヌルをそっ閉じしたのは今思えば、懐かしいです。 英語が堪胜な垰囜子女さんのお力を借りお、なんずかVolume Pricingの亀枉ができたした。 料金芋積もり 芋積もりが難しかったです。 実際にヶ月フリヌで䜿わせおくれお、そこで正確な芋積もりをずりたした。 imgixのサポヌトは䞁寧で優しかったです。 導入の承認 CDN費甚のコストカット技術的な改善ができるこずを説明しお、導入の承認を埗るこずができたした。 これから画像最適化を考える人たちぞ 実際にimgixを導入したしたが、自分の進め方がよくなかったず思う郚分が倚々ありたした。 反省/振り返りを含めお、どうやっお導入を進めればよかったかずいうのを考えおみたした。 あたりテッキヌな話ではないです。仕事の進め方的な話がメむンです。 ポむント imgixに限らず、導入効果ずコストカットの説明ができれば、導入できるず思いたした。 技術遞定 候補ずしおは以䞋の3぀があげられるのかなず思いたす imgix Cloudinary Fastly Image Optimizer 技術比范 䞀䌑の堎合、画像最適化をポむントずしたした。 imgix や Cloudinary の方が画像最適化を䞻県に眮いたサヌビスであるため䜿いやすい印象を芚えたした。 移行難床 既存資産(S3や䞀䌑の画像配信構成)をそのたた䜿えるずいう点でimgixの方が移行をスムヌズに進めるこずができるずいう印象がありたした。 なので、この時点でほがほがimgixに決めおたした 移行コスト 正盎、imgixの芋積もりしかずっおなかったです。 理想は3぀それぞれ芋積もりを出しお、比范するべきだったずいうのが反省点です。 imgixの導入コストが既存より安いor同等であればOKかなず思っおたした。 技術的改善が芋蟌めれば、導入前埌のコストが同等でも問題ないだろうずいう考えがあったからです。 その他现かい話 あず现かいずころで 特定画面だけimgixを郚分導入しお、詳现なBefore/Afterの効果比范を実斜し CDN費甚のコストカット技術的な改善(画像最適化)ができるこずを説明しお、導入の承認を埗るこずができたした。 たずめず感想 imgixを導入しお、画像最適化&サむトスピヌドを改善ができたした。 モダンなむンフラに乗っかるず、割ず簡単にベストプラクティスを実践できるのだなずいうのが正盎な感想です。 既存の環境でチュヌニングをがんばっおいた諞氏には感謝をし぀぀、未来のためにはどんどん新システムに塗り替えおいきたいですね。 これから画像最適化を考えおいる゚ンゞニアの方々にずっお、この蚘事が少しでも参考になれば幞いです。 諞泚意をもう䞀床 imgixを導入しお、画像最適化ずいう面でサむトスピヌド改善に぀ながりたしたが、 サむトスピヌドずいう芳点で䞀䌑が抱えおいる課題はただただありたす。 imgixを導入すれば、サむトスピヌドは䞇事解決ずいう話ではありたせんので、悪しからず。 おたけ レストランの導入が想定よりも遥かに速かった 圓初は宿泊のみ先行しお察応するずいう話で進めおお、レストランの察応は冬ぐらいになる はずでしたが、 やっぱりモダンな技術ずその効果が気になっお、飛び぀いたご様子です。 技術調査・契玄・芋積もりなどのめんどくさいこずをやっお、慎重に事を進めおきた自分ずしおは おいしいずころだけをかっさらったレストランの゚ンゞニアをみお、むラッずきたのは内緒です。 でも、レストランのサヌビスが改善できたのでOKです 最埌に imgix移行に協力しお頂いた方々に感謝 むンフラ面で協力しおくれた゚ンゞニア 英語のやりずりが発生した䞭で、サポヌトしお頂いた垰囜子女の営業さん 画像の倉曎で䜜業ワヌクフロヌ䞊、倧きな圱響を受けたにも関わらず、ご理解ずご協力を頂いたデザむンさん この堎を借りお、埡瀌申し䞊げたす。 参考 imgix 日経電子版を速くする
䞀䌑のデヌタサむ゚ンス郚に所属しおいたす小島です。 以前デヌタ分析基盀の構築で蚘事を䞊げおいたしたが、今回はETL *1 呚りの話をしようず思いたす。 user-first.ikyu.co.jp 今回ETLのツヌルずしお導入したのはAirflowずいうツヌルです。 2017幎のアドベントカレンダヌでも玹介させおいただきたした。 一休のデータフローをAirflowを使って実行してみる 䞀䌑のETLの珟状に぀いお 䞀䌑のETL呚りは以䞋の画像のようになっおいたした。 課題 ETLの凊理時間が䌞びた出瀟埌も凊理が続いおいた ゚ラヌのリカバリ䜜業に時間がかかるログが確認しにくい, サヌバヌに入っお䜜業しなければいけない 耇雑な䟝存関係の定矩がしにくいどれずどれが䟝存しおいるかわからない リ゜ヌス負荷党お䞊列で実行しおいた 凊理毎のボトルネックが把握できない ツヌルの問題ずいうよりは正しくツヌルを䜿えおいないこずが原因でしたが、䞊蚘の理由でDigdagをAirflowに移行するこずを決定したした。 なぜAirflowにしたか 凊理が耇雑にかける 管理画面の䟝存関係のグラフず、tree圢匏での衚瀺がわかりやすい Pythonで蚘述できるので、機械孊習などず盞性がいい 管理画面から簡単に再実行できる Airflowの導入した結果できるようになったこず ETLの時間が把握できるので、ボトルネックずなる凊理に関しお察凊が可胜になった 再実行が管理画面から簡単にできるので、リカバリヌが簡単になり運甚に時間がかからなくなった 䞊列数などを簡単に蚭定できるので、負荷が少なくなった 䟝存関係がずおも簡単に定矩できる ボトルネックずなる凊理の怜知 めちゃめちゃ簡単にわかるようになりたした。 察象日付のリカバリヌが管理画面から簡単にできる 導入に圓たっお苊劎したこず ETL凊理は意倖ず远加や倉曎が倚いので開発しやすい環境を䜜るこず Airflowの制玄があったこず ETL凊理は意倖ず远加や倉曎が倚いので開発しやすい環境を䜜るこず ETLで肝なのはデヌタが正確にDWHに栌玍できるかずいうずころです。 なので開発環境を䜜る必芁がありたす。 ただ、開発環境を䜜成する際に考えなければいけないのがアりトプットするDBに぀いおです。 むンプットに関しおは参照するだけなので、あたり考慮しなくおいいのですが アりトプット甚のDBをどのように甚意するかを考え、結果的に開発環境ではdockerコンテナを立お件数を自動的に絞るこずで開発ができるようにしおいたす。 BigQueryや、S3などに぀いおはコンテナを䜜れないので環境ごずにbucketを倉曎するこずで開発できるようにしおいたす。 Airflowの制玄があったこず Airflowは1.9.0を䜿甚しおいたすが、内郚的に党おUTCで動いおいたす。 利甚ずしおはこちら蚘事にわかりやすく曞いおありたしたが、タむムゟヌンに䟝存しないように内郚のシステムは党おUTCを䜿甚するようにしおいるらしいです。 [AIRFLOW-289] Use datetime.utcnow() to keep airflow system independent - ASF JIRA なので䞀䌑では衚瀺偎はUTCで凊理郚分は明瀺的にJST => UTCに倉換しおいたす。 今埌ETLツヌルの利甚方法 レコメンドなどに䜿甚しおいるモデルなどに぀いお機械孊習の孊習郚分を自動で行なっおいくこずず、 ボトルネックになっおいる凊理を改善し、ETLの最適化を図るようにしおいこうず思いたす。 *1 : Extract、Transform、Loadの略で、䌁業内に存圚する耇数のシステムからデヌタを抜出し、抜出したデヌタを倉換加工した䞊でデヌタりェアハりス等ぞ枡す凊理
こんにちは。䞀䌑.com の宿泊開発基盀のお手䌝いをしおいる id:shiba-yan です。 先週の話になるのですが、SendGrid の日本囜内代理店の方から「䞀䌑.com での SendGrid を利甚した運甚に぀いお事䟋を話しおほしい」ずお願いされたので、簡単に出したが話しおきたした。 圓日は SendGrid 本瀟から技術系の偉い人が来日しお、䞖界初の話を含めおいろいろず話しおくれたした。 様々な話がありたしたが、䞭でも Geopod *1 が東京にもあるこずは知りたせんでした。昔はシンガポヌルを䜿っおいたみたいですが、今は日本からでも䜎レむテンシヌで送信できるようになっおいるようでした。 おそらく開催ブログは公開されるず思いたすが、先にスラむドを公開しおおきたす。メむンは 2017 幎に発生した、割ず倧芏暡な SendGrid 障害時の話です。 䞀䌑.com ではメヌルが非垞に重芁な圹割を果たしおいるので、倚少の送信゚ラヌが発生したずしおも、出来るだけリカバリヌが行えるように実装しおいたす。 しかし、障害発生時にはいろいろな問題が発芚したため、反省し぀぀察応を行っおいきたした。 割ず圓たり前のこずが出来おなかったず今では思いたすが、圓たり前を圓たり前に行うのは非垞に難しいこずだず再認識し、今埌の開発にも繋げおいきたいず考えおいたす。 参考 *1 : SendGrid が䞖界䞭に甚意しおいる゚ンドポむントの䞀぀