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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

1831閲覧

JavaScriptを共通して使用するには?

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2016/06/12 06:00

編集2016/06/12 06:30

JavaScriptについて質問がございます。

現在あるPC用サイトをレスポンシブ対応に修正してます。
ページのソース構成は以下のようになっています。

<head> --------------
<body> --------------

コンテンツ1.PC用


コンテンツ1.スマホ用


コンテンツ2.PC用


コンテンツ2.スマホ用


…というような構成になります
(デバイスワイドでコンテンツ表示が切り替ります)。

質問内容はPC用コンテンツにあるJavaScriptを
同じ内容でスマホ用にも使用したいのですが
共通して使用する方法はないでしょうか?
短文であればID名をそれぞれ用意するだけいいものの
長文になるとソースが長くなり(関数や変数等もそれぞれで必要)
作業が非常に大変になります。
どうか分かる方教えていただけないでしょうか?
よろしくお願いします。

【一例】
コンテンツ1.PC用にあるhtml

<div id="map"></div> <script type="text/javascript"> loadmap("○○○○○","○○○○○"); function loadmap(lat,lng) { var canvas = document.getElementById('map') ; geocoders = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(lat,lng); var mapOptions = { zoom: 15 , center: latlng , mapTypeId: google.maps.MapTypeId.ROADMAP }; maps = new google.maps.Map( canvas , mapOptions ) ; markers = new google.maps.Marker({ map: maps , position: latlng, }) ; } </script>

上記のhtml、javascriptはコンテンツ1.PC用内で
グーグルマップを呼び出すものです。
これをコンテンツ1.スマホ用にも共通して使用するには
どうすればいいでしょうか?

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

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

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

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

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

kei344

2016/06/12 06:07

タイトルの「 javaスクリプト」は「JavaScript」にされたほうが良いと思います。また、具体的にHTMLおよびCSS、JavaScriptなどを質問文に追記いただいたほうが回答を得られやすいと思います。
退会済みユーザー

退会済みユーザー

2016/06/12 06:11

そうですね、タイトルは変更します。 ソースについては記述できる範囲で追加します。 ご指摘ありがとうございます。
kei344

2016/06/12 06:23

コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
退会済みユーザー

退会済みユーザー

2016/06/12 06:27

このサイト初心者で、質問方法が不慣れですみません。 本文修正しておきます。
kei344

2016/06/12 06:38

いえ、編集ありがとうございます。ばらばらと五月雨的で申し訳ないのですが、ページのソース構成がわかりにくいです。同一ページに複数のデバイス用コンテンツがあり、それを切り替えているということでしょうか。その部分がわかるHTMLを記述いただくことは可能でしょうか。また、今現在共通使用できていない理由はどのあたりにありますでしょうか。
退会済みユーザー

退会済みユーザー

2016/06/12 06:51

そうですね、元々PC用のページのですが、 新たにスマホで見れるように、スマホ用コンテンツを追加していっている感じです。申し訳ないのですが、表記は出来ないですね。 共通使用できていない理由ですが、スマホ用にJavaScriptを作成していないので 理由がわかないです。 大変説明不足で申し訳ないのですが、要は同じJavaScriptを使用する方法を知りたいということなのです。。。
kei344

2016/06/12 08:17

同じJavaScriptを使用する方法はあります(というか出来ない理由のほうが少ない)が、HTMLの構造がどう変わるかがわからなければ提示しにくいです。
退会済みユーザー

退会済みユーザー

2016/06/16 05:19

この件の質問ですが、javascript については依頼者の方で対応して下さるということになりました。回答やコメント頂いた方、ご協力して頂いたにも関わらず中途な形になり大変申し訳ありません。自分自身知識不足であり、また表現不足でもあったと思います。反省するところは反省し、また別でわからないことがあれば質問すると思いますので、何卒宜しくお願いします。
kei344

2016/06/16 05:37

まだ質問が「受付中」になっていますが、いったんご自身の回答をもって「解決済」にされてはいかがでしょうか。
guest

回答2

0

下記のようにloadmap関数を少し書き換えて、
DOM構築後に実行するだけではいけませんか?

javascript

1document.addEventListener("DOMContentLoaded", function() { 2 loadmap("map","○○○○○","○○○○○"); 3 loadmap("スマホ用ID","○○○○○","○○○○○"); 4}); 5 6function loadmap(id,lat,lng) { 7var canvas = document.getElementById(id) ; 8geocoders = new google.maps.Geocoder(); 9var latlng = new google.maps.LatLng(lat,lng); 10var mapOptions = { 11zoom: 15 , 12center: latlng , 13mapTypeId: google.maps.MapTypeId.ROADMAP 14}; 15maps = new google.maps.Map( canvas , mapOptions ) ; 16markers = new google.maps.Marker({ 17map: maps , 18position: latlng, 19}) ; 20}

bodyの閉じタグ直前でしたらDOMContentLoadedは不要かと思いますが、

コンテンツ1.PC用

の箇所や、<head>内に記述する場合は記述してください。

そもそもこのような、PC用とSP用でコンテンツが重複したレスポンシブの手法は避けたいところですが。。。

投稿2016/06/12 08:14

編集2016/06/12 08:15
fee

総合スコア71

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

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

0

ベストアンサー

この件の質問ですが、javascript については依頼者の方で対応して下さるということになりました。回答やコメント頂いた方、ご協力して頂いたにも関わらず中途な形になり大変申し訳ありません。自分自身知識不足であり、また表現不足でもあったと思います。反省するところは反省し、また別でわからないことがあれば質問すると思いますので、何卒宜しくお願いします。

投稿2016/06/16 06:28

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問