RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

RAKUS Meetup Tokyo #2 フロントエンドNight : イベントレポート

f:id:moomoo-ya:20190308181401p:plain
RAKUS Meetup のロゴ

@moomooya こと 勉強会最速オジサン を目指している鈴木です。 先日弊社にて RAKUS Meetup Tokyo #2 フロントエンドNight と称したイベントを開催しましたので、そちらのイベントレポートを投稿します。

いつもはイベント閉幕後3秒以内にレポートを公開しているのですが、今回は1,688,400秒ほど経過してしまいましたorz

  • 当日の様子
  • 発表の紹介
    • Vue.js の新規プロダクトで楽して UI を提供しようと思ったらそこまで楽じゃなかった話
      • 話の経緯と発端
      • 選択の成否
      • 鈴木の感想
    • 既存 Web アプリケーションへの React.js 適用
      • 話の経緯と発端
      • React 導入にあたってやったこと
      • 既存実装との共存と、その後の課題
      • 鈴木の感想
    • Vue.js を初めてプロダクトに導入して直面した課題と得られた幸せ
      • プロダクトに Vue.js を導入してぶつかった課題
      • Vue.js を採用して幸せだったこと
  • 懇親会
  • 次回開催について

当日の様子

f:id:moomoo-ya:20190308183042p:plain
RAKUS Meetup Tokyo #2 会場の様子

今回は30人の募集枠を予定していたのですが、予想外の好評につき会場をグループ企業であるラクスパートナーズのオフィスに変更しての開催となりました。

当日は雨も降る悪天候の中ご参加いただきありがとうございました。

続きを読む

puppeteerを用いてラクスのエンジニアブログに自動でアクセスしてみた

はじめに

こんにちは。エンジニア1年目のy_kwmtです。先日、業務でpuppeteerを用いてE2Eテストのテストコードを実装しました。E2Eテストとは、End to Endテストの略で、開始から終了までアプリが期待通り動くか確認するテストです。今回はpuppeteerの学習をするためにpuppeteerを用いて自動でラクスのエンジニアブログサイトにアクセスしたことについて書きたいと思います。

目次

puppeteerとは

puppeteerは、Node.jsでHeadless Chromeを自動で操作できるようにするライブラリです。puppeteerを用いることでクリック、テキスト入力、画面遷移などが自動で行えます。 公式サイトはこちらです。

github.com

導入方法

今回はこちらの記事を参考にインストールを行いました。

tech-blog.rakus.co.jp

まずはNode.jsとnpmをインストールしてください。 Node.jsはこちらからダウンロードを行い、インストーラを実行し、画面の指示に従ってインストールしてください。npmのインストールは以下を実行してください。puppeteer は操作結果を Promise で返すので、async/await が使えるv7.6.0 以降のバージョンを用意したほうがよいです。

npm init

Node.jsとnpmのインストールが完了したら、puppeteerのインストールを実行します。

npm i puppeteer

コーディング、実行

puppeteerのインストールが完了したら、コードを書いていきます。コードはこちらのページを参考にさせていただきました。

webbibouroku.com

以下のファイルを実行してラクスのエンジニアブログにアクセスします。今回は実行できているか確認するためにブラウザを表示するだけでなく、スクリーンショットも撮影しました。そのコードがこちらです。

ファイル名:sample.js

const puppeteer = require('puppeteer');

(async () => {
  //ブラウザを定義(headless:false ブラウザを表示する, true 表示しない)
  const browser = await puppeteer.launch({ headless: false });
  //タブを定義
  const page = await browser.newPage();
  //ブラウザのサイズを定義
  await page.setViewport({width: 1240, height:1080});

  //待機
  async function sleep(delay) {
    return new Promise(resolve => setTimeout(resolve, delay));
  }

  // Googleにアクセス
  await page.goto('https://www.google.co.jp/');
  // 検索窓に「ラクス エンジニアブログ」と入力
  await page.type('.gLFyf', 'ラクス エンジニアブログ');
  //スクリーンショット撮影
  await page.screenshot({path: 'google.png'});
  // 検索ボタンクリック
  //待機時間を設けないと止まってしまうことがあるので記述
  await sleep(5000);
  await page.focus('input[name="btnK"]');
  await page.click('input[name="btnK"]');
  //待機時間を設けないと止まってしまうことがあるので記述
  await sleep(5000);
  //スクリーンショット撮影
  await page.screenshot({path: 'search_result.png'});
  // 検索結果の先頭リンクをクリック
  await page.click('.rc > .r > a');
  //スクリーンショット撮影
  await page.screenshot({path: 'blog.png'});
  //ブラウザを閉じる
  await browser.close();
})();

