semirara

(2016/05/09〜2016/08/21)
  • このwikiのこと

  • 2016年春ごろ作った
  • https://github.com/shokai/semirara
  • URL

  • hostname/wiki名/page名になっている
  • wiki名の部分を変えると自由にwikiが作れるようになってる
  • 動機

  • メモ帳blogがほしかった
  • WYSIWYGいいよね
  • publishする画面と同じ見た目で編集したい
  • でもツールバーごちゃごちゃは嫌、簡単な記法で書きたい
  • 他人にはサーバーサイドレンダリングで見せれて、RSSもあってblogとして使える奴が欲しい
  • Reduxkoaasync-awaitを試したかった
  • コード片を貼り付ける場所が欲しい
  • 主な機能

  • がんばって書いたり覚えたりしないでも見やすく表示する
  • 編集

  • ログイン必須
  • 行をマウス長押しすると、その行だけ編集モードになる
  • カーソルキー上下で移動できる
  • かんたんなwiki記法

  • []で単語を囲うとリンクになる
  • URLを囲うと外部リンクに
  • 画像っぽいURLを囲うとimgタグになる
  • たぶんvideoタグなども対応するはず
  • [URL タイトル]もしくは[タイトル URL]
  • タイトル付きリンクになる
  • 逆順でもOK
  • [URL 画像URL]もしくは[画像URL URL]
  • リンク付き画像が作れる
  • 逆順でもOK
  • 行頭スペースで段落が作れる
  • 下で説明するアウトラインエディタ機能などで使う
  • これだけしか覚える事が無い
  • (順序を)うろ覚えでも大丈夫
  • 同時編集

  • 複数のクライアント間でページが同期する
  • 一応できるという程度
  • 高速に編集すると衝突する
  • アウトラインエディタ機能

  • ctrl+上下左右では段落構造を無視してその行だけ移動できる
  • 編集状態でshift+上下左右で段落の移動(入れ替え)が可能
  • 適当にアウトラインでガーッと書いて、段落の順番を入れ替える
  • どの行を誰が書いたかわかる

  • 行末にアイコンが表示される
  • アイコンが表示されすぎると邪魔なので、適当に省略するようになっている
  • 行頭が$%の時にコマンドっぽく表示する

  • $ npm install koa
  • % gem install tw
  • インラインコード記法

  • バッククオートで囲う
  • ここはconsole.log("インラインコード")になる
  • コードブロック記法

  • code:言語名orファイル名の行の下のブロックはシンタックスハイライトされる
  • test.js
  • function foo () {
  • alert("はい")
  • }
  • エモーショナルなタイトル

  • wikiは上の方の行に説明を書くことが多い
  • 説明っぽい文字列があれば、<title>タグの末尾に設定する
  • 番号付きリストの補完

  • 同じレベルの段落で 1. 2. と続いたら
  • 後は勝手に番号が表示される
  • 記録を取る時に便利
  • URLがページ名になってる

  • ?などの記号をページ名に含めたかったので、routerを自分で書いた
  • client/serverで同じrouterを使ってる
  • 実装

  • reduxkoa v2とasync-awaitを試したかったので使った
  • socket.io-requestというsocket.ioのrequest-responseパターンをPromise化するライブラリを作って全面的に使っている
  • かなりちゃんとfluxしてる

  • 全てがreact componentツリーのrootで与えられた1つのstore/stateでレンダリングされる
  • それ以外のstoreは参照しない
  • viewが他のviewを参照しない
  • URLもstateから作られる
  • URLからstateが作られるのではない
  • (最初のアクセス時以外)
  • UIの操作は全てaction経由でstore/stateを更新する
  • Socket.IO

  • 送信系は全てreduxのmiddlewareにした
  • stateの変化をチェックして必要があれば送信する
  • 例:linesが変化したから編集があったんだな、じゃあ送信
  • middlewareを全部読み込まなくても、通信しないスタンドアロンアプリとして動く感じで作る
  • 実際はページデータのfetchとか無理だけど、感覚的にそんな感じでやる
  • 受信系はstoreにactionをdispatchする
  • 受信データをviewに直接表示しない
  • socket.ioはfluxの輪ではUIと同じ位置にあると考えて良いと思う
  • (ユーザー|サーバー)からの入力を受け取ってactionをdispatchする
  • stateの変化を検知して(ユーザー|サーバー)に送る
  • socket.io-requestを使っている
  • async-awaitでrequest-responseが書けてエラーハンドリングも容易
  • サーバーサイドレンダリング

  • 上の方針でやると、
  • middlewareを全部外して
  • socket.ioやajaxの通信系は全てmiddlewareなので、それが無くなる
  • ReactのDOMイベントを全部削除すると
  • react-dom/serverのrenderToStaticMarkupを使うとイベント無しのHTMLができる
  • 完全に同じ見た目の静的ページになる!
  • つまりサーバーサイドレンダリングできるようになる
  • すごい