rel=”preload”を極めるために必要な2種類のプリロード機能
本稿はWebパフォーマンス Advent Calendar 2019の13日目に参加させていただきました。 フロントエンドのパフォーマンスチューニングのシリーズ記事で、今回は2種類のプリロード機能に焦点を当ててリソース読み込みの最適化について解説します。 はじめに まずはブラウザが持つ2種類のプリロード機能をおさらいしましょう。 1つ目はHTMLの仕様として定義されている <link
2019.12.12
超簡単！超軽量！LottieでWebアニメーションが捗る
今回ご紹介するのはWebアニメーションライブラリ「Lottie」です。 リッチなUXを実装したいけど、以下のようになかなか手が出せない方もいらっしゃるのではないでしょうか？ デザイナーにはJavaScriptの学習コストが高い エンジニアにはデザイナーの求めるような動作をなかなか表現できない デザイナーとエンジニアの得意分野を切り分けるために動画で表現しようとするとどうしても重くなる しか
2019.12.5
Photoshopの作業中、急に画像の色がくすんだ時に行う3つの対処法
Photoshopで作業中に、急に画像の色が変になって困ったことはありませんか？ ↑Photoshopに画像を配置後、赤丸で囲んだ部分の色味がくすんで、部分的に灰色で飛んでしまいました。 画像の色が変になったらやってみよう。対処法3選 ▼【方法1】Ctrl+Y（色の構成）を解除してみる ▼【方法2】trl+Shift+Y（色域外警告）を解除してみる ▼【方法3】プロファイル変換＞RG
開発合宿でミッション性のある開発を！@湯河原温泉 おんやど恵
今回は「ラクーンでも開発合宿をやってみよう！」というノリと勢いで開発合宿に行ってきたことのレポートになります。 開発合宿の目的 ”ノリと勢い”とはいえ、勿論目的はあります。決して温泉に浸かりたいとか、美味しいものが食べたいとか、たまには旅行したいよねとかそんなことだけ思ってるわけではありません！ 1. いつもと違う環境で思う存分目的の開発に打ち込む 弊社はサービスの保守をしつつ新規機能や新
SEOの過去・現在・未来、そして心得
ふと過去に執筆した記事を振り返ったのですが、フロントエンドのパフォーマンスの話・bashのプロセス置換・Androidアプリのパフォーマンス・DoS攻撃対策などなど、記事の方向性が毎回バラバラすぎて自分は何の専門なんだろう？と疑問に思えてきました。 まあそれは気にしないとして、今回もご多分に漏れず今までの記事とは全く異なる領域の話です。 話のベースはSEOについてですが、 心得 とか 考え方
フェードイン・アウトのスライドメニューをCSSアニメーションで簡単に実装！
今回は弊社サイトにて実装したCSSアニメーションをご紹介しようと思います。 少々前にサービスサイト「URIHO」のリニューアルを行い、私はマークアップエンジニアとして携わりました。 さて、本稿ではスマホ・タブレットのヘッダの動きに関して取り上げようと思います。 見てもらいますとメニューをクリックした後に左から右へスライドし、中のリンク達がずらら～っと表示されます。 実はこれ全てCSSのみで
2019.10.31
第13回社内LT大会を開催しました
先日第13回LT大会が開催されました。 今年度は全3回の予定で今回が初回になります。 今月リリースしたばかりの消費税増税対応の時事テーマから、DevOpsの取り組み、技術調査の報告など今回もバラエティに富んだテーマが揃いました。 今回の発表テーマ ALEMOのM&A後にやったこと 消費税PJ概要 PaidってOpenAPI使ってないの？ by利用検討中の企業さん 人間らしさとはなに
エンジニア出身者がデザイナーの業務と出会って得た５つのこと
今回は元々はエンジニア出身者の私が、デザイナー部署のマネジメントをするようになったことで得たことをまとめてみたいと思います。 私は元々は運用周りなどを好んで担当するエンジニアをしていましたが、ここ最近のキャリアでは開発チームのマネージャ、いわゆるVPoE的な役割を担当してきました。ところがちょっとした大人の事情から２年程前よりデザインチームのマネジメントも担うことになりました。私はデザインという
Vue.jsが採用しているMVVMパターンとは【目的を重点に解説】
弊社で開催した勉強会"速い"Webアプリケーションの作り方でLTを行いましたので、内容をまとめました。テーマはデザインパターンの一つMVVMパターンです。 MVVMパターン 速いウェブアプリケーションについて調べていくと、MVVMパターンというデザインパターンをよく見ます。 代表的なところだと、Vue.jsがMVVMパターンです。 MVVMパターンって何だろうと調べると、このような図で説明
2019.10.4
【Software Design誌コラボ企画】『“速い”Webアプリケーションの作り方』を開催しました！
弊社テクニカルディレクターの羽山が『Software Design』10月号の特集記事を執筆させていただいたご縁で、 技術評論社様にもご協力いただき開催となったこの企画。 多数の方にご参加いただき、無事開催することができました。 登壇者の皆様、技術評論社の中田さん、 忙しい中参加していただいた皆様、ありがとうございました！ 左から合同会社レッドボックスの小川さん、スパイスファクトリー株式会
2019.10.2
SVGにCSSやJSを組み込んでローディングアニメーションを作成する！
今回のネタは「SVG」です！ 皆さん、SVG使ってますか？？ SVG形式の画像って、拡大しても荒くならないとか、ロゴとかによく使われているとか、そういったイメージを持っている方が多いかもしれません。 良く使われているjpgやpngなどの画像形式との比較を簡単にまとめるとこんな感じになります。 特徴 SVG（ベクター画像） jpgやpng（ラスター画像） 長所
2019.9.30
彼女との食事をUX的に考えると面白い、という話
今回はUXを身近に感じられるエピソードをご紹介したいと思います。 話のポイント UX（User Experience）はユーザー体験の意 ユーザーがサービスやプロダクトに接しているときの体験全体を総称する言葉 サービスやプロダクトのUXを考えることの重要性は高まっているが、難しいと思われがち でもそのユーザーを家族、友人、恋人など身近な人に置き換えて考えると分かりやすい、という話です 例
2019.9.27