株式会社一休 の技術ブログ

一休レストランの店舗ページをSPA化して Fastly で段階的リリースした話

この記事は一休.comアドベントカレンダー2018の13日目の記事です。 qiita.com こんにちは。 今年の7月に入社したレストラン事業部の渥美です。 一休.com レストランにてフロントエンドとバックエンドの開発を行なっております。 この記事の概要 店舗ページをSPA化した背景 店舗ページリニューアル プラン詳細ページのSPA化 Vue.js によるモーダルの実装方針 事前ロード モーダ

一休のUI/UXデザイナーとして私がやっている4つのこと

この記事は一休.comアドベントカレンダー2018の11日目です。 qiita.com はじめに デザイナーと聞いて、皆さんはどのような人を想像しますか? 「見た目を美しくかっこよく作れる人」、「ビジュアルデザインの専門家」というイメージを持たれている方も多いのではないでしょうか? デザイナーのアウトプットだけを見ればその通りですが、アウトプットに至るまでのデザ

Storybook を自作して「フロントエンドビルドが遅い問題」に立ち向かう

この記事は一休.comアドベントカレンダー2018の10日目です。 qiita.com こんにちは。レストラン事業部の所澤です。 WEBアプリケーションエンジニアとしてフロント/サーバー問わず機能開発を行っています。 今回は一休.com レストランの旧アプリケーションのフロントエンド開発環境改善についてお話します。 ※ この記事の執筆時点では以下の内容は master に取り込まれてい

Rundeck in practice [運用編]

この記事は一休.comアドベントカレンダー2018の9日目です。 qiita.com 導入編 に続き、運用編です。 ここ2年間 Rundeckを運用してきて発生したトラブルとその対処について書きます。 ※この記事で言及するRundeckはバージョン2.6.9です。 トラブルはふたつありました。 データベースが高負荷になり動作が不安定になった なぜかジョブが起動しない データベースが高負荷になり

ネット断食におすすめ!日帰り温泉・サウナも楽しめるSPA15選

この記事は 一休.comアドベントカレンダー2018 の7日目です。 こんにちは。スパ事業部 デザイナーの東根です。 約1年かけて10月25日にローンチした 一休.com スパ の 即時予約サービス をご紹介したいと思います。 SPAとは? 一休 .com スパの特徴・UIUXのポイント UIUXのポイント① 施設の魅力を伝える UIUXのポイント② プランの魅力を伝える UIUXのポイント③ 空き時間・予約時

Rundeck in practice [導入編]

この記事は一休.comアドベントカレンダー2018の6日目です。 qiita.com 一休では、2016年の10月から Rundeck を使ってバッチジョブの実行管理を行なっています。 導入からおおよそ2年たちました。 その間にデータセンターからAWSへの移行やいくつかの運用トラブルなどを経験しました。知見が溜まってきたので導入編と運用編の2つの記事に分けて紹介したいと思います。 今回は

Amazon Connect の導入と自社システムを連携した話

この記事は一休.comアドベントカレンダー2018の5日目です。 qiita.com こんにちは。 CTO室の村石です。 一休ではAmazon Connect を導入し、カスタマーサービスの一部コールセンターを新しい体制へと変えました。 今回は導入した Amazon Connect に関して、概要から導入後の運用まで幅広く話をしようと思います。 Amazon Connect とは AWSが提供するクラウド型のCTI *1 システムのことで、

サードパーティJavaScriptの最適化

本記事は、一休.com Advent Calendar 2018の4日目の記事です。 qiita.com 宇都宮です。宿泊事業本部でWebフロントエンドの開発をしています。 今日は、パフォーマンス改善に取り組むフロントエンドエンジニアの多くが頭を悩ませているであろう、サードパーティスクリプト(3rd Party JavaScript)について書きます。 サードパーティスクリプトとは サードパーティスクリプトとは、外部

VueコンポーネントのState管理を考える

この記事は一休.comアドベントカレンダー2018の3日目の記事です。 qiita.com 宇都宮です。宿泊事業本部でWebフロントエンドの開発をしています。 一休.comにVue.jsを導入して、約1年が経ちました。 スマートフォン版の予約入力画面 から始まり、PCとスマートフォン版のホテルページほか、さまざまなUIコンポーネントがVue.jsで実装されるようになってきています。 また、予約

SVGスプライトアイコンの作り方・使い方

この記事は一休.com アドベントカレンダー 2018の2日目の記事です。 qiita.com 宇都宮です。宿泊事業本部でフロントエンドの開発を行っています。 今回は、最近一休.comに導入した、SVGスプライトによるアイコンの作り方・使い方について紹介します。 StorybookのSVGスプライトアイコン一覧 アイコンの一般的な使い方 アイコンは、一般的に、以下のような方式で使用されると

Chrome Dev Summit 2018に参加しました!

この記事は 一休.comアドベントカレンダー2018 の1日目です。 こんにちは。レストラン事業本部の西村です。 11月12、13日にサンフランシスコで開催された Chrome Dev Summit 2018 に参加しました。 今年はChromeが10周年ということで、この10年で変わったこと、これからについての話で始まりました。 2日に渡って行われた22のセッションの中で、特に注目した点について深掘りして

イベント開催のお知らせ ~12/12(水) Ikyu Frontend Meetup~

こんにちは。今日はイベント開催のご案内です。 12/12(水) に一休.com / 一休レストランの開発事例についてのミートアップイベントを開催いたします。 Ikyu Frontend Meetup 今回は「フロントエンド開発」をテーマとして 一休レストラン スマートフォン検索ページのSPA化 一休.com スマートフォンホテルページのパフォーマンス改善 を軸にNuxt.jsの導入、コンポーネント設計、CSS

インフラエンジニアからSREへ ~クラウドとSaaS活用が変えるサービス運用のお仕事~

2018年4月、データセンター完全クローズ 一休は、今年の4月にデータセンターを完全にクローズしました。現在、すべてのサービスをAWSを使って提供しています。 この過程で各種運用ツールやビルド/デプロイのパイプラインなどをすべて外部サービスを使うように変更しました。 これによって、インフラエンジニアやサービス運用担当者の役割や業務が大きく変わりまし

一休.comレストランのスマートフォン検索ページがSPAになりました

一休.com レストランは今年の 7 月 18 日、スマートフォン向け検索ページのリニューアルを行いました。このエントリーでは、その中身について少し紹介させていただきます。 検索ページの課題 一休.com レストランではスマートフォン向け検索ページに対して「遅い」という課題意識がありました。これは技術面で少しブレイクダウンすると; パーソナライズドを含む複雑

一休.comスマホサイトのパフォーマンス改善(サーバサイドとQAとリリース編)

こんにちは。 一休.com の開発基盤を担当しています、akasakasです。 今回は、一休.comスマートフォンホテルページリニューアルをリリースし、パフォーマンスが改善した話を書きます。 概要編はこちらになります。 user-first.ikyu.co.jp JavaScriptパフォーマンス改善編はこちらになります。 user-first.ikyu.co.jp CSS・その他パフォーマンスチューニング編はこちらになります。 user-firs