反復練習と発信でBKB力を鍛える (ﾌﾞﾝﾌﾞﾝ)

## 人間も負けていられない

ChatGPTの影響はすごいですね。毎日ネットには新しい使い方だのプロンプトテンプレートだの、**世の中からなくなる仕事100選**みたいな記事が雨後の筍のように出ています。

先日もこんなTweetがニュースになってました。


https://twitter.com/BKBbunbun/status/1654056725987852288

**バイク川崎バイク**（BKB）と言えば、「**なんでも『BKB』で表現しちゃう**」でお馴染みのピン芸人さんです。

<iframe height="300" src="https://www.youtube.com/embed/rsGcxSyXseE" title="結婚式で使えるBKB #short #結婚式 #BKB" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

ユーモア・センスの領域にも生成系AIの影響が・・私たちも**ウカウカしてられない**ですね。

さてこの **B K B** というフォーマットは、改めてまじまじと見ると
* ３行で事象・状況を伝える
* 短文で構成し、インパクトを残す
* **B**が反復するおかしみと、ワードチョイスの難しさ

など、 **語彙力のトレーニング**に使えそうです。

また、**表現力を高める**には、積極的に**アウトプット**（**発信**）をしていくことが有効なようです。

https://mba.globis.ac.jp/careernote/1331.html

トレーニング＆アウトプットのイメージはこんな感じでしょうか。

![plan.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480342/e92b7dc0-900a-1109-97f1-bdfdb9fdcdb4.png)

早速やっていきましょう。

## 作ったやつ
### 環境
・Vue.js
・axios
・Netlify
・QR コード ジェネレーター（api.qrserver.com）




## つくりかた
### 0．イメージ

下図のようなやつを作っていきます。

![ExeBKB.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480342/41007465-ed05-4808-7ff5-90978ddd6c11.png)

やりたいことは以下の3つです。
1. インプット欄に入力して、**登録**（**ﾋｨｱ**）ボタンを押すとストックできる。
2. Twitterへのシェアボタンをつける。
3. QRコード生成ができる。

### 1．実装

シンプルなページ構成をサクッと実装できる **Vue.js** を使用します。
フォームに入力した値をマージして、リストとして入力欄の下に表示していきます。

<details><summary>html コード例</summary>

```html:index.html
<!DOCTYPE html>
<html lang="ja" >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>ExerciseBKB</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="https://platform.twitter.com/widgets.js" async></script>
  <style>
    #qr-container {
      display: flex;
      flex-direction: column;
      align-items: left;
      margin-top: 20px;
    }
    #qr-container img {
      max-width: 150px;
    }
  </style>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <h2>&#128526; ExerciseBKB &#128526;</h2>
  <div id="app">
    <input v-model="input1" type="text" placeholder="B !!">
    <input v-model="input2" type="text" placeholder="K !!">
    <input v-model="input3" type="text" placeholder="B !!">
    <button @click="register">ﾋｨｱ</button>
    <ul>
      <li v-for="(item, index) in items">
      <button @click="shareOnTwitter(item)">TWEET</button>
      <button @click="generateQRCode(item)">QR</button>
        {{ item }}
      </li>
    </ul>
    <div id="qr-container"><BR>
      <img v-if="qrCode" :src="qrCode" alt="QR Code">
    </div>
      <br><br>  <button onclick="window.location.reload();">clear</button> 
  </div>
  <script src="script.js"></script>
</body>
</html>
```

</details>

QRコードの生成は、**axios**で``api.qrserver.com``を呼び、返されたQRコード画像を``v-if``で表示しています。

https://goqr.me/api/


<details><summary>JavaScript コード例</summary>

```JavaScript:script.js
new Vue({
  el: '#app',
  data: {
    input1: '',
    input2: '',
    input3: '',
    items: [],
    qrCode: '',
    qrCodeIndex: -1
  },
  methods: {
    register() {
      if (this.input1 && this.input2 && this.input3) {
        const concatenatedValue = `${this.input1}\u3000${this.input2}\u3000${this.input3}`.trim();
        this.items.push(concatenatedValue);
        this.input1 = '';
        this.input2 = '';
        this.input3 = '';
      }
    },
    generateQRCode(item, index) {
      const apiUrl = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(item)}`;
      axios.get(apiUrl, { responseType: 'blob' })
        .then(response => {
          const qrCodeUrl = URL.createObjectURL(response.data);
          this.qrCode = qrCodeUrl;
          this.qrCodeIndex = index;
        })
        .catch(error => {
          console.error('QRコードの生成に失敗しました', error);
        });
    },
    shareOnTwitter(item) {
    const twitterShareUrl = `https://twitter.com/share?text=${encodeURIComponent(item)}　BKB %F0%9F%98%8E ﾋｨｱ!!!&url=exbkb.netlify.app&hashtags=BKB,ExerciseBKB`;
    window.open(twitterShareUrl);
    }
  }
});
```

</details>

### 2．公開

**Netlify**を使って、Webアプリとして公開しましょう。

https://qiita.com/niihara_megumu/items/db8c53f0f5de9f377976

Netlifyは、静的ウェブページを**無料でホスティング**できるサービスです。
作成したコード（テキストファイル）をドラッグ＆ドロップするだけで**簡単にデプロイ**できます。

試しにデータを登録してみると、**発信用**のTwitter、QRコード生成の**ボタン**と共に入力結果が表示できています。

![ExeBKB_data.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480342/8ab89889-5be5-2360-d9b0-598211f5a67e.png)


### 3．発信
#### Twitter投稿

**出来の良い作品**は、TweetボタンからTwitterへの投稿ができます。
引数として**ハッシュタグやサイトURLの追加**も可能です。

```JavaScript:Twitterシェア
shareOnTwitter(item) {
const twitterShareUrl = `https://twitter.com/share?text=${encodeURIComponent(item)}　BKB %F0%9F%98%8E ﾋｨｱ!!!&url=exbkb.netlify.app&hashtags=BKB,ExerciseBKB`;
window.open(twitterShareUrl);
```

![sample_tweet.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480342/6afac4f2-8c15-169d-2c79-738cb0e6eb4a.png)


#### QRコード作成

Twitterでの**公開に抵抗を感じるような作品**ができた場合は、QRコードを生成して、見てほしい人にそっと送りましょう。


![sample_QR.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480342/116a9233-21af-d8cc-dae8-9c3696e3c900.png)



## どうだったか

ジャストアイデアで作ってみたアプリですが、結構**っぽい**ものに仕上がってますね！
楽しく使ってもらえたら僥倖でございます。

https://exbkb.netlify.app/

### ChatGPTにも聞いてみた

![BKB_GPT2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480342/ad0840b6-6a14-f28a-e9f1-ccc5d452821a.png)

なかなかやるじゃん！