年齢認証なしでLINEアカウント共有アプリ🌾

年齢認証できないときはおすすめ

See the Pen Untitled by John Doe (@04) on CodePen.

リンクをコピーを押してURLを入力してね

<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
  <div id="app">
    <h1>{{message}}</h1>

    <input type="url" v-model="url" placeholder="https://line.me/ti/p/********">
    <input type="text" v-model="id" placeholder="ID">
    <button @click="doSomething">共有する</button>
    <p v-if="id">このURLをお友達に教えてあげてね！</p>
    <a v-if="id" :href="'https://ine.deno.dev/' + id" target="_blank">https://ine.deno.dev/{{ id }}</a>
    <button v-if="id" @click="copy">コピー</button>
  </div>
</template>

<script>
function copyToClipboard(text){
  // テキストコピー用の一時要素を作成
  const pre = document.createElement('pre');

  // テキストを選択可能にしてテキストセット
  pre.style.webkitUserSelect = 'auto';
  pre.style.userSelect = 'auto';
  pre.textContent = text;

  // 要素を追加、選択してクリップボードにコピー
  document.body.appendChild(pre);
  document.getSelection().selectAllChildren(pre);
  const result = document.execCommand('copy');

  // 要素を削除
  document.body.removeChild(pre);

  return result;
}
  
export default {
  data() {
    return {
      message: '年齢認証なしでLINEアカウント共有！',
      url: '',
      id: ''
    };
  },
  methods: {
    doSomething() {
      if (!this.url) return
      if (!this.id) this.id = Math.random().toString(16).slice(-4)
      fetch('https://ine.deno.dev/' + this.id, {method: 'POST', body: this.url})
    },
    copy() {
      copyToClipboard('https://ine.deno.dev/' + this.id)
      Toastify({
        text: "コピーしました！"
      }).showToast();
    }
  }
};
</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
  
  #app > * {
    margin: 8px;
  }

a,
button {
  color: #4fc08d;
}

button {
  background: none;
  border: solid 1px;
  border-radius: 2em;
  font: inherit;
  padding: 0.75em 2em;
}
</style>