Posts

はじめに ページにお知らせ用の画像のスライドショーを設置したくて、HTMLとCSSを書いてみました。 サンプルのコードをメモとして残しておきます。 HTMLとCSSのサンプル HTMLとCSSのサンプルはこんな感じです。 実際のお知らせの表示はページの最下部にあります。 HTML スライドショーに配置する画像を設定します。 <div class="slide"> <img src="https://yusukekato.jp/images/news/SOJ_news_20240503_2.jpg"> <img src="https://yusukekato.jp/images/news/SOJ_news_20230503_2.jpg"> </div> CSS スライドショー全体を10秒に設定し、それぞれの画像は5秒ごとに切り替わります。 アニメーションは永久的に動き続けます。 @keyframesでアニメーションのタイミングと位置を設定しています。 .slide { position: relative; overflow: hidden; width: 480px; height: 270px; padding: 0.5rem 1.0rem; margin-top: 0.5rem; margin-bottom: 0.5rem; margin-left: auto; margin-right: auto; background: #fff; border: 1px solid #AAA; } .slide img { display: block; position: absolute; margin-left: auto; margin-right: auto; width: inherit; height: inherit; left: 100%; animation: slide-anime 10s linear infinite; } .slide img:nth-of-type(1) {animation-delay: 0s;} .slide img:nth-of-type(2) {animation-delay: 5s;} @keyframes slide-anime { 0% {left: 100%;} 4% {left: 3%;} 46% {left: 3%;} 50% {left: -100%;} 100% {left: -100%;} } おわりに JavaScriptを実装しなくてもアニメーションができるのはありがたいですね。 もっとオシャレに動かせるように頑張ります。 それでは、また。

はじめに 本ブログを自動更新したかったのでGitHub Actionsを設定してみました。 ブログのGitHubリポジトリ更新時、GitHub Actionsによって、レンタルサーバへ自動でssh接続が行われ、任意のコマンドが実行されます。これにより本ブログが自動で更新されるようになりました。 この記事ではGitHub Actionsの使い方をざっくりまとめてみます。 対象のGitHubリポジトリ 本ブログのGitHubリポジトリはこちらです。 このリポジトリを見てもらえれば、今回何をやったのかは理解していただけると思います。 コミット履歴が汚いことは私も残念に思っています泣。 加藤祐介ブログのGitHubリポジトリ GitHub Actionsの設定 今回作成したブログ自動デプロイ用の設定ファイルはこちらです。 ssh接続に必要な情報（秘密鍵など）はGitHubリポジトリのSecrets機能で隠しています。 GitHub Actionsの設定ファイル 今回はssh接続のためにhost、username、key、portを設定しています。 公開鍵と秘密鍵の生成時にpassphraseを設定した場合はpassphraseの情報も必要になります。 設定ファイルの書き方はこちらの記事を参考にしました。 GitHub Actions を使用してデプロイ(サーバに入ってpull)するまでやってみた(後半戦) GitHub Actionsにおいてssh接続のために使用しているアクションはこちらです。 appleboy/ssh-action 公開鍵と秘密鍵の設定 公開鍵と秘密鍵を生成してssh接続する流れはこちらの記事が参考になります。 GitHub Actionsでレンタルサーバにsshしてpullする方法 Deploy Keysの設定 対象のGithubリポジトリにDeploy Keysを設定する方法はこちらの記事が参考になります。 【GitHub】Deploy keysを使ってsshでpullするまで お名前.comのレンタルサーバへのssh接続 お名前.comでレンタルしているサーバへssh接続する方法はこちらの記事が参考になります。 お名前.com レンタルサーバーでSSH接続する方法 ブログ自動更新スクリプト 本ブログを自動更新するスクリプトはこちらです。 YusukeKatoBlog/scripts/ 複数のファイルに分かれていますが、主な内容は下記の通りです。 Markdownファイルの記事をHTMLに変換（変換スクリプトは自作） index.htmlを自動作成 sitemap.xmlを自動作成 サーバ上のデータを自動更新 おまけ：画像ファイルをリサイズ 以上のブログ自動更新スクリプトをGitHub Actionsで実行することでブログをデプロイしています。 おわりに この記事ではGitHub Actionsを使って本ブログを自動更新する方法について簡単にまとめました。これでブログの更新が楽になりました。また、GitHub Actionsの勉強もできて一石二鳥でした。かなり嬉しいです。それでは、また。

はじめに 2024年3月29日にSteamで発売されたPreferred Networksのオープンワールドサバイバルクラフトゲーム『Omega Crafter』をさっそく遊んでみました。 まだまだ始めたばかりですが、おもしろいゲームでしたのでプレイ日記を書いておこうと思います。 みなさんもぜひ一緒に遊びましょう！ ゲーム概要 『Omega Crafter』はプログラミング可能な相棒の「グラミー」を駆使しながらサバイバル生活をエンジョイするゲームです。 詳しい内容は下記のリンクから公式サイトをご覧ください。 Preferred Networksの公式サイト Steamのページは下記のリンクからアクセスできます。 Steamのページ タイトル画面 Steamで購入した『Omega Crafter』を起動するとタイトル画面が表示されます（ちなみに発売日から一週間は10%割引です）。 タイトル画面 新しいゲームのタイトル画面を見るとワクワクしますね！ キャラクター作成 次は操作するキャラクターと相棒のグラミーを作成しました。 私はいつも「kuro」という名前でゲームを遊んでいます。 相棒は「tama」です。 当たり障りのないちょうどよい名前ですね。 キャラクタ作成画面 ワールド作成 ゲームを始めるにあたってワールドを作成しました。 難易度はとりあえず「ノーマル」です（敵の強さが変わるのかしら？）。 マルチプレイで他の人のワールドに入る場合は「ホスト」ではなく「参加」を選べば良さそうですね。 ワールド作成画面 ワールド選択画面で先ほど作成したワールドを選択します。 このときに下記画像のようにフレンドと遊ぶか一人で遊ぶか選べます。 ワールド選択画面 プレイ開始 ゲームが開始しました。 グラフィックが綺麗ですね。 左下にProject Managerであるシャノンさん（？）からのメッセージウィンドウが表示されています。 とりあえずこのメッセージの通りに進めていけば良さそうです。 操作はマウスとキーボード（WASDキー）で行います。 プレイ開始画面 ヘルプ キーボードの「H」を押すとヘルプウィンドウが表示されます。 ここを見れば次に何をすればよいか分かって便利です。 またタブを切り替えるとスキルのページも確認できます。 ヘルプ画面 マップ キーボードの「M」を押すとマップウィンドウが表示されます。 最初は小さい範囲しか見えませんが、探索を進めていくと徐々にマップが広がっていきます。 ワクワクしますね！ マップ画面 ビルド キーボードの「B」を押すとビルドウィンドウが表示されます。 何やら色々作れるようですが、まずはメッセージに従って「街のシンボル」をビルドしてみます。 ...

はじめに 加藤祐介ブログを管理しやすいように大改造しました。 改造内容 主な改造内容は下記の通りです。 MarkdownをHTMLに変換するPythonスクリプトを作成 ディレクトリ構成を整理 index.htmlを自動生成 sitemap.xmlを自動生成 ブログのアップデートを半自動化 おわりに 今回はブログの大改造を行いました。 今後はサーバ側のアップデート処理も自動化できたらなと思っています。

はじめに 2023年9月30日に開催された第66回シェル芸勉強会にオンラインで参加させていただきました。 そのときの記録をメモとして記事にしておこうと思います。 あと、解けそうな問題はChatGPT（GPT-4）にも解いていただこうと思います。 ## 問1 : 0123456789 問題内容 数字を使わずに0123456789を出力します。 私の回答 cat<<EOF>>a.cpp #include <bits/stdc++.h> int main() { int a[]={'a','b','c','d','e','f','g','h','i','j'}; for(char b: a) printf("%d",b-'a'); } EOF g++ a.cpp ./a.out 私の感想 bashのワンライナーではありませんが、とりあえず想定の出力は得られました。 他に何も思いつかなかったのでまだまだ力不足という感じです。勉強します。 配信で紹介されていたseq infの回答がスマートで勉強になりました。 ChatGPTの回答 echo abcdefghij | tr a-j $(echo a | tr a ':') 出力結果 :::::::::: 私の感想 10回くらいやり取りをして最終的にこの回答になりました。 数字を使用できないという制約が難しかったのかもしれません。 また、ChatGPTは実行できない状態のワンライナーも当たり前のように提供してくるので気をつけないといけませんね。 問2 : リダイレクト 問題内容 “ls 存在しないファイル 3>file 2>?“の?に文字列を入れてfileにlsのエラー出力を書き込みます。 私の回答 ls 存在しないファイル 3>file 2>&$(seq inf|head|sed '$d'|sed '$d'|sed '$d'|sed '$d'|sed '$d'|sed '$d'|sed '$d'|tac|sed '$d'|sed '$d') 私の感想 さっそく問1で学んだことを使ってみました。1-10を出力してからsed ‘$d’で最終行を削除していきます。 欲しい数字は3なので途中でtacを使いました。長いですがとりあえずはできたっぽいので良しとします。 ChatGPTの回答 ls 存在しないファイル 2>file 私の感想 問題を理解してもらえませんでした。ChatGPTに問題を出すこと自体が難問です。 ...

はじめに ROS 2 Humbleの公式チュートリアルに従って勉強中です。 今回はROS 2のノードに関係するコマンドたちをまとめていこうと思います。 公式チュートリアルは下記のリンクからアクセスできます。 ROS 2 Humble 公式チュートリアル 前回の記事は下記のリンクからアクセスできます。 ROS 2 Humble公式チュートリアル 01: 環境構築からturtlesim まで 用意するもの Ubuntu 22.04 LTS ROS 2 Humble ノードの起動 パッケージ内の実行ファイルは下記のコマンドのように実行できます。 ros2 run package_name executable_name 例↓ ros2 run turtlesim turtlesim_node ノードの一覧 起動しているノードの一覧は下記のコマンドで出力できます。 ros2 node list ノードの情報 ノードの情報は下記のコマンドで出力できます。 ros2 node info node_name 例↓ ros2 node info /turtlesim おわりに ROS 2のノードに関係するコマンドについてまとめました。 この3つのコマンドを覚えておけばノードに関しては困らないと思います（ホントに？）。 それではまた次回もよろしくお願いします。

はじめに ROS 2 Humbleの公式チュートリアルに従って勉強中です。 誰かの役に立つかは分かりませんが、 チュートリアルの手順や困ったポイントのメモをブログに残しておこうと思います。 チュートリアルは英語なので、日本語の情報が増えるのは良いことかもしれません。 ROS 2 Humble公式チュートリアル 用意するもの Ubuntu 22.04 LTS がインストールされたPC WindowsとUbuntuのデュアルブート方法は下記のページをご覧ください。 WindowsとUbuntuのデュアルブート ROS 2 Humbleのインストール Ubuntu 22.04 LTSにROS 2 Humbleをインストールします。 ありがたいことにROS 2 Humbleを簡単にインストールできるBashスクリプトがあります。 下記のGitHubリポジトリをcloneして使用させていただきましょう。 ros2_setup_scripts_ubuntu 下記のようにコマンドを実行すればインストールできます。 git clone https://github.com/Tiryoh/ros2_setup_scripts_ubuntu.git cd ros2_setup_scripts_ubuntu ./ros2_humble_desktop_main.sh インストールが完了したら下記のコマンドを実行してsetupファイルを読み込んでおきましょう （このコマンドは端末を起動するたびに実行する必要があります。~/.bashrcに書いてあれば不要です。） source /opt/ros/humble/setup.bash turtlesim のインストール 下記のコマンドを実行してturtlesimパッケージをインストールします。 sudo apt update sudo apt upgrade sudo apt install ros-humble-turtlesim 下記のようにros2のサブコマンドpkgを実行するとturtlesimパッケージの情報が表示されます。 ros2 pkg executables turtlesim 出力内容↓（turtlesim パッケージの実行ファイル一覧） turtlesim draw_square turtlesim mimic turtlesim turtle_teleop_key turtlesim turtlesim_node turtlesim のノードを起動 それでは準備が整ったので下記のコマンドでノードを起動します。 ...

はじめに 大学入学時に購入したPCが放置されていたのでUbuntuをインストールしてみました。 元々はWindows 10がインストールされていて、そこにUbuntu 22.04 LTSをデュアルブートした形です。 デュアルブートの方法については検索すれば山ほど情報が出てきますが一応メモとして残しておきます。 用意するもの Windows がインストールされているPC USBメモリ 私はWindows 10のPCにUbuntu 22.04 LTS をデュアルブートしましたが、バージョンが変わってもだいたい同じだと思います。 1. Ubuntu用のストレージを確保 まずUbuntuで使用するストレージを確保します。 下記のページを参考にしてWindowsが使用しているディスクを縮小して空き容量を生み出します。 最低でも100GBは空き容量を確保しましょう。 参考：DELL製PCのデュアルブート方法 縮小可能な領域が十分ではないときは下記のページが参考になります。 参考：ボリュームが縮小できないときの対処法 2. Ubuntuの入手 次はUbuntuのイメージファイルをダウンロードしましょう。 私の場合はUbuntu Desktop 22.04.3 LTSをダウンロードしました。 下記のリンクからUbuntuのダウンロードページにアクセスできます。 Ubuntuのダウンロードページ 3. RufusでUSBメモリにUbuntuを書き込み Ubuntuのイメージファイルが入手できたら、Rufus というソフトを使ってUSBメモリに書き込んでみましょう。 下記のリンクからRufusのダウンロードページへアクセスできます。 Rufus を起動したら、USBメモリとUbuntuのイメージファイルを選択します。 それ以外の項目はデフォルトのままで大丈夫だと思います。 書き込み完了まではしばらく時間がかかるので待ちましょう。 Rufusのダウンロードページ 4. Ubuntu のインストール それではいよいよPCにUbuntuをインストールします。 Windowsの設定で「高速スタートアップ」は無効にしておきましょう（おそらく必要な手順）。 Ubuntuのイメージファイルを書き込んだUSBメモリを挿したままPCを再起動します。 メーカのロゴが表示されたらF2やF12などを押してBIOSを起動します。 BIOSの画面でUSBメモリを選択して（頑張って探したら見つかります）、起動しましょう。 その後、Ubuntuの画面が表示されたら成功です。 あとは手順に従ってUbuntuをインストールしましょう。 おわりに 以上でインストール完了です。お疲れ様でした。 私はこれからROS 2 Humbleで遊ぼうと思います。

はじめに 2023年4月22日に開催された第64回シェル芸勉強会にオンラインで参加しました。 そのときの記録をメモとして記事にしておこうと思います。 あと、解けそうな問題はChatGPT（GPT-4）にも解いていただこうと思います。 公式配信 ## 問1 : メール解析 問題内容 メールの内容から必要な情報だけ抜き出します。 私の回答 cat S*/*64/*.txt|sed 's/-/ /g'|sed 's/:/ /g'|sed 's/:&gt;//g'|sed 's/Re //g'|sort -k9|awk '{c[NR]=$3;d[NR]=$4;g[NR]=$7;h[NR]=$8;i[NR]=$9}END{for(j=1;j&lt;length(i);j++){if(i[j]==i[j-1]){printf("%s %s %s %d\n",i[j],g[j-1]"-&gt;"h[j-1],g[j]"-&gt;"h[j],(c[j]-c[j-1])*24+d[j]-d[j-1])}}}' 私の感想 awkでごり押ししました。 まずsedでメール内容を整形して、時刻を比較したいメール同士が並ぶようにsortで並べ替えを行います。 それからawkでメール内容をすべて配列に入れて、時刻の差分を計算して必要な情報だけ出力しました。 ちなみに、私の回答は不完全なので分と秒を考慮できていません。 まだまだ勉強が足りていない気がしますね。 精進します。 問2 : 乱数生成 問題内容 正規分布に従う乱数を生成します。 私の回答 echo | awk 'BEGIN{srand();a=0}{for(i=0;i&lt;12;i++)a+=rand()}END{printf("%lf\n",a-6)}' 私の感想 私は正規分布が分からないので0～1の乱数を12個足して6を引いた値を出力しました。 解説で紹介されていた「cat /dev/urandom」から乱数を生成する方法が勉強になりました。 これから乱数を生成するときは使ってみようと思います。 数値だけではなくアルファベットの文字列もランダムに生成できるとのこと。 便利ですね。ありがとうございます。 ChatGPT（GPT-4）の回答 awk 'BEGIN {srand(); u1=rand(); u2=rand(); z0=sqrt(-2*log(u1))*cos(2*3.14159265359*u2); print z0}' Box-Muller変換を使っているらしいです。 問3 : 行列の転置 問題内容 与えられた行列が対称行列か判定します。 私の回答 cat S*/*64/mat | python3 -c 'import numpy as np;A=[input().split() for _ in range(5)];A=np.array(A);AT=A.T;r="YES" if np.array_equal(A,AT) else "NO";print(r)' 私の感想 awkで行列を扱うのは地獄になりそうだったのでPythonのNumpyを使って解きました。 解説ではdatamashコマンドが紹介されていて勉強になりました。 まだまだ知らないコマンドがたくさんありますね。 便利なコマンドは少しずつ覚えておきたい所存です。 また、二次元配列の入力に関しては以下の記事を参考にさせていただきました。 ...

私について 自己紹介 ロボットやシェル芸、ゲーム、ゲーム製作、小説執筆などで日々遊んでいます。 大学ではロボットについて勉強していました。 現在もロボット開発に携わらせていただいてます。 備忘録的な記事をまとめていくのでよろしくお願いします。 最近はペットの日記も始めました。 開発したサービス シェル芸オンラインジャッジ SNSアカウント GitHub : YusukeKato X/Twitter : yusukekato_sub X/Twitter : yusukekato_main 昔のブログ Zenn : yusukekato Qiita : ykpages HatenaBlog : YKpages 趣味の小説 カクヨム : yusuke_kato 本ブログについて 免責事項 本ブログを利用する上で生じる損害等の一切の責任を負いかねますのでご了承ください。 ライセンス 本ブログにおける全ての著作物の権利はYusukeKatoが所有します。 本ブログのソースコードは Apache License 2.0 で公開されています。 本ブログに存在する文章や画像、動画などの全ての著作物は CC BY-NC-ND 4.0 で公開されています。 プライバシーポリシー 本ブログではGoogle Search ConsoleとGoogle Analyticsでアクセス解析等を行っているため、 あらかじめ了承ください。 GitHubリポジトリ 本ブログはGitHubで公開されています。 本ブログのGitHubリポジトリ