Hatena::ブログ(Diary)

@camelmasaの開発日記 このページをアンテナに追加 RSSフィード

Githubで活動しています。

2014-01-20

クローズドな環境でのナレッジ共有ツールを自作しているという話 -> 現在プライベートにしてます。

| 09:06

[追記]

現段階では前職に迷惑がかかる恐れがあったので非公開にしました。

Starをして下さったみなさんありがとうございました。

全く別のプロダクトになったと思った時再度公開したいと思います。


[以下は元の記事]

久しぶりに記事を書いたので現状を報告すると、先日の1月10日付でIncrementsを退社しました。

今はインディーズゲームして遊んでます。PZFTL楽しいです。


そんなことはどうでも良くて。


先日から数人で作業をするため、PivoralTracker + HipChatで情報共有していました。

しかし、それらのツールだけだと整理された情報の共有が出来ないので、Qiita:Teamで情報共有しようと思ったのですが、"wiki"と"スマホで閲覧"したかったので自作してOSSにしました。


f:id:camelmasa:20140120085631j:image


camelmsa/connect


機能について

実装済みの機能は以下です。

  • wiki機能
  • ブログ機能
  • markdown対応
  • 絵文字対応
  • 変更履歴機能
  • 通知設定(HipChat連携)
  • レスポンシブ

レスポンシブにすることでスマホでも情報を読めるようになるのはやっぱり便利。

Heroku, Sqaleで動作するのも確認済みです。

レスポンス速度が早いSqaleでの運用がおすすめです。


技術的な話

Rails 4.0.2 + Ruby 2.1で開発&動作しています。

何の機能を実装するのも基本的にgemがあるものはそれらを用いました。

そのためcontroller, modelがかなり薄くなってます。複雑な事をしていないという方が大きいかも。

(定番ですがdevise, devise_invitableはログイン周りの実装を大分楽にしてくれます)

デザインはbootstrap3を使いました。bootstrapを用いてもデザインは難しい。

markdown parserにkramdownを使用してましたが、ドキュメントが豊富ということもありredcarpetに変更しました。

redcarpetは昨年作者がメンテナーを募集していましたが、無事メンテナーも見つかり引き続き開発が続いてます。


これから

既に自分で使い始めていて使いにくい箇所を最優先で改善していこうと思います。また並行して下記の作業していきたい。

  • 検索機能
    • 現状実装していなくて不便
  • markdown preview
    • Qiita:Teamと比べるとまだまだ書きにくい
    • リアルタイムプレビューしたいが開発効率とのバランスを考えたい
  • Vagrant box もしくは Docker base imageを作成
    • 社内で動かしてみたいという声を頂いたため
    • 技術的に強く興味がある
  • 英語対応
    • view側で日本語を使用していないので、localeファイルを追加で英語対応はできる
  • gemによるプラグイン
    • これはまだ先の話
    • コア部分の実装を小さくし、欲しい機能だけgemで追加する仕組みにしたい

GitHubのStarを頂けたらモチベーションが上がり開発が加速しますので是非ともStarをお願いします :D

camelmsa/connect

issue・PR頂けると嬉しいです!

2012-12-11

Subtle Patternsで提供されている画像を簡単に扱えるgem subtlepatternsを作成しました。

| 03:03

id:ken_c_loさんが作成された”ズルいデザインテクニック”の中で紹介されていたSubtle Patternsが仕事でもプライベートでも使用していて、便利だなーと思ってたので、もっと簡単に利用出来る様gemにしました。

参考 http://d.hatena.ne.jp/ken_c_lo/20121115/1353004699


github

https://github.com/camelmasa/subtlepatterns


使い方

githubのREADMEに書いてありますがこちらにも記します。


Railsへのインストール方法

Gemfileに追加

gem "subtlepatterns"

コマンドを実行

bundle install

application.cssに追加

*= require subtlepatterns/prefix

CSSのクラス名にprefix(subtlepattern)が要らない場合

*= require subtlepatterns

これでインストール完了です。

使用方法

後はHTML内で指定していきます。

<body class="subtlepattern_xv">

<div class="subtlepattern_zigzag">

と指定します。

すると、background-imageにSubtle Patternsの画像が表示されます。


CSSのクラス名一覧はgithubのREADMEを参照してください。

https://github.com/camelmasa/subtlepatterns

2012-10-05

自社サービスの機能を簡単にAPIで提供出来てしまう!gem doorkeeperが凄い。

| 02:55

自社サービスにAPIを実装する事ってあまりないですよね。

kamadoのプロダクトも現在はAPIは公開してません。

もし提供するのであれば、簡易的な方法ですが、ユーザーテーブルにtokenカラムを追加して、API用のルーティングを作成する…という方法が考えられると思います。

しかし、その実装時間でより良いAPIが実装出来るとしたら素晴らしいですよね。

そこで紹介したいのがgem doorkeeperです。

日本語の記事が見当たらなかったので記事にしました。

github

https://github.com/applicake/doorkeeper


gem doorkeeperってどんな機能があるのか?

簡単に説明すると、

・アプリケーションの管理機能

・アプリケーションの承認管理

・スコープの設定

いってしまえば、Facebook API(に近い実装)そのまま実装出来ます。

しかもOAuth2.0を利用できます! ← 超重要


