読者です 読者をやめる 読者になる 読者になる

Three.jsでボーンアニメーションをする!

イントロダクション 初めまして! 面白法人カヤックでフロントエンドエンジニアをやっております、ごんと申します。 今回はタイトルの通り、Three.js の記事を書かせていただきました。先月、JRA(日本中央競馬会)の年末のビッグレース・有馬記念のプロモー…

【脱・gulp】npm-scriptsでシンプルなフロントエンド開発環境を作る

この記事は、Tech KAYAC Advent Calendar 2016 の22日目の記事です。 今年の夏頃、いつも通りgulpを使っていた僕は、ある日gulpのバージョンアップか何かをしたらgulpが使えなくなって、すごくハマりました。それはそれは深刻でした。 その時にふと、「あれ…

大型サービスのデプロイに組み込むgulpプラグインの話

この記事はカヤックアドベントカレンダー20日目の記事です。 おはようございます。Lobiチームで主にフロントエンドの実装を担当しています、森本(@moshisora990)です。ISUCONで悔しい思いをして以来Goにはまりつつありますが、今日はLobiのフロントエンド開発…

Webフロントエンジニアが一般参加型コンテンツをつくった話

この記事はカヤックアドベントカレンダー2016の18日目の記事です。 こんばんわ! 今年の春より社会人になりました、HTMLファイ部のゆみこふ( @yumikokh )です。 普段の業務ではクライアントワークチームでWebを作っております。 が! あるリアルイベントで…

ウェブページをできる限りネイティブアプリっぽく魅せるテクニックまとめ 〜アップルにリジェクトされつづけるなら、ウェブアプリとストアをつくって自前で配信してしまおうという企み〜

https://kimizuka.github.io/web-app-store/example/ 北斗市公式キャラクター ずーしーほっきー ©2013 北海道北斗市 を使用させていただいております。ウェブページをできる限りネイティブアプリっぽくみせて配信するために色々研究しました。 もくじ はじめ…

Webブラウザ上でリアルタイムにぼかしを加えたい

