下町柚子黄昏記 by @yuzutas0

したまち発・ゆずたそ作・試行錯誤の瓦礫の記録

トップ > 作りました > 学びを支援するWEBアプリを作りました

学びを支援するWEBアプリを作りました

作りました Enokilog Rails

概要

  • Enokilog（エノキログ）というサービスをリリースしました。
  • 勉強がてらシンプルなRailsアプリを作りました。

f:id:yuzutas0:20150527210232p:plain

どんなサービスか

  • 学習の進捗を記録するサービスです。
  • 調整さんみたいなテーブルビューで学習の記録や共有ができます。
  • 名前の由来は以下の通りです。
榎（えのき）という樹木は、江戸時代、幕府によって一里ごとに植えられました。
旅人が木陰で休憩したり、距離を把握できるようにするためです。
Enoki Logは、榎が茂る一里塚のようなWEBアプリを目指して開発されました。
ユーザーが日々の学習を記録して、一歩ずつ前進するお手伝いをします。

どうやって使うのか

  • 登録
    • Enokilogにアクセス。
    • メールアドレスとパスワードでユーザー登録。
  • 作成
    • 新しい学習記録を作成。
    • タイトルや利用教材などを記入⇒作成完了ボタン。
    • 学習終了日に向けてマイルストーンを記入。
  • æ›´æ–°
    • 実際の進捗を○×△で記入。
    • 順調な理由・駄目な理由はメモ欄に記入して可視化。
    • 必要なら周囲の人にページを共有して、アドバイスを貰う。

なぜ作ったのか

  • 資格試験の勉強時にこういうサービスが欲しかったからです。
  • というのは半分言い訳で、とりあえず何か作りたかった、というのが本音です。

どうやって作ったのか

  • 以下の手順を踏みました。

    1. 企画：ペルソナ、課題、解決策
    2. 開発：要件定義、設計、製造、テスト
    3. リリース：インフラ整備、資材配置

  • システム構成は以下の通りです。

企画

  • リーンキャンバスのProblem/Solution Fit関連箇所を書きました。
  • 具体的にはCustomer、Problem、Solution（競合分析を含む）です。
  • 最終的なSolutionは上記の通りなので省略します。

Customer：どんなペルソナを想定しているか

  • 都内の大手IT広告会社に勤務する1〜3年目の社会人男性。
  • 応用情報などの資格取得を会社から要請されている。
  • 時間的余裕はなく、最小の教材で、1æ—¥30〜60分だけ集中学習している。
  • 体力・気力への負担も大きいので、できれば半月〜1ヶ月で仕上げたい。

Problem：どんな課題を抱えているのか

  • 勉強できない日が続くと漠然とした不安感に囚われて悪循環に陥る。
  • 不安感を払拭するため、どこまで達成して、残りがどれくらいのなのか見立てたい。
  • 要するに、学習の進捗を管理したい。場合によっては周囲に相談したい。

Solution：既存の解決策では駄目なのか

  • 手帳：できればデジタルツールが望ましい。
  • Excel：開きたくない。ブラウザベースが望ましい。
  • 学習サイト：多くが機能多寡。モチベーション維持の特殊機能はいらない。
    • しっかり分析したわけではないので、なんだかんだ既存の方がしっかりしているだろうなとは思います。

開発

  • いわゆる開発五工程をベースにしました。

要件定義

  • 業務要件：企画段階である程度固まっているつもりでした。
  • 機能要件：そんな細かく考えるのも大変なので設計しながら考えました。
  • 非機能要件：なにも考えてなかったです。これから改善します。
  • 全体的にもっとしっかりやれば良かったと反省しています。

設計

  • 画面仕様：ノートにワイヤーフレームを書きながら考えました。
    • 先にカスタマージャーニーマップを作るべきでした。動線がひどいので。
  • DB設計：画面仕様を元に、ノートにER図を書きながら考えました。
  • クラス設計：Rails Tutorialを元に脳内補完。
    • 大枠だけでも書くべきでした。けっこう汚くなったので。
  • インフラ設計は最低限の構成にすることだけ決めていました。

