SQLの窓

2011年03月28日


Firefox4 : ローカルPCからファイルをドラッグドロップしてファイルの中身を使用する事ができます

他にも WEB アプリケーションで使いたい機能はありますが、まず一番簡単で誰でも利用してみたいと思う機能です。特に、getAsText() はいとも簡単にデータをインポートする方法なので、localStorage とあわせて使うととても威力のあるツールを作成する事ができます。

ファイル名はパスを含みませんが、複数ファイルをドラッグドロップできるので、利用方法はいろいろ想像できます。メソッドは以前からあるようなのですが、ドラッグドロップとあわせて使う事によって幅が広がっています。

getAsDataURL() メソッドはファイルの内容が base64 にエンコードされて取得され、getAsBinary() メソッドはその名のとおり、バイナリです。まだ詳細をチェックしていませんが、当然画像で使う事になるのでしょう
<div id="dropbox" style='border:solid 1px #000000;width:100;height:30px;'></div>
<script type="text/javascript">
var dropbox;

dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragenter", function(event){
	event.stopPropagation();
	event.preventDefault();
}
, false);
dropbox.addEventListener("dragover", function(event){
	event.stopPropagation();
	event.preventDefault();
}
, false);
dropbox.addEventListener("drop", function(event){
	event.stopPropagation();
	event.preventDefault();

	var dt = event.dataTransfer;  
	var files = dt.files;

	for (var i = 0; i < files.length; i++) {
		var file = files[i];
		console.log(file.fileName);
		console.log(file.fileSize);
		console.log(file.getAsText("shift_jis"));
		console.log(file.getAsDataURL());
		console.log(file.getAsBinary());
		console.log(file.name);
		console.log(file.size);
		console.log(file.type);
	}

}
, false);
</script>

このコードは リアルタイム html ですぐテストできます。
※ Firebug を使ってお試し下さい。(Firebugを開いてから「ページ作成」してドラッグドロップ)

関連する mozilla ドキュメント

Selecting files using drag and drop





posted by lightbox at 2011-03-28 00:27 | Firefox | このブログの読者になる | 更新情報をチェックする

2011年03月26日


Firefox 4.0 のオレンジ色のアプリケーションメニューとメニューバー

Updating extensions for Firefox 4 - MDC Doc Center

英文ですがこんなふうに書かれています。
Windowsでは、メニューバーはデフォルトで非表示になっています。

代わりに、簡略化されたFirefoxのアプリケーションメニューを開く事ができます。 
このメニューは、アプリケーションの最もよく使われるメニュー機能が含まれています。

メニューバーはまだAltキーを押すことによってアクセスすることができます。
既存のアプリケーションの中にはメニューバーからしかアクセスできないものが あるので、必要に応じてこの「アプリケーションメニュー」にオーバレイする必 要がある事が示されています。 それ以外にも、そこへ到達するのにアクションが煩雑に思えるものも出て来る可 能性があるので、ここでその変更例を一つ示します。
<?xml version="1.0"?>
<!DOCTYPE window SYSTEM "chrome://confmania/locale/confmania.dtd">

<overlay id="confmania-Overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <script type="application/javascript" src="chrome://confmania/content/browser-Overlay.js"></script>
  <commandset id="mainCommandSet">
    <command id="ConfMania:Open" oncommand="window['ConfMania'].open()"/>
  </commandset>
  <menupopup id="menu_ToolsPopup">
    <menuitem id="confmania" command="ConfMania:Open"
              label="&confmania.label;" insertafter="menu_preferences"/>
  </menupopup>
  
  <vbox id="appmenuPrimaryPane">
    <menuitem id="appmenu_confmania" command="ConfMania:Open"
              label="&confmania.label;" insertafter="appmenu_webDeveloper"/>
  </vbox>
</overlay>

これは、Configuration Mania の呼び出しをアプリケーションメニューに
追加したものですが、insertafter="appmenu_webDeveloper" が位置を示していて、
appmenu_webDeveloper は、WEB開発メニューです。他の位置にセットしたい場合は、
chrome://browser/content/browser.xul をアドレスバーに入力して開いて、
Firebug(HTMLタブ) で Firefox の基本構成を調査して対象を決めて下さい。




関連する記事

実行の入り口であるメニューの位置のカスタマイズ


posted by lightbox at 2011-03-26 20:35 | Firefox | このブログの読者になる | 更新情報をチェックする

Firefox 4.0 限定機能らしい「XPIファイルを展開しない」というオプション変更できる Configuration Mania というアドオン

Configuration Mania :: Add-ons for Firefox



Firefox が 4.0 になって、「アドオン」の格納方法が変わってました
で思った事を掘り下げて行くとこういう事でした。正式な情報は未確認ですが、これをチェックするといままで通り展開され、ものによっては展開されていたのはこのオプションを使っていたのでしょうね。

で、中を見てみると単純で about:config で確認できるオプションの
「extensions.alwaysUnpack」をチェックボックス化していただけでした。正式ドキュメントは見つける事ができませんでしたが、見たままですしそのへんは適当にどうぞ・・・という感じなのでしょうか。

about:config から変更すると、Configuration Mania のほうも変更されました。但し、既に xpi でインストール済のものは変更されずにオプション変更以降に再インストールまたはアップグレードで展開されるようです。

・・・・いや、だとするとインストール時にのみ展開するというオプションが必要になるはずだと言う事ですが、ここんところは解りません。
※ install.rdf に <em:unpack>true</em:unpack> をセットします


日本語化の為に、

Nightly Tester Tools を再インストールしました。id は、{8620c15f-30dc-4dba-a131-7c5d20cf4a29} となっていますので、その中のchrome\locale\en-US に入って、nightly.dtd を開いて "Open Profile Folder" を"プロファイルフォルダを開く" と変更して、UTF8N で保存して下さい。
※ {8620c15f-30dc-4dba-a131-7c5d20cf4a29} が固定なのかどうかは未確認

本来(正式には) locale フォルダに日本語用のフォルダやファイルを作るのですが配布目的でもなければそこまでしなくてもいいと思います。ただ、再インストールしてしまうと(含バージョンアップ)元に戻ってしまうので、変更した dtd は保存しておくいいと思います。





posted by lightbox at 2011-03-26 19:27 | Firefox | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり