マネー報道 MoneyReport

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

Webサービス作り開始!Bootstrapのデザイン適用も併用!

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

デザインフレームワークBootstrap

自分の作ったWebサイトやWebサービスのデザインの質が低いのが長年の問題だったので、それを解決すべくデザインについて勉強を始めました。
昨今のWebサイトデザインは「Bootstrap」という物が流行りのようです。

で、このBootstrapを手軽に適用したり試したりするのに「BootstrapEditor」というオンラインエディタを試しました(^-^)v
BootstrapEditorの使い方については下記記事にまとめました。

作りこんだWebサイトにサクッとHTMLコードを適用して、Bootstrapフレームワーク(CSS、JavaScript、Fonts)を適用するだけで見栄えのするWebサイトデザインが簡単に組み上げられます!

そして、

「人が沢山使ってもらえるWebサイトを作る!」

という新たな目標を掲げたため、このマネー報道著者のアカウントに紐づいたサービスを作ってみようと画策中です(^-^)v

で、その企画第一弾として良きアイデアを頂いたので挑戦してみようかと。

id:hana3hanaさん
携帯各社とMVNO各社の料金比較はどうでしょうか?複雑な契約や解約金を、条件入力とクリックひとつで表示させる・・・作るの難しそうですが、需要はあると思いますよ。

ふむふむ。
これは良さげですね!
丁度、私もMVNOや格安SIM向けのWebサイトも作ってみたいな~、と思っていたのでうってつけです!
id:hana3hanaさん、アイデアを頂いてしまいます(^-^)v

MVNO価格一覧表

いきなりキャリアとMVNOの価格比較や料金比較は作り込めないので、まずは手始めに

MVNO価格一覧

から作ってみようと思います!

という訳で、今朝からPHPでWebサイト作りを始めました(^-^)V
やった手順は下記。

  1. DBを新規作成
  2. TBALEをCRFATE
  3. テストデータをINSERT
  4. DB読み出し
  5. 読み込んだデータの表示

と、なります。
久々にPHPをガシガシ書いたら初心者がはまるところで何度も躓いて時間が掛かってしまい、出来はイマイチになりましたが、とりあえず表示できる所までは作りこんだので見て下さい!

作ったWebサイト

リンクは下記になります。

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

まずはPHPで作りこんだ所まで。
IIJmioとOCNモバイルONE、BIGLOBEのMVNO3社の「データ専用SIM」のデータを表示する所までです(^-^;

f:id:MoneyReport:20160415164230j:plain

見辛いですが、1日目ということでご勘弁を<(_ _)>

Bootstrapを適用

で、さすがに見栄えが悪いので、ここでBootstrapの出番です!
「サクッ」と適用したいので、Pingendoじゃなくて「BootstrapEditor」の方を使います!

【Bootstrapオンラインエディタ】
Bootstrap Editor

Templateと文字種類を選びます!

f:id:MoneyReport:20160415164453j:plain

今回は上記の組み合わせで行こうかと。

で、このHTMLコードの左側の部分を先程作ったPHPファイルに間違わない様に適用していきます。

・・・(適用中)・・・

またグリッド列も適用してみます。
下記の様なコードになります。
これで、レスポンシブ対応になります。

      <div class="row">
        <div class="col-md-4">
          IIJmio
        </div>
        <div class="col-md-4">
          3GB
        </div>
        <div class="col-md-4">
          900円
        </div>
      </div>

Bootstrapを適用してファイルをアップし直して、表示すると・・・

f:id:MoneyReport:20160415164850j:plain

こんな感じに!

まぁそれほどパッとしないですけど、時間がないのでこんなもので(^-^;
明日、もう少し作りこんで、デザインもグッと良くしていきたいと思います(^-^)/

まとめ

  • PHPでWebサイトを作る
  • Bootstarpフレームワークを適用する
  • 見栄えのアップしたWebサイトにする事が出来る!