背景

迷子猫捜索アプリを作りたい
入力フォームとデータ取得APIを用意したい
→ GoogleFormとGoogleSpreadSheetとGoogleAppsScriptで、フォームとDBとデータ取得APIを作成する
今ある知識（Web系）でアプリを作りたい

ハイブリッドアプリを作れるMonacaを試してみる

実装

アカウントを作成し、サンプルプロジェクトを立ち上げる
一部のソースを改修する

入力フォーム

index.html

<body>

    <h1>猫の手</h1>
    <a class="button--large" href="https://docs.google.com/forms/d/e/your form id/viewform"">迷子猫を登録する</a>
    <p></p>
    <a class="button--large" href="demo.html">見つける</a>
</body>

クラウドIDEでのエミュレータ画面

フォームに飛ぶことが出来ました。

ただし、この方法では画面が遷移してしまうため、元のアプリに戻る必要があります。
スマホのブラウザバックで戻ることはできますが、回答完了後に自動遷移でアプリに戻るなどは難しいかもしれません。

データ取得API

demo.html

  <body onload="init();" id="stage" class="theme">

    <h1>猫の手</h1>
    <a href="#" class="btn large" onclick="getLocation();">現在地付近で迷子の猫を探す</a>
    <a href="https://script.googleusercontent.com/macros/echo?user_content_key=your gas id" class="btn large">迷子の猫を探す</a>
    <a href="#" class="btn large" onclick="get_cats();">猫データを取得する</a>
    <a href="#" class="btn large" onclick="show_pic();">見つけた猫の写真を撮る</a>
    <div id="viewport" class="viewport" style="display: none;">
      <img style="width:60px;height:60px" id="test_img" src="" />
    </div>
    <div id="table">default
    </div>
  </body>

クラウドIDEでのエミュレータ画面

403エラーになりました

ビルドして実機に入れると動作しました

JSONデータとしてデータだけ受け取る場合は、クロスオリジン制約に引っかかります。
これを越えるためにはcordova-plugin-advanced-httpが必要そう。

カスタムプラグイン機能はProプラン以上でないと使えないので、別の方法を考える必要があります。

まとめ

MonacaでGAS APIと連携はできたものの、実際に扱うには有償プランが必要
無料でアプリを作るために、別の手段を検討中（Flutterなど）

MonacaをGASで作ったAPIと連携させる

背景

実装

入力フォーム

データ取得API

まとめ