IT omoe

ITのこと知らないんですけどIT関連のことを気ままに綴ります

【Webアプリ】簡単な記事投稿アプリを作った

こんにちは. Sinatraを用いた簡単な記事投稿アプリを作ったので紹介したいと思います.

f:id:ottosan84:20161126180645p:plain
気軽に楽しむ茶道教室

きっかけ

母が地元のカルチャーセンターで茶道を教えることになりました.そこで,その教室の生徒さんだけが見れるブログのようなものがないかと聞かれ,考えたところ,アカウントを持っていなくても誰でも簡単にそういった記事を見れるというサービスがぱっと思いつかなかった(はてなのなぞなぞとか知らなかった)のと,自分で作ったものを一度公開して誰かに使ってもらいたいという思いから,作ることになりました.

機能紹介

先程も述べたように,このアプリケーションではパスワードを知っている人だけが記事を見ることができるというものです.また,管理者は記事の投稿や管理ができます.以下で詳しく見ていきます.

ユーザ(生徒さん)ができること

ログイン

f:id:ottosan84:20161126182749p:plain:w600
トップページのログインボタンを押すと,このようにモーダルが出現するのでそこにパスワードを入力し,ログインします.アカウントの作成などなく,パスワードを入力するだけなのでとても簡単です.
ログインすると,このように記事一覧が出ます.
f:id:ottosan84:20161126182920p:plain:w600

記事閲覧

f:id:ottosan84:20161126183116p:plain:w600
記事を選択すると
f:id:ottosan84:20161126183225p:plain:w600
このように記事の内容が表示されます.
上のナビで前の記事や次の記事に移動でき,記事一覧にも戻れます.このナビは上に固定されているので,いつでも記事から離れることができます.

管理者(先生)ができること

ログイン

ユーザと同じようにログインができます.ユーザとパスワードは違うものになります.
ログインするとこのような画面が出ます. f:id:ottosan84:20161126190814p:plain:w600

記事の管理

新規記事作成

上部のナビから「新規記事」をクリックするとこのような画面になり,記事を投稿することができます.
f:id:ottosan84:20161126192031p:plain:w400
普通に書いてもいいですし,HTMLで書くとそのまま記事に反映されます.見出しタグや改行,太字,リスト,aタグくらいは母親に教えておこうと思います.「ファイルを選択」で写真を投稿できます.

記事の編集

編集ボタンを押すとこのような画面になり,記事の編集ができます.
f:id:ottosan84:20161127213417p:plain:w400

記事の削除

削除ボタンを押すと記事を削除できます.

パスワードの管理

上部のナビの「管理」からユーザと管理者のパスワードの変更ができます.

その他

一応スマホからも見れます.
f:id:ottosan84:20161127214234p:plain:w200

今後の改善点

以上のような機能がありますが,これらは本当に最低限の機能だけなので時間がある時により良くなるよう改善していきたいです.今のところ考えている改善点は以下のような感じです.

  • 削除機能の改善
    • 削除ボタンを押すとそのまま消えてしまうので,一度確認する画面を出すようにしたい.
  • 画像投稿機能の拡張
    • 現在,各記事につき写真が1枚しか投稿できない仕様なので,複数枚投稿できるようにしたい.
  • 記事のプレビュー機能の追加
    • 記事を書いたらそのまま投稿という形なので,プレビューが見れるようにしたい.
  • パスワード管理機能の改善
    • 現在はパスワードを変える時に1度だけ入力したらそのまま変更されるという感じで,しかも何を打ったのか分からない入力画面になっているのでタイプミスをしたら悲しいことになります.なので,よくある2度入力させるやつとかボタン押したらパスワードが見えるようになる機能とかつけれたらなと思います.
  • フォントの追加
    • 現在は游ゴシック体しかなくて,スマホから見ると字が見えづらい状態になっているのでスマホに対応していてかつ見やすいフォントを追加したい.
  • デザインの改善
    • トップページの見出しがウィンドウ幅によっては変なところで改行しちゃうのでそれを直したい.

ざっとこんな感じでしょうか.今後このアプリが使われていってユーザの意見,要望などがあればそれもどんどん取り入れていけたらなと思います.