リッチテキストエディタ
コードを書く手間を減らし、
EC管理画面の編集をもっとスマートに
リッチテキストエディタとは
- 対象機能
- 管理画面 > CMS の「ファイル管理」「スタイルシート管理」「JavaScript管理」で利用可能
- テーマ選択
- ライト・ダークなど複数テーマを画面上部から即座に切り替え、作業環境を自分好みにカスタマイズできる
- リアルタイムプレビュー
- HTMLファイル編集時、エディタ横にリアルタイムでプレビューを表示。書いたコードの見た目を即座に確認できる
- ミニマップ
- 大量コードも右側のミニマップで全体像を俯瞰し、任意の箇所へスクロールなしで高速移動できる
- コード整形
- 「コード整形」ボタン1つでインデント・改行を自動修正。チーム内のコード品質を統一し保守性を向上
リッチテキストエディタでコード編集がどう変わるのか
従来の素のテキストエリアによるコード編集は、視認性が低くミスが生じやすい環境でした。リッチテキストエディタにより、編集のしやすさ・確認の速さ・コードの品質が一段階向上します。
メリット
| 観点 | Before（導入前の課題） | After（導入後の変化） |
|---|---|---|
| コードの視認性 | 単色のテキストで色分けなし。構文の確認に目が疲れる | シンタックスハイライトにより構文が色分けされ、一目でコードの構造を把握できる |
| 作業環境の快適さ | 背景色は白一択。長時間作業で目の疲労が積み重なる | ダーク・ライトなど複数テーマを自由に選択し、集中しやすい環境を構築できる |
| HTMLの見た目確認 | 編集後にブラウザを開き直して確認するため往復が発生する | エディタ内のリアルタイムプレビューで即座に見た目を確認でき往復作業がなくなる |
| コード全体の把握 | 大量のコードはスクロールしないと全体が見えず、位置感覚をつかみにくい | ミニマップでコード全体の構造を一目で確認でき、任意箇所へ瞬時に移動できる |
| コードの整形・統一 | インデントや改行の乱れを手作業で修正する必要があり時間がかかる | コード整形ボタン1つで自動整形完了。チーム間のコード品質を手間なく統一できる |
| 文字サイズの柔軟性 | フォントサイズが固定で変更できず、細かいコードが読みにくい | フォントサイズをワンタッチで変更でき、担当者ごとに最適な表示サイズを設定できる |
リッチテキストエディタの主要機能
ECサイトのデザイン・機能カスタマイズを担う開発・制作担当者の作業効率を高める機能が揃っています。すべてメルカートの管理画面で、追加設定なくすぐに利用できます。
作業環境をカスタマイズできるテーマ選択とフォントサイズ変更
集中したいならダーク、明るい環境ならライトと、気分や目的に合わせてエディタの配色テーマを即座に切り替えられます。フォントサイズもワンタッチで変更でき、小さな文字で広く見渡すもよし、大きな文字でじっくり編集するもよし。長時間のコーディング作業でも目に優しい環境を構築できます。
- 複数テーマ（ダーク・ライト等）を画面上部からワンクリックで切替
- フォントサイズをリアルタイムに変更して視認性を調整
- チームメンバーそれぞれが最適な表示環境を自由に選択
- コーディング中の集中力と視認性を同時に向上
HTMLをその場で確認できるリアルタイムプレビュー
HTMLファイルの編集時、「プレビュー」チェックボックスをONにするだけで、エディタ右側にリアルタイムプレビューが表示されます。コードを書きながら即座に見た目を確認できるため、ブラウザで開き直す往復作業がなくなり、編集サイクルを大幅に短縮できます。コーディングとデザイン確認を同時並行で進められるため、本番反映後の手戻りリスクも低減します。
- プレビューONで2カラム表示（エディタ＋プレビュー）に自動切替
- HTMLの変更が即座にビジュアルで確認できる
- ブラウザを開き直す往復作業を削減し作業時間を圧縮
- コーディングと見た目確認を同時並行で実施できる
大量コードも俯瞰できるミニマップとワンクリックコード整形
コード量が多くなってもミニマップで全体像を把握しながら編集できます。右側に常時表示されるミニマップをクリックするだけで、任意の箇所へスクロールなしで瞬時に移動可能です。さらに「コード整形」ボタンを押せば、インデントや改行が乱れたコードを一発で整形。チームでの共同作業でも読みやすいコードフォーマットを維持できます。
- 右側ミニマップでコード全体の構造を一目で確認
- ミニマップクリックで任意の箇所へスクロールなしで移動
- 「コード整形」ボタン1つでインデント・改行を自動整形
- コードレビューや引き継ぎ時の可読性・保守性を向上
リッチテキストエディタが持つ3つの強み
開発担当者の日常的なコード編集業務をより快適・正確・効率的にする3つの特長です。管理画面でのCMS操作がもっとスムーズになります。
-
⚡
作業スピードを加速させる快適な編集環境
テーマ・フォントサイズ・ミニマップ・ショートカットキーなど、開発者の生産性を高める機能が一体化。エディタ環境の設定に時間を取られることなく、コーディング本来の作業に集中できます。
-
👁
プレビューで確認しながらコード品質を高める
HTMLの編集中にリアルタイムプレビューを表示することで、見た目の確認サイクルを大幅に短縮。「書いて確認する」流れをエディタ内で完結させ、本番反映後の手戻りリスクを低減します。
-
✨
コード整形でチーム全体の品質を統一
ワンクリックのコード整形機能により、チームメンバーそれぞれの書き方の差異を自動的に標準化。コードレビューや保守のコストを抑えながら、均一なコード品質を維持できます。
リッチテキストエディタの「できること」でよくあるご質問
- どのファイルの編集にリッチテキストエディタを使えますか？
- 管理画面のCMS内「ファイル管理」「スタイルシート管理」「JavaScript管理」の3機能で利用できます。HTML・CSS・JavaScriptのいずれのファイル編集にも対応しています。
- リアルタイムプレビューはどのファイル形式で利用できますか？
- HTMLファイルの編集時のみ利用可能です。プレビューチェックボックスをONにするとエディタ右側にリアルタイムプレビューが表示され、コードを書きながら即座に見た目を確認できます。
- テーマはどのくらいの種類から選べますか？
- ライト・ダークを含む複数テーマから選択でき、好みや作業環境に合わせて画面上部から自由に切り替えられます。長時間のコーディングでも目に優しい環境を維持できます。
- コード整形はどのように動作しますか？
- 「コード整形」ボタンを押すだけでインデントや改行を自動整形し、読みやすいコードフォーマットに変換します。チーム間のコード品質統一や、保守性の向上にも役立ちます。
- ミニマップはすべてのファイルで使えますか？
- はい、ファイルの種類を問わずエディタ右側にミニマップを表示でき、コード全体の構造を俯瞰しながら任意の箇所へスクロールなしで素早く移動できます。
