Tuesday, December 16, 2008

Firefox の新規blankページをカスタマイズ

カスタマイズと言ってもスタイルを適用するくらいですが。


できること

 背景色の変更や画像の表示ができます。
こちらのページ(FireFoxの空白ページを彩る「Dark Firefox」: DesignWorks)にあるようなものを全く一切の拡張機能なしで実現する方法を提案。
対応: Fx2 ~
(画像表示に対応しているのは2.0からでした)
一部拡張機能と競合します。Speed DialAuto Dial などをインストールした状態では効果はありません。

ユーザスタイルシートの利用

 具体的なやり方については、Fxのユーザスタイルシートを使います。

サンプルコード

@-moz-document url("about:blank") {
html {}
body {
margin: 0;
width: 100%;
height: 100%;
background: #000000
center no-repeat fixed;
background-image: url(chrome://branding/content/icon64.png); /* For Fx2 */
}
x:-moz-broken,
body {
background-image: url(./icon64.png); /* For Fx3 */
}
}
画像を配置する場合は、Fx3 ではchrome:// 以下にアクセスできない替わりにユーザスタイルシートからの相対パスが使えるので、<Profileのディレクトリィ>/chrome に画像をバンバン置きましょう。
Fx2 の場合は、相対パスが使えない替わりに chrome:// にアクセスできるので browser.jar の中に入れてしまいましょう。
表示サンプル

テキストを表示させる

 スタイルシートのみのカスタマイズですので、ページのコンテンツそのものは書き換えられないのですが、テキストを表示したい、というときは :before 擬似要素や :after 擬似要素を用いることでテキストの表示ができます。
@-moz-document url("about:blank") {
body {
margin: 0;
width: 100%;
height: 100%;
font-family: Verdana, Helvetica, sans-serif, Arial;
}
body:before {
content: "about:blank";
font-size: 140px;
font-weight: bold;
color: #ccccccc;
cursor: default;
}
html:after {
content: "Designed by Akanasu.c";
display: block;
height: 30px;
margin-top: -50px;
text-align: right;
font-size: 30px;
font-weight: bold;
color: #555555;
cursor: default;
}
}

表示サンプル

応用として

 html 要素と body 要素にそれぞれ別の背景画像を指定することでちょっと複雑な表現も可能です。

参考

Saturday, March 29, 2008

CTX - Screen Shot: スクリーンショット

右クリックメニュー(コンテキストメニュー)にタブ関連の項目を追加する Firefox 拡張機能 CTX スクリーンショット


インストールすると右クリックメニューに「タブを閉じる」「右タブに移動」「他のタブを閉じる」「Firefox を再起動」が追加されます.


設定から表示する項目を選択可能です.

Wednesday, March 26, 2008

右クリックメニューにタブ関連の項目を追加する Firefox アドオン Context Tab Access Menus 0.1 Released

 HTML エリアの右クリックメニュー(コンテキストメニュー)に『タブを閉じる』『右タブに移動』などの項目を追加する Firefox Extension(拡張機能).

 Firefox ブラウザにはタブブラウジングの様々なショートカットキーが用意されていますが,マウスのみで操作するときにはコンテキストメニューから色々操作できた方がいいと思い拡張機能 Context Tab Access Menus (CTX) を作りました.
 個人的にはマウスジェスチャよりも,分かりやすい,簡単,確実,初心者向けと考えています.

# 自分はマウスジェスチャ好きではないので.
# ネーミングセンス0です.

ダウンロード

 ダウンロードページは下記 URL から.

 現在,Firefox Add-ons アカウントをお持ちの方のみのダウンロードとなっています.
 テストユーザ,レヴュー記事を書いてくださる方を募集しています.

Firefox をダウンロード
 

開発版ダウンロード
 開発版は以下から.

 アカウントをお持ちでない方はこちらから最新版をダウンロードしてください. ヴァージョンは同一のものとなっております.

ver. 0.1 で実装されている機能

    メニュー項目
  • タブを閉じる
  • ウィンドウを閉じる
  • 右タブに移動
  • 左タブに移動
  • 右タブを閉じる
  • 左タブを閉じる
  • 右タブを閉じる
  • 他のタブをすべて閉じる
  • Firefox を再起動

    その他
  • 上記メニュー項目毎の表示・非表示の設定(ツール<アドオン の「設定」から)
  • テキスト選択中のメニュー項目の非表示
  • テキストエリア上でのメニュー項目の非表示
  • 複数タブが開けれているときのみタブ関連の項目の表示

ロケール

 以下の2種類のロケールを用意しております
  • en-US(英語)
  • ja-JP(日本語)

# 無償で英語の添削をしてくれる方, 他言語に精通している方募集中!


今後考えている実装

 ただし,今後も開発を進めていくかは…….
    メニュー項目
  • 最近閉じたタブ(サブメニューに表示)
  • 一つ前のタブに戻る
  • 直前に開いたタブに移動
  • 直前に開いたタブを閉じる

    その他
  • 追加機能丸ごとサブメニュー化(設定で切替え)
  • 他拡張機能の利用
  • ユーザが自由に項目を追加・削除できるようにする?(そういうの別にあったような……)

開発方針

 基本的に機能をゴリゴリ付け加えるのではなく,標準で用意されている関数などにアクセスするメニューを追加する.
 従って,Fx2.0 から追加された「最近閉じたタブ」メニューを追加する場合,それまでのヴァージョンには非対応になると思います.

 ソースは公開です. 上記 URL からダウンロードしたファイル(.xpi:ZIPファイルの拡張子を変更したもの)を解凍してください.
 技術情報は追って当ブログで公開していきます. - フィード

リファレンス

 開発に当たり大半のスクリプトは以下の情報を参考に致しました.
 というか,軽量マウスジェスチャのスクリプトを全て移植すればよかっただけのハナシ

Friday, October 26, 2007

Firefox カスタマイズ3種(自分用) with Add-ons

 職場では基本 IE6 なのですが,やはり Firefox ブラウザを使いたいと思いまして,勝手に入れてます.
インストールするのは不味いので FirefoxPortable の方をフォルダに解凍してこっそりと.
しかし,Firefox では会社のネットワークが繋がらないらしい.
 User Agent Switcher を使って偽造しても駄目でした. どんなフィルタかけてるのよ.

 仕方ないので,IE Tab を入れて,気分だけでも Firefox. IE 表示するフィルタには"http://*","https://*"を追加. タブブラウジングになるだけでもありがたい.

 しかしながら,デフォルトでの設定でいろいろ使い辛いところがあったので,設定変更してみました.
その備忘録としてここに書きます. 酷く限定的な情報ということは重々承知しています.

Firefox search-bar 検索時にタブで開くカスタマイズ


※注意 For Fx 2.0.*
  1. Address-bar に"about:config"<Enter>と入力.
  2. browser.search.openintab の項目を探す.
  3. default で値が false になっていると思うので,ダブルクリックして true へ変更.
  4. おわり

IE Tab をカスタマイズ


IE Tab アドオンにおいて,リンクスポットを『新しいウィンドウで開く』としたとき,タブをバックグラウンドで開くようにカスタマイズ.
  1. Address-bar に"about:config"<Enter>と入力.
  2. ietab.focustab の項目を探す.
  3. default で値が true になっていると思うので,ダブルクリックして false へ変更.
  4. おわり


ナビゲーションツールバーをスマートに


ディスプレイは17型でそれ程小さい訳ではないのですけど,ツールバーが丈取りすぎで圧迫感があるので下記のスタイルを適用させてボタン周りを省スペース化.
/* ナビバーをスマートにする */
toolbox toolbar#nav-bar {
}
toolbox toolbar .toolbarbutton-1,
toolbox toolbar .toolbarbutton-menubutton-button,
toolbox toolbar .toolbarbutton-menubutton-dropmarker {
padding: 0 1px !important;
}
以上をユーザスタイルシート Firefox's Application Data Folder/profile/chrome/userChrome.css へ追記する.

