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

#daiizメモ

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

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

スポンサーリンク

Chrome Dev Editor の「Refactor for CSP」機能をPythonで実装してみた

python chrome-dev-editor tech

かつてPerlでも同じことに挑戦しましたが、Pythonでもやってみました。

今回書いたPython版のスクリプトは、前回のものよりもChrome Dev Editorの「Refactor for CSP」機能をしっかりと再現できていると思います。

「Refactor for CSP」機能とは

HTMLコード中のインラインスクリプトを外部スクリプトを読み込む形に変更する機能です。

この機能は、例えば、index.html内の

<script>
    console.log("Hello, ");
</script>
<script>
    console.log("world!");
</script>

ようなインラインスクリプトの部分を

<script src="index.html.0.js"></script>
<script src="index.html.1.js"></script>

に書き換えて、HTMLファイルと同階層にindex.html.0.jsindex.html.1.jsを生成します。

refactor_csp.py

GitHub(下記のリンク先)で公開しています。

RefactorForCSP/refactor_csp.py at master · daiz713/RefactorForCSP · GitHub

使い方

このスクリプトBeautifulSoupモジュールを使用していますので、予めインストールしてください。以下のコマンドでインストールできます。

pip install beautifulsoup4

続いて以下のコマンドを実行します。

python refactor_csp.py

すると、実行したディレクトリをルートとして、ルート以下のすべてのディレクトリとファイルを走査してインラインスクリプトを外部スクリプトに変更する処理が行われます。

f:id:daiiz:20150311224853p:plain ファイルの書き出し中はビール「🍺」がズラッと表示され、処理が完了すると寿司「🍣」が表示されます。

使い道

  • Chromeアプリのようにインラインスクリプトを使用できない環境に対応するとき
    • Web components を簡単に扱う Polymer 要素郡などはHTMLファイルの量が膨大なため、コマンド一発で処理ができると便利です。
  • Chrome Dev Editorが重いとき

ぜひご利用ください。