diff --git a/ocb.js b/ocb.js
new file mode 100644
index 0000000..3c623e6
--- /dev/null
+++ b/ocb.js
@@ -0,0 +1,111 @@
+document.addEventListener("DOMContentLoaded", ()=>{
+                /*const scene = document.querySelector('a-scene');
+                if (!scene){
+                  console.error("not found")
+                  return; 
+                }  
+                
+                scene.addEventListener('loaded', () => {
+                 initConn();
+    });*/
+     
+                var place;	// あとでcsvから読み込まれて配列になる
+                var sky = document.getElementById("sky");		// 360画像
+                var kago = document.getElementById("basket");	// 球の入れ物
+                var cam = document.getElementById("camera");	// カメラ
+                var dir = "image/";				// 画像格納ディレクトリ
+                var inirot = {};					// カメラの初期の向き
+                /*var connect = document.getElementById("connect");*/
+                /*var conn, PORT = 8888, server = location.hostname||"localhost"; 
+                var conn;
+     
+                /*function initConn() {*/
+                /*try {
+                     conn = new Websocket('ws://' + server + ':' + PORT + '/');
+                     conn.onopen = function() {
+                      console.log("websocket connection established"); 
+                       };
+                     conn.onerror = function(err) {
+                     alert('WebSocket failure:' + err);
+                      };
+                     conn.onmessage = function(ev) {
+        		     /*info.textContent = ev.data;*/
+                     /*console.log("Message from server" + ev.data)
+        	          };
+                     }catch(err){
+                     alert("creation error" , + err.message);
+                     }    
+                    //}*/
+                
+                function addSphere(attr) {	// CSVの該当行の位置に球を配置する
+            	// photo,color,radius,opacity,x,y,z,next
+            	console.log(attr);
+            	let xyz = `${attr.x} ${attr.y} ${attr.z}`;
+            	/*
+            	let text = document.createElement("a-text");
+            	kago.appendChild(text);
+            	text.setAttribute("position", xyz);
+            	text.setAttribute("value", attr.next);
+            	text.setAttribute("value", "あいうえabcdかきく");
+            	*/
+            	let tama = document.createElement("a-sphere");
+            	kago.appendChild(tama);
+            	console.log(`x y z=${xyz}`)
+            	tama.setAttribute("color", attr.color)
+            	tama.setAttribute("opacity", attr.opacity);
+            	tama.setAttribute("radius", attr.radius);
+            	tama.setAttribute("position", xyz);
+            	tama.addEventListener("click", moveStage);
+            	tama.setAttribute("next", attr.next);
+                }
+                
+                console.log("sphere設置")
+                
+                function setPlace(target) {
+           	for (let e of document.querySelectorAll("#basket > *")) {
+            	    e.remove();		// 前の場所に設置した球をすべて消す
+            	}
+                
+            	sky.setAttribute("src", dir+target);	// 新しい場所の360度写真へ
+            	cam.setAttribute("rotation", inirot[target]);
+            	console.log(`----------${target}`);
+            	console.log(inirot[target]);
+            	for (let i in place) {
+            	    if (place[i].photo == target) {	// その場所の定義を
+            		addSphere(place[i]);		// CSVデータから全て読んで
+            	    }
+            	}
+                }
+                function moveStage(e) {
+            	setPlace(e.target.getAttribute("next"));
+                }
+                function prepareCSV() {
+            	fetch("camera.csv")
+            	    .then((response) => response.text()).then((csv) => {
+            		let rot = new CSV(csv, {header: true}).parse();
+            		for (let row of rot) {
+            		    inirot[row.photo] = `${row.rotX} ${row.rotY} ${row.rotZ}`;
+            		}
+            	    });
+            	fetch("picture.csv")
+            	    .then((response) => response.text()).then((csv) => {
+            		place = new CSV(csv, {header: true}).parse();
+            		//var x = Math.floor(Math.random()*place.length)             //sortとRubyで言うシャッフル関数を使えば、使われた配列を削除していくためダブリがなくなる
+            		if (place[2].photo.match(/\.jpg$/)) {　　　　　　　　　　　//将来的にはこっちに変更したい
+            			//let photo = place.photoreplace(/.*\?/, "")       //この部分の最初の方でrand選びをすればいいのでは？
+            			setPlace(place[2].photo)
+            		} else {
+            			setPlace("onegai_gomen_man.png")		// 最初の写真
+            		}
+            	    });
+                }
+                
+                console.log("csvまで")
+                
+                let s = document.createElement("script");
+                s.setAttribute("src", "https://www.yatex.org/libcache/knrz/csv.min.js");
+                s.addEventListener("load", prepareCSV);
+                document.querySelector("head").appendChild(s);
+            });
+         
+        console.log("last")