「MVNO価格比較一覧」をマネー報道Webサービス第1弾として作成！途中までですけどね(^-^;

あとで読むスポンサーリンク

Webサービス

はてさて、昨日から急遽スタートしましたWebサービス開発「MVNO価格比較一覧」ですが、Bootstrapフレームワークを使ってデザインも良さげにしつつ作りこんでいきたいと思いつつ開発をスタートした次第であります。
昨日はＤＢ（データベース）に突っ込んだMVNOの価格データを表示してBootstrapを適用したところまで。

昨日作ったのはここまで。
f:id:MoneyReport:20160415164850j:plain

MVNO価格一覧表 | マネー報道 Webサービス test01

いかんせん見づらいですし、並び順もイマイチです(-_-;
ただ単にDBから取得したデータをそのまま表示しただけという工夫の欠片もない状態(;_;)

でもメゲズにドンドン作りこんでいきたいと思います(^-^)/

作りこみ

さぁ、本日はどこまで作れるでしょうか？
作ろうと思っている内容は下記。

取得した価格データを配列に格納し、データ容量別にまとめる
価格データがないデータ容量は表示しない（配列から削除）
TABLEの組み方に合わせて配列データを格納し直す
他社MVNOに価格があり、該当MVNOに価格がない場合には”－”を表示する
データ容量別に価格最安値には色を付ける！

と言った所です。

本当は絞り込み条件を変えたりも将来的に出来る様にしますが、今日はそこまでは無理かな(^-^;？

特に面倒くさかったのが「３．TABLEの組み方に合わせて配列データを格納し直す」の部分です。
ちょっとだけ見てみましょう。

３．TABLEの組み方に合わせて配列データを格納し直す

ここで考えなければいけないのは、TABLEのデータ格納順序です。
TABLEタグは下記の様な順番でデータを格納していきます。

1	2	3	4
5	6	7	8
9	10	11	12

で、実際の格納内容はと言うと・・・

容量	IIJ	OCN	BIGLOBE
3GB	900	1000	1100
5GB	1500	1600	－

の様になります。
上記のデータを配列として格納して行こうとすると、下記の様な並びに変えなければいけません。

１：容量
２：IIJ
３：OCN
４：BIGLOBE
５：3GB
６：900
７：1000
８：1100
９：5GB
10：1500
11：1600
12：－

単純に全部のデータがあるなら簡単なのですが、12番目の所の様に「価格なし」の場合もあるので単純にはいきません。

・・・（コーディング中）・・・

でけた！！！
ゴチャゴチャ書きまくって、汚いソースになりましたが何とか並び替え出来る様になりました(^o^;

と、ほとんど本日はここで時間を食ってしまったようなものです(-_-;
まぁここが一番大変なところなので、今後は多少楽が出来るでしょう(^^:

出来上がったWebサービス

そして本日作ったのがこちら！
f:id:MoneyReport:20160416162452j:plain

リンクは下記。ぜひ表示してみて下さい(^-^)/

MVNO価格一覧表 | マネー報道 Webサービス test02

TABLEタグを使ってきれいに表示しています(^-^)v

価格は急ぎでデータを入れたので間違っているかもしれません(^-^;
間違っていたら教えて下さい、直しますのでm(_ _)m

また今回力を入れた部分として価格一覧を載せたTABLEをレスポンシブ対応（スマホとかでも見やすい♪）してあります！
パソコンだとそのまま一覧が表示されますが、ブラウザの横幅を縮めていくか、スマホとかで表示をすると・・・
ババン！

f:id:MoneyReport:20160416162315j:plain

TABLE下に横スクロールバーが出て、ずらして表示させる事が出来ます！

これもBootstrapを使うと簡単です♪
ソースコードを見てみましょう。

<div class="table-responsive">
  <table class="table table-hover">
    <thead>
      <tr>
        <th>データ容量</th><th>IIJmio</th><th>OCN</th><th>BIGLOBE</th><th>DTI</th><th>So-net</th><th>楽天</th><th>NifMo</th><th>mineo(D)</th><th>BB.excite</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>