こんにちは！もうそろそろ新人脱出？森田です。
旧オフィスも好きだったけど新オフィスはとても快適です。が、近所の昼めしスポットを開拓しなければならないという重大ミッションも抱えております。安ウマなお店たくさん発掘できますように。
さてさて、ただ今ハレノヒでは自社アプリを開発中です！
アプリのデザインはなんと私が担当させていただくことに。webデザインよりもっと全然知識がなくて完全手探り状態でしたが、完成までもう一息というところまでこぎつけました。最初はiPhone用としてリリース予定ですのでどうぞお楽しみに！Android派の方はもうしばしお待ちください（森田もおあずけです…）
アプリデザインが一段落ついてからはweb用の告知ページを制作していました。
そこでまた新しい試みをしたので、今回はそのことについて書こうと思います。
Bootstrapとは
「どうやらブートストラップなるものを使うとweb制作がはかどるらしい」というすごい曖昧な予備知識はもっていた森田。でもブートストラップという言葉を初めて聞いた時、真っ先に思い浮かんだのはマッチョな隊長率いるムキムキエクササイズでしたすいません。ちなみに直訳すると長靴のパーツのことらしいです。
正確には、BootstrapとはCSSフレームワークの名前です。
フレームワークというのは色んなところで繰り返し使われる汎用機能を備えたもので、記述の仕方がある程度決まっています。これを利用すれば基盤部分だったり必要な箇所を流用出来てとても効率がいいです。
汎用的なプログラムをまとめたものの仲間としてライブラリというのもありますが、こちらはもうちょっと機能が小さいです。それ自体が働くというよりは、他のプログラムの助けになってくれるイメージです。
本来Bootstrapはテキストベースでナビなどが沢山ある管理画面などの制作に向いています。アプリ用の告知ページは性質が違うのでBootstrapの良さをフル活用とまではならずも、良い勉強になりました！
BootstrapをDLする
まずはBootstrapをダウンロードするところから始めましょう。
と思ったらボタンが３つありますね。
これはどういうことかというと、作業スタイルによって使い分ける感じでしょうか。ページの大枠をお借りするということで、基本は左の”Download Bootstrap”でオッケーです。
ちょっと話は逸れますが、右の二つはどう使うかというと。
最近ではネット上でバージョン管理されたソースコードのリポジトリを使って他人のコードのバグを修正したり出来ちゃうんです。ソーシャルコーディングというらしいです。技術の進歩すごい。また、そんな風にソースコードを自由に見て書き込むことが出来るような活動形態をオープンソースプロジェクトといいます。
そのオープンソースプロジェクトは主にGithubという共有webサービスが使用されているケースが多く、真ん中と右の”Download source”と”Download sass”はGithubで管理されているコードとsassをダウンロード出来ます。必要な機能だけ選んだりもできるようです。
でも今回はソースコード扱うの師匠と私だけだし全然ソーシャルじゃない！というわけでプライベートモードで作業しました。Githubだとプライベート仕様が有料なのでBitbucketという無料サービスを使っています。
Bootstrapでできること
今回はざっくりと紹介することにして、次の機会に詳しく説明していきますね。
Bootstrapではグリッドシステムを使ってレイアウトすることが出来ます。１行に１２列のグリッドがあり、その数を目安に配置していけば大まかにデザインを作れちゃいます。
レスポンシブデザインにももちろん対応してます。グリッドにも何種類かに設定が分かれているので、PCではグリッド・スマホではグリッド解除みたいなことも楽々出来ます。
ボタンやフォームなどの各種インターフェースが揃っているのも心強いです。これらを駆使するとかっこいい管理画面が出来ると師匠が言ってました。
まとめ
今回はBootstrapの紹介をしてみました。ここでまとめただけでもだいぶ便利感あふれてると思いますが、実際使ってみると果たしてどれだけ効率が良いんでしょうか？！Bootstrap、恐るべしです。これを使いこなせたら私もムキムキデザイナーになれる気がします。押忍！