"VReel Page Customizer"スクリプトのページです。

ユーザーズマニュアル

手順

(1) カスタマイズしたい対象ページを表示します。
(2) Greasemonkeyのコマンドメニューから対象ページの種類(allまたはthis)を選択します。
(3) カスタマイズ定義フォームでカスタマイズタイプを選択します。
(4) "URL"選択した場合は、CSSファイルのURLを、"CSS code"を選択した場合は、CSS codeを直接入力します。
(5) エレメントに対してstyle属性を設定する場合は、"Option"にチェックを入れます。設定しない場合は(7)へ。
(6) Option No.を選択し、エレメントノードを探すための情報を入力します。
(7) "Preview"ボタンをクリックして画面を確認します。
(8) OKの場合"Save"ボタンを押して設定を保存します。NGの場合は、CSSコードを修正して設定し直します。


対象ページ

以下のページをカスタマイズできます。

(1) プロフィールページ

• プロフィールページは、次のURLに該当するページのことです。
• (a) http://beta.vreel.net/profile_*.html
• (b) http://beta.vreel.net/index.php?q=profile&id=*
• この種類のページは全ユーザプロフィールページと、個別のユーザプロフィールページのどちらに対しても指定できます。
• 個別のユーザプロフィールページに対して指定した場合、その設定は当該ユーザプロフィールページに対してのみ有効となります。

(2) チャンネルページ

• チャンネルページは、次のURLに該当するページのことです。
• (a) http://beta.vreel.net/index.php?q=channels*
• (b) http://beta.vreel.net/index.php?q=channels&id=*
• この種類のページは全チャンネルページと、個別のチャンネルページのどちらに対しても指定できます。
• 個別のチャンネルページに対して指定した場合、その設定は当該チャンネルページに対してのみ有効となります。
• 全チャンネルページはIDを伴わないチャンネルページを含みます。

(3) コミュニティグループページ

• コミュニティグループページは、次のURLに該当するページのことです。
• http://beta.vreel.net/index.php?q=community&a=show&id=*
• この種類のページは全コミュニティグループページと、個別のコミュニティグループページのどちらに対しても指定できます。

(4) コミュニティグループリストページ

• コミュニティグループリストページは、次のURLに該当するページのことです。
• (a) http://beta.vreel.net/index.php?q=community
• (b) http://beta.vreel.net/index.php?q=community&page=*
• この種類のページは全ブラウズページと、個別のブラウズページのどちらに対しても指定できます。
• (a)のURLは(b)のpege=0と同じページです。

(5) ウォッチページ

• ウォッチページは、次のURLに該当するページのことです。
• http://beta.vreel.net/watch_*.html
• この種類のページは全ウォッチページに対してのみ指定できます。

(6) 検索結果ページ

• 検索結果ページは、次のURLに該当するページのことです。
• (a) http://beta.vreel.net/index.php
• (b) http://beta.vreel.net/index.php?q=search
• この種類のページは全検索結果ページに対してのみ指定できます。
• (a)のURLはトップページと同じですが、検索結果ページの場合は、
• 'search'というIDを持つタグが含まれていますので、それで区別します。

(7) My Profile(My Account)ページ

• My Profile(My Account) ページは、次のURLに該当するページのことです。
• http://beta.vreel.net/index.php?q=my
• この種類のページは全My Profileページと、個別のMy Profileページのどちらに対しても指定できます。
• このページを見たり、カスタマイズしたりするためにはログインする必要があります。
• また、そのページはあなた以外の人が見る事はできません。
• 個別のカスタマイズは複数のアカウントを持っている人のためにあります。

(8) Edit Profile(Account Settings) ページ

• Edit Profile(Account Settings) ページは、次のURLに該当するページのことです。
• http://beta.vreel.net/index.php?q=mya
• この種類のページは全Edit Profile(Account Settings)ページと、個別のEdit Profile(Account Settings)ページのどちらに対しても指定できます。
• このページを見たり、カスタマイズしたりするためにはログインする必要があります。
• また、そのページはあなた以外の人が見る事はできません。
• 個別のカスタマイズは複数のアカウントを持っている人のためにあります。

(9) Manage Movies(Update Information) ページ

• Manage Movies(Update Information) ページは、次のURLに該当するページのことです。
• http://beta.vreel.net/index.php?q=mye2
• この種類のページは全Manage Movies(Update Information)ページと、個別のManage Movies(Update Information)ページのどちらに対しても指定できます。
• このページを見たり、カスタマイズしたりするためにはログインする必要があります。
• また、そのページはあなた以外の人が見る事はできません。
• 個別のカスタマイズは複数のアカウントを持っている人のためにあります。

(10) Manage Movies(My Videos) ページ

• Manage Movies(My Videos) ページは、次のURLに該当するページのことです。
• (a) http://beta.vreel.net/?q=mye
• (b) http://beta.vreel.net/index.php?q=mye*
• この種類のページは全Manage Movies(My Videos)ページと、個別のManage Movies(My Videos)ページのどちらに対しても指定できます。
• このページを見たり、カスタマイズしたりするためにはログインする必要があります。
• また、そのページはあなた以外の人が見る事はできません。
• 個別のカスタマイズは複数のアカウントを持っている人のためにあります。

(11) Message ページ

• Message ページは、次のURLに該当するページのことです。
• It means the pages specified by following url.
• http://beta.vreel.net/index.php?q=message*
• この種類のページは全Messageページと、個別のMessageページのどちらに対しても指定できます。
• このページを見たり、カスタマイズしたりするためにはログインする必要があります。
• また、そのページはあなた以外の人が見る事はできません。
• 個別のカスタマイズは複数のアカウントを持っている人のためにあります。

(12) Friends ページ

• Friends ページは、次のURLに該当するページのことです。
• http://beta.vreel.net/index.php?q=friends*
• この種類のページは全Friendsページと、個別のFriendsページのどちらに対しても指定できます。
• このページを見たり、カスタマイズしたりするためにはログインする必要があります。
• また、そのページはあなた以外の人が見る事はできません。
• 個別のカスタマイズは複数のアカウントを持っている人のためにあります。

(13) Blocked users ページ

• Blocked users ページは、次のURLに該当するページのことです。
• http://beta.vreel.net/index.php?q=blocked*
• この種類のページは全Blocked usersページと、個別のBlocked usersページのどちらに対しても指定できます。
• このページを見たり、カスタマイズしたりするためにはログインする必要があります。
• また、そのページはあなた以外の人が見る事はできません。
• 個別のカスタマイズは複数のアカウントを持っている人のためにあります。

(14) Subscriptions ページ

• Subscriptions ページは、次のURLに該当するページのことです。
• http://beta.vreel.net/index.php?q=subscribe2user*
• この種類のページは全Subscriptionsページと、個別のSubscriptionsページのどちらに対しても指定できます。
• このページを見たり、カスタマイズしたりするためにはログインする必要があります。
• また、そのページはあなた以外の人が見る事はできません。
• 個別のカスタマイズは複数のアカウントを持っている人のためにあります。

(15) Invite Friends ページ

• It means the pages specified by following url.
• http://beta.vreel.net/index.php?q=invite*
• この種類のページは全Invite Friendsページと、個別のInvite Friendsページのどちらに対しても指定できます。
• このページを見たり、カスタマイズしたりするためにはログインする必要があります。
• また、そのページはあなた以外の人が見る事はできません。
• 個別のカスタマイズは複数のアカウントを持っている人のためにあります。

(16) Upload step 1/2 ページ

• It means the pages specified by following url.
• http://beta.vreel.net/index.php?q=upload
• この種類のページは全Upload step 1/2ページと、個別のUpload step 1/2ページのどちらに対しても指定できます。
• このページを見たり、カスタマイズしたりするためにはログインする必要があります。
• また、そのページはあなた以外の人が見る事はできません。
• 個別のカスタマイズは複数のアカウントを持っている人のためにあります。

