sinatraを使ったメモアプリの作成

memo_app/.erb-lint.yml

@@ -0,0 +1,5 @@
+---
+glob: "**/*.erb"
+linters:
+  RequireInputAutocomplete:
+    enabled: false

memo_app/.ruby-version

@@ -0,0 +1 @@
+3.2.3

memo_app/Gemfile

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+source 'https://rubygems.org'
+
+# gem "rails"
+gem 'erb_lint', require: false
+gem 'puma'
+gem 'rackup'
+gem 'redcarpet'
+gem 'sinatra'
+gem 'sinatra-contrib'
+gem 'webrick'

memo_app/Gemfile.lock

@@ -0,0 +1,132 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    actionview (7.1.3.2)
+      activesupport (= 7.1.3.2)
+      builder (~> 3.1)
+      erubi (~> 1.11)
+      rails-dom-testing (~> 2.2)
+      rails-html-sanitizer (~> 1.6)
+    activesupport (7.1.3.2)
+      base64
+      bigdecimal
+      concurrent-ruby (~> 1.0, >= 1.0.2)
+      connection_pool (>= 2.2.5)
+      drb
+      i18n (>= 1.6, < 2)
+      minitest (>= 5.1)
+      mutex_m
+      tzinfo (~> 2.0)
+    ast (2.4.2)
+    base64 (0.2.0)
+    better_html (2.1.1)
+      actionview (>= 6.0)
+      activesupport (>= 6.0)
+      ast (~> 2.0)
+      erubi (~> 1.4)
+      parser (>= 2.4)
+      smart_properties
+    bigdecimal (3.1.7)
+    builder (3.2.4)
+    concurrent-ruby (1.2.3)
+    connection_pool (2.4.1)
+    crass (1.0.6)
+    drb (2.2.1)
+    erb_lint (0.5.0)
+      activesupport
+      better_html (>= 2.0.1)
+      parser (>= 2.7.1.4)
+      rainbow
+      rubocop
+      smart_properties
+    erubi (1.12.0)
+    i18n (1.14.4)
+      concurrent-ruby (~> 1.0)
+    json (2.7.2)
+    language_server-protocol (3.17.0.3)
+    loofah (2.22.0)
+      crass (~> 1.0.2)
+      nokogiri (>= 1.12.0)
+    minitest (5.22.3)
+    multi_json (1.15.0)
+    mustermann (3.0.0)
+      ruby2_keywords (~> 0.0.1)
+    mutex_m (0.2.0)
+    nio4r (2.7.1)
+    nokogiri (1.16.4-x86_64-linux)
+      racc (~> 1.4)
+    parallel (1.24.0)
+    parser (3.3.0.5)
+      ast (~> 2.4.1)
+      racc
+    puma (6.4.2)
+      nio4r (~> 2.0)
+    racc (1.7.3)
+    rack (3.0.10)
+    rack-protection (4.0.0)
+      base64 (>= 0.1.0)
+      rack (>= 3.0.0, < 4)
+    rack-session (2.0.0)
+      rack (>= 3.0.0)
+    rackup (2.1.0)
+      rack (>= 3)
+      webrick (~> 1.8)
+    rails-dom-testing (2.2.0)
+      activesupport (>= 5.0.0)
+      minitest
+      nokogiri (>= 1.6)
+    rails-html-sanitizer (1.6.0)
+      loofah (~> 2.21)
+      nokogiri (~> 1.14)
+    rainbow (3.1.1)
+    redcarpet (3.6.0)
+    regexp_parser (2.9.0)
+    rexml (3.2.6)
+    rubocop (1.63.3)
+      json (~> 2.3)
+      language_server-protocol (>= 3.17.0)
+      parallel (~> 1.10)
+      parser (>= 3.3.0.2)
+      rainbow (>= 2.2.2, < 4.0)
+      regexp_parser (>= 1.8, < 3.0)
+      rexml (>= 3.2.5, < 4.0)
+      rubocop-ast (>= 1.31.1, < 2.0)
+      ruby-progressbar (~> 1.7)
+      unicode-display_width (>= 2.4.0, < 3.0)
+    rubocop-ast (1.31.2)
+      parser (>= 3.3.0.4)
+    ruby-progressbar (1.13.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)
+    smart_properties (1.17.0)
+    tilt (2.3.0)
+    tzinfo (2.0.6)
+      concurrent-ruby (~> 1.0)
+    unicode-display_width (2.5.0)
+    webrick (1.8.1)
+
+PLATFORMS
+  x86_64-linux
+
+DEPENDENCIES
+  erb_lint
+  puma
+  rackup
+  redcarpet
+  sinatra
+  sinatra-contrib
+  webrick
+
+BUNDLED WITH
+   2.4.10

memo_app/README.md

@@ -0,0 +1,25 @@
+# メモアプリ
+
+### 機能
+* メモ作成機能（閲覧可能）
+* メモ編集機能
+* メモ削除機能
+
+
+### 操作手順
+1. ローカルに複製
+```
+git clone
+```
+
+1. ディレクトリを移動してGemファイルをインストール
+```
+cd memo_app
+
+bundle install
+```
+
+1. 実行
+```
+ruby main.rb
+```

