2012年4月5日木曜日

第8回Okinawa.rb Meetupに参加して

参加しました。
写真は@gliese035さんと@rikiyahirataさんと@kimihito_さんです。 思えばOkinawa.rbのMeetupはじめてからブログをしっかり書いたことがない。
すぎた人生は戻ってこないので過去の記事はもう書かないと思う。ちょっともったいなさすぎる。
今書かないと永遠に書かないので、今書きます。

今日ははじめてOkinawa.rbにお越しの方もいらっしゃいました!
@gongoZさんきてくれてありがとー! @nekonekomeikoさんありがとう!


今日やったこと


Twitterで一言で書いてたので引用すると
今日は僕は楽しめました。メタプロ、下レイヤーな話、Airbnbの件、&:symbolで暗黙的にto_procが呼ばれる、PHPだと連想配列と配列っておんなじ感じだけどRubyの配列とハッシュって結構違うよねっていう感じの話、唐揚げ、正規表現の否定戻り読み。」


メタプログラミング

久しぶりに@naopontanさんが来てくれてたので一緒にメタプログラミングRubyを読みました。
前回、第2章の途中まで読んでいて、2章のまとめを読んで3章へ。
ブロックの使い方、クロージャとスコープの話。
スコープゲートしっかり覚えた! スコープゴートを超える話も覚えた!

ダイナミックスコープとレキシカルスコープの違いについて@libkinjoさんの書いてくれたPerlでmyとlocalを使ったサンプルを見ながら読んでいました。


詳しいことはここにまとめられないかも。あとで別エントリにあげます。

下レイヤー

Okinawa.rbとは別で下(ネタ)レイヤーの勉強会が立ち上がりそうです。
モチベーションが保てて技術の向上にも繋がると思うのでぜひ頑張っていきたいと思います。
内容が下でも、それを改善していくプロセス、そこで得られた技術は他でも役に立つはずです。

Airbnbの件

ギークハウス沖縄をAirbnbに登録しています。

A House for GEEK! GeekHouse Okinawa

間貸ししている部屋を探せるようなサービスです。
登録してから数件、借りたいなーという申し込みがありました。
英語の申し込みがあった場合、翻訳や辞書をたよりながら読めはするのですが、気のきいた返事が書けなくて、Okinawa.rbの時に@RedHotMadGalilさんにヘルプを頼んで、書いてもらっています。
ほんとに、いつもありがとうございます。

&:symbolで暗黙的にto_procが呼ばれる

ハッシュのキーについて@_attonさんとコード書きながら話してる中で自分が
{:foo => 1, "bar" => 2}.keys.map(&:class)
というコードを書いて見せたところ、map(&:class)ってなんぞ?ってなりました。
メソッドの呼び出しで&:classって書くと、&がついてるので:classはプロックだよね、って感じになって暗黙的にSymbol#to_procが呼ばれるようです。
自分の理解を助けるためにソースコード書いてみました。

PHPだとarray_ほにゃららで処理するし、配列も連想配列も作るときarray()でかく。
RubyだとHashとArrayのクラスも分かれてるし、それぞれのメソッドがある。
「PHPでは配列も連想配列も一緒な感じだけど、Rubyって違うの?」っていう感じの疑問から話題が広がりました。

唐揚げ

@kanpe777さんから頂いた唐揚げを食べました。美味しかったです。レンジでカリッカリにするのがお勧めらしい。今度試す!(早くも頂いた唐揚げ1kgがなくなりそうです)

正規表現の否定戻り読み

(自称)初心者のみなさんが@ey0tさんと一緒に楽しいRubyを読んでいます。(いつもありがとうございます。)
そこで出てきた問題をどう解決するか?っていう感じでした。(すみません、問題についてちゃんと把握してないかも)
$ grep bar | grep -v foobarでよくね?みたいな話が出たり。
FacebookのOkinawa.rbのグループに皆さんの投稿がまとめられています。
http://www.facebook.com/groups/okinawarb/294866413919509/
@_attonさんが書いてた(?!>)っていう否定戻り読みの正規表現を知らなかったので超参考になりました。
正規表現だけでも勉強会開けそうな気がする。誰か教えてください。

