今年も Raksul Hack Week を開催します!

こんにちは。ハコベル(物流サービス)チームの加藤です。

今年も社内ハッカソンイベントの開催が決まり、準備が進んでいるのでその様子をご紹介したいと思います。

Raksul Hack Week #1

昨年9月に開催した社内ハッカソンイベント Raksul Hack Week #1

こんな概要で、オフィス内で4日間の日程で開催しました。

  • 参加者はエンジニア、プロダクトマネージャー、デザイナーとする
  • ハッカソンの期間は1週間とし、期間中はハッカソン100%コミット、普段の開発業務はやらない(※ ただし緊急対応系は最優先で)
  • チーム制とする
  • 最終日に各チームは成果発表する
  • ラクスルの事業、ステークホルダーに関わることであれば何に取り組んでも良い

(詳しくは 1週間やる、楽しい社内ハッカソンの作り方 をご覧ください)

Raksul Hack Week #1

いつもの業務から離れたテーマを行ったり、いつもとは違う技術を使って開発したり、他のチームのメンバーと仕事したり。それぞれのチームの発表もお互いに刺激になり、とても好評なイベントとなりました。

さらに、この中からプロジェクトとして採用されたり、実際に世に出たりしたものもあります。

ラクスルデザインブログもその一つ。バナー、LPから、各サービスのプロダクトデザイン、イベントブースのデザイン、RubyKaigi などのノベルティなど、オールマイティに活躍するラクスルの優秀なデザイナーが綴るブログとなっています。ぜひご覧ください。

どうなるかわからない不安を乗り越えて

さて、参加メンバーにも経営陣にも好評だった第1回を受けて、今年もめでたくRaksul Hack Week を開催することになりました。

今回の開催にあたっては運営メンバーを一新。UXデザイナーで入社した新卒2年目のロビンが手をあげてリーダーを務めます。印刷・広告・物流の各チームからメンバーが集まり、前回の運営メンバーのアドバイスをもらいないがら、週一回のミーティングをベースに準備を進めることにしました。

開催日程は、6月中旬の1週間。会社が成長しているので、参加メンバーも増加。2回目で大枠の進め方が見えているとはいえ、運営メンバーの中には前回まだ入社していなかったメンバーもいるのでどう進めるのか不安も出てきました。まずは、”Wednesday Raksul” という社内の技術勉強会中にみんなに前回の参加のJourney Map を書いてもらって、運営メンバーで共有するところから始めました。

とあるメンバーの Journey Map (イベント開催前)

とあるメンバーのJourney Map (イベント開催中)

第1回目は最終的にとても楽しく刺激になるイベントだったのですが、開催前には「やることを決められるだろうか」「チームメンバーを集められるだろうか」といった不安があったことが見えてきました。新しく入社したメンバーからも同じような声があがったので、なるべくその2つの課題のサポートができるばと思いながら進めることにしました。

Raksul Hack Week #2 のテーマは…

さてそんな中から生まれてきた、今年のRaksul Hack Week #2のテーマは

 

みんなで創る次の世界

〜好きなことから始まる挑戦〜

課題 ✖️チーム✖️技術

 

事業部ごとに様々な背景を持ったメンバーが増えていたり、新卒メンバー4人は全員国籍が違うというほどダイバーシティーに力を入れていたりする現在のラクスル。

そんな中でラクスルの「仕組みを変えれば世界はもっと良くなる」というビジョンを実現する一つの手段として、次の世界をみんなの力を使って実現できるようなきっかけになるようなイベントにしたいという想いが込められています。

新しい試み Hack Week Lunch

Journey Map から見えてきたことや、今年のテーマを踏まえ、開催までの期間を以下のように区切りイベントを開催したり案内を出したりすることにしました。

  • 4月:アイデア月間
  • 5月:チーミング月間
  • 6月:Raksul Hack Week #2

4月から5月にかけては、各事業部のビジネスメンバーからお客様の課題、自分たちの業務の課題やこんなのがあれば嬉しいといった声を聞くランチイベント Hack Week Lunch を実施しました。

ディスカッションの内容をホワイトボードに記録。その場のディスカッションを盛り上げたり、その場でどんな話題が出たのか参加していないメンバーにも共有していきました。

Hack Week Lunch

さらにアイデアを共有するためのSlackチャンネル #hack_week_ideas を用意して、Hack Week に直接参加しないビジネスメンバーとエンジニア/デザイナー/PMがアイデアを出し合う場をオンライン上でも作りました。

#hack_week_ideas チャンネル

部門を超えて課題やアイデアを交換したりする場になってきて、次のステップの本質的な価値提供の話題も上ったりしています。このチャンネルを通年運用したいという声もありました。

開催まで1ヶ月弱

いよいよ開催まで1ヶ月弱となってきました。5月はチーミング月間。「チームメンバーを見つけられるだろうか」という声に少しでもお答えしようと、カジュアルなプレイベントを実施する予定です。

今年はどんなチームや取り組みが生まれるのでしょうか。意外な組み合わせが、面白い結果を生んだりすることもあります。偶然の流れも大切にしながら、Raksul Hack Week #2 を楽しんでいきたいと思います。

 

ラクスルでは事業をつくっていきたいエンジニアを絶賛募集しています!

自分の書くコードで、印刷・広告・物流といった大きな産業の課題を解決するようなインパクトを作り出してみませんか。技術・業界・業務など多角的に理解を深めながら、自らアイデアを出し、主体的に事業家人材と一緒に事業をつくっていく。そんな働き方をしたい方をお待ちしています!

ラクスルはRubyKaigi2019にRuby Sponsorとして協賛します

ラクスルの松原です。

ラクスル株式会社は昨年に引き続き、本年も2019/04/18(水)〜2019/04/20(金)に福岡国際会議場で開催されるRubyKaigi2019にスポンサーとして協賛させていただくことになりました。

https://rubykaigi.org/2019/sponsors

ラクスル株式会社では「ラクスル」「ハコベル」両サービスにおいてRubyを中心技術として活用しています。

今回のRubyKaigiでは1日目(2019/04/18)にCTO泉よりスポンサーセッションとして、印刷・物流・広告といった、あまり技術的に攻められていない「ブルーオーシャン」(競合が少なく成長余地のある領域)をテーマにお話させて頂く予定です。

また、期間中は会場にてブースも出展させていただきます。「福岡」をテーマとしたラクスル特注の限定ノベルティーも用意しておりますので、参加される方は気軽にブースにお立ち寄り下さい!

 

当日会場でお会いできるのを楽しみにしております!

| by

ラクスルテレビCMオンラインストアの初期開発の進め方

こんにちは。フロントエンドを担当している古谷です。

今回は、ラクスルテレビCMオンラインストアを開発開始からリリースするまでの進め方についてご紹介します。

こちらの記事は、以前行われた 【ラクスル×KCF】FrontendNight というイベントにて 本編には惜しくも入れられなかった部分を中心に構成しています。

イベントで発表したこちらの資料もあわせてご覧ください。

Storybookを使って安心しながら開発を進める ラクスルテレビCMオンラインストア開発

こちらの資料では、「進める際のリスクがなにかをしっかりと想定すること、そのための対応手段の選択肢を増やすために技術力をあげていくことが大事。」とまとめています。

この発表では主にツール、技術の選定にフォーカスして発表していました。
この記事では、進め方について、実際のPRの画面を交えながら紹介していきます。

速度を保ちつつ開発する進め方

こちらも、上記資料と同じくどんなことが起きたら開発がうまく回らないかを考えていました。

以下の不安があり、それらに対して対策を打っていました。

  • 技術選定はうまくいっても速度が出ないのではないか
  • 仕様や実装の変更による手戻りが多いのではないか

速度が出ない問題にはどう対処したか

基本的なことではありますが、PRの単位を小さく保つこと、そして丁寧にすることがあげられます。

こちらが実際のPRです。

(※ 小さくとかいてあるわりに、Files changed が15なのは、Snapshotで多くのコンポーネントに影響が出ているからです。)

PRのテンプレートを作った

おそらく多くのプロジェクトで行っていると思いますが、PULL_REQUEST_TEMPLATE.md の形式を整えます。 チケット番号、実装したものの概要は書くとして、それ以外になぜその実装にしたのかという理由を書くことが大切です。

また、(実装者が想定している)影響範囲を書いておくことで、全体把握をしているという信頼関係の構築がしやすくなると思っています。 リリース前だからこそできることですね。

## 概要

簡潔に何ができるようになるかを書きます。
また、その背景や対応するチケットがあれば貼ってください。

その実装にした理由をコミットメッセージに加えてこちらに書いてください。
その他、レビューを厚めにしてもらいたい点があれば書いてください。

## 影響範囲

Storybookのスクリーンショットなどわかりやすいものがあれば貼ってください。
Propsの変更など大きな変更があれば書いてください。

## TODO

* [ ] storybook
* [ ] このPRをmergeするために必要な残タスクがあれば列挙します

## このPRでやらないこと

このPRでは対象外にすることを書きます。
チケット、ISSUE、FIXMEを使って管理してください。

スクリーンショットを乗せるようにした

フロントエンドの開発では、スクリーンショットを乗せることでPRを中心にコミュニケーションが回ります。 スクリーンショットを乗せることで、仕様に沿った動きをしているかどうか、挙動の認識があっているかを一目でわかることが大切です。

レビューイはスクリーンショットを撮るために、当然手元で実装物を再現させる必要があります。

動作確認してからPRを出すのは当然ですが、複数パターン考えられるものを撮ったりするうちに、考慮漏れに気づいたり、モバイルサイズにした時に思わぬ挙動を見つけたりするのではないかと思います。私もこの段階で考慮漏れに気づくことがありました。

手元での動作確認は基本の所作ですが、 スクリーンショットを撮るということをフローに入れるだけで、うっかりは少なくなるはずです。

レビュアーも手元で再現させるのは当然ですが、PRで見るべき箇所がわかりやすいのでレビューしやすくなります。

やらないことを明記した

