Joomla!, Microsoft Word, etc.

Joomla!

エディターJCE Proを導入

Detail
Written by: fuku-chang
Category: Joomla!
JCE Pro

これまで、エディターはJCEのFree版を使用してきましたが、有償のJCE Proを導入しました。

NoteこのページはJCE Proに関する記事です。Free版のJCE Coreではございません。ご注意ください。

概要

  • JCEのFree版(以降、本稿では公式サイトの呼称に合わせてJCE Coreと表記します)でわたくしには十分すぎるのですが、有償のJCE Proを導入しました
    • 年金生活のおじさんには手が出ないと言っていたのに…大丈夫でしょうか
  • 導入を決断したのはSource Code Editorのシンタックスハイライト機能でした
    • TinyMCEで標準装備されているシンタックスハイライト機能が、JCE Coreでは未実装なことが第一の不満でした
  • ただそれだけではコストが見合わないので色々と試してみたところ、その他の機能が大変便利でJCE Proが大いに気に入りました

JCE Pro

  • JCE Pro
  • Subscriptions: €39(EUR)
    • 購入時のレートで7,928円(JPY)でした
  • Renewals: €29(EUR)
    • 更新費用は割安のようです
  • また、更新を見送っても、それまでにインストールされたJCE Proは継続使用可能です
  • インストールするサーバーやドメインの制限はありません

JCE Proの購入・インストール

購入

  1. JCE Pro購入ページへアクセスします

  2. JCE Pro €39の下のBuy Nowボタンをクリックします
  3. アカウント情報を入力してCheck Outボタンをクリックします
  4. Order Summary dlgでメールアドレスを入力してContinueボタンをクリックします
  5. 支払い方法を選択します
    • わたくしはPayPalで支払いました
    • Your subscriptiion is currently pending activation.と表示され、ビビりましたが、PayPalの支払いは完了していることを確認しました
  6. Your Accountのページを確認すると、Subscriptionに問題なくJCE Proが登録されていることを確認できました

インストール・アクティベーション

  1. Your Account > Your Subscription
  2. JCE ProとJCE Mediaboxの最新版をDownloadボタンをクリックしてローカルに保存します
  3. Home Dashboard > System > Extensions
  4. Install Extensionsボタンをクリックします
  5. Upload Package File tab > Upload & Install Joomla Extension dlg
  6. Drag and Drop file here to uploadエリアにダウンロードしたJCE Proパッケージをドロップします
  7. Home Dashboard > Notificationに表示されている[A Download Key Missing!]警告をクリックします
  8. 表示されたJCE Editor Packageをクリックします
  9. 別タブでJCEのYour Accountページを表示し、[Subscription Key]をコピーします
  10. Joomla! Home Dashboardへ戻り、[Download Key]にコピーした[Subscription Key]を貼付け、保存します

JCE Proで強化・追加された機能

  • JCE | JCE Pro
  • 上記ページに列挙されている機能を、さわり程度ですが確認してみました

Image Manager Extended

機能
  • Imageを挿入する際に使用するImage Manager ExtendedはJCE CoreのImage Managerと比較して、次のような機能が拡張されています
  • サイズ変更、切り抜き、回転、明るさ、コントラスト、彩度、ガンマの調整が行えます
  • セピア、グレースケール、ポラロイド、ピンホール、コダクロームなど、様々なエフェクトが用意されています
  • 画像の任意の部分のサムネイルを作成できます
  • 複数の画像を選択して挿入することが可能です
  • srcset属性を使用して デバイスレスポンシブ画像を簡単に作成することが可能です
  • JCE Mediaboxを使用した画像ポップアップを1つのダイアログで設定することができます
    • 当サイトでは多数の画像を配置するため、工数が減ることは大きなメリットです
    • JCE CoreではImage ManagerとLinkダイアログの双方を操作する必要がありました
Image Manager Extendedをツールバーに配置
  • JCE Proインストール直後は使用できる状態にありません
  • JCE Coreではツールバーに用意されているInsert ImageボタンをクリックするとImage Managerが起動します
  • JCE Proで利用できるImage Manager ExtendedはツールバーにImage Manager ExtendedのInsert Imageボタンを配置することによって使用可能となります
  • JCE Pro Pluginをインストール直後は、このImage Manager ExtendedのInsert Imageボタンが用意されていないため、ユーザーが手動で配置する必要があります
  • JCE | Support | Forum | #104034 How can I enable image manager EXTENDED ?
  • JCE | Support | FAQ | Pro buttons missing after upgrade
  • 以降に説明するMedia Manager, File Manager,  Template Manager, Captions, IFrames, Microdata, Aia等の各機能もすべて、同様の手順でユーザーが手動で配置する必要があります
  1. Dashboard Home > Component > JCE Pro >  Plofileをクリックします
  2. f-labs.jp (当サイトのデフォルトプロファイル)をクリックします
  3. Features & Layout tabをクリックします
  4. Current Toolbar Layout blkまでスクロールします
    • 現在のツールバーが表示されています
  5.  Available Buttons & Toolbars blkにある配置希望のアイコン(Image Manager Extended)をその上部にあるCurrent Toolbar Layout blkのツールバーにドラッグアンドドロップします
  6. 比較のため、JCE CoreのImage Managerも残しています
    • 赤色実線枠: JCE Pro - Image Manager Extended
    • 赤色点線枠: JCE Core - Image Manager

