kakakakakku blog

Weekly Tech Blog : Keep on Learning 👍

Envoy の lb_policy は ROUND_ROBIN 以倖にもある「Controlling load balancing policies」を詊した

今回は「Try Envoy」の「Controlling load balancing policies」を玹介するEnvoy でサポヌトされおいる「ロヌドバランスポリシヌ」の皮類を孊べるただしWeighted round robin の動䜜確認は期埅通りに動かず消化䞍良な感じになっおしたった個人的には「Controlling load balancing policies」は実斜しなくお良いず思う可胜なら Katacoda 偎で内容を芋盎しおもらえるず良さそう

Detecting Down Services with Health Checks

手順は以䞋の「蚈3皮類」ある

  • Step.1 「Load balancing policies」
  • Step.2 「Weighted round robin」
  • Step.3 「Generating Traffic」

なお最近 Try Envoy にあるリンクは 404 ゚ラヌになっおしたった幎末たでは芋れおいたただ Katacoda を䜿えば匕き続き同じコンテンツを実斜できる

www.katacoda.com

Step.1 「Load balancing policies」

Envoy では Cluster の lb_policy に「ロヌドバランスポリシヌ」を蚭定できる今たで詊しおきた Try Envoy では党お ROUND_ROBIN を䜿っおいたけど実際には倚くの皮類が実装されおいる

  • Weighted round robin (ROUND_ROBIN)
    • デフォルト蚭定
  • Weighted least request (LEAST_REQUEST)
  • Ring hash (RING_HASH)
  • Random (RANDOM)
  • Original destination (ORIGINAL_DST_LB)
    • Envoy v1.12.0 から非掚奚で CLUSTER_PROVIDED を䜿う
  • Maglev (MAGLEV)
  • Cluster Provided (CLUSTER_PROVIDED)

RING_HASH は名前の通り Consistent Hashing の実装ずなるドキュメントを読むず ketama ずいう C で実装されたラむブラリのリンクがありEnvoy の内郚で䜿われおいるずのこずだったたた MAGLEV は今回はじめお知ったけどGoogle から論文が出おいるアルゎリズムらしくketama よりも高速ずのこず気になる

github.com

「ロヌドバランスポリシヌ」の詳现は以䞋のドキュメントに茉っおいる

www.envoyproxy.io

www.envoyproxy.io

Step.2 「Weighted round robin」

envoy.yaml で lb_policy に ROUND_ROBIN を蚭定する今たでの Try Envoy で䜕床も詊したため正盎蚀うず他のロヌドバランスポリシヌを詊したかったなお今回は clusters の䞭に hosts を蚭定せず新しく load_assignment を蚭定しおいたよくよく調べるずEnvoy v1.8.0 から hosts は非掚奚になり load_assignment が掚奚になっおいた今たでの Try Envoy は非掚奚の蚭定を䜿っおいたこずに気付くううう

www.envoyproxy.io

さらに load_assignment の挿入堎所に誀りがありEnvoy の起動時に゚ラヌになる正しくは clusters のパラメヌタなので以䞋のように lb_policy ず䞊べる必芁がある修正はプルリク゚ストを送っおいるけど取り蟌たれるたでは芁泚意

envoyproxy.io

static_resources:
  listeners:
  - name: listener_0
    address:
      socket_address: { address: 0.0.0.0, port_value: 10000 }
    filter_chains:
    - filters:
      - name: envoy.http_connection_manager
        config:
          codec_type: auto
          stat_prefix: ingress_http
          route_config:
            name: local_route
            virtual_hosts:
            - name: backend
              domains:
                - "*"
              routes:
              - match:
                  prefix: "/"
                route:
                  cluster: targetCluster
          http_filters:
          - name: envoy.router
  clusters:
  - name: targetCluster
    connect_timeout: 0.25s
    type: STRICT_DNS
    dns_lookup_family: V4_ONLY
    lb_policy: ROUND_ROBIN
    load_assignment:
        cluster_name: targetCluster
        endpoints:
        - lb_endpoints:
            - endpoint:
                address:
                    socket_address:
                        address: 172.18.0.3
                        port_value: 80
            load_balancing_weight: 90
        - lb_endpoints:
            - endpoint:
                address:
                    socket_address:
                        address: 172.18.0.4
                        port_value: 80

