読者です 読者をやめる 読者になる 読者になる

マネー報道 MoneyReport

マネーにまつわる報道を取り上げ、自分の切り口で切り取り、噛み砕いてお伝えします。

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

ブログ運営 開発向け
スポンサーリンク
あとで読む

Webサービス

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

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

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

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

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

作りこみ


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

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

と言った所です。

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

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

3.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

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

1:容量
2:IIJ
3:OCN
4:BIGLOBE
5:3GB
6:900
7:1000
8:1100
9: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>

tableタグのすぐ上のdivタグ(1行目)なんですがここを「<div class="table-responsive">」と指定してあげる事で、タブレットやスマホでもスクロールバーが出て崩れずにTABLEを表示する事が出来ます(^-^)v
table-responsive」良いですね~♪

という訳で、「Webサービスの作りこみ + デザイン向上」も並行して出来るのがBootstrapを使っての良さでしょうかね~。

あ、本日はBootstrapEditorだけだとTABLEタグが取れなかったので、Pingendoも使っています(^^)v
Bootstrapエディタ「Pingendo」の使い方は下記記事に。

いずれにしても簡単にデザインをPHPなどのコードに適用できますので、本当にオススメです!

さぁ、残りの作りこみは来週かな~(^o^;

まとめ

  • マネー報道Webサービス第1弾は「MVNO価格比較一覧」を作ります!
  • 本日はTABLELタグを使って、MVNO価格をきれいに表示!
  • Bootstrapの適用にはPingendoを使用!簡単です♪