Riot.jsによるゆるいコンポーネント分割 - Qiita
ブラウザ内でゴリゴリDomをいじるアプリを作らないといけなくなったので今まで避けてきたクライアントサイドのフレームワークをいろいろ触ってみたところ、Riot.jsが各所で評判もよく、一番楽しかった。 勉強がてらサンプルアプリを作ってみたのでその解説を記す。 作ったもの こんな構成で上記それぞれの四角がコンポーネントであり、入力値の変更を受けて結果が自動的に変わるようなものを作った。 見た目をどうするか 見た目は大事。 しかしながらデザインセンスがないのでいつも使ってるBootstrapを使った。 レスポンシブにもなるし。 スキンはbootstrap-material-designを利用した。 コンポーネント間の通信をどうするか Riot.jsには標準で使い勝手のよいriot-observableがついているが、コンポーネント間の直接依存は避けたいため、fluxのようなものを自作しようしよう
とほほのBootstrap 3入門 - とほほのWWW入門
このページは 「Bootstrap 3」について説明しています。Bootstrap 4 については、「Bootstrap 4入門」を参照してください。 Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。 Twitter 社で開発され、最初は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」となりました。 ライセンスは MIT License で、商用利用も可能です。 現時点(2018年5月6日)の最新バージョンは 4.1.1 です。 Bootstrap 2 と Bootstrap 3 以降では一部互換性の無い機能があります。 2018年1月に Bootstrap 4 も正式リリースされました。
Mithril本読んだ - マルシテイア
土日Mithril触ってて、ドキュメント読むの面倒！と思ってたところ、オライリーから日本語の本が発売されたと聞いたので早速買って読んでみた 本について Mithril自体についての解説 + Mithrilでなんか作るサンプル という構成。 Mithrilの解説 Mithrilのアーキテクチャ (§1, 3, 4) ラウター (§6) コンポーネント (§7) 描画システム (§9) なんか作るサンプル Bootstrapと組み合わせるサンプル (§5) mocha + power-assert + JSDOM でテスト (§8) Promiseの解説 (§10) TypeScriptで書いてみるサンプル (§12) JSのMVCフレームワークとか触ったことない人でも読めるようにはなっているな？ ↓その他↓ 「Router」は「ラウター」と発音する 「root」と混同しないよう、英語圏のエン
【フロントエンド】新規 Web アプリケーション開発案件をふりかえってみた | PSYENCE:MEDIA
4 ヶ月あまり続いた新規開発案件がようやく落ち着きを見せたので、ここらで振り返りをしてみたいとします1)リリースまでに巻き取れなかった不具合や未実装箇所が幾つか残っているので、まだ気持ち的には終われていないのですが…。 サービスのおおまかなアウトライン コンシューマ ( 一般ユーザー ) 向けサービス ブラウザで動く Web アプリケーション ワンソースによるレスポンシブレイアウト サポートするブラウザは IE9 以降や Android4.x 以降のモダンブラウザのみ Ruby on Rails 多言語対応あり SEO 対策はそれなりに必要 わりとフワッとしか要件が決まっていないままスタートしたので、TRY & ERROR を繰り返しながらの開発 すごく大雑把ですが、だいたいこんな感じの Web アプリケーションです。これを踏まえてフロントエンドをどのように開発していくかを設計していきまし
Bootstrapのポップアップ風デザインのモーダルを作成「Stackbox.js」:phpspot開発日誌
Stackbox.js Bootstrapのポップアップ風デザインのモーダルを作成「Stackbox.js」 次のような、Bootstrapデザインのモーダル実装ができます。表示方法にもアニメーションをさせたりカスタマイズオプションが豊富 demo1 | demo2 関連エントリ Bootstrap標準のModalを進化させた「Bootstrap-modal」 Bootstrap用の星型レーティング実装「Bootstrap Star Rating」 Bootstrapなサイトで使えそうなカラーピッカー「jQuery MiniColors」 移動、拡縮、最小化、最大化が可能なBootstrap用モーダルダイアログ実装jQueryプラグイン「jsPanel」 Bootstrapのように多数のコンポーネントが詰まったUIツールキット「Titon Toolkit」 Bootstrapのポップアップ
Bootstrap で横並びラジオボタンを作ってその値を JavaScript から取得する方法 - tmlife
地味にこれやってる良い感じの情報がなかったので メモがてら作ってみました . デモ こちらデモになります. ラジオボタンが表示され押すとそれに対応した文字列がコンソールに表示されるのがわかると思います. [runstant] ソースコード html ラジオボタンを構成する部分です <div id='mode' class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" autocomplete="off" value="left"> Left </label> <label class="btn btn-primary"> <input type="radio" autocomplete="off" value="middle"> Middle </
業務で安心して使える厳選AngularJSモジュール8選＋α | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近AngularJSとずっとにらめっこしています。やっていて楽しいです。 こんにちは、先生です。 最近はAngularJSとばかり遊んでおり、さまざまなモジュールを入れては消しを繰り返しています。もちろんそれらのモジュールの中には、対応していないブラウザや端末があったり、一部環境では正常に動作しないなどの不具合を持つものも多くありました。 そこで本日は、数あるモジュールの中でも安心して業務で使えたモジュールについて紹介していきたいと思います。 2014年11月現在でのライセンスも明記していますので参考にしてください。 安心して使えたモジュール8選 1. Angular directives for Bootstrap http://angular-ui.github.io/bootstrap/ MIT License Bootstrapをディレクティブにしているモジュールです。 元々のB
ng-admin - 次世代のWeb管理画面
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近はサーバサイドではHTMLレンダリングせず、RESTfulなWeb APIを使ってデータを取得、表示するといったWebアプリケーションが増えています。そうした中、運営側の管理画面においても求められるものが変わってきています。 そこで今回は次世代の管理画面、ng-adminを紹介します。AngularJSを使ったWeb管理画面になります。 ng-adminの使い方 Web APIを用意しておくことで、ユーザ向けはもちろんのこと管理画面においてもスムーズな操作ができるようになります。pushStateにも対応していますので、URLはユニークになるようです。 ng-adminはJavascript/HTML5製のオープンソース・ソフトウェア（MIT License）です。 Angul
AngularJS を用いたアプリをレスポンシブ化してみた。 | DevelopersIO
はじめに AngularJS UI BootstrapにはBootstrapが用いられているため、 下記のGrid systemをそのまま使う事が可能です。 CSS · Bootstrap 実装例 サンプルとしては、弊社ブログのFeedを用いました。 radiant-meadow-2447.herokuapp.com/#/rwdfix AngularJS Generatorで雛形を作成する際に、 AngularJS UI Bootstrapを用いる事で既にCSSも取り込まれます。 表示部分に関する実装は以下になります。 <div class="container-fluid"> <div class="row"> <div ng-repeat="entry in feed.entries" ng-if="$index % 3 === 0"> <section class="col-xs-1
AngularJSとRuby on Railsで作るCRUDアプリ – (1)環境構築 | DevelopersIO
t.hondaです。AngularJSとRailsの勉強がてら、CRUD機能を持つサンプルプログラムを作ってみました。 ウィスキーの名前と価格を、登録して表示するアプリです。 先ずは開発するための環境を構築する手順を、メモ書き程度に書いておきます。 「開発するため」なので、AugularJS側、及びRails側でユニットテストも実行できる環境を整えたいと思います。 また、ViewにはTwitter Bootstrapを使用します。 では、手順です。 プロジェクト作成 0.(rails new などでRailsアプリケーションを作成) 1.Gemfileに以下を追加 gem 'therubyracer' gem 'execjs' gem "twitter-bootstrap-rails" gem "less-rails" group :development,:test do gem 'rs
AngularJSとTwitter Bootstrapを組み合わせて使う - Qiita
まず、AnuglarJSとBootstrapを組み合わせて使う最も簡単な方法は、yeomanでプロジェクトのひな形を生成することです。 yeomanを使ったAngularJSプロジェクトの始め方 yoコマンドを実行した時に、以下のように質問されます。 [?] Would you like to include Twitter Bootstrap? (Y/n) [?] Would you like to use the SCSS version of Twitter Bootstrap with the Compass CSS Authoring Framework? (Y/n) 1つ目の質問にYesと答えるとひな形にBootstrapが組み込まれます。 2つ目の質問にYesと答えるとsass-bootstrapというフレームワークがbowerでインストールされ、scssファイルからcssに
AngularJSで苦労したポイントの事例 - ワザノバ | wazanova.jp
http://lhorie.blogspot.ca/2013/09/things-that-suck-in-angularjs.html AngularJSの盛り上がりは何回か取り上げてきた（このポストの最後にリンクあります。）ので、今日は、改善すべき点を指摘しているブログとその議論を紹介します。 (New frameworks) are great at getting you to about 80% of what you need REALLY fast. The next 10% takes some investigation but its doable. But that last 10%,……You’re working for the framework rather than it working for you. というコメントがあるように、まだ苦労するところはある
Bootstrapに便利な機能を追加できるjQueryプラグインまとめ
Lightbox・モーダルウインドウ関連 / Bootbox.js / Bootstrap-modal他...全17件
Bootstrapで物足りなく感じているウィジェットをまとめて提供·Fuel UX MOONGIFT
Fuel UXはBootstrap用、JavaScript/CSS製のオープンソース・ソフトウェア（MIT License）です。 Bootstrapを使ってWebアプリケーションを開発していると、どうしても足りないコンポーネントが出てきます。ネットで探せば見つかるのですが、組み合わせている内にバランスが悪くなってしまいます。そこで使ってみたいのがFuel UXです。 様々なウィジェットが提供されています。まずチェックボックス。 コンボボックス。選択した情報が取得しやすいです。 データグリッド。検索でのフィルタリング、ページネーションもサポート。 検索すると右側に×ボタンが出ます。分かりやすいですね。 タグ。×ボタンも出ていて消すのも簡単です。 検索ボックス。 スピナー。上下のボタンを使って値をインクリメントできます。 ツリー。エクスプローラライクな表示が実現できます。 ウィザード。パン屑
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrapのように多数のコンポーネントが詰まったUIツールキット「Titon Toolkit」:phpspot開発日誌
Social Buttons for Bootstrap
Bootstrapでスプレッドシートを実装するスクリプト・「editableTableWidget」
Rails Assets
IBM Developer
フラットなスタイルのUIエレメントがずらっと揃ったフレームワーク -Furatto