2015-10-07

RailsGuildeをなぞってみた

本記事の目的

勉強の記録。
もし、検索してたどり着いた方がいらっしゃったら、本家を見た方が良いです。
RailsGuide

1. railsアプリケーションの作成

rails new blog

2. コントローラの作成

welcomeという名前のコントローラの中にindexというアクションを作成する。

controller:welcome
action:index

rails generate controller welcome index

createされるファイル

app/views/welcome
app/views/welcome/index.html.erb
test/controllers/welcome_controller_test.rb
app/helpers/welcome_hellper.rb
test/helpers/welcome_helper_test.rb
app/assets/javascripts/welcome.js.coffee
app/assets/stylesheets/welcome.css.scss

3. ルートの設定

アプリケーションのルートURLへのアクセスを welcomeコントローラのindexアクションに割り当てるようRailsに指示が伝わる。

controller:welcome
action:index

config/routes.rbに記入

root 'welcome#index'

Prefix コントール名#アクション名

フォーム

1. ルートの設定

config/routes.rbに記入

resources :articles

2. コントローラの作成

rails generate controller articles

createされるファイル

app/controllers/articles_controller.rb
app/views/articles
test/controllers/articles_controller_test.rb
app/helpers/articles_helper.rb
test/helpers/articles_helper_test.rb
app/assets/javascripts/articles.js.coffee
app/assets/stylesheets/articles.css.scss

app/controllers/articles_controller.rb

class ArticlesController < ApplicationController
end

3. コントローラの編集

newアクションの追加

def new
end

4. Viewの追加

app/views/articles/new.html.erb

<h1>New Article</h1>

5. フォーム

app/views/articles/new.html.erb

<%= form_for :article, url: articles_path do |f| %>
  <p>
    <%= f.label :title %><br>
    <%= f.text_field :title %>
  </p>

  <p>
    <%= f.label :text %><br>
    <%= f.text_area :text %>
  </p>

  <p>
    <%= f.submit %>
  </p>
<% end %>

formの構文

form_for [シンボル名], [アクション名(prefix)] do |変数名|

6. 記事を作成する

app/controllers/articles_controller.rb

class ArticlesController < ApplicationController
  def new
  end

  def create
    render plain: params[:article].inspect
  end
end

renderメソッド

ハッシュのキー：plain ハッシュの値：params[:article].inspect

7. Articleモデルを作成する

rails generate model Article title:string text:text

Railsのモデル：単数形の名前データベーステーブル名：複数形の名前

createされるファイル

db/migrate/[ts]_create_articles.rb
app/model/article.rb
test/models/article_test.rb
test/fixtures/articles.yml

8.マイグレーションを実行する

作成されたデータマイグレーションファイルを実行する。

rake db:migrate

デフォルトでは、development環境で実行される。 development以外の環境に対しては、

rake db:migrate RAILS_ENV=production

と明示的に指定する必要がある。

9. コントローラでデータを保存する

app/controllers/articles_controller.rb

def create
  @article = Article.new(article_params)

  @article.save
  redirect_to @article
end

private
  def article_params
    params.require(:article).permit(:title, :text)
  end

10. 記事を表示する。

app/controllers/articles_controller.rb

def show
  @article = Article.find(params[:id])
end

app/views/articles/show.html.erb

<p>
  <strong>Title:</strong>
  <%= @article.title %>
</p>

<p>
  <strong>Text:</strong>
  <%= @article.text %>
</p>

記事の一覧表示

Controllerの編集

articles GET    /articles(.:format)          articles#index

が既にあるので、

app/controllers/articles_controller.rb

def index
  @articles = Article.all
end

ビューの追加

app/views/articles/index.html.erb

<h1>Listing articles</h1>

<table>
  <tr>
    <th>Title</th>
    <th>Text</th>
  </tr>

  <% @articles.each do |article| %>
    <tr>
      <td><%= article.title %></td>
      <td><%= article.text %></td>
    </tr>
  <% end %>
</table>

リンクの追加

link_toメソッド

link_to [リンク先], [コントローラ]
link_to [リンク先], prefix

トップページにリンクを追加

app/views/welcome/index.html.erb

<%= link_to 'My Blog', controller: 'articles' %>

link_toメソッドは、指定されたテキストに基づいたリンクを作成し、ジャンプ先を表示する。

記事一覧からの記事新規作成リンク先

app/views/articles/index.html.erb

<%= link_to 'New article', new_article_path %>

記事作成からの戻るリンク先

app/views/articles/new.html.erb

<%= link_to 'Back', articles_path %>

検証（バリデーション）の追加

