メタゲノムデータベース開発に向けたトレーニングに応募してくださった皆さん、ありがとうございます。アンケート結果でプログラミングの基礎の基礎は皆さん少しは知っているようだったので、先にWEBの基礎であるHTMLから勉強したいと思います。 Thank you to everyone who applied for the training to develop a metagenomic database! There is a The results of the survey showed that you all seemed to know a little bit about the basics of programming, so we would like to learn the basics of the web, starting with 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.

まずは下記の「HTML を始めよう」を題材にZoomで1回目の講習を行いたいと思います。 First of all, I would like to hold the first training session on the subject “Getting Started with HTML” at Zoom.

日本語 (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回目は、金曜日の15:00から開始しようかと思いますが、もし参加希望者の中で都合が悪い人は、グループチャットのほうで教えてください。都合が悪い人が多いときは変更します。まだ応募していない方で参加したい人がいたら教えてください。 The first session will start at 15:00 on Friday. If you can not join, please let me know in the group chat. When it's not convenient for many people, I will change it. If you haven't applied yet and would like to join, please let me know.

Day 2

本日のトレーニングは下記のページについて行います。 The next training will cover the following pages

https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals https://developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks

Day 3

今週は木曜日と金曜日の15:00からWEBサーバ開発トレーニングを行いたいと思います。 This week I'd like to do web server development training on Thursday and Friday at 15:00. 木曜日 Thursday： https://developer.mozilla.org/ja/docs/Learn/CSS/First_steps/Getting_started https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Your_first_HTML_form 金曜日 Friday： https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/What_is_JavaScript

Day 4

Day 5

水曜日の15:00から5回目のWEBサーバ開発トレーニングを行いたいと思います。 This week I'd like to do web server development training on Wednesday at 15:00.

下記のJavaScript入門編をざっとやっていく予定です。変数、配列、文字列操作について、何かの言語で使ったことがあれば楽勝だと思います。他の言語を一切知らない人は予習しておいてもらえると助かります。 We're going to do a quick introduction to JavaScript below. If you've used variables, arrays, and string manipulation in some language before, it should be a piece of cake. If you don't know any other languages at all, it would be helpful if you could prepare for this.

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/Building_blocks/conditionals 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/First_steps/Arrays https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Looping_code

Day 6

I'm thinking of doing the sixth training on Friday at 15:00. Please let me know if you have any inconvenience. 今週は1回の予定でしたが、来週連休だし間が空きすぎるのも嫌なので、金曜日の15:00から6回目のWEBサーバ開発トレーニングを行おうかと思っています。都合が悪い人が多い場合は調整するのでご連絡ください。

We will learn about arrays, functions, and the JSON data storage format for JavaScript. 配列、関数、JavaScriptのデータ保存形式JSONについて行う予定です。

https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Arrays https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Looping_code https://developer.mozilla.org/ja/docs/Learn/JavaScript/Building_blocks/Functions https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/JSON

本日は少し予定を変更して、配列・連想配列周りをやる予定です。 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/JSON

Day 7

今日の15:00から7回目のWEBサーバ開発トレーニングを行いたいと思います。 I'd like to do web server development training at 15:00.

本日はJavaScriptの関数とお絵描きをやってみる予定です。 Today we're going to try JavaScript functions and drawing.

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

Day 7までの資料

Day 8

次回のWEB開発トレーニングは、6月28日（火）の15:00です。いよいよサーバ側の開発に移行します。 The next web development training will be on Tuesday, June 28 at 15:00. We will move on to server-side development.

これまでは、ChromeのJavaScript実行エンジンを使ってましたが、サーバではJavaScriptの実行環境としてNodeJSというプログラムを使います。 So far, we have been using Chrome's JavaScript execution engine, but we will use NodeJS as the JavaScript execution environment on the server.

NodeJSのインストールを行う必要があるので、下記のWEBサイトにアクセスしてバージョン12.18.3 LTSをインストールしておいてください。 You will need to install NodeJS, so go to the website below and install version 12.18.3 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/development_environment https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website

Day 9

次回のWEB開発トレーニングは８月４日（火）の15:00から開始します。PUGの練習をします。 The next web development training will begin on Tuesday, August 4, at 3:00 p.m. We will try PUG.

https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/skeleton_website

日本語：https://qiita.com/c2997108/items/fee5d2ca1d2e524823e5 日本語：https://docs.qranoko.jp/static/pug.html#variable

English：https://www.sitepoint.com/a-beginners-guide-to-pug/

あと２回を予定していて、最終回は８月１１日（火）の予定です。 We have two more sessions scheduled, with the last one scheduled for Tuesday, August 11.

Day 10

8月11日15:00からWEB開発トレーニングの最終回を行います。最後は2時間くらいになるかもしれません。 On August 11 at 3:00 p.m., we will have the last session of our web development training. The last one might be about 2 hours long.

内容としては下記になります。 The content will be as follows.

・クライアントのHTMLフォームから、サーバのNodeJSにデータを渡す　Sending data from the client's HTML form to the server's NodeJS

・サーバ側で外部プログラムを起動した結果を、PUGに変数で渡してクライアントのWEBブラウザに表示する　The result of executing an external program on the server side is entered into a variable in the PUG and displayed in the client's web browser.

日本語： https://docs.qranoko.jp/static/pug.html#each http://www.w3big.com/ja/nodejs/nodejs-express-framework.html https://tkybpp.hatenablog.com/entry/2016/04/25/163246

English： https://www.sitepoint.com/a-beginners-guide-to-pug/ http://www.w3big.com/nodejs/nodejs-express-framework.html https://stackoverflow.com/questions/46482424/how-to-get-textual-stdout-from-console-logrequirechild-process-execsyncls

課題

予めこのトレーニングの卒業試験の内容を伝えますと、下記のプログラム開発が出来れば合格です。 I will tell you in advance what the graduation exam is for this training, if you can develop the following programs, you will pass.

[Create a web server to run BLASTN] Create a form with a text area so that one record of the sequence can be submitted. Create a FASTA file on the server, search the SILVA database (https://www.arb-silva.de/fileadmin/silva_databases/release_138/Exports/SILVA_138_SSURef_NR99_tax_silva_trunc.fasta.gz) with BLASTN (https://ftp.ncbi.nlm.nih.gov/blast/executables/blast+/LATEST/) and display the BLASTN result with alignments on the web browser. In addition to that, implement two of the following seven items - Displays the graphical alignment. - Clicking on the table of contents of a graphical alignment or a text alignment jumps to the alignment part of the query. - Make the option to change the parameters of BLAST search (-evalue, -wordsize, -numthreads, etc.). - Use CSS to make the page look good (Bootstrap, Semantic UI, etc.) - If a character string that is not a base sequence is entered, a warning is displayed before the data is sent to the server. - While searching, the page is loading. - The page for registering a new DB is made, and the selection option of the database is added.

[BLASTNを実行するWEBサーバを作る] テキストエリアを持つフォームを作成し、塩基配列を1レコード投稿できるようにする。サーバでは渡された塩基配列からFASTAファイルを作成し、BLASTN(https://ftp.ncbi.nlm.nih.gov/blast/executables/blast+/LATEST/)によってSILVAデータベース(https://www.arb-silva.de/fileadmin/silva_databases/release_138/Exports/SILVA_138_SSURef_NR99_tax_silva_trunc.fasta.gz)を検索し、その結果のアライメントをWEBブラウザに表示するそれに加えて、下記の7つの項目のうち2つを実装する・グラフィカルなアライメントを表示する・グラフィカルなアライメント、もしくはテキストアライメントの目次をクリックするとそのクエリのアライメント箇所にジャンプする・BLAST検索のパラメータを変更するオプションを作る(-evalue, -wordsize, -numthreadsなど）・CSSを使って見栄えの良いページにする（Bootstrap, Semantic UIを使うなど）・塩基配列ではない文字列が入力された場合、サーバにデータを送る前に警告を表示する・検索している間、ページをロード中という画面を表示する・新しいDBを登録するためのページを作成し、データベースの選択オプションを追加する

最終課題の[BLASTNを実行するWEBサーバを作る]が出来た方は、直接PCを見せて下さっても良いですし、適当なWEBサーバに配置してURLを伝えて下さっても良いですし、Zoomなどで遠隔で確認でも大丈夫です。期限は特に決めていませんが、1か月くらいとしておきます。

If you have completed the final task [Create a web server to run BLASTN], you may show me your PC directly, place it on an appropriate web server and tell me the URL, or check it remotely with Zoom, etc. I don't have a specific deadline, but I'll try to set a deadline of one month from now.

テスト用の適当なクエリー配列がほしいという声があったので、次を使ってください。 I was asked for a suitable query array for testing, so please use the following

GTTGATCCTTCTGCAGGTTCACCTACGGAAACCTTGTTACGACTTCTCCTTCCTCTAAGTGACCAGGTTCACTCTAATTTCGCGATTGCTCGACAGTCCAAAGAGGTTCACCGAGCCACTCGAAATTGGTAGGAGCGACGGGCGGTGTGTACAAAGGGCAGGGACGTAATCAACGCGGGTT GATGACCCGCGCTTACTAGGAATTCCACCTTCAAGATCCATAATTTCAACGATCTATCCGCAGCACGATACGTATTTTAGAAGATTTAGCTGTGTCTATTTCGGAGCAGCATCGATGCATAAATGCATATACCTTGTTGTACGTATCAGTGTAGCACGCGTGCGGCCCAGGACATCTAAGG GCATCACAGACCTGTTATTGCCTCAACTTCCTTGTGGTTGCACACAACGTCCCTCTAAGAAGTTATCAAGTCTCGTAAAAGAAAGACAGGTAACTATTTAGCAGGCTGAGGTCTCGTTCGTTTAACGGAATTAACCAGACAAATCACTCCACCAACTAAGAACGGCCATGCACCACCAAAA TTAAAATAAATACCCATAGAATCAAGAAAGAGCTATCAATCTGTCAATCCTCGCTATGTCTGGACCTGGTAAGATTTCCCGTGTTGAGTCAAATTGAGCCGCAAGCTCCACTCCTGGTGGTGCCCTTCCGTCAATTCCTTTAAGTTTCAGCCTTGCGACCATACTACCCCCAGAACCCAAA AGACTTTGATTTCTCGTAAGGTGCCGAAGGCGGAATGTGCACGCCCTCCGATCCCTAGTCGGCAACGTTTATGGTTAAGACTAGGACGGTATCTGATCGTCTTTGATCCCCTAACTTTCGTTCAATGATTAATGAAAACATTATTGGCAAAATAAATGCTTTCGCATAAGTTAGTCTTTAA TATTTCAAAGAATTTCACCTCTGGAAATTAAATACTAATGCCTCCCCTGAAAACACTATCCCTATTAACCATTTCCGTGTCCTTGAAACCAACAAATAAGGAAGAATTCTATAAGAATACACGGTCCAATTCGATTATTCCATGCTAAAGTATTCCGGCGCACGCCTGCCTGAAACACTAT AATTTACTCAAAAAGAAGATAAATAAATGAATATATAGAAAGGGTAAAATACCTGAGCCTGAAGCCGAGAAACAAATCCCGGACAACGTTAACAGGTGGATGAAGGAAGAGTTCGGCGGTGACCTTGGCCACCTTCCAATCTCAGCCCCCAGAAATCCAACTACGAGCATCGAATAACTGC AGGAACATTAATATACACTATTGGAGCTGGAATTACCGCGGCTGCTGGCACCAGACTTGCCCTCCAATTGTTCCTCGCTAAATAAAGTTTGCAAATCAAGCCCATTGTGACCCCAGGATAAATCCTAGTTCATTATTTCTTTCACTACCTCCCTGAATCAGGATTGGATAATTTTCGCGCC TGCTGCCTTCCGTAGAAGTGGTAGCCGTTTCTCAGGCTCCCTCTCCGGAATCGAACCCTAATCCCCCGATAGCCCGTGAATGCCATGGTTGTCCAATACACTACCATCAAGCTGATGGGAAGCAGAAACATGAATGACTTATTGCCGGTAGACCGGCAATTCGATCAGTTATCATGAATCA TCTCAGTAGACCTTGCGGAATATTGGTTTGAAATCTAATAAATACTGAGGTTCCAAAAAGTCCCTCGTAACGCATGTATTAGCCCTAGAATTACTACGGTTATCCATTTAAACAAATGTTTTAATCCAAATAAACTATAACTGTTTGAATGAGCCATTCGCAGTTTCATTGTATGTAACCT TTATACTTAGACATGCATGGCTTAATCTTTGAGACAAGCGTATGACTACTGGCAGGATCAACCAGGTTAAGTCCATTCTTCTTCCAGACAGG