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

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

ただいまの
回答率

87.49%

jqueryで、その日の日付に応じた外部HTMLファイルの内容を読み込みたい

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 3,195

score 18

いつも大変お世話になっております。
jquery、javascriptに関する基礎知識がないためトンチンカンな質問になっているかもしれませんが、どうぞご容赦ください。

【やりたいこと】
・0101.html(1月1日用)、0102.html(1月2日用)…のように、一年365日分のHTMLファイルを用意する。
・上記HTMLファイル内の一部のコンテンツ(ID名はすべてのファイルで共通)を、index.htmlに読み込む。
・ただし、index.htmlでjavascriptによる日付の取得を行い、今日が11月11日であれば「1111.html」というファイルを、11月12日なら「1112.html」というファイルの中身を読みこむようにしたい。

【現在までにできていること】
・外部ファイルの特定部分(IDで指定された部分)を読み込むことはできています。

【できていないこと】
・javascriptで取得した日付に応じて、読み込むHTMlファイルを動的に変更すること

↓index.html(コンテンツを読み込むファイル)

<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
 </script>
 <script src="load.js"></script>
</head>
<body>
 <h1>ここに外部 HTML ファイルを表示します</h1>
 <div id="page">dst</div>
</body>

↓external.html(読み込まれる側のファイル)

<body>
 <div id="contents">
  <h2>外部ファイル</h2>
  <p>この文章は external.html に記載された外部 HTML の文章です</p>
 </div>
</body>


↓load.js

$(function() {
    $.ajax('external.html', {
        timeout : 1000, // 1000 ms
        datatype:'html'
    }).then(function(data){
        var out_html = $($.parseHTML(data));//parse
        $('#page').empty().append(out_html.filter('#contents')[0].innerHTML);//insert

        //var sub_html = out_html.filter(function(index) {
        //    return $(this).attr("id") === "sub";
        //})[0].innerHTML;//extract
        //var sub2_html = out_html.filter(function(index) {
        //    return $(this).attr("id") === "sub2";
        //})[0].innerHTML;//extract
        //$('#page').empty().append(sub_html);//insert
        //$('#page2').empty().append(sub2_html);//insert
    },function(jqXHR, textStatus) {
        if(textStatus!=="success") {
            var txt = "<p>textStatus:"+ textStatus + "</p>" +
                "<p>status:"+ jqXHR.status + "</p>" +
                "<p>responseText : </p><div>" + jqXHR.responseText +
                "</div>";
            $('#page').html(txt);
        }
    });
    // $('#page').load('external.html');
});

このコードをベースに、external.htmlではなく、日付ごとに連番を降ったhtmlファイルを日付に応じて読み込むことはできますでしょうか?
できるとすれば、具体的にどのように記述すればよいのでしょうか。

ややこしい説明で恐縮ですが、どなたかご教授頂けますと幸いです。
どうぞよろしくお願い致します。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

+3

あなたのやりたい事をあなたの代わりにやってくれるサイトは、
ここじゃなくてクラウドファンディングという仕事の斡旋サイトになるからね。
だから全てをやってあげる事はできない。ヒントだけ出すから頑張って実装していこう。

load.jsが何やってるかをざっくり解説するから、
keiさんの回答と合わせてどうすればいいかよく考えて実装していこう。


$.ajax('external.html', options).then(fn, fn);

まず、この$.ajaxの第一引数'external.html'
JavaScriptに限らず大抵のプログラミング言語では、変数というメモリ空間を宣言して値を保存することが出来る。

ブラウザー上でF12キーを押すとコンソール画面が表示されるから、下記の内容を打ち込んでみよう。
コンソール欄が見えない?なら更にEscキーでコンソール欄の表示・非表示が切り替わる。
console.log()のカッコの中に調べたい対象を入れて実行すると、コンソール上に対象に何が入っているかを表示してくれる。

// この行のように行の先頭に「//」と記入すると、同じ行のそれ以降の記述は実行されない
console.log('external.html'); // "external.html"

