読者です 読者をやめる 読者になる 読者になる

MashupAwards 2016準決勝出展作品にみる、最近のAPI/デバイス/サービス事情

記事の内容

今回の記事は、12/3に参加してきたMashupAwards2016(http://mashupaward.jp/)準決勝の出展作品で使われている、API/デバイス/サービスを集計してみたらこんな感じだった! というLTを12/10のHakodate Hack Night Vol.7(https://www.facebook.com/events/719922814823940/)で話してきたので、そのLTについての記事になります!

↓LTのスライドはこちら

https://speakerdeck.com/natmark/hakodate-hack-night-vol-dot-7-lightning-talk

(スライド内ではAPI/デバイスとなっていますが、サービスも含んでます。)


簡単にスライドの補足

slide6

MashupAwardsの出展作品はすべてHacklog(http://hacklog.jp/)に登録されていて、

f:id:n_atmark:20161211181900p:plain

このように、作品ごとに使用したAPIを登録できるようになってます。 これを、スクレイピングと手作業で集計してみた結果がスライドに書いてあります。

slide7

API/デバイス/サービスを利用したグループが3つ以上あったものをランキングにしてみました。 1位が同率で、

でした。

slide8

集計した全APIをd3.js(https://d3js.org/)によって、バブルチャートにしてみたものです。 一番多くの割合を占めてる青色部分はIoTカテゴリのAPI/デバイス/サービスを占めています。 その周りに、オレンジ(クラウド・データ連携)、黄緑(ガジェット)、赤色(プラットフォーム)、ピンク(認識・解析技術)・・・と続いています。

slide9

集計したデータからIaaS、PaaS、BaaSといったクラウドサービスに関するものを抜き出してみました。(AzureはIaaSとPaaSどちらの面も持っているので、重複させています)のべ数が34あり、出場チーム56に対して、半分以上のチームがハッカソンクラウドサービスを利用していたことがわかりました。

slide10

今回myThingsやIFTTT(イフト)、DataSpiderといった、API連携プラットフォームを利用しているチームがそれなりに見られました。Webサービスやデバイスをプログラミングせずに連携できるもので、IoTブームに見られる新たなサービスなのかな、、。と思いました。

時間の縛られるハッカソンでこそ、見られた傾向かも。

slide11

最後に企業別に利用されているAPI/デバイス/サービスを利用されたAPI数(種類数でなく利用数)ごとに並べてみました。これ、利用種類数で並べてたら、API/デバイス/サービスの提供を頑張ってる企業がわかったかも。スライドの表見て分かるのは、マイクロソフトが圧倒的に人気ですね。

まとめ

データを解析するの楽しかったです。アナリティクススキルをつけるともっといろいろなことがわかるようになるのかなぁ...と思いました。 また何か機会があればデータ分析してみたいです。

MashupAwards2016 函館予選に参加してきました!

10/9-10/10にはこだて未来大学で開催された 「Mashup Awards*1 2016 函館予選」 に参加してきたので、お酒を片手にハッカソンレポを書いていこうと思います。

mashupawards.doorkeeper.jp

参加者としてハッカソンに参加するのは実に1年ぶりでした。昨年6月のSPAJAM振りでした。

natmark.hateblo.jp

前回のハッカソンも、予約したはずの夜行バスが取れてなくて大変でしたが、 今回のMashupAwardsでも困難が立ちはだかるのでした...

1日目

スポーツ・食べ物に関する絵を描いてアイスブレイク!

かきかき。左側は僕です。なんの絵でしょう〜か?*2

イデアソンとチームビルディング!

イデアソンの様子です。 「未来キーワード」×「スポーツ・食べ物」でマッシュアップ

イデアを考えて...

チーム募集!

チーム決定!

今回、僕と学部4年の先輩が同じアイデアだったので 「手を使わない卓球」 をチームを募集して作ることになりました。

チーム募集を行った結果...

  • H.Sさん(デザイナー・学部1年生)
  • N.Sさん(デザイナー・学部1年生)
  • S.Kさん(エンジニア・中学1年生)
  • 自分(エンジニア・学部2年生)
  • K・Sさん(エンジニア・学部4年生)

5人のチームができました! エンジニアが3人・デザイナーが2人というバランスが良さそうなチームになりました。 なんとこのチーム、最年少が中学1年生、チーム平均はなんと18歳!

周りのチームが学部4年生や院生のメンバーが多いなか、平均年齢18歳は異彩でした。

ハッキング!

今回ですが、「手を使わない卓球」を作るにあたって、SONYさんのSmart Tennis Sensorを使用しました。

こちら、本来テニスラケットに取り付けて、スイングスピードやスピンを測定するものなのですが...

これをなんと...

足に付けてみました!

f:id:n_atmark:20161011000020g:plain

ちゃんと値も取れてます!!

この時点でまだお昼前。順調と思いきや、この後様々な困難が立ちはだかるのでした...

お昼ご飯

函館名物ラッキーピエロ。未来大生からすると、みんな食べ慣れた味ですねw

午後→夜

午後に入って、まず第一の困難。

エンジニアのK・Sさんが突発的な発熱

ハッカソンで体調を崩すことって結構あるんですよね...僕もよくあります...。 無理しても体調が良くなることはないので、K・Sさんにはしっかり休んでいただいて、他のメンバーでK・Sさんの分まで頑張ることに。

まず、アプリの構成を考えました。

f:id:n_atmark:20161011001525p:plain

これが初期案です。Smart Tennis SensorがAndroidしかAPIを提供していないため、Android端末を経由させています。 Smart Tennis Sensor一つの値だけでしたので、サーバを立てる時間も人も余分に割くのはもったいないため、mBaaSを使うことにしました。(これが後々大変なことに...)

この時点で僕が最年長になったので、プロジェクトのリーダーを担当することに。 とりあえずタスク振りをする必要があったので、

  • H.Sさんにプロダクトデザイン・UIデザインをお願い
  • N.Sさんに3Dモデリング・モデルデータ整形をお願い
  • S.KさんにAndroid経由でセンサーの値をmBaaSにデータストアできるようにお願い
  • 自分はUnityでゲーム本体を作ることに

午後は個人でこつこつやる感じに

f:id:n_atmark:20161011002935j:plain f:id:n_atmark:20161011002952j:plain f:id:n_atmark:20161011003008j:plain

午後の成果

ロゴマーク f:id:n_atmark:20161011003510p:plain

3Dモデル f:id:n_atmark:20161011003531p:plain

Unity

ゲーム画面が、ピッチングマシンみたいにボールが出てきて、卓球台の上を跳ねるように。

Android

mBaaSデータストアにデータ送信できるように。

新たな問題

この時点で、一日目19時くらいなのですが、新たな問題が。

mBaaSのデータストアイベントをハンドラにして、Push通知の作成ができない!(できると思ってた!) 完全にこれは僕の調査不足でした...。 mBaaSはスクリプトを記載できると聞いていて、サーバ側でトリッキーな処理もできるものだとばかり思っていました...

仕方ないので、構成案を変えることに。

f:id:n_atmark:20161011004458p:plain

AndroidからNCMB SDK経由でPush通知を作成することに。

しかしそこでも、新たな困難が。 Push通知はUnity側で受け取ることができず、UnityからiOSAndroidに書き出したあと、 iOSAndroidのOSの機能として利用することができるというもの。 UnityにNCMB SDK追加したからと言って、Unityで使えるわけではなかったのです。

ならこうだ f:id:n_atmark:20161011005126p:plain ということで、iOSに書き出してみましたが、 iOSでPush通知を使うにはDeveloperアカウントと証明書が必要なんですよね...

幸いにもS.KさんがDeveloperアカウントを持ってたので、証明書作る→Unityから書き出し→起動→エラー→証明書作成→... を繰り返し3時間経過...

結局解決できず、この時点で22:30。 S.Kさんが未成年で、親さんのお迎えがあることもあり、一日目の作業はここまでに。

家に帰って

一日目の作業はここまでにということで、大学から帰ってきましたが、データ通信もできてないのに、寝れるわけもありません。 なんとかデータ通信をしようと構成案を練ります。

mBaaSがダメならFireBaseだ!ということで...

  • 第4構成。

f:id:n_atmark:20161011005833p:plain これなら、Push通知ではなく、Databaseの値が更新されたとき自動的にイベントが実行され、クライアント側で受け取れる! と思ったのですが、そんな簡単なはずもなく、Databaseのルール設定を行って、APIキーやらURLやらをunofficialなUnityのFireBase SDKに指定したものの...動かない。この時点で1時。

  • 第5構成。

f:id:n_atmark:20161011011433p:plain ここで、これ以上BaaSに執着すると失敗しそうだったので、サーバを立てることを決意。 ただ、僕にWebの知識がなかったので、この構成で一つミスを犯すことになります。 androidからpost送信、Unityとサーバはsocket通信によって、それぞれOSの機能を意識しなくても良くなります。

ただし、同じサーバでRestfulAPIサーバとWebSocketサーバを同時に立ち上げたのが間違いでした。 ポートを変えていれば、同じサーバでもいけると思ったのですが、 Herokuを使っている関係で、ポート番号はProcess.env.portに置き換わってしまい、ユーザ定義にできないのです。 これでもまだだめ...

  • 第6構成。

f:id:n_atmark:20161011011744p:plain Android側もSocket通信にしちゃおうという構成です。

every-studio.com

こちらを参考にしました。 f:id:n_atmark:20161011012554p:plain フロントエンドで実装したフォームからUnityにsocket通信ができていることを確認。 これでいけそうな気がしたので、1日目はここで寝ることに。3時就寝。

2日目

MAは10時からですが、S.Kさんと早めに作業することに。8時起床。

f:id:n_atmark:20161011012113j:plain

朝の未来大学。おはようございます。

MAが始まるまでにAndroidのsocketを頑張ってました。

2日目始まりました

10時〜12時

S.KさんとひたすらAndroidのsocketを試しました。

こちらを参考にしました。 dev.classmethod.jp

ここでも困難が。Unityで指定しているURIを設定しようとしたところ...、 socket = new SocketIO("http://10.0.2.2:3000/"); この部分ですが、WebSocketプロトコルが指定できず、httpかhttpsを使ってくれとのこと。

しかし、http/httpsを使用するとなぞのhandshakeエラー...

Androidに詳しいわけでもないのでお手上げ... *3

デザイナーのN.Sさんには、相手キャラクター、卓球のラケットの3Dモデルを用意してもらうようにお願いしました。 同じくデザイナーのH.Sさんには画面UIのデザイン素材の用意やプレゼンの作成をお願いしました。

お昼ご飯

はせがわストアのやきとり弁当でした。 やきとりなのに豚肉です。僕も3ヶ月前くらいに初めて知りました。

13時〜15時

これ以上Android側に負担を増やせなかったので、構成案を変えることに

  • 最終構成

f:id:n_atmark:20161011013749p:plain

サーバを2つ経由させました。 今回はHeroku様様。node様様でした。

ただ、GETでアクセスできるようにしたのにもかかわらず、Android側からURLRequestできない謎のエラー、、。 時間いっぱい対処しましたが、対応しきれませんでした、、。

発表会

記事がだいぶ長くなってしまいましたので、他チームの発表はぜひ MashupAwardsのTwitterから確認してみてください。

twitter.com

僕たちの発表

いろいろやりたかったのですが、結局メインの機能も不十分のままで、悔しい結果に終わってしまいました。 実装力に課題が残ってしまいましたが、次回のハッカソンに生かしたいです。

懇親会

ハッカソンといえば懇親会でお酒...はなかったですw 20歳になって、お酒が飲めるようになったのでちょっと期待していたのですが...!

ハッカソン恒例、写真撮影

家に帰ってから

ノベルティーハッカソンの醍醐味の一つですよね f:id:n_atmark:20161011015603j:plain

MashupAwardsお泊りセット f:id:n_atmark:20161011015619j:plain

Hacklog http://hacklog.jp/works/48558

ハッカソン内で作成したリポジトリf:id:n_atmark:20161011015741j:plain github.com

久しぶりのハッカソン楽しかったです。 来年もMashupAwardsが(函館で)あれば参加しようと思います。(次は入賞目指して!) おしまい。

*1:様々なデバイス、API、ハードウェア、技術をMashup(まぜ合わせ)し、人、企業もMashupをしながら、作品を生み出すことを楽しむものづくりの祭典。 2006年に始まった株式会社リクルートホールディングスが運営す日本最大級の開発コンテスト.

*2:最近バドミントンをしたので、バドミントンの絵を描きました

*3:後々、このエラーは非同期処理をしないと発生するエラーかもしれないと教えてもらうことに。Androidに詳しい人物がいなかったのは、結構痛かったです。

起動したターミナルアプリに合わせて、.bashrcの処理を分けた話

こんばんは。

 

今日は、Macでのターミナル環境を整えている時にちょっと特殊な(?)現象に遭遇したので、紹介しようと思います。

 

今回記事を書くにあたって、まず新しいターミナルアプリをインストールしたことが背景にあります。

 

Electron製のHyperTermというエディタを見つけ入れてみることにしました。

hyperterm.org

 

このエディタですが、Javascriptを書くことで、レイアウトやアニメーションを自由に変更することが可能になっています。

 

レイアウト等の変更についてはこちらの記事を参考にしてみてください。

qiita.com

 

公式で紹介されているPluginを入れてみました。

~/.hyperterm.js内のplugins:[]内に記述することで使用できるようです。

f:id:n_atmark:20161003011108j:plain

f:id:n_atmark:20161003004358g:plain

アニメーションが付いて、コマンドを打つのが楽しくなります。笑

 

そして、ここから本題です。

HyperTermをインストールしたのですが、HyperTerm側でPowerLineが表示されていません。

f:id:n_atmark:20161003011440j:plain

github.com

PowerLineが出ないので、ホスト名とユーザ名はもちろんパスも出なくなってしまいました。これでは困ります。

 

そこで、.bashrcの処理を実行ターミナルによって変更する必要が出てきました。

 

PowerLine側ではzshを使う案も考えたのですが、やはり使い慣れているbashの環境がよかったので、今回は.bashrcを処理を分岐することを目標にしました。

 

実行ターミナルを環境変数で確認できれば、すぐできそうなのですが、

なかなかネットで記事を探しても見つからず...

 

苦戦していたところで、そういえばsetとかいうコマンドがあったなぁ、と。ふと思い出す。

 

f:id:n_atmark:20161003012153p:plain

$TERM_PROGRAMという環境変数がありました。

(※どうやら、$TERM_PROGRAMという環境変数OS X用のものらしいです。)

 

 

function _update_ps1() {
export PS1="$(~/powerline-shell/powerline-shell.py --mode compatible $? 2> /dev/null)"
}
if [ ${TERM_PROGRAM} = "iTerm.app" ]; then
export PROMPT_COMMAND="_update_ps1; $PROMPT_COMMAND"
fi

 .bashrcを編集して、iTermで起動しているときにだけPowerLineを呼び出すようにしてみました。 

 

f:id:n_atmark:20161003011337j:plain

無事、HyperTerm側ではPowerLineを呼び出さないようにできました。

 

おしまい。

 

ポートフォリオサイトをリニューアルしました!

ポートフォリオサイトをリニューアルしました。

今までブログ記事などをポートフォリオサイトの方に載せていたのですが、すごく面倒くさい...というかいちいちデプロイかけるのが面倒くさくなり、ブログ記事を分離させることにしました。

そんなわけで、昨日からはてなブログへの記事投稿数が急激に増えているのはそういう理由です。笑

f:id:n_atmark:20160929184637p:plain

https://natmark.github.io/

 

以前のサイトはMaterializeを使用していたのですが、今回Bootstrap使いました。

Bootstrap様様です。

僕自身HTML/CSSはほとんどできません。見よう見まねでしか書けません。そんな僕でも手軽にリッチなレスポンシブサイトを作れるのはBootstrapのいいところです。

 

最近インスタグラムにはまっているので、インスタライクなヘッダーにしてみました。

f:id:n_atmark:20160929184831p:plain

background:linear-gradient(75deg, #E4A972, #9941D8);

1行でグラデーション実装できてしまうlinear-gradientがすごい便利でした。

 

おしまい

 

SnapteeでTシャツ注文してみた

友達の誕生日にTシャツを贈ることにしました。その際に、スマートフォンでTシャツが作れるSnaptee(https://snaptee.co)というアプリを使ったので、記事にしてみました。

f:id:n_atmark:20160929174439p:image

f:id:n_atmark:20160929174931p:image

このアプリですが、↑こんな感じで、好きな写真や文字をTシャツにデザインできます。

Tシャツだけでなく、パーカーやタンクトップも作れます。スマホで手軽に作れて、バリエーション豊富なのも良いところです。

ただ、デザインできるのは前面だけで、デザイン可能領域があるので、より本格的なTシャツデザインをしたいのであれば、別のサービスを利用した方が良いかもしれません。

 

今回は、illustratorを用いてデザインを作成し、それをiPhoneに転送して、使用することにしました。

f:id:n_atmark:20160929175316p:image

(某、洗濯機型ゲームです)

 

f:id:n_atmark:20160929175511p:image

illustrator側で、パスを書いて色をつけたものをSnapteeに移しました。

 

なかなか良い感じにできたつもりです(笑)

 

作ったTシャツはそのまま購入できます。

f:id:n_atmark:20160929175708p:image

サイズは、自分のサイズに合うもので良さそうです。Snapteeは香港の企業なので、インターネットでSnapteeに関する記事を探すと、普段より小さめのサイズを選ぶように書いてある記事が多いです。しかし最新のバージョンでは、アジアサイズを基準にしてくれているので、特に気にする必要は無さそうです。

 

カートに入れた後、お支払い方法の選択、お届け先情報の入力があります。

f:id:n_atmark:20160929180913p:image

先ほど書いた通り、Snapteeは香港の企業です。注文したTシャツは国際郵便で届くため、お届け先情報は英語で記載する必要があります。

(英語での住所の記載方法はこの辺りのサイトを参考にしてみてください:http://mysuki.jp/english-address-1413)

 

 

 f:id:n_atmark:20160929175915p:image

今回はTシャツ2枚購入しました。

 Tシャツの種類、サイズ、色によって値段が若干異なるようです。送料ですが、1枚500円。複数注文で割引されるようです。今回は送料が700円(300円引)でした。また、今回クーポンを使用したので10%引で購入できました。

 

ここで注意なのですが、注文した後、配送されるまでは、荷物の状況が確認できません。Amazonのように注文番号を入力して、注文内容を確認することはできないようになっています。

 

f:id:n_atmark:20160929181628p:image

 

配送まで2-5日と書いてありますが、私の場合は注文から12日後に出荷されました。(5日経っても何の連絡も無く、荷物の状況も分からなかったので結構焦りました。気長に待ってくれ、ってことなんでしょうかね…?)

 

出荷されると、トラッキングコードが発行され、荷物の配送状況が確認できるようになります。

f:id:n_atmark:20160929181916p:image

やっと配送状況が確認できるようになったので、一安心です。笑

 

結局、荷物が届いたのは注文してから16日後でした。北海道でしたが、配送には4日しかかかってませんね。

 

f:id:n_atmark:20160929182434j:image

f:id:n_atmark:20160929182442j:image

こんな感じで香港から届きました。

国際書留郵便なので、受け取りの際にサインが必要です。(私は都合がつかなかったので、再配達をお願いしました。)

 

f:id:n_atmark:20160929182700j:image

 

ホンコンより。

 

実際に、友達にプレゼントしました。

f:id:n_atmark:20160929182729j:image

今度これ着て、ゲームセンターで洗濯機のゲーム機で遊んでくれるらしいです。気に入ってもらえて良かったです。

 

おしまい。

準グランプリ頂きました!(過去記事)

Processingというプログラミング言語で開発したスケジューラ課題の発表会で準グランプリを頂きました!!
 

f:id:n_atmark:20150806212511j:image

 
プレゼンはこちら

TechFunでLTしました 2016(ブログ移行)

 

※ホームページのリニューアルに伴う記事の移行です

2016 4/21にてくふぁん*1でLTしたスライドになります。

興味のある人工知能分野より、パーセプトロンについての説明を載せています。簡単な単純パーセプトロンを使った論理計算を載せてます。

 

speakerdeck.com

*1:正式名称Tech Fun。公立はこだて未来大学のプログラミング系サークル