この記事は一休.com アドベントカレンダーの24日目の記事です。 qiita.com 社内情報システム部の大多和（id:rotom）です。 一休には2018年8月に入社し、情報システムエンジニアとして、IT を活用した業務改善、オフィス環境の構築を中心とした社内の「情シス」業務全般を担当しています。 本エントリでは、表立って登場することの少ない「情シス」が普段何をしているか、ご紹介していきます。 情シスのお仕事 社内情報システム部は「システム本部」に所属しており、現在 6人 のメンバで業務を行っています。 一休における情シスは以下の2つの側面を持っています。 コーポレートエンジニアリング：社内ツールやシステムの導入及び管理運用、bot やスクリプト開発による業務の効率化などの業務改善の他、オフィスの IT インフラ環境の構築、改善など、IT を活用し、より社員がよりパフォーマンスを発揮で

この記事は一休.com アドベントカレンダーの20日目の記事です。 qiita.com はじめまして、宿泊サービスのUIデザインを担当しています河村です。 一休のデザイナーは部署ごとに在籍チームが異なります。私は長い間、営業企画部デザイナーとして働いていましたが、今年4月よりプロダクト開発部UIデザイナーとして働いています。（本ブログでは、前者をWebデザイナーとします） WebデザイナーとUIデザイナーをやってみて、多くのことが「違った」ので、どんな違いなのかをお話させていただきます。 目次 １） 仕事内容の違い ２） 必要なスキルの違い ３） 仕事の進め方の違い ４） まとめ 仕事内容の違い ビジュアル表現に特化 一休のWebデザイナーの主な業務内容は、トップページなどの更新作業、施設紹介ページ、特集・企画販促ページ、メールマガジン等の作成です。ページ全体のビジュアルを管理しているので

この記事は一休.com アドベントカレンダーの18日目の記事です。 qiita.com こんにちは。 社内情報システム部の下村です。 一休ではOfficeITに関する全ての業務、改善を担当しています。いわゆる情シスです。 本日は、一休の情シスが行ってきた活動のうち、開発者ブログらしく社内向けのSlackツールを開発(?)したことについて記載したいと思います。 どんなツールを作ったのか？ 一休ではコミュニケーションツールとして、非エンジニアであってもSlackが活用されています。 そのSlackを使って、 「ちょっとしたことを検索できるbotがあれば便利なんじゃないか？」 と思い 社内向けに提供しました。 具体的には下記のようなことがSlack上で検索できるようにしています。 内線番号や、メールアドレスなどの社員情報を検索。 「座席表」や「無線LANのキー(パスワード)」などのURLを検索。

この記事は一休.com アドベントカレンダーの17日目の記事です。 qiita.com 宿泊事業部のいがにんこと山口です。 UIUXチームでフロントエンド、バックエンドのアプリケーション開発を担当しています。 一休では宿泊事業とレストラン事業があります。 私が所属する宿泊事業では開発言語にC#とVB.NETを使用しています。 その背景から開発にはWindowsを使っています。 普段MacやLinuxでWeb開発しているWebエンジニアにとってはWindows、C#を使ったWeb開発はあまり馴染みがないかもしれません。 そこでそんな方向けにWindows、C#を使ったWeb開発についてお話したいと思います。 C#について まずはC#について。 C#に触れたことのない方はどんなイメージを持っていますかね？ Microsoft製？Javaみたい？使っている企業は？ 色々なイメージがあるかと思いま

本記事は、一休.com Advent Calendar 2018の16日目の記事です。 qiita.com デジタルマーケティング部で主に宿泊サイトを担当している田中(id:yakisoba6318)です。 今回は今年2月に導入したAMPについて導入時と今について紹介したいと思います。 内容に関しては主に宿泊サイトの話となります。 AMPとは？ AMPとは、Accelerated Mobile Pages （アクセラレイティッド・モバイル・ページ）と言い、主にGoogleが提唱しているモバイルウェブ高速化を目的としたプロジェクトです。 ここではそのAMPプロジェクトのオープンソースフレームワーク（AMP HTML）を指してAMPと言います。 www.ampproject.org 一休.comにおけるAMP導入動機 ランディングページのスピード改善 速度改善による流入の増加 ユーザ体験向上

この記事は一休.com アドベントカレンダーの14日目の記事です。 qiita.com こんにちは。 id:kentana20 です。一休で宿泊サービスの開発をしています。 今日は一昨日の夜に実施したイベント「Ikyu Frontend Meetup」の様子をレポートしたいと思います。イベントページはこちら。 ikyu.connpass.com 年末の忙しい時期にもかかわらず、多くの方にご応募・ご参加いただきました。 今回のイベントのきっかけ 過去に2度、一休ではテック系イベントをやっていましたが、「ぼちぼちまたイベントやりたいな〜」と思っていたときに、 id:supercalifragilisticexpiali が書いた user-first.ikyu.co.jp を見た他社のエンジニアの方から「情報交換しましょう」と複数問い合わせや依頼があったので、イベントにしてしまおう、と思って今

この記事は一休.comアドベントカレンダー2018の13日目の記事です。 qiita.com こんにちは。 今年の7月に入社したレストラン事業部の渥美です。 一休.com レストランにてフロントエンドとバックエンドの開発を行なっております。 この記事の概要 店舗ページをSPA化した背景 店舗ページリニューアル プラン詳細ページのSPA化 Vue.js によるモーダルの実装方針 事前ロード モーダルの開閉 URLを動的に生成する Fastly での段階的リリース Fastly について VCL の設定 Fastly Fiddle によるテスト 今後の展望 店舗ページをSPA化した背景 店舗ページリニューアル 私が一休に入社する1ヶ月前、店舗の情報は複数のページにまたがっていました。 具体的には、店舗のページはプラン一覧や店舗情報、アクセスマップなどの情報が別々のタブに分かれており、ページ遷移

この記事は一休.comアドベントカレンダー2018の10日目です。 qiita.com こんにちは。レストラン事業部の所澤です。 WEBアプリケーションエンジニアとしてフロント/サーバー問わず機能開発を行っています。 今回は一休.com レストランの旧アプリケーションのフロントエンド開発環境改善についてお話します。 ※ この記事の執筆時点では以下の内容は master に取り込まれていません。同僚のフロントエンドエンジニア（ガチ勢）から何か指摘があったら追記します。 この記事の概要 一休.com レストランの旧WEBアプリケーション（以下 restaurant1 ）はなぜかフロントエンドビルドが超遅い。 Storybook のようなアプリと切り離された、高速でビルドできる環境があればもっと快適に開発できるのではないか？ Storybook だと vue-devtools が使えないので S

この記事は一休.comアドベントカレンダー2018の7日目です。 こんにちは。スパ事業部 デザイナーの東根です。 約1年かけて10月25日にローンチした一休.com スパ の即時予約サービス をご紹介したいと思います。 SPAとは？ 一休 .com スパの特徴・UIUXのポイント UIUXのポイント① 施設の魅力を伝える UIUXのポイント② プランの魅力を伝える UIUXのポイント③ 空き時間・予約時間をわかりやすく UIUXのポイント④ 予約の前に利用条件をしっかり説明 おすすめのホテルスパ15選 東京のホテルスパ 1. ザ・ペニンシュラ スパ 2. ザ スパ アット マンダリン オリエンタル東京 3. アマン・スパ／アマン東京 4. AO スパ＆クラブ／アンダーズ 東京 5. スイス・パーフェクション スパ キオイ／ザ・プリンスギャラリー 東京紀尾井町 6. スパ＆ウェルネス　ジュー

この記事は一休.comアドベントカレンダー2018の5日目です。 qiita.com こんにちは。 CTO室の村石です。 一休ではAmazon Connect を導入し、カスタマーサービスの一部コールセンターを新しい体制へと変えました。 今回は導入した Amazon Connect に関して、概要から導入後の運用まで幅広く話をしようと思います。 Amazon Connect とは AWSが提供するクラウド型のCTI*1システムのことで、コールセンターを簡単に作れることが魅力のサービスです。 また、Webサービスになっているため、ブラウザがあれば利用できます。 aws.amazon.com コールセンターではよくある以下のようなことも、少しの設定で実現出来ることは大きな魅力だと思います。 音声ガイダンスを流す 案内で番号をプッシュさせる 特定の担当部署に電話をつなげる 料金については、従量課