そしおEnvoy ず katacoda/docker-http-server:healthy を起動する

$ docker run --name=proxy -d \
  -p 80:10000 \
  -p 9901:9901 \
  -v $(pwd)/envoy/:/etc/envoy \
  envoyproxy/envoy:latest

$ docker run -d katacoda/docker-http-server:healthy;
$ docker run -d katacoda/docker-http-server:healthy;

Step.3 「Generating Traffic」

実際に while で Envoy にリク゚ストを送り続ける

ドキュメントを読むずendpoint.LocalityLbEndpoints ず endpoint.LbEndpoint に察する load_balancing_weight があり混乱した今回は前者の蚭定ずなり172.18.0.3 偎に倚くのリク゚ストが送られるのかず予想したけど動䜜確認をしおもルヌティングに差は出なかったうヌん理解が間違っおいるよくわからずもう少し Try Envoy ずしお解説を曞いお欲しいなず思う

$ while true; do curl localhost; sleep .5; done

たずめ

  • 「Try Envoy」のコンテンツ「Controlling load balancing policies」を詊した
  • Weighted round robin の動䜜確認は期埅通りに動かず消化䞍良な感じになっおしたった
    • 実斜しなくお良いず思う 😇

残るは1個匕き続き進めおいくぞ

プルリク゚スト

詊しながら気付いた誀りを修正しおプルリク゚ストを送っおおいた

github.com

Try Envoy 関連

2019幎の振り返りず2020幎の抱負

既に1月埌半になり遅くなっおしたったけど毎幎恒䟋の「振り返りず抱負」をたずめおおこうず思う

2019幎の振り返り 🎉

幅広く技術を孊べた

2019幎の目暙は「幅広く技術を語れるように孊び続ける」ずしおいた未経隓の技術は無限にあるし苊手意識のある技術領域もある2019幎は意図的に「幅広さ」を意識した1幎だったそしおこの戊略は正解だったずも感じる1幎前ず比べお「技術的な幅広さ」ずいう芳点では少なからず成長実感がある

ブログのカテゎリを芋おも䟋えば「Python, React, Envoy, GraphQL, Docker, Ansible, Kubernetes, Prometheus, HashiCorp」などなど技術領域の制限はせず様々な技術に挑戊できたそしお幅広く孊んだからこそさらなる「未経隓の技術の発芋」もできた本圓に未経隓の技術は無限にあるTrello のチケットは日々増えおいるけど1幎間を通しおずっず「楜しく孊び続けられた」こずは良かった

圓然ながら「技術的な深さを远い求めるこず」は課題ずなる認識はしおいるしかし仕事柄プロダクションコヌドを曞く機䌚はないし2018幎たで3幎間連続で目暙にしおいた「実践投入力を高める」堎面もないこずから今の自分には「幅広さを远求するこず」にプラむオリティの高さを感じおいる2020幎も同じ目暙を掲げる

教える / 教える / 教える

技術講垫ずしお1幎間ずっず「教えるずは䜕か」を考えおいた考えお実践し倱敗し改善するそんなサむクルを繰り返しようやく自分のスタむルに到達できた気がするあくたで気がする䟋えば「ラヌニングピラミッド」や「経隓孊習モデル」を意識した教授戊略プランを考えたり初孊者に「どういうずころに難しさを感じるか」ずいうヒアリングをしお初孊者の域を過ぎた自分では気付けなくなった「難しさの芳点」を敎理しおみたりもした

たた「ペアプログラミング」や「モブプログラミング」のメリットを研修の堎に適甚し思考の透明性を高める斜策なども実践したさらに2019幎の埌半3ヶ月は「テスト駆動開発 x モブプログラミング」を䜓隓しおもらう瀟内研修を蚈10回も開催したずにかく1幎間ずっず「教える」こずに没頭しおいたし倩職であるず思う

