プレビュー機能を追加しました

初めは適当に使うつもりだったのでプレビューなんかいらないと思っていたけど、使っていると地味にプレビューが欲しくなったので追加しました。

半分は Elm で実装してみました、初め elm-dialog でやっていたのでですが Bootstrap3 でデザインがうまく調整できなかったので、 github elm-dialog のコードを参考に (といっても、ほぼマルパクリですが…) 調整して組み込みました。

プレビューデータをセッションに保存していたのですが、YesodがディフォルトでClient Side Session だったということを忘れていて、cookieが4KBをこえ、ある程度でかいプレビューデータの場合、レスポンスヘッダーが腐って、レスポンスが途中で止まってしまう事象に少しハマりました。

YesodのRedis Session Backend

そこで、Server Side Sessionへ変更しようと変更をかけている途中で、hedisパッケージとhedis-config、serversession-backend-redisなどをYesodへ組み込むのですが、hedis-configの型変換する部分で、PortID型のServerコンストラクタがhedisの最新から外されたりと、色々踏んだり蹴ったりだったので自分で、修正パッチを書いて対応しました、一応本家にはプルリクエストは送りましたが取り込んでもらえるかは分かりません。

ただ、hackageに無くても、直接githubのリソースから自分のパッケージに追加できる方法があって、stack.ymlへ

- git: https://github.com/karky7/serversession
  commit: 4a31a18fe74bed006af8c6266518cb3f85303880
  subdirs:
    - serversession-frontend-yesod
    - serversession-backend-redis
- git: https://karky7@bitbucket.org/karky7/hedis-config.git
  commit: 88d19b2d7342146b17ffb3f1d992930baff154f8

こんな感じで書くと、取り込むことができます、subdirはリポジトリ配下にそれぞれパッケージングされていて、そこにcabalファイルがある構成の場合の書き方です。

なんでも自分でやってる感じが、孤独を感じます。

そして、プレビューすると

こんな感じでポップアップします、ただ、実装が終わってからから気づいたのですが、横のサイズが固定なので出力がタブレットかスマホ表示限定になってしまって、PCの出力が確認できません。

表示切り替えの機能は、今後追加していこうと思います。

サーバー設定

セッションのストレージにredisを利用するため、接続設定を追加する必要があります。localhostの設定であれば書く必要はありませんが、必要であれば、追記してください、誰に説明しているのか分かりませんが。

/etc/sysconfig/houbou

REDIS_HOST=127.0.0.1
REDIS_PORT=6379
REDIS_PASSWORD=
REDIS_DATABASE=0
REDIS_MAX_CONNECTIONS=32
REDIS_MAX_IDLE_TIME=60

そして忘れずにサービスを再起動してください。

$ sudo systemctl restart houbou

謝辞

Elmの実装途中で色々試行錯誤していてたところ、twitter助言をいただき、大変助かりました。

開発って自分の知らない領域に手を出すときに、方向性を決めるのが一番難しいいんですよね、大変ありがたかったです。portとsubscriptionの一歩進んだ使い方を、実践できました、助言がなかったらもっと無駄な事してたと思います。

@arrowM_ さん、ありがとうございました。

Posted on 2020-11-04 18:03:23

魴鮄のブログ