「モール別ランキング」アプリのソース解説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」：「モール別ランキング」の共通関数ファイルです。
次回は各ソースファイルの中身について解説します。
コメントを残す