省エネ

Flutter、vue3修行中。

【Ruby on Rails】Cloud9でMySQLを使っちゃう

毎日更新の目標は早速達成できず。

お酒を飲んで帰るとPC見るのつらいんですよー。

 

さて、Cloud9でRailsテンプレートを作成すると最初はSQLiteを使うようになっていると思いますが、MySQLが使えるようなので、MySQLに変えちゃいます。

 

Gemfileを編集します。

 

 

# Use sqlite3 as the database for Active Record
#gem 'sqlite3'
gem 'mysql2', '~> 0.3.20'

 

最初は赤文字の行が記載されていると思いますので、ここを削除またはコメントアウトして、gem 'mysql2', '~> 0.3.20'を追加します。

※2015/12/6現在最新のgemを入れるとmodelが作成できないようです。。。ご注意です。

 

したらば、コンソールでプロジェクトのルートへ行き、

bundle install

 

と打ってみましょう。

 

bundle install はGemfile内で指定された依存性のインストールをしてくれます。

 

使いたいgemをGemfileに書くといい感じにインストールしてくれるってことですね。

バージョンを指定しなければ最新のが入ります。

 

 

databaseに接続する為には、config/database.ymlを編集する必要があります。

 

development:
    adapter: mysql2
    encoding: utf8
    database: c9
    username: <%=ENV['C9_USER']%>
    host: <%=ENV['IP']%>

 

今回はCloud9が用意してくれているDBを使います。

ローカルで動かしているなら、自分で作ったDB名とユーザー名いれて、hostにはlocalhostって入れれば接続できます。

win7だともしかしたらlocalhostでは繋がらない可能性もありますよね。

その場合は127.0.0.1でいけると思います。

 

 

したらば、とりあえずmysqlを起動しておきましょう。

 

mysql-ctl start

 

 

さて、DBも繋がったことですし、早速modelを作成しましょう。

 

コンソールで

 

rails generate model UserBase

 

を入力します。

 UserBaseは私がこれから使いたいテーブル名ですので、お好きな名前を入れてください。

 

すると、

db/migrate/20151205133900_create_user_bases.rb

app/model/にuser_base.rb

test/models/user_base_test.rb

test/fixtures/user_bases.yml

みたなファイルが追加されます。

 

次に、テーブルのカラムを決めます。

さっき作ったdb/migrate/20151205133900_create_user_bases.rbを編集します。

 

class CreateUserBases < ActiveRecord::Migration
    def change
        create_table :user_bases do |t|

            t.string :name, :null => true
            t.string :name_kana, :null => true
            t.string :mail, :null => true
            t.integer :authority, :null => true
            t.date :last_login, :null => true
            t.timestamps null: false

         end
    end
end

 

こんな感じで書きます。

 

んで、

 

rake db:migrate

 

ってするとテーブルとカラムが作成されます。

 

mysql> show tables from c9;
+-------------------+
| Tables_in_c9 |
+-------------------+
| schema_migrations |
| user_bases |
+-------------------+
2 rows in set (0.00 sec)

 

 

mysql> desc user_bases;
+------------+--------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+------------+--------------+------+-----+---------+----------------+
| id | int(11) | NO | PRI | NULL | auto_increment |
| name | varchar(255) | YES | | NULL | |
| name_kana | varchar(255) | YES | | NULL | |
| mail | varchar(255) | YES | | NULL | |
| authority | int(11) | YES | | NULL | |
| last_login | date | YES | | NULL | |
| created_at | datetime | NO | | NULL | |
| updated_at | datetime | NO | | NULL | |
+------------+--------------+------+-----+---------+----------------+

 

次回は、実際にrailsからDBの書き込みと読み出しをします。

 

【Ruby on Rails】ビギナー向け、共通ヘッダを作る

ところで、そーいえばローカルでrailsのサーバー動かす時って

 

rails s

 

ってやってましたけど、Cloud9だとこれだと動かなくて

 

rails server -p $PORT -b $IP

 

