Help us understand the problem. What is going on with this article?

懐かしい雰囲気で自分のプロフィールが作れるサイトを2時間で作った

More than 1 year has passed since last update.

クソアプリアドベントカレンダー2017 15日目の記事です

今年もやってきましたクソアプリアドベントカレンダー

私はこのカレンダーだけ毎年参加する事にしています。

概要

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

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

利用方法

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

image.png

私のページ

いい感じですね。

機能

トップページにはアクセスカウンター!
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を切り分けるのがいいと思います。

終わりに

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

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

マイプロフィール's

現場からは以上です。

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

nabettu
個人的にひっかかった場所などをメモしています。
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした