html5

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

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

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

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

firebaseでカルタつくった話

おはようございます!こんばんは! Tech KAYAC Advent Calendar 2017の9日目の記事をお届けします。 受託事業部でWebフロントエンドエンジニアをしております、新卒2年目のゆみこふ @yumikokh です。 はじめに 今年9月に開催されたHTML5CONFERENCE2017で、…

フロントエンドの画像軽量化まとめ【2017年版】

こんにちは、面白法人カヤック フロントエンドエンジニアのごんです! 今回は、Webの画像の軽量化について、フロントエンドチームで使ってるツールややり方をまとめてみました。 画像の軽量化などで困ってる方の参考になればと思います。 なぜ画像の軽量化を…

フロントエンジニアにぜひ読んでもらいたい、グラフィックデザインに関する書籍のご紹介

やっはろー(= ゚ω ゚)ノ カヤックテックブログ2回目の登場、UIよりUXが優れた人間になりたいフロントエンジニアの町田と申します。 前回の「svg / canvas出力ができるbodymovinの紹介」は、好調な出だしで、現在「bodymovin」で検索すると4番目に表示されま…

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

こんにちは、HTMLファイ部新卒の石崎です。 今回は、Webページを画像化できるJavaScriptライブラリ、html2canvas について紹介します。 html2canvasを上手に活用することで、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種類のデザインから自分の好きなテーマに切り替えて…

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

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

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

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

SWF on iPhone!「FlashForward」

※Chromeで本文エリアをスクロールするとエラーになるそうです。ごめんなさい! こんにちは!1年間自転車通勤を続けた結果、健康診断で「おっ!」と言われて大満足のaragaです! SWFをiPhone上のSafariで動かすプロジェクト「FlashForward」をgithubで公開し…

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

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

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

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

JavaScriptで画像のオフラインキャッシュを実装する

もうすぐクリスマスシーズンなんですかね?本間です。 巷で話題のイケメンホイホイ(以下イケホイ)ですが、このたびiPhone用サイトがオープンしました。 それにあわせて新機能も搭載!イケメン写真にタグを付ける機能と、iPhoneでぼんやり眺めているだけで…