【angularjs】パスワード確認用入力フォームを実装する

今回やりたかったのは、サインアップ画面等でパスワードとパスワード(確認用)の入力画面を用意して、一致していなかったらバリデーションではじく。というありがちな画面。

https://github.com/TheSharpieOne/angular-validation-match
探したところこちらにちょうどやりたいことができるライブラリがありました。以下みたいな感じでやりたいことができました。

js

angular.module('starter', [
  ・・・
  'validation.match'
])
・・・

angular.module('starter.controllers')
.controller("SignupCtrl", function(
) {
  $scope.my_form = {};
  $scope.my_form.password = '';
  $scope.my_form.password_confirm = '';
  ・・・
})

template

<form name="form" novalidation>
  Password : <input type="password" name="password" ng-model="my_form.password" />
  Password(Confirm) : <input type="password" name="password_confirm" ng-model="my_form.password_confirm" match="my_form.password" match-caseless="true" />
  ・・・
  <span ng-show="form.password_confirm.$invalid">
    パスワードが一致しません
  </span>
</form>

以上です。

macにcordovaインストールエラーメモ

新PCにcordovaのバージョン6.5.0入れようとしたら、他のPCでは出なかったのに以下のようなエラーが。。。

$ npm install -g cordova@6.5.0
npm WARN deprecated node-uuid@1.4.8: Use uuid module instead
npm ERR! path /usr/local/lib/node_modules/cordova/node_modules/npm/node_modules/ansistyles
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall rename
npm ERR! enoent ENOENT: no such file or directory, rename '/usr/local/lib/node_modules/cordova/node_modules/npm/node_modules/ansistyles' -> '/usr/local/lib/node_modules/cordova/node_modules/npm/node_modules/.ansistyles.DELETE'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/xxxxx/.npm/_logs/2018-02-05T15_16_32_007Z-debug.log

ぐぐていくつか試したけどうまくいかず。。
で、1度、バージョン指定なしでインストール後にアンインストールしたらうまくいった。

$ npm install -g cordova
$ npm uninstall -g cordova
$ npm install -g cordova@6.5.0

以上です

【emacs】package.elで自動インストール

たとえば web-modeをインストールしたい場合は、init.elの先頭に以下を追加してやればよいみたい

(require 'package)
(add-to-list 'package-archives '("melpa"."http://melpa.org/packages/"))
(package-initialize)
(unless package-archive-contents (package-refresh-contents))

;; 以下、追加するパッケージ
(unless (package-installed-p 'web-mode)
  (package-install 'web-mode))

以上です。

【emacs】package.elとuse-packageでパッケージ管理

先日からemacsのパッケージ管理について少し調べていて先日こちらでCaskを使う方法をメモした。その後、もう少し調べたりしていたところCaskを使わなくてもpackage.el(emacs標準インストールされている)を使えば、設定ファイルを元にパッケージの自動インストールも行えるとのこと。外部ソフトをインストールせずに使えるので今回はこっちの方が良さそうと思った。

またuse-package.elを使えば、以下のように「:ensure t」を書いておけばpackage.elが自動インストールしてくれるみたいで記述もシンプルでみやすい。

(use-package web-mode
  :ensure t
  :mode(("\\.html?\\'" . web-mode))
  :init
  (add-hook 'web-mode-hook
            '(lambda()
               (setq web-mode-markup-indent-offset 2)
               (setq web-mode-code-indent-offset 2)))
  )

今回は、use-package.el自体は、init.elの先頭で自動インストールするように記述した。

;; use-packageのインストール
(require 'package)
(add-to-list 'package-archives '("melpa"."http://melpa.org/packages/"))
(package-initialize)
(unless package-archive-contents (package-refresh-contents))
(unless (package-installed-p 'use-package)
  (package-install 'use-package))

;; 以下、必要なパッケージの設定を追加していく
(use-package web-mode
  :ensure t
  :mode(("\\.html?\\'" . web-mode))
  :init
  (add-hook 'web-mode-hook
            '(lambda()
               (setq web-mode-markup-indent-offset 2)
               (setq web-mode-code-indent-offset 2)))
  )
・・・

これで、init.elさえ管理しておけば別PCなどでも簡単にインストールできるのでより簡単になりました。以上です。

【emacs】CaskとGitでパッケージ管理を共通化して別PCへ簡単に移行

PCの移行でEmacsの設定やパッケージもそのまま持っていきたくて、.emacs.dをzipで固めて移行先のPCに移行。みたいなことをしていたのだが、プログラムではgitで設定ファイルだけ管理してとかみんなやってるのに何でこんなことしてるんだと思ったのでCaskというのを使って設定ファイルで管理してみることにした。

Caskを使う

ここに書いてあるとおりにやったらいけた
http://vdeep.net/emacs-cask

Caskのインストール

$ brew install cask

Caskの初期化

$ cd ~/.emacs
$ cask init

~/.emacs/Cask が作成されるのでここに管理したいパッケージを以下みたいに追加していく。

(depends-on "auto-complete")
・・・

~/.emacs.d/init.el にCaskを使うように追加

(require 'cask)
(cask-initialize)
・・・

パッケージインストール

$ cd ~/.emacs.d
$ cask install

あとは、emacsを起動すればパッケージが使える

別PCでセットアップ

Caskファイルとinit.elをgitで管理して、別PCではcloneしてセットアップ用のスクリプトを叩くだけという形にしたい。

これはこちらを参考にした
https://qiita.com/okamos/items/7f5461814e8ed8916870

$ tree ~/dotofiles/
/Users/xxxxx/dotofiles/
├── emacs
│ ├── Cask
│ └── init.el
└── setup.sh

で、こんな感じの構成で3ファイル管理。

setup.sh に以下のようにシンボリックを貼るだけのスクリプトを用意

#!/bin/sh                                                                                                                                                                                                                                     

## emacs                                                                                                                                                                                                                                      
ln -sf ~/dotofiles/emacs/Cask ~/.emacs.d/Cask
ln -sf ~/dotofiles/emacs/init.el ~/.emacs.d/init.el

これをgitで管理して別PCで、git cloneしてsh setup.shすれば必要なパッケージのインストールと設定もそのまま使えた。以上です。