2012/9

Source Sans Proを使ってみた。ついでにgh-pagesをCDN風に使ってみた。

Adobe謹製のソースコード表示用のフォントSource Sans Proが出たらしいので早速使ってみた。 

フォント自体はGoogle Web Fonts自体にすでに上がっているのでそこから利用。
 でこんなの作ってみた。

 Demo:autoPrettify.js sample
 Repositry:georgeOsdDev/autoPrettify.js 

prettify.jsをラップして、font-familyにSource Sans Proを指定しています。
 prettify.jsって便利だけどいちいちpreタグにclass指定したり、onloadで`prettyPrint()`呼び出したり面倒くさいのでautoPrettify.jsをインクルードするだけで完結するようにしています。blogとかに使えると思います。(このブログにも適用したいんだけど、いまいちlokkaの仕組みがわかっていないので見着手。。。rubyも勉強しなくては。)


さて
autoPrettify.jsの中身といえば、documentにlinkとscriptタグ追加してprettify.jsを実行している単純なものなのだけど、ソースの取得先をgithub-pageにしてみたところが勉強になった。
なぜならprettify.jsのjsはcdn.jsに上がっているけどprettify.cssをホスティングしているCDNが見つからず、困ったからです。

github上のファイルを直接参照する方法は、最初rawファイルを指定したらダメっぽかったのでこの辺とかこの辺を参考にgithub-pagesを作成してやってみた。
とりあえずmasterとgh-pagesのブランチができてちゃんと動いているようだけどいまいちgitの仕組みがよく分かってないのでをもっとちゃんと理解しようと思う。

  • Sep
  • 14
  • 2012

Nodejitsuにアプリをデプロイしてみた。

最近会社に手書きのホワイトボードが導入されて勤怠時刻を書いたり熱血風でなかなか嫌な感じなので
IT会社なのでオンライン化してみようと思いたち、作ったのがこちら。

whiteBoard

で、これを改良して作ったのがこちら。

webBoard

Demo

どちらもjQueryでイベントを拾ってSocket.IOでbroadcastする仕組みとなっています。

基本的にlocalネットワーク内で使うことを想定しているのですが、Demoをデプロイしようと思ってwebSocket対応Paasを探してたどり着いたのがNodejitsu. ナニコレNode専用なの?カッコイイ。jitsuって何?術?でよくわかんないけどやってみた。

まずはアカウント作ってcliを入れる

npm install jitsu -g
              

これで`jitsu`コマンドが使えるようになる。

$ jitsu
              info:    Welcome to Nodejitsu 
              info:    jitsu v0.9.8
              info:    It worked if it ends with Nodejitsu ok
              info:    Executing command 
              help:              ___  __
              help:        /  /  /   /_  /  /
              help:     __/  /  /   __/ /__/
              help:    
              help:    Flawless deployment of Node.js apps to the cloud
              help:    open-source and fully customizable.
              help:    https://github.com/nodejitsu/jitsu
              help:    
              help:    Usage:
              help:    
              help:      jitsu <resource> <action> <param1> <param2> ...
              

チュートリアル通りにjitsu initとかjitsu deployとかやってくととりあえずnodejitsu側にモジュールは配置されるようだけど何やらエラーがでるわでるわ。

で細かいことはあんまり覚えていないのだけど以下のようにいろいろやったら動くとこまでできた。

  • package.jsonのdependencyでバージョン指定の’*‘をやめて特定のバージョンを指定する。

アプリがスタートするタイミングでnodejitsu側でnpm installしてるみたいなんだが、どうもそこでこけてしまう。(この時のログは流れてしまってもうないけど)ログにmodule versionがうんたらかんたらって怒られるのでちゃんと指定するとnpm installは正常終了したっぽい。socket.IOのコンパイルに結構時間かかってたけど。

  • expressのポート指定は8080にする。

最初はなんとなく3000にしてたけど、portがうんたらかんたらって怒られるのでチュートリアルにあるように8080にしたらOKだった。

  • jitsu deploy じゃなくて jitsu app appname start を使ってみる

こんなログ

error:   Error running command apps deploy
              error:   Nodejitsu Error (500): Internal Server Error
              warn:    Error returned from Nodejitsu
              error:   Error: connect ECONNREFUSED
              

とかこんなログとか

error:   Error running command apps deploy
              error:   socket hang up
              

よくわかんなかってけど、dashboardで見るとアプリモジュールは最新化されてたっぽいのでdeployはやめてstop startにしたら動いた。めでたしめでたし。

Backbone.jsでプレゼンテーション

Backbone.js入門中です。 OfficialのTODOをひと通りやって自分でも何か作ってみようと思い作りました。

Backbone-slide.js

本当はサーバ上のデータを取得してそれをModelで管理してViewで表示〜みたいなアプリの方がBackbone.jsのMVフレームワークを使うメリットが発揮できるのだろうけれど、とりあえず思いついたのがDOM操作だったのでプレゼンテーションツールになりました。

html中の<section>タグを取得してModel,Collectionとして管理して、Viewでひとつづつ表示するような仕組みになってます。

使い方はcssとjsファイルをインポートして最後にBackboneSlide.init();を呼ぶだけです。 ホントはinitにオプション引数渡してアニメーションとか可変にしたいけど、そこまで作れなかったので画面遷移はfadeIn/Outだけとなってます。 また、backbone-slide.cssはプレゼンとしての表示のためだけなので、見た目のデザインは独自のcss等を読みこめば基本的には反映されます。

    <head>
                      <meta charset="UTF-8">
                      <link rel="stylesheet" href="./css/backbone-slide.css">
                      <title>Backbone-Slide.js</title>
                  </head>
                  <body>
                      <section><p>HelloWorld!</p></section>
                      ...
                      <script src="./javascript/lib/jquery-1.7.1.js"></script>
                      <script src="./javascript/lib/underscore.js"></script>
                      <script src="./javascript/lib/backbone-min.js"></script>
                      <script src="./javascript/backbone-slide.js"></script>
                      <script type="text/javascript">
                        $(function(){
                          BackboneSlide.init();
                        });
                      </script>
                  </body>
              

backbone.jsとかunderscore.jsとかイケてるテクニックをもっと使えるようになりたいなー。 あとテストもしっかり書くようにしよう。 この本も途中までしか読んでないのでちゃんと読もう。


参考にしたサイト


あと今回は静的なファイルだけなので、初めてgithub-pagesを作ってみた。

gitの仕組みがわかっているようで全然わかってないのでこの本を注文した。