JavaScriptで遅延ロードをする方法についてのおさらい
先日リリースした Extractor の Bookmarklet(コメントをチェック(浮き出る版))のデザインや仕様を変えました。主な変更点としては、「マウスでドラッグできる機能」が付いたのとデザインをがらっと変えました。 その際にma.laさんの最速インターフェース研究会で紹介されていたJavaScriptでの遅延ロードのテクニックを拝借させて頂きましたので、覚え書きのつもりで今回どのようにしてそれを使ったのかについて書いておきます。 まず、先に紹介した Extractor の Bookmarklet がなにをやっているかというと、現在見ているページに script タグのエレメントを生成して、他のドメインのJavaScriptのソースを読み込んでいます。Bookmarklet を分解すると下記になっています。具体的には createElement で script タグを生成して、各プ
Clouder::Blogger: ustreamの録画した動画のflvをダウンロードする方法
ustreamには録画機能がありますよね。 先日開催されたモバイル勉強会でも録画したものが公開されていたりします。 この録画されたもの(flv形式のファイル)をダウンロードすることができれば、それをmp4に変換してiPodで見られちゃうぜ！と思い、ちょっとハックしてみたところ、かなりめんどくさいですが方法がみつかりました。 でも、今のところアナログな方法しかなくシステマチックする方法はみつかっていません。 具体的な方法は以下。 ※この方法をやるためには前提条件としてFirebugがインストールされたFirefoxが必要となります まずダウンロードしたい対象のチャンネルのURLを開く 普通に http://ustream.tv/channel/example/ を開くだけです。 次にダウンロードしたい録画された動画をクリックする 先程開いたページの Past Clips からダウンロードした
Clouder::Blogger: Subversion と Trac のインストール方法とハマりポイントのまとめ
はてなと時期を同じくして clouder.jp も自宅サーバからさくらインターネットに移行しまして、Subversion と Trac をインストールしたのですが結構苦労したので覚え書きとして残しておきます。 とりあえず、Subversion と Trac のインストールに必要なソフトウェアは以下です。今回インストールしたバージョンも記しておきます。 ちなみに今回インストールしたサーバはFreeBSD 6.1で、Perl、Python、Ruby はインストール済。でも Trac は Python だけあれば動きますので、Perl と Ruby はインストールされてなくてもよいです。 Subversion関連 neon-0.25.5.tar.gz swig-1.3.31.tar.gz subversion-1.4.2.tar.gz Trac関連 httpd-2.0.59.tar.gz sql
Clouder::Blogger: riyaのように顔認識をするためのライブラリ
ご存知の方も多いと思いますが、riyaというサービスではアップロードした写真の中に顔があるとそれを認識して視覚化したり、物があるとそれを認識してその物に似た商品(場合によってはそのもの)をみつけてくれるという機能があります。一見すごい技術に見えるのですが、実はあるライブラリを使えばこれを簡単に実現することができます。 事の発端は単純に自分が顔認識をやってみたいと思ったからで、そのためのライブラリやソフトウェアがないのかなぁとネットをさまよっていたらこのライブラリに行き着いたというわけです。 そのライブラリは「opencv」といいます。 このopencvは、Intelが開発を行っているものでSourceforgeにてプロジェクトが進められています。このopencvというのは、別に顔認識に特化したライブラリではなく、「OpenCV (Open Source Computer Vision) i
Imagerを使おう - 第3回「文字を書く」
ちょっと間があいてしまいましたが、第3回を公開します。今回は画像に文字を書く方法をご紹介したいと思います。(決っして熱が冷めたわけではないで、いやほんとにほんとにｗ) Imagerには、文字を書くためのモジュールとAPIが用意されていて使い方も簡単。それでいて、いろいろな細かい設定ができたりします。 とりあえずサンプルコードと生成された画像を見てみましょう。 ※ちなみに文字を書く(フォントを扱う)にはImagerの他にfreetype1.x(freetype2.xでもok)をインストールしておく必要があります。詳しくはImager::Fontを参照のこと。 #!/usr/local/bin/perl use strict; use Imager; my $string = "Let's use Imager."; my $font = Imager::Font->new( file =>
Imagerを使おう - 第2回「画像を加工する」
さて、前回の予告したように、今回はImagerを使って読み込んだ画像をいろいろな方法で加工する方法をご紹介しようと思います。画像の加工といっても色々な方法があると思いますが、まずは拡大縮小、回転、切り抜き、反転、他の画像を貼り付けあたりから説明していきます。 なお、今回でてくる$imgというのは前回紹介した画像を読み込んだImagerのインスタンスだと思ってください。 今回サンプルとして加工に使う画像は下記になります。 拡大縮小 まずはオーソドックスな拡大縮小です。コードは以下。 $new_img = $img->scale(scalefactor => 0.5); # 縦横を元画像の半分にする(scale01.jpg) $new_img = $img->scale(scalefactor => 1.5); # 縦横を元画像の2倍にする(scale02.jpg) $new_img = $i
Imagerを使おう - 第1回「画像の読み書き」
今仕事で激しくImagerを使っていて、ImageMagickなどにも劣らない機能を持っているなあと感じている今日この頃なのですが、せっかく使っていて覚えたテクニックを自分の中で終らせるのはもったいないし、日本語でのドキュメントもあまりないみたいなのでまとめてみようと思いました。ということで、これから数回に渡ってImagerでできることを紹介していきたいと思います。(まぁ、podを読めという話なんですけど、Imagerはドキュメントも多いし、よく使う機能だけまとめておいてもいいかなと思い今回こういうのを始めてみました) まず第1回目は、とりあえず画像を読み書きの方法から。 Imagerで画像を読み込むには、read()というメソッドを使用します。 my $img = Imager->new->read(file => 'foo.jpg', type => 'jpg'); このようにfile
shibuya.js - DECONに行ってきました
エントリ書くの遅くなりましたが、DECONに行ってきました。 自分はツール系をいじったり探したりするのが大好き。なので今回のshibuya.jsは、すごい楽しみにしていました。開発環境って人によってぜんぜん違ってくるし、開発の効率というのは、今まですげ～時間かかってたものがあるツールを知ることにより一瞬でできちゃったりして、それを知ってるのと知らないのでは雲泥の差になるものもありますよね。 ということで今回のDECONのレビューは他の方が沢山書いていますので、ここでは自分の環境と今回DECONでイイ！と思ってインストールしたものを紹介したいと思います。(ちなみに仕事の関係で会場入りが遅れてしまったためnaoyaさんのだけ聞けなかった…のでpdfで我慢) 使用マシン ThinkPad X40 Windows XP 家ではノートのモニタのみ、会社ではノートのモニタ＋液晶ディスプレイ。液晶ディス
Imager-0.53でGIFアニメーションのループをさせるためのパッチ
最近マイブームの Perl でイメージを扱うモジュール Imager ですが、最新バージョンの 0.53 では GIF アニメーションの生成がうまくできないようです。原因は giflib の問題らしいのですが、giflib の最新バージョン(現時点では4.1.4)ではその問題が直っているっぽいのですが、まだ Imager のバージョンアップがされないようなので patch を作ってみました。 このパッチを適用する場合には、giflibのバージョン4.1.4以降を入れておく必要がありますので注意して下さい。 diff -u Imager-0.53/gif.c Imager-0.53.new/gif.c --- Imager-0.53/gif.c 2006-06-30 12:54:56.000000000 +0900 +++ Imager-0.53.new/gif.c 2006-08-20 0
Plagger を使ってカレンダーを携帯で見る
今日会社の人と話してて、それ Plagger でできるんじゃね？ってことになってやってみた。いや別になんてことはなくて、30boxes とかのカレンダーサービスで管理しているデータを Plagger で取ってきて携帯で見られるようにするって話です。 30box は自分のカレンダーのデータを RSS で吐いてくれるので、それを Plagger で取ってきて、 Publish::CHTML で携帯用に整形しているだけです。簡単やねぇ。 plugins: - module: Subscription::Config config: feed: - url: http://30boxes.com/rss/12345/FooBar/24rj394fk093i30w409i4r/1/ - module: Aggregator::Simple - module: Publish::CHTML confi
ffmpeg で iPod 用動画を生成する方法
ffmpegをインストールして、下記のブログに載っていたオプションで生成した動画を iPod へ転送したらあっけなく見られました。(いやうそ、その前に試行錯誤すること3時間でした…) FFMPEG And The Video iPod | Huebel Family Online ffmpeg -vcodec xvid -b 350 -qmax 10 -bufsize 4096 -g 300 -acodec aac -ab 96 -ac 2 -i input.avi -s 320x240 -aspect 16:9 output.mp4 ちなみにffmpeg のインストール方法は「第152回 早く来い! iPod with Videoの到着を待ちきれずにH.264エンコード(2)」を参考にしました。ここに載っている、FAAC、FAAD2、x264、liba52、そして追加で libxvidを
emacsを快適に操作するための10の設定
私的なものばかりですが、いつも忘れていろんなサーバに探しに行くので、メモっておこうと思って書きました。 他にお勧めがあったら教えてください。 同名のファイルを開いたとき Switch to buffer などでファイル名がわかりやすく見えるようになる設定 (require 'uniquify) (setq uniquify-buffer-name-style 'post-forward-angle-brackets) これを設定するとファイル名が同名だった場合にそのファイル名の後ろに file.txt<foo> file.txt<bar> といった感じで一階層上のディレクトリ名がでるようになります。もしその階層のディレクトリ名も同じだったら、もう一階層上のディレクトリ名も出て、違いがわかるまでディレクトリ名が出るようになります。 HTMLなどのコーディングで META タグにあるコーディン
yaml-mode-0.01 - simple major mode to edit YAML for emacs
Catalyst などで config を書く際に YAML を使って書いたりしているのですが、その他にもちょろっとした設定などを簡単でわかりやすいという理由から YAML を使って書くことが増えてきました(自分だけ？)。 自分は YAML を emacs で編集しているのですが、 yaml-mode ってあるのかなと思い、いろいろと探してみたのですが残念ながらみつかりませんでした。 ないんだったらせっかくなので elisp の勉強もかねて自分で作ってみようということで、とりあえず色を付けるだけのものを作ってみました。ただまだ色の指定すらできません…。単純にカラフルな YAML が見られるだけです。 また、 YAML の文法を全部把握しているわけではないので、カラフルになるべきところ(？)でならないこともまだまだあったりすると思います…。 Download ダウンロードは下記からできます。
Sledge::Sessionに便利なアクセサ追加するには
subtechグループ - tokuhiromの日記 - Sledge::SessionManager にアクセサ追加 User の ID をセッションに入れとく場合、 my $user = Project::Data::User->retrieve($self->session->param('id')); とか毎回書くのはダルいので my $user = $self->session->user; と書きたいのだが確かに。セッションから直で取れるのを設定できると楽だな～。宮川さんがコメントしているように簡単にSledge::Sessionに追加できるプラグインがあってもいいと思いますが、今のところ自分がよくやる方法としては下記の2つの方法があります。 方法1：Authorizerに定義する Project::Authorizer::Loginとかで認証する際に、 sub authori
Sledgeのインストールと設定方法
ThinkITに「SledgeによるWebアプリケーションフレームワーク入門」を書かせて頂きました。今回から数回にわたってWebアプリケーションについて紹介しながら、Sledgeではどう実現するのかについて、にぽたん研究所な人、#!shebang.jpな人 、自分の三人で書かせて頂く予定です。 この連載では、主題が「Webアプリケーションフレームワーク」なのでSledgeの詳しい説明を盛り込んでいません。そこで、この際なのであちらでは書ききれなかったSledgeの設定方法についての説明をこのページで書こうかと思います。 とりあえずSledgeを使ってページが表示できるまでを書いていきます。 途中で挫折したらすみません…。 今回の目標としてhttp://sledge.example.com/index.cgiにアクセスをしたら Hello World と表示するだけのアプリケーションを作成す
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
yaml-mode0.0.3 リリース