• Top
  • 栽培ライブラリ

栽培ライブラリ

菜園カレンダー・菜園マップ・栽培記録を作成するために開発したJavsScriptライブラリです。 ライブラリを利用して栽培データをJavaScriptで簡単に記述することにより、菜園カレンダー・菜園マップ・栽培記録を作成できます。

菜園カレンダー
中央が薄くなっている作業を選択すると説明が表示されます
菜園マップ
栽培記録
作物名を選択して表示します

開発の経緯

  • いつ何を植えれば良いかも分かっていない素人が手探りで野菜を育てているが、野菜は時期を逃すと栽培できないため、野菜作りに必要な作業を行う時期が一目でわかる菜園カレンダーを作ることにした
  • 最初は一般的な作表ツール（Excelなど123的なやつ）や作図ツール（ドロー系ソフト）で作ってみたが、どうにも使いにくい（修正に余計な手間と時間が掛かる）し、見た目が不細工になってしまう
  • それなら優秀な先人が開発した作図ライブラリを利用して作ろうと考えたが、一般的なカレンダーやガントチャートを作成するライブラリは多くあるものの、菜園カレンダーに利用できる作図ライブラリが何故か見つからない
  • 以上のことから、先ず専用のライブラリを開発してから、菜園カレンダーを作ることにした
  • 次に、菜園マップと作物ごとの栽培記録を作成する機能をライブラリに追加した
  • 菜園カレンダー・菜園マップ・栽培記録を作成するためには、栽培データをJavaScriptで簡単に記述 （つまりJavaScript言語でプログラミング）する必要があり、一般的には面倒かもしれない。 もし他に利用する人がいるなら、Excelで作成した栽培データを読み込んで自動生成する仕組みを用意しても良いかも。

ダウンロード

栽培ライブラリは下表のファイルで構成され、各ファイル名のリンクからダウンロードしてご利用いただけます（右クリックして[名前を付けてリンク先を保存]など）
ファイル名種類説明
cultivation.min.js JavsScriptファイル 栽培ライブラリ
cultivation.css CSSファイル 栽培ライブラリ用の体裁を整えるスタイルシート
pluspat1.png PNG画像ファイル 栽培地図の非栽培区画を表すパターン画像
direction1.png PNG画像ファイル 栽培地図の方位マーク画像
ダウンロードしたファイルを任意のフォルダに格納します
  • 任意フォルダ/
    • cultivation.min.js
    • cultivation.css
    • pluspat1.png
    • direction1.png
実際に使用される場合はファイル種別に応じた適切なフォルダ（js,css,imgなど）に格納した方が良いかもしれません

