co のすべての投稿

thum

GitにPushすれば自動でデプロイできる「dploy」を試してみました

テスト環境や本番環境へのデプロイ(ファイルのアップロード)をGitのプッシュに連動できる「dploy」というツールを使ってみました。

やりたい事

  • 環境は2つ、テスト(1)と本番(2)
  • Git(GitHub)でソースコード管理
  • 開発段階はdevelopブランチにて作業、本番公開時にmasterにマージ(featureなどは適宜)
  • developブランチにプッシュすると(1)に自動デプロイ
  • (2)はmasterブランチにプッシュ後ブラウザ上で操作してデプロイ

使ったツールがこちら

dploy.io – Continuous deployment for everyone http://dploy.io/

img-1-1

無料で作成できるレポジトリはひとつ、以降10レポジトリ毎に有料になってきます。
10個で月$15は若干高いですね。

以下テストを行った手順をまとめてみます。

まずはアカウント登録

img-1-2

サブドメイン名やメールアドレスなどを登録します。

テスト用のGitレポジトリを作成

img-2-1

テスト環境用にdevelopブランチを作成してリモートにプッシュしておきます。

レポジトリ、サーバーの設定

img-3-1

登録後、自分のアカウントにログインすると連携させるレポジトリとデプロイ先のサーバーの設定に移ります。

img-3-2

今回はGitHubでテストしました。テスト用のリモートレポジトリを選択し名前を付けます。

img-3-3

img-3-4

続いて環境設定。名前やラベルカラー、デプロイの自動/手動の設定、他Webフックなどのオプションを設定します。
ここでブランチをdevelopに設定し、developにプッシュされるとデプロイするという設定にします。

img-3-5

最後にサーバー設定。

img-3-6

完了するとこんな画面になります。

img-3-7

同様に本番用の設定も行います。ここでのブランチはmasterを設定。一旦自動でデプロイにしておきます。

img-3-8

これで準備完了。

レポジトリにプッシュしてみる

img-4-1

developをプッシュ

img-4-2

dployを見てみるとコミットした内容が表示されています。

img-4-3

プッシュ(デプロイ)する毎に履歴が残るような形ですね。

img-4-4

もちろんテスト環境にもファイルはアップされています。

img-4-5

最新のレビジョンが.revisionというファイルで確認できるようになっていますね。

masterもプッシュしてみる

img-5-1

masterにコミットをマージしてプッシュ。このへんは手動。

img-5-2

dployにも反映されています。この場合は3コミット分まとめてデプロイしてるのでレビジョンとしてはひとつ。

masterを手動デプロイに変更

img-6-1 dployの設定画面に戻り、Development Modeを”Manual”に変更します。

img-6-2

すると次のコミットをmasterにプッシュしてもデプロイされなくなります。
ここからは手動でのデプロイになるので、画面上にある”Deploy”ボタンを押してデプロイします。

img-6-3

こちらが手動でのデプロイ画面。deployment noteという個別のコメントを記載できます。

img-6-4

[Start Deployment]を押すと無事にデプロイできました。

まとめ

dployは設定が非常に簡単で、画面もわかりやすいので特に迷う事なく使えました。
1レポジトリ無料のフリーミアムなので気軽に使ってみるのも良いですね。

参考サイト

thum

BootstrapベースのシンプルなWordPressのテーマを作成

サイト設計段階で使用するモックアップの制作にBootstrapを利用する事は多々あるかと思います。

Jadeなどのテンプレートエンジン+スニペットを駆使すれば全て静的なHTMLでも割と簡単に作成できますが、
ページの概念や検索機能、記事管理、メニュー管理の面で、いきなりWordpressに乗っけたものがあっても良いかと思い、シンプルなテーマファイルを作成してみました。

https://github.com/kotaro-co/bootstrap-wp-template

レイアウトとして4パターンを制作しました。以下は確認用の静的なページ

img-single1.シングルカラムのページ

img-multi2.マルチカラムのページ

img-masonry3.カード型レイアウトのページ

img-allparts4.Bootstrapの全パーツをまとめたページ

フルスクリーンのページやもっとグリッド感を強めたレイアウトまであっても良かったかもしれませんが、とりあえずレイアウトは1.〜3.である程度賄えると思います。
また、4.のパーツ一覧ページはオリジナルでCSSを作った際にパーツを1ページでまとめて確認するためのものです。※こちらのサイトから拝借しました。

