このWebサイトで気付いたこと

エメラルドマーリン利用者のIです。

ブログ記事執筆を依頼されたので、軽い自己紹介の後、このWebサイトで気付いたこと、調べた方法を解説しようと思います。

なお、僕の環境は以下の通りですが、他の環境でも同じようなことはできるはずです。

- OS:Windows 11

- Webブラウザ:Chrome

今はWebアプリ(React)の課題を進めています。

僕はもともとWebアプリを自力で作ることはできます。

プログラムを書き、公開し、ドメインを取得し、グーグル検索して出せる状態まで作ったことがあります。

触った言語は、HSP(Hot Soup Processer)、C言語、C++、Java、JavaScript、Lua、HTML、CSS、Python、PHP、VBA、GASなど。あとはSQLやシェルスクリプトも必要に応じて使います。

ただ、安定して週5日の稼働ができないため、会社員として働けず、フリーランスでやっていく自信もないため、このように就労移行支援事業所を利用しています。

このように学生の頃からプログラミングに触れ、Webアプリを教わり、自分で少しずつ学習していきましたが、半端に触れてきたせいか、モノを渡されると中身が気になる性分のようです。

例えば、このWebサイトの記事一覧を見て、記事のタイトルやリンクが見づらいなぁと思い調べていると、面白いことが分かりました。

(もっとも、当然の仕組みかもしれませんが…)

https://garhish.theblog.me/posts/categories/11126126

記事一覧ページでキーボードのF12を押下し、開発者モードを起動してください。

その後、ネットワークタブを選択し、リロード(F5またはctrl+R)してください。

各種ファイルが送られてきたのが分かると思います。

例えば、リストの一番上、「11126126」はHTMLです。

プレビューでスタイルシートが適用されていないページが見れます。

また、レスポンスでは元のHTMLそのものが見れます。

他も同様に見てみると、画像やJavaScript、なんかのAPIがまぎれていることもあります。

※注意

ここから先、コマンドプロンプトを使います。

コマンドを実行してPCを操作しますが、システムを壊したり、消したくないファイル・フォルダを消してしまう危険があります。

ここに載っていることだけなら問題ないはずですが、何をするか理解できていないコマンドは打たないようにしてください。

さて、この「11126126」ですが、ちょっと見づらいので格好つけてローカルに落としてみます。

コマンドプロンプトを起動し(Windowsキーを押した後、cmdと入力しEnter)、リクエストを送る下記コマンドを実行してください。

curl https://garhish.theblog.me/posts/categories/11126126

僕の環境ではエラーが出ました。

curl: (35) schannel: next InitializeSecurityContext failed: CRYPT_E_NO_REVOCATION_CHECK (0x80092012)

 - 失効の関数は証明書の失効を確認できませんでした。

グーグル検索すると、末尾に「--ssl-no-revoke」を付ければ証明書の失効確認をスキップしてエラーを回避できるようです。

(本当は何故このようなエラーが出るのか、何故このオプションでエラー回避できるのかを深堀するべきですが、今回はHTMLを取得できれば何でもいいのでスルーします)

curl https://garhish.theblog.me/posts/categories/11126126 --ssl-no-revoke

上手くいけばHTMLが画面(標準出力)にぶちまけられますが、このままではやはり見づらいので、テキストファイルに保存(リダイレクト)します。

curl https://garhish.theblog.me/posts/categories/11126126 > test.html

これでテキストファイルが作成されたはずです。

コマンドプロンプトで作業してもいいですが、おそらくGUIでフォルダを表示した方が分かりやすい人も多いと思います。

※ピリオドまで入れる

explorer .

コマンドプロンプトを閉じる場合も、コマンドを使います。

exit

テキストエディタでtest.htmlを開き、画面端で折り返して表示する設定をしてください。

一覧ページのブログ記事のタイトルと本文が全て表示されるはずです。

どうやら、一覧ページを表示した時点で、各記事の本文も同時に受け取り、記事ページに遷移した時は本文のデータを流用するようです。

どうせ記事のデータなんて大した情報量ではないと高を括られている、もとい、合理的な設計に思えます。

証拠として、先ほどの開発者モードで一覧ページから記事ページに遷移しても、本文らしきデータは受け取っていません。

(バンドルで括られて見逃しているだけかもしれませんが…)

このように、仕組みを見ていくといろいろと発見があり、応用することもできます。

例えば、さっきのcurlコマンドをシェルスクリプトに組み込んで定期実行し、記事一覧を自動生成、監視、新しい記事がでてきたらなんらかのアクションを起こすということも可能になります。

本文も含まれているので、本文の変更も検知できます。

みなさんも、自分が普段利用しているWebサイトの裏側を覗いてみてください。

もしかすると新しい発見があるかもしれませんし、求人が載っている場合だってあります。

ただし、Librahack事件の件もあるので、サーバ管理者や他利用者に迷惑がかからないように気を付けましょう。

良いWebアプリライフ(？)を！

エメラルドマーリンでは、高賃金な就労に向けて訓練を行っています。

少しでも興味がある方は見学・体験等いつでも受けつけているので気軽にご連絡ください。

-------------------------------------------------------------------------------------

名称：エメラルドマーリン

TEL：048-430-7189

https://emeraldmarlin.com

開所時間：平日10:00～18:00、土曜日12:00～18:00

〒332-0021 埼玉県川口市西川口1-17-9　

　　　　　 ジェム西川口 No5 201号

★JR京浜東北線 西川口駅西口から徒歩5分

-------------------------------------------------------------------------------------