lazyだけどlazyじゃない!速いページで快適なお買い物体験を

こんにちは。ASKULの はんだ と申します。

普段はLOHACOというECサービスのフロントエンドの開発をしています。

先日、LOHACOのスマホサイトトップ画面(以下、SPトップと呼びます)をリニューアルしました!!

お気づきになられた方いらっしゃいますでしょうか? 具体的に何が変わったのか、どう良くなったのかをご紹介していきます。

続きを読む

D3.js を使ってお客様の声を可視化する

はじめまして。UX デザインの山崎と申します。

先日、UX デザインチームの勉強会を新宿にある TSUTAYA BOOK APARTMENT さんで実施してきました。

勉強会のテーマは、「メンバー各自業務関係有無に関わらず興味のあることについて勉強」という内容。

会場の様子を少しご紹介しようと思います。

↓ 本がたくさんあるおしゃれ空間です。気に入った本は購入できるそうです。 uxd勉強会

↓ オプションですが女性専用エリアもあります。(ありがたく使用させていただきました)
ドリンクも飲み放題! uxd勉強会

↓ WEB デザイン関連の書籍もありました。CO WORKING スペースは集中できそうですね。
(男女共用エリアは夕方以降、カップルで賑わうそうです) uxd勉強会

本を読みながらのんびりしたい気持ちを抑えつつ、各自勉強に取り掛かります。

せっかくなので業務ではふれる機会のないことを勉強したいと思い、D3.js を使って何かを作ってみよう!と思いました。

Data Driven Documents

続きを読む

IntelliJ IDEAでインテリジェントなアイディアを

こんにちは。アスクルの こたにん (@Kotanin0) と申します。

LOHACO のフロントエンド開発・エンジニア採用・社内環境整備などを担当しております。

今回は、弊社エンジニアが利用している統合開発環境 IntelliJ IDEA のご紹介とともに

先日 6/29(金) に、株式会社サムライズム 代表の 山本ユースケ様(@yusuke)を講師にお招きし開催した

IntelliJ IDEA ハンズオンセミナーのレポートをお送りいたします。

続きを読む

季節のAMPテンプレート

こんにちは。UXデザインの土橋です。

すっかり暖かくなり行楽シーズンになってきました。
お子様のいらっしゃる方は特に外出する機会も増えていると思います。

そんな中旅行やピクニックの計画を立てながらお弁当箱や水筒、レジャーシートなど買い揃える際
ついついAMP対応したHTMLテンプレートを用意し忘れてしまう..という方も多いのではないでしょうか。

そんな方のために今回はAMP規格に準拠したHTMLテンプレートの生成タスクをgulpで構築してみようと思います。

AMPとは

AMP(Accelerated Mobile Pages)はモバイルサイトのUX向上を目的にGoogleが主導で開発・推進しているオープンソースのプロジェクトでありフレームワークの名称でもあります。
2016年2月にGoogle、2017年11月にYahoo!のモバイル検索アルゴリズムに組み込まれたことで浸透・注目され始めたのですが、ASKULでも表示速度の鈍重さが課題として挙がる事も多くなりUX改善の打開案として無視できなくなってきています。

AMP対応ページは、サーバーリクエスト数の削減や検索結果画面におけるファインダビリティ向上などwebコンテンツのボトルネックを解消するため独自のルールに準拠した実装が求められますが、厳密なルールが存在するということはフローを順序立てれば実装手順も明瞭に整理できるということです。
そこで、実装手順を整理・フロー化しAMPテンプレートを生成するタスクをつくってみます。

実装の流れ

Node.js、gulpと併せ各モジュールとファイルを用意(インストール)し順にタスクを回します。
流れとしてはjsonから基本構成、scssからスタイル情報を吸上げejsに流し込んで生成するというものになります。

取り入れるルール

  • スタイルは特定箇所にインラインで挿入
  • AMP js(独自コンポーネント)の利用
  • 検索結果スニペット用JSON-LDによる構造化データの記載
  • 独自仕様のマークアップ
続きを読む

ES5なJavaScriptをESLintとPrettierで改善する

こんにちは。ASKULの なかむら と申します。

普段はLOHACOのフロントエンド寄りな開発を担当しています。

突然ですがJavaScriptをES201xで書いてますか?

最近のJavaScriptの技術記事ではES201x&BabelかTypeScript/Flow等のAltJSを使うのが当然になっている印象を受けます。

・・・ですが、古くからあるサービスではなかなか移行に踏み切れなかったりもする訳です。

最新フロントエンド技術を導入したいなぁと思いつつ、後回しにしてES5で開発を続けている現場もまだまだ世の中多いのではないかと思います。

私の担当するLOHACOでもES5とjQueryで書かれた古いJavaScriptのコードが至るところに存在しており、ES201x化/AltJSの導入には至っていません。

ツールなら導入できる

とはいえ近年進化し続けるJavaScript開発ツールの恩恵にあやからないのは勿体ないものです。

コード本体に手をいれるのは難しくても、ツールの導入で開発を便利にしていくことは可能です。

特にLintツールやコードフォーマッタの導入は

  • 余計なレビューの工数を減らせる
  • コードの品質を即向上させることができる

ので現場への導入も周りの賛同を得やすいのではないでしょうか。

以下、LOHACOでどんな取り組みをしてきたのかご紹介します。

続きを読む

アスクルエンジニアリングブログを開設しました!

はじまり

はじめまして。アスクルの さとうだいすけ です。

アスクルの技術を世の中に発信していこう!
アスクルのエンジニア文化を創っていこう!
ということでアスクルエンジニアリングブログを開設いたしました!!

アスクルがなぜ今更?と思う方もいるかも知れません。
実はアスクルはピボットの時期を迎えているのです。

テックカンパニーを目指す

アスクルは2年ほど前から「テクノロジーファースト」を掲げています。そして、目指すテックカンパニーへの道のりを駆け抜けようとしています。

まず一歩目!
アスクルエンジニアリングブログを開設したという訳です。

アスクルのエンジニアリング組織のスタートについては、ECのミカタさんにも記事を書かせていただきました。

ecnomikata.com

アスクルはWEBだけではなく、倉庫や配送といった物流までもテクノロジーで進化させようとアクションしています。
フルフィルメント ✕ テクノロジーという、他では見られない組み合わせで、おもしろいブログ、エンジニアリング組織を目指していきます!

続きを読む

ASKUL Engineering BLOG

2021 © ASKUL Corporation. All rights reserved.