2014-06-02

npmに自作のCLIモジュールを公開する

node.js npm

npmのアカウントを作成

https://www.npmjs.orgで登録します。

ユーザ名
パスワード
Emailアドレス

npmコマンドとnpmアカウントの紐付け

先ほど作成したユーザ情報を対話的に入力します。

npm adduser

公開準備 : package.json生成

npm init

でpackage.jsonを対話的に生成します。

"private"がtrueの場合はfalseに修正します。

"private": false,

公開準備 : CLIモジュール用の設定

`npm install -g`に対応

"preferGlobal": true,

コマンド名と起動コマンドの登録

"bin": {
  "コマンド名": "起動スクリプト名"
},

公開

npm publish

確認

npm info モジュール名

バージョンアップ

package.jsonのversionを新たなバージョンに変更してnpm publishします。

2014-05-29

GitHubのユーザ名を変更する

GitHubのユーザ名を変更する方法です。過去のコミットのユーザ名やメールアドレスも修正します。

GitHubのユーザ名を変更

Account Settings -> Change username

ローカルのgitのユーザ名を変更

git config --global user.name "新ユーザ名"
git config --global user.name "新メールアドレス"

ローカルのgitリポジトリのリモートリポジトリを変更

ローカルgitリポジトリに移動
```
 cd ローカルgitリポジトリ
```
過去のURLを表示
```
 git remote -v
```

新URLを表示

コピペしてユーザ名のみを変更すると楽です

 git remote set-url origin https://github.com/新ユーザ名/リポジトリ名.git

過去のコミットの名前を変更

ここからはお勧めできませんがどうしてもという場合

過去のコミットを全て表示
```
 git rebase -i --root
```
修正したいコミットを選択

修正したいコミットのpickをeditに変更します。

修正前
```
 pick XXXXX
 pick XXXXX
```
修正後
```
 edit XXXXX
 edit XXXXX      
```
vimコピペ用
```
 %s/pick/edit/gc
```
過去のコミットを修正

ユーザ名とメールアドレスを変更します
```
 git commit --amend --author="新ユーザ名 <新メアド@gmail.com>"
```
コメントも修正できます
残りのコミットを修正
```
 git rebase --continue
```
繰り返す

3と4をeditに変更した行だけ繰り返します
GitHubへpush
```
 git push -f
```

以上

2014-05-28

AngularJSでリストやテーブルの各行にボタンを配置する

angularjs

リストの各行、テーブルの各列、ナビゲーションバーの要素などにボタンやリンクを配置して、クリックされたら各行の内容に応じて処理を行いたいケースがあると思います。このよう場合、ng-repeatとng-clickを使うとシンプルです。

HTML(jade)

ul
    li(ng-repeat="element in list")
        button(ng-click="display(elemenat.name)") Click

JavaScript

$scope.display = function(name){
    console.log(name);
}

DOMのidなどは使わず素直にAngularJS流でやるのがいいようです。

2014-05-26

herokuでnode.jsのexpress4アプリを動かすためのProcfileの書き方

node.js express Heroku

Express4における雛形生成

express4の起動コマンド

Express4ではアプリの雛形をexpress-generatorで生成するようになり、標準の起動コマンドが以下に変更になりました。

npm start

heroku用のProcfile

heroku用のProcfileの書き方はいろいろありますが、以下のようにコンソールと同じにすると楽です。

web: npm start

2014-05-12

GitHub製エディタAtomのMarkdownリアルタイムプレビューの仕様

atom github markdown vim

GitHub製エディタAtomのソースコードがMIT Licenseで公開されたので久しぶりに使ってみたところ、以前はできなかったMarkdwonファイルのリアルタイムプレビューができるようになっていました。

ここでは、AtomのMarkdownリアルタイムプレビュー機能の現時点での仕様やその調べ方を簡単にまとめます。

仕様の調べ方

Atomの機能はコア部分を除くとパッケージと呼ばれる取り外し可能なモジュールの集合体となっています。Vimにおけるプラグインのようなものですが、基本的な機能もパッケージとして実装されているのが特徴です。

Markdownのリアルタイムプレビュー機能はmarkdown-previewというパッケージが担当しています。したがって、このパッケージのコードを見ると仕様がわかります。

atom/markdown-preview - GitHub

Markdownリアルタイムプレビューの使い方 [参考]

AtomでMarkdownファイルを開きます。

対応している拡張子は後述します。

Ctrl-M か Ctrl-Shift-m を実行してプレビューペインを開きます。
Markdownファイルを編集します。（保存の必要なし）
プレビューペインの内容がリアルタイムに更新されます。

Markdownファイルとして扱われる拡張子の一覧

対応拡張子はatom/language-gfmのgfm.csonに記載されています。

'fileTypes': [
  'markdown'
  'md'
  'mdown'
  'mkd'
  'mkdown'
  'ron'
]

シンタックスハイライトされる言語の一覧

atom/markdown-preview リポジトリのextension-helper.coffeeに記載されています。

extensionsByFenceName =
  'bash': 'sh'
  'coffee': 'coffee'
  'coffeescript': 'coffee'
  'coffee-script': 'coffee'
  'css': 'css'
  'go': 'go'
  'html': 'html'
  'java': 'java'
  'javascript': 'js'
  'js': 'js'
  'json': 'json'
  'less': 'less'
  'mustache': 'mustache'
  'objc': 'm'
  'objective-c': 'm'
  'php': 'php'
  'python': 'py'
  'rb': 'rb'
  'ruby': 'rb'
  'sh': 'sh'
  'toml': 'toml'
  'xml': 'xml'
  'yaml': 'yaml'
  'yml': 'yaml'

レンダリング処理の流れ

現在は以下のように流れなっています。

編集を行うとAtom本体からcontents-modifiedやcontents-changedイベントがemitされる
markdown-previewパッケージのmarkdown-preview-view.coffeeのchangeHandlerがイベント処理を開始
markdown-previewパッケージのrendere.coffeeが以下のgjtorikian/roasterが生成したhtmlをサニタイズするなどして最終的な出力を生成
- gjtorikian/roasterは以下のライブラリを用いてmarkdownをレンダリング
  - chjj/marked によるMarkdown(GFM)の基本的なレンダリング
  - HenrikJoreteg/emoji-imagesによる絵文字の画像化 (まだ絵文字を扱うのが難しいとのことで画像化しています)
  - gjtorikian/task-lists-jsによるTask Listのレンダリング

Redcarpetなど他のレンダラと出力が違って気になる場合などは、上記の該当ライブラリを見ると原因がわかるでしょう。