エムスリーテックブログ

エムスリー(m3)のエンジニア・開発メンバーによる技術ブログです

ダイヤ可視化ツール技術編

エムスリーの山本です。趣味で作っていたダイヤ可視化ツールの技術的な側面の話をします。

作ったもの

ダイヤ可視化ツールです。時刻表ではありません。鉄道路線を比較するにあたって、本数の多寡や速達列車の比率とか本数の減り方とかが一発で分かるように可視化するものです。何のために必要かというと、鉄オタがダイヤ知見を深めるのに使います。つまりそういうやつです。

たとえばこれは小田急の昼頃の1時間に運行されている列車なんですが、

  • 基本は20分間隔ダイヤ
  • 主要な駅は10分間隔で有効な列車が来るように調整されている
  • 本線は3-6-6-6で優等列車の比率が高い(長距離利用客が多そう)
  • 千代田線の直通はあまりやる気がなさそう

などが分かります。実際、新宿駅の利用者数の次に多い駅は町田駅だったりして、相当に長距離の利用者が多いのが特徴の路線です。

また、鉄オタならみんな架空鉄とか想像するのに使ったりするだろうとおもって、誰でも自由にデータ作れるようにしてみました。 最終的なレンダリングはコンピュータ側で扱うのが容易なJSONからレンダリングするのでJSONを作る必要がありますが、人間がJSONを直接書くのは面倒くさいので、CSVからJSONに変換するツールを別途用意しています。JSONファイルはWebで公開されているものであれば大体そのまま表示できます。内部的にはSVGでレンダリングしているので、そのままSVGをファイルに保存することができます。

実際のサイトは以下です。

https://ponkotuy.github.io/diagram-svg/menu.html

技術的な話

全体の設計

特にSPAを目指してなくてページ毎にTypeScriptをビルドしています。ページは3つあります。

  • index.ts(レンダリング本体)
  • menu.ts(メニュー部)
  • csv2json.ts(CSVからJSONに変換する仕組み)

作ったもののコアな部分はindex.tsで、JSONを読み込んでSVGレンダリングを行っています。

csv2json.tsはそのJSONを作るのが地味に面倒くさい、GoogleSpreadsheetからJSONを作成したい、となったので作りました。昔はExcel馬鹿にしてたんですが、表計算ソフトはデータ作成のUIが非常に優れているという認識に改めました。CSVなので特にGoogle Spreadsheetに限定はしてないです。(余談なんですがGoogleSpreadsheetのCSV出力、更新が遅いのですが何とかなりませんかね?)

フレームワークとしてVue.jsを使っています。一番大きな理由は慣れていたからですが、このような小さなツールだとあまり重厚長大なフレームワークを使いたくはないという理由もあります。

言語

言語は基本的にTypeScriptです。JavaScriptあんまり好きではないんですが、型があるとだいぶん書きやすくなります。型システム的にもなかなか興味深いです。リテラル型とか。リテラル型を活用すると、以下のような1-10の値のみ許容する型、みたいなのが作れます。(Union Typeとのあわせ技です)

export type Speed = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10

https://github.com/ponkotuy/diagram-svg/blob/e68bc644bc6d9ecc2f383ffdb95e3dcc12823ae5/src/common/train.ts#L24

ビルド

ビルドはWebpack。本当はgulp使いたかったけどシェアがWebpackの方が圧倒的に高いという話を聞いておそるおそる使ってみました。複雑なことはしてないので評価しづらいですが、不都合はないです。

GitHub Actions

このツールは、作った本人も沢山JSON作って公開しているので、JSONを追加したらmenuにも自動で追加して、git pushするだけでGitHub Pagesに反映される仕組みをGitHub Actionsで作りました。

GitHub PagesはGitHubにあるものをWebページとして公開できる仕組みで、色々なやりかたはありますが、gh-pagesブランチにHTMLを置く方法で使っています。

GitHub Actionsは他の人が作ったものをplugin的に使う機能があり、gh-pagesブランチに成果物をcommitするものもあります。

https://github.com/peaceiris/actions-gh-pages

実は最初は自前でそのためのスクリプトを作っていたんですが、GitHub Actionsの実行権限ではGitHub Pagesの中身を変更することができないらしく、GitHub Actionsだとgh-pagesは更新されるのにサイトは更新されない仕様があって、特に理由がないならこれを使った方がいいです。

  1. TypeScriptをビルドする
  2. JSONリストをシェルで錬成
  3. 以上の変更を先のAction使ってgh-pagesにpush

という流れになっています。

レンダリング部

SVGのレンダリングはライブラリ使っています。当初snapsvgでレンダリングしてたんですが、webpackかTypeScriptと相性が悪い感じなのか動かなかったので、途中でRaphaelに変更しました。大天使の名前を冠する厨二病感がすごい。snapsvgと違って@typesが入ってて型の補完効くのが良いです。

実際にSVGをレンダリングしている部分はひたすら配置に合わせてレンダリング位置を調整していくだけです。調整が退屈な上に気を抜くとすぐ読めなくなるほど複雑化します。今まであんま経験ないプログラミングなので結構苦戦しました。新機能入れるたびにリファクタしてます。あと綺麗なJSONを前提に作っているので、変なJSON食わせると簡単に鼻から悪魔が出てきそうです…。

