diff --git a/memoapp/Gemfile b/memoapp/Gemfile new file mode 100644 index 0000000..de9ea2b --- /dev/null +++ b/memoapp/Gemfile @@ -0,0 +1,4 @@ +source "https://rubygems.org" + +gem "sinatra" +gem "sinatra-contrib" diff --git a/memoapp/Gemfile.lock b/memoapp/Gemfile.lock new file mode 100644 index 0000000..8c0dd3f --- /dev/null +++ b/memoapp/Gemfile.lock @@ -0,0 +1,38 @@ +GEM + remote: https://rubygems.org/ + specs: + base64 (0.2.0) + multi_json (1.15.0) + mustermann (3.0.0) + ruby2_keywords (~> 0.0.1) + rack (3.1.7) + rack-protection (4.0.0) + base64 (>= 0.1.0) + rack (>= 3.0.0, < 4) + rack-session (2.0.0) + rack (>= 3.0.0) + ruby2_keywords (0.0.5) + sinatra (4.0.0) + mustermann (~> 3.0) + rack (>= 3.0.0, < 4) + rack-protection (= 4.0.0) + rack-session (>= 2.0.0, < 3) + tilt (~> 2.0) + sinatra-contrib (4.0.0) + multi_json (>= 0.0.2) + mustermann (~> 3.0) + rack-protection (= 4.0.0) + sinatra (= 4.0.0) + tilt (~> 2.0) + tilt (2.4.0) + +PLATFORMS + ruby + x86_64-linux + +DEPENDENCIES + sinatra + sinatra-contrib + +BUNDLED WITH + 2.5.11 diff --git a/memoapp/README.md b/memoapp/README.md new file mode 100644 index 0000000..e4e9544 --- /dev/null +++ b/memoapp/README.md @@ -0,0 +1,2 @@ +# memoapp +Sinatraでシンプルなメモアプリを作る diff --git a/memoapp/app.rb b/memoapp/app.rb new file mode 100644 index 0000000..8d7db94 --- /dev/null +++ b/memoapp/app.rb @@ -0,0 +1,62 @@ +# frozen_string_literal: true + +require 'sinatra' +require 'sinatra/reloader' if development? +require 'json' + +FILE_PATH = 'public/memos.json' + +def load_memos + File.exist?(FILE_PATH) ? JSON.parse(File.read(FILE_PATH)) : {} +end + +def save_memos(memos) + File.open(FILE_PATH, 'w') do |file| + file.write(JSON.pretty_generate(memos)) + end +end + +get '/' do + redirect '/memos' +end + +get '/memos' do + @memos = load_memos + erb :index +end + +get '/memos/new' do + erb :new +end + +post '/memos' do + memos = load_memos + id = (memos.keys.map(&:to_i).max || 0) + 1 + memos[id.to_s] = { 'title' => params[:title], 'content' => params[:content] } + save_memos(memos) + redirect '/memos' +end + +get '/memos/:id' do + @memo = load_memos[params[:id]] + erb :show +end + +get '/memos/:id/edit' do + @memo = load_memos[params[:id]] + erb :edit +end + +patch '/memos/:id' do + memos = load_memos + memos[params[:id]] = { 'title' => params[:title], 'content' => params[:content] } + save_memos(memos) + redirect "/memos/#{params[:id]}" +end + +delete '/memos/:id' do + memos = load_memos + memos.delete(params[:id]) + save_memos(memos) + redirect '/memos' +end diff --git a/memoapp/public/memos.json b/memoapp/public/memos.json new file mode 100644 index 0000000..e33e587 --- /dev/null +++ b/memoapp/public/memos.json @@ -0,0 +1,10 @@ +{ + "1": { + "title": "あ", + "content": "い" + }, + "2": { + "title": "い", + "content": "え" + } +} \ No newline at end of file diff --git a/memoapp/public/styles.css b/memoapp/public/styles.css new file mode 100644 index 0000000..d5f0baf --- /dev/null +++ b/memoapp/public/styles.css @@ -0,0 +1,149 @@ +body { + font-family: Arial, sans-serif; + background-color: #f0f0f0; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + background-color: #fff; + padding: 20px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + border-radius: 8px; + width: 300px; +} + +header { + text-align: center; + margin-bottom: 20px; +} + +header h1 { + font-size: 24px; + margin: 0; +} + +nav { + margin-bottom: 20px; + text-align: center; +} + +nav a { + margin: 0 10px; + text-decoration: none; + color: #007bff; +} + +nav a:hover { + text-decoration: underline; +} + +form { + display: flex; + flex-direction: column; +} + +form label { + margin-bottom: 5px; +} + +form input[type="text"], +form textarea { + margin-bottom: 10px; + padding: 10px; + border: 1px solid #ddd; + border-radius: 4px; +} + +form button { + padding: 10px; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; +} + +form button.save { + background-color: #007bff; +} + +form button.save:hover { + background-color: #0056b3; +} + +form button.delete { + background-color: #dc3545; +} + +form button.delete:hover { + background-color: #c82333; +} + +form button.edit { + background-color: #28a745; +} + +form button.edit:hover { + background-color: #218838; +} + +form button.back { + background-color: #6c757d; +} + +form button.back:hover { + background-color: #5a6268; +} + +.memo-list { + list-style: none; + padding: 0; +} + +.memo-list li { + margin-bottom: 10px; +} + +.memo-list a { + text-decoration: none; + color: #007bff; +} + +.memo-list a:hover { + text-decoration: underline; +} + +.memo-actions { + display: flex; + justify-content: space-between; + margin-bottom: 10px; /* 追加: 「戻る」ボタンの上に余白を追加 */ +} + +.memo-actions form { + display: inline; +} + +.memo-actions button { + padding: 10px; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; +} + +.memo-actions .edit { + background-color: #28a745; /* 緑色に統一 */ +} + +.memo-actions .edit:hover { + background-color: #218838; +} + +.memo-actions .back { + background-color: #6c757d; +} + diff --git a/memoapp/views/edit.erb b/memoapp/views/edit.erb new file mode 100644 index 0000000..54c58b0 --- /dev/null +++ b/memoapp/views/edit.erb @@ -0,0 +1,8 @@ +
diff --git a/memoapp/views/index.erb b/memoapp/views/index.erb new file mode 100644 index 0000000..47b644e --- /dev/null +++ b/memoapp/views/index.erb @@ -0,0 +1,5 @@ +<%= @memo["content"] %>
+