ReactとCanvasでお絵かき機能を作った話 #kyotoasterisk

プレゼンモード
再生
← / →で移動
fでフルスクリーン
escでおわる

ReactとCanvasでお絵かき機能を作った話

id:Pasta-K at 京都.なんか #2

こんにちは

• 京都の大学生です。
• Notaって会社でGyazoってサービスの開発のアルバイトをしています
• 趣味としてBrowser Extensionについての観察を行っています

Gyazoの画像編集機能

四角

矢印

文字

フリーハンドペン

画像編集機能リニューアル

• React諸々の作業も落ち着いてきたので開始
• 図形の再編集・再配置を出来るように
• undoとかあると便利

v1.0の実装状態

• canvasが2つ
  • ユーザーのアクション（線を引くなど）に合わせてドンドンアップデートする用canvas
  • ユーザーのアクションが1つ完了するごとに↑のcanvasから書き込みを移植して蓄積させていく用canvas
    • こっちのcanvasが手前にあって、 mousedown -> mousemove -> mouseup を掴んでドンドン更新していく
    • ユーザーのアクション履歴の管理などもしていないので、それを管理して、そのアクション履歴に呼応してcanvasがドンドン書き換わるという感じにしたい。
• 矢印は絶妙な線の曲がり具合などがハードコーディングされているので、そのライブラリはなんとかそのまま次でも使いたい。

今回の登場人物

• canvas
• ReactComponent
• DOMEvent

canvasをReactで使うときの出来事

ReactComponentツリーの様子

• wrapper #ミスってこいつのrenderが走ってcanvasがupdateされると困りごとが発生しがち
  • なんか # Canvasに重ねたりする要素など
  • canvasを含む要素
    • なんか # ReactCanvasとかだと図形情報を表現するReactComponent

もう少し具体的に

• https://github.com/Flipboard/react-canvas:title: React Canvasの例
  • Surfaceはcanvasだと思ってください

<Surface width={surfaceWidth} height={surfaceHeight} left={0} top={0}>
  <Layer />
  <Image style={imageStyle} src='...' />
  <Text style={textStyle}>
    京都なんか
  </Text>
  <Text>...</Text>
  <Text>...</Text>
  <Image />
  <Text>...</Text>

ドラッグでリサイズとか再配置したい

• マウスポインタがcanvas上のどの絵を選択しているか把握する必要がある
• FPS落とさずにヌルヌルcanvasだけを更新したい

DOM Eventのハンドリングは誰が/どうやってやる？

• canvas自身 or ラッパーのdivとかで全部まとめて取る
  • 座標から選択されたっぽい絵を探す
    • 図形の領域を常に取り出し可能な状態で管理しておく
• 図形の位置にdivとかsvgとかなんか適当な要素を重ねて掴む

事例紹介

React Konva

• GitHub - lavrton/react-konva: React Konva is a JavaScript library for drawing complex canvas graphics using React.
• Using React with canvas element — Medium

Konvaという異常に気の利いたCanvasを扱うライブラリを利用したReactComponent集。

採用されている作戦

• canvasを含む要素の子要素にRectとかArrowとかを置いておく
• canvasを覆う同じサイズのdivがいて、それがマウスイベントをmappingする
  • なんか頑張りという感じがする

React-Canvas

• GitHub - Flipboard/react-canvas: High performance <canvas> rendering for React components
• 60fps on the mobile web — Flipboard Engineering

canvasでスクロールに応じて、ドンドン描いていくとDOMよりもrepaintが早くてヌルヌルさせる。お絵かき機能はない。
https://flipboard.com/ のスマホ版で実際に使われている雰囲気っぽい？

採用されている作戦

• canvasを含む要素の子要素にTextとかListとかを置いておく

- canvasを背景にしてて、要素の位置にaタグを重ねてクリック可能にしてる

今回の作戦

• canvasの上に図形と同じ形のdiv OR svgを重ねてイベントをハンドリングしよう
• 上の方のComponentのstateのshapesってとこに図形情報の配列を入れてCanvasの描画状態を管理する
  • ついでにその情報を使って図形の選択などをハンドリングするdivも描画する
  • undo / redo的な操作もstateを更新してやる

雰囲気

• wrapper
  • Layer
    • 矢印
    • 文字
    • 矢印
    • 四角
  • canvas

canvas の状態管理

• canvas
  • contextを操作して描画を更新する
  • contextは1つのcanvasに対して1つ
  • 一度書いた情報を再度canvasから取り出すなどは出来ない
    • 別途良い感じに管理しておく必要がある
• 図形をちょっとズラしたいとか線の色を変えたいとかでも毎回全部描き直す必要がある

React Componentのライフサイクル

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate
• componentWillUnmount

Canvasのアップデートをどのタイミングで挿入するか問題

• componentをアップデートすると保持していたcanvasのcontextが死ぬ
  • 図形に重ねるイベントハンドリングのdivが多いとrepaint地獄で死ぬ
    • canvasでイベントハンドリングを全部やっていれば、この部分で悩まなくて済む
      • 図形の領域かどうかを上手く判定しまくる必要がある
        • 文字？矢印？
• mousedown -> mousemove -> mouseup の間はrender走らせないようにsetStateを叩かずに一旦安静にしておいて、canvasのみを更新する
  • stateに入れずにstoreとか使えば良いのではと思うけど、今はcanvasだけを更新することをstoreのUpdate時に上手くお知らせしないと同じことが起きる
• componentDidUpdateのタイミングで一斉にcanvasを全部描き直す

結果

DEMO

まとめ

• 大体スルスルくらいは動いている状態
• canvasのアップデートタイミングをReactのライフサイクルの中で上手くやっていく必要がある
  • ライフサイクルの気持ちになる必要がある
• DOMは重い

心配事

• なんかもう少し良い感じにモデル化できるのではないか
• React使う必要があるのか

次回予告

• textareaとcanvas同期問題
• HiDPI環境問題
• 拡大縮小機能でcanvasリサイズ問題

お昼ごはん

暑くて家にいることが多い。家の最寄りのローソン、冷やし麺が良いのなくて、ずっとカップ麺食べてる。

レッドシーフードヌードル気に入ってて、週に２回以上食べてる。今日も食べた。

日清食品 カップヌードル レッドシーフードヌードル 75g×20個

2016年7月に読んだマンガ & 2016年8月に読みたいマンガ

お疲れ様です。お盆ですね。Kindle Unlimitedが始まって新刊以外も色々読んでいて盛り上がりがあります。みなさんはいかがですか。

先月分

昨年分

2016年7月に読んだマンガ

盆の国

定期的に夏のノスタルジーを感じさせてくれる作品が出てくるけど、これも良い夏というかお盆のノスタルジーを味わわせてくれる良作。あんまり内容に触れるとネタバレになるので回避するけど、お盆のご先祖が帰ってくるという話とか、その前後のなんとも言えないお盆の日常の空気感をキレイに表現している。この1冊で話もオチまでしっかり収まっていてスッと一気に読める。最高。

盆の国 (トーチコミックス)

甘々と稲妻 ７巻

最初のケーキの話から良い話すぎてヤバかった。幼稚園を卒業して、次から小学生になってつむぎたちがどういう姿を見せてくれるのかが楽しみ。

甘々と稲妻（７） (アフタヌーンコミックス)

マネーフットボール ５巻

この巻は表紙にもなってる外国人スーパースターとの対決をメインに描いてたのだけど、これJ2のあの大阪のチームに居たあの選手がまさにそういう感じだったよなぁ（失笑）って思った。次で最終巻らしい・・・

マネーフットボール　５巻 (芳文社コミックス)

2DK、Gペン、目覚まし時計。

読もう読もうと思って読めてなかったのでまとめて読んだ。2巻3巻は半分くらい続きものだったので、それはそれで良かったけど、1巻みたいな感じの方が個人的には好きかもと思った。こういう女性のヒモになりたい・・・

