株式会社メドレー の技術ブログ
全1359件
こんにちは。開発本部の CLINICS カルテ の開発を担当している @seka です。メドレーでは貴重な (?) エンジニアの若者枠として日々奮闘しております。 今回、開発本部で定期的に開催している勉強会「TechLunch」で、「Android で HTML をいい感じで表示できるようにした話」 という題で発表しましたので、その内容について紹介させていただきます。 1. きっかけ 医師たちがつくるオンライン医療事典 MEDLEY (メドレー) をアプリ化することができるか検証してみて欲しいという相談を受け、Android のモックを作成することになりました。 アプリらしい UI を目指して開発を進めていたのですが、MEDLEY では病気記事が CMS などに見られるような HTML 形式で管理されており、そのまま表示してもイメージしたようなデザインが実現できないかも…という課題に直面しました。 2. HTML を表示するまで いくつかのステップに分解して、HTML の要素を Android のコンポーネントに置換していくことで対応する方針を立て、その実現可能性を調べました。大まかなフローはこんな感じです。 事前に HTML と Android のコンポーネントの対応を決める HTML を Kotlin でも扱える形式に変換する HTML の要素を探索する マッチした要素を 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 ( "https://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 として公開しています。 このようなアプローチを取る機会は少ないと思いますが、読んでくださった方の力になれれば幸いです！
こんにちは。開発本部の CLINICS カルテ の開発を担当している @seka です。メドレーでは貴重な (?) エンジニアの若者枠として日々奮闘しております。 今回、開発本部で定期的に開催している勉強会「TechLunch」で、「Android で HTML をいい感じで表示できるようにした話」 という題で発表しましたので、その内容について紹介させていただきます。 1. きっかけ 医師たちがつくるオンライン医療事典 MEDLEY (メドレー) をアプリ化することができるか検証してみて欲しいという相談を受け、Android のモックを作成することになりました。 アプリらしい UI を目指して開発を進めていたのですが、MEDLEY では病気記事が CMS などに見られるような HTML 形式で管理されており、そのまま表示してもイメージしたようなデザインが実現できないかも…という課題に直面しました。 2. HTML を表示するまで いくつかのステップに分解して、HTML の要素を Android のコンポーネントに置換していくことで対応する方針を立て、その実現可能性を調べました。大まかなフローはこんな感じです。 事前に HTML と Android のコンポーネントの対応を決める HTML を Kotlin でも扱える形式に変換する HTML の要素を探索する マッチした要素を 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 ( "https://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 として公開しています。 このようなアプローチを取る機会は少ないと思いますが、読んでくださった方の力になれれば幸いです！
こんにちは。開発本部の CLINICS カルテ の開発を担当している @seka です。メドレーでは貴重な (?) エンジニアの若者枠として日々奮闘しております。 今回、開発本部で定期的に開催している勉強会「TechLunch」で、「Android で HTML をいい感じで表示できるようにした話」 という題で発表しましたので、その内容について紹介させていただきます。 1. きっかけ 医師たちがつくるオンライン医療事典 MEDLEY (メドレー) をアプリ化することができるか検証してみて欲しいという相談を受け、Android のモックを作成することになりました。 アプリらしい UI を目指して開発を進めていたのですが、MEDLEY では病気記事が CMS などに見られるような HTML 形式で管理されており、そのまま表示してもイメージしたようなデザインが実現できないかも…という課題に直面しました。 2. HTML を表示するまで いくつかのステップに分解して、HTML の要素を Android のコンポーネントに置換していくことで対応する方針を立て、その実現可能性を調べました。大まかなフローはこんな感じです。 事前に HTML と Android のコンポーネントの対応を決める HTML を Kotlin でも扱える形式に変換する HTML の要素を探索する マッチした要素を 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 ( "https://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 として公開しています。 このようなアプローチを取る機会は少ないと思いますが、読んでくださった方の力になれれば幸いです！
こんにちは。開発本部の CLINICS カルテ の開発を担当している @seka です。メドレーでは貴重な (?) エンジニアの若者枠として日々奮闘しております。 今回、開発本部で定期的に開催している勉強会「TechLunch」で、「Android で HTML をいい感じで表示できるようにした話」 という題で発表しましたので、その内容について紹介させていただきます。 1. きっかけ 医師たちがつくるオンライン医療事典 MEDLEY (メドレー) をアプリ化することができるか検証してみて欲しいという相談を受け、Android のモックを作成することになりました。 アプリらしい UI を目指して開発を進めていたのですが、MEDLEY では病気記事が CMS などに見られるような HTML 形式で管理されており、そのまま表示してもイメージしたようなデザインが実現できないかも…という課題に直面しました。 2. HTML を表示するまで いくつかのステップに分解して、HTML の要素を Android のコンポーネントに置換していくことで対応する方針を立て、その実現可能性を調べました。大まかなフローはこんな感じです。 事前に HTML と Android のコンポーネントの対応を決める HTML を Kotlin でも扱える形式に変換する HTML の要素を探索する マッチした要素を 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 ( "https://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 として公開しています。 このようなアプローチを取る機会は少ないと思いますが、読んでくださった方の力になれれば幸いです！
こんにちは。開発本部の CLINICS カルテ の開発を担当している @seka です。メドレーでは貴重な (?) エンジニアの若者枠として日々奮闘しております。 今回、開発本部で定期的に開催している勉強会「TechLunch」で、「Android で HTML をいい感じで表示できるようにした話」 という題で発表しましたので、その内容について紹介させていただきます。 1. きっかけ 医師たちがつくるオンライン医療事典 MEDLEY (メドレー) をアプリ化することができるか検証してみて欲しいという相談を受け、Android のモックを作成することになりました。 アプリらしい UI を目指して開発を進めていたのですが、MEDLEY では病気記事が CMS などに見られるような HTML 形式で管理されており、そのまま表示してもイメージしたようなデザインが実現できないかも…という課題に直面しました。 2. HTML を表示するまで いくつかのステップに分解して、HTML の要素を Android のコンポーネントに置換していくことで対応する方針を立て、その実現可能性を調べました。大まかなフローはこんな感じです。 事前に HTML と Android のコンポーネントの対応を決める HTML を Kotlin でも扱える形式に変換する HTML の要素を探索する マッチした要素を 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 ( "https://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 として公開しています。 このようなアプローチを取る機会は少ないと思いますが、読んでくださった方の力になれれば幸いです！
こんにちは。開発本部の CLINICS カルテ の開発を担当している @seka です。メドレーでは貴重な (?) エンジニアの若者枠として日々奮闘しております。 今回、開発本部で定期的に開催している勉強会「TechLunch」で、「Android で HTML をいい感じで表示できるようにした話」 という題で発表しましたので、その内容について紹介させていただきます。 1. きっかけ 医師たちがつくるオンライン医療事典 MEDLEY (メドレー) をアプリ化することができるか検証してみて欲しいという相談を受け、Android のモックを作成することになりました。 アプリらしい UI を目指して開発を進めていたのですが、MEDLEY では病気記事が CMS などに見られるような HTML 形式で管理されており、そのまま表示してもイメージしたようなデザインが実現できないかも…という課題に直面しました。 2. HTML を表示するまで いくつかのステップに分解して、HTML の要素を Android のコンポーネントに置換していくことで対応する方針を立て、その実現可能性を調べました。大まかなフローはこんな感じです。 事前に HTML と Android のコンポーネントの対応を決める HTML を Kotlin でも扱える形式に変換する HTML の要素を探索する マッチした要素を 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 ( "https://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 として公開しています。 このようなアプローチを取る機会は少ないと思いますが、読んでくださった方の力になれれば幸いです！
こんにちは、開発本部の宮内です。先日のメドレーの社内勉強会「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 イベント内で利用可能な音声を取得する constspeechSynthesis = 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 ) { constchoices = 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 を使ってみてはいかがでしょう？
こんにちは、開発本部の宮内です。先日のメドレーの社内勉強会「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 イベント内で利用可能な音声を取得する constspeechSynthesis = 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 ) { constchoices = 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 を使ってみてはいかがでしょう？
こんにちは、開発本部の宮内です。先日のメドレーの社内勉強会「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 イベント内で利用可能な音声を取得する constspeechSynthesis = 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 ) { constchoices = 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 を使ってみてはいかがでしょう？
こんにちは、開発本部の宮内です。先日のメドレーの社内勉強会「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 イベント内で利用可能な音声を取得する constspeechSynthesis = 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 ) { constchoices = 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 を使ってみてはいかがでしょう？
こんにちは、開発本部の宮内です。先日のメドレーの社内勉強会「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 イベント内で利用可能な音声を取得する constspeechSynthesis = 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 ) { constchoices = 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 を使ってみてはいかがでしょう？
こんにちは、開発本部の宮内です。先日のメドレーの社内勉強会「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 イベント内で利用可能な音声を取得する constspeechSynthesis = 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 ) { constchoices = 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 を使ってみてはいかがでしょう？
こんにちは、開発本部の宮内です。先日のメドレーの社内勉強会「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 イベント内で利用可能な音声を取得する constspeechSynthesis = 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 ) { constchoices = 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 を使ってみてはいかがでしょう？
こんにちは、開発本部の宮内です。先日のメドレーの社内勉強会「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 イベント内で利用可能な音声を取得する constspeechSynthesis = 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 ) { constchoices = 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.medley.jp www.medley.jp
先日、新卒エンジニアさんの**内定式(メドレー初！)**をおこないました。バキバキでキラキラのイケメン揃いなので中途イケメン枠で入社した私にとってこれまでの地位が危ぶまれ戦々恐々としています。開発本部デザイナーの小山です。 内定式もですが、大きな変化がメドレーにありデザイナーの役割が広がる機会が訪れたので、この場を借りてお話させていただきます。 近年デザイナーは分野を飛び越えた取りくみが求められる職種になりつつあります。クラシカルデザインが中心だった頃、それができるのはスターデザイナーであり、ごく限られた人たちでした。いまではテクノロジーやフレームワークの進歩により、デザイン思考やコンピュテーショーナルデザインなど、デザイナーが関われる分野はさらに広がりを見せています。いちデザイナーの私もそれに応えたいという想いはありつつも取りくむ難しさを感じています。 今回は分野を飛び越える難しさを日頃感じている UI デザイナーの私が、 オフィスデザインという普段とは異なる分野 に取りくんだお話をさせていただきます。 これからの受け皿を設計する 実は先月 9 月上旬に、メドレーは古巣の新六本木ビルを離れ六本木グランドタワーへ 本社移転 しました。私が入社した去年 3 月時点から社員数が 3 倍近く増えたので、「 社員数拡大のためのキャパシティ確保 」「 設備の充実 」「 組織の一体感の強化 」が主に取りくむべき移転の課題でした。その解決のためオフィス専門の設計チームが初期のアーキテクトと施工管理を担当し、空間の方針とデザインと什器のディレクションを マエダ と私が担当しました。 先だって取りくんだのは空間の方針です。この先のメドレーの姿を踏まえ、そこに到達するための受け皿となるように設計しました。 これまでメドレーは社会の公器としての意識を持ち、様々なサービスで医療課題に取りくんできました。それが今年で創業 10 年を迎えています。規模も拡大し、さまざまな人がこのメドレーに参画するようになりベンチャー企業としてだけでなく社会の大きな責任を果たす存在になりつつあります。 そうしたときの空間の役割として これまでのベンチャーマインドとこれからの大きな責任を背負う姿勢の両方を意識できる空間づくり が良いのではと考え以下のような方針を組み立てました。 可変と不変の両極を横断する空間 急速に成長するためのベンチャーマインドと、拡大していく社会の公器として責任を負う姿勢を同居させるために、ただ新しくするだけではなく、今までのメドレーはしっかり持ち合わせる。そしてそれを日々の業務のなかで行き来できるように空間の方針をつくり、デザインに反映していきました。もちろん制約が多く結果論的な部分はありますが、新しくするために全てを壊すのではなく、かといって古いものを大事に取っておくのでもない、 これまでのメドレーらしさとこれからのメドレーの２つをポジティブに意識し設計 しました。 執務室は旧本社ビルの雰囲気をそのままスライドさせつつ、先に挙げた 3 つの課題を取りくむため機能を拡張しました。もっとも変えたのはエントランスから会議室にかけてです。コーポレートカラーである赤色を一切使わず真っ白な空間にしました。執務室が変えない場所であるなら、ここは変える場所であり、自分たちを一度否定し絶えず新しくしていく場所として位置付けました。これから様々な人と出会える場所としても日々新鮮な気持ちになれると考えたからです。 空間デザインの独特な難しさと向きあう この空間をつくるために、この分野特有の壁と向きあいました。UI デザインでは扱わない大きなサイズ感や専門知識を総動員して出来上がる空間を想像する力など、普段の仕事にはない技術や感覚を求められることが多く、独特の難しさを痛感しました。 たとえば UI デザインでは簡単にモックアップがつくれますが空間で「よし試しに壁たてるか！」なんてことはできません。仮にモックアップをつくれたとしても UI デザインほどの情報量で仕上がることはなく、そこは培ってきた経験と知識で補わなければなりません。専門のチームがいるので、えーい丸投げ！あとヨロシク！という考えも頭をよぎりましたが、決めるのは私の役目でもあるので、円滑なコラボレーションにするために、その人たちの知識や感覚に追いつくことは急務でした。 ここまでの話を聞くと体力的にキツそうと思われるかもしれませんが、実際は現業と通じる部分やデザイナーの感覚を分野を超えて持ち込める部分もありましたので、楽しみながら取りくめました。例えばデザイナーは物の形や色の違いに敏感な種族なので、それが 2D でも 3D でもすぐさま察知できます（程度にもよりますが）。図面と比較してわずかな壁の色や照明の輝度や色、わずかな目地のズレなどなど。 とはいえ異なる分野で直感１つで勝負できないのも理解しました。まだまだ学びは多そうですが、この取りくみを日頃の仕事にフィードバックしたいと思います。下記は取りくみを通して同じような機会を得たときに使える備忘録としてまとめてみたポイントです。 考えかたの定型化 - 何かをデザインするのなら進め方に違いはないはず。違っても自分の考えかたの型をもとにカスタマイズする 礼儀としての知識 - よほど未開拓でない限りその分野の専門家がいるはず。コラボレーションするために最低限の礼儀として知識は身につける 違和感を無視しない - その分野の常識や知識のインプットが追いつかなくても、そこで感じる引っかかりを共有することで周りが立ち返れる 分野が違うだけで別世界ではない 今回は分野を変えることで発見したことや取りくみを、オフィスデザインを通してお話させていただきました。振りかえると備忘録の 3 つや思考の整理の方法など、異なる分野だとしても、自分の専門分野での大事な考え方と共通する部分も多く感じました。もちろん全ての分野を渡り歩いたわけではないので当てはまらない場合はありますし、先述したように独特の難しさもあります。ただこの 3 つがどんな分野でも飛び越えれる最初の道具のうちの１つにすることで、良いスタートが切れるのかなと私は感じています。 異なる分野は今までの常識が全く通用しない別の世界ではないことを意識しながら、新しいことに挑戦していきたいと思います。 ここまで読んでいただき、ありがとうございました！ さいごに メドレーが向き合う医療の課題は複雑です。課題を解決するために１つの分野からの一点突破もありますが、多角的な分野からの突破もおこなっています。デザイナーでありながら、エンジニアでありながら、様々な分野に横断しスイッチでき課題解決に向き合うことができます。もしご興味のある方はぜひご連絡ください。 www.medley.jp www.medley.jp
先日、新卒エンジニアさんの**内定式(メドレー初！)**をおこないました。バキバキでキラキラのイケメン揃いなので中途イケメン枠で入社した私にとってこれまでの地位が危ぶまれ戦々恐々としています。開発本部デザイナーの小山です。 内定式もですが、大きな変化がメドレーにありデザイナーの役割が広がる機会が訪れたので、この場を借りてお話させていただきます。 近年デザイナーは分野を飛び越えた取りくみが求められる職種になりつつあります。クラシカルデザインが中心だった頃、それができるのはスターデザイナーであり、ごく限られた人たちでした。いまではテクノロジーやフレームワークの進歩により、デザイン思考やコンピュテーショーナルデザインなど、デザイナーが関われる分野はさらに広がりを見せています。いちデザイナーの私もそれに応えたいという想いはありつつも取りくむ難しさを感じています。 今回は分野を飛び越える難しさを日頃感じている UI デザイナーの私が、 オフィスデザインという普段とは異なる分野 に取りくんだお話をさせていただきます。 これからの受け皿を設計する 実は先月 9 月上旬に、メドレーは古巣の新六本木ビルを離れ六本木グランドタワーへ 本社移転 しました。私が入社した去年 3 月時点から社員数が 3 倍近く増えたので、「 社員数拡大のためのキャパシティ確保 」「 設備の充実 」「 組織の一体感の強化 」が主に取りくむべき移転の課題でした。その解決のためオフィス専門の設計チームが初期のアーキテクトと施工管理を担当し、空間の方針とデザインと什器のディレクションを マエダ と私が担当しました。 先だって取りくんだのは空間の方針です。この先のメドレーの姿を踏まえ、そこに到達するための受け皿となるように設計しました。 これまでメドレーは社会の公器としての意識を持ち、様々なサービスで医療課題に取りくんできました。それが今年で創業 10 年を迎えています。規模も拡大し、さまざまな人がこのメドレーに参画するようになりベンチャー企業としてだけでなく社会の大きな責任を果たす存在になりつつあります。 そうしたときの空間の役割として これまでのベンチャーマインドとこれからの大きな責任を背負う姿勢の両方を意識できる空間づくり が良いのではと考え以下のような方針を組み立てました。 可変と不変の両極を横断する空間 急速に成長するためのベンチャーマインドと、拡大していく社会の公器として責任を負う姿勢を同居させるために、ただ新しくするだけではなく、今までのメドレーはしっかり持ち合わせる。そしてそれを日々の業務のなかで行き来できるように空間の方針をつくり、デザインに反映していきました。もちろん制約が多く結果論的な部分はありますが、新しくするために全てを壊すのではなく、かといって古いものを大事に取っておくのでもない、 これまでのメドレーらしさとこれからのメドレーの２つをポジティブに意識し設計 しました。 執務室は旧本社ビルの雰囲気をそのままスライドさせつつ、先に挙げた 3 つの課題を取りくむため機能を拡張しました。もっとも変えたのはエントランスから会議室にかけてです。コーポレートカラーである赤色を一切使わず真っ白な空間にしました。執務室が変えない場所であるなら、ここは変える場所であり、自分たちを一度否定し絶えず新しくしていく場所として位置付けました。これから様々な人と出会える場所としても日々新鮮な気持ちになれると考えたからです。 空間デザインの独特な難しさと向きあう この空間をつくるために、この分野特有の壁と向きあいました。UI デザインでは扱わない大きなサイズ感や専門知識を総動員して出来上がる空間を想像する力など、普段の仕事にはない技術や感覚を求められることが多く、独特の難しさを痛感しました。 たとえば UI デザインでは簡単にモックアップがつくれますが空間で「よし試しに壁たてるか！」なんてことはできません。仮にモックアップをつくれたとしても UI デザインほどの情報量で仕上がることはなく、そこは培ってきた経験と知識で補わなければなりません。専門のチームがいるので、えーい丸投げ！あとヨロシク！という考えも頭をよぎりましたが、決めるのは私の役目でもあるので、円滑なコラボレーションにするために、その人たちの知識や感覚に追いつくことは急務でした。 ここまでの話を聞くと体力的にキツそうと思われるかもしれませんが、実際は現業と通じる部分やデザイナーの感覚を分野を超えて持ち込める部分もありましたので、楽しみながら取りくめました。例えばデザイナーは物の形や色の違いに敏感な種族なので、それが 2D でも 3D でもすぐさま察知できます（程度にもよりますが）。図面と比較してわずかな壁の色や照明の輝度や色、わずかな目地のズレなどなど。 とはいえ異なる分野で直感１つで勝負できないのも理解しました。まだまだ学びは多そうですが、この取りくみを日頃の仕事にフィードバックしたいと思います。下記は取りくみを通して同じような機会を得たときに使える備忘録としてまとめてみたポイントです。 考えかたの定型化 - 何かをデザインするのなら進め方に違いはないはず。違っても自分の考えかたの型をもとにカスタマイズする 礼儀としての知識 - よほど未開拓でない限りその分野の専門家がいるはず。コラボレーションするために最低限の礼儀として知識は身につける 違和感を無視しない - その分野の常識や知識のインプットが追いつかなくても、そこで感じる引っかかりを共有することで周りが立ち返れる 分野が違うだけで別世界ではない 今回は分野を変えることで発見したことや取りくみを、オフィスデザインを通してお話させていただきました。振りかえると備忘録の 3 つや思考の整理の方法など、異なる分野だとしても、自分の専門分野での大事な考え方と共通する部分も多く感じました。もちろん全ての分野を渡り歩いたわけではないので当てはまらない場合はありますし、先述したように独特の難しさもあります。ただこの 3 つがどんな分野でも飛び越えれる最初の道具のうちの１つにすることで、良いスタートが切れるのかなと私は感じています。 異なる分野は今までの常識が全く通用しない別の世界ではないことを意識しながら、新しいことに挑戦していきたいと思います。 ここまで読んでいただき、ありがとうございました！ さいごに メドレーが向き合う医療の課題は複雑です。課題を解決するために１つの分野からの一点突破もありますが、多角的な分野からの突破もおこなっています。デザイナーでありながら、エンジニアでありながら、様々な分野に横断しスイッチでき課題解決に向き合うことができます。もしご興味のある方はぜひご連絡ください。 www.medley.jp www.medley.jp
先日、新卒エンジニアさんの**内定式(メドレー初！)**をおこないました。バキバキでキラキラのイケメン揃いなので中途イケメン枠で入社した私にとってこれまでの地位が危ぶまれ戦々恐々としています。開発本部デザイナーの小山です。 内定式もですが、大きな変化がメドレーにありデザイナーの役割が広がる機会が訪れたので、この場を借りてお話させていただきます。 近年デザイナーは分野を飛び越えた取りくみが求められる職種になりつつあります。クラシカルデザインが中心だった頃、それができるのはスターデザイナーであり、ごく限られた人たちでした。いまではテクノロジーやフレームワークの進歩により、デザイン思考やコンピュテーショーナルデザインなど、デザイナーが関われる分野はさらに広がりを見せています。いちデザイナーの私もそれに応えたいという想いはありつつも取りくむ難しさを感じています。 今回は分野を飛び越える難しさを日頃感じている UI デザイナーの私が、 オフィスデザインという普段とは異なる分野 に取りくんだお話をさせていただきます。 これからの受け皿を設計する 実は先月 9 月上旬に、メドレーは古巣の新六本木ビルを離れ六本木グランドタワーへ 本社移転 しました。私が入社した去年 3 月時点から社員数が 3 倍近く増えたので、「 社員数拡大のためのキャパシティ確保 」「 設備の充実 」「 組織の一体感の強化 」が主に取りくむべき移転の課題でした。その解決のためオフィス専門の設計チームが初期のアーキテクトと施工管理を担当し、空間の方針とデザインと什器のディレクションを マエダ と私が担当しました。 先だって取りくんだのは空間の方針です。この先のメドレーの姿を踏まえ、そこに到達するための受け皿となるように設計しました。 これまでメドレーは社会の公器としての意識を持ち、様々なサービスで医療課題に取りくんできました。それが今年で創業 10 年を迎えています。規模も拡大し、さまざまな人がこのメドレーに参画するようになりベンチャー企業としてだけでなく社会の大きな責任を果たす存在になりつつあります。 そうしたときの空間の役割として これまでのベンチャーマインドとこれからの大きな責任を背負う姿勢の両方を意識できる空間づくり が良いのではと考え以下のような方針を組み立てました。 可変と不変の両極を横断する空間 急速に成長するためのベンチャーマインドと、拡大していく社会の公器として責任を負う姿勢を同居させるために、ただ新しくするだけではなく、今までのメドレーはしっかり持ち合わせる。そしてそれを日々の業務のなかで行き来できるように空間の方針をつくり、デザインに反映していきました。もちろん制約が多く結果論的な部分はありますが、新しくするために全てを壊すのではなく、かといって古いものを大事に取っておくのでもない、 これまでのメドレーらしさとこれからのメドレーの２つをポジティブに意識し設計 しました。 執務室は旧本社ビルの雰囲気をそのままスライドさせつつ、先に挙げた 3 つの課題を取りくむため機能を拡張しました。もっとも変えたのはエントランスから会議室にかけてです。コーポレートカラーである赤色を一切使わず真っ白な空間にしました。執務室が変えない場所であるなら、ここは変える場所であり、自分たちを一度否定し絶えず新しくしていく場所として位置付けました。これから様々な人と出会える場所としても日々新鮮な気持ちになれると考えたからです。 空間デザインの独特な難しさと向きあう この空間をつくるために、この分野特有の壁と向きあいました。UI デザインでは扱わない大きなサイズ感や専門知識を総動員して出来上がる空間を想像する力など、普段の仕事にはない技術や感覚を求められることが多く、独特の難しさを痛感しました。 たとえば UI デザインでは簡単にモックアップがつくれますが空間で「よし試しに壁たてるか！」なんてことはできません。仮にモックアップをつくれたとしても UI デザインほどの情報量で仕上がることはなく、そこは培ってきた経験と知識で補わなければなりません。専門のチームがいるので、えーい丸投げ！あとヨロシク！という考えも頭をよぎりましたが、決めるのは私の役目でもあるので、円滑なコラボレーションにするために、その人たちの知識や感覚に追いつくことは急務でした。 ここまでの話を聞くと体力的にキツそうと思われるかもしれませんが、実際は現業と通じる部分やデザイナーの感覚を分野を超えて持ち込める部分もありましたので、楽しみながら取りくめました。例えばデザイナーは物の形や色の違いに敏感な種族なので、それが 2D でも 3D でもすぐさま察知できます（程度にもよりますが）。図面と比較してわずかな壁の色や照明の輝度や色、わずかな目地のズレなどなど。 とはいえ異なる分野で直感１つで勝負できないのも理解しました。まだまだ学びは多そうですが、この取りくみを日頃の仕事にフィードバックしたいと思います。下記は取りくみを通して同じような機会を得たときに使える備忘録としてまとめてみたポイントです。 考えかたの定型化 - 何かをデザインするのなら進め方に違いはないはず。違っても自分の考えかたの型をもとにカスタマイズする 礼儀としての知識 - よほど未開拓でない限りその分野の専門家がいるはず。コラボレーションするために最低限の礼儀として知識は身につける 違和感を無視しない - その分野の常識や知識のインプットが追いつかなくても、そこで感じる引っかかりを共有することで周りが立ち返れる 分野が違うだけで別世界ではない 今回は分野を変えることで発見したことや取りくみを、オフィスデザインを通してお話させていただきました。振りかえると備忘録の 3 つや思考の整理の方法など、異なる分野だとしても、自分の専門分野での大事な考え方と共通する部分も多く感じました。もちろん全ての分野を渡り歩いたわけではないので当てはまらない場合はありますし、先述したように独特の難しさもあります。ただこの 3 つがどんな分野でも飛び越えれる最初の道具のうちの１つにすることで、良いスタートが切れるのかなと私は感じています。 異なる分野は今までの常識が全く通用しない別の世界ではないことを意識しながら、新しいことに挑戦していきたいと思います。 ここまで読んでいただき、ありがとうございました！ さいごに メドレーが向き合う医療の課題は複雑です。課題を解決するために１つの分野からの一点突破もありますが、多角的な分野からの突破もおこなっています。デザイナーでありながら、エンジニアでありながら、様々な分野に横断しスイッチでき課題解決に向き合うことができます。もしご興味のある方はぜひご連絡ください。 www.medley.jp www.medley.jp
先日、新卒エンジニアさんの**内定式(メドレー初！)**をおこないました。バキバキでキラキラのイケメン揃いなので中途イケメン枠で入社した私にとってこれまでの地位が危ぶまれ戦々恐々としています。開発本部デザイナーの小山です。 内定式もですが、大きな変化がメドレーにありデザイナーの役割が広がる機会が訪れたので、この場を借りてお話させていただきます。 近年デザイナーは分野を飛び越えた取りくみが求められる職種になりつつあります。クラシカルデザインが中心だった頃、それができるのはスターデザイナーであり、ごく限られた人たちでした。いまではテクノロジーやフレームワークの進歩により、デザイン思考やコンピュテーショーナルデザインなど、デザイナーが関われる分野はさらに広がりを見せています。いちデザイナーの私もそれに応えたいという想いはありつつも取りくむ難しさを感じています。 今回は分野を飛び越える難しさを日頃感じている UI デザイナーの私が、 オフィスデザインという普段とは異なる分野 に取りくんだお話をさせていただきます。 これからの受け皿を設計する 実は先月 9 月上旬に、メドレーは古巣の新六本木ビルを離れ六本木グランドタワーへ 本社移転 しました。私が入社した去年 3 月時点から社員数が 3 倍近く増えたので、「 社員数拡大のためのキャパシティ確保 」「 設備の充実 」「 組織の一体感の強化 」が主に取りくむべき移転の課題でした。その解決のためオフィス専門の設計チームが初期のアーキテクトと施工管理を担当し、空間の方針とデザインと什器のディレクションを マエダ と私が担当しました。 先だって取りくんだのは空間の方針です。この先のメドレーの姿を踏まえ、そこに到達するための受け皿となるように設計しました。 これまでメドレーは社会の公器としての意識を持ち、様々なサービスで医療課題に取りくんできました。それが今年で創業 10 年を迎えています。規模も拡大し、さまざまな人がこのメドレーに参画するようになりベンチャー企業としてだけでなく社会の大きな責任を果たす存在になりつつあります。 そうしたときの空間の役割として これまでのベンチャーマインドとこれからの大きな責任を背負う姿勢の両方を意識できる空間づくり が良いのではと考え以下のような方針を組み立てました。 可変と不変の両極を横断する空間 急速に成長するためのベンチャーマインドと、拡大していく社会の公器として責任を負う姿勢を同居させるために、ただ新しくするだけではなく、今までのメドレーはしっかり持ち合わせる。そしてそれを日々の業務のなかで行き来できるように空間の方針をつくり、デザインに反映していきました。もちろん制約が多く結果論的な部分はありますが、新しくするために全てを壊すのではなく、かといって古いものを大事に取っておくのでもない、 これまでのメドレーらしさとこれからのメドレーの２つをポジティブに意識し設計 しました。 執務室は旧本社ビルの雰囲気をそのままスライドさせつつ、先に挙げた 3 つの課題を取りくむため機能を拡張しました。もっとも変えたのはエントランスから会議室にかけてです。コーポレートカラーである赤色を一切使わず真っ白な空間にしました。執務室が変えない場所であるなら、ここは変える場所であり、自分たちを一度否定し絶えず新しくしていく場所として位置付けました。これから様々な人と出会える場所としても日々新鮮な気持ちになれると考えたからです。 空間デザインの独特な難しさと向きあう この空間をつくるために、この分野特有の壁と向きあいました。UI デザインでは扱わない大きなサイズ感や専門知識を総動員して出来上がる空間を想像する力など、普段の仕事にはない技術や感覚を求められることが多く、独特の難しさを痛感しました。 たとえば UI デザインでは簡単にモックアップがつくれますが空間で「よし試しに壁たてるか！」なんてことはできません。仮にモックアップをつくれたとしても UI デザインほどの情報量で仕上がることはなく、そこは培ってきた経験と知識で補わなければなりません。専門のチームがいるので、えーい丸投げ！あとヨロシク！という考えも頭をよぎりましたが、決めるのは私の役目でもあるので、円滑なコラボレーションにするために、その人たちの知識や感覚に追いつくことは急務でした。 ここまでの話を聞くと体力的にキツそうと思われるかもしれませんが、実際は現業と通じる部分やデザイナーの感覚を分野を超えて持ち込める部分もありましたので、楽しみながら取りくめました。例えばデザイナーは物の形や色の違いに敏感な種族なので、それが 2D でも 3D でもすぐさま察知できます（程度にもよりますが）。図面と比較してわずかな壁の色や照明の輝度や色、わずかな目地のズレなどなど。 とはいえ異なる分野で直感１つで勝負できないのも理解しました。まだまだ学びは多そうですが、この取りくみを日頃の仕事にフィードバックしたいと思います。下記は取りくみを通して同じような機会を得たときに使える備忘録としてまとめてみたポイントです。 考えかたの定型化 - 何かをデザインするのなら進め方に違いはないはず。違っても自分の考えかたの型をもとにカスタマイズする 礼儀としての知識 - よほど未開拓でない限りその分野の専門家がいるはず。コラボレーションするために最低限の礼儀として知識は身につける 違和感を無視しない - その分野の常識や知識のインプットが追いつかなくても、そこで感じる引っかかりを共有することで周りが立ち返れる 分野が違うだけで別世界ではない 今回は分野を変えることで発見したことや取りくみを、オフィスデザインを通してお話させていただきました。振りかえると備忘録の 3 つや思考の整理の方法など、異なる分野だとしても、自分の専門分野での大事な考え方と共通する部分も多く感じました。もちろん全ての分野を渡り歩いたわけではないので当てはまらない場合はありますし、先述したように独特の難しさもあります。ただこの 3 つがどんな分野でも飛び越えれる最初の道具のうちの１つにすることで、良いスタートが切れるのかなと私は感じています。 異なる分野は今までの常識が全く通用しない別の世界ではないことを意識しながら、新しいことに挑戦していきたいと思います。 ここまで読んでいただき、ありがとうございました！ さいごに メドレーが向き合う医療の課題は複雑です。課題を解決するために１つの分野からの一点突破もありますが、多角的な分野からの突破もおこなっています。デザイナーでありながら、エンジニアでありながら、様々な分野に横断しスイッチでき課題解決に向き合うことができます。もしご興味のある方はぜひご連絡ください。 www.medley.jp www.medley.jp
先日、新卒エンジニアさんの**内定式(メドレー初！)**をおこないました。バキバキでキラキラのイケメン揃いなので中途イケメン枠で入社した私にとってこれまでの地位が危ぶまれ戦々恐々としています。開発本部デザイナーの小山です。 内定式もですが、大きな変化がメドレーにありデザイナーの役割が広がる機会が訪れたので、この場を借りてお話させていただきます。 近年デザイナーは分野を飛び越えた取りくみが求められる職種になりつつあります。クラシカルデザインが中心だった頃、それができるのはスターデザイナーであり、ごく限られた人たちでした。いまではテクノロジーやフレームワークの進歩により、デザイン思考やコンピュテーショーナルデザインなど、デザイナーが関われる分野はさらに広がりを見せています。いちデザイナーの私もそれに応えたいという想いはありつつも取りくむ難しさを感じています。 今回は分野を飛び越える難しさを日頃感じている UI デザイナーの私が、 オフィスデザインという普段とは異なる分野 に取りくんだお話をさせていただきます。 これからの受け皿を設計する 実は先月 9 月上旬に、メドレーは古巣の新六本木ビルを離れ六本木グランドタワーへ 本社移転 しました。私が入社した去年 3 月時点から社員数が 3 倍近く増えたので、「 社員数拡大のためのキャパシティ確保 」「 設備の充実 」「 組織の一体感の強化 」が主に取りくむべき移転の課題でした。その解決のためオフィス専門の設計チームが初期のアーキテクトと施工管理を担当し、空間の方針とデザインと什器のディレクションを マエダ と私が担当しました。 先だって取りくんだのは空間の方針です。この先のメドレーの姿を踏まえ、そこに到達するための受け皿となるように設計しました。 これまでメドレーは社会の公器としての意識を持ち、様々なサービスで医療課題に取りくんできました。それが今年で創業 10 年を迎えています。規模も拡大し、さまざまな人がこのメドレーに参画するようになりベンチャー企業としてだけでなく社会の大きな責任を果たす存在になりつつあります。 そうしたときの空間の役割として これまでのベンチャーマインドとこれからの大きな責任を背負う姿勢の両方を意識できる空間づくり が良いのではと考え以下のような方針を組み立てました。 可変と不変の両極を横断する空間 急速に成長するためのベンチャーマインドと、拡大していく社会の公器として責任を負う姿勢を同居させるために、ただ新しくするだけではなく、今までのメドレーはしっかり持ち合わせる。そしてそれを日々の業務のなかで行き来できるように空間の方針をつくり、デザインに反映していきました。もちろん制約が多く結果論的な部分はありますが、新しくするために全てを壊すのではなく、かといって古いものを大事に取っておくのでもない、 これまでのメドレーらしさとこれからのメドレーの２つをポジティブに意識し設計 しました。 執務室は旧本社ビルの雰囲気をそのままスライドさせつつ、先に挙げた 3 つの課題を取りくむため機能を拡張しました。もっとも変えたのはエントランスから会議室にかけてです。コーポレートカラーである赤色を一切使わず真っ白な空間にしました。執務室が変えない場所であるなら、ここは変える場所であり、自分たちを一度否定し絶えず新しくしていく場所として位置付けました。これから様々な人と出会える場所としても日々新鮮な気持ちになれると考えたからです。 空間デザインの独特な難しさと向きあう この空間をつくるために、この分野特有の壁と向きあいました。UI デザインでは扱わない大きなサイズ感や専門知識を総動員して出来上がる空間を想像する力など、普段の仕事にはない技術や感覚を求められることが多く、独特の難しさを痛感しました。 たとえば UI デザインでは簡単にモックアップがつくれますが空間で「よし試しに壁たてるか！」なんてことはできません。仮にモックアップをつくれたとしても UI デザインほどの情報量で仕上がることはなく、そこは培ってきた経験と知識で補わなければなりません。専門のチームがいるので、えーい丸投げ！あとヨロシク！という考えも頭をよぎりましたが、決めるのは私の役目でもあるので、円滑なコラボレーションにするために、その人たちの知識や感覚に追いつくことは急務でした。 ここまでの話を聞くと体力的にキツそうと思われるかもしれませんが、実際は現業と通じる部分やデザイナーの感覚を分野を超えて持ち込める部分もありましたので、楽しみながら取りくめました。例えばデザイナーは物の形や色の違いに敏感な種族なので、それが 2D でも 3D でもすぐさま察知できます（程度にもよりますが）。図面と比較してわずかな壁の色や照明の輝度や色、わずかな目地のズレなどなど。 とはいえ異なる分野で直感１つで勝負できないのも理解しました。まだまだ学びは多そうですが、この取りくみを日頃の仕事にフィードバックしたいと思います。下記は取りくみを通して同じような機会を得たときに使える備忘録としてまとめてみたポイントです。 考えかたの定型化 - 何かをデザインするのなら進め方に違いはないはず。違っても自分の考えかたの型をもとにカスタマイズする 礼儀としての知識 - よほど未開拓でない限りその分野の専門家がいるはず。コラボレーションするために最低限の礼儀として知識は身につける 違和感を無視しない - その分野の常識や知識のインプットが追いつかなくても、そこで感じる引っかかりを共有することで周りが立ち返れる 分野が違うだけで別世界ではない 今回は分野を変えることで発見したことや取りくみを、オフィスデザインを通してお話させていただきました。振りかえると備忘録の 3 つや思考の整理の方法など、異なる分野だとしても、自分の専門分野での大事な考え方と共通する部分も多く感じました。もちろん全ての分野を渡り歩いたわけではないので当てはまらない場合はありますし、先述したように独特の難しさもあります。ただこの 3 つがどんな分野でも飛び越えれる最初の道具のうちの１つにすることで、良いスタートが切れるのかなと私は感じています。 異なる分野は今までの常識が全く通用しない別の世界ではないことを意識しながら、新しいことに挑戦していきたいと思います。 ここまで読んでいただき、ありがとうございました！ さいごに メドレーが向き合う医療の課題は複雑です。課題を解決するために１つの分野からの一点突破もありますが、多角的な分野からの突破もおこなっています。デザイナーでありながら、エンジニアでありながら、様々な分野に横断しスイッチでき課題解決に向き合うことができます。もしご興味のある方はぜひご連絡ください。 www.medley.jp www.medley.jp