2018-10-31

増田プログラマー養成講座 その14 Webアプリの試作品作成

前回は、SQL文法を学びました。

今回は、データベースを使ったWebアプリ制作を通じて、SQLの使い方を確認してみましょう。

 

Webアプリとは?

WebブラウザーGoogle Chromeなど)で動作するアプリのこと。

ウェブアプリケーションWeb application)は、インターネット(もしくはイントラネット)などのネットワークを介して使用するアプリケーションソフトウェアである

多くの場合、これらのアプリケーションは、Webブラウザ上で動作するプログラミング言語(たとえばJavaScript)によるプログラムWebサーバ側のプログラム協調することによって動作し、ユーザはそれをWebブラウザ上で使用する。

 

準備

Windowsパソコンを使ってたら、「XAMPP」を使ってすぐにWebアプリを試作できる。

以前の講座(その6、その9)を参考にして、XAMPPCodeIgniterを用意しておこう。

 

Webアプリ制作の流れ

最近アプリの作り方は、「デザインスプリント」と呼ばれる方法流行ってます。本やネット情報がたくさんあるので調べてみよう。

 

ざっくりと、以下のような流れです。

  1. アイデア企画)を出す。
  2. アイデアを基に、ペーパープロトタイプ(紙の試作品)を作る。=アナログの試作品ノートなどにアプリの完成予想図、画面などを描く。
  3. ペーパープロトタイプを基に、動くモック(ハリボテ)を作る。=デジタルの試作品
  4. モック画面を基に、実際のプログラム作成して、アプリを完成させる。
  5. 完成したアプリを改良していく。

それでは順番にやってみよう。

 

アイデア

以前にデータベース練習をしたとき、「後で簡単チャット(おしゃべり)ができるWebアプリ作ってみたいと思う。」と言ったので、今回のアイデアは「チャットを作る」にしよう。

 

ペーパープロトタイプ

チャット必要な画面は3つある。

  1. トップページの画面(新規投稿投稿一覧がある)
  2. 投稿更新する画面
  3. 投稿を削除する画面

ノートなどに描いて画面をデザインしてみよう。

 

モック

Webページを作るには、HTMLCSS知識必要だ。HTMLCSSを使ったことがなければ、本やネット情報勉強してみよう。

今回はCSSを使わずに、HTMLだけでシンプルWebページを作ってみよう。(練習から余計なもの無駄を省きたい。)

 

Webページ制作ツール

ブラウザーテキストエディター(またはIDE)が必要です。

特にこだわりがなければ、Microsoftの「Visual Studio Code」という無料IDE統合開発環境)を使ってみよう。

インストール方法や使い方、メニュー日本語化のやり方は、検索して調べてみよう。

 

フォルダを作る。

デスクトップに「mock」というフォルダを作る。

 

ファイルを作る。

「mock」フォルダの中に

  1. index.html」 (トップページの画面)
  2. 「edit.html」 (投稿更新する画面)
  3. delete.html」(投稿を削除する画面)

という3つのファイルを作る。

テキストエディターで保存するとき文字コードを「UTF-8」にしておく。

 

ファイルの中身を編集する。

index.htmlファイルエディターやIDEで開き、以下のような内容に編集して保存します。(コピペする場合、行頭の字下げ(インデント)の全角スペースを半角スペースに置換して下さい。)

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>新規投稿</h2>

  <form>

   <label>メッセージ</label>

   <input type="text" name="message">

   <button>投稿する</button>

  </form>

  <h2>投稿一覧</h2>

  <table border="1" cellpadding="5" cellspacing="0" bordercolor="#CCCCFF">

   <tr>

    <th>No.</th>

    <th>投稿日時</th>

    <th>メッセージ</th>

    <th>編集</th>

    <th>削除</th>

   </tr>

   <tr>

    <td>3</td>

    <td>2018-10-20 12:34:56</td>

    <td>Webアプリを作ってみる!</td>

    <td><a href="edit.html">編集</a></td>

    <td><a href="delete.html">削除</a></td>

   </tr>

   <tr>

    <td>2</td>

    <td>2018-09-10 22:33:44</td>

    <td>今日からプログラミングを勉強します。</td>

    <td>編集</td>

    <td>削除</td>

   </tr>

   <tr>

    <td>1</td>

    <td>2018-08-01 11:22:33</td>

    <td>こんにちは!</td>

    <td>編集</td>

    <td>削除</td>

   </tr>

  </table>

 </body>

</html>

 

「edit.htmlファイルエディターやIDEで開き、以下のような内容に編集して保存します。(コピペする場合、行頭の字下げ(インデント)の全角スペースを半角スペースに置換して下さい。)

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>編集</h2>

  <p>メッセージを変更して「更新する」ボタンを押してください。</p>

  <form>

   <label>メッセージ</label>

   <input type="text" name="message" value="Webアプリを作ってみる!">

   <button>更新する</button>

  </form>

  <p><a href="index.html">戻る</a></p>

 </body>

</html>

 

delete.htmlファイルエディターやIDEで開き、以下のような内容に編集して保存します。(コピペする場合、行頭の字下げ(インデント)の全角スペースを半角スペースに置換して下さい。)

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>削除</h2>

  <p>以下のメッセージを削除しますか?</p>

  <form>

   <p style="background-color:lightpink">Webアプリを作ってみる!</p>

   <button>削除する</button>

  </form>

  <p><a href="index.html">戻る</a></p>

 </body>

</html>

 

以上でモックWebページ(HTMLファイル)ができました。

Webブラウザーで「index.html」を開いてください。「編集」や「削除」、「戻る」をクリックして、チャットの画面を確認してください。

 

モックを作ってからWebサイトを作る方法

実務では「仕様書」という書類を大量に作る場合もありますが、時間と労力の無駄になっている場合が多々あります。(紙の仕様書はあまり使われる機会がない)

紙の仕様書アナログ)の代わりに、モック仕様書デジタル)として使うと、その後の段階がスムーズになります

どうしても紙でなければ困る場合以外は、モックをそのまま仕様書として使ってみましょう。

 

プロトタイプ作成ツール

モック(動くハリボテ)を作るための便利なツールがいろいろあります

 

 

 

ちょっと長くなったので、モックを基に機能実装プログラミング)するのは次回にしましょう。

 


anond:20181015215004 未経験からプログラマーなんだが全然からない

anond:20181016015826 増田プログラマー養成講座 その1 パソコンの用意

anond:20181016164341 増田プログラマー養成講座 その2 プログラムデータ+処理、プログラム言語の種類