modelの更新

タイトルに対して、

すべての記事に存在
長さが5文字以上

以上の検証を追加。

app/models/article.rb

class Article < ActiveRecord::Base
  validates :title, presence: true,
                    length: { minimum: 5 }
end

controllerの更新

modelだけの更新だと、検証の結果、保存に失敗しても、ユーザにはわからない。失敗したことをユーザに伝えるためにcontrollerとviewを変更する。

app/controllers/articles_controller.rb

def new
  @article = Article.new
end

def create
  @article = Article.new(article_params)

  if @article.save
    redirect_to @article
  else
    render 'new'
  end
end

private
  def article_params
    params.require(:article).permit(:title, :text)
  end

renderとredirect_to

render：フォームの送信時と同じリクエスト内で行われる
redirect_to:サーバに別途リクエストを発行するようにブラウザに指示する。

viewの更新

app/views/articles/new.html.erb

<%= form_for :article, url: articles_path do |f| %>
  <% if @article.errors.any? %>
  <div id="error_explanation">
    <h2><%= pluralize(@article.errors.count, "error") %> prohibited
      this article from being saved:</h2>
    <ul>
    <% @article.errors.full_messages.each do |msg| %>
      <li><%= msg %></li>
    <% end %>
    </ul>
  </div>
  <% end %>
  <p>
    <%= f.label :title %><br>
    <%= f.text_field :title %>
  </p>

  <p>
    <%= f.label :text %><br>
    <%= f.text_area :text %>
  </p>

  <p>
    <%= f.submit %>
  </p>
<% end %>

<%= link_to 'Back', articles_path %>

解説

@article.error.any?：エラーがある場合、true
@article.error.count：エラーの数
@article.error.full_message：エラーメッセージの配列

記事の更新

controllerの編集

app/controller/articles_controller.rb

def edit
  @article = Article.find(params[:id])
end

viewの追加

<h1>Editing article</h1>

<%= form_for :article, url: article_path(@article), method: :patch do |f| %>
  <% if @article.errors.any? %>
  <div id="error_explanation">
    <h2><%= pluralize(@article.errors.count, "error") %> prohibited
      this article from being saved:</h2>
    <ul>
    <% @article.errors.full_messages.each do |msg| %>
      <li><%= msg %></li>
    <% end %>
    </ul>
  </div>
  <% end %>
  <p>
    <%= f.label :title %><br>
    <%= f.text_field :title %>
  </p>

  <p>
    <%= f.label :text %><br>
    <%= f.text_area :text %>
  </p>

  <p>
    <%= f.submit %>
  </p>
<% end %>

<%= link_to 'Back', articles_path %>

formの method: :patch でpatchであることがrailsに伝わる。

controllerの追加

def update
  @article = Article.find(params[:id])

  if @article.update(article_params)
    redirect_to @article
  else
    render 'edit'
  end
end

private
  def article_params
    params.require(:article).permit(:title, :text)
  end

@article.update(article_params) とupdateメソッドを使う。

editアクションへの前記事のリンク

<table>
  <tr>
    <th>Title</th>
    <th>Text</th>
    <th colspan="2"></th>
  </tr>

<% @articles.each do |article| %>
  <tr>
    <td><%= article.title %></td>
    <td><%= article.text %></td>
    <td><%= link_to 'Show', article_path(article) %></td>
    <td><%= link_to 'Edit', edit_article_path(article) %></td>
  </tr>
<% end %>
</table>

個別記事からの編集リンク

<%= link_to 'Edit', edit_article_path(@article) %>

パーシャルの利用

パーシャルとは？

テンプレート。重複を取り除くために使用する。慣例として、パーシャルのファイル名の先頭には、 アンダースコア が使われる。

パーシャルファイルの追加

app/views/articles/_form.html.erb

<%= form_for @article do |f| %>
  <% if @article.errors.any? %>
  <div id="error_explanation">
    <h2><%= pluralize(@article.errors.count, "error") %> prohibited
      this article from being saved:</h2>
    <ul>
    <% @article.errors.full_messages.each do |msg| %>
      <li><%= msg %></li>
    <% end %>
    </ul>
  </div>
  <% end %>
  <p>
    <%= f.label :title %><br>
    <%= f.text_field :title %>
  </p>

  <p>
    <%= f.label :text %><br>
    <%= f.text_area :text %>
  </p>

  <p>
    <%= f.submit %>
  </p>
<% end %>

既存のviewファイルにパーシャルファイルを適用

app/views/articles/new.html.erb

<h1>New article</h1>

<%= render 'form' %>

<%= link_to 'Back', articles_path %>

