Devin + git + Marpでスライド作成のイニシャルコストを下げる

みなさんこんにちは、無資格・無免許エンジニアの三木です。
Web本部ではDevinの導入検証をはじめた…という状況なのですが
はじめてすぐに、検証も何もスライド作成のイニシャルコスト低減は確実にできると思った…という記事を投稿させて頂きます。

https://qiita.com/miki-yoji/items/70ee696b460367dab522

先日勢いで↑の記事を書いて、トレンドを頂いたため真面目な記事が書きづらくなってしまったのですが
以下が本日のトピックです

:::note info
- Devinの基本動作と設定項目
- git + Marpによるスライド管理
- スライド作成の指示
- 生成されたスライド
:::

## Devinの基本動作と設定項目

Devinは自身のworkspaces上にてUbuntuを起動し、VS Code上のターミナル接続を介して様々な手続きを行います。
そして、そのVS Codeはブラウザを介してユーザーからも操作可能です

![devin005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3930205/f7eef113-6183-44e5-a8e2-4c6d43f30d16.png)

workspacesはDevinが各セッションで行う約束事を設定できます

例えば

- Git Pull
    - セッションの開始時のgit取得コマンド
    - `cd ~/repos/tech-tportal && git pull && git submodule update --init --recursive`とかを指定する
- Maintain Dependencies
    - セッション開始ごとにパッケージの依存関係を最新の状態にするためのコマンド
    - `cd ~/repos/tech-tportal/tportal-app && docker-compose exec tportal_web npm ci && docker-compose exec tportal_web composer install`などを指定する

画像はワークスペース立ち上げ時のチュートリアル状態になるのですが
`Install Dependencies`のタイミングではDevinの作業するスペース(Ubuntu)に対してユーザーが直接セットアップを行うことができます。開発環境によっては何かしらの追加インストールが必要な場合もあり、そういったケースで対応すれば良いのかと思います。

いずれにせよ、少し触ってみた段階で

Devinは自分のWorkspaces上でUbuntuを動かし、ある程度決まったコマンドも使いつつ
AIエージェントが作業を進めて、最終的にgitへpushしてくれる

という流れはわかりました。

GitHub Actions と GitHub Copilot のAgent modeが融合して、同じものが出てきそうな気配も感じます。

## git + Marpによるスライド管理

話は変わりますが、最近私自身がLTや登壇などでスライド作成を行うタイミングが増えてきました。

私自身の性格もあると思いますが、まーとても面倒です、この作業。
作り始めたら集中するのですがとにかく腰が重い。

少しでも楽をしようとスライドはgit+Marpで管理をしています。

### Marpとは
Markdownでスライドを作れるツールでVS Code拡張もあります。
@tomoasleepさんの記事がとても参考になると思いました。Marpはいいぞ！

https://qiita.com/tomoasleep/items/604107787d92dec4868e

git管理にして、テーマを共通で利用したり、前に作ったスライドをコピーを再利用したり…

また、テキストで全て作れる段階で、geminiなどに「Marpのフォーマットで以下のスライドを作成してください」と依頼するだけでも結構良い状態のものが出来上がったりします。

私はとにかく楽に作りたい

## スライド作成の指示

そんなこんなで今DevinとgitとMarpが手元にあります。

これは確実に「Slackで指示されたDevinがスライドを作ってgitにpushしておいてくれる」と思い、さっそくトライです。

![devin006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3930205/6e899777-5298-42d8-b534-05c980ce4cd6.png)

ひとまずこんな指示を送り
作るのもテキストだけなのですぐに完了

![devin007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3930205/c201a185-5a09-484c-ab77-0ea624ccf8f0.png)

push内容をみて、もうちょっと調整が欲しかったので追加指示&色々やらせてみる

![devin008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3930205/28cdeb04-b58e-4663-b928-a37304915c1d.png)

![devin009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3930205/53141d57-8ab1-4fe2-aad4-06ab97a80a22.png)

元の作りが悪く自己紹介を消すとデザインが壊れる状態だったので、こちらでも修正
再取得と、画像の細かい指示を追加

![devin011.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3930205/4db4a868-91d1-449d-a9c3-a4179a2e24e9.png)

![devin012.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3930205/840a0071-2f81-4525-b5f1-5c11dc0e19d0.png)

作業完了、しっかりとブランチにpushされていました。

## 生成されたスライド

![devin_slide_001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3930205/6c974ce1-bd8b-4f56-8a2e-deeb3fd0664d.png)

![devin_slide_002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3930205/92e7159a-a66e-44b3-af53-b721ff5b50a9.png)

![devin_slide_003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3930205/68468dd0-7ba3-4149-a473-214292498b1f.png)

![devin_slide_004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3930205/b773d59e-9a9b-4455-a163-21e7e423cb9d.png)

![devin_slide_005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3930205/3051c228-1210-4f53-9523-a2a893a3ccde.png)

稲妻モチーフの画像が絶妙！！！　というツッコミはあるのですが十分です。

自分が下げたかったのはイニシャルコストです。
どのみち発表用に文言の調整はしたいので。

ここから文言と画像差し替えを行えば完成…という点まで開始地点を進めてくれるのはありがたいのです。

## おわりに

対話中にDevinが変なタイミングでござる！と言い出すのは↓の指示のせいですね。

![devin013.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3930205/02652d59-82ba-48d9-8066-841f08bf0c3a.png)

もっと時間をとって、しっかりと設定を行いたいと思います。