bootstrapとrailsで、 高速にwebサイトを作ってみた
TRANSCRIPT
BootstrapとRailsで、 高速にWebサイトを作ってみた10/31 プログラミング生放送勉強会 第36回 ＠株式会社 DMM.com ラボ
プロフィール
竹林 真
DMM.com ラボ システム本部 所属
Webアプリケーション設計、開発PHP, Ruby, Javascript, Unix
金沢事業所所属
所属
業務
プロフィール
Kanazawa.rb
Code for Nanto
Code for Kanazawa
コミュニティ
BootstrapとRailsで、 高速にWebサイトを作ってみた
アジェンダ
1. Bootstrapを利用したフロントエンドの作成
2. Ruby on Rails を利用したバックエンドアプリ
3.その他
注意
Go言語のやマスコットアプリの開発方法は入っておりません。ご了承ください。
対象者
1.Webサイトの開発をあまり経験したことがない方
2.Webサイトを作りたいけどデザインセンスに自信がない方
3.HTMLを一から書くのが面倒なのでラクしてサイトを作りたい
4.フロントエンドが詳しくないのに仕事でウェブサイトの制作が必要になった方
Webサイトを公開するのに重要なこと
1.インターネット上に公開
2.ある程度キレイで人に見せることができる
3.少しでも誰かの役に立つ
HTMLを書くのがめんどくさい！！！
デザインセンスが無いから 作るのに時間がかかりそう！！！
手っ取り早く動くWebサイトを作る
http://getbootstrap.com/
Bootstrap
http://v4-alpha.getbootstrap.com/examples/
Bootstrap
• Webサイトとしてそこそこ使うことができ、キレイにレイアウトに整えてくれる
•フォームやボタンなどをそれっぽく整えてくれる
今は定番の
http://getbootstrap.com/css/
Bootstrap
サンプルコードは豊富だが、完成形をイメージしにくい
さらにラクして作るには？
さらにラクして作るには？
どこかの職人が作っているテンプレートを探して使う
Bootstrapテンプレート(無償）
http://startbootstrap.com/
Bootstrapテンプレートを利用
よく見かける感じのWebサイトのレイアウトを
簡単に作ることができる
どれぐらい簡単？
サンプルをコピーして文字や絵や色を変更するだけ
変更前
変更後
Bootstrapテンプレート(無償）
http://honokak.osaka/
Bootstrapテンプレート(無償）
http://nkmr6194.github.io/Umi/
Bootstrapテンプレート(無償）
http://kubosho.github.io/Nico/
Bootstrapテンプレート(無償)を利用するメリット
• とりあえずWebサイトを作りたいときにオススメ
• オープンソースのライセンスで配布されているものが多いので、使いやすいようカスタマイズもできる
Bootstrapテンプレート(有償)
https://wrapbootstrap.com/
Bootstrapテンプレート(有償)
• 10～30ドルぐらいで販売サれているものが多い
• 実用性を重視して選ぶなら、有償のものを使うのがおすすめ
Bootstrapテンプレート(有償)
http://wrapbootstrap.com/preview/WB0R5L90S
Bootstrapテンプレート(有償)
http://forbetterweb.com/html/csoon/1.5/indexslider.html
Bootstrapテンプレート(有償)
http://themeslivepreview.com/amaretti-v1.1.2/
Bootstrapテンプレート(有償)
• 有償テンプレートを使うとさらにキレイなWebサービスのデザイン構築が簡単にできる
• 簡単にHTMLコーディングができたので、ついでに最近流行りフロントエンド技術を使ってみたい
有償のテンプレートを選ぶ理由• 動きのあるウェブサイトにしたい
• Javascriptに詳しい人が周りに居ない
• AngularJS などのJSフレームワークを触ってみたい
• チームにフロントエンドエンジニアがいない
話が変わって
最近のフロントエンド技術• HTML5
• AngularJS
• React
• Less
• grunt
• gulp
• bower
最近のフロントエンド技術
種類が多くて全部習得するのが大変
Bootstrapテンプレート(有償)
https://wrapbootstrap.com/theme/angle-bootstrap-admin-template-WB04HF123
Bootstrapテンプレート(有償)
Bootstrapテンプレート(有償)
Bootstrapテンプレート(有償)• 多くの言語でのサンプルコードが付属 • 最近良く使われているフロントエンド技術が使われている • 動いてキレイなレイアウトで構成されている • すでに出来上がっている動くソースコードを読むことにより学習コストを削減
Bootstrapテンプレート(有償)• 多くの言語でのサンプルコードが付属 • 最近良く使われているフロントエンド技術が使われている • 動いてキレイなレイアウトで構成されている • すでに出来上がっている動くソースコードを読むことにより学習コストを削減
＿人人人人人人人＿ ＞ カネで解決 ＜ ‾Y^Y^Y^Y^Y^Y‾
Bootstrapテンプレート(有償)
購入してもらったのでソースコードを確認
Bootstrapテンプレート(有償)
• AngularJS • jQuery • MVC5 • Ruby on Rails • MEAN (mongoDB + Express + Angular.js + node.js)
Bootstrapテンプレート(有償)
• AngularJS • jQuery • MVC5 • Ruby on Rails • MEAN (mongoDB + Express + Angular.js + node.js)
Bootstrapテンプレート(有償)• AngularJSを使ったサンプルコード
• AngularJSのベストプラクティスのファイル構成
• gulpを使ったタスクランナー(ファイル生成)
• bowerでバージョンや構成が管理されたライブラリ
• 各種外部ライブラリを使ったサンプル
• APIとの通信サンプル
bootstrapのデモ
実際に開発に着手
• バックエンドを決めていなかった
• あまり時間は掛けたくないけどしっかりしたものを作りたい
• Rails が最近イケてるらしいから使ってみよう
実際に開発に着手
• Ruby を少し触ったことがあった
• チーム内に経験者が居た
• API を作るのが簡単らしいという情報があった
• データベースとの連携機能が充実
Railsを選んだ理由
Rails で API ができるまで
• Ruby が動く環境を構築
Rails で API ができるまで$ rails new sample_app
プロジェクトを作成
Rails で API ができるまで$ bundle exec rails generate scaffold support title:string body:text
ページを作成
Rails で API ができるまで$ bundle exec rake db:migrate
データベースを作成
Rails で API ができるまで$ rails server
サーバを起動
Rails で API ができるまで
自分でデータを登録するために使用
Rails で API ができるまでREST APIも同時に生成
デモ
Rails でプロジェクトを作成
Rails で API • JSONのREST APIが手軽に作ることができれば、Webサイト以外にも、UnityやスマホアプリのAPIとして作成してサーバーのデータベースと連携させることも簡単になります
その他• 見た目にこだわらないならもっと簡単にWebサイトを作る方法もある
yeoman• 公開されているソースコードのテンプレートを使用してWebサイトを作成するためのツール
http://yeoman.io/
yeoman$ yo
これだけ
yeoman
yeoman
yeoman
yeoman
• Webサイトのフロントエンドを構築するための一通りのソースコードが付属してくるので、拡張が容易
yeoman
デモ
yeoman でページを生成
まとめ• 忙しい時は重要度の低いところは手を抜くことも大事
• 空いた時間でさらに別の開発をすることも可能
• 作ったアプリを紹介するページを用意したいときとかも簡単に用意できる
ご清聴ありがとうございました。