ＳＱＬの窓
TOP / Firefox
<< 1 2 3 4 >>

2011年08月26日


Firefox6 : 気になる変更点、postMessage のオブジェクト引き渡しと、アドレスバーのスクリプトの直接入力

Firefox 6 for developers - MDN Docs

上記リンク先では、全ての変更点が記述されており、いろいろ興味ある内容が
列挙されていますが、最も気になったのが以下です。


window.postMessage() メソッドが structured clone algorithm
を使用するようになり、あるウィンドウから他のウィンドウに
文字列ではなく JavaScript オブジェクトを渡せるようになりま
した


これは実際にやってみると解りますが、使えるべきところに間に合って
なかったというのが実際で、オブジェクトが渡せるようになるととても
簡単にクロスドメインのデータ交換が楽になります。

関連する記事

IFRAME で埋め込んだ外部コンテンツから
情報を取得する事ができる postMessage インターフェイス

あと、一見「ブックマークレット」が動かないように思える記述がありますが、
アドレスバーに直接入力した時のみそういう仕様であり、HTML 上に既に記述さ
れてあるものは、動作します。その延長であるブックマークレットも動作しま
した。


•セキュリティの観点から、ユーザーがロケーションバーに
data: URI と javascript: URI を入力した時、現在のページ
のセキュリティコンテキストを受け継がなくなりました。
代わりに、新しい空のセキュリティコンテキストが生成され
ます。これにより、ロケーションバーに入力した javascript: URI
から読み込まれたスクリプトは、DOM メソッドなどへのアク
セスを持たなくなります。
しかし、これらの URI がスクリプトから使用された場合は、
これまでと同じように動作します。
タグ：postMessage
posted by lightbox at 2011-08-26 15:29 | Firefox | このブログの読者になる | 更新情報をチェックする

2011年08月25日


Firefox で localStorage を編集するアドオン



https://addons.mozilla.org/en-US/firefox/addon/firestorage/

上のような非常にシンプルなものですが、削除機能がバグで動かなかったり、入力フィールド
が狭かったりしたので、ダウンロードしたファイル( .xpi ) を、.zip に名称変更して、展開
してから中のソースコードを変更して使っています。

再度 .zip に書庫化し、.xpi に拡張子を変更して Firefox のページにドラッグ＆ドロップする
とインストールされます。

yllocalstorage.js

remove : function() {
	var list = document.getElementById("yllocalstorage-viewer-list");
	if(list.getSelectedItem(0) != null) {

		var uri = ioService.newURI(content.location.href, "", null);
		var principal = securityManager.getCodebasePrincipal(uri);
		var localStorage = domStorageManager.getLocalStorageForPrincipal(principal, "");
//		dump(list.getSelectedItem(0).firstChild.attributes + "\n");
//		for(x in list.getSelectedItem(0).firstChild.firstChild) {
//			dump(x + "\n");
//		}
		
		localStorage.removeItem(list.getSelectedItem(0).firstChild.firstChild.value);
	}
	this.refresh();
},


cell2.setAttribute('ondblclick', 'this.firstChild.setAttribute("style","display: none"); this.lastChild.setAttribute("style","width:600px;");  this.lastChild.select();');
タグ：localStorage
posted by lightbox at 2011-08-25 15:53 | Firefox | このブログの読者になる | 更新情報をチェックする

2011年05月22日


Firefox4 専用。XMLHttpRequest を使用した複数ファイルのアップロード

元は、Using files from web applications - MDC Docs にあるサンプルの
★ Handling the upload process for a file を使用していますが、できる
限りシンプルになるように変更しています。PHP 側は POST の生データを受
け取ってファイル化するだけですが、ファイル名を渡す為に URL に付加して
$_GET を使えるようにしています

これと組み合わして、Firefox4 : ローカルPCからファイルをドラッグドロップして
ファイルの中身を使用する事ができます を使うと、ドラッグドロップでファイルを簡
単にアップロードする事も可能です

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
</head>
<body>

<input
	type="file"
	id="fileElem"
	multiple="true"
	accept="image/*"
	style="display:none"
	onchange="handleFiles(this.files)"
