omohayui blog

おも‐はゆ・い【面映ゆい】[形][文]おもはゆ・し[ク]《顔を合わせるとまばゆく感じられる意》きまりが悪い。てれくさい。

ノンデザイナーズ・デザインブック勉強会(1)

1.ジョシュア・ツリーの悟り

近所にあるジョシュア・ツリーに気付かなかった作者
 ⇒ 問題や原則、ものごとには名前がないと意識することができない

4つの基本原則

4つの基本原則は互いに関連してあっている

2.近接

ロビンの近接の原則

関連する項目をまとめてグループ化する

類似の要素をグループ化して視覚的ユニットを作成
 ⇒ ページが組織化される
 ⇒ 情報をより明確に伝えられる

コントラストとの組み合わせ
 ⇒ 見出しを強調することで、より組織化する

整列との組み合わせ
 ⇒ インデントで余白を操作する

まとめ

  • 知覚的に関連するものは視覚的にも組織化させる
  • 視線の流れを意識する
  • 要素間に均等の空白をつくらない
  • 見出し、小見出し、キャプション、画像などで要素間の関連をつくる

3.整列

ロビンの整列の原則

ページ上のすべてのものを意識的に配置しなければならない

共通の境界線を作成することで、各要素を結びつける
 ⇒ より組織的に情報を伝える
 ⇒ レイアウトに強さを与える

ありがちな中央揃え
 ⇒ 安心感を与えるが、退屈に見えがち
 ⇒ 洗練されたデザインにはあまり使われていない
 ⇒ 中央揃えにひねりを加えることで洗練させることもできる

1ページに1種類の文字揃え
 ⇒ 左揃えの要素と右揃えの要素が関連していればOK
 ⇒ 訓練積んでいる人ならOK

強い線を意識する
 ⇒ 強い線を意識できればそこを基準に全体のレイアウトがくめる
 ⇒ 強い整列が存在すれば”意図的”にくずした要素も入れられる

まとめ

  • 基準となる線で一体化、組織化させる
  • 空間的に離れていても意識的に揃える要素を見つけて配置する
  • 同じページ内で2種類以上の文字揃えを使用しない

Github Shop で OctoCat ステッカーを注文してみた

OctoCat のステッカー可愛い。PCとかに貼りまくりたい。

でも Github Shop で買うしかないみたい。

ということで注文してみた。

購入したのは・・・

  • ステッカー1、2    $5 × 2
  • コースター(4つ入り)  $5 × 1

送料は・・・

f:id:omohayui:20150808023432p:plain

  • 国際便    $15.34

商品より高い!\(^o^)/

でもさ、仕事でもプライベートでもお世話になってるしさ。いいよね。うん。

届いたらまた写真upします。

nginx + unicorn + Rails でサイトをつくる

いきさつ

試作サイトを職場でURL公開したら、
みなさんのアクセス(大した量じゃない)で
サイトがダウンするという悲しいできことがありました。

その時に Apache + Passenger + Rails で作ったというと
何人かの方々に nginx + unicorn で worker を複数立てた方がいいんじゃない
とアドバイスもらい構築しなおしました…

環境

手順

nginxのリポジトリ追加

sudo rpm -ivh http://nginx.org/packages/centos/6/noarch/RPMS/nginx-release-centos-6-0.el6.ngx.noarch.rpm

nginxのインストール

sudo yum install -y nginx --disablerepo=* --enablerepo=nginx

バージョンの確認

nginx -v
nginx version: nginx/1.8.0

Gemfileにunicorn追記

cd /home/dir_name/app_name/
vim Gemfile
## 追記内容
gem 'unicorn'

unicornも含めてインストール

bundle install

unicornの設定

cd config/
vim unicorn.rb
### unicorn.rbの内容
application = 'app_name'

worker_processes 2   # 立ち上げるworker数
working_directory "/home/dir_name/#{application}"

listen "/var/run/unicorn/unicorn_#{application}.sock"   # Unix Domain Socket

pid "/var/run/unicorn/unicorn_#{application}.pid"       # PIDファイル出力先

timeout 60

preload_app true

stdout_path "/var/log/unicorn/unicorn.stdout_#{application}.log"  # 標準出力ログ出力先
stderr_path "/var/log/unicorn/unicorn.stderr_#{application}.log"  # 標準エラー出力ログ出力先

