僕は発展途上技術者

まちクエスト - スマホで謎解きにでかけよう!というWebサービスを開発しています

» まちクエスト - スマホで謎解きにでかけよう!

というWebサービスを開発しています。



かつては、ひと月ワンサービス 開発するぞ!とか息巻いていましたが、その後、受託開発でない自分サービス、つくる社になってからは自社サービス、自社プロダクトとしてリリースしてきたのは、知育ゲームの「かなぶん」「Libron」、番外編として「マンホールマップ」と、いずれもブラウザの拡張機能や iOS アプリでした。

ひと月ワンサービス、とか言っていたのは 2007 年だったので、実に6年ぶりの自社ウェブサービスになります。

どんなサービス?




“スマホを持って謎解きにでかけよう!”がコンセプトのスマートフォン向けフィールドゲームです。

画面のレーダーを頼りに身近にある“クエスト”を探して歩き、その場所に設定された問題に挑戦してください。


皆さん「オリエンテーリング」をやったことはありますか?地図とコンパス片手に、いくつか設置されたポイントをまわってきてゴールするまでの所要時間を競うゲームです。普通は、広い公園や山野でおこなうものなのですが、ウェブサービスにすることで、日本中どこででも、いや世界中のどこででもおこなえるようにしてしまおう、というのが「まちクエスト」です。

何をめざすサービス?



もともと僕は Geocaching という宝探しゲームが好きでした。キャッシュと呼ばれる、中にはキーホルダーだったりコインといったちょっとしたお宝が入った小さな容器が、世界中のあちこちに隠されていて、それをサイト上に登録されたキャッシュの緯度経度やヒントを頼りに探し出すゲームです。「え、何言ってんの?」という感じですが、これが実際にやってみたら好きな人ははまるはず。キャッシュは、撤去されてしまっては困るので、一般人には見つからないよう街なかのベンチの裏だったり自動販売機の底にマグネットなどで取り付けられています。簡単には見つからないですが、その分見つけた時の喜びは大きい。

ただ、こう書いただけでも、このサービスの敷居がかなり高いことがわかるかと思います。探す側として参加するのもある程度マニアックですが、緯度経度やキャッシュのありかといった情報をサイト上に登録するなど一定のルールを守った上でキャッシュを設置する側として参加するのはさらにマニアック度が上がります。それでもキャッシュは世界中に200万箇所以上に設置されているのはネットのサービスの凄いところ。とはいえ、決して万人向けではない。

ある日、自宅近くのキャッシュを調べたところ、それまで行ったことのない「実篤公園」という場所に隠されていることがわかりました。文豪、武者小路実篤が住んでいた邸宅そばの公園でそばには「武者小路実篤記念館」もあります。家族でサイクリングしながら行ってみたところ、落ち着いた雰囲気の場所で意外と楽しめたのです。もちろんキャッシュも見つけましたが、キャッシュが隠されていなかったら、すぐそばにありながらも、もしかしたらずっと訪れることがなかったかもしれません。この体験があって、Geocaching のような日々の生活にちょっとした発見をもたらすウェブサービスっていいな、と思ったのです。

Geocaching はどちらかというと玄人向けのサービスなので、これをもうすこし万人向けにできないかと思い、キャッシュは実物ではなく、仮想空間上の宝ということにし、その場所に行けば簡単にわかるようなクイズに答えることで発見できる、という仕組みにすることで簡単に楽しめるようにしたのが「まちクエスト」です。

普段何気なく通り過ぎていた所が、歴史的にちょっと有名な場所だったり、あるいは何か珍しい建造物があったり、場所の由来がわかったりと、いままで見過ごしていた街中の身近なものを再発見できるサービスにしたいと思っています。

Geocaching では 200 万箇所以上のキャッシュが世界中に設置されています。「まちクエスト」で、Geocaching のキャッシュにあたる「クエスト」を設置するのは「誰でもできます」とは言えないのですが、Geocaching でキャッシュを設置するよりは敷居は低いと思っているので、世界中に 200 万箇所以上の「クエスト」を設置するのがとりあえずの目標です。

ひとりで作っているの?



いいえ。

一年前に「まちクエスト」の構想を、ガソリン価格の比較サイト「gogo.gs」をやっていた @ogaworks さんに話してみたところ、面白いそうですね、と言ってくれ、その後、下北沢の商店街に繰り出して Geocaching のキャッシュを一緒に探しに行ってみつけたところで、たぶんまだ見ぬサービスに僕が感じていたワクワク感を共有できたんだと思います。「一緒にやりましょう」ということになり、主に企画や運営側を担当してくださることになりました。

