気軽に Web コンテンツを書くためのエディタ
新年あけましておめでとうございます。
昨年は、Windows 8 リリースに向けての準備に始まり、リリースを終えて一年が終るという、私にとっては本当に Windows 8 一色の一年でした。
Windows 8 は、リリースされたとはいえ、その新しい UI 上で動作する Windows ストア アプリはまだまだ少ない状況ですので、今後も引き続き、Windows ストア アプリの開発に関する情報をお届けしていく予定です。
もちろん、Windows ストア アプリだけでなく Internet Explorer 10 や、たまには IIS8 の情報も出していければ、思っておりますのでご期待ください。
さて、年が明けて第一回めの投稿となる今回のネタですが、Windows 8 には全く関係ない、自作ツールの紹介です。
実は、3 年ほど前まで、外部のブログで、数回の記事にわけてテキスト エディタを開発し、C# と Windows デスク トップアプリケーションの作り方を学ぶ、というのをやっておりました。
そのブログは最終回の直前で、私の業務内容が変わったこともあり、そのまま中断していたのですが、先日そのブログを読んでいたという方から「最終回の記事を書いてほしい」というリクエストがあり、つい一昨日、お正月明けの勢い(?)を借りて最終回の記事を投稿した次第です。
その際に、当時作成したテキストエディタのソースを引っ張りだして来て、Visual Studio 2012 でのコンバートと、細かいコードの調整を行ったのですが、使ってみるとなかなか使い勝手がよく、ちょうど手軽に Web コンテンツを書くツールも欲しかったこともあり、その記事を投稿後に本格的に自分用に機能を追加してみた次第です。
さすが、自分用に作っただけあって、使い勝手はすこぶる良いです(笑)
使い方の紹介と、ソースコードもダウンロード可能としますので、興味のある方はそのまま使うなり改造して使うなりしてみてください。
以降は、このテキスト エディタの機能の紹介になります。
メモ帳との違い
テキストの編集機能は メモ帳 とまったく変わるところはありませんが、それ以外でさまざまな変換機能、入力支援機能などが追加されています。
これら機能のほとんどは、このテキストエディタのメニュー [ツール] – [オプション] にまとめられています。
(メニュー[ツール]-[オプション]を展開したところ)
以降これらの機能から メモ帳 にはない機能について説明していきます。
扱うファイルの拡張子の追加と削除機能
アプリケーションで編集対象とするファイルの拡張子を自由に追加/削除することができるようになっています。
具体的には、ファイルを開くダイアログボックスの、ファイルの種類を示すドロップダウンリストの内容を任意で指定することが可能です。
これにより未知の拡張子が付けられたテキスト形式のファイルを編集するときでも、いちいちアプリケーションのソースを変更してフィルタの種類を増やす必要はありません。
(ファイルの拡張子を指定するダイアログボックス)
(ファイル選択ダイアログボックスの拡張子ドロップダウンボックス)
もちろん、リストが多すぎると感じる場合は、拡張子のエントリーを削除することもできます。
ファイルの暗号化
ファイルを保存する際にファイルを暗号化する機能をサポートしています。
(設定ダイアログボックスの[エンコードと暗号化]パネル)
この機能は、テキストを肉眼で判読不能とする所謂 (いわゆる) 難読化とは異なるもので、NTFS の暗号化ファイルシステム (EFS: Encrypting File System) の機能を利用して、ファイルの作成者しかファイルを開けないようにします。
この機能を使用すると、絶対に誰にも見られたくないような内容の文書を思う存分書いても安心して保存しておくことができます。
ただし、この機能は、OS がユーザーアカウントを管理する機能を搭載していることが前提であるため、Windows XP の Home エディションなどでは使用することはできませんで注意が必要です。
NTFS 暗号化の詳細についてさらに詳しく知りたい方は以下の内容をご参照くださいませ。
暗号化ファイル システムの最善の使用方法
https://support.microsoft.com/kb/223316/ja
ファイルの自動保存
編集中のファイルを一定間隔で保存する自動保存の機能をサポートしています。
(設定ダイアログボックスの [自動保存] パネル)
編集中のファイルに上書きするか、作業ファイルに保存するか選択することができます。
作業ファイルに自動保存するようにした場合は、アプリケーションの exe のあるフォルダ下に自動的に作成される AutoSaved という名前のフォルダに作業中の内容が保存されます。
AutoSaved フォルダ内のファイルは、ファイルの保存、アプリケーションの正常終了時に自動的に削除されますが、アプリケーションの異常終了などでファイルが残っている場合は、アプリケーションの次回起動時に作業ファイルの内容をロードするかどうかを聞いてきます。
この機能を積極的に使用することにより、予期せぬアプリケーションの終了や、不意のマシン クラッシュといった不幸な出来事から受けるデータの損失と精神的なダメージを少なからず和らげることができます。
バイナリファイルの Base 64 エンコードとデコード
画像などの非テキストファイルを Base 64 エンコードし、テキストに変換する機能、そしてデコードして元のファイル形式に戻す機能を搭載してします。
この機能を使用するには、アプリケーションのテキスト エディター部分に目的のファイルをドラッグします。
(非テキスト形式のファイルがドラッグされたところ)
テキスト エディター部分にテキスト ファイル以外のファイルをドラッグすると、Base 64 エンコードするかメッセージボックスが表示されるのでエンコードする場合は [OK] ボタンをクリックします。
(Base 64 エンコードされたデータ)
たとえば、この機能を使用して、画像ファイルを Base64 エンコードし、以下のように HTML ファイルの <img> タグのソースとして埋め込むことができます。
<img src="data:image/jpg;base64,xxxxxx...." />
また単純に、所持しているたけで自らの社会的身分を危うくするようなファイルを分からないように文字列として保存しておくことにも使えるのかもしれません。
メニュー[ファイル] - [名前を付けて保存] を選択すると、仮の拡張子 *.bs64 のついたファイル名が付けられますが、自分でもとのファイル名と、どのようなファイルであるかを覚えているのであれば変更してしまっても構いません。
Base 64 エンコードができるからには、当然 Base64 エンコードされたデータをデコードして元に戻す機能も搭載しています。
Base 64 エンコードされたデータを元のファイル形式に戻すには、メニュー[ファイル] - [Base64 デコードして保存] を選択します。
(デコード用のメニューはファイルを Base 64 エンコードした際か、拡張子 *.bs64 ファイルをオープンした際に有効になる)
なお、この時のファイル名が、このアプリケーションが付けたものであれば、自動で元のファイル名が付けられますが、変更している場合は、明示的に正しい拡張子を含んだ名前を付ける必要があります。
この機能を使用して、Base 64 で保存しておいたファイルをもとのファイル形式に戻すことはもちろん、ネットワークから取得したデータから Base 64 部分を取り出し、うへへぇ～とか言いながら (べつに言わなくても構いませんが) 復元して内容を確認するといったことにも使用できます。
これまで紹介してきた機能の他、メニュー [ツール] にもいくつかの特徴的な機能が実装されています。
(メニュー[ツール] を展開したところ)
ここからはメニュー[ツール]からアクセスできる機能について紹介します。
カラーコードの挿入
メニュー [ツール] – [カラーコードの挿入] を選択すると、カラーパレットが表示され、色を選択することでそのカラーコードをドキュメント上に挿入できます。
(色を選択すめためのカラーパレット)
挿入されるデータは、カラーネームを持つものであればカラーネームが、カラーネームを持たないものはカラーコードが挿入されます。
URL, HTML エンコード/デコード
メニュー [ツール] – [URL 文字列]、[HTML 文字列] をマウスでポイントすると、それぞれ URL エンコード/デーコード、HTML エンコード/デコード 機能を使用することができます。
(メニュー[URL 文字列]、[HTML 文字列]内には、それぞエンコード/デコードのメニューがある)
エンコード/デコードは、テキストボックス内で、マウスで選択されている文字列に対して行われますが、マウスでなにも選択されていない場合は、テキストボックス全体がエンコード/デコードされます。
入力支援機能
このテキスト エディタは、非常に単純かつ合理的な入力支援機能 (スニペット) を備えています。
具体的には、特定のフォルダ下に配置したテキストファイル名をメニューとして表示し、メニュー選択時には、そのテキストファイルの内容をエディター上に出力します。
メニューの階層構造は、ユーザーが作成するディレクトリ構造が反映されます。
階層の深さの制限は設けていませんので、アプリケーションが Stack overflow を起こして異常終了するまで階層を深くすることができます。
(Snippets フォルダに 「新春お試しセット」 を配置したもの)
この機能を使用するには準備が必要です。
アプリケーションは、初回起動時に自らの *.exe があるフォルダに Snippets という名前のフォルダを作成いるので、好みのメニューの階層構造を意識しながらフォルダを作成します。
その後、よく使用するタグや、コードブロックを記述したテキストファイルを各フォルダに配置します。
ファイルを配置後、アプリケーションを起動すると、メニュー [スニペット]下にメニューが作成され、配置した各ファイルの内容がテキストボックスに出力されます。
なお、メニューに表示されるキャプションは、それぞれフォルダ名、拡張子を除いたファイル名になります。
アプリケーションのプロジェクトファイル
この記事で紹介したテキスト エディタのソースを以下 SkyDrive にアップしました。
手元の環境で、Visial Studio 2010 と Visual Studio 2012 で開発できることを確認しています。
なお、このアプリケーションは個人的に作成したツールの紹介となりますので、不具合の修正、機能追加のリクエストをいただいても対応できませんのであらかじめご了承ください。
アプリケーション内のコードの変更配布、再利用は自由にしていただいて構いません。
さらに今回、新春特別企画として、私が個人的に作成中のスニペットのイメージをアップしましたので、ダウンロード完了後、zip ファイルの中身を、アプリケーション フォルダ内の Snippets フォルダに展開し、お試しください。
また、コンパイル済のものも用意しましたので Visual Studio をお持ちでない方はこちらをお試しください。(新春特別パック入り)
お使いの Windows OS に .NET Framework 3.5 以上がインストールされていれば、monoeditor.exe をダブルクリックししてそのまま動作するはずです。
ということで、今年もよろしくお願いいたします。
【2013 / 01 / 18 ぶんの修正と機能追加】
その後、このエディターを使用して、この記事 のカレンダーコントロールを作ってみましたが、文字化けなどが発生したり機能が足りなかったりしたので、更新してみました。
大まかな変更点は以下との通りです。
ファイル読出し/書き出し時の文字コードの変更
前回までのコードでは、文字エンコードは TextBox コントロールの既定のままとしていましたが、どうやらファイルの文字エンコードに合わせた処理をよしなにやってくれるということは無いようで、日本語を含む html などを編集すると文字化けがはなはだしので、扱う文字エンコードを UTF8 で固定しました。
Web 関連ファイル編集時のファイルドラッグ処理の変更
拡張子が htm, html, aps, apsx, php のファイルを編集している時に、エディタのテキストボックス部分にファイルをドラッグした際、ドラッグされたファイルの種類に合わせ、ファイルへの相対パスを含む HTML タグを挿入するようにしました。
なお、ドラッグするファイルは複数選択が可能です。
処理されるファイルと挿入される HTML タグの内訳は以下の通りです。
| 拡張子 | 挿入されるタグ |
| jpg, jpeg, gif, png | <img> |
| js | <script> |
| css | <link> |
| その他のファイル | <a> |
この機能を使用すると、js ファイルや CSS ファイルへの参照も、目的のファイルをエディタにドラッグするだけでよく、いちいちタグを記述する必要はなくなります。
(今にして思えば <video>、<audio> タグの挿入も対応しておけばよかったな、と。)
追加された機能
メニュー[ツール] に [関連づいたアプリケーションで開く] 機能と、[作業中のフォルダを開く] 機能を追加しました。
[関連づいたアプリケーションで開く] 機能
編集中のファイルに、OS で関連付けられたアプリケーションでファイルをオープンします。
この機能を使用すると、たとえば、HTML ファイルを編集中に変更結果を見たい場合、いちいち編集中のファイルのあるフォルダを開き、ファイルをダブルクリックして Web ブラウザを起動するといったアクションが必要なくなります。
[作業中のフォルダを開く]
編集中のファイルが保存されているフォルダを開きます。
たとえば、編集中のファイルをコピーする場合など、いちいちフォルダのトップレベルから階層を下るということをしなくてもよくなります。
上記に記載した内容は、ダウンロードできるイメージに既に反映されていますので、興味のある方はお試しください。
Comments
- Anonymous
January 09, 2013
【補足】 この記事で紹介したテキスト エディタには HTML や CSS、JavaScript 等のデバッグ機能がありませんが、Internet Explorer の F12 開発者ツール と組み合わせて使うと幸せになれるでしょう。 使ってみよう! [F12] IE9 開発者ツール - HTMLとJavaScript のデバッグ編 blogs.msdn.com/.../f12-ie9-html-javascript.aspx