mi with sbHTML [チュートリアル]
- 2007.05.24 Thursday
- dev
私はmiというテキストエディタを愛用しています。
私はmi α版を使っています。α版と言っても、当方の環境では、きわめて安定して動作しています。
ここで配布しているsbHTMLというmi用のモードファイルについて簡単なチュートリアルをご紹介します。
sbHTMLのインストール
miのモードファイルのインストールは実に簡単です。
- ダウンロードしたsbhtml.sitを解凍します。
- miを立ち上げて、アプリケーションメニュー→「新規モード(インポート)...」を選択します。
![[図1]](http://serennz.sakura.ne.jp/sb/img/img74_01_menu_toolinst.png)
- モードファイル「sbHTML」を選択します。
![[図2]](http://serennz.sakura.ne.jp/sb/img/img88_02_dialog_modesel.png)
- 新規モード追加確認ダイアログが表示されるので、適当なモード名を入力します。
![[図3]](http://serennz.sakura.ne.jp/sb/img/img76_03_dialog_newmode.png)
アプリケーションメニューは、リンゴマークのアップルメニューの隣にある「mi」と書かれたメニューです。
新規ファイル
sbHTMLモードを追加すると、ファイルメニュー→「新規」に「sbHTML」が追加されます。![[図4]](http://serennz.sakura.ne.jp/sb/img/img77_04_menu_newfile.png)
ファイルメニュー→「新規」→「sbHTML」を選択して新規ウィンドウを開きます。![[図5]](http://serennz.sakura.ne.jp/sb/img/img78_05_window_newfile.png)
開いたウィンドウで「sbHTML」モードが選択されていることを確認して下さい。設定メニュー→「モード」あるいはツールバーで確認できます。
テンプレートの挿入と編集
sbHTMLモードには予めテンプレートが設定されています。
command+0(ゼロ)キーあるいはツールメニュー→「S 文書構造」→「N 基本構造 XHTML11」でテンプレートを挿入します。![[図6]](http://serennz.sakura.ne.jp/sb/img/img79_06_menu_template.png)
テンプレートには基本的なmeta要素が設定されています。スタイルシートやスクリプトのアドレスが
と設定されていますが、これはダブルクリックで容易に選択できるようにするためです。xxxxxxxxxxxxxxxxx![[図7]](http://serennz.sakura.ne.jp/sb/img/img80_07_window_template.png)
miではツールの内容を簡単にその場で編集する機能がついています。これを利用することで簡単にツールの内容をカスタマイズできます。
ツールメニュー→「S 文書構造」→「N 基本構造 XHTML11」をoptionキーを押しながら選択して下さい。
別ウィンドウあるいは別タブでそのツールの内容が表示されるはずです。![[図8]](http://serennz.sakura.ne.jp/sb/img/img81_08_window_edittemp.png)
その場で編集して保存すれば、次からは編集したテンプレートが利用できます。ツールの内容が気に入らなければ、どんどんカスタマイズしてしまいましょう。
マークアップ操作
sbHTMLモードのツールには、基本的な要素が予め定義されています。
例えば、以下のように入力された「テスト」というテキスト部分をリストアイテムとして、マークアップしたい時は、ツールを利用すると便利です。
- まず、マークアップを適用する部分(この場合「テスト」)を選択します。
![[図9]](http://serennz.sakura.ne.jp/sb/img/img82_09_window_sample01.png)
- 続いて、ツールメニュー→「L 箇条書き」→「L <li> リストアイテム」を選択します。
![[図10]](http://serennz.sakura.ne.jp/sb/img/img83_10_menu_sample01.png)
- テスト部分がli要素でマークアップされます。
![[図11]](http://serennz.sakura.ne.jp/sb/img/img84_11_window_sample01_done.png)
sbHTMLのデフォルトでは、タブも挿入されます。余計なインデントなど要らないという場合は、先に述べた通り、optionキーを押しながら、ツールメニュー→「L 箇条書き」→「L <li> リストアイテム」を選択して、ツールの内容を編集して下さい。
ツール入力モード
ツール入力モードを利用すると、メニューを利用することなく、ツールを利用できます。
つまり、いちいちマウスを使ってメニューを選択する必要がなくなります。
command+Yを押すと、ツール入力モードに入ります。
ツールに割り当てられたキーがウィンドウ上部に表示されるので、それに従って適時キーを押していけば、よいだけです。
例えば、先のようにli要素を挿入したい場合は、以下のように操作します。
- command+Yを押して、ツール入力モードに入ります。
- 「L:箇条書き」と表示されているので、Lを押します。
![[図12]](http://serennz.sakura.ne.jp/sb/img/img85_12_window_sample02-1.png)
- 「L:<li>リストアイテム」と表示されているので、再びLを押します。
![[図13]](http://serennz.sakura.ne.jp/sb/img/img86_13_window_sample02-2.png)
以上の操作で、ツールメニュー→「L 箇条書き」→「L <li> リストアイテム」を選択することができます。つまりcommand+Y→L→Lとキーボードだけで操作が行えます。
実体参照変換ツール
sbHTMLには実体参照変換ツールが用意されています。
変換したい部分を選択して、ツールメニュー→「選択範囲を文字実体参照に変換」を選択することで実行します。![[図14]](http://serennz.sakura.ne.jp/sb/img/img87_14_menu_sample03.png)
「>」→「>」のような変換処理が行われます。
スポンサーリンク
