at backyard

Color my life with the chaos of trouble.

B/W、イバラキングのごじゃっぺラジオZに出演します

B/W イバラキングのごじゃっぺラジオZ

B/W、イバラキングのごじゃっぺラジオZに出演します

mellow-yellow.b-slash-w.com

B/Wのウェブサイトにて告知させてもらいましたが、今度 イバラキングのごじゃっぺラジオZ にB/Wとして出演させていただくことになりました！

公開収録形式で行われる予定で、日付は 9/26(木)の午後 2:00 頃からつくば駅徒歩 1 分のつくばセンタービル（アイアイモール）２ F のサテライトスタジオ・セン にて行われる予定です。

なお、こちらで収録された内容については、土曜日 夜10:00～11:00 に放送される予定です。

スマートフォン環境でも聴くことができますので(上に貼ったリンク先の "ごじゃっぺラジオ Z(ラヂオつくば)をスマフォで聴く方法" を参照してください)、ぜひぜひ聴いてみてもらえたらと思います。

yarn auditの使い方

Yarn npm

yarn auditの使い方

インストールされた npm パッケージの既知のセキュリティ問題をチェックするツールで、npm audit と同様のツールとなります。
なお、チェックを実行するにはインターネットに繋がっている必要があります。

使い方には公式のドキュメントを参考にするのが良いと思います。

yarnpkg.com

実行は下記で行います。

yarn audit

問題が見つかった場合はその内容が表示されます。
詳しくは上記ドキュメントに詳しいですが、--jsonというオプションを付けると、返す値をjson形式にもできます。

yarn audit --json

もしcriticalな問題だけ表示させたい場合は--levelというオプションのあとに問題の度合いを指定すれば良いようです。

yarn audit --level critical

もしauditコマンドで問題が発生している場合は--verboseというオプションを付けることで、yarnがnpmレジストリに送信するJSONデータと応答データを送信し、問題の内容を表示してくれる(?)ようですが、あまり良くわかりませんでした。たぶんyarn auditコマンドがうまく動かないときようなのかな？
ここはちょっとわかっていないです。

TypeScriptを使っていて、 Type 'void' is not a valid async function return type in ES5/ES3 because it does not refer to a Promise-compatible constructor value. というエラーがでたとき

TypeScript 備忘録

Type 'void' is not a valid async function return type in ES5/ES3 because it does not refer to a Promise-compatible constructor value.

自分がまだまだTypeScriptを書き慣れていないのと、意外とググってみてもサクッと答えにたどり着かなかったので(自分の調べ方が悪い可能性は大いにあり)、一応備忘録としてこのエラーの内容と対応法を書き残しておく。
(もしかしたら書き残しておくほどのことでもないので、わざわざ書いていないのかもしれないが...😱)

ちなみに、上のエラーメッセージのvoidのところには返そうと思っている型などが入るので、人によっては微妙に異なるメッセージになると思う。

下記のような関数を書いていて、タイトルにあるエラーメッセージが出た

async function sayHello(): void {
  console.log('Hello!');
}

エラーメッセージの内容を見ればすぐに分かるのだが、async functionなのに返り値がPromiseじゃないよというわけである。
ではPromiseが返り値の場合はどう書けばよいのかというと、Promise<型>という感じになる

async function sayHello(): Promise<void> {
  console.log('Hello!');
}

もし文字列を返り値として返したい場合は下記のようになる。

async function sayHello(): Promise<string> {
  return 'Hello!';
}

他にObjectとして返したい場合は下記のようになる

interface userObj {
  name: string,
  age: number
}

async function getUser(): Promise<userObj> {
  return { name: 'John', age: 20 }
}

Headless CMS の Contentful からデータを取得して、Next.jsのページで表示させるメモ

Contentful Next.js 備忘録 React TypeScript

完全なる備忘録です。

Next.js 9 with TypeScript セットアップ

最近 Next.js 9 を余暇を利用して触っているので、今回はそちらの環境のセットアップから行います。
ちなみに最初からTypeScriptで書けるように設定していきます。

以前Qiitaに書いたNext.jsでmeta情報をSSRするを参考にしています。

