カテゴリー
コンピューター

AngularJS の date フィルタで日本語の曜日を表示するサンプル

ポイント

  • 国際化、i18n、多言語対応用 JavaScript ファイルを読み込む。
  • date フィルターの使い方は同じ。

i18n ファイルの導入・入手手順

CDN を利用する場合

  1. AngularJS — Superheroic JavaScript MVW Framework の Download をクリック
  2. メニューが表示される。Extras の Browse additional modules
  3. i18n/ の angular-locale_ja-jp.js  へ行き、内容の確認と URL を入手

URL は、https://code.angularjs.org/1.4.4/i18n/angular-locale_ja-jp.js となりました♪

セルフホスティングする場合

  1. angular/angular.js · GitHub から AngularJS の ZIP ファイルをダウンロードして解凍
  2. src/ngLocale にある、angular-locale_ja-jp.js を使用する。

サンプルコード

  • 月、曜日を英語ではなく日本語で表示する。
  • date フィルターで日本語で表示するにはそれぞれ次が使える。
    • 月: MMMM、または、MM。
      ※ MMM は MMMM と同じように表示された。
    • 曜日: EEEE、または、EEE
  • コントローラーでは ビュー（HTML）に現在時刻（ユニックスタイム）を渡しているだけ

index.html

<!DOCTYPE html>
<html lang="ja" ng-app="japaneseWeekdayApp">
<head>
  <meta charset="UTF-8">
  <title>AngularJS の date フィルタで曜日をで表示するサンプル</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
  <script src="https://code.angularjs.org/1.4.4/i18n/angular-locale_ja-jp.js"></script>
  <script>
    angular.module('japaneseWeekdayApp', [])
    .controller('japaneseWeekdayController', function($scope) {
      $scope.now = Date.now();
    });
  </script>
</head>
<body>
  <div ng-controller="japaneseWeekdayController">
    <p>{{now}}</p>
    <p>{{now | date:'年: yyyy、月: MMMM、日: dd、曜日: EEEE'}}</p>
    <p>{{now | date:'年: yyyy、月: MM、日: dd、曜日: EEE'}}</p>
  </div>
</body>
</html>

表示結果

次のようになりました！

AngularJS の date フィルタで日本語の曜日を表示

ちなみに、 <script src=”https://code.angularjs.org/1.4.4/i18n/angular-locale_ja-jp.js”></script> を削除して、日本語対応以前の状態ですとこうなります♪

AngularJS の date フィルタで日本語での曜日表示対応以前

おわりに

いざサンプルを書こう！という時、HTML に AngularJS を読み込ませる方法に、恥ずかしながら躓いてしまいました＞＜。

ng-app を HTML に書いたり、JavaScript 部分では angular.module を変数に代入しない方法をとったりいたしました。どのようなケースではどのような読み込み方がベターなのかしら？

まだまだ AngularJS に馴染んでいないように感じられましたの＞＜。

最後に、参考ページです。ありがとう存じます！

以上です。

コメントを残す