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回へつづく!

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

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

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

次回もお楽しみに!

(株)ライトコードは、WEB・アプリ・ゲーム開発に強い、ITが大好きな会社です。
Responder + Firestoreでの開発依頼・お見積もりはこちらまでお願いします。
また、ResponderやFirestoreを扱えるエンジニアを積極採用中です!詳しくはこちらをご覧ください。

※現在、多数のお問合せを頂いており、返信に、多少お時間を頂く場合がございます。

次回の記事はこちら

第1回はこちら

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

ライトコードよりお知らせ

にゃんこ師匠にゃんこ師匠
システム開発のご相談やご依頼はこちら
ミツオカミツオカ
ライトコードの採用募集はこちら
にゃんこ師匠にゃんこ師匠
社長と一杯飲みながらお話してみたい方はこちら
ミツオカミツオカ
フリーランスエンジニア様の募集はこちら
にゃんこ師匠にゃんこ師匠
その他、お問い合わせはこちら
ミツオカミツオカ
   
お気軽にお問い合わせください!せっかくなので、別の記事もぜひ読んでいって下さいね!

一緒に働いてくれる仲間を募集しております!

ライトコードでは、仲間を募集しております!

当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。

また、ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!

なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。

ライトコードでは一緒に働いていただける方を募集しております!

採用情報はこちら

書いた人はこんな人

ライトコードメディア編集部
ライトコードメディア編集部
「好きなことを仕事にするエンジニア集団」の(株)ライトコードのメディア編集部が書いている記事です。

関連記事