みなさん、こんにちは。開発本部のエンジニアの舘野です。先日、社内勉強会「TechLunch」で Badging API について発表したので、その内容を紹介させていただきます。 Badging API とは Badging API とは、ネイティブアプリのアプリアイコン上に表示されるバッジと同様に、ウェブアプリのアイコン上にバッジを表示することができる Web API です。 ネイティブアプリで可能なこと全てをウェブアプリでも可能にすることを目指す、 Fugu というプロジェクトで実現に向けて動いている API の 1 つで、Chrome 73 から Origin Trials として利用可能になっています。Origin Trials とは、試験的に特定の開発者に限定して API を利用できるようにする仕組みのことで、正式リリース前に API に対する有用なフィードバックを受け取ることができるものです。 この API の最新の概要や仕様については、 WICG が Github に Badging API のリポジトリ を用意しているので、そこで確認することができます。 WICG（The Web Incubator Community Group）は、先進的なウェブ技術について検討するコミュニティグループで、W3C のグループの 1 つです。 提案されている API のインターフェースは、現時点(2019/08/14)では以下のようになっています。 https://github.com/WICG/badging/blob/master/explainer.md#the-api Badge を window オブジェクトのメンバとして持つ Badge には 2 つのメソッドが存在する Badge.set() Badge.clear() Badge.set(5) のように set() に整数を渡してバッジ上に数字を表示する 単に Badge.set() で呼び出すとフラグとしてバッジを表示する Badge.set(5, { scope: ‘/baz’ }) のようにオプションを渡して特定のスコープ配下で表示されるように指定できる オプションでスコープが指定されてない場合、スコープは / になる ローカル環境で試す 実際にどのような形でバッジを表示できるかを確認するために、今回はローカル環境（macOS 10.14、Chrome76）で試してみました。 API 自体は非常にシンプルなので、PWA のアプリを用意してインストールするだけで簡単に試すことができます。 インストールされていないウェブアプリでも、タブの favicon 上やブックマークアイコン上にバッジを表示することも議論されているようですが、今のところインストール済みのウェブアプリでしかバッジは表示されません。 最初に API を利用可能な状態にする必要がありますが、上述の通り API 自体が現在 Origin Trials の段階なので、Origin Trials の利用申請を行うかローカル環境であれば chrome://flags で実験的な機能を有効にする（#enable-experimental-web-platform-features）かのいずれかを行う必要があります。 今回はローカル環境で試すだけなので、chrome://flags から enable-experimental-web-platform-features を有効にしておきます。 実験的な機能を利用可能にしたことで Badging API 自体は利用可能になりますが、 window.Badge として利用可能になっているのではなく、Origin Trials の段階では Badge ではなく ExperimentalBadge として提供されています。 次に、サンプルのプロジェクトを用意して webpack-dev-server でローカルサーバを用意します。 $ yarn init $ yarn add --dev webpack webpack-cli webpack-dev-server html-webpack-plugin copy-webpack-plugin webpack-dev-server でローカルサーバが見れる状態になるように webpack.config.js に設定を記述します。 const path = require ( "path" ); const HtmlWwebpackPlugin = require ( "html-webpack-plugin" ); module . exports = { mode: "development" , devServer: { https: true , }, entry: { app: [ "./src/js/app.js" ], }, output: { path: path . resolve ( __dirname , "./dist" ), }, plugins: [ new HtmlWwebpackPlugin ({ template: "src/index.html" , }), ], }; 次に manifest.json を用意します。manifest.json は、そのアプリがどういったものか、また、インストールした時にどのように振る舞うかをブラウザに伝えるための設定ファイルになります。 https://app-manifest.firebaseapp.com/ のようなサービスで manifest.json とアイコンを各種サイズ自動生成できるので、今回はこのサービスで生成します。 {   "name" : "badging-api-playground" ,   "short_name" : "badge" ,   "theme_color" : "#5B5CFD" ,   "background_color" : "#5B5CFD" ,   "display" : "standalone" ,   "orientation" : "portrait" ,   "prefer_related_applications" : false ,   "Scope" : "/" ,   "start_url" : "/" ,   "icons" : [     {       "src" : "images/icons/icon-72x72.png" ,       "sizes" : "72x72" ,       "type" : "image/png"     },     {       "src" : "images/icons/icon-96x96.png" ,       "sizes" : "96x96" ,       "type" : "image/png"     },     {       "src" : "images/icons/icon-128x128.png" ,       "sizes" : "128x128" ,       "type" : "image/png"     },     {       "src" : "images/icons/icon-144x144.png" ,       "sizes" : "144x144" ,       "type" : "image/png"     },     ….   ],   "splash_pages" : null } webpack.config.js の方に manifest.json をローカルサーバで配信されるように設定を追加しておきます。 const path = require('path') const HtmlWwebpackPlugin = require('html-webpack-plugin') + const CopyPlugin = require('copy-webpack-plugin') module.exports = {   ….   plugins: [     …. +     new CopyPlugin([ +       { +         from: 'src/manifest.json', +         to: '', +       }, +       { +         from: 'src/images/icons', +         to: 'images/icons/' +       }, +     ]),   ], } ここまでで Chrome の Application タブから manifest.json が認識されいてることが確認できますが、インストール可能な状態にはなっていません。 アプリをインストール可能な状態にするには いくつかの基準 があり、service worker が必要になります。今回は Workbox の webpack プラグインで対応します。 yarn add --dev workbox-webpack-plugin workbox には GenerateSW と injectManifest の 2 つのモードがあり、今回はどちらでも問題ないかと思いますが injectManifest モードを利用します。 const path = require('path') const HtmlWwebpackPlugin = require('html-webpack-plugin') const CopyPlugin = require('copy-webpack-plugin') + const { InjectManifest } = require('workbox-webpack-plugin') module.exports = {   ….   plugins: [     …. +     new InjectManifest({ +       swSrc: path.resolve(__dirname, 'src/sw.js'), +     }),   ], } app.js の方で service worker の登録がされるように記述しておきます。 if ( "serviceWorker" in navigator ) { window . addEventListener ( "load" , () => { navigator . serviceWorker . register ( "./sw.js" ) . then (( res ) => { console . log ( res ); }) . catch (( err ) => { console . error ( err ); }); }); } service worker の対応が済むとインストール可能なアプリの基準を満たすので、Chrome76 ではアドレスバーにオムニボックスが表示され、そこからインストールが可能になっています。 インストールすると Launchpad にアプリアイコンが表示されたので、実際に Badge API を試してみます。 window.ExperimentalBadge.set() を呼び出すと、フラグとしてバッジがつきます。 window.ExperimentalBadge.set(1) のように引数に数値を入れて呼び出すと、バッジは数字が入った状態で表示されます。 window.ExperimentalBadge.clear() でバッジがクリアされ、元のアプリアイコンだけの状態に戻ります。 非常に簡単ではありますが、このようにしてウェブアプリのアイコンにバッジをつけられることが確認できました。 なお、このサンプルプロジェクトは https://github.com/makotot/badging-api-playground にあげてあります。 まとめ 近い将来正式リリースされる可能性が高い API を試すことで、今後ウェブアプリでどのようなことが実現可能になっていくかの一端を垣間見ることができました。 API 自体が Origin Trial の段階で、ブラウザのタブの favicon 上やブックマークアイコン上に表示したいケースであったり、バッジはどこまでの範囲で適用するべきかのスコープの問題であったり、最終的にどのような形に仕様が整理されるかまだ明確ではない部分もあります。 最終的にどのように課題が解決されていくか注目したいと思います。

みなさん、こんにちは。開発本部のエンジニアの舘野です。先日、社内勉強会「TechLunch」で Badging API について発表したので、その内容を紹介させていただきます。 Badging API とは Badging API とは、ネイティブアプリのアプリアイコン上に表示されるバッジと同様に、ウェブアプリのアイコン上にバッジを表示することができる Web API です。 ネイティブアプリで可能なこと全てをウェブアプリでも可能にすることを目指す、 Fugu というプロジェクトで実現に向けて動いている API の 1 つで、Chrome 73 から Origin Trials として利用可能になっています。Origin Trials とは、試験的に特定の開発者に限定して API を利用できるようにする仕組みのことで、正式リリース前に API に対する有用なフィードバックを受け取ることができるものです。 この API の最新の概要や仕様については、 WICG が Github に Badging API のリポジトリ を用意しているので、そこで確認することができます。 WICG（The Web Incubator Community Group）は、先進的なウェブ技術について検討するコミュニティグループで、W3C のグループの 1 つです。 提案されている API のインターフェースは、現時点(2019/08/14)では以下のようになっています。 badging/explainer.md at main · w3c/badging Badging API. Contribute to w3c/badging development by creating an account on GitHub. github.com Badge を window オブジェクトのメンバとして持つ Badge には 2 つのメソッドが存在する Badge.set() Badge.clear() Badge.set(5) のように set() に整数を渡してバッジ上に数字を表示する 単に Badge.set() で呼び出すとフラグとしてバッジを表示する Badge.set(5, { scope: ‘/baz’ }) のようにオプションを渡して特定のスコープ配下で表示されるように指定できる オプションでスコープが指定されてない場合、スコープは / になる ローカル環境で試す 実際にどのような形でバッジを表示できるかを確認するために、今回はローカル環境（macOS 10.14、Chrome76）で試してみました。 API 自体は非常にシンプルなので、PWA のアプリを用意してインストールするだけで簡単に試すことができます。 インストールされていないウェブアプリでも、タブの favicon 上やブックマークアイコン上にバッジを表示することも議論されているようですが、今のところインストール済みのウェブアプリでしかバッジは表示されません。 最初に API を利用可能な状態にする必要がありますが、上述の通り API 自体が現在 Origin Trials の段階なので、Origin Trials の利用申請を行うかローカル環境であれば chrome://flags で実験的な機能を有効にする（#enable-experimental-web-platform-features）かのいずれかを行う必要があります。 今回はローカル環境で試すだけなので、chrome://flags から enable-experimental-web-platform-features を有効にしておきます。 実験的な機能を利用可能にしたことで Badging API 自体は利用可能になりますが、 window.Badge として利用可能になっているのではなく、Origin Trials の段階では Badge ではなく ExperimentalBadge として提供されています。 次に、サンプルのプロジェクトを用意して webpack-dev-server でローカルサーバを用意します。 $ yarn init $ yarn add --dev webpack webpack-cli webpack-dev-server html-webpack-plugin copy-webpack-plugin webpack-dev-server でローカルサーバが見れる状態になるように webpack.config.js に設定を記述します。 const path = require ( "path" ); const HtmlWwebpackPlugin = require ( "html-webpack-plugin" ); module . exports = { mode: "development" , devServer: { https: true , }, entry: { app: [ "./src/js/app.js" ], }, output: { path: path . resolve ( __dirname , "./dist" ), }, plugins: [ new HtmlWwebpackPlugin ({ template: "src/index.html" , }), ], }; 次に manifest.json を用意します。manifest.json は、そのアプリがどういったものか、また、インストールした時にどのように振る舞うかをブラウザに伝えるための設定ファイルになります。 https://app-manifest.firebaseapp.com/ のようなサービスで manifest.json とアイコンを各種サイズ自動生成できるので、今回はこのサービスで生成します。 {   "name" : "badging-api-playground" ,   "short_name" : "badge" ,   "theme_color" : "#5B5CFD" ,   "background_color" : "#5B5CFD" ,   "display" : "standalone" ,   "orientation" : "portrait" ,   "prefer_related_applications" : false ,   "Scope" : "/" ,   "start_url" : "/" ,   "icons" : [     {       "src" : "images/icons/icon-72x72.png" ,       "sizes" : "72x72" ,       "type" : "image/png"     },     {       "src" : "images/icons/icon-96x96.png" ,       "sizes" : "96x96" ,       "type" : "image/png"     },     {       "src" : "images/icons/icon-128x128.png" ,       "sizes" : "128x128" ,       "type" : "image/png"     },     {       "src" : "images/icons/icon-144x144.png" ,       "sizes" : "144x144" ,       "type" : "image/png"     },     ….   ],   "splash_pages" : null } webpack.config.js の方に manifest.json をローカルサーバで配信されるように設定を追加しておきます。 const path = require('path') const HtmlWwebpackPlugin = require('html-webpack-plugin') + const CopyPlugin = require('copy-webpack-plugin') module.exports = {   ….   plugins: [     …. +     new CopyPlugin([ +       { +         from: 'src/manifest.json', +         to: '', +       }, +       { +         from: 'src/images/icons', +         to: 'images/icons/' +       }, +     ]),   ], } ここまでで Chrome の Application タブから manifest.json が認識されいてることが確認できますが、インストール可能な状態にはなっていません。 アプリをインストール可能な状態にするには いくつかの基準 があり、service worker が必要になります。今回は Workbox の webpack プラグインで対応します。 yarn add --dev workbox-webpack-plugin workbox には GenerateSW と injectManifest の 2 つのモードがあり、今回はどちらでも問題ないかと思いますが injectManifest モードを利用します。 const path = require('path') const HtmlWwebpackPlugin = require('html-webpack-plugin') const CopyPlugin = require('copy-webpack-plugin') + const { InjectManifest } = require('workbox-webpack-plugin') module.exports = {   ….   plugins: [     …. +     new InjectManifest({ +       swSrc: path.resolve(__dirname, 'src/sw.js'), +     }),   ], } app.js の方で service worker の登録がされるように記述しておきます。 if ( "serviceWorker" in navigator ) { window . addEventListener ( "load" , () => { navigator . serviceWorker . register ( "./sw.js" ) . then (( res ) => { console . log ( res ); }) . catch (( err ) => { console . error ( err ); }); }); } service worker の対応が済むとインストール可能なアプリの基準を満たすので、Chrome76 ではアドレスバーにオムニボックスが表示され、そこからインストールが可能になっています。 インストールすると Launchpad にアプリアイコンが表示されたので、実際に Badge API を試してみます。 window.ExperimentalBadge.set() を呼び出すと、フラグとしてバッジがつきます。 window.ExperimentalBadge.set(1) のように引数に数値を入れて呼び出すと、バッジは数字が入った状態で表示されます。 window.ExperimentalBadge.clear() でバッジがクリアされ、元のアプリアイコンだけの状態に戻ります。 非常に簡単ではありますが、このようにしてウェブアプリのアイコンにバッジをつけられることが確認できました。 なお、このサンプルプロジェクトは https://github.com/makotot/badging-api-playground にあげてあります。 まとめ 近い将来正式リリースされる可能性が高い API を試すことで、今後ウェブアプリでどのようなことが実現可能になっていくかの一端を垣間見ることができました。 API 自体が Origin Trial の段階で、ブラウザのタブの favicon 上やブックマークアイコン上に表示したいケースであったり、バッジはどこまでの範囲で適用するべきかのスコープの問題であったり、最終的にどのような形に仕様が整理されるかまだ明確ではない部分もあります。 最終的にどのように課題が解決されていくか注目したいと思います。

