子どものために、JavaScriptで知育アプリを作ってみた。

第一弾は、1〜10の数字を覚えるためのアプリ。

http://jsdo.it/dentaq/num_memory

アプリへの直リンクはこちら
http://jsrun.it/dentaq/num_memory

自分の使っているGalaxy S3に最適化されています。悪しからず。
jsdo.itからfolkして必要に応じてcssの19行目のpaddingを調整してみてください。

ちなみにAndroidだと、Chromeでないと音声が鳴りません
(iOSは標準ブラウザでいけます)

読み上げは、Vocaloid3 "Mew"を使ってみたが、もう少しブラッシュアップしたいと思っている。

しかし、こういうのから作り始めるあたり、数字に対する苦手意識が強くて、子どもには数字に強くなって欲しいという願望の現れなんだろうなぁ。

scss-toolkit 公開フロー

gem

gemの作成

gem build scss-toolkit-rails.gemspec

githubへpush

git add .
git commit -m "Commit Message"
git push origin master

github確認
https://github.com/dentaq/scss-toolkit-rails


rubygems.orgへのpush

gem push scss-toolkit-rails.gemspec-0.0.x.gem

サンプルサイト

ローカル確認

ruby web.rb

githubへpush

git add .
git commit -m "Commit Message"
git push origin master

herokuデプロイ

git push heroku master

heroku確認
http://scss-toolkit-sample.herokuapp.com/

scss-toolkit、gem化への道のり(3)

前回めでたくgem化されたscss-toolkitですが、いよいよ仕上げの段階です。
sinatraでサンプルページを作り、herokuにデプロイしました。
Scss Toolkit Sample

今のところ、css3 buttonと、text-outline-characterの2つしかないので寂しいですが、、
エラーに次ぐエラーにめげず、rubyを使った比較的モダンなWebアプリケーション作成手法について、ひと通りおさらいできたことは自分の中では結構大きかったです。
今回の一連の作業で使った技術をリストアップしておきます。

heroku
sinatra
github
vagrant
bootstrap
rails
gem

これからもrailsrubyにおけるcssデザインの進展に貢献していけたら嬉しいです。

scss-toolkit、gem化への道のり(2)

前回に続き、お題
"sassで作った自作のデザインコンポーネンツをgemとしてを登録し、gem installで使用できるようにする"
の続きです。

結果として、現状、sassy-buttonsや、zurui-designのように、gemコマンドで自作のデザイン部品のスタイルを適用できるようになりました。
使い方は下記のUsageをご覧ください。

https://github.com/dentaq/scss-toolkit-rails

1)前回なぜvagrant上での作業を余儀なくされていたか?
ローカルのruby環境こねくりまわしていたら、gemコマンドが使えなくなってしまったから。
これはxcodeのバージョンを4.6.2に上げ、rvmをもう一度インストールし、最新のrubyを入れることで解決。
もともとのrails環境を入れた時には、rvmとはなんぞやということが全くわかっていなかったので良い勉強の機会になった。

2)sassのコンパイルエラー
これについては、Railsのファイル命名規則を今一度確認する必要があると感じた。

3)vagrantユーザー上からsshgithubにうまくつながらない
これもsshについてのリテラシーが低すぎたためで、良い勉強の機会になった。

良い先人についてもらってやれれば早いんだろうけど、ひとりでやらなきゃならないという人はググって手を動かしてとやっていくしか道はないかと。私も今回このパターンで、遠回りのようだけど、実は一番身につくのかな、と思ったりもした。

今回、Rubyの文化に触れるためにいろいろ課題を設けていじったけど、以下、独断と偏見に満ちた、PHPRubyの比較。

Rubyは美学に根ざした秩序がある。
gemや多彩なWAF等、使いこなせれば、すごく便利で、コアな部分の開発に集中できる。
「使いこなせれば、」
というところが非常に大きなポイントで、最初のうちは、エラーにつぐエラーに、くじけそうになる。でも頑張ってみるだけの価値はあると思う。
まずはドットインストールのSinatra入門をやってみるといいのではないかと。

PHPはグチャグチャだけど、↓こういうのが生まれる土壌もあるし、好きだなぁ
http://www.pandora.nu/pha/tools/spam/harukin.php
このコンテンツ今朝この記事で知ったんだけど、こういうの見てると、文系のプログラマーにはPHPの「HTMLに埋め込める」ということがすごく大きな武器になるのだなーと、ひしひしと感じる。

自分は今のところ、RubyPHP、どっちも好きです。

scss-toolkit、gem化への道のり(1)

今回のお題:

"sassで作った自作のデザインコンポーネンツをgemとしてを登録し、gem installで使用できるようにする"

下記のような流れで行い、目的は70%くらい達成できた。
railsで@import "scss-toolkit-rails"と書くだけで簡単にコンポーネンツが使える、というのが最終目標なのだが、下記のエラーにより現状、うまくいっていない。

この部分重要なので、また気力があるときに、改めて挑戦したい。

