Sinatra でメモアプリ
Sinatra で簡単なメモアプリを作成しました!
課題なのでソースコードは載せられませんが💦💦
目次
1.成果
1-1. スクリーンショット
1-2. 機能
メモを新規作成・閲覧・編集・削除ができます。
トップページにはメモのタイトル一覧が表示されます。(更新順)
メモのタイトルが未入力の場合、自動的にNOTITLE
というタイトルになります。
1-3. 構成
データベースを使わず、メモをtxtファイルにして保存する仕組みにしました!
ファイル名にはタイムスタンプを使い、メモごとに固有のファイル名がつくようにしました。
※ファイル名(タイムスタンプ.txt)と、トップページに表示されるメモのタイトルは別物
ディレクトリ構成は以下のとおりです。
memo_app/ -main.rb -views/ -top.erb -new.erb -show.erb -edit.erb -public/ -style.css -favicon.ico -Gemfile -Gemfile.lock -.gitignore
2.学んだこと
2-1. Webアプリの構造
初めてWebアプリを作ったのですが、とっても難しかったです!!😂
Ruby や HTML など個別に基礎をわかっていても、複合的になって難易度がぐっと上がりました。
というかわからないことが多すぎて何がわからないかわからない状態…💀💀
先述のディレクトリ構成についてもそうですが、Web アプリの構造の部分が見えてきたら、自分で考えながら修正したりできるようになりました。
2-2. Methodoverride
HTMLで使えるHTTPメソッドは GET と POST だけみたいです。
PATCH(更新)とDELETE(削除)を使うには Methodoverride というものを使いました💪
使用方法(PATCHの例)
1.main.rb
に以下の一文を追加
enable :method_override
※4/22追記:デフォルトで enable のため書かなくても良い
2.erb内のPATCHを使いたいフォームを以下のように作成
<form action="/(場所指定)" method="POST"> <input type="hidden" name="_method" value="PATCH">
2-3. TwitterBootstrap
シンプルとはいえ見た目を少しは綺麗にしたかったので、TwitterBootstrapを導入しました!
これを使うとStylesheetファイルを作らなくても、HTMLの class に専用の名前を指定するだけでとても簡単に綺麗なものができます。
詳しくはドットインストールで無料で体験できます😊
Bootstrapの機能以外に細かく指定したいことがあれば、別途CSSファイルを作って読み込むという形にしました。
2-4. favicon
favicon.ico というものを作らないとサーバ側でエラーが出てしまうので、作りました。
作るといってもフリー素材のアイコンをダウンロードしてpublic
ディレクトリに置き、 ビュー(ERB)のheadタグ内に以下の一文を書くだけです👏超簡単!
<link rel="shortcut icon" href="favicon.ico">
2-5. その他困ったときの解決法
単一のRubyファイルと違って複数のファイルを編集しているため、Webで表示したいものが表示されないときなど、どこが原因か突き止めるのが最初はとても難しかったです。
そこだけ抜粋して動作確認というのもできない場合もありました😅
そんなとき、以下の確認をとるとなんとなく原因が思い当たるようになりました。