カヤックのSREチームについて

SREチームの長田です。 今回は私が所属している「カヤックのSREチーム」について紹介します。

SREとは

Site Reliability Engineering の略です。 「サイト信頼性エンジニアリング」と訳されることが多いようです。 同名の書籍(いわゆるSRE本)が出版されたことから、SREという言葉が一般的に使われるようになったようです。

www.oreilly.co.jp

この記事ではSREそのものについての説明は省きます。 ざっくり一言で説明すると、「サイト(サービス)の信頼性を技術の力で担保すること」のようになるでしょうか。 SREの何たるかのより詳しい説明については上記のSRE本や、提唱元であるGoogleのサイト(英語)を参照してください。

sre.google

カヤックのSREチーム

カヤックのSREチームは2018年に発足しました。 当初は3名体制でしたが、メンバーの入れ替わりもありつつ徐々に人数を増やし、現在は6名が在籍しています。

メンバーごとに一つ以上のプロジェクトを担当しています。 各プロジェクトの課題やその解決策をSREチーム内で共有し、プロジェクトをまたがった知見の共有を行っています。

SREチームと各プロジェクトの関係

目標はSREチームの仕事をなくすこと

カヤックのSREチームの目的は サービスの可用性にフォーカスした改善・運用を行う ことです。 SREの責務である信頼性の担保の中でも、特に可用性を重視しています。

その上で 可用性を担保したままアプリケーション開発者でも運用できるようになる ことを最終目標としています。 つまり、対象のプロジェクトについて、SREチームメンバーが直接手を動かさなければならない仕事をなくすということです。

プロジェクトの現状から可用性に関係する要求を見つけ出し、具体的なタスクとして定義し改善を行っています。 そのような可用性担保のための活動を、アプリケーション開発メンバーだけで継続できる状態をつくるための仕組み化・ガイドライン化を進めています。

SREチームの目標達成サイクル

プロジェクトごとにSREが常駐して運用していくという方法もありますが、 現状ではSREチームメンバー数よりもプロジェクト数のほうが多いため、専属メンバーを配置するのは難しい状況となっています。 仮に十分な人数が確保できたとしても、SREチームメンバーでなければ対応できない仕事を減らすことは、 プロジェクト運用を安定させ、属人化を防ぐという意味で効果的である、という考えのもとこのような目標を掲げています。

カヤックのプロジェクトに合わせた活動

カヤックにはゲームからまちづくり、クライアントワークまで、幅広いプロジェクトがあります。 それぞれのプロジェクトに必要な信頼性担保の手法は、その特徴によって異なってきます。

また、各プロジェクト、特に自社サービスの技術要素の選択については、そのプロジェクトのリードエンジニアに委ねられています。 利用するプラットフォームやメインとして使用するプログラミング言語など、大枠についてはおおよそ固まっていますが、 それよりも詳細な部分については統一のルールはありません。

このような事情があるため、SREチームでは1から10までをサポートするフルスタックなものではなく、 必要とするものだけを部分的に選択できるツール・フレームワークを開発・導入すること目指しています。

具体的には以下のような活動を行っています。

  • オペレーションを簡略化するためのデプロイツール整備
  • 障害復旧速度を上げるための監視・開発サポート
  • 陳腐化防止のための使用技術のアップグレードや移行
  • プロジェクトによらない一般的な運用ノウハウの定型化

より詳細な説明については、今後の本ブログでの記事公開をお待ち下さい。

おわり

今年は「SREチームによる運用コスト削減」をテーマに、毎月1本程度の公開を予定しています。

システムの最適化・自動化により、金銭的な意味でのコストダウンはもちろん、 開発コストやオペレーションコストの削減についても紹介していく予定です。

カヤックはSREチームメンバーを募集しています!

新卒デザイナーが初めてJSでゲームを作ってみた話



シャン シャン シャン シャン .......
シャン シャン シャン シャン .......

Happy merry Christmas ★



f:id:bell_suzukina:20211224202114p:plain
ご機嫌よう!


この記事は Tech KAYAC Advent Calendar 2021 25日目の記事です!

とうとう最終日になりました。



はじめまして、カヤックのクライアントワーク事業部デザイナーの

ベル、こと鈴木菜々子です!

21年入社の新卒です。

鈴木の鈴、からベルって呼ばれてます!単純!

りんりん



