teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問java scriptでAPI画像にLINKを貼りたいです

編集履歴

質問編集履歴

2

codeを押して書き換え実行

2017/09/08 00:39

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,56 +1,6 @@
1
1
  １）以下のようにして画像表示までできています。（現状）
2
2
 
3
- <!DOCTYPE html>
4
-
5
- <html>
3
+ ```ここに言語を入力
6
-
7
- <head>
8
-
9
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
10
-
11
- <meta charset="utf-8" />
12
-
13
- <meta name="viewport" content="width=480">
14
-
15
- <title>ホットペッパーグルメサーチ</title>
16
-
17
- <!-- <link href="hotpeppersearch.css" rel="stylesheet">-->
18
-
19
- <script>
20
-
21
- var displayPanel;
22
-
23
-
24
-
25
- var infoPanel;
26
-
27
- var apikey = "";
28
-
29
- var serverUrl = "http://webservice.recruit.co.jp/hotpepper/gourmet/v1/"
30
-
31
- + "?range=3&format=jsonp&callback=createShopList";
32
-
33
-
34
-
35
- window.onload = appInit;
36
-
37
-
38
-
39
- function appInit(){
40
-
41
- displayPanel = document.getElementById("displayPanel");
42
-
43
-
44
-
45
- infoPanel = document.getElementById("infoPanel");
46
-
47
- navigator.geolocation.getCurrentPosition(showLocation, locationError);
48
-
49
- }
50
-
51
-
52
-
53
-
54
4
 
55
5
  function showLocation(position){
56
6
 
@@ -114,15 +64,15 @@
114
64
 
115
65
 
116
66
 
117
- var shop = shops[i];
67
+ var shop = shops[i];
118
68
 
119
69
  var shopName = shop.name;
120
70
 
121
- var genreName = shop.genre.name;
71
+ var genreName = shop.genre.name;
122
72
 
123
73
  var budget = shop.budget.name;
124
74
 
125
- var access = shop.access;
75
+ var access = shop.access;
126
76
 
127
77
  var shopUrl = shop.urls.pc;
128
78
 
@@ -136,15 +86,13 @@
136
86
 
137
87
 
138
88
 
139
- var panel = document.createElement("div");
89
+ var panel = document.createElement("div");
140
90
 
141
91
 
142
92
 
143
93
 
144
94
 
145
95
  var photobox = document.createElement("div");
146
-
147
- //var photobox1 = document.createElement("div");
148
96
 
149
97
 
150
98
 
@@ -154,25 +102,23 @@
154
102
 
155
103
  var image = document.createElement("img");
156
104
 
157
- var link = document.createElement("a");
105
+ // var link = document.createElement("a");
158
106
 
159
107
 
160
108
 
161
109
 
162
110
 
163
- image.src = imageUrl;
111
+ image.src = imageUrl;
164
112
 
165
113
 
166
114
 
167
- namebox.appendChild(document.createTextNode(shopName));
115
+ namebox.appendChild(document.createTextNode(shopName));
168
116
 
169
117
  photobox=document.getElementById('photobox');
170
118
 
171
- //lin1k=document.getElementById('link');
119
+
172
120
 
173
- photobox.appendChild(link);
121
+ photobox.appendChild(image);
174
-
175
- link.appendChild(image);
176
122
 
177
123
  // photobox.appendChild(namebox);
178
124
 
@@ -228,6 +174,12 @@
228
174
 
229
175
  </html>
230
176
 
177
+ ```
178
+
179
+
180
+
181
+
182
+
231
183
 
232
184
 
233
185
  ２）（質問事項内容） この表示された画像に、自動で link を貼って関連ページに行けるようにしたいのですが、そのリンクの作り方を教示ください。 以上です

1

動作の全文を入れてみました。

2017/09/08 00:39

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,5 +1,97 @@
1
1
  １）以下のようにして画像表示までできています。（現状）
2
2
 
