ry-itto · seven320 · Aug 13, 2019 · Aug 13, 2019 · Aug 13, 2019 · Aug 13, 2019
diff --git a/AR/.gitignore b/AR/.gitignore
@@ -0,0 +1,3 @@
+server/node_modules/*
+
+
diff --git a/AR/a.code-workspace b/AR/a.code-workspace
@@ -0,0 +1,7 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	]
+}
diff --git a/AR/form.html b/AR/form.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.0.5/dist/vuetify.min.css" rel="stylesheet">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
+</head>
+<body>
+  <div id="app">
+    <h1>誰でもAR名刺！！</h1>
+    <div>
+      <v-app id="inspire">
+        <v-form v-model="valid">
+          <v-container>
+            <v-row>
+              <!-- name -->
+              <v-col cols="12" md="4">
+                <v-text-field
+                  v-model="name"
+                  :rules="nameRules"
+                  :counter="30"
+                  label="name"
+                  required
+                ></v-text-field>
+              </v-col>
+
+              <!-- Belongs -->
+              <v-col cols="12" md="4">
+                <v-text-field
+                  v-model="belong"
+                  :rules="belongRules"
+                  :counter="255"
+                  label="所属"
+                  required
+                ></v-text-field>
+              </v-col>
+
+              <!-- TEL -->
+              <v-col cols="12" md="4">
+                <v-text-field
+                  v-model="tel"
+                  :rules="telRules"
+                  :counter="20"
+                  label="TEL"
+                ></v-text-field>
+              </v-col>
+
+              <!-- E-mail -->
+              <v-col cols="12" md="4">
+                <v-text-field
+                  v-model="email"
+                  :rules="emailRules"
+                  :counter="255"
+                  label="e-mail"
+                ></v-text-field>
+              </v-col>
+
+              <!-- TwitterID -->
+              <v-col cols="12" md="4">
+                <v-text-field
+                  v-model="twitterID"
+                  :counter="255"
+                  label="TwitterID"
+                  required
+                ></v-text-field>
+              </v-col>
+
+              <!-- githubID -->
+              <v-col cols="12" md="4">
+                  <v-text-field
+                    v-model="githubID"
+                    :counter="255"
+                    label="githubID"
+                  ></v-text-field>
+                </v-col>
+            </v-row>
+          </v-container>
+        </v-form>
+        <v-container fluid grid-list-md>
+          <v-layout wrap>
+            <v-flex xs12 md6>
+              <v-textarea
+                v-model="description"
+                solo
+                name="input-7-4"
+                label="Description"
+                id="description"
+              ></v-textarea>
+              <div id="send-button" class="my-2">
+                <v-btn @click="getForm(); getQRcode()">QRコード作成</v-btn>
+              </div>
+            </v-flex>
+          </v-layout>
+        </v-container>
+        <!-- <v-list-item v-if="QRimagebase64.length > 0">
+          <v-list-item-content>
+            <v-list-item-title>debug-url</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+        <p v-if="QRimagebase64.length > 0">{{ debug_QRurl }}</p> -->
+        <v-list-item v-if="QRimagebase64.length > 0">
+          <v-list-item-content>
+            <v-list-item-title>URL</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+        <p v-if="QRimagebase64.length > 0">{{ QRurl }}</p>
+        <div style="margin:30px">
+          <v-img v-if="QRimagebase64.length > 0" :src="QRimagebase64" :aspect-ratio="1" :max-width="300"></v-img>
+        </div>
+      </v-app>
+    </div>
+  </div>
+
+  <script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.0.5/dist/vuetify.min.js"></script>
+  <script src="form.js"></script>
+</body>
+
+</html>
diff --git a/AR/form.js b/AR/form.js
@@ -0,0 +1,80 @@
+//display urlは名刺を表示するためのページ
+const display_url = "https://seven320.github.io/AR/profile.html"
+const local_url = `file:///Users/kenkato/html_css/AR/profile.html`
+
+//base url　はQRのコードを手に入れるローカルサーバーにアクセス
+const base_url = "https://00ea0ebe.ngrok.io" // use ngrok and connect local server to public server
+
+
+var app = new Vue({
+  el:'#app',
+  vuetify: new Vuetify(),
+  data: () => ({
+    valid: false,
+    name: "name",
+    belong: "university",
+    tel: "xx-xxxx-xxxx",
+    email: "xxxxxxxx@google.co.jp",
+    twitterID: "@",
+    githubID: "",
+    description: "",
+    debug_QRurl: "",
+    QRurl:"",
+    get_encode_QRurl:"",
+    QRimagebase64:"",
+    nameRules:[
+      v => !!v || "Name is required",
+      v => v.length <= 30 || "Name must be less than 30 characters",
+    ],
+    belongRules:[
+      v => !!v || "belongs is required",
+      v => v.length <= 255 || "Name must be less than 255 characters",
+    ],
+    telRules:[
+      v => !!v || "TEL is required",
+      v => v.length <= 20 || "TEL must be less than 20 characters"
+    ],
+    emailRules:[
+      v => !!v || "e-mail is required",
+      v => v.length <= 255 || "e-mail must be less than 255 characters"
+    ]
+  }),
+  created: function(){
+    this.displayConsole();
+
+  },
+  methods:{
+    displayConsole: function(){
+      console.log("successs load")
+    },
+    getForm: function(){
+      if (this.name.length==0){
+        alert("name is required")
+      } else if(this.belong.length==0){
+        alert("belong is required")
+      } else if(this.tel.length==0){
+        alert("TEL is required")
+      } else if(this.email.length==0){
+        alert("e-mail is required")
+      }
+      this.debug_QRurl = `${local_url}?query=${this.name}---${this.belong}---${this.tel}---${this.email}---${this.twitterID}---${this.githubID}---${this.description}`
+      this.QRurl = `${display_url}?query=${this.name}---${this.belong}---${this.tel}---${this.email}---${this.twitterID}---${this.githubID}---${this.description}`
+      this.get_encode_QRurl = encodeURIComponent(`${display_url}?query=${this.name}---${this.belong}---${this.tel}---${this.email}---${this.twitterID}---${this.githubID}---${this.description}`)
+      },
+    getQRcode: async function(){
+      console.log(this.getQRurl)
+      let requesturl = `${base_url}/qr/${this.get_encode_QRurl}` // for public server
+
+
+      console.log("requesturl",requesturl)
+      let response = await fetch(requesturl, {
+        method:"GET",
+      })
+      let hoge = await console.log(response)
+      let base64 = await response.text()
+      // this.QRimagebase64 = "data:image/png;base64," + base64
+      this.QRimagebase64 = base64
+      console.log("base64",base64)
+    }
+  }
+})
diff --git a/AR/marker/icon.png b/AR/marker/icon.png