SNSNCMBエバンジェリストMonacaのサンプルアプリとして、Instagram風の「フォトシェアアプリデザインテンプレート」が登場しました。洗練されたデザインと滑らかなアニメーションが印象的です。このアプリはあくまでテンプレートなので、データはすべてアプリ内部にあるものを参照しています。実際にSNSアプリを開発する際にはサーバサイドの機能が必要になります。写真系SNSの場合は次のような機能がいるでしょう。写真アップロードコメント/ハートプロフィールフォロー/フォロワーこれらの機能がバックエンドに存在することで、他のユーザと写真を共有したり、お互いをフォローすることができます。すべての機能を自作しても良いのですが、バックエンド機能を一括で提供する専用のクラウドサービスも存在します。backendもその一つです。今回から数回に分けて、このフォトシェアアプリにバックエンド機能を実装してみたいと思います。最初は、認証処理を実装します。UIで作られています。UIでは一つのHTMLの中にテンプレートを定義して開発できます。フォトシェアアプリについてもindex.htmlだけですべての処理を行っています。このままでは開発生産性においてコードの見通しが悪くなりそうです。そこでテンプレートを切り出して、別のHTMLファイルにしていきます。タグに書かれているidでHTMLファイルにします。以下の内容をすべて移動します。今回のフォトシェアアプリについては以下のファイル群になりました。camera.htmlfollowing-notifications.htmlhome.htmlnotification.htmlprofile.htmlsearch.htmlyour-notification.htmlタブバーの内容を分けるログイン後に表示されるべきタブバーが認証画面に表示されているのは違和感があります。いうファイルに移します(main.htmlは新規作成します)。page="main.html"></ons-navigator>こうすることで初期表示は変わりませんが、タブバーがある画面とない画面(これから作ります)を分けやすくなります。未ログイン状態でアプリを開いた際、最初に表示されるのが登録/ログインページです。ページ内容は次のようになります。ユーザ名とパスワードの入力欄があるだけの画面です。関数を呼びます(これから作ります)。scriptタグ内にあった内容をすべて移します。内に次のように記述してファイルを読み込みます。追加と初期化を行います。ここから登録できます。ユーザ登録はGoogleやFacebook、Twitterなどのソーシャルアカウントで可能です。登録するとアプリケーションキーとクライアントキーという二つのキーを取得できます。SDKを使う場合は、設定メニューの「JS/CSSコンポーネントの追加と削除」を選択します。backendの略です)と入力して検索ボタンを押してください。バージョンはデフォルトのままでインストールを開始し、「ncmb.min.js」にチェックを入れて完了してください。app.jsの1~3行目に次のように記述してください。前述のユーザ登録後に表示されるキーに書き換えてください。以下に示すアプリケーションIDに書き換えてください。後ろに続けて表示される英数字です。backendの初期化が完了です。認証チェック認証チェックは次のように行います。呼び出して、返却されたデータが空であれば未ログイン状態であるということになります。未ログイン}これを使って、初期表示の際に認証状態をチェックします。処理を以下のように書き換えます。使って登録/ログイン画面に遷移します。ここでは簡略化して次のように処理します。入力された情報(ユーザID、パスワード)でユーザ登録を実行1.に成功したら、自動でログイン処理を実行。成功したらメイン画面に遷移1.に失敗したら、既にユーザ登録済みの可能性があるのでログイン処理を実行。成功したらメイン画面に遷移すべての処理に失敗したらエラーこのように、新規登録とログイン処理を兼ねた処理を行うことにします。ログイン処理になります。今回はユーザプロフィール画面でログアウトできるようにします。右上はギアアイコンでしたが、今回はここをログアウトアイコンに変更します。関数内で行っています。ログアウトを実行します。});};ここまでの処理で認証処理が完成しました。backendを使うと既存のアプリに対しても簡単にサーバサイドの処理が実装できるのが分かるかと思います。v0.1にアップロードしてあります。実装時の参考にしてください。その4:リアル...Monaca新機能第三弾。(JavaScript基礎構文)iOS16から導入された「デベロッパモード」についてhtmx:JavaScriptなしでサーバーとの通信を実現する見やすい、メンテナンスしやすいJavaScriptのために。