at backyard

Color my life with the chaos of trouble.

浅野いにおと20代の私

浅野いにおの漫画家入門

先日、少しずつ読み続けていた、浅野いにおの漫画家入門を読み終えた。
浅野いにおのプンプンを読んで、なんだこのブラックフラッグばりのヒリヒリとしたオルタナ感に、性格をめちゃくちゃ悪くしたサイモン&ガーファンクルのような救われない青春感を混ぜ合わせた問題作は!!、と衝撃を受けてから、気づけばもう10年以上経っているような気がする。

エッセイといったカジュアルな文体で読む浅野いにおは、想像した通りに脱力していて冷めていて、でもさすがと言っていいのか、文章はやはりうまかった。

漫画家入門について簡潔に感想を書いておくと、浅野いにおが好きなら、まず楽しめる内容だと思う。
あと、本の中に出てくる、ゆかちゃんというアシスタントの子の姿を見て、最初山本さほさんが描かれたのかと思ったが人違いだった。
そんなどうでもいいような感想を書いてしまったが、内容は良かった。
一点だけ文句をつけるなら、なんでKindle版がなく紙の本オンリーなのか!というぐらいである。
が、まあ、ひさびさに手にする紙の本も悪くはなかった。

浅野いにおは、文章もすごい。初めてのエッセイ集。 再婚、新居の購入、画業20周年。生活をとおして「漫画を描くこと」を見つめた、1年の記録。

話は少し変わるが、私が山本さほさんのことを知ったのはrebuild.fmで宮川さんが紹介していたからだった。
そして、その山本さほさんの無慈悲なエイトビットというエッセイ漫画に浅野いにおが登場していて、遠い過去に葬り去られた二十代の記憶が蘇ってきた。

20代の頃、私は音楽で食べていくためにガムシャラに曲を作りまくっていた。
Perfumeの曲を聴きながら中田ヤスタカの音作りを研究していたのも、はるか遠い昔のことのようだ。
(これまた話がずれるけど、Perfumeの曲もApple Musicで色々と聴けるようになって嬉しい限りです。)

Perfume the Best

Perfume the Best "P Cubed"

  • Perfume
  • エレクトロニック
  • ¥2954
music.apple.com

気づけば、30も半ばに差し替かかる今日この頃、最近では自分の年齢も分からなくなってしまった。
そのことを妻に話すと笑われてしまう。たしかに私も人から同じことを言われたら同じように笑うだろう。
自分の年齢は分からないが妻が同い年のため、妻の年齢を思い浮かべてから自分の年齢に気づくという不思議なプロセスを経て、最近は自分の年齢を認識している。

作曲家としてひたすら曲を書いていたと思っていたら、いつの間にやらソフトウェアエンジニアとなり、気づいたらスタートアップでコードを書いている。
人生とは何が起こるか分からないものだと、つくづく思う。ただ、だからこそ人生は楽しい。

Spotifyをアプリをインストールすることなく、ブラウザから聴く方法

だいぶ今更な話題ではあるのだけど、ふとシャワー中に今でも使えるのかなと思い立ち、SpotifyのWeb playerにアクセスしてみたら、変わらず使えるようだったので一応書いておく。

下記にアクセスすることでSpotifyのアプリをインストールすることなく、ChromeなどのブラウザからSpotifyを聴くことができる。

open.spotify.com

こちらで音楽を聴くには自身のアカウントでログインする必要があるが、無料アカウントで問題ない。
ログインすればすぐに音楽が聴けるし、自分のプレイリストにもアクセスできる。
結構知っておくと便利。

数年前、自宅で古いWindowsマシンにLinuxを入れて遊んでいたときに、よくChrome上からSpotifyのWeb Player経由で音楽を聴いていた。

最後に、Spotifyの公式ドキュメントも見つけたの下に貼っておく

support.spotify.com

Reactでnotificationを簡単に実装できるreact-notificationsを試してみた

Reactでnotificationを簡単に実装できるreact-notificationsを試してみた

Reactで簡単にnotificationを使えるライブラリを見つけた

github.com

create-react-appを使ってサクッと試してみる

npx create-react-app react-notifications-sample
cd react-notifications-sample

create-react-appyarn start したときに勝手にブラウザ立ち上がるのが個人的に嫌いなので、ついでに startコマンドを下記のように書き換える。

    "start": "BROWSER=none react-scripts start",

react-notificationsをインストール

yarn add react-notifications

src/App.js を下記のように書き換える。
React NotificationsのREADMEに書かれているサンプルをそのまま取り入れつつ、書いています。

import React from 'react';
import './App.css';
import 'react-notifications/lib/notifications.css';
import {
  NotificationContainer,
  NotificationManager
} from 'react-notifications';

