栽培ライブラリ

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

菜園カレンダー

菜園マップ

栽培記録

開発の経緯

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

ダウンロード

栽培ライブラリは下表のファイルで構成され、各ファイル名のリンクからダウンロードしてご利用いただけます（右クリックして[名前を付けてリンク先を保存]など）

ファイル名	種類	説明
CultivationPlan.min.js	JavsScriptファイル	栽培計画クラス
CultivationMap.min.js	JavsScriptファイル	栽培地図クラス
CultivationPlants.min.js	JavsScriptファイル	栽培植物クラス（栽培地図で利用）
CultivationLog.min.js	JavsScriptファイル	栽培記録クラス
pluspat1.png	PNG画像ファイル	栽培地図の非栽培区画を表すパターン画像
direction1.png	PNG画像ファイル	栽培地図の方位マーク画像
CultiLog.css	CSSファイル	栽培記録の体裁を整えるスタイルシート
popup.min.js	JavsScriptファイル	栽培記録ポップアップ画面用ライブラリ
popup.css	CSSファイル	栽培記録ポップアップ画面用スタイルシート

ダウンロードした各ファイルを下図に示すフォルダに格納します

任意フォルダ/
- js/
  - CultivationPlan.min.js
  - CultivationMap.min.js
  - CultivationPlants.min.js
  - CultivationLog.min.js
  - popup.min.js
- css/
  - CultiLog.css
  - popup.css
- img/
  - pluspat1.png
  - direction1.png

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

ファイルとフォルダが下図の構成になっていることを確認する
- 任意フォルダ/
  - index.html（次項で作成、任意ファイル名）
  - js/
    - CultivationPlan.min.js
WEBページ（HTMLファイル）を作成する（例：`index.html`ファイル）
- 描画領域としてcanvasを作成
  <canvas id="CultiPlan"></canvas>
- 栽培計画クラス`CultivationPlan.min.js`を読み込む
  <script src="js/CultivationPlan.min.js"></script>
- 菜園カレンダーを作成する処理を記述
  1. 栽培計画オブジェクトを生成（canvasのidを引数に指定）
    const plan = new CultivationPlan("CultiPlan");
  2. 作業（作業名、色）を定義
    plan.add_action('種蒔き', 'brown');
  3. データ準備
    const dataset = [ { 'name':'ニラ', '種蒔き':'3b-4a', '植え付け':'6b-7a' }, （省略） ];
    - 作物ごとに作業期間を「作業名:期間」の形で記載する
    - 期間は、開始月-終了月の形で記載し、末尾にa（上旬）,b（中旬）,c（下旬）を付加できる
  4. 描画
    window.addEventListener('load', function() { plan.draw(dataset); });
- 見栄え調整（オプション設定）については「菜園カレンダーの作成例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ファイル）はテキストエディタ（メモ帳など）で作成することができます
作成したWEBページ（例：`index.html`ファイル）をWEBブラウザで表示する

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

表示

HTMLファイル

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

表示

HTMLファイル

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

ファイルとフォルダが下図の構成になっていることを確認する
- 任意フォルダ/
  - index.html（次項で作成、任意ファイル名）
  - js/
    - CultivationMap.min.js
    - CultivationPlants.min.js
  - img/
    - pluspat1.png
    - direction1.png
WEBページ（HTMLファイル）を作成する（例：`index.html`ファイル）
- 描画領域としてcanvasを作成
  <canvas id="CultiMap" width="229" height="229"></canvas>
- 栽培植物クラス`CultivationPlants.min.js`を読み込む（栽培植物クラスを利用する場合）
  <script src="js/CultivationPlants.min.js"></script>
- 栽培地図クラス`CultivationMap.min.js`を読み込む
  <script src="js/CultivationMap.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ファイル）はテキストエディタ（メモ帳など）で作成することができます
作成したWEBページ（例：`index.html`ファイル）をWEBブラウザで表示する

菜園マップの作成例1

表示

HTMLファイル

菜園マップの作成例2

表示

HTMLファイル

栽培記録を作成する方法

ファイルとフォルダが下図の構成になっていることを確認する
- 任意フォルダ/
  - index.html（次項で作成、任意ファイル名）
  - js/
    - CultivationLog.min.js
    - popup.min.js
  - css/
    - CultiLog.css
    - popup.css
  - img/
WEBページ（HTMLファイル）を作成する（例：`index.html`ファイル）
- 栽培記録の体裁を整えるスタイルシートを読み込む
  <link rel="stylesheet" href="css/CultiLog.css">
- 栽培記録用のdiv領域を作成
  <div id="CultiLog"></div>
- 栽培記録クラス`CultivationLog.min.js`を読み込む
  <script src="js/CultivationLog.min.js"></script>
- 栽培記録を作成する処理を記述
  1. 栽培記録オブジェクトを生成（栽培記録用divのidを引数に指定）
    const log = new CultivationLog("CultiLog");
  2. 作物と日付ごとに栽培記録を追加
    log.add_log('玉ねぎ', '2025/06/07', 'img/a250607t.jpg', '収穫');
  3. 栽培記録用div領域に栽培記録を設定
    log.set_logs();
- ポップアップライブラリを読み込む
  <script src="js/popup.min.js"></script>
- 栽培記録を追加する方法は「栽培記録の作成例2」をご確認ください
  log.add_log('玉ねぎ', '2025/06/07', 'img/a250607t.jpg', '収穫'); log.add_log('ニラ', '2024/04/26', 'img/a240426nr.jpg', '2年目春'); log.add_log('ニラ', '2025/01/25', 'img/a250113nr1.jpg, img/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'); // 周囲余白指定（上、右、下、左）
- `CultiLog.css`を参考にstyleタグでスタイル指定して体裁を整えることもできます
- WEBページ（HTMLファイル）はテキストエディタ（メモ帳など）で作成することができます
作成したWEBページ（例：`index.html`ファイル）をWEBブラウザで表示する

栽培記録の作成例1

表示

HTMLファイル

栽培記録の作成例2

表示

HTMLファイル

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

今後について

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

連絡先: moriuchi@ymail.ne.jp; 森内