2DK、Gペン、目覚まし時計。: 1 (百合姫コミックス)

2DK、Gペン、目覚まし時計。: 2 (百合姫コミックス)

2DK、Gペン、目覚まし時計。: 3 (百合姫コミックス)

あげくの果てのカノン １巻

SFというよりもセカイ系的な世界観を舞台にした作品。謎の生物と戦う部隊のエリートである先輩と彼を高校時代から好きで少しメンヘラストーカー感のある主人公との話。カノンの先輩好きエピソードはやばさ全開で逆に良かった。

あげくの果てのカノン（１） (ビッグコミックス)

コネクト 1巻

青春×アニソンというキャッチコピーに惹かれて試し読みして買った作品。

音楽一族に生まれたアニソン好きな主人公がクラスの気になる漫画家な女の子の作品がアニメ化したときに楽曲を担当するという約束から始まる物語。話がうまく転がり過ぎてる気もするけど、最初はこれくらい展開ある方が面白いですね。

コネクト 1 (ヤングジャンプコミックスDIGITAL)

彼女はろくろ首 ３巻

昨今の可愛いラブコメ５本の指に入ると思ってるこの作品も３巻目。ずっとこの世界観では妖怪と人間は共生してると思ってたけど、人間から妖怪は避けられてるということが分かって意外だった。ろくろ首の彼女も避けられる存在だったという過去エピソードがあるんだけど割とヘビー。それじゃあ学校はどういう仕組みなのかちょっと説明が欲しいかも。次とかでわかってくるのかな。

それはさておき今回はデートもあり相変わらず可愛くて、ごちそうさまでした。

彼女はろくろ首（３） (週刊少年マガジンコミックス)

レディ＆オールドマン 1巻

とてつもなくオノナツメ自身が好きそうな世界観でしかも男女のバディを描くというので、本当にノビノビとやっている印象。話自体はまだまだこれから深まっていくなという感じ。

レディ＆オールドマン 1 (ヤングジャンプコミックスDIGITAL)

夕空のクライフイズム ９巻・10巻

8巻から続く両校のイズムがぶつかる熱戦は読み応えあった。9巻の見開きバイシクルは迫力満点で最高だった。10巻で完結して、その完結もどっちかというと打ち切り気味で、主人公たちがクライフイズムのもとで大勝利をするとかそういうシーンはなかったけど、そういう意味では「美しく敗れる」というクライフイズムをこの作品自体が体現したと言えるのかもしれない・・・

だが本音を言うと、実際クライフイズムとサッカー愛に溢れた良作だったのに、打ち切り感が否めないラストだったのが本当に残念。

最後の雨ちゃんと今中の対決も最高で感動した。次作もきっとサッカーマンガだろうから楽しみです。

夕空のクライフイズム（９） (ビッグコミックス)

夕空のクライフイズム 10 (ビッグコミックス)

フットボールネーション 9巻

前巻に引き続きゴールキーパー編。ドイツ仕込のゴールキーパー理論が満載で面白かった。エリア別の跳び方とかポジショニングとか。確かに最近のドイツのキーパーはノイアー始め素晴らしい選手が多いけど、日本ではやっぱりなかなか高校とかではGKコーチが居なかったりもするし、こういう理論を知ってるか否かはかなり大きいよなぁと思った。次もこのままキーパー編かな。

フットボールネーション 9 (ビッグコミックス)

思い、思われ、ふり、ふられ 3巻

朱里の恋愛への考え方がどんどん変わっていく巻だった。登場人物も整理されてきて面白くなってきた感じがする。主人公格が2人いる良さもしっかり出てきている感じがする。巻末の展開は予想外でビックリした。

思い、思われ、ふり、ふられ 3 (マーガレットコミックスDIGITAL)

こいいじ ４巻

いつかはこうなるかなと思ってたけど、なったらなったで急展開だなぁって思ってしまった。うまくいくと良いけど、最終ページが不穏だったしこれまで通り（？）ストレートに上手くはいかないんだろうなぁ。河田さん、今回表紙なのに、良い人過ぎない？？？って思った。でも、まぁもう一悶着あるだろうな。

