<h3>まんがタイムはてな</h3>
<p><a href="http://f.hatena.ne.jp/kumajet/20100518133017"><img src="http://cdn-ak.f.st-hatena.com/images/fotolife/k/kumajet/20100518/20100518133017.png" alt="f:id:kumajet:20100518133017p:image" title="f:id:kumajet:20100518133017p:image"></a></p>
<p><a href="http://d.hatena.ne.jp/kumajet/">d:id:kumajet</a> 先生の次回作にご期待下さい！</p>

まんがタイムはてなf:id:kumajet:20100518133017p:imaged:id:kumajet 先生の次回作にご期待下さい！

まんがタイムはてな

<p>ブックマークレットをかんたんに作成・公開できるラボサービス、その名も Hatena::Let を作りました。</p>
<ul>
<li><a href="http://let.hatelabo.jp/">http://let.hatelabo.jp/</a></li>
</ul>
<p>未だにブックマークレットを作るときには、アドレスバーに javascritp:... を打ち込んで実行したり、 Firebug で実行して試しつつも外部の bookmarklet 化サービスを使って文字列削ったり、IE対策のため500ちょい文字を超えると gist にファイルを置きつつもおきまりの var script = document.createElement('scrit');... で JS のローダー書いたり、とやりたいことは同じなのにめんどくさい手順を毎回行っていたました。<br>
ここらへんの手順を毎回繰り返すことなくさくっと作って公開したい！と思い <a href="http://blog.hatena.ne.jp/cho45/"><img src="http://cdn1.www.st-hatena.com/users/ch/cho45/profile.gif" alt="">id:cho45</a> と半年ぐらい前の開発合宿<a href="#f1" title="はてな恒例の開発合宿。サービスのアイデアを2-3日の合宿で実装します">*1</a>で作って眠らせていたのを、ちょっと週末手を入れてリリースしました！</p>
<p>以下に Hatena::Let の便利な所をピックアップしてみました。</p>
<h4>Debuglet で開発しつつ実行</h4>
<p>作成時、Debuglet というブックマークレット開発用のブックマークレットを入れることで、Web 上の編集フォームで編集(リアルタイムでサーバに保存されます)している JS を実行できます。<br>
またこの Web 上の編集フォームは、ブラウザの JS パーサを利用してリアルタイムで JS の Syntax をチェックしており、間違った文法を入力すると背景がピンクに変わります。</p>
<h4>@require で外部 JS ファイルをロード</h4>
<p>ブックマークレット利用時、jQuery などライブラリを利用したいと思ったことはありませんか！？そんなときはあら不思議！@require に読み込みたいJSのスクリプトを記述するだけでスクリプトを読み込んでくれ、なおそのライブラリの読み込みが終了したら記述したコードを実行してくれるのです。<br>
通常ブックマークレットで外部スクリプトを読み込んだ後に JS を実行したい場合は</p>
<ul>
<li>スクリプトを読み込み
<ul>
<li>読み込み完了を正確に調べるには、onload (IE以外) や onreadystateschange(IE) でチェックが必要</li>
</ul>
</li>
<li>別のスクリプトがある場合はまた逐一読み込み</li>
<li>全部ロードし終わってから実行</li>
</ul>
<p>とめんどくさいコードを書く<a href="#f2" title="以前 [[http://subtech.g.hatena.ne.jp/secondlife/20091106/1257475654:title]]という汎用的な loader を書いてみました">*2</a>必要があるのですが、それらは @require <a href="http://.../example.js">http://.../example.js</a> と書くだけで完了で超お手軽です。<br>
また @require <a href="http://.../example.css">http://.../example.css</a> と書くと css も適用してくれます。</p>
<h4>コードを圧縮、文字が多いときは外部ファイルとしてロード</h4>
<p>まずブックマークレットとして書いたコードは <a href="http://search.cpan.org/dist/JavaScript-Squish/">JavaScritp::Squire</a> を使い圧縮され、IE のアドレスバーに打ち込めるの文字数限界以下の時は javascript:(圧縮されたコード) の形で出力されます。<br>
しかし文字列を圧縮してもIE限界文字数を超える場合は、外部 JS ロードとしてロードするコードに自動で切り替わりブックマークレットが作成されます。</p>
<h4>プライベートなブックマークレットとして利用</h4>
<p>公開する以外にも、@private と記述することによりプライベートなブックマークレットとして利用ができます。なおこの @private によるプライベートは『URL が他の人は直接アドレスが解らないと閲覧できない』プライベートであり、permalink に直接アクセスすると誰でも閲覧ができます。そのため、知り合いとだけ利用するブックマークレットの作成などに利用することができます。</p>
<h4>はてなダイアリー・グループでも利用できるウィジェット機能</h4>
<p>作成したブックマークレットには、iframe 形式のウェジェットが表示されます。これを自分のブログやはてなダイアリー・グループに張ることでかんたんにブックマークレットの公開ができます！<br>
はてなダイアリーでは今までセキュリティの問題から javascript スキームを使ってのブックマークレットの公開ができませんでしたが、Hatena::Let を使うと安全なドメイン <a href="#f3" title="let.st-hatelabo.com というはてなの認証情報を一切利用してないドメイン">*3</a> にブックマークレットが置かれるために利用することができるようになりました。</p>
<h4>例: はて☆すた を Hatena::Let で書き直してみる</h4>
<p>以前作った<a href="http://d.hatena.ne.jp/secondlife/20070913/1189691401">はて☆すた</a>というブックマークレットを Hatena::Let で書き直してみます。 元のソースはコレ。</p>
<ul>
<li><a href="http://rails2u.com/misc/hatesuta.js">http://rails2u.com/misc/hatesuta.js</a></li>
</ul>
<p>まず SWFObject という swf 書き出しのためのライブラリを読み込んで、その後 window.SWFObject があるかどうかを setInterval でチェックしつつ自前の処理を開始します。また他のライブラリはよみまずに、地道にで座標計算や scroll の調整を行ってますね。<br>
今回は SWFObject は @require で読み込んで座標計算などは jQuery に任せましょう。するとライブラリ読み込み処理は頭のコメントのメタデータに書くだけですね。あとはいつもの通り普通にコード書けば完了です。スコープは自動で無名関数内部で実行されるので、自分で(function(){})(); とか書く必要はありません。<br>
できたソースコードは以下です。だいぶシンプルになりましたね。</p>
<ul>
<li><a href="http://let.hatelabo.jp/secondlife/let/gYC-xpO2uIvsEQ">http://let.hatelabo.jp/secondlife/let/gYC-xpO2uIvsEQ</a></li>
</ul>
<p>またはてダにもこんな感じで貼り付けることができます。わお、かんたん！</p>
<iframe border="0" frameborder="0" height="130" src="http://let.st-hatelabo.com/secondlife/let.iframe?embed=1&amp;code_id=gYC-xpO2uIvsEQ" width="500"></iframe>
<p>以上、公開した <a href="http://let.hatelabo.jp/">Hatena::Let</a> の紹介でした。便利だと思うので、開発者の方は是非使ってみてください！</p>
<p><a href="#fn1">*1</a>:はてな恒例の開発合宿。サービスのアイデアを2-3日の合宿で実装します</p>
<p><a href="#fn2">*2</a>:以前 [[<a href="http://subtech.g.hatena.ne.jp/secondlife/20091106/1257475654:title%5C%5D%5C%5D%E3%81%A8%E3%81%84%E3%81%86%E6%B1%8E%E7%94%A8%E7%9A%84%E3%81%AA">http://subtech.g.hatena.ne.jp/secondlife/20091106/1257475654:title\]\]という汎用的な</a> loader を書いてみました</p>
<p><a href="#fn3">*3</a>:let.st-hatelabo.com というはてなの認証情報を一切利用してないドメイン</p>

ブックマークレットをかんたんに作成・公開できるラボサービス、その名も Hatena::Let を作りました。http://let.hatelabo.jp/未だにブックマークレットを作るときには、アドレスバーに javascritp:... を打ち込んで実行したり、 Firebug で実行して試しつつも外部の bookmarklet 化サービスを使って文字列削ったり、IE対策のため500ちょい文字を超えると gist にファイルを置きつつもおきまりの var script = document.createElement('scrit');... で JS のローダー書いたり、とやりたいことは同じなのにめんどくさい手順を毎回行っていたました。ここらへんの手順を毎回繰り返すことなくさくっと作って公開したい！と思い id:cho45 と半年ぐらい前の開発合宿はてな恒例の開発合宿。サービスのアイデ

ブックマークレットをかんたんに作成・公開できるラボサービス、その名も Hatena::Let を作りました。http://let.hatelabo.jp/未だにブックマークレットを作るときには、アドレスバーに javascritp:... を打ち込んで実行したり、 Firebug で実行して試しつつも外部の bookmarklet 化サービスを使って文字列削ったり、IE対策のため500ちょい文字を超えると gist にファイルを置きつつもおきまりの var script = document.createElement('scrit');... で JS のローダー書いたり、とやりたいことは同じなのにめんどくさい手順を毎回行っていたました。ここらへんの手順を毎回繰り返すことなくさくっと作って公開したい！と思い id:cho45 と半年ぐらい前の開発合宿はてな恒例の開発合宿。サービスのアイデアを2-3日の合宿で実装しますで作って眠らせていたのを、ちょっと週末手を入れてリリースしました！以下に Hatena::Let の便利な所をピックアップしてみました。Debuglet で開発しつつ実行作成時、Debuglet というブックマークレット開発用のブックマークレットを入れることで、Web 上の編集フォームで編集(リアルタイムでサーバに保存されます)している JS を実行できます。またこの Web 上の編集フォームは、ブラウザの JS パーサを利用してリアルタイムで JS の Syntax をチェックしており、間違った文法を入力すると背景がピンクに変わります。@require で外部 JS ファイルをロードブックマークレット利用時、jQuery などライブラリを利用したいと思ったことはありませんか！？そんなときはあら不思議！@require に読み込みたいJSのスクリプトを記述するだけでスクリプトを読み込んでくれ、なおそのライブラリの読み込みが終了したら記述したコードを実行してくれるのです。通常ブックマークレットで外部スクリプトを読み込んだ後に JS を実行したい場合はスクリプトを読み込み読み込み完了を正確に調べるには、onload (IE以外) や onreadystateschange(IE) でチェックが必要別のスクリプトがある場合はまた逐一読み込み全部ロードし終わってから実行とめんどくさいコードを書く以前 [[http://subtech.g.hatena.ne.jp/secondlife/20091106/1257475654:title]]という汎用的な loader を書いてみました必要があるのですが、それらは @require http://.../example.js と書くだけで完了で超お手軽です。また @require http://.../example.css と書くと css も適用してくれます。コードを圧縮、文字が多いときは外部ファイルとしてロードまずブックマークレットとして書いたコードは JavaScritp::Squire を使い圧縮され、IE のアドレスバーに打ち込めるの文字数限界以下の時は javascript:(圧縮されたコード) の形で出力されます。しかし文字列を圧縮してもIE限界文字数を超える場合は、外部 JS ロードとしてロードするコードに自動で切り替わりブックマークレットが作成されます。プライベートなブックマークレットとして利用公開する以外にも、@private と記述することによりプライベートなブックマークレットとして利用ができます。なおこの @private によるプライベートは『URL が他の人は直接アドレスが解らないと閲覧できない』プライベートであり、permalink に直接アクセスすると誰でも閲覧ができます。そのため、知り合いとだけ利用するブックマークレットの作成などに利用することができます。はてなダイアリー・グループでも利用できるウィジェット機能作成したブックマークレットには、iframe 形式のウェジェットが表示されます。これを自分のブログやはてなダイアリー・グループに張ることでかんたんにブックマークレットの公開ができます！はてなダイアリーでは今までセキュリティの問題から javascript スキームを使ってのブックマークレットの公開ができませんでしたが、Hatena::Let を使うと安全なドメイン let.st-hatelabo.com というはてなの認証情報を一切利用してないドメイン にブックマークレットが置かれるために利用することができるようになりました。例: はて☆すた を Hatena::Let で書き直してみる以前作ったはて☆すたというブックマークレットを Hatena::Let で書き直してみます。 元のソースはコレ。http://rails2u.com/misc/hatesuta.jsまず SWFObject という swf 書き出しのためのライブラリを読み込んで、その後 window.SWFObject があるかどうかを setInterval でチェックしつつ自前の処理を開始します。また他のライブラリはよみまずに、地道にで座標計算や scroll の調整を行ってますね。今回は SWFObject は @require で読み込んで座標計算などは jQuery に任せましょう。するとライブラリ読み込み処理は頭のコメントのメタデータに書くだけですね。あとはいつもの通り普通にコード書けば完了です。スコープは自動で無名関数内部で実行されるので、自分で(function(){})(); とか書く必要はありません。できたソースコードは以下です。だいぶシンプルになりましたね。http://let.hatelabo.jp/secondlife/let/gYC-xpO2uIvsEQまたはてダにもこんな感じで貼り付けることができます。わお、かんたん！以上、公開した Hatena::Let の紹介でした。便利だと思うので、開発者の方は是非使ってみてください！*1:はてな恒例の開発合宿。サービスのアイデアを2-3日の合宿で実装します*2:以前 [[http://subtech.g.hatena.ne.jp/secondlife/20091106/1257475654:title]]という汎用的な loader を書いてみました*3:let.st-hatelabo.com というはてなの認証情報を一切利用してないドメイン

ブックマークレットサービス・Hatena::Let を作りました

<p>HTML5 File API つかうとローカルファイルをブラウザに Drag したファイルをハンドリングして binary やら data スキームとして扱うことができ、Firefox 3.6 や Chrome 5 ですでに使えるというのを今さらながら知った<a href="#f1" title="http://gihyo.jp/dev/column/01/browser/chrome5 で知りました。なおこの記事すごいまとまっていてとても参考になりました。">*1</a>ので、はてなフォトライフにローカルファイルをブラウザにドラッグするだけでアップロードできる UserScript を作ってみまんた。</p>
<ul>
<li><a href="http://gist.github.com/raw/406281/drag_drop_fotouploader.user.js">http://gist.github.com/raw/406281/drag_drop_fotouploader.user.js</a></li>
</ul>
<p>WinXP + Firefox 3.6.3 で確認してますが OSX や Chrome5 などの環境で動くかは試してないので解りません。動作デモは以下の swf 動画を見てください。</p>
<ul>
<li><a href="http://rails2u.com/misc/fotolife_drag/">http://rails2u.com/misc/fotolife_drag/</a></li>
</ul>
<p>なんかすごい便利な…！今まで右クリック拡張でパスを取得していちいちフォームに入れてたのが、ドラッグするだけでいけて直感的に。<br>
また Flash は一切使わずにアップロードしてます。フォトライフ側のAPIを無理矢理使った感じなので、png/jpeg しかアップロードできず、また Exif のカメラ機種名などは無視される制限があります。<br>
参考にしたドキュメントですが、以下の MDC のを読めば十分な感じです。</p>
<ul>
<li><a href="https://developer.mozilla.org/en/Using_files_from_web_applications">https://developer.mozilla.org/en/Using_files_from_web_applications</a></li>
</ul>
<p>一応 progress イベントもとれるんですが、Flash のアップロードに比べていまいちイベントが発生しづらい感じはします。また POST + アップロードは xhr を生で触るとすごいやりにくいんですが、この辺はライブラリがたぶん解決してくれるようになるでしょう。File API 使った複数ファイルのアップローダライブラリとか出てきそうですね。<br>
またすごい直感的に扱えるAPIなので、dropbox などのファイルクラウドサービスの Web インターフェイスにもどんどん適用されていきそうで楽しみです。なお Gmail ではすでに対応しており、添付ファイルをかんたんに追加できてびっくりしました。</p>
<ul>
<li><a href="http://ajaxian.com/archives/drag-and-drop-file-uploads-in-gmail-using-just-the-specs">http://ajaxian.com/archives/drag-and-drop-file-uploads-in-gmail-using-just-the-specs</a></li>
</ul>
<p><a href="#fn1">*1</a>:<a href="http://gihyo.jp/dev/column/01/browser/chrome5">http://gihyo.jp/dev/column/01/browser/chrome5</a> で知りました。なおこの記事すごいまとまっていてとても参考になりました。</p>

HTML5 File API つかうとローカルファイルをブラウザに Drag したファイルをハンドリングして binary やら data スキームとして扱うことができ、Firefox 3.6 や Chrome 5 ですでに使えるというのを今さらながら知ったhttp://gihyo.jp/dev/column/01/browser/chrome5 で知りました。なおこの記事すごいまとまっていてとても参考になりました。ので、はてなフォトライフにローカルファイルをブラウザにドラッグするだけでアップロードできる UserScript を作ってみまんた。http://gist.github.com/raw/406281/drag_drop_fotouploader.user.jsWinXP + Firefox 3.6.3 で確認してますが OSX や Chrome5 などの環境で動くかは試してない

HTML5 File API つかうとローカルファイルをブラウザに Drag したファイルをハンドリングして binary やら data スキームとして扱うことができ、Firefox 3.6 や Chrome 5 ですでに使えるというのを今さらながら知ったhttp://gihyo.jp/dev/column/01/browser/chrome5 で知りました。なおこの記事すごいまとまっていてとても参考になりました。ので、はてなフォトライフにローカルファイルをブラウザにドラッグするだけでアップロードできる UserScript を作ってみまんた。http://gist.github.com/raw/406281/drag_drop_fotouploader.user.jsWinXP + Firefox 3.6.3 で確認してますが OSX や Chrome5 などの環境で動くかは試してないので解りません。動作デモは以下の swf 動画を見てください。http://rails2u.com/misc/fotolife_drag/なんかすごい便利な…！今まで右クリック拡張でパスを取得していちいちフォームに入れてたのが、ドラッグするだけでいけて直感的に。また Flash は一切使わずにアップロードしてます。フォトライフ側のAPIを無理矢理使った感じなので、png/jpeg しかアップロードできず、また Exif のカメラ機種名などは無視される制限があります。参考にしたドキュメントですが、以下の MDC のを読めば十分な感じです。https://developer.mozilla.org/en/Using_files_from_web_applications一応 progress イベントもとれるんですが、Flash のアップロードに比べていまいちイベントが発生しづらい感じはします。また POST + アップロードは xhr を生で触るとすごいやりにくいんですが、この辺はライブラリがたぶん解決してくれるようになるでしょう。File API 使った複数ファイルのアップローダライブラリとか出てきそうですね。またすごい直感的に扱えるAPIなので、dropbox などのファイルクラウドサービスの Web インターフェイスにもどんどん適用されていきそうで楽しみです。なお Gmail ではすでに対応しており、添付ファイルをかんたんに追加できてびっくりしました。http://ajaxian.com/archives/drag-and-drop-file-uploads-in-gmail-using-just-the-specs*1:http://gihyo.jp/dev/column/01/browser/chrome5 で知りました。なおこの記事すごいまとまっていてとても参考になりました。

A Day in the Life

まんがタイムはてな

まんがタイムはてな

関連するかもエントリー

書いている人

おたよりを送る