オープンソースWebDBのプリザンター(pleasanter)ブログ

オープンソースのWebDBのプリザンター(pleasanter)のブログとサービス情報サイトです

株式会社リーデックスのオープンソースWebDB「プリザンター」ブログです。

スマホでプリザンターの業務アプリを開発するために(Pleasanter×Monaca:Monaca編)

こんにちは。
リーデックス小川です。

2019年9月8日の日曜日の夜に上陸した台風の影響で、月曜日は電車が全く動かず自宅で仕事をしていました。自宅の周りも大きい木が倒れたりしていましたが、大ごとは起きていなかったようです。直撃の台風の恐ろしさを知りました。

さて、今回は前回に引き続き9月5日に開催されたプリザンター×スマホアプリ講座 の内容をご紹介します。前回はプリザンター側を紹介いたしましたが、今回はMonacaの開発を行い、API経由でプリザンターのデータを取得する部分について記載したいと思います。

 

スマホ側(Monaca)のハンズオン

スマホアプリは、Monacaを利用して開発しました。リーデックスはMonacaの公式パートナーです。Monacaって何?という方は、こちらのページをご覧ください。

f:id:h-ogawa-reedex-co-jp:20190905192911p:plain

 

Monacaとプリザンターはとても相性がよいと思っています。両者とも、JavaScript、CSSで開発することができるため開発の親和性がとても高いです。Monacaはライブラリも充実しており、簡単なアプリであれば手間なく開発することが可能です。

 

Monacaは無料で開発環境を利用することができます。無料で登録を行い、簡単なサンプルアプリを作っていただきました。参加する方には簡単にカスタマイズできそうなイメージは持っていただけたと思います(バイブレーションも1行のJavaScriptで実行できます)。

f:id:h-ogawa-reedex-co-jp:20190905193320p:plain

f:id:h-ogawa-reedex-co-jp:20190905193351p:plain

 

いよいよプリザンターのAPI経由でデータを取得する

それでは、実際にプリザンターのAPI経由でデータを取得するして表示するAPIについて実装していきます。

f:id:h-ogawa-reedex-co-jp:20190905195918p:plain

 

今回は時間も限られていたので、弊社が用意したほぼ完成されているプログラムをMonacaに取り込んで、なん箇所かを修正してもらう形式にしました。

f:id:h-ogawa-reedex-co-jp:20190905194332p:plain

 

実際には、プリザンターで設定したAPIキーと顧客情報テーブル、商談テーブルのサイトIDを設定すれば動くようになっています。前回設定した上記情報をソースに埋め込んでいただき、下記のような画面を表示されるので、参加者の方に、顧客情報データのIDや商談テーブルのIDを入力してもらい、データが取得できることを確認いただきました。

f:id:h-ogawa-reedex-co-jp:20190905194924p:plain

f:id:h-ogawa-reedex-co-jp:20190905194944p:plain

f:id:h-ogawa-reedex-co-jp:20190905195005p:plain

 

そして、最後にIDを手入力していただいていたのですが、QRコードからIDを読み込んで情報を表示するデモを見ていただきました。実際に見ていただくと、手間なくデータを表示できることを体験いただけたと思います。

f:id:h-ogawa-reedex-co-jp:20190905195402p:plain

 

これにはすこし裏話があり、QRコードリーダーがMonaca無料版では利用できなくなった、ということでデモの形式をとらせていただいたのですが、実は利用できることが後からわかりました。ですので、講義では、QRコードリーダーが利用できるプログラムをMonacaに取り込んで実際に体感していただきました。もちろんソースコードはお持ち帰りいただきましたので、プリザンターとQRコードを利用したアプリを作っていただけるかもしれません。

 

まとめ

前回、今回の2回にわたり、弊社で開催したプリザンター×スマホアプリの講座について書いてみました。おそらく、2回目も開催すると思います。開催する場合は、このブログで告知いたしますので、ぜひ参加をしてみてください。

それでは、今回はこの辺で。
最後までご覧いただきありがとうございました。