1. まとめトップ

マクドナルドのメニュー価格計算機Webアプリについて

jQueryの勉強がてら「マクドナルド計算機」を作ったので、覚書と使い方をまとめました

更新日: 2013年02月19日

1 お気に入り 2786 view
お気に入り追加

この記事は私がまとめました

ykfmfst2012さん

Webアプリ

作成した経緯

使い方

左上のフレームでメニューの種類を切り替えます。
初期状態では「基本メニュー」が表示されており、ボタンをクリックすると切り替わります。
メニューの種類は下記の4タイプです
・基本メニュー(ハンバーガーなど)
・サブメニュー(ポテトなど)
・ドリンク(コーヒー、コーラなど)
・セットメニュー(バリューセット、ハッピーセット)

価格ボタンをクリックすると、そのメニューが「選択済みメニュー フレーム」に登録されます。
解除は「選択済みメニュー フレーム」から行います。

「詳細」をクリックすると、マクドナルド公式サイトの各メニューのページへ飛びます。

メニュー名クリックでも登録できるようになっていますが、Sサイズ固定です。

選択したメニューを表示するフレームです。
合計金額と選んだメニュー、そして×ボタンが表示されます。

×ボタンはメニュー単体の選択解除
全削除ボタンは選択済みメニュー全解除 を行います

一番右のフレームには「選択したメニュー合計金額以下で食べられる他社商品」を表示します(価格昇順)
初期状態では空、メニューを選択すると更新されます。
(各社高いものから優先的に最大12個まで表示)

表示項目は
・価格
・商品名(サイズ、セット名含む)
・企業名
・公式サイトへのリンク(「詳細」をクリック)
です。

おまけ機能なので深い意味はありません。
なお、登録されているのは以下の6社です。
 モスバーガー
 フレッシュネスバーガー
 松屋
 松乃家
 すき家
 かつや

構成、処理の流れについて

マクドナルドのメニューデータはcsvで管理。読み込みにはjquery.csv.jsを使っています。
名前、サイズ(セット)ごとの値段・URL、メニュー種別を1レコードに持たせる構成です。
(表示する際、サイズ(セット)と商品との関連付けがないと横並びにできないため)

他社商品のメニューデータもcsvですが、構成は若干異なります。
こちらはただ縦に並べて表示するだけなので、値段が違うものは全て別レコードです。

外部データ管理について

エントリポイントで外部データの読み込みとメニュー種別選択用のボタン配置、clickコールバック登録だけ行い、あとはコールバックから必要な処理を行う構成です。

処理の流れについて

開発時にハマった点

・最初Firefoxで開発していたが、ローカルでは外部データ(csv)が読めずにテストできなかった
 「security.fileuri.strict_origin_policy」をfalseにしてもダメだった...
・IEのJavaScriptデバッガ使いにくい。あとよく落ちる。
  Firefoxの方がいいですね
・タイミングバグ
  ローカルでは意図した動作をしていたが、アップロードしたらガタガタだった。
  jQuery.getのコールバックが来た後にすべき処理がコールバックの外側にあり、ローカルではたまたま動いていたが、遅延が発生すると読み込み完了前に処理してしまう不具合。

1