Web

HTML5における画像のレスポンシブ対応方法まとめ

Web

こんにちは、Webフロントエンドエンジニアの権守です。 弊社では200以上の提携ECサイトから集めた大量の商品写真を取り扱っています。そのサービスの性質上、画像配信の最適化は非常に重要な課題の1つです。今回は最適化の一環として画像のレスポンシブ対応…

Railsアプリでクロールディレクティブを安全・効率的に設定する仕組み

こんにちは、フロントエンジニアの茨木です。 本記事ではRailsアプリでクロールディレクティブを安全・効率的に設定する仕組みをご紹介したいと思います。 Web上にあるページは、クローラーと呼ばれるロボットに巡回されて検索エンジンにインデックス登録さ…

デザインデータに忠実にCSSコーディングするためのテクニック

Web

フロントエンドエンジニアの皆さんは、リリース前の社内QAにてデザイナーにピクセルのずれを指摘されて修正したという経験があるのではないでしょうか。今回はiQONのPC・スマホサイトを構築する上で、デザインデータに忠実なCSSコーディングをどのように実現…

AMPの導入と効果について

Web

こんにちは、エンジニアの荒井です。 2016年はAMP(Accelerated Mobile Pages)の正式サポートがアナウンスされ、導入した方も多いのではないでしょうか。VASILYでもAMPを導入し数ヶ月運用しています。AMPの導入に関しては、関連記事も多く存在しますが、導…

CSSコーディング規約を導入して1年半運用した話

Web

フロントエンジニアの茨木です。 皆様はCSSを書く際にコーディング規約を意識しているでしょうか。かつて、弊社にはCSSのコーディング規約が存在せず、CSSファイルの肥大化・クラス命名規則の不統一が発生していました。メンテナンスが難しくなってきた為、1…

JavaScriptで商品画像の拡大プレビュー機能の実装

今回は弊社で開発中の新サービスで実装した商品画像の拡大プレビュー機能の実装について、その方法を順を追って説明します。

iQONのviewportを一気に書き換えた話

Web

フロントエンドエンジニアのnibaです。 先日、iQONのスマホページでviewportの改善を行いました。 その際の技術選定や工夫について述べていきたいと思います。

WebアプリのAPIリクエスト効率化

iQONのWebアプリのAPIリクエスト部分の仕組みを改善したことについて紹介します。

Facebook ネイティブアドのスマホサイトへの導入方法

Web

Facebookがモバイルページ向けのAudience Networkをオープンβで開始していたので、提供されている形式の一つであるネイティブアドを試してみました。

3ヶ月でDAUを倍にしたサイト最適化の話

Web

Merry Christmas! フロントエンド開発の荒井です。今回はフロントエンド開発陣が3ヶ月で行ったサイト最適化を紹介したいと思います。短期間で多くの変更を施したため、今回は取り組みやすく、特に大きなインパクトがあったと思われる内容2つを紹介します。 …

iQONのエラーレートを0.003%以下まで減らした話

Web

VASILYのWebフロントチームがWeb版iQONのエラーレートを0.1%から0.003%以下まで減少させた際に、行った取り組みについて紹介します。今回行った取り組みはAPIモックを用いたテストの廃止、テストの高速化、New Relicの活用です。