update

MORIMOTO520212 · MORIMOTO520212 · commit af2dd62cbb30 · 2024-02-25T17:14:11.000+09:00
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue</title>
+    <title>RECIPE AI</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.6.7",
     "openai": "^4.28.0",
     "vue": "^3.4.19"
   },
diff --git a/src/App.vue b/src/App.vue
@@ -1,30 +1,25 @@
 <script setup>
-import HelloWorld from './components/HelloWorld.vue'
+import { ref } from 'vue';
+
+import { getImage } from './features/getImage';
+const searchQuery = ref(''); // 検索キーワード変数
+const thumbnailUrl = ref(''); // サムネイルURL変数
+
+// サムネイルURLを取得する
+const getThumbnailUrl = async () => {
+  let url = await getImage(searchQuery.value);
+  console.log(url);
+  thumbnailUrl.value = url;
+};
 </script>
 
 <template>
   <div>
-    <a href="https://vitejs.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
-    </a>
+    <label>Wikimediaから画像を取得する</label>
+    <input type="text" v-model="searchQuery" />
+    <input type="button" value="get image" @click="getThumbnailUrl()" />
+    <p>result: {{ thumbnailUrl }}</p>
   </div>
-  <HelloWorld msg="Vite + Vue" />
 </template>
 
-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
-</style>
+<style scoped></style>
diff --git a/src/features/getImage/index.js b/src/features/getImage/index.js
@@ -0,0 +1,22 @@
+import axios from 'axios';
+
+export const getImage = async (query) => {
+  // query 検索ワード
+  const result = await axios.get('https://en.wikipedia.org/w/api.php', {
+    params: {
+      origin: '*',
+      action: 'query',
+      prop: 'pageimages',
+      gsrsearch: query,
+      generator: 'search',
+      pithumbsize: 300,
+      format: 'json',
+    },
+    headers: {
+      withCredentials: false,
+      'Access-Control-Allow-Credentials': false,
+    },
+  });
+
+  return result.data.query;
+};
