Crieitの開発

2019-01-05に作成

Crieitの開発ログ。

pablo.png

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

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

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

ボード作成時に #100DaysOfCode のプリセットを用意したのでクリック一発でだいたい入力欄を埋めてくれるようにした。これで誰でもすぐ簡単に100DaysOfCodeが始められます…!

10dayspreset.png

ボードの作成はこちら

ボードの作成


ボードの動線を色々追加したり、「投稿」を「記事」という文言に変更したりした。

何でも書けるということで「投稿」としていたが、ボードの出現によりその必要はなく完全に分離されていくと思われるし、新規ユーザーにとっても非常に紛らわしいものになる可能性が非常に高いので変更した。


一応ボード投稿をシェアしたURLでアクセスされたページにはボード作成のリンクを貼っておいた。記事投稿ボタンしかないと混乱する可能性が高いため。


ログイン時のツイッターアイコンを保存するようにする件進めてるけど、テストパターンが多くてこわいな…。エラー出たらログインできなくなるし。ちゃんと時間とってテスト書きつつやらなきゃかな…。

とりあえず一旦休憩して他のことしよう。


ログインしてる人はボード投稿をシェアしたページをエラーで見れてなかったようなので修正した…。


さっそくCrieitのリポジトリをGitHubのプライベートに移動した。草も移動してるっぽい。


ボードのfeed作った。


ボード投稿のコードハイライトが抜けてたので対応した。てかVue.jsの単一コンポーネント、template書かなくてもいいからロジックだけのこんなんでも良いんだな。

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import highlight from 'highlight.js'

@Component
export default class Highlight extends Vue {
  mounted() {
    highlight.initHighlightingOnLoad()
  }
}
</script>

html側

<highlight />

できた。まあ、return nullしてたところにボードの画像取得メソッド入れるだけだけど。

    public function getImage(): ?string
    {
        if (!preg_match_all('/!\[[^\]]*\]\(([^ \)]+)[^\)]*\)/', $this->body, $matches)) {
            return $this->board->getImage();
        }

        foreach ($matches[1] as $url) {
            $host = parse_url($url, PHP_URL_HOST);
            if ($host == 'storage.googleapis.com') {
                return $url;
            }
        }

        return $this->board->getImage();
    }

ボードページの横幅がやけに広かったので狭めた。


シェア文の省略のしかたもとりあえずはおおよそ問題なさそうかな。

だら 技術系投稿サービス運営中  dala00 さん   Twitter.png


ボード機能を100αバージョンでこっそリリースした。進捗は進捗ノートから引っ越して今後このボードで書き進めていく。また時間ある時に記事書こう…。

ボード作成するリンクは無いけどLaravel分かる人ならすぐわかりそう。