運用中プロジェクトをUnity2017からUnity2018にUpgradeした時の話 - KAYAC Engineers' Blog
表題の通り、Unity2017.4→2018.4にアップデートした時のハマった点や、普段アップデートする時に意識してる事などを紹介できればなといった感じです。 Unityのアップデート作業を初めてやる方や、あと来年2017から2018へ移行する稀有な運命の方がググった時に何か参考になれば幸いです。 ちなみにバージョンを上げる事になった経緯としてはAndroidの64bit対応がUnity5を除くバージョンの場合は8月までに対応必須だったからです。 ゲーム事業部、技術部所属の須藤（@p_chin)です！ この記事はTech KAYAC Advent Calendar 2019 Migration Trackの23日目の記事となります。 大まかな作業段取り Unityバージョンの選定 基本運用中タイトルなので最新のメジャーバージョンにてLTSリリースである4のマイナーバージョンあたりが出てる場
Firebase Realtime DatabaseとFirestoreを使い分けていこうなという話 - KAYAC Engineers' Blog
こんにちは、今年もあっというまでしたね〜@fnobiです。この記事はTech KAYAC Advent Calendarの12日目になります。 毎年アドベントカレンダーでは、その時お世話になった技術の話をしているんですが、今回は去年に引き続きfirebaseで行かせていただきます。いちおう専門はWebフロントのはずなんですが、最近WebフロントエンジニアというよりはFirebaseエンジニアです。 Firebase Realtime DatabaseとFirestore そもそもfirebaseとはなんぞや？という話は去年も書いたのでよろしければ読んでみてください。 さて現在Firebaseでは、データベースとしての機能がRealtime DatabaseとFirestoreの２種類提供されています。いちおう公式でも並列に扱われていたり、比較を書いてくれたりしているんですが、全体を通してな
誰も置いていかないシェーダーはじめの一歩 - KAYAC Engineers' Blog
この記事はTech KAYAC Advent Calendar 2019の10日目の記事です。 こんにちは！ jsdo.itでCreativeCodingの世界を知り、jsdo.itに惚れて入社を決め、jsdo.itの譲渡とともに入社し、jsdo.itの終了とともに退職した有給消化期間中の浅利（@kasari39）です！ 今回はシェーダーの世界へ一歩踏み出してみませんか？という内容です。 *1 シェーダーコーディングの世界 作品例として手前味噌ですが、このような映像をシェーダーのみで生成できます。 http://glslsandbox.com/e#59292.1 http://glslsandbox.com/e#59293.0 これらは100行にも満たないシェーダーから生成されています。 こんな短いのにこんな豪華な見た目が出るなんて面白いですよね。 それでは一歩踏み出してみましょう！ 開発
CircleCI API v2で自由自在に業務ワークフローのタスクを実行する - KAYAC Engineers' Blog
ごきげんよう、CI日和ですね。技術部の谷脇です。 先日Jenkinsでテストを実行したり、Slack Botからトリガーして実行していた業務ワークフローの必要なタスクをえいやっとCircleCIに持っていったのでその話をします。 長いので要約すると ヘビーにJenkins使ってたのを全部CircleCIに持っていきました。自動テストとSlack Botからトリガーされるジョブです CircleCI 2.1の機能をつかって設定を書きました。いい感じです テスト以外でBotからキックするようなジョブはそのままだと難しいので、プレビューリリースのCircleCI API v2を使いました。必見です 自前運用のJenkinsさんお疲れ様でした テストを継続的に動かす環境といえばJenkinsです。カヤックでも多くのプロジェクトでテストや、その他様々なタスクを実行する環境として利用されてきました。
Unityアプリを無差別タップで自動テストする - KAYAC Engineers' Blog
画面写真をクリックするとWebGLビルドに飛びます。ソースコードはGitHubに置いてあります。かつて製品で使ったものに著しい拡張を施した直後なため、 まだ実戦経験が浅いコードです。バグがあったら教えていただけると助かります。 こんにちは。技術部平山です。 今回はゲーム開発における耐久テストを行うための支援ツールについてお話します。 技術的には「EventSystemをコードからつついて勝手にタップさせる」だけのことですが、 単に技術的な問題と捉えるよりも、品質保証という広い問題の一部として捉える方が 実りが多いことと思います。 使い方 いきなりですが使い方から示します。 まず、GitHubから必要なファイル を持っていってください。debugTapMark.pngは便宜のために用意しただけで、別途好きな画像を使っていただいてもかまいません。 サイズもお好みで良いですが、16x16から32
Unityのデバグ作業をSlackで効率化する - KAYAC Engineers' Blog
この記事では弊社東京プリズンでの Slackを使ったデバグ支援について、技術部平山が紹介いたします。 上の画像は今回のために作った 仮のワークスペースのスクリーンショットです。 以下のようなものがUnity側から投稿されていることがわかります。 「スニペットテスト」とあるのは、スニペット扱いで投稿したもので、長めのテキストに適します。もちろん単なるメッセージも投稿できます。 次がスクリーンショットです。 「またね」と書いてある画像は、任意のテクスチャを投稿する機能によります。主にRenderTarget描画の確認に用いました。 最後は任意のファイルを投稿する機能です。ここではUnityのログを記録したものを投稿しています。 Slack側の登録が済んでいれば動くコードを、 サンプルプロジェクトごとgithubに置いておきました。 東プリで用いたものを整理し、一部削ったもので、そのままではあり
端末性能を測るWebGLアプリ作ってみた - KAYAC Engineers' Blog
こんにちは。技術部平山です。 この記事では、雑にベンチマークプログラムを作ってみたことと、それに付随して、 ベンチマークプログラムを作りたくなるような事情 テストの設計と、その背後にあるハードウェア といった点について書きます。 なお、実行はこちらからWeb上で可能です(上のスクショを押しても飛べます)。 UnityのWebGLにすることで、余計な手間なく多くの機械で測れるようにしています。 ただし、WebAssemblyを使っている関係上、iOS9以前では動きません。ご容赦ください。 測ってくださった方は、 twitterで結果(スクショ)を頂けると大変うれしいです。 ゲーム機、ハイエンドPC、古いスマホ、などは特に歓迎です! なお、ソースコードもgithubにあります。 測定方法 「ALL」を押し、元の画面に戻ってくるまで(キャラクターの絵が出てくるまで)放っておきます。 途中でスリー
Unityの複数解像度SafeArea対応で楽をするためには - KAYAC Engineers' Blog
モバイル向け開発は機械が様々です。 解像度は様々、アスペクト比も様々です。 最近は一部画面が欠けていて、ある範囲(SafeArea)に収めないと映ること保証しないよ、 という機械まで出てきました。 さて、これにどう対応するのが楽か? 技術部平山が、 弊社東京プリズンで行った手法をベースに、一つの例を示します。 こんなの ここではこんな例を見てみます。 この画面には5つの要素があります。 緑の楕円ウィンドウ。上寄せでsafeArea内にボタンを置きたい。画面幅に対する比率を一定にしたい。 青の楕円ウィンドウ。左寄せでsafeArea内にボタンを置きたい。画面高さに対する比率を一定にしたい。 赤の楕円ウィンドウ。safeArea内の中央に置きたい。どんな解像度でも画面内に収めたい。 右のキャラ絵。safeArea無視して右下寄せで置きたい。どんな解像度でも画面内に収めたい。 背景。画面全域を埋
「リッチテキストって頂点ムッチャ増えない?」から始まるUnityEngine.UIの性能調査 - KAYAC Engineers' Blog
UnityでUIを作ると言えば、まずはUnityEngine.UIです。 中身のことを考える必要もなく、ドカドカとImageやTextを置けば 動くので大変有り難いわけですが、不意に猛烈に処理が遅くなることがあります。 本記事では、たまたま見つけた現象と、そこから疑問を持って UnityEngine.UIの処理速度についていろいろ調べてみたことを、 技術部平山が書いてみます。 お急ぎの方のために結論を箇条書きにしておきましょう。 Graphic.color、RectTransform.sizeDelta、Text.textをいじると遅い 動かすだけでは大して遅くないが、動かさないよりは遅い リッチテキストは遅い 気になりましたら以下をどうぞ。 なお、Unityのバージョンは2017.4.8f1です。2018では改善している、 ということも多々ありそうですが、そのへんはご容赦ください。 UI
Vueでもっと幸せになりたいあなたへ。VueのUIコンポーネントライブラリVuetifyのススメ - KAYAC Engineers' Blog
どうもみなさまおはようございます。あるいはこんにちは。あるいはこんばんは。 KAYAC Advent Calendar 2018の12日目の記事を担当します、今年1月に中途入社しましたエンジニアのたがみです。 前職ではサーバーサイドのSEとして業務系のwebアプリを開発したり運用したりしていましたが、今はクライアントワークのフロントのエンジニアとしてwebサイトを作ったり動かしたりぶっ飛んだものにしたりしなかったりしています。 今回は、そんな私がフロントエンドになったばかりの頃に仲良くなった思い入れのある言語、Google App Scriptの話を！・・・・・・と、つい二日前までは、思っていたのですが。 Google先生を訪ねて色々と検索していたところ「あれ・・・なんか・・・Vuetifyについての日本語記事、実は少ないのでは・・・？」と気づいてしまったのです。 （もしかしたら気のせいか
徹底比較！Firebase vs Netlify (2018年版) - KAYAC engineers' blog
みなさまこんにちは、のびーことfnobiです。今年ももうアドベントカレンダーの季節なんですね。はやいはやい。 さて個人的にアドベントカレンダーでは、振り返りの意味も込めて その年お世話になった技術に関する記事を書く、というルールにしてますので、今回は NetlifyとFirebaseの話 をします！！ （ちなみにFirebaseの話は去年もしたかったのですが、時間が足りなかった＆他の人も書いてたのでパスしました） この記事の目的 いまフロントエンドエンジニアに使ってほしいサービスの私的TOP2・NetlifyとFirebaseについて、様々な観点から比較して、 「なんかどちらも便利そうって聞くけれど、どちらを使えばいいのかわかんないな？？」 という人をこの世からなくします！ Netlifyってなんぞや？ https://www.netlify.com/ githubと連携可能な静的Webホ
中〜大規模なSPAを開発する時に抑えておきたい10のポイント - KAYAC Engineers' Blog
こんにちは。カヤックのSPAおじさんこと島津です。 今年はReactとVueを使ったSPA開発プロジェクトをいくつか担当してきたので、そこで得た知見の総まとめをしたいと思います。 ※ ここでのSPAとはすべてのViewをJavaScriptで書くWebアプリのことを指します。サーバーサイドMVCを主軸にViewの一部をReactやVueで書くこともありますが、今回はそのケースではありません。 1. フレームワーク 数年前とは事情が変わり、 フレームワークを使わないという選択肢は昨今だともう無いでしょう。丸腰のJSでDOMを弄っていた時代に比べると、かなり安定したフロントエンドの開発ができるようになりました。 人気フレームワークの台頭になっている React + Redux Vue + Vuex をこの1年使ってきましたが、書き方は違えどFluxアーキテクチャ・仮想DOM・コンポーネント志向
Dockerで開発環境構築を10倍楽にしたはなし - KAYAC Engineers' Blog
Lobi事業部 サービス基盤チームの長田です。 最近プロジェクト内で使用する開発環境にDockerを利用するようになったので、その紹介をします。 Dockerにしたってどういうこと？ 公開済みのWebサービスに変更を加えて動作確認をする場合、本番環境でそれを行うわけにはいきません。 ほとんどの場合はローカルマシンでWebサービスの全体または一部のコピーを動かして動作確認を行うことでしょう。 その後ステージング環境などの他の開発メンバーも触ることができる環境で動作確認やQAを行い、 問題がなければ晴れて本番環境に反映、という流れが一般的かと思います。 この「ローカルマシンでWebサービスのコピーを動かす」部分にDockerを利用している、ということです。 Dockerにしてどうなった？ Before 開発環境構築に1〜2日かかっていた After 開発環境構築がランチに行っている間に終わるよ
フロントエンドの画像軽量化まとめ【2017年版】 - KAYAC Engineers' Blog
こんにちは、面白法人カヤック フロントエンドエンジニアのごんです！ 今回は、Webの画像の軽量化について、フロントエンドチームで使ってるツールややり方をまとめてみました。 画像の軽量化などで困ってる方の参考になればと思います。 なぜ画像の軽量化をするのか Webサイトのローディング時間は、ユーザーの直帰率やコンバージョン率に関わる大切な指標です。 ローディング時間に関わる要因はさまざまですが、 特に画像は容量が大きいため、画像の軽量化をすることで表示速度の大きな改善を望むことが出来ます。 例えば、当ブログのある記事は、画像が全体の容量の約1/3を占めていました。 一般に、PhotoshopやIllustratorから出力された画像は、十分な色数やクオリティで出力されており、 ツールなどを使うことで、見た目をそれほど損なわず、容量を大幅に減らすことができます。 また、一部の画像形式には、メタ
【Unity】 uGUIについて - KAYAC Engineers' Blog
はじめに はじめまして。 カヤックのソーシャルゲーム事業部の Unity エンジニアの高です。 今回は Unity の uGUI について紹介します。 この記事はカヤック Unity アドベントカレンダー 2016 の 12 日目の記事です。 uGUI について Unity 4.6 から新しい UI システム uGUI が搭載されるようになって、Unity 5 では uGUI がさらに更新され、とても便利なツールになりました。 昔は NGUI を使ってたかもしれませんが、新しいプロジェクトではオフィシャルな uGUI を使うのは良いでしょう。 全体像 uGUI では以下の構造になっています。 Canvas：子にUI要素（画像やボタンとか）を持つ EventSystem：マウス操作、タッチ操作、キーボード操作などから発生するイベント処理を担当する 各 UI コンポーネントの紹介について、Un
中規模チームを支える自動化とノウハウ共有の仕組み - KAYAC Engineers' Blog
はじめに こんにちは、面白法人KAYAC SG事業部バックエンドエンジニアの矢吹です。 8月30,31日,9月1日に開催されたCEDEC2017にて 「中規模チームを支える自動化とノウハウ共有の仕組み」 と題しましてカヤックでの日々の取り組みを発表しました。 こちらが当日の資料になります。 当日は体験したことのない会場の大きさと人数に圧倒され緊張でどうにかなりそうでしたが無事終わりなによりです。 発表後にはたくさんの方に質問をして頂き、改めて講演に参加いただきました皆様には御礼申し上げます。 以下に当日受けた質問と回答を載せておきますので、資料と合わせて参考になれば幸いです 当日のQ&A Q. 分割したシートに入力したデータをどうやってデプロイしていますか 分割したシートに入力したデータのQAが終わったタイミングで開発用のブランチをベースブランチへPull Request & マージをしデ
React Componentのスタイルガイドを自動生成してパーツの再利用をしやすくする - KAYAC Engineers' Blog
こんにちは。カヤックのReactおじさんこと島津です。 最近はVue.jsにも浮気し始めましたが、Reactについての記事を書きます。 Reactのコンポーネントが増えてきて管理が大変 Reactを使うとコンポーネントの部品化が捗りますが、 開発規模が大きくなってくるとその数も増えてきて管理が大変になってきます。 スタイルガイドを導入 スタイルガイドとは、UIパーツの用例と実表示例をまとめたドキュメントのことです。 これがあるとパーツの再利用性が高まります。 例：Codepenのスタイルガイド 人力で手書きしていっても良いのですが、更新が追いつかなかったりするので自動生成する仕組み化ができるツールを使いましょう。 代表的なものとしては、CSSのコメントからドキュメントを自動生成してくれるkss-node などがあります。 今回はCSSだけではなく、Reactのコンポーネント単位でドキュメン
DynamoDB + Lambda + SSM でテストサーバーをポコポコつくる仕組み - KAYAC engineers' blog
はじめまして。カヤック技術部の杉山です。 主にクライアントワークでサービスを開発しています。 今回は、クライアントワークで運用している、テストサイトの仕組みに関して書きます。 「テストサイト」の概要 クライアントワークでは、日々たくさんの案件を開発しています。 それぞれの案件では、多くの場合、Webサイトもしくは、WebAPIを公開するためのサーバーが必要になります。 実際の公開時には、案件ごとに専用のクラウドコンピューティングサービスを契約し、セットアップすることになりますが、 利用して良いサービスの確認が必要であったり、サービスの契約まで時間がかかったりするため、すぐには決まらない場合があります。そのため、開発時や検証時には、カヤック側でテストサイトを用意し、確認やプレビューを行っています。 さらに以下のような要望にも対応する必要があります。 出来るだけ時間をかけず開発環境を用意したい
ソーシャルゲームのカスタマーサポートを支える行動ログとredash - KAYAC engineers' blog
この記事はTech KAYAC Advent Calendar 2016の21日目の記事です。 こんにちは、ソーシャルゲーム事業部のぼくらの甲子園！ポケットのサーバサイド開発・運用を担当しておりますマコピーことid:mackee_wです。 ↑のヘッダ画像の人物はワタクシ、という噂があります。みなさま答えはあっていましたでしょうか。 ぼくらの甲子園！ポケットとは 2014年9月にリリースされた共闘スポーツRPGのスマートフォン向けゲーム 現在3年目でございます！！！ 甲子園をモチーフにしてプレイヤーとプレイヤーが協力して別のチーム(CPUではない)と対戦して甲子園の頂点を目指す チーム(高校)の部員がプレイヤー9人揃わなければ試合が始まらない縛りとかも特徴です そんな感じで運営しておりますので興味を持たれましたらこちらからダウンロードのほどよろしくお願いしますm( )m。 ちなみにこの記事は
チャットメッセージの即時反映を支える技術 - KAYAC Engineers' Blog
Lobiチームの長田です。 今回はLobiの根幹であるチャットサービスの、Streaming APIについて紹介します。 多くのチャットサービスがそうであるように、 Lobiでも新しいチャットメッセージが画面リロードの必要なく表示されるようになっています。 チャットメッセージをデータストリームとしてクライアントに送信するためのAPIがStreaming APIです。 LobiのチャットサービスはiOS・Android・Webブラウザで利用することができ、 これら全てでStreaming APIを使ったチャット画面の自動更新を実現しています。 即時反映の実装方法としては Polling Long Polling Web Socket など複数の方法が挙げられますが、LobiではHTTPリクエストのLong Pollingをベースにした 独自のフォーマットを使用しています。 仕組み app -
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