菜園カレンダーを作成する方法

  1. 作業フォルダに以下の必要なファイルがあることを確認する
    • 任意フォルダ/
      • index.html（次項で作成、任意ファイル名）
      • cultivation.min.js
  2. WEBページ（HTMLファイル）を作成する（例：`index.html`ファイル）
    • 描画領域としてcanvasを作成
      <canvas id="CultiPlan" width="520" height="280"></canvas>
    • 栽培ライブラリ`cultivation.min.js`を読み込む
      <script src="cultivation.min.js"></script>
    • 菜園カレンダーを作成する処理を記述
      1. 栽培計画オブジェクトを生成（canvasのidを引数に指定）
        const plan = new CultivationPlan("CultiPlan");
      2. 作業（作業名、色）を定義
        plan.add_action('種蒔き', 'brown');
      3. 栽培期間データ準備
        const dataset = [
        { 'name':'ニラ', '種蒔き':'3b-4a', '植え付け':'6b-7a' },
        （省略）
        ];
        plan.set_dataset(dataset);
        • 作物ごとに作業期間を「作業名:期間」の形で記載する
        • 期間は、開始月-終了月の形で記載し、末尾にa（上旬）,b（中旬）,c（下旬）を付加できる
      4. 栽培方法説明準備
        const methodset = new Map();
        methodset.set('ジャガイモ:植え付け', '畝幅65㎝、間隔25㎝、深さ8㎝。種芋は50g程度に切り分け');
        （省略）
        plan.set_methodset(methodset);
        • 作物＆作業ごとに栽培方法の説明を「作物:作業,栽培方法説明」の形で記載する
        • 栽培方法説明は句点（。）で改行されて表示される
      5. 描画
        window.addEventListener('load', function() {
        plan.draw();
        });
      6. 作業選択（栽培方法説明表示）
        const canvas = document.getElementById('CultiPlan');
        canvas.addEventListener('click', (event) => {
        plan.draw();
        const rect = canvas.getBoundingClientRect();
        const mx = event.clientX - rect.left;
        const my = event.clientY - rect.top;
        const rx = canvas.width / rect.width;
        const ry = canvas.height / rect.height;
        plan.action_clicked(mx * rx, my * ry);
        });
    • 見栄え調整（オプション設定）については「菜園カレンダーの作成例2」をご確認ください
      plan.set_font("14px 'MS P Gothic'"); // フォント設定（オプション）
      plan.set_padding(10); // パディング設定（オプション）
      plan.set_border(0.25, 'blue'); // 罫線の幅と色を設定（オプション）
      plan.set_month_bgcolor('LightYellow'); // 月背景色設定（オプション）
      // plan.hide_legend(); // 凡例非表示（オプション）
      plan.set_today(0.75, 'red'); // 今日線の幅と色を設定（オプション）
    • WEBページ（HTMLファイル）はテキストエディタ（メモ帳など）で作成することができます
  3. 作成したWEBページ（例：`index.html`ファイル）をWEBブラウザで表示する

菜園カレンダーの作成例1

表示
中央が薄くなっている作業を選択すると説明が表示されます
HTMLファイル

菜園カレンダーの作成例2

表示
中央が薄くなっている作業を選択すると説明が表示されます
HTMLファイル

菜園マップを作成する方法

  1. 作業フォルダに以下の必要なファイルがあることを確認する
    • 任意フォルダ/
      • index.html（次項で作成、任意ファイル名）
      • cultivation.min.js
      • pluspat1.png
      • direction1.png
  2. WEBページ（HTMLファイル）を作成する（例：`index.html`ファイル）
    • 描画領域としてcanvasを作成
      <canvas id="CultiMap" width="229" height="229"></canvas>
    • 栽培ライブラリ`cultivation.min.js`を読み込む
      <script src="cultivation.min.js"></script>
    • 菜園マップを作成する処理を記述
      1. 栽培地図オブジェクトを生成（canvasのidを引数に指定）
        const map = new CultivationMap("CultiMap");
      2. 畑全体サイズ設定（単位cm）
        map.set_garden_size(229, 229);
      3. 非栽培エリア設定（色、区画）
        map.set_dead_color('path', 'tan');
        map.add_dead('path', 0, 100, 228, 40);
      4. 栽培植物（色）設定（栽培植物クラスを利用しない方法）
        map.set_plant_color('ジャガイモ', 'sandybrown');
        map.set_plant_color('ニラ', 'mediumseagreen');
        map.set_plant_color('玉ねぎ', 'khaki');
      5. 栽培区画設定
        map.add_plant('ジャガイモ', 0, 0, 228, 100);
        map.add_plant('ニラ', 0, 140, 228, 44);
        map.add_plant('玉ねぎ', 0, 184, 228, 44);
      6. 描画
        window.addEventListener('load', function() { map.draw(dataset); });
    • 方位設定や見栄え調整（オプション設定）については「菜園マップの作成例2」をご確認ください
      map.set_direction(-30, 10, 10); // 方位設定（オプション：角度、X位置、Y位置）
      map.set_basic_font("14px 'MS P Gothic'"); // 基本フォント設定（オプション）
    • 栽培植物クラスを利用して栽培エリアの栽培植物（色）を設定できます（参照：菜園マップの作成例2）
      const plants = new CultivationPlants(); // 栽培植物
      plants.set_color('ジャガイモ', 'sandybrown');
      plants.set_color('ニラ', 'mediumseagreen');
      plants.set_color('玉ねぎ', 'khaki');
      map.set_plants(plants); // 栽培植物設定
    • 栽培区画設定時にadd_plant_font関数を利用して個別フォントを指定できます
      const small_font = "10px 'MS P Gothic'";
      map.add_plant_font('にんにく', 0, 0, 30, 30, small_font);
    • add_plant_font関数でフォント'noname'を指定すると栽培植物名が非表示となります
      map.add_plant_font('にんにく', 0, 0, 30, 30, 'noname');
    • WEBページ（HTMLファイル）はテキストエディタ（メモ帳など）で作成することができます
  3. 作成したWEBページ（例：`index.html`ファイル）をWEBブラウザで表示する

