先日、個人的に所有しているラズパイ、obniz、micro:bitなどの電源供給用USBがまったく同じタイプ（microUSB type-B）であることに気づきました。

そこで思ったのですが、最近人気のマイコンボードってみんな同じタイプのUSBなのかな…とちょっと調べてみたら、実際にはさまざまなUSBが採用されていることが分かったのでまとめておきます。

今回、調べたマイコンボードは以下の通り！

1. Arduino Uno R3
2. IchigoJam
3. LattePanda Alpha
4. mbed
5. micro:bit
6. M5Stack
7. obniz
8. Raspberry Pi 3 Model B+

それぞれのボードについて詳しく見ていきながら、記事後半ではすべてをまとめた比較表も掲載しているので参考にしてみてください。

①Arduino Uno R3のUSBタイプ

Arduino Uno R3は【 USB Type-B 】です！

Arduinoは用途に応じてDuo, Leonardo, Micro, Mini, Nano…など、さまざまな種類のボードが発売されているのですが、おそらく最もポピュラーというか定番なのがこのUnoだと思います。

ちなみに、Arduinoの種類が変わるとUSBタイプも変化するようで、例えばNanoの場合は「Mini USB Type-B」だったりします。

最近のArduinoは「Arduino Create」と呼ばれるクラウドサービスを提供しており、学習リソースやプログラムの作成からボードへの書き込みまですべてブラウザ上で行えるようになっています。

（参考リンク）
「Arduino」公式サイト

②IchigoJamのUSBタイプ

IchigoJamは【 Micro USB Type-B 】です！

IchigoJamは、別途パソコンを用意しなくても電源を入れるだけですぐにBASIC言語の開発環境が整えられるのが特徴で、主に子供向けのプログラミング教育などで活発に利用されています。

また、JavaScriptでプログラミング可能な「IchigoLatte」や、グラフィック・音楽を強化した「PanCake」、WiFiによるネットワーク接続を実現する「MixJuice」などの拡張ボードがリリースされているのも魅力の1つです。

ちなみに、2015年から電子工作マガジンの中でさまざまなBASICプログラム作品を紹介するコーナーが始まり、IchigoJamを使って楽しめるようになっています。

（参考リンク）
「IchigoJam」公式サイト

③LattePanda AlphaのUSBタイプ

LattePanda Alphaは【 USB Type-C 】です！

LattePanda Alphaは類似のマイコンボードと比較にならないほど超高性能なスペックが特徴で、CPUは第7世代のCore m3-7Y30が搭載されておりOSとしてWindows 10 ProとLinuxをデュアルブートできるように設計されています。

また、64GBのSSDや8GBのRAMも搭載されており、GPUも高性能なため普通のPCゲームも軽快に動作します。このようなパワフルで多用途に使えるボードを活用して、GPIOから電子工作できるのが大きな魅力でしょう。

（参考リンク）
「LattePanda Alpha」サイト

④mbedのUSBタイプ

mbedは【 Mini USB Type-B 】です！

mbedは2005年頃から開発がスタートしていることから、類似のマイコンボードの中ではかなり古くから存在しているものの、当初からクラウドサービスを提供していてWebエディタを使ってプログラミングやファイルの書き込みを実現しているのが特徴です。

一般的には上記画像のモデル「LPC1768」が広く普及していますが、より低消費電力版である「LPC11U24」も人気があります。

（参考リンク）
「mbed」公式サイト

⑤micro:bitのUSBタイプ

micro:bitは【 Micro USB Type-B 】です！

micro:bitはPCと接続するだけでUSBメモリのように認識され、クラウドサービスのWebエディタを利用してビジュアルプログラミングやJavaScriptで制御できるようになっています。（Pythonでも可）

ボード上に、LED・ボタン・BLE・加速度センサー・照度センサー・磁力センサーなどが搭載されているので、micro:bitさえあればある程度のプロトタイプを作れる利便性の高さが特徴的です。

また、簡単に多彩なセンサーを組み合わせられるGrove用の拡張モジュールも発売されていたり、スターターキットやロボット用モジュールなど学習目的でもすぐに使える環境が整っているのも魅力でしょう。

（参考リンク）
「micro:bit」公式サイト

⑥M5StackのUSBタイプ

M5Stackは【 USB Type-C 】です！

最近は国内でも少しずつ人気が高まっているM5Stackは、シンプルな正方形のケースにESP32のマイコンを搭載しておりTFT-LCDやSDカード、Grove / I2C、WiFi / BLE、スピーカー、GPIO、バッテリーなどをコンパクトにまとめているのが特徴です。

また、追加用のバッテリー、GPS、自作用のモジュールなどの拡張機能も用意されており、Arduino IDEなどを使った開発環境も利用できるので汎用性が高いのも魅力です。

ちなみに、最近では「M5FLow」というクラウドサービスもリリースされており、ブラウザ上からプログラミングや開発ができるようになっています。

（参考リンク）
「M5Stack」公式サイト

⑦obnizのUSBタイプ

obnizは【 Micro USB Type-B 】です！

obnizは1台購入すると無料で利用できるクラウドサービスが提供されており、HTML / CSS / JavaScriptによるプログラミングが可能で、サーバー側を制御して定期的にプログラムを実行することも簡単に実現できます。

ビジュアルプログラミング環境も用意されており、スマホからでも容易にプログラミングすることができます。また、HTMLをコーディングしてブラウザのUIからI/Oを制御することも簡単です。

ちなみに、12個あるI/OはI2C / SPI / UART / PWMに加えて3V / 5Vなどをプログラムから自由に制御できるため、どのI/Oに部品を挿しても利用できるのは魅力的でしょう。

（参考リンク）
「obniz」公式サイト

⑧Raspberry Pi 3 Model B+のUSBタイプ

Raspberry Pi 3 Model B+は【 Micro USB Type-B 】です！

おそらくマイコンボードの中でもっとも有名で利用者が多いのがRaspberry Piで、いくつかの種類がリリースされていますが累計で1000万台以上を販売していることに驚きます。

OSにはLinuxベースの「Raspbian」などが提供されているので、普通のパソコンみたいに利用できるのも特徴的です。
カメラや通信モジュールなども豊富に用意されており、ほとんどのプログラミング言語が利用できるためプロトタイプも作りやすいのは魅力です。

子供の学習目的から個人や企業が開発するプロジェクト用途まで、非常に幅広く扱えるのが強みでしょう。

（参考リンク）
「Raspberry Pi」公式サイト

USB形状の比較表

ここで、それぞれのマイコンボードのUSB形状を「比較表」としてまとめておきます！

各マイコンボードのUSB形状の確認やケーブルを買い換える時などの目安にして頂ければ幸いです。

また、USB関連の電子部品を購入する場合はオンラインストアが大変便利です！

USBの種類と形状について

ここからはちょっとマニアックな話になるのですが、USBがなんでこんなに種類や形状が多いのか？…について少しだけ補足しておきます。

そもそも、USBの種類は以下の3種類しかありません。

• USB
• Mini USB
• Micro USB

ざっくり言うと「USB」は主にPC関連で「Mini USB」はデジカメ関連で「Micro USB」はスマホ関連でよく使われているのを見かけます。

これだけならシンプルで良いのですが、ややこしいことにUSBは「Type A」「Type B」というペアになっています。

これもざっくり言うと「Type A」が電源側で「Type B」が周辺機器側というペア構成になっており、例えばPCとプリンタの例だと以下のようになります。

• PC（電源側）：Type Aで周辺機器に電気やデータを提供する
• プリンタ（周辺機器側）：Type BでPCから電気やデータを受け取る

USBにはこのような特徴があり、先ほどの比較表を見て分かるようにマイコンボードは周辺機器扱いになるため「Type B」ばかりになるわけです。

しかし、最近になって登場した「Type C」のUSBがこのややこしい状況を解消してくれました。
ペア構成の概念が無くなり、どちら側に接続しても良いことになったので「Type A / Type B」を考える必要が無くなったわけです。

そのため、最近になって新しく登場したマイコンボードの「M5Stack」「LattePanda Alpha」などはUSB Type Cを採用しているわけですね。
（もちろん転送速度が速いとかいろいろ他にも理由はありますが…）

まとめ

今回は、人気のマイコンボードのUSBタイプ（種類・形状）についていろいろ調べてみました。

