僕は発展途上技術者

スクールプレゼンター(通称スクプレ)の教材データを共有するサイト、「スクプレ道場」を制作しました

[スクールプレゼンター](http://www.culture-pro.co.jp/SchoolPresenter/)(通称スクプレ)という小学校の先生向けに開発された教材作成ツールがあるのですが、そのツールで作成した教材データを共有できるサイト「スクプレ道場」を制作させていただきました。

» スクールプレゼンター教材共有サイト - スクプレ道場

スクールプレゼンター教材共有サイト - スクプレ道場


Facebook アカウントでログインすれば、実質スクプレを使っている先生に限られますが誰でも教材を投稿できます。閲覧しダウンロードするにはアカウントは不要なので、こちらは本当に誰でも利用できるようになっています。Ruby on Rails で開発し Heroku にホスティング、Twitter Bootstrap を使ってスマホでも閲覧できるようにレスポンシブデザインにしました。

教育関係のサイトやサービスというのは、失礼を承知で書くと、十年前から時が止まってしまったようなものが多い印象がある中で、敢えて自分が今ウェブサービスをつくるとしたらこう作るという手法ばかりを使って「スクプレ道場」を作ってみました。

そもそも何で学校の先生でもないのに、このようなサイトを作ることになったか?と思われるかもしれません。その経緯について以下に紹介したいと思います。

知育ゲームアプリ[かなぶん](http://ja.kanabun.org/)を出したばかりの頃、小学校の教員をやっている妹から「こういうものがあるけれど興味がある?」ということで紹介してもらったのがそもそものきっかけとなった[算数授業ICT研究会](http://www.sansu-ict.jp/)でした。算数の授業にICTをどう取り入れるかを考える研究会で、参加してみたらまわりは学校の先生ばかりという完全アウェイの状況でしたが、算数の模擬授業などを見て単純に見るもの全てが新鮮でとても楽しめました。

その模擬授業で使われていたのがスクールプレゼンターで、次に実際に教材を作ってみる実習に参加して体験させてもらったあとに、妹に「ああいうの使ってみたりするの?」と聞いてみたところ、あっさり「私には無理」という答え。僕と同じ血が流れているとは想像できないくらい IT 音痴な妹にとっては、すでにできている教材データを使って操作するくらいならできるけれど、教材データを自分で作るというのは全然考えられないとのことでした。ならば誰か得意な人が教材データを作ってネット上で共有すればいいじゃないかというのがプログラマー脳な僕の発想です。

研究会の後の懇親会にまでのこのこ着いていった僕は、妹との上記の会話もあって、「学校の授業の進め方やたとえばスクプレの教材データなんか、もっと学校を越えて先生の間でどんどん共有すればいいのに」といった話を先生方にしました。教育関係の本なども書き、妹にとっては有名人なえらい先生もいらっしゃったようなのですが、門外漢な僕はまったく遠慮を知りません。調子にのって、「コンピューターのソフトウェアの世界ではオープンソースという考え方があって。。」などと説明していたら、当のスクールプレゼンターを開発している[株式会社カルチャー・プロ](http://www.culture-pro.co.jp/homepage/index.html)の担当の方、伊藤剛さんをその場で紹介していただいたのです。

改めて、伊藤さんにスクプレで作成した教材データを共有できるウェブサイトがあったらいい、という話をしたところ、それは面白いぜひやりましょうということになり、販売元の内田洋行など関係者の方々に提案、説得してまわってくださり「スクプレ道場」を開発させていただける運びとなったのです。

開発する最初の段階ではまだ Facebook が広く知られていなかったため、Facebook アカウントでログインできるようにしたらどうか?とか各教材データに対して「いいね」できるようにして「いいね」順に並べたらどうか?などの提案の数々に対して、正直、こいつは何を言っているんだろう?と思われたのかもしれないのですが、ひとつひとつ丁寧に説明していくことで理解していただけたのだと思います。

まだリリースしたばかりなので、まだまだこれからなのですが、こうした試みがうまくいったと言ってもらえるようできるだけの協力をしていきたいと思っています。

学校の先生の方、良かったら使ってみて下さい。まわりにそういう人がいるという方、もし良かったら紹介してあげてみてください。

» スクールプレゼンター教材共有サイト - スクプレ道場



↑こんな感じで自分のブログに教材ファイルの案内を貼り付けることもできます

iOS の UIWebView で UserAgent を変える簡単な方法とその落とし穴

iOS の UIWebView で UserAgent を変えるのって意外とややこしいという認識だったのですが、検索して調べてみたら簡単な方法がありました。

» [Easily set the User-Agent in a UIWebView \| MPHWeb](http://www.mphweb.com/en/blog/easily-set-user-agent-uiwebview)

で紹介されている方法で以下のたった三行で済みます。



これで十分だったのですが、思わぬ落とし穴が。。

UserAgent を変更したアプリに AdMob のバナーを貼っていたのですが、広告がまったく表示されなくなってしまいました。

上記方法だと、すべてのリクエストの UserAgent を変えてしまうことになり、どうも変更前の通常の UserAgent を送っていないと AdMob 側でバナーを表示しないようになっていたようです。

AdMob を使っている方はご注意を。。

というわけで、僕は上記方法を断念しましたが、UserAgent を単に変更したいだけならば使えると思います。

Chrome で、Google 日本語版と英語版を素早く検索する方法、およびその他の便利な検索ワザ

前回の

» プログラマーがてっとり早く検索スキルを上げる方法

で Google 日本語版と Google 英語版とをうまく使い分けることを説明しましたが、その具体的な方法を紹介します。

紹介する方法は Chrome での方法です。他のブラウザでも似たようなことはできると思います。

Chrome には、あらかじめキーワードを登録して、アドレスバーにそのキーワードと文字列をつなげて打ち込むと素早く検索できる機能があります。たとえば、「ruby」を検索したいなと思ったら、アドレスバーに「g ruby」と入力するだけです。

これを実現するにはあらかじめ g というキーワードを登録しておきます。Chrome のメニューから「環境設定」を選択、なかほどの「検索エンジンの管理...」というボタンを押します。

「検索エンジン」というウィンドウが開くので、一番下にいって、名前、キーワード、URL の順に登録します。




僕の Chrome には g と gj が以下のように登録されていて、Google 英語版で検索したいときは「g rails」と打ち込み、Google 日本語版で検索したいときは「gj ruby」と入力します。



登録している URL は以下の通り、%s のところがキーワードで置き換えらます。


g:
http://www.google.com/search?hl=en&source=hp&q=%s&btnG=Google+Search&aq=f&aqi=&aql=&oq=&gs_rfai=



gj:
http://www.google.co.jp/search?hl=ja&source=hp&q=%s&btnG=Google+Search&aq=f&aqi=&aql=&oq=&gs_rfai=


他にもいくつかキーワードを登録していて便利なのでいくつか紹介しておきます。

英辞郎



「e ruby」で「ruby」を ALC の英辞郎 on the WEB で検索します。


e:
http://eow.alc.co.jp/%s/utf-8/


Amazon



「a 1Q84」で Amazon を検索します。


a:
http://www.amazon.co.jp/gp/search?field-keywords=%s&index=blended&__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A


Google マップ



「m 東京駅」で Google マップを検索します。


m:
http://maps.google.co.jp/maps?oi=map&q=%s


YouTube



「y 浜田省吾」で YouTube を検索します。


y:
http://www.youtube.com/results?search_query=%s&page={startPage?}&utm_source=opensearch


自分のツイートを検索



自分のツイートを検索したいときは「t rails」で twilog を検索します。jishiha のところは twitter のアカウント名なので、自分のものに置き換えて下さい。


t:
http://twilog.org/tweets.cgi?id=jishiha&word=%s


以上は、一般的なもの。

これ以降はプログラマー特有のものを紹介します。

stackoverflow



最近は Google で検索するより Stack Overflow を直接検索した方が早いというときがあります。そんなときは「s rails」で SO を検索します。


s:
http://stackoverflow.com/search?q=%s


iOS Reference Library



iOS アプリを開発しているときは、Apple のドキュメントを検索したいときがあります。そんなときは「i uiwebview」で検索します。site:developer.apple.com をキーワードに追加して Google 検索しています。


i:
http://www.google.com/search?hl=en&source=hp&q=%s+site%3adeveloper.apple.com&btnG=Google+Search&aq=f&aqi=&aql=&oq=&gs_rfai=


Android Developers Reference



Android アプリを開発しているときは、「d webview」です。a は Amazon とかぶるので、キーワードは Droid の d にしています。


d:
http://www.google.com/search?hl=en&source=hp&q=%s+site%3adeveloper.android.com&btnG=Google+Search&aq=f&aqi=&aql=&oq=&gs_rfai=


自分のブログを検索



site: キーワードを追加して Google 検索という技はいろいろと使えます。自分のブログだけを検索したいときもあって、そういうときは「h rails」です。h は「発展途上技術者」の h です。


h:
http://www.google.co.jp/search?hl=ja&q=%s+site%3ablog.champierre.com&btng=%e6%a4%9c%e7%b4%a2&lr=&aq=f&oq=


いろいろと自分がよく使う検索を登録して、便利に使ってみて下さい。

プログラマーがてっとり早く検索スキルを上げる方法

タイトルでは「プログラマーが。。」としているけれど、海外の情報を積極的に活用する立場にある人すべてに言えることだと思う。

プログラマーのスキルのひとつとして、検索して解決方法をみつける、というのはいまや超重要。その検索スキルを簡単に手早くレベルアップさせるのが、「英語のキーワードで検索すること」だと思っている。

技術情報のほとんどが英語で発信されており、日本語の情報はそれをなぞっただけのものであったり、単なる翻訳に過ぎないことが多い。日本語で検索してヒットした情報だけでは不十分で、結局英語で検索し直してより広範囲かつ詳細な情報を探すことが多い。日本語でみつけた情報の原文がヒットし、読んでみたら、翻訳が全然間違っていたなんてケースもある。

そうなってくると、技術的な情報が欲しいときには、検索結果には英語の情報だけが表示されて欲しくて、日本語の情報は邪魔なので表示されて欲しくない。「英語のキーワードで検索すること」というのは、「Google 日本語版で英語のキーワードで検索する」ことではなくて、「Google 英語版で英語のキーワードで検索する」ことなのです。

もちろん日本語の情報が欲しい時、たとえば「近くでおいしいところはないかなあ」なんていうときは Google 日本語版で検索するのは当たり前だ。技術情報でも日本語特有の問題(たとえば文字化け)を調べるときも Google 日本語版で検索する。

Google 英語版と Google 日本語版を切り替えて使いこなす必要があるのだけれど、これが意外と簡単にできなかったりする。普段 Google 日本語版を使っていれば、http://google.co.jp でなく http://google.com にアクセスしても Google 日本語版に飛ばされてしまう。

僕は Chrome のアドレスバーにキーワードを登録する方法で、この切り替えを実現していてそれについては次のエントリー

» Chrome で、Google 日本語版と英語版を素早く検索する方法、およびその他の便利な検索ワザ

で紹介しています。Chrome 以外のブラウザを使っている場合は、同じようなことを実現する方法があるはずなので調べていただきたい。

ここで言いたかったのは、技術情報を検索するときは「Google 英語版で英語のキーワードで検索する」ということでした。

Lokka で translation missing が出まくって困ってしまった場合の対処方法

しばらく前に、まったく何の変更も加えていないにもかかわらず、以下のキャプチャのようにこのブログを動かしている Lokka で translation missing が出まくってしまい、ブログを更新する気が全くうせてしまっていました。


おそらく Lokka が動いている Heroku で何らかの変更がおこなわれたことの影響だと思うのですが、やっと対処方法をみつけたので、もしかして同じ問題で困っている人もいるかもしれないと思って、以下に公開しておきます。

修正する必要があるのは lib/lokka/app.rb の38行目あたり、以下のように I18n.reload! の一行を追加します。



I18n.load_path にロケールファイルのパスを追加しても、ファイルが読み込まれていなかったようなので明示的に reload をしてみたのですが、このブログのほかにも Lokka で運用しているサイトではこのような問題は起こっていなかったので、なんでそうなってしまっているのか謎です。

RubyMotion で API にアクセスし、取得した JSON をパースして表示するサンプル

Ruby で iOS アプリを開発できる Ruby Motion を使ってアプリを作り始めているのですが、Objective C で開発していたときと比べて楽過ぎてヤバいです。

Ruby Motion だけでも充分楽になるのですが、さらに BubbleWrap というラッパーと一緒に使うと、コードがとってもシンプルになって楽しい。

どんなにコードがシンプルになるかをデモするために、API にアクセスし、取得した JSON をパースする、という良くあるパターンを含んだサンプルアプリを作ってみました。 

World Countries API にアクセスし、取得した JSON から国名のリストを作成し、画面をタップするごとにランダムに国名を表示します。

このサンプルを動かすには、

gem install bubble-wrap

で BubbleWrap をインストールしたあと、Rakefile に

require 'bubble-wrap'

を追加する必要があります。

アプリのソースコードは GitHub に置きました。


» champierre/RubyMotionSamples/Countries



RubyMotion で画像を View の上に表示する

備忘録的にメモ。





image = UIImage.imageNamed("icon.png")
@image_view = UIImageView.alloc.initWithImage(image)
@image_view.frame = CGRectMake(0, 0, 36, 36)
view.addSubview(@image_view)




view raw
gistfile1.txt
This Gist brought to you by GitHub.




表示したい画像の画像ファイルは resources 以下に置きます。

Greasemonkey(グリースモンキー)で実感できるプログラミングの素晴らしさ




とツイートしたところ、反応をいくつかもらったので詳しく書いてみたいと思います。

Greasemonkey(グリースモンキー)は、ブラウザで開いたWebページを好きなようにカスタマイズできるツールです。Greasemonkeyだけではまったく役に立たなくて、これにJavascriptというプログラミング言語を使って書かれたスクリプト(小さなプログラム)とセットになって威力を発揮します。

userscripts.org などで探せば、他のひとがつくった便利なスクリプトをたくさん見つけることはできますが、自分専用のスクリプトを書くのが一番の醍醐味です。

普段使うページを自分用にカスタマイズすることによって劇的(?!)に便利になる例を挙げてみましょう。

電車を使って外出するとき、僕はいつも「駅探」を使ってどのくらいの時間がかかるかをチェックします。

便利なサイトですが、使ってて不満に思うことがありました。家から使うことがほとんどなので、乗車駅は最寄りの駅とほぼ決まっているにも関わらず、毎回入力しなければいけないのが面倒くさい。



ekitan_before

そこで、駅探用のGreasemonkeyスクリプトを書いて自分専用にカスタマイズしました。

駅探のページを開いたら最初から最寄り駅が入力された状態に、なおかつ下車駅にカーソルが移っている状態にし、すぐ入力できるようにしたのです。



ekitan_after

一回あたり1秒か2秒の節約かもしれないですが、これが毎日使っているサイトだと、積もり積もってだいぶ時間節約になるんじゃないかと思います。

駅探用のスクリプトは以下の通り、とてもシンプルです。






// ==UserScript== で囲まれた最初の部分は、スクリプトのタイトルや説明などの情報で、大事なプログラムの部分は最後のニ行だけです。

document.getElementById('sfname').value = '柴崎';

で乗車駅を入力した状態にし、

document.getElementById('stname').select();

で下車駅にカーソルがあたった状態にしています。

GreasemonkeyはもともとFirefoxの拡張機能で、Firefoxを使っていれば、ここからインストールできます。また、Greasemonkey用のスクリプトはそのままChromeにも読み込むことができて、こちらの場合は特に準備は必要ありません。

FirefoxでGreasemonkeyをインストールしたら、あるいはChromeを使っている場合は、以下のリンクをクリックして、上記の駅探用のサンプルスクリプトを読み込んで試してみることができます。


また、実際にスクリプトが動いている様子を動画に撮ってみましたのでよかったら見て下さい。





プログラムを書くことができれば、このようにちょっとした不便を改善することができるということがわかってもらえたでしょうか?

なかでもGreasemonkeyスクリプトは、それほどたくさんのコードを書かなくても、工夫次第で普段使っているサイトを劇的に便利にする可能性を持っています。

普段の生活で使っているサイトはもちろん、たとえば業務で使っている会社内専用のサイトで、要望を出してもなかなか聞き入れてもらえないような不便なところを自分専用に直してしまう、といったことができてしまいます。

Amazonのページに、その本が近くの図書館で借りられるかどうかを表示する


というツールを開発して公開していますが、これももともとは、図書館の検索ページが使いにくかったために自分専用に書いたGreasemonkeyスクリプトが始まりでした。

最初は自分専用でも、こうして改良していった上で公開され、いまでは多くの人に便利に使ってもらえるものが作れる、というところもプログラミングの素晴らしさじゃないかなと思っています。

Scratch Day Tokyo 2012 に参加してきてました

昨年に続き Scratch Day Tokyo に参加してきました。(昨年のレポートはこちら

Scratch に関わっている人にとっては年に一度の大イベント。

昨年はこども達含めどちらかと言うとユーザーとして参加した形でしたが、今回は、OtOMO の一員として、ワークショップのお手伝いや運営もお手伝いしながらの参加でした。

写真をまじえてレポートします。


↑会場は「多摩センター」駅前にひときわ高くそびえ立つベネッセの本社ビル。

↑ Scratch Day 始まりました。Scratch  が作られた MIT から送られてきたオープニングビデオが流れているところ。


↑ 1日目はワークショップとデモ主体で進められました。Otomo 主催の「キネクトとスクラッチをつなげて体をつかったゲーム作り」のワークショップ。


↑ 発表の時間。それぞれのチームがつくったゲームを順番に見てまわります。


↑ 別の部屋ではデモもおこなわれています。次男が一番夢中になったのはこれ。寒天でできた丸いパーツをつみあげていくとスクラッチ上でタワーが完成する東京造形大学の学生さん達の作品のひとつ。上から光を投射していて、その光が寒天に遮られることにより光センサーの値が変わることを利用した面白い仕組みです。


↑ 2日目はセミナーとワールドカフェ主体でおこなわれました。大ホールに会場を移しての開催です。

↑ 25年前ゲーマーだった僕、そして現ゲーマーの長男の心に一番刺さったのは、この対戦ゲーム。ラーニングセンター新浦安の中学生達がつくった作品のなかのひとつです。

Scratch Project

» Scratch | プロジェクト | zero fighter

↑ こちらはラーニングセンター新浦安の別の中学生の作品、zero fighter。細かい作りこみが半端なくて、スクラッチでここまでできるのかということを見せつけられました。ぜひ、画像をクリックしてスクラッチのサイト上で実際に遊んでみてほしいです。

上の子があと2年もすれば中学生になるということもあって贔屓目にみているのかもしれませんが、ラーニングセンター新浦安の中学生たち、それに造形大学の学生たちや大人を含めたほかの出展者たちも、自分たちの作品を実際にさわってもらいながら説明し、そして控えめに自慢する姿は見ていていいなあと感じました。

彼らがもっと称賛をうけるような場があるといいな、と思うと同時に、僕自身まだまだ足りていないのだけれども「それいいね」と思ったら、それを正直に伝える、具体的には直接伝えたり、Scratch のサイトでコメントを残したり、ブログや  Twitter や Facebook で紹介するということをやっていきたいと思いました。

例年は1日だけのところを、今年は2日間にわたっておこなわれ、2倍楽しい Scratch Day でしたが、運営側はその分大変だったと思います。関係者の方々、お疲れ様でした。

コンプガチャの仕組みを小5長男に教えてみた

コンプガチャの仕組みを小5長男に教えてみました。

参考にしたのは、


» コンプガチャの確率マジックを中学生にも分かるように説明するよ - てっく煮ブログ


一回10円でサイコロを振って、1から6まですべて揃えたら(つまりコンプ)100円のジュースがもらえるとして、お小遣い使ってそのゲームをやるか?と聞いてみました。

なんとなく6回じゃ無理そう、というのはわかるようですが、じゃあいったいどのくらいでコンプリートできそうかはよくわかりません。

確率や期待値の計算はまだ教えず、スクラッチ(スクラッチって何?というかたはこちら)を使って力技で解いてみたら?ということで自分でつくらせてみました。

大人からみるとだいぶ粗いつくりなのですが、せっかくなのでそのまま載せておきます。



スペースを押してリストをクリアしたあと、右上の緑の旗(スタート)を押してください。実際にスクラッチで1から6までの乱数を発生させ、コンプリートするまでの回数を数えます。

これを10回くりかえし、10回で合計サイコロを何回ふったかと、それを10で割った値、つまり何回でコンプリートできたかの平均をだしたのが左側の数字です。

理論値(14.7回)に近い数字がでてくると思います。

最初に掲げたゲームはどうやら自分に不利ということがわかったようです。

プロフィール

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

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

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

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

Email: webmaster at champierre dot com

Twitter @jishiha

最近のエントリー

アーカイブ