Alfresco勉強会#30 alfrescoとshareのJavaScriptをデバッグしよう

第30回Alfresco勉強会
AlfrescoとShareのJavaScript
をデバッグしよう
2015/10/28 Tomomi Kawabe

はじめに
 自己紹介
 川部知美です
 aegifで働いています
 Alfrescoは4.2.dからぼちぼち触っています
 今日の環境
 Alfresco 5.0.dをMac OS X 10.10にインストーラの設定を特に変更
せずにインストールしたもの

内容
 Alfrescoで利用されているJavaScriptについて
 AlfrescoのサーバサイドJavaScript
 ShareのサーバサイドJavaScript
 ShareのクライアントサイドJavaScript
 Debug Menu

Alfrescoで利用されているJavaScriptについて
 Alfrescoは2つのアプリケーションで構成されている
 Alfresco - リポジトリのコア機能を提供
 Share - UI機能を提供
 JavaScriptの利用には3パターン
 Alfrescoのサーバサイド
 Shareのサーバサイド
 Shareのクライアントサイド
それぞれについて、
デバッグとログ出力の機能を見ていきましょう

AlfrescoのサーバサイドJavaScript
 主にREST APIを提供するためのWeb Scriptsで利用されてい
る
 Rhino（JavaによるJavaScriptの実装）で実行される
 以前は
webapps/alfresco/WEB-INF/classes/alfresco
配下にあったが、5.0.dでは
webapps/alfresco/WEB-INF/lib/alfresco-remote-api-5.0.d.jar
あたりに固められている

 デバッグ
 ツールが用意されており、起動方法が2通りある
