fakestarbaby

fakestarbaby

とあるベンチャーのエンジニアです。 最近、CoronaSDK始めました。 嫁と娘(4歳)と息子(0歳)がいます。 興味対象: Ruby/Rails/Git/Heroku/jQueryMobile/iOS/CoronaSDK/Lua/Agile/TDD...
Tendency of Posts
Recent Posts

CoronaSDKでランダムな実数を算出する！

math.random()を利用して算出します。

sample.lua
-- 0〜1
math.random()
---> 0.61073766677209

-- 0〜10
math.random() * 10
---> 8.1230520494855

-- 1〜10
math.random(1, 9) + math.random()
---> 5.5851816798491

公式リソース

App Development Tool | math.random()

CoronaSDKでTwitterFramework、iAdを実装する方法！

2012/12/21、Coronaの公式ブログにて、iOSアプリのTwitterFramework、iAdを利用出来る機能が発表されました。

待ちに待った機能ですね！
今回は、この2つの機能に絞って使い方を見て行きましょう！

TwitterFramework

これは、iOSに統合されたTwitterを利用する為に提供されているフレームワークですね。
以下、コードのサンプルです。

tweet.lua
local options = {
   message = "やぁ！ #fakestarbaby",
   url = "http://twitter.com/fakestarbaby",
}
native.showPopup("twitter", options)

これだけ、以上！
マジ簡単過ぎてビビリますね。

上記以外にも、画像が付けられたり、リスナーが登録出来たりします。
詳細は、APIリファレンスを参照して下さい。

iAd

これは、Appleが提供しているモバイル広告プラットフォームですね。
以下、コードのサンプルです。

iad.lua
local ads = require("ads")
ads.init("iads", "YOUR APP ID")
ads.show("banner", { x = 0, y = 0 })

これだけ、以上！
何回も言いますけど、マジ簡単過ぎてビビリますね。

まとめ

発表されたばかりの旬な機能、いかがでしたでしょうか？
残念ながら、ターゲットがAndroidの場合は利用出来ない機能なので、そこは既存のリソースを利用するなどして対応するしかないですけどね。
ただ、実装は本当に数行なので、是非、お試しあれ！

Sawa_mini_normal
saddy575

Twitterですが、AndroidでもとりあえずURLスキームは使えるようです。
（要Twitterアプリですかね）

local url='twitter://post?message=URLEncodedString';
system.openURL( url );

こんな感じで。

CoronaSDKの有益なリソースはココにある！

CoronaSDKを始めたは良いが、どうにもこうにも日本語の有益なリソースが非常に少ないんですよね。

こんな時、どうしたら良いんだろう？
あんな時、どうしたら良いんだろう？

きっと、リソースを探し彷徨うでしょう。
そこで、私が有益だと思うリソースについて、この記事にまとめてみました。
是非、ウロウロしてCoronaSDKをお楽しみ下さい。

公式リソース

プロダクトサイト

こちらは、CoronaSDKのプロダクトサイトですね。
あまり訪れる機会は無いかもしれません。

フォーラム

こちらは、CoronaSDKに関する情報を日本人同士でやり取りする為のフォーラムです。
ご覧の通り、過疎っているし、有益なリソースもあまり見かけないので、私は利用していません。

チュートリアル

こちらは、あるテーマに沿った実装について書かれているチュートリアルです。
改めて目を通してみると、案外役に立つチュートリアルが揃ってますね。
ググって、このチュートリアルに辿り着く事もしばしば。

API Matrix

こちらは、対象デバイス毎のCoronaSDKのAPIの対応表一覧です。
ほとんど、どのデバイスでも利用可能ですが、一部、Androidで利用出来ないAPIがあったりするので、目を通しておくべきでしょう。

エディタ

CoronaSDKを始めるにあたって、良い感じのエディタってあるんですか？
良い感じかどうかは個人差があるので、なんとも言えませんが、あるにはあります。

LuaGlider

NetBeansをベースに開発されているLua言語専用のIDEです。
CoronaSDKにも対応しているので、このIDEさえあれば、コード補完も、アプリを実行しながらデバッグする事も出来ます。
ちなみに、有料ですが、私はコレを使っています。
若干、ありがた迷惑なコード補完されてキレ気味になる事もありますが、まぁ、出来の良いIDEだと思います。

エディタのカラースキーマを変更するのなら、Ruby/Railsエンジニア御用達のRailsCastsテーマをオススメします。

SublimeText2

今、何かと流行りのエディタです。

以下のようなバンドルを組み込む事により、CoronaSDKのエディタに仕立てる事は出来るようですが、詳細はよく分かりません。

チュートリアル

あんな事やこんな事、テーマに沿った有益なチュートリアルが集まってるサイトってあるの？
はい、あります。
それも、とびっきりのボリュームと丁寧な解説付きで。

Learning Corona

ココは、とにかく、チュートリアルが膨大です。
私は何か新しい実装を始める際に、必ずココに無いか探します。
見つかれば、大抵は、そのままコードを写経するだけで動作するでしょう。
CoronaSDKをやっているエンジニアであれば、必ず知っておくべきリソースですね。

CoronaSDKってどんなん？って方は、まず、始めにAnsca Video Tutorialsのスクリーンキャストをひと通り見てみて下さい。
CoronaSDKの簡単さを体験出来ると思います。

RAYWENDERLICH

ココは、iPhoneアプリ開発に有益なリソースが集まっているサイトですが、一部、CoronaSDKのチュートリアルがあります。
詳しくは、Other Game Enginesをご覧下さい。

参考

CoronaSDKの有益な記事、又は、ブログなどを紹介します。

Getting Started with Corona SDK Development

CoronaSDKの最初の一歩的な記事です。
エディタの紹介から始まり、ライブラリの紹介まで言及しています。

ニジボスマホ部

基本を押さえると、エンジニアとしては、どうすれば良い感じになるんだ？ベストプラクティスを知りたい！という欲求に駆られますよね。
CoronaSDKの初心者を脱した、次の一歩となるような面白い記事がたくさんある日本語のブログです。
掲載されている情報も非常に有益なので、目を通しておくべきです。

参考書

CoronaSDKって参考書あるの？
はい、あります。
そんなに種類は出ていないので、ここでは渾身の一冊を紹介します。

基礎から学ぶCoronaSDK

この一冊だけ購入して読みましょう。
なぜなら、この参考書はCoronaSDKを開発しているAnsca Mobile社の公認本だからです！

嘘です・・・公認かどうかはどうでも良くて、中身が非常にしっかりと、そして、丁寧に書かれているからです。

CoronaSDKは、Luaという言語で開発をします。
このLua言語の構文についても記載がありますし、もちろん、CoronaSDKに関する情報も記載があります。
とにかく、CoronaSDKを始めるなら、まずは、この一冊を購入して読んでみましょう。

正直、この参考書一冊読めば、CoronaSDKの基本は理解出来るし、リファレンスとしてさっと調べる事も出来るし、購入した方が良いと思います。
オススメです。

まとめ

いや、日本語のリソース少ないですね。
もっと、CoronaSDKの記事が増えると良いですね。

Corona★Note｜スタディノート随時更新！

Official

IDE

Tutorial

References

Tips

Storyboard

Director

あのGem達、元気にしているかな？ | 2012/08/28時点

最近試していないけど、かつて利用した事のあるGem達、元気にしているかな？
と、思ったので、軽くメモっておこう。

  • josevalim/rails-footnotes
    • ビューのフッターにデバッグ情報を自動的に付与して表示出来るようになる。
    • 確か、TextMateで即座に開けるリンクとかも用意出来た気がする。
  • ctran/annotate_models
    • ActiveRecordのモデルファイルのヘッダーに、スキーマ情報を自動的に挿入してくれる。
    • マジックコメント無視して挿入してくれるのには発狂したね。
  • thoughtbot/paul_revere
    • 確か、通知をサポートしてくれるGemだった気がする。
    • 以前に試した時は、何らかの問題で正常に動作していなかった記憶がある。
  • fesplugas/typus
    • 提供されているコマンドを実行する事で、管理画面を自動的に生成してくれる。
    • 関連しているモデルのデータを1画面で俯瞰出来るのが便利。
    • 最近は、RailsAdminを利用するようになったのでご無沙汰。
  • filtersquad/rocket_pants
    • APIを簡単に記述出来るようになる。
    • 同様のGemとしては、Grapeの方がメジャーだが、後発としてどう異なるか気になる所ではある。
    • 以前に試した時は、何らかの問題で正常に動作していなかった記憶がある。
  • rhomobile/rhodes
    • RubyでiOS/Androidのアプリが作れるようになる。
    • ファイル構造などはRailsに似ていて、WEBアプリを作っているような感覚でアプリが作れる。
    • 日本語ソースも少ないので、余り人気は無いと思われる。
    • でも、何気にHerokuのアドオンとして提供されていたりもする。
  • thoughtbot/high_voltage
    • 静的なページを簡単に組み込めるようになる。
    • 静的なページとは、例えば、Aboutページとかね。
    • thoughtbot社のGemという事で一度試したけど、余り嬉しいと感じなかった記憶がある。
  • copycopter/copycopter-server
    • テキストをアプリケーション外部から変更出来るようになる。
    • いつの間にか、オープンソースになったようですね。

以上、なんとなく、パッと思い付いたGem達でした。
もし、気になったら試してみて下さい。

iOSでシングルトンクラスを定義する！

iOSでシングルトンクラスを定義する方法です。

SampleSingleton.h
+ (SampleSingleton *)sharedManager;
SampleSingleton.m
static SampleSingleton *_sharedInstance = nil;
+ (SampleSingleton *)sharedManager
{
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        _sharedInstance = [[SampleSingleton alloc] init];
    });
    return _sharedInstance;
}

あわせて読みたい

110407-0001_normal
335g

これってnilチェックしないと毎回allocしません？

Assets.github.com%2fimages%2fgravatars%2fgravatar-140
fakestarbaby

dispatch_once の引数に指定されているブロック内は一度しか実行されない為、毎回 nil チェックをする必要はありません。

110407-0001_normal
335g

dispatch_onceについて勘違いしてたんですかね。
排他処理をするものだと勘違いしていたようです。
失礼しました。

iOS/Objective-C★Note | スタディノート随時更新！

勉強した事をつらつらと書き殴ります。

iPhone
photo by MattsMacintosh

ワイヤーフレーム

ビューコントローラ

ライフサイクル

通常

  • initWithNibName / initWithCoder / init
  • awakeFromNib
  • loadView
  • viewDidLoad
  • viewWillAppear
  • viewWillDisappear
  • viewDidDisappear
  • dealloc

メモリ不足

  • didReceiveMemoryWarning
  • viewDidUnload

モデル

モデルオブジェクトクラスとそれを管理する、モデルマネージャクラスを用意するパターンがある。
詳細は、iOS開発におけるパターンによるオートマティズムを参照。

モデルオブジェクトクラス

モデルオブジェクトクラスの役割は以下。

  • 情報の保持
  • IDの生成
  • アクセサの提供
  • 保存と読み込み

モデルマネージャクラス

モデルマネージャクラスの役割は以下。

  • モデルマネージャの参照の取得
  • モデルオブジェクトの集合の管理
  • モデルオブジェクトの操作
  • モデルオブジェクトの集合の保存、読み込み

メモリ管理

公式

参考

データ永続化 - CoreData

公式

参考

mogenerator

MagicalRecord

アニメーション

URLスキーム

参考

位置情報

ネットワーク

AFNetworking

XCode

Git

.gitignore

