01
行番号では伝わらない
みんなスクロール位置が違い、フォントも違い、「42行目」も次の編集で別の行になります。
開発者・プロダクトチームに
バグを丸で囲む。行番号はもう要らない。
通話越しのコードレビューやデモは、「42行目、いや、別のファイルの」になりがち。PenLayerなら、エディタやターミナル、ブラウザの上に直接、行を強調し、変数を丸で囲み、データの流れを描けます。
Mac版をダウンロード
14日間無料 · その後$12/年から
対応アプリ
- VS Code
- Xcode
- JetBrains IDE
- ターミナル
- ブラウザ
- Figma
checkout.ts · コードレビュー ● 画面を共有中
課題
思ったより難しい理由。
02
流れは言葉にしにくい
リクエストがボタンからデータベースまでどう流れるかは、話すより描くほうが簡単です。
03
デモには注目が必要
プロダクトデモでは、見る人に変更点を探させるのではなく、そこに目を向けてもらうべきです。
PenLayerでできること
よく使うツール。
コードの行を強調する
透けるので、下のコードもそのまま読めます。
バグを丸で囲む
間違っているトークンそのものを、ぴったり囲みます。
流れを描く
ボタンからハンドラ、クエリへとフリーハンドの矢印を引けば、10秒でアーキテクチャが伝わります。
ソフトウェア向けアイコンセット
バグ、警告、データベース、クラウドなどのスタンプを、1,848個のLucideアイコンから。
1分で準備完了
3つのステップ。
- 1
画面を共有する
エディタ、ターミナル、またはデモするアプリを。
- 2
⌥⇧Dを押す
強調して、囲んで、描く。描画中の⌘ZはPenLayerの取り消しになり、止めればエディタに戻ります。
- 3
⌥⇧Dを押して入力に戻る
クリックもキー入力も、すぐにエディタに戻ります。
ヒント
使ってわかったこと。
- !
描画中の⌘ZはPenLayerのものです。止めた瞬間に、またエディタの取り消しに戻ります。
- !
「Preferences」でアイコンセット「Software」を選ぶと、バグ、データベース、サーバーがピッカーの先頭に並びます。
- !
「本来はこうあるべき」には破線、「今こうなっている」には実線を使いましょう。
質問
ソフトウェアデモについての質問。
⌘Zで、うっかりコードを取り消してしまいませんか？ +
しません。PenLayerが⌘Zを使うのは描画中だけです。止めた瞬間、⌘Zはエディタに戻ります。
フルスクリーンのIDEの上でも使えますか？ +
はい。PenLayerはメインディスプレイ上のどのアプリの上にも描けます。フルスクリーンのエディタやターミナルも同様です。
デザインレビューにも使えますか？ +
はい。Figmaやブラウザ、スクリーンショットの上にも、同じように描けます。
ほかの活用例