Create demo app

2019-07-16 17:53:12 +09:00 · 2019-07-16 17:53:12 +09:00 · 5692e6bf97
commit 5692e6bf97
3 changed files with 97 additions and 0 deletions
--- a/LINE_APP.png
+++ b/LINE_APP.png
--- a/index.html
+++ b/index.html
@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+  <style>
+    [v-cloak] {
+      display: none;
+    }
+  </style>
+  <title>Hello, world!</title>
+</head>
+
+<body>
+  <div id="app" v-cloak>
+    <div class="alert alert-danger" v-if="error">{{ error }}</div>
+    <div class="card w-75">
+      <div class="text-center">
+        <img v-bind:src="profile.pictureUrl" class="card-img-top">
+      </div>
+      <div class="card-body">
+        <h5 class="card-title">{{ profile.displayName }}</h5>
+        <p class="card-text">{{ profile.statusMessage }}</p>
+        <button class="btn btn-primary" onclick="toggle()">Transform!</button>
+        <button class="btn btn-primary" onclick="share()">Share</button>
+      </div>
+    </div>
+  </div>
+
+  <script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script>
+  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+    crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
+    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
+    crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
+    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
+    crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+  <script src="meetup-liff.js?a=5"></script>
+</body>
+
+</html>
--- a/meetup-liff.js
+++ b/meetup-liff.js
@ -0,0 +1,49 @@
+var defaultProfile = {
+  displayName: "Adam",
+  pictureUrl: "https://profile.line-scdn.net/0hoczsWu6VMExHCh1UxVFPG3tPPiEwJDYEP20oeGVYZns_aHMceTh6KjVePSloPHESeGp-LWECbX9p",
+  statusMessage: "Presenting in #LINE_DM!"
+}
+
+var app = new Vue({
+  el: '#app',
+  data: {
+    error: null,
+    profile: defaultProfile
+  }
+})
+
+liff.init(undefined, err => app.error = err)
+
+function toggle() {
+  if (app.profile === defaultProfile) {
+    liff.getProfile()
+      .then(profile => app.profile = profile)
+      .catch(err => app.error = err)
+  } else {
+    app.profile = defaultProfile
+  }
+}
+
+function share() {
+  liff.sendMessages([{
+    "type": "template",
+    "altText": "Check out this profile",
+    "template": {
+      "type": "buttons",
+      "thumbnailImageUrl": app.profile.pictureUrl || "https://adamu.github.io/line_dm_liff/LINE_APP.png",
+      "imageAspectRatio": "rectangle",
+      "imageSize": "cover",
+      "imageBackgroundColor": "#FFFFFF",
+      "title": app.profile.displayName,
+      "text": app.profile.statusMessage || "(no status message)",
+      "actions": [
+        {
+          "type": "uri",
+          "label": "Selfie 📸",
+          "uri": "line://nv/camera/"
+        }
+      ]
+    }
+  }])
+    .then(() => liff.closeWindow(), err => app.error = err)
+}