WordPressのテーマとして設定した場合は、[Page-Single],[Page-Multi],[Page-Masonry],[Page-AllParts]の固定ページ用テンプレートが同じものになります。
この固定ページ用テンプレートは特に記事の連動はかけていないので、必要に応じて設定するという想定です。

img-page-wp

WordPressでBootstrapのパーツを組み立てようと思った時に、ショートコード系のプラグインを入れて記事本文エリアで作成する事もできなくはなかったのですが、 結局タグの入れ子が多くなってHTMLを組むのと大差が無い事と、細かいクラス指定ができないなどプラグイン上の制限があるため、あくまでパーツの組み立ては使い慣れたコードエディタで直打ちするのがベストだと判断しました。
ですのでWordpressもローカルにインストールしてローカルでテンプレートを組んで行くイメージですね。

スクリーンショット 2015-05-09 17.25.39

Amebaの無料Webサイト作成サービス「Ameba Ownd」を使ってみました

アメブロを運営するAmebaが昨年リリースした無料Webサイト作成サービス「Ameba Ownd」を使ってみましたので簡単にレビューしてみます。

スクリーンショット 2015-05-09 17.34.15 作ったページ

Ameba Owndの詳細
“わずか3ステップで誰でもカンタンにウェブサイトを作成することができます。”という事で、ページ自体は数クリックで立ち上がります。
掲載する写真を選んだり、簡単にプロフィールを作って1,2時間で作成し終わります。

良い点

  • レスポンシブに対応した綺麗なテンプレート
  • 色やフォントなど細かすぎないデザイン設定
  • SNSとの簡単な連携

イマイチ、わかりにくい点

  • 項目のラベリングや管理画面の構成(慣れればOK)
  • ページのレイアウトでカラム分けできない(スマホメインならOK)
  • 文字のスタイル(太字やリンク、アライン)を設定するWYSIWYGのメニューの出し方がわからない
  • 画像のアップロード時にサイズの大きい画像で上下反転する
  • 文字の変換時にWYSIWYGが出た場合文字が消える時がある(Safariだけ?)
  • 投稿を新規追加する際に右上のアイコンを押すという点に気づきづらい、「投稿を管理」のメニューに並べてあった良い

簡単な操作でサイトを作れるサービスですが、ちょっと細かく設定したいという人にはやや物足りないかもしれません。あと上記変換文字が消えるなど、編集画面の使いにくさは慣れるまで気になる点です。

あと、アメブロのアカウントを使いますが、投稿も別になるので本体のブログと特に連携は無くアメブロとは別物という扱いです。

thum_500

サービスで振り返る2015年春の引越し

今年3月に東京から実家の長崎に引っ越しました。
その際に使用したいくつかのサービスと良かった点、反省点などを振り返ってみます。
書き始めるとあれもこれもと膨らんでしまいかなりの長文になってしまいましたが、何かしらお役に立てれば幸いです。

目次:

  • 輸送手段を決める: ヤマト運輸
  • 梱包資材など買っておくもの: Amazon
  • ダンボールのサイズ選び: アースダンボール
  • 売れるものはここで: ヤフオク
  • 不用品は「あげます」: mixi
  • いろいろTODO: Wunderlist

輸送手段を決める: ヤマト運輸

yamato
http://www.kuronekoyamato.co.jp/top.html

引越しでまず最初にやることとして輸送手段を決めるという工程があります。
これは予算や荷物の量、今後の生活スタイルに合わせて選ぶ事になりますが、主に以下3つで選ぶ形ですかね。

1.業者にお任せ
2.車で自走
3.宅急便

1.業者にお任せ

今回は利用しませんでしたが、一番メジャーで楽な方法。
関東内であればおすすめの業者は「スタームービング」です。
2トントラック、スタッフも3人付いて半日で搬出〜搬入まで済んで2万円ちょっとです。 梱包が不十分でもトラックが広いのでぼんぼん載せてもらえます。 若手スタッフの動きもとてもテキパキしていてまさに星のような動きであっという間に輸送が完了します。
安さの秘訣はこの動き速さなのだと納得しました。

2.車で自走