USBってこんなに種類があるというイメージが無かった自分としては、いろいろ調べていくうちに勉強になる部分が多くて意外と楽しかったです。

ちなみに、最近ではUSB3.0 / 3.1という新規格が主流になりつつあり、恐ろしいことにUSBの形状が大きく変更されているのでさらに種類が増えている状況です。
このあたりは余計な混乱を招きかねないので、今回は割愛しつつまた別の記事で紹介できればと思っています。

今年に入ってからJavaScriptでIoT開発が楽しめるという「obniz」に興味があり、いろいろ情報収集をしていました。

専用のクラウドサービスと最初から連携しており、WIFiにさえ繋げればブラウザからプログラミングができて、面倒な配線も不要で電子部品を制御できるお手軽感たっぷりなところに惹かれて購入したわけです。

そこで、今回は温度センサーを組み合わせて室内の温度を計測してみたのでご紹介してみます！

事前準備！

• ・obniz本体(電源コード含む)
• ・温度センサー(LM35DZ)

今回、準備するものなんですが「obniz」を持っていれば、あとは温度センサーだけあればOKです。

普通は、ブレッドボードやジャンパーワイヤなどを使って電子部品を繋げるのですが、単純に温度を計測するだけならobnizの本体にセンサーをそのまま刺せば良いだけなので簡単なのです。あとは、PCかスマホのブラウザからJavaScriptでプログラミングするだけで手軽に制御できるというわけです。

ちなみに湿度も同時に計測しようと思ったんですが、手持ちの部品が無くて現在は調達中です。RSコンポーネンツさんでは湿度センサーの部品が種類豊富なのでオススメです！

温度センサー(LM35DZ)のGNDはどれ？

今回、利用する温度センサーは「LM35DZ」という部品で、電子温度計などにもよく使われているわりと定番のモノです。

このセンサーに限った話ではありませんが、データシートを見て部品の足を確認する時は注意が必要です。例えば、GNDはどこかを確認する際にデータシートでは次のように図解されています。

この図を見ると部品の右側にある足がGNDに見えますが、よく読むとこれは「BOTTOM VIEW」と書かれていますよね？

つまり、部品を下から見た図なので以下の方向から見るわけです。

そのため、GNDは左側の足になるわけです！

慣れている方にとっては当たり前の話なのですが、初心者の方は間違いやすいので覚えておきましょう！

室内の温度を測定してみる！

それでは、早速ですが「obniz」を使って温度を測定してみましょう！

「obniz」の電源を入れてWiFiに繋ぐと、以下のようにQRコードとID番号が表示されて待機状態になります。

この状態で、IOに温度センサーをそのまま接続します！

「obniz」のIOは、部品の表裏に関係なくどのピンに接続しても大丈夫で、あとからプログラム上で制御できるように工夫されているのが特徴です。

今回は0番にGNDを刺しているので、次のようにJavaScriptで記述すると「obniz」に認識されます！

「obniz.wired()」で、使用部品とピン番号を設定することができるので簡単ですね。

また、「onchange」を使えば温度に変化があるたびに任意の関数を実行することができます。そこで、コンソールログに引数の「temp」を出力することで温度を確認することができます。

実行すると、こんな感じになります！

無事に温度がログへ出力されているのが分かります。

「Chart.js」で温度をグラフ化してみよう！

せっかく温度が取得できるようになったので、もう少し見やすいグラフに変換して表示してみましょう。

今回は初心者でも扱いやすいライブラリ「Chart.js」を使ってみます。

まずは、HTMLにcanvasとグラフを表示するためのボタンを設置しましょう！

ボタンをクリックすることで、取得した温度をグラフに変換してcanvasへ表示したいと思います。

そこで、温度とラベルを保管しておく配列を作り、Chart.jsをインスタンス化する際にオプションとして初期データを設定しておきます。

Chart.jsでは、初期データとして「labels: []」と「datasets[]」は必ず必要なので上記のように空のデータを設定しておくわけです。

あとは、温度の変化があるたびに用意した配列へ温度とラベルを格納していけば良いでしょう！

温度のデータだけだと上手くグラフに表示されないので、必ずラベル（横軸）も同時に格納するようにしておきましょう。

最後に、ボタンをクリックした際にChart.jsのグラフ描画を行えば完成です！

ラベルや温度のデータには「chart.data」からアクセスできるようになっています。

また、最後に「update()」を実行してグラフを再描画しないと反映されないので注意しておきましょう！

これで、実行してボタンをクリックすると温度データが見事にグラフ表示になります！

まとめ

簡単な温度測定を行いグラフ化するまでをやってみました。

今回は、JavaScriptの「onchange」を使ってデータを収集しましたが、無料の「obniz Cloud」を使えばプログラムの定期実行が可能なので好きなタイミングでデータを取得できるようになります。（参考資料：paiza開発日誌）

ぜひ、みなさんも「obniz」を活用して手軽にIoT開発に挑戦してみてください！

＜参考＞

・「obniz」公式サイト

最近になって、知人から「オープンデータ」について教えてもらうきっかけがあり、なかでも「LinkData.org」というサイトの情報がキレイにまとまっていたので、ここで少しご紹介してみます。

LinkDataのサイト内には、全国の「お城データ」や「道の駅データ」、「避難所データ」、「補助金まとめデータ」、「さくら名所データ」…など、意外とユニークで面白いデータがまとまっているので、うまく利用すれば楽しいWebアプリが作れそうです。

お気に入りのオープンデータを入手しよう！

「LinkData.org」には、誰でも無償で利用でき、商用利用も可能なオープンデータが豊富にまとまっています。
都道府県別で探したり、人気ランキングやキーワードを指定しての検索もできるので、自分が興味のあるデータを探すのも簡単でしょう。

　
今回は、サンプルとして「ゆるキャラ」のデータがまとまっている「ご当地キャラクター」のデータセットを使ってみようと思います。
（data by KeitarouNakayama/ご当地キャラクター）

　
「ダウンロード」の項目下に、「その他の形式のAPIリストを表示」というリンクがあるのでクリックします。

　
すると、外部APIとしてデータが取得できるURLが一覧表示されます。

そこで「JSON」形式のURLをコピーして、実際にブラウザのアドレスバーに入力してみましょう！

　
見事に、JSON形式で全国の「ご当地キャラクター」のデータが表示されたのが分かります。

あとは、このデータをJavaScriptなどを使って、自分のWebアプリに組み込めば良いわけです。

Webアプリにデータを組み込んでみよう！

LinkDataにあるオープンデータは、URLに「callback」を指定すれば「JSONP」としてデータを受け取ることが出来るようになっています。

まずは、コレを覚えておかないと、異なるドメイン間でデータを受け渡しできないので注意しましょう。

　
さて、JSONPを受け取るために、ピュアなJavaScriptやjQueryなどを使っても良いのですが、今回は最近よく利用している「AngularJS」でプログラミングしてみたいと思います。

AngularJSだと、JSONPのデータを受け取る処理は以下のように簡単です。

1
2
3
4

$http.jsonp(url).success(function(data) {
//ここに処理を書く

}).error(function(err) {});

「url」の部分には、先ほど確認したJSONを受け取るurlを当てはめれば、あとは「data」の中にご当地キャラクターの情報が入ることになります。

　
また、urlには「callback」を指定する必要があるため、以下のような感じになるでしょう。

http://linkdata.org/api/1/rdf1s3454i/local_character_rdf.json?callback=JSON_CALLBACK

urlの最後に、「?」から始まるcallbackを設定しておきます。

ちょっと特殊なデータ構造に注意

先ほどの例で、「data」の中身をコンソール出力すると分かるのですが、LinkDataの「JSONデータ構造」は少し特殊なようです。

すべて「url」による階層構造になっており、データによってはurlが統一されていないケースもあるようです。

　
そこで、まずは長いurlを変数に格納し、AngularJSに用意されている「forEach」メソッドを使ってデータを取得するようにしました。

1
2
3
4
5
6
7
8
9
10
11
12

var url = "http://linkdata.org/api/1/rdf1s3454i/local_character_rdf.json?callback=JSON_CALLBACK";
var nameFolder = "http://imi.ipa.go.jp/ns/core/rdf#名称";
$scope.lists = [];

