常連

●やりたい事ですが、C#で作成されたWindowsで動作するUI画面でボタンを押下すると、**①ブラウザが自動で起動**（規定のブラウザでOK）して、**②指定されたURL**（aspで作成されたページです）に対して**③データをPOST**して、webサーバー側で受けたPOSTデータを解析して**結果を起動したブラウザに表示**する、です。

●実は現在、上記の動作は実際にシステムとして実現しており、Internet Exploer上で正常に動作しています。実現方法は**InternetExplorerMedium**を使用して、URLの指定とPOSTデータをNavigateメソッドに渡して上記の事が実現しています。

しかしこの度、**IEのサポート終了**に伴いEdgeで動作するよう改修が必要となりましたが、InternetExplorerMediumは当然使えなくなりますので規定のブラウザにEdgeを指定して（システム要件としてOKが出ています）そこに従来のIEで行っていた事をやる、となりました。
また、**EdgeDriver**というEdgeに特化したクライアント側のEdge操作ライブラリがMicrosoftより提供されていますが、各端末への配布の問題があり**基本的にこれは使用しない前提**での実装となります。

●こちらのサイトの例を参考に実装して実行し、指定したURLへPOSTしてレスポンスの中に期待した値が返却される事までは確認できましたが、**当然ながらブラウザは起動せず**にプロトコルとしてのPOST～RESPONSEのみの動作にとどまっています。

dobon.net POSTでデータを送信する
https://dobon.net/vb/dotnet/internet/webrequestpost.html

●InternetExplorerMediumを使用すれば都合よく**ブラウザ起動＋URL指定＋POSTデータの送出**までが一気にできますが、これに代わって同じ事を実現する方法を知りたく。

ブラウザを自動起動させるためにはURLを指定してSystem.Diagnostics.Process.Start()とすれば規定のブラウザは立ち上がりますが、同時にPOSTする仕組みは当然なく、URLにクエリストリングでパラメータを付与するしか方法がありません。

今回URLとして指定されているaspで作成されたページはGETではなくPOSTでパラメータを要求しているため、クエリストリング方式では動作しないのです。よって、**ブラウザ起動＋URL指定＋POSTを一回で**完結させる方法があればお教えください。

※Javascriptなどでwebページ側にスクリプトを仕込んでGETしたパラメータを自力でPOSTする方法もありますが、今回はwebページ側は手を入れない前提でお願いします。


C#のアプリケーションでブラウザ起動＋URL指定＋POSTを同時に行いたい

## テーマ、知りたいこと

ETagを使用した際、ハッシュ値がマッチし、サーバから status_code = 304 し、ブラウザのキャッシュを使用させる際、
javascriptフェーズを再起動させない方法はありますでしょうか?

## 背景、状況

web上の業務システムにおいて、有効に働きそうなETagという仕組みを使用してみたのですが、
確かにbody分の帯域は節約できるものの(検証のためにサーバの一連の比較用レスポンス作成の処理は避けられないのは仕方ないとして)
ブラウザのscriptフェーズは再起動するため、重いjsが絡むエリアにおいて感覚的に大きな速度改善は
みられませんでした。

もし、scriptフェーズまでスキップしたものを単にキャッシュさせて、304が来た際に単にそれ(完成済みのhtml)を出すだけにする、
ような設定ができたら、かなりの速度改善が期待できるのですが...

確かにscriptを再起動しなければ、例えば現在時刻を表示するような処理を書いていた場合、古いものになってしまうわけなのですが、
そういった処理が無いエリアでは、この再起動は無駄になるように思いますので、明示的にオフにできたらと考えております。



ご意見、ご指摘等賜れましたら助かります。


ETag script を再発火させない方法はあるか

## テーマ、知りたいこと

djnago のタグはサーバ側で処理され、通常のHTMLに変換され、利用者のウェブブラウザに通常のレスポンスが送出されるかと思います。
そこで疑問があります。

例えばかなり重いクエリセットオブジェクトを渡す場合、HTML内で回す場合には
当然{% for %}を使わなくてはいけませんが、
JS内で処理する場合、{% for %}を使うのか、for(;;)を使うのかの二択になるかと思います。

前者
```
{% for obj in queryset %}
    console.log("{{ obj.id }}")
{% endfor %}
```

