Closure Compiler Service API を使って JS コード圧縮コマンドをサクッと作る

某ブロジェクト＠おしごとで比較的まとまった量の JavaScript コードを書いたんですが、これってモバイルからの利用も想定してるし圧縮・最適化をかけた方がヨイよなー、ということでその方面のツール等を物色してみました。Web I/F 上で利用できる圧縮サービスは今まで多数見かけてきましたが、サービス保守サイクルでの効率を考えるとサーバ上で CLI で使えるのが欲しい。

で、これ最強ですね。Google の closure-compiler。Java で実装されているので jar を使ってのコマンドづくりも勿論できるんですが、サービス化されてて API が用意されているのが嬉しいです。当方某プロジェクトでは Java は使っておらず、この為だけに構成サーバそれぞれで Java 環境をインスコするのもアレなので、この API を使って圧縮用 PHP スクリプトをちゃちゃっと書いてみますた。こんな感じ。

<?php
define('USAGE', 'jsmin.php <JSファイル>');
define('API_URL', 'http://closure-compiler.appspot.com/compile');

if (! ($jsFile=@$argv[1]) || ! file_exists($jsFile)) {
	die(USAGE . "\n");
}

$param = array(
	'js_code' => '',
	'compilation_level' => 'SIMPLE_OPTIMIZATIONS',
	'output_format' => 'text',
	'output_info' => 'compiled_code',
);
$param['js_code'] = file_get_contents($jsFile);
$options = array(
	'http' => array(
		'method' => 'POST',
		'header' => "Content-type: application/x-www-form-urlencoded\r\n",
		'content' => http_build_query($param),
	)
);
$result = file_get_contents(API_URL, false, stream_context_create($options));
echo $result;

使う時は

php このスクリプト.php foo.js > foo.min.js

みたいな感じで。ちなみに、今回書いた JS コードは35%サイズに圧縮されました。いいね！

上記例では変換対象 JS コードに文法誤り等無いことを前提にしてますので、エラー処理やコンパイルレベルの指定等、ちゃんとしたコマンドっぽくされたい場合はここなどを参考に、適宜いぢってみて下さい。

「ウィスパー☆エンジェル ささやきさん」で、初めてボカロ(のようなもの)をやってみた

昔々、ある所に Mariyudu というプログラマがおりました。どうしても「でーてーえむ」というものがやりたくなって、なけなしの貯金をはたいて Mac を買ったのはもう四半世紀も前のことで御座います… という訳で、昔の情熱は何処へやら、最近はアコギやウクレレばかりの音楽生活どっぷりでアナログ老人に回帰しつつある Mariyudu@ロートルプログラマです。

「ウィスパー☆エンジェル ささやきさん」とは

もうすっかりクールジャパンを代表する勢いのボーカロイドですが、永らく制作環境が Windows 中心だった為、マカーにはいまいち敷居の高いものでした。そんな中、Mac音家(まくねや)という Mac Fan 誌記事と連動したボーカル素材音声制作プロジェクトの成果により、Mac でもボカロ制作の道が。今では初音ミクも V3 で Mac 版がリリースされてそんな不自由もなくなりつつありますけどね… さて今日は、そんなMac音家のボカロ音声「ウィスパー☆エンジェル ささやきさん」を使っての「ボカロのようなもの」を試してみた件、です。

日本の心、古賀政男の名曲を歌わせてみる

自分がお題にしたのは、「ささやきさん、『影を慕いて』っていうちょっと古い曲があるんだけど、俺がギター弾くからさぁ、ひとつ唄ってみてくれたりしない?」とゆーものです。

Studio One が便利すぐる

Mac音家さんの一連のボカロ素材はここにもあるように、Apple 謹製の DTM アプリ GarageBand 上での利用がモデルケースになっていますが、他のアプリ上での制作も可能でむしろそちらの方が効率が良い場合もあります。自分も、このページでの説明に倣って、Studio One 2 の無料版を使ってチャレンジしてみました。これを使うと、イベント(音源による一音)のエンベロープ(音量の変化)が自在にコントロールできるので、こんなふうに先頭の摩擦音や破裂音が耳障りなイベントのアタックをいじって聴きやすくしたり(↓)

