Hatena::ブログ(Diary)

旧・私と私の猫の他は誰でも隠し事を持っている

2013年からはてなブログに引越しました。新旧ともども、今後もよろしくお願いします。

2012-12-29

「アマゾンチラシ」はじめました

しわすだなぁ。ぼかぁ君といるときがいちばんしわすなんだ… とバカやってるうちに今年もあと2日です。サービスをリリースしたり広告を打つには多分、最悪のタイミングじゃないかと思うのですけど(マーケティング方面は詳しくないもんで)、「敢えて言おう、リリースすると!」…という訳で始めました。アマゾンの格安商品をチラシで楽しむ「アマゾンチラシ」!!

アマゾンのヘビーユーザの方ならご存知かと思いますが、星の数ほどある商品の中には半額以下の値引きになっているものが結構ゴロゴロしてるんですよね。そういう激安商品の情報を「折込チラシみたいな体裁でお手軽に見られたら結構楽しいんじゃね? そう、こんなふうにね↓(ドヤっ)」という思いつきが発端でした。

f:id:Mariyudu:20121229211152p:image

もちろん、amazon.co.jp に行って検索機能を使えばこういう情報は自分の欲しいものに絞って効率良く得られますが、いっぽう、圧縮陳列で有名な某ディスカウントショップのチラシをめくるようなアナログの楽しさも我々はまた知っている訳です。アマゾンの膨大な商品情報をソースに、ちょっとしたサプライズをもたらしてくれるようなサービスを目指してみました。この「なんちゃってチラシ」は毎日深夜、アマゾンから7割以上ディスカウントされている商品情報を取得し、前日のチラシと重複しないような処理をごにょごにょとカマして、自動生成されています。それと、このサイトは所謂アフィリエイトサービスなので、皆さんがここ経由で買い物して頂くと、そこからサーバ費用が捻出できて嬉しいな、という仕組みになっています。どぞ、ご贔屓の程。

最後に、蛇足ながら開発にあたってのトピックを。

  • いつもは CakePHP を使っていますが、小規模な開発だしモダン手法に触れてみたいということもあり、Slim という Sinatra オリエンテッドなマイクロ F/W を使ってみました。
  • けど、Slim 標準の View はちょっとアレなので、テンプレートまわりは Twig を試してみることに。
  • ほんでもって、Slim に欠けている ORM まわりは、RedBeanPHP とゆーこれまた初体験のプロダクトでゴー!
  • U/I まわりは当然のように Twitter Bootstrap でサクサクと。

というように、目新しい環境での開発だったので、新鮮な気分で楽しくやれました。小さく産んで大きく育てる諺(?)どおり、今はランダムに近い自動生成の一種類のチラシだけですが、今後の手応えによっては時節に応じた特集号を追加したりデザインのバリエーションを増やしたりしてみたいと思っています。少しは反響があるといいなぁ…

さてそんなこんなで今年もあっという間でしたね。それでは皆様、良いお年をお迎え下さい。

※「アマゾンチラシ」は、2014-11-12 に閉鎖しました。

2012-12-1

モニターが回転しない ZOOM Q3HD を100均素材でなんとかしてみた

自分撮りに不便な ZOOM Q3HD

こないだの7月頃でしたか、ZOOM Q3HD という高音質のハンディビデオレコーダを買いました。目的は、ライフワーク的に行なっているアコギ演奏動画の撮影用です。それまで Xacti を使ってたんですが、どうも数十Kbps の MP3 みたいな音質に我慢できなくなったもんで。性能は期待していたとおりだったのですが、ひとつ困ったのは Xacti のようにモニターディスプレイが回転しないので自分撮りに不便ということ。幸い HDMI 端子を装備しているので PC 用のディスプレイを繋いで自宅での自分撮りは何とかなるんですが、野外だとそうもいかないし。そこで例によって百均素材でポータブルの反射鏡を作ってみました。

作り方

用意したのは100円ショップで売ってる、針金っぽいユニバーサルアームの両端にクリップとLEDライトがついてるクリップライトと、小さな鏡(↓)。

f:id:Mariyudu:20121201170958p:image

鏡のほうは百均だといまいち大きくて重いのしかなかったので、自宅に死蔵されてた何かでもらったヤツを採用。この鏡を、クリップライトの平らな所に厚めの両面テープで貼り付けます。はい、これだけ。これをカメラの三脚に取り付けて使います。こんな感じ(↓)。

f:id:Mariyudu:20121201170959p:image

まずまず使えました

これを、こないだ知人の方とのギター二重奏を練習スタジオで録画した際に使ってみましたが、鏡が小さいので見易いとは言い難いですが「無いよりはだいぶマシ」という感じで、それなりに使えました。

※後日談ですが、実はこの HDQ3 を買ってしばらくしてからカメラが回転する同ジャンル製品が TASCAM から出たんですよねー。はー…

2012-10-21

Ligature Symbols で Twitter Bootstrap のアイコンを増やす

最近、Bootstrap 比率が高いですが何か。という訳で今回は Bootstrap のアイコンを強化するネタを。

先日、Bootstrap のアイコンの語彙が足りないのを動機に何とかアイコン種類を増やせないかとネットを物色してたら、Font Awesome という Bootstrap での利用が可能なウェブフォントを発見。これを試してみたところ、滅法使い勝手がイイ! なんたって従来の Glyphicons アイコンを全てカバーした上に70種類もアイコンが増えているし、フォントなのでサイズや色が自由に指定できるし。もう自分的には今後 Bootstrap を使う時はこいつとの組み合わせが標準ケテーイです。

…と感激していた訳ですが、それと時を同じくして Ligature Symbols なるシンボルフォントがあることを知りました。Font Awesome とカブっているものもそれなりにありますが、日本人作者によるものなので、はてなMixiモバゲー等日本発サービスのアイコンが豊富だったり等、Font Awesome とはまた別の使い勝手がありそうです。これを Font Awesome と同じ要領で Bootstrap に組み込めないかな、というスケベ心が抑えきれず試してみたところ、割りと簡単にできちゃったのでお裾分けというか。

やり方は至って単純で、Font Awesomeスタイルシートを Ligature Symbols に合わせて書き換えただけです。icon-xxx というクラス名に接頭詞を付けて、ls-icon-xxx とするように語彙を増やした訳です。これにより、こんな感じ(↓)でより多くのアイコンを使うことができまっせ。

f:id:Mariyudu:20121021203413p:image

拙サイトにデモを用意しましたので、興味のある方は見て頂ければと。

※ 追記 : 本記事を UP 後、Ligature Symbols の作者さんがはてなユーザ( id:kudakurage )だったことに気づきました。ちゃんとフォント作成の記事まであるしw てな訳で、Ligature Symbols についての詳細は http://d.hatena.ne.jp/kudakurage/20120720/1342749116 をどうぞ。

2012-10-15

データを可視化する 20 のツール

海外サイトで「The top 20 data visualisation tools」という記事を見かけたのですが、可視化はかねてから興味を持ち続けているテーマなので、紹介も兼ねて大雑把に纏めておきます。英語は得意じゃないので若干主観を交えた超訳ですけどw

入門者用ツール

1. Excel

初心者レベルならツールは使い慣れたものを使うのが一番。Excel って結構複雑なこともできるんですよ。温度一覧表のセルに色付けして分散図っぽくするとか。人様向けに Web 公開するって訳でもなけりゃ、スピーディにデータ加工できるツールを選ぶべきかと。もし持っていなかったら、Google Docsスプレッドシートを使うのもいいでしょう。

http://www.netmagazine.com/features/top-20-data-visualisation-tools

Excel

2. CSV/JSON

可視化ツールじゃないですけど、非常に一般的なデータ形式なのでこれらをマスターしておくことは重要です。いずれ、以下に挙げるような可視化ツールにこれらフォーマットのデータを食わせることになりますし。

http://www.netmagazine.com/features/top-20-data-visualisation-tools

オンライン・ツール

3. Google チャートAPI

グラフを静的画像で提供してくれる「Googleイメージチャート」は廃止されちゃいましたけど、SVGcanvas 要素、VML 等の多彩な形式での動的生成 API が使えます。棒グラフ・折れ線グラフ・マッピングQRコードと、そりゃもう何でも作れちゃいますぜダンナ。極端にカスタマイズしたいというのでなければ、とっかかりとして最適なツールとなるでしょう。

http://www.netmagazine.com/features/top-20-data-visualisation-tools

Google チャートAPI

4. Flot

折れ線グラフと棒グラフに関して言えば、Flot はグレイトな JavaScript ライブラリです。canvas 要素が扱えるブラウザ全てで動作し、多彩なコールバックを指定できるので、マウスオーバーやクリックでのちょっとした仕掛けもカンタンです。また jQuery モジュールでもある為、jQuery ユーザなら学習コストも低いですしね。

http://www.netmagazine.com/features/top-20-data-visualisation-tools

Flot

5. Raphaël

Raphaël もまた強力な JavaScript 作図ライブラリです。大きな特徴は、SVGVML といったベクトル形式データでの出力にフォーカスしていることで、他の DOM 要素と連動した表現を行うことも可能です。まずは開発元のデモをご覧頂ければと。イラレで作ったんじゃねーの? って思うようなスゴいのがたくさんありますぜ。

http://www.netmagazine.com/features/top-20-data-visualisation-tools

Rapha〓l

6. D3

もうひとつ、SVG 出力の JS ライブラリといえば D3ギャラリーページを見ると分かるように、ボロノイ図木構造マップ、ワードクラウドのような複雑な表現が満載です。故に、常にお薦めできるツールではないかもしれませんが、もし高度なスキルをお持ちなら知っておくべきです。

http://www.netmagazine.com/features/top-20-data-visualisation-tools

D3

7. Visual.ly

単なるデータ可視化を超えて、インフォグラッフィクの領域に挑もうとするなら、もう Visual.ly でしょう。インフォグラッフィク・デザイナーの間じゃ一番人気のオンライン・ツールです。テンプレートを元に作図が出来、ソーシャルサービスとも連動した表現活動やマーケットプレイスへの出品さえ可能なんです。

http://www.netmagazine.com/features/top-20-data-visualisation-tools

Visual.ly

インタラクティブウィジェット

可視化を推し進めて行くと、ボタンやスライダーといった部品との連動、といったような対話的な処理が必要になったりします。以下は、そんな時に便利なウィジェット達を。

http://www.netmagazine.com/features/top-20-data-visualisation-tools
8. Crossfilter

Crossfilter可視化フィルタ機能を加えた JavaScript ライブラリです。サンプルには、グラフから範囲を選択して表と連動させる例が掲載されています。

http://www.netmagazine.com/features/top-20-data-visualisation-tools

Crossfilter

9. Tangle

とある複雑な数式をグラフ化して、さらにパラメータとグラフとの変化の相関を可視化したい、というような場合ならこれ、Tangle です。サンプルでの、グラフ上のハンドルをドラッグしてパラメタが変化する様子をご覧下さい。もう魔法みたいです。

http://www.netmagazine.com/features/top-20-data-visualisation-tools

Tangle

マッピング

かつてマッピングを Web で表現するのは大変な作業でした。けれど Google 地図の登場でそんな辛さも過去のもの。彼らの API の提供は Web マッピング手法の一つの方向性を提示したものとなり、以来我々は Google 地図の代替となり得る複数の手段を持つに至っています。

http://www.netmagazine.com/features/top-20-data-visualisation-tools
10. Modest Maps

Modest Maps はたった10KBの小さな JavaScript ライブラリで、地図の表示に必要な最小限の機能を持っています。そして、Wax のようないくつかの拡張機能と組み合わせることで豊かな表現をも可能にするのです。

http://www.netmagazine.com/features/top-20-data-visualisation-tools

Modest Maps

11. Leaflet

Leafletモバイル向けページに最適な、小さなマッピングフレームワークです。Modest Maps も Leaflet も、強力なコミュニティに支えられたオープンソース・プロダクトなので、今後の長きに渡ってこれらの利便性を享受できるでしょう。

http://www.netmagazine.com/features/top-20-data-visualisation-tools

Leaflet

12. Polymaps

Polymaps もまたもうひとつのマッピングライブラリですが、さらに厳密な表現を提供しようとしています。地図のタイルにはベクトルデータを用い、スピーディな表示や多彩な表現が特徴です。

http://www.netmagazine.com/features/top-20-data-visualisation-tools

Polymaps

13. OpenLayers

OpenLayers はおそらく、この種のプロダクトの中でいちばん堅牢じゃなイカかと。ドキュメントは親切とは言えず、マスターするのは難しいでしょうが、ソリューションとして完結しており、他のライブラリ等を必要とせずに目的を完遂できます。

http://www.netmagazine.com/features/top-20-data-visualisation-tools

OpenLayers

14. Kartograph

「Web マッピングの再考」、これが Kartographスローガンです。Google 地図を始めとした製品で見慣れているメルカトル図法ですが、Kartograph はそれ以外の選択肢を与えてくれるという訳です。方位や距離といった重要な要素を Web マッピングでストリクトに表現したくなった時、Kartograph の出番です。

http://www.netmagazine.com/features/top-20-data-visualisation-tools

Kartograph

15. CartoDB

最後に CartoDB、これは知っておくべきです。何故って、表形式のデータと地図を組みあせて表現を行うなら、こいつの右に出る者はないからです。例えば、住所録データを CSV で与えてやると住所を緯度経度に変換してマッピングするとか。有料サービスですが、5つの表データまでは無料で利用できます。

http://www.netmagazine.com/features/top-20-data-visualisation-tools

CartoDB

インライン・グラフ

最近の傾向ですが、Web ページにちょっとした小さなグラフをインラインで埋め込む例が見られます(所謂スパークラインというやつですね)。そんな時は FF ChartwellChartjunk が便利でしょう。

http://www.netmagazine.com/features/top-20-data-visualisation-tools

もっと本格的なやつ

さて、さらに本格的な可視化手段を求めるなら、上に挙げたようなウィジェットやサービスではなく、プログラミングも含めた統合環境を導入する必要があるかもしれませんね。

http://www.netmagazine.com/features/top-20-data-visualisation-tools
16. Processing

Processing はまさに、インタラクティブ可視化の申し子といえるかも知れません。シンプルなコードを書くだけで多彩な作図が出来ます。さらに Processing.js のような JavaScript 上での実行環境も用意されています。様々なプラットフォームへの移植が進行中で、ユーザ・コミュニティによる大量のサンプルコードがあるのも魅力です。

http://www.netmagazine.com/features/top-20-data-visualisation-tools

Processing

17. NodeBox

NodeBox は、2次元グラフ作図用の Mac OS X アプリケーションです。もし Python の文法を知っているなら、変数を調整しながら瞬時に結果を可視化できますよ。

http://www.netmagazine.com/features/top-20-data-visualisation-tools

NodeBox

プロ用ツール

以下は、冒頭にあげた Excel とは対極にある、プロ御用達なデータ分析ツールとなります。データ可視化を真っ剣に考えているなら、高価な SPSSSAS を利用するも良いでしょうし、これらオープンソースな製品を選ぶのも良い手段です。

http://www.netmagazine.com/features/top-20-data-visualisation-tools
18. R

大規模データの統計や解析に用いられる R は、とても多く複雑な機能を持つツールです。学習曲線はここで挙げた中で最も急勾配である反面、強力なユーザ・コミュニティに支えられている心強さもあります。マスターするのは大変ですが、一定のレベルに達した時、非常に快適な環境を手に入れられることは間違いありません。

http://www.netmagazine.com/features/top-20-data-visualisation-tools

R

19. Weka

より深くデータ科学に深くコミットするなら、データ・マイニングの能力も要求されることでしょう。Weka は、様々な属性に基づいてデータを分類し、クラスタリングするのに秀でた Java アプリケーションです。

