Home エクステンション編 記事の書き方〔サイト管理者によるJCEの設定編〕

記事の書き方〔サイト管理者によるJCEの設定編〕

ユーザの評価: / 1
悪い良い 

「JCE(Joomla Content Editor)」はとっても使いやすくて便利なエディタです。リンク作成やイメージ挿入が機能的で扱いやすいのはもちろん、各ユーザ・各ユーザ(権限)グループに向けて、ボタンアイコンの表示/非表示・並び順などをカスタマイズしたり、PHPやJavascriptの使用を許可・非許可を切り替えたり、使用できるHTML要素を指定したりできるってのも、管理者にとってはありがたい機能です。

例えば、記事を作成する人(「HTMLとかCSSとかわからないけど、ワープロみたいに記事を書けるんでしょ?」みたいな人)に、『記事の作成方法』みたいな事を説明する時にも、説明が面倒くさい・・・ではなくて(^_^; 「あんまり使わないよ!」って感じのボタンなどは、はじめから使えない(エディタ上に表示しない)ようにしておけば、無駄な説明を省けます。



JCEの開発元「joomlacontenteditor.net」で、2009年2月17日からJCEの最新バージョン「JCE Admin Component 1.5.1(com_jce_151.zip)」と「JCE Editor Plugin 1.5.2(plg_jce_152.zip)」が公開されています。

JCEの最新バージョンと前バージョンを比較すると、若干設定画面などのレイアウト、設定方法などが変わっておるようです。新しい機能なども追加されているような気がしますが、基本的な使い方は似たようなものだと思います。ですが、これからJCEをダウンロードしてインストールされる場合はこの新しいバージョンと言うことになると思うので、以下の解説と食い違う部分もあると思いますがご勘弁ください。

    ちなみにこの記事を書いたときの、当方のJCEバージョンは、
  • JCE Admin Component 1.5.0(com_jce_150.zip)
  • JCE Editor Plugin 1.5.1(plg_jce_151.zip)
  • です。
JCEのアップデート方法 及び 今回のバージョンアップに伴うJCEの変更点などについて、「LOVE Joomla!」さんの所に『JCE 1.5.2リリース』という記事がありました。ご参考ください。

JCEグループを設定する。

[ コンポーネント >> JCE Administration >> Groups ] で、JCEの【グループマネージャ】を開きます。新規のグループ設定を作成するなら、右上の「新規」ボタンを押します。

  1. 名前(JCEグループ名)を入力します。
  2. 必要に応じて説明も入力しておきます。
  3. 有効:「はい」にします。
  4. 必要に応じて優先度も指定しておきます。
  5. どこに向けて適用(使用)するグループ設定かを決定します。(どのコンポーネントで?※1 どのグループ〔ユーザ権限〕に? どのユーザに?)
  6. ※1:どのコンポーネントで?
    JCEグループ[編集]画面の「詳細」の中にある「コンポーネント:」は、ある特定のコンポーネントにおいてのみ、JCEエディタを使えるようにしたい時に、選択(追加)する必要があります。常にJCEエディタを使えるようにしておきたければ、“全て削除”(何も選択してない状態)でOK!

    「“全て追加”(全てを選択している状態)にしておけば、全てで使えるんじゃないの?」と思ってしまいますが、こうすると“カスタムHTMLモジュール(mod_custom )”でエディタが使えなくなっちまいました。って事は、バックエンドにログインできる権限(マネージャ・管理者・サイト管理者)のあるユーザーを対象としたJCEグループでは、この「コンポーネント:」の所は“全て削除”(何も選択してない状態)にしておけば良いって事かな!?

  7. button_img1「グループレイアウトエディタ」で、使用可能にするボタンを選び、並び順を指定します。

エディタの各ボタン

各ボタンの簡単な説明と「私の場合こんな感じにしてます」って並び順を表にしてみました。

基本的に使えるようにしておきたいボタン

とりあえず「これははずせないでしょ!」ってボタンを、その性質ごとに並べてみました。ユーザ向け。

button_img2
アイコン 名前 説明 分類
Bold Bold 太字 1行目
Italic Italic 斜体(が適用される) 1行目
Underline Underline アンダーライン 1行目
StrikeThrough StrikeThrough 取消線 1行目
Font Select Font Select フォント選択 1行目
Font Size Select Font Size Select フォントサイズ指定 1行目
Style Select Style Select テキストのスタイル選択 1行目
Format Select Format Select テキストのフォーマット(p,h1,h2など)を指定 1行目
Font ForeColour Font ForeColour テキストの文字色を指定 1行目
Styles Styles CSSスタイル編集 1行目

button_img3
アイコン 名前 説明 分類
Justify Left Justify Left 左揃え 2行目
Justify Center Justify Center センター揃え 2行目
Justify Right Justify Right 右揃え 2行目
Justify Full Justify Full 両端揃え 2行目
Directionality Directionality 右寄せ・左寄せ 2行目
Indent Indent 字下げ(段落などに対してpadding-left: 30px;が適用される) 2行目
Outdent Outdent 字下げ解除(30pxごと) 2行目
Bullet List Bullet List 順序なしのリスト作成 2行目
Numbered List Numbered List 番号付のリスト作成 2行目
Subscript Subscript 下付き文字 2行目
Superscript Superscript 上付き文字 2行目

button_img4
アイコン 名前 説明 分類
Tables Tables テーブル操作 3行目

button_img5
アイコン 名前 説明 分類
Undo Undo 元に戻る 4行目
Redo Redo (元に戻る後)やり直し 4行目
Preview Preview プレビュー 4行目
Search Replace Search Replace 検索・検索/置き換え 4行目
Help Help JCEヘルプ 4行目
Advanced Link Advanced Link リンクの挿入/編集(高機能) 4行目
Unlink Unlink リンク解除 4行目
Anchor Anchor アンカーの挿入/編集 4行目
Image Manager Image Manager イメージの挿入/編集(高機能) 4行目
Clipboard Actions Clipboard Actions コピー・カット・ペースト 4行目
Paste Paste ペースト(Wordから・プレーンテキストとして・?) 4行目
Horizontal Rule Horizontal Rule 水平線を挿入(
4行目
Read More Read More 「続きを読む」の挿入(
が挿入される)
4行目
Character Map Character Map 特殊文字の挿入 4行目
Emotions Emotions 顔文字の挿入 4行目


使う人は使うかもしれないけど…まああんまり使わないかな〜みたいなボタン群

button_img6
アイコン 名前 説明 分類
Advanced Code Editor Advanced Code Editor 高度なコードエディタ 保留
Layers Layers レイヤー操作 保留
Font BackColour Font BackColour テキストの背景色を指定 保留
Code Cleanup Code Cleanup コードのクリーンアップ 保留
Non-Breaking Non-Breaking nbsp文字を挿入 保留
Remove Format Remove Format フォーマット削除 保留
Visual Aid Visual Aid ガイドライン表示/非表示 保留
Visual Characters Visual Characters 制御文字表示のON/OFF 保留
XHTML Xtras XHTML Xtras XHTML Xtras 保留

使う人は使うかもしれないけど…自分はあんまり使わないな〜ってボタンです。あと、HTMLとかCSSとかよく分からない人が使用すると、かえってややこしくなりそうなボタン。Advanced Code Editor(高度なコードエディタ)は、ウィンドウ左上の[show/hide]を使えば良いかな〜って感じ。Layers(レイヤー操作)あたりは、扱いが良くわかってないので、個人的に使わない(使いこなせない(;.;))ので、除外しました。Font BackColour(テキスト背景色)は多用しちゃうと見づらいことこの上ないので、個人的にあまり好きじゃないという理由だけで除外しちゃう。



まあ、これは使わないでしょ〜ってボタン群

これはまず使わないでしょ!ってボタンです。

button_img7
アイコン 名前 説明 分類
Image Image イメージの挿入/編集 重複
Link Link リンクの挿入/編集 重複
HTML HTML HTMLソースエディタ 重複

button_img8
アイコン 名前 説明 分類
Fullscreen Fullscreen 編集画面をフルスクリーンモードに切替 不要
New Document New Document 新規ドキュメント(文書がクリアされちゃう) 不要
Print Print 印刷 不要
Spell Checker Spell Checker スペルチェッカー 不要

ImageLinkHTMLは、Image ManagerAdvanced LinkAdvanced Code Editorこっちを使えば良いかな〜」と言うことで、除外。Fullscreenは、小さなモニターで作業する時などはあると便利なのかもしれませんが、とりあえず除外。New Documentは、どういう時に使うのかわからない(deleteでいいんでないの?)ので除外。Printも、どういう時にプリントしたくなるのかわからないので除外。Spell Checkerは、日本語で記事を書いてる以上あんまり意味が無いかな〜ってことで除外。



「ユーザ向け」のボタンは、私の周りの「HTMLとかCSSとかわからないけど、ワープロみたいに記事を書けるんでしょ?」って人向けに「とりあえず、このへんのボタンを上手に使えば、HTMLとかわからなくても、とりあえずなんとなくカタチになるからやってみな〜!」的なボタン達でもあります。
もちろん、使う人それぞれなのは言うまでもありません。

ちなみに、私は「リンク作成」「イメージ挿入」「テーブル操作」以外のボタンはほとんど使ってない(使えない?)ので、こんな感じで使ってます。。

button_img9

基本的に記事を書く際に、ほとんど手の込んだ事をしてないからこのぐらいで充分なのです(・_・、)


ユーザーがアクセスできる場所(imagesディレクトリ)を指定する

記事作成時に、投稿ユーザーがテキストだけで絶対に画像を扱わないのであれば、以下の設定は不要です。しかし、まあそんなことは無いでしょう。エディタでイメージを挿入する際に、デフォルト設定のままだと、イメージマネージャなどでサイトの images/stories ディレクトリにアクセスする事になります。イメージマネージャは images/stories 内の画像ファイルなどを削除しちゃったりもできてしまいます。そこで、できることならユーザーがアクセスできる場所を決めておいて、それ以外の場所に画像ファイルをアップロードしたり、画像を削除したりできないようにしておけば、もしもユーザーが間違って画像ファイルを削除してしまったとしても、サイト全体に影響を及ぼすような事態は避けられるかもしれません。

ユーザ毎のディレクトリを自動的に作成されるようにしておくやり方

  1. JCEグループ: [編集] 画面の エディタパラメータ >> プラグインオプション にある「ファイルディレクトリパス」に「 images/stories/$username 」と入力する。

これで、このJCEグループが適用されているユーザーがイメージマネージャーを初めて使用する時に、そのユーザー名と同名のディレクトリが「images/stories」内に作成されます。作成されたディレクトリがこのユーザーのイメージマネージャーでのルートディレクトリになり、そこ以外のディレクトリにはアクセスできないようになってます。


あらかじめユーザ用のディレクトリを用意しておくやり方

  1. images/stories ディレクトリ内に任意のディレクトリを新規に作成します。(今回は仮に「user_a」というディレクトリ名にします。)
  2. JCEグループ: [編集] 画面の プラグインパラメータ >> イメージマネージャ >> 標準 にある「ファイルディレクトリパス」に「images/stories/user_a」と入力する。
  3. 必要に応じて「アップロードファイルサイズ (KB)」あたりも指定しておきます。

「Joomla!の道しるべ」さんの「高機能&高カスタマイズ性を備えた『JCE(JoomlaContentEditor) for 1.5』」も、大変参考になります。
最終更新 2009年 2月 27日(金曜日) 15:28  

あなたのコメントを追加

あなたのお名前:
件名:
コメント: