no-image

monacaで「ご意見箱」を無料で作る

ただいまmonacaでアプリを作っていますが、ユーザーのフィードバックを得るための一つの手段として、「ご意見箱ページ」を作ってみることにしました。
「ご意見箱」は要するに「お問い合わせフォーム」のことですが、僕のお気に入りのプログラミング学習サービス「Progate」が「ご意見箱」という名前でお問い合わせフォームを設置しているので参考にしてみました。

 

そんなことはどうでもいいのですが、これを設置するのは結構大変でした。

 

まずmonacaのバックエンドAPIに「メーラー」という機能があります。
メーラー – Monaca Docs

 

しかしこれは、開発者からユーザーに向けてメールを送るための機能です。
例えば、ユーザーがID作成などをした時に「本人確認メール」を送るように、予めテンプレートを作っておいて、決まったタイミングで送信できるものです。

 

なので、望んでいるものとベクトルが逆なのです。

 

逆向きのものを探しているとこんなものもありました。
イヌでもわかるJavaScript講座 – メール送信
これでも確かにメールは送れるのですが、わざわざ外部のメールアプリを立ち上げて(ない場合はアプリダウンロードページに飛ぶ)、送信することになります。
これはクールじゃないなと思ったので、ひとまずこの案は却下にしました。

 

というわけで、もっと探してみました。
するとこんな記事を見つけました。
ニフティクラウドmobile backendを使ってスマホアプリからメールを送信する方法 | SendGridブログ
ニフティクラウドmobile backendというのはmonacaと連携できるサービスの一つですが、これとさらに「SendGrid」というサービスを連携させれば、実現しそうです。

 

無料でできるっぽいので申し込んでみました。
すると(GWだったので)何日かしてメールが返ってきて、規則などについてやり取りした後、無事に登録できました。

 

上記のページの流れに従って、mobile backendにスクリプトをアップロードするところまではスムーズに行ったのですが、
「Androidアプリの実装」という見出しで書かれているmonaca側のコードはjavaでした。
僕はjavaが読めないので、javaのコードをjavascriptに変換してくれるっぽいWebサービスを探してみたり、しましたが使い方がよくわからなかったのでやめました。(怠惰に怠惰が重なった。)
JSweet

 

あとは、SendGridに問い合わせて「javascriptのコードあったら見せて!」とお願いしたのですが、残念ながらなかったみたいです。

 

結局、以下のmobile backendのスクリプトの使い方のjavaとjavascriptのコードを見比べて格闘してみました。
スクリプト (JavaScript) : 基本的な使い方 | ニフティクラウド mobile backend
スクリプト (Android) : 基本的な使い方 | ニフティクラウド mobile backend

 

で、できたのがこんな感じです。

 

ユーザーに名前とアドレスと、問い合わせの種類、その内容を記入してもらい、その後「submit」してもらいます。

 

mobile backend にアップロードするスクリプト文。「sendmail.js」

 

実際に送ってみます。

 

上手く行った時のアラートが表示されます。「success」だとユーザーはよくわからないと思うのでリリースするときは内容を変えましょう。

 

上手く届いてます。

 

以上こんな感じです。
javaが読めなかったので気持ちの面で大分面倒に思ったのですが、一つ一つ検索して解読していくと意外と理解できました。
コロンブスの卵みたいなもので実際に解決への鍵はそこにはなかったんですがね。

 

これを実装するだけでも何日かかかってしまいました。
確かに、「いま、この機能必要か?」と言われたら答えに詰まるのですが、乗りかかった船のようなものでついつい長引いてしまいました。
上手く行って何よりです。

 

以上、ただの苦労話と備忘録でした。