totorajの開発日記

僕がなんかメモる

adbを使ってAndroid端末の画面操作をしたときのメモ

よく使われているやり方を試す

tapとswipe

adb shell input tap x y
adb shell input swipe x1 y1 x2 y2 duration

遅いしPC側の操作を再現できないのでボツ。

sendevent

adb shell setevent /dev/input/eventX type code value

参考: Emulating touchscreen interaction with sendevent in Android

/dev/input/eventXのeventXは端末によって変わるので

adb shell getevent -pl > getevent.txt

とかで調べてください。

これなら再現できそう!っと思っていた時期が僕にもありました。

どうやらsendevent毎にファイルに書き込むという動作が入るのでめちゃくちゃ遅いです。

これもボツです。

別のやり方を試す

まずはsendeventの仕組みを調べました。

参考: adb - Android simulate fast swipe - Stack Overflow

どうやらtoolbox/sendevent.cってのが正体っぽい。

適当に探したらソースコードがあった。

toolbox/sendevent.c - platform/system/core - Git at Google

/dev/input/eventXに対してinput_eventという構造体を書き込んでいるっぽい。

/dev/input/eventXを覗いてみる

adb shell "dd if=/dev/input/eventX of=/sdcard/event_copy"

とかで適当にコピーして中を覗いてみた。

f:id:totorachan:20170925134000p:plain

どうやら1つのinput_eventが24byteずつで書き込まれているようだ。

まとめると、

timeval: 16byte
type: 2byte
code: 2byte
value: 4byte

timevalだけよくわからんので調べると、どうやらマイクロ秒までのUNIX時間っぽい。

なので結局

秒以上の部分: 8byte
秒未満の部分: 8byte
type: 2byte
code: 2byte
value: 4byte

になるようだ。

あとは適当にリトルエンディアンで書き込めば大丈夫そう。

/dev/input/eventXに書き込んでみる

PC側からバイナリを書き込む方法ですが、

adb shell print "\x01\x02\x03..." ^> /dev/input/eventX

てな感じで何とかなりました。

もっといい方法があったら教えてほしいです。

参考: shell - echo bytes to a file - Unix & Linux Stack Exchange

結果

sendeventが遅い原因はinput_eventを一つずつ書き込んでいることだった。

ある程度まとめて/dev/input/eventXに書き込んでやることでそれなりの速度が出ました。

あと、timevalは基本無視されるっぽいです。

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に背景色を設定しています。

おわりに

未来を感じる。