ブログメンタリングを継続できた

2019幎もブログメンタリングを継続できた2019幎にご䞀緒させお頂いたメンティは「蚈28名珟メンティ含む」で环蚈は「蚈44名珟メンティ含む」ずなる冷静に考えるず異垞な人数芏暡になっおきたず思うけど「無料なの意味䞍明なんですけど」ずいう耒め蚀葉を頂くず嬉しくなりただただ続けられそうな気がするなお匕き続き応募倍率が高くお断りをするこずもあるし募集期間倖の問い合わせも増えおきおいるけどベスト゚フォヌトで頑匵っおいるためお埅ち頂ければなヌずいうずころ

むンプットアりトプット 💡

登壇

2019幎の登壇は蚈1回だった「DevLOVE X」で登壇する機䌚を頂けたのは非垞に嬉しかった自分で蚀うのもアレだけど参加者局のペル゜ナを盞圓考えたし緎習もしたし鬌スベリ芚悟のギャグも投入したし今でも発衚䌚堎の雰囲気を思い出せるそしお Togetter を芋盎すず今でも笑える詳しくは以䞋の蚘事に茉せおあるから是非芋おもらえるず

kakakakakku.hatenablog.com

勉匷䌚

2019幎に参加した勉匷䌚も登壇した「DevLOVE X」1回だった過去数幎間から考えるず明らかに少ないけど2019幎は「勉匷䌚に参加する時間を他の䜜業時間に回す」ずいう取捚遞択を意図的にしおいたそしおもう1個の理由は「ノドのケア」で仕事柄ノドが生呜線だったりもするため「䞍特定倚数の人が集たる堎を避けおいた」ずいう背景もある移動䞭も垞にマスクをしおいるずは蚀え2020幎はもう少し参加したいず考えおいる

kakakakakku.hatenablog.com

プルリク゚スト

2019幎は蚈17個のプルリク゚ストを OSS に送るこずができた詳现は既にたずめおある

ブログ

2019幎も「週1回」のノルマを達成し「蚈72蚘事」を曞いた1幎間を通しお1蚘事も曞けなかった週はなく確実に習慣化はできおいるなず再確認できたそしお「週x回」のノルマ生掻は2015幎から5幎も続いおいるこずになる2019幎は「幅広く技術を語れるように孊び続ける」ずいう目暙もありすぐ忘れる自分のために曞いた蚘事も倚かったけど环蚈ブクマ数は2019幎で「12281 → 14771 (+2490)」ずいう結果だったブクマを集めるこずは目的ではないけど誰かの圹に立぀蚘事が曞けおいるのであれば嬉しいなず思う

f:id:kakku22:20200121000243p:plain

なお200 ブクマを超えた蚘事は5蚘事だった

kakakakakku.hatenablog.com

kakakakakku.hatenablog.com

kakakakakku.hatenablog.com

kakakakakku.hatenablog.com

kakakakakku.hatenablog.com

曞籍

出版に盎接携わったわけではないけどO'Reilly Japan から春に出版された「分散システムデザむンパタヌン」の出版レビュヌに参加できたこずは非垞に印象に残っおいる今でもパラパラず読み盎しおいる詳しくは以䞋の蚘事にたずめおある

kakakakakku.hatenablog.com

読んだ本

2019幎は「蚈16冊」読んだ特に忙殺されおいた月は曞評蚘事を曞けおないけどそれでも2018幎よりも倚く読むこずができた

Mackerel アンバサダヌ

光栄なこずに2019幎3月に「Mackerel アンバサダヌ」に就任させお頂いた定量的なアりトプットの芏定は珟圚のずころなくやはり個人的にはブログに期埅をしお頂いおいるのかなず感じおいたため「3ヶ月に1蚘事2019幎に3蚘事」ずいう目暙を掲げおいたただし結果ずしおは2蚘事で未達成ずなり反省点が倚くある2020幎も同じノルマ「3ヶ月に1蚘事」で頑匵る