Media Manager

  • Youtubeを簡単に埋め込むことができ、埋め込み後も編集が簡単です
Youtube動画挿入手順
  1.  挿入するYoutubeの再生画面を右クリック
  2. コンテキストメニューの[Copy embed code]をクリックして、iframe要素のコードをコピー
  3. JCE ProのEditor画面の挿入位置をクリック
  4. ツールバーの[Insert Media]右の▼をクリック
  5. [Embed Code]テキストエリアに、コピーしたコードを貼付け
  6. [Insert]ボタンをクリック

Columns

Sample 1
  • Mobileデバイスの縦表示であれば、写真の下にテキストが表示されているかと思いますが、Mobileデバイスの横表示やPCであれば、写真の右側にテキストが表示されるレイアウトになります
  1. [Create Columns]の▼ボタンをクリックします
  2. 希望のカラム数をドラッグしてマウスボタンを離します
    Create Columnsをクリックして希望カラム数をドラッグ
  3. 作成されたカラムの境界線をドラッグして希望のサイズに変更します
八割れ白黒

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.
Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.

Sample 2
  • ダイアログボックスから作成することもできます
  1. [Create Columns]ボタンをクリックします
    Create Columnsボタンをクリック
  2. [Create Columns]ダイアログボックスに各オプションを指定します
    Create Columnsダイアログボックスに各オプションを指定
    • Stack Widthは指定幅に応じて列を縦方向に積み立てる(3列を3段(行)表示にする)レスポンシブ指定のオプションになります
  3. [Insert]ボタンをクリックします
    Insertボタンをクリック

    3列のサンプル
八割れ茶トラ

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

Template Manager

Trouble
  • JCE Pro導入時のバージョンは、2.9.96でしたが、バグがあったようで、テンプレートの作成やアップロード時にError表示となってしました
  • Supportに従い、バクフィックスの2.9.97-beta5をインストールしたところ改善しました
  • また、上記beta版をインストール直後は問題なかったにも関わらず、今度はhtmlファイルをアップロードできなくなってしまいました
  •  下記Supportを参考に対処して、問題を回避しています
    • Mine Typeはデフォルトでhtml, htm, txt, mdが有効になっており、設定は変更していません
      1. JCE Pro > Profile > f-labs.jp (my profile name) > Plugin Parameters tab > Template Manager (left pane)
      2. Permited File Extentions: html, htm, txt, md
    • Error Message: Upload failed: Invalid Mime Type
    • JCE | Support | #113536 Unvalid MIME typ
      1. JCE Pro > Profile > f-labs.jp (my profile name) > Editor Parameters tab > Filesystem (left pane)
      2. Validate Minetype: Yes No
Sample
  • 次のようなBlog Cardをテンプレートとして登録しておくことで、簡便に定型コンテンツを挿入することができます
    Template Managerダイアログボックス
  • テンプレート挿入時に、変数に値を指定することもできます
    変数を指定するダイアログボックス
  • 繰り返し使用する定型コンテンツはテンプレートを用意することで作業効率があがります
    少ない工数でBlog Cardを作成
  • この機能については別稿を作成の予定です

Captions

  • imageにキャプションを追加できます
    Captionダイアログボックス
    • キャプションはImageのAlternate Text指定を自動的に読み込みます
  • 個人的には、Image Manager Extendedに実装できそうなものと感じますが…、画像挿入後、画像を選択時にInsert Captionボタンがクリックできます
八割れ茶トラChatora-Hachiware

Source Code Editor

  • 導入の目的はシンタックスハイライト機能でした
  • コードの折りたたみ機能(Code Folding)が搭載されました
    コードを折りたたむコードを折りたたむ
    コードの折りたたみを展開するコードの折りたたみを展開する
  • Visual Studio CodeやPulsarのようなコードエディタほどの高機能ではありませんが、タグマッチングや終了タグ補完などの補助機能は助かります
