VagrantとTeraTermで仮想開発環境を利用する方法


先日、JS+Node.jsによるWebクローラー/ネットエージェント開発テクニックという本を購入したのですが、そこに仮想マシン上での開発環境の構築方法が書かれてあり、すごい便利そうだと思ったのでメモ(自分が利用しているOSがWindowsのため、Windowsでの構築方法となります)。

仮想マシン構築の準備には、VirtualBox(Downloads – Oracle VM VirtualBox)とVagrant(Download Vagrant – Vagrant)のインストールが必要。詳しく書くと冗長なので(というより面倒なので)、下記を参考。
参考:VirtualBoxをWindowsにインストール | VirtualBox Mania
参考:Vagrant をWindowsにインストールする手順 | WEB ARCH LABO

インストールを終えた後は、仮想マシンを作成したいディレクトリを作成します(どこでもいいです)。そのディレクトリ上で、コマンドプロンプトを開いて、『vagrant init』というコマンドを実行します(余談ですが、エクスプローラからコマンドプロンプトを開くには、「Alt」+「D」でカーソルをアドレスバーに移動し、『cmd』と入力してエンターキーを押すだけで、カレントディレクトリを引き継がれたまま、コマンドプロンプトを開きます。参考:(追記あり)Windowsエクスプローラからコマンドプロンプトを一瞬にして開く方法 | ライフハッカー[日本版])。

すると、ディレクトリ内に、Vagrantfileというファイルが作成されます。このファイルをメモ帳などのテキストエディタで開いて、config.vm.boxを下記のように記述します。これは、Boxファイルという、仮想マシンファイルを自動でダウンロードするように指示する指定です。

書籍のほうでは、『chef/centos-6.5』となっていますが、この指定では利用できなくなったようです(参考:Node.jsによるWebクローラー開発テクニック – クジラ机ブログ)。
Discover Vagrant Boxes | Atlas by HashiCorpに記載のある値なら、うまくいくようです。