後者
```
for (var i = 0; i < "{{ queryset.length }}"; i++){
    console.log("{{ queryset.forloop.counter0.id }}")
}
```

上2つでは、速度上の違いは発生するものでしょうか?
結局後者でも各ループにおいてサーバ側で処理しなくてはいけないコンテキストが出現するため、
レスポンスがウェブブラウザに渡るまでの速度に違いは出ないと考えております。

現在システムが肥大化しており、少しでも速度に関連するもの、またはとりあえずレスポンスが少しでも早く渡ることができれば、と考えています。

やはりとりあえずの速度を上げるにはデータの受け渡しの部分を非同期にするしかないでしょうか...




django "{% for  %}"  VS "for ()" 表示速度上の疑問

### 前提
インターネットから誰でもアクセスできる一般向けWebアプリケーションを開発しています。
その中で、ユーザに回答してもらうフォームをHTMLで作成しており、
HTML5のバリデーションを使って必須項目の入力チェックを行っています。

### 発生している問題
フォーム内のとある項目にselectタグのrequired属性を付けて、必須回答項目としています。（仮で「社会人ですか？」とします）
大半のユーザからは回答をもらっているのですが、先日、１人のユーザだけその項目のみ回答なしでのフォーム送信がありました。（その他の必須項目はちゃんと入力済となっており、送信処理自体も正常完了している状態。特にエラー等もありません）
必須項目としていてバリデーションがあるのに、なぜ入力なしで送信してこれたのか、不明な状態です。

### 該当のソースコード
```html
<h3>社会人ですか？</h3>
<select class="***" name="***" id="***" required>
  <option value>選択してください</option>
  <option value="yes">はい</option>
  <option value="no">いいえ</option>
</select>
```

### お伺いしたいこと
- ブラウザの問題もあるかもと思い、色々と調べてみましたが、明確な答えを見つけることはできませんでした。
- ただ、以下サイトにはsafari 15.6が「対応していない」旨が確認できました。
   https://caniuse.com/?search=required
   上記サイト内の`HTML element: select: required` の項目
- しかし、mozillaのドキュメントを参照すると、Safariは `Full Support` と出てきました。
   https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#browser_compatibility
- 上記２つの異なる情報が出てきている状況です。
- mozillaの方が信頼性高いと思うので前者のサイトは間違いなのかな？と思いつつ、サイトの見方が間違っている可能性もあるので、一度お伺いした次第です。

何か情報を持っておられる方や、調査先のサイトが（見方も含めて）適切かどうかなど、もしわかれば、お伺いしたいと考えています。
該当ユーザが特殊なブラウザ設定をしてしまっている可能性も考えられなくはないため、はっきりとした答えを得ることは難しいかもしれませんが、何か少しでもわかることがあれば、参考にしたいと考えています。
（フロントエンドは特に経験薄いため「対応ブラウザを正確に知ることは実は難しいよ」的なご回答でも大丈夫です）
お手数をお掛けしますが、どうぞよろしくお願いいたします。

※こちらからお伺いしておきながら大変恐縮ですが、解決方法については別途検討したいと考えており、ここでは一旦、タイトル通りの「selectタグのrequired属性の対応ブラウザの調べ方」についてお伺いできればと考えております。

### 調査したこと
- Webサーバのログ（NginxのUserAgentログ）によると該当ユーザのブラウザは、 `iOS 15.6 Safari 15.6` のiPhoneを使用されているようです。
- アプリケーションログによると、該当の処理においては、フォームPOST時の送信パラメータに「社会人ですか？」の項目は含まれていなかったため、バックエンド側の問題でなく、そもそもユーザが未入力であったと想定しています。
- 一般ユーザかつiPhoneなので、Dev tool等でフォーム改変した等は考えづらいかなと思っています。

### 補足情報（FW/ツールのバージョンなど）
HTML5


HTML5のフォームバリデーション：selectタグのrequired属性の対応ブラウザについて

### 実現したいこと
PCで配布しているhtmlファイルのjsをスマホで動かしたい。
基本的なjsはscriptタグに直接記述しています。ただ、関数の数が多いため外部ファイルの読み込みの必要があるのですが、その際エラーが発生しています。
PCでは動作していますが、スマホブラウザではエラーが出ます。

