PowerCMS ブログ

TinyMCE の設定変更方法について、サポートによくいただくお問い合わせ第二弾です。第一弾はこちらです。

• TinyMCE のバージョンによって利用可否、記述の方法が異なる場合があります。
• PowerCMS 5 から TinyMCE 4（v4と表記）になりました。それ以前のバージョンでは TinyMCE 3（v3と表記）となります。
• TinyMCE 4 と TinyMCE 3 とではプラグインの構成や機能等が異なっているため、TinyMCE 3 から 4 に移行した際に必要な機能が使用できなくなる可能性があります。そのため PowerCMS 5 では下位バージョンからのアップグレードの場合には TinyMCE 3 が維持されるようになっています。どのバージョンの TinyMCE を使用しているかは [システム]-[設定]-[PowerCMS] の TinyMCE 設定に表示されている「バージョン」の項目から確認することができます。使用するTinyMCEのバージョンは環境変数 TinyMCEVersion により変更することができます。

href の値で javascript: を許可したい

対象バージョン：v4

参考：https://www.tiny.cloud/docs-4x/configure/url-handling/#allow_script_urls

『高度な設定』への指定例

tinymce_editor.init['allow_script_urls'] = true;

カラーパレットの色を変更する

対象バージョン：v4

参考：https://www.tiny.cloud/docs-4x/plugins/textcolor/#textcolor_map

※plugins、advanced_buttons1 の設定は backcolor 以外はもともと入っている可能性があります。ご確認ください。

main タグが p タグで括られないようにしたい

対象バージョン：v4

参考：https://www.tiny.cloud/docs-4x/configure/content-filtering/#forced_root_block

『高度な設定』への指定例

tinymce_editor.init['forced_root_block'] = false;

利用の注意点

改行で p が入らなくなるのではなく br に変わる動きをするため、大元の動作が変わります。改行しようと shift + enter すると結局 p が復活するため注意してください。

前回の記事（次のURL)で、"郵便番号から住所を自動入力する"タイプのフォームを構築する方法を解説しましたが、

ContactFormでフォーム項目の種類に無い項目をCMSテンプレートのカスタマイズのみで作る（その3::郵便番号から住所自動入力）

実は、過去に次のような記事もありました（確認が漏れていた。。。）

カスタムオブジェクトを利用して郵便番号から住所を検索するAPIを作る

ちなみに、このカスタムオブジェクトを利用する方法の場合、CMSが郵便番号から住所を返すAPIを提供し、更にCMSのDBが郵便番号-住所の対照表となるデータを保持します。その為、次のメリットがあります。

• 実装を全てPowerCMSで管理できる。
• より細やかなカスタマイズが出来る。

一方で、前回の記事で紹介したJSライブラリ「ajaxzip3」を使う方法は外部サービスに依存しますが、カスタムオブジェクトを利用する方法と比べて簡単に実装が出来ます。

これから実装を試みられる方は、前述の両者の特徴を踏まえた上で、状況にマッチする方法を選択されるとよいでしょう。

さて、ここからが本題。

はじめに

前回は企業の担当者様からのお問い合わせを受け付けるフォームを想定しましたが、住所入力欄は "1つ" しかありませんでした。だた、ウェブ上で見られるフォームの中には、複数の住所入力欄を持つものもあります。

そこで今回は前回の応用編として、2つの住所入力欄「本店所在地」「ご担当者さまの住所」を持つフォームを構築する方法を解説します。

※今回は本文冒頭の前回記事にて構築したフォームに機能追加する、という形で説明致します。

作成手順

フォーム項目「ご担当者さまの住所」の追加

次の通り、フォーム項目「ご担当者さまの住所」を追加する為のCSVファイルを設けました。

フォーム項目（郵便番号から住所自動入力__ご担当者さまの住所）.csv

当該CSVを用いて、次の手順でフォーム項目を作成します。

1.フォームを追加する対象のウェブサイトの管理画面のメニュー「フォーム＞フォーム項目」をクリック。

　→「フォーム項目の管理」画面が開く。

2.フォーム項目一覧上端のテキストリンク「CSVからインポート」をクリック。

　→「参照」ボタンが表示される。

3.「参照」ボタンをクリックし、前述のインポート用CSVファイルを選択する。

　→「参照」ボタン右側に、テキストリンク「送信」が表示される。

4.テキストリンク「送信」をクリック。

　→CSVのインポートが実行され、CSVに記載されたフォーム項目が作成される。

作成が成功すると、「フォーム項目の管理 」画面にて次のフォーム項目が追加された事が分かります。

• ご担当者様の住所

フォーム項目の概要は、次の通りです。

• ご担当者さまの住所：
  • フォーム項目「本店所在地」と同様の、住所入力欄のフォーム項目。
    「本店所在地」とほぼ同じだが、次の点で異なる。
    • 「本店所在地」との併用が前提。
    • チェックボックス「本店と同じ」がある。

これを、対象のフォームの「本店所在地」の下に来るよう配置してください。

カスタマイズ後のイメージ

フォームの入力画面は次のようになります。

「ご担当者さまの住所」は「本店所在地」と同様に、郵便番号から住所を自動入力できます。

これに加え「ご担当者様の住所」では、「本店所在地」に入力がある場合でチェックボックス「本店と同じ」にチェックすると、入力を省く事ができます。

「本店と同じ」にチェックを入れた上で、他の入力必須項目に入力し、「確認」ボタンから確認画面に進むと、入力内容は次のように表示されます。

