テクノスタイル TECHNOSTYLE

製品紹介 Products HTMLをツリーで編集?

最初は、「ツリーを使って編集するとは、どういうことなのか?」と思うかもしれません。しかし、使ってみると直ぐにわかるはずです。ツリーで表示されたHTMLは、見やすく、操作も簡単です。閉じタグは、もう気にしなくても、よくなります。

属性は表形式で編集します。行単位のコピーや貼り付けはもちろん、インクリメンタルサーチによる単語の補完機能もあります。

ツリーの操作は右クリックメニューから行うことができます。また、ドラッグ&ドロップによる直感的な操作も可能です。複数のMarkupTreeを起動して、ファイル間の要素の移動やコピーも可能です。


製品紹介 Products 主な機能

編集可能な形式

HTML、XHTML、XML、CSSの編集が可能です。(マークアップツリー以外のアプリケーションで作成したソースは、フォーマットが仕様に準拠した正しいソースでないと読み込みができません。ソースに誤りがある場合は、読み込み時にエラー箇所が表示されます。)

ツリー表示

  • ドラッグ&ドロップによるノードの移動。
  • コピーやカット&ペーストではHTML変換してクリップボードにセットしているので、メモ帳などのエディタに貼り付けることが可能。また、その逆も可能。
  • タグのノードに表示するテキストは、属性の指定が可能。
  • 10回までのUNDO機能
  • ノード単位にチェックすることができ、チェックされたノードのみコピーや切り取り、削除を行うことが可能。

タグの属性

  • 行単位のコピー、切り取り、削除、貼り付けが可能。
  • イメージファイルをタグ属性のグリッドにドラッグ&ドロップするとsrc,width,heightを自動入力。

タグの属性一括編集

  • インクリメンタルサーチによるタグの検索
  • 検索対象のレベル(階層)を指定可能。
  • 属性の一括変更。
  • 属性の一括消去。
  • タグの一括変更。

条件を指定してチェック

  • 種類や、文字を指定してチェックすることが可能。
  • 正規表現を使って指定可能。
  • チェックをしたいノードの、上や下のノードの条件を指定可能。(間接条件)
  • 条件を指定してチェックを実行後、チェックされたノードをコピーすれば、該当部分の抽出ができます。例えば、HTMLからテキストだけを抽出するようなことが出来ます。

CSSのセレクター階層表示

スタイルシートのセレクタは以下の様にスペースを空けて記述することで、HTMLの要素(タグ)の階層に対応する仕様になっています。

.header ul li{float:left;}

マークアップツリーでは、この階層をツリーで表現します。

ライブラリ

  • よく使うテキストに名前やタグを付けて登録可能。
  • 登録したテキストは、名前やタグからインクリメンタルサーチによる検索が可能。

その他

  • 保存時のインデントは、スペース、タブの選択、及び個数を指定可能。
  • ツリー設定、出力設定をタイプ別に設定し、切り替えが可能。

製品紹介 Products 使ってみよう!

htmlをツリーコントロールにドラッグ&ドロップすると読み込みます。ツリーのノードで右クリックすると編集メニューが表示されます。主要な機能にはショートカットキーを割り振ってあるので、活用してください。

ノードをドラッグ&ドロップすることでノードの移動ができます。Ctrlキーを押しながら操作するとコピーになります。Shiftキーを押しながら操作すると、ノードの下位階層に移動又はコピーできます。テキストエディタ等にドラッグ&ドロップすると、HTMLに変換されて貼り付けが行われます。その逆も可能です。また、MarkupTreeを複数開いて、相互にD&Dすることもできます。

ライブラリを活用しよう!

CSSベースのHTMLでは、CSSに定義されたクラスを適用したタグを使って作成していくので、スタイルに応じたタグの部品をライブラリに登録しておくと便利です。 ライブラリに登録したテキストは名前やタグで検索できます。

ライブラリは、データに識別タグを設定し、種類別に分類することができます。スタイル別の定義や、テンプレートなど、どんどん登録しましょう。