ブラウザの中で動くJavaScript（３）

アップローダを作って見よう

• これまでに サーバ側コードとクライアント側コードを、個別に学んできた。

  • クライアント側では D&D のような新しいAPIも紹介した。

• これからその連携動作も体験していきましょう。

• 方針：なるべくライブラリに頼らない

  • でも少しは使います（Expressなど）
  • クライアント側でこれまで頻繁に言及してきている jQuery については、

  （ネイティブのJSの機能が充実してきたことを受けて）使わないで進めます。

アップローダについて

• ページのどこかの領域にファイルを（たとえばエクスプローラからドラッグしてきて）落とすと、サーバにアップロードしてくれるようなページ。
• CMSやSNS などで最近はよく見かける
• 一度に多数のファイルを送ることができる機能もある（が今回は１つずつにしておく）

枠組み（クライアント側からスタート）

• ファイルをドラッグ（あんど ドロップ）する場所を作る（pugで記述してある）

  doctype html
  div#up
  style.
    #up
      width: 20vw;  height: 20vh;
      background: blue;
    }
  script(src="f/upld0.js")

  • 今回、スクリプトは別ファイルにした。（pugファイルの中に展開させると編集の作業が面倒 + JSのコードを書き換えたときにも pugコマンドでの変換が必要になる、という２つの理由）。

    • 別フォルダに置くようなコードになっているのは、この先、express でファイルを提供する場面を想定してのこと（今は同じフォルダに置いておいてもOK）。

  • 例えば Atomエディタで編集するなら pug 用のプラグインを入れると少し快適になる。

  • id名 ‘up’（名前は何でもいいが）の div要素、前回は position:abusolute を指定したが今回は動かさないのでこれは不要。

• pugで書いたものをHTMLに変換するためには、（上記を up.pug に保存したとして）、（ファイルを保存したフォルダからコマンドプロンプトを開いて）下記のようなコマンドで変換。

  pug up.pug -P

  • 何度も繰り返すときは、上矢印キーで呼び出して使うといい。

• ドラッグを受け付けるコード

  const up=document.getElementById('up')
  function paint(col){up.style.backgroundColor=col}
  up.addEventListener('dragover',ev=>{
    ev.preventDefault();
    paint('yellow')
  })
  up.addEventListener('dragleave',ev=>paint('blue'))
  up.addEventListener('drop',ev=>{
    ev.preventDefault();  paint('red');
    // ...  ここをこのあと充実させる
  })

  • 当該エリアを変数 up として把握する。（１行目）
  • 色を変えるコードも書いておこう（２行目）
  • dragover イベントのデフォルト動作を抑制（これは必要なようだ）。
    • 普通のWebページの上にファイルをポトンと落とすと、そのファイルをブラウザで表示する（ことが多い）、これがデフォルトの動作。なのでそれをさせないようにするためのオマジナイ。
    • この preventDefault は、‘drop’, ‘dragover’ に施しておく必要があるようだ。
  • dragleave は、dragover で色を変えたのを（dropしなかった時に）色を戻すためだけに呼んでいる。

• 落とされたファイルを認識し、関数 sendit（後で書く） に渡す

  var f=ev.dataTransfer.files[0];
  var fileReader = new FileReader();
  fileReader.onload=ev=>sendit(event.target.result,f.name)
  fileReader.readAsBinaryString(f)
  paint('green')

  • fileReader は、古いJSのスタイルのAPIなので、コールバックを渡す書き方。
    • まず　new でオブジェクトを生成し、
    • load イベントに対する処理（準備が出来たらこれをしなさい）をまず記述しておいて、それから、
    • 「さあ中身を読みなさい」と指示する（ここでは生データとして読み込ませている）。
    • データをどのようなデータとして読み込むか、という方針がいくつかあり得る。その種類ごとに readAs… といった名前のメソッドがいくつか用意されている。

