読者です 読者をやめる 読者になる 読者になる

もっく日記

書いておぼえるためのブログ

CSSアニメーションを使ってみた気づき

codropsからサンプルさがし

codrops

とにかくステキなサンプルがたくさん紹介されています。

どのサンプルにも、「デモ」「ソース」とその使い方が書いてあって便利です。

display:none;をかけてる要素にはtransitionがきかない

display:none;で表示非表示を切り替えてる要素に、transitionでアニメーションをかけようとしても、パッと表示が変わってしまってアニメーションできませんでした。

そのときは親要素をつくって、親要素にtransitionをかけて、子要素にdisplay:none;をつけたら大丈夫でした。 そのあとで、非表示にしたい要素にheight:0;とoverflow:hidden;かけるのでもよかったなと思い至りました。

(追記:2016/4/14) visibility:hidden;にしてる要素にはtransitionがかかると会社の人に教えてもらいました! あとtransitonかけられるプロパティ一覧もおしえてもらいました

CSS animatable properties ❧ Oli.jp (@boblet)

ループのkeyframesアニメーションに間隔をあけたいときは

keyframesのなかで、間隔をつくるのがよさそうでした。

(例)

@keyframes scaling{
  from{transform:scale(1)}
  5%{transform:scale(.9)}
  10%{transform:scale(1)}
  15%{transform:scale(.9)}
  20%{transform:scale(1)}
  to{transform:scale(1)}
}

アニメーションは20%までで終わらせて、20%〜100%までは停止。

動きはライブラリからさがすと早いです

ライブラリのソースをコピーして、自分好みに変えると作業の手間が省けてよかったです。

ライブラリサイト

Animate.cssをつかってみた

「Animate.css」というcssアニメーションライブラリがとっても便利だったのでメモです。

サンプル

ざっくりいうと、動きをつけたいものにクラスを指定するだけで、カンタンにCSSアニメーションをつけることができます。

使い方

1. Animate.cssの「Download Animate.css」からファイルをダウンロード。

2. ダウンロードしたanimate.cssをHTMLに読み込ませます

(例)

<!DOCTYPE html>

<head>
  <link rel="stylesheet" href="animate.css">
</head>

<body>
  <p>これをアニメーションさせる</p>
</body>
</html>

3. アニメーションさせたい要素にクラスをつけます

<p class="animated bounce infinite">これをアニメーションさせる</p>

animatedは必須で、bounceが動きの種類、ループさせたいときはinfiniteクラスをつけます)

<p>タグや<div>タグなどにつければボックスが動いて、 <img>タグにつければ画像自体が変形します。

動きの種類

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • headShake
  • swing
  • tada
  • wobble
  • jello
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • hinge
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp

もっと絶妙にアニメーションを調整したい場合は

Bounce.js

で動きを作って「EXPORT CSS」からcssをコピペするのも良さそうです。

browsernizrつかってみた

browserifyつかってるとmodernizrが使えないらしく、かわりにbrowsernizrというのがあったので使ってみたときのメモです。

browsernizrの公式サイトはこちら

1 npm install

ターミナルで npm install browsernizr

2 読み込み

JSファイルに読み込みを追記

import Modernizr from 'browsernizr';

3 チェックしたい項目を設定

インストールしたbrowsernizr/test/の中に、チェック項目のファイルが入ってるので使いたいものを任意でよみこみます。

(例)PCかSPかをtoucheventsが使えるかどうかで確認する場合

import 'browsernizr/test/touchevents'; //<-これがtouchevents用のファイル
import Modernizr from 'browsernizr';

とするとhtmlタグにクラスが追加されてるはずです。 PCならno-touchevents、SPならtoucheventsというクラス。

ParsleyJSつかってみた

フォームバリデーションライブラリのParsleyJSをつかってみたのでメモ

使い方

入力必須エラーをだす方法です。

1 npm install

npm install parsleyjs

2 フォームのHTMLを用意

必須項目にrequired=""をつける

<form id="demo-form">
    <label for="fullname">Full Name * :</label>
    <input type="text" name="fullname" required="" class="form-control">
    <input type="submit" value="validate" class="btn btn-default">
</form>

3 JSで.parsley()を実行

//ライブラリの読みこみ
import $ from 'jquery';
import 'parsleyjs';

//実行
$('#demo-form').parsley();

以上で完了です。

↓↓↓ここからは補足

バリデーションチェックできる項目

公式ドキュメント

http://parsleyjs.org/doc/index.html#psly-validators-list

  • URL入力チェック → type="url" data-parsley-type="url"
  • メールアドレス入力チェック → type="email" data-parsley-type="email"
  • 整数入力チェック → type="number" data-parsley-type="integer"
  • 最大入力文字数チェック → maxlength="6" data-parsley-maxlength="6"

などなど

カスタマイズできること

公式ドキュメント

http://parsleyjs.org/doc/index.html#psly-ui-for-form

バリデーションのタイミングの設定

  • フォーカスした時 → data-parsley-trigger="focusout"
  • フォーカス外れた時 → data-parsley-trigger="focusout"

バリデーションの状態によってclassをつける

入力エラーがあったら'parsley-error' 入力エラーがなかったら'parsley-success'を#demo-formにつける (入力エラーがないときだけボタンをクリッカブルにできる)

data-parsley-class-handler="#demo-form"

エラー文言の変更

data-parsley-error-message="エラー文言"

などなど

エラー文言を一括で日本語にする方法

*各言語のエラー文言は/node_modules/parsleyjs/dist/i18n/に用意されています。(GitHubだとここ

parsleyjs/dist/i18n/ja.jsを追加で読み込み、 window.Parsley.setLocale('ja');で言語設定を日本語にします。

//ライブラリの読みこみ
import $ from 'jquery';
import 'parsleyjs';
import 'parsleyjs/dist/i18n/ja.js'; //<-追加

//実行
window.Parsley.setLocale('ja');//<-追加
$('#demo-form').parsley();

IE8対応

jqueryのバージョンを1.8以上の1系にして、es5-shimというライブラリを読み込むようにすればIE8でもつかえます。

のはずがIE8でエラーがでた

jQueryのところで「識別子、文字列または数がありません。」というエラーがでました。

↓ここのdefaultのところがよくないらしいです

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

(0, _jquery2.default)('#apply-form').parsley();

解決方法

Browserify&Babelの開発環境でimportで読み込みしてたのが原因らしいとのことだったので、importで読み込むのをやめてrequireで読み込むようにしたら解決しました。

import $ from 'jquery';

const $ = require('jquery');

Browserifyのバージョンアップでそのうち解消されるかもしれませんが。

AngularJS2:5 MIN QUICKSTARTをやってみる

AngularJS2の勉強用に「5 MIN QUICKSTART」をやってみたのでその時のメモ

「AngularJS2:5 MIN QUICKSTART」 https://angular.io/docs/ts/latest/quickstart.html

ファイル構成

最終的にはこのようなファイル構成になります

angular2-quickstart
├── app
│  ├── main.ts
│  └── app.component.ts
│ 
├── index.html
│ 
├── tsconfig.json
├── typings.json
└── package.json

1 フォルダを作ります

mkdir angular2-quickstart
cd    angular2-quickstart

2 tsconfig.jsonをつくります

angular2-quickstart直下にtsconfig.jsonをつくります

//tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

3 typings.jsonをつくります

angular2-quickstart直下にtypings.jsonをつくります

//typings.json
{
  "ambientDependencies": {
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
  }
}

4 package.jsonをつくります

angular2-quickstart直下にpackage.jsonをつくります

//package.json
{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "postinstall": "npm run typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
    "typings" : "typings"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.6",
    "systemjs": "0.19.20",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.14"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^2.0.1",
    "typescript": "^1.7.5",
    "typings":"^0.6.8"
  }
}

5 ライブラリをインストール

ターミナルで

npm install

を実行すると、node_modulestypingsフォルダにライブラリがインストールされます。

6 app.component.tsmain.tsファイルをつくります

appフォルダをつくり、その直下にapp.component.tsmain.tsファイルをつくります

//app.component.ts
import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
//main.ts
import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

7 index.htmlをつくります

angular2-quickstart直下にindex.htmlをつくる。

<html>
  <head>
    <title>Angular 2 QuickStart</title>

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

8 実行

ターミナルで

npm start

を実行

「My First Angular 2 App」の文字が表示されれば完了です。

もし loading のままになったら

index.htmlSystem.import('app/main')System.import('app/main.js')拡張子つけると表示されるかもしれません。 System.configでJSを設定してるみたいなんですが。

こちらのサイトが勉強になりました

importとrequireどちらを使おう…。

node.jsをよく知らなかったもので、 babelでes2015をビルドしてるとimportもrequireも使えて、何が違うのやら?となったのでメモ。

結論

requireは「node.js」の書き方で、importは「es2015」から使えるようになった書き方ということみたいです。

せっかくなので、新しく使えるようになったimportの書き方に慣れてみようかと思います。

参考

Rubyist Magazine - 2015 年の JavaScript と babel の話(モジュール化)

importとrequireの書き方

importの書き方

import 'クラス名' from 'ファイル指定'で読み込んで、 export default class 'クラス名' {}で設定。

//読み込み側
import Klass from './Klass'; //クラスの読み込み
const klass = new Klass(); //クラスの実行
//Klass.js
export default class Klass {
  constructor () {
    this.hoge();
  }

  hoge () {
    console.log("実行されました")
  }
}

requireの書き方

require('ファイル指定')で読み込んで、 module.exports = class 'クラス名' {}で設定。

//読み込み側
const Klass = require('./Klass');//クラスの読み込み
const klass = new Klass(); //クラスの実行
//Klass.js
module.exports = class Klass {
  constructor () {
    this.hoge();
  }

  hoge () {
    console.log("実行されました")
  }
}

Github Pageの使い方

Githubリポジトリにアップしたファイルを、そのままWebページとして公開できる機能。

つくりかたを忘れないうちにメモ。

手順

すでにリポジトリがある場合

  1. リポジトリの管理ページhttps://github.com/ から、gh-pagesブランチをつくって、gh-pagesブランチにきりかえます。 f:id:sakamoto-skmt:20160201145702g:plain
  2. http://ユーザー名.github.io/リポジトリ名/にアクセス(index.htmlがpublicフォルダなどに格納されてる場合は適宜/public/index.htmlのようにしてください。)

これで表示されれば完了です。

どうやら

  • 場合によって反映に10分くらいかかみたいです。すぐ表示されなくてもしばらく待ってみるとでるかもしれません。

まだリポジトリがない場合

  1. 任意のリポジトリを作ります
  2. ローカルにクローンして、そのなかにhtmlやcssなど表示に必要なファイルをいれます。
  3. これをGithubにプッシュ
  4. http://ユーザー名.github.io/リポジトリ名/にアクセス

以上で完了です。

参考