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

こんにちは。開発本部の日下です。昨年新卒として入社してからはや1年半、最近は医療介護の求人サイト「ジョブメドレー」にてサーバーからインフラ近くまでをメインに担当しております。

 

先日開催されたHTML5 Conference 2018にメドレーがスポンサーとして協賛させていただきました。

今までWebフロントをメインとしたカンファレンスに参加する機会がなかったのですが、こういった縁があり僕も参加させていただきましたので、当日の様子をレポートさせていただきます。

HTML5 Conferenceとは

HTML5 Webに関する最新技術のトレンドを集め、交流する祭典として2011年にChrome+HTML5 Conferenceとして始まったカンファレンスです。

以降HTML5 Conferenceとして開催し、今年で7回目の開催となります。

定員枠は年々埋まるのが早くなっているそうで、今年は1600人の定員が1日で埋まったほどの人気でした。

 

今年のテーマは「The Web is shifting to the next gear」

会場の様子

500人が収容できる大講堂や、可動式の壁で自由に大きさを変えられる講義室など会場自体はとても整備されていました。

一方で立ち見、入場規制をうけてしまうほど人が多く盛況だったことが印象的でした。

弊社リーフレットを発見！

セッション

各セッションでは、スピーカーの方々がWebフロントに関する最新技術の様々なトレンドの発表をしていました。

参加した中からいくつか気になったセッションを紹介します。

通常セッション

TypeScript Evolution by 倉見洋輔

弊社でもTypeScriptを実運用しているプロダクトがあり、またFlowを使用している他プロダクトもTypeScriptへ移行しようかという話がでています。

そのため、TypeScriptに関するディープな話しが聞きたいなと思いこちらのセッションに参加しました。

 

倉見さんによる本セッションでは、TypeScriptに関する概要から最新情報まで、40分で78枚のスライドをまさに駆け抜けるかたちで紹介いただきました。

 

https://speakerdeck.com/quramy/typescript-evolution

 

@typesのリポジトリ、リリースサイクル、TC39などとの兼ね合いと言った基本的なTypeScriptに関する情報から最新の3.x系に含まれる変更まで、具体的なコードと共に紹介いただけたのでわかりやすいセッションでした。

 

特に構造的部分型は初めて聞いたキーワードだったのですが、例えなどを交えた説明がとても腹落ちしたことが印象的でした。

これを機に型に関する知識を深めようと考えています。

 

PWAの導入で得られた成果と見えてきた課題 from 宍戸俊哉

今回のカンファレンスでも多くのセッションがパフォーマンス絡みでしたが、この分野はビジネスに直結するため、Webサービスをしている上では重要な分野です。

もちろん弊社もパフォーマンスに関してもより良くしていこうと常に意識しています。

 

そのため、今年5月のGoogle I/Oでも紹介されたことも記憶に新しい日経さんの事例は聞いておきたいと思い参加しました。

 

https://speakerdeck.com/sisidovski/nikkei-pwa-html5conf2018

 

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ハッシュタグがよく整備・周知されていたため、各セッションの資料が収集しやすかったのはとても助かりました。

その他にも、通常のセッションの他にクイズなど会場参加型のものもあり、開催側が参加者を飽きさせない工夫がそこかしこにあり、カンファレンス全体を通して楽しむことができました。

 

来年もチャンスがあればまた参加したいと思います。

 

企画された方も参加された方もお疲れ様でした！

 

 

www.medley.jp

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

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

さて、いよいよ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」を掲げたクリエイター向けのページを公開しています。

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

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

何を伝えたかったのか

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

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

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

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

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

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

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

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

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

そのために何をしたのか

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

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

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

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

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

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

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

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

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

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

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

作ってみて

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

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

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

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

お知らせ

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

www.medley.jp

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

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

はじめに

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

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

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

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

 

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

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

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

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

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

 

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

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

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

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

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

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

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

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

 

まとめ

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

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

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

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

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

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

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

www.medley.jp

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

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

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

1. きっかけ

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

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

2. HTML を表示するまで

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

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

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

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

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 で表示してみる

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

ただ 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 TranscribeやGoogle 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が返ってきます。

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を使ってみてはいかがでしょう？

新オフィスのデザインを任された話

先日、新卒エンジニアさんの内定式(メドレー初！)をおこないました。バキバキでキラキラのイケメン揃いなので中途イケメン枠で入社した私にとってこれまでの地位が危ぶまれ戦々恐々としています。開発本部デザイナーの小山です。

 

内定式もですが、大きな変化がメドレーにありデザイナーの役割が広がる機会が訪れたので、この場を借りてお話させていただきます。

 

近年デザイナーは分野を飛び越えた取りくみが求められる職種になりつつあります。クラシカルデザインが中心だった頃、それができるのはスターデザイナーであり、ごく限られた人たちでした。いまではテクノロジーやフレームワークの進歩により、デザイン思考やコンピュテーショーナルデザインなど、デザイナーが関われる分野はさらに広がりを見せています。いちデザイナーの私もそれに応えたいという想いはありつつも取りくむ難しさを感じています。

 

今回は分野を飛び越える難しさを日頃感じているUIデザイナーの私が、オフィスデザインという普段とは異なる分野に取りくんだお話をさせていただきます。

 

これからの受け皿を設計する

 