• 送信

  function sendit(content,fname){
    // console.log(content)
    fetch(`http://localhost:58080/up0/${fname}`,{
        method: 'POST', body: content,
        headers: {'content-type': 'application/octet-stream'}
    })
    .then(res=>{
      paint('blue')
    }).catch(err=>{
      console.log(err); paint('blue')
    })
  }

  • ページ遷移を行わずに、サーバとの間でデータ通信を行う。つまりこの処理は一種の Ajax と言える。

  • Ajaxは 最近までは XMLHttpRequest オブジェクト（JavaScriptネイティブ）や、jQueryの Ajax メソッドを使うことが多かった

  • XMLHttpRequest の使い方は、先に述べた fileReader と同じ、３段階（生成、イベント処理、呼出）の書き方（かなりまだるっこしい）。

  • が、最近若干の変化があった。

  • 上記は、Fetch API　を使う例（すでに解説した Promise の使い方の１つの例にもなっている）

  • アップロードの際は、（HTTPの）メソッドとして POST を使う。

    • これまでに出てきた、プログラミング言語の（オブジェクト指向での関数呼出しのような）「メソッド」という単語と、HTTPの「メソッド」とは、別の意味。
    • ちなみに通常のWeb閲覧では（HTTPの） GETメソッドが使われる（というケースが殆ど）。

  • fetch の第１引数は、呼び出したい（サーバの）URL、第２引数がオプション（オブジェクトの形で）。

    • headers オプションは、その値自体がさらにオブジェクト。
    • content-type の中のハイフン （ - ) （だと我々が思っているもの）は、 「マイナス」でもある。JSではこれを裸で使うと、引き算の式だと思われてしまうので、 ここはクォートする（明示的に文字列にする）必要がある。
      • ついでに、最初の方で例示した up.style.backgroundColor=col という式では、 CSSの属性名（を、多くの場合はそのままJSでの属性名として流用しているが）background-color で、ハイフンを取り除いて代わりにキャメルケースにしたもの、を使っていることも確認しておいて下さい。

これでクライアント側の準備は整ったが、サーバが動作していないと、実際に通信を試みた時点でエラーを発生させるだろう。

次に進んでみよう。

サーバ側

大枠

• node.js で動作させることになるだろう。

• サーバの基本動作としては、定番となっているフレームワーク/ライブラリである express.js を使うことにする。

  • expressでアプリケーションの枠組みを自動生成する（フレームワークとして動作する）express-generator というパッケージもあるが、ここでは、ライブラリとしての使い方に留めておく。

  // 先頭部
  const express = require('express')
  const app = express()

  • ここは express を使うための定跡。
    • （これまでに何度か述べたが）require で読み込むと１つのオブジェクトが値として返されるので、 それを変数（多くの場合、値を変更することはないので const で大丈夫）として保持しておく。
    • 変数名はライブラリ名と同じ名前を使うのも定跡。
    • expressオブジェクトは関数でもあるので、それを呼び出して、結果として返されるオブジェクトがこの先のサーバ動作で中心的な役割を果たす（app とすることが多い）。

  // 末尾
  var server = app.listen(58080,()=>{
    console.log("listening at port %s", server.address().port);
  });

  • listen メソッドを呼び出すことでサーバが起動する。ポート番号は適当に選んでいい。
  • この listenメソッドは終了しない（ずっとクライアントからの接続を待ち続ける）。
  • listen に第２引数として渡すコールバックには、サーバ開始直後に行う動作を記す。

• 上記の（２つに分けて提示した）コードを１つの .js ファイルに書き込み（ここでは up.js としておく）、 コマンドプロンプトを（このファイルを保存したフォルダから）起動して、以下のように起動するとサーバが動作する。

  node up.js

• この段階では何もしないサーバなので、中身をこれから作り込む。次節以降のコードは、上記の２つのコード片の間に挿入していくことになる。

POSTの受理

