1.モール別ランキングアプリの全体構成

「モール別ランキング」アプリのソース解説1回目です。1回目は「モール別ランキング」アプリ全体の構成について解説していきます。

「モール別ランキング」の内容

楽天、Amazon、YahooショッピングのAPIを使用してWEBアプリ「モール別ランキング」を作成しました

アプリURL
モール別ランキング – 大手通販サイトのランキングを比較

 

モール別ランキングの構成図

クライアント(ブラウザ)の構成

HTML:

モール別ランキングの文章や画像などの表示を行います。

 

CSS:

モール別ランキングの文字の大きさや位置、カラー設定などのスタイル指定を行います

 

Javascript(jQuery):

ボタンなどをクリックした際のスクロール移動などモールランキングのブラウザ内の動きを制御しています。

 

サーバーの構成

PHP:

APIにより楽天、Amazon、Yahooの商品データを取得し、HTMLに取得したデータをランキング形式で埋め込みます。

 

 

フォルダ、ファイル構成

「mall-ranking」フォルダ配下

モールランキングのルートフォルダです。

 

・「asset」フォルダ

画像やCSS、Javascriptファイルを配置するためのフォルダです。

 

・「element」フォルダ

ヘッダー、フッター部分など共通化できそうな画面(HTML)要素を格納するためのフォルダです。

「amazon.php」:amazonランキング情報の一覧を表示するPHPスクリプトとhtmlタグが記載されています。

「footer.php」:全ページ共通のフッター情報のhtmlタグが記載されています。

「header.php」:全ページ共通のへッター情報のPHPスクリプトとhtmlタグが記載されています。

「rakuten.php」:楽天ランキング情報の一覧を表示するPHPスクリプトとhtmlタグが記載されています。

「search.php」:検索フォームを表示するPHPスクリプトとhtmlタグが記載されています。

「tab.php」:Yahoo、Amazon、楽天ランキングの情報を切り替えるタブを表示するPHPスクリプトとhtmlタグが記載されています。

「yahoo.php」:楽天ランキング情報の一覧を表示するPHPスクリプトとhtmlタグが記載されています。

 

 

・「module」フォルダ

使用頻度の高い関数をライブラリ化したPHPファイルを格納するためのフォルダです。

「amazon_function.php」:amazon product apiを使用し商品情報を取得するためのPHP関数のライブラリです

「common_function.php」:「モールランキング」アプリで使用するPHP共通関数のライブラリです。

「rakuten_function.php」:楽天 apiを使用し商品情報を取得するためのPHP関数のライブラリです

「yahoo_function.php」:Yahoo apiを使用し商品情報を取得するためのPHP関数のライブラリです

 

 

・「.htaccess」ファイル

サーバーのディレクトリごとの設定情報を記述するファイルです。URLに「.php」の拡張子がなくてもアクセス出来る様に設定しています。

 

・「index.php」ファイル

「モール別ランキング」のトップページのファイルです。

 

・「ranking.php」ファイル

「モール別ランキング」のランキングを表示するファイルです。

 

「asset」フォルダ配下

・「css」フォルダ

CSSファイルを格納するフォルダです。

「base.css」ファイル:「モール別ランキング」のcssファイルです。

 

・「img」フォルダ

画像ファイルを格納するフォルダです。

「header.jpg」:トップページ ヘッダー部の画像ファイルです。

「starlevels.gif」:レビュー評価を表示する星型画像を並べたファイルです。

 

・「js」フォルダ

javascript、jQueryのライブラリなどを格納するフォルダです。

「common.js」:「モール別ランキング」の共通関数ファイルです。

 

次回は各ソースファイルの中身について解説します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です