こんにちは、面白法人カヤック フロントエンドエンジニアのごんです！ 今回は、Webの画像の軽量化について、フロントエンドチームで使ってるツールややり方をまとめてみました。 画像の軽量化などで困ってる方の参考になればと思います。 なぜ画像の軽量化をするのか Webサイトのローディング時間は、ユーザーの直帰率やコンバージョン率に関わる大切な指標です。 ローディング時間に関わる要因はさまざまですが、 特に画像は容量が大きいため、画像の軽量化をすることで表示速度の大きな改善を望むことが出来ます。 例えば、当ブログのある記事は、画像が全体の容量の約1/3を占めていました。 一般に、PhotoshopやIllustratorから出力された画像は、十分な色数やクオリティで出力されており、 ツールなどを使うことで、見た目をそれほど損なわず、容量を大幅に減らすことができます。 また、一部の画像形式には、メタ

こんにちは、HTMLファイ部新卒の石崎です。 今回は、Webページを画像化できるJavaScriptライブラリ、html2canvas について紹介します。 html2canvasを上手に活用することで、Webサイト側で表示ページのキャプチャを用意して処理したり、ユーザに提供したり出来るため、作れるWebサービスの幅がきっと広がります。 スクリーンショットを撮る html2canvasを使うとWebページのキャプチャを作れますが、そもそもスクリーンショットを得る方法は他にいくつもあります。 Webページの見えている部分のキャプチャをユーザが撮る Mac command + shift + 4 + space Windows Alt + PrintScreen このコマンドで、Webページのウィンドウに表示されている部分のキャプチャを撮ることができます。 スマートフォンであれば、端末の電源ボ

やっはろー(= ゚ω ゚)ノ 今年の3月、カヤックに中途入社した、 カヤックエンジニアの中で１番プログラムできないおじさんの町田（@machida-yousuke）と申します。 今回は、「映像業界?フロントエンド業界？が注目しているオープンソースライブラリ　bodymovin」について紹介します。 ちなみに私は、元某インターネット広告代理店の映像クリエイター兼フリーランスのモーショングラフィッカーでした。 ※この記事はAfterEffects（以下「AE」と称する）の基本的な操作、用語を理解している前提で進めていきます。 ※bodymovinのバーションは　V 4.6.10、AEのバーションはadobe AfterEffects cc 2017で進めていきます。 （V 4.6.10から使用言語によっておきるバグの修正がされています。） ※使用PCはMacです。 bodymovinとは AE

はじめに こんにちは。カヤックソーシャルゲーム事業部技術基盤チーム所属、Unityエンジニアの権と申します。普段はUnity用のツールや共通ライブラリーなどの開発を担当しています。よろしくお願いいたします。 この記事はカヤックUnityアドベントカレンダー2016の7日目の記事になります。 C#言語はいろんな場面でアプリを開発することができますが、プラットフォームごとに挙動の違いや特別な注意事項などがあります。今回はUnityの環境でC#を使うときに注意すべきポイントを紹介します。 NullReferenceExceptionをなくす NullReferenceExceptionはUnityでゲームを開発するとき一番出やすい例外です。特に実機で発生する場合は、アプリが動かなくなることもよくあります。NullReferenceExceptionは値がnullになってる変数にアクセスしようとす

AssetBundleの概要 はじめに こんにちは、Unityエンジニアの清水です。 この記事はカヤックUnityアドベントカレンダー2016の23日目の記事になります。 今日はAssetBundleの概要についてお送りします。 AssetBundleとは AssetBundleは複数のアセットを1つのファイルとして書き出したもので、ランタイムで内部のアセットを読み込むことができます。 主に、追加コンテンツの配信のために使われます。 公式ドキュメント 導入目的 前項の通り、AssetBundleを使うことでアプリのバージョンアップなしでアセットを追加、更新できます。 キャラクターやアイテムなど、運用を続けていると自然と増えていきますが、その度にアプリのバージョンアップが必要になると運用がだいぶ難しくなります。 そこで、そのようなアセットはAssetBundleから読み込むように作っておくこ

ガワネイティブアプリをつくろう！ こんばんは。カヤックのAdvent Calendar6日目は、@fnobiがお送りします。 最近の業務ではいけてるSDKを作るため、Javaを書いたりC#を書いたりC++を書いたりしつつ、 Webを作るのも大好きなのでJavasciptをがりがりしたりしています。雑食エンジニアです。 さて今回のブログですが、専門的な話をしても、弊社のもっと専門的な人に踏み潰されそうな予感がするので、 こちらも雑食な話をしようと思います。 テーマはズバリ、 ガワネイティブアプリです！ ガワネイティブアプリとは ガワネイティブとは 「側ネイティブ, ガワだけネイティブ, ガワだけアプリ, ハイブリッドアプリ」： - IT用語辞典バイナリ ガワネイティブアプリとはつまり、 ガワ(外側)はスマホアプリとして書くけれど、コンテンツはほとんどWebViewっていうアプリのことです。