side tab navigation

Guardfile

@@ -5,6 +5,7 @@ guard :rspec, all_after_pass: true, spring: true do
 
   watch(%r{^app/(.+)\.rb$})                           { |m| "spec/#{m[1]}_spec.rb" }
   watch(%r{^app/(.*)(\.erb|\.haml)$})                 { |m| "spec/#{m[1]}#{m[2]}_spec.rb" }
+  watch(%r{^app/(.*)(\.erb|\.haml)$})                 { 'spec/features' }
   watch(%r{^spec/factories/(.+)\.rb$})                { 'spec/factories_spec.rb' }
   watch(%r{^spec/support/(.+)\.rb$})                  { 'spec' }
   watch('config/routes.rb')                           { 'spec/routing' }

app/assets/javascripts/posts/index.js.coffee

@@ -18,15 +18,23 @@ if window.location.pathname.match /^\/posts\/?$/
 
     # 初期に詳細を表示
     # open post when `id` parameter set.
-
-
     id_param = RV.tools.getQueryParams()["id"]
     if id_param?
-      $(".post-list[data-post-id='#{id_param}']").addClass('active')
+      $("a.post-list[data-post-id='#{id_param}']").addClass('active')
       $.get('/posts/show_fragment', {
         'id': id_param,
       })
       .done (data) ->
         $('#list_post').html(data)
         prettyPrint()
+    else
+      $el = $("a.post-list:eq(0)")
+      $el.addClass('active')
+      $.get('/posts/show_fragment', {
+        'id': $el.data('postId'),
+      })
+      .done (data) ->
+        $('#list_post').html(data)
+        prettyPrint()
+
 

app/assets/stylesheets/app.css.scss

@@ -51,6 +51,12 @@
     width: 200px;
   }
 
+  /* side tree view
+  -------------------------------------------------- */
+  ul {
+    padding-left: 1em;
+  }
+
   /* home#show
   -------------------------------------------------- */
   .text-box {

app/helpers/posts_helper.rb

@@ -3,7 +3,7 @@ module PostsHelper
   def h_display_tree(node)
     _html = '<ul>'
     if node.posts.count > 0
-      _html << %Q{<li><a href="#{ root_path(q: '#' + node.name) }">#{node.name} <span class="badge">#{node.posts.count}</span></a></li>}
+      _html << %Q{<li><a href="#{ posts_path(q: '#' + node.name) }">#{node.name} <span class="badge">#{node.posts.count}</span></a></li>}
     end
     node.children.each do |_child|
       _html << h_display_tree(_child)

app/views/posts/index.html.erb

@@ -9,12 +9,20 @@
 
       <div class="col-xs-6 col-md-4" id="sidebar" role="navigation">
 
+        <ul class="nav nav-tabs">
+          <li class="active"><a href="#tab-list" data-toggle="tab">List</a></li>
+          <li><a href="#tab-tree" data-toggle="tab">Tag Tree</a></li>
+        </ul>
+
+        <div class="tab-content">
+          <div class="tab-pane active" id="tab-list">
             <div class="list-group">
-          <% @posts.each do |post| %>
+              <% @posts.each_with_index do |post, i| %>
                 <a href="#" data-post-id="<%= post.id %>" class="list-group-item post-list"><%= post.title %></a>
               <% end %>
             </div>
-
+          </div><!-- /.tab-pane -->
+          <div class="tab-pane" id="tab-tree">
             <% cache('tag-tree', :expires_in => 1.hour) do %>
               <div class="list-group">
                 <% Tag.roots.each do |root| %>
@@ -22,6 +30,8 @@
                 <% end %>
               </div>
             <% end %>
+          </div><!-- /.tab-pane -->
+        </div><!-- /.tab-content -->
 
       </div><!--/span-->
 
@@ -38,6 +48,9 @@
     <hr>
 
     <footer>
+      <a href="https://github.com/tadyjp/rendezvous">Github</a>
+      |
+      <a href="https://twitter.com/tady_jp">@tady_jp</a>
     </footer>
 
   </div><!--/.container-->

db/seeds/SkypeのチャットをリアルタイムにChatworkに転送するRubyスクリプト(更新-API利用版)

-
+
 
 
-![Screen Shot 2013-11-20 at 12.23.19 AM.png](https://qiita-image-store.s3.amazonaws.com/0/10272/474c4435-35b5-60ee-18ef-dd11e2bbce3c.png "Screen Shot 2013-11-20 at 12.23.19 AM.png")
-
-
 ### 最終更新日
 - 2013-12-10
 

spec/features/posts_spec.rb

@@ -18,9 +18,9 @@ describe 'Request via js', js: true do
     visit '/posts'
   end
 
-  it 'show placeholder' do
+  it 'show first post' do
     page.save_screenshot(Rails.root.join('tmp', 'screenshots', "a-#{Time.now.strftime('%Y-%m-%d %H%M%S')}.png"))
-    expect(page.find('#posts-placeholder').text).to include('Select a post')
+    expect(page.find('#list_post div.title a').text).to include('ruby rspec')
   end
 
   it 'click post and show' do