(17) Upload step 2/2 ページ

• It means the pages specified by following url.
• http://beta.vreel.net/index.php
• この種類のページは全Upload step 2/2ページと、個別のUpload step 2/2ページのどちらに対しても指定できます。
• このページを見たり、カスタマイズしたりするためにはログインする必要があります。
• また、そのページはあなた以外の人が見る事はできません。
• 個別のカスタマイズは複数のアカウントを持っている人のためにあります。
• (a)のURLはトップページと同じですが、upload step 2/2ページの場合は、
• 'upload_submit'というIDを持つタグ(ボタン)が含まれていますので、それで区別します。

(18) Uploading result ページ(3ページ目)

• It means the pages specified by following url.
• http://beta.vreel.net/index.php?q=upload3
• この種類のページは全Uploading result ページと、個別のUploading result ページのどちらに対しても指定できます。
• このページを見たり、カスタマイズしたりするためにはログインする必要があります。
• また、そのページはあなた以外の人が見る事はできません。
• 個別のカスタマイズは複数のアカウントを持っている人のためにあります。

(19) トップページ

• トップページは、次のURLに該当するページのことです。
• (a) http://beta.vreel.net/
• (b) http://beta.vreel.net/index.php
• この種類のページはトップページに対して指定できます。

(20) その他のページ

• その他のページは、上記に含まれない次のURLに該当するページのことです。
• (a) http://beta.vreel.net/index.php?*
• (b) http://beta.vreel.net/index.php?q=*
• この種類のページは全てのその他のページと、個別のその他のページのどちらに対しても指定できます。
• (a)のタイプは全てのその他のページとして指定できます。
• (b)のタイプはq=の後の名前毎に個別のその他のページとして指定できます。

(21) フォーラム

• フォーラムは、次のURLに該当するページのことです。
• (a) http://vreel.net/board/*
• (b) http://vreel.net/board/forumdisplay.php?f=*
• この種類のページは全フォーラムと、個別のフォーラムのどちらに対しても指定できます。
• (a)のタイプは全てのフォーラムとして指定できます。
• (b)のタイプはフォーラム番号を持つ個別のフォーラムとして指定できます。

コマンドメニュー



(1) ====== VReel Page Customizer ======

• これはタイトル行なので選択しても何も起こりません。

(2) 共通カスタマイズ
(2-1) Customize all ****** pages
(2-2) Customize my profile pages
(2-3) Customize community groups list pages

• 今見ている種類の全ページを共通の設定にしたい場合、このメニューを選択します。
• (2-1)は一般的な共通カスタマイズ用のメニューです。
• (2-2)はログインユーザ用ページの共通カスタマイズ用のメニュー例です。
• (2-3)はコミュニティグループリストのように個別カスタマイズが無いページの共通カスタマイズ用のメニュー例です。

(3) 個別カスタマイズ
(3-1) Customize this ****** pages
(2-2) Customize this user's my profile pages
(3-3) Customize the ****** group

• 今見ている種類のページを個別の設定にしたい場合、このメニューを選択します。
• このメニューはプロフィールページや、グループなどの識別用の文字列(ユーザIDなど)を持つページで使用できます。
• (3-1)は一般的な個別カスタマイズページ用のメニューです。
• (3-2)は当該ユーザのプロフィールページを個別にカスタマイズします。
• (3-3)は当該グループのページを個別にカスタマイズします。
• inbox他でも同様のメニューが表示されます。

(4) Show Current CSS Code

• 現在カスタマイズ用に適用されているCSSのコードを表示したい場合、このメニューを選択します。

(5) Show Original CSS Code

• VReelのシステムで定義されているCSSコードを表示したい場合、このメニューを選択します。

(8) View value list

• 本スクリプトでGM_setValueを使って保存しているキーと値の一覧を表示します。

