~ この記事はKAYAC Advent Calendar 2019の20日目の記事です。~ こんにちは。CL技術部の深澤です。新卒で入社して5年目になります。（ 深澤 匠 | 面白法人カヤック ） 3年ほどWebフロントエンドに従事して主にWebGL案件に携わったのち、最近はUnityやUnrealEngineなどを使ってARコンテンツやイベント・展示案件などに関わらせていただいています。シェーダーが好きです。 新卒入社からアドベントカレンダーは毎年書いており、せっかくなので過去のバックナンバーも載せておきます。 2015 ... WebGLも怖くない！canvasライブラリを効率良く学ぶオススメの順番 - KAYAC engineers' blog 2016 ... 【脱・gulp】npm-scriptsでシンプルなフロントエンド開発環境を作る - KAYAC engineers' bl

みなさまこんにちは、のびーことfnobiです。今年ももうアドベントカレンダーの季節なんですね。はやいはやい。 さて個人的にアドベントカレンダーでは、振り返りの意味も込めて その年お世話になった技術に関する記事を書く、というルールにしてますので、今回は NetlifyとFirebaseの話 をします！！ （ちなみにFirebaseの話は去年もしたかったのですが、時間が足りなかった＆他の人も書いてたのでパスしました） この記事の目的 いまフロントエンドエンジニアに使ってほしいサービスの私的TOP2・NetlifyとFirebaseについて、様々な観点から比較して、 「なんかどちらも便利そうって聞くけれど、どちらを使えばいいのかわかんないな？？」 という人をこの世からなくします！ Netlifyってなんぞや？ https://www.netlify.com/ githubと連携可能な静的Webホ

この記事を読んだらできるようになること 簡単なAlexaスキルを作って、シミュレータ上で試せるようになります。 この記事で伝えたいこと シミュレータをつかえば、Amazon Echo実機がなくてもスキルを試せるぞ。 VUI（Voice User Interface）を開発したいひとは、Alexa Skills Kitのドキュメントを読むと参考になるぞ。 今回作ったもの youtu.be 「アレクサ、むすんでひらいててのなるほうへ」というと、 「またひらいて、てをうって、そのてをうえに」と返ってくるスキルを作りました。 このエントリーのターゲット Amazon Echoを購入できていないけど、試しにAlexaスキルを作ってみたい人に向けて書いてます。 ※ 僕自身、招待メールをリクエストしているものの、まだ購入できてません。。。 ※ 当然、購入できた人も楽しめる内容になっております ※ すでに

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

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

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

イントロダクション 初めまして！ 面白法人カヤックでフロントエンドエンジニアをやっております、ごんと申します。 今回はタイトルの通り、Three.js の記事を書かせていただきました。 先月、JRA（日本中央競馬会）の年末のビッグレース・有馬記念のプロモーションとして、シン・アリマというキャンペーンが行われ、弊社では、そのWebサイト制作などをお手伝いさせていただきました。 このキャンペーンは、有馬記念とシン・ゴジラのコラボレーション企画で、スペシャルWebサイトでは、競走馬の名馬アリマとゴジラが、市街地や中山競馬場でデッドヒートを繰り広げるという、概ね荒唐無稽なゲームを遊ぶことができました。 残念ながらすでに、サイトの公開期間が終了してしまい、現在はゴジラや名馬アリマの雄姿を見ることはできないので、スクリーンショットを貼ります。 シン・アリマでは、WebGL を利用し、モバイルブラウザ上

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

この記事はカヤックアドベントカレンダー20日目の記事です｡ おはようございます。Lobiチームで主にフロントエンドの実装を担当しています、森本(@moshisora990)です。ISUCONで悔しい思いをして以来Goにはまりつつありますが、今日はLobiのフロントエンド開発事情と、そのために（本当にそのために）書いたgulpプラグインの話にしたいと思います。 もくじ もくじ Lobiのフロントエンド開発事情 デプロイ時に考慮したかったこと 今までどうしていたのか gulpプラグインを書いた おわりに おまけ Lobiのフロントエンド開発事情 Lobiでは、AngularJSを採用しています。また、開発はCoffeeScript、ES2015+、Sassなどの言語を取り入れたり、browserifyを導入したり、他にも多々周辺技術を採用して、gulp/grunt等のタスクランナーは欠かせない

はじめまして。カヤック技術部の杉山です。 主にクライアントワークでサービスを開発しています。 今回は、とある動画生成サイトに関して書きます。 動画生成サイトのサービス内容 ユーザーの撮影した写真と、サイト内でいくつかの選択肢を選ぶと、オリジナルの動画が生成できるサービスです。 画像にはロゴなどの合成が出来、映像作家によるアニメーションと、ミュージシャンによるBGMがつきます。 今回は、サーバーアプリケーションの実装に関して解説してみます。 利用技術 Ruby on Rails AWS FFmpeg ImageMagick 主な処理 クライアント側から画像を複数枚アップロードし、サーバーへ保存 動画、画像、BGMを合成 動画生成のチューニング それぞれの内容 クライアント側から画像を複数枚、サーバーへ保存 画像をサーバーへアップロードする前に、ロゴやテキストの合成をフロント側で行っています。

はじめに ※ この記事は tech kayac advent calendar 1日目の記事になります 技術ネタを期待していたみなさん1日目からこんなネタですいません｡ @Konboiです ここでのメンターは 同じプロジェクトに配属された新卒氏のスキル向上と会社/チームに馴染めるようにサポートする ぐらいのイメージです 告知 12/6 (日) にクックパッドさんをお借りして 師弟登壇2015 というイベントが開催されます｡ 新卒研修でどのような事をやったのか 新卒研修の内容にはどのような意図があったのか 新卒側からどうだったか などなど を話す予定です｡ もう一般枠の抽選は終わっておりますが学生枠の方はまだ､枠があるようなので是非参加してみて下さい！ 今日の記事では､当日話しきれないであろう 新卒研修以前 新卒研修以降 に会社としてというよりはメンターになった自分がどういう風に約8ヶ月指導

最近色々あってAndroidと心を通わせられるようになってきたago（@kyo_ago）です。 このエントリは tech.kayac.com Advent Calendar 2012 3日目の記事です。 Application cache（cache manifest）とは WHATWGやW3で議論されているHTML5 Offline Web Applicationの仕様の一部です。 細かい仕様等に関しては最後に参考URLをつけたのでそちらをご覧ください。 ここでは色々誤解の多いApplication cacheの使い方をご紹介したいと思います。 使い方 .appcacheの拡張子に対してtext/cache-manifestのMIMEタイプを設定してください。 .appcacheファイルは以下の形式で作成してください。 CACHE MANIFEST: #更新用ID（日付+連番等） キャッ