みなさん、こんにちは。開発本部のエンジニアの舘野です。先日、社内勉強会「TechLunch」で Badging API について発表したので、その内容を紹介させていただきます。 Badging API とは Badging API とは、ネイティブアプリのアプリアイコン上に表示されるバッジと同様に、ウェブアプリのアイコン上にバッジを表示することができる Web API です。 ネイティブアプリで可能なこと全てをウェブアプリでも可能にすることを目指す、 Fugu というプロジェクトで実現に向けて動いている API の 1 つで、Chrome 73 から Origin Trials として利用可能になっています。Origin Trials とは、試験的に特定の開発者に限定して API を利用できるようにする仕組みのことで、正式リリース前に API に対する有用なフィードバックを受け取ることができるものです。 この API の最新の概要や仕様については、 WICG が Github に Badging API のリポジトリ を用意しているので、そこで確認することができます。 WICG（The Web Incubator Community Group）は、先進的なウェブ技術について検討するコミュニティグループで、W3C のグループの 1 つです。 提案されている API のインターフェースは、現時点(2019/08/14)では以下のようになっています。 badging/explainer.md at main · w3c/badging Badging API. Contribute to w3c/badging development by creating an account on GitHub. github.com Badge を window オブジェクトのメンバとして持つ Badge には 2 つのメソッドが存在する Badge.set() Badge.clear() Badge.set(5) のように set() に整数を渡してバッジ上に数字を表示する 単に Badge.set() で呼び出すとフラグとしてバッジを表示する Badge.set(5, { scope: ‘/baz’ }) のようにオプションを渡して特定のスコープ配下で表示されるように指定できる オプションでスコープが指定されてない場合、スコープは / になる ローカル環境で試す 実際にどのような形でバッジを表示できるかを確認するために、今回はローカル環境（macOS 10.14、Chrome76）で試してみました。 API 自体は非常にシンプルなので、PWA のアプリを用意してインストールするだけで簡単に試すことができます。 インストールされていないウェブアプリでも、タブの favicon 上やブックマークアイコン上にバッジを表示することも議論されているようですが、今のところインストール済みのウェブアプリでしかバッジは表示されません。 最初に API を利用可能な状態にする必要がありますが、上述の通り API 自体が現在 Origin Trials の段階なので、Origin Trials の利用申請を行うかローカル環境であれば chrome://flags で実験的な機能を有効にする（#enable-experimental-web-platform-features）かのいずれかを行う必要があります。 今回はローカル環境で試すだけなので、chrome://flags から enable-experimental-web-platform-features を有効にしておきます。 実験的な機能を利用可能にしたことで Badging API 自体は利用可能になりますが、 window.Badge として利用可能になっているのではなく、Origin Trials の段階では Badge ではなく ExperimentalBadge として提供されています。 次に、サンプルのプロジェクトを用意して webpack-dev-server でローカルサーバを用意します。 $ yarn init $ yarn add --dev webpack webpack-cli webpack-dev-server html-webpack-plugin copy-webpack-plugin webpack-dev-server でローカルサーバが見れる状態になるように webpack.config.js に設定を記述します。 const path = require ( "path" ); const HtmlWwebpackPlugin = require ( "html-webpack-plugin" ); module . exports = { mode: "development" , devServer: { https: true , }, entry: { app: [ "./src/js/app.js" ], }, output: { path: path . resolve ( __dirname , "./dist" ), }, plugins: [ new HtmlWwebpackPlugin ({ template: "src/index.html" , }), ], }; 次に manifest.json を用意します。manifest.json は、そのアプリがどういったものか、また、インストールした時にどのように振る舞うかをブラウザに伝えるための設定ファイルになります。 https://app-manifest.firebaseapp.com/ のようなサービスで manifest.json とアイコンを各種サイズ自動生成できるので、今回はこのサービスで生成します。 {   "name" : "badging-api-playground" ,   "short_name" : "badge" ,   "theme_color" : "#5B5CFD" ,   "background_color" : "#5B5CFD" ,   "display" : "standalone" ,   "orientation" : "portrait" ,   "prefer_related_applications" : false ,   "Scope" : "/" ,   "start_url" : "/" ,   "icons" : [     {       "src" : "images/icons/icon-72x72.png" ,       "sizes" : "72x72" ,       "type" : "image/png"     },     {       "src" : "images/icons/icon-96x96.png" ,       "sizes" : "96x96" ,       "type" : "image/png"     },     {       "src" : "images/icons/icon-128x128.png" ,       "sizes" : "128x128" ,       "type" : "image/png"     },     {       "src" : "images/icons/icon-144x144.png" ,       "sizes" : "144x144" ,       "type" : "image/png"     },     ….   ],   "splash_pages" : null } webpack.config.js の方に manifest.json をローカルサーバで配信されるように設定を追加しておきます。 const path = require('path') const HtmlWwebpackPlugin = require('html-webpack-plugin') + const CopyPlugin = require('copy-webpack-plugin') module.exports = {   ….   plugins: [     …. +     new CopyPlugin([ +       { +         from: 'src/manifest.json', +         to: '', +       }, +       { +         from: 'src/images/icons', +         to: 'images/icons/' +       }, +     ]),   ], } ここまでで Chrome の Application タブから manifest.json が認識されいてることが確認できますが、インストール可能な状態にはなっていません。 アプリをインストール可能な状態にするには いくつかの基準 があり、service worker が必要になります。今回は Workbox の webpack プラグインで対応します。 yarn add --dev workbox-webpack-plugin workbox には GenerateSW と injectManifest の 2 つのモードがあり、今回はどちらでも問題ないかと思いますが injectManifest モードを利用します。 const path = require('path') const HtmlWwebpackPlugin = require('html-webpack-plugin') const CopyPlugin = require('copy-webpack-plugin') + const { InjectManifest } = require('workbox-webpack-plugin') module.exports = {   ….   plugins: [     …. +     new InjectManifest({ +       swSrc: path.resolve(__dirname, 'src/sw.js'), +     }),   ], } app.js の方で service worker の登録がされるように記述しておきます。 if ( "serviceWorker" in navigator ) { window . addEventListener ( "load" , () => { navigator . serviceWorker . register ( "./sw.js" ) . then (( res ) => { console . log ( res ); }) . catch (( err ) => { console . error ( err ); }); }); } service worker の対応が済むとインストール可能なアプリの基準を満たすので、Chrome76 ではアドレスバーにオムニボックスが表示され、そこからインストールが可能になっています。 インストールすると Launchpad にアプリアイコンが表示されたので、実際に Badge API を試してみます。 window.ExperimentalBadge.set() を呼び出すと、フラグとしてバッジがつきます。 window.ExperimentalBadge.set(1) のように引数に数値を入れて呼び出すと、バッジは数字が入った状態で表示されます。 window.ExperimentalBadge.clear() でバッジがクリアされ、元のアプリアイコンだけの状態に戻ります。 非常に簡単ではありますが、このようにしてウェブアプリのアイコンにバッジをつけられることが確認できました。 なお、このサンプルプロジェクトは https://github.com/makotot/badging-api-playground にあげてあります。 まとめ 近い将来正式リリースされる可能性が高い API を試すことで、今後ウェブアプリでどのようなことが実現可能になっていくかの一端を垣間見ることができました。 API 自体が Origin Trial の段階で、ブラウザのタブの favicon 上やブックマークアイコン上に表示したいケースであったり、バッジはどこまでの範囲で適用するべきかのスコープの問題であったり、最終的にどのような形に仕様が整理されるかまだ明確ではない部分もあります。 最終的にどのように課題が解決されていくか注目したいと思います。

みなさん、こんにちは。開発本部のエンジニアの舘野です。先日、社内勉強会「TechLunch」で Badging API について発表したので、その内容を紹介させていただきます。 Badging API とは Badging API とは、ネイティブアプリのアプリアイコン上に表示されるバッジと同様に、ウェブアプリのアイコン上にバッジを表示することができる Web API です。 ネイティブアプリで可能なこと全てをウェブアプリでも可能にすることを目指す、 Fugu というプロジェクトで実現に向けて動いている API の 1 つで、Chrome 73 から Origin Trials として利用可能になっています。Origin Trials とは、試験的に特定の開発者に限定して API を利用できるようにする仕組みのことで、正式リリース前に API に対する有用なフィードバックを受け取ることができるものです。 この API の最新の概要や仕様については、 WICG が Github に Badging API のリポジトリ を用意しているので、そこで確認することができます。 WICG（The Web Incubator Community Group）は、先進的なウェブ技術について検討するコミュニティグループで、W3C のグループの 1 つです。 提案されている API のインターフェースは、現時点(2019/08/14)では以下のようになっています。 badging/explainer.md at main · w3c/badging Badging API. Contribute to w3c/badging development by creating an account on GitHub. github.com Badge を window オブジェクトのメンバとして持つ Badge には 2 つのメソッドが存在する Badge.set() Badge.clear() Badge.set(5) のように set() に整数を渡してバッジ上に数字を表示する 単に Badge.set() で呼び出すとフラグとしてバッジを表示する Badge.set(5, { scope: ‘/baz’ }) のようにオプションを渡して特定のスコープ配下で表示されるように指定できる オプションでスコープが指定されてない場合、スコープは / になる ローカル環境で試す 実際にどのような形でバッジを表示できるかを確認するために、今回はローカル環境（macOS 10.14、Chrome76）で試してみました。 API 自体は非常にシンプルなので、PWA のアプリを用意してインストールするだけで簡単に試すことができます。 インストールされていないウェブアプリでも、タブの favicon 上やブックマークアイコン上にバッジを表示することも議論されているようですが、今のところインストール済みのウェブアプリでしかバッジは表示されません。 最初に API を利用可能な状態にする必要がありますが、上述の通り API 自体が現在 Origin Trials の段階なので、Origin Trials の利用申請を行うかローカル環境であれば chrome://flags で実験的な機能を有効にする（#enable-experimental-web-platform-features）かのいずれかを行う必要があります。 今回はローカル環境で試すだけなので、chrome://flags から enable-experimental-web-platform-features を有効にしておきます。 実験的な機能を利用可能にしたことで Badging API 自体は利用可能になりますが、 window.Badge として利用可能になっているのではなく、Origin Trials の段階では Badge ではなく ExperimentalBadge として提供されています。 次に、サンプルのプロジェクトを用意して webpack-dev-server でローカルサーバを用意します。 $ yarn init $ yarn add --dev webpack webpack-cli webpack-dev-server html-webpack-plugin copy-webpack-plugin webpack-dev-server でローカルサーバが見れる状態になるように webpack.config.js に設定を記述します。 const path = require ( "path" ); const HtmlWwebpackPlugin = require ( "html-webpack-plugin" ); module . exports = { mode: "development" , devServer: { https: true , }, entry: { app: [ "./src/js/app.js" ], }, output: { path: path . resolve ( __dirname , "./dist" ), }, plugins: [ new HtmlWwebpackPlugin ({ template: "src/index.html" , }), ], }; 次に manifest.json を用意します。manifest.json は、そのアプリがどういったものか、また、インストールした時にどのように振る舞うかをブラウザに伝えるための設定ファイルになります。 https://app-manifest.firebaseapp.com/ のようなサービスで manifest.json とアイコンを各種サイズ自動生成できるので、今回はこのサービスで生成します。 {   "name" : "badging-api-playground" ,   "short_name" : "badge" ,   "theme_color" : "#5B5CFD" ,   "background_color" : "#5B5CFD" ,   "display" : "standalone" ,   "orientation" : "portrait" ,   "prefer_related_applications" : false ,   "Scope" : "/" ,   "start_url" : "/" ,   "icons" : [     {       "src" : "images/icons/icon-72x72.png" ,       "sizes" : "72x72" ,       "type" : "image/png"     },     {       "src" : "images/icons/icon-96x96.png" ,       "sizes" : "96x96" ,       "type" : "image/png"     },     {       "src" : "images/icons/icon-128x128.png" ,       "sizes" : "128x128" ,       "type" : "image/png"     },     {       "src" : "images/icons/icon-144x144.png" ,       "sizes" : "144x144" ,       "type" : "image/png"     },     ….   ],   "splash_pages" : null } webpack.config.js の方に manifest.json をローカルサーバで配信されるように設定を追加しておきます。 const path = require('path') const HtmlWwebpackPlugin = require('html-webpack-plugin') + const CopyPlugin = require('copy-webpack-plugin') module.exports = {   ….   plugins: [     …. +     new CopyPlugin([ +       { +         from: 'src/manifest.json', +         to: '', +       }, +       { +         from: 'src/images/icons', +         to: 'images/icons/' +       }, +     ]),   ], } ここまでで Chrome の Application タブから manifest.json が認識されいてることが確認できますが、インストール可能な状態にはなっていません。 アプリをインストール可能な状態にするには いくつかの基準 があり、service worker が必要になります。今回は Workbox の webpack プラグインで対応します。 yarn add --dev workbox-webpack-plugin workbox には GenerateSW と injectManifest の 2 つのモードがあり、今回はどちらでも問題ないかと思いますが injectManifest モードを利用します。 const path = require('path') const HtmlWwebpackPlugin = require('html-webpack-plugin') const CopyPlugin = require('copy-webpack-plugin') + const { InjectManifest } = require('workbox-webpack-plugin') module.exports = {   ….   plugins: [     …. +     new InjectManifest({ +       swSrc: path.resolve(__dirname, 'src/sw.js'), +     }),   ], } app.js の方で service worker の登録がされるように記述しておきます。 if ( "serviceWorker" in navigator ) { window . addEventListener ( "load" , () => { navigator . serviceWorker . register ( "./sw.js" ) . then (( res ) => { console . log ( res ); }) . catch (( err ) => { console . error ( err ); }); }); } service worker の対応が済むとインストール可能なアプリの基準を満たすので、Chrome76 ではアドレスバーにオムニボックスが表示され、そこからインストールが可能になっています。 インストールすると Launchpad にアプリアイコンが表示されたので、実際に Badge API を試してみます。 window.ExperimentalBadge.set() を呼び出すと、フラグとしてバッジがつきます。 window.ExperimentalBadge.set(1) のように引数に数値を入れて呼び出すと、バッジは数字が入った状態で表示されます。 window.ExperimentalBadge.clear() でバッジがクリアされ、元のアプリアイコンだけの状態に戻ります。 非常に簡単ではありますが、このようにしてウェブアプリのアイコンにバッジをつけられることが確認できました。 なお、このサンプルプロジェクトは https://github.com/makotot/badging-api-playground にあげてあります。 まとめ 近い将来正式リリースされる可能性が高い API を試すことで、今後ウェブアプリでどのようなことが実現可能になっていくかの一端を垣間見ることができました。 API 自体が Origin Trial の段階で、ブラウザのタブの favicon 上やブックマークアイコン上に表示したいケースであったり、バッジはどこまでの範囲で適用するべきかのスコープの問題であったり、最終的にどのような形に仕様が整理されるかまだ明確ではない部分もあります。 最終的にどのように課題が解決されていくか注目したいと思います。

みなさん、こんにちは。開発本部のエンジニアの舘野です。先日、社内勉強会「TechLunch」で Badging API について発表したので、その内容を紹介させていただきます。 Badging API とは Badging API とは、ネイティブアプリのアプリアイコン上に表示されるバッジと同様に、ウェブアプリのアイコン上にバッジを表示することができる Web API です。 ネイティブアプリで可能なこと全てをウェブアプリでも可能にすることを目指す、 Fugu というプロジェクトで実現に向けて動いている API の 1 つで、Chrome 73 から Origin Trials として利用可能になっています。Origin Trials とは、試験的に特定の開発者に限定して API を利用できるようにする仕組みのことで、正式リリース前に API に対する有用なフィードバックを受け取ることができるものです。 この API の最新の概要や仕様については、 WICG が Github に Badging API のリポジトリ を用意しているので、そこで確認することができます。 WICG（The Web Incubator Community Group）は、先進的なウェブ技術について検討するコミュニティグループで、W3C のグループの 1 つです。 提案されている API のインターフェースは、現時点(2019/08/14)では以下のようになっています。 badging/explainer.md at main · w3c/badging Badging API. Contribute to w3c/badging development by creating an account on GitHub. github.com Badge を window オブジェクトのメンバとして持つ Badge には 2 つのメソッドが存在する Badge.set() Badge.clear() Badge.set(5) のように set() に整数を渡してバッジ上に数字を表示する 単に Badge.set() で呼び出すとフラグとしてバッジを表示する Badge.set(5, { scope: ‘/baz’ }) のようにオプションを渡して特定のスコープ配下で表示されるように指定できる オプションでスコープが指定されてない場合、スコープは / になる ローカル環境で試す 実際にどのような形でバッジを表示できるかを確認するために、今回はローカル環境（macOS 10.14、Chrome76）で試してみました。 API 自体は非常にシンプルなので、PWA のアプリを用意してインストールするだけで簡単に試すことができます。 インストールされていないウェブアプリでも、タブの favicon 上やブックマークアイコン上にバッジを表示することも議論されているようですが、今のところインストール済みのウェブアプリでしかバッジは表示されません。 最初に API を利用可能な状態にする必要がありますが、上述の通り API 自体が現在 Origin Trials の段階なので、Origin Trials の利用申請を行うかローカル環境であれば chrome://flags で実験的な機能を有効にする（#enable-experimental-web-platform-features）かのいずれかを行う必要があります。 今回はローカル環境で試すだけなので、chrome://flags から enable-experimental-web-platform-features を有効にしておきます。 実験的な機能を利用可能にしたことで Badging API 自体は利用可能になりますが、 window.Badge として利用可能になっているのではなく、Origin Trials の段階では Badge ではなく ExperimentalBadge として提供されています。 次に、サンプルのプロジェクトを用意して webpack-dev-server でローカルサーバを用意します。 $ yarn init $ yarn add --dev webpack webpack-cli webpack-dev-server html-webpack-plugin copy-webpack-plugin webpack-dev-server でローカルサーバが見れる状態になるように webpack.config.js に設定を記述します。 const path = require ( "path" ); const HtmlWwebpackPlugin = require ( "html-webpack-plugin" ); module . exports = { mode: "development" , devServer: { https: true , }, entry: { app: [ "./src/js/app.js" ], }, output: { path: path . resolve ( __dirname , "./dist" ), }, plugins: [ new HtmlWwebpackPlugin ({ template: "src/index.html" , }), ], }; 次に manifest.json を用意します。manifest.json は、そのアプリがどういったものか、また、インストールした時にどのように振る舞うかをブラウザに伝えるための設定ファイルになります。 https://app-manifest.firebaseapp.com/ のようなサービスで manifest.json とアイコンを各種サイズ自動生成できるので、今回はこのサービスで生成します。 {   "name" : "badging-api-playground" ,   "short_name" : "badge" ,   "theme_color" : "#5B5CFD" ,   "background_color" : "#5B5CFD" ,   "display" : "standalone" ,   "orientation" : "portrait" ,   "prefer_related_applications" : false ,   "Scope" : "/" ,   "start_url" : "/" ,   "icons" : [     {       "src" : "images/icons/icon-72x72.png" ,       "sizes" : "72x72" ,       "type" : "image/png"     },     {       "src" : "images/icons/icon-96x96.png" ,       "sizes" : "96x96" ,       "type" : "image/png"     },     {       "src" : "images/icons/icon-128x128.png" ,       "sizes" : "128x128" ,       "type" : "image/png"     },     {       "src" : "images/icons/icon-144x144.png" ,       "sizes" : "144x144" ,       "type" : "image/png"     },     ….   ],   "splash_pages" : null } webpack.config.js の方に manifest.json をローカルサーバで配信されるように設定を追加しておきます。 const path = require('path') const HtmlWwebpackPlugin = require('html-webpack-plugin') + const CopyPlugin = require('copy-webpack-plugin') module.exports = {   ….   plugins: [     …. +     new CopyPlugin([ +       { +         from: 'src/manifest.json', +         to: '', +       }, +       { +         from: 'src/images/icons', +         to: 'images/icons/' +       }, +     ]),   ], } ここまでで Chrome の Application タブから manifest.json が認識されいてることが確認できますが、インストール可能な状態にはなっていません。 アプリをインストール可能な状態にするには いくつかの基準 があり、service worker が必要になります。今回は Workbox の webpack プラグインで対応します。 yarn add --dev workbox-webpack-plugin workbox には GenerateSW と injectManifest の 2 つのモードがあり、今回はどちらでも問題ないかと思いますが injectManifest モードを利用します。 const path = require('path') const HtmlWwebpackPlugin = require('html-webpack-plugin') const CopyPlugin = require('copy-webpack-plugin') + const { InjectManifest } = require('workbox-webpack-plugin') module.exports = {   ….   plugins: [     …. +     new InjectManifest({ +       swSrc: path.resolve(__dirname, 'src/sw.js'), +     }),   ], } app.js の方で service worker の登録がされるように記述しておきます。 if ( "serviceWorker" in navigator ) { window . addEventListener ( "load" , () => { navigator . serviceWorker . register ( "./sw.js" ) . then (( res ) => { console . log ( res ); }) . catch (( err ) => { console . error ( err ); }); }); } service worker の対応が済むとインストール可能なアプリの基準を満たすので、Chrome76 ではアドレスバーにオムニボックスが表示され、そこからインストールが可能になっています。 インストールすると Launchpad にアプリアイコンが表示されたので、実際に Badge API を試してみます。 window.ExperimentalBadge.set() を呼び出すと、フラグとしてバッジがつきます。 window.ExperimentalBadge.set(1) のように引数に数値を入れて呼び出すと、バッジは数字が入った状態で表示されます。 window.ExperimentalBadge.clear() でバッジがクリアされ、元のアプリアイコンだけの状態に戻ります。 非常に簡単ではありますが、このようにしてウェブアプリのアイコンにバッジをつけられることが確認できました。 なお、このサンプルプロジェクトは https://github.com/makotot/badging-api-playground にあげてあります。 まとめ 近い将来正式リリースされる可能性が高い API を試すことで、今後ウェブアプリでどのようなことが実現可能になっていくかの一端を垣間見ることができました。 API 自体が Origin Trial の段階で、ブラウザのタブの favicon 上やブックマークアイコン上に表示したいケースであったり、バッジはどこまでの範囲で適用するべきかのスコープの問題であったり、最終的にどのような形に仕様が整理されるかまだ明確ではない部分もあります。 最終的にどのように課題が解決されていくか注目したいと思います。

