LayoutAnimation 使うと楽しい

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

久しぶりに書く

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

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

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

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

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

やっていきですね

AutoLoader ver.1.0

なにこれ

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

対応ブラウザ

Chrome / FireFox(バージョンによる)/ Safari

使い方


f:id:rskull:20130222225251p:plain

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

Bookmarklet


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


まとめ


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

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

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

例えば

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

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

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

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

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

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

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

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

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

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

ルビ振り君(β) version 1.0

ネットで文章を読んでいて、読めない漢字があったらカーソルで反転させて
ブックマークレットをポチって押すだけでルビを出してくれるサービスです。

※URL移転
http:/rskull.com/ruby/bookmarklet.html

http://rskull.com/ruby/home


1、読めない漢字を選択する。
f:id:rskull:20120329011958p:plain

2、ブックマークレットを押すだけ(ルビ振り君のリンク)
f:id:rskull:20120329012047p:plain

ちなみに括弧ベータ板なのでまだバグがあったりします。
表の場合だとまとめて変換がまだできません。

しかし文章の場合だったら一括変換可能です。
f:id:rskull:20120329012250p:plain

    ↓↓↓↓

f:id:rskull:20120329012309p:plain

こんな感じです。

火狐とOperaはルビに対応してないので
ルビではなくカッコででるようになってます。。

f:id:rskull:20120329195404p:plain


現在分かってるバグという名の仕様
・文章しか一括変換できない
・IEだとバージョンによって動かない
・改行、空白とかをはさむとうまく動かない

まぁ普通は漢字単体で変換する場合が多いと思いますので、そんなに問題ないと思います。
そのうち直します。。。

動作確認:Chrome / Safari / Firefox / Opera /(バージョンは見てないです><

※URL移転
http:/rskull.com/ruby/bookmarklet.html

http://rskull.com/ruby/home

とり合えず今後も改良していきたいと思います(ω

現在見てるページを速攻でツイートする。

※2012 04/30 修正しました!

ブックマークレットで簡単につくってみたので紹介。
現在みてるページのURLをすぐにツイート欄にセットして表示させます。

こんなかんじ

f:id:rskull:20120327222458j:plain

JavaScript

(function (d) {
    var title = d.title;
    var ref = d.referrer;
    var url = location.href;
    window.open('http://twitter.com/intent/tweet?text=[ '+encodeURI(title)+' ]&url='+url+'&original_referer='+ref, 'win','height=350,width=350');
})(document);

※Swifterから即ツイ!に変更

http://rskull.com/sokutwi

f:id:rskull:20120327222917j:plain


あとは好きなページで実行するだけです!

短縮APIをつかってみる。

Twitterでも有名なURL短縮サービスのTinyを使う方法!
っていってもHPにいけば書いてありますが。。

PHP

define('TINY_API', 'http://tinyurl.com/api-create.php');
function tiny ($url) {
    return file_get_contents(TINY_API.'?url='.$url);
}

こんな感じに書いたら後は簡単です。
引数に短縮したいURLを入れて実行するだけ

$url = 'http://www.example.com/test/xxxxxxxxxx';
$tiny = tiny($url);

これだけです!

ってことで簡単に短縮URLをつくってみました!
http://gzry.tk/

ちなみにこのドメインは無料デースっ
90日間で25?だかアクセスないと消されちゃいますが

http://gzry.tk/api.php?url=(短縮したいURL)

で短縮が返ってくる仕組みデース
ちなみにDBは使ってなくて全部ファイル操作デス
ファイルが大量に増えるので24時間で短縮が無効されるようなってマース

cronでファイルの作成日監視して24時間過ぎてたら削除してる感じでやってます。
ちなみにcronとか普通のレン鯖じゃついてないので、フリーで使えるサイト利用してます。

https://mywebcron-com.loopiasecure.com/members.php?Jobs

全部英語だけど意外と感でできますよー
Twitterのボットもコレ利用してマース