• この先のコードは前節で設定した app オブジェクトに関するメソッド呼出を中止に進める。

  app.post('/up0/:fname', (req,res)=>{
    // console.log(req.params.fname, req.body)
  
    // この中身は次節で
  
    res.end("uploaded.");
  });

  • 受け付けるHTTPメソッドによって、（主に使われるものとしては）app.get と app.post を使い分ける。

  • 一般的には get の方が広く使われているが、この課程ではアップロードなのでまず post から紹介する（でも使い方はほぼ同じ）。

  • 第１引数（文字列）は、HTTPリクエストで要求される資源（ディレクトリ名とファイル名）のパターン。このパターンの要求を（このメソッドで）受け付けた時に、第２引数のコールバック（無名関数）が呼び出される、というルール（対応関係）をこうやって示していく （Webサーバ用語では「ルーティング」と呼ぶ）。

  • コールバックは引数を２つ受け取るという約束になっている。１つめが要求（Request） を表象するオブジェクト、２つめは応答（Response)を表象する。

    • 前者の req は（すでにリクエストは送信されている訳なので）この中から必要な情報を取り出すために使われる。
    • 後者の res は、これからクライアントに返す返答を組み立てるために使われる。
    • （後で詳しく見るが）オブジェクト req のメンバーの１つ、req.params は、 さらにオブジェクトの形をしていて、ここでは {fname: '....'} のような値になっている筈（ …. の部分がファイル名）。

  • ここで、先にクライアント側の fetch() に第一引数として渡した URL（の、前半部分の localhost を表すドメイン名までを取り除いた、要求する資源に相当する部分）、

    /up0/${fname} を振り返って頂きたい。

    スラッシュで分けられた最初のパートが、ディレクトリ名 up0 としてあった。 第２パートに、アップロードするファイル名を置いた。これを受け取るパターンが、 （expressでの表現方法で）‘/up0/:fname’ となる。

  • パターンの中で、コロンが前置された部分 :fname は、その文字列そのものではなく、変数扱いになり、２つめのスラッシュの右（送信した側でファイル名を置いた箇所） に置かれた文字列が、この app.post の（コールバックの）中では、

    req.params.fname として設定されている。

  • 受け取ったデータの保存（次節）が終了したら、（サーバ側コードの責任として） クライアントに適切なレスポンスを返す必要がある。

    • 一般的には res.render を使ってWebページ（HTML）の形で返すことが多いが、
    • ここでは 目的がファイルのアップロードであり、Ajaxの呼出である前提でもあるので、 ちゃんとした形のレスポンスである必要はないので、単純な文字列を res.send で送ってお茶を濁しておく。

ファイルの保存

• HTTPのPOSTリクエストのBODY部として送られてきた、リクエスト本体は、 req.body で取り出すことができる。

  • BODY部がどこを表すのか、板書で解説した右図を確認しておいて下さい。
  • これと、前述の （req.params.fname にセットされた）ファイル名があれば、 サーバ側にファイルを保存することができる。

• ただし、POSTリクエストのBODY部には、様々な種類のデータが（場合によってはそれに応じたエンコーディング等を行って）送られてくるため、それに応じた受け取り方を準備する必要がある。

  • 今般のアップロードは（前述のように）content-type: application/octet-stream として、つまり生データとして（加工なしで）BODYに置かれている。これを扱うために以下のようなコードを挟んでおくこと。
  • bodyParaseオブジェクトのraw メソッド（によって生成されたオブジェクト）がそれを担当する。

  // 先頭近辺で
  const bodyParser = require('body-parser')
  
  // ...
  
  // 前節の app.post の前に
  app.use(bodyParser.raw({type: 'application/octet-stream', limit : '2mb'}))
     // limit の値は適当に設定してある

  • なお、bodyParserは、以前は express に添付されていたが今は独立したモジュール（ライブラリ）として提供されているので、 これを使うためには事前に、

    npm install body-paraser

    しておく必要がある。

    • 念のため付記しておくが、モジュール express も、node.js 標準添付ではないので、（もし初めて使う人がいれば）同様の方法で事前にインストールしておく必要がある。
    • ついでながら、モジュール名 body-paraser をrequireしたオブジェクトを保持する変数名として、body-parser をそのまま使えない（理由は前に述べた）ので、 こういうケースでは bodyParser を使うことになる。

