Download as PDF, PPTX
Uploaded byBeMarble
PDF, PPTX11,394 views
BootstrapとRailsで、 高速にWebサイトを作ってみた
BootstrapとRailsで、高速にWebサイトを作ってみた10/31 プログラミング生放送勉強会 第36回＠株式会社 DMM.com ラボ
BootstrapとRailsで、 高速にWebサイトを作ってみた
- 1.
- 2.プロフィール竹林 真DMM.com ラボシステム本部 所属Webアプリケーション設計、開発PHP, Ruby, Javascript, Unix金沢事業所所属所属業務
- 3.プロフィールKanazawa.rbCode for NantoCodefor Kanazawaコミュニティ
- 4.
- 5.アジェンダ1. Bootstrapを利用したフロントエンドの作成2. Rubyon Rails を利用したバックエンドアプリ3. その他
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.有償のテンプレートを選ぶ理由• 動きのあるウェブサイトにしたい• Javascriptに詳しい人が周りに居ない•AngularJS などのJSフレームワークを触ってみたい• チームにフロントエンドエンジニアがいない
- 34.
- 35.最近のフロントエンド技術• HTML5• AngularJS•React• Less• grunt• gulp• bower
- 36.
- 37.
- 38.
- 39.
- 40.Bootstrapテンプレート(有償)• 多くの言語でのサンプルコードが付属• 最近良く使われているフロントエンド技術が使われている•動いてキレイなレイアウトで構成されている• すでに出来上がっている動くソースコードを読むことにより学習コストを削減
- 41.Bootstrapテンプレート(有償)• 多くの言語でのサンプルコードが付属• 最近良く使われているフロントエンド技術が使われている•動いてキレイなレイアウトで構成されている• すでに出来上がっている動くソースコードを読むことにより学習コストを削減＿人人人人人人人＿＞ カネで解決 ＜￣Y^Y^Y^Y^Y^Y￣
- 42.
- 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.
- 47.
- 48.
- 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も同時に生成
- 57.
- 58.Rails で API•JSONのREST APIが手軽に作ることができれば、Webサイト以外にも、UnityやスマホアプリのAPIとして作成してサーバーのデータベースと連携させることも簡単になります
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.まとめ• 忙しい時は重要度の低いところは手を抜くことも大事• 空いた時間でさらに別の開発をすることも可能•作ったアプリを紹介するページを用意したいとき とかも簡単に用意できる
- 69.