var url = 'external.html';
console.log(url); // "external.html"

このように、関数を実行する直前でconsole.log('external.html')等と文字列を宣言することも出来るし、
プリペイドカードにお金をチャージしてから支払うように、一度var url = 'external.html'という風にurl変数を宣言して、その中に文字列を埋め込んでおき、console.log(url)という風に利用することもできる。

つまり、こう書き換えるわけだね。

var url = 'external.html';
$.ajax(url, options).then(fn, fn);

次に変数には何が入るかを解説しよう。
思いつくものは大抵なんでも入れておくことが可能だね。
変数の宣言は行の先頭でvar、忘れるとエラーになるので気をつけて。

var url = 'external.html';
var num = 123;
var calc = 10 + num; // こんな風に式も書ける
var options = {
  timeout : 1000,
  datatype: 'html'
};
var fn = function (data) {
  var out_html = $($.parseHTML(data));
  $('#page').empty().append(out_html.filter('#contents')[0].innerHTML);
}

console.log(url); // "external.html"
console.log(num); // 123
console.log(calc); // 133 <- 式を展開した結果が格納されている

url = '1123.html' // 2回目書くと上書き代入、external.htmlは消去される
console.log(url); // "1123.html"

var month = 5;
var day = 20;
url = month + day + '.html'; // + 演算子を使って文字列同士を連結させる事もできる
console.log(url); // "25.html" <- 月と日付が足されて駄目だ

url = month + '-' + day + '.html'; // 間にハイフンを入れてみる
console.log(url); // "5-10.html"

url = '' + month + day + '.html'; // + 演算子は左から解釈していくので、無意味な空文字列を左に埋め込んでやると…
console.log(url); // "520.html" <- 勝手に数値同士で計算されなくなった

今回やりたい事は全部詰め込んだ。
一度勉強だと思って数行ずつでも良いんで全てコピペするなり、打ち込むなりして挙動を確認しておこう。


日付ごとに連番を降ったhtmlファイルを日付に応じて読み込むことはできますでしょうか?

ここまで読んだらもう出来るね?

日付ごとに連番を振ったhtmlの部分の文字列はkeiさんの回答で作れる。
それを加工してやればいい、
以下大ヒント。

var today = new Date();
var month = ?????; // todayから月の情報を取り出す
var day = ?????; // todayから日の情報を取り出す
var url = month + '-' + day + '.html'; // 連番のファイルのURLを文字列連結で作り出す、文字列が気に入らなかったら色々修正頑張って
$.ajax(url, { // 'external.html'の代わりにurlを使ってアクセスさせる

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/11/12 12:45

    大変丁寧にご解説頂き、ありがとうございました。
    Webデザインが専門のため、javascriptにうとくご迷惑をおかけいたします。
    よくわからないながらもご教授頂いた内容をもとに解決することができました。
    本当にありがとうございます。

    キャンセル

+2

この辺の情報でどうでしょう?

【文字列の連結 - 演算子 - JavaScript入門】
https://www.ajaxtower.jp/js/ope/index16.html

【今日の日付と現在時刻-JavaScript入門】
http://www.pori2.net/js/date/1.html

【JavaScriptでDateオブジェクトを使って日付を表示する方法【初心者向け】 | TechAcademyマガジン】
https://techacademy.jp/magazine/5587

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/11/11 15:21

    早速のご回答ありがとうございます!
    javascriptのDateオブジェクトを使って日付を取得し、月と日の文字列を連結させてファイル名を取得する…という流れはなんとなく理解できるのですが、恥ずかしながらjavascriptの知識が乏しいため、それをload.jsにどう記述すればいいのかがわかりません…。
    本当にお手数ですが、どのような記述を行えばいいか、具体的に教えて頂けますでしょうか。
    どうぞよろしくお願い致します。

    キャンセル

  • 2017/11/11 15:22

    とても基礎的な部分なので、まずJavaScriptを勉強されてはいかがでしょうか。

    キャンセル

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

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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