2017-06-11

LayoutAnimation 使うと楽しい

ReactNative

ReactNativeで LayoutAnimation を使うと、要素が消えたり表示したりする時に

勝手にいい感じのアニメーションを付けてくれるから便利

import {
  LayoutAnimation,
} from 'react-native';

ボタンを押すとメニューが出てくる仕様があったとして、それにアニメーションを付けたい場合、トリガーになる onPress() なんかの一番最初に LayoutAnimation.spring() を書くだけで勝手にアニメーションしてくれます。

spring() はバネみたいなアニメーションで、他にはeaseInEaseOut () と linear () がデフォルトで用意されています。

サクッと確認したい場合は、ここを見るとウェブ上で実行できるサンプルがあるので、それを編集すれば良さそうです。

http://facebook.github.io/react-native/releases/0.45/docs/animations.html#layoutanimation-api

自分で動きをカスタマイズも出来ます。

こんな感じ

componentWillUpdate() で LayoutAnimation を実行すれば、とにかく画面が変更される度にアニメーションがかかるようになります。

LayoutAnimation は難しい設定なしで、かってにアニメーションをいい感じにしてくれる良い子です。

ぜひ使ってみて下さい。

ドキュメント http://facebook.github.io/react-native/releases/0.45/docs/layoutanimation.html#layoutanimation

2017-06-11

久しぶりに書く

この先も生き残れるエンジニアになるにはアウトプットを…

みたいな記事に毎回脅迫されるから何かしら書いていこうと思い立った。

緑のサイトは見るけど書くのは気が乗らないからブログにする。

学生の頃のほうがアウトプットしてたんだけど

新卒で入った会社に忙殺されて久しく忘れていた。

やっていきですね

2013-02-23

AutoLoader ver.1.0

JavaScript サービス

なにこれ

コーディング中、HTMLやCSSなどのファイルを変更したとき
自動でブラウザをリロードしてくれるブックマークレットです！
もちろんオフラインでも使うことができます！

対応ブラウザ

Chrome / FireFox（バージョンによる）/ Safari

使い方

１．まずは下のリングをブックマークバーに登録します。
２．クリックすると小ウィンドウが出てくるので、ボックスに監視したいファイルをドロップ！
３．監視ファイルを変更すると、親ウィンドウが自動でリロードされます！
４．監視を辞めたいときは、小ウィンドウを閉じるかリストをクリックすればOKです！

Bookmarklet

↓リンクをドラッグしてブックマークバーに登録！
AutoLoader

まとめ

自動ローディング機能はIDEによってついてる場合もありますが、そんなのないよ！って人に。
とくにデュアルディスプレイだったりすると、すごく楽です。
ブックマークレットのリンクを押すタイミングは、自動でローディングをさせたいindex.htmlなどの
ファイルを開いた状態で押して下さい！
FireFoxだとバージョンによって動かない場合もあります！
IEはFileAPIが対応しないと使えないっぽいです。

2012-04-24

HTML5の独自属性を取得する。

JavaScript HTML

HTML５になってからタグに独自の属性を設定できるようになりました！
厳密に言うとdata属性らしいですが

例えば

<div id="hoge" data-hoge-id="12345"></div>

のようなかんじです。
data- に続いて独自の属性を定義します。

この属性をJavaScriptで取得するとき、普通に取得すると
そんなもんねーよ！って怒られます
なのでこの方法だとダメです。

document.getElementById('hoge').data-hoge-id;
//取得できない（hogeIdでもダメ）

取得するにはいくつか方法があります。
１つはgetAttributeを使う方法と、新しく入ったdatasetを使う方法です。
とりあえず後者だけで

document.getElementById('hoge').dataset.hogeId; //12345

これで取得できます。
ポイントは data- は省略して、CSSを操作するときの様に
ハイフンは省いて次の文字を大文字にします。

最後にjQueryから取得する方法です。
この場合はとくにハイフン省略したりだとかしなくていいっぽいです
ちなみにこれもいくつか方法があるらしいですが一番無難なものを紹介

$('#hoge').attr('data-hoge-id'); //12345

こんなかんじです
何か間違ってる所あったら添削お願いですっ