面白法人カヤック技術部の谷脇です。私は元気です。 この記事は面白法人グループ Advent Calendar 2023の5日目のエントリーです。 というわけでこの記事では、現環境(私が取り組んでいる業務のこと)ベストの管理画面の技術選択について考えたことを書き連ねていきます。 前提知識 管理画面の定義 ここで読者と私の目線を合わせるため、この記事上での管理画面の定義をしておきます。 管理画面はサービスの運営上必要な操作やデータの閲覧をまとめたWebアプリケーションです。また、このWebアプリケーションは一般ユーザーには開放されておらず、サービス運営者側のみ閲覧と操作が可能となっている、とします。 管理画面を作る動機 ここではTonamelの管理画面について、考えて導入したことを書きます。 tonamel.com Tonamelはゲーム大会やイベントを開催するためのプラットフォームです。We

SREチームの長田です。 みなさま開発・運用上の定形オペレーションに伴うタスク実行をどのように管理していますか？ 今回は make をタスクランナーとして使う例を紹介します。 タスクランナーがほしい タスクランナーを使う主なモチベーションは以下の2つです。 タスクをリスト化したい タスクの実行インターフェイスを統一したい タスクがリスト化されていれば、それ自体が生きたドキュメントとして機能します。 また、タスクの実行インターフェイスが統一されていれば、 例えばタスクに前処理や後処理を追加したとしても、 開発・運用メンバーが実行するべき操作が変わることはありません。 操作変更の周知コストも下がりますし、変更に伴う操作ミスも減らすことができます。 タスクランナーに求めるもの タスクランナーの機能としては必要最低限のものがよいと考えています。 高機能なタスクランナーも魅力的ではあるのですが、タス