1. tomcat/webapps/alfresco/WEB-INF/classes/log4j.propertiesに以下を追記
2. ブラウザで
http://localhost:8080/alfresco/service/api/javascript/debugger
にアクセスし、管理者情報を入力して認証後”Enabled”をクリック
※1 custom-log4j.propertiesなどの名称のファイルに追記しtomcat/shared/classes/alfresco/extension
に配置してもOK
※2 MacやLinuxでは、setenv.shでJAVA_OPTS= -Djava.awt.headless=falseに設定しないと起動しな
い(Windowsでは未確認）
log4j.logger.org.springframework.extensions.webscripts.ScriptDebugger=on

 このようなデバッグツールが起動する

 ログ出力
 log4j.propertiesに以下を追記（ログレベルの変更）する
 org.alfresco.repo.jscript.ScriptLoggerはサーバサイドJavaScript内でloggerオブジェク
トとしてアクセスできる
 以下のコードで、catalina.outやalfresco.logにログが出力される
（詳細はorg.alfresco.repo.jscript.ScriptLoggerを参照）
if (logger.isLoggingEnabled())
logger.log("something to log");
log4j.logger.org.alfresco.repo.jscript.ScriptLogger=debug

ShareのサーバサイドJavaScript
 主にREST APIを提供するためのWeb Scriptsで利用されてい
る
 Rhino（JavaによるJavaScriptの実装）で実行される
 webapps/share/WEB-INF/classes/alfrescoあたりに置いてあ
る

 デバッグ(Alfrescoのサーバサイドとほぼ同様）
 ツールが用意されており、起動方法が2通りある
1.tomcat/webapps/share/WEB-INF/classes/log4j.propertiesに以下を追記する
2. ブラウザでhttp://localhost:8080/share/service/api/javascript/debugger
にアクセスし、管理者情報を入力して認証後”Enabled”をクリック
※1 Shareの場合はtomcat/webapps/share/WEB-INF/classes配下のlog4j設定ファイルでないと反映さ
れない
※2 MacやLinuxでは、setenv.shでJAVA_OPTS= -Djava.awt.headless=falseに設定しないと起動しな
い(Windowsでは未確認）
log4j.logger.org.springframework.extensions.webscripts.ScriptDebugger=on

 ここはAlfrescoと同様。起動されるツールでデバッグ

 ログ出力
 log4j.propertiesに以下を追記する
 org.alfresco.repo.jscript.ScriptLoggerはサーバサイドJavaScript内でloggerオブジェク
トとしてアクセスできる
 以下のコードで、catalina.outやshare.logにログが出力される
（詳細はorg.alfresco.repo.jscript.ScriptLoggerを参照）
if (logger.isLoggingEnabled())
logger.log("something to log");
log4j.logger.org.alfresco.repo.jscript.ScriptLogger=debug

ShareのクライアントサイドJavaScript
 ShareでUI画面作成や操作のため、アクセスするそれぞれの
ブラウザで実行されるJavaScript
 tomcat/webapps/share/componentsあたりに置いてある

 準備
 デフォルトではminifyされたJavaScriptとなっているため、以下の設
定を変更してクライアントデバッグを有効にする
 tomcat/shared/classes/alfresco/web-extension/share-config-custom.xml
4 <config replace="true">
5 <flags>
6 
9 <client-debug>true</client-debug>
10
11 
15 <client-debug-autologging>false</client-debug-autologging>
16 </flags>
17 </config>

 デバッグ
 ブラウザのデバッグツールを利用
 開発者ツール、Firebugなど…

 ログ出力
 share-config-custom.xmlに記述あり
 client-debug-autologgingをtrueにするか、Ctrl, Ctrl, Shift, Shiftで
log4javascriptのログ出力画面を起動
4 <config replace="true">
5 <flags>
6 
9 <client-debug>true</client-debug>
10
11 
15 <client-debug-autologging>false</client-debug-autologging>
16 </flags>
17 </config>

 ログ出力画面

 ログ出力
 log4javascriptを利用している
 以下のコードで出力
（詳細はlog4javascriptのloggerを見てください）
if (Alfresco.logger.isDebugEnabled())
Alfresco.logger.debug("something to log");

Debug Menu
 ShareのクライアントサイドJavaScriptをminifyしないように
share-config-custom.xmlの設定を変更したが、この設定に
よって有効になるものが他にもある
 それがDebug Menu

Debug Menu
 Debug Menu
 4.2の途中で追加された、新しいheaderを作成するウィジェット群をデバッ
グする機能
 alfresco/core/Coreモジュールをmixinしたウィジェットが対象(4.2)
 Aikau Frameworkを利用しているウィジェットが対象で、YUIなどを利用
している昔からのウィジェットは対象外(5.0.d)
 5.0.dでAikau Frameworkを利用している箇所
 Header
 Live Search
 Filtered Search Page
 Search Management Page
 Site Management Page
 Analytics and Reporting Widgets
 Page Creator
 Document List prototype

Debug Menu
 Debug Logging
 “Debug Logging”と”Show All Logs”にチェックを入れてクライアントデバッ
グツールを開くと、ログが出力される
 ログの例：
 出力コード（alfresco/menus/AlfMenuBar.jsから抜粋）：
 this.alfLogがLoggingServiceにログを出力する際、functionの命名規則を読
み取ってログに反映させる
 LoggingServiceをカスタマイズすることで出力先を変更することも可能
alfresco/menus/AlfMenuBar/CustomMenuBar/[closeChild] >> Custom MenuBar
_closeChild
var CustomMenuBar = declare([MenuBar, AlfCore], {
_closeChild: function
alfresco_menus_AlfMenuBar_CustomMenuBar___closeChild(){
this.alfLog("log", "Custom MenuBar _closeChild");
}
});

Debug Menu
 Toggle Developer View
 Surfbugのように、Aikau Framework部分のウィジェットを確認でき
る

Debug Menu
 Toggle Developer View
 拡張に必要なファイルをJARとしてダウンロードできる

まとめ
 AlfrescoのサーバサイドJavaScript
 ShareのサーバサイドJavaScript
 デバッグツールの起動
 log4j.propertiesでデバッグレベルの変更
 loggerオブジェクトによるサーバログへのログ出力
 ShareのクライアントサイドJavaScript
 ブラウザのデバッグツール利用
 ログ出力ツールの起動
 log4javascriptのツールによるログ出力
 Debug Menu
 Aikau Frameworkのウィジェット用
開発中にデバッグしたいときにも参考にしてください

参考にしたサイト・記事
 http://docs.alfresco.com/community/tasks/dev-extensions-share-tutorials-debugging.html
 http://docs.alfresco.com/5.0/concepts/aikau-intro.html
 http://aegif-labo.blogspot.jp/2013/02/alfrescojavascript.html
 http://blogs.alfresco.com/wp/developer/2013/11/07/debugging-in-alfresco-share-4-2/
 http://blogs.alfresco.com/wp/kevinr/2010/04/07/developer-tips-for-alfresco-share-33/
 http://blogs.alfresco.com/wp/developer/2015/04/01/adding-views-to-filtered-search/

Alfresco勉強会#30 alfrescoとshareのJavaScriptをデバッグしよう

More Related Content

What's hot

Viewers also liked

Alfresco勉強会#30 alfrescoとshareのJavaScriptをデバッグしよう