この記事は、Elixir Advent Calendar 2023 シリーズ12 の13日目です
piacere です、ご覧いただいてありがとございます 
今回は、下記を追体験いただく … つまり「OSSの改造をする」コラムです
たった1時間の短時間で、
— piacere @ Elixir／D2C／xR＋メイドコスプレでデジタルから現実改変する49歳 (@piacere_ex) September 26, 2023
・Livebookホーム画面
・ユーザー設定
・セッション（起動されたNotebookのこと）
・コードエディタ部分
・コード実行部分
のハックや改造ができました😆 #LiveViewJP
今回、初めてLivebookハックしてみましたが、いつものElixirらしく読みやすいコードでハッピーでした😍 pic.twitter.com/EhohlbKTmA
昨年／今年のElixir界隈と、Elixir Advent Calendarを賑わす、高機能Web開発環境「Livebook」ですが、OSSなので、当然ソースコードは読める訳です
しかし、素晴らしいWeb上開発体験を提供しているからこそ、複雑そうに思われるコードを読む気は、なかなか高まらないですよね？
そこで、みんなでコードを眺めて、震えて、納涼するというイベントをLiveViewJP#21「Livebookコードを眺めてみんなで震えて納涼する会」で、今年9月に開催しました
ちな、私もマトモにLivebookコードを読んだことが無かったので、会が成立しない位、グダグダになったらゴメンナサイ … と予め謝った上で開催しました 😋
来月の #LiveViewJP は、Elixirに素晴らしいWeb上開発体験を提供している「Livebook」のコードハック会😜https://t.co/tlHSq67Wmg
— piacere @ Elixir／D2C／xR＋メイドコスプレでデジタルから現実改変する49歳 (@piacere_ex) August 25, 2023
みんなでコードを眺めて、震えて、納涼しましょう🤣
ちな私もマトモに読んだこと無いので、会が成立しない位、グダグダになったらゴメンナサイ…と予め謝っておく😋
ですが結果的には、新たなLiveViewデバッグ機能も使い倒す、ステキなElixir printfデバッグ（正確にはIO.inspectだがｗ）のシェア会になりましたので、その一端をコラムでも共有します
あと、このコラムが、面白かったり、役に立ったら、
をお願いします
事前準備：Livebookのgit clone
Livebookのソースコードは、下記GitHubにあります
まず、これをgit cloneで落としてきます
$ git clone https://github.com/livebook-dev/livebook.git
VSCodeで開きます（別に他のエディタでもOKです）
$ cd livebook
$ code . -r
Livebookのファイル内訳
下記コマンドでLivebookコードのファイル数をカウントすると、880件（バージョンはLivebook 0.12.0-dev、2023/12/14現在）もあるようです（なお、mix desp.getを先にやると数が変わるので、その前に実施）
$ find -type f | grep -v "^./.git/" | grep -v "^./.github/" | wc -l
880
うち、Elixirコードであるlib配下は27%程度のようで、うち.exファイルが大半を占め、残りは.livemdと.jpegのようです
$ find -type f | grep "^./lib/" | wc -l
238
$ find -type f | grep "^./lib/" | grep ".ex$" | wc -l
226
$ find -type f | grep "^./lib/" | grep -v ".ex$"
./lib/livebook/notebook/learn/intro_to_vega_lite.livemd
./lib/livebook/notebook/learn/kino/custom_kinos.livemd
./lib/livebook/notebook/learn/kino/intro_to_kino.livemd
./lib/livebook/notebook/learn/kino/smart_cells.livemd
./lib/livebook/notebook/learn/kino/vm_introspection.livemd
./lib/livebook/notebook/learn/deploy_apps.livemd
./lib/livebook/notebook/learn/distributed_portals_with_elixir.livemd
./lib/livebook/notebook/learn/intro_to_maplibre.livemd
./lib/livebook/notebook/learn/intro_to_explorer.livemd
./lib/livebook/notebook/learn/intro_to_livebook.livemd
./lib/livebook/notebook/learn/files/portal-list.jpeg
./lib/livebook/notebook/learn/files/portal-drop.jpeg
その他のファイルは、下記の割合のようです
$ find -type f | grep "^./assets/" | wc -l
77
$ find -type f | grep "^./assets/" | grep ".js$" | wc -l
63
$ find -type f | grep "^./assets/" | grep -v ".js$"
./assets/package-lock.json
./assets/.babelrc
./assets/package.json
./assets/css/components.css
./assets/css/global.css
./assets/css/tooltips.css
./assets/css/notebook.css
./assets/css/editor.css
./assets/css/live_view.css
./assets/css/markdown.css
./assets/css/js_interop.css
./assets/css/app.css
./assets/css/utilities.css
./assets/css/ansi.css
Livebookを起動
下記コマンドでLivebookを起動します
$ mix deps.get
$ MIX_ENV=prod iex -S mix phx.server
…
==> livebook
Compiling 239 files (.ex)
Generated livebook app
[Livebook] Application running at http://localhost:8080/?token=pleguigyspnkwph5thoxi2ul3w5ywgix
Erlang/OTP 26 [erts-14.1.1] [source] [64-bit] [smp:16:16] [ds:16:16:10] [async-threads:1] [jit:ns]
Interactive Elixir (1.15.7) - press Ctrl+C to exit (type h() ENTER for help)
iex(livebook_xxxxxxx)1>
上記の末尾の方に出てきたURLをブラウザで開きます
LiveViewフロントデバッグ機能でLivebookコードをブラウザ上から特定
いきなりコード実行画面（下記）から行くと、脱落しやすそうなので、手慣れをする意味でも、大して面白くない（笑）ホーム画面から始めてみましょう
LiveView 0.20から、LiveViewコードやLiveComponentsをフロントデバッグできる機能が入ったので、早速これを有効活用してみます
LiveViewJP#21「Livebookコードを眺めてみんなで震えて納涼する会」イベント開催当時は、LiveView 0.20がリリースされて3日後（！）だったので、LivebookにLiveView 0.20が梱包されておらず、自身で mix.exs の deps に追加する必要がありましたが、今ならLivebookに勝手に入ります
フロントデバッグの設定を、下記の通り、入れてみてください
import Config
…
import_config "#{Mix.env()}.exs"
+
+config :phoenix_live_view, :debug_heex_annotations, true
Ctrl-Cを2回押した後、再度ビルドします（LivebookのURLが変わるのでブラウザに再度、入力し直します）
$ MIX_ENV=prod iex -S mix phx.server
ブラウザ上で、「RUNNING SESSIONS」で右クリックし、「検証」を選択すると、下部にブラウザのデバッガペインが表示され、HTMLコメントでLiveViewコードのファイル名と行番号が表示されるようになるのが、LiveView 0.20で入ったフロントデバッグです
実際に、該当ファイルとその行番号を見てみると、render関数の先頭行が特定できました … つまり、この部分はLiveComponentで構成されているということが分かります（まぁ、ファイル名からもお察しですがw）
試しに、「Running sessions」の文言を変えてみましょう
Livebookを起動したターミナルでiexが起動しているので、下記で再コンパイルし、ブラウザをリロードしてみましょう
iex> recompile
下図の通り、Livebookを改造することができました 
試しに、右上の「New notebook」から幾つかセッションを追加してみましょう
すると、下図の通り、日本語メッセージでセッション数を表示してくれます
終わりに
複雑なOSSも、デバッグのテクニック次第で易々と改造していけることが伝わったでしょうか？
ポイントは、Livebookと言えど、所詮、「LiveViewアプリの1つ」に過ぎないので、LiveViewやLiveComponentsの構造を把握していればハックしていけるという、たったそれだけのことです
次回は、Livebookコードブロックの実行付近を攻略していきます
p.s.このコラムが、面白かったり、役に立ったら…
にて、どうぞ応援よろしくお願いします