const createNotification = type => {
  switch (type) {
    case 'info':
      NotificationManager.info('Info message');
      break;
    case 'success':
      NotificationManager.success('Success message', 'Title here');
      break;
    case 'warning':
      NotificationManager.warning(
        'Warning message',
        'Close after 3000ms',
        3000
      );
      break;
    case 'error':
      NotificationManager.error('Error message', 'Click me!', 5000, () => {
        alert('callback');
      });
      break;
    default:
      console.log("Couldn't find notification type");
      break;
  }
};

export default () => {
  return (
    <div className="App">
      <button onClick={() => createNotification('info')}>Info</button>
      <br />
      <button onClick={() => createNotification('success')}>Success</button>
      <br />
      <button onClick={() => createNotification('warning')}>Warning</button>
      <br />
      <button onClick={() => createNotification('error')}>Error</button>
      <br />
      <NotificationContainer />
    </div>
  );
};

動かしてみたサンプルが下記

f:id:shinshin86:20191009220259g:plain

READMEを軽く読んだだけでも、結構使いやすそうな気がしたので、サクッと通知をReactで実装したいときは良いかもしれない。

NotificationContainer Props

https://github.com/minhtranite/react-notifications#notificationcontainer-props

NotificationManager API

https://github.com/minhtranite/react-notifications#notificationmanager-api

macOS Catalina 10.15がリリースされたけど、Logic Pro Xで音楽作れなくなると困るので、上げるのはもう少し待つことにする

Ableton の Live9はアップデートすると動かなくなるみたい

このツイートを見て、そういえばLogic Pro Xはどうかなと思って調べたら、やはり少し待ったほうが良さそうだという結論に至りました。

9to5mac.com

ringosuki.hateblo.jp

Catalinaから32-bitアプリケーションが動作しなくなるので、Logic Pro X自体は動くけど、サードパーティ製のプラグインとかで動かなくなるものとかが出てくるかもしれないよう。
またセキュリティ周りも強化されているので、そこのところでも影響が出そうとのことでした。

上げたいけど...しばらくは様子見ておくかー

pyinstallerを用いて作成したwindows用のバイナリにてssh接続を実施する

こんなメモがずっと下書きの中で眠っていた。たぶん書いたのは数年前とかかも、、、眠らせておいても、削除することになるだけなので、公開します。
個人的な備忘録といった感じです。

ちなみに内容的には、調べた際に参照したサイトを淡々と張っているという感じです。サンプルコードとかあった方がいいよなーと思いつつ、Windowsマシンを引っ張り出してくるのを億劫に感じ、このまま公開します。

EC2へのSSH接続をWindows上で実行する

Windows端末からEC2へSSH接続し、SCPでファイルをアップロードするという工程を、exeを叩くだけで実施できるようにしました。
特に目新しいことは書きませんが、exe作成にあたっての振り返りを実施します。

設定ファイルはiniファイルで管理

EC2へのSSH接続に関する設定は.iniファイルから読み込んで使用しました。

読み込みの実装については下記の記事を参考にさせていただきました。

こちらの方の実装を参考にさせていただきました。

qiita.com

SSHとSCPについて

下記の記事を参考にさせていただきました。

qiita.com

gist.github.com

実際に実装する上で気をつけたこと

exeファイルを叩いた際にDOS窓が表示されますが、特に意識しないと処理が終了した時点でDOS窓はすぐに閉じてしまいます。 そのためinput()を使用して処理の経過がわかるように、処理を一時停止しながら処理を進めてもらうようにしました。

Python2系ではraw_input()でしたが、Python3ではinput()となっています。

print(result) # ここまでの処理結果をDOS窓上に表示します
input("Enterキーを押してください")
# ↓次の処理に続く

Airbnbが作ったReactのCalendarライブラリ、react-datesを試してみる

Airbnb製のReact用Calendarライブラリ、react-datesというものを試してみました。今回はその備忘録
(結構導入、というかセットアップ段階でハマりどころが個人的に多かったので、この記録には誤りが含まれている可能性があります。割と最後までやるのに疲れて、途中適当になっているかも)

github.com

サンプルアプリの雛形を作成

以前書いたReactのi18対応のポストの導入を参考に creat-react-app を使ってReactアプリの雛形を作成していきます。

shinshin86.hateblo.jp

コマンドのログ

npx create-react-app react-dates-sample
cd react-dates-sample

# ブラウザが勝手に立ち上がらないようにする。具体的な編集内容は下記参照
vim package.json

yarn start

👆で実行しているpackage.jsonの編集内容

diff --git a/package.json b/package.json
index d88b47b..f69481a 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "react-scripts": "3.2.0"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "BROWSER=none react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

react-datesをインストール

githubのreadmeを見ると、npmを使った形でインストールコマンドが書かれているので、yarnを使った形に書き換えてみました。

(
  export PKG=react-dates;
  yarn info "$PKG" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g; s/ *//g' | xargs yarn add "$PKG"
)

上記コマンドで react-dates の依存関係をまとめてインストールすることができます。
(こういうコマンドの使い方をしたことなかったので勉強になりました)

