Angular-materialで言語切替＆クッキー保存＆デフォルトはブラウザ言語

パッケージをインストール

$ npm install angular-translate
$ npm install angular-translate-storage-cookie
$ npm install angular-translate-storage-local
$ npm install angular-translate-loader-static-files
$ npm install angular-translate-handler-log

$ npm install angular-translate

$ npm install angular-translate-storage-cookie

$ npm install angular-translate-storage-local

$ npm install angular-translate-loader-static-files

$ npm install angular-translate-handler-log

HTML

  <md-select ng-model="selectedLanguage" ng-model-options="{trackBy: '$value.id'}" ng-change="setSelectedLanguage(selectedLanguage);" style="font-size: 15px;">
    <md-option ng-value="language" ng-repeat="language in languages">{{ language.name }}</md-option>
  </md-select>

<md-select ng-model="selectedLanguage" ng-model-options="{trackBy: '$value.id'}" ng-change="setSelectedLanguage(selectedLanguage);" style="font-size: 15px;">

<md-option ng-value="language" ng-repeat="language in languages">{{ language.name }}</md-option>

</md-select>

AngularJS

(function () {
  'use strict';

  angular.module('mean.meanStarter', ['ngMaterial', 'pascalprecht.translate'])
    .controller('StarterController', StarterController)
    .config(['$translateProvider', function($translateProvider) {
    	
    	// デフォルトは、ブラウザの言語設定に依存する
    	var selectedLanguage = $translateProvider.resolveClientLocale().substr(0,2);
    	// クッキーが設定されている場合は、クッキーの言語にする
    	var $cookies;
		angular.injector(['ngCookies']).invoke(['$cookies', function(_$cookies_) {
			$cookies = _$cookies_;
		 }]);
		$translateProvider.useStaticFilesLoader({
			prefix: '/meanStarter/assets/i18n/locale-',
			suffix: '.json'
		});
		
		if($cookies.get('selectedLanguage')) {
			selectedLanguage = $cookies.get('selectedLanguage');
		}
		$translateProvider.preferredLanguage(selectedLanguage);
		$translateProvider.fallbackLanguage('en');
		$translateProvider.useMissingTranslationHandlerLog();
		$translateProvider.useLocalStorage();
		$translateProvider.use(selectedLanguage);
	}]);

  StarterController.$inject = ['$scope', 'Global', '$translate', '$cookies'];

  function StarterController ($scope, Global, $translate, $cookies) {
	
	
	$scope.global = Global;
	$scope.package = {
    	name: 'meanStarter'
	};
    
    // 言語の切り替え
    $scope.languages = [
    	{ id: 'en', name: 'ENGLISH' },
    	{ id: 'ja', name: '日本語' }
    ];
    
    // 言語選択でデフォルトセット
    $scope.selectedLanguage = { id: 'en', name: 'ENGLISH' };
    if($cookies.get('selectedLanguage')) {
    	angular.forEach($scope.languages, function(val, key) {
    		if($translate.proposedLanguage() == val.id) {
    			$scope.selectedLanguage = val;
    		}
    	})
    }
    // 言語の切り替えをクッキーに反映させる
    $scope.setSelectedLanguage = function(selectedLanguage) {
    	var dayForCookies = new Date();
    	// 365日間は言語設定のクッキーを保持
    	dayForCookies.setDate(dayForCookies.getDate() + 365);
    	var cookiesOption = {expires: dayForCookies, path: '/'};
    	$cookies.put('selectedLanguage', selectedLanguage.id, cookiesOption);
    	$translate.use(selectedLanguage.id);
    };
  }
})();

