Crieitの開発

2019-01-05に作成

Crieitの開発ログ。

pablo.png

Crieitの開発 | 進捗ノート からの続き。

Crieitの新しい ボード機能 のテストも兼ねて運用中。上部ナビから誰でも作成できます。

所有者限定モードのためこのボードには投稿できません

エイプリルフール仕様作った。4/1はCrieitがむちゃくちゃ見づらい日となる…。

import { Vue, Component } from 'vue-property-decorator'

@Component
export default class Aprilfool extends Vue {
  isAprilfool() {
    const date = new Date()
    return date.getMonth() == 3 && date.getDate() == 1
  }
}

一応ためしにボードの目次を作ってみました。タイトルを設定している場合だけ、ボードの編集画面で目次を使うかどうかを設定できます。

ログイン時にログイン情報をStoreに渡したり

これはやった。あとはキャッシュ削除するところ。これができたらとりあえず1記事だけ実際に試してみたい。

一応記事のCDN対応はおおよそできたけどリリースするためにはログイン時にログイン情報をStoreに渡したり記事が更新されたらキャッシュを削除したりしなきゃいけなくて面倒なのでまあゆっくりやるしかない。

レイテンシが結構ありそう&botが結構来てるようなので、Cloudflare経由でページのCDN配信をテスト中。とりあえずこのページだけいわゆる爆速状態になってる。

ログインしてる人は自分の情報も表示されるけどそれはセッションじゃなっくて予めVuex Storeに入った情報で表示してる。

https://crieit.net/about

cdn.png

記事とボード内投稿だけでもこれで表示できるようになったらむっちゃ高速&botの負荷無視できそうな気がするんだけど、どうなるだろ。とりあえず継続してテスト。

んー、アクセスランキングも検索流入色が強くなってきたのでうまいこと変えたい…。

各ページのCDN対応のため、前準備としてログイン状態をStoreにわたすだけの処理を入れた。引き続き問題の出なさそうなページから徐々に実験していく。

最近投稿のあったボードをトップページにいくつか表示するようにしてみました。なんとなく見栄えも良くなった気が。
スマホは多分もう横スワイプにしていかないと表示しきれなさそうなのでそちらも随時進めていきます。

とりあえず記事の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画像っぽいけど…。てかどれくらい荒くなるんだろ。