【プログラミングスクール級】(情報II)掲示板システムを作ってみた

eyecatch4736

突然ですが

コトゼニ
コトゼニ

高校で学ぶ情報Ⅱの内容ってすごいんです!

2022年度から高校で必修化された「情報1」科。そのさらに発展内容を学ぶ「情報Ⅱ」では、より専門的かつ最新の項目が掲載されています。

  • 大人に聞いても「知らない」ような知識
  • 近年の技術の進化によってビジネスシーンでも聞くようになった語句

といったものがふんだんに盛り込まれており、

その難しさは、国家資格である「ITパスポート」(ITに関する基礎知識を問う試験)よりも少し上のレベルです。

▶︎こちらの記事でも詳しく紹介しています。

eyecatch-855【教科書がすごい】大人も「おお!」と驚愕する情報IIの内容

高校の「情報」の授業では、手を動かしながら学ぶ、ハンズオン形式の実技に充てる時間が多いですが、実際に「情報II」の実技・実践編ではどのようなものにトライするのでしょうか。

そこで今回は筆者が「情報II」の実技・実践項目に掲載されいてる「掲示板システム」を実際に作成してみました。

保護者
保護者

いまでは高校でここまで実践的なことを学ぶんだ…

と知るきっかけになれば嬉しいです。ぜひ最後まで読んでみてください!

今回の記事で紹介する実践項目は教科書「情報II」(東京書籍)に掲載されています。

東京書籍情報II

【実践編】掲示板システムとは

img4736-2

掲示板システムとは、

  • ユーザーが名前と書き込みたい内容を入力し「投稿」ボタンを押すと、別画面で投稿内容が表示される
  • これまで投稿された内容も一覧表示される

このような機能を持ったWebアプリケーションのことです。

クライアント・サーバーシステムに則って設計しています。

コトゼニ
コトゼニ

プログラミングスクールでもWebアプリを作成するので、授業がもはやそのレベルに近いとも言えます

なお、今回の実践では

  • Pythonの標準ライブラリ
  • ローカルWebサーバ

を使ってクライアント側とサーバー側を体験することが目的となっています。

掲示板システム作成の具体的な手順

img4736

ここからは具体的な手順を紹介します。

具体的なコードを掲載することは教科書内容を掲載することになるのでできないのが悔しいところです。

今回の実践におけるWebアプリケーションを実行するまでの手順はわずか4つです。

【Step1】クライアント側(投稿画面)をHTMLファイルで作成

まずは、投稿画面をHTMLで作成します。

投稿画面では

  • <form>タグ
  • <input>タグ (投稿者名を入力するためのテキストボックス)
  • <textarea>タグ (投稿内容を入力するためのテキストボックス)

を使って実装します。

img47363

<form>タグに含まれる「投稿」ボタンを押すと、後述するPythonのプログラムファイルが呼び出される仕組みになっています。

【Step2】サーバー側(掲示板画面)をPythonファイルで作成

2つ目のステップではPythonでプログラムファイルを作成します。

このプログラムでは

  • HTML(投稿画面)の<form>エリアで入力された内容を取得
  • 取得した内容をテキストファイルに保存
  • その後、テキストファイルの内容を読み込みブラウザに表示させる

という処理を実行しています。

プログラムのコード記述量はおよそ20行ほどです。

コトゼニ
コトゼニ

プログラムコードは教科書に載っているので写すことで学んでいきます

【Step3】Pythonの標準ライブラリを使ってローカルWebサーバーを起動

必要なファイルはStep2までで完成していますので、ここからは実行環境を整えます。

アプリケーションを動かすにはローカルWebサーバーが必要となりますので、コマンドプロンプトから起動させます。

コトゼニ
コトゼニ

コマンドプロンプトで入力するコマンドも載っているので安心ですね

【Step4】実行

Step3でローカルWebサーバーを起動させたら、実際にStep1で作成したHTMLファイルをブラウザで表示させます。

ブラウザに表示されたテキストボックスに任意に入力し、投稿ボタンを押すと、遷移後の画面に投稿した内容が表示されていることを確認します。

コトゼニ
コトゼニ

これで完成です。

完成したWebアプリケーションの挙動はこんな感じです。

ユーザー画面の装飾面は無機質というか味気ない感じではありますが、アプリケーションの機能としてはしっかりしたものになっています。

まとめ

情報IIで学ぶ実践内容のひとつ「掲示板システム」を筆者が実際に作成してみました。

Webアプリケーションはプログラミングスクールでも学ぶので、もはや「情報II」の授業はプログラミングスクールのレベルに近いと言えるかもしれません。

情報IIでは

  • X-Tech
  • ブロックチェーン
  • IaaS PaaS など

といった最新の語句を学ぶことはもちろん、実践編では他にも

  • パワーポイントでプロジェクションマッピング
  • ARでの顔検出

といったこともラインナップされています。

プログラミング内容の本格度で言ったら国家資格「ITパスポート」よりも少し上のレベル。

これらのことを学んで高校生がこれから社会に出てくるのだと考えれば大人もアプデしないと負けてしまいますね…。

最後まで読んでいただきありがとうございました。

この記事が少しでも参考になれば幸いです。

それではまたここで会いましょう!

ブログランキング・にほんブログ村へにほんブログ村

ブログ村に参加中です。上のバナーをクリックいただくだけで当ブログにポイントが入ります。いつも応援クリックありがとうございます。

Twitter

Twitter やってます。

新着記事のお知らせをしていますのでぜひフォローしてください!

人気の記事

この記事を読んだ人はこちらの記事も読んでいます。

▶︎「【塾長分析】大学入学共通テスト2025「情報」まとめ【難易度・対策】

共通テスト情報・対策共通テスト「情報」対策に必要なことは?塾講師が解説!勉強法と参考書

▶︎「【最新】(情報1)共通テスト試作問題 難易度と3つの対策

eyecatch-2491【最新】(情報1)共通テスト試作問題 難易度と3つの対策

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA