webサービス初心者がchatGPTを使って勉強してAJBFとかいうサービス作った話①
注意事項
うp主はプログラミング初心者です
タイトルから分かる通り、このwebサービスは一部chatGPTを使用しています。生成AI反対派の方々はブラウザバックをお願いします。
AJBFの概要説明
まずこのサービスの概要を説明しておきます。
このサービスはバス画像を共有するSNSです。
これだけ聞くと今までにあったようなサービスと思われる方も多いと思いますが、このサービスはバスオタのためにあるTwitterのようなものです。
以前まではバスなどを探す時も個人のブログなどによって運営されているものをインターネット上から、もしくは有名な会社の場合はwikiwikiの掲示板(例:大阪シティバスなど)から探していました。しかし、このサービスを多くの人が利用することにより、たくさんのバス会社の車両情報をバスオタ同士で共有できるようになります。また、掲示板などでは画像の最大容量制限(通常は1MB程度)がありますが、このサービスでは5MB程度の画像でもアップロードすることができます。
早速cloudinaryアカウントを取得
cloudinaryアカウントを取得します。
基本的には他のサービスと登録関係は変わらないです。
おーるいんぐりっしゅなので気をつけてください(ｹﾃ…ﾀｽ…ｹﾃ(ｸﾞﾊｯ )
早速ChatGPTくんに聞いていくぅ
はいもうGPTくんの出番です
どうやらcloudinaryくんはRESTful APIなるものが搭載されていてJSを使用してクラウドとデータのやり取りができるのだそう。つおい
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cloudinary Image Upload</title>
</head>
<body>
<h1>Upload Image to Cloudinary</h1>
<input type="file" id="imageInput" accept="image/*">
<button id="uploadButton">Upload Image</button>
<div id="uploadedImage"></div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
document.getElementById('uploadButton').addEventListener('click', async function() {
const fileInput = document.getElementById('imageInput');
const file = fileInput.files[0];
if (!file) {
alert("Please select a file to upload");
return;
}
// Cloudinaryの設定
const cloudName = 'your_cloud_name';
const uploadPreset = 'your_upload_preset'; // 必要なら、プリセットを使ってもOK
// FormDataオブジェクトを作成
const formData = new FormData();
formData.append('file', file);
formData.append('upload_preset', uploadPreset);
try {
// 画像のアップロード
const response = await axios.post(`https://api.cloudinary.com/v1_1/${cloudName}/image/upload`, formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
});
// アップロードされた画像のURLを取得
const imageUrl = response.data.secure_url;
// 画像を表示
document.getElementById('uploadedImage').innerHTML = `<img src="${imageUrl}" alt="Uploaded Image" style="max-width: 100%;">`;
} catch (error) {
console.error("Error uploading the image", error);
}
});
</script>
</body>
</html>何っ…!
これだけのデータでここまでコードを出してくれるのかぁ…
しかも画像のURLまで取得してくれるという高機能なAPIということが判明。
画像のアップロードの際は
const response = await axios.post(`https://api.cloudinary.com/v1_1/${cloudName}/image/upload`, formData, { headers: {'Content-Type': 'multipart/form-data' } });これだけなんですわ。
コードにcloudinaryのダッシュボードから
Cloud Name
API Key
API Secret
をとってきて当てはめるだけ。
なんと恐ろしいGPTくん。
ただ、お伝えしておきますが、API Keyなどは基本的には隠しておくべきものですので、
データが惜しかったらやめておきましょう。
本当はサーバーなどに隠しておくべきものです。
うp主のような相当なドケチでもない限りやめておきましょう。
今回はこの辺で。
まだ制作途中なので何回かやる予定です
この記事が気に入ったらサポートをしてみませんか？