メタゲノムデータベース開発に向けたトレーニングに応募してくださった皆さん、ありがとうございます。アンケート結果でプログラミングの基礎の基礎は皆さん少しは知っているようだったので、先に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): 英語 (English): 中国語 (Chinese):

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.

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

今週は木曜日と金曜日の15:00からWEBサーバ開発トレーニングを行いたいと思います。 This week I'd like to do web server development training on Thursday and Friday at 15:00. 木曜日 Thursday: 金曜日 Friday:

水曜日の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.

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について行う予定です。

本日は少し予定を変更して、配列・連想配列周りをやる予定です。  連想配列 Dictionary with Key/Value pairs日本語: English:

今日の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.

これまでのトレーニングで使用したドキュメント一覧です。   連想配列 Dictionary with Key/Value pairs 日本語: English:

次回の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.

日本語: English:

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

日本語: 日本語:


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

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.



予めこのトレーニングの卒業試験の内容を伝えますと、下記のプログラム開発が出来れば合格です。 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 ( with BLASTN ( 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(によってSILVAデータベース(を検索し、その結果のアライメントをWEBブラウザに表示する それに加えて、下記の7つの項目のうち2つを実装する ・グラフィカルなアライメントを表示する ・グラフィカルなアライメント、もしくはテキストアライメントの目次をクリックするとそのクエリのアライメント箇所にジャンプする ・BLAST検索のパラメータを変更するオプションを作る(-evalue, -wordsize, -numthreadsなど) ・CSSを使って見栄えの良いページにする(Bootstrap, Semantic UIを使うなど) ・塩基配列ではない文字列が入力された場合、サーバにデータを送る前に警告を表示する ・検索している間、ページをロード中という画面を表示する ・新しいDBを登録するためのページを作成し、データベースの選択オプションを追加する


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