CentOS51でバックアップサーバ/(5)OpenPNEのバージョンアップ2 の変更点


#navi(CentOS51でバックアップサーバ)

- システムのアップグレードは、難なく終了した(^^)が、懸案のカスタマイズ個所の継承作業が必要となる。
- 大きくは、タイトル画面等の変更、フォントの変更、画像のオーバレイ表示(lightbox)対応の3点である。(2008/06下旬に実施した記録)


#contents

** タイトル画面の変更 [#y32e5442]
- 基本的に、skin関係のイメージファイルを入れ替えるだけである。カスタマイズ済みの現行版からコピーしてくればよい。

 [root@kuraric51 OpenPNE]# cd public_html/skin/
 [root@kuraric51 skin]# ls
 001_openpne_red     004_openpne_green  007_openpne_purple  dummy.gif
 002_openpne_beige   005_openpne_blue   900_openpne_ver28
 003_openpne_yellow  006_openpne_navy   default
 [root@kuraric51 skin]# mv 900_openpne_ver28/ 900_openpne_ver28_org
 
 [root@kuraric51 skin]# cp -arp /var/www/_OpenPNE20080622/public_html/skin/900_openpne_ver28/ .

- 即、反映した。

** 配色関係 [#wa7c9bdc]
- 管理者画面にログインする(http://kurarinet.com/sns/?m=admin)
- 画面の配色設定がかなり変わっている。8項目しかない(従来は19項目)。ただ、カスタマイズされた部分は、その設定がデータベースに含まれているので、を自動的に引き継いでいる模様だ&br;
   &ref(color_code.jpg,,50%,color_code);&br;

- ただ、なんか少し違うな。。。。と思うが、まぁ贅沢は言わないことに。


** フォントは? [#f396bae7]
- 従来のcss関連のファイルの位置が変更しており、commons.css/css/main/commons.css そんなものない!
- ただ、よく見たら、文字は既にゴシック系になっている!
- フォント関係の設定ファイルはこちらにあった

 root@kuraric51 public_html]# vi xhtml_style.php
 ===
 /*===============
  * OpenPNE全共通指定
  *---------------------------*/
 body {
         font: normal normal normal 10pt/1.2 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", "MS PGothic", Osaka, sans-serif;
 }
 input,
 textarea,
 select {
         color: #333333;
         font-size: inherit;
         font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", "MS PGothic", Osaka, sans-serif;
 }

- というわけで、フォント設定もあり、ゴシック指定もあるので、とりあえずこのまましておく。
&br;
★フォント設定があることに安心してしまっていたのだが、やはり問題があった!

   &ref(font_NG.jpg,,50%,NG);&br;
   &ref(font_OK.jpg,,50%,NG);&br;
- 日本語表示はOKなのに、半角英数文字はRoman系の方が優先されているようだ。スムージングが効いていなくて、線が弱い。
- 設定変更だが、そもそもfont指定は、手前のフォント名から優先順位が高くなっているだけなので、以前のように、「sans-serif , "MS ゴシック"」を前へもってくればよい。
- 上記の xhtml_style.php の該当個所2箇所を、以下のように修正した

        font: normal normal normal 10pt/1.2 sans-serif , "MS ゴシック" , "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", "MS PGothic", Osaka ;
 
       font-family: sans-serif , "MS ゴシック" , "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", "MS PGothic", Osaka ;
- 結果はOKに! 1ヶ月ぶりにすっきりした。

   &ref(font_OK.jpg,,50%,OK);&br;
   &ref(font_NG.jpg,,50%,OK);&br;

【★ この項追記 2008/08/04】



** 画像のオーバレイ表示(Lightbox対応) [#i5348dfd]
- 管理画面のカスタムCSSではligtboxもちゃんと引き継いでいる。ただし、機能はしていない。本体のソースは未修正なので、当然と言えば当然と納得して、カスタマイズ作業に着手する。
- ちょいちょいと日記関係のスクリプトファイル(fh_diary.tpl 等)を修正すれば簡単! と思ったら大間違いだった。3日程はまった(^^;)
- 結論から言うと、システムの大幅な変更で、前回のやり方では対応しなくなった。肝心のスクリプトが全く変わっていて、パッチの当てようがなかったのです。
- あわててネット検索したら、対応記事が一つ見つかった! [[OpenPNE拡張モジュール Ver.0.3.0>http://shima3.seesaa.net/article/100544687.html]]
- 今までと少しやり方が違っていて、ソースの修正は不要とある。これを試してみることにする。

(1) まず、拡張モジュールをダウンロードし、関連ファイルを、指定の個所にコピーする

 [root@kuraric51 ~]# wget http://sourceforge.jp/projects/usamimi/downloads/31569/extra030.zip
 --14:32:17--  http://sourceforge.jp/projects/usamimi/downloads/31569/extra030.zip
 
 [root@kuraric51 skin]# cp icon_window.gif /var/www/OpenPNE/public_html/skin/
 [root@kuraric51 js]# cp easy.lightbox.js /var/www/OpenPNE/public_html/js/

(2) lightbox は plus とし、これをダウンロードする。サンプルを解凍し、resource ディレクトリをそのまま、OpenPNE/public_html 直下に設置する。

 [root@kuraric51 ~]# wget http://serennz.sakura.ne.jp/toybox/lightbox/lightbox_sample.zip
 [root@kuraric51 ~]# unzip ightbox_sample.zip
 [root@kuraric51 ~]# cp -arp resource /var/www/OpenPNE/public_html/


(3) それぞれの関連ファイルを、指定の個所にコピーする

 [root@kuraric51 skin]# cp icon_window.gif /var/www/OpenPNE/public_html/skin/
 [root@kuraric51 js]# cp easy.lightbox.js /var/www/OpenPNE/public_html/js/
 
(4)管理画面の設定
- まず、前回カスタマイズの、css、html挿入などの情報を削除した。
- 「デザイン」->「バナー設定」を選び、「サイドバナー」という項目の「任意HTMLで表示する」の方をチェックし、add_lightbox.txtの内容を貼付ける。 「サイドバナー設定を確定する」ボタンを押して、内容を反映させます。&br;
   &ref(insert_banner.jpg,,50%,banner);&br;

 add_lightbox.txt
 ーーーーーーーー
 <script type="text/javascript">
 //<![CDATA[
 Event.observe(window,'load',loadEasyLightbox,false);
 function loadEasyLightbox() {
 	var s = document.getElementsByTagName("head")[0].appendChild(document.createElement("script"));
 	s.type = "text/javascript";
 	s.charset = "utf-8";
 	s.src = "./js/easy.lightbox.js?1";
 }
 //]]>
 </script>


(4) 最後に、easy.lightbox.js の設定を修正し、lightbox_plus対応とする
 [root@kuraric51]# /var/www/OpenPNE/public_html/js/easy.lightbox.js
 =====
 EasyLightbox.lightbox_type = 0;     ★plus対応


(5)確認
- 日記を表示させると、Lightboxに対応している。plusの場合は、今までと少し違って2枚以上の写真が添付されている場合は、いちいち閉じなくても、< と > で切り替える機能が付いている。&br;
   &ref(lightbox_OK.jpg,,50%,OK);&br;

- ただ、日記本文だけで、日記のリストには対応していない。またコミュニティのトピックにも対応している。


(6)注意事項
- 管理画面の修正を行っているが、これらはすべてデータベースに含まれている。記事や写真も全部一緒なので、データベースを更新すると設定もクリアされてしまう。1回だけだが、最終移行の際には、管理画面関係の作業は全部やり直す必要がある。

- 実は、templateファイルを試験用に修正した時にキャッシュみたいなものが残ってしまい、設定変更を反映させるためには、そのファイルを削除する必要があった。 詳細は割愛するが、それがわかるまでの道のりは遠かった(^^;) 


** OpenPNEリカバリーの手順の最終確認 [#i121e4d4]
- 後半はたいへんだったが、基本的に OpenPNEは新バージョンへの移行見通しがついた。
- 具体的な手順をまとめると、以下のとおり。、

 ①前提条件
 ・OpenPNE プログラムは更新しない
 ・データタベースのみ移行し、upgarade後の動作を確認する
 
 ②現サーバで、データベースopnepneをdumpする
 
 ③新サーバに転送する
 ・WinSCPで、openpne_dumpのみ、/home/eizo に直接コピー
  [root@kuraric51 www]# ls -l /home/eizo/openpne_dump
 -rw-rw-r-- 1 eizo eizo 19222054  6月 25 05:00 /home/eizo/openpne_dump
 
 ④新サーバで、データベース内容を更新する(事前消去は不要)
 [root@kuraric51 www]# mysql -u root -ppassword openpne < /home/eizo/openpne_dump
 
 ⑤データベースのupgarade
 ・upgarade.sqlのパスに注意!
 
 [root@kuraric51 www]# mysql -u root -ppassword --default-character-set=utf8 openpne < OpenPNE/setup/sql/mysql41/upgrade/upgrade-2.10to2.12.sql
 
 ⑥mysqlの再起動
  [root@kuraric51 www]# /etc/rc.d/init.d/mysqld restart
 MySQL を停止中:                                            [  OK  ]
 MySQL を起動中:                                            [  OK  ]
 
 ⑦管理画面の再設定
 ・lightbox関連のみ再設定
 ・カスタムCSSの挿入個所を削除 「デザイン」-「配色・CSS変更」-「カスタムCSS」
 ==========================
 /*lightbox.css 2008/04/11 */
  (略)
 
 ・HTML挿入個所を削除(2ヶ所)「デザイン」-「HTML挿入」ー「ログイン前フッター」
 「ログイン前フッター」
 ・挿入した <head>~</head> を削除
 ==========================
 <head>
 <script type="text/javascript" src="js/spica.js"></script>
 <script type="text/javascript" src="js/lightbox_plus.js"></script>
 </head>
 
 「【PC版】HTML挿入(HTML head内) 」
 ・挿入した2行を削除
 ==========================
 <script type="text/javascript" src="js/spica.js"></script>
 <script type="text/javascript" src="js/lightbox_plus.js"></script>
 
 ・サイドバナーを追加する
 「デザイン」-「バナー設定」ー「サイドバナー設定」-「任意HTMLで表示する」ー「ログイン後」
 add_lightbox.txt をコピーペーストする


#navi(CentOS51でバックアップサーバ)
トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   リンク元