本記事は、一休.com Advent Calendar 2018の4日目の記事です。 qiita.com 宇都宮です。宿泊事業本部でWebフロントエンドの開発をしています。 今日は、パフォーマンス改善に取り組むフロントエンドエンジニアの多くが頭を悩ませているであろう、サードパーティスクリプト(3rd Party JavaScript)について書きます。 サードパーティスクリプトとは サードパーティスクリプトとは、外部のドメインから読み込むJavaScriptのことです。典型的には、Google Analytics等のスクリプトが、サードパーティスクリプトに該当します。 一休.comでは、サードパーティスクリプトを、アクセス解析・広告のリターゲティング・A/Bテスト等、様々な用途に使用しています。これらのスクリプトは、一つ一つは小さなものであるため、画面表示のスピードに対するインパクトは意識

この記事は一休.com アドベントカレンダー 2018の2日目の記事です。 qiita.com 宇都宮です。宿泊事業本部でフロントエンドの開発を行っています。 今回は、最近一休.comに導入した、SVGスプライトによるアイコンの作り方・使い方について紹介します。 StorybookのSVGスプライトアイコン一覧 アイコンの一般的な使い方 アイコンは、一般的に、以下のような方式で使用されると思います。 ビットマップ画像(gif, png等) アイコンフォント(Font Awosome等) SVG このうち、ビットマップ画像によるアイコンは拡大・縮小に弱いため、様々な解像度の画面に対応する必要のある現代には不向きです。アイコンフォントはベクター画像なので拡大・縮小に強く、豊富なアイコンがライブラリとして提供されているのが魅力です。SVGもアイコンフォントと同様のベクター画像ですが、フォントには

この記事は一休.comアドベントカレンダー2018の1日目です。 こんにちは。レストラン事業本部の西村です。 11月12、13日にサンフランシスコで開催されたChrome Dev Summit 2018に参加しました。 今年はChromeが10周年ということで、この10年で変わったこと、これからについての話で始まりました。 2日に渡って行われた22のセッションの中で、特に注目した点について深掘りしていきます。 1日目のセッション 1日目は現在提供している技術について、具体的な事例を交えながら紹介されました。 VisBug VisBugは、hoveringとKeyboard shortcutsでブラウザ上でサイトの画像を差し替えたり、一部のコンテンツの内容やスタイルを変更できるChrome extensionです。 ブラウザ上でちょっとしたスタイル修正や画像の入れ替えをしてデザイン決め、とい

こんにちは。今日はイベント開催のご案内です。 12/12(水) に一休.com / 一休レストランの開発事例についてのミートアップイベントを開催いたします。 Ikyu Frontend Meetup 今回は「フロントエンド開発」をテーマとして 一休レストラン スマートフォン検索ページのSPA化 一休.com スマートフォンホテルページのパフォーマンス改善 を軸にNuxt.jsの導入、コンポーネント設計、CSS設計、画像最適化によるパフォーマンス改善などの事例をご紹介いたします。 セッションのほかにも、パネルディスカッションを予定していますので、参加者の皆さまと交流しながら、日々の学びを交換できればと思っています。 お申込みはこちらから。 ikyu.connpass.com イベント実施に至ったきっかけ user-first.ikyu.co.jp この記事を公開したところ、「情報交換しましょ

2018年4月、データセンター完全クローズ 一休は、今年の4月にデータセンターを完全にクローズしました。現在、すべてのサービスをAWSを使って提供しています。 この過程で各種運用ツールやビルド/デプロイのパイプラインなどをすべて外部サービスを使うように変更しました。 これによって、インフラエンジニアやサービス運用担当者の役割や業務が大きく変わりました。本稿では、その背景を簡単に紹介したいと思います。 ざっくり言えば、 物理サーバのセットアップ&データセンターへの搬入のような仕事はなくなった。 アプライアンスの保守契約、パッチ適用、運用ツールのバックアップのような仕事もなくなった。 各種メトリクスを見ながら、Infrastructure as Codeでクラウドリソースの管理や調整をする仕事がメインになった。 必要に応じて、プロダクトのソースコードに踏み込んで必要な改修を行い、サービスの安定

