2009年5月18日
Zen Cart携帯版×Flash:「商品みるなびFlash!」でZen Cartの商品情報をちょっとリッチに見せる
最近auからdocomoにキャリアを乗り換えたSEの竹村です。
携帯電話の各キャリアのオフィシャルページやオンラインショップなどでFlash Liteを利用してコンテンツを効果的に見せるサイトが増えてきています。
このブログでも以前取り上げた『携帯RIA:COACHの携帯Flashサイトに見る、Flash Liteで魅力的な携帯サイトをつくるコツ』もFlashでカラーバリエーションを見せたり、実際に持った大きさ比較ができたりと、Flashならではのコンテンツの見せ方ができるようになっていました。
アークウェブでも携帯用Flashを利用して何かできないか...ということで今回の「商品みるなびFlash!」を作りました。これは、Zen Cartの商品情報と連携して商品一覧をFlashで表示できます。
商品一覧から商品の詳細画像を表示して、気に入った商品はZen Cartの商品詳細に遷移することでカートに入れられる仕組みとなっています。

下記にデモ環境がありますので、携帯でアクセスしてください。
http://okra.ark-web.jp/~takemura/public/flash/lite2.0/for_zen-cart/index.php?main_page=page&id=15&chapter=0
このQRコードからもアクセスが可能です。

