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

人間も負けていられない

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

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

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

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

さてこの B K B というフォーマットは、改めてまじまじと見ると

３行で事象・状況を伝える
短文で構成し、インパクトを残す
Bが反復するおかしみと、ワードチョイスの難しさ

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

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

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

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

作ったやつ

環境

・Vue.js
・axios
・Netlify
・QR コードジェネレーター（api.qrserver.com）

つくりかた

0．イメージ

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

やりたいことは以下の3つです。

インプット欄に入力して、登録（ﾋｨｱ）ボタンを押すとストックできる。
Twitterへのシェアボタンをつける。
QRコード生成ができる。

1．実装

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

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>

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

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);
    }
  }
});

2．公開

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

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

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

3．発信

Twitter投稿

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

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);

QRコード作成

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

どうだったか

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

ChatGPTにも聞いてみた

なかなかやるじゃん！