2018-10-31

display:noneとvisibility:hiddenの違い

display:noneは要素を削除する。
visibility:hiddenは要素を非表示にする。

例(display: none)

適用前
f:id:rickbox:20181031012029p:plain:w300

適用後
f:id:rickbox:20181031012332p:plain:w300

例(visibility: hidden)

適用前
f:id:rickbox:20181031011528p:plain:w300

適用後
f:id:rickbox:20181031011719p:plain:w300

2018-10-17

CSSのposition

positionとは

要素の位置を決めるためのプロパティ

positionの書き方

◯◯ {position : 値}

◯◯はセレクタ

positionの値

static：初期値、指定することはほとんどない
relative：現在の位置を基準に相対的な位置を決める
absolute：親要素を基準に絶対的な位置を決める
fixed：画面の決まった位置に固定する

位置の決め方

top：基準の上からの距離
bottom：基準の下からの距離
left：基準の左からの距離
right：基準の右からの距離

sample

2018-10-16

Markdown記法

見出し

# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6

見出し1

見出し2

見出し3

見出し4

見出し5

見出し6

段落

段落1
(空行)
段落2

段落1

段落2

改行

aaa
bbb(半角スペース2つ)
ccc

aaa bbb
ccc

コード

 ```
 print "hoge"
 ```

print "hoge"

テキスト装飾

これは*イタリック*です  
これは**ボールド**です  
これは***イタリック＆ボールド***です  
これは~~打消し線~~です  
これは<sup>上付き</sup>です  
これは<sub>下付き</sub>です

これはイタリックです
これはボールドです
これはイタリック＆ボールドです
これは~~打消し線~~です
これは^上付きです
これは_下付きです

リスト(箇条書き)

- リスト1
- リスト2
    - リスト3
        - リスト4

リスト1
リスト2
- リスト3
  - リスト4

リスト(番号付き)

1. 番号付きリスト1
1. 番号付きリスト2
1. 番号付きリスト3

番号付きリスト1
番号付きリスト2
番号付きリスト3

引用

>引用

引用

水平線

---
aaa
- - - - - - - -
bbb
_ _ _ _ _ _ _ _
ccc

aaa

bbb

ccc

リンク

[google](http://www.google.co.jp/)

google

画像

画像のみの場合 ![alt属性](画像ファイルパス) 
外部参照する場合  ![alt属性][参照名] の後に、 [参照名]:画像ファイルパス 
リンク付き画像  [![alt属性](画像ファイルパス)](URL) 
外部リンク付き画像  [![alt属性](画像ファイルパス)][参照名] の後に、 [参照名]:URL

![Image from Gyazo](https://i.gyazo.com/5596608a499b3366a05bc3c7a8f69c66.png)](https://gyazo.com/5596608a499b3366a05bc3c7a8f69c66)

2018-10-13

ターミナル入門

ターミナルとは、コマンド(プログラム)と呼ばれる命令文を用いてMacの操作や設定をおこなうためのツール。

Windowsにおけるコマンドプロンプトと呼ばれているものとほぼ同じもの。

こちらの記事を参考に色々なコマンドを実行してみた。

追記
「command」＋「shift』＋「4」キーを押してから「スペース」キーを押すと、カーソルがある部分のウィンドウだけをキャプチャーして保存することができるの知らなかった😭。

$/bin/ls

f:id:rickbox:20181013120916p:plain
lsはLiStの略でファイルやディレクトリの一覧を表示するプログラム。

$/bin/pwd

f:id:rickbox:20181013122103p:plain
pwdはPrint Working Directoryの略で現在いるディレクトリのパスを表示する。

$ /bin/echo hello

f:id:rickbox:20181013122502p:plain
引数として与えた文字をそのまま画面に表示するプログラム。

$ echo $PATH

f:id:rickbox:20181013122940p:plain
PATHはターミナルに設定されている項目の一つで、ここにディレクトリ名を設定しておくと、そこの中にあるプログラムはディレクトリ名を省略してファイル名だけで実行できるようになる。
/binというディレクトリはPATHに設定されているため、/bin/lsではなく、lsだけでも実行できる。

$ cd /bin

f:id:rickbox:20181013123609p:plain
cdはChange Directoryの略で引数に与えたディレクトリに現在のワーキングディレクトリを変更するコマンド。つまりディレクトリを移動するコマンド。

$ ls -a

f:id:rickbox:20181013124001p:plain
引数の中で-(ハイフン)から始まっているものはオプションといい、コマンドにデフォルトとはちょっと違う動作をして欲しい時に渡す。
lsの-aは.(ドット)から始まる名前のファイルやディレクトリを表示するオプション。

$ ls -a /bin

f:id:rickbox:20181013124609p:plain
-aとパスの両方を渡すこともできる。

$ curl http://fjord.jp/articles/617.html

f:id:rickbox:20181013125039p:plain
curlは”Client for URLs”の略で、ネットからファイルをダウンロードできるコマンド。

$ saykana

f:id:rickbox:20181013130822p:plain

SayKana – Mac用音声合成プログラムをインストールすると、/usr/local/bin/saykanaというコマンドがインストールされる。

$ brew install tree

f:id:rickbox:20181013131733p:plain
brew install ソフト名でダウンロード・インストールが完了する。

$ tree

f:id:rickbox:20181013131934p:plain
ディレクトリ配下のファイル構造をツリー上に表示する
コマンド。

2018-09-29

9/10〜9/23 メモ

9/10

ドットインストールRails

#5まで

DBへの保存

1.saveを使う

2.createを使う

9/11

コントローラー作成

↓

routesにresources: コントローラー名

↓

rails routesのコマンドで確認

9/16

ドットインストール

create table users (

id integer primary key,

name text,

age integer,

created_at,

updated_at

);

①②③④⑤はすべて同じ処理

①

user = User.new

user.name = "tanaka"

user.age = 23

user.save

②

user = User.new(:name => "hayashi", :age => 25)

user.save

③

user = User.new(name: "hayashi", age: 25)

user.save

④

User.create(name: "hoshi", age: 22)

⑤

user = User.new do |u|

u.name = "mochizuki"

u.age = 18

end

user.save

すべて同じ処理

User.select("id, name, age").find_by(name: "tanaka")

User.select("id, name, age").find_by name: "tanaka"

User.select("id, name, age").find_by_name "tanaka"

User.select("id, name, age").find_by_name("tanaka")

User.select("id, name, age").find_by_name!("kiriya")

!マークをつけるとうまくいかなかったら時にエラーを出してくれる

# delete: 単機能だけど高速

# - delete

# - delete_all

# destroy: 高機能だけど低速

# - destroy

# - destroy_all

#例

User.delete(1) #id=1が削除される

User.where("age >= 25").delete_all

ファイルを選択

git add

選択したファイルを記録する

git commit -m "メッセージ"

リモートにファイルをアップロードしたり、リモートからファイルをダウンロードすることで、開発者同士がファイルを共有することができる

#ユーザーは複数のコメントを持つ

#コメントは１つのユーザーを持つ

class User < ActiveRecord::Base

has_many :comments

end

class Comment < ActiveRecord::Base

belongs_to :user

end

9/18

delete

ActiveRecordオブジェクトを介さずに削除する。（直接SQLを発行するイメージ）

destroy

ActiveRecordオブジェクトを介して削除する。
これは依存関係も一緒に削除したい場合に利用するといい。
destroy_allを呼ぶと結構時間かかる。

9/20

routes

①と②同じ

①get 'boards' => 'boards#index'

② get “boards”, to: “boards#index”

9/23

文字列の HTMLタグ PHPタグ を削除する

strip_tags()

http://the33.php.xdomain.jp/recommend/k.php/

再送防止

header('Location:rickbox.php.xdomain.jp/k.php/');

入力履歴表示なし

autocomplete="off"

Rails strftime

https://techracho.bpsinc.jp/hachi8833/2016_10_06/25960

日本時間にする

config.time_zone = 'Tokyo'

config.active_record.default_timezone = :local

Cloud9のタイムゾーンを変更

https://dot-blog.jp/news/cloud9-linux-changing-timezone/

データ並べ替え

https://techacademy.jp/magazine/7727

2018-09-11

8/14〜9/10 メモ

8/14

Node.js 基本

http://www.pxt.jp/ja/diary/article/266/

Firebase ブログ

https://recreal.jp/firebase_javascript-to-chatapp/

https://www.slideshare.net/tsimo/javascriptfirebase-59251680

・ダブルクォーテーション　･･･文字列中の変数を変数値に置換する
・シングルクォーテーション･･･文字列中の変数を変数値に置換しない

8/15

Favicon

https://code.i-harness.com/ja/q/d245b2

8/18

Append

https://qiita.com/kouh/items/dfc14d25ccb4e50afe89

railsでDM

https://qiita.com/nojinoji/items/2b3f8309a31cc6d88d03

8/19

Gitについて

https://qiita.com/gold-kou/items/7f6a3b46e2781b0dd4a0

シングルクォーテーションとダブルクォーテーションのちがい

https://qiita.com/YusukeHigaki/items/c93f824f897aa630002f

“”は変数を変数値に変換する

‘’は変換しない

chome favicon

https://www.japan-secure.com/entry/what-to-do-if-favicon-is-not-displayed-in-google-chrome.html

Shifを押しながら更新で直るかも

デバッグについて

https://qiita.com/snoguchi/items/8f6bb62a3166eca23ac3

ステップオーバー

関数呼び出しがあった場合でも、関数へ処理遷移しないで次の行に進みます。

ステップイン

関数呼び出しがあった場合、その関数へ処理遷移をして、関数内の処理に進みます。

ステップアウト

関数が終了するまで実行し関数を抜けます。

「idはページ内に一回しか使えない」が「classはページ中に何回でも登場出来る」

<DIV>はブロック要素であり、<SPAN>はインライン要素です。

三項演算子

condition ? expr1 : expr2

condition が true の場合、演算子は expr1 の値を返します。そうでない場合は expr2の値を返します。

8/22

Talk API

https://ai-create.net/magazine/2017/04/30/a3rt-image-influence-api-%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9%E3%82%92%E7%B0%A1%E5%8D%98%E3%81%AB%E8%A7%A3%E8%AA%AC/

https://a3rt.recruit-tech.co.jp/product/talkAPI/

jQuery

https://qiita.com/nekoneko-wanwan/items/227ccad5f8cc449e91e9

https://qiita.com/hitonari45/items/74e625c1feee9a43279e

Chat CSS

http://vdeep.net/css-chat-design

8/24

独自ドメイン＋Firebase

https://qiita.com/kei0425/items/a7da8d263e8833f7e837

https://blog.webarata3.link/firebase-mumu

8/26

Ruby on Rails ドットインストール

ユーザーがURLにアクセス ⇒ ルーティングが仕分け ⇒ コントローラーが値を入れる ⇒ ビューがコントローラーから渡された値を表示

ABCチャット修正

書き込みを降順に

https://firebase.google.com/docs/firestore/query-data/order-limit-data?hl=ja

全件読み込みが原因で使用料MAXへ

8/28

netlify

npm install netlify-cli -g

cd my-site-folder

netlify deploy

8/30

httpsにするために　

https://developers.google.com/web/fundamentals/security/prevent-mixed-content/fixing-mixed-content?hl=ja

1章

MVC

Git

デプロイまでの流れ

2章

scaffold

9/1

3章

Gemとは

Ruby用のライブラリを使う時に必要となるソフトウェア

Bundler

Railsアプリケーションに必要となるGemパッケージの種類やバージョンを管理し、複数のPCで必要なGemパッケージをインストールする仕組みを提供してくれます。

migrate

SQLを書くことなくRubyでデータベース内にテーブルを作成することができる機能

Railsコマンドが使えない場合

$ spring stop

RESTとは

Webアプリケーション構造のパターン

9/2

3章

レイアウトを使う際に、/static_pages/homeにアクセスするとhome.html.erbの内容がHTMLに変換され、<%= yield %>の位置に挿入される

ERB(埋め込みRuby: Embedded RuBy)

4章

新しく作ったメソッドはカスタムヘルパーと呼ばれます。

ハッシュは配列とほぼ同じ

インデックスとして整数値以外のものも使える点が配列と異なります

{ :name => "Michael Hartl" }

と

{ name: "Michael Hartl" }

は同じ意味

メソッド呼び出しの丸カッコは省略可能。

5章

app/assets/stylesheets/

Asset Pipeline の一部であり、このディレクトリに置かれたスタイルシートはapplication.cssの一部としてWebサイトのレイアウトに読み込まれます。

9/4

<%= render 'layouts/shim' %>

は

app/views/layouts/_shim.html.erbというファイルを探して評価して挿入する

静的ファイル (アセット)

アセットパイプラインとは、JavaScriptやCSSのアセットを最小化 (minify: スペースや改行を詰めるなど) または圧縮して連結するためのフレームワークです。

Asset Pipelineを使うと、この「開発効率と読み込み時間のどちらを重視するか」という問題について悩む必要がなくなります

Asset Pipelineがすべてのスタイルシートを1つのCSSファイル (application.css) にまとめ、すべてのJavaScriptファイルを1つのJSファイル (javascripts.js) にまとめてくれます。さらに、それらのファイルすべてに対して不要な空白やインデントを取り除く処理を行い、ファイルサイズを最小化してくれます。結果として、開発環境と本番環境という、2つの異なった状況に対してそれぞれ最高の環境を提供してくれます。