こいいじ（４） (Ｋｉｓｓコミックス)

お前ら全員めんどくさい！ 5巻

今回は表紙通り久しぶりに良いカズミ巻でしたね。

お前ら全員めんどくさい！(5) (メテオCOMICS)

感覚・ソーダファウンテン 2巻

五感をテーマにしたオムニパス連載の2巻。今回も五感それぞれを扱った良い短編たちだった。特に1本目のおばあちゃんの話が個人的には好きだった。

感覚・ソーダファウンテン(2) (KCx)

新米姉妹のふたりごはん 2巻

ローストビーフ美味しそうでズルい。ああいう分厚いの食べてみたい！！！！！！あと、またたこパやりたくなった。

新米姉妹のふたりごはん2<新米姉妹のふたりごはん> (電撃コミックスNEXT)

恋のツキ 1巻

『あそびあい』の新田章最新作。前作同様、男子は純真まっすぐでそれをのらりくらりと気ままに浮気をしたりして波風を立てる展開。

31歳、同棲３年目で浮気(?)相手が高校生というのが前作と違ってまた味わいがあった。

こういうの描かせると上手いけど、男性の立場からするとなんとも言えない気持ちになるよねぇ。

恋のツキ（１） (モーニングコミックス)

あそびあい（１） (モーニングコミックス)

ＮＥＷ　ＧＡＭＥ！ ４巻・５巻

４巻はいつもどおりの連載をまとめたもの。５巻は連載とは別で描かれた全編描き下ろしの青葉の過去編。

５巻はちょうど１巻の最初と繋がるようになってて面白い。

ＮＥＷ　ＧＡＭＥ！　４巻 (まんがタイムKRコミックス)

ＮＥＷ　ＧＡＭＥ！　５巻 (まんがタイムKRコミックス)

ＵＱ　ＨＯＬＤＥＲ！ 11巻

ラブコメ色強めになってきて、今までの感じ好きだったけどまぁ赤松健だし仕方ないかと思ってたら、ネギま！のキャラがドンドン出てきて、ネギま！まともに読んでないので、混乱してきた感じ。どうやらこのあともドンドン出てくるようでピンチ。

というか、連載開始のときにまさかとは思ったけど、そのあとそういう素振りなくて安心してたのに、この方針でマジでやっていくのか・・・大丈夫か・・・

ＵＱ　ＨＯＬＤＥＲ！（１１） (週刊少年マガジンコミックス)

わたしのふしだら 1巻

タイトルは変わっているけど、『ぼくらのふしだら』の続編。今回は今まで恋愛をしたことのない凛とした印象の女性教師が生徒に恋してしまい同級生になって彼と交流をする願いを叶えるという話。

前回の性欲ほどストレートじゃないけど、恋愛欲のほうが意外とストレートで泥沼かもしれない。ずぶずぶにハマっていくのが2巻で見れるのかな。

わたしのふしだら(1) (ヤングキングコミックス)

ぼくらのふしだら（１） (ヤングキングコミックス)

AIの遺電子 2巻

今回も1巻に劣らず良かった。今回は前巻以上に、AIとヒューマノイドと人の境界や特にヒューマノイドの生死についてしっかりと扱う話があってヘビーな感じだった。面白いんだけど、やっぱりこういう話はなんというかどれもオチが投げっぱなしになるのが、どれもこれもというのはちょっと読んでて読後感が悪いから、3巻もそういうのが続くと少し疲れてしまうかもしれない。

AIの遺電子　２ (少年チャンピオン・コミックス)

第七女子会彷徨 10巻

1〜9巻を一気に読んで、10巻も流れるように読んだ。あまり内容に言及しない方が良い気がするので、各位シュシュッと10巻読んでください。

最高の完結巻で、こんなに伏線があったのかってめちゃくちゃビックリして感激します。

第七女子会彷徨(10)【特典ペーパー付き】 (RYU COMICS)

