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-11-14

Twitter Bootstrapにcompass, Sassy Buttons, zurui-sass-railsを追加する手順。

| 00:11

今週に入ってガリガリとHTMLCSSを書く事がありました。

折角、Railsでシステムを開発しているという事もあるので、効率良くCSSを書く方法を調べてみました。

調査結果

  • Twitter Bootstrapの色味を変えるだけでそこそこのデザインが出来る。
  • SCSSよりSASSがイケてる。
  • SASSを使うならcompassを使うと効率的にSASSを扱える。
  • Sassy Buttonsを使えばTwitter Bootstrapぽいボタンの色違いが簡単に作成出来る。
  • zurui-sass-railsを使えばズルイデザインが出来る。

上記の事が分かったが、Twitter BootstrapはLESSで構築されていて、SASSやらcompassやらを同時にprecompile出来るのか分からなかったので、実際に実装してみました。


実際にやってみた

Railsのバージョンは3.2.9。

group :assetsに下記を追加

  gem 'less-rails'
  gem 'therubyracer', :platforms => :ruby
  gem 'twitter-bootstrap-rails'
  gem 'compass-rails'
  gem 'sassy-buttons'
  gem 'zurui-sass-rails'

gemインストール

bundle install

Twitter Bootstrapのインストール

rails g bootstrap:layout application fluid
rails g bootstrap:install

compassのインストール

bundle exec compass init --syntax sass

Sassy Buttonsのインストール

bundle exec compass install sassy-buttons

後は適当にxxx.css.sassを作成

@import compass/utilities
@import compass/css3
@import sassy-buttons
@import zurui-sass
  
.example
  +zurui-box-inner
  height: 200px
  width: 100%
  .content, .sidebar
    padding: 20px
  .content
    +box-flex(4)
  .sidebar
    +box-flex(1)
    margin-right: 1px 

.sassy-button
  +sassy-button("simple", 5px, 1.1em, #ffd71a, #ffaa1a)

viewを作成して動作が確認出来ました。


まとめ

sprocketsの機能でapplication.css記述されていればLESS、SCSS、SASSなんでもCSSにしてくれて便利。

Twitter BootstrapのSASS版もあるが、なるべく本家のアップデートに合わせたいのでLESSで良いという考えです。



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

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

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

http://spreecommerce.jp/