javascript

フロントエンド開発に Babel も Webpack も必要ない ※

できらぁ! 面白法人カヤックのエンジニアのごんです。 昨今のフロントエンドといえば、 Todo アプリを作るにも Webpack やら Babel やら必要だと脅され、 始める前にうんざりしてしまうと話題ですが、 実は、最新のブラウザに限って言えば、そんなことはな…

中〜大規模なSPAを開発する時に抑えておきたい10のポイント

こんにちは。カヤックのSPAおじさんこと島津です。 今年はReactとVueを使ったSPA開発プロジェクトをいくつか担当してきたので、そこで得た知見の総まとめをしたいと思います。 ※ ここでのSPAとはすべてのViewをJavaScriptで書くWebアプリのことを指します。…

【WebGL】シェーダーを使って3D空間でスプライトアニメーションさせる

この記事は、Tech KAYAC Advent Calendar 2017 の19日目の記事です。 こんにちは!カヤックのクライアントワークチーム・フロントエンドエンジニアのふかぽん です。WebGLを用いた3Dコンテンツを制作させていただくことが多いです。 過去のアドベントカレン…

すごい勢いでモックを作るノウハウを共有しよう【Webゲーム開発】

この記事で伝えたいこと Web上でゲーム作る際に、モックづくりで役立つ設定や注意点とかとかとか つくったもの デモ:https://hkitahara.github.io/pages/techblog171218/index.html 作業時間:8.5h コメント:100点目指して頑張ってください. (デザインは…

Vueの単一ファイルコンポーネント+TypeScript+Hot Module Replacementの環境を作ってみた話

こんにちは!ファイ部の ひめの です。 この記事はTech KAYAC Advent Calendar 2017の15日目の記事です。 さてさて、今年JSフレームワークとして多くの注目を集めたVue.jsですが、v2.5のリリースで、TypeScriptのサポートが強化されました。 (2017/10/14) こ…

細かすぎるけど伝わって欲しいlodash.jsの話

ギリギリの時間にこんばんは、12/2のアドベントカレンダーは、HTMLファイ部ののびーがお送りします。受託事業でWebフロントを書いたり、テクニカルディレクションをやったりしている人です。 さて今年はさっくりと、常日頃からお世話になっているlodash.jsと…

動的コンテンツを画像化できるJSライブラリ "html2canvas" を使おう

こんにちは、HTMLファイ部新卒の石崎です。 今回は、Webページを画像化できるJavaScriptライブラリ、html2canvas について紹介します。 html2canvasを上手に活用することで、Webサイト側で表示ページのキャプチャを用意して処理したり、ユーザに提供したり出…

【お詫びと訂正】iOS11でついにSafariからカメラにアクセスできるようになりました。(コピペで動くサンプルコード付き)

お詫びと訂正:(2017/06/08 23:32) 本記事内に掲載しているスクリーンショットが、 Apple.Incの開発者利用規約(APPLE BETA SOFTWARE PROGRAM AGREEMENT APPLE INC.)に抵触しているというご指摘をいただきました。 Apple.Incの開発者利用規約から、掲載内…

svg / canvas出力ができるbodymovinの紹介

やっはろー(= ゚ω ゚)ノ 今年の3月、カヤックに中途入社した、 カヤックエンジニアの中で1番プログラムできないおじさんの町田(@machida-yousuke)と申します。 今回は、「映像業界?フロントエンド業界?が注目しているオープンソースライブラリ bodymovin…

React Componentのスタイルガイドを自動生成してパーツの再利用をしやすくする

こんにちは。カヤックのReactおじさんこと島津です。 最近はVue.jsにも浮気し始めましたが、Reactについての記事を書きます。 Reactのコンポーネントが増えてきて管理が大変 Reactを使うとコンポーネントの部品化が捗りますが、 開発規模が大きくなってくる…

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が既に取得でき…