開発期に関しては、PRをためてしまい脳内バッファを消費することがないように、多少中途半端であってもmergeしてしまうことが大切と考えます。

また、完成度の高い物を作っても直前に変わる可能性もあるため、過度な作り込みは厳禁です。

とはいえ、中途半端なものがリリースされてしまっては問題なので、PRに明記することとチケットやコード内 FIXME などで残すようにしています。

ここで、想定している「ここでは積み残している事」を共有する事で、レビュー時に実装者の考慮漏れを見つけることができますし、積み残しを個人のタスクからチームのタスクに開放することが出来ます。

手戻りを発生させないようにどうしたか

手戻りの原因は沢山あると思いますが、一つはエンジニア以外とのコミュニケーション不足で起こるものがあると思っています。

これに関しては、PRにスクリーンショットを貼ることである程度対応ができました。

PRに貼るスクリーンショットをアニメーションGifにしておくと、連携したチャットツール(Slack)にPRに貼られた画像が流れます。Slackに動く画面が流れれば、エンジニア以外も実装している内容に関して興味が持てるようになります。

このPRの動くスクリーンショットと、Slackの絵文字コミュニケーションとあわされば、実装中のものに対して誰でもリアクションが出来る状態が保たれます。


※ 価格データなどはランダムなものを使っています
※ 実際のSlackの画像を編集しています

これによって成果物をベースとしたチーム全体の認識共有に繋がったと思います。 対面での進捗報告や、確認環境へのデプロイも大切ですが、もっと周囲がフォローしやすい形に持っていく事で、実装の認識の齟齬を発生しにくくすることができました。

まとめ

ラクスルテレビCMオンラインストアの初期開発では、PRをこまめに出すことと動くスクリーンショットを貼ることを心がけました。

まわりの関心を引きつけつつ、抜けもれなく開発を進めていました。

フェーズやチーム構成によって最適な進め方は違うと思いますが、参考になると幸いです。

ラクスルでは、新サービス開発をリードするフロントエンドエンジニアを募集しています。

 

ハコベルコネクトをリリースしました!

サーバサイドエンジニアの加藤です。
昨年8月に印刷から運送マッチングサービスのハコベルのチームに異動し、ハコベルコネクトの開発を進めてきました。

ハコベルコネクトとは

現在の物流業界における最大の課題はドライバー不足。ハコベルチームでは、現場の課題を調査し、その原因を探ってきました。見えてきたのは、複数の運送会社によって仕事が行われていることで、システム化が進まず紙・電話・FAXなどアナログで生産性を上げにくい現場環境でした。

ハコベルコネクトは、この情報断絶を解決すべく、大手物流荷主、一般貨物事業者など運送会社を自由度高くつなぐ物流プラットフォームを目指しています。

先月 1月24日に記者発表をし、日経新聞やTechCrunchにも取り上げられました。弊社CTOの泉がスマホのGoogle Chromeの新規タブで出てきたとのことで、社内でもちょっとした話題になりました。

今までも提供してきたサービスは、ハコベルカーゴ※に名称変更。これからもラストワンマイル向けのマッチングサービスを提供していきます。

仕事をする人に心地よい体験を

ハコベルコネクトは、PMやデザイナー・エンジニアが現場に足を運び、MVPを開発、実証実験を重ねて、徐々にその姿を明らかにしてできてきたプロダクトです。いくつもの運送会社の事業所に出向き、たくさんの方々にインタビューさせていただいたり、トラックに同乗させていただいたり。仕事をする人がどんな課題と向き合っているのか。様々なプロセスを経て、方向性が定まってきました。

ドライバーアプリイメージ

 

ハコベルコネクトという名前もその中で生まれてきました。SNSのように、会社と会社がつながりスムーズに情報のやりとりができることで、快適に仕事が出来るようにという想いが込められています。

ハコベルコネクトイメージ

技術負債の芽を最低限に ー今しかないでしょ!ー

さて、プロダクトとしてのリリースに向け、エンジニアとしてはどんなチャレンジがあったでしょうか。

  • 実証実験向けに急いで作られた側面があったため、既に技術負債気味なところがある
  • 業界独自の業務をモデリングしているため、キャッチアップしにくい
  • よくある機能でも複雑度が高く、要件の不整合が起きて開発が進みにくい

ハコベルチームには、私を含めラクスルの開発に関わってきたメンバーもいます。

「そうだ、ラクスルを作り直そう!」という投稿や「生まれ変わらNight -技術的負債からの一発逆転-」というイベントでご紹介させて頂いた通り、ラクスルは技術負債の課題に向き合ってきました。

(ちなみにまだまだ先はありますが、経営陣の理解もあり、ラクスルの技術負債の解消は着々と進んでいます。)

その教訓を活かして、ハコベルコネクトでは、リリース前に負債の芽の解消にも時間を使ってきました。リリース前ならば、ユーザー影響を気にせずにあらかじめアーキテクチャの整備を進めることが出来ます。「今しかないでしょ!」を合言葉に、気なっていたところはどんどん書き直しました。

ただし、特定業界向けのSaaSというサービスの成長特性を考えて、最初からドメイン分割やマイクロサービスを採用することはしていません。ラクスルで蓄積してきているベストプラクティスを取り入れ、まずはRails アプリケーションとしての Rail にきれいに乗るというところに集中しました。

フロントは、ラクスルの他のプロダクトでも採用しているVue.jsを使い、実証実験後にUIをフルリニューアル。Web APIが必要だったため、コントローラやサービスは約80%を書き換えました。

Web APIの開発中には、GraphQLが話題になったり、gRPC-Webが正式リリースになったりしたタイミングで、チーム内でGraphQLのPOCも行なったりしていたのですが、開発の状況を考慮して今回はオーソドックスにRESTful APIで開発していくことにしました。

フロントメンバーとのコミュニケーションやAPI エンドポイントの可視化のため、API仕様はSwaggerで記述することにしています。

チームでプロダクトを開発する ーペア&モブプロ、デザインスタジオー

先ほども書いた通り、ハコベルコネクトは、業界独自の業務をモデリングしているためキャッチアップしにくくチームの生産性がなかなか上がりにくい状態でした。

6ヶ月間でチームも倍増。新メンバーのキャッチアップスピードをあげたり、モチベーションを保ちつつ機能開発スピードを上げるのが重要課題になっていました。

そのため、複数人でコーディングするモブプログラミングやペアプログラミングを取り入れて、難しいドメイン知識を共有しつつ開発を進めたり、モチベーションが上がりにくい機能開発をわいわいと議論しながら進めました。

モブプログラミング用のスペースも導入され、今ではハコベルだけでなく他のチームで取り入れています。

モブプログラミングの様子

また、ラクスルの他のチームで行なっていた、コラボレーティブデザインの手法である「デザインスタジオ」も取り入れました。機能に対して色々なアイデアが出るのはもちろん、デザイナーも含めてこれから作る機能のデータ構造を共有したり、機能の背景を理解するのに役に立っています。

ハコベルチームには、運送業界出身のメンバーもいます。要件がわからない時はすぐに話を聞けるのも、チームで開発を進める上ですごく助けになりました。

新メンバー募集中です

さて、ハコベルコネクトはリリースしましたが、私たちの毎日を支えてくれている物流の現場には課題がたくさんあります。課題を解決すべく、ハコベルコネクトも成長させていきたいと思っています。

「仕組みを変えれば、世界はもっとよくなる」

エンジニアリングの力で世界を変えたいフロントエンドエンジニア、サーバサイドエンジニアを絶賛募集中です。興味を持たれた方は是非一度オフィスに遊びにきてください!

※ 2019/3/4 ハコベルマッチングからハコベルカーゴに再名称変更したためブランド画像更新しました。

MeetUpシールがとことん簡単に作れるプロダクトの話

突然ですがシールの作り方、わからなくないですか!?

ラクスルなら誰でも簡単にデザインできるサービス担当の武政です。

弊社でもミートアップや勉強会がよく行われていますが
企画にステッカーがあると一体感がでてテンションも上がりますよね。

でも忙しい中でデザイナーさんにお願いするのは申し訳ない…外注だと予算もかかる…
そんなお悩みの声に応えて、パパッとステッカーを制作できるプロダクトをリリースしました!

オンラインデザインのシール・ステッカー・ラベルです。

  • 円形、正方形、長方形が合計9サイズ
  • シール・ステッカーのテンプレートも約300点公開(2018/11現在)

MeetUp用のシールを作ろう!

私もオンラインデザインで、リリース記念のシールを作ってみました

MeetUp用シールの無料デザインテンプレートも公開!

ミートアップですぐ使えるテンプレートも用意しました!
ぜひロゴやテキスト入れて遊んでみてください。
※画像をクリックするとオンラインデザインに遷移します

①ミートアップ:おしゃれ  (円形 直径50mm)
円形はPCに貼るには定番ですね

テンプレート編集はこちらから>>

②ミートアップ:シンプル (正方形 50*50mm)
ロゴを置いて、背景色をロゴ内の色に変えるだけでそれらしくなります

テンプレート編集はこちらから>>

シールでこんな遊び方も!?

少年時代に熱中したキラキラ風シールも作れちゃいます。
③キラキラ風シール:※ホログラム加工ではありません (正方形 50*50mm)

テンプレート編集はこちらから>>

シールになった弊社CTOもニッコリ。

シール制作プロセスの何をシステムで解決したのか?

シールのデータ制作はコンテンツとしては驚くほど簡単ですが
制作データの構造が難しいという不思議な商品です。

  • 具体的に難しいポイントは「カットパス」データの作成
  • カットパスとはシールの形に切り抜くためのパスデータのこと
  • カットパスと聞いた瞬間に印刷業界以外の方は「んんん?」となりますよね

デザイナーさん以外にはこの「カットパスの理解と制作」が難しい。
これがシール作成における「できる/できない」を決定づける障壁です。


システムが解決したシール制作者の課題は「カットパスをつくる必要がない」という部分です。
これには制作が簡単になることに加え、制作作業の大幅な短縮効果があります。