コードを書いたら、コマンドでファイルを実行します。

node sample.js

実行中に撮影したスクリーンショットがこちらです。

google.png

search_result.png

blog.png

最後に

今回はサイトにアクセスするという簡単な動作でしたが、puppeteerを0から始めてファイルを実行することができました。今後、また業務でpuppeteerを使うとなった時のために、これからも勉強を続けて複雑な動作を自動化できるよう頑張ります。

チーム全員で取り組んだ勉強会発表プロジェクト(アジャイル Nightふりかえり)

id:radiocat です。2/26に大阪オフィスで実施したMeetupでは楽楽精算開発2課のメンバー全員で半年かけて準備をして発表しました。今回はMeetupの内容と合わせて、全員で役割を持って取り組んだ勉強会発表プロジェクトの内容をご紹介します。

rakus.connpass.com

プロジェクトの経緯

私たち楽楽精算開発2課は成長サービスを支える開発組織として、常に新しい領域の開発に取り組んできました。一方で、開発部門としてMeetupというイベントを継続的に開催していくことになり、私たちのチームがどう関わっていくべきかを考えた時に、チームでイベントのコンテンツを作り上げるという新しいチャレンジを行ってその知見を残すことが私たちのチームらしい取り組みではないかと考えました。そして2月のMeetup発表者としてチームで名乗りを上げてプロジェクトをスタートさせました。

2018年10月にプロジェクトスタート

前回のMeetup の開催翌月にキックオフを行いました。 まず、どういうイベントにしたいかを全員で話し合って、発表テーマの候補を出しました。その中からいくつかのテーマに絞り込んでそれぞれのメンバーがいったん持ち帰り、次回までに発表テーマを検討することにしました。

11月

前月にそれぞれが持ち帰って検討した発表テーマと発表のイメージを共有して、イベントの全体像をすり合わせしました。 この時にそれぞれのメンバーが担当する発表内容の大枠が決定しました。若手メンバーは3人1組で発表資料を作って代表者が発表することになりました。

12月

前月に決まった発表テーマと内容の大枠をスライドに落とし込んでアウトラインレベルで中間発表を実施しました。そしてお互いの発表を聞いてフィードバックし合いました。このとき、主力エンジニア、中途社員エンジニア、若手エンジニア、スクラムマスターというそれぞれの視点で発表するという流れがだいたい確定しました。

1月

ドラフト版レベルのスライドで発表練習して、全員でレビューしました。ここまではスクラムマスターが最初に発表する流れにしていましたが、「いきなりスクラムマスターが場を引っ張って発表するのはなんか違うよね」となって、スクラムマスターは最後に発表する流れに変更しました。

2月

本番さながらの練習会を実施し、資料と発表内容の精度を上げていきました。チームで整合性を合わせる部分があるため前日までスライドのチェックや修正を行って当日を迎えました。

f:id:radiocat:20190306104925p:plain



発表したスライド

当日のスライドと合わせて発表に関わったメンバーのコメントをご紹介します。

続きを読む

大阪・梅田エンジニアもくもく勉強会を開催しました/します。

楽楽精算開発2課 岡本です。
今年から月1回のペースで開催している「もくもく勉強会」ですが、3月もまた実施しますので、告知も兼ねて2月実施回の模様をお伝えしようと思います。

ちなみに、1月の模様はこちらの記事で紹介されています。 tech-blog.rakus.co.jp

2月実施の模様

前回(1月実施回)の振り返りで主に以下のような意見が出たので、2月はこれらの改善を実施しました。

  • 参加者同士が離れて座りがち
  • 食べ物があったほうがいい
  • BGMの音が大きい

■参加者同士が離れて座りがち

前回は、机を離して設置していたため、それぞれの机に別れて参加者が座ってしまい、もくもく中にコミュニケーションが取りづらい状況でした。
前回の様子。空席が多くてどことなく寂しい感じ
f:id:okana-yg:20190306174109j:plain

