Live Spots Today (今晩のライブ)、リニューアルしました

エリア毎にライブハウスのスケジュールを日別に集約するサービス、Live Spots Today (今晩のライブ)をリニューアルしたです。内部的な改修(ていうか実質作り直し)も大きいんですが、まずはページ外観のビフォーアフターを。

このサービス、ローンチして3年以上は経っていると思いますが、かねがね以下のような問題点を感じていました。

• 本来は外出先でモバイル端末から使ってこそ便利なサービスな筈なのに、本気でモバイル対応してないし。
• スケジュールページのスクレイピング処理のライブラリ整備がいまいちで、ライブハウス追加の作業が捗らない。
• ページのレイアウトに余白部分が多く、結果として全ての情報を見るのに何度もスクロールを強いられる縦長構造になってる。デザインもスカスカしててなんかダサい、ていうか飽きてきた…

ということで、上記を受けての今回のリニューアル内容はこんな感じ。

• スクレイパーを Web::Scraper を使った Perl スクリプトから、phpquery を使った PHP で作り直し。多分私が Web::Scraper を使いこなせてないだけだと思うのですが、SAX 的にハンドラを組み込んで処理を行う前者より、jQuery 感覚で DOM を縦横にトラバーシングできる phpquery のほうがコードが直観的で、共通処理の集約もしやすかったです。Web サイトが PHP 製なので、そっちとの親和性の良さもありますし。
• Web のほうも CakePHP から Silex + Twig + phpActiverecord で書き直し。私の Cake 離れが本格化してきますた…
• UI は Twitter Bootstrap をベースに、Pinterest ふうタイリングは jQuery Masonry なぞで。Bootstrap のレスポンシブ性のおかげで、それほど苦労しなくてもスマホ対応できました(最適化にはまだほど遠いですが)。

そんなこんなで、これでやっとライブハウス登録も楽になった(当社比)ので時間を見ながら、まずは自分の生活圏内である吉祥寺〜新宿間で登録を増やして行きたいと思ってます。本当の戦いはこれからだ… ww

デフォルトから気分一新！ な Redmine のテーマ7選

プロジェクト管理および構成管理で Redmine の出番が増えてきました。しがないフリーの立場での仕事なので Redmine サイトもお客さん毎に複数立ち上げたりしてます。んで、ブラウザのタブで切り替えながら並行作業してるとどっちの Redmine サイトだったか混乱するので、ぱっと見で分かるようにテーマを変えてみようかと思いましてね。標準でバンドルされてるテーマは何だか似たり寄ったりなので、 http://www.redmine.org/projects/redmine/wiki/Theme_List あたりでテーマを見繕ってたらなかなかイイ感じのがあったので、デフォルトの青いテーマと区別しやすいのを選んでみました。ご参考までにどうぞ↓

1. A1

http://redminecrm.com/pages/a1-theme

クールな印象ですね。Ronin という請求・見積書サービスのルック&フィールを真似たとのことです。

2. Axiom

https://github.com/hulihanapplications/axiom

これはまたギークなデザイン。まぢめなお客さんには向かないかなぁw

3. Basecamp

http://www.redmine.org/projects/redmine/wiki/ThemeBasecamp

かの有名な 37 Signals のプロジェクト管理サービス Basecamp のデザインですね。

4. CM-RED

https://github.com/ChrisMcKee/redmine-themes/

デフォルトテーマをカスタマイズした、プロダクトの名前どおりの赤！なテーマです。なんだかんだ言っても、カラースキームを変えるのがいちばん区別しやすかったりしてw

5. Modula Gitlab

https://github.com/doublerebel/modula-gitlab

Gitlab っていう、Rails 製の Git 管理アプリケーションのテーマらしいですね。Bootstrap っぽいいま風のデザインです。

6. Modula Martini

http://www.modula.fi/2008/redmine-theme/

こちらもモノクロームを基調にした、ミニマルで飽きのこないデザインです。

7. gitmike theme

https://github.com/makotokw/redmine-theme-gitmike