これと併せて,ブックマークツールバーのラベルも消して更にスマートに.

スタイル変更前 ※ スクリーンショットは後日挿入します.
スタイル変更後 ※ スクリーンショットは後日挿入します.

■ about:config で設定書き換えってのは今まで余りやってこなかったのですが,改めて試してみると通常の設定画面ではできない設定も簡単にできるので便利だな~と関心してしまいました.
 変数名(?)でも十分意味は理解できるしね.
■ 検索バーで検索したあと(Enterキーを押したあと)に,バーの中を空にする(キーワードを消す)方法を知っているヒトいませんか?
 いつまでも検索ワードが残っているのは格好悪い.

参照リンク - Firefox Add-on 関係

Thursday, October 25, 2007

Firefox の LiveBookmark(フィード)を取得する方法

Firefox の LiveBookmarkを取得する XUL スクリプト.
Feed Sidebar という拡張機能からの紛うこと無き転載です.


ヘッダ内で,
<script type="application/x-javascript" src="chrome://browser/content/bookmarks/bookmarks.js"></script>
をインクルードして,以下のコードを書いて下さい.
// Live Bookmark Class
function CLiveBookmark () {
return this;
}
CLiveBookmark.prototype = {
folders : [],
livemarks : [],
is_init : false,
init : function () {
if (!RDF) { initServices (); }
if (!BMSVC) { initBMService (); }
this.livemarks = [];
this.is_init = true;
},
collect : function () {
if (!this.is_init) { this.init (); }

var root = RDF.GetResource ("NC:BookmarksRoot");
var feedURLArc = RDF.GetResource ("http://home.netscape.com/NC-rdf#FeedURL");
var urlArc = RDF.GetResource ("http://home.netscape.com/NC-rdf#URL");
var nameArc = RDF.GetResource ("http://home.netscape.com/NC-rdf#Name");

var folders = [ root ];

while (folders.length > 0) {
RDFC.Init(BMDS, folders.shift ());

var elements = RDFC.GetElements ();

while(elements.hasMoreElements ()) {
var element = elements.getNext ();
element.QueryInterface (Components.interfaces.nsIRDFResource);

var type = BookmarksUtils.resolveType (element);

if ((type == "Folder") || (type == "PersonalToolbarFolder")){
folders.push (element);
} else if (type == 'Livemark') {
var res = RDF.GetResource (element.Value);
var target = BMDS.GetTarget (res, feedURLArc, true);

if (target) {
var feedURL = target.QueryInterface (kRDFLITIID).Value;

var target = BMDS.GetTarget (res, urlArc, true);

if (target) {
var siteURL = target.QueryInterface (kRDFLITIID).Value;
} else {
var siteURL = 'about:blank';
}
var target = BMDS.GetTarget (res, nameArc, true);
if (target) {
var feedName = target.QueryInterface (kRDFLITIID).Value;
} else {
var feedName = feedURL;
}
this.livemarks.push ({ "label" : feedName, "url" : feedURL, "link" : siteURL });
}
}
}
}
},
getAll : function () {
// 初期化して再取得
this.init ();
this.collect ();
return this.livemarks;
}
};