と、書きながらコマンドを打っていたら、下記のようなエラーが出てしまいました。

error An unexpected error occurred: "type:inspectdata: Invalid protocol: type:".

ぬーん、自分のnpm(yarn)力が足りないのは百も承知ですが、ここのエラー解決に時間を使うのは、本質ではないので、下記のような回りくどいやり方でインストールすることにしました。

yarn info react-dates  peerDependencies

これで依存関係が記述されたjsonが吐き出されます。

{ '@babel/runtime':
   '^7.0.0',
  moment:
   '^2.18.1',
  react:
   '^0.14 || ^15.5.4 || ^16.1.1',
  'react-dom':
   '^0.14 || ^15.5.4 || ^16.1.1',
  'react-with-direction':
   '^1.3.1' }

上で出てきた依存情報を元にyarn addコマンドを下記のように組み立てて実行していきます。

yarn add @babel/runtime@^7.0.0 moment@^2.18.1 react@^16.1.1 react-dom@^16.1.1 react-with-direction@^1.3.1

これで依存するライブラリのインストールは完了。あとは下記コマンドでreact-dates自体をインストール

yarn add react-dates

(ここらへん、ちょっと適当な感じで若干進めてしまっているので、もうちょっとマシなやり方がありそうな気はしている。。。)

react-datesでカレンダーを作成

まずは実際に動作しているところのGifを貼ります。
マウスを使わなくてもいい感じに操作できるようになっているのも、とてもいいところ!

f:id:shinshin86:20191005083731g:plain

create-react-appで生成した雛形に対して、下記のような変更を加えています。

diff --git a/src/App.js b/src/App.js
index ce9cbd2..aa75935 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,24 +1,26 @@
-import React from 'react';
-import logo from './logo.svg';
+import React, { useState } from 'react';
 import './App.css';
+import 'react-dates/initialize';
+import 'react-dates/lib/css/_datepicker.css';
+import { SingleDatePicker } from 'react-dates';
+import moment from 'moment';

 function App() {
+  const [date, setDate] = useState(moment);
+  const [focused, setFocused] = useState(false);
+
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <div>
+        <SingleDatePicker
+          date={date}
+          onDateChange={date => setDate(date)}
+          focused={focused}
+          onFocusChange={focused => setFocused(focused)}
+          id="date"
+          onClose={focused => setFocused(false)}
+        />
+      </div>
     </div>
   );
 }

ただ、ここに行き着くまでに結構消耗しているせいで、あまり細かくは検証していないで、不要な処理が混ざっているかも。

AirbnbのStroybookを参照しながら試行錯誤しつつ、作ってみました。

https://airbnb.io/react-dates/?path=/story/singledatepicker-sdp--default

AWSのCodeBuildで"layer does not exist"というエラーが出たとき

"failed to export image: failed to create image: failed to get layer sha256:xxx: layer does not exist" というエラーで落ちる

ある日、AWSのCodeBuildが失敗した。
失敗前の修正でDockerfileを修正していたため、この変更が引き金になっていたのは明確だった。

ただ、エラーの内容が "failed to export image: failed to create image: failed to get layer sha256:xxx: layer does not exist" というものだったため、最初原因がわからず悩んだ。

そしてエラーで落ちる箇所が Dockerfile内でCOPY している箇所で落ちるというものだった

問題の解決のために参照したissueが下記となる。

github.com

自身の英語力の関係上、このissueをまだ深く読み解けたわけではないのだが、 どうやら原因としてはCOPYコマンドの挙動に問題があるようだ。

整理すると

  • AWS の CodeBuild で使用されているDocker環境が COPY コマンドに問題があるバージョンのよう
  • その環境で COPY コマンドを2度続けて実行したため failed to export image: failed to create image: failed to get layer sha256:xxx: layer does not exist" というエラーが発生していた

という形になる。

ただ以前もCOPYコマンドは同じように書いていたが、なぜ今回エラーになったのか?
ちょうどこのタイミングで使用するdocker imageをamazon linuxのv1からamazon linux v2に変えたことが原因としてありそうだ。

結果としては、COPYコマンドを2回続けて書いていた箇所を削除し、一つのCOPYで済ませるように変更することでこの問題は解決した。

ちなみにCodeBuildで動かす前にローカル環境(macOS)でdocker buildはしており、こちらは問題なく成功している。
ということは、ローカル上のDocker環境では問題ないということになる。

CodeBuildで動いているランタイムがたまたまこの問題を引き起こすものになっていたということだろうか。

docs.aws.amazon.com

AWS CodeBuildをローカル環境で試す

なお、AmazonはCodeBuildのDocker imageをDocker Hubで公開しているようだ。

https://hub.docker.com/r/amazon/aws-codebuild-local/

こちらは試していないが、もしこれで同じ環境でテストできるようなら、これは嬉しいところ