Vue + AWS Amplify で S3へ画像アップロードとGraphQLのsubscriptionで結果を受け取る

先日の続き。

jacoyutorius.hatenablog.com

 

Amplifyを使うと認証だけでなく、GraphQLでDynamoDBと接続できたり、S3へのファイルアップロード機能をわりと簡単に実装することができる。

 

ということでコードの説明とかAmplify CLIの説明とかせずに結果だけ。

たまにGraphQLのsubscriptionの結果が重複して返ってくることがあるのだけど原因は不明。

 

youtu.be

 

コードはここです。

github.com

Queenとぼく

「ボヘミアン・ラプソディ」を観ていろいろな人があれやこれや語ってるのを見て、自分も何か言っておくかという気持ちになっていたのだけど、熱狂もやや治まってきたし面倒なので箇条書きで書く。
 
  • いつ知ったかは覚えてないけど、高校生の頃にはQueenを認識していた
  • 友人がベストアルバムのBoxセットを貸してくれた

    • ちなみに今も借りたまま
    • 弟がたまに聴いてるっぽい
  • フレディがゲイだということには大して驚かなかった
    • むしろ恋人が居てさらに異性の生涯の理解者も居て幸せだったんだなーくらいに思っていた
  • 曲はめちゃくちゃカッコいいな
  • ミュージックビデオはクソダサいな
    • Play The Gameで炎の中から汗まみれのフレディが現れたり、ニギニギしている右拳がアップで写ったり、ジョン・ディーコンのカメラ目線の後にフレディが「ビユ〜〜〜ン、ピユ〜〜〜ン」ってSEに合わせて逆再生でドラムに飛び乗り、また飛び降りてブライアン・メイのギターを無理やり奪って投げ返す、というシーンで大爆笑してた

    • www.youtube.com

      (Queenに限らず昔のMVって変なの多いよね)

  • Radio Ga Gaで観客が曲に合わせて手拍子するの、最近もどこかで見たなと思ったけど、Trainspotting2だ
  • 数年前に「Jewels」とか出たし定期的にQueenリバイバル起きてない？
    • Jewelsのときは「I Was Born To Love You」がやたら流れていた記憶
    • だからJewelsが出たばかりなのに、どうして"むかしQueenってバンドがいてね？"みたいな文脈でいろいろ語られてるのって思ってた、が
      • 調べたら「Jewels」発売されたの2004年だった...まじか。14年も前なら仕方ないね...
  • フレディの命日は僕の8歳の誕生日

AWS Amplifyでユーザー認証とGraphQLの検証

AWSのApp Syncがとても良いという話を聞いたので試してみた。

soundcloud.com

 

 

猫に膝の上に乗られると、適度な重みと温もりのせいかメチャクチャ眠くなる・・・そんな眠気と戦いながらポチポチやっていた。

AWS側の設定とか認証とかもろもろはこちらのブログを参考に。むしろ写経させてもらった感じで。コードも公開されていたのでとても参考になりました。

 

keinumata.hatenablog.com

 

 

僕が手を加えたのはviewの部分とsubscriptionでDBへの更新結果を受け取ってviewに表示するところくらい。

命名とかも超適当なのでコードについては詳しく説明しない。代わりに動画を撮ってみた。

 

www.youtube.com

 

この雑なコードはここに置きました。

github.com

『oasis:supersonic』を観た

『oasis:supersonic』を観た。オアシスのドキュメンタリー映画なんだけど。
 
こういうロックンロール的成功譚を見るのは気が滅入る。
自分にもああ成れる可能性があったことを思い出させられるのよな、こういうドキュメンタリーって。
大学生というモラトリアム期間とロックとサブカルと2chで捻くれて4回転半くらい捻って着地したら結局普通みたいなひねくれ方をしていた自分たちには音楽で食っていくなんて選択肢はなかった。
真剣に音楽をやってた奴の大半は格好悪かったし、自分ら程度の実力で食ってけるかよと思ってたし、「音楽に救われた」とか言うやつを指さして笑ってたわ。
 