レンタカーでハイエースなどのバンを借りて自分で搬送する方法です。
距離が近くて荷物が少ないなら一番安く済むし、梱包もざっくりでいいので事前準備は楽ですね。自分も何度か使ったことがあります。
レンタカーを借りる際の一つポイントとしては、24時間空いてるお店を使う事ですかね。
渋滞や荷下ろしでちょっと時間オーバーした時も延滞金が少なくて済みます。これが20時閉店とかだと、動ける時間も限られるし、延長してしまうと次の朝までのお金がかかってしまいますので、家からちょっと遠くても24時間営業のお店があればそこを使うのがオススメです。

3.宅急便

私は今回この方法にしました。
九州までなので距離もあり、時期的に引っ越しシーズンピークだったため、業者に頼むと20万ほどかかってしまうため、予算を抑えたかったのが一番の理由です。
また、実家に戻るという事で家具家電など大物の荷物を処分したので、宅急便で送れるサイズの梱包にできました。

宅配業者は、ヤマトを使いましたが、使って良かったポイントとしては以下

  • ユーザー登録を行っておくと集荷の依頼が簡単。
  • 集荷時に登録した送り先宛の送り状を記載したものを用意してもらえる
  • 輸送状況の確認や配送完了の通知を送り先と送り元にそれぞれにできる(実家にいつ頃届くよーという連絡が不要)
  • ソファや布団など、宅急便で送れないサイズの荷物はらくらく家財宅急便で一つずつ配送できる

梱包資材など買っておくもの: Amazon

amazon
http://www.amazon.co.jp/

プチプチのロール

何かと必要なプチプチですが、極力幅の大きいものを選ぶのがポイントです。
箱に入れて梱包が難しいものはこれでぐるっと包めばそのまま発送できます。

プラテープ

箱の固定など全般的に使うもの。 茶色いガムテープでも良いですが、3Mのこのテープは頑丈で剥がした時の跡残りも少なく、透明なので見た目もきれいです。

養生テープ

後から剥がして使うものを巻く際にこれも多少必要です。

テープのローラー

これ!今回一押しがこのローラーです。
上記プラテープをこれにセットして使いましたが、とても便利です。
手で切れないような素材のテープでも片手で簡単に切れますし、何より断面が真っ直ぐになるのが無駄がなく仕上がりも綺麗。

ひも結束器

雑誌やダンボールをまとめる際にビニール紐を巻く事がありますが、手で結んでもすぐ緩くなったりなかなかうまく巻けない事が多いと思いますが、これを使えば簡単かつ頑丈に固定する事ができます。
紐をねじって固定するという発想がとてもナイスです。

その他、ダンボールも含め梱包資材を買う一番のポイントは多めに買うという事です。
余ったら捨ててしまえばいいですが、途中で足りなくなってしまうとその間作業が中断してしまったり梱包も不十分になってしまうなど、ロスが非常に多くなってしまいます。

ダンボールのサイズ選び: アースダンボール

earth-daball
ダンボールは基本的に同じサイズに統一すると個数が把握しやすくピッタリと収納できて良いです。
私が今回基本とするサイズに用意したダンボールがこれ↓ http://diskunion.net/acc/ct/detail/ACS-2

自分がアナログレコードの収納で多く持っていた事がきっかけだったのですが、これは発送100サイズぴったりで重いものでも手持ちで運べるちょうど良い大きさの箱です。
これを今回40個用意して、これを超えるイレギュラーなサイズのものはプチプチで巻くなどで対応しました。

また、これとは別でどうしてもジャストサイズで欲しかった箱があり、今回アースダンボールを利用しました。
4枚買って送料込みで3000円ぐらいでした。サイズや厚さなど細かく指定できて結構使えます。

売れるものはここで: ヤフオク

yafuoku
http://auctions.yahoo.co.jp/

言わずと知れた個人売買の最大手。
不要になったものを売りに出したい時はリサイクルショップは使いません。なぜなら、

  • 箱や説明書が不足してたり、年式が古いと買い取ってもらえない
  • タダ同然の値段にしかならない
  • 車がないと持ち込み自体が大変

多少手間はかかりますが、ブランド品、メーカー品などある程度お金になりそうなものであればヤフオクに出すのが一番です。
自分は今まで何度も出品した経験があり、細かいノウハウはいっぱい持っているのですが長くなるので要点だけまとめますと、

  • 競合の商品をリサーチしてちょい低めの金額設定にする
  • 1枚目の写真(サムネイルになる)を引きのあるものにする
  • 本文エリアにも写真を掲載しまくる
  • 目立ちアイコンなど有料オプションを惜しまない
  • 終了時間設定は日曜の夜にする