$http.jsonp(url).success(function(data) {
	var num = 1;
	
	angular.forEach(data, function(value, key, obj) {
		$scope.lists[num++] = value[nameFolder][0].value;
	})
	
})

「forEach」メソッドを使うことで、「data」内の各情報へアクセスすることができるので、あとはゆるキャラの名称が記載されている部分を「$scope.lists」へ突っ込んでいます。

　
こうすることで、HTMLに「ng-repeat」を使って一気にゆるキャラ名を表示できるようになります。

1
2
3
4
5
6

<input type="text" ng-model="type" size="20" placeholder="※ゆるキャラ名を入力...">
<button ng-click="onClick()">検索</button>

<ul>
	<li ng-repeat="list in lists | filter:type track by $index"></li>
</ul>

さらに「filter:type」を指定することで、検索ボックスに入力したキーワードが含まれている「ゆるキャラ名」を自動で表示させています。

サンプルデモ！

今回は、単純に名前を表示するだけで、特に難しいことは一切していないですが、これでも立派な「ゆるキャラ検索アプリ」として使えるのではないでしょうか。

全部のコードと、サンプルはこちら！
(PCブラウザにてお試しください…)

入力ボックスに、ゆるキャラ名の一部を入れて「検索」ボタンをクリックすれば、該当する「ゆるキャラ名称」が一覧表示されます。

例えば、「あのゆるキャラの名前なんだっけ…」とか、「新しいゆるキャラ名が、既存のゆるキャラと被らないかなぁ…」みたいな時に、1文字でも入力して検索すれば一覧で表示されます。
（「く」とか「み」など、1文字だけ入力して検索してみてください）

まとめ

今回ご紹介したLinkDataは、非常に面白いデータがたくさんあるので、アイデア次第でユニークなWebアプリが作れる気がしています。

データに関しては、個人の方が提供しているモノもあれば、行政が積極的に取り組んでいるデータもあるので、開発するアプリによってはこのあたりも確認しておくと良いでしょう。

　
最後に、データのライセンスですが、オープンデータということもあり基本的には「パブリック・ドメイン」なので、特に何もしなくても利用できるモノばかりですが、稀に「CC BY」ライセンスもあります。

これは、クレジット表示が必要となるので、どこからデータを取得しているかを明記するようにしておきましょう。
（今回のゆるキャラデータも「CC BY」なので、デモ画面下部にクレジットを表記しておきました…）

（参考）
「LinkData.org」公式サイト

ふとしたきっかけで、急に「テトリス」が遊びたくなったので、いろいろ探してみたのですが良いのが見つからず…。

普段からChromeブラウザを愛用していることから、「Chromeウェブストア」も検索したのですが、お手頃感のあるモノが見つからず…。

結局のところ、探すのが辛くなってきたので、自分好みの気軽に遊べるテトリスを、「Chrome拡張機能」として可能な限り簡単に作ってみました。

ミニマムなChrome拡張機能を作る！

そもそも「Chrome拡張機能」は、誰でも簡単に作れるように設計されています。
とりあえず、「アイコンをクリックして◯◯◯する…」みたいな拡張機能は、「HTMLファイル」「マニフェストファイル」「アイコン画像」を用意すればすぐに実現できます。

　
「HTMLファイル」は、普通にWebページを作る時に用意するモノがあればOKで、まずは以下のミニマムなHTMLを用意します。

1
2
3
4
5
6
7
8
9

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p>テトリス</p>
  </body>
</html>

　
「アイコン画像」は好きなモノを用意するか、「pixlr」とかで適当に作っても良いでしょう。

サイズは「19×19px」にしておき、「icon.png」のようなファイル名にしておきましょう。

　
「マニフェストファイル」は、自作した拡張機能をChromeで使えるようにするためのモノですが、中身はごく簡単なJSONファイルです。

1
2
3
4
5
6
7
8
9
10

{
    "manifest_version": 2,
    "name": "tetris",
    "version": "0.0.1",
 
    "browser_action": {
      "default_icon": "icon.png",
      "default_popup": "index.html"
    }
}

「manifest_version」で、現在の最新版であるバージョン「2」を指定し、「name」＝拡張機能の名称、「version」＝拡張機能のバージョンを任意に設定すればOK！

ちなみに、この3つの項目は必須事項なので、必ず明記しておきましょう。

　
あと、「browser_action」という項目を記載することで、「アイコンをクリックして◯◯◯する…」という機能が使えるようになります。

「default_icon」で、先ほど用意した画像を設定し、「default_popup」にHTMLファイルを紐付ければ完了です！
ファイル名は、「manifest.json」にしておきましょう。

詳しいマニフェストファイルの書き方は、Googleが公式に公開しているドキュメントが分かりやすいです。

＜参考＞
「マニフェストドキュメント」公式サイト

　
ここまでで、以下のようなファイルを作成しました。

app
 ├─ index.html
 ├─ manifest.json
 ├─ icon.png

　
あとは、この「app」フォルダごとChromeの「拡張機能設定ページ」へ放り込めば完成です！

　
Chromeの上部にアイコンが表示されるので、クリックすると「テトリス」と表示されるのが分かると思います。

これは、HTMLファイルの「p」要素に記載した「テトリス」の文字が表示されていることになります。
簡単に言ってしまえば、アイコンをクリックしたら「body」要素を表示するようなイメージでしょう。

手っ取り早く「テトリス」がしたい！

とりあえず、アイコンをクリックしたら「テトリス」の文字を表示する拡張機能は完成したので、あとはココに「遊べるテトリス」が表示されれば理想的です。

ただ、テトリスをゼロから実装する気力は無かったので、何か良さそうなモノを探していたら、以前にちょっと話題になったJavaScriptライブラリ「Blockrain.js」を発見！

これは、ライブラリを読み込んで、簡単なコードを追加するだけで「テトリス」が遊べてしまうという、まさに今回の拡張機能作りにピッタリなものです！

　
そこで早速、HTMLファイルにライブラリを読み込むように修正してみます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" src="blockrain.css">
    <script src="jquery.min.js"></script>
    <script src="blockrain.jquery.min.js"></script>
    <script src="main.js"></script>
  </head>
  <body>
    <p>テトリス</p>
    <div class="game" style="width:250px; height:500px;"></div>
  </body>
</html>

ダウンロードしたライブラリに含まれている、「blockrain.css」「blockrain.jquery.min.js」を追加し、jQueryも一緒に読み込んでおきます。

あと、「div」要素にテトリスのゲーム画面サイズを指定しておくのを忘れないようにしましょう。

　
そして、新たにJavaScriptファイル「main.js」を追加し、以下のコードを書いておけばOK！

1
2
3

$(document).ready(function() {
  $('.game').blockrain();
});

たったこれだけで、遊べるテトリスの完成です！

注意点として、HTMLファイル内にJavaScriptコードを記載すると、Chrome拡張機能の仕様でエラーになるようです。
なので、どんなに少ないコードであっても、外部ファイルとして読み込むようにしておきましょう。

　
ここまで完成したら、先ほど読み込んだ拡張機能ページを表示し、「リロード」をクリックしてファイルを再読み込みします。

　
そして、アイコンをクリックすれば、見事にテトリスが遊べます！

これで、なんとか当初の目的であった「気軽にテトリスで遊ぶ！」というのが達成できたような気がします。

まとめ

今回は、「Chromeウェブストア」へ登録していないので、あくまで個人が楽しむための拡張機能ですが、まぁこういう使い方でも良いのかなと思ってます。

Googleが用意している「公式ドキュメント」を読む限り、まだまだ多彩な機能が用意されており、専用のAPIも豊富に揃っているようです。

これらを活用すれば、もっと面白い機能が作れそうなので、また時間が空いたら挑戦してみようと思います。

（参考）
「Chrome拡張機能ドキュメント」公式サイト

仕事の効率化や、毎日の生活を便利にしてくれる「Webサービス」を、クリック1発でランダムに表示してくれる面白いサービス「Random Useful Websites」のご紹介！

どんなWebサービスが表示されるか分からない…というのがユニークで、まるでオモチャ箱から次々と楽しい道具が現れるような感覚です。

使い方！

