前の関連記事：linuxBean14.04(124)SyntaxHighlighter v4の自作ブラシをnpmに登録する
何がしたいか、そのために必要なこと
やりたいことはBloggerのHTML/JavaScriptガジェットに入れたJavaScriptの開発を簡単にすることです。
開発とは、コードのデバッグと編集が簡単にできることです。
linuxBean14.04(21)Bloggerで使うJavaScriptの開発環境ではローカルPCにあるjsファイルをNode.jsのhttp-serverでBloggerに読み込ませて、Chromeでデバッグしました。
それで不具合があったところをそこで編集して保存したかったのですが、このときはやり方がわからず同じファイルをBracketsで編集して保存するという手順を踏まないといけませんでした。
それがChromiumのワークスペースを使うことによってデバッグと編集と保存がChromiumだけでできるようになりました。
jsファイルをBloggerの外部に置いているときはChromiumだけで事足りるのですが、HTML/JavaScriptガジェットに入れているJavaScriptの場合はそのままではデバッグはできますが、編集と保存ができません。
ガジェットに入れているJavaScriptを一旦Blogger:外部ファイル置き場をGoogleドライブからGoogleサイトへ変更のようにGoogleサイトにおいてBloggerに読み込ませれば、Chromiumでデバッグしワークスペースで編集保存できるようになり、編集した内容もChromiumに反映させてみることができます。
これでもよいのですが、どうせローカルPCにあるjsファイルを編集することになるのと、わざわざ外部ファイルにjsファイルをアップロードするのを手間に思ったので、やはりローカルにhttpサーバーを立てることにしました。
httpサーバーについてはChromiumのNetBeans ConnectorプラグインとNetBeans8.1と組見合わせてNetBeansからボタン一つでサーバーを起動できるようになりました。
この方法でもHTML/JavaScriptガジェットのJavaScriptはそこから出してjsファイルにしないといけないことは変わりありません。
そのためにはテストブログの作成も必要です。
NetBeans8.1のプロジェクトで作成したjsファイルをBloggerに読み込ませる
Chromiumのメニューボタンから、その他のツール→拡張機能、他の拡張機能を見る。
「NetBeans Connector」で検索してでてきたNetBeans Connectorをインストールしておきます。
Bloggerに読み込ませるjsファイルはBlogger:ページ番号付ページナビ(4)投稿数が150個を超えても使えるように修正するで作成したpagenavi.jsとpaginavi.cssにします。
これらはNetBeansのPageNaviプロジェクトにあります。
まずはNetBeansでhttpサーバーを起動してこれらのファイルにChromiumからアクセスできるようにします。
NetBeansでこのプロジェクトを開きNetBeans ConnectorにChromiumを選択し実行ボタンをクリックします。
Chromiumが起動しますが、pagenavi.jsが取得するフィードのアドレス設定もindex.htmlも設定していないので何も表示されないかもしれません。
今回はそれは問題なくChromiumのアドレスバーに表示されているURLを確認します。
http://localhost:8383/PageNavi/index.html
これから同じフォルダにあるpagenavi.jsとpagenavi.cssのURLがわかるので以下のリンクをBloggerのHTML/JavaScriptガジェットに保存します。
<link href="//localhost:8383/PageNavi/pagenavi.css" rel="stylesheet" type="text/css"/>
<script src="//localhost:8383/PageNavi/pagenavi.js" type="text/javascript"></script>
貼り付ける先はMathJax(4)表示チェック用のテストブログを作成するで作成したテストブログです。（2016.11.30追記。 Bloggerではhttpへのリンクを投稿内に埋め込めなくなったので「http:」の記述を削除しました。Blogger:表示速度向上のためCSSとJavaScriptの置き場を考える:その5参照。)
これらのURLが有効なのはNetBeansを起動しているPCのみなので同じPCのChromiumのタブで張り付けたBloggerのブログにアクセスするとそのスクリプトが動いていることが確認できます。
NetBean Connectorのタブを閉じてしまってもローカルhttpサーバーは起動したままなので問題ありません。
ChromiumのワークスペースでローカルPCのファイルとマッピングさせる
次にChromiumのワークスペースの設定を行います。
Chromiumで開いているBloggerのブログのタブで右クリック→検証。
Sourcesタブをクリック。
適当なところで右クリック→Add Folder to Workspace。
NetBeansProjectsフォルダにあるPageNaviプロジェクト内のpubulic_htmlフォルダを選択しました。
ローカルにあるフォルダへのフルアクセスの許可が求められるので許可にします。
するとローカルPCにあるファイルがChromiumのSourcesタブで見えるようになります。
選択したフォルダ内にファイルがなにもないときはフォルダ名すら表示されませんのでワークスペースに追加するフォルダは何かファイルがあるフォルダを選択する必要があります。
この状態ではまだChromiumはブラウザとして開いているファイルに読み込まれているjsファイルとローカルに読み込んだjsファイルの関連が付けられていないのでそれを関連付けます。
Sourcesタブに表示されているローカルのpagenavi.jsを右クリック→Map to Network Resource。
マッピングする候補のファイル一覧がでてきます。
localhost:8383/PageNavi/pagenavi.jsを選択します。
これでhttpサーバーを通してみているpagenavi.jsがローカルPCにあるpagenavi.jsにマッピングされます。
あとはChromiumでワークスペースにあるpagenavi.jsのブレークもできますし、編集後にpagenavi.jsのタブを右クリック→Saveとすると保存もできますのでChromiumだけでデバッグが完結できます。
pagenavi.jsだけマッピングしたつもりですが同じフォルダにあるpagenavi.cssもマッピングされていました。
ChromiumのElementsでCSSを編集すると直ちにローカルPCのpagenavi.cssも変更されて保存されていました。
Sourcesタブで編集したときはSaveしないと反映されませんでした。
NetBeansで編集したときはNetBeansで保存するとChromiumに反映されます。
(変更の程度かNetBeansで編集した時間経過の問題なのか、マッピングをやり直さないといけないことがあります。)
これはとても便利ですね。
実際やってみるとNetBeansで編集してそのhｔｔｐサーバーでjsファイルをBloggerで読み込ませて、Chromiumでデバッグして修正点があればNetBeansで変更する、というサイクルの繰り返しになるのでChromiumのワークスペースは使っていません。
参考にしたサイト
Chrome デベロッパーツール Workspaces機能の設定 | Web Tips
ワークスペース機能で編集した内容はローカルファイルに保存できるので便利です。
0 件のコメント:
コメントを投稿