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.

Share UIカスタマイズの第一歩

3,084 views

Published on



第39回のAlfresco勉強会で発表した、Alfresco Share UIカスタマイズ方法のご紹介資料です。

Alfresco ShareのUIカスタマイズはAlfrescoのカスタマイズのご要望の中でも多い内容ですので、初歩的なものとなりますがUIカスタマイズについて具体的な内容として、Share Headerの項目の削除、追加、検索フィールドのカスタマイズについて発表しています。

Alfrescoを使っていてUI上で気になる部分のカスタマイズを行いたい方、カスタマイズを行ってみたいけどどこから手をつけて良いか判らず悩んでいる方のとっかかりとして参考になるかと思います。

Published in: Software
  • Be the first to comment

Share UIカスタマイズの第一歩

  1. 1. 第39回 Alfresco勉強会 Share UIカスタマイズの第一歩 2017年6月21日 Moritaka Soma
  2. 2. 自己紹介 相馬 盛孝 オープンソースコンサルティングチーム所属 Alfrescoのカスタマイズやサポートをしています 最近はVR技術に興味があります
  3. 3. 本日の発表内容 本日の発表内容: これからAlfresco ShareのUIカスタマイズを 行おうと考えている方のとっかかりと なりそうな初歩的内容をご紹介 • Surf Extension Modulesの紹介 • Share Headerのカスタマイズ • 簡単な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のカスタマイズ 項目の消去: Share Headerのモデルを修正するJavascriptは <artifactId>-share-jar/src/main/resources/alfresco/web-extension/site-webscripts /jp/aegif/share/header/share-header.get.js として、以下の内容で作成します。 // Hide Task Menu Item widgetUtils.deleteObjectFromArray(model.jsonModel, "id", "HEADER_TASKS"); widgetUtils.deleteObjectFromArray()という便利ユーティリティが使えるので、 IDが判れば簡単に消去することが可能です。
  15. 15. Share Headerのカスタマイズ 項目の追加: ShareのHeaderを返すWebScriptは <artifactId>-share/WEB-INF/classes/alfresco/site-webscripts/org/alfresco/ share/header/share-header.get.js このファイルでimportされている、 <artifactId>-share/WEB-INF/classes/alfresco/site-webscripts/org/alfresco/ share/imports/share-header.lib.js の中で function generateAppItems() { var appItems = [ { id: "HEADER_HOME", name: "alfresco/menus/AlfMenuBarItem", config: { id: "HEADER_HOME", label: "header.menu.home.label", targetUrl: getUserHomeTargetUrl() } }, : : このような感じで、メニューの内容をJSONとして定義しているので参考にします。
  16. 16. Share Headerのカスタマイズ 項目の追加: オリジナルのJSON定義を参考にして、Share Headerのモデルを修正するJavascriptに 以下の内容を追加します。 // Add Trash-can to Header Menu Items var headerMenu = widgetUtils.findObject(model.jsonModel, "id", "HEADER_APP_MENU_BAR"); if (headerMenu != null) { headerMenu.config.widgets.push({ id: "HEADER_CUSTOM_TRASH_CAN_LINK", name: "alfresco/menus/AlfMenuBarItem", config: { label: "ごみ箱", targetUrl: "user/" + encodeURIComponent(user.name) + "/user-trashcan" } }); }
  17. 17. 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の実体であることがわかる。
  18. 18. Share Headerのカスタマイズ alfresco/header/SearchBox : 実体のjavascriptファイルを確認すると、 /** * The placeholder text to set in the main input field. * * @instance * @type {string} * @default */ placeholder: "search.instruction", /** * @instance * @type {boolean} * @default */ liveSearch: true, 文言やLiveSearchの有効/無効設定がプロパティになっていて、 config経由で設定できることが分かる
  19. 19. Share Headerのカスタマイズ 検索フィールド文言の変更: Share Headerのモデルを修正するJavascriptに 以下の内容を追加する。 // Change Search Placeholder Message widgetUtils.findObject(model.jsonModel, "id", "HEADER_SEARCH").config.placeholder = "検索"; *本来は表示したい文言をメッセージとして定義し、そのkeyを指定します。
  20. 20. Share Headerのカスタマイズ 検索フィールドLiveSearchの停止: Share Headerのモデルを修正するJavascriptに 以下の内容を追加する。 // Disable Live Search widgetUtils.findObject(model.jsonModel, "id", "HEADER_SEARCH").config.liveSearch = false;
  21. 21. デモ
  22. 22. ご質問など
  23. 23. ありがとうございました。

×