[[OpenPNE on FreeBSD 7.1]] &lastmod; #contents ---- *WYSIWYGエディタの追加 [#cf6cc6e4] **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> ({* 追加 ここまで *}) 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','UniversalKey'], '/', ['TextColor','BGColor'], ['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