2016-10-31

はてなブログ5周年ありがとうキャンペーンお題第1弾「はてなブロガーに5つの質問」

1.はてなブログを始めたきっかけは何ですか？

中学生のときにWordPressでブログを書いていたが、WordPressの管理に飽きたのと、当時リリース前のはてなキーワードのβテストに招待されたので、それをキッカケにはてなダイアリーに引っ越しました。

はてなブログに引っ越したのは、はてなインターンに参加している時に一念発起して移行しました。

2.ブログ名の由来を教えて！

周囲の人に「ぱすたけ」と呼ばれているのと、僕の日記だからです。

3.自分のブログで一番オススメの記事

最近のだとこれです

4.はてなブログを書いていて良かったこと・気づいたこと

SEOが良い感じだからか映画の感想などを書くと人がいっぱい観てくれて色々感想を言っていってくれるのが嬉しい。

あと、友だちがみんな書いてるので、気軽な感じで普段のことも書けて便利。

5.はてなブログに一言

これからも最高のブログサービスを頼む！

2016-10-27

今日の睡眠

なんか布団に顔を包んでその状態で2回くらい叫んだ記憶があるのだけど、夢だったのか現実だったのか何故叫んだのか一切不明で心配
— 特別になり太郎 (@pastak) 2016年10月27日

2016-10-27

■

この辺と関連があるのかもしれないけど、最近突然イラつくみたいなことが多い。

特に対象があるわけでなく何故か異常に苛ついてて死にたい
— 特別になり太郎 (@pastak) 2016年10月26日

何故かとにかく脂を吸いたい感情のみに支配されている
— 特別になり太郎 (@pastak) 2016年10月26日

不安定な感じがする。健康になりたい。

2016-10-23

宇治観光 & ユーフォニアム名所探訪

響けユーフォニアム

昨日飲んでいる途中で明日どうするという話になり、宇治に行きましょうということで観に行った。

おっさんと女子高生どっちにする？上手な方でじゃあおっさんやなの結果です。

10円玉と記念撮影しました

抹茶ソフトクリームを食べ、平等院鳳凰堂という10円玉の聖地に行った。聖地繋がりで宇治は響け！ユーフォニアムの聖地でもありますので、シュッと2大聖地を観た。

2大聖地とは『上手くなりたい橋』こと宇治橋と『特別になりたい山』こと大吉山です。

（シーンを比較しながらみたいな丁寧な撮影をしてないので、実際のシーンと微妙にズレのあるのでご容赦ください。）

特別になりたい山

響け！ユーフォニアム8話後半のあのシーンで久美子と麗奈が登る山です。久しぶりに山というかそういうのを登ったので体力の低下を感じた。

特別になりたい山、山っていうか丘みたいな感じでなんなら走れそうな感じだったけど、pastakが異常に大変そうだったからやめた、若いのに体力つけてほしい
— nyanco🐈 (@nyanco15) 2016年10月23日

上手くなりたい橋

響け！ユーフォニアム12話後半に登場するこの橋です。

もっと引いて撮りたかったが、アニメは多分向こう側から撮影しているっぽい感じ。

久美子が走った場所を撮影しながら歩いてみたが意外と距離がある。これも吹奏楽部の日々の走り込みの成果なのかと思うとスゴいという感じだった。

#anime_eupho の上手くなりたいの橋見たんですけど、結構距離あってこれ全部走ったのスゴいってなった / “上手くなりたい橋 on Vimeo” https://t.co/ADybUbYwQh
— アラサーペンネくん (@pastak) 2016年10月23日

その他

久美子が練習するときに座ったり、久美子が秀一に祭りに誘われたり、葉月が秀一に告白したりしたベンチ登場したので見ました。

写真は撮り損ねましたが、その他に8話で祭りの集合場所だったポストや4話で秀一と久美子が麗奈に怒られるシーンの場所なども見ました。

その後は京都に戻って、HUBでビールを飲み。たなさんを見送りました。

行ってらっしゃい！！！

2016-10-22

お絵かき体験向上作戦 #kyotojs

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

お絵かき体験向上作戦

id:Pasta-K at Kyoto.js 11

こんにちは

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

振り返り

この発表は京都.なんか #2で発表したReactとCanvasでお絵かき機能を作った話の続編です。

今北産業

Gyazoの画像編集機能はReactとcanvasを組み合わせて作っている
ReactとCanvas組み合わせ事例
- React Konva: KonvaのReact Wrapper
- React-Canvas: https://flipboard.com/ のスマホ版で使われている。FPS向上目的。
canvasにはcanvas、DOMにはDOM、ReactComponentにはReactComponentの状態があり、それぞれのライフサイクルがある
個々の図形のマウスイベントハンドリングを上手くやっていく
良い感じに頑張っていく必要がある

前回の教訓より