このようにしてシールが簡単に作ることができるプロダクトができました。
ぜひお試しください!
https://raksul.com/online-design/sticker/

ラクスルではエンジニアを積極採用しています

ラクスルは画像処理や印刷技術、SVGに関わる開発ができるレアな環境です。
興味を持たれた方は是非一度オフィスに遊びにいらしてください!

WebpackerをやめるならWebpackManifestというgemが便利、という話

先日、社内のSlackでpixivさんのブログ記事 今日から簡単!Webpacker 完全脱出ガイド がシェアされてて、『あっ、これは…弊社でもやったやつではないか。』とおもいました。Webpackerは便利なんですけどね。

本記事はこのpixivさんのポストを受けて WebpackManifest というgemを紹介します。

ラクスルでのWebpackerを辞めた経緯

  • もともとWebpackerを使った管理画面プロジェクトがあった
  • そこにECサイトも乗せるようなった
  • package.jsonは管理画面、ECサイトで分けて管理したかった
  • Webpackerは1個のpackage.json、1個のwebpackコマンド、1個のmanifest.json前提の作りなので、package.json分けて複数のwebpackビルド処理系を作りたいラクスルの用途に合わなかった => 脱Webpacker

pixivさんのブログで紹介されてるとおりで、manifest.json を Rails に組み込むための view helper が必要になったので、弊社内でも lib/ 以下に小さなライブラリを作っていました。

gem化

そして、社内で他にもRailsアプリが立ち上がりだしてきて、『そろそろ、gem化せななあ』とおもっていたところにこのpixivさんの記事でしたので、本記事執筆にあたって WebpackManifest というgemにしました。rubygemsよりインストール可能です。このgemを使うとwebpackerを使わずに webpack の webpack-manifest-plugin が出力するmanifest.jsonに従ってview helperが asset のパスやscriptaタグをrenderingしてくれるようになります。

もともとの社内にあった view helperのメソッド名よりpixivさんのメソッド名のほうが適切でしたので、ヘルパー実装部分はpixivさんの実装を参考に組み込み直しました。

使い方

  • Webpacker gem のアンインストール
  • 代わりになる webpack.config.js の作成
  • 素のwebpackの webpack-manifest-plugin を用いて manifest.json を出力する
  • WebpackManifest gemをインストールし、↑のmanifest.jsonのパスをセットする(詳細はgemの README を参照する)
  • gem付属のview helperを使う

という流れになります。

不具合等ありましたらPRいただければとおもいます。

まとめ

WebpackManifest というgemを使ったWebpackerをやめる方法をご紹介しました。

ラクスルではエンジニアを絶賛募集してます

ご興味ありましたらどうぞオフィスへ遊びに来てください。

 

1週間やる、楽しい社内ハッカソンの作り方。

RakSul Hack Week Logo

はじめに

こんにちは。ラクスルプラットフォームチームのエンジニアの二串です。

先日、ラクスルではRaksul Hack Week #1という1週間通しでやる全員参加型の社内ハッカソンを開催しました。その運営を担当しまして、本記事では1週間やる楽しい社内ハッカソンの作り方をご紹介します。

開催の背景

もともとラクスルのエンジニア向けの制度としてHack-It Dayという月に1日、自由なテーマで開発することができる日がありました。もちろん活用はされていたものの、1日では満足いくものが作れなかったり、日々のリリースを優先してしまったり…といった課題も見えてきていました。そこで今回「Raksul Hack Week」に名称を改め、皆で1週間集中して面白いプロダクト・サービスを作ったり、新しい技術チャレンジをしたりする機会をつくろうと考えました。

第1回目となる今回のテーマは「HACK THE SYSTEM, HACK THE WORLD. (仕組みをハックすれば、世界はもっとカッコよくなる)」です。1週間通しでハッカソンをやる、というのは個人的に(そして他のエンジニア達も)初めての体験でありましたが、結果として自分たちの設定したテーマに全力を注ぐことができてよかったと思います。取り組んだ内容は記事後半の方で紹介します。

イベント概要

どんな感じのイベントだったのか?

  • 参加者はエンジニア、プロダクトマネージャー、デザイナーとする
  • ハッカソンの期間は1週間とし、期間中はハッカソン100%コミット、普段の開発業務はやらない(※ ただし緊急対応系は最優先で)
  • チーム制とする
  • 最終日に各チームは成果発表する
  • ラクスルの事業、ステークホルダーに関わることであれば何に取り組んでも良い

開催週の月曜日が祝日のため実際には前3日間開発、4日目成果発表会となりました。開催場所は企画段階で社外のコワーキングスペース等を借りるという案も出ましたが、初回ということで慣れたオフィス内開催としました。

準備

参加者の自発性を重視する形で、チーム構成は自由、また取り組む内容もチーム毎に自由に決定可能としました。また、イベント開催1ヶ月以上前から、各自で取り組みたいことを考えてもらってアイデアを膨らませてねーとお願いし、少しつづ Hack Week を盛り上げることにしました。

