質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

2108閲覧

javascriptで制御した画像のレスポンシブ対応について

hikari-15

総合スコア11

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2016/07/14 12:40

編集2016/07/15 03:01

###前提・実現したいこと
初めて質問します。
当方初心者のwebデザイナーで、コードについてはHTMLとCSSがようやくわかってきた程度です。
恥ずかしながら勉強が追いついていない、javascriptについての質問をさせてください。

現在、HTML5とCSS3をメインにwebサイトを作っています。
画像をフラッシュのように動的に切り替える要望に応えるため、初めてjavascriptの
ライブラリ(transm.js)を使用しています。

つまづいているのは、このjavascriptで制御している画像のレスポンシブ対応です。

###発生している問題
ウィンドウ幅に画像サイズを合わせるため、ウィンドウ幅によってjsファイルを呼び変える
コードをどこに書けばいいのかを知りたいです。

自分なりにネット検索で調べたところ、画像サイズを指定しているjsファイルを2つ追加
(PC、タブレット、スマホで切り替える為)し、ウィンドウ幅に合わせて呼び替えるという
方法にたどり着きました。

スニペットも上げてくださっている方がおりましたので、以下の通り拝借したのですが、
これをどのファイルのどこに書き込めばいいのかがわかりません。。。

###該当のソースコード

