2016-03-06

JavaScriptで時間差で要素を表示する

JavaScript jQuery

時間差表示がしたい

JavaScriptで画像などを一つずつ順番に表示したいとき、

今更ながら少しはまったのでメモ。

jQuert delay関数を使う

sleepとか単純に処理を止める関数はない模様なので、

jQueryの関数delayをループで組み合わせる

0.1秒ごとに画像を一つずつfadeIn表示する場合

$.each($('.img'), function(index) {

$(this).delay(index * 100).fadeIn(100)

});

delayの遅延時間をループごとに増やしているわけですね。

fadeInなど用意されているものではなく、任意の処理をdelayさせて呼びたい場合は

queue関数を使ってみる。

$.each($('.img'), function(index) {

$(this).delay(index * 100).queue(function() {
$(this).addClass('go');
});

});

CSSのアニメーションを順番に発火させたいときには

こんな感じでいけそう。

2016-02-26

ネイティブのようなWebアプリを作る！キャッシュ更新されない問題

ファイルを更新しても反映されない

前回、オフラインWEBアプリを作成したが、

ファイルを更新しても反映されない問題発生。

マニフェストファイルが更新されていないと更新されない

とのことなので、マニフェストファイルを修正したら反映された。

慣例でversion情報などをもたせて、変更させる方法があるらしいので

そちらでやってみた。

CACHE MANIFEST
# Version: 15 ##ココを更新する
index.html
NETWORK:

index.html

しかし毎回修正するのは手間である

良い方法はないものか。

とりあえず開発中はoffにしておくことにしよう。

2016-02-24

ネイティブのようなWebアプリを作る！オフラインWEBアプリケーション作成

Webでもリッチなコンテンツが作れるようになってきている

✔︎ オフラインWebアプリ

✔︎ JSフレームワークの進化

✔︎ CSS3の進化

✔︎ WebSocketの進化

✔︎ http2

✔︎ Web Push

とかとか。

このあたりの要素とてもワクワクするので

そろそろ一つ作り上げてみたいのです。

オフラインWebアプリケーションを作成する

まずはオフライン化。ローカルにデータ持つだけなら

通信繋がっていなくてもWEBアプリ開けるなんて。

1.マニフェストファイルを作成する

document root配下に以下のファイルを設置

appcache.manifest

CACHE MANIFEST
index.html
img/sample.jpg

こちらに記載したファイルをローカルにキャッシュして、

２度目以降は通信しないで表示ができる

2.htmlでマニフェストファイルを読み込む

index.htmlのhtmlタグにmanifestファイルを指定

<html lang="ja" manifest="appcache.manifest">

3. .htaccessでヘッダ追加

manifestファイルはこちらのヘッダをつけると有効になるらしい

AddType text/cache-manifest .manifest

4. アクセスしてみる

index.htmlにアクセスしてみる

chromeの開発者ツールのログにそれっぽい表示

Document was loaded from Application Cache with manifest http://xxxxx/appcache.manifest

Application Cache Checking event

Application Cache NoUpdate event

マニフェストファイルにアクセスしてみるとレスポンスヘッダに

ちゃんとついている

Content-Type:

text/cache-manifest

これでキャッシュされたはず

5. オフラインでアクセスしてみる

無事表示されればOK.

そこまで難しくない。世の中素晴らしい。

2016-02-09

vue.js カスタムフィルタ登録お金の表示を3桁区切りで表示する

vue.js JavaScript

お金の表示を3桁区切りにしたい

JSの標準関数で存在した。

NumberオブジェクトのtoLocaleString関数

こんな感じ

console.log( (123456).toLocaleString() );

// 123,456

ロケール設定に依存するようですが、

正規表現でコネコネするよりシンプルで良い

vue.js のカスタムフィルタで表示する際に桁区切り

今回、vue.jsを利用したSPAで

桁区切りした数字を画面に表示するためにカスタムフィルタに

登録する方法をとった。

JSの処理中にカンマをもたせたり変数にいれたりすると

演算の際に邪魔になるため。

表示としては

JS

　var money = 123456;

　Vue.filter('moneyDelimiter', function(value) {
　　return value.toLocaleString();
　});

HTML

　<p>{{money | moneyDelemiter}}</p>

これで 123,456 と期待通りに表示される。

手軽でよい。

2016-01-15

Vue.js × vue-router × browserifyで SPAのHTMLの画面ごとに切り出し

