Markdown × slideshow × guard で快適プレゼン資料作成

社内セミナー用にプレゼン資料を作成する必要があるのだけど、markdownでサクッと書きたかったので環境を整えてみた。

markdownでプレゼン資料を作成する方法がイロイロあって悩んだけど、シンタックスハイライトが使えるのと、テンプレートが豊富なのでslideshowを使うことにした。

slideshowでプレゼン資料作成

markdownやtextileからスライドを作成できるgem。 テンプレートも色々ある。
※テンプレートのリストには載ってないけど、impress.jsとかも使える

今回はslideshow-showerというテンプレートを使用した。

  • インストール
    $ gem install slideshow
  • テンプレートのインストール
    $ slideshow install shower
  • テンプレートの適用、ビルド
    $ slideshow build index.md -t shower

ファイルの先頭でyaml形式でheaderを書いてあげるとタイトルや作成者などを設定することができる。
※テンプレートにより設定出来る要素が異なる

% header  
author:  Your Name Here  
email:   Your Email Here  
company: Your Company Here  
title:   Your Title Here  
subtitle: Your Subtitle Here  
footer: Your Footer Here  
subfooter: Your Subfooter Here  

% slide  
# ほげ!

ちなみに、showerはtitleとauthorを設定できる。
が、表紙の背景画像の変更が出来なくて不便だったのでheaderで指定出来るようにした。*1
cover: hoge.jpg

guardでビルド自動化

slideshowでmarkdownからプレゼン資料を作れるようになったのは良いけど、修正する度にいちいちビルドを行うのが面倒だったのでguardを使うことにした。

  • インストール
    $ gem install guard
    $ gem install guard-shell

guard-shellはファイルの変更を検知してビルドコマンドを実行するために利用。

Guardfileには以下を記述した。

guard 'shell' do
  watch(/index.md/) {|m|
    `slideshow b #{m[0]} -t shower ` }
end

これでguardを起動していればファイルの変更を検知して自動でビルドされるようになった。

guardでブラウザの自動更新

ここまでくるとブラウザのリロードも自動化したくなってきたので、LiveReloadを使って実現してみた。

  • インストール
    $ gem install guard-livereload

Chrome ウェブストアからLiveReloadをインストール https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

Guardfileに以下を追記。(監視対象はmarkdownではなくhtml)

guard 'livereload' do
  watch(%r{index.html})
end

guardを起動しスライドのページでChrome拡張のLiveReloadを有効にする(ボタンをポチ)と、ファイルの変更を検知してブラウザの更新が行われるようになる。
うまくいっていればguardが - INFO - Browser connected. とログを吐くはず。

まとめ

これで快適にプレゼン資料が書ける!(設定しててあまり進んでない)

追記

slideshowのテンプレートの showerにプルリク送って取り込まれた。 表紙の画像とhtmlのlang属性を自分で設定できるようにしてある。

参考

markdownでスライド資料を作りたい | でつmblr

*1:tenten0213/slideshow-shower 微妙な修正なのでプルリク送るか悩んでる → 送った

XcodeのデバッグのキーバインドをEclipse風に変更する

最近、ちょくちょくXcodeを使って開発を進めてる。

まだまだObjective-Cに慣れないのでデバッグに頼ることが多いのだけど、Eclipseデバッグキーバインドと若干違っていて使いづらかったので、Eclipseっぽいキーバインドに変更した。

Eclipseデバッグキーバインド

f:id:tenten0213:20130807190947p:plain

Xcodeデバッグキーバインド

f:id:tenten0213:20130807191009p:plain

変更前後の対応

Command OldKey NewKey
Step Into F7 F5
Step Over F6 F6
Step Out F8 F7
Pause / Continue ⌃⌘Y F8

OpenGL ES関連のデバッグコマンドに割り当てられていたキーと衝突していたけど、OpenGLとかとりあえず使わないので適当に割り当てた。 Pause / Continue の⌃⌘Yがどうしても慣れなかったので、大分幸せになれた。

Xcodeを好みの環境に整える - パッケージ管理(Alcatraz),Vimキーバインド(XVim),カラースキーマ,背景画像の設定 -

会社で、あるサービスの検証用モバイルアプリの作成をすることになったので、せっかくなので経験の無いiOSで作ることにした。
環境構築から始めたので、そのメモを残しておく。

パッケージマネージャーのインストール


まず、Xcodeパッケージ管理用のプラグインであるAlcatrazをインストールする。
Alcatrazをインストールすることにより、プラグイン、テンプレート、カラースキームなどのパッケージをXcodeから検索、インストール、管理することができるようになる。

インストール


以下のコマンドを実行すればインストールされる。

mkdir -p ~/Library/Application\ Support/Developer/Shared/Xcode/Plug-ins;
curl -L http://goo.gl/xfmmt | tar xv -C ~/Library/Application\ Support/Developer/Shared/Xcode/Plug-ins -

Xcodeを起動していた場合は再起動をする必要がある。
再起動後、以下のようにWindowメニューにPackage Managerが表示されるようになる。

f:id:tenten0213:20130731184549p:plain

Vimキーバインドの設定