自己紹介

出来たかな?もうちょっと掴める自己紹介がしたい。
今回は自己紹介をTwitterで実況してみました。
まぁまぁ良さそうな反応だったので次回もそんな感じでやろうと思ってます。

終わりに

毎回Okinawa.rbのMeetupが終わるたびに考えています。
みんな満足出来たかな? と。
とりあえず僕が楽しめた分は記事に残してみなさんと共有していきたいなと考えています。

2012年3月23日金曜日

LexuesAcademyを超えるその日まで



2012年の3月17日をもってLexuesAcademy第1期を終えました。
サポートして下さった関係者の皆さま、本当にありがとうございました。
少し遅れましたが、謝辞にかえてブログを書きます。

成果発表会で最後に淵上さんが
「沖縄型若年層向け」
「雇用されるための技術者研修ではなく」
「間違っても彼らを採用することがないように」
とおっしゃっていたのが印象的でした。

僕は内定を蹴り、雇用されるのと別の道を歩きはじめました。
決意表明では「自分のサービスで食えるのが目標」と言いましたが、未だに自分のサービスでお金を稼げていません。
僕がたくさんの人に使って貰えて「お金を出してもらえる」ようなサービスを作り上げることが出来てはじめて「僕はレキサスアカデミーの目的を達成した」と自信を持って言えるんだと思います。



発表を見にきて頂いた皆さんありがとうございます。
見つけた分だけ感想のブログやTogetterへのリンクを集めておきます。



他の受講生の皆さんも最終成果発表を終えて、LexuesAcademyで何をして、これから何をしたいか、考えたことをそれぞれブログにまとめています。

レキサスアカデミーの期間を通じて、最終成果発表を終えて、反省するところはもちろんあります。
しかし、僕たちがやってきたことを少し紹介させて頂くと

  • 40個以上ものアプリ/サービスをつくりだした
  • 20,000ダウンロードされるアプリを2つも輩出出来た
  • 作ったものから収益をあげることが出来た
  • 地元の人の問題を解決するサービスを開発し、それが認められ新聞にも掲載された
  • XHAGO3で自分たちの学んだことを沖縄の技術者の皆さまへ伝えた
  • 英語が出来ない・人前で話すのが苦手というコンプレックスを乗り越え英語プレゼンを堂々とこなした
  • 勉強して終わりじゃない、成果をマーケットに出してフィードバックを受け改善してきた

かなり成果を出してませんか? 僕も皆も自信をもっていいと思いますよ。

一番凄いのはここにいたるまでの失敗の連続を乗り越えて来た事ではないでしょうか。

「失敗から学ぶ」
僕たちレキサスアカデミー生は今後も色んなことに挑戦し、失敗し、そこから学ぶことをやめられないはずです。
だってレキサスアカデミーの期間はとっても楽しかったから!

僕はレキサスアカデミーが終わっても満足していません。
これからも積極的に挑戦し失敗し成長し「僕はLexuesAcademyの目的を達成した」と胸を張って言えるようなサービスを作っていきます。

LexuesAcademyの目的を超えるその日まで、今後ともよろしくお願いします。

2012年3月22日木曜日

はなちんのLexuesAcademy最終成果発表会でのアウトプット


2012年3月17日にレキサスアカデミー最終成果発表会がありました。

最終成果発表会でのアウトプットについてまとめておきます。


最終成果発表会の様子はUstreamで配信されております。僕はFavtileの発表と、僕の今後について決意表明を致しました。
以下の動画から録画された動画を視聴できます。
Favtileは30:31~33:41あたり、決意表明は50:15~52:55頃です。

LexesAcademy成果発表会〜後半〜



Favtileへの質問
質問に対する答えは適切だったでしょうか?
デリバリーの面で自分で気づいた事は以下の3つ。

  • 質問への答えで「えっと」「で」が結構出てる
  • 質問への答えで同じセンテンスを2回繰り返している
  • 姿勢ちょっと悪い

@pinkrootさん
いつもFavtile使って頂いてありがとうございます。

質問「どうやってこの素晴らしいデザインを考えたのですか?」

  • リストで表示するのは好きじゃない。タイル状で一覧出来るのが好き。
  • リストで表示せずタイル状に表示するのが好きで、デザイナーと協力し、可愛くなるように考えた