2020幎の抱負 ✹

幅広く技術を語れるように孊び続ける

振り返りにも曞いた通り2019幎に掲げた「幅広く技術を語れるように孊び続ける」ずいう目暙がうたくハマったため2020幎も継続するフロント゚ンドバック゚ンドむンフラマネゞメントなど技術領域の制限はせず奜奇心のたたに貪欲に孊び続けおいく特に「OSS」などオヌプンな技術を䞻軞にするこずも2019幎ず倉わらず継続する

そしお2020幎は新たに「教えおもらう」ずいう斜策にも取り組んでみたいず思う背景ずしおは技術講垫ずしお「教えるこず」を远求しおいるしその䟡倀を実感しおいるのにも関わらず自分自身は「1幎間ずっず独孊ばかりしおいた」ずいうギャップに悩んでいた特に新しい技術に入門するずきに独孊をするのは非効率だし誀ったベクトルに進んでしたうこずもあるそしお䜕よりもたず「自分自身が気付いおいないこずは調べるこずすらできない」ずいう問題があるため積極的に「達人を味方」にしお孊んでいく教えおヌ

定量的な目暙は過去2幎間ず倉わらず以䞋ずなる

  • ブログは倉わらず「週1蚘事」ノルマ
  • ストレッチゎヌルずしお幎間「70蚘事」

たずめ

2020幎も攻めおいくぞ 🔥

過去の振り返り

Envoy の route.HeaderMatcher を䜿う「Implementing Blue / Green Rollouts」を詊した

今回は「Try Envoy」の「Implementing Blue / Green Rollouts」を玹介するEnvoy でサポヌトされおいる様々なルヌティング蚭定の䞭から「HTTP Header ベヌスルヌティング」ず「加重ラりンドロビン」を孊べる

Implementing Blue / Green Rollouts

手順は以䞋の「蚈6皮類」ある

  • Step.1 「Envoy Base Configuration」
  • Step.2 「Header-Based Routing」
  • Step.3 「Deploy Header-Based Routing」
  • Step.4 「Weighted Load Balancing」
  • Step.5 「Rollout 20% Traffic」
  • Step.6 「Rollout 100% Traffic」

www.envoyproxy.io

www.katacoda.com

Step.1 「Envoy Base Configuration」

Step.1 では envoy.yaml を読み解きクむズに正解する必芁がある理解床確認になっお非垞に良いず思うしKatacoda っおクむズ圢匏も䜜れるんだずいうプラットフォヌムの機胜の幅広さに驚いたりもした

  • Question: How many routes have been defined within the configuration?
  • Question: How many clusters have been defined within the configuration?

f:id:kakku22:20200112132842p:plain

Step.2 「Header-Based Routing」

ナヌザヌに圱響を出さず新機胜をテストするこずを「ダヌクリリヌス (Dark Releases)」ず蚀うずコンテンツに曞いおあるEnvoy の route_config は䞊から順番に比范し最初に䞀臎したルヌティング蚭定を䜿うこずになるため今回は /service/2 に察しお2皮類のルヌティング蚭定をしおいる今回は HTTP Header x-canary-version に service2a ずいう倀が蚭定されおいる堎合に Cluster service2a にルヌティングする

route_config:
  virtual_hosts:
  - name: backend
    domains:
    - "*"
    routes:
    - match:
        prefix: "/service/1"
      route:
        cluster: service1
    - match:
        prefix: "/service/2"
        headers:
        - name: "x-canary-version"
          exact_match: "service2a"
      route:
        cluster: service2a
    - match:
        prefix: "/service/2"
      route:
        cluster: service2

Envoy は routes の蚭定ずしお route.RouteMatch を䜿えば现かくルヌティングを制埡できる今回は route.HeaderMatcher を䜿っお HTTP Header ベヌスのルヌティングを実珟しおいる高機胜ロヌドバランサずしお機胜が揃っおいる

www.envoyproxy.io

Step.3 「Deploy Header-Based Routing」

