githubからダウンロードしたソースをローカルで動かしたい。

githubにあるこちらのソースをpcにダウンロードしました。
htmlだけを以下のように変更しました。

html
1<!DOCTYPE html>
2<!ここから>
3<html>
4<body>
5<link rel="stylesheet" type="text/css" href="style.css">
6<script type="text/javascript" src="script.js"></script>
7<!ここまで追加>
8<div class="overlay-navigation">
9  <nav role="navigation">
10    <ul>
11      <li><a href="#" data-content="The beginning">Home</a></li>
12      <li><a href="#" data-content="Curious?">About</a></li>
13      <li><a href="#" data-content="I got game">Skills</a></li>
14      <li><a href="#" data-content="Only the finest">Works</a></li>
15      <li><a href="#" data-content="Don't hesitate">Contact</a></li>
16    </ul>
17  </nav>
18</div>
19
20<section class="home">
21    <a href="http://codepen.io/fluxus/pen/gPWxXJ" target="_blank">Click for CSS version</a>
22  <div class="open-overlay">
23    <span class="bar-top"></span>
24    <span class="bar-middle"></span>
25    <span class="bar-bottom"></span>
26  </div>
27</section>
28<!ここから>
29</body>
30</html>
31<!ここまで追加>

これでinde.htmlをクリックすればローカルで表示されるようになったのですが、jsが動いてないのかここのように右側の三本バーのトグルが動かないでいます。

実装環境はmacです。

フロントは今まで全く書いたことなかったので、jsの振る舞いなどが分かりません。

フォルダ階層は
sampleフォルダ
｜＿ index.html
｜＿script.js
｜＿scripts
｜＿style.css

どうにか、ローカルでjsも動くようにしたいのですが、何が足りないでしょうか。。
初歩的な質問で申し訳ないですが、ご教授よろしくお願いします。

m.ts10806

2020/06/02 12:57

提示の「ファイル階層」だとファイルとフォルダが明示されていないので分かりません。もう少し確実に分かる情報提示願います。例えば、エクスプローラの画面キャプチャとか。 githubのものから変えていないのであればそのように記載してください。

行動規範の内容に同意します

回答2件

あまり親切に解説は書かれていませんがjQuery本体の読み込みが必要です。

script.js にある$()という記述はjQuery特有のセレクタ指定の記述です。

読み込み順もGithubにあるようにしてください。
必ずjQuery本体を先に読み込ませます。

ただ、プラグイン本体のコードをいじることがないのでしたら、Githubに提示されているのはCDNのようですし、jsもわざわざダウンロードする必要はなさそうに思います。

投稿2020/06/02 13:04

m.ts10806

総合スコア80875

PPF

2020/06/03 05:31 編集

jQueryの読み込みの順番は変えていないです。 githubにあるものをそそのまま使ってます。 htmlでjQueryのファイルを読み込むようにしましたが、動かなかったです。変更は以下の通り ```html <!DOCTYPE html> <html> <body> <link rel="stylesheet" type="text/css" href="style.css"> <script src="scritpts"></script> <script type="text/javascript" src="script.js"></script> <div class="overlay-navigation"> <nav role="navigation"> <ul> <li><a href="#" data-content="The beginning">Home</a></li> <li><a href="#" data-content="Curious?">About</a></li> <li><a href="#" data-content="I got game">Skills</a></li> <li><a href="#" data-content="Only the finest">Works</a></li> <li><a href="#" data-content="Don't hesitate">Contact</a></li> </ul> </nav> </div> <section class="home"> <a href="http://codepen.io/fluxus/pen/gPWxXJ" target="_blank">Click for CSS version</a> <div class="open-overlay"> <span class="bar-top"></span> <span class="bar-middle"></span> <span class="bar-bottom"></span> </div> </section> </body> </html> ```

m.ts10806

2020/06/03 05:51

伝わってないようで… 質問者さんの提示のコードにはjQueryの読み込み記述はありません。scritptsというファイルを読み込ませようとしているだけです。回答の冒頭に書いたようにgithubの説明が不親切なのです。scriptsのところは、githubの説明のscriptタグの記述に置き換えてねと言う意味になると思います。あの説明はあくまで「jQueryプラグインを日常的に使っている人向け」になっています。下記をそのまま挿入してください。 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="http://julian.com/research/velocity/build/jquery.velocity.min.js"></script> <script src="http://julian.com/research/velocity/build/velocity.ui.js"></script>

PPF

2020/06/03 06:17

回答ありがとうございます。 htmlを以下のように変更してみました。がバーをクリックしても動きませんでした。 ```html <!DOCTYPE html> <html> <body> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="http://julian.com/research/velocity/build/jquery.velocity.min.js"></script> <script src="http://julian.com/research/velocity/build/velocity.ui.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="script.js"></script> <div class="overlay-navigation"> <nav role="navigation"> <ul> <li><a href="#" data-content="The beginning">Home</a></li> <li><a href="#" data-content="Curious?">About</a></li> <li><a href="#" data-content="I got game">Skills</a></li> <li><a href="#" data-content="Only the finest">Works</a></li> <li><a href="#" data-content="Don't hesitate">Contact</a></li> </ul> </nav> </div> <section class="home"> <a href="http://codepen.io/fluxus/pen/gPWxXJ" target="_blank">Click for CSS version</a> <div class="open-overlay"> <span class="bar-top"></span> <span class="bar-middle"></span> <span class="bar-bottom"></span> </div> </section> </body> </html> ```

