きなこもち.net

.NET Framework × UiPath,Orchestrator × Azure × AWS × Angularなどの忘備録

BootStrap × テンプレート × ナウイUI作ってみた

この記事の目的

この記事では、
BootStrap初心者がナウイUIを作る軌跡をまとめること
を目的としています。


本題

★Bootstrapとは

レスポンシブルなUIを開発する際によく利用されるフロントエンドのライブラリです。Visual Studio2017でWebアプリケーションを作ったとき、デフォルトで入っています。
f:id:kinakomotitti:20181114213445p:plain
※1 今回の環境では、Bootstrap v3.3.7が利用されていました。
※2 新しいプロジェクトを作成するときに「空」を選択した場合は入ってきません。
f:id:kinakomotitti:20181114213450p:plain
f:id:kinakomotitti:20181114213506p:plain



公式サイト↓

getbootstrap.com


日本語リファレンス↓

bootstrap3.cyberlab.info



★Bootstrapを使った画面作成Ver.1

最近のいい感じのWebはレスポンシブ対応なものがおおいです。例えば、Azureのサイトでは、フル画面のとき↓のように見えますが・・・
f:id:kinakomotitti:20181114213511p:plain
ブラウザの横幅を狭めていくと、画面上部に出ていたメニューが消えて、代わりにハンバーガーボタンと呼ばれるボタンに集約され、このようにUIが変化します↓
f:id:kinakomotitti:20181114213518p:plain
なお、中途半端な幅の場合は、こんな感じになりました↓サインインと無料アカウントリンクが悲しいことに・・・
f:id:kinakomotitti:20181114213524p:plain


また、Iphoneで見た場合はこんな見た目になります↓
f:id:kinakomotitti:20181114213533p:plain

このように、それぞれの画面サイズでも見やすい、操作しやすいようにフレキシブルに画面のUIが変化するというところがナウイと感じます。が、しかし、これを一から自前で用意するのはとても大変そうです。そこで、BootStrapの力を借りて、上記のAzureのサイトのようなナウイ感じのUIに近づけていこうと考えました。

ということで、最初のUIはASP.NETのテンプレートをベースに作ることにしました。できた画面はこんな感じです↓
f:id:kinakomotitti:20181114213547p:plain

テンプレートそのままですね。それでも、カッコいい感じのUIです。値を変えていけばそれっぽいUIのアプリが作れそうだと感じます。そんな感じで満足していたら、さらに違う世界を発見しました。


★Bootstrapを使った画面作成Ver.2

「Bootstrap Template」で調べててみると、なんとOSSで公開されているテンプレートがたくさんありました。これがその世界の一例です( ゚Д゚)。
f:id:kinakomotitti:20181114213557p:plain
これは、NOW UI KITというFreeのUI Kitです。ASP.NETのテンプレートもきれいですが、こっちはよりきれいだと感じました(/・ω・)/ほかにもいろいろなテンプレートがOSSで展開されているようですが、今回は、頭文字が「N」ということで、ニコニコ動画風アプリを開発しようとしているテーマと一致したため、このNOW UI KITを利用させていただくことにしました。画像はありませんが、このNOW UI KITもレスポンシブデザインに対応しています。最高にナウいです。


公式サイト↓
www.creative-tim.com




★あったらいいなと思ったもの

当たり前ですが、NOW UI KITをはじめ、テンプレートのデモやサンプルは、HTMLとして提供されています。そのため、ASP.NETのViewとして使うためには、少し作業が必要になります。例えば、拡張子をCSHTML にしたり、Headerなどの画面共通部分を_Layout.cshtmlに切り出すなどの作業です。
こういった作業をしなくてもASP.NETのViewとして使えるようにするために、CSHTML形式のテンプレートがあったらうれしいなと感じました。オリジナルの更新に合わせてメンテナンスしないといけなくなるのは煩わしいですが・・・




まとめ

きれいなUIをあきらめてしまう前に。NOW UI KITするのがよい!
※ほかにも素敵なテンプレートがたくさんあります。