安定的なカルーセル処理をWebサイトに設置できる、「MYNT Slider」ライブラリを以前作って、色々な会社や大学組織などに導入していただきました。
このライブラリに関しては、以前のブログで機能や内容などご確認ください。
以前のブログ :
Webサイトに簡単設置できるlibrary「MYNT slider」
今回は、このライブラリにAIを使って機能追加をしたので、その機能のご案内をしたいと思います。
新機能について
とあるホームページ制作の際に、「写真を横に並べてスライドできるようにしてほしい」と言われたので、このライブラリが使えるな〜と思っていました。
でも、「放っておいてずっとスクロールし続けるタイプが良い」と言われたので、今回の
継続スクロール機能が必要だと考えて、思い切って機能追加してみました。
どうせなら、最近ニーズも高いし、仕事で使っているAIエージェントのクレジットがたくさん余っていたので、それを利用してAIに機能追加をしてもらうようにしました。
AI奮戦記
AIエージェントは、以前ブログにも書いた "Kiro" を使います。
このプロジェクトは、もともと自分でゼロベースから作ったライブラリだったので、まずは以下のように、AIにプロジェクトの内容を把握してもらうようにします。
はじめの一歩は内容把握から
- このプロジェクトの内容を理解して構成をdocsフォルダ内にドキュメントを構築して。
程なくして、最も簡単に構成ドキュメントの構築が完了しました。
出来上がったドキュメントがこちらです。
docs/architecture.md
機能追加の要件定義
- 現在のシステムは、数秒後に次のitemにactiveを移動するという「自動スクロールの機能」の仕様です。
これに、"ゆっくりと一定速度で移動だけする"という機能を加えるとしたら、どういう風になるか、要件をまとめてください。
実装はまだしないで良いです。
実装をしないように言っておかないと、kiroはすぐにコードを書き始めてしまうので、こうした指示は必須です。
そして、返答は以下の通り。
連続スクロール（Continuous Scroll）モード 要件
概要
現行のオートスクロールは「一定時間待機 → 次のアイテムへジャンプ移動」を繰り返す方式。 新モードは「一定速度でスライダーを流し続ける」マーキー的な動作を追加する。
動作仕様
- scrollLeftをrequestAnimationFrameで毎フレーム一定量ずつ加算し、途切れなく右方向へ流す
- 移動速度はdata属性で指定可能にする（例: px/秒）
- activeアイテムの切り替えは、既存の set_active.js のロジック（中央判定）がscrollイベント経由で自然に動く想定
- アイテム補充（item_adjust.js）も既存のscrollイベント経由で発火するが、連続スクロール中の干渉制御が必要
既存機能との競合ポイント
1. scroll-snap-type: x mandatory — スナップが連続スクロールを阻害する。連続スクロール中はスナップを無効化する必要がある（data-scrolling-movingと同様の制御）
2. event.js のスクロール終了検知（50ms timeout） — 連続スクロール中は常にscrollイベントが発火し続けるため、ItemAdjustが頻発する。連続スクロール中はItemAdjustの発火を間引くか、専用のアイテム補充ロジックが必要
3. data-scrolling-moving属性 — 現行はpager/step移動中のフラグだが、連続スクロール中にもこれが立つと event.js 内のSetActiveがスキップされてactiveが更新されなくなる。連続スクロール専用のフラグ（例: data-continuous-scroll）を分離すべき
4. ユーザー手動スクロールとの排他 — ユーザーがタッチ/マウスでスクロールしたら連続スクロールを一時停止し、操作終了後に再開する必要がある
設定インターフェース
現行:
<div class="mynt-slider auto-scroll" data-auto-scroll-time="3000">
追加案:
<!-- 連続スクロールモード -->
<div class="mynt-slider auto-scroll" data-auto-scroll-mode="continuous" data-auto-scroll-speed="50">
| 属性 | 値 | 説明 |
|---|
| data-auto-scroll-mode | step（デフォルト） | 現行の間欠移動 |
| data-auto-scroll-mode | continuous | 連続スクロール |
| data-auto-scroll-speed | 数値（px/秒） | 連続スクロールの速度。デフォルト50 |
| data-auto-scroll-time | 数値（ms） | stepモード時の間隔（既存） |
mode属性が未指定の場合はstepとして動作し、既存の挙動を壊さない。
実装方針（概要のみ）
construct.js 内でmodeを判定し、continuousの場合はrequestAnimationFrameループを起動
連続スクロール開始時にdata-continuous-scroll="true"を.sliderに付与
CSSでdata-continuous-scroll時にscroll-snap-type: noneを適用
event.js 側ではdata-continuous-scroll中のItemAdjust発火を間引く（例: 前回実行から200ms以上経過した場合のみ）
SetActiveは通常通り動作させる（activeの中央追従は維持）
touchstart/mousedownで一時停止、touchend/mouseupで再開
影響範囲
| ファイル | 変更内容 |
|---|
| construct.js | モード判定・連続スクロールループ追加 |
| event.js | 連続スクロール中のItemAdjust間引き制御 |
| style.css | data-continuous-scroll時のスナップ無効化 |
slider/, pager/, step/は変更不要の見込み。
実装
上記の後、コーディング作業のタスクと、詳細な設計ドキュメントが作られたら、いよいよ実装作業です。
実際に、コードを書いてもらうのは、以下を命令するだけです。
これにより、とりあえず第１弾が出来上がります。
ここから、実際に挙動を確認して、修正して・・・の繰り返し作業になります。
なんだか実際の人間がやる開発となんら変わりません。
AIでも言った通りのことができないことも多く、詳細を説明する作業も、人のコミュニケーションとほぼ一緒です。
実際に、どう対応するかを技術説明するような場面も多々ありますね。
これのために、エンジニアリング技術って必須なのだと、改めて体感しました。
Github
以前のGithubと同じですが、以下に、今回の新機能を追加したプロジェクトをアップ(push)してあります。
https://github.com/yugeta/mynt_slider
デモ
以下に、実際の表示がわかるサンプルを用意しておきました。
https://yugeta.github.io/mynt_slider/sample/
あとがき
この機能は、まあまあ今後、頻度高く使うイメージもあるので、このタイミングで作っておいてよかったです。
ただ、まだ足りていない機能としては、カルーセルの基本デザインなどは、サイト側のcssで構築しておかないといけないので、
そうしたところも、ライブラリでサクッと作れるようにして、デザインカスタマイズが細かくできるような機能を追加していく必要があります。
あと、コードモジュールが比較的多い内容になっているので、minモジュールとしての、一括jsファイルを作っておくと、もっと便利に使えるように思いつきました。
このOSS開発もまだまだ先がある活動になりそうです。
0 件のコメント:
コメントを投稿