Macで時計をクリックした時にカレンダーを出す

Mac使い始めてからずーーっと気になってたところを解決するアプリを発見したのでメモ

Windows育ちの悲しみ

おなじみOS界のデファクトスタンダードWindowsでは画面の右下に時計があって、クリックするとカレンダーが表示されるじゃないですか
僕がWindowsを使っていた頃（といっても会社の事務PCは今でもWindowsだが）は割とその機能を多用していたから、Macを使ってる今でもよく使おうとして

こんな感じで「またやってしまった」と毎度思っていた

解決するアプリ

ここで登場するのが「Day-O」
こいつを動かすとまんま期待した動作をしてくれる。

使い方はzip落としてアプリ起動するだけ
起動するとシステムで表示してた今までのやつとダブるので消しましょう
Preference…でフォーマットを変更できるので自分好みに。但し日付を表すアイコンみたいのは左端から動かないっぽい

vimが自動認識するファイルタイプを自分で設定する

自動ファイルタイプ検出

vimでは起動時（厳密にはバッファに展開時）に自動でファイルの拡張子に対応したファイルタイプを選んでくれる機能がついている これを有効化するには、.vimrcに

filetype on

と記述すればよい

だが、一般的なファイルタイプについては自動で設定が反映されるものの、少し外れると設定が無かったりする
そんなときは自分で、

:set filetype=hoge

や、その短縮形である

setf hoge

などとして都度読み込む必要がある
これは非常にめんどくさい

解決策

vimは起動時にfiletype.vimというファイルを読み込むことでこの自動検出を行っている
僕のMacでは/usr/share/vim/vim73/filetype.vimに存在しているが、この中を見ると以下の行がある

runtime! ftdetect/*.vim

この行はftdetect以下の*.vimを全部読み込むぜ！と言っているらしい！すばらしい
というわけで~/.vim/ftdetectというディレクトリを作って、その中に以下のようなものを入れておくと自動で読み込んでくれる

ftdetect/ejs.vim

au BufNewFile,BufRead *.ejs setf html ".ejsを開くときはファイルタイプをhtmlにする

これでejsを開くときはhtmlとして認識してくれる
僕は他にもcapistranoの.capをrubyにしたりしている

あまり使う機会はないかもしれないが、覚えておくと便利かも

jQueryで単純に色を取得して使おうとしてもうまくいかない

最近フロントエンドへの興味が高まっている
フロントエンドと言うより、正確にはデザインへの興味かな
グイグイ動く「それっぽい」アプリケーションを作りたいってのが動機
何事も見た目が重要で、実際大したことないものでもデザインによってユーザーがいい感じに思わせられれば勝ちなわけで。少なくともそこで損しないように作れるスキルは必須ですよねっていう

そんなわけで誠にお恥ずかしながら今更jQueryをちゃんと始めてみた
そして早速軽くハマったので備忘録がてら書いておく

ハマったこと

jQueryがどんなものかとか基本的な書き方とかは知ってたので実践がてら、以下のようなコードを書いてみたけど動かない

$(function(){
      $("#test").click(function(){
         if($(this).css("background-color") == "red"){
           $(this).css("background-color","blue")
         }
         else{
            $(this).css("background-color","red")
         }
      }) 
})

やりたいことは赤だったら青、それ以外だったら赤に変えるってだけなのだが…
色指定が"#xxxxxx"形式じゃなきゃダメなの？と思って変えてみるも変わらず

原因と解決策

実は条件分岐のところで使用している$(this).css("background-color")の返り値は以下の形式になっている

rgb(xxx, xxx, xxx)

なので、条件のところを書き換えてやるとうまくいった

$(function(){
      $("#test").click(function(){
         if($(this).css("background-color") == "rgb(255, 0, 0)"){ /* 条件分岐の条件を変更 */
           $(this).css("background-color","blue")
         }
         else{
            $(this).css("background-color","red")
         }
      }) 
})

正直こんなことも知らなかったとか恥ずかしい限り
何事も概要だけ知っててもまったく扱えないものだと反省

これからはちゃんと自分でがんがん書いて行こうと思う

Expressのviewでセッションの値を使う方法

expressでアプリ作っててハマったので備忘録

経緯

そもそもviewでセッションの値使う書き方していいのかは定かではないが、セッションに保存している値をviewしようとしてjadeで以下のように書くとsessionがundefinedだって怒られる

    div
      req.session.hoge

まぁviewでreqとか扱えなさそうなので当然っちゃ当然なのだがどうにかしたい

対策

結論から言うと、middlewareを追加してviewで参照可能な変数に入れるようにする
コードはこうなる

app.use(function(req, res, next){
    res.locals.hoge = req.session.hoge;
    next();
});

どうやらres.localsにviewからアクセスできる変数が定義されるらしく、そこに新たにパラメータを追加してやり、セッションのhogeを入れることで参照可能になるようだ
こうするとviewのjadeでは以下のようにすると値が取れる

    div
      hoge

補足事項

ネットで情報を探していると以下のような書き方を載せているものがあった

app.dynamicHelpers({
    session: function (req, res) {
        return req.session;
    }
});

最初はこれを使ったんだけどまー動かない
このdynamicHelpersってやつはexpress 3.x系では廃止されたらしい
このことはexpress公式のmigrationガイドにも記載があるので注意