vagrantで新規仮想環境作成 →OK
Railsをインストール →OK(なぜか3系が入ってる)
・zurui design gemをインストール →OK
vagrant上のRailsで@import 'zurui-sass";でzuruiコンポーネンツが利用可能なことを確認 →OK
・自作のsassコンポーネンツをgemfile化し、rubygems.orgに登録 →OK
vagrant上のRailsで@import "scss-toolkit-rails";で自作のuiコンポーネンツが利用可能なことを確認 →NG(<イマココ)

つまずいたところ。
1)localhost:3000にブラウザからアクセスしても表示されない。
Vagrantfileの
# config.vm.network :private_network, ip: "192.168.33.10"
の行頭の#をはずす

2)githubssh認証エラー
~/.ssh/id_rsa.pub
の中身と
~/.ssh/authorized_keys
の中身を一緒にする、というところがポイントだったような。。errorメッセージが出る都度、ググって解決した感じ。

3)Rails 4をインストールできない
error message によるとrubyのバージョン違いの問題のようだった。
バージョンというか、ビット数かな。
64bitOS向けのrubyと32bitOS向けのrubyがちゃんこになっちゃってたらしい。
これは特にRails 4でなくてはならないということではなかったので、Rails 3のほうをインストールした。

4)rake releaseができない
bundle gem hogeで作ったひな形にファイルを加えてrake buildでGem化するところまではスムーズだったんだけど、rake releaseが結局こけちゃう。仕方ないので、rake releaseを諦め、gem push コマンドでrubygems.orgへ登録した。
https://github.com/dentaq/scss-toolkit-railshttps://github.com/dentaq/scss-toolkit-rails
https://rubygems.org/gems/scss_toolkit_railshttps://rubygems.org/gems/scss_toolkit_rails
http://sho.tdiary.net/20120218.html#p02http://sho.tdiary.net/20120218.html#p02

HTMLでドラムパッドを作った。

以前作ったShaker MakerというHTML5アプリを久しぶりに使おうと思ったら、なぜだか動かなくなっていた。
原因が突き止められず、しかし動かないまま置いておくわけにもいかないと思い、ドラムパッドアプリに作り変えました。

http://jsdo.it/dentaq/drumpad

ドラムパッドといえば、自分にとってはAKAIのMPC60なので、そういうカラーリングにしています。

今は鳴らすだけですが、今後ステップシーケンサーなんかも付けていきたいなーと思っています。

シゴトの動機づけ

今の組織で、今後どういう働き方をするべきなのか。
自分は今、そういうことを考える機会にあります。

そして今は特に、シゴトにおける内発的動機づけと外発的動機づけについて考えている。
シゴトが好きだから働くのか、お金のために働くのか。
あるいは自分のために働くのか、誰かのために働くのか。

結婚しているか、子どもがいるか、といった外的要因によっても答えは変わってきそうだ。

音楽の仕事のとき、内的動機づけという力は、結局自分のために働くということになるので、大きなモチベーションに成り得なかった。
Webのシゴトをするようになって初めて就職した会社で自分はどう動いたか?ここに答えは隠されていそうだ。
技術者としての就業だったにもかかわらず、
「うまくこの機能を実装できたぜー満足!」
というよりは、
「こうすれば一緒に働く人(またはお客さん)がハッピーになれるのに」
ということを考える方がモチベーションに成り得た。
この時の気持ちが、シゴトの原点のような気がする。
それ以来、仕事は誰かのためにやるもの、
という考え方が自然に身についているのだと思う。
#にも関わらず自分は今も技術者をやっているところに矛盾が有り、これを解消しないことには前に進めなさそうだ

強い内的動機づけを求められる職場環境では、内的動機の量に比例して喜びが大きくなる(それを持っている被雇用者にとっては喜びとなり、それを持っていない被雇用者にとっては苦しみとなる)。

自分はそんな強い内的動機は持ってないよ。

音楽の勉強をしてやっと食えてきたところで挫折して、

他にはWebしかなかったからWebに来た。食うため、食わせるための最後の手段として、Webを選んだ、というかWebしかなかった。

PHPでもRubyでもどっちでもいい。動くのを作ることに精一杯。あるいは、動けば満足する。
所詮道具の問題。道具は過程。自分は、過程より結果にこそ興味があるみたいだ。

ゲームが好きでオンラインゲーム会社に来た?
いや、進んで飛び込んだというより、Web制作の需要が頭打ちになり、金の集まるこの業界に流れ着いた、という感じ。

そんな自分にどんなこだわりがもてようか?

僕にとって仕事観は、以下のようなものだ。

自分がやりたいことではなく、やるべきことをする。

価値提供のために、自分の得意な力を活かす(苦手なことはきっぱりとやらないで人に任せる)。

最終的に受け取る報酬に見合った価値を提供する。

自分の人生に関わる人全員をハッピーにする。

ここまで考えれば、自ずと答えは明確になりそうなものだ。

しかし自分、ホントシゴトに関しては悩みが尽きないなー