| プロセルピナ | ||||||||||
| Top |
Internet |
Private Proxy |
Capture Device |
Download |
Config and Words |
Online Help |
Online Home |
|||
| [BACK] | |||||
☞
Top >
PrivateProxy >
AntiAd >
Edit >
mixi >
create
このページでは、 mixiカスタマイズデータ(配色カスタマイズ用のgif画像とCSSのセット) を作成する手順を説明しています。 既に作成され公開されているmixiカスタマイズデータを使用するだけの場合は、 「mixi画面のカスタマイズについて」 を参照してください。 1. 前準備まず、黒背景や 緑背景のmixiに設定できることを確認します。 → mixi画面のカスタマイズについて 次に、作成したmixiカスタマイズデータを格納するスペースを サーバ上に確保します。 ２０MB程度の容量が必要になります。 (ジオシティーズなどで) 新たにフリーのレンタルスペースを確保したり、 すでにWebサイトを開設している場合は そのスペースの一部を使用したりする計画をたてます。 アップロードする必要のあるgif画像やCSSは合計で５００ファイル近くもあります (殆どがgifファイルです)。 ファイルアップロードに FFFTPなどのFTPアプリケーションが使えるサイトであることが必須です (Web-FTPなどの Webベースのアップロードツールで500件を超える数のファイルをアップロードするのは とても大変な作業になります) また できるだけレスポンスの良いサイトを選んだ方が良いでしょう。 mixiでは１ページ表示する毎に細かいgifファイルを多数拾うアクセスになる為、 レスポンスが遅くなるLycos.comなどの海外のフリースペースでは 快適なmixiのアクセスができなくなる場合があります (Firefoxではそれほど気になりませんが、 IEなどではレスポンスの悪化が顕著になります)。  2. サンプルデータ(黒mixi)をダウンロードする次のリンクを右クリックして、サンプルデータ black.zip をダウンロードします。 zipファイルを展開すると、 black という名前のフォルダが作成され、その配下に次の４つのフォルダが生成されます。 img (主にアイコン画像を格納するフォルダ) img_basic (画面レイアウト用パーツ画像を格納するフォルダ) static_css (画面レイアウト用CSSを格納するフォルダ) orig (カスタマイズでのみ使う画像を格納するフォルダ) 以下の記述では、説明を簡単にするため 上記の４つのフォルダは、 C:\Work\Mixi に置かれるものとします。 例: static_cssフォルダは C:\Work\Mixi\static_css になります。 これらのフォルダに、 『プロセルピナ』の黒mixi で使われているデータの全てが格納されています。 『プロセルピナ』の黒mixiでは、 これ以外の他の画像ファイル等は ありません。 それらはカスタマイズデータとしては持たず、mixiから配信されるものをそのまま使います。 cssは、 static_cssフォルダ に格納されます。 ただし、展開したzipファイルには cssファイル そのものは含まれていません。 cssファイル は、 マクロ mixi_CssAllUpdate.txt マクロ mixi_CssAllFinisher.txt マクロ mixi_generatePageSpecificCss.txt の３つのマクロファイルで作成します (後述)。 作成に必要になる css_infoファイル は、展開したzipファイルに含まれています。 3. サンプルデータのアップロード: gif画像カスタマイズを始めるにあたって、まずは、 『プロセルピナ』の黒mixi からのコピーを作成することを考えます。 マクロでコピーを作成し、それを使ったアクセスがうまく動くことを確認してから、それをオリジナルデータに加工していきます。 【Step 1】 最初に、 img img_basic orig の各フォルダに含まれるgif画像とjpeg画像の色調を、好みの色合いに調整します。 調整は フォルダの画像をColorMatrixフィルタで加工するマクロ で行います。 マクロで、上位フォルダ(上記例でC:\Work\Mixi)を指定して一度マクロを実行するだけで 全ての画像の色調を変換することができます。 マクロ実行の具体的な手順は フォルダの画像をColorMatrixフィルタで加工するマクロ を参照してください。 画像の細かい修正は後で画像ソフトなどで行うこととして、ここでは単にマクロで一括処理するだけにして、 先に進みます。 【Step 2】 次に、 img、 img_basic、 orig の３つのフォルダを、まるごとユーザーのサーバにFTPでアップロードします。 例えば、 http://3rd.geocities.jp/lupin_the_3rd_yeah/ というサイトの、 testディレクトリ 配下を使用する場合は、 http://3rd.geocities.jp/lupin_the_3rd_yeah/test/img http://3rd.geocities.jp/lupin_the_3rd_yeah/test/img_basic http://3rd.geocities.jp/lupin_the_3rd_yeah/test/orig の３つを生成することになります。 img、 img_basic、 の各フォルダの配下にも複数のフォルダがありますので、 PCからFTPアップロードするときに漏れが無いように注意して作業します。 origディレクトリに配置される画像は、カスタマイズされたCSSから指定されます。 ファイル名やサイズは変更しないで、好きな画像に入れ替えて使用してください。 (ファイル名を変更する場合は該当箇所の css_infoファイル を変更する必要があります)
【補足】mixiの画像フォルダとカスタマイズで使用する画像フォルダの対応関係 mixiの画像フォルダのパス /img/basic/ は、カスタマイズで使用する画像フォルダでは /img_basic/ の単一の階層にまとめられています。 例えば、 http://img.mixi.jp/img/basic/button/manage_profile002.gif の画像のカスタマイズされたものは、 http://3rd.geocities.jp/lupin_the_3rd_yeah/test/img_basic/button/manage_profile002.gif に配置されます。 4. css_srcファイルの作成 (一括)『プロセルピナ』の macroフォルダ にある mixiCssList.txt._sample というファイルを、 作業フォルダ(上の例では C:\Work\Mixi のフォルダ) にコピーし、 ファイルの名前は mixiCssList.txt に変更します。 これが、 CSSカスタマイズ設定ファイル mixiCssList.txt になります。 このCSSカスタマイズ設定ファイルは 内容を簡単に編集する必要があります (ファイル名を変えただけでは使えません)。 詳しくは 「CSSカスタマイズ設定ファイル」 を参照してください。 CSSカスタマイズ設定ファイル mixiCssList.txt の編集が終わると、 マクロ mixi_CssAllUpdate.txt を起動して css_srcファイル を一括作成します。 マクロの起動は マクロファイルを指定して実行 から行うと便利です。 マクロにはパラメータが１つ必要で、これは先に編集した CSSカスタマイズ設定ファイル mixiCssList.txt をフルパスで指定します。 マクロ実行フォームの２行目に設定しますが、 Windowsエクスプローラから ファイルのドラッグ＆ドロップで 設定することができます。 5. cssファイルの作成 (一括)全ての css_srcファイル から、全ての cssファイル を一括で作成します。 その前に、 CSSカスタマイズ設定ファイル mixiCssList.txt の編集において、 background color: の項目で #FFFFFF (白) などの明るい色の背景を設定した場合は、 reset.css_infoファイル を編集して、ページに表示されるリンクの色が暗くなるようにします。 上記でダウンロードした black.zip に含まれる reset.css_infoファイル は、 暗い背景用に明るい色でリンクの色を指定していますので、 そのままの背景を白くするだけではリンクの文字が読みにくくなります。 reset.css_infoファイル の編集については、 「css_infoファイルの編集」のページの 「css_infoファイルの概要」 の項目を参照してください。 (具体的には color:#11EE11 のような色指定の部分を数カ所書き換えるだけです) cssファイル の作成は マクロ mixi_CssAllFinisher.txt を起動して行います。 先のマクロと同じように、マクロの起動は マクロファイルを指定して実行 から行うのが便利です。 このマクロも、パラメータ(input[0])に CSSカスタマイズ設定ファイル mixiCssList.txt をフルパスで指定します (マクロ実行フォームでは ファイルのドラッグ＆ドロップで設定できます)。
マクロ実行前にもう一度、設定の再確認 ・ パラメータで指定するmixiCssList.txtの folder base: 項目は、 正しく設定されていますか？ C:\Work\Mixi が指定されているなら C:\Work\Mixi\static_css というフォルダがありますか？ ・ そのstatic_cssフォルダには zipから展開した css_infoファイル がありますか？ (全てのcssにcss_infoファイルが必要なわけではありません) ・ mixiCssList.txtファイルは、 そのファイルの folder base: 項目で指定したフォルダにありますか？ folder base: に C:\Work\Mixi が指定されているなら mixiCssList.txtファイルのフルパスは C:\Work\Mixi\mixiCssList.txt でなければなりません。 6. ページ特定CSSの作成と、cssのアップロード『プロセルピナ』の macroフォルダ にある pageSpecificCss.info というファイルを、 static_cssフォルダ(上記例で C:\Work\Mixi\static_css に相当) にコピーします。 マクロ mixi_generatePageSpecificCss.txt を起動して ページ特定CSS を一括作成します。 このマクロの起動も マクロ実行フォーム で行うのが便利です。 パラメータは static_cssフォルダ にコピーした pageSpecificCss.infoファイル を１つフルパスで指定します (ファイルのドラッグ＆ドロップで設定できます)。 ページ特定CSS は、ファイル名が pl_ で始まるcssファイルで、 static_cssフォルダに作成されます。 ページ特定CSSの詳細は 「マクロ mixi_generatePageSpecificCss.txt」 及び 「pageSpecificCss.info (ページ特定CSSの作成に必須な設定ファイル)」 を参照にしてください。 これでcssの作成作業は完了です。 サーバにstatic_cssフォルダごとアップロードします (配下の static_css\basicフォルダ などにあるcssファイルも全てアップロードする必要があります)。 例えば、上記例のように http://3rd.geocities.jp/lupin_the_3rd_yeah/ というサイトの、 testディレクトリ 配下を使用する場合は、 http://3rd.geocities.jp/lupin_the_3rd_yeah/test/static_css を生成することになります。 (結果として testディレクトリ の配下には img、img_basic、orig、static_css の４つのディレクトリが存在することになります) サーバによっては css_src や css_info などの拡張子のファイルは アップロードできないことがあります (geocities.jp など)。 その場合はcssファイルだけを選択してアップロードします。 表示の一部が崩れるときは、cssのアップロードが不足していることが殆どです。 static_cssフォルダの配下は深い階層になっている部分もありますので、漏れがないように注意してアップロードします。 この説明の例で言えば、 C:\Work\Mixi\static_css\basic\skin\default\mixicollection.css は、 http://3rd.geocities.jp/lupin_the_3rd_yeah/test/static_css/basic/skin/default/mixicollection.css に配置されていなければなりません。 マクロ mixi_generatePageSpecificCss.txt は、 デスクトップに mixi.jp.inc.txt (mixiカスタマイズデータ設定情報) の出力も行います。 次に、これを『プロセルピナ』に設定します。 mixi.jp.inc.txtの作成と同時に、 Web公開用htmlページ mixi_jp_inc_txt.html をデスクトップに作成して Webブラウザにプッシュします。 作成したカスタマイズ設定をネットで共有する場合は mixi_jp_inc_txt.html または それを参考にして作成したページを公開します。 7. mixiカスタマイズデータ設定情報の設定上記 3.のgif画像アップロード、 6.のCSSのアップロード で、データのアップロードが全て完了すれば、次にそれを有効にする mixiカスタマイズデータ設定情報 (mixi.jp.inc.txt) を「プロセルピナ」に設定します。 この設定によって初めて、 ユーザーが作成してアップロードしたファイル(css、gif、jpg など)と mixiのサイトが関連付けられます。
【mixiカスタマイズデータ設定情報の役割】
・ ページのcssのパスを変更し、自分のcssのパスに入れ替える ・ ページのgifパーツのパスを変更し、自分のgifのパスに入れ替える ・ cssファイルの入れ替えでは変更できない、html中に直接指定されたcssを書き換える 上記6.の マクロ mixi_generatePageSpecificCss.txt で作成された mixi.jp.inc.txt (mixiカスタマイズデータ設定情報) を、 antiAdListフォルダ にコピーします (既存ファイルがあるので上書きコピー)。 コピーするだけでは『プロセルピナ』は mixiカスタマイズデータ設定情報 が変わったことが認識できないので、 『プロセルピナ』メインフォームのメニューから 「Options」→「mixi Customize(ミクシィ)」→「オリジナル設定」 を選択し、テキストフォームを開きます (テキストフォームにはコピーした mixi.jp.inc.txt の内容が表示されます)。 そのまま、右上の OK ボタン でフォームを閉じます。 8. テストアクセス
(クリックで拡大)
mixiにアクセスし、カスタマイズ設定が効いていることを確認します。
注：左図は旧レイアウトのmixi画面の例です。現在のmixiは違うレイアウトになっています。 例えば、 背景色を #500000、枠色を #FF0000、文字色を #DDA0DD に設定していた場合は 左図のような配色になります。 CSSの設定が効いて背景色、枠色が赤く変化していることが確認できます。 左の図での説明では、 gif画像は編集せずにそのままアップロードしているので、 アイコンなどのgif画像の色調は 黒背景 のときと変化ありません。 gifの編集(色調の補正など)は 目立つところから始めるとよいでしょう。 サンプルのzipファイルには、 今では使用されなくなった旧レイアウト用のgif画像も含まれていますので、 すべての画像を加工する必要はありません。 9. カスタマイズの試行開始
(クリックで拡大)
注：左図は
旧レイアウトのmixi画面での例です。
現在のmixiは違うレイアウトになっています。
カスタマイズは、結果として表示される画面を見ながら進めていくことになります。 解析にはIE８の「開発者ツール」(IE８から[F12]キーで開きます)が便利です。 11. mixiのCSS変更に対応するにはmixiのサイトレイアウト変更では、殆どの場合で関連するcssの変更があります。 mixiのcss変更にあわせて、カスタマイズしたcssの変更を行わなければ、画面レイアウトが崩れてしまいます。 上記の手順で説明したように、「プロセルピナ」ではcssの作成と更新をサポートするマクロが用意されていて、 主として使うのが マクロ mixi_CssAllUpdate.txt マクロ mixi_CssAllFinisher.txt マクロ mixi_generatePageSpecificCss.txt の３つです。 mixi_CssAllUpdate.txtは、 mixiから最新のcssを取得して、css_srcファイル を作成するマクロです。 mixi_CssAllFinisher.txtは、 css_srcファイルに定形作業を行って cssファイル にするマクロです。 mixi_generatePageSpecificCss.txtは、 cssファイルをページ単位にまとめるマクロです。 マクロ mixi_CssAllUpdate.txtは、 background: などで指定されている背景色、 color: で指定されている文字色 を、指定された色に変換した上で、 それをコメントアウトします。 コメントアウトするのは、色調の統一には元になる配色を継承する方が単純になるためです。 これにより、大元の背景色、文字色を１つ指定するだけで、殆どすべての配色を整えることができます (大元の背景色、文字色は reset.css で指定します)。 こうしておいて、必要な部分のみを、後で個別に編集します。 border: などで指定されている枠の色も、指定された色に変換されます。 ただし border: の指定はコメントアウトされず、枠は有効な指定として残ります。 次のマクロ mixi_CssAllFinisher.txtは、 先の mixi_CssAllUpdate.txtで作成された css_srcファイル を仕上げて、cssファイル にするためのマクロです。 このマクロは、 css_infoファイル というテキストファイルに記述された指示に従って、css_srcファイルを編集し、cssファイルを作成します。 css_infoファイルは ユーザーが編集(または新規作成)する必要がありますが、 元ネタになるものが サンプルのzip に含まれています。 これらのcss_infoファイルをそのまま使うことも、改造して使うことも可能です。 mixi_CssAllFinisher.txtは、 css_infoファイルを使う処理の他に、 replaceInfoファイル を使った置換処理も行います。 詳細は 「マクロ mixi_CssFinisher.txt」 を参照してください。 マクロ mixi_generatePageSpecificCss.txtは、 cssをページ単位にまとめる作業をします。 カスタマイズしていない場合、1つのページには複数のcssファイルへのリンクがありますが、 『プロセルピナ』を使用したmixiカスタマイズでは、 これを １つのcssファイル(ページ特定CSS) へのリンクだけにします。 例えば、mixiカスタマイズを行うと mixiの home.pl からリンクされているcssファイルは pl_home.css だけになります。 マクロ mixi_generatePageSpecificCss.txtは、 この pl_home.css を作成する作業を行います。 同じように、 view_news.pl のページから参照されるcssファイルは pl_view_news.css だけに、 show_friend.pl のページからは pl_show_friend.css だけとなります。 この処理が必要になるのは使用されるcssはユーザーによって違うためです。 詳しくは、 「マクロ mixi_generatePageSpecificCss.txt」 を参照してください。 |
|||||
| [BACK] | |||||
| プロセルピナ | |||||