Vimを普段使っているので、XcodeVimキーバインドにする。
XcodeVimキーバインドにするには、XVimというプラグインをインストールすれば良い。

インストール


Alcatrazを利用し、インストールする。
Window - Package Manager でAlcatrazを起動し、XVimにチェックを入れインストールする。

f:id:tenten0213:20130731190108p:plain


Alcatrazを利用しないでインストールする場合は、Githubからコードをダウンロードし、XVim.xcodeprojをビルドする必要がある。

機能についてはこちらを参照。
.xvimrcを修正することで拡張することも出来る。

カラースキーマの設定


VimにしろSublime TextにしろEclipseにしろ、ダークテーマを選んで利用しているのでXcodeもダークテーマに設定する。

インストール


XVimと同様に、Alcatrazを利用してインストールする。

f:id:tenten0213:20130731191526p:plain

自分はMonokaiに設定したが、他にも色々なカラースキーマがあるので、好みのテーマを設定すれば良い。

f:id:tenten0213:20130731191916j:plain


Xcodeの背景画像を設定


ちょうどXcodeの環境構築をしていたらXcodeの背景画像を設定するプラグイン作ってみた - ほげほげ(仮)なんて素敵なブログが書かれていたので、背景画像も設定してみる。

インストール


STAR-ZERO/XFunnyEditorからクローンし、XFunnyEditor.xcodeprojをビルドする。

git clone https://github.com/STAR-ZERO/XFunnyEditor.git

ビルド後、Xcodeを再起動するとEditメニューにXFunnyEditorが表示されるようになる。

f:id:tenten0213:20130731200048p:plain

XFunnyEditorで好きな画像を選択し、Xcodeを再起動すると背景に画像が設定される。

f:id:tenten0213:20130731200255j:plain

XFunnyEditorはステキなプラグインなので、Alcatrazからインストール出来るようになると嬉しいですね。 ⇒すたぜろさんの神対応により、数時間後にはAlcatrazのリポジトリに取り込まれてました!




なので、Alcatrazをインストールした人はチェックを入れるだけでインストール可能です。

f:id:tenten0213:20130801014255p:plain

まとめ


Xcodeの環境は整えたけど使い方全然わからないし、Objective-C 難しいし、もっとコード書いたほうが良い

Play! framework 2.1.1(Java) + EbeanのモデルのJUnitがEclipseから実行できない場合の対処方法

  • Eclipse4.2
  • Play! framework 2.1.1(Java)

EclipseJUnitを実行したら以下のエラーが出た。

c.a.e.s.d.BeanDescriptorManager - Error in deployment
javax.persistence.PersistenceException: Error with [models.User] It has not been enhanced but it's superClass [class play.db.ebean.Model] is? (You are not allowed to mix enhancement in a single inheritance hierarchy) marker[play.db.ebean.Model] className[models.User]
	at com.avaje.ebeaninternal.server.deploy.BeanDescriptorManager.setEntityBeanClass(BeanDescriptorManager.java:1462) ~[avaje-ebeanorm-server.jar:na]
	at com.avaje.ebeaninternal.server.deploy.BeanDescriptorManager.createByteCode(BeanDescriptorManager.java:1138) ~[avaje-ebeanorm-server.jar:na]
	at com.avaje.ebeaninternal.server.deploy.BeanDescriptorManager.readDeployAssociations(BeanDescriptorManager.java:1058) ~[avaje-ebeanorm-server.jar:na]
	at com.avaje.ebeaninternal.server.deploy.BeanDescriptorManager.readEntityDeploymentAssociations(BeanDescriptorManager.java:565) ~[avaje-ebeanorm-server.jar:na]
	at com.avaje.ebeaninternal.server.deploy.BeanDescriptorManager.deploy(BeanDescriptorManager.java:252) ~[avaje-ebeanorm-server.jar:na]
	at com.avaje.ebeaninternal.server.core.InternalConfiguration.<init>(InternalConfiguration.java:124) [avaje-ebeanorm-server.jar:na]

Play Consoleからの実行は可能。

test-only models.UserTest
[info] Compiling 2 Java sources to /Users/tenten0213/Project/workspace/backbone-activity-play/target/scala-2.10/classes...
[warn] Picked up JAVA_TOOL_OPTIONS: -Dsun.jnu.encoding=UTF-8
[info] Compiling 3 Java sources to /Users/tenten0213/Project/workspace/backbone-activity-play/target/scala-2.10/test-classes...
[warn] Picked up JAVA_TOOL_OPTIONS: -Dsun.jnu.encoding=UTF-8
Picked up JAVA_TOOL_OPTIONS: -Dsun.jnu.encoding=UTF-8
1
[info] models.UserTest
[info] + models.UserTest.createAndDelete
[info] 
[info] 
[info] Total for test models.UserTest
[info] Finished in 0.012 seconds
[info] 1 tests, 0 failures, 0 errors
[info] Passed: : Total 1, Failed 0, Errors 0, Passed 1, Skipped 0
[success] Total time: 6 s, completed 2013/07/18 22:19:40

どうやらIDEで実行する時だけ出る模様。テスト実行時のコンパイルがおかしいみたい。