ってしないといけないみたいですね。

 

 

今回は共通のヘッダを作成します。

何かっていうと、たぶんwebページの一番上ってメニューとかが置いてあって全ページ共通のViewにんなってたりしますよね。

 

それを作成します。

 

Cloud9でrailsテンプレートで作成すると最初からapplication.html.erbっていうファイルがあるかと思いますが、そこに全画面で共通して使用するviewを作成します。

 

application.html.erb

 

<!DOCTYPE html>
<html>
<head>
<title>Workspace</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
  <header>
    <hgroup>
      <h>ProjectTaskManage</h>
    </hgroup>
  </header>

  <%= yield %>

</body>
</html>

 

headerタグを追加してみました。

これでどのページで見てもこのheaderはずっと表示されるようになります。

 

 

 

【Ruby on Rails】HelloWorldしてみる

Railsは数年前にお仕事で使っていたのですが、しばらく触ってない&既にあるシステムの改修だった為、なんか色々お作法が分からないので、Cloud9でRails触りながら勉強していこうかなと思ってます。

 

とりあえず、恒例のHelloWorld。

 

まずは、ルートを決めます。

 

config/routes.rbを編集。

私の場合、ルートを以下のようにしました。

 

root :to => 'main#index'

 

 

app/controllerの下にmain_controller.rbを作成。

 

main_controller.rbの中身は今のところほぼ空。

index関数はとりあえず必要だと思う。

 

# -*- encoding: utf-8 -*-
class MainController < ApplicationController
    def index

    end
end

 

app/viewsの下に

main/index.html.erbを作成

 

中身は今のところただのhtml

 

<!DOCTYPE html>
<html>
  <head></head>
    <body>
      <p>Hello World!</p>
    </body>
</html>

 

ここで、Cloud9のワークスペース内の専用ブラウザに最初からルートが開いてると思うのですが、そこを更新!

 

でました!

Hello World!

 

f:id:qkuroneko:20151201070825p:plain

 

 

アドレスバーの横の四角いボタンを押すと、ブラウザでも開くことができます。

 

こちらも、Cloud9で編集するとすぐに反映されますので、便利ですね。

 

 

次回はヘッダーにアクションバーのようなものを追加したいと思います。(目標)

Sassについて勉強してみる

以前入っていた案件で知り合ったデザイナーさんと勉強会をしているのですが、今回はSassを使ってみようって事でSassについて調べました。

 

まずは、環境構築。

とりあえず、Sassを使うにはRubyが必要らしい。

私のPC、macなんでRubyは既に入っているようです。

 

しかーし、どうやらRuby2.0.0 compassが相性が悪いらしい。

 

自分の環境↓

$ruby -v

$ruby 2.0.0p481 (2014-05-08 revision 45883) [universal.x86_64-darwin14]

 

こりゃダメかもしれない。。。

とりあえずRubyのあぷで。

 

しようとしたらしばらくアップデートしていなかったコマンドラインツールのアップデートをしろと怒られたのでそっちからアップデート。

ふぅ、ひどい目にあったぜ。

 

こういうのはこまめに整備しておかないとダメですね。

 

とりあえずRubyのバージョンアップには成功。

こちらの記事を参考にしました。

 

Mac で Ruby のバージョンをアップデート | gworks web site

 

 

Sass+Compassのイスントールはこちらの記事を参考にしました。

 

sass+compassのインストールにMacOS10.9+ruby2.0.0の環境で失敗したら。 - Qiita

 

$ sudo gem install sass --pre
$ sudo gem install compass --pre

 

今度は上手くいきました。

とりあえず、installはできたかな。。。

 

次は実装。

Sassを使いたくなる!便利機能をまとめてみました。 | MONSTER DIVE【モンスターダイブ】

 

のサンプルコードを参考にまずは試し書き。

 

#main {
    width:940px;
    p {
        font-size: 14px;
        .head {
            background-color: #000000;
        }
    }
}

 

こんな風に書いて変換コマンドを打つと、

