MENU
  1. ホーム
  2. Webアプリ
  3.  【家庭菜園】りんご栽培手順と質問回答の回転カード

 【家庭菜園】りんご栽培手順と質問回答の回転カード

Webアプリ
>> TicTocに動画をアップしています。
リンクはこちら(ﾌﾟﾛｸﾞﾗﾐﾝｸﾞ関係)

りんごは、甘酸っぱい味とシャキシャキした食感が魅力的な果物です。家庭菜園は難しそうなイメージでですが、鉢植えでも育てられる“品種”も登場しており、庭がなくても挑戦できます。この記事では、りんごの栽培手順や育てるコツをご紹介します。ご覧いただいた皆さまの参考になれば幸いです。

ここで、まずは質問です。

作成： Calc Page（CodePen）

上記のWebアプリケーション（質問回答の回転カード）のプログラミングコード等もご紹介していますので、ご興味のある方のご参考になればと思います。

目次

質問回答の解説

質問回答の解説

りんごは“日光をしっかり浴びた実ほど甘くなる”性質があります。しかし、葉や枝が混み合うと光が十分に入らず、果実の色づきや甘さが低下してしまいます。さらに、そのまま実をたくさん残すと栄養が行き渡らず、小さく密度の低い実しか育ちません。そこで必要なのが 摘果（てきか） です。

摘果は、開花後、実が直径2〜3cmになった頃に開始します。 1つの花房に1個を目安として、枝の負担を軽して、風通しと日当たりを確保できるように摘果をていねいに行うことで、残した果実がしっかり肥大し、糖度の高いりんごになります。

りんごの栽培手順

STEP
苗木の植え付け（11〜3月）

根を傷めないよう浅めに植え付けてます。支柱を立てて風で揺れないように固定します。日当たりの良い場所に植えるのが最重要ポイントです。

STEP
新芽の伸びる時期（4〜5月）

枝が勢いよく伸び始める時期です。枝同士が重なると光が入らないため、混み合う枝や立ちすぎる枝は早めに剪定して樹形を整えます。

STEP
開花〜幼果期（4〜6月）

白い花が咲き、花が落ちると小さな実がつきます。直径2〜3cm程度になったら 摘果の最重要タイミング です。1つの花房に1つだけ残し、ほかは取り除きます。

STEP
肥大期（6〜9月）

実が一気に大きくなる時期です。水切れすると実が硬くなったり、変形する可能性があるため、土の表面が乾いたらたっぷり与えます。枝がしなるほど実がついている場合は、枝折れ防止の支柱を添えましょう。

収穫の目安と保管方法

一般的に、りんごは 9〜11月 に収穫期を迎えます。果皮がしっかり色づき、軽く持ち上げてひねると“ポキッ”と外れるようになれば収穫サインです。

収穫後は、風通しの良い涼しい場所で保存し、乾燥を防ぐためポリ袋に入れ、口を軽く閉じて保管すると安心です。品種によっては冷蔵保存で1〜2ヶ月日持ちして甘さを逃さず長く楽しめます。

プログラミングコード

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表裏回転カード</title>
</head>
<body>

  <div class="card">
    <img src="question.jpg" alt="質問画像" class="front">
    <img src="answer.jpg" alt="回答画像" class="back">
    <button id="flipButton">回答へ</button>
  </div>

</body>
</html>

Sass（CSS）


$blue: #007acc;
$transition: 0.6s;

@mixin card-side {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  position: absolute;
  backface-visibility: hidden;
  transition: transform $transition;
}

.card {
  position: relative;
  width: 250px;
  height: 350px;
  margin: auto;
  perspective: 1000px;

  img {
    @include card-side;
  }

  .back {
    transform: rotateY(180deg);
  }

  &.flipped {
    .front {
      transform: rotateY(180deg);
    }

    .back {
      transform: rotateY(0);
    }
  }

  #flipButton {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    border: none;
    background-color: $blue;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;

    &:hover {
      background-color: darken($blue, 10%);
    }
  }
}

JavaScript


document.getElementById('flipButton').addEventListener('click', () => {
  const card = document.querySelector('.card');
  const button = document.getElementById('flipButton');
  card.classList.toggle('flipped');
  button.textContent = card.classList.contains('flipped') ? '問題へ' : '回答へ';
});

プログラミングコードの解説

HTML

htmlタグ内の解説

<!DOCTYPE html>

このタグは、htmlの書き始めに記載するプログラミングの宣言文です。ブラウザが正しくhtmlを解釈するために記載します。

<html lang=”ja”>

htmlの開始タグです。lang=”ja”は「日本語のページ」であることを示しています。

</html>

htmlの閉じタグです。<html>タグとセットで使います。

headタグ内の解説

<head>

headの開始タグです。<head>タグには、ページの見た目には表示されない情報（メタデータ）を記載します。

