2014-06-01

プレゼンスライド生成のbespoke.jsをさわってみた

プレゼンテーション生成のbespoke.jsをさわってみた

プレゼン用のスライドショーを簡単生成する nodeで動くbespoke.jsをさわってみた

結論

超簡単なので、これから使う。

必要なもの

brew install node
npm install -g yo generator-bespoke

新規スライド作成手順

mkdir sample_slide
cd sample_slide
yo bespoke #yeomanでプロジェクトが生成される。色々聞かれるけど全部yesでOK
grunt server #勝手にブラウザが立ち上がって、スライドショーが開始される

スライドの編集の仕方

src/index.jadeを修正すればおｋ grunt serverをしとけば、スライド直せばブラウザも更新されるのがなにげに便利。

    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1, maximum-scale=1')
    title Sample Presentation

    // build:css styles/styles.css
    //- Check out 'src/bower_components/prism/themes/' for available themes
    link(rel='stylesheet', type='text/css', href='bower_components/prism/themes/prism-tomorrow.css')
    link(rel='stylesheet', type='text/css', href='styles/main.css')
    // endbuild

  body

    article

      section
        h1 はじめてのプレゼン

      section
        h2 画像とかも貼れる
        h3 <img src="https://pbs.twimg.com/profile_images/1650275843/__________2011-11-21_23.03.19.png">
                                                                                                                                                                                                              

    // build:js scripts/scripts.js
    script(src='bower_components/bespoke.js/dist/bespoke.min.js')
    script(src='bower_components/bespoke-keys/dist/bespoke-keys.min.js')
    script(src='bower_components/bespoke-touch/dist/bespoke-touch.min.js')
    script(src='bower_components/bespoke-bullets/dist/bespoke-bullets.min.js')
    script(src='bower_components/bespoke-scale/dist/bespoke-scale.min.js')
    script(src='bower_components/bespoke-hash/dist/bespoke-hash.min.js')
    script(src='bower_components/bespoke-progress/dist/bespoke-progress.min.js')
    script(src='bower_components/bespoke-state/dist/bespoke-state.min.js')
    script(src='bower_components/bespoke-forms/dist/bespoke-forms.min.js')
    script(src='bower_components/prism/prism.js')
    script(src='scripts/main.js')
    // endbuild

ブラウザではこんな感じに見える

f:id:chocopie116:20140601013742p:plain

f:id:chocopie116:20140601013747p:plain

なかなかいい感じ。いろんな用途で使えそう。

2014-05-08

github flavored markdownで書いたmdファイルを、pdfにする方法

仕事でシステム連携仕様書をmarkdownでかきました

今は、atomのmarkdown previewでやるのがナウいと言われて仕様書をつくるだけ作りました。

しかしいざ先方にお渡しする段階で gistに貼り付けてurlをお渡しすることも考えたのですが、やっぱりpdfでしょという話になり、その時に有料アプリ買うか・・・とかいろいろ悩んだ時のお話です。

結論からいえば、pipでgripを入れて、 htmlを吐き出して、ブラウザでpdfとして保存すればOKです。

インストール

pip install grip

以上。

使い方

grip sample.md

とするとlocalhost:5000でアクセスするとブラウザで、mdァイルが、いい感じでhtmlで見れます。

あとはそれをchromeでpdfとして保存するだけ。

gripとてもいい感じです。

github

是非markdownで書類作成して、pdfでエクスポートする時は、gripでやりましょう。

2014-04-20

apacheで、mod_deflateでレスポンスをgzipしたけどネットワークトラフィックが増えている？

iOSのネイティブアプリでの掲示板サービスの、jsonを返すバックエンドのAPIのサーバーをつくってます。ネットワークトラフィックを減らそうと思って、apacheでgzip 圧縮をすることにしました。コンテンツの圧縮率をみたら、処理によって、圧縮できているところと、むしろ圧縮以前より容量が増えたものがあったりして、よくわからないので備忘録的にまとめました＼(^o^)／ｵﾜﾀ

必要なmodule

mod_deflate.so コンテンツを圧縮するモジュール
mod_filter.so 圧縮対象を選択するモジュール

設定

httpd.confに記述するだけ。やった環境 centOS 6.5, Apache/2.2.15 モジュールversion