今回やったチームを決めるまでの流れは次の通りです。

  1. まず、社内(非参加者方面)からネタ(お困り毎など)を募集する
  2. 1を参加者に展開してアイデアの種にしてもらう
  3. 参加者は各自やりたいことをシェアする(専用confluenceページに書いてもらう)
  4. 出たやりたいことに賛同した人たちでチームを組む、もしくは3の起票者がメンバをリクルーティングしたりして組んでもらう
  5. チームを決めかねてる人たちはシャッフルで決定。取り組み内容は3を参考に決めてもらう
  6. Google Formでチームエントリ

全チーム構成が決まったのが開催の1週間前でした。この時点で大体のチームがやることもざっくり決めれている状態でした。

普段の業務に近いメンバーと組んだチームもありましたが、結構普段組まないメンツでの構成のチームもあり、結果的には何が出来上がるかな〜と期待が膨らんでくるチーム編成となりました。

ステッカー作りました(もちろんラクスルで作りました)

ハッカソン当日

ハッカソンが始まってしまえばあとは各チームもくもくと作業するだけです。社内の様々な場所で開発が行われました。

ちなみに、私は運営ではありましたがチームの一員としても参加しており期間中はがっつりと開発してイベントを楽しむこともできました。事前の準備が大事! 普段はサーバサイドの開発がメインですがHack Weekでは違う技術をということでTypeScriptNuxt.jsでフロントエンド中心のプロジェクトをやりました。難しかったですが勉強になりました!

ちなみに、1日の終わりに各チーム進捗報告をSlack #hack_week チャネルにしてもらうようにしました。進捗サマリとともに開発風景やスクショ等を共有してもらうことで、チーム間でもコミュニケーションが生まれたり、ビジネスメンバ等も様子を垣間見れたりして良かったとおもいます。

CTO泉率いるチームの開発風景。なんか楽しそうです。

 

ベトナムの開発拠点もリモート参加

取り組み内容紹介

一部ではありますがアウトプットを紹介します!

Fax2Web

アナログとデジタルとのブリッジになるための技術開発、ということでFAXとwebをつなぐチャレンジ。FAXを受信するとシステム連携されwebの注文ステータスが変更されたり、文字認識により自動入力されたりする仕組みのPoCを取り組みました。

メンテゲーム

サイトのメンテ中に遊べるゲームの実装にトライ。システム構成は Vue CLI 3 を使った静的サイト。

発表会・打ち上げの様子

発表会は1チームづつ順に発表。ベトナムの開発拠点とも接続して中継しました。

発表会の様子

 

1週間のハッカソンを振り返って話題が尽きない打ち上げとなりました

その他細かい運営のこと

参加必須のため参加者が50人弱ということでそれなりに入念に準備しました。まず、各チームの開発繁忙期と被らないようにスケジュール調整し日程を決めました。その後は運営コアメンバを招集してのキックオフ(これが開催3ヶ月前)、あとは週1回定例会を開きまして、少しづつ準備進めていきました。

なお、企画にあたっては以下の記事を参考にさせていただきました。有益な情報ありがとうございました。

まとめ

Raksul Hack Week #1 という社内ハッカソンを開催しました。

初めての長期社内ハッカソンということで、開催前には本当に盛り上がるのだろうか、普段1週間開発を止めてまでやるほどの価値が出るだろうか、といった不安も運営的にはありましたが、結果的には開催後のアンケートや、また経営陣へのイベント後の振り返り報告でも好評で良いイベントになりました。

普段の業務では要件通りに仕事をするということは大切ではありますが、今回のようにエンジニアやデザイナーの自発的でクリエイティブな発想で仕事をするというのも価値があることだなと感じました。また、使ったことのない技術スタックを試す機会としても良かったとおもっていて、実際今回使った新しい技術を業務に取り入れることにしたチームもありました。

今後もラクスルのテックカルチャーの1つとして開催していければいいなとおもいます。

社内ハッカソンイベント Raksul Hack Week #1 を開催中です

RakSul Hack Week Logo

エンジニアの二串です。

最近少しづつ朝晩が冷えるようになってきて秋の到来を感じますね。さて、秋といえばハッカソンですよね(!!?)

というわけで今週、ラクスルでは社内ハッカソンイベント「Raksul Hack Week #1」 を開催しています。

RakSul Hack Weekとは?

もともと月に1日、エンジニアは直接的な業務を離れ自由に開発をしていい Hack It Day という制度がありました。今回はそれを拡張し、1週間に渡って、全社的に(エンジニア、プロマネ、デザイナー混ぜて)やろうよ!というイベントです。さらりと書きましたが、1週間普段の開発を止めて、自由な発想でおもいっきりやってみる企画になります。今回が記念すべき(?)第1回目となります!!!

今回はやりたいことを事前にメンバーから集めて、出てきたアイデアをベースに数名1チームでチームを組んで、チーム=プロジェクトを作って取り組む方式を採用しました。

今週はシルバーウィークで月曜がお休みなので火曜から金曜まで計4日間の開催し、最終日にはチームごとの成果発表を開催します。成果発表会では、参加者の他、非参加者(ビジネスやカスタマーサポート)も交えての会となります。

楽しく作戦会議中の様子

各チームで作業が進んでます

今回は1週間ということで普段なかなか試せない技術スタックを試してるチームも多く、参加者達はそれぞれ盛り上がって来ているようです。

どんなことをやってるの?

例えば、

  • AWS lambda を使ってのFAXとウェブをつなげるサービスの開発
  • Nuxt.js + TypeScript で作るSlackと連携したウェブサービス
  • AIによる注文審査の自動化システム

などなど…. 技術領域も解決する課題も様々。今回は12チーム、総勢41名が参加しています。

もくもく作業中!?

さて、どんな成果物ができるでしょうか!!? 今から楽しみです。

また詳細はレポートします。

wifi打刻システムをつくった話

出社時/退社時の打刻ってとても面倒くさくないですか?

わかっていてもついつい打刻するのを忘れてしまいます。そして月末の勤怠締めで打刻忘れの箇所を手動で1つずついれていく。。とても非生産的ですね。

そこでシステム的にこの問題を解決するべく、メルカリの記事を参考にwifi打刻システムをつくりました。

wifi打刻システムとは社員さんが持っている端末(携帯やPC)がwifiに繋がった時に出社打刻をし、最後にwifiに繋がっていた時間を退社時刻として退社打刻を行うシステムです。

それではwifi打刻システムを作る方法について説明していきます。大きくわけて3つのステップに分けることができます。

  • 社員が持っている端末がwifiに繋がっていることを検知する
  • wifiに繋がった端末から社員を特定する
  • wifiに繋がった時に出社or退社の打刻をする

社員が持っている端末がwifiに繋がっていることを検知する

携帯やPCなどの端末にはMac Addressという端末毎に固有な物理アドレスが割り振られています。

wifiルーターに繋がっている端末のMac Addressを取得することでwifiに繋がっていることを検知しました。

Mac Address取得する方法はいくつかありますが、今回はsnmpwalkというコマンドを使いました。

ルーターと同じネットワーク内にあるサーバー上でsnmpwalkコマンドを打つと接続している端末の情報が得られます。

あとはその出力をparseすることでwifiに接続している機器のMac addressの一覧を取得しました。

wifiに繋がっている端末から社員を特定する

wifiに繋がっている端末のMac Addressの一覧が取得できたので、どのMac Addressがどの社員のものなのか特定する必要があります。

今回は単純にMac Addressと社員番号を紐づけるデータベースを用意しました。

どのMac Addressがどの社員のものなのかはwifi打刻の利用申請を出す際にMac Addressも教えてもらうようにしました。

iPhone/AndroidのMac Addressの調べ方は以下のサイトが参考になると思います。

これでMac Addressの一覧を社員番号の一覧に変換することができました。

wifiに繋がった時に出社or退社の打刻をする

社員番号の一覧が取得できるようになったので、後は出社or退社の判定をして打刻をすればよさそうです。

判定を行うために社員番号を取得するスクリプトをバッチで数分間隔で実行し、wifiに繋がっている社員番号一覧を取得した際に、その時の時刻をwifiに接続していた時刻として社員番号と共に各社員番号について記録しておきます。

{
  1: { # 社員番号:1の人がいつwifiに接続していたかを記録
    connected_at: "2018-09-05 14:31:52 +0900"
  },
  2: { # 社員番号:2の人がいつwifiに接続していたかを記録
    connected_at: "2018-09-05 14:31:52 +0900"
  },
}

出社についてはその日初めてwifiに繋がった場合に、その時刻を出社として打刻すればよさそうです。

退社については最後に接続した時刻と次にwifiに接続した時刻が一定時間以上離れていた場合に退社時刻として打刻するようにしました。こうすることでランチなどで外出してwifiが切れた時でも退社打刻されないようにしました。

ラクスルの勤怠システムにはAPIで打刻する機能があったので出社or退社と判断された時にAPIを使って打刻を行いました。また打刻されたかどうかわかるようにAPIで打刻した際にslackでDMを送って通知するようにしました。

これでwifiに繋がった時に出社/退社打刻してくれるwifi打刻システムが出来上がりました。

まとめ

打刻忘れや打刻修正などの無駄な作業をなくすべくwifi打刻システムをつくった話を紹介しました。

実際にwifi打刻を使っている社員さん達から「すごい便利」「快適になった」と言った声も頂いています。wifi打刻の仕組み自体はとても簡単なので、やろうと思えばすぐに導入できると思います。

打刻が面倒だと感じたら導入を検討してみてはいかがでしょうか。

ラクスルではエンジニアを積極採用しています

ラクスルに興味を持たれた方は是非一度オフィスに遊びにきてください!

| by

宛名印刷ができる年賀状・喪中はがきをリリースしました

はじめに