「gogo.gs」のサービス開始当初 自らガソリンスタンドをまわって価格情報を自分で入力していた という @ogaworks さん、「まちクエスト」でもリリースまでにある程度運営側でしこんでおかないとということで、凄い勢いで「クエスト」を作っています。30万人以上に利用されている gogo.gs を開発、運営してきた経験はとても頼りになります。

デザインは、これまで何度も手伝っていただいている前田製作所@monoooki さんにお願いしています。デザイン修正は pull request で飛んでくるので、僕はレビューして merge ボタンをポチポチするだけ。みるみる見た目しょぼかったサイトが洗練されていくのが気持ちいいです。

で、いつリリースするの?



「まちクエスト - スマホで謎解きにでかけよう!」というキャッチコピー通り、このサービスは外にでかけないと楽しめないウェブサービスです。いまは梅雨で毎日じめっとした天気ですが、梅雨があければ、出かけたくなる日も多くなるでしょう。

ということで、梅雨明けが「まちクエスト」のリリース予定日です。@ogaworks さんは沖縄在住で、すでに沖縄は梅雨明けしているそうなのですが、一応僕がいる関東を基準とするので、気象庁の梅雨明け情報によれば、例年だと7月21日ごろとのことです。

日々ちょこちょこ機能を追加したり、細かいところでデザインもまだ手がついていない箇所もありますが、サービス自体はすでに動かしています。まち歩きが好きだったり、昔オリエンテーリング好きだった、という方がいらっしゃったら、

» まちクエスト - スマホで謎解きにでかけよう!

よりユーザー登録して使ってみてください。

こんな機能があったらいいのに、などの要望大歓迎です。

小中学生へのプログラミング教育を考える - CoderDojo Tokyo または下北沢 ができること

»「ちょっと待った!小中学校でのプログラミング教育」- Matz にっき

Ruby を作ったまつもとさんによる素晴らしい文章。プログラミングの教育に少しでも興味があればぜひとも読んで欲しいです。

小中学生にプログラミングを教える CoderDojo という活動をおこなっているのですが、来てくれるこどもたちがなかなか定着しなかったり、あるいはここ数ヶ月シリーズ化してやってみた Enchant.js の講座でも反応があまり良くなかったりと、モヤモヤとした感情を持っていたのが一気に晴れた気がします。

特に


プログラミングを教えるというのであれば、少なくとも教える人はプログラミングの楽しさを自覚している人でなければ成果をあげられないと思いますし、そのような人をそれぞれの学校に配備するのは大変な困難ではないかと思います。


の部分は非常にすっきりしました。

先日の CoderDojo 下北沢で、参加していたメンターで今後の方向性を話し合っているときに、メンターの一人 @geckoinc さんがそれとなく僕の息子に「CoderDojo 下北沢をどうしていったらいいと思う?」と聞きました。そのとき、息子は「楽しくプログラミングができればいい」と答えたのですが、そのときは聞き流しあまり気に留めませんでした。思えばそのとき、息子は答えを提示してくれていたのです。

少しやってみるとわかるのですが、こどもに教えるというのは、それはそれで別のスキルです。なかなか一筋縄ではいかない。それはもう教えるプロにまかせればいい。

CoderDojo に集まるメンターは教えるプロではないのですが、その代わり本職のプログラマーやデザイナーが多い。それも自分の仕事を好きなひとたちばかりです。それをもっと活かせばいい。自分の仕事のこと、いま面白いと思っていることを毎回でなくても、持ち回りでこどもたちの前で LT 形式で発表する。学校ではおそらくできないであろう「プログラミングの楽しさを伝える」ことこそ、CoderDojo だからできることなのではないかと思いました。

上記「Matz にっき」には


私の知っている優秀なプログラマのほとんどが自学自習でプログラミング能力を身につけている現実を考えると、あるいはプログラマとは、養成されるものではなく、発見されるものなのかもしれません。


とあります。

プログラミングの楽しさを伝えると同時に、あとの時間はドットインストールの動画をみたり、テキストを使って「寺子屋」と呼んでいる自習形式でいい。

CoderDojo 本家の柱で掲げている「Cool でなければならない」というのが僕自身いままでピンときていなかったのですが、「Cool」->「いけてる」->「楽しくなくてはならない」と解釈すれば納得が行く気がします。

1. プログラミングの楽しさを伝える
2. プログラミングの自学自習の場を提供する

を今後の、まずは CoderDojo 下北沢の2つの柱として掲げたいと考えています。

異論などありましたらコメントをお願いします。

新しい教育を考える「ADE Cafe」に参加して考えたこと

三鷹のオシャレカフェ「Cafe Hi famiglia」でおこなわれた「ADE Cafe」に参加してきました。

主催されている堀井清毅先生がいらっしゃる西町インターナショナルスクールで以前おこなわれたスクラッチ x iPad ワークショップをお手伝いしたのがご縁で今回招待されたのですが、場所がいつもプログラマーズカフェで利用していた「Cafe Hi famiglia」でびっくり。

それはまあ良いとして、ADE Cafe および ADE とは何かと言いますと、上記 ADE Cafe のサイトによれば、


ADE Cafeは、ADEと保護者を結ぶコミュニティーです。このコミュニティーの形成のため、誰もがリラックスして食事をしながら意見を共有できるアットホームな雰囲気を持つイベントを開催します。



Apple Distinguished Educators(ADE)は、Appleのテクノロジーを教室の内外で利用してすばらしい実績を上げている、教育界のリーダーたちによるグローバルコミュニティです。


とあります。

今回のテーマは「おうちでもできるAppleの革新的な教育」とのことで、Apple Store の協力で iPad も数台展示されており、発表もどのような iPad アプリをインターナショナルスクールの授業で使っているか、あるいは自宅で使っているかといった内容が続きます。

Apple がこうした活動を支援していることは良い事だと思いますし、僕自身は iPhone/iPad は各世代ほぼそろっている上に MacBook Air に Mac mini と家中 Apple 製品だらけで Apple 信者と言ってもおかしくないほど。紹介されていたアプリも興味深いものが色々ありました。

ですが、以前からの僕の考えは変わらず、「まだ iPad はこどもにオススメできるレベルには到達していない、Mac でも Windows でもよいので PC を使わせるべき」です。

なぜなら、iPad(iPhoneも含みます)を使ってできることというのは、まだまだインプット主体の活動だからです。YouTubeの動画を観る、音楽を聴く、検索して調べ物をする、ゲームで遊ぶ、これらはすべてインプットです。PC のキーボードに比べるとまだまだ使い勝手が良いとはいえないiPad のキーボードでは、どうしてもアウトプットの活動に制限がかかってしまいます。使い勝手が良いアプリがそろそろ揃ってきたのかもしれないのですが、とはいえ、絵を描いたり、動画を編集したり、作曲したりといった作業をするにはやはり PC のほうが向いています。

いやいや、ちゃんと使えるアプリを揃えれば、十分アウトプットの活動ができますよ、という反論もあることでしょう。しかしこれはどうでしょうか?「iPad では iPad のアプリを作ることができないが、PC なら PC で動くアプリを作ることができる」、言い換えると「自分が使うあるいは遊ぶものを自分で作ることができない」というのは致命的です。

僕はここがクリアされない限り、iPad や iPhone は、とっても便利なスーパーテレビ + α に過ぎず、もはやアウトプットすることをあきらめ、情報を取り込むのに専念することにした大人向けであって、こどもや若い人にはまだ適さないと思っています。

各発表の感想を書こうと思っていたのに、なんだかつい「iPad は教育にはまだ向かない」話にむきになってしまいました。念のため書いておくと iPhone/iPad は素晴らしい製品だと思っていますよ。iPhone なしの生活なんて考えられませんし、iPad は Kindle で本を読んだり、漫画を読んだり、Hulu で映画を観るのには最適なデバイスです。

Facetime スピーチ: 大阪女学院大学学長 加藤映子教授


こどもたちが自分たちで絵本を作る活動を紹介されていました。PC以前の時代では、絵本は専ら与えられて読むだけのもの。それが今なら、やり方を工夫してちょっと頑張ればプロダクションレベルのものを自分たちで作れてしまいます。絵本に限らず、写真を撮ったり、動画を作ったり、作曲したりといったことも同じだと思います。作る側にまわってはじめて製作者の努力だったり、工夫しているところなどにも気づくのだと思います。

オープニングスピーチ: 西町インターナショナルスクール 堀井清毅