モジュールの読み込み

LoadModule deflate_module modules/mod_deflate.so
LoadModule filter_module modules/mod_filter.so

モジュールの利用

#Gzipの圧縮の設定
# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html

# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip

# MSIE masquerades as Netscape, but it is fine
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

# ここからフィルター設定
FilterDeclare Compression CONTENT_SET
FilterProvider Compression DEFLATE Content-Type $text/plain
FilterProvider Compression DEFLATE Content-Type $text/css
FilterProvider Compression DEFLATE Content-Type $application/xhtml
FilterProvider Compression DEFLATE Content-Type $application/xml
FilterProvider Compression DEFLATE Content-Type $application/json
FilterProvider Compression DEFLATE Content-Type $application/xhtml+xml
FilterProvider Compression DEFLATE Content-Type $application/rss+xml
FilterProvider Compression DEFLATE Content-Type $application/atom+xml
FilterProvider Compression DEFLATE Content-Type $application/x-javascript
FilterProvider Compression DEFLATE Content-Type $image/svg+xml
FilterProvider Compression DEFLATE Content-Type $text/html
FilterProvider Compression DEFLATE Content-Type $application/javascript
FilterChain Compression
# ここまでフィルター設定

# Don't append Vary heder for specific files
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|zip|lzh|exe)$ dont-vary

# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
Header append Vary Accept-Encoding env=!dont-vary

# gzipでの圧縮率をログに吐き出す(確認用）
DeflateFilterNote Input instream
DeflateFilterNote Output outstream
DeflateFilterNote Ratio ratio
LogFormat '"%r" %{outstream}n/%{instream}n (%{ratio}n%%) %{User-agent}i' deflate
CustomLog logs/deflate_log deflate

ちなみに一番下にある、deflate_logを見ると、mod_deflateによる圧縮率を見ることができます。

"GET /example/badge HTTP/1.1" 45/37 (121%) 
"GET /example/list?offset=1&per_page=20&seed=26 HTTP/1.1" 1835/5221 (35%)

送信データの多いもの(掲示板の一覧表示画面)は、大幅に圧縮できているけど、送信データ量の少ないもの(新着通知のバッチのカウントを返すもの)は、むしろ容量が増えている(?)

これはなんでだろう。

上記謎と、gzip 圧縮によるCPU使用の増加率とかも、サービスイン後に調べてみようとおもいます！リリース前は、あれもやりたい！これもやりたい！ということがあって、

サービスインするまでには、インフラやアプリ・運用を見据えた仕組みでやっとけばいいことというのは本当に無数にあって、リリース前までにやるべきこと以外で、捨てることは本当に多いなと痛感しながら日々進めております。

2014-03-23

Laravelで、DBやEloquentクラスでsqlを実行してget()したけど、結果がstdClassになっちゃった場合

ネイティブアプリのサーバーのAPIで、Laravel使って見るかーとなったけど、結果が、stdClassになって、危うく全部foreachしてarrayキャストするところだった。 PDOのFETCHの設定が下記ファイルに書いてた。

app/config/database.php

    /*  
    |--------------------------------------------------------------------------
    | PDO Fetch Style
    |--------------------------------------------------------------------------
    |
    | By default, database results will be returned as instances of the PHP
    | stdClass obj
    | array format for simplicity. Here you can tweak the fetch style.
    |
    */

    'fetch' => PDO::FETCH_CLASS,

上記をPDO::FETCH_ASSOCにすれば解決。

ここが大変わかりやすかったです。

2014-03-16

githubのプライベートリポジトリをLaravelのartisan経由で、Rocketeerでデプロイする時にハマったこと

Laravelのartisan経由でdeployしようとすると、デプロイコマンド実行しても結果が返ってこない・・・

どうやらdeployタスクが実行されるタイミングで、公開鍵のパスワードを入力してください・・・のようなコマンドライン上での対話が発生してしまうと、デプロイが止まってしまってしまう模様。

rocketeerのリポジトリの設定ファイル

    // SCM repository
    //////////////////////////////////////////////////////////////////////

    // The SCM used (supported: "git", "svn")
    'scm' => 'git',

    // The SSH/HTTPS address to your repository
    // Example: https://github.com/vendor/website.git
    'repository' => 'git@github.com:Someone/MyApp.git',

    // The repository credentials : you can leave those empty
    // if you're using SSH or if your repository is public
    // In other cases you can leave this empty too, and you will
    // be prompted for the credentials on deploy
    'username'   => '', 
    'password'   => '', 

    // The branch to deploy
    'branch'     => 'master',

    // Whether your SCM should do a "shallow" clone of the repository
    // or not – this means a clone with just the latest state of your
    // application (no history)
    // If you're having problems cloning, try setting this to false
    'shallow' => true,

    // Recursively pull in submodules. Works only with GIT.
    'submodules' => true,
);

一旦公開鍵をパスフレーズなしで、作成したら、うまくいった。

2014-03-15

php版capistranoのRocketeerを使ってdeployしてみる

開発環境から気軽にdeployできる方法をphpでやってみた。 capistranoだとrailsアプリ前提だったので（もちろんRailsアプリ以外もいけるけど)

概要

Rocketeer

やってくれることはシンプル. capistranoと同じで、deployするclientからリリース環境に対してdeployをやるという構成。指定したユーザーでssh接続して、deployの度にreleaseディレクトリに最新のアプリケーションを持ってくる。そしてdocument rootが設定されたcurrentに対して、symbolic linkでアプリケーションを公開を切り替えるというもの。

利用するにあたって下記の３つの前提条件だけ. * git * ssh接続設定 * deploy先にcomposerが事前にインストールされていること

基本的な使い方はcomposerと同じ感覚。

使い方

cd ${application-directory}
wget http://rocketeer.autopergamene.eu/versions/rocketeer.phar

php rocketeer.phar ignite

上記コマンドで、deploy用の設定がディレクトリに書かれる

./.rocketeer └ config.php --deploy先にssh接続するための設定
└ hooks.php --deployにhookする処理を書く
└ logs --deployのログ
└ paths.php --phpや、composer等のパスを書く
└ remote.php --deploy先の設定を書く
└ scm.php --gitやsvnの設定を書く
└ stages.php --productionやstagingの設定を書く

上記設定ファイルの勘所はわからないので、後々運用したら書いてみる

php rocketeer.phar deploy

※composer経由で、installして、/vendor/bin/rocketeerから同じことをたたいたら、エラーがでたのですが、わかりませんでした。どなたかお詳しいかたいらっしゃいましたら教えて下さいm(__)m

2014-02-27

行ってきた。東京Node学園vol11

初参加で、行ってきました。メモをうｐります。 webにうｐされていたので、名前や資料などもメモ用に掲載していますが、問題があればいってください。以下発表

これからのNode.jsの話をしよう @yosuke_furukawa

スライド

最近のHot News

リーダー変更
Node.js v0.12
- sync child_process
- tracing API
- profiling 用のPAI
  - heap memoryの状況をモニタ
  - tick毎にユーザーの任意のオブジェクトをトレース

気になるライブラリ

koa(WAF) 詳しくはこちらを
- generator / yieldの未来
- try ~ catchのエラーハンドリング
  - エラーハンドリングが直感的
リアルタイムライブラリ
- Socket.IO
  - 新しいperl6?
- sock.js
- faye
- Engine.IO
- Primus [おすすめ]
  - transfer層を後で置き換えられる。とりあえずこれ使っとけばよい。
フロントエンドツール周り
- gulp
- browserify

東京Node学園の今後

今後についてはここでネタを集めていくとのこと。
- github
- gitter

browserifyの話 @hitsujiwoolさん

発表資料

ここのソースをlocalで動かしてとのこと
browserifyとは
- サーバーサイドのjsをクライアントで使えるよ！的な話。
  - 使ってみないとわからない・・・。

LT

発表面白かったです。
まとめ Nodeのコアライブラリしっかりよんでみる Expressもうちょい使ってみる それから他のライブラリに手をつけるかｗ ネタはないけど、次回発表したい。 *** もう少し参加している人たちと話せたらいいなとおもうけど、いつもなんだかきっかけがなくてそそくさと帰ってくるコミュ障ですｗ

It's now or never. @chocopie116

チラシの裏