kobasaです(´ω`*)最終課題に追加機能を実装をしていきます。
カリキュラムの内容全部やってるとオリジナルアプリの時間がなくなってしまいそうなので、
自分が試してみたい機能に絞って実装してみます。
まずは出品時と編集時に選択した画像を表示する機能から。
110日目の勉強内容
プレビュー機能はJavaScriptを使用して実装していきます。
まずはプレビュー機能だけに絞ったミニアプリを使用して学習。
ページが読み込まれたときのイベント発火について
window.addEventListener('load', function(){});
document.addEventListener('DOMContentLoaded', function(){});
今まではイベント発火に上のloadを使用していたが、今回は下のDOMContentLoadedを使用。
DOMContentLoadedの方はDOMツリーの構造が読込完了した時点で発火するので早く動くらしい。
画像に関する処理を行わない限りはこちらの方が良いらしいが、読込エラーがでたときは疑った方がいいのかな?
そしてメソッドを適用する相手がdocumentに変わることに注意。
選択されたファイルを読み込む処理
document.getElementById('message_image').addEventListener('change', function(e){});
htmlのform要素の画像選択部分のidを取得し、内容が変化したら(画像が選択されたら)イベントが発火する仕組みになっている。
const file = e.target.files[0];
const blob = window.URL.createObjectURL(file);
選択した画像は発火したイベントeの中のtargetの中のfilesという配列に格納されている。
この画像の情報はe.target.files[0]として、発火したEventハッシュに格納されているオブジェクトから取得して変数fileに格納している。
複数の画像を保存する場合は記述が変わりそう。
window.URL.createObjectURLメソッドは引数に指定した画像情報のURLを作成するメソッド。
このメソッドを使用して先ほど取得した画像のURLを作成している。
選択した画像を表示する処理
const imageElement = document.createElement('div');
const blobImage = document.createElement('img');
blobImage.setAttribute('src', blob);
createElementメソッドは引数に指定したHTML要素を生成する。要素なのでタグは不要。
画像を表示するためにdivとimg要素を生成。またimg要素に取得した画像URLを値としたsrc属性を付与。
imageElement.appendChild(blobImage);
//<div><img src='画像URL'></div>
ImageList.appendChild(imageElement);
//_form.html.erbの<div id="image-list">上記の内容</div>
appendChild()メソッドは、指定した親要素の中に要素を追加するメソッド。
親.appendChild(追加したい要素)
これでWeb上に画像を表示できる。
その他
既にプレビュー画像が表示されている場合はそちらを削除して最新のプレビューを表示する処理。
//('change', function(e))の直下に記述
const imageContent = document.querySelector('img');
if (imageContent){
imageContent.remove();
}
ブラウザ上からimg要素を取得して変数に格納。要素がある場合はremoveする。
querySelectorは一番最初に見つかった要素を取得するため追加実装時には他の記述が必要になりそう。
出品時のプレビューを変更したいときと、編集時の既に画像が表示されている状態両方に適用したいのでクラス指定になるのかな?
この後「選択した画像を表示する処理」を関数化するんですが、
関数式による定義は先に記述して読み込ませて、
後から呼び出すという順番でないとエラーになるんですね。すっかり忘れてたw
rubyのdef~endで作成するメソッドも同じっぽい。ヤベェ(´・ω・`)
コメント