<script type="text/javascript"> jQuery(document).ready(function($) { //PC環境の場合 if (window.matchMedia( '(min-width: 769px)' ).matches) { //切り替える画面サイズ $.ajax({ url: 'js/pc.js', //PC用の画像サイズが指定されたファイル dataType: 'script', cache: false }); //モバイル環境の場合 } else { $.ajax({ url: 'js/sp.js', //モバイル用の画像サイズが指定されたファイル dataType: 'script', cache: false }); }; }); </script> ``` ###試したこと 画像サイズが書かれたファイルはHTMLのhead内に記載することになっていたので、 同じ位置に書き込みました。 結果、画像が表示されるはずの位置が空白になりました。 ###補足情報(言語/FW/ツール等のバージョンなど) 勉強不足な上初めての質問で、要点が伝えられているか心配です。 社内に詳しい人がおらず、一人で頭を抱えている状況ですので、 アドバイスいただけますと非常に有難いです。。。 どうぞ宜しくお願い致します。 追記:モバイル用のコードです。 (かなり長いコードなので、サイズ指定しているあたりだけ記載します) プラグインは4つのjsファイルがあり、それぞれ 「どの画像を使うか」「defaultのサイズや時間の規定」「動き方の指定?(画像を切り替える動きが多数入っています)」「こちらも動き方?(buffer:1,mask:0,alpha:0などと言う記述)」 です。(よくわかっておりません。。) 以下コードは、そのうちの「defaultのサイズや時間の規定」の一部です。 defaultWidth:720,defaultHeight:270 を編集することで画像サイズが指定できたので、このファイルをPC用、タブレット用、スマホ用に作り、ウィンドウ幅によって読み替えられたら解決しそう!という発想です・・・。 画像そのものは、同一のものを縮小で使用できればと考えていますが、 必要であれば各サイズごとに作成します。 ```ここに言語を入力 var transm = { version : 1.2, released : '2010-08-10 12:00:00', defaultWidth:720,defaultHeight:270,defaultRadius:0,defaultName:null,defaultData:null,defaultCallback:null,defaultLayer:null,defaultAutoplay:0,defaultPingpong:0,default〜 ```

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/07/14 13:39 編集

コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。また、ライブラリは配布元を追記(URLはリンクに出来ます)ください。
hikari-15

2016/07/15 01:39

ご指摘と修正の仕方まで、教えてくださってありがとうございます。
kei344

2016/07/15 02:10

モバイル用のコードを提示いただけませんか?どのように画像を指定しているかが知りたいです。
hikari-15

2016/07/15 03:02

追記させていただきました!
guest

回答3

0

ベストアンサー

以下の点を確認してください。

1.jQuery本体は読み込んでいますか?
初心者とのことですので、もしやjQuery本体を読みこませずに実行コードだけ書いていたりしないか疑いました。
jQueryプラグインは、jQueryライブラリ本体が無ければそもそも動きませんので、必ずプラグインより前にjQueryライブラリ本体を読み込ませてください。

2.jQueryのバージョンと、プラグインが対応しているjQueryバージョンは合っていますか?
こちらのプラグインは制作されたのがやや古いようですので、ひょっとしたら最新バージョンのjQueryではうまく動作しない可能性があります。 jQuery本体のバージョンを、配布サイトのデモで使用しているものまで落として試してみてください。

3.どんなエラーが出ていますか?(Chromeのデバッグツール等で確認できます)
JSがうまく動かない時は、どんなエラーが出ているのか確認するのかが解決への第一歩です。
Chrome等に付属している開発者ツールの「console」にどんなエラーが出力されているのか確認しましょう。
その内容次第で、何が悪いのか分かる可能性が高まります。

投稿2016/07/15 01:49

aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hikari-15

2016/07/15 02:35

詳しく返信くださり、ありがとうございます。 >1.jQuery本体は読み込んでいますか? プラグイン(transm.js)はjQueryを利用していないのですが、同じページに別のjQueryプラグイン(lightbox_plus.js)を使用しているため、読み込んでおり、こちらのプラグインは動いています。 >2.jQueryのバージョンと、プラグインが対応しているjQueryバージョンは合っていますか? 上記のことから、これは大丈夫そうです。 >3.どんなエラーが出ていますか?(Chromeのデバッグツール等で確認できます) エラーは出ていません。う〜ん。。 jQueryの読み込ませる位置やエラーの確認方法など、よくわかっていないところに気付けました。 ありがとうございます。
aKusano

2016/07/15 02:42

そうですか。では、JSで取得している画像のパス、もしくは切替で呼び出しているJSファイルそのもののパスが正しく設定できていない可能性もありますね。そのあたりもチェックしてみてはいかがでしょうか? あと、もしどうしても分からなかったら最初からレスポンシブ対応を謳っているプラグインに差し替えてしまうという手もあります。お望みの挙動を実現するプラグインが他にあるかどうかは探してみないと分かりませんが…。
aKusano

2016/07/15 02:45

あ! あと、ajaxでファイルを呼び出しているみたいですが、確かChromeだとローカルではajax動かないはずなので、一旦サーバにUPして表示確認してみた方がよいかもしれません。
hikari-15

2016/07/15 04:16

ご返信ありがとうございます。 >確かChromeだとローカルではajax動かないはず これかもしれません!こんな落とし穴があったとは・・・ 確認してみます。
hikari-15

2016/07/15 05:32

確認しました。 ajaxで呼び出すところまではできました! (結局、jQueryのバージョンは間違っていたので修正しました。) 切り替えができないので、まだ検証を続けます。
guest

0

そこまで複雑な仕様でなく、ただ解像度によって画像を切りかえるだけであれば、
今急いで書いたコードなのであまり綺麗ではありませんが、
下記でご対応いただけます。

html

1<script> 2 $(function () { 3 var SP_WIDTH = 769; 4 var $window = $(window); 5 var isSp = false; 6 7 var initResponsiveSrc = function () { 8 var $images = $('img[spsrc]'); 9 10 $images.each(function () { 11 var $targetImage = $(this); 12 var pcSrc = $targetImage.attr('src'); 13 14 $targetImage.attr('pcsrc', pcSrc); 15 }); 16 }; 17 18 var changeImagesForResponsive = function (isSpTemp) { 19 var $images = $('img[spsrc]'); 20 isSp = isSpTemp; 21 22 $images.each(function () { 23 var $targetImage = $(this); 24 25 $targetImage.attr('src', 26 isSp 27 ? $targetImage.attr('spsrc') 28 : $targetImage.attr('pcsrc') 29 ); 30 }); 31 }; 32 33 var checkScreenWidth = function () { 34 if ($window.width() > SP_WIDTH && isSp) { 35 changeImagesForResponsive(false); 36 } else if ($window.width() <= SP_WIDTH && !isSp) { 37 changeImagesForResponsive(true); 38 } 39 }; 40 41 initResponsiveSrc(); 42 checkScreenWidth(); 43 44 $window.on('resize orientationchange', function () { 45 checkScreenWidth(); 46 }); 47 }); 48</script>

以上を</body>の直前に入れていただければ、

html

1<img src="http://dummyimage.com/640x300/333/fff.png" spsrc="http://dummyimage.com/300x300/333/fff.png" alt="">

srcとspsrcを設定して出し分けることができます。
よければ使ってみてください :)


内容としては、ウィンドウのリサイズもしくは端末の縦横切り替え時に
画面サイズを取得して、そのサイズ如何でどちらのsrc属性を適用するか決めています。

投稿2016/07/14 20:40

編集2016/07/14 20:42
thrbrd

総合スコア43

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hikari-15

2016/07/15 01:45

わざわざコードを書いてくださって、本当にありがとうございます。 ただ、コピーして試させていただいたのですが、ウィンドウ幅を変えても画像が切り替わりませんでした。。私の方で何か間違えたのかもしれません。 >srcとspsrcを設定して出し分けることができます。 こちらが解決のヒントになりそうです! また検証してみます。ありがとうございました。
guest

0

jsでサイズを切り替えなくても、transm.js を適用させている要素と内包している canvas を引き伸ばせばレスポンシブになりませんか?下記は transm.js での例です。

CSS

1#transmit, 2#transmit > canvas { 3 height: auto !important; 4 width: 100% !important; 5}

投稿2016/07/15 05:38

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hikari-15

2016/07/15 06:29

アドバイスありがとうございます。 この方法が最もスマートに感じます! canvas・・・使ったことがないのですが、調べてみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問