이 기사는 「오이시 이즈미 스키」어드벤트 캘린더 12일째 기사입니다.
이번은 중복을 신경쓰지 않고 「오이시 이즈미 스키」라고 트윗 해 가고 싶습니다.

원하는만큼 "오이시 이즈미 스키"라고 트윗 할 수있는 페이지

여기에서 부디.

Tweet 오이시 이즈미 스키 without duplicated entry
htps : // 히시 이즈미 스키. 어리석은 p. 코m/

소스 코드는 이쪽.

m19e/non-duplication-tweet
htps : // 기주 b. 코 m / m19 에 / 논 - 즈 p ㅃ 카치 온 - ぇ 에 t

여러 주의

이 페이지는 Vue.js로 만들어 Heroku에서 호스팅되지만,
양쪽 모두 세세한 설명은 하고 있지 않으므로 미리 양해 바랍니다.

공식 사이트↓
Vue.js - The Progressive JavaScript Framework

Heroku에의 배포는 이쪽을 참고로 했습니다↓
Vue.js의 응용 프로그램을 신속하게 Heroku에 게시

무엇을 하고 있는가

template와 methods는 이런 느낌.

OhishiIzumiSuki.vue

<template>
  <div class="wrapper">
    <h1>Tweet {{ msg }} without duplicated entry</h1>
    <div class="tweet-button-wrapper">
      <a class="tweet-button" @click="setUrl(msg)" :href="url" target="_blank">{{ msg }}</a>
    </div>
  </div>
</template>

OhishiIzumiSuki.vue

methods: {
    randomRange(start, end) {
      return Math.round(Math.random() * (end - start)) + start
    },
    generateZWSP(width, result = '') {
      if (!width) return result
      return this.generateZWSP(--width, result += '\u200B')
    },
    insertZWSP(text, result = '') {
      if (!text) return result
      result += text[0] + this.generateZWSP(this.randomRange(0, 20))
      return this.insertZWSP(text.slice(1), result)
    },
    countBytes(text) {
      return encodeURIComponent(text).replace(/%../g,"x").length
    },
    setUrl(text) {
      let content = this.insertZWSP(text)
      this.url = "https://twitter.com/intent/tweet?text=" + encodeURI(content + "\nhttps://ohishi-izumi-suki.herokuapp.com")
      console.log(`「${content}」は${content.length}文字(${this.countBytes(content)}bytes)です`)
    },
  },

크게 나누어 세 가지를하고 있습니다.

오이시 이즈미 스키에 제로 폭 스페이스 (ZWSP)를 끼운다

트윗 URL 붙여 버튼에 넣기

콘솔에 「오이시 이즈미 스키」의 문자수, 바이트수를 표시한다

이상! 간단하네요.

1. 제로 폭 스페이스를 사이에 둔다

제로폭 스페이스(zero width space)란?

0 너비 공간 (영어 0, 0 : zero width space, ZWSP)은 컴퓨터의 조판에 사용되는 숨겨진 문자로 문서 처리 시스템에 대한 단어 구분을 나타내는 데 사용됩니다.
Wikipedia - 제로 폭 공간

🤔

요컨대 「표시되지 않지만 제대로 존재하고 있는 폭이 없는 스페이스」라고 하는 일입니다.
제로폭 스페이스(이하 ZWSP)를 사이에 두는 것으로 외형은 같은 텍스트에서도 중복없이 트윗할 수 있습니다.



이미지와 같이 외형은 같아도 문자수 바이트수가 다릅니다.
이것으로 연투해도 화내지 않는다. 했어!

    randomRange(start, end) {
      return Math.round(Math.random() * (end - start)) + start
    },
    generateZWSP(width, result = '') {
      if (!width) return result
      return this.generateZWSP(--width, result += '\u200B')
    },
    insertZWSP(text, result = '') {
      if (!text) return result
      result += text[0] + this.generateZWSP(this.randomRange(0, 20))
      return this.insertZWSP(text.slice(1), result)
    },

randomRange ()에서 0에서 20까지의 임의의 숫자를 가져옵니다.

숫자를 generateZWSP ()에 전달하고 그 수만큼 결합 된 ZWSP를 반환합니다.

insertZWSP ()로 텍스트의 머리로부터 한 문자로 만든 ZWSP를 결합해 간다

틈이 있으면 재귀하고 있습니다. 좋아하기 때문에.

generateZWSP()의 '\u200B'
유니 코드 이스케이프 시퀀스의 ZWSP입니다.

유니코드 이스케이프 시퀀스↓
#Unicode_escape_sequences 어휘 문법 - JavaScript | MDN

2. 트윗용 URL 붙여 버튼에 넣는다

트윗용 URL은 여러가지 할 수 있는 Web Intents로.
Web Intents - Twitter Developers

OhishiIzumiSuki.vue

    <div class="tweet-button-wrapper">
      <a class="tweet-button" @click="setUrl(msg)" :href="url" target="_blank">{{ msg }}</a>
    </div>

OhishiIzumiSuki.vue

    insertZWSP(text, result = '') {
      if (!text) return result
      result += text[0] + this.generateZWSP(this.randomRange(0, 20))
      return this.insertZWSP(text.slice(1), result)
    },
    setUrl(text) {
      let content = this.insertZWSP(text)
      this.url = "https://twitter.com/intent/tweet?text=" + encodeURI(content + "\nhttps://ohishi-izumi-suki.herokuapp.com")
      console.log(`「${content}」は${content.length}文字(${this.countBytes(content)}bytes)です`)
    },

insertZWSP ()로 텍스트에 ZWSP를 끼웁니다.

트윗 URL을 만들어 this.url에 대입

setURL()이 호출될 때마다 a 태그의 :href가 업데이트되고 트윗 내용이 변경됩니다.

문자 수, 바이트 수 표시

레귤레이션을 준수하기 위해 "오이시 이즈미 스키"라고 출력합니다.
중요한 정보도 함께 표시합시다.

OhishiIzumiSuki.vue

    countBytes(text) {
      return encodeURIComponent(text).replace(/%../g,"x").length
    },
    setUrl(text) {
      let content = this.insertZWSP(text)
      this.url = "https://twitter.com/intent/tweet?text=" + encodeURI(content + "\nhttps://ohishi-izumi-suki.herokuapp.com")
      console.log(`「${content}」は${content.length}文字(${this.countBytes(content)}bytes)です`)
    },

변수 확장하여 콘솔로 출력

바이트 수를 알고 싶기 때문에 countBytes ()로 계산

완성!

끝에

당연히이 페이지의 트윗은 "오이시 이즈미 스키"검색에 걸리지 않습니다.
담당 검색의 방해도되지 않으므로 안심하고 오이시 이즈미 스키 트윗 해 봅시다.



너무 많이 던지면