2016-06-01

Android4.4.2で動画が再生できない不具合

transform: translateX(-50%) translateY(-50%);を使って天地左右中央に配置した要素の中にYoutubeを入れたら、Android4.4.2で再生できない（選択できない）不具合が発生しました。

あてていたスタイルはこういう感じです。

.md-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
}

-webkit-transform: translateX(-50%) translateY(-50%);

をはずすと再生できたので、margin-topとmargin-leftで中央になるように変更したら解決しました。

2016-03-31

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%までは停止。

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

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

ライブラリサイト

2016-03-28

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をコピペするのも良さそうです。

2016-02-26

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というクラス。

2016-02-22

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のバージョンアップでそのうち解消されるかもしれませんが。

2016-02-18

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_modulesとtypingsフォルダにライブラリがインストールされます。

6 `app.component.ts`と`main.ts`ファイルをつくります

appフォルダをつくり、その直下にapp.component.tsとmain.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.htmlのSystem.import('app/main')をSystem.import('app/main.js')と拡張子つけると表示されるかもしれません。 System.configでJSを設定してるみたいなんですが。

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

2016-02-03

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("実行されました")
  }
}

codropsからサンプルさがし

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

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

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

ライブラリサイト

使い方

動きの種類

1 npm install

2 読み込み

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

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

使い方

1 npm install

2 フォームのHTMLを用意

3 JSで.parsley()を実行

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

公式ドキュメント

カスタマイズできること

公式ドキュメント

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

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

エラー文言の変更

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

IE8対応

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

解決方法

ファイル構成

1 フォルダを作ります

2 tsconfig.jsonをつくります

3 typings.jsonをつくります

4 package.jsonをつくります

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

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

7 index.htmlをつくります

8 実行

もし loading のままになったら

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

結論

参考

importとrequireの書き方

importの書き方

requireの書き方

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

1 `npm install`

3 JSで`.parsley()`を実行

2 `tsconfig.json`をつくります

3 `typings.json`をつくります

4 `package.json`をつくります

6 `app.component.ts`と`main.ts`ファイルをつくります

7 `index.html`をつくります

もし loading　のままになったら