プログラミング学習

作成中のため、しばらくお待ちください。執筆中のためおかしな文章があるかもしれませんが、ご了承下さい。

はじめてのプログラミング　WEB掲示板編

はじめに

この講習は、「まったくプログラミングの知識がない」、「PCが手元に１台ある」ような方を想定し、はじめてのプログラムでWEB掲示板をつくることを目的としています。＜対象＞「とりあえずプログラムがどんなもんか知りたい」という方や、「WEB掲示板を自分で作ってみたい」という方におススメですし、「プログラムで、手に職をつけたい」人の第一歩にもおすすめです。＜カリキュラム＞すべて無料で開始できる講習となっています。これから1～10までの項目を行ってもらいますが、基本的に読むだけなら１項目１時間以内に終わります。今までの受講者の、平均完了時間は５時間程度です。あなたは5時間程度の頑張りで、ゼロからWEB掲示板を作れる程度のプログラム技術を学ぶことができます。あなたの「プログラミングしたい」という気持ちが覚める前に、あなたの人生の中の５時間を捻出し、あきらめずに一歩踏み出し、最後まで実施してみましょう。少し難しいと思っても、頑張って最後までやり通せれば、それがもしかしたら手に職をつける一歩になれるかもしれません。ITエンジニアは、これからの時代で飯のくいっぱぐれがない職業No1です。これから先、ITエンジニアにならなくとも、WEBサイトや、WEBサービスの仕組みを理解することは、IT情報社会を過ごしていくうえで、裕福な知識／経験になることでしょう。

１・プログラミングとは／プログラム設計をしよう

ここでいう「プログラミング」とはコンピュータープログラムを書くことを指します。ここでプログラムは、「キーボードを押すと、文字を打ち込める」ような、入力→出力の間にある＜計算処理＞のことを言います。単純な例をいくつか書くと、１００→１１０　となる消費税計算プログラムや、2020 →?令和2　のような西暦と和暦の変換プログラムなど、何か入力したら、一定のルールによる出力があるものがプログラムです。これからWEB掲示板を作ることになるので、いったいどのようなプログラムが必要になるか考えてみましょう。＜スレッド作成機能＞入力・名前、テキストを送信出力・「入力内容を保存しました」 or 「エラーです」計算内容・入力内容がエラーの場合、エラー画面を出す・エラーがない場合、保存処理をし、完了画面を出す＜コメント機能＞入力・スレッド番号、名前、テキストを送信出力・「入力内容を保存しました」 or 「エラーです」計算内容・入力内容がエラーの場合、エラー画面を出す・エラーがない場合、保存処理をし、完了画面を出す＜読み込み機能＞入力・①入力なし・②ページ番号（p）・③タイトル番号(t)・④タイトル番号(t)＆ページ番号(p) 出力・①登録記事の新しい順１～５個のスレッドを出力・①登録記事の新しい順６～１０個のスレッドを出力・③そのスレッドのコメントを１～１０まで表示・④そのスレッドのコメントの１１～２０まで表示計算内容・①②③④が表示されるようなデータの抽出処理ちなみにまだプログラムを実際に書いてはいませんが、このように機能を決めることを「プログラム設計」といいます。スレッド機能、コメント機能、読み込み機能を作る！を考えることを基本設計、スレッド機能内の入力と、出力と、計算内容を考えることを詳細設計といいます。１つのシステム／プロジェクトを作成する段階を「WEB掲示板を作りたい」が要件定義、「スレッド機能、コメント機能、読み込み機能を作る」を基本設計、「スレッド機能内の入力と、出力と、計算内容を考える」、詳細設計、「開発工程（プログラミング）」を経て「プログラムリリース」や「サービスイン」をもってプロジェクトが完了します。回りくどいと思うかもしれませんが、規模にもよりますが個人が作るプログラムの場合は、開発工程だけでもOKですが、複数人で作ったり、規模が大きいものを作るときには、基本設計などがないと、

２・WEBプログラムの仕組みについて／WEBの仕組み理解とレンタルサーバー

WEBプログラムについて説明をしていきます。まず、WEB画面を表示するツールのことを「ブラウザ」といいます。ブラウザは、URLを入力することにより、対応する出力結果を表示するプログラムです。「Edge」「Google Chrome」「Firefox」などがあります。ブラウザの入力と出力の間にある計算は、サーバーというインターネット上にある２４時間稼働することが前提のコンピューターが行います。サーバーには複数のサービスがインストールされており、今回はPHPが使えるWEBサーバーの準備が必要です。 WEB画面上での入力内容をサーバーへ送信した際に、サーバー上へ保存したり、複雑な計算を行った後に、ブラウザ上、つまり入力者のWEB画面上に計算結果が返ってきます。＜図＞一般的なWEBプログラムの流れはこのような感じです。サーバーをインターネット上ではなく、自分のPCに作ることもできますが、これだと自分のPC上からしか利用することができません。「自分のPC上から利用できれば良い」という場合はこれでもよいですが、今回はインターネット上で複数の方から入力／出力されることを前提としたWEB掲示板を実装していきます。 <サーバーレンタル／環境作成> ※２週間無料プランとなりますので、御注意下さい

３．テキストファイルの作り方／拡張子とファイル内容について

