盛り込んだ機能と使ったツールは次の通りです。多少記憶がすでに曖昧なので、間違っているものもあるかもしれません。
#メッセージ表示画面（ホーム）
励ましメッセージが120ほどJSON形式で記述されており、JavaScriptでOnsenUIで作ったレイアウトのCardにランダムに画面の起動ごとにピックアップされたメッセージが表示される仕組み。画面下のホームボタンを押したり、別の画面から戻ったりすることでもシャッフルされるようになっています。
- JavaScript
- JSON
ローカルノーティフィケーション機能
これが２番目に苦労した機能。外部のサーバーからお知らせとして送る形式をとると、オフラインで定期にお知らせを出すことができないことと、バックエンドのプログラミングが全くわからなかったのと、勉強しようにもフロントエンドほど情報がないため、アプリ内部からお知らせを表示させる必要があるとわかりました。
かといって自分でアプリを起動していないときにどうやってバナーを表示させるのかなど、スクリプトを組むことができず、困って調べまくってプラグインがあることを突き止め、それがmonacaで動くかなど調べ、cordovaのプラグインなら組み込めると踏んでこのプラグインを入れました。
素人の私にはデバッガを作ってフライトチェックをするのがまた一苦労でした。
できればユーザーが自分で気に入ったメッセージを選んだり、ランダムに数種類のメッセージを表示させる、時間の間隔を選んで設定するなどができればよかったのですが、当時の私には現状が精一杯でした。
- ローカルノーティフィケーション設定画面
- Cordova Plugin https://github.com/katzer/cordova-plugin-local-notifications
#SNS機能
これは、このアプリの中で一番苦労した機能です。
一度クラウドファンディングの公約したプロジェクト完了に間に合わないので諦めた機能でもあります。
バックエンドのプログラムの問題もあって、自分一人では到底無理だと思いました。
でも、Appleに機能が貧弱でこんなの認められないと却下されたため、これを頑張るしかないとクラウドファンディングのプロジェクト完了を2ヶ月延ばしてもらい、調べまくってWP REST APIを使えば、WordPressをバックエンドに仕立ててSNSを作れるんじゃないかと頑張った！
最初はフレームとして丸々WordPressを表示させる方式にしたら、それも却下されました。
問題はメンバーオンリーにすることで、そのシステムがWP REST APIに対応していないのではないかなどたくさんの調べごとと勉強も必要で、よく2ヶ月であそこまでできたと自画自賛しています。
Restlet Clientを使ってテストなどを行いました。
OAuthも使ってユーザーの個人情報が守られる仕組みも作りましたが、ライセンスが高いのでGoogleの広告費などと合わせると毎年赤字です。
- WordPress API
- OAuth
- jQuery
- Ajax
- 利用者制限: Ultimate Members
##SNS機能の各ページと機能
ユーザー登録、ログイン、タイムライン、投稿、削除、アカウント削除、投票ができるようにしました。
###ユーザー登録
登録画面でメールを送信、届いたメールからURLリンクに飛んでWordPressのUltimate Membersの登録画面へ行き登録する。
###ログイン画面
アプリ内からWP REST APIを使って行う。認証部分とユーザー名やなどをローカルストレージに保存させたりするのに苦労しました。
###タイムライン
画面の表示がトリガーとなってAjaxでリクエスト、取り込んだデータをjQueryで整形して投稿を投稿順にOnsenUIでList Itemとして流し込んでレイアウトする。
###投稿画面
アプリ内からWP REST APIを使って行う。140文字の制限にしたがって入力可能文字数のカウントが出る仕組み。
###管理画面
アプリ内から自分の投稿の削除できる。自分の投稿だけが一覧になる。投稿ごとに削除ボタンが付いている。
###投票機能
バックエンドとしてフニクラを使って、投票機能（いいね的なボタン）を追加。monacaのサンプルにあったものを流用しています。サッドボタンをタップすると発信。UUIDで識別して、投稿の番号ごとにカウントし、数値が表示される。サッドボタンはタップされるとハッピーボタンに変わる。自分のタップは色がグレーからピンクになる。
#読み物
月2回WordPressの投稿を更新しています。これがRSSリーダーでレイアウトされるページです。投票機能はmonacaのサンプルにあったものを利用しています。
- RSSリーダー
- Ajax, jQuery
- 一覧画面
- 投票機能
- バックエンド：フニクラ
アプリはこんな感じです。
購入してくださる方はこちらで是非！！！
https://itunes.apple.com/jp/app/pom-squad/id1299381222?mt=8
次回は全体のページ機能でやりたかったこととできなかったことをまとめます。