Firebase+webpack+Vue.jsでチャットを作る方法

Ⅰ. はじめに

タイトルの通り「Firebase+webpack+Vue.jsでチャットを作る方法」です。

Ⅱ. やり方

1. 必要なCLIツールをインストールする

npm install -g vue-cli

2. Vueプロジェクトを作成する

vue init webpack FirebaseChat
cd FirebaseChat
npm run dev

3. firebaseをインストールする

npm install firebase

4. Firebase でプロジェクトを作成する

https://firebase.google.com/

5. Firebase の Realtime Database のルールを変更する

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

6. プログラムを書く

src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import firebase from 'firebase/app'
import 'firebase/database'

Vue.config.productionTip = false

// Initialize Firebase
var config = {
  apiKey: 'your-app-key',
  authDomain: 'your-app-name.firebaseapp.com',
  databaseURL: 'https://your-app-name.firebaseio.com',
  projectId: 'your-app-name',
  storageBucket: 'your-app-name.appspot.com',
  messagingSenderId: '123456789'
}

firebase.initializeApp(config)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  firebase,
  components: { App },
  template: '<App/>'
})

src/App.vue

<template>
  <div id="app">
    <label for="name">名前</label>
    <input type="txt" id="name" v-model="name">

    <label for="message">メッセージ</label>
    <input type="txt" id="message" v-model="message">

    <button type="button" @click="sendMessage">送信</button>

    <div>
      <ul>
        <li v-for="item in list" :key="item.id">
          {{item.name}}: {{item.message}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import firebase from 'firebase'

export default {
  name: 'app',
  data () {
    return {
      list: [],
      name: '',
      message: ''
    }
  },
  mounted () {
    this.listen()
  },
  methods: {
    listen () {
      firebase.database().ref('myBoard/').on('value', snapshot => {
        if (snapshot) {
          const items = snapshot.val()
          let list = []
          Object.keys(items).forEach((val, key) => {
            items[val].id = val
            list.push(items[val])
          })
          this.list = list
        }
      })
    },
    sendMessage () {
      firebase.database().ref('myBoard/').push({
        name: this.name,
        message: this.message
      })

      this.name = ''
      this.message = ''
    }
  }
}
</script>

<style>
</style>

7. 実行する

npm run dev

実行結果

参考

https://liginc.co.jp/378463
https://liginc.co.jp/382652

C#でTitanium-Web-Proxyを利用してProxyサーバを構築する方法

Ⅰ. はじめに

タイトルの通り「C#でTitanium-Web-Proxyを利用してProxyサーバを構築する方法」です。
Titanium-Web-Proxyはクロスプラットフォーム対応しています。
Websocketには対応しておらずデータをリレーするだけです。

WebSocketのプロキシサーバが必要な場合はFiddlerCoreを利用して下さい。
C# FiddlerCoreのサンプル

Ⅱ. やり方

1. Titanium-Web-Proxy をダウンロードする

Install-Package Titanium.Web.Proxy

2. サンプルプログラム

using System;
using System.IO;
using System.Net;
using System.Security.Cryptography.X509Certificates;
using System.Threading.Tasks;
using Titanium.Web.Proxy;
using Titanium.Web.Proxy.EventArguments;
using Titanium.Web.Proxy.Models;

namespace CrossPlatformProxyServer
{
  class Program
  {
    static void Main(string[] args)
    {
      var proxy = new ProxyServer();
      proxy.CertificateManager.EnsureRootCertificate();
      proxy.CertificateManager.TrustRootCertificate(true);

      proxy.BeforeRequest += ProxyServer_BeforeRequest;
      proxy.BeforeResponse += Proxy_BeforeResponse;

      // 0.0.0.0:8008でプロキシサーバを起動する
      var explicitEndPoint = new ExplicitProxyEndPoint(IPAddress.Any, 8008, true);
      proxy.AddEndPoint(explicitEndPoint);
      proxy.Start();

      // OSのプロキシ設定を変更する
      proxy.SetAsSystemHttpProxy(explicitEndPoint);
      proxy.SetAsSystemHttpsProxy(explicitEndPoint);

      // ルート証明書だけを保存する
      // var bytes = proxy.CertificateManager.RootCertificate.Export(X509ContentType.Cert);
      // File.WriteAllBytes("root-ca.cer", bytes);

      // 上位プロキシを設定する
      // proxy.UpStreamHttpProxy = new ExternalProxy() { HostName = "localhost", Port = 8009 };
      // proxy.UpStreamHttpsProxy = new ExternalProxy() { HostName = "localhost", Port = 8009 };

      foreach (var endPoint in proxy.ProxyEndPoints)
      {
        Console.WriteLine("Listening on '{0}' endpoint at Ip {1} and port: {2} ",
          endPoint.GetType().Name,
          endPoint.IpAddress,
          endPoint.Port);
      }

      // wait here
      Console.ReadLine();

      proxy.Stop();
    }

    private static Task Proxy_BeforeResponse(object sender, SessionEventArgs e)
    {
      return Task.FromResult(0);
    }

    private static async Task ProxyServer_BeforeRequest(object sender, SessionEventArgs e)
    {
      Console.WriteLine(e.WebSession.Request.Url);

      if (e.WebSession.Request.HasBody)
      {
        // リクエストBodyを取得する
        // ※SetRequestBodyString する前に必ず GetRequestBodyAsString を呼び出す必要がある。
        var str = await e.GetRequestBodyAsString();

        // リクエストBodyを書き換える
        e.SetRequestBodyString("abc");
      }
    }
  }
}

参考

https://github.com/justcoding121/Titanium-Web-Proxy

WPFでボタンにアイコンを設定する方法

Ⅰ. はじめに

タイトルの通り「WPFでボタンにアイコンを設定する方法」です。

Ⅱ. やり方

1. Material Design Icons にアクセスする

2. アイコンを右クリックし、View XAMLをクリックする

3. XAMLを貼り付ける

<Button Width="50" Height="50">
  <Viewbox Width="48" Height="48">
    <Canvas Width="24" Height="24">
      <Path Data="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" Fill="Black" />
    </Canvas>
  </Viewbox>
</Button>

実行結果

ffmpegで動画を一部切り出す

Ⅰ. はじめに

タイトルの通り「ffmpegで動画を一部切り出す」方法です。
基本となるコマンドは以下の通りです。

ffmpeg -i input.mp4 -ss [start_time_second] -t [length_second] output.mp4

Ⅱ. やり方

1. 開始時間と終了時間を指定する

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

2. 出力されたコマンドをコピペし、実行する

0時間1分0秒から0時間2分1秒まで切り取る例

ffmpeg -i input.mp4 -ss 60 -t -61 output.mp4

参考

https://qiita.com/kitar/items/d293e3962ade087fd850

PythonでファイルタイプやMIMEを取得する（libmagicのラッパーを使う方法）

Ⅰ. はじめに

この記事ではPython標準のmimetypesでは無く、libmagicのラッパーであるpython-magicを利用した方法を紹介します。

Ⅱ. 環境

• Python 3.7.0
• Windows 10 64bit 1709

Ⅱ. やり方

1. 必要なパッケージをインストールする

python-magic-bin はWindowsのみ必要です

pip3 install python-magic
pip3 install python-magic-bin

2. サンプルコードを書く

import magic
print(magic.from_file('a.pdf'))
print(magic.from_buffer(open('a.pdf', 'rb').read(1024)))
print(magic.from_file("a.pdf", mime=True))

3. 実行結果

PDF document, version 1.4
PDF document, version 1.4
application/pdf

参考

https://github.com/ahupp/python-magic