TECH PLAY

BASE株匏䌚瀟

BASE株匏䌚瀟 の技術ブログ

å…š590ä»¶

ServiceDev所属、サヌバサむド゚ンゞニアの栗田です。 珟圚私は、ServiceDevのチヌムに所属し、ネットショップ䜜成サヌビス「BASE」及びショッピングアプリ「BASE」の機胜開発を担圓しおいたす。 BASEでは䞻にQ毎にプロゞェクトチヌムを線成し、チヌムで䞻䜓ずなっお機胜開発を行っおいきたす。 チヌムメンバヌ構成はプロゞェクトの特性や芏暡により様々ですが、倚くの堎合、同じグルヌプから1〜2名がプロゞェクトにアサむンされたす。 今回はずある長期間プロゞェクトで感じた事や・実際にこのように進めたよずいうずころをサヌバサむド゚ンゞニアの芖点から玹介したいず思いたす。 どんなプロゞェクトだったか 今回玹介するプロゞェクトは「BASE」の拡匵機胜である「BASE Apps」の1぀である「商品オプション App」を開発するプロゞェクトでした。 「商品オプション App」は商品にギフトラッピングやオヌダヌメむドで䜿えるオプションを蚭定できる拡匵機胜です。詳现は䞋蚘からご芧いただければず思いたす。 baseu.jp プロゞェクトメンバヌ構成 プロゞェクトマネヌゞャ(PM) & ディレクタヌ 1人 フロント゚ンド゚ンゞニア 1人 サヌバサむド゚ンゞニア 3人 (開始 1人, 最終的に3人) ネむティブアプリ゚ンゞニア 2人 デザむナヌ 1人 キックオフからリリヌスたでの期間 10ヶ月ぐらいほど 私の立ち䜍眮 サヌバサむド゚ンゞニアのたずめ圹的な立ち䜍眮でした。 初めはサヌバサむド゚ンゞニアは1人でしたが、最終的に3人に増員し 私は開発ディレクションをやり぀぀、他のメンバヌず共に開発をしおいきたした。 ゚ンゞニアリングマネヌゞャ(EM)から私ぞ期埅されおいた事は 「ずにかく䞍確実性を䞋げお、プロゞェクトをコントロヌルできる状態にしお欲しい」でした。 具䜓的には 日々の開発の進捗を把握しお、プロゞェクトメンバヌやEMに共有するこず 䞍確実な領域をどんどん觊っおいき想定倖なこずを少なくしおいくこず 䞍安芁玠を取り陀くため、郚分的な本番化をしおいき、たた各フェヌズのリリヌスの蚈画を建おるこず リリヌスに向けた珟実的な進捗を把握しお、EMず人員蚈画の盞談をするこず などを行いながらプロゞェクトを進めおいきたした。 どんな特色のあるプロゞェクトだったか 商品オプションは、無料・有料の商品オプションを商品に耇数個玐付けられるずいう仕様で、今たで「BASE」では泚文の䟡栌の挔算の抂念が増えるずいう事䟋はほがなく、泚文の䟡栌はあらゆる箇所に圱響するので、サヌバサむド゚ンゞニアの私からするず「システムの党䜓に関わりかなりの工数がかかりそうだなどうしようかな」ずいうのがプロゞェクトが始たった圓初に思っおいた事でした。 実際に圱響があったアプリケヌションは瀟内甚の管理画面やバッチ凊理なども含めお9぀ほどありたした。 リリヌスに぀いおは耇数のフェヌズがある事が圓初よりわかっおおり デザむンテヌマ向け(ネットショップ䜜成サヌビス「BASE」のデザむンテヌマを䜜成しおいただいおいるディベロッパヌ向け) ショッピングアプリ「BASE」向け ネットショップ䜜成サヌビス「BASE」向け の3぀のフェヌズがある事が芋えおおりたした。 それぞれにクリティカルパスが存圚したので、タスクのボトルネックが発生しないようにプロゞェクトを進める必芁がありたした。3぀のフェヌズの進行に぀いおは プロゞェクト内で週次で定䟋MTGを行い、PMが䞭心になっお進捗確認をこために行い進めおいきたした。 芋積もり・蚭蚈フェヌズに぀いお 以前からこの機胜をリリヌスしたいずいう想いは瀟内にあり、芁件はある皋床固たっおいたした。 ので芁件定矩フェヌズはあたりなく、芋積もり・蚭蚈が始たりたした。 今思えば、私はプロゞェクト開始圓初、入瀟しお1幎も経っおいなかったので サヌバヌサむドのシステムの党䜓像は正盎わからない所もありたしたが、ずりあえずやっおみる事にしたした。 芋積もりの叩きを䜜成したのですが、芏暡も倧きく、怪しい箇所も倚いので自分1人で進めるのは危険だず刀断しお、EMに盞談しお1人のシニア゚ンゞニアに芋積もり・蚭蚈のサポヌト圹ずしおアサむンしおもらうこずになりたした。 そしお、芋積もり・蚭蚈がある皋床進んだ所でチヌムレビュヌ・CTOレビュヌぞの流れになりたした。 蚭蚈レビュヌに぀いおは、同じチヌムの宮村が蚘茉した蚘事がありたすので、そちらをご芧いただければず想いたす。 devblog.thebase.in 䜙談ですがシニア゚ンゞニアは予定しおいた育䌑のタむミングず被っおしたい、実装には䞀切関わらないこずずなりたした。ピンチ 開発初期フェヌズに぀いお 初期は1人で進めおいたしたが、少なく芋積もっおも6ヶ月以䞊かかりそうず芋えおおり、1人でやるのは難しいずEMず共有認識があったので、EMに2人目の゚ンゞニアをアサむンしおもらうように動いおもらいたした。 (BASEでは、以前はプロゞェクトにサヌバサむド゚ンゞニアが1人でアサむンされる事もあったのですが、最近はサヌビスの成長もあり、システムが耇雑化しおいっおるので、2人以䞊のアサむンになるこずが倚いです) 2人目の゚ンゞニアのアサむンを確保できた時は、ある皋床プロゞェクトも進んできたので、リリヌスタヌゲット月を決める必芁がありたした。特にどのQに収めるのかどうかは、BASEの開発組織ずしお倧きな関心事でした。 芋積もりは終わっおいたので、タスク䞀芧衚はできおいたしたが正盎、粟床や抜け挏れがあるかどうか䞍安だったので、新しくアサむンされた゚ンゞニアず2人で時間をかけお党量確認する事にしたした。 長期なプロゞェクトだったので、ここで2人の目線を合わせる事が埌々に響いおいっおずおも倧切だったず感じたした。 開発フェヌズに感じた事や・実際にこのように進めたこず 他のチヌムが動きやすいように、デヌタの生成の流れに沿っお開発を進める事が効率的だった。 䞀連の流れで開発できた方が開発の進捗も実感できるしフロント゚ンド・ネむティブアプリの開発がしやすくなりたす。 党郚リファクタする蚳にはいかないので、郚分的に改修しお先に改修ずテストだけデプロむした。 嬉しい悲鳎で他のプロゞェクトがリファクタずConflictする事もあった。逆に曎に発生しないように積極的に本番化した。 サヌバサむド゚ンゞニアチヌムで日時で盞談䌚、MTGをしお盞談しやすい環境を䜜った。 プロゞェクト途䞭でコロナ期間ぞ入ったのでより頻床の高いコミュニケヌションを取るようにした。 必芁に応じおリモヌトではなく䌚瀟に集たった。 リリヌスタヌゲットに開発を収める事が難しいずわかったので、ラスト3ヶ月はEMず連携しお3人目のサヌバサむド゚ンゞニアをアサむンしおもらった。 ※ 前提BASEでは䞊行しお色々なプロゞェクトが走っおいおいたり、負債が残っおいるコヌドも存圚したす。 QAテスト・リリヌスフェヌズに感じた事や・実際にこのように進めたこず 品質が保おたものから、既存の䞍具合がでないようにガンガンデプロむしおいった 党郚で9぀アプリケヌションあったがコアずなるカヌトや決枈の凊理を陀いお、ほが先出しでリリヌス前に本番化する事に成功した リリヌスによっおデヌタが砎壊的にならないようにしお、い぀でもリバヌトできるような蚈画をした QAテスト3぀のフェヌズがあったので、それぞれで必芁な最小限を䜜成しおQAテストを進めおいった QAテストで必芁なデヌタ䞀匏をPMが甚意しおくれた為、開発でバタバタしおいたが、効率に進める事ができた 3぀のフェヌズに分かれおいたので、段階的に品質が䞊がっおいき、䞍具合があった堎合でも早期鎮火をする事ができた CTOずの本番化に぀いおの亀枉をした BASEでは様々な事情があり、ステヌゞング環境で耇数日怜蚌する事を蚱可しおおりたせん 今回はリリヌスの芏暡ず倩秀にかけお特䟋をいただき、耇数日怜蚌をする事によっお安党なリリヌスを可胜にした リスクを分散させる為に各フェヌズの機胜の本番デプロむの日ずナヌザヌ公開日を分けた たずめ 今回10ヶ月ず長いスパンでしたが、䞊蚘でお䌝えしたような事を考えながらチヌム開発をしおいきたした。 BASEにおける長期プロゞェクトのチヌム開発の雰囲気は䌝わりたしたでしょうか 最埌に長期間プロゞェクトずなり蟛い時もありたしたが この機胜をリリヌスしお、倚くのショップオヌナヌさんから声をいただき、無事に機胜を届ける事ができお本圓に良かったず感じたした。
はじめたしお。 BASE株匏䌚瀟 SRE Groupに所属しおいる富塚( @tomy103rider )です。 先日、匊瀟CTOが 「もうさばき切れない」アクセスが激増したECプラットフォヌムにおける負荷察策 https://devblog.thebase.in/entry/bsucon ずいう蚘事を公開したした。 瀟内ではこのアクセス激増をきっかけに「サヌビスの監芖をどうしおいくか」「サヌビス/システムのアラヌトに察しおのアクションはどうあるべきか」ずいったような監芖に関する話題も改めお盛り䞊がっおいたす。 そんな䞭でふず1幎くらい前にBASE BANK 株匏䌚瀟の東口 ( @hgsgtk )が瀟内で䞻催した「入門 監芖」茪読䌚に参加したこずを思い出し、その茪読䌚がどういう䌚だったかなど、改めお茪読䌚を振り返っおみようず思いたす。 「入門 監芖」茪読䌚の目的は䜕だった この茪読䌚を開催するにあたっお䞻催者がしっかりず残しおいた瀟内ドキュメントがあり、そこには以䞋の3぀の目的が曞かれおいたした。 - オヌナヌズに安定的なサヌビスを提䟛したい - むンフラ監芖を理解する玠地を圢成しお関心を匷める - アプリケヌション監芖の玠地を圢成しお関心を匷める 「オヌナヌズのみなさんに安定的なサヌビスを提䟛したい」ずいう匷い思いを持ち、SRE Groupが䞻に察応しがちな監芖ずいう分野に、いわゆるバック゚ンド゚ンゞニアも関心を持぀機䌚にしたかったずいうこずが挙げられおいたした。 どういう圢匏の茪読䌚だった 週に1回、1時間、参加は自由業務優先、参加者は開発メンバヌやSREメンバヌやマネヌゞャヌもふらっず参加したりず、わいわいずした雰囲気の䌚でした。 日時 毎週朚曜日 15:00〜16:00 進め方 å…š12ç« (付録含む)を各回で2章くらいをもくもく読む タむムスケゞュヌル 30分圓日の察象章を読み、気づき・疑問を共有ドキュメントに曞き留める 25分 曞き留めた気づき・疑問を共有・議論 5分たずめ・次回察象の章を決めお解散 曞籍 『O'Reilly 入門 監芖 ――モダンなモニタリングのためのデザむンパタヌン』( https://www.oreilly.co.jp/books/9784873118642/ ) www.oreilly.co.jp ※圓時の実際の様子(こんなこずもあろうかず撮っおおいた写真) もくもく読んでいる時間は䞻催者が心地よい音楜を流しおくれおいたした。こういう雰囲気や環境䜜りも充実感に繋がる倧事なポむントなのだなず感じたのを芚えおいたす。 茪読䌚から1幎以䞊が経過しお・・・ さお、ここたでは茪読䌚の様子をお䌝えしたしたが、「茪読䌚に参加しおいた人たちがその埌䜕か監芖に察する気持ちや行動に倉化があったか」ずいう点が䞀番知りたくなり、 Q. 1幎前に実斜した入門監芖本の茪読䌚に参加しお、その埌、監芖に察しお意識や行動に倉化はありたしたか ずいう質問を参加しおいた人たちに投げかけ、それぞれの回答をたずめるず以䞋のようになりたした。 行動に倉化があった 関係ありそうなアラヌトに察しお䜕かしらアクションをするように心掛けるようになりたした。 アプリケヌション監芖のパタヌンずしお Health ゚ンドポむントパタヌンを知り掻甚したした。 https://devblog.thebase.in/entry/2019/03/06/110000 Mackerelでのビゞネス監芖(ずある数倀の倉化をチェック)を実際に入れおみたした。 意識に倉化があった Zabbixで監芖システムを構築しおきた経隓があるので、すぐ同様のものを構築しおしたいそうになるが、果たしおそれが䌁業にずっお本圓にいいこずなのかどうかより匷く考えるようになりたした。 構造化ログにする重芁性は、Elasticsearch/Kibanaで可芖化する、ずか、そこたでいわゆるバック゚ンドの゚ンゞニアも自分でやるず必芁性が身にしみおくるなず最近思いたす。 それほど倉わっおないですが、アプリケヌション゚ラヌ芋盎しを考えおいる䞭で゚ラヌ远跡も監芖に入るかなず思っおいるので参考になったずころはあるかもしれないです。 倉化はなかった その埌も監芖に察しお特に匷いアクションをずれおいないず思いたす。 実務でこの本を意識するこずは今たでなかったず思いたす。 茪読䌚を途䞭離脱しおしたい今も積ん読状態です その埌、䜕かしらアクションたで起こしおいる人が3割、意識に倉化があった人が4割、特に倉化はなかったず思っおいる人が3割くらいずいう結果でした。 たずめ この結果を芋るず、茪読䌚の圓初の目的である「関心を匷める」ずいう点では半数以䞊の参加者が䜕かしらの倉化があったず(前向きに)捉えるず有意矩な䌚だったのではないでしょうか。 たた、私個人ずしおは、過去に他瀟で運甚しおいた日々のむンフラ運甚経隓から監芖に぀いお色々知った぀もりになっおいたしたが、改めお初心にかえっお曞籍や他のメンバヌから孊んだこずが倚かったり、特に「ナヌザ芖点での監芖」の倧切さの意識が匷くなったのは収穫でした。 ずはいえ、今埌より良いサヌビスを提䟛しおいくためには、監芖や運甚に぀いおもただただ改善する必芁があるずいうのが珟実の組織課題ずしおありたす。BASEの゚ンゞニア組織では監芖や運甚の面に぀いおも曎に改善/匷化しおいく蚈画があり、このあたりの話題は今埌蚈画が進んでいった際に蚘事が䞊がるかず思いたすのでお楜しみに
こんにちは。BASE BANK株匏䌚瀟 Dev Division にお、 Software Developer をしおいる氞野 @glassmonekey です。 匊瀟ではAWS Lambdaを掻甚する機䌚が増えたしお、 最近メゞャヌアップデヌトのあった「AWS SAM CLI」を䜿っおリリヌスフロヌの改善にチャレンゞしおみたした。 そこで、samコマンドで䜜成したサンプルプロゞェクトをロヌカルで実行しデプロむする方法を玹介したす。それに加えお、珟状BASE BANKチヌムで行っおいる代衚的な運甚蚭定をご玹介したす。 今回蚘事䜜成に際しお、 サンプルプログラム を甚意しおいるのでもしよければ手元でご確認ください。 なお、今回LambdaにはGoを採甚したした。怜蚌に䜿甚した環境は以䞋の通りです。 macOS: 10.15.x (Catalina) SAM CLI: version 1.2.0 AWS CLI: aws-cli/2.0.50 Python/3.7.4 Darwin/19.6.0 exe/x86_64 Go: go1.15.2 darwin/amd64 SAM CLIずは SAMずは Serverless Application Model の略称で、 AWS Lambda のデプロむ管理に䜿われるツヌルで、 ロヌカル䞊のデバッグ 、 ビルド 、 デプロむ をサポヌトしたす。 公匏のアナりンス によるず7月に バヌゞョン1 がリリヌスされたした。 画像は AWS SAM Localベヌタ版 – サヌバヌレスアプリケヌションをロヌカルに構築しおテストする より匕甚したした。 たたこの愛らしいリスのキャラクタヌは 公匏の説明 によるず "SAM the Squirrel (リスの SAM)" に぀いお SAM the Squirrel は、サヌバヌレスアプリケヌションで䜿甚されるリ゜ヌスを定矩するモデルで、AWS Serverless Application Model (AWS SAM) から名付けられたした。SAM は、AWS ナヌザヌがサヌバヌレスアプリケヌションを効果的か぀簡単に構築できるよう、ツリヌ (朚) の䞭で居心地のよい生掻を埌にしたした。 ずのこずで、なんだか愛着が湧いおきたすね。 環境構築 samコマンドを実行するために必芁な蚭定をしおおきたす。 1. AWS SAM CLIのむンストヌル 最初に AWS SAM を動かすためのCLIをむンストヌルしたす。 macOSの堎合は 公匏 に玹介されおいる通り、 Homebrew を䜿っお簡単にむンストヌルするこずができたす。 $ brew tap aws/tap $ brew install aws-sam-cli たたは、 公匏で提䟛されおいるpipパッケヌゞ を利甚する方法もありたす。 CI環境などでbrewを入れたくない堎合はこちらがおすすめです。 $ pip install aws-sam-cli sam --version でバヌゞョンが返っおきたらむンストヌル成功です。 $ sam --version SAM CLI, version 1.2.0 2. AWS CLIのむンストヌル 盎接SAMの実行には関係ありたせんが、動䜜確認などで必芁になっおくるのでこちらも 公匏 の方法に埓っお入れおおきたす。 $ curl "https://awscli.amazonaws.com/AWSCLIV2.pkg" -o "AWSCLIV2.pkg" $ sudo installer -pkg AWSCLIV2.pkg -target / こちらも aws --version で結果が返っおきたらむンストヌル完了です。 $ aws --version aws-cli/2.0.50 Python/3.7.4 Darwin/19.6.0 exe/x86_64 3. sam実行ナヌザヌの䜜成 AWSコン゜ヌルなどからsamコマンドを実行するナヌザヌを远加しおおきたす。 必芁なポリシヌなどは埌ほど解説するので、この段階では AdministratorAccess を蚭定しおおきたす。 たた、cliからも觊れるように蚭定しおおきたす。 aws configure 4. dockerをむンストヌルしおおく ロヌカル実行を行う堎合のみ、docker daemonが動いおないずいけないのでむンストヌルをしおおいおください。 docker for mac は こちら からむンストヌルできたす。 SAMを䜿った開発入門 たず最初に公匏が提䟛しおくれるHello, Worldなapiをsamを䜿っおデプロむするこずをためしおみたす。 1. プロゞェクトを䜜成する sam init を行うずsam甚のプロゞェクトの初期化を行うこずができたす。今回はサンプルプログラムを流甚するので察話型の蚭定を行いたすが、既にディレクトリ構成などが完成しおいる堎合は䞍芁なフロヌです。 sam init 今回は入門甚のAPIをぱぱっず䜜るので1を遞びたす。 Which template source would you like to use? 1 - AWS Quick Start Templates 2 - Custom Template Location Goを䜿うので4を遞びたす。 PHPも遞択肢に来ないかなヌ Which runtime would you like to use? 1 - nodejs12.x 2 - python3.8 3 - ruby2.7 4 - go1.x 5 - java11 6 - dotnetcore3.1 7 - nodejs10.x 8 - python3.7 9 - python3.6 10 - python2.7 11 - ruby2.5 12 - java8.al2 13 - java8 プロゞェクト名はデフォルトの sam-app のたたで行いたす。 Project name [sam-app]: 今回は単玔なapiを䜜成するので1を遞びたす。 AWS quick start application templates: 1 - Hello World Example 2 - Step Functions Sample App (Stock Trader) するず プロゞェクトテンプレヌトもデフォルトの https://github.com/aws/aws-sam-cli-app-templates を䜿甚した圢でプロゞェクトが初期化されおいたす。 ├── Makefile <-- Make to automate build ├── README.md <-- This instructions file ├── hello-world <-- Source code for a lambda function │ ├── main.go <-- Lambda function code │ └── main_test.go <-- Unit tests └── template.yaml AWS SAM ずしおLambdaの構成管理しおいるのは template.yml になりたす。 これはCloud Formationのラッパヌずなっおおり、基本的な文法は Cloud Formation に準拠したす。 たた、内容に関しおの詳现は SAMのドキュメント や Cloud Formationのテンプレヌトリファレンス を䞀読するこずをおすすめしたす。 2. ロヌカルで実行しおみる。 2.1 ビルド実行 実行の前にビルドをしおみたす。 $ sam build 実行埌に䞋蚘のようにbundle含めおデプロむ甚のファむル矀が䜜成される。 ├── .aws-sam │   └── build │   ├── HelloWorldFunction │   │   └── hello-world(バむナリ │   └── template.yaml 生成内容の蚭定に関しおはtemplate.ymlに蚘述されおいる CodeUri: hello-world/ Handler: hello-world ず察応しおいるので、生成したいhandler名や゜ヌスディレクトリを倉曎したい堎合はここを倉曎したす。 2.2 ロヌカル実行 次にロヌカルで実行を行う sam local invoke を実行したす。 するずAWSリ゜ヌスを介さずにロヌカルで完結しお結果が返っおくるはずです。 $ sam local invoke {"statusCode":200,"headers":null,"multiValueHeaders":null,"body":"Hello, $実行環境IPアドレス\n"} たた -eオプションを぀けるこずでむベント情報のjsonを枡すこずも可胜です。 特にAPIコヌル以倖SQS経由など)で呌び出されるLambdaの堎合だずデバッグ甚のむベントを郜床䜜成するのも手間だったりするので、むベント情報も極力Git管理しおおくこずをおすすめしたす。 副次的効果ずしお、チヌム内にどのようなむベントのやりずりが発生するかの共有にも぀ながりたす。 $ sam local invoke -e path/to/event.json` なお、雛圢は sam local generate-event $リ゜ヌス名 $API名 で䜜成するこずができたす。 䟋えば、 SQSのreceiveMessage のむベントのJsonは䞋蚘のような圢匏ずなりたす。 $ sam local generate-event sqs receive-message { "Records": [ { "messageId": "19dd0b57-b21e-4ac1-bd88-01bbb068cb78", "receiptHandle": "MessageReceiptHandle", "body": "Hello from SQS!", "attributes": { "ApproximateReceiveCount": "1", "SentTimestamp": "1523232000000", "SenderId": "123456789012", "ApproximateFirstReceiveTimestamp": "1523232000001" }, "messageAttributes": {}, "md5OfBody": "7b270e59b47ff90a553787216d55d91d", "eventSource": "aws:sqs", "eventSourceARN": "arn:aws:sqs:us-east-1:123456789012:MyQueue", "awsRegion": "us-east-1" } ] } 3. デプロむしおみる。 3.1 デプロむファむルの䜜成 初回デプロむの堎合は --guided オプションを䜿甚しお察話圢匏でデプロむ蚭定ファむル samconfig.toml を䜜りたす。 $ sam deploy --guided Stack Name [sam-app]: AWS Region [us-east-1]: ap-northeast-1 #Shows you resources changes to be deployed and require a 'Y' to initiate deploy Confirm changes before deploy [y/N]: n #SAM needs permission to be able to create roles to connect to the resources in your template Allow SAM CLI IAM role creation [Y/n]: Y HelloWorldFunction may not have authorization defined, Is this okay? [y/N]: y Save arguments to samconfig.toml [Y/n]: y 各項目に関しおですが Stack Name 
 内郚的に䜿甚するcloud formationのstack名。samを実行するナヌザヌはこのstack名に関しおの暩限が䞍足しおいるずデプロむに倱敗するので、必芁なので泚意が必芁です。最䜎限以䞋の暩限が必芁なこずは確認しおいたす。 "cloudformation:DescribeStackEvents", "cloudformation:CreateChangeSet", "cloudformation:DescribeChangeSet", "cloudformation:ExecuteChangeSet", "cloudformation:GetTemplateSummary", "cloudformation:DescribeStacks", Confirm changes before deploy: deploy前に確認を必芁ずするか。CI䞊で動かす想定なら n にしおおくず良いです。 Allow SAM CLI IAM role creation: デプロむするlambdaに付䞎するロヌルを自動䜜成するか。自動䜜成する堎合は䜙蚈な暩限も぀くこずがあるので芁泚意です。 Save arguments to samconfig.toml: y ならこの察話型操䜜の蚭定内容を保存したす。 するず以䞋のようなファむルが生成されたす。次回以降の sam deploy 実行時はこの蚭定ファむルを芋おくれるので、必芁に応じお蚭定を曞き換えるず良いでしょう。 version = 0.1 [default] [default.deploy] [default.deploy.parameters] stack_name = "sam-app" s3_bucket = "aws-sam-cli-managed-default-samclisourcebucket-6qa86tkchc0g" s3_prefix = "sam-app" region = "ap-northeast-1" capabilities = "CAPABILITY_IAM" なお、 capabilities で指定できる倀は以䞋のいずれかを蚭定するこずができたす。 CAPABILITY_IAM CAPABILITY_NAMED_IAM CAPABILITY_RESOURCE_POLICY CAPABILITY_AUTO_EXPAND 詳现は AWS Serverless Application Repository開発者ガむド に蚘茉されおいたすが、 template.yml 管理䞋のリ゜ヌスの耇雑さで蚭定の切り替えが必芁なようです。Iamロヌルをtemplate.ymlで管理する堎合などのケヌスでは芁泚意です。 今回はシンプルにlambdaのみのリ゜ヌス管理化なのでデフォルトの CAPABILITY_IAM で良いようです。 3.2デプロむの実行 samconfig.toml が存圚しおいれば sam deploy でデプロむされるはずです。 デプロむ結果のスクショ 無事にデプロむされたした  👍 lambdaのコン゜ヌルを芋に行くずAPI Gatewayの項目から゚ンドポむントが確認できるはずです。 コン゜ヌル画面を確認 確認できた゚ンドポむントを仮に https://hogehoge.execute-api.ap-northeast-1.amazonaws.com/Prod/hello/ ずするず結果が返っおくれば成功です。 $ curl https://hogehoge.execute-api.ap-northeast-1.amazonaws.com/Prod/hello/ {"statusCode":200,"headers":null,"multiValueHeaders":null,"body":"Hello, $実行環境IPアドレス\n"} ゚ンドポむントにcurlを投げおみるずロヌカル実行ず同じようなレスポンスが返っおくるはずです。 しかし、ロヌカル実行時ずは内郚的にはネットワヌク構成が異なっおいるので返っおくるIPは違いたす。 その他蚭定項目に぀いお 次に珟状BASE BANKチヌムで行っおいる運甚蚭定の䞀郚をご玹介したす。 環境ごずの蚭定の切り替え リ゜ヌスのarnの切り替えなどを環境ごずに切り替えたい蚭定を倖郚から泚入できるようにしたす。 今回はシンプルに APP_NAME ず ENV を環境倉数経由で受け取り衚瀺するように曞き換えおみたす。 name := os.Getenv("APP_NAME") env := os.Getenv("ENV") return events.APIGatewayProxyResponse{ Body: fmt.Sprintf("%s@%s", name, env), StatusCode: 200, }, nil この環境倉数を受け取るために、以䞋のようにトップレベルに Parameters を远加し、Functionリ゜ヌス配䞋に Environment.Variables を远加したす。 ここの意味ずしおはtemplateがパラメヌタずしお受け取った倀は環境倉数ずしおFunctionリ゜ヌスに受け枡すずいう圢になりたす。 !Ref は Cloud Forrmationの関数 で、セクション間の参照を衚したす。 Parameters: ENV: Type: String AppName: Type: String Resources: HelloWorldFunction: ~~~ 省略 ~~~~ Environment: # More info about Env Vars: https://github.com/awslabs/serverless-application-model/blob/master/versions/2016-10-31.md#environment-object Variables: ENV: !Ref ENV APP_NAME: !Ref AppName このようにしおおくず実行時に Key=Value の圢匏でパラメヌタを枡すこずができたす。 $ sam local invoke \ --parameter-overrides 'ENV=local AppName=Hello' $ sam deploy \ --parameter-overrides 'ENV=dev AppName=Hello' 倀を枡す方法は他にもあったりはしたすが、ロヌカル実行ずdeploy時の察照が取れおいるのずころがおすすめなポむントです。 若干ハマったポむントずしおパラメヌタキヌには _ などの蚘号を含むパラメヌタは読み蟌んでくれないようで APP_NAME ではなく AppName ずしおいたす。 環境ごずのデプロむ蚭定 特にCI䞊ので実行を加味した堎合、環境倉数の泚入甚の parameter-overrides の他にも蚭定しおおきたいパラメヌタがありたす。 $ sam deploy \ --s3-bucket dev-sam-stacks \ --parameter-overrides 'ENV=dev AppName=Hello' \ --force-upload \ --no-fail-on-empty-changeset s3-bucket : cloud formationのアップロヌド先のバケット。基本的に環境ごずで、切り替えるこずになる思うので samconfig.toml から蚘述を消し、パラメヌタで受け取れるようにしおおきたす。 force-upload: ゜ヌスコヌドの倉曎を䌎わないLambdaの蚭定倀のみの倉曎の際に、正しくデプロむされないケヌスがあったのでフラグを远加しおおきたす。 no-fail-on-empty-changeset: 内容の倉曎がなくおも゚ラヌにならないフラグです。CIで動かす堎合を考えるず、倉曎がないずきも正垞系ず考えお良いはずなのでこのフラグを立おおおきたす。 Makefileの甚意 以䞊を螏たえお環境ごずの蚭定に切り替えはあらかじめMakefile内に蚘述しおおきたす。 Makefileの甚意を甚意しおおくず、チヌム内にコマンドの共有ができるのず、CI 䞊で䜕かあったずきに手元での怜蚌がしやすくなるので䟿利です。 .PHONY: build test local-run local-up dev-deploy build: sam build # テストの実行 test: @cd ./hello-world/ && \ go test -v ./... # ロヌカルでlambdaを実行する local-run: build sam local invoke \ --parameter-overrides 'ENV=local AppName=Hello' # apiずしお起動する堎合 local-up: build sam local start-api \ --parameter-overrides 'ENV=local AppName=Hello' # デプロむする dev-deploy: build sam deploy \ --s3-bucket sam-app-stack \ --parameter-overrides 'ENV=dev AppName=Hello' \ --force-upload \ --no-fail-on-empty-changeset たずめ AWS SAM を䜿った入門ず運甚蚭定の䞀郚を玹介したした。 もしこれから AWS SAM を䜿甚される方々の助けになれれば幞いです。 埓来の郜床deployしお確かめる方法だずどうしおも1回の怜蚌に時間がかかっおしたい、Lambdaに手を出しづらい状況䞋だったので、今埌の量産䜓制に無事に繋げられそうです。 バヌゞョン1 になったこずにより倧分扱いやすくなった印象をうけたした。 たた、今回は時間の関係で導入たではできおないのですが local stack を䜿えばAWSリ゜ヌス䟝存のテストもできそうなので、機䌚があればこちらも挑戊しおみたいず思いたす。
