こんにちは、フロントエンドエンジニアの権守です。 既にお気づきの方も多いと思われますが、こちらのテックブログは今月から装いを新たにしています。これは 先日行った弊社コーポレートサイトのリニューアル に合わせたものです。 この記事では、今回行ったコーポレートサイトリニューアルについて実装面から紹介します。 特徴 今回のリニューアルの特徴は以下の3つです。 Vue.jsによるSPA (Single Page Application)としての実装 レスポンシブ対応 アニメーションによるリッチな表現 それぞれにつ

6月29日、Enterprise APIs Hack-Night #10が開催されました。このコミュニティは企業におけるAPI活用を啓蒙、ナレッジをシェアしていくというものです。今回は原点回帰し、Enterprise APIがテーマとなっています。 こちらはそのレポート記事になります。 富士通による社内API化の取組み by 富士通株式会社　鈴木 弘樹さま 富士通ではプライベートクラウドの中でApigeeを採用しています。そしてクラウドサービスとしてAPIマネージメントを提供し、お客様含めてエコシステムを

こんにちは！制作部 デザイナーの森本です。 最近は、スマートフォンなどの端末の解像度が上がってきているため、アイコンであっても大きな画像が必要になりますが、多用するとページの描画速度の低下にも繋がってしまいます。 そこで、画像を多用せずとも高解像に対応できる「アイコンフォント」を簡単に作る方法をご紹介いたします。 今回は最近使ってみて一番シンプルで使いやすいと感じたジェネレーターサイト「IcoMoon」を使い、 SVGからアイコンフォントを作成していきます。 IcoMoonとは？ SVG形式のアイコンデー

エニグモ でWEBエンジニアをやっております、大宮です。 今回は、先日英語版 BUYMA で行った、AMP対応についてまとめた記事をお届けしたいと思います。 そもそもAMPとは？ Acceralated Mobile Pages の略です。 その名称が示す通り、モバイル端末で高速なWebページを表示させるためのプロジェクト、またはそのための フレームワーク (AMP HTML)の事です。 フレームワーク は Google と Twitter により共同開発されています。2016年の2月にローンチされて以降

こんにちは、Webフロントエンドエンジニアの権守です。 弊社では200以上の提携ECサイトから集めた大量の商品写真を取り扱っています。そのサービスの性質上、画像配信の最適化は非常に重要な課題の1つです。今回は最適化の一環として画像のレスポンシブ対応を導入しましたので、その際に調査した内容やハマったポイントなどを紹介します。 はじめに RetinaディスプレイなどのDPR（Device Pixel Ratio）の高いディスプレイの普及に伴い、Webサービス側でもその対応が必要となっています。基本的には高解像

メディアシステム開発部の野崎です。 メディアシステム開発部では、「 au Webポータル 」や「 au スマートパス 」といった、 多くのユーザ様にご利用頂いているサービスを担当しています。 このようなシステムでは新規開発や機能追加時には負荷試験を実施することは必須となります。 そこで今回は、Webシステムの負荷試験について 負荷を生成する環境にフォーカスして、 これまで行ってきたノウハウをまとめてみます。 はじめに 負荷試験と言われるものには幾つか種類があります。 性能試験、耐久試験、限界試験、ロードテ

こんにちは、Androidエンジニアの堀江です。最近はiOSのプロジェクトに参加してSwiftを書いています。新しいことを始めるのは楽しいですね。 ところで今ご覧になられている弊社の技術ブログ「 VASILY DEVELOPERS BLOG 」は、VASILYのエンジニアが交代で更新しています。記事に何を書くかは各エンジニアの裁量に任されていますが、公開前に社内でレビューをするようにしています。 レビューをする際には、以下のような点に注意しています。 誤字脱字・文法上の間違いが無いか 間違った情報が無いか

アプリやWebサービスをグローバル展開する中で翻訳は欠かせません。単語単位で翻訳できるもの、HTMLをまるごと翻訳できるものなど様々に存在します。今回はそんな翻訳APIをまとめて紹介します。 Microsoft Translator - Built for enterprise Microsoftの提供する翻訳サービスで、個人用と業務用に分かれて提供されています。業務用はCognitive Servicesの一サービスとして提供されています。 Microsoft Translator - Built fo

こんにちは、フロントエンジニアの茨木です。 本記事ではRailsアプリでクロールディレクティブを安全・効率的に設定する仕組みをご紹介したいと思います。 Web上にあるページは、クローラーと呼ばれるロボットに巡回されて検索エンジンにインデックス登録されます。大規模なサイトにおいてはページを効率よくインデックス登録させる必要があります。その際にクロールディレクティブと呼ばれる様々な設定が必要ですが、管理が複雑になってきます。この問題に対して、VASILYでの解決方法をご紹介します。同じような境遇の方々の参考に

フロントエンジニアの苅部です。 medibaシステム本部では一部サービスのA/BテストをGoogle Optimize(以下Optimize)で実施しております。 先日Optimizeの一般利用が可能になったようですので、これから初めてA/Bテストを実施する方に向けて、使用感を共有できたらと思います。 Optimizeの特徴 1. 無償版でも十分使える 無償版でもほとんどの機能が利用できるため、予算のないプロジェクトでもすぐに実践的なA/Bテストが開始できます。 実際にOptimizeを使ってA/Bテスト

こんにちは！　バックエンドエンジニアのりほやんです！ 2017年の2月28日にIQONはリブランディングを行い、タグラインを "わたしの「好き」がここにある” に刷新しました。 この “わたしの「好き」がここにある” という体験をユーザーにしていただくには、IQONに掲載されている商品情報がとても重要になります。 そして、正確な商品情報の掲載にはクローラーが正しく運用され稼働していることが必要不可欠です。 本記事では、IQONの商品情報を支えるクローラーの運用をどのように仕組み化しているかについてご紹介し

こんにちは、制作部 松本です。 私はこれまでCSSレイアウトで display プロパティ用いる際、 inline-block や table 、 最近では flexbox を使用してきました。 今でも float を多用している方はあまりいないのではないかと思います。 本記事では、よりフレキシブルなレイアウトが実現できる grid について紹介します。 grid は複雑なため、まだ体系的に全ての機能を説明できるほど私の理解も追いついていないので、今回はざっくりとした紹介となります。 対応ブラウザ 201

わーい！コンテナたのしー！🐾 こんにちは。流行りには積極的に乗っていきたい。インフラエンジニアの光野です。 弊社が運営するファッションサイト IQON では、日々200以上の提携ECサイトから100万のオーダーで商品をクロールしています。 新商品の追加・商品の在庫状況・セールの開催など情報は日々変化するため、弊社において「正しくクロールすること」と「速くクロールすること」は肝心カナメの要素です。 本記事では、特に「速くクロールする」という目的で構築した コンテナベースの新クローラーシステム を紹介いたしま

APIStudy #5参加レポート 2月21日、高円寺のヴァル研究所にてAPIStudy#5が開催されました。これはAPI設計のベストプラクティスを皆で考えるというLTとワークショップの形式で行われている勉強会になります。 今回はその参加レポートになります。 APIを巡る動き まず最初に主催であるアプレッソの脇野さんによる発表がありました。この1、2月の間にAPI関連のニュースをよく見るようになったそうです。例えば次のようなニュースがありました。 デバイスAPIはどこまで使える？最新事情を紹介──HTML

こんにちは、Webフロントエンドエンジニアの権守です。 フロントエンドエンジニアの皆さんは、リリース前の社内QAにてデザイナーにピクセルのずれを指摘されて修正したという経験があるのではないでしょうか。今回はiQONのPC・スマホサイトを構築する上で、デザインデータに忠実なCSSコーディングをどのように実現しているかを紹介します。 ツールの利用 PerfectPixel 既に利用されている方も多いかもしれませんが、デザインとのピクセルずれの確認には PerfectPixel がオススメです。 Perfect