>  
<a href="#" id="fileSelect">複数ファイルの選択</a>

<script type="text/javascript">
// ファイル選択呼び出し用のリンク
var fileSelect = document.getElementById("fileSelect");
// クリックイベントの登録
fileSelect.addEventListener("click", function(e) {
	if (fileElem) {
		fileElem.click();
	}
	e.preventDefault(); // "#" での動きをキャンセルする
}, false);

// 非表示のファイル選択フィールド
var fileElem = document.getElementById("fileElem");

// 選択時のイベント
function handleFiles(files) {

	// アップロード用
	var xhr = new XMLHttpRequest();

	var fileList = files;

	// Firebug で表示
	for( var i = 0; i < fileList.length; i++ ) {
		// コードを簡単にする為に、同期処理
		xhr.open("POST", "upload.php?fn="+fileList[i].fileName, false);
	    xhr.sendAsBinary(fileList[i].getAsBinary());

		console.log(xhr.responseText);
	}

}
</script>


</body>
</html>



upload.php

<?
session_start();
if ( $_SESSION['cnt'] == '' ) {
	$_SESSION['cnt'] = 0;
}
$_SESSION['cnt']++;
$file_cnt = "upload".$_SESSION['cnt'];

// hp://input は、POST の生データの読み込みを 許可します。
// enctype="multipart/form-data" に対しては 使用できません。 
$fp = fopen( "php://input", "rb" );
$wfp = fopen( $_GET['fn'], "wb" );

while( $ret = fread( $fp, 4096 ) ) {

	fwrite( $wfp, $ret );

}

fclose($wfp);
fclose($fp);


print $_GET['fn'] ."($file_cnt)\n";
?>
で画像が保存されました
posted by lightbox at 2011-05-22 10:41 | Firefox | このブログの読者になる | 更新情報をチェックする

Firefox4 : 複数選択ファイルアップロードの準備

Using files from web applications - MDC Docs の最初の
★ Using hidden file input elements using the click() method
に沿って、ファイルアップロード用の複数選択のファイルフィールド
を作成して、選択結果を console.log で表示しています。

※ Google Chrome での動作を確認しました
( 但し、Google Chrome の場合非表示ではダイアログが出ません )

<input
	type="file"
	id="fileElem"
	multiple="true"
	accept="image/*"
	style="display:none"
	onchange="handleFiles(this.files)"
>  
<a href="#" id="fileSelect">複数ファイルの選択</a>

<script type="text/javascript">
// ファイル選択呼び出し用のリンク
var fileSelect = document.getElementById("fileSelect");
// クリックイベントの登録
fileSelect.addEventListener("click", function(e) {
	if (fileElem) {
		fileElem.click();
	}
	e.preventDefault(); // "#" での動きをキャンセルする
}, false);

// 非表示のファイル選択フィールド
var fileElem = document.getElementById("fileElem");

// 選択時のイベント
function handleFiles(files) {
	var fileList = files;

	// Firebug で表示
	for( var i = 0; i < fileList.length; i++ ) {
		console.log(fileList[i].fileName);
	}
}
</script>
posted by lightbox at 2011-05-22 09:27 | Firefox | このブログの読者になる | 更新情報をチェックする

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 | このブログの読者になる | 更新情報をチェックする
<< 1 2 3 4 >>
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定＞ 詳細設定＞ ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

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

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

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

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


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

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


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

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

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>


この記述は、以下の場所で使用します



Powered by Seesaa
container 終わり



✅ フリーフォントで簡単ロゴ作成
✅ フリーフォントでボタン素材作成
✅ フリーフォントで吹き出し画像作成
✅ フリーフォントではんこ画像作成
✅ ほぼ自由に利用できるフリーフォント
✅ フリーフォントの書体見本とサンプル
✅ 画像を大きく見る為のウインドウを開くボタンの作成
✅ CSS ドロップシャドウの参考デモ
✅ イラストAC
✅ ぱくたそ
✅ 写真素材 足成
✅ フリーフォント一覧
✅ utf8 文字ツール
右サイド 終わり
base 終わり