(function () {

'use strict';

angular.module('mean.meanStarter', ['ngMaterial', 'pascalprecht.translate'])

.controller('StarterController', StarterController)

.config(['$translateProvider', function($translateProvider) {

// デフォルトは、ブラウザの言語設定に依存する

var selectedLanguage = $translateProvider.resolveClientLocale().substr(0,2);

// クッキーが設定されている場合は、クッキーの言語にする

var $cookies;

angular.injector(['ngCookies']).invoke(['$cookies', function(_$cookies_) {

$cookies = _$cookies_;

}]);

$translateProvider.useStaticFilesLoader({

prefix: '/meanStarter/assets/i18n/locale-',

suffix: '.json'

});

if($cookies.get('selectedLanguage')) {

selectedLanguage = $cookies.get('selectedLanguage');

}

$translateProvider.preferredLanguage(selectedLanguage);

$translateProvider.fallbackLanguage('en');

$translateProvider.useMissingTranslationHandlerLog();

$translateProvider.useLocalStorage();

$translateProvider.use(selectedLanguage);

}]);

StarterController.$inject = ['$scope', 'Global', '$translate', '$cookies'];

function StarterController ($scope, Global, $translate, $cookies) {

$scope.global = Global;

$scope.package = {

name: 'meanStarter'

};

// 言語の切り替え

$scope.languages = [

{ id: 'en', name: 'ENGLISH' },

{ id: 'ja', name: '日本語' }

];

// 言語選択でデフォルトセット

$scope.selectedLanguage = { id: 'en', name: 'ENGLISH' };

if($cookies.get('selectedLanguage')) {

angular.forEach($scope.languages, function(val, key) {

if($translate.proposedLanguage() == val.id) {

$scope.selectedLanguage = val;

}

})

}

// 言語の切り替えをクッキーに反映させる

$scope.setSelectedLanguage = function(selectedLanguage) {

var dayForCookies = new Date();

// 365日間は言語設定のクッキーを保持

dayForCookies.setDate(dayForCookies.getDate() + 365);

var cookiesOption = {expires: dayForCookies, path: '/'};

$cookies.put('selectedLanguage', selectedLanguage.id, cookiesOption);

$translate.use(selectedLanguage.id);

};

}

})();

MEAN.IOってフロントエンドをChromeの開発ツールでデバッグしづらい

先に書いたように

MEAN.IOは使用するjavascriptを/bundle/app.jsにまとめてくれる。

なので、軽くなるのだがその分デバッグがしづらい。

Chromeの開発ツールを使うのは不可能。。

node_componentsの中身をデバッグする必要はないので、そこがまとめられているのは

ヨシとして、

packagesの中身がまとめられるのはやめる。

デフォルトで/app.js の45行目あたりpackages内をまとめる部分をコメントアウト

//  var req = require.context('./packages', true, /\/public\/(?!tests|assets|views)(.*)\.js$/);
//  req.keys().map(req);
  var req = require.context('./node_modules', true, /\/meanio-(.*)\/public\/(?!tests|assets|views)(.*)\.js$/);
  req.keys().map(req);

// var req = require.context('./packages', true, /\/public\/(?!tests|assets|views)(.*)\.js$/);

// req.keys().map(req);

var req = require.context('./node_modules', true, /\/meanio-(.*)\/public\/(?!tests|assets|views)(.*)\.js$/);

req.keys().map(req);

/packages/custom/…./server/views/includes/foot.html

にハードコーディングでインサートしていく。

<!-- 開発用（本番では外すこと） START -->
<script src="/packages/custom/porkyou/public/controllers/header.js"></script>
<script src="/packages/custom/porkyou/public/controllers/index.js"></script>
<script src="/packages/custom/porkyou/public/controllers/starter.js"></script>
<script src="/packages/custom/porkyou/public/controllers/translation.js"></script>
<script src="/packages/custom/porkyou/public/routes/system.js"></script>
<script src="/packages/custom/porkyou/public/routes/users.js"></script>
<script src="/packages/custom/porkyou/app.js"></script>
<!-- 開発用（本番では外すこと） END -->

MEAN.IOでnpmでjavascriptのパッケージインストール・インポート

件名の通り

まずは、入れたいパッケージをnpmでインストール

$ npm install angular-translate --save

1	$ npm install angular-translate --save

/app.jsの上の方に

import 'angular-translate';

1	import 'angular-translate';

して

gulp