app/views/articles/edit.html.erb

<h1>Edit article</h1>

<%= render 'form' %>

<%= link_to 'Back', articles_path %>

記事を削除する

controllerの編集

app/controllers/articles_controller.rb

def destroy
  @article = Article.find(params[:id])
  @article.destroy

  redirect_to articles_path
end

記事一覧ページに削除リンクを追加。

app/views/articles/index.html.erb

<td><%= link_to 'Destroy', article_path(article),
  method: :delete, data: { confirm: 'Are you sure?' }

オプション

:method：html5の機能。data-method="delete"
data-confirm：html5の機能。 data-confirm

2015-10-06

vagrant上でrails 4.2.4プロジェクトを作成する

1つぐらいフレームワークを覚えなければ生き残れない……。

追記：
Tips系は、Qiitaに切り替えてく。
本記事は試験的にQiitaとはてなブログにマルチポスト。
偉い人に怒られそうだが、今回は許してほしいです。

追記２：
Qiita上で編集リクエストを頂いて、大幅加筆致しました。
是非とも下記のQiitaもご覧ください。
vagrant上でrails 4.2.4プロジェクトを作成する｜Qiita @sonoshou

新規railsプロジェクト

1. `rails new` コマンドで新しいプロジェクトを作成。

rails new project_name --skip-bundle

2. Gemfileの編集

therubyracerの行をコメントインする。
JavaScript のエンジンv8を Ruby から使えるようにする。

vim Gemfile

3. gemのインストール

このとき、環境に依存しないように、pathを指定する。

bundle install --path=vendor/bundle

4. WEBrick起動

WEBrick起動後、 http://localhost(or IP):3000 にアクセス。

bundle exec rails s

Vagrantを使用している場合は、ポート番号とIPアドレスを指定する必要がある。
IPアドレスがわからない場合は、 ifconfig で調べる。

bundle exec rails s -p 3000 -b 192.168.33.10

オプション

不要なログを削除する

本節は、下記のブログを大いに参考にしました。
Railsメモ(21) : quiet_assetsでアセットパイプラインのログを出力しないようにする｜もた日記

WEBrick起動中、IPアドレスやアセットパイプラインのログが出る場合がある。
これらが不要の場合は、以下を行う。

IPアドレスのログの非表示

config/environments/development.rbに以下を追加する。

Rails.application.configure do
  …
  config.web_console.whitelisted_ips = '192.168.33.1'
end

アセットパイプラインのログの非表示

Gemfileに以下を追加して、 bundle install を実行する。

group :development do
  gem 'quiet_assets'
end

一時的にログを出力したい場合は、 config/application.rb に下記行を追加。

config.quiet_assets = false

Hamlを利用する

本節は、下記のブログを大いに参考にしました。
Rails 4 で Haml を利用する手順｜Qiita @ hkusu

1. Gemfileに追加

gem 'haml-rails'
gem 'erb2haml'

2. `bundle install` を実行

ちなみに、 .bundle/config に vendor/bundle の場所を保存してあるので、
2回目以降は、 path を指定する必要はない。

bundle install

3. `rake haml` の実行

./bin/rake haml:replace_erbs

以上で、元からある.erbファイルが.hamlファイルに変換され、
hamlが使用されることがrailsに伝わる。

2014-11-25

ウェアラブル端末用Android watchアプリ　～実機起動でハマったところ～

android wear

実機で起動

Android Wear アプリを実機で起動してみましょう！

私が改めてまとめるよりも他サイトの方が詳しいでしょう♪
というのも、壁にぶち当たりながら、理解もせず解決してきたので、
あまり偉そうなことは言えないのです……。

ここが詳しかったので参考までに共有いたします。
15分ではじめるAndroid Wear開発 - 実機を使った開発環境の作り方

というわけで、ここでは実機で起動するときに
ハマった点をいくつかご紹介します。

どなたかの助けになれば……。

開発者用のメニューが出てこない！

PCとAndroid WearやAndroid端末をつなげるためには、
USBデバッグを有効にする必要があります。

私は、USBデバッグがどこにあるかで迷ってしまいました。

USBデバッグなど開発者オプションは、
設定 -> 端末情報 -> ビルド番号
の項目を7回連打することで出てきます。

adb devicesで端末が出てこない！

ドライバのインストールがうまくできていないようでした。
Android端末のメーカーからドライバーをインストールすることで解決しました。

この問題は複数の原因があるらしいので、
解決策の一つとして考えてください。

Failure [INSTALL_FAILED_OLDER_SDK]

ビルドしたバージョンよりも実機のバージョンが低い場合に起こるエラーです。