(9) Change log output mode for Page Customization for VReel

• これはデバッグ用のログ出力制御メニューです。
• 通常はOFF(デフォルト)にして使用してください。
• ログを出力したい場合は、このメニューを選択してログ出力モードをONにしてください。
• ログの出力をしたくない場合は、このメニューを選択してログ出力モードをOFFにしてください。



カスタマイズ定義フォーム



(1) タイトル領域

• ここにはカスタマイズをしようとしている種類を表示します。
• この領域の上にマウスカーソルを持ってくると、マウス形状がmove形状に変わります。
• ドラッグ＆ドロップで、フォームの場所を移動できます。


(2) コマンドボタン

1. Reset
   このボタンをクリックすると、フォーム内容を初期化します。


2. Save
   このボタンをクリックすると、フォーム内容を保存してフォームを閉じます。
   Previewボタンをクリックして画面を確認していない場合は、セーブした後にページをリロードする必要があります。


3. Quit
   このボタンをクリックすると、フォーム内容を保存せずにフォームを閉じます。
   画面は、元の状態にもどされます。


4. Preview
   このボタンをクリックすると、表示の確認のために一時的にCSS内容が反映されます。


5. Help
   このボタンをクリックすると、本ページ(メインサイト)を表示します。
   このボタンをShiftキーを押しながらクリックすると、本ページ(サイトミラー)を表示します。


(3) Customization Type

1. Unused
   これを選択した場合はカスタマイズしません。デフォルトがこれです。


2. URL
   これを選択した場合、URLで指定したCSSファイルを使ってカスタマイズします。
   入力領域にURLを指定してください。
   


3. CSS code
   これを選択した場合、テキストエリアに入力したCSSコードを使ってカスタマイズします。
   テキストエリアにCSSを入力してください。
   


4. Disable
   これを選択した場合、カスタマイズを抑制します。VReelのユーザカスタマイズも抑制します。
   


5. Option
   これは、エレメントのstyle属性に対してCSSコードを指定するオプションです。
   Customization Typeに"Disable"を指定した場合、オプションによるカスタマイズも無効になります。
   


(4) オプション

• 目的のノード(エレメント)をXPathを使って探します。
• オプション番号1から10までの10個が指定可能です。
• VReelのシステムがエレメントのstyle属性を使っている時に、
• 同じプロパティを使ってカスタマイズした場合、このオプション機能でカスタマイズする必要があります。
• 理由は、エレメントに直接style属性で指定した場合、もっとも高い優先順位(特定性)を持つからです。


1. Option No.(Radio Button)
オプション番号を指定してください。


2. Enable this option(Check Box)
指定したオプション番号を有効にする場合にチェックボックスにチェックをいれてください。


3. Set type(Radio Button)
ターゲットのエレメントのstyle属性に自分の指定を追加する場合は"Append"を選択してください。
ターゲットのエレメントのstyle属性を自分の指定で置き換える場合は"Replace"を選択してください。


4. Tag(Input Text)
ターゲットを探すのに必要な場合、タグ名を指定してください。


5. ID(Input Text)
ターゲットを探すのに必要な場合、IDを指定してください。


6. Class(Input Text)
ターゲットを探すのに必要な場合、クラスを指定してください。


7. Attribute(Input Text)
ターゲットを探すのに必要な場合、属性を指定してください。
左側の入力領域には属性名を指定してください。
右側の入力領域には属性値を指定してください。


8. Style Code(Input Text)
ターゲットに設定するCSSコードを指定してください。


9. Clear Option(Command Button)
現在表示されているオプション番号のフォーム上の設定内容をクリアします。


10. Set XPath(Command Button)
現在表示されているオプション内容を元にXPath式(XPathExpression)を生成して表示します。
このボタンは特にクリックする必要はありません、単にXPathを知っている人向けの確認用です。


11. XPath(Check box and Input Text)
XPath式を直接指定する場合は、XPathの横にあるチェックボックスをチェックしてください(V1.0以降)。
このチェックボックスがチェックされている場合、他の入力内容は無視されて、入力したXPath式が使われます。



