totorajの開発日記

僕がなんかメモる

Node.jsでDiscordのBOTをつくる

久々の更新っすね。

Discordの簡易なBOTをつくったので手順をメモしておきます。

アプリケーションを登録する

  • DiscordのdevelopersページのAPPLICATIONS項目にあるMy Appsにアクセスします。
  • New Appをクリックして必要な項目を入力してCreate Appで追加します。
  • Appの詳細ページに切り替わるのでAPP DETAILSのClient IDをメモしておきます。
    • サーバーにBOTを追加するときなどに使用します。
  • Create a Bot UserをクリックしてBOT Userを作成します。
  • APP BOT USERのTokenのclick to revealをクリックしてトークンを発行してメモしておきます。
    • プログラム側からBOTを操作するのに使用します。

BOTをサーバーに追加する

下記のURLにアクセスして追加するサーバーを選択するだけです。

https://discordapp.com/api/oauth2/authorize?client_id=ここにメモしたClient ID&scope=bot&permissions=0

参考: Adding Bots to Guilds | Discord - Developer Documentation

適当にプログラムを書く

タイトル通りNode.jsを使います。

プログラムを書くといってもdiscord.jsという素晴らしいモジュールのおかげですごく簡単です。

モジュールのサイト: discord.js

モジュールの準備

モジュールのインストー

普段通りインストールと行きたいところですが、discord.jsのみをインストールすると「Couldn’t find an Opus engine.」というエラーが出るのでopusscriptというモジュールも一緒にインストールします。

(依存関係に書かれているのになぜか一緒にインストールされない・・・よくわからんので誰か教えて)

参考Issue: Can’t install or run “npm install discord.js” #976

npm i --save discord.js opusscript

ffmpegのインストー

BOTで音声を再生するときなどにffmpegを使用するので別途インストールしておく必要があります。

Windowsであれば適当なディレクトリにインストールしてPATHを通しておけば大丈夫です。

調べれば出てくると思うので今回は端折ります。

ソースコード

discord.jsのドキュメントがめちゃくちゃわかりやすいので全く困ることはないと思います。

Documentation | discord.js

BOTで音声ファイルを再生するサンプル

参考: VoiceConnection.playFile() | discord.js

gist.github.com

おわりに

かなりいろいろできるみたいなのでBOT自作して遊びたい!って人はぜひ試してみてほしい。

クロスドメイン制約によるcanvasの汚染を回避してみる

タイトル通りです。

あんまり実用的ではないかも?

方法

XMLHttpRequestを使って、外部の画像をArrayBufferとして取得してBlob経由でcanvasに描画します。

参考: CORS Enabled Image - HTML | MDN

ソースコード

簡易なデモコードです。

HTMLは想像してください。

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d");

// 適当にリクエストを投げる
var url = "https://pbs.twimg.com/profile_images/656821360358854657/qKSAV4Pz_bigger.png";
var req = new XMLHttpRequest();
req.open("GET", url, true);
req.responseType = "arraybuffer";
req.addEventListener("load", function (event) {
    if (req.status !== 200) {// 一応ステータスコードだけ確認
        alert("Invalid status code");
        return;
    }
    
    // Blobを作成しURLを取得する
    var blob = new Blob([req.response]),
        blobUrl = URL.createObjectURL(blob);
    
    // いつも通りcanvasに描画
    var Image = new Image();
    image.src = blobUrl;
    image.addEventListener("load", function () {
        ctx.drawImage(image, 0, 0);
    });
});
req.send();

サンプル

GitHubにサンプルを置いてあります。

サンプル: https://totoraj930.github.io/Koneta/tainted-canvas/

ソースコード: Koneta/index.html at gh-pages · totoraj930/Koneta · GitHub

おわりに

BlobじゃなくてBase64とかでも行けると思う。

文章がくそ雑い。

ゆるして。

CSSで3Dっぽい部屋をつくってみた

タイトル通りです。

つくったもの

いろいろ書くよりみてもらった方がはやい!

Chrome以外のブラウザでは動作が不安定&不完全です。

IEは論外です。

デモページ

GIFもペタリ・・・。

f:id:totorachan:20161207110352g:plain

ソースコード

GitHubに置いています。

Koneta/css-3d-room at gh-pages · totoraj930/Koneta · GitHub

実装

CSS3のperspectiveを使ってtransformの効果に対して奥行きを持たせています。

これにより立体的な表現が可能になります。

対応ブラウザは下記を参考にどうぞ。

transforms3d - Can an I use… Support tables for HTML5, CSS3, etc