AndroidManifest.xml内の

<uses-sdk android:minSdkVersion="number" />

を変更しましょう。

また、ウェアラブル用に作られたアプリ（API20）を
間違えてAndroid端末（API19）にインストールしようとしたときにも
同様のエラーが出るので要注意です。

2014-11-10

ウェアラブル端末用Android watchアプリ　～環境構築からHello World!!まで～

wear android

ウェアラブル端末用Android watchアプリウェアラブル端末用Androidのwatchアプリを作るぞー！
環境構築から行っていきます。
公式サイト見た方が詳しいです。
https://developer.android.com/sdk/installing/studio.html#download

参考にしたサイト

参考にしたサイトを見た方が詳しいです。

つまり、以下は余白です。

開発環境

2つの選択肢があります。

Eclipse ADT
Android Studio

ただ、ウェアラブル端末開発に関していえば、
Android Studioが主流のようです。

理由としては、Android Studioはライブラリの依存関係を自動的に解決してくれるとのこと。
また、グーグルとしては、ウェアラブル端末用のAndroidアプリ開発をきっかけに、
Android Studioを使ってもらいという意図があるようです。

Android Studioのダウンロードとインストール

筆者の環境

Windows 8.1 + 64bit 版です。

ダウンロード

下記URLからダウンロード
https://developer.android.com/sdk/installing/studio.html#download

インストール

android-studio-ide--windows.zipを解凍
studio64.exeを起動。（32bit版の場合、studio.exe）
英語の指示に従って、お好みでOK！

エラーが起きた

No JVM installation found. （JVMが見つからなかったー）というエラーが出た。

JDKインストールして、環境変数を通してね

Android SDK ツール

Android SDKはAndroid studioには含まれていないよ。
まだインストールしてない人は、インストールしてね。
http://developer.android.com/sdk/index.html
と書かれているので、インストールしましょう。

Android SDKのインストール

Download Eclipse ADTを押す。
ダウンロード。
SDK Maneger.exeを起動。
Android 4.4Wにチェックを入れる。
インストール。

4.でチェックをいれるとき、

Android Support Repository
Android Support Library
Google Repository
Google Play services

をインストールしておくと、後々困らないかもしれません。

などを開発、または使う際に必要のようです。

ここはお好みで。

https://developer.android.com/sdk/installing/adding-packages.html

Android studio にAndroid SDKの場所を登録

この工程は、環境によっては飛ばせるのかもしれません。
既に、連携が終わっている方は飛ばしてください。

連携が終わっていない場合は、
Android Studio を起動し、 New Project を選択すると、
Your Android SDK is missing, out of date, or is missing templates.
と表示されるはずです。

やり方

Android Studioを起動
Configure
Project Defaults
Project Structure
Android SDK location にSDKのパスを指定

私の場合のSDKのパスは、
D:\Users\[your name]\tools\adt-bundle-windows\sdk
でした。

Hello World!!

ウォッチ型の空のアプリケーションを起動してみましょう。

プロジェクトの作成

Android Studioを起動
新規プロジェクトの設定（なんでもよい）
Application : WearSample
Company Domain : com.sample
Project location : 初期設定
Wearを選択
Blank Activityを選択
オプションを選択（なんでもよい）
Activity Name : MainActivity
Layout Name : activity_main
Title : MainActivity
Menu Resource Name : menu_main
Blank Wear Activityを選択。
オプションを選択（なんでもよい）
Activity Name : MainActivity
Layout Name : activity_main
Round Layout Name : round_activity_main
Rectangular Layout Name : rect_activity_main
Finishを押す

プレビュー表示

プロジェクトの作成の工程で、Finishを押すと、
開発を行うためのビューに遷移するはずです。
ここで、下の画像を参考に、

Android Wear Square
Android Wear Round

を選択します。

f:id:sonoshou:20141110203910p:plain

ウォッチ型のHello World!!が表示できたかと思います。

プレビュー表示例

こんな感じです！！

f:id:sonoshou:20141110203951p:plain

追記（2014年11月24日）

上記プレビューをエミューレータ画面だと勘違いしていました。
というわけで、エミュレータ起動を追加します。

エミューレータで起動

Shift+10でエミューレータで起動できます。

エミューレータの設定

初回の場合は、エミューレータの設定が必要です。

Shift+10でエミューレータ起動。
起動しようとするとChoose Device画面が出てくる。
Launch emulator の Android virtual device が None の場合、
左の「…」を押す。
Open AVD Manager
Create a virtual device
Category Wearを選択。
Android Wear Squareを選択。
ABIはarmeabi-v7aの方を選択しました。（x86だと私の環境ではエラーが出たので……。）
あとはNextとFinishを押していこう！（投）
ただし、Roundのエミューレータを作る場合は、Use Host GPUのチェックをはずしましょう。
Choose Device画面からAndroid virtual deviceの
[none]となっているところから、プルダウンで先ほど作った
エミューレータ選択する。
起動！

はじめは、チュートリアルが出てくるけど、適当にスルーで。

AVDが起動しない場合

PANIC:Could not open

となる場合があります。
私はこれにハマり、大変でした。
AVDフォルダを移動すると、このエラーが起きてしまうそうです。
皆さんも気を付けてください。

解決策は、管理者権限のコマンドプロンプトで

mklink /D リンクを作成する場所リンク先

でシンボリックリンクを張れば良いです。

私の場合は、

D:\Users\MyName\.android\avd

にAVDの実体があるにも関わらず、

C:\Users\MyName\.android\avd

を読みに行っていたために、読み込めないということになりました。

従って、私の場合は、管理者権限のコマンドプロンプトで

mklink /D C:\Users\MyName\.android\avd D:Users\mine\.android\avd

を実行することでエラーが解消しました。

エミューレータ起動画面

f:id:sonoshou:20141124160203p:plain

f:id:sonoshou:20141124182729p:plain

Use Host GPUにチェックを入れた場合、こうなってしまいます。

f:id:sonoshou:20141124160216p:plain

2014-09-06

wordpress xmlrpc.phpの脆弱性

突然サーバが落ちる落ちるようになった！

いつものように、
さくらVPS + Centos + wordpress
でサイト運営をしていたのですが、
急にサーバが落ちるようになってしまいました……。

今回はその原因復旧のために戦った男の記録を残そうと思います。
※良いところだけ。

access_logを見る

サーバが落ちる原因はいろいろとあります。

その原因を探るべく、logを見てみましょう。

vi /var/log/httpd/accesa##突然サーバが落ちる落ちるようになった！##

いつものように、
さくらVPS + Centos + wordpress
でサイト運営をしていたのですが、
急にサーバが落ちるようになってしまいました……。

今回はその原因復旧のために戦った男の記録を残そうと思います。
※良いところだけ。

access_logを見る

サーバが落ちる原因はいろいろとあります。

その原因を探るべく、logを見てみましょう。

less /var/log/httpd/access_log

rootユーザになれず、
httpd以下のパスがどうなっているか見たい場合は、

cd /var/log/
sudo bash -c "cd httpd; ls -al"

とすると、httpd以下のファイル構成がわかりますよ。

フランスとイギリスから熱いラブコールが……。

早速上記コマンドで、access_logを見てみましょう！

すると、なんということでしょう！

よくわからないところから、1秒に1回ぐらいアクセスがあるではありませんか！

176.227.***.*** - - [06/Sep/2014:15:24:20 +0900] "POST /xmlrpc.php HTTP/1.0" 200 370 "-" "Mozilla/4.0 (compatible: MSIE 7.0; Windows NT 6.0)"
195.154.***.*** - - [06/Sep/2014:15:24:21 +0900] "POST /xmlrpc.php HTTP/1.0" 200 370 "-" "Mozilla/4.0 (compatible: MSIE 7.0; Windows NT 6.0)"
176.227.***.*** - - [06/Sep/2014:15:24:23 +0900] "POST /xmlrpc.php HTTP/1.0" 200 370 "-" "Mozilla/4.0 (compatible: MSIE 7.0; Windows NT 6.0)"
195.154.***.*** - - [06/Sep/2014:15:24:26 +0900] "POST /xmlrpc.php HTTP/1.0" 200 370 "-" "Mozilla/4.0 (compatible: MSIE 7.0; Windows NT 6.0)"

ＩＰの場所を調べると、フランスとかイギリスとか出てくるし……。
やめたげてよお！！

もしかしたら、落ちる原因はこいつなのでは……？と思い始めます。

余談

こういうときは、

tail -f /var/log/httpd/access_log

として開くと良いですよ！

tailコマンドは、ファイルの末尾を開きます。
-fオプションは、開いたファイルを更新し続けます。

これにより、リアルタイムでアクセスが来ていることが瞬時に把握できます！

続く……かもしれない。

2014-01-22

ecliseとgitの連携2　～さくらVPS～

git さくらVPS eclipse

\------筆者の環境------\
・さくらVPS1GBプラン
・Cent OS
・eclipse 4.3
\----------------------\

以上の環境で
さくらVPSにあるgitのリポジトリからクローンを行い、 eclipseで管理できるようにするまで。
私は日本語化したeclipseを使用していますので、
英語版の方は適宜読み直してください。

Eclipse4.3のインストールと日本語化

こちらのサイトがめちゃくちゃ詳しいです。
Eclipse 4.3 のダウンロード，インストール，設定，日本語化，基本操作
上のホームページを見て、インストールを行いましょう。

Eclipseのgitについて

eclipse4.3からgitがすでにインストールされるようになっております。
eclipse4.2以前の方は、EGitというプラグインをインストールしましょう。
過去の私のブログをご参照ください。
Eclipseとgitの連携｜sonoshouのまじめなブログ

gitリポジトリーのクローン

eclipseでの作業になります。

ウィンドウ - パースペクティブを開く - その他
Gitリポジトリー・エクスプローラー
「Clone a Git Repository」もしくは「アイコン（Gitリポジトリーを複製し、このビューに追加」（図1）
「URI」もしくは「ホスト」「リポジトリー・パス」、「プロトコル」「ポート」を環境に合わせて入力。（図2）
「次へ」と「完了」で終了。

f:id:sonoshou:20140122012811p:plain

図1

f:id:sonoshou:20140122012820p:plain

図2

ただし、図2内における「git.sonoshou.jp」の部分は、
~/.ssh/config 内で定義しています。

パッケージ・エクスプローラーで管理

ウィンドウ - パースペクティブを開く - その他
Java （デフォルト）
パッケージ・エクスプローラーのタブ内で右クリック
インポート
Gitからプロジェクト
Existing local repository
先ほどcloneしたリポジトリーを選択して「次へ」
一般的なプロジェクトとしてインポートにチェックして、作業ディレクトリを選択。（図3）
「完了」

f:id:sonoshou:20140122013103p:plain

図3

ユーザ設定

gitはコミットする際に、ユーザ名とメールアドレスを求められます。
設定がなくてもコミットできるのですが、あまり行儀よろしくないので、設定しましょう。

ウィンドウ - 設定
左のタブから、チーム - Git - 構成
ユーザ設定タブで「エントリーの追加」
キー：user.name、値：任意の名前を入力し、「OK」
同様に、キー：user.email、値：任意のアドレスを入力し、「OK」

このように設定できていればOK。

f:id:sonoshou:20140122013133p:plain

eclipseを使ったgitの操作方法

過去の私のブログをご参照ください。
Eclipseとgitの連携｜sonoshouのまじめなブログ

ただ、あまり詳しくなく約1年ほど前の記事ですので、
操作方法に関しては他のホームページに譲ろうかと思います。

それでは、良いeclipse＆gitライフを。

2013-12-20

Sublime Text で Markdown．

Sublime Text Markdown

Sublime Text 導入 | sonoshouのまじめなブログ
でSublime Textを導入したのですが，
キーバインドできるMarkdownエディタとしも優秀だという話を聞き，
Sublime Textを自分なりにカスタマイズしてみました．

結論から言うと，非常にMarkdownが書きやすいです！
キーバインド使えることがこんなに嬉しいのか……！
Markdownって改行（半角スペース2回）が面倒だと思ってたのですけど，
SHIFT + Enterに半角スペース2回を割り当てたら幸せになりました．

ただ，他のMarkdown専用アプリと比較すると，
プレビューがリアルタイムに見られないのが痛い……．
キーバインドを取るか，プレビューを取るか，好みかもしれません．

Macな方は適宜読み替えて下さい．
大きく違う点はありませんでした．

追記（2014年11月24日）

OmniMarkupPreviewerが非常に優秀であることがわかりました。
こいつのおかげで、リアルタイムにプレビューが見ることができます。
使い方やインストール等は以下のページを参考にして下さい。
Sublime TextでのMarkdown導入も丁寧に書かれています。
情報系大学生のWebメモ

また、OmniMarkupPreviewerデフォルトのCSSを変える際は、
以下のページが参考になりました。
日々の観察ブログ

完成図

エディタ画面

f:id:sonoshou:20131222165101p:plain

プレビュー画面

f:id:sonoshou:20131222165105p:plain

パッケージコントロールのインストール

Sublime Textのパッケージコントロールは必須です．
これにより，様々なパッケージを簡単にインストールすることができます．
以下のサイトを参考にしました．
Sublime Text 3初期導入