これを観ると未だにロックンロール的成功が格好良く見えてくる。
その一方で気が滅入るのは、目についたものにツバを吐きかけネタにするだけで大した目標もなく野望もなく人生を賭けるものもなかった、だけどめちゃくちゃ楽しかったあの頃を否定するみたいなんだよな。
 
 
ついさっき35歳になった。
oasisを知ってから15年以上経って、結局ロックンロール的成功も得られなかったし、卒業して就職して結婚して毎日一緒だった友人達とはバラバラになってしまった。
体重は15キロ増えたし髪のボリュームもなくなってきた。
だけどまだ諦めてないぞ！
 

ちなみにoasisはAcquiesceが一番好き。兄弟が一緒に歌ってる曲にハズレない。
 
 

ラーメンの煮玉子をすぐ食べる友人

大学のころ、ラーメンに載っている煮玉子を出された早々に食べる友人が居て、

理由を聞いたら「卵がまだ冷たいうちに食べるほうが美味しい」とのことだった。

 

と、今日ラーメンを食べながら思い出したので試してみたんだけど、確かに。わりといける。

（僕は黄身が崩れてスープに溶け出すのが嫌なので2口くらいですぐ食べてしまう派）

Nuxt2.0でショッピングカートを作る

Nuxt2.0がリリースされたので試してみた。簡単なショッピングカート。
 
 
Nuxtは2.0からはCLIツールが提供されている。
 
create-nuxt-appをインストールしてコマンドを実行すると以下のように色々聞かれる。
APIサーバー用にexpress、CSSフレームワークにbulma、他にaxiosを一緒にインストールした。
 
 
$ create-nuxt-app Nuxt2ShoppingCart
> Generating Nuxt.js project in /Users/yuto-ogi/Work/nuxt/Nuxt2ShoppingCart
? Project name Nuxt2ShoppingCart
? Project description My praiseworthy Nuxt.js project
? Use a custom server framework express
? Use a custom UI framework bulma
? Choose rendering mode Universal
? Use axios module yes
? Use eslint no
? Use prettier no
? Author name yutoogi
? Choose a package manager yarn
Initialized empty Git repository in /Users/yuto-ogi/Work/nuxt/Nuxt2ShoppingCart/.git/
yarn install v0.21.3
info No lockfile found.
[1/4] 🔍  Resolving packages...
 
~
 
success Saved lockfile.
✨  Done in 126.85s.
 
  To get started:
 
    cd Nuxt2ShoppingCart
    yarn run dev
 
  To build & start for production:
 
    cd Nuxt2ShoppingCart
    yarn run build
    yarn start
 
  
で、3~4時間あれこれやってできあがったのがこれ。
カートの情報はLocalStorageにも保存しており、ページリロード後に復元されるようにしている。
「ADD」ボタンを押したときとかカートをクリアしたときの反応が分かりづらかったり、font-awesomeが読み込まれなかったりするけどまぁいいか。
 

f:id:jacoyutorius:20180929232316g:plain

 

業務引き継ぎなど

2年くらい関わっていた一人プロジェクトの引き継ぎをすることになり、資料を作ったり口頭で説明をしたりなどしている。
なにもかもが僕の頭の中にしか無く、それが2年分もあるのだから全てを引き継ぐのはまぁ、無理だろうな。
 
引き継ぎ用のドキュメントを作るのも一苦労。
こういうときに備えてしっかり残しておいた手順書やメモ書きが陳腐化していて自分すら混乱させる。
 
渡したい情報には現在・過去・未来とそれぞれの姿があり、現在を伝えようとするとそれに至る経緯について説明したくなるし、
こう直したほうが良いとか、こうしたかったという説明もしたくなってしまう。
 
 
オーマイどうしてこんなことに。
一人プロジェクト体制なのが悪い、人を追加しないのが悪い、人がいない？人が来たがらない環境だからいけないのだ、
リモートワークを許可して働きやすい環境を！ 最新のフレームワークを導入しろ！…etc
 
とはいえ一人プロジェクトで気が楽だったのも事実であり、
あれやこれやの負債も全て自分が作ったものであれば、しっかり処理してやらねばなぁ。