Riot.js x Firebaseで作る、超お手軽なパスワード不要のログインシステム「Magic Login」 - NOT SO BADなブログ
[2018年8月追記] 現在この機能はfirebase公式で提供されています。 このブログの実装方法もまだ使えますが、簡単なのでぜひ公式のをお使いください。 完全に使うあてもなく趣味で作った機能だったけど、 本体のSorceryにプルリク送ったらかなり歓迎されて、 あとはテストさえ書けば取り込んでもらえそうな状態です。 （じゃあ書けよっていう。。） https://github.com/Sorcery/sorcery/pull/8 しかし最近はFirebaseがマイブームなので、Firebase版のパスワードなしログインシステム「Magic Login」を実装してみました。 Firebaseには匿名認証の仕組みもあるので、ユーザー登録なしでも使えて、本登録するときは「MagicLogin」という組み合わせにすると、かなりいい感じになりましたよと。 環境Firebase: 3.5.0Riot
AMESTAGE を支える Riot.js とその構成について紹介
この記事は Riot.js Advent Calendar 2016 の 7 日目の記事です！！ Riot.js で芸能人とあそべる生放送サービス AMESTAGE というのを作っていて、動画サービスだったり、芸能人と一緒に遊べるクイズやコメント・ランキングといった各種機能盛りだくさんなせいか、そこそこ規模が大きくなってきました！ 是非遊んでみてください！！ そんな AMESTAGE での Riot.js との付き合い方について、どういう構成でやっているかをサーバー構成からビルド方法、Atomic Design というデザイン手法の導入、Flux な構成までザックリ紹介してみようかなと思います！ 基本構成 Node.js で Web サーバーを建てて、API サーバーやログイン基盤とのやり取りをまとめています。API サーバーを直接ブラウザからは叩きに行かず、 Web サーバーに実装した
シンプルでも最小の秩序を持ったオブザーバーパターンが使えるライブラリ Obseriot を書いた - Qiita
Flux によりもてはやされてる感のあるオブザーバーパターンですが、個人的に Flux はちょっと大袈裟すぎて疲れてしまいます。 もっとシンプルにできないものかと思って Riot.js に組み込まれてる riot-observable をラップしてちょっと便利にした Obseriot を作りました。 Riot.js での悩みを解決するために作りましたが、Riot.js( 本体 ) は不要なので何にでも合うはずです。 2016/08/01: Fluxのように使う方法を追記しました。 TL;DR Obseriot で解決したかったのは以下の点です。 使えるイベントに秩序が欲しい。定義したイベントだけを使いたい。 受け取れる値にも秩序が欲しい。常に定義したフォーマットで受け取りたい。 そこで riot.observable() の on と trigger をラップして以下のように使えるようにし
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python Twitter を見ていると 『Riot.js でも Sass 使いたいー！』ってのをちらほら見かけます. Riot.js は, 標準で Less にも Sass にも対応してると思っていたんですが, ちゃんと中身を読んでみると Less にしか対応していませんでした💦 (以前ドキュメントで対応してるっての見た気がするんだけどなぁ...) ただ, 引数で簡単に拡張できるよう良い感じに作ってくれているので, 手軽に Sass を導入できます. なので今回は, 実際に Riot.js のパーサーに Sass
Riot.jsで通貨コンバータを作る - Qiita
Riot.jsを使った、シンプルな通貨コンバータです。Browserifyでプリコンパイルするサンプルとして作ってみました。Yahoo!からAPIで現在の通貨レートを取得して表示するだけ。インクリメンタルサーチができます。(よく考えたら、「コンバータ」ですらないですね) ※この記事は、こちらの日本語版的な内容になります。 試す GitHub Pagesに置いておきました。Riot.js Currency Calculatorにアクセスしてみてください。 クローンとビルド 手元で試すには、次の手順でどうぞ。 このリポジトリをクローン $ npm install $ npm start Gulp と Browserify この例では、いくつかのgulpタスクが定義されています。 clean: 生成されたファイルを削除する browserify: .js, .tagファイルをコンパイル css:
Riotのテストと宿命の反乱(karma-riot) - Qiita
AngularのテストではおなじみのKarma(=宿命、業)ですが、すごい名前ですよね...。karmaのRiotプラグインは日本語だと「宿命の反乱」でしょうか。フロントエンドのテストの話です、念のため。 というわけで、Riotの公式リポジトリにこのKarmaプラグインが仲間入りしたので、簡単に要所をまとめたいと思います。 アプリケーション構成(例) 極小構成ということで、この記事の登場人物はこの5ファイルだけです。動いているのをまず触りたいという方は、こちらにPlunkerで編集可能なものがあります。ソースとテスト一式はこちら。 app.tag index.html karma.conf.js package.json test/ specs.js アプリケーション本体 まずapp.tagですが、簡単なルーティングのデモになっています。ここではテストの説明が主眼なので、細かい話は略。 <
Riot.jsの落とし穴まとめ - Qiita
はじめに 軽量かつ学習コストも低めで書きやすいライブラリのRiot.jsですが、いわゆる落とし穴がいろいろあります。が、このライブラリに関する日本語の記事があまり多くなく、コード書いていると突然「あれっ！？」となることがたまにあるので、自分が知っているものを書いていきます。 ※執筆現時点でのバージョンは2.4.1です。 ※2016/11/10追記 既に3.0.0-alpha.13がリリースされた今、2.4.1なんて古いバージョンを使っている方はいないと思いますので、今の時点での2系の最新である2.6.7でも確認しました。 親タグマウント時に子タグもマウントされる タグ(.tagのこと)がネストしていると、親タグをマウントすると子タグも一緒にマウントされます。 例えば以下の様な場合、親タグ（appタグ）で何か処理する必要があって、その結果でマウントする子タグを決めたい場合、子タグ（child
RiotGear - The open source component library for RiotJS
Fork me on GitHub RiotGear The open source component library for RiotJS Get Started v3.6.0 - View Github Project - Download - Blaze CSS Ready made components RiotGear was built to help. Help you improve your app development speed. If we've built it already why reinvent the wheel? The components should have all the functionality the majority of people need. In just a few lines of code you could hav
Riot.js試してみた - Qiita
Reactで消耗しているmizchiです。 とりあえず一通り動かしてみた。webpack上でtag-loader使ってtagを動的にコンパイルすると便利だった。 https://github.com/mizchi-sandbox/webpack-riot-skeleton Overview 軽量仮想DOM実装 Vue風の独自文法 riotが軽量なのは独自の文法に対してプリコンパイラを持っててパーサがランタイムから切り離されてることと、仮想DOM実装が本当に最低限で結構サボってるようにみえる。 仮想DOMの実装部分はここ https://github.com/muut/riotjs/blob/master/riot.js#L348-L413 一通り書いてみた結果、独自シンタックスが最大の特長で、イベントハンドラ周りで基本的にDOMべったりのコードを要求されるといった印象。 JSとHTMLを並
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python はじめに 「webpack インストールしといてー」, 「gulp 導入して watch しながら開発してー」, 「React だから ES6 でコード書いてー」 最近こんな会話が当たり前のように現場で飛び交っています. フロントエンドの開発者には HTML, CSS に特化している人 (coder, markup engineer) JavaScript は得意だけど CSS はちょっと弱い人 (javascripter) HTML, CSS, JavaScript 全てを統べる者 (frontend
Riot はミニマルで Web Components のような UI ライブラリ - Qiita
古典的な構成のサービスを AWS Lambda + S3 で動作するサーバーレスアーキテクチャで再構築し、そのフロントエンドに Riot を採用しました。 プロジェクトは WWD JAPAN.com として公開しています。 React や Angular などに代表される JavaScript の UI ライブラリのうち、Riot はミニマルな API と HTML 標準に近い文法を採用しているのが特徴です。 Riot はコンポーネントベースの UI 開発から複雑さを取り除き、楽しさを与えます。 TL;DR Riot はこれまでの UI ライブラリと比べて以下の点で異なります。 必要最小限の API 少ないボイラープレート Web Components ( HTML Template ) に似た文法 React のコードと比較してみます。 ToDo アプリケーションを React で書くと
Riot.js ソースコード完全解説 - Qiita
追記・「Riot.js ソースコード完全解説 v3対応版」を公開しました。(2016/7/26) 2.0.7時点のコードを読みます。 Qiitaの記事としては、ボリューム感に溢れてますが、ひとつのライブラリとしては驚異的に短いです。各所で指摘されているように、結構サボった実装になっています。ただ、なんだかそれを指摘するのすら野暮という感じの、単純なロジックなので、優しい気持ちでぜひ。 読み解くにあたり、いくつか特徴を挙げておきます。 正規表現を多用する (かなりイージー) DOMのパースはinnerHTML頼り CoffeeScriptやJadeなどのコンパイラは含まない それ以外のライブラリ依存なし セミコロンが嫌いらしい Riot.jsは6つのスクリプトに分かれていますが、★印の3つが基本的な部分です。この記事でも、この3つのみを扱います。 ファイル 機能
RiotJs
Emergencies wait for no one, which is why bad credit is available 24 hours a day, 7 days a week. Instead of waiting for your bank or credit union to submit your loan application, the online loan networks listed below can process your application in minutes. If you are eligible, you can choose from several […]
React.jsではなくRiot.jsを採用した話、運用中サービス『GAMY』でリニューアル - Qiita
今回、ゲーム攻略コミュニティ『GAMY』というサービスでRiot.jsを採用しました。 知る限りでRiot.jsで実装されたサイトの中でも最大規模のサービスだと思います。 これまではjQueryとjQueryプラグインを使っていましたが、デザインのリニューアルを機に、全部書き換えることにしました。 ドキュメントも兼ねてアウトプットしていきます。 Riot.jsとは Riot.jsは今流行りのReact.jsに似た仕組みを持っている、それで非常に軽量なJavaScriptライブラリーです。 最近GitHubのリポジトリが/muut/riotjsから/riot/riotにお引っ越しして、これからがより注目なライブラリーです。 詳しくはこちら↓ Riot公式 Riot.js 2.0 情報まとめ GitHub 捨てることを前提としたライブラリー選定 最初は今ブームの２大フレームワークとなっている『
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
NOT SO BADなブログ
Made With Riot
DeNA Engineering - DeNAエンジニアのポータルサイト
GitHub - any-code/riot-animation-context: Riot JS Tag - Animation Context