優先順位

(1) Disable

• "Disable"の優先順位が最高になります。
• 次に、URL/CSS codeの指定になります。

(2) 個別カスタマイズと共通カスタマイズ

• 個別カスタマイズの優先順位は共通カスタマイズより高くなります。
• 個別カスタマイズはプロフィールページやグループページなどで有効です。
• また、ブラウズページなどのエリアを持つページでも有効です。

(3) VReelのシステムによるスタイルシート

• Disableまたは、URL/CSS codeが指定された場合、VReelのシステムCSSは取り除かれます(基本部分は残ります)。 従って優先順位は一番低くなります。


• VReelのシステムスタイル < 共通カスタマイズ < 個別カスタマイズ
• したがって、以下の表のようになります。

		個別カスタマイズ
		Disable	URL/CSS code	Unused
共通カスタマイズ	Disable	Disable	Disable	Disable
	URL/CSS code	Disable	個別カスタマイズ	共通カスタマイズ
	Unused	Disable	個別カスタマイズ	VReelシステムスタイル

修正履歴

日付	バージョン	修正内容、理由
2009-07-04	1.0.6	ヘルプ関連の処理とマウスカーソル(ドラッグ&ドロップ用)などを変更した。
2009-06-25	1.0.5	ヘルプボタンのバルーン(ツールチップ)追加、ヘルプページにミラー追加。
2009-06-18	1.0.4	HelpページのURLを変更した。 changelogを削除した。
2009-06-06	1.0.3	オプション用のstyleからheightプロパティを削除した。 タイトル領域のバックグラウンドをイメージに変えた。 ラジオボタン関連のコードを変えた。
2009-05-30	1.0.2	Helpボタンを追加した。 ログ出力モードのダイアログを変更した。
2009-05-19	1.0.1	エレメントタイプのバグなどを修正した document.getElementById を $ に置き換えた
2009-05-16	1.0	配列とオブジェクトで少しコードを整理した。 XPathボックスへの直接入力をサポートした。 タイトル領域とボタンの上でのマウスカーソルの形状をセットした。
2009-04-30	0.9	フォーム移動ボタンを削除して、ドラッグ&ドロップで移動するようにした
2009-03-17	0.8	フォーム移動ボタンの追加とFriends ページなどの対応を追加した
2009-02-08	0.7	エレメントに対するカスタマイズオプションを追加した
2009-02-01	0.6	設定フォーム化した
2009-01-07	0.5	コミュニティとグループの複数ページ化に対応した
2008-12-27	0.4	個別カスタマイズ用の関数を統合した
2008-12-20	0.3	profile/channel/groupの個別カスタマイズ機能を追加した
2008-12-13	0.2	テキストエリアによるCSSコードの入力機能を追加した
2008-12-06	0.1	新規作成

システム要件

(1) ブラウザ

• Firefox 3.x
• Firefox 2.xで動くかどうか知りません。

(2) Firefoxのアドオン

• Greasemonkey 0.8.20090123.1 以降( GM_deleteValue と GM_listValues 使用 )

関連ページ、サイト

(1) Firefox

• Firefox 3.xのダウンロード

(2) Firefox のアドオン

• Firefox Add-ons
• Greasemonkey 0.8.x

(3) userscripts.org

• userscripts.org
• 私のアカウントページ
• VReel Page Customizer

(4) VReel

• http://beta.vreel.net/
• 私のプロフィールページ

付記

(1) CSSの共有

• Greasemokeyユーザ間でCSSを共有したいなら、Customization TypeでURLを選択してください。
• そして、ネット上の公開サーバにCSSファイルを置いてください。

(2) スクリプト編集・改造

• もしスクリプトを自分の為だけにカスタマイズしたい場合、私に許可無く改造してかまいません。
• ただし、自分自身での使用のみに限定してください。

