1. HOME
  2. ブログ
  3. IT技術
  4. 【第7回】Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみた【メディア管理と非同期処理】

【第7回】Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみた【メディア管理と非同期処理】

第7回~モダンなフレームワークの使い方を学びながらブログシステムを構築~

連載「Python Responder + Firestoreでモダンかつサーバーレスなブログシステムを作ってみる」第7回目です。

前回は、記事作成部分を作りました。

メディア管理の整備をしよう

今回はひきつづき、管理者ページの整備をしていきます。

具体的には、「メディアのアップロード部分」を実装しようと思います!

メディアのアップロードページ

まずは、メディアのアップロードページ「/admin/media」を作りましょう。

アップロードに必要な機能

メディアをアップロードするには、以下の機能が必要です。

  1. ファイルアップロード
  2. 今あるメディア一覧
  3. 画像タグ (マークダウン形式) のコピー

画像パスを取得する関数を作る

ビューを作る前に、あらかじめ「画像一覧を取得する関数」を作っておきましょう。

やることは、いたって簡単です。

「/static/images/」のファイルを全て取得し、そのパスをリストで返すだけです。

降順でソートする

ゆくゆくは、日付が新しい順で表示させたいので、降順でソートしておきます。

(ファイル接頭辞に日付を置くためです)

ひとまず、png や jpg などの画像拡張子だけにしました。

ルーティングとビューの作成

ルーティング

ルーティングは、以下の様な感じです。

ビュー

次に、ビューを作ります。

Javascript でタグをワンクリックでコピー

ここで、「マークダウン形式のタグを、ワンクリックでクリップボードにコピー」するため、Javascript を使います。

jQuery などは使いません。

記述方法に注意!

その際、 <input type="text" id="copy-img-path{{loop.index}}" value="![image_name](/{{img}})" readonly> の value をコピー対象にしています。

これを、単純に type="hidden" や CSS で display: none; と記述すると、上手く動作しません

透明化でコード量を減らす

そのため、少々力技ですが、今回は「透明化」でコード量を少なくします。

上記のように、透明化して、重複を許可しました。

これでもしっかり動作してくれます。

サイドバーにページを追加

そうしたら、このページを、管理者ページのサイドバーに追加しておきましょう。

admin-side.html にまとめてしまい、必要なページにはインクルードする形にしておきます。

動作確認

それでは、動作するか確認してみましょう。

まずは、「/admin/media」にアクセス。

メディアページ

試しに、画像をクリックしてみます。

クリップボードにタグがコピーされた!

うまく動作しているようですね!

パスに関する注意点

本システムでは、パスの表記に「static/images/***」と「/static/images/***」の2種類を使い分けています。

これは、それぞれ Python 側と HTML / CSS 側で使い分けていますので、ご注意ください!

Python 側で「/static」と表記すると、サーバ側のファイルパスになってしまいます。

アップロード処理の実装

次に、「ファイルアップロード」について実装していきます。

先ほど説明した通り、ビュー側で「/admin/upload」に取得したファイルを投げるのです。

ポイント

押さえるべきポイントは、以下の2点です。

  1. ファイル名の重複を避けた名前づけ
  2. ファイルのアップロード機構

日付は接頭辞

1つ目のポイントは、ひとまず「日付(秒まで)を接頭辞」にすれば解決します。

ちなみに、以下のような手段もあるので、完璧なものを作りたい場合は参考にしてください。

  1. 日付の後ろに、ランダムな文字列を散りばめる
  2. 投降ユーザ名を入れる

アップロードはバックグラウンド処理

また、せっかくなので、ファイルアップロードはバックグラウンドで処理させましょう。

いざ、Responder で実装

これらを Responder で実装すると、以下のようになります。

このように @api.background.task というデコレータをつけるだけで、バックグラウンドで処理させることができます。

これが Responder の良いところですね!

動作確認

それでは、実際に動作を確認してみます!

適当に画像を選択して、アップロードしてみます。

たまたま筆者が持っていたmazda3の画像をあげてみる

しっかりアップロードされた (もともとあった画像には日付がないので順番はバラバラになってしまっていますが無視して下さい)

良い感じですね!

新規記事投稿にサムネイルを追加できるようにする

これで、メディアアップロードが可能になりました。

最後に、記事のサムネイルを追加できるようにしましょう。

サムネイル画像も、同様にマークダウン形式で指定するようにします。

ビューにコード追加

まずは、ビューに以下のコードを追加します。

サムネイル用 inputタグを追加

コントローラ修正

そして、コントローラを修正します。

プレビュー用のビューを修正

最後に、プレビュー用のビューを修正しましょう。

HTML 形式でサムネイルを得るので、オートエスケープを「無効」にして、展開します。

これで完了です。

ここまでで、記事の新規追加機能は全て実装できました!

試しに記事を追加してみよう

次に、記事を追加してみましょう。

このとき、いろんなタグを織り交ぜてテスト投稿してみてください。

あとで記事のデザインを調節するのに役立ちます。

サンプル

筆者は、とりあえずこんな感じにしてみました。

簡単に記事作成ができた

あとで「ブログ一覧取得」や「編集画面実装」にも用いるテスト投稿なので、公開しておきます。

第8回へつづく!

今回は、「メディアアップロードの実装」を行いました。

着々とブログシステムが出来上がってきていますね!

あとは、もう少し管理者ページを充実させていきます。

次回もお楽しみに!

次回の記事はこちら

第1回はこちら

こちらの記事もオススメ!

書いた人はこんな人

広告メディア事業部
広告メディア事業部
「好きを仕事にするエンジニア集団」の(株)ライトコードです!

ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もり大歓迎!

また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です!
インターンや新卒採用も行っております。

以下よりご応募をお待ちしております!
https://rightcode.co.jp/recruit

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア