jQuery text animation Plugins | jQuery Script
Free jQuery text animation Plugins All the Free jQuery Plugins about 'text animation' are listed here. DemoDownload 10 Best Typewriter Typing Animations In JavaScript (2024 Update) 01/31/2024 - jQuery Script Blog - 48262 Views 10 Best Typing Animation libraries implemented in jQuery, Vanilla JavaScript, or Pure CSS to simulate typewriter-like text typing and deleting effects for your headlines, ti
Material UI使ってみた - Qiita
Material UIとは Material UI GoogleのマテリアルデザインをReactベースで使えちゃう今時なCSSライブラリ おっ、これかっちょいいと思って少し触ってみました。 日本語の解説記事とかが見当たらなかったので簡単に紹介します。 Get started この辺で解説されているので、公式のドキュメントとともに参考にする感じで。 Componentの使い方とか 大別して3種類のAPIがあります。 Props Events Methods 名前の通りそれぞれ、 reactコンポーネントのrenderで要素を生成する際に利用できるprop 要素で発生するhtmlイベント（onChange,onClickなど） 要素で使える関数 になります。 使い方を見ていきます。 Props これはそのまんま。 render() { return ( <DatePicker hintText
React.jsのProp - Qiita
今回は前回にも少し登場したPropについて取り上げたいと思います。 基本的な使い方 Propは基本的にはCompnentのattributeとして定義してComponentの中ではthis.props.xxxとして参照する。それだけです。PropにはObjectでも関数でも何でも指定することが出来ます。 var Avatar = React.createClass({ render() { var avatarImg = `/img/avatar_${this.props.user.id}.png`; return( <div> <span>{this.props.user.name}</span> <img src={avatarImg} /> </div> ); } }); var user = { id: 10, name: "Hoge" }; // <Avatar user={us
React.jsでPropやStateを使ってComponent間のやりとりをする - Qiita
今日はこれまでに紹介したPropやStateを使ったComponent間でやりとりについて書きたいと思います。 親のStateを子のPropとして渡す Componentを設計する時はまずPropとしてI/Fを考えて、そのComponentが管理すべき値で変更されるものをStateとして定義します。 つまりComponent間での親子の関係を意識して、親がStateを持っていて子にPropとして渡すというのが基本になります。（子は使うだけで管理しているのは親） var User = React.createClass({ propTypes: { name: React.PropTypes.string.isRequired, id: React.PropTypes.number.isRequired }, render() { return ( <div>{this.props.id}:
React初心者のためのreact-routerの使い方 - ハッカーを目指す白Tのブログ
2015年1月、React ConferenceにてReact.jsでネイティブアプリが作れるようになると発表された。この発表を受けて最近何かと話題のReact.jsだが、リリースされたのは2013年であり、2009年にリリースされたAngularJSや、2010年のBackbonejsなどの他のjavascriptフレームワークに比べると新しく、まだネットに日本語の情報があまりない。ということで、React.jsのデファクトルーティングライブラリであるreact-routerの使い方についてまとめてみた。 目次1.そもそもreact-routerとは 2. react-routerのインストール方法 3. react-routerの使用例 4. react-routerのコンポーネント一覧 5. Routerのrunメソッド 1. そもそもreact-routerとはreact-rout
react-router で ルーティング | スマホ神 – JavaScript 受託開発 –
React でルーティングをする react-router を試しました。 インストール Browserify + Babel でコンパイルするのでそのツールを React 、 react-router と一緒にインストールしておきます。 $ npm install -g browserify $ npm install -D babelify babel-preset-es2015 babel-preset-react $ npm install -S react react-dom react-router Hello, World! とりあえず画面になにか表示するところからやってみます。 import React, { Component } from 'react'; import { render } from 'react-dom'; import { Router, Rout
js-sequence-diagrams by bramp
This should be a diagram! If you don't see it you need Javascript enabled Intro A simple javascript library to turn text into vector UML sequence diagrams. Heavily inspired by websequencediagrams.com, who offer a serverside solution. We use Jison to parse the text, and Snap.svg to draw the image. Examples
Chart.jsとAngular JSを組み合わせて動的なグラフを生成してみる
前回に引き続き、Chart.jsのTipsです。 Chart.jsを使いグラフを表示してみる 今回はAngular.jsとChart.jsを組み合わせて、動的に値が変化するグラフを作ります。 Angular.jsの基本的な使い方は割愛します。 ちなみに今回使用するバージョンは下記のとおりです。 Angular JS v1.4.9 Chart.js v1.0.2 Angular.jsでフォームをバインドする まずはangular.min.jsを下記サイトよりダウンロードしてきましょう。 Angular JS CDNにも公開されていますが、セキュリティ面で外部ソースを引っ張るのはあまり良くないとのことですのでダウンロード版を使いましょう。 (今回のデモを作る程度でしたら、CDNでも問題ありません。) コントローラー&フォームバインドの簡単なコードが下記です。 <!DOCTYPE html> <
Web AI
JavaScriptライブラリ「Web AI」 はじめに ※ 「Web AI」のネット上からの情報取得部分は、Google他のAPI終了に伴い、利用できなくなっています。しかし、その他の部分は、現在でも利用可能な内容ですので、そのまま公開を継続します。（2017-08-23） 「Web AI」は、ネット上の情報を利用して、人工無脳的なプログラムを書くためのJavaScriptのライブラリです。本ライブラリは、Webから取得した情報の処理を効率化して、インテリジェンスな何かを生み出すことを目的にしています。 「Web AI」が持っている機能は、以下の通りです。 検索処理およびRSSフィード取得のメソッド・チェーン化（Google Ajax APIを使用） 断片的な日本語文章からのキーワードと文章の抽出 日本語文章のマルコフ連鎖 URLクエリーの解析と構築 URLクエリーの圧縮と解凍 短縮UR
konashi.js | エンジニアとデザイナ・アーティストを繋ぐアプリ
ツイート ユカイ工学の konashiプロジェクトと面白法人カヤックの jsdo.it開発チームがコラボレーションし、jsdo.itにフィジカル・コンピューティング機能を追加するプロジェクトです。 jsdo.itとの連携によって webベースでコーディングした JavaScript言語から konashiを通じてセンサや外部機器と接続し、フィジカル・コンピューティングを楽しむことができます。 JavaScriptでウェブから現実をハックし、その成果をコミュニティで公開・共有しましょう！ konashi(こなし)は、ユカイ工学が開発した、iPhone/iPadのための、フィジカル・コンピューティングツールキットです。iOSから簡単にハードウェアにアクセスする開発環境を提供し、マイコン側のファームウェア開発をすることなくソフトウェアエンジニア・デザイナ・アーティストが手軽にプロトタイピングを行
とほほのAngularJS入門 - とほほのWWW入門
AngularJS と Angular は別物です。バージョン 1.x を AngularJS、2.0 以降を Angular と呼びますが、根本から作り直しているので互換性はありません。AngularJS は 1.8.x で開発を停止しており、2021年12月31日にサポートも停止されました。現在は拡張LTS (XLTS) のフェーズにはいっています。(2022/1/2追記) AngularJS は、下記の様な特徴を持つ JavaScript フレームワークのひとつです。 Google社とコミュニティが開発するJavaScriptフレームワーク ライセンスはMIT License。オープンソース。商用利用可能。 今現在(2015年8月15日)の最新版は 1.4.4。 JavaScriptでクライアントサイドのMVC(Model-View-Controller)モデルを実現します。 これま
Onsen UI 2: HTML5モバイルアプリを速く、美しく
ハイブリッドとモバイルWebアプリ開発の決定版 開発環境のセットアップを一切することなく、JavaScript・HTML・CSSを用いたモバイルアプリ開発を始めましょう。クラウド上の開発環境Monacaと組み合わせることで、あなたの開発環境は常に最新の状態に保たれます。 クラウド上にすべてのツールを 強力なCLI（コマンドラインツール）やデスクトップ向けアプリ（WindowsとmacOSに対応）を通じて、Onsen UIアプリはとても簡単に制作できます。それ以外にも、Monacaが提供するライブリロード対応のデバッガーや、リモートビルド機能といったクラウドの機能にアクセスできます。 美しいUIコンポーネントと自動スタイル モバイルアプリに特化した、ネイティブのようなパフォーマンスに優れたUIコンポーネントが自慢です。タブ、サイドメニュー、ナビゲーションといった共通デザインだけでなく、リスト
Bower入門(基礎編) - from scratch
Bower入門 これから Bower について書いてきます。Bowerの使い方から実際に使う上で考慮することまで含めて書きます。 長くなりそうなので単に使うだけの基礎編とモジュールを作る上で気をつけることをまとめた応用編に分けて書きます。 Bower とは Twitter社が作ったフロントエンド用のパッケージマネージャです。 Java で言う Maven、 Ruby で言う gem、 Perl で言う cpan のようなものです。 Node.jsには npm と呼ばれるパッケージマネージャがありますが、それに強く影響を受けています。 パッケージマネージャを利用することでライブラリを自分で管理する必要がなくなり、管理するファイルの数を減らすことができます。 また、パッケージマネージャを利用することでライブラリのバージョン管理をしやすくなります。 さらに自分のライブラリを Bower comp
npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう - Qiita
背景 Javascript で Web アプリを作ろうとすると、よくわからないことだらけで超混乱します。 npm と bower の違いは？ npm はサーバーサイド用、bower はクライアントサイド用らしいよ えっ、でもなんで bower のインストールに npm が必要なの？ サーバーサイドは Rails で書きたいから npm 要らないと思うんだけど・・・ ていうかサーバーサイドJSとか node.js って何？ よく見る browserify って何？ こういった疑問が沸き上がるのは、各ツールが生まれた文脈がよくわかっていないからです。いろいろ調べてやっとちょっとわかってきたのでメモします。間違いがあったらご指摘ください。 「CommonJS」誕生 - Javascript は汎用プログラミング言語へ その昔、Javascript 大好きおじさんは言いました。 Javascrip
モバイルアプリ用UIフレームワークの簡易比較 - Qiita
今回はモバイルアプリ作成時に使用できるUIフレームワークの違いや特徴を（大雑把に）まとめてみます。※あくまでも個人的な意見です。 対象のフレームワークは以下の4つです。 jQueryMobile：http://jquerymobile.com/ Ionic：http://ionicframework.com/ OnsenUI：http://ja.onsen.io/ Famo.us：https://famo.us/ 上記4つはまず2つに大別できます。 すなわち、jQuryMobile or その他(Ionic, OnsenUI, Famo.us)です。 jQueryMobile or その他のフレームワーク この2つはどちらもスマートデバイス用アプリ向けUIの作成を目的としていますが、主な違いとして jQueryMobileはWebアプリ用のUIの作成を主目的としており、Ionicなどはハイ
JavaScriptプログラミング講座【タッチスクリーン操作について】
// タッチイベントに対応している if(window.TouchEvent){ // イベントリスナーに対応している if(document.addEventListener){ // ------------------------------------------------------------ // タッチすると実行される関数 // ------------------------------------------------------------ function TouchEventFunc(e){ // TouchList オブジェクトを取得 var touch_list = e.changedTouches; // 中身に順番にアクセス var i; var num = touch_list.length; for(i=0;i < num;i++){ // Tou
[Web] スマートフォンとHTML5のCanvasを用いたお絵描きを実装してみた - YoheiM .NET
HTML5のCanvasというグラフィックを描ける機能と、スマートフォンを掛け合わせて、 スマホで絵を書くWebアプリのサンプルを作成してみました。 サンプルアプリを紹介しつつ、 Canvasで絵を描く実装、タップイベントとの連携、スマホ対応のためのmetaタグなどの 実装内容を記載します(*´∇｀*) サンプル内容 Canvasを用いたお絵描きアプリを、iPhoneに最適化してみました。 Canvas上を指でなぞると線を書くことが出来て、 色の変更と線の太さの変更を行うことができます。 また、ホーム画面に保存としてから、作成されたホーム画面アイコンから起動すると、 検索バーなどの無いアプリ風な画面で立ち上がります。 ぜひお試してみて頂けると幸いです。 http://www.yoheim.net/labo/html5/canvas/canvasForTouch.html お絵描き機能の実装
![[Web] スマートフォンとHTML5のCanvasを用いたお絵描きを実装してみた - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/0dc58f26cebb68beec9cb28a7d6a919c6d1425b5/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F041.png)
HTML5のcanvasを使ったお絵かきツール詳説
HTML5のcanvasを使ったお絵かきツールを勉強がてら作ってみました。下記の画像リンクをクリックすればサンプルページにジャンプします。 サンプル 以下、サンプルのHTMLとJavaScript（jQuery）を使って、canvasのお絵かきツールについて解説します。 探しきれてないだけと思いますが、お絵かきツールのjQueryでの実装が見つからなかったので、自力で書いてみました。いろいろ間違ってたらすいません。 １．HTML サンプルのHTMLは次のようになっています。 <canvas width="500" height="400">お使いのブラウザはHTML5のCanvas要素に対応していません。</canvas> <ul> <li style="background-color:#000"></li> <li style="background-color:#f00"></li>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - remix-run/react-router: Declarative routing for React
AngularJS入門 ｜ シリーズ ｜ Developers.IO