「えっ、メモ帳のことでしょ？」と思うかもしれませんが、それでは半分あたりですが、半分はずれです。パソコンでファイルを開くとき、実は「拡張子」という隠し要素をパソコンは参照して、その「ファイル」をどの「プログラム」で開くか決めています。ファイル（拡張子）→ダブルクリック（PC:この拡張子は、このプログラムで開く約束がされてるな）→メモ帳起動、テキストファイルの中身が表示される多くのWindowsPCの場合は「テキストファイル」を「メモ帳」で開く設定にしているので、そのような認識をしている方が多いです。テキストファイルは、内容がすべて文字で書かれています。ただし、一定のルールをもって文字が書いてあることで、プログラム実行する指令を出したり、設定ファイルとして機能したり、できます。これから先の項目で、HTMLファイルと、PHPファイルを作成していきますが、それらの両方とも「テキストファイル」ですが「プログラムコードが書かれたテキストファイル」です。テキストファイルのメジャーな拡張子と、デフォルトで開くプログラムは以下の通りです。.txt(メモ帳).html(ブラウザ).php(未指定) ちなみに画像ファイルや、動画ファイルなどはバイナリファイルと言われ、メモ帳で開いても謎の文様がちらばっており人間には識別できないことが多いです。それらは専用の編集用ソフトで開くことができます。画像ファイルなら「ペイント」で開くことが可能です。画像ファイルには.bmp(ビットマップ形式画像).gif(ジフ形式画像).png(ピング形式画像) .jpg(ジェイペグ形式画像)などがあります。さて、ここから実際にあなたのパソコンでこれから作業をするための設定変更をしていきます。やることは、以下３点です。・隠し要素の、拡張子が、見れたり変えたりできるようにする。・htmlファイルをメモ帳で開くようにする・phpファイルをメモ帳で開くようにする

４・HTMLについて(Javascript、CSS）／ブラウザでHTMLを表示する

ブラウザでWEBページを表示するのにはHTMLというプログラムを書きます。HTMLはテキストファイルです。 HTMLは、略さずに書くと、ハイパー・テキスト・マークアップ・ランゲージ　です。テキストは文章のことで、ここでは１個１個のWEBページのことです。ハイパーとは、１個１個のテキストが、WEB上でつながることで情報が連鎖的につながり、すごい情報になるという意味で、ハイパーテキストと名づけられました。３番目の単語、マークアップですが、その「ハイパーテキスト」は、WEB上では青字に下線が装飾されていることがお約束となっており、そのような装飾のこと全体的に「マークアップ」といいます。ハイパーテキストは馴染みのある言葉では（リンク）といい、リンクのようなマークアップには、文字を大きくするだけのマークアップや、文字を斜めにするマークアップなどもあります。４番目の単語のランゲージは、そのまま言語です。このHTMLは、サーバーで計算処理を行い結果のテキストを、ブラウザで受け取り人間がみやすいように加工されたものが表示されます。実際にサーバー上ではこれは赤字ですのようなテキストを渡しており、これをブラウザを介してみるとこれは赤字ですと表示されます。これがHTMLであり、マークアップ言語です。マークアップとは装飾のことで、特定の記号で囲った中身が、特定の装飾状態で表示されます。次項目より、HTMLを使い、設計したWEBページを表示する、プログラミングしていくことになります。さきほど作成したサーバーへ、以下の代表的なマークアップをしたファイルをアップして、ブラウザで表示してみましょう。

５・FORMについて／サーバーへ値を送信する

HTMLで、情報を送るマークアップのことを、FORMと言います。また、マークアップのことを「〇〇タグ」と呼ぶのが一般的なので、「FORMタグ」として進めていきます。今回はスレッド作成機能のページを作ります。ーーーーーーーーーーーーーーーーーーーーーーーーーー＜スレッド作成機能＞入力・名前、テキストを送信出力・「入力内容を保存しました」 or 「エラーです」計算内容・入力内容がエラーの場合、エラー画面を出す・エラーがない場合、保存処理をし、完了画面を出すーーーーーーーーーーーーーーーーーーーーーーーーーー最初に作りを説明しますと、最終的には情報を送りたいエリアをFORMタグで囲みます。その中に、「名前」と「テキスト」と「送信ボタン」を作ります。 WEB掲示板　スレッド作成ページ

これでブラウザのHTMLから、サーバーへデータを渡すことができるようになりました。

６．PHPについて／サーバーで値を受け取る

ブラウザでURLを打ち込み、サーバーは計算結果をHTMLで返し、ブラウザはそれを人間が見やすい表示に変えてくれます。サーバーのところでは（計算結果）と書きましたが、では実際の計算処理についてはどう行なっているのでしょうか。これからその話をしていきます。サーバーのHTMLを返す機能（サービス）のことを、WEBサーバー（WEBサービス）といいます。WEBサーバーにもいくつかの種類がありますが、今回はPHPを選びます。これはレンタルサーバーで採用率が高く、今なおアップデートが盛んな言語だからです。 FORMタグで送信した2つの値をPHPでテキストファイルに保存しましょう。基本的に多くのコンピュータ言語は、テキストファイルでプログラムします。サーバーはそれを読み取り、じっさいのしょりを行います。ではHTMLの時と、同じようにテキストファイルを、作っていきましょう。 PHPでは、受け取った値は、$_POST[〇〇]と書きます。 ';print $_POST['inputcomment'];?> あなたがFORMタグで送信した値が、WEBサーバー上で「表示する」という処理をされて、ブラウザを介して「画面へ表示する」ことができました。今回は「表示する」という命令を”print"という命令をしていますが、本来は、・出力・計算内容を実施するような設計になっておりますので、それぞれを次項目にて実装していきます。

7・PHP計算処理実装、データ保存／データ設計について

8・CSVファイル読み込み機能／読み込み機能の実装

9・使いやすくするために

便利機能：・Cookieにinputnameを保存してみよう　次のスレッドを作るときに使えるようにする並び替えや統計が簡単になるDatabase(DB)を使ってみよう・DBについて

アンケート

※最後にアンケート　ブラウザ、セキュリティ、サーバー、DB、SEO、広告　そして良ければ受講にかかった時間を教えて下さい。