読者です 読者をやめる 読者になる 読者になる

#daiizメモ

フレンチフライ トリュフ塩仕立て

技術ネタはてブ数が多いごはん情報

スポンサーリンク

HTMLのインラインJavaScriptを外部ファイル読み込み形式に変更するperlスクリプトを書きました

作品 chrome-dev-editor

HTMLのソースコードの中に直接書かれた<script></script>JavaScript(インラインスクリプト)を、外部の.jsファイルに書き出して呼び出す形式に変更するためのPerlスクリプトRefactorForCSPを書きました。GitHubで公開しています。

以下のように実行すると、引数で与えられたディレクトリ(以下の例ではdir/)内部のすべてのHTMLファイルに対して、前述の置換作業が行われます。

perl refactor_csp.pl dir/

たとえば、「index.html」というHTMLファイルのソースコードが次のようになっており、<script>タグが2箇所あるとき、

<html>
  <head>
    <title>Sample</title>
    <script>
      ...
    </script>
  </head>
  <body>
    Hello!
    <script> ... </script>
  </body>
</html>

refactor_csp.plを実行すると、同ディレクトリ内に変更前のコピーファイル「index.html.pre_csp」とJavaScriptファイル「index.html.0.js」、「index.html.1.js」が生成されます。そして、「Index.html」が以下のように更新されます。

<html>
  <head>
    <title>Sample</title>
    <script src="index.html.0.js"></script>
  </head>
  <body>
    Hello!
    <script src="index.html.1.js"></script>
  </body>
</html>

いつ使うか

ウェブアプリを安全に保つための「Content Security Policy (CSP)」というルールのなかに「インラインスクリプトの禁止」というものがあり、Chromeアプリなどの厳格な実行環境では、HTMLファイル中にJavaScriptをベタ書きすると実行できません。

自分でJavaScriptを書く際にはこれに気をつけて、予め外部ファイルに記述するように心がけることはできますが、それでもやはり多少は面倒に感じていました。さらに大変なのが、他の方が作られたサンプルやWeb ComponentをChromeアプリとして実行しようと思ったときです。

ソースコードの中から一つ一つ手作業でインラインスクリプトを探して編集するのは時間がかかってしまいます。こんなときに、このプログラムを使えば、たくさんあるHTMLファイルに対して一発で処理をしてくれます!

ちなみに(その1)

実はこの機能、Chrome Dev Editorには実装されています。以前以下の記事でも書いていますが、フォルダを選択・右クリックしてRefactor for CSPメニューをクリックするだけで実行できます。

この機能に感動して、「これと同じことがターミナルでできればいいな」ということで作ってみた次第です。なので、出力されるファイルの名前はChrome Dev Editorの出力結果に合わせてみました。

ちなみに(その2)

実は今回これを作るためだけにperl言語に挑戦*1してみました。今後はもう少し勉強してモジュールとかを積極的に使っていきたいです。

*1:おそらく、perlでのプログラミングはこれが初めて?だと思います。