### 前提
VSCodeのLive Serverを利用し、ポート番号5500でhtmlを公開します。ここで同一LANに接続しているスマホでこのhtmlにアクセスします。
`IPアドレス:ポート番号/path`の様な形でhtmlにアクセスできました。
利用したいjsですが、クラスを宣言して、その中で関数を作成しています。これを利用したい。外部jsファイルを読み込むために
```JavaScript
<script src="http://IPアドレス:5500/path/example.js"></script>
```
と記述し
```JavaScript
const example = new Example();
```
として関数を利用しています。PCでは問題なく動作するのですが、スマホでアクセスした際に「Cannot access uninitialized variable」となります。エラー内容的には「初期化していない変数を利用した際に出るエラー」のようで原因を特定してみようと色々と試し、
`const example = new Example();`
こちらをコメントアウトすると
`Can't find variable: example`というエラーが発生することを確認。(コメントアウトしているので当然見つからないわけですが)
おそらく、jsファイルが読み込めず変数が初期化できないまま利用しているので
「Cannot access uninitialized variable」というエラーが発生したと思います。

### 知りたいこと
外部jsの読み込み方法です。PCでは動作しているので
ローカルではない、外部からのアクセスに問題があって書き方を変える必要があるのか、スマホ特有のエラーにより書き換えの必要があるかなど知りたいです。

### 追記
ファイルの開示ですが、公開できないコードなので中途半端な説明になってしまいました。

・スマホはiOSでブラウザはSafariです。
・PCはmacでブラウザはGoogleChromeですが、Safariでの動作も確認できてます。
・script内にasync関数は入っています。PCローカルのjsonファイルの受け渡しをする必要があるため非同期関数にしています。jsonファイルの受け渡し自体はスマホブラウザでも確認できました。

最後に大まかなコードの流れだけになってしまいますが載せておきます。
ただ、下記のように簡単なコードを作成すると普通に動作したのでjsファイルの読み込みが悪いのではなく、外部jsファイルの中身自体がスマホで動作しないコードがあるのかもしれないです...

```html
<!DOCTYPE html>
<html>
  <head>
    <title>HTMLテンプレート</title>
    <button onclick="createSentence()">クリック</button>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <script src="../path/example.js"></script>
    <script>
      const url1 = "http://IPアドレス:5500/path/file.json";
      const url2 = "http://IPアドレス:5500/path/file2.json";


      let file1 = { key1: "value1", };
      let file2= { key1: "value1", };
      // jsonファイルの受け取り
      const fetchData = async () => {
        try {
          await Promise.all([
            fetch(url1).then((response) => response.json()),
            fetch(url2).then((response) => response.json()),
          ])
            .then((data) => {
              file1 = data[0];
              file2 = data[1];
            })
            .catch((err) => {
              console.error("JSONファイルの取得に失敗しました", err);
            });
        } catch (err) {
          console.log(err);
        }
      };

      fetchData();
      
      const example = new Example(1, 2);

      const createSentence = async () => {
        alert(example._add());
      };
    </script>
  </body>
</html>

```
```javascript:example.js
class Example {
    constructor(a, b) {
        this._a = a;
        this._b = b;
    }

    _add() {
        const c = this._a + this._b
        return c;
    }
}
```


スマホブラウザでのjsファイルの読み込み


UseraAgentによるブラウザ判定でデバイスを割り出して処理を記述していく原始的な手法から、なぜ進化しないのか
デバイス情報は個人情報にあたるのか知りませんが、UserAgentによる判別も意味をなさなくなるような記事を目にしました
実際デバイス情報がわかったところでどのような弊害があるのでしょうか
慎重になり過ぎてるような気がしますが、WEB開発者の方々はどうお思いなんでしょうか
デバイス判定が正確にできれば、もっと開発の幅が広がると思うのですが？

なぜ十数年前から進捗がないのか

### 実現したいこと

 - "@aws-sdk/client-cognito-identity-proivder"をインポートしたい

### 前提

TypeScriptでブラウザ上でAWS CognitoにSRP認証してトークンを取得するプログラムを作成しています。
ブラウザで実行時に、エラーが発生します。

コマンドライン上では動くのですが、ブラウザでは次のようなエラーメッセージが出ます。

作成しているソースコードはGitHubにアップしましたので、よろしければこちらもご確認お願いします。

 - [ソースコードのリポジトリ](https://github.com/kano1101/srp)

### 発生している問題・エラーメッセージ

```
% rm -rf ./node_modules && npm install && npx tsc && http-server
```
上記実行後にブラウザ(Google Chrome)で`localhost:8080`にアクセスし、コンソールを確認するとこのようなエラーが出てしまいます。
このエラーを解消したいです。
```
Uncaught TypeError: Failed to resolve module specifier "@aws-sdk/client-cognito-identity-provider". Relative references must start with either "/", "./", or "../".
```
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-05-25/3b8db84f-cb6d-4c51-8fa9-77d8b0b1c930.png)

### 該当のソースコード

#### index.html
```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <script src="./dist/index.js"></script>
</body>
</html>
```

#### index.ts
```ts
import {
  CognitoIdentityProviderClient,
  InitiateAuthCommand,
  InitiateAuthCommandOutput,
  RespondToAuthChallengeCommand,
  ChallengeNameType,
  RespondToAuthChallengeCommandOutput
} from '@aws-sdk/client-cognito-identity-provider';

// @ts-ignore
import { default as AuthenticationHelperWrapper } from 'amazon-cognito-identity-js/lib/AuthenticationHelper.js'
// @ts-ignore
import { default as DateHelperWrapper } from 'amazon-cognito-identity-js/lib/DateHelper.js'
// @ts-ignore
import { default as BigIntegerWrapper } from 'amazon-cognito-identity-js/lib/BigInteger.js'

import { SecretsManagerClient, GetSecretValueCommand } from '@aws-sdk/client-secrets-manager';

// @ts-ignore
import { createHmac } from 'crypto';

const challengeResponse = async ({
  region, secretsManagerId, username, password,
}: {
  region: string,
  secretsManagerId: string,
  username: string,
  password: string
}) => {

  const AuthenticationHelper = AuthenticationHelperWrapper.default;
  const DateHelper = DateHelperWrapper.default;
  const BigInteger = BigIntegerWrapper.default;

  const secretsManagerClient = new SecretsManagerClient({ region: region });
  const command = new GetSecretValueCommand({ SecretId: secretsManagerId });

  const secretsManagerClientResponse = await secretsManagerClient.send(command);

  const secretString = secretsManagerClientResponse.SecretString || 'failed to response secrets manager client';
  const secretValue = JSON.parse(secretString);

  const CLIENT_SECRET: string = secretValue.COGNITO_CLIENT_SECRET
    || 'missing client secret';
  const CLIENT_ID: string = secretValue.COGNITO_CLIENT_ID
    || 'missing client id';
  const USER_POOL_ID: string = secretValue.COGNITO_USER_POOL_ID
    || 'missing user pool id';
  const USERNAME: string = username;
  const PASSWORD: string = password;

  const client = new CognitoIdentityProviderClient({ region: REGION });

  const extractUserPoolName = (userPoolId: string) => {
    const userPoolName = userPoolId.split('_')[1];
    return userPoolName;
  }

  const calculateSRP_A = async (userPoolId: string) => {
    const userPoolName = extractUserPoolName(userPoolId);
    const authenticationHelper = new AuthenticationHelper(userPoolName);
    const SRP_A = authenticationHelper.largeAValue.toString(16);
    return {SRP_A, authenticationHelper};
  }
  const { SRP_A, authenticationHelper } = await calculateSRP_A(USER_POOL_ID);


  const SECRET_HASH = createHmac('sha256', CLIENT_SECRET)
    .update(USERNAME + CLIENT_ID)
    .digest('base64');


  const initiateSrpAuthentication = async ({
    clientId,
    username,
    password,
    srpA,
    secretHash,
  }: {
    clientId: string,
    username: string,
    password: string,
    srpA: string,
    secretHash: string,
  }) => {
    const response = client.send(
      new InitiateAuthCommand({
        ClientId: CLIENT_ID,
        AuthFlow: 'USER_SRP_AUTH',
        AuthParameters: {
          USERNAME: USERNAME,
          PASSWORD: PASSWORD,
          SRP_A: SRP_A,
          SECRET_HASH: SECRET_HASH,
        },
      })
    );
    return response;
  }

  const initiateSrpAuthResponse = await initiateSrpAuthentication({
    clientId: CLIENT_ID,
    username: USERNAME,
    password: PASSWORD,
    srpA: SRP_A,
    secretHash: SECRET_HASH
  });

  const hkdfResult = {hkdf: undefined as undefined | string};
  authenticationHelper.getPasswordAuthenticationKey(
    USERNAME,
    PASSWORD,
    new BigInteger(initiateSrpAuthResponse.ChallengeParameters?.SRP_B, 16),
    new BigInteger(initiateSrpAuthResponse.ChallengeParameters?.SALT, 16),
    (err: unknown, result?: string) => {
      hkdfResult.hkdf = result;
    },
  );


  const dateHelper = new DateHelper();
  const DATE_NOW = dateHelper.getNowString();


  const generateSignature = ({
    userPoolId,
    username,
    secretBlock,
    hkdf,
  }: {
    userPoolId: string,
    username: string,
    secretBlock: string,
    hkdf: string,
  }) => {
    const userPoolName = extractUserPoolName(userPoolId);

    const msg = Buffer.concat([
      Buffer.from(userPoolName, 'utf-8'),
      Buffer.from(username, 'utf-8'),

      Buffer.from(secretBlock, 'base64'),
      Buffer.from(DATE_NOW, 'utf-8'),
    ])

    const signature = createHmac('sha256', hkdf)
      .update(msg)
      .digest('base64');

    return signature;
  }

  const secretBlockResult = (
    response: InitiateAuthCommandOutput,
  ) => {
    const maybeSecretBlock = response.ChallengeParameters?.SECRET_BLOCK;
    return maybeSecretBlock;
  }

  const SECRET_BLOCK = secretBlockResult(initiateSrpAuthResponse)
    || 'failed to extract secret block';
  const HKDF = hkdfResult.hkdf
    || 'failed to extract hkdf';

  const signature = generateSignature({
    userPoolId: USER_POOL_ID,
    username: USERNAME,
    secretBlock: SECRET_BLOCK,
    hkdf: HKDF,
  });

  const respondToAuthChallenge = async ({
    clientId,
    username,
    secretBlock,
    dateNow,
  }: {
    clientId: string,
    username: string,
    secretBlock: string,
    dateNow: string,
  }) => {
    const command = new RespondToAuthChallengeCommand({
      ChallengeName: ChallengeNameType.PASSWORD_VERIFIER,
      ChallengeResponses: {
        PASSWORD_CLAIM_SIGNATURE: signature,
        PASSWORD_CLAIM_SECRET_BLOCK: secretBlock,
        TIMESTAMP: dateNow,
        USERNAME: username,
        SECRET_HASH: SECRET_HASH,
      },
      ClientId: clientId,
    });

    return client.send(command);
  };

  const challengeResponse: RespondToAuthChallengeCommandOutput = await respondToAuthChallenge({
    clientId: CLIENT_ID,
    username: USERNAME,
    secretBlock: SECRET_BLOCK,
    dateNow: DATE_NOW,
  });

  return challengeResponse;
}


const REGION: string = process.env.REGION || 'missing region';
const SECRETS_MANAGER_ID: string = process.env.SECRETS_MANAGER_ID || 'missing secrets manager id';
const USERNAME: string = process.env.COGNITO_USERNAME || 'missing cognito username';
const PASSWORD: string = process.env.COGNITO_PASSWORD || 'missing cognito password';
console.log(await challengeResponse({
  region: REGION,
  secretsManagerId: SECRETS_MANAGER_ID,
  username: USERNAME,
  password: PASSWORD,
}));
```