Sublime Text 3を起動して， Ctrl + ` もしくは Ctrl + @ を押す．
以下の呪文を入力．（2013年12月19日確認）
import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
インストールが始まる．

これで各種のインストールが簡単に行うことができます．

Markdownなあなたへ

Sublime TextをMarkdownしたいあなたへ．

Markdown Previewのインストール

ボタン一つでSublime Textからプレビューを表示できるようにしましょう．
こちらのページを参考にしました．
SublimeText2でMarkdownをプレビューするプラグイン

Ctrl + Shift + P または Command + Shift + PでSublime Package Managerを起動する．
Package Control: Install Packageを選択．
Markdown Previewを入力して選択．

Markdown Previewがインストールできます．
次は，ショートカットの設定です．

メイン画面から， Preferences -> Key Binding-User を開きます．
[ { "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser"} }]　を追加．

以上です． ["alt+m"]の部分がショートカットの指定なので，変えたい人はお好みで変えましょう．

alt+mボタンを押すとブラウザが開き，Markdownのプレビューを見ることができます．

Markdown PreviewのCSS編集

初期設定では日本語のフォントのセンス悪く，美しくありません．
そこで，Markdown Previewに使われるCSSを編集して，お好みのフォントを使いましょう．

メイン画面から， Preferences -> Browse Packages （Mac版は,左上リンゴマーク隣のSublime TextからPreferencesへ．）
Sublime Text 3 / Installed Pakages にアクセス
Markdown Preview.sublime-package を Markdown Preview.zip にリネーム．
Markdown Preview.zip を解凍．
github.css と markdown.css があるので，これらのファイルを開く．
font-familyをお好みに編集．
解凍してできた Markdown Preview フォルダを圧縮．
Markdown Preview.zip を　Markdown Preview.sublime-package にリネーム．
メイン画面から， Preferences -> Package Settings -> Markdown Preview -> Settings - Users を開く
{"css" : "markdown.css"} または {"css" : "github.css"} を入力．

以上です．

私はこちらのサイトを見て，font-familyを編集しました．
CSSのfont-family指定はこれで決まり！（2013春） | 遠近法ノート

font-family:'Lucida Grande',
'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
Meiryo, メイリオ, sans-serif;

Markdownをカラフルに

せっかくなのでMarkdownをカラフルにして，見やすくしましょう！
以下のサイトを参考に．
Sublime Text で markdown をカラフル

Ctrl + Shift + P または Command + Shift + PでSublime Package Managerを起動する．
Package Control: Install Packageを選択．
Markdown Extendedとmonokai extendedを入力して選択．

これでインストールが終了です．
次は設定です．

.mdをメイン画面から View -> Syntax > Open all with current extension as で Markdown Extendedに設定．
Preferences -> Color Scheme -> Monokai Extended のどちらか好きなほうに設定．

以上です．

日本語をインライン入力可能にする

Windowsのデフォルトだと，日本語がインライン入力できず，非常に打ちづらいです．
Windowsの方は，こちらでインライン入力可能にしましょう．
以下のサイトを参考にしました．
Windows版「Sublime text 2」で日本語をインライン入力する方法

Ctrl + Shift + P または Command + Shift + PでSublime Package Managerを起動する．
Package Control: Install Packageを選択．
IME Supportを入力して選択．

以上です．

タブや半角スペースを表示したい（お好み）

Sublime Text 2| Mnemoniqs Web Designer Blog
こちらのホームページを参考にしました．

メイン画面から　Preferences > Settings User を開く．
{"draw_white_space": "all"} を追加．

以上です．

キーバインドも工夫したい（お好み）

私の好みです．
日本語のMarkdownで一番不便なのが改行だと思うのです．
改行するたびに全角と半角を切り替えて，
改行する行に半角スペースを２つ入力する必要があるからです．

そこで，

{ "keys": ["shift+enter"], "command": "insert_snippet", "args": {"contents": "  \n"}}, // markdown用

と指定することで，Shift + Enterで改行することができます．
個人的にはこれだけでも非常に便利なので，おすすめです．

以下は改行以外の各種Markdown記法にショートカットを振ってみた例です．
これらの設定が便利かどうかはこれから試していく予定です．

参考までに……．

[
{ "keys": ["ctrl+f"], "command": "move", "args": {"by": "characters", "forward": true } }, // emacs風  
{ "keys": ["ctrl+b"], "command": "move", "args": {"by": "characters", "forward": false } }, // emacs風  
{ "keys": ["ctrl+p"], "command": "move", "args": {"by": "lines", "forward": false } }, // emacs風
{ "keys": ["ctrl+n"], "command": "move", "args": {"by": "lines", "forward": true } }, // emacs風
{ "keys": ["ctrl+h"], "command": "left_delete" }, // emacs風
{ "keys": ["ctrl+d"], "command": "right_delete" }, // emacs風
{ "keys": ["ctrl+a"], "command": "move_to", "args": {"to": "bol", "extend": false} }, // emacs風
{ "keys": ["ctrl+e"], "command": "move_to", "args": {"to": "eol", "extend": false} }, // emacs風
{ "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser"} }, // markdown preview
{ "keys": ["shift+enter"], "command": "insert_snippet", "args": {"contents": "  \n"}}, // markdown用
{ "keys": ["alt+1"], "command": "insert_snippet", "args": {"contents": "1.\t"}}, // markdown用
{ "keys": ["alt+2"], "command": "insert_snippet", "args": {"contents": "2.\t"}}, // markdown用
{ "keys": ["alt+3"], "command": "insert_snippet", "args": {"contents": "3.\t"}}, // markdown用
{ "keys": ["alt+4"], "command": "insert_snippet", "args": {"contents": "4.\t"}}, // markdown用
{ "keys": ["alt+5"], "command": "insert_snippet", "args": {"contents": "5.\t"}}, // markdown用
{ "keys": ["alt+6"], "command": "insert_snippet", "args": {"contents": "6.\t"}}, // markdown用
{ "keys": ["alt+7"], "command": "insert_snippet", "args": {"contents": "7.\t"}}, // markdown用
{ "keys": ["alt+8"], "command": "insert_snippet", "args": {"contents": "8.\t"}}, // markdown用
{ "keys": ["alt+9"], "command": "insert_snippet", "args": {"contents": "9.\t"}}, // markdown用
{ "keys": ["alt+0"], "command": "insert_snippet", "args": {"contents": "0.\t"}}, // markdown用
{ "keys": ["alt+-"], "command": "insert_snippet", "args": {"contents": "-\t"}}, // markdown用
{ "keys": ["alt+t"], "command": "insert_snippet", "args": {"contents": "#$0#"} } , // markdown用
{ "keys": ["alt+s"], "command": "insert_snippet", "args": {"contents": "**$0**"} } , // markdown用
{ "keys": ["alt+c"], "command": "insert_snippet", "args": {"contents": "`$0`"} } , // markdown用
{ "keys": ["alt+k"], "command": "insert_snippet", "args": {"contents": "----------\n"} } , // markdown用
{ "keys": ["alt+q"], "command": "insert_snippet", "args": {"contents": ">\t"} } , // markdown用
{ "keys": ["alt+l"], "command": "insert_snippet", "args": {"contents": "[title](http://)"} } , // markdown用
]

本記事の目的

1. railsアプリケーションの作成

2. コントローラの作成

createされるファイル

3. ルートの設定

フォーム

1. ルートの設定

2. コントローラの作成

createされるファイル

3. コントローラの編集

4. Viewの追加

5. フォーム

formの構文

6. 記事を作成する

renderメソッド

7. Articleモデルを作成する

createされるファイル

8.マイグレーションを実行する

9. コントローラでデータを保存する

10. 記事を表示する。

記事の一覧表示

Controllerの編集

ビューの追加

リンクの追加

link_toメソッド

トップページにリンクを追加

記事一覧からの記事新規作成リンク先

記事作成からの戻るリンク先

検証（バリデーション）の追加

modelの更新

controllerの更新

renderとredirect_to

viewの更新

解説

記事の更新

controllerの編集

viewの追加

controllerの追加

editアクションへの前記事のリンク

個別記事からの編集リンク

パーシャルの利用

パーシャルとは？

パーシャルファイルの追加

既存のviewファイルにパーシャルファイルを適用

記事を削除する

controllerの編集

記事一覧ページに削除リンクを追加。

オプション

新規railsプロジェクト

1. rails new コマンドで新しいプロジェクトを作成。

2. Gemfileの編集

3. gemのインストール

4. WEBrick起動

オプション

不要なログを削除する

IPアドレスのログの非表示

アセットパイプラインのログの非表示

Hamlを利用する

1. Gemfileに追加

2. bundle install を実行

3. rake haml の実行

実機で起動

開発者用のメニューが出てこない！

adb devicesで端末が出てこない！

Failure [INSTALL_FAILED_OLDER_SDK]

参考にしたサイト

開発環境

Android Studioのダウンロードとインストール

筆者の環境

ダウンロード

インストール

エラーが起きた

Android SDKのインストール

Android studio にAndroid SDKの場所を登録

やり方

Hello World!!

プロジェクトの作成

プレビュー表示

プレビュー表示例

追記（2014年11月24日）

1. `rails new` コマンドで新しいプロジェクトを作成。

2. `bundle install` を実行

3. `rake haml` の実行