勉強がてら作ってみた。

ブツ

eyecatch.png

DB

SQLでいうと以下のような感じ。

create table if not exists comments (
  id integer primary key not null,
  content text not null,
  created text default (datetime('now', 'localtime'))
);

実際はdexie.jsを介してIndexedDBで実装している。

コード

main.js

window.addEventListener('DOMContentLoaded', async(event) => {
    const db = new MyLogDb()
    document.getElementById('post').addEventListener('click', async(event) => {
        const content = document.getElementById('content').value
        if (!content) { alert('つぶやく内容をテキストエリアに入力してください。'); return }
        document.getElementById('post-list').innerHTML = db.insert(content) + document.getElementById('post-list').innerHTML
        document.getElementById('content').value = ''
        document.getElementById('content').focus()
    })
    document.getElementById('delete').addEventListener('click', async(event) => {
        if (confirm('つぶやきをすべて削除します。本当によろしいですか?')) {
            await db.clear()
            document.getElementById('post-list').innerHTML = await db.toHtml()
            document.getElementById('content').focus()
        }
    })
    document.getElementById('post-list').innerHTML = await db.toHtml()
    document.getElementById('content').focus()
});

mylog-db.js

class MyLogDb {
    constructor() {
        this.version = 1
        this.name = `mylog-${this.version}.db`
        this.dexie = new Dexie(this.name)
        this.create()
    }
    create() {
        this.dexie.version(this.version).stores({
            comments: `++id`,
        })
    }
    async clear() { await this.dexie.comments.clear() }
    insert(content) {
        console.debug(`挿入`, content)
        const now = Math.floor(new Date().getTime() / 1000)
        this.dexie.comments.put({
            content: content,
            created: now,
        })
        return this.#insertHtml(content, now)
    }
    #insertHtml(content, created) {
        return `<p>${this.#toContent(content)}<br>${this.#toTime(created)}</p>`
    }
    async toHtml() {
        const cms = await this.dexie.comments.toArray()
        cms.sort((a,b)=>b.created - a.created)
        return cms.map(c=>this.#insertHtml(c.content, c.created)).join('')
    }
    #toTime(created) {
        const d = new Date(created * 1000)
        const u = d.toISOString()
        const l = d.toLocaleString({ timeZone: 'Asia/Tokyo' })
        return `<time datetime="${u}">${l}</time>`
    }
    #toContent(content) {
        return content.replace(/\r\n|\n/g, '<br>')
    }
}

課題

  • mpurseで投げモナできるようにしたい
    • 静的HTML出力してダウンロードする
    • それを各自GitHubPages等でアップロードする

動機

HTML,CSS,JS,DBまわりの学習と、投げモナサイト作成の練習。

ちょっとずつ改善していきたい。