そこで、今回は参加者同士が近くに座れるように、机の配置を見直しました。
今回の様子。写真の時点では全員揃っていないので空席ありますが、最終的には各机に一人づつで全ての席が埋まりました。
f:id:okana-yg:20190306174033j:plain

■食べ物があったほうがいい

食べ物があったほうがコミュニケーションを取りやすいのではという意見が出たので、今回はお菓子を用意してみました。
ちょうど実施日が2月14日だったのでチョコレートをメインに用意。
f:id:okana-yg:20190306174136j:plain

ただ、あまり消費量は芳しくなかったようです。
まだまだ残っています。
f:id:okana-yg:20190306174551j:plain
次回以降も、お菓子は用意しようと思うので、お越しの際はガンガン消費していってください。

■BGMの音が大きい

もくもく勉強会の会場では普段からRaspberryPiからラジオが流されるようになっています。
こんな感じ、ちなみにこのRaspberryPiでエントランスのディスプレイに流れている映像も制御しています。
f:id:okana-yg:20190306175115j:plain

前回はここから流れてくる音が大きすぎるという意見が出ていたので、今回は予め音を絞ってBGMを流していました。
ただ、RaspberryPiの処理の関係で時々BGMが途切れ途切れになってしまっていたようなので、次回は別の方法でBGMを流そうと検討中です。

次回告知

次回は3月14日に開催予定です。既にconnpassに公開中ですので。興味を持たれた方は是非お越しください。
rakus.connpass.com

東京開発ビアバッシュに参加しました~2019年2月編~

f:id:FM_Harmony:20190304012912p:plain

はじめに

こんにちは、id:FM_Harmonyです。
今回は先週開催された東京オフィスのビアバッシュに関する紹介記事を書きました。なお、東京オフィスでのビアバッシュについては、下記の記事にて詳しく紹介されています。
tech-blog.rakus.co.jp

続きを読む

MapKitを用いた地図検索iPhoneアプリ開発

はじめに

こんにちは。若手エンジニアのchoreiiです。

最近、業務でswiftに触れる機会がありました。Xcodeでのアプリ開発が楽しく、swift勉強したい欲が高まり勉強会にも参加しています。初心者ながら、ある程度アプリの作り方も理解してきたので一度アウトプットをしようと思います。

swift勉強中の方の刺激・参考となれば幸いです。

目次

題材

取り上げるのは、MapKitになります。

簡単に言うと、アプリの画面に地図を埋め込んだりできるフレームワークです。

今回はMapKitを使って、近場の駅を表示するアプリを作ってみました。

完成形

最初に完成形をお見せします。

f:id:choreii:20190305014651p:plain:w300
起動後
f:id:choreii:20190305014757p:plain:w300
ラクスの会社住所で検索
f:id:choreii:20190305014830p:plain:w300
駅にピンがたつ(検索地がラクスです)

ゴールイメージが掴めたところで実際の手順を説明します。

地図の埋め込み

xibまたはstoryboardでMKMapViewを貼り付けるだけです。
xcodeで部品をペタペタ貼り付けるのは直感的にできるのですごく楽しいです。(しっかりとしたレイアウトを考えだすと面倒ですが)

f:id:choreii:20190305013005p:plain
MKMapViewの配置

今回はテキストボックスに住所を入力して検索するのでtextFieldも貼り付けています。

検索とピン配置

検索はMKLocalSearchを使用しています。精度はあまりよくないようですが、ローカルでAPIのように簡単に検索機能が使えるので使用しています。
検索用の関数を作成している先人の方がいらっしゃったので、検索自体はそちらをお借りしています。

Map.search(query: "駅", region: region) { (result) in
    switch result {
    case .success(let mapItems):
        for map in mapItems {
            let annotation = MKPointAnnotation()
            annotation.coordinate = map.placemark.coordinate
            annotation.title = map.name ?? "名前がありません"
            mapView?.addAnnotation(annotation)
        }
    case .failure(let error):
        print("error \(error.localizedDescription)")
    }
}

query: 検索したい建物 region: 検索範囲のイメージです。
帰ってきた検索結果それぞれにMKPointAnnotation()addAnnotationすることでピンを立てています。今回は駅固定にしていますが、ここも入力フォームやユーザデフォルトに保存しておいた値などを使うと、いろんな建物が検索できて使い勝手はよくなると思います。