製造・テスト

  • Rails Tutorialを復習しながらコーディングしていきました。

    1. 静的ページ
    2. ユーザーのCRUD処理
    3. サインイン・サインアウト機能
    4. コンテンツのCRUD処理

  • 途中から独自路線を突っ走りました。

    • 認証・認可・フレンドリーフォワードを仕様に合わせる
    • 調べながらちょっとした実装を頑張る
      • 開始日〜終了日の間のオブジェクトを自動生成
      • ランダムURLの生成と遷移
      • ネスト構造のモデルに対応するフォームの表示

  • 路線変更タイミングでテストコード改修が漏れてしまいました。

    • ブラウザでの手動テスト頼りになってしまった
    • 今後の運用面で辛くなるので、改善したいです

  • デザインは割と適当です

    • WFに似たサイトを探してCSS構成をほぼ丸パクリ
      • 細かい実装はTwitter Bootstrap
      • アイコンはFont Awesome
    • 微妙なところにこだわりました
      • 日本の伝統的な色彩の組み合わせ
      • トップの写真は比叡山の近くで撮影

リリース

  • システム構成を本番サーバに反映させました。
  • 具体的にはCentOS,MySQL,Apache,Passenger,Railsです。

サーバ

  • 契約関係

    • さくらVPSを申し込む
    • ついでにドメインも申し込む
    • さらにStartSSLを申し込む

  • 初期設定

    • yum関係
      • パッケージのバージョンを最新化
      • 自動更新の設定
      • bash脆弱性が解決されていることを確認（注：作業は2014å¹´12月）
    • root関係
      • 操作用の一般ユーザに切り替える
      • sudo権限を付与
    • SSH関係
      • SSH鍵認証のみ通すように設定
      • SSHのポート番号を変更
      • 連続で認証に失敗したらブロックするように設定
    • アクセス関係
      • 特定ポートのみ開くようにファイアウォールを設定
      • IPv6を使わないように設定
      • ログを監視してレポートするように設定
    • ウィルス関係
      • ウィルス対策ソフトを有効化
      • rootkitを検出（WARNINGの嵐なので対応したいです）
      • ファイル改竄を検出してレポートするように設定

  • ドメイン

ミドルウェア

  • MySQL

    • インストールして起動
    • アプリケーション用ユーザを作成して権限付与
    • Rails側でdatabase.ymlを修正

  • Rails

    • rbenv,ruby,railsのインストール＋パスを通す
    • エラーが出るのでtherubyracerとrb-readlineã‚’Gemに加える
    • 資材をローカルからリモートにコピー
    • アプリケーションルート/publicの所有権を実行用ユーザに付与
    • Migrationã‚„Asset Compileなど、アプリケーションの起動準備

  • Passenger

    • passengerと依存ライブラリをインストール
    • passenger-install-apache2-moduleを実行
    • confファイルでPassengerモジュールを読み込ませる
    • 独自のHTTPヘッダを取り消すよう設定
    • 動作チューニング用の設定
    • PassengerFriendlyErrorPagesã‚’OFFに設定
      • これはリリース後に気付いて焦った

  • Apache設定

    • ServerTokensã‚„ServerSignatureなどの設定をセキュアにする
    • Apacheの実行ユーザを設定する
    • Passengerのconfファイルをインクルードする
    • NameVirtualhostを有効化⇒サブドメインへのリクエストをRailsアプリに当てる
    • ログ出力を設定する

  • サーバ証明書の設定

    • CentOSでメール受信設定＋ポートを開く
    • StartSSLからサーバ証明書を発行してもらう
    • Apacheに証明書を設置する
    • RailsでHTTPSを使うように処理を修正する
    • Apacheを再起動する（＝リリース！）

思ったこと

  • 進め方とか
    • 帰宅後や休日にコツコツ作るのは精神的に結構大変でした。その分、友人や先輩に見せて「やりきったこと」を評価いただいたときには、本当に嬉しかったです。
    • 経験不足で事前に見通せない部分が多く、結果として何度も手戻りました。もっと小さく試すよう心掛けたいです。
  • プロダクト面とか
    • 実際に自分で使ってみて、資格試験の学習に役立ちました。お陰で(?)応用情報も3週間で取得できました。ただ、自分が開発者だったから利用モチベーションがあっただけで、自分以外の人には使いにくいんじゃないかなと思っています。
    • プロダクトの品質は悪いので、少しずつ修正します。スマホで閲覧するとレイアウトがひどいことになったり、文言が英語と日本語で一律じゃなかったり、画面遷移がカスタマー体験の流れとずれていたり、ミドルウェアのユーザ権限がごちゃごちゃだったり、自前のコードだらけでGemを入れた方がセキュアかつ粗結合だったり、とにかく直したいところだらけです。

最後に

  • 改善点やご意見など、何かあればコメント欄やGithub、Twitterでご指摘いただけると嬉しいです。
  • 知人に指摘された点や自分で使ってみて気になった点はIsuueに挙げています。が、なかなか直せていません。

その後の改善報告

yuzutas0.hatenablog.com