色々

思いついたことを色々やっていく。

Helmetを使う

https://expressjs.com/ja/advanced/best-practice-security.html#use-helmet

expressで推奨されてた。

 $ npm install --save helmet

インストールして追記

var helmet = require('helmet')
app.use(helmet())

効果はよく分からない。

https://qiita.com/qianer-fengtian/items/148602c437e1703aa764

とか参照。

Javascriptでhtmlspecialchars

PHP使ったときなんかこんなのあったよなーと思って探してみたら、javascriptではないらしい。なので自分で関数作って対応するそうな。ちょうどStackoverflowに同様の質問があった。

https://stackoverflow.com/questions/1787322/what-is-the-htmlspecialchars-equivalent-in-javascript

function escapeHtml(text) {
  return text
      .replace(/&/g, "&")
      .replace(/</g, "<")
      .replace(/>/g, ">")
      .replace(/"/g, """)
      .replace(/'/g, "'");
}

replaceで一個ずつ置き換えてく。

入力文字数チェック

未入力だの、長いやつを弾く。

if (req.body['user_message'] === '') {
      res.status(400).send('ないようがないよう')
      return;
    }

    if (req.body['user_message'].length > 400) {
      res.status(400).send('ないようがながいよう')
      return;
    }

    if (req.body['user_name'].length > 20) {
      res.status(400).send('なまえがながいよう')
      return;
    }

長さ見てるだけだね。

新しい投稿が上に来るようにする

data.reverse();

こんな簡単なのだな。ただ編集→更新したやつは上に来ない。

日時をGMTにする、形式を変える

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat

こちらに書いてあることを読み解きつつ

function fmtdate(){
  let o = new Intl.DateTimeFormat('jp-JP', {
    weekday: 'narrow',
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    fractionalSecondDigits: 3
  })

  return o.format(new Date())
}

こんな関数を作った。今まで

2022-01-02T11:50:36.446Z

こんな表示でUTCだったのが

2022/01/02(日) 20:51:07.812

こんな表示でGMTになった。

とりあえず終わり

こんなところかなぁ。あと最終のソース。

更新

更新機能をつけたい。どういう感じがいいんだろうなーと考えて、編集ボタンを押すと投稿された文章が編集できるように変わって、更新ボタンを押すとそのまま更新されるのがかっこよさめじゃないかと思った。そういう感じにできるように頑張る。

ボタンを付ける

<p id="${row['id']}">${row['contents']['msg']}</p>
<p><button type="button" id="edit-${row['id']}" onclick="editbtn()">編集</button>
名前: ${row['contents']['name']} 日時: ${row['contents']['dt']}
<button type="button" id="del-${row['id']}" onclick="delbtn()">削除</button></p>
<hr>

表示のとこに新たにボタンを作った。後々のためにてきとーにidもくっつけておく。これを押すとまずは編集できるようにしたい。

ボタンを押すと編集できるようにする

function editbtn() {
            let id = event.target.id.slice(5)
            let p = document.getElementById(id)
            let msg = p.innerText
            let textarea = document.createElement('textarea')
            textarea.value = msg
            textarea.id = id
            p.replaceWith(textarea)

            let btn = document.getElementById('edit-' + id)
            btn.innerText = '更新'
            btn.setAttribute('onclick', 'update()');
        }

冗長かなぁ。でもこうしか思いつかん。idで<p>タグの内容を色々取得して、新たに<textarea>の要素を作りreplaceWithで置き換えた。

https://developer.mozilla.org/ja/docs/Web/API/Element/replaceWith

そんでボタンの方は、更新ボタンになるようにテキストとonclickの内容を変えている。

https://developer.mozilla.org/ja/docs/Web/API/Element/setAttribute

ボタンを押すと更新処理する

function update() {
            let id = event.target.id.slice(5)
            let textarea = document.getElementById(id)
            let msg = textarea.value
            let data = {
                'msg': msg
            }
            fetch('https://dalomo.net/nodebbs/msg/' + id, {
                method: 'PUT',
                body: JSON.stringify(data),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
                .then(res => {
                    let p = document.createElement('p')
                    p.id = id
                    p.innerText = msg
                    textarea.replaceWith(p)
                })
        }

これもIntelliSenseさんが怒涛の勢いで作ってくれた…。

testareaに入力された値をオブジェクトにして、fetchでPUTメソッドを使い、bodyに更新内容をstringifyして送信した。headersはまぁ必要なんだろうこれ。こことか読むとこうすることによってサーバー側で受け取りやすくなってるのかな。で、レスポンス返ってきたら、textareaからpタグに戻して終わり。これはクライアントサイドなので、あとはサーバーサイドを作る。

サーバー側のデータを更新する

app.put('/nodebbs/msg/:id', (req, res) => {
  const id = req.params.id
  const obj = JSON.parse('[' + fs.readFileSync('log.json', 'utf8') + ']')
  const newObj = obj.map(item => {
    if (item.id == id) {
      item.contents.msg = req.body['msg']
      item.contents.dt = (new Date()).toJSON()
    }
    return item
  })
  fs.writeFileSync('log.json', JSON.stringify(newObj).slice(1).slice(0, -1), 'utf8')
  res.end()
})

これも(ry マジですごいよね。考えることがほぼないよ。

まぁログを読み込んで、obj.mapでオブジェクトの要素をなめて、idが一致したらその内容を書き換える。ついでに日付も変わる。このmap関数っていうのがすごい便利なのね。for文とかでやるところだと思うんだけどIntelliSenseさん様々だわ。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map

あとは編集後のデータをlog.jsonに書き戻すだけ。すごーい、あっという間にできちゃった。

https://dalomo.net/nodebbs/

とりあえず、基本的な機能を持つ掲示板を作れた。セキュリティ等加味してないのでちょっとアレですが嬉しいねぇ。

削除

削除ができるようにしたい。ほんとはパスワードとか入れて書き込んだ本人であるかのチェックが必要なんだろうけど、まずはボタン一発即削除という形で作りたい。

ID的な要素を追加する

見通しが立っていないがあると便利そうなので追加したい。どの程度のスペックが必要なIDかというのはなんか色々あるみたいだが時間でいいやと思った。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/now

ちゅーことでapp.post内を

var obj = {
    id: Date.now(),
    contents: {
      name: req.body['user_name'],
      msg: req.body['user_message'],
      dt: (new Date()).toJSON()
    }
  }

こう変えた。それに伴って

 for (let row of data) {
    s += `
        <p>${row['contents']['msg']}</p>
        <p><button type="button" id="${row['id']}" onclick="delbtn()">削除</button> 名前:${row['contents']['name']} 日時: ${row['contents']['dt']}</p>
        <hr>
        `
    }

こうした。

HTTP DELETEメソッドを使う

ボタンを押したらidを伴ってサーバー側に飛ばすイメージで書く。

function delbtn() {
            let id = event.target.id
            fetch('https://dalomo.net/nodebbs/msg/' + id, {
                    method: 'DELETE'
                })
                .then(res => location.reload())
        }

これ、VSC使ってたらほぼ書いてくれた。いつの間にか未来いたわ。

eventがクリックイベントの要素が入っとるらしい。そこのidを取得

https://developer.mozilla.org/ja/docs/Web/API/Event/target

HTMLのみでDELETEメソッドを使う方法がわからなかったので、Javascriptのfetchを使う

https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch#supplying_request_options

そのままほっとくと画面が更新されなかったのでリロードを入れてみた。これもっとスマートな方法ないのかな。

受け取ったリクエストをサーバーで処理する

app.delete('/nodebbs/msg/:id', (req, res) => {
  const id = req.params.id
  const obj = JSON.parse('[' + fs.readFileSync('log.json', 'utf8') + ']')
  const newObj = obj.filter(item => item.id != id)
  fs.writeFileSync('log.json', JSON.stringify(newObj).slice(1).slice(0,-1), 'utf8')
  res.end()
})

こ、これもほぼ自動的に作られた…。やべーな未来。でもあんま理解度が高くないからこれが合ってるのか分からないんですよね。。。

app.deleteでDELETEメソッドのリクエストを処理できる。ルートパスにパラメータを含めて、req.params.idで取得できる。

https://expressjs.com/ja/guide/routing.html#:~:text=res.send(%27/.*fly%24/%27)%0A%7D)-,%E3%83%AB%E3%83%BC%E3%83%88%E3%83%BB%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF,-%E3%83%AB%E3%83%BC%E3%83%88%E3%83%BB%E3%83%91%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%BF%E3%81%AF

JSONを読み込んで、obj.filter(item => item.id != id)のところ、これ勝手にAIが作ったコードなんだけどidでフィルターかけるんだけど削除したいid除外でフィルタかけるんだよね。全然発想持ってなかったわ。考えてたのはidでなんか検索とかして、その要素のみ削除みたいな感じで考えてた。すげーよ、こっちのが全然スマートな解決だわ。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

で、文字列に変換して、最初と最後の[]を削除して、ファイルを書き出し。でres.end()で終了。できたー。

ミリ秒単位なので自分の場合はほぼ起こらないと思うけど、例えば削除のために読み込んでる途中で新規書き込みがあったりすると、削除後のファイル書き込みによって、新規が無い状態での上書きがされるので、新規がどっかいくみたいなことは起こりうる。こういうのを防ぐためにDBとかの仕組みがあったりすのかなぁとか思った。

取得

同一URLでデータを取得するようにする。さっきこのURLはPOSTメソッドだと投稿ができるようにしてたけど、今度はGETメソッドでJSONを取得できるようにする。そんでその取得したデータをもとに、投稿をページに表示すれば良いはず。

GET /nodebbs/msg

log.jsonファイルを読み込んでJSON文字列形式に変換しレスポンスを返す。

const obj = JSON.parse('[' + fs.readFileSync('log.json', 'utf8') + ']')

log.jsonはちゃんとしたJSON形式ではないのでそのまま読み込もうとするとエラーが出る。なので配列を表す[]をつけてJSON.parseに流してあげる。

https://nodejs.org/api/fs.html#fsreadfilesyncpath-options

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

expressにはJSON形式で返すというメソッドがあったのでそれを使う

 res.json(obj)

https://expressjs.com/ja/4x/api.html#res.json

とりあえず全部返すようにした。全部返すなら一旦オブジェクトに変換せんでもlog.jsonに[]つけた文字列そのまま返せばいーじゃんとも思ったけど、後で範囲指定とかできたらしたいなと思ったのでこうした。ここまでやると

https://dalomo.net/nodebbs/msg

にアクセスするとJSONが返ってくる。ただこれexpress5.x系だと削除されるメソッドらしい。

JavascriptでAPIを叩きレスポンスをページに反映する

https://news.mynavi.jp/techplus/article/zerojavascript-8/

こちらを参考に

    <script>
        fetch('https://dalomo.net/nodebbs/msg')
            .then(res => res.json())
            .then(data => contents(data));

        function contents(data) {
            let s = ''
            for (let row of data) {
                s += `
                    <p>${row['msg']}</p>
                    <p>名前:${row['name']} 日時: ${row['dt']}</p>
                    <hr>
                    `
            }
            var contents = document.getElementById('contents')
            contents.innerHTML = s
        }
    </script>

fetchでAPIにアクセス。res.json()でレスポンスをJSON形式に。そのデータをcontents関数に渡して内容を作る。

for分でオブジェクトそれぞれのデータをHTMLにしてく。${ }というのがプレースホルダーとして使えるらしい。初めて知った。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals

できたHTML分をcontents内に配置して完了。これは前もやったな。デーモン化しておく。

https://dalomo.net/nodebbs/

できた！ただ今のままだと脆弱性ありありでおっかない出来だと思うので、どーしたもんかな。