Apple iPod Engraver (2019)

Apple iPod engraver

［画像: オリジナルのiPodの前面、側面、背面を示す8つのビュー］

2019年12月12日

私は2004年から2006年まで、AppleのオンラインストアのUIエンジニアとして働いていました。私の仕事の一部は、サイトにインタラクティブな輝きを加えるコンセプトをプロトタイプすることでした。

そのようなプロジェクトの一つに、「iPodをパーソナライズ」ページを改善するものがありました。ここでは、顧客は注文するiPodの背面に刻印する2行のテキストを送信できました。

当初のデザインでは、ページはプレーンなフォーム以上のインタラクションを提供していませんでした。私は回転するiPod、顧客のテキストのライブ「刻印済み」プレビュー、そして配送時間の変更のハイライトを追加しました。

［動画］

私はJavaScriptを使用して一連のJPEGを切り替えることでiPodをアニメーション化しました。刻印はimagemagickを使用して作成され、ユーザーのテキストを受け取り、iPodの背面にオーバーレイされる「刻印済み」画像を返しました。配送のハイライトは、クラシックな黄色のフェードのスタイルで、CSSクラスを切り替えて背景色を変更することで実現されました。

もしご自身で試してみたい場合は、古い動作するデモがあります。

今日では、このようなことを行うための、はるかに優れた方法がありますが、2005年当時、限られたブラウザ技術では、それらのソリューションは少し魔法のように思えました。