より詳しい説明については『みるなびFlash!の紹介』をご覧ください。
以下では、このモジュールをどのように利用できるか、またオープンソースなのでどのようにカスタマイズできるか、について考えてみました。
このモジュールをどのように利用するか
このモジュールの利用シーンとしては、Zen Cartからカテゴリに関係なく特定の商品だけを選んで商品一覧を作ることができるので、特集のような形で商品一覧をユーザに提供できるようになります。
また、上記の例で「例2 Kid's Tシャツ | デモショップ」のようにショップ名などの任意の文言を表示しておける機能があり、ここに特集のタイトルを書いておくことも可能です。
どのようにカスタマイズできるか
以降は、現在は実装していませんが、実装するとより使い勝手が向上しそうなカスタマイズについて考えてみました。もし、カスタマイズが必要であれば弊社にご依頼いただければ対応可能です。
複数のグループを表示できるようにする
現在は、みるなびFlash!を起動すると「アイテム一覧を見る」というボタンがあるだけですが、ここに「バッグの一覧を見る」「時計の一覧を見る」などと複数の商品グループから商品一覧を見られるようにできると、なお良さそうですね。
商品数を16件より多くする
現在は、商品一覧の点数は4×4の16件までしか表示できませんが、実装のアーキテクチャ的には、商品点数が16件より多い場合でも下にスクロールできるようにしてあります。
これは『Flash/Lite/KlabのケータイFlash勉強会デバッグ会に行ってきました』に書いた画面内スライドの機能と同じように実装されています。
下記のダウンロードフォームから「みるなびFlash!」一式の他に、Flashのソースコードも落とせます。 ライセンスはGPL v2です。規約の範囲内でのカスタマイズが可能です。
https://www.ark-web.jp/zen-cart/download.html
これらについてのカスタマイズが必要であれば弊社にご依頼いただくことも可能です。お気軽にご相談ください。
投稿者 竹村 : 09:12 | トラックバック(0)
その他の記事
Adobeが示した3つのトレンドにみるリッチコンテンツの方向性 | Adobe MAXの基調講演レポート
- 2009年2月12日
- 投稿者 : 竹村
アークウェブのお手伝い事例:SBIグループの金融持株会社「SBIホールディングス」様のウェブサイトをリニューアル
- 2008年12月18日
- 投稿者 : 八木
アークウェブのお手伝い事例:ロック&ポップスのオンラインCDショップ「カケハシ・レコード」のウェブサイトをリニューアル
- 2008年12月 4日
- 投稿者 : 中野
携帯RIA:COACHの携帯Flashサイトに見る、Flash Liteで魅力的な携帯サイトをつくるコツ
- 2008年10月30日
- 投稿者 : 竹村
Adobe Flex:「WebデザイナーにもわかるFlex画面デザイン」を連載中です
- 2008年10月20日
- 投稿者 : 小森
アクセシビリティ:Think ITにてWAI-ARIAの記事(全4回)を執筆しています!
- 2008年9月 5日
- 投稿者 : 志田
Flashによるアクセシビリティで押さえておきたいポイント:本物のWebアクセシビリティ・セミナーで聞いてきました
- 2008年7月22日
- 投稿者 : 竹村
最新のAdobe AIR事例:これがAdobe AIRコンテストに受賞した5作品だ!
- 2008年6月23日
- 投稿者 : 竹村
Flex×Google Maps API for Flash:Flexを使ったGoogle Maps API for Flashによる地図表示、連載で解説します!
- 2008年6月 9日
- 投稿者 : 竹村
JavaScriptからFlashの関数を呼ぶ:getURLでなくExternalInterfaceを使用する利点
- 2008年5月13日
- 投稿者 : 竹村
RIA:HTMLとJavaScriptだけでも簡単にAdobe AIRのRIAアプリを作るサンプルをリクルート「つくるぶ」に書きました
- 2008年3月14日
- 投稿者 : 竹村
RIA:SWFAddress2.0によるディープリンクの作り方とアクセス解析の注意点
- 2008年3月 4日
- 投稿者 : 竹村
デベロッパーサミットで聞いたRIA関連のレポート
- 2008年2月15日
- 投稿者 : 竹村
Ajax:script.aculo.usでもモーショントゥイーン
- 2008年1月30日
- 投稿者 : 志田
つくるぶガイドブログ:『Flickrとのマッシュアップ』記事のまとめと振り返り
- 2007年12月18日
- 投稿者 : 竹村
JavaScript:画像拡大表示ライブラリ「PopBox」、HTMLのテーブルより高度なGrid表示ができる「dhtmlxGrid」のデモ
- 2007年11月26日
- 投稿者 : 竹村
つくるぶのガイドブログにFlickrとのマッシュアップ記事を書きました
- 2007年11月 9日
- 投稿者 : 竹村
RIAコンソーシアム『Adobe MAX 2007 最速レポート』で知ったAdobeアプリの今後
- 2007年10月16日
- 投稿者 : 竹村
Wii Remote APIの超訳をしてみました
- 2007年8月 7日
- 投稿者 : 志田
Google Gears:概要とAdobe Apolloとの違い
- 2007年6月 1日
- 投稿者 : 竹村
Adobe Apollo:いよいよオンラインとデスクトップが本格的につながるかも?
- 2007年3月 6日
- 投稿者 : 竹村
Taggingをテストしています
- Web 2.0 (83)
- Google (62)
- Ajax (51)
- RSS (44)
- Movable Type (43)
- SNS (41)
- Zen Cart (39)
- ビジネスブログ (38)
- ECサイト (37)
- アークウェブ (35)
- CMS (31)
- オープンソース (28)
- CSR (26)
- オンラインショップ (25)
- ブログ (24)
- Yahoo! (24)
- Podcast (24)
- A-Form (23)
- Web2.0 (23)
- SEO (22)
- EC (21)
- CGM (21)
- MTOS (21)
- マッシュアップ (20)
- SEM (19)
- アクセシビリティ (18)
- サーチエンジン (18)
- プラグイン (18)
- Videocast (17)
- JavaScript (16)
- マーケティング (16)
- UI (15)
- Twitter (15)
- API (14)
- YouTube (13)
- MovableType (13)
- ケータイ (13)
- Skype (12)
- システム開発 (12)
- Blogosphere (12)
- RSSフィード (12)
- ソーシャルブックマーク (12)
- Google Maps (11)
- PlugIn (11)
- Vodcast (11)
- Mashup (10)
- Flash (10)
- Webマーケティング (10)
- Microsoft (10)
- mixi (10)
- Total Keywords: 857
- Total Keywords(Sum): 2537
- by Tagwire Plugin
アークウェブの本
Zen Cartによるオンラインショップ構築・運用テクニック―オープンソース徹底活用
内容充実のZen Cart公式本(v1.3対応)がついに発表です。アークウェブのスタッフをはじめZen-Cart.JPの中心メンバーが共著で執筆しました。続きを読む
人気記事
ランキング
新着はてブ
カテゴリー
- A-Form, MTプラグイン
- Ajax (システム開発)
- CMS(コンテンツマネジメント・システム)
- CSR(企業の社会的責任)
- Miqqle
- OpenSocial (システム開発)
- PukiWiki
- RIA (システム開発)
- Ruby on Rails(システム開発)
- SEM・サーチエンジン広告
- SEO・サーチエンジン最適化
- Snippy(SNS・ソーシャルブックマーク)
- Web 2.0
- WebSig24/7
- Webアクセシビリティ
- Webデザイン
- Webマーケティング
- Webユーザビリティ
- Web・ITニュースクリップ
- XP・アジャイル(システム開発)
- Zen Cart(オンラインショップ構築)
- ecoったー
- mixiアプリ
- necoったー
- アークウェブ
- アークウェブのCSR
- オープンソース
- セキュリティ(システム開発)
- テスト(システム開発)
- データベース
- ビジネスブログ・MovableType
- ビッグイシュー(The Big Issue)
- マッシュアップ
- 唐松(アクセス解析)








(準備中)




