
本サイト JWS をリニューアルしました。

すべて一人で実装しています。

以前の vue で作成したサイトから、`next.js`に切り替え、ブログなど別ドメインで制作していたページをすべて統合し、`markdown`でブログ等書き出しを行えるようにしています。

アニメーションに注力しつつ、更新や機能面で優れたサイトになっています。

ブログ機能はすべて`markdown`で作られているため、`github`を介してバージョン管理や更新が可能になっています。


JWS Site


アニメーション、エフェクトなどを紹介するサイトを作ろうと考え、`WordPress`で作成しました。

特徴としては、`CodePen`で実行環境を用意し、アニメーションのコードをすぐに取り出せるようにしたことです。

その他、お気に入り機能や多言語化にも対応しています。

これらのコードは、本サイトの[LAB](/lab/)に移管しました。

## 外部サイトリンク

[CSS JS Animation](https://cssjsanimation.com/)


CSS JS ANIMATION


ガイアジムの公式サイトの制作をしました。

予算とスケジュールの関係で WordPress の有料テーマをカスタマイズしています。

ディレクション～リリースまで全ての工程を一人で実装しています。

## 外部サイトリンク

[GAIA GYM](https://gaiagym.com/)


GAIA GYM


総合格闘家 三浦彩佳オフィシャル Web サイトを制作しました。

もともと知り合いということもあり、応援の意味でも制作したいと申し出たところ、すぐ OK をいただけました。

全行程を一人で制作しています。

格闘家のサイトですので、「ゾンビ感、強さ、カッコよさ」をコンセプトにデザインしました。
また、YouTube でも活動されてるので、`YouTube API` を使用し、リアルタイムでデータを取得できる仕組みも取り入れています。

ブログは、アメブロ RSS より取得しています。

## 外部サイトリンク

[総合格闘家 三浦彩佳オフィシャル Web サイト](https://aya-zombie.com/)


総合格闘家 三浦彩佳オフィシャルWebサイト - AYAKA MIURA OFFICIAL WEB SITE | ONE Championship

AYAKA MIURA

AYAKA MIURA Official Web Site


JWS リニューアル前の旧サイトです。

起業した際に制作しました。

フレームワークは`vue`を採用しています。

`axios`で別ドメインの`WordPress`ブログを表示させています。


JWSリニューアル前の旧サイトです。

JWS - OLD -

Old JWS Site

LIFF を使用したアプリケーションを何か作ってみたかったので、勤怠連絡の BOT を作ってみました。

## 開発準備

フロントは、jQuery でもよかったのですが、せっかくなので Vue.js の勉強のため Vue.js で構築しています。

### Vue CLI3 をインストール

まずは、[Vue CLI3](https://cli.vuejs.org/)をインストールします。

インストール

```shell
npm install -g @vue/cli
# OR
yarn global add @vue/cli
```

作成（設定はデフォルトのままで大丈夫です）

```shell
vue create vue-liff-bot
```

パッケージのインストール

```shell
yarn install
```

### bootstrap-vue を追加

今回は、BootStrap を利用するので、BootStrap もインストール

```shell
yarn add bootstrap-vue
```

### 開発スタート

以下で開発を始めます。

```shell
yarn run serve
```

## bootstrap-vue の組み込み

`main.js`に`bootstrap-vue`を組み込みます。

```js
import Vue from 'vue';
import App from './App.vue';

// BottstrapVueの読み込み
import BootstrapVue from 'bootstrap-vue';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';

Vue.config.productionTip = false;

// BootstrapVueの使用
Vue.use(BootstrapVue);

new Vue({
  render: (h) => h(App)
}).$mount('#app');
```

## Vue ファイルの作成

### App.vue

まずは、App.vue を変更します。

```html
<template>
  <div id="app" class="pt-3 pb-3">
    <input-form :ttl="title" />
  </div>
</template>

<script>
  // inputFormをComponentとして設定
  import InputForm from '@/components/InputForm.vue';

  export default {
    name: 'app',
    components: {
      InputForm
    },
    data() {
      return {
        // titleをpropとしてComponentに渡す
        title: '勤怠連絡 BOT'
      };
    }
  };
</script>

<style>
  #app {
    color: #2c3e50;
  }
</style>
```

### InputForm.vue

続いて、InputForm.vue を作成します。

```html
<template>
  <div class="container">
    
    <h1 class="text-center pb-2">{{ ttl }}</h1>
    
    <form @submit.prevent="">
      <div class="form-group">
        <label for="name">名前</label>
        <input
          type="text"
          class="form-control"
          id="name"
          v-model="data.name"
          @change="createMessage()"
        />
      </div>
      <div class="form-group">
        <label for="reason">遅刻理由</label>
        <select
          class="form-control"
          v-model="data.reason"
          id="reason"
          @change="createMessage()"
        >
          <option v-for="(reason, index) in reasons" :key="index">
            {{ reason }}
          </option>
        </select>
      </div>
      
      <div class="form-group" v-show="data.reason == 'その他'">
        <input
          type="text"
          class="form-control"
          id="reson_other"
          @change="createMessage()"
          placeholder="その他の場合は理由を書いてください。"
          v-model="data.reason_other"
        />
      </div>
      <div class="form-group">
        <label>種別</label>
        <div class="form-check" v-for="(type, index) in types" :key="index">
          <input
            class="form-check-input"
            type="radio"
            v-model="data.schedule"
            :id="index"
            :value="type"
            :checked="index != 0 ? '' : 'checked'"
            @change="createMessage()"
          />
          <label class="form-check-label" :for="index">{{ type }}</label>
        </div>
      </div>
      
      <div class="form-group" v-show="data.schedule == '遅刻します'">
        <label>遅刻時間</label>
        <div class="form-row align-items-center">
          <div class="col-5 form-group">
            <select
              class="form-control"
              v-model="data.time1"
              @change="createMessage()"
            >
              
              <option v-for="(time, index) in createTimes(0, 12)" :key="index">
                {{ time }}
              </option>
            </select>
          </div>
          <div class="col-2 text-center form-group">
            <span>～</span>
          </div>
          <div class="col-5 form-group">
            
            <select
              class="form-control"
              v-model="data.time2"
              @change="createMessage()"
            >
              <option v-for="(time, index) in createTimes(1, 13)" :key="index">
                {{ time }}
              </option>
            </select>
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="message">メッセージ</label>
        
        <textarea
          class="form-control"
          id="message"
          rows="5"
          v-model="data.message"
        ></textarea>
      </div>
      <div class="form-group pt-2">
        <button
          class="btn btn-primary btn-lg btn-block"
          id="send"
          type="submit"
        >
          送信
        </button>
      </div>
    </form>
  </div>
</template>

<script>
  export default {
    name: 'InputForm',
    props: {
      ttl: String
    },
    data() {
      return {
        data: {
          name: '',
          reason: '',
          reason_other: '',
          schedule: '',
          time1: '',
          time2: '',
          message: ''
        },
        // 遅刻理由の中身
        reasons: ['電車遅延', '体調不良', '忘れ物', 'その他'],
        // 種別の中身
        types: [
          '遅刻します',
          '全休をいただきます',
          '午前休をいただきます',
          '午後休をいただきます'
        ],
        // メッセージのテンプレート
        text1: 'おはようございます。',
        text2: 'よろしくお願いします。'
      };
    },
    methods: {
      // 時間のオプションを配列で生成
      createTimes: function (init, to) {
        const times = [];
        for (let index = init; index < to; index++) {
          times.push(`${index * 5}分`);
        }
        return times;
      },
      // inputに変更があった場合にメッセージの作成
      createMessage: function () {
        let text, text_reson, text_schedule;

        // その他の場合は、reason_otherのデータを使用
        if (this.data.reason == 'その他') {
          text_reson = this.data.reason_other;
        } else {
          text_reson = this.data.reason;
        }

        // 遅刻の場合は時間に入力した時間を使用して生成
        if (this.data.schedule == '遅刻します') {
          text_schedule = `${this.data.time1}～${this.data.time2}ほど${this.data.schedule}`;
        } else {
          text_schedule = this.data.schedule;
        }

        // メッセージを生成
        text = `${this.text1}${this.data.name}です。${text_reson}のため${text_schedule}。${this.text2}`;

        // データに渡す
        this.data.message = text;
      }
    }
  };
</script>

<style></style>
```

`input`、`select`の変更を検知して、`data`を更新＋`message`を都度生成します。

## 完成

以下のコマンドでビルドします。

```shell
yarn run build
```

## BOT の設定

### 参考

LIFF の設定は以下の記事が大変参考になります。

- [LINE の LIFF 開発超入門 : LIFF SDK を使った Web アプリの開発](https://qiita.com/kenakamu/items/44cba247ab51b6c5ed51)
- [LINE Bot : LINE Front-end Framework を liff npm パッケージで操作](https://qiita.com/kenakamu/items/5a9cbdc32c4575e53c59)

### 設定

[https://developers.line.me/ja/docs/liff/getting-started/](https://developers.line.me/ja/docs/liff/getting-started/)を参考にして進めます。

- `アクセストークン`を作成してコピーしておく
- 一番下の`Your user ID`もコピーしておく
- `Channel Secret`も後ほど利用するので生成してコピーしておく
- `Webhook送信`は後ほど設定するので、`利用する`に設定
- `BOTのグループトーク参加`→`利用する`に設定
- `自動応答メッセージ`→`利用しない`
- `友だち追加時あいさつ`→`利用しない`

`LINEアプリへのQRコード`がありますので、LINE アプリより追加してください。

## LIFF を設定

### コードの追加

まずは、コードを追加します。

※Vue に組み込みたかったのですが、うまく動作させることができず、外部ファイルで対応しました･･･。

`public/index.html`の head に以下を追加します。

```html
<script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script>
<script src="./send.js"></script>
```

続いて、`send.js`を新規作成します。場所は、`public/send.js`です。

```javascript
window.onload = function (e) {
  // sendにclickイベントを追加
  document.getElementById('send').addEventListener('click', function () {
    // messageの中身を取得し、sendMessagesのtextに入れる
    var ms = document.getElementById('message').value;
    liff
      .sendMessages([
        {
          type: 'text',
          text: ms
        }
      ])
      .then(function () {
        window.alert('送信完了');
        // aleartでOKを押すと、自動でLIFFウィンドウが閉じる
        liff.closeWindow();
      })
      .catch(function (error) {
        window.alert('Error sending message: ' + error);
      });
  });
};
```

`liff.sendMessage`で送信します。

### 公開

`LIFF`は`https`が必要なため、わざわざサーバーを用意する必要のない`GitHub Pages`で公開します。

まずは、`build`します。

```shell
yarn run build
```

続いて

- `.gitignore`から`dist`を外す
- `github`にリポジトリを作成

```shell
git init
git add .
git commit -m 'init'
git remote add origin https://github.com/xxxxxxx/xxxxxx.git
git push -u origin master
```

- `git`に`push`した後は、`Settings`をクリック
- `GitHub Pages`の`Source`を`master branch`にして`save`

これで、`GitHub Pages`に公開されます。

公開された URL は、

`https://<ユーザー名>.github.io/<リポジトリ名>/dist/`

になります。

### LIFF の設定

まずは LIFF npm パッケージをインストールします。

```shell
npm install -g liff
```

`liff init`で初期化します。上記で取得したチャネルのアクセストークンを入れます。

```shell
liff init <アクセストークン>
```

LIFF アプリケーションの登録します。今回は`tall`を指定します。

```shell
liff add https://<ユーザー名>.github.io/<リポジトリ名>/dist/ tall
```

戻り値から LIFF ID および Accessible URL をコピーしておきます。

```shell
[LIFF ID] xxxxxxxxxxxxxxx created
accessible uri : line://app/xxxxxxxxxxxxxxxx
```

`liff send` コマンドでリンクを送付します。LINE アプリよりリンクをクリックしてテスト。上記で取得した`LIFF ID`と`Your user ID`を入れます。

```shell
liff send <LIFF ID> <Your user ID>
```

BOT より送られたリンクを確認して、フォームから送信を押してメッセージが表示されれば完了です！

## ブラッシュアップ

リンクのクリックから起動させるのではなく、BOT のリッチメニューか LIFF を起動させると、より良いでしょう。

リッチメニューの実装は以下を参考にしてください。

[https://developers.line.me/ja/docs/messaging-api/using-rich-menus/](https://developers.line.me/ja/docs/messaging-api/using-rich-menus/)

- [LINE@マネージャー](https://admin-official.line.me/)からログインして作成した BOT を選択します。

- リッチメニューより、メニューを作成します。
- `コンテンツ設定`の`リンク`を上記で取得した`Accessible URL`に設定します。

これでメニューから LIFF を起動させることができます。

## GAS の設定

### 参考

GAS の設定は以下の記事が参考になります。

- [Google Apps Script で LINE BOT つくったら 30 分で動かせた件](https://qiita.com/flyhigh/items/55c2584cf82718f47464)

- [Webhook イベントオブジェクト](https://developers.line.me/ja/reference/messaging-api/)

### 設定手順

以下の手順で GAS を設定します。

1. Google アカウントにログイン
2. Google ドライブを開く
3. `マイドライブ`をクリック
4. `その他`→`アプリを追加`→`Google Apps Script`
5. コードを記述 → 保存
6. `公開`→`ウェブアプリケーションとして導入`
7. `アプリケーションにアクセスできるユーザー`を`全員（匿名ユーザーを含む）に変更`
8. `公開`をクリックし、出てきた`現在のウェブ アプリケーションの URL`をコピーする
9. LINE Developers の対象 BOT の`Webhook URL`に先ほどコピーした GAS の URL を張り付ける

以上で GAS を利用した Webhook の設定が完了です。

## コード

スクリプトは、以下になります。

```js
//LINE Developersで取得したアクセストークンを入れる
var CHANNEL_ACCESS_TOKEN = '<LINE BOT アクセストークン>';
// 送信先のグループID
var GROUP_ID = '<グループへ参加させて set を送ると送られる>';
// グループIDを取得するためのキーワード
var SETTING_MESSAGE = 'set';

var line_reply = 'https://api.line.me/v2/bot/message/reply';
var line_push = 'https://api.line.me/v2/bot/message/push';

//ポストで送られてくるので、送られてきたJSONをパース
function doPost(e) {
  var webhook = JSON.parse(e.postData.contents).events[0];

  //返信するためのトークン取得
  var reply_token = webhook.replyToken;
  if (typeof reply_token === 'undefined') {
    return;
  }

  //送られたメッセージ内容を取得
  var message = webhook.message.text;
  var gid = webhook.source.groupId;

  // ユーザーの会話（グループIDが存在しない）
  if (typeof gid === 'undefined') {
    // 確認用メッセージの返信
    UrlFetchApp.fetch(line_reply, {
      headers: {
        'Content-Type': 'application/json; charset=UTF-8',
        Authorization: 'Bearer ' + CHANNEL_ACCESS_TOKEN
      },
      method: 'post',
      payload: JSON.stringify({
        replyToken: reply_token,
        messages: [
          {
            type: 'text',
            text: 'ご利用ありがとうございます。以下のメッセージをグループへ送信しました。'
          },
          {
            type: 'text',
            text: message
          }
        ]
      })
    });
    // グループへメッセージをpush
    UrlFetchApp.fetch(line_push, {
      headers: {
        'Content-Type': 'application/json; charset=UTF-8',
        Authorization: 'Bearer ' + CHANNEL_ACCESS_TOKEN
      },
      method: 'post',
      payload: JSON.stringify({
        to: GROUP_ID,
        messages: [
          {
            type: 'text',
            text: message
          }
        ]
      })
    });
    // グループIDを取得する
  } else if (message == SETTING_MESSAGE) {
    // キーワードが等しい場合にグループID返信する
    UrlFetchApp.fetch(line_reply, {
      headers: {
        'Content-Type': 'application/json; charset=UTF-8',
        Authorization: 'Bearer ' + CHANNEL_ACCESS_TOKEN
      },
      method: 'post',
      payload: JSON.stringify({
        replyToken: reply_token,
        messages: [
          {
            type: 'text',
            text: 'グループIDは以下の通りです。'
          },
          {
            type: 'text',
            text: gid
          }
        ]
      })
    });
  }

  return ContentService.createTextOutput(
    JSON.stringify({ content: 'post ok' })
  ).setMimeType(ContentService.MimeType.JSON);
}
```

### 解説

メッセージに`groupId`が含まれるかで条件を分岐させています。

- 対ユーザーには送信メッセージのリピート（確認メッセージ）
- 対グループにユーザーから送信されたメッセージを送信

また、`groupId`を取得するためには、

1. BOT をグループに参加させる
2. `set`を発言する
3. BOT が`groupId`を発信します

以上で取得できます。

取得した`groupId`は GAS 上のコードの`GROUP_ID`の箇所へ入れてください。
入れると、指定したグループへ発信できます。

## まとめ

`groupId`の取得やグループへの発信、対個人への発信などがやや面倒だと感じました。

また、グループに参加したときのイベント`join`を利用すればよかったのですが、うまくイベントを発生させることができず、`set`というキーワードを今回は利用しています。

そのほかにも、GAS を利用すれば、

- メールの送信
- スプレッドシートへのログの記載

などなど、色々と派生させることができると思いますので、色々カスタマイズできると思います。

Vue+LIFF(LINE Front-end Framework)+GASでフォームを使ったBOTを作ってみた

LIFF BOT


ドッグフード（ビルジャック）のおすすめ商品＆給餌量計算 Web アプリを作成しました。

犬種や年齢、体重などを入力すると、おすすめ商品と一日当たりの給仕量が表示されます。

入力内容をベースに計算を JS 内で行うため、フレームワークに`React`を採用しました。

また、デザインは使いやすいよう`material-ui`を採用しました。

クライアントにも喜んでいただけました。

## 外部サイトリンク

[Bil・Jac 公式 Web サイト](https://biljac.jp/)


ビルジャックおすすめ商品＆給餌量計算

WORKS

PORTFOLIO