最後は日本人の makoto_kw さんによる、Github テイストなテーマ。前述の A1 をベースにしたとのこと。

…という訳で、今回は最後の gitmike theme を採用！(気分次第で何時でも変えられるよう、全部インストールはしましたがねw)。

YouTube 動画に TAB 譜をつけてギターが練習できる SoundSlice を使ってみた

先般、百式さんで紹介されていた SoundSlice という、YouTube 動画に TAB 譜をつけてみんなでシェアするサービスを使ってみました。というのも最近、プライベートで知人と似たような方向のサービスを企んでたりしたもんで、競合サービスの調査という訳です。正直、SoundSlice のあまりの出来の良さにモチベーションを全部持っていかれた気分です。しおしおのぱー…

では気を取り直して、動画に TAB を付けるまでの手順を駆け足で紹介しましょー。TAB を作る側になるにはユーザ登録が必要となりますので、まず SoundSlice サイトの右上にある「Sign up」をクリックしてユーザ登録を済ませます。メールアドレス・ユーザ名・ログインパスワードの入力だけで OK です。

次に、TAB をつけたい YouTube 動画を選択します。ページ上部の「Search for keywords or URL」とある検索窓から曲名やアーティスト名等のキーワードや動画 URL を入力して動画検索できるのですが、ここではこないだ投稿した自分のアコギ動画の URL をそのまま入力してみます。するとこんな感じの制作ページが(↓)。

DTM 経験者はだいたいこの画面でどういう作業をすればいいか予想できるのではないでしょうか。そう、多くの DTM ソフト(今じゃ DAW か…)と同様にまずトラックを作ります。トラックには文字列を入れるだけの「ベーシックトラック」と TAB 用の「ギター TAB トラック」の2種類があるので、必要に応じてページ左下の「+ ADD TRACK」というボタンをクリックしてトラックを追加作成します。ちなみにギター TAB トラックは、通常の6弦ギター以外にも4・５・7弦のそれも用意されているので、ベースやウクレレ・バンジョー等も作成可能かと。

今回はベーシックトラックで曲の構成パートと小節番号、それからコード名用のトラックを一つずつ、そしてギター TAB のトラックと、計3つのトラックを用意しました(↓)。

あとはトラックを選択して入力していくだけです。ベーシックトラックへのテキストの入力も、ギター TAB トラックへの TAB 数字の入力も、手順は基本的に同じです。トラックのタイムライン上で、デュレーション(入力対象となる長さ)をマウスで選択すると、そこに入力を促すプロンプトが表示されるので、そこにキーインします。トラックを作成した時に表示される解説ムービー(↓)の Method2 を観れば分かるハズ。

入力したタブ数字のコピー・移動・削除・デュレーション調整等はヘルプページに逐一、動画付で載っていますのでご一読を。特に、選択部分を Alt + 数字(Mac の場合は Option + 数字)で等分割する機能は非常に有用です。最初はひとつひとつ入力していたのですが、それだと手間がかかってしょうが無いことに気づきました。まず4小節ぶんの長さを選択して作った長いボックスを4等分して小節を生成 → 小節内で全音符の長さの音符を作成してから4等分して4分音符化し、弦や数字を変更、というやり方にすると、だいぶストレスが軽減できて仕上がりもキレイになりますよ。そんなこんなで、出来た TAB 譜がこれ(↓)です。

実際に動くやつは http://www.soundslice.com/yt/J5qpc0SJ2AU/ でご覧下さい。

これを作るのにだいたい5〜6時間くらいは費やしました。感想としては正直、以下のように↓

• 複数の TAB 音符の選択機能が弱い(Shift キーを押しながらひとつずつクリックして選択)。タイムラインで指定した幅内にあるものを一気に選択できたらいいのに。
• クリップボードを使ったコピペ機能はやっぱり欲しい。
• トラックは一度作ったら上下に移動できないの?
• ハンマリング・ポルタメント・ベンドの表現がない(まー動画観りゃわかるんだろうけどw)
• 音符のクオンタイズが出来たらキレイに仕上がるんだが…

