Crieitの開発

2019-01-05に作成

Crieitの開発ログ。

pablo.png

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

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

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

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


各ページの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画像っぽいけど…。てかどれくらい荒くなるんだろ。


実際のサーバーでpuppeteer使ったOGPサーバー作ってみた。まだ完成じゃないけどこれでいくらでも好きなHTMLでOGP簡単に作り放題になる。

.envで使用するサービスのURL指定できるので今後どのサービスにも使える。有料化で機能公開とかのアイデアも出そうだけど個人開発者は母数少なそうだから意味なさそうでやりはしない…。


フロントの処理を調整した副産物で、ボードやその下の本文にもツイートとCodePenをすぐ埋め込めるように対応できた。ボード+CodePenはなんか色々面白いことができる可能性がありそう…?


フロントの不要になった処理を削除した。Vueコンポーネントが一つ削除できた!(そのかわり一つ増えた)


NowでCrieitのデータと連携させてOGP作るのをマイクロサービス的に作っとくかな。


記事は元々、簡易的にSSRしたあとフロント側のMarkdown Viewerで再描画してたんだけど、Viewer側の機能を削ってきた結果として再描画は不要になってきてるからSSRだけで簡潔させてフロントの処理は丸々削除しようと対応中。


遂にスマホ用の下部グローバルナビを追加した。スマホ操作が楽になった気がする。

でもレスポンス対応してるとはいえ、まだPC向けベースのUIになっててスマホだと使いづらい部分が多いからちょいちょいスマホで操作しつつ調整していく。これもスマホで書いてる。

Bootstrapのdrawerが上下にスクロールしちゃうやつだったからfixedになおしたけど細かい調整が多くかなり時間がかかった。記事にでもする。