必要なライブラリをインストール

yarn add next@latest react@latest react-dom@latest

--dev つけて下記もインストールする必要があります。

yarn add --dev typescript @types/react @types/node

必要なディレクトリとファイルを作っていきます。

mkdir pages
vim pages/index.tsx

シンプルに Hello World と表示させてみます

export default () => <p>Hello World</p>;

開発用のサーバを立ち上げます。

yarn next dev

セットアップはここまで

Contentful セットアップ

次に 上でセットした Next.js アプリ上から Contentful のコンテンツを参照していきます

下記の公式ドキュメントを参照していきます。

https://contentful.github.io/contentful.js/contentful/7.10.0/

まずはcontentfulのnpmパッケージをインストール

yarn add contentful

次にcontentfulのSpace IDとaccess tokenを使って、実際にコンテンツを取得していきます
ここではContentfulでアカウントを作ったときに最初から用意されているThe example projectを使ってコンテンツを取得していきます。

なお、Space IDとAccess Tokenは下記から

f:id:shinshin86:20190919221500p:plain

Entry IDはエントリー画面の下記のボタンから確認できます。

f:id:shinshin86:20190919221515p:plain

取得サンプルは下記となります。 (ここではNode.jsのスクリプトとして一旦書いています)

const contentful = require("contentful");

(async () => {
  const space = "SPACE_ID";
  const accessToken = "ACCESS_TOKEN";
  
  const client = contentful.createClient({ space, accessToken });

  const entryId = "ENTRY_ID";
  const entry = await client.getEntry(entryId);
  console.log(entry); // 対象のEntry内容を取得できる
})();

Next.js上でContentfulのコンテンツを、SSRした状態で表示させる

ここまでくれば、あとはNext.jsで描画させた際にContentfulからコンテンツを取得して描画すればよいだけです。

pages/index.tsxを下記のように編集します。

const contentful = require("contentful");

const Index = ({ title, createdAt }) => (
  <div>
    タイトル: {title}<br />
    作成日: {createdAt}
  </div>
)

Index.getInitialProps = async () => {
  const space = "SPACE_ID";
  const accessToken = "ACCESS_TOKEN";
  
  const client = contentful.createClient({ space, accessToken });

  const entryId = "ENTRY_ID";
  const entry = await client.getEntry(entryId);
  return ({ title: entry.fields.title, createdAt: entry.sys.createdAt });
};

export default Index;

これでyarn next devしてlocalhost:3000にアクセスすると、タイトルと作成日にContentfulからの値が格納されています。
またgetInitialProps内で値を取得しているため、SSRもできています。
HTMLのソースコードを表示すると、ソース内に取得したContentful内のデータが取得できているのが確認できます。

おっと、そういえばTypeScriptを使えるように設定していて、ファイルもindex.tsxとしていたのに、普通にjsで書いていました。
後ほど、TypeScriptに書き直したものを追記します。

が、もう体力ゼロになってきたので、今日はこのへんで。。

TypeScriptで書き直しました

const contentful = require("contentful");

interface entryObj {
  title: string;
  createdAt: string;
}

const Index = ({ title, createdAt }: entryObj) => (
  <div>
    タイトル: {title}<br />
    作成日: {createdAt}
  </div>
)

Index.getInitialProps = async (): Promise<entryObj> => {
  const space = "SPACE_ID";
  const accessToken = "ACCESS_TOKEN";
  
  const client = contentful.createClient({ space, accessToken });

  const entryId = "ENTRY_ID";
  const entry = await client.getEntry(entryId);
  return ({ title: entry.fields.title, createdAt: entry.sys.createdAt });
};

export default Index;

レコメンド機能のおかげでビリー・アイリッシュを聴く気になれない

Billie Eilish

今世間で話題になっているビリー・アイリッシュ。 とんがっている見た目と自然体のような振る舞い、あのトムヨークが褒めたりしていることから、きっと良い意味でエッジの効いた音楽を鳴らしているんだろうなと思っている。

だが、私はまた彼女の音楽を聴いていない。まるで聴く気にならないのだ。
それは彼女の魅力とは無関係の話だ。
これはレコメンド機能がもたらす、弊害に関する話だ。

