nodejsウェブアプリケーション開発_2021

差分

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


—nodejsウェブアプリケーション開発_2021 [2021/06/17 02:27] (現在) – 作成 - 外部編集 127.0.0.1
行 1: 行 1:
 +## Day 1 (2021/5/10)
 +
 +Webアプリケーションって何？
 +
 +What is Web applications?
 +
 +https://www.sei-info.co.jp/it-keyword/summary_webapplication.html
 +
 +HTML、JavaScriptについての入門書は色々ありますが、下記のMDNのページが英語、日本語、中国語など色々な言語に翻訳されているので、今回のトレーニングでは下記の資料を使います。
 +
 +There are many introductory books on HTML and JavaScript, but the following MDN pages seems to be good to start because there are a lot of documents translated into various languages such as English, Japanese and Chinese.
 +
 +https://developer.mozilla.org/
 +
 +まずは下記の「HTML を始めよう」を題材に1回目の講習を行います。
 +
 +First of all, I would like to hold the first training session on the subject "Getting Started with HTML".
 +
 +日本語 (Japanese)：https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Getting_started
 +
 +英語 (English)：
 +https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
 +
 +中国語 (Chinese)：
 +https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started
 +
 +### 課題1
 +
 +imgタグとaタグを使って、画像のアイコンをクリックすると、Googleにジャンプするボタンを作り、それをHTMLファイルとして保存し、ブラウザで表示させる。
 +
 +## Day 2 (2021/5/17)
 +
 +https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
 +
 +https://developer.mozilla.org/ja/docs/Web/HTML/Element/table
 +
 +https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
 +
 +## Day 3 (2021/5/19)
 +
 +https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form
 +https://developer.mozilla.org/ja/docs/Learn/Forms/Sending_and_retrieving_form_data
 +https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/radio
 +https://developer.mozilla.org/ja/docs/Learn/CSS/First_steps/Getting_started
 +
 +## Day 4 (2021/5/24)
 +
 +Google Chromeを使用します。インストールしておいてください。
 +
 +https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript
 +
 +https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables  
 +https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Math  
 +https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings  
 +https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Useful_string_methods
 +https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/conditionals 
 +
 +練習問題：[[https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html|このページ]]のHTMLをメモ帳などに貼り付けて、Javascriptが動作するか見てみる。Javascriptが動いたら、[[https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings#concatenation_in_context|ここ]]の「様々な結合」という動きをするようにHTMLに記述する。
 +
 +練習問題2：問題1のHTMLについて、“水圏生物工学”とダイアログに入力された場合のみ、「ようこそ」とalert関数で表示するボタンを作る。
 +
 +メモ：ChromeでF12キーを押して、開発者ツールを開き、「Console」タブを開いて、そこにJavascriptを記述する。ChromeのConsole内での改行は「Shift＋Enter」で改行できる。
 +
 +## Day 5 (2021/5/26)
 +
 +https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays  
 +https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Looping_code
 +
 +連想配列 Dictionary with Key/Value pairs
 +
 +日本語：https://techplay.jp/column/528 
 +
 +English: https://pietschsoft.com/post/2015/09/05/javascript-basics-how-to-create-a-dictionary-with-keyvalue-pairs 
 +
 +https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/Basics
 +
 +https://developer.mozilla.org/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
 +
 +練習問題：[[https://www.w3.org/People/mimasa/test/|このページ]]のリストの適当な項目にChromeのConsoleからいくつか色を付けてみる。.style.colorプロパティなどを使ってみるなど。
 +
 +1. "XHTML image map test (XHTML browsers only)"の項目の文字の色を赤にする。(リンク以外の文字の色が変わればOK。もちろん、リンクの色も変えるように変更してもOK。) .style.colorプロパティを使用。
 +
 +2. querySelectorAllでliをすべて列挙し、偶数番目の項目に対してのみ背景色を黄色にする。 .style.backgroundColorを使用。 偶数かどうかは、演算子「% (剰余算、余り)」を使う。
 +
 +
 +## Day 6 (2021/5/31)
 +
 +JavaScriptの関数とお絵描きをやってみる予定です。
 +
 +https://developer.mozilla.org/ja/docs/Web/HTML/Element/canvas
 +https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Functions
 +https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Return_values  
 +https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes
 +
 +課題1：2つの数字を引数を受けとり、大きいほうの数字を戻してくれる関数を作る。
 +
 +課題2：3つの図形をランダムな場所に10個ずつ描画する。（下記のステップで進めてみると良いかも。）
 +
 +```
 +1．3つの関数を作る
 +　違う形を描画する3つの関数を作る
 +2．引数で描画開始地点を指定できるようにする。
 +3．ループの中で、ランダムに描画開始地点を指定して10個ずつ図形を描く。
 +```
 +
 +
 +## Day 7 (2021/6/7)
 +
 +いよいよサーバ側の開発に移行します。
 +これまでは、ChromeのJavaScript実行エンジンを使ってましたが、サーバではJavaScriptの実行環境としてNodeJSというプログラムを使います。NodeJSのインストールを行う必要があるので、下記のWEBサイトにアクセスしてバージョン14.17.0 LTSをインストールしておいてください。
 +
 +日本語：https://nodejs.org/ja/
 +
 +English: https://nodejs.org/en/
 +
 +https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction
 +
 +https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website
 +
 +https://www.sejuku.net/blog/28449
 +
 +練習1：/testにアクセスしたら、"Express"ではなくて、"Test2"というタイトルが表示されるように変更する。
 +
 +練習2：Expressの文字をサーバの現在時刻に変更する。
 +
 +
 +## Day 8 (2021/6/9)
 +
 +PUGの練習をします。
 +
 +日本語：https://qiita.com/c2997108/items/fee5d2ca1d2e524823e5
 +
 +日本語：https://docs.qranoko.jp/static/pug.html#variable
 +
 +日本語：https://tr.you84815.space/pug/language/iteration.html
 +
 +English：https://www.sitepoint.com/a-beginners-guide-to-pug/
 +
 +課題：[[https://www.w3.org/People/mimasa/test/|このページ]]を再現するようにPUG＋JSを書いてみる。
 +
 +1．上記ページの下記の4項目程度を再現するようにPUGを書いてみる。（リンクも再現すること。）
 +
 +```
 +・Object test (not actively maintained)
 +・Object test - results
 +・Java applet test (not actively maintained)
 +・Java applet test - results
 +```
 +
 +2．index.jsのほうで、下記のように配列を定義して1項目「・Object test (not actively maintained)」がリンク付きで出力されるPUGを書く。
 +
 +```
 +router.get('/', function(req, res, next) {
 +  let data = ["object/", "Object test", "(not actively maintained)"];
 +  res.render('index', { title: 'Express', data: data });
 +});
 +```
 +
 +3．JSのほうで、下記のようにulのIDごとにリンク先のURL、リンクの本文、リンクの後ろの文字列、を入れた連想配列を作成し、その配列を受け取ってeach文で展開するPUGを書く。
 +
 +```
 +  let data = {object:[
 +               ["object/", "Object test", "(not actively maintained)"],
 +               ["object/results", "Object test - results", ""]
 +              ],
 +              java:[
 +               ["object/java/", "Java applet test", "(not actively maintained)"],
 +               ["object/java/results", "Java applet test - results", ""]
 +              ]};
 +```
 +
 +
 +## Day 9 (2021/6/14)
 +
 +・クライアントのHTMLフォームから、サーバのNodeJSにデータを渡す
 +
 +https://developer.mozilla.org/ja/docs/Learn/Forms/Sending_and_retrieving_form_data
 +
 +日本語：
 +
 +https://qiita.com/Yuuma-ujimoto/items/bc55ecddf4d0302b2992
 +
 +https://qiita.com/TakeshiNickOsanai/items/b1720dcbe2bb5f9e524f
 +
 +English：
 +http://www.w3big.com/nodejs/nodejs-express-framework.html
 +
 +課題
 +
 +１．フォームの値をGETメソッドで受け取れていることを、console.logで確認する
 +
 +２．受け取った値をindex.pugに渡して、ブラウザの画面上のどこかに表示する
 +
 +３．GETからPOSTに変更しても、クライアントからデータを正しく受け取って、ブラウザ画面上のどこかに表示する
 +
 +
 +## Day 10 (2021/6/16)
 +
 +・サーバ側で外部プログラムを起動した結果を、PUGに変数で渡してクライアントのWEBブラウザに表示する
 +
 +日本語：
 +
 +https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions
 +
 +https://www.javadrive.jp/javascript/function/index16.html#section2
 +
 +https://tkybpp.hatenablog.com/entry/2016/04/25/163246
 +
 +https://tech.chakapoko.com/nodejs/file/list.html
 +
 +https://www.gesource.jp/weblog/?p=8216
 +
 +English：
 +
 +https://stackoverflow.com/questions/46482424/how-to-get-textual-stdout-from-console-logrequirechild-process-execsyncls
 +
 +課題
 +
 +１．Expressの実行フォルダの中に適当なファイルを作り、そのファイル名をNodeJSのfsを使って表示する。
 +
 +２．上記ファイルをNodeJSのfsを使って消す。
 +
 +
 +## 最終課題
 +
 +必須要件1：expressで動作するWEBアプリケーションを作成し、「http://localhost:3000/list/」にアクセスすると、サーバ上の特定のフォルダ(例：/opt/blast/dbとか、C:\opt\blast\dbとか）の中にある、ファイルの一覧を表示する。ファイルのリストの左横にはチェックボックス、ページ上部か下部に「削除」ボタンを表示し、「削除」ボタンを押すと、選択したチェックボックスのファイルを削除する。
 +
 +必須要件2：「http://localhost:3000/upload/」にアクセスすると、FASTAファイルをアップロードして、BLASTDBを作成するページを作成する。例：http://suikou.fs.a.u-tokyo.ac.jp/upload_sequenceserver/　。
 +BLASTDBの作成は、FASTAが塩基配列であれば、「```C:\\Users\\xxx\\Downloads\\makeblastdb -in input.fasta -dbtype nucl -hash_index -parse_seqids```」、FASTAがアミノ酸配列であれば、「```/User/xxx/Download/makeblastdb -in input.fasta -dbtype prot -hash_index -parse_seqids```」を使えばよい。ファイルのアップロードは次を参照。https://code-kitchen.dev/html/input-file/ BLASTのダウンロードは「https://ftp.ncbi.nlm.nih.gov/blast/executables/blast+/LATEST/」から。
 +
 +下記のオプションの内、2つ以上を実装すること。
 +
 +1．表示するのをファイル一覧ではなく、BLAST DBのファイルのプレフィックス（nr.palとかだと、nrだけ）にして、選択されたDBのファイルたちを全部消す（nrが選ばれると、nr.pal, nr.pdb, nr.pos, nr.pot, nr.ptf, nr.ptoなどをまとめて消す)。
 +
 +2．makeblastdbのコマンドがエラーになったときは、分かりやすいエラーメッセージを表示する。(例えば、FASTA以外のファイルが入力された時にmakeblastdbがエラー終了するときなど。)
 +
 +3．URLがhttp://localhost:3000/以外になっても対応できるように、またapacheなどのWEBサーバの下でnodejs-expressを動かすときのために、相対パスでpug, jsを記述する。
 +
 +4．CSSを使って、見栄えを良くする。
 +
 +5．BLASTDBファイルを削除するのか、リネームするのか選べるようにする。(リネーム機能には何が必要か考えて実装してみる。)
 +
 +6．アップロードされるファイルの拡張子の種類を.fasta, .faと.fasta.gz, .fa.gzに限定し、.fasta.gz, .fa.gzの時はnodejsのzlibライブラリを使って解凍しておく。
 +
 +参考：https://webbibouroku.com/Blog/Article/html5-file-accept
 +
 +https://www.yoheim.net/blog.php?q=20141002