$sass --style expanded style.scss:style.css

 

いつものCSSファイルを吐いてくれる。

#main {
    width: 940px;
}
#main p {
    font-size: 14px;
}
#main p .head {
    background-color: #000000;
}

 

・別なscssファイルをimporできる!

例えば、

main.scss

style.scss

 

っていう二つのファイルを用意しておく。

実際にコンパイルするのはstyle.scssだけ。

 

style.scssに

@import "main.scss";

 

って書いておくと、両方のファイルに書いたcssを1つのファイルにまとめて吐き出してくれる。

これは結構便利かもしれない。

しかし、最後に;つけないとエラーになるのなんか罠っぽい。

何度もひっかかるんですけど、;っていつもideaが勝手につけてくれるか、もはや最近の言語では;をつけない文化になってきてるのでうっかり忘れる。

 

・コメントの書き方

 

// コメント

って書く、吐き出されたcssファイルにはコメントは記載されない。

scssファイルでのみコメント扱い。

 

/* コメント */

って書くと、吐き出したcssファイルにもコメントが書かれるようになる。

 

実装上コメントしたいときだけとかある気がするので、使い分けられるの便利ですね。

 

・変数が使える!

$DarkPrimaryColor: #C2185B;

$BigTextSize: 24px;

 

って感じでカラーコードや文字のサイズとかを定義して使い回せる。

 

例えば、色だけ、サイズだけを定義したファイルを用意しておく。

color.scss

text_size.scss(ファイル名のつけ方はこれでいいのだろうか??css界のお作法わからんのでこれでいいのかどうか……)

っていうファイルを用意して、メインで使うscssファイルにimportしておけば、整理された感ありますよね。

Androidのリソースファイルっぽい管理ができそうです。

 

外部ファイルに定義したscssの変数を補完してくれるともっと便利なんだけどなぁ。

そんなAtomのpluginありませんかねー?

 

・変数が使える

 

font-size: $NomalTextSize + $SmallTextSize;

とかって、定義している変数同士の四則演算ができるようです。

 

width: 400 + 200px;

とかってできるみたいだけど、サイズ計算面倒だから〜って理由でこれを使い出すと訳分からんことになりそうですね。

あと、美しくない。

 

・継承

 

.unitA {
    margin: 10px;
    padding: 5px;
}

.unitB {
    @extend .unitA;
    color: $PrimaryTextColor;
}

 

この様に、@extendを使うとunitAの記述を継承できます。

 

吐き出されるcss

 

.unitA, .unitB {
    margin: 10px;
    padding: 5px;
}

.unitB {
    color: #212121;
}

 

ってなるんだけど、自分の予想と違う吐かれ方をしたのでちょっと使いにくいかも。

慣れるとこうなるって予想が付くんだろうけどね。

 

・ループ

 

for文、while文、eachが使えるみたいだけど、とりあえずwhileしてみる。

 

$i: 0;
$length: 10;

@while $i <= $length {
    .imagePanel_#{$i} {
        $path: '../images/img' + $i + '.png';
        background: url('#{$path}') no-repeat center center;
    }
    $i: $i + 1;
}

 

ってすると、画像名とクラス名の$iのところ一つづつインクリメントしたcssが書かれます。

 

.imagePanel_0 {
    background: url("../images/img0.png") no-repeat center center;
}

.imagePanel_1 {
    background: url("../images/img1.png") no-repeat center center;
}

 

以下略…

 

これはなかなか便利!

画像の指定とか、同じようなスタイルを複数指定したいときはこれ使うと良さげですね。

せっせとコピペしなくて済みそうです。

 

コンパイル時にうっかり無限ループしちゃったんですが、慌てず騒がずCntl+Cです!

 

・ところで

sass-autocompilっていうAtomプラグインを入れてみたところ、なんだかコンパイルエラーになってしまった。。。

セーブするだけでコンパイルできる優れものだと思ったら……。

コマンドからはちゃんとコンパイルできるので、何か設定とかあるのかな。