すごくシンプルですが、サイトにアクセスして「LET’S GO!」ボタンをクリックするだけです。
すると、新規タブが開いて、ランダムな便利Webサービスが表示されるようになっています。

　
例えば、世界中のホテルを横断検索し、Wi-Fiの速度をホテルごとに調べられる「Hotel Wifi Test」

　
あらゆる種類のファイルを、別のファイル形式に変換できる「CloudConvert」

　
「始点」と「終点」を選択すると、ストリートビューでアニメーションしてくれる「Streetview Player」

　
多彩な「チートシート」を作成して共有できるサービス「Cheatography」

このような便利Webサービスが、クリックするたびに次々と表示されるので、使っていて楽しいです。

毎日、クリックしていけば、いろんなWebサービスを知れるので勉強にもなるでしょう。

ご興味ある方は、ぜひ参考にしてみてください！

（参考）
「Random Useful Websites」サイト

超シンプルなサービスなんですが、「アイデア出し」をする時の相性は抜群に良いと感じたのでご紹介！

サイトにアクセスする度に、毎回ランダムな2つのスタートアップ関連サービスが表示されて、この2つを組み合わせると「面白いWebサービスになるんじゃない？」と掲示してくれるわけです。

すごく単純なんですが、実際に使ってみると意外に「ハッ」とさせられます…。

組み合わせ事例！

「Startup Breeding」にアクセスすると、すでに2つのサービスが表示されており、あとは「スペースキー」を押す度にランダムに入れ替わります。
（スマホの場合は、画面をタッチするだけ）

例えば、こちらの組み合わせ！

「Evernote」と「facebook messenger」はどちらも有名ですが、この2つを組み合わせるとどんなWebサービスが考えられるでしょうか？

実現の可否はとりあえず置いといて…、例えばmessengerのメッセージは「過去ログ」が残るようにはなっていますが、検索機能が皆無なのでEvernoteに記録できれば便利だなぁ…とか思います。
（Evernoteの検索機能は強力なので…）

逆に、Evernoteは最近になって「コミュニケーション機能」を高めようとしていますが、ここにmessengerが利用できれば素敵ですね。

　
さらに、こちらの組み合わせ！

クラウドファンディングで有名な「Kickstarter」と、質の高い回答が人気のQ&Aサービス「Quora」をミックスしたら？…というもの。

Kickstarterは、プロダクトの開発者と支援者がコミュニケーションを取れる機能も提供しているのですが、その内容のほとんどは「プロダクト」についての質問なので、「Quora」のサービスとは相性が良さそうな気がします。

「Quora」は、閲覧性もKickstarterより良いので、融合すればさらに利便性の高いモノになりそう…。

　
この組み合わせは、どうでしょう？

バーチャルリアリティ(VR)を体験できる「Oculus」と、割引クーポンを共同購入できる「Groupon」とのミックスです。

まったく関連性がない組み合わせですが、例えばOculusを装着してお店を覗いた場合のみ、バーチャルなクーポンが出現するとかww…。

または、Groupon本来の使い方として、「Oculus」が欲しい人同士が集まって安く購入するのもアリでしょう。(他のプロダクトでも使えそうですが…)

　
このように、次々とランダムな組み合わせを見ていると、普通は思いつかないようなアイデアが湧き出てきます。

多彩なWebサービスが登録されているようで、画面下部の名称をクリックすれば各サイトにも飛べるので、スタートアップの勉強にもなります。

ご興味のある方は、ぜひ参考にしてみてください！

（参考）
「Startup Breeding」サイト

普段から、「黒い画面」を使っている人に最適なタスク管理ツール「todo」のご紹介！

究極にシンプルなコマンドによって、メモ代わりにも使える便利なツールで、Node.jsがベースになったライブラリとなっています。

コーディング中に、ちょっとした事を書き留めておきたい人は要チェック！

使い方！

まずは、「todo」をインストールしましょう。

$ npm install todo -g

これで準備はOK！
すでに「todo」コマンドが利用可能です。

　
そこで、何かタスクを追加してみたいと思います！

やり方は簡単で、以下のコマンドを実行すればOK。

$ todo add 8時から打ち合わせ！

たったこれだけで、タスクが登録されます。

　
確認する場合は、「todo」コマンド1発でOK！

$ todo

1.  ✖  8時から打ち合わ

タスクには、自動的に番号が割り振られるようになっており、この番号を指定するだけでタスクの完了指定もできます。

　
例えば、以下のようなタスクがあったとします。

$ todo

1.  ✖  8時から打ち合わ
2.  ✖  お昼までに◯◯社へメール！
3.  ✖  14時から会議
4.  ✖  ◯◯氏と夕食

　
この時に、1番のタスクを完了するコマンドは以下のとおり！

$ todo check 1

「check」のうしろに、完了したい番号を指定するだけです。

　
もう一度リストチェックすると、タスクが消えているのが確認できます。

$ todo

1.  ✖  お昼までに◯◯社へメール！
2.  ✖  14時から会議
3.  ✖  ◯◯氏と夕食

　
また、完了したタスクも含めて、すべてのリストを見たい場合は以下のとおり！

$ todo ls --all

1.  ✖  お昼までに◯◯社へメール！
2.  ✖  14時から会議
3.  ✖  ◯◯氏と夕食
4.  ✓  8時から打ち合わ

いずれも、非常にシンプルで簡単なコマンドで、即座に利用できるのはとても好感が持てます。

また、「todo help」を実行すれば、他にも便利なコマンドを知ることが出来るようになっています。

サクッと、お手軽にタスク管理をしたい方は、ぜひ参考にしてみてください！

（参考）
「todo」サイト

電子工作を楽しむために必要となる「電子回路」の基礎を、通信講座のような感覚で学習できる海外サービス「Tron-Club」が面白そうなのでご紹介！

何と言っても魅力的なのが、電子回路を構成する「パーツ」がすべてセットになったキットを毎月送ってくれる点でしょう。

「Tron-Club」のサービス内容！

定期購読のカタチで送られてくるキットは、毎月20種くらいの回路を構築できるセットになっています。

　
必要なパーツ類や、図解入りの解説書などが同梱しているので、すぐに実践できるのがうれしいところ。

キットは、少しずつレベルアップしていく内容になっており、最終的にはロボティクス、ホームオートメーションなども実現できるようになります。

　
「公式Instagram」など、SNS上にはどんな回路が組めるのか写真が多くアップされているので参考になります。

料金は「14ユーロ／月」と「送料」のみで、初回の60日以内であれば全額返金にも対応しています。

　
実際の様子は、以下の動画からチェックできます！

ArduinoやRaspberry Piなど、国内でも電子回路を学ぶ人が増えてきているので、似たようなサービスを日本でも展開すれば人気がでそうな気がします。

だれかやらないかな…。

（参考）
「Tron-Club」公式サイト

アイデアが面白かったのでご紹介！

Macbookの背面には、ライト付きの「アップルロゴ」が埋め込まれているのが特徴ですが、この部分に特殊なステッカーを貼り付けることで、自分好みのデザインを楽しめるのが「tabtag」です。

光るライトを活かした素敵なアイデアになっていますよ。

「tabtag」の詳細！

「tabtag」ステッカーを購入したら、そのままMacbookの背面ロゴ部分に貼り付けるだけで、すぐに利用できるようになっています。

ライトの光を利用して「文字」を強調したりなど、ユニークなデザインが多く揃っています。

　
この手軽さによって、海外では多くのユーザーを獲得しているのが公式のInstagramからも伝わってきます。

ステッカーは、何度も貼り替えられる特殊な粘着になっており、水に濡らすことで粘着性を回復することができます。

　
現在、公式サイトには、数多くのステッカーがあらかじめ用意されています。

背面ロゴライトの光によって、「ON・OFF」の文字が変化するステッカーなどもあって面白いです。

さらに、自分で好きなイラストを描いたり、デザイナーに注文したりすることで、自分のオリジナルステッカーを作成して購入することも可能になっています。

　
ステッカーの種類や、実際の様子などは以下の動画からチェックできます。

背面ロゴを、自分好みのデザインにしたい方は、ぜひ参考にしてみてください！

（参考）
「tabtag」公式サイト

「Bitly」のように、Webページの「URL」を短縮するサービスはいくつかありますが、絵文字に変換するサービス「linkmoji」のアイデアが面白かったのでご紹介しようと思います。

URLを絵文字にしてシェアすると、見て目にも楽しくて意外にハマりそうです。

使い方！

何でもいいので、お気に入りのWebページURLを、トップ画面にコピペしましょう。