#### package.json
```json
{
    "name": "srp",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "type": "module",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@types/node": "^20.2.3",
        "typescript": "^5.0.4"
    },
    "dependencies": {
        "@aws-sdk/client-cognito-identity-provider": "^3.338.0",
        "@aws-sdk/client-secrets-manager": "^3.338.0",
        "amazon-cognito-identity-js": "^6.2.0",
        "http-server": "^14.1.1"
    }
}
```

#### tsconfig.json
```json
{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "moduleResolution": "nodenext",
        "baseUrl": ".",
        "outDir": "./dist",
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "allowJs": true,
        "noImplicitAny": true,
        "noUnusedLocals": true,
        "noImplicitThis": true,
        "strictNullChecks": true,
        "noImplicitReturns": true,
        "preserveConstEnums": true,
        "allowSyntheticDefaultImports": true
    },
    "exclude": [
        "./node_modules"
    ],
    "include": [
        "./src/**/*.ts"
    ]
}
```

### 試したこと

```console
% rm -rf ./node_modules && npm install && npx tsc && node dist/index.js
added 134 packages, and audited 135 packages in 669ms

14 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
{
  '$metadata': {
    httpStatusCode: 200,
    requestId: '***<略>***',
    extendedRequestId: undefined,
    cfId: undefined,
    attempts: 1,
    totalRetryDelay: 0
  },
  AuthenticationResult: {
    AccessToken: 'eyJ***<略>***',
    ExpiresIn: 3600,
    IdToken: 'eyJ***<略>***',
    RefreshToken: 'eyJ***<略>***',
    TokenType: 'Bearer'
  },
  ChallengeParameters: {}
}
```
コマンドライン上では正しくトークンが返ってきます。