Vue.js browserify gulp

HTMLファイルを画面ごとに切り出したい

前回、vue-routerでVue.jsでSPAっぽくURLごとに

DOMを切り替えた。

ただ、一つのHTML全て画面の要素を書いていくのは

・肥大化してみづらい

・管理しづらい

などなどのため、画面ごとにHTMLファイルに切り出したい

browserifyを用いて実現する

HTMLファイルをbrowserifyのrequireで取り込むことでできないかと

調べたらできた。

JSソース

$(function(){
var hoge = Vue.extend({template: require('../html/hoge.html')});
var fuga = Vue.extend({template: require('../html/fuga.html')});

var App = Vue.extend({});
var router = new VueRouter();

router.map({
'/hoge': { component: hoge},
'/fuga': { component: fuga}
});

router.start(App, '#app');

});

前回はtemplateの値に#hogeで要素をしていたが、

requireでファイルを読み込む形とした。

browserify導入

npmで以下をinstall

browserify本体

npm install --save-dev browserify

stringify

htmlをjsに文字列としてrequireを可能にしてくれる人と理解

npm install --save-dev stringify

vinyl-source-stream

browserifyをgulpで使えるようにしてくれる人と理解

npm install --save-dev vinyl-source-stream

gulpfile.jsはこんな感じ

gulp.task('browserify', function(){

browserify({

entries: ['../js/index.js'] // index.jsをbrowserifyにかける

})

.transform(stringify([".html"])) // htmlファイルをrequireできるように指定

.bundle()

.pipe(source('../js/dest.js')) // コンパイル後のファイルをdest.jsとして出力

.pipe(gulp.dest('.')); // コンパイル後ファイルの出力先を指定

});

gulp.task("default", function() {

gulp.watch("../js/index.js", ["browserify"]); //index.jsを変更したらbrowserifyタスクを実行

});

コンパイル後のdest.jsをhtml本体に読み込ませておけば、

gulpを実行して、index.jsでrequireを書きながら作業ができる。

便利な世の中。

2016-01-14

Vue.js vue-routerでSPA実装

Vue.js

Vue.jsに公式のrouterが

vue.jsは

・学習コストが低い

・シンプルにかける

などと言われおり、実際に使ってデータバインディングは

確かにラクにかけるので好んで使っていた。

そのVue.jsに最近vue-routerなる公式のroutingモジュールが

でていたので、使ってみる

vuejs.github.io

日本語ドキュメント豊富でとても助かります。

vue-router利用方法

cdnが用意されているので以下を読み込むだけで良い。

<script src="http://cdn.jsdelivr.net/vue/0.12.10/vue.js"></script>
<script src="https://cdn.jsdelivr.net/vue.router/0.5.2/vue-router.min.js"></script>

Routing Sample実装

ドキュメントを参考にしながら実装

$(function(){
var hoge = Vue.extend({template: '#hoge'});
var fuga = Vue.extend({template: '#fuga'});

var App = Vue.extend({});
var router = new VueRouter();

router.map({
'/hoge': { component: hoge},
'/fuga': { component: fuga}
});

router.start(App, '#app');
});

HTML

<body id="app">

<div>

<a v-link="/hoge">hogeへ</a>

<a v-link="/fuga">fugaへ</a>

<router-view></router-view>
</div>

<div id="hoge" style="display:none;">
hoge page
</div>

<div id="fuga" style="display:none;">
fuga page
</div>

</body>

これだけで

/foo にアクセスすれば、#fooのdiv要素が

/bar なら#barのdiv要素が router-view内に表示される

display:noneがvue.jsを利用していない感があるが、routingテストなのでとりあえず。

v-linkで切り替えた際にdisplay 属性を書き換えてくれる模様。

お手軽な予感。

2015-12-07

ViewModelの役割

ViewModelを初めて使うことになりそうなので、改めて整理。

役割分担としては

✔︎データ永続化に関する処理はModelに記載してControllerで呼び出し

✔︎画面に表示するデータの取得及び加工はViewModelに記載

になるのか。

参照系の画面はコントローラがかなりシンプルになりそう。

けど、DBアクセスがModelとViewModelにちらばるのが違和感。

ViewModelからEntityも呼び出せるようにする必要がある。

サンプルを作ってみて整理したい。

JazzとWebと無印と

ゆっくり豊かに暮らす