Medley Developer Blog

株式会社メドレーのエンジニア・デザイナーによるブログです

Classi / メドレー合同でAWS勉強会を開催しました!

みなさん、こんにちは。開発本部エンジニアの新居です。
 
先日12/7(金)、AWSのre:Inventの余韻冷めやらぬ中、メドレーと教育現場支援のICTプラットフォームを展開しているClassiさんとの合同でAWS勉強会を開催しました。 
サブタイトルに「AWSを最大限活用して教育/医療業界の課題をスマートに解決していく」とある通り、教育/医療業界ならではの課題を両社がどのようにAWSを使って解決しているのかといったことを中心に、各社3名ずつ発表を行いました。
 
当日はSNS禁止で外部公開できないディープな話などもありましたが、この記事では簡単に当日の発表内容を紹介したいと思います。

f:id:medley_inc:20181213125501j:plain場所はサポーターズさんのレンタルスペースをお借りしました 

発表内容の紹介

1. ガイドライン対応のためのAWSセキュリティ系マネージドサービスの活用(メドレー 中畑)

一人目はメドレー中畑から、「CLINICSカルテ」と「3省3ガイドライン」(開発当初は3省4ガイドラインでしたが、2018年7月から3省3ガイドラインに変更されました。以下3省3ガイドライン、「CLINICSカルテで利用しているAWSのセキュリティ系マネージドサービス」について発表しました。 

発表内容の要約

先日のre:Inventで発表されたCloudWatch Logs Insightsを早速導入していたりと、新しい技術に対して高いアンテナを持ち、日々改善を続けています。
 
また、プロダクトの特性を踏まえて様々なマネージドサービスを活用することで、自前で仕組みを用意することなくセキュアにシステムを構築でき、プロダクト開発に集中できる環境作りを心掛けていることが伝わる発表でした。

2. システムをEC2からFargateへ安全にリプレイス(Classi 高田さん)

f:id:medley_inc:20181213125515j:plainClassi 高田さんの発表

二人目はClassi高田さんで、現在EC2上で動いている既存システムをECSのFargateに安全に移行する方法についての発表でした。

発表内容の要約

  • ECSの起動タイプには「EC2」と「Fargate」の2種類があり、マイクロサービスアーキテクチャでアプリケーションの種類が多いケースなどではEC2インスタンスの管理が不要なFargateが便利
  • Fargateへの移行の際は「既存の環境のシステムと相互に切り替えが可能なこと」と「切り替えが容易であること」などを考慮
  • 新環境と既存環境の振り分けにはOpenRestyを採用
Fargateへのリプレイス時などには参考になる事例ではないでしょうか!

3. クライアント認証対応のためのAWS構成の変遷(メドレー 田中)

f:id:medley_inc:20181213125521j:plainメドレー 田中の発表

 【発表資料は非公開】
 
三人目はメドレー田中で、一人目の中畑に引き続き、3省3ガイドラインへの対応について発表しました。
 
3省3ガイドラインの中でもシステム構成に特に影響が大きい内容として
  • サービス提供に用いるシステム、アプリケーションを日本国内法の適用が及ぶ場所に設置すること
  • クライアント証明書を利用したTLSクライアント認証を実施すること
があり、これらをAWSを利用してどのように対応したかという内容でした。
 
発表資料は非公開なので詳細には触れませんが、この辺の話についてはこちらの記事にもありますので、興味がある方は御覧いただければと思います。
 

4. ClassiでのAmazon Elasticsearh Serviceの活用(Classi 中村さん)

f:id:medley_inc:20181213125527j:plainClassi 中村さんの発表

https://speakerdeck.com/nakaearth/classidefalseelasticsearchfalseli-yong-nituite

四人目はClassi中村さんで、ClassiでElasticsearchをどのように利用しているかについての発表でした。 

発表内容の要約

  • Classiの「コンテンツボックス」と「校内グループ」の機能でAmazon Elasticsearch Serviceを利用
  • 「コンテンツボックス」では、レスポンスが10秒以上掛かっていたものが1~2秒まで短縮できたが、Elasticsearchのバージョンアップに追随するためにどのように対応したかの紹介
  • 「校内グループ」では、当初学校毎にindexを作成していたが、サービスの成長に伴い学校数が多くなりindexの数は数千以上に。ここから安定稼働にためにどのような対応したかの紹介
Elasticsearchは弊社でも利用しており、自分が担当している別のサービスでは1 or 2系から5系以上へのバージョンアップ(ちなみに3系4系はありません)も過去に経験しており、この辺の泥臭さは個人的には共感値が高かったです!

5. クラウドと院内システムをつなぐためのAWS IoTの活用(メドレー 有馬)​​

f:id:medley_inc:20181213125536j:plainメドレー 有馬の発表

【発表資料は非公開】
 
五人目はメドレー有馬で、クラウドと院内システムをつなぐためのAWS IoTの活用について発表しました。
 
CLINICSカルテを始めとした電子カルテでは、医療機関内の院内機器などの外部機器やサービスと連携する必要があります。
 
こうした外部機器やサービスと、CLINICSカルテをどのように連携させていくのか?また可用性を担保しつつ、AWSをどう活用して実現していくのかという内容でした。
 
こちらはSNS禁止で外部公開できないディープな話でしたので、また別の機会でお話できるときがあればという感じですね。 

6. ソシャゲ業界出身者が驚いた、学校教育支援システムの裏側(Classi 本間さん)

f:id:medley_inc:20181213125547j:plainClassi 本間さんの発表

最後六人目はClassi本間さん。Classiさんもメドレーも、前職でソーシャルゲーム業界だったメンバーが多数在籍しており、ソーシャルゲームの開発との違いなども絡めてClassiでのAWS活用事例の発表をいただきました。

発表内容の要約

  • 教育業界特有のガイドラインについて
  • 本番環境への接続制限
  • ECS化とCloudWatch Logsの利用
  • データベースの監査ログ取得
  • CloudWatchLogsの費用感
  • ManagementConsole操作権限
最後のまとめのところで
  • 学校向けのサービス提供は、セキュリティへの理解が重要
  • セキュリティを保ちつつ、運用負荷を軽減する機能がAWSにはたくさんある
  • とはいえ、もっともっとAWSを活用できる筈。なので…
とありましたが、この辺は医療業界ともリンクする部分だよなあと改めて実感することができました。本番環境への接続制限など結構シビアにされているところも垣間見え、興味深いお話を聞くことができました。
 

懇親会

発表終了後は、お酒とフードを交えてざっくばらんに交流しました。

f:id:medley_inc:20181213125552j:plain懇親会の様子

f:id:medley_inc:20181213125602j:plain本間さんのre:Invent参加レポート

本間さんからはre:Inventの参加レポートもあり、現地で体験した人の生のレポートが聞け、その興奮を少し感じることができたのは良かったです!

まとめ

教育業界と医療業界はもちろん別業界ではありますが、それぞれの業界で特有のセキュリティ要件があり、それらをAWSでどのように解決していくかなど、リンクする部分も多々あることを実感することができました。
 
そして両社共、AWSに詳しいメンバーが多数在籍しており、AWSをフル活用して効率良く柔軟性を持たせたシステムを構築していることが垣間見えた会となりました。
 
教育/医療業界というとWeb系のエンジニアにとってはまだまだ未知でよくわからないイメージなのかなあと思います。実際この業界でエンジニアとして働いていると、レガシーなシステムや業界特有の慣習がサービス開発の障壁となることもあります。
 
しかしそういった障壁や課題を、新しい技術を適切に用いてうまく解決していくことがやりがいのひとつですし、そのような課題解決のひとつひとつがエンジニアとしての成長の糧にもなるのではないでしょうか。
 
両社の歩み教育業界と医療業界のそれぞれの発展になればとても素晴らしいことですし、その担い手となる仲間が一人でも多く増えることを切に願っています。

f:id:medley_inc:20181213125557j:plain

最後に両社のメンバーで記念撮影 
 
「新しい医療体験を創造する」
メドレーで働くクリエイターたちのストーリーを公開中。ぜひご覧ください。
 

HTML5 Conference 2018にメドレーが協賛しました!

こんにちは。開発本部の日下です。昨年新卒として入社してからはや1年半、最近は医療介護の求人サイト「ジョブメドレー」にてサーバーからインフラ近くまでをメインに担当しております。
 
先日開催されたHTML5 Conference 2018にメドレーがスポンサーとして協賛させていただきました。
今までWebフロントをメインとしたカンファレンスに参加する機会がなかったのですが、こういった縁があり僕も参加させていただきましたので、当日の様子をレポートさせていただきます。

HTML5 Conferenceとは

HTML5 Webに関する最新技術のトレンドを集め、交流する祭典として2011年にChrome+HTML5 Conferenceとして始まったカンファレンスです。
以降HTML5 Conferenceとして開催し、今年で7回目の開催となります。
定員枠は年々埋まるのが早くなっているそうで、今年は1600人の定員が1日で埋まったほどの人気でした。
 
f:id:medley_inc:20181207020902p:plain
今年のテーマは「The Web is shifting to the next gear」

会場の様子

500人が収容できる大講堂や、可動式の壁で自由に大きさを変えられる講義室など会場自体はとても整備されていました。
一方で立ち見、入場規制をうけてしまうほど人が多く盛況だったことが印象的でした。

f:id:medley_inc:20181207021007p:plain

f:id:medley_inc:20181207021047p:plain

f:id:medley_inc:20181207021114p:plain弊社リーフレットを発見!

セッション

各セッションでは、スピーカーの方々がWebフロントに関する最新技術の様々なトレンドの発表をしていました。
参加した中からいくつか気になったセッションを紹介します。

通常セッション

TypeScript Evolution by 倉見洋輔
弊社でもTypeScriptを実運用しているプロダクトがあり、またFlowを使用している他プロダクトもTypeScriptへ移行しようかという話がでています。
そのため、TypeScriptに関するディープな話しが聞きたいなと思いこちらのセッションに参加しました。
 
倉見さんによる本セッションでは、TypeScriptに関する概要から最新情報まで、40分で78枚のスライドをまさに駆け抜けるかたちで紹介いただきました。
 
 
@typesのリポジトリ、リリースサイクル、TC39などとの兼ね合いと言った基本的なTypeScriptに関する情報から最新の3.x系に含まれる変更まで、具体的なコードと共に紹介いただけたのでわかりやすいセッションでした。
 
特に構造的部分型は初めて聞いたキーワードだったのですが、例えなどを交えた説明がとても腹落ちしたことが印象的でした
これを機型に関する知識を深めようと考えています。
 
PWAの導入で得られた成果と見えてきた課題 from 宍戸俊哉
今回のカンファレンスでも多くのセッションがパフォーマンス絡みでしたが、この分野はビジネスに直結するため、Webサービスをしている上では重要な分野です。
もちろん弊社もパフォーマンスに関してもより良くしていこうと常に意識しています。
 
そのため、今年5月のGoogle I/Oでも紹介されたことも記憶に新しい日経さんの事例は聞いておきたいと思い参加しました
 
 
Team Performance Day(通常業務はせず、パフォーマンス改善のみを各自行う日)といった日経のパフォーマンスに関する文化や、PageSpeed InsightsやSpeedCurveなど実際に使用しているツールやモニタリングの様子など、事例を交えての発表だったのでとてもイメージしやすくかったです。
 
また、Performance Budget(パフォーマンス関連のメトリクスに対する予算)など最新の情報も事例を交えて紹介いただけたので、とてもためになりました。
 
その他のセッション
残念ながら見に行くことができなかったセッションも多々ありましたが、Twitterのハッシュタグがとても良く整備・周知されているため、発表の様子やスライドなど後から他の部屋の情報を入手するのに非常に役に立ちました。
 
また、動画もしばらくしたらHTML5 Conference側から公開されるようですので公式Twitterまたは公式YouTubeアカウントを見ておくと良さそうです。公開されたら参加していないセッションはもちろんのこと、参加したセッションも復習がてら見てみようと思います。

スペシャルセッション

最後に行われたスペシャルセッションでは、LTやWeb標準に関する難易度の高いクイズがありました。
 
LTではAMP対応の話から始まりPureScript、UNIQLOのパフォーマンス改善、CSS組版の話しやブラウザの内部構造の話など、濃縮されたWebフロントに関する情報が得られたのでとても勉強になりました
 
クイズではWeb標準に関するかなり高度な(例えばある時期はこの回答が正しいが、現在だとこちらが正しいといったような)選択肢が散りばめられているひっかけ問題が出題され、その解説込みでWebの歴史の一部を覗くことのできたとても楽しい会となりました。
 
いずれも現時点でライブ配信アーカイブが公開されていますので、気になる方は覗いてみると面白いかもしれません。

まとめ

はじめてのWebフロントメインのカンファレンスへの参加でしたが、Webに関する最新技術の様々なトレンドの事例を含めた実務に近い知識を得ることのできるとても刺激的なカンファレンスでした。
Webフロントに関しては「フロントエンドに再入門する」という社内勉強会で基礎的なところを学んでいましたが、最近はサーバーがメインだったこともあり情報が不足しがちでした。
今回のカンファレンスは、特に不足を感じていた最新情報をアップデートする良い機会となりました。
 
また、長年運営されてるイベントで公式のTwitterハッシュタグがよく整備・周知されていたため、各セッションの資料が収集しやすかったのはとても助かりました。
その他にも、通常のセッションの他にクイズなど会場参加型のものもあり、開催側が参加者を飽きさせない工夫がそこかしこにあり、カンファレンス全体を通して楽しむことができました。
 
来年もチャンスがあればまた参加したいと思います。
 
企画された方も参加された方もお疲れ様でした!
 

【2018/12/7開催予告】Classi / メドレー 合同でAWS勉強会を開催します!

f:id:medley_inc:20181204165947j:plain

みなさん、こんにちは。開発本部エンジニアの平木です。

さて、いよいよ12月に突入して世間の雰囲気も師走に相応わしいムードになっている中、みなさんいかがお過しでしょうか?

来たる2018/12/7(金)にメドレーと教育現場支援のICTプラットフォームを展開しているClassiさんの合同でAWS勉強会を開催します。

realtech-night.connpass.com

そこで今回は主にメドレーの発表はどのようなものがあるかをちらっと、ご紹介しながらイベントの告知をしようと思います。

なぜ、Classiさんとの合同イベントをするのか

弊社メドレーは医療・ヘルスケア分野の課題解決するサービスを展開しており現在は5つのサービスを運営しています。全てのサービスでAWSを活用しており、その恩恵をフルに活かして日々運用をしています。Classiさんも全国の教育機関で使われるサービスのインフラをAWSで構築されています。

医療業界のメドレー、教育業界のClassiさんと業界は全然違うのですが、国の施策や法律に密着したサービス運営をしている点や、社会のインフラ的な事業にチャレンジしている点、もちろん先ほど紹介したようにAWSをフル活用している点などの共通項がありました。

こうしたことから、それぞれの業界ならではの話も折り混ぜたAWSの活用・運用・構築などの事例を合同で発表すると面白いのではないか?ということで実現しました。

メドレーの発表を少し頭出し

ということで実現したこの勉強会ですが、メドレーのセッションのタイトルと内容を少しだけご紹介していきたいと思います。

ガイドライン対応のためのAWSセキュリティ系マネージドサービスの活用

そもそもガイドラインとは何ぞや?という話になってきますが、"CLINICSカルテ"を構築する上で避けては通れなかった3省4ガイドラインという、関係省庁から出されていた医療情報取り扱いにおけるガイドラインです。(現在は3省3ガイドラインになっていますが…)

このガイドラインに準拠するためにどのようにAWSの各サービスを使ってCLINICSカルテのインフラを構築しているか?という発表を中畑からします。

クライアント認証対応のためのAWS構成の変遷

田中からは、こちらもガイドラインで対応必須とされている"クライアント認証"をCLINICSカルテではどのように実現しているか?というお話をします。

AWS上に構築されたCLINICSカルテで、紆余曲折ありながらクライアント認証を実現させるための苦労話を発表していきます。

クラウドと院内システムをつなぐためのAWS IoTの活用

CLINICSカルテを始めとした電子カルテでは、医療機関内の院内機器など外部の機器やサービスと連携する必要があります。

こうした外部機器やサービスと、CLINICSカルテをどのように連携させていくのか?また可用性を担保しつつ、AWSをどう活用して実現していくのかというセッションを有馬からお話します。

まとめ

このように、色々な制約などがあるなかで、AWSをどのように活用しているのかというのが違った側面から分かるようなセッション内容になっていると思います。

また、発表者の1人Classiの本間さんは先日のre:Invnent 2018に参加されてきたとのことで、現地のお土産話などが懇親会で聞けると思います!

年の瀬も差しせまってきた忙しい中だとは思いますが、みなさま参加してみてはいかがでしょうか?

ご参加、お待ちしています。

realtech-night.connpass.com

www.medley.jp

クリエイターのストーリーに振り切ったサイトを作った話

こんにちは。デザイナーの波切(はきり)です。

普段は介護のほんねのデザイン全般を担当しておりますが、今回はマエダからのバトンを受け、先日リリースをしたクリエイターページのリニューアルの経緯について書かせていただきます。

「MEDLEY DESIGN & ENGINEERING」という言葉に秘められた想いはマエダからも説明がありましたが、メドレーでは「ビジネス」「テクノロジー」「クリエイティブ」の3軸の横断的な理解と実践を志向しており、この文化を表わす言葉として「MEDLEY DESIGN & ENGINEERING」を掲げたクリエイター向けのページを公開しています。

f:id:medley_inc:20181130120407p:plain

https://www.medley.jp/recruit/creative.html

 2016年から公開していたこちらのページも、時間と共に伝えたい内容が少しずつ変化してきていたこと、MEDLEY DRIVEというプロジェクト公開に際して、より広範な分野のクリエイターにメドレーへの興味を持ってもらいたいことから、今回のリニューアルがスタートしました。

 

何を伝えたかったのか

 今回はインタビューを主軸にした構成となっていますが、これはエンジニアリングやデザインなどのスキルを持つ人が、社会の課題解決のためにその力を発揮したいと考えた時、このサイトを思い出してその背中を後押しできるようなサイトにしたい、と思ったのがきっかけになっています。

リニューアル前のクリエイターページではQ&A形式で業務内容などを紹介する構成でしたが、読んだ人の記憶に残るものにするためにも、各メンバーの境遇などから多くの人の共感を呼べるストーリーが必要になると思い、人物を主軸としたインタビュー構成にと考えました。

MEDLEY DESIGN & ENGINEERINGというテーマから事前イメージとしてページのラフデザインなどの検討はしましたが、インタビューが主軸となる今回の制作はデザイン案作成よりもまず先に取材・撮影を行うエディトリアルドリブンでの進め方となりました。

それぞれに志向するものがありつつも、メドレーとしての課題解決に尽力していること 

f:id:medley_inc:20181130120514j:plain

インタビューを進めていく内に見えてきたのは、自己成長のため、身近な医療体験など、それぞれに入社理由がありつつもメドレーのビジョンを理解し、医療ヘルスケア分野の課題解決のために尽力するメンバーの姿でした。

入り口は違えど、メドレーに参画して課題解決に取り組むまでのストーリーは「なぜメドレーで働くのか?」といった問いに寄り添うものになっていると思います。

プロフェッショナルさと覚悟

メンバーへのインタビューの他にもエンジニア・デザイナーが所属する開発本部という組織のマインドセットを掲載しており、自律し自走する組織を目指す開発本部の目指すところが、各メンバーに浸透していることも読み取ることができます。

MEDLEY DESIGN & ENGINEERINGというテーマの本質である課題解決のために職種やキャリアを問わないスキルの越境、組織パフォーマンスの最大化、社会への貢献といったキーワードが各自の言葉で語られています。この一貫性は「メドレーらしさ」や開発本部の文化を象徴しており、インタビューの中でも特筆すべきポイントになっています。

 

そのために何をしたのか

サイトで伝えたいこと・インタビューを通して伝えたいことが出てきたところでそれをどう表現するかですが、前述した通り今回はエディトリアルドリブンで大半の表現をすることができました。

内省とストーリーのエディトリアル

制作クレジットにある通り、今回は取材・編集に小山さん@kkzyk、撮影に今井さんを迎えてインタビュー取材と撮影を行っています。

対外的に情報の少ない社内の人間をまとめて取材するのは人物理解などハードルが高いですが果敢にも挑戦していただき、アウトプットもいわゆるA対Bの対話形式ではなく、独白を交えたインタビュアー視点での編集となっており、人物に焦点を当てつつストーリーとして読み取りやすい文体に仕上げていただきました。

今井さんの表情を引き出す写真も相まって、メンバー自身のこれまでを振り返る内省とストーリーを垣間見るような編集が出来たのではないかと思います。

f:id:medley_inc:20181130120537j:plain

編集の熱量で作り上げたデザイン

 編集のブラッシュアップとデザインや実装のブラッシュアップはほぼ同時進行で進めていき、デザインや文言の細かな調整などもその場で実装しなおしアップデートしていくスタイルで制作しました。

デザイン面では各クリエイターの内省とストーリーを読み手に伝えるために、読み心地や読後の余韻を残すべく余白を活かしたレイアウトにしました。

また、写真と文章を活かすようなデザインを心がけました。写真は大きいディスプレイでも迫力を追求するために全面を使いつつ、文章は2分割のレイアウトで文章幅を広げすぎず読みやすさを確保しました。

スマートフォンでも読みやすさを担保するため文字サイズにこだわり、結果としてどのデバイスでも読みやすく、文章と写真が伝わるためのデザインであることを心がけて制作しています。

このようなシンプルで装飾のないレイアウトで勝負できたのも、写真や文章と構成の力強さあってのものであり、こういった質実剛健さはオフィスのデザインなどにも通じるメドレーらしさの表出となっているかもしれません。

 

作ってみて

元々はクリエイター採用ページとしてリニューアルを検討していましたが、インタビュー形式に振り切ったことで、今回CREATOR’S STORYというサブタイトルをつけ、あからさまな採用色をなくしました。こうした実験的な編集やデザインとして表現できたのも、日頃から入社理由シリーズ聞いてみたシリーズなどバラエティ豊かな情報発信を行っているメドレーの土台があるからと考えています(いつもありがとうございます!)。

ここまで書いたように、自身のスキルを社会の課題解決のために発揮したいと考えた時にふと思い出していただきたく、こういったページがあることを記憶に留めていただけましたら幸いです。

事業会社のデザイナーとして現在は「介護のほんね」をメインで担当しているのですが、クリエイターサイトやオフィス移転など、事業だけなくコーポレートに関わるさまざまなデザインに携わる機会があります。

このようにやるべきことが多くありチャンスとやりがいが溢れる今、ブランディングとプロダクトの両輪を同時に頑張りたい方、医療介護領域の課題解決のために腕を奮ってみたいと考える方、ぜひ気軽に弊社に遊びにきて話をしてみませんか? 

お知らせ

メドレーでは、医療介護の人材採用システム「ジョブメドレー」や、医師たちがつくるオンライン医療事典「MEDLEY」、医療につよい介護施設・老人ホームの検索メディア「介護のほんね」、オンライン診療アプリ「CLINICS」などのプロダクトを提供しています。これらのサービスの拡大を受けて、その成長を支えるエンジニア・デザイナーを募集しています。

www.medley.jp

 少しだけ興味があるという方も、ぜひお気軽にご連絡ください! お待ちしております。

クリエイターページに刻まれた「MEDLEY DESIGN & ENGINEERING」について紐解く

はじめに

こんにちは。デザイナーマエダです。

メドレーのクリエイターページを最近リニューアルしたのですが、ご覧いただけましたでしょうか。

リニューアルまでの経緯は、デザインを担当した波切から後日このブログでエントリがあると思いますので詳細は割愛させていただきますが、リニューアル以前から「MEDLEY DESIGN & ENGINEERING」というサイトタイトルが使われているのは、みなさんご存じだったでしょうか。

今回はこの「MEDLEY DESIGN & ENGINEERING」という言葉に秘められた意味についてTechLunchで発表したのですが、事前に社内のエンジニアにヒアリングしてみたところ、この言葉の意味に気付いてない人もいたので、あらためて紐解いてみました。

f:id:medley_inc:20181122161427p:plain

 

クリエイティブ業界の最近の風潮

今年5月に経済産業省特許庁が「デザイン経営」宣言を公表しました。経営にデザインを活用した手法や効果、この手法を推進するための政策提言についてまとめられたものとなっており、ご存知の方もいらっしゃると思います。また、ジョン・マエダが発表した「Design in Tech Report 2018」などを見ても、特にインターネットテクノロジー業界におけるデザイナーのスタンスに変化が起こって来ているなと感じる昨今でもあります。

テクノロジー企業が急成長をしている中でも、特にデザインを強みとした企業が自社の独自性を出しつつ成長しているという状況で、今後どのようなスタイルのデザイナーが求められるのかという事を端的に示しているなと感じました。

他方で、インターネット業界でデザインに携わってそこそこの年数を経た私としては、クリエイティブを制作するうえで、デザインとテクノロジーは密接に関わっているという実感があり、常に2人3脚の関係性でお互い尊重しあいながらプロダクト開発をしてきました。

デザイン単体ではなくエンジニアリングと密に関わることでよいプロダクトになるという意識を持っているため、「デザイン」という概念だけで主張する風潮には、すこし違和感を覚える部分があったりします。

f:id:medley_inc:20181122161449p:plain

 

メドレーのクリエイティブ文化

メドレーはデザイン部という組織はありますが、プロダクトごとに個々デザイナーが担当しているため、デザイナー同士よりもエンジニアとのコミュニケーションが大半を占めます。

一方、プロダクトごとにビジネスモデルの理解や医療に関する知識など、基礎情報をインプットしておくことが重要ですので、十分な理解がないままに安易にペルソナを設計したりせず、事業をしっかり理解したうえでユーザーヒアリングや仮説検証を行うことも重視しています。

このようにメドレーのデザイナーは事業理解はもちろんのこと、テクノロジーの領域においても同様に理解をし、共通言語でコミュニケーションを取る必要があります。

メドレーのデザイナーは現在3名と少数ではありますが、BTC人材として、それぞれ活躍しています。

「BTC人材」とは、私が入社した当初からデザイナーとして意識している「ビジネス」「テクノロジー」「クリエイティブ」3軸の領域を横断的に思考してデザインに結びつけるスタンスですが、ただ単に、自分の持つ領域を広げるだけではいいクリエイティブには繋がりません。あくまでデザイナーとしての本来の「軸」を持ちつつ、他の領域に対しても思考を広げていくことが重要なのですが、メドレーのデザイナーはこれを理解し実践しています。

f:id:medley_inc:20181122161516p:plain

エンジニアの方も逆に技術だけでなく、事業やクリエイティブへの理解を進め、プロダクトとしての質を高めるために、UIやUXの良し悪しについて我々デザイナーと議論をしています。よく聞くような、実装時にデザインとエンジニア同士で揉めたり、考え方の違いによるミスコミュニケーションに陥るということがありません。

より良いプロダクトを作るために、ユーザーに価値をどう提供すべきかお互いの領域に踏み込んでコミュニケーションがとれる文化は、デザイナー・エンジニアを含めたクリエイター組織として強みだと感じています。

 

まとめ

このようにメドレーでは自分の専門分野と周辺分野を分け隔てることなく融合し、クリエイティブに結びつけようという文化が根付いています。この文化を一言で表わしているのが「MEDLEY DESIGN & ENGINEERING」という言葉になっているのです。

クリエイターページリニューアルの翌日に「MEDLEY DRIVE」のリリースもさせていただきました。このプロジェクトは医療ヘルスケア分野において、インターネットテクノロジーの活用を推進するための支援を目的としたプロジェクトです。

f:id:medley_inc:20181122161531p:plain

このMEDLEY DRIVEというプロジェクトを通して、医療の課題に対して、デザイナーがもっと活躍していく機会が増えていくと思うとワクワクします。

実際問題、カルテなどの医療システムは業務の性質上、複雑な構成になりやすかったりするのですが、そこにデザイナーが介入することによって医療機関や患者に対して、より価値あるプロダクトを推進していける分野でもあると思っています。

医療の課題に向き合って価値のあるプロダクトを創出したい方はもちろん、現在医療に興味がない方でも、気軽に弊社に遊びにきて話をしてみませんか?

お知らせ
メドレーでは、医療介護の人材採用システム「ジョブメドレー」や、医師たちがつくるオンライン医療事典「MEDLEY」、医療につよい介護施設・老人ホームの検索メディア「介護のほんね」、オンライン診療アプリ「CLINICS」などのプロダクトを提供しています。これらのサービスの拡大を受けて、その成長を支えるエンジニア・デザイナーを募集しています。

ちょっと興味があるという方も、ぜひお気軽にご連絡ください!

www.medley.jp

 

Android で HTML をいい感じで表示できるようにした話

こんにちは。開発本部の CLINICSカルテ の開発を担当している @seka です。メドレーでは貴重な (?) エンジニアの若者枠として日々奮闘しております。

今回、開発本部で定期的に開催している勉強会「TechLunch」で、「Android で HTML をいい感じで表示できるようにした話」 という題で発表しましたので、その内容について紹介させていただきます。

1. きっかけ

医師たちがつくるオンライン医療事典MEDLEY (メドレー) をアプリ化することができるか検証してみて欲しいという相談を受け、Android のモックを作成することになりました。

アプリらしい UI を目指して開発を進めていたのですが、MEDLEY では病気記事が CMS などに見られるような HTML 形式で管理されており、そのまま表示してもイメージしたようなデザインが実現できないかも...という課題に直面しました。

f:id:medley_inc:20181030115802p:plain

2. HTML を表示するまで

いくつかのステップに分解して、HTML の要素を Androidコンポーネントに置換していくことで対応する方針を立て、その実現可能性を調べました。大まかなフローはこんな感じです。

  1. 事前に HTML と Androidコンポーネントの対応を決める
  2. HTML を Kotlin でも扱える形式に変換する
  3. HTML の要素を探索する
  4. マッチした要素を Androidコンポーネントで置き換える それぞれのフローについて解説していきます。

1. 事前に HTML と Androidコンポーネントの対応表を作る

簡単にですが下表のような対応を決めます。(検証段階だったので、いくつかの要素は省略しています)

f:id:medley_inc:20181029222937p:plain

2. HTML を Kotlin で扱える形式に変換する

HTML を生の String として操作するのは流石に辛いので、Kotlin でも扱いやすいような形に変換します。

今回は jhy/jsoup という便利そうなライブラリを見つけたため、これを利用することにしました。

jsoup は Java 製の HTML パーサーで example にもあるように HTML を Kotlin でも扱いやすい形式に変換することができます。

下記の例は Wikipedia のページを取得し Root Node から小要素を探索していく様子です。

HTMLタグの情報・親要素・内容のテキストを利用したいため保持しておきます。

val doc = Jsoup.connect("http://en.wikipedia.org/").get()
doc.childNode(1).childNode(2).childNode(1)
/*
{Element@5739} "<div id="mw-page-base" class="noprint"></div>"
 attributes = {Attributes@5755} 
 baseUri = "https://en.wikipedia.org/wiki/Main_Page"
 childNodes = {Collections$EmptyList@5720}  size = 0
 shadowChildrenRef = null
 tag = {Tag@5756} 
  canContainInline = true
  empty = false
  formList = false
  formSubmit = false
  formatAsBlock = true
  isBlock = true
  preserveWhitespace = false
  selfClosing = false
  tagName = "div"
 parentNode = {Element@5729} 
 siblingIndex = 1
*/

3. HTML の要素を探索する

HTML の要素を探索する 再帰を利用して Root Node から小要素を探索し、jsoup で置き換えていきます。

class HTMLConverter(private val html: String) {
	fun parse() {
		val body = Jsoup.parse(html).normalise().body()
		inspect(body, ElementViewHolder())
	}

	private fun inspect(parent: Element) {
		parent.children().forEach {
			if (parent.children.isEmpty()) {
				return@forEach
			}
			inspect(it)
		}
}

4. マッチした要素を Androidコンポーネントで置き換える

事前に定義した方法に従って、HTML をそれぞれ対応するAndroidコンポーネントに変換していきます。

Img 要素の場合:

Glide を利用して画像を非同期で取得し ImageView にラップする。

private fun convertImage(el: Element): View? {
	val url = HttpUrl.parse(el.absUrl("src")) ?: return null return ImageView(context).apply {
		layoutParams = LinearLayout.LayoutParams(MATCH_PARENT, WRAP_CONTENT)
		val header = LazyHeaders.Builder().addHeader("Content-Type", "image/bmp").build()
		val glideUrl = GlideUrl(url.url(), header)
		Glide.with(context)
			 .asBitmap()
			 .load(glideUrl)
			 .into(this)
}

Table 要素の場合:

Table と TableRow をそれぞれ作成して合成する。

private fun parseTable(el: Element): View? {
	return TableLayout(context).apply {
		layoutParams = LinearLayout.LayoutParams(MATCH_PARENT, WRAP_CONTENT)
	}
}

private fun createTableRow(): View? {
	return TableRow(context)
}

private fun composeTableRow(self: TableRow, parent: TableLayout): Boolean {
    table.addView(self)
    return true
}

Android Emulator で表示してみる

上記の方法で作成したモックがこちらになります。

f:id:medley_inc:20181029223014g:plain

ただ HTML を表示するだけであれば WebView を利用すればもっと楽に表示することもできますが、UI をカスタマイズしたい場合にはデータに変更を加えなければいけません。

今回のようなアプローチをとることで、もともとある HTML のデータを壊すことなく Android に適したデザインを実現しやすくなったのではないでしょうか。

さいごに

コミュ障故に人前で話すことを避けてきたのですが、 TechLunch という機会をいただき Android なネタを発表をさせていただきました。

今回作成したモックは技術検証目的であるためリリースの予定はありませんが、発表のために書いた実装例は seka/HTMLConverter.kt として公開しています。

このようなアプローチを取る機会は少ないと思いますが、読んでくださった方の力になれれば幸いです!

「とりまわかるTTS」というお話

こんにちは、開発本部の宮内です。先日のメドレーの社内勉強会「TechLunch」で、「とりまわかるTTS」と題してWeb Speech APIのお話をしました。

 

Web Speech APIとは?

macOSに、sayというコマンドがあるのはご存知でしょうか? このコマンドは引数で受け取った文字列を発音してくれるというコマンドです。

ターミナルアプリを開いて、次のようなコマンドを入力してみてください。

say -v Kyoko "ご用件は何でしょう?"

このようにテキストから人間の声のように発音させる仕組みを音声合成といいます。

このような音声合成音声認識に関してはmacOS以外にもAmazon TranscribeGoogle Cloud Speech APIなどのクラウドサービスやAndroidではTextToSpeechクラスというAPIが用意されていたりもします。

今回の発表で使ったWeb Speech APIは、ブラウザでこれらの音声合成・認識を行うためのAPI仕様です。

 

実際に試してみる

音声合成サンプルページを作りましたので、サンプルプログラムを抜粋して使い方の説明をしていきます。

voiceschangedイベント内で利用可能な音声を取得する

const speechSynthesis = window.speechSynthesis;

speechSynthesis.addEventListener("voiceschanged", () => {
  buildVoiceOption($voices, speechSynthesis.getVoices());
});

window.speechSynthesis.getVoices関数を使うと利用可能な音声の一覧が取得できます。

ただし、ページロード直後ですと、タイミングによっては空配列が帰ってくることがあります。 そのため、voiceschangedイベントを受け取ってから、window.speechSynthesis.getVoices関数を呼び出すことによって、確実に実行できるようにしています。

返却されてくるvoiceは仕様としてはユーザエージェントとブラウザの場合だとローカルに用意されている音声の種類で決ってくることになっています。

macOSの日本語であれば以下のような種類のvoiceが返ってきます。

f:id:medley_inc:20181019115926p:plain

buildVoiceOptionは利用する音声をselectタグで選択できるように設定する関数なので割愛します。

SpeechSynthesisUtteranceで音声の設定をしていく

SpeechSynthesisUtteranceとは以下のような働きをするAPIになります。

Web Speech APIのSpeechSynthesisUtteranceインターフェイスは、音声要求を表現します。 これには、音声サービスが読むべき内容とその読み方に関する情報(例えば、言語、ピッチ、音量など)が含まれています。

https://developer.mozilla.org/ja/docs/Web/API/SpeechSynthesisUtterance

SpeechSynthesisを使って実際に音声を発音させるにはこのAPIを使ってどのように発音させるのか?を設定していく必要があります。

function setVoice(utterance, voices, voiceName) {
  const choices = voices.filter(voice => voice.name === voiceName);
  if (choices.length > 0) {
    utterance.voice = choices[0];
  } else {
    const defaultVoice = voices.find(voice => voice.default);
    if (defaultVoice) {
      utterance.voice = defaultVoice;
    }
  }
}

$form.addEventListener("submit", event => {
  event.preventDefault();
  const utterance = new SpeechSynthesisUtterance($textarea.value);
  setVoice(utterance, speechSynthesis.getVoices(), $voices.selectedOptions[0].dataset.name);
  utterance.pitch = $pitch.valueAsNumber;
  utterance.rate = $rate.valueAsNumber;
  utterance.volume = $volume.valueAsNumber;
  speechSynthesis.speak(utterance);
});

フォームがサブミットされたら SpeechSynthesisUtteranceクラスのインスタンスを作成し、 それを引数にspeechSynthesis.speak関数を呼び出せば、テキストボックスに入力されたテキストとSpeechSynthesisUtteranceで設定したピッチ、音量などを元に設定された音声が出力されるようにしています。

(サンプルプログラムではエラー処理を省いているため、ピッチや音量の調整スライダーで極端な値を指定すると、正しく音声が出力されないことがあります)

今回の記事では紹介していませんが、Web Speech APIにはもうひとつSpeechRecognition APIがあり、こちらは音声認識をブラウザでできるようにするAPIになっています。興味があればぜひ調べてみてください。

 

まとめ

今回はWeb Speech API音声合成のさわりを紹介しましたが、ご覧のとおりとても簡単に使うことができます。

例えば、ブラウザの内容の読み上げをしてアクセシビリティを高めたりなどの使い方や、読みが難しい専門用語の発音を聞かせるようにするなど色々な使いかたが考えられるのではないでしょうか?

この記事をご覧のみなさんもちょっと忘れかけられた、このAPIを使ってみてはいかがでしょう?