また、middlewareを定義する位置なのだが、「app.use(app.router)」より前に書かないと動かない
中まで追ってないから原因はわからないが、そういうもんらしい
これは言うまでもないが「app.use(express.session(・・・」の後に書かないとsessionが正しく読めないっぽくて怒られるので、動かない場合は書く位置を見なおしてみると良い

実践vimを読んで仕事が楽しくなる話

一歩出遅れた感あるが実践vimを読んだ

実践Vim 思考のスピードで編集しよう!

自分とvim

自分はエディタとしてvimを使っている
なぜvimなのかというと正直ロマンだ。最近はsublimeが気になって仕方ない
去年はインフラの仕事してたのもあってviからの流れというのもあるかも

自分は情報系の大学の出なので初めてvimを使ったのは実は結構前だ
「挿入モードってなんだよ？使いずら！」というのが正直な感想だった
そんな僕も今ではvimでさくさくと（ほんとか？）コードを書いている
使っているプラグイン等の記事は別途書きたいと思うが、今回はそんなレベルのvimerの自分が読んだ感想をお伝えしたい

読んでみてどうだったか

正直vimmer名乗るの恥ずかしくなったｗ
知らないことが多すぎた。vimというツールの強力さをまったく生かせていなかった
最低限のエディタ機能しか知らなかったと反省
とりあえず使っているレベルの人なら一読の価値はあると思います

参考になったところ

ドットコマンド

.(ドット)キー打つと前回編集した内容を繰り返してくれるんですよ
いやもうね。そんなことも知らなかったんです。ほんとに恥ずかしい ちなみに本書では編集内容とかコマンド構成を"ドットコマンドで再利用可能な形"にして、出来る限りドットコマンドを繰り返し使うことを推奨してる
確かに似たような編集をいかに最少タイプ数で編集するかは重要だよね

テキストオブジェクト

テキストをオブジェクトとして見る、簡単に言えばタグとかカッコとかを認識してその単位でオブジェクトとして見てくれる機能があるんですね
これもまったく知らなかった
例えば、

function(hoge,huga){

こんなテキストがあって関数の引数を変えたい時にカッコの中で"di("とすると、

function(){

こうなる
消してそのまま挿入モードに入りたければ、最初のコマンドをdじゃなくてcにすればよい
最後のカッコのところは色々対応していて、<、{、[、tとか色々できる。tはタグを意味している。

また、真ん中の"i"を"a"にするとカッコごと消してくれる 例えば、

<div><a href="hoge">huga</a></div> 

こんなテキストがあって、aタグの中で"dat"とすると、

<div></div> 

こうなる。HTMLのタグごと消したい時とかはこっちのほうがいいね

fコマンド

これもまた知らなかったので恥ずかしいんだけど、fコマンドはfの後に続けた文字をその行の中で検索してカーソルを移動してくれるコマンド
例えば、

This is a apple

という行があったとする
このときappleをbananaにしようと思ったら、僕は"w"を連打してた（この例だと"$b"とかもするかも）
こういうときに"fp"とすると、この行で最初にでてくる"p"、つまり"apple"の"p"にカーソルが移動するのだ
ちなみに編集対象がappleだからって"fa"としてしまうと途中にある"a"に移動してしまうので注意（その場合は";"とすると次の候補に飛んでくれる）
fコマンドは考えるまでに候補をちょっと考えなきゃいけない時はあるものの、"w"を連打するよりは遥かに効率がいい

表示行の移動

vimのデフォルトでは1行の長さがウィンドウを超える場合、行番号なしの新しい行をつくって、いわゆる折り返しをしてくれる
この折り返しの行に移動したいとき"j"とか"↓"を押したら行番号的にいっこ下の行に移動してイラッとした経験ないすか？
そんなときは"gj"とか"gk"とすると表示通りの移動をしてくれる
これは凄く助かる。こういう場合自分は目的のところに辿り着くまで"w"を延々と連打していた。fを使うのもありだけどすぐ下かすぐ上に見えてる所ならこれが凄く助かる

ヤンクレジスタ

例えば"yy"で行をコピーして下の方のある行を上書きしようと思う

1: first line  #ここでyy
2: second line
3: third line

対象の行まで移動してその行を"dd"で削除、"P"で貼付け…と思ったら直前で削除した行でレジスタが上書きされていて"yy"した行がでてこない！！

1: first line
2: second line
3: third line #ここでddP…orz

なんてことありませんかと。僕はしょっちゅうあっていつも苛ついていた
削除に見える動作が実際は切り取りであるために、最初にヤンクしたレジスタを上書きしてしまっているから起きる現象
でも我々にはヤンクレジスタがあります。ヤンクレジスタはヤンクした結果のみ格納しているレジスタ
ヤンクレジスタは"0で指定できるので、"P"の代わりに" "0P" とやってやれば問題は解決

1: first line
2: second line
1: first line #ddで3行目を消した後"0P

その他

ファイル間のジャンプ、レジスタ、マクロなど使いこなせれば恐ろしく捗るであろう機能について詳しくのっている
この辺はいままでスルーしてきていたので正直自分はうまく使えていないのだが、今後も挑戦は続く 特にファイル間のジャンプは関数の参照とかで重宝するので早くマスターしたい所

まとめ

この本を読んで作業が物凄く捗るようになった。というか楽しくなった
編集する前に編集を組み立てる時間みたいのができた。それがうまくいったときの爽快感がなんとも言えない
それは一見時間の無駄に感じるかもしれないが、クラスやメソッドを新規で書いてる時に処理の重複とか実行時の効率とか考えないでコーディングしますか？と
編集の効率化を考えることは、結局は生産性の向上に繋がるという点、普段から"同じことを二度しない"、”余分なことをしない”思考を作るトレーニングを兼ねるという点でいいと思った

最低限のコマンドの説明とかは一切ないのでvim使いはじめの人にはきついかもしれないが、ひと通り使える人なら是非読んでほしい

実践Vim 思考のスピードで編集しよう!