
このブログは自分の実験場でもあるので、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について触ってみた


[前回](/heroku-webshot/)、node-webshotを利用してスクリーンショットを撮っていましたが、PhantomJSが開発終了していることに気づいたため、node-webshotから[Puppeteer](https://pptr.dev/)に変更してみました。（よくよく見ると、node-webshotも2016年から更新されていないんですね…）

## Puppeteerを使ってみる

いつものごとくnpm、またはyarnでPuppeteerをインストールすると利用できます。

```bash
npm i puppeteer
# または
yarn add puppeteer
```

それぞれの関数はPromiseで返ってくることが多いため、サンプルを見てもawaitを多用しているのが印象的でした。
取り敢えずスクリーンショットを取るには、こんな感じでOKです。

```typescript
import * as puppeteer from 'puppeteer'

const url = 'http://example.com'

(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto(url)

  // スクリーンショットを保存
  await page.screenshot({path: 'example.png'})

  await browser.close()
})()
```

### ウィンドウサイズを設定する

キャプチャするウィンドウサイズを指定する際は、[`setViewport`](https://pptr.dev/#?product=Puppeteer&version=master&show=api-pagesetviewportviewport)関数が用意されています。

```typescript
// 省略
const width = 1024
const height = 768

(async () => {
  // 省略
  const page = await browser.newPage()
  await page.setViewport({
    width,
    height
  })
  // 省略
})()
```

`deviceScaleFactor`で、高解像度端末をシミュレーションすることも出来るみたいですね。


### Basic認証下のページにアクセスする

Puppeteerには、[`authenticate`](https://pptr.dev/#?product=Puppeteer&version=v1.6.0&show=api-pageauthenticatecredentials)メソッドがありました。

```typescript
// 省略
const userId = 'user_id'
const passWord = 'password'

(async () => {
  // 省略
  await page.authenticate(userId, passWord)
  // 省略
})()
```

~~node-webshotと同様に、[`setExtraHTTPHeaders`](https://pptr.dev/#?product=Puppeteer&version=master&show=api-pagesetextrahttpheadersheaders)によってheaderを追加することで対応が可能です。
（前回に引き続きCryptoJSでBase64エンコードしてます）~~

```typescript
/* 下記の様な記述はしなくてもOK
import * as CryptoJS from 'crypto-js';

// 省略
const userId = 'user_id'
const passWord = 'password'

(async () => {
  // 省略
  const wordArray = CryptoJS.enc.Utf8.parse(userId + ':' + passWord)
  await page.setExtraHTTPHeaders({
    Authorization: 'Basic ' + CryptoJS.enc.Base64.stringify(wordArray)
  })
  // 省略
})()
*/
```


### ページ全体を撮影する

ページ全体なのか、ウィンドウ範囲内だけなのかも、[`screenshot`](https://pptr.dev/#?product=Puppeteer&version=master&show=api-pagescreenshotoptions)のオプションで制御が可能です。
その他ちょっとしたオプションも併せてご紹介。

```typescript
// 省略
(async () => {
  // 省略
  await page.screenshot({
    path: 'example.jpg', // example.jpg に保存
    type: 'jpeg',        // JPEG形式で保存
    quality: 80,         // 品質を0-100で指定
    fullPage: true       // trueにするとページ全体を保存
  })
  // 省略
})()
```

また、`clip`で切り抜きも出来るようですね。


## Herokuで動かしてみる

次に、Herokuで動かしてみようとすると、そのままでは動かないことが分かりました。
そのまま動かそうとして発生したエラーのURLに、まさに[Herokuの場合の解決方法](https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md#running-puppeteer-on-heroku)が記載されていました。


### Buildpackを追加する

（多分）初期状態では必要なライブラリが揃っていない様子なので、有志の方が作ってくれたBuildpackを追加して、Puppeteer（Chrome）が動く環境を整える、ということだと思います。

Herokuのダッシュボードからの場合は、`Settings` -> `Buildpacks`でGitHubのURLを入力します。
入力するURLは[こちら](https://github.com/jontewks/puppeteer-heroku-buildpack)か、日本語・中国語・韓国語に対応させたい場合は[こちら](https://github.com/CoffeeAndCode/puppeteer-heroku-buildpack)です。

> ちなみに、後者のBuildpackを利用する場合は、[前回追加したフォント](/heroku-webshot/#Heroku%E3%81%A7%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB)は不要なので、容量を削減する上でも削除した方が良いでしょう。
> ~~というか、無料枠の500MB超えちゃってので~~

もしくは、Heroku CLIをインストールしているのであれば下記コマンドでも大丈夫です。

```bash
heroku buildpacks:add https://github.com/CoffeeAndCode/puppeteer-heroku-buildpack
```


### Puppeteerの起動オプションを追加

Buildpackを追加しただけでは、まだエラーが出てしまうので、Puppeteerの起動オプションを追加します。

```typescript
import * as puppeteer from 'puppeteer'

const url = 'http://example.com'

(async () => {
  // 起動オプションを追加
  const browser = await puppeteer.launch({
    args: [
      '--enable-font-antialiasing',
      '--no-sandbox',
      '--disable-setuid-sandbox'
    ]
  })
  const page = await browser.newPage()
  await page.goto(url)

  await page.screenshot({path: 'example.png'})

  await browser.close()
})()
```

（Herokuじゃない時と振り分けておいた方が良いかも？）


## 雑感

前回のnode-webshotに比べると、Heroku上での起動に少しつまづいてしまいましたが、node-webshotで気になっていた点が解消されたので、変更して良かったと思いました。

また、Puppeteerに乗り換えるちょっと前にawait、asyncを勉強していてタイムリーでした。TypeScript(JavaScript)楽しいです。


Herokuで日本語を含むページのスクリーンショットを撮ってみた（その2）


## 追記(2018/07/16)

> PhantomJSが開発終了していたのを、記事を公開してから気づいたので、[Puppeteerに乗り換える](/heroku-puppeteer/)などを行った方が良いかと思います。

---

Node.jsはnpm scriptsでしか使ってなかったのですが、URLを入力➝スクリーンショットを撮る仕組みが欲しくなったので、Node.jsをぼちぼち触ってみました。

## 文字化けが発生する

今回は「とりあえず撮れれば良い」というレベルでしたので、込み込みで入っていそうな、[node-webshot](https://github.com/brenden/node-webshot)を利用したので、スクリーンショットを撮るまでは非常に簡単でしたが、Paas環境ににアップロードすると日本語が`□□□`みたいに表示されるようになってしまいました。

原因は明確で、**日本語フォントが入っていない**ことが原因なのですが、PaaS環境にどうやってフォントをインストールすれば良いのか調べてみた所、Herokuでは解決方法が見つかったので、Herokuで開発を行うことにしました。

### Herokuでフォントをインストール

方法は参考ページ（[Heroku環境でフォントを追加する – r7kamura – Medium](https://medium.com/@r7kamura/heroku%E7%92%B0%E5%A2%83%E3%81%A7%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B-f51381c0f870)）そのままで、`.fonts`というフォルダを用意して、そこにフォントファイルを追加してやればOKです。

つまり、こんな感じのディレクトリ構造になります。

```
- .fonts/
  - 何かフォントファイル
- node_modules/
- app.json
- package.json
- Procfile
```

## Basic認証環境下も対応したい

これも参考ページ（[node-webshotでベーシック認証サイトのキャプチャを取得する - Qiita](https://qiita.com/musclemikiya/items/3c6b8e17ef82ea0aa2a7)）そのままで、node-webshotのオプションの`customHeaders`に、`Authorization`を追加してやればOKです。

他で利用する箇所があったので、Base64化に[crypto-js](https://github.com/brix/crypto-js)を利用しています。

```typescript
import * as CryptoJS from 'crypto-js';
import * as webshot from 'node-webshot'

// ユーザ名とパスワード
const user = 'username'
const pass = 'password'

// Base64化
const wordArray = CryptoJS.enc.Utf8.parse(user + ':' + pass)
const base64Auth = 'Basic ' + CryptoJS.enc.Base64.stringify(wordArray)

// スクリーンショット
const url = 'http://example.com'
const file = 'export.ong'
webshot(url, file, {
  customHeaders: {
    Authorization: base64Auth
  }
})
```


## 雑感

スクリーンショットを撮るのなんて面倒臭そうだなぁ、と思っていたら、いつの間にか便利なライブラリがたくさん増えていて、基本的な操作は特に問題なく利用することができました。

ローディングがあるページなどは撮影までの遅延時間を設ければ良さそうなので、よっぽどのことがなければPhantomJSを直接触る必要は無さそうですね。

また、PaaS環境も慣れているPHPばかりで利用していましたが、Node.jsでも問題なく実行ができました。しかし、Heroku以外で日本語フォントを利用できるPaaS環境は無いかなぁ…？本当はFirebase Functionsで利用したいんだけど、そもそも無料プランでは外部URLを参照することすら出来ないので、実験すら出来ない…。


Herokuで日本語を含むページのスクリーンショットを撮ってみた


WordPress -> Ghostとブログを使っていたのですが、それ以外でサーバをあまり使うことがなかったので、GitHub Pagesに乗り換えようと思い、Hexoを使うことにしました。

VuePressやNuxt.jsもちょっと気になったのですが、サッと移行しようと思ったので、ブログ機能を最初から持っているものを選択しています。


## GhostからHexoのデータへ変換

GhostのエクスポートファイルをNodeで無理やりMarkdownファイルに変換をすることで対応しました。そんなに使う人も居ないと思いますが、GitHubのリポジトリに残してあります。

https://github.com/sushat4692/blog.sus-happy.net/tree/master/convert

とりあえず動くように、と書いてるので結構汚いですが…


## GitHub Pagesへのデプロイ

CNAMEは自動で生成されないので、デプロイ処理の間にCNAMEを作成するようにしました。

```json
"scripts": {
  "deploy": "hexo generate && echo 'example.com' > public/CNAME && hexo deploy"
}
```

~~GitHub PagesもSSL対応したはずなのですが、まだ全リポジトリじゃないそうで、まだこのブログは非対応状態です。早くこないかなぁ。~~HTTPS化しましたヽ(=´▽`=)ﾉ


## 備考

ということで、割とサクッとGhostから移行することができました。GhostのエクスポートファイルがJSON形式だったことも大きいですね。

また折を見てテーマもイジっていきたいところ。


GhostからHexoに乗り換えてGitHub Pagesに移行してみた


* **2018/06/10**
  * Karabiner-Elementsが色々対応してくれていましたので、内容を修正しました。

明けましておめでとうございます。いつの間にやら2017年になっていました。今年もよろしくお願いいたします。

さて本題について、macOS Sierraが発表されてから3ヶ月位経ちましたが、随分バージョンアップ出来ずにいました。バージョンアップを渋っていたのは主に下記の理由からです。

* VPN接続で**PPTP非サポート**になった
  * *会社のVPNがPPTP…！致命的…！*
* **Karabinerが対応していない**
  * `左右⌘`による"かな/英数"切り替えがしたい
  * `Cmd+Q`のショートカット一発でアプリ閉じないようにしたい
     * ~~押さないように気をつけることは出来ない~~
  * 環境設定で設定できるキーリピートより早くしたい

ということで、macOS Sierraにしつつ、色々と環境・設定の変更を行ってみました。

## 目次

* [VPN接続方式を変更](#change-vpn)
* [Karabinerの代替ソフト](#change-karabiner)
  * ~~[⌘英かなを利用する](#cmd-eikana)~~ （Karabiner-Elementsが対応しました）
  * ~~[QBlockerを利用する](#qblocker)~~ （Karabiner-Elementsが対応しました）
  * [キーリピートを早くしたい](#key-repeat)
* [Karabiner-Elementsについて](#karabiner-elements)
* [macOS Sierraについて](#macos-sierra)
* [参考](#reference)

## <a name="change-vpn">VPN接続方式を変更</a>

自分も含めて、オフィス外から社内ファイルサーバにアクセスしてデータをやりとりする、といったことをしている背景もあり、VPNが接続出来ない状態になるのは致命的な問題でした。

macOS Sierraだけでなく、iOS10でもPPTP接続は非サポートになっている事もあり、変更すべきタイミングだったのかもしれませんね。

さて、今回の対処としては、VPNの環境についてはYAMAHAのルーターを利用していたので、**PPTP**から**L2TP/IPsec**に接続方式を変更しました。

設定方法については[公式のドキュメントに詳しい流れが書いてあります](http://jp.yamaha.com/products/network/solution/vpn/smartphone/)ので、そちらに設定を行えば大丈夫だと思います。

強いて注意点を挙げるとすると、**一度PPTPの設定内容を全て削除してからでないとL2TP/IPsecの設定を登録することが出来ない**ので、VPN経由で設定を変更することが出来ない、という所かなぁと思います。（当たり前かもしれませんが）

## <a name="change-karabiner">Karabinerの代替ソフト</a>

自分がUSキーボードを愛用していることもあり、特にかな変換キーを`⌘`キーに割り当てたい、という点についてKarabinerを利用していました。

### ~~<a name="cmd-eikana">⌘英かなを利用する</a>~~ （Karabiner-Elementsが対応しました）

[Karabner-Elementsが対応しました。](https://pqrs.org/osx/karabiner/complex_modifications/#japanese)

上記ページから「Import」ボタンを押すと、Karabiner-Elementsに遷移して英/かな切り替えの設定項目が追加されます。

~~まずはかな変換キーのリマップには**[⌘英かな](https://ei-kana.appspot.com/)**を利用することにしました。~~

~~初期設定時に自動的に、`左⌘`で英数、`右⌘`でかなに切り替える設定がされますので、基本的にはインストールして起動するだけで大丈夫です。~~

~~また、他のキーについてもリマップを設定することが出来るので、Karabinerで色々リマップの設定を行っていた人は、このソフトで代替出来ると思います。~~

~~インストール方法については、公式サイトからダウンロードするか、`brew cask`を利用している場合は、そちらからでもインストールが可能です。~~

```shell
brew cask install cmd-eikana
```

~~かな変換対応はコチラで問題ありませんでした。~~

### <a name="qblocker">QBlockerを利用する</a> （Karabiner-Elementsが対応しました）

[Karabner-Elementsが対応しました。](https://pqrs.org/osx/karabiner/complex_modifications/#command_q)

上記ページから「Import」ボタンを押すと、Karabiner-Elementsに遷移して`Cmd+Q`関連の設定項目が追加されます。

~~もう一つ、`Cmd+Q`によるアプリケーションを終了するショートカットを二回叩くことで実行する様にKarabinerで設定していました。~~

~~`Cmd+W`を押そうとして間違って`Cmd+Q`押してしまう、みたいな悲しい事がたまによくあるため、コチラもどうにか実現しておきたかったので色々探してみた所、`Cmd+Q`を長押しに変更する事が出来る**[QBlocker](https://qblocker.com/)**というソフトを見つけました。~~

~~インストール方法は、コチラも公式サイトからダウンロードするか、`brew cask`にも対応しています。~~

```shell
brew cask install qblocker
```

~~若干操作が変わってしまいましたが、防ぎたい事象を防ぐことは出来るので、コチラもOKとしました。~~

~~ただし、メニューバーに表示されているQBlockerのアイコンをクリックするとアプリケーションが落ちてしまう、という不具合があるっぽいので要注意です。（基本的には触らないので不要といえば不要ですが）~~

### <a name="key-repeat">キーリピートを早くしたい</a>

その他、Karabinerにあった設定でよくある使い方として、キーリピートの間隔を通常では出来ない設定より早くするようにしている人を良く見かける様に思います。

コチラについては、macOSの設定をターミナルから直接変更してやる事で設定変更が可能です。

```shell
# 入力開始までの時間
defaults write NSGlobalDomain KeyRepeat -int 0.02
# リピートの間隔
defaults write NSGlobalDomain InitialKeyRepeat -int 12
```

元に戻す時は下記コマンドを実行します。

```shell
defaults delete NSGlobalDomain KeyRepeat
defaults delete NSGlobalDomain InitialKeyRepeat
```

ただし、**設定後にログアウトをしないと反映しない**様子…面倒くさい…。（だからKarabiner使ってたのだと思いますが）

## <a name="karabiner-elements">Karabiner-Elementsについて</a>

現在macOS Sierraの対応も含めて、後継ソフトの**[Karabiner-Elements](https://github.com/tekezo/Karabiner-Elements)**というソフトを開発している様です。

個人的に必要な機能は出揃いましたので、Karabiner-Elementsを再度使用し始めました。

~~しかし、コチラのソフトの問題点としては、~~

* ~~複合キーのリマップが出来ない~~
* ~~リマップしか出来ない~~
  * ~~旧Karabinerでは複合キーとして利用した場合は通常の`⌘`としても利用できた~~

~~といった点が挙げられると思います。左右のどちらかを`⌘`キーとして残しておく、といった対処を行っている方もいらっしゃるようですが、個人的にはちょっとNGでした。~~


## <a name="macos-sierra">macOS Sierraについて</a>

肝心のmacOS Sierraについてですが、まだ利用し始めたばかりで良く分かりません。~~目玉のSiriもiOSですら利用してないですし…。~~

ただ、SafariのPIP（ピクチャインピクチャ）は個人的に便利です。便利というか、動画見ながら作業出来るというか…。一人で黙々と作業してる時は、BGV流しながら作業してる事が多いので、便利なのです（繰り返し）

ちなみにPIPに対応してるサービスは確認できたものでは、

* YouTube
* ニコニコ動画
* AbemaTV（オンデマンドのみ？）
* Vimeo
* Amazon Prime Video

くらいでした。他にも[Netfilixとかも利用できるらしい？](http://www.redmondpie.com/enable-picture-in-picture-pip-for-netflix-in-macos-sierra-heres-how/)です。（登録してないので実際に試してはいませんが）
他の動画サービスでも利用できるようになると嬉しいですねぇ。


## <a name="reference">参考</a>

* [macOS Sierra で Karabiner が使えない問題にどう対処したか](http://qiita.com/naoya@github/items/56a34be85710f4ed5531)
* [Key repeat broken in macOS Sierra · Issue #687 · mathiasbynens/dotfiles](https://github.com/mathiasbynens/dotfiles/issues/687)
* [macOS SierraでKarabinerの代わりに⌘英かなとdefaultsでキーボードの設定を行う](http://qiita.com/saboyutaka/items/33c82ef1414867d9ef6d)
* [Enable Picture-In-Picture (PiP) For Netflix In macOS Sierra, Here’s How](http://www.redmondpie.com/enable-picture-in-picture-pip-for-netflix-in-macos-sierra-heres-how/)


やっとこさmacOS Sierraにバージョンアップしてみた


フィリピンのマニラに来てからいつの間にか半年くらい経ってしまいましたが、割りと環境が合っているのか楽しく過ごしています。

そんな中で、マニラでもラーメンが結構流行っているようで、歩いていける圏内でも幾つかの店舗が見つかりましたので、ほそぼそと残していこうと思います。
（貧乏舌なので「美味い」ばかりの感想になると思いますが、基本的には自分メモということで…）

今回は『Mendokoro Ramenba』。優勝軒という茨城のラーメン屋さんの系列店なんだそうです。フィリピンも2店舗目なんだとか。

## 食べたもの

![味噌ラーメン+餃子](/content/images/2016/08/File-Aug-15--12-21-11-AM-1.jpeg)

* 味噌ラーメン ₱460
* 餃子（5個） ₱200

値段は結構高いですが、フィリピンでも美味しいラーメンが食べられると感じることが出来た一杯でした。

麺も製麺機を持ってきているのか質が高いのが好印象です。スープはちょっと甘めの印象。名古屋の方のラーメンの味噌が辛いだけなのかもしれませんが。

餃子も肉汁たっぷりで美味でした。

他にも塩・醤油・担々麺もあるみたいなので、色々試してみたいですね。

## 店内

フィリピンのラーメン屋さんは普通のレストランの様にテーブル席だけのお店が多いのですが、ここの店舗はカウンター席だけでした。

ただ、ラーメン屋さんにしては大きな1フロアの店内で、天井も高く綺麗でオシャレな内装です。日本のラーメンの印象とは大分異なりますね。恐らくコチラだと割りと高級なメニューなんじゃないかと思います。

評判も結構良いのか、昼どきを少しずらして行ったのに、15分くらい待って席に座ることができ、食べ終わったあともまだ並んでいる状態でした。

## 場所

Shop18 V Corporate Center, Leviste Street, Salcedo Village, Makati City

<div class="gmaps">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1719.190441436031!2d121.02354192259052!3d14.560170458869829!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3397c907ab328217%3A0xd8e18abb4c04964c!2sMendokoro+Ramenba!5e0!3m2!1sja!2sph!4v1472482084275" width="800" height="600" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

## その他

ちなみにフィリピン料理も大好きです。アドボ、シニガン、シシグ、レチョン、パンシット…特にカレカレ美味しいです。


マニラのラーメン事情 『Mendokoro Ramenba』 味噌ラーメン+餃子


長らくWordPressでこのブログを更新してきましたが、前々から気になっていたGhostに移管をしてみました。

その時に行ったことをメモしておきます。

## 目次

* [Ghostの準備](#prepared)
  * [Node.jsをnvmでインストール](#install-nvm)
  * [Ghostをインストール](#install-ghost)
  * [Node.jsの実行をデーモン化する](#node-daemon)
* [nginxからGhostを実行する](#nginx2ghost)
* [記事データの移管](#transfer)
  * [手直しが必要なモノ](#need-fix)
* [雑感](#other)

## <a name="prepared">Ghostの準備</a>

まずはGhostのインストールを行います。その間にh2oがうまく動かなくなってしまったので、現状の環境としてはCentOS7 + nginx + MySQL + Node.jsという感じです。

### <a name="install-nvm">Node.jsをnvmでインストール</a>

Node.jsはepelリポジトリから`yum`でインストールをすることが可能ですが、今回はnvm経由でインストールします。

```bash
# nvmをインストール
$ git clone git://github.com/creationix/nvm.git ~/.nvm
$ source ~/.nvm/nvm.sh

# ログイン時に有効化されるようにしておく
# 下記を追加
$ vi ~/.bash_profile
if [[ -s ~/.nvm/nvm.sh ]];
 then source ~/.nvm/nvm.sh
fi

# インストールできるバージョンを確認
$ nvm ls-remote

# インストール
$ nvm install v4.4.2

# デフォルトに設定
$ nvm alias default v5.10.1
```

### <a name="install-ghost">Ghostをインストール</a>

次にGhostをインストールします。

```bash
# ソースコードを取得
$ curl -L https://ghost.org/zip/ghost-latest.zip -o ghost.zip
$ unzip -uo ghost.zip -d ghost
$ cd ghost

# 必要ライブラリをインストール
$ npm install sqlite3 --build-from-source
$ npm install --production

# とりあえず動かしてみる
$ npm start
```

`config.js`を書き換えることで、実行するIPアドレスやポート、URLを変更することが出来ます。

### <a name="node-daemon">Node.jsの実行をデーモン化する</a>

`npm start`でも実行はできますが、デーモン化されないので、`forever`をインストールしました。

```bash
$ npm install forever -g
```

これで、実行する際は、

```bash
$ NODE_ENV=production forever start index.js
```

停止する際は、

```bash
$ forever stop index.js
```

を叩けばOKです。


## <a name="nginx2ghost">nginxからGhostを実行する</a>

ドメインから実行できるようにnginxからGhostを実行させます。ココに関しては特に難しくもなく、[公式マニュアルの方法](http://docs.ghost.org/ja/installation/deploy/#ghostを独自ドメイン名で使う)に則って設定しています。

若干違う点としては、SSLで運用していますので、一部記述が増えています。

```nginx
server {
    listen 443 ssl;
    server_name example.com;

    ssl_certificate      /path/to/ssl.pem;
    ssl_certificate_key  /path/to/ssl.key;

    ssl_ciphers  HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers   on;

    location / {
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Proto $scheme;
        proxy_set_header   X-Real-IP $remote_addr;
        proxy_set_header   Host      $http_host;
        proxy_pass         http://127.0.0.1:2368;
    }
}
```

インストールや、初期設定などについては割愛します。

## <a name="transfer">記事データの移管</a>

次に、これまで書いてきた記事データの移管を行います。[WordPressにGhost向けにjson形式変換してエクスポートするプラグイン](https://ja.wordpress.org/plugins/ghost/)が用意されていますので、そちらをインストールしてデータを取得します。

データがダウンロード出来たら、Ghostの管理画面にログインし、`Labs`メニューからアップロードしてインポートします。

基本的なテキストデータはコチラで引き継ぐことが出来ました。

### <a name="need-fix">手直しが必要なモノ</a>

上記プラグインで全て引き継ぐコトが出来る訳ではありません。  
自分の場合は下記の作業を手作業で行いました。

<dl>
<dt>画像の移管</dt>
<dd>参照先のURLが変わらないので、WordPressのサーバが残るのであれば、そのままでもOK</dd>
<dt>WordPressのショートコード<code>[*][/*]</code></dt>
<dd>変換されないので、手で直す必要があります</dd>
<dt>微調整</dt>
<dd>たまに綺麗にMarkdownになっていないコトがあるので、微調整</dd>
</dl>

この作業が一番手間かもしれません…。


## <a name="other">雑感</a>

前々から気になっていたのですが、やっと試すことが出来ました。

以前も一度インストールしてみようかと思っていたのですが、`npm install`がどうにもうまく実行できずに諦めてしまっていました。  
今回はちゃんと動いてくれたので良かったです。

Markdownも最近PCでメモを取るときは利用することが多くなったため、ブログ記事もMarkdownで記入できると楽だなぁと今回思いました。

WordPressの時もJetpackプラグインでMarkdown対応出来たと思いますが、他の記事に影響がありそうで怖くて使っていませんでした…。使い勝手的にはどうなのでしょうね？

しかし、まだまだv1.0にもなっていないので、色々起きるかもしれませんが、ちょこちょこ試してみようかと思います。テーマも取り急ぎ不要なモノを削っただけなので、そちらもいじってみたいですね。

WordPressからGhostに移管してみた



少しAnsibleについて触ってみたので、メモを残しておきます。


## 目次

- [背景](#background)
- [構築目標](#goal)
- [Vagrantfileを用意する](#vagrant)
- [Ansibleの設定](#ansible)
  - [Ansibleのインストール](#install)
  - [Ansibleの設定ディレクトリの構造](#directory)
- [ApacheのVirtualDocumentRoot](#apache)
- [今回のデータ](#data)
- [雑感](#other)


## <a name="background">背景</a>

元々Vagrantは使ってたのですが、Chefは利用しておらずSSHで直接設定変更していたため、全くもって環境の共有や移動・復帰について考えていませんでした。

しかし、最近PCの調子が悪くなり、クリーンインストールをしたのですが、ローカルの開発環境構築で<del>どうやって構築したのかメモすらしてなかったため</del>面倒なことがあり、どうせなら自動化させたいな、と思い色々と調べてみました。

そこでAnsibleという自動実行ツールがあることを知り、こっちの方が面白そうだなぁと思い、自分用のVagrant環境構築の設定を用意してみたためメモを残しておきます。


## <a name="goal">構築目標</a>

自分用のローカル開発環境については、下記のような状態で構築しています。

- LAMP（CentOS7 + Apache2 + MariaDB + PHP5.6）
- RPMForge, epel, remiのyumリポジトリを追加（念のため）
- ApacheのVirtualDocumentRootを設定して、サブドメイン運用を楽にする（ドキュメントルートを分けたい）

という感じです。基本的には、1台だけ構築するけど複数のサイトを別のドキュメントルートに分けたい、というモノグサ設定という感じです。


## <a name="vagrant">Vagrantfileを用意する</a>

Vagrantfileもモノグサ設定です。簡単な記述しか用意していません。

また、ネットワークの遅延対策として[こちらの記事](http://blog.shibayu36.org/entry/2013/08/12/090545)と、OSXで80番ポートを利用する際に、直接hostのポートを80にするとうまく動かないので、[こちらの記事](http://qiita.com/hidekuro/items/a94025956a6fa5d5494f)を参考にさせていただいています。

```ruby
Vagrant.configure(2) do |config|
    # boxファイルもbentoから拝借
    config.vm.box = "bento/centos-7.2"

    # via: http://qiita.com/hidekuro/items/a94025956a6fa5d5494f
    # ポート番号は10080 -> 80
    config.vm.network "forwarded_port", guest: 80, host: 10080
    config.vm.network "forwarded_port", guest: 22, host: 2200

    # up, reload 時に PF 設定
    config.trigger.after [:provision, :up, :reload] do
        system('echo "rdr pass on lo0 inet proto tcp from any to 127.0.0.1 port 80 -> 127.0.0.1 port 10080" | sudo pfctl -ef - > /dev/null 2>&1')
        system('echo "set packet filter 127.0.0.1:80 -> 127.0.0.1:10080"')
    end

    # halt, destroy 時に PF をリセット
    config.trigger.after [:halt, :destroy] do
        system("sudo pfctl -df /etc/pf.conf > /dev/null 2>&1")
        system('echo "reset packet filter"')
    end

    # via: http://blog.shibayu36.org/entry/2013/08/12/090545
    # IPv6とDNSでのネットワーク遅延対策で追記
    config.vm.provider :virtualbox do |vb|
      vb.customize ["modifyvm", :id, "--natdnsproxy1", "off"]
      vb.customize ["modifyvm", :id, "--natdnshostresolver1", "off"]
    end

    # ansible を実行
    config.vm.provision "ansible" do |ansible|
        ansible.playbook = "provisioning/site.yml"
        ansible.inventory_path = "provisioning/vagrants"
        ansible.limit = 'all'
    end
end
```


## <a name="ansible">Ansibleの設定</a>

### <a name="install">Ansibleのインストール</a>

既にVagrantfileにansibleの設定を記述してしまいましたが、インストールを行います。

自分の環境の場合はMacなので、brewコマンドで一発です。

```shell
brew install ansible
```

その他、pip（pythonのパッケージソフトウェア）を使ってインストールすることも可能です。[公式サイトに色々なインストールの方法が記載されています](http://docs.ansible.com/ansible/intro_installation.html)ので、そちらが参考になるかと思います。

### <a name="directory">Ansibleの設定ディレクトリの構造</a>

Ansibleのベストプラクティスという形で、ディレクトリ構造を一定のルールで配置すると、自動的に必要なファイルを読みに行ってくれるようになります。

書き始めると結構長くなりますし、[既に綺麗にまとめられている記事があります](http://knowledge.sakura.ad.jp/tech/3084/)ので、今回は省略します。

と、いうことで、自分のVagrant環境の自動化を行う場合のディレクトリ構造としては下記のようになりました。

```yaml
/
  - host_vars/
    - vagrants.yml
  - roles/
    - httpd/
      - files/
        - virtual.conf
      - handler/
        - main.yml
      - tasks/
        - main.yml
    - mariadb/
      - tasks/
        - main.yml
      - templates/
        - my.cnf.j2
    - php/
      - tasks/
        - main.yml
    - yum_repos/
      - tasks/
        - main.yml
  - site.yml
  - vagrants
  - vagrants.yml
```


## <a name="apache">ApacheのVirtualDocumentRoot</a>

ApacheのVirtualDocumentRootを利用すると、ディレクトリを分けるだけでサブドメインを変更する切り分けることができます。

今回はローカル環境なので、簡単な設定になっています。

```apacheconf
<VirtualHost *:80>
  ServerName localhost
  ServerAlias *.localhost
  VirtualDocumentRoot /vagrant/www/%1/htdocs

  <Directory /vagrant/www/*/htdocs/>
    Options FollowSymLinks
    AllowOverride All
    Require all granted
  </Directory>
</VirtualHost>
```

上記のように設定すると、

```shell
ローカル環境                  Vagrant環境                  URL
/path/to/www/foo/htdocs  ->  /vagrant/www/foo/htdocs  ->  http://foo.localhost/
/path/to/www/bar/htdocs  ->  /vagrant/www/bar/htdocs  ->  http://bar.localhost/
```

というように繋がるようになります。


## <a name="data">今回のデータ</a>

[GitHubにコミットしました。](https://github.com/sushat4692/VagrantAnsible)使い方間違ってるよ、であったり、ここマズイよ、という点がありましたらご指摘いただけると助かります。


## <a name="other">雑感</a>

環境の共有について先延ばしにしてしまっていましたが、今回のクリーンインストールで、同じ環境を構築する難しさを実感したので、自動化出来るとかなり便利になりそうな気がしてきました。

取り急ぎ自分用なので、新しい端末になった時や、また調子が悪くなった時に実感するんでしょうが、もっと大きなチームで開発するときはまた違うのでしょう。

Ansibleだけでなく、Chef Zeroというツールもありますが、どちらが良いのかは自分にはハッキリとはわかりません。とは言え、効率化を推し進める方策を取って行きたいですね。

Ansibleを使って自分用のVagrant環境構築の自動化をしてみた



今年もどこかの紅葉を見に行こうと考えていた所、そういえばマツケンの愛知県PRで小原村の四季桜が載っていたので見に行ってみました。

今は小原村から豊田市に編入され、豊田市小原町という地名になっているようです。


## 小原村まで

今回は豊田市駅から豊田おいでんバスで「上仁木」まで1時間程度、そこからあるいて10分程度で到着します。

しかし、下調べが甘かったので、実は行きのバスは途中の「小原大草」で降りてしまい、40分位歩いて川見四季桜の郷に向かっていました。<del>運動がしたかったのです（言い訳）。</del>

小原大草の周りにも幾つか見所があるようなので、頑張って歩いても良いかもしれません。


## 川見四季桜の郷

[![川見四季桜の郷](https://farm1.staticflickr.com/766/23205674425_10d1d8be68_h.jpg)](https://www.flickr.com/photos/sushat4692/23205674425/in/datetaken/ "川見四季桜の郷")<script async="" charset="utf-8" src="//embedr.flickr.com/assets/client-code.js"></script>

連日の雨でだいぶ散ってしまっていたのと、当日も天気がイマイチ良くなかったので残念でしたが、それでも華やかな光景でした。青空の下で満開の時期だともっと綺麗に見えるのだと思います。

ちなみに四季桜は春と秋に咲くのですが、花の量は秋の方が多く綺麗なのだそうです。


## 紅葉と四季桜

[![川見四季桜の郷](https://farm1.staticflickr.com/633/23205635975_e504848a42_h.jpg)](https://www.flickr.com/photos/sushat4692/23205635975/in/datetaken/ "川見四季桜の郷")<script async="" charset="utf-8" src="//embedr.flickr.com/assets/client-code.js"></script>

そして、ここの魅力としては、四季桜と紅葉が一緒の場所で見れるという点です。紅葉の赤、四季桜のピンク、それと少し残っている緑が混ざり合う色合いは不思議でありつつ魅力的な景色でした。

[![川見四季桜の郷](https://farm6.staticflickr.com/5769/22811480337_37c252daf2_h.jpg)](https://www.flickr.com/photos/sushat4692/22811480337/in/datetaken/ "川見四季桜の郷")<script async="" charset="utf-8" src="//embedr.flickr.com/assets/client-code.js"></script>

ちらほらと銀杏の黄色も見かけるので、そうなると更に色彩がプラスされます。ますます面白い景観を見せてくれる名所だと感じられますね。


## 川見薬師寺

[![川見四季桜の郷](https://farm1.staticflickr.com/601/23205648725_317df25a7a_h.jpg)](https://www.flickr.com/photos/sushat4692/23205648725/in/datetaken/ "川見四季桜の郷")<script async="" charset="utf-8" src="//embedr.flickr.com/assets/client-code.js"></script>

また、この川見四季桜の郷の隣には川見薬師寺が建っているので、一緒にお参りをするのも良いかもしれません。

薬師寺の門までは四国八十八ヶ所にちなんだ88段、女性の厄年にちなんだ33段、男性の厄年にちなんだ42段、合わせて163段の階段を登った上にあります。何だか登っただけでも何かしら良くなりそうな数字ですね。

ちなみに本堂への階段は12段で、十二支にちなんでるんだとか。


## まとめ

名古屋から考えると豊田までの時間と、そこからのバスがあるので、結構遠い距離になってしまいますが、それでも行ってみる価値はあると感じました。（自分は降りるバス間違えて更に歩いてますが）

それだけに天候があまり良くなかったことが悔やまれます。次の機会には晴れた日に…と言いつつも、紅葉の名所は気になる場所が幾つもあって迷いますね。

[今回の一人旅のアルバム](https://www.flickr.com/photos/sushat4692/albums/72157660799669769)




ぶらり一人旅「小原村 川見四季桜の郷」



[その２ Unicorn+Nginx編](https://blog.sus-happy.net/ruby-drunk-list-2/)ではNginx上で動かしていましたが、もしかしたらH2O上でも動くんじゃないかと思い試し見たところ動いたのでメモを残しておきます。

ちなみに、Unicornの設定については以前の方法から変更はありませんので、今回のメモには残していません。


## H2Oをインストール

[H2Oのインストールの手順はほぼ変わりません](https://blog.sus-happy.net/h2o_php7/#h2o-ready)が、一部だけ手順が変わっています。

以前の方法では、`cmake`をyumでインストールしていましたが、バージョンが足りなくなったのでソースからインストールする必要があります。

```shell
cd /usr/local/src/
wget http://www.cmake.org/files/v2.8/cmake-2.8.12.tar.gz
tar xvfz cmake-2.8.12.tar.gz
cd cmake-2.8.12
./configure
make
make install
# cmakeで実行できるようにシンボリックリンクを貼っておく
ln -s /usr/local/bin/cmake /bin/cmake
```


## H2Oの設定

簡単に考えれば、H2OからUnicornのsocketを叩ければOKなので、`proxy.reverse.url`で設定を行います。
 「url」ですが、unix socketも渡せるみたいです。便利便利。

```yaml
pid-file: /path/to/h2o.pid
user: nobody
error-log: /path/to/error.log

listen: 80
listen:
  port: 443
  ssl:
    certificate-file: /path/to/ssl.pem # SSLのサーバ証明書+中間証明書
    key-file: /path/to/ssl.key # SSLの秘密鍵

# ディレクトリインデックス
file.index: [ 'index.html' ]

# ドメイン設定
hosts:
  # HTTP/2を使いたかったのでHTTPSにリダイレクトしてSSL通信に統一
  "example.net:80":
    paths:
      /:
        redirect:
          status: 301
          url: https://example.net/

  "example.net:443":
    access-log: /path/to/access.log
    paths:
      /:
        # 公開ディレクトリの指定
        file.dir: /path/to/application/public
        file.dirlisting: on
        # file.dirに見つからなければunicornに渡す
        proxy.reverse.url: http://[unix:/path/to/unicorn.sock]/
```

`/path/to/unicorn.sock`は、`unicorn.rb`で設定した、`listen`の値を指定します。

これで、現在動いている（はず）です。
[呑んだくれリスト](https://drunk.sus-happy.net/)もhttp/2になりました！


## 参考

- [CentOS6.x – CentOS6.3でMySQL5.6.14をソースからインストール – Qiita](http://qiita.com/nobu_blast/items/dfe92a7c14136d1dafe9#3-2)
（の中の「cmakeソースファイルのダウンロード&インストール」）
- [connect to application server via unix-domain socket by kazuho · Pull Request #383 · h2o/h2o](https://github.com/h2o/h2o/pull/383)


Ruby on RailsをH2O上で動くようにしてみた



[その１](https://blog.sus-happy.net/ruby-drunk-list/)、[その２](https://blog.sus-happy.net/ruby-drunk-list-2/)に引き続き、Ruby on Railsのメモです。（ちなみに~~呑んだくれリストとはこんな感じのモノ~~です。）

今回は、Ruby on Railsのアプリ構築時に調べた・躓いた点についてのメモです。


## 目次

- [改行コードをbrに変換したい](#nl2br)
- [JavaScriptが正常に動作しない](#turbolinks)
- [雑記](#other)
- [参考](#reference)
- [シリーズ](#series)


## <a name="nl2br">改行コードをbrに変換したい</a>

いわゆるPHPで言うところの`nl2br`をRailsで行うためには、自分で関数を用意する必要があります。

利用するシーンはそれなりにあると思うので、`application_helper.rb`に記述しておくと、何処でも使えて便利です。

```ruby
def hbr(str)
    str = html_escape(str)
    str.gsub(/\r\n|\r|\n/, "<br />").html_safe
end
```

後はViewのERBファイルで呼ぶ際に下記のとおりに書くだけです。

```ruby
<%= hbr @foo.bar %>
```


## <a name="turbolinks">JavaScriptが正常に動作しない</a>

Rails4からTurbolinksというライブラリが追加されており、ページ間遷移を非同期的に処理するようになっています。そのため、コンテンツの中身だけ入れ替えるようになり、特に何も考えなくても通信量が抑えられるようになっています。

しかし、その仕組みがあるために、いつもどおりにJSの記述をしていると正常に動作しないコトがあるため注意です。

### jQueryの$(document).readyに注意

jQueryを利用する際の常套句である、`$(document).ready`を利用する場合、最初にページを開いた時にしか発火しないため、ページ遷移をした後のページで上手く処理が実行されないコトがあります。

Turbolinksには、次のページを読み完了時に`page:load`というイベントが発火されるので、そちらを利用することで解消するコトが出来ます。

```javascript
// $( function() {} ); を下記のように書き換える
$(document).on( 'ready page:load', function() {
    // ほげほげ
} );
```

CoffeeScriptの場合はこんな感じ。

```coffeescript
$(document).on 'ready page:load', ->
    // ほげほげ
    return
```

### 最終手段

最終手段として、Turbolinksを切ってしまうという手もあります。
 アプリケーションを生成する際に、`--skip-turbolinks`オプションを追加します。

```bash
rails new app_name --skip-turbolinks
```

また、既に作成済みのアプリから除外する際には、[コチラの参考サイトの方法](http://qiita.com/kazz187/items/12737363d62b9c91993c)で対応できるかと思います。

とは言え、元々はパフォーマンスを高めるライブラリなので、使える時は使っていきたいですね。


## <a name="other">雑記</a>

ひとまずは、環境構築からアプリ制作までの一通りを試してみました。

PHPのFWでも同様にコマンドから開発の補助をしてくれるモノはたくさんありますが、一際補助される範囲が広いように感じました。
 特にscaffoldは一通りの画面まで揃えてくれるので、簡易的なものであればサクッと用意できると感じます。

Rubyならではのシンプルな記法も、慣れるまでは大変ですが慣れてしまえば簡易的に記述できるのは面白いですね。

また、引き続きRubyについても試していきたいと思うので、気づいたことがあれば残していこうと思います。


## <a name="reference">参考</a>

- [すずやん::blog: railsで改行コードをに置き換える](http://suzuyan.blogspot.jp/2013/09/rails.html)
- [Ruby – Turbolinksさんと上手く付き合う10の方法 – Qiita](http://qiita.com/seri_k/items/164accd9ef8ddb4a942e)
- [Rails – Turbolinksをオフしないためにやった事 – Qiita](http://qiita.com/saboyutaka/items/bcc0966313c6f7399a6e)
- [Ruby – Rails 4 で turbolinks をオフにする方法 – Qiita](http://qiita.com/kazz187/items/12737363d62b9c91993c)


## <a name="series">シリーズ</a>

- [その１ 「Rails環境構築編」](https://blog.sus-happy.net/ruby-drunk-list/)
- [その２ 「Unicorn+Nginx編」](https://blog.sus-happy.net/ruby-drunk-list-2/)


Ruby on Railsの勉強がてらに呑んだくれリストを作ってみた（その３ Railsアプリ構築編）



どこか写真撮りに行きたいなぁと思っていた所で、ちょうどテレビで彼岸花について特集をしていたので、東海県内の群生地が無いか探してみたところ半田の矢勝川にあると知ったので行ってみました。


## 矢勝川堤まで

名古屋駅から40分くらいの名鉄河和線「半田口駅」から歩いて5-10分位のところなので、電車でも気軽に足を運ぶことが出来ます。

一応駐車場もあるようですが、結構混んでいたのでもしかしたら停められないこともあるのかもしれません。


## 矢勝川・彼岸花堤

[![彼岸花](https://farm1.staticflickr.com/589/21612525062_9918ab152b_b.jpg)](https://www.flickr.com/photos/sushat4692/21612525062/in/album-72157658541136100/ "彼岸花")<script async="" charset="utf-8" src="//embedr.flickr.com/assets/client-code.js"></script>

下調べで200万本の群生地と書いてあったのは見たのですが、200万本とはどの程度のものか想像がつかずに矢勝川に着いてみると思った以上に密集し、赤々とした堤が延々と伸びていました。

なぜ群生しているのか調べてみると、童話「ごんぎつね」に登場している川で、同作品に登場している彼岸花を1990年から市民の方が植栽をしているからだそうです。20年以上掛けてこの規模になっていると考えると感慨深いですね。

[![彼岸花](https://farm6.staticflickr.com/5652/21632877211_47b7bcfb9f_b.jpg)](https://www.flickr.com/photos/sushat4692/21632877211/in/album-72157658541136100/ "彼岸花")<script async="" charset="utf-8" src="//embedr.flickr.com/assets/client-code.js"></script>

距離が長い割に端から端までしっかりと群生しているので、グルっと一周しても最後まで楽しめると思います。ただし、片道2km位あり橋も少ないので、途中で同じ道を折り返すか、最後まで歩く覚悟は必要になります。

北側の土手はサイクリングロードになっていますが、南側の土手は舗装されていないので自転車で一周するのはちょっと難しそうです。（道幅も狭く人も結構居るので）


## 田んぼと彼岸花

[![田んぼアート](https://farm1.staticflickr.com/746/21632865631_d6c37ee7fb_b.jpg)](https://www.flickr.com/photos/sushat4692/21632865631/in/album-72157658541136100/ "田んぼアート")<script async="" charset="utf-8" src="//embedr.flickr.com/assets/client-code.js"></script>

また、この矢勝川の周りには田んぼが広がっており、勿論あぜ道にも彼岸花が咲いていました。田んぼアートも行われており、土手の上から見ると上の写真の様にキツネの姿を見ることが出来ました。

ちなみに、田んぼの周辺に彼岸花が咲いているのは、彼岸花の球根の毒がもぐらや害虫の侵入を阻止し、雑草なども生えづらくなるんだとか。

[![彼岸花と田んぼ](https://farm1.staticflickr.com/585/21436995909_d59fc2e86c_b.jpg)](https://www.flickr.com/photos/sushat4692/21436995909/in/album-72157658541136100/ "彼岸花と田んぼ")<script async="" charset="utf-8" src="//embedr.flickr.com/assets/client-code.js"></script>

稲穂と彼岸花の組み合わせも何だか懐かしい感じがして良いですね。田んぼの周りなので色々な生き物も感じることが出来ます。トンボや鳥が飛び交い、虫の鳴き声がどこからか聴こえ、田んぼの中を覗き込むとカエルが逃げていく姿が見えました。

[![彼岸花と影](https://farm1.staticflickr.com/771/21623998835_92e1e1a522_b.jpg)](https://www.flickr.com/photos/sushat4692/21623998835/in/album-72157658541136100/ "彼岸花と影")<script async="" charset="utf-8" src="//embedr.flickr.com/assets/client-code.js"></script>


## 新美南吉の生家

[![南吉の生家](https://farm1.staticflickr.com/578/21436988259_744d2b3d9c_b.jpg)](https://www.flickr.com/photos/sushat4692/21436988259/in/album-72157658541136070/ "南吉の生家")<script async="" charset="utf-8" src="//embedr.flickr.com/assets/client-code.js"></script>

前述したとおり、この辺りは「ごんぎつね」の舞台となっており、作者である新美南吉氏も半田の生まれだったそうです。

また、生まれた家が半田市によって保管されており、矢勝川から歩いて直ぐだったので、ついでに寄ってみました。

[![南吉の生家 小間](https://farm1.staticflickr.com/654/21632866591_3fdbd76a82_b.jpg)](https://www.flickr.com/photos/sushat4692/21632866591/in/album-72157658541136070/ "南吉の生家 小間")<script async="" charset="utf-8" src="//embedr.flickr.com/assets/client-code.js"></script>

（個人的に）当時大正〜昭和にかけての民家とはどんなものだったのか、という興味が先行してしまい、南吉がどうだだとかは全く入ってきませんでした…。

とは言ってもとても興味深い場所でした。無料開放されているので、気になる方は寄ってみることをおすすめします。

[![南吉の生家 時計](https://farm6.staticflickr.com/5719/21597738396_036c0b3847_b.jpg)](https://www.flickr.com/photos/sushat4692/21597738396/in/album-72157658541136070/ "南吉の生家 時計")<script async="" charset="utf-8" src="//embedr.flickr.com/assets/client-code.js"></script>


## まとめ

名古屋から1時間掛からずに到着するので、手軽に足を運ぶことが出来、思っていた以上の規模だったので満足でした。

歩いて回れる距離に他にも何かあるようなので、日帰りでこの辺りをぐるぐる回る、というコトも出来そうな気がします。

[今回の一人旅のアルバム](https://www.flickr.com/photos/sushat4692/albums/72157658541136100)、（[新美南吉生家のアルバム](https://www.flickr.com/photos/sushat4692/albums/72157658541136070)）




ぶらり一人旅「半田 矢勝川堤」



[その１](https://blog.sus-happy.net/ruby-drunk-list/)に引き続き、Ruby on Railsのメモを残しておきます。（ちなみに~~呑んだくれリストとはこんな感じのモノ~~です。）

今回は、Rails + Unicorn + Nginxの設定メモです。


## Unicornの設定

railsのアプリケーションが作成しているコトが前提となります。出来ていない時は、

```shell
rails new projectname
```

で作成をしてください。

### インストール

アプリケーションフォルダ内の「Gemfile」にUnicornを追記し、インストールします。

```shell
echo "gem 'unicorn'" >> Gemfile
bundle install
```

### 設定ファイルの作成

インストールが完了したら、config/unicorn.rbを作成し、下記のように記述します。

```ruby
worker_processes 2 # 立ち上げるworker数
working_directory "/path/to/application" # アプリケーションのディレクトリ

listen "/path/to/unicorn.sock" # Unix Domain Socket

pid "/path/to/unicorn.pid"     # PIDファイル出力先

timeout 60

preload_app true

stdout_path "/path/to/stdout.log" # 標準出力ログ出力先
stderr_path "/path/to/stderr.log" # 標準エラー出力ログ出力先

GC.respond_to?(:copy_on_write_friendly=) and GC.copy_on_write_friendly = true

before_fork do |server, worker|
  defined?(ActiveRecord::Base) and ActiveRecord::Base.connection.disconnect!

  old_pid = "#{server.config[:pid]}.oldbin"
    if old_pid != server.pid
      begin
        sig = (worker.nr + 1) >= server.worker_processes ? :QUIT : :TTOU
        Process.kill(sig, File.read(old_pid).to_i)
        rescue Errno::ENOENT, Errno::ESRCH
      end
    end

    sleep 1
  end

after_fork do |server, worker|
  defined?(ActiveRecord::Base) and ActiveRecord::Base.establish_connection
end
```

working_directory、listen、pid、stdout_path、stderr_pathは、環境に合わせて変更を行ってください。
 listenで指定したパスはNginxの設定時に必要ですので、どこかにメモをしておきましょう。

### Unicornの実行

最後にUnicornを実行します。

```shell
bundle exec unicorn -D -c /path/to/application/config/unicorn.rb -E (実行環境|development|production)
```

ただ、毎回上記コマンドを実行するのが面倒な方は、[参考サイトに起動スクリプトが載っています](http://qiita.com/akito1986/items/56198edcafc222b320a8)ので、そちらを利用する方法も良いかと思います。

### 注意点

productionモードで実行する際は、Secretキーを設定しておかないとエラーが返ってきてしまうので、下記コマンドで環境変数に設定しておく必要があります。（横着してsecrets.ymlに直接記述しても動きます）

```shell
SECRET_KEY_BASE=$(rake secret) bundle exec unicorn -D -c /path/to/application/config/unicorn.rb -E production
```

~/.bash_profileとかで環境変数に設定しておく方法もあるそうなのですが、何故か自分の環境では動かなかったので、上記のようなコマンドで実行しています。


## Nginxの設定

Unicornが実行できたら次にNginxの設定を行ないます。

### インストール

以前のメモではepelリポジトリからインストールしていましたが、今回は別のリポジトリからインストールしてみます。

リポジトリを追加して、yumでインストール。yum便利です。

```shell
rpm -ivh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
vi /etc/yum.repos.d/nginx.repo # enabled=1 -> enabled=0
yum install nginx --enablerepo=nginx
```

### 設定ファイルの作成

今回はバーチャルドメインもせずRailsに使うだけなので、ちょっと横着をしてdefault.confを編集しちゃいました。

```nginx
upstream rails-unicorn {
    server unix:/path/to/unicorn.sock;
}

server {
    #listen       80;
    server_name example.net;

    # root /usr/share/nginx/www;
    index index.php index.html index.htm;

    location / {
        try_files $uri $uri.html $uri/index.html @rails-unicorn;
    }
    # static files
    location ~ ^/(assets|css|js|fonts)/(.*) {
        alias /path/to/application/public/$1/$2;
    }
    # robots.txt | favicon.ico
    location ~ /(robots\.txt|favicon\.ico) {
        alias /path/to/application/public/$1;
    }

    location @rails-unicorn {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded_For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_pass http://rails-unicorn;
    }

    error_page 404 /404.html;

    # redirect server error pages to the static page /50x.html
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/www;
    }
}
```

upstream rails-unicornのserverには、unicory.rbで記述した際のlistenに指定したパスを記述します。
 その他、各locationのパラメータは環境に合わせて変更を行ってください。

また、コチラの設定ファイルは参考サイトと同様に、assetsファイルを毎回作成しないように直接読みに行くようにしています。

そのため、css/jsを変更した場合は、下記コマンドを実行する必要があります。

```shell
bundle exec rake assets:precompile RAILS_ENV=production
```

（また、こっそりpublicディレクトリ内にcss/jsフォルダを作って、その中に入れてしまっても大丈夫のように設定ファイルを追記しています。）

### 実行

Nginxの実行については、yumからインストールしているので、systemctlから操作することが可能です。

```shell
systemctl start nginx
```


## 参考

- [nginx + unicorn + Railsの設定方法 – Qiita](http://qiita.com/akito1986/items/56198edcafc222b320a8)
- [Missing `secret_key_base` for 'production' environment が出たのをどうにかする件 – YKT68の日記](http://j1ykt68.hatenablog.com/entry/2014/07/03/111725)

<del datetime="2015-09-30T15:57:45+00:00">まだまだ続きます、最後に実際にRailsプロジェクトを作成した時のメモを残そうかと思います。</del>投稿しました。


## シリーズ

- [その１ 「Rails環境構築編」](https://blog.sus-happy.net/ruby-drunk-list/)
- [その３ 「Railsアプリ構築編」](https://blog.sus-happy.net/ruby-drunk-list-3/)


Ruby on Railsの勉強がてらに呑んだくれリストを作ってみた（その２ Unicorn+Nginx編）



Ruby on Railsを少し勉強しておこうと思っていたところで、友人にビールの飲み歩きをしてる話をしていたら、リスト作っておかないと忘れるんじゃない？と言われ、確かにそうだと思ったのでRailsの勉強がてらに呑んだくれリストを作ってみました。

今回の環境は、CentOS7 + Nginx + Unicorn + Ruby on Railsです。

途中まで記事を書いていたら長くなってきたので、分割して更新をしていきます。


## とりあえず出来上がったもの

まずは必要最低限だと思われる情報を登録し、一覧で確認できる所まで作ってみました。

~~とりあえず出来たものはこんな感じのモノです（スマホ推奨）~~。だれでも適当に登録できてしまうとアレなので、一応データの登録・削除は認証が必要になっています。


## 雑談（読み飛ばしOK）

最初は[Heroku](https://www.heroku.com/)で作ろうかと思ったのですが、よくよく調べてみると無料で利用できる時間の制限があるそうなので、それであれば環境から構築しようと[DigitalOcean](https://www.digitalocean.com/)を契約してみました。

DigitalOceanの契約については、[ココの記事で詳しく書いてありました](http://yutapon.hatenablog.com/entry/2014/04/15/102832)が、画面自体が簡単だったのでジロジロと見ながら登録はしなくても大丈夫でした。

OSについてはいつも使っているCentOSにしました。CoreOSも選択出来るようなので、Dockerを利用する構成もありかもしれませんね。勉強しないと…。

また、<del>面倒なので</del>Railsサーバを使おうかと思っていたのですが、80ポートにあてがうためには権限が足りなかったので、<del>仕方なく</del>Unicorn + Nginxを利用することにしました。

ちなみに、Rails + Passenger + Nginx(Apache)という構成の方がシンプルなのですが、メモリが1GB以上無いとPassengerのインストールが出来なかったので断念しています。

### 雑談のおまけ

一応Heroku構築時の参考ページを残しておきます。

- [Rails x Herokuでアプリを作成 [完全初心者向けチュートリアル] – 酒と泪とRubyとRailsと](http://morizyun.github.io/blog/beginner-rails-heroku-tutorial/)

以下はRails + Passenger + Nginxを試していた時のメモ。

- [rbenv+nginx+passenger+rails環境構築メモ(CentOS) – Qiita](http://qiita.com/FumihiroSaito/items/4a50e12a769fb7014df6)

「passenger-install-nginx-module」が実行できず断念しました…。


## Railsの準備

まず、rbenvを利用してRubyを用意します。
 （rvmとドチラが良いのだろう？と調べた所、rvmはシェルを上書きしてしまうそうなので、rbenvの方が最近は流行ってるんだと思います。）

```shell
# rbenvを用意
cd /usr/local/
git clone https://github.com/sstephenson/rbenv.git
cd rbenv
# 環境変数の設定
echo 'export RBENV_ROOT="/usr/local/rbenv"' >> /etc/profile
echo 'export PATH="${RBENV_ROOT}/bin:${PATH}"' >> /etc/profile
echo 'eval "$(rbenv init -)"' >> /etc/profile
# ruby-buildを用意
git clone https://github.com/sstephenson/ruby-build.git /usr/local/rbenv/plugins/ruby-build
# インストール
rbenv install -v 2.2.3
rbenv global 2.2.3
rbenv rehash
# rubyの動作確認
ruby -v
```

Railsはgemでインストールします。簡単ですね。

```shell
gem install --no-ri --no-rdoc rails
gem install bundler
```

ちなみに、参考サイトに書いてあったのでそのまま利用していたのですが、「–no-ri –no-rdoc」のオプションはドキュメントをインストールしないようにするオプションなんだそうです。

### Railsの基本コマンド

Railsには便利なコマンドが沢山揃えられていますので、その中でも基本的なコマンドだけ残しておきます。

プロジェクトを作成する

```shell
rails new projectname
```

プロジェクトのベースのファイルを一気に作成します。まずはこのコマンドを実行してRailsプロジェクトの作成を開始する感じになります。

登録・編集・削除の一通りの処理を追加する

```shell
rails g scaffold modelname column_foo:string column_bar:integer
```

登録・編集・削除の一通りの処理に必要なModel、View、Controllerを作成してくれます。リレーションをしないような簡単な処理であればScaffoldと見た目の体裁を整えるだけで作れるのではないかと思うくらい便利です。

ちなみに、「g」は「generate」の省略形です。

作成したscaffoldを削除する

```shell
rails destroy scaffold modelname
```

scaffoldで作成する時に、カラムを一つ忘れてしまった、という様な、migrationをわざわざ作成する位なら削除したほうが早い、といった時に利用すると便利な操作です。

Modelを追加する

```shell
rails g model modelname column_foo:string column_bar:integer
```

ControllerとViewを追加する

```shell
rails g controller controllername index show
# index show はControllerに追加するメソッド
```

Model、Controller（、View）それぞれを作成するコマンドです。

Modelにカラムを追加する

```shell
rails g migration AddColumnBazToModelname column_baz:string
```

一度作ったModelにカラムを追加したい時に。正確にはmigrationを作成する処理です。
 「AddColumnBazToModelname」の部分は、「Add(追加するカラム名のキャメルケース)To（追加するモデル名のキャメルケース）」というような指定になります。

migrationを実行する

```shell
rake db:migrate
```

scaffoldやmodelを作成しただけではデータベースには反映されず、migrationを作成するだけですので、このコマンドを実行してデータベースに反映させる必要があります。

Railsサーバを起動する

```shell
rails s
```

Railsサーバを起動します。上記コマンドだと、127.0.0.1:3000（localhost）でしかつながらないので、ポートを変更したり外部からでもアクセスさせるためには以下のように実行します。

外部向けにRailsサーバを起動する

```shell
rails s -b 0.0.0.0 -p 8080 -d
```

ちなみに「-d」はデーモンとして起動させるオプションです。

また、これら以外にもrailsのコマンド・オプションは存在しています。有効に利用していくとかなり効率的に開発を進められそうですね。


## 参考サイト

- [rails環境構築（CentOS + ruby on rails） – Qiita](http://qiita.com/shinyashikis@github/items/3501c5f7f71a8e345c3d)
- [ruby – RVM と RBEnvの違いは？ – スタック・オーバーフロー](http://ja.stackoverflow.com/questions/2955/rvm-%E3%81%A8-rbenv%E3%81%AE%E9%81%95%E3%81%84%E3%81%AF)
- [いつも忘れる「Railsのgenerateコマンド」の備忘録 – maeharin log](http://maeharin.hatenablog.com/entry/20130212/rails_generate)


## シリーズ

- [その２ 「Unicorn+Nginx編」](https://blog.sus-happy.net/ruby-drunk-list-2/)
- [その３ 「Railsアプリ構築編」](https://blog.sus-happy.net/ruby-drunk-list-3/)


Ruby on Railsの勉強がてらに呑んだくれリストを作ってみた（その１ Rails環境構築編）



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


## 作る

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

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

[ということで、出来上がったものがコチラ](http://demo.sus-happy.net/counter/)。
 （アクセス時に名前の入力が求められます。）

[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風レベルアップカウンターを作ってみた



そういえば、[HOBBYカテゴリー](/category/hobby/)が用意されているのに殆ど投稿していないなぁ…と思い、たまに写真を撮りにいってるコトを書いていこうかなと思い立ったので、少し前に行った郡上八幡のコトを残しておきます。


## 郡上八幡まで

名古屋から岐阜駅までJRで1本、そこから高速八幡線で1時間ちょっとくらいで着きました。時間に余裕があるのであれば、郡上八幡駅までの長良川鉄道が川沿いを走るので景色も楽しめるそうです。

ただし、岐阜からのバスだと郡上八幡の城下町の中まで入って降ろしてくれるのですが、電車でいくと郡上八幡駅は少し離れた場所に着くので頑張って歩くなり、タクシーを呼ぶなりしないと行けないのでちょっと大変そうです。


## 郡上八幡城へ

[![八幡城 遊歩道](https://farm6.staticflickr.com/5621/20546106186_2f0793f1f6_b.jpg)](https://www.flickr.com/photos/sushat4692/20546106186/in/album-72157654921968553/ "八幡城 遊歩道")<script async="" charset="utf-8" src="//embedr.flickr.com/assets/client-code.js"></script>

あまり詳しく調べずに到着したので、とりあえず郡上八幡城に向かいました。

山城なのでちょっとだけ山を登っていく必要があります。とは言え、道は整備されて車も通れる状態なのでそこまでは苦では無いと思います。<del datetime="2015-08-28T00:31:17+00:00">（城まで着いた時には汗だくでしたが）</del>

頑張って20分位歩くと司馬遼太郎氏に「日本で一番美しい山城」と称された城が見えてきます。

[![八幡城](https://farm6.staticflickr.com/5814/20385655109_0be38be086_b.jpg)](https://www.flickr.com/photos/sushat4692/20385655109/in/dateposted-public/ "八幡城")<script async="" charset="utf-8" src="//embedr.flickr.com/assets/client-code.js"></script>

小さめの城ながら白壁が綺麗で、山中に現れる姿は確かに綺麗ですね。狭間もぐるりと拵えてあっていい感じです。

郡上八幡城は残念ながら戦時中の空襲で焼けてしまったそうなのですが、再建時にも木造で作られており、風格は残っていました。調べてみたところどうも最古の木造再建天守なんだそうです。

見学料もお手頃の300円。天守閣からの眺めも良く、郡上八幡に訪れた時にはオススメです。

[![八幡城 天守閣から](https://farm6.staticflickr.com/5756/20385655709_6121155ea6_b.jpg)](https://www.flickr.com/photos/sushat4692/20385655709/in/dateposted-public/ "八幡城 天守閣から")<script async="" charset="utf-8" src="//embedr.flickr.com/assets/client-code.js"></script>


## 水の城下町へ

郡上八幡といえば直ぐそばを流れる清流と、町内に張り巡らされる用水路による水の城下町。町内を歩いているとどこかからか水の音が聞こえてくるのは趣があり、歩いている事自体が気持ちのよい町でした。

城から降りてグルグルと町中を回っていると、写真撮影を2回頼まれました。頼みやすいオーラが出ているのかなぁと良い傾向だと捉えていますが、カメラ持ってるのもあるのかもしれません。とは言え、そのくらい観光客も見えました。

[![川](https://farm6.staticflickr.com/5783/19949746094_0f64d3f492_b.jpg)](https://www.flickr.com/photos/sushat4692/19949746094/in/album-72157654921968553/ "川")<script async="" charset="utf-8" src="//embedr.flickr.com/assets/client-code.js"></script>

そういえば、郡上八幡といえば橋の上からの飛び込み。地元の子っぽい若い衆が何人か飛び込んでいました。もう少し若ければ…何て思いつつ、そもそも高いところあんまり得意じゃないので駄目かも。

でも飛んでる姿を見てると気持ちよさそうですね。

[![ダイブ前](https://farm6.staticflickr.com/5730/20384337970_0a73fd37cf_b.jpg)](https://www.flickr.com/photos/sushat4692/20384337970/in/album-72157654921968553/ "ダイブ前")<script async="" charset="utf-8" src="//embedr.flickr.com/assets/client-code.js"></script>

また、丁度郡上おどりの真っ最中で、中心地では出店の準備をしている方が沢山いました。提灯も飾ってあり、時間が遅くなってくると浴衣を着ている姿もちらほら見えるようになり、祭りムードが増してきます。

今回はそのまま参加せずに帰ってしまいましたが、郡上おどり中の写真も撮ってみたいなぁ。

[![町並み](https://farm6.staticflickr.com/5819/19949749914_199ecebbdb_b.jpg)](https://www.flickr.com/photos/sushat4692/19949749914/in/album-72157654921968553/ "町並み")<script async="" charset="utf-8" src="//embedr.flickr.com/assets/client-code.js"></script>

しかし最後にトラブル発生。郡上おどり開催中はバスが町内に入ってこない、という情報を調べておらず30分位待っていたら店のオバちゃんに「今日はバスは来ないよ」、という通告を受ける事態となりました。

結局電車で来た時と同じくらいの距離を歩いて帰路につきました。


## まとめ

地味に交通の便が不便で、大きなコレだ！という目玉もありませんが、綺麗な町並みと郡上八幡城は一度見に行っても良いと思う町でした。でも、郡上おどりに参加してないので、全ての魅力を感じられてる訳では無さそうですね。

今度は時間に余裕を持って電車で行ってみたいなぁと思いました。また、郡上おどりも体力がある内に徹夜で参加してみたいです。

[今回の一人旅のアルバム](https://www.flickr.com/photos/sushat4692/albums/72157654921968553)




ぶらり一人旅「郡上八幡」



最近[H2O](https://h2o.examp1e.net/)という[nginx](http://nginx.org/en/)よりも早いと言われているらしいWebサーバを知ったので、取り敢えず入れてみました。

またコレを機に、[HHVM](http://hhvm.com/)よりも早くなったらしいPHP7も気になっていたので、そちらも入れてみました。今のところWordPressは動いているみたいです。

ちなみにCentOS7です。


## 目次

- [H2Oの用意](#h2o-ready)
  - [H2Oのインストール](#h2o-install)
  - [H2Oの設定](#h2o-configuration)
  - [H2Oの起動・停止](#h2o-boot)
- [PHP7をphpenv+php-buildでインストール](#php7-ready)
  - [phpenvのインストール](#phpenv-install)
  - [php-buildのインストール](#php-build-install)
  - [php-buildでPHP7をインストール](#php7-install)
  - [PHP7でphp-fpmを設定・起動](#php7-boot)


## H2Oの用意

### H2Oのインストール

「Development Tools」をインストールしておけば、わりとサクッとインストール出来るようです。後は依存パッケージをインストール。

```shell
yum groupinstall "Development Tools"
yum install cmake
yum --enablerepo=rpmforge install libyaml-devel
```

H2OのソースはGitHubに公開されているので、Gitで取得。cmake, make, make installでインストールします。

```shell
git clone https://github.com/kazuho/h2o.git
cd h2o
git submodule update --init --recursive
cmake .
make h2o
make install
```

まだ、足りないパッケージがありました。

```shell
yum install libssl-dev
yum install openssl-devel
```

make installで完了です。

```shell
make install
```

### H2Oの設定

適当な場所にH2Oの設定ファイルを記述します。

```shell
vi /path/to/h2o.conf
```

WordPress向けに書いた記述はこんな感じ。HTTP/2の仕様的にはSSL通信じゃなくなっても良くなったそうなのですが、まだブラウザ側で制限があるようなので、SSL向けの設定になっています。

```yaml
pid-file: /path/to/h2o.pid
user: nobody
error-log: /path/to/error.log

listen: 80
listen:
  port: 443
  ssl:
    certificate-file: /path/to/ssl.pem # SSLのサーバ証明書+中間証明書
    key-file: /path/to/ssl.key # SSLの秘密鍵

# PHPの設定
file.custom-handler:
  extension: .php
  fastcgi.connect:
    host: 127.0.0.1
    port: 9000
    type: tcp

# ディレクトリインデックス
file.index: [ 'index.php', 'index.html' ]

# ドメイン設定
hosts:
  # HTTP/2を使いたかったのでHTTPSにリダイレクトしてSSL通信に統一
  "example.net:80":
    paths:
      /:
        redirect:
          status: 301
          url: https://example.net/

  "example.net:443":
    access-log: /path/to/access.log
    paths:
      /:
        # 公開ディレクトリの指定
        file.dir: /path/to/httpdocs
        file.dirlisting: on
        # file.dirに見つからなければindex.phpで受け取る
        redirect:
          url: /index.php/
          internal: YES
          status: 307
```

結構短く書けてますね。  
 また、SSLは[StartSSL](https://www.startssl.com/)を利用させて頂きました。

### H2Oの起動・停止

[マニュアルに書いてある方法](https://h2o.examp1e.net/configure/quick_start.html)を参照させて頂きました。

```shell
# 起動（-cオプションには設定ファイルのパスを指定する）
h2o -m daemon -c /path/to/h2o.conf
# 停止（設定ファイルに記述したpid-fileのパスを指定する）
kill -TERM `cat /path/to/h2o.pid`
```

取り敢えずこれでH2O+PHPの環境が整いました。また、SSLで接続するとちゃんとHTTP/2で通信してくれます。（このブログもHTTP/2になっている…はず…）


## PHP7をphpenv+php-buildでインストール

どうせなので、phpenvとphp-buildを使ってPHPをインストールしてみました。

### phpenvのインストール

phpenvもGitHubに公開されていますので、Gitで取得します。また、インストール用のシェルスクリプトが用意されていますので、そのまま実行。

```shell
git clone https://github.com/CHH/phpenv.git
cd phpenv/bin/
sh phpenv-install.sh
```

パスを通して完了です。

```shell
export PATH="/root/.phpenv/bin:$PATH"
eval "$(phpenv init -)"
source ~/.bashrc
```

### php-buildのインストール

同様に、php-buildもGitHubで公開され、インストール用のシェルスクリプトが用意されています。便利便利。

```shell
git clone https://github.com/CHH/php-build.git
cd php-build/
sh install.sh
```

### php-buildでPHP7をインストール

php-buildでインストール出来るバージョンの一覧を見てみます。

```shell
php-build --definitions
## 略
5.6.5
5.6.6
5.6.7
5.6.8
5.6.9
5.6snapshot
7.0.0alpha1
7.0.0alpha2
master
```

7.0.0alphaがあるので利用させて頂きました。

```shell
php-build 7.0.0alpha2 ~/.phpenv/versions/7.0.0alpha2
```

が、依存パッケージがことごとく入っていないので頑張ります。

取り敢えず必要らしいパッケージを一気にインストール。

```shell
yum install libxml2-devel bison bison-devel openssl-devel curl-devel libjpeg-devel libpng-devel libmcrypt-devel readline-devel libtidy-devel libxslt-devel
```

re2cをソースからインストール。

```shell
wget http://sourceforge.net/projects/re2c/files/re2c/0.14.3/re2c-0.14.3.tar.gz
tar zxvf re2c-0.14.3.tar.gz
cd re2c-0.14.3
./configure
make make install
```

libmcryptも足りない。

```shell
yum install --enablerepo=epel libmcrypt libmcrypt-devel
```

libtidyも足りない。

```shell
yum install --enablerepo=epel libtidy libtidy-devel
```

ここまでインストールして入りました。

```shell
php-build 7.0.0alpha2 ~/.phpenv/versions/7.0.0alpha2
```

### PHP7でphp-fpmを設定・起動

php-buildでインストールしたPHPの設定ファイルをいじって、実行します。（既にphp-fpmを起動している場合は停止する必要があります）

```shell
# php.iniを更新
vi ~/.phpenv/versions/7.0.0alpha2/etc/php.ini
# php-fpm.confを更新
cp ~/.phpenv/versions/7.0.0alpha2/etc/php-fpm.conf.default ~/.phpenv/versions/7.0.0alpha2/etc/php-fpm.conf
vi ~/.phpenv/versions/7.0.0alpha2/etc/php-fpm.conf
# php-fpm.d/www.confも更新
vi ~/.phpenv/versions/7.0.0alpha2/etc/php-fpm.d/www.conf
# php-fpmを実行
~/.phpenv/versions/7.0.0alpha2/sbin/php-fpm &
```


## 雑感

思っていたよりも設定内容は少なくかけることにビックリました。なにもチューニングしていなくても、それなりの速度が出るそうです。

Apacheやnginxと繋げて、リバースプロキシ部分だけをH2Oを使う、と言った方法を取っても良いそうなのですが、そこまでの知識は無いので、取り敢えずH2O単体で、リバースプロキシも無しです。（なしですよね？）

HTTP/2も名前だけ知っており、簡単には使えないんだろうなぁ、と思っていたらサクッと動いたのでビックリしました。HTTP/2らしさはあんまりまだありませんが、環境が整っただけでも取り敢えず良しとしておきます。

<del>あと、SSLにしたので、はてブのAPI取得出来なくなりました。SSL対応してくれないかなぁ…。</del>


## 参考

- [高速なWebサーバーという噂のh2oをCentOS 6.6に入れてみたメモ | GUiLZ.ORG](http://www.guilz.org/2015/04/26/%E9%AB%98%E9%80%9F%E3%81%AAweb%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A8%E3%81%84%E3%81%86%E5%99%82%E3%81%AEh2o%E3%82%92centos-6-6%E3%81%AB%E5%85%A5%E3%82%8C%E3%81%9F%E3%83%A1%E3%83%A2/)
- [新、PHPとH2OをfastCGIでつなぐ話、解決編 – uzullaがブログ](http://uzulla.hateblo.jp/entry/2015/06/22/014853)
- [モダンなPHP開発環境を構築する – phpenv + php-build で 複数のPHPバージョンを管理する | Creator Life](http://creator-life.net/modern-php-env/)
- [virtualbox(centos)でphp-buildでコンパイルしたphp-fpmをnginxで使う為の設定メモ(virturalhostの設定まで) – Qiita](http://qiita.com/ryurock/items/b51b7ec9d7c378f60237)


サーバの構成をCentOS7+H2O+php-fpm(PHP7)にしてみた



次世代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を少し触ってみたのでテクスチャを利用する際のメモ



P2Pについて色々と調べている中で、UnityとFlashについて一旦テストで実験までしてみたので、忘れても良いようにメモを残しておきます。

なお、「P2P通信すること」だけが目的だったため、Unityのゲームエンジンとしてのオブジェクトの同期処理等は調べていないためその辺りの説明は省いています。


## 目次

- [Unity（UnityScript）でのP2P](#unity-head)
- [Flash（AIR for iOS/Android）でのP2P](#flash-head)


## <a name="unity-head">Unity（UnityScript）でのP2P</a>

NetWorkViewsというコンポーネントが提供されているので、そちらを利用すると容易に実装する事が可能です。

詳しくドキュメントは読んでいませんが、実行した端末の内1台をホストとして用い、他の端末をホスト端末のIP/ポートに接続することで実現するようです。

### ホストとして接続

まずはネットワーク内の1台をホストとして接続させます。

```javascript
var port:int = 65535;
Network.InitializeServer( 10, port, false );
```

### ホストに接続

他の端末はホストに接続しているIPとポートに接続します。

```javascript
var ip:String = '192.168.***.***';
var port:int  = 65535;
Network.Connect( ip, port );
```

### コールバック

接続完了、切断など、それぞれの処理時のコールバック関数が用意されています。

```javascript
private function OnDisconnectedFromServer()
{
    // サーバから切断
}

private function OnPlayerDisconnected( pl: NetworkPlayer )
{
    // 他のプレイヤーが切断
}

private function OnServerInitialized()
{
    // サーバ初期化完了
    // Network.InitializeServer完了
}

private function OnConnectedToServer()
{
    // サーバに接続
    // Network.Connect完了
}

private function OnFailedToConnect()
{
    // 接続失敗
}
```

### データ通信

端末同士で通信をする際は、RPCを用いて別端末のメソッドに引数を渡してコールすることで実現します。  
 また、RPCで実行する関数には、「**@RPC**」（C#だと「**[RPC]**」）とラベリングする必要があります。

```javascript
private var nView: NetworkView;

// データ送信
public function sendMessage( msg: String )
{
    nView.RPC( 'fugaFunctions', RPCMode.ALL, msg );
}

// データ受信
@RPC
private function fugaFunctions( msg ) {
    Debug.Log( msg );
}
```

また、RPCに渡せる引数の型は、「int, float, string, NetworkPlayer, NetworkViewID, Vector3, Quaternion」の内のいずれかで、一度に渡せるデータ量は4KB以内であること、という制限があります。


## <a name="flash-head">Flash（AIR for iOS/Android）でのP2P</a>

Flashには、Adobe社が開発しているRTMFPを活用したP2P通信が可能となっています。Unityとは異なりホストを用意する必要がなく、ネットワーク自体に名前を付け、「同じ名前のネットワークに接続している端末」にデータを通信することが可能です。

また、以降のサンプルコードにはimportの表記を抜いていますので、ご利用の際は必要な内容を追記下さい。

### Adobe Cirrusに接続する

この辺り詳しくは調べていないのですが、Adobe Cirrus（以前はAdobe Stratus？）にピア同士を接続する仲介を頑張ってもらいます。  
 その際に開発者キーが必要となりますので、[Adobeのサイトから取得](https://www.rtmfp.net/cgi-bin/cirrusdevkey)します。（Adobe IDが必要となります）

```javascript
private const SERVER:String = 'rtmfp://p2p.rtmfp.net';
private const DEVKEY:String = '開発者キー';
    
var _connect:NetConnection;

// Cirrusに接続開始
private function doConnect():void
{
    _connect = new NetConnection();
    _connect.addEventListener( NetStatusEvent.NET_STATUS, _netStatusHandler );
    _connect.connect( SERVER, DEVKEY );
}

private function _netStatusHandler( e:NetStatusEvent ):void
{
    switch( e.info.code ) {
    	case 'NetConnection.Connect.Success':
    	    trace( '接続成功' );
    	    break;
    }
}
```

connectの第一引数にnullや「rtmfp:」だけを入力する場合もあるそうですが、違いについては詳しく調べていません。また調査してみます。

### ネットワークに接続する

Cirrusに接続ができたらネットワークに接続します。  
 この時にネットワークに名前を付けることで、ローカルネットワーク全体が対象、という訳ではなく特定の端末と接続出来るようになります。（com.example.application というようなドメイン+アプリケーション名で付けるのが分かりやすく、一般的らしい）

その他、GroupSpecifierクラスの属性がネットワークの仕様となり、一度ネットワークに接続すると途中で変更することが出来ないのでご注意下さい。（[それぞれの属性についてはコチラを参照ください](http://help.adobe.com/ja_JP/FlashPlatform/reference/actionscript/3/flash/net/GroupSpecifier.html)）  
 今回はメッセージのやり取りを行えるように「**postingEnabled**」と「<string>serverChannelEnabled</string>」をtrueにしておきます。

```javascript
// _netStatusHandler以外の前述の例
    
var _groups:NetGroup,
    _groupspec:GroupSpecifier;

// ネットワークに接続開始
private function onConnect():void
{
    _groupspec = new GroupSpecifier( 'ネットワーク名' );
    _groupspec.postingEnabled = true;
    _groupspec.serverChannelEnabled = true;
    
    // NetGroupには、Cirrusに接続したNetConnectionとGroupSpecifierの文字列化したデータを渡す
    _groups = new NetGroup( _connect, _groupspec.toString() );
    _groups.addEventListener( NetStatusEvent.NET_STATUS, _netStatusHandler );
}

// 前述の例に追記してます
private function _netStatusHandler( e:NetStatusEvent ):void
{
    switch( e.info.code ) {
    	case 'NetConnection.Connect.Success':
    	    trace( '接続成功' );
    	    onConnect();
    	    break;
    	case 'NetGroup.Connect.Success':
            trace( 'ネットワークに接続成功' );
            break;
        case 'NetGroup.Neighbor.Connect':
            trace( '同じネットワークに別の端末が接続' );
            break;
    }
}
```

### データ通信

データの送信はNetGroupのpostメソッドを呼ぶだけですが、前述のとおりpostingEnabledがtrueになっていないと利用することは出来ません。

受け手側はNetStatusEvent.NET_STATUSが呼ばれるので、「NetGroup.Posting.Notify」というコードで判別して処理します。  
 また、同じデータをpostしようとすると送信する前に自動的に破棄してしまうので、シーケンス番号を付与しておいた方が良いようです。

```javascript
// _netStatusHandler以外の前述の例

// シーケンス番号
private var _ID:int = 0;

// データ送信
private function sendMessage( msg: String ):void
{
    var message = new Object();
    message.ID  = _ID ++;
    message.msg = msg;
    message.sender = _connect.nearID;
    
    _groups.post( message );
}

// データ受信
private function onGetMessage( message: Object ):void
{
    trace( message.msg );
}

// 前述の例にさらに追記してます
private function _netStatusHandler( e:NetStatusEvent ):void
{
    switch( e.info.code ) {
    	case 'NetConnection.Connect.Success':
    	    trace( '接続成功' );
    	    onConnect();
    	    break;
    	case 'NetGroup.Connect.Success':
            trace( 'ネットワークに接続成功' );
            break;
        case 'NetGroup.Neighbor.Connect':
            trace( '同じネットワークに別の端末が接続' );
            break;
        case 'NetGroup.Posting.Notify':
            onGetMessage( e.info.message );
            break;
    }
}
```

また、Flashの場合も送信できる型に制限があり、「Object,int,Number,String」のいずれかである必要があります。（制限サイズは分かりませんが結構大きなデータも一気に送信できていました）


## 雑感

まだ接続してメッセージ送る程度の内容なので、もっと便利な仕組みがあるはずですが、それぞれに一長一短がありそうですね。  
 実際にAndroidまでは同期しているコトを確認出来て、面白そうな事が出来そうで楽しく実験できました。  
 もうちょっと試してみて今回必要な仕組みに最適なモノを活用していきたいと思います。


## 参考

### Unity

- [Unity NetworkViewでシンプルChatを作ってみる : ブリブサー開発戦線　〜僕らはあの戦いを忘れない〜](http://blog.livedoor.jp/bribser_dev/archives/3628336.html)
- [Unity – マニュアル: ネットワーク リファレンス ガイド](http://docs.unity3d.com/ja/current/Manual/NetworkReferenceGuide.html)

### Flash

- [RTMFP 上の 1 対 1 ストリーミング （NetConnection 編） – akihiro kamijo](http://cuaoar.jp/2010/03/rtmfp-1-1.html)
- [RTMFP 上の 1 対 1 ストリーミング （NetStream 編） – akihiro kamijo](http://cuaoar.jp/2010/03/rtmfp-1-1-netstream.html)
- [RTMFP ストリームのアクセス制御 – akihiro kamijo](http://cuaoar.jp/2010/03/rtmfp.html)
- [NetConnection – Adobe ActionScript® 3（AS3 ）API リファレンス](http://help.adobe.com/ja_JP/FlashPlatform/reference/actionscript/3/flash/net/NetConnection.html)

SUSH-i LOG

名古屋のWeb制作会社につとめる
プログラマーのつぶやき

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

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

Herokuで日本語を含むページのスクリーンショットを撮ってみた（その2）

Herokuで日本語を含むページのスクリーンショットを撮ってみた

GhostからHexoに乗り換えてGitHub Pagesに移行してみた

やっとこさmacOS Sierraにバージョンアップしてみた

マニラのラーメン事情『Mendokoro Ramenba』味噌ラーメン+餃子

WordPressからGhostに移管してみた

Ansibleを使って自分用のVagrant環境構築の自動化をしてみた

ぶらり一人旅「小原村川見四季桜の郷」

Ruby on RailsをH2O上で動くようにしてみた

Ruby on Railsの勉強がてらに呑んだくれリストを作ってみた（その３ Railsアプリ構築編）

ぶらり一人旅「半田矢勝川堤」

Ruby on Railsの勉強がてらに呑んだくれリストを作ってみた（その２ Unicorn+Nginx編）

Ruby on Railsの勉強がてらに呑んだくれリストを作ってみた（その１ Rails環境構築編）

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

ぶらり一人旅「郡上八幡」

サーバの構成をCentOS7+H2O+php-fpm(PHP7)にしてみた

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

Unity（UnityScript）とFlash（AIR for iOS/Android）のP2Pについて調べたのでメモ

SUSH-i LOG

名古屋のWeb制作会社につとめるプログラマーのつぶやき

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

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

Herokuで日本語を含むページのスクリーンショットを撮ってみた（その2）

Herokuで日本語を含むページのスクリーンショットを撮ってみた

GhostからHexoに乗り換えてGitHub Pagesに移行してみた

やっとこさmacOS Sierraにバージョンアップしてみた

マニラのラーメン事情 『Mendokoro Ramenba』 味噌ラーメン+餃子

WordPressからGhostに移管してみた

Ansibleを使って自分用のVagrant環境構築の自動化をしてみた

ぶらり一人旅「小原村 川見四季桜の郷」

Ruby on RailsをH2O上で動くようにしてみた

Ruby on Railsの勉強がてらに呑んだくれリストを作ってみた（その３ Railsアプリ構築編）

ぶらり一人旅「半田 矢勝川堤」

Ruby on Railsの勉強がてらに呑んだくれリストを作ってみた（その２ Unicorn+Nginx編）

Ruby on Railsの勉強がてらに呑んだくれリストを作ってみた（その１ Rails環境構築編）

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

ぶらり一人旅「郡上八幡」

サーバの構成をCentOS7+H2O+php-fpm(PHP7)にしてみた

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

Unity（UnityScript）とFlash（AIR for iOS/Android）のP2Pについて調べたのでメモ

名古屋のWeb制作会社につとめる
プログラマーのつぶやき

マニラのラーメン事情『Mendokoro Ramenba』味噌ラーメン+餃子

ぶらり一人旅「小原村川見四季桜の郷」

ぶらり一人旅「半田矢勝川堤」