タイラー・ニッカーソンです。マサチューセッツ州ウースターにあるウースター工科大学の3年生です。この3ヶ月間、edXのインターンとしてEコマースチームで働いてきました。Eコマースチームでは、認定資格など、収益化されているコースの管理と維持をより適切に行うためのツールを開発しています。
インターンシップ期間中、これまで知らなかった数多くのフレームワークやライブラリ（特にDjangoとBackboneJS）に精通するようになりました。これまで多くの素晴らしい新機能の開発に携わってきましたが、今回はEコマースチームが最近開発した革新的な製品、コース管理ツールについてお話ししたいと思います。また、このツールに盛り込まれたテーマ設定とスタイル設定についても触れたいと思います。edXが様々なプラットフォームでUXパターンとコンポーネントを活用するという画期的な取り組みです。
コース管理ツール
インターンシップの最後の数週間、私は後にコース管理ツールとなるものの初期ページの構築に携わりました。これは、プロジェクトマネージャー（PM）が、検証済みの証明書、専門教育、単位取得枠などの有料コース製品を作成・編集するためのポータルです。このツールが登場する以前は、これらの変更はDjangoの管理パネルを使って行われていました。これは直感的ではなく、開発者向けのツールであり、ユーザーフレンドリーとは程遠いものでした。コース管理ツールは、直感的で合理化されたインターフェースを提供し、コース製品の追加プロセスを自動化するのに役立ちます。
私は、このツールを開発する最初の開発者となる栄誉に浴しました。 初期リストビュー 閲覧・編集可能なコースを一覧表示するツールです。初期段階では、リストビューはデータテーブル、フィルターボックス、そして機能しない「新しいコースを追加」ボタンのみで構成されていました。リストされているコースの詳細を表示する機能すらありませんでした。
リストビューでは、 DataTables jQueryプラグイン 表のデータを動的かつ堅牢にソートおよびフィルタリングする方法を提供するためです。しかし、このページであまり目立たないのは、スタイルシートの構築に多大な労力が費やされたことです。コース管理ツールは、edXサービスで初めて、この機能をフルに備えたツールです。 UXパターンライブラリedXのUXチームがデザインしたパターンとUIコンポーネントのセットです。パターンライブラリはまだ開発中であり、ナビゲーションバーやメニューなど、多くの重要なコンポーネントが欠けています。コース管理ツールの初期バージョンでは、 TwitterのBootstrapフレームワーク これらのギャップを「埋める」ために、パターンライブラリが使用されました。パターンライブラリに欠けているもう一つの特徴は、モジュール性、つまりライブラリを他のプラットフォームに大幅な変更を加えることなく「プラグアンドプレイ」で導入できる機能です。そのため、コース管理ツールにパターンライブラリを含めることは非常に困難でした。
パターンライブラリのモジュール化
コース管理ツールの作業が最初に開始されたとき、Web サイトでパターン ライブラリを使用するには、次の手順に従う必要がありました。
- 'ux-pattern-library' Gitリポジトリをローカルマシンにクローンします。
- ライブラリのBower依存関係をインストールする
- リポジトリをウェブサイトのディレクトリにコピーします
- main-ltr.scss をインクルードするか、コンパイルして main-ltr.css をメイン HTML ファイルにインクルードします。
理想的には、これがフロントエンド依存関係の従来のアプローチに従う場合、これらの手順は次のように要約される必要があります。
- ターミナルを使用してパターンライブラリをBower依存関係としてインストールします。
- main-ltr.scss または main-ltr.css を HTML ファイルに含めます。
これらのステップを凝縮するのは、かなり長くて野心的なプロセスです。このツールを開発する時間が短かったため、私は自ら追加することにしました。 最小限のプラグアンドプレイサポート パターン ライブラリの場合、次の 3 つの手順のみが必要になりました。
- ターミナルを使用してパターンライブラリをBower依存関係としてインストールします。
- main-ltr.scssを別の場所にコピーし、その依存パスを変更します。
- main-ltr.scssをHTMLファイルに含め、実行時にコンパイルする
理想的とは言えないものの、このアプローチはコース管理ツールの目的には合致し、パターンライブラリはBootstrapとうまく連携することができました。インターンシップの終わり頃には、UXチームとパターンライブラリのモジュール化について話し合う機会があり、 いくつかの提案 パターン ライブラリを Bower とより適切に統合する方法について説明します。
最終製品です！
現在、コース管理ツールは、コースの作成、編集、詳細表示といった機能を備えた、より成熟した製品へと進化しました。データテーブルはページ区切りをサポートし、1ページあたりに表示するコース数も指定できるようになりました。
振り返ってみると、このツールの開発に携わった最初の開発者になれたことを光栄に思います。edXでの仕事に誇りを持っています。edXインターンとしての経験を通して、スキルセットだけでなく、チームでのコラボレーションや計画性など、多くのことを学ぶことができました。昨年の夏、私はガレージを拠点とする別のスタートアップ企業でインターンシップを経験しました。同僚はCEOとプログラミングリーダーの2人だけでした。edXでは、私の提案やフィードバックにオープンで、真摯に向き合ってくれる、献身的で本格的なチームと共に働くことができました。そのおかげで、グループのダイナミクスに貢献する方法や、大規模チームの開発プロセスを理解する方法を学ぶことができました。この素晴らしい夏を共に過ごしてくれたClinton Blackburn、Zach Rockwell、Amanda Nanni、そしてインターン仲間の皆さんに感謝します。近い将来、Open edXプラットフォームに再び貢献できることを願っています。