ニュースアプリを開いていると、毎日のようにビリー・アイリッシュに関する記事が目に飛び込んでくる。ビリーアイリッシュのなんたら（有名な曲らしい）という曲ができた背景とか、有名になることに対する苦悩とか。
これらはだいたいニュースアプリのレコメンド機能として載っている。
レコメンド機能的に私はビリーアイリッシュが好きな人種というわけだ。私のどんなところがそれに当てはまるかは分からないが、あー君って絶対ビリーアイリッシュとか好きだよ！って言われるタイプなのだろう。

人間というのは天邪鬼な生き物なので、理由もイマイチわからないまま、あなたって絶対これ好きだから！と勧められると、逆に聴きたくなくなるというのは良くあることだ。
勿論、それが信頼の置ける人間であれば話は別だが、特に何の感情も持っていないニュースアプリに勧められると、聞く気が失せてしまうのだ。

と、ここまで書いていて思ったが、YouTubeでレコメンドされる動画、Apple Musicなどでレコメンドされる音楽は割と抵抗なしに見たり聴いたりしている。
ということは、レコメンド機能に対する信頼度というのは確実にあるわけだ。
信頼度をどう構築していくか？というのはまた別の話になるが、これからの時代、レコメンド機能というのも信頼を築いていかなければいけない時代となるのかもしれない。

というわけで、私はまだしばらくビリーアイリッシュを聴くことはなさそうだ。

ポーランド・クラクフで初開催中のApex Legendsの世界大会、今夜が決勝

Apex Legends

Apex Legends の世界大会が2019年9月13日(金)よりポーランド・クラクフで開催されている。
私は昨夜より見始めたが、これがプロ同士の戦いなのかーと思いながら、楽しく見させてもらった。

www.4gamer.net

　株式会社CyberZ（本社：東京都渋谷区、代表取締役社長：山内隆裕）が提供するゲーム動画配信プラットフォーム「OPENREC.tv」（オープンレックティービー）は、2019年9月13日(金)よりポーランド・クラクフで初開催される公式eスポーツ大会「Apex Legends Preseason Invitational」をオリジナル日本語実況解説で完全生配信することをお知らせいたします

ちなみに上記引用にあるように、OPENREC.tv が日本語実況解説で生配信をしている。
というわけで、早速iPhoneにアプリを入れて見ていたが、web上からも見れるようだったので、今夜の配信URLを下に貼っておきます。
今夜が決勝、配信は日本時間の 20:00 から。

www.openrec.tv

ちなみに賞金総額は ＄500,000（約5,400万円）らしい。
すごいね！

台風15号被害からの停電復旧・ならびに災害時無料Wi-Fiについて

千葉県停電

この２日間ほとんどニュースに触れていませんでしたが、千葉県が今回の台風15号の影響により、大変なことになっていました。
電力会社による停電復旧スケジュール 、ならびに 災害時無料Wi-Fiに関する情報を下にひとまず載せておきます。

なお、停電の方は今日には全面復旧となる見通しのようです。

追記: 全面復旧は13日以降となるようだ

www.asahi.com

電力会社による停電復旧スケジュールについて

下記は電力会社からのリリースとなります。PDFファイルです。
9/9に出されたリリースのようなので、復旧見込みが明後日以降となっているもの以外はすでに復旧しているのでしょうか。
(実際のところは自分もなんとも言えないですが)

http://www.tepco.co.jp/press/release/2019/pdf3/190909j0401.pdf

災害時無料Wi-Fi「00000JAPAN」が千葉県全域で展開

japanese.engadget.com

www.nttdocomo.co.jp

KDDIとワイヤ・アンド・ワイヤレス（Wi2）、ソフトバンク、NTTドコモが設置した千葉県内のWi-Fiスポットが「00000JAPAN」として開放されているようです。
私は実際に試したわけではありませんが、エリア内に入ると 00000JAPAN にパスワード無しで接続できるようになるということだと思います。
ただし暗号化されていないWi-Fiスポットのようなので、クレジットカード情報や個人情報など機密情報を扱った通信は行わないようにしてください。