ブロックエディタとブラウザプレビューの関係

BiNDの中心的存在、「ブロック」の編集を行うメインUIである「ブロックエディタ」に関する話題です。ブラウザプレビューしながら編集するワザ、ブロックエディタが隠れる仕様の追加など、BiND10でできる便利なことをご紹介。

BiNDを簡単に説明するとすれば、「ウェブページをブロックに分割して、編集し易くしたソフト」となるかなと思います。
その「ブロック」の編集を行うメインのUIであるブロックエディタはBiNDの中で中心的存在で、基本的な文字の入力から画像の設定まで、ほぼ全てのコンテンツをここから入力します。

ブロックエディター

ブロックエディタ

元々、ブロックエディタが目指したものは、WordやPowerPointにも機能がありますが、アウトライン・エディタの操作性でした。
アウトライン・エディタとは、TABキーで見出しのレベルを簡単に上げ下げしながら、草稿の枠組みを簡単に作れるもので、私もプレゼン資料を作る時に良く使います。PowerPointではEnterを押すたびにスライドが作れるので、とても楽なんですよね。
弊社のBiNDの宣伝文句で、初期バージョンから、しばしば「ワープロ感覚で」と書かれていますが、「ワープロ(のアウトラインモード)感覚で」だと、内心思っています(笑)

Microsoft PowerPointのアウトラインモード

Microsoft PowerPointのアウトラインモード

ですので、本当はTABキーでH1、H2、H3とバシバシ切り替えられるのが良いのかも知れません。
いつか、そういうモードも搭載してみたいですね。
リストのレベル操作とTABキーが競合するので、簡単には行かないかも知れませんが。

ブロックエディタの実装は、最初こそOSのリッチテキスト・エディタが用いられていましたが、基本はHTMLの技術である、ContentEditableを用いてきました。
BiND8からは、より安定したプラグインを使うようになり、さらに今回のBiND10では、ユーザーの利用状況や、想定される貼り付けデータ、マウスの動きなどを細かくチェックし、より安定した入力ができるように改善されています。

ブラウザプレビューでチェックしやすく

BiNDでは、BiND8から、UIをよりモダンなデザインに一新していますが、その時に、ブロックエディタはメインウィンドウに統合される形となりました。
当時、マルチ・ウィンドウが流行らなくなって来ていた事もあり、行った決断でしたが、BiND7以前のマルチ・ウィンドウの操作感に慣れていた方には、思わぬご不便をおかけしてしまったようです。

ブロックエディタが瞬時に透過できる

今回のBiND10では、少しでも操作性を広げるために、ブロックエディタのフチをクリックすると、透過するようにしました。

透過するブロックエディター

BiND10の透過するブロックエディタ

編集結果がリアルタイムに見られる方法

また、これはBiND9から実装されている機能ですが、「プレビュー」をクリックしてブラウザを立ち上げると、その後はBiND側で編集を保存すると、リアルタイムにリロードがかかるようになっています。

複数ブラウザでチェックするときに便利

さらに、複数ブラウザを立ち上げると、スクロールが追従するようになっています。

BiNDとブラウザを並べると、BiND7以前よりも、むしろ出来る事は多くなっていますので、是非、お試し頂ければと思います!

  • BiND10からブロックエディタが透過される仕様を搭載
  • ブラウザプレビューしながら編集するとリアルタイムにリロードがかかる
  • 複数ブラウザでチェックするときスクロールが追従する

関連記事