ところで、カヤック意匠部では、毎日の勉強会が開催されているんですね。

そこでは、デザイナーもエンジニアもできるスーパー先輩が、

3Dモデリングの方法や、サイト制作に関するあれこれなどを伝授してくださいます。

なんて素晴らしい会なんでしょう。

その会で、今年10月から行われていたのが....



そう!JavaScript!!



その講座で三ヶ月で学んだ知識を使って、

JavaScriptでゲームつくるよー!



これを読んでいる技術部の方々は、そんな当たり前のことを......!

と思うかもしれません!!!!!


はい!


当たり前って素晴らしい!!

技術部の方にとっては、この記事で役に立つことは何一つ出てこないですが、

自分もこんな頃があったなあ......懐かしいなあ.......という懐古タイム、ぜひ。

技術部以外の方にとっては、自分もやってみようかな.....という勇気をお届け!ぜひ。


ざっくりとした構造の紹介。



まずは、実際にコードを書いてみる前に、HTML,CSS,JSに対する私のイメージを書きます。

コードとか書いたことないよーという方に、雰囲気だけでもお伝えできれば!


HTML : WEBの要素を司る神。

CSS : WEBの見た目を司る神。

JS : WEBの動きを司る神。


ついでに私が3秒で描いたイラストも貼っておきましょう。

f:id:bell_suzukina:20211225010547p:plain:w400
3人の神様


両サイドのメガネ神二人が全く神さまっぽくないのは......気にしないでおきましょう。

右側のJS神が中指立ててるようにみえるのも......気にしないでおきましょう。

そんなはずはありません。



今回は、JavaScriptでゲーム作るぞー!といいつつ、この三人の神様に活躍していただいています。

この三人がいれば、いろんなものが作れるという訳です。



早速コードを書いてみよう!



では、まずは真っ白のキャンパスを用意!



f:id:bell_suzukina:20211224015043p:plain:w200
真っ白なキャンバスをブラウザ上に作りましょう!

コードはこちら。

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
        <title>SANTA</title>
        <link rel="shortcut icon" href="favicon.png">
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <script src="index.js"></script>
    </body>
</html>


こちらがHTMLの基本構造だそうです。

headタグにはサイト自身のタイトルや、cssのリンクなど、

bodyタグには、サイトの中身やjsのリンクが入っています。

bodyタグに画像や文章を追加していくことで、サイトが作られていくんですね。


よーーし、お次はこの画面に、サンタを登場させましょう!

シャン シャン シャン シャン .......
シャン シャン シャン シャン .......

シャンっ!

f:id:bell_suzukina:20211224020636p:plain:w200
わお!サンタが登場

こちらのコード↓を

<img clas="santa" src="image/santa_r.svg">

htmlのbodyタグに追加して、フォルダに画像を追加するだけでなんと!

サンタを登場させることができるんですね〜。

おやおや。



そして、ボタンも召喚っ!!!

f:id:bell_suzukina:20211224144753p:plain:w200
ボタン取り付け完了


サンタと同じ要領でボタンを表示させました!

そのままだと位置やサイズが思った通りにならないので、CSSで調節もしてます。

それでは本題。


それぞれのボタンを押すと、サンタがそれに合わせて切り替わる、というのをJavaScriptで書いていきたいと思います。

..................。

.....待てよ。


先ほどHTMLのimgタグでサンタを表示してしまったけれど、JavaScriptで切り替えたいということは......

CSSのbackgroundで画像を表示して、HTMLのクラス名を切り替える方がシンプル!だ!!(思考する力)

HTMLで、先ほど書いた

<img class="santa" src="image/santa_r.svg">

<div class="santa r"></div>

に変更。

この " r " 部分を、押されたボタンによって変更することで、サンタの画像を切り替える仕組みになっているんですね〜。

さあ、やっとJavaScriptのコードを書いていきます。

JSでこのように書きますよ。↓

const handleButtonRClick = function() {
    santa.classList.remove("r", "m", "b", "h");   // "santa"から全部のクラス名を取り除きます
    santa.classList.add("r");                    // "santa"に"r"のクラス名を追加します
};
buttonR.onclick = handleButtonRClick;      // レギュラーのボタンを押したら、上記の処理をします


こちらを、" r "の部分を変えてボタンの数だけ量産すれば、ほら!!

「レギュラー」ボタンで普通のサンタ