最後に

xibファイル上でのオブジェクトの配置と、コード上でのオブジェクトの操作の両方を体験できるので、iPhoneアプリの開発練習にはぴったりだと思います。私自身イベントの制御などまだまだ把握できていないところばかりなのでこれからも勉強は続けていきます。今回のアプリのソースはGitHubに置いておきます。練習用のコードで汚く読みづらいコードとなっていますが、基本的な操作は一通り試しているのでご自由にお使いください。


  • エンジニア中途採用サイト
    ラクスでは、エンジニア・デザイナーの中途採用を積極的に行っております!
    ご興味ありましたら是非ご確認をお願いします。
    20210916153018
    https://career-recruit.rakus.co.jp/career_engineer/

  • カジュアル面談お申込みフォーム
    どの職種に応募すれば良いかわからないという方は、カジュアル面談も随時行っております。
    以下フォームよりお申込みください。
    forms.gle

  • イベント情報
    会社の雰囲気を知りたい方は、毎週開催しているイベントにご参加ください! rakus.connpass.com

Node.jsのExpressでWebサーバーの構築をしてみた

はじめまして、新卒のtaku_76です。

qiita.com

上記URLからチャットbotを作成したいと思ったのですが、これにNode.jsの知識が必要だと書いてあったので学習してみました。 その結果フレームワークであるExpressを使用すると簡単に Webサーバーが構築できることが分かったので試しに使ってみました。

Node.jsとは

JavaScriptを使ってサーバーサイドのコードを書くことが出来るプラットフォームです。

  • 特徴
    • V8エンジン

      • GoogleChromeで使われているJavaScriptエンジンでブラウザとほぼ同じJavaScriptが書くことができます。JavaScriptを即座にコンピュータが理解できる機械語に変換して処理を行うため非常に高速です。
    • ノンブロッキングI/Oモデル

      • I/Oが終わったか何度もチェックし、終わっていなければ次の処理に進んで、次の処理が終わったらまたチェックする、この動作を繰り返します。
      • シングルスレッドの大量のアクセス制御が難しいというデメリットを回避します。

Node.jsのインストール

https://github.com/nullivex/nodist/releases
こちらのURLからnodistをインストールします。

  • nodistとは

Windows環境で動作する Node.js のバージョン管理ツールです。これを使うことで、複数の Node.js のバージョンを切り替えて使い分けることができるようになります。また、同時にnpmもインストールされます。

  • npmとは

Node.jsのパッケージを管理するツールです。Node.jsのパッケージとは、予め用意された便利な機能をまとめたものです。

Expressで新規プロジェクトを作成

  • Expressとは

Node.jsで利用できるWebアプリケーションフレームワークです。 イベントループで非同期のため同時リクエストに強く、多くのユーザーの同時アクセス・大量リクエストを捌くことができます。 テンプレートエンジン(サーバーサイドで動的にオブジェクトを渡して、それをHTMLとして返す)を選べます。 今回はhtmlに近い形でかけるテンプレートエンジンのejsを使います。

  • Expressのインストール

以下のコマンドでインストールを行うことが出来ます。

C:\Users\takumi\Desktop\test\Nodist>npm install -g express-generator
  • 公開までの手順
C:\Users\takumi\Desktop\test\Nodist>express -e newproject

オプション-e でejsが設定された状態でプロジェクトが作成されます。

C:\Users\takumi\Desktop\test\Nodist>cd newproject && npm install

作成されたnewprojectのnode_moduleディレクトリの中に必要なモジュールがインストールされます。 packege.jsonに何をインストールするのか設定してあり、これを参照してインストールを行います。

C:\Users\takumi\Desktop\test\Nodist\newproject>npm start

サーバーを起動し、ローカルにWebページを公開します。 http://localhost:3000と入力するとexpressにデフォルトで入っているhtmlが以下のように表示されます。

f:id:taku_76:20190304065910p:plain
express

おわりに

今回は、Node.jsのExpressを使ってローカルにWebサーバーの構築をしてみました。 次は、自分でWebアプリを開発してherokuを用いて公開するところまでやってみたいと思います。

参考

Node.jsについての記事

こちらにも詳しい記事があります。 Node.jsの勉強会でお手軽にWebアプリを作った話

Copyright © RAKUS Co., Ltd. All rights reserved.