今回は、サンプルとして「はてブ」のホットエントリURLを使ってみます。

　
エンターキーを叩くと、絵文字に変換されます！

これを、このままコピーしておきましょう。

　
あとは、ブラウザの入力ボックスへ普通にコピペすると、Webページが表示されるようになります。

もちろん、twitterやfacebookなどに絵文字のままシェアすることも可能なので、注目度は抜群に良いでしょう。

絵文字URLだと、SNSの文面も楽しいものに変わるので、ご興味ある方はぜひ参考にしてみてください！

（参考）
「linkmoji」公式サイト

久しぶりに「enchant.js」をいじっていたら、「リアルな動き」が欲しくなったので、物理エンジンを簡単に使えるプラグイン「box2d.enchant.js」を使ってみました。

今さらですが、めっちゃ簡単です。コレ…。

物理エンジンを使ったゲーム作りは、何だか難しいイメージがあったのですが、わりと簡単に「アングリーバード」的なデモも作れるので感心しました。

そこで、基本的な使い方を、ログ代わりにまとめておきます。

事前に準備すること！

普通に「enchant.js」で簡単なコードを書いた経験のある人なら、ほぼ同じような感覚で物理エンジンが利用できるようになっています。

そこで、まずは基本となる「HTMLファイル」と「JSファイル」の骨組みを、以下のように用意しておきます。

1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>物理エンジンのサンプル</title>
    <script src="js/enchant.js"></script>
    <script src="js/main.js"></script>
  </head>
  <body>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10

enchant()
 
window.onload = function() {
  var game = new Core();
 
  game.onload = function() {
    //ここに処理を書く
  }
  game.start();
}

HTMLファイルに、基本となる「enchant.js」ファイルと、メインの処理を書く「main.js」ファイルを読み込ませておきます。

「main.js」の中身は、「box2d」を使う、使わないに関わらず、最低限必要なコードの骨組みを用意しています。

上記ファイルの準備が出来たら、通常のゲーム作りはすぐに始めることができます。

ただ、今回は「box2d.enchant.js」を使って物理エンジンを利用するため、HTMLファイルにあと2つファイルを読み込ませておきましょう。

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>物理エンジンのサンプル</title>
    <script src="js/enchant.js"></script>
    <script src="js/Box2dWeb-2.1.a.3.js"></script>
    <script src="js/box2d.enchant.js"></script>
    <script src="js/main.js"></script>
  </head>
  <body>
  </body>
</html>

追加したのは、「Box2dWeb-2.1.a.3.js」と「box2d.enchant.js」です。

どちらのファイルも、公式サイトから「enchant.js」をダウンロードすれば、解凍したフォルダの中に入っています。

（参考）
以下のフォルダ内にあるファイルです。
「libs」→「Box2dWeb-2.1.a.3.js」
「build」→「plugins」→「box2d.enchant.js」

ひとまず、ここまで準備ができたら、第1段階は突破です！

物理エンジンの使い方！

それでは、早速「enchant.js」で物理エンジンを実装してみたいと思います。

ここから先は、「main.js」の中身をいろいろ編集していきます！

　
まずは、さきほど用意した「main.js」の中にある「game.onload」内に、「物理エンジンを使うよ！」…という宣言みたいな構文を書きます。

var world = new PhysicsWorld(0, 9.8);

この引数に「0」と「9.8」を入れている理由ですが、これは「横方向の重力」と「縦方向の重力」を数値で入れているだけです。

現実の世界では「横方向」に重力は無いので「0」にしています。「縦方向」に「9.8」を指定しているのは、一般的な重力加速度が「1G=9.8m/s^2」という理由です。
（これは、「box2d.enchant.js」のドキュメントに記載されてました）

このあたりは、考えだすとキリがないので、デフォルトで(0, 9.8)を指定することを覚えておけば良いでしょう。

　
あとは、ここで作成した「world」を、「game.rootScene」へフレーム毎に組み込めばOKです。

game.rootScene.onenterframe = function() {
    world.step(game.fps);
}

たったこれだけで、enchant.jsでは物理エンジンが使えるようになるのは驚きです。

　
ひとまず、ここまでを以下にまとめておきます。これが、物理エンジンを使う時のデフォルトテンプレートになるでしょう！

1
2
3
4
5
6
7
8
9
10
11
12
13
14

enchant()
 
window.onload = function() {
  var game = new Core();
 
  game.onload = function() {
    var world = new PhysicsWorld(0, 9.8);
 
    game.rootScene.onenterframe = function() {
      world.step(game.fps);
    }
  }
  game.start();
}

「物体」を落としてみよう！

物理エンジンを使う準備ができたので、とりあえず何か「物体」を作り、上から落として「重力」がどのように再現されているのか見ていきましょう！

まず、適当な「物体」を表示したいと思います。

通常なら、「Sprite」や「Entity」などを使うと思うのですが、物理エンジンを利用する場合はとりあえず「PhyBoxSprite()」を使えば良いでしょう。

構文は以下のとおり！

PhyBoxSprite(幅, 高さ, 動作モード, 密度, 摩擦力, 反発力, フラグ)

【幅・高さ】は、物体(四角形)のサイズを指定します。
【動作モード】は、物理エンジンの影響を「受ける」「受けない」を指定できます。
【密度】は、数値を大きくするほど、物体を重くしていきます。
【摩擦力】は、数値を小さくするほど、滑りやすくなります。
【反発力】は、数値が大きいほど、よく跳ね返ります。
【フラグ】は、【動作モード】と似ていますが、「true/false」を指定することで、物理エンジンの「影響の有無」を指定できます。

　
上記を踏まえた上で、32×32の物体を作るとこんな感じになります。

PhyBoxSprite(32, 32, enchant.box2d.DYNAMIC_SPRITE, 1.0, 0.5, 0.3, true);

（参考）
【enchant.box2d.DYNAMIC_SPRITE】は物理エンジンの影響を受ける。
【enchant.box2d.STATIC_SPRITE】は物理エンジンの影響を受けない。

　
あと、このままだと物体は上から落ちていき、画面外へ消えてしまいます。

そこで、床を設置してみたいと思います。

これも同じ要領で、以下のように作れることが分かります。

PhyBoxSprite(320, 16, enchant.box2d.STATIC_SPRITE, 0, 1.0, 0, false);

ゲーム画面のサイズが320なので「幅」も同じに指定し、物理エンジンの影響は受けなくても良いので「STATIC_SPRITE」を設定しています。

　
基本的には、これで「物体」と「床」は作成できたのですが、「色」と「座標」の指定をしないといけません。

指定方法は、以下のとおり！

var box = new PhyBoxSprite(......);
box.backgroundColor = "red";
box.position = {
    x: 160,
    y: 312
}

