ディレクトリを簡単に移動できるz.sh入れてみた

最近、z.shというディレクトリ移動を簡単にできるスクリプトの存在を知ったので入れてみた。 `cd`コマンドの履歴を取ってるみたい。 インストールはhomebrewからサクッとこんな感じで。 brew install z インストールするとターミナルに以下のような文章が表示される For Bash or Zsh, put something like this in your $HOME/.bashrc or $HOME/.zshrc: . `brew --prefix`/etc/profile.d/z.sh ZSH USERS BACKWARD COMPATIBILITY WARNING: z now handles 'precmd' set up for zsh. z (<=1.3) users using zsh should remove the precmd function that was described in the installation instructions for previous versions. In short, this: . /path/to/z.sh function precmd () { _z --add "$(pwd -P)" } should now be: . `brew --prefix`/etc/profile.d/z.sh いろいろ書いてあるけど、ほとんどは1.3以前のz.shを入れていた人むけのメッセージ。 今回はじめてz.shインストールした人がやることは至ってシンプル。 以下の一文を.zshrcに追加するだけ。 . `brew --prefix`/etc/profile.d/z.sh 追加したらシェルを再起動するとzコマンドが使えるようになっている。 `cd`コマンドで何回か移動した後、おもむろに`z <TAB>`と入力すると、移動したディレクトリパスが補完される。 便利！

Markdownで投稿した記事のソースコードの見た目をいい感じにする

