https://speakerdeck.com/nakaearth/classidefalseelasticsearchfalseli-yong-nituite
四人目はClassi中村さんで、ClassiでElasticsearchをどのように利用しているかについての発表でした。
懇親会の様子
本間さんからはre:Inventの参加レポートもあり、現地で体験した人の生のレポートが聞け、その興奮を少し感じることができたのは良かったです！
みなさん、こんにちは。開発本部エンジニアの平木です。
さて、いよいよ12月に突入して世間の雰囲気も師走に相応わしいムードになっている中、みなさんいかがお過しでしょうか?
来たる2018/12/7(金)にメドレーと教育現場支援のICTプラットフォームを展開しているClassiさんの合同でAWS勉強会を開催します。
そこで今回は主にメドレーの発表はどのようなものがあるかをちらっと、ご紹介しながらイベントの告知をしようと思います。
弊社メドレーは医療・ヘルスケア分野の課題解決するサービスを展開しており現在は5つのサービスを運営しています。全てのサービスでAWSを活用しており、その恩恵をフルに活かして日々運用をしています。Classiさんも全国の教育機関で使われるサービスのインフラをAWSで構築されています。
医療業界のメドレー、教育業界のClassiさんと業界は全然違うのですが、国の施策や法律に密着したサービス運営をしている点や、社会のインフラ的な事業にチャレンジしている点、もちろん先ほど紹介したようにAWSをフル活用している点などの共通項がありました。
こうしたことから、それぞれの業界ならではの話も折り混ぜたAWSの活用・運用・構築などの事例を合同で発表すると面白いのではないか?ということで実現しました。
ということで実現したこの勉強会ですが、メドレーのセッションのタイトルと内容を少しだけご紹介していきたいと思います。
そもそもガイドラインとは何ぞや?という話になってきますが、"CLINICSカルテ"を構築する上で避けては通れなかった3省4ガイドラインという、関係省庁から出されていた医療情報取り扱いにおけるガイドラインです。(現在は3省3ガイドラインになっていますが…)
このガイドラインに準拠するためにどのようにAWSの各サービスを使ってCLINICSカルテのインフラを構築しているか?という発表を中畑からします。
田中からは、こちらもガイドラインで対応必須とされている"クライアント認証"をCLINICSカルテではどのように実現しているか?というお話をします。
AWS上に構築されたCLINICSカルテで、紆余曲折ありながらクライアント認証を実現させるための苦労話を発表していきます。
CLINICSカルテを始めとした電子カルテでは、医療機関内の院内機器など外部の機器やサービスと連携する必要があります。
こうした外部機器やサービスと、CLINICSカルテをどのように連携させていくのか?また可用性を担保しつつ、AWSをどう活用して実現していくのかというセッションを有馬からお話します。
このように、色々な制約などがあるなかで、AWSをどのように活用しているのかというのが違った側面から分かるようなセッション内容になっていると思います。
また、発表者の1人Classiの本間さんは先日のre:Invnent 2018に参加されてきたとのことで、現地のお土産話などが懇親会で聞けると思います!
年の瀬も差しせまってきた忙しい中だとは思いますが、みなさま参加してみてはいかがでしょうか?
ご参加、お待ちしています。
こんにちは。デザイナーの波切（はきり）です。
普段は介護のほんねのデザイン全般を担当しておりますが、今回はマエダからのバトンを受け、先日リリースをしたクリエイターページのリニューアルの経緯について書かせていただきます。
「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」などのプロダクトを提供しています。これらのサービスの拡大を受けて、その成長を支えるエンジニア・デザイナーを募集しています。
少しだけ興味があるという方も、ぜひお気軽にご連絡ください！ お待ちしております。
こんにちは。デザイナーマエダです。
メドレーのクリエイターページを最近リニューアルしたのですが、ご覧いただけましたでしょうか。
リニューアルまでの経緯は、デザインを担当した波切から後日このブログでエントリがあると思いますので詳細は割愛させていただきますが、リニューアル以前から「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」などのプロダクトを提供しています。これらのサービスの拡大を受けて、その成長を支えるエンジニア・デザイナーを募集しています。
ちょっと興味があるという方も、ぜひお気軽にご連絡ください！
こんにちは。開発本部の CLINICSカルテ の開発を担当している @seka です。メドレーでは貴重な (?) エンジニアの若者枠として日々奮闘しております。
今回、開発本部で定期的に開催している勉強会「TechLunch」で、「Android で HTML をいい感じで表示できるようにした話」 という題で発表しましたので、その内容について紹介させていただきます。
医師たちがつくるオンライン医療事典MEDLEY (メドレー) をアプリ化することができるか検証してみて欲しいという相談を受け、Android のモックを作成することになりました。
アプリらしい UI を目指して開発を進めていたのですが、MEDLEY では病気記事が CMS などに見られるような HTML 形式で管理されており、そのまま表示してもイメージしたようなデザインが実現できないかも...という課題に直面しました。
いくつかのステップに分解して、HTML の要素を Android のコンポーネントに置換していくことで対応する方針を立て、その実現可能性を調べました。大まかなフローはこんな感じです。
簡単にですが下表のような対応を決めます。(検証段階だったので、いくつかの要素は省略しています)
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
*/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)
}
}
事前に定義した方法に従って、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
}
上記の方法で作成したモックがこちらになります。
ただ HTML を表示するだけであれば WebView を利用すればもっと楽に表示することもできますが、UI をカスタマイズしたい場合にはデータに変更を加えなければいけません。
今回のようなアプローチをとることで、もともとある HTML のデータを壊すことなく Android に適したデザインを実現しやすくなったのではないでしょうか。
コミュ障故に人前で話すことを避けてきたのですが、 TechLunch という機会をいただき Android なネタを発表をさせていただきました。
今回作成したモックは技術検証目的であるためリリースの予定はありませんが、発表のために書いた実装例は seka/HTMLConverter.kt として公開しています。
このようなアプローチを取る機会は少ないと思いますが、読んでくださった方の力になれれば幸いです！
こんにちは、開発本部の宮内です。先日のメドレーの社内勉強会「TechLunch」で、「とりまわかるTTS」と題してWeb Speech APIのお話をしました。
macOSに、sayというコマンドがあるのはご存知でしょうか？ このコマンドは引数で受け取った文字列を発音してくれるというコマンドです。
ターミナルアプリを開いて、次のようなコマンドを入力してみてください。
say -v Kyoko "ご用件は何でしょう？"
このようにテキストから人間の声のように発音させる仕組みを音声合成といいます。
このような音声合成や音声認識に関してはmacOS以外にもAmazon TranscribeやGoogle Cloud Speech APIなどのクラウドサービスやAndroidではTextToSpeechクラスというAPIが用意されていたりもします。
今回の発表で使ったWeb Speech APIは、ブラウザでこれらの音声合成・認識を行うためのAPI仕様です。
音声合成のサンプルページを作りましたので、サンプルプログラムを抜粋して使い方の説明をしていきます。
const speechSynthesis = window.speechSynthesis;
speechSynthesis.addEventListener("voiceschanged", () => {
buildVoiceOption($voices, speechSynthesis.getVoices());
});
window.speechSynthesis.getVoices関数を使うと利用可能な音声の一覧が取得できます。
ただし、ページロード直後ですと、タイミングによっては空配列が帰ってくることがあります。 そのため、voiceschangedイベントを受け取ってから、window.speechSynthesis.getVoices関数を呼び出すことによって、確実に実行できるようにしています。
返却されてくるvoiceは仕様としてはユーザエージェントとブラウザの場合だとローカルに用意されている音声の種類で決ってくることになっています。
macOSの日本語であれば以下のような種類のvoiceが返ってきます。
buildVoiceOptionは利用する音声をselectタグで選択できるように設定する関数なので割愛します。
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を使ってみてはいかがでしょう？