Rails6の開発環境の構築

Rails 開発環境

ついにRailsのプラクティスまで進むことができました。 久しぶりにRailsの環境構築を行ったので備忘録です。

結論

下記ツールをインストールする。

xcode

開発用コマンドラインツール

 $ xcode-select --install
$ xcode-select -v
$ xcode-select version 2395.

homebrew

MacOS用バージョン管理ツール

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
$ brew -v
Homebrew/homebrew-core (git revision 1b8cdf0aa4d; last commit 2022-06-25)
Homebrew/homebrew-cask (git revision 9713bf8928; last commit 2022-06-25)

rbenv

Ruby用バージョン管理ツール

$ brew update
$ brew install rbenv
$ rbenv -v
rbenv 1.2.0

詳細: TIL/rbenv.md at master · karlley/TIL

yarn

node.jsのパッケージ管理ツール

$ brew install yarn
$ yarn -v
env: node: No such file or directory
$ brew list | grep yarn
yarn

node.js がインストールされてないとバージョンが表示されない？

Ruby

rbenvを使ってインストール

$ rbenv versions
  system
* 3.0.3 (set by /Users/karlley/.rbenv/version)

詳細: TIL/rbenv.md at master · karlley/TIL

Rails

gem経由でインストール

$ gem i rails
$ rails -v
Rails is not currently installed on this system. To get the latest version, simply type:

    $ sudo gem install rails

You can then rerun your "rails" command.
$ gem list | grep rails
rails (7.0.3)
rails-dom-testing (2.0.3)
rails-html-sanitizer (1.4.3)

バージョンが表示されないがgemにはインストールされている？

注意点

上記の方法で環境構築を行いrails new 後にrails s した際にRailsが起動しないエラーが発生しました。 結論から言うとwebpacker、node.jsが必要ということが分かりました。詳細はこちらの記事に書きました。

まとめ

やっぱりハマりました笑 昔ほど時間を溶かしてしまうことはなくなったので少しは成長できたかな？ Railsもじっくり理解しながら進めることにします。

参照

  • Railsの教科書 第1章

README用のgifアニメーションを作る方法

GitHub Tips

README内にコマンドラインやアプリケーションのアニメーション画像を貼る際のgifアニメーションの作り方について調べました。

結論

mac純正のキャプチャソフト、gif変換ソフトffmpeg を使って作る。

キャプチャソフトを使ってアニメーション用のキャプチャを撮影

  1. cmd + shift + 5 でキャプチャソフト起動
  2. 画面全体を収録 か選択部分を収録 でキャプチャを撮影(オプションからファイルの保存先などを設定可能)

アニメーション用キャプチャをgifに変換

gif変換ツールをインストールしてキャプチャした画像をgifに変換する

ffmpeg

コマンドラインからgif変換できるツール

FFmpeg

homebrew経由でインストール

$ brew install ffmpeg
$ ffmpeg -v
ffmpeg version 5.0.1 Copyright (c) 2000-2022 the FFmpeg developers
  built with Apple clang version 13.1.6 (clang-1316.0.21.2.5)
  ...
$ brew list | grep ffmpeg
ffmpeg

gifに変換

ffmpgeg コマンドでgifに変換する

$ ffmpeg [変換するファイル名] [変換後のファイル名] 
$ ffmpeg -i ~/Desktop/file_name.mov ~/Desktop/file_name.gif
  • ファイル名は拡張子まで書くこと。
  • -r オプションでフレームレートを指定できる。

まとめ

アニメーション画像は初めて作りましたが、思ったより簡単で良かったです。 作り方を覚えておくと何かと役に立ちそうな気がしています。

参照

Macでgifアニメーションを作る恐らく一番楽な方法 - Qiita

GitHubのREADMEに画像を表示したい

GitHub Tips

Sinatraでのメモアプリ作成も終わりに近づいてきました。作成したリポジトリのREADMEに画像を表示したかったので方法を調べました。

結論

