てみブログ

てみブログ

個人的な覚書用です

Ruby on Rails 基本文法

Ruby on Rails 基本文法

Railsアプリケーションの作成

$ rails new application_name

サーバーの起動

$ rails server

トップページの作成

homeコントローラのtopアクションを作成する。

$ rails generate controller home top

ページの作成に必要なもの

ビュー(view)

app/views/home/top.html.erb
中身はHTMLファイル。erbの説明は追って。

コントローラ(controller)

app/controllers/home_controller.rb

class HomeController < ApplicationController
  def top
  end
end

ルーティング(routing)

config/routes.rb

Rails.application.routes.draw do
  get "/" => "home#index"
  get "home/top" => "home#top"
end

home/top のURLにアクセスされたとき、
homeコントローラのtopアクションを呼び出す。

CSSファイル

app/assets/stylesheets/home.scss
scssはcssの拡張。
すべてのビューに適用される。

画像ファイル

public/xxx.jpg
publicフォルダ直下においた画像ファイルは、
<img src="/xxx.jpg">のみで呼び出し可能。

Windows上にMySQLをインストールする

Windows SQL

MySQLのインストール

・インストールされているかを確認する。
コマンドプロンプトを開き、

>mysql --version

バージョンが表示されたらインストール済み

・インストールする場合
1. MySQLのサイトからダウンロードする。
　・OSが64bitでも、x86のインストーラをダウンロードする。 　・Oracleのログインを求められるが、「No thanks, just start my download」をクリックすればよい。

2.インストールする。 　・インストーラを起動する。 　・タイプはDeverloper Defalultを選ぶ 　・Check Requirementは選択せず、Next 　・High AvailabilityはStandaloneで 23 環境変数にC:\Program Files\MySQL Server 5.7\bin\を追加する。

MySQLサーバーの起動・停止

コマンドプロンプトを管理者権限で起動する。
・MySQLの起動

>net start mysql57
MySQL57 サービスを開始します.
MySQL57 サービスは正常に開始されました。

・MySQLの停止

>net stop mysql57
MySQL57 サービスを停止中です. MySQL57 サービスは正常に停止されました。

※MySQL57はWindowsのサービスに登録されているので、自動起動に設定しておけばOS起動時に起動してくれる（はず）。

MySQLへのログイン

・rootユーザーでのログイン

>mysql --user=root --password
Enter password: ****
//パスワードはインストーラで設定したパスワードを使用する。

・ログアウト

>exit;

インストール完了後の操作

以下記事を参照。
SQL基本文法

オートコミットの有効化無効化

デフォルトでは有効。
・確認方法

select @@autocommit;
--1なら有効
--0なら無効

・有効化/無効化

--有効化
set autocommit=1;

--無効化
set autocommit=0;

Windowsインストール覚書

Windows

