2022/03/22 (火)

JSで何か作るよ(3) - 外部ツールの呼び出し

●目標:JavaScriptからPHP製ツールを呼び出す

  • 前回は動画リスト生成ツール「nnlist.php」を作りました。
  • 今回はそのnnlist.phpをHTMLページから呼び出してみます。
  • 外部ツールを呼び出すにはJavaScriptのfetch()を利用します。

●nnlist.htmlの使い方

  • このページを開きます→ nnlist.html
  • 「ニコ動マイリスト番号」を入力し、「データ作成」をクリックします。
  • マイリスト番号は「mylist/数字」という形式で指定します。
    例→ mylist/65848924

  • このとき入力の一部に「mylist/数字」が含まれていればオーケーです。
  • ニコ動マイリストのURLをそのままコピー&ペーストすると簡単です。
    例→ https://www.nicovideo.jp/mylist/65848924?rss=2.0

●nnlist.htmlのソースコードを見る

  • ソースコードを示します。
  • 以下今回の注目ポイントについて能書きを並べます。

  • 49行:「データ作成」ボタンを押すと、このget_result()を実行します。
  • 51行: 入力欄に「mylist/数字」があるかチェックします。
  • 57行: 数字部分をマイリスト番号としてidに取り出します。
  • 61行: fetch()で「./nnlist.php?id=マイリスト番号」にアクセスします。
  • 62行: fetch()成功。HTTPレスポンスからコンテンツを取得します。
  • 63行: 取得したコンテンツを表示します。
  • 64行: fetch()失敗。エラーを表示します。

  • 上記はfetch()の基本形です。次の構造をしています。
    fetch(~).then(~).then(~).catch(~);
  • これはまずfetch()→成功したら最初のthen()→成功したら次のthen()、と順次実行されます。
  • 途中で失敗すると最後のcatch()が実行されます。
  • ただしこの動作は、JavaScriptのPromise機能を利用して実現されます。
  • そのためfetch()に時間がかかっても、プログラム自体は停止せず動きます。
  • このあたりはPromiseについての理解が不可欠なので、記事を改めて説明したいと思います。

●クリップボードの利用

  • 67行:「コピー」ボタンを押すと、copy_result()を実行します。
  • 69行: クリップボードは非SSLのHTTP接続環境では利用できません。これのチェックは「navigator.clipboardの有無」を見るのが簡単です。
  • 80行: クリップボードにテキストをコピーします。ここでもPromiseを利用していて、成功ならthen()、失敗ならcatch()を実行します。
  • Promiseについては記事を改めて説明します。