.gitignore
build/*
*.pbxuser
!default.pbxuser
*.mode1v3
!default.mode1v3
*.mode2v3
!default.mode2v3
*.perspectivev3
!default.perspectivev3
*.xcworkspace
!default.xcworkspace
xcuserdata
profile
*.moved-aside
.DS_Store
UserInterfaceState.xcuserstate

広告

iAD

Chartboost

InMobi

アクセス解析

Google Analytics for iOS

TestFlight

リモートロギング

NSLogと同様のメソッドシグネチャを持つTFLogというメソッドが提供されている。

#define NSLog(__FORMAT__, ...) TFLog((@"%s [Line %d] " __FORMAT__), __PRETTY_FUNCTION__, __LINE__, ##__VA_ARGS__)

アプリ登録／審査

デバッグ

AppDelegate.m
void uncaughtExceptionHandler(NSException *exception) {
    NSLog(@"CRASH: %@", exception);
    NSLog(@"Stack Trace: %@", [exception callStackSymbols]);
}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    NSSetUncaughtExceptionHandler(&uncaughtExceptionHandler);

    return YES;
}

Tips

RunScript
#!/bin/bash
buildNumber=$(/usr/libexec/PlistBuddy -c "Print CFBundleVersion" "$INFOPLIST_FILE")
buildNumber=$(($buildNumber + 1))
/usr/libexec/PlistBuddy -c "Set :CFBundleVersion $buildNumber" "$INFOPLIST_FILE"

コミュニティ

iphone_dev_jp

書籍

本番環境のみ、BASIC認証を設定する！

常に忘れる為、ココにメモしておきます。

app/controllers/application_controller.rb
http_basic_authenticate_with :name => ENV["BASIC_AUTH_NAME"], :password => ENV["BASIC_AUTH_PW"] if Rails.env.production?

nameとpasswordは、Herokuの環境変数で設定しておきます。

$ heroku config:add BASIC_AUTH_NAME=fakestarbaby
$ heroku config:add BASIC_AUTH_PW=password
Assets.github.com%2fimages%2fgravatars%2fgravatar-140
ppworks

私は、 BASIC_AUTH_NAME と BASIC_AUTH_PW が
設定されてたら Basic認証にする、とかよくやります。

RailsAdmin | Railsで管理画面を自動生成

RailsAdminは、簡単に、キレイな、扱いやすい管理画面を提供してくれるRailsエンジンです。
RailsAdmin

リソース

インストール

RailsAdminは、管理画面にアクセスする管理者の管理にDeviseを利用しています。
その為、まずは、Deviseをインストールしておきましょう。

Gemfileに、deviseを追記します。

Gemfile
gem 'devise'

インストールします。

$ bundle install
$ rails g devise:install
      create  config/initializers/devise.rb
      create  config/locales/devise.en.yml
===============================================================================

Some setup you must do manually if you haven't yet:

  1. Ensure you have defined default url options in your environments files. Here 
     is an example of default_url_options appropriate for a development environment 
     in config/environments/development.rb:

       config.action_mailer.default_url_options = { :host => 'localhost:3000' }

     In production, :host should be set to the actual host of your application.

  2. Ensure you have defined root_url to *something* in your config/routes.rb.
     For example:

       root :to => "home#index"

  3. Ensure you have flash messages in app/views/layouts/application.html.erb.
     For example:

       <p class="notice"><%= notice %></p>
       <p class="alert"><%= alert %></p>

  4. If you are deploying Rails 3.1 on Heroku, you may want to set:

       config.assets.initialize_on_precompile = false

     On config/application.rb forcing your application to not access the DB
     or load models when precompiling your assets.

===============================================================================

上記の警告メッセージの内、フラッシュメッセージの表示ロジックのみ、レイアウトファイルに追記します。

app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
  <title>SampleRailsAdmin</title>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<body>

<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>

<%= yield %>

</body>
</html>

本来であれば、RailsAdminをインストールする時に、関連する管理者モデルを自動生成してくれるはずなのですが、正常にジェネレーターが動作しないようなので、先にDeviseで管理者モデルを自動生成します。

$ rails g devise admin_user
      invoke  active_record
      create    db/migrate/20120802102400_devise_create_admin_users.rb
      create    app/models/admin_user.rb
      insert    app/models/admin_user.rb
       route  devise_for :admin_users

管理者は直接DBに登録するようにしたい為、管理者モデルファイルから:registerableと:recoverableの指定を外します。

app/models/admin_user.rb
class AdminUser < ActiveRecord::Base
  # Include default devise modules. Others available are:
  # :token_authenticatable, :confirmable,
  # :lockable, :timeoutable and :omniauthable
  devise :database_authenticatable, :rememberable, :trackable, :validatable

  # Setup accessible (or protected) attributes for your model
  attr_accessible :email, :password, :password_confirmation, :remember_me
  # attr_accessible :title, :body
end

同様に、マイグレーションファイルから関連するロジックをコメントアウトします。

db/migrate/20120802102400_devise_create_admin_users.rb
class DeviseCreateAdminUsers < ActiveRecord::Migration
  def change
    create_table(:admin_users) do |t|
      ...

      ## Recoverable
      # t.string   :reset_password_token
      # t.datetime :reset_password_sent_at

      ...
    end

    ...
    # add_index :admin_users, :reset_password_token, :unique => true
    ...
  end
end

マイグレーションします。

$ rake db:migrate

さて、ここからRailsAdminのインストールです。
本来であれば、ここまで全てRailsAdminがお世話してくれるはずなんですけどね。

Gemfileに、rails_adminを追記します。

Gemfile
gem 'rails_admin'

インストールします。
途中で、管理者モデルとして何を使うかと聞いて来るのでadmin_userを、管理画面をマウントするパスをどうするか聞いてくるのでadminと答えます。

$ bundle install
$ rails g rails_admin:install
           -  Hello, RailsAdmin installer will help you sets things up!
           -  I need to work with Devise, let's look at a few things first:
           -  Checking for a current installation of devise...
           -  Found it!
           -  Looks like you've already installed it, good!
           -  And you already set it up, good! We just need to know about your user model name...
           -  We found 'admin_user' (should be one of 'user', 'admin', etc.)
           ?  Correct Devise model name if needed. Press <enter> for [admin_user] > 
           -  Ok, Devise looks already set up with user model name 'admin_user':
           -  Now you'll need an initializer...
      create  config/initializers/rails_admin.rb
           -  Adding a migration...
      create  db/migrate/20120802103609_create_rails_admin_histories_table.rb
           ?  Where do you want to mount rails_admin? Press <enter> for [admin] > 
        gsub  config/routes.rb
       route  mount RailsAdmin::Engine => '/admin', :as => 'rails_admin'

RailsAdminが利用する履歴モデルのマイグレーションファイルが自動生成されているので、もう一度、マイグレーションします。

$ rake db:migrate

利用方法

まず、管理者をDBに登録します。

$ rails c
Loading development environment (Rails 3.2.7)
1.9.3p194 :001 > AdminUser.create(:email => "admin@test.com", :password => "hogehoge", :password_confirmation => "hogehoge")
   (0.1ms)  begin transaction
  AdminUser Exists (0.1ms)  SELECT 1 AS one FROM "admin_users" WHERE "admin_users"."email" = 'admin@test.com' LIMIT 1
  SQL (1.9ms)  INSERT INTO "admin_users" ("created_at", "current_sign_in_at", "current_sign_in_ip", "email", "encrypted_password", "last_sign_in_at", "last_sign_in_ip", "remember_created_at", "reset_password_sent_at", "reset_password_token", "sign_in_count", "updated_at") VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)  [["created_at", Thu, 02 Aug 2012 10:46:25 UTC +00:00], ["current_sign_in_at", nil], ["current_sign_in_ip", nil], ["email", "admin@test.com"], ["encrypted_password", "$2a$10$spWm6E8m2s8w7OVDfaQo0Ogn1K4EbpVNP7wD3nUF476Evdtf6fKtC"], ["last_sign_in_at", nil], ["last_sign_in_ip", nil], ["remember_created_at", nil], ["reset_password_sent_at", nil], ["reset_password_token", nil], ["sign_in_count", 0], ["updated_at", Thu, 02 Aug 2012 10:46:25 UTC +00:00]]
   (0.8ms)  commit transaction
 => #<AdminUser id: 1, email: "admin@test.com", encrypted_password: "$2a$10$spWm6E8m2s8w7OVDfaQo0Ogn1K4EbpVNP7wD3nUF476E...", reset_password_token: nil, reset_password_sent_at: nil, remember_created_at: nil, sign_in_count: 0, current_sign_in_at: nil, last_sign_in_at: nil, current_sign_in_ip: nil, last_sign_in_ip: nil, created_at: "2012-08-02 10:46:25", updated_at: "2012-08-02 10:46:25">

サーバーを起動して、http://localhost:3000/adminにアクセスすると、ログイン画面が表示されます。
先程、登録した管理者のメルアドとパスワードを入力してログインすると、管理画面のダッシュボードが表示されます。

モデルは自動的にRailsAdminによって読み込まれる為、特に小難しい事さえしなければ、この状態でどんどん新しいモデルを管理出来るようになります。

使い勝手が知りたければ、公式にDemoが用意されているので、こちらで試してみるのも良いでしょう。

あわせて読みたい

Cloudinary | 画像管理クラウドサービス

Cloudinaryは、Webアプリケーションの全ての画像を管理する為のソリューションを提供するクラウドサービスです。
Herokuのアドオンとしても提供されています。
Cloudinary

リソース

公式

Heroku

インストール

以下のコマンドを実行し、CloudinaryのフリープランをHerokuのアドオンとしてインストールします。

$ heroku addons:add cloudinary

Cloudinaryは、画像アップロードライブラリとして有名なCarrierWaveと相性が良いそうです。
その為、ここではCarrierWaveも同時にインストールします。

Gemfileに、carrierwaveとcloudinaryを追記します。

Gemfile
gem 'carrierwave'
gem 'cloudinary'

インストールします。

$ bundle install

初期設定

画像ファイルを持たせるモデルを新規作成します。
ここでは、ユーザーモデルとし、Scaffoldを利用します。

$ rails g scaffold user name
$ rake db:migrate

CarrierWaveで用意されているジェネレーターを利用して、画像アップローダークラスを自動生成します。
ここでは、アバタークラスとします。

$ rails g uploader Avatar
      create  app/uploaders/avatar_uploader.rb

自動生成されたアバタークラスにて、Cloudinaryをインクルードします。

:standardや:thumbnailは、CarrierWaveの機能で画像ファイルをアップロードする時にリサイズしてくれます。
詳細は、CarrierWaveのREADMEを参照して下さい。

app/uploaders/avatar_uploader.rb
class AvatarUploader < CarrierWave::Uploader::Base
  include Cloudinary::CarrierWave

  version :standard do
    process :resize_to_fill => [100, 150, :north]
  end

  version :thumbnail do
    process :resize_to_fit => [50, 50]
  end     
end

ユーザーモデルにCloudinaryで利用するアバターカラムを追加します。

$ rails g migration AddAvatarToUsers avatar
$ rake db:migrate

Cloudinaryに対するアクセス情報を記述するYAMLファイルを新規作成します。
cloud_name、api_key、api_secretは、HerokuのアプリケーションのCloudinaryアドオンを選択すると、専用のダッシュボードに表示されていますので、それをそのまま記述します。

config/cloudinary.yml
development:
  cloud_name: sample
  api_key: '123456789012345'
  api_secret: abcdefgh-ijklmnopqrstuvwxyz
  enhance_image_tag: true
  static_image_support: false
production:
  cloud_name: sample
  api_key: '123456789012345'
  api_secret: abcdefgh-ijklmnopqrstuvwxyz
  enhance_image_tag: true
  static_image_support: true
test:
  cloud_name: sample
  api_key: '123456789012345'
  api_secret: abcdefgh-ijklmnopqrstuvwxyz
  enhance_image_tag: true
  static_image_support: false

これでバックエンド側のロジックは準備完了となります。
ここからは、フロントエンド側のロジックですが、Cloudinaryと言うよりは、CarrierWaveの扱いになります。

まずは、入力フォームページにアバターカラムを追記します。

app/views/users/_form.html.erb
<%= form_for(@user) do |f| %>
  <% if @user.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@user.errors.count, "error") %> prohibited this user from being saved:</h2>

      <ul>
      <% @user.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :name %><br />
    <%= f.text_field :name %>
  </div>
  <div class="field">
    <%= f.hidden_field :avatar_cache %>
    <%= f.label :avatar %><br />
    <%= f.file_field :avatar %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

次に、詳細ページにアバターカラムを追記します。

app/views/users/show.html.erb
<p id="notice"><%= notice %></p>

<p>
  <b>Name:</b>
  <%= @user.name %>
</p>

<p>
  <b>Avatar:</b>
  <%= image_tag(@user.avatar_url, :alt => @user.name) %>
</p>

<%= link_to 'Edit', edit_user_path(@user) %> |
<%= link_to 'Back', users_path %>

最後に、一覧ページにもアバターカラムを追記します。

app/views/users/index.html.erb
<h1>Listing users</h1>

<table>
  <tr>
    <th>Name</th>
    <th>Avatar</th>
    <th></th>
    <th></th>
    <th></th>
  </tr>

<% @users.each do |user| %>
  <tr>
    <td><%= user.name %></td>
    <td><%= image_tag(user.avatar_url(:thumbnail), :width => 50, :height => 50) %></td>
    <td><%= link_to 'Show', user %></td>
    <td><%= link_to 'Edit', edit_user_path(user) %></td>
    <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td>
  </tr>
<% end %>
</table>

<br />

<%= link_to 'New User', new_user_path %>

以上で、初期設定は完了です。

利用方法

HerokuのアプリケーションのCloudinaryアドオンを選択すると、専用のダッシュボードが表示されます。
ここで、ストレージに格納されている画像を確認する事が出来ます。

その他、Cloudinaryは、画像のストレージとしての利用だけでなく、画像の加工もサポートしていますが、それは、また別の機会に試してみたいと思います。

あわせて読みたい

SCRABBLE★NOTE | 書き殴りノート

開発に関するメモなどを殴り書きします。
Note
photo by kwill1229

iOS

公式

チュートリアル

ライブラリ

参考

Corona SDK

チュートリアル

オレオレ開発環境まとめ | 随時更新！

オレオレ開発環境について、まとめてみました。
MacBookAir
photo by marc.flores

マシン

  • MacBook Air
    • 13インチ
    • 2.0GHzデュアルコアIntel Core i7
    • 8GB 1,600MHz DDR3L SDRAM
    • 256GBのフラッシュストレージ
    • バックライトキーボード (JIS)

OS

アプリケーション

ブラウザ

メイン

サブ

写真

ミュージック

ニュース

仕事効率化

ソーシャルネットワーキング

ユーティリティ

開発ツール

Grape | API生成マイクロフレームワーク

Grapeは、RubyでRESTライクなAPIを生成する為のマイクロフレームワークです。
Grape
photo by Anders Ljungberg

リソース

インストール

Gemfileに、grapeを追記する。

Gemfile
gem 'grape'

インストールする。

$ bundle install

初期設定

libディレクトリ配下に、API実装ファイルを新規作成します。

$ touch lib/api.rb

libディレクトリ配下を自動的に読み込むように設定します。

config/application.rb
# Custom directories with classes and modules you want to be autoloadable.
config.autoload_paths += %W(#{config.root}/lib)

ルーティングに、API実装ファイルのマウントを追記します。

config/routes.rb
mount API => "/"

利用方法

基本的な、Grapeの利用方法は以下のようになります。
paramsというブロックにて、パラメータのバリデータチェックも可能です。

lib/api.rb
class API < Grape::API
  # APIアクセスに接頭辞を付加
  # ex) http://localhost:3000/api
  prefix "api"

  # APIアクセスにバージョン情報を付加
  # ex) http://localhost:3000/api/v1
  version 'v1', :using => :path

  resource "users" do
    # ex) http://localhost:3000/api/v1/users
    desc "returns all users"
    get do
      User.all
    end

    # ex) OK: http://localhost:3000/api/v1/users/1
    # ex) NG: http://localhost:3000/api/v1/users/a
    desc "return a user"
    params do
      requires :id, type: Integer
      optional :name, type: String
    end
    get ':id' do
      User.find(params[:id])
    end
  end
end

合わせて読みたい

TextMate2さん、さようなら、SublimeText2さん、こんにちは！

最近になって、急に騒がれ始めた感があるエディタ、SublimeText2ですが、皆さんは既にお試し頂けたでしょうか？

TextMate2の正式リリースまだ？

私は今まで、TextMate2を常用していました。TextMate2と言っても、現時点(2012/07)では、まだα版となっていて、正式にはリリースされていません。日本語入力にも、若干、問題があるし。一体いつ正式リリースされるんだ？と首を長くして待っていたんですが・・・。

SublimeText2が良いだと？

そこに、突如、SublimeText2と言われるエディタが良いらしいという噂が舞い込んで来ました。早速、ダウンロードして少し試してみると、まー、なんというか、これがまた、TextMate2にそっくりなんですよね。もう、これはTextMate2の後継と呼んでもおかしくないです。では、勝手に良かれと思う点について、まとめてみましょう。

めっちゃ軽い

TextMate2も割りと軽かった気がしますが、たまに、グルグル頭を悩ませてフリーズして落ちる事が多々ありました。しかし、SublimeText2はめっちゃ軽いです。動作が軽快と言った方が良いかもしれません。

TextMate2のバンドルが流用可能

TextMate2では、独自のバンドルを追加する事で、機能を拡張してカスタマイズする事が可能でした。SublimeText2では、なんと、TextMate2で利用していたバンドルがそのまま流用可能となっています。あのバンドルや、このバンドルがSublimeText2上でも動作しますので、乗り換えの敷居を低くしていますね。

設定ファイルがJSON

よくある設定ファイルが、なんとJSON形式なんです。これは、つまり、設定ファイルをGitHubに上げておけば、いつでも、どこでも、最新の設定ファイルを複数マシンで共有出来ちゃうって事なんですよね。つーか、設定ファイルがJSONって、あんまり聞かないのでビックリしました。

TextMate2っぽい操作感

TextMate2のファイル検索が凄く好きで愛用していたんですが、全く同一の操作がSublimeText2でも実装されていました。1年以上もTextMate2を愛用していたのに、一瞬にして乗り換えが可能だったのは、きっと、操作感がとても似ていたからだと思います。

For Rails Developers

さて、SublimeText2でRailsの開発をするのに、手っ取り早い方法があります。それは、かの有名なRailsTutorialの著者さんが、なんと、SublimeText2のRails仕様パッケージを提供してくれているんですね。感謝、感謝！

RailsCastsのテーマや、RailsTutorial製のスニペット、その他、オススメのパッケージとかもあったりします。詳しくは、別エントリーで書いていますので、そちらも合わせて参考にしてみて下さい。

まとめ

TextMate2を愛用していたエンジニアは、すんなりとSublimeText2に移行する事が出来るので、まずは、一度お試しあれ。Vimを愛用しているエンジニアの為に、Vimっぽいモードとかありますが、そもそも、Vim使いならば、Vimを使った方が気持ち良いですね、きっと。

SublimeText2 for Rails Developers

SublimeText2は、"事実上のTextMate2"と高い評価を受けているテキストエディタです。
Rails界隈で有名なRailsTutorialでも、オススメのテキストエディタとして取り上げられています。

URL

公式

非公式

参考

英語

日本語

各種設定

コマンドライン

コマンドラインから、SublimeText2を起動する事が出来ます。

設定方法

SublimeText2の起動が出来るように設定します。

$ ln -s "/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl" /usr/local/bin/subl

使用方法

SublimeText2の起動に関するヘルプを参照する事が出来ます。

$ subl -h
Sublime Text 2 Build 2181

Usage: subl [arguments] [files]         edit the given files
   or: subl [arguments] [directories]   open the given directories
   or: subl [arguments] -               edit stdin

Arguments:
  --project <project>: Load the given project
  --command <command>: Run the given command
  -n or --new-window:  Open a new window
  -a or --add:         Add folders to the current window
  -w or --wait:        Wait for the files to be closed before returning
  -b or --background:  Don't activate the application
  -s or --stay:        Keep the application activated after closing the file
  -h or --help:        Show help (this message) and exit
  -v or --version:     Show version and exit

--wait is implied if reading from stdin. Use --stay to not switch back
to the terminal when a file is closed (only relevant if waiting for a file).

Filenames may be given a :line or :line:column suffix to open at a specific
location.

エディタ

常用するエディタとして設定する事が出来ます。

.bash_profile
export EDITOR='subl -w'

テーマ

ここでは、RailsCastsのテーマを適用します。
まず、以下のリンクからテーマファイルをダウンロードします。

設定方法

ダウンロードしたテーマファイルを、SublimeText2のパッケージディレクトリへ配置します。

$ cp ~/Downloads/Railscasts.tmTheme ~/Library/Application\ Support/Sublime\ Text\ 2/Packages/

SublimeText2を起動して、メニューのSublime Text 2 > Preference > Color Scheme > Railscastsを選択します。

パッケージ

SublimeText2は、パッケージという概念があり、簡単に機能を追加する事が出来ます。

Package Control

パッケージを使用する際は、別途、Package Controlを組み込む事によって、パッケージを簡単に管理する事が出来ます。

設定方法

詳細は、以下のリンクを参照して下さい。

SublimeText2を起動して、メニューのView > Show Consoleを選択し、コンソールを表示します。
以下のコマンドをコピペして実行します。

console
import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

最後に、SublimeText2を再起動します。

使用方法

詳細は、以下のリンクを参照して下さい。

パッケージ一覧

Package Controlを使用する事によって、インストールが可能となるパッケージの一覧です。

For Rails Developers

Rails Developerの為に必要となるパッケージを、RailsTutorialにて用意してくれています。

Rails Tutorial Sublime Text Setup

RailsTutorialにて用意してくれているパッケージです。
こちらを参照しながら進めます。

SASS Haml Syntax Highlighting

SASSやHamlのファイルのシンタックスハイライトをサポートするパッケージです。

Rails Tutorial Sublime Text Snippets

RailsTutorialで用意されているスニペットのパッケージです。

Alternative Autocompletion

Tabトリガーによる自動補完を可能にするパッケージです。

TextMate Style ERB Block

コマンド一発でERBファイル内に、"<%= %>"や"<% %>"を挿入する事を可能にするパッケージです。

Sublime Text 2 Ruby Tests

SublimeText2上で、Rubyのテスト実行を可能にするパッケージです。

Settings - User

SublimeText2は、デフォルトで定義された設定を上書きして、独自の設定に変更する事が出来ます。
設定を変更するには、メニューのSublime Text 2 > Preferences > Settings - Userを選択します。
設定ファイル内は、jsonにて記述されています。

Preferences.sublime-settings
{
  "color_scheme": "Packages/Railscasts.tmTheme",
  "font_face": "Osaka",
  "font_size": 16.0,
  "margin": 2,
  "tab_size": 2,
  "translate_tabs_to_spaces": true,
  "word_wrap": false,
  "highlight_line": true
}

使用方法

起動

プロジェクトのルートディレクトリにて、以下のコマンドを実行します。
画面左側にプロジェクトツリーが表示された状態で、SublimeText2が起動します。

$ subl .

キーバインド

基本

Move to Start

カーソル位置を行先頭に移動する。
^ + A

Move to End

カーソル位置を行末に移動する。
^ + E

Goto

Goto Anything...

プロジェクトツリー配下の任意のファイルへ移動する。
⌘ + P or ⌘ + T

Goto Line...

行番号で指定した行へカーソル位置を移動する。
^ + G

View

Side Bar > Hide Side Bar

プロジェクトツリーを開閉する。
⌘ + K, ⌘ + B

Layout > Columns: 2

ウィンドウを縦方向に2分割する。
⌥ + ⌘ + 2

Focus Group > Group: 1

グループ1のウィンドウをアクティブにする。
^ + 1

Focus Group > Group: 2

グループ2のウィンドウをアクティブにする。
^ + 2

Edit

Line > Indent

選択状態のコードを右にインデントする。
⌘ + [

Line > Unindent

選択状態のコードを左へアンインデントする。
⌘ + ]

Text > Delete to End

カーソル位置より後ろの文字全てを削除する。
^ + K

Selection

Expanded Selection to Line

カーソル位置のある行を選択状態にする。
⌘ + L

Tools

Command Palette...

コマンドパレットを開いて、任意のコマンドを実行する。
⇧ + ⌘ + P

Assets.github.com%2fimages%2fgravatars%2fgravatar-140
shu_0115

ヘルプ参照のコマンド、「subl --h」←これ合ってます？
「subl -h」か「subl --help」じゃないとダメなような気が。。。

Assets.github.com%2fimages%2fgravatars%2fgravatar-140
fakestarbaby

ご指摘ありがとうございます。
修正を反映しました！

OmniAuth

OmniAuth

様々なプロバイダーのログイン認証を手軽に実現するプラグイン。

公式リポジトリ

https://github.com/intridea/omniauth

公式ドキュメント

https://github.com/intridea/omniauth/wiki

The Ruby Toolbox

https://www.ruby-toolbox.com/projects/omniauth

参考ドキュメント

簡単なOmniAuth - ASCIIcasts
Rails3.2.3 + omniauth-twitter New App - I can't change the world.

インストール

For GitHub

Gemfileに、omniauth、omniauth-githubを記述する。

Gemfile
gem 'omniauth'
gem 'omniauth-github'

インストールする。

$ bundle install

初期設定

For GitHub

設定ファイルを新規作成する。
CLIENT_ID、SECRETには、GitHubで登録したアプリケーションのClient ID、Secretを設定する。

config/initializers/omniauth.rb
Rails.application.config.middleware.use OmniAuth::Builder do
  provider :github, "CLIENT_ID", "SECRET"
end

セッションコントローラを新規作成する。

rails g controller sessions
      create  app/controllers/sessions_controller.rb
      invoke  erb
      create    app/views/sessions
      invoke  helper
      create    app/helpers/sessions_helper.rb
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/sessions.js.coffee
      invoke    scss
      create      app/assets/stylesheets/sessions.css.scss
app/controllers/sessions_controller.rb
class SessionsController < ApplicationController
  def callback
    auth = request.env["omniauth.auth"]
    user = User.find_by_provider_and_uid(auth["provider"], auth["uid"]) || User.create_with_omniauth(auth)
    session[:user_id] = user.id
    redirect_to root_path
  end

  def destroy
    reset_session
    redirect_to root_path
  end
end

ルーティングを追加する。

config/routes.rb
match "/auth/:provider/callback" => "sessions#callback"
match "/signout" => "sessions#destroy"

Userモデルを新規作成する。

$ rails generate model user
      invoke  active_record
      create    db/migrate/20120418060936_create_users.rb
      create    app/models/user.rb
db/migrate/20120418060936_create_users.rb
class CreateUsers < ActiveRecord::Migration
  def change
    create_table :users do |t|
      t.string :provider, :null => false
      t.string :uid, :null => false
      t.string :name, :null => false
      t.string :nickname
      t.string :image
      t.string :token

      t.timestamps
    end
  end
end
app/models/user.rb
class User < ActiveRecord::Base
  def self.create_with_omniauth(auth)
    create! do |user|
      user.provider = auth["provider"]
      user.uid = auth["uid"]
      user.name = auth["info"]["name"]
      user.nickname = auth["info"]["nickname"]
      user.image = auth["extra"]["raw_info"]["avatar_url"]
      user.token = auth["credentials"]["token"]
    end
  end
end

$ rake db:migrate
==  CreateUsers: migrating ====================================================
-- create_table(:users)
   -> 0.0021s
==  CreateUsers: migrated (0.0022s) ===========================================

ヘルパーメソッドを追加する。

app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  protect_from_forgery

  helper_method :current_user

  private

  def current_user
    @current_user ||= User.find(session[:user_id]) if session[:user_id]
  end
end

ビューにログイン、ログアウトのリンクを追加する。

Ruby
<% if current_user %>
  <%= link_to "Sign out", signout_path 
<% else %>
  <%= link_to "Sign in with GitHub", "/>
<% end %>

OmniAuthで取得可能な情報

For GitHub

OmniAuthで取得出来る情報は以下の通り。

{"provider"=>"github",
 "uid"=>572020,
 "info"=>
  {"nickname"=>"FakeStarBaby",
   "email"=>nil,
   "name"=>"Yoshinori Hirasawa",
   "urls"=>
    {"GitHub"=>"https://github.com/FakeStarBaby",
     "Blog"=>"http://twitter.com/#!/fakestarbaby"}},
 "credentials"=>
  {"token"=>"1234567890123456789012345678901234567890", "expires"=>false},
 "extra"=>
  {"raw_info"=>
    {"public_gists"=>10,
     "type"=>"User",
     "blog"=>"http://twitter.com/#!/fakestarbaby",
     "location"=>"Tokyo",
     "html_url"=>"https://github.com/FakeStarBaby",
     "created_at"=>"2011-01-19T05:08:56Z",
     "email"=>nil,
     "public_repos"=>51,
     "followers"=>16,
     "company"=>"Japan",
     "hireable"=>false,
     "bio"=>nil,
     "url"=>"https://api.github.com/users/FakeStarBaby",
     "following"=>69,
     "login"=>"FakeStarBaby",
     "name"=>"Yoshinori Hirasawa",
     "gravatar_id"=>"0e3e4d3a8e69ccae1e9b9dcc219f3f1f",
     "avatar_url"=>
      "https://secure.gravatar.com/avatar/0e3e4d3a8e69ccae1e9b9dcc219f3f1f?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png",
     "id"=>572020}}}

twitter-bootstrap-rails

twitter-bootstrap-rails

Twitter Bootstrapを簡単に導入出来るプラグイン。

公式リポジトリ

https://github.com/seyhunak/twitter-bootstrap-rails

公式ドキュメント

https://github.com/seyhunak/twitter-bootstrap-rails/wiki

The Ruby Toolbox

https://www.ruby-toolbox.com/projects/twitter-bootstrap-rails

参考ドキュメント

twitter bootstrap railsを使ったら職が見つかり彼女も出来て背も3センチ伸びました。 - ppworks blog
Rails3.1.3 + twitter-bootstrap-rails - I can't change the world.

インストール

Gemfileにtwitter-bootstrap-railsを記述する。

Gemfile
gem 'twitter-bootstrap-rails'

インストールする。

$ bundle install
$ rails g bootstrap:install
      insert  app/assets/javascripts/application.js
      create  app/assets/javascripts/bootstrap.js.coffee
      create  app/assets/stylesheets/bootstrap_and_overrides.css.less
        gsub  app/assets/stylesheets/application.css
        gsub  app/assets/stylesheets/application.css

利用方法

レイアウトの雛形を自動生成

固定レイアウト

$ rails g bootstrap:layout application fixed
    conflict  app/views/layouts/application.html.erb
Overwrite app/views/layouts/application.html.erb? (enter "h" for help) [Ynaqdh] Y
       force  app/views/layouts/application.html.erb

可変レイアウト

$ rails g bootstrap:layout application fluid
    conflict  app/views/layouts/application.html.erb
Overwrite app/views/layouts/application.html.erb? (enter "h" for help) [Ynaqdh] Y
       force  app/views/layouts/application.html.erb
Assets.github.com%2fimages%2fgravatars%2fgravatar-140
ppworks

tag bootstrapの方が良いかも知れません。

Assets.github.com%2fimages%2fgravatars%2fgravatar-140
fakestarbaby

tag bootstrapとは？

Assets.github.com%2fimages%2fgravatars%2fgravatar-140
ppworks

あ、記事のtagがTwitterBootstrapなのをbootstrapにした方がひっかかるかも？

Assets.github.com%2fimages%2fgravatars%2fgravatar-140
fakestarbaby

なるほど、Kobito側から投稿したから、既存タグのサジェストが効かなくて、
既にそのタグがある事に気付かなかったわ。

後で変更しておきます。
あざっす！

Assets.github.com%2fimages%2fgravatars%2fgravatar-140
ppworks

たしかにタグのサジェスト欲しいね、ですね。

Assets.github.com%2fimages%2fgravatars%2fgravatar-140
fakestarbaby

今更ながら、このコメントって、実はメモと直接は関係無いから、
ここにコメントとして残るのも何か違う気がしているｗ

Octokit

Octokit

Octokitは、GitHub APIに手軽にアクセスするラッパープラグインです。

公式リポジトリ

公式ドキュメント

The Ruby Toolbox

参考ドキュメント

インストール

Gemfileにoctokitを記述する。

Gemfile
gem 'octokit'

インストールする。

$ bundle install

利用方法

ユーザー情報を取得する。

1.9.2p318 :001 > user = Octokit.user("fakestarbaby")

{"followers"=>15,
 "type"=>"User",
 "blog"=>"http://twitter.com/#!/fakestarbaby",
 "created_at"=>"2011-01-19T05:08:56Z",
 "email"=>nil,
 "bio"=>nil,
 "company"=>"Japan",
 "html_url"=>"https://github.com/FakeStarBaby",
 "avatar_url"=>
  "https://secure.gravatar.com/avatar/0e3e4d3a8e69ccae1e9b9dcc219f3f1f?d=https://a248.e.akamai.net/assets.github.com/images/gravatars/gravatar-140.png",
 "url"=>"https://api.github.com/users/FakeStarBaby",
 "public_gists"=>10,
 "following"=>69,
 "login"=>"FakeStarBaby",
 "public_repos"=>52,
 "gravatar_id"=>"0e3e4d3a8e69ccae1e9b9dcc219f3f1f",
 "name"=>"Yoshinori Hirasawa",
 "location"=>"Tokyo",
 "id"=>572020,
 "hireable"=>false}

ユーザーインスタンスを取得する。

  • パスワード認証の場合
1.9.2p318 :002 > user = Octokit::Client.new(:login => "fakestarbaby", :password => "password")
  • OAuth認証の場合
1.9.2p318 :002 > user = Octokit::Client.new(:login => "fakestarbaby", :oauth_token => "token")

リポジトリ情報を取得する。

1.9.2p318 :003 > user.repos.first

{"open_issues"=>0,
 "git_url"=>"git://github.com/FakeStarBaby/sample-octokit.git",
 "svn_url"=>"https://github.com/FakeStarBaby/sample-octokit",
 "pushed_at"=>"2012-04-17T00:15:51Z",
 "created_at"=>"2012-04-17T00:07:14Z",
 "description"=>"octokitのサンプルアプリケーションです。",
 "html_url"=>"https://github.com/FakeStarBaby/sample-octokit",
 "has_downloads"=>true,
 "watchers"=>1,
 "clone_url"=>"https://github.com/FakeStarBaby/sample-octokit.git",
 "url"=>"https://api.github.com/repos/FakeStarBaby/sample-octokit",
 "fork"=>false,
 "size"=>116,
 "homepage"=>"",
 "private"=>false,
 "has_wiki"=>true,
 "has_issues"=>true,
 "updated_at"=>"2012-04-17T00:15:51Z",
 "owner"=>
  {"avatar_url"=>
    "https://secure.gravatar.com/avatar/0e3e4d3a8e69ccae1e9b9dcc219f3f1f?d=https://a248.e.akamai.net/assets.github.com/images/gravatars/gravatar-140.png",
   "url"=>"https://api.github.com/users/FakeStarBaby",
   "login"=>"FakeStarBaby",
   "gravatar_id"=>"0e3e4d3a8e69ccae1e9b9dcc219f3f1f",
   "id"=>572020},
 "name"=>"sample-octokit",
 "permissions"=>{"admin"=>true, "pull"=>true, "push"=>true},
 "mirror_url"=>nil,
 "forks"=>1,
 "ssh_url"=>"git@github.com:FakeStarBaby/sample-octokit.git",
 "id"=>4047257,
 "language"=>"Ruby"}

コミット情報を取得する。

1.9.2p318 :004 > user.list_commits("fakestarbaby/sample-octokit").first

{"commit"=>
  {"url"=>
    "https://api.github.com/repos/FakeStarBaby/sample-octokit/git/commits/ee266e50537b9f27ad4b3ecb39204feec41a5540",
   "message"=>"トップページを新規作成。",
   "author"=>
    {"date"=>"2012-04-16T17:15:41-07:00",
     "name"=>"fakestarbaby",
     "email"=>"fakestarbaby@gmail.com"},
   "committer"=>
    {"date"=>"2012-04-16T17:15:41-07:00",
     "name"=>"fakestarbaby",
     "email"=>"fakestarbaby@gmail.com"},
   "tree"=>
    {"url"=>
      "https://api.github.com/repos/FakeStarBaby/sample-octokit/git/trees/0f1f2ac3e348046a86e46f49415d2834aa4cea0d",
     "sha"=>"0f1f2ac3e348046a86e46f49415d2834aa4cea0d"}},
 "parents"=>
  [{"url"=>
     "https://api.github.com/repos/FakeStarBaby/sample-octokit/commits/b83d80b1f6036565afe155df591b1ad27d54b9c7",
    "sha"=>"b83d80b1f6036565afe155df591b1ad27d54b9c7"}],
 "url"=>
  "https://api.github.com/repos/FakeStarBaby/sample-octokit/commits/ee266e50537b9f27ad4b3ecb39204feec41a5540",
 "sha"=>"ee266e50537b9f27ad4b3ecb39204feec41a5540",
 "author"=>
  {"url"=>"https://api.github.com/users/FakeStarBaby",
   "login"=>"FakeStarBaby",
   "gravatar_id"=>"0e3e4d3a8e69ccae1e9b9dcc219f3f1f",
   "avatar_url"=>
    "https://secure.gravatar.com/avatar/0e3e4d3a8e69ccae1e9b9dcc219f3f1f?d=https://a248.e.akamai.net/assets.github.com/images/gravatars/gravatar-140.png",
   "id"=>572020},
 "committer"=>
  {"url"=>"https://api.github.com/users/FakeStarBaby",
   "login"=>"FakeStarBaby",
   "gravatar_id"=>"0e3e4d3a8e69ccae1e9b9dcc219f3f1f",
   "avatar_url"=>
    "https://secure.gravatar.com/avatar/0e3e4d3a8e69ccae1e9b9dcc219f3f1f?d=https://a248.e.akamai.net/assets.github.com/images/gravatars/gravatar-140.png",
   "id"=>572020}}

Octopressのサイドバーにタグリストやタグクラウドを表示させよう！

Octopressの記事が大量になってくると、タグによるアクセスが欲しくなってきますよね。しかし、Octopressには、デフォルトでタグリストやタグクラウドを表示させる仕組みはありません。

Octopressで、タグリストやタグクラウドを表示させるプラグイン

@tokkonopapaさんが提供しているプラグインを利用します。
このプラグインの詳細は、記事がありますのでそちらを参照してみて下さい。

プラグインを組み込む

プラグインを組み込むと言っても、単純にファイルコピーをするだけです。
まずは、GitHubからプラグインをダウンロードします。

$ git clone git://github.com/tokkonopapa/octopress-tagcloud.git
Cloning into octopress-tagcloud...
remote: Counting objects: 31, done.
remote: Compressing objects: 100% (17/17), done.
remote: Total 31 (delta 6), reused 31 (delta 6)
Receiving objects: 100% (31/31), 4.49 KiB, done.
Resolving deltas: 100% (6/6), done.

次に、必要となるファイルをコピーします。

$ cp plugins/tag_cloud.rb ~/Projects/rails/fakestarbaby.github.com/plugins/tag_cloud.rb 
$ cp source/_includes/custom/asides/* ~/Projects/rails/fakestarbaby.github.com/source/_includes/custom/asides/

タグリストやタグクラウドに対応するHTMLを編集

必要に応じて編集をしましょう。

こちらは、タグリストに対応するHTMLです。

source/_includes/custom/asides/category_list.html
<section>
  <h1>Categories</h1>
  <ul id="category-list">{% category_list counter:true %}</ul>
</section>

こちらは、タグクラウドに対応するHTMLです。

source/_includes/custom/asides/tag_cloud.html
<section>
  <h1>Tag Cloud</h1>
  <span id="tag-cloud">{% tag_cloud counter:true %}</span>
</section>

counter:trueでタグ件数を表示し、counter:falseでタグ件数を非表示にします。

サイドバーに表示

サイドバーにタグリストやタグクラウドを表示させる為、_config.ymlに追記します。
ここでは、タグクラウドのみ表示させるように追記してみました。

_config.yml
# list each of the sidebar modules you want to include, in the order you want them to appear.
# To add custom asides, create files in /source/_includes/custom/asides/ and add them to the list like 'custom/asides/custom_aside_name.html'
default_asides: [custom/asides/about.html, asides/recent_posts.html, custom/asides/tag_cloud.html, asides/github.html, asides/twitter.html, asides/delicious.html, asides/pinboard.html, asides/googleplus.html]

以上で、サイドバーにタグリストやタグクラウドを表示させる事が可能です。

Octopressでサイドバーに簡易プロフィールを表示させよう！

Octopressでは、サイドバーに表示される情報をカスタマイズする事が可能です。
ここでは、簡易プロフィールを表示させてみましょう。

簡易プロフィールを作成

実は、デフォルトで簡易プロフィール用のHTMLは作成されています。
このファイルを好きなように変更すればオッケーです。

source/_includes/custom/asides/about.html
<section>
  <h1>About Me</h1>
  <p>A little something about me.</p>
</section>

設定ファイルを編集

新しく追加したいサイドバーのHTML情報は、_config.ymlに追記します。
ここでは、サイドバーの先頭に簡易プロフィールを表示させたいので、先頭に追記しています。

_config.yml
# list each of the sidebar modules you want to include, in the order you want them to appear.
# To add custom asides, create files in /source/_includes/custom/asides/ and add them to the list like 'custom/asides/custom_aside_name.html'
default_asides: [custom/asides/about.html, asides/recent_posts.html, asides/github.html, asides/twitter.html, asides/delicious.html, asides/pinboard.html, asides/googleplus.html]

これだけで、サイドバーに簡易プロフィールを表示させる事が出来ます。