Cloud9上でYeomanを使ってAngularJS+Typescriptの環境を作る

はじめに

Cloud9をご存知でしょうか。最近静かで環境も整っている作業場所としてまんが喫茶（快活クラブさんがまじすげー）を利用しています。RailsやったりPlayやったりしたい時にサーバ上でVIMでゴリゴリやってましたが、まーミスが多い（笑）。そこでどこでも共通で使えちゃうしIDEの恩恵を享受できちゃうしの神サービスCloud9を利用しています。
今回はCloud9上でサクサクっとWebクライアントでも作ろうかと環境を整えてみたので共有します。以下を利用していますが実はそんなに使ったことありません。なのでそれぞれ勉強した内容も別途まとめていこうと思います。

• AngularJS：有名なJavascriptのMVCフレームワークさん
• Typescript：静的型付けって素敵言語さん
• Yeoman：Yo/Grunt/Bowerを組み合わせてサクッとテンプレート作ってくれるツールさん

さて

環境準備

node.js/npmのインストール

Cloud9の場合はblankプロジェクトでもnode.js/npmはインストールされています。
その他の環境を利用する場合は自前でインストールしておく必要があります。

Yeomanのインストールとジェネレータのインストール

Yeomanとテスト実行用のKarmaとAngularJSのジェネレータをインストールします。

npm install -g grunt-cli bower yo generator-karma generator-angular

※もしからしたgenerator-angularはgithubからインストールしたほうがよいかも（https://github.com/yeoman/generator-angular.git）

Ruby/compassのインストール

Sassを利用するため実行環境のCompassとその元となるRubyをインストールします。
Cloud9の場合はRubyはすでに入っているため以下のコマンドでCompassをインストールします。

gem install compass

プロジェクトの作成

yoコマンドの実行

「yo angular [appname]」コマンドで新しいプロジェクトを作成します。
Typescriptを利用することより「--typescript」オプションを利用します。
※ここではアプリケーション名を「webtemp」としています。適宜変更してください。

yo angular webtemp --typescript

Gruntの実行

サーバの起動準備（Cloud9のみ）

