Sass（sass,scss）の!defaultに関するメモ
!defaultは「既に値が定義されている場合は上書きしない」という意味らしい。
「ベースとなる共通のスタイルを定義して、そのスタイルを再利用するようなケースで利用すると、安易に上書きすることができスタイルの再利用の効率が高まる」の意味が飲み込めなったため整理する。
基本的な使い方・うまく利用できなかった場合
以下、hoge.scssの中身
$a: #000 !default; $b: $a !default;
展開する
@import "hoge.scss"; $a: #111;
CSSに変換されるとこうなる
$a: #000 !default; $b: $a !default; $a: #111; /* 最終的に $a = #111、$b = #000 となる */
上から順番に読み込まれて展開されるため、$aと$b両方とも#111に設定することはできない。
うまく利用できた場合
hoge.scssを読み込む順番を変える
$a: #111; @import "hoge.scss";
CSSに変換されるとこうなる
$a: #111; $a: #000 !default; /* すでに$aが定義されているため反映されない */ $b: $a !default; /* $a = #111、$b = #111 となる */
実際の使用例
!default フラグは、実際には Sass のパーシャルファイルを使う場合などで利用します。@extend などで予め値を指定しつつ変更可能にしておく場合のように、上書きされる前提で !default フラグは使います。
_extend.scss（@extend用）
%colorSetting { $color: pink !default; color: $color; } %borderSetting { $borderRadius: 6px !default; border-radius: $borderRadius; }
_setting.scss（設定）
$color: blue;
base.scss（@importとメインのスタイル）
@import "setting"; @import "extend"; .hoge { @extend %colorSetting; @extend %borderSetting; } /* color:blue, border-radius:6pxとなる */
faviconの設置と作成に関するメモ
★PC
IE8以下も含めたIE、Chrome、Firefox、Safari、Opera、Edgeの記述方法
- 拡張子は.icoのみ使用可能
- rel属性にshortcutが必要
<link rel="shortcut icon" href="/path/favicon.ico">
IE9以上のIE、Chrome、Firefox、Safari、Opera、Edgeの記述方法
- 拡張子は.icoのみ使用可能
- rel属性にshortcutは不要
- type属性に以下どちらかの記述が必要
<link rel="icon" type="image/x-icon" href="/path/favicon.ico"> <!--もしくは--> <link rel="icon" type="image/vnd.microsoft.icon" href="/path/favicon.ico">
IE11以上のIE、Chrome、Firefox、Safari、Opera、Edgeの記述方法
icoを使用する場合
<link rel="icon" href="/path/favicon.ico">
pngやgifを使用する場合
<!--png--> <link rel="icon" type="image/png" href="/path/favicon.png"> <!--gif--> <link rel="icon" type="image/gif" href="/path/favicon.gif">
サイズごとに指定する場合
<link rel="icon" type="image/png" href="/path/favicon-16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/path/favicon-32.png" sizes="32x32">
★SP(iOS)
apple-touch-icon
・以下のタグ（57～180pxの各サイズ） <link rel="apple-touch-icon" href="apple-touch-icon57.png" sizes="57x57"> <link rel="apple-touch-icon" href="apple-touch-icon60.png" sizes="60x60"> <link rel="apple-touch-icon" href="apple-touch-icon72.png" sizes="72x72"> <link rel="apple-touch-icon" href="apple-touch-icon76.png" sizes="76x76"> <link rel="apple-touch-icon" href="apple-touch-icon114.png" sizes="114x114"> <link rel="apple-touch-icon" href="apple-touch-icon120.png" sizes="120x120"> <link rel="apple-touch-icon" href="apple-touch-icon144.png" sizes="144x144"> <link rel="apple-touch-icon" href="apple-touch-icon152.png" sizes="152x152"> <link rel="apple-touch-icon" href="apple-touch-icon180.png" sizes="180x180"> ・ルート直下にファイル名apple-touch-icon.pngとして直置き（180px）
windows8,10(ピン留め)
Windows8やWindows10のスタート画面にWebサイトをピン留めした時の表示を細かく指定したい場合には、Windows用アイコンの設定を行う。
<meta name="application-name" content="{サイト名}"/> <meta name="msapplication-square70x70logo" content="small.jpg"> <meta name="msapplication-square150x150logo" content="medium.jpg"> <meta name="msapplication-wide310x150logo" content="wide.jpg"> <meta name="msapplication-square310x310logo" content="large.jpg"> <meta name="msapplication-TileColor" content="#FAA500">
タブの色を変える(android,chrome,Googleアプリ)
<meta name="theme-color" content="#378586">
推奨される指定方法とされているもの（2017年時点）
- favicon.pngはfavicon.icoに含まれる。
- タグで複数サイズ指定は不要。
- 64pxのfavicon.ico、180pxのapple-touch-icon.png、192pxのfavicon.pngは対応している表示位置でいずれも表示可。
- タグで指定すればルート直置きは不要。
- favicon.icoとapple-touch-icon.pngが重複した場合ブラウザによって優先度が異なる。
以上から、推奨される指定方法は下記の通りとなる。
<link rel="icon" href="./favicon.ico" type="image/x-icon"> <link rel="apple-touch-icon" href="./apple-touch-icon.png" sizes="180x180">
2020年11月時点で一番よさそうな設定
★faviconデータの作り方と設置
- 260×260px～320×320pxくらいの正方形のカンバスサイズでデータを作成する。
- Faviconジェネレータを使用してデータを作成する。 -・使い方参考サイト1 -・使い方参考サイト2
- favicon.ico、apple-touch-icon.png、android-chrome-256x256.pngの３つを保存して、下記コードをhtml内に記載する。
<link rel="icon" href="/favicon.ico"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" href="/android-chrome-256x256.png">
OGP設定に関するメモ
OGPについて
OGPとは、FacebookやTwitterなどのSNSでサイトがシェアされた際に、画像・タイトル・説明文・URLなどを正しく表示させるための仕組み。
OGPの正しい設定方法！Facebook・Twitter対応
OGPとは？OGPの基本からOGP画像のサイズや設定方法を分かりやすく解説
詳しい使い方
prefix属性の設定
OGPの設定を行う場合は、prefix属性を使用して「OGPを使うための宣言」が必要となる。1
HTML5ではへの設定が推奨されている。
<html prefix="og: https://ogp.me/ns#">
一方、Facebook for Developersによると、
内への設定が推奨されている。<!-- トップページの設定 --> <head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# website: https://ogp.me/ns/website#"> <!-- 記事ページの設定 --> <head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# article: https://ogp.me/ns/article#">
Facebookに関する設定を行う場合は、
内に設定をするほうが良い。※xhtmlではhtml内に設定する。その場合head内への記載不要。
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#">
property属性の設定
<!-- OGPの基本設定 --> <meta property="og:type" content="ページの種類"> <meta property="og:url" content="ページのURL"> <meta property="og:image" content="ページの画像URL"> <meta property="og:title" content="ページのタイトル"> <meta property="og:site_name" content="サイト名"> <meta property="og:description" content="ページの説明"> <meta property="og:locale" content="言語の指定">
og:type
表示するページの種類を設定。トップページは「website」、記事やニュースなどの投稿ページは「article」を設定。（デフォルトはwebsite）
カテゴリやタグなどのアーカイブページにもOGPを設定する場合は、判断に迷う場合にはデフォルトのwebsiteでOK。
※情報サイトで「blog」を設定できるとしているサイトがあるが、現在はリファレンスに記載されていないため使用しない。
og:url
表示するページのURLを設定。Facebookでは正規URL（カノニカルURLとして指定しているページ）に設定することを推奨している。
og:image
表示するページの画像URLを設定。
FacebookのOGP画像の推奨サイズは1200×630px。スマホなどの解像度の高いデバイスでも画像が粗くならないように表示するためには最低でもこのサイズ以上にする。
※サイズによってサムネイルの表示サイズは変化する。600×315px以上の場合は横長の長方形になり、200×200px～600×314pxの場合には正方形に近いサイズで画像が表示されとサイト説明と横並びになる（２カラム型）
og:title
表示するページのタイトルを設定。基本的にはhead内のtitleと同じでよい。※サイト名などのブランド情報を含まないtitleを20文字以内で設定することが好ましいという情報あり。
og:site_name
サイト名を設定。（サイト名・ブランド情報はog:titleではなくこちらに設定）
og:description
表示するページの要約となる説明文を設定。
表示される文字数はPCとSPで異なる。およそ80～90字を目安に設定。基本的にはhead内のdescriptionと同じ設定でよいが、文字数が多い場合には途中で切れてしまう可能性があるためOGP用に簡略化する。
og:locale
日本語でマークアップしていることを明示するため「ja_JP」を設定。デフォルトは「en_US」。
:point_right:Facebook用の設定
<meta property="fb:app_id" content="FacebookアプリID">
FacebookアプリIDを設定。FacebookアプリIDをすでに取得している場合は、Facebook for Developersの「すべてのアプリ」にログインすればID番号を確認できる。IDをまだ取得していない場合は「Facebook for Developers」で登録が必要となる。
※個人アカウントを利用する場合はこちら。ただし個人情報を晒す危険があり、現在は開発者アカウントのみの設定でよいため、個人アカウントをあえて設定する必要はない。
<meta property="fb:admins" content="adminID">
Twitter用の設定
<meta name="twitter:card" content="Twitterカードの種類"> <meta meta name=”twitter:site” content=”@ユーザー名">
twitter:card
カードタイプを設定。「summary」は小型画像とテキストが横並び、「summary_large_image」は大型画像の下にテキストが配置される。
twitter:site
Twitterのユーザー名を設定
シェアされた時の表示内容をプレビューするツール
突然拒否されたssh接続を復活させる方法
terminalからさくらのVPSサーバにssh接続しようとしたところ、 急に
Permission denied (publickey).
と拒否されました。（ついこの前まで接続できてたやん…）
もしかしたら、最近macOSのバージョンアップをしたのが関係あるのかな？と思いましたが実際の原因は不明です。 また同じことが起きたときのために対処方法をメモしておきます。
【環境】
（リモートサーバ）
・ さくらのVPS
・ Debian
（ローカル）
・macOS
1.ローカルPC側で公開鍵・秘密鍵を再発行する
$ cd ~/.ssh $ ssh-keygen -f client_rsa -t rsa -b 2048 Generating public/private rsa key pair. client_rsa already exists. Overwrite (y/n)? （上書きして良いかと聞かれるので y と入力） Enter passphrase: パスワードを設定する場合は入力してEnter。不要ならEnter。 Enter some passphrase again: もう一度同じように入力。
（本当は元々発行していた鍵を消してから再作成した方が良いのかもしれませんが、今回はそのまま上書きしました…）
.sshを覗くと鍵ができている
$ ls ~/.ssh client_rsa client_rsa.pub
作った鍵をパスワード管理システム（キーチェーン）に登録しておくと、 サーバへの接続の際に鍵を指定しなくてよくなる(-iオプションが不要に）
$ ssh-add -K ~/.ssh/client_rsa ←鍵の登録
2.サーバ側のssh設定を変更する
さくらのVPSはブラウザからマイページにアクセスして、VNCコンソールを立ち上げて操作する。
$ sudo vim /etc/ssh/sshd_config
ドーンと設定一覧が出てくるので、
PasswordAuthentication noを
PasswordAuthentication yesに書き換える。
書き換え終わったらsshdを再起動する。
$ sudo servise sshd restart
3.ローカルPCから、サーバ側に公開鍵を送信する
$ ssh-copy-id -i ~/.ssh/client_rsa.pub -p 設定したポート番号 サーバのユーザー名@サーバのIPアドレス
色々な文字が出てきて、最後に
サーバのユーザー名@サーバのIPアドレス's password:
と聞かれるので、サーバのログインパスワードを入力する。
無事に送信されるとNumber of key(s) added: 1 〜何たらかんたら〜と文字が出てくる。
4.サーバ側のssh設定を元に戻す
VNCコンソールを立ち上げて操作する。
$ sudo vim /etc/ssh/sshd_config
先ほど変更した
PasswordAuthentication yesを
PasswordAuthentication noに戻す
書き換え終わったらsshdを再起動する。
$ sudo servise sshd restart
5.ローカルPCからサーバにssh接続できるか確認する
$ ssh -p ポート番号 サーバーのユーザー名@サーバーのIPアドレス
※キーチェーンに鍵を登録していない場合には -iで鍵を指定するのでこのようになる
$ ssh -i ~/.ssh/client_rsa -p ポート番号 サーバーのユーザー名@サーバーのIPアドレス
無事に接続できたら一件落着👶🏻
再設定の方法を調べるに当たって過去の自分の勉強日報にとても助けられ、 記録を残しておくのは大事だなと心から実感しました👩🏻💻
nginxサーバのページにCSS・画像をおくには
CSSファイルの置き方
ページのルートディレクトリ（index.htmlが置いてある場所）と同じ場所に、CSSファイルをおく。（複数あるときはディレクトリを作ってもOK）
htmlファイルのなかで<link>タグで参照する。
画像の置き方
CSSと同様に、ページのルートディレクトリの中に画像をおく。htmlファイルの中で<img>タグで参照する。（imgディレクトリにまとめることがほとんどだと思う）
ローカルPCからNginxサーバに画像を転送する方法
scpコマンドを使う。
$ scp -P ポート番号 ~/Desktop/hoge.png（ローカルの画像のパス） リモートサーバのユーザー名@URLまたはIPアドレス:~/img/（リモートサーバのパス）
※ローカル画像のパスについて もしディレクトリごと送信する場合は「-r ~/Desktop/hoge（ローカルの画像のパス）」のようにオプションをつける。
※リモートサーバのパスについては権限が必要なディレクトリに直で送ると弾かれてしまうため、一旦ユーザーのディレクトリに送信する方がいいかもしれない（きっと方法があると思うのだが…）
nginx概要・インストールまでの初歩的なまとめ
私たちがサイトにアクセスするとき、
ネットワークではこのような動きがおきている。
・ブラウザからWebサーバにHTTPリクエストを送信する
・WebサーバはブラウザにHTTPレスポンスを返す
nginx（エンジンエックス）は、このWebサーバの役割を果たすソフトウェアである。
他に代表的なものとしてはApacheやIISといったものがある。
主な使い方は下記の３つとなる。
・静的なコンテンツの配信
・動的なコンテンツの配信
・ロードバランサ、リバースプロキシとしての使用
特徴（メリット）
・設定ファイルの構造がシンプルで扱いやすい
・動作の安定性が高い
（サービスを止めない再起動やバージョンアップができる、
安定してドキュメントの記述通りに動作をする）
・同時接続が増えて高負荷になっても性能が落ちにくい
・高速性が高い
デメリット
・動的コンテンツの大量配信には不向き
（動画を中心としたサイトなど、極端に多いものはApacheの方が有利）
・日本語での初心者向け技術情報が少なく、少々ハードルが高い
nginxのインストール方法
環境
・debian 10.4
・さくらのVPSでの実行
インストール
aptを使用して簡単に行うことができる。
$ sudo aptitude install nginx
インストール後の確認
下記のコマンドを実行する。（バージョンを出力してみる）
$ sudo nginx -v
インストールしたソフトウェアの保存場所
インストールされた本体は /etc/init.d/nginx に保存される。
※ /etc/init.d = システム(さくらのVPS)起動時に自動的に実行するプログラムが書いてあるディレクトリ
nginxを起動
$ sudo /etc/init.d/nginx start もしくは
$ sudo service nginx start
$ sudo systemctl start nginx
（最近システム起動時のコマンドはserviceではなくsystemctlに変更された）
ブラウザでの確認
「Welcome to Nginx!」という画面が表示されれば起動成功。
次回、設定ファイルについての内容をまとめます。
Rails Tutorial 第2・第3章の振り返り
6/13 Rails Tutorial
第2章、第3章について振り返ります。
＜つまづいたところ、調べたこと＞
・第2章
①ホームのページではなく/userなどの別ページをcloud9で表示する方法
・第3章
②なぜかルートページを変更した後にブラウザに表示されなくなる現象
①ホームのページではなく/userなどの別ページをcloud9で表示する方法
cloud9で生成されるURLが長すぎて、どの部分がどういう意味なのかがわかりませんでした。
結論、生成されたURL = / のページとわかり、一番後ろに/userなどの記述を付け足せばOKでした。
②なぜかルートページを変更した後にブラウザに表示されなくなる現象
原因不明ですが、Previewボタンでの操作を繰り返したり、別タブのURLの再読み込みを繰り返していたらいつの間にか解消しました。謎。
ボリュームが濃すぎて、他にも引っかかったところがあったような気がしますが忘れました…
ただ、その部分は自力で解消、ググってすぐに解決できたのは確かです。でも記録できればよかったな…
以上、第2章・第3章の振り返りでしたくコ:彡
