2023-07-23

新しいサイトを作り始めた

何から始めるのが正解なのか分からん。ステップが分からん。手探りでやってみるしかないな。

Rails チュートリアルのStaticPagesってモデルはなくて、ビューとコントローラだけだよね。それをまずは真似してメインページを作ろう。

$ rails generate controller MatchPages home

match_pages/homeにアクセスすることができた。

HTMLをやろう

触るの久しぶりすぎて全く分からんよ。フロントは超初心者だ。
とりあえず、Bootstrapを使ってやるよ。

<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
  
  </body>
</html>

基本は、まずここからか。

画像を入れる枠を作る

どうやればいいんだ。
枠を作ろうとするんじゃなくて、まだ画像はないけどimgタグを用意しておくか。
それに枠線を付けておけばいいね。

RailsでReactとか使うにはどうするんだ？

react-railsを利用するらしい。なんだそれ。Gemなのか？

インストール後は、RailsのViewにReactコンポーネントを表示させることができる。
まあ、結構簡単にできるっぽいね。

今のところHTMLとBootstrap(CSS)を駆使して良い感じのものが作れてるぞ。嬉しい。

HTMLのcontainerを使う

よく覚えてたな、自分。

.containerを使うことで、コンテンツの横幅を調整できる。
あ、でもちょっと勘違いしていた。containerというタグがあると思ったら、クラスを設定してCSSで幅を変えるのね。

.container {
  width: 100%;
  max-width: 450px;
  margin-right: auto;
  margin-left: auto;
}

大体のレイアウトが完成した。ここから、ユーザー機能とか作り込んでいく。
それが出来次第、ヘッダーなりフッターなり作ります。

ユーザーを作成しよう

今回作るサイトはユーザーを実装する必要がある。
Rails チュートリアルを参考にして作るぞ。チュートリアル完走できて良かったわ。

$ rails generate controller Users new

これだね。と思ったが、nameとstringを追加する次のコマンドだった。

$ rails generate model User name:string email:string

rails generateの取り消しってどうやるんだっけ。rails destroyでできた。

とりあえず、Rails チュートリアルに従って、色々と進める

開発環境（development）でデバッグ情報を表示するために、application.html.erbに次のコードを書く。

<%= debug(params) if Rails.env.development? %>

routes.rbにresources :usersを追加することで、次の名前付きルーティングが使えるようになる。

とりあえず、先にヘッダーを作るか

なんか、あんまりやる気出ないな。
とりあえず、Rails チュートリアルのヘッダーを移植するような感じで進めてみる。

うーむ、なんかめんどくさいな。ヘッダー作りが上手くいかんな。
if logged_in?とかまた作るのすげーめんどいな...→できるだけコピペで済ませよう。

2023-07-19

chromeの検証でエラーを非表示にしてしまった

見えなくなったので直したい

エラーが見えなくて困る。どうすればいいの。

タブを新しく作っても、だめだ。
Chromeを再起動しても変わらなかった。困る。

解決方法

歯車マークの設定➡︎「設定」から、一番下の「デフォルトを復元して再読み込み」
を押すと直った。助かった。

2023-07-18

Renderで独自ドメインを使用したら、1日くらい待ってTLS/SSL証明書が発行される

Custom Domains | Render · Cloud Hosting for Developers

お名前.comで独自ドメイン取って、Renderのドキュメントに従って設定した。

You get free TLS certificates for the onrender.com subdomain for your service, as well as the custom domains you add to it, including wildcard domains.

この記述の通り、無料のTLS証明書がonrender.comのサブドメインにも発行される。

独自ドメインを設定してからしばらく待ってもそのURLでアクセスできなくて、焦って色々やったが、

1日経ってまた開いてみたら普通に開けた。

こんな時間かかるもんなんやね。

2023-07-18

引用文のCSSを実装したい

Rails 個人開発

querySelectorAllで、contentクラスのテキストを全て取得する。

let elements = document.querySelectorAll('.content');

Uncaught TypeError: Cannot read properties of undefined (reading 'push')

どういうこと。

let quo_regex = /```(.*?)```/g;

let elements = document.querySelectorAll('.content');
console.log(elements[0].innerHTML);

let str;
let SummaryArray;
let quoteStrings = [[]];
let normalStrings = [[]];

