JavaScript: DOMを活用しよう

読み込んだ画像のサイズを動的に変える

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
画像の読み込みを待ったうえで、サイズを動的に調整します。
講師:
08:14

字幕

このレッスンでは画像の読み込みを待った上でそのサイズを動的に調整してみたいと思います。練習用のページなんですがホームページではなくて「 ARTISTS 」というページで作業を行います。ここにはすでに画像の読み込みの作業はしてあります。画像をクリックすると大きい画像は読み込まれます。けどウィンドウが食み出してしまっているのでウィンドウに収まるように画像を調整してみたいと思います。画像は縦長のものから横長のものと横に長いのかよく分からないですね。この辺りでしょうか。いくつかの種類がありますのでそれに合わせてウィンドウのサイズに合わせて画像をそれぞれサイズ調整してみたいと思います。Dreamweaver で HTML ドキュメントを開きました。今の構造の組み立てなんですけれども画像を含んでいる ul 要素のノードに対してaddEventListener でクリアイベントが起こったら行う処理というのが定義されています。そしてその中でイベントオブジェクト引数のtarget を変数に取った上でtagName を調べています。何をしているかというとクリックしたのがimg 要素かどうかli 要素ということもあり得るので画像であったら img であったら処理を行うということになっています。 そして具体的には div 要素を作ってそれをドキュメントのボディに加え、これが背景になります。そして今度は img 要素を作っています。そしてそれを div 要素の方に加えています。大きい画像のパスはこの target ですね。target の src でクリックした画像のパスが取れます。それに基づいて大きい画像のパスを作って動的に作った img 要素の srcのプロパティに加えているというそういう仕組みです。では読み込んだ画像のサイズ、これは読み込まないと分からないですね。ですから読み込み待ちの処理というのが必要になります。改行を加えまして、画像の読み込みはこの変数「 largeImage 」で捉えます。addEventListener のメソッドで読み込み待ちのイベントは「 load 」になります。そして load で function を設定します。load が終わってサイズ調整が終わった所でdiv 要素に追加するという形にしますのでこの appendChild は Listener 関数の中に入れます。Listener 関数はイベントオブジェクトを受け取るんですが今回はとくに使わないのでこのままほっておきます。 ではサイズをどうやって調べるかということなんですが読み込み待ちをしてますね。読み込み終わってらそこでサイズが分かりますのでちょっと「 console.log 」で調べてみましょう。「 largeImage 」これは読み込まれた、画像を読み込んだimg 要素ですね。その幅と同じくコピーを持ってきて「 .height 」ということで幅と高さが分かります。addEventListener メソッドの丸かっこ閉じが入ってないですね。丸かっこ閉じ、セミコロンということで、保存をして確認してみましょう。Google Chrome をリロードしてデベロッパーツールを表示しましょう。画像を少し右にスクロールしておきます。そして画像1つをクリックしてみます。コンソールの方をご覧下さい。サイズが出てきますね。またちょっと違う画像を横長の画像です。画像のサイズが取れたということが分かりますね。Dreamweaver に戻りまして余分のコンソールのステートメントは削除してまず幅から調整しましょう。もし幅や高さがウィンドウよりも大きい場合はみ出る場合には比率を計算してその比率で縮小します。「 ratio 」としておきましょう。これは比率です。 そしてまず幅からいきますけれども、もし「 largeImage 」ですね、読み込んだ img 要素です。その幅がウィンドウの innerWidth よりも大きかったらratio の値を計算します。これはコピーを持ってきて小さい方を大きい方で割り算します。コピーを持ってきまして割り算ですね。実際のイメージの方が大きいですからそして大きいイメージの幅をもう一度大きいイメージの幅かけることの比率ですね。同様に大きいイメージの幅の方は「 .height 」ですね。そしてこの「 height 」の値をコピーして持ってきて同じく ratio をかけるという風にすれば良いでしょう。これでいったん保存します。Chrome をリロードして、横長のやつですね、試しましょう。ちゃんと下がこう出てますので縮んだということが分かりますね。これも横長です。大丈夫ですね。では高さの方も同じ様に変更しましょう。Dreamweaver に戻りまして if 文の構造はもう同じですね。幅が高さになるだけです。if でコピーを取っちゃいましょう。高さが「 window.innerHeight 」高さですから。そして{}ratio は「 window.innerHeight 」小っちゃいほうを大きいほうで割れます。 イメージの height ですね。そしてここは同じになりますのでコピーしてペーストしてしまいましょう。では保存して確かめます。Chrome をリロードして、今度は縦長の中心にクリックして見ます。ちゃんと収まっていますね。リロードでこれも縦長、もう一つぐらい。念の為横長やつもどこにも問題ありません。このレッスンでは画像の読み込みを待って上でそのサイズを調整する方法についてご説明しました。その場合はその読み込む img 要素に対してload の addEventListener ですね。load 待ちをします。その上で実際の img の要素とウィンドウの幅と高さを比べて比率を考えて掛け算をして調整したということです。

JavaScript: DOMを活用しよう

DOM(Document Object Model)はHTMLの中の要素とそのツリー構造を扱うための仕組みです。このコースではJavaScriptの基礎を学んだ方を対象に、DOMの基本的な操作方法について解説します。具体的にはDOMの要素やノードの調べ方、要素の属性の変更、ノードの追加方法などについて説明し、実際にインタラクティブに対応するページを作ります。

3時間24分 (33 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2016年03月13日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。