Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
第41回 Alfresco勉強会
Share UIカスタマイズ
Widget 編
2017年10月25日
Moritaka Soma
自己紹介
相馬 盛孝
オープンソースコンサルティングチーム所属
Alfrescoのカスタマイズやサポートをしています
最近はVR技術に興味があります
本日の発表内容
本日の発表内容:
これからAlfresco ShareのUIカスタマイズを
行おうと考えている方の参考となりそうな
内容をご紹介
※前半の説明はAlfresco勉強会39回
「Share UIカスタマイズの第一歩」の内容と同じで...
環境
環境:
Alfresco SDK 3.0 (All-In-One Project)
• Alfresco Platform 5.2.e
• Alfresco Share 5.2.d
*共にAlfresco SDK 3.0のデフォルトで
選...
環境
現状のAlfresco SDK 3.0 AIOの注意点:
Share Servicesが適用されているのに、
「Alfresco is running without Share Services.
See your System Adm...
Surf Extension Modules
Surf Extension Modulesとは?:
Surf Extension Modules are the main tool
to use when adding, updating, o...
Surf Extension Modules
Surf Extension Modules:
RuntimeにModuleデプロイの有効/無効を切り替える
ことが可能です。
http://<host>:<port>/share/page/mod...
Surf Extension Modules
Alfresco SDKでは
<artifactId>-share-jar/src/main/resources/alfresco/
web-extension/site-data/extensio...
Surf Extension Modules
モジュール定義の説明:
:
<customizations>
<customization>
<targetPackageRoot>org.alfresco.share.header</target...
Share Headerのカスタマイズ
Share Header:
比較的カスタマイズの要望が多い部分です。
• 不要なメニュー項目を隠したい
• ワークフローは使わないのでタスク項目を隠したい
• SSOを使うので明示的にログアウトさせたくな...
Share Headerのカスタマイズ
カスタマイズ方法:
Share HeaderはAikauのWidgetとして実装されているため、
Share HeaderのWebScriptが作成するオリジナルのWidget
モデルを、Surf Ext...
Share Headerのカスタマイズ
対象Widgetの調査:
ShareでClient Debug Modeを有効*にし、Debug Menuの
「Toggle Developer View」で、対象項目を調べるのが簡単です。
アイコンをク...
Share Headerのカスタマイズ
Surf Extension Module作成:
Share Headerのモデルを返すWebScriptのJavascriptは
WEB-INF/classes/alfresco/site-webscr...
Share Headerのカスタマイズ
• 項目の消去
• 項目の追加
• (オプションで設定可能な)挙動の変更
上記内容については39回で発表していますので
以下の資料をご参照下さい。
弊社 Labo Blog:
第39回Alfresco勉強...
Share Headerのカスタマイズ
検索フィールドのカスタマイズ:
検索フィールドのWidgetを調べると
alfresco/header/SearchBox というWidgetであることが分かる
Alfresco Shareのソースコード...
Share Headerのカスタマイズ
検索フィールドの不具合(?)修正:
Share Headerの検索フィールドは日本語IMEと相性が悪く
日本語変換の確定のEnterキーを押すと、そのまま検索が
実行されてしまう*。
* Firefox/...
Share Headerのカスタマイズ
検索フィールドの不具合(?)修正:
Widgetの実体であるSearchBox.jsを確認すると
検索フィールドの検索実行のトリガーとしてKeyUpイベントを
利用していることが原因で発生。
(Alfre...
Share Headerのカスタマイズ
検索フィールドの不具合(?)修正:
前述の弊社BlogでのSearchBox.jsを書き換える対応方法は
Alfresco Share 5.2.d では利用できない。
• SearchBox.jsがjar...
Share Headerのカスタマイズ
検索フィールドの不具合(?)修正:
修正方針:
検索実行のトリガーとしてKeyDownイベントを利用するように
修正を行ったSearchBox Widgetを作成し、こちらを利用する
ように置き換える。
...
Share Headerのカスタマイズ
検索フィールドの不具合(?)修正:
SearchBox Widgetの修正 :
検索実行のトリガーとしてKeyDownイベントを利用するように
修正を行ったSearchBox Widgetを作成。
オリジ...
Share Headerのカスタマイズ
検索フィールドの不具合(?)修正:
オリジナルのSearchBoxを継承し、修正の必要なメソッドを上書きする。
/src/main/resources/META-INF/js/aikau/1.0.101....
Share Headerのカスタマイズ
検索フィールドの不具合(?)修正:
オリジナルのSearchBoxを継承し、修正の必要なメソッドを上書きする。
CustomizedSearchBox.js#onSearchBoxKeyDown:
/**...
Share Headerのカスタマイズ
検索フィールドの不具合(?)修正:
オリジナルのSearchBoxを継承し、修正の必要なメソッドを上書きする。
CustomizedSearchBox.js#onSearchBoxKeyUp:
/**
*...
Share Headerのカスタマイズ
検索フィールドの不具合(?)修正:
Share Headerのモデル作成部分からid: HEADER_SEARCHを定義している部分を探す。
WEB-INF/classes/alfresco/site-w...
Share Headerのカスタマイズ
検索フィールドの不具合(?)修正:
定義部を参考にShare Headerのモデルを修正するJavascriptにSearchBox Widgetの
実装を入れ替えるする処理を追加。
/src/main/...
デモ
ご質問など
ありがとうございました。
Upcoming SlideShare
Loading in …5
×

Share UIカスタマイズ Widget編

第41回のAlfresco勉強会の、Alfresco Share UI Widgetカスタマイズ方法のご紹介資料です。

Alfresco ShareのUIカスタマイズはAlfrescoのカスタマイズのご要望の中でも多い内容です。
今回はWidget編としてShare Headerの検索フィールドで日本語変換時のEnter入力が検索トリガーとして働いてしまう不具合(?)を修正するカスタマイズについて発表しています。
第39回 Alfresco勉強会で発表した「Share UIカスタマイズの第一歩」(https://www.slideshare.net/MoritakaSoma/share-ui)の続編的な内容になっていますので、Alfrescoを使っていてUI上のWidgetのカスタマイズを行おうと考えている方、Widgetカスタマイズのやり方が判らず悩んでいる方の参考になるかと思います。

  • Be the first to comment

  • Be the first to like this

Share UIカスタマイズ Widget編

  1. 1. 第41回 Alfresco勉強会 Share UIカスタマイズ Widget 編 2017年10月25日 Moritaka Soma
  2. 2. 自己紹介 相馬 盛孝 オープンソースコンサルティングチーム所属 Alfrescoのカスタマイズやサポートをしています 最近はVR技術に興味があります
  3. 3. 本日の発表内容 本日の発表内容: これからAlfresco ShareのUIカスタマイズを 行おうと考えている方の参考となりそうな 内容をご紹介 ※前半の説明はAlfresco勉強会39回 「Share UIカスタマイズの第一歩」の内容と同じです • Surf Extension Modulesの紹介 • UI挙動の変更(不具合修正)
  4. 4. 環境 環境: Alfresco SDK 3.0 (All-In-One Project) • Alfresco Platform 5.2.e • Alfresco Share 5.2.d *共にAlfresco SDK 3.0のデフォルトで 選択されているバージョンです Alfresco SDKの使い方については割愛します…
  5. 5. 環境 現状のAlfresco SDK 3.0 AIOの注意点: Share Servicesが適用されているのに、 「Alfresco is running without Share Services. See your System Administrator for more details.」 というメッセージが出てしまう。 https://github.com/Alfresco/alfresco-sdk/issues/445 src/test/resources/share/share-config-custom.xml の <endpoint-url>${alfresco.repo.url}/alfresco/api</endpoint-url> を <endpoint-url>${alfresco.repo.url}/api</endpoint-url> と修正することで 対処可能です。
  6. 6. Surf Extension Modules Surf Extension Modulesとは?: Surf Extension Modules are the main tool to use when adding, updating, or hiding content in the Share User Interface (UI). * * http://docs.alfresco.com/5.2/concepts/dev-extensions-share-surf-extension-modules.html 意訳: Share UIで、要素の追加・更新・削除(隠蔽) カスタマイズを行う上でのメインツール
  7. 7. Surf Extension Modules Surf Extension Modules: RuntimeにModuleデプロイの有効/無効を切り替える ことが可能です。 http://<host>:<port>/share/page/modules/deploy デバッグやテストの際、便利です。
  8. 8. Surf Extension Modules Alfresco SDKでは <artifactId>-share-jar/src/main/resources/alfresco/ web-extension/site-data/extensions フォルダにモジュール定義のxmlを配置します。 例: custom-header-extension-modules.xml <extension> <modules> <module> <id>Custom Share Header Menu</id> <version>1.0</version> <auto-deploy>true</auto-deploy> <customizations> <customization> <targetPackageRoot>org.alfresco.share.header</targetPackageRoot> <sourcePackageRoot>jp.aegif.share.header</sourcePackageRoot> </customization> </customizations> </module> </modules> </extension>
  9. 9. Surf Extension Modules モジュール定義の説明: : <customizations> <customization> <targetPackageRoot>org.alfresco.share.header</targetPackageRoot> <sourcePackageRoot>jp.aegif.share.header</sourcePackageRoot> </customization> </customizations> : この例では、Alfresco Shareの WEB-INF/classes/alfresco/site-webscripts/org/alfresco/share/header/ 以下に配置される、WebScriptのjavascriptに対して、 Alfresco SDK上で <artifactId>-share-jar/src/main/resources/alfresco/web-extension/ site-webscripts/jp/aegif/share/header/ 以下の、同名のjavascriptファイルを追加して実行することで、 カスタマイズを行う定義となります。 他にも様々な定義を行うことができますが、今回は割愛します…
  10. 10. Share Headerのカスタマイズ Share Header: 比較的カスタマイズの要望が多い部分です。 • 不要なメニュー項目を隠したい • ワークフローは使わないのでタスク項目を隠したい • SSOを使うので明示的にログアウトさせたくない • よく使う項目を追加したい • ごみ箱へ1クリックで移動したい • 検索フィールドのメッセージが中途半端なので修正したい etc…
  11. 11. Share Headerのカスタマイズ カスタマイズ方法: Share HeaderはAikauのWidgetとして実装されているため、 Share HeaderのWebScriptが作成するオリジナルのWidget モデルを、Surf Extension Modulesを利用して変更することで カスタマイズを行います。 Share Header WebScript Original Widget モデル Surf Extension Module 作成 変更 Customized Widget モデル
  12. 12. Share Headerのカスタマイズ 対象Widgetの調査: ShareでClient Debug Modeを有効*にし、Debug Menuの 「Toggle Developer View」で、対象項目を調べるのが簡単です。 アイコンをクリックすることで、WidgetのIDと取得のための Snippetを確認できます。 *SDKから起動した場合Client Debug Modeは有効化されています。
  13. 13. Share Headerのカスタマイズ Surf Extension Module作成: Share Headerのモデルを返すWebScriptのJavascriptは WEB-INF/classes/alfresco/site-webscripts/org/alfresco/share/header/share-header.get.js なので、以下のSurf Extension Moduleを作成。 <artifactId>-share-jar/src/main/resources/alfresco/web-extension/site-data/extensions custom-header-extension-modules.xml : <extension> <modules> <module> <id>Custom Share Header Menu</id> <version>1.0</version> <auto-deploy>true</auto-deploy> <customizations> <customization> <targetPackageRoot>org.alfresco.share.header</targetPackageRoot> <sourcePackageRoot>jp.aegif.share.header</sourcePackageRoot> </customization> </customizations> </module> </modules> </extension>
  14. 14. Share Headerのカスタマイズ • 項目の消去 • 項目の追加 • (オプションで設定可能な)挙動の変更 上記内容については39回で発表していますので 以下の資料をご参照下さい。 弊社 Labo Blog: 第39回Alfresco勉強会 Share UIカスタマイズの第一歩
  15. 15. Share Headerのカスタマイズ 検索フィールドのカスタマイズ: 検索フィールドのWidgetを調べると alfresco/header/SearchBox というWidgetであることが分かる Alfresco ShareのソースコードからこのWidgetを調べると、 aikau-1.0.101.3.jar に含まれる META-INF/js/aikau/1.0.101.3/alfresco/header/SearchBox.js がWidgetの実体であることがわかる。
  16. 16. Share Headerのカスタマイズ 検索フィールドの不具合(?)修正: Share Headerの検索フィールドは日本語IMEと相性が悪く 日本語変換の確定のEnterキーを押すと、そのまま検索が 実行されてしまう*。 * Firefox/IE11/Safariで発生、Chromeでは発生しない 参考: 弊社Blog Alfresco Community 5.0の検索BOXとIMEの相性が悪い
  17. 17. Share Headerのカスタマイズ 検索フィールドの不具合(?)修正: Widgetの実体であるSearchBox.jsを確認すると 検索フィールドの検索実行のトリガーとしてKeyUpイベントを 利用していることが原因で発生。 (Alfresco Community 4.2系まではKeyDownをトリガーとしていて問題は発生しなかったのに…) SearchBox.js Line:1129- onSearchBoxKeyUp: function alfresco_header_SearchBox__onSearchBoxKeyUp(evt) { var terms = lang.trim(this._searchTextNode.value); switch (evt.keyCode) { // Enter key press case 13: if (terms.length !== 0 && this.suppressRedirect !== true) { this.onSaveLastUserSearch(); // ACE-1798 - always close the live search drop-down on enter keypress.. this.clearResults(); this.alfLog("log", "Search request for: ", terms); var url = this.generateSearchPageLink(terms); this.alfPublish("ALF_NAVIGATE_TO_PAGE", { url: url, type: urlTypes.PAGE_RELATIVE, target: "CURRENT" }); } break;
  18. 18. Share Headerのカスタマイズ 検索フィールドの不具合(?)修正: 前述の弊社BlogでのSearchBox.jsを書き換える対応方法は Alfresco Share 5.2.d では利用できない。 • SearchBox.jsがjarファイル中に配置されているため、 直接書き換え不可 • SDKを利用してオリジナルのSearchBox.jsを置き換えるのは 簡単にはできない(そもそも可能かどうか不明)
  19. 19. Share Headerのカスタマイズ 検索フィールドの不具合(?)修正: 修正方針: 検索実行のトリガーとしてKeyDownイベントを利用するように 修正を行ったSearchBox Widgetを作成し、こちらを利用する ように置き換える。 Share Header WebScript Original Widget モデル Surf Extension Module 作成 変更 Customized Widget モデル Original SearchBox Widget Customized SearchBox Widget 参照 参照 継承
  20. 20. Share Headerのカスタマイズ 検索フィールドの不具合(?)修正: SearchBox Widgetの修正 : 検索実行のトリガーとしてKeyDownイベントを利用するように 修正を行ったSearchBox Widgetを作成。 オリジナルのSearchBoxを継承し、修正の必要なメソッドを 上書きする。
  21. 21. Share Headerのカスタマイズ 検索フィールドの不具合(?)修正: オリジナルのSearchBoxを継承し、修正の必要なメソッドを上書きする。 /src/main/resources/META-INF/js/aikau/1.0.101.3/alfresco/customize/CustomizedSearchBox.js: /** * Customized SearchBox module * Extends module:alfresco/header/SearchBox * @module alfresco/customize/CustomizedSearchBox */ define(["dojo/_base/declare", "dojo/_base/lang", "alfresco/enums/urlTypes", "alfresco/header/SearchBox"], function(declare, lang, urlTypes, SearchBox) { return declare([SearchBox], { /** * 日本語変換時のEnterキー入力で検索が行われないように修正 * override alfresco/header/SearchBox#onSearchBoxKeyDown */ onSearchBoxKeyDown: function alfresco_header_SearchBox__onSearchBoxKeyDown(evt) { <次ページ参照> }, /** * 日本語変換時のEnterキー入力で検索が行われないように修正 * override alfresco/search/SearchBox#onSearchBoxKeyUp */ onSearchBoxKeyUp: function alfresco_header_SearchBox__onSearchBoxKeyUp(evt) { <次々ページ参照> } }); } ); Widgetの指定は相対パスで行わ れているため、オリジナルの ファイルと同じパスの下に配置
  22. 22. Share Headerのカスタマイズ 検索フィールドの不具合(?)修正: オリジナルのSearchBoxを継承し、修正の必要なメソッドを上書きする。 CustomizedSearchBox.js#onSearchBoxKeyDown: /** * 日本語変換時のEnterキー入力で検索が行われないように修正 * override alfresco/header/SearchBox#onSearchBoxKeyDown */ onSearchBoxKeyDown: function alfresco_header_SearchBox__onSearchBoxKeyDown(evt) { // jshint maxcomplexity:false var searches; switch (evt.keyCode) { <オリジナルと同じため省略> case 13: var terms = lang.trim(this._searchTextNode.value); if (terms.length !== 0 && this.suppressRedirect !== true) { this.onSaveLastUserSearch(); // ACE-1798 - always close the live search drop-down on enter keypress.. this.clearResults(); this.alfLog("log", "Search request for: ", terms); var url = this.generateSearchPageLink(terms); this.alfPublish("ALF_NAVIGATE_TO_PAGE", { url: url, type: urlTypes.PAGE_RELATIVE, target: "CURRENT" }); } break; } }, 追加
  23. 23. Share Headerのカスタマイズ 検索フィールドの不具合(?)修正: オリジナルのSearchBoxを継承し、修正の必要なメソッドを上書きする。 CustomizedSearchBox.js#onSearchBoxKeyUp: /** * 日本語変換時のEnterキー入力で検索が行われないように修正 * override alfresco/search/SearchBox#onSearchBoxKeyUp */ onSearchBoxKeyUp: function alfresco_header_SearchBox__onSearchBoxKeyUp(evt) { var terms = lang.trim(this._searchTextNode.value); switch (evt.keyCode) { // Enter key press case 13: // Do nothing // if (terms.length !== 0 && this.suppressRedirect !== true) // { // this.onSaveLastUserSearch(); // // ACE-1798 - always close the live search drop-down on enter keypress.. // this.clearResults(); // this.alfLog("log", "Search request for: ", terms); // var url = this.generateSearchPageLink(terms); // this.alfPublish("ALF_NAVIGATE_TO_PAGE", { // url: url, // type: urlTypes.PAGE_RELATIVE, // target: "CURRENT" // }); // } break; <オリジナルと同じため省略> } } 削除
  24. 24. Share Headerのカスタマイズ 検索フィールドの不具合(?)修正: Share Headerのモデル作成部分からid: HEADER_SEARCHを定義している部分を探す。 WEB-INF/classes/alfresco/site-webscripts/org/alfresco/share/imports/share-header.lib.js Line: 1723- var headerModel = [{ id: "SHARE_HEADER", name: "alfresco/header/Header", config: { <省略> widgets: [ { id: "HEADER_APP_MENU_BAR”, <省略> }, { id: "HEADER_USER_MENU_BAR”,<省略> }, { id: "HEADER_SEARCH", name: "alfresco/header/SearchBox", align: "right", config: { id: "HEADER_SEARCH_BOX", site: page.url.templateArgs.site, siteName: siteTitle, enableContextLiveSearch: true, linkToFacetedSearch: true, sitePage: "" } } ] } }, HEADER_SEARCH定義部
  25. 25. Share Headerのカスタマイズ 検索フィールドの不具合(?)修正: 定義部を参考にShare Headerのモデルを修正するJavascriptにSearchBox Widgetの 実装を入れ替えるする処理を追加。 /src/main/resources/alfresco/web-extension/site-webscripts/jp/aegif/share/header/share-header.get.js: //Change SearchBox to Customized Module widgetUtils.findObject(model.jsonModel, "id", "HEADER_SEARCH").name = "alfresco/customize/CustomizedSearchBox”;
  26. 26. デモ
  27. 27. ご質問など
  28. 28. ありがとうございました。

×