新規issueページで画像URLを生成して、READMEに生成した画像URLを貼り付ける。

手順

  1. 対象リポジトリのIssues タブ内のNew issue から新規issueページを開く。
  2. comment 欄に追加したい画像をドラッグ、もしくはペースト(画像URLが生成される)。
  3. Submit new issue でissue作成。
  4. 生成された画像URLをREADME.mdに貼り付ける。
  5. 作成したissueをcloseする。

注意点

  • リポジトリページのREADMEの編集画面でも画像URLの生成は可能だが、誤ってファイルを更新してしまうと不要なコミットを作成してしまう可能性があるのでREADMEの編集画面では行わない方が良い。
  • 対象リポジトリのissueでなくても画像URLは生成できる。
  • 新規issueを作成しなくても画像URLは生成できる。
  • 対象リポジトリでissueを作成して画像URLを残しておいた方がログを残すという意味では良さそう。

まとめ

画像を貼り付けたいだけなのにわざわざissueを作成するのはどうかと思ったが、GitHubの仕様上この方法しか今のところ無さそうなので仕方ない。 今回のようなコードとは関係無さそうな雑用的なこともこれからどんどん増えていくので出来るだけ早くキャッチアップできるようになりたい。

参照

TIL/readme_add_image.md at master · karlley/TIL

【GitHub】README.md に画像を表示させる簡単な方法 - Qiita

READMEの書き方

GitHub

READMEの書き方

Sinatraのメモアプリも残すはREADMEの作成のみです。 読みやすいREADMEの書き方を調べてみました。

結論

  • 先輩の方々が公開しているテンプレートの内容をきちんと理解して活用する。
  • ユーザー目線で考えて分かり易く書く。

僕が考える良いREADMEとは

  • READMEを読んだだけで詳細、使い方が理解できる。
  • 画像、表を使って視覚的に理解しやすい。
  • READMEがそのまま要件定義になっている。

参考にしたいテンプレートの詳細

こちらの記事を参考にしました。

# Product_Name

## Description

***DEMO:***

