要望としてDBを使わずにファイルアップロードのみで完結し「使いまわしたい」とのことだったので、
cssは「bootstrap」を、フロント側の入出力は「Vue」で作成。
画面は以下のような感じになりました。

機能側の要件実装

別の要望としてあった「メール送信機能」と「PDF作成機能」についてはPHPで実装。
それぞれの機能はAjaxで非同期で処理を行なっています。

制作についての余談

この手のフォーム操作については、Vueのようなフレームワークの実装が楽ですね。
jQueryで作ろうとすると、ソースコードがスパゲッティになるのが目に見えてわかります。
フレームワークは便利だということが改めて実感できる制作でした。

制作物はこちら

サイト内の英文表記について

最近では、日本でも多くのサイトで英文表記を行なっていますので、当サイトでも英文表記を一部入れました。
多種多様なフォントが使えるので、GoogleFontは非常に重宝でき、英文との相性も良いです。
当サイトで用いている英文は、有償の翻訳サービスに依頼しましたので、国外でも内容は伝わるかと思います。

構造とスクリプトについて

当サイトはWordpressで動作していますが、なるべくプラグインを用いたくないので、フロント側とサーバー側の開発は自分で行なっています。
javascriptは流行のwebpackを用い、ページ遷移はPjaxで行ない、フォーム部分は全てAjaxによる非同期通信です。
というのも、今回の制作コンセプトはページ表示スピードを高め、サイト回覧を促すことにあります。
当初はSPAを開発しようとコードを書いていましたが、ただのサイトですので従来と同様にWordpressで行いました。

ページスピードの調整について

WordPressは多くの高速化プラグインがありますが、導入は行なっていません。
現状のページスピードはPageSpeed Insightsにて、モバイル85スコア、PC95スコア前後最大で確認できました。
個人的にWordpressの高速化プラグインはあまり重視していません。
理由については、高速化プラグインの導入を検討するほどのケースを想定していないからです。

以上となりますが、
当サイトを引き続きよろしくお願い致します。

収穫結果

ということで、難易度としては簡単な部類にある【カブ】と【小松菜】が収穫できました。
特に収穫時期を意識したわけではないですが、けっこうな量が収穫できたので半分以上を実家に渡しました。

感想と考察

今のところ、上記に加えて【キャベツ】【らっきょう】【枝豆】【空豆】【大葉】など種をまいて、芽を出しています。
特に空豆の成長を心待ちにしていますが、次に収穫できるのは恐らく小松菜になると想定しています。

次に考察ですが、家庭菜園を行う上で畑を2つに分割し、2つの肥料を異なる配分で使用してみました。
ひとつは腐葉土や糞のような有機肥料、ひとつはホームセンターで購入した粒状の有機肥料です。
結果的に、ホームセンターで購入した肥料を使った箇所は芽が弱々しく、収穫量が少ないという結果が得られました。