m.ts10806

2020/06/03 06:22

ブラウザの開発ツールのコンソールにエラーは出てませんか？ひとまず、質問に現在のコードを追記してください。ご覧の通り、コメントではマークダウンのききません

PPF

2020/06/03 06:31

エラー出てました。 [Error] Not allowed to load local resource: file://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js [Error] ReferenceError: Can't find variable: $ グローバルコード (script.js:1) 最初のエラーは確かにローカルにはそんなファイルがないので、エラーになりますね。これはローカルにjquery.min.jsファイルをダウンロードするれば良いと思いますができれば <script src="http://julian.com/research/velocity/build/jquery.velocity.min.js"></script> のようにhttpで外に読みに行ける作りにできればと思ってます。これは少し自分でも調べてみます。その後に出てきているエラーはjQueryが読み込みできていないから$が見つからないって言われているのでしょうか？

PPF

2020/06/03 06:37

m.ts10806

2020/06/03 06:47

あぁ、ローカルPCなんですね。 //だと現在のプロトコルをみにいくので、提示のエラーになるわけですね。大抵はWebサーバー上で動作することが想定して組まれるわけですから。あとは、デバッグですかね。実装からして少々古そうなので…。

PPF

2020/06/03 06:50 編集

githubに載ってたソースにプロトコルの記載がなかったです。それでhttpsで見にいくようにしたらエラーは無くなりましたが、三本バーのトグルをクリックしてもjQueryが呼ばれていないように思います。これはhtml側の書き方がおかしいのでしょうか？

m.ts10806

2020/06/03 06:58

先ほども申しましたように、githubでのこの作者の解説が不親切というか、あくまで「日常的にプラグインを利用している、いわゆる分かってる人向け」だからです。プロトコルの件も分かっている人には当然の仕様なので、自身が導入しようとしている環境にあわせて書き換えられます。さて、先ほども書きましたが、ひとまず、質問に現在のコードを追記してください。ご覧の通り、コメントではマークダウンのききませんあと「デバッグ」してください。実装が古いものを利用する際は実は自己責任の割合が大きいのです。

行動規範の内容に同意します

自己解決

2つのファイルを訂正する必要がありました。

html
1<!DOCTYPE html>
2<html>
3<body>
4<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
5<script src="http://julian.com/research/velocity/build/jquery.velocity.min.js"></script>
6<script src="http://julian.com/research/velocity/build/velocity.ui.js"></script>
7<link rel="stylesheet" type="text/css" href="style.css">
8<script type="text/javascript" src="script.js"></script>
9<div class="overlay-navigation">
10  <nav role="navigation">
11    <ul>
12      <li><a href="#" data-content="The beginning">Home</a></li>
13      <li><a href="#" data-content="Curious?">About</a></li>
14      <li><a href="#" data-content="I got game">Skills</a></li>
15      <li><a href="#" data-content="Only the finest">Works</a></li>
16      <li><a href="#" data-content="Don't hesitate">Contact</a></li>
17    </ul>
18  </nav>
19</div>
20
21<section class="home">
22    <a href="http://codepen.io/fluxus/pen/gPWxXJ" target="_blank">Click for CSS version</a>
23  <div class="open-overlay">
24    <span class="bar-top"></span>
25    <span class="bar-middle"></span>
26    <span class="bar-bottom"></span>
27  </div>
28</section>
29</body>
30</html>
31

javaScript
1     $(function(){
2     $('.open-overlay').click(function() {
3       $('.open-overlay').css('pointer-events', 'none');
4       var overlay_navigation = $('.overlay-navigation'),
5         top_bar = $('.bar-top'),
6         middle_bar = $('.bar-middle'),
7         bottom_bar = $('.bar-bottom');
8
9       overlay_navigation.toggleClass('overlay-active');
10       if (overlay_navigation.hasClass('overlay-active')) {
11
12         top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar');
13         middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar');
14         bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar');
15         overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down')
16         overlay_navigation.velocity('transition.slideLeftIn', {
17           duration: 300,
18           delay: 0,
19           begin: function() {
20             $('nav ul li').velocity('transition.perspectiveLeftIn', {
21               stagger: 150,
22               delay: 0,
23               complete: function() {
24                 $('nav ul li a').velocity({
25                   opacity: [1, 0],
26                 }, {
27                   delay: 10,
28                   duration: 140
29                 });
30                 $('.open-overlay').css('pointer-events', 'auto');
31               }
32             })
33           }
34         })
35
36       } else {
37         $('.open-overlay').css('pointer-events', 'none');
38         top_bar.removeClass('animate-top-bar').addClass('animate-out-top-bar');
39         middle_bar.removeClass('animate-middle-bar').addClass('animate-out-middle-bar');
40         bottom_bar.removeClass('animate-bottom-bar').addClass('animate-out-bottom-bar');
41         overlay_navigation.removeClass('overlay-slide-down').addClass('overlay-slide-up')
42         $('nav ul li').velocity('transition.perspectiveRightOut', {
43           stagger: 150,
44           delay: 0,
45           complete: function() {
46             overlay_navigation.velocity('transition.fadeOut', {
47               delay: 0,
48               duration: 300,
49               complete: function() {
50                 $('nav ul li a').velocity({
51                   opacity: [0, 1],
52                 }, {
53                   delay: 0,
54                   duration: 50
55                 });
56                 $('.open-overlay').css('pointer-events', 'auto');
57               }
58             });
59           }
60         })
61       }
62     })
63     });