色の設定は、CSSと同じ感覚でOK。(#aaaとかも使えます)

あとは、作成した物体を通常通り「addChild()」してやれば完了です！

game.rootScene.addChild(box);

　
これで、「物体」と「床」が完成しました。

以下のサンプルを実際に確認してみてください！
（以下の画面内にマウスを置くと、右下に「RERUN」が表示されるので、クリックしてください）

See the Pen [sample1] enchant.js with box2d by webStudy (@webstudy) on CodePen.

赤色の四角形に重力が働いて、落下していくのを確認できるかと思います。

クラスを作ってみよう！

さて、いい感じに物体が落下してくれました。

しかし、この物体を10個、20個…と、たくさん表示したいと思った時に、いちいち「new PhyBoxSprite…」を何度も繰り返すのは面倒です。

関数を作っても良いのですが、「enchant.js」に標準で搭載されている「クラス作成機能」を使うと、簡単に複数の物体を表示できるようになります。

例えば、「PhyBoxSprite」のクラスは、以下のような感じで作れます！

var Box = Class.create(PhyBoxSprite, {
    initialize: function() {
        //ここに初期化処理を書く
    }
}

「initialize」の初期化処理に、物体の生成処理、座標位置、カラー、addChild…など、基本的なコードを書いておきます。

これで、「Box」という物体を持ったクラスが作られたことになります。

（参考）
クラスの変数名は、最初が大文字になるようにしておきましょう。

　
あとは、メインの処理に以下のコードを書くだけで、物体が表示されるようになります。

var box = new Box();

　
これだと、「for文」などと組み合わせて、物体を複数表示させるようなことも簡単になります。

for(var i=0; i<20; i++) {
    var box = new Box();
}

　
以下のサンプルは、上記内容を踏まえて「物体」をいくつか表示させたモノです。
(画面内にマウスを置くと、右下に「RERUN」が表示されるので、クリックしてください)

See the Pen [sample2] enchant.js with box2d by webStudy (@webstudy) on CodePen.

　
上記サンプルの「Box」クラスは、以下のようなカタチです。

1
2
3
4
5
6
7
8
9

var Box = Class.create(PhyBoxSprite, {
  initialize: function(x, y) {
    PhyBoxSprite.call(this, 16, 16, enchant.box2d.DYNAMIC\_SPRITE, 1.5, 1.0, 0.3, true);
    this.backgroundColor = "red";
    this.x = x;
    this.y = y;
    game.rootScene.addChild(this);
  }
});

初期化処理で、「物体の生成」「赤色の設定」「出現位置」「addChild()」を行っています。

少し変化があるとすれば、「function(x, y)」というカタチで、引数に2つの数値を設定している点です。

この「x, y」を、そのまま座標位置の「x, y」に入れてやることで、物体の出現位置を操作できます。

for(var i=0; i < 320; i+=32) {
    var box = new Box(i, i);
}

このサンプルでは、「x, y」にfor文の「i」を入れて複数の物体を表示してみました。

物体に「力」を加えてみよう！

せっかく物理エンジンを使っているので、物体をクリックして横方向へ勢いよく飛ばしてみましょう！

と言っても、実現するのは簡単で、以下の構文を覚えればOKです！

applyImpulse(new b2Vec2(横方向の力, 縦方向の力))

「b2Vec2」というのは「ベクトル」の意味で、物理エンジンの世界ではこのベクトルをベースにした数値を使わないと、上手く計算できないようになっています。

（参考）
「enchant.box2d.PhySprite」ドキュメント

　
あとは、生成したBoxに組み込むだけで使えるようになります。

1
2

var box = new Box();
box.applyImpulse(new b2Vec2(3, -2));

これで、右方向へ放物線を描くように飛んでいきます。

　
この新しい構文を「Box」に組み込んだサンプルが以下になります！

赤いBoxを、クリック(タッチ)すると横方向へ飛んでいくのが分かります。
(画面内にマウスを置くと、右下に「RERUN」が表示されるので、クリックしてください)

See the Pen [sample3] enchant.js with box2d by webStudy (@webstudy) on CodePen.

上記サンプルでは、Boxクラスの中へ「クリックイベント」も一緒に入れてみました。

こうすると、メインの処理がスッキリするので、扱いやすくなります。
(言い換えれば、クリックされると飛んでいく物体が作れるクラス…という感じでしょうか)

スプライトを利用してみる！

さて、そろそろ無機質な四角形の物体にも飽きてきたので、スプライト画像を適用してゲームっぽくしてみましょう。

画像は、通常のenchant.jsと同じように、「preload()」であらかじめ画像ファイルを読み込んでおく必要があります。

var game = new Core();
game.preload(
    画像ファイルパス,
    画像ファイルパス,
    画像ファイルパス
);

　
今回は、「enchant.js」で用意されている画像を使ってみたいと思います。

使うのは、以下の画像ファイルです。

　
読み込んだ画像ファイルを適用するには、「image」に画像パスを割り当てて、画像フレームを指定すればOKです！

var box = new PhyBoxSprite(16, 16, ......);
box.image = game.assets["画像パス"];
box.frame = 画像フレーム

これだけで、画像を使えます。

注意点として、「PhyBoxSprite」の幅と高さは、使用する画像のサイズに合わせることを覚えておきましょう。

「画像フレーム」は、自分が使いたい画像が何番目にあるかを指定すればOKです。例えば、「豚キャラ」は0から数えて22番目にあるので、「22」を指定するわけです。

　
四角形を「豚キャラ」にして、床の画像も差し替えたのが以下のサンプルです！
(画面内にマウスを置くと、右下に「RERUN」が表示されるので、クリックしてください)

See the Pen [sample4] enchant.js with box2d by webStudy (@webstudy) on CodePen.

上記サンプルでは、「床」もクラス化しています。

そして、画像の適用もクラス内で行うことで、メイン処理を見やすくしています。

（参考）
画像ファイルは、「png」で透過処理を施しておけば、自動的にその部分が透明に処理されるので便利です。

最後に…

これまで紹介してきたノウハウを使って、最後に障害物となる壁を表示してみたいと思います。

完成品はコチラ！
(画面内にマウスを置くと、右下に「RERUN」が表示されるので、クリックしてください)

See the Pen [Final] enchant.js with box2d by webStudy (@webstudy) on CodePen.

上記サンプルでは、「豚キャラ」をクリック(タッチ)すると障害物に向かって飛んでいき、壁を破壊していきます。

障害物も、他の物体と同様に「PhyBoxSprite」で作っているだけなので、それほど難しくはないと思います。

豚キャラは、転がっていくようにするため「PhyCircleSprite」を使って、円形の物体にしています。

まとめ

「enchant.js」を使っての物理エンジンは、いかがだったでしょうか？

基本的な部分しか紹介できてませんが、これだけでも「アングリーバード」風のゲームが作れそうな気がするかと思います。

もし、物理エンジンに興味があって、面白いゲームを作りたい方は、ぜひ参考にしてみてください！

（参考）
「enchant.js」公式サイト
「box2d.enchant.js」ドキュメント

昔は単独のツールだった「npm」も、今ではNode.jsをインストールすると一緒に付属されるくらいに、Node.jsのライブラリパッケージ管理として定番になりました。

そんな「npm」の現状を知るために、さまざまな統計情報を分かりやすく3DCGで視覚化したサイト「Understanding npm」が話題になっているのでご紹介しておきます。

使い方！

サイトにアクセスすると、さまざまなパッケージを管理するnpmのデータベースを意味する「球体」が表示されています。

このまま、右側にある「LET’S GO」をクリックしましょう。

　
すると、3Dで描かれた美しいアニメーションと共に、npmに関連するさまざまなデータを閲覧することができます。

例えば、npmに追加される新しいパッケージは1週間で「5,800」を超えていたり、逆に1週間でダウンロードされるパッケージ数は、なんと「約4億」近いそうです。

　
他にも、npmを使ってどんなパッケージがダウンロードされているのかを、散布図を使って紹介しています。

grunt、gulp、nodeあたりは、さすがに多いようですね。

　
今まで、何気なく使っていた「npm」に少し詳しくなれるサイトなので、ご興味ある方はぜひ参考にしてみてください。

（参考）
「Understanding npm」公式サイト

Webサイトのトップページなどで、背景に動画を組み込んだサイトが増えていますが、そんな用途に最適な動画ビデオを公開しているサイト「Coverr」のご紹介。

公開されている動画は、すべてパブリックドメインのモノを収集しているので、自分のサイトなどへ自由に利用できるのが嬉しいところ…。

使い方！

サイトにアクセスすると、いろんなジャンルに区分けされた動画一覧が表示されているので、気に入ったモノをクリックしてみましょう。

動画のポップアップが表示されて、どんな映像なのかを確認できるようになります。

　
また、この時に「See it as a Coverr」ボタンをクリックしてみます。

　
すると、「Coverr」のトップ画面に、先ほど選択した動画が背景に組み込まれて表示されます。

これにより、実際に使った場合のイメージが出来るので便利です。

ダウンロードした動画ファイルには、「mp4」ファイル(1920×1080)と一緒に「jpg」「webm」ファイルなども付属されています。

公開されている動画は、毎週月曜日に追加更新されていくので、定期的にチェックしておくと良いでしょう。

（参考）
「Coverr」公式サイト

運転中のスマホ使用を低減するべく、海外で誕生したスマホアプリが「SafeDrive」です。

車を運転している最中に、スマホを使わない代わりに「ポイント報酬」を貯めて買い物ができる…という、極めてシンプルなコンセプトですが効果的かと思います。

使い方！

目的がハッキリしているので、使い方も非常にシンプルです。

車を運転する際に、「SafeDrive」アプリを起動するだけでOK！　あとは、すべてバックグラウンドで自動的に監視モードになってくれます。

およそ「10km/h」以上の速度になると、運転をしていると判断して自動的にポイント報酬が加算されていきます。

GPS情報、距離、時間、速度などのデータを元に、独自のアルゴリズムによってポイントが計算される仕組みとなっています。

　
この状態のまま、スマホを使わずに運転が終わればポイントを獲得することができます。

ただし、途中でスマホをいじるためには、監視モードを解除する必要があります。そうなると、今までのポイントがゼロに戻る仕掛けになっています。

ちなみに、車の運転をストップすれば、自動的に監視モードは解除されるので、スマホを操作することは可能です。

ポイント報酬で買い物！

獲得したポイントは、そのまま海外のネットショッピングなどで利用できるようになっています。

現状、ほぼすべて海外サイトなので、せめてAmazonでの利用ができればユーザーも増えるような気がします…。

　
まだまだ改良の余地があるアプリですが、運転中のスマホ使用をやめる「きっかけ作り」としては良さそうです。

（参考）
「SafeDrive」公式サイト

「CSSでアニメーションは難しい！」とか、「JavaScriptで全部制御したい！」…という人にはオススメのライブラリ「Dynamics.js」のご紹介！

コードが非常にシンプルで扱いやすいのが特徴で、単純なWebサイトへ簡単に動きを付けられるようになります。

使い方！

まずは、Downloadページから最新版の「Dynamics.js」をダウンロードしましょう。

2015年6月現在の最新版は「0.0.3」となっています。(恐らく今後も活発にバージョンアップされていくと思います…)

　
あとは、HTMLコード内でDynamics.jsを読み込めば、準備OKです！

1
2
3
4
5
6
7
8
9
10

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dynamics Sample</title>
    <script src="dynamics.js"></script>
  </head>
  <body>
  </body>
</html>

アニメーションの制御方法！

実際に、Dynamics.jsを使って「CSSアニメーション」を制御する方法ですが、ざっくり言ってしまうと、以下の構文を覚えるだけで使えてしまいます！

dynamics.animate(el, property, option);

-【el】
DOMエレメントのことで、CSSでスタイリングするように要素を指定します。

-【property】
移動、回転、拡大など、どんなアニメーションをさせたいかを指定します。

-【option】
アニメーションの種類や持続時間、周期、摩擦力など、細かい微調整をします。

　
ひとまず、これだけ覚えておけば手軽にアニメーションが実現できるのは魅力的です。

実際に作ってみよう！

　
例えば、以下のように「div」要素で作った黒色の四角があったとします。

1
2
3

<body>
  <div id="box"></div>
</body>

1
2
3
4
5

#box {
  width: 60px;
  height: 60px;
  background-color: black;
}

　
この状態で、先ほどの構文に当てはめながらjavaScriptを書くと、以下のようになるでしょう。

1
2
3

var el = document.getElementById('box');
 
dynamics.animate(el, property, option);

「div」要素のboxを「el」として設定しました。

あとは、「property」と「option」を指定すれば、「div」要素のboxはアニメーションしてくれるわけです。

　
今回は、左右にバウンドするようなアニメーションを指定したいと思います。

そこで、「property」に横移動を設定し、「option」にバウンドするアニメーションを指定したのが以下のスクリプトになります。

1
2
3
4
5
6
7
8
9
10
11
12

var el = document.getElementById('box');
var property = {
    translateX: 400
}
var option = {
    type: dynamics.bounce,
    frequency: 600,
    friction: 400,
    duration: 2500
}
 
dynamics.animate(el, property, option);

どんなオプションのパラメータが指定できるのかは、「Dynamics.js」の公式サイトで実際に試せるようになっているので便利です。

上記サンプルに、スタートボタンを追加したのがコチラ！
（ボタンをクリックすると、アニメーションします）

See the Pen QbMOGz by webStudy (@webstudy) on CodePen.

まとめ

「Dynamics.js」は、単純にパラメータを指定するだけなので、プログラミングというよりも「ジェネレーターアプリ」に近いかもしれません。

使い方はすぐに覚えられるので、既存のサイトやブログに面白いアニメーションをぜひ実装してみてください。

ちなみに、公式サイトにも掲載されていますが、SVGをアニメーションさせることも可能です。

See the Pen Sample for Dynamics.js by webStudy (@webstudy) on CodePen.

ちょっとしたアクセントには最適ではないでしょうか。

　
注意点としては、あまり古いブラウザには対応していないところ…。
（推奨されているのは、Safari 7+, Firefox 35+, Chrome 34+, IE10+となっています）

（参考）
「Dynamics.js」公式サイト

「豪華クルーザー」を夢見ている人には朗報かもしれません。

数千万円〜数億円は普通にするのがクルーザーなわけですが…、「購入なんてとても無理！」と思っている人は、海外で話題のWebサービス「Antlos」を利用すると格安で船上バカンスを満喫できます。

利用方法も、空き部屋レンタルサービスの「Airbnb」と似ているので、手軽に使えるのも特徴です。

使い方！

サイトにアクセスすると、現在人気のクルーザーがラインナップされているのが分かります。

気になるクルーザーを見つけたら、クリックしてみましょう。

　
さらに、検索ボタンから自分が希望する細かい条件を指定することも可能！

金額、船のスペック、シーン別、場所…など、細かい条件を指定できます。

　
詳細画面では、船内を撮影した写真や、利用条件、設備のリストなどを事前に確認して予約ができます！

利用料金に関しては、「◯◯ドル／人」(1日)となっており、利用可能な期間はそれぞれのクルーザーによって違います。

　
ざっくり見たところ、「19ドル／人」でレンタルできる船もあれば、「600ドル／人」くらいする船もあり、船内の様子や設備などもかなりバラエティに富んでいます。

希望の条件にピッタリ合うクルーザーを予約して、豪華な海外旅行を過ごせるのは面白いのではないでしょうか。

（参考）
「Antlos」公式サイト

調理オーブンに、こんなスペックが必要なのか…。と、思わずツッコミそうになるプロダクトですが、内容を知ると理解できるはず…。

「June」は、オーブンの中に入れた料理を「カメラ」で自動認識し、最適な調理プログラムを実行できるという先進機能が特徴のようです。

最新オーブン「June」とは…？

「June」を使うと、例えば「クッキー」を焼きたくてオーブンに入れると、自動的に何が入っているのかを判断して表示してくれます。

表面の5インチタッチディスプレイに、どんな食材が入っていて、どういう調理方法でどのくらいの時間焼けばいいのかを瞬時に教えてくれるのです。

これを可能にしているのが、NVIDIAが開発したクアッドコアCPU「Tegra K1」と、192基のコアを持つGPU、1920×1080のフルHDカメラとなります。

Wi-Fiで、独自のサーバーとリアルタイムに通信を行い、データベースと照合しながら最適な調理方法を提案してくれるようになっています。

　
また、調理中にオーブン内を「ライブ中継」してくれる機能もあり、スマホへ映像を流してくれます。

どんな状態になっているかを、遠隔で確認できるようになっており、映像をSNSへ投稿したりも可能です。

　
スマホとの連携機能は豊富です。

完了が近づいたら「プッシュ通知」で知らせてくれたり、専用の温度測定器を挿入していればリアルタイムな温度変化もグラフ化してくれます。

また、プロのシェフが作成した調理レシピも閲覧することができ、「June」を使った調理がさらに楽しくなりそう…。

　
実際に、「June」を使ったデモは、以下の動画から視聴できます。

（参考）
「June」公式サイト

Android Wearで心拍数を測定できるアプリ「Cardiogram」を使った面白いグラフが公開されているのでご紹介しようと思います。

グラフは、アップルWWDCに参加しているユーザーの心拍数を記録しているのですが、他の様々なイベントでも活用してみると面白いと感じました。

イベントログを心拍数で記録する！

公開されているグラフにアクセスすると、WWDCのイベント内容がどのような盛り上がり具合だったのかを確認することができます。
（※グラフは個人ユーザーのモノです…）

ちなみに、このユーザーは「iOSの新メモアプリ」と「iPadのマルチタスク」に興味があったようで、心拍数が最も高くなっているのが分かります。

このように、過去のイベントで自分がどのように感じたのかを、記録として残せるわけです。

友人同士でグラフを見せ合って、どのタイミングで興奮したのかを比較するのは面白いかもしれません。

個人的には、参加しているユーザー複数人のログを集計できる機能などがあれば、さらに有用な価値を残せるような気がしています。

「Cardiogram」って何？

今回使用されている「Cardiogram」ですが、Google Fitと連携してスマホからもログを確認できる「心拍数測定」アプリです。

Android Wearを持っていないと使えませんが、ウォッチの消費バッテリーが１日使っても1〜3%程度という優秀なアプリのようです。

まだベータ版ですが、Apple Watchにも近日中に対応するようなので、興味ある方は公式サイトを参考にしてみると良いでしょう。

（参考）
「Cardiogram」公式サイト
公開グラフ｜Cardiogramサイト

最近Linuxに触れる機会が多くなってきたので、そろそろ時間を割いて勉強でもしようかとネットで検索していたら、意外な事実を知りました…。

日本には、素晴らしい教材があったんですね…。

その名も「Linux標準教科書」。

「Linuxとは…」から始まり、基本的なコマンドの使い方から「ファイル操作」「シェルスクリプト」「Vim操作」「ネットワーク管理」など、基本的な知識が無料で公開されています。

どうやって入手するの？

この教材は、Linux技術者認定試験を運営する「LPICの公式サイト」からダウンロードできるようになっています。

そのため、すでにご存知の方も多いと思うのですが、私のようにまだ知らない人もいるのでは…？ と思ったのでご紹介しておきます。

　
入手方法は簡単で、「Linux標準教科書」のダウンロードサイトにアクセスして、「PDFダウンロードリンク」をクリックします。

あとは、名前とメルアドを入力し、簡単なアンケートに回答するだけでダウンロードできます！
※PDF以外に、EPUB版や紙の書籍版(有料)もあります。

初心者に最適な教材内容！

教材の内容としては、初心者でも理解しやすいように図解入りで解説してあり、体系的にまとまっているので効率よく勉強できるはず!

本教材の著作権は特定非営利活動法人エルピーアイジャパンに帰属します。
Copyright(C) The Linux Professional Institute Japan. All Rights Reserved.

　
以下に、簡単な概要を紹介しておきます。

第1章・第2章で、UNIXやディストリビューションなど、Linuxの基礎知識とインストール方法がまとまっています。

第3章〜第5章で、ファイル操作を行う基本的なコマンド学習と、正規表現・パイプなどを学びます。

第6章は、「viエディタ」の使い方がまとまっていますが、これは「Vim」に置き換えて読んでも問題ないでしょう。

第7章・第8章で、管理者権限やアクセス権などの基礎知識を学びます。

第9章は、覚えると強力な「シェルスクリプト」の基本的なプログラミング手法について書かれています。

第10章は、TCP/IPやIPアドレスなど、ネットワーク関連の基礎について学習します。

第11章で、パーティションやスワップ領域などのファイル管理について学べるようになっています。

　
上記内容がすべてまとまっていることで、まさに「教科書」という名にふさわしい教材と言えるでしょう。

（参考）
教材の「正誤表」も頻繁に更新されているので、参考にすると良いでしょう。

他にもまだある素敵な教材！

実は、LPICのサイトには、今回ご紹介した入門教材だけでなく、さらにステップアップできる以下の教材も無料でダウンロードできるようになっています！

1. Linuxサーバー構築標準教科書
2. Linuxセキュリティ標準教科書
3. 高信頼システム構築標準教科書
4. Linuxシステム管理標準教科書

いずれも200ページ近いコンテンツで、入門教材と同じく体系的にまとまっているので非常に役立ちます！

Linuxの学習をこれから始める人はもちろんですが、すでに業務で使っている人も新しい発見があるかもしれません。

ぜひ、参考にしてみてください！

（参考）
「Linux標準教科書」ダウンロード｜LPICサイト
「LPICの公式サイト」

Webサービスを運営していると、ユーザーへメールを送る機会は少なくないはず。

そこで、他のWebサービスがどんな内容のメールを作成しているのか確認できる珍しいサービス「Great email copy」をご紹介します！

メールコンテンツの学習にも最適です！

使い方！

サイトにアクセスすると、さまざまなWebサービスの「メールコンテンツ」がズラッと表示されているのが分かります。

左メニューから「カテゴリ検索」が出来るようになっており、画面右下にある「More」ボタンをクリックすれば、更なるメールが次々と表示されます。

　
特に「カテゴリ検索」が便利で、例えば「activity」を選択すると、ユーザーがサービスを利用している進捗具合を知らせる「メールコンテンツ」が表示されます。

　
他にも、「news」をクリックすれば、通知や新機能の紹介などを知らせるメールが確認できます。

このようなコンテンツを閲覧できることで、新しい発見があったり、自分のサービスにも取り入れてみよう…といった「取り組み」に繋がるかもしれません。

　
「Great email copy」を提供しているのは、最適化された顧客層へ効率よくメールを送れるサービス「Customer.io」を運営するチームです。

（参考）
「Great email copy」公式サイト

最近は、決済系のWebサービスが増えてきているのですが、Dropboxにお手軽な決済機能を追加できる「Dropshop」が面白かったのでご紹介します！

ログインも不要で、非常にシンプルな決済サービスとして設計されており、誰でも手軽に利用できるのが最大の特徴となっています。

使い方！

サイトにアクセスすると、すでにDropboxのファイルを設定する画面になっていいます。

「Choose from Dropbox」ボタンをクリックして、販売したいファイルを選択するだけです。

　
あとは、販売する「価格」を設定し、売買が成立した時に連絡を受け取るための「メルアド」を設定します。

　
たったこれだけで、即座に決済リンクが生成されます。

このリンクを、SNSやメールなどで伝えればOKというわけです。

決済リンクをクリックしたユーザーは、クレジットカードで即座に売買が成立するようになっています。

売買が成立したら、登録したメールアドレス宛に連絡が来て、「Stripe」や「PayPal」などでお金を受け取ることが出来るようになっています。

　
あくまで決済機能だけの提供になっているので、自分のブログやSNSにリンクを貼り付けて、「電子書籍」や「写真」などの媒体を販売するのに向いているかと思います。

まだベータ版の公開ですが、現在は欧州を中心に話題になりつつあるようですね。(価格も、現在は「€」指定になっています…)

（参考）
「Dropshop」公式サイト

Go言語も、意外と面白いんだなぁ…と感じたのでご紹介しておきます！

コンソールの画面上に、プレイ可能な「テトリス」を再現した「gotetris」が、GitHubで公開されてます。

すべてGo言語でプログラミングされており、非常にシンプルな構造にまとまっているのでコードリーディングにも良さそうです。

遊び方！

「README」テキストにも詳しく掲載されていますが、以下の手順で「gotetris」を簡単にインストールできます。

まず、コンソール画面でディレクトリを作成して、「cd」で移動しておきます。

$ mkdir -p gotetris/src/github.com/jjinux
$ cd gotetris

　
次に、「git clone」で本体ファイルをインストールします。

$ cd src/github.com/jjinux && git clone https://github.com/jjinux/gotetris.git

　
あと、知らなかったのですが、Go言語は特殊な「環境変数」を設定するようです。

$ export GOPATH=`pwd`
$ export PATH=$PATH:$GOPATH/bin

とりあえず、上記をコピペして実行してみてください。(見た目に変化は起きませんが…)

　
必要なGoパッケージなどをインストールします。

$ go get -u github.com/nsf/termbox-go

　
そして、ビルド＆コンパイル！

$ go install github.com/jjinux/gotetris

これで、準備完了です！

遊んでみる！

「gotetris」で遊ぶには、以下のコマンドを実行すればOK！

$ gotetris

　
これで、コンソール画面の表示が以下のようになるはず！

　
操作説明にも書いてますが、キーボードの「Sキー」を叩くとゲームが開始されます。(終了は「ESC」)

操作は「矢印キー」で行い、スペースキーで一番下まで落とせます。

あとは、普通にテトリスを楽しむだけ！

コンソール画面でも、こんなにインタラクティブなゲームが作れるんですね…。

　
ちなみに、コードを見てみると「モデル・ビュー・コントロール」の3つに分かれており、MVCベースでプログラミングされているようです。

Go言語は、日本語ベースの「ドキュメント＆学習サービス」も用意されているようなので、「gotetris」と合わせて勉強すると良いかもしれません。

（参考）
「gotetris」GitHubサイト