armtee acliiのために、昔懐かしのResigテンプレートを改造して内部モジュールとして使っていたのだが、行マクロを追加したりしていたら面白くなってきたので独立させた。 大体できてきたのでここまでの雑感。来週末あたりにはnpmに上げるかも知れない。 テンプレートエンジン考えるの楽しい 小難しい理屈を全部ぶっとばして、行単位で刻んでJSを素通しして残りの箇所のタグをテンプレートリテラルに変換してるだけなんだけど、思ったより利便性が高くなりそうで楽しい。 週末のみの稼働なので、当初考えた機能を一通り実装するまでに一ヶ月くらいかかってしまった。 デモサイト作るのも楽しい デモサイトも作った。こっちのほうが時間がかかる。というか凝り始めるとキリがないのでやめられない止まらない。 デモ用のコードの表示にWebで動くエディタも組み込んだ。この選択も結構難航した。 最初はace、次にcodemirrorを使っていたけど、どっちも辛みが辛くて結局monaco editorになった。バンドルサイズが大変なことになったが、機能的には大変満足だ。小さい画面に押し込めるために機能を削る方に忙しい。バンドルサイズを削減する方法を探したい。 シングルページでコンテンツも動的に読み込んでいるが、ページ遷移はしないのでSPAではないはず。こういう１ページに大量にコンテンツ詰め込むドキュメント系のサイトが最近は多い気がするが、なにか呼び方とかあるんだろうか。 あえてフレームワークは使わずにVanillaJSと生CSSでガリガリ書いた。色々進化しているのを感じた。 JavaScriptのeval系のエラー表示の酷さ アイツラは、なんでまともにエラー箇所の情報を返さないのだろう。どうやっても無理っぽかった。npmに挙がってるいくつかのJSパーサーを使うことも考えたが、各ブラウザで安定して動かせるまで枯れてるものはなさそうだった。 結局、ものすごい強引な方法で大体のエラー行を表示させるようにしてる。 Vite超便利 メインのモジュールはTypeScriptで、デモサイトはVanillaJS。モジュールのビルドもデモサイトのJSのバンドルも全部Viteがやってくれる。ありがたやありがたや。

