<script>タグとは?drupalのJS injectorモジュールを使ったJavaScriptコードの挿入方法

このQ&Aのポイント
  • 「<script>タグとは?」、「drupalのJS injectorモジュールを使ったJavaScriptコードの挿入方法」というテーマで説明しています。
  • <script>タグは、HTML文書内でJavaScriptコードを埋め込むためのタグです。drupalのJS injectorモジュールを使えば、このタグを挿入せずにJavaScriptコードを直接記述することができます。
  • 具体的な使い方として、<script>タグを外しても問題なく動作するか、また余分な部分が含まれていても正常に動作するかについても触れています。
回答を見る
  • ベストアンサー

<script>タグというのはどこからどこまで?

drupalというcmsを使ってサイトを運営しております。 このCMSはJS injectorというモジュールを使ってJavaScriptのコードを挿入できるようになっています。 JavaScriptのコードの記入欄には下記のように書かれています。 「The actual JavaScript code goes in here. There is no need to insert the <script> tags.」 翻訳してみると下記のような意味です。 「実際のJavaScriptコードがここに入ります。 <script>タグを挿入する必要がない。」 planBCDというサイトのサービスを利用したいと思っていて 挿入したいコードは下記のコードです。 <script type="text/javascript" src="//dwkjexg5kaiww.cloudfront.net/planbcd/*****/**.js"></script> (****の部分には固有の番号が入ります。) 試しに 「src="//dwkjexg5kaiww.cloudfront.net/planbcd/*****/**.js"」 と入力してみて、表示されたページのhtmlを見てみると <script type="text/javascript"> <!--//--><![CDATA[//><!-- src="//dwkjexg5kaiww.cloudfront.net/planbcd/*****/**.js" //--><!]]> </script> となっていました。 1、 <script type="text/javascript" src="//dwkjexg5kaiww.cloudfront.net/planbcd/*****/**.js"></script> から<script>タグを外したら src="//dwkjexg5kaiww.cloudfront.net/planbcd/*****/**.js" でいいのでしょうか? 2、 htmlを見ると<!--//--><![CDATA[//><!--  //--><!]]>みたいな余分な部分が含まれているのですがこれでも正常に動作するのでしょうか? planBCDの管理画面を見ると「トラッキングコードの埋め込みが確認できません。」となっています。 (トラッキングコードの埋め込みを確認できるまでに若干、時間がかかるみたいなのでもう少しまてば確認できるのかもしれませんが・・・)

質問者が選んだベストアンサー

  • ベストアンサー
  • shockatz
  • ベストアンサー率80% (153/191)
回答No.2

う~ん。。 <script type="text/javascript" src="xxxx.js"></script> は、javascriptの呼出しタグであって、内容ではない、ということですかね。 ご提示のような外部呼出しタグは、サーバサイドで動的処理を行い、jsを生成するもので、スクリプト本体の取得は難しいかと思います。 で、Drupalに限らずWordPressなんかでも、TinyMCEを使っているCMSは全部、記事に直接<script>や<css>を打てないので、そういったモジュールが用意されているんですが、また勝手な挙動をします。 恐らく、そいつは入力した項目の前後に、<script type="text/javascript"></script>を入れるのかな。 なら、逆手にとって、 </script> <script type="text/javascript" src="//dwkjexg5kaiww.cloudfront.net/planbcd/*****/**.js"> とでも入れてみてはどうでしょう?(JSinjector使ってなくて推測です。ごめんなさい) <script type="text/javascript"> </script> <script type="text/javascript" src="//dwkjexg5kaiww.cloudfront.net/planbcd/*****/**.js"> </script> となればしめたもの。最初の<script></script>は内容が空なので無視されます。 ただ、勝手にアンチスクリプトフォージェリとか噛まされてサニタイジングされると化けます。 そうなったらテンプレートにjs書くしかありませんね。

OKIaHUKUOKA
質問者

お礼

ありがとうございました。 教えていただいた方法を試してみました。 planBCDの管理画面を確認してみたところ 「すべて正常にトラッキングしています」 という表示になりました。 今回の方法は次に何かのタグを貼るときにも使えると思います。 ありがとうございました。

その他の回答 (1)

