2020-05-30

Nuxt環境でFont Awesomeを使った

javascript nuxt.js vue.js

こちらを参考にやってみた。

使いたいタイプ（Solid, Regular, Brand）を読み込んで使う形式。有料版とはまた別なので注意。

yarnの場合のインストールコマンドは下記の通り。

# 必須
$ yarn add @fortawesome/vue-fontawesome @fortawesome/fontawesome-svg-core

# 必要に応じて
$ yarn add @fortawesome/free-solid-svg-icons
$ yarn add @fortawesome/free-regular-svg-icons
$ yarn add@fortawesome/free-brands-svg-icons

あとは一緒。スペルは「fortawesome」であってる。

2020-03-12

GASで標準SQLが使えなくて困った

analytics sql bigquery gas

GASを使って、BigQueryのクエリを叩いて継続率を計測しようとしてた時に、こんな感じのエラーがでた。

GoogleJsonResponseException: 次のエラーが発生し、bigquery.jobs.query の呼び出しに失敗しました: Encountered " <INTEGER_LITERAL> "1 "" at line 1, column 58. Was expecting: ")" ... [Try using standard SQL (https://cloud.google.com/bigquery/docs/reference/standard-sql/enabling-standard-sql)]（行 68、ファイル「リテンション」）

標準SQLを使っているのに、標準SQLを試せと書いてある。謎。TIME_DIFFとかTIME_SUBなど一部のクエリが使えないようだった。

いろいろ調べてみたところ、GASからBigQueryのAPIを叩く際、デフォルトではレガシーSQLになってしまうらしい。試しに、BigQueryでレガシーSQLに書き換えたクエリを実行したら、同じエラーメッセージが出た。

これに対しての解決策は、（1）レガシーSQLに書き換える（2）標準SQLで実行できるようにする、のふたつ。前者をやるのは手間がかかって嫌なので、後者をやる方が良い。

var request = {
    useLegacySql: false,
    query: query
};

クエリを実行するスクリプトに、requestを引数として渡すのだけど、そこにuseLegacySqlオプションを設定できるようだ。デフォルトはtrueになっているので、falseに変えてあげればよい。

2020-03-03

Google スプレッドシートで冒頭/末尾からN文字削除する

analytics

BigQueryからダウンロードしたstring型のデータの冒頭に、シングルクオーテーションが含まれていて除去したかった。

冒頭からN文字消す =SUBSTITUTE(対象のセル,LEFT(対象のセル,1),"")
末尾からN文字消す =SUBSTITUTE(対象のセル,RIGHT(対象のセル,1),"")

SUBSTITUTEは、指定された文字列を、特定の文字列で置き換える関数で、字列を直接入力する以外にセルを指定することができる。第一引数に対象となる文字列 or セル、第二引数にその文字列の中で置換したい元の文字、第三引数に置換後の文字を指定する。

この第二引数で文字を指定するところにLEFT, RIGHT関数を組み合わせる。この関数は、特定の文字列の中から、前者は冒頭、後者は末尾から数値分の文字数を取得してくれる。0の場合は空白を返す。

まあこんな感じで削除しようとしたのだが、よくよく考えるとその列をまるっと別の列にコピペして、再度それをコピーして値を貼り付けすればいいだけだったのでした...。

2020-02-14

Slackin + Herokuで Slack の招待アプリケーションをデプロイする

heroku slack

Creative Coding Fukuokaを主催してるのだけど、思うように人が集まらないので、meetup入るほどじゃないんだよな〜という人向けにSlackのワークスペースを作ってみた。以下Slackinで誰でも入れるようにするまでのまとめ。

Join Creative Coding Fukuoka on Slack!

作業の流れ

https://www.yuulinux.tokyo/16132/ を参考にした。ざっくり話します。

Slackinをfolk
Slack Tokenを取得
Herokuにサインアップ
Google RecapchaにURLを登録
Herokuにデプロイ
完成

Slackinをfolk

github.com

こちらのリポジトリをフォークする。cloneとかはしなくて良い。

Slack Tokenを取得

Slackにログインした状態で、下記のURLをクリックする。

https://api.slack.com/legacy/custom-integrations/legacy-tokens

真ん中あたりにトークンを発行できるフォームがあるので、発行しておく。

Herokuにサインアップ

Herokuアカウント持っていない人はサインアップ、持ってる人はサインインする。この時点でアプリケーションを作成する必要はない。

Google RecaptchaにURLを登録

https://www.google.com/recaptcha/intro/

上記のサイトからRecapchaを使うためのキーを発行する。設定詳細は参考リンクの画像を見てください。（なんかv3を選ぶとHerokuで怒られた記憶があるので、v2にしておくといいかも。）

登録するURLは hoge-slackin.herokuapp.com と、この後デプロイするアプリケーションのURLになるようにする。

登録が完了すると、サイトキーとシークレットキーが発行される。

Herokuにデプロイ

Herokuにサインインした状態で、下記のリンクをクリックすると、デプロイ画面に遷移する。

https://heroku.com/deploy?template=https://github.com/github-user-name/slackin/tree/master

（github-user-nameのところは、自分のGithubのアカウント名に変える。先ほどフォークしたリポジトリのURLです。）

これまで発行してきたトークンやキーをババっと入れましょう。

完成

少々時間がかかるけど、デプロイが終了するとアプリケーションを立ち上げられるようになる。登録したトークンやキーが間違ってしまってエラーになってしまった場合は、アプリケーションのSetting画面の「Config Vars」をRevealすれば更新される（はず）

以上、Creative Coding Fukuokaもよろしく。

2020-02-13

知らない間に予約語を使っていて時間を溶かした

タイトルがすべて。

<div v-for="(case, index) in cases" :key="index">

こんな感じで繰り返し処理を書いていたら、 'v-for' directives require that attribute value. と怒られた。同じように書いてあるところをコピペしただけだし、原因が全くわからなかったので諸々調べたが、予約語使ってると気づくまで20分くらい時間を無駄にした。予約語使わない、ゼッタイ。

2019-06-08

Processing3でsize()のパラメータに変数を使う

processing

2015年からの話になるが、備忘録として書いておく。

Processing3系になってからsize()のパラメータに変数を使えなくなっている。例えばdata内にある画像と同じウィンドウサイズにしたいときなど、変数が使えないと困る。もしパラメータに変数を入れようとするとCould not find sketch size ...といったエラー文が表示される。

これを回避するためには、surface.setResizable()をtrueにする必要がある。下記に画像の縦横幅を変数としてsize()にパラメータを渡す処理の例を記載する。

PImage img;

void setup() {
  img = loadImage("img.jpg");
  surface.setResizable(true);
  surface.setSize(img.width, img.height);
}

void draw() {
   ...
}

PSurfaceについてはこちらを参照。

追記

surface.setSize()をして、さらに背景画像をsetup()の中で描画しようと思っても、画像が表示されないことがある。

理由としては、setupの処理が終わった後にsurface.setSizeが行われているためとのこと。

github.com

なので、背景画像を敷くためのimage()メソッドを実行するのはdraw()の中で行わなければならない。ただし、drawは常にループしているので、（1）drawのループをnoLoop()で止めるか（2）1フレーム目のみ描画させるか、という方法で描画処理を制御しなければいけない。

（1）の場合

PImage img;

void setup() {
  img = loadImage("img.jpg");
  surface.setResizable(true);
  surface.setSize(img.width, img.height);
}

void draw() {
  image(img, 0, 0);
  noLoop();
}

（2）の場合

PImage img;

void setup() {
  img = loadImage("img.jpg");
  surface.setResizable(true);
  surface.setSize(img.width, img.height);
}

void draw() {
  if (frameCount == 1) {
    image(img, 0, 0);
  } 
  ...
}

noLoop()で描画の更新を止められるのが困るのであれば、（2）の方法で1フレーム以降の処理を記述していけばOK。

2019-01-28

TidalCyclesを使ったライブコーディングをYoutubeでライブ配信する方法

creative coding haskell tidalcycles supercollider

ライブコーディングの実践の場としてライブ配信して世界中の人に見てもらうのが良いのでは？と思い、いろいろ調べてやってみた。ライブ配信のやり方はそこら中に記事があるのでそっちを参照してください。この記事ではあくまで引っかかるポイントだけ載せていきます。

ざっくり流れ

Mac（OS 10.13以上）とTidalCyclesの利用を想定。

Youtubeアカウント作成・チャンネル開設
OBSのインストールと録音設定
放送開始

Youtubeアカウント作成・チャンネル開設

まずはYoutubeにアカウント作成と自分のチャンネルを開設が必要。方法に関してはガイドに沿って行えばわかるので割愛。

チャンネルを開設したら動画を投稿できるようになりますが、一方ライブ配信はチャンネルを作成すればすぐにできるというものではありません。ライブ配信をするための申請を行わなければならず、申請から24時間後に配信が可能になる。

OBSのインストールと設定

OBSを使ってライブ配信をします。こちらも各種基本設定はいろいろ記事が出ているので、そちらを参照してください。ただし、macOSの場合、デスクトップ音声の出力がデフォルトではできません。仮想音声デバイスのインストールと音声のミキシング用ソフトウェアが必要です。

この音声設定を行うためには2つのステップがあります。

（1）必要なツールをインストールする
（2）録音するための設定をする

まず（1）ですが、「Soundflower」という仮想音声デバイスと、ミキシングをする「LadioCast」というツールが必要になります。インストールと各種設定に関しては下記のリンクを参照。

参考: https://ch.nicovideo.jp/kenta0644/blomaga/ar537095

Soundflowerのインストール時、エラーが出て先に進めないことがあります。バージョンを変えたりセキュリティとプライバシーから許可したりしてもエラーが出続けてしまう場合は、セーフブートで起動してからインストールしなければなりません。

参考: https://hawksnowlog.blogspot.com/2018/05/install-soundflower-into-high-sierra.html

次に（2）ですが、SuperColliderからSuperflowerに向けて音声を出力させる設定をします。SuperColliderを再起動し、エディタにServerOptions.new.outDevice = “Soundflower (2ch)”;と入力して、実行します。

参考: https://qiita.com/tackey/items/f5034d5d73438bb2845d

LadioCast上で音声出力が行われていることを確認したら、最後にOBS側で「デスクトップ音声デバイス」を追加すれば、ライブ配信の準備は完了です。

配信開始

本配信をする前に、限定公開で動画と音声の確認をしましょう。配信はOBSから「配信開始」ボタンを押せば始まります。

気をつけたいのが、マシンスペックの問題で音がもたついてしまってノイズ音が発生することです。配信中はマシンへの負荷が大きくなるため、エディタとブラウザをそれぞれ行き来している際にブツッとしたノイズ音が生じる可能性があります。あまり耳障り的によくないので、エディタ以外を触らないようにするか、デュアルディスプレイを使ってブラウザとエディタの両方を開くようにしましょう。

ちなみに、こちらが配信時の映像になります。まだまだ練習中。

#1 "Trial" | Live Coding with TidalCycles.

以上がライブコーディングをライブ配信するコツです。ライブコーダーのみなさんも試してみてください。

HYUDORO

勉強したことや日記など