という感じです。
ヤフオクの売買を身につけると物を買う時の選択肢も広がります。
HTMLや写真の簡単な加工をする事もあるのでWeb制作のノウハウも生かせました。

不用品は「あげます」: mixi

mixi
http://mixi.jp/

はい、ここで何故mixi?という感じですが、今回の記事で一番オススメしたいのがこのサービスなのです。
mixiの匿名性膨大な掲示板コンテンツを活用します。
今回引越しに使うそのコンテンツはあげます/くださいコミュニティです。

地域別にコミュニティがあったりもしますし、自分が利用したこのコミュニティは参加者4万人もいます。
このようなコミュニティは基本的に金銭のやりとりは行わず、「あげます/ください」のやりとりだけを行うだけの場所なので、お金は1円もかからず、あげた物に対してクレームを言われるなど面倒な事は一切ありませんし、関東圏内であれば利用者も多く「発送無し、引き取りのみ」という条件を付けても引き取り手はどんどん見つかります。

  • ヤフオクに出すほど価値が少ないが、普通に使える品。
  • 粗大ゴミに出すにはお金がかかるが、リサイクルショップに持っていっても買い取ってもらえない品。

といったものは結構な量が出てきます。
私の場合は「押し入れ収納、突っ張り棒」「ヘルメット」「トレーニンググッズ」「ゴミ箱」「IKEAの家具」などです。

例えば私が出したのはこんなもの。
http://mixi.jp/view_bbs.pl?comm_id=32603&id=77916121

これによって自分の処分費用も浮かせる事ができて、貰った人のためにもなる。
Win-Winというやつです。素晴らしい。

今回自分は幸運にも複数の品を同じ人に何度も引き取りをお願いできて、「こんなにいろいろと頂けたので、他に処分するものなどあればもらって行きますよ」という有難いお言葉まで頂け、更にゴミ処分の手間まで省く事ができました。

いろいろTODO: Wunderlist

wunderlist
https://www.wunderlist.com/ja/

最後に挙げるものは引越しに限ったものではありませんが、TODO用のアプリです。
Webはもちろん、スマートフォンのアプリでも使えます。

引越しには荷物の配送の他に電気や水道などの契約処理や、お金のやりくり、転職のタイミングであれば挨拶まわりなど、短期間に重要なタスクが集中するものです。
引越しは段取りが命なので、職場のPCや移動中のスマートフォンなどでも手早くTODOをチェックできると無駄なく進められます。

もちろん引越し後も住所変更などの手続きや新たに買うものも出てくるので、引越し後の今でも使用しています。

wunderlist

反省点

以下やっておけば良かった事など、次回引越しの際に忘れないようにメモとして残しておきます。

単身パック

ヤマトと日通が提供している単身パック。少ない荷物を遠方に安く送るにはやはりこれが一番。今回は予約が間に合わず使えませんでした。

ヤマトのカード会員

ヤマトの発送に使えるプリペイドカードです。
5000円以上で10%オフ、5万円以上使うなら15%オフになるので、今回の予算なら確実に値引きが有効でした。
発行まで3週間ほどかかるという事で今回は間に合いませんでした。

時期の選択

実は今回3月末という時期はマストではなかったので、少し時期をずらしても良かったなと思います。このピーク時期を避ければ引っ越し業者の代金もぐっと安くできるので利用できたかもしれません。

まとめ

ダラダラと書いてしまいましたが、まとめを書くとすれば、引っ越しで大事なのは早めに動くという事に尽きますね。
業者の手配はもちろん、今回紹介したライフハック的な情報を集める時間も事前に確保して引っ越しに臨めると良いですね。

最後に収支。

IMG_9323_r

  • ダンボール100サイズ(33個): -¥53,460
  • ダンボール160サイズまで(13個): -¥25,596
  • ソファなどらくらく家財宅急便で送った大物(4個): -¥26,870
  • レンタカー(友人に家具を譲渡): -¥8,454
  • 資材購入: -¥16,960
  • 粗大ゴミ: -¥7,900
  • ヤフオク(5点)の売り上げ: +¥33,050