質問「デザインに対してマーケットからフィードバックはあったか?」

  • 背景画像を表示していたが、ユーザーからの声で、ユーザーは背景を見たいわけではないことに気づき取り除いた。
  • 上のバーがもっと大きかったが「大きすぎ」と言われて最低限必要な情報が収まるように小さくした。

他にも

  • トップページをぱっとみて使い方が分からない
  • ユーザー名を入れるのが面倒
  • アクセス解析を見るとユーザー名で間違って@を入れてしまっている

このようなフィードバックを頂き、最終成果発表会中にトップページを改修しました!


まだ直せていませんが「スクロールバーが出ない状態だと次のページ読み込めない」というバグ報告も受けています。
他にも、タイルの横幅固定してるせいで

  • Amazonのリンクがハミ出る
  • 動画が小さすぎてそのままみれなくね?
  • スライドも小さすぎね?
  • 余白なくてつまりすぎ
  • 情報が全部たいらだとどこから見ていいか分からない
  • カテゴライズしたい(タグとか)
  • 人のFavを購読するようにしてもいいのでは?
  • 有名人のFavを読ませるサービスへピボットしてみては
などなどのフィードバックも頂いております。ありがとうございます。

Favtileへのフィードバックがあったら是非@hanachin_までお願いします。

@yamanetoshiさん
質問「Webサービスの場合、マーケット、ユーザーとのやりとり・フィードバックはどのようにしましたか?」
Favtileの場合は

  • FavtileのページをTwitterにつぶやけるようになってる
  • Twitterにつぶやかれている情報を僕がチェック
  • Twitterでフィードバックを受けてTwitterでユーザーに返事をする

もともとTwitterに特化したサービスなので不満点・改善して欲しい点をユーザーがTwitterに直接書いてくれる事が多い、という点もありますね。

Favtileを今後どのようにするのか?という質問がプレゼン後にありました。
これについては現在

  • ピボットして別のサービスをはじめる
  • フィードバックは頂いてるのでもっとブラッシュアップ出来ないか
  • 誰か買ってくれる人いないか
  • Favtileからお金とれないか
    • 例えば広告を載せる
    • 機能を追加して有料版を提供する
など色々と考えております。


最終成果報告会での決意表明
レキサスアカデミーの前に週末ものづくり講座を受けていました。
実際に自分のものをマーケットに出してフィードバックを貰って改善する工程が楽しくなりました。
yasulabさんが講師をしてると聞いて参加せねばと思いすぐ山崎さんへ問い合わせ、レキサスアカデミーに参加することに。
もっと色んなものをマーケットに出して反応を貰ってもっといいものを作りたいという思いがあって参加した。
いいものを作るには技術以外にもデザイン・マーケティング、グローバルに使われるものを作るために「英語」が必要だと気づいた。
これからもレキアカで成長するためにやってきたこと、英語・プレゼン・マーケティング、全てを続けて行きたい。

今後も自分のやりたいことをやっていきたいと考えています。
プログラミングが好きなのでプログラマー・Webデザイナーの人とギークハウス沖縄で生活しながら、プログラミングの話をしたりサービスを作りながら共同生活を送っています。
毎週水曜日にギークハウス沖縄でOkinawa.rbを開いており、県内の技術者と学生ともっと交流を深めたい。そして皆さんと一緒に僕自身も成長していきたい。
最終的に自分の作ったサービスで食べて行けるようになること、それが今後の目標です。

2012年3月21日水曜日

はてなからお引っ越し

Bloggerからはてなダイアリーに移行したのが何ヶ月前だっけ?
Bloggerに戻って独自ドメインのblog.hanach.inで運用しようかと思います。
はてなは凄く好きなんですがアクセス解析等との連携を考えた場合Bloggerの方が楽かなと。
あとBloggerで記事書いてKloutスコアをあげたいというのもあります。
当面はBloggerでやって行きますが準備が整い次第WordPressに移行しようと思います。
理由は
  • サーバーを貸して頂けそうなのでWordPress動かすサーバーの維持費が必要なくなる
  • ブログ以外のPortfolioサイトもhanach.inで作りたいと考えており、全て自分でカスタマイズ出来る方が使い勝手が良さそう
  • WordPressの使い方を覚えておいた方が今後仕事する際に便利そう
