開発ログ
リリースノートと言うより開発のログのような何か
開発ログにした
2021-09-01
ユーザーには何も影響ないけど、バックエンド(画像サーバー)のデプロイを自動化してみた
Google Cloud BuildをGitHubと連携させて
削除・移動などの挙動を少し改善した
投げなわで選択して移動または削除した場合、undoすると投げなわも戻ってくるようにした 地味だけど便利じゃない？
2021-08-29
開発版
画像の方は開発版とかないので直接更新
バックエンドの方はほとんどいじらないので、毎回勝手を忘れてしまうという問題がある
ついでに、 SVGのファイルサイズが小さくなるようにした
具体的には、座標の小数点以下の桁数を制限した
計測してないけど、結構な差になってると思う
2021-08-28
ポップアップがブロックされていることが原因だった
対策として、ポップアップのブロックが原因でログインが失敗した場合は、リダイレクトを使って再度ログインを試みることにした
(クリティカルなので安定版にリリースした)
2021-08-27
開発版を用意したので、新機能などはそちらにまずデプロイするようにしていきます キーボードショートカットまたは画面下部のボタンでコピペなどの操作ができます
できる操作は増減するかも
開発版にデプロイしてます
Clipboard APIを使ったんだけど、なかなか面倒くさかった
概ねいい感じだけどまだ改善する予定
書き忘れてたけど、ついでにiOS/iPad OSのsafe areaに対応したんだった
2021-08-22
マルチタッチのジェスチャーに対応した
iPadなどのタッチスクリーンで、ピンチなどの操作ができるようになった
2021-08-18
また久しぶりにコードいじりに来ました
とりあえず、以前一度Yarn1に戻したのを再びYarn V2にしてみる というのも、Yarn2でデフォルトで有効になるPnPはOFFにもできるということを今更知ったため
PnPをオフにすると、ロックファイルの形式が違うのを除いてはほぼ変化なし
そのうちPnPもやってみる
タッチイベントとマウスイベントを両方扱わずに、Pointer Eventだけでできないか？とふと思いやってみた
マウスでは完璧に動いているが、タッチで微妙な動きをしていて、苦戦中
と思ったけど結果的にうまく行きました
動作確認はしましたが、なんか問題あれば教えてください
2021-06-07
えー、前回更新したのが半年前だなんて... お久しぶりです
久しぶりに少しコードに手を入れてみました
Firestoreのバッチ更新に関して、1つのバッチに含める変更が最大500になるようにした
バッチ更新をしている箇所がいくつかあったので、batchHelperという関数を作って、それで更新処理をラップするといい感じに500操作ずつコミットしてくれるようになった 大きくは変わらないけど、コンポーネントがマウントされた後にpictureIdが変わる可能性があることを考慮する必要がある
あと、今までCanvasManagerが持っていたいくつかの状態を外に出して、DrawingServiceという名前にしてみた
なぜかというと、今まではCanvasManagerの状態にToolBarコンポーネントが依存していた
コンポーネント化すると、ToolBarから参照しづらくなるし、Ref使うのもちょっと違う感じがする
そこで、ToolBarからアクセスされる状態はDrawingServiceに切り出した
状態を永続化したり復元したりの処理もそこに入れたし、密結合疎結合になって良い感じだと思う
あれ？システム設計って疎結合にしたほうがメンテナンス性が良くなるのではないでしょうかtakker.icon
密結合にすると色んな機能が複雑に絡み合ってバグの温床になる
あまり詳しくないので、間違ったこと書いていたらご指摘いただけるとありがたいです
普通に疎結合の間違いでしたodiak.icon
なるほどtakker.icon
素人目線ですが、Hookに切り出したほうが見通し良くなるのではと思いましたtakker.icon
logicとviewが同じブロックに混ざるとよくわからなくなる
線の描画からundo/redoまで一つの巨大なクラスが処理している
すべて<canvas>に対する処理なので、一つのクラスに統合されてしまうのはわかりますが、いくつかの機能を別のhookに切り出したほうがコードが読みやすくなるのではないでしょうか
テストをしやすくなるという利点もあります
うーん、hooksにはしませんし今のところクラスを分割しようとは思わないですodiak.icon
僕にとっては割と完成されているんですよね
わかりました。自分も具体的に困っているわけではないので、odiak.iconさんの一番納得のいくコーディング方法にするのがいいと思いますtakker.icon
PRとか出したりする中で明確に問題点がでたら、また伺おうと思います。
ついでに久しぶりにAnalyticsをみたんだけど、少ないながらもじわじわとアクセスがあって嬉しいです
いつも使っていただいてありがとうございます
こちらこそ/icons/感謝.iconです！takker.icon
しかも2割は海外からのアクセスだった
/icons2/へえ〜.icontakker.icon
Scrapboxと連携してガンガン使ってくれている方も何人かいらっしゃるようで、嬉しい限りです
2020-12-28
久しぶりです
最近ほとんど何もしていなくて、少し前にSentryを入れてみたくらい
このログを書き始めてちょうど1年みたい
少しずつだけどよくやったよ、自分
今日は、描画処理を少し改善した
最近新しくiPad Proを買ったのだが、Kakeruを使ってみたらちょっとおかしいところを見つけた
というのも、Apple Pencilで線を書いたすぐ後にまた線を書くと書けないことがある
前にTwitterで似たような報告をもらっていたが、スムージング処理がブロックしてるのではと思っていた
スムージングをオフにしてみても起きた
古いiPad(iOS 13)では起きていなかった
原因は分からなかったが、touchmoveイベントのリスナーで、preventDefault()を呼んだら直った
passive: true がついていたのも外した
passiveにする意味はなかったかもしれない
2020-11-20
2020-11-19
概ねできたかなー
まだいくつか改善すべきところなどあり
2020-11-05
Fontawesome Pro導入した
まだ導入しただけ
2020-11-02
FirestoreDataConverterを使って、Firestoreのデータを変換したり型をつけたりしてみた
なかなか良い
今までは自分でそれっぽいことをしていたが、煩わしさが減った感じ
NetlifyからVercelに乗り換えてみた
なんとなく
投げ輪のアイコンが欲しいという理由で、fontawesome proを買おうかと思う
2020-10-30
デザインのことを考えてました
線の太さと色のことを考えると、まずデザインをちゃんとしたいなという気持ちが
それはそれとして、雑にでもいいからまず実装しよう
快挙！！！
https://gyazo.com/8897ee100052b5ffd16bc4a2a6754e3d
2020-10-25
Galaxy Noteでパームリジェクションするハックを有効にするためのフラグを追加したよー
2020-10-23
Firebase Functionsで移行処理を書いた
フロントエンドも実装した
ちょっとした問題に気づいたが、それも解決した
超細かいところだけど、ずっとやりたかったので嬉しい
この機能は、Gyazoにインスパイアされて作りました
次何やる？
あと、Galaxy Noteでパームリジェクションするのをexperimental flagsに入れたい
色とペンの太さ...
2020-10-03
時間がない中でやるのにすごく良い大きさのタスクだった
2020-09-25
はたまたお久しぶりです
しばらくいろいろと死んでました
最近調子がよくなったような、なっていないような
とりあえず今、夜中に起きてテンション上がってきたので勢いで小さいタスクを3つ倒しました
以前は感度が悪かったのだが、かなり良くなったと思う
特に、ベジェ曲線に対しては偶然動いていたような状態だった
これでパスのスムージングを胸を張ってオープンにできる
実装的にはすごく愚直なものなんだけど、なかなか腰が上がらなかった...
↑ 2つはタイトル通り
振り返ってみると、リポジトリを作ってもう1年以上経つみたい
最初の方はちょっと迷走気味で、今の形の原型は去年の11月くらいに作ったと思う
最初はFirestoreを使おうとしていたっぽい
コンポーネントから直接Firestoreを触っていたせいでごちゃごちゃになって、一旦描けるものを作ることだけにフォーカスすることにしたんだった
最近Galaxy Note20を買ったのでそれで快適に使えるようにもしたいんだけど、Androidだとまともな方法でペンと指を判別できないのでどうするか迷っている
experimental flagsからこっそり有効にできるやつを作ればいいかな
2020-07-26
https://kakeru.app/6229173a8c8623520c8a10a52686e4ea https://i.kakeru.app/6229173a8c8623520c8a10a52686e4ea.svg
消しゴムが微妙かもしれないが、使えないほど酷くはない
ちょっとスムージングがきつすぎる気がするので、パラメーターを後で変えるかも
その他フィードバックなど歓迎です
2020-07-22
ちょっとお久しぶりです
途中でこんなこともやった point-down.icon
とりあえず基本的な部分は実装できた
あとは、消しゴム機能をもう少しまともにしてからリリースしたい
もうしばらくお待ちください (誰もこんなところ見ていないと思うけど)
2020-07-07
お久しぶりです
https://kakeru.app/7fcc52636eb2dc0dbc91a17a93e744fa https://i.kakeru.app/7fcc52636eb2dc0dbc91a17a93e744fa-opaque.png
6月は個人で仕事っぽいことしたり、なんか疲弊したりしてた
PNG画像を出力できるようにした
ついでに、幅や高さなどのオプションを指定してPNG/SVG画像を出力できるようにした
SVGだと絵が複雑なほどクライアントのレンダリングコストがかかるため
macOSでスクロールするとグニャグニャする問題を直した
地味に嬉しい
次は描く機能の方に何か手を入れたいな〜
2020-05-23
i.kakeru.app(画像を配信するサーバー)をCompute EngineからApp Engineに移した
メンテナンスコストを下げるため
Node.js(w/ TypeScript)+Expressで書いていたので、ほとんどそのまま移植できた
2020-05-20
既存のタイムスタンプを持たない絵については、適当にタイムスタンプを設定した
微妙に間違えて、意図したのと違う日付になってしまったけどそれほどクリティカルではないはず
一瞬全部のデータを壊しそうになって焦った
↑を受けて、絵の一覧を作成日の順にならべるようにした
2020-05-19
5割のクオリティを目指してとりあえず雑にやった
2020-05-17
https://kakeru.app/6d0cce3fd7b461823f292cee349c4cc7 https://i.kakeru.app/6d0cce3fd7b461823f292cee349c4cc7.svg
書き込みができない人にはツールバーの余計なボタンなどを見せないようにもした
ここ数日、ちまちまやっていた作業がやっと一段落した
せっかく認証関連でやってきたわけだし
その他の細かいコードの修正とか、リファクタとかいろいろ
タイトルの編集周りがたびたび少しずつバグっているのも落ち着いた
Firestoreのセキュリティルールは、試行錯誤を経てようやく望む挙動をするようになったと思う
Webのコンソールからルールの設定を編集できるんだけど、そのエディタがなかなか良くできている
型推論が行われているっぽい
シンタックスエラーはもちろんのこと、関数が未定義の場合などもエラーがちゃんと出る
2020-05-15
スタイルシート内で${SomeComponent} > { color: red; }のように別のコンポーネントを参照しようとすると、babelのプラグインが必要になる
Kakeruの開発ではtscを使っておりbabelは使っていないので、そのためにわざわざ導入するのは重すぎる
styled-componentsではbabelプラグインはいらない 将来emotionでもbabelプラグインが不要になったら戻るかも
2020-05-11
久しぶりの更新
2月から今まで少しずつちまちま開発していたものの、たいしたことはやってなかった(と思う)
ログインを実装したり
ログインを実装するために既存のコードに手を加えたり
設計に納得がいかずに二転三転してた
昨日くらいでようやく固まった気がする
一瞬書き込みができなくなり焦った
2020-02-17
以前見たもののオワコンな雰囲気を感じた記憶があったけど、どうも一度標準化に失敗していたらしい
タッチイベントとは独立に設計されたような感じで、イベントのインターフェースはMouseEventを継承している
マウスイベントにマルチタッチのための情報やその他のメタデータを含めた感じ
軽く試してみた
簡単に使えて良い
マウスとタッチの両方のイベントを扱わなくて良いので楽
ただ、iPadで少しパフォーマンスが落ちている印象を受けた(気のせいかも)
とりあえず今は問題なく動いているし、まだ導入しないことにした
ツールとパームリジェクションのon/offを、永続化した
特にパームリジェクションは、一度ONにしたらずっとONが維持されてほしいので開発者としても嬉しい変更
2020-02-16
キャッシュするコストのほうが大きいことが分かったため
具体的には、getImageData, putImageDataの呼び出しが結構時間がかかる
iPad OSでApple Pencilを使って描いたときの不具合を修正した 2つあった
(1) 空のパス(正確には1点だけで構成されるパス)が生成されることがあった
(2) まれにパスの最後の方に1点だけおかしな点が入ってしまうことがあった
(1) は具体的には、Apple Pencilで短い時間だけ画面に触れていた場合に、ペンが画面を離れた後にマウスイベントが発生したことが原因だった
touchendの直後にmousedown, mouseupが起きるため、描いた直後に1点だけを含んだパスが追加されてしまった
そもそも1点だけを含んだパスは描画できないはずなので、2点以上ないとパスとして扱わない、すなわちmousemoveを伴わないマウスイベントは無視するということにした
(2) は具体的には、touchstartとtouchendの間にmousemoveが発生していた事が原因だった
Kakeruはマウスとタッチの両方に対応しているので、マウスイベントも処理してしまう
touchstartが発火したときにフラグを立てて(touchendで下ろす)、そのフラグが立っている間はmousemoveを無視するようにした
この現象が稀にしか起きないため、原因を探るのが大変だった
今までiPad OSではMacに接続しない限りブラウザのコンソールが見えないと思っていたのだが、Chromeではchrome://inspectを開くとコンソールの出力を見ることができるので無事にバグを直すことができた
2020-02-15
線を描いている途中または消しゴムで消している途中は、キャンバスに表示されているものをできるだけキャッシュするようにしてみた
iPadでパフォーマンスを計測していないので効果があるかはわからない
一筆書きで長い線を描く場合は有効そう
Firestoreのデータ変更通知の処理が非効率的になっているのもパフォーマンス低下の一因かも 2020-02-09
正確には昨日で、内部実装の話だけど
今までパスを配列に入れていたのを、Mapに入れるようにした
理由としては、IDをキーにしておくことであるIDのパスが存在するかどうかを手軽に確かめられるため
Mapオブジェクトは挿入順も覚えてくれるそうなので、順番の問題も起きない
2020-02-04
Firebase版を公開した
流れとしては
新しい画像サーバーを一旦、古いサーバーへのプロキシにする
i.kakeru.appの向き先を新しいサーバーに向ける
古いバックエンドにあったデータをFirebaseに移動する
しばらくの間は、古いバックエンドに飛んできたデータを定期的にFirebaseに移し続ける
Firebaseに対応したフロントエンドをデプロイして、画像サーバーもFirebaseを見るようにする
2020-02-03
Yarn2に移行してみた
2020-02-02
バックエンドをFirebaseに変えてみるのを実験していた
2020-02-01
メニューを追加した
画像をサーバーから返すときにmax-ageを設定してみた
2020-01-28
データを読み込んだときのスクロール位置を調整した
2020-01-27
とりあえず常時表示してみたけど、スクロール中だけ表示したほうがいいかもなぁ
2020-01-25
リファクタした
2020-01-24
ページのタイトルにノートの名前が表示されるようにした
描画のコードをReactコンポーネントから切り離してみた
2020-01-19
1つの絵に、複数人で同時に書き込める
もう少し改善の余地があるけど、概ね良い感じ
2020-01-18
タイトルが編集できなくなっていたのを修正した
パスの角と端点を丸くしてみた
2020-01-17
たまにペンで書いた線がおかしくなる問題は未解決
2020-01-13
ついでに間に挟まっていた余計なレイヤーを外し、可能な限り高速に描けるようにしてみた
新しいパスを描いている間は、Reactのstateは一切更新せず、canvasに描き続ける 他のUIでReactが便利なので、やめなくてよかった
とりあえずペンで線を描いて保存するところまではできた
ペンで書き終えたときに、線の末端がおかしくなることがある
便利
設定を少しずついじっていきたい
個人的に満足の行くMVPまでもう少しじゃないかな
2020-01-10
スクロールをスクラッチで実装し直して、上下左右に無限にできるようにした
画像出力とかスクロールバーとかまだいろいろおかしいところもあるけど、これから実装していく Twitterで報告があった問題が多分解決した
2020-01-02
https://gyazo.com/57683938f3cb0bf511c6e5b51256f843
とりあえず適当に作ってみたけど、まだいろいろ課題ありな感じ
2020-01-01
あけましておめでとうございます
ページのタイトルにノートのタイトルを含めるようにした
2019-12-31
WebアプリのURLと画像のURLから/p/を取った
描く画面が https://kakeru.app/:id で、画像が https://i.kakeru.app/:id.svg
ついでに404ページも追加した
想定したパターン以外のパスに対して表示される画面
2019-12-29
リリースノート書き始めた(昨日の分から)
消しゴムが正常に動作しないバグを修正した
タッチスクリーンでペン以外のツールを使えるようにした
2019-12-28
画像出力機能を作ってみた
とりあえずSVGだけ
https://i.kakeru.app/p/:id.svg のようなURL
pいらないかも
取った
https://i.kakeru.app/:id.svgになった
こんな感じ↓
https://i.kakeru.app/a70455ea28beeca088da09fe5a5292bd.svg https://kakeru.app/a70455ea28beeca088da09fe5a5292bd