0

Wikiを作ったのでblog移転する、あとYAPC2016でトークする

wikiを作った


semiraraというwikiを作った。blogとして使えるgyazz(アウトラインエディタ的なwiki)を目指したもので、既にwordpressより書きやすいので今後はこっちに書いていく。

http://wiki.shokai.org/shokai

Reduxとkoa v2とasync-awaitとサーバーサイドレンダリングの練習がしたかったので色々やった。
こんな感じでカーソルのある所だけwiki記法がむき出しになる。

くわしい解説

semirara: このwikiのこと – shokai


しばらくしたらこのblogのfeedも転送する


YAPC2016

2日目(7/3 日曜日)の14時からwikiについて喋らせてもらう。

トーク概要
ReactでWikiを自作して運用している話 · Issue #94 · hachiojipm/yapcasia-8oji-2016mid-timetable

概要

WYSIWIGで画像やリンクも貼れるけど、編集ツールバーやボタンが無いエディタ
markdownより簡単なシンタックスで編集できる
Atomを参考にしてReactで実装した
Socket.IOと自作の同期システムでうまいこと同時編集できる
Gitを参考にsubversionみたいなものを実装した
現在、社内で運用してて、3ヶ月で900ページくらい作られている


上で触れているsemiraraとはまた別のwikiの話をする。こっちの方が色々すごい。React+jQueryは最高。


ちなみにYAPC1日目は抽選落ちしたので2日目のみの参加です

0

GyazzにDeploy to Herokuボタンを付けた

githubにherokuへのデプロイボタンが付けれるようになった
Heroku | Introducing Heroku Button
Creating a 'Deploy to Heroku' Button | Heroku Dev Center


ので、node版gyazzのREADME.mdにDeploy to Herokuボタンを付けた。



ボタンを押すと、2分ぐらいで自分のHerokuアカウントでGyazzが動かせる。
アドオンも使える。

アドオンや環境変数の設定はapp.json Schema | Heroku Dev Centerで説明されているとおり、リポジトリのルートにapp.jsonを置いて指定する。city72のapp.jsonも参考になった。

Herokuボタンは https://heroku.com/deploy へアクセスした時のリファラがgithubのリポジトリだったらそれをcloneしてデプロイする、という簡単な仕様なので、もともとherokuで動かせるアプリなら本体のコードに手を入れること無く本当にREADMEにimgタグとaタグでボタン付けるだけで済んでしまっている

また、リファラのかわりにGETパラメータに?template=(githubのURL)を付けてもよい。
これ↓押すとgyazzが自分のherokuアカウントにデプロイされる。


すごい簡単に自分のところでprivate gyazzが動かせる。
簡単なツールみたいなwebアプリを、自分のところでサーバー建てて使ってねってのが言いやすいのはよい。気兼ねなくMongoDBとかmemcacheとか使うようにできるので、よくあるwikiやCMSとかみたいにSQLiteしか使わない縛りとか考えなくていい。

プルリクのメニューにある「browse code」でコミットのREADMEに飛んでからHerokuボタン押すと、そのプルリクをHerokuでデプロイして試せるのはすごい。例えばスマホWebアプリだったら、スマホでプルリク見てHerokuで試してmergeしてCI通して自動デプロイとかまでできる感じがある。ネイティブアプリよりプルリクを取り込みやすくなりそう。

設定


app.json
{
"name": "Node Gyazz",
"description": "Gyazz on Node.js",
"website": "https://github.com/masuilab/gyazz",
"success_url": "/memo/test",
"addons": [
"mongolab",
"memcachier"
],
"env": {
"NODE_ENV": "production",
"DEBUG": "gyazz:*",
"GYAZZ_URL": "https://(YOUR_APP_NAME).herokuapp.com",
"TZ": "Asia/Tokyo"
}
}

ボタン
[![Deploy](https://www.herokucdn.com/deploy/button.png)](https://heroku.com/deploy)

0

HubotでWiKiの更新通知

何度もメールをやりとりして結果をwiki等にまとめるのではなく、wikiに書いて適当に通知が飛ぶようになっていると便利だと思う。
実際便利なので研究室ではMLにメール月2,3通しか来てない。情報は全部ちゃんとしたフォーマットのストック情報になってて、それが適当にフロー情報として切りだされて流れてくるという感じで、自動的でよい。


gyazzをnodeで書き直してて、ページの更新がJSONのwebhookで通知されるようになった。「.通知」というページを作ってURLを改行区切りで書いておくとwebhookしてくる。

webhookをhubotで受信して、redisに貯めて前回とのdiffをslackに流すようにした。あまり同じページをまとめて通知しても細かすぎるので、webhookを受けてから1分間はデバウンシングする
gyazz-notify.coffee

# Description:
# Gyazz更新通知
#
# Dependencies:
# "diff": "*"
# "debug": "*"
#
# Author:
# @shokai

Diff = require 'diff'
debug = require('debug')('hubot:gyazz-notify')

config =
room: "#news"
header: ":star:"
interval: 60000

timeout_cids = {}

module.exports = (robot) ->

robot.router.post '/hubot/gyazz-webhook', (req, res) ->
url = req.body.url
wiki = req.body.wiki
title = req.body.title
text = req.body.text
unless wiki? and title? and text? and url?
res.status(400).send 'bad request'
return

res.send 'ok'

debug key = "#{url}/#{wiki}/#{title}"

clearTimeout timeout_cids[key]
timeout_cids[key] = setTimeout ->
notify url, wiki, title, text
, config.interval


notify = (url, wiki, title, text) ->
url = "#{url}/#{wiki}/#{title}".replace(' ', '%20')
cache = robot.brain.get url
robot.brain.set url, text

unless cache?.length > 0
debug notify_text = "#{config.header} 《新規》#{url} 《#{wiki}》\n#{text}"
robot.send {room: config.room}, notify_text
else
addeds = []
for block in Diff.diffLines cache, text
if block.added
addeds.push block.value.trim()
if addeds.length < 1
return
debug notify_text = "#{config.header} 《更新》#{url} 《#{wiki}》\n#{addeds.join('\n')}"
robot.send {room: config.room}, notify_text

0

Gyazzの更新差分をSlackに流す

これを使うと

https://github.com/shokai/gyazzchecker-slack

Gyazzを定期的にクロールして、更新差分だけslackのチャットに流してくれる。slackbot gemを使った。

Gyazzはアウトラインエディタなwikiなので、1行毎で意味がわかる構造化された文章を書くことになる。
行毎の差分がチャットに流れてくると会話みたいになって面白い。


画像とかも勝手に埋め込まれてよい

0

gyazzにアイコングラフ機能を付けた

gyazz.comは増井先生が作っているwikiです。
誰でも http://gyazz.com/Wikiの名前/ページ名 にアクセスすればすぐにwikiが作れるので
http://gyazz.com/自分の名前/ などを作ってみればいいと思います。
編集は行をマウスで長押し、Enterキーで新しい行追加、shift+上下キーで行の入れ替えができる。

———–

発端は8ヶ月前に適当に書いて放置してたissueにhentekoさんがpull requestしてくれた事だった。ありがとうございます。
twitterユーザー名でのリンクをアイコン表示にする · Issue #3 · masui/Gyazz


やってみると面白かったので、twitterアイコンだけでなくページのタイトル画像も敷き詰めれるようにした。
(gyazzはページ最上部の画像がタイトルに設定される)

ついでに小数に対応したり。twitterアイコンはtwiticonで埋め込んでる。


[[(ページ名|画像URL|twitter名).(icon|png)x(数字)]] でアイコンがたくさん表示される。


この部分は

編集状態にするとこうなっている。[[shokai]]というページのタイトル画像を5.6個並べている。


こういう使い方もある


投票などにも使えて、みやすい。
投票数の集計などもできると思う。バカっぽい機能だと思ってたけどやってみると便利だった。