Source Code Cleaner とは

【2009-06-24】

Source Code Cleaner 2.0 を公開しました。

Source Code Cleaner（ソースコード・クリーナー）とは、Movable Type で構築されるページの余分な改行や空行などを全部削除するお掃除機能と、tabindex や accesskey、さらには外部リンクに特定のクラス名などを自動で付与してくれる便利機能を兼ね備えたプラグインです。

お掃除機能

Movable Type で構築されたページのソースって、余分な改行がたっぷりでなんだか嫌ですよね。

Source Code Cleaner　はそれらの改行、空行をきれいさっぱり削除してくれます。余分な改行、空行を削除することでソースコードが見やすくなるだけでなく、ページの表示速度も若干速くなると思います。

当ブログのトップページのソースは、動作テスト時現在、プラグインを使う前は 2331行でしたが、プラグインを使うと 914行になりました。

ただし、ページすべてに適用されるので、意図的に入れている改行もすべて削除してしまいますので、そこはご了承ください。特に、ブログ記事で pre要素で入れている改行も削除してしまうので、そこの改善は今後の課題です。

バージョン 1.1 までは、ブログ記事中の pre 要素内の改行等も削除してしまいましたが、バージョン 2.0 からは pre 要素内の改行は元のまま残せるようになりました。

逆に、まさにすべての改行を削除し、ソースコードを 1行にしてしまうことも可能になりました。

便利機能

バージョン 2.0 から追加した機能で、次の属性を自動で付与してくれます。

tabindex 属性

input、textarea、button 要素に、ソースの順に連番を付与します。初期値を変更できます。

accesskey 属性

input、textarea、button、legend 要素に、ソースの順に連番または連続する英字を付与します。初期値を変更することができます。

また、tabindex 属性を付与する要素に同じ数字の accesskey 属性を付与し、それ以外の要素に連続する英字を付与するという設定もできます。

外部リンクに class 属性

外部リンクにアイコンを表示させるような場合に便利です。付与する class 属性の文字列は変更できます。

動作環境

Movable Type 4.2 で動作確認済み

ダウンロード

インストール

ダウンロードしたファイルを解凍して生成された「SourceCodeCleaner」フォルダをMovable Typeのプラグインディレクトリにアップロードしてください。

  • mt
    • plugins
      • SourceCodeCleaner
        • SourceCodeCleaner.pl
        • lib
        • tmpl

「ツール > プラグイン」を開き、プラグイン一覧の中に「Source Code Cleaner」が表示されていればインストール成功です。

scc_menu.png

scc_2_0.png

使い方

このプラグインは、テンプレートを基にページを構築し、実際のファイルに出力される前のタイミングで動作します。なので、改行を取り払いたい部分をブロックタグで囲むなどの必要はなく、インストールしてテンプレートを再構築すればOKです。

オプション設定

scc_2_0_setting.png

プラグインの設定画面で、以下の設定ができます。

全般設定
  • ソースコードクリーナーを有効にする
各項目の設定
  • li 要素に適用する
  • pre 要素に適用する
  • すべての改行を取り除く
その他の機能
  • tabindexを追加する
  • accesskeyを追加する
  • accesskeyにtabindexと同じ数字にする
  • 外部リンクにclassを追加する

ソースコードクリーナーを有効にする

scc_active.png

チェックを入れるとプラグインを有効に、チェックを外すとプラグインを無効にできます。デフォルトではチェックが入っています。

li 要素に適用する

scc_li.png

li 要素の閉じタグの手前の空白文字や改行を削除します。デフォルトではチェックが入っています。通常はこのままでいいでしょう。

pre 要素に適用する

scc_pre.png

チェックを入れると pre 要素内の余分な改行や空行も削除し、チェックを外すと pre 要素内は元のままになります。デフォルトではチェックが外れています。

すべての改行を取り除く

scc_all.png

チェックを入れると、すべての改行を削除し、ソースコードを１行にすることができます。デフォルトではチェックが外れています。

ただ、すべての改行をそのまま取り除いてしまうと、思わぬ不具合が発生する心配があるので、念のため半角スペースを入れてあります。

つまり、正確に言えば「すべての改行を半角スペースに変換する」ということになります。

もちろん、上記の「pre 要素に適用する」にチェックを入れておけば、pre 要素内はもとのまま残すことができます。

tabindexを追加する

scc_tabindex.png

input、textarea、button 要素に、ソースに登場する順に連番を付与します。type="hidden"には適用されません。デフォルトではチェックが外れています。初期値は変更できます。

例えば、検索のテキストフィールドに手動で「tabindex="1"」、検索ボタンに「tabindex="2"」を付与しておき、プラグインの初期値を「3」にしてその他は連番を付与するといった使い方ができます。

accesskeyを追加する

scc_accesskey.png

input、textarea、button、legend 要素に、ソースに登場する順に連番または連続する英字を付与します。type="hidden"には適用されません。デフォルトではチェックが外れています。初期値は変更することができます。

この機能は、アクセシビリティ的にどうなのって感じもしますが、accesskey はブラウザなどのユーザー環境によって使える文字がまちまちなので、いっそのこと連番を付与してしまってもいいんじゃないか、その代わり、tabindex をしっかり付与しておいて、順番にアクセスできるようにしておこう、という発想です。

accesskeyにtabindexと同じ数字にする

scc_tab_acc.png

チェックを入れると、tabindex 属性を付与する要素に同じ数字の accesskey 属性を付与し、それ以外の要素に連続する英字を付与することができます。デフォルトではチェックが外れています。

この機能を使う場合、当然上記の tabindex、accesskey の機能を有効にしておく必要があります。

外部リンクにclassを追加する

チェックを入れると、外部リンクに「class="exlink"」を付与します。すでに class が設定されている場合には、その class に exlink を追加します。デフォルトではチェックが外れています。初期値は変更できます。

yuga.js :: Kyosuke.jpの負荷を少し減らせるかもしれません。

特定のテンプレートやページに適用させない方法

バージョン 2.0 から、MTCleaner というファンクションタグが使えるようになりました。

<$mt:Cleaner$>

このファンクションタグは、次のような　CSS や JavaScript のコメントが出力されます。

「 html="1" 」モディファイアを設定すると、次のような html のコメントが出力されます。

<!-- Exc SCC -->

これらの文字列があるページには、当プラグインが適用されません。なので、特定のページや特定のテンプレートに適用させたくないときに便利です。

このファンクションタグで出力されたコメント文は、再構築時に削除されるので、ソースを汚すことはありません。

ライセンス

個人利用・商用利用を問わず、このプラグインを無償で自由に利用することができます。著作権は作者が所有しています。

ただし、このプラグインは無保証です。作者はこのプラグインの利用における一切の動作保証とサポートを行いませんのでご注意を。

更新履歴

【2009-06-24】

バージョン 2.0 を公開しました。それに伴い、このページの説明も修正しました。

【2009-06-18】

バージョン 1.1 を公開しました。li 要素周りの改行も、より奇麗に取り除けるようになりました。

【2009-06-11】

バージョン 1.0 を公開しました（最初の公開）。

注意点など

2009-06-11 現在、Perlはド素人なうえに『Movable Typeプラグイン開発入門』を読んで勉強中ですので、一切の保証できません。

もちろん自分の環境（Mac ローカル、レンタルサーバー「heteml」上）での動作確認は行っております。

Source Code Cleaner プラグインに関するブログ記事

【2009-06-17 追記】

公開当初、当ページのURLは

  • /blog/download/mt-plugin/source-code-cleaner---movable.html

となっていましたが、

  • /blog/download/mt-plugin/source-code-cleaner.html

に変更しました。旧ページからは「301 リダイレクト」と呼ばれる方法でリダイレクトしています。