JavaScriptライブラリのリンク先について

前へ 次へ
このQ&Aのポイント
  • JavaScriptのライブラリはGoogleやMicrosoftがホスティングしており、多くのサイトで使用されるため、ローカルキャッシュが期待されます。
  • canvasのライブラリには、http://explorercanvas.googlecode.com/svn/trunk/silverlight/excanvas.js と http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-excanvas.js/ の2つの選択肢があります。
  • 直リンクの場合、URLが変わる可能性があるため、注意が必要です。アドバイスとしては、GoogleやMicrosoftがホスティングしているバージョンを使用することをおすすめします。
回答を見る
  • ベストアンサー

JAVAScriptライブラリのリンク先

先日質問したところ、別件でJQueryなどのライブラリは googleやmicrosoft がホスティングしてるJavaScript を いろんなサイトで読み込んで、ローカルキャッシュが はたらくことを期待するのが主な戦略とお聞きしました。 今回悩んでいるのがcanvasのライブラリです。 •http://explorercanvas.googlecode.com/svn/trunk/silverlight/excanvas.js に対して <script src="http://explorercanvas.googlecode.com/svn/trunk/silverlight/excanvas.js "></script> と書けばいいのでしょうか。 それともURLが変わる可能性があるので危険なのでしょうか。 uupaa-excanvasもあると聞き、調査してみると http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-excanvas.js/ の配下にもexcanvas.jsとuupaa-excanvasがあり混乱しています。 何をどう直リンすればいいのか、直リンはやめた方がいいのか等 アドバイスを宜しくお願いします。

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

  • ベストアンサー
  • dscripty
  • ベストアンサー率51% (166/325)
回答No.3

<!--[ANo.2] のお礼より引用 ＣＤＮとは有名なライブラリを直リンしておけ ば キャッシュの機能が期待できると理解しまし た。 --> No, CDN はコンテンツ配信最適化方法の一つのに過ぎなくて、ネットワーク負荷の分散を担っている技術。 これが、効果を発揮するのは、ローカルにキャッシュされていない、初めてファイルをダウンロードするとき。 で、前回ホスティングと言ったのは、直リンクのなかの、恒久性と信頼性が十分確保されているもののこと。 ちなみに、excanvas.js の直リンク http://explorercanvas.googlecode.com/svn/trunk/excanvas.js は、開発によって上書きされるから、信頼性も恒久性もないよ！

flyingbee
質問者

お礼

ホスティングとは恒久性と信頼性にあったのですね。 JQueryはこちらを使うとして Canvasはソースのマージの方がいいようですね？ そこのURLはホスティングでは使えないと分かって助かりました。 どうもご回答有り難うございます。

その他の回答 (3)

回答No.4

直リンクする場合は、「このURLに直リンクしてください」とファイル提供者が提示しているURLにリンクしてください。 ホスティング http://e-words.jp/w/E3839BE382B9E38386E382A3E383B3E382B0E382B5E383BCE38393E382B9.html CDN http://e-words.jp/w/CDN.html

flyingbee
質問者

お礼

再度のご回答有り難うございます。 CDNというのは例えばP2Pのような形態は知っていましたが、 用語だけ覚えたままでいると、とっさの場面で対応できませんね。 こういう機会があって自分の勘違いを修正できて助かります。

flyingbee
質問者

補足

どうも皆さん、お世話になりました。 １つ分かると３つぐらい分からなくなるの繰り返しです。 おかげで大分鍛えられています。

回答No.2

直リンクとCDNは全然違います。 直リンクしつつCDNを使わないということもできますし、直リンクしつつCDNを使うということも出来ます。 （というか、CDNを使うかどうかはファイル提供者またはサーバー提供者が決める、直リンクするかどうかはファイル利用者が決めることです。） CDNは、日本からのアクセスなら日本のサーバー、アメリカからのアクセスならアメリカのサーバーに接続するというもので、キャッシュするかどうかは関係ありません。 直リンクでは、ある人がAサイトにアクセスし、次にBサイトにアクセスした時に、 Bサイトにアクセスした時に「Aサイトで読み込んだファイルキャッシュ」を使えることにあります。 キャッシュの差が出るのは「Bサイトにアクセスした1回目」が対象です。 Bサイトに２回以上アクセスした場合の２回目以降は、Bサイト1回目に取得したファイルキャッシュが使われますので、直リンクしても、していなくても同じになります。 >それともURLが変わる可能性があるので危険なのでしょうか。 URLが変わらないことは、ファイル提供者が（非恒久的に）保証しています。 非恒久的であるからには、いずれファイルが消えることもあります。 それを危惧するのであれば、自サーバーにアップロードし直して、それにリンクすることをお勧めします。