gulp

angular-translateを/bundle/app.jsにもとめて入れ込んでくれる。

mean.ioのデフォルトでインストールした状態なら

/packages/custom/…./server/views/includes/foot.html

に

<script type="text/javascript" src="/bundle/app.js"></script>

1	<script type="text/javascript" src="/bundle/app.js"></script>

と書かれているはず。

gulpでbowerのパッケージを自動挿入

gulp-injectを使う。

インストール(開発環境だけでいいので、–save-dev)

npm install --save-dev wiredep

1	npm install --save-dev wiredep

挿入されるhtmlを編集

// cssが挿入される場所
<!-- bower:css -->
<!-- endbower -->
// javascriptが挿入される場所
<!-- bower:js -->
<!-- endbower -->

// cssが挿入される場所

// javascriptが挿入される場所

パッケージの挿入先を指し示すためgulpfile.js編集

// bowerのスクリプトをHTMLに埋め込む
gulp.task('wiredep', function() {
  var wiredep = require('wiredep').stream;

  return gulp
    .src(['./packages/custom/porkyou/server/views/includes/head.html', './packages/custom/porkyou/server/views/includes/foot.html'])
    .pipe(wiredep()) // wiredep bower dependencies
//    .pipe($.inject(gulp.src(['./packages/custom/porkyou/server/views/includes/*.js', './packages/custom/porkyou/server/views/includes/*.css']), {
//      relative: true // no need for the './src/client' part
//    }))    
    .pipe(gulp.dest('./packages/custom/porkyou/server/views/includes')) // output the index.html
})

// bowerのスクリプトをHTMLに埋め込む

gulp.task('wiredep', function() {

var wiredep = require('wiredep').stream;

return gulp

.src(['./packages/custom/porkyou/server/views/includes/head.html', './packages/custom/porkyou/server/views/includes/foot.html'])

.pipe(wiredep()) // wiredep bower dependencies

// .pipe($.inject(gulp.src(['./packages/custom/porkyou/server/views/includes/*.js', './packages/custom/porkyou/server/views/includes/*.css']), {

// relative: true // no need for the './src/client' part

// }))

.pipe(gulp.dest('./packages/custom/porkyou/server/views/includes')) // output the index.html

})

取り敢えずテスト的にbower

$ bower init

1	$ bower init

リターン連続

$ bower install angular-translate --save

1	$ bower install angular-translate --save

でangular-translateをインストール

bower.jsonを確認

{
  "name": "mean",
  "description": "MEAN.io: A fullstack JavaScript framework powered by MongoDB, ExpressJS, AngularJS, NodeJS.",
  "main": "",
  "authors": [
    "https://......."
  ],
  "license": "MIT",
  "homepage": "https://.......",
  "moduleType": [
    "node"
  ],
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular-translate": "^2.15.1"
  }
}

