トップページ

たとえ場

Webアプリケーション

たとえ場のリンク

使用した技術やツール

  • Ruby

    Ruby

  • Ruby on Rails

    Ruby on Rails

  • Docker

    Docker

  • TiDB Cloud

    TiDB Cloud

  • Cloudflare R2

    Cloudflare R2

  • Fly.io

    Fly.io

概要

たとえ話をしたりしてもらったりする、Webアプリケーションです。

機能

  • たとえ依頼の投稿
  • たとえ依頼の閲覧
  • たとえの投稿
  • たとえに対する「いいね」
  • たとえ依頼ならびにたとえの検索
  • たとえの並び替え
  • たとえ依頼タイトルと絵文字を含んだ動的OGP画像の生成

こだわり

主に以下の2点を心がけて開発しました。

  • 使いやすい設計
  • グラフィックの作りこみ

使いやすい設計として、具体的に以下の内容を実装しました。

  • 初回利用時の負担を無くすために、アカウント作成不要
  • ユーザーがテキストを入力する欄に、入力中の文字数をリアルタイムで表示
  • 必須項目が未入力時は誤送信できないようにSubmit不可状態を実現
  • アラートの自動非表示
  • たとえを入力しやすいように設計
    • スマートフォン表示時: たとえ入力欄までスクロールするボタンを表示
    • PC表示時: 左カラムに固定表示


また、大喜利的な使い方をされることを想定して、寄席や演芸のイメージでデザインをしました。

ならびに寄席や演芸のイメージから楽しい雰囲気を演出するとよいと考えて、以下を実装しました。

  • 見出しや背景などでイラストを使用
  • たとえ依頼やたとえ、OGP画像で絵文字を利用
  • 縦組みと横組みを併用して、画面の多様さを演出
  • トップページのコンテンツをランダムにすることで多様なコンテンツがあることを演出
  • たとえ依頼一覧でページネーションを使用せず画面全体に羅列