はてなブックマーク

2009年12月8日*1(日本時間では12/9朝)、拡張機能が有効(除くOSX)な Google Chrome ベータ版がリリースされました。同時にこつこつ開発を続けてた、はてなブックマーク Google Chrome 拡張ベータ版も公開したので、良かったら使ってみてください :D http://hatena.g.hatena.ne.jp/hatenabookmark/20091209/1260314705 というわけで、Google Chrome 拡張を作ってみたのですが、その時に参考にした資料やドキュメントをまとめてみました。 Google Chrome 拡張APIドキュメント http://code.google.com/chrome/extensions/docs.html 基本的に上のURLで必要なAPIのドキュメントはまとめられています。またページ中央下の「Doc versio

2009年、11月9日に開かれた、 Firefox Developers Conference 2009 で、はてなブックマーク Firefox 拡張の話をしてきた資料です。実装についての話は、nanto_vi さんが資料を公開してくれると思います。 資料の最後にも載ってますが、本当に Firefox 拡張開発に当たり、Mozilla/Firefox に関わる方々が公開してくださっている資料やコミュニュティの成果物に非常に助けられ、それらが無ければ開発は行えなかったと思います。Firefox Developers Conference に参加された方々、Mozilla Japan やその他 Mozilla コミュニュティの方々、Mozilla/Firefox に関わるすべての方々、どうもありがとうございます。 はてなブックマーク Firefox 拡張の裏側 はてな 舘野祐一(id:seco

http://16x16.hatelabo.jp/ 先日、はてラボで 16x16 という、16x16 サイズに特化したアイコンエディタをリリースしました。 favicon や小さなアイコンなど、Web 上では小型サイズのドットアイコンは使いやすいので、いろいろな場所で使われていますね。16x16 サイズのアイコンを書くのに、16/32/64 サイズの同時プレビューが欲しかったり、即座に色の明度調整を行いたかったのですが、手軽に使えるツールが無かったため、Flash でサクッと作ってみました。 と云うわけで、はてなのユーザアイコンとも相性がいい 16x16 サイズのアイコンを、みんな描いてみましょう！絵心が無くてもなんとなーく描くだけでそれっぽいのが作れると思うので、軽いチュートリアルを作ってみました。 その1 ざっくりと形を決める 適当に形を決めましょう。初心者なら線対称な図形を描くのが楽

先日のデブサミ2009で発表した、はてなの開発戦略 (すごい名前だ…) のプレゼン資料を公開します。前半は主に git の話で、後半ははてなブックマークリニューアルの、Perl 層の開発をどんな感じで行っていったか、という話です。 デブサミ2009 はてなの開発戦略View more presentations from hotchpotch. はてなの git では、中央のマスタレポジトリサーバがあって、そこから各自 clone / fetch して開発を行ってるので、完全に github のような分散のメリットを生かしているわけではありません。 しかし完全に分散を生かさずとも、git に移行したメリットは十分にあって、資料の中でもふれていますが、やはり一番便利なのが git のブランチ機能です。もうこれ無しでの開発は考えられないなぁ、ぐらいで、さくっとブランチ切って開発、ブランチの切り

最近誰がスターをつけてくれたか、どんな引用してくれているのか、人生に三度起こるというスター気になる期になってしまったので、どこかをクリック連打(クアドラプルクリック (4 クリック))するとはてなスターを展開する Greasemonkey スクリプトを書きました。 http://gist.github.com/raw/43275/418ccda95e78a6d90646fc2093f559f23f9047d7?.user.js これを使うと、スターがついている気になってるページでどこでもおもむろに連打すると な感じで展開されます。もちろんみんな大好きはてなハイクとか 10000スター超えも珍しくないうごメモでも(10000ぐらいあるとさすがにかなり重いけど…) みたいに表示されます。うまく展開されないときは再び連打するとうまくいったりします。 ちなみになんでこれクアドラプルクリックで有効に

http://www.atok.com/useful/developer/api/ ATOK ダイレクト API が公開され、Ruby/Perl で ATOK プラグインが作れるようになったので、早速簡単かつ何でもできるプラグインを作ってみました。 http://rails2u.com/misc/atok_plugin_ruby_eval.zip セットアップし、ATOKダイレクトAPIがつかえ、Ruby の実行環境があると、ATOK で入力中に Ctrl + Insert で Ruby の実行結果が変換されて返ってきます。たとえば電卓っぽくりようしたいときには 24*24と入力したときに Ctrl+Insert を打つと 576な文字列が返ってくるので、電卓としてつかえて便利！ また 'korehabenri'.split(//).join(' ')をCtrl+Insert で変換すると

先日行われた FxUG@関西の勉強会で、AS3 namespace についての発表を行った際の資料です。カスタム namespace の基本的な使い方は理解しておくといろんな場面で活用できると思います。みんなもっと namespace まくろう！！！ namespace 基本的な namespace as3 namespace カスタム namespace namespace 応用と実践 namespace を利用したライブラリ 基本的な namespace public private protected internal ご存じの通り、基本的な namespace 上三つは、Java とほぼ同じ internal namespace デフォルト namespace 宣言無しで書くと、internal となる function myFunction():void { }internal

はてなダイアリーが AtomPub で編集できるようになったので、早速 fuse を使ってファイルシステムを作ってみました。こんな感じに使えます。 http://rails2u.com/tmp/diary_fuse/fuse.htm (動画) /create に保存すると現在時刻で作成 /20080820101010 など、エントリーを編集可能。保存で更新。 rm するとエントリーを削除 /\d{14} 的なファイル名で保存すると、その時刻のエントリーを作成 などなど。Ruby の FuseFS を初めて使ってみましたが、結構簡単にファイルシステムをいじれて便利ですね。ちなみに本文の改行周りがおかしくなるというアレな挙動をして、全然実用できませんが、AtomPub 使うとこんな事もできるよーという例として見ていただければ。 ソースコードは以下です。

http://www.ruby-lang.org/ja/news/2008/08/23/dos-vulnerability-in-rexml/ 先日公開された、REXML の脆弱性ですが、「あーそうなんだ、でもうちの Rails のサービスじゃ REXML でパースする処理なんて書いてないから別にいいや」とか思っている方、大変危険です。みんなパッチあてようよ！ XML entity explosion attackと呼ばれる攻撃手法により、ユーザから与えられたXMLを解析するようなアプリケーションをサービス不能(DoS)状態にすることができます。大部分のRailsアプリケーションはこの攻撃に対して脆弱です。 REXMLのDoS脆弱性 と書いてある通り『大部分のRailsアプリケーションはこの攻撃に対して脆弱』なのです。たぶん今世の中にある Rails な Web サービスの9割が現状でも、

http://gist.github.com/ 最近 github にまた新しいサービス、gistが誕生しました。これはよくあるソースコードを web にペーストして参照できるサービスの git 版、と云ったところです。 gist の良いところは、まず git を知らなくても使えるところが上げられます。普通のペーストサービスと同じで、ソースコードを適当にはっつければOKで簡単です。編集ももちろん web 上からでき、インターフェイスから編集を行うと、git の履歴としてサーバサイドに保存されます。また、匿名による作成・編集も可能です。(匿名による編集は cookie が切れるまでっぽいですが) そして、git と同じく、github にログインしてれば、gist で誰かが貼り付けたソースコードを fork でき、自分の権限の元編集操作が可能になります。ので、誰かが貼り付けたコードを for

本日の OSC Kansaia 2008 で開かれた Shibuya.js in Kyoto で、JavaScript と ActionScript の連携について話しました。関西のカンファレンスでの発表は初めてでしたが、楽しかったです。スピーカの皆さん、参加された皆さん、どうもありがとうございましたー。 以下発表資料です。 JS <-> AS JavaScript と ActionScript の連携 自己紹介 はてなエンジニア 舘野 祐一 (id:secondlife) http://tako3.com/http://rails2u.com/ Ruby, ActionScript3, JavaScript JS と AS JS だけでよくない？ AS だけでよくない？ 相互に補完しあえる関係 両方使えると、様々なメリットが JavaScript -> ActionScript cros

http://github.com/ 最近一部で話題沸騰の github。github は Rails で作られたアプリケーションでは、自分が知りうる限り一番の完成度と使いやすさを誇るんじゃないか、と思っています。 ソースコードツリーの見やすさ、(g)zipでくれ機能、各種 git の情報へのアクセスしやすさ、最初に git レポジトリを作ったとき表示されるチュートリアルと云った基本的なことはもちろんですが、オープンソースプロジェクト・コミュニティを加速させるであろう、分散レポジトリを利用した様々な機能がすばらしいですね。 誰かが公開してるレポジトリを fork ボタン一つで自分のレポジトリにクローンし、いろいろ変更を加え、大本に取り込んで欲しいなぁ、と思ったら pull request。大本のコミッタは気に入れば pull で取り込めばよいし、もし気に入らなかったとしても、変更者がそのフ

昔話でもしようか。 自分は6年前はプログラミングが全くできなかった。プログラム書ける人は一部の天才だと思っていた。プログラミングができないことに劣等感を覚えた自分は、Linux が使えると格好いいんじゃと思い、Debian で自宅サーバを構築し、アンテナ*1や tDiary で日記サイトを運営したり始めた。 そんなとき、id:antipop と出会った*2。島に住んで、特にITもなにも関係ない仕事をしていた彼が、全く知識が無いところから勉強し Linux で自宅サーバを動かし、php + postgres で blog っぽいシステムを日々バージョンアップさせ、Button Maker for Japanese などのツールを作っていくのを blog 経由でリアルタイムで見ていて、プログラミングもやれば誰でもできるんじゃないかと感じ、自分の日記ツールが tDiary ということもあって、R

Flash CS3 には、ボタン、チェックボックス、その他様々なコンポーネントが含まれています。Flex のコンポーネントは利用すると Flash のサイズが超肥大化してしまうため、シンプルなコンポーネントを使いたい場合、Flex SDK 等からも Flash CS3 のコンポーネントを使えると楽になるのですが、やり方が載ってません。適当に Flash CS3 の *.swc をコピーしても catalog.xml にのってないよとかでエラーになってしまいます。 というわけで調べてみたら我らがコリン・ムックが moockblog: How to Use Flash CS3's V3 Components in Flex Builder でやり方を書いていたので紹介。一番簡単な Flash のコンポーネントを含む swc を作るには Flash CS3 を起動し、利用するコンポーネントをドラ

http://coderepos.org/share/browser/lang/vim/ack/plugin/ack.vim vim で、カレントディレクトリ以下のファイルから文字列を検索し、quickfix リストで眺めたいとき " :vim は :vimgrep の省略 :vim /foo/j **/* :cwinと毎回打っていたんですが、面倒だったりバイナリファイルにマッチすると遅くなったりしてしまったりしてしまうため、コマンドラインからソース検索でよく使う ack を利用し、検索結果があれば quickfix を表示する(カーソル移動はしない) vim plugin の ack.vim を作りました。 :Ack foo " カレントディレクトリ以下のすべてのファイルから文字列 foo を検索 :Ack --perl use " カレントディレクトリ以下の perl コードから文字列

現在は m4i さん作のcdd を tmux, bash, multi session +α に対応した - カワイイはつくれる のcddを使うのがオススメです。 screen を使ってると、別の作業している WINDOW のカレントディレクトリに移動したくなることってありませんか？私は月1000回ぐらいあります。で、毎回手動で打つのがめんどくさくなってきたので zsh スクリプト書いてみたら思っていた以上に便利だったので、汚いスクリプトですが公開します。 http://svn.coderepos.org/share/lang/zsh/cdd/cdd 使い方は、上記スクリプトを checkout したりダウンロードしたりしてから、.zshrc に autoload -U compinit compinit source ~/path/cdd # (cdd はこのファイル) するを追加します

という内容で、Coolin Moock さんを囲むの会で as3gettext の発表してきました。アウェイな発表が出来て良かったです(ぇー)。コリンさんは日本語もうまく(ギザとかテラとか使えるレベル)、ジョークを交えながらトークしてくれて面白かったです。まだ普段あまり会えなかった ASer の方々と懇談会などでお話しできて楽しかったです。ありがとうございました。 AS3 アプリケーションの国際化 と時間があったらその他… 自己紹介 舘野祐一 id:secondlife はてなエンジニア ActionScript3 JavaScript Ruby Shibuya.js 開いてます ActionScript と自分 AS 歴 AS3 から Flash に入って約一年 開発環境 Flex2/Flex3 SDK + rascut + vim ActionScript と仕事 JS/AS のブリッ

さてさて、本日リリースされたはてなハイクですが、実は一昨日にはお絵描き機能がありませんでした。リリース日の前日の朝、id:jkondo がすっごくニコニコしながら(ニコニコしてるときは大抵なにかしてもらいたいときだ！騙されるな！)ねーねーと声をかけてきました。 「jkondo: シンプルなお絵描き機能があったら絶対面白いねん！実現出来ないかなぁ(ニコニコ)。」 突然！しかもリリースは明日ですよシャチョー！でもこんなシチュはエンジニアなら燃え(萌え)ますよね。Ruby など LL を弄ってる(今回はAS3だけど)と、出来るだけ短い期間でどれだけの物を作れるかというのは熱くなれる瞬間です。はてなは作ったら即座にサービスに反映してくれるので、自分の思想と合った物なら作るモチベーションもぐんぐん上がります。 というわけでミニマムな機能だけ最低限実装することにして、サーバサイドは Fotolife

http://github.com/hotchpotch/as3rails2u/tree/master/src/com/rails2u/bridge/JSProxy.as AS3 から HTML の特定要素の内容を取得したり JS のメソッドを引数つけて呼び出したり、値をセットしたりがめんどくさくなってきたので作ってみました。 JSProxy.proxy もしくは new JSProxy() で JSProxy のインスタンスを作り、適当にプロパティを呼び出していって(この時点ではスタックにどういう処理を行うかを書いてるだけ)、最後JSを本当に叩いて値を取得やメソッド呼び出しを行いたいときは、プロパティの頭に $ をつけます。 // アラート関数を実行 JSProxy.proxy.$alert('foo'); // body の本文を取得 var body:String = JSProxy

キーワードを弓で打って遊ぶ、「PATAPON(パタポン)」オリジナルミニゲームの提供開始について【12/16(日)まで】 - はてなダイアリー日記 12月10日(月)から12月16日(日)までキーワードページで PSP用ゲームソフトパタポンのミニゲームを遊ぶことが出来ます。まだ遊んだことが無い方は、是非遊んでみてください:D。 自分はこのミニゲームで、キーワードの位置情報を利用したミニゲームシステムの考案からゲーム内容、レイアウト等のデザインからサーバサイドの実装まで、ほぼ最初から最後までかなり自由に作らせて貰いました。 以前からはて☆すた OPなんかでやっていた Flash を背景透過にして、ブラウザ内部に全画面表示させ、レンダリングされてる HTML コンテンツ(位置や文字情報)などをサーバサイドを通さず、直接 Flash からアクセスしてなんか作ってみたいなー、と思っていたのでそれが

ExportJS (ソース) 通常 flash では、コンパイル済みのオブジェクトの変数やプロパティは外部から弄ることが出来ず*1、パラメータの微調整を行うことや、現在プロパティにどんな値が設定されているかは解りません。ので Firefox の JavaScript から AS3 のオブジェクトを JavaScript にエキスポートして簡単に弄れる ExportJS というライブラリを作ってみました。現在は Firefox の JS 専用です。*2 なにはともあれまずは Demo を。 http://as3exportjs.googlecode.com/svn/trunk/demo/ExportJS_Example1.htm リアルタイムに TextField を変更したり、メインのオブジェクトを弄ったり、shape のパラメータを変えています。Firefox の setter/gett

本日リリースされたMML記法ですが、実は適当な文章を入れるだけでもメロディーを再生しちゃうことが出来ます。ポイントは アルファベットがたくさんある方が良い ; とかが適当に文章にあると複数の音が鳴ったりする 一行目に t240 と入れておくとテンポが速くなって良いことが多い あたりでしょうか。さてみなさんも自分の日記本文のメロディーを楽しんでみてはいかがでしょうか。ちなみに↓のは自分の昔の日記、vim7の新機能 Omni completionのメロディです。なんかおもしろーい。 t240 vim7の新機能 Omni completion これヤバス！eclipseなどでおなじみのインテリジェンスな補完を提供する機能みたい。詳しくは:h new-omni-completion で。今のところCとXHTMLとCSSしか用意されてないんで、htmlで早速使ってみた。機能はこんな感じ。 after

http://coderepos.org/share/wiki/JSMML テキスケ: ActionScript日記 - サウンドのリアルタイム生成（４） で公開されている、Flash から MML を再生できるライブラリ、 FLMML が素晴らしすぎるので、JavaScript からも再生できるようにブリッジを書いてみました。ライブラリ名は JSMML(まんま)。 JSMML を使うと、SWF を経由して JS な API から MML を再生できるようになります。 <script type="text/javascript" src="JSMML.js"></script> <script type="text/javascript"> JSMML.swfurl = 'JSMML.swf'; // default // onLoad に関数を入れておくと、SWF のロード完了時に呼ばれ

http://svn.coderepos.org/share/lang/javascript/jstweener/trunk/examples/mtypo_bezier.html http://svn.coderepos.org/share/lang/javascript/jstweener/trunk/examples/mtypo.html JSTweener の機能追加と同時に、もちょっとサンプルになんか作ってみようかな、ということでモーションタイポグラフィーで遊んでみました。思ったよりは重くなかった感じです。半透明にすると重くなるかな、と思いきやどのブラウザでも割と普通に。 でも JS だと一文字一文字の横幅を正確に求めることができず(IEでできるのかな)、破壊的な動きなら出来るんですけど、あらかじめレンダリングされるであろう場所に文字を吸着とかかなり難しそうな感。 JSTweene