回答No.1

0. <script>タグというのは「<script>」です。「<」から「>」までです。 1. それでいいです。 (それで正しく動きます、という意味ではありません。後述) 2. 自分の知らないものだからって勝手に余分扱いする神経じゃ今後が心配です。 https://www.google.co.jp/search?q=HTML+CDATA ※本題 いいですか? 「実際のJavaScriptコードがここに入ります」と書かれています。「コードがここに入ります」です。 「コード」とは何ですか?「src="//dwkjexg5kaiww.cloudfront.net/planbcd/*****/**.js"」ですか?違いますよね? 単純に考えてください。HTMLの<script>から</script>の間やJSファイルの中に<script></script>があったら動かないのは分かりますよね? そこには「JavaScriptのコード」を入れるんです。「JavaScriptのコード」とは何か。「**.js」の中身です。「**.js」の中身を入れる場所なんです。 ※念のため 私は「drupal」は知りません。だからそこに入るべきコードが「**.jsの中身」でいいのかどうかまでは知りません。あくまであなたの認識間違いを正しただけです。

OKIaHUKUOKA
質問者

補足

回答ありがとうございます。わからないことが多いので知っている方から見たらとんちんかんな質問になっているかもしれません。申し訳ありません。

関連するQ&A

  • scriptを2つ動かすために

    ライトボックスと、時間が経つとNEWマークが自動で消えるスクリプトを2ついれました。 すると、NEWマークの方だけが稼動して、ライトボックスが動きません。 自分で調べた結果、統合しないといけないというのはわかったのですが、やり方が…。。。 お力ください!(>_<) <!-- NEWマーク▼ --> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.newmark.js"></script> <script type="text/javascript"> /* <![CDATA[ */ $(document).ready(function(){ $(".newmark").newmark({ past: 240, icon: "<img src='images/new.gif' alt='new'>" }); }); $(document).ready(function(){ $(".newmark2").newmark({ past: 240, icon: "<img src='img/new2.gif' alt='new'>" }); }); /* ]]> */ </script> <!-- NEWマーク▲ --> <!-- #header ライトボックス --> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> <style type="text/css"><!-- #outerImageContainer { -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; } #imageDataContainer { -moz-border-radius-bottomleft:10px; -moz-border-radius-bottomright:10px; } --></style> <style type="text/css"> a:link {text-decoration:none;} a:visited {text-decoration:none;} a:active {text-decoration:none;} a:hover {text-decoration:none;} </style> <!-- #header ライトボックス -->

  • 実行するスクリプトを時間で切替えたいが・・

    以下のようにHTML内に埋め込んで、時間で実行するスクリプトを切替えたいと思っていますが、何故か上手くいきません。 詳しい方がいましたら、ご教授下さいませ。 m(__)m <script language="JavaScript"> <!-- TimeH = (new Date()).getHours(); if (TimeH>=18) { <script language="Text/JavaScript" type="Text/JavaScript" src="./JS/xxx.js" charset="shift-jis"></script> } else if (TimeH<4) { <script language="Text/JavaScript" type="Text/JavaScript" src="./JS/yyy.js" charset="shift-jis"></script> } else { <script language="Text/JavaScript" type="Text/JavaScript" src="./JS/zzz.js" charset="shift-jis"></script> } // --> </script>

  • 複数のJavascriptを1つのscriptタグで読み込む

    複数のjsファイルをカンマ区切りで、 <script type="text/javascript" src="a.js,a.js,c.js"></script> と読み込みたいと思っております。 しかしサーバーの設定なのか一つも読み込まれずに行き詰っております。 原因はどこにあるのでしょうか?

  • 二つのJava Scriptを使うと動かない

    現在ウェブサイトを制作中ですがJavascriptについては配布されている物を設置すること位しかできません。 ウェブサイトの特徴として、横スクロールサイトであり、どうしてもギャラリーを設置したいのです。 横スクロールの為に <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript"> $(function() { $('ul.nav a').bind('click',function(event){ var $anchor = $(this); $('html, body').stop().animate({ scrollLeft: $($anchor.attr('href')).offset().left }, 1500,'easeInOutExpo'); //easeInOutExpoはeasingプラグインから選べます event.preventDefault(); }); }); </script> とし、 マウスの上下スクロールで左右の動きをさせるために <script type="text/javascript" src="vscroll.js"></script> を置いてました。 この時点で動作は正常だったのですが、 ギャラリーが必要なため、lightbox <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> を置くと横スクロールとlightboxの動きができなくなり、レイアウトも崩れました。 どなたか詳しい方がいらっしゃいましたら、ご教授いただけませんでしょうか。 またlightboxにはこだわらないので、横スクロールサイトでギャラリーを設置できる方法がありましたら、教えてください。 ちなみにCSSでモーダルウィンドウを設置してみたのですが、横スクロールということもあり、Firefoxで正常に見る事ができませんでした。(サムネイル画像をクリックすると一番左に戻る) よろしくお願いします

  • Bloggerのガジェットにdocument.write("<script~したい

    こんにちは。googleのBloggerを使っています。 このフォームに書き込む為、便宜上、<>を全角で入力しています。 <script src="hoge001.js"></script>のようなガジェットをBloggerのカスタマイズから「ガジェットの追加」ー「HTML/Javascript」を選んで設定しようとしています。 ここでhoge001.jsの001が機能によって違うため、ここをランダムに切り替えて使うべく、document.write()を使って001部分を可変にしようとしているのですが、そもそもこのBloggerのガジェットエディタで(1)のようにdocumnt.write()化したコードが正しく保存されません。保存した結果をブラウザで表示させて展開されたソースコードも、ガジェットの編集で再度エディタを開いても、(2)のコードになります。 (1)ガジェットのエディタで最初に入力したコード: <script type="text/javascript"> document.write( "<script type=\"text/javascript\" src=\"http://hogehoge.com/jslib/hoge001.js\"></script>" ) ; </script> (2)保存後再度編集で開いたコード、およびブラウザで見たソース: <script type="text/javascript"> document.write( "<script src="\" text/javascript\ http://hogehoge.com/jslib/hoge001.js\ type="\"></script>" ) ; どうにかうまくやる方法はないものでしょうか。 よろしくお願いします。 尚、hoge001.js自体の動作に問題はありません。

  • このHTMLの意味はなんでしょうか?

    <script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="scripts/jquery.queryloader2.js"></script> <script type="text/javascript" src="scripts/jquery.parallax-1.1.3.js"></script> <script type="text/javascript" src="scripts/jquery.localscroll-1.2.7-min.js"></script> <script type="text/javascript" src="scripts/jquery.scrollTo-1.4.2-min.js"></script> <script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script> <script type="text/javascript" src="scripts/jquery.scrollorama.js"></script> <script type="text/javascript" src="scripts/jquery.scrolldeck.js"></script> <script type="text/javascript" src="scripts/jquery-contained-sticky-scroll.js"></script> <script type="text/javascript" src="scripts/lightbox.js"></script> <script type="text/javascript" src="scripts/parallax01.js"></script> <script type="text/javascript" src="scripts/yazirusi01.js"></script> <script type="text/javascript" src="scripts/jquery.mousewheel.js"></script> <script type="text/javascript" src="scripts/jquery.easie.js"></script> <script type="text/javascript" src="scripts/jquery.smoothScroll.js"></script> <script type="text/javascript" src="scripts/php_date.js"></script> <script type="text/javascript" src="scripts/script.js"></script> とあるサイトのソースの一部に、このような文章が書かれていました。 一体これはどういう意味なんでしょうか? どなたか解説お願いします

    • ベストアンサー
    • HTML
  • RSSでアメブロの画像をサイトに表示させたい

    自社サイトにquery.zrssfeed.min.jsを使ってアメブロの画像を表示させたいと考えております。 下記のソースコードですが、サイトに表示されません。 正常に表示できるよう教示頂けますでしょうか <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="js/jquery.zrssfeed.min.js"></script> <script type="text/javascript">// <![CDATA[ $(document).ready(function () { $('#rss').rssfeed('http://rssblog.ameba.jp/creamg/rss.html',{ snippet: false }, function(e) { $(e).find('div.rssBody').vTicker({ showItems: 3 }); }); }); // ]]></script> <div id="rss"> </div>

  • 複数スクリプトの読み込みでlightboxが動作しません

    MT4.1でサイトを構築し、カレンダー、サイト内検索、画像表示(lightbox)をprototype.jsを用いたスクリプトを読み込む形で動かそうとしているのですが、画像表示(lightbox(最新版))のみを読み込ませた場合は動作するのですが、三種類とも読み込ませた場合画像表示(lightbox)が正常に動作せず、拡大画像のページに移動してしまいます。 ヘッダ内に組み込んでいるソースは下記となります。 --------------------------------------------------------- <!-- カレンダー表示 --> <script type="text/javascript" src="<$MTBlogURL$>_ajax/calendar/prototype.js"></script> <script type="text/javascript" src="<$MTBlogURL$>_ajax/calendar/ajaxCalendar.js"></script> <script type="text/javascript" src="<$MTBlogURL$>_ajax/calendar/dayChecker.js"></script> <!-- カレンダー表示 --> <!-- lightbox --> <link rel="stylesheet" href="<$MTBlogURL$>_ajax/lightbox/css/lightbox.css" type="text/css" media="screen" /> <script src="<$MTBlogURL$>_ajax/lightbox/js/prototype.js" type="text/javascript"></script> <script src="<$MTBlogURL$>_ajax/lightbox/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="<$MTBlogURL$>_ajax/lightbox/js/lightbox.js" type="text/javascript"></script> <!-- lightbox --> <!-- 検索窓処理 --> <script type="text/javascript" src="<$MTBlogURL$>_ajax/search/js/prototype.js"></script> <script type="text/javascript" src="<$MTBlogURL$>_ajax/search/js/blog_ajax_json_search.js"></script> <!-- 検索窓処理 --> --------------------------------------------------------- 画像表示(lightbox)のみにすると動作するので、他のスクリプトと衝突しているのだとは思いますが読み込みの順番などを変更しても効果がありませんでした。 解決策をご存知の方、ご教授をお願いいたします。

  • javascript 解析タグのコメントアウト

    XHTMLではなく、HTMLに貼るときにのコメントアウトで、 以下をどうすればよいのでしょうか? <script type="text/javascript" src="http://i.yimg.jp/images/analytics/js/ywa.js"></script> <script type="text/javascript"> var YWATracker = YWA.getTracker("XXXX"); YWATracker.addExcludeProtocol("file:"); YWATracker.submit(); </script> <noscript> <div><img src="http://by.analytics.yahoo.co.jp/p.pl?a=XXXX&js=no"; width="1" height="1" alt="" /></div> </noscript> ------------------------- 例1 <!-- // --> 例2 //<![CDATA[ //]]> 例3 どっちでも良い。

  • 教えてください! lightboxとskitter

    javascriptがまだよく理解できていないので、 愚問に思われるかもしれないですが、上手く動作しなくて困っています。 <head>内に下記のように記述したのですが、lightboxが上手く作動しません。 記述に問題があるんでしょうが、調べても全くわからないので こちらに投稿させていただきました。 どなたかこの問題の解き方をお教えください。 よろしくお願いします。 <link rel="stylesheet" type="text/css" href="css/lightbox.css"> <!--lightbox--> <script src="js/prototype.js" type="text/javascript"></script> <script type="text/javascript" src="js/builder.js"></script> <script type="text/javascript" src="js/effects.js"></script> <script type="text/javascript" src="js/lightbox.js"></script> <script type="text/javascript" src="js/smartRollover.js"></script> <!--smartRollover--> <script type="text/javascript" src="js/jquery.quickflip.source.js"></script> <link rel="stylesheet" type="text/css" href="css/skitter_css/skitter.styles.css"> <!--Skitter--> <style type="text/css"> .box_skitter_large{ width:490px;height:190px; } </style> <script type="text/javascript" src="js/skitter_js/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.skitter.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.animate-colors-min.js"></script> <script type="text/javascript"> $(function(){ $('.box_skitter_large').skitter({interval: 8000}); <!--数字を大きくするとSkitterの時間がゆっくりになる--> //$('.box_skitter_large').skitter({thumbs: true, label: false,}); }); </script>