概要

SNSログインして、質問に答えるだけで、自分のプロフィールが作れるサイト

とりあえず出来上がったサイトがこちら
マイプロフィール's

利用方法

アクセスして、TwitterかFacebookでログイン後に質問に答えるだけで、
こんな感じの自分のプロフィールサイトが出来上がります！

私のページ

いい感じですね。

機能

トップページにはアクセスカウンター！
SNSログインして写真と名前を取得!
質問に答えてマイページを作れば固有のURLが発行されてシェアできる!
テーマカラーを設定するとピンクや青などの、自分のサイトのテーマカラーも設定できる！

簡単簡潔おしゃれで最高！

技術概要

ざっくり

フロントは vue.js, vuex, vue-routerをwebpackでごにょごにょ
バックエンドはBaaSのfirebaseで oAuth,DB,Hostingあたりを使っています。

ルーティング

「SPAでプロトタイプの開発を進めたいけど、後からちゃんと作る時に既存のパスがハッシュになってしまってるから、リダイレクトの設定とか必要になってめんどくさいからSPA嫌だ」
という意見を耳にしたことがある方もいるかと思います。

今回のサービスは完全SPAですがURLはしっかりユーザー固有の物がハッシュでなくパスで発行されます。

これはvue-routerのhistoryモードを利用し、
Hosting側のfirebaseの設定で404の場合でも常に /index.htmlを返却するようにしています。

↓firebaseでHostingする際の設定値のサンプル

firebase.json

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

/:user_id
というパスでデータの有無をfirebaseに問い合わせて、そんなユーザー情報が存在していなかったら404にリダイレクトします。

このときの注意点としてはアセットのパスを常に絶対パスで記載する必要があることです。

また、historyモードをローカルの開発中に設定してしまうと、ローカルでも上記の様な設定が必要になってしまうためhashモードで作業したいですね。

ということでrouterは雑ですが、port番号が指定されてたらローカルでされてなかったら本番という分け方で

router.js


import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)

import Top from './view/Top.vue';
import User from './view/User.vue';
import New from './view/New.vue';
import NotFound from './view/NotFound.vue';

const mode = location.port ? 'hash' : 'history';
const routes = [
    {
        name: 'top',
        path: '/',
        component: Top
    }, {
        name: 'new',
        path: '/n',
        component: New
    }, {
        name: 'notFound',
        path: '/404',
        component: NotFound
    }, {
        name: 'user',
        path: '/:user_id',
        component: User
    }, {
        name: 'notFound',
        path: '/*',
        component: NotFound
    }
];

const router = new VueRouter({mode, routes});

export default router;

という雑実装で開発を進めました。
ちゃんとやるなら、nodeのENVを見てmodeを切り分けるのがいいと思います。

終わりに

クソアプリなので時間をかけずに、最低限必要な機能のみ実装して２時間で環境構築→本番化まで作りきりました。
もし「ちゃんと使いたい！」という人がたくさんいたら、ページにシェアボタンつけたりPCでのレイアウト作ったりするかも？コントリビュートしたい人もいたら教えてください。

ぜひ使ってシェアしてね！

マイプロフィール's

現場からは以上です。

明日はtag031さんのクソアプリです。よろしくお願いします。