App Makerとは何か、またその超簡単なアプリケーション開発のイメージをお伝えします


app-maker

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

App Makerはご存知ですか?

Googleが提供をするとっても簡単にWebアプリケーションを開発することができるプラットフォームです。

ドラッグ&ドロップなどの操作で、Web上にフォームやテーブルなどのインターフェースを作り、データベースを作り、Webアプリケーションとして公開することができるのです。

私はこのサービスが、非エンジニア職のビジネスマンにとってITスキルを磨く超ステキなきっかけの一つになるだろうとメチャメチャ期待をしています。

現在は、G Suite Business以上のユーザー向けのアーリーアクセスプログラム(申請ベースで利用が可能になる)での提供ですが、そろそろ正式にリリースがされるだろうということで、当ブログでもガッツリ紹介をしていきます。

まず、今回ですが、App Makerとは何か、またその超簡単なアプリケーション開発のイメージについてお話します。

App Makerとは

App Makerとは、コードをほとんど使わずにWebアプリケーションを開発できるプラットフォームです。

Webアプリケーション?そんなに難しそうなの、必要ないよ。って思うかも知れませんが

  • 定型メール送信アプリ
  • 備品管理アプリ
  • 顧客名簿アプリ
  • ダッシュボードアプリ
  • ワークフローアプリ
  • 議事録テンプレ作成アプリ
  • カレンダー工数計算アプリ

などといった、ちょっとした業務アプリをサクっと作れるようになるわけです。

あ、それなら作りたい!と、なりますでしょ?

なお、App MakerのベースはGoogle Apps Scriptです。

ですから、GASであずかれていた恩恵にプラス新たな機能が追加されたということになるわけです。

HTML&CSS・データベース構築の知識が不要

というか、もともとGASもWebアプリケーションを作ることはできました。

Google Apps ScriptでWebアプリケーションを作る最初の一歩
初心者向けにGoogle Apps ScriptによるWebアプリケーションの作り方を解説していきます。まずは、最初の一歩して静的なWebページを表示するWebアプリケーションを作成していきます。

ただし、ユーザーインターフェースを作るにはHTMLやCSSのスキルが必要でしたし、ページにスクリプトを埋め込むにも独特の書き方が必要でした。

また、データベースもスプレッドシートを代替として使用するのが一般的でしたが、ユーザーの操作による干渉を受けやすいという弱点がありました。

じゃあ、データベースをどこかでこさえようと思っても、ちょっとしたツールには向かないほど、一気に技術的なハードルが高くなってしまいます。

App Makerは、そこを補完するものとして

  • ドラッグ&ドロップでページとUIを簡単に作れる
  • ちゃんとしたデータベースも簡単に作れる

を追加したものと位置づけすることができます。

Googleサービスとの連携

App MakerはベースはGASですから、様々なGoogleサービスとガッツリ連携ができます。

例えば

  • スプレッドシート
  • ドキュメント
  • ドライブ
  • Gmail
  • カレンダー
  • 翻訳
  • etc.

などのサービスです。

これらのサービスに対してGASと同じようにスクリプトを作成して操作をすることができます。

つまり、App Makerで作成したアプリからGmailを飛ばしたり、スプレッドシートやカレンダーの情報をApp Makerで取り出したり、ドキュメントを作成したり…といったことが可能になります。

無料で強固なサーバーに設置できる

G Suite Business以上のユーザーであれば追加料金なしで利用をすることができます。

また、Webアプリケーション作成には通常であれば、WebやDBなどのサーバーが必要で、色々な設定をしなくてはいけないのですが、App Makerではサーバーの準備は全く不要

ブラウザとインターネット環境さえあれば、すぐにでもアプリケーション開発に着手することができます。

しかも、そのサーバーはGoogle提供のものですから、セキュリティ的にも非常に強固なわけです。

App Makerでのアプリケーションの作り方

ざっくりいうと、Webアプリケーションにはページとデータベースの作成が必要です。

App Makerは、その両方をドラッグ&ドロップや簡単な入力・選択などの操作で両方ともパパっと作って連携、アプリケーションとして公開することができます。

ページ作成のイメージ

例えば、App Makerでページを作る画面はこんなこんな感じ。

App Makerでページを作成する

左側の「Widgets」に並んでいるウィジェットの中から、フォーム、テーブル、ボタン、テキストボックス、ラベル、チェックボックス…といったパーツをドラッグ&ドロップして配置していきます。

そして、右側の「Property Editor」というエリアで、サイズや文字、機能についての設定をしたりしなかったりします。

データベース作成のイメージ

もう一つ、App Makerでデータベースを作る画面はこんな感じです。

App Makerでデータベースを作成する

超シンプル画面ですよね。

フィールド(いわゆる項目ですね)の名前や種類を選択していくことで、ものの数分でデータベースを作ることができます。

スクリプトを仕込んでアプリケーションを拡張する

ページとデータベースの作成はとっても簡単です。ノンプログラムでいけます。

ですが、アプリケーションとして、ブラウザ上でのアクションに対してアプリケーションを動作をさせたり、Googleサービスとの連携をしたり、色々な処理を実現したくなります。

そこで、App Makerでは、アプリケーションのあちこちに色んなスクリプトを仕込むことができます。

例えば、以下の図は「テーブルのフィールド名をクリックしたら、テーブルの内容を並び替えしてね」というような内容のスクリプトを仕込んでいるところです。

App Makerでアクションにスクリプトを仕込む

これは、ページ作成画面のPropety Editorで、パーツへのアクションに対してスクリプトの登録をしていくという作業ですね。

また、以下のようにガッツリとスクリプトを仕込むための画面もあります。

App Makerでサーバースクリプトを仕込む

ガッツリといっても、この例は受け取った引数をもとに、メールを送るだけですけどね。

このように、ユーザーのブラウザ上で動くクライアントスクリプト、サーバー側で動くサーバースクリプトの両方を連携させながら仕込んでいくことができます。

クライアントとかサーバーとか仕込むところいっぱいあるので、わけがわからなくなりがちですが、順を追って学んでいけば大丈夫です。

まとめ

以上、App Makerとは何か、またそのアプリケーション開発のイメージについてお伝えしました。

最初、App Maker→Google Apps Scriptという順番で学ぶのが良いかなと思ったのですが、今のところ「同時進行」で学んでいくのが良いかなと思っています。

App MakerとGoogle Apps Scriptがアプリケーション開発の民主化を加速する
アプリケーション開発は非IT職からすると遠い存在でした。しかし、Google Apps ScriptとApp Makerがその「民主化」を加速させていることについてGoogle Cloud Next Tokyoからレポートします。

もちろん、ノンプログラムでもできることはあるのですが、おそらく、というか間違いなく、作成したアプリーションのカスタマイズをしたくなると思います。

その時には、GASの知識が必要になりますし、色々な場所にスクリプトを仕込む必要がある分、App Makerのほうが少し難易度が高いようにも思います。(そのあたりは、当ブログでも順を追って丁寧に解説をしていきたいと思います。)

いずれにしても、HTML&CSSとデータベースをすっ飛ばしてWebアプリケーションを作れるのは、画期的ですし、劇的なハードルの低減になります。

App Maker。ぜひ、活用する人が増えていってほしいものです。

次に読むなら、以下の記事からはじまるチュートリアルがおすすめですよ~。

超初心者向けApp Makerでとっても簡単な初めてのWebアプリケーションを作ってみよう
Googleが提供するWebアプリケーションを簡単に開発できるプラットフォーム「App Maker」。今回はアラートを表示するだけの簡単なアプリ作成を通して、App Makerの操作感やページ作成の流れをつかみます。

連載目次:はじめてのApp Maker~初心者向けチュートリアル~

Googleが提供するWebアプリケーション開発プラットフォーム「App Maker」。ドラッグ&ドロップやクリック操作でページやデータベースを作成できます。この連載は、App Makerの操作感やアプリの作成イメージをつけていただくための、App Maker初心者向けのチュートリアルです。
  1. 超初心者向けApp Makerでとっても簡単な初めてのWebアプリケーションを作ってみよう
  2. 【初心者向けApp Maker】作成したアプリを開いてカスタマイズをしてみよう
  3. 【App Maker】アラート表示を例にスクリプトの最初の一歩について解説します
  4. App Makerでウィジェットの文字列を変更するスクリプトを解説します

  投稿者プロフィール

タカハシノリアキ株式会社プランノーツ 代表取締役
株式会社プランノーツ代表、コミュニティ「ノンプロ研」主宰。1976年こどもの日生まれ。東京板橋区在住。「ITで日本の『働く』の価値を上げる!」をテーマに、VBA&GASの開発、講師、執筆などをしております。→詳しいプロフィールはコチラ
★ご依頼・ご相談はお気軽にどうぞ!→お問い合わせはコチラ
★フォロー頂ければ嬉しいです。

コメント