• フロントエンド ドキュメントマネージャ (FDM) 使用記#

  • dainiti Reply #1, 3 years, 3 months ago

    Reply
    [snippet] Front End Document Manager (FDM) v0.1b
    http://modxcms.com/forums/index.php/topic,14977.0.html

    日本語言語ファイル(tkfm さん提供)
    http://modxcms.com/forums/index.php/topic,32838.msg200078.html#msg200078

    フロントエンド ドキュメントマネージャ とは eForm をベースにしたドキュメントを追加、編集するためのスニペットです。
    ドキュメントを追加するためのスニペットとして NewsPublisher がありますが、これから使ってみようと思うならこちらをお勧めします。

    メリットとして以下があげられます
    (1)ユーザー、ウェブユーザーのどちらのIDでも利用できるため柔軟性が高い
       わざわざ、ウェブユーザーをつくらなくても管理者としてログインしていれば利用できる。
       そのため HPにログイン画面を作る必要がない。

    (2)QuickEdit と比較してのメリット
       QuickEdit は本文を中心とした編集しかできずドキュメントの追加はできない。
       テンプレート変数にも対応しており、どんなアプリケーションにも応用することができます。
       その為、管理画面に不満のある顧客に提供する画面を簡単に作成できるスニペットとして他に比較するものがありません。

    (3)メール送信スニペット eForm をベースにしています
       そのためフォームの作成方法などは eForm のドキュメントがそのまま応用できます。
       入力チェックなども eForm の強力な機能が使用でき NewsPublisher のようにプログラムでチェックをする必要がありません。

    以後、インストール方法から使い方までを順を追って説明していきます。


  • dainiti Reply #2, 3 years, 3 months ago

    Reply
    [snippet] Front End Document Manager (FDM) v0.1b
    http://modxcms.com/forums/index.php/topic,14977.0.html

    日本語言語ファイル(tkfm さん提供)
    http://modxcms.com/forums/index.php/topic,32838.msg200078.html#msg200078

    上記より本体と日本語言語ファイルをダウンロード解凍します。
    assets
    └ snippets
    └ FDM
    └ includes
    └ install
    └ lang

    (1)modx のルートフォルダに assets フォルダをコピーします。
    (2)[module]installFDM.php をエディタで開き管理画面よりモジュールを作成、ペーストして保存します。
    (3)今作成したモジュールを実行すると、チャンク(fdmEform)とスニペット(FDM)が作成されます。
    (4)インストール完了後に「install フォルダが削除できませんでした」と表示された場合には手動で削除してください。

    これで準備は完了です。


  • dainiti Reply #3, 3 years, 3 months ago

    Reply
    スニペットコールをするテンプレートを選択します。
    今回はサンプルサイトの MODxHostWithComments を例に説明します。

    MODxHostWithComments を開き [*content*] の前くらいに FDM のスニペットコールを挿入します。
              <div id="content">
                <div class="post">
                  [!FDM? &canmoderate=`Site Admins` &parent=`2` &id=`[*id*]` &model=18 &aliastype=`article_%createdon%`!]
                  <h2>[*longtitle*]</h2>
                  [*#content*]
                </div>
                <!-- close .post (main column content) -->
                [!Jot? &customfields=`name,email` &subscribe=`1` &pagination=`10`!]

    [*#content*] の # は QuickEditが起動しないように削除しておきます。
    これでテンプレートを保存。サンプルサイトを実行し、メニューより「blog」、一覧よりドキュメントを開くと FDM の追加、削除などのアイコンが表示されます。編集をクリックすると現在見ているドキュメントを編集することができます。

    標準ではテキストエディタの例となっておりこのままでは不便です。次回は記事の編集にTinyMCE を使う方法を説明します。

    注意事項

    今回のように Jot と併用する場合にやっておかなければいけないことがあります。
    fdmchunkie.class.inc.php 内の CChunkie というクラス関数が Jot で定義されたクラス関数とコンフリフトするためこちらの名前を fdmCChunkie などに変更します。
    class fdmCChunkie {
    var $template, $phx, $phxreq, $phxerror, $check;

    function fdmCChunkie($template = '') {

    fdm.class.inc.php 内にも呼び出しが3箇所あるのでこちらも変更しておきます。


  • dainiti Reply #4, 3 years, 3 months ago

    Reply
    今回は fdmEform チャンク内で TinyMCE を使うための説明です。
    まずは使いたい TinyMCE のボタンのレイアウトを先に決めておきます。

    (1)使いたい TinyMCE のツールバーレイアウトを設定します
       リソース管理 > プラグイン > TinyMCE > 設定 から 「Web Theme」のところで使いたいツールバーの種類を決めておきます。

    (2)fdmEform に JavaScript を貼り付けます
       まずはサンプルサイトよりウェブユーザにログインしておき「blog」 > 「Add Blog Entry」の画面を開きます。
       ブラウザーから「ページのソース」を開きます。

       まずは fdmEform コンテンツエリアの <fieldset> ~ </fieldset> を以下のような内容に変更します。
    <fieldset>
       <label for="content">Content:
          <div class="MODX_RichTextWidget">
             <textarea id="tvblogContent" name="tvblogContent" style="width:520px; height:350px;" eform="ã¡ãã»ã¼ã¸:textarea:1">[+content+]</textarea>
          </div>
        </label>
    </fieldset>


       ブラウザソースから FormBlog チャンクの [*blogContent*] の部分が JavaScript として展開されている部分をコピーします。
       ここから下の部分(必ず自分のブラウザソースから)をコピーし fdmEform 最後部にペーストします
    <script language="javascript" type="text/javascript" src="/modx/assets/plugins/tinymce3201/jscripts/tiny_mce/tiny_mce.js"></script>
    <script language="javascript" type="text/javascript" src="/modx/assets/plugins/tinymce3201/xconfig.js"></script>
    
    <script language="javascript" type="text/javascript">
    	tinyMCE.init({
    		  theme : "advanced",
    		  mode : "exact",
    		  width : "520",
    		  height : "350",
    		  relative_urls : true,
    		  document_base_url : "http://xxx.s78.coreserver.jp/modx/",
    
    		  remove_script_host : true,
    		  language : "ja",
    		  elements : "tvblogContent",
    		  valid_elements : tinymce_valid_elements,
    		  extended_valid_elements : tinymce_extended_valid_elements,
    		  invalid_elements : tinymce_invalid_elements,
    		  content_css : "/modx/assets/templates/maruwa/editor.css",
    		  entity_encoding : "named",
    		  cleanup: true,
    		  apply_source_formatting : true,
    		  remove_linebreaks : false,
    		  convert_fonts_to_spans : "true",
    		  file_browser_callback : "myFileBrowser",
    		  theme_advanced_blockformats : "p,h1,h2,h3,h4,h5,h6,div,blockquote,code,pre,address",
    		  plugins : "style,advimage,advlink,searchreplace,print,contextmenu,paste,fullscreen,nonbreaking,xhtmlxtras,visualchars,media",
    		  theme_advanced_buttons0 : "",
    		  theme_advanced_buttons1 : "undo,redo,selectall,separator,pastetext,separator,search,replace,separator,nonbreaking,hr,charmap,separator,image,link,unlink,anchor,media,separator,cleanup,removeformat,separator,fullscreen,print,code,help",
    		  theme_advanced_buttons2 : "bold,italic,underline,strikethrough,sub,sup,separator,separator,blockquote,bullist,numlist,outdent,indent,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,formatselect,separator,styleprops",
    		  theme_advanced_buttons3 : "",
    		  theme_advanced_buttons4 : "",
    		  theme_advanced_toolbar_location : "top",
    		  theme_advanced_toolbar_align : "left",
    		  theme_advanced_path_location : "bottom",
    		  theme_advanced_disable : "",
    		  theme_advanced_resizing : true,
    		  theme_advanced_resize_horizontal : false,
    		  plugin_insertdate_dateFormat : "%Y-%m-%d",
    		  plugin_insertdate_timeFormat : "%H:%M:%S",
    		  extended_valid_elements : "iframe*",
    		  button_tile_map : false 
    
    	});
    	function myFileBrowser (field_name, url, type, win) {		
    		var cmsURL = '/modx/manager/media/browser/mcpuk/browser.php?Connector=/modx/manager/media/browser/mcpuk/connectors/php/connector.php&ServerPath=/modx/&editor=tinymce&editorpath=/modx/assets/plugins/tinymce3201';    // script URL - use an absolute path!
    		switch (type) {
    			case "image":
    				type = 'images';
    				break;
    			case "media":
    				break;
    			case "flash": 
    				break;
    			case "file":
    				type = 'files';
    				break;
    			default:
    				return false;
    		}
    		if (cmsURL.indexOf("?") < 0) {
    		    //add the type as the only query parameter
    		    cmsURL = cmsURL + "?type=" + type;
    		}
    		else {
    		    //add the type as an additional query parameter
    		    // (PHP session ID is now included if there is one at all)
    		    cmsURL = cmsURL + "&type=" + type;
    		}
    		
    		tinyMCE.activeEditor.windowManager.open({
    		    file : cmsURL,
    		    width : screen.width * 0.7,  // Your dimensions may differ - toy around with them!
    		    height : screen.height * 0.7,
    		    resizable : "yes",
    		    inline : "yes",  // This parameter only has an effect if you use the inlinepopups plugin!
    		    close_previous : "no"
    		}, {
    		    window : win,
    		    input : field_name
    		});
    		return false;
    	}
    function myCustomOnChangeHandler() {
    	documentDirty = true;
    }
    </script>

    ここまでできたら保存し、サンプルサイトから「blog」 > 一覧から文書を開いて FDM の編集ボタンをクリックしてください。
    コンテンツが TinyMCE で開けば成功です。


  • dainiti Reply #5, 3 years, 3 months ago

    Reply
    FDM を使ってドキュメントを追加、修正した場合に下のようなメッセージが表示されます。
    ドキュメントへのリンク:ページタイトル ありがとうございます。
    入力された情報は無事送信されました。
    このときのページタイトルへのリンクにサブディレクトリまでのパスが含まれておらずクリックしても「404 Not Found」になってしまいます。
    modx をサイトルートで使用している場合、この問題に気が付くことはありません。

    fdm.db.class.inc.php の221行目赤字部分を削除し相対パスにします。
    if (is_array($tpath)) return '/'.join('/',array_reverse($tpath)); else return '';

    さらに、modx 標準に準拠したい場合 198行目を修正、赤字部分を追加します。
    $path=$this->getPath();
    $path=$modx->config['base_url'] . $this->getPath();

    グローバル設定でフレンドリーURLの「エイリアスパスを使用」を「いいえ」にしている変人は200行目赤字部分を削除します。
    $relUrl=$path.'/'.$docalias;
    $relUrl=$docalias;

    このあたりは人それぞれのライフスタイルにより変わってくる部分ですが変人といわれようが自分のスタイルを貫くことが大切です。

    注意事項

    fdm.db.class.inc.php にはアラビア文字が含まれており不用意にテキストエディタで編集保存してしまうと文字化けなどの問題が発生します。
    このような場合、目的の場所から離れている箇所での文字化けであり問題の解決に時間がかかってしまう結果となります。
    お使いのエディタが日本語以外に対応していないとわかれば、レンタルサーバのファイルマネージャから編集するか
    yama さんお勧めの emeditor 無料版などの利用をお勧めします。
    http://modxcms.com/forums/index.php/topic,32838.msg201384.html#msg201384


  • dainiti Reply #6, 3 years, 3 months ago

    Reply
    ドキュメントの編集時に以下のよなメッセージが表示される場合があります。
    This form was already submitted succesfully. There is no need to submit your information multiple times.
    このメッセージを改善するにはassets/snippets/eform/lang/japanese-utf8.inc.php に次の行を追加してください。
    $_lang['ef_multiple_submit'] = "<p>あなたの子どもよ >> MEGU</p>";
    このメッセージはメールコンタクト Contact Us (eForm) と共有されます。
    どちらも表示したくない場合はfdm.class.inc.php 407行目を 1→0 に変更します。
    'protectSubmit'=>'1',  // else problem
                                 'protectSubmit'=>'0',  // else problem

    つづく。。。


  • dainiti Reply #7, 3 years, 3 months ago

    Reply
    ドキュメントの追加、編集時にいずれのメッセージも表示せずに更新後のドキュメントを表示したい場合
    fdm.class.inc.php 382行目以降に赤字部分を追加します。不要な部分はコメントアウトまたは削除します。

    if ($_SESSION['fdm']['redirect']=='current'){
    // $link=str_replace('[+url+]',$_SESSION['fdm']['url'],$_lang['doclink']);
    // $link=str_replace('[+pagetitle+]',$_SESSION['fdm']['pagetitle'],$link);
    // echo $link;
    $url=$_SESSION['fdm']['url']; unset($_SESSION['fdm']);
    unset($_SESSION['fdmid']);
    header('Location: '.$url); } else {
    $url =$_SESSION['fdm']['redirect'];
    unset($_SESSION['fdm']);
    unset($_SESSION['fdmid']);
    header('Location: '.$url);
    }


  • dainiti Reply #8, 3 years, 3 months ago

    Reply
    (1)新規作成でテンプレートを指定した場合にいやなのが毎回タイトルが入ってしまうこと。
       これは不要なので消してしまいましょう。
       オリジナル fdm.class.inc.php の288行目のreturn $fields; の前に以下のコードを挿入します。
    	if ($_SESSION['fdm']['action']=='add') {
    		$fields['pagetitle']='';
    	}
    	return $fields;					//ä¸ã®ï¼è¡ãæ¿å¥ãã¾ã
    


    (2)サンプルサイトで使ってて「おゃ」と思うのが longtitle
       これが入ってないとページにタイトルが表示されません。自分のHPで longtitle を使っている場合にはこの処理が必要です。
       オリジナル fdm.class.inc.php の311行目のforeach ( の前に以下のコードを挿入します。
    	$fields['longtitle']=$fields['pagetitle'];	//<= ãã®è¡ãæ¿å¥ãã¾ã
    	foreach ($fields as $key=>$val){
    		$docObj->Set($key,$val);// set posted fields in the doc
    	}
    


  • dainiti Reply #9, 3 years, 3 months ago

    Reply
    ドキュメントの新規作成、編集時のポップアップメッセージをなくしたい場合に以下の部分を修正します。
    以下、日本語 lang ファイルの例です(japanese-utf8.inc.php を変更)

    [+user.canadd:is=`1`:and:if=`[+link.disableadd+]`:is=`0`:then=`
    <a href="[+link.add:esc+]" onclick="return confirm('ドキュメントを新規作成しても宜しいですか?')"><img src="[(base_url)]manager/media/style/MODx/images/icons/folder_page_add.gif" width="18" height="18" /></a>
    `:strip+]

    [+link.disableedit:is=`0`:then=`
    [+user.ismoderator:is=`1`r:if=`[+user.isauthor+]`:is=`1`:then=`
    <a href="[+link.edit:esc+]" onclick="return confirm('このドキュメントの編集を行いますか?')"><img src="[(base_url)]manager/media/style/MODx/images/icons/logging.gif" width="16" height="16" /></a>
    `:strip+]
    `+]

    上記赤字部分を削除するだけです。


  • dainiti Reply #10, 3 years, 3 months ago

    Reply
    [snippet] Front End Document Manager (FDM) v0.1b
    http://modxcms.com/forums/index.php/topic,14977.0.html

    以上で使い方の基本的な説明は終了です。
    もっと詳しく理解したい場合には、tkfm さんの方へ質問してください。
    こちらでも質問をお受けいたします。