今回は、内閣府のホームページより国民の祝日のCSVデータを読み込む方法を紹介します。
※Monacaにて「Onsen UI V2 Angular 1 Minimum」のプロジェクトを作成します。
libフォルダに、日時処理が簡単に行うことができる「moment-with-locales.min.js」と文字コードを変換することができる「encoding.min.js」をアップロードします。
Monacaデバッガーの結果です。
$http.get()を使ってCSVデータを読み込みますが、CSVデータはShift_JIS形式なので、文字化けした状態で読み込んでしまいます。
この場合、バイナリーとして読み込む必要があるため、responseType: “arraybuffer”を指定します。
encoding.jsを使ってバイナリーのShift_JIS→Unicodeの変換を行い、最後に文字列として変換します。
日付をmoment.jsの形式で配列に格納すれば、後の処理が楽になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"> <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <script src="lib/angular/angular.min.js"></script> <script src="lib/onsenui/js/onsenui.min.js"></script> <script src="lib/onsenui/js/angular-onsenui.min.js"></script> <script src="lib/moment-with-locales.min.js"></script> <script src="lib/encoding.min.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> <link rel="stylesheet" href="css/style.css"> <script> "use strict"; var app = ons.bootstrap("myApp", ["onsen"]); moment.locale("ja"); app.controller("mainController", function ($scope, $http) { $scope.holiday = []; // 祝日の配列 ons.ready(function () { $scope.download(); }); // ダウンロード $scope.download = function () { // CSVをバイナリーで取得する $http.get("https://www8.cao.go.jp/chosei/shukujitsu/syukujitsu.csv", { cache: false, responseType: "arraybuffer" }).then(function (res) { // 文字コードを変換する var csv = $scope.convert(res.data); var row = csv.split("\n"); var col = []; var holiday = []; var date = null; // ヘッダーの次の行から処理を行う for (var i = 1; i < row.length; i++) { if (row[i].length > 0) { // カンマで分割する col = row[i].match(/[^,]+/g); // 日付をYYYY/M/Dからmoment形式に変換する date = moment(col[0], "YYYY/M/D"); // 日付が今年か？ if (date.isSame(moment(), "year")) { holiday.push({ date: date, name: col[1] }); } } } $scope.holiday = angular.copy(holiday); }, function (err) { console.log("status:" + err.status + " status text:" + err.statusText); }); }; // 文字コード変換 $scope.convert = function (data) { var res = ""; var codeArray = new Uint8Array(data); var detect = Encoding.detect(codeArray); console.log("encode type: " + detect); if (detect != "UNICODE") { console.log("convert from " + detect + " to UNICODE"); var resArray = Encoding.convert(codeArray, { to: "UNICODE", from: detect }); res = Encoding.codeToString(resArray); } else { res = Encoding.codeToString(codeArray); } return res; }; }); </script> </head> <body> <ons-page ng-controller="mainController"> <ons-toolbar> <div class="center">今年の祝日</div> </ons-toolbar> <ons-list> <ons-list-item ng-repeat="item in holiday"> <ons-row vertical-align="center"> <ons-col width="30%">{{item.date.toISOString()|date:'M/d'}} ({{item.date.format("ddd")}})</ons-col> <ons-col width="70%">{{item.name}}</ons-col> </ons-row> </ons-list-item> </ons-list> </ons-page> </body> </html> |
