ChromeでRiot.jsを実行した時、Javascriptコンソールに「Fetching scripts with an invalid type/language attributes is deprecated...」と表示される場合の対処法 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Riot.js で bootstrap-carousel タグを実装 - Qiita
概要 Riot.js というライブラリがあって最近話題です。 Riot.js http://riotjs.com/ja/ Qiita の記事 http://qiita.com/search?q=riot これを使って bootstrap の carousel を簡単に実装するためのカスタムタグを作ってみました。 確かにすごく簡単で、便利に使えそうです。 この記事は、次の記事とのマルチポストです： http://dora.bk.tsukuba.ac.jp/~takeuchi/?%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%2FRiot.js%2Fbootstrap-carousel%E3%82%BF%E3%82%B0%E3%82%92%E5%AE%9F%E8%A3%85 Bootstrap の carousel
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がこれからJSを学ぶのにいいような気がするので使ってみる！ - Qiita
どもめがねこと、大串です。こちらは Riot.js Advent Calendar 2016 - Qiita の記事として書いています。 もともとは、JSに興味があるものの、なかなか仕事で使う機会がなく、さらにはJSを使うためにいろいろ技術を組み合わせて使わないといけない。 WebpackやbabelやES6やGulpやnpmやわーーー。。。ということで、全体のことも解らずなのですが、このRiotのコアコントリビュータでもある河村さんに、「メガネさん Riot.js Advent Calendar 2016 に参加してよ。」とお声掛けいただきましたので、とりあえず参加しないわけには行かないということで、ココに書きます。 さて、上記のようにほぼさっぱりわかってないものです。（JSといえば、jQueryアコーディオンするぐらい）なので、そういった私と同じような人がRiot.jsを使えるのか？！
ES6で書くRiot - Rollup編 - Qiita
Advent Calendarの何日目かです。近年、JavaScriptでプログラムを書くのに避けて通れない「プリコンパイル」について、Riotの文脈で3本ほど書いてみたいシリーズの2本目です ES6で書くRiot - riot.config.js編 - (サンプルコード) ES6で書くRiot - Rollup編 - (サンプルコード) ES6で書くRiot - Felt編 (予定) バンドラ? トランスパイラ? riot.config.js編では、riotコマンド経由でトランスパイルする方法を扱いました。具体的なツールとしては、babelやbubléが「トランスパイラ」にあたります。要は、この手の(↓)変換です。 変換前: this.message = `Hello ${name}!` 変換後: this.message = "Hello " + name + "!" ただ、タグからi
WordPress と、Riot カスタムタグの MIME Type について - Qiita
Riot.js Advent Calendar 2016 の6日目です。 狙ったわけではないのですが、今日は WordPress 4.7 のリリース予定日！ (追記: タイムゾーンの都合で、日本時間では翌朝にリリースされました。) 今回のリリースで、ついに REST API のコンテンツエンドポイントが WordPress コアの機能になりました！ WordPress は何と言ってもたくさんのサイトで使われています。 今日の時点で W3Techs の統計を見たら世界の27.2% の Web サイトが WordPress で出来ていて、かつ CMS を利用している日本語サイトに絞ると80.3%ということでした。 今回のアップデートで、世界中のたくさんの Web サイトから記事の API が出ることになるでしょう。 わくわくしますね。 Riot + WordPress というわけで、Riot
ES6で書くRiot - riot.config.js編 - Qiita
Advent Calendarの3日目です。近年、JavaScriptでプログラムを書くのに避けて通れない「プリコンパイル」について、Riotの文脈で3本ほど書いてみたいと思います。 ES6で書くRiot - riot.config.js編 - (サンプルコード) ES6で書くRiot - Rollup編 - (サンプルコード) ES6で書くRiot - Felt編 - (サンプルコード) はじめてのriotコマンド Riotでは、次のような「タグ(tag)」ファイルを書いて、コンポーネントを作成します。 <my-tag> <p>{ message }</p> <script> this.message = 'Hello Riot!' </script> <style> :scope { display: block; color: #f04 } </style> </my-tag> デス
Riot.js + Atomic Designのスタイルガイド用のテンプレート - Qiita
Riot.js と Atomic Design ではじめるテクニカルクリエイター を参考にしていて、うちもStyle Guideがあったら作業が捗るかなということで、 とりあえずテンプレ的なものを作ってみました。 使い方 適当にダウンロード https://github.com/negibouze/styleguide-template パッケージをインストールして実行 ※一回目の起動はうまくいかないかもしれないです。 ├── src │ ├── components │ │ ├── atoms │ │ │ ├── foo │ │ │ │ ├── example.tag │ │ │ │ ├── foo.styl │ │ │ │ └── foo.tag │ │ │ └── plus │ │ │ ├
Riot.jsのカレンダー | Advent Calendar 2016 - Qiita
About reserved postingIf you register a secret article by the day before the same day, it will be automatically published around 7:00 on the same day. About posting periodOnly articles submitted after November 1 of the year can be registered. (Secret articles can be registered anytime articles are posted.)
【Riot.js v3対応】Riot.js x Firebase で超お手軽にWebアプリを作ってみる
まえがき この記事でできること 最近評判のreact風超軽量ライブラリ「Riot.js」と、Googleが買収したMbaasサービス「Firebase」。 この2つのイケてるサービスを使って、超お手軽にWebアプリを作ってみるチュートリアルです。 RiotとFirebaseを組み合わせてる例があまりなかったので試してみました。 この記事ではユーザー登録/認証まわりを実装しています。 またデザインには、Bootstrapよりモダンでイケてると噂のCSSフレームワーク「SemanticUI」を使っています(※当社調べ)。 SemanticUIももっと流行ってほしい。 *** 2016年12月16日追記 *** Riot.jsのv3がリリースされたので、現時点の最新版v3.0.4対応に書き換えました。 v2からけっこう色々変わっていますのでご注意ください。 *** 追記おわり *** 完成版イメ
riot-router経由でoptsパラメーター＆クエリを渡せない時の対処 - Qiita
つらさ optsでテンプレートがパラメーターが受け渡せると聞いていたのに、なぜか渡っていない。 環境 riot.js v2.5 ルーター間でパラメーターを渡している例 // http://localhost:3000/hoge/1?page=2&limit=20 riot.route('/hoge/*..', function(itemId) { var q = riot.route.query(); console.info('itemId: ' + itemId); // 1 console.log('Page: ' + q.page); // 2 console.log('Page: ' + q.limit); // 20 tagName = 'hoge'; riot.mount('content', tagName, { id: itemId, }); });
Google Apps Script で riot.js を使って業務アプリを作ったら めちゃくちゃ簡単だった話 - Qiita
Google がホスティングするサーバーでAppsをJavascriptでかけるシステム。 Google Apps Script で 業務アプリを作る利点 Googleの各種サービスに非常に簡単にアクセスできる。 riot.js とは react.js ライク な フロントエンドを構築する javascript のライブラリ。 フロント界隈で一番イケてるのは AngularJS でも React でもなく Riot.js だという話 を読んでみよう。 boostrap とは グリッドシステムがとても使いやすいCSSのフロントエンドのフレームワーク。 実践 Google Apps Script の基本部分を作成 [コード.js] function doGet(){ var pageTemplate = HtmlService.createTemplateFromFile('index');
Riot.jsによるゆるいコンポーネント分割（応用編） - Qiita
#通信仕様 前回と同様aggreさんのObseriotを利用させてもらった。 ちょっと込み入っているが、前回と基本はいっしょ。 下記のポイントを気をつけた。 コンポーネント間を直接繋がない コンポーネント単体での試験が困難になり、拡張も気軽にできなくなる ストアを変更できるのはディスパッチャのみ データの整合性は集中管理する 表示コンポーネントにロジックは持たず、表示に必要なデータのみを格納したストアを用意する とりかえがしやすくなる（円グラフから棒グラフへの変更など） コンポーネントがストアを変更したい場合はアクションに通知する #コード index.html <!DOCTYPE html> <html> <head> <title>riot-handsontable-nvd3</title> <meta charset="utf-8"> <meta http-equiv="X-UA-C
Riot.jsによるゆるいコンポーネント分割 - Qiita
こんな構成で上記それぞれの四角がコンポーネントであり、入力値の変更を受けて結果が自動的に変わるようなものを作った。 #見た目をどうするか 見た目は大事。 しかしながらデザインセンスがないのでいつも使ってるBootstrapを使った。 レスポンシブにもなるし。 スキンはbootstrap-material-designを利用した。 #コンポーネント間の通信をどうするか Riot.jsには標準で使い勝手のよいriot-observableがついているが、コンポーネント間の直接依存は避けたいため、fluxのようなものを自作しようしようかとしていたが、aggreさんのObseriotというライブラリがとてもいけていたので利用させてもらった。 今回の通信仕様 ルートコンポーネント Actions : 数値の変更Action Stores ： 足し算結果Store 掛け算結果Store Dispatc
Riot.js入門と、compile・precompileのはなし - Qiita
component志向のフレームワーク！ あちこちで 「いまはReact.jsよりRiot.jsだぜ！！」 という声が聞かれるようになったので、入門したくなりました。 （いまの勢いで言えばReact.jsをちゃんとやっておくべきなんだろうけど、どうしてもJSXの記法が受け入れられない…） さてさてRiot.jsとは。以下あたりを見ると分かりやすいです。 Riot.js — A React-like user interface micro-library · Riot.js フロント界隈で一番イケてるのは AngularJS でも React でもなく Riot.js だという話 | phiary 担っている役割としてはReact.jsに近いですが、ReactがMVCで言うところのViewだと断言しているのに対して、Riot.jsはMVC（あるいはFluxとか）というよりは Webコンポー
Riot.js ソースコード完全解説 v3対応版 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 昨年「Riot.js ソースコード完全解説」を書いたのですが、この1年でいろいろ状況が変わってしまいました。v2の間に相当コードが書き換わり、Riotも若干ぽっちゃり系に...(他の同種のライブラリに比べれば可愛いものですが)。そんな中、朗報です。近日v3がリリースされ、コードが整理されます。 参考: v3のロードマップ 本稿では、改めて「ソースコード解説」を試みたいと思います。 2016年7月現在 でnextブランチにあるコードをもとに説明するので、日々変わってしまうけど、ご参考まで。オススメのコースは、次の通り。 この記事に目を通し
Leaflet で Riot.js を使ってみる - Qiita
http://leafletjs.com/ と http://riotjs.com/ を一緒に使ってみます。 1. シナリオ 地理院地図で 平成28年熊本地震・UAV動画 というレイヤーが公開されています。このレイヤーの実体は緯度経度と動画のタイトル、youtube へのリンク、撮影日がエンコードされた GeoJSON で以下の URL から入手が可能です。 https://cyberjapandata.gsi.go.jp/xyz/20160414kumamoto_0416uav/2/3/1.geojson 地理院地図でこのレイヤーを表示 すると、以下のようにポップアップに最低限の情報とリンクが表示されます。 ここでは、ポップアップの中身の HTML を Riot.js を使ってカスタマイズし、以下のように動画を埋め込みで再生できるようにしてみましょう。 2. コード 以下の3つのファイル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Riot.jsでeach属性を使っていろんな配列を表示する（追記あり） - Qiita
Riot.js入門 なるべく簡単に とはいえ 少し実用的に - Qiita
RailsでRiot.jsメモ - Qiita