こどもたちがブログを書くことをすすめていらっしゃって、全面的に同意しました。Facebook や Twitter では文章構成力は身につかないという点も納得。まるで自分が言われているようで、「僕もブログをもっと書かないと」と思いました。(だからこのエントリーも久しぶりに書きました)

アウトプットすることが大事ですね。絵本を作るという話もそうなのですが、これって別にこどもだけに限らない話で本当は大人もやるべきだよね、と聞きながら思っていました。

プレゼンター:横浜インターナショナルスクール Mike Mural先生(通訳あり)


横浜インターナショナルスクールでの授業風景や実際に使っているアプリの紹介。横浜インターナショナルスクールには、以前 Barcamp という IT 系のイベントが行われたときに行ったことがあるのですが、そのときと変わらないどころかますます、インターナショナルスクールと公立校の差をまざまざと見せつけられました。その差って授業料の差なのでしょうか?ITの力を利用すれば、コストを最小限にして、レベルの高い教育を誰にでも与えることができる、というのは空虚な理想論なのかなあと、モヤモヤしっぱなしでした。

プレゼンター:福島県立平養護学校 稲田健実先生


特別支援教育で使用されている支援機器のひとつ、VOCA(音声表出意思伝達補助装置)を例に、「道具はあるだけでは意味がなくて、それをどう使うかが大事」ということを考えさせられた発表でした。散々冒頭で iPad を dis ってしまいましたが、要は使いようなわけで、アウトプットが苦手なデバイスならば、アウトプットに適したデバイスなどと組み合わせればいいのです。

プレゼンター:主婦ブロガー 神谷加代さん


その iPad は使いよう、ということを色々なアプリと実際に家でどう使っているかとを合わせて発表してくださったのが次のプレゼンでした。辞書アプリで調べた単語を、Google の画像検索で調べて、画像や写真が少ない辞書を補完する形で使っている例は目からウロコでした。そしてないものは自分たちで作ってしまえ、ということで、両親のメールに送信できる「ただいま」というアプリと、音読の記録ができる「おんどく」というアプリを実際に作ってしまうところがすごい。

プレゼンター:教育×ICT「ママプリ」アドバイザー 関島章江さん


ICT 教育を一回限りとかで終わってしまうワークショップのような形でなく、継続してこどもたちに受けさせるためにはどうしたらいいでしょう?と問題提起を投げかける内容のプレゼンでした。

小中学生にプログラミングを教えるCoderDojo Tokyoという活動を行なっているのですが、一年間続けてきてまさに同じような悩みというかひっかかりを感じていたので、プレゼンのあとに少しお話させていただきました。

「民間の学童で教えてみてはどうか?」というアドバイスをいただき、なるほどと感じたので、その線でトライしてみようと思っています。

おわりに


プレゼンと歓談の時間が交互に配置されていて、とてもオーガナイズドされていたイベントでした。第2回目があったらぜひまた参加したいと思います。

関連エントリー


» こどもが継続的にそして意欲的にプログラミングを続ける秘訣

» 「読み、書き、プログラミング」は誰が学ぶべきか?

» CANVASのプログラミングワークショップin東北で亘理小学校の6年生たちにスクラッチを教えてきました

» Scratch Day 2011 in Tokyo に参加してきました

RubyMotion で作ったマンホールマップをメンテしてくれる方を募集します

RubyMotion で作った「マンホールマップ」、AppBank に紹介されて、ここ数日ありえないくらいダウンロードされ始めてしまいました。

» マンホールマップ: ディープなマンホール写真の世界にご招待。もうこれはナイスマンホ!!無料。

こうなってくると、気長にメンテしようと思って放置していた使い勝手の悪さや不具合などを直さないとせっかくダウンロードしてくれたユーザーに申し訳ない。

ですが、いまのところ別の Web サービスを開発中でなかなか手が空かない上に、RubyMotion はブランクがある。

そこで、僕の代わりに、マンホールマップのメンテをやってもいいよ、という方を募集したいと思います。

一応、RubyMotion 本家のアプリ紹介のページにリストされているアプリです。

地図画面の改良や、マンホールの写真を投稿する機能を追加するのが目下のタスクです。

ご察しの通り、無料でマイナーなアプリゆえまったくといって良いほど収益はないので、お金をお支払いすることはできません。また RubyMotion を持っていないという方はここから購入していただく必要があります。¥20,335 です。(2013/4/16 現在)

なのですでに RubyMotion を持っている人でないと厳しい感じはするのですが、これから iOS アプリの開発をしたい、RubyMotion を使ってみたい、という意欲を持っている方であればコーチングします。

興味がある方は、つくる社のお問い合わせよりご連絡ください。

[追記] このエントリー書いた翌朝にはさっそく応募があり、Twitter ID、ブログのURL、GitHub のアカウントを教えてもらって見させてもらい、良い人そうだったのでその夜にお会いし、決定しました。インターネット凄い!

Engine Yard Cloud で ISO-2022-JP メールを送って文字化けする場合の対処法

これ、Engine Yard Cloud を使っている日本のユーザーにとっては FAQ になるのではないかと思ったのでメモ。

Engine Yard Cloud を使っていてメールを送る場合は SendGrid アドオンを使います。

メールの文字コードは最近は UTF-8 でも大丈夫みたいな情報も見るのですが、念のため mail-iso-2022-jp gem を使って ISO-2022-JP で送ります。

すると、短いテストメールでは問題なかったのですが、ちょっと文面が長くなると文字化けしてしまいました。

受信したメッセージのソースをみてみたところ、なぜか text/plain の文面(こちらは正常に表示されている)のあとに text/html(HTMLメール) が続く形で、multipart で送られていました。そして text/html(HTMLメール) の文面が文字化けしている。

どうもこれは SendGrid の仕業のようです。

SendGrid の管理画面に入り、Global Settings のメニューを選び、Don't convert plain text emails to HTML にチェックを入れたところ、plain text のままで送られるようになり、文字化けしなくなりました。



Vagrant 入門 - Vagrant 1.1.x 以降でイメージのスナップショット機能を使う

Vagrant には sahara という、ある時点のイメージの状態を保存しておいて、いつでもその時点に戻ることができる便利なスナップショット機能を追加するプラグインがあるのですが、1.1.x 以降利用できなくなっていました。

困ったなー、と思っていたのですが、解決方法はなんのことはない。1.1.x で VMWare などの他の仮想化ツールに対応はしましたが、以前と変わらず VirtualBox を使っている場合は、VirtualBox マネージャー(VirtualBox の GUI クライアント)を起動して、そこからスナップショット機能を使えばいいのです。

Vagrant の機能自体ではないので、「Vagrant 1.1.x 以降で」というよりは「Vagrant 1.1.x 以降を使っていてイメージのスナップショット機能を使う」ということになりますが。。



ちなみに、プラグインでなく、Vagrant 自体にスナップショット機能を追加して欲しいという要望は GitHub の issues に挙がっているのですが、Vagrant は以前から VirtualBox 以外の仮想化ツールにも対応することは予定されていたようで、VirtualBox 以外でスナップショット機能が使えるとは限らないため、本体がその機能を持つことは見送られているようです。

» add 'vagrant snapshot' option · Issue #143 · mitchellh/vagrant

Vagrant の作者は Mitchell Hashimoto さん。日系人でしょうか、苗字が日本名というだけでなんだか親しみが湧きます。

システムやアプリは内製が一番、では職業プログラマは不要なのか?




システムは内製が一番なんじゃないか、と何となく感じたのは、まだ社会人なりたての頃。

「弁当の買い出し」でPCの面白さに目覚めた にあるように僕がプログラムと呼べるようなものを書き始めたのは社会人になってからなのだが、業務を改善するためのちょっとしたシステムをノーツや Perl の CGI などを使って作るのが楽しかった。

ベンダーに投げてそこそこの開発費で作ったであろう社内システムよりも、僕が作った「ちょこっとシステム」の方が、自分含め現場で使う人たちの要望をすぐに反映させて修正できずっと使いやすかった。

使う人自身がつくってしまうのが結局一番いいんじゃないかとおぼろげながら感じ、そしてちょっと勉強すればそれが可能なソフトウェアこそ、その理想形に近い分野なんじゃないかと思ったのが20年近く前、まだ Netscape が有料だった頃だ。

そして現在、やる気さえあればプログラミングを学ぶことは当時に比べて格段に簡単になっていると思うし、例えば Ruby on Rails のようなフレームワークを使えば、ユーザー登録のような以前だったらそこそこ面倒な機能も、あっという間に実装できる。サーバーだって、クラウドのサービスを使ったりすれば、月数百円〜数千円でとりあえず始められる。Heroku とか使えば無料だ。

iPhone アプリのようなスマートフォン向けアプリは Web アプリほど簡単とは言わないまでも、頑張って書籍とかで Objective C を勉強したり、あるいは Titanium などを使えば、そこそこのものを作り上げ App Store で公開するところまではいけると思う。

