Vue.js + webpack で Bootstrap を使う

Ⅰ. はじめに

Vue.js + webpack の基本的なインストール方法はこちらを参照して下さい。
http://kagasu.hatenablog.com/entry/2017/07/24/082405

上記で作った環境にBootstrap v4をインストールする方法です。

※2018/12/04追記
現在のbootstrap-vue最新版である 2.0.0-rc.11 には日本語入力に関するバグが存在します。
バグは既に修正されてdevブランチにマージされていますがnpmにはリリースされていません。
https://github.com/bootstrap-vue/bootstrap-vue/issues/2131

Ⅱ. やり方

1. bootstrap-vue をインストール

$ npm i -D bootstrap-vue

2. 以下の4行を my-project/src/main.js に書き込む

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)

3. bootstrapの動作確認をする為に 以下のnavbarを my-project/src/App.vue 等にコピペして実装する

<template>
<div>
  <b-navbar toggleable="md" type="dark" variant="info">
  <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
  <b-navbar-brand href="#">NavBar</b-navbar-brand>
  <b-collapse is-nav id="nav_collapse">
    <b-navbar-nav>
      <b-nav-item href="#">Link</b-nav-item>
      <b-nav-item href="#" disabled>Disabled</b-nav-item>
    </b-navbar-nav>

    <!-- Right aligned nav items -->
    <b-navbar-nav class="ml-auto">
      <b-nav-form>
        <b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/>
        <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
      </b-nav-form>

      <b-nav-item-dropdown text="Lang" right>
        <b-dropdown-item href="#">EN</b-dropdown-item>
        <b-dropdown-item href="#">ES</b-dropdown-item>
        <b-dropdown-item href="#">RU</b-dropdown-item>
        <b-dropdown-item href="#">FA</b-dropdown-item>
      </b-nav-item-dropdown>

      <b-nav-item-dropdown right>
        <!-- Using button-content slot -->
        <template slot="button-content">
          <em>User</em>
        </template>
        <b-dropdown-item href="#">Profile</b-dropdown-item>
        <b-dropdown-item href="#">Signout</b-dropdown-item>
      </b-nav-item-dropdown>
    </b-navbar-nav>
  </b-collapse>
  </b-navbar>

  <div id="app">
    <router-view/>
  </div>
</div>
</template>

4. 実行結果

参考

https://bootstrap-vue.js.org/

Vue.js + webpack で helloworld する

Ⅰ. はじめに

タイトルの通り「Vue.js + webpack で helloworld する」方法です。

Ⅱ. やり方

1. vue-cliのインストール

$ npm install -g vue-cli

2. Vue.js + webpack のテンプレートを使って初期化する

$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

3. 実行結果

4. my-project/src/components/Hello.vue を編集する

data () {
  return {
    msg: 'helloworld'
  }
}

5. 実行結果

helloworldに変わった。

Ⅲ. リリース版としてビルドする方法

以下のコマンドを実行するとdistディレクトリにファイルが生成されます。

npm run build

参考

https://github.com/vuejs-templates/webpack

Vue.jsでaxiosを使ってJSONデータを利用（GET）する方法

Ⅰ. はじめに

タイトルの通り「Vue.jsでaxiosを使ってJSONデータを利用（GET）する方法」です。

以下のJSONから

[
  { "name" : "name001" },
  { "name" : "name002" },
  { "name" : "name003" }
]

以下のように出力するサンプルです。

• name001
• name002
• name003

※FetchAPIを使う方法はこちら
http://kagasu.hatenablog.com/entry/2017/12/16/163725

Ⅱ. サンプル

https://codepen.io/kagasu/pen/brbydZ

C#でDiscord BOTを作る方法

Ⅰ. はじめに

kagasu.hatenablog.com

こちらの記事でプログラミング不要なBOTの作成方法を書きましたが、
細かい動きをするBOTを作るにはプログラム書く必要があります。

この記事ではC#でecho botのサンプルを紹介します。

Ⅱ. 環境

• Windows 10 64bit 1703
• Visual Studio 2017 Preview

• .NET Core 2.0

Ⅲ. echo botの作り方

1. 新規アプリケーションを作成する

https://discordapp.com/developers/applications/

2. BOTとして設定する

3. Tokenをコピーする

4. OAuthのリンクを作成する

BOTを自分のサーバに招待する為のURLを作成します。

5. 4で作成したURLにアクセスし、BOTを自分のサーバに招待する

6. NuGet から Discord.Net をインストールする

Install-Package Discord.Net

7. サンプルプログラム

class Program
{
  const long ClientId = 123456789;
  const string BotToken = "YOUR_BOT_TOKEN";

  static async Task Main()
  {
    var client = new DiscordSocketClient();

    client.MessageReceived += Client_MessageReceived;

    await client.LoginAsync(TokenType.Bot, BotToken);
    await client.StartAsync();

    Console.ReadLine();
  }

  static async Task Client_MessageReceived(SocketMessage arg)
  {
    if (arg.Author.Id != ClientId)
    {
      await arg.Channel.SendMessageAsync(arg.Content);
    }
  }
}

実行結果

DiscordでTwitterやSteamやブログRSSを通知するBOTを作る方法

Ⅰ. はじめに

・Twitterで誰かがツイートした時
・ブログが更新された時
・Steamゲームのニュースが更新された時
等、何か起きた時に自動的にDiscordで通知を受け取る方法です。

上記のようなケースだけでなく、様々なケースに応用が可能です。
また、IFTTT を利用する事でプログラムを一切書く事無く簡単にBOTを作る事が出来ます。

Ⅱ. やり方（Twitterの場合）

※2023/07/22追記
以下手順よりも TweetShift を利用したほうが簡単です（課金必須 月額2.5USD）

1. Discordで「チャンネルの編集」をクリック

2. 「Webhook を作成」をクリック

3. 「Webhook URL」をコピーし、保存をクリック

4. Webブラウザで IFTTT にログインし、「New Applet」をクリック

5. 「this」をクリックしてTwitterを選択

6. 特定のユーザーがツイートした時に通知を受け取る場合は「New tweet by a specific user」を選択し、対象のユーザー名を入力する

7. 「that」をクリックしてWebhooksを選択

8. 「Make a web request」をクリック

9. 必要な情報を入力します
① 3でコピーしたURLを貼り付ける
② POST を選択
③ application/json を選択
④ 以下を入力

{
  "content":"@{{UserName}} {{CreatedAt}}: {{LinkToTweet}}"
}

10. 「Create action」をクリック
11. 保存する名前をつけて「Finish」をクリック

以上で対象のユーザーがツイートすると自動的に通知されるようになります。

Ⅲ. やり方（ブログやSteamニュース等のRSSの場合）

※2023/07/22追記
以下手順よりも MonitoRSS を利用したほうが簡単です

Ⅱとやり方はほとんど同じです。
以下の2点が異なります。

・Ⅱ-5でRSSを選択する
・Ⅱ-9の④に入力する値が以下に変わる

{
  "content": "**{{EntryTitle}}** {{EntryPublished}}: {{EntryUrl}} "
}

FAQ

Q. 通知が遅いです。10分ほど遅れて通知される事があります。

A. IFTTTの仕様上遅い場合があります。即時性が必須な場合には向いていません。

参考

https://gist.github.com/austinhuang0131/3846a66790ecc240ec470229b4318cdf

代替案

• Zapier（Twitter連携を利用する場合は有料）
• https://tweetshift.com/
• https://monitorss.xyz/