壁など

単純にtransformをつかって立体的に配置しています。

視点の移動

transformtransrate3d()などを使い視点を移動させています。

正確には視点を動かしているのではなく壁などその他もろもろをまとめて動かしています。

そもそもCSSの視点は固定ですからね・・・。

おわりに

説明が雑いのはいつものこと。

ブラウザごとに動作にばらつきがあるので使うにはまだはやいかも。

こんな派手に移動させたりしないのなら全然ありだと思います。

UbuntuのnginxでPHP7.0を動かしたときのメモ

色々手こずりました(´・ω・`)

参考にしたページ

環境

お友達から借りているVPSのサーバーです。

(使うバージョンがこれで正しいのかはよくわかりません。)

インストール

nginxは既にインストールしていたのでphp7.0-fpmだけ~。

sudo apt-get install php7.0-fpm

設定

ユーザーを追加

ホームディレクトリとかいらないので適当に・・・。

useradd nginx

これをやっていなくて20分くらい動かなくて泣いていました。

(パーミッション設定が面倒くさかったのでなにもしていないです。たぶんダメだと思います。)

php7.0-fpmの設定

設定といってもすこし書き換えただけ

/etc/php/7.0/fpm/pool.d/www.confusergroupをさっきつくったnginxに書き換えました。

※nginx側で使うのでlistenの設定値をメモっておくと楽です。/run/php/php7.0-fpm.sockとかになっていました。

・・・
~~~
user = nginx
group = nginx
~~~
・・・

nginxの設定

僕はserverの設定は別ファイルに書いてincludeしているのでserver部分だけいじって終わり。

server {
    ・・・
    ~~~
    # ここからPHPの設定
    location ~ [^/]\.php(/|$) {
        # さっきメモしたlistenの値の先頭にunix:をつけたやつ
        fastcgi_pass   unix:/run/php/php7.0-fpm.sock;
        # phpに渡すパラメータ($fastcgi_script_nameの前はルートディレクトリのパス)
        fastcgi_param  SCRIPT_FILENAME  /home/totoraj930/www$fastcgi_script_name;
        fastcgi_index  index.php;
        include        fastcgi_params;
    }
}

php7.0-fpmとnginxをリスタート

sudo service php7.0-fpm restart
sudo service nginx restart

設定がうまくいっていないとここでエラーが出ます。

つまずいたところとか

phpに設定したuser

よくわからずusergroupnginxって設定したけどよくよく考えるとそんなユーザーはサーバーに存在しませんでした。 ログで思いっきり怒られていました。

502が帰ってくる

phpが動いていないかnginxのサーバー設定のfastcgi_passを間違えているかのどちらか。

サービスが動いているかとnginxのerror.logを確認する。

404が帰ってくる

nginxのサーバー設定のfastcgi_paramを間違えている。

おわりに

php動かすだけでこんなに苦労するとは思いませんでした。

とりあえず動いたけどきっと危ない使い方をしているのだろうなぁっと思います。

インストールとか設定よりソースコードを書くことに時間をかけたいと思いました!

screen覚え書き

screenコマンドよく忘れるのでメモっておく

よく使うコマンドとか

リストを表示

screen -ls

新しいセッションを作る

screen -S <name>

セッションにアタッチする

screen -r <name>

セッションをデタッチする

セッションにアタッチした状態で実行する。

Ctrl + a  d
screen -d <name>

セッションをキルする

セッションにアタッチした状態で実行する。

Ctrl + a  k
quit

セッションにコマンドを送る

screen -S <name> -X <command>

おわりに

便利だけどよく忘れる?

セレクトボックス(select)をCSSだけで装飾する

どうも。

selectタグをCSSのみで装飾するのに少しはまりましたのでメモしておきます。

方法

下三角を消す

selectタグはそのままだと初期デザインの右側にある下三角が消せないのでappearanceというプロパティを使いUIの外観を変更します。

ですが、現在appearanceはほとんどのブラウザがベンダーブレフィックスを付けないと動かないような状態です。

(ていうかCSS4の先行実装がされているっぽい。)

上記のリンク1つめがW3Cの仕様書で2つめがCan I use(ブラウザの対応状況)です。

IEではappearanceが使えないので、代わりに::-ms-expandセレクタで非表示にします。

装飾をどう表示するか

selectタグは:before:afterといった疑似要素が使えません。

これでは消した下三角の代わりを表示することができません。

(background-imageを使えばできなくはないですが今回はCSSだけでというタイトルなので)

そこでselectタグをlabelタグで囲みlabelの疑似要素で下三角を表示します。

ソースコード

長々と書きましたがソースコード見るのが一番早いですね。

スクショ

各ブラウザで表示したものです。

(なんか古臭いデザインになってしまった)

f:id:totorachan:20160929055054p:plain

HTML

<label for="select_1" class="select-1">
    <select name="select_1" id="select_1">
        <option value="1">Chrome</option>
        <option value="2">Firefox</option>
        <option value="3">Safari</option>
        <option value="4">Opera</option>
        <option value="5">Edge</option>
        <option value="6">IE</option>
    </select>
</label>

CSS

/* フォント指定 */
.select-1, .select-1 * {
    font-family: "Helvetica Neue","メイリオ",Meiryo,Helvetica,Arial,"游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","MS Pゴシック","MS PGothic",sans-serif;
}
/* labelタグのスタイル */
.select-1 {
    position: relative;
    display: inline-block;
    background: #202020;
    background: linear-gradient(
        to bottom,
        #525252 0%,
        #272727 70%,
        #1c1c1c 100%);
    border-radius: 2em;
    box-shadow: 1px 1px 5px #000;
    font-size: 1em;
    overflow: hidden;
    z-index: 0;
}
/* 下三角の表示 */
.select-1:after {
    content: "";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    top: 50%;
    right: .6em;
    margin-top: -.2em;
    border-width: .45em .3em;
    border-style: solid;
    border-color: #fff transparent transparent;
    z-index: -1;
}
/* selectタグのスタイル */
.select-1 select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: .4em 2em .4em 1.5em;
    color: #fff;
    background: transparent;
    border: 1px solid #242424;
    border-radius: 2em;
    font-size: 1em;
    text-shadow: 1px 1px 2px #000;
    outline: none;
}
/* selectタグ選択中のスタイル */
.select-1 select:focus {
    text-shadow: 0 0 1px #b5b5b5;
}
/* IEの下三角非表示 */
.select-1 select::-ms-expand {
    display: none;
}
/* Firefoxの点線非表示 */
.select-1 select::-moz-focus-inner {
    border: 0;
}
/* 表示されるオプションスタイル */
.select-1 select * {
    background: #242424;
    color: #fff;
    text-shadow: none;
}

ちょっとした解説

.select-1.select-1:afterz-indexで下三角をselectの下に表示して、下三角の部分がクリックできなくなるのを防いでいます。

.select-1:afterの上にselectが表示されているのでselectの背景色は透明にしてselect-1に背景色を設定しています。

おわりに

未来を感じる。

Jekyllでサムネイル画像を実装する

環境

ファイル構成

いろいろと端折ってます。

この記事を読む人はきっとすでにJekyllを使っているはずなのでなんとなく流してください。

site/
 ├─ _posts/ ← いつもの記事置き場
 ├─ assets/
 │   └─ thumbs/ ← ここに記事のサムネ画像を入れておく
 │       └─ default.png ← デフォルトのサムネ
 └─ index.html ← これに記事一覧を表示する

手順

記事ファイル

まず記事ファイル(_postsに入れている奴)のヘッダーにサムネ画像のURLを変数として定義しておきます。

記事ファイルが2016-09-20-demo.mdだとすると、サムネ画像は2016-09-20-demo.pngなどにしておくと管理しやすと思います。

---
title: "記事のタイトル"
thumb: /assets/thumbs/2016-09-20-demo.png
---

ここに本文

表示する

index.htmlに記事ファイルで登録したサムネ画像を表示するソースコードを書きます。

記事ファイルのヘッダーで定義した変数は元からあるpost.titleなどの変数と同じように扱うことができます。

ですが変数がなかったときにエラーが出てしまうので、その回避をしておきます。

(このソースコードは一例ですのでサムネ画像表示部分以外はご自分の環境に合わせてください。)

---
title: 記事一覧
---

{% for post in site.posts %}
<article>
    <header class="post-head">
        <!-- 日付 -->
        <time>{{ post.date | date: "%F" }}</time>
        <!-- タイトル -->
        <h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
        
        <!-- サムネイル -->
        {% if post.thumb %}
        <!-- 変数が存在したら定義されているサムネ -->
        <img src="{{ post.thumb }}">
        {% else %}
        <!-- 変数が存在しなければデフォルトのサムネ -->
        <img src="/assets/thumbs/default.png">
        {% endif %}
        
    </header>
</article>
{% endfor %}

おわりに

全体的に説明が雑い。

Jekyll便利だからぜひ使ってみてください。