[[OpenPNE on FreeBSD 7.1]]

&lastmod;
#contents
----
*TimeZone 再び [#x0ef7787]
http://blog.sarabande.jp/post/10552966084

http://kngy.net/2011/04/28/php5-timezone-warning/

PHP5をUPしたらタイムゾーン変更がきかなくなったった(゚◇゚)ガーン

PHP 5.4 から putenv(“TZ=..”) の廃止とタイムゾーンが未定義の場合は UTC が使われるようになったんだと
 //putenv('TZ=America/Puerto_Rico');
 date_default_timezone_set('Asia/Dubai');
 //putenv('TZ=Asia/Dubai');
   
*TimeZoneの変更 [#y801f1a0]
 ロシア / 中央連邦管区 / モスクワ
 Russia / Central Federal District / Moscow Europe/Moscow
 またはW-SU
 (MSK) +3
 (MSD) +4
 
 ニュージーランド / オークランド
 New Zealand / Auckland Pacific/Auckland 
 (NZST) +12
 (NZDT) +13
http://k-ishik.seesaa.net/archives/200704-1.html

ニュージーランドの例である。ニュージーランドでは、標準のタイムゾーン (NZST) は UTC より 12時間進んでおり、サマータイム (NZDT) は UTC の 13時間進んでいる。サマータイムは 10月の第一日曜から 3月の第三日曜までであり、ローカルタイムの切り替えはデフォルトの 02:00:00 に行われる。 

    TZ="NZST-12.00:00NZDT-13:00:00,M10.1.0,M3.3.0"
http://archive.linux.or.jp/JM/html/LDP_man-pages/man3/tzset.3.html

と有るので、/usr/home/openpne_est/config.php
 putenv('TZ=Europe/Moscow');

 putenv('TZ=MSK-3.00:00MSD-4:00:00,M3.5.0,M10.5.0');
 
*OpnePNE 2.12.* to 2.12.*+1 upgrade [#d9066bd4]
 piano:root {422} % tar cvfzp openpne_back.tar.gz openpne
 piano:root {428} % tar xvfzp OpenPNE-2.12.10.tar.gz
 piano:root {429} % cp -rp OpenPNE-2.12.10/ openpne/
 piano:root {430} % chown -R www:www openpne


*WYSIWYGエディタの追加 [#cf6cc6e4]
**TinyMCE [#a6833745]
FCKeditor等と比べ、HTMLタグのサニタイズ設定の柔軟さ等が特長とされる(http://ja.wikipedia.org/wiki/TinyMCE)とありますがどうなんでしょうか?

http://tinymce.moxiecode.com/download.php から最新版と http://tinymce.moxiecode.com/download_i18n.php
からランゲージパックをDL

日本語環境での対応プラグインなどは
http://sourceforge.jp/projects/tinymce-ja/

<script src="http://sourceforge.jp/projects/tinymce-ja/releases/compact.js" type="text/javascript" charset="utf-8"></script>


**fckeditor [#jb702bd6]
http://www.fckeditor.net/ 

http://www.fckeditor.net/whatsnew

からDLしてきて、解凍して、/usr/home/openpne_JP/public_html/js/へfckeditor フォルダをコピー

http://piano.smb.net/~openpne_JP/js/fckeditor/_samples/default.html

で動作確認
***管理画面のインフォメーション編集にFCKeditorを設置 [#kce4678a]
http://bestpc.s153.xrea.com/pukiwiki/pukiwiki.php?WYSIWYG%A5%A8%A5%C7%A5%A3%A5%BF%A4%CE%C4%C9%B2%C3
 cd /usr/home/openpne_JP/webapp/modules/admin/templates
 cp edit_c_admin_info.tpl /usr/home/openpne_JP/webapp_ext/modules/admin/templates/
 vi /usr/home/openpne_JP/webapp_ext/modules/admin/templates/edit_c_admin_info.tpl

 ({* 追加 ここから *})
 <script type="text/javascript" src="./js/fckeditor/fckeditor.js"></script>
 <script type="text/javascript">
 <!--
 var sBasePath = "./js/fckeditor/";
 var oFCKeditor = new FCKeditor( 'body' ) ;
 oFCKeditor.BasePath	= sBasePath ;
 oFCKeditor.Height	= 300 ;
 oFCKeditor.ToolbarSet = 'OpenPNE' ;
 oFCKeditor.ReplaceTextarea() ;
 //-->
 </script>
 ({* 追加 ここまで *})
***OpenPNE用ボタンの組合せを用意 [#h05cfd19]
/public_html/js/fckeditor/fckconfig.js
という定義ファイルに、FCKEditorのボタンの組合せが記述してあるので修正して、OpenPNE用のセットを作る。

fckconfig.js を開き、

 FCKConfig.ToolbarSets["OpenPNE"] = [
 	['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
 	['Cut','Copy','Paste','PasteText','PasteWord','- ','Print','SpellCheck'],
 	'/',
 	['Bold','Italic','Underline','StrikeThrough','- ','Subscript','Superscript'],
 	['OrderedList','UnorderedList','-','Outdent','Indent'],
 	['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
 	['Link','Unlink','Anchor'],
   	['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
 	'/',
 	['TextColor','BGColor'],
 	['FitWindow','-','About']
 ] ;
という記述を追加すればOKです。

ボタンの並びの区切りは、[ ],'/','-', 
という記号で、3段階の区切りが設定できるようです。

FCKConfig.ToolbarSets?["Default"]の定義が参考になるでしょう。


 apachectl restart
管理画面のインフォメーション編集にFCKeditorが現れる。 :)

が動作するとき「未知のツールバー」というダイアログが3回でる。

http://www.xugj.org/modules/QandA/index.php?post_id=7311
***日記に設置 [#b7b0497f]

 cd /usr/home/openpne_JP/webapp/modules/pc/templates
 cp h_diary_edit.tpl /usr/home/openpne_JP/webapp_ext/modules/pc/templates/
 cp h_diary_add.tpl /usr/home/openpne_JP/webapp_ext/modules/pc/templates/

 ({* 追加 ここから *})
 <script type="text/javascript" src="./js/fckeditor/fckeditor.js"></script>
 <script type="text/javascript">
 <!--
 var sBasePath = "./js/fckeditor/";
 var ofckeditor = new fckeditor( 'body' ) ;
 ofckeditor.BasePath	= sBasePath ;
 ofckeditor.Height	= 300 ;
 ofckeditor.ToolbarSet = 'OpenPNE' ;
 ofckeditor.ReplaceTextarea() ;
 //-->
 </script>
 ({* 追加 ここまで *})

-ToolbarSet?を指定しないと、Defaultという全部入りのボタンセットが自動で呼び出される。 
-Defaultの他に、Basicというシンプルなものも標準で用意されている。 
-ボタンの組合せは、
 /public_html/js/FCKeditor/fckconfig.js
という定義ファイルに記述してある。手書きで修正すればOK

***OpenPNE用にボタンの組合せを用意 [#f72ed1d3]
/public_html/js/FCKeditor/fckconfig.js
という定義ファイルに、FCKEditorのボタンの組合せが記述してある。

これを手書きで修正して、新たにOpenPNE用のセットを作ってみよう。

fckconfig.js を開き、

 FCKConfig.ToolbarSets["OpenPNE"] = [
 	['Source','DocProps','Save','NewPage','Preview','Templates'],
 	['Cut','Copy','Paste','PasteText','PasteWord','Print','SpellCheck'],
 	'/',
 	['Bold','Italic','Underline','StrikeThrough','Subscript','Superscript'],
 	['OrderedList','UnorderedList','Outdent','Indent'],
 	['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
 	['Link','Unlink','Anchor'],
 	['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
 	'/',
 	['TextColor','BGColor'],
 	['FontFormat','FontSize'],
 	['FitWindow','-','About']
 ];

という記述を追加すればOKです。

ボタンの並びの区切りは、

-[ ], 
-'/', 
-'-', 
という記号で、3段階の区切りが設定できます。

FCKConfig.ToolbarSets?["Default"]の定義を参考にして、いろいろ変更してみましょう。



*OpenPNE テンプレートのカスタマイズ [#q0c295a1]
**OpenPNE, Smarty [#fb88fc52]
OpenPNE は Smarty を使用していますが、そのテンプレートを修正したい場合、直接オリジナルのテンプレートを編集するのではなくカスタマイズ用のテンプレートを作成して修正することができます。

ディレクトリは下記になります。
オリジナルのテンプレート
 /openpne/webapp/modules/pc/templates/
カスタマイズ用のテンプレート
 /openpne/webapp_ext/modules/pc/templates/

/openpne/webapp_ext/modules/pc/templates/ ディレクトリは最初からはないので作成します。

次にカスタマイズしたいテンプレートをオリジナルのテンプレートディレクトリからカスタマイズ用のディレクトリにコピーします。

次に /openpne/config.php の
 define('USE_EXT_DIR', false);
を
 define('USE_EXT_DIR', true)
に変更すれば、カスタマイズ用ディレクトリにテンプレートが存在すればそちらを優先して使用されます。

カスタマイズ失敗してもカスタマイズ用のテンプレートを削除すればオリジナルのテンプレートが使用されますので、便利ですね。

この /openpne/webapp_ext/ ディレクトリはテンプレート以外でも webapp ディレクトリのファイルを上書きできます。
http://www.syuhari.jp/blog/archives/tag/smarty


http://trac.openpne.jp/wiki/pne-xhtmlcss/tips
*プロフィールのニックネームを氏名に変更 [#d13ec83f]
以前のバージョンだと、http://bestpc.s153.xrea.com/pukiwiki/pukiwiki.php?%A5%CB%A5%C3%A5%AF%A5%CD%A1%BC%A5%E0%A2%AA%B2%F1%BC%D2%CC%BE のように、「ニックネーム」が現れるファイルを全部変更するようですが、2.12 では、

 /OpenPNE_DIR/webapp/modules/admin/validate/do/update_c_admin_config_word.ini
で設定するようなので、ニックネームを氏名に変更。

*設置後のOpenPNEのカスタマイズ 見た目編 [#y955ad42]
スタイル指定の例追加するスタイル指定の記述の例を紹介します。どんなセレクタを指定すればいいのかについては後述します。 

始めに、セレクタについて簡単に説明をします。 

 body { スタイル宣言 }
 .partsHeading { スタイル宣言 }
 #Container { スタイル宣言 }
 #Body .homeMainTable th { スタイル宣言 }
 #Body, #Container { スタイル宣言 }
開き中括弧 { の前に body や .partsHeading などと書いてあります。この部分をセレクタといいます。セレクタは、スタイル指定の対象が『どこ』なのかを指します。 

-1行目はセレクタが body です。これは「body要素(bodyタグに囲まれた範囲)」を対象とします。 
-2行目はセレクタが .partsHeading です。これは「クラス名が "partsHeading" の要素」を対象とします。 
-3行目はセレクタが #Container です。これは「ID名が "Container" の要素」を対象とします。 
-4行目はセレクタが #Body .homeMainTable th です。これは「#Body の中の .homeMainTable の中の th 要素」を対象とします。 
-5行目はセレクタが #Body, #Container です。これは「#Body と #Container」を対象とします。 
**全体に背景画像を表示する [#r7d1a259]
 body {
        background-image: url(画像のURL);
 }
 #Body, #Container {
        background-color: transparent;
 }
body要素に対して背景画像を指定します。 

配色設定から指定できる背景色が #Body と #Container に適用されているので、背景色を透明に指定します。 

**全体をセンタリングする(右揃えにする) [#i5e81f61]
 #Container {
        margin: 0 auto;
 }
左右のmarginをautoにすることで、ボックスは中央に配置されます。 

 #Container {
        margin-left: auto;
 }
左のmarginだけをautoにすることで、ボックスは右寄せになります。 

**home系のメインテーブルの見出し部分を変える [#u1361139]
home系とは、h_home, f_home, c_home のことです。プロフィール確認ページ h_prof にも反映します。 

 #Body .homeMainTable th {
        border-color: #FF0000;
        background-color: #000000;
        color: #FFFFFF;
        font-weight: bold;
 }
 #Body .homeMainTable tr:first-child th,
 #Body .homeMainTable tr.first-child th {
        border-color: #00FF00;
 }
homeMainTable クラスのパーツの中にある、th要素(テーブルの見出しセル)に対するスタイル指定です。 

"first-child" と記述している部分は、テーブルの1行目のth要素だけを対象とするようなセレクタの記述です。 

**日記やトピック記事の画像をセンタリングする [#hafaa78c]
 #Body ul.photo {
        text-align: center;
 }
 #Body ul.photo li {
        margin: 0 10px;
 }
photo クラスのul要素に対して、インラインをセンタリングする指定を記述します。 li要素は既存のスタイルで display: inline が指定されています。 li要素の左右のmarginを指定して画像の間隔を調整します。 

日記は diaryDetailBox クラス、トピックは topicDetailBox クラスですが、共通の ul.photo をセレクタにすることでスタイル指定を共有できます。日記記事、トピック記事以外に、同じクラスが使われているイベント記事にも適用されます。

*OpenPNE 画像の保存、表示方法 [#id20b1c2]
OpenPNE Add comments OpenPNE で写真のアップロード機能を作成していて調べたことをまとめておきます。

**画像を保存するテーブル c_image [#u1e3fc1b]
OpenPNE では画像をDB に保存しています。保存するテーブル名は c_image です。
このテーブルにはプロフィール写真や日記の写真、スキンの画像などが保存されるようです。

 CREATE TABLE c_image (
  c_image_id int(11) NOT NULL auto_increment,
  filename text NOT NULL,
  bin longblob NOT NULL,
  r_datetime datetime NOT NULL default '0000-00-00 00:00:00',
  `type` text,
  PRIMARY KEY  (c_image_id),
  KEY filename (filename(100))
 ) ENGINE=MyISAM  DEFAULT CHARSET=utf8;filename 
画像のファイル名、任意につけていいみたいですが、プロフィール写真だと
 m_2_1188204858.jpg
という感じです。
最初の 「m 」はたぶんプロフィール写真を表す文字、

次の「2」はプロフィール写真のNo(2番目にアップした写真)

次の10桁の数字は多分 time() 関数で取得したアップロードした時間 
 bin 
 base64_encode した画像ファイルのバイナリデータ 
 type 
 画像のタイプ( jpg | gif | png ) 
 r_datetime 
 登録日時 

**DBに格納された画像の表示 [#s872b55b]
***表示方法 [#rcb575ff]
c_image テーブルに格納した画像を表示するHTML
 <img src="/img.php?filename=m_2_1188204858.jpg&w=180&h=180&m=pc">

Smarty のタグで書くと
 <img src="({t_img_url filename=$pet.image1 w=180 h=180})">

filename に c_image.filename を指定して、
w, h に幅と高さの最大値を指定する。

幅と高さは最大値を超えると自動的にリサイズする。


http://www.syuhari.jp/blog/archives/tag/smarty

***アルバムの画像の大きさ [#ub64aa2d]
http://trac.openpne.jp/changeset/6764

トップ   編集 差分 履歴 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS