rakeの概要

やったこと

参考資料を読む、サンプルのハンズオン

参考資料

rakeについて

  • コマンドラインツールを扱うライブラリ
  • Ruby-Makeの略でRubyで何かを作ったり、定型的な処理をしたいときに役立ってくれるツール
  • Rakefileに実行内容を記述しrakeコマンドで呼び出す

taskについて

  • タスク名と依存(事前)タスクを設定
  • タスクに”作業”を割り振る
  • すでに生成されているファイルなどがあってもタスクは実行される
  • defaultタスクは予約語
# 例
task "タスク名" => ["依存タスク群"] do
 作業内容
end
# rakeコマンド実行
$ rake タスク名

# deafultに設定してあればtaskの指定を省略出来る
$ rake

ファイルタスクについて

  • ファイル生成特化タスク
  • taskと同様に名称、依存ファイル、作業内容を定義する
  • taskと違い、差分だけビルドする(時短、リソースの合理化)
  • Kernel#fileのインスタンスメソッド

    よく使うメソッド

  • name - タスクの名称。ファイルタスクの場合、ファイルパス。
  • prerequisites - 依存先であるタスク名の配列。
# 例1
file "ファイル名" => ["依存ファイル群"] do
 hoge
end
# 例2 ブロック引数にはタスクそのものを渡す事が出来る
file "hoge" => ["fuga", "foo"] do |t|
  puts "タスク名は#{t.name}、依存ファイルは#{t.prerequisites.join('')}です"
end

ディレクトリ生成機能

  • directoryメソッドを使う
  • ブロックは追加出来ない
# taskでそのまま書くと
task "mkdir" do
  mkdir hoge_dir
end
# directoryを使う
directory hoge_dir
# ネストしていても一発で作成できる
directory "./nest1/nest2/dir"
タスクの説明文

タスクの上に書く

desc "hogeしてくれるタスク"
task "hoge"

rake -tで一覧を確認

★タスクの動的生成

rubyで書ける!DSLによる賜物とのこと
1.upto(5) { |i|
  desc "task no.#{i}"
  task "task_#{i}" do |t|
    puts "Invoke #{t.name}"
  end
}
$ rake -T
rake task_1  # task no.1
rake task_2  # task no.2
rake task_3  # task no.3
rake task_4  # task no.4
rake task_5  # task no.5

Cプログラム実行とコンパイル

gist2b85770c470a10d1f9052e70c12b5145

本日のお試しツール

markdownの下書き用にBoostnoteを導入。 Electron謹製で気になっていた。 リニアに出るキレイなプレビューにニンマリ(´∀`) ドキュメント書き上達したい。

所感

久々にrubyを触った( ´∀`)

rakeはパワフルなツールで奥深いと思った。

rubyの頭に切り替えるため、 夏休みに入ったら途中でやめてしまったチェリー本を終わらせたいと思う🍒 それでまた言語仕様の理解を深めたい。

css tutorial続き(細かい作り込み、アイコン、表、行間等)

やったこと

気づき

  • Bracketsをメインに作業したが、codepenでのアイコン表示やボタンの色等、両者間で微妙に違いやズレがあった(プレビューブラウザは共にchrome
  • アイコン作成で余分な部分を上塗りで見えなくする為に大きな余白を取らなければいけなかった。
  • formのデザインはアプリの入力部分となり、使用感(UI・UX)に大きな影響を与える重要な所だなと再認識した。いかにツールとして手間をかけずに使えるようにするかを考える醍醐味があると感じた(デザイン=問題解決

見た目は似せることが出来たけれども、、

  • タグかクラスかはたまたIDで指定するのか。。
  • widthかflex-basisで指定するのか。。
  • remか%かpxで指定するのか。。  などすごく悩みながら進めた。個々のケースでどれがベターなのかがまだまだ😱

ツールについて

リニアに見た目がわかるエディターを探してとりあえずBracketsを使ってみたが、他に良いものがないか質問すればよかった。

所感

とにかく難しい。やり方もいろいろあり、セレクタがきちんと出来ていなかったりしてもエラーも出なかったりなので非常に難しく感じた。弄りながらまぐれで出来たのと違い、狙って計算して出来るようになるのには相当な経験が必要だと思った。 今回みたいな1ページだけ似せるのとは違い、サイトやアプリ全体でのデザインを統一する場合は緻密に計算してつくる必要があると学んだ。

flexboxでレイアウトを決めてみた

やったこと

レイアウトと色分けで全体像がでてきた

雰囲気が出てきた💫 スクリーンショット 2018-08-03 1.55.21.png

flexboxでcontainer化して配置

mainのarticleはhtml上でasideのバナーより先に記述されているが、 orderを使って右に来るように配置 スクリーンショット 2018-08-03 2.05.28.png

所感

widthを使わずにflex: 1;で横幅いっぱいに広がるのが便利だった。 逆に画像はwidthで指定しないとだめだと気づくまで手こずった。 cssの苦手意識があったのはfloatが苦手だったからかもしれないと気づく。 flexboxだとレイアウトがパスルのようにはめられたのでfloatより簡単に感じた。

コメントを頂きました

@machidaさんより f:id:yasuaki6:20180803211546p:plain

flexboxの"order"がややこしかったので図解してみた

やったこと

  • flexboxについて調べ学習した
  • orderプロパティについて分かりづらかったのでこれだけ図解でまとめた

参考:order使用例

orderプロパティとは

  • 個別のアイテムの順序を指定出来る
  • アイテムはデフォルトでは0の値を取り、正や負の整数値を設定する👈重要❗

前提

1~10の要素についてCSSのみで並べ替えを行う

基本html

<div class="samplebox" id="flex1">
        <p class="p1">ボックス<strong>①</strong></p>
        <p class="p2">ボックス<strong>②</strong></p>
        <p class="p3">ボックス<strong>③</strong></p>
        <p class="p4">ボックス<strong>④</strong></p>
        <p class="p5">ボックス<strong>⑤</strong></p>
        <p class="p6">ボックス<strong>⑥</strong></p>
        <p class="p7">ボックス<strong>⑦</strong></p>
        <p class="p8">ボックス<strong>⑧</strong></p>
        <p class="p9">ボックス<strong>⑨</strong></p>
        <p class="p0">ボックス<strong>⑩</strong></p>
    </div>

例1

スクリーンショット 2018-07-29 23.12.24.png

例1  ”row”で並べ、orderは特に何も指定しない
#flex1 {
    display: flex;
    flex-direction: row;
}

例2

スクリーンショット 2018-07-29 23.13.12.png

例2  単純な逆順であれば”row-reverse”を使う
#flex2 {
    display: flex;
    flex-direction: row-reverse;
}

