さきほどtwitterを見てたらこんなツイートが話題になってました。
○○のサービスが受けられるのは○○年○○月○○日までです！
みたいなカウントダウン系の文章を、期日が過ぎたら自動で他の文章に変えたいって需要です。
なにやら超欲しい人だらけらしいので作ってみました。
目次
前提
話題に挙がってるのはwordpressのプラグインらしいんですが、wordpress使ってない人にも需要ありそうな雰囲気だったのでjavascriptにしました。
なので普通のサイトでもレンタルブログでもとりあえずjavascriptさえ動けばコピペだけで導入できます。
ただ細かいエラー処理とか入れてないので、書式に合わない形でパラメータ入れると動かないです。
あと免責事項として、あくまでもご利用は自己責任でお願いします。
万が一いかなる損害が発生してもこちらでは一切責任を負いません。
メイン処理 (ヘッダタグ内にjavascriptのコードをコピペ)
<!--
function updateStringAfterDeadline(target_day,target_time,str_before,str_after) {
var msg = str_after;
var today = new Date();
var deadline = Math.ceil((Date.parse(target_day + " " + target_time)-today.getTime()) / 1000);
if ( deadline > 0 ) {
msg = str_before;
}
days = Math.floor(deadline / 24 / 60 / 60);
days_sec = days * 24 * 60 * 60;
hours = Math.floor((deadline-days_sec) / 60 / 60);
hours_sec = hours * 60 * 60;
minutes = Math.floor((deadline-days_sec-hours_sec) / 60);
minutes_sec = minutes * 60;
secs = deadline-days_sec-hours_sec-minutes_sec;
msg = msg.replace("%D%",days);
msg = msg.replace("%H%",hours);
msg = msg.replace("%M%",minutes);
msg = msg.replace("%S%",secs);
document.write(msg);
}
-->
</script>
これが残りの日数を計算して文章を切り替える処理です。
引数で期日の年月日、時刻、期日前の文言、期日後の文言を渡しています。
よく分からない人はとりあえず「updateStringAfterDeadline」っていう魔法を使って何やら計算するってことだけ知っといてください。
まずはこのコードをヘッダ部分に丸々コピペします。
念のため作業前にバックアップを取ることをオススメします。
wordpressを使ってる人
wordpressを使ってる人なら外観のテーマ編集からいけるはずです。
①[外観]
②[テーマの編集]
③[編集するテーマを選択] (自分が使用しているテーマを選択)
④[テーマヘッダー(header.php)]
⑤<body>タグの手前にある</header>の直前の行にコピペします
⑥コピペしたら下にスクロールして「ファイルを更新」をクリック
wordpressを使ってない人
wordpressを使ってない人はご自身のブログのヘッダ部分を直接編集してコピペしてください。
↑ヘッダタグ開始位置
ヘッダタグの中にコピペする
↓ヘッダタグの終了位置
</head>
各記事からjavascriptを記述
コードをコピペしたらもう準備完了なんで、あとは記事の本文から呼び出すだけです。
とりあえずこれをそのまま記事にコピペすると↓こんな感じで2030年2月18日までの時間が表示されます。（ブラウザを更新すると秒数が変わるはずです）
次は、パラメータを少し変えて2016年までの日数を表示してみましょう。
すると↓こんな感じで「期日後の文章」が表示されます。
既に期日を過ぎているので画面を更新しても変更ありません。
慣れない方には何が何やらサッパリだと思うんで、1つずつ説明していきます。
javascriptの使用宣言
黄色字の部分です。
これは「ここからここまでjavascriptを使いますよ～」という命令です。
これについてはただのオマジナイなので、そういうものだと思ってください。
メイン処理を呼び出す
黄色字で囲んだこの白字と赤字の部分が肝です。
まず白字の部分ですが、これは
「updateStringAfterDeadlineを使いますよ〜」
「その際にパラメータを４つ渡しますよ〜」
という意味です。
パラメータはカンマ区切りで、必ずダブルクオーテーションでくくって指定します。
そして、赤字で記されているのがパラメータです。
必ずこの順番で４つ指定する必要があります。
| 順番 | パラメータ概要 | 詳細 |
|---|---|---|
| 1 | 期日とする年月日 |
期日の 年/月/日 を半角文字で指定します。 入力書式は YYYY/MM/DD (Year/Month/Day)です。 |
| 2 | 期日の時刻 |
期日の 時:分:秒 を半角文字で指定します。 入力書式は hh:mm:ss (hour:minute:sec)です。 |
| 3 | 期日前に表示する文章 |
期日前に表示しておきたい文章を指定します。 以下の特殊文字を指定すると、 残りの日数、時間、分、秒を表示できます。 %D% : 日数 |
| 4 | 期日後に表示する文章 |
期日後に表示しておきたい文章を指定します。 特殊文字はありません。 指定した文章がそのまま表示されます。 |
赤字部分をご自分の用途に合わせて書き換えてください。
試してみる
書き方がよく分からないという方の為にジェネレータも用意しておきます。
コピペ用。↓これを自分のブログにコピペしてください。
まとめ
習うより慣れろなので、実際にコピペしたりパラメータ変更してみたりして試してみて下さい。
たぶん記事だけじゃなくてサイドバーでもヘッダでも動くはずです。
どうせなら毎秒の更新までやろうかと思いましたが、横着してやめました。
不明点あればtwitterまでご連絡ください。
