LCL Engineers' Blog

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

JOB管理をJenkinsからKuroko2へ移行しました

弊社では最近、JOB管理をJenkinsからKuroko2へ移行しました。 Kuroko2についての概要や導入方法は、以下の記事などが詳しいため割愛させて頂き、弊社での具体的な導入内容について紹介したいと思います。 https://github.com/cookpad/kuroko2 http://dev.cla…

iOSDC Japan 2017 day1 レポート

前夜祭を含んだ3日間で開催されるiOSの国内カンファレンス、iOSDCに参加してきました。 今回はその1日目(9/16)のレポートです。 今年のiOSDCは最大4つのメインセッションが並行で行われるということで、 前日から公開されていたタイムテーブルを見ながら、…

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

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

Baltoを利用して素早くサービスを改善する

LCLでは、今年の初めから開発フィードバックのツールとしてGoodpatch様のBaltoをメインで活用しています。 先日、Goodpatch様へ事例として取り上げていただきましたが、より具体的な利用方法について紹介します。 goodpatch.com Baltoとは Webサイトやモバイ…

AWS EC2パラメータストアを利用したRails 秘匿情報の管理

DBの接続情報・APIキーなどの秘匿情報は、git管理下に置くべきではないですが、皆さんはどのようなに管理しているでしょうか? 先日のAWS Summit Tokyo 2017のDMM様の事例で、EC2 System Managerパラメータストアの紹介がありましたので、使ってみました。 ※…

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

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

Railsのデプロイ時にwebpackのビルドを実行する

夜行バス比較なび(https://www.bushikaku.net/)の一部はReact & ES2015で実装されています。Railsのデプロイとwebpackの連携について紹介します。

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

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

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

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

RailsでPaperclipを利用して、画像に透かし(ウォーターマーク)を付与する

弊社で運営している「バスとりっぷ」というメディアでは、Paperclipを利用して画像のアップロードを行っています。Paperclipでは、サムネイルの作成やリサイズ・背景色の変更などを行っていましたが、透かし(ウォーターマーク)の付与にも対応しました。 ww…

GitHubへのpush時に、featureブランチ環境を自動作成する

弊社では、作業中ブランチの動作を誰でも確認できる仕組みを用意しています。今回の記事では、導入背景から運用方法までを紹介したいと思います。 解決したかった課題 弊社のWebサービス開発では、GitHub Flowを採用しています。 GitHub Flowでは、masterへ…

RubyMineでよく使うキーボードショートカット

弊社が運営している夜行バス比較なび、格安移動のサーバーサイドは主にRuby on Railsで実装されておりエンジニアのほとんどがIDEにRubyMineを使用しています。 IDEは触れる時間が長いツールなので使いこなしたいし、楽をしたいですね。そんな時に重要なのが…

本番DBを開発環境に簡単にコピーする仕組み

こんにちは、エンジニアの森脇です。 弊社では、本番DBを開発環境にコピーして開発をしています。今回は、どのような仕組みで実現しているかを紹介します。 なぜ本番DBを利用するか cookpad様の記事でも言及されていますが、弊社でも全く同じ認識を持ってお…

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

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

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

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

BugsnagでRailsのエラーを漏れなく補足する

弊社では、以下のエントリで紹介したように、Bugsnagを利用してエラー監視をしています。 techblog.lclco.com 前回は、JavaScriptでの利用について紹介しましたが、今回はRailsでどのように利用しているのかを紹介します。 Bugsnagの選定理由 Railsのエラー…

自社サービスの常時SSL(サイト全体HTTPS)対応でやったこと

Webエンジニアの森脇です。 弊社では先日「格安移動」という自社サービスの常時SSL化(サイト全体HTTPS化)へ対応しました。 この記事では、常時SSL対応のためにやったことを紹介したいと思います。 idou.me なぜHTTPS化したか GoogleやApple等のHTTPS化への積…

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

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

iOS/Androidアプリのリリースフローとチェックリスト

こんにちは、森脇です。 今回は、弊社でのモバイルアプリのリリースフローと、リリース時に利用しているチェックリストについて、可能な範囲でご紹介したいと思います。 リリースサイクル 決まった期間でのイテレーションを回しているわけではなく、次のリリ…

働き方を工夫して効率UP

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

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

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

gradle-play-publisherを利用したGoogle Play申請の自動化

新年早々ですが、先日 Andriod版「高速バス比較 」アプリをリリースしました。 圧倒的なバス便の掲載数に、わかりやすい最安値比較、細かい条件での検索など、高速バス・夜行バスを探すためにはなくてないらないアプリです。 play.google.com なお、iOS版は…

Visual RegressionテストによるWebデザイン崩れの防止

E2E

明けましておめでとうございます。 エンジニアブログを初めて、ちょうど1年になりました。 去年はなんとか月に1記事が書ける程度でしたが、今年は月に最低5記事は書いていきます。 今年最初の記事としては、弊社で最近取り組んでいる「Visual Regressionテ…

リモートワークへの取り組み

この記事はリモートワーク Advent Calendar 2016 - Adventar 25日目の記事です。 弊社におけるリモートワークの事例や普段の取り組みを見波が紹介したいと思います。 基本的なルール 細かい部分は割愛しますが大まかには以下のようなルールで運用しています…

Bitrise + GradleでAndroidアプリのCI環境構築

弊社では、Bitriseを利用してAndroidアプリのCI環境を構築しています。まだまだBitriseを利用している事例は少ないので、簡単にご紹介いたします。 なお、Bitriseを利用したiOSアプリのCI環境構築については、以下の記事で紹介しています。 techblog.lclco.c…

Hubot + Jenkins + Mackerelを利用したデプロイの見える化

弊社では最近、今更ながらHubotを利用したデプロイを行うようにしました。 なぜ今更ながら取り組んだのかも踏まえて、構成などを簡単に紹介いたします。 導入の背景 Hubot導入前は、以下のような流れでデプロイを行っていました。 デプロイ担当者が、Google …

LCLエンジニアのオフィス環境

弊社は、今年の8月に勝どきにあるトリトンスクエア 40Fにオフィスを移転しました。 移転してから2ヶ月ほどたちましたので、今回は新オフィスを簡単に紹介したいと思います。 景色 40Fだけあって、東京湾を一望できます。目を休めるためにも、たまに眺めてま…

pgpool-IIでストリーミング・レプリケーションへ対応する

以下の記事に続いて、pgpool-II+ストリーミング・レプリケーション構成について紹介致します。 (だいぶ時間が空いてしまいましたが。。) pgpool-II 入門(インストールと簡易設定) - LCL エンジニアブログ 説明に利用する環境 PostgreSQL 9.4 pgpool-II 3.5…

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

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

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

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