プログラマ専用匿名掲示板

日本で最も有名な匿名掲示板といえば、5chだとおもいます。
そんな5chにもプログラマ板はあります。
しかし、それではシンタックスハイライト機能が無く、
dat落ちすれば書き込めないというものです。

プログラム関連のこと専門の匿名掲示板があれば良いなと思い作りました。
作成にあたってのメモや、つまづきを書きます。

搭載したい機能

• 匿名掲示板
• シンタックスハイライトされたコードを挿入

5chに、コード挿入機能を追加し、dat落ちを失くしたものを思いました。

データベース

データベースを扱うために、
postgresql
を使いました。(Herokuではsqlite3は使えません)
https://qiita.com/tomson784/items/a5ad6e47643449dffd18
こちらの記事を参考にしました。

id

スレッドごとユーザーにidを割り振ります。
idはランダムな文字列4文字です。

ランダム文字列をどのようにして作るかですが、
a ~ zと0 ~ 9が格納された配列から、文字列の長さ分一文字ずつrandom.choiceすることで得られます。

import random, string

def randomname():
   randlst = [random.choice(string.ascii_letters + string.digits) for i in range(4)]
   return ''.join(randlst)

これを、ユーザーごとに割り振るにはどうすればよいか考えます。
Pythonのrandomには、seedがあります。
そのseedをユーザーごとに決めれば良いと考えました。

つまり、ユーザーごとに違うseedの数値を決めます。
ユーザーごとに違うものといえば、ipアドレスが思いつきました。
グローバルipは、次のように取得できます。

from flask import request
request.environ["HTTP_X_FORWARDED_FOR"]

これと、スレッドごとにある番号、thread.idをがちゃがちゃ式に入れて、スレッドごとのユーザーidを作りました。

コード挿入

シンタックスハイライトには、highlight.jsのmonokai-sublimeを使いました。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/monokai-sublime.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

highlight.jsを読み込んで、

<pre><code></code></pre>

で囲うことでシンタックスハイライトされてコードを表示できます。
が、ここで少しつまづきました。

<pre><code>
    {{f.code}}
</code></pre>

はじめ、こう書いていたのですが、これだと1行目の開始位置が変な場所になるんですよね。
どうやら、

<pre><code>{{f.code}}</code></pre>

このように前後に改行を入れずに書かなければならないようです。
さらに、これではコードの欄に何も書いていなくても
highlight.jsの枠が出てしまうので、
htmlの中にifを書き、コードが書いてあれば<pre>…を実行(?)するようにしました。

{% if f.code %}
    <pre><code>{{f.code}}</code></pre>
{% endif %}

Herokuのリモートシェルでのつまづき

データベースを作成するために、
$ heroku run python
して、pythonスクリプトを打ち込もうと思っていました。
早速from app import...と書いたのですが、
app.pyが見つからないと言われました。
$ heroku run ls
としてみると、何も表示されませんでした。

新しくデータベースを作るpyファイルを作り、herokuにデプロイし、
$ herokuk run python hogehoge.py
することでうまくいきました。

エスケープ文字でのつまづき

\nを<br>にreplaceしてみたのですが、<br>と表示されてしまい、改行になりませんでした。
どうやら、jinja2( html内の{{}} )が、エスケープ処理をしているようです。

そこで、{{hoge | safe}}とし、エスケープをしない設定にしたところ、
改行はうまくいったものの、scriptを埋め込めるようになってしまいました。
例えば、

<script>alert("このサイトは乗っ取った！")</script>

と書き込めば、そのスレッドに行くたびにアラートが表示されてしまうことになります。
なので、手抜きエスケープ処理を書きました。
具体的には、<を＜にし、&を＆にする、
エスケープ文字を全角に置き換えるという手抜きです。

    article = article.replace("<", "＜")
    article = article.replace('&', '＆')
    article = article.replace('%', '％')
    article = article.replace('?', '？')
    article = article.replace('=', '＝')

データベース操作でのつまづき

とても細かいことなのですが、データベースから削除する時、

delete from thread where article='test';

などとするわけですが、ここで私はダブルクォーテーションではじめやっており、
エラーが出ていました。
シングルクォーテーションでないといけないということを知りました。