{

"name": "mean",

"description": "MEAN.io: A fullstack JavaScript framework powered by MongoDB, ExpressJS, AngularJS, NodeJS.",

"main": "",

"authors": [

"https://......."

"license": "MIT",

"homepage": "https://.......",

"moduleType": [

"node"

"ignore": [

"**/.*",

"node_modules",

"bower_components",

"test",

"tests"

"dependencies": {

"angular-translate": "^2.15.1"

}

dependenciesに挿入されて

bower_componentsフォルダにangular-translateがインストールされているのを確認。

では、gulp wiredepを実行。

gulp wiredep

1	gulp wiredep

↓はhead.html, foot.htmlに設置

// cssが挿入される場所
<!-- bower:css -->
<!-- endbower -->
// javascriptが挿入される場所
<!-- bower:js -->
<!-- endbower -->

// cssが挿入される場所

// javascriptが挿入される場所

これでちゃんとhead.html, foot.htmlにbowerからのcss, javascriptが挿入されていることを確認。

基本は相対パスで挿入されてしまう。

絶対パスがいいので↓のようにgulpfile.jsを変更

// bowerのスクリプトをHTMLに埋め込む
gulp.task('wiredep', function() {
  var wiredep = require('wiredep').stream;

  return gulp
    .src(['./packages/custom/porkyou/server/views/includes/head.html', './packages/custom/porkyou/server/views/includes/foot.html'])
    .pipe(wiredep({
      ignorePath: '../../../../../../bower_components/',
      fileTypes: {
        html: {
          replace: {
            js: '<script src="/bower_components/{{filePath}}"></script>',
            css: '<link rel="stylesheet" href="/bower_components/{{filePath}}" />'
          }
        }
      }
    }))
// wiredep bower dependencies
//    .pipe($.inject(gulp.src(['./packages/custom/porkyou/server/views/includes/*.js', './packages/custom/porkyou/server/views/includes/*.css']), {
//      relative: true // no need for the './src/client' part
//    }))    
    .pipe(gulp.dest('./packages/custom/porkyou/server/views/includes')) // output the index.html
})

// bowerのスクリプトをHTMLに埋め込む

gulp.task('wiredep', function() {

var wiredep = require('wiredep').stream;

return gulp

.src(['./packages/custom/porkyou/server/views/includes/head.html', './packages/custom/porkyou/server/views/includes/foot.html'])

.pipe(wiredep({

ignorePath: '../../../../../../bower_components/',

fileTypes: {

html: {

replace: {

js: '<script src="/bower_components/{{filePath}}"></script>',

css: '<link rel="stylesheet" href="/bower_components/{{filePath}}" />'

}

}))

// wiredep bower dependencies

// .pipe($.inject(gulp.src(['./packages/custom/porkyou/server/views/includes/*.js', './packages/custom/porkyou/server/views/includes/*.css']), {

// relative: true // no need for the './src/client' part

// }))

.pipe(gulp.dest('./packages/custom/porkyou/server/views/includes')) // output the index.html

})

AWSのCodeCommitはまだ未成熟

AWSの提供するサービスでCodeCommitと言うものがある、

これは要はGitHubみたいな動きをしてくれるのだが。。

ちょっと何かと惜しくて。

煩わしいです。

私の場合、AWSを使っているからといって使ってみたら

Macからgit cloneをしようとしても403エラーを回避できなくなってしまいました。

Macの403エラー回避方法がAWSオリジンのサイトに乗っているので、

その方法でKeyChainなどをいじったり、やってみたのだが、全く効果なし。

残念ですが、取り敢えず今のところCodeCommit自体を使うことが間違えという結論に至りました。

MEAN.IOをVagrantの共有フォルダで使うのに向いてない

今までの開発の方式にならってMEAN.IOを使うのにも

Vagrantの共有フォルダで開発をしていたが、結論から言うと

MEAN.IOを使うときはVagrantの共有フォルダは絶対に使わないほうがいい。

MEAN.IOの折角の便利な機能が全然使えなくなるし、

エラーが連発する。

工夫したら使えるようにする事もできなくはないが、

断然効率が悪い。

原因の多くは、Vagrantの共有フォルダでchmodができないことにある。

頑張って結局できなかったことがおおくて、悔しかったので記録しておく。

MACのMongoDBをスタート

brew services start mongodb

1	brew services start mongodb

Vagrantの共有フォルダでNode.jsを編集するたびに自動再起動する

結論から、

私の結論としてはnodemonを使うしかないかと。

ソース監視の方式に

nodemon

supervisor

node-dev

pm2

っといったアプリがありますが、すべてデフォルトではVagrantの共有フォルダに反応してくれません。

試行錯誤で結局全て試してしまったので、紹介する。

Nodemonをインストール

nodemonをインストール

npm install nodemon -g

1	npm install nodemon -g

後はnodeコマンドの代わりにnodemonを使うだけ

$ nodemon server.js

1	$ nodemon server.js

これがスタンダードなやり方。

VagrantのSynced folderを使っている場合には遅くするために”L”というオプションをつけて、

$ nodemon -L server.js

1	$ nodemon -L server.js

っとしなくてはいけないのですが、これが何故か上手くいかない。

何故かと言うと、↑のコマンドではファイルの更新を監視する対象(watch)

が「*.*」っとなっている、これでは同階層のファイルに対する変更しか監視しない。

監視したい対象は自分で指定する必要がある。

私の場合はこんな感じ。

nodemon -L server.js -watch packages/**/**/**/* packages/**/**/*

1	nodemon -L server.js -watch packages///*/ packages///*

これでOK。

Vagrantの共有フォルダで更新を監視したいだけなら、ココまでの部分でOK。

以降は蛇足。

Supervisorのインストール。

supervisorをインストールした。

$ npm install supervisor -g

1	$ npm install supervisor -g

無視するファイルとディレクトリの指定は -i

npmでインストールをかけたときに異常に再起動しないために

$ supervisor -i node_modules server.js

1	$ supervisor -i node_modules server.js

としてみたけど、結局VagrantのSynced Folderでは、これも結局使えない。

Node-devのインストール

$ npm install node-dev -g

1	$ npm install node-dev -g

PM2のインストール

$ npm install pm2 -g

こうです。

$ pm2 start server.js --watch

1	$ pm2 start server.js --watch

そうするとこう。

$ pm2 list
┌──────────┬────┬──────┬───────┬────────┬─────────┬────────┬─────┬───────────┬──────────┐
│ App name │ id │ mode │ pid   │ status │ restart │ uptime │ cpu │ mem       │ watching │
├──────────┼────┼──────┼───────┼────────┼─────────┼────────┼─────┼───────────┼──────────┤
│ server   │ 0  │ fork │ 24446 │ online │ 1       │ 13s    │ 0%  │ 46.3 MB   │ enabled  │
└──────────┴────┴──────┴───────┴────────┴─────────┴────────┴─────┴───────────┴──────────┘

$ pm2 list

┌──────────┬────┬──────┬───────┬────────┬─────────┬────────┬─────┬───────────┬──────────┐

│ App name │ id │ mode │ pid │ status │ restart │ uptime │ cpu │ mem │ watching │

├──────────┼────┼──────┼───────┼────────┼─────────┼────────┼─────┼───────────┼──────────┤

│ server │ 0 │ fork │ 24446 │ online │ 1 │ 13s │ 0% │ 46.3 MB │ enabled │

└──────────┴────┴──────┴───────┴────────┴─────────┴────────┴─────┴───────────┴──────────┘

ただひとつ残念なのが、今まで標準出力でリアルタイムに監視できてたログが見えなくなってしまうこと、標準出力がどこに言っているかというと

~/.pm2/logs/ ここ

ここに、

エラー：server-error-0.log

標準出力：server-out-0.log

っとわけて収納されている。

リアルタイム監視をしたいなら

$ tail -f ~/.pm2/logs/server-error-0.log

1	$ tail -f ~/.pm2/logs/server-error-0.log

っとすればリアルタイム監視ができます。

pm2での監視もういいよってなったらこう。

$ pm2 delete all

1	$ pm2 delete all

ただSynced Folderで使えない。

Node.jsでSSHからサーバを起動するけどBroken Pipeで止まっちゃう

件名の通り、

$ node server.js

1	$ node server.js

で起動したNode.jsのサーバがSSHでのログインが切れると止まってしまう。

正確な理由は、サーバのログ出力でエラーが発生したから。

Broken PipeするとSSHでのログインが切れる、ログインが切れると標準出力がなくなる、そうすると、、エラーが発生してサーバが落ちる。

っということ。

なのでログの吐き出し先を示してやる、かつバックグラウンドで走るように”＆”をつけてやる。

$ node server.js & > ~/log/porkyou_log.out

1	$ node server.js & > ~/log/porkyou_log.out

これで、ログオフしてもserverが走り続けてくれる。。

と思ったらダメでした。

npmで発行してるnodeでリリース用のアプリがありました。

npm install -g forever

1	npm install -g forever

をインストール。

forever start server.js

1	forever start server.js

これでOK。

意味はserver.jsをサービスとして実行したということ。

AWSでGitを使う

AWSの環境ではどうやらCodeCommitというサービスを利用しなくてはいけないみたい。

AWS CodeCommitでは、Gitリポジトリのアクセス権限もIAM（Identity and Access Management）で管理されている。

IAMとは、「AWSユーザーに対して AWSのリソースへのアクセスできる範囲やアクセス方法を安全に制御するためのウェブサービス」のこと。

AWSの管理画面のダッシュボードから”IAM”の文字列でサービスをサーチ。

ユーザ名を設定、

次のステップ、グループ作って、ユーザ登録

試しにグループ名を「developers」として、

「AWSCodeCommitFullAccess」というパーミッションを設定する。

作成した「uploader」を覗いてみる。

Security credentialsのタブを叩いて

HTTPS Git credentials for AWS CodeCommit

でGenerate。

UsernameとPasswordもコピーしておく、

もしくは、CSVもダウンロードしておく。

CSVの中身はUsernameとPassword。

AWS CodeCommit Consoleに接続してレポジトリを作成する。

https://console.aws.amazon.com/codecommit

選択してる地域(region)がCodeCommitの対象外だと

みたいな感じでサポートされている地域の選択を促される。

仮に「US East(N.Virginia)」を選択する。

選択すると次のような画面。Get startedをクリック。

レポジトリの名前をいれる。Create repositoryをクリック。

すると次のような画面

丁寧にチュートリアルが出てくるので、これに従って作業する。

GitとAWSはすでにインストールされている。

$ aws configure

1	$ aws configure

AWS CodeCommit managed policyはすでに「AWSCodeCommitFullAccess」が設定されている。

$ git config --global credential.helper '!aws codecommit credential-helper $@'
$ git config --global credential.UseHttpPath true

1 2	$ git config --global credential.helper '!aws codecommit credential-helper $@' $ git config --global credential.UseHttpPath true

それで、ローカルマシーンに戻って

git clone https://git-codecommit.us-east-1.amazonaws.com/v1/repos/porkyou

1	git clone https://git-codecommit.us-east-1.amazonaws.com/v1/repos/porkyou

上で設定したuploaderのusernameとpasswordを入れてクローンする。

~~ローカルマシーン(MAC)に戻って、Gitがインストールされていなかったらインストールする。~~

~~次にAWS CLIをインストール。~~

~~AWS CLIとはコマンドラインインターフェース~~

<del>$ brew install awscli</del>

1	<del>$ brew install awscli</del>

~~これをインストールする、、のだが~~

~~それを入れるためにpipをインストールする必要がある。~~

~~pipとはPythonのパッケージマネージェのこと。~~

<del>sudo easy_install pip</del>

1	<del>sudo easy_install pip</del>

~~でインストール~~

<del>$ which pip
/usr/local/bin/pip
</del>

<del>$ which pip

/usr/local/bin/pip

</del>

~~OK。インストールされている。~~

~~AWS CLIのインストール~~

<del>$ sudo pip install --upgrade --user awscli</del>

1	<del>$ sudo pip install --upgrade --user awscli</del>

M	T	W	T	F	S	S
« Nov
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

HARD WORKER

カンボジア・プノンペンのフリーWEBプログラマー

Author: sugiyama

Angular-materialで言語切替＆クッキー保存＆デフォルトはブラウザ言語

MEAN.IOってフロントエンドをChromeの開発ツールでデバッグしづらい

MEAN.IOでnpmでjavascriptのパッケージインストール・インポート

gulpでbowerのパッケージを自動挿入

AWSのCodeCommitはまだ未成熟

MEAN.IOをVagrantの共有フォルダで使うのに向いてない

MACのMongoDBをスタート

Vagrantの共有フォルダでNode.jsを編集するたびに自動再起動する

Nodemonをインストール

Supervisorのインストール。

Node-devのインストール

PM2のインストール

Node.jsでSSHからサーバを起動するけどBroken Pipeで止まっちゃう

AWSでGitを使う