ぱすたけ日記

日記っぽいのを書きます。

週末

土曜日

川に行った。いつもの川と違ってそれよりも北に行った八瀬というところ。

いつもの川との違いとして、川に入れる、バーベキューできる、コンビニが遠いという場所なので、事前に色々準備が行われていて気合いがあった。

肉やクーラーボックスやスイカ、水鉄砲などを用意したところ異常に盛り上がったので準備は大事という感じ。

とにかく楽しかったけど、飛び込んだり流されたりしてたので、全身が痛くなった。でもめちゃくちゃ楽しかったからまた行きたい。

スプラシューターめちゃくちゃ飛んで面白いのでオススメです。ただしめちゃくちゃデカくて普段は邪魔。

そのあと鴨川デルタで花火をして、銭湯行って、sotoに行った。

日曜日

京都なんか#2があった。

東京からも人がお越しになっててめでたかった。

みんなそれぞれ色々困りがあって、頑張って生きているという感じだった。

僕の発表資料はこちらです。

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

もう少し具体的に

<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>

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

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

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

事例紹介

React Konva

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

採用されている作戦

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

React-Canvas

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リサイズ問題

お昼ごはん

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

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

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

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

先月分

昨年分

2016年7月に読んだマンガ

盆の国

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

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

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

甘々と稲妻 7巻

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

マネーフットボール 5巻

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

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

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

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

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

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

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

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

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

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

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

コネクト 1巻

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

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

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

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

彼女はろくろ首 3巻

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

こいいじ 4巻

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

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

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

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

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

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

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

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

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

恋のツキ 1巻

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

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

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

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

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

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

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

NEW GAME! 4巻・5巻

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

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

UQ HOLDER! 11巻

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

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

わたしのふしだら 1巻

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

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

AIの遺電子 2巻

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

第七女子会彷徨 10巻

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

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

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

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

幸子に幸あれ 3巻

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

ちこたん、こわれる 4巻

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

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

服情報収集。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

夏!!川!!!ビーール!!!!!

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

https://atnd.org/events/79852

昨日は花火をした。

サークルロゴできた

線香花火エモかった

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

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

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

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

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

ドロップフレーム

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

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

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

[asin:B01HR5M788:detail]

hなhとA子の呪い

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

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

十月桜 (RYU COMICS)

十月桜 (RYU COMICS)

第七女子会彷徨

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

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

バベルの図書館

バベルの図書館

うみべの女の子

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

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

虹ヶ原ホログラフ

虹ヶ原ホログラフ

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

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

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

まんがの作り方(1) (RYU COMICS)

まんがの作り方(1) (RYU COMICS)

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

その他

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

人生は二日だけ (RYU COMICS)

人生は二日だけ (RYU COMICS)

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

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

  • 作者:
  • 発売日: 2015/06/08
  • メディア: Kindle

満腹百合 (RYU COMICS)

満腹百合 (RYU COMICS)

ストロボライト

ストロボライト

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

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

こいのことば

こいのことば

[asin:B00JB92EVY:detail]

[asin:B01AVV0CJG:detail]

[asin:B00ZEIFZLM:detail]

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

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

[asin:B01FVE55A4:detail]

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

https://kindou.info/72285.html