僕は発展途上技術者

Rails のローカル開発環境でSSL(https)を使えるようにする

» iOS10から位置情報取得にはHTTPS必須?

iOS10から、位置情報取得にはhttpsが必須になったようで、httpのままだと位置情報を取得して現在地を検出することができなくなってしまいました。



開発・運営しているまちクエストの本番環境はhttps対応しているので問題ないのですが、Railsでの開発環境にiPhoneでアクセスしてモバイル環境での動作を確認するとき、通常はhttpアクセスなので困ってしまいました。

調べたところ、開発環境でも簡単にhttpsアクセスできるようにしてくれる方法をみつけました。

» jugyo/tunnels

という gem を使います。

$ gem install tunnels

でインストールしたあと、

$ rails s

でRailsサーバーを起動したあと

$ sudo tunnels 10.0.x.x:443 127.0.0.1:3000

で10.0.x.x(LAN内のプライベートIPアドレス)の443ポートへのアクセスを3000番にプロキシすることができます。

これで https://10.0.x.x のようにhttpsアクセスできるようになり、位置情報も問題なく取得できるようになりました。

Scratch 3.0 のプロトタイプをローカルマシンで動かしてみる

Scratch 3.0 のプロトタイプをローカルマシンで動かしてみました。

インストールの手順は、GitHub にあるscratch-vmに書かれている通り、git と npm が使える環境で

git clone https://github.com/LLK/scratch-vm.git
cd scratch-vm
npm install


でインストール、

npm start


で起動します。

Gobo を左右キーで動かしてみました。



「端にあたったらはねかえる」はまだ未実装のようで、Gobo がどこかに吹っ飛んでいってしまいました。

ソースコードは JavaScript で書かれているので改造しやすいし、バグなど直して貢献できるかもしれないですね。

スクラッチャーのためのScratchX入門 - その2 自作オリジナルブロックをつくろう

その1からだいぶ日にちが経ってしまったのですが、個人的にScratchXが再ブームなので、スクラッチャーのためのScratchX入門、その2を書きたいと思います。

前回のエントリーはこちら↓

スクラッチャーのためのScratchX入門 - その1 ScratchXとは?

ScratchXでは自作のブロックをつくることができます。

ブロックや、そのブロックが実行されたときの動きをプログラムするにはJavaScriptを使います。

JavaScriptで書かれたスクリプト(小さなプログラム)をScratchXで読み込むことで、そのスクリプトを実行することができるのですが、スクリプトのファイルは通常GitHubページに置くことが推奨されています。

ただし、GitHubにアカウントを作るには13歳以上でないといけないため、ほとんどのスクラッチャーには難しい上に、GitHubページを作成してそこにファイルを置くのは少し手間がかかると思います。

そこで、ローカル(みなさんが持っているパソコン上ということ)に置かれたスクリプトファイルをScratchXで読み込む方法を紹介します。本格的にScratchXの拡張機能を作ろうという場合には、GitHubページにスクリプトファイルを置く必要がでてきますが、とりあえず試してみたいという場合は、以下の方法で十分です。

まず、Bracketsというアドビが作った無料のエディタをダウンロードしてインストールしてください。

次に適当な作業フォルダを用意(たとえば Work とします)し、Bracketsを起動したら、[ファイル] > [フォルダを開く...] を選んで、workを指定します。

work以下にtest.jsというファイルを新しく作成し、以下の内容をまるごとコピペします。Bracketsの左側のタブで、work▼ 以下で右クリックのあと[新しいファイル]を選べばファイルを作成することができます。

(function(ext) {
ext._shutdown = function() {};

ext._getStatus = function() {
return {status: 2, msg: 'Ready'};
};

ext.test = function(str) {
/* ボタンが押されたときの処理を書く */
};

var descriptor = {
blocks: [
/* ブロックの定義を書く */
]
};

ScratchExtensions.register('Test', descriptor, ext);
})({});


