どぼじょのIT学習ブログ

高専卒土木女子がIT業界を目指してお勉強。

Sinatra でメモアプリ

Sinatra で簡単なメモアプリを作成しました!
課題なのでソースコードは載せられませんが💦💦

目次

1.成果

1-1. スクリーンショット

f:id:mistyrinth:20190418171653p:plain

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 アプリの構造の部分が見えてきたら、自分で考えながら修正したりできるようになりました。

f:id:mistyrinth:20190418174705p:plain

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を導入しました!

getbootstrap.com

これを使うとStylesheetファイルを作らなくても、HTMLの class に専用の名前を指定するだけでとても簡単に綺麗なものができます。
詳しくはドットインストールで無料で体験できます😊
Bootstrapの機能以外に細かく指定したいことがあれば、別途CSSファイルを作って読み込むという形にしました。

2-4. favicon

favicon.ico というものを作らないとサーバ側でエラーが出てしまうので、作りました。
作るといってもフリー素材のアイコンをダウンロードしてpublicディレクトリに置き、 ビュー(ERB)のheadタグ内に以下の一文を書くだけです👏超簡単!

<link rel="shortcut icon" href="favicon.ico">

2-5. その他困ったときの解決法

単一のRubyファイルと違って複数のファイルを編集しているため、Webで表示したいものが表示されないときなど、どこが原因か突き止めるのが最初はとても難しかったです。
そこだけ抜粋して動作確認というのもできない場合もありました😅 そんなとき、以下の確認をとるとなんとなく原因が思い当たるようになりました。

  • サーバのログを読む main.rb で puts メソッドを使うとサーバ側コンソールに表示されます。
  • エラーページを最後まで読む GET まではうまくいってるみたいだなーなんてことがたまにわかりました。
  • Chromeの左クリックでページのソースコードを読む ERBで書いたはずのことがちゃんと反映されてないことに気づけました。