### 補足情報（FW/ツールのバージョンなど）

```console
% rm -rf node_modules
% tree -L 3 .
.
├── dist
│   ├── index.d.ts
│   ├── index.js
│   ├── index.js.map
│   └── tsconfig.tsbuildinfo
├── index.html
├── package-lock.json
├── package.json
├── src
│   └── index.ts
└── tsconfig.json

3 directories, 9 files
% npm version
{
  srp: '1.0.0',
  npm: '8.19.3',
  node: '19.2.0',
  <中略>
}
% npx tsc -v
Version 5.0.4
```

### まとめ

この問題の解決手法、ご存知の方もしおられましたらご教示いただけると幸いです。

拙い内容で恐縮ですが、どうぞよろしくお願いします。

# 追記
 - https://github.com/kano1101/amplify-id-token
```tsx
let user = await Auth.signIn(username, password);
if (user.challengeName === "NEW_PASSWORD_REQUIRED") {
  user = await Auth.completeNewPassword(user, password);
}
const token = user.signInUserSession.idToken.jwtToken;
```

【TypeScript】ブラウザで実行する際のモジュールのインポート方法

### 実現したいこと

ウェブブラウザで疑似的なRSSリーダーを作成したい
- [ ] テキストボックスにURLを入力し、ボタンを押下すると指定した情報が表示されるようにしたい

### 前提

独学でHTMLとJavaScriptを勉強中です。
この度、ウェブブラウザ上で疑似的なRSSリーダーを作成したいと思ったのですが、製作中にエラーが発生したため、どのように解決すべきか、お力頂ければと思います。

### 発生している問題・エラーメッセージ

```
app4.js:8 Uncaught TypeError: Cannot read properties of null (reading 'getElementsByTagName')
    at xhttp.onreadystatechange (app4.js:8:24)
```

### 該当のソースコード

```html
<!DOCTYPE html>
<html>
<head>
	<title>RSSリーダー</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="app4.js"></script>
</head>
<body>
	<div class="container">
		<h1>RSSリーダー</h1>
		<form class="form-inline">
			<div class="form-group">
				<label for="url">URL:</label>
				<input type="text" class="form-control" id="url" placeholder="Enter URL" size="50">
			</div>
			<button type="button" class="btn btn-primary" onclick="fetchRSS()">情報取得</button>
		</form>
		<br>
		<div id="result"></div>
	</div>
</body>
</html>
```

```JavaScript
function fetchRSS() {
	var url = document.getElementById("url").value;
	if (url) {
		var xhttp = new XMLHttpRequest();
		xhttp.onreadystatechange = function() {
			if (this.readyState == 4 && this.status == 200) {
				var xmlDoc = this.responseXML;
				var items = xmlDoc.getElementsByTagName("item");
				var resultHtml = "";
				for (var i = 0; i < items.length; i++) {
					var title = items[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
					var link = items[i].getElementsByTagName("link")[0].childNodes[0].nodeValue;
					resultHtml += "<p><a href='" + link + "' target='_blank'>" + title + "</a></p>";
				}
				document.getElementById("result").innerHTML = resultHtml;
			}
		};
		xhttp.open("GET", "https://api.rss2json.com/v1/api.json?rss_url=" + encodeURIComponent(url), true);
		xhttp.send();
	}
}

```