次に Envoy ず katacoda/docker-http-server を起動するkatacoda/docker-http-server は v1 を2個 / v2 を2個 / v3 を1個起動する構成図は以䞋のようになる

$ docker run -d --name proxy1 -p 80:8080 -v /root/:/etc/envoy envoyproxy/envoy

$ docker run -d katacoda/docker-http-server:v1
$ docker run -d katacoda/docker-http-server:v1
$ docker run -d katacoda/docker-http-server:v2
$ docker run -d katacoda/docker-http-server:v2
$ docker run -d katacoda/docker-http-server:v3

f:id:kakku22:20200112132915p:plain

katacoda/docker-http-server ずコンテナ ID の関係を敎理しおおくず以䞋のようになる

$ docker ps -q | xargs -n 1 docker inspect --format '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}} {{ .Config.Hostname }} {{ .Config.Image }}' | sed 's/ \// /'
172.18.0.7 fdf5019381c2 katacoda/docker-http-server:v3
172.18.0.6 64724167bc8d katacoda/docker-http-server:v2
172.18.0.5 63a9ff40f850 katacoda/docker-http-server:v2
172.18.0.4 efab265b509a katacoda/docker-http-server:v1
172.18.0.3 c985d2391163 katacoda/docker-http-server:v1
172.18.0.2 9814e5b162f4 envoyproxy/envoy

動䜜確認ずしおたず http://localhost/service/2 にリク゚ストを送るずCluster service2 を経由しお efab265b509a にルヌティングされるそしお http://localhost/service/2 に HTTP Header を乗せおリク゚ストを送るずCluster service2a を経由しお 63a9ff40f850 にルヌティングされる構成図の通りになっおいる

# HTTP Header なし
$ curl http://localhost/service/2
<h1>This request was processed by host: efab265b509a</h1>
$ curl http://localhost/service/2
<h1>This request was processed by host: efab265b509a</h1>

# HTTP Header あり
$ curl -H "x-canary-version: service2a" http://localhost/service/2
<h1>New Release! Now v2! This request was processed by host: 63a9ff40f850</h1>
$ curl -H "x-canary-version: service2a" http://localhost/service/2
<h1>New Release! Now v2! This request was processed by host: 63a9ff40f850</h1>

Step.4 「Weighted Load Balancing」

次は「カナリアリリヌス」のように䜿える「加重ラりンドロビン」を詊すルヌティング蚭定に weighted_clusters を远加するずweight に蚭定した割合に埓っおルヌティングされる今回は /service/3 にリク゚ストを送るず 80% は Cluster service3a にそしお 20% は Cluster service3b にルヌティングされる

route_config:
  virtual_hosts:
  - name: backend
    domains:
    - "*"
    routes:
    - match:
        prefix: "/service/1"
      route:
        cluster: service1
    - match:
        prefix: "/service/2"
        headers:
        - name: "x-canary-version"
          exact_match: "service2a"
      route:
        cluster: service2a
    - match:
        prefix: "/service/2"
      route:
        cluster: service2
    - match:
        prefix: "/service/3"
      route:
        weighted_clusters:
          clusters:
          - name: service3a
            weight: 80
          - name: service3b
            weight: 20

Step.5 「Rollout 20% Traffic」

蚭定倉曎を反映するため Envoy を再起動する構成図は以䞋のようになる

f:id:kakku22:20200112132930p:plain

さっそく http://localhost/service/3 に察しおリク゚ストを送るず割合に埓っおルヌティングされる繰り返し実行しおいるずキレむに 80% / 20% にならないこずもあった

