2つの編集モード-SIRIUS2

2つの編集モード-SIRIUS2

旧SIRIUSから受け継がれるテキストモードとデザインモードのパワーアップした機能についての詳細ページ。
 

アイキャッチ画像

【Volar2】の動作検証でキャプチャした画像は、基本的には【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトデザインが元になってます。

そのため他のテンプレート利用時には当サイトでご紹介しているキャプチャ画像とは若干異なる場合もあります。

また他のテンプレート利用時には場合によっては動作に多少の違いが生じる可能性もありますこと予めご了承ください。

 

旧SIRIUSが新しくなると聞いてワードプレスのブロックエディターの完全ビジュアル編集のようなシステムで来るかと思ってたんですが、蓋を開けてみたら従来からあるテキストモード(+デザインモード)の踏襲でした。

 

ということでここではテキストモードデザインモードの違いをあらためてご紹介します。

 

もちろんSIRIUS2になってからは両モードともかなりブラッシュアップされてますよ。


テキストモード

テキストモードと言うのは旧SIRIUS時代からあるHTML形式の編集モードです。

もっとも自分でHTMLタグを書く必要はなく、SIRIUS2側が勝手にHTMLタグを付加してくれます。

 

たとえばSIRIUS2側で用意されてる装飾効果のひとつに『承諾(OKマーク)』というのがあります。

 

キャプチャ画像

 

テキストを範囲選択して『承諾(OKマーク)』をクリックすると下のようなHTMLタグが自動的に挿入されます。

 

キャプチャ画像

 

テキストモードだとこの段階ではどんなレイアウトなのか全くわかりません。

レイアウトを確認するにはブラウザでのチェックが必要です。

 

実際にSIRIUS2の内蔵プレビューで表示チェックをしてみると…ちゃんと『承諾(OKマーク)』用のレイアウトで表示されてるのが確認できます。

 

キャプチャ画像

 

画像を挿入してもテキストモードだと画像専用のタグが挿入されるだけ。

 

キャプチャ画像

 

実際の表示確認はプレビューに頼ることになります。

 

キャプチャ画像

 

このようにSIRIUS2のプレビュー機能で確認するまでは実際のレイアウトが確認できないので、どちらかといえばサクサクと文章を打つ方向けの機能と言えます。

 

もちろんHTMLやCSSに詳しい方はテキストモードの方が”早く打てる”ことでしょう。

(筆者もテキストモード専門です)

 

ただしSIRIUS2の内蔵ブラウザを常時立ち上げておける環境ならテキストモードでも編集後に瞬時に内蔵ブラウザでの表示チェックができます。

 

何よりブラウザでの表示チェックですからデザインモードよりもより正確なレイアウトで確認できます。

 

内蔵ブラウザで表示チェックする際、「更新」ボタンではなく「保存」ボタンのクリックの方が時短チェックできます。

デザインモード

デザインモードというのはブラウザでの表示に近いレイアウトを保ったまま編集可能な(どちらかと言えば)HTMLやCSSがあまり得意でない、あるいはその都度レイアウトを確認しながら編集したい方向けの編集モードです。

 

HTMLタグを意識することなく装飾効果をリアルタイムに確認しながら編集できるので直感的な編集方法と言えます。

 

たとえば先ほどの『承諾(OKマーク)』も、デザインモード上ならプレビューで確認することなくその場でレイアウトを確認することができます。

 

キャプチャ画像

 

画像を挿入すればその場で表示されます。

 

キャプチャ画像

 

「じゃあデザインモードの方がラクなんじゃないの?」と思われる方もいらっしゃるでしょう。

それがそうでもないんですね。

 

テキストモードでしか使えない機能もあったりしますから。

 

たとえば一時的に非表示にできる『コメントアウト』や『目次タグの挿入』など。

これらはデザインモードではそもそもコマンド自体が表示されないので、一度テキストモードに戻って操作する必要があります。

 

キャプチャ画像

 

またSIRIUS2の新機能「パーツ」で作成した独自タグなんかはデザインモードでもテキストモードでもSIRIUS2の独自タグが表示されるだけなので、最終的な表示確認は(既定 or 内蔵)ブラウザでのプレビューにお任せすることになります。

 

キャプチャ画像

 

またいろいろ編集し続けていくと時として表示がおかしくなるときがあります。

そういうときはデザインモードでは原因がなかなか見つけにくかったりします。

 

こういうときはテキストモードに戻ってみると不具合の原因が見えてきたりします。

サイト管理人

筆者

 

デザインモードとテキストモードは相互切替が可能なので、好きな時にいずれかのモードに変えることができます。

 

【Volar2】での設定

【Volar2】に搭載されてる独自機能は原則としてテキストモードでの運用になります。

 

デザインモードはブラウザ上での表示を完全再現できるわけではないので、プレビューでの最終確認は必要です。

 

またデザインモードが便利だからといってデザインモードのみで編集&修正作業を繰り返していると、場合によっては無駄なHTMLコードが増えすぎて編集ミスが起こりやすくなることもあります。

 

デザインモードに頼りきるのではなく、(わからないなりにも)時々はHTML編集画面にも目も通してコードを確認するクセをつけておくといいですよ。

 

テキストモードでしか修正できない機能も中にはあったりしますから。