Crieitの開発
一応ためしにボードの目次を作ってみました。タイトルを設定している場合だけ、ボードの編集画面で目次を使うかどうかを設定できます。
OGPの絵文字が文字化けしてたので表示されるようにしました。
参考
Puppeteer on AWS Lambda のスクリーンショットで文字が豆腐になるので、ウェブフォントと絵文字フォントをインストール - Qiita
ログイン時にログイン情報をStoreに渡したり
これはやった。あとはキャッシュ削除するところ。これができたらとりあえず１記事だけ実際に試してみたい。
一応記事のCDN対応はおおよそできたけどリリースするためにはログイン時にログイン情報をStoreに渡したり記事が更新されたらキャッシュを削除したりしなきゃいけなくて面倒なのでまあゆっくりやるしかない。
レイテンシが結構ありそう＆botが結構来てるようなので、Cloudflare経由でページのCDN配信をテスト中。とりあえずこのページだけいわゆる爆速状態になってる。
ログインしてる人は自分の情報も表示されるけどそれはセッションじゃなっくて予めVuex Storeに入った情報で表示してる。
記事とボード内投稿だけでもこれで表示できるようになったらむっちゃ高速＆botの負荷無視できそうな気がするんだけど、どうなるだろ。とりあえず継続してテスト。
んー、アクセスランキングも検索流入色が強くなってきたのでうまいこと変えたい…。
各ページのCDN対応のため、前準備としてログイン状態をStoreにわたすだけの処理を入れた。引き続き問題の出なさそうなページから徐々に実験していく。
以前からトップページのみんなの記事が流れてしまう悲しみが深かったため、ユーザー毎に記事をまとめてよりたくさんの記事を表示できるようにしてみました。 pic.twitter.com/VsYBMJn6xR
— Crieit=コミュニティlike(Qiita+dev.to)/3公式 (@crieitcommunity) 2019年2月20日
最近投稿のあったボードをトップページにいくつか表示するようにしてみました。なんとなく見栄えも良くなった気が。
スマホは多分もう横スワイプにしていかないと表示しきれなさそうなのでそちらも随時進めていきます。
とりあえず記事のOGPはこんな感じで一旦終わり。
無心という手書きのフリーフォントを使ってます。当サービスのAboutページからリンク済。
画像がない記事のOGP作成中。なんとなくそれっぽくなってきたけどそもそもメインカラー違うし、どうせCSS使うならもうちょっとすごい感じにしたい…。
ボードページにはブログのように月の集計を表示するようにしました。
ボード内の投稿にコードがある場合はそれをOGPにするようにしてみた。ツイートなどすると表示される。
画像は他のNodeサーバーで動かしていて、パスを渡せばCrieitのどのページでも画像にしてくれる。
試しにコード表示部分のCSS。
.code-area {
background-color: #282c34;
margin: 15px;
padding: 10px;
width: 100%;
border-radius: 16px;
box-shadow: 0px 25px 45px -15px rgba(0,0,0,0.25);
max-height: 285px;
overflow: hidden;
position: relative;
font-family: 'Roboto Mono', monospace;
}
.code-area::after {
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
content: '';
width: 100%;
height: 30px;
background: linear-gradient(rgba(255, 255, 255, 0) 0, #282c34 80%, #282c34 100%);
}
もうちょっと調整するけどなかなかそれっぽくなってきたかな…？ どっかで見たようなOGP画像っぽいけど…。てかどれくらい荒くなるんだろ。
実際のサーバーでpuppeteer使ったOGPサーバー作ってみた。まだ完成じゃないけどこれでいくらでも好きなHTMLでOGP簡単に作り放題になる。
.envで使用するサービスのURL指定できるので今後どのサービスにも使える。有料化で機能公開とかのアイデアも出そうだけど個人開発者は母数少なそうだから意味なさそうでやりはしない…。