flyingbee
質問者

お礼

どうもご回答有り難うございます。 ＣＤＮとは有名なライブラリを直リンしておけば キャッシュの機能が期待できると理解しました。 （これでも勘違いがあるのでしょうか？） CANVASについては永続性が否定されているようなので 自分のところにダウンロードしてくるしかありませんね。

noname#161640
noname#161640
回答No.1

ｊQueryやGoogleのサービスに関連するJavaScriptライブラリなどは、CDN(Code Delivery Network)で配信されています。CDNは、最初からコンテンツを不特定多数のサイトに配信することを前提に作られているサービスです。 どこかのサイトにあるライブラリを直リンクで埋め込む場合、そのサイトが停止したりすればページの読み込みが止まってしまいますし、URLが変わったりするとリンクが外れてしまいます。CDNはそうしたことを極力排し、リンクを貼ればこの先もずっとそのコンテンツが安定して提供され続けることを保証します。ですから、CDNのコンテンツは、安心して直リンクし埋め込んで使うことができます。 これに対し、質問にあるURLは、googlecodeのリンクですね。google codeは、あくまでオープンソースのプロジェクトを配信するためのサービスであり、プロジェクトがいきなりなくなったりすることだってあります。ですから、直リンクして使うべきではありません。ダウンロードして自分のサイトにアップし、それを利用すべきでしょう。

flyingbee
質問者

お礼

ご回答有り難うございます。 ホスティングがＣＤＮの仕組みの１つだったのですか・・・ 全く想像ができませんでした。言われてみて納得です。 どちらかというと負荷分散の考えですよね。 複数のJAVAScriptの読み込みに対して、 どうオーバーヘッドの縮小に繋がるんだろうと謎でした。 googleコードはそういうのに適さないんですね。 少し前進したように思います。 といっても例によって私の勘違いが炸裂するかもしれませんので もうしばらく他の方の回答も受け付けます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • jQueryでカウントダウンタイマーのループ

    jquery-countdownのタイマーを作っています。 同じ時間を何度も繰り返す　タイマーにしたいのですが　うまくいきません。 jquery-countdown http://code.google.com/p/jquery-countdown/ demostration http://jquery-countdown.googlecode.com/svn/trunk/index.html このタイマーを　ループさせたいと考えています。 15行目の timerEnd: function() { alert('end!!'); }, を変更するかと思いますが　どのように変更すれば　何度も繰り返すループになるでしょうか？ <html> <head> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script src="http://jquery-countdown.googlecode.com/svn/trunk/js/jquery.countdown.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $('#counter').countdown({ stepTime: 60, format: 'mm:ss', startTime: "00:10", image: 'http://jquery-countdown.googlecode.com/svn/trunk/img/digits.png', digitWidth: 53, digitHeight: 77, timerEnd: function() { alert('end!!'); }, }); }); </script> </head> <body> <div id="counter"></div> </body> </html>

  • html5.jsを使うと、IE8以下で真っ白になる

    html5で作成したもので、ie8以下に対応させるため、 <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> を使用しましたが、ＩＥでの開発モードで、標準、互換モードともに、ie8以下真っ白になってしまいます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <title>～</title> で書いています。 <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> の部分をなくすと、ie8以下では、html5を無視した形で表示されます。 この原因は何でしょうか。エンコードを疑いましたが、どうやらこのjsのようなのですが。

    • ベストアンサー
    • HTML
  • javascriptライブラリの使い方

    aa.js bb.js cc.js の3つのjavascriptを使ったサイトを作成中です。 ヘッダーに <script src="aa.js" type="text/javascript"></script> <script src="bb.js" type="text/javascript"></script> <script src="cc.js" type="text/javascript"></script> と記載し、「aa.js bb.js cc.js 使う前提のスクリプト」をサイト上に記載しているのですが、aa.js bb.js cc.js のそれぞれが重いため、サイト記載のスクリプトがaa.js、bb.js、cc.jsより先に読み込まれてしまい、思ったような表示が出来ません。 (cc.jsが読み込まれないままの状態でサイトのスクリプトを読み終わってしまう) そこで調べてみると、下記のようなライブラリを発見しました。 http://notnil-creative.com/blog/archives/1361 このライブラリ(script.js)を使うと、通常は以下のように書くJavascriptの読み込みが、 <script src="jquery.js"></script> <script src="my-jquery-plugin.js"></script> <script src="my-app-that-uses-plugin.js"></script> 下記のように書くことができるそうです。 $script('jquery.js', function () { $script('my-jquery-plugin.js', function () { $script('my-app-that-uses-plugin.js') }) }) この書き方で、ページのレンダリングを阻害せず、非同期にJavascriptを読み込むことができ、なおかつ「jQueryが読み込まれてからjQueryプラグインを読み込み、そのあとウェブサイト用のスクリプトを読み込む」というような依存関係のある複数のJavascriptファイルの読み込みにも対応できちゃいます。 という優れものであり、私の要求にぴったりと思いました。 早速、http://notnil-creative.com/blog/archives/1361のページからscript.jsをダウンロードしたのですが、使い方がわかりません。 例ではヘッダーに $script('jquery.js', function () { $script('my-jquery-plugin.js', function () { $script('my-app-that-uses-plugin.js') }) }) と記載すればOKと書いてあります。 ただ、この記入方法で動くようにするためには、$scriptがscript.jsに連動していることを記載すべき だと思いますが、javascriptでそのような例を見たことがなく困惑しています。 このスクリプトの使い方(ヘッダーの記入方法)について、ご教授頂けませんでしょうか? 宜しくお願い致します。

  • JSPで郵便番号から住所を得るには？

    JSPのJAVAのコーディングの中で、郵便番号から、住所を得るには、 どう記述すればよろしいでしょうか？ <% <script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script> <script src="./ajaxzip3.js" charset="UTF-8"></script> AjaxZip3.zip2addr('zip31','zip32','pref31','addr31','addr31');" %>

    • ベストアンサー
    • AJAX
  • HTML5について

    ものすごく初歩なことをたずねたいのですが、 ＩＥ8以前にに新しい要素を認識させる方法として <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> があると知ったのですが、 これを＜head＞内に記述すると、当然きちんと認識されるのですが、 画面を見た時に一番上に<!--[if lt IE9]> <![endif]--> と表示されてしまいます。 ・・・この文字は消せないのでしょうか？

  • jQueryにて複数ライブラリを動かす

    wordpressにてWEB制作を行っています。 jQueryにてfullpage.jsというフルページスクロールするライブラリを使用しております。 そのセクションの一つをfullpage.jsの機能の一つ横スライドを行っているのですが、 fullpage.jsのオプションには自動再生はありません。 スライド部分のみ自動再生を行いたいので bxslider.jsというライブラリを使用し、 横スライドしたいセクションをbxsliderで動かしたいのですが、 bxsliderが全く作動しません。 また <script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.bxslider').bxSlider(); }); </script> の記述を <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#fullpage').fullpage(); }); の上に書くと今度はfullpageが動きません。 jQueryライブラリは同ページで二つ同時には動かないんでしょうか？ また、書き方が間違っていますでしょうか？ 宜しくお願い致します。

  • Googleがホストしているライブラリを調べる方法

    jQueryなどのライブラリを自サイトで使用する際、そのソースを自サイトに配置した上で以下のように指定して読み込む事が基本だと思います。 <script type="text/javascript" src="/js/jquery.js"></script> 最近、Googleなどが提供しているライブラリを借りてくれば、自サイトに配置せずに済むという事を覚えたのでそれを使って、以下のように書いています。 <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7");</script> このように書けば良い、と解説されている記事を読んだからですが、他にもよくjQuery.UIなどを使う場合の記述も書かれています。 このように、解説しているものを見つけた場合は、これもホストされているのだなと使えるようになりますが、自分でGoogle内でどのライブラリが提供されているのかを調べる方法は検索したのですが見つけられませんでした。 ここに書かれている、こうすれば調べられるという方法があれば、教えていただけませんでしょうか。 よろしくお願いします。

  • HTML5について

    前回質問したのですが解決せず、日にちがだいぶたってしまったので、 再度質問させて下さい。 ＩＥ8以前にに新しい要素を認識させる方法として <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> があると知ったのですが、 これを＜head＞内に記述すると、当然きちんと認識されるのですが、 画面を見た時に一番上に<!--[if lt IE9]> <![endif]--> と表示されてしまいます。 ・・・この文字は消せないのでしょうか？ 使用しているブラウザはＩＥ8とＩＥ6です。 【ＨＴＭＬソース】 <!DOCTYPE html> <html> <head> <!--[if lt IE9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link rel="stylesheet" type="text/css" href="style_html.css" /> <link rel="stylesheet" type="text/css" href="style.css" /> <meta charset="shift_jis" /> <title>HTML5</title> </head> <body> <h1>HTML5</h1> <section> <h2>タイトルなんちゃら</h2> <p>あけましておもでとうございます。今年もよろしくお願い致します。</p> </section> </body> </html> ・・・・・・どこが間違っているのか分からず困っています。 ご指摘どうぞよろしくお願い致します。

    • ベストアンサー
    • HTML
  • 【javascript】２つ同時に上手く動かない

    javascript初心者です。 現在作成している画面に２つのjavascriptを動かしたいと思っております。 しかしながら、一つずつでは動くのですが、同時に表示すると上手く動作しません。 いい方法などありましたらご教授お願い致します。 【htmlのヘッド】 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.coda-slider-2.0.js" charset="utf-8"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/sm_scroll.js"></script> <script type="text/javascript" src="js/jcaption.min.js"></script> <script type="text/javascript" charset="utf-8"> $(function(){ $('#coda-slider-1').codaSlider({ autoSlide:false, autoHeight:false, autoSlideStopWhenClicked:false, autoSlideInterval:10000, firstPanelToLoad:1, dynamicArrows: false, }); }); </script> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> 【上部のjavascript】 Coda-Slider 参照URL：http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_slider/coda_slider.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB 【下部のjavascript】 litebox 参照URL：http://lokeshdhakar.com/projects/lightbox2/ javascript内が初期化されているのが問題なのでしょうか？ 解決の方法などありませんでしょうか？ 以上、宜しくお願い致します。

  • jquery自体をJavaScriptで読み込む

    以下のようなものを想定して、jquery.js という中身がjqueryでないものから jqueryの実態を読み込みをさせようとしているのですが、うまくいきません。 ・jquery 2以降は、IE8以前をサポートしなくなるので、useragentで 　読み込むjqueryを選択したい。 ・現在、CGIスクリプト上で、jqueryの読み込みを判断しているが、できれば 　外部JavaScriptで巨大なjqueryの読み込みの判断をさせたい。 ・キャッシュされたとしても、ライブラリであることから、圧縮して７０ｋバイトと 　あまりにも巨大である ・(googleapiを利用すると、IE8以前では、プライバシーの警告が出る場合がある） 確かに、スマホにjqueryを普通に読み込ませても、何も問題なく動作しますが、 相当がんばって圧縮をしても70kバイト程度のライブラリを、使用しないのに 読み込むというのも気が引ける部分もあります。 何とか、動的に、かつ、何も問題なく、jqueryをJavaScriptで読み込む方法は あるでしょうか？ このようなコードは、document.bodyがnullであるため、はじかれてしまいます。 var script = document.createElement('script'); script.src = 'http://hoge/jquery-1.js'; document.body.appendChild(script); var callee = arguments.callee; var interval = setInterval(function() { if (!document.evaluate) return; clearInterval(interval); interval = null; callee(); }, 100); このコードでも、jqueryを使用するものが、jQueryがないというエラーで、うまくいきません var scrptE = document.createElement("script"); scrptE.setAttribute("type", "text/javascript"); scrptE.setAttribute("language", "JavaScript"); scrptE.setAttribute("src", "http://hoge/jquery-1.js"); document.getElementsByTagName("head")[0].appendChild(scrptE); 以下のようなのは、googleapiのため、使わないものと考えます。 http://phpjavascriptroom.com/?t=ajax&p=jquery よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する