そういう時代では、旅行好きな人が旅行好きが欲しいと思うアプリを作ればいいし、自転車好きが自転車好きのためのアプリを作ればいい。歴史や城が好きでたまらない友人に Rails をやってみたらと勧めたら城フォトというウェブサービスを作ってしまった。

では職業プログラマは不要になるのか?というとそうではないと思う。

僕はどちらかというと、作りたいものありきでプログラマーになった、アプリ側に近い人間なのでよく分かるのだが、〇〇好きが自分のためにシステムやアプリを作ると、最初の動くところまでは何とか完成し、数人〜数百人が使うレベルまではいくのだが、その後色々な壁にぶち当たる。たとえば、サーバーのことがよくわかっていないのでパフォーマンスが思うように出ないとか、コードが汚かったりテストコードを書いていないのでメンテナンスが難しくなってきたり、などだ。

職業プログラマ、いわゆるプロと呼ばれる人たちは、そういうところで的確にアドバイスしたり、ヘルプに入ったりする役割が求められているんじゃないかと思う。

例えば、サーバーの構成の見直しをアドバイスしたりパフォーマンスチューニングを提供するインフラエンジニア、定期的にコードレビューをしたりペアプロして、効率的なコードの書き方をアドバイスするプログラマー、使いやすい UI/UX をアドバイスするデザイナー、などなど。

大学のとき僕は機械科で、旋盤などの工作機械が並ぶ工作室というものがあったのだが、そこには機械の使い方を教えてくれたりいろいろアドバイスをしてくださる技官の方がいた。技官の方はコツなどを教えてくれるけれど、代わりに作ってくれるわけではなく、あくまでも旋盤を実際にいじってものを作るのは自分自身だ。魚を代わりに獲ってくれるのではなく、魚の釣り方を教えてくれたわけだ。

ソフトウェアも、つくりたいものをプロが全部代わりに作ってあげる、というのではなく、高度な専門知識や経験を活かしたアドバイスをしたり、さわりの部分や難しい部分は手伝って作るけれども、あとはそれを欲しいと思っている人自身にまかせる、という形がもっとあったほうがいい。そうすれば、もっと使えるシステムやアプリが増えるんじゃないかと思っている。

Vagrant 入門 - Mac 上に仮想マシンを簡単に用意する

» Vagrant 入門 - Windows 上に Linux の仮想マシンを簡単に用意する - 僕は発展途上技術者

に続いて、今度はメインマシンの Mac に Vagrant をインストールしてみました。

こちらは Windows 上と比べて、さらに格段に簡単でした。

以下手順を紹介します。

Virtual Box のインストール



Vagrant は仮想マシンをコマンドで簡単に用意できるツールですが、実際に仮想マシンを作るのは Virtual Box というソフトウェアです。

Virtual Box の Downloads ページより Mac 版をダウンロードしてインストールします。



インストールはすべてデフォルト設定でOKです。

Vagrant のインストール



次に Vagrant をインストールします。

Vagrant Downloads のページより最新(2013/3/15時点)の 1.1.0 を選び、Mac 版である Vagrant.dmg をダウンロードして、インストールします。



これも特に気にすることなく、デフォルト設定でインストールします。

Vagrant は 1.0.x までは gem でインストールできたのですが、1.1.0 よりこの .dmg ファイルでのインストールとなっています。1.0.x 以前の Vagrant を gem で入れている場合は、新しいバージョンをインストールする前に削除しておくことが推奨されています。

仮想マシンを起動



ターミナルより


vagrant -v


と入力してVagrant がちゃんとインストールされているかを確認してみましょう。バージョン番号が表示されれば OK です。

起動する仮想マシンのイメージをダウンロードして Vagrant に登録します。仮想マシンのイメージは .box という拡張子がついたファイルで、例えば http://www.vagrantbox.es/ には、いろいろな種類の OS のイメージファイルが用意されています。

このうち、今回は Ubuntu lucid 32 を起動してみます。


vagrant box add lucid32 http://files.vagrantup.com/lucid32.box


と入力します。http://files.vagrantup.com/lucid32.box という .box ファイルを lucid32 という名前で登録する、という意味です。

ファイルは数百メガバイトのサイズなので、ダウンロードに少し時間がかかります。

次に、


vagrant init lucid32