好きなところで new して get する.
var live = new CLiveBookmark ();
var list = live.getAll ();
for (var i in list) {
alert (list[i].label + " + " + list[i].url + " + " + list[i].link);
}

http://uswpig.bay.livefilestore.com/y1pt79743Fzf-GT0UHH47HCDbOAJHW0rGD_FXf5L5Uz5wNgrrRFjRHNpPvAlGKpk2bkhyh0sDktjyVrEtBi2wsWqg/20071024livealert.png
ほぼ転載ですので,間違った情報や冗長な部分がある場合は指摘してください.
# というか教えて下さい!

一年前はこの手の情報は検索かければ直ぐ出てきたのですが,今は『ブックマーク』という単語が入ると,『ソーシャルブックマーク』や『はてブ』だらけ.
近年の SEO 対策の弊害を感じました. 通常の検索において誰かのブックマークページなんて,はっきり言ってインデックスされなくていいと思わない?



どうも,お久しぶりです.
更新再開していこうと思います.

自分の場合,ブログを更新するのにはパワーも時間も使うので,なるべく時間を掛けず記事をPost できるように訓練せねば. 従って,ある程度はこうした散発的な Post が続くと思います.
いや,ちゃんと気合入れて更新しますよ.

Thursday, January 18, 2007

[Firefox / Extension / Dwin]_ Web世界の片隅で哀を叫ぶ

うゎあーーーん