• ファイルの保存（ディスクへの書き込み）は、にfs モジュールを使う。app.post の中核部（前節で保留した箇所）は以下のような処理になるだろう。

  // 先頭部（が適切だが、fs を使う直前でも差支えはない）
  const fs = require('fs')
  
  // ...
  
  // app.post の中
    fs.writeFile(`./dat/${req.params.fname}`,req.body,(err)=>{
      if(err) console.log(err);
      else console.log('write end');
    })

  • writeFileには、ファイル名（或いはパス名；文字列として）、書き込む内容、コールバック、の３つを与える。
  • コールバックは書き込みが完了（または異常終了）した時点で呼ばれる。このコードでは１回だけの書き込みなので（結果を見た複雑な判断や処理は必要ないとして）、 結果をログ表示するだけの定型的な処理だけ行うことにしておく。
  • ファイルを書き込むべき場所は、カレントディレクトリ（このプログラムを起動した場所）の下にある dat としてある。起動する前にそのディレクトリは用意しておくこと。

アップローダページをサーバから渡す

• 本ページの冒頭で作ったアップローダのWebページ（pug または html）、 当初は独立したページとして（エクスプローラから開く、といった使い方を前提に） 作っていた、が、

  このページもサーバから提供するようにしよう。

• htmlファイルを準備してもいいが、せっかくpugがあるので、expressの view engine として pug を使い、そのエンジンでhtml化したものをブラウザに送る形にしよう。

• まず、（サーバを起動するディレクトリを起点として）ディレクトリ views を作り （Webアプリケーションフレームワークでは定番の場所、express ではデフォルトの置き場所）、 先に作った pug ファイルを、そこに移す（コピーでもいい）。 ファイル名は views/up.pug となる、と仮定する。

  • サーバのコードに以下のコードを挿入。

  // 下記の app.get よりも前（かつ const app は設定された後）に
  app.set('view engine','pug')
  
  // app.post の直前ぐらいに入れる
  app.get('/up',(req,res)=>res.render('up'))

  • 今度は getメソッド（Webページを表示させるだけなので）。パラメータやデータの受け渡しは、ない。
  • モジュール（ライブラリ）pug が事前にインストールされていることが条件になる（のはすでにおわかりだろう）。これを app.set でレンダリングエンジンとして登録する。
  • res.render でそのエンジンが呼び出され、views ディレクトリにある up.pug を テンプレートエンジンでhtmlに変換した結果がブラウザにHTMLページとして送られる。

• このサービスを通じて提供される入口ページを表示させるためには、（サーバが起動している状態で）

  http://localhost:58080/up

  にアクセスすることになる（やってみて下さい）。

• 静的ファイルの提供：

  • クライアント側JavaScriptコードを pugファイル（htmlファイル）の中にべた書きするのでなく外部 .js ファイルに出してまとめる場合、pugファイルには、

    script(src="/f/upld0.js")

    のように記述する。

  • 当該JavaScriptファイルは、ここでは　upld0.js という名前で、 サブディレクトリ（名前は files としておく）に置かれていることを前提とする。

  • このファイルを、要求があった時にそのまま（静的ファイルとして、つまり元来のWebで使われてきている流儀で）ブラウザに提供させるために、 下記のようなオマジナイが必要になる。

    app.use('/f',express.static('files'))

    • サーバ機の、（サーバプログラムを起動したディレクトリを起点としてそのサブディレクトリ）files を、静的ファイルの置き場所として設定し、
    • 資源 /f/xxxxx への要求があった時には、そこに置かれたファイルをコンテンツとして返す、というルールを宣言することになる。
    • れもルーティングの一種。
    • この例では、上記の scriptタグが求める外部ファイル ‘/f/upld0.js’ への要求がサーバに送られると、ファイルfiles.upld0.js を返す。
    • 入口ページが（URL的には） /up という場所（ドキュメントルートの直下、と考えられる）なので、
    • 上の資源要求は そこを起点として、‘f/upld0.js’（相対パス）でも、‘/f/upld0.js’ （絶対パス）でも、ここでは意味的に変わらない。

まとめ

• これまでに解説したコードをまとめたものを以下に示しておく。
  1. 入口ページ（の pugソース） => views に置く
  2. クライアント側 .js　コード => files に置く
  3. サーバプログラム => nodeコマンドで起動