例3

スクリーンショット 2018-07-29 23.46.52.png

例3  8番目の要素(p8)のみ−1とする
#flex3 .p8 {
    order: -1;
}

★並べられた要素はデフォルトが”0”で、ひとつの要素を−1とすると、それが一番先頭になる(ややこしい)

例4

スクリーンショット 2018-07-30 0.07.17.png

例4 2つの要素(p4,p6)を指定し、それぞれ1,2とする
#flex4 .p4 {
    order: 1;
}
#flex4 .p6 {
    order: 2;
}

★例によって0以上の整数にした要素は末尾に移動する。元の順序も残るからか、1、1の指定でも4→6の並びになる挙動を確認できた(追記:正しくは同順の場合HTML記述順になる) サンプルページではなぜか10、11指定だった(?_?)

例5

スクリーンショット 2018-07-30 0.19.55.png

例5      1〜10で任意の整数を当て並べ替える(寧ろ分かりやすい😃)
#flex5 .p5 {
    order: 1; <=0でも可
}
#flex5 .p2 {
    order: 2;
}
〜〜  中略  〜〜
#flex5 .p1 {
    order: 9;
}
#flex5 .p6 {
    order: 10;
}

所感

いわゆる配列のインデックスとは考え方が違うので、ややこしかった。 なんとなく数字を入れればそれっぽく動くが、きちんと理解しないと後で困ると思った。 実際にorderで自由に並べ替えるメリット、使い所はどういう所なのかはピンと来なかった。

追記

使い所として、HTMLで読み込ませる順序とレスポンシブ対応に便利とのこと👉なるほど❗