対象OS

  • Windows Server (2016/2019あたり）
  • Windows10 Home/Pro

インストール時の選択事項

  • Serverの場合はインストール時のデフォルトがCUIのServer Coreになっているので、GUIを使う場合は明示的に選択する必要がある（Standardとかの名称？）
    後から変更もできるようだが手間＆再インストールしたほうが不具合が少ないようで、間違えるととても手間なので注意
  • プロダクトキーは後から入力することも可能。その場合はインストール時は一旦「プロダクトキーがありません」を選択する

Administratorアカウント

  • Win10 の場合はデフォルトでAdminアカウントが無効。インストール時は一旦一般ユーザーを作成する必要あり。
  • 有効化は、Win＋X→コンピュータの管理(G)→ローカルユーザーとグループ→ユーザー→Administratorのプロパティを開き、「アカウントを無効にする」のチェックを外す。
  • Administratorアカウントのパスワード変更はCtrl＋Alt＋Delから実施。
  • インストール時に仮で作成した一般ユーザーを削除する場合は、Win＋X→コンピュータの管理(G)→ローカルユーザーとグループ→ユーザーから、該当のアカウントを選択して削除。

社内PCなどでやること

ファイアウォール設定変更

  • 社内LAN専用PCなど、FW機器でセキュリティが担保できている場合は無効化することも選択肢
  • デフォルトではPingが通らないのでICMPを許可する

PCの利便性向上のための設定（好みに応じて）

  • UACの無効化
    コントロールパネル＞システムとセキュリティ＞ユーザーアカウント制御設定の変更＞通知しない（一番下）
  • 管理共有有効化
    レジストリのHKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Policies\Systemにて、LocalAccountTokenFilterPolicyのDWORDを作成して値を1にする。
    通らなかった場合はファイアウォールも確認。

  • 自動スリープやノートPCのカバーを閉じた場合の動作設定
    コンパネ→システムとセキュリティ→電源オプションあたりから設定。
    個人的には、電源接続、バッテリー駆動問わず、以下設定にしている。
    　ディスプレイの電源を切る：30分～1時間後 　コンピュータをスリープ状態にする：適用しない 　電源ボタンを押したときの動作：休止状態 　カバーを閉じたときの動作：何もしない

  • エクスプローラ起動時の画面をクイックアクセスからPCに変更
    エクスプローラのメニューの表示タブ→オプション→全般にて変更。

  • 拡張子の表示、隠しファイルの表示
    エクスプローラのメニューの表示タブにて変更。

  • Deleteでゴミ箱送りにするとき、確認メッセージを表示する
    ゴミ箱のプロパティ＞「削除の確認メッセージを表示する」にチェック。

VM仮想マシンの場合

  • VMware Toolインストール
    VMの管理画面側から、インスタンスを右クリック→ゲスト→VMware Toolのインストール
    ディスクドライブにインストーラがマウントされるので、ゲストOS上で実行してインストールする。インストール後要再起動。
  • Dドライブ以降のドライブの識別

WireSharkのフィルタの書き方

プロトコルで絞る

そのままプロトコル名をかけばOK
※小文字で書くこと


IPアドレスで絞る

双方向

ip.addr == 192.168.0.1

送信元IP

ip.src == 192.168.0.1

宛先IP

ip.dst == 192.168.0.1

スコープで絞る

ip.addr == 192.168.0.0/24
//192.168.0.0~192.168.0.255


複数条件検索

and or ()を使ってつなぐ


時間をYYYY-MM-DD hh:mm:ss表示にする

Time列を右クリック→列の編集
上部に編集タブが出るので、種別を
「Absolute date as, YYYY-MM-DD, and time」
にしてOK。


文字列検索

frame contains "hogehoge"


パケットをマーク

マーク切り替え

・Ctrl + M
　or
・右クリック→「パケットをマーク/マーク解除」

マークしたもののみ表示

frame.marked == 1


Windows上にNode.jsのWebサービスを構築する。

Windows Node.js

Node.jsのインストール

・インストールされているかを確認する。
　コマンドプロンプトを開き、

>node -v

バージョンが表示されたらインストール済み。

・インストールする場合

  1. Node.jsのサイトからダウンロード、インストールする。 途中、「Automatically install～」のチェックボックスをチェックしておく。

2.インストール完了後、以下コマンドにてバージョンが表示されることを確認する。

/>node -v

/>npm -v

Node.jsアプリケーションの作成

※EditorはAtomかVisual Studio Codeあたりを使うと良さげ。

1.アプリケーションを保存するフォルダを作成する。
例）C:\MyApps\TestApp

2.コンソールを開き、アプリケーションフォルダ（今回はTestApp）に移動する。
コンソールはいずれかを使う。　
・コマンドプロンプトの場合は管理者権限で起動する。
・Atomの場合はTerminal-Plusなどのプラグインが入っていればそれを使う。
・VS Codeの場合は標準で、Terminal > New terminalから起動できる。

3.以下コマンドを実行する。

/>npm init --yes

4.アプリフォルダに「package.json」が生成されたことを確認する。

Node.jsのパッケージインストール

必要なパッケージをインストールする。

・必須：expressとejs

/>npm install express ejs

・ファイル更新時に自動でアプリを再起動する：Nodemon

/>npm install -g nodemon

・パスワードを暗号化する：bcrypt

/>npm install bcrypt

・セッションを管理する：express-session

/>npm install express-session

・MySQLと接続する

/>npm install mysql

Node.jsアプリをWindowsのサービスに登録する。

追って調査する。

HTML・CSS基本文法

HTML・CSS 基本文法

文法

[HTML]

<h1>見出しをつける
<h2>見出しをつける
<p> 段落
<!-- コメントアウト -->
<a href="http://xxx.xxx">リンク</a>
<img src="\img\test01.jpg"> ：画像を貼る

[HTML]リスト

liで列挙する。ulで囲むと中点、olで囲むと番号が付く。

<ul>
  <li>リスト1</li>
  <li>リスト2</li>
</ul>
  • リスト1
  • リスト2
<ol>
  <li>リスト1</li>
  <li>リスト2</li>
</ol>
  1. リスト1
  2. リスト2

[CSS]

h1{
  /* コメントアウト */
  color: #ff0000;  /* 文字色変更（カラーコード指定） */
  color: red;  /* 文字色変更 */
  font-size: 10px; /*フォントサイズ指定 */
  font-family: "Avenir Next"; /* フォント指定 */
  background-color: #dddddd; /* 背景色指定 */
  width: 500px;  /* 要素幅指定 */
  height: 80px;  /* 要素高さ指定 */
  width: 50% 
   /* %指定した場合、親要素のサイズに対しての割合でサイズを決定する。 */
  font-weight: normal / bold;  
   /* 文字太さの変更 通常か太文字か指定する */




基本形

[HTML]

<!--タイプ、htmlの宣言-->  
<!DOCTYPE html>  
<html>

  <!--構成要素をheadとbodyとする-->
  <head>
    <meta charset="utf-8">   文字コードの定義
    <title>ページタイトル</title>　ブラウザのタブに表示されるタイトル
    <link rel="stylesheet" href="stylesheet.css">   CSSの読み込み
  </head>

  <body>
     <!-- body内をdivにより分割する。各divに任意にclass名をつける。-->
     <!-- class名はスペース区切りで複数指定可能。例）class="header logo" -->
     <!-- 実際はdivをネストして各ブロックとして管理することになる。 -->
    <div class="header"></div>
    <div class="main"></div>
    <div class="footer"></div>
  </body>

</html>

[CSS]

body{
  /* フォントの指定（OSに入っているフォントと前方一致でヒットさせる。） */  
  font-family : "Avenir Next", sans-serif;  
}

/* 各divに背景色と高さを設定 */
.header {
  background-color: #f7f2b4;
  height: 90px;
}
.main {
  background-color: #bdf7f1;
  height: 600px;
}
.footer {
  background-color: #ceccf3;
  height: 270px;
}




各要素のパディング

[CSS]

.logo1{
    padding: 20px;
}

padding: 20px; 全方向20pxパディング
padding: 20px, 10px; ←縦方向、横方向
padding: 20px, 10px, 20px, 10px; ←順に、上、右、下、左
1方向のみのパディングなら、
padding-top, padding-bottom, padding-right, padding-left
とかもある。

float:left; 左方揃え
float:right; 右方揃え


・境界に線を引く
border: 2px solid red; (赤枠をつける）
border-bottom:2px solid black; （下線を引く）


・リストスタイル
list-style: none; リストの頭につく中黒を消去

<h1>とか<p>タグで書いている文のうち、一部だけスタイルを変更したい場合は、<span>でくくる
例） [HTML]

<div class="container1">
    <p>ここは変えたくないけど、<span>ここだけ変えたい</span></p>
</div>

[CSS]

.container1 span{
    スタイルを書く
}

デフォルトのマージンをキャンセルする

*{
  margin:0px;
}





入力ボックスを作る

1行の場合は、以下で良い。

<input>




あらかじめ値を入れておくには、valueを指定する。

<input value="ほげほげ">



ヒントを表記するには、placeholderを指定する。

氏名 <input placeholder="山田　太郎">

氏名



複数行の入力の場合は、textareaタグを使う。 rowsを指定することで高さを変える。

<textarea></textarea>
<textarea rows="5"></textarea>



ボタンを作る

<button type="submit">ボタン</button>



チェックボックスを作る

<input type="checkbox">　チェックボックス

　チェックボックス



ドロップダウンリストを作る。

<select>
    <option>▼選んでください</option>
    <option>たたかう</option>
    <option>じゅもん</option>
    <option>どうぐ</option>
    <option>にげる</option>
</select>



これらフォームは、javascriptで管理するのが基本になるので、idかnameをつけておく。

<input id="input1">



操作させない入力ボックスは、readonly属性を付ける。
さらに、タブ対象から外す場合は、tabindex="-1"を指定する。
以下では、分かりやすいように背景色をライトグレーにし、テキストを入れている。

<input readonly tabindex="-1" style="background-color:lightgray" value="ここは入力不可">



ボタンを無効化（グレーアウト）する場合は、disabled属性を付ける。

<button disabled>押せないボタン</button>



javascriptからコントロールするときは、
　button1.disabled = true;
　button1.disabled = false;
などで制御する。




中級編

背景画像の指定

[CSS]

div{
  background-image: url(top.png);  /* 画像ファイルを指定 */
  background-size: cover;  /* 1枚の画像を拡大して領域を埋め尽くす（並べて表示にしない） */
}

要素を中央に配置する

→マージンにオートをつける

[HTML]

<div class="container1"></div>

[CSS]

.container1{
    width:900px;
    margin: 0 auto;
}

文字スタイル操作

[CSS]

.container1 h1{
    font-size: 20px;  /* フォントサイズを指定 */
    color: #fff;    /* 文字色を指定 */
   letter-spacing: 5px;  /* 1文字ごとの文字間隔を広げる */
    opacity: 0.7;    /* 0で透明、1で不透明 */
  text-align: cneter;  /* 文字を中央揃えする */
}

ボタンを作る

[HTML]

<a href="#" class="btn login">ログイン</a>
<!-- ↑「btn」と「login」の２つのclassをもたせる -->

[CSS]

.btn{
  padding: 8px 24px;  /* 文字の周りを広く取ってボタンサイズを決める */
  line-height: 10px;  /* パディングなどを指定しない場合に、行の高さを指定する。また、文字は高さの中心に来るようになる。 */
  color: white;  /* 文字色を白に */
  display: inline-block;  
   /*  aタグをインラインブロックにする。ブロック化することで、マージンやパディングなどの指定が可能になる。 */
  /* また、ブロック化によりブロック内のどこをクリックしてもリンクが発動するようになる。 */
  opacity: 0.8;  /*透明度を指定 */
  border-radius: 4px;  /* 角を丸める */
  box-shadow: 0px 6px #000000;  /* 影をつける（右に0px、下に6pxの、黒色の影を指定） */
  cursor: text / pointer / defalut; /*マウスカーソルの形を変える（文字カーソル、指、矢印） */
  
}

.btn:hover{
  opacity:1;  /* ボタンにマウスオーバーしたとき、不透明化する */

}

div{
  transition: all 1s;  /* ホバー時などの変更遷移時間を指定する */
}

div:active{
  /* クリックしている間だけ発動 */
  box-shadow: none;  /* 影を消す。 */
  position: relative;
  top: 6px;    /* ボタンが押されたときに要素位置を6px下に動かす（ボタンが押された描写） */

}


.login{
   background-color: blue;  /* ボタンの色を指定する */
}



アイコンを付ける

Font Awesomeのアイコンを使う。
①HTMLにてFont AwesomeのCSSファイルを読み込む

  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

②<span>タグにfaクラスとfa-アイコン名クラスを指定する。

  <span class="fa fa-facebook">

透明化について

・opacity
中身すべてを透明にする
・rgba
背景色のみ透明にする
透明背景に不透明文字を組み合わせることができる。

色指定はカラーコードだけでなく、rgb指定ができる

  background-color: #ff931e;
  background-color: rgb(255,147,30);

rgbaを用いると、4つ目の引数で透明度を指定できる。
透明度はopacityと同様、0~1で指定し、0が完全透明、1が不透明となる。

  background-color: rgba(255,147,30,0.5);

rgbaを用いることで、背景色にのみ透明化を指定することが可能。

要素を重ねる

通常要素は重ならないが、画像の上に文字（pタグなど）を重ねたい場合、要素位置を指定することで実現できる。
[CSS]

  position: absolute;  /*絶対位置を指定（サイトの左上が原点） */
  position: relative;  /* 相対位置を指定（その要素の左上が原点） */
  top: 50px;
  left: 70px;

スクロールした時もヘッダを常に表示する

[CSS]

header{
  position:fixed;  /*位置を固定*/
  top:0px;  /* 固定する場所を指定 */
  z-index: 10px;  /* 常に全面に表示  */
  /* 指定しない場合のz-indexは0。数字が大きいほど手前に来る */



レスポンシブデザイン

Flexbox

PC、スマホ、タブレットなどのマルチデバイスから適切な見え方を提供する。
[HTML]

<ul class="flex-list">
  <li class="li1">item1</li>
  <li class="li2">item2</li>
</ul>

[CSS]

.flex-list{
  display: flex;  /*デバイスによって横並び、縦並びを変える*/
  flex-wrap: wrap;  /*折り返したい要素に指定*/
}
.flex-list li{
  flex: auto; /*幅いっぱいに表示する*/
  width: 50%;  /*1要素50%で表示（2要素ごとに折り返す）*/
}

メディアクエリを合わせる

[CSS]

@media(max-width: 1000px){  
  /*横幅が1000px以下の場合に適用*/
  h1{color: blue;}
  .item{width: 50%;}

.flex-list{
  flex-direction: column;  /* 要素を上から下に並べるようにする */
}
box-sizing: border-box

width: 25%などの、widthの中に、paddingとborderを含めるようにする。
※marginは含まれない。
レスポンシブデザインでのレイアウト崩れを防ぐことができる。
[CSS]

//全要素に対して適用を推奨
*{
  box-sizing: border-box;
}
viewport

[html]

<head>
  <!--head内にviewportを記載-->
  <meta name="viewport" content="width-device-width, initial-scale=1.0">
  <!--レスポンシブ用のcssを読み込む。必ずviewportより下で読み込む-->
  <link rel="stylesheet" href="responsive.css">

</head>
floatをclearする。

[html]

対象の要素内に、空要素「clear」を定義する
<div class="clear"></div>

[css]

.clear{
  clear: left;  //floatを解除
}

JavaScript連携

・JavaScriptのプログラムを読み込む [HTML]

<script type="text/javascript" src="TESTSCRIPT.js"></script>

記載場所は<body>内部の一番下が基本らしい。

・ボタンを押すとスクリプトが起動する [HTML]

<button type="button" id="btn01">押してください</button>

[JavaScript]

$("#btn01").on("click", function() {
 $("#tBox).val("ボタンが押されました");
});

Markdown 基本文法

本ブログはMarkdownで書いています。

・改行
　Markdownは普通に改行しても本文は改行されない。
　主に使う改行方法は以下の3つ
　- 文末に半角空白スペースを2つつける。
　　一番使いやすい。ソースと本文の見た目が同じになるのでわかりやすい。
　- 1行空白の行を入れる。
　　媒体にもよるかもしれないが、はてなブログでは本文でも1行空白が入ってしまう。
　　章の切り替わりなどで使いやすい。
　- <br>タグを使う。
　　本来のhtml記法。空白行を複数開けたいときはこれしかない。

・エスケープシーケンス
　バックスラッシュ「\」を文頭に入れる。

・HTMLのタグをそのまま本文に記載する 　カギカッコ＜＞をつけるとタグとして認識されてしまうので、カギカッコを文字コードで記載する。
　＜→ & lt ;
　＞→ & gt ;