React成分を取り払ったところ、ただ単なるcanvasの入門的な紹介になった
- 各自の想像でReact成分を補足してください

今回のお話

前回でReactとCanvasを組み合わせて良い感じにお絵かきを実装する大変ポイントと回避方法がわかった（ということになっています）ので、おもてなし感を高める。
- 前回よりは基本的なcanvasに関する知識やテクニックの紹介です
拡大縮小機能でcanvasリサイズ問題
- 前回予告にあった『HiDPI対応』はこれの応用でできます。
textareaとcanvas同期問題

拡大縮小

canvasリサイズ問題

編集中にcanvasサイズを拡大したい
- Gyazoの場合だと、下に敷いてる画像サイズを実寸サイズにして、canvasもそれに追随させたい。またはそれの逆など

canvasリサイズ基礎知識

canvasのサイズはプロパティで規定するべし
CSSで無理矢理引き伸ばすとボケる
- プロパティを変更するとcanvas情報が失われるので再描画する
  - デモ: https://pastak.github.io/okiba/misc/kyotojs11/canvas-resize.html

どういうリサイズを行うのか

canvasリサイズ時の意図

キャンバスサイズを大きくしたい
- 先程のデモのようにプロパティを大きくしてやればOK
画像自体を拡大したい
- 拡大比率に合わせて、座標位置、フォントサイズ、線の太さなども同じ比率で大きくする

描いてる最中で拡大縮小したい

ということがよくあるので、初回生成時のcanvasサイズを覚えておいて、描画時にその覚えておいたcanvasサイズと現在のcanvasサイズの比から適切な倍率で描画すると良い感じになります。
- 各図形ごとにプロパティとして保持しておいて、レンダリング時に各々の適切な倍率を計算する

textareaとcanvas同期問題

canvasだと色々文字装飾ができる
- 縁取りも容易
上にtextareaを重ねる形式だと楽だけど、見た目を同じに表現できないので、逐次canvas上に描画してリアルタイムに見た目を確認できるようにしたい

はい

textareaとcanvasで文字を同期させる
IME表示とカーソル
（おまけ）Emoji😜 on canvas

textareaとcanvasで文字を同期させる

普通にやっていけばOKです
- onInputで文字列を取ってcanvasに書く
- onKeydownでカーソル移動などを取得する
textareaとReactについては省略しますので、各自でトライしてください

IME表示とカーソル

IME表示制御

font-sizeとline-heightをtextareaとcanvasContextで揃えておく
textareaを良い感じの位置で重ねて、opacity:0 とかにするとすんなりうまくいきます

カーソル表示

opacity:0にするとカーソルが視えないので、divタグとかで良い感じにカーソルモドキを表示する
カーソル位置を取得する
- カーソル位置を取得する
- 端から文字を数えていって、何行目の何文字目かを確定させる
- その場所にカーソル風の何かを表示する
  - 場所を確定させる際にはCanvasRenderingContext2D.measureText()を利用する

（下のコードは雰囲気で書いてるので、動くことを保証していません）

const textarea = document.querySelector('...')
const currentCaretPosition = input.selectionStart
let textCounter = 0
textarea.value.split('\n').forEach((lineText, lineIndex) => {
  if (textCounter + lineText.length < currentCaretPosition) {
    // 行内にカーソルがないなら文字数をカウントしておいて次の行へ
    textCounter += lineText.length
  } else {
    const canvas = document.createElement('canvas')
    const context = canvas.getContext('2d')
    context.font = `bold ${fontSize}px Arial,Sans-Serif`
    // 行冒頭からカーソルまでのテキストを取り出す
    const text = lineText.substr(currentCaretPosition - textCounter)
    // 文字の縁取り線などを考慮して横幅を確実に取得するために
    // CanvasRenderingContext2D.measureText()を利用する
    const cursorX = context.measureText(text).width
    const cursorY = lineHeight * lineIndex
  }
})

範囲選択を表現

応用したら出来るので、皆さんへの宿題にします

（おまけ）Emoji😜 on canvas

絵文字をcanvas上に描画するときブラウザとフォントの組み合わせに依って結果が異なるので注意
- ちょっと古い情報: http://qiita.com/pastak/items/6a37878cc1f3f74af470

まとめ

本日はReactのことを一旦忘れてcanvasで文字入力や拡大縮小に関する機能を実装することについて紹介しました。
- Reactの話を挟まないとシンプルで良いですね
- ちなみにここにReactが登場すると
  - textareaとReactとcanvas状態対決
    - IME変換中にcanvasには描き込むが、図形情報(state)は更新しない
  - 倍率計算のためのcanvasサイズをそれぞれの図形に伝えるためのpropsバケツリレー大会またはcontextチャレンジ
  - などが勃発しますので盛り上がります
皆さんも便利なお絵かきツールを書いて、体験を高めていきましょう