console.log(elements.length);

for (let i = 0; i < elements.length; i += 1) {
    while(SummaryArray = quo_regex.exec(elements[i].innerHTML)) {
        console.log(SummaryArray);
        console.log(SummaryArray[0]);
        quoteStrings[i].push(SummaryArray[0]);
        normalStrings[i].push(SummaryArray[1]);
    }
}

自分で書いてみたけど意味分からなくなってきた。

`quo_regex.exec`

文字列中で、正規表現に一致する文字列を探す。

動いた

let quo_regex = /```(.*?)```/g;

let elements = document.querySelectorAll('.content');

let str;
let SummaryArray;
let quoteString = [];
let normalString = [];

for (let i = 0; i < elements.length; i += 1) {
    while(SummaryArray = quo_regex.exec(str = elements[i].innerHTML)) {
        quoteString.push(SummaryArray[0]);
        normalString.push(SummaryArray[1]);

        console.log(quoteString);
        console.log(normalString);

        for(let j = 0; j < quoteString.length; j++) {
            str = str.replace(quoteString[j],
                '<div class="quote"><p>'
                + normalString[j] + '</p></div>');
        }
        document.querySelectorAll('.content')[i].innerHTML = str;
    }
}

ちょっと右に寄ってるのが気になるけど、無事実装できた。

querySelectorAllでcontentクラスの要素全部取ってきて、for文で回す。

2023-07-18

複数個のhtml要素を取得して、ボタンで文字色を変えたい

Rails 個人開発

getElementByIdで、classNameが"summary-content"の要素を
取得して、CSSで色付けをしたいんだが、1個しか取ってこれない。

getElementByIdで複数個の要素を取れない？

同じidを持つ複数要素を取得しようとしていたが、それがHTMLの原理に沿わないらしい。

そもそものHTMLの原理として、そのような目的ではidではなくclassを使うべきです。

javascript - getElementByIdで同時多数取得 - スタック・オーバーフロー

なるほど。確かにそうか。

querySelectorAllを使うのが良さそうか？

let elements = document.querySelectorAll('.content');
console.log(elements)

何も表示されないので、取得できていないみたい。どうして。
spanタグだからだめってことはないよな。

➡︎ li要素にクラスを追加して、それに対してquerySelectorAllを使ったらいけた。

let elements = document.querySelectorAll('.summary-contents');
for (let i = 0; i < elements.length; i += 1) {
    elements[i].classList.toggle('color-gray');
}

↑ 灰色で見えづらくできた。

2023-07-18

フォームに入力する文字色を変えたい

個人開発 Rails

移動中に電車などで本を読むことが多いので
読んですぐ感想を投稿したいのだが...

正直、赤裸々に感想書いてると、覗き見された時にちょっと恥ずかしい。
なので、フォームに入力する文字を薄い灰色とかにしたい。

可能なのか？

フォームの部分のコードはこれ。form_with使ってる。

<div class="field color-gray">
    <%= f.text_area :content, placeholder: "New output..." %>
</div>

CSSでcolorを指定したらどうなる？

.color-gray {
  color: gray;
}

結果↓

ありゃ、拍子抜け。簡単にできるじゃん。

フォームなどに入力する文字に関しては色付けできないものかと思ってた。
（あんま見たことないし）

ボタンで、フォームの文字色を変更できるようにしたい

JavaScript使わないとできないな。
divタグに付くクラスをボタンで書き換えるって感じかな。（初心者）

☆getElementByIdでinput要素を取得後に、classNameでclass属性値を変更できる

let element = document.getElementById('summary-form');
element.classList.toggle('color-gray');

toggleでOn/Offを切り替えられる。

でも、「ボタンを押したら」の条件はどうやって追加すればいいの。

<input type="button" onclick="sample()">

こんな感じでJavaScriptの関数を呼び出せばいいらしい。onclickイベント。

<input type="button" onclick="grayColorChange()">

JavaScriptでgrayColorChange() 関数を用意した。

呼び出しエラー

grayColorChange is not defined at HTMLInputElement.onclick

なんでだ？
→scriptタグでJavascriptのファイル読み込んでもダメだな。意味が不明。

ERBの中にscriptタグでJavaScript埋め込んで解決した

<script>
    function grayColorChange() {
        let element = document.getElementById('summary-form');
        element.classList.toggle('color-gray');
    }
</script>
.
.
.
<input type="button" onclick="grayColorChange()">

パスが間違ってたのかな？何はともあれ、解決だー。
ボタンでちゃんと、フォームの文字色が変わることを確認。

2023-07-17

お名前.comで独自ドメインを取得したのにURLが開けない

個人開発 Rails

SSLの設定はAWSで行った。

DNS_PROBE_FINISHED_NXDOMAIN

こんなエラーが出ている。何も表示されない。

（DNSとか、名前解決とか、分からないことだらけ）➡︎ なんとか独自ドメインでサイトを公開したい...

気づいたらrenderのcustom domainもpending状態になっている

ドメインはお名前.comで取得したので、そこの設定を確認する。

ネームサーバーが問題？ ➡︎ ネームサーバーって何。

よく分からないが、「お名前.comのネームサーバーを使う」ことにした。

調べたら...

ドメイン名をIPアドレスに変換する「名前解決」を行うサーバーのことらしい。

DNSサーバーと同じ言葉らしい。

RenderのSSL証明書

無料で使えるみたいな記述があったけど、独自ドメインには使えないのか？

renderはその辺りの記事がネットに少ないし、herokuを使いたいが...課金してしまったし...。

You get free TLS certificates for the onrender.com subdomain for your service, as well as the custom domains you add to it, including wildcard domains.

つまり使えるということ。のはずだが。

確かに、onrender.comのURLは開ける。そのサブドメインとして独自ドメインを設定したら、それにもfree TLS certificates が使えるみたいだが。

無料TLS証明書の発行方法とかどこにも書いてないから、勝手に発行してくれるのだろうか？謎。

1日くらい待ってみるか。

Configuring DNS to Point to Render

Custom Domains | Render · Cloud Hosting for Developers

これに従って、ドメインがVerifiedするところまでは行った。

Your custom domains will start pointing to your Render service and we’ll continue to issue and renew TLS certificates for them as long as you’re using Render.

この記述によれば、サブドメインにもTLS証明書は発行されるというが...

意味が不明だ。

暗号化方式が古いのが原因？

古い暗号化の方式（TLS 1.0/1.1）を利用しているのが原因だと書いている記事があった。

いやしかし、onrender.comのURLにはアクセスできるから、違うっぽい。

どうすればいいんだ。独自ドメインで公開して、API申請を行いたいのに。

ドメインを有効化するには、お名前.comでレンタルサーバーを借りる必要がある？

そんな表示が出てきた。やってみる。

ちょっとよく分からんが、レンタルサーバーを無料で申し込んだ...

↑ こんなのが出てきた

レンタルサーバーのRSプランを無料で契約した。

ステータスが申込受付（手続き開始）になっている。しばらく待てば完了するか。

余談だけど、お名前.comの「コントロールパネル」からWordpressが作れるらしい。

サーバーのセットアップが終わった。400GBも使えるらしい。課金額はおいくらだろう。

「レンタルサーバーコントロールパネル」でDNSレコードの設定を再度行った。

➡︎ Certificate Pending になってしまった。もうお手上げだよ...。herokuで、カスタムドメインの取得からデプロイまで丁寧に書いてくれているサイトを参考にしてやろうかな...。

追記

1日待ったら独自ドメインのURL開けた。

Renderで独自ドメインを使用したら、1日くらい待ってTLS/SSL証明書が発行される - ギワノート

HTMLをやろう

画像を入れる枠を作る

RailsでReactとか使うにはどうするんだ？

HTMLのcontainerを使う

ユーザーを作成しよう

とりあえず、Railsチュートリアルに従って、色々と進める

とりあえず、先にヘッダーを作るか

解決方法

quo_regex.exec

動いた

getElementByIdで複数個の要素を取れない？

可能なのか？

ボタンで、フォームの文字色を変更できるようにしたい

呼び出しエラー

ERBの中にscriptタグでJavaScript埋め込んで解決した

RenderのSSL証明書

Configuring DNS to Point to Render

暗号化方式が古いのが原因？

ドメインを有効化するには、お名前.comでレンタルサーバーを借りる必要がある？

追記

とりあえず、Rails チュートリアルに従って、色々と進める

`quo_regex.exec`