Font Size
  • デフォルトのフォントサイズが小さすぎて、近視・遠視・乱視のおじさんにはきつすぎます
    • 下記設定箇所で試したところ、空欄=デフォルトは13pxのようです
  • 次の個所で16pxを指定しています
    • JCE Pro > Profile > f-labs.jp (my profile name) > Plugin Parameters > Code Editor (left pane) > Font Size

IFrames

  • Youtubeの動画挿入等に使用するiframe要素に対してセキュリティ対策に効果のあるsandbox属性を簡単に挿入することができます
    IFlamesダイアログボックス
  • ところで、iframe要素を操作するにあたり、JCEのクリーンアップ機能により、iframe要素をp要素で囲んでしまうことに違和感を感じて、次のオプションを変更して、Div要素で囲むよう変更しています
    1. JCE Pro > Edit Profile > Editor Parameters > Typography > Container Element & Enter Key
    2. Paragraph Container & Paragraph on Enter Div Container & Div on Enter

Microdata

  • HTML文書内に構造化データを埋め込む、itemscope、itemtype、itempropなどのマイクロデータ属性を簡単に挿入することができます
  • これにより、検索エンジンがコンテンツの理解度を深め、SEO に役立ちます
    • ただし、わたくしは使い方を全く理解できておりません
    • また、Googleは過去にはMicrodataを推奨していましたが、現在はJSON-LDを推奨しているそうで、ますますこの方面への学習は遠のく気がします
  • 実は、Cassiopeia Templateも一部Microdata属性を利用している箇所があるのですが、HTML VaridatorからError扱いされています
    • この件については、別稿を作成の予定です

Aia - Ai Assistant

OpenAI API Keyの取得
  1. OpenAIのアカウントを登録します
    • 既に取得済のアカウントで問題ありません
  2. OpneAI Plathomeにログインします
  3. 支払い方法を登録して、チャージします
  4. API Keyを発行しします
    API Keyの発行
  5. API Keyをコピーします
    API Keyをコピー
Aiaプラグインの設定
  1. JCE Pro > Profile > f-labs.jp (my profile name) > Plugin Parameters > Aia
  2. Plathome: OpenAI ChatGPT
    PlatformにOpenAI ChatGPTを指定
  3. API Key: 上記手順でコピーしたキーを貼付けます
    API Keyを貼付け
  4. Save ＆ Closeで保存します
Aiaプラグインの使用
  1. Aia - AI Assistantダイアログを開きます
    Aia - AI Assistantダイアログボックスを開く
  2. プロンプトを入力します
  3. ボタンをクリックします
  4. レスポンスが表示されます
  5. Insertボタンをクリックして挿入します
    プロンプトを入力してレスポンスを貼付け

Responsify

  • JCE | Support | Documentation | Plugin | Responsify
  • Youtube等のメディア埋め込みに関する2つの機能が用意されています
  • Youtube等の動画ウィンドウの表示幅を「表示時に」自動的に調整する機能
    • PCやMobileの縦表示、横表示いずれも横幅一杯で表示されます(Full Width Display機能)
  • Youtube等のスクリプトが自動的に再生されないよう、ユーザーに再生操作をゆだねる機能(Click to Play機能)
  • JCE Proに同梱されていないので、次のリンクからダウンロード、インストール、プラグイン有効化の必要があります
  • ブラウザ表示時自動的に全幅表示のクラス指定がされるため、記事内で設定する必要がありません
全幅表示の設定
  1. System > Manage > Plugins > Responsify > Options tab > Options blk
  2. Full Width Display : No Yes
    Full Width Displayオプション
全幅表示 Samle A
全幅表示オフ Sample B
  • Sample Bのiframe要素にFull Width Display機能をオフにするclass指定をしているため、iframe要素で指定した表示幅になっています
  • 詳細は別稿を作成の予定です
全幅表示の構造
  • Google Developer ToolでHTMLを確認してみます
    Full Width Display指定されたiframe要素
    • Sample A: iframe要素をspan要素で囲むことで、Full Width Displayを実現しています
      • このspan要素はResponsifyプラグインが挿入しており、記事内で指定していません
    • Sample B: 全幅表示をオフにする場合は、iframe要素にwf-responsive-no-containerのクラス指定をします

JCE Pro導入の感想

  • まだ、お試しの段階ですが大変気に入っています
  • 投資が無駄でなかったと言えるまで使い込んでみたいと思いました
  • わたくしが特に気に入った機能は次のとおりです
    • Source Code Editor
      • シンタックスハイライト機能は見やすさと作業ミス回避に効果があります
    • Columns
      • レスポンシブで複雑な列構成を簡単に作成できます
    • Template Manager
      • 細かなテンプレートを作成することで効率が上がります
    • Responsify
      • 昨今のMobileファーストのWebデザインに必須の機能です
    • Image Manager Extended
      • JCE Mediaboxの設定が楽になりました