日々のメモメモ

投稿者: Tunux

  • Diagonal Puzzle

    Antigravityを使って作ったゲームです。
    はじめはテト○スを作ったのですが、著作権があるので非公開にしました。
    同じ落ちゲーですが、癖のあるゲームです。

    まだ、プロトタイプですがいい感じで遊べると思います

    画像をクリックしてゲームスタート！

  • # 公式ドキュメントを完璧に手元へ！Playwrightで実践した「技術とマナー」の自動化術

    こんにちは！今日は「Gemini CLI」の公式ドキュメントを丸ごとMarkdown形式で保存した際のお話を紹介します。

    「公式ドキュメントをローカルでも見たい」「自分専用の検索ツールに使いたい」と思ったことはありませんか？

    私は「Gemini CLIのドキュメントをNotebookLMのソースにしたいけど取り込むドキュメントが無い。。」となりました。なければ公式ドキュメントから取得いてくればいい！

    今回は、最新の自動化ツール Playwright を使って、ただコピーするだけではない「こだわりの抽出術」をGeminiと実践してみました。

    ## 🚀 最初は「スクレイピング」で苦戦…

    最初は、ウェブサイトの見た目（HTML）を解析して、Geminiの力技でMarkdownに変換しようとしていました。

    しかし、この方法には困った問題が。

    – 表（テーブル）がガタガタになってしまう…
    – 箇条書きの階層が崩れる…
    – Geminiさんが気を利かせて要約してしまう…
    – サイトのデザインが変わると、すぐに動かなくなる…

    「もっと綺麗に、正確に取得する方法はないかな？」とサイトをじっくり観察していると、ある素晴らしい機能に気づきました。

    ## 💡 「公式のコピー機能」を味方につける

    Gemini CLIの公式サイトには、各ページに 「Copy as Markdown」 というボタンが用意されていたのです。

    「これだ！」と思いました。

    サイト自身がMarkdownを出力してくれるなら、それが一番正確なはずです。そこで、このボタンの仕組みを調査したところ、裏側で「Markdown専用のソースファイル」を読み込んでいることが分かりました。

    ## 🛠️ こだわりの自動化ポイント

    今回のGemini CLIによる自動化で特に大切にした、3つのポイントをご紹介します。

    ### 1. 「1:1の精度」へのこだわり

    Geminiに書き換えさせるのではなく、公式サイトが用意した「正解」をそのまま保存する仕組みを作りました。これにより、複雑なコードブロックや表も、公式サイトと全く同じクオリティで手元に再現できました。

    ### 2. 「サーバーへのマナー」：1.5秒の優しさ

    自動化プログラムは、人間とは比べ物にならない速さでサイトにアクセスできます。でも、あまりに速すぎると相手のサーバーに負担をかけてしまいます。最悪の場合、「攻撃」とみなされてアクセスを遮断されてしまうことも…。

    そこで、1ページ取得するごとに 「1.5秒待機する（おやすみタイム）」 というルールをプログラムに組み込みました。

    「速さ」よりも、相手のサイトを尊重する「マナー」を優先したのです。

    ### 3. 「使いやすさ」：リンクの魔法

    保存したファイルの中にあるリンクが「/docs/…」のままだと、手元で開いたときに正しくリンクが飛びません。これを一括で「https://geminicli.com/docs/…」という絶対パスに書き換える処理も追加しました。これで、どこからでも迷わず公式ドキュメントへ飛べるようになります。

    ## 🌟 終わってみて

    Geminiによって、Playwrightという強力なツールを使うことで、単なる「コピー」を超えた、高品質なナレッジベースを作ることができました。

    技術で便利にするのはもちろんですが、相手のサーバーへの配慮（レートリミット）を忘れないことで、安全で持続可能な自動化ができるのだと改めて実感しました。

    皆さんも、何かを自動化するときは「技術＋マナー」をセットで考えてみると、より素敵な成果物が生まれるかもしれませんよ！

    この記事は、Gemini CLIを活用したドキュメント抽出プロジェクトの記録をもとに構成されました。

  • The Last Invader

    Geminiと作ったゲーム第2弾！最後の一匹のインベーダーを打ち落とせ！

    【操作方法】
    PC
    ・カーソルキーの左右ボタンか、AキーとDキーで左右に移動
    ・スペースキーでビームを発射します
    スマホ
    ・ゲーム画面内の左側タップで左に、右側タップで右に移動します
    ・左右を同時に打つとビームを発射します

    画像をクリックしてゲームスタート！

  • バウンドボール

    Gemini と一緒に作成したボールがバウンドするゲームです。

    ・画面上をクリックしたりタップするとボールが最大50個まで増えます
    ・スライダーでボールの増減が可能です
    ・リセットボタンでボールの数を１個に戻します

    下の画像をクリックすると遊べます！

  • 外国のサービスは英語のドキュメントを読もう！

    外国のサービス(GoogleとかMetaとかApple等々)を使用する場合は、必ず英語版のドキュメントを読もう。
    英語版以外のローカライズされたドキュメントだと、重要な要素が記載されていない場合がある。

    FCMのFCM2023で廃止されたサービスが日本語のドキュメントやFAQで見当たらず、直撃を受けた。。。

    https://firebase.google.com/support/faq/?hl=en#fcm-depr-features

    2024/06/20で利用できなくなるのは、レガシーHTTPプロトコルでの配信だけでは無かったのだね😢

    英語は出来ないと厳しい。特にIT関連を仕事にしていく以上は。。

  • MySQLのteeコマンド

    MySQLで実行したクエリをファイルに保存するコマンドとして、teeコマンドというのがある。

    tee /tmp/select_out.log
クエリを実行
notee

    teeで出力するファイル名を指定すると、noteeを指定するまでに実行したSQLの結果を、ファイルへし出力していく。

    出力するファイルはMySQLユーザで出力可能な場所を指定する。
    /tmpや/var/tmpなどを指定すれば確実だが、SQLが出力する内容によっては/tmpなどは妥当でない場合があるので注意する。

    パスを含まないファイル名を指定すると、データベースに接続する際に使用したmysqlコマンドを実行した時のカレントディレクトリに出力される。

  • BitnamiでインストールしたphpMyAdminへのアクセス方法

    設定方法

    Bitnamiで稼働しているphpMyAdminにSSHトンネルを設定しPCからアクセスする方法

    # wsl上でのSSHトンネルの設定
    ssh -N -L 8888:127.0.0.1:80 -i キーファイル bitnami@サーバIPアドレス &

    # SSHトンネル設定後、ブラウザでphpMyAdminにアクセス
    http://127.0.0.1:8888/phpmyadmin

    説明

    BitnamiでインストールされたphpMyAdminにブラウザでアクセスする方法です。

    AWS LightsailでWordPressをインストールした際、phpMyAdminもインストールされ使用可能な状態になっていた。
    phpMyAdminの設定ファイル /opt/bitnami/phpmyadmin/config.inc.php を見ると、127.0.0.1経由でしかアクセスを許可していません。
    127.0.01経由ということは、インターネット経由でアクセスはできないように制限しているということです。
    セキュリティ上の配慮でこうなっているのだと思われます。データベース操作が可能なツールをインターネット経由で利用できるようにするのは、問題だと思うので、この制限を行うのはよく分かります。そうですよね。。 phpMyAdminは狙われますしね。

    では、どうアクセスするのか？

    検索すると、インターネット経由でのアクセス許可を設定して、アクセス元IPアドレスの制限を設定する。というような説明をしているページがありました。
    これ、個人的には気持ちが悪いので設定したくありません。アクセス制限しているとはいえ、無法地帯のインターネットからアクセス許可を設定するのは怖いです。

    じゃあどうするのか？さらに探してみるとアクセス方法はBitnamの公式ページにちゃんとアクセス方法が記述されてました。

    Connect to phpMyAdmin (bitnami.com)

    英語のページなので読むのに躊躇してしまいがちですが、今は簡単に翻訳できるので英語のドキュメントへのアレルギーも低くなりました。英語でも読みましょう、ドキュメント。

    Bitnamiのページによると、SSHトンネル経由でアクセスすればいいとのことです。久しくSSHトンネル経由でアクセスしていないので忘れてました。

    wsl上で下記のようにSSHトンネルを作成します。keyfileはサーバにSSHでアクセスする際に使用しているものを設定し、serverはアクセス先のIPアドレスやドメイン名を指定します。

    ssh -L 8888:127.0.0.1:80 -i keyfile bitnami@server &

    これで、ローカルPC上のポート8888のアクセスを、サーバー上の127.0.0.1のポート80に転送するようになったので、ブラウザで下記のURLにアクセスすると phpMyAdminのページが表示されます。

    http://127.0.0.1:8888/phpmyadmin/

    表示後、データベースのユーザIDとパスワードを入力してログインすれば、テーブル操作などが可能になります。

    SSHトンネルとは？

    SSHトンネルとは何ぞや？
    ロカール上の特定のポートへのアクセスをSSH経由でサーバ上の指定したIPアドレスとポートに転送する、という感じでしょうか？
    分かりずらいので、Copilotに質問したところ下記のように回答してくれました。

    自分
    sshトンネルとは

    Copilot
    SSHトンネルは、SSHポートフォワーディングとも呼ばれており、SSHによって確立した通信経路を利用して、クライアントが直接アクセスできないサーバーのポートへ転送してくれる仕組みのことです。具体的には、以下のような仕組みです。

    SSH（Secure Shell）は、暗号化や認証技術を利用して、リモートホストのシェルを安全に利用するためのプロトコルです。SSHを使用するには、サーバー側にSSH接続を受け付けるデーモンが必要です。

    SSHポートフォワーディングは、SSH接続時に「-L」オプションを付与して、ローカルポートをリモートホストのポートに転送します。これにより、外部からアクセスできないサーバーのポートに間接的にアクセスできるようになります。
    ログイン時にポート転送のみを行いたい場合は、「-N」オプションを付与します。この状態でポート転送のみが行われ、SSHコマンド自体は実行されません。
    SSHトンネルを使用することで、安全にリモートサーバーにアクセスしたり、データを転送したりできます。 🚀

    うん、賢いですよね。それなりの回答を簡単にもらえる、いい時代です。

  • bitnamiでLet’s Encryptのサーバ証明書を取得した手順

    設定方法

    Bitnamiの設定ツールを利用してサーバ証明書を取得する。

    sudo /opt/bitnami/bncert-tool

    説明

    AWS Lightsailで初期に登録したサーバ証明書をk-ponta.comにしてしまい、後になって13.196.238.191/にしておけばよかった後悔。。
    初期設定からやり直すのも面倒なので、手動で13.196.238.191/のサーバ証明書を新たに取得できないか調べたところ、bncert-toolコマンドで再取得ができるようなので設定を行う。

    サーバにSSHでアクセス後、bncert-toolコマンドを起動すると下記のようなメッセージが表示される。

    $ sudo /opt/bitnami/bncert-tool
----------------------------------------------------------------------------
Welcome to the Bitnami HTTPS Configuration tool.

----------------------------------------------------------------------------
Domains

Please provide a valid space-separated list of domains for which you wish to
configure your web server.

Domain list []:

    サーバ証明書を取得したいドメイン名を入力する。英語の説明文は「スペースで区切られた有効なドメインのリストを入力してください Webサーバーを構成します。」とのことなので、k-ponta.comと13.196.238.191/の2つを設定する。

    Domain list []: k-ponta.com 13.196.238.191/

    次にリダイレクションの有効化の確認が行われる。下記の３つの質問が出てくるので設定する場合は「y」を、設定しない場合は「n」を入力してエンターキーで確定する。

    No.英文意味入力値
    1Enable HTTP to HTTPS redirectionHTTPのアクセスをHTTPSにリダイレクトするか？y
    2Enable non-www to www redirectionwwwが無いURLのアクセスを、www付きのURLにリダイレクトするか？y
    3Enable www to non-www redirectionwww付きのURLのアクセスを、wwwが無いURLにリダイレクトするか？n

    適宜、答えていく。基本的にディフォルトの選択肢を選んでいけばいいと思う。

    ----------------------------------------------------------------------------
Enable/disable redirections

Please select the redirections you wish to enable or disable on your Bitnami
installation.

Enable HTTP to HTTPS redirection [Y/n]: y

Enable non-www to www redirection [Y/n]: y

Enable www to non-www redirection [y/N]: n

    その後、作業内容が表示されるので問題なければ「y」を入力する。

    ----------------------------------------------------------------------------
Changes to perform

The following changes will be performed to your Bitnami installation:

