cooklogというサービス名で、Markdownでレシピ投稿ができるサイトを作りました！

cooklog

リモートワーク期間中、自炊をする機会が増えたのでどこかにレシピを投稿しようかなと思ったのと、エンジニアならレシピ投稿も使い慣れているMarkdownで書けたらいいのでは！と思い開発しました。
自粛が終わりそうな頃合いですが、自炊をしている方はぜひレシピを投稿してみてください！

本記事ではcooklogの開発にあたっての話と、技術周りの話をメインでしていきます。

cooklogについて

cooklogはレシピを投稿するためのサイトで、Markdownで投稿できることが特徴です。

開発のきっかけ

作ろうと思ったのきっかけとしては、上記でも少し触れていますが、リモートワーク期間中に自炊をする機会が増えてレシピをどこかに投稿しようと思ったのと、自炊を始めるエンジニアの方が増えたのを機にMarkdownで書けるレシピを作ってみようと思ったためです。

開発期間は、先月の最後の週に開発を開始し、今月の4週目始めでリリースしたのでだいたい25日程度です。

ページ構成

一部だけ主要となるページの紹介をします。

ホーム

サイトのホーム画面のページは、新着レシピや一定期間に多くいいねされた記事のピックアップで構成されています。
ピックアップについては直近で多くいいねされたレシピを、今週と今月のピックアップとして選び表示しています。
また、1日でいいねが多く付いた記事と1週間でいいねが多く付いたレシピが選ばれ、トレンドレシピとして表示されます。

レシピページ

レシピのページはこのような感じになっています。

レシピ投稿ページ

レシピ投稿ページは、

• 料理名
• カテゴリー
• タグ
• 画像
• 公開設定
• 調理時間
• 何人前
• ひとこと
• 作り方

の入力フィールドで構成されます。

このうち作り方のフィールドがMarkdownになります。入力すると同期的に横の合いたスペースへhtmlに変換されたテキストが表示されていきます。
公開設定で公開をするとホームやレシピページで閲覧することができます。
まだ書きかけのときは非公開にすることで表に表示されなくなります。

レシピを編集したいときは右上の歯車から記事管理ページを開き、各レシピの編集ページへ行けます。

ユーザープロフィールページ

ユーザーのプロフィールページでは、これまで投稿してきた記事に付いたいいねの数や、投稿した記事の一覧を見ることができます。

フロントエンド

フロントエンドは、自粛期間中にリリースしたかったので無料のテンプレートを使ってスピード重視で開発しました。
クレジットに気をつければ、無料で使えるものがありふれているので有効に活用しました。

使用したテンプレートはこちらです。

Meranda
Paper Dashboard 2

どちらもモダンなデザインで扱いやすく、Paper Dashboard 2に至ってはドキュメントが用意されていたので非常に開発が捗りました。

テンプレートエンジンはDjangoの標準のものを使っています。

バックエンド

バックエンドの構成はDjango + uWSGI + Nginx + MariaDBとなっています。
Djangoを採用したのは以前から使っているフレームワークで、一番馴れているからです。
最近、日本でもDjangoユーザーが増えているようなので嬉しい限りです。

インフラ

サーバーはConoHaのVPS、DBサーバー、メールサーバーを使用しています。
Webサーバーまわりの設定は自分で行う必要がありますが、メールやDBまわりは簡単にセットアップさせることができました。

ConoHa

2021年9月25日
ConoHaからHerokuに移行しました。
https://yes-cooklog.herokuapp.com/

技術面

Djangoの開発スピード

Djangoで開発をするときに嬉しいのが、ユーザーを扱う機能が標準で備わっていることです。
既存の標準機能を使ってUserモデルのカスタマイズも柔軟にできるので強力な機能の一つです。

Extending the existing User model

また、DjangoはPythonでできているのですが、Python自体が可読性があり明示的でわかりやすい言語なので開発が非常に進めやすいです。

Markdown実装

Markdownはプラグインをpip installして実装しました。

インストールしたものはdjango-markdownxとMarkdownです。

django-markdownx

入力用に使っているプラグインです。
入力時に同期してhtmlを出力してくれます。

Django MarkdownX

Markdown

記事ページでの表示用に使用しています。
保存したMarkdownの文章はHTMLでなく素のMarkdownで出力されるので、一度HTMLに変換する処理をはさみます。

変換処理はカスタムテンプレートフィルタを使うことで実現できます。

from django import template
from django.template.defaultfilters import stringfilter
import markdown as md

register = template.Library()

@register.filter()
@stringfilter
def markdown(value):
    return md.markdown(value, extensions=['markdown.extensions.fenced_code'])

{% load markdown_extras %}

{{ article.body | markdown | safe }}

Markdown

タグ機能の実装

タグ機能は自前で実装することもできますが、django-taggitというプラグインを使うことで簡単に実装することができます。

django-taggit

Webサーバー

Webサーバー周りはNginxとuWSGIを使って構築しました。
uWSGIはチュートリアルがあるのでこちらを参考にすると簡単に設定ができます。

Setting up Django and your web server with uWSGI and nginx
Django + uWSGI + nginx (uWSGIチュートリアルの和訳)

今後実装したい機能

今のcooklogは短期間で開発したものなのでまだまだ足りない機能や改修しなければならない箇所がたくさんあります。
ざっと今の課題を上げるとこんな感じです。

• 検索機能
• タグごとの一覧ページ
• Markdownの装飾やインターフェース
• 各ページの細かなデザイン（特に記事ページ）
• スマホビューのデザイン・UI/UX
• SEOを意識したHTML
• プレビュー機能
• テスト方法

まだまだ課題は出てくると思うので、徐々に改善をしていこうと思います。