ついでなので、書籍を参考に作った自分の環境でのVargantfileを下記にリンクしておきます。
Vagrantfile
先ほどのconfig.vm.box以外だと、config.vm.networkのコメント(最初の#)を外し、config.vm.synced_folderで二箇所のフォルダを共有するようにしています。

上記の指定だと、Vagrantファイルのあるディレクトリ内のdataというディレクトリを、仮想ディレクトリのルートにあるvagrant_dataと共有するようにしています(home-srcディレクトリについても同じ)。ここで気をつけてほしいのが、仮想マシンにあるディレクトリを共有指定にしないようにしてください。試しにやってみたところ、中身が空になってしまいました(といっても、config.vm.synced_folderの指定を外せば元に戻ります)。

その後、『vagrant up』と実行すると仮想マシンが起動します。初回は、Boxファイルがダウンロードされるため少し時間がかかります。

仮想マシンにログインするには、SSHの情報が必要です。『vagrant ssh』というコマンドを実行すれば、SSH接続に必要な情報が表示されます。自分の環境では下記のようになりました。

Host:以降がSSH接続に必要な情報です(それより上は、SSH接続できないので、Cygwinなどを使うようにという記述だと思われるので、気にしなくてよさそうです)。

というわけで、つづいて、SSHクライアントをダウンロードします。書籍ではPuttyやTeraTermやPoderosaなどがあると紹介した後に、Poderosaを利用してあるのですが、調べてみると不安定とあったので、業務でも使ったことがあるTeraTermを使うことにしました(Tera Term – 窓の杜ライブラリ)。

インストールした際に、拡張子ttlを関連付けさせておくといいと思います。その後、自動ログイン用のTTLファイルを下記サイトを参考に作成します。
参考:TeraTermマクロサンプル-SSH自動ログイン(接続情報固定版) | Tera Term(テラターム)の便利な使い方
自分は下記のようにしました。

ついでに、vagrant-up.batという名前で、バッチファイルも作成します。

これで、このバッチファイルを実行するだけで、仮想マシンが起動し、自動的にTeraTermも立ち上がってログインするようになりました(本当は、TeraTermを終了すると仮想マシンを停止するようにしたかったのだけど、うまくいきませんでした)。

探してみると、Vagrant TeraTermというプラグインを見つけたのですが、自分の環境ではうまく動きませんでした(ダウンロードはできたように見受けられるのだけど……)。
参考:Vagrant Teraterm pluginを作ってみた – Qiita
参考:vagrant teraterm が便利すぎてしょうがない件 – 戦場のプログラマー

ログイン後は、下記のコマンドを実行しましょう。こうすることで、時刻を日本標準時刻に合わせることができます(参考:サーバー(CentOS 6.4)の時刻を日本標準時刻に合わせる – ponkiti’s blog)。

というわけで、開発環境も作成できたので、もう少し触っていきたいと思います。

自動印刷など、IEの印刷制御を行うScriptXについて調べてみた


業務でイントラサイトのページを自動的に印刷する必要があったので調べてみると、MeadCo’s ScriptXというIEで使えるよさげなActiveXコントロールを見つけたのでいろいろ試してみた。有料版もあるようだけど、無料で用紙の方向(縦か横)、ヘッダとフッタ、マージンの指定、さらにダイアログを出さない印刷もできるのでかなり有用に使える。歴史あるツールらしく、調べてみたら結構古いサイトばかりヒットした。ただ、ActiveXコントロールってIE10以降や64ビットの端末では動かないイメージがあるので、古いサイトばかり引っかかるということは最新のIEやWindowsでは動かないんじゃ・・・と心配していたものの、あっさり動いた。同梱していたヘルプHTMLによると、Windows2000以上、IE6以上で動作するよう(英語で書いてあるのでちゃんとは読めていない)。こんなすごい便利なツールがあるのに今まで知らなかった。

参考:IEの印刷設定をActiveXコントロールとJavascriptで行う方法 – 星屋工作室ブログ
参考:ブラウザで印刷時のヘッダ・用紙の向き・用紙マージンを操る
参考:ScriptXでWebページ印刷設定 | ブログ | ソフトウェア開発なら福岡市のくじらシステム開発│Web人事考課システム│情報共有システム

使う前にまずダウンロードしてくる必要があります。公式サイトのDownloadページ右側の『Click to Download』というボタンをクリックすると『ScriptXClientKit.msi』というインストーラファイルをダウンロードできるので、そのファイルをダブルクリックしてインストール。多分、Cドライブの『Program Files』フォルダ(もしくは『Program Files (x86)』フォルダ)に『MeadCo ScriptX Resource Kit』というフォルダができるので、その下の『redist』フォルダ内の『smsx.cab』が印刷制御に使うActiveXコントロールです(他はよく分かりません。ScriptX.msiは再インストール用で、cleansx.exeは昔のScriptXで使われていたファイルのアンインストール用のファイルっぽい)

次に、印刷するHTMLファイルを作成し、その中に下記のように記述してScriptXを読み込むobjectタグを追加します。

調べてみるとどこもcodebase属性のパスはいろいろ調べてみると、ほとんどのサイトでは絶対パスで書かれてあるようだけど相対パスでもOKなよう。今回はHTMLファイルと同じ階層に置くことに。

印刷制御の指定は下記のような感じになります。

printing.Printの第一引数は印刷ダイアログを出すかどうかの指定。いろいろ調べてみるとtrueの場合はださないと書いてあるサイトがいくつかあったのだけど、trueだとダイアログを出すが正しいはず(昔は逆だったのだろうか?)。第二引数の指定もあるようですが、よく分かってません。多分、フレームがあるHTMLについての指定だと思います(参考:MeadCo’s ScriptX:Print)。また、『factory.printing.Preview();』と指定することにより、印刷プレビューを表示することもできます。

ヘッダとフッタで使える特殊記号は下記の通りです。

  • &w:印刷するページのタイトル
  • &u:印刷するページのアドレス
  • &d:現在の日付。コントロールパネルの地域設定で変わるようで、日本だと/で区切った日付になるはず
  • &D:現在の日付。コントロールパネルの地域設定で変わるようで、日本だと○年○月○日となる
  • &t:現在の時刻。コントロールパネルの地域設定で変わるようで、日本だと:で区切った時刻表記
  • &T:現在の時刻。:で区切った時間。つまり、日本だと&tと同じ
  • &p:現在のページ番号
  • &P:総ページ数
  • &&:アンパサンド(&)

また、ヘッダやフッタ中に&bが一つあると、&bを境に左側の文字列は左寄せ、右側の文字列は右寄せとなる。&bが二つあると、一つ目の左側の文字列は右寄せ、&bに挟まれてる文字列は中央寄せ、二つ目の右側の文字列は右寄せとなる。

サンプル用のページはこちら

最初にIEで開くと下記のようにインストールを促すダイアログが表示されると思うので、インストールボタンを押します(その後、ユーザーアカウント制御のダイアログがでたら『はい』をクリック)。
インストール

そうすると、ScriptXを使わない場合、印刷プレビューは下記のように表示されていましたが、
ScriptXを使わない場合
ScriptXを使うと下記のようになりました。
scriptx

なお、factory.printing.Printメソッドの第一引数をfalseにしているのに印刷ダイアログが表示されるということがあると思います(ちなみに、そのダイアログで『キャンセル』をクリックするとなぜかJavaScriptエラーになる)。これは、[ツール]の[インターネットオプション]の[セキュリティ]の[信頼済みサイト]に対象ページのドメインを追加することにより、ダイアログがでなくなります(参考:ScriptXで印刷ダイアログが表示されないようにしたい)。インターネットに一般公開するわけではなく、イントラネットで必要だったなので、この設定作業はたいした問題になりません。こういうのがあって本当によかったです。

そもそもこういうのって、CSSでできてくれたら一番ありがたいんですよね。今回のサンプルページでも指定しているpage-break-inside(その要素内の改ページを避ける指定。今回はセルの途中で改ページが起こらないように指定している)というプロパティは印刷専用のプロパティなわけだし、なんで印刷の向きやマージンを指定できるプロパティがないのかと(一応、あるにはあるっぽい:size-スタイルシートリファレンス)。ヘッダやフッタの指定もJavaScriptで指定できたらいいのに。

ファイルサーバーの大事なファイルを消してしまった時のために使っておきたいフリーソフト


今回のエントリーは半分、自分の失敗談です。

うちの会社では、とある会員制サイトを運営しているのですが、そのサイトのファイルは自社のファイルサーバーに入っており、開発者のPCからはネットワークドライブとしてアクセスし、ファイルを更新するようになっています。サイトは本番環境の他にテスト環境として一般に後悔していないサイトも用意しており、まずはテスト用のファイルを変更してから本番用のほうにアップするという流れをとっています。なお、テスト環境のファイルは本番環境と同じサーバーに入っており、ディレクトリが違っているだけです。

そうして、11月13日木曜日の夜、営業から依頼を受けて更新を頼まれていることもあり、まずはテスト環境のほうを変更することにした。ただし、少し問題があり、数カ月前にテスト版のほうで更新したものの、今回の更新ではまだ更新してはいけない箇所があった。そのため、その更新してはいけないファイルのみを本番環境からテスト環境のほうにもってくることにした。そしてあろうことかそのファイルを本番環境からテスト環境にもってくるのに、ドラッグアンドドロップでもってきてしまいました。普段、ファイルサーバーからローカル環境にファイルをコピーするのにドラッグアンドドロップでもってくるようにしているので思わずそうしてしまいました。そうして、テスト環境が本番環境のファイルでもちゃんと動いていることを確認し、一旦そのファイルは削除して、もともとテスト環境で使っていたファイルに戻しました。

結果、どうなったか。本番環境からテスト環境に持ってきたファイルを消してしまい、さらにそのファイルはほぼ全てのページに共通のヘッダー部分についての記述について書いてあるファイルだったため、見れない状態となっていました。いつまでか。11月14日金曜日の12時までです。お客さんの電話で見れないことが発覚しました。

幸い自分のローカルPCにバックアップをとっていたのですぐに復旧することができ、被害もたいしたことなかったものの、1日ずれていれば大変なことになっていました。実は、このサイトは木曜日によく使われるサイトなのです。なので、木曜日にサイトが止まってしまうとかなり大変なことになり、被害も莫大です。さらにいうと、木曜日は自分は昼からの出勤だったため(ただし夜遅くまで働くことになる。だから、夜に作業していた)、復旧に時間がかかった可能性もあります(バックアップはあると思いますし、そんなことはないと信じたいのですが、そうやって注意されました)。よくよく考えたら、木曜日以外でも月曜日から水曜日はよく使われるので、ある意味で金曜日にトラブルが発生したのはラッキーでした(あくまで、他の曜日だった場合と比較しての話。トラブル自体はもちろんかなりアンラッキーです)。

正直、今考えただけでゾッとします。自分の性格なら、また似たような過ちを犯してしまうんじゃないかと不安です。

そこで、今回は今後もこんなことが起こらないよう、再発防止のために自分が使っている(もしくは、使い始めた)フリーソフトを紹介します。何をやっているかを簡単に説明すると、バックアップとフォルダ監視です。

バックアップ

まずは何よりもバックアップです。今回もバックアップをとっていたからすぐに復旧することができました。特に自分がオススメしたいのがBunBackup。このソフトを使えば全てのファイルではなく、更新があったファイルのみのバックアップをとることできます。さらに、特にすばらしいと思う機能が、世代管理機能があるということ。なんと、変更があったファイルについては、変更前のファイルを指定のフォルダフォーマットのフォルダに入れて保存されます。

ただし、初期状態では世代管理機能が設定できないようになっています。世代管理を有効にするには、ツールバーの[設定]から[機能表示設定]を選択し、開いた『機能表示設定』というダイアログの『世代管理』のチェックボックスをつけなければいけません。
bunbackup1
その後、バックアップフォルダの設定にて世代管理を有効にする必要があります。

ここで例えば、”C:\test”以下のフォルダを”D:\backup\test”に世代管理機能を有効にしてバックアップを行う例を説明します。

例えば、下記のように”C:\test”に”test.txt”というファイルがあるとします。
bunbackup2

続いて、このフォルダをBunBackupでバックアップするように設定するようにします。まず、BunBackupの画面内のツールバーの+ボタンか、適当な場所で右クリックしてでてきたメニューから『追加』を選びます。
bunbackup3

そうして表示された『バックアップ設定』というダイアログの『タイトル』に適当な名前、『バックアップ元フォルダ』にバックアップ元のパス(今回の場合は”C:\test”)、『バックアップ先フォルダ』にバックアップ先のパス(今回の場合は”D:\backup\test”)を入力して、『OK』ボタンではなく、『詳細』ボタンを押します。ここで『OK』ボタンを押してしまった場合は、BunBackupの画面のリストに先ほど入力した内容が追加されるので、その箇所を右クリックしてメニューから『変更』を選び、でてきた『バックアップ設定』ダイアログの『詳細』ボタンを押します。
バックアップ設定
OKボタンを押してしまった場合

すると、『バックアップ詳細設定』というダイアログが開くので、そこの『世代管理』タブを選択します。なお、この最初に表示される『バックアップ方法』の画面でサブフォルダもバックアップするか、更新があったファイルとはどういうファイルなのかを指定できます。後、自分は使ってませんが、更新対象ファイルや除外ファイルもここで設定できます(参考:バックアップ容量を少なくする)。
バックアップ詳細設定

世代管理設定の画面から『世代管理する』のチェックボックスにチェックをつけます。こうすることで、世代管理ができるようになります。必要であれば、フォルダフォーマットを変更しておきましょう。初期値では、『’世代’ yyyy-mm-dd』となっていると思いますが、今回は『’世代’ yyyy-mm-dd-hh-nn-ss』としておきます。
世代管理設定

では、バックアップを実行します。リストから先ほど登録したバックアップタイトルを選択して、右から二番目のボタンを押すか、F11キーを押します(右から4番目の『バックアップ開始』ボタンを押すと、登録しているすべてのバックアップが実行されます)。
bunbackup8

すると、バックアップ結果が表示され、”D:\backup\test”のフォルダにtest.txtがバックアップされました。
bunbackup9

続いて、test.txtを適当に編集して更新します。
bunbackup10

そうしてもう一度BunBackupにてバックアップボタンを押すと、”D:\backup\test”のフォルダに新しく『世代』とついたフォルダが追加され、test.txtは新しいファイルに更新されました。
bunbackup11

中を見てみると、更新前(最初にバックアップを取った時)のtest.txtと『BunBackup世代管理フォルダ』というログファイルが入っているのが分かります。無事、世代管理できたようです。
bunbackup12

さて、ここまで読んで、「何でバックアップを前から取っていたのに、バックアップ環境ではなく本番環境からファイルを持ってくるという危険な行為をしたんだ?」と疑問に思う人もいると思います。まさにそのとおりで、今後はそうしようと考えています。いや本当、なんでバックアップ環境からもってこなかったのかと・・・。あたしって、ほんとバカ(冗談を言っている場合ではありません)。

フォルダ監視

さて、バックアップをとっていたとしても、今回の自分の例のように、変更したことに気づかなければ意味がありません。そこで、今回導入したのがフォルダ監視ソフトです。
ネットワーク監視 フリーソフト [フォルダ監視]

上記のソフトでは最大255か所まで監視フォルダ(とそのサブフォルダ)を監視対象として登録することができ、登録したフォルダ以下のファイルにて、追加・変更・削除があった場合に通知する機能があります。これで、本番環境のフォルダを登録しておけば、間違えてファイルを消してしまっても通知してくれるのですぐに気づくことができ、今回のように次の日の昼まで気づかないという事態になりません。

ここで、先ほども利用した”C:\test”を登録した例を説明します。まず、上記ソフトを開くと左下に『追加』ボタンがあるのでそれをクリックします。
folders1

そうして開いたダイアログにて監視したいフォルダを選択し、『OK』ボタンを押します。もしくは、先ほどの画面で『直接入力して追加』ボタンを押して開いたダイアログのテキストボックスにファイルパスを記入してもOKです。
folders2

そうすると設定画面のリストに指定したフォルダが追加されるので、右上の監視する間隔を設定し、サブフォルダも監視したい場合はそこにチェックし、『監視開始』ボタンをクリックします。
folders3

では、試しに”C:\test”内に”hoge”というフォルダを作成し、そこにtest.txtを移動します(ファイルをドラッグしてたら間違えて下位フォルダのうえで離してマウスを離してしまったという設定)。
folders4
folders6

しばらくすると、フォルダ監視ソフトが下記のような通知をだしてきます。この通知を見ると、監視対象のフォルダからtest.txtがなくなり、その下のhogeフォルダにtest.txtが追加されているということが分かります。
folders5
こんな感じで、本番環境のフォルダを監視フォルダに設定することにしました。

本当ならチームでGitなどのソースコード管理ツールを使って徹底しておくのがいいんでしょうけどね。上司もソースコード管理ツールの重要性は分かっているようなのですが、なかなか利用にまでは至っていません。

でも本当、なんでこんな失敗をやってしまったのかと反省してもしきれません。こういう時は自分以上にひどい失敗した人の話を聞いて、「自分はまだマシだった」と安心したいものです(下衆の考えです)。
というわけで、今度、神戸ITフェスティバルにて、ファーストサーバ株式会社のデータ消失事故について話すようなので聴きに行こうと思います。
「データ消失事故を振り返って~あの時、社内で何が起こっていたか~」村竹 昌人(ファーストサーバ株式会社) | 講演・セミナー | 神戸ITフェスティバル2014
どういう再発防止策を行っているかとか参考になるかもしれませんしね。多分、下記連載と似たような話だとは思うのですが、実際に話を聴いたらまた違うと思うので(記事に書いてないことも話すかもしれませんしね。最後の質問タイムなどで)。
ASCII.jp:データ消失事故から2年!ファーストサーバ、再生への第一歩

Photosynthの写真や点群データをダウンロードできる『SynthExport』


PhotoSynthは残念ながら、ダウンロードしてオフライン上で実行するということはできないようなのですが、写真や点群(point cloud)データはダウンロードすることができます。その写真や点群データを簡単にダウンロードすることができるソフト『SynthExport』を簡単に紹介します。
SynthExport – Home

上記ページ右側の『download』というボタンをクリックすると得られるzipファイルを解凍したフォルダの中に、『SynthExport.exe』というファイルがあると思うので、それをダブルクリックすると下記のような画面がでてくると思います。
SynthExport

ここのURLの箇所に、PhotosynthのコンテンツページのURL(例えば、先日公開されたはやぶさ2機体公開のPhotosynthなら、https://photosynth.net/preview/view/39edbee0-2290-494c-a4eb-b07c768014bc。以下、このURLで試した例)を入力し、右の『Load』ボタンを押します。すると、下記のように写真の一覧が表示されると思います。
SynthExport
ここで、右下の『Export…』ボタンを押すと、写真をダウンロードすることができます。

また、『Point clouds』タブをクリックすると下記のような画面になると思います。
SynthExport
ここで、右下の『Export…』ボタンを押すと、点群データをダウンロードすることができます。

試しに、作成したファイルをMeshLabというソフトで見てみると、下記のようになりました。
meshlab
あまりキレイではないですが、なんとなく点群データとしてダウンロードできたということがわかると思います(自分も、MeshLabの使い方はよく分かってないので分からないのですが、もしかしたらもっとキレイに見せれる方法もあるかもしれません)。

後は、上記のはやぶさ2のPhotosynth(というより、第三世代)では選択できませんが、『Cameras』というタブがあるのがわかると思います。これは、URLに入力したコンテンツが第一世代のPhotosynthの場合にのみ表示されるもので、撮影された写真に対するカメラの情報が書かれたCSVファイルを作成することができます。

上記の写真、点群データ、カメラ情報はPhotosynthの種類によってダウンロードできるものが異なり、どの種類がどの種類のデータをダウンロードできるのかということは、SynthExportのページの『Features』という箇所に書いてあります。簡単に訳してみると下記のような感じ。

写真 点群データ カメラ情報
第一世代(オリジナル版)
第二世代(パノラマ版) 六角形にした面のみ
第三世代(スピン)
第三世代(パノラマ)
第三世代(ウォーク)
第三世代(ウォール)

なお、第二世代(パノラマ版)については、写真をMicrosoft Research Image Composite Editor (ICE)で見れる形式で保存することができます。このソフトはパソコン上で複数の写真からパノラマ写真を作ることができるソフトで、このソフトからPhotosynthに投稿することもできます。

『Visual Studio Express 2012 RC for Web』を使ってみた


前回の続き。基本、Visual Web Developer 2010と共通だと思う。

まずは、新しくHTMLファイルを作って見ることに。
『ファイル』メニューから『新しいファイル(N)』を選択。もしくはCtrl+N
新しいファイル
そうすると上記の画像のようなウィンドウが開くので、HTMLファイルを選んで『開く』ボタンをクリック。

初期ソースコード
すると上記のようなコードが最初から書かれている。この初期のコードの変更の仕方が分からない・・・。enじゃなくて、jaにしたいのだけど・・・。

enをjaに
仕方がないので手で入力しようと、『lang=”en”』の後ろ5文字を削除して、『=』を入力するとインテリセンス(オートコンプリート機能)発動。ダブルクォテーションも自動で入力されます。

fontタグ
とりあえず、赤色で『Hello World!』とおなじみの文を表示してみることにする。おっと! <font>タグはHTML5でサポートされてないのだった。

style属性
仕方がないので、spanタグでstyle属性を追加し、赤色で表示することにする。おっと! なんか色のインテリセンスが! これは、Visual Web Developer 2010にはなかったような気がする(正確には、色名のリストが表示されていた)。

ブラウザーで表示
とりあえずこの状態でブラウザに表示してみる。多分、ツールバーに上記のアイコンがあるのでそれをクリック。

ブラウザーの選択
『ファイル』メニューから『ブラウザーの選択』を選ぶとデフォルトのブラウザ以外で試すことができます。

表示
ブラウザーに表示すると上記のように表示されるはず。ここで、アドレス欄に注目。ファイルのパスではなく、『localhost:49378』というようになっています。多分、仮想HTTPサーバーみたいなものです。これのメリットは、HTML5のローカルストレージ機能など、ローカルファイルのパスだと扱えない機能を扱えるところがひとつあります。HTML5の機能をいろいろ使ってみたい。でも、いちいちサーバーは用意するのは面倒。という場合でも、『Visual Studio Express 2012 for Web』を使えば解決するというわけですね。

インデントなし
さて、先ほどのソース画面に戻って一度インデントをなくしてみます。

ドキュメントのフォーマット
その後『編集』メニューから『ドキュメントのフォーマット』を選ぶと・・・。

ドキュメントのフォーマット
インデントされた状態に成形されました。

Helloだけ選択
次に、『Hello』だけ選択して・・・。

選択範囲のコメント
『編集』メニューから『選択範囲のコメント』を選ぶと・・・。

Helloだけコメント
Helloの部分だけコメントアウトされました。

他にも、『ツール』メニューの『オプション』から、いろいろな設定をすることができます。閉じタグを自動でつけないとか。<br>と書いたら自動的に<br />にしないようにするとか(テキストエディター→HTML→書式設定→タグ指定オプション)。

ただ、高機能な分、ちょっと重いような気がするのは否めない。