Gruntで「grunt serve」を実行するとWebサーバが立ち上がりアクセス可能になりますがCloud9上ではこのままではアクセスすることができません。そのため以下のようにGruntfile.jsを書き換えます。

    connect: {
      options: {
        port: 9000,
        // Change this to '0.0.0.0' to access the server from outside.
        hostname: 'localhost',
        livereload: 35729
      },

上記を以下に書き換える

    connect: {
      options: {
        port: 8080,
        // Change this to '0.0.0.0' to access the server from outside.
        hostname: '0.0.0.0',
        livereload: 35729
      },

サーバの起動

以下のコマンドでサーバを起動します。

grunt serve

Cloud9の右上にある「Share」ボタンをクリックし「Application」のリンクを開くとアクセスすることができるようになります。

終わりに

今回はそれほど躓くこともなく進めることができました。だいたい最初にやるときにはバージョンが古すぎる情報を参照しちゃってたりでうまくいかないことが多いのですが。

Rails4のルール 関連付け編

関連付けの実現

関連付けは非常に便利である一方、使い方を間違えるとパフォーマンスを大きく落とします。だからそんなに好きじゃなかったです。でも便利な部分もいっぱいあります。バランスを見て今後困らないようにという視点で選択していくことが大事だと思っています。Railsを利用するシーンとしてとにかく早くものを作り、一旦リリースしたい！というのが強ければガンガンに利用してサッと創りあげたいところです。あまりプロダクトが太りすぎないうちに次のステップとしてアプリケーションの特性に応じた対策を行いましょう。もちろんRailsそのものを捨てるのも選択肢ですね。
ちょっと脱線しましたが、、とにかくルールを知っておくことは大事です。サッと調べたい時にご利用ください。

関連付けの種類

種類	多重度	関係先の指定	説明	model	migration
belongs_to	1対1	単数形	外部キーを持っている側のテーブルに対するモデルに指定する。従属している状態であり相手方で何かしらのアクションがあった場合に影響を受ける（こともできる）	belongs_to customer	t.belongs_to :customer
has_one	1対1	単数形	1対1関連の時に外部キーを持っていない側で利用する。	has_one attribute	t.belongs_to :customer
has_many	1対多	複数形	0個以上のインスタンスを保持する側で利用する。反対側にはbelongs_toを利用。	has_many orders	t.belongs_to :customer
has_many :through	多対多	複数形	結合モデルを介して多対多関連を表現するために利用する。例えばプロジェクトが並行して進んでおり担当者が入り乱れている場合などを表現します。	projectから見た場合は has_many asigns has_many members through: :asigns memberから見た場合は has_many asigns has_many projects through: asigns	asignsで t.belongs_to :memnbers t.belongs_to :projects
has_one :through	1対1	単数形	結合モデルを介して1対1関連を方言するために利用します。	has_one :結合モデルの先のモデル through: 結合モデル	t.belongs_to 結合モデル
has_and_belongs_to_many	多対多	複数形	結合モデルを介さずに多対多関連を表現するために利用する。実際には中間テーブルが必要だが実装上必要無い場合に採用する	has_and_belongs_to_many :結合先モデル	t.belongs_to :結合モデル

ポリモーフィック関連付け

1つのモデルが複数のモデルと関連している場合に1つの関連付けだけで表現することができる。例えばcommentモデルはtaskとscheduleの両方に関連している場合は以下のようになる。

class Comment < ActiveRecord::Base
  belongs_to :commentable, polymorphic: true
end
 
class Task < ActiveRecord::Base
  has_many :comments, as: :commentable
end
 
class Schedule < ActiveRecord::Base
  has_many :comments, as: :commentable
end

Migration上では以下のように記載することで実現できる。

class CreateComments < ActiveRecord::Migration
  def change
    create_table :comments do |t|
      t.string  :title
      t.references :commentable, polymorphic: true
      t.timestamps
    end
  end
end

自己結合

自分自身への結合を表現することも可能です。ここはRailsガイドからそのままの例ですが、上司と部下の関係なら以下のようになります。

class Employee < ActiveRecord::Base
  has_many :subordinates, class_name: "Employee",
                          foreign_key: "manager_id"
 
  belongs_to :manager, class_name: "Employee"
end

マイグレーション上は以下のとおり。簡単ですね～

class CreateEmployees < ActiveRecord::Migration
  def change
    create_table :employees do |t|
      t.references :manager
      t.timestamps
    end
  end
end

参考

その他の細かいところはRailsガイドでご確認を！

railsguides.jp

validates_timelinessを使う

validates_timelinessとは

日付、時間などのValidationを支援してくれます。便利です。 自分が使っているのは以下です。

インストール

Gemfileに設定を入れて「bundle install」を実行。

gem 'jc-validates_timeliness', '3.1.1'

以下のコマンドでインストールします。

rails generate validates_timeliness:install

以下2つのファイルが出来上がります。 * config/initializers/validates_timeliness.rb * config/locales/validates_timeliness.en.yml

これだけ。日本語化したいときは「validates_timeliness.ja.yml」を作ってください。

使い方

詳しくはここみる。 github.com

自分が現在使っているのは「validates_datetime」のみですが前後関係のチェックもできるみたいなので使うときに追記します。

railsって便利なんですね。でも始めて使うときは時間かかるかなぁ。
いろいろ作っているうちにどんどんスピード上がりそうなので楽しみです！

minitestレポータの導入

minitestレポータでできること

テスト結果が成功したら「GREEN」、失敗したら「RED」でわかりやすく表示してくれるだけです。
分かりやすいのとりあえず入れておくことをおすすめします。

導入方法

まずはGemfileに追記します。既に:testグループがあれば追加で。

group :test do
  gem 'minitest-reporters', '1.1.8'
end

次にtest/test_helper.rbに設定を追加します。

ENV['RAILS_ENV'] ||= 'test'
require File.expand_path('../../config/environment', __FILE__)
require 'rails/test_help'

# minitest_reportersを利用することを宣言
require "minitest/reporters"
Minitest::Reporters.use!

class ActiveSupport::TestCase
  # Setup all fixtures in test/fixtures/*.yml for all tests in alphabetical order.
  fixtures :all

  # Add more helper methods to be used by all tests here...
end

これだけでOK。成功した時は下のように表示されるようになります。

Ruby on Rails 4 アプリケーションプログラミング

今さらながらBootstrapを学んで見る① はじめの一歩

はじめに

ちょこちょこ覗く程度にしか開発技術に触れなくなってから早数年。マネジメント職としてお客様や仲間のために力を使うのが仕事であり、それに飽き飽きしている自分がいます。請負開発は喜んでもらえるととてもうれしいけど、結局自分のものではないし、そろそろ自分がやりたいことのために全力を尽くしたいと思い始めています。なんか作ってみるかと思ったところ、やっぱりレスポンシブデザインだよね！となるとBootstrapだよね！の流れで今ここ。

ゴール設定

今回いろいろやってみるにあたって一旦のゴールを決めておこうかと思う。やりきる意味でも目標あった方が張り合いあるので。そこでECサイトのUXを意識してモックアップしてみようかと思います。AmazonさんやZOZOTOWNさんなどよくお世話になります。使いやすさを最大限に高めようとするとどうなるかやってみようかなと思っています。

はじめの一歩

インストール

今回は自分でダウンロードしてきて使うことにしました。実際には構成管理ツールを利用してインストールするほうがみんなで開発するときとかには絶対向いてます。

Bower

bower install bootstrap#v4.0.0-alpha.2

npm

npm install bootstrap@4.0.0-alpha.2

便利な時代になったものです。自分が現役の頃はJava使いだったのでMavenが主流でした。というか他無かった気がする。いまはJavaならGradleでしょうかねぇ。

最小限のテンプレート

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>■ここにタイトル入れてね</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    ■ここに本文いれてね
    <script src="js/jquery-2.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>

バージョン情報とかは書き換えてくださいね。metaタグもSEO意識したやつとか必要に応じて足さなきゃダメですね。今後はこの最小限のテンプレートにいろいろ足しつつ少しずつ形を作ってみたいと思います。

書籍も出てはいるんですね。基本を捉えるには読んでみたほうがよいかもですね。 他にも何冊か見かけましたがどれが良いかは不明です笑

UIまで手の回らないプログラマのためのBootstrap 3実用ガイド

図解 脳に悪い7つの習慣

図解 脳に悪い7つの習慣

「好きこそものの上手なれ！」という言葉がありますが、まさにソレですね。

ものすごく楽しく読ませて頂きました。

脳に悪い習慣というのは本能で備わっているものであり、放っておくと自然とやってしまう。だけど悪い習慣を意識していることで変えることができます。それには何よりも興味を持つことが重要だと感じました。

それぞれの習慣について図で表現されているので頭に残りやすいです。

脳は自分を守ろうとしたり、一貫性を求めたりしてしまう。それは本能であり誰でもそうなってしまうけど、悪い習慣を取り除き、脳に良いとされることを意識するだけで変わるんだ！だからやってみよー。と思うことができました。

まずはいろんなモノやコトをいらがらずに興味を持ってみようと思います。そして「嫌だ」とか「疲れた」とかは考えたり口に出さないように気を付けてみます（これが一番むずかしいかも…）

その他にもこれはやってみよう！これはやめよう！と思ったことがたくさんありました。ページ数も多くないのでサクサク読めるので一度読んでみてはいかがでしょうか。

頭がいい人はなぜ、方眼ノートを使うのか?

頭がいい人はなぜ、方眼ノートを使うのか?

ざっくり言えば「いかに効率よくノートをまとめるか。そのためにはフレームにはめるのが良い。」を解説してある本だった。内容としては効率的だしすぐ実践してみたくなったので、A4の方眼ノートと持ち運び用にモレスキンを買ってみた 笑

一番のポイントは「事実→解釈→行動」を意識してまとめること。勉強用・仕事用・プレゼン用で分けて記載されているがポイントはぶれていない。

五月雨でノウハウ的なところをメモると以下のような感じ。

1. ノートで利用する色は3色以内
2. ノートのサイズはA4
3. ノートを横に使う（人間の目は横に向いている）
4. ノートの上部に見出しを付ける
5. 1ページ1カテゴリで記述する
6. 黒板を移す前に１秒間イメージを焼き付ける

もっと重要なことがいっぱい書いてある。例えば「重要と思える100の事柄からキーとなる1にフォーカスする」は本当に重要だと思う。情報が溢れかえっている中で本当に重要な部分を導き出すにはかなり訓練が必要だと感じた。
あとはコンサルとしての普通の話。事実を元に解釈してアクションにつなげる。自分としては目新しいことはなかったけど再認識するのにすごくよかった。
実践したくなるポイントが多く楽しくサッと読めた。おすすめ！