LCL Engineers' Blog

夜行バス比較なび(高速バス比較)・格安移動・バスとりっぷを運営する LCLの開発者ブログ

フロントエンド

Zeplinを導入してデザイナーとエンジニアの連携をもっとスムーズに

フロントエンドエンジニアの岡田です。 LCLでは、デザイナーとエンジニアの連携をスムーズにするために、Zeplinを導入しました。 今回は、導入にあたって行ったことをまとめました。 デザイン&コーディング体制 Zeplin導入前に使っていたツール Zeplinとは …

AMPページにsticky広告(固定追尾広告)を表示する

フロントエンドエンジニアの岡田です。 先日、AMPページにsticky広告を追加しました。 その際にいくつかつまづいた点があったのでまとめます。 弊社が運営するバスとりっぷでは、AMPページを用意しています。 すでに通常の広告は表示していたのですが、今回…

InstabugのWeb版(Beta)導入方法

InstabugでWebサイトのフィードバックを送れるように設定しました。 すでにiOSでは使い始めていて、iOSの設定については以下の記事で軽く触れています。 techblog.lclco.com Web版は現時点(2017/11/13)でBeta版のためか、少し導入でつまづいた点もありまし…

パフォーマンス計測ツール:SpeedCurveの使い方

フロントエンドエンジニアの岡田です。今回は、パフォーマンス計測ツール:SpeedCurveをLCLでどのように使っているかお伝えします。 設定について 計測タイミング(Times) 計測タイミングは多いに越したことはないとは思いますが、コストとのバランスで、今…

パフォーマンス計測、はじめました(フロントエンド編)

フロントエンドエンジニアの岡田です。 LCLでは、フロントエンドのパフォーマンスを計測するために、SpeedCurveを導入しました。 speedcurve.com 検討した計測サービス 導入にあたっては、以下のサービスも検討しました。 最初は、RUM (Real User Monitorin…

ES5からWebpack管理下の関数を呼び出す方法

フロントエンドエンジニアの岡田です。 先日ご報告したとおり、LCLが運営する「夜行バス比較なび」では、jQueryで作られたサイトをReactへ置き換えています。 techblog.lclco.com 記事を書いた後も細々と置き換えを進めていますが、ページ単位での置き換えは…

LINE botの返事をカルーセル形式にしてみました

フロントエンドエンジニアの岡田です。 先日作ったLINE botを改良しましたのでご紹介します。 techblog.lclco.com 前回の状態では、botはテキストメッセージを返すだけでした。 これでは開いてみるまでどんなヨガ動画かわかりませんし、候補が1つしかないの…

スクロールするタブはスライダーのプラグインで実装できる

フロントエンドエンジニアの岡田です。 本日、夜行バス比較なびでは、プレミアムフライデー用の特集ページをリリースいたしました。 www.bushikaku.net こちらの特集でつかった、スクロールできるタブの実装についてご紹介します。 スマホ用のページの以下の…

プレミアムフライデーにヨガLINE botを作った話

フロントエンドエンジニアの岡田です。 先週の金曜日は、プレミアムフライデーでしたね。 LCLでも従業員全員が15時に退社しました。 premium-friday.go.jp 私は今回はどこへも出かけられなかったのですが、せっかく時間ができたので、LINE botをつくってみま…

JavaScriptのエラーをBugsnagで監視しています

フロントエンドエンジニアの岡田です。 先日、夜行バス比較なびを一部React+ES2015化しましたが、これに備えて、LCLでは昨年11月頃からBugsnagでJavaScriptのエラー監視を開始していました。 今回は、Bugsnagについて、簡単な説明と導入方法をまとめました。…

働き方を工夫して効率UP

フロントエンドエンジニアの岡田です。私の仕事は、勤務時間中はほぼPCの前にいなければなりません。そうなると、1日8時間は座って同じ姿勢を続けることになりますが、それは体に良くないそうですし、頭の回転も悪くなる気がします。 そこで、働き方を工夫し…

jQuery + Railsで作られた非SPAサイトを一部だけReact & ES2015で書き換えました

フロントエンドエンジニアの岡田です。 昨年末に、弊社のサービス:夜行バス比較なびの一部分をReactで書き換えました。 www.bushikaku.net 夜行バス比較なびのJavaScriptは、構築から3年以上たつこともあり、コードの見通しが悪くなってきています。 リグレ…

Webブラウザへのプッシュ通知はpushnateを使うと簡単

フロントエンドエンジニアの岡田です。先月のHTML5 Conferenceに参加してから、プッシュ通知を試したくてしかたがなかったのですが、ようやくまとまった時間が取れたので試してみました。 最初は、Webサイトからプッシュ通知を送ろう! JavaScriptでのプッシ…

ESLintでnot definedが出るときに確認すること

フロントエンドエンジニアの岡田です。 弊社では現在、フロントエンド環境の見直し中です。 現在はjQueryが中心ですが、サービスを運用しながら、少しずつ以下の環境へ移行していく予定です。 Webpack + babel + ESLint(Airbnb)+ ES6 + React ひとまず開…

もっと気軽にリファクタリングするために、BackstopJSを導入した話

フロントエンド担当の岡田です。 ある程度の期間運用しているWebサイトの場合、CSSがカオスになりますよね。 ちょっとした修正が全体に影響してしまうのがCSSの怖いところです。 弊社でも、Sass化したり、共通のCSSを変更したりする度に主要ページを目視チェ…

Photoshop不要! ブラウザにPSDを重ねてコーディングする方法

フロントエンドエンジニアの岡田です。 弊社ではデザイナーとフロントエンドエンジニアで分業をしていることもあり、HTML/CSSコーディングの際にはデザインカンプ(PSD)にスクリーンショットを重ねて確認しています。 ですが、この作業、少し面倒ですよね… …

Google Chrome拡張機能で業務改善 入門編

フロントエンドエンジニアの岡田です。 業務改善大好きです。 LCLに入社してからは、Google Chromeの拡張機能でちょっと便利なツールを作っています。 Google Chromeの拡張機能は、HTML, CSS, JSで作るので、気軽に始められます。 今まで作ったツールは以下…