自己紹介 初めましての人は初めまして、そうでない人はこんばんは。HTMLファイ部のポロです。 この記事はなに? アドベントカレンダー9日目の記事です。 この記事ではWebブラウザ上でリアルタイムにぼかしを加えるにはどんな方法があるかを書きます。 (当初…

HTJS: JavaScriptでHTMLを書くとしたら?

はじめに ※ この記事は Tech KAYAC Advent Calendar 2016 5日目の記事になります こんにちは。HTMLファイ部の @butchi_y です。 僕の将来の夢は言語を作ることです。 言語って自然言語かよプログラミング言語かよ、と思われるかもしれませんが、両方です。 …

カヤックのWeb Starter Kitのはなし

こんばんは、HTMLファイ部ののびーです。Web技術で何かしらうまいことやるのを得意としてます。 今回はAdvent Calendarの場を借りて、HTMLファイ部で運用しているkayac-html5-starterの話をさせていただきます。 それはなんぞや なにはともあれレポジトリを…

【祝!リニューアル】カヤック 新コーポレートサイト、5種類テーマ切り替えの裏側!【フロントエンド芸】

どうも、フロントエンドエンジニアの田島です。 弊社カヤックでは、2016年の7月7日を以て3年ぶりのコーポレートサイトリニューアルを行いました。 https://www.kayac.com 今回のサイトの大きなテーマは、 5種類のデザインから自分の好きなテーマに切り替えて…

Electron + React + Redux

JSで書くデスクトップアプリが熱い Electron 熱いです。 Atom を始め、Qiita の Kobito や Slack など、 十分に実用できるアプリケーションが登場しはじめています。 なにかと話題のRPGツクールMVは、NW.js(旧node-webkit)ですが、これもJSで書かれていま…

日本人にしか読めない難読化ツールつくってみた

はじめに ※ この記事は Tech KAYAC Advent Calendar 2015 10日目の記事になります 初めまして。フロントエンドエンジニアの@butchi_yです。 いやー、SUSHI食べたいですよねー。 たまらなくて今日のランチはお寿司にしました。 つくったもの のっけから成果物…

#14 ECMAScript 6のやばい扉を開けちゃうかな(Generators編)

tech.kayac.com Advent Calendar 2014 14日目です! ざっくばらんにES6のジェネレータのことを書きます。 実のところそんなにやばくないです。 ECMAScript 6! ECMAScript 6、盛り上がってきましたね。 クラスやアロー演算子、let装飾子など、 魅力的な機能…

#13 フロントエンド制作に華を! 面白いWebAPI 7選

こんにちは。 カヤックに新卒で入社し、フロントエンドエンジニアとして スロット制作を中心とした活動を続けている田島です。 どうぞお手柔らかによろしくお願いします。 さてさて、Webのフロントエンドエンジニアの場合、 何か作りたいアイデアを思いつい…

#16 Leap Motionでおっぱいを揉む

どうも。退職者です。@damele0nです。 teck.kayac.com Advent Calender 2013 15日目のエントリです。 前日は、まったく恨んではいないのですが僕のプライベートな情報を社内でリークした @handlename 先輩の #15 SublimeTextでも使い捨てファイルを開きたい …

#20 まさか、Cocos2d-x 使っているのに C++ 書いてるわけないよね?

Unity ではプラグイン開発専門の @Gemmbu です。 みなさん Cocos2d-x で開発してますよね? 当然のことながら Cocos2d-x で開発する際は Lua/JavaScript で開発していますよね? Q. Lua/JavaScript で開発すると何がうれしいの? A. スマートフォンの開発サ…

#3 「あまりApplication cache(cache manifest)のことを甘く見ない方がいい」 Advent Calendar 2012

最近色々あってAndroidと心を通わせられるようになってきたago(@kyo_ago)です。 このエントリは tech.kayac.com Advent Calendar 2012 3日目の記事です。 Application cache(cache manifest)とは WHATWGやW3で議論されているHTML5 Offline Web Applicati…

#2「JavaScriptでおっぱいを動かす」 tech.kayac.com Advent Calendar 2012

カップル爆発しろ どうも。「何かよく知らないけど訳分かんない人だと思ってた」と社内で最近言われたHTMLファイ部のdamele0nです。 このエントリはtech.kayac.com Advent Calendar 2012 2日目の記事です。 テーマは「私の中のマイイノベーション 2012」 季…

initTouchEventにおけるAndroidとiOSの引数違い

こんにちは。毎日欠かさずAndroidと心で対話をおこなうHTMLファイ部の高橋です。入社4週目にしての初投稿です。 UIのタッチ操作が絡むJSのテストで、タッチイベントを生成する際のハマりどころをエントリします。 きっかけ 先日、JsTestDriverでタッチイベン…

jQueryのCSSセレクタAPIを高速に扱う方法

最近Androidとの抗争が激化しているago(@kyo_ago)です。 jQueryはCSSセレクタを多用する特徴がありますが、jQuery内では実行ブラウザやCSSセレクタの記述によって呼び出されるブラウザAPIが変わり、それによって実行速度にも影響が出ます。 この記事では「…

JavaScriptによるcross domain & streamingなAPIアクセスの方法色々 - Nakamap APIの場合 -

こんにちは。すぎゃーん(@sugyan)です。 先日、Nakamap APIを公開しましたが、今回はそれをJavaScriptから使うためのライブラリを用意してみましたので紹介させていただきます。 使い方 <script type="text/javascript"http://developer.nakamap.com/js/nakamap.js"></script> とscriptを読み込むことで使用できます。 access_tokenが既に取得でき…

HTML5とか勉強会とMozilla勉強会で話してきました

Mac Book AirにWindows7を入れて常用しています。ago(@kyo_ago)です。 先週、HTML5とか勉強会、Mozilla勉強会と発表を行って来たので、その時使った資料を紹介したいと思います。 HTML5とか勉強会 HTML5とか勉強会ではJSクイズゲームの作り方(HTML5実力テ…

技術者の集まるコミュニティ「jsdo.it」「wonderfl」のmeetup開催決定!

JavaScript、HTML5、CSS 共有コミュニティ「jsdo.it - share JavaScript, HTML5 and CSS -(以下「jsdo.it」)」、世界一のFlashクリエイターコミュニティ「wonderfl build flash online(以下「wonderfl」)」のmeetup開催決定です! 昨年に引き続き、第2回…

Google Mapのデザインを変更する方法(StyledMapの使い方)

豚を丸焼きにするイベントで日焼けしました。ago(@kyo_ago)です。 すでにだいぶ時間がたってますが、7/7に弊社コーポレートサイトのリニューアルを行いました。 その際会社までの道順を紹介するページでGoogle Mapのデザインを変更したのでその方法をご紹…

モテるJS系女子力を磨くための4つの心得

1. あえてECMAScript3.0以前の実行環境を使う あえてECMAScript3.0の実行環境を使うようにしましょう。そしてATNDで好みの男がいたらLT参加を告知し、わざとらしく発表準備段階でコンソールを出していじってみましょう。そして「あ~ん! この実行環境本当に…

SVG Girlの公開と内部実装

乗り換え以外で初めてアメリカ行きました。ago(@kyo_ago)です。 すでに先週のこととなってしまいましたが、jsdo.it上でSVG Girlというコンテンツを発表したのでご紹介させていただきます。 (現在IE9のリリースに合わせて英語版のみ公開しています。日本語…

今日から始めるCoffeeScript

こんにちは。毎年花粉症になりかけている飯塚です。 最近のNode.jsの普及などによってサーバサイドJavaScript界隈が盛り上がっています。 そんなホットなJavaScriptをラクにかつエレガントに書くためのCoffeeScriptという言語をチュートリアル風に紹介します…

node.jsつかいました

こん**は、taiyohです。 さて、先日のsugyanのエントリ「node.jsはじめました」にて 本日2/25(金) 20:00から行われる、弊社のオンライン説明会もリアルタイム技術を駆使しています! 新卒採用企画 オンライン会社説明会 2012 | 面白法人カヤック ぜひ見に…

node.jsはじめました

はじめまして! 技術部2年目のsugyanと申します。 初めてtech.kayac.comに投稿します! 先日自分のブログで書いた記事が思いのほか好評だったので、これについてもう少し詳しく書いてみようと思います。 node.js+socket.ioを使ったライブコーディングwebアプ…

jsdo.itで新エディタを公開しました

エディタの開発のためにNode.js始めました。ago(@kyo_ago)です。 jsdo.itで新エディタを公開しました。 これまでjsdo.itではCodeMirrorを使用していましたが、本日からACE - Ajax.org Code Editorも選択できるようになりました。 新しいエディタを使用され…

jQuery.stopのjumpToEnd引数が便利すぎてやばい(JavaScript Advent Calendar 2010 5日目)

JavaScript Advent Calendar 20105日目のago(@kyo_ago)です。 jQueryのソースを眺めててjQuery.stopに引数があることに気づいたので調べてみました。 まず、簡単なスライドダウンメニューを作ってみたいと思います。 jQuery.stop 1 - jsdo.it - share Java…

ソーシャル系ボタンの表示を非同期化してブログの表示を高速にする方法

付箋がないと本が読めなくなりました。ago(@kyo_ago)です。 先日リニューアルした弊社デザイナーブログの表示を高速化したのでその方法を紹介したいと思います。 KAYAC DESIGNER'S BLOG 元々トップページに記事が12件表示され、その記事毎にFacebook、Goog…

JavascriptでBrainfuckのインタプリタを実装してみた。

こんにちは。最近週一で温泉に通ってます。 nagata(@handlename)です。 Brainfuckというちょっと汚い名前のプログラミング言語があることをご存じでしょうか? たった8種類の文字からなるスーパーミニマムな言語です。 その仕様はというと・・・ > ポイン…

uupaaさんやos0xさんがやってくる「ごはんとFlash with JS」開催のお知らせ

最近社内で、「やりましょう。外村君よろしく。」という流れになりつつあります、外村です。こんにちは。 2010年8月21日に鎌倉どんぶりカフェbowlsで交流会イベント「ごはんとFlash with JS」を開催します。 ごはんとFlash 交流会イベントやります('10/8/21)…

Firebugの意外と知られていない機能紹介(プログラマ向け)

羊毛布団を洗濯機にかけられないことを知りました。ago(@kyo_ago)です。 意外と知られていない機能が多い!?Firebugの使い方を見て、プログラマ向けも欲しくなったので書いてみました。 1. ショートカット一覧 以下のページでFirebugのショートカット一覧…

8行でjQueryのデバッグが楽になるjQuery.pの紹介

週末はオレ標準JavaScript勉強会のUstreamを眺めてました。ago(@kyo_ago)です。 以前jQuery使いが陥りやすい罠の中で「4 何でも一行で書こうとする」という点を上げたのですが、以下のようなmethodを定義することでmethod chainのデバッグが楽になるので紹…

NILScriptでZenCoding出来る環境を開発しました

本日は花火大会なので夕方から和装になる予定のago(@kyo_ago)です。 先週土曜日にブラウザー勉強会へ参加させていただき、「NILScriptでどこでもZenCoding」というLTをさせていただいたので資料を公開したいと思います。 NILScriptでどこでもZenCoding NIL…

jsdo.it at jstudy

むすめが1歳になりました、大塚です。こんばんは。 先日、弊社ほかむら主催でjstudyというjsの勉強会を行ないました。 わたしは、その前日にちょうど生まれたむすめ、 http://jsdo.it/ についてお話しました。 その時の発表資料をまとめてjsdo.itにあげまし…

DOM Ready前にイベントを設定する方法(jQuery.liveの紹介)

健康診断で身長伸びてました。agoです。 今開発中のサイトで$().liveを中心にした実装を行っているので簡単にまとめてみました。 $().liveって? jQuery 1.3系からサポートされた、イベントハンドラの設定用methodです。 $().bindとどこが違うの? $().bind…

IEでswfを複数読み込んでいる場合の$('object:first').find('param')が正常に動作しない件に関して

名字を検索するとサジェストに「読み方」が表示されます。agoです。 mist.jsでIEがswfを複数読み込んでいる場合に$('object').find('param').lengthが$('object:first').find('param').lengthと同じ値になる問題がありその内容に関して調査してみました。 症…

そこそこ規模が大きくても何とかなるjavascriptの設計(URL dispatcherの薦め)

弁当生活始めました。agoです。 以前のjavascriptの開発はサーバサイドと同じPGが開発することが多く、機能をファイル単位で分割してそのページで必要なファイルのみを読み込むと言うことが行われていました。 ただ、最近はサーバサイドとクライアントサイド…

ブラウザ上で動作するjavascriptエディターの比較

衣替えしました。agoです。 最近使い始めて便利だなーと思ったので、ブラウザ上から入力されたjavascriptを実行してくれるオンラインjavascriptエディターを比較したいと思います。 jsdo.it http://jsdo.it/ 弊社運営のwonderflのJS版サイトです。 使い方 コ…

カーソルキーでエントリーを移動するjQuery pluginを作成しました

間食は大豆がメインです。agoです。 このブログでも使用している左右のカーソルキーでエントリーを移動するJSをjQuery pluginとして切り出したので紹介します。 使い方 jQueryと以下のJSを読み込んでください。 jQuery.keyscroll - GitHub 以下の内容をscrip…

canvasをバイト単位で修正する方法(ImageDataの使い方)

引っ越ししました。agoです。 思いっきりネタがかぶってますが、あまり気にせずcanvasネタを書いてみたいと思います。 今回はcanvasの中でもImageData関係をまとめて見ました。 ImageDataってなに? canvas内のバイト列を扱うためのObjectです。 canvas内の…

canvasでキラキラした背景を作る方法

tech.kayac.com、ささやかにリニューアルしました! tech.kayac.comをご覧の皆さん、はじめまして。意匠部ME課のfuchigamiといいます。 どうして技術部ブログに意匠部の野郎が?って感じですが、 技術部ブログのリニューアル記念ということで、ちゃっかりcan…

今更聞けないcanvasの基礎の基礎

はじめまして。新入りのnagataです。 入社式で自転車乗ってた野郎です。 先輩方から「ブログ、書いてね!」とのお達しがあったので、 日報で書いたらウケがよさげだったcanvasのことについて書いてみようと思います。 ※各種サンプルはMac上のSafari4.05、Fir…

mixi app framework mist.jsを開発しました

KAYACモバゲー参入に伴いAmazon Web Serviceと格闘中のagoです。 弊社ではPC版mixiアプリもいくつか作成しておりますが、今回そこで得られたノウハウを集めてmixiアプリ フレームワークを公開しました。 ソースコード github opensocialに関しては過去にjque…

jQuery1.4の新機能を1.4だけに14個

時が経つのは早いもので、ぼーとしてたらもう1月も終わりそうですね。外村です。 先日リリースされたjQuery1.4で新しく追加されたメソッドや新しい使い方ができるようになった機能を全部ではないですがいくつか紹介します。以下に変更点が全て掲載されている…

google map api+IE6で「未知の実行時エラーです。」が出るときに確認すること

最近ロフトで買った立体型のアイマスクが個人的にヒットでした。agoです。 今日はgoogle map api+IE6で「未知の実行時エラーです。」が出る場合の対応をご紹介したいと思います。 まず、IE6の場合、一部の要素のinnerHTMLが書き換え不可になっており、他のブ…

javascriptプログラマのレベル10

週末料理をしていて足を切ってしまいました。agoです。 以前Perlは書いていたんですが、その頃以下の記事を読んで非常に感銘を受けました。 Perlプログラマのレベル10 - Perlプログラミング救命病棟より - naoyaのはてなダイアリー 当時あまりコミュニティと…

Perlのローカルプロキシ紹介と見せかけてJS開発環境紹介

齢27にしてNirvanaをまともに聴き出したtaiyohです。 最近、ベースの他にギターも始めてみたのですが、本当に難しい… (個人の方含め)ブログ書くの本当に久しぶりです。 ちょうど今JavaScriptをがっつり使った案件に関わっているので、開発周りで小ネタを一…