nginxでSSL (Let's Encrypt利用)

前提

やったこと

学び、気付き

Let's Encryptは無料で暗号化したサイトを普及するために出来たサービス。IPアドレスで指定は出来ず、ドメイン名で指定したサイトを暗号化するとの事。 ドメイン認証(DV)証明書のみで、企業認証(OV)証明書やEV証明書は取得できない。 参考1

自動発行で簡単に証明書が発行される スクリーンショット 2018-07-26 1.16.50.png

参考2

導入手順

wget https://dl.eff.org/certbot-auto
chmod a+x certbot-auto
./certbot-auto
以下適当に選択肢選択

参考3

すると、拍子抜けするほど自動であっさり出来た💦
Congratulations! You have successfully enabled https://nginx-domain.tk and
https://www.nginx-domain.tk

保護されたページに変化

スクリーンショット 2018-07-26 1.01.09.png

テストを試してみる

You should test your configuration at:
https://www.ssllabs.com/ssltest/analyze.html?d=nginx-domain.tk
https://www.ssllabs.com/ssltest/analyze.html?d=www.nginx-domain.tk

証明書の画面が表示

スクリーンショット 2018-07-26 0.58.54.png

スクリーンショット 2018-07-26 0.57.32.png

所感

certbotを使うと簡単にSSL化出来、驚いた。 インフラに関してさくらVPSの無料期間を利用して駆け足で取り組んだので、また作りたいサーバーを自作する際に復習したい。

nginxでVirtualHost

やったこと

  • 1つのIPアドレスで複数のドメインを立ち上げる
  • freenomで無料ドメインを取得⇓
  • www.nginx-domain.tk と nginx-domain.tk
  • 設定ファイルの編集、indexファイルを分け、ブラウザでわかるようにした
  • ここを参考に進めた

つまった所

前日に設定ファイルを作成したがブラウザに表示できなかった。

改善策

nginxの設定を変更したら、ストップ、再起動すると設定が反映された。

$ /etc/init.d/nginx stop
[ ok ] Stopping nginx (via systemctl): nginx.service.
$ /etc/init.d/nginx start
[ ok ] Starting nginx (via systemctl): nginx.service.

色々いじってみた

設定ファイル

``` $ cat /etc/nginx/sites-available/nginx-domain.tk

server { listen 80; server_name www.nginx-domain.tk; access_log /home/demo/public_html/nginx-domain.tk/log/access.log; error_log /home/demo/public_html/nginx-domain.tk/log/error.log; location / { root /home/demo/public_html/nginx-domain.tk/public/; index www_index.html index.php; } } server { listen 80; server_name nginx-domain.tk; access_log /home/demo/public_html/nginx-domain.tk/log/access.log; error_log /home/demo/public_html/nginx-domain.tk/log/error.log; location / { root /home/demo/public_html/nginx-domain.tk/public/; index index.html index.php; } } ```

ログも残せた
``` $ cat /home/demo/public_html/nginx-domain.tk/log/access.log

39.111.64.108 - - [23/Jul/2018:23:39:51 +0900] "GET / HTTP/1.1" 200 106 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36" 39.111.64.108 - - [23/Jul/2018:23:39:51 +0900] "GET /favicon.ico HTTP/1.1" 404 200 "http://nginx-domain.tk/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36" 39.111.64.108 - - [23/Jul/2018:23:41:46 +0900] "GET / HTTP/1.1" 200 106 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36" 39.111.64.108 - - [23/Jul/2018:23:41:47 +0900] "GET /favicon.ico HTTP/1.1" 404 200 "http://www.nginx-domain.tk/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36" 39.111.64.108 - - [23/Jul/2018:23:49:41 +0900] "GET / HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36" 39.111.64.108 - - [23/Jul/2018:23:49:44 +0900] "GET / HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36" 39.111.64.108 - - [23/Jul/2018:23:49:47 +0900] "GET / HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36" 39.111.64.108 - - [23/Jul/2018:23:58:27 +0900] "GET / HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36" 39.111.64.108 - - [23/Jul/2018:23:58:40 +0900] "GET / HTTP/1.1" 200 147 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36" 34.239.107.223 - - [24/Jul/2018:00:00:53 +0900] "GET / HTTP/1.1" 200 147 "-" "Slackbot-LinkExpanding 1.0 (+https://api.slack.com/robots)" 35.153.127.83 - - [24/Jul/2018:00:00:54 +0900] "GET /favicon.ico HTTP/1.1" 404 143 "-" "Slackbot 1.0 (+https://api.slack.com/robots)" 52.71.192.87 - - [24/Jul/2018:00:00:55 +0900] "GET / HTTP/1.1" 200 106 "-" "Slackbot-LinkExpanding 1.0 (+https://api.slack.com/robots)" 52.72.111.29 - - [24/Jul/2018:00:00:56 +0900] "GET /favicon.ico HTTP/1.1" 404 143 "-" "Slackbot 1.0 (+https://api.slack.com/robots)" 39.111.64.108 - - [24/Jul/2018:00:02:47 +0900] "GET / HTTP/1.1" 200 147 "-" "Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1" 39.111.64.108 - - [24/Jul/2018:00:03:04 +0900] "GET / HTTP/1.1" 200 106 "-" "Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1" ```

ドメインで同じIPアドレスかを確認

```

$ nmap nginx-domain.tk

Starting Nmap 7.40 ( https://nmap.org ) at 2018-07-24 00:25 JST Nmap scan report for nginx-domain.tk (160.16.51.37) Host is up (0.0000050s latency). rDNS record for 160.16.51.37: tk2-201-10283.vs.sakura.ne.jp Not shown: 998 closed ports PORT STATE SERVICE 80/tcp open http 1234/tcp open hotline

Nmap done: 1 IP address (1 host up) scanned in 2.64 seconds

$ nmap www.nginx-domain.tk

Starting Nmap 7.40 ( https://nmap.org ) at 2018-07-24 00:26 JST Nmap scan report for www.nginx-domain.tk (160.16.51.37) Host is up (0.0000040s latency). rDNS record for 160.16.51.37: tk2-201-10283.vs.sakura.ne.jp Not shown: 998 closed ports PORT STATE SERVICE 80/tcp open http 1234/tcp open hotline ```

所感

なにかエラーがあるとnginx -tでエラー箇所が特定できて便利だった。 アクセスログをみるとiphoneのosの情報も載ってるのだと知った。 OSをアップデートしてないのも丸わかりだなと思った。