ホームページをリニューアルするの巻(18)−ページアップデート日付の自動挿入

0
    JUGEMテーマ:ホームページ作成

    ■ページアップデート日付の自動挿入

    えー、ホームページのリニューアルが一通り終わった後も、少しずつ改善を続けています。
    今までに行ったのが、
    ・ページアップデート日付の自動挿入
    ・Google翻訳機能の追加
    ・Google Adsenseの広告追加
    といったところです。これらについて、一つずつ解説していこうと思います。

    初回の今回は、ページアップデート日付の自動挿入、です。
    ページアップデート日付とは、フッターの右端に書いてある↓これの事です。


    訪問者に、目を皿のようにして更新有無を探してもらわなくても、ここの日付を見るだけで、前回訪問して以降にページが更新されたかどうかわかるようにする、という目的でおいています。
    ただし、これをいちいちページを直すたびに手で修正していると大変ですし、やってみて良くわかったのですが、とにかく忘れるんです。とてもやってられません。
    そこで、なんとか自動化できないか、というか、そのくらい自動化できるだろう、と思ってググったところ、あっさり見つかったのが次のコードです。

    <div id="lastUpdate">
    <p><script type="text/javascript">
    <!--
    var day = new Date(document.lastModified);
    var y = day.getFullYear();            // 年を取得
    var m = day.getMonth() + 1;            // 月を取得
    var d = day.getDate();                // 日にちを取得
    document.write("last update: " + y + "." + m + "." + d);
    // -->
    </script></p>
    </div><!--lastUpdate-->

    これはjavascriptの「document.lastModified」というプロパティを使っています。このプロパティは自分のhtmlファイルの最終更新日付を参照することができます。このページの最終更新日付は、このページのhtmlファイルの最終更新日付ですよね。よく考えれば当たり前の事でした。

    もう少し詳しく解説しましょう。まず1行目と11行目の<div id="lastUpdate">〜</div><!--lastUpdate-->、これはこの最終更新日付の文字の位置やフォント等を指定できるように、idを付けてマークアップしたものです。
    次に2行目と10行目の<p>〜</p>、これは、最終更新日付の文字を一つの段落としてマークアップしたものです。段落に対して定義されたマージン等をこれで適用しています。
    同じく2行目と10行目の<script type="text/javascript">〜</script>、この中身がjavascriptで書かれた命令であることを宣言しています。javascriptをhtmlファイルの中に書く場合、htmlの文法とは異なるコマンドを書き込むわけですので、普通に書くとエラーになってしまいます。そこでこれを避ける為にjavascriptの命令をhtmlのコメントマーク内に書きます、これが3行目と9行目の<!--〜-->になります。

    ここからが実際のjavascriptのコマンドです。
    ここではdocument.lastModifiedで取得した更新日付を、好みの書式に変換して書き出そうとしています。
    document.lastModifiedで取得した日時は、そのまま書きだすと
    02/13/2014 21:24:53
    こんな体裁で表示されます。このままでよければそのまま書き出せばいいのですが、最終更新時刻まで書かれるのも鬱陶しいですし、日付も日本式に年/月/日で書きたいと思ったりします。そこで書式の変換が必要になってくるのです。

    まず4行目の「var day = new Date(document.lastModified);」これは、「”day"という変数を新たに作ってそこに日付オブジェクトとしてdocument.lastModifiedを格納しなさい」というような意味になります。こうする前はdocument.lastModifiedはただの文字列でしたがDate()オブジェクトにすることで、年月日のような情報が認識され、個別に取り出すことが可能になります。
    5〜7行目がそれぞれ年月日を取得して、それぞれ別の変数を作って格納している部分です。やってみるとわかりますがなぜか月だけが0から始まるので、+1して実際の月の数字にしています。
    そして8行目のdocument.write()で、()の中身を文字列としてhtmlに吐き出しています。()の中身を変えることで好きな言葉を書き出させることができます。例えば日本語で("最終更新日付: " + y + "年" + m + "月" + d+ "日")なんてしてもいいですよね。

    では今回はここまで。次回はGoogle翻訳機能の追加です。



     


    コメント
    コメントする








       

    calendar

    S M T W T F S
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
    << November 2019 >>

    アクセスカウンタ

    合計:
    今日:
    昨日:

    selected entries

    categories

    archives

    recent comment

    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      小田きく江
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      てちくん
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      suraugi
    • いそべぇのペーパークラフトを作る(初級編)(12)
      てちくん
    • いそべぇのペーパークラフトを作る(初級編)(12)
      だべえ
    • noomでマイナス12kgのダイエットに成功!
      Yoko

    recommend

    recommend

    recommend

    ドール デザートメーカー ヨナナス901
    ドール デザートメーカー ヨナナス901 (JUGEMレビュー »)

    結構高いんです、でも欲しいんです!

    links

    profile

    書いた記事数:173
    最近の更新日:2017/01/30

    search this site.

    others

    mobile

    qrcode

    powered

    無料ブログ作成サービス JUGEM

    Google Adsense

    楽天ブックス

    楽天