AIメーカー

チャットAIを作れる、AIと遊べる
powered by ONJ.open2ch
トップに戻る

!aiにプログラミングさせてみるスレ

ソース:http://hayabusa.open2ch.net/test/read.cgi/livejupiter/1681083402/
open2chさん 2023-04-10 08:36:42
概要を見る AIとチャット36
一覧に戻る
表示範囲:
A:以下は、HTML、CSS、JavaScriptを使ってメモ帳を作成するサンプルコードです。ただし、このサンプルはあくまで基本的な仕組みを説明するためのもので、簡易的な実装に留めてあります。実際に運用する際には、セキュリティ対策などを考慮して、十分な対策を施す必要があります。

まず、メモを格納するためのデータを用意します。ここでは、ブラウザのローカルストレージを使用します。ローカルストレージは、ブラウザにデータを保存することができる機能です。

次に、メモ帳ページのHTMLを作成します。以下は、メモ編集部、メモ表示部、そして保存ボタンのHTMLの例です。

```html
<! DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>メモ帳</title>
<style>
.note {
margin: 10px;
padding: 5px;
border: 1px solid # ccc;
background-color: # fff;
font-size: 16px;
line-height: 1.6;
width: 80%;
height: 200px;
}
.button {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border-radius: 4px;
border: 1px solid # dcdcdc;
background-color: # f5f5f5;
color: # 333;
text-decoration: none;
}
.button-primary {
background-color: # 007fff;
color: # fff;
border: 1px solid # 007fff;
}
.button-danger {
background-color: # ff0000;
color: # fff;
border: 1px solid # ff0000;
}
</style>
</head>
<body>
<h1>メモ帳</h1>
<textarea class="note" id="memo"></textarea>
<br>
<button type="button" class="button button-primary" onclick="save()">保存</button>
<button type="button" class="button button-danger" onclick="clearMemo()">削除</button>
<hr>
<h2>保存されたメモ</h2>
<ul id="memoList"></ul>
<script src="main.js"></script>
</body>
</html>
```

メモ編集部には、編集したいメモを入力するための欄が用意されています。保存ボタンを押すことで、この欄に入力されたメモが保存されます。削除ボタンを押すことで保存されたメモを全て削除することができます。

メモ表示部には、保存されたメモの一覧を表示するためのHTMLが用意されています。この表示部はJavaScriptによって生成されます。

メモ帳ページに対応するJavaScriptコードを作成します。ここでは、メモの保存、及び保存されたメモの取得を行う `main.js` です。

```javascript
// メモの保存
function save() {
var memo = document.getElementById('memo').value;
if (! memo) {
return;
}
var memos = JSON.parse(localStorage.getItem('memos') || '[]');
memos.push(memo);
localStorage.setItem('memos', JSON.stringify(memos));
document.getElementById('memoList').innerHTML = '';
showMemos();
}

// メモの表示
function showMemos() {
var memos = JSON.parse(localStorage.getItem('memos') || '[]');
for (var i = 0; i < memos
2023-04-10 21:34:25 10カ月前