みなさん、こんにちは。開発本部のエンジニアの舘野です。先日、社内勉強会「TechLunch」で Badging API について発表したので、その内容を紹介させていただきます。 Badging API とは Badging API とは、ネイティブアプリのアプリアイコン上に表示されるバッジと同様に、ウェブアプリのアイコン上にバッジを表示することができる Web API です。 ネイティブアプリで可能なこと全てをウェブアプリでも可能にすることを目指す、 Fugu というプロジェクトで実現に向けて動いている API の 1 つで、Chrome 73 から Origin Trials として利用可能になっています。Origin Trials とは、試験的に特定の開発者に限定して API を利用できるようにする仕組みのことで、正式リリース前に API に対する有用なフィードバックを受け取ることができるものです。 この API の最新の概要や仕様については、 WICG が Github に Badging API のリポジトリ を用意しているので、そこで確認することができます。 WICG（The Web Incubator Community Group）は、先進的なウェブ技術について検討するコミュニティグループで、W3C のグループの 1 つです。 提案されている API のインターフェースは、現時点(2019/08/14)では以下のようになっています。 badging/explainer.md at main · w3c/badging Badging API. Contribute to w3c/badging development by creating an account on GitHub. github.com Badge を window オブジェクトのメンバとして持つ Badge には 2 つのメソッドが存在する Badge.set() Badge.clear() Badge.set(5) のように set() に整数を渡してバッジ上に数字を表示する 単に Badge.set() で呼び出すとフラグとしてバッジを表示する Badge.set(5, { scope: ‘/baz’ }) のようにオプションを渡して特定のスコープ配下で表示されるように指定できる オプションでスコープが指定されてない場合、スコープは / になる ローカル環境で試す 実際にどのような形でバッジを表示できるかを確認するために、今回はローカル環境（macOS 10.14、Chrome76）で試してみました。 API 自体は非常にシンプルなので、PWA のアプリを用意してインストールするだけで簡単に試すことができます。 インストールされていないウェブアプリでも、タブの favicon 上やブックマークアイコン上にバッジを表示することも議論されているようですが、今のところインストール済みのウェブアプリでしかバッジは表示されません。 最初に API を利用可能な状態にする必要がありますが、上述の通り API 自体が現在 Origin Trials の段階なので、Origin Trials の利用申請を行うかローカル環境であれば chrome://flags で実験的な機能を有効にする（#enable-experimental-web-platform-features）かのいずれかを行う必要があります。 今回はローカル環境で試すだけなので、chrome://flags から enable-experimental-web-platform-features を有効にしておきます。 実験的な機能を利用可能にしたことで Badging API 自体は利用可能になりますが、 window.Badge として利用可能になっているのではなく、Origin Trials の段階では Badge ではなく ExperimentalBadge として提供されています。 次に、サンプルのプロジェクトを用意して webpack-dev-server でローカルサーバを用意します。 $ yarn init $ yarn add --dev webpack webpack-cli webpack-dev-server html-webpack-plugin copy-webpack-plugin webpack-dev-server でローカルサーバが見れる状態になるように webpack.config.js に設定を記述します。 const path = require ( "path" ); const HtmlWwebpackPlugin = require ( "html-webpack-plugin" ); module . exports = { mode: "development" , devServer: { https: true , }, entry: { app: [ "./src/js/app.js" ], }, output: { path: path . resolve ( __dirname , "./dist" ), }, plugins: [ new HtmlWwebpackPlugin ({ template: "src/index.html" , }), ], }; 次に manifest.json を用意します。manifest.json は、そのアプリがどういったものか、また、インストールした時にどのように振る舞うかをブラウザに伝えるための設定ファイルになります。 https://app-manifest.firebaseapp.com/ のようなサービスで manifest.json とアイコンを各種サイズ自動生成できるので、今回はこのサービスで生成します。 {   "name" : "badging-api-playground" ,   "short_name" : "badge" ,   "theme_color" : "#5B5CFD" ,   "background_color" : "#5B5CFD" ,   "display" : "standalone" ,   "orientation" : "portrait" ,   "prefer_related_applications" : false ,   "Scope" : "/" ,   "start_url" : "/" ,   "icons" : [     {       "src" : "images/icons/icon-72x72.png" ,       "sizes" : "72x72" ,       "type" : "image/png"     },     {       "src" : "images/icons/icon-96x96.png" ,       "sizes" : "96x96" ,       "type" : "image/png"     },     {       "src" : "images/icons/icon-128x128.png" ,       "sizes" : "128x128" ,       "type" : "image/png"     },     {       "src" : "images/icons/icon-144x144.png" ,       "sizes" : "144x144" ,       "type" : "image/png"     },     ….   ],   "splash_pages" : null } webpack.config.js の方に manifest.json をローカルサーバで配信されるように設定を追加しておきます。 const path = require('path') const HtmlWwebpackPlugin = require('html-webpack-plugin') + const CopyPlugin = require('copy-webpack-plugin') module.exports = {   ….   plugins: [     …. +     new CopyPlugin([ +       { +         from: 'src/manifest.json', +         to: '', +       }, +       { +         from: 'src/images/icons', +         to: 'images/icons/' +       }, +     ]),   ], } ここまでで Chrome の Application タブから manifest.json が認識されいてることが確認できますが、インストール可能な状態にはなっていません。 アプリをインストール可能な状態にするには いくつかの基準 があり、service worker が必要になります。今回は Workbox の webpack プラグインで対応します。 yarn add --dev workbox-webpack-plugin workbox には GenerateSW と injectManifest の 2 つのモードがあり、今回はどちらでも問題ないかと思いますが injectManifest モードを利用します。 const path = require('path') const HtmlWwebpackPlugin = require('html-webpack-plugin') const CopyPlugin = require('copy-webpack-plugin') + const { InjectManifest } = require('workbox-webpack-plugin') module.exports = {   ….   plugins: [     …. +     new InjectManifest({ +       swSrc: path.resolve(__dirname, 'src/sw.js'), +     }),   ], } app.js の方で service worker の登録がされるように記述しておきます。 if ( "serviceWorker" in navigator ) { window . addEventListener ( "load" , () => { navigator . serviceWorker . register ( "./sw.js" ) . then (( res ) => { console . log ( res ); }) . catch (( err ) => { console . error ( err ); }); }); } service worker の対応が済むとインストール可能なアプリの基準を満たすので、Chrome76 ではアドレスバーにオムニボックスが表示され、そこからインストールが可能になっています。 インストールすると Launchpad にアプリアイコンが表示されたので、実際に Badge API を試してみます。 window.ExperimentalBadge.set() を呼び出すと、フラグとしてバッジがつきます。 window.ExperimentalBadge.set(1) のように引数に数値を入れて呼び出すと、バッジは数字が入った状態で表示されます。 window.ExperimentalBadge.clear() でバッジがクリアされ、元のアプリアイコンだけの状態に戻ります。 非常に簡単ではありますが、このようにしてウェブアプリのアイコンにバッジをつけられることが確認できました。 なお、このサンプルプロジェクトは https://github.com/makotot/badging-api-playground にあげてあります。 まとめ 近い将来正式リリースされる可能性が高い API を試すことで、今後ウェブアプリでどのようなことが実現可能になっていくかの一端を垣間見ることができました。 API 自体が Origin Trial の段階で、ブラウザのタブの favicon 上やブックマークアイコン上に表示したいケースであったり、バッジはどこまでの範囲で適用するべきかのスコープの問題であったり、最終的にどのような形に仕様が整理されるかまだ明確ではない部分もあります。 最終的にどのように課題が解決されていくか注目したいと思います。

みなさん、こんにちは。開発本部のエンジニアの舘野です。先日、社内勉強会「TechLunch」で Badging API について発表したので、その内容を紹介させていただきます。 Badging API とは Badging API とは、ネイティブアプリのアプリアイコン上に表示されるバッジと同様に、ウェブアプリのアイコン上にバッジを表示することができる Web API です。 ネイティブアプリで可能なこと全てをウェブアプリでも可能にすることを目指す、 Fugu というプロジェクトで実現に向けて動いている API の 1 つで、Chrome 73 から Origin Trials として利用可能になっています。Origin Trials とは、試験的に特定の開発者に限定して API を利用できるようにする仕組みのことで、正式リリース前に API に対する有用なフィードバックを受け取ることができるものです。 この API の最新の概要や仕様については、 WICG が Github に Badging API のリポジトリ を用意しているので、そこで確認することができます。 WICG（The Web Incubator Community Group）は、先進的なウェブ技術について検討するコミュニティグループで、W3C のグループの 1 つです。 提案されている API のインターフェースは、現時点(2019/08/14)では以下のようになっています。 badging/explainer.md at main · w3c/badging Badging API. Contribute to w3c/badging development by creating an account on GitHub. github.com Badge を window オブジェクトのメンバとして持つ Badge には 2 つのメソッドが存在する Badge.set() Badge.clear() Badge.set(5) のように set() に整数を渡してバッジ上に数字を表示する 単に Badge.set() で呼び出すとフラグとしてバッジを表示する Badge.set(5, { scope: ‘/baz’ }) のようにオプションを渡して特定のスコープ配下で表示されるように指定できる オプションでスコープが指定されてない場合、スコープは / になる ローカル環境で試す 実際にどのような形でバッジを表示できるかを確認するために、今回はローカル環境（macOS 10.14、Chrome76）で試してみました。 API 自体は非常にシンプルなので、PWA のアプリを用意してインストールするだけで簡単に試すことができます。 インストールされていないウェブアプリでも、タブの favicon 上やブックマークアイコン上にバッジを表示することも議論されているようですが、今のところインストール済みのウェブアプリでしかバッジは表示されません。 最初に API を利用可能な状態にする必要がありますが、上述の通り API 自体が現在 Origin Trials の段階なので、Origin Trials の利用申請を行うかローカル環境であれば chrome://flags で実験的な機能を有効にする（#enable-experimental-web-platform-features）かのいずれかを行う必要があります。 今回はローカル環境で試すだけなので、chrome://flags から enable-experimental-web-platform-features を有効にしておきます。 実験的な機能を利用可能にしたことで Badging API 自体は利用可能になりますが、 window.Badge として利用可能になっているのではなく、Origin Trials の段階では Badge ではなく ExperimentalBadge として提供されています。 次に、サンプルのプロジェクトを用意して webpack-dev-server でローカルサーバを用意します。 $ yarn init $ yarn add --dev webpack webpack-cli webpack-dev-server html-webpack-plugin copy-webpack-plugin webpack-dev-server でローカルサーバが見れる状態になるように webpack.config.js に設定を記述します。 const path = require ( "path" ); const HtmlWwebpackPlugin = require ( "html-webpack-plugin" ); module . exports = { mode: "development" , devServer: { https: true , }, entry: { app: [ "./src/js/app.js" ], }, output: { path: path . resolve ( __dirname , "./dist" ), }, plugins: [ new HtmlWwebpackPlugin ({ template: "src/index.html" , }), ], }; 次に manifest.json を用意します。manifest.json は、そのアプリがどういったものか、また、インストールした時にどのように振る舞うかをブラウザに伝えるための設定ファイルになります。 https://app-manifest.firebaseapp.com/ のようなサービスで manifest.json とアイコンを各種サイズ自動生成できるので、今回はこのサービスで生成します。 {   "name" : "badging-api-playground" ,   "short_name" : "badge" ,   "theme_color" : "#5B5CFD" ,   "background_color" : "#5B5CFD" ,   "display" : "standalone" ,   "orientation" : "portrait" ,   "prefer_related_applications" : false ,   "Scope" : "/" ,   "start_url" : "/" ,   "icons" : [     {       "src" : "images/icons/icon-72x72.png" ,       "sizes" : "72x72" ,       "type" : "image/png"     },     {       "src" : "images/icons/icon-96x96.png" ,       "sizes" : "96x96" ,       "type" : "image/png"     },     {       "src" : "images/icons/icon-128x128.png" ,       "sizes" : "128x128" ,       "type" : "image/png"     },     {       "src" : "images/icons/icon-144x144.png" ,       "sizes" : "144x144" ,       "type" : "image/png"     },     ….   ],   "splash_pages" : null } webpack.config.js の方に manifest.json をローカルサーバで配信されるように設定を追加しておきます。 const path = require('path') const HtmlWwebpackPlugin = require('html-webpack-plugin') + const CopyPlugin = require('copy-webpack-plugin') module.exports = {   ….   plugins: [     …. +     new CopyPlugin([ +       { +         from: 'src/manifest.json', +         to: '', +       }, +       { +         from: 'src/images/icons', +         to: 'images/icons/' +       }, +     ]),   ], } ここまでで Chrome の Application タブから manifest.json が認識されいてることが確認できますが、インストール可能な状態にはなっていません。 アプリをインストール可能な状態にするには いくつかの基準 があり、service worker が必要になります。今回は Workbox の webpack プラグインで対応します。 yarn add --dev workbox-webpack-plugin workbox には GenerateSW と injectManifest の 2 つのモードがあり、今回はどちらでも問題ないかと思いますが injectManifest モードを利用します。 const path = require('path') const HtmlWwebpackPlugin = require('html-webpack-plugin') const CopyPlugin = require('copy-webpack-plugin') + const { InjectManifest } = require('workbox-webpack-plugin') module.exports = {   ….   plugins: [     …. +     new InjectManifest({ +       swSrc: path.resolve(__dirname, 'src/sw.js'), +     }),   ], } app.js の方で service worker の登録がされるように記述しておきます。 if ( "serviceWorker" in navigator ) { window . addEventListener ( "load" , () => { navigator . serviceWorker . register ( "./sw.js" ) . then (( res ) => { console . log ( res ); }) . catch (( err ) => { console . error ( err ); }); }); } service worker の対応が済むとインストール可能なアプリの基準を満たすので、Chrome76 ではアドレスバーにオムニボックスが表示され、そこからインストールが可能になっています。 インストールすると Launchpad にアプリアイコンが表示されたので、実際に Badge API を試してみます。 window.ExperimentalBadge.set() を呼び出すと、フラグとしてバッジがつきます。 window.ExperimentalBadge.set(1) のように引数に数値を入れて呼び出すと、バッジは数字が入った状態で表示されます。 window.ExperimentalBadge.clear() でバッジがクリアされ、元のアプリアイコンだけの状態に戻ります。 非常に簡単ではありますが、このようにしてウェブアプリのアイコンにバッジをつけられることが確認できました。 なお、このサンプルプロジェクトは https://github.com/makotot/badging-api-playground にあげてあります。 まとめ 近い将来正式リリースされる可能性が高い API を試すことで、今後ウェブアプリでどのようなことが実現可能になっていくかの一端を垣間見ることができました。 API 自体が Origin Trial の段階で、ブラウザのタブの favicon 上やブックマークアイコン上に表示したいケースであったり、バッジはどこまでの範囲で適用するべきかのスコープの問題であったり、最終的にどのような形に仕様が整理されるかまだ明確ではない部分もあります。 最終的にどのように課題が解決されていくか注目したいと思います。

はじめに こんにちは、コーポレートエンジニアの若林です。 普段はいわゆる社内 SE 的な領域を担当していますが、その名の通り エンジニアの視点も持ったコーポレート機能 という立ち位置で、社員の働く基盤や事業の発展を支えています。 過去のコーポレートエンジニアの取り組みや、マインドについては以下が参考になるかと思います。 コーポレート IT 担当として会社の成長を支える兼松さんに「聞いてみた」 全社で本気になってリーンに ISMS の仕組みをつくった話 今回もその取り組みの一環で、先日開催された Google Cloud Next ‘19 in Tokyo に、カスタマースピーカーという形で弊社執行役員の兼松と共に登壇させて頂きました。 今回は、登壇させて頂いたセッション Google Apps Script / AppMaker 最新アップデートと活用のヒント について、セッションでお伝えした内容を含めたレポートを書きたいと思います。 Google Cloud Next ‘19 in Tokyo について Google Cloud Next は、年一度 Google 主催で催される Google テクノロジーに関するカンファレンスです（今年は、サンフランシスコ、東京、ロンドンの世界 3 会場開催） 日程；7/30(火) - 8/1(木) 会場：東京プリンスホテルおよびザ・プリンス パークタワー東京 イベントサイト： Google Cloud Next ‘19 in Tokyo メドレー社内でも、G Suite を中心に Google Cloud の活用事例が増えてきていることもあり、社内の新しいアプリケーションプラットフォームとして採用している App Maker の話でスピーカー応募してみようということになりました。 なお、登壇させて頂いたセッションですが、一般申込受付が始まってすぐに満席になってしまい、私が SNS でアナウンスしても既に満席で申し込めないような状態になっておりました・・・ 会場の雰囲気 東京タワーとの一枚 登壇の様子（背景と同色なのは偶然です） セッション内容について Google Apps Script / AppMaker 最新アップデートと活用のヒント 今回は、Google の深堀さん、嘉穂無線の太田さんとの合同セッションという形で登壇させて頂きました。 まず Google の深掘さんが、「G Suite を拡張開発するテクノロジーの全体概要と活用事例」というテーマで、Google Apps Script / App Maker を含む G Suite 周辺の開発プラットフォームについて、位置付けの整理とグローバルでの活用事例、今後のアップデートについてお話されました。次に、嘉穂無線の太田さんが、「Google Apps Script の活用事例」というテーマで、Google Apps Script を活用して開発した社内システムについて、デモを交えて紹介されました。 それを受けて、メドレーでは「Google App Maker 活用事例と開発 Tips」というテーマで、Google App Maker を活用して開発した社内システムを、デモを交えて紹介させて頂きました。 App Maker は GA されてからまだ一年強ということもあって、Apps Script と比較してもオンラインに蓄積されているナレッジが非常に少なく（あってもほぼ英語）、現時点において日本で活用できている企業は本当に限られていると思っています。 しかし実際に触っていく中でも非常に可能性を秘めたプラットフォームだと感じているので、日本でも活用する会社が増えてくれれば嬉しいという思いを込めて、今回プレゼンさせて頂きました。 ここからは、実際にメドレーのパートでお話した内容を、振り返りも兼ねて書かせて頂ければと思います。 Google App Maker とは 一言で言うと… G Suite Business / Enterprise プランに含まれるローコードアプリケーション開発ツール です！ 主に以下のような特徴があります。 バックエンドのデータストアとして、RDB（Cloud SQL）が利用される 開発言語は JavaScript をベースとしたスクリプト言語である Google Apps Script である G Suite のサービス（ユーザーディレクトリ、メール、ドライブ等）と容易に連携が可能である UI のカスタマイズの容易さと高い自由度がある メドレーでの社内活用事例 メドレーでは、Google App Maker を活用して複数のアプリケーションを実装しています。 今回は、そのうちの一つである社内稟議システムについての概要を紹介させて頂きました。（当日はデモも実施しているので、デモの内容を見たい方は セッション動画 をご覧下さい） App Maker を使ったアプリケーション開発の流れと開発 Tips App Maker はアプリケーション開発プラットフォームなので、開発の流れを以下の 3step に分割した上で、Tips を紹介させて頂きます。 データモデルの定義 UI 作成 ビジネスロジック記述 1. データモデルの定義 はじめに、GUI ベースで RDB のメタデータを定義していきます。 モデル（テーブル）の主な設定項目 FIELDS：モデルのフィールド情報を定義 DATASOURCES：データベースでいうところのビューに近い概念の設定 RELATIONS：モデル間のリレーションを定義 EVENTS：クライアントのデータベース操作に対するイベントスクリプトを定義 SECURITY：モデルに対する権限を制御 データモデルの定義における開発 Tips EVENTS の挙動 ：MODEL の設定項目なので一見データベーストリガーと思いがちですが、 このイベントは、サーバーサイドスクリプトや外部からのデータベースレコード操作では、トリガーされません。 （クライアントサイドからの操作限定）サーバーサイドスクリプトや外部からの操作には、別途関数呼び出しを組み込む等の配慮が必要になります。 データベースへの更新反映タイミング ：既定の設定ではクライアントでデータソースの情報が変更された場合に、サーバーに即時反映される動き(Auto Save Mode)になります。この動きを止めたければ Manual Save Mode に切り替えることも可能ですが、コード記述量が大きく増えることになります。Auto Save Mode のままでも UI/UX の工夫で回避できたりするので、まずそこを検討するのが重要かなと思います。 細かな権限制御 ：GUI からできる権限制御設定は限られています。アプリケーション内での動的な権限制御や、フィールドの値に基づく細かな権限制御が必要な場合は、 Query Builder や Query Script による読み込み制御が必要になりますが開発コストが結構増加するので、他の回避策がないか事前に検討することをお勧めします。 2. UI 作成 次に、ウィジェット（画面を構成する部品）をドラッグ&ドロップで配置して画面を作成していきます。 一般的に必要となるボタンやドロップダウンに加えて、G Suite ならではの User Picker や Drive Picker 、更には リッチなポップアップ、ダイアログ等 も利用可能です。 スタイルに関しては、 バリアント を利用することで、統一感のあるスタイル適用が容易に可能になっています UI 作成における開発 Tips 組み込みのマテリアルデザインアイコン ：ラベルやボタンの text を特定の文字列にすると、元々組み込まれているマテリアルデザインアイコンを利用することが可能です。（ 文字列とアイコンの対応表 ）一般的に利用されているようなアイコンはほとんど用意されているので、ガンガン活用していきましょう。 3. ビジネスロジック記述 最後に、2 種類のスクリプト（Client Script, Server Script）を利用して、ビジネスロジックを記述していきます。（アイテム生成とか、読み込みとかは基本的に記述不要） Client Script から Server Script を呼び出したい場合は、 Google Apps Script 同様、以下のような形で実行が可能になっています。 google . script . run . ServerSideFunction (); ビジネスロジック記述における開発 Tips 外部公開できない ：Google Apps Script で言うところの、doGet/doPost 関数のような Web API は、App Maker のスクリプト内に作ることができないようになっています。外部システムとの連携が必要な場合、Cloud Function 等を介して、Cloud SQL を直接操作する必要があります。（トランザクション処理等は複雑化します） ローカルの開発環境と上手く連携できない ：Google Apps Script で利用可能な clasp は、現時点で App Maker には対応していません。バージョン管理、デプロイ管理機能は開発コンソールに実装されていますが、コードレベルでの差分レビュー等を実施したい場合は、現時点では少しめんどくさいです。 定期実行トリガーを GUI で設定できない ：Google Apps Script では GUI から設定が可能な、「時間ベース」のトリガーが GUI で簡単に設定できません。設定が必要な場合は、以下のようなスクリプトベースで設定する必要があります。 ScriptApp . newTrigger ( "functionName" ). timeBased (). at ( date ); App Maker をこれから始める人向けの情報 なお、今回紹介させて頂いた内容は App Maker を全く触ったことがない人には少し難しい内容だと思っています。 知識がゼロからの方は、以下のナレッジを元に是非一度チュートリアルなどで簡単に触ってから、改めて読んで頂けると理解が深まるかと思います。 アプリ作成の一連の流れを掴む How to Build Enterprise Workflows with App Maker (Cloud Next ‘18) Improve Processes by integrating App Maker, Data Studio and GCP (Cloud Next ‘19) 実際に触ってみる チュートリアル テンプレート 情報共有プラットフォームを活用する stack overflow [google-app-maker] タグ Google グループ[App Maker Users] まとめ 今回紹介させて頂いた Google App Maker は、G Suite をディープに利用している企業であれば、Google Apps Script に匹敵する強力な社内アプリケーションプラットフォームになると感じています。 App Maker のようなローコード/ノーコード開発プラットフォームは既に市場にいくつか出ており、Google App Maker はその中でも比較的コーディング・技術力が求められるプラットフォームだと思います。しかし、その分既存社内システムと親和性の高い高度な自動化が実現しやすいプラットフォームでもあると思うので、臆せずにチャレンジする価値は十分にあると思います。 なお、セッション中に紹介させて頂いた稟議アプリケーションは、App Maker に対する知識が 0 の状態から 1~2 ヶ月程で Slack との連携も含めて 1 人で実装できました。（RDB や GAS に対する知識は、ある程度習得済みの状態が前提にはなっています） GA 直後ということもあってインターネット上のナレッジが少ない中、探り探りに得られた活用のヒントを今回の場でお話しさせて頂きましたが、引き続き App Maker というプラットフォームを上手く利用していくには、ユーザーコミュニティの盛り上がりが欠かせないと思っていますので、引き続き情報発信等を通じて盛り上げていければと考えております。 最後になりますが、メドレーではこのような市場に出て間もないテクノロジーでもチャレンジしていける風土があります。こういったチャレンジを求めている方は、ぜひご応募下さい。 募集の一覧 | 株式会社メドレー メドレーの採用情報はこちらからご確認ください。 www.medley.jp メンバーのストーリー | 株式会社メドレー メンバーのストーリー 家族や友人が病気になった時に救いの手を差しのべる医療の力。... www.medley.jp

はじめに こんにちは、コーポレートエンジニアの若林です。 普段はいわゆる社内 SE 的な領域を担当していますが、その名の通り エンジニアの視点も持ったコーポレート機能 という立ち位置で、社員の働く基盤や事業の発展を支えています。 過去のコーポレートエンジニアの取り組みや、マインドについては以下が参考になるかと思います。 コーポレート IT 担当として会社の成長を支える兼松さんに「聞いてみた」 全社で本気になってリーンに ISMS の仕組みをつくった話 今回もその取り組みの一環で、先日開催された Google Cloud Next ‘19 in Tokyo に、カスタマースピーカーという形で弊社執行役員の兼松と共に登壇させて頂きました。 今回は、登壇させて頂いたセッション Google Apps Script / AppMaker 最新アップデートと活用のヒント について、セッションでお伝えした内容を含めたレポートを書きたいと思います。 Google Cloud Next ‘19 in Tokyo について Google Cloud Next は、年一度 Google 主催で催される Google テクノロジーに関するカンファレンスです（今年は、サンフランシスコ、東京、ロンドンの世界 3 会場開催） 日程；7/30(火) - 8/1(木) 会場：東京プリンスホテルおよびザ・プリンス パークタワー東京 イベントサイト： Google Cloud Next ‘19 in Tokyo メドレー社内でも、G Suite を中心に Google Cloud の活用事例が増えてきていることもあり、社内の新しいアプリケーションプラットフォームとして採用している App Maker の話でスピーカー応募してみようということになりました。 なお、登壇させて頂いたセッションですが、一般申込受付が始まってすぐに満席になってしまい、私が SNS でアナウンスしても既に満席で申し込めないような状態になっておりました・・・ 会場の雰囲気 東京タワーとの一枚 登壇の様子（背景と同色なのは偶然です） セッション内容について Google Apps Script / AppMaker 最新アップデートと活用のヒント 今回は、Google の深堀さん、嘉穂無線の太田さんとの合同セッションという形で登壇させて頂きました。 まず Google の深掘さんが、「G Suite を拡張開発するテクノロジーの全体概要と活用事例」というテーマで、Google Apps Script / App Maker を含む G Suite 周辺の開発プラットフォームについて、位置付けの整理とグローバルでの活用事例、今後のアップデートについてお話されました。次に、嘉穂無線の太田さんが、「Google Apps Script の活用事例」というテーマで、Google Apps Script を活用して開発した社内システムについて、デモを交えて紹介されました。 それを受けて、メドレーでは「Google App Maker 活用事例と開発 Tips」というテーマで、Google App Maker を活用して開発した社内システムを、デモを交えて紹介させて頂きました。 App Maker は GA されてからまだ一年強ということもあって、Apps Script と比較してもオンラインに蓄積されているナレッジが非常に少なく（あってもほぼ英語）、現時点において日本で活用できている企業は本当に限られていると思っています。 しかし実際に触っていく中でも非常に可能性を秘めたプラットフォームだと感じているので、日本でも活用する会社が増えてくれれば嬉しいという思いを込めて、今回プレゼンさせて頂きました。 ここからは、実際にメドレーのパートでお話した内容を、振り返りも兼ねて書かせて頂ければと思います。 Google App Maker とは 一言で言うと… G Suite Business / Enterprise プランに含まれるローコードアプリケーション開発ツール です！ 主に以下のような特徴があります。 バックエンドのデータストアとして、RDB（Cloud SQL）が利用される 開発言語は JavaScript をベースとしたスクリプト言語である Google Apps Script である G Suite のサービス（ユーザーディレクトリ、メール、ドライブ等）と容易に連携が可能である UI のカスタマイズの容易さと高い自由度がある メドレーでの社内活用事例 メドレーでは、Google App Maker を活用して複数のアプリケーションを実装しています。 今回は、そのうちの一つである社内稟議システムについての概要を紹介させて頂きました。（当日はデモも実施しているので、デモの内容を見たい方は セッション動画 をご覧下さい） App Maker を使ったアプリケーション開発の流れと開発 Tips App Maker はアプリケーション開発プラットフォームなので、開発の流れを以下の 3step に分割した上で、Tips を紹介させて頂きます。 データモデルの定義 UI 作成 ビジネスロジック記述 1. データモデルの定義 はじめに、GUI ベースで RDB のメタデータを定義していきます。 モデル（テーブル）の主な設定項目 FIELDS：モデルのフィールド情報を定義 DATASOURCES：データベースでいうところのビューに近い概念の設定 RELATIONS：モデル間のリレーションを定義 EVENTS：クライアントのデータベース操作に対するイベントスクリプトを定義 SECURITY：モデルに対する権限を制御 データモデルの定義における開発 Tips EVENTS の挙動 ：MODEL の設定項目なので一見データベーストリガーと思いがちですが、 このイベントは、サーバーサイドスクリプトや外部からのデータベースレコード操作では、トリガーされません。 （クライアントサイドからの操作限定）サーバーサイドスクリプトや外部からの操作には、別途関数呼び出しを組み込む等の配慮が必要になります。 データベースへの更新反映タイミング ：既定の設定ではクライアントでデータソースの情報が変更された場合に、サーバーに即時反映される動き(Auto Save Mode)になります。この動きを止めたければ Manual Save Mode に切り替えることも可能ですが、コード記述量が大きく増えることになります。Auto Save Mode のままでも UI/UX の工夫で回避できたりするので、まずそこを検討するのが重要かなと思います。 細かな権限制御 ：GUI からできる権限制御設定は限られています。アプリケーション内での動的な権限制御や、フィールドの値に基づく細かな権限制御が必要な場合は、 Query Builder や Query Script による読み込み制御が必要になりますが開発コストが結構増加するので、他の回避策がないか事前に検討することをお勧めします。 2. UI 作成 次に、ウィジェット（画面を構成する部品）をドラッグ&ドロップで配置して画面を作成していきます。 一般的に必要となるボタンやドロップダウンに加えて、G Suite ならではの User Picker や Drive Picker 、更には リッチなポップアップ、ダイアログ等 も利用可能です。 スタイルに関しては、 バリアント を利用することで、統一感のあるスタイル適用が容易に可能になっています UI 作成における開発 Tips 組み込みのマテリアルデザインアイコン ：ラベルやボタンの text を特定の文字列にすると、元々組み込まれているマテリアルデザインアイコンを利用することが可能です。（ 文字列とアイコンの対応表 ）一般的に利用されているようなアイコンはほとんど用意されているので、ガンガン活用していきましょう。 3. ビジネスロジック記述 最後に、2 種類のスクリプト（Client Script, Server Script）を利用して、ビジネスロジックを記述していきます。（アイテム生成とか、読み込みとかは基本的に記述不要） Client Script から Server Script を呼び出したい場合は、 Google Apps Script 同様、以下のような形で実行が可能になっています。 google . script . run . ServerSideFunction (); ビジネスロジック記述における開発 Tips 外部公開できない ：Google Apps Script で言うところの、doGet/doPost 関数のような Web API は、App Maker のスクリプト内に作ることができないようになっています。外部システムとの連携が必要な場合、Cloud Function 等を介して、Cloud SQL を直接操作する必要があります。（トランザクション処理等は複雑化します） ローカルの開発環境と上手く連携できない ：Google Apps Script で利用可能な clasp は、現時点で App Maker には対応していません。バージョン管理、デプロイ管理機能は開発コンソールに実装されていますが、コードレベルでの差分レビュー等を実施したい場合は、現時点では少しめんどくさいです。 定期実行トリガーを GUI で設定できない ：Google Apps Script では GUI から設定が可能な、「時間ベース」のトリガーが GUI で簡単に設定できません。設定が必要な場合は、以下のようなスクリプトベースで設定する必要があります。 ScriptApp . newTrigger ( "functionName" ). timeBased (). at ( date ); App Maker をこれから始める人向けの情報 なお、今回紹介させて頂いた内容は App Maker を全く触ったことがない人には少し難しい内容だと思っています。 知識がゼロからの方は、以下のナレッジを元に是非一度チュートリアルなどで簡単に触ってから、改めて読んで頂けると理解が深まるかと思います。 アプリ作成の一連の流れを掴む How to Build Enterprise Workflows with App Maker (Cloud Next ‘18) Improve Processes by integrating App Maker, Data Studio and GCP (Cloud Next ‘19) 実際に触ってみる チュートリアル テンプレート 情報共有プラットフォームを活用する stack overflow [google-app-maker] タグ Google グループ[App Maker Users] まとめ 今回紹介させて頂いた Google App Maker は、G Suite をディープに利用している企業であれば、Google Apps Script に匹敵する強力な社内アプリケーションプラットフォームになると感じています。 App Maker のようなローコード/ノーコード開発プラットフォームは既に市場にいくつか出ており、Google App Maker はその中でも比較的コーディング・技術力が求められるプラットフォームだと思います。しかし、その分既存社内システムと親和性の高い高度な自動化が実現しやすいプラットフォームでもあると思うので、臆せずにチャレンジする価値は十分にあると思います。 なお、セッション中に紹介させて頂いた稟議アプリケーションは、App Maker に対する知識が 0 の状態から 1~2 ヶ月程で Slack との連携も含めて 1 人で実装できました。（RDB や GAS に対する知識は、ある程度習得済みの状態が前提にはなっています） GA 直後ということもあってインターネット上のナレッジが少ない中、探り探りに得られた活用のヒントを今回の場でお話しさせて頂きましたが、引き続き App Maker というプラットフォームを上手く利用していくには、ユーザーコミュニティの盛り上がりが欠かせないと思っていますので、引き続き情報発信等を通じて盛り上げていければと考えております。 最後になりますが、メドレーではこのような市場に出て間もないテクノロジーでもチャレンジしていける風土があります。こういったチャレンジを求めている方は、ぜひご応募下さい。 https://www.medley.jp/jobs/ https://www.medley.jp/team/creator-story.html

はじめに こんにちは、コーポレートエンジニアの若林です。 普段はいわゆる社内 SE 的な領域を担当していますが、その名の通り エンジニアの視点も持ったコーポレート機能 という立ち位置で、社員の働く基盤や事業の発展を支えています。 過去のコーポレートエンジニアの取り組みや、マインドについては以下が参考になるかと思います。 コーポレート IT 担当として会社の成長を支える兼松さんに「聞いてみた」 全社で本気になってリーンに ISMS の仕組みをつくった話 今回もその取り組みの一環で、先日開催された Google Cloud Next ‘19 in Tokyo に、カスタマースピーカーという形で弊社執行役員の兼松と共に登壇させて頂きました。 今回は、登壇させて頂いたセッション Google Apps Script / AppMaker 最新アップデートと活用のヒント について、セッションでお伝えした内容を含めたレポートを書きたいと思います。 Google Cloud Next ‘19 in Tokyo について Google Cloud Next は、年一度 Google 主催で催される Google テクノロジーに関するカンファレンスです（今年は、サンフランシスコ、東京、ロンドンの世界 3 会場開催） 日程；7/30(火) - 8/1(木) 会場：東京プリンスホテルおよびザ・プリンス パークタワー東京 イベントサイト： Google Cloud Next ‘19 in Tokyo メドレー社内でも、G Suite を中心に Google Cloud の活用事例が増えてきていることもあり、社内の新しいアプリケーションプラットフォームとして採用している App Maker の話でスピーカー応募してみようということになりました。 なお、登壇させて頂いたセッションですが、一般申込受付が始まってすぐに満席になってしまい、私が SNS でアナウンスしても既に満席で申し込めないような状態になっておりました・・・ 会場の雰囲気 東京タワーとの一枚 登壇の様子（背景と同色なのは偶然です） セッション内容について Google Apps Script / AppMaker 最新アップデートと活用のヒント 今回は、Google の深堀さん、嘉穂無線の太田さんとの合同セッションという形で登壇させて頂きました。 まず Google の深掘さんが、「G Suite を拡張開発するテクノロジーの全体概要と活用事例」というテーマで、Google Apps Script / App Maker を含む G Suite 周辺の開発プラットフォームについて、位置付けの整理とグローバルでの活用事例、今後のアップデートについてお話されました。次に、嘉穂無線の太田さんが、「Google Apps Script の活用事例」というテーマで、Google Apps Script を活用して開発した社内システムについて、デモを交えて紹介されました。 それを受けて、メドレーでは「Google App Maker 活用事例と開発 Tips」というテーマで、Google App Maker を活用して開発した社内システムを、デモを交えて紹介させて頂きました。 App Maker は GA されてからまだ一年強ということもあって、Apps Script と比較してもオンラインに蓄積されているナレッジが非常に少なく（あってもほぼ英語）、現時点において日本で活用できている企業は本当に限られていると思っています。 しかし実際に触っていく中でも非常に可能性を秘めたプラットフォームだと感じているので、日本でも活用する会社が増えてくれれば嬉しいという思いを込めて、今回プレゼンさせて頂きました。 ここからは、実際にメドレーのパートでお話した内容を、振り返りも兼ねて書かせて頂ければと思います。 Google App Maker とは 一言で言うと… G Suite Business / Enterprise プランに含まれるローコードアプリケーション開発ツール です！ 主に以下のような特徴があります。 バックエンドのデータストアとして、RDB（Cloud SQL）が利用される 開発言語は JavaScript をベースとしたスクリプト言語である Google Apps Script である G Suite のサービス（ユーザーディレクトリ、メール、ドライブ等）と容易に連携が可能である UI のカスタマイズの容易さと高い自由度がある メドレーでの社内活用事例 メドレーでは、Google App Maker を活用して複数のアプリケーションを実装しています。 今回は、そのうちの一つである社内稟議システムについての概要を紹介させて頂きました。（当日はデモも実施しているので、デモの内容を見たい方は セッション動画 をご覧下さい） App Maker を使ったアプリケーション開発の流れと開発 Tips App Maker はアプリケーション開発プラットフォームなので、開発の流れを以下の 3step に分割した上で、Tips を紹介させて頂きます。 データモデルの定義 UI 作成 ビジネスロジック記述 1. データモデルの定義 はじめに、GUI ベースで RDB のメタデータを定義していきます。 モデル（テーブル）の主な設定項目 FIELDS：モデルのフィールド情報を定義 DATASOURCES：データベースでいうところのビューに近い概念の設定 RELATIONS：モデル間のリレーションを定義 EVENTS：クライアントのデータベース操作に対するイベントスクリプトを定義 SECURITY：モデルに対する権限を制御 データモデルの定義における開発 Tips EVENTS の挙動 ：MODEL の設定項目なので一見データベーストリガーと思いがちですが、 このイベントは、サーバーサイドスクリプトや外部からのデータベースレコード操作では、トリガーされません。 （クライアントサイドからの操作限定）サーバーサイドスクリプトや外部からの操作には、別途関数呼び出しを組み込む等の配慮が必要になります。 データベースへの更新反映タイミング ：既定の設定ではクライアントでデータソースの情報が変更された場合に、サーバーに即時反映される動き(Auto Save Mode)になります。この動きを止めたければ Manual Save Mode に切り替えることも可能ですが、コード記述量が大きく増えることになります。Auto Save Mode のままでも UI/UX の工夫で回避できたりするので、まずそこを検討するのが重要かなと思います。 細かな権限制御 ：GUI からできる権限制御設定は限られています。アプリケーション内での動的な権限制御や、フィールドの値に基づく細かな権限制御が必要な場合は、 Query Builder や Query Script による読み込み制御が必要になりますが開発コストが結構増加するので、他の回避策がないか事前に検討することをお勧めします。 2. UI 作成 次に、ウィジェット（画面を構成する部品）をドラッグ&ドロップで配置して画面を作成していきます。 一般的に必要となるボタンやドロップダウンに加えて、G Suite ならではの User Picker や Drive Picker 、更には リッチなポップアップ、ダイアログ等 も利用可能です。 スタイルに関しては、 バリアント を利用することで、統一感のあるスタイル適用が容易に可能になっています UI 作成における開発 Tips 組み込みのマテリアルデザインアイコン ：ラベルやボタンの text を特定の文字列にすると、元々組み込まれているマテリアルデザインアイコンを利用することが可能です。（ 文字列とアイコンの対応表 ）一般的に利用されているようなアイコンはほとんど用意されているので、ガンガン活用していきましょう。 3. ビジネスロジック記述 最後に、2 種類のスクリプト（Client Script, Server Script）を利用して、ビジネスロジックを記述していきます。（アイテム生成とか、読み込みとかは基本的に記述不要） Client Script から Server Script を呼び出したい場合は、 Google Apps Script 同様、以下のような形で実行が可能になっています。 google . script . run . ServerSideFunction (); ビジネスロジック記述における開発 Tips 外部公開できない ：Google Apps Script で言うところの、doGet/doPost 関数のような Web API は、App Maker のスクリプト内に作ることができないようになっています。外部システムとの連携が必要な場合、Cloud Function 等を介して、Cloud SQL を直接操作する必要があります。（トランザクション処理等は複雑化します） ローカルの開発環境と上手く連携できない ：Google Apps Script で利用可能な clasp は、現時点で App Maker には対応していません。バージョン管理、デプロイ管理機能は開発コンソールに実装されていますが、コードレベルでの差分レビュー等を実施したい場合は、現時点では少しめんどくさいです。 定期実行トリガーを GUI で設定できない ：Google Apps Script では GUI から設定が可能な、「時間ベース」のトリガーが GUI で簡単に設定できません。設定が必要な場合は、以下のようなスクリプトベースで設定する必要があります。 ScriptApp . newTrigger ( "functionName" ). timeBased (). at ( date ); App Maker をこれから始める人向けの情報 なお、今回紹介させて頂いた内容は App Maker を全く触ったことがない人には少し難しい内容だと思っています。 知識がゼロからの方は、以下のナレッジを元に是非一度チュートリアルなどで簡単に触ってから、改めて読んで頂けると理解が深まるかと思います。 アプリ作成の一連の流れを掴む How to Build Enterprise Workflows with App Maker (Cloud Next ‘18) Improve Processes by integrating App Maker, Data Studio and GCP (Cloud Next ‘19) 実際に触ってみる チュートリアル テンプレート 情報共有プラットフォームを活用する stack overflow [google-app-maker] タグ Google グループ[App Maker Users] まとめ 今回紹介させて頂いた Google App Maker は、G Suite をディープに利用している企業であれば、Google Apps Script に匹敵する強力な社内アプリケーションプラットフォームになると感じています。 App Maker のようなローコード/ノーコード開発プラットフォームは既に市場にいくつか出ており、Google App Maker はその中でも比較的コーディング・技術力が求められるプラットフォームだと思います。しかし、その分既存社内システムと親和性の高い高度な自動化が実現しやすいプラットフォームでもあると思うので、臆せずにチャレンジする価値は十分にあると思います。 なお、セッション中に紹介させて頂いた稟議アプリケーションは、App Maker に対する知識が 0 の状態から 1~2 ヶ月程で Slack との連携も含めて 1 人で実装できました。（RDB や GAS に対する知識は、ある程度習得済みの状態が前提にはなっています） GA 直後ということもあってインターネット上のナレッジが少ない中、探り探りに得られた活用のヒントを今回の場でお話しさせて頂きましたが、引き続き App Maker というプラットフォームを上手く利用していくには、ユーザーコミュニティの盛り上がりが欠かせないと思っていますので、引き続き情報発信等を通じて盛り上げていければと考えております。 最後になりますが、メドレーではこのような市場に出て間もないテクノロジーでもチャレンジしていける風土があります。こういったチャレンジを求めている方は、ぜひご応募下さい。 募集の一覧 | 株式会社メドレー メドレーの採用情報はこちらからご確認ください。 www.medley.jp メンバーのストーリー | 株式会社メドレー メンバーのストーリー 家族や友人が病気になった時に救いの手を差しのべる医療の力。... www.medley.jp

はじめに こんにちは、コーポレートエンジニアの若林です。 普段はいわゆる社内 SE 的な領域を担当していますが、その名の通り エンジニアの視点も持ったコーポレート機能 という立ち位置で、社員の働く基盤や事業の発展を支えています。 過去のコーポレートエンジニアの取り組みや、マインドについては以下が参考になるかと思います。 コーポレート IT 担当として会社の成長を支える兼松さんに「聞いてみた」 全社で本気になってリーンに ISMS の仕組みをつくった話 今回もその取り組みの一環で、先日開催された Google Cloud Next ‘19 in Tokyo に、カスタマースピーカーという形で弊社執行役員の兼松と共に登壇させて頂きました。 今回は、登壇させて頂いたセッション Google Apps Script / AppMaker 最新アップデートと活用のヒント について、セッションでお伝えした内容を含めたレポートを書きたいと思います。 Google Cloud Next ‘19 in Tokyo について Google Cloud Next は、年一度 Google 主催で催される Google テクノロジーに関するカンファレンスです（今年は、サンフランシスコ、東京、ロンドンの世界 3 会場開催） 日程；7/30(火) - 8/1(木) 会場：東京プリンスホテルおよびザ・プリンス パークタワー東京 イベントサイト： Google Cloud Next ‘19 in Tokyo メドレー社内でも、G Suite を中心に Google Cloud の活用事例が増えてきていることもあり、社内の新しいアプリケーションプラットフォームとして採用している App Maker の話でスピーカー応募してみようということになりました。 なお、登壇させて頂いたセッションですが、一般申込受付が始まってすぐに満席になってしまい、私が SNS でアナウンスしても既に満席で申し込めないような状態になっておりました・・・ 会場の雰囲気 東京タワーとの一枚 登壇の様子（背景と同色なのは偶然です） セッション内容について Google Apps Script / AppMaker 最新アップデートと活用のヒント 今回は、Google の深堀さん、嘉穂無線の太田さんとの合同セッションという形で登壇させて頂きました。 まず Google の深掘さんが、「G Suite を拡張開発するテクノロジーの全体概要と活用事例」というテーマで、Google Apps Script / App Maker を含む G Suite 周辺の開発プラットフォームについて、位置付けの整理とグローバルでの活用事例、今後のアップデートについてお話されました。次に、嘉穂無線の太田さんが、「Google Apps Script の活用事例」というテーマで、Google Apps Script を活用して開発した社内システムについて、デモを交えて紹介されました。 それを受けて、メドレーでは「Google App Maker 活用事例と開発 Tips」というテーマで、Google App Maker を活用して開発した社内システムを、デモを交えて紹介させて頂きました。 App Maker は GA されてからまだ一年強ということもあって、Apps Script と比較してもオンラインに蓄積されているナレッジが非常に少なく（あってもほぼ英語）、現時点において日本で活用できている企業は本当に限られていると思っています。 しかし実際に触っていく中でも非常に可能性を秘めたプラットフォームだと感じているので、日本でも活用する会社が増えてくれれば嬉しいという思いを込めて、今回プレゼンさせて頂きました。 ここからは、実際にメドレーのパートでお話した内容を、振り返りも兼ねて書かせて頂ければと思います。 Google App Maker とは 一言で言うと… G Suite Business / Enterprise プランに含まれるローコードアプリケーション開発ツール です！ 主に以下のような特徴があります。 バックエンドのデータストアとして、RDB（Cloud SQL）が利用される 開発言語は JavaScript をベースとしたスクリプト言語である Google Apps Script である G Suite のサービス（ユーザーディレクトリ、メール、ドライブ等）と容易に連携が可能である UI のカスタマイズの容易さと高い自由度がある メドレーでの社内活用事例 メドレーでは、Google App Maker を活用して複数のアプリケーションを実装しています。 今回は、そのうちの一つである社内稟議システムについての概要を紹介させて頂きました。（当日はデモも実施しているので、デモの内容を見たい方は セッション動画 をご覧下さい） App Maker を使ったアプリケーション開発の流れと開発 Tips App Maker はアプリケーション開発プラットフォームなので、開発の流れを以下の 3step に分割した上で、Tips を紹介させて頂きます。 データモデルの定義 UI 作成 ビジネスロジック記述 1. データモデルの定義 はじめに、GUI ベースで RDB のメタデータを定義していきます。 モデル（テーブル）の主な設定項目 FIELDS：モデルのフィールド情報を定義 DATASOURCES：データベースでいうところのビューに近い概念の設定 RELATIONS：モデル間のリレーションを定義 EVENTS：クライアントのデータベース操作に対するイベントスクリプトを定義 SECURITY：モデルに対する権限を制御 データモデルの定義における開発 Tips EVENTS の挙動 ：MODEL の設定項目なので一見データベーストリガーと思いがちですが、 このイベントは、サーバーサイドスクリプトや外部からのデータベースレコード操作では、トリガーされません。 （クライアントサイドからの操作限定）サーバーサイドスクリプトや外部からの操作には、別途関数呼び出しを組み込む等の配慮が必要になります。 データベースへの更新反映タイミング ：既定の設定ではクライアントでデータソースの情報が変更された場合に、サーバーに即時反映される動き(Auto Save Mode)になります。この動きを止めたければ Manual Save Mode に切り替えることも可能ですが、コード記述量が大きく増えることになります。Auto Save Mode のままでも UI/UX の工夫で回避できたりするので、まずそこを検討するのが重要かなと思います。 細かな権限制御 ：GUI からできる権限制御設定は限られています。アプリケーション内での動的な権限制御や、フィールドの値に基づく細かな権限制御が必要な場合は、 Query Builder や Query Script による読み込み制御が必要になりますが開発コストが結構増加するので、他の回避策がないか事前に検討することをお勧めします。 2. UI 作成 次に、ウィジェット（画面を構成する部品）をドラッグ&ドロップで配置して画面を作成していきます。 一般的に必要となるボタンやドロップダウンに加えて、G Suite ならではの User Picker や Drive Picker 、更には リッチなポップアップ、ダイアログ等 も利用可能です。 スタイルに関しては、 バリアント を利用することで、統一感のあるスタイル適用が容易に可能になっています UI 作成における開発 Tips 組み込みのマテリアルデザインアイコン ：ラベルやボタンの text を特定の文字列にすると、元々組み込まれているマテリアルデザインアイコンを利用することが可能です。（ 文字列とアイコンの対応表 ）一般的に利用されているようなアイコンはほとんど用意されているので、ガンガン活用していきましょう。 3. ビジネスロジック記述 最後に、2 種類のスクリプト（Client Script, Server Script）を利用して、ビジネスロジックを記述していきます。（アイテム生成とか、読み込みとかは基本的に記述不要） Client Script から Server Script を呼び出したい場合は、 Google Apps Script 同様、以下のような形で実行が可能になっています。 google . script . run . ServerSideFunction (); ビジネスロジック記述における開発 Tips 外部公開できない ：Google Apps Script で言うところの、doGet/doPost 関数のような Web API は、App Maker のスクリプト内に作ることができないようになっています。外部システムとの連携が必要な場合、Cloud Function 等を介して、Cloud SQL を直接操作する必要があります。（トランザクション処理等は複雑化します） ローカルの開発環境と上手く連携できない ：Google Apps Script で利用可能な clasp は、現時点で App Maker には対応していません。バージョン管理、デプロイ管理機能は開発コンソールに実装されていますが、コードレベルでの差分レビュー等を実施したい場合は、現時点では少しめんどくさいです。 定期実行トリガーを GUI で設定できない ：Google Apps Script では GUI から設定が可能な、「時間ベース」のトリガーが GUI で簡単に設定できません。設定が必要な場合は、以下のようなスクリプトベースで設定する必要があります。 ScriptApp . newTrigger ( "functionName" ). timeBased (). at ( date ); App Maker をこれから始める人向けの情報 なお、今回紹介させて頂いた内容は App Maker を全く触ったことがない人には少し難しい内容だと思っています。 知識がゼロからの方は、以下のナレッジを元に是非一度チュートリアルなどで簡単に触ってから、改めて読んで頂けると理解が深まるかと思います。 アプリ作成の一連の流れを掴む How to Build Enterprise Workflows with App Maker (Cloud Next ‘18) Improve Processes by integrating App Maker, Data Studio and GCP (Cloud Next ‘19) 実際に触ってみる チュートリアル テンプレート 情報共有プラットフォームを活用する stack overflow [google-app-maker] タグ Google グループ[App Maker Users] まとめ 今回紹介させて頂いた Google App Maker は、G Suite をディープに利用している企業であれば、Google Apps Script に匹敵する強力な社内アプリケーションプラットフォームになると感じています。 App Maker のようなローコード/ノーコード開発プラットフォームは既に市場にいくつか出ており、Google App Maker はその中でも比較的コーディング・技術力が求められるプラットフォームだと思います。しかし、その分既存社内システムと親和性の高い高度な自動化が実現しやすいプラットフォームでもあると思うので、臆せずにチャレンジする価値は十分にあると思います。 なお、セッション中に紹介させて頂いた稟議アプリケーションは、App Maker に対する知識が 0 の状態から 1~2 ヶ月程で Slack との連携も含めて 1 人で実装できました。（RDB や GAS に対する知識は、ある程度習得済みの状態が前提にはなっています） GA 直後ということもあってインターネット上のナレッジが少ない中、探り探りに得られた活用のヒントを今回の場でお話しさせて頂きましたが、引き続き App Maker というプラットフォームを上手く利用していくには、ユーザーコミュニティの盛り上がりが欠かせないと思っていますので、引き続き情報発信等を通じて盛り上げていければと考えております。 最後になりますが、メドレーではこのような市場に出て間もないテクノロジーでもチャレンジしていける風土があります。こういったチャレンジを求めている方は、ぜひご応募下さい。 募集の一覧 | 株式会社メドレー メドレーの採用情報はこちらからご確認ください。 www.medley.jp メンバーのストーリー | 株式会社メドレー メンバーのストーリー 家族や友人が病気になった時に救いの手を差しのべる医療の力。... www.medley.jp