ScratchXに必要というわけではないのですが、後で説明するBracketsのライブプレビュー機能に必要なので、work以下にindex.htmlというファイルを新しく作成します。中身は何でも構いません。空でもOKです。

以上2つのファイルを作ったら、Bracketsの右上の方、稲妻のアイコンをクリックして、ライブプレビュー機能を起動します。



するとブラウザが自動的に立ち上がり、http://127.0.0.1:50110/index.html (:以降のポート番号はランダム) といったアドレスの、先程作成したindex.htmlのページが開きます。

アドレスのindex.htmlをtest.jsに置き換え、http://127.0.0.1:5xxxx/test.js と入力し直し、ブラウザをリロードすると、test.jsの内容が表示されます。これが、これからScratchXに読み込ませるスクリプトのアドレスになります。

ScratchXのページ(http://scratchx.org)を開き、「Open Extension URL」をクリックします。

スクリプトのURL(アドレス)を入力する欄が表示されるので、先ほど開いたスクリプトのアドレス http://127.0.0.1:5xxxx/test.js を入力して、Openのボタンをクリックします。

スクリプトファイルを本当に開いていいかどうかを確認するWarning画面が表示されるので、緑色の「I understand, continue」をクリックします。

ScratchXの画面上、中央にTestというスクリプトの名前と丸い緑色のアイコンが表示されていれば、スクリプトの読み込み成功です。



このテスト用スクリプトには、まだブロックも何も定義されていません。これから、ブラウザのアラート画面を使って、実行すればtestと表示するブロックを作ってみましょう。

まず、ブロックを定義します。

Bracketsでtest.jsの中身を編集して、

/* ブロックの定義を書く */


のところに、

[' ', '%s と表示', 'test', 'テスト']


と書きます。

これはJavaScriptでの配列の書き方で、, (カンマ)で区切られたひとつひとつの値が意味を持っています。最初の ' ' (半角スペースを'で囲みます)がブロックのタイプで、一番ノーマルな実行したら何らかの処理をおこなうブロックを意味します。次の '%s と表示' がブロックに表示される文字で、%s のところが自由に文字を入力できる欄になります。3つ目の 'test' は、ブロックが実行されたときに動くJavaScriptのスクリプトの中の関数の名前になります。最後の4つ目が、さきほど %s で表したブロックの文字入力欄に最初から入っている文字になります。

3つ目の 'test' は

ext.test = function(str) {
/* ボタンが押されたときの処理を書く */
};


の ext.test の test に対応しており、ブロックがクリックされたり実行されたときの処理は、

/* ボタンが押されたときの処理を書く */


の部分に書きます。

ブラウザにアラート画面を表示する

alert(str);


に置き換えましょう。

strには、ブロックの入力欄に入力された文字が入っているので、alert(str)でstr、つまりブロックに入れられた文字がブラウザのアラート画面に表示される。

書き換えたスクリプトは以下の通りになります。

(function(ext) {
ext._shutdown = function() {};

ext._getStatus = function() {
return {status: 2, msg: 'Ready'};
};

ext.test = function(str) {
alert(str);
};

var descriptor = {
blocks: [
[' ', '%s と表示', 'test', 'テスト']
]
};

ScratchExtensions.register('Test', descriptor, ext);
})({});


このスクリプトをScratchXでもう一度読み込み直すため、ScratchX のトップページ(http://scratchx.org)を開き直し、「Open Extension URL」をクリックしてから http://127.0.0.1:5xxxx/test.js を入力し、Openのボタンをクリック、Warning画面で緑のボタンを押します。

「テスト」と表示、というブロックが「その他」にできていれば成功です。



ブロックをクリックすると、「テスト」と表示されるアラート画面が開くはずです。「テスト」の代わりに別の文字を入れてみてブロックをクリックすれば、入力した文字が表示されます。

以下、スクリプトを読み込み、「テスト」と表示するブロックを実行するまでのデモです。



機会があれば、次は別のタイプのブロックを作ってみます。


RubyKaigi2016 Day 0

書くことに意味があるのです、と言われて RubyKaigi レポート0日目。

横着して、そのアドバイスの主の @komagata さんのブログにリンクを貼っておくのです。

» RubyKaigi2016 0日目 - komagataのブログ

初 Airbnb で渋い民家に泊まって、のんびりしています。

あと、去年の RubyKaigi のときに書いたエントリーへのリンクを貼っておきます。

» 東京にいながらにしてインターナショナルな環境でプログラマー(Rubyist)として働くというお話

万華鏡でみるような模様が簡単に描ける Mirror Drawing を Scratch でつくりました

[追記] 最新版はこちら -> https://scratch.mit.edu/projects/117434761/
色もつけられるようにしてみました。

Mirror Drawing というプロジェクトを Scratch でつくってみました。



Scratch 上で60秒間の動画が撮れるようになったので、それを使って撮ってみた動画がこちら↓





こんな感じでマウスで描いた模様が縦横斜めにコピーされるので、適当に描いてもわりと綺麗な模様が描けるというプロジェクトです。

書いたコードは以下の通り。こんな短いコードでできてしまって Scratch やっぱり楽しい。



Scratch 上でいいねされたり、おまけにリミックスもされていて、naritaku くんの作った作品がこちら ↓



分割数が15まで増やせるようになっていて、適当に描いてもこんな万華鏡でみるような模様が描けて楽しい!せっかくなのでこちらもデモ動画をつくってみました。





自分の作品がリミックスされて、さらに面白く楽しいものになっているのを見るのはとても嬉しいですね。
みなさんもぜひいろいろ描いてみてください。

GitHub で日本国憲法を修正してみる - 第9条編

参院選で自民党が圧勝し、改憲の発議が可能になるかもしれないということで、いまのうちに憲法を勉強しようかなと思い立ちました。

もちろんまずは実際に読んでみるがいいのですが、エンジニアとしては、やはり自分なりに修正したくなってしまいます。そこで、ソースコードのように修正履歴を管理できないかなと思って探してみたら、ありました!

日本国憲法 - GitHub Pages

ちなみに、GitHub はプログラムのソースコード管理に使うエンジニアのためのツールですが、データの共有や文書管理にも威力を発揮する便利なツール。ホワイトハウスのアカウントをのぞいてみると、たとえば Petition Signature Form(嘆願書のフォーム)なんかあって、だいぶすすんでる。

The White House

とりあえず、冒頭の日本国憲法のレポジトリを自分のアカウントにフォーク(コピー)してみました。

champierre/NihonkokuKenpo

さて、憲法を読むのは、センター試験で「倫理・政経」を勉強したとき以来ではなかろうか。

普通読まないですよね。。結構長いし。全11章かあ。。

というわけで、とりあえず誰もが知っていて一番みんなが話題にし論争になる第9条から、臆せずとりかかることにします。

第9条は第2章にありました。

NihonkokuKenpo/src/chapter2.markdown

お、第2章には第9条しかない。わずか3行。これは最初にとりかかるにはちょうどいい長さです。

ざっと読んでみると、言い回しが古臭くて読みにくいです。

意味が変わらないように注意しながら、言い回しを変えたり、不要と思える部分を削除します。ソフトウェア開発の世界では、これをリファクタリングと言います。





これでちょっとは読みやすくなりました。

さて、いよいよセンシティブなところに切り込んでみます。

憲法9条第2項ですね。

小学生のときに初めて憲法を勉強し、第9条および自衛隊のことを勉強したとき、こどもながらに「おや?」と思ったことを良く覚えています。「戦争をしない」これはいいことだと思いましたが、「軍隊を持たない」は、え、じゃあ誰か攻めてきたときどうするんだろう?と。でも戦車も戦闘機も持っている自衛隊というものがある、と。。あれ?「軍隊を持たない」って宣言してるんじゃなかったっけ?さらにさらに、向こう側が攻めてこない限り、こちらは攻撃できない、と教わりました。それは、立派なことではあるけれど、こちら側が圧倒的な強さを持っていないとやられてしまうよ、と思いました。

それから大人になった僕は、震災のときなどの災害救助で活躍する自衛隊を見てきましたし、軍隊をまったく持たなくてもいいと潔く言えるほどの勇気は持ちあわせていません。もし家に泥棒が入ってきたら、観念したほうがいいときもあると思うけど、家族に危害が加えられそうなら木刀かゴルフドライバーで応戦するというオプションも持っておきたいです。

というわけで、戦争や侵略のためには使わないけれど、軍隊は持つ、というかすでに自衛隊という軍隊を持っているのでそれと矛盾しないように修正したのがこちらです。



わずか1文字の追加でバグを直してやりました。コードの修正はなるべく少ないほうがいいのはソフトウェアエンジニアには常識です。

国民投票にかけるときは、修正項目ごとに賛成・反対を問うそうなので、これくらい短い修正ならば判断しやすいのではないでしょうか?

というわけでこちらが9条修正に対するプルリクエストです。

Feature/fix 9 jou



だいぶすっきりしました。

コード量減りましたし、長年自分のなかでモヤモヤしていたバグをたった一文字の追加でやっつけてやりました。我ながら渾身のプルリクエストだと思っています。

いいね、と思ったら :+1 やリアクションをお願いしますね。

けしからんといったご批判もあるやもしれませんが、僕の人格を攻撃することなく Issue をオープンするなり対案の Pull Request を送るといった建設的なりアクションをお願いします。

自分だったらどう修正するかなと考えながら憲法を読むのは楽しいですし、とても勉強になるので、みなさんもやってみてはどうでしょう? Git 使ったことないって人には、いい勉強になりますし。

改憲とか重く考えてしまうものですが、もっと気楽にみんなでこうしたらいいんじゃないかとか意見を言い合える方が良いと思います。

また時間あるときに第2章以外もみていきたいと思います。




Raspberry Pi ではじめるどきどきプログラミング 増補改訂第2版が出版されます

共著で書かせていただいた Raspberry Pi ではじめるどきどきプログラミング 増補改訂第2版が 7/15 に出版されるということで、手許に見本紙が届きました。



担当している Scratch と Minecraft Pi でプログラミングの部分と、改訂版でどこが変わったのか、を中心にいくつかアピールポイントを挙げていきたいと思います。


  • ラズベリーパイ3と最新の Raspbian OS に完全対応、インストール方法や操作方法などはもちろん、メニューバーの色がちょっとだけ変わったというような細かな違いも漏らさずスクリーンショットを差し替えています。もし第1版をお持ちであればどこが変わったのかをみつけるのも楽しいかもしれません。

  • 謝辞にも書いていますが、ラズベリーパイをセットアップしていくときの説明写真に登場する手のモデルには、第1版のときとなるべく変わらないもにしたいということで、成長して大きくなってしまった長男の代わりに遺伝子が一番近いだろう次男に登場してもらっています。

  • 僕が担当している Scratch と Minecraft Pi でプログラミングの部分は、他の章に比べると説明やキャプチャの差し替えは少なかったのですが、Scratch と Minecraft Pi をつなげるソフトウェアの Scratch2MCPI を大幅に変更してバージョンアップ、出版とあわせて 2.0.0 をリリースします。

  • その Scratch2MCPI 2.0.0 の大きな目玉は、絶対座標を指定するのでなく、自分の視点でキャラクターを動かしながらブロックを積んでいける Minecraft Graphics Turtle に対応したことです。かねてよりこの対応をすすめてくださっていたなすラボの星野尚さんバージョンの Scratch2MCPI を取り込む形で対応させてもらい、そしてその解説も追記部分として執筆していただきました。

  • 星野さんのタートルグラフィックスに関するコラムは注目だと思いますが、Scratch 2.0 を Raspberry Pi で使えるようにする方法を解説したコラムも要注目です。セットアップ自動化スクリプトも作ってくださり、難しかった手順が格段に簡単になっています。

  • Minecraft Graphics Turtle への対応は、Scratch2MCPI をオープンソースソフトウェアとして公開していたからこそ実現したことだと思います。これは第1版から変更することなく残している部分ですが、オープンソースソフトウェアの意義やマナーを解説したコラムは、僕がかなりこだわりを持って書いた部分のひとつです。こどもたちにオープンソースソフトウェアの素晴らしさが少しでも伝わったらいいなと思います。



  • こんなところでしょうか。。

    お子様がいる方、甥っ子、姪っ子、親戚のなかにプログラミングに興味を持ちそうなこどもがいたら、一冊いかがでしょう?

    夏休みにも間に合ったことですし、自由研究にも良いかもしれません。

    Raspberry Piではじめるどきどきプログラミング増補改訂第2版
    阿部 和広 石原 淳也 塩野 禎隆 星野 尚
    日経BP社
    売り上げランキング: 4,789

スクラッチャーのためのScratchX入門 - その1 ScratchXとは?

(この投稿は大人のためのプログラミング勉強会でScratchXのことを紹介したときの内容をもとにして書いています。)

» スクラッチャーのためのScratchX入門 - その1 ScratchXとは?

» スクラッチャーのためのScratchX入門 - その2 自作オリジナルブロックをつくろう

ScratchXで簡単な自作ブロックを作って動かすまでを、これから何回かにわけて、Scratchをやったことがあるこどもから大人までのスクラッチャーを対象に解説したいと思います。

まずはScratchXって何?というところから説明します。大人のためのプログラミング勉強会でも「ScratchXとScratchと何がちがうのですか?」と聞かれました。

実際に見てみるのが早いので、ブラウザで http://scratchx.org/#scratch にアクセスしてScratchXを開いてみましょう。



ScratchXは、ScratchをつくっているおなじMITが開発した、Scratchに自作ブロックを追加できる新機能がついたScratchの新型実験版だと思ってください。ロゴの横にBeta(ベータ)と書かれていますが、これが実験版ですよという意味を持っています。

見た目はほとんどScratchと変わりありません。ぱっと見てわかる違いと言えば、おなじみのスクラッチキャットがいないということくらいでしょうか。

自作ブロックが追加できるとはどういうことでしょう?

それをみてみるためにText to Speechのブロックが追加されたScratchXを開いてみます。

http://scratchx.org/?url=http://scratchx.org/tmp/TalkingGobo.sbx

をブラウザで開いてみましょう。しばらくすると、



という見慣れない画面が表示されます。

実はこれは警告画面で、「今から開くScratch画面では、拡張機能が使われているけれどスクラッチチームはその機能には責任を追わないで、自分で注意して使ってね」というようなことを言っています。実はScratchXに追加できる自作ブロックはいろんなことができるのだけれど、やろうと思えばブラウザに残されている情報を盗むみたいなかなり危険なこともできてしまうので、素性が怪しいブロックは使わないようにしましょうということなのです。

Text to SpeechはオフィシャルのScratchXのページからリンクされているものなので問題はありません。緑の[I understand, continue]のボタンを押して次に進みましょう。



ゴボ(gobo)をクリックしてみましょう。入力する欄が現れるので、試しに「こんにちは」と入れてリターンキーを押すと「こんにちは」としゃべります。(PCの音声をオンにしてください)

紫色の「その他」のグループの中のspeakというブロックが今回追加された拡張ブロックです。



このようにしゃべるというScratchにはない機能と、それ用のブロックを追加できるのがScratchXです。

次からは実際にこの追加できる自作ブロックをつくっていきたいと思います。

自立して二輪で走るロボットWowWee MiPをScratchXからプログラミングできるようにしたScratch2MiP

自立して二輪で走るロボットWowWee MiPをScratchXからプログラミングできるようにしました。

WowWee MiPはちょうど一輪車に乗っている人のようにうまくバランスをとりながら動くことができるロボット。おっとっとといった感じで倒れそうで倒れない。デモ動画を観てもらえばどんな感じかわかるかと思います。





» Scratch2MiP

を使うと、教育用プログラミング環境のScratchに拡張機能を追加できる仕組みを加えたScratchXから、ブロックを組むような感じでMiPの動きを自由にプログラミングすることができます。

たとえば、MiPに正方形を描くように動かすにはこんな感じでプログラミングします。



Scratch2MiPの開発をおこなったMac OS以外でも、WindowsやRaspberry 2/3でも動作することが確認されており、それぞれセットアップの方法が公開されています。

» Windowsでscratch2mipを使う

» Raspberry Pi 3でscratch2mipを使う

» Raspberry Pi 2でscratch2mipを使う

Amazonでも購入できるトイザらス版Meet MiPを僕は使っていますが、タカラトミー版Hello! MiPでもできると思います。

SpheroRomoなどこれまでいろいろなガジェットやロボットをScratchからプログラミングして操作できるようにしてきましたが、WowWee MiPはそのなかではかなり安価にモノが入手できるので、各所プログラミング学習の場でいろいろと使えそうで楽しみです。

無料でSSLが使える Amazon AWS Certificate Manager はまりどころ

Amazon Web Servicesの無料SSL/TLS証明書サービス「AWS Certificate Manager」が東京リージョンでも利用可能になったので、運用している Web サービスの「まちクエスト」と「モニュメント」の両方でSSLを導入しました。





ELB(Elastic Load Balancer)に設定するだけで楽勝だと思っていたのですが、なんやかんやいろいろはまったので書き留めておきます。

運用しているドメインに対して証明書の発行をリクエストすると、そのドメイン所有者として申請しているメールアドレスに確認のメールが送られてきます。そのメールに載っているリンクを踏まないとリクエストは完了しません。ところが「モニュメント」のドメインmonumen.toはトンガという国のドメインなのですが、ドメイン所有者のメールアドレスは伏せられている。「whois monumen.to」を実行してもほとんど何も表示されないのです。

調べてみると、所有者として登録しているメールアドレスの他に、そのドメインの頭にadmin@、administrator@、hostmaster@、webmaster@、およびpostmaster@を付けたメールにも確認メールが送られていることがわかったのですが、そのドメインではメールの送受信をできるようにしてはいませんでした。以前なら無料だったGoogle Appsを使うところなのですが、今は有料になってしまったので、独自ドメインでメールアドレスを発行できるサービスを探して見つけたのがZohoというサービス。これでサクッとwebmaster@monumen.toというメールアドレスを作り、確認メールを再送信したところ、無事届いて確認の手順を踏むことができました。



証明書を発行するとき、その証明書が有効となるドメインを指定するのですが、はじめ *.monumen.to のようにワイルドカードを使ったドメインだけを登録していました。

しかし、どうもうまく動かない。調べてみたらサブドメインのないmonumen.toも登録する必要があると知りました。

ワイルドカード付きも含めてドメインの数だけ証明書を発行し、証明書をひとつだけしか指定できないELBを証明書の数だけ立ち上げるのかと思ったのですが、証明書のAdditional namesという項目に追加のドメインを指定できることがわかりました。



結果的に発行する証明書はひとつだけで済み、対応するELBもひとつだけ起動すればいいことになりました。

いくつかはまる箇所はありましたが、自分で証明書発行の手続きをおこない、インスタンスに証明書を置いて使えるようにする作業よりは格段に簡単にSSLへの移行ができたと思います。

関連するブログ記事はこちらです↓

» まちクエストをSSL化しました

» モニュメントをSSL化しました

プロフィール

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

Raspberry Piではじめる どきどきプログラミングを書きました。

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

Twitter @jishiha

最近のエントリー

アーカイブ