などです。
記事はすべてはてなダイアリーの方から移行済みです。
それではみなさん、こちらでもよろしくお願いします。

2012年3月6日火曜日

僕はGumroadで猫のふんを売ります



2日連続、3度目。もう10うんこぐらい一人で片付けたのでこれはもうお金とってもいいかなと思って猫のふん写真の詰め合わせを売ります。


猫のふん詰め合わせ on Gumroad





2012年2月20日月曜日

WordPressにAmazonアフィリエイトの商品を貼る



経緯


ギークハウス沖縄のブログでアフィリエイトをやることにしました。


本を頂いたら記事を書き、読んだらレビュー記事を書き、その記事を読んだ方がAmazonで本を買ってくだされば、頂いた本から収益が得られ、そのお金でまた本が買えます。


新しい本が買えると本を寄贈してくださった方も喜んでくださるのではないでしょうか。





ギークハウス沖縄ではブログにfluxflex+WordPressを使用しています。


WordPressでAmazonアフィリエイトのリンクを貼れるようにするのが本記事の目的です。


参考にするサイト


ず's » wordpress用Amazonアフィリエイト用マクロを書いてみた


こちらの記事を参考に進めていきます。


アフィリエイトのマクロを追加する


WordPressのバージョンは3.3.1です。


1.Macro Expanderをインストールする



  1. WordPressの管理画面に入り、左側サイドバーのプラグインから新規追加を選びます。

  2. キーワードの入力欄に「Macro Expander」と入力

  3. プラグインの検索ボタンを押す


f:id:h6n:20120220060138j:image


Macro Expanderが出てきたら、いますぐインストールを押す


f:id:h6n:20120220060139j:image


インストールが完了した、というメッセージを確認する。


f:id:h6n:20120220060140j:image


2.Amazonのリンクを作成するマクロを登録する



  1. 左側サイドバーの外観からテーマ編集を選びます。

  2. 右側のテンプレートの一覧の中から「テーマのための関数」を選ぶ

  3. 「< ?php」の後ろに以下の内容をコピペし、amazon_tracking_idの中の文字を自分のトラッキングIDに変更

  4. ファイルを更新ボタンを押す。


f:id:h6n:20120220060141j:image


確認記事を書く

記事の中で



[[amazon2][427406767X][4873113679]]


のような感じで、amazon2の後ろにasinを角括弧でくくって並べていくだけ。


f:id:h6n:20120220060142j:image


プレビューするとこんな感じ。ちゃんと動いてるっぽい。


f:id:h6n:20120220062329j:image


まとめ


これでAmazonアフィリエイト貼り放題。


ぜひ皆さんもギークハウス沖縄から本を購入してください!





2012年2月19日日曜日

embed.lyを利用してサイトにURLのプレビュー機能を埋め込む方法



#Favtileにembed.lyの埋め込み機能をつけました。


これによりリンク先の動画・写真・OpenGraphで設定されたサイトのアイコン等を埋め込み表示出来るようになりました。


f:id:h6n:20120220000031p:image:w640


今回はembed.lyを利用する過程を紹介します。


embed.lyって何が出来るの?


f:id:h6n:20120220000030p:image:w360


embed.lyを使うと、Webサイトの中に他のサイトの動画や写真やWebサイトを埋め込み表示することが出来ます。


Twitter向けの写真サイト(yfrogやTwitpic)やUstreamやYouTubeはもちろん、InstagramやAmazonなど、218ものコンテンツサイトの埋め込み表示に対応しています。


有料プラン以外に、無料プランがあります。1万URLまで無料で埋め込み表示できます。


登録方法


無料プランへの申し込み方法を説明します。


1.embed.lyの登録画面へ行く

Embedly | Pricing Plans


今回はFreeプランなんで、Freeプランの下のGet this Planをクリック。


f:id:h6n:20120220012134j:image


2.登録画面埋める