フォーム項目「ご担当者さまの住所」の仕組み

この辺りのロジックを「ご担当者さまの住所」のCMSテンプレートから見てみると、次のようになっています。

jQuery(function ($) {

    const str__same_as_company  = '（本店所在地と同じ）';
    const $addrRow = $('#<mt:var name="field_basename">-field'),
        $addr = $('[name="<mt:var name="field_basename">"]' ),
...
（中略）
...

    $( 'input[name="<mt:var name="field_basename" />_same_as_company"]').on( 'change', function(){
        if ( $addr.val() === str__same_as_company ) {
            $addr.val( '' );
            setValueToField();
        }
        else{
            $addr.val( str__same_as_company );
        };
    } );

変数 $addr は、「ご担当者さまの住所」の本体となるinput要素です。

入力画面で「確認」ボタンが押されてシステムが入力チェックを行う際、input要素の入力値が空か否かを見るのですが、「本店と同じ」がチェックされると、その際の住所の入力・未入力に関わらず、必ず文字列「（本店所在地と同じ）」がinput要素のvalue属性の値として入ります。

これにより、複数の住所入力欄に同じ住所を入力する際に、入力を省く機能を実現しています。

最後に

今回は、"郵便番号から住所自動入力するタイプの住所入力欄" が複数あるフォームを紹介しました。
法人様からのお問い合わせを受け付けるフォームの構築では、今回のような実装が要件に上がる事が少なくないのではと思われます。
その際にもPowerCMSを用いて対応する手段がある、という事を知っていただければ幸いです。

うまくいかないから原因を調査したら、とても単純な見落としだったということがあったりします。こんにちは。

単純すぎて会社に怒られそうですが、そんなゆるい事例をいくつか紹介します。
※ すべて自身の実話です

非公開のカスタムオブジェクトが出力されないと悩む

カスタムオブジェクト、メニュー名はカスタム項目ですね。

カスタム項目を新規で作成すると、ステータスの初期選択が「下書き」になっています。
テンプレートを作っても再構築をしても、公開してないものは出しません。

<MTCustomObjects>
  <$MTCustomObjectID$>: <$MTCustomObjectName$>
</MTCustomObjects>

モディファイアを指定して出すことは可能です。

<MTCustomObjects include_draft="1">
  <$MTCustomObjectID$>: <$MTCustomObjectName$>
</MTCustomObjects>

ついでに、MTCustomObjects タグを limit モディファイアなしで書くと「9999」が上限になります。
未指定にすれば、すべてが出力されると思っていると、つまずく日が来るかもしれませんね。

外部プレビューの公開期限が過ぎている URL を報告した

何度かやっちゃっていることを白状します。

ExternalPreview プラグイン (外部からのプレビュー) は、管理画面のアカウントなしに外部から記事/ウェブページ/リビジョンをプレビューすることができるようになるプラグインです。
ふわっとまとめると、ログイン不要プレビューでしょうか。

「有効期限」を設定しておき、期限が切れたらプレビューできないようにすることが可能です。
[メール通知] ボタンを押すと、メーラーが立ち上がり外部プレビュー用の URL が作成されます。

「有効期限」を過ぎている状態で [メール通知] で作成される URL を見てほしい人に連絡して「見えないよ」と言われてしまいました。報告する前に自分で見ておきましょう。

もう一点注意が必要なこととして、[メール通知] で作成された URL と、プレビューを行ったときのブラウザーに表示される URL は違う点です。
[メール通知] で作成された URL にアクセスすると、パラメーターに従ってプレビュー用のファイルを作るという動作をしますが、プレビュー用のファイルは短時間で削除されます。
ブラウザーに表示されている URL はプレビュー用ファイルの URL ですので、使いまわしができません。

なお URL に「mt-external-preview.cgi」が含まれていれば大丈夫です (期限が切れていなければ)。

ExternalPreview プラグインは、オプションプラグインのため使用するにはインストールが必要です。
さらに plugins_customized に属するので注意が必要です。

ユーザーガイドから引用

いくつかのプラグインは、標準のプラグイン格納ディレクトリである $MT_DIR/plugins とは異なるディレクトリに設置する必要があります。
これは、plugins ディレクトリ内のプラグインが初期化された後にそれらのプラグインが初期化されるようにする必要があるためです。
こういったプラグインは、パッケージ内では plugins_customized ディレクトリに同梱されています (ディレクトリ名は変更できますが、以下ではこの前提で設定しています)。

1. mt-config.cgi に下記内容を記述します

   
   PluginPath plugins
   PluginPath plugins_customized
   

2. plugins_customized ディレクトリ内にプラグインを設置します

環境変数 DebugEmailAddress のせいでメールが届かないと焦る

DebugEmailAddress は、ContactForm や、ワークフローのメール通知で送信されるメールの宛先を設定した内容に差し替える環境変数です。

テスト環境などで、メール送信先を固定して誤送信の防止に便利な環境変数ですが、設定したことを忘れていると、思ったところに送信されず、メール送信ができないと勘違いすることがあります。
送信テスト時、運用開始時には残さないようにご注意ください。

簡単に動作の解説をしますと、MT::Mail を利用してメールを送ると、「To」が DebugEmailAddress で指定した宛先に差し変わります。
「To」だけを差し替えるので「Cc」と「Bcc」はそのまま送ってしまいます。

DebugEmailAddress
https://www.powercms.jp/products/document/config-directives/debugemailaddress.html

なんてことなさすぎて、怒られそうなのでこのあたりで終わります。