を実行して lucid32 を初期化します。初期化すると Vagrantfile というファイルが作成され、各種設定が書き込まれています。この Vagrantfile があるフォルダ上で実行しないと以降のコマンドは効きません。

いよいよ仮想マシンの起動です。


vagrant up


仮想マシンが起動したら、


vagrant ssh


でログインします。

どうでしょう?あっという間に仮想マシンを起動してログインするところまでできたのではないでしょうか。

Vagrant の他のコマンドについては

» Vagrantで簡単仮想マシン構築 \| Ryuzee.com

が参考になります。

起動した仮想マシンを止めるコマンドは、


vagrant halt


です。

Vagrant 入門 - Windows 上に Linux の仮想マシンを簡単に用意する

naoya さんによれば、「便利すぎて鼻血が出ました」という Vagrant を触ってみて、僕も Git を最初に触った以来の衝撃を受けました。

» Vagrant - naoyaのはてなダイアリー

開発者、それも gem で入れることから、Ruby を使う開発者の一部で話題になっているようなのですが、Vagrant はこれからプログラミングしようと思っている初心者や、開発環境を用意する必要があるデザイナーにこそ、強力なツールなんじゃないかと思っています。

Vagrant が便利に思えるひとつのケースとして、Windows の上に Linux の仮想マシンを用意する、というのが挙げられます。Web 業界にいると勘違いしてしまいそうになるのですが、世の中のほとんどの人は開発者も含めて Windows を使っているでしょう。そういう人が PHP や Ruby などを始めてみたいと思った時に、難関となるのが環境構築です。Mac や Linux 上に構築するのに比べて、Windows 上でそういったサーバー系の言語を使おうと思った時の環境構築は面倒です。

Vagrant を使えば、簡単に仮想マシンを Windows の上に用意できます。仮想マシンというのは文字通り、仮想なマシン、もう一台マシンが手に入るようなものです。

仮想マシンを作ることができるソフトウェアには、他にも VMWare など以前からありましたが、Vagrant が使う Virtual Box は無料である、という点が大きい。そして仮想マシンの大きな特徴として、マシン1台全体が一つのファイルなので、そのファイルをやりとりすることで、環境まるごと一つを他の人に渡したりできるという点が挙げられます。

今回 Linux の仮想マシンを用意するのですが、その仮想マシンに PHP や Ruby を用意するほうが Windows にそれらを用意するよりも楽ですし、もっと言えば、PHP や Ruby が最初から使える状態になったマシンを用意することもできるのです。

前置きが長くなってしまいました。Windows 上に Vagrant をインストールして Linux の仮想マシンを一つ用意するところまでの手順を紹介します。

普段は Mac を使っているのですが、家にあるおんぼろ PC の Windows XP にインストールしてみました。

Virtual Box のインストール



Vagrant は仮想マシンをコマンドで簡単に用意できるツールですが、実際に仮想マシンを作るのは Virtual Box というソフトウェアです。

Virtual Box の Downloads ページより Windows 版をダウンロードしてインストールします。



インストールの際はデフォルトの設定で、「次へ」を押し続けました。

Vagrant のインストール



次に Vagrant をインストールします。

Vagrant Downloads のページより最新(2013/3/15時点)の 1.1.0 を選び、Windows 版である Vagrant.msi をダウンロードして、インストールします。



これも特に気にすることなく、デフォルト設定でインストールします。

GitHub for Windows のインストール



あとで Vagrant で仮想マシンを用意したあと、そのマシンにログインするために ssh というツールを使うことになるのですが、Windows にはこの ssh が始めから用意されていません。Windows 上の ssh はいくつかあるのですが、どうせ後々使うことになって便利だと思うので GitHub for Windows をインストールします。GitHub for Windows は GitHub を Windows から使えるようにするアプリケーションですが、ssh も含まれているのです。

GitHub for Windows のページよりダウンロード、インストールします。



環境変数の設定



つまづくとしたらたぶんここのステップだと思います。と言っても注意深くタイプすれば大丈夫です。

[スタート] > [コントロールパネル] > [システム] > [詳細設定] > [環境変数]

を選び、下側のシステム環境変数の中から変数名が Path となっているところをダブルクリック、値の最後が c:¥vagrant¥vagrant¥bin となっていることを確認した上で、そのあとに


;$VBOX_INSTALL_PATH


を追加します。



このキャプチャの通りになっていたら OK です。

仮想マシンを起動



いよいよ最後のステップです。