イベント同士の繋ぎ目をクロスフェードっぽく滑らかにしたり(↓)

なんてことがやり易いのです。

オトナの事情で、ギター録音はガレバンで…

さて、ボーカルトラックを先に作ったので早速それに合わせてギターの録音、と行きたかった訳ですが、手持ちのオーディオ入力デバイスを何故か Studio One が認識してくれなかったので、ボーカルをサウンドファイルに書き出して、それをガレバンに取り込んでギター録音しました(↓)。

ちなみに、Studio One で使えなかったという(何でだろ?)デバイスはこれ。オーディオテクニカの USB I/F AT-9990 とステレオマイクの AT-9900 です。

で、出来たのがコレ、とw (↓)

影を慕いて (feat. ウィスパー☆エンジェルささやきさん) - YouTube

以上、バーゲンでポチッった「ささやきさん」を、ミク Mac 版が出ようと何だろうと意地でも使ってやる!! の巻でした。そろそろミク V3 買おうかな…

IE11 の HTML5 ドラッグ&ドロップでハマった件

最近じゃウェブアプリでファイルアップロード機能なぞを実装する時は「それドラッグ&ドロップで」と当たり前のように言われてしまう訳ですが、みなさま如何お過ごしでしょうか。「連休なにそれ美味しいの?」とイタイケな Mariyudu@今日も元気でお仕事ヒャッハーです。

いやね、さっきまでその件でハマッてたんですわ。HTML5 ドラッグ&ドロップは別に初めて書く処理じゃないんだけど、IE (Win7 + IE11)だけでうまく行かないのですな。

こんな感じで画像ファイルをドロップゾーンにドラッグ&ドロップしてみると↓

無慈悲にブラウザが画像をオープンしちゃうという↓

で、コードを少しずつ削りながらネットで流通してるちゃんと動くD&Dのサンプルコードに近づけていく形で切り分けしていったら、ドロップゾーンの div のスタイルが原因でした。IE だとブロック要素にちゃんと

width: 100%; /* デフォでもいちおう指定 */

みたいに width 属性値を明示してやらないと、こんな症状が出るみたいです。あぁ、サクッと終わらして三国志のムック本読もうと思ってたのにぃ…

「タスクリストをガントチャートに一発変換！」な Quick Gantt、作りました

雪、凄いっすねー。ども、Mariyudu＠野良プログラマです。確定申告未だやってません。全部雪のせいです。

零細フリーランスなどやっておると、複数取引先の掛け持ち状態ってのがフツーにある訳でして、例えばA社作業を月〜水曜日に、B社作業は木〜金にアサイン、みたいな感じで振り分けてたりします。そんな状況下だと、見積依頼が来たときに案件工数をスケジュールに落とすのが結構めんどいのですな。期間中に連休等を挟んでいると尚更です。ちょっとした日数計算処理をすりゃいいだけなので、スプレッドシートとかで自分用のスクリプトでも作ろうか… でも面倒くさい… と長らくウダウダしてたのですが、jQuery.Gantt という JavaScript 製のガントチャート作図ライブラリがカッコイイのに感動したので、これをモチベーションにひとつウェブサービスとして作ってみました。題して Quick Gantt です。

使い方はカンタン。まず、Excel みたいなグリッドにタスク名と所要日数を書き入れて(↓)、

作業開始日と、作業する曜日とかも設定します(↓)

あとはタブ「線表」をクリックすると工程表のできあがり！

データ入力用のグリッドには PQ Grid を、タイトルのフォントは Google Fonts から Faster One を、ページのカラースキームは :iroiro に決めてもらいましたw ほか、Twitter Bootstrap や jQuery を始めとしたプロダクトや数多のコードスニペットのお世話になりっぱなしです。

ざっくりと作ったばかりなので細かいところはまだまだですが、願わくば誰かのお役に立ちつつ、フィードバックでも頂ければーと。

