サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


05.javascriptでtodoアプリ:index.html


差分

このページの2つのバージョン間の差分を表示します。

この比較画面にリンクする

次のリビジョン
前のリビジョン
05.javascriptでtodoアプリ:index.html [2018/12/08]
adash333 作成
05.javascriptでtodoアプリ:index.html [2018/12/10] (現在)
adash333 [方針をたてる]
行 1: 行 1:
-===== 05.JavascriptでToDoアプリ  +===== 05.JavascriptでToDoアプリ  =====
- =====+
  
 おみくじアプリ、電卓アプリの次は、だいぶ難しくなってきますが、ToDoアプリ(することリスト)を作成します。 おみくじアプリ、電卓アプリの次は、だいぶ難しくなってきますが、ToDoアプリ(することリスト)を作成します。
  
 +デザインはBulmaを利用します。
 +
 +===== 方針をたてる =====
 今回作成するToDoアプリは、 今回作成するToDoアプリは、
  
行 14: 行 16:
   -データはブラウザ上の『localStorage』という場所に保存(異なるスマホ・パソコン間では共有しない)   -データはブラウザ上の『localStorage』という場所に保存(異なるスマホ・パソコン間では共有しない)
  
-ものとします。なお、異なるパソコン間でデータを共有するためには、サーバー関連の知識が必要になります。当サイトでも+ものとします。なお、異なるパソコン間でデータを共有するためには、サーバー関連の知識が必要になります。当サイトでも、別の機会にFirebase(一部無料のサーバーサービス)を用いたToDoアプリの解説を行いたいと思います。
  
-参考サイト+今回は、[[https://code-maven.com/todo-in-html-and-javascript|こちらのサイト]]のソースコードを利用させていただこうと思います。 
 + 
 +ソースコード 
 + 
 +https://github.com/adash333/javascript-test/blob/master/todo.html 
 + 
 +これから作るもの 
 + 
 +https://adash333.github.io/javascript-test/todo.html 
 +==== 0.用意するもの(開発環境) ==== 
 +パソコン\\ 
 +Windowsパソコンでも、Macでも、できれば、Chromeというブラウザをインストールして、Chrome上で操作を行ってください。 
 + 
 +(必須ではないが強くお勧め) 
 +VisualStudioCode 
 + 
 +[[https://azure.microsoft.com/ja-jp/products/visual-studio-code/|こちら]]からインストールして、VisualStudioCode上でプログラムを打ち込んでご自身のパソコンに保存してから、GitHub上にコピペするのがお勧めです。 
 + 
 + 
 +==== 1.GitHubアカウントは作成済みとします ==== 
 +GitHubアカウントの作成方法については、[[:index.html|このサイトについて]]をご覧下さい。 
 + 
 +==== 2.Githubで新規リポジトリを作成 ==== 
 +前回、[[03.初めてのjavascriptでおみくじアプリ:index.html|03.初めてのJavascriptでおみくじアプリ]]のところで作成した、<wrap hi>javascript-test</wrap>リポジトリ(ファイルの置き場所)の中に、ファイルを作成していきます。 
 + 
 +==== 3. todo.htmlファイル(HTMLファイル、ホームページのファイル)を作成 ==== 
 +<wrap hi>javascript-test</wrap>リポジトリのトップページの画面で、「creating a new file」をクリックします。 
 + 
 +{{:05.javascriptでtodoアプリ:pasted:20181208-161451.png}} 
 + 
 +以下のような真っ白な画面が出てきます。 
 + 
 +{{:05.javascriptでtodoアプリ:pasted:20181208-161740.png}} 
 + 
 +  -name your file... のところに、<wrap hi>todo.html</wrap>と記入し、 
 +  -下の方に、以下のコード(Bulmaを利用するためのテンプレート)をコピペします 
 +  -入力し終わったら、下の方へ移動して、 
 +  -Commit new file をクリック 
 + 
 +<html> 
 +<script src="https://gist.github.com/adash333/69c4a5df13a0e6d3c105260f318f7f94.js"></script> 
 +</html> 
 + 
 +{{:05.javascriptでtodoアプリ:pasted:20181208-162146.png}} 
 + 
 +{{:05.javascriptでtodoアプリ:pasted:20181208-162319.png}} 
 + 
 + 
 + 
 +==== 4.ToDoアイテム追加欄と、ToDoリストをデザイン ==== 
 + 
 +  -javacript-test/リポジトリの画面でtodo.htmlをクリック(スマホではなくパソコンで開きます。) 
 +  -画面右上の『鉛筆ボタン』をクリックして、todo.htmlを編集します。 
 + 
 +{{:05.javascriptでtodoアプリ:pasted:20181208-162710.png}} 
 + 
 +{{:05.javascriptでtodoアプリ:pasted:20181208-162804.png}} 
 + 
 +  -コードが編集できるようになるので、『Bulmaテンプレート』を『ToDoアプリ』に変更 
 + 
 +{{:05.javascriptでtodoアプリ:pasted:20181208-164237.png}} 
 + 
 +  -さらに、『<!-- ここにコンテンツを記載 -->』の部分を、以下に書き換え(大変ですが、キーボードで打ち込むのが上達の近道です。) 
 + 
 +<code> 
 +      <div class="field is-grouped"> 
 +        <p class="control is-expanded"> 
 +          <input id="task" class="input" type="text" placeholder="すること"> 
 +        </p> 
 +        <p class="control"> 
 +          <a id="add" class="button is-primary">追加</a> 
 +        </p> 
 +      </div> 
 +      <nav class="panel"> 
 +        <div id="todos"></div> 
 +      </nav> 
 +</code> 
 + 
 +{{:05.javascriptでtodoアプリ:pasted:20181208-165718.png}} 
 + 
 +  -下の方へ行き、『Commit changes』をクリックすると、変更した内容が保存されます。 
 + 
 +{{:05.javascriptでtodoアプリ:pasted:20181208-165938.png}} 
 + 
 +この時点で、以下のようになっています。 
 + 
 +{{:05.javascriptでtodoアプリ:pasted:20181209-005617.png}} 
 + 
 +Bulmaのフォームについて:https://bulma.io/documentation/form/general/ 
 + 
 +==== 5.ToDoアイテムの追加と、ToDoリスト表示の関数をJavascriptで記載 ==== 
 + 
 + 
 +===== 参考サイト ===== 
 +こちらのサイトのコードを利用させていただきました。
  
 https://code-maven.com/todo-in-html-and-javascript https://code-maven.com/todo-in-html-and-javascript
 +
 +
 +
 +
 +https://www.sejuku.net/blog/57625
 +【JavaScript入門】addEventListener()によるイベント処理の使い方!
 +20181205 by マサト
 +
 +
  
  
  
  


05.javascriptでtodoアプリ/index.html.1544249324.txt.gz · 最終更新: 2018/12/08 by adash333