![Demo](https://image-url.gif)

## Features

## Requirement

## Usage

## Installation

## Author

## License

Product_Name

  • プロダクト名と概要。
  • 概要は一文で説明できると良い。
  • 対象リポジトリのDescriptionと同一が良さそう。

Description

  • 説明。概要で説明しきれなかった細かい部分を説明。
  • メイン機能の説明が良さそう。
  • 単体画像よりもアニメーション画像の方がユーザーが使い方をイメージしやすい。

Features

  • 特徴。
  • 独自機能や強みを記載する。
  • 多すぎる場合は別ページか--help 等を参照するように促す。

Requirement

  • 必要条件。
  • 動作に必要な環境、ツール等を記載する。

Usage

  • 使用方法。
  • 画像を使って操作のイメージし易さを重視する。

Installation

  • インストール方法。
  • セットアップから起動方法まで詳細を記載する。
  • コマンドラインを順にコピペするだけで動作するように分かり易さを重視する。

Author

  • 作者情報。
  • Twitterアカウント等の連絡しやすい情報を記載する。

License

  • ライセンス情報。
  • ライセンス周りは良く分かっていないので割愛。

ユーザー目線でREADMEを書く

概要やデモを見て使うか捨てるかを決めるのに、それが README の後ろに埋もれていて、最初の方に Installation や Usage が来るのは不親切な UI です。

参照: わかりやすい README 駆動開発 - Qiita

ユーザー目線で使い易さ、読み易さを考えられており是非考え方を見習いたいと思いました。 コードを書くことにも通じる大事な考え方だと思うので意識していきたいです。

README駆動開発

README ありきの開発スタイルのことで、簡単に言うと「コード書く前に README 書く」ってことです。

今の自分はまだプロダクトを作ることは少ないけれど将来的に取り入れたい考え方だなと思った。

  • RDD(Readme Driven Development)
  • 要件定義に繋がる
  • 開発のモチベーションを維持しやすそう

まとめ

READMEは思っていたより奥が深くて良い考えを知る良い機会になった。 良い影響を与えるようなプロダクトを作れるようなエンジニアになりたいと改めて思いました。

参照

わかりやすい README 駆動開発 - Qiita

わかりやすいREADME.mdを書く | Taichi Nakashima

XSSとその対策

Ruby HTML JavaScript セキュリティ

Sinatraのメモアプリの終了条件であるXSS対策について調べました。

結論

文字コード指定とエスケープ(サニタイジング)を行うとXSS対策できる

XSSとは

悪意あるクライアントサイドのコードをウェブサイトに挿入するセキュリティ攻撃です。

引用: Cross-site scripting (クロスサイトスクリプティング) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

  • クロスサイトスプリプティング(Cross-site scripting)
  • Cookieやセッショントークンの不正取得、HTMLコンテンツの書き換えなどが行われてしまう

XSSの簡単な例

入力フォームに直接JavaScriptでスクリプトを埋め込み意図しないアラートを表示させる

  1. 下記スクリプトを入力フォームに入力し送信
  2. アクセス時にXSS!! がアラートで表示される
<script>alert('XSS!!')</script>

XSSの原因

ユーザ入力が文字列ではなくHTMLタグやJavascriptとして認識されること

XSS対策

文字コード指定

Content-Typeフィールドで文字コードの指定を省略した場合、攻撃者が、この挙動を悪用して、故意に特定の文字コードをブラウザに選択させるような文字列を埋め込んだ上、その文字コードで解釈した場合にスクリプトのタグとなるような文字列を埋め込む可能性があります。

Content-Typeの出力時にcharsetを省略することなく、必ず指定することが有効です。ウェブアプリケーションがHTML出力時に想定している文字コードを、Content-Typeのcharsetに必ず指定してください。

引用: 安全なウェブサイトの作り方 - 1.5 クロスサイト・スクリプティング：IPA 独立行政法人 情報処理推進機構

Sinatraを使った今回の場合だと全ページ共通で表示に仕様しているlayout.erb 内のhead タグ内で文字コードをUTF-8 で指定する

<!DOCTYPE html>
<html lang="ja">
<head>
  <mata charset="UTF-8"> <!-- ここで文字コードを指定 -->
    <title>Memo App</title>
    <link rel="stylesheet" href="/normarize.css">
    <link rel="stylesheet" href="/style.css">
</head>
<body>
</body>
</html>

エスケープ(サニタイジング)

Rubyの標準ライブラリであるcgi を使ってHTMLタグとJavaScriptを文字列に置換します

  1. cgiライブラリ読込
  2. フォーム等のユーザーが入力した文字列の表示部をCGI.escapeHTML メソッドでエスケープする
require 'cgi'
=> true

string = ['"', "'", '&', '<', '>']
=> ["\"", "'", "&", "<", ">"]
string.each {|i| puts CGI.escapeHTML(i)}
&quot;
&#39;
&amp;
&lt;
&gt;
=> ["\"", "'", "&", "<", ">"]

html = '<p>テキスト</p>'
CGI.escapeHTML(html)
=> "&lt;p&gt;テキスト&lt;/p&gt;"

script = '<script type="text/javascript">script</script>'
CGI.escapeHTML(script)
=> "&lt;script type=&quot;text/javascript&quot;&gt;script&lt;/script&gt;"

フォーム等の入力部ではなく、ユーザーが入力した文字列の出力部でエスケープすることがポイントです。

まとめ

これまでセキュリティはあまり意識して学習してこなかったが、ちょっとずつ対策を覚えていきたい。

参照

安全なウェブサイトの作り方 - 1.5 クロスサイト・スクリプティング：IPA 独立行政法人 情報処理推進機構

CGI.escapeHTML (Ruby 3.1 リファレンスマニュアル)

素の Ruby で HTML エスケープするなら cgi/escapeが最強 - Qiita