BootstrapとRailsで、 高速にWebサイトを作ってみた
23 likes11,389 views
BootstrapとRailsで、 高速にWebサイトを作ってみた 10/31 プログラミング生放送勉強会 第36回 ＠株式会社 DMM.com ラボ
BootstrapとRailsで、 高速にWebサイトを作ってみた
- 2. プロフィール 竹林 真 DMM.com ラボ システム本部 所属 Webアプリケーション設計、開発 PHP, Ruby, Javascript, Unix 金沢事業所所属 所属 業務
- 3. プロフィール Kanazawa.rb Code for Nanto Code for Kanazawa コミュニティ
- 5. アジェンダ 1. Bootstrapを利用したフロントエンドの作成 2. Ruby on Rails を利用したバックエンドアプリ 3. その他
- 16. さらにラクして作るには？
- 21. 変更前
- 22. 変更後
- 33. 有償のテンプレートを選ぶ理由 • 動きのあるウェブサイトにしたい • Javascriptに詳しい人が周りに居ない • AngularJS などのJSフレームワークを触ってみたい • チームにフロントエンドエンジニアがいない
- 34. 話が変わって
- 35. 最近のフロントエンド技術 • HTML5 • AngularJS • React • Less • grunt • gulp • bower
- 40. Bootstrapテンプレート(有償) • 多くの言語でのサンプルコードが付属 • 最近良く使われているフロントエンド技術が使われている • 動いてキレイなレイアウトで構成されている • すでに出来上がっている動くソースコードを読むことによ り学習コストを削減
- 41. Bootstrapテンプレート(有償) • 多くの言語でのサンプルコードが付属 • 最近良く使われているフロントエンド技術が使われている • 動いてキレイなレイアウトで構成されている • すでに出来上がっている動くソースコードを読むことによ り学習コストを削減 ＿人人人人人人人＿ ＞ カネで解決 ＜ ￣Y^Y^Y^Y^Y^Y￣
- 43. Bootstrapテンプレート(有償) • AngularJS • jQuery • MVC5 • Ruby on Rails • MEAN (mongoDB + Express + Angular.js + node.js)
- 44. Bootstrapテンプレート(有償) • AngularJS • jQuery • MVC5 • Ruby on Rails • MEAN (mongoDB + Express + Angular.js + node.js)
- 45. Bootstrapテンプレート(有償) • AngularJSを使ったサンプルコード • AngularJSのベストプラクティスのファイル構成 • gulpを使ったタスクランナー(ファイル生成) • bowerでバージョンや構成が管理されたライブラリ • 各種外部ライブラリを使ったサンプル • APIとの通信サンプル
- 46. bootstrapのデモ
- 49. • Ruby を少し触ったことがあった • チーム内に経験者が居た • API を作るのが簡単らしいという情報があった • データベースとの連携機能が充実 Railsを選んだ理由
- 50. Rails で API ができるまで • Ruby が動く環境を構築
- 51. Rails で API ができるまで $ rails new sample_app プロジェクトを作成
- 52. Rails で API ができるまで $ bundle exec rails generate scaffold support title:string body:text ページを作成
- 53. Rails で API ができるまで $ bundle exec rake db:migrate データベースを作成
- 54. Rails で API ができるまで $ rails server サーバを起動
- 55. Rails で API ができるまで 自分でデータを登録するために使用
- 56. Rails で API ができるまで REST APIも同時に生成
- 58. Rails で API • JSONのREST APIが手軽に作ることができれば、 Webサイト以外にも、UnityやスマホアプリのAPI として作成してサーバーのデータベースと連携させ ることも簡単になります
- 60. yeoman • 公開されているソースコードのテンプレートを使用 してWebサイトを作成するためのツール http://yeoman.io/
- 61. yeoman $ yo これだけ
- 62. yeoman
- 63. yeoman
- 64. yeoman
- 66. yeoman
- 68. まとめ • 忙しい時は重要度の低いところは手を抜くことも大事 • 空いた時間でさらに別の開発をすることも可能 • 作ったアプリを紹介するページを用意したいとき とかも簡単に用意できる
- 69. ご清聴ありがとうございました。