memo_app/main.rb

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+require 'sinatra'
+require 'sinatra/reloader'
+require 'json'
+require 'cgi'
+
+FILE_PATH = 'public/memos.json'
+
+def get_memos(file_path)
+  File.open(file_path) { |item| JSON.parse(item.read) }
+end
+
+def set_memos(file_path, memos)
+  File.open(file_path, 'w') { |item| JSON.dump(memos, item) }
+end
+
+get '/' do
+  redirect '/memos'
+end
+
+get '/memos' do
+  @memos = get_memos(FILE_PATH)
+  erb :index
+end
+
+get '/memos/new' do
+  erb :new_memo
+end
+
+get '/memos/:id' do
+  memos = get_memos(FILE_PATH)
+  @title = memos[params[:id]]['title']
+  @content = memos[params[:id]]['content']
+  erb :memo
+end
+
+post '/memos' do
+  title = params[:title]
+  content = params[:content]
+
+  memos = get_memos(FILE_PATH)
+  id = (memos.keys.map(&:to_i).max + 1).to_s
+  memos[id] = { 'title' => title, 'content' => content }
+  set_memos(FILE_PATH, memos)
+
+  redirect '/memos'
+end
+
+get '/memos/:id/edit' do
+  memos = get_memos(FILE_PATH)
+  @title = memos[params[:id]]['title']
+  @content = memos[params[:id]]['content']
+  erb :edit
+end
+
+patch '/memos/:id' do
+  title = params[:title]
+  content = params[:content]
+
+  memos = get_memos(FILE_PATH)
+  memos[params[:id]] = { 'title' => title, 'content' => content }
+  set_memos(FILE_PATH, memos)
+
+  redirect "/memos/#{params[:id]}"
+end
+
+delete '/memos/:id' do
+  memos = get_memos(FILE_PATH)
+  memos.delete(params[:id])
+  set_memos(FILE_PATH, memos)
+
+  redirect '/memos'
+end

memo_app/public/memos.json

@@ -0,0 +1 @@
+{"1":{"title":"あああ","content":"あああああああああああ"},"2":{"title":"いいいいい","content":"いいいいいいいい"},"3":{"title":"ううううああああ","content":"ううああああああ！"},"4":{"title":"今日の晩御飯","content":"カレーを作る\r\nそのために買い物をする\r\nカレールー\r\nジャガイモ\r\n人参\r\n肉\r\nたまねぎ"},"6":{"title":"tekisutotekisuto","content":"aaaaaa\r\naaaaaaa\r\ntext\r\ntex\r\nte\r\nt\r\n"},"7":{"title":"ああああああああ！","content":"ｓｓｓｓｓｓｓｓｓｓｓｓ"}}

memo_app/public/style.css

@@ -0,0 +1,74 @@
+.main-title{
+	color:#805539;
+}
+
+.title-font{
+	color:#444;
+	font-weight: bold;
+}
+
+.text-font{
+	color:gray;
+	font-family: "Verdana";
+}
+.link-text{
+	text-decoration: none;
+}
+
+.new-memo{
+	color:#444;
+	margin:0 15px;
+	text-decoration: none;
+	font-weight:bold;
+}
+.container{
+	width:500px;
+	background-color: #efefef;
+	padding:20px 10px;
+}
+
+.contents-container{
+	background-color:#ddd;
+	padding:5px 10px;
+	border-radius:3px
+}
+
+.button{
+	color:white;
+	border-radius: 5px;
+}
+.button.submit{
+	border:1px solid #888;
+	background-color:#888;
+	padding:2px 5px;
+	margin:15px 0;
+	text-decoration: none;
+}
+.button.delete{
+	background-color:#990;
+	border:1px solid #990;
+}
+.button.new{
+	background-color:#666;
+	border-radius: 50%;
+	padding:0 4px;
+}
+
+.text-box{
+	border:1px solid white;
+	background-color:white;
+	padding:10px 20px;
+	border-radius:5px;
+	resize: none;
+}
+
+
+input:focus {
+	outline: none;
+	box-shadow: 0px 0px 3px 0px #5265a7;
+}
+
+textarea:focus{
+	outline: none;
+	box-shadow: 0px 0px 3px 0px #5265a7;
+}

memo_app/public/test.html

@@ -0,0 +1 @@
+this is html file .

memo_app/views/edit.erb

@@ -0,0 +1,15 @@
+<h3 class="title-font">メモの内容を編集</h3>
+<form method="post" action="/memos/<%= params[:id] %>">
+<div>
+  <h4 class="text-font">タイトル</h4>
+  <input class="text-box text-font" type="text" id="title" name="title" value="<%= @title %>">
+
+  <h4 class="text-font">内容</h4>
+  <textarea class="text-box text-font" cols="30" rows="10" id="content" name="content"><%= @content %></textarea>
+</div>
+<div>
+<input type="hidden" name="_method" value="patch">
+<input type="submit" value="保存" class="button submit">
+</div>
+</form>
+<a class="text-font link-text" href="/memos/<%= params[:id] %>">≪メモに戻る</a>

memo_app/views/index.erb

@@ -0,0 +1,12 @@
+
+<div>
+<h3 class="title-font">メモ一覧</h3>
+  <ul>
+  <% @memos.each do |id, post|	%>
+    <li style="margin-bottom:5px;">
+    <a class="title-font link-text" href="/memos/<%= id %>"><%= CGI.escapeHTML(post['title']) %></a>
+    </li>
+  <% end %>
+  </ul>
+  <a class="new-memo" href="/memos/new">	<span class="button new">＋</span> メモを追加</a>
+</div>

memo_app/views/layout.erb

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="/style.css">
+  <title>memo</title>
+</head>
+<body>
+  <div class="container">
+    <h1 class="main-title">メモアプリ</h1>
+    <%= yield %>
+  </div>
+</body>
+</html>