<meta charset=”UTF-8″>

文字フォーマットを指定するタグです。UTF-8は、文字フォーマットの種類の一つで日本語にも対応しており、これをしていすることで文字化けを防ぎます。

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

スマホやタブレットでも正しく表示するためのタグです。「画面幅に合わせて1倍の倍率で表示する」という意味になります。

<title>表裏回転カード</title>

タイトルを記載するタグです。ブラウザのタブに表示され、検索結果のタイトルとしても使われます。

</head>

headの閉じタグです。<head>タグとセットで使います。

bodyタグ内の解説

<body>

bodyの開始タグです。<body>タグの中が、実際にブラウザに表示する内容となります。

  <div class=”card”>

<div>タグの開始〜閉じタグ内を一体化した1つのブロック（箱）が出来上がります。class=”card”とすることで、CSSでこのブロック全体スタイルの設定や、JavaScriptでこのブロック内のタグを特定するなど、後処理の管理が容易になります。

<img src=”question.jpg” alt=”質問画像” class=”front”>

画像を読み込んで表示する<img>タグです。<img>タグは画像を表示するための要素です。

  • src=”question.jpg”：画像ファイルのパス
  • alt=”質問画像”：画像が表示されないときの代替テキスト
  • class=”front” ：ここでは、表面のカードと裏面のカードを区別するためのクラス名
<img src=”answer.jpg” alt=”回答画像” class=”back”>

画像を読み込んで表示する<img>タグです。<img>タグは画像を表示するための要素です。

  • src=”answer.jpg”：画像ファイルのパス
  • alt=”回答画像”：画像が表示されないときの代替テキスト
  • class=”back” ：ここでは、表面のカードと裏面のカードを区別するためのクラス名

この2枚の画像が、このあとJavaScriptやCSSを用いて「表裏回転カード」のアニメーションを作る素材になります。

<button id=”flipButton”>回答へ</button>

「表裏回転カード」のアニメーションを実行するボタンの要素です。ユーザーがこのボタンをクリックするとカードの表面と裏面が切り替わります。

id=”flipButton”をつけておくことで、JavaScriptでこのボタンを指定してカードの回転を制御できます。

  </div>

divの閉じタグです。<div>タグとセットで使います。

  </body>

bodyの閉じタグです。<body>タグとセットで使います。

Sass（CSS）

$変数名：変数の設定

Sassでは、$変数名で色や数値を登録できます。あとから何度でも使えるため、デザインが管理しやすくなります。ここでは、以下のように使い分けを行っています。

変数内容
$blueボタンの色
$transitionアニメーションの時間（0.6秒）

@mixin card-side：共通スタイル

@mixin は「スタイルのひな型（共通パターン）」を定義する機能です。複数の要素で同じスタイルを使いたいときに便利です。

  • width, height：カードサイズに合わせた幅と高さの設定です。
  • border-radius: 10px：角を丸くして柔らかい印象にします。
  • position: absolute：カード内で重ねて配置（表と裏を重ねるため）します。
  • backface-visibility: hidden：裏側が透けて見えないようにする設定します。
  • transition：回転アニメーションをなめらかにするために設定します。

また、「@include card-side;」 と書くことで、この設定を再利用できます。

.card：カード全体の枠

カードの外枠を以下のように定義しています。

プロパティ内容
position: relative子要素を基準に配置
width / heightカードのサイズ設定
margin: autoページ中央に配置
perspective: 1000px立体感（視点距離）の設定

img要素：表と裏の画像設定

先ほどの@mixin card-sideを呼び出して、画像両面に共通のスタイルを適用しています。これにより、カードの表(.front)と裏(.back)がぴったり重なります。

.back：裏面の初期位置

rotateY(180deg)で、裏面の画像を横方向に180度回転させて裏向きにしておきます。これにより、最初は表面だけが見える状態になります。

&.flipped：クリック後の回転動作

この部分は、JavaScriptで .card に flipped クラスが追加されたときの動きを指定しています。これにより、クリック時に「表面と裏面が切り替わる」アニメーションが設定できます。

  • .front（表面） → 180度回転して裏向きになる
  • .back（裏面） → 正面を向いて表示される

#flipButton：ボタンのデザイン

プロパティ説明
position: absoluteカードの下中央に固定配置
transform: translateX(-50%)ボタンを正確に中央揃え
padding内側の余白（クリックしやすく）
background-color: $blue青を基調にしたテーマカラー
border-radius: 5px角丸でやわらかい印象
cursor: pointerマウスを重ねるとポインター表示
transitionホバー時の色変化をなめらかに
&:hoverホバー時に色を10％暗く（darken関数）

JavaScript

document.getElementById …

