どんな問題を解決する？
『 Twitterで今ある ご縁を大切にしたい 』『 フォロワーさんと感謝の気持ちを伝えたり、交流を深めたい！ 』
『 あの人に話しかけてみたい！ 』
けどきっかけがない..ちょっと億劫かも...
こういった問題も楽しみながら解決することが出来ます。
ご縁箱を使うとどうなる？
実際に使ってみて...・まだ話したことがなかったフォロワーさんと話すきっかけになった
・自分の率直な気持ちをレターを送って伝えることで喜んでもらえた
・ご飯の約束ができた
など
▼ 開発者のご縁箱ページ
- Twitterでご縁箱ページをシェアする（シェアしなくても書くことで繋がっていくことも可）
- ご縁箱ページを開設した知人にファンレターを書く・受け取る （投稿型）
- レターの話題を選んでツイートシェア機能で共有する（※任意）
▼ 以下のリンクから実際のTwitterでの使われ方を閲覧することが出来ます
°˖✧#goenbako_letters 、 #みんなのご縁箱✧˖°
| トップページ | ご縁箱ページ | レター詳細ページ |
|---|---|---|
 |
 |
 |
| Twitter認証、使い方 | プロフィールとレターの公開（誰でも閲覧可） | Twitterからの遷移限定の詳細ページ（誰でも閲覧可） |
| レターを書く | ご縁箱の共有 | レターの共有 |
|---|---|---|
 |
 |
 |
| ５つの話題を自由に選んで書くことが出来る | 自分のご縁箱ページをシェア | 受け取ったレターを選んでシェア |
レターの話題について補足
テーマが『ファンレター』だけとすると抽象的で書きづらくなる問題があったため、関係性問わず誰でも負担少なく書けるようテーマを厳選しています。
| ランダム訪問 | ユーザー検索 | 設定画面 |
|---|---|---|
 |
 |
 |
| ご縁箱ページをランダムに訪問出来る（誰でも閲覧可） | TwitterIDで検索。失敗時に開設リクエスト案内(任意) | メール通知設定、Twitterアカウント情報の再取得 |
- Ruby (2.7.4)
- Rails (6.0.4.1)
Gem
sorcery ・・・ Twitterの認証に使用config ・・・ Twitter認証後のコールバックURLの環境毎の定数管理に使用
carrierwave ・・・ 受け取ったレターのアップロードするために使用
fog-aws ・・・ 受け取ったレターの画像をS3にアップロードするために使用
meta-tags ・・・ 複数のmetaタグ設定を最適化に使用
twitter ・・・ Twitterプロフを再取得する機能実装に使用
rubocop ・・・ Railsのコード最適化に使用
administrate ・・・ 管理画面の構築に使用
jb ・・・ JSONのシリアライズに使用
- JavaScript
- Vue.js (2.6.14)
- HTML
- CSS
ライブラリ
vuetify ・・・ CSSフレームワーク。ご縁箱のUI/UX向上に適したコンポーネントがドキュメントに多数あり使用vue-router ・・・ SPA構築でルーティングを制御するために使用
vuex ・・・・・・ 状態管理 ログイン、フラッシュ、初心者のためのヘルプボックス表示に使用
vuex-persistedstate ・・・ ログインユーザーのstateをcookieに保持するために使用
js-cookie ・・・ cookieに保存したstateを操作する際に使用
axios ・・・ リクエストを投げてサーバとデータの取得や送信のやり取りを行うために使用
vee-validate ・・・ E-mailの入力フォームに使用
vue-gtag ・・・ Googleアナリティクスの設定に使用
eslint ・・・ リントチェックに使用
- heroku
- Amazon S3
- PostgreSQL
プログラミングスクールRUNTEQ内にて、予選審査を勝ち抜いたRUNTEQ受講生・修了生がポートフォリオ（自身で開発したサービス）を発表して競い合うイベント『BATTLE OF RUNTEQ』で 最優秀賞・オーディエンス賞を受賞(リアルタイム観戦者数: 約200名)
(31:00~) スライド資料を用いた5分間のプレゼン及び審査員による質疑応答
(1:29:15~)より審査結果発表、サービスの評価コメントをいただいております。