幸子に幸あれ 3巻

あんまり4コマ読まないんだけど、テンポも良いと思っていて好きだったのだけど終わってしまった。最後まで貧乏でポジティブで時々ブラックジョークな感じで楽しかった。3巻発売と同時に全巻Kindle化されたので、是非。

幸子に幸あれ（３） (ヤングマガジンコミックス)

ちこたん、こわれる 4巻

ラブコメらしく今回は海でのハーレム巻。巨乳タイプのドローンとかドローンがいっぱいの中に潜れて拗ねるとかそういう新たな面があったのは良かった。

ちこたん、こわれる（４） (ヤングマガジンコミックス)

服を着るならこんなふうに

服情報収集。

服を着るならこんなふうに(2)<服を着るならこんなふうに> (カドカワデジタルコミックス)

服を着るならこんなふうに(1)<服を着るならこんなふうに> (カドカワデジタルコミックス)

2016年8月に読みたいマンガ

ナナマル サンバツ(12)<ナナマル サンバツ> (角川コミックス・エース)

プラチナエンド 3 (ジャンプコミックスDIGITAL)

はねバド！（８） (アフタヌーンコミックス)

少女不十分（２） (ヤングマガジンコミックス)

服を着るならこんなふうに(3)<服を着るならこんなふうに> (カドカワデジタルコミックス)

ダンジョン飯 3巻<ダンジョン飯> (ビームコミックス（ハルタ）)

てのひらの熱を（３） (週刊少年マガジンコミックス)

タネも仕掛けもないラブストーリー 2 (ヤングジャンプコミックス)

はんなりギロリの頼子さん 2 (ゼノンコミックス)

累（９） (イブニングコミックス)

スモーキン’パレヱド(2)<スモーキン’パレヱド> (角川コミックス・エース)

重版出来! 8 (ビッグ コミックス)

海咲ライラック 1 (バンブーコミックス)

空のカイン（１） (少年マガジンエッジコミックス)

服を着るならこんなふうに(3)<服を着るならこんなふうに> (カドカワデジタルコミックス)

これは愛じゃないので、よろしく 1 (マーガレットコミックス)

今日もアイツは丸かった。 (マーガレットコミックス)

蒼の六郷 (楽園コミックス)

青春はゾンビでした 1 (マーガレットコミックスDIGITAL)

かぐや様は告らせたい?天才たちの恋愛頭脳戦? 2 (ヤングジャンプコミックスDIGITAL)

最近は主に川と花火を見ました

日曜日は叡電の八瀬駅で毎年やってる地ビールのやつ見に行って、川に行った。

View this post on Instagram

A post shared by Shoot MORII (@pasta_k)

https://www.instagram.com/p/BIynjrCgLvD/

夏！！川！！！ビーール！！！！！

再来週も行くっぽい雰囲気なので来ましょう。

https://atnd.org/events/79852

昨日は花火をした。

盛り上がってきた #LGTM @lgtmcamera pic.twitter.com/KXKOXAKprE

— マジカルペンネくん🍝 (@pastak) 2016年8月9日

サークルロゴできた

線香花火エモかった

個人的オススメKindle Unlimitedで読めるマンガ

Kindle Unlimitedが始まった。始まって即Kindleのエロマンガ事情について記事を投下したところ結構見てもらったのだけど、ネガティブなのだけだとアレな感じがするので、オススメのコミックスでも紹介してバランスを取る作戦です。

ちなみに僕は使い始めて速攻で以下の4シリーズを読みました。

[まとめ買い] ぼくらのへんたい

[まとめ買い] 青い花

ゲーム界のトップに立った天才プログラマー　岩田聡の原点: 高校同期生26人の証言

[まとめ買い] このゆびとまれ

今まで僕が読んだマンガで且つKindle Unlimited対象なものでオススメの作品を列べてみますので参考にしてください。

（尚、個人的な思想によって、複数巻が刊行されていて1巻のみが読み放題対象の作品は除いています。） 2016年9月1日の変更で1巻対象のみになった作品があったりしたので、一部表記を書き直しました

ドロップフレーム

この1年の間で人に勧めた回数が一番多いと思う。

時間軸改変系のサスペンスという感じの作品です。シュタゲとか好きだと絶対にハマると思う。

平和な日常が急におかしくなる1巻がUnlimited対象。その後は少し手がかりが掴み始めつつも謎も増える2巻、そして3巻は大きな秘密が少しずつ紐解き始められます。

[asin:B01HR5M788:detail]

hなhとA子の呪い

人間の「性欲」が生々しく且つとにかく純粋に描かれていて吸い込まれるような魅力がある。1巻の〆が良い意味でかなり後味良くない。

hなhとA子の呪い(1)【特典ペーパー付き】 (RYU COMICS)

同じ作者の十月桜も良いです。どんどんぶちまけていく感じが読んでいて良いです。

十月桜 (RYU COMICS)

第七女子会彷徨

簡単に説明すると【石黒正数＋藤子F不二雄】的な世界観です。1巻のみが対象です。とにかく1巻〜9巻まで読んで、そのまま勢い良く10巻買って読んで、また1巻から読みなおしてください。というか多分そうなります。

[まとめ買い] 第七女子会彷徨

同じ作者のつばな先生の『バベルの図書館』もかなり実験的意欲作で面白いです。

バベルの図書館

うみべの女の子

浅野いにお作品でどれが一番好きかと言われると迷いなくこれを挙げるくらい好き。好きという表現は適当ではないかもしれないけど、とにかくクルものがある。1巻のみ対象です。

[まとめ買い] うみべの女の子

浅野いにお作品だと『虹ヶ原ホログラフ』もUnlimited対象。

虹ヶ原ホログラフ

推しが武道館いってくれたら死ぬ

平尾アウリ先生は距離感の書き方がとても上手いと思う。細かいアイドルヲタネタが多いのでその辺は分かりにくいとこがたまにあるけど、全体としてはテンション高くてテンポも良い読んでて楽しい百合マンガ。

推しが武道館いってくれたら死ぬ(1) (RYU COMICS)

前作の『まんがの作り方』も面白いので是非。

まんがの作り方（１） (RYU COMICS)

リュウ連載以前の作品をまとめた短編集もUnlimitedにあります。

平尾アウリ作品集　４月１日 (RYU COMICS)

その他

細かい感想は省略しますが以下も良い感じです。

人生は二日だけ (RYU COMICS)

花むすび (ゼノンコミックス)

満腹百合 (RYU COMICS)

はんなりギロリの頼子さん １巻 (ゼノンコミックス)

ストロボライト

志乃ちゃんは自分の名前が言えない

[まとめ買い] ピコピコ少年

こいのことば

少女素数　１巻 (まんがタイムKRコミックス)

[asin:B00JB92EVY:detail]

[asin:B01AVV0CJG:detail]

[asin:B00ZEIFZLM:detail]

ゆゆ式　1巻 (まんがタイムKRコミックス)

ゆゆ式　8巻 (まんがタイムKRコミックス)

2DK、Gペン、目覚まし時計。: 1 (百合姫コミックス)

リストランテ・パラディーゾ

[まとめ買い] 午前3時の無法地帯

[asin:B01FVE55A4:detail]

皆さん各々で好きなマンガを紹介する記事を挙げるという展開になってるけど、あれもこれも全部Amazonのサジェスト機能がしょぼすぎるのが悪いと思う。なんとかなって欲しい。

https://kindou.info/72285.html

9年間待ち焦がれ続けた銀杏BOYZのライブを観た

銀杏BOYZ「世界平和祈願ツアー 2016」@なんばHatch観てきた。とにかく感情がエモい。今のうちに書き残しておきたい。

僕と銀杏BOYZの出会いとか思い出とかそういう話は過去の記事に書いてあるので、そちらも読んでもらえると良いかと思います。