http://www.netmagazine.com/features/top-20-data-visualisation-tools

Weka

20. Gephi

Facebook 等の普及で、ソーシャル・グラフの話題も珍しいことではなくなってきましたね。そう、Gephiグラフ理論に基づいた、あらゆる種類のネットワークや階層グラフを可視化するツールです。大量のデータを処理できるだけでなく、美しいビジュアルでの表現能力を持っています。

http://www.netmagazine.com/features/top-20-data-visualisation-tools

Gephi

2012-9-22

100均素材製グリーンスクリーンと iMovie でクロマキー合成してみた

今回も、時々書いてるアコギ演奏動画に絡めたネタですが何かw

で、いきなりですが、撮影をする時に悩ましいのが「背景」なんですよね。欧米諸国にお住まいの方々みたいにゆったりした部屋ででっかいカウチにふんぞり返った構図で撮りたいのに、真性ウサギ小屋な上にガラクタだらけの我が家なので、スッキリした背景を撮れる場所が少ない訳です。なのでこれまで、比較的片付いている寝室にいつも移動して、寝具を片付けて撮影してましたが、撮り続けていくうちに流石に面倒になってきてどげんかせんと…と考えるようになりました。カーテンみたいなスクリーンを作って背景にしたら? → カネかかるじゃん、いや別に模造紙とかでもいいか → 100均で揃えられるかな? → ちょとまて閃いた(ピコーン)!! いっそ色付きのスクリーン作って iMovie のグリーンスクリーン機能で好きな背景を合成したらいーじゃん!! という訳で以下、100均素材でグリーンスクリーンを作り、SFX なアコギ動画(w)完成に至るまでの記録です。

設計図というのも大げさですが

まぁこんな感じを目指します(↓)。

f:id:Mariyudu:20120922142438p:image

で、素材選び

大きめな緑色の紙か布を探したら1mを超えるようなのはちょっと見当たらなかったので、小サイズを繋ぎ合わせることにして、70cm x 60cm のフェルトを4枚買うことに。なるべく服の色とカブらないほうが良かろうと、ペカッと明るい黄緑色のやつです(↓)。

f:id:Mariyudu:20120922142855p:image

あと、上下に通す棒は150cmの園芸支柱を2本(↓)。

f:id:Mariyudu:20120922143119p:image

以上、これで〆て630円。

あとは設計どおりに組立て

フェルトの貼りあわせですが、段差ができて影が浮かび上がるのが心配だったので重ね合わせて貼るのではなく、裏側から粘着テープを貼ることに(↓)。

f:id:Mariyudu:20120922143310p:image

これで 140cm x 120cm のスクリーンが出来たので支柱通しを。といってもフェルトを上下で折り返して虫ピンで留めるという、カナーリ適当な感じ(↓)。

f:id:Mariyudu:20120922143311p:image

組み上がったやつを、ハンガースタンドに洗濯バサミで括りつけて完成!(祝っ↓)。

f:id:Mariyudu:20120922143715p:image

スクリーンの前で撮影

スクリーン上に影があると、合成の時に不具合になりやすいっぽいので電気スタンドで下から照明を当てて濃い影が出ないようにするのが吉かも。撮った生の映像がこんな感じ(↓)。

f:id:Mariyudu:20120922143716p:image

さていよいよクロマキー合成

トロピカルな背景が欲しかったので、YouTubeクリエイティブ・コモンズで公開されている動画を探し、これをダウンロードして iMovie で合成したら、こんなんできちゃいましたー(↓)。

D

俺は今、猛烈に感動している!

iMovie 上での合成手順は、丁寧に解説してるページがたくさんあるので割愛します。なにせ上手く行くかどうか分からない状態で製作したので粗雑な作り方ですが、例えば粘着テープだとそのうち剥がれてくると思われなので、裾上げ用のアイロン接着テープとかできっちりくっつけた方がいいでしょうね。それにしてもこんな粗末な手製スクリーンに加え照明もテキトーだったにも関わらず、結構スムーズな合成が出来ちゃったのには正直驚きました。iMovie、スゴいよ、ユー!!