面倒なので深追いせずにアンインストールです。 

 

 

なんか、便利そうなのでさっそく趣味サイトで使ってみようかと思いました。

webのお仕事来たら使おう〜って提案したい。 

 

 

Cloud9に登録してみた話

c9.io

 

こちらのCloud9というサービスを使うとRilasの環境が作れるというのでさっそく使ってみました。

 

無料枠ならすぐに登録できます。

私はGithub連携でアカウント登録しました。

 

Github、Bitbucketでのログインができるようです。

どちらかのアカウントをお持ちであればすぐに登録完了できます。

 

ブラウザはChromeが推奨されていますが、基本的になんでも大丈夫らしいです。

 

 

Create a new workspaceっていうでっかい四角いボタンをぽちー。

 

リポジトリ名とテンプレートを選択して、Createボタンをぽちっとします。

PrivateとPublicが選択できるので、他人に見せたくないときはPrivateを選択しておくのがいいかと思います。

 

私はとりあえずPrivateを選択しました。

f:id:qkuroneko:20151129110823p:plain

 

じゃん。

ここまで完了するとこんな画面に移動します。

 

あとはもうガリガリ開発するだけですね。

簡単でしたね。

 

では、これからさっそく実装をしていきたいと思います。

また、忘れなければ使ってみた感想とか書きたいと思います。

 

 

 

OSSライブラリ研究会に参加してきました

connpass.com

 

11月27(金)は、ビズリーチさんで開催されたiOSAndroidRailsオープンソースライブラリの勉強会へ行ってきました。

 

皆さん、iOSお好きなんですね。

本当はiOS枠がよかったけどすぐ埋まっちゃったからって言ってた発表者さんがちらほらいたような(笑)

 

以下、ざっくり概要。

 

iOS

・SnapKitの話

 autoLayoutが簡単に書けるライブラリ。

 IBと併用で使うとコンフリクトしてエラーになるので注意!

 

・Seiftライブラリの作り方

 ライブラリ名はちゃんと考える

 swiftyとかつけると★を貰いやすくなる

 カルタゴの紹介

 

・SourceKitten

 憎きSourceKitをラップして作られたコマンドラインツール

 これを利用しらライブラリ

 ・SwitfLink

 ・jazzy

 

○SwiftLint仕事で複数人で開発するには使うの良さげですね。

 

・RxSwift+RxCocoaのお話

 見通しのよいコードが書ける

 リアルタイムで値を取得できる

 例外を用いないエラー処理が書ける

 

Android

 

githubで★をもらうこつなお話

 人気カテゴリの選定(Materialとか名前付けると★が付きやすい)

 丁寧なReadMeや導入方法、ライセンスをしっかり書く

 サンプルアプリとか作ると尚良し

 公開後の告知も大事(ブログ、紹介サイトへの申請)

 

・ライブラリ名はキラキラネームが最高なお話

 Garum、Meteoritっていうライブラリを作成したお話

 

・RxJava+Retorofit

 RxJavaとRetorofitの組み合わせがよさげ 

 

オープンソースライブラリの作りかた

 jCenterで公開する(簡単)

 MevanCentralで公開する(大変)

 Githubで公開する

 

Rails

 

・ Rails Electoronでアプリケーションを作る

 githubが開発したhtml css javascriptでデスクトップアプリが作れるフレームワーク

 Nodeの資産が豊富

 Titaniumに比べると簡単

 しかし、公開が大変だった。

 

・Module Concermのコードリーディング

 コードの説明を詳しくしてくださいました。

 

・daily-slack-reportの話

 slackにつぶやいた文書をnoteに投稿できるライブラリ

 

・OmniAuthの話

 他サービスをOauthで連携する

 

 

ぐー。

後半、だれて適当になっちゃいました。

すいません。

 

そんなこんなで面白かったです。

Rx系のライブラリ使ってみたいんですが、

ちょこっといじって断念してしまいました。

使いこなせない。

なんかアプリ作りつつもう一度トライしてみますかね。