グロースエンジニアのブログ

Ruby on Rails エンジニアです!開発に当たって勉強したことをまとめていこうと思います!

【Rails】capistrano でのデプロイを idobata に通知する

結構サックリいけるかなと思ったら、なぜかハマったのでメモがてら...

capstrano 3 だけど、

IdobataにCapistrano(2系)のdeploy通知を投げる - Qiita この辺を参考にしつつ、とりあえずそのままベタ書きして実行してみたら怒られた。

config/deploy.rb

after 'deploy:restart', 'deploy:notify_revision'

# user_name, user_repository, idobata_hook_url は自分のものに修正
namespace :deploy do
  # idobata 通知
  task :notify_revision do
    user_name = `git config --global user.name`.gsub("
", '')
    github_path = "https://github.com/user_name/user_repository/tree/#{current_revision}"
    source = "App was deployed by #{user_name} #{stage}deployed source tree: #{current_revision[0, 7]}"

    idobata_hook_url = "https://idobata.io/hook/custom/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

    run "curl --data-urlencode 'source=#{source}' -d format=html #{idobata_hook_url}"
  end
end
cap aborted!

Don't know how to build task 'deploy:notify_revision' (see --tasks)

ゴニョゴニョしたけどなぜかタスクが読み取られず... 

続きを読む

【Rails】CSSのベンダープレフィックスをいい感じに自動で付けてくれる gem 'autoprefixer-rails'

最近CSSでできることの幅が増えてきた。また、flexbox などのCSSレイアウトも使う機会が増えてきていると思います。

使うときに毎回ベンタープレフィックスを気にしていられないし、だからといって付け忘れるとレイアウトが崩れる...

そんな悩みはRailsのgem 'autoprefixer-rails'で一発解消!

続きを読む

【Google アナリティクス】サイトに訪問した会社を確認する方法

最近アナリティクスをいじっていることが多いんですが、営業の人に喜ばれたデータが「サイトに訪問している会社・企業」情報です。

これ、僕も知らなかったんですが見ていても面白いので確認してみてください!

続きを読む

【Ruby on Rails】ローカル環境でunicornを設定する

実は何度かサイトを公開しようと思って失敗しております...

そこで、本番を想定して少しずつサーバ周りを覚えていこうと思い、ひとまずローカルでunicornを設定して動くかを確かめてみようと思ったのが、これをやろうと思ったきっかけです。

続きを読む

【Ruby on Rails】データベースを sqlite から mysql に変える

何となくデフォルトのsqliteを使っとったけど、ふとmysqlってどうやって設定するんじゃろ?って思って設定を変更したのでメモ!

 

ついでにユーザーも作成してみたので、その記録をしておきます。
mysql はすでにinstallされています。

 

Gemfile の修正

まず Gemfile の sqlitemysql に修正。

# gem 'sqlite3'
gem 'mysql2'

ターミナルから bundle install で完了!

mysql のセットアップ

'config/database.yml' を以下に修正。

default: &default
  adapter: mysql2
  encoding: utf8
    pool: 5
  username: root
  password:
  socket: /tmp/mysql.sock
  
  development:
    << default
    database: blog_development
    
  test:
    << default
    database: blog_test

  production:
    << default
    database: blog_production

ユーザーの設定

root ユーザーって何となく抵抗があったので、別途ユーザーを作成した。

ターミナルから'mysql -uroot'でmysqlに入ってユーザーを作成。

 

1行目がユーザー作成コマンド。最初の'develop'がユーザー名で、次の'develop'がパスワードの設定。

2行目、3行目がそのユーザーが作ったデータベースにアクセスできるようにするコマンド。

mysql> create user 'develop'@'localhost' identified by 'develop';
mysql> GRANT ALL PRIVILEGES ON blog_development.* TO develop@localhost IDENTIFIED BY 'develop' WITH GRANT OPTION;
mysql> GRANT ALL PRIVILEGES ON blog_test.* TO develop@localhost IDENTIFIED BY 'develop' WITH GRANT OPTION;

 で、'config/database.yml'のdefault部分を以下に書き換えてすべて完了!

default: &default
  adapter: mysql2
  encoding: utf8
  pool: 5
  username: develop
  password: develop
  host: localhost
  socket: /tmp/mysql.sock

思ったより簡単に設定できた!
後は本番で使うときにどうなるかだな...

「Webサイトにおけるデザインとは何か」について今現在の自分の考えをまとめてみる(15.12.25)

僕はデザイナーではないので偉そうなことは言えませんが、僕の思うwebサイトのデザインというものに対する考えをまとめておこうと思う。

あとあと振り返りするときに今の考えを忘れないために!

15/12/25 現在における考えなので、今後いろんな方の意見をもらって変わっていく可能性もあります。

1ページでのデザインについて

サイトにおけるユーザーの行動を単純化すると以下のようになる。

 【表示される → 見る → 行動する】

画面に表示されて、それを目で認識して、自分の望むアクションを起こす。

うん、シンプルでこれがしっくり来る。

ここでのデザインの話は、「見る」部分に焦点をあてる。
行動もデザイン的な部分があると思うけど、その行動に誘導するデザインってのが今気になっているところ。なので、この記事は「見る」部分の話をする。

デザインって「そのページにどんな情報があるか、何ができるか」ということを見てすぐに分かるようにすることだと思っている。

複数ページでのデザインについて

さっきのユーザー行動をつなげるといい。

 【表示される → 見る → 行動する】⇒【表示される → 見る → 行動する】
 ⇒ 【表示される → 見る → 行動する】⇒ ...

表示されたものを見て、アクションを起こす。んで、次のページに移って...の繰り返し。

これもシンプルでしっくり来る。

複数ページで考えるときに変わってくるのは「⇒」の部分にユーザーの意図というか期待するものが入ってくるってこと。

前ページでリンクをクリックした時、その遷移先に期待するものがあると思ってアクションを起こす。で、画面が表示されて見る。

※ 遷移先ではユーザーの期待するものが表示されるものとします。そこがズレるとサイト全体の設計の話になるので。

ここでのデザインの役割は、その期待するものを分かりやすく表示することと、次のアクションに誘導するもの(見てすぐに分かるようするもの)だと思う。

例えば、「スケジュール」ってメニューがあったら、その遷移先の表示はスケジュールにすべきだし、スケジュールってことがわかりやすいカレンダーとかを表示すべき。

んで、そこに付属する機能があった場合、メインとなるスケジュールを見て、分かりやすい位置にアイコンなりなんなりで次のアクションを起こせるようにするのがデザインの役割だと思う。予定を追加するとかね。

ユーザーの期待を阻害せず、デザインで行動を促す

ここからが本題。

付属する機能について、例えば予定追加機能があったらアイコンでクリックすると表示するのと、最初からカレンダーの右下に表示される場合があると思う。

最初から表示される場合、カレンダーに重なって表示されてカレンダーは下に隠れとるイメージ。

この場合だと、僕の考えるイメージは圧倒的に前者、アイコンでクリックすると表示されるパターン。

理由は、ユーザーは【スケジュール】をクリックしてページに来てるので、スケジュール(カレンダー)を見に来てるから。

優先すべきはユーザーが期待している情報の表示。デザインの役割って、【予定追加機能もありますよ!ここ押したら使えますよ!】って行動できるようにすることであって、ユーザーが期待している情報を阻害するようなものではないと思うわけです。

もちろん小さく表示するとかってのも一つの手だと思ってます。

デザインって情報の優先順位付けなのかもしれない

機能を追加していく過程で1ページにいろんな情報が増えていくと思うんですが、それを全部表示すればゴチャッとする。

たくさんの情報をコントロールしてユーザーが期待する情報を分かりやすく表示する。
それ以外のものは、行動できるように誘導するデザインにする。

ページ内において、メインコンテンツとサブコンテンツを切り分けて表示する。

つまり、情報に優先順位を付けて表示するものを決め、次にユーザーが期待するであろう行動を誘導するようなものがデザインなのではないか?と思ったんです。

 

何か、書きながら自分の考えも少し整理されてきた気もする。

この辺り、デザイナーさんに意見もらいたいな。
気軽に相談できるデザイナーの友達欲しい!

 

以上、現状のデザインに関する自分のまとめでした!!