
[ReactにはContextというコンポーネント間でデータを受け渡す機能](https://ja.reactjs.org/docs/context.html)があります。この機能を活用すると、基本的には指定のコンポーネントの子コンポーネントで利用する事が出来るようになるのですが、ReactPixiはCanvas要素を使っている関係もあってか、そのままではReactPixiのコンポーネントではContextのデータを受け取ることが出来ません。

## PixiJS、ReactPixiとは

[PixiJS](https://pixijs.com/)は、通常のアニメーションはもちろん、スプライトアニメーションなどにも対応している2Dに特化したWebGLにも対応しているレンダリングエンジンです。

そのPixiJSをReact上でも利用しやすいコンポーネントの形で用意されたライブラリが[ReactPixi](https://reactpixi.org/)です。コンポーネントのプロパティから表示位置やスプライト画像を指定することが出来るため、Reactの機能を使いながらPixiJSのレンダリングエンジンを活用することが可能です。

## ContextをReactPixiで使う時の問題点と解決方法

ReactPixiのコンポーネント下では、そのまま記述するだけではContextの伝播は行われず、値を取得することが出来ません。

```tsx
import { createContext } from "react";
import { Stage, Sprite } from "@inlet/react-pixi";

// Contextの作成
const FooContext = createContext(true);

// ReactPixiのコンポーネント
const MySprite: React.FC = () => {
  // 取得できない
  const fooValue = useContext(FooContext);
  
  return (
    <Sprite />
  );
}

// 親コンポーネント、ここでContextを宣言する
const App: React.FC = () => {
  return (
    <FooContext.Provider value={true}>
      <Stage>
        <MySprite />
      </Stage>
    </FooContext.Provider>
  );
}
```

### Context Bridgeを利用する

そこで、[Context Bridge](https://reactpixi.org/context-bridge)という機能が用意されていますので、この機能を活用することでReactPixiのコンポーネントにも値を渡すことが可能です。

（ほぼマニュアルのコピペになりますが…TypeScriptの型定義も追加した場合）

```tsx
import { createContext } from "react";
import { Stage, Sprite } from "@inlet/react-pixi";

// Contextの作成
const FooContext = createContext(true);

// Context Bridgeの準備
// ここでContextを宣言することになる
type ContextBridgeProps = {
  Context: React.Context<boolean>;
  render: (children: React.ReactNode) => React.ReactNode;
}
const ContextBridge: React.FC<ContextBridgeProps> = ({ children, Context, render }) => {
  return (
    <Context.Consumer>
      {value => render(<Context.Provider value={value}>{children}</Context.Provider>)}
    </Context.Consumer>
  );
}

// ContextBridgeを使った独自Stageを準備
const StageProps = React.ComponentProps<typeof Stage>;
const MyStage: React.FC<StageProps> = ({ children, ...props }) => {
  return (
    <ContextBridge
      Context={FooContext}
      render={(children) => <Stage {...props}>{children}</Stage>}
    >
      {children}
    </ContextBridge>
  );
}

// ReactPixiのコンポーネント
const MySprite: React.FC = () => {
  // 取得できるようになる
  const fooValue = useContext(FooContext);
  
  return (
    <Sprite />
  );
}

// 親コンポーネント
const App: React.FC = () => {
  return (
    <MyStage>
      <MySprite />
    </MyStage>
  );
}
```

結構長い記述が必要になりますが…これで各ReactPixiのコンポーネントでContextの値が取得出来るようになります。


## Recoilを利用した場合の対応

Recoilも同様にそのまま記述すると値の伝播が行われませんので、[Recoil側にBridgeの機能が用意されています](https://recoiljs.org/docs/api-reference/core/useRecoilBridgeAcrossReactRoots)ので、こちらを利用する必要があります。

※ただし、フック名からも分かるように動作は不安定な時もあるようです。

```tsx
import { createContext } from "react";
import {
  atom,
  useRecoilState,
  RecoilRoot,
  useRecoilBridgeAcrossReactRoots_UNSTABLE
} from 'recoil';
import { Stage, Sprite } from "@inlet/react-pixi";

// Atomの作成
const FooState = atom({
  key: 'foo',
  default: false,
});

// Recoil Bridgeを使った独自Stageを準備
const StageProps = React.ComponentProps<typeof Stage>;
const MyStage: React.FC<StageProps> = ({ children, ...props }) => {
  const RecoilBridge = useRecoilBridgeAcrossReactRoots_UNSTABLE();
  
  return (
    <Stage {...props}>
      <RecoilBridge>
        {children}
      </RecoilBridge>
    </Stage>
  );
}

// ReactPixiのコンポーネント
const MySprite: React.FC = () => {
  // 取得できるようになる
  const [foo, setFoo] = useRecoilState(FooState);
  
  return (
    <Sprite />
  );
}

// 親コンポーネント
const App: React.FC = () => {
  return (
    <RecoilRoot>
      <MyStage>
        <MySprite />
      </MyStage>
    </RecoilRoot>
  );
}
```

## 雑感

アニメーションが必要な場合はPixiJS、インタラクティブな処理が必要な場合はReactが便利なので、インタラクティブなアニメーションを制作する時にはReactPixiを活用すると色々な動きを効率的に作れそうな感じを受けました。

ContextやRecoilも使えることが分かったので、Canvas内外問わず大きくコンポーネントが離れていても互いに値の受け渡しを行うことができそうなので、色々と試してみようと思います。


ReactPixiでコンテクスト（Context）を渡す


このブログは自分の実験場でもあるので、WordPress -> Ghost -> Nuxt.js -> Gatsby.jsと色々変更していたのですが、今回Next.jsに変更してみました。

[Next.jsの公式ドキュメントにもGatsby.jsからのマイグレーションの方法が記載されていた](https://nextjs.org/docs/migrating/from-gatsby)ので、そちらをベースに、ちょっと問題となった所をメモ。

（全体的にTypeScriptに変えています）

## getPostBySlug内でエラーが発生

[公式ドキュメントに記載のsrc/lib/blog.js](https://nextjs.org/docs/migrating/from-gatsby#data-fetching)を参考にしていたのですが、`getPostBySlug`内の`parseISO`でエラーが発生してしまいました。

原因としては自分の記事Markdownは`2020-11-15T00:00:00.000Z`という形式で記述していたところ、gray-matterの処理中で自動的にDate型に変換されていたので、`date-fns`の処理が不要でした。

## 前後の記事を取得する

（一応）ブログの体裁をとっているので、前後の記事へのリンクを貼っておきたいので、ちょっと無理やりな方法ですがSSGなので良しとして下記の方法で取ってみました。

まず、`getAllPosts`の結果を日付順に並び替えます。

```ts
// 型推論用に
export type BlogContent = {
  slug: string
  frontmatter: {
    title: string
    date: string
    datetime: number
    // 実際にはもうちょっとあるけど省略
  }
  content: string
}

// 比較出来るようにミリ秒の変数も追加
export const getPostBySlug = (slug: string): BlogContent => {
  const realSlug = slug.replace(/\.md$/, '')
  const fullPath = join(postsDirectory, `${realSlug}.md`)
  const fileContents = fs.readFileSync(fullPath, 'utf8')
  const { data, content } = matter(fileContents)
  // 自分の環境は下の処理は不要だった
  // const date = format(parseISO(data.date), 'MMMM dd, yyyy')
  const datetime = data.date.getTime()

  return { slug: realSlug, frontmatter: { ...data, datetime }, content }
}

// 一覧を返す前にsortを実行
export const getAllPosts = () => {
  const slugs = fs.readdirSync(postsDirectory)
  return slugs
    .map(slug => getPostBySlug(slug))
    .sort((a, b) => {
      if (a.frontmatter.datetime === b.frontmatter.datetime) {
        return 0
      }
      return a.frontmatter.datetime < b.frontmatter.datetime ? 1 : -1
    })
}
```

下記関数を作成して前後の記事を取得できるようにしました。  
単純に日付順になっているので記事スラッグから配列インデックスの-1/+1を取得しているだけです。

```ts
export const getNextPrevPosts = (slug: string) => {
  const posts = getAllPosts()
  const index = posts.findIndex(post => post.slug === slug)

  const prev = (() => {
    if (index <= 0) {
      return null
    }

    return posts[index - 1]
  })()

  const next = (() => {
    if (index >= posts.length - 1) {
      return null
    }

    return posts[index + 1]
  })()

  return { prev, next }
}
```

## ページネーション

上記前後の記事を取得する際に日付順に並び替えたので、そのままページ分割も行ってみます。

Dynapic Routes様のファイルを`pages/page/[p].tsx`を作成（ファイル名に`[]`を使うの気になるなぁ）し、`getStaticProps`・`getStaticPaths`を下記のように記述しました。

```ts
import { GetStaticProps, GetStaticPaths } from "next"
import { ParsedUrlQuery } from "querystring"

// 前後記事で用意した関数を取得
import { getAllPosts, BlogContent } from "../../lib/blog"

type Props = {
  p: number
  posts: BlogContent[]
  hasNext: boolean
  hasPrev: boolean
}

const PER_PAGE = 10;

export const getStaticProps: GetStaticProps<Props> = async ({ params }) => {
  const p = params.p ? parseInt(params.p as string) : 1

  const allPosts = getAllPosts()
  const hasNext = allPosts.length > (p - 1) * PER_PAGE + PER_PAGE
  const hasPrev = p > 1
  const posts = allPosts.slice(
    (p - 1) * PER_PAGE,
    (p - 1) * PER_PAGE + PER_PAGE
  )

  return {
    props: {
      p,
      posts,
      hasNext,
      hasPrev,
    },
  }
}

export const getStaticPaths: GetStaticPaths = async () => {
  const posts = getAllPosts()
  const maxPage = Math.ceil(posts.length / PER_PAGE)

  const paths: { params: ParsedUrlQuery }[] = []
  // 1ページ目はトップページにしてるので、2ページ目から
  for (let i = 2; i <= maxPage; i += 1) {
    paths.push({ params: { p: i.toString() } })
  }

  return {
    paths,
    fallback: false,
  }
}
```

## 目次を取得

こっそり目次を左上メニュークリック時に表示されるようになってまして、目次を取得する方法をメモ。

[remark-toc](https://github.com/remarkjs/remark-toc)があってこちらはHTMLに挿入される形なんですが、変数とほしかったので、実際かなり力技ですが…。

記事詳細の`pages/[slug].tsx`の`getStaticProps`内に処理を追加します。

```ts
import {
  getPostBySlug,
  getAllPosts,
  getNextPrevPosts,
  BlogContent,
} from "../lib/blog"

// Markdownのパース用
import remark from "remark"
import remarkHtml from "remark-html"
import remarkSlug from "remark-slug"

// 目次パース用
import { JSDOM } from "jsdom"

// 目次用の型宣言
export type HeaderContent = {
  level: number
  id: string
  label: string
}[]

type Props = BlogContent & {
  headers: HeaderContent
  excerpt: string
  prev: BlogContent
  next: BlogContent
}

export const getStaticProps: GetStaticProps<Props> = async ({ params }) => {
  const slug = Array.isArray(params.slug) ? params.slug.join("/") : params.slug
  // 記事の詳細情報を取得
  const post = getPostBySlug(slug)

  // MarkdownをHTMLに変換
  // remark-slugで各見出しにIDを付与しています
  const markdown = await remark()
    .use(remarkSlug)
    .use(remarkHtml)
    .process(post.content || "")
  const content = markdown.toString()

  // 記事のHTMLをパースして見出しを取得
  const dom = new JSDOM(content)
  const headerDoms = dom.window.document.querySelectorAll("h2,h3,h4,h5")
  // 見出しレベルとID, hタグ内のテキストを配列で取得
  const headers = Array.from(headerDoms).map(header => {
    return {
      level: parseInt(header.tagName.replace(/^H/i, "")),
      id: header.id,
      label: header.textContent,
    }
  })

  // 前後ページの情報を取得
  const { prev, next } = getNextPrevPosts(slug)

  return {
    props: {
      ...post,
      content,
      headers,
      prev,
      next,
    },
  }
}
```

## 現状起きてる問題

記述の問題か、ライブラリ側の不具合なのか不明ですが、下記の問題が発生しています。解決できたら追記・もしくは新しく記事を書こうかな。

* next/imageのsrcを変更した時に画像が切り替わらない
  * data-srcだけ変わっていてsrc, srcsetが変わっていない気がする
  
致命的な部分で発生してるわけじゃないので、とりあえず放置…。


Gatsby.jsからNext.jsに乗り換えてみた


Vue3がそろそろ公開されそうな雰囲気なので、ちょっと先にVue Composition APIをつかってみました。

[Composition API RFC](https://vue-composition-api-rfc.netlify.com/)をボチボチ読んで、[Class Component](https://github.com/vuejs/vue-class-component)で書いてたものを変換してみたのでその時のメモを残しておきます。


## Props

`props`は`setup`の第一引数から取得可能。

```ts
<template>
  <p>{{ foo }}</p>
</template>

<script lang="ts">
import { createComponent } from '@vue/composition-api'

// Propsの型推論用
type Props = {
  foo: string,
  bar: number
}

export default createComponent({
  // createComponent内でpropsを定義する
  // 定義の仕方は通常のVueと一緒
  props: {
    foo: { type: String, { default: 'hoge' } },
    bar: { type: Number, { required: true } }
  },
  // setupの第一引数でpropsを取得できる
  setup(props: Props) {
    // props.foo
  }
})
</script>
```

## Data

`reactive`や`ref`で定義した変数を`setup`内で返してあげると、テンプレート内でも利用できるリアクティブな変数、`data`と同じ様な扱いになる様子。

```ts
<template>
  <p>{{ foo }}</p>
</template>

<script lang="ts">
import { createComponent, reactive, toRefs } from '@vue/composition-api'

// リアクティブな変数を返す
const createComponentState = () => {
  const state = reactive({
    foo: 'bar'
  })

  // そのまま返すと...componentState を実行する時に
  // リアクティブが切れちゃうので、toRefsを通す
  return toRefs(state)
}
type ComponentState = ReturnType<typeof createComponentState>

export default createComponent({
  setup() {
    // setup内で関数を実行する
    const componentState = createComponentState()

    // returnするとtemplate内で利用できる
    return {
      ...componentState
    }
  }
})
</script>
```

## Computed

まさに`computed`という関数があるので、こちらを利用して用意した値を`setup`内で返してあげれば`computed`と同じ様な扱いに。

また、computed内で`set`/`get`に対して関数を渡してあげれば、setter/getterも対応が可能。

```ts
<template>
  <p>{{ foo }}</p>
</template>

<script lang="ts">
import { createComponent, reactive, computed, toRefs } from '@vue/composition-api'

// Injectするキーと型を取得する
import { SomethingStore, SomethingStoreKey } from 'path/to/store'

// リアクティブな変数を返す
const createComponentState = (store: SomethingStore) => {
  const state = reactive({
    // Getterのみ
    foo: computed(() => {
      return store.foo
    }),
    // Setterも使う時はget,setを指定する
    bar: computed({
      get: () => {
        return store.bar
      },
      set: (val) => {
        store.bar = val
      }
    })
  })

  return toRefs(state)
}
type ComponentState = ReturnType<typeof createComponentState>

export default createComponent({
  setup() {
    // Injectでstoreの情報を取得して、コンポーネント変数作成時に渡す
    // Vuexでも別に良い、その時は多分setup関数の第2引数context内のrootを使う形になりそう
    const store = inject(SomethingStoreKey)
    const componentState = createComponentState(store)

    return {
      ...componentState
    }
  }
})
</script>
```

## Methods

`setup`内で関数を返してあげればテンプレート内から呼び出せる。

```ts
<template>
  <div>
    <button @click="clickHandler">Button</button>
    <button @click="complexClickHandler">Complex Button</button>
  </div>
</template>

<script lang="ts">
import { createComponent, reactive, toRefs } from '@vue/composition-api'

// リアクティブな変数を返す
const createComponentStore = () => {
  const state = reactive({
    // ... 省略
  })
  return toRefs(state);
}
type ComponentState = ReturnType<typeof createComponentState>

// setup内に関数を返すための関数
// 変数を受け取れるようにしておき、setup内で定義したデータの受け渡しをする
const useComplexClickHandler = ({ componentState }: { componentState: ComponentState }) => {
  return () => {
    // クリックされて実行する処理をココに記入する
  }
}

export default createComponent({
  setup() {
    const componentState = createComponentStore()

    // setupで返してあげればtemplate内で利用できる
    const clickHander = () => {
      window.alert('Clicked')
    }

    // ややこしい処理をする時はsetupの外に出すことを推奨されている
    // また、外に出すことができるので、mixinじゃなくても共通化が可能
    // setup内で生成したリアクティブな変数を渡すことで、状態を保つ
    const complexClickHandler = useComplexClickHandler({ componentState })

    return {
      ...componentState,
      clickHandler,
      complexClickHandler
    }
  }
})
</script>
```

## Watch

`watch`関数が用意されてるので、そちらを利用すればOK。

ちょっと注意しないといけないと思ったのが、`watch`は`reactive`や`ref`、`computed`で定義したような、リアクティブな変数しか受け付けていないので、propsの値をそのまま渡すことは出来ない様子。

取りあえずは一度`computed`に通した値を渡すようにしていますが、何が正解なのかな？

```ts
<template>
  <p>{{ foo }}</p>
</template>

<script lang="ts">
import { createComponent, reactive, toRefs, watch } from '@vue/composition-api'

// Propsの型推論用
type Props = {
  foo: string
}

// リアクティブな変数を返す
const createComponentStore = ({ props }: { props: Props }) => {
  const state = reactive({
    // watch関数はリアクティブな変数を型指定されているので
    // computedを通してリアクティブな変数にする
    fooRef: computed(() => {
      return props.foo
    })
  })
  return toRefs(state);
}
type ComponentState = ReturnType<typeof createComponentState>

export default createComponent({
  setup(props: Props) {
    // computed用にpropsを渡す
    const componentState = createComponentStore({ props })

    // propsを直接渡せないので、一度computedに通した値を渡す
    watch(componentState.fooRef, (newVal) => {
      console.log(newVal)
    })

    return {
      ...componentState
    }
  }
})
</script>
```

### その他仕様

#### 全体をウォッチ

`watch`の第一引数に関数を渡すと、コンポーネント内のリアクティブな変数いずれかの値が変わると実行される。

```ts
watch(() => {
  // 何かが変われば実行される
})
```

#### 複数の値を対象にする

第一引数に配列を渡すと複数の値に対して監視が行え、実行する関数の変更後の値も配列で返される。

```ts
watch([fooRef, barRef], ([newFoo, newBar], [prevFoo, prevBar]) => {
  // fooRefまたはbarRefが変われば実行される
})
```

#### 初期化

`watch`実行する前に値を初期化しておきたい場合、初期化関数が用意されている。

実行されるタイミングはこんな時。

* `watch`が再実行された時
* `watch`が停止された時（`stop`が実行されたり、アンマウントされた時など）

また、使い方は二種類。

```ts
// 第一引数に関数を渡し時は、第一引数に初期化関数が渡される
watch(onCleanup => {
  onCleanup(() => {
    // ココで初期化する
  })
})

// 第一引数に関数を渡し時は、第三引数に初期化関数が渡される
watch(fooRef, (newFoo, oldFoo, onCleanup) => {
  onCleanup(() => {
    // ココで初期化する
  })
})
```

他にも色々あるみたいだけど、一旦ここまで…。

## Emit

`setup`の第二引数の`context`内に`emit`が含まれているので、それを活用すればOK。

```ts
<template>
  <button @click="clickHandler"></button>
</template>

<script lang="ts">
import { createComponent } from '@vue/composition-api'

export default createComponent({
  // setup関数の第二引数の中にemitが含まれている
  setup(_props, { emit }) {
    const clickHandler = (e) => {
      // 使い方は$emitと同じ様な感じ
      emit('click', e)
    }

    return {
      clickHandler
    }
  }
})
</script>
```

## $el/$ref

`$el`は無いっぽい。`$ref`はテンプレート内でref属性を指定した名称と同じ変数名の`ref`を用意してあげればアクセスできるようになる。

~~最初何故か反映されない、と思っていたら`setup`からreturnするの忘れていたというのは内緒。~~

```ts
<template>
  <p ref="foo">{{ foo }}</p>
</template>

<script lang="ts">
import { createComponent, ref, onMounted } from '@vue/composition-api'

export default createComponent({
  setup(props: Props) {
    // テンプレートで渡したref属性と同じ名前で用意する
    const test = ref(null)

    onMounted(() => {
      console.log(test) // -> <p ref="foo">
    })

    return {
      test
    }
  }
})
</script>
```

## ライフサイクルフック

[API Reference](https://vue-composition-api-rfc.netlify.com/api.html#lifecycle-hooks)に書いてある通りだけど…

`beforeCreate`と`created`は`setup`内で書いちゃえばOK。

| Before | After |
| ------ | ----- |
| `beforeCreate` | `setup`|
| `created` | `setup`|

他はon...という関数が用意されてます。

| Before | After |
| ------ | ----- |
| `beforeMount` | `onBeforeMount`|
| `mounted` | `onMounted`|
| `beforeUpdate` | `onBeforeUpdate`|
| `updated` | `onUpdated`|
| `beforeDestroy` | `onBeforeUnmount`|
| `destroyed` | `onUnmounted`|
| `errorCaptured` | `onErrorCaptured`|

また、新しく2つのデバッグ用のフックが追加されてます。

* `onRenderTracked`
* `onRenderTriggered`

## 雑感

PHPの経験が元々多いのもあってクラス型の考え方がベースにあるので、関数型の考え方は最初はとっつきづらかったんですが、やってみると面白いですね。

実際にVue3が発表されたときにはどんな実装になるのか楽しみです。

Vue Composition APIについて触ってみた



Facebookが開発を行っているReact.jsを勉強しておきたいなぁと思っていながら大分経ってしまいましたが、ちょっと先週末に簡単なカウンターを必要だったので、土曜日にReact.jsを使って作ってみました。


## 作る

今回はFluxまでには手を付けず、[コチラのスライドのデモ](http://azu.github.io/slide/react-meetup/flux.html)を参考にさせていただきました。（Fluxっぽい作りにはなっていますが、Dispatcherの代わりに簡易的なEventEmitterを噛ませているようです。）

後は、キーボードのイベント追加したり、効果音を鳴らしたりする処理を加えたりと、大きな機能変更はしていなかったりするので、実はそこまで書くことが無かったりします…。

~~ということで、出来上がったものがコチラ。~~  
 （アクセス時に名前の入力が求められます。）

[8×8 ドットのフリーフォント「美咲フォント」](http://www.geocities.jp/littlimi/misaki.htm)をインストールしているPCで閲覧していただくと、さらに某RPGっぽい雰囲気が感じられると思います。


## 雑感

JavaScriptの中にHTML書くのはちょっと気持ち悪いですが、JSX楽しいです。

ただ、まだ参考にしたデモから追記をした程度なので、詳しい部分が理解できておらず具体的な説明などやポイントまでは書くことが出来ませんが、次回は1から書いてみて、Fluxにも手を出してみたいなぁと思います。

またちなみにですが、実際に使った現場ではまさにそのまんま某RPGっぽい画像とSEを集めてきましたが、版権的にやはりちょっと怖いので、今回のデモは差し替えています。


## 参考サイト

- [10分で実装するFlux](http://azu.github.io/slide/react-meetup/flux.html)


## 素材利用

- [零式マテリアル 様](http://www.zero-matter.com/) （レベルアップSE）
- [魔王魂 様](http://maoudamashii.jokersounds.com/) （文字送り、ステータス開閉SE）
- [するめを食べながら 様](http://blog.livedoor.jp/ata_rime/archives/39001614.html) （背景素材）
- [Little Limit 様](http://www.geocities.jp/littlimi/) （8×8 ドット日本語フォント「美咲フォント」）




React.jsの勉強も兼ねて某RPG風レベルアップカウンターを作ってみた



次世代Canvasとも言える、WebGLを簡単に扱うことができる、[three.js](http://threejs.org/)を少しだけ触ってみたのでメモです。

インストールから初期設定、[簡単なサンプルの実行までは、既に詳細に分かりやすく説明されている記事](https://html5experts.jp/yomotsu/5225/)がありますので、そちらをご覧頂ければと思います。

※「THREE.CubeGeometry」は「THREE.BoxGeometry」に名称変更されている様なので注意。


## 画像をテクスチャとして貼る

画像をテクスチャとして貼る場合は、「THREE.ImageUtils.loadTexture」で読み込んで、Materialに貼り付けます。

```javascript
// 立方体を用意
var geometry = new THREE.BoxGeometry( 30, 30, 30 );

// 画像を読み込む
var texture = THREE.ImageUtils.loadTexture( 'path/to/image.jpg' );

// マテリアルに画像を貼る
var material = new THREE.MeshPhongMaterial( { map: texture } );

// オブジェクトを生成
var mesh = new THREE.mesh( geometry, material );
```


## 動画をテクスチャとして貼る

テクスチャに動画も簡単に利用することが可能です。  
 ただし、動画の再生にはHTML5のvideoタグを利用するので、スマホでは再生されないので注意です。

```javascript
// 立方体を用意
var geometry = new THREE.BoxGeometry( 30, 30, 30 );

// videoタグの用意
var video = document.createElement( 'video' );
video.src = 'path/to/video.mp4';
video.load();
video.play();

// three.js用のテクスチャに変換
var texture = new THREE.VideoTexture( video );
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;

// マテリアルに動画を貼る
var material = new THREE.MeshPhongMaterial( { map: texture } );

// オブジェクトを生成
var mesh = new THREE.mesh( geometry, material );
```


## 雑感

今までずっとFlashやCanvas等で2Dを触ってきたので3Dには少し抵抗感がありましたが、思っていたよりも簡単に触ることが出来ました。  
 また、WebGLのパフォーマンスもかなり高く、スマホでも思った以上にヌルヌル動くので、今後もっと3Dのコンテンツが出てくるのでは無いかと思いました。

また、まだ基本のマテリアルを使ったテストしかしていないので、モデルを使ったコンテンツも作ってみたいなぁと思います。


## 参考

- [初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞ | HTML5Experts.jp](https://html5experts.jp/yomotsu/5225/)
- [Three.jsで動画をテクスチャに指定する – Qiita](http://qiita.com/edo_m18/items/b697cba36de168e8a608)

three.jsを少し触ってみたのでテクスチャを利用する際のメモ



随分前からある機能ですが、今更ながら調べてみて自分にとって使いやすいライブラリとして用意したのでメモしておきます。


## 仕様について

どうせやるならウィンドウ全体に出来ると良いよね、ということでGmailとかWodPressとかみたいに、ウィンドウの何処でもいいのでドラッグ出来るような方法でやってます。

処理としては単純で、下記の通りです。[参考にさせていただいたのはコチラ](http://qiita.com/yaegaki/items/b7ea40490b06bd4f8e4f)、感謝です。

- 画面全体を覆う空のdiv（マスク）を用意して、最初は非表示にしておく
- bodyに対してdragoverイベントを付与、マスクにはdragleave、dropイベントを付与
- dragoverイベント発火時にマスクを表示
- dragleave、dropイベント発火時にはマスクを非表示

という方法を取れば、ローカルファイルをブラウザ内にドラッグした時にマスクが表示されて次の工程のイベントが発火出来る状態になるので、ウィンドウ全体でドロップできるようになります。


## オレオレライブラリ

[ライブラリ全体はGistにアップ](https://gist.github.com/sushat4692/d24bf9d801a18f0dd591)してあります。

使い方はこんな感じ。

```javascript
var drop = new DROP_FILES();

// dragover時のフック
drop.setEvent( 'over', function( e ) {
	// ほげほげ
} );

// dragleave時のフック
drop.setEvent( 'leave', function( e ) {
	// ゴニョゴニョ
} );

// drop時のフック
drop.setEvent( 'drop', function( e ) {
	// もにょもにょ
} );
```

まとめて指定することも出来ます。

```javascript
var drop = new DROP_FILES( {
	// dragover時のフック
	'over': function( e ) {
		// ほげほげ
	},
	// dragleave時のフック
	'leave': function( e ) {
		// ゴニョゴニョ
	},
	// drop時のフック
	'drop': function( e ) {
		// もにょもにょ
	}
} );
```

初期設定だと黄色いオーバーレイですが、CSSを書き換える事もできます。

```javascript
var drop = new DROP_FILES();

// 個別指定
drop.setCss( 'background', 'rgba( 255, 0, 0, .5 )' );

// 複数同時指定
drop.setCss( {
	'background': 'rgba( 0, 0, 255, .5 )',
	'z-index': '100'
} );
```


## 参考サイト

- [HTML5でファイルをドロップする際に画面全体にオーバーレイを表示する方法 – Qiita](http://qiita.com/yaegaki/items/b7ea40490b06bd4f8e4f)

ローカルファイルをブラウザにドラッグするJavaScriptを試してみた



以前に「[setTimeoutの代替関数？requestAnimationFrameを試してみた](http://blog.sus-happy.net/settimeout2requestanimationframe/ "setTimeoutの代替関数？requestAnimationFrameを試してみた")」という記事を書きましたが、ちょっと実行時間に狂いが激しかったので、色々と試してみてラッパークラスを作ってみたのでメモ。


## 改善点

- ある程度*FPSに近づける→*FPSの実行回数に近づける
- 以前のデモだと実はIE8非対応だったのですが解消


## 使い方

```html
<script src="path/to/TickTack.js"></script>
<script>
var someFunc = function() { /* 何か処理 */ };
var fps      = 30; // 30FPS : 1秒間に30回実行
var tick = new TickTack( someFunc, fps );

// 実行開始
tick.start();

/* 色々何か */

// 停止させたい時
tick.stop();
</script>
```


## デモ

[デモはコチラ](http://sushat4692.github.io/TickTack.js/)

「request30fps」が以前のテストコードです。それに比べると実行時間の総計は結構近くなっていると思います。


## ダウンロード

[GitHubで公開しています。](https://github.com/sushat4692/TickTack.js)


TickTack.js - requestAnimationFrameをもうちょっと使いやすいモノにしてみた


アニメーションを実装するときに、setTimeoutやsetIntervalを利用してDOMやCSSをいじってアニメーションを実装していましたが、今更ながらrequestAnimationFrameというものの存在を知りました。

調べてみると完全に代替出来るものではなさそうなので、自分なりに使い方とどんな時に利用できるのかを残しておこうと思います。


## requestAnimationFrameとは

setTimeoutは指定したミリ秒間隔で渡した関数を実行しますが、requestAnimationFrameは **「再描画を実行する前に実行」** します。

そのため、PCのスペックや同じタイミングで動作している処理の内容によって実行される間隔が変化します。（MDNによると毎秒60回程度実行されるとのこと）

### 利用するメリット

毎回描画出来るタイミングで実行されるため、描画できないタイミングでDOMやCSSを書き換えても実際には動いていない、というような無駄な処理が発生しません。  
 また、タブが非アクティブな状態になると処理が軽減される、そうなのですが、実はsetTimeoutでも同じような処理がなされているそうです。

### 利用するデメリット

処理が実行されるタイミングがブラウザ側に依存されるため、狙ったタイミングで実行することができません。  
 また、実行されるタイミングも必ずしも一定とは限らないため、特定の速度で処理させようとすると中間の処理が必要となります。

この辺りの詳細については、[コチラのスライド](http://0-9.sakura.ne.jp/pub/lt/modest/start.html)で詳しく説明されていますので参考になるかと思います。

### 利用方法

setTimeoutの様に関数を渡すと実行されますが、実行されるタイミングが「描画できるタイミング」になるので、ミリ秒の間隔は渡す必要はなく、渡したくても渡せません。

また、requestAnimationFrameは実験的な関数であるためベンダプレフィックスがついていたり、そもそも実装されていないブラウザも存在しているため、下記の様に記述することでrequestAnimationFrameを優先し、存在しない場合はsetTimeoutで実行させることが出来ます。

```javascript
// requestAnimationFrameを優先に、存在しなければsetTimeoutを取得する
var requestAnimationFrame = window.requestAnimationFrame
                            || window.webkitRequestAnimationFrame
                            || window.mozRequestAnimationFrame
                            || window.setTimeout;
window.requestAnimationFrame = requestAnimationFrame;
 
function func() {
    // 実行させたい何か
}
 
requestAnimationFrame( func, interval ); // intervalはsetTimeoutの時だけ利用されます
```

実際に使ってみたイメージとしてはsetTimeout的な動きのように感じました。


## 30FPS（くらい）を狙って出す例

この例が最適では無いとは思いますが、例えばこんな方法で30FPSくらいの速度を狙えるのでは無いかと思います。

```javascript
// 基準実行時間
var basetime = Date.now();
 
// FPS
var fps = 1000/30;
 
// setTimeoutを利用した場合は最初から30FPSで実行される
function animate_handler() {
    var now   = Date.now();
    var check = now - basetime;
    if( check / fps >= 1 ) {
        basetime = now;
 
        draw();
    }
 
    requestAnimationFrame( animate_handler, fps );
}
 
function draw() {
    // 再描画処理
}
 
animate_handler();
```

~~デモも用意してみました~~ が、一定のリズムを刻むのは難しそうですね…。


## 雑感

全ての処理を書き換える必要はなさそうですが、一回のレンダリングの処理が重い場合は、ループ処理の方が過多になってしまって負荷がかかってしまうかもしれないので、そういった場合には使う価値がありそうな気がします。

参考のサイトでも記述されていますが、Canvasにアニメーションを描画する等、JavaScriptを使ったアニメーションは利用する価値大って感じですかね？またレンダリングの負荷が大きい処理で実験してみたいと思います。


## 参考

- [window.requestAnimationFrame – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/window.requestAnimationFrame)
- [いまさらrequestAnimationFrameを理解する – console.lealog();](http://lealog.hateblo.jp/entry/2013/10/01/235736)
- [jQueryで破棄されたrequestAnimationFrameとJSでのアニメーション実装で注意すること](http://0-9.sakura.ne.jp/pub/lt/modest/start.html)


setTimeoutの代替関数？requestAnimationFrameを試してみた


ネイティブアプリとして作るにしてはコストや、制限がかかりすぎてしまう件を考慮して、Webアプリをの方が良いと判断し、Backbone.localStorage.jsを使ってオフラインWebアプリケーションを構築した時のメモを残しておきます。


## Backbone.localStorage.js

Backbone.jsのModel、CollectionのSave、CreateのメソッドをOverrideし、HTML5のlocalStorage機能を利用してクライアント側に保存するライブラリです。  
 DLはこちらから：[jeromegn/Backbone.localStorage](https://github.com/jeromegn/Backbone.localStorage)

通常であればAjaxで通信する所をlocalStorageに保存する流れになりますので、通信したい場合はjQueryやZeptoを利用して手動で行う必要があります。

例えばCollectionでBackbone.localStorage.jsを利用する場合はこんな感じに記述します。

```javascript
( function( $ ) {

    /**
     * FugaModel
     */
    FugaModel = Backbone.Model.extend( {
        'initialize': function() {
            // Collection側からremoveされた時にdestroyを呼ぶ
            this.bind( 'remove', function() {
                this.destroy();
            } );
        },

        'defaults': {
            'foo': null,
            'bar': null
        }
    } );

    /**
     * FugaModelのCollection
     */
    FugaCollection = Backbone.Collection.extend( {
        'model': FugaModel,
        // Backbone.LocalStorageの引数はlocalStorageに保存される際のキーです
        'localStorage': new Backbone.LocalStorage("fuga_collection-backbone")
    } );

} )( jQuery );
```


## オフライン対応

このままでは扱うデータはクライアント側に保存されますが、アクセスする際に通信が発生してしまいます。

そこで、アプリケーションキャッシュを利用することで通常より強力なキャッシュをクライアントに保存することが出来、動作に必要なファイルをキャッシュさせることでオフラインでも操作可能なアプリケーションを構築することが出来ます。

### cache manifestの生成

cache manifestにより、どのファイルをキャッシュさせ、どのファイルはサーバから取得させるのか指定を行います。

ファイル名は具体的な決まりは無いようですが、「*.manifest」や「*.appcache」という名称が多いようです。  
 本記事では「cache.manifest」とします。

記述方法としてはこんな感じです。

```shell
CACHE MANIFEST
# ver. 0.0.1
# キャッシュファイル更新の発火用に、バージョン番号を入れておくと便利

# キャッシュさせるファイル
CACHE:
/img/logo.png
/img/blank.png
/js/jquery.js
/js/underscore-min.js
/js/backbone-min.js
/js/backbone.localStorage-min.js

# サーバから取得するファイル
# 逆に指定しないとサーバから取得しなくなるので「*」を指定するのが無難
NETWORK:
*

# サーバにアクセス出来なかった場合の代替指定
FALLBACK:
/img/*.png /img/blank.png
```

また、アプリケーションキャッシュを有効化するには、HTMLタグに下記のように指定します。

```html
<!doctype html>
<html lang="ja" manifest="cache.manifest">
<head>
    <meta charset="UTF-8">
    ...
</head>
<body>
    ...
</body>
</html>
```

ここで注意していただきたいのが、**後述するキャッシュファイルを更新する機能を組み込む前にアプリケーションキャッシュを保存しないようにする**ことです。

アプリケーションキャッシュは更新やブラウザの再起動だけでは削除することが出来ないため、更新する機能を組み込まないまま保存してしまうと、キャッシュとして保存してしまったファイルの更新を行うことが非常に困難になってしまいます。

### キャッシュファイルを更新する

アプリケーションキャッシュは非常に強力で、特別な操作をしない限りはクライアントから削除されることはなく、サーバから取得することはありません。  
 ブラウザのキャッシュファイルを削除することで再度サーバから取得することが出来ますが、ユーザにその操作をお願いすることは微妙です。

そこで利用されるのが、JavaScriptを利用することでアプリケーションキャッシュの再読み込みを促す方法です。  
[詳細はこちらのページでご紹介されています](http://www.html5rocks.com/ja/tutorials/appcache/beginner/)ので、ここでは再読み込みを行う処理のみメモしておきます。

```javascript
( function() {
    // アプリケーションキャッシュが更新完了したら実行
    // cache manifestに変更がなければキャッシュファイルの更新も行われず、このイベントも実行されない
    window.applicationCache.addEventListener('updateready', function( e ) {
        alert( '更新完了' );
    } , false);

    // インターネットに接続されているか？
    if(! navigator.onLine )
        return false;

    // アプリケーションキャッシュが保存されているか？
    if( window.applicationCache.status > 0 )
        window.applicationCache.update();
} )();
```

例のコメントに記載したとおり、cache manifestに変更がなければサーバから再度取得されません。  
 そこで活躍するのがバージョン番号です。キャッシュさせるファイルの一部変更を行った場合は、cache manifestも変更する必要があるため、バージョン番号を変更して対応させることが出来ます。  
 これは日付（YYYY-mm-dd）等でも良いかもしれません。

### アプリケーションキャッシュの消し方

もし、<del>更新する関数も作ったし大丈夫とか思いながらクリックイベントから関数を呼び忘れていた自分のように</del>更新する機能を実装する前にアプリケーションキャッシュを保存してしまった場合、ブラウザから直接削除する事が出来ます。

#### Google Chromeの場合

アドレスバーに「chrome://appcache-internals/」と入力すると、現在保存されて言うキャッシュの一覧が表示されますので、「Remove」をクリックすることで消去することが出来ます。

#### Firefoxの場合

開発ツールを開き、コンソールに「appcache clear」と入力すると消去することが出来ます。  
 また、「appcache list」と入力すると一覧を確認できます。

#### PC版Safariの場合

通常のキャッシュと同様に「キャッシュを空にする」を実行することで一緒に消えるようです。

#### iOS版Safariの場合

PC版と同様に、通常のキャッシュを消す方法と同じ、「設定」→「Safari」→「Cookieとデータを消去」で一緒に消えるようです。

#### Android版Chrome

「設定」→「アプリ」→「Chrome」→「データを消去」で削除することが出来ます。  
 ただし、設定情報なども全て消えてしまうようなので、実行するときには注意が必要です。


## 雑感

ネイティブアプリを利用するにはちょっと勿体無い…という場合には充分有用な機能ではないかと思います。JavaScriptが主体となるので、ネイティブアプリのパフォーマンスには劣りますが、簡単な操作で気になる点はありませんでした。

iOS限定ですが、よりアプリっぽくする場合には「Webアプリモード」というモノもあります。

```html
<meta name="apple-mobile-web-app-capable" content="yes">
```

URLバーやナビゲーションバーが表示されず、画面目いっぱい利用することが出来る所は嬉しいですね。ただし、通常のページ遷移を行うとSafariに飛ばされてしまうので、ページ切り替えもJavaScriptで用意する必要がある点に注意です。


## 参考

- [アプリケーション キャッシュ初心者ガイド – HTML5 Rocks](http://www.html5rocks.com/ja/tutorials/appcache/beginner/)
- [#3 「あまりApplication cache（cache manifest）のことを甘く見ない方がいい」 Advent Calendar 2012 | tech.kayac.com – KAYAC engineers' blog](http://tech.kayac.com/archive/application-cache-cache-manifest-advent-calendar-2012.html)

Backbone.localStorage.jsを使ってオフラインWebアプリケーションを作ってみた


とある案件でCreateJSを利用してスマホ用のWebゲームを作ったので、その時に調べた内容をメモメモ。

Canvasを利用すること自体あんまり無かったのですが、結構簡単に実装することが出来ました。


## CreteJS

そもそもCreateJSとは、HTMLの要素であるCanvas要素の描画をFlashの様に操作出来るライブラリで、実際に自分もFlashを利用することもあったことから、比較的とっつきやすい内容でした。

また、実際には

- Canvasへの描画を制御する「[EaselJS](http://www.createjs.com/#!/EaselJS)」
- アニメーションの動きを制御する「[TweenJS](http://www.createjs.com/#!/TweenJS)」
- 外部ファイルの読み込みを制御する「[PreloadJS](http://www.createjs.com/#!/PreloadJS)」
- 今回利用していなかったのでご紹介は省かせて頂きますが音声データを制御する「[SoundJS](http://www.createjs.com/#!/SoundJS)」

の4つをパッケージ化したものが「[CreateJS](http://www.createjs.com/#!/CreateJS)」となります。

そのため、一部の機能だけ必要という事であれば、バラバラに利用することも可能です。


## Canvasを用意

とりあえず描画するためのCanvasが必要となります。

```html
<canvas id="sample_canvas"></canvas>
```

HTML側に用意できたらCreateJS側で指定します。

```javascript
var stage = new createjs.Stage('sample_canvas');
```

こんな感じで、CreateJSに関わるオブジェクトを利用する際は、createjs.***と記述することになります。


## 図形を描く

Canvas上に図形を描く場合はEaselJSのShapeオブジェクトを利用します。

```javascript
var rectangle = new createjs.Shape();
rectangle.graphics.beginFill("#ff0000").fillRect( 0, 0, 100, 100 );
stage.addChild( rectangle );
```

ネイティブのJavaScriptを利用する場合はcanvasタグの描画コンテキストに記述しますが、CreateJSはFlashのようにShapeを用意して、それぞれのgraphicsに指定することが出来ます。

さらに、サイズを指定した後でも、位置を変更したり、拡縮を行うことが出来る所も便利です。

```javascript
rectangle.x = 100; // x座標を100に
rectangle.y = 100; // y座標を100に
rectangle.scaleX = 2; // 横幅を2倍
rectangle.scaleY = 2; // 縦幅を2倍
```

この辺りもFlashっぽいですね。


## 画像を配置する

CreateJSには簡単に画像を配置出来るBitmapオブジェクトが用意されています。

使い方はこんな感じ。

```javascript
var bitmap = new createjs.Bitmap( 'path/to/image.png' );
stage.addChild( bitmap );
```

こちらもShapeオブジェクト同様に位置指定、拡縮を行うことが出来ます。便利。

```javascript
bitmap.x = 100; // x座標を100に
bitmap.y = 100; // y座標を100に
bitmap.scaleX = 2; // 横幅を2倍
bitmap.scaleY = 2; // 縦幅を2倍
```


## マウスイベントを割り当てる

ネイティブのJavaScriptの場合Canvasに配置したオブジェクトにはイベントを割り当てることが出来ず、クリック位置を計算する必要がありますが、CreateJSでは各オブジェクトにイベントを割り当てることが出来ます。

```javascript
bitmap.addEventListener( 'click', function() {
	alert( 'clicked.' );
} );
```

このように、addEventListenerでイベントを割り当て、また、removeEventListenerでイベントを外すことが出来ます。

```javascript
bitmap.removeEventListener( 'click', arguments.callee ); // 特定のイベントを解除
bitmap.removeAllEventListeners(); // 全て解除
```


## パラパラ漫画のように画像を変更する

位置だけではなく画像自体を変更してアニメーションをする場合、大きな一枚画像の中にアニメーションのコマを配置して見せるエリアをフレームごとに変化させ、パラパラ漫画のように見せる手法があります。Googleのトップでアニメーションする時は大体その手法が取られていますね。

CreateJSにはそのアニメーションを簡単に実装することが出来るBitmapAnimationオブジェクトが用意されています。

例えば、400px x 400pxの画像に100px x 100pxのコマの画像を縦横2枚ずつ、4フレームのアニメーション画像を用意したとすると、下記のような記述をします。

```javascript
var spritesheet = new createjs.SpriteSheet( {
	images: [ 'path/to/animation.png' ], // アニメーション画像を指定
	frames: [ 'width':100, 'height':100 ], // 1コマのサイズを指定
	animations: {
		run: [0,3] // アニメーションの最初と最後のフレーム数を指定 0から3までなので4枚
	}
} );
var animate = new createjs.BitmapAnimation( spritesheet );
stage.addChild( animate );
animate.gotoAndPlay( 'run' );
```

簡単、とか言っておきながら結構長ったらしい記述が必要となりますが…こんな感じです。

SpriteSheetで画像のコマ割りを指定して、BitmapAnimationで実際に制御します。

また、SpriteSheetの指定にはその他色々な設定があるので、少しご紹介しておきます。

```javascript
var spritesheet = new createjs.SpriteSheet( {
	images: [ 'path/to/animation.png' ],
	frames: [ 'width':100, 'height':100 ],
	animations: {
		run: { // animationsをより細かく指定します
			frames: [ 0, 2, 1, 3 ], // 0から3ではなく、フレーム番号を指定出来ます
			next: 'walk', // アニメーション完了後の動きを指定します、未設定、またはtrueの場合はループします
			frequency : 5 // 5フレームに1度画像を変更する
		},
		walk: {
			frames: [ 4, 5, 6 ],
			next: false, // nextにfalseを指定すると、アニメーションが終了します
		}
	}
} );
var animate = new createjs.BitmapAnimation( spritesheet );
stage.addChild( animate );
animate.gotoAndPlay( 'run' );
```

このように書くと、まず「run」で指定したアニメーションが発生し、「walk」へと移り、最後に停止します。

ややこしいですが実際に自分で作ろうとするともっとややこしいことになるので、かなり整理されていると思います。


## 描画の更新を自動的に行う

ここまで触れていませんでしたが、Canvas要素に描画した内容を動かすためには、内容を変更するごとにCanvasを更新するメソッドを呼ばなければなりません。

色んな所に更新するメソッドが出来てしまったり、忘れてしまって表示が変わらないと焦ってしまわないように、CreateJSに用意されている自動更新を使ってみます。

```javascript
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick( event ) {
	stage.update();
}
```

これだけであればsetIntervalで設定してしまっても何らかわりはありませんが、その他にもFPSの指定が出来たりする機能があります。

```javascript
createjs.Ticker.setFPS( 40 );
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick( event ) {
	stage.update();
}
```

FPS指定もFlasherには慣れ親しんだ設定なので、setIntervalでミリ秒指定するよりも分かりやすそうですね。


## アニメーションさせてみる

図形や画像の配置が出来たら今度は動かしてみます。

```javascript
createjs.Tween.get( rectangle )
	.to( { x: 100 }, 100 )
	.to( { y: 100 }, 100 );
```

ココからはTweenJSを利用します。Tween.getで動かす要素をしていして、メソッドチェーンでアニメーションをつなげていくことが出来ます。

上の例では、「100ミリ秒でx座標を100に移動」した後、「100ミリ秒でy座標を100に移動」します。

また、動き終わったらアクションを起こす、ということも可能です。

```javascript
createjs.Tween.get( rectangle )
	.to( { x: 100 }, 100 )
	.to( { y: 100 }, 100 )
	.call( hoge );
function hoge() {
	alert( 'animation end.' );
}
```

簡単ですがTweenJSの説明はこんな感じです。  
 その他、TimeLineなんて名前も見かけましたが、使ってないのと内容も把握できていないのでで説明を省いておきます。


## 外部データを予め読み込む

最後にPreloadJSをご紹介します。

通常のWebサイトであれば上から順に表示される、ということが普通ですが、ゲーム内で必要な要素が後から後から表示されてしまうと見栄えも悪いですし、ゲーム内容にも影響が出てしまう恐れがあります。

ということで、PreloadJSを利用して予め必要なデータを読み込んでおきます。

```javascript
var queue = new createjs.LoadQueue();
queue.loadFile( { id:"image", src:"path/to/image.png" } );
queue.load();
```

読み込みが完了したらイベントを起こす、というような設定は、addEventListenerで指定します。  
 また、addEventListenerのprogressで読込中の状況を取得出来ます。

JavaScript

```javascript
queue.addEventListener( 'complete', completeHandler );
queue.addEventListener( 'progress', progressHandler );
function completeHandler( event ) {
	alert( 'load end.' );
}
function progressHandler( event ) {
	event.loaded; // ロード読み込み状況 0から1の値が入ります
}
```

読み込みが完了したデータは、こんな感じで使うことが利用します。

```javascript
var bitmap = new createjs.Bitmap( queue.getResult( 'image' ) );
```

読み込むファイルを指定する際に設定したidをキーに、getResultでファイルの情報を取得することができますので、そのままBitmapオブジェクトに渡すことが出来ます。


## 雑感

長々と書かせて頂きましたが、Flashの様に、の説明通りFlashを触ったことがありASでアニメーションを制御してた方であれば結構分かりやすい作りだったと思います。

以前にSVGのライブラリをご紹介させて頂きましたが、CanvasはCanvasで面白いなぁなんて感じました。

まだまだご紹介しきれていない内容がありますので、公式のドキュメント等をご覧になっていただき活用していただければと思います。


## 参考サイト

- [EaselJS v0.6.0 API Documentation : EaselJS](http://www.createjs.com/Docs/EaselJS/modules/EaselJS.html)
- [TweenJS v0.4.0 API Documentation : TweenJS](http://www.createjs.com/Docs/TweenJS/modules/TweenJS.html)
- [PreloadJS v0.3.0 API Documentation : PreloadJS](http://www.createjs.com/Docs/PreloadJS/modules/PreloadJS.html)

CreateJSを使って簡単なゲームを作ったのでメモ


やけに解像度の高いRetinaディスプレイが登場したり、手持ちのタブレット端末が流行ったりと、固定の画像で対応するには大変になってきそうな気がしたので、SVG等のベクタ画像をサイトに表示させる必要性があるのではないかと感じています。

そこで、実験的にJavaScriptを利用してベクタ画像を描画する[Raphaël](http://raphaeljs.com/)を使って[自サイト](http://sus-happy.net/)に線を引いてみました。

その他、矩形や円を描画したり、色を塗ったり出来るみたいなので、その辺りも含めて残しておきます。


## Raphaëlを使う準備

<script src="//yandex.st/raphael/2.1.0/raphael.min.js" type="text/javascript"></script>  
<style type="text/css">.entry-content svg{border:1px solid #999;}</style>

何だか最近フレームワークばかり触っていたので、色々読み込まないと行けないかと思ってましたが、ファイルは一つだけ。  
 また、描画するDOMを用意しておきます。

```html
<div id="canvas"></div>
<script type="text/html" src="path/to/raphael-min.js"></script>
```

最初に描画するコマンドを呼び出す前に描画するDOMの指定と、サイズを指定します。

```javascript
// Raphael( ID, width, height );
var paper = Raphael( "canvas", 300, 300 );
```


## パス（線）を描く

基本的に[SVG1.1](http://www.w3.org/TR/SVG/)を準拠した書き方のようです。が、[SVGのパスを描く記法](http://www.w3.org/TR/SVG/paths.html#PathData)が分かりづらい…。

「M」がmove to（座標位置を移動）、「L」がline to（現在地から指定位置まで線を引く）の様です。

<div id="raphael_canvas_path"></div>

```javascript
var path = paper.path( "M 10 10 L 90 90 M 90 10 L 10 90" );
```

<script type="text/javascript">var path_paper = Raphael( 'raphael_canvas_path', 100, 100 );
var path = path_paper.path( 'M 10 10 L 90 90 M 90 10 L 10 90' );</script>

この記述で、「x:10,y10に移動、そこからx:90,y:90まで線を引き、x:90,y:10に移動、そこからx:10,y:90まで線を引く」という指定になります。（日本語にしてもよく分からない…。）  
 単純に一本の線を引くだけなら、「M x1 y1 L x2 y2」という感じですね。

また、最後に「z」を置くとパスを閉じます。

<div id="raphael_canvas_path_z"></div>

```javascript
var path_z = paper.path( "M 50 10 L 10 90 L 90 90 z" );
```

<script type="text/javascript">var path_paper_z = Raphael( 'raphael_canvas_path_z', 100, 100 );
var path_z = path_paper_z.path( 'M 50 10 L 10 90 L 90 90 z' );</script>


## 円を描く

円はパスに比べるとかなり分かりやすいですね。

circle( x座標, y座標, 半径 )の様に指定します。

<div id="raphael_canvas_circle"></div>

```javascript
var circle = paper.circle( 50, 50, 25 );
```

<script type="text/javascript">var circle_paper = Raphael( 'raphael_canvas_circle', 100, 100 );
var circle = circle_paper.circle( 50, 50, 25 );</script>


## 矩形を描く

矩形もほぼ円と変わりません。

rect( x座標, y座標, 横幅, 縦幅 )の様に指定します。

<div id="raphael_canvas_rect"></div>

```javascript
var rect = paper.rect( 10, 30, 80, 40 );
```

<script type="text/javascript">var rect_paper = Raphael( 'raphael_canvas_rect', 100, 100 );
var rect = rect_paper.rect( 10, 30, 80, 40 );</script>


## 色を変更する

fillで塗り、strokeで線の色を変更できます。

<div id="raphael_canvas_color"></div>

```javascript
// 赤
var circle_red = paper.circle( 10, 50, 10 );
circle_red.attr( "fill", "#ff0000" );
// 緑
var circle_green = paper.circle( 50, 50, 10 );
circle_green.attr( "fill", "#00ff00" );
// 青
var circle_blue = paper.circle( 85, 50, 10 );
circle_blue.attr( "fill", "#0000ff" );
```

<script type="text/javascript">var color_paper = Raphael( 'raphael_canvas_color', 100, 100 );
var circle_red = color_paper.circle( 15, 50, 10 );
circle_red.attr( 'fill', '#ff0000' );
var circle_green = color_paper.circle( 50, 50, 10 );
circle_green.attr( 'fill', '#00ff00' );
var circle_blue = color_paper.circle( 85, 50, 10 );
circle_blue.attr( 'fill', '#0000ff' );</script>

描画のメソッドにチェーンメソッドで続けたり、attrに複数指定することも出来ます。

<div id="raphael_canvas_chain"></div>

```javascript
var circle_chain = paper.circle( 50, 50, 25 ).attr( { "fill":"#ff0000", "stroke":"#0000ff" } );
```

<script type="text/javascript">var chain_paper = Raphael( 'raphael_canvas_chain', 100, 100 );
var circle_chain = chain_paper.circle( 50, 50, 25 ).attr( { 'fill':'#ff0000', 'stroke':'#0000ff' } );</script>


## その他

Raphaëlの魅力は何といってもIE6からでも利用できる、という点だと思います。  
 正確にはSVGは対応していないので、VMLという形式を利用しているようです。

正直な所、IE6に力を入れるべきなのか迷う所ですが、利用できるに越したことはないですね。

その他、アニメーションやイベントのトリガーなどなど、色々な事が出来るようなので参考サイトを残しておきます。  
 自分でもまたちょこちょこと調べていきます、と書いたエントリーが溜まってきました…ガンバリマス。


## 参考サイト

- [Raphaël Reference](http://raphaeljs.com/reference.html)
- [svgをやりたいからRaphaëlを使ってみる – @blog.justoneplanet.info](http://blog.justoneplanet.info/2010/07/19/svg%E3%82%92%E3%82%84%E3%82%8A%E3%81%9F%E3%81%84%E3%81%8B%E3%82%89raphael%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B/)
- [Scalable Vector Graphics (SVG) 1.1 (Second Edition)](http://www.w3.org/TR/SVG/)

「Raphaël」を使ってSVGによる図を描いてみた


なんだか名前を良く聞くような気がする[Backbone.js](http://backbonejs.org/)を一度触ってみたかったので、Twitterの仕様が変わってタイムラインが取得できなくなった[自サイト](http://sus-happy.net/)に組み込んでみました。

中でもpjaxが出来るとかなんとか聞いたので、その辺りを中心に試しています。むしろそれ以外は別にBackbone.jsじゃなくても良いくらいの状態なので、少しずつ試していこうかと思います。


## Backbone.jsを使う準備

Backbone.jsは単体で動くわけではないみたいなので、下記ライブラリを用意しました。

- [Backbone.js](http://backbonejs.org/)
- [Underscore.js](http://underscorejs.org/)
- [jQuery](http://jquery.com/)

jQueryの代わりに[Zepto.js](http://zeptojs.com/)でも良いのですが、IE非対応みたいなので、一応jQueryにしました。


## Backbone.RouterとBackbone.history

Backbone.jsでpjaxを実装するためにはBackbone.RouterとBackbone.historyを利用します。

Backbone.RouterはURLの変更を監視してイベントを実行し、その裏処理をBackbone.historyで行なっているみたいです。

### イベントを実行するURLの指定

まず、どんなURLでアクセスされた時にアクションを起こすのか指定します。

```javascript
var Router = Backbone.Router.extends( {
	routes : {
		'' : 'index',
		'/about/' : 'about',
		'/contact/' : 'contact'
	},
	'index' : function( page ) {
		// http://example.com/ へのリンク時
	},
	'about' : function( page ) {
		// http://example.com/about/ へのリンク時
	},
	'contact' : function( page ) {
		// http://example.com/contact/ へのリンク時
	}
} );
```

これで、3ページ分用意できました。それぞれ、「/」「/about/」「/contact/」にURLが変更された時にイベントが実行されます。

また、このままではpushState、popStateが有効化されていませんので、Background.historyを利用して有効化します。

### pushState / popStateの有効化

Background.historyは下記一行の指定だけです。

```javascript
Backbone.history.start( { 'pushState' : true } );
```

一行だけ、素敵、便利。

### Backbone.Router.navigateの指定

最後にURLを変更する処理を追加します。  
 Backbone.Router.navigateを利用することで、pushStateを利用したURLの変更を行うことが出来ます。

```javascript
var R = new Router();
$('nav li a').click( function() {
	R.navigate( $(this).attr('href'), true );
	return false;
} );
```

これで、戻る/進むでイベントが実行されるようになりました。

### その他URL指定の方法

また、ページの指定の所で、下記のようにURLを変数として持たせることも出来るみたいです。

```javascript
var Router = Backbone.Router.extends( {
	routes : {
		'' : 'index',
		'/alert/:message' : 'about',
		'/contact/' : 'contact'
	},
	'alert' : function( message ) {
		alert( message );
		// http://example.com/alert/hogehoge にリンクすると、
		// 「hogehoge」とダイアログが出ます
	}
} );
```

サーバサイドのフレームワークみたいな動きも出来そうですね。

### コンテンツの取得

URLが変わったときに内容も変更させたいので、jQuery.loadを使ってコンテンツを取得するように追記します。


```javascript
var Router = Backbone.Router.extends( {
	routes : {
		'' : 'index',
		'/about/' : 'about',
		'/contact/' : 'contact'
	},
	'index' : function( page ) {
		// http://example.com/ へのリンク時
		$('#contents').load( '/' );
	},
	'about' : function( page ) {
		// http://example.com/about/ へのリンク時
		$('#contents').load( '/about/' );
	},
	'contact' : function( page ) {
		// http://example.com/contact/ へのリンク時
		$('#contents').load( '/contact/' );
	}
} );
```

ここまででpushStateを用いたページ切り替えが実装出来ました。

ただ、JavaScriptを無効化されていた場合を考えて、通常のアクセスの場合は全コンテンツを、pjax経由の場合は内容だけ取得できるようにPHPと連携させてみました。


## PHPとの連携

jquery-pjaxの場合は、headerやGET要素に自動的に特定の値が渡されるので、その値で判定すれば良かったのですが、Backbone.jsを使ったpjaxではコンテンツを取得する処理は別なので、自動的に付与されません。

ということで、手動で付与しました。  
 上の記述にもう少し追記して`$_POST['_pjax']=true`を追加します。

```javascript
var Router = Backbone.Router.extends( {
	routes : {
		'' : 'index',
		'/about/' : 'about',
		'/contact/' : 'contact'
	},
	'index' : function( page ) {
		// http://example.com/ へのリンク時
		$('#contents').load( '/', {'_pjax':'true'} );
	},
	// 省略
} );
```

後は、PHP側で`$_POST['_pjax']=true`の判定をするだけです。

```php
<?php
if( $_POST['_pjax'] !== 'true' ) {
	// ヘッダ部を出力
	get_header();
}

// コンテンツ部を出力
get_contents();

if( $_POST['_pjax'] !== 'true' ) {
	// フッタ部を出力
	get_footer();
}
```

これでpushStateが対応していないブラウザや、JavaScriptが無効化されていたとしても正常に表示されるはずです。


## 雑感

実は前に少し試そうかと思ってリファレンスを見て挫折していたのですが、いざ触ってみると思っていたよりもすんなり動作しました。

ちょっとした処理でもサクッと導入できるのは、大規模なフレームワークでは出来ない感じがして気持ちいですね。

まだまだほんの少ししか触っていないため、もっと魅力的な機能が色々とあるかと思いますので色々と試してみようと思います。


## 参考

- [Backbone.js](http://backbonejs.org/)
- [kennyjのブログ(仮): backbone.jsがいつのまにかpjax対応していた](http://kennyj-jp.blogspot.jp/2011/07/backbonejspjax.html)

Backbone.jsのpjaxを試してみた



[以前jQueryライブラリとして公開](http://blog.sus-happy.net/201112/sp-google-maps-jquery/)していましたが、そもそもスマホサイトでjQueryを読み込むこと自体が重荷のように感じたので、ネイティブのライブラリを作ってみました。

ただ、ちょっと実機の実験がiOS6の純正ブラウザのみしか出来ていないので、他のデバイスで動くか心配です。


## 変更点

変換する時に1KB程度増加しましたが、jQueryそのものが要らなくなるので、90KB程度削減できたと考えられます。

実行時の関数が少し変わっています。詳細はGitHubをご覧ください。


## デモ

~~デモページ（スマートフォンでご覧ください）~~ はこちらから

[ダウンロード（GitHub）](https://github.com/sushat4692/SPGMaps.js)




スマホ用の下からニュッとGoogleマップを表示するJavaScriptライブラリ


とある案件で、JavaScript（jQuery）を利用してセレクトボックスの数を変動させて、場合によっては追加した要素をそのまま選択状態にしたかったのですが、IE6でエラーが発生してしまうという事例が発生してしまったので、メモ代わりに残しておきます。


## 発生事例

まずは、エラーが起きてしまった時の記述について。

```javascript
var val = "foo", text = "bar";
$("#select").append($("<option>", {"value":val, "text":text})).val(val);
```

この記述でも基本的には問題ないのですが、IE6ではエラーが発生してしまいます。

エラーの内容としては存在しないデータを設定しようとしているため云々、という事みたいなので描画順が影響している？との事ですが、どうなんでしょう。


## 改善策

参考サイトに改善策が色々載っていたので列挙しておきます。

setTimeoutを利用

```javascript
var val = "foo", text = "bar";
$("#select").append($("<option>", {"value":val, "text":text}));
setTimeout( function() {
	$("#select").val(val);
}, 0 );
```

.clone()を利用

```javascript
var val = "foo", text = "bar";
$("#select").append($("<option>", {"value":val, "text":text}));
$("#select").after($("#select").clone()).remove();
$("#select").val(val);
```

.width()を利用

```javascript
var val = "foo", text = "bar";
$("#select").append($("<option>", {"value":val, "text":text})).width();
$("#select").val(val);
```

.focus()を利用

```javascript
var val = "foo", text = "bar";
$("#select").append($("<option>", {"value":val, "text":text})).focus();
$("#select").val(val);
```

全てappendした後に何か処理を挟む、という方法を取っている様ですね。描画順が狂わないように挟む、と言う感じでしょうか。

どんな時でも動きそうなのはsetTimeoutの様な気がしますが、プログラムとしての順番が信用できなくなりそうですね。  
 どれが一番良いのかな？うーん。


## 参考

- [jQueryを使うときに気をつけるべき8のポイント | tech.kayac.com – KAYAC engineers' blog](http://tech.kayac.com/archive/jquery-checkpoints.html)
- [jQueryでoption要素を追加した際の諸問題 – むつらつれづれ](http://d.hatena.ne.jp/x6x6/20080318/1205817536)

JavaScriptで追加したoption要素を選択状態にしたい時にIE6に阻まれた時の対処


Ajaxを利用しつつ、戻る・進むリンクが効くような作りで、Twitterと同じようにHashchangeイベントを使ったことがあったのですが、HTML5ならpushstateを覚えなくては―と思っていた頃に[この記事](http://d.hatena.ne.jp/punitan/20110404/1301895279)を読んでjquery-pjaxの存在を知りました。

また、ちょっとしたコードをメモして置く場所が欲しかったので、WordPressと組み合わせてスニペット集を作ってみました。

こんな感じです » ~~Snippets | SUSH-i LOG~~

まだまだ分類分けが中途半端だったり、導線が不十分だったり、ブラウザの進む・戻るを使った時に少し不具合がありますが、何とか形になったかな？と思っています。


## クライアントサイド

ソースファイルは、[defunkt/jquery-pjax – GitHub](https://github.com/defunkt/jquery-pjax)からダウンロードできます。

クライアントサイドの記述方法は参考リンク先でもご紹介されていますが、こんな感じ。

```javascript
$('.pjax-cont').pjax('#wrap', { complete: function() {
	prettyPrint();
	gapi.plusone.go();
	FB.init({appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true});
} });
```

で書いていたのですが、`pjax:end`にbindすると、ブラウザの進む・戻るの際にも読み込み完了時にフックされるので以下の書き方の方が良いかと思います。

```javascript
$('.pjax-cont').pjax('#wrap');
$("#wrap").bind("pjax:end", function() {
	prettyPrint();
	gapi.plusone.go();
	FB.init({appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true});
} );
```

また、今回スニペット集を作る時に、ソーシャルボタンや、google-code-prettifyを使っていたので、読み込み完了時に各初期化関数を呼んでいます。


## サーバサイド

今度はWordPressのテーマファイルに追記していきます。

jquery-pjaxで呼ばれると、HTTPヘッダに`X-PJAX: true`が追加されるので、そちらを利用します。

```javascript
$header = getallheaders();
if(! $header["X-PJAX"] )
	get_header("snippets");
```

こんな感じで、HTTPヘッダにX-PJAXが存在しない時だけヘッダやフッタを呼び出しているようにしています。

ただし、このままだと`wp_head`や`wp_footer`が呼ばれないような作りのテンプレートが通常だと思うので、必要とあらば適宜呼び出すようにしてください。

pushstateが使えないブラウザでは通常のリンクとして、使うことのできるモダンブラウザはAjaxを利用するように自動的に判別してくれるのも嬉しいですね。


## 参考

- [pjax こそが pushState + Ajax の本命 – punitan (a.k.a. punytan) のメモ](http://d.hatena.ne.jp/punitan/20110404/1301895279)


## 追記 12/02/21

jquery-pjaxの扱い方が微妙だったので修正しました。

`complete`を利用するより、`pjax:end`を使った方がブラウザの進む・戻るにも対応しているのでそちらの追記をしています。

その代わりに今度はTweetボタンとはてブボタンがおかしくなってしまいました･･･。調査します･･･。


jquery-pjax + WordPressでスニペット集を作ってみた


バラバラのJavaScriptいっぱい読み込むときに、最近のモダンブラウザは「async」属性を使えばバックグラウンドで読んでくれるそうなのですが、そうでない環境では非同期通信を使って読むと早くなる、とかいう記事を見かけたことがあったので作ってみました。


## デモ

まずは、通常の呼び出し、defer属性、async属性、非同期ローダーを使った呼び出しのそれぞれのデモを置いておきます。
 初めにjqueryと、ダミーのテキストをコメントアウトして無理やりファイルサイズを大きくした10個のJSファイルを呼び出しています。

※同じJavaScriptを呼び出しているので、キャッシュを削除してから次のデモを見ると比較しやすいと思います。

- ~~デモ（何もなしなHTML記述）~~
- ~~デモ（deferなHTML記述）~~
- ~~デモ（asyncなHTML記述）~~
- ~~デモ（非同期ローダーを利用）~~

それぞれ特徴があって面白い動きをしますね。

async属性を利用した場合は、順番が読み込まれた順になるのが気に食わないのですが、JavaScriptの作り自体の問題な気がします…精進します。

続きで実装方法と、詰まったところをだらだらと流しておきます。


## 非同期通信

XMLHttpRequestを利用して非同期通信をしています。そのためローカル環境での実行が出来ないのがデメリットです。


## 実行処理

[こちらのページ](http://fdays.blogspot.com/2010/05/javascript-script.html)を参考に読み込み完了後、実行する際はinnerHTMLで実行しようとしたのですが、Mac Safari4でエラーが発生しました。
 失敗したときのコードはこんな感じ。

```javascript
var s = document.createElement('script');
s.type = 'text/javascript';
s.charset = 'utf-8';
s.innerHTML = scr;
s.setAttribute('defer', 'defer');
var cs = document.getElementsByTagName('script')[0];
cs.parentNode.insertBefore(s, cs);
```

原因は恐らくJS内の不等号や、HTMLの記述で、HTMLデータと誤認識したのかな？と思っています。

そこで、HTMLデータと認識させない様にcreateTextNodeを使ってscriptタグに挿入しています。
 成功したときのコードはこんな感じ。

```javascript
var s = document.createElement('script');
s.type = 'text/javascript';
s.charset = 'utf-8';
s.appendChild(document.createTextNode(scr));
s.setAttribute('defer', 'defer');
var cs = document.getElementsByTagName('script')[0];
cs.parentNode.insertBefore(s, cs);
```


## IEの場合

IE6～8では上記の読み込み方法では実行されず、IE9では順番がバラバラになってしまいましたので、[こちらの方法](http://d.hatena.ne.jp/shogo4405/20061207/1165479339)を参考に下記の通りに読み込んでいます。

```javascript
var s = document.createElement("span");
s.innerHTML = "&nbsp;<script defer='defer' type='text/javascript'>"+scr+"</script>";
document.body.appendChild(s);
```

ただし、 を頭に配置しているので、空白が表示されてしまいます。


## IEの判別

IE以外は最初の方法で実行させたいので、IEの判別をIEのみ実装されている「document.uniqueID」で振り分けています。

```javascript
if( document.uniqueID ) {
	/* IE */
} else {
	/* IE以外 */
}
```


## ソースコード

GitHubにアップしましたので、下記リンクよりダウンロード出来ます。

[ダウンロード（GitHub）](https://github.com/sushat4692/parallel-loader.js)

ただ、あまり検証はしていないので業務に利用するのはお勧めしません。


## 参考

- [floatingdays: JavaScriptによって動的に script要素を追加する場合のブラウザごとの挙動の違い](http://fdays.blogspot.com/2010/05/javascript-script.html)
- [innerHTMLでscriptする – Thousand Years](http://d.hatena.ne.jp/shogo4405/20061207/1165479339)


## 追記 2012/01/30

「実行処理」内のソースで記述を間違えておりました。申し訳ありません。
 “currentscript” -> “is”

また、「is」という変数名もなんだか怪しい気がする（予約語になりそう）ので、「cs」に変更しました。


JavaScript非同期ローダーを試しに作ってみた


スマートフォン用のサイトを作る場合は、[jQuery Mobile](http://jquerymobile.com/)やら、[jQTouch](http://jqtouch.com/)やら、[Sencha Touch](http://www.sencha.com/products/touch/)やら色々ありますが、ちょっとそこまで必要ないときに、スマートフォン特有のイベントをjQueryを使って扱えないか触ってみました。


## スマホ特有のイベント

スマホ特有のイベントは幾つかありますが、今回は特に使われるであろうタッチ、スライド、ピンチイン、ピンチアウトに重点を置いて調べてみました。

上記操作に必要なイベントは以下の通りです。

- touchstart
- touchmove
- touchend
- touchcancel
- gesturestart
- gesturechange
- gestureend

「touch\*\*\*」というイベントが画面に指でタッチした、している時のイベント、「gesture\*\*\*」というイベントが「二本指以上」の操作（ピンチイン、ピンチアウト、回転等）を行っている時のイベント、と考えていただければ良いかと思います。

また、「touch\*\*\*」は一本指だけでなく、二本指以上の操作でも実行されるため、今何本の指が画面上にタッチされているかを確認しながら動作する必要があります。


## イベントの実行される流れ

### 一本指での操作の場合

一本指だけのイベント進行は単純で以下のように進行していきます。

<dl><dt>1.touchstart</dt><dd>指が画面をタッチした時に実行</dd><dt>2.touchmove</dt><dd>タッチした指を画面上で動かした時に実行</dd><dt>3.touchend</dt><dd>画面上から指を離した時に実行</dd></dl>マウスイベントとほとんど変わらないと思います。

### 二本指での操作の場合

二本指が画面上にタッチされた時は少し特殊で、以下のような順番でイベントが進行します。

<dl><dt>1.touchstart</dt><dd>一本目の指が画面をタッチした時に実行</dd><dt>2.gesturestart</dt><dd>二本目の指が画面をタッチした時に実行</dd><dt>3.touchstart</dt><dd>gesturestartの後に実行</dd><dt>4.gesturechange</dt><dd>タッチした指を画面上で動かした時に実行</dd><dt>5.touchmove</dt><dd>gesturechangeの後に実行</dd><dt>6.gestureend</dt><dd>指を一本画面から離した時に実行</dd><dt>7.touchend</dt><dd>gestureendの後に実行</dd><dt>8.touchend</dt><dd>もう一本の指を画面から離した時に実行</dd></dl>何れかの指が画面にタッチした時、離した時に毎回touchイベントが実行されます。  
 また、二本タッチされている時は同時にgestureイベントも実行されるのですが、その際はgestureイベントが優先される様です。


## イベント実行時に得られる値

イベント実行時に得られる値も、「`touch***`」と「`gesture***`」で異なります。

### touchイベント

主に画面を触っている指の数や、位置を取得することが可能です。

```javascript
function touchHandler( event ) {
	// 画面を触っている指の本数だけ配列で渡されます
	var touches = event.touches;
	// 一本目の指の位置取得
	alert( "x = " + touches[0].pageX + " / y = " + touches[0].pageY );
}
```

### gestureイベント

主にピンチインなどの動作によって変化した値を取得することが可能です。

```javascript
function gestureHandler( event ) {
	// ピンチインによる拡大率
	var scale = event.scale;
	// 回転角度
	var rotate = event.rotation;
	alert( "scale = " + scale + " / rotetion = " + rotate );
}
```


## jQueryで利用する際の注意点

jQueryのbindを持ちいてイベントを実行した場合、上記値の読み方が若干変わります。

addEventListenerを用いた方法では以下のように記述しますが。

```javascript
document.getElementsById("touch").addEventListener("touchstart", touchHandler, false);
function touchHandler( event ) {
	alert( event.touches[0].pageX );
}
```

jQueryを用いた場合は、引数にtouchesが与えられておらず、さらに「originalEvent」内から取得する必要があります。  
 上のコードをjQueryで記述すると以下のようになります。

```javascript
$("#touch").bind("touchstart", touchHandler);
function touchHandler( event ) {
	alert( event.originalEvent.touches[0].pageX );
}
```

詳しくは調べていませんが、引数のeventはjQuery内で生成した変数、originalEventがaddEventListenerで渡されている値と同等なのかな？と思っています。

また、touchイベントはiPhone、Andoroidで動作確認できましたが、gestureイベントはAndroidで動作しません。  
 その他動作環境については、[こちらのページにまとめられている](http://www.lukew.com/ff/entry.asp?1071)ようなので、参考にしようかと思います。


## 参考サイト

- [GestureEvent Class Reference](http://developer.apple.com/library/safari/#documentation/UserExperience/Reference/GestureEventClassReference/GestureEvent/GestureEvent.html#//apple_ref/javascript/cl/GestureEvent)
- [iPhone/SafariでjQueryを使ったイベントのバインドにおける注意点 : nogunogu](http://dev.worksap.co.jp/Members/nogunogu/2010/08/17/iphonesafari%E3%81%A7jquery%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%AE%E3%83%90%E3%82%A4%E3%83%B3%E3%83%89%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B%E6%B3%A8%E6%84%8F/)
- [LukeW | Touch Gesture Reference Guide](http://www.lukew.com/ff/entry.asp?1071)

jQueryを使ってスマートフォン用のイベントを扱ってみた


javascriptをページ毎に違う変数を渡したいと思ったときに、読み込むscriptタグの前に、グローバル変数で定義する方法が一般的だと思いますが、もうちょっとスマートな方法が無いか探していました。

そこで、Google+1の埋め込みタグを見ていると、以下のようになっているのに気づきました。

```html
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">{lang: 'ja'}</script>
```

ファイルを読み込むscriptタグ内に言語を特定する変数を直接記入しているようで、この方法が良さそうだと思い、同じ方法か分かりませんが自分でも試してみました。


## 自身のscript要素を取得する

最初に、HTMLタグ内に記入したところで、JavaScript上のどの変数にも渡されている訳ではない様なので、自分自身のscriptタグを取得する方法を探しました。

ファイル名をJSファイル内に埋め込んでgetElementsByTagNameで取得したscriptタグ一つ一つと照合していましたが、[とてもシンプルに自分自身が属する script 要素を取得 – IT戦記](http://d.hatena.ne.jp/amachang/20061201/1164986067)という記事を発見したので、こちらを参考にさせていただきました。


## HTMLに記述された情報をJavaScript内で利用できるようにする

そして、scriptタグ内のテキストはinnerHTMLで取得できますので、このデータをevalで取得します。

Google+1の様なJSON形式の場合は、eval内でも括弧で括った方が良いみたいです。


## サンプルコード

まず、以上を踏まえて出来上がったJavaScriptファイルはこんな感じ。

```javascript
var currentScript = (function (e) { if(e.nodeName.toLowerCase() == 'script') return e; return arguments.callee(e.lastChild) })(document);
var data = eval("("+currentScript.innerHTML+")");
```

そして、HTML側で上記JSファイル（get.js）を以下の様に読み込みます。

```html
<script type="text/javascript" src="get.js">{foo:'var'}</script>
```

すると、JavaScript内の変数「data」にfoo:varという値が代入されるはずです。

ページ毎に少しずつ与える値を変える場合や、Google+1のようにAPI的に使う場合に使えそうな気がします。

Google+1風にJavaScriptに渡す変数をページ毎に変更する



- 2010年12月23日、修正を行いました。

ブログではなくて、トップページに使ってみようと作ってみた正方形の要素を敷き詰めるｊQueryライブラリを作ってみたので公開してみようかと思います。

オプションで、一つの正方形のサイズ、隣の要素との間隔等などの設定が可能です。

使い方はこんな感じ。

```javascript
$("#hoge").square();
```

上の記述で、「hoge」というidの付いた要素に適用されます。

[デモはこちら](http://demo.sus-happy.net/javascript/square/)

[ダウンロード（名前をつけて保存）](http://demo.sus-happy.net/javascript/square/js/jquery.square.js)

以下は詳細説明。


## 関数概要

`{target}.alphaRo({option});`

<dl><dt>{target}</dt><dd>適用する対象</dd><dt>{option}</dt><dd><dl><dt>[target](string) = square</dt><dd>敷き詰める要素のクラス名</dd><dt>[inner](string) = inner</dt><dd>敷き詰める要素と同じ高さにしたいクラス名</dd><dt>[scaleSplit](string) = _</dt><dd>要素一つの大きさを決める間の文字列（_x_y）  
 デフォルトでは「square _2」で2倍のサイズ、  
 「square _1_2」で縦長の長方形になります</dd><dt>[size](number) = 150</dt><dd>正方形一つの基本サイズ</dd><dt>[space](number) = 10</dt><dd>正方形と正方形の間隔</dd><dt>[speed](*) = 700</dt><dd>アニメーションの速度  
 （slow, normal, fastの三段階、もしくはミリ秒）</dd><dt>[ease](string) = easeOutQuad</dt><dd>イージングの種類  
 （<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing Plugin</a>が必要です）</dd></dl></dd></dl>
## サンプルコード

スタンダード

```javascript
$("a.sample01").square();
```

正方形のサイズ変更

```javascript
$("a.sample02").square({size:200});
```

アニメーション速度変更

```javascript
$("a.sample03″).square({speed:"fast"});
```


正方形の要素を敷き詰めるjQueryライブラリ – jquery.square.js


ブログで更新を行ったものをRSSを利用して読み込む際に、サーバが別でもJavaScriptのみで実現できるので、何回か使ったことがあるのですが、毎度毎度HTMLの構成が変わったりしたので読み込みのJSを書き換えていました。

もう少し便利に使えないかな？と、jQueryを用いて汎用性高める目的で作ってみました。


## 関数概要

`{target}.gRssFeed({url}, {num}, {option});`

<dl><dt>{target}</dt><dd>適用する対象</dd><dt>{url}</dt><dd>読み込むRSSのURL</dd><dt>{num}</dt><dd>表示させるエントリー数</dd><dt>{option}</dt><dd><dl><dt>[bdate](string) = "&lt;li&gt;"</dt><dd>日付の前に挿入する文字列</dd><dt>[edate](string) = ""</dt><dd>日付の後に挿入する文字列</dd><dt>[btitle](string) = ""</dt><dd>エントリータイトルの前に挿入する文字列</dd><dt>[etitle](string) = "&lt;li&gt;"</dt><dd>エントリータイトルの後に挿入する文字列</dd><dt>[etitle](dformat) = "y/m/d"</dt><dd>日付のフォーマット
 y:年、m:月、d:日にそれぞれ置き換えられる</dd></dl></dd></dl>

## サンプルコード

スタンダード

```html
<ul id="liRss"></ul>
```

```javascript
$("#liRss").gRssFeed( "http://blog.sus-happy.net/feed/", 5 );
```

表組みで表示

```html
<table id="tableRss"></table>
```

```javascript
$("#tableRss").gRssFeed( "http://blog.sus-happy.net/feed/", 5, { bdate:"<tr><th>", edate:"</th>", btitle:"<td>", etitle:"</td></tr>" } );
```

定義済みリストで表示

```html
<dl id="dlRss"></dl>
```

```javascript
$("#dlRss").gRssFeed( "http://blog.sus-happy.net/feed/", 5, { bdate:"<dt>", edate:"</dt>", btitle:"<dd>", etitle:"</dd>" } );
```

日付フォーマットの変更

```javascript
$("#dateRss").gRssFeed( "http://blog.sus-happy.net/feed/", 5, { dformat:"y年m月d日" } );
```


## ソースコード

```javascript
google.load("feeds", "1");
function initialize() {
    /* -------------
        ここに読み込み設定を記述する
    ------------- */
}
jQuery.fn.extend({
    gRssFeed : function( url, num, opt) {
        var tgt = $(this);

        if( !opt ) opt = new Object();
        var _bd = opt.bdate!=null ? opt.bdate : "<li>";
        var _ed = opt.edate!=null ? opt.edate : "&nbsp;";
        var _bt = opt.btitle!=null ? opt.btitle : "";
        var _et = opt.etitle!=null ? opt.etitle : "</li>";
        var _df = opt.dformat!=null ? opt.dformat : "y/m/d";
        var feed = new google.feeds.Feed(url);
        feed.setNumEntries(num);
        feed.load(function(result) {
            if (!result.error) {
                tgt.each( function() {
                    for (var i = 0; i < result.feed.entries.length; i++) {
                        var entry = result.feed.entries[i];

                        var d_d = new Date(entry.publishedDate);
                        var year = d_d.getYear();
                        if (year < 2000) year += 1900;
                        var month = zeroFiller(d_d.getMonth()+1);
                        var day = zeroFiller(d_d.getDate());
                        var dateTxt = _bd+_df.replace("y", year).replace("m", month).replace("d", day)+_ed;

                        var anchorTxt = _bt+'<a href="'+entry.link+'" target="_blank">'+entry.title+'</a>'+_et;
                        $(this).append(dateTxt+anchorTxt);
                    }
                } );
            }
        } );
    }
});
google.setOnLoadCallback(initialize);

function zeroFiller(num) {
    num = num+"";
    return num.length < 2 ? '0'+num : num;
}
```


Google AJAX Feed API用のjQuery独自関数


一年以上前に公開されていたらしいのですが、今更ながらGoogleMap APIのV3の存在を知ったので試してみました。


## V3での主な変更点

V2からV3へとバージョンアップに伴い、以下のような変更・改善点があります。

<dl><dt>API Keyが不要になった</dt><dd>URL毎に発行していたAPI Keyが不要となりました。開発者側にとっては結構うれしいことです。</dd><dt>スマートフォンへの対応がなされた</dt><dd>携帯端末用に表示速度が改善され、またGPS機能との連動が可能となりました。</dd><dt>JavaScriptの記述方法が変更された</dt><dd>V2に比べてJavaScriptの記述方法に変更があったようです。</dd></dl>

## テストコード

まずHTML側に地図を表示させるdiv要素を配置します。

```html
<div id="gmap"></div>
```

地図を表示させる基本のコードは以下のとおりです。

```javascript
google.maps.event.addDomListener(window, 'load', function() {
	var mapdiv = document.getElementById('gmap');
	var initPosition = {
		zoom: 14,
		center: new google.maps.LatLng(35.17073004594335, 136.9),
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		scaleControl: true,
	};
	var map = new google.maps.Map(mapdiv, initPosition);
});
```

マーカーを表示させるには以下のコードを追加します。

```javascript
var marker = new google.maps.Marker({
	position: new google.maps.LatLng(35.17073004594335, 136.8816876411438),
	map: map,
	title: '名古屋駅'
});
```

情報ウィンドウを表示するのはこちらのコードです。

```javascript
var infoWindow = new google.maps.InfoWindow({
	content: '名古屋駅'
});
infoWindow.open(map, marker);
```

また、V3より複数の情報ウィンドウを表示させることが可能になり、こちらの[デモページ](http://demo.sus-happy.net/javascript/gmap3/)の様な表現も出来るようになりました。

デモページで使っているJavaScriptのコードは以下のとおりです。

```javascript
google.maps.event.addDomListener(window, 'load', function() {
    var mapdiv = document.getElementById('gmap');
    var initPosition = {
        zoom: 14,
        center: new google.maps.LatLng(35.17073004594335, 136.9),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: true,
    };
    var map = new google.maps.Map(mapdiv, initPosition);

    var marker = new Array();
    var infoWindow = new Array();

    marker.push( new google.maps.Marker({
        position: new google.maps.LatLng(35.17073004594335, 136.8816876411438),
        map: map,
        title: '名古屋駅'
    }) );
    infoWindow.push( new google.maps.InfoWindow({
        content: '名古屋駅'
    }) );

    marker.push( new google.maps.Marker({
        position: new google.maps.LatLng(35.170798014746985, 136.92037045955658),
        map: map,
        title: '新栄町'
    }) );
    infoWindow.push( new google.maps.InfoWindow({
        content: '新栄町'
    }) );

    for(var i=0; i<marker.length; i++) {
        infoWindow[i].open(map, marker[i]);
    }
});
```

Google Map API V3を試してみた


FlashからHTMLへのアクションを起こしたり、その逆を実現するために、間にJavaScriptをかませる方法を取っています。

しかし、何回かやってみても毎回調べなおしをしている気がするので、ここに書いておくことで、また調べる時には簡単に見直すことが出来るようにしたいと思います。


## FlashからJavaScriptを実行

Flashのボタンをクリックした時にJavaScriptを実行するなど、Flash側からJavaScriptを実行させるためには、Flashから実行されるJavaScriptの関数の用意と、ActionScriptに用意したJavaScriptの関数を呼び出す記述を行います。

まずはJavaScriptに関数を用意します。ここでの注意点は特にありません。

```javascript
function hoge() {
	alert("done");
}
```

次に用意したJavaScriptの関数を呼び出すActionScriptを記述します。

```actionscript
button_mc.addEventListener(MouseEvent.CLICK, buttonClickHandler);
function buttonClickHandler(e:MouseEvent):void {
	ExternalInterface.call("hoge");
```


これで「button_mc」というムービークリップをクリックしたときに、ダイアラグボックスで「done」と表示されます。

また、FlashからJavaScriptを呼び出す際、関数名の後に続けて値を入れることで、JavaScriptに値を渡すことが可能です。

```actionscript
ExternalInterface.call("huga", variable);
```


## JavaScriptからFlashを実行

手順はまったく逆で、Flash側に呼び出される関数を用意し、JavaScriptにFlashの関数を呼び出す記述をおこなうのですが、FlashからJavaScriptに比べて少し大変です。

まずFlash側にActionScriptで呼び出される関数を用意します。

```actionscript
ExternalInterface.addCallback("callFlash", hoge);
function hoge():void {
	trace("done");
```

また、ここで作成したFlashをHTMLに貼る時に少し注意が必要です。

objectとembedにidかnameを指定し、allowScriptAccessに”always”を指定しないといけません。

```html
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
	codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
	width="550" height="400" id="swf_obj" align="middle">
	<param name="allowScriptAccess" value="always" />
	<param name="movie" value="hoge.swf" />
	<param name="quality" value="high" />
	<param name="bgcolor" value="#ffffff" />
	<embed src="hoge.swf"
		quality="high" bgcolor="#ffffff" width="550" height="400"
		id="swf_embed" align="middle" allowScriptAccess="always"
		type="application/x-shockwave-flash"
		pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
```

次に、JavaScriptにFlash側の関数を呼び出す記述を行います。

```javascript
var fuga = document.getElementById("fuga");
fuga.onclick = function() {
	var tgt;
	if (navigator.appName.indexOf("Microsoft") != -1)
		tgt = document.getElementById("swf_embed");
	else
		tgt = document.getElementById("swf_obj");
	tgt.callFlash();
}
```

これでidに「fuga」と付いている要素をクリックすることで（表示できませんが）traceで「done」と表示されるはずです。

FlashとJavaScriptを連動させてみる


何番煎じになるかどうかわかりませんが、自分でも透明度を操作して、ロールオーバーを表現するプラグインを作ってみました。

オプションで、ロールオーバー前の透明度、ロールオーバー後の透明度、フェードアニメーションの有無、フェードありならフェードするスピードの設定が可能です。

使い方はこんな感じ。

```javascript
$("#hoge").alphaRo();
```

上の記述で、「hoge」というidの付いた要素に適用されます。

以下は詳細説明。


## 関数概要

`{target}.alphaRo({option});`

<dl><dt>{target}</dt><dd>適用する対象</dd><dt>{option}</dt><dd><dl><dt>[from](number) = 1</dt><dd>ロールオーバー前の透明度</dd><dt>[to](number) = 0.8</dt><dd>ロールオーバー前の透明度</dd><dt>[fade](boolean) = false</dt><dd>ロールオーバー前の透明度</dd><dt>[speed](*) = normal</dt><dd>アニメーションの速度  
 （slow, normal, fastの三段階、もしくはミリ秒）</dd></dl></dd></dl>
## サンプルコード

スタンダード

```javascript
$("a.sample01").alphaRo();
```

フェードアニメーション

```javascript
$("a.sample02").alphaRo({fade:true});
```

アニメーション速度変更

```javascript
$("a.sample03").alphaRo({fade:true,speed:"fast"});
```

透明度変更

```javascript
$("a.sample04").alphaRo({from:0.5,to:1,fade:true});
```

グループ化

rel属性に同じ値を付けると同時に適用されます

```html
<a href="#" rel="group" class="sample05"><img src="img/btn.jpg" alt="test" border="0" /></a>
<a href="#" rel="group" class="sample05"><img src="img/btn.jpg" alt="test" border="0" /></a>
```

```javascript
$("a.sample05").alphaRo();
```

全体のコードもそれほど長くないのでペタリ。

```javascript
jQuery.fn.extend({
	alphaRo : function(opt) {
		if( !opt ) opt = new Object();
		var _from = opt.from!=null ? opt.from : 1;
		var _to = opt.to!=null ? opt.to : 0.8;
		var _f = opt.fade!=null ? opt.fade : false;
		var _s = opt.speed!=null ? opt.speed : "normal";
		$(this).css({"opacity":_from, display:"inline-block"}).bind("mouseenter", {toNum:_to}, toOpacity).bind("mouseleave", {toNum:_from}, toOpacity);
		function toOpacity(event) {
			var tgt = $(this);
			var rel = tgt.attr('rel');
			if( rel ) {
				tgt = $("*[rel='"+rel+"']");
			}
			( _f ) ? tgt.queue([]).fadeTo(_s, event.data.toNum) : tgt.css("opacity", event.data.toNum);
		}
		return $(this);
	}
});
```

jQueryを利用した透明度の変化でロールオーバーを表現するプラグイン


現在、JavaScriptの案件が入ったときには、JavaScriptのフレームワークの一つであるjQueryで開発を行っています。

セレクタの表現がCSSと同じ記述方法で良く、多彩な効果が用意されているので、JavaScriptを使ったことのない人でも、比較的取り組みやすいように感じます。

今回は、jQueryで開発を行うときに、毎度同じ様な記述をすることがあったので、備忘録も兼ねて色々まとめておく事にしました。


## hover()の処理をunbindしたい

ロールオーバーの表現に良く使う`hover()`ですが、`mouseover`と`mouseout`を割り当てているわけではなく、`mouseenter`と`mouseleave`が当てられているため、`unbind`を行う際は以下の様に記述します。

```javascript
$('#hoge').unbind('mouseenter').unbind('mouseleave');
```


## JavaScript中で使う画像を事前に読み込みたい

処理を実行する前に画像を読み込んでおく事で、後の処理を軽くするために利用します。

主にロールオーバーをjQueryで制御する際に、マウスオーバーして直ぐに画像が切り替わらない事が気になったので、事前に読み込んでおく事で直ぐに切り替わらせるために使っています。

方法は`$('<img>')`のように、`$()`の中にタグを記述する事で内部的にHTMLを生成し、その中で画像を読み込みます。

```javascript
$('<img>').attr('src', hogeUrl);
```


## アニメーションを中断させたい

fadeInやslideDown等のjQueryでのアニメーションは、一連の動作を行ってから次の動作へと移るため、ロールオーバーの箇所などにアニメーションを設置し、マウスを乗せたり離したりを繰り返していると同じアニメーションをその回数だけ続けてしまいます。

そこで、アニメーション開始時に現状割り当てられている処理をすべて中断させて、そこから次のアニメーションを実行させる方法を取っています。

アニメーションを中断させるには、アニメーション情報を格納しているqueue()に、以下の様な空の配列を渡します。

```javascript
$('hoge').queue([]);
```


## jQueryエレメントに独自エレメントを追加したい

`$('hoge').myFunc();`の様に、独自の関数を作成することが可能です。

自分の場合ではロールオーバーや、透過値補正等の簡単な処理を独自に制作して利用しています。

```javascript
jQuery.fn.extend( {
	myFunc : function() {
		$(this).click( function() {
			alert('This is myFunc!');
		} );
	}
} );
```

上記のように`jQuery.fn.extend`で追加します。この例では、`$('a').myFunc();`と指定すると、aタグをクリックしたときに、「This is myFunc!」というダイアログボックスが表示されるようになります。

JavaScript