浅野いにおと20代の私
浅野いにおの漫画家入門
先日、少しずつ読み続けていた、浅野いにおの漫画家入門を読み終えた。
浅野いにおのプンプンを読んで、なんだこのブラックフラッグばりのヒリヒリとしたオルタナ感に、性格をめちゃくちゃ悪くしたサイモン&ガーファンクルのような救われない青春感を混ぜ合わせた問題作は!!、と衝撃を受けてから、気づけばもう10年以上経っているような気がする。
エッセイといったカジュアルな文体で読む浅野いにおは、想像した通りに脱力していて冷めていて、でもさすがと言っていいのか、文章はやはりうまかった。
漫画家入門について簡潔に感想を書いておくと、浅野いにおが好きなら、まず楽しめる内容だと思う。
あと、本の中に出てくる、ゆかちゃんというアシスタントの子の姿を見て、最初山本さほさんが描かれたのかと思ったが人違いだった。
そんなどうでもいいような感想を書いてしまったが、内容は良かった。
一点だけ文句をつけるなら、なんでKindle版がなく紙の本オンリーなのか!というぐらいである。
が、まあ、ひさびさに手にする紙の本も悪くはなかった。
話は少し変わるが、私が山本さほさんのことを知ったのはrebuild.fmで宮川さんが紹介していたからだった。
そして、その山本さほさんの無慈悲なエイトビットというエッセイ漫画に浅野いにおが登場していて、遠い過去に葬り去られた二十代の記憶が蘇ってきた。
20代の頃、私は音楽で食べていくためにガムシャラに曲を作りまくっていた。
Perfumeの曲を聴きながら中田ヤスタカの音作りを研究していたのも、はるか遠い昔のことのようだ。
(これまた話がずれるけど、Perfumeの曲もApple Musicで色々と聴けるようになって嬉しい限りです。)
気づけば、30も半ばに差し替かかる今日この頃、最近では自分の年齢も分からなくなってしまった。
そのことを妻に話すと笑われてしまう。たしかに私も人から同じことを言われたら同じように笑うだろう。
自分の年齢は分からないが妻が同い年のため、妻の年齢を思い浮かべてから自分の年齢に気づくという不思議なプロセスを経て、最近は自分の年齢を認識している。
作曲家としてひたすら曲を書いていたと思っていたら、いつの間にやらソフトウェアエンジニアとなり、気づいたらスタートアップでコードを書いている。
人生とは何が起こるか分からないものだと、つくづく思う。ただ、だからこそ人生は楽しい。
Spotifyをアプリをインストールすることなく、ブラウザから聴く方法
だいぶ今更な話題ではあるのだけど、ふとシャワー中に今でも使えるのかなと思い立ち、SpotifyのWeb playerにアクセスしてみたら、変わらず使えるようだったので一応書いておく。
下記にアクセスすることでSpotifyのアプリをインストールすることなく、ChromeなどのブラウザからSpotifyを聴くことができる。
こちらで音楽を聴くには自身のアカウントでログインする必要があるが、無料アカウントで問題ない。
ログインすればすぐに音楽が聴けるし、自分のプレイリストにもアクセスできる。
結構知っておくと便利。
数年前、自宅で古いWindowsマシンにLinuxを入れて遊んでいたときに、よくChrome上からSpotifyのWeb Player経由で音楽を聴いていた。
最後に、Spotifyの公式ドキュメントも見つけたの下に貼っておく
Reactでnotificationを簡単に実装できるreact-notificationsを試してみた
Reactでnotificationを簡単に実装できるreact-notificationsを試してみた
Reactで簡単にnotificationを使えるライブラリを見つけた
create-react-appを使ってサクッと試してみる
npx create-react-app react-notifications-sample cd react-notifications-sample
create-react-app
でyarn 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> ); };
動かしてみたサンプルが下記
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はアップデートすると動かなくなるみたい
【重要なお知らせ】
— AbletonJP (@AbletonJP) October 8, 2019
macOS Catalinaがリリースとなりましたが、Live 9にはmacOS 10.15のリリースで下位扱いになるコンポーネントが含まれています。 そのため、macOS 10.15にアップデートすると、Live 9が起動しなくなると考えられます。
詳細はこちらからご確認ください:https://t.co/Rc7H4cdLnO pic.twitter.com/TOcYcLTLhA
このツイートを見て、そういえばLogic Pro Xはどうかなと思って調べたら、やはり少し待ったほうが良さそうだという結論に至りました。
Catalinaから32-bitアプリケーションが動作しなくなるので、Logic Pro X自体は動くけど、サードパーティ製のプラグインとかで動かなくなるものとかが出てくるかもしれないよう。
またセキュリティ周りも強化されているので、そこのところでも影響が出そうとのことでした。
上げたいけど...しばらくは様子見ておくかー
pyinstallerを用いて作成したwindows用のバイナリにてssh接続を実施する
こんなメモがずっと下書きの中で眠っていた。たぶん書いたのは数年前とかかも、、、眠らせておいても、削除することになるだけなので、公開します。
個人的な備忘録といった感じです。
ちなみに内容的には、調べた際に参照したサイトを淡々と張っているという感じです。サンプルコードとかあった方がいいよなーと思いつつ、Windowsマシンを引っ張り出してくるのを億劫に感じ、このまま公開します。
EC2へのSSH接続をWindows上で実行する
Windows端末からEC2へSSH接続し、SCPでファイルをアップロードするという工程を、exeを叩くだけで実施できるようにしました。
特に目新しいことは書きませんが、exe作成にあたっての振り返りを実施します。
設定ファイルはiniファイルで管理
EC2へのSSH接続に関する設定は.ini
ファイルから読み込んで使用しました。
読み込みの実装については下記の記事を参考にさせていただきました。
こちらの方の実装を参考にさせていただきました。
SSHとSCPについて
下記の記事を参考にさせていただきました。
実際に実装する上で気をつけたこと
exeファイルを叩いた際にDOS窓が表示されますが、特に意識しないと処理が終了した時点でDOS窓はすぐに閉じてしまいます。
そのためinput()
を使用して処理の経過がわかるように、処理を一時停止しながら処理を進めてもらうようにしました。
Python2系ではraw_input()
でしたが、Python3ではinput()
となっています。
print(result) # ここまでの処理結果をDOS窓上に表示します input("Enterキーを押してください") # ↓次の処理に続く
Airbnbが作ったReactのCalendarライブラリ、react-datesを試してみる
Airbnb製のReact用Calendarライブラリ、react-datesというものを試してみました。今回はその備忘録
(結構導入、というかセットアップ段階でハマりどころが個人的に多かったので、この記録には誤りが含まれている可能性があります。割と最後までやるのに疲れて、途中適当になっているかも)
サンプルアプリの雛形を作成
以前書いたReactのi18対応のポストの導入を参考に creat-react-app
を使ってReactアプリの雛形を作成していきます。
コマンドのログ
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を貼ります。
マウスを使わなくてもいい感じに操作できるようになっているのも、とてもいいところ!
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が下記となる。
自身の英語力の関係上、この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で動いているランタイムがたまたまこの問題を引き起こすものになっていたということだろうか。
AWS CodeBuildをローカル環境で試す
なお、AmazonはCodeBuildのDocker imageをDocker Hubで公開しているようだ。
https://hub.docker.com/r/amazon/aws-codebuild-local/
こちらは試していないが、もしこれで同じ環境でテストできるようなら、これは嬉しいところ