HTMLで作成したボタンをクリックすると「表裏回転カード」の表面と裏面が切り替わるアニメーションを作りたいので、この切り替えボタンを取得していきます。

document は「今表示されているHTML全体）」、getElementById(‘flipButton’) は「IDが flipButton の要素を取得する」という意味になります。

.addEventListener …

先ほど取得した切り替えボタンにイベントを与えます。具体的には、「クリックされたときに { … }内の処理を実行してください」という命令文を作成していきます。

addEventListener は「イベントを監視する」ための関数で、ここでは「クリック（click）」イベントを指定しています。

const card = document.querySelector(‘.card’);

「クリック（click）」イベントの命令文作成前の準備を行います。まずは、カードの状態を切り替えるための変数 cardを作成します。

document.querySelector(‘.card’) は「class属性が card の要素を選ぶ」という意味です。これを変数 card に格納します。

const button = document.getElementById(‘flipButton’);

次に、ボタンに記載されているテキストを変更するために、変数buttonを作成します。

document.getElementById(‘flipButton’)は先ほどと同じく「class属性が flipButton の要素を選ぶ」という意味です。これを変数 button に格納します。

card.classList.toggle(‘flipped’);

先ほど作成した変数cardのクラス名を操作していきます。「.classList 」は要素に付いているクラス名の一覧を操作するためのプロパティ、「.toggle(‘flipped’) 」は、「flippedクラスを持っていなければ追加、持っていれば削除」という動きをします。

つまり、クリックのたびにカードに flipped クラスが付いたり消えたりします。前述の通り、CSS側でこの flipped クラスに「回転アニメーション」を設定し、カードの表面と裏面を切り替えます。

button.textContent = …

ここではボタンの表示文字を切り替えています。「card.classList.contains(‘flipped’)」は、カードが現在「flipped」状態（裏面）かどうかを確認を示しています。「? ‘問題へ’ : ‘回答へ’」は、もし裏面なら「問題へ」、表面なら「回答へ」と表示を切り替える条件式です。

  • 裏面を表示中 → 「問題へ」ボタンに変わる
  • 表面を表示中 → 「回答へ」ボタンに変わる

Webアプリケーションの開発（Django/Python）

プロジェクトの制作

setting.py

プロジェクト全体に関する設定ファイルです。アプリを INSTALLED_APPS に追加し、テンプレートディレクトリ（例：BASE_DIR / ‘templates’）および静的ファイルディレクトリ（例：BASE_DIR / ‘static’）を登録します。


INSTALLED_APPS = [
  'django.contrib.admin',
  …,
  'myApp.apps.MyAppConfig',
]
TEMPLATES = [
  {
    …,
    'DIRS': [ BASE_DIR / 'templates' ],
    …,
  },
]
STATIC_URL = '/static/'
STATICFILES_DIRS = [ BASE_DIR / 'static' ]

urls.py

プロジェクト全体の URL ルーティング設定です。urlpatterns にアプリ側 URL を include() で紐づけます。


from django.urls import path, include
urlpatterns = [
  path('admin/', admin.site.urls),
  path('', include('myApp.urls')),
]

templates

HTML テンプレートを格納するディレクトリ（例：templates/）を作成し、共通レイアウト（base.html）を定義します。

各ページ（ホーム・登録・編集・削除）で {% extends ‘base.html’ %} を使い共通部分を継承します。

static/css

静的ファイル（CSS／JavaScript／画像など）を格納するディレクトリです。

メインの Sass／CSS ファイルをこの中に配置し、テンプレート内で {% static ‘css/style.css’ %} などで読み込みます。

アプリの制作

urls.py


アプリ固有の URL を設定します。CRUD 操作用の path() を定義します。

   
from django.urls import path
from . import views

urlpatterns = [
  path('', views.HomeView.as_view(), name='home'),
  path('create/', views.CreateView.as_view(), name='create'),
  path('/detail/', views.DetailView.as_view(), name='detail'),
  path('/update/', views.UpdateView.as_view(), name='update'),
  path('/delete/', views.DeleteView.as_view(), name='delete'),
]

views.py

各 URL に対応するビュー（画面表示・処理）を定義します。CreateView・ListView・DetailView・UpdateView・DeleteView といった Django の汎用クラスを使うことが多いです。

models.py

データベースのモデルを定義します。例えばタイトルと内容をもつメモ帳なら：

   
class Memo(models.Model):
  title = models.CharField(max_length=100)
  description = models.TextField()

  def __str__(self):
    return self.title

templates

アプリ側の HTML テンプレートを app/templates/ 以下に配置します。各テンプレートには、先に作成した base.html を継承し {% block content %} の中に個別内容を書きます。

>> パスワード付き(保護中の記事)は
noteにて概要閲覧ができます。
詳細はこちら(noteへ移動します)
Webアプリ
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

目次