<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>地震情報 - 完全版</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: var(--bg-color, #ffffff);
color: var(--text-color, #000000);
transition: background-color 0.3s, color 0.3s;
}
.container {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background: var(--card-bg, #ffffff);
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
#map {
height: 400px;
margin-top: 20px;
}
.toggle-dark-mode {
position: fixed;
top: 10px;
right: 10px;
padding: 10px;
background: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
@media (max-width: 768px) {
.container {
padding: 10px;
}
}
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<button class="toggle-dark-mode" onclick="toggleDarkMode()">ダークモード切り替え</button>
<div class="container">
<h1>地震情報</h1>
<div id="quakeStats">
<canvas id="intensityChart" width="400" height="200"></canvas>
</div>
<div id="map"></div>
<div id="regionData"></div>
</div>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script>
const rssUrl = 'https://www.jma.go.jp/bosai/quake/data/list.xml';
let quakeData = [];
const regions = {};
const map = L.map('map').setView([35.6895, 139.6917], 5);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
async function fetchEarthquakeData() {
try {
const response = await fetch(`https://api.allorigins.win/get?url=${encodeURIComponent(rssUrl)}`);
const data = await response.json();
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(data.contents, "text/xml");
const items = xmlDoc.getElementsByTagName('item');
quakeData = [];
for (let i = 0; i < items.length; i++) {
const title = items[i].getElementsByTagName('title')[0].textContent;
const description = items[i].getElementsByTagName('description')[0].textContent;
const pubDate = items[i].getElementsByTagName('pubDate')[0].textContent;
const match = description.match(/震源地:(.+?)、緯度:(.+?)、経度:(.+?)、震度:(.+?)、/);
if (match) {
const location = match[1];
const lat = parseFloat(match[2]);
const lng = parseFloat(match[3]);
const intensity = parseFloat(match[4]);
quakeData.push({ title, location, lat, lng, intensity, pubDate });
if (!regions[location]) {
regions[location] = [];
}
regions[location].push({ intensity, pubDate });
}
}
displayQuakeData();
updateChart();
} catch (error) {
console.error('地震情報の取得に失敗しました:', error);
}
}
function displayQuakeData() {
map.eachLayer(layer => {
if (layer.options && layer.options.pane === "markerPane") {
map.removeLayer(layer);
}
});
quakeData.forEach(quake => {
L.circle([quake.lat, quake.lng], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: quake.intensity * 10000
}).addTo(map)
.bindPopup(`<strong>${quake.title}</strong><br>震源地: ${quake.location}<br>震度: ${quake.intensity}`);
});
}
function updateChart() {
const ctx = document.getElementById('intensityChart').getContext('2d');
const labels = quakeData.map(q => q.pubDate);
const intensities = quakeData.map(q => q.intensity);
new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: '震度',
data: intensities,
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 2,
fill: false
}]
}
});
}
function toggleDarkMode() {
const isDarkMode = document.body.style.getPropertyValue('--bg-color') === '#ffffff';
document.body.style.setProperty('--bg-color', isDarkMode ? '#333333' : '#ffffff');
document.body.style.setProperty('--text-color', isDarkMode ? '#ffffff' : '#000000');
document.body.style.setProperty('--card-bg', isDarkMode ? '#444444' : '#ffffff');
}
fetchEarthquakeData();
setInterval(fetchEarthquakeData, 60000); // 1分ごとに更新
</script>
</body>
</html>カテゴリー: Webdev
ECサイトGamazon
http://tyosuke20xx.com/Gamazon.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gamazon</title>
<style>
body {
font-family: Arial, sans-serif;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background-color: #131921;
color: white;
}
.navbar h1 {
font-size: 1.5rem;
}
.navbar nav ul {
list-style: none;
display: flex;
}
.navbar nav ul li {
padding: 0 10px;
}
.navbar nav ul li a {
text-decoration: none;
color: white;
}
.product {
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
width: 200px;
float: left;
}
.product img {
width: 100%;
height: auto;
}
.featured-products .carousel {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.featured-products .carousel div {
scroll-snap-align: start;
flex: 0 0 90%;
margin-right: 10px;
}
</style>
</head>
<body>
<header>
<div class="navbar">
<h1>My Gmazon Store</h1>
<input type="text" placeholder="商品を検索" id="search-box">
<button onclick="searchProduct()">検索</button>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">商品カテゴリ</a></li>
<li><a href="#">セール</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="featured-products">
<h2>特選商品</h2>
<div class="carousel">
<!-- カルーセル用のJavaScriptで動的に商品を挿入 -->
</div>
</section>
<section class="product-list">
<h2>商品リスト</h2>
<div class="products">
<!-- 商品リスト -->
</div>
</section>
<section class="customer-reviews">
<h2>ユーザーレビュー</h2>
<div class="reviews">
<!-- レビュー -->
</div>
</section>
</main>
<footer>
<p>© 2024 My Gmazon Store. All rights reserved.</p>
</footer>
<script>
function searchProduct() {
const searchInput = document.getElementById('search-box').value;
alert('検索した商品: ' + searchInput);
}
// 他にもカルーセルの動きやユーザーレビューを動的に表示する関数を追加
</script>
</body>
</html>動画共有サイト
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>動画共有サイト</title>
<style>
/* スタイルは省略 */
</style>
</head>
<body>
<header>
<h1>動画共有サイト</h1>
</header>
<main>
<section id="video-container">
<!-- 動画を表示 -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/Qkls4DCX_9I" frameborder="0" allowfullscreen></iframe>
</section>
<section id="comments-container">
<!-- コメントを表示 -->
</section>
<section id="comment-form-container">
<!-- コメントを投稿するフォーム -->
<form id="comment-form">
<textarea id="comment-input" rows="3" placeholder="コメントを入力してください"></textarea>
<button type="submit">コメントを投稿</button>
</form>
</section>
<section id="categories">
<!-- カテゴリ一覧 -->
<h2>カテゴリ</h2>
<ul>
<li><a href="#">音楽</a></li>
<li><a href="#">スポーツ</a></li>
<li><a href="#">ゲーム</a></li>
<li><a href="#">ニュース</a></li>
</ul>
</section>
</main>
<footer>
<!-- お気に入りボタン -->
<button id="favorite-button">お気に入り</button>
<!-- 検索フォーム -->
<input type="text" id="search-input" placeholder="動画を検索">
<button id="search-button">検索</button>
</footer>
<script>
// コメントを追加する関数
function addComment(comment) {
var commentsContainer = document.getElementById('comments-container');
var commentElement = document.createElement('div');
commentElement.textContent = comment;
commentsContainer.appendChild(commentElement);
}
// フォームの送信イベントを処理する
document.getElementById('comment-form').addEventListener('submit', function(event) {
event.preventDefault(); // フォームのデフォルトの動作を停止
var commentInput = document.getElementById('comment-input');
var commentText = commentInput.value.trim(); // 入力されたコメントを取得
if (commentText !== '') {
addComment(commentText); // コメントを追加
commentInput.value = ''; // 入力欄をクリア
}
});
// お気に入りボタンのクリックイベントを処理する
document.getElementById('favorite-button').addEventListener('click', function() {
alert('動画をお気に入りに追加しました！');
});
// 検索ボタンのクリックイベントを処理する
document.getElementById('search-button').addEventListener('click', function() {
var searchInput = document.getElementById('search-input').value.trim();
alert('「' + searchInput + '」で検索しました！');
});
</script>
</body>
</html>Misskeyサーバーの立て方
「初心者でも簡単！Webサービスの作り方を徹底解説」
1. 「初心者でも簡単！Webサービスの作り方を徹底解説」
初心者でも簡単！Webサービスの作り方を徹底解説
はじめに、Webサービスの概要となぜ作る必要があるのかを紹介します。
次に、開発に必要な知識と準備を整えましょう。HTMLとCSSの基礎知識、Javascriptの基礎知識、データベースの基礎知識が必要です。
開発環境のセットアップでは、テキストエディターの選択とインストール方法、LAMP/WAMP/MAMP環境の構築方法を詳しく解説します。
ウェブサイトデザインでは、カラースキームの選択やレイアウト設計について学びます。
バックエンド実装では、サーバー側スクリプト言語やフレームワーク使用するかどうかも考えます。
フロントエンド実装ではHTMLファイル・CSSファイル・Javascriptファイルを作成する手順を解説します。
データベース設計と実装ではER図作成やテーブル設計、SQLクエリ実行方法も詳しく紹介します。
最後にはサーバーへのデプロイ方法もお伝えしましょう。ドメインとホスティングの取得方法やFTPを使ったファイルアップロード方法を解説します。
初心者でも簡単にWebサービスを作るための手順をまとめました。ぜひ参考にしてみてください！
はじめに
Webサービスの作り方を徹底解説します。まずは、Webサービスの概要について説明します。Webサービスとは、インターネット上で提供されるアプリケーションや機能のことです。例えば、SNSやオンラインショッピングなどが代表的なWebサービスです。
次に、なぜWebサービスを作るのかについて考えてみましょう。自分のアイデアやビジネスを実現するためには、自分でWebサービスを作成する必要があります。また、プログラミングやデザインの知識を身につけることで、将来的なキャリアパスも広がります。
この記事では、初心者でも簡単に始められるように具体的な手順や必要な知識を解説していきます。
まずはHTMLとCSSの基礎知識から学んでいきましょう。HTMLはウェブページの構造を定義するための言語であり、CSSはウェブページの見た目を装飾するための言語です。
次にJavascriptの基礎知識も身につけましょう。Javascriptはウェブページに動的な機能を追加するための言語です。
さらに、データベースの基礎知識も必要です。データベースはWebサービスで使用するデータを管理するための仕組みです。
開発環境のセットアップも重要なステップです。まずはテキストエディターを選択し、インストールします。また、LAMP/WAMP/MAMP環境の構築方法も解説します。
次にウェブサイトのデザインについて考えてみましょう。カラースキームやレイアウトの設計が重要です。
バックエンドの実装では、サーバー側スクリプト言語とフレームワークの選択がポイントとなります。
フロントエンドではHTMLファイル、CSSファイル、Javascriptファイルを作成していきます。
次にデータベースの設計と実装を行います。ER図やテーブル設計、SQLクエリなどが必要です。
最後にサーバーへのデプロイ方法を解説します。ドメインとホスティングを取得し、FTPを使ってファイルアップロードします。
以上がWebサービス作り方全体像です。初心者でも簡単に始められるように、各セクションで詳しく解説していきます。
必要な知識と準備
HTMLとCSSの基礎知識
Webサービスを作るためには、HTMLとCSSの基礎知識が必要です。HTMLはウェブページの構造を定義するためのマークアップ言語であり、CSSはウェブページのスタイルやデザインを指定するためのスタイルシート言語です。
Javascriptの基礎知識
Javascriptはウェブページに動的な機能やインタラクティビティを追加するために使用されるプログラミング言語です。Webサービスでは、ユーザーとの対話やデータ処理などにJavascriptが活用されます。
データベースの基礎知識
Webサービスでは、ユーザー情報やコンテンツデータなどを保存・管理するためにデータベースが必要です。データベースの基本的な概念やSQL（Structured Query Language）クエリの書き方など、データベース操作に関する知識が求められます。
以上がWebサービスを作る上で必要な知識と準備です。これらの基礎的な内容を学習し、実際に手を動かして経験を積むことで、より高度なWebサービスの開発に取り組むことができるようになります。
開発環境のセットアップ
テキストエディターの選択とインストール方法
開発を始める前に、まずは適切なテキストエディターを選択し、インストールする必要があります。テキストエディターはコードを書くためのツールであり、使いやすさや機能性などが重要なポイントです。代表的なテキストエディターとしてはVisual Studio CodeやSublime Textがあります。これらのテキストエディターは無料で利用することができますので、自分に合ったものを選んでインストールしましょう。
LAMP/WAMP/MAMP環境の構築方法（OSごとに分けて解説）
Webサービスを作るためには、ローカル環境に開発用サーバーを構築する必要があります。一般的な方法としてLAMP/WAMP/MAMP環境があります。これらはそれぞれLinux/Windows/Mac OS向けに提供されており、Apache（Webサーバーソフトウェア）、MySQL（データベース管理システム）、PHP（プログラミング言語）から成り立っています。
LAMP環境を構築する場合、まずはApacheをインストールし、設定を行います。次にMySQLをインストールし、データベースの設定を行います。最後にPHPをインストールし、Apacheと連携させます。
WAMP環境やMAMP環境も同様の手順で構築しますが、OSごとに異なるインストーラーが提供されているため注意が必要です。
開発環境のセットアップはWebサービス作成の第一歩です。正しくセットアップすることで効率的な開発が可能となりますので、丁寧に手順を確認しながら進めましょう。
データベースの設計と実装
ER図の作成
データベースの設計を行う際には、まずER図を作成する必要があります。ER図は、エンティティ（テーブル）間の関係性を視覚的に表現したものです。エンティティとは、データベース内で扱う情報の単位であり、例えば「顧客」や「商品」といったものです。ER図を作成することで、どのようなエンティティが存在し、それらがどのような関係性を持っているかが一目でわかります。
テーブルの設計
次に、ER図を元にして各エンティティ（テーブル）ごとに具体的なカラム（列）やデータ型を定義します。例えば、「顧客」エンティティでは、「氏名」「住所」「電話番号」といったカラムが必要になるでしょう。また、各カラムには適切なデータ型（文字列や数値など）を指定することも重要です。
SQLクエリの実行
最後に、実際にデータベースにテーブルを作成し、データの追加や検索などの操作を行います。これにはSQL（Structured Query Language）と呼ばれる言語を使用します。SQLクエリは、データベースへの命令文であり、例えば「顧客情報を追加する」「商品情報を検索する」といった操作が含まれます。
データベースの設計と実装は、Webサービス開発において非常に重要な要素です。適切な設計と効率的な実装が行われることで、データの管理や処理がスムーズに行えるようになります。また、セキュリティやパフォーマンス面でも影響を与えるため、注意深く取り組む必要があります。
サーバーへのデプロイ
ドメインとホスティングの取得方法
Webサービスを公開するためには、まずドメインとホスティングを取得する必要があります。ドメインは、ウェブサイトのアドレスを指定するためのものであり、ユーザーがアクセスする際に入力するURLです。一方、ホスティングはウェブサイトを保存・公開するためのサーバー空間です。
まず、お好みのドメイン名を選んで登録します。多くのレジストラ（登録業者）が存在し、それぞれ料金や機能が異なるため比較検討して選ぶことが重要です。登録後にDNS設定を行い、自分が取得したドメイン名とホスティング先IPアドレスを紐付けます。
次に、ウェブサイト用のホスティングプランを選択します。共有ホストや専用サーバーなどさまざまなタイプがあります。予算やトラフィック量などに応じて最適なプランを選択しましょう。
FTPを使ったファイルアップロード方法
ウェブサイトのファイルをホスティングサーバーにアップロードするためには、FTP（File Transfer Protocol）を使用します。FTPクライアントソフトウェアを使って、自分のコンピュータからホスティングサーバーへファイルを転送します。
まず、FTPクライアントソフトウェアをダウンロードしてインストールします。有名なものとしてはFileZillaやCyberduckなどがあります。
次に、FTPクライアントソフトウェアで接続設定を行います。ホスティングプロバイダーから提供された接続情報（ホスト名、ポート番号、ユーザー名、パスワード）を入力し、「接続」または「ログイン」ボタンをクリックします。
接続が成功したら、自分のコンピュータ上のファイルエクスプローラーと同様に操作できるようになります。必要なファイルやディレクトリを選択し、「転送」または「アップロード」ボタンを押すことでファイルがサーバー上に転送されます。
以上が基本的なサーバーへのデプロイ方法です。ドメインとホスティングの取得、FTPを使ったファイルアップロードを行うことで、自分のウェブサイトをインターネット上に公開することができます。
Microsoft Azure
https://azure.microsoft.com/ja-jp
使うにはクレジットカードが必要みたいですね
Djanogo test.py
test.py
from django.test import TestCase
from django.urls import resolve
from snippets.views import snippet_new, snippet_edit, snippet_detail
class CreateSnippetTest(TestCase):
def test_should_resolve_snippet_new(self):
found = resolve(“/snippets/new/”)
self.assertEqual(snippet_new, found.func)
class SnippetDetailTest(TestCase):
def test_should_resolve_snippet_detail(self):
found = resolve(“/snippets/1/”)
self.assertEqual(snippet_detail, found.func)
class EditSnippetTest(TestCase):
def test_should_resolve_snippet_edit(self):
found = resolve(“/snippets/1/edit/”)
self.assertEqual(snippet_edit, found.func)