エコシステム

http://event.makewith.jp/ のサービスを作ったときに使った各種ツールを紹介します。 Rails、各種ホスティングサービスの恩恵をうけ、なんとか形にすることはできました。これからサービスを作ろうと考えている方の参考になればうれしいです。

ミドルウェア、インフラ周り

  • Ruby
  • Rails4
  • Heroku(+unicorn
  • AWS(RDS、S3)
  • SendGrid
  • CircleCI

を使用しています。herokuは、マニュアルがしっかり書かれているので設定周りで困ったことはありませんでした。heroku最高!!メール送信ではSendGridをフリープランで使用しています。一日200通の制限がありますが、当面は大丈夫そうです。作った後の運用も踏まえ、自分で出来ること、出来ないことを一度考えてから、技術選定をしてあげるとよい思います。

デザイン・フロントエンド関連

デザイナーではないので、一番苦しいフェーズでした。WebフォントやCSSフレームワーク、 フリーアイコン、勉強会でとった写真の素材を活用しなんとかしましたが、一番時間がかかったフェーズです。

WEBフォント(google

https://www.google.com/fonts

フリーアイコン(Font Awesome)

https://github.com/bokmann/font-awesome-rails

アイコン表示のヘルパーを用意してくれます。

CSSフレームワーク(bootstrap)

今回はrails_layoutを使って、大枠のレイアウトを作ってからカスタマイズしていきました。 また、 http://bootsnipp.com/ にてスニペットと本家のマニュアルを参考にしながら、作りたいレイアウトのサンプルをピックアップし当て込んでいきました。bootstrapつらいですが、こういった所は、やはり利点と感じています。

※その他参考にしたサイト
http://railsapps.github.io/twitter-bootstrap-rails.html

pjax

https://github.com/kossnocorp/jquery.turbolinks

rails4からturbolinksがデフォルトで導入されていますが、onloadイベントが発火されない問題があるため、上記Gemをいれて解消しています。その他問題がいくつかあるようなのですが、今のところはそのまま利用しています。

ページ更新の進捗

https://github.com/caarlos0/nprogress-rails

youtubeライクにページ更新の進捗が表示されます。(ページ上部に表示される、ニョキニョキー、クルクルクルーのところです。)herokuなのでページ表示に少し時間かかる、また、pjaxの遷移だと更新を待っている間に少し違和感が出てしまうため、更新の進捗状況を表示した方がよさそうです。

フォーム

https://github.com/plataformatec/simple_form

イベント新規作成画面などで利用しています。

入力補助

日付

https://github.com/Nerian/bootstrap-datepicker-rails

時刻

https://github.com/tispratik/bootstrap-timepicker-rails

イベント新規作成画面で使っています。カレンダーからの日付入力、時間のところは上下キーを押すと時刻が入ります。

機能関連 ・認証

普通のログインと、facebook認証で使っています。https://github.com/plataformatec/devise/wiki/OmniAuth:-Overview deviseでの連携の仕方が記載してあるので、参考にしてみてください。

ページング

https://github.com/amatsuda/kaminari

bootstrapのviewを作成するジェネレーターも用意されています。

マークダウン表示

https://github.com/vmg/redcarpet

イベント登録時に記載する内容はmarkdownの整形ルールを採用しています。

タグ

https://github.com/mbleigh/acts-as-taggable-on

イベントにつけるタグはこれを利用しています。

画像アップロード

https://github.com/thoughtbot/paperclip

s3へアップロードするインターフェースも用意されています。 が、今回herokuを使って運用しているため、画像アップロードする際にかなり時間がかかってしまいます。http://qiita.com/anoworl/items/35e75a20e70d2ad0f658 に書いている通り、herokuの場合はダイレクトでs3にアップロードする仕組みを作ってあげたほうがよいと思います。

URL

https://github.com/norman/friendly_id

カテゴリ別イベント一覧ページのURLで利用しています。 ユーザー名でアクセスすると、その人の情報を表示させるような利用シーンが一般的だと思います。

テスト・デバック関連

group :test do 
  gem 'spring-commands-rspec' 
  gem 'database_cleaner' 
  gem 'launchy' 
  gem 'factory_girl_rails' 
  gem 'simplecov' 
  gem 'simplecov-rcov' 
  gem 'coveralls', require: false 
  gem 'capybara' 
  gem 'rspec-parameterized', git: 'git@github.com:tomykaira/rspec-parameterized.git' 
end 

group :development, :test do 
  gem 'pry-rails' 
  gem 'pry-doc' 
  gem 'pry-remote' 
  gem 'rspec-rails' 
  gem 'mailcatcher' 
  gem 'marginalia' 
end 

紹介がめんどくさくなってきたので、その部分のgem貼ります。各種リードミーをよんでみてください。

その他

デコレーター

https://github.com/amatsuda/active_decorator

viewがすっきりする

初期データの投入

https://github.com/mbleigh/seed-fu

どーん

環境変数管理

https://github.com/laserlemon/figaro

ヤムラー

パフォーマンス、死活監視

http://newrelic.com/

ちぇけらちょ

そんじゃーね!1

一人開発を進める上でたった一つの大事なこと

個人の開発にてサービスを作った時に、よかった仕組みや、なぜ作り続けて形にすることができたのか、そんな振り返りをこめてプレゼンテーションに記してみた。名前付け、そして、一つ一つの言葉を考えることも本当に大変だったし、プレゼンに書いている通り決済を通すのも大変だった。決済に関しては、日々プロトタイプを見せて、完成した時に「決済したらリリースできるんだ!」って言ってなんとか通すことができた。特に技術で解決する特別な機能はない、けど、面白そう!と思えるイベントを増やして、物作りを始めるきっかけをつくることができたらうれしいなと思います。また、あらためて個人でサービスを運営している人だったり、ツールを作っている人だったり、その他創作活動をしている全ての人に敬意を払うとともに、引き続きがんばっていきたいと思います。

作る会のサポーターを募集しています!!1

作る会の開催にあたって

  • 参加される方をサポート頂けるエンジニアの方
  • 開催場所をご提供頂ける方
  • 作ろう会を開催して頂ける方

そんな、サポーターの方を募集しております!

こんな会をやっています

自身にて作りたいテーマを一つ決め、みんなでもくもく作業を行う会を開いています。初心者から第一線で活躍されているエンジニアの方、デザイナーの方、異業種の方、などなど、参加されている方はほんと様々な方ばかりですが、参加者自身で手を動かして作ることが前提の会となっています。「〜を作ろう会」という名前からかITの勉強会に初参加!という方にも参加頂いており、最初はちょっとふざけすぎかな...なんて思っていましたが、今は愛着を持ってよい感じです。最近では @yandoさんの協力もあって、EngineYardさんの素敵なオフィスにて毎月1回、本会を行わせて頂いております。いつもお忙しいのに、ほんと感謝してもしきれない感じで…お菓子をいつも食べきれず溜め込んでしまいすいません!

会を始めた経緯

一昔前に、社会人対象に初心者向けのプログラミング講師(有料)を週末に行っていたことがありました。講義を受講される方は、作りたい物が決まっていて、その上でプログラミング言語を勉強しに来て頂ける方がほとんどです。また、個人でお金をかけて勉強に来て頂いてる方なので、モチベーションが非常に高く、講義後の質問もアグレッシブ!な方たちばかりだったことを覚えています。とはいえ、短期間の講義のため(かつ、継続して行う場合は料金がかかる)、期間中に作りたいと考えていた物を作りきることは難しく、修了後に質問をメールにて受けたり、時にはカフェなどで教えたりとアフターフォローを続けることを行っていました。当時、この話をしていたら運営スクールに怒られていたかもしれませんが、そんな実体験もあって、有料という形ではなく、社会人になっても継続的に勉強をできる場、そんな場所を作りたいと思い、本会を始めたのがきっかけです。

会を続ける上で感じていること

ネットのコミュニケーションに慣れていない方が多いせいか、lingrで質問用のチャットルームを作っても全くもって盛り上がりません。チャットで話すことと言ったら、 @yandoさんと「今日参加者多いのでランチどうしましょっかねー?」と、2言くらいの話で一日のチャットが終了します。普段の開発現場ではあたりまえのことのように行われいてることでも、意外にそうではない現状があって、WEB上でのコミュニケーションに抵抗がある方が沢山いるんじゃないかなと思っています。また、最近ではWEB上で全て完結するようなサービスも沢山増えて、なおさら大変な世の中です。個人的には、そういった方たちをリアルの場を設けてフォローを行い、個々に抱えている壁を少しづつ崩していける活動の場としても、本会を続けてい行きたいと考えています。時間はかかると思いますが、がんばる所存です。

というわけで

継続して物作りを行う場、そんな場を提供し、想いを形にする人、そんな人がより増えることで、インターネットという世界が少しでもよくなる活動を今後も続けて行きたいと考えています。

 

是非よろしくお願いします!!!11 

  

おすすめ作業スポット(恵比寿)

f:id:hondabin:20140516185342j:plain

ハンモック.rb in Sandy TERRACE(恵比寿)

いつもお世話になっているSandy TERRACEさんにて

週末カフェにて作業に行くついでに、ご一緒に作業をしませんかー?

という軽いノリで上記フランクな会を開きました。

  • 閑静(少し繁華街から離れた場所)
  • 風通しがよい
  • 日当りよい
  • 電源あり
  • wifiあり
  • テラス席 & ハンモック
  • ゆったりソファー席
  • ご飯、お酒(エクストラゴールドありますよ)

と、店員の方も良い方ばかりで、おすすめのカフェです。

本会の開始時刻と同様、土曜日の15時くらいが比較的落ち着いているため、

周りのお客さんに気を遣うことなく、作業を進めることができます。

(日曜日は確か定休日)

f:id:hondabin:20140516185347j:plain

  • 14:00 到着。ランチを食べて、コーヒーを飲みながらボケーっと
  • 15:00 作業開始
  • 19:00 お店の混み具合をみて切り上げ
  • 20:00 ビールとおつまみを食べて帰る

大体いつも4時間くらいの作業時間でやってたりしています。

Sandy TERRACE | サンディテラス

恵比寿へお立ち寄りの際は是非是非。

 

あ、っと、他におすすめの作業スポットとかあれば、

@honbinまで教えてください!突撃します!!!11

何か作ろう合宿 2014

というわけで、日程が決まりました。

何か作ろう合宿 2014 in KANAYA BASE(千葉)

前回は名誉の負傷にて、タイピングすらままならない状況でしたが

今年は満を持して当日を迎え、しっかり成果を出したい所存です。

  • イラスト・デザイン
  • ファッション
  • 音楽
  • 工作
  • プログラミング

と、作るテーマは特に決めておりませんので、夏までに何か作りあげたい!

という方がいれば、是非一緒にやりましょう。

ちょうど梅雨の時期、今からてるてる坊主を作って晴れることを祈るとともに、

最高の夏を迎えれるよう今から準備を始めましょう。

 

それでは当日に!!

フォームから離脱してしまった時の入力状態

フォームの離脱率はGoogleAnalitcsで確認出来るけど、どこまでの項目を入力して(or まったく入力していない)離脱してしまったかの詳細情報は分からない

フォームから離れる際のイベントを拾い、その時の入力情報をリクエストして解析してもいいかなと思った。

validationの状況については、リクエストされた情報からアプリケーション個々でログを取る仕組みを入れる必要がありそうだけど、フレームワークなど統一的な機構であればライブラリとして提供もできそう。

2013 最高にアツい夏の思い出に

一年越しでようやく開催です..お待たせしました..

ご都合がよろしければ是非!

ガチで作ろう開発合宿 in 千葉