postnote
■
ゲーム系設定資料＿全部
├
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テキストエリア内検索・移動サンプル（改善版）</title>
<style>
body { font-family: sans-serif; padding: 1em; }
.container { display: flex; flex-direction: column; gap: 10px; }
.controls { display: flex; align-items: center; gap: 10px; }
textarea {
width: 500px;
height: 200px;
font-size: 16px; /* 計算のためピクセル指定を推奨 */
line-height: 1.5; /* 行の高さを設定 */
}
input[type="text"] { padding: 5px; }
input[type="button"] { padding: 5px 10px; cursor: pointer; }
</style>
</head>
<body>
<h1>テキストエリア内検索 & ジャンプ機能（改善版）</h1>
<div class="container">
<div class="controls">
<input type="text" id="searchInput" placeholder="検索キーワード">
<input type="button" value="次を検索" onclick="findNext()">
</div>
<textarea id="mainTextarea"></textarea>
</div>
<script>
const textarea = document.getElementById('mainTextarea');
const searchInput = document.getElementById('searchInput');
let lastFoundIndex = -1;
let lastKeyword = '';
// テキストエリアに例文を5回挿入
const sampleText = "このテキストエリアは、長文の入力が可能です。\nJavaScriptを使うことで、様々な便利機能を追加できます。\n例えば、このように検索ボタンを押すと、指定したキーワードの場所までカーソルがジャンプします。\nもう一度「次を検索」ボタンを押すと、次の「キーワード」に移動します。\nJavaScriptの可能性は無限大です。\nぜひ、このサンプルを改造して、あなただけの機能を作ってみてください。\n最後のキーワードはこちらです。\n\n";
textarea.value = sampleText.repeat(5);
function findNext() {
const keyword = searchInput.value;
if (!keyword) {
alert('検索キーワードを入力してください。');
return;
}
if (keyword !== lastKeyword) {
lastFoundIndex = -1;
lastKeyword = keyword;
}
const foundIndex = textarea.value.indexOf(keyword, lastFoundIndex + 1);
if (foundIndex !== -1) {
lastFoundIndex = foundIndex;
// --- ここからがスクロール処理の改善点 ---
// 1. CSSから行の高さを取得
const style = window.getComputedStyle(textarea);
const lineHeight = parseFloat(style.lineHeight);
// 2. 見つかった位置までのテキストを取得し、行数を数える
const textToFound = textarea.value.substring(0, foundIndex);
const lineCount = textToFound.split('\n').length;
// 3. スクロール位置を計算して設定
// (行数 - 1) * 行の高さ で、その行の開始位置のピクセル値が求まる
textarea.scrollTop = (lineCount - 1) * lineHeight;
// --- ここまで ---
// 選択範囲の設定とフォーカス
textarea.focus();
textarea.setSelectionRange(foundIndex, foundIndex + keyword.length);
} else {
alert('これ以上見つかりません。先頭から再度検索します。');
lastFoundIndex = -1;
}
}
</script>
</body>
</html>
kensaku-2
├
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>【確実な解決策】contenteditable と scrollIntoView</title>
<style>
body { font-family: sans-serif; padding: 1em; }
.container { display: flex; flex-direction: column; gap: 10px; }
.controls { display: flex; align-items: center; gap: 10px; }
/* 編集エリアをテキストエリアそっくりに見せるスタイル */
.editable-area {
width: 500px;
height: 200px;
border: 1px solid #767676;
padding: 8px;
overflow: auto; /* スクロールバーを表示 */
font-size: 16px;
line-height: 1.5;
background-color: white;
white-space: pre-wrap; /* 改行とスペースを保持し、自動折り返しも行う */
}
/* 検索で見つかった箇所をハイライトするスタイル */
.highlight {
background-color: #ff0;
border-radius: 3px;
}
</style>
</head>
<body>
<h1>【確実な解決策】編集エリア内検索 & ジャンプ機能</h1>
<div class="container">
<div class="controls">
<input type="text" id="searchInput" placeholder="検索キーワード">
<input type="button" value="次を検索" onclick="findNext()">
</div>
<div id="editor" class="editable-area" contenteditable="true"></div>
</div>
<script>
const editor = document.getElementById('editor');
const searchInput = document.getElementById('searchInput');
// 例文を挿入
const sampleText = "このテキストエリアは、長文の入力が可能です。\nJavaScriptを使うことで、様々な便利機能を追加できます。例えば、このように検索ボタンを押すと、指定したキーワードの場所までカーソルがジャンプします。\nもう一度「次を検索」ボタンを押すと、次の「キーワード」に移動します。JavaScriptの可能性は無限大です。\nぜひ、このサンプルを改造して、あなただけの機能を作ってみてください。\n最後のキーワードはこちらです。\n\n";
editor.innerText = sampleText.repeat(5); // innerTextで改行を正しく反映
let currentMatches = []; // 見つかったキーワードのspan要素を保持する配列
let currentIndex = -1; // 現在ハイライトしている要素のインデックス
function findNext() {
const keyword = searchInput.value;
if (!keyword) {
alert('検索キーワードを入力してください。');
return;
}
// 検索キーワードが変わったか、まだ検索していなければ、検索をやり直す
if (currentMatches.length === 0 || editor.dataset.lastKeyword !== keyword) {
removeHighlights();
editor.dataset.lastKeyword = keyword; // 検索したキーワードを記録
const regex = new RegExp(keyword, 'gi');
editor.innerHTML = editor.innerText.replace(regex, `<span class="highlight">${keyword}</span>`);
// マッチした全てのspan要素を配列に格納
currentMatches = Array.from(editor.querySelectorAll('.highlight'));
currentIndex = -1;
}
if (currentMatches.length === 0) {
alert('キーワードが見つかりませんでした。');
return;
}
// 次の要素へインデックスを進める（末尾まで行ったら先頭に戻る）
currentIndex = (currentIndex + 1) % currentMatches.length;
const currentElement = currentMatches[currentIndex];
// --- ★★★ これが最も確実なスクロール命令です ★★★ ---
currentElement.scrollIntoView({
behavior: 'smooth', // スムーズにスクロール
block: 'center' // 要素を中央に表示
});
// 強調のため、現在地の背景色を少し変える
currentMatches.forEach(el => el.style.backgroundColor = '#ff0'); // 他をリセット
currentElement.style.backgroundColor = '#ffa500'; // 現在地はオレンジに
}
function removeHighlights() {
// ハイライト用のspanを全て解除して、元のテキストに戻す
editor.innerHTML = editor.innerText;
}
</script>
</body>
</html>
kensaku-1
├
主要変更
・UTF-8 全面UTF-8化
・段階をおいての確認：文字化け確認
・段階をおいての確認：出力ファイルの文字コード確認
・段階をおいての確認：絵文字
・レイアウト変更
・Javascript外ファイルを全部内側に変更
・アイフォン、アンドロイド、パソコンそれぞれの配置確認
・ボタン関連
・Perlボタン は「-file:作成」ボタンへ
・保存ボタン 保存して終了 から 保存してそのまま修正継続 へ内容変更
・クリアボタン 内容クリアのボタン
・コピーボタン 内容クリップボードコピーのボタン
・URLのリンクを付けるボタン
・ファイル名連番コピー 選択した物１つだけ、内容は空で、後ろの数値＋１の新しい物を作成する。
・マークダウンプレビュー
・コード解説AIボタン
・実行環境切り替えボタン
以下はしない
・QRコード
・選択検索
・選択地図
・縦書き
Ctrl + Shift + R（または Shift + 更新ボタン）でキャッシュを無視して再読み込み
keijiban--やること
├
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>長い2カラム Grid レイアウト</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: sans-serif;
}
.container {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh; /* ビューポート高を最小にして、内容が伸びれば拡張 */
}
header {
background: #4caf50;
color: white;
padding: 1rem;
text-align: center;
}
main {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 1rem;
padding: 1rem;
align-items: start;
}
.sidebar {
background: #f0f0f0;
padding: 1rem;
}
.content {
background: #e0f7fa;
padding: 1rem;
}
footer {
background: #333;
color: white;
text-align: center;
padding: 0.5rem;
}
/* 長いダミーコンテンツ用 */
.long-text {
line-height: 1.6;
}
</style>
</head>
<body>
<div class="container">
<header>ヘッダー</header>
<main>
<div class="sidebar">
<h2>サイドバー</h2>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
<p>ナビゲーションや追加情報など</p>
</div>
<div class="content">
<h2>メインコンテンツ</h2>
<div class="long-text">
<!-- ダミーテキスト（繰り返し） -->
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<p>これは長いメインコンテンツの例です。</p>
<!-- 必要ならさらに追加可能 -->
</div>
</div>
</main>
<footer>フッター</footer>
</div>
</body>
</html>
２カラムテスト２
├
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid 2カラムレイアウト</title>
<style>
body {
margin: 0;
font-family: sans-serif;
}
.container {
display: grid;
grid-template-rows: auto 1fr auto; /* ヘッダー, メイン, フッター */
height: 100vh;
}
header {
background: #4caf50;
color: white;
padding: 1rem;
text-align: center;
}
main {
display: grid;
grid-template-columns: 1fr 3fr; /* サイドバー:メインコンテンツ = 1:3 */
gap: 1rem;
padding: 1rem;
}
.sidebar {
background: #f0f0f0;
padding: 1rem;
}
.content {
background: #e0f7fa;
padding: 1rem;
}
footer {
background: #333;
color: white;
text-align: center;
padding: 0.5rem;
}
</style>
</head>
<body>
<div class="container">
<header>ヘッダー</header>
<main>
<div class="sidebar">サイドバー</div>
<div class="content">メインコンテンツ</div>
</main>
<footer>フッター</footer>
</div>
</body>
</html>
２カラムテスト１
├
非公開
gemini解析２
├
非公開
gemini解析
├
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>掲示板</title>
<style>
textarea {
width: 100%;
height: 100px;
}
button {
margin-top: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<h1>掲示板</h1>
<form id="bbsForm">
<textarea id="message" placeholder="メッセージを入力してください"></textarea><br>
<button type="button" onclick="decorateText('[b]', '[/b]')">太字</button>
<button type="button" onclick="decorateText('[i]', '[/i]')">斜体</button>
<button type="button" onclick="decorateText('[color=red]', '[/color]')">赤文字</button>
<button type="button" onclick="copyText()">コピー</button>
<button type="button" onclick="clearText()">クリア</button>
<button type="submit">送信</button>
</form>
<script>
function decorateText(prefix, suffix) {
const textarea = document.getElementById("message");
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
const selected = textarea.value.substring(start, end);
const newText = prefix + selected + suffix;
textarea.setRangeText(newText, start, end, 'end');
textarea.focus();
}
function copyText() {
const textarea = document.getElementById("message");
textarea.select();
document.execCommand("copy");
alert("コピーしました");
}
function clearText() {
document.getElementById("message").value = "";
}
</script>
</body>
</html>
keijiban-test1
├
Git入門 - Speaker Deck
├
【図解解説】これ1本でGitをマスターできるチュートリアル！【完全版】
├
非公開
style.css サイドを25％案
├
非公開
style.css 元ファイル
├
PerlでXMLRPC::Liteを使用して、FC2ブログに新しいカテゴリを作成する方法について説明します。XMLRPC::Liteは、XML-RPCリクエストを簡単に送信するためのPerlモジュールです。
以下は、Perlを使ってFC2ブログに新しいカテゴリを作成する方法の具体例です。
必要な準備
Perlの環境が整っていること
Perlがインストールされている必要があります。
XMLRPC::Liteモジュールのインストール
XMLRPC::Liteモジュールをインストールするには、CPANを使います。以下のコマンドでインストールできます。
cpan XMLRPC::Lite
Perlコード例
以下のコードは、FC2ブログに新しいカテゴリを追加するためのXML-RPCリクエストを送信するものです。
use strict;
use warnings;
use XMLRPC::Lite;
# FC2 XML-RPCエンドポイントURL
my $url = 'https://blog.fc2.com/xmlrpc/';
# FC2の認証情報
my $username = 'ユーザー名'; # FC2のユーザー名
my $password = 'パスワード'; # FC2のパスワード
my $blog_id = 'ブログID'; # 自分のFC2ブログID
my $category_name = '新しいカテゴリ名'; # 作成するカテゴリ名
# XML-RPC::Liteクライアントを作成
my $rpc = XMLRPC::Lite->proxy($url);
# blogger.newCategory メソッドを呼び出し
my $response = $rpc->call(
'blogger.newCategory', # メソッド名
$username, # ユーザー名
$password, # パスワード
$blog_id, # ブログID
$category_name # 新しいカテゴリ名
);
# レスポンスを表示
if ($response->fault) {
print "エラー: ", $response->faultstring, "\n";
} else {
print "新しいカテゴリが作成されました: ", $response->result, "\n";
}
コードの説明
必要なモジュールのインポート：
XMLRPC::Liteモジュールを使って、XML-RPCリクエストを送信します。
FC2 XML-RPCエンドポイントURLの指定：
FC2ブログのXML-RPCエンドポイントURL（https://blog.fc2.com/xmlrpc/）を指定します。
認証情報の設定：
ユーザー名、パスワード、ブログID、そして新しく作成するカテゴリ名を変数にセットします。
blogger.newCategoryメソッドの呼び出し：
XMLRPC::Lite->proxy($url)でFC2のXML-RPCエンドポイントに接続し、callメソッドでblogger.newCategoryを呼び出します。
レスポンスの処理：
リクエストが成功した場合、$response->resultで結果（新しいカテゴリのID）が返されます。
失敗した場合、エラーメッセージが表示されます。
実行方法
上記のコードを、例えば create_category.pl というファイルに保存します。
必要なパラメータ（ユーザー名、パスワード、ブログID、カテゴリ名）を実際の値に置き換えます。
コマンドラインで以下のように実行します。
perl create_category.pl
注意点
FC2ブログのXML-RPCにおいて、blogger.newCategoryメソッドの仕様が変更されることがあるため、API仕様を確認することが重要です。
リクエストの回数に制限がある可能性があるので、大量のリクエストを一度に送信しないように注意してください。
この方法で、Perlを使ってFC2ブログに新しいカテゴリを作成できます。
fc2カテゴリ分け２
├
ChatGPT
ログイン
新規登録
あなた:
perl の Xmlprc
ChatGPT:
Perl で XML-RPC を使用する場合、XML::RPC モジュールを使うことが一般的です。このモジュールは、XML-RPC プロトコルを使ってリモートの Web サービスと通信するためのライブラリです。
以下は、XML::RPC モジュールを使って XML-RPC リクエストを送信する基本的な例です。
1. 必要なモジュールのインストール
まず、XML::RPC モジュールを CPAN を使ってインストールします。
bash
コピーする
cpan install XML::RPC
2. 基本的な XML-RPC リクエストの例
以下は、XML-RPC サーバーにリクエストを送信し、レスポンスを受け取る Perl のコード例です。
perl
コピーする
use XML::RPC;
# サーバーの URL（例: http://example.com/RPC2）
my $url = 'http://example.com/RPC2';
# XML-RPC クライアントの作成
my $rpc = XML::RPC->new($url);
# メソッドの呼び出しと引数
my $method = 'example.method'; # 呼び出すメソッド名
my @params = ('param1', 'param2'); # メソッドの引数
# リクエストの送信とレスポンスの取得
my $response = $rpc->call($method, @params);
# レスポンスの処理
if ($response) {
print "レスポンス: ", $response, "\n";
} else {
print "エラー: ", $rpc->status, "\n";
}
3. エラーハンドリング
XML::RPC では、通信エラーやレスポンスエラーを適切に処理するために、エラーハンドリングを行うことが重要です。上記の例で示したように、$rpc->status でエラーメッセージを確認できます。
4. XML-RPC サーバーへの POST リクエスト
XML-RPC サーバーに対して POST リクエストを送信する必要がある場合もあります。この場合、XML::RPC は内部で自動的に HTTP リクエストを作成しますので、ユーザーが直接 HTTP リクエストを作成する必要はありません。
まとめ
このように、Perl で XML-RPC を使うには XML::RPC モジュールを活用することで、簡単にリモートサーバーと通信できます。呼び出したいメソッドとその引数を指定して、XML-RPC リクエストを送信し、レスポンスを受け取ることができます。
もし、さらに詳しい使い方や特定の要件があれば、教えてください！
あなた:
FC2ブログに XML-RPCで投稿したい
ChatGPT:
FC2ブログに XML-RPC を使って投稿するためには、FC2のブログの XML-RPC インターフェースを利用する方法があります。FC2ブログは XML-RPC をサポートしており、これを使用して自動的に記事を投稿したり、管理したりすることができます。
必要な情報
まず、FC2ブログに投稿するために必要な情報は以下の通りです：
XML-RPC エンドポイント URL: FC2ブログの場合、http://xmlrpc.fc2.com が基本のエンドポイントです。
ユーザー名 (ID): FC2ブログのログインID。
パスワード: FC2ブログのログインパスワード。
XML-RPC メソッド
FC2ブログの XML-RPC インターフェースにはいくつかのメソッドがありますが、投稿を行うためには metaWeblog.newPost メソッドを使用します。
必要なモジュール
Perl で XML-RPC を使用するためには、先ほども言及した通り XML::RPC モジュールが便利です。
1. モジュールのインストール
まず、Perl の環境に XML::RPC をインストールします。
bash
コピーする
cpan install XML::RPC
2. FC2ブログに投稿する Perl スクリプト
以下の Perl スクリプトを使って、FC2ブログに XML-RPC 経由で記事を投稿できます。
perl
コピーする
use XML::RPC;
use strict;
# FC2ブログのXML-RPCサーバーURL
my $url = 'http://xmlrpc.fc2.com';
# ユーザー名（FC2ブログのID）
my $username = 'your_username';
# パスワード（FC2ブログのパスワード）
my $password = 'your_password';
# 投稿のタイトルと内容
my $title = 'この記事のタイトル';
my $content = 'この記事の内容です。';
# 記事を公開するかどうか（公開する場合は1、下書きにする場合は0）
my $publish = 1;
# XML-RPC クライアントの作成
my $rpc = XML::RPC->new($url);
# FC2ブログの XML-RPC メソッドを呼び出し
# metaWeblog.newPost の引数は次の通り：
# 1. ブログID（ユーザー名）
# 2. パスワード
# 3. 投稿内容（タイトル、内容、公開設定）
my $response = $rpc->call('metaWeblog.newPost', $username, $password, {
title => $title,
description => $content,
categories => ['default'], # カテゴリの指定（必要に応じて変更）
}, $publish);
# 結果を表示
if ($response) {
print "記事の投稿に成功しました。\n";
print "投稿ID: ", $response, "\n";
} else {
print "記事の投稿に失敗しました。\n";
print "エラー: ", $rpc->status, "\n";
}
スクリプトの説明
URL: http://xmlrpc.fc2.com は FC2 の XML-RPC サーバーのエンドポイントです。
metaWeblog.newPost メソッド: これを使って新しい記事を投稿します。引数としてブログID、パスワード、投稿する内容（タイトル、内容、カテゴリ）、および公開設定（1: 公開, 0: 下書き）を渡します。
記事の内容とタイトル: $title と $content に投稿する記事のタイトルと内容を設定します。
レスポンス: 投稿が成功すると、投稿IDが返されます。失敗した場合はエラーメッセージを表示します。
3. 実行
このスクリプトを実行すると、FC2ブログに指定したタイトルと内容で投稿されます。投稿が成功すれば、その投稿IDも表示されます。
追加オプション
カテゴリの指定: categories => ['default'] の部分で、投稿するカテゴリを指定できます。カテゴリはブログ側であらかじめ作成しておく必要があります。
記事の公開設定: $publish = 1; を 0 に変更すると、記事は公開されずに下書きとして保存されます。
注意点
パスワードが正しいこと、FC2ブログのアカウントが有効であることを確認してください。
スクリプト内の your_username と your_password を実際の FC2 アカウントの情報に置き換えてください。
これで、XML-RPC 経由で FC2ブログに投稿する準備が整いました！
添付
検索
推論
Voice
ChatGPT の回答は必ずしも正しいとは限りません。重要な情報は確認するようにしてください。
?
fc2カテゴリ分け１
├
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>複数チェックボックスの反映 - 2分割レイアウト</title>
<style>
/* 基本設定: htmlとbodyの高さを100%にし、デフォルトのマージン・パディングを削除 */
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden; /* スクロールバーが不要なら */
}
/* レイアウトのスタイル */
#container {
display: flex;
/* justify-content: space-between; */ /* 幅で制御するので不要かも */
height: 100vh; /* ビューポートの高さ全体を使用 */
padding: 20px;
box-sizing: border-box; /* paddingを含めて高さを計算 */
}
#checkbox-container {
width: 50%; /* 左側の幅 */
display: flex;
flex-direction: column;
padding-right: 10px; /* 右側との間に少し余白 */
overflow-y: auto; /* チェックボックスが多い場合にスクロール */
}
#iframe-container {
width: 50%; /* 右側の幅 (100% - 30% - 余白分考慮) */
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box; /* paddingを含めて幅を計算 */
display: flex; /* 中のiframeを高さ100%にするため */
flex-direction: column; /* iframeを縦方向に伸ばす */
}
/* iframe自体のスタイル */
#iframe {
width: 100%;
height: 100%; /* 親要素(#iframe-container)の高さに合わせる */
border: none; /* iframeのデフォルト枠線を削除 */
}
/* チェックボックスとラベルの間隔調整 */
#checkbox-container label {
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="container">
<div id="checkbox-container">
<h3>チェックボックス</h3>
<label>
<input type="checkbox" name="option" value="チェック1" onclick="updateIframe()"> チェック1
</label>
<label>
<input type="checkbox" name="option" value="チェック2" onclick="updateIframe()"> チェック2
</label>
<label>
<input type="checkbox" name="option" value="チェック3" onclick="updateIframe()"> チェック3
</label>
<label>
<input type="checkbox" name="option" value="その他" onclick="updateIframe()"> その他
</label>
</div>
<div id="iframe-container">
<iframe id="iframe" srcdoc="<html><body><h2>ここに反映されます</h2></body></html>"></iframe>
</div>
</div>
<script>
function updateIframe() {
var iframe = document.getElementById("iframe");
var checkboxes = document.querySelectorAll('input[name="option"]');
var selectedLabels = [];
checkboxes.forEach(function(checkbox) {
if (checkbox.checked) {
selectedLabels.push(checkbox.value);
}
});
var message = "";
if (selectedLabels.length > 0) {
// <BR>タグで改行するように変更
message = selectedLabels.join("<br><br>");
} else {
message = "項目が選択されていません";
}
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
// メッセージが見やすいように body に直接ではなく、div などに入れるとより良いかもしれません
iframeDocument.body.innerHTML = "<div>" + message + "</div>";
}
// 初期表示（必要に応じてコメント解除）
// updateIframe();
</script>
</body>
</html>
コードテスト2
├
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>複数チェックボックスの反映</title>
<style>
/* レイアウトのスタイル */
#container {
display: flex;
justify-content: space-between;
padding: 20px;
}
#checkbox-container {
width: 30%;
display: flex; /* ラベルを縦に並べる */
flex-direction: column; /* ラベルを縦に並べる */
}
#iframe-container {
width: 60%;
border: 1px solid #ccc;
padding: 10px;
}
/* チェックボックスとラベルの間隔調整 */
#checkbox-container label {
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="container">
<div id="checkbox-container">
<h3>チェックボックス</h3>
<label>
<input type="checkbox" name="option" value="チェック1" onclick="updateIframe()"> チェック1
</label>
<label>
<input type="checkbox" name="option" value="チェック2" onclick="updateIframe()"> チェック2
</label>
<label>
<input type="checkbox" name="option" value="チェック3" onclick="updateIframe()"> チェック3
</label>
<label>
<input type="checkbox" name="option" value="その他" onclick="updateIframe()"> その他
</label>
</div>
<div id="iframe-container">
<iframe id="iframe" srcdoc="<html><body><h2>ここに反映されます</h2></body></html>" width="100%" height="200px"></iframe>
</div>
</div>
<script>
function updateIframe() {
var iframe = document.getElementById("iframe");
// name属性が "option" であるすべてのチェックボックス要素を取得
var checkboxes = document.querySelectorAll('input[name="option"]');
var selectedLabels = []; // 選択されたラベルを格納する配列
// 各チェックボックスをループ処理
checkboxes.forEach(function(checkbox) {
if (checkbox.checked) {
// チェックが入っていれば、そのvalue属性の値（ラベル文字列）を配列に追加
selectedLabels.push(checkbox.value);
}
});
var message = "";
if (selectedLabels.length > 0) {
// 選択されたラベルがある場合、カンマ区切りで連結
message = "選択された項目: " + selectedLabels.join("、"); // 区切り文字を「、」に変更
} else {
// 何も選択されていない場合
message = "項目が選択されていません";
}
// iframe内のドキュメントを取得して更新する
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
iframeDocument.body.innerHTML = "<h2>" + message + "</h2>";
}
// ページ読み込み時にも初期状態を表示するために呼び出す (任意)
// updateIframe();
</script>
</body>
</html>
<script>
/*
checkbox-container 内に複数の <label> と <input type="checkbox"> を配置しました。
各チェックボックスに共通の name="option" 属性を追加しました。これにより、JavaScriptでまとめて取得しやすくなります。
各チェックボックスの value 属性に、隣に表示するラベルと同じ文字列（例: "チェック1"）を設定しました。JavaScriptでこの値を取得して表示します。
各チェックボックスに onclick="updateIframe()" を設定し、いずれかのチェックボックスの状態が変わるたびに updateIframe 関数が呼ばれるようにしました。
CSSに #checkbox-container label { margin-bottom: 5px; } を追加し、チェックボックス間の縦の間隔を調整しました。また、display: flex; と flex-direction: column; を追加して縦に並ぶようにしました。
JavaScript (updateIframe 関数):
document.querySelectorAll('input[name="option"]') を使って、name 属性が "option" である全てのチェックボックスを取得します。
selectedLabels という空の配列を用意します。
forEach ループを使って、取得した各チェックボックスを調べます。
if (checkbox.checked) で、チェックボックスがチェックされているかを確認します。
チェックされていれば、そのチェックボックスの value 属性の値 (checkbox.value) を selectedLabels 配列に追加します。
ループ終了後、selectedLabels 配列に格納された文字列を join("、") を使って「、」で連結し、表示用のメッセージを作成します。
選択された項目がない場合は、「項目が選択されていません」というメッセージを表示します。
最後に、作成したメッセージをインラインフレーム (iframe) の中身として表示します。
これで、チェックを入れた項目のラベル文字列がインラインフレーム内に表示されるようになります。
複数チェックを入れると、それらのラベルが「、」で区切られて表示されます。
*/
</script>
コードテスト１
├
非公開
やること
│└
非公開
資料退避
├
非公開
モンハンワイルズまとめわず
│├
非公開
googleスプレッドシートで定期的にcgiにアクセスする
│├
非公開
5chの指定された広告
│└
非公開
chien2-2.cgi
├
2025.3.16停止 実験的に継続
2025.2.25再開
世間の風当たりから、完全に凍結。
別ワードによる探索も凍結。
しばらく様子見。2014/03/12〜
凍結内容
・スレッド色選択式に移行
・複数サイトへの投稿へ対応
・過去ログ入りから⇒取得時のレス数からに変更
・デフォピクチャを設け、関連ピクチャを自動表示
2つのサイトは停止中
・モンハン4まとめわず
・斜線上のゴッドイーター２まとめ
まとめサイトに関する開発は継続
├
非公開
やること時間軸
├
過去の資料2011〜2013
過去資料
│├
非公開
今やること簡易メモ（それのみ記入）
│├
非公開
memo
│
├
ここは
射線上のゴッドイーター２まとめ の資料置き場
2014年3月4日をもって更新を停止
射線上のゴッドイーター２まとめ資料
│└
<!--
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/■番号■/momomosumom0d-22/ref=nosim">
<img src="■PIC-URL■._SX180_.jpg" alt=""/></a>
<div style="font-size:9px;">■品名■</div><BR><BR>
-->
<!--アマゾン -->
<!--右■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ -->
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/404868504X/momomosumom0d-22/ref=nosim">
<img src="http://ecx.images-amazon.com/images/I/61FsO0UprNL._SX180_.jpg" alt=""/></a>
<div style="font-size:9px;">GOD EATER -the spiral fate- <BR>(電撃コミックス) [コミック]</div><BR><BR>
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/4048689762/momomosumom0d-22/ref=nosim">
<img src="http://ecx.images-amazon.com/images/I/61ldIpmu4CL._SX180_.jpg" alt=""/></a>
<div style="font-size:9px;">GOD EATERーthe spiral fateー 2<BR> (電撃コミックス) [コミック]</div><BR><BR>
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/4048910493/momomosumom0d-22/ref=nosim">
<img src="http://ecx.images-amazon.com/images/I/61P-eMzFzwL._SX180_.jpg" alt=""/></a>
<div style="font-size:9px;">GOD EATERーthe 2nd breakー 1<BR>(電撃コミックス) [コミック]</div><BR><BR>
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/4048913603/momomosumom0d-22/ref=nosim">
<img src="http://ecx.images-amazon.com/images/I/51RVUU15eFL._SX180_.jpg" alt=""/></a>
<div style="font-size:9px;">GOD EATER -the 2nd break- 2<BR>(電撃コミックス) [コミック]</div><BR><BR>
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/4048919725/momomosumom0d-22/ref=nosim">
<img src="http://ecx.images-amazon.com/images/I/61xIC8IffKL._SX180_.jpg" alt=""/></a>
<div style="font-size:9px;">GOD EATER -the 2nd break- 3<BR> (電撃コミックス) [コミック]</div><BR><BR>
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/4902372487/momomosumom0d-22/ref=nosim">
<img src="http://ecx.images-amazon.com/images/I/61B1cAKFYUL._SX180_.jpg" alt=""/></a>
<div style="font-size:9px;">ゴッドイーター2 公式ガイドブック<BR> (公式最速本) [単行本（ソフトカバー）]</div><BR><BR>
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00FZYD0F8/momomosumom0d-22/ref=nosim">
<img src="http://ecx.images-amazon.com/images/I/61Yj0PRu%2BML._SX180_.jpg" alt=""/></a>
<div style="font-size:9px;">電撃PlayStation (プレイステーション)<BR> 2013年 11/14号 [雑誌] [雑誌]</div><BR><BR>
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00FYMXRIQ/momomosumom0d-22/ref=nosim">
<img src="http://ecx.images-amazon.com/images/I/510XsJo-69L._SX180_.jpg" alt=""/></a>
<div style="font-size:9px;">ゴッドイーターマガジン Vol.1<BR> 2013年 12/21号 [雑誌] [雑誌]</div><BR><BR>
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00GU4B5WW/momomosumom0d-22/ref=nosim">
<img src="http://ecx.images-amazon.com/images/I/61GaaZEZw1L._SX180_.jpg" alt=""/></a>
<div style="font-size:9px;">ゴッドイーターマガジン Vol.2<BR> 2014年 2/1号 [雑誌] [雑誌]</div><BR><BR>
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00HJKN4FM/momomosumom0d-22/ref=nosim">
<img src="http://g-ec2.images-amazon.com/images/G/09/nav2/dp/no-image-no-ciu._SX180_.gif" alt=""/></a>
<div style="font-size:9px;">ゴッドイーターマガジン Vol.3 2014年 3/9号 [雑誌] [雑誌]</div><BR><BR>
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00F9VKF82/momomosumom0d-22/ref=nosim">
<img src="http://ecx.images-amazon.com/images/I/41PI43iaU2L._SX180_.jpg" alt=""/></a>
<div style="font-size:9px;">ゴッドイーター2<BR> アクセサリーセット for PlayStation Vita</div><BR><BR>
<!--左■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ -->
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00G3BRFJ4/momomosumom0d-22/ref=nosim">
<img src="http://ecx.images-amazon.com/images/I/51WHta8TujL._SX180_.jpg" alt=""/></a>
<div style="font-size:9px;">ARIA (MINI ALBUM)</div><BR><BR>
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B0031QYEKC/momomosumom0d-22/ref=nosim">
<img src="http://ecx.images-amazon.com/images/I/51K8gwTLTBL._SX180_.jpg" alt=""/></a>
<div style="font-size:9px;">GOD EATER <BR>オリジナル・サウンドトラック [Soundtrack]</div><BR><BR>
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00480PT3G/momomosumom0d-22/ref=nosim">
<img src="http://ecx.images-amazon.com/images/I/513AgfepX7L._SX180_.jpg" alt=""/></a>
<div style="font-size:9px;">GOD EATER BURST<BR>ドラマ&オリジナル・サウンドトラック</div><BR><BR>
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00F5QI790/momomosumom0d-22/ref=nosim">
<img src="http://ecx.images-amazon.com/images/I/51Me-Z5mF8L._SX180_.jpg" alt=""/></a>
<div style="font-size:9px;">GOD EATER 2 ラバーストラップ ちゃん様</div><BR><BR>
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00F5QI71I/momomosumom0d-22/ref=nosim">
<img src="http://ecx.images-amazon.com/images/I/51vwoSbRKSL._SX180_.jpg" alt=""/></a>
<div style="font-size:9px;">GOD EATER 2 ラバーストラップ<BR>エリナ・デア=フォーゲルヴァイデ</div><BR><BR>
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00F5QI6XW/momomosumom0d-22/ref=nosim">
<img src="http://ecx.images-amazon.com/images/I/51ZX0vDXm-L._SX180_.jpg" alt=""/></a>
<div style="font-size:9px;">GOD EATER 2 ラバーストラップ アリサ・イリーニチナ・アミエーラ</div><BR><BR>
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00F5QHXDQ/momomosumom0d-22/ref=nosim">
<img src="http://ecx.images-amazon.com/images/I/41KDR8MLbBL._SX180_.jpg" alt=""/></a>
<div style="font-size:9px;">GOD EATER 2 ガジェットポーチ<BR>エリナ・デア=フォーゲルヴァイデ</div><BR><BR>
<a href="http://www.amazon.co.jp/exec/obidos/ASIN/B00CLM4GF0/momomosumom0d-22/ref=nosim">
<img src="http://ecx.images-amazon.com/images/I/41Rf8Ra6ZVL._SX180_.jpg" alt=""/></a>
<div style="font-size:9px;">GOD EATER BURST 台場カノン<BR> (1/7スケール PVC製塗装済み完成品)</div><BR><BR>
amazon-GE2
├
Javascript Shortcode Area
├
Junkerposts
└
junkerstock
・その場でjavascriptの編集
実行、デバッグＯＫ
・ツリー管理
・変数管理
・括弧の色分け（オマケ程度）
・無限Undo
・完全オリジナルの環境です。
・このCGIのお問い合わせは
・momonga-v4.live.jp まで。