勉強がてら作ってみた。
ブツ
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まわりの学習と、投げモナサイト作成の練習。
ちょっとずつ改善していきたい。