SlideShare a Scribd company logo
Web Application Devlopment

    Webアプリ開発
             #3
          05.23.12
Presented by U-moa
Agenda

    1. 自己紹介タイム

       2. ワークショップ
SinatraではじめるWebアプリ開発 #4

      3. LT(あれば)

      4. ふりかえり
自己紹介タイム

Self-Introduction
Self-Introduction

• 名前
• 所属
• 好きなこと、最近やっていること
  などなど・・・
ワークショップ

Workshop
WorkShop

    今日の目標

簡単なブログを作ってみよう
     (の続き)
Sinatra
ではじめる
Webアプリ開発 #4
Sinatra is a DSL for quickly creating
web application in Ruby with minimal
effort:
ウォームアップを兼ねて
  前回のおさらい
erb
• テキストファイルにrubyスクリプトを埋
  め込むためのライブラリ

• phpみたいに埋め込める

• レイアウト機能がある
erb
 1 require 'rubygems'
 2 require 'sinatra'
 3
 4 get '/' do
 5 @title = "My Web Application"
 6 @content = "Hello, sinatra!"
 7 erb :index
 8 end
 9
10 __END__
11
12 @@ layout
13 <html>
14 <head>
15 <title><%=@title%></title>
16 </head>
17 <body>
18 <%= yield %>
19 </body>
20 </html>
21
22 @@ index
23 <%=@content%>
それでは
Blogを作ってみよう
     (の続き)
記事の個別ページを作ろう

• ある一つの記事を表示するページを作ろ
  う

• URLで記事のidを受け取ろう

• findで記事のデータを取ってこよう

 1 get '/article/:hoge' do
 2 params[:hoge]
 3 end
記事の作成日時を追加しよう
• 記事のデータ項目に作成日時を追加する

• 項目を変更したらdbファイル(‘*.sqlite3’)を
  削除しよう
  1 class Hoge < Sequel::Model
  2 unless table_exists?
  3 set_schema do
  4     ...
  5     datetime :created_at
  6     ...
  7 end
  8 end
  9
 10 create_table
 11 end
 12
 13 get '...' do
 14 Hoge.create(..., :created_at => DateTime.new)
 15 end
コメント機能を追加しよう
• 新しいテーブルを定義する(e.g. Comment)
  項目はコメント文と記事のIDと作成日時

  1 class Comment < Sequel::Model
  2 unless table_exists?
  3 set_schema do
  4     primary_key :id
  5     foreign_key :post_id, :posts # 先頭小文字、複数形
  6     string :text, :text => true
  7     datetime :created_at
  8 end
  9
 10 create_table
 11 end
 12 end
コメント機能を追加しよう
• コメント投稿用のフォームを追加しよう
1 <form action="./<%= params[:id] %>/commented" method="post">
2 <div>text :
3 <textarea name="text" cols="40" rows="6”></textarea>
4 </div>
5 <input type="submit" value="コメントする">
6 </form>



• 投稿データを受け取ろう
1 post '/article/:id/commented' do
2 @comment = Comment.create(
3 :post_id => params[:id], :text => params[:text],
4 :created_at => DateTime.new)
5 redirect "/article/#{params[:id]}"
6 end
ふりかえり

Retrospectives
Keep

Problem

  Try
Keep = 良かったところ

Problem = 悪かったところ

 Try = 次回の取り組み

More Related Content

Similar to WebAppDev勉強会 #4

WebAppDev勉強会 #3 at cafe? IKAGAWA DO
WebAppDev勉強会 #3 at cafe? IKAGAWA DOWebAppDev勉強会 #3 at cafe? IKAGAWA DO
WebAppDev勉強会 #3 at cafe? IKAGAWA DOKohei Noda
 
はじめてのASP.NET MVC5
はじめてのASP.NET MVC5はじめてのASP.NET MVC5
はじめてのASP.NET MVC5
Tomo Mizoe
 
WebAppDev勉強会 #2 at cafe? IKAGAWA DO
WebAppDev勉強会 #2 at cafe? IKAGAWA DOWebAppDev勉強会 #2 at cafe? IKAGAWA DO
WebAppDev勉強会 #2 at cafe? IKAGAWA DOKohei Noda
 
はじめての ASP.NET MVC
はじめての ASP.NET MVCはじめての ASP.NET MVC
はじめての ASP.NET MVC
jz5 MATSUE
 
WEB TOUCH MEETING #52
WEB TOUCH MEETING #52WEB TOUCH MEETING #52
WEB TOUCH MEETING #52
Tao Sasaki
 
AWS小ネタ集
AWS小ネタ集AWS小ネタ集
AWS小ネタ集
Takehito Tanabe
 
20141119 Movable Type HandsOn Seminar
20141119 Movable Type HandsOn Seminar20141119 Movable Type HandsOn Seminar
20141119 Movable Type HandsOn Seminar
Six Apart
 
D8でコンテンツをレイアウトする手法について
D8でコンテンツをレイアウトする手法についてD8でコンテンツをレイアウトする手法について
D8でコンテンツをレイアウトする手法について
Kenji Shirane
 
WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?
Shinichi Nishikawa
 
Chef+serverspec+werckerでインフラCIする話
Chef+serverspec+werckerでインフラCIする話Chef+serverspec+werckerでインフラCIする話
Chef+serverspec+werckerでインフラCIする話
Masayuki Morita
 
ゼロからつくるWord pressテーマ第9回
ゼロからつくるWord pressテーマ第9回ゼロからつくるWord pressテーマ第9回
ゼロからつくるWord pressテーマ第9回Hitsuji
 
scala+liftで遊ぼう
scala+liftで遊ぼうscala+liftで遊ぼう
scala+liftで遊ぼう
youku
 
4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座Shinichi Nishikawa
 
ASP.NET Core WebAPIでODataを使おう
ASP.NET Core WebAPIでODataを使おうASP.NET Core WebAPIでODataを使おう
ASP.NET Core WebAPIでODataを使おう
DevTakas
 
Webフレームワークを作ってる話 #osakapy
Webフレームワークを作ってる話 #osakapyWebフレームワークを作ってる話 #osakapy
Webフレームワークを作ってる話 #osakapy
Masashi Shibata
 
Entity Framework(Core)についての概要を学ぼう
Entity Framework(Core)についての概要を学ぼうEntity Framework(Core)についての概要を学ぼう
Entity Framework(Core)についての概要を学ぼう
TomomitsuKusaba
 
