1
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

フリーランスSNSをツクール2.0

はじめまして

はじめましてって書いていいのか分からないですが、初投稿になります。
多分、6年くらい前(railsを触りはじめた頃)に技術系ブログに大変お世話になって、自分も何か書きたいと思っていたんですが、qiitaは、敷居が高い(ガチエンジニアしか書けない)って思い込み?があって、はてブロに書いていました。
そんな自分が、qiitaに書く事がくるとは感無量です。(と言っても書く事がない。。

少し自己紹介させてもらうと、Sierとメーカー系の子会社に約10年くらいいて、その後ベンチャーをウロウロしていました。学んだ(気付いた)のは、自分はまともなコードが書けないという事です。

自分の技術論?

正直、プログラミングは努力ではできるようにならないです。
正確にいうと、努力で仕事をこなせる程度には書けるようになりますが、センスがある人とない人の差はどれだけ積み上げようと埋まらないです。「エンジニア未経験から年収1000万」ってフレーズよくみますけど、ほぼ未経験から1年くらい年収700万くらいになった人なら知っていますし、あながち嘘じゃないと思います。

急成長する人は、成長する能力も含めて「持ってる」のです。(ちゃんと努力もしてると思いますが)
自分には才能はない、という事だけは誰がなんと言おうと明確に分かったので、多分アドベントなんちゃらがなかったら、自分がqiitaに投稿することもなかったと思います。

何をやっているか

どんどん、qiitaに書くべき(書くような?)内容から遠ざかっている気がするのですが、、
フリーランスのSNSを、rails+vueで作っています。フロント+バックエンド+デザイン+ライティング?+環境構築まで自分でやっているのですが(イラストは依頼しています)、vue使うようになってから、慣れてなかった事もあってかなり開発に時間がかかるようになってしまいました。

こんな感じのやつです
https://lancepod.com/

SPAで苦労した事

VueはNuxtを使わず、SPAで動作させているのですが、OGP問題で困っています。

この記事にまとめて頂いている通りで、
https://qiita.com/rotelstift/items/f7dad19177d30714dcfa

方法としては、
- vue-headのようなプラグインで対応する
- SSRする
- プリレンダリングする
のようなやり方があるのですが、twitterでシェアされたい欲があり、それだとvue-headのようなやり方だとtwitterがogpを拾ってくれないので、SSRで対応する事にしました。プリレンダリングも考えたんですが、やり方構築するのが手間だなと思ったのと、多分railsが好きなんでしょうね、第一館でrailsでrenderさせたい!と思ってしまいました。

railsにogpをレンダリングさせる

やり方が曲芸的なので、rails好きにはたまらないかもしれませんが、通常こんなやり方しないと思います。
1. nginxに特定のURL(パス)のパターンに合致する場合、フロント(vue)ではなく、rails側に飛ばす(rewrite)
2. rails側でリライト前の当該URLの示すVueのページを取得して、そのページ独自のogp(tilte/description/image等)を埋め込む
3. そのページをrenderメソッドでレンダリングして返す

みたいな感じです。
全然技術ブログっぽくないので、nginxの設定を抜粋しておきます。。

# iam and party -> backend
rewrite ^/iam/(.+)$ /render/retell/iam/$1 last;
rewrite ^/party/(.+)$ /render/retell/party/$1 last;

SPAで、ogpって皆さんどうやっているんでしょう?
Lancepodの開発を手伝ってくださる方もしいたら、お声かけ頂けたら超うれしいです。
(アイコンは推しです)

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
Sign upLogin
1
Help us understand the problem. What are the problem?