はじめに こんにちは、コーポレートエンジニアの若林です。 普段はいわゆる社内 SE 的な領域を担当していますが、その名の通り エンジニアの視点も持ったコーポレート機能 という立ち位置で、社員の働く基盤や事業の発展を支えています。 過去のコーポレートエンジニアの取り組みや、マインドについては以下が参考になるかと思います。 コーポレート IT 担当として会社の成長を支える兼松さんに「聞いてみた」 全社で本気になってリーンに ISMS の仕組みをつくった話 今回もその取り組みの一環で、先日開催された Google Cloud Next ‘19 in Tokyo に、カスタマースピーカーという形で弊社執行役員の兼松と共に登壇させて頂きました。 今回は、登壇させて頂いたセッション Google Apps Script / AppMaker 最新アップデートと活用のヒント について、セッションでお伝えした内容を含めたレポートを書きたいと思います。 Google Cloud Next ‘19 in Tokyo について Google Cloud Next は、年一度 Google 主催で催される Google テクノロジーに関するカンファレンスです（今年は、サンフランシスコ、東京、ロンドンの世界 3 会場開催） 日程；7/30(火) - 8/1(木) 会場：東京プリンスホテルおよびザ・プリンス パークタワー東京 イベントサイト： Google Cloud Next ‘19 in Tokyo メドレー社内でも、G Suite を中心に Google Cloud の活用事例が増えてきていることもあり、社内の新しいアプリケーションプラットフォームとして採用している App Maker の話でスピーカー応募してみようということになりました。 なお、登壇させて頂いたセッションですが、一般申込受付が始まってすぐに満席になってしまい、私が SNS でアナウンスしても既に満席で申し込めないような状態になっておりました・・・ 会場の雰囲気 東京タワーとの一枚 登壇の様子（背景と同色なのは偶然です） セッション内容について Google Apps Script / AppMaker 最新アップデートと活用のヒント 今回は、Google の深堀さん、嘉穂無線の太田さんとの合同セッションという形で登壇させて頂きました。 まず Google の深掘さんが、「G Suite を拡張開発するテクノロジーの全体概要と活用事例」というテーマで、Google Apps Script / App Maker を含む G Suite 周辺の開発プラットフォームについて、位置付けの整理とグローバルでの活用事例、今後のアップデートについてお話されました。次に、嘉穂無線の太田さんが、「Google Apps Script の活用事例」というテーマで、Google Apps Script を活用して開発した社内システムについて、デモを交えて紹介されました。 それを受けて、メドレーでは「Google App Maker 活用事例と開発 Tips」というテーマで、Google App Maker を活用して開発した社内システムを、デモを交えて紹介させて頂きました。 App Maker は GA されてからまだ一年強ということもあって、Apps Script と比較してもオンラインに蓄積されているナレッジが非常に少なく（あってもほぼ英語）、現時点において日本で活用できている企業は本当に限られていると思っています。 しかし実際に触っていく中でも非常に可能性を秘めたプラットフォームだと感じているので、日本でも活用する会社が増えてくれれば嬉しいという思いを込めて、今回プレゼンさせて頂きました。 ここからは、実際にメドレーのパートでお話した内容を、振り返りも兼ねて書かせて頂ければと思います。 Google App Maker とは 一言で言うと… G Suite Business / Enterprise プランに含まれるローコードアプリケーション開発ツール です！ 主に以下のような特徴があります。 バックエンドのデータストアとして、RDB（Cloud SQL）が利用される 開発言語は JavaScript をベースとしたスクリプト言語である Google Apps Script である G Suite のサービス（ユーザーディレクトリ、メール、ドライブ等）と容易に連携が可能である UI のカスタマイズの容易さと高い自由度がある メドレーでの社内活用事例 メドレーでは、Google App Maker を活用して複数のアプリケーションを実装しています。 今回は、そのうちの一つである社内稟議システムについての概要を紹介させて頂きました。（当日はデモも実施しているので、デモの内容を見たい方は セッション動画 をご覧下さい） App Maker を使ったアプリケーション開発の流れと開発 Tips App Maker はアプリケーション開発プラットフォームなので、開発の流れを以下の 3step に分割した上で、Tips を紹介させて頂きます。 データモデルの定義 UI 作成 ビジネスロジック記述 1. データモデルの定義 はじめに、GUI ベースで RDB のメタデータを定義していきます。 モデル（テーブル）の主な設定項目 FIELDS：モデルのフィールド情報を定義 DATASOURCES：データベースでいうところのビューに近い概念の設定 RELATIONS：モデル間のリレーションを定義 EVENTS：クライアントのデータベース操作に対するイベントスクリプトを定義 SECURITY：モデルに対する権限を制御 データモデルの定義における開発 Tips EVENTS の挙動 ：MODEL の設定項目なので一見データベーストリガーと思いがちですが、 このイベントは、サーバーサイドスクリプトや外部からのデータベースレコード操作では、トリガーされません。 （クライアントサイドからの操作限定）サーバーサイドスクリプトや外部からの操作には、別途関数呼び出しを組み込む等の配慮が必要になります。 データベースへの更新反映タイミング ：既定の設定ではクライアントでデータソースの情報が変更された場合に、サーバーに即時反映される動き(Auto Save Mode)になります。この動きを止めたければ Manual Save Mode に切り替えることも可能ですが、コード記述量が大きく増えることになります。Auto Save Mode のままでも UI/UX の工夫で回避できたりするので、まずそこを検討するのが重要かなと思います。 細かな権限制御 ：GUI からできる権限制御設定は限られています。アプリケーション内での動的な権限制御や、フィールドの値に基づく細かな権限制御が必要な場合は、 Query Builder や Query Script による読み込み制御が必要になりますが開発コストが結構増加するので、他の回避策がないか事前に検討することをお勧めします。 2. UI 作成 次に、ウィジェット（画面を構成する部品）をドラッグ&ドロップで配置して画面を作成していきます。 一般的に必要となるボタンやドロップダウンに加えて、G Suite ならではの User Picker や Drive Picker 、更には リッチなポップアップ、ダイアログ等 も利用可能です。 スタイルに関しては、 バリアント を利用することで、統一感のあるスタイル適用が容易に可能になっています UI 作成における開発 Tips 組み込みのマテリアルデザインアイコン ：ラベルやボタンの text を特定の文字列にすると、元々組み込まれているマテリアルデザインアイコンを利用することが可能です。（ 文字列とアイコンの対応表 ）一般的に利用されているようなアイコンはほとんど用意されているので、ガンガン活用していきましょう。 3. ビジネスロジック記述 最後に、2 種類のスクリプト（Client Script, Server Script）を利用して、ビジネスロジックを記述していきます。（アイテム生成とか、読み込みとかは基本的に記述不要） Client Script から Server Script を呼び出したい場合は、 Google Apps Script 同様、以下のような形で実行が可能になっています。 google . script . run . ServerSideFunction (); ビジネスロジック記述における開発 Tips 外部公開できない ：Google Apps Script で言うところの、doGet/doPost 関数のような Web API は、App Maker のスクリプト内に作ることができないようになっています。外部システムとの連携が必要な場合、Cloud Function 等を介して、Cloud SQL を直接操作する必要があります。（トランザクション処理等は複雑化します） ローカルの開発環境と上手く連携できない ：Google Apps Script で利用可能な clasp は、現時点で App Maker には対応していません。バージョン管理、デプロイ管理機能は開発コンソールに実装されていますが、コードレベルでの差分レビュー等を実施したい場合は、現時点では少しめんどくさいです。 定期実行トリガーを GUI で設定できない ：Google Apps Script では GUI から設定が可能な、「時間ベース」のトリガーが GUI で簡単に設定できません。設定が必要な場合は、以下のようなスクリプトベースで設定する必要があります。 ScriptApp . newTrigger ( "functionName" ). timeBased (). at ( date ); App Maker をこれから始める人向けの情報 なお、今回紹介させて頂いた内容は App Maker を全く触ったことがない人には少し難しい内容だと思っています。 知識がゼロからの方は、以下のナレッジを元に是非一度チュートリアルなどで簡単に触ってから、改めて読んで頂けると理解が深まるかと思います。 アプリ作成の一連の流れを掴む How to Build Enterprise Workflows with App Maker (Cloud Next ‘18) Improve Processes by integrating App Maker, Data Studio and GCP (Cloud Next ‘19) 実際に触ってみる チュートリアル テンプレート 情報共有プラットフォームを活用する stack overflow [google-app-maker] タグ Google グループ[App Maker Users] まとめ 今回紹介させて頂いた Google App Maker は、G Suite をディープに利用している企業であれば、Google Apps Script に匹敵する強力な社内アプリケーションプラットフォームになると感じています。 App Maker のようなローコード/ノーコード開発プラットフォームは既に市場にいくつか出ており、Google App Maker はその中でも比較的コーディング・技術力が求められるプラットフォームだと思います。しかし、その分既存社内システムと親和性の高い高度な自動化が実現しやすいプラットフォームでもあると思うので、臆せずにチャレンジする価値は十分にあると思います。 なお、セッション中に紹介させて頂いた稟議アプリケーションは、App Maker に対する知識が 0 の状態から 1~2 ヶ月程で Slack との連携も含めて 1 人で実装できました。（RDB や GAS に対する知識は、ある程度習得済みの状態が前提にはなっています） GA 直後ということもあってインターネット上のナレッジが少ない中、探り探りに得られた活用のヒントを今回の場でお話しさせて頂きましたが、引き続き App Maker というプラットフォームを上手く利用していくには、ユーザーコミュニティの盛り上がりが欠かせないと思っていますので、引き続き情報発信等を通じて盛り上げていければと考えております。 最後になりますが、メドレーではこのような市場に出て間もないテクノロジーでもチャレンジしていける風土があります。こういったチャレンジを求めている方は、ぜひご応募下さい。 募集の一覧 | 株式会社メドレー メドレーの採用情報はこちらからご確認ください。 www.medley.jp メンバーのストーリー | 株式会社メドレー メンバーのストーリー 家族や友人が病気になった時に救いの手を差しのべる医療の力。... www.medley.jp

はじめに こんにちは、コーポレートエンジニアの若林です。 普段はいわゆる社内 SE 的な領域を担当していますが、その名の通り エンジニアの視点も持ったコーポレート機能 という立ち位置で、社員の働く基盤や事業の発展を支えています。 過去のコーポレートエンジニアの取り組みや、マインドについては以下が参考になるかと思います。 コーポレート IT 担当として会社の成長を支える兼松さんに「聞いてみた」 全社で本気になってリーンに ISMS の仕組みをつくった話 今回もその取り組みの一環で、先日開催された Google Cloud Next ‘19 in Tokyo に、カスタマースピーカーという形で弊社執行役員の兼松と共に登壇させて頂きました。 今回は、登壇させて頂いたセッション Google Apps Script / AppMaker 最新アップデートと活用のヒント について、セッションでお伝えした内容を含めたレポートを書きたいと思います。 Google Cloud Next ‘19 in Tokyo について Google Cloud Next は、年一度 Google 主催で催される Google テクノロジーに関するカンファレンスです（今年は、サンフランシスコ、東京、ロンドンの世界 3 会場開催） 日程；7/30(火) - 8/1(木) 会場：東京プリンスホテルおよびザ・プリンス パークタワー東京 イベントサイト： Google Cloud Next ‘19 in Tokyo メドレー社内でも、G Suite を中心に Google Cloud の活用事例が増えてきていることもあり、社内の新しいアプリケーションプラットフォームとして採用している App Maker の話でスピーカー応募してみようということになりました。 なお、登壇させて頂いたセッションですが、一般申込受付が始まってすぐに満席になってしまい、私が SNS でアナウンスしても既に満席で申し込めないような状態になっておりました・・・ 会場の雰囲気 東京タワーとの一枚 登壇の様子（背景と同色なのは偶然です） セッション内容について Google Apps Script / AppMaker 最新アップデートと活用のヒント 今回は、Google の深堀さん、嘉穂無線の太田さんとの合同セッションという形で登壇させて頂きました。 まず Google の深掘さんが、「G Suite を拡張開発するテクノロジーの全体概要と活用事例」というテーマで、Google Apps Script / App Maker を含む G Suite 周辺の開発プラットフォームについて、位置付けの整理とグローバルでの活用事例、今後のアップデートについてお話されました。次に、嘉穂無線の太田さんが、「Google Apps Script の活用事例」というテーマで、Google Apps Script を活用して開発した社内システムについて、デモを交えて紹介されました。 それを受けて、メドレーでは「Google App Maker 活用事例と開発 Tips」というテーマで、Google App Maker を活用して開発した社内システムを、デモを交えて紹介させて頂きました。 App Maker は GA されてからまだ一年強ということもあって、Apps Script と比較してもオンラインに蓄積されているナレッジが非常に少なく（あってもほぼ英語）、現時点において日本で活用できている企業は本当に限られていると思っています。 しかし実際に触っていく中でも非常に可能性を秘めたプラットフォームだと感じているので、日本でも活用する会社が増えてくれれば嬉しいという思いを込めて、今回プレゼンさせて頂きました。 ここからは、実際にメドレーのパートでお話した内容を、振り返りも兼ねて書かせて頂ければと思います。 Google App Maker とは 一言で言うと… G Suite Business / Enterprise プランに含まれるローコードアプリケーション開発ツール です！ 主に以下のような特徴があります。 バックエンドのデータストアとして、RDB（Cloud SQL）が利用される 開発言語は JavaScript をベースとしたスクリプト言語である Google Apps Script である G Suite のサービス（ユーザーディレクトリ、メール、ドライブ等）と容易に連携が可能である UI のカスタマイズの容易さと高い自由度がある メドレーでの社内活用事例 メドレーでは、Google App Maker を活用して複数のアプリケーションを実装しています。 今回は、そのうちの一つである社内稟議システムについての概要を紹介させて頂きました。（当日はデモも実施しているので、デモの内容を見たい方は セッション動画 をご覧下さい） App Maker を使ったアプリケーション開発の流れと開発 Tips App Maker はアプリケーション開発プラットフォームなので、開発の流れを以下の 3step に分割した上で、Tips を紹介させて頂きます。 データモデルの定義 UI 作成 ビジネスロジック記述 1. データモデルの定義 はじめに、GUI ベースで RDB のメタデータを定義していきます。 モデル（テーブル）の主な設定項目 FIELDS：モデルのフィールド情報を定義 DATASOURCES：データベースでいうところのビューに近い概念の設定 RELATIONS：モデル間のリレーションを定義 EVENTS：クライアントのデータベース操作に対するイベントスクリプトを定義 SECURITY：モデルに対する権限を制御 データモデルの定義における開発 Tips EVENTS の挙動 ：MODEL の設定項目なので一見データベーストリガーと思いがちですが、 このイベントは、サーバーサイドスクリプトや外部からのデータベースレコード操作では、トリガーされません。 （クライアントサイドからの操作限定）サーバーサイドスクリプトや外部からの操作には、別途関数呼び出しを組み込む等の配慮が必要になります。 データベースへの更新反映タイミング ：既定の設定ではクライアントでデータソースの情報が変更された場合に、サーバーに即時反映される動き(Auto Save Mode)になります。この動きを止めたければ Manual Save Mode に切り替えることも可能ですが、コード記述量が大きく増えることになります。Auto Save Mode のままでも UI/UX の工夫で回避できたりするので、まずそこを検討するのが重要かなと思います。 細かな権限制御 ：GUI からできる権限制御設定は限られています。アプリケーション内での動的な権限制御や、フィールドの値に基づく細かな権限制御が必要な場合は、 Query Builder や Query Script による読み込み制御が必要になりますが開発コストが結構増加するので、他の回避策がないか事前に検討することをお勧めします。 2. UI 作成 次に、ウィジェット（画面を構成する部品）をドラッグ&ドロップで配置して画面を作成していきます。 一般的に必要となるボタンやドロップダウンに加えて、G Suite ならではの User Picker や Drive Picker 、更には リッチなポップアップ、ダイアログ等 も利用可能です。 スタイルに関しては、 バリアント を利用することで、統一感のあるスタイル適用が容易に可能になっています UI 作成における開発 Tips 組み込みのマテリアルデザインアイコン ：ラベルやボタンの text を特定の文字列にすると、元々組み込まれているマテリアルデザインアイコンを利用することが可能です。（ 文字列とアイコンの対応表 ）一般的に利用されているようなアイコンはほとんど用意されているので、ガンガン活用していきましょう。 3. ビジネスロジック記述 最後に、2 種類のスクリプト（Client Script, Server Script）を利用して、ビジネスロジックを記述していきます。（アイテム生成とか、読み込みとかは基本的に記述不要） Client Script から Server Script を呼び出したい場合は、 Google Apps Script 同様、以下のような形で実行が可能になっています。 google . script . run . ServerSideFunction (); ビジネスロジック記述における開発 Tips 外部公開できない ：Google Apps Script で言うところの、doGet/doPost 関数のような Web API は、App Maker のスクリプト内に作ることができないようになっています。外部システムとの連携が必要な場合、Cloud Function 等を介して、Cloud SQL を直接操作する必要があります。（トランザクション処理等は複雑化します） ローカルの開発環境と上手く連携できない ：Google Apps Script で利用可能な clasp は、現時点で App Maker には対応していません。バージョン管理、デプロイ管理機能は開発コンソールに実装されていますが、コードレベルでの差分レビュー等を実施したい場合は、現時点では少しめんどくさいです。 定期実行トリガーを GUI で設定できない ：Google Apps Script では GUI から設定が可能な、「時間ベース」のトリガーが GUI で簡単に設定できません。設定が必要な場合は、以下のようなスクリプトベースで設定する必要があります。 ScriptApp . newTrigger ( "functionName" ). timeBased (). at ( date ); App Maker をこれから始める人向けの情報 なお、今回紹介させて頂いた内容は App Maker を全く触ったことがない人には少し難しい内容だと思っています。 知識がゼロからの方は、以下のナレッジを元に是非一度チュートリアルなどで簡単に触ってから、改めて読んで頂けると理解が深まるかと思います。 アプリ作成の一連の流れを掴む How to Build Enterprise Workflows with App Maker (Cloud Next ‘18) Improve Processes by integrating App Maker, Data Studio and GCP (Cloud Next ‘19) 実際に触ってみる チュートリアル テンプレート 情報共有プラットフォームを活用する stack overflow [google-app-maker] タグ Google グループ[App Maker Users] まとめ 今回紹介させて頂いた Google App Maker は、G Suite をディープに利用している企業であれば、Google Apps Script に匹敵する強力な社内アプリケーションプラットフォームになると感じています。 App Maker のようなローコード/ノーコード開発プラットフォームは既に市場にいくつか出ており、Google App Maker はその中でも比較的コーディング・技術力が求められるプラットフォームだと思います。しかし、その分既存社内システムと親和性の高い高度な自動化が実現しやすいプラットフォームでもあると思うので、臆せずにチャレンジする価値は十分にあると思います。 なお、セッション中に紹介させて頂いた稟議アプリケーションは、App Maker に対する知識が 0 の状態から 1~2 ヶ月程で Slack との連携も含めて 1 人で実装できました。（RDB や GAS に対する知識は、ある程度習得済みの状態が前提にはなっています） GA 直後ということもあってインターネット上のナレッジが少ない中、探り探りに得られた活用のヒントを今回の場でお話しさせて頂きましたが、引き続き App Maker というプラットフォームを上手く利用していくには、ユーザーコミュニティの盛り上がりが欠かせないと思っていますので、引き続き情報発信等を通じて盛り上げていければと考えております。 最後になりますが、メドレーではこのような市場に出て間もないテクノロジーでもチャレンジしていける風土があります。こういったチャレンジを求めている方は、ぜひご応募下さい。 募集の一覧 | 株式会社メドレー メドレーの採用情報はこちらからご確認ください。 www.medley.jp メンバーのストーリー | 株式会社メドレー メンバーのストーリー 家族や友人が病気になった時に救いの手を差しのべる医療の力。... www.medley.jp

はじめに こんにちは、コーポレートエンジニアの若林です。 普段はいわゆる社内 SE 的な領域を担当していますが、その名の通り エンジニアの視点も持ったコーポレート機能 という立ち位置で、社員の働く基盤や事業の発展を支えています。 過去のコーポレートエンジニアの取り組みや、マインドについては以下が参考になるかと思います。 コーポレート IT 担当として会社の成長を支える兼松さんに「聞いてみた」 全社で本気になってリーンに ISMS の仕組みをつくった話 今回もその取り組みの一環で、先日開催された Google Cloud Next ‘19 in Tokyo に、カスタマースピーカーという形で弊社執行役員の兼松と共に登壇させて頂きました。 今回は、登壇させて頂いたセッション Google Apps Script / AppMaker 最新アップデートと活用のヒント について、セッションでお伝えした内容を含めたレポートを書きたいと思います。 Google Cloud Next ‘19 in Tokyo について Google Cloud Next は、年一度 Google 主催で催される Google テクノロジーに関するカンファレンスです（今年は、サンフランシスコ、東京、ロンドンの世界 3 会場開催） 日程；7/30(火) - 8/1(木) 会場：東京プリンスホテルおよびザ・プリンス パークタワー東京 イベントサイト： Google Cloud Next ‘19 in Tokyo メドレー社内でも、G Suite を中心に Google Cloud の活用事例が増えてきていることもあり、社内の新しいアプリケーションプラットフォームとして採用している App Maker の話でスピーカー応募してみようということになりました。 なお、登壇させて頂いたセッションですが、一般申込受付が始まってすぐに満席になってしまい、私が SNS でアナウンスしても既に満席で申し込めないような状態になっておりました・・・ 会場の雰囲気 東京タワーとの一枚 登壇の様子（背景と同色なのは偶然です） セッション内容について Google Apps Script / AppMaker 最新アップデートと活用のヒント 今回は、Google の深堀さん、嘉穂無線の太田さんとの合同セッションという形で登壇させて頂きました。 まず Google の深掘さんが、「G Suite を拡張開発するテクノロジーの全体概要と活用事例」というテーマで、Google Apps Script / App Maker を含む G Suite 周辺の開発プラットフォームについて、位置付けの整理とグローバルでの活用事例、今後のアップデートについてお話されました。次に、嘉穂無線の太田さんが、「Google Apps Script の活用事例」というテーマで、Google Apps Script を活用して開発した社内システムについて、デモを交えて紹介されました。 それを受けて、メドレーでは「Google App Maker 活用事例と開発 Tips」というテーマで、Google App Maker を活用して開発した社内システムを、デモを交えて紹介させて頂きました。 App Maker は GA されてからまだ一年強ということもあって、Apps Script と比較してもオンラインに蓄積されているナレッジが非常に少なく（あってもほぼ英語）、現時点において日本で活用できている企業は本当に限られていると思っています。 しかし実際に触っていく中でも非常に可能性を秘めたプラットフォームだと感じているので、日本でも活用する会社が増えてくれれば嬉しいという思いを込めて、今回プレゼンさせて頂きました。 ここからは、実際にメドレーのパートでお話した内容を、振り返りも兼ねて書かせて頂ければと思います。 Google App Maker とは 一言で言うと… G Suite Business / Enterprise プランに含まれるローコードアプリケーション開発ツール です！ 主に以下のような特徴があります。 バックエンドのデータストアとして、RDB（Cloud SQL）が利用される 開発言語は JavaScript をベースとしたスクリプト言語である Google Apps Script である G Suite のサービス（ユーザーディレクトリ、メール、ドライブ等）と容易に連携が可能である UI のカスタマイズの容易さと高い自由度がある メドレーでの社内活用事例 メドレーでは、Google App Maker を活用して複数のアプリケーションを実装しています。 今回は、そのうちの一つである社内稟議システムについての概要を紹介させて頂きました。（当日はデモも実施しているので、デモの内容を見たい方は セッション動画 をご覧下さい） App Maker を使ったアプリケーション開発の流れと開発 Tips App Maker はアプリケーション開発プラットフォームなので、開発の流れを以下の 3step に分割した上で、Tips を紹介させて頂きます。 データモデルの定義 UI 作成 ビジネスロジック記述 1. データモデルの定義 はじめに、GUI ベースで RDB のメタデータを定義していきます。 モデル（テーブル）の主な設定項目 FIELDS：モデルのフィールド情報を定義 DATASOURCES：データベースでいうところのビューに近い概念の設定 RELATIONS：モデル間のリレーションを定義 EVENTS：クライアントのデータベース操作に対するイベントスクリプトを定義 SECURITY：モデルに対する権限を制御 データモデルの定義における開発 Tips EVENTS の挙動 ：MODEL の設定項目なので一見データベーストリガーと思いがちですが、 このイベントは、サーバーサイドスクリプトや外部からのデータベースレコード操作では、トリガーされません。 （クライアントサイドからの操作限定）サーバーサイドスクリプトや外部からの操作には、別途関数呼び出しを組み込む等の配慮が必要になります。 データベースへの更新反映タイミング ：既定の設定ではクライアントでデータソースの情報が変更された場合に、サーバーに即時反映される動き(Auto Save Mode)になります。この動きを止めたければ Manual Save Mode に切り替えることも可能ですが、コード記述量が大きく増えることになります。Auto Save Mode のままでも UI/UX の工夫で回避できたりするので、まずそこを検討するのが重要かなと思います。 細かな権限制御 ：GUI からできる権限制御設定は限られています。アプリケーション内での動的な権限制御や、フィールドの値に基づく細かな権限制御が必要な場合は、 Query Builder や Query Script による読み込み制御が必要になりますが開発コストが結構増加するので、他の回避策がないか事前に検討することをお勧めします。 2. UI 作成 次に、ウィジェット（画面を構成する部品）をドラッグ&ドロップで配置して画面を作成していきます。 一般的に必要となるボタンやドロップダウンに加えて、G Suite ならではの User Picker や Drive Picker 、更には リッチなポップアップ、ダイアログ等 も利用可能です。 スタイルに関しては、 バリアント を利用することで、統一感のあるスタイル適用が容易に可能になっています UI 作成における開発 Tips 組み込みのマテリアルデザインアイコン ：ラベルやボタンの text を特定の文字列にすると、元々組み込まれているマテリアルデザインアイコンを利用することが可能です。（ 文字列とアイコンの対応表 ）一般的に利用されているようなアイコンはほとんど用意されているので、ガンガン活用していきましょう。 3. ビジネスロジック記述 最後に、2 種類のスクリプト（Client Script, Server Script）を利用して、ビジネスロジックを記述していきます。（アイテム生成とか、読み込みとかは基本的に記述不要） Client Script から Server Script を呼び出したい場合は、 Google Apps Script 同様、以下のような形で実行が可能になっています。 google . script . run . ServerSideFunction (); ビジネスロジック記述における開発 Tips 外部公開できない ：Google Apps Script で言うところの、doGet/doPost 関数のような Web API は、App Maker のスクリプト内に作ることができないようになっています。外部システムとの連携が必要な場合、Cloud Function 等を介して、Cloud SQL を直接操作する必要があります。（トランザクション処理等は複雑化します） ローカルの開発環境と上手く連携できない ：Google Apps Script で利用可能な clasp は、現時点で App Maker には対応していません。バージョン管理、デプロイ管理機能は開発コンソールに実装されていますが、コードレベルでの差分レビュー等を実施したい場合は、現時点では少しめんどくさいです。 定期実行トリガーを GUI で設定できない ：Google Apps Script では GUI から設定が可能な、「時間ベース」のトリガーが GUI で簡単に設定できません。設定が必要な場合は、以下のようなスクリプトベースで設定する必要があります。 ScriptApp . newTrigger ( "functionName" ). timeBased (). at ( date ); App Maker をこれから始める人向けの情報 なお、今回紹介させて頂いた内容は App Maker を全く触ったことがない人には少し難しい内容だと思っています。 知識がゼロからの方は、以下のナレッジを元に是非一度チュートリアルなどで簡単に触ってから、改めて読んで頂けると理解が深まるかと思います。 アプリ作成の一連の流れを掴む How to Build Enterprise Workflows with App Maker (Cloud Next ‘18) Improve Processes by integrating App Maker, Data Studio and GCP (Cloud Next ‘19) 実際に触ってみる チュートリアル テンプレート 情報共有プラットフォームを活用する stack overflow [google-app-maker] タグ Google グループ[App Maker Users] まとめ 今回紹介させて頂いた Google App Maker は、G Suite をディープに利用している企業であれば、Google Apps Script に匹敵する強力な社内アプリケーションプラットフォームになると感じています。 App Maker のようなローコード/ノーコード開発プラットフォームは既に市場にいくつか出ており、Google App Maker はその中でも比較的コーディング・技術力が求められるプラットフォームだと思います。しかし、その分既存社内システムと親和性の高い高度な自動化が実現しやすいプラットフォームでもあると思うので、臆せずにチャレンジする価値は十分にあると思います。 なお、セッション中に紹介させて頂いた稟議アプリケーションは、App Maker に対する知識が 0 の状態から 1~2 ヶ月程で Slack との連携も含めて 1 人で実装できました。（RDB や GAS に対する知識は、ある程度習得済みの状態が前提にはなっています） GA 直後ということもあってインターネット上のナレッジが少ない中、探り探りに得られた活用のヒントを今回の場でお話しさせて頂きましたが、引き続き App Maker というプラットフォームを上手く利用していくには、ユーザーコミュニティの盛り上がりが欠かせないと思っていますので、引き続き情報発信等を通じて盛り上げていければと考えております。 最後になりますが、メドレーではこのような市場に出て間もないテクノロジーでもチャレンジしていける風土があります。こういったチャレンジを求めている方は、ぜひご応募下さい。 募集の一覧 | 株式会社メドレー メドレーの採用情報はこちらからご確認ください。 www.medley.jp メンバーのストーリー | 株式会社メドレー メンバーのストーリー 家族や友人が病気になった時に救いの手を差しのべる医療の力。... www.medley.jp

はじめに こんにちは、コーポレートエンジニアの若林です。 普段はいわゆる社内 SE 的な領域を担当していますが、その名の通り エンジニアの視点も持ったコーポレート機能 という立ち位置で、社員の働く基盤や事業の発展を支えています。 過去のコーポレートエンジニアの取り組みや、マインドについては以下が参考になるかと思います。 コーポレート IT 担当として会社の成長を支える兼松さんに「聞いてみた」 全社で本気になってリーンに ISMS の仕組みをつくった話 今回もその取り組みの一環で、先日開催された Google Cloud Next ‘19 in Tokyo に、カスタマースピーカーという形で弊社執行役員の兼松と共に登壇させて頂きました。 今回は、登壇させて頂いたセッション Google Apps Script / AppMaker 最新アップデートと活用のヒント について、セッションでお伝えした内容を含めたレポートを書きたいと思います。 Google Cloud Next ‘19 in Tokyo について Google Cloud Next は、年一度 Google 主催で催される Google テクノロジーに関するカンファレンスです（今年は、サンフランシスコ、東京、ロンドンの世界 3 会場開催） 日程；7/30(火) - 8/1(木) 会場：東京プリンスホテルおよびザ・プリンス パークタワー東京 イベントサイト： Google Cloud Next ‘19 in Tokyo メドレー社内でも、G Suite を中心に Google Cloud の活用事例が増えてきていることもあり、社内の新しいアプリケーションプラットフォームとして採用している App Maker の話でスピーカー応募してみようということになりました。 なお、登壇させて頂いたセッションですが、一般申込受付が始まってすぐに満席になってしまい、私が SNS でアナウンスしても既に満席で申し込めないような状態になっておりました・・・ 会場の雰囲気 東京タワーとの一枚 登壇の様子（背景と同色なのは偶然です） セッション内容について Google Apps Script / AppMaker 最新アップデートと活用のヒント 今回は、Google の深堀さん、嘉穂無線の太田さんとの合同セッションという形で登壇させて頂きました。 まず Google の深掘さんが、「G Suite を拡張開発するテクノロジーの全体概要と活用事例」というテーマで、Google Apps Script / App Maker を含む G Suite 周辺の開発プラットフォームについて、位置付けの整理とグローバルでの活用事例、今後のアップデートについてお話されました。次に、嘉穂無線の太田さんが、「Google Apps Script の活用事例」というテーマで、Google Apps Script を活用して開発した社内システムについて、デモを交えて紹介されました。 それを受けて、メドレーでは「Google App Maker 活用事例と開発 Tips」というテーマで、Google App Maker を活用して開発した社内システムを、デモを交えて紹介させて頂きました。 App Maker は GA されてからまだ一年強ということもあって、Apps Script と比較してもオンラインに蓄積されているナレッジが非常に少なく（あってもほぼ英語）、現時点において日本で活用できている企業は本当に限られていると思っています。 しかし実際に触っていく中でも非常に可能性を秘めたプラットフォームだと感じているので、日本でも活用する会社が増えてくれれば嬉しいという思いを込めて、今回プレゼンさせて頂きました。 ここからは、実際にメドレーのパートでお話した内容を、振り返りも兼ねて書かせて頂ければと思います。 Google App Maker とは 一言で言うと… G Suite Business / Enterprise プランに含まれるローコードアプリケーション開発ツール です！ 主に以下のような特徴があります。 バックエンドのデータストアとして、RDB（Cloud SQL）が利用される 開発言語は JavaScript をベースとしたスクリプト言語である Google Apps Script である G Suite のサービス（ユーザーディレクトリ、メール、ドライブ等）と容易に連携が可能である UI のカスタマイズの容易さと高い自由度がある メドレーでの社内活用事例 メドレーでは、Google App Maker を活用して複数のアプリケーションを実装しています。 今回は、そのうちの一つである社内稟議システムについての概要を紹介させて頂きました。（当日はデモも実施しているので、デモの内容を見たい方は セッション動画 をご覧下さい） App Maker を使ったアプリケーション開発の流れと開発 Tips App Maker はアプリケーション開発プラットフォームなので、開発の流れを以下の 3step に分割した上で、Tips を紹介させて頂きます。 データモデルの定義 UI 作成 ビジネスロジック記述 1. データモデルの定義 はじめに、GUI ベースで RDB のメタデータを定義していきます。 モデル（テーブル）の主な設定項目 FIELDS：モデルのフィールド情報を定義 DATASOURCES：データベースでいうところのビューに近い概念の設定 RELATIONS：モデル間のリレーションを定義 EVENTS：クライアントのデータベース操作に対するイベントスクリプトを定義 SECURITY：モデルに対する権限を制御 データモデルの定義における開発 Tips EVENTS の挙動 ：MODEL の設定項目なので一見データベーストリガーと思いがちですが、 このイベントは、サーバーサイドスクリプトや外部からのデータベースレコード操作では、トリガーされません。 （クライアントサイドからの操作限定）サーバーサイドスクリプトや外部からの操作には、別途関数呼び出しを組み込む等の配慮が必要になります。 データベースへの更新反映タイミング ：既定の設定ではクライアントでデータソースの情報が変更された場合に、サーバーに即時反映される動き(Auto Save Mode)になります。この動きを止めたければ Manual Save Mode に切り替えることも可能ですが、コード記述量が大きく増えることになります。Auto Save Mode のままでも UI/UX の工夫で回避できたりするので、まずそこを検討するのが重要かなと思います。 細かな権限制御 ：GUI からできる権限制御設定は限られています。アプリケーション内での動的な権限制御や、フィールドの値に基づく細かな権限制御が必要な場合は、 Query Builder や Query Script による読み込み制御が必要になりますが開発コストが結構増加するので、他の回避策がないか事前に検討することをお勧めします。 2. UI 作成 次に、ウィジェット（画面を構成する部品）をドラッグ&ドロップで配置して画面を作成していきます。 一般的に必要となるボタンやドロップダウンに加えて、G Suite ならではの User Picker や Drive Picker 、更には リッチなポップアップ、ダイアログ等 も利用可能です。 スタイルに関しては、 バリアント を利用することで、統一感のあるスタイル適用が容易に可能になっています UI 作成における開発 Tips 組み込みのマテリアルデザインアイコン ：ラベルやボタンの text を特定の文字列にすると、元々組み込まれているマテリアルデザインアイコンを利用することが可能です。（ 文字列とアイコンの対応表 ）一般的に利用されているようなアイコンはほとんど用意されているので、ガンガン活用していきましょう。 3. ビジネスロジック記述 最後に、2 種類のスクリプト（Client Script, Server Script）を利用して、ビジネスロジックを記述していきます。（アイテム生成とか、読み込みとかは基本的に記述不要） Client Script から Server Script を呼び出したい場合は、 Google Apps Script 同様、以下のような形で実行が可能になっています。 google . script . run . ServerSideFunction (); ビジネスロジック記述における開発 Tips 外部公開できない ：Google Apps Script で言うところの、doGet/doPost 関数のような Web API は、App Maker のスクリプト内に作ることができないようになっています。外部システムとの連携が必要な場合、Cloud Function 等を介して、Cloud SQL を直接操作する必要があります。（トランザクション処理等は複雑化します） ローカルの開発環境と上手く連携できない ：Google Apps Script で利用可能な clasp は、現時点で App Maker には対応していません。バージョン管理、デプロイ管理機能は開発コンソールに実装されていますが、コードレベルでの差分レビュー等を実施したい場合は、現時点では少しめんどくさいです。 定期実行トリガーを GUI で設定できない ：Google Apps Script では GUI から設定が可能な、「時間ベース」のトリガーが GUI で簡単に設定できません。設定が必要な場合は、以下のようなスクリプトベースで設定する必要があります。 ScriptApp . newTrigger ( "functionName" ). timeBased (). at ( date ); App Maker をこれから始める人向けの情報 なお、今回紹介させて頂いた内容は App Maker を全く触ったことがない人には少し難しい内容だと思っています。 知識がゼロからの方は、以下のナレッジを元に是非一度チュートリアルなどで簡単に触ってから、改めて読んで頂けると理解が深まるかと思います。 アプリ作成の一連の流れを掴む How to Build Enterprise Workflows with App Maker (Cloud Next ‘18) Improve Processes by integrating App Maker, Data Studio and GCP (Cloud Next ‘19) 実際に触ってみる チュートリアル テンプレート 情報共有プラットフォームを活用する stack overflow [google-app-maker] タグ Google グループ[App Maker Users] まとめ 今回紹介させて頂いた Google App Maker は、G Suite をディープに利用している企業であれば、Google Apps Script に匹敵する強力な社内アプリケーションプラットフォームになると感じています。 App Maker のようなローコード/ノーコード開発プラットフォームは既に市場にいくつか出ており、Google App Maker はその中でも比較的コーディング・技術力が求められるプラットフォームだと思います。しかし、その分既存社内システムと親和性の高い高度な自動化が実現しやすいプラットフォームでもあると思うので、臆せずにチャレンジする価値は十分にあると思います。 なお、セッション中に紹介させて頂いた稟議アプリケーションは、App Maker に対する知識が 0 の状態から 1~2 ヶ月程で Slack との連携も含めて 1 人で実装できました。（RDB や GAS に対する知識は、ある程度習得済みの状態が前提にはなっています） GA 直後ということもあってインターネット上のナレッジが少ない中、探り探りに得られた活用のヒントを今回の場でお話しさせて頂きましたが、引き続き App Maker というプラットフォームを上手く利用していくには、ユーザーコミュニティの盛り上がりが欠かせないと思っていますので、引き続き情報発信等を通じて盛り上げていければと考えております。 最後になりますが、メドレーではこのような市場に出て間もないテクノロジーでもチャレンジしていける風土があります。こういったチャレンジを求めている方は、ぜひご応募下さい。 募集の一覧 | 株式会社メドレー メドレーの採用情報はこちらからご確認ください。 www.medley.jp メンバーのストーリー | 株式会社メドレー メンバーのストーリー 家族や友人が病気になった時に救いの手を差しのべる医療の力。... www.medley.jp

