Redmine Wikiのページツリー構造をドラッグ&ドロップで編集できるプラグインを作りました

redmine.tokyo 第13回勉強会( https://redmine.tokyo/versions/29 )
https://github.com/ledsun/redmine_wiki_page_tree

Transcript

1. Redmine WikiͷϖʔδπϦʔߏ଄Λ
   υϥοά&υϩοϓͰฤूͰ͖Δ
   ϓϥάΠϯΛ࡞Γ·ͨ͠
   2017/11/18 தౡ ࣎
   @redmine.tokyo ୈ13ճษڧձ
   

   View Slide

2. ࣗݾ঺հ
   • தౡ ࣎ a.k.a. ledsun
   • ීஈ͸RedmineΛ࢖͍ͬͯ·ͤΜ
   • डୗ։ൃ
   • JavaScriptͱRuby
   • WebΞϓϦέʔγϣϯ
   

   View Slide

3. Demo
   ͱΓ͋͑ͣݟͯ
   ͔͍͍ͬ͜Ͱ͠ΐʁ
   

   View Slide

4. 3෼ؒΫοΩϯά
   RemineϓϥάΠϯΛ࡞ͬͯΈ·͠ΐ͏
   

   View Slide

5. ։ൃ؀ڥ͸Docker
   DB(MySQL)ͷΠϯετʔϧ͕ෆཁ
   docker-compose up Ͱ
   ඞཁͳΠϝʔδͷμ΢ϯϩʔυ͔Βىಈ·Ͱ
   

   View Slide

6. generateίϚϯυ
   ඞཁͳϑΝΠϧΛ࡞੒ͯ͘͠ΕΔ
   docker-compose exec redmine bundle exec rails
   generate redmine_plugin redmine_wiki_page_tree
   

   View Slide

7. σʔλΛ౤ೖ
   ͋Β͔͡Ί༻ҙ͓͍ͯͨ͠WikiͷσʔλΛmysqlίϚ
   ϯυͰ౤ೖ
   docker-compose exec db sh -c 'mysql --default-character-set=utf8 -uroot -predmine redmine < /work/wiki_data.sql'
   

   View Slide

8. ϓϥάΠϯΛ௥Ճ
   • redmine_wiki_page_tree_hook_listener.rb ௥Ճ
   • init.rb ͰϓϥάΠϯΛొ࿥
   

   View Slide

9. ಈ࡞֬ೝ
   ʢಈ͍ͨΒഥख͍ͯͩ͘͠͞ʣ
   

   View Slide

10. redmine_wiki_page_tree_hook_list
    ener.rb
    View Hook view_layouts_base_sidebarΛఆٛ
    def view_layouts_base_sidebar(context = {})
    return unless context[:controller]
    params = context[:controller].params
    return unless params[:controller] == 'wiki'
    pages = load_pages(context[:request].params[:project_id])
    pages_by_parent_id = pages.group_by(&:parent_id)
    content_tag(:div, class: 'page-tree') do
    concat content_tag(:h2, 'ϖʔδπϦʔϏϡʔ', class: 'page-tree__title')
    concat render_page_hierarchy(pages_by_parent_id, nil, :timestamp => true)
    end
    end
    

    View Slide

11. init.rb
    require_dependency 'redmine_wiki_page_tree_hook_listener'
    Redmine::Plugin.register :redmine_wiki_page_tree do
    name 'Redmine Wiki Page Tree Plugin'
    author 'Shigeru Nakajima'
    description 'Redmine plugin to show the page tree view at the sidebar.'
    version '0.0.1'
    url 'https://github.com/ledsun/redmine_wiki_page_tree'
    author_url 'https://github.com/ledsun'
    end
    

    View Slide

12. ΠϯσϯτΛ੔ܗ
    CSSΛ௥Ճ
    #sidebar .page-tree {
    margin-left: -12px;
    padding-top: 10px;
    }
    #sidebar .page-tree__title {
    margin-left: 12px;
    }
    #sidebar .page-tree__list {
    margin: 0 12px;
    }
    #sidebar .page-tree__list__node--leaf {
    list-style-type: disc;
    margin-left: 13px;
    }
    

    View Slide

13. assetͷ௥Ճ
    redmine_wiki_page_tree_hook_listener.rb
    def view_layouts_base_html_head(context)
    return unless context[:controller]
    params = context[:controller].params
    return unless params[:controller] == 'wiki'
    tags = []
    tags << stylesheet_link_tag('sidebar__page-tree', :plugin => 'redmine_wiki_page_tree')
    tags << javascript_include_tag('sidebar__page-tree', :plugin => 'redmine_wiki_page_tree')
    tags.join("\n")
    end
    

    View Slide

14. ͓ΘΓ
    ϓϥάΠϯͷGithubϦϙδτϦ
    • https://github.com/ledsun/
    redmine_wiki_page_tree
    QiitaͷϓϥάΠϯͷ࡞Γํͷهࣄ
    • https://qiita.com/ledsun/items/
    2f9d49679906ee36bc1e
    • https://qiita.com/ledsun/items/
    c73a4b5ad3fa4e4e992d
    

    View Slide

15. ४උ
    • ࡞ۀσΟϨΫτϦʹdocker-compose.ymlͱ
    wiki_data.sqlΛ഑ஔ
    • ࠷ॳͷdocker-compose up
    • ॳճϩάΠϯ
    • docker-compose kill
    • Demo༻ͷRedmineΛىಈɺWikiΛ։͘
    

    View Slide

16. ย෇͚
    • docker-compose rm
    • rm -rf redmine_wiki_page_tree/
    • rm -rf log/
    

    View Slide