研究室wikiを作った話

やったこと

研究室で用いるwikiの作成

要件

リアルタイムにプレビューが見れる
理系の研究室ということで数式が入れられる
投稿がslackに通知される

使ったもの

rails
angularjs
markedjs
MathJaxjs
slackAPI

#やったこと
railsは基本的にユーザー認証やAPIの提供に従事
AngularでSPAの作成

Anggularのwatchとデータバインドによって簡単にリアルタイムプレビューが実現可能

form.haml

.editor
  %textarea#editor-area{'data-ng-model'=>'markdown.content', 'ng-change'=>'markdown_change()'}
.preview
  #preview-area.markdown-body{'ng-bind-html'=>"pre"}

form.coffee

angular.module('RSLWikiApp').controller 'CreateWikiCtrl', ($scope, $state, marked) ->
  $scope.markdown =
    content: ''

$scope.markdown_change = () ->
  $scope.pre = marked($scope.markdown.content)
  previewElement = document.getElementById("preview-area")
  MathJax.Hub.Typeset(previewElement)

設計についてのツッコミはご勘弁を。。。
これくらいのコードの少なさで実現できるということをご理解いただければ

markedやmathJaxの使い方は以下を参照してください
http://qiita.com/amay077/items/704d48130e5cf17e8654
http://qiita.com/DUxCA/items/27b7b865a0ab28b5d530

これによってこんな感じに！

slack連携

gemにslack-notifierを追加

Gemfile

gem 'slack-notifier'

SLACK通知のモジュールを作成

model/concerns/lib.rb

module Notification
  extend ActiveSupport::Concern

  def slack_notify(text, channel)
    require 'slack-notifier'
    notifier = Slack::Notifier.new( ENV["SLACK_INCOMING_URL"],
                                    username: "Wiki bot",
                                    icon_url: "https://www.eff.org/files/FPG_icon_Wikileaks.png")
    notifier.channel = channel
    notifier.ping text, unfurl_links: true
  end
end

model

require lib
include Notification
.
.
after_create :notify_new_document
.
.

def notify_new_document
    message = <<"EOS"
#{user.name} wrote new wiki
Look at #{url}
EOS
    slack_notify(message, '#notify_channel')
  end

  def url
    "http://hogehoge.huga/#/wiki/#{id}"
  end

これによって記事が書かれるとこーんな通知が出ます

わ～楽しい
時間なくてまともに書けずすいません