鎌倉は寒いです。みなさんはいかがですか。ソーシャルゲーム事業部のゲーム技研チームの谷脇です。 この記事はTech KAYAC Advent Calendar 2019 Migration Trackの10日目の記事です。9日目はデーモン管理をdaemontoolsからsystemdに移行させるでした。 ゲーム内お知らせとは みなさんは、スマートフォンのゲームをされますか。ええ、そこのあなたはよくされる。しかし、そちらの方はあんまりされない。なるほどなるほど。 では分かる人にはおさらいとして、あまりピンとこない方にはそんなことがあるのか〜となってもらうために説明させていただきます。 我々カヤックでゲームを運営している人々が「お知らせ」を指した場合、ゲーム内のある機能を示しています。他のゲームではニュースなどとも呼ばれています。 カヤックで作っているゲーム「ぼくらの甲子園！ポケット」(以下ぼく

年末ですね。カヤックでは360度評価の時期でもあるので、みんな振り返りだとか内省などの言葉がいたるところで飛んでいます。この記事でも今年の出来事を振り返りしてみたいと思います。どうも、ソーシャルゲーム事業部ゲーム技研の谷脇です。 この記事はTech KAYAC Advent Calendar 2019 Migration Trackの20日目の記事です。19日目はAWS Lambda Node.js runtime の EoL に疲れたので Go にしていっている話でした。 この記事のあらまし あるWebサービスを作るプロジェクトでORMを切り替えた 開発言語はGo言語 DBライブラリ/ORMはgithub.com/xo/xoを使っていました ですが開発途中から、私が作成したライブラリであるgithub.com/mackee/go-sqllaに乗り換えました どっちもコード生成系だけれど、

こんにちは、各位忘年してますか。弊社では新年会は1年に1回しか出来ないが、忘年会は1年に何度も出来るという説が出回っています。僕も8月頃に1度忘年してますが、まだまだやっていきましょう。ソーシャルゲーム事業部ゲーム技研の谷脇です。 この記事はTech KAYAC Advent Calendar 2019 Migration Trackの18日目の記事です。17日目はPush 通知送信エージェント Gunfish に FCM v1 API 対応を追加したでした。 この記事で話すこと モバイルゲームのマスタデータの管理ツールを今年作り直したよ やりたいことが複雑だからいい感じに設計したよ CLIでも動くしサーバレスでも動くよ この記事がakashicの概要が書かれたドキュメントじゃ！(社内向けの業務連絡) マスタデータの管理とは そういえば先日、マスタデータNight #1というイベントを開催

どうもこんにちは、ソーシャルゲーム事業部ゲーム技研の谷脇です。 この記事はTech KAYAC Advent Calendar 2019 Migration Trackの14日目の記事です。13日目はAmazon S3 Signature V2 廃止対応にまつわるあれこれでした。 従来のGitHub APIを使うBot カヤックではGitHubを使っています。また、各プロジェクトでは自動化されたワークフローの一環として、Slack上でのコマンドからPull Requestを作成したり、レビュワースロットを実行したり、勝手に手順書を生成してissueに貼るなどしています。 こういったBotたちはGitHub上のリソースを操作するために、GitHub APIを使用しています。Organization内のPrivateリポジトリを操作するためには、認証のためにGitHub Tokenが必要です。

こんにちは、今年もあっというまでしたね〜@fnobiです。この記事はTech KAYAC Advent Calendarの12日目になります。 毎年アドベントカレンダーでは、その時お世話になった技術の話をしているんですが、今回は去年に引き続きfirebaseで行かせていただきます。いちおう専門はWebフロントのはずなんですが、最近WebフロントエンジニアというよりはFirebaseエンジニアです。 Firebase Realtime DatabaseとFirestore そもそもfirebaseとはなんぞや？という話は去年も書いたのでよろしければ読んでみてください。 さて現在Firebaseでは、データベースとしての機能がRealtime DatabaseとFirestoreの２種類提供されています。いちおう公式でも並列に扱われていたり、比較を書いてくれたりしているんですが、全体を通してな

SREチームの長田です。 先日Lobiの画像変換サーバーをImageFluxに移行したので、その過程を紹介します。 画像変換って？ Lobiはチャットを主軸としたコミュニティサービスです。 ユーザーはチャットメッセージに画像を添付することができます。 また、ユーザーアイコンやチャットグループの壁紙などもスマホやPCからアップロードして設定することができます。 アップロードされた画像は利用箇所に応じて適切なサイズ・フォーマットに変換する必要があります。 投稿画像のプレビューでは表示速度と通信量削減を優先して解像度低めの画像を、 拡大表示する場合はオリジナルサイズの画像を表示します。 複数サイズの画像を用意する手段として、Lobiでは内製画像変換アプリケーションであるmagcian1を運用していました。 Amazon EC2上で動作するNodeJS製のアプリケーションで、AWS CloudFr

できらぁ！ 面白法人カヤックのエンジニアのごんです。 昨今のフロントエンドといえば、 Todo アプリを作るにも Webpack やら Babel やら必要だと脅され、 始める前にうんざりしてしまうと話題ですが、 実は、最新のブラウザに限って言えば、そんなことはなく、 ECMAScript の新しい構文や JavaScript Modules など、 多くの機能がネイティブの状態でも使えます。 もちろん、古いブラウザのサポートや、通信パフォーマンスのことを考えると、 ビルドツールを使ったほうが良いのは間違いないのですが、 JavaScript の新しい機能に触れてみたり、自分用のツールを作るぶんには十分でしょう。 ソースコードはこちら！ そんなわけで、今回はビルドツールなしでウェブアプリを作ってみました。 ECMAScript に関するクイズゲームです。 最新版の Google Chrom

こんにちは。カヤックのSPAおじさんこと島津です。 今年はReactとVueを使ったSPA開発プロジェクトをいくつか担当してきたので、そこで得た知見の総まとめをしたいと思います。 ※ ここでのSPAとはすべてのViewをJavaScriptで書くWebアプリのことを指します。サーバーサイドMVCを主軸にViewの一部をReactやVueで書くこともありますが、今回はそのケースではありません。 1. フレームワーク 数年前とは事情が変わり、 フレームワークを使わないという選択肢は昨今だともう無いでしょう。丸腰のJSでDOMを弄っていた時代に比べると、かなり安定したフロントエンドの開発ができるようになりました。 人気フレームワークの台頭になっている React + Redux Vue + Vuex をこの1年使ってきましたが、書き方は違えどFluxアーキテクチャ・仮想DOM・コンポーネント志向

ギリギリの時間にこんばんは、12/2のアドベントカレンダーは、HTMLファイ部ののびーがお送りします。受託事業でWebフロントを書いたり、テクニカルディレクションをやったりしている人です。 さて今年はさっくりと、常日頃からお世話になっているlodash.jsというライブラリについて、掘り下げた紹介をさせていただきます。 lodash.jsとは https://lodash.com/ A modern JavaScript utility library delivering modularity, performance & extras. つまるところ、 ユーティリティー（なんか便利）関数を集めたやつ めっちゃかるい という特徴を持つライブラリです。近頃のフロントエンドの流行りであるThree.jsだったり、Vue.jsだったりといったものに比べると 地味 です。非常に地味ですが、個人的

Lobi事業部 サービス基盤チームの長田です。 最近プロジェクト内で使用する開発環境にDockerを利用するようになったので、その紹介をします。 Dockerにしたってどういうこと？ 公開済みのWebサービスに変更を加えて動作確認をする場合、本番環境でそれを行うわけにはいきません。 ほとんどの場合はローカルマシンでWebサービスの全体または一部のコピーを動かして動作確認を行うことでしょう。 その後ステージング環境などの他の開発メンバーも触ることができる環境で動作確認やQAを行い、 問題がなければ晴れて本番環境に反映、という流れが一般的かと思います。 この「ローカルマシンでWebサービスのコピーを動かす」部分にDockerを利用している、ということです。 Dockerにしてどうなった？ Before 開発環境構築に1〜2日かかっていた After 開発環境構築がランチに行っている間に終わるよ

はじめに こんにちは、面白法人KAYAC SG事業部バックエンドエンジニアの矢吹です。 8月30,31日,9月1日に開催されたCEDEC2017にて 「中規模チームを支える自動化とノウハウ共有の仕組み」 と題しましてカヤックでの日々の取り組みを発表しました。 こちらが当日の資料になります。 当日は体験したことのない会場の大きさと人数に圧倒され緊張でどうにかなりそうでしたが無事終わりなによりです。 発表後にはたくさんの方に質問をして頂き、改めて講演に参加いただきました皆様には御礼申し上げます。 以下に当日受けた質問と回答を載せておきますので、資料と合わせて参考になれば幸いです 当日のQ&A Q. 分割したシートに入力したデータをどうやってデプロイしていますか 分割したシートに入力したデータのQAが終わったタイミングで開発用のブランチをベースブランチへPull Request & マージをしデ

お詫びと訂正：（2017/06/08 23:32） 本記事内に掲載しているスクリーンショットが、 Apple.Incの開発者利用規約（APPLE BETA SOFTWARE PROGRAM AGREEMENT APPLE INC.）に抵触しているというご指摘をいただきました。 Apple.Incの開発者利用規約から、掲載内容を不適切と判断し、該当箇所を削除させていただきました。 Apple.Inc及び読者の皆様に深くお詫び申し上げます。 追記：（2019/02/17） Navigator.getUserMediaが非推奨となったため、MediaDevices.getUserMediaを使うように修正しました。 Navigator.getUserMedia - Web API | MDN MediaDevices.getUserMedia() - Web API | MDN ざっくり1行でま

こんにちは。カヤックのReactおじさんこと島津です。 最近はVue.jsにも浮気し始めましたが、Reactについての記事を書きます。 Reactのコンポーネントが増えてきて管理が大変 Reactを使うとコンポーネントの部品化が捗りますが、 開発規模が大きくなってくるとその数も増えてきて管理が大変になってきます。 スタイルガイドを導入 スタイルガイドとは、UIパーツの用例と実表示例をまとめたドキュメントのことです。 これがあるとパーツの再利用性が高まります。 例：Codepenのスタイルガイド 人力で手書きしていっても良いのですが、更新が追いつかなかったりするので自動生成する仕組み化ができるツールを使いましょう。 代表的なものとしては、CSSのコメントからドキュメントを自動生成してくれるkss-node などがあります。 今回はCSSだけではなく、Reactのコンポーネント単位でドキュメン

はじめまして。カヤック技術部の杉山です。 主にクライアントワークでサービスを開発しています。 今回は、クライアントワークで運用している、テストサイトの仕組みに関して書きます。 「テストサイト」の概要 クライアントワークでは、日々たくさんの案件を開発しています。 それぞれの案件では、多くの場合、Webサイトもしくは、WebAPIを公開するためのサーバーが必要になります。 実際の公開時には、案件ごとに専用のクラウドコンピューティングサービスを契約し、セットアップすることになりますが、 利用して良いサービスの確認が必要であったり、サービスの契約まで時間がかかったりするため、すぐには決まらない場合があります。そのため、開発時や検証時には、カヤック側でテストサイトを用意し、確認やプレビューを行っています。 さらに以下のような要望にも対応する必要があります。 出来るだけ時間をかけず開発環境を用意したい

こんにちは。 2016新卒でLobiのサーバーサイドエンジニアをやっているmorikuniです。 今回は、mdqというGo製のツールを作ったので、その紹介をします。 mdqは複数のデータベースに並列にクエリを投げて、結果をJSONで出力してくれるというものです。 github.com mdqに近いコンセプトのツールとして、弊社の荒賀(@ken39arg)が作ったshard_promptがあります(#6「Shardingマジ怖い」tech.kayac.com Advent Calendar 2012)。 こちらはSQLを解析し、複数データベースにまたがる集約関数を一部サポートしていますが、MySQL専用かつ直列にクエリを投げるというものでした。 mdqでは複数データベースにまたがる集約関数はサポートしませんが、PostgreSQLなどMySQL以外のデータベースへのクエリや、並列処理による速

この記事は、Tech KAYAC Advent Calendar 2016 の22日目の記事です。 こんにちは！カヤックのクライアントワークチーム・フロントエンドエンジニアの@takumifukasawa です。 昨年のアドベントカレンダーではWebGLも怖くない！canvasライブラリを効率良く学ぶオススメの順番という記事を書かせていただきました。 もくじ はじめに 手順 npm scriptsとは gulpと比較したメリット・デメリット サンプルの開発環境 明日は はじめに 今年の夏頃、いつも通りgulpを使っていた僕は、ある日gulpのバージョンアップか何かをしたら自作のgulp開発環境が上手く使えなくなって、すごくハマりました。それはそれは深刻な事態に…。 その時にふと、「あれ、なんでgulp使ってるんだっけ…」と立ち返り、gulpをなくしてみたらどうなるんだろうとあれこれ手を動か

この記事はTech KAYAC Advent Calendar 2016の21日目の記事です。 こんにちは、ソーシャルゲーム事業部のぼくらの甲子園！ポケットのサーバサイド開発・運用を担当しておりますマコピーことid:mackee_wです。 ↑のヘッダ画像の人物はワタクシ、という噂があります。みなさま答えはあっていましたでしょうか。 ぼくらの甲子園！ポケットとは 2014年9月にリリースされた共闘スポーツRPGのスマートフォン向けゲーム 現在3年目でございます！！！ 甲子園をモチーフにしてプレイヤーとプレイヤーが協力して別のチーム(CPUではない)と対戦して甲子園の頂点を目指す チーム(高校)の部員がプレイヤー9人揃わなければ試合が始まらない縛りとかも特徴です そんな感じで運営しておりますので興味を持たれましたらこちらからダウンロードのほどよろしくお願いしますm( )m。 ちなみにこの記事は

Lobiチームの長田です。 今回はLobiの根幹であるチャットサービスの、Streaming APIについて紹介します。 多くのチャットサービスがそうであるように、 Lobiでも新しいチャットメッセージが画面リロードの必要なく表示されるようになっています。 チャットメッセージをデータストリームとしてクライアントに送信するためのAPIがStreaming APIです。 LobiのチャットサービスはiOS・Android・Webブラウザで利用することができ、 これら全てでStreaming APIを使ったチャット画面の自動更新を実現しています。 即時反映の実装方法としては Polling Long Polling Web Socket など複数の方法が挙げられますが、LobiではHTTPリクエストのLong Pollingをベースにした 独自のフォーマットを使用しています。 仕組み app -