3
+ <!DOCTYPE html>
4
+
5
+ <html>
6
+
7
+ <head>
8
+
9
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
10
+
11
+ <meta charset="utf-8" />
12
+
13
+ <meta name="viewport" content="width=480">
14
+
15
+ <title>ホットペッパーグルメサーチ</title>
16
+
17
+ <!-- <link href="hotpeppersearch.css" rel="stylesheet">-->
18
+
19
+ <script>
20
+
21
+ var displayPanel;
22
+
23
+
24
+
25
+ var infoPanel;
26
+
27
+ var apikey = "";
28
+
29
+ var serverUrl = "http://webservice.recruit.co.jp/hotpepper/gourmet/v1/"
30
+
31
+ + "?range=3&format=jsonp&callback=createShopList";
32
+
33
+
34
+
35
+ window.onload = appInit;
36
+
37
+
38
+
39
+ function appInit(){
40
+
41
+ displayPanel = document.getElementById("displayPanel");
42
+
43
+
44
+
45
+ infoPanel = document.getElementById("infoPanel");
46
+
47
+ navigator.geolocation.getCurrentPosition(showLocation, locationError);
48
+
49
+ }
50
+
51
+
52
+
53
+
54
+
55
+ function showLocation(position){
56
+
57
+
58
+
59
+ infoPanel.textContent = "現在位置(" + position.coords.latitude + "-" +
60
+
61
+ position.coords.longitude + ") 付近のお店";
62
+
63
+
64
+
65
+ var uri = serverUrl + "&key=" + apikey;
66
+
67
+ uri += "&lat=" + position.coords.latitude
68
+
69
+ uri += "&lng=" + position.coords.longitude
70
+
71
+
72
+
73
+ var script = document.createElement("script");
74
+
75
+ script.src = uri;
76
+
77
+ displayPanel.appendChild(script)
78
+
79
+ }
80
+
81
+
82
+
83
+
84
+
85
+ function locationError(error){
86
+
87
+ infoPanel.textContent = error.message
88
+
89
+ }
90
+
91
+
92
+
93
+
94
+
3
95
  function createShopList(json){
4
96
 
5
97
 
@@ -22,15 +114,15 @@
22
114
 
23
115
 
24
116
 
25
- var shop = shops[i]; //ここで読み込んだデーターが入力されている
117
+ var shop = shops[i];
26
118
 
27
119
  var shopName = shop.name;
28
120
 
29
- var genreName = shop.genre.name;//ここで読み込んだデーターが入力されている
121
+ var genreName = shop.genre.name;
30
122
 
31
123
  var budget = shop.budget.name;
32
124
 
33
- var access = shop.access;//ここで読み込んだデーターが入力されている
125
+ var access = shop.access;
34
126
 
35
127
  var shopUrl = shop.urls.pc;
36
128
 
@@ -44,7 +136,7 @@
44
136
 
45
137
 
46
138
 
47
- var panel = document.createElement("div"); //入力位置を作っている・・divは、panel と呼ばれている
139
+ var panel = document.createElement("div");
48
140
 
49
141
 
50
142
 
@@ -52,6 +144,8 @@
52
144
 
53
145
  var photobox = document.createElement("div");
54
146
 
147
+ //var photobox1 = document.createElement("div");
148
+
55
149
 
56
150
 
57
151
  var namebox = document.createElement("div");
@@ -60,23 +154,25 @@
60
154
 
61
155
  var image = document.createElement("img");
62
156
 
63
- // var link = document.createElement("a");
157
+ var link = document.createElement("a");
64
158
 
65
159
 
66
160
 
67
161
 
68
162
 
69
- image.src = imageUrl; //これがないと画像でない
163
+ image.src = imageUrl;
70
164
 
71
165
 
72
166
 
73
- namebox.appendChild(document.createTextNode(shopName)); //これがないと名称が出ない
167
+ namebox.appendChild(document.createTextNode(shopName));
74
168
 
75
169
  photobox=document.getElementById('photobox');
76
170
 
77
-
171
+ //lin1k=document.getElementById('link');
78
-
172
+
79
- photobox.appendChild(image);
173
+ photobox.appendChild(link);
174
+
175
+ link.appendChild(image);
80
176
 
81
177
  // photobox.appendChild(namebox);
82
178