菜園マップの作成例1

表示
HTMLファイル

菜園マップの作成例2

表示
HTMLファイル

栽培記録を作成する方法

  1. 作業フォルダに以下の必要なファイルがあることを確認する
    • 任意フォルダ/
      • index.html（次項で作成、任意ファイル名）
      • cultivation.min.js
      • cultivation.css
  2. WEBページ（HTMLファイル）を作成する（例：`index.html`ファイル）
    • 栽培ライブラリ用の体裁を整えるスタイルシートを読み込む
      <link rel="stylesheet" href="cultivation.css">
    • 栽培記録用のdiv領域を作成
      <div id="CultiLog"></div>
    • 栽培ライブラリ`cultivation.min.js`を読み込む
      <script src="cultivation.min.js"></script>
    • 栽培記録を作成する処理を記述
      1. 栽培記録オブジェクトを生成（栽培記録用divのidを引数に指定）
        const log = new CultivationLog("CultiLog");
      2. 作物と日付ごとに栽培記録を追加
        log.add_log('玉ねぎ', '2025/06/07', 'a250607t.jpg', '収穫');
      3. 栽培記録用div領域に栽培記録を設定
        log.set_logs();
    • 栽培記録を追加する方法は「栽培記録の作成例2」をご確認ください
      log.add_log('玉ねぎ', '2025/06/07', 'a250607t.jpg', '収穫');
      log.add_log('ニラ', '2024/04/26', 'a240426nr.jpg', '2年目春');
      log.add_log('ニラ', '2025/01/25', 'a250113nr1.jpg, a250113nr2.jpg', '3年目冬刈取');
    • 栽培記録に指定した写真（画像ファイル）はimgフォルダの下に置きます
    • 見栄え調整（オプション設定）については「栽培記録の作成例2」をご確認ください
      // log.set_label_style(0); // マーカー付き縦並びスタイル（デフォルト）
      // log.set_label_style(1); // 縦並びスタイル
      log.set_label_style(2); // 横並びスタイル
      log.set_label_lineheight('2'); // 行高さ指定
      log.set_label_gap('3em'); // 横並び時の間隔指定
      log.set_margin('1em 0 1em 0'); // 周囲余白指定（上、右、下、左）
    • `cultivation.css`を参考にstyleタグでスタイル指定して体裁を整えることもできます
    • WEBページ（HTMLファイル）はテキストエディタ（メモ帳など）で作成することができます
  3. 作成したWEBページ（例：`index.html`ファイル）をWEBブラウザで表示する

栽培記録の作成例1

表示
作物名を選択して表示します
HTMLファイル

栽培記録の作成例2

表示
作物名を選択して表示します
HTMLファイル

styleタグで写真（画像ファイル）の大きさを40%に指定している

今後について

ご要望があれば機能の改善や強化を検討したいと考えていますので、お気軽にご連絡ください。
連絡先
moriuchi@ymail.ne.jp
森内