ラクスルでエンジニアをしている藤田です。
先月、「年賀状・喪中はがき」という商品をリリースしました。
ラクスルで扱っている印刷サービスは基本的に、PDF等でアップロードされた印刷データを対象の商品(チラシや名刺など)に印刷してお客様へお届けするというものです。
今回リリースした商品は宛名印刷という機能があり、印刷データと一緒に宛名リストをアップロードしてもらい、印刷データと共にそれぞれの宛名をはがきに印刷します。他の商品では全く同じ印刷物が注文された部数だけ出来上がるのに対して、宛名印刷では一つ一つの印刷物が宛名の箇所だけ異なる内容になる点が特徴です。
一見するとシンプルに思われるこの機能ですが、実際に開発してみると意外と奥が深く面白かったので紹介したいと思います。

宛名印刷の難しさ

宛名印刷の難しさは「どうやって宛名を違和感なく宛名面にマッピングするか」にあります。組版処理とも呼ばれます。
下の画像を見ていただくと伝わるかと思うのですが、役職・部署の有無や文字数などで宛名面のどこに印刷するかが大きく変わります。
そのため、様々なパターンを考慮する必要があり必然的に開発も難しくなります。

今回はこのよう組版処理を実装するにあたって、開発スピード等を考慮して既成の組版ソフトを利用する方針としました。このソフトはWindows上でしか動作しないため、別途windowsサーバーをたてる必要がありました。

システム概要

少し簡略化していますが、組版処理に関連するシステムの概要図は上記のようになっており、次の通り処理されていきます。上述の組版ソフトは⑥で使用しており、SQSからキューを取得したりS3にアップロードしたりといった周辺の処理はWindowsとも相性が良いGolangで開発しました。

1. ユーザーが印刷データと宛名リスト(CSV)をアップロード
2. 印刷データと宛名リストをS3に保存
3. SQSに組版処理をエンキュー
4. SQSからキューを取得
5. S3から印刷データと宛名リストを取得
6. 組版処理を実施
7. 処理結果ファイルをS3に保存

Webアプリケーションと組版ソフトが動作するWindows Serverを繋げる方法として、Amazon SQSを利用しました。Windows Server上にAPIサーバーをたてる方法もありますが、やや開発コストが増える点と、宛名リストの件数によっては組版ソフトの処理に時間がかかるためキューイングが必要だったこともあり、SQSを採用しました。

マニアックな機能: CIDチェック

今回、開発した機能の中で面白かったものがCIDチェックです。CIDとはアドビ社が定めている文字ごとに一意に振られる番号のことで、フォントの文字を識別するために用いられます。例えば、フォントでは異体字の字形を区別する必要がありますが、Unicode等の一般的な文字コードでは同じコードが割り当てられていることがあるため、CIDが利用されます。
宛名印刷では、宛名に用いられるフォントとして正楷書CB1、リュウミンなど4種類から選択することができます。これらのフォントはカバーしているCIDの範囲以外の文字には使用することができないため、宛名リストで入力された文字が範囲内に含まれているかどうかをチェックすることが必要です。
CIDチェックの実装方法ですが、

1. 入力された文字に紐づくCIDを取得する
2. 取得したCIDが範囲内に含まれるかチェック

という順序でチェックをしていきます。
私が探した範囲ではRubyのライブラリ(CIDチェックはRailsアプリ内で行います)で文字列からCIDを取得するようなものはなかったため、UTF-8のコードとCIDをマッピングしたファイルを作成してUTF-8からCIDを引けるようにしました。
幸い、アドビ社が提供しているcid2code.txtというファイルにCIDと主な文字コードとの対応表がありましたので、このファイルを利用することでマッピングファイルを作成することができました。
細かい話になりますが、最終的に実装は下記のようになりました。

# app/validators/adobe_japan13_validator.rb

class AdobeJapan13Validator < ActiveModel::EachValidator
  def validate_each(record, attribute, value)
    return if value.nil?
    chars = invalid_chars(value)
    record.errors.add(attribute, :invalid_character, invalid_chars: chars.uniq.join) if chars.present?
  end

  class << self
    def valid_strings_map
      return @valid_strings_map if @valid_strings_map
      @valid_strings_map = {}
      File.open(Rails.root.join('config', 'adobe_japan13.dat'), 'rb') do |f|
        f.each_line do |line|
          line.chomp!
          _cid, utf8 = line.split("\t")
          @valid_strings_map[utf8] = true
        end
      end
      @valid_strings_map
    end
  end

  private

  def invalid_chars(target_string)
    target_string.each_char.reject do |c|
      utf8 = c.unpack1('H*')
      self.class.valid_strings_map.key?(utf8)
    end
  end
end

バリデーターの中で読み込んでいる adobe_japan13.dat がマッピングファイルになっており、次のような内容になっています。左側の数字がCID、右側がUTF-8に対応しています。

# config/adobe_japan13.dat
1	20
2	21
3	22
4	23
5	24
6	25
7	26
8	27
9	28
10	29
11	2a
12	2b
13	2c
14	e28091
# 以下略

おわりに

この記事では宛名印刷という開発案件について紹介しました。
組版処理やCIDチェックといったものは印刷サービスならではで、他の会社ではあまり経験できないラクスルらしいテーマを紹介できたかなと思っています。