実は先月9月上旬に、メドレーは古巣の新六本木ビルを離れ六本木グランドタワーへ本社移転しました。私が入社した去年3月時点から社員数が3倍近く増えたので、「社員数拡大のためのキャパシティ確保」「設備の充実」「組織の一体感の強化」が主に取りくむべき移転の課題でした。その解決のためオフィス専門の設計チームが初期のアーキテクトと施工管理を担当し、空間の方針とデザインと什器のディレクションをマエダと私が担当しました。

 

先だって取りくんだのは空間の方針です。この先のメドレーの姿を踏まえ、そこに到達するための受け皿となるように設計しました。

これまでメドレーは社会の公器としての意識を持ち、様々なサービスで医療課題に取りくんできました。それが今年で創業10年を迎えています。規模も拡大し、さまざまな人がこのメドレーに参画するようになりベンチャー企業としてだけでなく社会の大きな責任を果たす存在になりつつあります。

そうしたときの空間の役割としてこれまでのベンチャーマインドとこれからの大きな責任を背負う姿勢の両方を意識できる空間づくりが良いのではと考え以下のような方針を組み立てました。

 

可変と不変の両極を横断する空間

 

急速に成長するためのベンチャーマインドと、拡大していく社会の公器として責任を負う姿勢を同居させるために、ただ新しくするだけではなく、今までのメドレーはしっかり持ち合わせる。そしてそれを日々の業務のなかで行き来できるように空間の方針をつくり、デザインに反映していきました。もちろん制約が多く結果論的な部分はありますが、新しくするために全てを壊すのではなく、かといって古いものを大事に取っておくのでもない、これまでのメドレーらしさとこれからのメドレーの２つをポジティブに意識し設計しました。

 

執務室は旧本社ビルの雰囲気をそのままスライドさせつつ、先に挙げた3つの課題を取りくむため機能を拡張しました。もっとも変えたのはエントランスから会議室にかけてです。コーポレートカラーである赤色を一切使わず真っ白な空間にしました。執務室が変えない場所であるなら、ここは変える場所であり、自分たちを一度否定し絶えず新しくしていく場所として位置付けました。これから様々な人と出会える場所としても日々新鮮な気持ちになれると考えたからです。

 

空間デザインの独特な難しさと向きあう

 

この空間をつくるために、この分野特有の壁と向きあいました。UIデザインでは扱わない大きなサイズ感や専門知識を総動員して出来上がる空間を想像する力など、普段の仕事にはない技術や感覚を求められることが多く、独特の難しさを痛感しました。

 

たとえばUIデザインでは簡単にモックアップがつくれますが空間で「よし試しに壁たてるか！」なんてことはできません。仮にモックアップをつくれたとしてもUIデザインほどの情報量で仕上がることはなく、そこは培ってきた経験と知識で補わなければなりません。専門のチームがいるので、えーい丸投げ！あとヨロシク！という考えも頭をよぎりましたが、決めるのは私の役目でもあるので、円滑なコラボレーションにするために、その人たちの知識や感覚に追いつくことは急務でした。

 

ここまでの話を聞くと体力的にキツそうと思われるかもしれませんが、実際は現業と通じる部分やデザイナーの感覚を分野を超えて持ち込める部分もありましたので、楽しみながら取りくめました。例えばデザイナーは物の形や色の違いに敏感な種族なので、それが2Dでも3Dでもすぐさま察知できます（程度にもよりますが）。図面と比較してわずかな壁の色や照明の輝度や色、わずかな目地のズレなどなど。

 

とはいえ異なる分野で直感１つで勝負できないのも理解しました。まだまだ学びは多そうですが、この取りくみを日頃の仕事にフィードバックしたいと思います。下記は取りくみを通して同じような機会を得たときに使える備忘録としてまとめてみたポイントです。

 

• 考えかたの定型化 - 何かをデザインするのなら進め方に違いはないはず。違っても自分の考えかたの型をもとにカスタマイズする
• 礼儀としての知識 - よほど未開拓でない限りその分野の専門家がいるはず。コラボレーションするために最低限の礼儀として知識は身につける
• 違和感を無視しない - その分野の常識や知識のインプットが追いつかなくても、そこで感じる引っかかりを共有することで周りが立ち返れる

 

分野が違うだけで別世界ではない

 

今回は分野を変えることで発見したことや取りくみを、オフィスデザインを通してお話させていただきました。振りかえると備忘録の3つや思考の整理の方法など、異なる分野だとしても、自分の専門分野での大事な考え方と共通する部分も多く感じました。もちろん全ての分野を渡り歩いたわけではないので当てはまらない場合はありますし、先述したように独特の難しさもあります。ただこの3つがどんな分野でも飛び越えれる最初の道具のうちの１つにすることで、良いスタートが切れるのかなと私は感じています。

 

異なる分野は今までの常識が全く通用しない別の世界ではないことを意識しながら、新しいことに挑戦していきたいと思います。

 

ここまで読んでいただき、ありがとうございました！

 

さいごに

 

メドレーが向き合う医療の課題は複雑です。課題を解決するために１つの分野からの一点突破もありますが、多角的な分野からの突破もおこなっています。デザイナーでありながら、エンジニアでありながら、様々な分野に横断しスイッチでき課題解決に向き合うことができます。もしご興味のある方はぜひご連絡ください。

www.wantedly.com

www.wantedly.com