2016-07-28

Riot.js 勉強会を主催しました


今仕事でも使っている Riot.js 勉強会を、 「フロント界隈で一番イケてるのは AngularJS でも React でもなく Riot.js だという話」というブログでバズった @phi_jp さんを twitter でナンパして一緒に開催しました!

当日の connpass イベントのリンク(http://riotjs-jp.connpass.com/event/35724/)に詳細と、発表者の資料が公開されています!(まだ全員じゃないかも ※2016/07/27 23:35現在)

当日の僕の発表資料はコチラ↓

勉強会について

社内にも告知出そうと思ったら、いつの間にか情報公開したイベントが勝手に広まって一瞬で満席になってしまいました。かなり注目度の高い勉強会だったようで、開催できてとてもうれしいです!


今回の開催は首都圏で初めて行われた大きな勉強会ということで、ゲストスピーカーにコアコミッターの @cognitom さんをお呼びしました。
Riot.js の隅々まで知り尽くした方の基調講演レベルの発表も聞けて、とても充実した勉強会になったと思います。phiさんのハンズオンも実践的だったし、素晴らしかった。次回もやりたいなぁ。

発表内容について

最近頑張って黙々と仕込んでいたサイバーエージェントの新サービス、AMESTAGE (旧アメスタ) の Web ブラウザ版を作った話です。
サーバーからフロントまで、(というかフロントエンドエンジニアとしては初の仕事で) Riot.js + Web Components + Atomic Design な構成でガッツリ作ってみたよ〜という内容です。発表中のデモをやったんですが、同期のCA女子にお願いしてとても面白く出来たと思いますw

Riot.js のススメ

Riot.js はこれからフロントエンド開発が収束していくべき Web Components の考えに則り、React (使いたいし素晴らしいのだけど) のようなすべてのWeb製作者が使うには難しすぎるみたいなこともなく、一番シンプルに再利用可能なコンポーネントの作成を体験させてくれるステキなライブラリです。ぜひ使ってみてください!

謝辞

Riot.js を使って、Atomic Design に乗せて世に放った AMESTAGE。様々な人の助けを貰って開発できました。
近況報告じゃないですが、久しぶりに楽しく仕事させて貰ってます!Riot.js を始めるキッカケをくれた takusuta の皆さん、Atomic Design を社内に広めてくれていた goto さんをはじめ、いろいろな技術的な質問に答えて頂いた AbemaTV の皆様、役員の皆様、そしてチームメンバーの皆様、今の環境に感謝してもしたりないくらいです。
AMESTAGE成功させないとなぁ。。これからも頑張ります!!

2016-07-05

スマホブラウザで "アプリを開く" 的なボタンを用意する時に困ったことと対策

スマホのブラウザでアプリがインストールされている時はアプリが開き、インストールされていない時はストアが開く、みたいな実装をする事になっていろいろ調べたら困ったのでメモ。

アプリで開くリンク1つだけ用意する場合

もちろん Android と iOS で違う。
iOS はバージョンでも違う。
iOS 8 以下だと iframe 使ってカスタムURLスキームが生きているか判別できる。iOS 9 だと Apple に対策されちゃって出来ない。

Android ( http://nukokusa.hatenablog.jp/entry/2015/08/26/200000 ) と
iOS 8 以下ならこの記事の内容で出し分け出来る。http://qiita.com/ooyabuh/items/388ffb0427b2772a9c66

iOS 9 以降の対策

アプリで開く、という意味でのリンクは出し分ける方法が正式に無さそう。
いろいろあるけど、無理やり感がある。
http://qiita.com/makoto_kw/items/5a99e37f7172337ae4be

そこでUniversal Links

webと同じURLで、登録されていればそもそもwebを開かずアプリを開く。
http://qiita.com/mono0926/items/2bf651246714f20df626

Androidにもwebと同じURLでアプリを開く仕組みがあるけど、ブラウザで開くのか、アプリで開くのかをユーザーに選択させるのでちょっとイケてない。
http://qiita.com/nein37/items/3b69f85b97d0883eb1ca


結論

Android : 
アプリで開くボタンを用意して、インストールされていればアプリ、されていなければストアが開く。

iOS (8以下) : 
iframe でカスタムURLが生きてるかチェックして、ストアのURLを差し込んだりする。

iOS (9以上) :
Universal Links を使って、アプリが入っていればそのままアプリを開く、入っていなかったらストアへのリンクを用意した Web ページを表示する。


Universal Links だと、Twitter の告知からアプリ開いた時とか計測できないんじゃないの?とか思ったけど、その辺りはどうなんだろう。。


その他調べてて知ったやったいたほうが良いアレコレ

iOS9 の Search API に対応したら良さそう。

iOSカスタムURLスキームの注意点。(iOS9から開かなくなるらしいから要確認)

growth link がなんか計測もディープリンク対応もあっていい感じ。

他にも何か気をつけることとかあったら教えて下さい^v^