backendに載せ替える(その3:写真アップロード)2018年10月23日NCMBエバンジェリストTwitterFacebookはてブPocketLINEMonacaのサンプルアプリである「フォトシェアアプリデザインテンプレート」にバックエンド機能を実装する連載の第3回目。前回のプロフィール編集に続いて、今回は写真アップロード機能を作ります。その1:認証編その2:プロフィール編集ライブラリのインストール今回はJavaScriptライブラリとして以下を利用します。IDEのJS/CSSコンポーネントの追加と削除から追加してください。mustache.js(JSテンプレートエンジン)exif-js(EXIF情報を取得するJSライブラリ)timeago.js(経過時間を表示するJSライブラリ)カメラ画面への遷移を作るカメラで撮影を行う画面(camera.html)を修正します。写真を選択した時に、その画像のプレビューを表示したいのでプレビュー用のCanvasタグを用意します。style="display:none;width:100%;height:100%;"></canvas>さらに画像データや位置情報を保持するためのタグを用意しておきます。標準のファイル選択ボタンが表示されてしまいますので、スタイルシートで消しておきます。0;}これでUIは完成です。カメラ画面のイベントを作るまずカメラ画面を表示したタイミングで処理を行います。イベントを設定します。{showCameraPage($(page));}});ここでは画面の入力要素の初期化と、ファイル選択時のイベントを設定します。e.target.result;};fr.readAsDataURL(file);});}写真のプレビュー処理について写真を選択した際には、画像を読み込んでCanvasタグに表示します。その際、写真から位置情報と写真の向きを取得します。iPhoneで撮影した写真をそのまま表示すると上下反転することがありますので、向き情報であるOrientationの取得が必要となります。orientation});});})}画像と向き情報を取得したら、Canvasに描画します。向き(Orientation)によってCanvas内の画像を回転させます。height);};さらに位置情報を基に住所を文字列で取得します。APIを使っています。位置情報から住所情報を返してくれるAPIですが、認証不要で使えるので手軽です。{res(results);});});}写真のアップロード処理プレビュー表示したら、3秒あけてアップロードして良いか確認します。以下の処理はちょっと長いのですが、写真のアップロード処理を行った後、アップロードした写真のURLとメッセージをデータベースへ保存する処理です。保存処理がうまくいったら、ホーム画面に戻ります。Canvasタグに入っている写真データを取り出す関数です。Canvasの内容からBlobを生成しています。backendのアプリ設定画面で「データ・ファイルストア」の「HTTPSでの取得」を有効に設定する必要があります。タイムラインを表示する写真を投稿したら、タイムラインの写真一覧を更新します。初期表示の時点で写真一覧が表示されるようにします。元々の写真一覧画面(home.html)をベースに、mustache.jsのテンプレート形式に変更します。実際の内容はhome.htmlを参照してもらうとして、ここではテンプレート部分を掲載します。class="post-comments">{{{messages}}}</div></ons-card></template>変数をプロキシとして作る写真の一覧を更新する処理にはProxyを利用します。写真を配列で保管している変数をプロキシにして、その変数が更新されたらタイムラインをアップデートする仕組みにします。これは最近のReactやVueなどのVirtualDOMで使われている仕組みと同じです。実行されてタイムライン表示が更新される仕組みです。value;updateTimeline(target);}}});ここまでで、写真の投稿とタイムラインの更新処理が完成しました。写真などのバイナリデータはファイルストアに保存し、そのURLを別途保存しておくとバイナリデータへのアクセス回数も少なく済み、位置情報などのメタ情報をデータベースで管理できるようになります。v0.3にアップロードしてあります(前回のプロフィール編集機能も含まれています)。実装時の参考にしてください。backendに載せ替える(その4:写真検索)関連記事2016年4月20日MonacaアプリでSQLiteを使ってみる2017年1月30日WebVRがHTMLタグだけでできるA-FrameをM...2018年4月27日アプリを広めるための大事な施策。