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

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

ただいまの
回答率

90.51%

  • JavaScript

    20355questions

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

  • jQuery

    8141questions

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

  • HTML5

    5116questions

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

  • CSS3

    2621questions

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

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 940

hikari-15

score 3

前提・実現したいこと

初めて質問します。
当方初心者の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
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/07/14 22:38 編集

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

    キャンセル

  • hikari-15

    2016/07/15 10:39

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

    キャンセル

  • kei344

    2016/07/15 11:10

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

    キャンセル

  • hikari-15

    2016/07/15 12:02

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

    キャンセル

回答 3

checkベストアンサー

+1

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/07/15 11:35

    詳しく返信くださり、ありがとうございます。

    >1.jQuery本体は読み込んでいますか?
    プラグイン(transm.js)はjQueryを利用していないのですが、同じページに別のjQueryプラグイン(lightbox_plus.js)を使用しているため、読み込んでおり、こちらのプラグインは動いています。

    >2.jQueryのバージョンと、プラグインが対応しているjQueryバージョンは合っていますか?
    上記のことから、これは大丈夫そうです。

    >3.どんなエラーが出ていますか?(Chromeのデバッグツール等で確認できます)
    エラーは出ていません。う〜ん。。

    jQueryの読み込ませる位置やエラーの確認方法など、よくわかっていないところに気付けました。
    ありがとうございます。

    キャンセル

  • 2016/07/15 11:42

    そうですか。では、JSで取得している画像のパス、もしくは切替で呼び出しているJSファイルそのもののパスが正しく設定できていない可能性もありますね。そのあたりもチェックしてみてはいかがでしょうか?

    あと、もしどうしても分からなかったら最初からレスポンシブ対応を謳っているプラグインに差し替えてしまうという手もあります。お望みの挙動を実現するプラグインが他にあるかどうかは探してみないと分かりませんが…。

    キャンセル

  • 2016/07/15 11:45

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

    キャンセル

  • 2016/07/15 13:16

    ご返信ありがとうございます。

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

    キャンセル

  • 2016/07/15 14:32

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

    キャンセル

+1

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

<script>
  $(function () {
    var SP_WIDTH = 769;
    var $window = $(window);
    var isSp = false;

    var initResponsiveSrc = function () {
      var $images = $('img[spsrc]');

      $images.each(function () {
        var $targetImage = $(this);
        var pcSrc = $targetImage.attr('src');

        $targetImage.attr('pcsrc', pcSrc);
      });
    };

    var changeImagesForResponsive = function (isSpTemp) {
      var $images = $('img[spsrc]');
      isSp = isSpTemp;

      $images.each(function () {
        var $targetImage = $(this);

        $targetImage.attr('src',
          isSp
            ? $targetImage.attr('spsrc')
            : $targetImage.attr('pcsrc')
        );
      });
    };

    var checkScreenWidth = function () {
      if ($window.width() > SP_WIDTH && isSp) {
        changeImagesForResponsive(false);
      } else if ($window.width() <= SP_WIDTH && !isSp) {
        changeImagesForResponsive(true);
      }
    };

    initResponsiveSrc();
    checkScreenWidth();

    $window.on('resize orientationchange', function () {
      checkScreenWidth();
    });
  });
</script>

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

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

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


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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/07/15 10:45

    わざわざコードを書いてくださって、本当にありがとうございます。
    ただ、コピーして試させていただいたのですが、ウィンドウ幅を変えても画像が切り替わりませんでした。。私の方で何か間違えたのかもしれません。

    >srcとspsrcを設定して出し分けることができます。
    こちらが解決のヒントになりそうです!
    また検証してみます。ありがとうございました。

    キャンセル

0

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

#transmit,
#transmit > canvas {
    height: auto !important;
    width: 100% !important;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/07/15 15:29

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

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    20355questions

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

  • jQuery

    8141questions

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

  • HTML5

    5116questions

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

  • CSS3

    2621questions

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