共同運営マガジンを調べるコードを生成ＡＩに書かせてみた

じぃじ初の有料記事ですが、全文無料で読めます。
先日投稿した次の記事ではランキング表を手作業で作ろうとしたのですが、あまりに頻繁にマガジンへの更新が発生するので断念したと書きました。

こういう時、情報収集をプログラムに任せるのは良いアイデアです。ということでプログラミングをご存知ないかも知れない僕のフォロワーの皆さまに
その雰囲気だけでも伝えてみることにしました。

プログラムで共同運営マガジンの情報をゲット

実は多くのウェブサイトは人間が読むためのページ以外に、プログラムが読むためのページを用意しています。ここではクロサキナオさんの共同運営マガジンを対象にNOTEの「プログラムが読むページ」を紹介します。

【みんなで創る】クロサキナオの運営マガジン｜クロサキナオ｜note

クロサキナオさんのマガジンページの URL の部分を拡大してみると…

人間が読むウェブページ

青で囲った部分がクロサキナオさんのマガジンページのＩＤです。このＩＤだけをコピーして、プログラムが読むページのURLに貼っつけると…

プログラムが読むページのURL

こんな風な文字だらけのページが表示されます。
これがプログラムが読むページです。

プログラムが読むページ

Chrom の場合は清書してくれるプリティプリントの機能があるので、左肩のボタンを押すと…

プリティープリントありのページ表示

ちょっと清書されましたが…文字だらけは相変わらずです。実はこのページにはクロサキナオさんのマガジンに関する詳細情報が埋め込まれています。じぃじのようなプログラマは、このようなページから情報を得る自作のプログラムを書いて、いろんな仕事をしています。

生成ＡＩを使ってプログラムを書いてみる

最近流行の生成ＡＩは人間が書いたような文章を作成してくれることをご存知の方も多いかと思います。実はプログラミングも彼らの得意技のひとつです。コンピュータにやって欲しい仕事を説明する文章（プロンプトと言います）を書くとそのようなプログラムを作ってくれます。

例えば、プログラムが読むページを読み込んで、そこから欲しい情報を取り出す一番小さなプロンプトはこんな感じです。

次の条件でプログラムを書いて
* nodejs で実行できる javascript のプログラム
* RESTAPI にアクセスして、その応答を表示する簡単なプログラム
  + エンドポイントは https://note.com/api/v1/layout/magazine/ma1ce060406a2
* 応答してきたJSONデータのうち次のプロパティを表示
  + data.magazine_layout.updated_at
  + data.magazine_layout.created_at
  + data.magazine_layout.note_count
  + data.magazine_layout.editors_count

このプロンプトを書くためには、プログラミングの知識が必要なんですが、長くなるのでここでは説明は割愛します。魔法の呪文だと考えてください。

このプロンプトをコピーして生成ＡＩに貼り付けるとプログラムを書いてくれます。例えば OpenAI の ChatGPT の場合はこんな感じ。

const https = require('https');

const url = 'https://note.com/api/v1/layout/magazine/ma1ce060406a2';

https.get(url, (resp) => {
  let data = '';

  // データがチャンクで送信されるたびに呼び出される
  resp.on('data', (chunk) => {
    data += chunk;
  });

  // 応答が完全に受信されたら呼び出される
  resp.on('end', () => {
    try {
      const jsonData = JSON.parse(data);

      // 必要なプロパティを表示
      console.log('Updated At:', jsonData.data.magazine_layout.updated_at);
      console.log('Created At:', jsonData.data.magazine_layout.created_at);
      console.log('Note Count:', jsonData.data.magazine_layout.note_count);
      console.log('Editors Count:', jsonData.data.magazine_layout.editors_count);
    } catch (error) {
      console.error('Error parsing JSON:', error.message);
    }
  });

}).on('error', (err) => {
  console.error('Error with the request:', err.message);
});

一方、Google の Gemini だとこんな感じ。

const https = require('https');

const options = {
  hostname: 'note.com',
  port: 443,
  path: '/api/v1/layout/magazine/ma1ce060406a2',
  method: 'GET'
};

const req = https.request(options, (res) => {
  let data = '';

  res.on('data', (chunk) => {
    data += chunk;
  });

  res.on('end', () => {
    try {
      const parsedData = JSON.parse(data);
      console.log('updated_at:', parsedData.data.magazine_layout.updated_at);
      console.log('created_at:', parsedData.data.magazine_layout.created_at);
      console.log('note_count:', parsedData.data.magazine_layout.note_count);
      console.log('editors_count:', parsedData.data.magazine_layout.editors_count);
    } catch (error) {
      console.error('Error parsing JSON:', error);
    }
  });
});