anond:20181016180059 増田プログラマー養成講座 その3 構造プログラミングの基本(順次、反復、分岐

anond:20181016193144 増田プログラマー養成講座 その4 子ども向け教材「Scratch」で構造プログラミングの練習

anond:20181017161003 増田プログラマー養成講座 その5 オブジェクトとは何か?

anond:20181017191404 増田プログラマー養成講座 その6 OOPの種類、PHPの準備

anond:20181019181549 増田プログラマー養成講座 その7 OOPの仕組み(前半)

anond:20181020230044 増田プログラマー養成講座 その8 OOPの仕組み(後半)

anond:20181022232327 増田プログラマー養成講座 その9 MVCフレームワークを使ってみよう

anond:20181023184616 増田プログラマー養成講座 その10 OOP参考書

anond:20181024214133 増田プログラマー養成講座 その11 データベースを使ってみよう

anond:20181026145516 増田プログラマー養成講座 その12 データベース参考書

anond:20181028152656 増田プログラマー養成講座 その13 SQL文法

anond:20181031014212 増田プログラマー養成講座 その14 Webアプリの試作品作成 ←★今ここ★

anond:20181101225335 増田プログラマー養成講座 その15 Webアプリの完成見本

anond:20181024214737 増田プログラマー養成講座 コンテンツ一覧

記事への反応 -
  • anond:20181031014212

    ブログでやればいいのに

  • 増田式プログラマー養成講座 その13 SQLの文法

    前回は、データベースの参考書を見た。 今回は、DBで使うプログラム言語「SQL」の文法を見てみよう。   リレーショナル・データベース(Relational Database、RDB)とは? WikipediaでRDBの説明...

    • 増田式プログラマー養成講座 その12 データベースの参考書

      前回は、MySQLとphpMyAdminを使って、リレーショナル・データベース(RDB)を少し触ってみた。 今回は、RDBの使い方や仕組みについて理解を深めるための資料を探してみよう。   本 本は、...

      • 増田式プログラマー養成講座 その11 データベースを使ってみよう

        前回まで手続型言語の基本(構造化プログラミング、オブジェクト指向プログラミング)を見てきた。 今回から問合型言語のSQLを学び、データベース(DB)を使ってみよう。   データベ...

        • 増田式プログラマー養成講座 その10 OOPの参考書

          前回はオブジェクト指向プログラミング(OOP)の使いどころを学ぶために、MVCフレームワークを使ってみました。(ほんの触りだけ) 今回はOOPの理解を助けるための参考書を探してみま...

          • 増田式プログラマー養成講座 その9 MVCフレームワーク

            前回はオブジェクト指向プログラミング(OOP)で使う様々な仕組みについて学びました。 今回はOOPでWebアプリを作ってみよう!   今日学ぶこと MVCフレームワークとは? PHPのMVCフレ...

            • anond:20181022232327

              PHPのスクリプトを増田に投稿するとき、「&#60;」や「&#62;」をエスケープしないで記事を書いてたら、IPアドレスでアクセス制限がかけられてしまった。 =はてなの他のサービスのWebペー...

              • anond:20181022233535

                今見たら、増田にアクセスできるようになってた。 アクセス制限されても、数時間経ったら自動的に制限が解除されるのかも? Thank you! → はてなの中の人

              • anond:20181024214737

                ブクマありがとうございます。ちょっとバズってたみたいでビックリしました! 増田式プログラマー養成講座 コンテンツ一覧 http://b.hatena.ne.jp/entry/s/anond.hatelabo.jp/20181024214737   アク...

            • anond:20181022232327

              悪いことは言わない Laravel使っとけ

          • 増田式プログラマー養成講座 その8 OOPの仕組み(後半)

            前回に続いて、今回もオブジェクト指向プログラミング(OOP)の基本的な仕組みを見ていこう。   教材は、ドットインストールのPHP入門です。 PHP入門 (全30回) - プログラミングならド...

            • anond:20181020230044

              誰も読んでねえしつまんねえしセンス無いから止めた方がいいぞ

              • anond:20181020230633

                あー、別に全然構わないけど? これはある意味、かつての自分に向けて書いている手紙なんだ。 自分が初心者だったときに、聞きたかった説明を勝手に増田に書いている。 自己満足で...

                • anond:20181020231617

                  受け取り手のことを考えずに 誰にも求められてないことをベラベラ話すのがまさにキモオタの特徴 こういう奴がいるからエンジニアの印象が悪くなる

                  • anond:20181020232302

                    テレパシーがないのに、見えない相手のプロファイリングができるわけないじゃんね?w 対面で話すなら、相手に合わせられるけどねw

                    • anond:20181020233005

                      物書きは見えない読者を想定して文章を作る 技術者のドキュメントも同じ これができない奴はどんな仕事やらせても駄目だろうな 言われたものを作るだけで責任の無い末端技術者で終...

              • anond:20181020232302

                ならおまえが説明してみろや? 添削してやってもいいぜ? おまえは口先だけの能無しだから、書けるわけねえけどなw(確信)     …と煽れば、もしかしたら顔を真っ赤にしたスー...

              • anond:20181020230633

                新人の部下に教育ができない無能な上司? 上司がアホだと部下は苦労するよね?

          • 増田式プログラマー養成講座 その7 OOPの仕組み(前半)

            前回は「オブジェクトとは何か?」を説明した。 今回はオブジェクトの使い方=オブジェクト指向プログラミング(OOP)で用意されている仕組みを見てみよう。 とりあえずPHPで仕組みを...

            • 不等号の増田記法 &#60; &#62;

              文字実体参照一覧 http://rinrin.saiin.net/~aor/hms/cer 数値文字参照を使えば、増田で半角文字の不等号が書ける。 不等号 小なり &lt; (<) &lt; (&lt;) &#60; (&60;) 不等号 ...

            • anond:20181019181549

              しっかり書き続けてくれていて嬉しい

          • 増田式プログラマー養成講座 その6 OOPの種類、PHPの準備

            前回は、オブジェクトの説明をした。 今回は、オブジェクトの使い方=オブジェクト指向プログラミング(OOP)を学ぼう。   OOPの種類 オブジェクト指向プログラミングには、 クラス...

            • 増田の致命的な欠陥!?

              増田でプログラミングの記事を書こうと思ったら、コードが貼り付けられなかった。 スクリプトの記述はエスケープされてしまい、はてな記法も使えなかった。 仕方ないので、コード無...

              • anond:20181017192611

                Qiitaでやれよ

                • anond:20181017192644

                  Qiitaって評判悪いね?   Qiitaは潰れて欲しいのに・・・ https://anond.hatelabo.jp/20181017203823 Qiitaで何があったのか https://anond.hatelabo.jp/20150127003906

                  • anond:20181018075427

                    殺人犯出してる増田の評判にはかなわない

                    • anond:20181018142423

                      増田の殺人犯T氏はQiita評判低下の原因のK氏を熱心に擁護してたから、Qiitaは実質増田

              • anond:20181017192611

                ブログでやれ

              • anond:20181017192611

                スーパーpre記法(シンタックス・ハイライト)だめなん?

            • プログラムの実行環境の用意

              PHPの実行環境として、XAMPPを用意してもらったけど、これは後でデータベースの練習をすることも考えてチョイスしました。 =MySQLを使って「SQL」(問合型言語)の練習をするため。 だ...

          • 増田式プログラマー養成講座 その5 オブジェクトとは何か?

            今回は、手続型プログラミングの後半となる「オブジェクト指向プログラミング」(OOP)について学ぼう。 OOPは内容が多いので数回に分けて説明してみます。(説明が下手だったらフォ...

          • 増田式プログラマー養成講座 その4 子ども向け教材「Scratch」

            今回は、子ども向けプログラミング学習教材「Scratch」(スクラッチ)を使って、一番簡単な構造化プログラミングの手法を学んでみよう。   Scratchとは何か? Scratch (プログラミング言...

            • anond:20181016193144

              おお、4歳児にプログラム教えたいんで ちょうどスクラッチのこと知りたかった ありがとう

          • 増田式プログラマー養成講座 その3 構造化=順次、反復、分岐

            それではさっそく、一番簡単な手続型プログラミング言語の使い方を学んでみよう。   今回学ぶこと 手続型のキーワードは、「順次」「反復」「分岐」の3つ。(この3つの動作は人...

          • 増田式プログラマー養成講座 その2 プログラム=データ+処理

            プログラムとは何か? プログラムは、コンピューター(電子計算機)に与える指示書のこと。 人間がプログラム(コード)を書いてコンピューターに与えると、コンピューターはプロ...

          • 増田式プログラマー養成講座 その1 パソコンの用意

            自宅と会社のプログラミングの環境(機材、ソフトなど)を教えて?   (例) 自宅:パソコンを持ってない。スマホ(iPhone7)のみ。 会社:パソコンのスペック(OS、CPU、メモリ、HDDの...

          • anond:20181023184616

            データベース、SQLの使い方をどうやって説明するか?検討してみた。 RDBはMySQLを使用=XAMPPのMySQL+phpMyAdminですぐに練習できるから。   RDBの仕組み RDBの歴史 RDBの概要 SQL誕生の背景...

            • anond:20181024000744

              IT企業のプログラミング研修資料 はてなの研修資料が公開されている。 はてな研修用教科書 https://github.com/hatena/Hatena-Textbook LLはPerl、関数型はScalaで勉強してるんですね?(他には、Jav...

              • anond:20181024003352

                「IT 企業 研修 資料 まとめ」でググったら、一覧を作ってくれてる人がいた。 IT 企業 研修 資料 まとめ - Google 検索 https://www.google.co.jp/search?q=IT+%E4%BC%81%E6%A5%AD+%E7%A0%94%E4%BF%AE+%E8%B3%87%E6%96%99...

                • anond:20181024124651

                  各社のIT研修資料をざっと見てみた。 IPA はてな ドワンゴ の資料が、体系的にまとめられているような気がした。   しかし、これは講師が授業で使うかんじのまとめ方をされている...

            • anond:20181024000744

              そもそもだけど、勉強は、 興味 教材 時間 という3つの条件さえ整えれば、誰でもできるようになる。 それはちょうど植物を育てるようなもので、種・土壌・水や空気、日光や温度...

            • anond:20181024000744

              昔の自分を振り返ると、とてもせっかちで「先に結論を言って!」というかんじだった。 (インスタントに慣れ過ぎていて、時間のかかるものはじれったくて待てない。)   昔の自分...

  • 増田式プログラマー養成講座 コンテンツ一覧

    コンテンツが増えてきたので、一覧ページを用意します。   anond:20181016015826 増田式プログラマー養成講座 その1 パソコンの用意 anond:20181016164341 増田式プログラマー養成講座 そ...

    • anond:20181024214737

      臨時のJava入門講座 この講座を書くきっかけとなった増田(未経験からのプログラマーなんだが全然分からない 2018-10-15)を改めて読んでみると、 10月からプログラミングを始めた。 ...

    • 関数型プログラミングの教材は何を使ってますか?

      プログラマーの増田は、新人(初心者)に関数型プログラミングを教えるとき、教材(言語、書籍、ツールなど)には何を使ってますか? まずは「Lisp」か「Scheme」を使ってみる。Scheme...

      • anond:20181101234844

        C#、Javaなど、実際に業務に使う言語でラムダ式使わせとけば十分だろ

        • anond:20181101235458

          そうだな。 新人にはラムダ式の書式でも教えておけば十分だな? (関数型と論理型の説明は有料コンテンツでやろうw)

          • anond:20181102002040

            ワイ関数オタク、Calculus of Inductive Constructionsの勉強をしようとするも英語が苦手で挫折 日本語の資料ないんか・・・?有料でいいから・・・

    • anond:20181024214737

      始点が初心者なのはツリーの応答とかで分かったけれど、終点はどこなんだろう?

  • 増田式プログラマー養成講座 その15 Webアプリの完成見本

    前回は、Webアプリのモックアップ(ハリボテ)を作るところまでやりました。 今回は、Webアプリの機能を実装してみましょう!   学習の狙い データベースを使ったWebアプリを作って、...

  • 増田式プログラマー養成講座 その16 Webアプリの完成見本(続き)

    「anond:20181101225335 増田式プログラマー養成講座 その15 Webアプリの完成見本」の続きです。   index.phpの編集 Webサーバーの時間設定がズレていると、メッセージを作成したときに、作...

  • 増田式プログラマー養成講座 その17 Webアプリの骨組み

    前回は、Webアプリの完成見本を先に見てみました。 今回は、Webアプリを作る途中の過程を見て、作る雰囲気を一緒に味わってみましょう。   フレームワークの使用ルール=「設定より...

  • 増田式プログラマー養成講座 その18 SQLでデータの追加と取得

    前回は、Webアプリの骨組み(スケルトン)までを作って、製作の過程を見てみました。 今回は、データベースのCRUD操作を行なって、チャットのメッセージを追加/取得/変更/削除する...

    • anond:20181104233013

      #GOODPOST#GOODPOST#GOODPOST#GOODPOST#GOODPOST#GOODPOST#GOODPOST#GOODPOST#GOODPOST#GOODPOST#GOODPOST#GOODPOST#GOODPOST#GOODPOST#GOODPOST#GOODPOST#GOODPOST#GOODPOST#GOODPOST#GOODPOST#GOODPOST#GOODPOST#GOODPOST#GOODPOST#GOODPOST#GOODPOST#GOODPOST#GOODPOS...

  • 増田式プログラマー養成講座 その19 SQLでデータの更新

    前回は、Webアプリの骨組み(スケルトン)に、SQLでデータの追加と取得をやりました。 今回は、SQLでデータの更新をやりましょう。   メッセージの更新 SQLの「UPDATE」を使えば、デー...

    • anond:20181110120715

      あのさ、こういうプログラムって3分ぐらい頑張ればなんでもできるようにならないの?

      • anond:20181110121013

        ならないね。でも外野から見て何でそんなめんどくさいこと悩まないといけないのかわかりにくいのも事実。

        • anond:20181110121318

          プログラミングは、数学と同じで扱うアルゴリズム(解法)次第で難易度が変わる。 それ以外は「難しいんじゃなくて面倒なだけ」 イメージとしては、単純な足し算や掛け算を100回...

      • anond:20181110121013

        ドットインストールの説明動画は3分程度で区切られてるね。 余計なことを省いて、本質だけ=1回に1項目だけに絞れば、3分を1単位にして説明できると思う。 ありがとう。参考に...

  • 増田式プログラマー養成講座 その20 SQLでデータの削除

    前回は、SQLでデータの更新をやりましょう。 今回は、SQLでデータの削除をやりましょう。   メッセージの削除 データの更新はSQLの「UPDATE」を使いました。 データの削除はSQLの「DELET...

    • anond:20181110182445

      正直、SQLの説明は失敗だった。ごめんねw SQLの説明じゃなくて、MVCフレームワークの使い方の説明の方が長くなって、自分でも見にくいと思った。   やり直すなら、まずはフレームワ...

      • 分かりやすい教材で選ぶならJavaScriptもあり?

        増田のアドバイスで、初心者には「JavaScript」が推奨されてた。 https://jgthms.com/javascript-in-14-minutes/ JavaScriptはプロトタイプの説明を後回しにすれば分かりやすいかも?

        • anond:20181110192400

          プロトタイプが肝だろ、と思うが、下手に難しく書くよりは、初心者は素直にダラダラ書いた方がまだ読める というか、自分でも頭が未だに混乱することがある Schemeからやってきたくせ...

  • 増田式プログラマー養成講座 その21 データベース設計 (1)要件定義

    前回まで、データベースを使ったWebアプリを作成して、SQLの使い方を学びました。 今回から、データベースの設計について学んでみよう。   参考書 anond:20181026145516 増田式プログラ...

  • 増田式プログラマー養成講座 その22 データベース設計 概念→物理

    前回は、DB設計の(1)要件定義を学びました。 今回は、DB設計の(2)概念設計、(3)論理設計、(4)物理設計を見てみましょう。   DB設計の流れ 要件定義 概念設計 論理設計 物理設計   ...

    • 1ヶ月でJavaをマスターする学習カリキュラム

      どうやったらプログラミング未経験者を1ヶ月で一人前のJavaプログラマーにできるだろうか?   基礎 JavaでOOP デザインパターン テスト IDE(IntelliJ IDEA等) ツール(Maven、Gradle等) ...

      • 学習用のプログラミング言語の選定基準

        型について考えてみる 個人的には、 最初に、動的型付けの言語を使ってみる。 次に、静的型付けの言語を使ってみる。 最後に、型推論が強力な言語を使ってみる。 という順番がい...

  • 増田式プログラマー養成講座 その23 SQLを巡る物語

    前回は、データベース設計について学びました。 今回は、その他のデータベースの話題について見てみましょう。     リレーショナル・データベースの理論 問合型言語のSQLは、「関...

記事への反応(ブックマークコメント)

アーカイブ ヘルプ
ログイン ユーザー登録
ようこそ ゲスト さん