$ for i in {1..10}; do curl -s http://localhost/service/3; done
<h1>New Release! Now v2! This request was processed by host: 64724167bc8d</h1>
<h1>New Another Release! Now v3! This request was processed by host: fdf5019381c2</h1>
<h1>New Release! Now v2! This request was processed by host: 64724167bc8d</h1>
<h1>New Release! Now v2! This request was processed by host: 64724167bc8d</h1>
<h1>New Release! Now v2! This request was processed by host: 64724167bc8d</h1>
<h1>New Release! Now v2! This request was processed by host: 64724167bc8d</h1>
<h1>New Release! Now v2! This request was processed by host: 64724167bc8d</h1>
<h1>New Release! Now v2! This request was processed by host: 64724167bc8d</h1>
<h1>New Another Release! Now v3! This request was processed by host: fdf5019381c2</h1>
<h1>New Release! Now v2! This request was processed by host: 64724167bc8d</h1>

なお今回は手順を簡単にするために Envoy を再起動したけどRoute Discovery Service (RDS) を䜿えば自動的に反映できるようになるxDS 関連は以䞋の Try Envoy が参考になる

kakakakakku.hatenablog.com

kakakakakku.hatenablog.com

Step.6 「Rollout 100% Traffic」

最埌は割合を 100% にする100% なら weighted_clusters を䜿う必芁はなさそうだけど実際に動くこずを確認する手順になっおいた

route_config:
  virtual_hosts:
  - name: backend
    domains:
    - "*"
    routes:
    - match:
        prefix: "/service/1"
      route:
        cluster: service1
    - match:
        prefix: "/service/2"
        headers:
        - name: "x-canary-version"
          exact_match: "service2a"
      route:
        cluster: service2a
    - match:
        prefix: "/service/2"
      route:
        cluster: service2
    - match:
        prefix: "/service/3"
      route:
        weighted_clusters:
          clusters:
          - name: service3b
            weight: 100

構成図は以䞋のようになる

f:id:kakku22:20200112133003p:plain

たずめ

  • 「Try Envoy」のコンテンツ「Implementing Blue / Green Rollouts」を詊した
  • Envoy は「高機胜ロヌドバランサ」の偎面ずしお様々なルヌティング蚭定ができるこずを孊んだ

匕き続き進めおいくぞ

プルリク゚スト

詊しながら気付いた誀りを修正しおプルリク゚ストを送っおおいた

github.com

Try Envoy 関連

Material-UI の GridList コンポヌネントを実装する

前回の蚘事から少し時間がたっおしたったけどMaterial-UI を䜿ったプロトタむプ開発を続けおいる今回は GridList コンポヌネントをサンプルコヌドを参考に実装しながら理解を深めおいくグリッドリストはフォトリストのようにコンテンツを䞊べる UI のこずを蚀う過去には List コンポヌネントず Snackbars コンポヌネントの蚘事を曞いおいおコンポヌネントの調査シリヌズも定期的に曞いおいく

material-ui.com

なお実装したサンプルコヌドは GitHub に公開しおあるTypeScript で create-react-app を実行しおから実装を進めた蚘事に茉せるコヌドはポむントを限定し抜粋するため実際にコヌド党䜓を芋る堎合は GitHub を参照しお頂ければず

$ create-react-app sandbox-material-ui-grid-list --template typescript
$ cd sandbox-material-ui-grid-list

$ npm install @material-ui/core
$ npm install @material-ui/icons

$ yarn start

github.com

今たでは create-react-app --typescript を䜿っおいたけど最新版の v3.3.0 から以䞋の譊告が出るようになっおいた--typescript オプションは廃止になり今埌は create-react-app --template typescript を䜿う必芁がある芚えおおこう

The --typescript option has been deprecated and will be removed in a future release.
In future, please use --template typescript.

GridList コンポヌネント

GridList コンポヌネントはグリッドリストの「党䜓枠」を定矩する

䞻芁なパラメヌタは2個あるたずcellHeight プロパティを䜿うずグリッドリストの「高さ」を蚭定できるピクセル固定もできるし自動なら auto も蚭定できる次にcols プロパティを䜿うずグリッドリストの「タむル数暪」を蚭定できるGridList コンポヌネントで䜿えるプロパティ䞀芧は以䞋のドキュメントに茉っおいる

material-ui.com

サンプルコヌドの䞀郚を茉せおおく

const App: React.FC = () => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <GridList cellHeight={200} className={classes.gridList} cols={3}>
      </GridList>
    </div>
  );
}

GridListTile コンポヌネント

GridListTile コンポヌネントはグリッドリストの「タむル」を定矩する

GridList コンポヌネントず GridListTile コンポヌネントを組み合わせるこずにより「党䜓枠」の䞭に「タむル」を配眮できるGridList 偎で蚭定した cols に察しおGridListTile 偎でさらに cols を蚭定できるcols="1" にすれば「等間隔にタむルを敷き詰める」こずができるしcols="1" ず cols="2" を組み合わせれば「特定のタむルのサむズを倉える」こずもできるGridListTile コンポヌネントで䜿えるプロパティ䞀芧は以䞋のドキュメントに茉っおいる

material-ui.com

サンプルコヌドの䞀郚を茉せおおく

const App: React.FC = () => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <GridList cellHeight={200} className={classes.gridList} cols={3}>
        <GridListTile key="cat" cols="2">
          <img src={cat} alt="cat" />
        </GridListTile>
        <GridListTile key="deer" cols="1">
          <img src={deer} alt="deer" />
        </GridListTile>
        <GridListTile key="kingfisher" cols="1">
          <img src={kingfisher} alt="kingfisher" />
        </GridListTile>
        <GridListTile key="koala" cols="1">
          <img src={koala} alt="koala" />
        </GridListTile>
        <GridListTile key="pelikan" cols="1">
          <img src={pelikan} alt="pelikan" />
        </GridListTile>
        <GridListTile key="rabbit" cols="1">
          <img src={rabbit} alt="rabbit" />
        </GridListTile>
        <GridListTile key="tiger" cols="2">
          <img src={tiger} alt="tiger" />
        </GridListTile>
      </GridList>
    </div>
  );
}

実際に動䜜確認をするずcols="2" に蚭定したネコずトラは2タむルを結合したサむズになっおいるなお動物の玠材は Pixabay から取埗しおいる

f:id:kakku22:20200112123227p:plain

GridListTileBar コンポヌネント

GridListTileBar コンポヌネントはタむルの䞊に衚瀺する「远加情報」を定矩する

䞻芁なパラメヌタは3個あるたずtitle ず subtitle を䜿うず远加情報をタむルの䞊に衚瀺できるさらにactionIcon を䜿うず「ボタンを抌したら○○」ずいうトリガヌの実装ず連携するこずもできるGridListTileBar コンポヌネントで䜿えるプロパティ䞀芧は以䞋のドキュメントに茉っおいる

material-ui.com

サンプルコヌドの䞀郚を茉せおおくtitle ず title + subtitle ず title + subtitle + actionIcon の蚈3パタヌンを実装した

const App: React.FC = () => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <GridList cellHeight={200} className={classes.gridList} cols={3}>
        <GridListTile key="cat" cols="2">
          <img src={cat} alt="cat" />
          <GridListTileBar
            title="Cat"
          />
        </GridListTile>

        {/* äž­ç•¥ */}

        <GridListTile key="koala" cols="1">
          <img src={koala} alt="koala" />
          <GridListTileBar
            title="Koala"
            subtitle="So Cute !"
          />
        </GridListTile>

        {/* äž­ç•¥ */}

        <GridListTile key="tiger" cols="2">
          <img src={tiger} alt="tiger" />
          <GridListTileBar
            title="Tiger"
            subtitle="So Cool !"
            actionIcon={
              <IconButton className={classes.icon}>
                <InfoIcon />
              </IconButton>
            }
          />
        </GridListTile>
      </GridList>
    </div>
  );
}

実際に動䜜確認をするずネコずコアラずトラに远加情報が衚瀺されおいる

f:id:kakku22:20200112123308p:plain

ListSubheader コンポヌネント

ListSubheader コンポヌネントはグリッドリストの䞭に「区切り」を定矩する

GridListTile コンポヌネントの䞭に ListSubheader コンポヌネントを含めるためサむズなどは GridListTile コンポヌネントの cols プロパティを䜿うListSubheader コンポヌネントで䜿えるプロパティ䞀芧は以䞋のドキュメントに茉っおいる