req.on('error', (error) => {
  console.error('Error:', error);
});

req.end();

さらにマイクロソフトの Copilot の場合はこんな感じ。

const https = require('https');

const url = 'https://note.com/api/v1/layout/magazine/ma1ce060406a2';

https.get(url, (resp) => {
  let data = '';

  // A chunk of data has been received.
  resp.on('data', (chunk) => {
    data += chunk;
  });

  // The whole response has been received.
  resp.on('end', () => {
    try {
      const jsonData = JSON.parse(data);
      const magazineLayout = jsonData.data.magazine_layout;
      console.log('Updated At:', magazineLayout.updated_at);
      console.log('Created At:', magazineLayout.created_at);
      console.log('Note Count:', magazineLayout.note_count);
      console.log('Editors Count:', magazineLayout.editors_count);
    } catch (error) {
      console.error('Error parsing JSON:', error);
    }
  });

}).on('error', (err) => {
  console.error('Error with the request:', err.message);
});

以上の３つのコードの見た目は、似ているような？そうでもないような？
感じですが、いずれも同じように動いてくれます。

３つのコードを実行してみる

プロンプトで指定したとおり、３つの生成ＡＩに書いてもらったプログラムは javascript と呼ばれるプログラミング言語で記述されています。この言語は皆さんが使っている Chrome や MS Edge、Apple Safari、Firefox など主要なブラウザーで実行することができます。ですが、生成ＡＩに「ブラウザーで実行できるプログラムを書かせる」プロンプトは長くなってしまうので、まずは「単純な仕事を実行するプログラムを書く」プロンプトを用意することが多いです。その場合、生成ＡＩが書いたプログラムをテストするためにはnodejs と呼ばれるソフトウェアを使います。

Node.js — Introduction to Node.js

この nodejs は元々 Chrome の開発から派生したプロジェクトで、ブラウザーが搭載している javascript を実行する部分（エンジン）だけを取り出して、独立したソフトウェアとしてリリースしました。nodejs の説明は、これまた長くなるので後日にしますけども、さっきの生成ＡＩが書いた３つのコードを実行すると次のようになります。

$ node ChatGPT.js
Updated At: 2024-08-24T08:03:16.000+09:00
Created At: 2023-10-09T13:13:12.000+09:00
Note Count: 60137
Editors Count: 839
$ node gemini.js
updated_at: 2024-08-24T08:03:16.000+09:00
created_at: 2023-10-09T13:13:12.000+09:00
note_count: 60137
editors_count: 839
$ node Copilot.js
Updated At: 2024-08-24T08:03:16.000+09:00
Created At: 2023-10-09T13:13:12.000+09:00
Note Count: 60137
Editors Count: 839
$

３つのプログラムとも無事に同じデータを取ってくることができました。
ちょっと説明すると "Updated At" はクロサキナオさんのマガジンページが更新された時間、"Created At" が最初に作られた時間、"Note Count" はマガジンに登録されている記事数、"Editors Count" はこのマガジンに参加している投稿者の数になります。この４つの数字がわかると、じぃじがやっている YouTuberランキングの集計法でランキングを作ることができます。

ということで…

ランキングを作るための情報が取り出せたところで今回は終了します。実は「有料記事を書くならプログラミングだろうなぁ…」ってじぃじはずーっと考えてまして、今回チャレンジしてみたのですが説明が多すぎて昨夜は挫折してしまいました。そこでプログラミングを全くご存知ない方にも雰囲気が伝わるように削りに削ったのがこの記事です。いかがだったでしょうか？

いろいろ端折ってるのでプログラミングをご存知の方からツッコミがあるかと思いますので、この記事にコメントをつけてもらえれば回答します。あるいはじぃじの Twitter アカウントにＤＭを送ってもらっても構いません。

Tweets by m04uc513

このシリーズはしばらく続けようと考えてます。次回はランキングを作るプログラムを生成ＡＩに書かせてみたいと思ってます。（つづく）

#note毎日更新
#共同運営
#共同マガジン
#クロサキナオ
#マガジン
#生成AI
#プログラミング
#ChatGPT
#Gemini
#Copilot