Ruby初学者によるsitemapシステムの作成奮闘記

:::note warn
これは全くRubyに触れたことがない初学者による記録です。
Rubyの知識がある方にとっては参考にはならない（参考サイトは参考になります！）と思いますので、頑張ってんなぁくらいの温かい目で見もっていただけると幸いです。
:::
筆者の環境
・Windows11
・エディター：cursor（VSCodeのようなもの。おすすめです）
## 初めに
サイトマップを作ってみたかったため、いろいろな記事を渡り歩いてよさそうなものを見つけ、やってみようの精神で始めました。

https://pikawaka.com/rails/sitemap_generator

**参考サイトを見つけた時点で私はRubyを触ったことが全くありません。**
HTML/CSSとコマンドが抵抗なく使える程度のレベルです。
なので初歩的なことから何をしたか『奮闘記』として記録に残します。

### 1.Rubyをインストールする
前述のとおりRubyを触ったことがないのでインストールから行います。

https://prog-8.com/docs/ruby-env-win

https://www.sejuku.net/blog/96900

2つの参考サイトを見比べつつ、手順に従ってRubyをインストールしていきます。

どのバージョンがいいか迷ったのですが、ダウンロードサイトの右側にオススメのバージョンが記載されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526150/c5bfe134-2430-d37f-55b4-00aa848f2f4a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526150/c87db8c4-c6c7-c174-e66f-e893393a5241.png)
※2024/11/13現在のスクショ

今回はwith Devkitの一番上に強調されていた**Ruby+Devkit 3.3.6-2 (x64)** をインストールすることにしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526150/e6869867-ea5c-5494-739c-579ed546a3cb.png)
インストーラーの処理が完了し、コマンドプロンプトが開きました。

1,3と入力するとインストールが始まり…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526150/7c166ed4-a8e9-0c8c-8fc1-6159d32f4866.png)
インストールが完了しました！
(余談ですが、1,3と入力する際に1と3を入力するのかと思って13と入力して怒られました。慌てることなく1,3を入力したらうまくいきました）

エンターで閉じてRubyのインストールは完了しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526150/51b61e76-9b8f-3c1b-ab54-9db2f33fc0aa.png)
コマンドプロンプトでもRubyがインストールできていることが確認できました！

## 2.下準備
### 2-1. Ruby bundlerのインストール
晴れてRubyのインストールができたのですが、参考サイトのように作るにはgemというものとの依存関係をいい感じにしてくれるものが必要なようです。

https://www.sejuku.net/blog/19426

あとで自分が確認しやすいのでデスクトップにsitemapというフォルダを新規に作成しました。

コマンドプロンプトよりもcursorのターミナルで処理するほうが好きなので、新規に作成したsitemapフォルダをcursorで開き、以下を実行

``` 
gem install bundler 
```

<details><summary>余談</summary>
cursorのターミナルがコマンドプロンプトを使うように設定されていなかったので上記のコマンドを実行してもエラーになったため、これを機に設定を変更しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526150/62d51d14-2348-a156-84f4-208baf475355.png)

ファイル＞設定 を開き、以下を検索しCommand Promptに設定。

```terminal.integrated.defaultProfile.windows```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526150/80a693f0-5e84-2d51-c80e-e167216eaffe.png)

cursorを開きなおしたらrubyのコマンドが通るようになりました。

gem install bundlerが実行できました。
</details>

### 2-2.Ruby on Railsのインストール

Rubyのフレームワークをインストールします。
> フレームワークであるRuby on Railsは、ウェブアプリケーションの構築に必要な構造とすべてのコンポーネントを提供し、構築を簡素化してくれます。

https://kinsta.com/jp/blog/ruby-vs-ruby-on-rails/

### 2-3.アプリケーション作成に必要な構造を準備する
現在デスクトップ上に作成したsitemapというファイルは空っぽです。その中にアプリケーションを作るためのベースとなるものをコマンドによって準備してもらいます。

```
rails new .
```
コマンドを実行すると以下のように様々なファイルが作成されます。

【実行前】
sitemap/
  (空のフォルダ)

【実行後】
sitemap/
  ├── app/
  ├── config/
  ├── db/
  ├── Gemfile  <- ここにsitemap_generatorを追加できる
  └── その他必要なファイル
  
## 3.sitemap_generatorを使ってサイトマップを作成
これで必要な準備は整い、もともとやりたかったことができる状態になりました。

https://pikawaka.com/rails/sitemap_generator

ここからは記事に書いてある通りなので、自分が困ったり詰まったりした部分を書き残します。

以下は、ほかに参考にしたサイト

https://autovice.jp/articles/6fb7dbac3e377724

https://zenn.dev/lifemap/articles/sitemap-guide

### サイトマップ作成メモ
```sitemap.rb
# サイトマップファイルが保存されるディレクトリを指定
SitemapGenerator::Sitemap.sitemaps_path = 'sitemaps/'
``` 

```sitemap.rb
# お知らせページの更新頻度を月ごとに指定
add '/info', changefreq: 'monthly'
``` 

```sitemap.rb
# 動的に増えるページの場合は以下のような記述
# /info配下の記事を追加
Article.find_each do |article|
  add "/info/#{article.slug}", lastmod: article.updated_at
  end
```
<details><summary>Articleを使うには</summary>
Articleモデルのインストールが必要だそうです。

1.Articleモデルを生成

```
rails generate model Article title:string slug:string content:text
```
2.データベースをマイグレート

```
rails db:migrate
```

3.config/routes.rbに以下を追記
```routes.rb
Rails.application.routes.draw do
  resources :articles, path: 'info'
end
```
これでエラー無くbundle exec rake sitemap:refresh:no_pingが通るようになりました。
*****
</details>


```sitemap.rb
# /info/カテゴリー名/記事名 の時の書き方
add "/info/#{article.category}/#{article.slug}"
```

### サイトマップの生成

・検索エンジンに通知せずに新しいサイトマップを作成するには以下
``` 
bundle exec rake sitemap:refresh:no_ping
```
お試しで作ったので検索エンジンに通知させずに実行しました。
実際に運用する際も先にsitemap:refresh:no_pingで作成し、そのあとでsitemap:refreshを実行したほうがいいのではと思いました。

サイトマップが指定したディレクトリに生成されました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526150/ccbc8543-cf68-36ab-81ea-91a245c5818e.png)

### 生成されたサイトマップの確認
作業中…