(3) スクリプトの公開

• もし他の人たちの為に、改造したスクリプトを公開したい場合、まず私に連絡してください。
• 役に立つと思ったら、条件付きで許可するかもしれません。

(4) リクエスト

• 不足している機能でリクエストがあれば、連絡してください。

サンプルCSSコードとサンプル画像

以下のCSSコードは"VReel Page Customizer"で使う事ができです。



• コミュニティリストページ
  URL: http://chemera.coolpage.biz/community_list.css
  
  
  コミュニティリストページに行って、"Customize all community list"をコマンドメニューから選択してください。 それから、"URL"タイプを選択して、上記のURLを入力領域に指定してください。
  


• ミュージックチャンネルページ(個別カスタマイズ)
  URL: http://chemera.coolpage.biz/channels_63.css
  
  
  ミュージックチャンネルページに行って、"Customize this channel pages(id=63)"をコマンドメニューから選択してください。 それから、"URL"タイプを選択して、上記のURLを入力領域に指定してください。
  


• プロフィールページ用(共通カスタマイズ)
  URL: http://chemera.coolpage.biz/vreel_profile.css
  
  
  プロフィールページ(誰のページでも可)に行って、"Customize all profile pages"をコマンドメニューから選択してください。 それから、"URL"タイプを選択して、上記のURLを入力領域に指定してください。
  


• チャンネルページ用(共通カスタマイズ)
  URL: http://chemera.coolpage.biz/vreel_channels.css
  
  


• コミュニティグループページ用
  URL: http://chemera.coolpage.biz/vreel_community_group.css
  
  
  コミュニティグループページ(どのグループページでも可)に行って、"Customize all community group pages"をコマンドメニューから選択してください。 それから、"URL"タイプを選択して、上記のURLを入力領域に指定してください。
  


• Watchページ用
  URL: http://chemera.coolpage.biz/vreel_watch.css
  
  


• 検索結果ページ用
  URL: http://chemera.coolpage.biz/vreel_search.css
  
  


• My Profile(My Account) ページ用
  URL: http://chemera.coolpage.biz/vreel_my.css
  
  
  自分のプロフィールページに行って、"Customize my profile pages"をコマンドメニューから選択してください。 それから、"URL"タイプを選択して、上記のURLを入力領域に指定してください。
  


• Edit Profile(Account Settings) ページ用
  URL: http://chemera.coolpage.biz/vreel_mya.css
  
  


• Manage Movies(Update Information) ページ用
  URL: http://chemera.coolpage.biz/vreel_mye2.css
  
  


• Manage Movies(My Videos) ページ用
  URL: http://chemera.coolpage.biz/vreel_mye.css
  
  


• Messageページ用
  URL: http://chemera.coolpage.biz/vreel_messages.css
  
  


• Friends ページ用
  URL: http://chemera.coolpage.biz/vreel_friends.css
  
  


• Upload step 1/2 ページ用
  URL: http://chemera.coolpage.biz/vreel_upload.css
  
  


• Upload step 2/2 ページ用
  URL: http://chemera.coolpage.biz/vreel_upload2.css
  
  


• Uploading result ページ(3ページ目)用
  URL: http://chemera.coolpage.biz/vreel_upload3.css
  
  


• トップページ用
  URL: http://chemera.coolpage.biz/vreel_top.css
  
  


• その他ページ用
  URL: http://chemera.coolpage.biz/vreel_other.css
  
  


• フォーラム用
  URL: http://chemera.coolpage.biz/vreel_forums.css
  
  


• フォーラムのスレッド用(AutoPagerアドオン対応)
  URL: http://chemera.coolpage.biz/vreel_thread.css
  
  



ＦＡＱ

1	Q	共通カスタマイズがVreenのシステムスタイルよりも優先順位が高いのはなぜですか?
	A	コミュニティグループでデフォルトと、ブルーにカスタマイズしたものが区別出来ないので、システム側のカスタマイズは無いものとしました。