「中」ボタンで中笑いのサンタ

「大」ボタンで大笑いのサンタ

に切り替えることに成功しました!!!


f:id:bell_suzukina:20211224154210g:plain
サンタを操ることにまんまと成功。


画面右側のコードを見ていただくと、しっかりクラス名が切り替わっていることがわかると思います。


まるで、マリオネットのように不気味な笑いを浮かべるサンタ。

楽しいですね。



...............。

さてさて、みなさま。

まだ気になるボタンが一つ残されていることにお気づきですか......?

そう、

f:id:bell_suzukina:20211224165256p:plain:w200
.......

これ。

f:id:bell_suzukina:20211224164916p:plain
!!!!!!!!!



これを押したらサンタはどうなっちゃうのかなあ。

にやり

やってみましょう。











f:id:bell_suzukina:20211224171201g:plain:w400
..............!








!!!!!

わあ〜〜〜〜〜〜〜!!!!

なんとサンタさんがお腹を出してしまいましたよ!!!!

激レア!!!!!!!!!!!!

ちなみに、

これ、なんと読むかわかりますか?

はい。へそです。

最初からボタンに答えが書いてあったんですね。




f:id:bell_suzukina:20211224172055p:plain:w400
サンタの臍。




激レアなサンタの臍までみれてしまう、JavaScript。

これはかなり楽しいです。

ありがとう、JS!!!




という訳で、ほんとうの本題。


さてさて、JavaScriptのだいたいの雰囲気がわかったところで、

ちゃんとしたゲームを作っていきましょう。

もちろん、サンタさんの登場するゲームです。

なぜなら、

Happy merry Christmas ★

だからね。

ここからは、細かいコードの説明は割愛して、どーんなゲームを作ったか紹介していきます。

ゲームの題名は〜〜!

「MAKE SANTA」!!!!

f:id:bell_suzukina:20211224175830p:plain
たくさんのサンタだ!


その名のとおり、サンタをつくるゲームです。

ストーリーはこちら。

f:id:bell_suzukina:20211224180526p:plain
ストーリー



かわいい細サンタがフィールドを縦横無尽に移動したり、

服を着込みながら成長したりするゲームです。

f:id:bell_suzukina:20211224182339g:plain
ゲーム画面



成長しすぎると、レアなサンタの姿も見ることができるかも???

f:id:bell_suzukina:20211224182829p:plain:w200
レアサンタ???


気になった方、「MAKE SANTA」は、このリンクから遊んでみることができます!

suzuki-nanako.github.io

※スマホ表示にしか対応してませんので、ご注意ください!

pcで見るときは、[ command + option + I ] でスマホ表示にしてからのリロードでお願いします!



全て手書きでちくちくと書いていったこちらのゲーム。

めちゃめちゃ大変だったー!!!!

エンジニアの方々、本当にすごい!!!!!!

いろいろと不都合な部分があるかもしれませんが、お手柔らかに.......。

いつのまにかレベルが増えたり、イラストがリッチになったり、音楽がついたり、タイトルまでもが変更になったり!?などの

アップデートが行われる可能性があります。ご注意ください。

全く別のゲームになっていても怒らないでください。


suzuki-nanako.github.io

↑こっそりアップデートされるかもしれない、今話題のゲームは、こちら!!!!!!




最後に!



ここまでとりとめもない文章を読んでくれたあなた、本当にありがとうございます!

技術部の方には、懐かしみの心を、

技術部以外の方には、JSの楽しさと「自分もやってみようかなの勇気」を

お届けすることができたでしょうか?


JSやHTMLのことが少しでもわかるようになると、世の中に溢れているWEBコンテンツへの理解が少しだけ深まります。

エンジニアの方々への尊敬の念が深まります。

なにより、使えるツールが増えたことで、創作の幅が広がる!

臍を見せてくれるサンタだってつくれちゃう訳ですから。


f:id:bell_suzukina:20211225013958p:plain
サンタの臍。


面白いウェブコンテンツやゲームのアイデアを胸の内に秘めている、そこのあなた!!!!

今日からJS、はじめてみませんか。




そして、カヤックでは、

デザインもJSもゲーム作りも、なんでもやってみたい!

チャレンジングなデザイナーを募集しています!

一緒に楽しく作りましょう。

www.kayac.com



それではみなさま、

Merry Christmas !!

Happy New Year !!!!