1. Stop web server
2. Configure web server to use a free Let's Encrypt certificate for the domains:
k-ponta.com 13.196.238.191/
3. Configure a cron job to automatically renew the certificate each month
4. Configure web server name to: 13.196.238.191/
5. Enable HTTP to HTTPS redirection (example: redirect http://k-ponta.com to
https://k-ponta.com)
6. Enable non-www to www redirection (example: redirect k-ponta.com to
13.196.238.191/)
7. Start web server once all changes have been performed

Do you agree to these changes? [Y/n]: y

    設定内容が確認とメールアドレスの入力、契約についてついての表示がされるので問題なければ進める。

    ----------------------------------------------------------------------------
Create a free HTTPS certificate with Let's Encrypt

Please provide a valid e-mail address for which to associate your Let's Encrypt
certificate.

Domain list: k-ponta.com 13.196.238.191/

Server name: 13.196.238.191/

E-mail address []: メールアドレスを入力

The Let's Encrypt Subscriber Agreement can be found at:

https://letsencrypt.org/documents/LE-SA-v1.3-September-21-2022.pdf

Do you agree to the Let's Encrypt Subscriber Agreement? [Y/n]: y

    設定が始まる。既にk-ponta.comドメインでサーバー証明書を取得済みだったので、既存の設定ファイルのバックアップ先などが表示される。

    ----------------------------------------------------------------------------
Performing changes to your installation

The Bitnami HTTPS Configuration Tool will perform any necessary actions to your
Bitnami installation. This may take some time, please be patient.

----------------------------------------------------------------------------
Success

The Bitnami HTTPS Configuration Tool succeeded in modifying your installation.

The configuration report is shown below.

Backup files:
* /opt/bitnami/apache/conf/httpd.conf.back.202407020351
* /opt/bitnami/apache/conf/bitnami/bitnami.conf.back.202407020351
* /opt/bitnami/apache/conf/bitnami/bitnami-ssl.conf.back.202407020351
* /opt/bitnami/apache/conf/vhosts/wordpress-https-vhost.conf.back.202407020351
* /opt/bitnami/apache/conf/vhosts/wordpress-vhost.conf.back.202407020351

Find more details in the log file:

/tmp/bncert-202407020351.log

If you find any issues, please check Bitnami Support forums at:

https://github.com/bitnami/vms

    エンターキーを押して設定を終了する。

    Press [Enter] to continue:

    設定完了後、https://13.196.238.191/ にアクセスして証明書に問題が無い事を確認する。
    http://www.k-ponta.comがhttps://13.196.238.191/に、https://k-ponta.comが、https://13.196.238.191/にリダイレクトされることも合わせて確認する。

  • 更新の再開

    環境の移行

    AWS Lightsail 上に移動して再開してみる。

    EC2とか利用して再開も考えたのだが、管理や価格を考えてAWS Lightsailを追加って再開することにした。

    企業が提供するサービスはいつ終了するのか分からず(昨今のEvernoteの状況で切実に感じた)、やはりノウハウは自分で管理したい、ただローカルPC上で保存するとオンラインではできないので、サーバを立ててWordPress上に保存することにした。

    今まで通りに、さくらインターネットのVSPでもよかったのだが、最近、AWSでいろいろしたくなったのでAWS Lightsail上で環境作ってみることにした。

    はじめはEC2を使ったり、ELBやRDSを使ったりもしたが、値段が高くなるのと、管理コストが高いのでLightsail上で環境を作ってみた。

    ぼちぼちと更新していく。

  • bashでランダムなパスワードを生成する

    linuxなどでコマンドラインでランダムパスワードを作りたい場合、下記のコマンドを実行する。
    出力される文字列は “,.+-!“の文字列と “12345678” を必ず含む。
    なお、間違い易い “0,9(数字の０,９)”、”O(英字大文字のO)”、”l,o(英字小文字のl,o)”は除いています。

    $ cat /dev/urandom | \
    tr -dc '12345678abcdefghijkmnpqrstuvwxyzABCDEFGHIJKLMNPQRSTUVWXYZ,.+\-\!' | \
    fold -w 12 | grep -i [12345678] | grep -i '[,.+\-\!]' | head -n 16
    cp,b2yfArrxa
    q2JcSttcqJ.+
    fpRjcSu,8PNQ
    8ej-tk-a7.6T
    6I7,UW6XeYDY
    EyXxFHg+Dx7!
    g1ctyM!qFQtr
    Jf+Q4jSkVdAC
    J2r8YRzI+ZbY
    wq76vyIjQk7!
    yK7z+F7i5b6T
    DiwN7,Qm+Q,-
    8pIP6zTU,3a,
    qjf7.!c5Z1hx
    .msB5Pq13e1,
    Y4zcWNnu,hnP

    これで、12ケタのランダム文字列を16個作成する。
    先頭に記号が来るのが、気持ち悪い場合は下記のようにする。

    $ cat /dev/urandom | \
    tr -dc '12345678abcdefghijkmnpqrstuvwxyzABCDEFGHIJKLMNPQRSTUVWXYZ,.+\-\!' | \
    fold -w 12 | grep -i [12345678] | grep -i '[,.+\-\!]' | \
    grep -e '^[12345678abcdefghijkmnpqrstuvwxyzABCDEFGHIJKLMNPQRSTUVWXYZ]' | head -n 16

    パスワードを生成するシェルスクリプトは下記の通り。

    #!/bin/bash
    LEN=$1
    CNT=$2

    if [ -z ${LEN} ] ; then LEN=12 ; fi
    if [ -z ${CNT} ] ; then CNT=16 ; fi

    cat /dev/urandom | tr -dc '12345678abcdefghijkmnpqrstuvwxyzABCDEFGHIJKLMNPQRSTUVWXYZ,.+\-\!' | fold -w ${LEN} | grep -i [12345678] | grep -i '[,.+\-\!]' | grep -e '^[12345678abcdefghijkmnpqrstuvwxyzABCDEFGHIJKLMNPQRSTUVWXYZ]' | head -n ${CNT}

    上記のシェルスクリプトの場合、引数としてパスワードの長さと出力数を与えられる。
    引数が無い場合は、12桁のパスワードを16個作成する。