一休.com レストランは今年の 7 月 18 日、スマートフォン向け検索ページのリニューアルを行いました。このエントリーでは、その中身について少し紹介させていただきます。 検索ページの課題 一休.com レストランではスマートフォン向け検索ページに対して「遅い」という課題意識がありました。これは技術面で少しブレイクダウンすると; パーソナライズドを含む複雑な処理を行っているため、サーバーサイド処理が重い。 UI 上無駄な遅延処理を行っているため、クライアントサイドの描画が遅い。 というサーバー側とクライアント側両方の課題がありました。クライアントサイドの「無駄な遅延処理」というのは; 検索結果取得が REST API 化されているにも関わず、再検索の度にページリロードを行い、サーバーサイドの描画からやり直している。 という実装に問題がありました。下図がリニューアル前のページ描画の様子です

こんにちは。 一休.comの開発基盤を担当しています、akasakasです。 今回は、一休.comスマートフォンホテルページリニューアルをリリースし、パフォーマンスが改善した話を書きます。 概要編はこちらになります。 user-first.ikyu.co.jp JavaScriptパフォーマンス改善編はこちらになります。 user-first.ikyu.co.jp CSS・その他パフォーマンスチューニング編はこちらになります。 user-first.ikyu.co.jp この記事ではスマートフォンホテルページリニューアルで実施したサーバサイドチューニングについて書きます。 ここでお話しする内容 サーバサイドチューニング前後のOverview プロジェクトの大まかなタイムライン ボトルネック洗い出し 対策 SQL改善 不足インデックスの設定 => 600msの改善 複雑なselect文をシン

こんにちは。 一休.comの開発基盤を担当しています、akasakasです。 今回は、一休.comスマートフォンホテルページリニューアルをリリースし、パフォーマンスが改善したお話をさせて頂きます。 概要編とJavaScriptパフォーマンス改善編はこちらになります。 user-first.ikyu.co.jp user-first.ikyu.co.jp この記事ではスマートフォンホテルページリニューアルで実施したCSS・その他細かいチューニングについてお話しします。 ここでお話しする内容 CSS再設計＆チューニング編 リニューアル前のスマートフォンホテルページのCSSの現状整理と抱えていた課題 リニューアルをするにあたり、CSS再設計 CSS Modules FLOCSS パフォーマンス インライン展開 非同期読み込み ドキュメント整備 その他細かいチューニング編 resource hin

宿泊事業本部の宇都宮です。 一休.com スマホサイトのホテルページパフォーマンス改善プロジェクトでは、フロントエンドには以下のような要件がありました。 デザイン面は既存を踏襲する 機能はほぼ従来通り 日付等を変更した際の再検索は、画面遷移を挟まず、画面内で行えるようにする パフォーマンスをできるだけ改善する 要するに、従来と同様の機能+αを実現し、かつ、従来と同等以上のパフォーマンスを実現する、というミッションです。 このために、どのような取り組みを行ったか、紹介します。 パフォーマンス目標値の設定 まず、パフォーマンスの目標値を設定する必要があります。モバイルでは、ユーザの帯域幅は回線や時間帯によって大きな変動があります。多少回線状況が悪くても、閲覧を妨げない程度のパフォーマンスを実現する必要があります。 一休へアクセスするユーザのモニタリングを見ると、極端に遅い回線を使っているユーザ

こんにちは。 一休.comの開発基盤を担当しています、akasakasです。 今回は、一休.comスマートフォンホテルページリニューアルをリリースし、パフォーマンスが改善したお話をさせて頂きます。 UI部分は既存を踏襲する形をとり、UX・パフォーマンス改善にフォーカスして、所々で様々な工夫をしました。 お話ししたいことが盛りだくさんなので 概要編 JavaScriptパフォーマンス改善編 CSS・その他細かいチューニング編 サーバサイド編 の4つに分けて、お送りしたいと思います。 この記事ではスマートフォンホテルページリニューアルの全体像についてお話しします。 詳しいお話をする前に：スマートフォンホテルページってどこ？ こちらになります https://www.ikyu.com/sd/00001290/ ここでお話しする内容 リニューアル前後のパフォーマンス比較 PageSpeed Ins