[前回の記事](http://yslibr4ry.blogspot.jp/2013/01/bloggermarkdowno.html)でBloggerにMarkdownで記事を投稿できるようになった。 ただ、今のままではMarkdown内のコードがあまり良い感じに表示されない。  そこで、今回はMarkdown内のコードをシンタックスハイライトする方法を紹介する。 参考にするのは、前回の記事でも参考にした次の記事。 - [This works...: Markdown with blogspot.com and blogger.com -](http://dvdotsenko.blogspot.jp/2012/08/markdown-with-blogspotcom-and-bloggercom.html) #手順 ##1. `prettify.js`を手に入れる 上の記事で紹介されている著者の[GitHubのレポジトリ](https://github.com/dvdotsenko/snippets)から、`lib/prettify.js`をダウンロードし、自前のサーバや任意のホスティングサービスにアップロードする。 ##2. Bloggerのテンプレートにコードを挿入 ダッシュボードのテンプレートセクションで、「HTMLの編集」を選択する。  表示されたダイアログの中で、前回の記事で挿入したコードを探し、その直後に下記のようにコードを挿入する。 <script src="/path/to/showdown.js"></script> <script> var sd = new Showdown.converter(), mdEl = document.querySelector('.markdown'), converted = document.createElement('div'); converted.className = 'showdown'; converted.innerHTML = sd.makeHtml(md.value); mdEl.parentNode.replaceChild(converted, md); </script> <!-- ↑ここまで前回のコード --> <script src="/path/to/prettify.js"></script> <!-- ↑prettify.jsへのパスを挿入する。前回のコードより後ろに書くこと --> この`prettify.js`はMarkdown中の全てのコードブロックに対してシンタックスハイライトをかけるようカスタマイズされているので、コードを読み込むだけでいい。 ##3. CSSを追加する ダッシュボードのテンプレートセクションで、カスタマイズ -> アドバンス -> CSSを追加、と進み、以下のスタイルを追加する   /* Pretty printing styles. Used with prettify.js. */ /* Vim sunburst theme by David Leibovic */ pre .str, code .str { color: #65B042; } /* string - green */ pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */ pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */ pre .typ, code .typ { color: #89bdff; } /* type - light blue */ pre .lit, code .lit { color: #3387CC; } /* literal - blue */ pre .pun, code .pun { color: #fff; } /* punctuation - white */ pre .pln, code .pln { color: #fff; } /* plaintext - white */ pre .tag, code .tag { color: #89bdff; } /* html/xml tag - light blue */ pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name - khaki */ pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */ pre .dec, code .dec { color: #3387CC; } /* decimal - blue */ pre.prettyprint, code.prettyprint { background-color: #000; -moz-border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; } pre.prettyprint { width: 95%; margin: 1em auto; padding: 1em; white-space: pre-wrap; } /* Specify class=linenums on a pre to get line numbering */ ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */ li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none } /* Alternate shading for lines */ li.L1,li.L3,li.L5,li.L7,li.L9 { } @media print { pre .str, code .str { color: #060; } pre .kwd, code .kwd { color: #006; font-weight: bold; } pre .com, code .com { color: #600; font-style: italic; } pre .typ, code .typ { color: #404; font-weight: bold; } pre .lit, code .lit { color: #044; } pre .pun, code .pun { color: #440; } pre .pln, code .pln { color: #000; } pre .tag, code .tag { color: #006; font-weight: bold; } pre .atn, code .atn { color: #404; } pre .atv, code .atv { color: #060; } } --- これでMarkdown内のコードもいい感じにシンタックスハイライトされる。 あとは行番号つけられれば完璧かなー

やったーBloggerにmarkdownで記事を投稿できたよー＼(^o^)／

Markdown最近始めたので、bloggerでも使いたくていろいろ探してみた。 bloggerの機能としては提供されていないので、以下の様な方法をとる必要がある。 1. Markdown Editor(MouとかKobitoとか)を使ってMarkdownで記事を書き、HTMLにコンバートしてbloggerに貼り付ける。 2. bloggerのテンプレートにJavaScriptを仕込み、画面読み込み時にMarkdownの文章をHTMLにコンバートする。 個人的に1の方法は避けたかった。後からの編集がめんどくさいのは勘弁してほしい。 やはりbloggerに直接Markdown記法で書けるのが一番望ましい。 そんなこんなでWebを色々探してたら、 - [This works...: Markdown with blogspot.com and blogger.com - ](http://dvdotsenko.blogspot.jp/2012/08/markdown-with-blogspotcom-and-bloggercom.html) - [404 Blog Not Found:Tips - MarkdownをHTMLにembedする - ](http://blog.livedoor.jp/dankogai/archives/51818456.html) という２つの記事を見つけた。 1つ目の記事の手法は、Markdownのコードブロック内でscriptタグが使えないという問題があったので断念。 2つ目の手法ではscriptタグも行けそうだったので、こちらを参考にして手順を説明していく。 また、この記事自体も今回紹介する方法を使いMarkdownで記述している。 #手順 ##1. CSSをBloggerのテンプレートに登録する ダッシュボードのテンプレートセクションで、カスタマイズ -> アドバンス -> CSSを追加、と進み、以下のスタイルを追加する   .markdown {width:100%; height: 320px; overflow: scroll; background-color: #ffffff; } .showdown {background-color: #ffffff; } ##2. Markdownを変換するコードをテンプレートに埋め込む 同じくダッシュボードのテンプレートセクションで、「HTMLの編集」を選択する。  表示されたダイアログの中で、`</body>`タグを検索し、その直前に下記のコードを挿入し、保存する。上の記事ではjQueryを使っていたが、ここでは使わない形に書き直している。 <script src="/path/to/showdown.js"></script> <script> var sd = new Showdown.converter(), mdEl = document.querySelector('.markdown'), converted = document.createElement('div'); converted.className = 'showdown'; converted.innerHTML = sd.makeHtml(mdEl.value); mdEl.parentNode.replaceChild(converted, mdEl); </script> また、`/path/to/showdown.js`は各自で任意のパスに書きなおす必要がある。 showdown.jsは[*こちら*](https://github.com/coreyti/showdown)からダウンロードできるので、独自のサーバに上げるなり、GitHubでフォークしてそこから呼ぶなりするといいのではないだろうか。 ちなみに私の場合は、個人用のCDNとして使うためのGitHub Pagesを作り、そこでshowdown.jsをホスティングしている。 ##3. Markdownで記事を書く 以下の要領で、`<textarea>`タグの中にMarkdownで記述する。 <textarea class="markdown" disabled> #this blog is written with Markdown! ;) - this - is - list you can use [link](http://yslibr4ry.blogspot.com/) and other Markdown functionality as usual! </textarea> #※注意事項 この方法では`<textarea>`タグの中にMarkdownを記述している。 そのため、当然ではあるがMarkdown記事の中に`</textarea>`があるとそこでtextareaが終わってしまい、後続のMarkdownがそのまま表示されてしまう。 これを防ぐため、Markdown中で`<textarea>`タグを使う場合は、閉じタグを`&lt;textarea>`こんなふうにエスケープしなくてはならない。 ------------- 以上。今後はこんな感じで記事を書いていこうかなあ。 Markdown内のコードをいい感じにシンタックスハイライトする方法については、また今度書く予定。 --- update 2013-02-03: [シンタックスハイライトする記事](http://yslibr4ry.blogspot.jp/2013/02/markdown.html)書いた

bloggerでタイトルを「記事のタイトル→ブログタイトル」の順に表示する方法

意外と簡単だった。

ブログ管理画面の「テンプレート」から
「HTMLの編集」を選択し、下記のタイトルを設定している行を探す。

    ;

ここを以下のように変更する

最後に、「テンプレートを保存」をクリックする。
これで検索エンジンの結果ページでもかなり見やすくなる。

[Node.js] homebrewからインストールしてみる

以前にもいろいろ書いたけど、Node.jsのバージョン使い分けとか考えなければhomebrew使うのが楽そう。

こんな感じですかね

1. homebrewのインストール

   ターミナルで以下のコマンドを実行する

   ruby -e "$(curl -fsSkL raw.github.com/mxcl/homebrew/go)"

2. Node.jsのインストール

   ターミナルで以下のコマンドを実行する

   brew install node
   source ~/.bashrc
     

これだけ。簡単！　npmも一緒に入っているはず。

[JavaScript]Objectをループしたい時はObject.keys()が便利

Objectをループで回す時はfor ~ inを使うのが定番だけど、そのままだとオブジェクトのプロトタイプをさかのぼってすべてのプロパティを見てしまうのでちょっとした工夫が必要になる。
こんな感じ。

var hoge = {
  a: 'paramA',
  b: 'paramB'
};
for (var key in hoge) {
  if (hoge.hasOwnProperty(key)){
    console.log(key + 'is property of hoge!');
  }
}

これだとループの中で毎回hoge.hasOwnProperty()が呼び出されるので、ちょっと遅くなってしまう。
そこで、Object.keys()の出番である。
Object.keys()は引数に渡したオブジェクトのプロパティだけを配列で返してくれる。
使い方はこんな感じ。

var hoge = {
  a: 'paramA',
  b: 'paramB'
};
var hogeKeys = Object.keys(hoge);

for (var i = 0, len = hogeKeys.length; i < len; i++) {
    console.log(hogeKeys[i] + 'is property of hoge!');
}

この方法だとループの中でhoge.hasOwnProperty()を呼ばなくていいからちょっと早い。

GitHubでレポジトリを削除

レポジトリを削除しようとしてちょっと迷ったのでメモ。 

1. レポジトリに移動して「Admin」をクリック

  2. 下の方にスクロールして「Danger Zone」＞「Delete this Repository」をクリック

  -ポップアップするダイアログには、「削除したら元には戻せないよ！」と書いてあります。wikiもissuesも何もかも消えるので注意してください。

 3. レポジトリの名前を入力して、「I understand the consequences, delete this repository」をクリック

以上です。