オルタナティブ・ブログ > イメージ AndAlso ロジック >

ヴィジュアル、サウンド、テキスト、コードの間を彷徨いながら、感じたこと考えたことを綴ります。

変わる、レシピ検索。ビーガンをベースに、肉食まで網羅する、全方向型ユーザインタフェースを考える。

»

cookingTitleImage.png

ビーガンベースで、オプション追加という、インタフェース

われわれの食生活は、ゆるやかに変化している。
昭和の時代は、畜肉が毎日食卓にのぼることはなかった、それが今では、焼肉が市民権を得ている。今後は、多様化が進む。アレルギー、動物愛護、食文化の違い、信仰など、考慮すべき要素は多い。
ベジタリアンひとつとっても、厳格なビーガン、ペスクタリアン、ラクトオボベジタリアンまで、いろいろなタイプがある。その分類は細かい。複雑な要素の組み合わせとなる。

食が変化すれば、レシピサイトのユーザインタフェースも変わる。
現在一般的なUIは、メインの食材を指定して検索するというものだ。その結果はといえば、魚がメインの料理に卵が使われていたり、卵がメインの料理に乳製品が使われている可能性がある。そのため、ユーザーは、自分で食材を変更する必要がある。

たとえば魚だけ食べる人なら、肉も卵も乳製品も不使用のレシピを入手でき、魚と卵を食べる人なら、肉も乳製品も不使用のレシピを入手できる、といったインタフェースが望ましい。
あらゆる条件を網羅するには、シンプルな食材をベースにしてオプションを指定するインタフェースが、わかりやすく、透明度の高い処理になる。
完全なビーガンを基本にして、肉、魚、卵、乳などをオプションとして指定するUIが考えられる。

レシピ公開のUIの変遷 ~ 1996年、PDFで公開

筆者は、環境視点からのノンミートイーター、いわゆる「ゆるベジタリアン」だ。
水産王国えひめの住人だから、魚介ダシは必須であって、ビーガンにはなれない。また、仕事上の付き合いでは、もてなされたら、断るのは失礼なので、乳や卵を使った料理を食べる。記念日には洋菓子を食べることもある。

そのような食生活であるので、1996年、各地にインターネットのアクセスポイントが開設された頃、ベジタリアン向けレシピのウェブページを公開した。

最初は、静的なPDFのページだった。
Mac版Photoshopに付属していた、Adobe Distiller Trial(En)で、「Vegetarian Digitarian」という数ページのPDFを作成した。まだAcrobatはなく、Adobe Distiller単体。日本語には対応していなかったため、英語で作成した(画像は、当時のPDFの1ページ、ナスのカレーと、トマトビーンズ)。

当時は、Googleもbingもなく、Yahoo!だった。ページのURLを申請すると、人手で内容を確認したうえで登録してくれる。筆者のこのページは、Adobeと関係企業の次に登録された。

vegepdf600.png

2008年、ビーガンから肉食まで吸収する、Webアプリを公開

2008年2月、スタティックなページではなく、検索処理を実装。365件のデータを供えた、Webアプリを公開した。

cook_title.gif

データ形式は、XML。Excelで入力した献立データを、フラットな形式で書き出し、XSL変換して、XMLデータを作成。LINQ to XMLを使ってクエリを取得し,GridViewに表示した。開発ツールは、Visual Studio 2008、言語は.Visual Basic。NET Framewor 3.5で動く、ASP.NETアプリケーションだ。

その後、OSやFrameworkなど、プラットフォームがアップデート。これには対応せず据え置いたため、現在、アプリは動作しない。ただ、説明ページはシンプルなHTMLなので、PCから閲覧できる。菜食と肉食の作り分け方法は参考になるかもしれない。

2011年、Webアプリから移植、Windows Phoneアプリを公開

2011年、Windows Phoneが発売されることになり、ベータ版のプラットフォーム、コードネームMangoiが公開された。
そこで、前述のNET Webアプリケーションを移植。au IS12T(Windows Phone)対応のSilverlight 4 アプリケーションを公開した。

データ構造やユーザーインタフェースは、.NET Webアプリと、ほぼ同じだ。

「すべての分類、パン、めん、主菜、副菜、汁物、おやつ」から分類を選択し、追加したい食材をチェック、必要であれば検索ワードを入力して、検索する。このように、ビーガンをベースとして、肉、魚、乳、卵を条件に追加して検索できるインタフェースとなっている。
直感的な操作を実現するには、このインタフェースがベターではないかと考える。

なお、コードはブログで公開している。( 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10

searchKey.pngこれを公開した後、Windows Phoneは頓挫。そのため、このアプリは、現在では動作しない。
wmvファイルの、操作手順の動画は、環境によっては閲覧できる可能性がある。

食が変われば、データ利用方法も変わる。

食の事情が変われば、情報を得るためのインタフェースも変わる。データ構造まで踏み込む必要が生じることも、ないとはいえない。

レシピサイトの今後のインタフェースの、ひとつのプランとして、検討してみてはいかがだろうか。

Comment(0)