最後は次々 Vagrant のコマンドを入力していって、仮想マシンを起動します。

コマンドの入力は Windows のコマンドプロンプトを使うのではなく、さきほど GitHub for Windows をインストールしたときに一緒に用意された Git Shell を使います。



デスクトップ上にある Git Shell をダブルクリックして起動します。

Vagrant がちゃんとインストールされているかを確認してみましょう。


vagrant -v


と入力してバージョン番号が表示されていれば OK です。




次に起動する仮想マシンのイメージをダウンロードして Vagrant に登録します。仮想マシンのイメージは .box という拡張子がついたファイルで、例えば http://www.vagrantbox.es/ には、いろいろな種類の OS のイメージファイルが用意されています。

このうち、今回は Ubuntu lucid 32 を起動してみます。


vagrant box add lucid32 http://files.vagrantup.com/lucid32.box


と入力します。http://files.vagrantup.com/lucid32.box という .box ファイルを lucid32 という名前で登録する、という意味です。

ファイルは数百メガバイトのサイズなので、ダウンロードに少し時間がかかります。

次に、


vagrant init lucid32


を実行して lucid32 を初期化します。初期化すると Vagrantfile というファイルが作成され、各種設定が書き込まれています。この Vagrantfile があるフォルダ上で実行しないと以降のコマンドは効きません。

いよいよ仮想マシンの起動です。


vagrant up


を実行します。このとき、以下のような警告がでたら、「ブロックを解除する」を選びます。



仮想マシンが起動したら、


vagrant ssh


でログインします。

以下、無事ログインできたところです。

Welcome to Ubuntu! と表示されています。



どうでしょうか?

.box ファイルをダウンロードするところは少し時間がかかるかもしれませんが、全体では比較的少ない手順なので、楽に Linux 環境まるごと一つ用意できるのではないでしょうか。

Vagrant の他のコマンドについては

» Vagrantで簡単仮想マシン構築 \| Ryuzee.com

が参考になります。

起動した仮想マシンを止めるコマンドは、


vagrant halt


です。

Vagrant は他にもいろいろな使い道がありそうです。これから機会があれば順次紹介していきたいと思います。

iOSなどのスマートフォンのブラウザ側でリサイズをおこないファイルアップロードを爆速にする

iOS 6 より Safari からファイルをアップロードできるようになり、写真投稿が必要なウェブサービスで、投稿のためだけにアプリを用意する必要はなくなったかなあ、と最初は思っていました。

ところが、iPhone 5 などで撮った写真などはファイルサイズが結構大きく、Safari からアップロードするときはそのままのサイズで送るため、外出先で 3G だとアップロードにものすごく時間がかかってしまい、ほとんど使い物になりません。

そこで、アップロード前にブラウザ側で写真をリサイズできる方法はないかと探したところ、

» IOS6 and Safari Photo Uploading - File API + Canvas + jQuery Ajax Uploading and Resizing Files Asynchronously - Stack Overflow

で紹介されていた

» Javascript canvasResize Plugin

というプラグインが使えそうだったので、paperclip と一緒に組み込んだ Rails のサンプルアプリを作ってみました。

» champierre/canvas_resize_sample · GitHub

canvasResize Plugin でファイルをリサイズした結果を DataURI にした上で、それを hidden で送信するようにしています。

既存のプロジェクトに導入する場合の手順は README に記したので、上記 GitHub のリンク先を参照してください。

いま作っているウェブサービスにさっそく導入してみて、iPhone 5 で撮った写真のアップロードに要する時間を計測してみたところ、3G回線で通常は1分近くかかっていたのが、300px x 300px 以内にリサイズした上でアップロードしたところ、10秒弱と爆速になりました。

扱えるのが jpg のみ(写真だけの場合は問題ないはずですが。。)だったり、極端に小さいサイズのファイルではエラーになったりというサンプルですが、よかったら参考にしてみてください。

また、実装方法などでもっといい方法があったら、コメントなどで教えていただけるとありがたいです。


プロフィール

株式会社まちクエスト代表、つくる社LLC代表。

Scratchで楽しく学ぶ アート&サイエンスRaspberry Piではじめる どきどきプログラミングを書きました。

オンラインコンテンツ: 大人のためのScratch

Amazonから図書館検索 Libron、iPhoneアプリ ひらがなゲーム かなぶん を作っています。

Email: webmaster at champierre dot com

Twitter @jishiha

最近のエントリー

アーカイブ