昨年くらいに、流石に放置したままのMTがまずいなと思って（セキュリティ的にもVPSのマネー的にも）いったんコンテンツだけ確保してVPSを解約した。 このままで消え去れば良いかとも思ってたが、ふと思い直してコンテンツだけでもGitHub Pagesにでもあげておくかと静的サイトジェネレータで適当にビルドしてアップした。Hugoというのが良いらしのでそれで。コンバートにはDQNEOさんのこれをお借りして、少し手直しして適用した。 ざーっとコード見て、blog_idを確認しないととか改行の扱いも追加しなきゃとか動かす前から気づく程度にはMTのこと覚えてた自分にちょっと感心した。 staticのファイルはどうしたものかなあ。まあ、殆ど使ってなかったはずだからうっちゃっていいかなと。 ローカルにはMySQLもまともなPerlも入ってないので、MTのデータ取ってくるためにコンテナでMySQL立てて、ダンプ流し込んで、書き出し作業もコンテナのPerlから行って、GitHub Pagesが全然知らない人になってて驚いたり、半日くらいでの作業でとりあえず見れるようになった。使ってるドメイン管理の会社のUIがひどくて、DNSの切り替えが一番大変だった。 この構造なら、今作ってるacliiとも相性が良いので、そっちとも繋げてみた。 個人作業用のスクリプトをiiというコマンドでまとめて使っているので、ターミナルからならどこからでもii blogで記事のテンプレートをvimで開いて、draftフラグを消して保存すれば勝手にgithubにpushして、あとはGitHub Actionsがパブリッシュまでしてくれるようにした。試してないけどちゃんと動くはず。1 これで快適に書けるようなら、またほそぼそと遊ぼうかな。 (追記：一発では動きませんでした。git コマンド叩くならcdしないと駄目でした。ひーん。） ↩︎

Hello?

以前ちょっと話題になったこちらの記事 PHPとしても実行できるRubyの書きかた - Qiita が完全にネタとして消化されていたのですが、自分は普通に普段使いしてます。perlのDataSectionを使って双方をコメントなどに見せているだけなので趣旨はちょっと違いますが、ひとつのファイルでウェブサーバー立てて、かつJavascriptのシンタックスハイライトを使ってコードを書けるので、ちょっとしたJavascriptの動作確認に便利です。...

とても濃い三日間でした。 今回、チケットをPeatixで扱わせていただいたので、キックオフパーティーでは受付のサポートをしたりしつつ、2日目からは個人的に参加もして来ました。キックオフパーティー and 受付 この規模のイベントでは初使用となるColorSync。一部の端末で動かないなどのトラブルもありましたが、概ねスムーズに入場していただけたと思います。受付よりも手前からチケット画面を表示されていた方の場合、「チケットを確認してないのでは」と思わるかも、と不安になるレベルのスムーズさでした。 ハッカソン 二日間、素敵な会場でもくもくとコード書いてました。やりたいことは大体決まっていたので、特にチームに参加などはしなかったのですが、周りの人と適度に情報交換や雑談などしつつ、いい感じで開発できました。屋上の隠れ家感も素敵でした。 作ったもの QYARTSというwebサービスを作りました。説明が難しいのですが、メインにステップシーケンサーがあって楽曲を作成でき、チャットルーム的な感じでユーザーが参加すると、そのユーザーの端末から一部の音を、ちゃんと同期した状態で再生できる、というサービスです。シーケンサーのオーナーは、任意の音符の出力先を、自分のマシンorオーディエンスの誰かorオーディエンス全員から、などと割り振ることができる様になってます。アーティストが演奏している音の一部が客席のあちこちから鳴り出したらとても楽しいのではないかという、わりと単純な発想です。 WebAudioが使えるようになって、ネイティブアプリ不要でモバイルブラウザだけでこういった音の出るアプリが作れるようになって、とても楽しみが広がったように思います。 デバイスの会場内での位置を測定してパンできたらとか、ジャイロや加速度センサーでオーディエンスがその場でエフェクトを操作できるようにしたいとか、夢は広がりングだったのですが、いかんせん時間が足りず、かろうじてデモを動作させるのが精一杯でした。無念。 ステップシーケンサー部分の作成にかなり手間取ってしまい、音作りも何も出来ず、MIDIノートナンバー的なものを手入力するような仮UIのまま、デモ用の曲の仕込みをしているような有り様でした。そしてコレがさらなる悲劇を生むことに。。。 さすがにUIが酷くてまだコードもサイトも公開してません。できたらそのうち。 デモで盛大に音感のなさを露呈した 会場はかなりネットワークが混雑していて、ちゃんと同期が取れるかかなり不安だったのですが、その点では上手くいったと思います。ただ、デモ用に仕込んでおいた曲で、ベースとパッドの調がずれていたという大変恥ずかしいミスをやってしまい、顔から火が出るかと思いました。なぜ事前に気づかなかった。。。超テンパッて、同じ言い訳を二回言ってますね。 デモの様子はこちらで見れます。 http://www.ustream.tv/recorded/44140498/highlight/470673 恥ずかしいのでembedしません。 他の参加者の方の作品で気になったもの Tokyo Tune Train // Music Hack Day Tokyo 2014 // Hacker League 音の聴かせ方が上手いなーと。 Singalong World // Music Hack Day Tokyo 2014 // Hacker League 初日の遅い時間にJSベースからiOSにピボットしているところを見ていたので、ここまで完成させたとはすごいです。アイデアも秀逸で素晴らしいです。 Synthesizer Server // Music Hack Day Tokyo 2014 // Hacker League 自分とは逆の発想。出音がかっこよかったです。 VoiceRemix! // Music Hack Day Tokyo 2014 // Hacker League 声をチョップするの大好きです。これは自分でもやりたい。WebRTC使ってその場で声を入力できるようにするとか、シンコペーション入れるとか。アイデアが広がります。 "Yeah, I only like their earlier stuff" // Music Hack Day Tokyo 2014 // Hacker League...

追記(20140124): paizaさんから景品のロックスター30本頂きました！ありがとうございました！ 最近話題のpaiza主催のコーディングコンテストにチャレンジした。 キャンペーンの設定では、野田さんはコードの書ける社長令嬢とのことで、つまり社長の名前も野田さんなのであり、色々な意味で悶々としてしまいますね。 以降、ネタバレ含む真面目なアルゴリズムの話になりますので、自力でチャレンジしたい方はご注意ください。 ソートして尺取り虫 事前に全組み合わせをキャッシュしようとしてタイムアウトになる、などのお約束をこなしつつ、最初に考えたのが、商品の値段をソートしてしまい、上と下から範囲を狭めていって組み合わせをチェックしていく方法。最初のスタート地点を探すときに二分探索するのも含めて、やり方としてはhttp://sucrose.hatenablog.com/entry/2013/12/05/000146と同じですね。こんなに綺麗に書けませんでしたが。 これに加え、チョット経ってから、和が目標値と一致したら探索終了していいことに気づいて直した時点で、0.01/0.01/0.28というタイムが出た。 ソートが相当遅いのでソート相当の別のことをする この時点でNYTProfでボトルネックを探してみると、適当に作った100,000件の商品データで、入出力5割、ソート4割、探索1割、という塩梅。ソートを何とかしないとコレ以上タイムが伸びないと思い、色々調べて、目についたのがdankogaiさんのバケットソートの記事。ただし、コレそのままではかえって遅くなってしまう。 作成したヒストグラムの分布範囲が広すぎて、全走査すると時間がかかりすぎるのだ。そこで考えをすすめて辿り着いたのが、ヒストグラムの作成だけして、値の探索は直接ヒストグラム内を走査する、という手法。 実は元の問題設定の特徴として、商品点数に比べてキャンペーン日数が極端に少ないというのがある。また、商品の価格の上限に比べて商品点数がかなり多い。商品点数がかなり盛られていると思われるcase3では、かなり密度の濃いヒストグラムが出来ると予想されるので、走査の能率はそれほど悪くならないはず。更に、実際には走査されない部分=探索に使用されない価格がかなりあることも想像できるので、それらを無視できるというのもメリットになる。 工夫としては、低い数字側から必要になった部分だけ配列に入れ(バケットソートの出力を逐次行う感じ)再利用時の高速化を図っている。 また、ヒストグラムの走査についても、その時点で見つかっている最も優秀な値を更に上書きする可能性のある範囲だけに絞り込める。極端な話、すでに目標値-1の組み合わせが見つかっている場合、配列を一回参照すれば次に進むことができる。 などなどを行い、最終的にクリナップしたコードが以下のもの。このコードのタイムは0.02/0.01/0.18。 なお、このやり方は商品価格の分布が一様だという仮定に依存していて、商品価格に偏りがあった場合に効率が著しく落ちる可能性がある。チロルチョコ専門店でキャンペーン価格は1,000,000円とか言われると目も当てられない。が、とりあえず用意されているテストケースに対してはうまく行ったようなので良しとする。 case1のタイムが落ちてしまったのは、単に商品点数が少なく、走査範囲が広いため。コレをカバーしたいなら商品点数が少ない場合だけ分岐してソートして尺取り虫すればよい。 クリナップ前のコードのほうが速くて悔しい 上ではかっこよく説明しているが、きれいな実装に辿り着くまで、変なマジックナンバー使ってみたりと、かなり試行錯誤した。その途中で自己最速タイム0.01/0.01/0.15という記録が出ている。昨日の時点(12月6日)では、perlおよびLL(PHP,ruby,python)でのレコードにもなってる。まだコードがグチャグチャで、自分で見なおしても何をやっているのかわからない部分も多く、なぜ速いのか謎のままである。 あ、あとこういうのはハッカソンとは言わないと思います。...

やりたいことの半分も出来てないけど、連休終わってしまうので出来たところまでDemo。Webサーバーのアクセスログをリアルタイムで監視して、リアルタイムで音にして聴いてみよう、しかも音楽的な感じで、という試みです。 https://github.com/aklaswad/statechno ビデオにキャプションつけるやりかた分からなかったので、何をやっているかわかりづらいかもしれませんが、以下のような流れのデモです。 起動するよ 音が出るよ アクセスが増えると盛り上がるよ エラーも拾うよ アタックされると多分こんな感じだよ upstreamが死ぬと多分こんな感じだよ 監視サーバーごと死ぬと多分こんな感じだよ Pdのパッチだよ アクセスが減ると寂しいよ 基本的にtechno_nekoさんと話してた流れで「perlで音楽で遊びたい」->「だがperlでオーディオそのものをいじるのはしんどい」->「オーディオ部分はOSC経由でPdにまかせてしまったほうが良い。最近Pdが熱い。」->「だったらperl側はperlが得意な領域で頑張ると面白いのでは」ということで、アクセスログをOSC経由でストリームして、なんかアクセスガンガン増えてるとツマミ右に回していくような感じでどうかな、ということで作ってみました。 構成としてはPerlスクリプトがログファイルというか標準入力をリアルタイムで監視して、1step(120msくらい)ごとにまとめてOSCで送信、Pdで受け取ってシンセサイズする、という流れになってます。以下、本当にただの雑感 ガチで1step(16分音符)毎にハートビートを送って、再生側ではそれを受け取る端からシンセサイズしているだけなので、不安定になるかなと思ったけどローカルのMBAで結構余裕で捌けてたので、ありなのかもしれない。AnyEventのtimerが結構ちゃんとしてて感心した。 OSCはただのUDPで基本的に一方通行なので、現在の構成だと監視サーバー=音の出る場所を一箇所に決めてそこにサーバー側から繋ぎに行く形になるので実用性がない。ただ、Proxy的なものを挟めばなんとかなるとは思ってる。 WebSocket+WebAudioで作れば気軽に誰でも使えるようになって、それはそれで面白かったかもしれないが、今回はあえてしなかった。だってPerlで書きたかったの。(とはいえキモとなる部分はPdのパッチ側にあるのだが) Pdは10年ぶりくらいに触ったけどオブジェクトが全然増えてなくてワロタ。でもパッチ書くの楽しくてよかった。 正味三日でここまで来たが、実は今日は殆ど何も進んでいない。基本的な部分は昨日までで出来ていて、今日はサーバーの状態を音楽的に表現する試み(例えばレスポンスタイムをそのままショートディレイに突っ込んだり)を幾つか試したが、殆ど失敗した。やっぱり機械に音楽やらせるのって難しいです。...

今年もYAPC::Asia参加してきました。 チケット このブログで書いてなかった気もしますが、ただ今PeaTiXで働いています。受付が上手くいっているかなどドキドキしてました。 名刺カードに「チケットの文句は俺に言え！」と小さく書いて、「優しく」と書き足し、更に名刺で隠していたチキンがこちらになります。 前夜祭 前夜祭に参加するのは初めて。さらに、飛び入りでLTして来ました。PeaTiXのアプリ絡みで前日の朝までに起こった出来事を、アップデートのお願いも兼ねてお話ししようと思ったのが前の日の夕方。当日に急いでスライド作って練習して行ったのですが、去年のLTソンの雰囲気と全然違って、飛び入り出来るか超ギリギリな感じで焦りました。 そして、改めて自分はあがり症だなあと。あんまり記憶がありません。練習の時に平均5分10秒とかだったのに、雰囲気的にも巻き巻きな感じなので、超早口になってしまいました。 なんですかねー。本当に慣れないです。この後まじで胃が痛くなって、今もまだ痛いです＞＜。でも、他の人と話すきっかけとかにもなって、やってよかったです。 初日 午前中は寝坊+ちょっと仕事などで出られず、午後から。なんかどの会場も満員な感じで、どうしようと思いつつぼんやりしたり前職のボスと話したり、techno_nekoさんと遭遇して、perl+oscで音を鳴らすデモを見せてもらったりしてました。そして、結構面白そうなアイデアをいただき。。。 懇親会は登録していなかったので、Hub.pmに参加。頑張っていろんな人に話しかけたりしました。 そのうち懇親会組や大人の人たちが雪崩れ込んできて大変な騒ぎに。帰るタイミングを見失って飲み過ぎてしまった感があります。どのくらい飲み過ぎたかというと記憶がスワップファイルからかろうじてサルベージできるくらい。charsbarさんに音楽とはみたいな話を力説していたような。。。 二日目 午前中は二日酔いでかなり辛い感じ+前日に思いついたアイデアに手を付け始めたら止まらなくなり、午後に会場に移動するもBOF会場で黙々とコード書いてました。とりあえずある程度形になり、techno_nekoさんにdemo見て貰うところまで出来たのでよかった！ その後はLT~クロージングまで見て、胃が痛いので家に帰りました。 まとめ 頑張って人前で喋った 人と話すと新しいアイデアを貰える LT以外のトークひとつも見てない＼(^o^)／

コミットメッセージの最初の空行までがsubjectです。最初の一行、ではありません。 subjectは、git log --onelineとかgit log --format="%s"とかした時に使われます。なので、 Clean up my room * Wash whole dishes * Mop the bathtub * Throw away magazines このようなコミットメッセージの書き方をすると、自分の中ではsubjectと本文がわかれていても、 $ git log --oneline 988f5e7 Clean up my room * Wash whole dishes * Mop the bathtub * Throw away magazines こんな風につながって一行になってしまいとても読みにくいです。 今度から気をつけましょう > 自分

WebSocketを使ってゴニョゴニョしているのだが、handshakeの失敗時のエラーをどう扱うべきなのか、よくわからない。WebSocket Protocol の仕様と WebSocket API の仕様で書いてあることが違う。 protocol仕様を読む限り、サーバーはhandshakeを拒否する場合適切なHTTPエラーコードを返さなくてはいけない、と書いてある。が、クライアント側のウェブブラウザ上のjavascriptでそれを期待しているとエラーイベントからはHTTPエラーコードは受け取れない。WebSocketの異常終了コード1006が固定でセットされている。 そこでAPI仕様を読むと、これらを行わない理由が赤字で大きく書いてある。 オープンリダイレクタが設置されたサイトで脆弱性になるので、handshakeのレスポンスはHTTPとして扱わない。 悪意あるスクリプトに攻撃の準備としてネットワーク環境の調査に使われるのを防ぐため、接続失敗の理由をスクリプトに通知してはいけない。 接続失敗の理由を開示してはいけない、というのは特定のシチュエーションの場合、と限定してあるのだが、この一文 A server that did not complete the opening handshake (e.g. because it was not a WebSocket server).http://dev.w3.org/html5/websockets/ が示す範囲がよくわからなくて、これがもし403とか返した場合も該当するなら、サーバーはHTTPエラーコードを返さなくてはいけないがブラウザはエラーコードを握りつぶさなくてはいけない、ということになる。実際API仕様にもHTTPステータスを受け取れるとは書いてないし、そういうもんだと言われればそれまでだが、実際のところ困る。 chromeのコードもはっきりそうなっているっぽくて( @gtk2k さんに教えていただきました。ありがとうございます。 )、101以外のHTTPステータスを受け取っても、特に個別の動作はしないし、エラーイベントのどこを探してもHTTP statusが見つからない。リダイレクトもしない。Unexpected response code: 403という文字列がエラーコンソールに出てくるけど、javascriptからは拾えなそう。 一体どうすれば良いのかわからず、原本 http://tools.ietf.org/html/rfc6455 および http://www.w3.org/TR/websockets/ と、そこから辿れる旧バージョンを参照した。以下の様な時系列で変更が行われた模様。 WebSocket Protocol hybi-05以前 プロトコル仕様に以下の記述がある。 記述1 ユーザーエージェントは、一部のシチュエーションではエラーの理由をスクリプトに伝えてはいけない 記述2 handshakeのレスポンスとして101以外を受け取った時、WebSocket接続を終了する User agents must not convey any failure information to scripts in a way that would allow a script to distinguish the following situations: http://tools....

勤怠表提出の自動化などが目的で、持ち歩いているラップトップのWi-Fiの接続先をログに取るようにしていたのだが、結構ログが溜まってきたので視覚化してみた。 http://aklaswad.com/where.html OSXでは接続しているSSIDなどの情報は以下のコマンドで取得できる。 /System/Library/PrivateFrameworks/Apple80211.framework/Versions/A/Resources/airport -I この結果をパースして、SSIDに変化があったらファイルに追記するという簡単なperlスクリプトを、cronでぶん回しているだけ。接続先のSSIDのバリエーションなどはたかが知れているので、SSIDに対応した処理も行える。自分は、日付が変わってから最初にオフィスのネットワークに接続したらfoursquareでチェックインするようにしてる。のでスクリプトに直接APIKeyなど書いてあるので公開しません;) 今回は、ログファイルをパースして、グラフっぽいHTMLを書き出してみた。これもcronで一日一回生成してscpでサーバーに投げるようにした。オフィスのネットワークやモバイル(wimax/iPhone)など接続先にあわせて色分けしたので、時期や季節によって行動パターンが違うのがわかって面白いと思う。寒くなると冬眠するがごとく活動時間が短くなっている様がよくわかりますね(震え声 ちなみに2011年3月の空白期間は、ラップトップのロジックボードがやられて起動不能だった+修理期間で、地震は直接の原因ではなかったりする。

11inch 全部盛り USキーボード。人生初のUS配列。 Lionでperl/node.js/coffeeScriptあたりの開発環境を整える際の自分用メモ。(一部追記あります。) 環境設定編 OSのセットアップ時 キーボード配列はUS。OSの言語設定は日本語を選択 ファンクションキーを有効に 環境設定 > キーボード > キーボード > F１、F２などの...をチェック ことえりを有効に 環境設定 > 言語とテキスト > 入力ソース でことえりを探してチェックを入れる。 あとでgoogleIME入れる。 Dock周りを整理 左に移動して自動で隠れるように。 とりあえずterminalをdockに Finder開いて左メニューのアプリケーション > ユーティリティー > ターミナルをDockにドラッグ capslockとcontrol入れ替え 環境設定 > キーボード > キーボード > 修飾キー spotlight起動のショートカットを殺す (ctrl+spaceはemacsで使うので) 環境設定 > キーボード > キーボードショートカット Chromeインストール 同期一発で前と同じ環境になる超便利 MissionControlはとりあえず放置 今まで(SnowLeopard)、あまりcommand+tabは使わずspacesでやりくりしていた(command+←/→で移動してた。押しやすくて便利だった)が、いろいろ弄ってみても前と同じ動作にならなそうなので、別の方法を探す。アプリケーションの切り替えをcommand+←/→に当ててみようかしら。 => アプリケーションの切り替えの設定場所が分からないので後回し。しばらくデフォルトの設定で使って慣れることにする。 (追記)ReederやTwitterでのマウスジェスチャが動かなくて難儀していたが、以下の設定で動くようになった。 環境設定 > トラックパッド > その他のジェスチャ > ページ間をスワイプ で 『2本指または3本指でスワイプ』を選択 参考 Lionで3本指スワイプによるブラウザの戻る＆進むなどを有効にする方法（追記） - MacBookの小部屋 ターミナルの設定 以前の設定を持ってくる方法はわからなかった。 とりあえず環境設定から...

前回の記事で書いたsonificatorの開発が思いの外面白く、勢い余って買ってしまった。コンピュータで作曲や音声合成を行うための理論が網羅的に解説されている大著。 コンピュータ音楽―歴史・テクノロジー・アート Curtis Roads 青柳 龍也 後藤 真孝 「訳者らあとがき」によれば原著は1996年とのことで、実に15年前の内容。記述が古い箇所が多いことも否めない。例えば、現在のDAWのようにMIDIイベントとオーディオ波形が並んで表示されているシーケンサー画面について「グラフィカルな表現は、純粋な MIDI データとオーディオ波形間の時間的な対応を見るのに便利である(p 608)」と解説してある。 まだ同時には再生できなかったのだ! 理論的な部分での充実度は尋常ではなく、多くのシンセサイザーやエフェクターの原理から、グラニュラーシンセシスの理論的背景まで、自分には十分すぎる範囲がカバーされている。殆どの場合、今でも不足を感じることは無いと思う。 十年くらい前に音楽系のプログラミングに凝っていた時期があって、その時に図書館で借りて頑張ってひと通り読んだ。ここ5-6年はソッチ系のことを殆どやっていないので、大分忘れてしまった。素人の手習いに過ぎないが、また頑張って読もうと思う。当時は手元に置いておきたくてもあまりに高くて手が出なかったが。。。いや、今でも十分財布に厳しいぞ。もとを取るためにもsonificatorはしばらくいじり続けたいと思います。

YAPC ASIA 2011行ってきました。 cho45さんのWAFの話とか、普段書いているコードに直結するような話で興味深い話も多かったのですが、それ以上に、techno-catさんやHaruka Kataokaさんの音楽関係のトラックにとても刺激を受けました。そういえば、自分がプログラムを始めたきっかけって、テクノとかエレクトロニカとか、そんな音楽やりたくてじたばたしているうちに片足突っ込んだのがはじまりだったよな、ということを思い出したりして、まあ、いわゆる初期衝動？に立ち返ったような気持ちになりました。 で、この一週間モンモンとしているうちに、今やるならWeb Audio APIだよななどと思いつつ色々いじってたら、こんなのが出来ました。 sonificator すべてJavaScriptで書かれていて、Web Audio APIを利用してブラウザ上でリアルタイムに動作するプログラムで、DOM構造をそれっぽい音楽に変換して演奏します。ブックマークレットから起動できます。最近のchromeでしか動きません。今のところ、いわゆるIDMとかエレクトロニカといった感じの音にチューニングされてます。ちょっとした画像効果付きなので、そっち系統の音が好きな方は、好きなサイトで実行して放置すると良い感じなんじゃないかと思います。 自分のお気に入りは、Facebookのウォール部分です。予め先の方までAutoPagarizeしておいて垂れ流すと、とても気持ち良いです。みなさんも試してみてください。...

通常、MTのパッケージはシステムレベルにインストールされません。そのため、lib/ とextlib/ へのパスを実行時に追加する必要があります。 例えば、EntryオブジェクトをDumpするワンライナーは以下のようになります。 $ perl -Ilib -Iextlib -MMT -MData::Dumper -e 'MT->new; print Dumper(MT->model("entry")->load(42))' また、プラグインごとのlibディレクトリへのパスは、MTのインスタンス作成時に動的に追加されます。そのため、MTのプラグインを開発中、コンパイルチェックをしたい時などに直接実行する事ができません。 $ perl -Ilib -Iextlib -Iplugins/MyPlugin/lib -c plugins/MyPlugin/lib/MyPlugin.pm 長いですね。 そこで、以下のようなモジュールを、perlのパスの通った場所に設置します。 package T; use strict; use warnings; use lib qw( lib extlib ); use MT; BEGIN { MT->new }; 1; 名前は、T.pmです。これで $ perl -MT -MData::Dumper -e 'print Dumper(MT->model("entry")->load(42))' $ perl -MT -c plugins/MyPlugin/lib/MyPlugin.pm...

Gollumは、githubのwikiエンジンのコア部分がオープンソースとして公開されたものです。軽量なWebServerとして動作するので、ローカルマシン上で起動してすぐに、ブラウザ経由でwikiページの閲覧や編集が可能になります。使用感をメモしておきます。 https://github.com/github/gollum インストールと起動 Gollumはrubyで書かれたwikiエンジンです。gemからインストールする事が出来ます。 起動するには、任意のgitリポジトリへ移動(またはオプションでパスを指定)してgollumコマンドを実行します。 $ sudo gem install gollum $ git init my_wiki $ cd my_wiki $ gollum これで、デフォルトでポート4567にウェブサーバが起動するので、ブラウザでlocalhost:4567にアクセスしてすぐにwikiページの作成が可能です。 特徴 バックエンドがgit gollumはストレージとして、一般的なDBエンジンではなくgitを利用しています。ブラウザからページを追加してみるとわかりますが、wikiページがファイルと一対一で対応するという直感的に分かりやすい構造になっています。ワーキングコピーでそれらのファイルを直接編集してgit commitすることでwikiに反映させることもできます。 githubのwikiもgitリポジトリとしてアクセス可能になっているので、githubからwikiをガバっとcloneしてローカルマシン上のGollumで確認しながら大量にページ追加作業をし、まとまったところでgithubにpushといった形でのgithubと連携することで、かなりの作業の効率化が可能かと思います。 オマケ的な利点として、画像などのファイルを直接git addする事でリポジトリに含めて管理、参照するといったことも挙げられます。(現時点ではGithubのwikiにはファイルアップロードのインターフェースがないので) 複数のマークアップフォーマットに対応 必要なライブラリをインストールする事で、以下のマークアップフォーマットを利用できます。フォーマットはwikiページごとに設定できます。 ASCIIDoc Creole Markdown Org Pod RDoc ReStructuredText Textile MediaWiki (gemから落とせる最新版(1.1.1)には含まれていない模様) また、github 独自拡張のwiki内リンク記法が利用できます。 はまったところ ワーキングコピーではなくgitリポジトリそのものを見ているので、ファイルベースで作業した場合、git commitするまで反映されない、ということに気づくまで小一時間はまった。

Happy new year! Happy Github! ということで、Movable Type のリポジトリがgithubに移行してとても楽しみなのですが、コミットログにFogbugzのケース番号書いてあってもWebから見たときにリンクにならないので不便です。のでとりあえずChrome extensionでなんとかします。 GithubType.crx https://github.com/movabletype/ 以下で、コミットログからfogbugzのcase番号らしきものを拾って、近くにリンクを追加します。だけです。もっと良い方法をご存知の方教えてください。

一週間経ってしまいましたが、MTDDC HOKKAIDOのまとめ。[DAY 1] MTDDC HOKKAIDO 朝５時半に起きて羽田へ。毎朝のように寝坊した旨をTwitterにつぶやいている身としては、そもそも飛行機に間に合うかが一番の難関でしたが、なんとかよたよたと家を出ました。北海道は大雪だったがなんとか無事飛行機も着陸し、会場へ。MTDDCスタート! やはり自分的には、技術よりのトークの方が興味ありました。残念ながら受付にいて壁越しにしか聞けませんでしたが、ka2hiroさんのテンプレートタグの話と、pirolix氏の分散処理の話が面白かったです。 自分のLTは、開発中のリスティングフレームワークについて、ざっとした説明とライブコーディングをやりました。資料おいておきます。 http://blog.aklaswad.com/mtddc_sapporo.html 前日まで「時間が余っているので15分くらいやって」と言われていたのが、直前になって「やっぱ時間無いので7分以内で」となってしまい、だいぶ端折ってしまいました。リスティングフレームワーク上でのリスト作成の雰囲気が少しでも伝わったらと思います。 [DAY 2] Hack-a-thon かつて無いほど大勢の参加者があり、楽しかったです。 自分はドラッグアンドドロップで複数ファイルをアップロードするインターフェイスの試作をやってました。マルチブラウザ対応等、いろいろ足りない部分が多くすぐには公開できませんが、ちょこちょこと手を入れていこうと思います。 Hokkaido.pmの方が多く参加されていた事もあり、PSGI絡みの話が多かったのが興味深かったです。 触発されて、以前書いたパブリッシュ側のPSGIアプリのデモもやろうと思ったのですが、Plackのインストールがコケてしまい間に合いませんでした。残念。一応コードさらしておきます。 [DAY 3] Freetime 三日目は夕方のフライトの時間までフリータイム。小樽まで足を伸ばして、寿司と、前日の打ち上げでとてもおいしかった小樽ビールの本家のビアホールと、ウニいくら丼と、食い倒れてました。とてもおいしかったです。...

MTのあちこちで使われている registry メソッドについて、自分の知っている範囲でですが、説明的なものを書いてみました。 テストとしてサンプルコードが埋め込まれているので、prove 出来ます。 podで説明文を書いてあるのですが、後で気付いたのですが、perldoc では文字化けして読めませんでした＞＜ 直接コードとpodを読んで、実行してみる等してみてください。 何かのお役に立てれば。

少し説明を追加、アップデートしました。 小粋空間さんで、プラグインのファイル構成について解説されている記事が公開されています。 Movable Typeのプラグインファイル構成について: 小粋空間 その中で、自分の過去の発表で YAML ファイルでの perl コードの実行について話した内容に触れられていたのですが、それを読んで、自分の発言が誤解されるような言い方になっていたようなので、整理してみます。 要点を順に書くと、こんな感じになります。 Movable Type の registry では、サブルーチンが期待されているなら、文字列を自動的に perl コードとして展開する場合がある plugin の定義ファイルである config.yaml ファイルではこの機能を最大限利用することで直接 perl コードを埋め込める(ようになっている設定値が多数用意されている) ただし、テーマの定義ファイルである theme.yaml ファイルを扱う際には、セキュリティ向上を目的に、基本的にこの機能を使わないよう開発している ですから、plugin のスタートポイントがfoo.plである場合と、config.yamlである場合に、セキュリティ的な安全性の差は(現在の所)ありません。小粋空間さんのところで触れられた安全性の話は、plugin と theme の違いの話だとご理解ください。 2) について補足しておくと、registry 内でサブルーチンが期待される場合(例えばテンプレートタグの登録での、実行ルーチンの指定部分)、「sub {」で始まる文字列を直接指定する事で、perl として実行させる事が出来ます。 以下は、実際にプラグインとして動作するconfig.yamlファイルの例です。 tags: function: Foo1: sub { return "Hello foo1" }

ActionStreamsで更新チェックする時に、AnyEvent::HTTPを使って並列ダウンロードするようにしてみました。sixapart / mt-plugin-ActionStreamsからforkして、anyeventブランチを切ってゴニョゴニョしてます。 http://github.com/aklaswad/mt-plugin-ActionStreams/tree/anyevent AnyEventが見つかれば自動的に利用するようにしてありますので、特別な設定は不要です。...

行ってきました。YAPC、というかPerlのイベント自体に初参加だったのですが、とてもエキサイティングな二日間を過ごせました。ふっとMTを持ちあげてくれたyusukebeさんのトークには特に感謝したいです。色々吹っ切れた気がします。

Include Map という名前のプラグインです。 なにが起こるの？ テンプレートの編集画面に、そのテンプレートをインクルードしているテンプレートの一覧を表示します。 以下のような依存関係の一覧画面を追加します。 どこでダウンロードするの？ ダウンロードはgithubからお願いします。画面右上、上から3段目の「Download Source」ボタンから、最新のパッケージをダウンロードできます。 使い方は？ IncludeMapプラグインは、テンプレートの編集を監視し、内部的に依存関係の記録を行います。ですが、現在のところプラグインのインストール時にはこの記録は作成されません。 運用中のMovable Typeにこのプラグインを追加して利用する場合、事前にブログ/ウェブサイトの一覧画面からPlugin Action > Rebuild Include Mapを実行してください。 インストールに成功すると、メニューの「デザイン > Include Map」から、各ブログごとのテンプレートの依存関係表を開くことが出来ます。この画面はIEでは動作しないかもしれません。 ご利用は計画的に...

外部リソースへのアクセスを行うようなプラグインを作成するときに、OAuth認証を利用する必要がある場合があります。ぶっちゃけて言うと、７月からTwitterにアクセスするために必要になります。 OAuthによるアクセスについては、PostTwiOAuthなどで実現されていますが、プラグインごとに認証部分を再実装するのは面倒ですし、OAuthの性質上、プラグインのインストール後にそれなりの設定作業が必要になるため、エンドユーザー視点でも設定項目をプラグイン間で共有して欲しいのではないかと思います。 そこで、OAuthサービスプロバイダに関する設定のプラグイン間での共有や、Handshakeの実行、および取得したトークンの管理を行うプラグインを開発しています。 http://github.com/aklaswad/mt-plugin-oauth-framework ドキュメントは、以下で準備を進めています。 http://wiki.github.com/aklaswad/mt-plugin-oauth-framework/...

今回のアップグレード/リニューアル作業で、Archive Indexページにちょっとしたカスタマイズをしてみました。 見ていただければわかると思うのですが、月別アーカイブ一覧のリストの項目をクリックする事で、その月のエントリー一覧を展開する事が出来るようになっています。 予告通り、カスタマイズの詳細を公開しておきます。基本的な考え方としては、MT側であらかじめ、ツリー展開する中身の部分だけを出力するためのアーカイブを作成し、静的なHTMLファイル群として出力しておき、リストの項目のクリック時に出力されたファイルを動的にロードして表示する、という仕組みです。 以下のような手順で作業を行いました。 ボックスの内側を表示する軽量なテンプレートを作る 簡素なブログ記事一覧をHTMLとして表示するようなテンプレートを、ブログ記事リストのアーカイブテンプレートとして作成します。この部分が、ツリー展開時に中身として表示されます。 <mt:entries> <mt:if __first__><ul></mt:if> <li><a href="<mt:entryPermalink>"><mt:entryTitle></a><p><mt:entryBody remove_html="1" trim_to="40">...</p></li> <mt:if __last__></ul></mt:if> </mt:entries> これだけを、テンプレートの内容として保存します。 アーカイブマッピングを設定する 作成したアーカイブテンプレートに、以下のようにマッピングを作成します。「skelton」の部分は何でも構いません。 %y/%m/skelton.html これで、ツリー表示の内側部分を、月ごとに独立したHTMLファイルとして出力できます。マッピングの保存後、再構築しておきましょう。 アーカイブページでAjaxでの読み込みを行う まず、jQueryをロードするためのコードを、Archive Indexテンプレートのhead部分に追加します。 <script src="<mt:StaticWebPath>jquery/jquery.js"></script> 今回は手抜きをしてMT5に同梱されているjQueryをロードしましたが、テーマに同梱する場合等を考えて、jQueryライブラリはブログディレクトリにアップロードし、それを読み込むようにした方がベターだと思います。 次に、リストの項目表示部分に「load-skelton」というクラスの指定を追加します。 <li class="load-skelton" url="<$mt:ArchiveLink$>skelton.html"><$mt:ArchiveTitle$></li> そして、load-skeltonクラスの要素をclickした時に、先ほど作成した展開用テンプレートを読み込む動作を指定するためのjQueryのイベントを設定します。今回は、以下のようなコードを</body>タグの直前に追加しました。 <script type="text/javascript"> $('.load-skelton').click(function(){ var toggle = $(this).attr('opened'); if ( toggle > 0 ) { $(this).find('.preview-box').remove(); $(this).removeAttr('opened'); } else { var url = $(this).attr('url'); $(this).append($('<div>').addClass('preview-box').load(url)); $(this).attr('opened', 1); } }); </script> まとめ カスタマイズは以上です。 肝は、MTのアーカイブを利用して事前に短い静的HTMLファイルを出力しておく事によって、ツリーの展開を動的に、かつ軽快に動作させることが簡単に実現できるという点だと思います。いやあ、MTって本当に便利ですね。enjoy!

MT4 + SQLite >> MT5 + SQLite >> MT5 + MySQL と長い旅路を経てようやく(今更)MT5にアップグレードできました。 色々無茶な拡張を重ねていたので、convert-db実行時に一部データが消失したり等、いくつかのトラブルが発生しましたが、懸念していた文字化けなど、MT本体についてMT4からMT5で大きな変更があった点については、問題なく作業が進みました。一般的な環境での作業なら、ほぼノートラブルでアップグレード出来るのではないかと思います。 幾つかプラグインをドロップしたので、テンプレートもそのままでは再構築できず。えいっとPicoベースに変更しました。すっきりしていて好みのデザインです。 久々にテンプレートのカスタマイズをして、普段使わない脳みその部位が脳肉痛です。Archivesのページでは、前から考えていたAjaxを使ったツリー展開を試してみました。なかなか軽快に動作しているので満足しています。このカスタマイズは後で手順をまとめておこうと思います。乞うご期待!...

...

...

...

Movable Type Plugins 開発継続中のプラグイン 開発終了/メンテナンス終了のプラグイン external link