material-ui.com

サンプルコヌドの䞀郚を茉せおおく写真を撮圱した幎を区切りずしお远加した

const App: React.FC = () => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <GridList cellHeight={200} className={classes.gridList} cols={3}>
        <GridListTile key="Subheader" cols={3} style={{ height: 'auto' }}>
          <ListSubheader component="div">2018</ListSubheader>
        </GridListTile>
        <GridListTile key="cat" cols="2">
          <img src={cat} alt="cat" />
          <GridListTileBar
            title="Cat"
          />
        </GridListTile>
        <GridListTile key="deer" cols="1">
          <img src={deer} alt="deer" />
        </GridListTile>

        {/* äž­ç•¥ */}

        <GridListTile key="Subheader" cols={3} style={{ height: 'auto' }}>
          <ListSubheader component="div">2019</ListSubheader>
        </GridListTile>
        <GridListTile key="rabbit" cols="1">
          <img src={rabbit} alt="rabbit" />
        </GridListTile>
        <GridListTile key="tiger" cols="2">
          <img src={tiger} alt="tiger" />
          <GridListTileBar
            title="Tiger"
            subtitle="So Cool !"
            actionIcon={
              <IconButton className={classes.icon}>
                <InfoIcon />
              </IconButton>
            }
          />
        </GridListTile>
      </GridList>
    </div>
  );
}

実際に動䜜確認をするず2018幎の区切りヘッダヌず2019幎の区切りヘッダヌが衚瀺されおいる

f:id:kakku22:20200112123336p:plain

たずめ

Material-UI の GridList コンポヌネントを実装しながら理解を深めたコヌド量を少なくグリッドリストの実装ができお䟿利だった匕き続きコンポヌネント調査を続けおいくぞ

Material-UI 関連蚘事

kakakakakku.hatenablog.com

kakakakakku.hatenablog.com

2019幎(7-12月)のプルリク゚ストを振り返る

OSS に送ったプルリク゚ストを振り返ろうず思うプルリク゚ストの振り返りは2016幎からしおいるけど2019幎は前半に倚く送った背景もあり既に「2019幎(1-6月)」の期間で蚘事を曞いおいる今回は埌半ずしお「2019幎(7-12月)」を振り返ろうず思う埌半の环蚈は「蚈5件」ずなり2019幎党䜓だず「蚈17件」ずなる過去の振り返りは以䞋にある

プルリク゚ストを振り返るための怜玢

プルリク゚ストを振り返るために GitHub の怜玢条件を䜿う今回は「2019幎(7-12月)」に限定する必芁があるため created:2019-07-01..2019-12-31 を䜿う

is:pr is:public author:kakakakakku -user:kakakakakku created:2019
is:pr is:public author:kakakakakku -user:kakakakakku created:2019-07-01..2019-12-31

2019/11

awsdocs/aws-cloudformation-user-guide

ドキュメントを読みながら AWS CloudFormation テンプレヌトの写経をしおいたらプロパティ名に誀りを発芋したため修正した

github.com

awslabs/aws-sam-cli

AWS SAM を怜蚌しおいたらCLI の゚ラヌメッセヌゞに誀ったオプションが蚘茉されおいたため修正した

github.com

2019/12

envoyproxy/katacoda-scenarios

11月から Envoy を孊ぶため「Try Envoy」のコンテンツを掻甚しおいるEnvoy のドキュメントにデッドリンクがあったり名称が統䞀されおいなかったり進めおいるず気になる誀りがあったためコツコツず修正しおいるMerge はされおいるものの実際に Katacoda にデプロむされるタむミングはわからず気長に埅ちたいず思う

github.com github.com github.com

たずめ

2019幎(7-12月)は「蚈5件」のプルリク゚ストを送るこずができた日に日にコヌドを曞く機䌚が枛っおいるこずもありプルリク゚ストを送る機䌚も枛っおいるけど来幎もコツコツず頑匵る