とある相撲ゲーム開発の思い出 - KAYAC engineers' blog
こんにちは。技術部平山です。 去年の末、「本格相撲ゲーム（仮）」なるtwitterアカウント が、相撲のようなもののゲーム動画をアップロードしておりましたが、 アレの開発に関わっていたので、そのあたりのお話をしようかと思います。 また、これが後々別の製品の元になっておりまして、そのあたりについても最後に触れます。 なお、ソースコード及びビルドをgithubにて 公開しておりますので、よろしければどうぞ。 ビルドはリリースページにあります。 残念ながら力士モデルやアニメーション、効果音等は購入したもので 再配布できませんので、ソースコードからは削除してあります。 音は鳴らないだけですが、人体モデルがない状態では動きませんので、 代わりにユニティちゃんを入れておきました。 企画の経緯 元々この企画は、社内イベント向けのものです。 「プレゼン対決で勝った企画は72時間の業務時間を使って開発できる
regl入門 - KAYAC engineers' blog
こんにちは、カヤック・クライアントワークチーム・フロントエンドエンジニアのMr.ブラウンです。 今回は、 「Fast functional WebGL」 と謳っているreglを紹介いたします。 ※ 多少、WebGL・GLSLをさわったことがある前提で話が進んでいきます。 はじめに reglは、シェーダーを自分で書く必要があります。 three.jsのようにBoxGeometryというクラスを使えば簡単に立方体をつくることができたり、 PixiJSのようにGraphicsというクラスを使えば簡単に四角形などをつくることができたり… はできません。 四角形であろうと、丸であろうと、立方体であろうと、 簡単に図形をつくることができるクラスやメソッドは用意されておらず、 reglで何かをつくりたければ自分自身でシェーダーを書かなければいけません。 (three.js・PixiJSはメジャーなcan
【WebGL】three.js : soft particle - KAYAC engineers' blog
~ この記事はTech KAYAC Advent Calendar 2020の18日目の記事になります ~ こんにちは！クライアントワークチーム・フロントエンドエンジニアの深澤です。web や unity の実装を担当しています。 今日は three.js で soft particle （ソフトパーティクル）を実装する方法を紹介していきたいと思います。 ソフトパーティクルを使って、霧のような雰囲気の中をキツネが駆けるシーンを作ってみました。 この動作デモはこちらから、動作デモのソースはこちらのリポジトリからご覧いただくことができます。 ソフトパーティクルについて ソフトパーティクルとは 特徴 実装方針 three.jsでの実装 JavaScript GLSL 改善点 霧の表現 最後に ソフトパーティクルについて ソフトパーティクルとは おおまかに一言でまとめると「深度値の比較をして透過率
誰も置いていかないシェーダーはじめの一歩 - 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行にも満たないシェーダーから生成されています。 こんな短いのにこんな豪華な見た目が出るなんて面白いですよね。 それでは一歩踏み出してみましょう！ 開発
Unityで80年代風を表現してみる - KAYAC engineers' blog
80年代風作例。ユニティちゃんモデル及びシェーダーを使っています。© UTJ/UCL こんにちは! CL事業部の原です。 この記事は Tech KAYAC Advent Calendar 2019 の13日目です。 今回はUnityで80年代風を表現するということにチャレンジしてみました。 80年代風と言っても、レトロゲームを再現するという意味ではありません。 80年代風イラストの雰囲気を表現したいと思います。 80年代リバイバルブームとは ここ数年、80年代リバイバルな表現がファッションやデザイン、映画などでブームになっていたことはこれを読んでいるみなさんにも思い当たるところがあると思います。しかし、この現象を包括的にまとめたような記事文献は見つけることができませんでした。なので、個人的体験から80年代リバイバルブームを追ってみます。 80年代リバイバル表現との出会い：tofubeats
人間の行動を操るために覚えておきたい科学 - KAYAC engineers' blog
この記事はTech KAYAC Advent Calendar 2019の4日目の記事です。 こんにちは。技術部平山です。 この記事では、人の行動を操る、つまり、人の行動を予測したり、望みの行動を取らせるために役立つ科学について 軽く紹介いたします。プログラミングの話はございませんが、 プログラマに読みやすい味付けにはしておきました。 なお、「人を操る」とか言っていますが、実際それで思うように操れるのであれば、 私はもっと裕福だったでしょうし、高い地位を得ていたことでしょう。 理屈と実践は異なるということです。 ただ、これを知って気が楽になる方もいらっしゃるかもしれませんし、 もしかしたら、実際に何かを改善させられるかもしれません。 基本的には与太話ですので、お暇な方のみお付き合いください。 予測に使える理論は、制御にも使えるかもしれない 何かしらの理論によって現象が予測できるのであれば、
徹底比較！Firebase vs Netlify (2018年版) - KAYAC engineers' blog
みなさまこんにちは、のびーことfnobiです。今年ももうアドベントカレンダーの季節なんですね。はやいはやい。 さて個人的にアドベントカレンダーでは、振り返りの意味も込めて その年お世話になった技術に関する記事を書く、というルールにしてますので、今回は NetlifyとFirebaseの話 をします！！ （ちなみにFirebaseの話は去年もしたかったのですが、時間が足りなかった＆他の人も書いてたのでパスしました） この記事の目的 いまフロントエンドエンジニアに使ってほしいサービスの私的TOP2・NetlifyとFirebaseについて、様々な観点から比較して、 「なんかどちらも便利そうって聞くけれど、どちらを使えばいいのかわかんないな？？」 という人をこの世からなくします！ Netlifyってなんぞや？ https://www.netlify.com/ githubと連携可能な静的Webホ
Vueの単一ファイルコンポーネント+TypeScript+Hot Module Replacementの環境を作ってみた話 - KAYAC engineers' blog
こんにちは！ファイ部の ひめの です。 この記事はTech KAYAC Advent Calendar 2017の15日目の記事です。 さてさて、今年JSフレームワークとして多くの注目を集めたVue.jsですが、v2.5のリリースで、TypeScriptのサポートが強化されました。 (2017/10/14) このリリースを受けて、「今までTypeScriptを触ったこと無いけど、元々興味はあったので、これを機にVueを使ってTypeSriptを触ってみるか〜」と思いたち、気がつくとタイトルのようなオレオレスターターキットを作っていました。 今回はその成果物の紹介と、調べながらスターターキットを作っていった過程での気づきや所感を記そうと思います。 開発リポジトリ 以下が動作まで確認できたリポジトリです。 nyawach/vue-ts-hmr-starter できること WebpackでHot
BigQueryで将棋の棋譜の氾濫を解決する - KAYAC engineers' blog
Tech KAYAC Advent Calendar 2017の13日目の記事をお届けします。 クライアントワーク事業部でサーバーサイドエンジニアをしている森です。よろしくお願いします。 過去最大の将棋の盛り上がり 今年は将棋がとてもとても盛り上がりましたね。 最年少プロ棋士誕生 藤井四段29連勝 加藤一二三九段引退 流行語大賞候補に藤井フィーバーとひふみんがノミネート 羽生棋聖竜王位を獲得し永世七冠に かつてこんなに将棋がニュースに出たことはあったでしょうか。 こうなってくると将棋人口が増えて来そうです。 将棋人口が増えた時の問題点 将棋人口が増えると何が困るでしょうか？ webのエンジニアなので将棋をwebに例えて考えてみました。 対局者：ユーザー 将棋盤・駒：UI・UX 指し手：アクセス 棋譜：ログ という感じでしょうか。 将棋人口が増えると棋譜がとんでもないことになりそうです。 と
新卒の一年間で確立させた紙のノートを使った仕事術！ - KAYAC engineers' blog
この記事は Tech KAYAC Advent Calendar 2017 の22日目の記事です。 こんにちは、最近入社2年目になったバックエンドエンジニアの @commojun と申します。 皆さんは紙のノート使っていますか？僕は毎日使っていて、仕事を進める上ではPCの次くらいに必要不可欠な存在となっています。 本日は、新卒で入社してから約1年、毎日紙のノートを使ってきて自分なりのノート活用法が確立したので紹介いたします。 もくじ どんな感じに使っている？ ノートの役割 ①その日のタスクを一覧する ②一日ごとに小さな目標と振り返りを持つ ③まとまりきらない考えをいったん書き下す なぜ、紙のノートなのか？ ①汚く使える ②型にはまらない使い方ができる ③目に入る場所に置いておける 欠点 アンドゥができない あのメモっていつどこに書いたっけ？ってなる エコでない 最後に どんな感じに使ってい
一端のゲームエンジニアが"エレベータ"について本気出して考えてみた - KAYAC engineers' blog
こんにちは。技術部サーバーサイドエンジニアの大河原です。 ゲーム作ってます。一応まだ新卒です。 こちらはTech KAYAC Advent Calendar 2017 の23日目の記事になります。 （昨日の記事は我らが@commojunの「新卒一年間で確立した紙のノート仕事術！」でした。） ちなみに前回僕が書いた記事はカヤックのエンジニアのエディタ事情 2017 です。こちらもよかったら是非。 今回は普段から僕らが利用しているエレベータとエレーベータのアルゴリズムについて調べてみました。 ポルトガル・リスボンの観光地でもあるサンタ・ジュスタのエレベーター。上の展望台からはリスボン市街地を一望できる。 ■ なんでエレベータ？ 言うまでもなく、弊社はエレベータを設計したり製造したりしていません。← これといった大きな理由はないんですが、僕自身昔から電化製品とか電子機器とか見るとその性能よりも「
【WebGL】シェーダーを使って3D空間でスプライトアニメーションさせる - KAYAC engineers' blog
この記事は、Tech KAYAC Advent Calendar 2017 の19日目の記事です。 こんにちは！カヤックのクライアントワークチーム・フロントエンドエンジニアのふかぽん です。WebGLを用いた3Dコンテンツを制作させていただくことが多いです。 過去のアドベントカレンダーではこんな記事を書かせていただきました。 2015 ... WebGLも怖くない！canvasライブラリを効率良く学ぶオススメの順番 2016 ... 【脱・gulp】npm-scriptsでシンプルなフロントエンド開発環境を作る 目次 目次 はじめに WebGLでスプライトアニメーションさせる方法 1. UV座標をずらしてフレームを表示する 1-1. UV座標を拡大縮小させる 1-2. UV座標を平行移動させる 1-3. 座標変換を適用する 1-4. 座標変換後のUV座標を元に画像の色を取得する 2. ルー
日本語のAlexaスキルの作り方（30分あればAmazon Echoがなくても試せるよ） - KAYAC engineers' blog
この記事を読んだらできるようになること 簡単なAlexaスキルを作って、シミュレータ上で試せるようになります。 この記事で伝えたいこと シミュレータをつかえば、Amazon Echo実機がなくてもスキルを試せるぞ。 VUI（Voice User Interface）を開発したいひとは、Alexa Skills Kitのドキュメントを読むと参考になるぞ。 今回作ったもの youtu.be 「アレクサ、むすんでひらいててのなるほうへ」というと、 「またひらいて、てをうって、そのてをうえに」と返ってくるスキルを作りました。 このエントリーのターゲット Amazon Echoを購入できていないけど、試しにAlexaスキルを作ってみたい人に向けて書いてます。 ※ 僕自身、招待メールをリクエストしているものの、まだ購入できてません。。。 ※ 当然、購入できた人も楽しめる内容になっております ※ すでに
細かすぎるけど伝わって欲しいlodash.jsの話 - KAYAC engineers' blog
ギリギリの時間にこんばんは、12/2のアドベントカレンダーは、HTMLファイ部ののびーがお送りします。受託事業でWebフロントを書いたり、テクニカルディレクションをやったりしている人です。 さて今年はさっくりと、常日頃からお世話になっているlodash.jsというライブラリについて、掘り下げた紹介をさせていただきます。 lodash.jsとは https://lodash.com/ A modern JavaScript utility library delivering modularity, performance & extras. つまるところ、 ユーティリティー（なんか便利）関数を集めたやつ めっちゃかるい という特徴を持つライブラリです。近頃のフロントエンドの流行りであるThree.jsだったり、Vue.jsだったりといったものに比べると 地味 です。非常に地味ですが、個人的
触れるミュージックビデオ!? インライン動画再生のはなし - KAYAC engineers' blog
HTMLファイ部ののびーです。12月ぶりです。 さて今回は、以前にとあるアイドルさんのWebサイトを制作した際に使った、 インライン動画再生 という技術について、その仕組みや使い所を解説していこうと思います。 今回のために作ったデモサイトがこちらになります。ぜひこちらのページもスマホで開きつつ、記事をご覧ください。 https://fnobi.github.io/plays-inline-demo/demo/ インライン動画再生とは 動画を再生するWebサイトを作ったことがある方ならわかると思いますが、これまでiOS Safariでは、動画を再生する際は必ず全画面再生になってしまう、という制約がありました。 この制約により、たとえば動画をサイトの背景に使ったり、動画と連動する演出を出したりといった表現が、iOSのシェア率を考えると断念せざる終えない…という状況が続いていました。 ところが、
【お詫びと訂正】iOS11でついにSafariからカメラにアクセスできるようになりました。（コピペで動くサンプルコード付き） - KAYAC engineers' blog
お詫びと訂正：（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 Componentのスタイルガイドを自動生成してパーツの再利用をしやすくする - KAYAC engineers' blog
こんにちは。カヤックのReactおじさんこと島津です。 最近はVue.jsにも浮気し始めましたが、Reactについての記事を書きます。 Reactのコンポーネントが増えてきて管理が大変 Reactを使うとコンポーネントの部品化が捗りますが、 開発規模が大きくなってくるとその数も増えてきて管理が大変になってきます。 スタイルガイドを導入 スタイルガイドとは、UIパーツの用例と実表示例をまとめたドキュメントのことです。 これがあるとパーツの再利用性が高まります。 例：Codepenのスタイルガイド 人力で手書きしていっても良いのですが、更新が追いつかなかったりするので自動生成する仕組み化ができるツールを使いましょう。 代表的なものとしては、CSSのコメントからドキュメントを自動生成してくれるkss-node などがあります。 今回はCSSだけではなく、Reactのコンポーネント単位でドキュメン
【将棋】nginxで返す新しいマークダウン - KAYAC engineers' blog
この記事はカヤックアドベントカレンダー2016の16日目の記事です。 目次 はじめに 新しいマークダウン mrubyとは ngx_mrubyとは ビルド 設定 コード 展望 終わりに はじめに 皆様こんにちは、いかがお過ごしでしょうか。CL事業部サーバーサイドの @goki727 です。 2016年も沢山のことがありましたね、聖の青春が映画化されたり、１４歳のプロ棋士が誕生したり、加藤一二三先生の弱点がモスグリーン色のスーツだと判明したり、これからも将棋から全く目が離せませんよね。 ところで、今回は皆さんがいつも困っているであろう問題を解決するマークダウンを考えました。 新しいマークダウン みなさん、将棋の記事を書いたりメモしたりする時にいつも困りませんか？ そうですよね！いちいち局面図作成ソフトを使って画像を生成してアップロードしてリンク貼り付けてというように毎回やるのって面倒くさいです
社内Slackを支えるemoji - KAYAC engineers' blog
この記事は、Tech KAYAC Advent Calendar 2016 の13日目の記事です。 社内Slack 弊社では、社内コミュニケーションツールとして、Slackを採用しています。 Slackの便利なところを挙げれば、枚挙に暇がないのですが、 とりわけ素晴らしいのは、emojiによるリアクション機能でしょう。 直接返信を使わず、emojiを使ってリアクションすることで、 以下のようなメリットを享受できます。 文章を書かなくていいので楽 通知を飛ばさないで返信できる（就業時間後とか） リアクションした時間が分からないので、返信遅れたときに誤魔化すのに便利 今回は、エンジニアはじめ、ディレクターやデザイナーなど、 何人かによく使うemojiを見せてもらいました。 僕の場合 応答として汎用性の高い 低姿勢な雰囲気を気軽に出せるがランクインです。 ほかにも、焼肉に行きたいときに使えるが便
カヤックのWeb Starter Kitのはなし - KAYAC engineers' blog
こんばんは、HTMLファイ部ののびーです。Web技術で何かしらうまいことやるのを得意としてます。 今回はAdvent Calendarの場を借りて、HTMLファイ部で運用しているkayac-html5-starterの話をさせていただきます。 それはなんぞや なにはともあれレポジトリをぺたり。 kayac-html5-starter 「starter」という名前は、Googleさんが公開しているWeb Starter Kitから来ていますが、要するに 新しいWebサイトの開発を始めるときに使えるひながたです。 こちらに乗っかってもらえば、gulp等々もろもろのツールを使ったことがない方でも、快適・高速・モダンなWebフロント開発ができますよ！というわけです。 今年の初めあたりからまともに作り始め、かなり定着したなということで今回ご紹介します。 （ちなみに現在つかっているものは２代目で、元社
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
