O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

BootstrapとRailsで、 高速にWebサイトを作ってみた

7.477 visualizações

Publicada em

BootstrapとRailsで、
高速にWebサイトを作ってみた
10/31 プログラミング生放送勉強会 第36回
@株式会社 DMM.com ラボ

Publicada em: Tecnologia
  • Seja o primeiro a comentar

BootstrapとRailsで、 高速にWebサイトを作ってみた

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

×