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については記事を改めて説明します。

2022/03/15 (火)

PHPで何か作るよ(1) - ニコ動マイリスト取得

●「PHPで何か作るよ」コーナー始めました

  • JavaScriptに続き、PHPでも何か作ります。
  • まずは先日の「nnplay」用の動画データ作成ツールから。
  • できました→ nnlist(正式名:NicoNicoLister)

  • nnlistは2つの部分から構成されます。
    nnlist.html — HTMLとJavaScriptで書かれたフロントエンド。
    nnlist.php — ニコニコ動画のマイリストを取得する実働班。
  • 今回の記事ではPHP部分のnnlist.phpをとりあげます。

●nnlist.phpの呼び出し方

  • nnlist.phpは、URLに「?id=マイリスト番号」を付けて呼び出します。たとえば次のような感じです。
    https://and.crap.jp/desga/nanika/nnlist.php?id=65848924
  • ちなみにこれは、そば処五三郎さんの「架空ゲームシリーズ」のマイリストを取得しています。
  • 実行すると次の結果が得られます。
    <!– mylist/65848924 「架空ゲームシリーズ」 by そば処五三郎 –>
    <option value=”sm7038338”>チートクエスト</option>
    <option value=”sm7357746”>破格の錬金術師</option>
    <option value=”sm7542750”>魔法が使えるゲーム</option>
    <option value=”sm7966523”>親切設計のゲーム</option>
    <option value=”sm8175013”>イエスマン</option>
    <option value=”sm35443647”>設定を変えられるゲーム</option>
    <option value=”sm35538035”>設定を変えられる実況プレイ動画</option>
    <option value=”sm35628885”>属性の多い道具店</option>
  • これをそのままnnplayのHTMLに組み込んで利用するわけです。

●nnlist.phpのソースコード

  • ソースコードはこんな感じです。
  • どの行もPHPの基本処理で、特に説明とかいらない感じですが…。
  • いちおう備忘メモとして、いくつか能書きを並べてみます。

  • 5行目: URLに付けた引数「id=番号」は、$_GET[’id’]で取得できます。
  • もしid引数がない場合、$_GET[’id’]を取得すると警告がでますが、
  • null合体演算子「??」でチェックすると、その警告を回避できます。

  • 12~14行目: ニコ動のマイリストは次のようなURLで取得できます。
    例→ https://www.nicovideo.jp/mylist/65848924?rss=2.0
  • 外部のWebサイトからデータを取得するにはfile_get_contents()を使います。
  • このとき13行目のオプションをアクセス時に付けるとエラー中断を回避できます。

  • 17~20行目: 特殊配列 $http_response_header[] には、すべてのHTTPレスポンスヘッダが入ります。
  • $http_response_header[0] は「HTTP/1.1 200 OK」などのステータスです。
  • ステータスコードが200なら成功です。

  • 24行目: ニコニコ動画から得た結果をXMLとして解析します。
  • XMLの処理方法はいろいろですが、当ブログではSimpleXMLを利用します。

  • 29行目: SimpleXMLライブラリでは、XMLの要素の入れ子をアロー演算子でたどれます。
  • たとえば <rss>内の <channel>内の <title> という要素の入れ子は、
    「$rss->channel->title」と書けるわけです。

  • 31行目: ただしXMLの要素名が「PHPの変数名」として使えない文字を含む場合は、特別な処理が必要です。
  • たとえば <dc:creator> という要素は、名前にコロン「:」が入るため、「$rss->channel->dc:creator」などと書けません。
  • 今回のプログラムではxpath(”//dc:creator”)ですべての<dc:creator>を配列化し、その最初の1個を取り出しています。
  • ちょっと強引でした。もっと良いやり方があるかもしれません。

  • ★追記★
  • <dc:creator> を得る別解です。このほうが良いかも。
  • 「dc:」で始まる要素をchildren()で列挙した上でcreatorを得ます。
    $creator = $rss->channel->children(”dc”, true)->creator;

2022/03/13 (日)

JSで何か作るよ(2) - 動画ビューア解説

●動画ビューアのソースコード

  • 前回の記事で作ったニコニコ動画視聴ツールの解説編です。
  • ツール名を「NicoNicoPlayer」とします。略してnnplay。
  • ブログだとソースが読みにくいので別ページに切り出しました。
  • 参照→ nnplay.html

  • GitHubにもソースコードを上げました。

●JavaScriptの解説

  • <div id=”nico_area”>は動画表示エリアです。
  • このnico_area内にニコニコ動画を埋め込むには、次のようなscript要素を挿入します。
    <script src=
      “https://embed.nicovideo.jp/watch/動画ID/script?w=幅&h=高さ”>
    </script>
  • ただしこれは「nico_area.innerHTML = ‘~’」ではうまくいきません。
  • 動的にscript要素を読み込ませるには「nico_area.appendChild()」を利用する必要があります。
  • それをおこなっているのが、show_video()関数です。

  • <select id=”nico_id”>は動画選択リストです。
  • ユーザーが動画タイトルを選択するとinputイベントが発生し、表示動画を変更します。
  • 動画リストは<select>内にハードコーディングしてあります。
  • この動画リストは、別ツール「nnlist」で取得できます。

  • <button id=”go_prev”><button id=”go_next”>は移動ボタンです。
  • クリックするとclickイベントが発生し、動画リストを前後に移動します。

●localStorageの利用

  • このスクリプトでは「前回表示した動画番号」を記録しています。
  • 記録場所としてlocalStorageを利用します。
  • これは「変数名, 値」のペアをローカルPCに保存する機能です。
  • 次のように使います。
    値の書き込み: localStorage.setItem(変数名, 値);
    値の読み出し: 値 = localStorage.getItem(変数名);

●HTML要素のidによる直接指定について

  • 「id=”識別名”」を持つHTML要素は「window.識別名」でアクセスできます。
  • たとえば<div id=”nico_area”>は「window.nico_area」です。
  • さらにWebページ内では、トップレベルの「window」は省略できるので、
  • <div id=”nico_area”>なら、単に「nico_area」でも指定できます。
  • 当ブログではこの方法を利用してスクリプトを簡略化しています。

  • ただしidによるHTML要素の直接指定は、一般に非推奨です。
  • うっかりidと同じ変数名などを使ってバグの元だからです(変数が優先)。
  • 推奨されるのは次のように明示的にオブジェクトを得る方法です。
    const nico_area = document.getElementById(’nico_area’);
    または
    const nico_area = document.querySelector(’div#nico_area’);

2022/03/08 (火)

JSで何か作るよ(1) - 動画ビューアしおり付き

●当サイトはプログラミング関係のネタも扱います

  • 本当は最先端のプログラミング言語などにも触れたいところですが、
  • そういうのは勉強不足でなにも書けません…。
  • まあ当面は比較的ポピュラーなJavaScriptとPythonで遊びましょう。
  • 最初は何か簡単なツールとか作っていきたいです。

●動画リスト再生ツールしおり付き

  • というわけでJavaScriptで作りました。
  • ニコニコ動画にあるハリアーPの「ノベマス短編マイリスト」を視聴するツールです。
  • 下部の動画選択欄でタイトルを選ぶと、その動画を表示します。

  • 最後に見た動画番号を記録しているので(しおり機能)、
  • あとでこのページをリロードしたとき、続きから見ることができます。
  • スクリプトの詳細については、次回の記事で説明します。たぶん…。

  • ★追加★
  • 戻ったり進んだりボタンを追加:

2022/03/05 (土)

FlatPressの修正 - タイムゾーンを設定する

●RSS内の時刻(pubDate)が9時間ずれている件

  • 人気ブログランキングを見て気がついたんですが…、
  • うちの記事の投稿時間が、9時間ずれて認識されてます。
  • どうやらRSS内のpubDateのタイムゾーンが違ってます。
  • Sat, 05 Mar 2022 18:09:32 +0000 ←×GMTと解釈される
  • Sat, 05 Mar 2022 18:09:32 +0900 ←〇こうなってほしい

●FlatPressを修正しました

  • とりあえず最初にタイムゾーンを設定すればいいんじゃ?
  • → date_default_timezone_set(’Asia/Tokyo’);
  • これでRSSのタイムゾーンは正常になりました。
  • 修正パッチ: Update index.php

  • でも今度はブログ本体が9時間ずれました。あれのせいだな。
  • → [管理者用ページ] > [設定] > [投稿時に加算する時間] = 0
  • なんかうまくいきました。これで解決です。たぶん。