彼らが !default を付けない理由 / Bourbon / Neat / Bitters | Workabroad.jp

2015/11/08 21 users NEAT ライブラ Refills thoughtbot 彼ら

ThoughtBot がメンテナンスしてる有名なCSS関係のプロジェクト。 Bourbon / Neat / Bitters、あと Refills てのもあるけど、必要なのは最初の３つかな。 サービス作ってて、バックエンドはあらかたできたなーーー、 フロントどうするかなーってなった時に、 Bootstrap のようなライブラリ使うか、スクラッチでやるか迷うんだけど、 最近というか、しばらくライブラ... 続きを読む

Protractorでスクレイピングしてみた | Workabroad.jp

2015/08/29 60 users Rails nokogiri Protractor スク 実際

Railsでスクレイピングが必要な時は Nokogiri を使っていたけれど、普通のサイトはJavascriptを使っているわけで、Nokogiriだけではスクレイピングが難しいこともある。そんな時にどうしようかと。 Nokogiri 鋸 Protractorなら、実際にユーザーがブラウザーを立ち上げて、ボタンをクリックして、テキストを読んで… みたいなことを再現できるのですごい便利。ほんとはAn... 続きを読む

Rails / Turbolinks を使いつつもフェイスブックの Page Plugin を設置する | Workabroad.jp

2015/07/01 20 users Facebook Rails turbolinks 最初 オフ

なにやら Facebook のライクボックスが Page Plugin なるものに変わるそうで（変わった？）。 今のところ Like box も動いてるけど、対応してみました。 Railsでサイトを作るとSNSのシェアボタンとかは基本的に動かない。 最初の読み込みでは表示されてるように見えても、 クリック → 遷移後のページでは動いていないはず。 で、よくTurbokinks自体をオフにする方法も... 続きを読む

Rails / RSpec テスト書いたことない ﾒﾝﾄﾞｸｻｲ（n´Д｀）という時のチートシート | Workabroad.jp

2015/06/15 83 users Rails rspec チートシート

テストを書かないようになってしまっていた。 大きなアプリケーションではないし一人で作ってるし… まぁいいか的な。 ただ、コードの量が増えていくにつれやっぱりちょっと辛い。 書き方すっかり忘れたので、RSpec再入門。 最終的なGemfile（テスト関係だけ） テスト用のDBの設定をお忘れなく。 gem 'pg' group :development, :test do gem "rspec-rai... 続きを読む

5年前のMacBook ProをSSDで快適に | Workabroad.jp

2015/03/15 19 users SSD MacBook Pro MacBook 新しいマシン

The New MacBook も発表されたし、そろそろ新しいマシンが欲しくなってきた… でも仕事用と考えると新しいMacBookの購入はちょっと気がひける。 で、もうちょっとこのMacBookで頑張ろうと ハードディスクをSSDにしたらすごい快適になりました。 ・Macbook Pro Mid 2010 ・TimeMachineから直接リストアする 500GBのSSDを2万円くらいで購入。 Am... 続きを読む

Wordpress + Heroku + PostgreSQL + Amazon S3 = ¥0 / 無料でサイト運営 | Workabroad.jp

2015/01/30 286 users Heroku WordPress PostgreSQL 自力

WordpressをHerokuで運営すると何かと楽だなぁと思ってやってみた。タダだし。 でも実際はけっこうハマったりもした。書いておかないと確実に忘れる。 最初は自力でやろうかなと思ったけど、途中でハマりだしたので他の人の力を借りようということに。 2015年1月現在では Wordpress 4.1 になっている。 wordpress-heroku ローカル開発環境 まずはローカル開発環境。 面... 続きを読む

Rails ローカル開発環境からHerokuのDBに接続 / Rakeタスクとコンソール | Workabroad.jp

2015/01/18 37 users Rails コンソール Adapter Heroku 接続

rakeタスクを書いて、herokuにpushしてコンソール開いて実行ってのがめんどくさいので、自分のローカル開発環境から直接プロダクションのDBをさわりたかった。チームでやってると良くないと思うけど、個人プロジェクトならまぁいいかってことで。 config/database.yml production_local: adapter: postgresql encoding: utf8 port... 続きを読む

RailsとHerokuでノーティフィケーションをプッシュする / PusherとTurbolinksの兼ね合い | Workabroad.jp

2015/01/11 111 users ノーティフィケーション Pusher Heroku 兼ね合い

リアルタイムでユーザーにお知らせを通知したい。 Facebookの「○○さんがあなたの投稿をLikeしました」みたいなやつ。 やってみたら意外とすぐできた。 （herokuのaddonのおかげ） こんなやつ作った。 http://pusher.com/ めんどくさそうだと思ってたけど、Pushserを使えばそんなに難しくない。 Websocketの仕組みは分からないけど、意識しなくて良い。 Rai... 続きを読む

Rails / できるだけ高速に画像をアップロードする | Workabroad.jp

2014/10/20 30 users Rails CANPATH シンプ アップローダー サムネイル

このブログでも画像をアプロードする機能は実装していて、とくに不便を感じていなかったのですが、CANPATHのユーザーから要望があったので考え直すことにした。 今までのアップローダー こんな感じです。 ポップアップウインドウ的なものが出てきて、画像を選択するかドラッグ&ドロップすると自動的にアップロードがはじまって、終了するとサムネイルが現れる。→ 選択すると記事内に挿入される。 これはこれでシンプ... 続きを読む

フリーのデザイナーなら絶対使いたいクーポンサイト | Workabroad.jp

2014/10/10 35 users クーポンサイト

フリーランスでいろいろ受注していると、写真やイラストを手配することが頻繁にあります。 撮影や書き起こしするほど予算がもらえる可能性がないって場合は、フリー素材サイトがとても強い味方。 でも今回は有料素材のお話です。お金かかるやつです。 フリー素材ではカバーできない時 フリー素材として公開されているものにチョコっと手を入れて済むくらいならいいですが、 クオリティが必要だったり、他と被り過ぎるのを避け... 続きを読む

Rails / Google Analyticsのデータを使って分析や管理画面のためのグラフをつくる | Workabroad.jp

2014/10/05 160 users Rails ウェブサービス 題材 グラフ メモ

ウェブサービスを運営すると「もっとたくさんの人に使ってもらいたい！」ともちろん思う訳ですが、サービスのどこを改善すればいいのか勘で決めてしまうわけにはいかない… ってことで、分析する時に便利なグラフ化のメモ。 海外に行く人専用のブログサービスCANPATHが題材です。 こんなグラフつくります。 欲しいのは次のデータとします。 新規に訪れた人 登録した人 自分史（ブログ）を作った人 ストーリー（記事... 続きを読む

rbenv / Ruby / Ruby on Rails アップグレードの手順 | Workabroad.jp

2014/09/23 46 users rbenv ruby-build Install list

そろそろRubyまわりの環境をバージョンアップせねばと思ったのでメモ。 rbenvを最新にする。 $ cd ~/.rbenv $ git pull origin master $ cd plugins/ruby-build $ git pull origin master インストール可能なバージョンを表示 $ rbenv install --list インストール $ rbenv install... 続きを読む

アイコンとかに便利なSassの書き方 | Workabroad.jp

2014/09/09 13 users Sass CANPATH マージン CSS アイコン

CSS Spriteでアイコンを表示させるってのは良くやるけども、 意外にもSassで書いたのは初めてだったので、メモ。 CANPATHで選べるアイコンを増やしました。 自分史を作るのがまたちょっと楽しくなると思います。 で、このCSSを作る方法。 まずは画像を用意します。 ひとつのアイコンは40px四方でマージンも合わせるとちょうど50pxになるようにしています。 なのでこの画像は、500px ... 続きを読む

紙のデザイナーがウェブ開発できるようになるまでに必要なこと | Workabroad.jp

2014/09/01 77 users デザイナー ウェブ ウェブアプリケーション プログラマー 本棚

絶対に成功する方法なんてないですが、デザイナーが挫折せずにウェブアプリケーションをつくるためには、いくつかポイントがあると思うのでまとめようと思います。 グラフィックデザイナー出身の自分自身、プログラミングの本を買っては本棚に積み、何回も挫折しています。 その時の経験を踏まえ、デザイナーがプログラマーの域に足をつっこむための近道を考えてみました。 ここでいうウェブ開発は、ウェブサービス開発であり、... 続きを読む

画像を好みの位置でトリミングする / Rails + jQuery UI draggable | Workabroad.jp

2014/06/02 37 users Twitter Facebook Rails width アレ

画像を投稿させるサービスで、ユーザーが推奨サイズ比率ではない画像をアップロードした場合、好みの位置でトリミングさせるやつを考えてみた。TwitterとかFacebookのカバー写真をアップロードした時のアレです。今回はズームとか無しで、縦方向のみの位置調整にしてみました。（画像のwidthは100%） 画像をトリミングして保存するわけでなく、単に画像位置を動かして、表示範囲以外は見えなくする方法を... 続きを読む

Rails / Ajaxを使って画面遷移しない一時保存機能をつける | Workabroad.jp