JavaScript on GitHub (#kyotojs)
JavaScript on GitHub  (#kyotojs)JavaScript on GitHub  (#kyotojs)
JavaScript on GitHub (#kyotojs)y_uuki
 
Gitlab meetup prm説明資料_2017_1117
Gitlab meetup prm説明資料_2017_1117Gitlab meetup prm説明資料_2017_1117
Gitlab meetup prm説明資料_2017_1117
Tetsuya Sato
 
20141101 handson
20141101 handson20141101 handson
20141101 handson
Six Apart
 

Similar to WebAppDev勉強会 #4 (20)

WebAppDev勉強会 #3 at cafe? IKAGAWA DO
WebAppDev勉強会 #3 at cafe? IKAGAWA DOWebAppDev勉強会 #3 at cafe? IKAGAWA DO
WebAppDev勉強会 #3 at cafe? IKAGAWA DO
 
はじめてのASP.NET MVC5
はじめてのASP.NET MVC5はじめてのASP.NET MVC5
はじめてのASP.NET MVC5
 
WebAppDev勉強会 #2 at cafe? IKAGAWA DO
WebAppDev勉強会 #2 at cafe? IKAGAWA DOWebAppDev勉強会 #2 at cafe? IKAGAWA DO
WebAppDev勉強会 #2 at cafe? IKAGAWA DO
 
はじめての ASP.NET MVC
はじめての ASP.NET MVCはじめての ASP.NET MVC
はじめての ASP.NET MVC
 
WEB TOUCH MEETING #52
WEB TOUCH MEETING #52WEB TOUCH MEETING #52
WEB TOUCH MEETING #52
 
AWS小ネタ集
AWS小ネタ集AWS小ネタ集
AWS小ネタ集
 
20141119 Movable Type HandsOn Seminar
20141119 Movable Type HandsOn Seminar20141119 Movable Type HandsOn Seminar
20141119 Movable Type HandsOn Seminar
 
D8でコンテンツをレイアウトする手法について
D8でコンテンツをレイアウトする手法についてD8でコンテンツをレイアウトする手法について
D8でコンテンツをレイアウトする手法について
 
WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?WordPress中級者への道!テンプレートタグはどう動くのか!?
WordPress中級者への道!テンプレートタグはどう動くのか!?
 
Chef+serverspec+werckerでインフラCIする話
Chef+serverspec+werckerでインフラCIする話Chef+serverspec+werckerでインフラCIする話
Chef+serverspec+werckerでインフラCIする話
 
ゼロからつくるWord pressテーマ第9回
ゼロからつくるWord pressテーマ第9回ゼロからつくるWord pressテーマ第9回
ゼロからつくるWord pressテーマ第9回
 
scala+liftで遊ぼう
scala+liftで遊ぼうscala+liftで遊ぼう
scala+liftで遊ぼう
 
4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座4時間まったりWordPressテーマ作成講座
4時間まったりWordPressテーマ作成講座
 
ASP.NET Core WebAPIでODataを使おう
ASP.NET Core WebAPIでODataを使おうASP.NET Core WebAPIでODataを使おう
ASP.NET Core WebAPIでODataを使おう
 
Webフレームワークを作ってる話 #osakapy
Webフレームワークを作ってる話 #osakapyWebフレームワークを作ってる話 #osakapy
Webフレームワークを作ってる話 #osakapy
 
Entity Framework(Core)についての概要を学ぼう
Entity Framework(Core)についての概要を学ぼうEntity Framework(Core)についての概要を学ぼう
Entity Framework(Core)についての概要を学ぼう
 
UnicastWS vol.2
UnicastWS vol.2UnicastWS vol.2
UnicastWS vol.2
 
JavaScript on GitHub (#kyotojs)
JavaScript on GitHub  (#kyotojs)JavaScript on GitHub  (#kyotojs)
JavaScript on GitHub (#kyotojs)
 
Gitlab meetup prm説明資料_2017_1117
Gitlab meetup prm説明資料_2017_1117Gitlab meetup prm説明資料_2017_1117
Gitlab meetup prm説明資料_2017_1117
 
20141101 handson
20141101 handson20141101 handson
20141101 handson
 

Recently uploaded

This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.
chiefujita1
 
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援しますキンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
Takayuki Nakayama
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
CRI Japan, Inc.
 
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
Toru Tamaki
 
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
Matsushita Laboratory
 
Generating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language ModelsGenerating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language Models
harmonylab
 
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
t m
 
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさJSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
0207sukipio
 
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
Toru Tamaki
 

Recently uploaded (9)

This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.This is the company presentation material of RIZAP Technologies, Inc.
This is the company presentation material of RIZAP Technologies, Inc.
 
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援しますキンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
キンドリル ネットワークアセスメントサービスご紹介 今のネットワーク環境は大丈夫? 調査〜対策までご支援します
 
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアルLoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
 
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
 
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
ReonHata_便利の副作用に気づかせるための発想支援手法の評価---行為の増減の提示による気づきへの影響---
 
Generating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language ModelsGenerating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language Models
 
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
遺伝的アルゴリズムと知識蒸留による大規模言語モデル(LLM)の学習とハイパーパラメータ最適化
 
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさJSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
JSAI_類似画像マッチングによる器への印象付与手法の妥当性検証_ver.3_高橋りさ
 
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
論文紹介:When Visual Prompt Tuning Meets Source-Free Domain Adaptive Semantic Seg...
 

WebAppDev勉強会 #4