銀杏BOYZのライブ、ずっと中学生の頃から行きたくて行きたくてでもそもそもライブをやってないみたいな感じで、遂に8年ぶりに全国ツアー決まって、チケット飛びついて申し込んで当選して大喜びしてた。8年間の間も試しにYouTubeで観てみたり、今年の初めには『愛地獄』の上映会にも行った。

そんな待ちに待った銀杏BOYZのライブ、8年越しにやっと叶ったということで開場前からめちゃくちゃに高まってた。

昔の4人でやってた頃の銀杏BOYZのライブはとにかくめちゃくちゃだった。今回もめちゃくちゃで途中峯田が松葉杖ついてたりもしたけど、峯田はインタビューとかでも言ってる通り脱いだりダイブとかはしなくなってた。その代わりとにかく自由に歌い上げてる印象がしてすごく惹きこまれたし良かった。

弾き語りで『人間』から始まり『生きたい』で徐々にバンド演奏になるのは想定通り。ただもうこの時点で圧倒されてた。『生きたい』は本当に良い。

『若者たち』から『DON'T TRUST OVER THIRTY』までは全力だった。僕もずっとモッシュでもみくちゃになってた。前後左右の人たちとめちゃくちゃになりながら身体をぶつけあいながら、汗が交じり合いながら、時に叫びながら、エネルギーが溢れでて飛び出していった。

峯田が大学時代に好きだったというツチヤアヤコさんの話から彼女を想って書いた曲『YOU & I』に、そして「恥ずかしくなって途中でやめちゃうかも」と言いながら『佳代』*1、そして『べろちゅー』。

『YOU & I』も『佳代』も元の音源よりもかなり優しく歌ってて、峯田の中でしっかり昇華されたのかなぁと思いながら聞いていた。それにしても『佳代』の歌詞めちゃくちゃに良い。観客全員で『佳代』のサビを歌う様子を観た峯田が「すげぇ、oasisのウェンブリーみたいだ」って言ってたのが良かった。

それに続いて『べろちゅー』。『べろちゅー』まっすぐで気持ちがこもってて曲もカッコよくて、これずっと弾き語りでも良いんだけどやっぱりバンド編成で聞けてよかった。サビの歌詞何度聞いても読んでも泣ける。

生まれてこなければよかったと
思ったときもあったけど
でも生きててよかったよ
忘れられない過去にしょんぼり
勝てっこない孤独にどっぷり
でも信じてよかったよ

次は『骨』。ドラマ「奇跡の人」めちゃくちゃ良かったし、『骨』弾き語りは聞いたことあったけど、バンド編成だとこういう感じなんだなぁって思った。

その直後峯田が「君の胸にキスをしたら君はどんな顔するだろう」って言って、まさかと思ったらまさかの『夢で逢えたら』で僕の中で高まりが最高潮になった*2。銀杏BOYZを知るきっかけになった曲を9年のときを超えて目の前で峯田が歌っている状況に自分がいるなんて思いもしなかった。生きてて良かった。当時色々あったけど、辛い時はいつもこの曲を聞いていた。この曲がいつでも助けてくれた。

ここから畳み掛けるように連続で『あいどんわなだい』『BABY BABY』。『あいどんわなだい』の「おっぺけぺー」とかサビの部分とか一度ライブで体験しておきたかったので嬉しかったし超楽しかった。『BABY BABY』は最高の名曲。周りも当然めちゃくちゃもみくちゃになってて、モッシュに揉まれていたら何故か中央よりもちょっとステージ左寄りにいたのに気付いたらかなり右寄りの場所にいた。

『漂流教室』からの『東京』そして『光』。『漂流教室』は大人と子供の絶妙な間の思春期の思い出みたいなののキレイな部分を呼び起こしてくれる。どうも空が繋がってるとは信じられないと言いながら峯田が『東京』を歌う。『光』はエネルギーがこれまた一層スゴい曲だよなぁと思っていたけどそれが目の前の峯田の姿からスピーカーから飛び込んでくる。このパートは観客も落ち着いて峯田の歌に聞き入ってた。