2014/05/21 83 users Rails Ajax

先日つけてみたソーシャルボタンですが、やっぱ数字が出るってモチベーションになっていいね。意外とPocketも多いんだなぁ。 今回もまたRailsです。 投稿サイトとかでよくある、一時保存機能をやってみた。文章書いていると、何かの拍子で「あ！」てなることが多いから、あるとユーザーに優しい。 フォーム <div class="blog-form"> <%= form_for(@post) do |f|... 続きを読む

Rails / Turbolinksに対応したソーシャルボタンを配置する（Facebook, Twitter, Google+, Pocket, はてブ） | Workabroad.jp

2014/05/18 53 users Twitter Facebook Rails pocket

Rails / Turbolinksに対応したソーシャルボタンを配置する（Facebook, Twitter, Google+, Pocket, はてブ） Railsの強い味方 Turbolinks ですが、イベントが発火しないとか、気をつけるところもあります。今回は、種類も多いし、面倒くさそうだなぁと思っていたソーシャルボタンに手をつけてみました。 参考 Turbolinks Compatibi... 続きを読む

avast!を更新したらChromeで“No data received”が頻発 / 解決した | Workabroad.jp

2014/04/30 14 users avast YouTube Chro Received fix

avast!というセキュリティソフトを使っていて、先日更新したら見えないウェブサイトが続出！最初はただのリンク切れかーと思っていたけどWikipediaやYoutubeまで見えなくなってさすがにそれはおかしいだろうと思っていろいろ調べた。 最初は下のようなページが参考になるかなと思って試してみたけどダメだった。 FIX “NO DATA RECEIVED” ERROR IN GOOGLE CHRO... 続きを読む

Railsでアソシエーションされたモデルを条件にして検索する | Workabroad.jp

2014/02/23 49 users Rails モデル 条件

ブログポストが複数カテゴリを持てるという場合で、 ある記事と同じカテゴリを持つ記事を探すということをやりたい。 #Postモデル class Post < ActiveRecord::Base has_and_belongs_to_many :categories end #交差テーブル class CategoriesPost < ActiveRecord::Base end #Category... 続きを読む

Rubyのチートシート / アクティブサポート | Workabroad.jp

2014/02/10 216 users Ruby チートシート サポート

Railsで使いまくりActive Supportなので、そんなにまとめがいが無いし、沢山あるのでまとめられないけれど、代表的なモノをとりあえずまとめておく。 blank?やpresent?やtryなんかは省略する。 # ---------------- # # Active Support # ---------------- # require 'active_support/all' fru... 続きを読む

Rubyのチートシート 変数 / クラス / モジュール | Workabroad.jp

2014/02/04 301 users 変数 Ruby モジュール チートシート gem

Rubyのレファレンスをしっかり読んでいないのでたまに混乱する。インスタンス変数とかクラスインスタンス変数とかね…。変数、クラス、モジュールの使い方についてざっとまとめてみた。RailsでGemばっかり使ってると忘れるんだよなー。 # モジュールはいろんなクラスで共有できる部品のようなもの # クラスに組み込むには'include'で指定する # モジュールはincludeの前に記述されている必要... 続きを読む

チリ出身のギタリストが弾くドラゴンボールZがむちゃくちゃかっこいい… | Workabroad.jp

2014/01/31 202 users ギタリスト ドラゴンボールZ チリ出身 YouTube アコギ

別に海外で生活するのとは関係ないので、このブログの主旨とは違いますが、 かっこ良かったので投稿してみる。 子供の頃にさんざん聴いて、耳に焼き付いてしまったドラゴンボールZのオープニングテーマをアコギで演奏している人がいて凄かった。 チリ出身のギタリストらしく、アニメばっかり弾いてるわけではなくて、普段弾いてる曲もかっこいい。Youtubeのページもある。 しょっぱなからかっこいい。 音がデカいとビ... 続きを読む

はてなのAPIをつかってみた / Rails4とWSSE認証 | Workabroad.jp

2014/01/20 44 users Rails セキュリテ OAuth WSSE認証 URI

API使ってどうのこうのという分野に経験が浅いので、頑張ってみた。慣れるといろんなことできて楽しい。HTTPリクエストの投げ方とか、勉強になりました。今回ははてなブックマークでやってみました。 はてなで指定されたURIに、指定されたフォーマットでリクエストを投げる。 ていうと簡単だけど、指定されている状態をどうつくるのか悩んだ。。 認証にはOAuthとWSSEがあって、WSSEは非推奨でセキュリテ... 続きを読む