apns-php で APNS のフィードバックを受け取る

以前書いた「apns-php のログ出力をオフにする」の続編というか姉妹編というか。

iOS デバイスへのプッシュ通知サービスを構築していると、「削除(アンインストール)されちゃれったアプリへの通知ってどうなるの?」という問題に突き当たります。で、調べてみると「プッシュ通知先デバイスに当該アプリがインストールされていない状態の場合は、通信エラーが記録されてフィードバックサービスでエラー情報を取得可能となる」とのこと。じゃぁ、そのフィードバックってどうやったら取得できるのか、ですが、これは apns-php に同梱されている ApnsPHP_Feedback クラスを使うとチョー簡単。結構重宝する機能ですが、意外に日本語情報が出回ってないようなのでコードサンプルを。

使い方は至ってシンプル。こんな感じです。

$fb = new ApnsPHP_Feedback(
	ApnsPHP_Abstract::ENVIRONMENT_PRODUCTION,
	<証明書ファイルのパス>
);
$fb->setRootCertificationAuthority(<ルート証明書ファイルのパス>);
$fb->connect();
$results = $fb->receive();
forech ( $results as $result ) {
	// $result['deviceToken'] がエラーが発生したデバイストークンなので、
	// 必要に応じてこの端末についての処理(登録ユーザから抹消する等)を行う
}

うーむ、面倒くさい APNS とのやりとりをこんなにカンタンにしてくれる apns-php にもう一度大きな拍手を!!

TinyMCE エディタ上で画像をアップロードしながら貼り付けられる jbimages プラグインを使ってみた

HTML 等の知識が無くても Web ページ上でコンテンツを作成・編集できる、JavaScript 製の WysiWyg エディタって便利なものがあります。TinyMCE あたりがデファクトスタンダードかと思いますが、最近これを使って画像をサーバにアップロードしながら貼り付けたいっていう要望がありまして、「でも大変だよ、ぶつぶつ」等と二の足を踏んでいたら奨められたのがこれ、JustBoil.me TinyMCE Images Plugin、略して jbimages。

なんだか便利そうですが、どうも提供元サイトにライブデモの類が見当たらないのでちょこちょこっと試してみたです。こんな感じ↓

▼ツールバーの最後に画像アップロードボタンが追加されてます

▼ボタンをクリックするとアップロード用のモーダルダイアログが

▼ダイアログから画像をアップロードするだけで貼り付け完了

▼WysiWyg エディタなのでリサイズもらくらく

うむ。いー感じです。画像アップロードは HTML5 とかじゃなくて iframe でフォームを埋め込んで実現してるので、モダンブラウザじゃなくても広く使えそう。

セットアップ手順は提供元サイトにも明記されてますが、念の為邦訳を。

1. ここからダウンロード・解凍して出来た jbimages を、TinyMCE エディタのプラグイン格納場所( tinymce/js/tinymce/plugins/ あたりがデフォ)にコピー。
2. jbimages/config.php 中の画像格納場所を適宜、自分の環境に合わせて書き換える。尚、この格納場所は httpd が書き込みできるようにパーミッションの設定をお忘れなく。
3. Javascript コード中の TinyMCE 設定で jbimages プラグインを明記(これも提供元サイトにサンプルコード有)。

サーバ側のアップロード処理は、どうやら CodeIgniter アプリケーションとして実装されている模様。なので、カスタマイズもし易い…かもしれませんw

さて、これを当方のシステムに採用できるかというと、ウチのコは画像をサーバのローカルディスクに保存するだけという単純なものじゃないので、うーん、ちょっと、というか大量に手を入れることになりそうだなぁ…

DB 問い合わせ結果の配列を、主キーを配列子にしたものに組み替える for ぺちぱー

いや、ホントにもうタイトルのまんまですが。

$records = array_combine(
	array_map(function($record){
		return $record['id'];
	}, $records),
	$records
);

昔からのクセで foreach で回す関数とか書いてたけど、考えてみたら最近の PHP はクロージャ書けるのでワンライナーで出来るもんね。