GC.respond_to?(:copy_on_write_friendly=) and GC.copy_on_write_friendly = true

before_fork do |server, worker|
  defined?(ActiveRecord::Base) and ActiveRecord::Base.connection.disconnect!

  old_pid = "#{server.config[:pid]}.oldbin"
    if old_pid != server.pid
      begin
        sig = (worker.nr + 1) >= server.worker_processes ? :QUIT : :TTOU
        Process.kill(sig, File.read(old_pid).to_i)
      rescue Errno::ENOENT, Errno::ESRCH
      end
    end

    sleep 1
  end

after_fork do |server, worker|
  defined?(ActiveRecord::Base) and ActiveRecord::Base.establish_connection
end

sslの設定

ここらへんを参考にSSL自己証明書を作成
Apache/SSL自己証明書の作成とmod sslの設定 - maruko2 Note.

nginxの設定

cd /etc/nginx/conf.d
# default.confはリネームした
mv default.conf _default.conf.bak
vim app_name.conf
### app_name.conf の内容 (もっと良い書き方があるはず)
upstream backend-unicorn {
  server unix:/var/run/unicorn/unicorn_app_name.sock fail_timeout=0;
}

# http
server {
  listen 80;
  server_name app_domain;
  root /home/dir_name/app_name/public;
  index index.html;
  access_log /var/log/nginx/access.log;
  error_log /var/log/nginx/error.log;

  location / {
    try_files $uri @proxy;
  }

  location @proxy {
    proxy_set_header X-Real-IP  $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_pass http://backend-unicorn;
  }

  location ~* \.(ico|css|js|gif|jpe?g|png)(\?[0-9]+)?$ {
     expires 1y;
  }
}

# https
server {
  listen 443 ssl;
  server_name app_domain;
  root /home/dir_name/app_name/public;
  index index.html;
  access_log /var/log/nginx/ssl_access.log;
  error_log /var/log/nginx/ssl_error.log;

  ssl on;
  ssl_certificate /etc/nginx/ssl/server.crt;
  ssl_certificate_key /etc/nginx/ssl/server.key;
  ssl_session_timeout 10m;
  ssl_protocols SSLv2 SSLv3 TLSv1;
  ssl_ciphers HIGH:!aNULL:!MD5;
  ssl_prefer_server_ciphers on;

  location / {
    try_files $uri @proxy;
  }

  location @proxy {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-Forwarded-Proto https;
    proxy_redirect off;
    proxy_pass http://backend-unicorn;
  }

  location ~* \.(ico|css|js|gif|jpe?g|png)(\?[0-9]+)?$ {
     expires 1y;
  }
}

nginxの起動

# 起動
sudo service nginx start
# 再起動
sudo service nginx restart

unicornのworker立ち上げ

# 起動
bundle exec unicorn_rails -c /home/dir_name/app_name/config/unicorn.rb -E production -D -p 13000
# 再起動
kill -HUP `cat /var/run/unicorn/unicorn_app_name.pid`

起動しているかプロセス確認

ps aux | grep unicorn

phpMyAdminの脆弱性をついた攻撃

趣味で作成中のサイトに、アムステルダム辺りから謎アクセスが結構きていた。

# 例)
[18/Jul/2015:04:06:34 +0900] "GET //phpMyAdmin/scripts/setup.php HTTP/1.1" 404 1564 "-" "-"
[18/Jul/2015:04:06:34 +0900] "GET /muieblackcat HTTP/1.1" 404 1564 "-" "-"
[18/Jul/2015:04:06:34 +0900] "GET //phpmyadmin/scripts/setup.php HTTP/1.1" 404 1564 "-" "-"
[18/Jul/2015:04:06:34 +0900] "GET //myadmin/scripts/setup.php HTTP/1.1" 404 1564 "-" "-"

調べたらphpMyAdmin脆弱性をついた攻撃だった。 もともと2009年に報告されている脆弱性だが、 今でも放置されているサイトがごまんとある為、乗っ取りを狙ったアクセスが絶えない模様。

ていうかまだ全然コンテンツとしてはリリースしてないんだけど、 ドメイン名から辿り着くのかな。

そもそもPHPでなく、Railsで作成中のサイトなので全く影響はないのですが、こわいなーと思ったしだいでした。