We are hiring !!

おきまりですが、エムスリーでは技術に自信があるとか、ビジネスをまわしていける、というエンジニアを募集しています。見ていってください。

jobs.m3.com

ユーザーインタビューを通じてリーン顧客開発を実践する

f:id:iwata1990:20161027132832j:plain
『リーン顧客開発』の著者 Cindy Alvarez

こんにちは。 エムスリーエンジニアリンググループ、プロダクトマネージャーの岩田です。
今回はユーザーインタビューを通じてリーン顧客開発を実践した話を書きます。

MVPの要件が全くミニマムでなくなってしまう、PDCAのサイクルが遅すぎる、といった(ありがちな)お悩みをお持ちのプロダクトマネージャーの皆様に役に立てるような情報を発信できればと思います。

続きを読む

Docpediaでの品質計画とQA活動

こんにちは。エンジニアリンググループ QA チームの窪田です。以前、中村の記事福林の記事で紹介させていただいた、Docpedia チームで QA エンジニア*1 をやっています。 QA エンジニアという職種は所属する組織によって活動内容にバリエーションが有り、会社の外からだとどんな活動をしているかあまり知る機会がないと思います。本記事では、QA 活動の簡単な紹介と、Docpedia の QA エンジニアをやっていて品質計画をきちんと作成することの大切さを改めて感じたので、エムスリーの品質計画についての説明をしたいと思います。

*1:QA とは Quality Assurance の略で直訳すると「品質保証」となります。

続きを読む

アンケート作成システムのサーバサイドをKotlin + Quarkus + Doma, CQRSで構築している話

エムスリー エンジニアの岩本です。

現在私の所属しているチームでは、以前作成したアンケートを作るためのシステムのサーバサイドリプレースを検討しています。 ちなみにクライアントサイドは下記のものです。

qiita.com

  • 採用した技術
  • なぜQurkus?
  • SQLアクセスはDoma
    • Domaの記述方法
    • Quarkus + Domaで見つかった問題
  • 設計方針はCQRS
  • まとめ
  • We're hiring!

採用した技術

以前のサーバサイドはJavaで作られており、再利用可能な既存の資産もあるため、JVM系の言語を検討しています。 他のシステムではKotlin + SpringBootを使っているため同様の構成も考えられるのですが、 SpringBootが開発しているうちに重くなり、起動に数十秒かかるようになり開発スピードが遅くなってしまったことや 新しいものに挑戦したいという技術者の考えを重要視しているため、Kotin + Qurkus + Domaを採用することにしました。

続きを読む

Goのreflectパッケージと型の内部表現について

エムスリーエンジニアリンググループの木村です。 普段はBIRという医療従事者の会員向けアンケートをベースに、製薬会社へのマーケティング支援を提供するチームでソフトウェアエンジニア兼チームSREをやっています。

入社とほぼ同時にGoを書き始め、そろそろ1年が経とうとしています。 主にWebアプリケーションのバックエンドの実装にGoを利用していますが、その他にも小さいCLIツール等もGoで書くことが多くなってきています。

今回は業務でWebアプリケーションを開発していくにあたって疑問が生じた点とその時行ったreflectパッケージの調査について書いていきます。

f:id:itto_ki:20171021190042j:plain
水面などに写った被写体を撮った写真をリフレクション写真と呼ぶことがあります。

続きを読む

代数的データ型とその双対性

こんにちは,エムスリーエンジニアリンググループの榎田(Twitter: @niflh)です.今年度の4月に新卒で入社しました.入社してからは AI・機械学習チームというところで機械学習プロダクトのインフラのお仕事をしていましたが,11月末からチームを異動し,Unit4 というチームにいます.このチームでは医療系ポータルサイト m3.com のメディア系サービスや,全ページに共通で表示するヘッダーメニューの開発などをしています.

これらの開発では Scala が使われていることを異動後に知りました.私は直近で Scala を使う案件は持たない予定ですが,少なくともレビューで Scala のコードは読むので,いい機会だと思って年末年始から勉強を続けています.その際に読んだ "Essential Scala"*1 という本にて,「代数的データ型」(Algebraic Data Type, ADT)という概念が紹介されていました.この概念について,主に理論的な観点から色々調べてみたら面白かったので,その話をします.

*1:公式で pdf が配布されているので無料で読めます.こちらからどうぞ: https://underscore.io/books/essential-scala

続きを読む

Goのinterfaceの使いかた 基礎編

エムスリーエンジニアリンググループ/BIRの滝安(@juntaki)です。 BIRはビジネスインテリジェンス&リサーチの略で、そこでは医療従事者の会員向けアンケートをベースに、製薬会社へのマーケティング支援を提供する事業を行っています。BIRではエムスリーではじめてGoを導入し、今ではほとんどの新規システムをGoで立ち上げています。(一部でKotlinもつかっています)

Goでは、interfaceの使い方を知ることで、依存関係、コンポーネントの責務を整理した設計を考えることができます。 この記事ではGo導入当初にメンバに説明した、interfaceの基本的な使い方やTipsを整理していきます(すでに、Goをよく知っている人には当たり前すぎるかもしれません)。

また、この記事の後にBIRのメンバーがGo関連記事をいろいろ書く予定となっています!

続きを読む