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

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

ただいまの
回答率

88.33%

現在の時刻での15分ごとの最新の画像を表示されるようにしたい

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 405

live1

score 5

実現したいこと

ウェブページで現在の時刻での15分ごとの最新の画像を表示されるようにしたいです。
そのために、部分的にURLを変える必要があります。
http://example.jp/live/image/20190816/1230/livecamera.jpg

http://example.jp/live/image/20190816/1245/livecamera.jpg

http://example.jp/live/image/20190816/1300/livecamera.jpg

http://example.jp/live/image/20190816/1315/livecamera.jpg

変わる内容は以下です。
年月日
YYYYMMDD(今日の年月日)
時刻
(0000|0015|0030|0045|0100|0115|0130|0145|0200|0215|0230|0245|0300|0315|0330|0345|0400|0415|0430|0445|0500|0515|0530|0545|0600|0615|0630|0645|0700|0715|0730|0745|0800|0815|0830|0845|0900|0915|0930|0945|1000|1015|1030|1045|1100|1115|1130|1145|1200|1215|1230|1245|1300|1315|1330|1345|1400|1415|1430|1445|1500|1515|1530|1545|1600|1615|1630|1645|1700|1715|1730|1745|1800|1815|1830|1845|1900|1915|1930|1945|2000|2015|2030|2045|2100|2115|2130|2145|2200|2215|2230|2245|2300|2315|2330|2345)

例えば、ページにアクセスしたときの時刻が2019年08月16日15時25分だった場合は、
http://example.jp/live/image/20190816/1515/livecamera.jpg
ページにアクセスしたときの時刻が2019年08月16日15時40分だった場合は、
http://example.jp/live/image/20190816/1530/livecamera.jpg
の画像が表示されるようにしたいです。

現在の時刻での最新の画像を表示されるようにしたいです。
プログラム言語はJavaScriptがいいですが、ほかの言語でも大丈夫です。

今考えているコードがありますので、参考にしてください。

コードで実行された結果を表示するコードもよくわからないので、教えていただけると幸いです。
こんな感じでしょうか。
<img id="#img" src="http://example.jp/live/image/20190816/1230/livecamera.jpg" style="width: 100%;">

ソースコード

<script type="text/javascript">
                var currentDate = new Date();
                currentDate.setMinutes(currentDate.getMinutes() - 15);

                var justMin = parseInt($.format.date(currentDate, "mm"), 10);
                justMin = justMin - justMin % 15;

                camera.url = camera.url.replace( /yyyyMMdd/g , $.format.date(currentDate, "yyyyMMdd"));
                camera.url = camera.url.replace( /hhmm/g , $.format.date(currentDate, "HH") + ("0" + justMin).slice(-2));
                break;

            default:
                break;
        }
                if(data[0].match(/200/)) {
                    $("img").attr("src", camera.url + "?" + (new Date()).getTime());
        }

    };
</script>

よろしくお願いいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/08/16 07:43

    現状提示されているコードの問題点は何でしょうか。
    それとも「このコードを参考にして作ってください」という作業依頼でしょうか。(となると質問ではないですね)

    キャンセル

  • 退会済みユーザー

    2019/08/18 01:11

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 1

checkベストアンサー

+5

window.onload = function() {
  var time= new Date();
  var year = time.getFullYear();
  var month = ("0"+(time.getMonth() + 1)).slice(-2);
  var date = ("0"+time.getDate()).slice(-2);
  var hour = ("0"+time.getHours()).slice(-2);
  var minute = time.getMinutes();
  var minute = Math.floor(minute / 15);
  if ( minute == 0 ) {
    var minute = '0' + minute;
  } else {
    var minute = minute * 15;
  }
  document.getElementById("image15").src = 'http://example.jp/live/image/'+year+month+date+'/'+hour+minute+'/livecamera.jpg';
}


確か#ってIDに使えなかったからimage15っていうIDのついたimgタグのsrcを書き換えるように作りました。
なんとなく思いつきで書いたのでもっと良い書き方あるかもしれません。

追記

window.onload = function() {
  var stime= new Date();
  var time = new Date(stime.getTime() - 540000);
  var year = time.getFullYear();
  var month = ("0"+(time.getMonth() + 1)).slice(-2);
  var date = ("0"+time.getDate()).slice(-2);
  var hour = ("0"+time.getHours()).slice(-2);
  var minute = time.getMinutes();
  var minute = Math.floor(minute / 15);
  if ( minute == 0 ) {
    var minute = '0' + minute;
  } else {
    var minute = minute * 15;
  }
  document.getElementById("image15").src = 'http://example.jp/live/image/'+year+month+date+'/'+hour+minute+'/livecamera.jpg';
}

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/08/17 05:00

    回答ありがとうございます。
    実現したいことができました。
    本当にありがとうございました!

    キャンセル

  • 2019/08/17 06:09 編集

    こんなことは可能でしょうか。
    画像がサーバーに送られるのが9分後になるので、
    9分程度見られない時間が発生してしまいます。
    そのため、6時6分にアクセスしたとき、
    0545の画像を表示するようにする。
    6時10分にアクセスしたときは0600の画像を表示する。
    どの部分を変更したらそのようなことができるでしょうか。
    よろしくお願いします。

    キャンセル

  • 2019/08/17 08:55

    追記しました。
    まぁまさか「コピペ」して使わないと思うのできちんと理解してからご利用ください。

    キャンセル

  • 2019/08/17 09:00

    ありがとうございます。
    勉強になりました。

    キャンセル

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

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

関連した質問

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