Riot+ElectronでMarkdownエディタを作る - Qiita
riotが最近自分の中でキてるのでなんか作りたいなと思って、markdownエディタを作ってみました。 riot中心なのでelectronの説明はしません（そもそも起動でしか使ってない） 自分の環境 Windows 10 home node.js v8.9.1 npm 5.5.1 どうやる markdown-it >> markdownパーサ highlight.js >> コードをハイライト表示してくれる ace >> web上に埋め込めるエディター リアルタイムにプレビューさせたいので, aceエディタの中身が変更されたら、エディタの値をmarkdown-itでパースして表示させます。そして表示されたやつにコードがあったらhighlight.jsでハイライトを付けます。 その他ファイル読み込みと上書き保存機能も付けます やっていきましょう ディレクトリ構成 -public -index
Riot.jsによる再利用しやすいコンポーネントの作り方 - Qiita
Riot.jsは単純な仕様のため、複合したHTMLタグとJavaScript機能を持ち合わせた、いわゆるコンポーネントが非常に作りやすい。 今回実際作成したコンポーネントの解説を通して作りやすさを感じてもらい、Riotの普及活動に繋げたい。 再利用しやすいコンポーネントとは これには諸説あると思うが、自分が思うに「利用したくない」と思われるコンポーネントは再利用されない。 自分が利用したくないコンポーネントは 使い方が複雑 依存関係が複雑 カスタマイズできない。もしくはしづらい 見た目がかっこわるい なので、これらの逆をつけば再利用しやすくなるのではと考える。 作ったもの 手書き入力した内容を自動認識し、変換された文字列を返せるもの → <input type="text">の代替として利用可能なもの 仕様としては タッチもしくはマウス操作で手書きすると右下に認識した文字列を表示し、Jav
3ヶ月で Serverless Framework を導入し、SPA ( Riot.js + RiotControl で Flux 実装 ) をリリースした話 - Qiita
3ヶ月で Serverless Framework を導入し、SPA ( Riot.js + RiotControl で Flux 実装 ) をリリースした話JavaScriptNode.jsAWSriotserverless ※ このお話は ( おそらく ) フィクションです。実在の人物や団体とは関係ありません。 前書き 中規模程度のサービスを Serverless 構成の SPA をパイロットリリースしました。具体的なサービス名等は紹介できません ( おそらくフィクションなので ) が、筆者が3ヶ月間でやってきたことを殴り書きして行きます。 基本的にはリリースまでに必要となった材料 ( 参考にしたドキュメントやサイト ) を重点的に紹介していくだけですが、同じような境遇の方々の手助けになれば幸いです。 筆者のプロジェクトイン時スペック 社歴3年程度 主にバックエンド・インフラを担当して
Riot.js+Webpackの構成 - Qiita
{ "name": "asset", "version": "1.0.0", "description": "", "main": "webpack.config.babel.js", "scripts": { "watch": "webpack --watch --progress" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.22.1", "babel-loader": "^6.2.10", "babel-preset-es2015": "^6.22.0", "babel-preset-es2015-riot": "^1.1.0", "riotjs-loader": "^4.0.0", "webpack": "^1.14.0" }, "dependencies": { "riot":
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.js + webpack + ES6(Babel, buble)での開発環境構築例 ※追記webpack2 - Qiita
Riot.js + webpack + ES6(Babel, buble)での開発環境構築例 ※追記webpack2webpackriotriot.jsbabelBuble Riot.js Advent Calendar 2016の23日目です！ Riot.js（以下riot）は非常にシンプルかつ軽量で敷居も低く、とても書きやすいコンポーネント指向のUIライブラリです。（ここまでテンプレート） 今更ですが、ちゃんとES6で書こうと思いまして、riot+webpack+ES6の開発環境を作りました。 準備 ディレクトリ構成 今回のサンプルのディレクトリ構成は以下です。 ./ ├ .gitignore ├ node_modules ├ package.json ├ webpack.config.js ├ index.html ├ app │ └ app.js │ ├ tag │ └ app.t
Riot.js と Atomic Design ではじめるテクニカルクリエイター｜Technical Creator Hub
紫竹佑騎 2010年新卒入社。アメーバのサービスやソーシャルゲーム数タイトルのサーバーサイドを担当。著書に「Web制作者のためのGitHubの教科書」。BaPA１期生。 7月頃リリースされた AMESTAGE の Web 版を担当している 紫竹 です。 AMESTAGE は"芸能人とあそべる生放送"と銘打ったサービスでして、芸能人の放送する番組に対してコメントしたりギフトを贈ったり、クイズなどのコーナーに回答して一緒にあそんだりできます！！是非放送を見てみてくださいね＾＾ AMESTAGE 今回はこの AMESTAGE で利用した Riot.js というライブラリを使って、Web 開発しやすいコンポーネントをデザインの時点からワンストップで行うことができる手法をご紹介したいと思います。 俺がテクニカルクリエイターだ！ ↑これは言ってみたかっただけなんですが簡単に自己紹介をすると、僕は
Riot.js入門 なるべく簡単に とはいえ 少し実用的に - Qiita
やりたいこと なるべく簡単に、とはいえそこそこ実用的なくらいに、Riot.js を使いたい。 Riot.jsはランタイムでのコンパイルなども可能です。開発者てきにはメリットありますが、多少ユーザメリットが感じられないので……プリコンパイルしてサーバにあげたいです。あと、開発環境的にあんまり複雑なことすると手軽感がなくなるので、最低限ですませたい。 ということでメモがてら作ってみました。 環境構築 npmインストール してください。 各種 npm install $ npm install -g riot $ npm install --save-dev gulp $ npm install --save-dev gulp-riot $ npm install --save-dev gulp-connect var gulp = require('gulp'); var riot = req
今年1年真剣にRiot.jsと付き合ってきたので振り返ってみた - Web Developer's Struggle Memories
Riot.js Advent Calendar 2016の1日目です！（初トップバッター！） 今回はあまりテクニカルなプログラミングの話はせず、基本ばかりなので、その点ご了承ください（笑） qiita.com はじめに Riot.js（以下riot）は非常にシンプルかつ軽量で敷居も低く、とても書きやすいコンポーネント指向のUIライブラリです。（ここまでテンプレート）そして今一番ホット（筆者比）なJavaScriptのライブラリでもあると思います！ 2016/11/22、ついについに、ずっと待ち望んでいたメジャーアップデート「v3」がリリースされました！ おめでとうございます！ありがとうございます！ そしてつい先日！riotのSlack（日本ユーザ）も立ち上がりましたー！ 皆さんご自由に参加して発言していって下さい！ まずはざっくり振り返ってみる 主に触ってきたのはv2系、特に2.4.*です
【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.js
カスタムタグの例 Riotのカスタムタグは、ユーザインターフェースの構成要素です。 アプリケーションの「ビュー」部分を担います。Riotのいろいろな特徴をハイライトした、TODOの例の拡張から始めましょう。 <todo> <h3>{ opts.title }</h3> <ul> <li each={ items }> <label class={ completed: done }> <input type="checkbox" checked={ done } onclick={ parent.toggle }> { title } </label> </li> </ul> <form onsubmit={ add }> <input ref="input" onkeyup={ edit }> <button disabled={ !text }>Add #{ items.length
phiary
『yield』 に引き続きマニアックな Riot.js tips です. 先日下記のようなツイートが流れてきました. ちょっとこれは驚愕の事実かも...riotjsでタグで直接onscroll="{hoge}"ってかたちでbindするじゃん？スクロールする度に、updatedが呼ばれる。。。つまり、スクロールする度にupdate()がかかってる。。。！？ — 杏z (@AnzNetJp) 2016年10月27日 もれなく私も昔これにハマったことがあったので, その対処法を紹介したいと思います. Riot.js におけるイベント発火時のライフサイクル Riot.js は, onほにゃらら に設定している関数を呼ぶと自動で update を呼ぶ仕様になっています. onclick や ontouchstart といったそれほど頻繁に発火しないイベントならそれでも良いのですが, onscroll
Riot.jsでAjaxを使った非同期通信について - Web Developer's Struggle Memories
はじめに 現在あるプロジェクトで、JavaScript界隈では一時期話題になった（*1） Riot.jsで開発をしている。DBとのデータのやり取りを全てAPI化しているため、APIに非同期に通信しているのだが、ちょっとコケたので（*2）備忘録として書き残す。 開発環境など Riot.jsのバージョンは2.4.1 AjaxにはjQueryを使用 ※$.ajax()のこと 本題のコード とりあえず.jsファイル、.tagファイルを見てみよう。今回はペン（ボールペンやシャーペンのことね）のメーカー情報を取得するものを例にする。 ・hoge.js /** * 非同期通信のまま返り値を受け取るメソッド * * @param {object} params パラメータオブジェクト * {string} url コントローラの指定 * {string} method POSTかGET * {string
Riot.jsでSPAを作る - Qiita
はじめに この記事は株式会社アイスタイルアドベントカレンダーの5日目の記事です。 新規案件をLaravel5.1で開発しています。@kubotakです。 元デザイナー・コーダーなのでフロントエンドの方が得意な気がします。 今回は簡単な導入として事前コンパイルやbrowserifyなどはしません。 あくまでもルーティング方法のみの説明となります。 Riot.jsについて A React-like user interface micro-library Reactを意識して作られた超軽量のUIライブラリ。 Riot（=反乱）は、ボイラープレート(=雛形、決まり文句)と、不要な複雑さにまみれた現在の潮流に「反旗」を翻すプロジェクト。 超軽量と云うだけあってGitHubリポジトリに以下のように書かれている Framework Size Comparison Framework Version M
Riot.js ソースコード完全解説 v3対応版 - Qiita
昨年「Riot.js ソースコード完全解説」を書いたのですが、この1年でいろいろ状況が変わってしまいました。v2の間に相当コードが書き換わり、Riotも若干ぽっちゃり系に...(他の同種のライブラリに比べれば可愛いものですが)。そんな中、朗報です。近日v3がリリースされ、コードが整理されます。 参考: v3のロードマップ 本稿では、改めて「ソースコード解説」を試みたいと思います。 2016年7月現在 でnextブランチにあるコードをもとに説明するので、日々変わってしまうけど、ご参考まで。オススメのコースは、次の通り。 この記事に目を通して全体像をつかむ 自力でソースコードを斜め読みし、もうちょっと深く理解する プルリクエストしたい部分について、深読みする がしがしプルリクエスト スクリプトのimport/export関係をざっくり図示してみました。以下にも主要ファイルを挙げておきます。 公
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
phiary
Riot.js には yield という仕組みがあります. これを使いこなすことで定義済みのコンポーネントの一部を柔軟に拡張することができるようになります. 今回はこの yield について, デモや図を交えて解説したいと思います. そもそも Riot.js について知りたい方はまずこちらをどうぞ フロント界隈で一番イケてるのは AngularJS でも React でもなく Riot.js だという話 | phiary Riot.js の yield とは？ yield は, Riot.js のコア機能の一つで子タグに親タグから部分的に HTML を差し込むことができます. この仕組みをうまく活用することで拡張性のある柔軟なタグ(コンポーネント)を定義することができます. yield を使ったデモ yield を使ったデモです. header の中身を外から指定したり, material
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://qiita.com/n-ken/items/2cf2ce482d0e8dc2caee
Riot.jsのルーティングでふわっと画面を切り替える方法！！｜By U Zensen.
DeNA Engineering - DeNAエンジニアのポータルサイト