対処方法

IntelliJ IDEAの場合

以下のプラグインを入れれば解決する模様。

Eclipseの場合

IntelliJのようなプラグインは無いので、VM引数にjavaagentコンパイルオプションを指定する。

-javaagent:/path/avaje-ebeanorm-agent.jar

JUnit実行時のVM引数に毎回設定するのが面倒なので、Java - Install JREs の利用しているJREの設定で、 Default VM argumentsに設定してる。


最近、別のフレームワークで書いたアプリをplayで書き直してる。
サクサクいけるだろうと思ってたけど、ちょくちょくハマったりするし甘くないですね…
これ終わったらPlay Scalaでやるか、Compojureでやるかなー。

nokogiriインストールエラー

Amazon Linux AMI(CentOS)でnokogiri入れようとしたらエラーが出た。
チュートリアルを見てみると、libxml2とlibxsltが必要らしい。

sudo yum install -y libxml2-devel
sudo yum install -y libxslt-devel

でそれぞれインストール後にインストールし直したらエラーが解消した。

iPadでSSHしてWeb開発する環境を構築する

  • iPad(第三世代)を活用出来ていなかった
  • 家で使っているMBAデュアルディスプレイにしていて持ち運ぶのにケーブル外すの面倒
  • 自由にいじれる環境が欲しかった

などなどの色々な思いが交錯した結果、さくらVPSの980円のプランを契約してiPadで開発出来る環境を整えてみた。
さくらVPSの契約とか初期設定はググれば色々出てくると思うので説明は割愛する。
以下ではサーバのセットアップが完了し、鍵ペアの作成、秘密鍵の取得が完了している前提で進める。

SSHクライアントアプリ


iPadからさくらVPSにSSH接続する為にSSHクライアントアプリを入れる。
無料のアプリで秘密鍵接続可能なSolarWinds Mobile Admin Clientというものも使ってみたけど、微妙だったので、700円するけどPromptを使うことにした。
Promptは秘密鍵を読み込むことが出来るし、動作も軽快なのでなかなか良い感じ。


Panic, Inc.
Prompt(700円)

販売元:Panic, Inc.(8MB)

全てのバージョンの評価:★★★★☆(67件の評価)


接続設定


接続先ホスト、ユーザ名、パスワードを入力し、鍵マークから接続先サーバの秘密鍵を選択する。

f:id:tenten0213:20130415234420j:plain

秘密鍵は、PCと繋ぎiTunesからアプリに追加しておく。

f:id:tenten0213:20130415234850p:plain

これで接続ボタンをタッチすると、さくらVPSにSSH接続できる。

Keyboard


さすがにソフトウェアキーボードで開発するのはキツイので、iPadの蓋にもなるキーボードを買った。
LOGICOOL ウルトラスリム キーボードカバー TK710WH

LOGICOOL ウルトラスリム キーボードカバー TK710WH

  • iPad+Keyboardにすると、MacBookAirより若干厚い

f:id:tenten0213:20130415235504j:plain

  • 大きさは、まぁiPadそのまま

f:id:tenten0213:20130415223348j:plain

ちなみに、重さは MBA13インチ > iPad+Keyboard > MBA11インチ でした。
…MBA11インチの方が軽い

  • 開いてセッティングするとこんな感じ

f:id:tenten0213:20130415223608j:plain

深く考えないでキーボード買ったけどUS配列だし、ESCキーが無かった…
一応ESCはCtrl+{ で代用出来る。
※結構の割合でキーボードにESCが無いので、ESCが無いと…って人は注意が必要

Web開発に欠かせないデバッグツール


iPadでもFirebugを利用する方法があった。
Martin Kool - How to use Firebug on your iPad and iPhone

1. 適当なページをブックマークする
2. ブックマークを"Firebug"にリネームし、以下のコードをURLに貼り付ける

javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');

3. Firebugを実行したいページでブックマークからFirebugを開くとBookmarkletとして実行できる。

f:id:tenten0213:20130416000825p:plain

まとめ


それなりに使える環境が出来上がった。
この環境で本気でWeb開発をするのはキツイ気がするけど、ちょっとしたリファクタリングや、テストの追加、環境改善には使えそう。

これからはもっとiPadを持って歩こう。

Amazon Linux AMI にbyobuを入れる

yum install byobu したらパッケージが見つからないって怒られたので、RPMパッケージを取得してきてインストールした。

CentOS 6 (RHEL 6) - EPEL i386からbyobuの最新版のrpmを取得してくる。

wget http://puias.math.ias.edu/data/puias/unsupported/6/i386/byobu-5.21-4.sdl6.noarch.rpm

※2013/4/5時点ではbyobu-5.21-4.sdl6.noarch.rpmが最新

sudo yum install byobu-5.21-4.sdl6.noarch.rpm

これでインストール完了。

前の記事で書いてように、タブを使いたいからRLoginを使い始めてみたけどbyobu入れればその機能は満たされる気がする。

ただ、RLoginでもputtyでもCtrlとかShiftとFunctionキーの組み合わせがうまく機能しない感じ。

.tmux.confいじってキーバインド設定するか。