PowerCMS X ブログ

2024年10月9日、「はじめての PowerCMS X ハンズオン ブログチュートリアル編」と題して、オンラインにてハンズオンを開催しました。多くの方にご参加いただき、誠にありがとうございました。

タイトルの通り、PowerCMS X をまだあまり使ったことがない方へ向けて一緒にブログを作っていく内容になっており、実際に手を動かして作ったことで、より PowerCMS X を理解していただけたかと思います。

講師をつとめた佐藤 聖の初ハンズオンということもあり、何度もリハーサルを重ね、本番を迎えました。

「はじめての PowerCMS X ハンズオン ブログチュートリアル編」概要

PowerCMS X の特徴であるモデル機能を使って、ブログの作り方をご紹介しました。

このハンズオンでは PowerCMS X に初めから用意されているモデルは使用しませんでした。そのためスペース作成から始まり、モデルの作成、ビューの作成、URLマップの設定などブログを作るための要素すべてを1から構築しました。

オンラインでのハンズオンということもあり、個別のエラーなどへのフォローはできませんでしたが、多くの方に今回の目標である「ブログ作成」を達成していただけたのではないかと思います。

お知らせ

今回、予想を上回るお申し込みをいただきましたため、同じ内容のハンズオンを来月11月13日(水曜日)にも開催することが決定いたしました。
次回のハンズオンにも多くの皆様にご参加いただけることを心待ちにしております。

• はじめての PowerCMS X ハンズオン ブログチュートリアル編【11月開催】

今回いただいたアンケート結果から、今後はよりステップアップしたハンズオンも検討してまいります。

また、このたび X(旧 Twitter)にて PowerCMS X 公式アカウント 別ウィンドウで開きますの運用を開始しました。
リリース情報やイベント情報を投稿していきますので、ぜひフォローしてご活用ください。

カテゴリー：イベント・セミナー情報

投稿者：Matsuoka

このプラグインは次のリリースにて正式に提供を開始予定です。

PowerCMS Xのリッチテキストエディタ(TinyMCE)にはプラグインの機能があり、カスタムボタンを追加することができます。
カスタムボタンを追加している例としては、標準プラグインの「SimplifiedJapanese」「BannedWords」「MachineTranslator」「EditorDiff」などがありますので参考にしてください。

PowerCMS Xプラグインを作成してボタンを追加するほかに、TinyMCEそのもののプラグイン(JavaScriptで書きます)を作成してファイルを /powercmsx/assets/js/tinymce6/plugins/ 配下に設置するという方法もあります。

でも、もっと手軽にボタンを追加したいというケースに応えられるよう、次のバージョンのリリースでプラグイン「TinyMCE」をアップデートして管理画面でボタンを追加できるようになりましたので紹介します。

プラグインのダウンロード

• TinyMCE (17.5KB)

プラグインを差し替え後、スキーマのアップグレードを実行してください。

エディタひな形のスニペットテキストエリアを大きくする

※ 次のバージョンではアップグレード時に自動で反映されるようになっています。

「プロフィールの編集」画面で「開発者モード」にチェックを入れて保存します。

モデル「boilerplate」の編集画面でカラム「snippet」の「詳細」をクリックして「エディタの高さ」欄の数字を大きくします。
モデルを保存します。保存後は「開発者モード」のチェックを外してください。

カスタムボタンの追加方法

• エディタひな形の作成・編集画面を開きます。
• ラベル : ボタンのラベルを入力します。
• 説明 : ボタンの title属性値を入力します。ラベルと説明は翻訳フレーズに対応しています。
• エディタひな形の作成・編集画面に「ボタン」チェックボックスが追加されています。ここにチェックを入れます。
• ラベルの代わりにアイコンを使う場合はアイコン画像のパスを入力してください。
• ベースネームを入力します。ここに入力された値がプラグイン「TinyMCE」の設定「ツールバー」に登録する文字列となります。
• スニペット欄には HTMLのひな形の代わりに実行する JavaScriptコードを記述します。

「見出しレベル2」ボタンを追加する

「見出しレベル2」は書式設定や「styles」メニューからも設定できますが、ボタンが出ていたほうがわかりやすいですし、圧倒的に使いやすいです(もちろん限られた領域にボタンを増やしすぎるとわかりにくくなりますが)。

各項目の設定値は以下のとおりです。

最小限の JavaScriptコード

「スニペット」欄に次のコードを貼り付けます。

let editor = tinymce.activeEditor;
let html = editor.selection.getContent();
editor.insertContent( '<h2>' + html + '</h2>' );

1. tinymce.activeEditor で現在のエディタを取得します。
2. editor.selection.getContent() で選択範囲を取得します。
3. editor.insertContent() で選択範囲にテキストを適用します。

TiniMCEプラグインの設定でボタンを追加する

「ツールバー」に指定したベースネーム(pt-h2)を追加します。

DOMを利用して見出し適用後に要素を選択状態にする

見出しを適用後、見出しを選択状態にするためにコードをDOMをベースにしたものに変更します。この修正をすることで、テキストの一部分を選択しているときや、要素内にカーソルがある状態でも見出しを適用できます。

let editor = tinymce.activeEditor;
let html = editor.selection.getContent();
let innerHTML = editor.selection.getNode().innerHTML;
let oldNode = editor.selection.getNode();
let newNode = document.createElement( 'h2' ); // H2要素を生成
newNode.innerHTML = innerHTML;
oldNode.parentNode.replaceChild( newNode, oldNode ); // ノードを置換する
editor.selection.select( newNode ); // 見出しを選択状態にする

最終のコード

H2要素を選択状態で、もう一度クリックすると見出しを解除するようにして完成です。

let editor = tinymce.activeEditor;
let oldNode = editor.selection.getNode();
let innerHTML = oldNode.innerHTML;
if ( oldNode.tagName == 'H2' ) { // 選択範囲がすでにH2要素だった時
    let newNode = document.createElement( 'p' ); // P要素に置換する
    newNode.innerHTML = innerHTML;
    oldNode.parentNode.replaceChild( newNode, oldNode );
    editor.selection.select( newNode ); // P要素を選択状態にする
} else {
    let newNode = document.createElement( 'h2' );
    newNode.innerHTML = innerHTML;
    oldNode.parentNode.replaceChild( newNode, oldNode );
    editor.selection.select( newNode ); // H2要素を選択状態にする
}

カテゴリー：プラグイン

投稿者：Junnama Noda

モデルのスキーマのエクスポート、インポートはJSONファイル形式にて行うことが可能です。
本記事では手順をご紹介します。
環境Aでデータをエクスポートし、環境Bへインポートすることを想定した手順です。
モデルのコンテンツについては下記ドキュメントを参考にしてください。

• CSVインポート・エクスポート | PowerCMS X

手順

エクスポート

1. 環境Aでヘッダーの [歯車マーク] をクリックし、モデル一覧からエクスポートしたいモデルを開きます。



2. 下部の [エクスポート] をクリックします。



3. JSONファイルがダウンロードされますので、エクスポートは完了です。

インポート

1. 環境Bのconfig.jsonファイルに、インポートしたいファイルのアップロード先を絶対パスで追記します。
   環境変数名はmodel_pathsです。

• 環境変数リファレンス (2024年6月19日改定版) | PowerCMS X

2. 追記したディレクトリにJSONファイルをアップロードします。

3. 管理画面の [スキーマ管理] をクリックします



4. モデルのアップグレードが可能となりますので、該当モデルのアップグレードを行うと完了です。

留意事項

本記事で紹介した手順にてインポートしたモデルと標準モデルは、管理画面上で削除することができません。

削除を行いたい場合は、データベースの値を直接変更し、削除不可を解除する必要があります。
モデルの削除可/不可の判定は、 mt_table テーブルの table_not_delete カラムの値で判断してますので、その値を 0 に変更すると該当モデルを管理画面から削除できるようになります。

※ 本件に限らず SQL を発行してデータベースの値を直接変更された場合は、管理画面のキャッシュ管理画面でクエリキャッシュをクリアしてください。
※ 標準モデルの削除は非推奨です。
※ 「開発者モード」が有効なユーザーであればカラムの編集は可能です

カテゴリー：技術情報 | サポート | サイト制作全般

投稿者：Hirota