XUL Apps > Split Browser - outsider reflex

一年以上前からちまちま作っていた Firefox 拡張機能と同じものを作られたー.
しかも,自分のより全然,出来がいい. しかもしかも,こんな大手さんに.

作り出す前に一応ちょこっと調べたのに,そのときは欲しい機能の拡張機能が見当たらなくて,いっちょ作ろうと思ったのになー.
調べてみたら,前ヴァージョンのはもう2003年に公開しているじゃないの. やんなるわ,マッタク


いっそ,開発をストップして要望だけ丸投げしようかな~(ウソ)

使ってみての感想


■ 機能
この拡張機能は Firefox ブラウザの HTML 表示領域を無限に分割していくというものです.
複数の Web ページを見比べたり,別ページをブラウジングしながら別ページで調べものをしたり,・・・ということに使える.

■ 特徴
現在表示しているページ,タブ,リンク先を分割表示可. 分割した先でも普通にブラウジングが行える. 但し,タブ機能はなし.
分割数の制限なし. (メモリの許す限り)思う存分分割できる. もちろん,ディスプレイサイズも広くなくてはあまり意味はないけれども.

■ 不満点
無限に分割できるのが特徴ですけど,どうも・やっぱり無駄げ.
二つか三つ表示までで十分です.
分割した先でもタブブラウジングができて,分割ウィンドウの表示非表示を切り替えられればよし,なのにな.


・・・と,いうかそんなの機能のものを自分が作ってましたです. まだまだ不十分だけど,もうちょっといい感じになったら公開しようかな.
いろいろソースなど見て参考にさせていただきます.


--

※ 2007年初の書き込みが愚痴になってしまってすいません. 今年もこれからもより精進したいと思います.
本年もどうぞよろしくお願いします.

Thursday, October 26, 2006

[Firefox]_ Firefox 2.0 update

Firefox ver. 2.0 リリースされたようですけど,RC版 1.5どちらからも自動アップデートされないみたいね.
なぁ~んだ,ということでダウンロードしてインストールしました.



ところで,beta 版のが Program Files 中に残ってしまっているのだけれどもどうしたらよい?
削除で再インストールしかないか

Thursday, June 29, 2006

[Firefox / Extension / css / cbmt]_ customBMT 0.1

Firefox ネタを. Firefox ブラウザには ブックマークツールバー と呼ばれるものがあり,お気に入りのブックマークをツールバー内に格納することができるのですね。

コレによってブラウジングしながらのブックマークが容易であるやブックマークしたサイトへ素早く移動できるなど特徴があります。

 しかし、アイコンとテキスト(ラベル)が横に並ぶので幅とってしまう・・・

他の皆はどう使っているのか…


 よくココとかココとかココでも、faviconだけ表示して見栄えを華やかにされている方をよく見るのですが。
皆さんどうしているのでしょう? ブックマーク時にラベルを手作業で消すのは面倒ではないけれども、ラベルのテキストを復活するのに面倒でない?
# ツールバーからフォルダへ移動、なんてことしないのかな?

自分でカスタマイズ


 折角のカスタマイズ性の高い Mozilla Firefox ですので、スクリプト(・・・とは言わないか)を組んでみました。

 まずプロファイルを探し、ユーザスタイルシートというものを探します。
Windows: [各ユーザのフォルダ]/Application Data/Mozilla/Firefox/Profiles/***/chrome/userChrome.css

ユーザスタイルシートに数行書き加えるだけでラベルを簡単に消せるので Firefox ユーザの皆さんは試して見てください。  [見る]

新規タブボタン,ブックマークボタンとブックマークツールバー:
screen shot:Firefox
ブラウザのボタンなどと並べるとどこからがブックマークかもう分からない。

更に拡張機能 / Extension を作成


 拡張機能 も作ってみました(コチラが本命)

Firefox ユーザの方 プロファイルの場所が分からない方は以下をクリックして拡張機能をインストールしてみてください。
 オプションの設定など全くありません。 機能を解除したい場合は拡張機能をアンインストールしてやってください。
 他拡張機能や環境との競合などあったら善処したいと思います。
 Windows環境でしか試していないので動作報告や感想などコメントしてください^^

Template Design. 2008 Jyun.