Embed Size (px)
Citation preview
第 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あたりに固められている
Alfrescoのサーバサイド JavaScript
デバッグ ツールが用意されており、起動方法が 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
Alfrescoのサーバサイド JavaScript
このようなデバッグツールが起動する
Alfrescoのサーバサイド JavaScript
ログ出力 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あたりに置いてある
Shareのサーバサイド JavaScript
デバッグ (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
Shareのサーバサイド JavaScript
ここは Alfrescoと同様。起動されるツールでデバッグ
Shareのサーバサイド JavaScript
ログ出力 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あたりに置いてある
Shareのクライアントサイド JavaScript
準備 デフォルトではminifyされた JavaScriptとなっているため、以下の設定を変更してクライアントデバッグを有効にする tomcat/shared/classes/alfresco/web-extension/share-config-
custom.xml
4 <config replace="true"> 5 <flags> 6 <!-- 7 Developer debugging setting to turn on DEBUG mode for client scripts in the browser 8 --> 9 <client-debug>true</client-debug> 10 11 <!-- 12 LOGGING can always be toggled at runtime when in DEBUG mode (Ctrl, Ctrl, Shift, Shift). 13 This flag automatically activates logging on page load. 14 --> 15 <client-debug-autologging>false</client-debug-autologging> 16 </flags> 17 </config>
Shareのクライアントサイド JavaScript
デバッグ ブラウザのデバッグツールを利用
開発者ツール、 Firebugなど…
Shareのクライアントサイド JavaScript
ログ出力 share-config-custom.xmlに記述あり
client-debug-autologgingを trueにするか、 Ctrl, Ctrl, Shift, Shiftで log4javascriptのログ出力画面を起動
4 <config replace="true"> 5 <flags> 6 <!-- 7 Developer debugging setting to turn on DEBUG mode for client scripts in the browser 8 --> 9 <client-debug>true</client-debug> 10 11 <!-- 12 LOGGING can always be toggled at runtime when in DEBUG mode (Ctrl, Ctrl, Shift, Shift). 13 This flag automatically activates logging on page load. 14 --> 15 <client-debug-autologging>false</client-debug-autologging> 16 </flags> 17 </config>
Shareのクライアントサイド JavaScript
ログ出力画面
Shareのクライアントサイド JavaScript
ログ出力 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/
