05.javascriptでtodoアプリ:index.html
差分
このページの2つのバージョン間の差分を表示します。
次のリビジョン | 前のリビジョン次のリビジョン両方とも次のリビジョン | ||
05.javascriptでtodoアプリ:index.html [2018/12/08] – 作成 adash333 | 05.javascriptでtodoアプリ:index.html [2018/12/08] – [4.ToDoアイテム追加欄と、ToDoリストをデザイン] adash333 | ||
---|---|---|---|
行 1: | 行 1: | ||
- | ===== 05.JavascriptでToDoアプリ | + | ===== 05.JavascriptでToDoアプリ |
- | ===== | + | |
おみくじアプリ、電卓アプリの次は、だいぶ難しくなってきますが、ToDoアプリ(することリスト)を作成します。 | おみくじアプリ、電卓アプリの次は、だいぶ難しくなってきますが、ToDoアプリ(することリスト)を作成します。 | ||
+ | デザインはBulmaを利用します。 | ||
+ | |||
+ | ===== 方針をたてる ===== | ||
今回作成するToDoアプリは、 | 今回作成するToDoアプリは、 | ||
行 14: | 行 16: | ||
-データはブラウザ上の『localStorage』という場所に保存(異なるスマホ・パソコン間では共有しない) | -データはブラウザ上の『localStorage』という場所に保存(異なるスマホ・パソコン間では共有しない) | ||
- | ものとします。なお、異なるパソコン間でデータを共有するためには、サーバー関連の知識が必要になります。当サイトでも | + | ものとします。なお、異なるパソコン間でデータを共有するためには、サーバー関連の知識が必要になります。当サイトでもこの次の回で、Firebase(一部無料のサーバーサービス)を用いたToDoアプリの解説を行いたいと思います。 |
- | 参考サイト | + | 今回は、[[https:// |
+ | |||
+ | ソースコード | ||
+ | |||
+ | https:// | ||
+ | |||
+ | これから作るもの | ||
+ | |||
+ | https:// | ||
+ | ==== 0.用意するもの(開発環境) ==== | ||
+ | パソコン\\ | ||
+ | Windowsパソコンでも、Macでも、できれば、Chromeというブラウザをインストールして、Chrome上で操作を行ってください。 | ||
+ | |||
+ | (必須ではないが強くお勧め) | ||
+ | VisualStudioCode | ||
+ | |||
+ | [[https:// | ||
+ | |||
+ | |||
+ | ==== 1.GitHubアカウントは作成済みとします ==== | ||
+ | GitHubアカウントの作成方法については、[[: | ||
+ | |||
+ | ==== 2.Githubで新規リポジトリを作成 ==== | ||
+ | 前回、[[03.初めてのjavascriptでおみくじアプリ: | ||
+ | |||
+ | ==== 3. todo.htmlファイル(HTMLファイル、ホームページのファイル)を作成 ==== | ||
+ | <wrap hi> | ||
+ | |||
+ | {{: | ||
+ | |||
+ | 以下のような真っ白な画面が出てきます。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | -name your file... のところに、< | ||
+ | -下の方に、以下のコード(Bulmaを利用するためのテンプレート)をコピペします | ||
+ | -入力し終わったら、下の方へ移動して、 | ||
+ | -Commit new file をクリック | ||
+ | |||
+ | < | ||
+ | <script src=" | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | |||
+ | |||
+ | ==== 4.ToDoアイテム追加欄と、ToDoリストをデザイン ==== | ||
+ | |||
+ | -javacript-test/ | ||
+ | -画面右上の『鉛筆ボタン』をクリックして、todo.htmlを編集します。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | {{: | ||
+ | |||
+ | -コードが編集できるようになるので、『Bulmaテンプレート』を『ToDoアプリ』に変更 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | -さらに、『< | ||
+ | |||
+ | < | ||
+ | <div class=" | ||
+ | <p class=" | ||
+ | <input id=" | ||
+ | </ | ||
+ | <p class=" | ||
+ | <a id=" | ||
+ | </ | ||
+ | </ | ||
+ | <nav class=" | ||
+ | <div id=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | {{: | ||
+ | |||
+ | -下の方へ行き、『Commit changes』をクリックすると、変更した内容が保存されます。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | この時点で、以下のようになっています。 | ||
+ | |||
+ | {{: | ||
+ | |||
+ | Bulmaのフォームについて(公式サイト):https:// | ||
+ | |||
+ | ==== 5.ToDoアイテムの追加と、ToDoリスト表示の関数をJavascriptで記載 ==== | ||
+ | |||
+ | |||
+ | ===== 参考サイト | ||
+ | こちらのサイトのコードを利用させていただきました。 | ||
https:// | https:// | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | https:// | ||
+ | 【JavaScript入門】addEventListener()によるイベント処理の使い方! | ||
+ | 20181205 by マサト | ||
+ | |||
+ | |||
05.javascriptでtodoアプリ/index.html.txt · 最終更新: 2018/12/10 by adash333