と機能的に不足している部分もあるかな? と思わなくもないですが、なにせローンチが昨年11月ですからね。現在も猛烈な勢いで開発を続行しているようなので、じきに解決されるのかもしれません。

さてさて、このサービスに対抗するには生半可じゃ勝てないなぁ。困った…

Silex + Twig : テンプレート中で PHP のスーパーグローバルにアクセス

Twig ネタふたたび。テンプレート中で PHP のスーパーグローバル($_GET とか $_SERVER とかのアレ)を表示したいケースがあって、ルーティングプロシジャ毎の render でいちいちセットするのもちょっと切ないので、もうちょっと簡素な処理で何とかならないか調べてみました。結果、Twig_Extension_Staging::addGlobal() ってのを使ってグローバル変数を追加すればいいみたい。

Silex で TwigServiceProvider を登録した後で、before コールバック中でこんなふうに(↓)。

$app->before(function () use ($app) {
	$app['twig']->addGlobal('_get', $_GET);
});

テンプレート中では、当該変数が存在しない時の為に default フィルタをカマして(↓)。

<input type="text" name="hoge" value="{{ _get.hoge|default('') }}"/>

その都度 default フィルタ書くのがめんどかったら $_GET を、存在しないプロパティならヌルストリングを返す __get() をインプリメントしたオブジェクトでラップするとかすればいいかも。

グローバル変数に逃げるってあたりが作法的にアレかなぁと不安ですが、もしバッドノウハウだったら誰か突っ込んで下さい。

Twig と PHP マジックメソッドでのプロパティ

PHP ネタ。マジックメソッドで実装したプロパティが、Twig のテンプレート中ででうまく表示されなかった。Google 先生に尋ねたら、ちゃんと __isset の方でも true を返すようにしなさい、とのこと。

class Hoge
{
	public function __get($name)
	{
		if ( $name == 'onamae' ) {
			return '保下田 ホゲ太郎';
		}
	}

	/* これ↓がないとアキまへんで!!*/
	public function __isset($name)
	{
		if ( $name == 'onamae' ) {
			return true;
		}
	}
};

以上、少しハマったのでメモメモと。

「アマゾンチラシ」がアソシエイト審査で拒否られました

明けましておめでとうございます。はてなダイアリーから引っ越してきました。今年もよろしくです。

さて、年末にドタバタリリースした「アマゾンチラシ」ってサービスですが、一応アフィリエイトの体裁を取っているのでアマゾンにその旨を申請してたところ、審査基準に合致しなかった旨の返答を頂きました。どうもタイトルに「アマゾン」と入れたり、ロゴを拝借してページヘッダに堂々と貼り付けてたのがイカンかったらしいですね。確かに作りながら「こりゃマズいかもなー」とは思っていたんですが… 運営規約にもちゃんと載ってますし、基本的な事項の確認を怠っていて恥ずかしい限りです。他にもサイトの FQDN である amachira.mariyudu.net にも物言いがついたんですが、これはどうなんでしょう? 「ama」ってのがそんなにダメかなぁ?

とまれ、指摘の点を修正して、サイト名も「チラシ 0.2」と改名・URL 変更して再出発!! という訳で再度申請したらなんと、これも拒否られちゃいまして。商品紹介で価格を明示しているのがダメなんだそうです(アマゾンでの価格変動の際に食い違いが出るので)。うーん、それを言われちゃこのサービスのキモが成り立たないなぁ。運営規約にも価格載せるなってのは無いみたいだけど。と、ここで異議をとなえても勝ち目は無いので、スゴスゴと引き下がることにします。今のところ反響は皆無といって良い状態なので惜しくもないですが、せっかく作ったし半月たたずに閉鎖も切なすぎるので、商品リンクをアフィリエイトではなく通常のリンクにして、暫く存続させてみることにします。

以上、こいつぁー春から幸先悪いやの巻でした。アマゾンアフィリエイトを始める方のバッドノウハウになりますように。

※「チラシ 0.2」は、2014-11-12 に閉鎖しました。