実際にやってみる

Gemfileに追加

gem 'doorkeeper', '~> 0.4.2'

コマンドの実行

bundle install
rails generate doorkeeper:install
rails generate doorkeeper:migration
rake db:migrate

これでconfig/initializers/doorkeeper.rbが作成され、DBがマイグレートされます。


次にroutesに追加

mount Doorkeeper::Engine => '/oauth'

以下がroutesに追加されます。

Routes for Doorkeeper::Engine:
          authorization GET    /authorize(.:format)                   doorkeeper/authorizations#new
          authorization POST   /authorize(.:format)                   doorkeeper/authorizations#create
          authorization DELETE /authorize(.:format)                   doorkeeper/authorizations#destroy
                  token POST   /token(.:format)                       doorkeeper/tokens#create
           applications GET    /applications(.:format)                doorkeeper/applications#index
                        POST   /applications(.:format)                doorkeeper/applications#create
        new_application GET    /applications/new(.:format)            doorkeeper/applications#new
       edit_application GET    /applications/:id/edit(.:format)       doorkeeper/applications#edit
            application GET    /applications/:id(.:format)            doorkeeper/applications#show
                        PUT    /applications/:id(.:format)            doorkeeper/applications#update
                        DELETE /applications/:id(.:format)            doorkeeper/applications#destroy
authorized_applications GET    /authorized_applications(.:format)     doorkeeper/authorized_applications#index
 authorized_application DELETE /authorized_applications/:id(.:format) doorkeeper/authorized_applications#destroy

config/initializers/doorkeeper.rbの編集。

認証システムにdeviseを使用している場合下記の様にする。

resource_owner_authenticator do |routes|
  current_user || warden.authenticate!(:scope => :user)
end

コントローラーの作成

app/controllers/api/v1/users_controller.rb

class Api::V1::UsersController < ApplicationController
  doorkeeper_for :all
  before_filter :validate_token
  before_filter :set_parameters
  skip_before_filter :verify_authenticity_token # allow CSRF

  def index
    render json: current_user
  end

  def validate_token
    return head(401) unless doorkeeper_token
  end

  def set_parameters
    sign_in 'user', User.find(doorkeeper_token.resource_owner_id)
  end

end

これで実装完了です。

画面で確認してみます。


OAuthプロバイダー側の画面遷移確認

/oauth/applicationsでアプリケーションの作成を行えます。


アプリケーションを作成

f:id:camelmasa:20121006020930p:image

f:id:camelmasa:20121006020931p:image

f:id:camelmasa:20121006020932p:image

f:id:camelmasa:20121006020933p:image

出来てますねー。


OAuthクライアント側の実行確認

実際にクライアント側から確認してみます。

下記にexampleがあるので確認に便利です。

https://github.com/applicake/doorkeeper-devise-client

f:id:camelmasa:20121006020935p:image

f:id:camelmasa:20121006020934p:image

こちらも出来てますね!



OAuthクライアント側(CUI)の実行確認

CUIからも確認してみます。

リダイレクトURL作成
require 'oauth2'

#clientの作成
client = OAuth2::Client.new('c5e0e923b1a257029f22dfec34056c4908f07aae67d2b00ec42d2c6e5a131637', '7f90a491763d8fe5b0419b7bc0d52c762cc2000e8d892b57f814e6aef23541c4', :site => 'http://localhost:5000')

# 認証へのリダイレクトURL作成
p client.auth_code.authorize_url(:redirect_uri => 'http://localhost:3000/users/auth/doorkeeper/callback')

#=> "http://localhost:5000/oauth/authorize?response_type=code&client_id=c5e0e923b1a257029f22dfec34056c4908f07aae67d2b00ec42d2c6e5a131637&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fusers%2Fauth%2Fdoorkeeper%2Fcallback"

トークンの取得
# トークンの取得
p client.auth_code.get_token('90cfef8de3a3c5712c6a95acd9e48f7f5355265ec462378a58c56748fd743932', :redirect_uri => 'http://localhost:3000/users/auth/doorkeeper/callback').token

#=> "38c5fcdb2d1c90d63593859c367d999049ba084817a688347e7664b24dcfed10"

API実行
p OAuth2::AccessToken.new(client, "38c5fcdb2d1c90d63593859c367d999049ba084817a688347e7664b24dcfed10").get('/api/v1/users').body

#=> {...}

承認済みアプリケーションの管理

承認済みのアプリケーションを表示するviewが用意されているのも気がきいています。

f:id:camelmasa:20121006033119p:image


OAuthでAPIが提供出来るメリット

OAuthで通信出来るメリットって色々あると思うのですが、既に存在するgem oauth2等を利用できる事でAPIを実行するためのパッケージを簡単に実装出来るのが素晴らしいですね。


詰まったら

exampleがあります。

https://github.com/applicake/doorkeeper/wiki/Example-Applications


まとめ

ざっと試してみましたが、gem doorkeeperでこんなに簡単にAPIが実装出来るなんて素晴らしいですね。



[PR]Spreeの情報を集めています。

ECを持ちたい方、仕事でECを使いたい方向けのコミュニティサイトです。

このサイトでは世界で最も使用されているECの1つであるSpreeについての情報を提供しています。

http://spreecommerce.jp/