まず、ユーザー名、パスワード、メールアドレス、First name、Lastネーム、Organizationの項目を入力しましょう。*1


次にサービスの規約に同意するチェックボックスにチェックを入れます。


最後にSign Up!ボタンをクリックすると完了です。


f:id:h6n:20120220012135j:image


フォーム入力が完了すると次のような画面が出るので、リダイレクトされて別の画面へ切り替わるのを待ちます。


f:id:h6n:20120220012136j:image


この画面が出ると、登録は完了です。


f:id:h6n:20120220012137j:image


embed.lyをウェブサイトで使う前に


embed.lyをウェブサイトで使うためには「このURLのウェブサイトから呼び出されるのを許可する」設定が必要です。


1.設定画面へ行く

Manage your Referrersの欄のManageボタンをクリック


f:id:h6n:20120220024531j:image


2.ウェブサイトのURLを設定に追加する

Add Referrerの入力欄に、WebサイトのURLをhttp://抜きで入力し、Addボタンをクリック。


このとき、「http://favtile.com/hanachin_」など、「http://favtile.com/」のうしろに何かついたURLでもアクセス出来るようにしたい場合は、*をつけて「favtile.com/*」のような感じで入力する。


あと、開発環境がlocalhostのサーバーに上がってるときは




  • localhost/*

  • localhost:3000/*


等々を追加しておくと便利です。


f:id:h6n:20120220024532j:image


追加が完了するとReferrersに出てきます。


f:id:h6n:20120220024533j:image


3.URLが設定出来てるか確認する

自分のウェブサイトで使えるか確認してみましょう。


使いたいURL「http://favtile.com/hanachin_」をTest Urlボタンの左の入力欄に入れ、Test Urlボタンをクリックします。


f:id:h6n:20120220024534j:image


そのURLで使える場合は緑色で「Matched」と出ます。


f:id:h6n:20120220024535j:image


赤で「No match」と出たら、そのURLでは使えません。確認してください。


f:id:h6n:20120220033745j:image


embed.lyを使う


ではembed.lyを実際どうやって使うのかのサンプルです。


全容


<!DOCTYPE html>
<html>
<head>
<title>embed.ly!</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://scripts.embed.ly/jquery.embedly.min.js"></script>
<script type="text/javascript">
$(function(){
$("a").embedly({
// ここはそれぞれのAPIキーに置き換えてください
key:"4c0281125b1211e188dc4040d3dc5c07"
});
});
</script>
</head>
<body>
<header>
<h1>embed.ly!</h1>
</header>
<article>
<h1>Favtile</h1>
<a href="http://favtile.com/">Favtile</a>
</article>
<article>
<h1>node.js + socket.io + Arduinoでイイネ! クローン</h1>
<a href="http://www.youtube.com/watch?v=WsjvgkjYWS4">youtube</a>
</article>
</body>
</html>


1.必要なファイルをscriptタグで指定

jQueryと、embed.lyのjQueryプラグインを読み込みます。



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://scripts.embed.ly/jquery.embedly.min.js"></script>


2.embed.lyでリンク先を埋め込む

「"a"」など、埋め込みたいリンクをjQueryで指定し、「$("a").embedly({key: "key"})」のような感じでembed.lyのプラグインを呼び出すだけで、リンクを埋め込めます。



<script type="text/javascript">
$(function(){
$("a").embedly({
// ここはそれぞれのAPIキーに置き換えてください
key:"4c0281125b1211e188dc4040d3dc5c07"
});
});
</script>


keyに指定してある文字はembed.lyのYour API Keyに表示されている文字で置き換えてください。


f:id:h6n:20120220040409j:image


3.確認

確認してみましょう。上手く行けばこのような感じで、サイトの画像や動画が埋め込まれて表示されます。


f:id:h6n:20120220040410j:image


うまくいかなかったらこんな感じでただのリンクのまま、ですね。


f:id:h6n:20120220040411j:image


まとめ


embed.lyを使うと結構簡単な手順で色んなコンテンツを埋め込めるのでお勧めです。


皆さんも是非使ってみてはいかがでしょうか?




*1:キャプチャで「ギークハウス沖縄」って入れてるけど通らなかったので別のに変更しました。