合計: -¥106,190

なんとか10万ちょいで収まりましたが、予算にも余裕があるのがなによりですね。。

thum

HTML5の認定資格を取ってみました。

年末年始の休暇を利用して資格を取ってみました。
HTML5 プロフェッショナル 認定資格レベル1というWEB制作者、特にデザイナーやコーダーに人気のある資格です。

内容としては

  • WEBの基礎知識(http、リクエスト、サーバーなど):15%
  • HTML(HTML5)タグの知識:40%
  • CSS(CSS3):30%
  • レスポンシブデザイン:10%
  • オフラインアプリケーション:5%

という感じで、HTMLだけでなくWEB制作全体の基礎知識が必要になるものでした。

学習した期間は約2週間。教材はこちらの認定教材1冊とWEBに上がっているリファレンスサイトを少々。

以前出ていたこちらの白い教材はやや内容が薄くてこの1冊だけでは合格が難しいと言われていたようですが、今回使った教材なら1冊まるっと頭に入れば十分合格できると思います。

合格点は70点/100点、自分は89点でした。
他に受験された方のブログ記事などで「教材に無かった問題がいっぱい出た」と言われていてかなり構えていましたが、自分の場合はほぼ教材と同じものでした。

受験は認定の試験場でPCを使う形式。
試験終了直後に結果がわかるというあっさりしたものですが、認定証や賞状は約3週後に郵送されます。

img1

今後のキャリアアップに少しでも役立つかと思って取ったものですが、改めてWEBの基本的な知識を学べたのは良い機会でした。
リクエストやプロトコルといったネットワーク系の言葉を始め、HTML5になってセマンティックになったタグの使い方も学びとしては非常に多く、今までよりタグ付けに迷いが無くなりました。

勉強のやり方については、普通に教材を頭から順に読み進めて、理解が弱い部分を何度か振り返るという普通な流れでやりましたが、本当は一回模擬テストをやった後で本を読み始めるようにしたかったのですが、教材についてくる模擬テストが1回分しか用意されていないため、最後の1回にテストするだけにしか使えなかったのが少々効率が悪かったように思います。

現在は新しい教材も出たようで、これから受験される方はこちらもお使い頂ければ完璧なのではないでしょうか。

img_markup_150107_04

「Print1」というツールを作りました

先日、会社のWeb制作ブログにてこんな記事をアップしました。ご存知の方いるかな?

▶︎縦に長い画像を1枚で印刷する際に自動分割してレイアウトするツール「Print1」

「日頃ちょっとだけ困っている事を仕組みを作って改善する」という取り組みから生まれたツールと記事でした。
仕組みのシンプルさやWeb以外の用途に発展した事などが評価され話題となりました。

自分は普段は受託でWebを作っていて、直接ユーザーと関わる事も少ないため、今回のようにSNSでのビビットな反応もすごく新鮮でした。
スマートフォンアプリを始め、サービスを作っている会社はこのようなドキドキを毎日のように感じているのかと思うと羨ましくもあり、苦労の一端も感じられたという意味ですごく良い経験でした。

thum

2014年映画振り返り

2014年に劇場で鑑賞した新作映画はなんとか80本。
目標の100本には惜しくも届きませんでした。
以下ベスト10が絞りきれず12本です。

  • ほとりの朔子
  • ウルフオブウォールストリート
  • 新しき世界
  • LIFE!
  • LEGO(R)ムービー
  • アクトオブキリング
  • キャプテンアメリカウィンターソルジャー
  • her 世界でひとつの彼女
  • ガーディアンズオブギャラクシー
  • インターステラー
  • 6才のボクが大人になるまで
  • ゴーンガール

まとめると結構普通ですね。
どれも素晴らしくて甲乙つけるのは難しかったのでランキングにはしていませんが、唯一ベスト1として挙げたいのが「ガーディアンズオブギャラクシー」です。
音楽の使い方やキャラの立て方、話のテンポの良さ、画作りの新鮮さ、どれも自分のツボにハマっていて、この1年というよりはここ数年超えられないぐらいの傑作だったと思うぐらいでした。まあ、これもいろんな人がベストに挙げてるので普通っちゃあ普通ですね。

今年はアベンジャーズ、007、ミッションインポッシブル、スターウォーズ、ターミネーターと注目の続編も目白押しで楽しみ!
なのですが、、
さすがに80本以上を今年観るのはキツいのでほどほどにしようかと思います。
あとはサボっていたレビューもぼちぼち書いていけるペースにします。

【随時更新】Bootstrapに役立つ便利なリソースまとめ

bxSlider実装まとめ

jQueryスライドショーライブラリ「bxSlider」の実装方法や細かな注意点、カスタマイズの方法などをまとめます。

bxSliderのウリ

  • 軽量、シンプルで使いやすい
  • 画像だけで無く、HTML要素もまとめてスライド可能
  • タッチデバイスのスワイプによる切り替えに対応
  • レスポンシブ(幅100%に拡縮)対応
  • IE8より動作
  • 各種オプションが充実、カスタマイズしやすい

ダウンロード、設置

本家サイトにアクセスし”Download”ボタンからデータをダウンロード。
jQueryも必要になるので、HTMLには下記のように読み込みを記述。

必要なファイル(ディレクトリ js/bxslider は任意):

HTMLの指定

関数の呼び出し

この場合’slider’のクラスを付けた要素の子要素がスライドするアイテムとなります。
※bxSlider-setting.js等と別ファイルにまとめておくと良いです。

オプションについて

バグ等の対処

前後ボタンやページングをクリック後、自動切替が効かなくなる場合の対処

呼び出した関数をオブジェクトに格納し、startAutoコマンドを時間差で実行させる、という仕組みです。

1ページ内に複数設置する場合

縦スライド版(vertical)設定時にうまく動かない時の対処

jquery.bxslider.js内の下記の箇所をfalseにします。

IE9以降で動かない時の確認事項

jQueryのバージョンは1.8.2以上になっているかを確認します。 http://wind-mill.co.jp/iwashiblog/2014/05/bxslider-ie-notwork/

Sublime Textで一つのキーバインドに複数のコマンドを登録する方法

Sublime Textはデフォルトで一つのキーバインドに一つしかコマンドを登録できません。
複数登録できるようにするには別途プラグインを追加する必要がありますので、その方法と、キーバインドの設定をまとめます。

プラグインの設定

  • [Tools]>[New Plugin…]と選択
  • untitledのファイルが開かれるので、下記のコードをコピペ。
  • ファイルを未保存の状態で開いておく
  1. パッケージのフォルダをfinderで開く([Sublime Text]>[Preferences]>[Browse Packages…])
  2. 1.の 〜〜/Packages/直下に”Run Multiple Commands”という名前でフォルダを作る
  3. untitledのファイルを名前を付けて保存。↑の/Run Multiple Commands/内に”run_multiple_commands.py”という名前で保存する(run_multiple_commands.pycも同時に作られる)
  4. ↑のrun_multiple_commands.pyをSublime Textで開いた状態で、Package Controlを開く[cmd+shift+P]
  5. “Create Package File”を入力して選択
  6. “Run Multiple Commands”と入力して”Default”を選択してEnter
  7. デスクトップに”Run Multiple Commands.sublime-package”というファイルができるのでユーザーのパッケージフォルダ(/Users/【ユーザー名】/Library/Application Support/Sublime Text 3/Packages/User)に移動

最終的に

  • /Users/【ユーザー名】/Library/Application Support/Sublime Text 3/Packages/Run Multiple Commands/ にrun_multiple_commands.pyとrun_multiple_commands.pyc がある
  • /Users/【ユーザー名】/Library/Application Support/Sublime Text 3/Packages/User/ にRun Multiple Commands.sublime-package がある

状態になればOK。これでプラグインの設定が完了

キーバインドの設定

ここで複数キーバインドを設定するサンプルとして、複数のファイルを編集中にしている状態で「ファイルを全て保存」した後、「ファイルを全て閉じる」という二つのコマンドを実行する設定を作ってみます。

  1. [Sublime Text]>[Preferences]>[Key Bindings – User]を開く
  2. 下記サンプルのように記述する
  1. [alt] + [cmd]+ [shift] + [s] を押すと、
  2. “save_all”(ファイルを全て保存)した後、”close_all”(ファイルを全て閉じる)を実行する。
  3. commandを続けて書けば、同様にコマンドを実行できる。

参考

A Sublime Text 2 plugin to enable running multiple commands in any given context from a single key binding.