NISHIO Hirokazu
[Translate]
iPadの回転でキャンバスも回転
pRegroup-done-2019
iPadの回転でキャンバスも回転
画面を回転したらキャンバスも一緒に回る
・ただし回転原点がデフォルトだと左上
・DOM的にはcanvasのサイズが変わらないので書けない領域が出現する
・回転によるビューサイズの変化を察知してcanvasエレメントをリサイズすべきか
React+Paper.jsでresize
Tweet
Related Pages
pRegroup-done-2019
React+Paper.jsでresize
→
regroup
×
プロジェクトのタスク管理をscrapboxでやる
×
オフラインでも新規マップの作成が出来る
×
モバイル書き出しツール
×
共同編集ほんとに必要?
×
保存のテスト
×
pkakidashi
×
ptegaki
×
ノートテイク実験
×
図には3種類ある
×
考えるための図
×
自分の知的生産性向上
×
伝えるための図
×
共有するための図
×
まずは徹底して自分のニーズを満たさなければいけない
×
今選択してるスタイルが画面上で表示されているべき
×
regroup2020-01-27
×
regroupを使いたくなるシチュエーション
×
scrapboxからのインポート
×
scrapbox通りの見栄えを目指さない
×
画像付箋の原寸表示
×
スタイル変更uiの改善
×
投げ縄選択はゴーストにならない
×
フィードバック
×
パスの自動グループ化
×
pregroup2019
×
pregroup-done-2020
×
pRegroup-done-2019
→
pRegroup2020
→
pRegroup-done-2019
→
Regroup201907デモ動画
100vhだと縦にはみ出す
線の太さを一定にする
まとめて保存
OSXの画面録画
storeのsubscribeとuseEffect
iPadで編集対象の付箋が、入力用の画面の下に隠れる
iPadはfocusを無視することがある
BUG:投げ縄選択で選択が行われている状態で、付箋の追加をすると、画面上に移動できないゴミ付箋が作られる
投げ縄選択で移動した後に普通の移動が効かなくなるバグ
マウスポインタの位置を中心としたズーム
マップ自体を手軽にバックアップ
投げ縄選択バグ
複数行インポートの時に空行は追加しない
PCでのズームイン・ズームアウト・平行移動
マニュアルページ
画像付箋が変な動きをする理由
URLパラメータによってFirestore接続の有無を切り替え
表札の編集
パスの平行移動
原点中心の拡大縮小平行移動を画面中央中心に変換する
今表示している画像の取得
iOS上のSafariでデバッグ出力
二本指ジェスチャ時に一本指での描画が同時に発生する問題
2本指ジェスチャで平行移動
→
pRegroup-done-2019
×
付箋の選択・圧縮 UI設計
×
選択したらバルーンメニュー
→
バルーンメニュー
→
paper.js
×
netlifyでデプロイ
×
pRegroup-done-2019
→
paper.jsの型定義
→
regroup
×
pRegroup-done-2019
×
2020_年、_react_軸で学ぶべき技術
×
typescript
×
react
×
webpack
×
visual_studio_code
×
styled-components
×
reactmodal
×
iPadはfocusを無視することがある
×
paper.js
×
パスドロー
×
パスの形がおかしい
×
付箋・パスの投げ縄選択
×
firestore
×
websocket
×
amazon_s3
×
netlify
×
apple_pencil
×
ipad上でのダイレクトタッチとpencilタッチの区別
×
二本指ジェスチャでズームと平行移動
×
redux
×
reactn
×
undoの実装
×
キャンバス汚染
×
キャンバス汚染解決編
×
cssで条件分岐と変数と計算を使う
×
100vhだと縦にはみ出す
×
メニューアイコンがiPhoneなどの狭い画面ではみ出す
×
ズームアウトした状態でペンで描くとガタガタになる
×
線の太さを一定にする
×
Paper.jsの更新後に呼ばれるコールバックをつける
×
バルーンメニュー
×
投げ縄選択→削除
×
付箋の自動フォントサイズ調整
×
gが下に突き出す
×
OKR問題
×
regroup2019
→
Regroup2019の技術まとめ
→
Redux化
×
pRegroup-done-2019
→
ズームアウトした状態でペンで描くとガタガタになる
→
pRegroup-done-2019
×
strokecap
×
linejoin
→
パスの形がおかしい
→
pRegroup2020
×
pRegroup-done-2019
→
グループの中をタップした時に線が細くなる
→
pRegroup-done-2019
×
コピー&ペースト
→
投げ縄モードでグループをタップした時に開閉しない
→
テキスト入力欄を画面上部へ
×
pRegroup-done-2019
×
付箋に改行を入れる方法が必要
→
改行でどんどん付箋が追加された方がいい
→
pRegroup-done-2019
×
コピー&ペースト
×
typescriptで対話的に実装
×
マップの一部を別のマップにインポート
→
テストユーザが入力したもののうちの面白いものを使いまわしたい
→
テキスト入力欄を画面上部へ
×
pRegroup-done-2019
→
付箋は見える位置に追加されるべき
→
改行で付箋を追加
×
改行でどんどん付箋が追加された方がいい
×
pRegroup-done-2019
→
テキスト入力欄を画面上部へ
→
URLの構造を変更
×
pRegroup-done-2019
→
アクセス権
→
gyazo
×
変更凍結
×
自分の作ったマップの一覧表示
×
アクセス権
×
pRegroup-done-2019
→
URLの構造を変更
→
バルーンメニュー
×
投げ縄選択→削除
×
付箋クリックで開閉ではなくバルーンメニュー
×
pRegroup-done-2019
→
削除の機能
→
消しゴムによるパスの削除(必要?)
×
pRegroup-done-2019
→
投げ縄選択→削除
→
バルーンメニュー
×
pRegroup-done-2019
→
選択したらバルーンメニュー
→
regroup_v2_解説
×
cssで条件分岐と変数と計算を使う
×
pRegroup-done-2019
→
メニューアイコンがiPhoneなどの狭い画面ではみ出す
→
pRegroup-done-2019
×
reconciler
×
ref
→
Reconcilerの中で作られるインスタンスはどこでアクセスするか
→
pRegroup-done-2019
×
reconciler
→
Reconsilerを差し替えてiPadでの画像点滅が止まるか検証
→
redux
×
typescript
×
pRegroup-done-2019
→
Redux化
→
pRegroup-done-2019
×
講演スライドの流し込まれたマップを作る
×
反響まとめをマップにする
×
ユースケースメモ:発表資料をゼロから作る
×
ユースケースメモ:パネルディスカッションの準備
×
ユースケースメモ:過去のスライドの整理
×
ユースケース:ボットとの会話ログの整理
→
CCSEまで
→
pRegroup-done-2019
×
付箋の自動フォントサイズ調整
→
OKR問題
→
pRegroup-done-2019
×
Regroup201907デモ動画
→
自動保存とデバイス間同期のデモ
→
pRegroup-done-2019
×
投げ縄複数移動後に選択状態が維持されるようにする
→
投げ縄選択で複数まとめて移動
→
pRegroup-done-2019
×
付箋作成時の文章更新に伴う描画の高速化
→
付箋テキストの編集時のバグ
→
pRegroup-done-2019
×
グループの子要素の位置を再帰的に更新
→
パスをグループに入れられるようにする
→
pRegroup-done-2019
×
erudaのロードが重いならurlオプションにする
→
Erudaを開発画面でかつiPadの時だけONにする
→
pRegroup-done-2019
×
デプロイ作業の自動化
→
ホスティング
→
画像付箋
×
付箋の追加をPaper.js上で実装する
×
pRegroup-done-2019
→
複数行テキストを個別の付箋としてインポート
→
adobe_xdでsvgアイコンを作る
×
付箋の追加をPaper.js上で実装する
×
メニューバーにsvgを並べる
×
pRegroup-done-2019
→
良いアイコンにする
→
付箋・パスの投げ縄選択
×
選択されたもののグループ化
×
表札の表示
×
グループの子要素の位置を再帰的に更新
×
コネクタ
×
グループの中の付箋をドラッグで出し入れ・配置変更
×
表札の編集
×
バルーンメニュー
×
グループ化
×
regroup2018
×
付箋の圧縮展開
×
圧縮付箋の展開時どうなるべきか
×
既存グループの付箋追加削除ui
×
pRegroup-done-2019
→
付箋の選択・圧縮 UI設計
→
付箋の選択・圧縮 UI設計
×
付箋・パスの投げ縄選択
×
描画の高速化
×
選択範囲の点線表示
×
投げ縄選択されたもののまとめて移動
×
pRegroup-done-2019
→
付箋・パスの投げ縄選択
→
pRegroup-done-2019
×
付箋の移動
×
ペン入力の高速化
×
付箋移動の高速化
×
パス移動の高速化
×
付箋作成時の文章更新に伴う描画の高速化
→
描画の高速化
→
pRegroup-done-2019
×
react+canvas
×
usecallback
×
usereducer
×
usehistory
→
undoの実装
→
スライドpdfからのインポート
×
付箋の自動フォントサイズ調整
×
複数行テキストを個別の付箋としてインポート
×
良いアイコンにする
×
「編集」ではなく「再利用」
×
stateにamend
×
付箋編集モード中に他の付箋をドラッグした場合
×
新規付箋は他の付箋と重ならないように
×
gが下に突き出す
×
paper.js
×
pRegroup-done-2019
→
付箋の追加をPaper.js上で実装する
→
pRegroup-done-2019
×
付箋の追加をPaper.js上で実装する
→
gが下に突き出す
→
付箋の自動フォントサイズ調整
×
pRegroup-done-2019
→
改行と英単語禁則
→
改行と英単語禁則
×
pRegroup-done-2019
→
付箋の自動フォントサイズ調整
→
pRegroup-done-2019
×
ipad上でのダイレクトタッチとpencilタッチの区別
→
付箋の移動
→
pRegroup-done-2019
×
付箋の追加をPaper.js上で実装する
×
二次元配置
×
一覧性
→
100枚付箋のiPad上での拡大縮小
→
requestanimationframe
×
pRegroup-done-2019
→
Paper.jsの更新後に呼ばれるコールバックをつける
→
ズーム完了時にPaperに反映する
×
原点中心の拡大縮小平行移動を画面中央中心に変換する
×
Paper.jsの更新後に呼ばれるコールバックをつける
×
pRegroup-done-2019
→
ズーム完了時にPaperに反映する
→
付箋をたくさん出すと重い
×
今表示している画像の取得
×
画像化してズームする際にずれる問題の解決
×
ズーム完了時にPaperに反映する
×
なぜかツールバーにかぶる問題
×
pRegroup-done-2019
→
ズーム時に画像化
→
二本指ジェスチャでズームと平行移動
×
デバイスのズームをリセットする
×
pRegroup-done-2019
→
画像化してズームする際にずれる問題の解決
→
付箋をたくさん出すと重い
×
pRegroup-done-2019
→
付箋の表示
→
erudaのロードが重いならurlオプションにする
×
pRegroup-done-2019
→
Erudaを入れる
→
pRegroup-done-2019
×
付箋の追加をPaper.js上で実装する
×
100枚付箋のiPad上での拡大縮小
×
hosting
×
二本指ジェスチャ時に一本指での描画が同時に発生する問題
×
ios上のchromeでデバッグ出力
→
paper.jsでの拡大縮小テスト
→
画面移動の際に直前のcenterを保存
×
2本指ジェスチャで平行移動
×
位置やズームをurlパラメータにする
×
pRegroup-done-2019
→
二本指ジェスチャでズーム
"
Engineer's way of creating knowledge
" the English version of my book is now available on
[Engineer's way of creating knowledge]
(C)NISHIO Hirokazu / Converted from
[Scrapbox]
at
11/23/2025, 4:40:29 PM
[Edit]