朝活149日目 GW最終日と潮汐表
GWも最終日ー
GW中は友人と出かけたのと飲みに行ったぐらいで家に引きこもっていました。
私は人混みが苦手なので、あまりこういう時期は外に出ません。
昨日も飲みのお誘いありましたが、休肝日！っと決めていたので断りました。。。本当はもうご飯の準備が始まってたので、シラフで二次会から合流が面倒だっただけですけど。。。
昼間は7days to dieがセールしてた時にネットの友達に進めたら数名かってくれて、一人がどハマり、朝から晩までやってます。
あとはオクトパストラベラーズ2？が半額になっていて、前から気になっていたので購入。
普段オンライン要素のないゲームはしないのですが、昔のドットの感じ、PVで好きな声の声優さんが中の人やっていたので購入しました！
いやー
いい声ですねー
普段悪役のイメージですが主人公。
と言っても復讐者ですけど。
中田譲治さんと言うのか！
普段中の人の名前とかは全然覚えてないので初めて知った。。。
さてさてさーて
今日は潮汐表をカスタムする
と言っても今はまだ箱からはみ出しちゃってちゃんと表示できてないんだけど。。。
画像のサイズに合わせるかねー
ちっちゃいんだよねー
Today消したらまだ少しはみやすそう。
まあ実際満潮と干潮の時間と今日が何潮でその時どんな感じで満ち引きするかわかればいい。。。
右のデフォルト存在してる箱の使い道もないからそこに日付、潮の時間書こうかなー？
いや、後々入れたい情報ある気もするから一旦そのままにしとこう。
箱のサイズくらいいつでも変えれるし
潮汐の表の横の余白もいっぱいあるしそっちにだそう
この画像の左下にあるような、満潮、干潮の時間、潮位を記述した表を、画像の左側に配置したいです。 現在のコードを書き換えてください。
export default function Chart() {
return (
<React.Fragment>
<div style={{ width: '100%', height: '100%', overflow: 'hidden', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<img style={{ height: '100%', objectFit: 'contain' }} src="https://api.tide736.net/tide_image.php?pc=28&hc=9&yr=2024&mn=5&dy=2&rg=day&w=768&h=512&lc=blue&gcs=cyan&gcf=blue&ld=on&ttd=on&tsmd=on" alt="Tide chart" />
</div>
</React.Fragment>
);
}import React from 'react';
import Box from '@mui/material/Box';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Title from './Title';
export default function Chart() {
return (
<React.Fragment>
<Title>Today's Tide</Title>
<Box sx={{ display: 'flex', width: '100%', height: '100%', overflow: 'hidden' }}>
<Box sx={{ width: '30%', p: 2, borderRight: '1px solid #ccc' }}>
<Table size="small" aria-label="Tide times">
<TableHead>
<TableRow>
<TableCell>Type</TableCell>
<TableCell>Time</TableCell>
<TableCell>Height</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>満潮</TableCell>
<TableCell>06:23</TableCell>
<TableCell>101.9cm</TableCell>
</TableRow>
<TableRow>
<TableCell>干潮</TableCell>
<TableCell>11:57</TableCell>
<TableCell>37cm</TableCell>
</TableRow>
<TableRow>
<TableCell>満潮</TableCell>
<TableCell>14:47</TableCell>
<TableCell>89.9cm</TableCell>
</TableRow>
<TableRow>
<TableCell>干潮</TableCell>
<TableCell>22:16</TableCell>
<TableCell>37cm</TableCell>
</TableRow>
</TableBody>
</Table>
</Box>
<Box sx={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<img style={{ height: '100%', objectFit: 'contain' }} src="https://api.tide736.net/tide_image.php?pc=28&hc=9&yr=2024&mn=5&dy=2&rg=day&w=768&h=512&lc=blue&gcs=cyan&gcf=blue&ld=on&ttd=on&tsmd=on" alt="Tide chart" />
</Box>
</Box>
</React.Fragment>
);
}
このAPIを叩いて値を拾います。 上記のコードを書き換えてください。
$ curl -L "https://api.tide736.net/get_tide.php?pc=45&hc=2&yr=2023&mn=5&dy=1&rg=day" | jq '.tide.chart."2023-05-01"'
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 300 100 300 0 0 4218 0 --:--:-- --:--:-- --:--:-- 4225
100 9359 0 9359 0 0 58130 0 --:--:-- --:--:-- --:--:-- 58130
{
"sun": {
"astro_twilight": [
"04:02",
"20:23"
],
"regular_twilight": [
"05:04",
"19:20"
],
"rise": "05:30",
"midline": "12:12",
"set": "18:54"
},
"moon": {
"brightness": "79.1",
"age": "10.9",
"title": "中潮",
"rise": " 1日 14:38",
"midline": " 1日 21:10",
"set": " 2日 03:34",
"name": null
},
"edd": [
{
"time": "09:48",
"unix": 1682902080000,
"cm": 78.2000000000000028421709430404007434844970703125
},
{
"time": "21:55",
"unix": 1682945700000,
"cm": 54.7999999999999971578290569595992565155029296875
}
],
"flood": [
{
"time": "03:43",
"unix": 1682880180000,
"cm": 172.900000000000005684341886080801486968994140625
},
{
"time": "15:41",
"unix": 1682923260000,
"cm": 167.599999999999994315658113919198513031005859375
}
],
"tide": [
{
"time": "00:00",
"unix": 1682866800000,
"cm": 102.900000000000005684341886080801486968994140625
},
{
"time": "00:20",
"unix": 1682868000000,
"cm": 112
},
まずは、上記のAPIからデータを取得する関数を作成し、そのデータを元にチャートを描画するReactコンポーネントを更新する方法を説明します。まず、APIからデータをフェッチする非同期関数を作成します。これは、Reactの`useEffect`フック内で呼び出されます。
APIからデータを取得する関数
const fetchTideData = async (date) => {
const response = await fetch(`https://api.tide736.net/get_tide.php?pc=45&hc=2&yr=2023&mn=5&dy=${date}&rg=day`);
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
};コンポーネントの更新
次に、`Chart`コンポーネントを更新して、上記の関数を使用してデータを取得し、表示します。また、取得したデータを表示するためのテーブルを追加します。
import React, { useEffect, useState } from 'react';
import Box from '@mui/material/Box';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Title from './Title';
export default function Chart() {
const [tideData, setTideData] = useState(null);
useEffect(() => {
const loadData = async () => {
try {
const data = await fetchTideData(1); // 日付は仮に「1」を渡しています
setTideData(data);
} catch (error) {
console.error('Failed to fetch tide data:', error);
}
};
loadData();
}, []);
return (
<React.Fragment>
<Title>Today's Tide</Title>
<Box sx={{ display: 'flex', width: '100%', height: '100%', overflow: 'hidden' }}>
<Box sx={{ width: '30%', p: 2, borderRight: '1px solid #ccc' }}>
<Table size="small" aria-label="Tide times">
<TableHead>
<TableRow>
<TableCell>Time</TableCell>
<TableCell>Height (cm)</TableCell>
</TableRow>
</TableHead>
<TableBody>
{tideData && tideData.tide.map((item, index) => (
<TableRow key={index}>
<TableCell>{item.time}</TableCell>
<TableCell>{item.cm.toFixed(2)}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Box>
<Box sx={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<img style={{ height: '100%', objectFit: 'contain' }} src="https://api.tide736.net/tide_image.php?pc=28&hc=9&yr=2024&mn=5&dy=2&rg=day&w=768&h=512&lc=blue&gcs=cyan&gcf=blue&ld=on&ttd=on&tsmd=on" alt="Tide chart" />
</Box>
</Box>
</React.Fragment>
);
}説明
`useEffect` を使用してコンポーネントがマウントされた後にタイドデータをロードします。
APIから取得したタイドデータは、`tideData`ステートに格納され、テーブルで表示されます。
テーブルには、時間とそれに対応する潮の高さが表示されます。
大体今までと一緒ですねー
また新しいAPIのファイルを作りますかねー
なんて名前にしよう。
すでにChatGPTが関数名つけてくれてた！fetchTideData
採用
`https://api.tide736.net/get_tide.php?pc=45&hc=2&yr=2023&mn=5&dy=${date}&rg=week` の2023、５、date、にはデータ取得する日付を入れるようにしたいです。
APIのURLに動的な日付を挿入して、特定の日付のデータを取得するためには、日付をパラメータとして関数に渡し、その値をURLのクエリパラメータに組み込むことができます。以下はその処理を実装した例です。
APIからデータを取得する関数を更新
const fetchTideData = async (year, month, day) => {
const url = `https://api.tide736.net/get_tide.php?pc=45&hc=2&yr=${year}&mn=${month}&dy=${day}&rg=week`;
const response = await fetch(url);
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
};コンポーネントでAPI関数を使用
import React, { useEffect, useState } from 'react';
import Box from '@mui/material/Box';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell;
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Title from './Title';
export default function Chart() {
const [tideData, setTideData] = useState(null);
const currentDate = new Date(); // 現在の日付を取得
useEffect(() => {
const loadData = async () => {
try {
const year = currentDate.getFullYear();
const month = currentDate.getMonth() + 1; // JavaScriptの月は0から始まるため、+1をします
const day = currentDate.getDate();
const data = await fetchTideData(year, month, day);
setTideData(data);
} catch (error) {
console.error('Failed to fetch tide data:', error);
}
};
loadData();
}, []);
return (
<React.Fragment>
<Title>Today's Tide</Title>
<Box sx={{ display: 'flex', width: '100%', height: '100%', overflow: 'hidden' }}>
<Box sx={{ width: '30%', p: 2, borderRight: '1px solid #ccc' }}>
<Table size="small" aria-label="Tide times">
<TableHead>
<TableRow>
<TableCell>Time</TableCell>
<TableCell>Height (cm)</TableCell>
</TableRow>
</TableHead>
<TableBody>
{tideData && tideData.tide.map((item, index) => (
<TableRow key={index}>
<TableCell>{item.time}</TableCell>
<TableCell>{item.cm.toFixed(2)}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Box>
<Box sx={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<img style={{ height: '100%', objectFit: 'contain' }} src="https://api.tide736.net/tide_image.php?pc=28&hc=9&yr=2024&mn=5&dy=2&rg=day&w=768&h=512&lc=blue&gcs=cyan&gcf=blue&ld=on&ttd=on&tsmd=on" alt="Tide chart" />
</Box>
</Box>
</React.Fragment>
);
}この例では、`useEffect` フック内で `fetchTideData` 関数を呼び出す際に、現在の年、月、日を引数として渡しています。これにより、動的に日付をAPIのURLに組み込むことができ、選択した日に対応するデータを取得できます。
なんかエラー出てて動いてないけど、今日は一旦ここまでー
この記事が気に入ったらサポートをしてみませんか？