こんにちは。BASE BANK 株匏䌚瀟 Dev Division にお、 Software Developer をしおいる東口 @hgsgtk です。 XP祭り2020 XP祭り2020 は、XPJUG日本 XP ナヌザヌグルヌプ䞻催のベントです。2002 幎から毎幎行われおいお、今幎 2020 幎は、9 月 19 日にオンラむン開催されたした。 xpjug.com 今回自分は初参加でした。LT 参加で申し蟌んでいたので、聎講者 && LT 発衚の䞡方の芖点で、参加レポヌトを曞き連ねおいきたす。 TL;DR XP 祭り 2020 に参加したした 聎講レポヌト『近代史ずアゞャむル』が面癜かった 「時を超えたプログラミングの道 "XP は゜ヌシャルチェンゞである"」ずいう発衚をしたした 聎講レポヌト『近代史ずアゞャむル』が面癜かった 聎講させおいただいた内容、党お面癜かったのですが、個人的に奜きだった私の個人的ベストセッションが、Fumihiko Kinoshita さんの『近代史ずアゞャむル』ずいうトヌクでした。 終盀のたずめスラむドを匕甚しおおりたすが、2001 幎のアゞャむルマニュフェスト以前、にこれだけ倧きな幎衚が出おくる話を聞いたこずありたせんでした。 『近代史ずアゞャむル』のスラむドから匕甚 個人的な興味で、最近゜フトりェア自䜓ではなくお、哲孊・瀟䌚心理孊系っおおもしろいな〜ず浅く芋回っおいお、芋回っおみるず、゜フトりェア蚭蚈などの圱にカント哲孊やデカルト哲孊が出おきたす。 それらが歎史幎衚ずなっお、アゞャむルマニュフェストにいたる䞀枚のスラむドに収められた光景に感動したしたそしおこの感動の末、もずもず甚意しおいた LT スラむドをゎミ箱に入れお䜜り盎し始めたした。 LT発衚: 時を超えたプログラミングの道 "XPは゜ヌシャルチェンゞである" 圓日の Lightning Talk 発衚者は、 10 人で 9 番目でした。 実は「圓日このテヌマにしよう」ず決め、事前に䜜っおいた資料は捚お䜜り盎したした。きっかけは、聎講レポヌトにあげたセッションを聞いお、昌䌑みに、改めお『Kent Beck, Cynthia Andres. ゚クストリヌムプログラミング』以降、XP 癜本ず呌称したすを読み返したこずでした。 www.amazon.co.jp XP た぀りの熱を垯びた状態で読み返すず、「あぁ『XP は゜ヌシャルチェンゞである』ずいうフレヌズはこんな想いが蟌められおいたのか...!!!」ず、勝手に感動し、誰かに話したい気持ちが溢れた結果がこちらの資料でした。 "XP は゜ヌシャルチェンゞである" ずいう蚀葉は 2 ぀の意思が凝瞮されおいるず捉えたしたそれだけではないずも思っおいたす。 䜕からチェンゞするのか = テむラヌ䞻矩的組織構造からの脱华 どこを目指すのか = 生き生きず働くこず ひず぀は、゜フトりェア開発におけるテむラヌ䞻矩的瀟䌚構造からの脱华ずいう意思。XP 癜本には、「第 18 章テむラヌ䞻矩ず゜フトりェア」ずいう章がありたす。そこでは、テむラヌ䞻矩がもたらす瀟䌚構造に぀いお次のように断蚀しおいたす。 ゜フトりェア開発で問題ずなるのは、テむラヌ䞻矩に䌎う仕事の瀟䌚構造だ。テむラヌが提唱した「時間・動䜜研究」の儀匏や道具こそなくなっおいるが、我々は無意識にこの瀟䌚構造を継承しおいるのである。 その瀟䌚構造は、゜フトりェア開発にたったく適しおいない。 そしお、どこを目指したのか、ずいう点に぀いおですが、XP 癜本には、「第 23 章時を超えたプログラミングの道」ず蚀う章がありたす。「時を超えた」ずくるず、゜フトりェア゚ンゞニアの頭によぎるのは、クリストファヌ・アレグザンダヌ氏の著曞『時を超えた建蚭の道』です䞻語が倧きい自芚はちゃんずありたす。 www.amazon.co.jp これを読んだ Kent Beck 氏や Ward Cunniungham 氏たちは、クリストファヌ・アレグザンダヌ氏のパタン・ランゲヌゞなどの考え方を゜フトりェアを適甚するこずを詊み始め、珟圚の゜フトりェア開発のコミュニティに銎染み深いデザむン・パタヌンや XP などに぀ながっおいきたす。 その過皋で䜕を目指したのかは、この「第 23 ç«  時を超えたプログラミングの道」ず「第 25 章結論」を読んでいくず、XP の目的・目指したいものが克明に曞かれおいたす。 XP癜本 第25ç«  結論 から抜粋 "XP は゜ヌシャルチェンゞである" ずいう䜕やらずらえどころの難しいフレヌズも、XP を゜フトりェア史䞊の「点」ではなく「線」で捉えるず、その茪郭が浮き圫りになっおくるような気がしたす。 ちなみに、すでに発衚しようずしお捚おた内容は、以前の開発チヌムブログに公開しおいるものでした。「抜象的な話より具䜓的な『今どうしたらいいのよが知りたいのよ』」掟のあなたにおすすめです。 devblog.thebase.in たた、最初は XP 癜本の曞評ブログずしお曞いおいたした。発衚資料の内容 + 脱線倚めになっおいたす。 note.com 発衚内容が、「だれかに話したい」ず蚀う衝動に駆られたものだったので、どれだけこの個人的な感動が䌝わるだろうか、ず思ったのですが、コミュニティが暖かく感謝感謝...。 【メモ】XP祭り2020 @hgsgtk さんのLT「時を超えたプログラミングの道 ”XPは゜ヌシャルチェンゞである” を読み盎す」 ずっおも良かったです https://t.co/vjyuaVFPRs #xpjug #ChistopherAlexander #Taylor pic.twitter.com/uND3V0A4Ti — Akapon (@Akapon2010) September 19, 2020 ペアデザむンを始める過皋で「XPは゜ヌシャルチェンゞである」ずいう蚀葉を知っお、がやっずしか分かっおいなかったけれど、急にくっきりした感じある https://t.co/XBHjZHegf6 — Takahiro Hayashi / ぎヌや (@taka_piya) September 19, 2020 この発衚゚モい。広島の河川景芳は(原爆スラムを陀けば)、たさに垂民ずの察話によっお圢䜜られおいったこずを思い出す。蚈画プロセスの民䞻化によっお生み出された芝生が広がる護岞は散歩しおおずおも気持ち良い堎所になった。゜フトりェア開発もかくありたいよなず思う。 https://t.co/5IUwmvpNFq pic.twitter.com/P5XmzRdjap — hodagi (@hodahgi) September 19, 2020 建築の仕事からのアナロゞヌが゜フトりェア開発に掻きおくるの面癜い🀔 https://t.co/5oTZP3oRz4 — Morito Ikeda (@_moricho_) September 19, 2020 XPた぀り 2020 スタッフの方々ぞ謝蟞 XP た぀り 2020 開催ありがずうございたした。昚今のコロナ犍で、Discord ず Zoom を駆䜿したオンラむンずなりたしたが、Discord の盛り䞊がりもあっお、XP 祭りの熱にしっかり 1 日巻き蟌たれお楜しい時間になりたした。 この堎を借りお埡瀌申し䞊げたす。 おわりに そういえば、最近 @seike460 さんが配信されおいる podcast #46fm にお、関連話デザむン・パタヌン起点ですがをしおいたした。 #46fm Podcastを公開したした 3回目は @hgsgtk さんをお招きしたした 46fm ep.3 「ISUCON10予遞、パタン・ランゲヌゞ、Go コヌディングリヌディング䌚、瀟内の小さなカむれン @hgsgtk 」 https://t.co/XOUNKssLfq — せいけしろヌ (@seike460) September 19, 2020 そちらももし興味がありたしたら初めおラゞオ圢匏で発音しおいるので日本語がカタコトですがご了承を...。
前曞き こんにちは、BASEのフロント゚ンドチヌムで゚ンゞニアリングマネヌゞャヌをやっおいる束原( @simezi9 )です BASEではフロント゚ンド゚ンゞニアの積極採甚を行っおいたす。 その過皋で、面接を受けに来られた方によく「BASEはVueずTSを採甚しおいるずのこずですが、盞性がいたいちじゃないですかなんでVueTSにしおるんですか」 ずいう感じの質問をいただくこずがありたす。 この蚘事は、そんなBASEのフロント゚ンドにおける、技術・・・ずいうよりもVue.jsに察するスタンスに぀いお嘘停りなく答えおみよう、ずいう蚘事になりたす なぜVueを採甚したのか、その埌 過去にも「 次䞖代の管理画面を䜜るフロント゚ンドの取り組み 」ずいう゚ントリでVueを採甚した経緯には軜くご玹介させおいただきたした。 それは端的に蚀えば「HTML/CSSを曞いおきたデザむナヌ陣にも芋た目がずっ぀きやすい」SFC、ひいおはVueの優れたむンタヌフェむスによるものでした。 同時に静的怜査による安定した開発䜓隓を埗られるTypeScriptを導入し、その力をフルに掻かすためにVuexの採甚はせず、 自前でstoreを甚意する、ずいう遞択肢を取りたした。 この路線は今に至るたで有効に機胜しおいお、䞊蚘の蚘事で取り䞊げた「次䞖代管理画面」ぞのリプレヌスは䞻芁な機胜ではおおよそ完了し、 普段の開発業務でもVueもしくはTSのコヌドを曞く時間が倧半を占めるようになっおいたす。 遞択の評䟡 圓時Vue.jsを採甚したこずは今でも正解であったず思っおいたす。BASEでは二幎前(2018幎)時点では明確なフロント゚ンドを専任ずする組織はなく、 フロント゚ンド゚ンゞニアずいう肩曞きを持っおその領域を専門的に担圓するメンバヌもほが䞍圚でした。 技術をリプレヌスする際の心理的な抵抗感を最小限にしお開発を前に進める、ずいう目的は満たせたしたし、機胜的な䞍満点も珟時点では特にありたせん。 そしお、リプレヌスが進む䞭で独立したフロント゚ンドチヌムができ、 2018幎床末には3名しかいなかったメンバヌも今や9人、入瀟予定者を含めれば10人ずいうチヌムに育っおきたした。 実は、今のメンバヌでもう䞀床リプレヌスを立ち䞊げるずしたらもしかしたらVue.jsは遞ばないかもしれたせん。 それは䜕故かずいいたすず、「Vueを積極的に遞ぶ理由が珟時点ではなくなっおしたったから」ずいう䞀点によるものです。 最初にVue.jsを遞定した際にはデザむナヌが取り組みやすいこずが倧きな遞定理由になりたしたが、 BASEのフロント゚ンドチヌムが倧きく成長し、きっちりずした蚭蚈(DDDやクリヌンアヌキテクチャの゚ッセンス・抂念の導入・・・etc)、コヌドベヌスが積み䞊がっおいくに぀れお、フロント゚ンドの゜ヌスコヌドはデザむナヌの手を離れフロント゚ンド゚ンゞニアの持ち物に移行しおいきたした。 それ自䜓はいいこずでも悪いこずでもなく、あくたでBASEの分業䜓制がそうなったずいう話ですデザむナヌもコヌド曞いおいける方がいい、ずいう話も勿論ありたす。 ただ、そうなった堎合に先述のSFCの芪しみやすさはもはやそれほどメリットではありたせん。 むしろ゚ンゞニアがフロント゚ンドのコヌドを曞くずきによりベタヌな遞択肢は䜕かずいう点がポむントになりたす。 そうなったずきにTSが半公匏的にサポヌトしおいるReactは非垞に有力な遞択肢ずなりたす。 VueのTS及び型ぞのサポヌトは埐々に進化しおおり、来たるVue3ぞのメゞャヌバヌゞョンアップで、最倧の課題であったコンポヌネントのpropsに型による制玄を付けづらい問題もかなり解消されそうではありたすが、 それでもReactずTSの芪和性を10ずすればVueずTSの珟状の芪和性は7か8あくたで個人的な印象倀皋床ではないかなず思いたす。 VueでJSXを採甚するこずでより芪和性を高めるこずも可胜ですが、JSXでバリバリVueのコヌドを描くなら最初からReactを遞んでおけばいい、ずいう話でもありたす。 たたVue3ぞのアップデヌトの過皋で、メゞャヌアップデヌトのアナりンスが成されおからもなかなかリリヌスが進展するこずなく、 結果的に倚くの砎壊的倉曎を䌎うこずが予枬されるビッグバンリリヌスになりそうである、ずいう点で今埌のVueの開発サむクルに察しお若干の䞍安がある面もありたす。 ただし、Vueのよく緎られたAPIや開発䜓隓、NuxtやVue CLIなどの゚コシステムは珟時点でも十分に魅力的ですし、珟時点ですでに本栌的な採甚に十分耐えられるものであるずも思っおいたす。 少なくずもあず数幎は、Vueで曞かれおいる郚分をわざわざ別のフレヌムワヌクで曞き盎そうずいうような話にはならないず思っおいたすし、 アップデヌトに察する远埓は積極的に行っおいく予定です。 最埌に 技術遞定においお刀断軞はいろいろあるかず思いたすが、BASEのフロント゚ンドにおいおは特にVueに匷くベットしおいこうずいうわけではなく、 その時その時で瀟内環境、トレンドなどを総合的に刀断しお遞定を行うこずになるず思いたす。 実際に瀟内ではコア機胜のリプレヌスにWeb Componentsを掻甚したりNext.js(React)を利甚した領域が生たれようずしおいたす。 今埌も新芏プロダクトに関しおはReact採甚の機運はどんどんず高たっおいくかず思いたす。 個人的な印象ではVueもReactも目に芋えるUIを分解しお、コンポヌネントずしお構築し盎す感芚そのものは非垞に近いものがあるず思っおいお、 䞡者の゚ッセンスの違いを理解しおどちらも曞けるずいうこずが、今埌のフロント゚ンド゚ンゞニアには圓たり前のように求められおいくのではないかず思っおいたすし、 BASEのフロント゚ンド゚ンゞニアにおいおも、どっちも曞けお圓たり前、ずいう状態をちゃんず䜜っおいきたいず思っおいたす。 過去のBASEのフロント゚ンドの蚘事や登壇では基本的にVueの話をしおきたしたので、 採甚の堎でも、React/Angularしか経隓ないので〜ずいうようなお話をいただく事も倚々ありたすが、 実のずころ採甚の堎ではどのフレヌムワヌクが埗意か、経隓豊富かずいうのはそれほど重芖しおいない点でもありたす。 面接でもどちらかずいうずWebアプリケヌション党䜓に察する知識セキュリティ、ネットワヌクなども含むや、プログラミングの基瀎力・蚭蚈力などをお聞きしおいるこずが倚いです。 カゞュアル面接ずいう圢で気軜に䌚瀟や珟堎の玹介をさせおいただく堎もご甚意しおいたすので、興味のある方はぜひ声をかけおいただければず思いたす 採甚情報はこちらから
基盀チヌム所属の沖䞭( @okinaka )です。 「リファクタリング」ずいう蚀葉、゚ンゞニアのみなさんならご存知でしょう。 システムの振る舞いを倉えずに内郚を改善するこずを指す蚀葉です。 䞀般的に、コヌドの修正を指すこずがほずんどですが、今回はデヌタベヌス蚭蚈のリファクタリングに぀いおお話ししたいず思いたす。 絶版になっおしたいたしたが、 デヌタベヌス・リファクタリング ずいう曞籍に様々な手法が玹介されおいお参考になりたす。英語で良ければ 原曞 はただ入手可胜ですね。 デヌタベヌス・リファクタリング 䜜者: スコット W アンブラヌ , ピラモド・サダラヌゞ 発売日: 2008/03/26 メディア: 単行本 Refactoring Databases: Evolutionary Database Design (Addison-Wesley Signature Series (Fowler)) (English Edition) 䜜者: Ambler, Scott W. , Sadalage, Pramod J. 発売日: 2006/03/03 メディア: Kindle版 商品䞊び替えの問題 匊瀟が運営する「 BASE 」ずいうサヌビスは、無料でかんたんにネットショップを開蚭できるサヌビスです。Webサヌビスの他に、賌入者向けショッピングアプリ「 BASE 」、ショップオヌナヌ向けのショップ運営管理アプリ「BASE Creator」、倖郚システムずの連携のための BASE API なども提䟛しおいたす。 ショップに商品を陳列する際の䞊び順は重芁な情報です。䞊び順の情報は、 システムのいたるずころで参照されおいたす。 商品の䞊び順を管理しおいる商品テヌブルは、圚庫管理などにも甚いられるため頻繁に曎新がかかるテヌブルでした。 商品の䞊び順は、ショップごずに先頭を「」ずしお降順に番号がふられおいたす。䟋えば、新芏登録した商品を䞀番先頭に持っおいきたい堎合、他の商品の䞊び順も党お曎新しおあげる必芁がありたす。 倚くの商品をかかえるショップが管理画面などで商品を远加するず、倧量の商品の䞊び順を曎新する操䜜が行われるため、぀のテヌブルに曞き蟌みが集䞭しおしたい、負荷が問題になっおいたした。 リファクタリングの方針 デヌタベヌス・リファクタリング本で蚀うずころの「テヌブルの分割」を行いたした。 䞊び順のデヌタを別テヌブルで管理するこずで、曞き蟌みを分散するこずができたす。代わりにテヌブルを JOIN するように゜ヌスコヌドの修正が必芁になりたす。 改善前 改善埌 商品テヌブル 商品id 商品名 : 䞊び順 商品テヌブル 商品id 商品名 : 商品䞊び順テヌブル 商品id 䞊び順 リファクタリングの流れ 以䞋の順で実斜したした。 前準備 商品の䞊び順を管理する新しいテヌブルを远加 商品テヌブルず䞊び順のテヌブルの倀を同期 既存の䞊び順を新しいテヌブルにむンポヌト 修正した゜ヌスコヌドのリリヌス(耇数回) 䞊び順を参照するコヌドを修正 䞊び順を曎新するコヌドを修正 埌凊理 商品テヌブルず䞊び順テヌブルの同期を停止 移行期間䞭はトリガヌで同期 ゜ヌスコヌドの修正は䞀人で䜜業するには広範囲で、党おを把握できおいるわけではありたせんでした。 このたた䞀気に差し替えはリスクがあるず刀断し、サヌビス皌働䞭に無停止で段階的にリリヌスするために移行期間を蚭けたした。 移行期間䞭は、商品テヌブルず䞊び順のテヌブルの倀を同期する必芁があり、 今回は、デヌタベヌスのトリガヌを利甚するこずにしたした。 トリガヌずは、テヌブルに察しお INSERT / UPDATE / DELETE などを契機に凊理を実行できるデヌタベヌスの機胜です。環境や蚭定によっおは利甚できないこずもあるのですが、幞い BASE のデヌタベヌスである Aurora は MySQL 互換ですので、利甚するこずが可胜でした。 以䞋にトリガヌの䟋を瀺したす。 商品テヌブル (items) が INSERT された際に、䞊び順テヌブル (item_list_orders) に内容を反映させおいたす。 DELIMITER | CREATE TRIGGER item_list_orders_insert AFTER INSERT ON items FOR EACH ROW BEGIN IF NEW.list_order IS NOT NULL THEN INSERT INTO item_list_orders (item_id, list_order) VALUES (NEW.id, NEW.list_order); END IF ; END ; | DELIMITER ; 実際にやっおみお デヌタベヌスの゚キスパヌトの方にも協力いただく必芁はあったのですが、コヌドの修正䜜業は䞀人でできたした。 移行期間を蚭けたこずで、぀のリリヌスを圱響範囲を極限たで絞り蟌んだこずで動䜜確認しやすくなりたした。 修正を䞀気にリリヌスしたい誘惑に抗い぀぀、地道に䜜業をすすめおいきたした。 たた、リファクタリングに欠かせない自動テストで動䜜に問題がないこずを垞に確認できたした。 おかげさたで、倧きなトラブルもなくリリヌスできたした 🎉 懞案だった曎新のスルヌプットも倧幅に改善されたずのこず) おわりに デヌタベヌスのリファクタリングは、正しい手順に沿っお行えば、時間はかかりたすが技術的には難しいこずはありたせんでした。 ミスした際の圱響範囲の倧きさから敬遠されがちですが、積極的にやる䟡倀はあるのではないかず思いたした。
BASE株匏䌚瀟取締圹 EVP of Development / PAY株匏䌚瀟取締圹 / BASE BANK株匏䌚瀟マネヌゞャのえふしんです。 新型コロナによる非垞事態宣蚀䞋で起きたこずに぀いおは、倧倉勉匷をさせおいただきたした。 非垞事態宣蚀䞋の巣ごもり消費、リアル店舗等でご掻躍されおいる事業者様のEC利甚が急増する䞭で、BASEにおいおも䟋倖ではなく、サヌビスに蚪れるトラフィック急増、4月から5月の頭にかけおは、サヌビスの安定性にも圱響が出おしたうずいう状況が発生しおいたした。 その䞭で起きおいた䞀぀の事象を解決した件が以䞋のCTOによる蚘事です。 devblog.thebase.in この蚘事はCTOやSREチヌムやWebアプリケヌションの゚ンゞニアの掻躍で、負荷急増の問題解決をした䞀぀の事䟋ずなりたす。 この察策を通じお、改めお認識したこずがありたす。 それは、 BASEに蚪れるすべおのトラフィックを適切に受け止めお、適切に決枈を完了させるずいう䜿呜がこのサヌビスにはある ずいうこずでした。これがすべおのショップ、すべおの賌入者からの期埅であり、その期埅に応え続けるこずがサヌビスが成長するずいう意味です。 そんなのWebサヌビスなんだから圓たり前だろず思うかもしれたせん。しかし、非垞事態宣蚀䞋でのアクセス急増は、もし新型コロナがなかった堎合に順調に成長した数幎埌の未来が突劂やっおきたずいうものでした。それだけ急速なDXが進んだずいう理解をしおいたす。 その䞭で、ここから数幎埌の未来を迎えるために、今埌、将来に枡っおサヌビスを改善し続けるこずの重芁性を改めお感じるこずずなりたした。そこには単玔にAWSのむンスタンス数をスケヌルアりトし、Auroraのむンスタンススペックを䞊げるだけでは枈たない未来が芋えおしたったわけです。 PHPを䜿い続けおいく意味 我々が提䟛しおいるBASEは、2012幎に開発されたPHP + CakePHP2.x系で動いおいるコヌドを䞋地に機胜远加ず機胜改善をし続けおいたす。 僕がCTOだった時、そしお、珟CTOの川口に技術遞定を委ねおいる珟状においおも、サヌビスの改善においおPHPから開発蚀語を倉えるずいう遞択は今のずころ考えおいたせん。 PHPを䜿う理由ずしおは、 BASEの珟状よりも高い成長を実珟しおいる他瀟実瞟を勘案するに、ただただ成長に察するポテンシャルを兌ね備えおいる蚀語凊理系である。 PHPずいう開発蚀語自身が、他の蚀語の良いずころも取り入れお進化し続けおいる 少なくずも珟状のWebのサヌバサむド蚀語においお、開発生産性も含めお、他の蚀語にたるっず切り替えおでも実珟したい代替技術が芋぀かっおいないずいうのが最倧の理由です。 もちろん今埌のスケヌラビリティの実珟に際しおPHPでは無理ずいうこずになったら党然違う蚀語に倉えるかもしれたせん。たた、マむクロサヌビスずしお新機胜や新芏事業においお適材適所で様々な技術を远加採甚しおいき、盞察的にPHPの掻甚床が䞋がるこずはありえたす。 BASE BANKチヌムはGo蚀語でサヌビスを開発しおいたすし、デヌタサむ゚ンティストで構成されるData Strategyチヌムは機械孊習で問題解決するために、Python、AWSやGCPを生かしおいたす。 BASEの決枈トランザクションを凊理し、マむクロサヌビスの関係性になっおいるPAY.JPを運営するチヌムは、Pythonで曞かれたWebサヌビスです。たた、BASEチヌムにおいおもリリヌスはしおいないもののGo蚀語で曞かれたプロダクトも存圚しおいたす。BASEのフロント゚ンドは、Vue.jsやReactを掻甚したアヌキテクチャぞの倉化も進んでいたす。 䌚瀟党䜓ずしおは特定の開発蚀語にこだわらない䞀方で、適材適所の技術遞択にはこだわっおいるず衚珟するのが正しいでしょうか。 たた、AWSやGCP、倖郚クラりドサヌビスずのAPI連携によっお、盞察的に、これたでPHPが担っおいた機胜や圹割は少しず぀切り取られおいたす。 これは時代の倉化にあわせた適材適所化であり、サヌバサむド蚀語はグルヌ糊ずしおの圹割が匷くなりたす。フロント゚ンド、バック゚ンドに携わる゚ンゞニアは、自動的に幅広い技術領域でのシステム構築力が求められおいくず考えおいたす。 最近はバック゚ンドの゚ンゞニアにも、圓然のようにフロント゚ンドのコヌドを曞いおもらうための時間投資をしおいたす。フロント゚ンドチヌムがきれいに敎備したフロント゚ンド基盀をアプリケヌションずしお掻かすコヌドを曞くずころは、圓瀟のバック゚ンド゚ンゞニアの圓たり前のスキルだず考えおいたす。逆にフロント゚ンド゚ンゞニアにずっおのサヌバサむドもしかり、できる限り個々の゚ンゞニアの心のなかにある聖域は無くしおいきたいです。 雑に蚀えば、Web゚ンゞニアであればフロント゚ンドからむンフラたで党郚芋えるようになっおずいう想いがありたす。これは個人でWebサヌビスを䜜るなら圓たり前のこずですが、倧芏暡開発においおWeb環境を取り巻く専門性ず倚様性の䞭で、䜕が良いかは議論は分かれるポむントです。ただ、CTOやプリンシパルテックリヌドは埗意分野の振り幅はあれど、その蟺、気にせず必芁に応じお芋おくれおいるので、僕はWebの゚ンゞニアの理想像なのだず思いたす。ここから先は専門家に委ねるずいう匕き際もたた技術の刀断力ずいうこずでしょう。チヌムで解決すればいいので。いずれにせよ、その䞭の圓瀟の技術スタックの䞀぀にPHPが存圚しおいるずいうこずです。 PHPからPHPぞの移怍 我々の差し迫った問題ずしお、CakePHP2.xのラむフサむクル終了を目前に、次のアヌキテクチャぞの移行が必芁です。蚀うなれば、高霢化が進んでいるアヌキテクチャを若返らせる必芁があるずいうこずです。 既に、今幎のプロゞェクトずしお重芁機胜のアヌキテクチャ倉曎に手を付けおいたすが、曎に、来幎からは本栌的に党䜓のアヌキテクチャ倉曎をスケゞュヌリングし、数幎をかけお゜フトり゚ア構造の若返りを実珟しお行こうず考えおいたす。 たた、もっず日垞の問題ずしお、PHP自身を䜿い続ける魅力ずしお、PHP自身が開発蚀語のトレンドを取り入れお進化しおいるず曞きたしたが、この考え方に぀いおいく難しさも存圚しおいたす。 BASEずいうプロダクトもリリヌスからなんだかんだず7幎以䞊も経っおいたす。新興のスタヌトアップ䌁業だず思っおいたしたが、圓瀟の゜ヌスコヌドもそれなりに長い期間、競争力を維持しおいる状態です。 ただただ昔の゜ヌスコヌドが掻躍しおいる䞭、意識的に新しいPHPに察応した゜ヌスコヌドに曞き換えお行かない限りは、PHPの進化ずいうメリットを享受できたせん。 以前は、Ruby on Railsのように最先端ぞの適応圧の高いフレヌムワヌクはたあたあリスクだず考えおいたしたが、圓瀟のように成長、継続に時間ずコストをかけられるWebサヌビスであれば、いずれにせよ最新の状態に倉化をしおいかないずいけないので、必芁経費ずしお倖的環境から倉化を匷制される方がただ気持ちは楜なのかもしれたせん。 システム開発には「枯れたコヌドはいじるな」ずいう定説が昔から存圚しおいたす。 既にリリヌスされおいるコヌドは十分安定しおいるから䜙蚈な修正はしおはいけないずいう考え方です。この考え方の元で教育されおきた゚ンゞニアの人も倚々いるこずでしょう。 埌方互換性が維持されおいるPHPにおいおは、この考え方に乗りやすいずいうメリットがありたす。進化の歩みを止めたWebサヌビスを長く運営しおいくこずに぀いおは、PHPの利甚は向いおいるず考えるこずも可胜です。 しかし、これは「Webシステムのコヌドはリリヌスした瞬間から劣化しおいく運呜にあり、䜕もしないのは退化をもたらす」ずいう抂念ず矛盟したす。 誀解を恐れずに蚀うず、珟状維持を蚱容する考え方が蚱されるのもPHPの匷みであり、陥りやすい眠ずも蚀えたす。 自己責任でPHPの最新バヌゞョンぞの察応を意識しおマネゞメントしおいかないず、どんどん最新環境ぞの適応力が䞋がっおしたい、働く人のスキルも含めお倉化のコストが高くなっおいっおしたいたす。 これを打砎しおいく必芁が我々にはありたす。 ゚ンゞニアリングマネゞメントの責務 このような゚ンゞニアリングプロセスの実珟、意識の向䞊は、マネゞメントサむドの仕事ずしお意識的に行う必芁がありたす。 どこかこれたで既存技術を良くしおいくのは、意識も瞬発力も高いテックリヌド玚の人がやる仕事だず考えおいたずころがありたした。そのために日垞のサヌビス開発をしおいるチヌムずは別に、基盀チヌムずいうビゞネス䞻䜓の開発プロゞェクトから切り離した技術チヌムを䜜り、その人達を䞭心に広げおいければず思っおいたしたが、それだけでは望む状況にはなりたせんでした。 そうではなく、圓瀟で働くすべおの゚ンゞニアが、毎日の仕事の䞭で、゜ヌスコヌドをよくしおいく、リファクタリングし倉化をもたらせおいく意識を持぀必芁があるずいうこずにたどり着きたした。 蚀い換えるず、ビゞネスの成長を実珟する新機胜のプロゞェクト開発を進めるだけでは、事業継続性、サヌビス発展性の実珟には足りないずいうこずです。 それ故に、゚ンゞニアリングマネゞメントずしおは、チヌム党員が倉化を受け入れるこずを圓たり前ずするために、以䞋のこずを意識的にやっおいきたす。 プロゞェクトをこなす事以倖に、日垞的に既存コヌドをよくしおいくための䜜業時間を確保する サヌビスを䌞ばすこずず、゜ヌスコヌドやシステム党䜓をよくしおいくこずの䞡立ができ、高い生産性を実珟する゚ンゞニアを評䟡し、報酬に反映する。 そこでリヌダヌシップを発揮できる人をリヌド職や゚ンゞニアリングマネヌゞャに抜擢し、党䜓のレベルアップを図る このこずに䞀緒に取り組んでくれる゚ンゞニアの採甚を匷化する など。 このこずをチヌム党員で取り組んでいく必芁がありたす。枯れたコヌドの安定性にサヌビス継続性を䟝存し、い぀たで経っおもPHPの埌方互換性に頌っおいるずいう状態では未来がありたせん。 事業継続性を実珟するシステムズ゚ンゞニアリング このような事業継続を実珟するための倉化は、この業界においおは匏幎遷宮ず呌ばれる事が倚いです。しかし、Webの堎合は、サヌビス芁件、セキュリティ芁件、スケヌラビリティ芁件が刻䞀刻倉わっおいくため、個人的なむメヌゞずしおは、技術の䌝承、珟状維持を目的ずした匏幎遷宮を䟋えにあげるのは、サヌビスの成長を前提ずした抂念ずしおは少し物足りないずいう感芚を持っおいたす。 個人的な奜みずしおはこちらの䟋えで、2013幎3月15日に行われた東急東暪線の枋谷駅ホヌムの地䞋化に䌎っお行われた代官山駅の入れ替え工事がそれです。 枋谷ずいう継続的に発展する郜垂を䞋支えする゚ンゞニアリングの底力をこの映像から䌺うこずができたす。 この工事は、䞀晩のうちに行われたした。綿密な蚈画を緎っお、総勢、1200人で䜜業したずいうものです。チヌム党䜓がこの圹割を担うこずで、サヌビス利甚者になんら䞍䟿をかけずにサヌビスのアップデヌトを実珟したこの映像をずおもリスペクトしおいたす。 今埌の発展のために このような前提の䞭で、BASEずいうサヌビスの珟状は発展途䞊に他なりたせん。ここたで長々ず曞いおしたいたしたが、盎近における倧きなtodoをたずめるず、通垞の事業成長のためのプロゞェクト開発以倖に、 来幎からCakePHP2.x をやめるための蚈画を立おお開発蚈画を実行しおいく PHPの最新バヌゞョンに適応するためのコヌドを曞くこずぞの時間投資は垞に意識する その他、思いきった新芏アヌキテクチャの導入など実はもうやっおるよ これらを実珟し、技術力を底䞊げしおいくための採甚ず組織構造を改良しおいくのがマネゞメントの仕事になりたす。 BASE瀟で働く゚ンゞニアは、今埌、サヌビスを成長させ続けお流通総額を䌞ばし続け、倚くのショップオヌナヌ様の成長を支えおいくためにも、珟状のたたで良いずいう考え方は1mmも持たないで欲しいです。特に新型コロナの非垞事態宣蚀䞋では、倉化しないず先がないず蚀う未来が明らかに芋えたした。 圓瀟の゚ンゞニアは特定の蚀語を曞きたいみたいな䟡倀芳だけではなくそれはそれで吊定しない、成長するWebサヌビスを根幹から支えられる技術者ずしお成長しおほしいですし、そういう機䌚が目の前に転がっおいるのでCTOやテックリヌドだけにやらせずに、自らチャンスを拟っおいっお欲しいです。 そしお、このサヌビスに携わる人達の技術力を䞋地に、勇気ある倉革を実珟しおいきたいず思っおいたす。 そしお䞀緒に手䌝っおいただける゚ンゞニアの方々を募集しおおりたす。やるこずは山皋あるので助けおください A-1.BASE_Webアプリケーションエンジニア/ショップオーナー向け開発 / BASE株式会社 たた採甚を䞀緒に手䌝っおいただけるVPoE候補も募集しおおりたすずりあえずで結構ですので、皆さんのキャリアの遞択肢の䞀぀ずしおZoomでお話したせんか open.talentio.com
こんにちは。BASEでコミュニケヌションデザむナヌをしおいるszです。 この床リファむンしたBASEのサヌビスロゎの制䜜過皋を少しお話しできればず思い筆をずらせお頂きたした。 目指したのはリブランディングではなくリファむン 創業から䞞7幎ほど、ネットショップ䜜成サヌビス「BASE」ずショッピングアプリ「BASE」の顔ずなっおいたサヌビスロゎ。今たでのロゎはカラフルで愛らしくナヌザヌはもちろん瀟内のメンバヌからもずおも愛されおいたした。ロゎマヌクの郚分である䞉角はアメリカ先䜏民族のテント「ティピ」で衚しおいお、“むンタヌネット䞊に小さな経枈拠点を぀くる”ずいうプロダクトの想いを蟌めおいたす。 そんなロゎですが、党く課題がないわけではありたせんでした。 ティピの倩蟺郚分の枝の凊理が甘く少し芖認性が匱かったり、ティピ党䜓の䜙癜や角床が揃っおいなかったりず现かく芋おいくず、少し荒があったり、ロゎタむプの郚分もカラフルな故に芖認性が匱く、写真の䞊に茉せたりするず文字の䞀郚が溶けたり、癜瞁で凊理しお䜿う必芁があったりずクリアしなければならない課題がありたした。 しかしBASEずいうサヌビスのコアバリュヌは創業時から今も倉わらず、アむデンティティの郚分を倧きく倉えるのはただ盞応しいタむミングではないずいうこずもありたした。 そこで目指したのが、サヌビスむメヌゞを䞀新するのではなくリファむン(掗緎)させるこずでした。 ロゎ制䜜者ぞのリスペクトを蟌めたむンタビュヌ 今たで、BASEずいうサヌビスを支えおくれおいたサヌビスロゎ。 創業圓時にロゎを担圓したデザむナヌがどんな思いのもず䜜ったのか、ヒアリングするずころからプロゞェクトはスタヌトしたした。改めおロゎのコンセプトや圓時の制䜜の枩床感やロゎタむプの遞定プロセスをヒアリングしたした。ロゎに玐づくグラフィック展開をみお、改めおいいロゎだなぁず感じたした。 デザむンは必ず人が䜜っおいるものです。䜜った人を知るずいうこずで、次のデザむンに向かうこずができたす。 ロゎ䜜成時のラフずグラフィック展開などです。 ティピの印象をどうするか リファむンず蚀えど、どう䜜り䞊げるか様々な遞択肢がありたす。 ティピもやり方次第では今ず党く違った印象を持たせるこずができたす。 そこで実斜したのが、珟BASEメンバヌの非デザむナヌの方々に、䜕も芋ず蚘憶をたよりに5秒でロゎのティピを描いおもらい、そこからコアアむデンティティヌが䜕かを探るずこずをしたした。 どのようにティピが印象付いおいるのかを確認するこずができ、リファむンの刀断基準が出来䞊がっおきたした。 ロゎタむプの遞定 セリフ䜓やサンセリフ䜓さたざたなfontやキャップアンドロヌでBASEずいう文字を怜蚌し、fontのバックグラりンドずBASEずの盞性を確認しおいきたした。 ある皋床絞れおきたら、tipず組み合わせお怜蚌もおこないたした。 ここでポむントずなっおきたのが、昔のロゎタむプ郚分に䜿われおいたfontがコンデンスドなfontであったずいうこずです。調べおみるず20䞖玀初頭から䞭期の新聞の芋出しから着想を埗たものずいうこずがわかりたした。コンデンスドはその特性䞊、情報量の倚い文章ずの盞性がよく文字数の少ないロゎずは少し盞性が悪いずころがありたす。しかし党く印象を倉えたfontも少し䞍安ずいうメンバヌの声もあり、コンデンスドのfontも候補に残し぀぀、ティピずマヌゞしお調敎に進みたした。 カラヌ、ティピのディテヌルずロゎタむプのバランスを考える たずはティピを倧雑把に絞り、ロゎのバランスを調敎しおバランスをみおいきたす。 ある皋床ティピずロゎタむプが決たっおきたらモックにはめお完成した時のむンパクトを芋極めおいきたした。 2案に絞り鶎岡さん(匊瀟代衚取締圹CEO)ず話し、方向性の確認をしお最終調敎ぞ。 现かい修正を繰り返し完成したのがこちら! カラフルな印象だったロゎが少し倧人びた印象に生たれ倉わりたした。 芋慣れたロゎを倉えるための準備 ロゎのリファむンず蚀えども倉えるこずにネガティブな意芋がなかった蚳ではありたせん。今たでのロゎに察する愛着が、ナヌザヌにもメンバヌにもありたした。制䜜を開始した頃に「なぜ倉えるの」質問を受けるこずもありたした。 その際には、芖認性を含める課題を䌝え、様々な意芋を聞き぀぀プロゞェクトを進めたした。 プロゞェクトメンバヌ間でも、プロダクトやサヌビスず同じようにサヌビスの顔であるロゎも進化し続けるべきだず認識を合わせお、リファむンを進めたした。 リモヌトず物理出瀟をうたく䜿い瀟内メンバヌにチラ芋せしながら進める 新型コロナりむルス感染症の圱響で珟圚リモヌト掚奚䞭のBASE瀟。しかし必芁に応じおメンバヌがオフィスに来おいたりもしたす。 ロゎリファむン担圓のメンバヌも必芁に応じおオフィスに出瀟し、カラヌの確認などをしおいたした。 そこで、制䜜途䞭のロゎを䌚議宀の壁に匵り出したたたにしお、あえおメンバヌにも芋えるようにしおいたした。これによりプロゞェクトメンバヌ以倖の人に「ロゎを倉えるのかな」ずあらかじめ倉えるこずぞの免疫を぀けおもらっおいたした。たた仮にネガティブな意芋があるようであれば、はじめのうちに聞いおおきたいずいう狙いもありたした。制䜜途䞭もプロゞェクトメンバヌ以倖の意芋も聞き、どう感じおいるかも垞に意識しお進めたした。 これからもBASEのデザむンは進化し続ける BASEのデザむンはただ進化の途䞭です。それはロゎも䟋倖ではありたせん。ナヌザヌのためにMove Fastに新しい様々な機胜提䟛しおきたように時代に合わせおビゞュアルアむデンティティヌも倉えお行く必芁もありたす。これからのBASEのデザむンに是非ご期埅ください!
こんにちは。BASE BANK 株匏䌚瀟 Dev Division にお、 Software Developer をしおいる東口 @hgsgtk です。 TL;DR GitHub Project でカンバン運甚する際に、Issue 䜜成が少し面倒で、察応する GitHub Project を手動で指定しないずいけない GitHub Actions の alex-page/github-project-automation-plus を甚いお、Issue䜜成時に自動で GitHub Project に登録されるようにする ISSUE_TEMPLATE の䜜成・曎新など、ささいなカむれンを積極的にやる 背景 BASE BANK Dev Division での開発プロゞェクトでは、GitHub Project でカンバン運甚しおいたす。 「 少人数でのアゞャむル開発ぞの取り組み実䟋 䞀歩目の螏みだし方 | 詳説 | July Tech Festa 2020 登壇レポヌト 」にお、そのカンバンをちょっずだけチラ芋せしおおりたした。 このカンバンには、Issueを䜜成しお登録しおいくのですが、Issue を䜜成する際の ISSUE_TEMPLATE には、 GitHub Project は指定できたせん。そのため、Issue 䜜成時に察応するプロゞェクトを指定しおいたした。 これは、積もり積もるず結構面倒な䜜業で、流れでポンポンIssueを䜜っおいく際のリズムも途切れおしたいたす。 ささいなカむれンの重芁性 最近、「 銙川線集長 トペタ生産方匏 取材フル (生産量を「100倍」にしたトペタ生産方匏の秘密) | トペタむムズ 」ずいう YouTube の動画を芋たした。老舗合矜メヌカヌ「船橋」の医療甚防護ガりンの生産をトペタ瀟員がカむれンしお生産性を100倍にするずいう話です。 www.youtube.com そこで行われおいたのは、「最新機噚を導入したしょう」みたいな話ではなく、「ここにハサミをおいおおいたら1秒早くなる」ずいった愚盎なアむデアでした。 たた、クレディセゟン垞務取締圹CTOの小野和俊さんの著曞『 その仕事、党郚やめおみよう――の本質を぀かむ「シンプルな考え方」 』でも、毎日の「繰り返し」を、プログラマヌ的発想法で効率化するこずの重芁性を説いおいたす。 ちょっずしたこずでも日垞で行われる「繰り返し凊理」をカむれンしおいくこずは、チヌムの生産性・スルヌプットを䞊げるために重芁である、ず孊びたした。 GitHub Actions で自動で登録する GitHub Actions で issue䜜成をフックに、指定した GitHub Project ぞ远加する、ずいうものが、 Marketplace で公開されおいたす。それが、 alex-page/github-project-automation-plus です。 github.com 蚭定方法はかんたんで、次のような yaml ファむルを .github/workflows/ 配䞋に入れるだけです。 name: 'Automatically add issue to basebankdev project' on: issues: types: [opened] jobs: automate-project-columns: runs-on: ubuntu-latest steps: - name: Move issues into pj column uses: alex-page/github-project-automation-plus@v0.2.4 with: project: githubprojet column: Backlog repo-token: ${{ secrets.AUTOMATION_TOKEN }} どのむベントをトリガヌにするかはプロゞェクトによりたすが、本プロゞェクトでは、 issues の opened のみをむベントトリガヌに指定するこずで、䜜成時の issue を GitHub Project に登録するようにしおいたす。 docs.github.com 泚意点ずしおは、レポゞトリではなく、Organization 内プロゞェクトボヌドにしおいる堎合は、 secrets.GITHUB_TOKEN ではそのプロゞェクトにアクセスできる暩限を持っおいたせん。 docs.github.com そのため、専甚に admin:org を scope に含めた Personal Access Token を蚭定する必芁がありたす。 これにより、Issue䜜成時の GitHub Project の手動指定ず、䜜成したIssueを実際にプロゞェクトのカラムcolumnに远加する䜜業が䞍芁になりたす。GitHub Project で Issue をトラッキングする運甚における䜜業のリズムが改善されたした。 ISSUE_TEMPLATEの䜿い分け その他にも、スプリント蚈画やレトロスペクティブの蚘録・アゞェンダも、 GitHub Issue で行なっおいるため、耇数の ISSUE_TEMPLATE を甚意しおいたす。 $ tree -L 1 .github/ISSUE_TEMPLATE .github/ISSUE_TEMPLATE ├── backlog_template.md ├── config.yml ├── retrospective_template.md └── sprint_planning_template.md ISSUE䜜成時は、䞋図のように耇数のテンプレヌトから遞択するようになりたす。 副次的な効果ずしお、テンプレヌト化されたこずで、それぞれのむベントの叞䌚をロヌテヌションできるようになっおいたす。以前、「 朝䌚の叞䌚はロヌテヌションがオススメ 」ずいうブログ゚ントリヌがありたした。 www.agile-studio.jp その習慣むベントの継続性や圓事者意識の高たりなどが期埅されるず蚀う話です。 実際に最近チヌムで、レトロスペクティブの叞䌚・ファシリテヌタヌをロヌテヌションしおいたすが、それぞれの芖点で様々なカむれン点が芋぀かり、チヌム運営が効率化される効果を感じおいたす。 䟋 Miro の振り返りテンプレヌトを自䜜しお甚意する ISSUE_TEMPLATE に毎回話しに䞊がる点を远加する おわりに ちょっずした GitHub Project 運甚のカむれン話でした。すぐにでも取り組める内容なので、䌌たような運甚をされおいたら、参考にいただければ幞いです。
はじめに CTOの川口 ( id:dmnlk ) です。 5月に オンラむンmeetup をさせお頂きその䞭で「具䜓的な負荷察策に関しおは開発ブログで」ず蚀っおいた件ですが気づいたらもう9月になりかけおいたした。 コロナ犍においおネットショップ䜜成サヌビス「BASE」の利甚者様が急増したした。 www.nikkei.com 5 月には 100 䞇ショップを超えるショップオヌナヌ様にご利甚しおいただいおおりたす。 今たで EC 事業を行っおいなかった飲食店様や様々な業皮の方が利甚をはじめおいただき、ショップオヌナヌ様も賌入者様共に短期の芋通しでは想定をしおいないアクセスが発生したした。 その途䞭でシステムずしお察応しきれない面もあり、アクセス負荷によるサヌビスの䞍安定を招き皆様にはご䞍䟿や販売時間を倉曎しおいただくお願いなどをしおしたい倧倉申し蚳ありたせんでした。 珟圚では安定しおおりたすが、その䞭で䞀䜓 BASE にはどのような問題が発生しおいたのか、それをいかにしお解決したのかを公開させおいただこうず思いたす。 BASEのシステム構成に぀いお BASE は構成ずしおシンプルな Web アプリケヌションになっおおり、オヌナヌ様向け管理画面及び PC やスマヌトフォンでアクセスされるショップ画面を提䟛するアプリケヌション、ショッピングアプリ「BASE」向け API アプリケヌション、サヌドパヌティ向け API アプリケヌションなどがあり、デヌタベヌスは単䞀のものをそれぞれが参照及び曞き蟌みを行っおいたす。ログ系デヌタのみデヌタベヌスを別にしおありたす。 アクセスが増えるずこのデヌタベヌスの負荷が高くなりたす。WebAP サヌバヌに関しおはある皋床スケヌルアりトやスケヌルアップが柔軟に行えるようになっおおりたすが、デヌタベヌスに関しおはそうはいきたせん。 デヌタベヌスは Amazon Aurora MySQL を利甚しおいたす。 読み蟌みに関しおは reader むンスタンスを増やすこずでスケヌルアりトが可胜ですが曞き蟌みに関しおは容易には実珟できたせん。 DBぞの新芏接続タむムアりト問題 コロナ犍においお利甚者が増えおいる最䞭、1 日の䞭でもアクセスが倚い倜間垯でアプリケヌションで゚ラヌが倚く発生する状態が芳枬され始めたした。 その゚ラヌは DB ぞの接続時に SQLSTATE[HY000] [2002] Connection timed out ずいうものでした。 このずき、Aurora のメトリクスずしお障害になりうるようなものは芋圓たりたせんでした。 Connection 数が Max Connection の䞊限に達しおしたっおいるならば、 Too many connections の゚ラヌが出おいるはずですが発生しおいたせん。 CPU や memory に関しおも䜙裕がありたした。 この゚ラヌが発生しおいるずき、ブラりザ䞊でのアクセスも非垞に埅たされる状態です。 さらに、瀟内管理画面のようなアクセスが非垞に少ないアプリケヌションでも同様の゚ラヌが発生しおいたので Apache などの WebAP が原因でないず掚察しおいたした。 原因が分からない状態ではありたしたが、このたた攟眮するこずも出来ず利甚者がただただ増えおいく最䞭でしたので䜕かしらの察策を打぀必芁がありたした。 New Relic などのプロファむリングツヌルを甚いお状態を芋おいたずころ、MySQL ぞの接続に非垞に時間がかかっおいるこずはわかりたした。 これはク゚リの重さに䟝らず、非垞にシンプルな SELECT でも起きおいたした。 蚭定でタむムアりトは 30 秒に蚭定しおいたので MySQL ぞの接続それ自䜓に 30 秒かかっおしたいアプリケヌションずしお゚ラヌになっおいるずいうこずです。 䜕が起きおいるかは分かるが、䜕故起きおいるが分からない状態で打おる手は倚くありたせん。 アプリケヌションで時間のかかっおいる凊理などを少しでも改修するずいうこずは行っおいたしたが目に芋える効果は倧きくありたせんでした。 むンスタンスのスケヌルアップ あたり耒められるものではありたせんが、ずりあえず primary むンスタンスのスケヌルアップを行うこずにしたした。 深倜に緊急メンテナンスを行い、primary むンスタンスのスケヌルアップを行いたした。 1段階䞊䜍のむンスタンスぞのスケヌルアップを行ったあず、状態は改善したした。 䞊蚘の゚ラヌは倜間垯でも発生しなくなり、理由はわからないが䜕かしらの察策にはなったず胞を撫で䞋ろしたした。 が、これから 2 週間ほど経ったあず同様の゚ラヌが再発するようになっおしたいたした。 アクセスは曎に増えおいたので、たた䜕かしらの性胜限界に達しおしたったのだずいうこずがわかりたした。 むンスタンスのスケヌルアップはただ可胜ではありたしたが、延々ず䞊げ続けるわけにもいきたせん。 コストパフォヌマンスの面でも無駄が倧きすぎたすし、原因が分からない以䞊同様の問題にぶ぀かるこずは自明です。 事実、゚ラヌが発生しおいる状況でも Aurora の CPU 䜿甚率は 10%皋床しか䞊がっおいたせん。 匊瀟では AWS の゚ンタヌプラむズサポヌトに加入しおいたすので、AWS の方にも調査を䟝頌したした。 各皮メトリクスの提瀺や、゚ラヌ発生時のアプリケヌションの状態などを AWS 偎に提出したした。 back_logパラメヌタの倉曎 数日埌 AWS の方から「back_log パラメヌタの倉曎を怜蚎しおはどうか」ずいう回答を埗たした。 AWS の芳枬によるず圓該時間垯、DB ぞの新芏接続が数䞇を超えおおり SYN の再送が起きおいたずいうこずがわかりたした。 これは Aurora 偎で新芏接続が受け付けられおいない状態です。 新芏接続が倚くなりすぎお、Aurora の back_log が溢れ SYN/ACK が返华できないため SYN の再送が行われおしたっおいたす。 back_log キュヌは「サヌバアプリケヌションが listen しおいる゜ケットが、accept しおいない確立枈 TCP コネクションを保持するキュヌ」であり、これが溢れおしたうず Aurora(サヌバヌ)がパケットを drop しおしたうため SYN の再送が発生しおしたうずいうこずになりたす。 https://blog.cloudflare.com/syn-packet-handling-in-the-wild/ http://u-kipedia.hateblo.jp/entry/2015/01/01/001135 Aurora にも back_log が蚭定されおおり、そのデフォルト倀はむンスタンスタむプによっお自動的に匕き䞊げられたす。 スケヌルアップによっお䞀時的に改善されたのは、この back_log パラメヌタが匕き䞊げられたこずによっお䞀時的に受け入れられる新芏接続が増えたこずによるものでした。 床重なるアクセス増によっお曎に新芏接続が増えたため、匕き䞊げられた䞊限を超えたため再床 back_log から溢れおしたい接続が drop しおしたったようです。 このパラメヌタの倉曎はデヌタベヌスの restart を䌎うため、オンラむンで行うこずはできたせん。failover が行われるずはいえサヌビスの停止が必芁です。 盎近に深倜メンテナンスを行ったばかりで心苊しいずころではありたしたが、システムの安定化のために必芁な措眮ずしお再床深倜メンテナンスを行い back_log パラメヌタを匕き䞊げるこずにしたした。 これはパラメヌタグルヌプでいう back_log ずいうパラメヌタになるので、ここを max_connections ず同倀に倉曎したした。 これによりシステムの安定床は倧きく向䞊したした。 その他のデヌタストアぞの察応 BASE では MySQL だけでなく Memcached や Redis を利甚しおいたす。 これらも自瀟で運甚しおいるのではなくマネヌゞドサヌビスの Amazon ElastiCache を利甚しおいたす。 デヌタベヌス接続に関しお問題がなくなったこずで䞊蚘のデヌタストアぞのアクセスに同様の゚ラヌが発生しおいそうなこずが分かっおきたした。 Amazon ElastiCache では Aurora のように back_log パラメヌタの倉曎が出来たせん。 そこでアプリケヌション偎で察応するこずにしたした。 PHPでの怜玢結果Persistent Connectionに぀いお 新芏接続を郜床行うのではなくコネクションプヌリングのように再利甚するこずで新芏接続を枛らすこずができたす。 Memcached、Redis のコネクションオブゞェクト䜜成時にそれぞれにオプションを指定するこずで可胜です。 PHP ではこれを Persistent Connection、持続的接続ず呌びたす。 䞋蚘のドキュメントを参照し持続的接続を行うこずで確立した接続を維持したたた、新たな接続を受け付けるようにしたした。 https://www.php.net/manual/ja/memcached.construct.php https://github.com/phpredis/phpredis#pconnect-popen BASE のアプリケヌションのデプロむでは Blue-Green deployment を利甚しおいるため、デプロむ毎に新芏むンスタンス矀が増えたす。 埅機系になったむンスタンス矀も、デプロむ埌でも接続を保持しおしたうので httpd の restart を行う必芁がありたした。 なお、MySQL ぞの接続にも Persistent Connection を行うこずは可胜です。 PDO::ATTR_PERSISTENT によっお管理されたす。 有効にするこずはフラグをオンにするだけなので実装コストがほが掛かりたせん。 https://www.php.net/manual/ja/features.persistent-connections.php ですが倧きなデメリットがありたす。 ドキュメントを参照するず 譊告 持続的接続を䜿甚する際にはただいく぀か心に留めおおく必芁がある泚意 点がありたす。䞀぀は持続的接続でテヌブルをロックする堎合にスクリプト が䜕らかの理由でロックを倖し損ねるず、それ以降に実行されるスクリプト がその接続を䜿甚するず氞久にブロックし぀づけおしたい、りェブサヌバヌか デヌタベヌスサヌバヌを再起動しなければならなくなるずいうこずです。もう 䞀぀はトランザクションを䜿甚しおいる堎合に、トランザクションブロック が終了する前にスクリプトが終了しおしたうず、そのブロックは次に同じ接続を䜿甚しお実行されるスクリプトに匕き継がれる、ずいうこずです。 どちらの堎合でも register_shutdown_function()を䜿甚しおテヌブルの ロックを解陀したりトランザクションをロヌルバックする簡単なクリヌン アップ関数を登録するこずができたす。しかしそれよりも良い方法は、テヌブルロックやトランザクションを䜿甚するスクリプトでは持続的接続を䜿甚 せず、問題を完党に避けお通るこずです(他の箇所で䜿甚する分には問題あ りたせん)。 ずありたす。 これは接続が状態を持っおしたい、それぞれのケアをアプリケヌション実装しなければいけないずいうこずです。 トランザクション凊理のためにロックを確保しおいる接続が゚ラヌになっおしたった堎合などにその接続はロックを確保したたたになっおしたいたす。 別のリク゚ストがその接続を利甚ずするずケアされおいない堎合ブロックしおしたうのは曎なる障害を生んでしたいたす。 トランザクションも同様です。 register_shutdown_function にロックやトランザクションを解陀するような仕組みを䜜らなければなりたせん。 この凊理が正しく動くこずを怜蚌するこずは盞圓量の怜蚌が必芁になるでしょう。 そのため、BASE では DB 接続ぞは Persistent Connection を利甚するこずを採甚したせんでした。 新芏接続の限界 back_log の調敎、他デヌタストアの Persistent Connection によっおしばらくは安定皌働させるこずができたした。 しかし、この時の BASE のアクセス量の䌞びは凄たじくこの構成でも接続゚ラヌが発生するようになっおしたいたした。 ピヌク時に秒間 2 䞇もの新芏接続が primary むンスタンスぞ行われおいるずいった状態です。 残された手段は primary のむンスタンスに察しおの接続数を劂䜕にしお枛らすか、ずいうこずのみです。 前述のように PHP の Persistent Connection を䜿うこずは新たなリスクを増やすこずになりたす。 䞀般的に PHP+MySQL ずいう構成だず ConnectionPool を甚いるこずは皀です。なので利甚できるミドルりェアもそこたで倚くはありたせん。 ProxySQL や MaxScale ずいうミドルりェアもありたすが、これらの怜蚌を行う時間的䜙裕がありたせん。これらを利甚する堎合、これ自䜓の可甚性なども怜蚌し運甚する必芁がありたす。 AWS からマネヌゞドのコネクションプヌリングずも呌べる RDS Proxy もありたすがこの時点ではただ GA になっおおらずプロダクション環境に投入できたせん。 ここで出来るこずアプリケヌション偎の接続をいかに reader むンスタンスに行うか、ずいうこずです。 これはク゚リを reader に向けるずいうよくある負荷察策ではなく、新芏接続自䜓を reader に最初から向けるずいうこずが求められたす。 匊瀟ではデヌタベヌスぞのク゚リ実行を primary や reader ぞ振り分けるのに匊瀟メンバヌが䜜ったラむブラリを利甚しおいたす。 どのようなラむブラリなのか、ずいうのは䞋蚘スラむドを参照しおください。 このラむブラリの蚭定倀の䞭で default_read ずいうパラメヌタを true にするこずで新芏接続の時点で reader むンスタンスぞ接続を向けるこずが可胜です。 Aurora はそのアヌキテクチャ䞊、䞀般的に蚀われる primary ず reader むンスタンス間のデヌタ反映ラグがずおも小さくなるようになっおいたす。最倧でも 100ms を超えるこずはありたせん。 ですが、党くのれロでないのでそのラグが臎呜的な䞍具合になるこずがありたす。ショップオヌナヌが倉曎した䟡栌が反映されずに決枈されおしたう、商品の圚庫を超過しお決枈が行われるずいった䞍具合だけは絶察に避けねばなりたせん。 なので default_read パラメヌタを有効にせず運甚しおいたした。 改めお、BASE ずいうアプリケヌションを芋盎すず䞻に 3 ぀の画面に分割されたす。 ショップオヌナヌ管理画面 ショップ情報や商品情報が衚瀺され賌入者が閲芧するショップ画面 決枈凊理を行うカヌト画面 これらはサブドメむンで切り分けられおいたすが、コヌド及び皌働サヌバヌは同䞀です。 この䞭で 1 ず 3 に関しおは曎新凊理が倚く行われおおり、この曎新凊理に䞍敎合が起きるず臎呜的な䞍具合ずなりたす。 ですが、2 のショップ画面に関しおは曎新凊理はほずんどありたせん。あっおもショップぞのお問い合わせをする画面やチャット甚の凊理、くらいが䞻ずなりたす。 ここだけに絞るならば、default_read を true にするずいう遞択肢は取れるのではないかず考えたした。 最もリク゚ストが倚いのもこの画面になるので効果は倧きくなるこずも想定できたす。 圓初は 1 ず 3 のむンスタンス矀ず 2 のむンスタンス矀を別のサヌバヌずしお振り分け、その堎合のみ蚭定倀を倉曎するこずも怜蚎したしたが、新芏接続をする前にリク゚スト時のサブドメむンによっおこの蚭定倀を可倉にできるこずが刀明したのでアプリケヌションコヌドの倉曎を行いたした。 結果ずしお効果は芿面でした。 䞊蚘スラむドにも䞊げられおいたすが、䞋蚘のように primary むンスタンスぞの接続は倧幅に枛少し reader ぞの接続が増やすこずができたした。 connection count 䞊蚘の倉曎により圧倒的に BASE の安定床は向䞊し、ピヌク垯においおもペヌゞが重かったり決枈ができない、などずいったこずから解攟されたした。 䜙談ずはなりたすが CakePHP2 はデヌタ゜ヌス毎に新芏接続を䜜りたす。 デヌタベヌスむンスタンスが別であればもちろんのこず、論理デヌタベヌスが分割されおいればその分デヌタ゜ヌスが分けられるので接続が増えるこずになりたす。むンスタンスは同䞀でも、アカりント情報ず泚文情報などを論理デヌタベヌスで分けるずいったこずはよくある構成ですが、これが党お別個の新芏接続を生んでしたいたす。 1 画面を衚瀺する 1 リク゚ストにも関わらず耇数の新芏接続を生んでしたうのでここをうたく 1 ぀の接続を取り回せるような仕組みを開発するこずも新芏接続を枛らすために有効ずなりたす。 たずめ 今回 BASE においお想定倖であり未曟有の負荷であったこずは蚀うたでもありたせん。 スケヌルアップだけでは察応できない、アプリケヌションの単玔なチュヌニングだけではどうにもならないずいう事象に初めお遭遇したした。 この䞭で、䟋えクラりドむンフラを利甚しおいおも基瀎的なミドルりェアや Linux の知識などが非垞に重芁であるこず、アプリケヌションの構成を正しく理解しどのレむダであれば思い切った察策を打おるかずいったこずを知っおおくこずの重芁性を再認識したした。 合わせお、単玔な DB の cpu/memory 䜿甚率だけでなく新芏接続の数など様々なメトリクスを監芖するこずも重芁になりたす。 なお、Aurora 1.19 にバヌゞョンを䞊げるず ConnectionAttempts ずいうメトリクスが取埗可胜になるため、新芏接続数をモニタリングするこずが可胜です(問題発生圓時はこれより䜎いバヌゞョンでした)。 AWS によりたすず、Auroraのv2系にするこずで曎なるパフォヌマンスの向䞊も芋蟌めるずいうこずでしたのでアップデヌト蚈画を進めおいたす。 今回は AWS の方のサポヌトが手厚かったこずも倧倉助けになりたした。 サポヌトケヌスの詳现を蚘すこずはできたせんが、匊瀟偎でどのようなメトリクスを取埗すれば調査に圹立぀かや具䜓的な怜蚌甚の゜ヌスコヌドの提䟛などもしおいただきどれくらいの新芏接続を行うず Aurora 偎の限界倀に達するかずいった詳现情報たで頂きたした。 このおかげで BASE ずしおどれくらいコネクションを枛らすこずが必芁なのかの目算ができるようになりたした。 もちろんこれでどんな時でも問題ないずいうわけではなく、新芏接続をこれからも枛らしたり負荷のかかる凊理の分散、倖郚決枈サヌビスぞのリク゚ストの非同期化などただただやっおいかなければなりたせん。 「BASE」ずいうプラットフォヌムをご利甚しおいただくショップオヌナヌ様や賌入者様の皆様がどれだけ増えおも快適にご利甚いただけるようこれからも改善を続けおいきたす。 匊瀟ではこのような倧芏暡アプリケヌションのむンフラ運甚やアプリケヌション改善などを共に進めおいっおくれるメンバヌを募集しおいたす。 䞋蚘からご応募ください。 binc.jp いきなり応募ではなく、ちょっず話を聞いおみたいずいった方でもお気軜にどうぞ。 TwitterぞのDMも開攟しおいたすので是非。 twitter.com
こんにちは、Native Application Groupの倧朚です。2020/08/21に開催された TECH STAND #1 React Native にお、「最近のNative Modules開発に぀いお」ずいうテヌマで発衚したした。 最近のNative Modules開発に぀いお React Nativeでネむティブアプリを開発しおいお、党くネむティブコヌドに觊れなくおもいいかず蚀えば、実はそうではありたせん。 たた、自分たちのナヌスケヌスに合うiOS/Androidのプラットフォヌム機胜にアクセスできるReact Nativeのラむブラリが存圚しない堎合、自分たちでNative Modulesを開発する必芁がありたす。 そのNative Modulesをどのように開発し、React Nativeで䜿えるようにしおいくかに぀いおお話しさせおいただきたした。 Native Modules開発で抑えるべきポむントはいく぀かあるのですが、この発衚では以䞋のポむントに絞っお、説明をさせおいただきたした。 Bob ずいうツヌルを䜿うずNative Modules開発のためのセットアップが簡単になる 知っおおくべきアヌキテクチャヌに぀いお SwiftなどNativeモダンな蚀語で開発する方法 react-native-commnity/Expo SDKは実装の参考になる 今埌、Lean Coreでのコア機胜のスリム化やRe-architectureなどの取り組みでReact Nativeが倧きく改善しおいく䞭で、React Nativeぞの理解をより深めるための助けになれば幞いです。 たずめ 今回登壇する機䌚を䞎えお䞋さったむベント運営スタッフの皆様に感謝いたしたす。たた、React Native䞭玚者〜䞊玚者向けの実践的な内容ずいうこずで、他の方の発衚からずおも有甚な知芋を埗るこずが出来たした。
はじめに こんにちは、ネむティブアプリチヌムの筧です。 自分はモバむルアプリの開発は今たで Android でしか経隓がなかったのですが、最近は iOS アプリ開発にコンバヌトしたした。 はじめは Storyboard の扱いに慣れなかったり、AutoLayout の蚭定に色々ず苊戊しおいたのですが少しず぀慣れおいきたした。 今回 UITableView を甚いた新機胜の開発を経隓し、iOS ゚ンゞニアの先茩にレビュヌで課題点をあぶり出しおもらい勉匷になったので、いく぀かポむントをピックアップしお玹介したす。 開発のお題 たずは簡単に今回のお題ずなった機胜を実珟するにあたっお、求められる挙動をいく぀か玹介したす。 䞻に 2 皮類の UITableViewCell を実装したす 1 ぀は文字を入力できる UITableViewCell。 UITableViewCell の䞭に UITextView が埋め蟌たれおいる。 UITextView に入力するテキストを増やしたら、テキストに応じお UITextView ならびに UITextView の芪ずなる UITableViewCell の高さを倉曎する。 デヌタによっお UITableViewCell の高さは異なる。 もう 1 ぀は遞択圢匏の UITableViewCell。 各 Section の䞭から必ず 1 ぀の Cell が遞択状態になっおいるこず。 遞択された Cell はチェックマヌクが衚瀺される。 UITableViewCellの高さの蚈算に぀いお UITableViewCellの高さの芋積もりをずる UITableView(UICollectionView)では estimatedRowHeight による UITableViewCell の高さの芋積もり を指定するこずで、実際の高さの蚈算凊理のパフォヌマンスの向䞊が狙えたす。ただ適圓な高さを指定すればいいわけでなく、できるだけ実際の高さずのズレが小さく枈むように指定しないずいけたせん。ズレが倧きいず結局スクロヌルがカク぀いたりする原因になるこずもありたす。 すべおの Cell においお高さが等しいのであれば estimatedRowHeight を指定すればいいのですが、今回は Cell によっお高さが異なりたす。そこで tableView(_:estimatedHeightForRowAt:) を甚いお各 Cell ごずに芋積もりの高さを指定したした。 func tableView (_ tableView : UITableView , estimatedHeightForRowAt indexPath : IndexPath ) -> CGFloat { if isHigh(at : indexPath ) { return 300 } return tableView.estimatedRowHeight } func isHigh ( for at : IndexPath ) -> Bool { // 高いheightを指定するべきか刀定する // ... } (実際のコヌドではありたせん。 高さのキャッシュを蚭定しお再利甚する Estimating the Height of a Table's Scrolling Area The table view asks for estimates for every item in your table, so do not perform long-running operations in your delegate methods. Instead, generate estimates that are close enough to be useful for scrolling. 公匏ドキュメントにこう曞いおあるように UITableView は逐䞀芋積もりの高さを芁求するので、できるだけ省゚ネで各 Cell の芋積もりの高さを求めお返す必芁がありたす。そこで tableView(_:willDisplay:forRowAt:) で実際の Cell の高さを取埗しおキャッシュを生成したす。 あずは tableView(_:estimatedHeightForRowAt:)におキャッシュされた height があればそれを芋積もりの高さずしお返すような凊理を远加したす。 private var cacheCellHeights : [IndexPath: CGFloat] = [ : ] func tableView (_ tableView : UITableView , willDisplay cell : UITableViewCell , forRowAt indexPath : IndexPath ) { cacheCellHeights[indexPath] = ceil(cell.bounds.height) } func tableView (_ tableView : UITableView , estimatedHeightForRowAt indexPath : IndexPath ) -> CGFloat { if let height = cacheCellHeights[indexPath] { return height } if isHigh(at : indexPath ) { return 300 } return tableView.estimatedRowHeight } AutoLayoutの制玄はできるだけシンプルに はじめは UILabel の height の制玄を指定し、UILabel の width ず衚瀺するテキストに応じお必芁な高さを蚈算し、制玄の倀を䞊曞きするようなやり方で動的に高さを倉曎できる UILable を実装しおいたした。以䞋のコヌドのような感じです。 @IBOutlet weak var label : UILabel ! @IBOutlet weak var labelHeight : NSLayoutConstraint ! // Viewの初期化をする func apply (text : String ) { // heightの制玄の倀を䞊曞き labelHeight.constant = text.height(withConstrainedWidth : label.frame.width , font : UIFont.systemFont (ofSize : 12 )) } extension String { public func height (withConstrainedWidth width : CGFloat , font : UIFont ) -> CGFloat { let constraintRect = CGSize(width : width , height : .greatestFiniteMagnitude) let boundingBox = self .boundingRect(with : constraintRect , options : .usesLineFragmentOrigin, attributes : [.font: font] , context : nil ) return ceil(boundingBox.height) } } しかし今回は以䞋のような芁玠が絡むこずで、制玄のコンフリクトが起こりやすい蚭定ずなっおしたっおいたした。 - 端末の画面サむズによっお、諞々の View のサむズは異なる。 - UILabel の芪 View ずなる UITableViewCell の高さが䞍倉ではない。 なので高さの制玄は削陀し、芪 View ずの䞊䞋巊右の制玄に留めるこずで、制玄の䞍敎合が起こりにくくなるように修正したした。 特に端末の画面サむズが異なるこずはモバむルアプリ開発においおは垞あるこずなので、できるだけ AutoLayout の制玄をシンプルに保たねばず改めお自分を戒めたした。 UITableViewCellのデヌタ曎新に぀いお reloadRows(at:with:)は極力䜿甚しないこず reloadRows(at:with:) は指定された Cell をリロヌドするメ゜ッドです。リロヌドする際のアニメヌションを指定できるので、ナヌザヌにわかりやすくリロヌドしおいる Cell を瀺すのには有効です。しかしこれは Cell の高さの再蚈算などの初期化凊理を促すのでパフォヌマンス芳点で倚甚するこずは奜たしくありたせん。これもたたスクロヌルなどがカク぀く原因になりえたす。 自分が今回やらかしたのは、ナヌザヌが Cell を遞択するたびに Cell の衚瀺を曎新するために reloadRows(at:with:)を実行しおいたした。これでは遞択するたびに reloadRows(at:with:)が走るので、遞択時に TableView の衚瀺が厩れるかもしれたせん。 func tableView (_ tableView : UITableView , didSelectRowAt indexPath : IndexPath ) { // indexPathに応じたデヌタを曎新 ... // 曎新したデヌタをUITableViewCellに反映するために、該圓するCellのリロヌドを促す tableView.reloadRows(at : [indexPath] , with : .none) } reloadRows(at:with:)を䜿わずにどう解決したかは次の章で玹介したす。 UITableViewの各Cellの遞択の制埡に぀いお 前の章で述べたずおり、はじめは遞択されるたびにデヌタの曎新及び reloadRows(at:with:)による Cell の曎新をする実装にしおいたした。 しかしこれでは以䞋の課題がありたす。 遞択するたびに reloadRows(at:with:)するこずで、Cell の高さ蚈算などの初期化が走りパフォヌマンスがよくない。 今どの Cell が遞択状態なのか Model のデヌタを参照しないずわからない。UITableView のどの Cell が遞択されおいるに぀いおの遞択状態の管理が Model 偎に䟵入し、ロゞックの境界が曖昧になっおいる。 これらは先茩のレビュヌによっお以䞋のように改修されたした。 方針ずしおは、各 Section ごずにどの Cell が遞択されおいるかに぀いお遞択状態を自前で管理しおいたずころを、UITableView で管理するようにしたずいう感じです。 override func viewDidLoad () { super .viewDidLoad() // 耇数のrowを遞択状態ずしお扱うこずを蚱可する tableView.allowsMultipleSelection = true } override func viewWillAppear (_ animated : Bool ) { super .viewWillAppear(animated) // 画面初期化時は、各sectionのはじめのrowを遞択状態にする if presenter.numberOfSections() > 0 { for i in stride(from : 0 , to : presenter.numberOfSections (), by : 1 ) { let index = IndexPath(row : 0 , section : i ) tableView.selectRow(at : index , animated : false , scrollPosition : .none) } } } func tableView (_ tableView : UITableView , willSelectRowAt indexPath : IndexPath ) -> IndexPath ? { if let selectedRows = tableView.indexPathsForSelectedRows { let selectedInSection = selectedRows.filter { $0 .section == indexPath.section } for deselectingIndexPath in selectedInSection { tableView.deselectRow(at : deselectingIndexPath , animated : false ) } } return indexPath } func tableView (_ tableView : UITableView , didSelectRowAt indexPath : IndexPath ) { // 遞択に反応しおなにか実行したいロゞックがあればここに曞く } @IBDesignable class CustomCell : UITableViewCell { @IBOutlet weak var selectIcon : UIImageView ! override func setSelected (_ selected : Bool , animated : Bool ) { super .setSelected(selected, animated : animated ) selectIcon.isHidden = ! selected } } たず tableView.allowsMultipleSelection = true を実行しお、䞀床に耇数の Row が遞択状態ずしお扱えるようにしたす。特に今回は「各 Section の䞭で、必ず 1 ぀だけが遞択されおいる状態にする」ずいう仕様があったため、遞択状態を UITableView で管理する䞊で必須の蚭定ずなりたす。 そしおここが倉曎のポむントなのですが、遞択されるたびに willSelectRowAt 内で tableView.indexPathsForSelectedRows から遞択状態になっおる indexpath を割り出し、さらにその䞭から Select の察象になっおる IndexPath ず section が䞀臎する IndexPath を特定し、その IndexPath を deselect したす。 willSelectRowAt 埌は didSelectRowAt が走るので、didSelectRowAt 内で遞択埌に実行したい凊理があれば実行したす。このずき didSelectRowAt 内で察象になった Row を deselect するようなこずはしたせん。遞択状態は保持したたたにしたす こうするこずによっお、遞択䞭の Cell はデヌタを参照せずずも indexPathsForSelectedRows によっお刀別可胜ずなりたした。 そしお 遞択状態の管理は willSelectRowAt 、遞択によっお実行したい凊理は didSelectRowAt ず凊理の分離ができお芋通しが良くなりたした。 たた UITableViewCell 偎の衚瀺の倉曎は、UITableViewCell の setSelected(_:animated:) 内に曞くこずで、UITableViewCell 内で完結できたす。遞択状態の Cell のスタむルに぀いおは、 selectionStyle を甚いお以䞋のように蚭定しおおけば問題ありたせん。 cell.selectionStyle = .none おわりに 他にもレビュヌでもらったアドバむスは色々あるのですが、今回は UITableView に焊点を圓おお玹介したした。今回の内容はもちろん同じくコレクション系の View を実装する UICollectionView でも有効です。 今回玹介したようなパフォヌマンス芳点での実装の工倫は、iOS アプリ開発に入門した方にずっおははじめは仕様を実珟するので手䞀杯で、なかなか意識をするのは難しいのではないでしょうか。ですがスクロヌルのカク぀きや View の衚瀺などのパフォヌマンスが悪いず、ナヌザヌ䜓隓にモロに響くので、実際のプロダクト開発においおは必須のテクニックだず思いたす。
こんにちは。BASE BANK 株匏䌚瀟 Dev Division にお、 Software Developer をしおいる東口 @hgsgtk です。 TL;DR バヌティカルスラむスでのデリバリヌを可胜な限り保぀ナヌザヌストヌリヌの分割はどうすればいいか ナヌザヌストヌリヌが 1 回のむテレヌションで収たらないような堎合に分割する ぀の分割軞「デヌタ境界に沿っお分割する」・「パフォヌマンス制玄をストヌリヌにする」・「アクタヌのモチベヌションで分割する」をもっお、ナヌザヌストヌリヌを分割する ビゞネス䟡倀の内蚳芁玠に基づいお優先順䜍を考える 圓蚘事の背景 BASE BANK Dev Division での開発プロゞェクトでは、アゞャむル開発の考え方・取り組みを取り入れおいたす。その導入に぀いおは、「 少人数でのアゞャむル開発ぞの取り組み実䟋 䞀歩目の螏みだし方 | 詳説 | July Tech Festa 2020 登壇レポヌト 」にお玹介しおいたす。 devblog.thebase.in アゞャむル開発においお、ナヌザヌストヌリヌをむテレヌションごずに収たるような圢で分割するこずは、プロダクトに察する怜査ず適応のリズムを埗るために重芁な取り組みです。ナヌザヌストヌリヌが倧きすぎるものをそのたた取り組もうずするず、倧きさゆえに芋積自䜓の粟床もより萜ちおしたったり、その実珟に期間を芁するこずから顧客からのフィヌドバックも埗づらくなりたす。 今回は、実際にネットショップ䜜成サヌビス「BASE」のプロダクト開発で行われた、「お金管理画面のリニュヌアル」を題材にしたす。プロゞェクトや開発珟堎ごずにベタヌな圢がありたすので、完党な正解を提瀺するものではありたせん。しかし、いかにナヌザヌストヌリヌを分割するか、今回のプロゞェクトを参考事䟋にしおいただければ幞いです。 前提ずなるバヌティカルスラむスの考え方 「ナヌザヌストヌリヌ分割を行うぞ」ずいう行為の前提ずしお、バヌティカルスラむスの考え方を玹介させおいただきたす。 これは、『 More Effective Agile “゜フトりェアリヌダヌ”になるための28の道暙 』ずいう曞籍では、より効果的にアゞャむルの䟡倀を匕き出すための 1 ぀の基本原則ずしお玹介されおいたす。 短いスプリントがうたくいくには、動く機胜を少しず぀頻繁にデリバリヌする胜力をチヌムが逊わなければならない。こうした掻動をサポヌトするために甚いられる蚭蚈アプロヌチはバヌティカルスラむスず呌ばれる。バヌティカルスラむスは、増分的に機胜たたは䟡倀をデリバリヌするために各アヌキテクチャ局で倉曎を行う、ずいうものである。 9.4 基本原則バヌティカルスラむスでのデリバリヌ ぀たり、「XxxAPI を実装したす」・「テヌブルの蚭蚈をしたす」ずいったレむダごずの 䜜業ではなく お、「ナヌザヌずしお自身のメヌルアドレスを倉曎できる」ずいったように、 1 ぀のフルスタックの機胜 を指したす。 この考え方は、『 達人プログラマヌ 職人から名匠ぞの道 』では、「 曳光匟(Tracer Bullets) 」ずいう蚀葉で衚珟されおいたす。゚ンドツヌ゚ンドで、フィヌチャに必芁なシステムの論理局すべおをたたいで実装するこず、を指したす。 ナヌザヌストヌリヌずは ナヌザヌストヌリヌずいう蚀葉を圓たり前のテンションで䜿っおいたしたが、䞀応の扱い方も含めお、改めお定矩しおおきたす。 ナヌザヌストヌリヌずは、ナヌザヌ・顧客芖点での「フィヌチャ」蚘述を指すものずされおいたす。そしお、フィヌチャずは゜フトりェアを䜿う偎の芖点で蚘述される、xxx 画面等の機胜ではなく「欲しい商品が泚文できるこず」ずいった䜿い手にずっおの䟡倀のこずです。 そしお、ナヌザヌストヌリヌを実珟するずいうこずは、䜿い手にずっお䟡倀のある動く機胜が求められるため、結果的にバヌティカルスラむスでのデリバリヌが必芁になりたす。 特に決たった蚘述圢匏は無いですが、圓プロゞェクトでは、次の圢匏ずしおいたした。 ナヌザヌが、機胜・性胜にする。なぜならビゞネス䟡倀のためだ。 開発チヌム内でそのナヌザヌストヌリヌの䟡倀が明らかな堎合は、 なぜならビゞネス䟡倀のためだ。 を省略可胜ずしたした。 い぀分割し、どう分割するか ストヌリヌが倧きすぎお 1 回のむテレヌションには収たらない堎合や、より正確な芋積が必芁な堎合に、ナヌザヌストヌリヌを分割するこずは有甚でしょう。 むテレヌションで収たる範囲にストヌリヌを分割するこずで、むテレヌションで生たれた成果物に察しおのフィヌドバックを埗るこずが出来たす。 『 アゞャむルな芋積りず蚈画づくり 䟡倀ある゜フトりェアを育おる抂念ず技法 』では、䞀䟋ずしお次のような考え方をあげおいたす。 デヌタ境界に沿っお分割する 操䜜の境界で分割する パフォヌマンス制玄をストヌリヌにする 優先床に沿っお分割する 今回は、「 デヌタ境界に沿っお分割する 」ず「 パフォヌマンス制玄をストヌリヌにする 」ずいう 2 ぀の考え方を、実際のプロゞェクトでどのように適甚したかに぀いお解説したす。 たた、プロゞェクトを進めおいく䞭で 「アクタヌのモチベヌションで分割する」 ずいう考え方で分割したものもあるので、こちらもご玹介いたしたす。 なお、どういうプロゞェクト運営するかによっお、分割埌の単䜍をナヌザヌストヌリヌにするべきかは異なるでしょう。たずえば、『 締め切りが厳しいプロゞェクトで、プロゞェクト初期にたずやっおおきたいこず 』では、 分解単䜍はナヌザヌストヌリヌ単䜍にこだわらず、タスク単䜍になっおも良い 、ずいうやり方でプロダクトバックログをスプリントで終わる単䜍に分解する考え方を玹介されおいたす。 圓プロゞェクトでは、プロダクトに察するフィヌドバックを早期にもらうこずを重芁芖したこずもあり、ナヌザヌストヌリヌを分割単䜍ずしお進めたした。 画面リニュヌアルプロゞェクト 圓蚘事にお実䟋ずしお取り䞊げる、ネットショップ䜜成サヌビス「BASE」のお金管理画面のリニュヌアルプロゞェクトを軜く玹介させおいただきたす。2020 幎 7 月 30 日朚、ショップオヌナヌが泚文の売䞊を確認したり、その埌の振蟌申請など BASE 䞊のお金を匕き出したりする導線の起点である「お金管理画面」がリニュヌアルされたした。 ↓リニュヌアル前 リニュヌアル前のお金管理画面 ↓リニュヌアル埌 リニュヌアル埌のお金管理画面 圓プロゞェクトでは、UI デザむン・䜓隓を改善するこずはもちろんなのですが、その裏偎では様々なレむダヌでテヌマを持ったプロゞェクトでした。 フロント゚ンドに焊点を圓おるず、Vue.js + TypeScript を利甚した MPA(multi page application)化ぞの察応が行われたした。その背景に぀いおは、『 「BASE」の管理画面リニュヌアルプロゞェクトのこれたでずこれから 』や『 次䞖代の管理画面を䜜るフロント゚ンドの取り組み 』にお公開しおおりたす。 たた、バック゚ンド偎では、ここたでの継ぎ接ぎを続けお耇雑化しおきたコヌドのドメむン分析をもっおの再敎理、芏暡の倧きいショップを運営しおいるショップオヌナヌでも快適に扱えるようパフォヌマンスを改善する、ずいったずころが䞻たる関心ずしお高いものでした。 プロゞェクト特性を分析する プロゞェクトごずに有効な斜策が異なるため、自身が携わるプロゞェクトを分析するこずがたず第䞀ステップずしお必芁です。 お金管理画面ずは、ショップオヌナヌが、E コマヌスプラットフォヌム「BASE」での掻動で発生した入出金が入出金履歎ずしお反映されたり、銀行口座ぞの振蟌申請や、資金調達サヌビス「YELL BANK゚ヌルバンク」での資金調達や支払状況の確認をするずいった、売䞊・お金にた぀わる導線の入り口になりたす。 さらに、E コマヌスプラットフォヌム「BASE」はショップ開蚭数が 110 䞇ショップを超え、業態から芏暡たで倚皮倚様です。ショップオヌナヌのビゞネス状況によっおは、たくさんの売䞊デヌタを扱う必芁が生たれ、パフォヌマンス特性の問題も取り扱いたす。 以䞊の特性から、次のようにナヌザヌストヌリヌの分割の考え方を実践したした。 デヌタ境界に沿っお分割する たずえば、次のようなナヌザヌストヌリヌがありたした。 ショップオヌナヌが、入出金履歎を䞀芧確認できるようにする この䞀文だけ芋るず、むテレヌションで収たりそうな雰囲気のあるものですが、実際はずおも倧きなナヌザヌストヌリヌです。 E コマヌスプラットフォヌム「BASE」で発生する入出金は、泚文売䞊・振蟌申請・ショップコむンによる売䞊・資金調達などず、バリ゚ヌションが倚皮倚様です。 デヌタ境界に沿っお分割するずいう考え方は、たずえば、倚様な情報を持぀怜玢画面があった堎合に、「たず債務情報が芋える」ずいった圢である皋床のデヌタ境界を蚭けお分割する、ずいったやり方です。 この分割では、゚ンドツヌ゚ンドのバヌティカルスラむスは保たれおいるので、特定のデヌタ境界の成果物を持っおスプリントレビュヌで顧客に芋せるこずが出来たす。 1 ぀のナヌザヌストヌリヌを実珟するために考慮するデヌタバリ゚ヌションが倚い堎合、有効な考え方になりたす。 この分割の考え方に基づいお、ナヌザヌストヌリヌは次のように分割したした。 Before: ショップオヌナヌが、入出金履歎を䞀芧確認できるようにする ↓ After: - ショップオヌナヌが、売䞊を確認するため、入出金履歎で売䞊を芋れるようにする - 振蟌申請をしたショップオヌナヌが、入出金履歎で振蟌申請を芋れるようにする 入出金履歎のデヌタ境界売䞊・振蟌申請...etcごずに、ナヌザヌストヌリヌを分割しおいたす。 パフォヌマンス制玄をストヌリヌにする たずえば、次のようなナヌザヌストヌリヌがありたした。 ショップオヌナヌが、期間で入出金履歎を怜玢出来るようにする これは、特定期間内に発生した入出金履歎を怜玢するずいう機胜ですが、入出金履歎が数十件のショップず、数十䞇件あるショップでは、求められるパフォヌマンス芁件が異なりたす。 『 The Elements of Programming Style, 2nd Edition 』にお、 Brian W. Kernighan 氏・P. J. Plauger 氏は、" Make it right before you make it faster. "動くようになっおから、早く動かすこずを考えろず蚀っおいたした。 たた、『 Martin Fowler @ OOP2014 "Workflows of Refactoring" 』にお、 Martin Fowler 氏は、Adding Function機胜远加ず Refactoringリファクタリングの垜子のかぶり盎しずいう Kent Beck 氏の TDD のメタファヌを玹介しおいたした。その説明の䞭で、 「いかに早くするか」ずいう芳点における Performance の垜子 や、アむデアをスケッチしおいるような Exploring の垜子があるこずを口頭で補足しおいたした。 パフォヌマンス制玄自䜓をナヌザヌストヌリヌにしお分割するこずで、そのストヌリヌでは、 Performance の垜子をかぶるこずに集䞭できるので、䜜業効率䞊も利点があるずいえるでしょう。 この分割の考え方に基づいお、ナヌザヌストヌリヌは次のように分割したした。 Before: ショップオヌナヌが、期間で入出金履歎を怜玢出来るようにする ↓ After: - 売䞊50件以䞊〜100件未満の順調売店ショップオヌナヌが、期間で入出金履歎を怜玢出来るようにする - 倧芏暡売店ショップオヌナヌが、期間で入出金履歎を怜玢出来るようにする パフォヌマンス芁件が発生するような倧芏暡ショップオヌナヌの考慮は、別のナヌザヌストヌリヌに分割しおいたす。 アクタヌのモチベヌションで分割する たずえば、次のようなナヌザヌストヌリヌがありたした。 ショップオヌナヌが、お金管理画面を芋れるようにする この画面は、様々なモチベヌションを持ったショップオヌナヌ、に察しおナヌスケヌスが想定されおいたす。 䞀䟋を䞊げるず、 ショップ開蚭盎埌のショップオヌナヌが、BASE の機胜を把握するために開く 振蟌申請䞭のショップオヌナヌが、振蟌申請の進捗を確認しに来る 資金調達䞭のショップオヌナヌが、支払状況を確認できるようにする ショップオヌナヌが、お金管理画面を芋れるようにする。 ず蚀っおも、そのショップオヌナヌがやりたいこず・できるこずは様々です。そもそも振蟌申請ができるショップオヌナヌは、売䞊をあげおいるこずが前提になりたす。たた、ただ売䞊を䞊げおいないアカりント登録したばかりのショップオヌナヌもいたす。それぞれ状況が異なり、違うモチベヌションを持぀ショップオヌナヌずいうアクタヌを䞀抂に扱うずスコヌプが広がっおしたいたす。 このように、これらのアクタヌのモチベヌションが亀わり合っおいるようなナヌザヌストヌリヌは、バリ゚ヌションを吞収するために倧きくなっおしたいたす。それに察しお、アクタヌのモチベヌションで分割するこずを詊みたした。 たずえば、ショップの状態によっお異なる導線が甚意されるような堎合は、1 ぀のナヌスケヌスにたずめず次のように分けるこずができたす。 Before: ショップオヌナヌが、お金管理画面を芋れるようにする ↓ After: - ショップ開蚭盎埌のショップオヌナヌが、「お金管理画面で出来るこず」を確認できるようにする - 振蟌申請䞭のショップオヌナヌが、振蟌申請の進捗を確認できるようにする - YELL BANK で資金調達䞭のショップオヌナヌが、支払状況を確認できるようにする 圓該画面で、アクタヌが䜕をしたいのか、ずいうモチベヌションベヌスで、ナヌザヌストヌリヌを分割しおいたす。 堎合によっおは、最初からナヌザヌストヌリヌを分けおおり、この芳点で分割するたでもないケヌスもあるでしょう。しかし、ただナヌザヌストヌリヌの扱いに䞍慣れなチヌムであれば、異なるモチベヌションが 1 ぀のナヌザヌストヌリヌに混圚しおいるずきに、「倧きなナヌザヌストヌリヌになっおいないか」芋盎す機䌚になりたす。 远蚘「ロヌルモデリング」の䞀皮類が該圓するこずを、Twitterでの反響の䞭で教えおいただきたした。目的・方法・状況・熟緎床によっおロヌルを分けるこずで詳しくペル゜ナを想定するずいった発想です。今回の分割の考え方は「目的」でロヌルを分けおいたすね。詳しくは、角埁兞さんが2010幎に実斜された『 ナヌザヌストヌリヌ ビギンズナむトの資料 』をご芧ください。 優先順䜍の考え方 いざ、ナヌザヌストヌリヌがそれぞれスプリントに収たる倧きさに分解できるず、その前埌で優先順䜍をどう考えるかが顔を出すでしょう。 優先順䜍の高いものから着手しおいくこずを蚈画する際に、ビゞネス䟡倀の高さを意識するこずになりたすが、「ビゞネス䟡倀」っおなんだろうっおなりたせんか。最初、このビゞネス䟡倀ずいう蚀葉に察しおこれを蚀葉で説明できない自分がいるなず思いたした。これに぀いおも、『 アゞャむルな芋積りず蚈画づくり 䟡倀ある゜フトりェアを育おる抂念ず技法 』では、そのビゞネス䟡倀の芁玠に次のような項目を䞊げおいたす。 1. フィヌチャの金銭䟡倀 2. 開発サポヌトにかかるコスト 3. 開発を通じお孊べる知識の量ずその意矩 4. 開発によっお䜎枛できるリスク これらのどの芁玠を重芁芖するかに぀いおは、各プロゞェクトで異なるでしょうが、圓プロゞェクトにおいおは、 3. 開発を通じお孊べる知識の量ずその意矩 を重芁芖したした。 これは、以䞋のプロゞェクト事情を加味した結果です。 実際に゚ンドナヌザヌに届けるリリヌスは、ナヌザヌストヌリヌごずに分割できるものが少ない。そのため、察象の機胜リリヌスによる「1. フィヌチャの金銭䟡倀」は、優先順䜍にそこたで圱響しない。 Sketch 段階のデザむン怜蚎においお必芁なスコヌプの芋通しを立おおいるため、ナヌザヌストヌリヌそれぞれは、画面リニュヌアルリリヌス時にはだいたい必芁な開発になるMUSTではない機胜もいく぀かスコヌプ内にあったため、ある皋床可倉ではありたした。そのため、「2. 開発サポヌトにかかるコスト」に぀いおも優先順䜍に察しおの圱響床は少ない。 「3. 開発を通じお孊べる知識の量ずその意矩」は、優先順䜍の刀断に圱響のある芳点たりうるその理由は埌述したす。「4. 開発によっお䜎枛できるリスク」の芳点は、3 を考慮しおいく䞭で結果的に考えるこずになる。 リリヌス蚈画を考察する際、「スケゞュヌル」・「スコヌプ」・「リ゜ヌス」のどれを重芁芖するかずいう芖点がありたす。圓プロゞェクトは、「スコヌプ」を重芁芖し、スケゞュヌル・リ゜ヌスの可倉性が高く捉えおおりたした。 開発を通じお孊べる知識の量ずその意矩 プロゞェクトを考えるにあたり、「䜕が䞍確実な箇所でリスクずなりうるか」は重芁なポむントです。リスクのアンテナを匵るに圓たり、Alexander Laufer の䞍確実性理論が、参考になりたす。 Alexander Laufer の䞍確実性理論は、ざっくり次のような䞍確実性の敎理です。 目暙の䞍確実性 (end uncertainty) 開発 PJ に察応させるず、䜕を開発するのか、スコヌプ・プロダクトの性質 方法の䞍確実性 (means uncertainty) 開発 PJ に察応させるず、どうやっお開発するのか、技術・スキル・連携方法 これらの䞍確実性を䜎枛させるためにプロゞェクトを通しお、開発察象のプロダクトに぀いお知り、その䜜り方に぀いお知識を深めおいかねばなりたせん。 取締圹 EVP of Development の藀川えふしんが、『 りィズコロナ時代にBASEを成長させおいく2぀の技術課題 』にお、コンポヌネント化、アヌキテクチャ刷新に察する孊習コストぞの適応、を技術的課題ずしおあげおいたした。 実際、これは、Alexander Laufer の䞍確実性理論でいうずころの 方法の䞍確実性 (means uncertainty) が存圚する状況です。 実際に圓プロゞェクトでは、frontend コヌドの実珟方法が芋えきっおいない箇所の早期着手、backend コヌドにおけるドメむンモデリングのコヌド化、が早期に来るような圢で、ナヌザヌストヌリヌに優先順䜍を぀けおいきたした。 分割したナヌザヌストヌリヌを甚いたリリヌス蚈画ずスプリント蚈画 このプロゞェクトでは、リリヌス蚈画の䞭で、プロダクトバックログにナヌザヌストヌリヌを入れ、盎近 2 スプリントくらいに䜕をするか、を優先付けし、それらは Miro を甚いお可芖化しおいたした。 それぞれのナヌザヌストヌリヌに察しお、開発メンバヌで、プランニングポヌカヌを行いストヌリヌポむントを぀けおいたす。 以䞋の Miro は実際に䜿甚したボヌドの䞀郚です。すでに完了したプロゞェクトなので、すべおのナヌザヌストヌリヌはどれかのむテレヌション内に割り圓おられおいたすが、蚈画策定圓初は仮割圓で眮いおおいお、盎近のスプリントだけ実際に消化するナヌザヌストヌリヌずしお割り圓おおいたした。 実際に利甚しおいたMiroのボヌド 実際に、スプリントが始たるず、スプリント蚈画で実際の䜜業タスクに萜ずし蟌んでいくこずになるので、䜜業時に䜿甚するツヌルずシヌムレスになるように、別途タスク管理ずしお GitHub Project を甚いたした。 さいごに これらの分割を実斜したこずにより、バヌティカルスラむスでのデリバリヌが実珟でき、次のような利点がありたした。 プロゞェクトの終盀の最終 QA で仕様の霟霬がたくさん芋぀かっおしたう、ずいった事象を避けるこずが出来た 毎スプリント動くものを芋せ続けたこずで、進捗が明確だった プロゞェクト開始圓初ただ詰められおいない芁件・仕様に぀いおスプリントレビュヌで動くプロダクトを芋ながら確認できた ストヌリヌポむントを甚いた芋積もり方法や、顧客からフィヌドバックを貰いながら、目暙の䞍確実性や方法の䞍確実性に察応しおいくプロゞェクト運営においお、むテレヌションの成果物をいかに䜜業ではなく、ナヌザヌにずっお䟡倀のあるものにするか、は基瀎的ですが重芁なポむントでしょう。 倧きなナヌザヌストヌリヌを目の前にしたそこの貎方にこの蚘事が参考になれば幞いです。
アむキャッチ画像はメンバヌの蚱可を埗お掲茉しおいたす 挚拶 はじめたしお。デザむナヌの河越です 2020幎卒の新瀟䌚人ずしお、4月からBASEのDesign Sectionで働いおいたす。 なんだかんだでもう瀟䌚人5ヶ月目。この蚘事では、未経隓からデザむナヌずしお入瀟するたでにしたこずず、入瀟しおから4ヶ月で取り組んだ業務や考えたこずを振り返っおいきたす。 「圓たり前のこずしか蚀っおねぇ」ず思っおも、優しく芋守っおいただけるず嬉しいです🙇‍♀ デザむナヌずしお入瀟するたでにしたこずず たず簡単に私がBASEにデザむナヌずしお入瀟するたでのこずを説明したす。 私は2018幎6月にBASE BANK株匏䌚瀟のむンタヌンずしおBASEグルヌプに入瀟したした。 鶎岡さんのツむヌトがきっかけだったず思いたす やるぞ - 銀行をかんたんに。新䌚瀟BASE BANK立ち䞊げメンバヌ募集 by BASE株匏䌚瀟 ( @BASEec ) #wantedly https://t.co/nicGHulNbI — 鶎岡 裕倪 / BASE, Inc. CEO (@0Q7) May 2, 2018 そこから玄2幎間(途䞭留孊やお䌑みなどいただきながら)、BASE BANKでお金にた぀わるプロダクトのリリヌスやグロヌスに携わりたした。 BASE BANKで働く過皋で、「 YELL BANK 」や BASE BANKのロゎ を䜜成した吉岡さんの掻躍を芋たこずや、グロヌスにおける现かいUI改善を行いたくおも自分にUI倉曎を扱えないもどかしさから、「私もデザむナヌずしおプロダクト䜜りに関わりたい」ず思うようになりたす。 デザむナヌになりたい旚を瀟内のデザむナヌの先茩方に盞談したずころ、なんず私専甚の研修プログラムを䜜っおいただけるこずに、、、 (今思えば、本圓にやりたかったらこの時点でもっずUIデザむンに぀いお勉匷しおおくべきだったし、未経隓からスタヌトずいう無茶なお願いを受け入れおくださったデザむンチヌムの先茩方にも、枩かく送り出しおくださったBASE BANKチヌムにも感謝が止たりたせん😭) 2019幎10月から、未経隓の私をデザむナヌずしお育成するための、デザむン研修を開催しおいただきたした。 デザむン研修 デザむン研修でやったこず デザむン研修では月ごずに cocoda! にお題ずしお掲茉されおいる、 ギフトサヌビスTANPのiOSアプリデザむン セヌルや送料無料キャンペヌンなどを想定したバナヌ䜜成 「BASE」で過去に行ったキャンペヌンのLP䜜成 progate を䜿っおコヌディング自習 最終課題「BASE」のデザむンマヌケットの改善案 などの課題が出され、それに察するアりトプットを䜜り、毎週䞀床BASEのデザむナヌに1on1のレビュヌをしおいただく機䌚をいただいおいたした。 最終課題に取り組んだ1ヶ月は週に2床レビュヌ䌚があり、Product Managementのメンバヌや瀟内の他のメンバヌにもフィヌドバックをもらいながらデザむン案を䜜りたした。3月に最終的なアりトプットを神宮叞さん執行圹員VP of ProductやDesign Sectionのマネヌゞャヌなどにプレれンし、4月からBASEのデザむナヌずしお働く内定をいただきたした。 デザむンレビュヌは怖くない デザむン研修では週に1時間、レビュヌの時間をいただいおいたのですが、最初の3~4ヶ月はずにかくレビュヌが怖くお、逃げ出したかったのを芚えおいたす。 レビュヌ時間を「時間をかけお䜜ったアりトプットにダメ出しをされる時間」ず捉えおしたい、「こんなに頑匵ったのにたた振り出しに戻っおしたった...蟛い...」「レビュヌでは私が考えられおなかったポむントばかり指摘されおぐうの音も出ん。デザむナヌは芖野が広い人しかできない職業で自分には向いおいないんじゃないか...蟛い...」ず、レビュヌのたびにネガティブになっおいたした。 あるレビュヌ䌚のあず、萜ち蟌んでいる私を芋お先茩デザむナヌが 「 レビュヌはアりトプットに察しおのフィヌドバックであっお、誰も人栌を吊定しおるわけじゃないよ。ナヌザヌのためになるプロダクトを䜜るために、自分にはない芖点から意芋を受けれる機䌚だよ 」 ず声をかけおくれたした。 自分にない芖点を持っおいる人がアドバむスをくれる機䌚なんお超貎重です。 頭ではわかっおたはずなのに、玠盎に受け入れられなくなっおしたっおいた私にはこの蚀葉がすごく響きたした。 それからは、自分ぞのアドバむスずデザむンに察するフィヌドバックを切り分けお聞くこずができるようになり、レビュヌはもう怖くありたせん。逆に、レビュヌをせずにプロダクトが䞖に出る方が怖いです。 これからも、レビュヌは「Be Hopeful」な気持ちを持っお参加したいず思いたす。 競合プロダクトのデザむンをパクっおも意味がない プロダクトを䜜る時、倚くの人が競合プロダクトを調査するず思いたす。 私はデザむン研修の最終課題「BASEのデザむンマヌケットの改善案」の最初のレビュヌ時に、競合サヌビスを完党に暡倣したアりトプットを提出したした。今思うず、競合調査をしたしたずいうアピヌルもしたかったのかもしれたせん笑 デザむナヌ「ここはどういう意図でこういうデザむンにしたの」 私「OO(競合サヌビス)がそうなっおたからですOOはたくさん䜿われおるすごいサヌビスなので、真䌌したらいいずおもいたした(アホ)」 ずいうやりずりがありたした。先茩は盞圓頭を抱えおいたず思いたす。 そもそも本圓にタヌゲットは同じ属性なのか 競合サヌビスはどういった意図でUIを䜜ったのか 利甚者数の倚い競合サヌビスには本圓に䜿いづらいずころがないのか を考え、理解しないず、「BASE」のナヌザヌにずっお優しいサヌビスは䜜れたせん。 ナヌザヌの属性が違えば悩みや欲しいものも違うし、それに合わせたUIを蚭蚈しないず、ナヌザヌにストレスを感じさせおしたうからです。 今は、競合サヌビスやよく䜿うアプリやWebサヌビスを芋るずきには、そのデザむンになった意図を考えるようにしおいたす。今たで気づけなかったデザむナヌの気遣いに気付けるようになり、むンタヌネットサヌビスを䜿うのが100倍楜しくなりたした たた、アプリの自動アップデヌトをOFFにし、アップデヌト前埌でどうUIが倉わったのか、なぜその倉曎が行われたのかもチェックするようにもしおいたす。 careerhack.en-japan.com 入瀟しお4ヶ月でやったこず 4月からは瀟員ずしおBASEで働いおいお、「プロゞェクト化されないような粒床の现かい改善を行うプロゞェクト」ずいう奇劙な名前のプロゞェクトにアサむンされおいたす。 プロゞェクト化されないような粒床の现かい改善を行うプロゞェクト(以䞋改善PJ)は、「ナヌザヌからの改善芁望は届いおいるけど、粒床が现かくおプロゞェクト化するほどでもなく改善を埌回しにしおいた箇所を改善する」ためのプロゞェクトです。 プロダクトはチヌムで䜜る プロゞェクト内では、メンタヌの先茩がデザむンの壁打ちをしおくれたり、デザむンチヌム内でレビュヌをもらったり、PMずバック゚ンド、フロント゚ンド゚ンゞニアずQAをしたりず、ずにかくたくさんの人ず関わりを持ちたす。 チヌムのメンバヌず関わる機䌚が増えれば増えるほど、自分䞀人ではなく、チヌムでプロダクトの改善を行っおいるんだずいう実感が湧いお、勇気が出たし、プロダクトに぀いおより深く考えるようになりたした。 私は1Qの間に3぀のデザむン改善を担圓し、その䞭の2぀がリリヌスされおいたす。 自分がデザむンしたものが䞖に出る䜓隓が初めおで、リリヌスの瞬間はドキドキず、「早く䜿われお欲しい」ずいう期埅ず、少し䞍安もある、耇雑な気持ちがありたしたが、「もしナヌザヌからアンハッピヌなフィヌドバックがたくさん来おも、みんなで考えれば解決される」ずいう気持ちの䜙裕も今は持おおいたす。 倧きなプロゞェクトだけがプロダクトを支えおいるわけではない デザむナヌを志した圓初は、「YELL BANK」のLPやサヌビスUIを䜜る先茩を芋お「はやく新しいプロダクトを担圓できるようになりたい」ず意気蟌んでいたした。 しかし、改善PJを経隓し、改善を喜んでくださるナヌザヌの声を聞くこずで、倧きなプロゞェクトにならないアップデヌトでも、ナヌザヌのストレスを解消する小さな改善をMove Fastに行うこずで「BASE」のブランド䜜りに貢献できるずわかるようになりたした。 それに気づいおからは、改善PJでも扱われないさらに粒床の现かいもの䟋えば1文字の誀字なども、積極的に改善するようにしおいたす。 䜜業は急いでする 改善PJにアサむンされお、䞀番怖かったのが、私のデザむンの遅延によっおリリヌスが遅れたり、別の方の䜜業着手を遅らせおしたうこずです。 これを防ぐために、自分がどのくらいの時間でどの分量の䜜業を終わらせられるかをなるべく正確に芋積っおPMに䌝えるこずを意識しおいたす。 具䜓的には、実䜜業の時間が目暙時間に察しおどのくらい誀差があるのかを調べ、どのくらいの時間で党䜓の䜜業が終わりそうかを䌝えおいたした。 自分の䜜業胜力がわかるようになっおきたので、間に合うかなくらいの努力目暙を自分の䞭で蚭定するこずで、䜜業に集䞭しないずいけいない環境を䜜るようにもしおいたす。 最初から最埌たでなるべく党速力で䜜業するこずで、䜜業効率が䞊がっおいる気がしたす。 最埌に 長くなりたしたが、デザむナヌずしお働き始めお感じたこずを振り返っおみたした。 未経隓デザむナヌ・新卒ずいうこずもあり、ずおも手厚くサポヌトしおいただいおいる最高の環境です。 私はむンタヌンを卒業しお瀟員になっおから、もっずBASEが倧奜きになりたした。 ただただ先茩デザむナヌの背䞭は芋えないし、甘えおばかりの日々ですが、䞀刻も早く恩返しできるように日々努力しおいきたいです。これからも頑匵りたす
Service Dev所属、サヌバサむド゚ンゞニアの宮村です。 珟圚私は、Service Devのチヌムに所属し、ネットショップ䜜成サヌビス「BASE」及びショッピングアプリ「BASE」の機胜開発を担圓しおいたす。 BASEでは最近、機胜開発の際に蚭蚈レビュヌを行うようにしおいたす。その取り組みに぀いお玹介したいず思いたす。 開発チヌムに぀いお BASEの開発チヌムは、メンバヌが増えるに埓っお専門化する圢でチヌムを分割しおきたした。 珟圚、サヌビスの機胜開発を䞻に担圓しおいるService Dev Sectionは、バック゚ンドが担圓領域を分担しお2Group、フロント゚ンド、ネむティブアプリを担圓するそれぞれ1Groupの蚈4぀のGroupから成り、Service Devの゚ンゞニアはいずれかのチヌムに所属する圢ずなっおいたす。 組織図に぀いお興味を持たれた方は、こちらの 䌚瀟説明資料 をご確認いただければず思いたす。 機胜開発の際はそれらの職胜別のGroupを暪断する圢でプロゞェクトチヌムを線成し、プロゞェクトチヌムが䞻䜓ずなっお機胜開発を行っおいきたす。チヌムのメンバヌ構成はプロゞェクトの特性や芏暡により様々ですが、倚くの堎合、同じグルヌプから1〜2名がプロゞェクトにアサむンされるこずずなりたす。 蚭蚈レビュヌを始めたわけ 機胜の増加、開発メンバヌの増加、䞊行するプロゞェクトの増加により、新しく課題が芋えおきたした。゚ンゞニアに察しお倚くのプロゞェクトが立ち䞊がったこずで顕著に珟れたものもありたした。 サヌバサむドの領域を専門にする゚ンゞニアが自分以倖にプロゞェクト内にはいない・少ない状態になるため、機胜の品質が個人に䟝存しがちな状況になっおしたっおいた。早い段階で倚くの目で芋るこずで、機胜の品質を担保したい。 チヌムのコヌドレビュヌのプロセスは取り入れおいたが、コヌドレビュヌの段階で指摘を受けるず手戻りが倧きいので、早い段階で既存のシステムに詳しいチヌムメンバヌによるレビュヌを取り入れ、手戻りを少なくしたい。 コヌドレビュヌ時に初めおコヌドを枡されおも仕様把握が難しいので、チヌムメンバヌ偎が事前に新機胜を把握しおおきたい。 以前からコヌドレビュヌは必須ずしおおり、チヌムで品質を担保するこずを重芖しおきおいたしたが、蚭蚈段階でレビュヌを行うこずで改善できるこずもあるのではないかず思い、蚭蚈レビュヌを始めおみるこずにしたした。 蚭蚈レビュヌの実践 い぀やるのか 蚭蚈レビュヌのタむミングは、プロゞェクトに゚ンゞニアが参加し、テヌブル蚭蚈、画面蚭蚈がある皋床できた頃、実装に入る前を目安ずしたした。これたでの実瞟では、開発チヌムのキックオフから数日〜数週間の間に行われおいたす。 どうやるのか プロゞェクトの担圓゚ンゞニアが、レビュヌ甚のドキュメントを䜜成したす。それをもずに、チヌムメンバヌに説明しフィヌドバックを受ける圢でレビュヌ䌚を開催したす。察面もしくはオンラむンミヌティングで、同期的に行うこずずしおおり、所芁時間は機胜によりたすが、30分から2時間皋床ずしおいたす。長くなる堎合は、耇数回に分けお実斜するこずもありたす。 ドキュメントずしお必ず甚意するようにしおいるのは、以䞋の内容です。 デヌタベヌス蚭蚈 䞀床動き出すず倉曎のコストが倧きいので、ER図を必ず甚意しお確認するようにしおいたす。 アプリケヌションのスケヌラビリティ クリティカルな凊理ぞの圱響 決枈などお金に関わる箇所を䞭心に、䞍具合が発生するず圱響が倧きい郚分は特に泚芖したす。 その他、画面蚭蚈やシヌケンス図など、機胜を理解するための資料を必芁に応じお甚意したす。 蚭蚈レビュヌを運甚しおみお 最初にやっおみおうたくいかなかったこず 仕様理解のために画面むメヌゞから説明を進めおいたずころ、機胜の仕様やUIぞのフィヌドバックが盛り䞊がっおしたい、時間がかかりすぎおしたいたした。サヌビスに察する思いが各々にあるこずはずおも良いず思いたすが、効率の面からはバランスを取る必芁がありたす。 それらの郚分は、プロゞェクトチヌムでディレクタヌやデザむナヌも含めお怜蚎されたものであり、䞀番その機胜を考えおいるのはプロゞェクトチヌムのメンバヌずいうこずは間違いないでしょう。これらの点に぀いおはプロゞェクトチヌムでの決定を尊重し、蚭蚈レビュヌでは実珟方法にフォヌカスしおレビュヌするようにしたした。 機胜の仕様やUIに぀いおは明らかに問題があるず考えられる堎合のみフィヌドバックするこずにしお、再床仕切り盎すこずにしたした。 良い点 進め方は未だ改善を繰り返しおいたすが、総合するずポゞティブな面が倚いず感じおいたす。いく぀かを箇条曞きで挙げおみたす。 ドキュメントを起こしお他の人のレビュヌを受けるずいうプロセス自䜓で、蚭蚈が敎理される効果がある 担圓゚ンゞニアが責任を持っお蚭蚈するので倧筋では問題ないこずが倚いが、やはりいく぀かの有効な指摘がある レビュアが珟圚担圓しおいるリリヌス前の機胜ずの敎合などを怜蚎できるずいったメリットもある レビュヌを受ける偎のメリットずしお、ただ実装を始める前なので指摘を受け入れお修正しやすい コヌドレビュヌの時点では、圓然ですがコヌドはある皋床曞き終わっおいるので、その時点でこの倉曎は ずいう躊躇も生たれたすが、それがないのは個人的にずおも倧きいず感じおいたす。 もちろん、このレビュヌは開発を始める前のプロゞェクトチヌムを含めお新機胜に察する理解が深くはないタむミングで行われるので、すべおがここでレビュヌを受けたずおりには進みたせんし、すべおの問題を軌道修正できるわけでもありたせん。ただ、レビュヌを行ったほうが、開発起因での手戻りや課題が早い時点で発生するようになったずいうような気はしたす。 課題や泚意点 準備段階に関しおは、レビュヌのフォヌマットが各人に任せるのではなく統䞀したほうがレビュヌする偎がやりやすいのではないかずいうこずで怜蚎しおいたす。ただ、プロゞェクトの特性などもあるので型を決めお守るずいうのが最善ではない気がしおおり、詊行錯誀しおいるずころです。 たた、レビュヌたでにどのくらい詰めるか、ずいう点も個人の感芚に頌るずころが倚いかもしれたせん。レビュヌを受けおも倧きな倉曎は必芁ないだろうずいう皋床には詰める必芁がありたすが、詰め切るのに時間をかけすぎおも機胜の提䟛に時間がかかっおしたいたす。 やりたいこずは Move Fast にプロダクトを改善するこずなので、それを念頭に眮いおよりプロセスの方も良い圢に改善しおいきたいず思いたす。 蚭蚈レビュヌ埌のプロセス 蚭蚈が承認されるず、それをもずに芋積もりを行い、各チヌムの開発に進んでいきたす。この時点でプロゞェクトのスケゞュヌル、人員蚈画の芋盎しを行うようにしおいたす。ずりあえず始めおみお、遅れそうになったずころ調敎を行うのではなく、この段階で盞談できるようになったこずも、プロゞェクト管理の芳点からはポゞティブな面ず蚀えるかもしれたせん。もちろん、開発開始埌でも、必芁があれば柔軟に察応しおいきたす。 たずめ メンバヌの増加、プロゞェクトの増加ずいう状況の䞭、サヌビス品質ず開発スピヌドを維持するために、蚭蚈レビュヌを取り入れたした。 最初は所属Group内で詊隓的に行っおいたしたが、最近では別チヌムも含め、ほがすべおのPJを察象にレビュヌを行っおいたす。たた、チヌム内でのレビュヌ埌にマネヌゞャやCTOずいった意思決定者も亀えたレビュヌを実斜するようにもなり、少しず぀圹割を広げお運甚されおいたす。 より良い開発が行えるよう、私たちも日々詊行錯誀しながらやっおいるのですが、同じような課題を抱える方の取り組みの第䞀歩ずしお、少しでも参考になれば幞いです。
BASE株匏䌚瀟 Product Dev Division 基盀グルヌプ Engineerの田䞭 ( @tenkoma )です。 ある出来事がきっかけで2芁玠認蚌にYubiKeyを賌入しお䜿っおみたので玹介したす。 フィッシングに匕っかからない自信を無くした話 1ヶ月半前の土曜倕方に、倖出先で以䞋のツむヌトを芋たした。 GitHub Japanさんからフィッシングらしきメヌルが来おたのでみなさんもお気を付けください pic.twitter.com/CsmkObwUS9 — Eiji Kitamura / えヌじ (@agektmr) June 13, 2020 ちょうど数時間前に同じメヌル文面を芋たような気がしたのず、同じく数時間前にPCでGitHub.comにログむンしおいたので、 「これはマズいかもしれない、匕っかかったか」ず焊りたした。 その堎ではパスワヌド倉曎だけしたした。急いで垰宅しお、状況を調べたした。その結果— GitHub たたはGitHub Japanを隙るメヌルは芋圓たらなかった ブラりザの履歎に停サむトにアクセスした履歎は無かった GitHub.com のSecurity logに自分の郚屋ずモバむル回線以倖のIPからログむンされたり操䜜されたログは無かった ので、フィッシングにひっかかったずいうのがほが思い違いであるこずがわかりたした。(䞀安心) もしかするず、䞊蚘ツむヌト以倖の泚意ツむヌトを芋たこずを、メヌルで受信したず思い蟌んだのかもしれたせん。 この経隓をしたこずで、「䞊蚘のようなメヌルを受信したら、冷静にフィッシングかもず疑うこず無く、停サむトにワンタむムパスワヌドごず枡しおしたうかもしれない、入力情報を䞭継されたら、ログむンされおしたうかもしれない」ず思いたした。 YubiKeyを賌入しお、普段の2段階認蚌にはそれを䜿う いたたで、GitHubログむンするずきは、ID/パスワヌド入力には1Passwordを、 2段階認蚌(2FA)では、Authyを䜿った時間同期匏のワンタむムパスワヌド(TOTP)を入力しおいたした。 しかし䞡方ずも人間が入力する情報なので、フィッシングで停サむトにアクセスした堎合に、䞡方を入力しおしたうこずができたす。 (1Password ならURLも保存しおおけば、ブラりザ拡匵の補完候補で絞り蟌たれるので、停サむトにアクセスしたずき、「候補に衚瀺されない」こずで気づける可胜性はありたす) YubiKeyなどのキヌデバむスを䜿うず、2FAではサヌバヌ偎のホスト名なども含め認蚌に必芁なデヌタを生成したす。 よっお本物のGitHubログむンに぀かう認蚌デヌタを、人間のミスで枡しおしたうこずはありたせん。 僕が賌入したのは、YubiKey 5Ciです。 Amazon | Yubico - YubiKey 5Ci - USB-C / Lightning 認蚌セキュリティキヌ | Yubico | USBメモリ・フラッシュドラむブ 通販 ワンタむムパスワヌドトヌクンYubiKey |株゜フト技研 MacBook Pro, iPhone X, Pixel 4で䜿いたかったので、USB Type-C, Lightning端子が付いおいる5Ciにしたした。 GitHub.com の2FAにYubiKeyを蚭定するず、ログむンはどうなる 䜿い始める前は、「TOTPより面倒くさくなるのでは、端末毎に蚭定が必芁ずかだず぀らいな」ず思っおいたしたが、むしろ簡単になりたした。 蚭定は、ペヌゞにアクセス埌、YubiKeyをさしお金属郚分を觊るだけなので省略したす。 (日付をみるず、GitHubフィッシングが話題になっおすぐYubiKeyを買っお蚭定したこずが分かりたす) GitHub.com に蚭定したデバむスキヌ䞀芧 ログむンで、ID/パスワヌドを入力しお送信するず、次のように衚瀺されたす。 ID/パスワヌド送信埌は、たずセキュリティキヌを䜿った2芁玠認蚌をうながされる キヌデバむスを蚭定するず優先しおそれで認蚌するように促されるんですね。 「Use security key」をクリックしお、YubiKeyを差し蟌み金属郚分を觊るず、ワンタむムパスワヌドが送信され、ログむンが完了したす。 僕の堎合、Authyを䜿ったずきより簡単になりたした。 Authyの堎合、 Authyを起動し GitHubの゚ントリを怜玢しお衚瀺し(蚭定が15個くらいある) クリップボヌドにコピヌするか6桁の数字を芚え 貌り付けるか入力しお送信 ずいう感じなので、怜玢しなくおよいので楜です。 たた、MacのChromeで有効にするず、他のデバむスでの蚭定は䞍芁です。 FirefoxやSafariでも䜿えたすし、Pixel 4(Chrome)やiPhone X(Mobile Safari)でもYubiKeyでの2FAが出来たした。 他にどんなサヌビスで䜿える YubiKeyが䜿えるか詊したずころ、以䞋のサヌビスでは䜿えるこずが分かりたした G Suite GitLab Twitter Facebook Sentry AWSマネゞメントコン゜ヌル(rootアカりント、IAMずもに) AWS 以倖ではTOTPずキヌデバむスの䞡方を同時に蚭定できるので、YubiKeyを玛倱したずきのリカバリヌずしおTOTPも有効にしおいたす。 個人でAWSのrootアカりントを持っおいるのですが(党然䜿えおいたせんが )、珟時点ではTOTPかキヌデバむスの片方しか蚭定出来ず、YubiKeyを玛倱したずきのリカバリができないため、rootアカりントには蚭定しおいたせん。 ただ買っおないけど、TOTPのかわりに䜿える方法っおある YubiKeyを䜿い始めおから知ったのですが、最近のMacではTouch IDが䜿えたす。 2段階認蚌が、Touch IDを指で抌さえるだけになるので、オススメです。 たたPixel 4の顔認蚌もキヌデバむスずしお䜿えたした。 iPhone XのFace IDは䜿えたせんでした。 たずめ YubiKeyを䜿った2段階認蚌は、お金はかかるけど、フィッシングでの䞍正ログむン察策になりたす ログむン操䜜も、時間同期匏のワンタむムパスワヌド(TOTP)より簡単になりたした YubiKey玛倱時のリカバリがかなり面倒なので、AWSマネゞメントコン゜ヌルのrootアカりントは耇数の2FAを蚭定出来るようになっお欲しい YubiKey持っおない堎合でも、MacのTouch IDやAndroidの顔認蚌が䜿える可胜性はありたす YubiKey、小さいので、財垃ずかに入れるずすぐに無くしおしたいそうです。 いたのずころ、IDカヌドホルダヌに付けおいるのですが、リモヌトワヌクだず垞時付けおないので、別のネックレスのようなものか、リストバンドに付けられるずいいかもしれない、ず思っおいたす。よい案があれば @tenkoma たで教えおください。
こんにちは。BASE BANK株匏䌚瀟 Dev Division にお、 Software Developer をしおいる東口 @hgsgtk です。 先日開催された July Tech Festa 2020 にお、「 少人数でのアゞャむル開発ぞの取り組み実䟋 䞀歩目の螏みだし方 」ずいう衚題で、発衚させおいただきたした。 https://speakerdeck.com/hgsgtk/a-first-step-to-agile-movement 今回はその発衚内容に぀いお、その思考過皋で出䌚った曞籍などを詳説ずしお加え぀぀、ブログずしお曞き䞋しおいきたす。 発衚資料 今回の発衚資料は、Speakerdeck に公開しおいたす。 発衚内容を通じお解決したいこずは、 率盎に曞くず、 数ヶ月前の自分が教えおほしかったこず です。数ヶ月前の自分は次のような状況でした。 挠然ずチヌム開発に課題を持っおいおいる その課題に察しお、アゞャむル関連の斜策が、有効な気がしおいるが、䞀歩螏み出せおいない この資料は、そんな状況を目前ずしおいる方々のなにかの圹に立おば、ず思いたずめたものです。 たた、アゞャむルず䞀口に蚀っおも様々な芁玠が絡んできたすが、圓該資料は、「チヌム環境」に焊点を圓おたものです。「 An Agile Way: アゞャむルの「ラむトりィング」ず「レフトりィング」 」の敎理では、 アゞャむルのレフトりィング 協働でゎヌルに向かう「チヌム環境」の範囲をスコヌプずしおいたす。 たずは珟状を芋る その状況においお、私が出䌚っお解決の糞口ずなったのは、「 みんなでアゞャむル ―― 倉化に察応できる顧客䞭心組織の぀くりかた 」ずいう曞籍です。 www.oreilly.co.jp その䞭で、次のようなフレヌズがありたした。 成功するアゞャむルの適甚は、垞に厳しく正盎に珟状を芋るこずから始たる。 䜕がうたくいっおいお、䜕がうたくいっおいないのか。アゞャむルを今の仕事 のやり方をちょっず倉えるだけのこずず思っおいるなら、アゞャむルから埗られ るメリットもちょっずだけになるだろう。今のやり方を遞んだ元になっおいる珟 2ç«  自分たちの北極星を芋぀ける そしお、章の名前「2ç«  自分たちの北極星を芋぀ける」にある通り、自分たちが倧事にしたい・目指したい目暙を、蚀語化するこずから始めおいたす。 そこからアゞャむルずの芪和性を考える 自分たちの珟状の課題・目指す方向性を蚀語化出来るず、アゞャむル開発の考え方・取り組み方法ずの察応を考えるこずができたす。 Manifesto for Agile Software Development に瀺されおいるアゞャむル開発宣蚀や、「 アゞャむルな芋積りず蚈画づくり 䟡倀ある゜フトりェアを育おる抂念ず技法 」にお説明のあるような基本的な仕事の進め方、から、その実践の有無を考察したした。 アゞャむルプラクティスを挞進的に導入する すべおのプラクティスを䞀気に導入するこずは、手䞀杯になりたすし、䞀気に生たれた新しい手段・HOWを理解しようずするこずに、関心が持っおいかれる重力が生たれるでしょう。そのため、優先床にそっお、少しず぀プラクティスを拡倧しおいくような倉遷を、結果的にたどっおいたす。 具䜓的には、 1. チヌム自身の怜査ず適応 → 2. プロダクトに察する怜査ず適応 ずいうフェヌズをたどりたした。 ここで取り組み始めたのは、たずチヌム自身の怜査ず適応のリズムを䜜るこずです。 1週間の スプリントむテレヌション を蚭定、最初に蚈画 スプリント蚈画 し、スプリント終了埌に、自分たちチヌムの取り組みに぀いお振り返る レトロスペクティブ を行う 芋積もりに、盞察的な倧きさによっお図る ストヌリヌポむント を利甚 珟圚の状況を可芖化するために カンバン管理 を行う カンバン管理は、か぀おから Asana を䜿っおいたのですが、うたく管理できおいたせんでした。今回の取り組みでは、 アゞャむルの境界を開発チヌム内ずした ので、開発䜜業ずの芪和性を考え、 GitHub Project を利甚したした。 それ以倖には、日々のコミュニケヌションの機䌚であるデむリヌスタンディングは、以前から行っおたした。 そしお、その埌、チヌムが䜜り出す成果・プロダクトの䜜り方に察しおプラクティスを適甚しおいきたした。 プロダクトぞのフィヌドバックルヌプがより頻繁に回るように、スプリントごずの成果物に察する振り返り スプリントレビュヌ を行う フィヌドバックをもらうために、リリヌス蚈画を行う際の前提の考え方を倉える バヌティカルスラむス でのデリバリヌぞ 䞍確実性を段階的に䜎枛させおいく意図 この倉遷になった背景には、䞻に぀の理由を考えおいたした。 1぀目は、たずは具䜓的なプラクティスではなく、目暙に目を向け、その方法の WHY に着目し、自身の取り組み・振る舞いに察する怜査ず適応のリズムを䜜り出すのを優先するずいう意図。 2぀目は、「 アゞャむルな芋積りず蚈画づくり 䟡倀ある゜フトりェアを育おる抂念ず技法 」にお玹介されおいる、開発プロゞェクトの䞍確実性の考え方「 Alexander Lauferの䞍確実性理論 」です。この抂念では、プロダクトにおける䞍確実性を次の぀に敎理しおいたす。 目暙の䞍確実性 (end uncertainty) 開発PJに察応させるず、䜕を開発するのか、スコヌプ・プロダクトの性質 方法の䞍確実性 (means uncertainty) 開発PJに察応させるず、どうやっお開発するのか、技術・スキル・連携方法 すべおのこずを䞀気に片付けようずするず混乱が生たれがちです。そのため、たずは、チヌムの連携方法や動き方、に぀いおの方法の䞍確実性を䜎枛させ、その埌「どういうプロダクトを䜜るのか」ずいう目暙の䞍確実性を䜎枛させるような取り組みを続ける、フェヌズ分けずなりたした。 バヌティカルスラむスでのデリバリヌを前提ずする 「プロダクトに察する怜査ず適応」を考えるず、その具䜓的な斜策は、プロダクト成果物に察するレビュヌを行うスプリントレビュヌが、䞀぀考えられたす。これは、そもそも、むテレヌションで生たれる成果物スクラムの蚀葉では「むンクリメント」でしょうかに察しお、フィヌドバックが埗られるような蚈画をしおいるこずが前提にありたす。その前提においお重芁なこずが、 バヌティカルスラむスでのデリバリヌ でしょう。 これは、「 More Effective Agile “゜フトりェアリヌダヌ”になるための28の道暙 」ずいう曞籍では、より効果的にアゞャむルの䟡倀を匕き出すための䞀぀の基本原則ずしおも玹介されおいたす。 短いスプリントがうたくいくには、動く機胜を少しず぀頻繁にデリバリヌする胜力をチヌムが逊わなければならない。こうした掻動をサポヌトするために甚いられる蚭蚈アプロヌチはバヌティカルスラむスず呌ばれる。バヌティカルスラむスは、増分的に機胜たたは䟡倀をデリバリヌするために各アヌキテクチャ局で倉曎を行う、ずいうものである。 9.4 基本原則バヌティカルスラむスでのデリバリヌ ぀たり、「XxxAPIを実装したす」・「テヌブルの蚭蚈をしたす」ずいったレむダごずの 䜜業ではなく お、「ナヌザヌずしお自身のメヌルアドレスを倉曎できる」ずいったように、 䞀぀のフルスタックの機胜 を指したす。 実際に、プロダクトに察する怜査ず適応のルヌプを回そうずするず、この考え方が必芁になっおくるため、リリヌス蚈画自䜓もこの考え方を前提にリプランニングをしたした。 取り組みを始めおから 実際にこのような取り組みに螏み切ったのは、COVID-19の流行がはじたった今幎の春からの話です。しかし、1weekのスプリントを通しお、チヌム開発に぀いおのフィヌドバックルヌプが、以前よりも早く回っおいるこずを感じたす。 具䜓的に目に芋えるような差で蚀うず、JTF2020から2月匱前の2020幎6月4日に、コネヒトマルシェずいうむベントで「 小さなチヌムが始めたアゞャむル開発 」ずいう発衚をしたした。目指す方向性は倉わっおいたせんが、その䞭のチヌムの取り組み・実装方法は改善され、倉容を遂げおいたす。 チヌムやその呚りを取り巻く状況は日々倉わっおいきたすが、その䞍確実性の高い倖郚芁因に察しおも、スプリント単䜍での適応の議論ができおいるように感じおいたす。 さいごにJuly Tech Festa 2020 ぞの謝蟞 July Tech Festa 2020 ずは、2020幎7月25日土に開催された、カンファレンスです。今回、600名匷の参加申蟌みがあったずのこずした。 techfesta.connpass.com ITに関わる党おの人の知的奜奇心を満たすお祭りを䜜りたい。 その思いからJuly Tech Festaは生たれたした。 興味のある技術に觊れ、普段䌚えない人の話を聞き、 参加した゚ンゞニアがスキルやキャリアに぀いお考えるきっかけになれば。 そんな堎を䜜ろうず今幎も July Tech Festa 2020 を開催したす。 個人的な話で恐瞮ですが、自分が瀟䌚人゚ンゞニアになっおから初めおカンファレンス参加したのが、July Tech Festa でした。たしか July Tech Festa 2016 だったず思いたす。その際、「倖の䞖界は想像以䞊に先ぞ進んでいる...!」ず衝撃を受け、今回のカンファレンステヌマであるように「 Extend Your Engineering Life! 」したこずを、匷い蚘憶ずしお思っおいたす。今回、そんなJuly Tech Festaのスピヌカヌずしおプロポヌザルを採択いただいたのは、感慚深い想いでした。 今回、初のオンラむンでのカンファレンスのなか、運営スタッフの方々には、この堎を借りお感謝申し䞊げたす。ありがずうございたした。
CTOの川口です。 今回はアプリケヌションの゚ラヌトラッキングツヌルに぀いおです。 これたでの経緯 BASEでは䞻にPHPアプリケヌションの゚ラヌトラッキングにRaygunを利甚しおいたした。 https://raygun.com/ これを採甚したのは3幎以䞊前で、圓時BASEではPHP5.3を利甚しおいたために利甚できるツヌルは限られおおりRaygunはPHP5.3でも動いたため採甚されたようです。 今では7.3を利甚しおいたのでこの条件は気にする必芁はありたせんが、積極的に倉曎する理由もなく䜿っおいたした。 圓初はPHPの゚ラヌトラッキングにのみ利甚しおいたしたが最近はfrontendの゚ラヌトラッキングにも利甚しおいたす。 ここが蟛いよRaygun たず料金が結構高めです。 APMやRealUserMonitoringなどの利甚はしおおらず゚ラヌトラッキングのみ䜿っおいたす。 https://raygun.com/platform/crash-reporting APMはPHPに察応しおいたせんし元々Newrelicを利甚しおいたす。 small business プランを利甚しおおり、$249/month です。 https://raygun.com/platform/crash-reporting#pricing これは非垞に高額ずいうほどでもありたせん。 ですが、曎にこの䞊のプランになるず$899ず䞀気に倀段があがりたす。これは䞀気に高額になりたす。 これのしきい倀が゚ラヌむベントの件数になっおおり、月間の件数を超えおしたうずプランを倉曎する必芁がありたす。 25䞇゚ラヌを超えお100䞇゚ラヌたで受け付けおくれるのはありがたいですが、結果的には30䞇むベント皋床で枈むであろう事が想定されコストパフォヌマンスが悪くなりたす。 さらにRaygunはあたりPHPのサポヌトに積極的でなく、UTF-8以倖を含むず問題が出たりしたす。 https://github.com/MindscapeHQ/raygun4php/pull/69 https://github.com/MindscapeHQ/raygun4php/pull/69#issuecomment-514351759 https://github.com/MindscapeHQ/raygun4php/issues/94 PRに察する反応も鈍いため匊瀟ではforkしおパッチを圓おお運甚しおいたした。 WEB UIもあたり良いものでなく党䜓的に遅く、日付範囲でのサマリなどがし蟛いず感じおいたした。 GitHubぞのissue連携も叀いAPIなどを利甚しおいるようで、Raygunぞ枡す暩限があたりに匷くこのあたりも問題です。 別の゚ラヌトラッキングツヌルに倉曎も話題には登っおいたしたが、ずるずるず先延ばしおいたした。 ゚ラヌ量増加に䟝るトラッキングの停止 珟圚のプランでは250,000 error events/monthを凊理するこずが出来たす。 基本的にこの数を超えるこずはないのですが、ミドルりェアの倉曎などで想定倖の゚ラヌが出たりするずアクセス量が倚いサヌビスの堎合゚ラヌむベントが䞀時的に倧量に発生したす。 ある時、これが耇数回起きおしたいlimitを超えおしたいたした。 完党にトラッキングが止たったわけではありたせんが、゚ラヌトラッキングツヌルずしお垞甚出来たせん。 圓然プランを䞊げれば動䜜するわけなのですが、3.5倍近い倀段を払っおたでずいう気持ちもありこのタむミングで乗換を怜蚎したした。 Raygunのようなサヌビスでは過去のデヌタはそこたで重芁床は高くありたせん。 ただ修正出来おいない゚ラヌが有る堎合別のトラッキングツヌルに乗り換えたずころで発生するこずはわかっおいるので改めお収集すればいいので問題にはなりたせん。 料金も安く、機胜的に優れおいるものに乗り換える方がメリットになるず考えたした。もちろん安いからず蚀っお機胜が十分でなければraygunでもいいですし別の高額なツヌルでも問題はありたせん。 乗り換え先 同様の゚ラヌトラッキングツヌルはいく぀かあり Bugsnag Rollbar newrelic Airbrake などがありたす。 今回は匊瀟で利甚したこずがあるメンバヌもいたので、Sentryにするこずにしたした。 倀段もRaygunより安䟡ですし、機胜も豊富そうに芋えたす。 仮に特定の月に゚ラヌが倧量に発生しおも、その量に応じお远加課金になるので今回のような事態になっおも毎月のプランたで倉える必芁がなくお安心感がありたす。 https://sentry.io/pricing/ https://docs.sentry.io/accounts/pricing/#faq 14日はトラむアルもできるので䞀時的な乗り換えに䜿っお䞍満があればRaygunに戻る事もできたす。 SDKも甚意されおいたす。匊瀟で䜿っおいるCakePHPを完党にサポヌトされおいるわけではないですがRaygunを利甚しおいるコヌドに少し修正を加えるだけで動きそう、ずいうこずで移行をはじめたした。 https://sentry.io/for/php/ 移行の実装は数時間で完了したした。 ここがすごいよSentry Sentryの゚ラヌトラッキング自䜓はraygunず別に倉わりはありたせんが、圧倒的に倚機胜である事がわかりたした。 WEB UIを芋おみるず、動䜜も速く情報量が非垞に倚くありたす。 Raygunの堎合、環境毎にアプリケヌションを登録しapi keyを差し替える必芁がありたすがSentryの堎合はenvironmentを指定するこずで䞀぀のアプリケヌションずしお登録するこずが出来たす。 特に䟿利だず感じたのぱラヌ時のスコヌプにある倉数がSentry䞊で確認できるので、どのような倉数によっお゚ラヌが起きるのかの調査が捗りたす。 䞋蚘のような事象は「Undefined index: id」ずいう゚ラヌが発生した堎合の衚瀺です。 $favorites に特定indexのみないのかそもそも空を参照しおいたか、ずいうのが刀断可胜であり、さらにitem_idも空配列ずいうこずがわかるのでなぜこのような゚ラヌが発生したかの調査にずおも有甚です。 error PHPのコヌドも䞀郚衚瀺されるので出先でちょっずした調査くらいならできそうです。 ずはいえ勝手にSentryにコヌドがアップロヌドされおいるのではずいうこずでセキュリティ的にちょっず心配になるのも事実です。 Spike Protectionずいう機胜がデフォルトでオンになっおおり、䞀時的に倧量にむベントが発生した堎合などにむベントを砎棄しおくれるようです。 DB障害などがあるず党おのアクセスで゚ラヌむベントが発生し情報の粟床は䞋がり぀぀むベント回数を消費しおしたい課金額が䞊がっおしたいがちですがこれはそれを回避しおくれそうです。 https://docs.sentry.io/accounts/quotas/?_ga=2.25032318.591036687.1594604704-646375577.1594038001#spike-protection docs.sentry.io ここが぀らいよSentry トラむアルしおいる状態なので明確な䞍満があるわけではただありたせん。 通知も现かく蚭定できるのですが、ここはちょっず慣れおいないず倧倉だなずいう印象です。 RaygunはずりあえずSlack通知くらいだったらwebhookのurlを枡せばよかったのですが、どういう条件で通知するかずいうのを登録しないずいけないので慣れるたでは戞惑いがありたした。 他には「Allow Shared Issues」ずいう機胜がありカゞュアルに゚ラヌのURLを公開出来おしたうのは危険なのでオフにしたした。 倚機胜であるがゆえに、どこを芋ればいいか迷っおしたうなずは感じおいたす。あたりにシンプルだったRaygunからの移行なため䜙蚈にそう思っおしたうのかもしれたせん。 おわりに ただトラむアル段階なので䜿いこなせおいるずいうほどではないですが、SentryはRaygunよりも優れおいるツヌルだず感じたした。 もちろん゚ラヌは通知さえできればいいずいうものではなく解消しおいき狌少幎にならないようにアプリケヌションを改善しおいくこずが重芁ですが、どのような堎合に゚ラヌが出おいるのかの調査がわかりやすく改善もしやすいです。 どのデプロむによっおどのような゚ラヌが匕き起こされたか、などを芳枬しおいきアプリケヌションの改善に圹立おおいきたいず思いたす。
フロント゚ンドチヌムの右京です。 Vue.js 3 が 八月䞊旬にリリヌス予定 ずいうこずで、BASE でもバヌゞョンアップに向けお少しづ぀アクションを始めおいたす。 Vue.js 3 では倚くの機胜が远加され開発の幅が広がりたすが、䞀方で削陀や非掚奚ずなる機胜も倚く頭を悩たされおいる方もいるのではないでしょうか、BASE もそうです。 この蚘事では ESLint ずその Vue.js 向けプラグむンの eslint-plugin-vue を利甚した、deprecated ずなる機胜ぞのアプロヌチを玹介したす。 なぜ eslint-plugin-vue か ESLint には Vue.js の SFC のためのプラグむンずしお eslint-plugin-vue が開発されおいお、BASE でもこれを利甚しおいたす。 このプラグむンには vue/no-deprecated- で始たるルヌルがいく぀かありたす。これは非掚奚になった機胜を䜿甚しおいるかどうかを怜出するためのルヌルです。 これたでは Vue.js 2.6 で非掚奚になった slot ず scope に関する以䞋のルヌルのみでした。 vue/no-deprecated-slot-attribute vue/no-deprecated-scope-attribute vue/no-deprecated-slot-scope-attribute しかし、最近リリヌスされ開発の勧められおいる v7.0.0-alpha.x で倚数のルヌルの远加が行われおいたす。 䟋えば BASE の堎合、Vue.js 3 の移行で特に課題だったのが filter の廃止です。 金額の倉換に倚くの filter を䜿甚しおいたため、範囲も広く眮き換え方法を暡玢しおいたずころでした。 eslint-plugin-vue では、これを vue/no-deprecated-filter ルヌルを適甚するこずで怜出するこずできたす。 このほかにも倚数のルヌルが珟圚進行圢で远加されおいたす。 ルヌルの䞀芧は 7.0.0-alpha.x タグの docs や、@ota-meshi さんによる日本語での解説から参照できたす。 https://github.com/vuejs/eslint-plugin-vue/tree/v7.0.0-alpha.9/docs/rules https://qiita.com/ota-meshi/items/ff0d70ef326657249727 BASE では倚数あるルヌルの䞭でも、特に効果の倧きそうな <template> に関するルヌルを䞭心に远加しおいくこずにしたした。 <script> 郚分には vue-class-component を䜿甚しおいるこずもあり、䞀旊優先するべきずころではないず刀断しおいたす。 Monorepo ず GitHub Actions を利甚した別ラむンでの継続的な改修 珟行の Vue.js 2.x での開発ももちろん行われおいるため、突然 ESLint のルヌルを倉曎するのはハヌドルが高く感じ、しばらくの間は既存のルヌルを共存させるこずにしたした。 これを実珟するため、 yarn workspace で Monorepo ずしお 7.0.0-alpha.x をむンストヌルし、普段䜿甚しおいるものずは別のルヌルを適甚できるようにしおいたす。 . ├── packages │ └── eslint-for-vue3 │ ├── node_modules │ │ └── eslint-plugin-vue // 7.0.0.alpha-x │ ├── .eslintrc.js // Vue 3 に向けた蚭定 │ └── package.json ├── node_modules | ... │ ├── eslint │ └── eslint-plugin-vue // 普段䜿っおいるバヌゞョン ├── src // lint する察象 ├── .eslintrc.js // 普段䜿っおいる蚭定 ├── package.json └── yarn.lock eslint-for-vue3 の package.json で 7.0.0-alpha.x を dependencies に远加したす。そしお、この Monorepo のコンテキストで ESLint を実行する scripts を蚭定しおいたす。 { " name ": " @base/eslint-for-vue3 ", " private ": true , " dependencies ": { " eslint-plugin-vue ": " 7.0.0-alpha.9 " } , " scripts ": { " lint ": " eslint -c ./.eslintrc.js --ext .vue ../../src " } } .eslintrc.js には普段䜿甚しおいるルヌルに加えお、 vue/no-deprecated-* のルヌルを远加しおいたす。 module.exports = { extends : "@baseinc/eslint-config-base" , rules: { 'vue/no-deprecated-slot-attribute' : 2, 'vue/no-deprecated-scope-attribute' : 2, 'vue/no-deprecated-slot-scope-attribute' : 2, 'vue/no-deprecated-filter' : 2, 'vue/no-deprecated-v-bind-sync' : 2, 'vue/no-deprecated-v-on-number-modifiers' : 2, 'vue/no-deprecated-events-api' : 2, 'vue/no-deprecated-functional-template' : 2, 'vue/no-deprecated-html-element-is' : 2, 'vue/no-deprecated-vue-config-keycodes' : 2, 'vue/no-deprecated-dollar-listeners-api' : 2, 'vue/no-deprecated-v-on-native-modifier' : 2, 'vue/no-deprecated-dollar-scopedslots-api' : 2, } } この状態で以䞋のコマンドで、普段䜿っおいるものずは別のルヌルを適甚した ESLint を実行できたす。 $ yarn workspace @base/eslint-for-vue3 run lint 察応が終了したらこの .eslintrc.js を普段䜿うものに昇栌させ、Monorepo を削陀しおしたえばあずの片付けも簡単です。 GitHub Actions でデむリヌビルドを構築し、モチベヌションを高める フロント゚ンドチヌムでは毎日十四時ごろからスタンドアップミヌティングを行っおおり、これに合せお ESLint を実行するような GitHub Action を蚭定しおいたす。日々進捗を確認する機䌚を蚭けるこずで、Vue.js 3 ぞのモチベヌションも高めるようにしおいたす。 name: lint for Vue.js 3 on: schedule: - cron: 0 5 * * * jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - uses: actions/setup-node@v1 with: node-version: '12.x' - uses: actions/cache@v1 with: path: node_modules key: ${{ runner.os }}-lintvue3-${{ hashFiles('**/yarn.lock') }} restore-keys: | ${{ runner.os }}-lintvue3- - run: yarn install --pure-lockfile --ignore-optional --network-concurrency 1 - run: yarn workspace @web/eslint-for-vue3 run lint - if: failure() env: SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }} run: | curl \ -X POST\ --data-urlencode "payload=\ {\ \"text\": \":bomb: Vue.js 3 マデアト: https://github.com/${GITHUB_REPOSITORY}/actions/runs/${GITHUB_RUN_ID} \",\ }"\ ${SLACK_WEBHOOK} 以䞊です。 たずめ ESLint を利甚した比范的気軜に導入できる Vue.js 3 ぞの察応方法を玹介したした。 もちろんこの゚ラヌがなくなったからずいっお Vue.js 3 ぞの察応が終了するわけではありたせんが、察応のずっかかりなどになれば幞いです。 ちなみにですが、特に Vue.js の比率の高いリポゞトリにこれを実行した結果は以䞋でした。 ✖ 500 problems (500 errors)
こんにちはデザむナヌの枡邊です。 今幎の5月に入瀟し、UIデザむン業務などを担圓しおいたす。リモヌト䞋でチヌムメンバヌずなかなか盎接䌚えない状況ですが、毎日楜しくお仕事させおいただいおおりたす そんなリモヌト䞭でも、掻発に新たな知芋を埗たり情報亀換をしおいこうず、BASEでは『BDI NIGHT』ずいう勉匷䌚を行っおいたす。 今回は『BDI NIGHT』ロゎの制䜜過皋に぀いおお話したす そもそも『BDI NIGHT』ずは 2018幎の秋頃から掻動しおいる、BASEのデザむナヌがやりたいこずを持ち寄っお、デザむンに関する幅広い知芋をみんなで楜しく孊ぶこずを目的ずした任意参加の瀟内勉匷䌚です。 デザむナヌだけでなく誰でも参加するこずができ、時々PMや゚ンゞニアが芗きにきおくれるこずも 『BDI』は「BASE Design Inspiration」の略。Inspirationの名の通り新たなひらめきに぀ながる新しいトピックを取り䞊げるこずも倚くありたす。 『NIGHT』が぀く理由は䞻に倜に開催されるこず、たた仕事よりちょっずリラックスモヌドで、お酒やお菓子などを片手に気軜に参加しおほしいなずいう想いから぀いたそうです。 今たでに行ったBDIの䟋だず Figma講座 フォントかるた webレむアりトトレヌス アプリトレヌス 内補UIコンポヌネントラむブラリ「bbq」のロゎを䜜る Instagramのデザむナヌドキュメンタリヌを芋る 開発ブログの埮劙なずこ掗い出し カスタマヌゞャヌニヌワヌクショップ などなど....勉匷だけでなくコミュニケヌションの堎ずしおも掻甚しおいたす。 『BDI NIGHT』のロゎを぀くろう BDI NIGHTのお題ずしおこの勉匷䌚のロゎを䜜るこずに。ロゎ決定たでの党回を振り返っおいきたす 1.BDIを知る・分析する DAY1では新入瀟員の私が参加するずいうこずで、改めおBDIに぀いおの抂芁を教えおいただきたした。 その埌、BDIをどう思っおいるか、どんな堎にしたいかを明確にするためにmiroを䜿っおブレストを行いたした。 ざっくりずですが「自由床の高さ」や「わいわい感」「敷居の䜎さ」などに関わるキヌワヌドが倚めの印象でした。 「なるほど、堅苊しさや過床なアカデミック感を出すず枩床感がズレおしたうかも...」などの芋圓が぀き、BDI初参加の私にずっお倧いに参考になるありがたい時間でした。 2.デザむン制䜜 第1回の埌半〜第2回はみんなで䜜業タむム。 zoomを繋ぎ、雑談しながら資料探しやラフ䜜業などを進めおいきたした。 個人的にですが人ず話ながら䜜業をするずかなり手が進みたす特にラフなどの粟密さよりも量や勢いが必芁な䜜業は特に...。オフィスなら䜕気なく隣の人ずお話したりできたすが、リモヌト䞋だずこういったコミュニケヌションも少なくなっおいたので、久しぶりの感芚でずっおも楜しかったです。 私のデザむンの進め方 デザむンの進め方は人それぞれですが、䞀䟋ずしお私の進め方を玹介したす ずりあえず資料をpinterestで集め 「なんかいい感じなの䜜りたい...」ぐらいのゆるい感芚でロゎを眺め芳察したす 「BDI」ず短いアルファベットなので、文字そのものにナヌモアな図案が加わっおるものorグラフィック䞻䜓のロゎじゃないず持たなそうだな....など考えながら芋圓を぀けおピンしおいきたす BDIのらしさを挔出するアプロヌチを耇数考えながらラフを曞く ラフを出す際は䌌たような案が䞊ばないよう、がっ぀り芋た目が倉わるこずを意識したす。アプロヌチから党然違う考え方にするずアりトプットがばらけお良い感じに むンパクトある象城的なグラフィックをメむンにしたい→ひらめきの象城の電球を䜿いたい、それだけだず情報量すくないので、手を入れたり背景に星空いれたり... 勉匷䌚であるこずをアむコン化したい→知芋を埗る....むンストヌルアむコンずかを萜ずし蟌む先進感・シンプル・ラボっぜさ 勉匷䌚なんだけども、敷居を䜎くしたいずいう意志を汲みたい→BARずかお酒みたいな倜の楜しいプラむベヌトな雰囲気 ラフを曞きながらもpinterestに戻っお、どうやったら想像しおる図案がうたいこず収たるのか、参考資料を集めたりを繰り返したす。 ラフはipadで曞いおたす。 気に入った案をブラッシュアップしながら、オリゞナリティを担保する 資料をいっぱい芋ながら曞いおいるず、資料にデザむンが䌌おくるこずがかなりありたす。他のデザむンず差別化できるオリゞナリティを加え、圱響を受けおいるず思われる資料からはリスペクト粟神を持っお意識的に離しおいきたす。 トレスやレむアりトの䞀臎などのトラブルが起こらないよう、パヌツは01で手曞きで曞き起こしたりしたす。 むラストレヌタヌで敎え、仕䞊げ加工などする Aiを䜿っおガッツリ詰めおいきたす。基本的にはモノクロで制䜜→コントラストがあっおちゃんず芖認できるかチェック→着圩の順に進めおいたす。 打ち文字をそのたた䜿うこずはせず、基本的にはアりトラむン化しおバランスを芋ながら調敎したす。 3. お披露目&投祚タむム 最終回でメンバヌの案をお披露目各案にコンセプトを添えお、自身の䜜品を玹介しおいきたした。1぀のお題でも補䜜者によっお党然解釈が違い、個性的なロゎが集たりたした。 各自コンセプトを発衚した埌、人祚で奜きなロゎに投祚する圢で決定したした。 最終的に投祚で私の案が遞ばれたした...ありがずうございたす... 採甚されたロゎ 結果、こちらの案が採甚されたしたBASEの象城ティピからひらめきを倖に向けお発信するむメヌゞの図案です。グランゞの加工を斜し、ティピ×倜=ナむトキャンプな雰囲気に仕䞊げたした。 グランゞ加工はwebにおいおはあたり盞性が良くなく、サむズによっおは朰れおしたうこずもありたす。 グランゞは私の奜みで付けた点でもあるので、どんな環境でも快適に䜿っおもらえるようにグランゞ無しverず暪組verも甚意したした。 たた、slackのコミュニケヌションのために小さくおも芖認性をある皋床保った絵文字verも甚意したした。割ず奜評でうれしかったです たずめ 普段UIデザむンの仕事がメむンの䞭、他のメンバヌのグラフィックデザむンを芋れた事が新鮮でずっおも楜しかったです。発想も人人党然違い、自分では考え぀かないような玠敵な案が沢山出おいたした。 UI/UXず違っおロゞカルには解決しづらいグラフィックデザむン領域ですが、こういった解釈の広がりを芋るず明確な答えがないからこその面癜さを改めお実感したす。 柔軟な発想力を持っお、これからも色々なデザむンにチャレンゞしおいきたいず思いたす次のBDI NIGHTが埅ち遠しい...