WebTecNote - Javascript Archive

楽天には店長の部屋Plus+っていう店長ブログがあるんだけど、なぜかどこのショップもRSS表示をショップに表示していないから不思議に思ってたんだ。
よくみるとドメインが違うんだよね。普通のJavaScriptで表示しようとすると面倒だけど、
Google先生の Google AJAX Feed API を使えば簡単に表示が出来ちゃうぞ。
JavaScriptとか分からない人向けに表示の仕方を書いておきます。

Comments: 0
Trackbacks: 0

[JavaScript] 選択された文字列を得る

2010-10-19 (火)
Javascript
selection

シャープが発表した電子書籍端末ガラパゴスの２０文字しかコピー出来ないという仕様があまりに衝撃的だったので、
実際２０文字ってどれくらいなの？というのが体感できるものを組んでみた。

Galápagos 20 - jsdo.it - share JavaScript, HTML5 and CSS

画面上で選択された文字列の取得方法はIEとその他でちょっと違うんだけど、
文字を選択する時のマウスの動かし方はマウスダウン→ドラッグで選択→マウスアップとなるので、イベントハンドラはonMouseupが妥当だと思います。

抜粋：

PLAIN TEXT

JavaScript:

if(!Browser.Engine.trident) {//IE以外
var selection = window.getSelection();
total = selection.toString().length;
}else{//IEの場合
var text = document.selection.createRange().text;
total = text.length;
}

window.getSelection()はSelectionオブジェクトを返します。
選択された文字や文字の長さなどが欲しい場合にはtoString()が必要です。
ＩＥの場合はdocument.selection.createRange()で、戻り値のRangeオブジェクトにあるtextプロパティが選択されている文字なので、そのままlengthが有効。

それにしても２０文字は少ないよね。

Comments: 0
Trackbacks: 0

[HTML5] Drag and Drop API のこと

2010-10-04 (月)
Javascript
HTML5API

HTML5のドラッグ＆ドロップはこれ書いてる時点でFirefox、Chrome、IEが対応。
しかしIEの場合はFileReaderとデータURI未対応だから全く面白みがない。

Drag出来るといってもMooToolsやjQueryなどで実装するようなぬるぬる動かすようなものではなく、
html5.jpのチェックページにあるツールのように、右から左へ受け流すようなことしか出来ない。
jQueryとの比較がこのサイトで見れる。

故にshapeshed.comのデモみたく、ゴミ箱にドキュメントを捨てたり、カートに商品を入れたりする用途には向いているが
自由奔放にドラッグさせるとなるとFrameworkの力を借りるより他ない。

サンプルでよく見るのはコンピューターにあるファイルをブラウザウィンドウにドラッグして、
そのファイルの中身をFileAPIで読み込んでこねこねするっていうやつだと思う。
以下に簡単なサンプルを示す。

Comments: 0
Trackbacks: 0