『ボーイズ・オン・ザ・ラン』でまたもみくちゃになって、『僕たちは世界を変えることができない』を聞いて終了。

アンコールの手拍子が鳴り響く。銀杏BOYZのこれまでのライブだとアンコールを呼ぶ時に「やるなら今しかねーべ」というコールをするのが通例だったのだけど、今回は序盤手拍子だけだった。隣に居た人が「やるなら今しかねーべ」とコールし始めたので同調して一緒に叫んでた。すると中央エリアにいた人たちが低い声でコールしている感じで会場全体でという感じではなかった。銀杏BOYZも僕らもそういう感じではなくなったのかもしれない。わかんないけど、そういうのがなくても声に出さなくても伝わってる的な。または峯田も落ち着いてきたしそういうドンパチ感のあるコールはもういいんじゃねーの的な。（峯田は「峯田死ね」とかそういう罵詈雑言がとにかく救ってくれてありがたいと言っていたけど）

http://twitter.com/Stone2Dark/status/760867911955210241

アンコールは『ぽあだむ』と『愛してるってゆってよね』。まぁこの2曲は繋ぐよなぁ。『愛してるってゆってよね』でミラーボール登場して峯田も会場もみんな踊ってるのなんか新鮮な光景ですんごい良かった。これが峯田がずっと曲を作ってきて出来た平和なのかもしれない。

何度も峯田は会場に向けて「何度も言いたくないけど」って言いながら「ありがとう」って言った。峯田は「ありがとうって言われても困る。何もできないから」って言ってたけど、みんな8年間峯田を待ってて、峯田に救われてて、あちこちから「峯田　ありがとう」って飛んで照れる峯田が良かった。僕も公演中何度も峯田の名前を叫んだ。峯田に聞こえたかはわからないけど、伝えたくて何度も叫んだ。みんな峯田の名前を呼んでいた。僕らが8年間待ち続けた峯田。峯田が歌ってくれて嬉しい。峯田の歌のせいで気持ちがめちゃくちゃになるしでも肝心なときは峯田の歌が助けてくれる。

峯田はいつも「みんながシャブやっても体売っても人殺しても良いから何してもいいから生きて、生きてたらまた会える」って言葉を投げてくる。次は8年も待たせないっていう峯田の言葉を信じて、また峯田を見れるなら頑張って生きていきたいと思う。 *3

僕の思春期を支えてくれたORめちゃくちゃにしてくれた峯田。銀杏BOYZ。その曲達は4人のときに生まれたもので、ずっとそれを聞いてきていて、それを求めていたから違ったのはすごく残念だけど、それでも峯田がその曲達を真剣に届けてくれる。これが今の銀杏BOYZなんだって体全身で感じることが出来て本当に最高だった。

夢で逢えたらでめちゃくちゃ高ぶってるところにあいどんわなだい来て最高すぎて飛び散って死ぬかと思った

— マジカルペンネくん🍝 (@pastak) 2016年8月3日

愛してるって言ってよねでミラーボール登場して峯田が踊ってたの最高でこんなことがあるのかって思った

— マジカルペンネくん🍝 (@pastak) 2016年8月3日

最高すぎてこのまま死にたい

— マジカルペンネくん🍝 (@pastak) 2016年8月3日

今年、みなみ会館で愛地獄と峯田見て、あーーってなったけど、やっぱり生のライブだとそれとは比較にならないエネルギーと感情と高まりが到来してきた

— マジカルペンネくん🍝 (@pastak) 2016年8月3日

銀杏BOYZ最高すぎた。You & I、佳代、夢で逢えたら の流れがとにかく良すぎた

愛地獄 [Blu-ray]

生きたい

生きたい

• 銀杏BOYZ
• ロック
• 

• provided courtesy of iTunes

*1:色々あったようであんまりライブでやってなかったんだけど、一昨年くらいから峯田がライブでやるようになったよね

*2:実際に心拍数もこの辺りからピークタイムだった

*3:と言いつつ、10月のボロフェスタに峯田来るのだけど…