みなさん、こんにちは。開発部エンジニア平木です。 少しレポートまで間が空いてしまいましたが、去る 7/2(月)にソラシティカンファレンスセンターで開催された Developers Summit 2019 Summer にメドレーが協賛させていただきました。 また、弊社の開発部長である田中が SI × Web の総合力で切り拓く新しいエンジニアのキャリアパス というタイトルのセッションでお話をさせていただきましたので、レポートを書きたいと思います。 会場の雰囲気 会場入口の立て看板がステキでした 会場ですがやはり今回も来場者が多く、セッション前には列が出来ていました。休憩時間中のブースにも人だかりといった感じで熱気を感じました。 次のセッション待ちで長蛇の列が ブースも人が切れませんでした しかしながら、運営が大変にスムーズだったので大きな混乱もなく次々と快適にセッションが見られるのは、やはり今までの経験によるものだろうなーと感じました。 印象に残ったセッション 色々とセッションを見ましたが、個人的にはやはり、 @t-wada さんのセッションは何度見ても惹き込まれるなと今回も拝見して感じました。 今回の内容を聞くと例え、全くテストを導入していないようなプロジェクトだったとしても「明日からちょっとずつやっていこう」と勇気をもらえるような内容でした。 エンジニアのキャリアパス いよいよ、弊社田中のセッションです。残念ながら、資料は非公開とさせていただいています…。申し訳ありません。 内容としては、少し前まではいわゆる SIer と Web 系という 2 つの領域で結構明確に壁を感じることもあったと思います。しかし、近年 X-Tech などの文脈では、関連省庁の法令やガイドラインなどを遵守しつつ、使いやすい UI への落とし込みやマネージドサービスを使用したインフラの構築などを設計する必要があります。これらの設計の上で、Web サービスとして高速に PDCA を回しサービスを改善していくという能力も他方で必要になります。 こういった背景により、きっちりとした要件定義や設計する能力を求められる SIer 的な要素と手を動かして早くサービスを改善するサイクルを回す能力が必要な Web 的な要素という、それぞれの得意領域をミックスしたエンジニアが求められているのではないかというお話をさせていただきました。 途中田中のキャリア変遷や、弊社の CLINICS を例に取り具体的にどのような能力を求められるのか?ということをお話させていただきました。 終了後のアンケートなど拝見する限り、やはり業界の括りに囚われがちなところも多いなか、キャリアパスの一つの実例として、ご好評をいただいたのは嬉しい限りでした。 まとめ メドレーのエンジニアやデザイナーは、きっちりと法令やガイドラインを守りつつ、その概念をプロダクトの設計に落しこみ、出来るだけ早く PDCA を回し、早く確実に実装することを目指しています。Developers Summit 2019 Summer のような多種多様なキャリアの方々が来場するイベントで、このようなお話をさせていただいたのはとても有意義だったと感じています。 セッションが無事終了し、ほっと一息付きながらメドレーロゴと一緒に ▼ メドレーってどんな会社？気になった方はこちら メドレーで働く | 株式会社メドレー メドレーの組織文化や募集要項をご紹介します www.medley.jp

みなさん、こんにちは。開発部エンジニア平木です。 少しレポートまで間が空いてしまいましたが、去る 7/2(月)にソラシティカンファレンスセンターで開催された Developers Summit 2019 Summer にメドレーが協賛させていただきました。 また、弊社の開発部長である田中が SI × Web の総合力で切り拓く新しいエンジニアのキャリアパス というタイトルのセッションでお話をさせていただきましたので、レポートを書きたいと思います。 会場の雰囲気 会場入口の立て看板がステキでした 会場ですがやはり今回も来場者が多く、セッション前には列が出来ていました。休憩時間中のブースにも人だかりといった感じで熱気を感じました。 次のセッション待ちで長蛇の列が ブースも人が切れませんでした しかしながら、運営が大変にスムーズだったので大きな混乱もなく次々と快適にセッションが見られるのは、やはり今までの経験によるものだろうなーと感じました。 印象に残ったセッション 色々とセッションを見ましたが、個人的にはやはり、 @t-wada さんのセッションは何度見ても惹き込まれるなと今回も拝見して感じました。 今回の内容を聞くと例え、全くテストを導入していないようなプロジェクトだったとしても「明日からちょっとずつやっていこう」と勇気をもらえるような内容でした。 エンジニアのキャリアパス いよいよ、弊社田中のセッションです。残念ながら、資料は非公開とさせていただいています…。申し訳ありません。 内容としては、少し前まではいわゆる SIer と Web 系という 2 つの領域で結構明確に壁を感じることもあったと思います。しかし、近年 X-Tech などの文脈では、関連省庁の法令やガイドラインなどを遵守しつつ、使いやすい UI への落とし込みやマネージドサービスを使用したインフラの構築などを設計する必要があります。これらの設計の上で、Web サービスとして高速に PDCA を回しサービスを改善していくという能力も他方で必要になります。 こういった背景により、きっちりとした要件定義や設計する能力を求められる SIer 的な要素と手を動かして早くサービスを改善するサイクルを回す能力が必要な Web 的な要素という、それぞれの得意領域をミックスしたエンジニアが求められているのではないかというお話をさせていただきました。 途中田中のキャリア変遷や、弊社の CLINICS を例に取り具体的にどのような能力を求められるのか?ということをお話させていただきました。 終了後のアンケートなど拝見する限り、やはり業界の括りに囚われがちなところも多いなか、キャリアパスの一つの実例として、ご好評をいただいたのは嬉しい限りでした。 まとめ メドレーのエンジニアやデザイナーは、きっちりと法令やガイドラインを守りつつ、その概念をプロダクトの設計に落しこみ、出来るだけ早く PDCA を回し、早く確実に実装することを目指しています。Developers Summit 2019 Summer のような多種多様なキャリアの方々が来場するイベントで、このようなお話をさせていただいたのはとても有意義だったと感じています。 セッションが無事終了し、ほっと一息付きながらメドレーロゴと一緒に ▼ メドレーってどんな会社？気になった方はこちら https://www.medley.jp/team/

みなさん、こんにちは。開発部エンジニア平木です。 少しレポートまで間が空いてしまいましたが、去る 7/2(月)にソラシティカンファレンスセンターで開催された Developers Summit 2019 Summer にメドレーが協賛させていただきました。 また、弊社の開発部長である田中が SI × Web の総合力で切り拓く新しいエンジニアのキャリアパス というタイトルのセッションでお話をさせていただきましたので、レポートを書きたいと思います。 会場の雰囲気 会場入口の立て看板がステキでした 会場ですがやはり今回も来場者が多く、セッション前には列が出来ていました。休憩時間中のブースにも人だかりといった感じで熱気を感じました。 次のセッション待ちで長蛇の列が ブースも人が切れませんでした しかしながら、運営が大変にスムーズだったので大きな混乱もなく次々と快適にセッションが見られるのは、やはり今までの経験によるものだろうなーと感じました。 印象に残ったセッション 色々とセッションを見ましたが、個人的にはやはり、 @t-wada さんのセッションは何度見ても惹き込まれるなと今回も拝見して感じました。 今回の内容を聞くと例え、全くテストを導入していないようなプロジェクトだったとしても「明日からちょっとずつやっていこう」と勇気をもらえるような内容でした。 エンジニアのキャリアパス いよいよ、弊社田中のセッションです。残念ながら、資料は非公開とさせていただいています…。申し訳ありません。 内容としては、少し前まではいわゆる SIer と Web 系という 2 つの領域で結構明確に壁を感じることもあったと思います。しかし、近年 X-Tech などの文脈では、関連省庁の法令やガイドラインなどを遵守しつつ、使いやすい UI への落とし込みやマネージドサービスを使用したインフラの構築などを設計する必要があります。これらの設計の上で、Web サービスとして高速に PDCA を回しサービスを改善していくという能力も他方で必要になります。 こういった背景により、きっちりとした要件定義や設計する能力を求められる SIer 的な要素と手を動かして早くサービスを改善するサイクルを回す能力が必要な Web 的な要素という、それぞれの得意領域をミックスしたエンジニアが求められているのではないかというお話をさせていただきました。 途中田中のキャリア変遷や、弊社の CLINICS を例に取り具体的にどのような能力を求められるのか?ということをお話させていただきました。 終了後のアンケートなど拝見する限り、やはり業界の括りに囚われがちなところも多いなか、キャリアパスの一つの実例として、ご好評をいただいたのは嬉しい限りでした。 まとめ メドレーのエンジニアやデザイナーは、きっちりと法令やガイドラインを守りつつ、その概念をプロダクトの設計に落しこみ、出来るだけ早く PDCA を回し、早く確実に実装することを目指しています。Developers Summit 2019 Summer のような多種多様なキャリアの方々が来場するイベントで、このようなお話をさせていただいたのはとても有意義だったと感じています。 セッションが無事終了し、ほっと一息付きながらメドレーロゴと一緒に ▼ メドレーってどんな会社？気になった方はこちら メドレーで働く | 株式会社メドレー メドレーの組織文化や募集要項をご紹介します www.medley.jp

みなさん、こんにちは。開発部エンジニア平木です。 少しレポートまで間が空いてしまいましたが、去る 7/2(月)にソラシティカンファレンスセンターで開催された Developers Summit 2019 Summer にメドレーが協賛させていただきました。 また、弊社の開発部長である田中が SI × Web の総合力で切り拓く新しいエンジニアのキャリアパス というタイトルのセッションでお話をさせていただきましたので、レポートを書きたいと思います。 会場の雰囲気 会場入口の立て看板がステキでした 会場ですがやはり今回も来場者が多く、セッション前には列が出来ていました。休憩時間中のブースにも人だかりといった感じで熱気を感じました。 次のセッション待ちで長蛇の列が ブースも人が切れませんでした しかしながら、運営が大変にスムーズだったので大きな混乱もなく次々と快適にセッションが見られるのは、やはり今までの経験によるものだろうなーと感じました。 印象に残ったセッション 色々とセッションを見ましたが、個人的にはやはり、 @t-wada さんのセッションは何度見ても惹き込まれるなと今回も拝見して感じました。 今回の内容を聞くと例え、全くテストを導入していないようなプロジェクトだったとしても「明日からちょっとずつやっていこう」と勇気をもらえるような内容でした。 エンジニアのキャリアパス いよいよ、弊社田中のセッションです。残念ながら、資料は非公開とさせていただいています…。申し訳ありません。 内容としては、少し前まではいわゆる SIer と Web 系という 2 つの領域で結構明確に壁を感じることもあったと思います。しかし、近年 X-Tech などの文脈では、関連省庁の法令やガイドラインなどを遵守しつつ、使いやすい UI への落とし込みやマネージドサービスを使用したインフラの構築などを設計する必要があります。これらの設計の上で、Web サービスとして高速に PDCA を回しサービスを改善していくという能力も他方で必要になります。 こういった背景により、きっちりとした要件定義や設計する能力を求められる SIer 的な要素と手を動かして早くサービスを改善するサイクルを回す能力が必要な Web 的な要素という、それぞれの得意領域をミックスしたエンジニアが求められているのではないかというお話をさせていただきました。 途中田中のキャリア変遷や、弊社の CLINICS を例に取り具体的にどのような能力を求められるのか?ということをお話させていただきました。 終了後のアンケートなど拝見する限り、やはり業界の括りに囚われがちなところも多いなか、キャリアパスの一つの実例として、ご好評をいただいたのは嬉しい限りでした。 まとめ メドレーのエンジニアやデザイナーは、きっちりと法令やガイドラインを守りつつ、その概念をプロダクトの設計に落しこみ、出来るだけ早く PDCA を回し、早く確実に実装することを目指しています。Developers Summit 2019 Summer のような多種多様なキャリアの方々が来場するイベントで、このようなお話をさせていただいたのはとても有意義だったと感じています。 セッションが無事終了し、ほっと一息付きながらメドレーロゴと一緒に ▼ メドレーってどんな会社？気になった方はこちら メドレーで働く | 株式会社メドレー メドレーの組織文化や募集要項をご紹介します www.medley.jp

みなさん、こんにちは。開発部エンジニア平木です。 少しレポートまで間が空いてしまいましたが、去る 7/2(月)にソラシティカンファレンスセンターで開催された Developers Summit 2019 Summer にメドレーが協賛させていただきました。 また、弊社の開発部長である田中が SI × Web の総合力で切り拓く新しいエンジニアのキャリアパス というタイトルのセッションでお話をさせていただきましたので、レポートを書きたいと思います。 会場の雰囲気 会場入口の立て看板がステキでした 会場ですがやはり今回も来場者が多く、セッション前には列が出来ていました。休憩時間中のブースにも人だかりといった感じで熱気を感じました。 次のセッション待ちで長蛇の列が ブースも人が切れませんでした しかしながら、運営が大変にスムーズだったので大きな混乱もなく次々と快適にセッションが見られるのは、やはり今までの経験によるものだろうなーと感じました。 印象に残ったセッション 色々とセッションを見ましたが、個人的にはやはり、 @t-wada さんのセッションは何度見ても惹き込まれるなと今回も拝見して感じました。 今回の内容を聞くと例え、全くテストを導入していないようなプロジェクトだったとしても「明日からちょっとずつやっていこう」と勇気をもらえるような内容でした。 エンジニアのキャリアパス いよいよ、弊社田中のセッションです。残念ながら、資料は非公開とさせていただいています…。申し訳ありません。 内容としては、少し前まではいわゆる SIer と Web 系という 2 つの領域で結構明確に壁を感じることもあったと思います。しかし、近年 X-Tech などの文脈では、関連省庁の法令やガイドラインなどを遵守しつつ、使いやすい UI への落とし込みやマネージドサービスを使用したインフラの構築などを設計する必要があります。これらの設計の上で、Web サービスとして高速に PDCA を回しサービスを改善していくという能力も他方で必要になります。 こういった背景により、きっちりとした要件定義や設計する能力を求められる SIer 的な要素と手を動かして早くサービスを改善するサイクルを回す能力が必要な Web 的な要素という、それぞれの得意領域をミックスしたエンジニアが求められているのではないかというお話をさせていただきました。 途中田中のキャリア変遷や、弊社の CLINICS を例に取り具体的にどのような能力を求められるのか?ということをお話させていただきました。 終了後のアンケートなど拝見する限り、やはり業界の括りに囚われがちなところも多いなか、キャリアパスの一つの実例として、ご好評をいただいたのは嬉しい限りでした。 まとめ メドレーのエンジニアやデザイナーは、きっちりと法令やガイドラインを守りつつ、その概念をプロダクトの設計に落しこみ、出来るだけ早く PDCA を回し、早く確実に実装することを目指しています。Developers Summit 2019 Summer のような多種多様なキャリアの方々が来場するイベントで、このようなお話をさせていただいたのはとても有意義だったと感じています。 セッションが無事終了し、ほっと一息付きながらメドレーロゴと一緒に ▼ メドレーってどんな会社？気になった方はこちら メドレーで働く | 株式会社メドレー メドレーの組織文化や募集要項をご紹介します www.medley.jp