## 概要

先日納品した案件で、

- Google フォームをカスタマイズ（オリジナルデザイン）
- GAS で自動メール送信
- 更に reCAPCHAv3 を導入
- フォーム送信後はページ遷移しない

という要件でフォームを作成しました。今後も実装することがあるかもしれないので、まとめます。

## まずは GoogleForm を作成

GoogleForm を作成し、デベロッパーツールで必要な情報を取得します。

![Google Form](img01.jpg)

`form`からは`action`の値を取得します。
以下の例だと`https://docs.google.com/forms/u/0/d/e/1FAIpQLSdy0e3RjxHOkLv-qIXtLED3k3Fy5wZwCUAh1PSnNYNzrOJ9TQ/formResponse`です。

```html
<form
  action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSdy0e3RjxHOkLv-qIXtLED3k3Fy5wZwCUAh1PSnNYNzrOJ9TQ/formResponse"
  target="_self"
  method="POST"
  id="mG61Hd"
  jsmodel="TOfxwf Q91hve CEkLOc"
  data-shuffle-seed="3953797017996089640"
  data-response="%.@.[]]"
  data-first-entry="0"
  data-last-entry="4"
  data-is-first-page="true"
></form>
```

続いて各種入力の input からは、`data-params`の中の数字を取得します。

以下の例だと`2012856439`が必要な数字です。（`1625842955`は使いません。）

```html
<div
  jsmodel="CP1oW"
  data-params='%.@.[1625842955,"メールアドレス",null,0,[[2012856439,[],true,[],[],null,null,null,null,null,[null,[]]]],null,null,null,[],null,null,[null,"メールアドレス"]],"i1","i2","i3",false]'
></div>
```

## reCAPCHAv3 の設定

続いて、reCAPCHAv3 の key を取得します。

こちらのページ<https://www.google.com/recaptcha/admin/create>から作成します。

- ラベル → 好きな名前を入力
- reCAPTCHA タイプ → `reCAPTCHA v3`を選択
- ドメイン → ドメインと、localhost でテストする場合は`localhost`を入力（本番公開の前に localhost は要削除）

作成後に出てくる`サイトキー`と`シークレットキー`は使うので、メモしておくこと。

## HTML の作成

事前準備は整ったので、HTML を作成します。

GoogleForm で準備した入力欄`data-params`の数字は各種 input の`name`に`entry.数字`の形で対応したものを入力する。

```html
<div class="bl_contact">
  
  
  <form
    action="https://docs.google.com/forms/u/0/d/e/xxxxxxxxxxxx/formResponse"
    class="bl_form"
    method="post"
    name="customForm"
    target="dummyIframe"
  >
    <div class="bl_form_wrap">
      <div class="bl_form_item">
        <label for="inputMail">メールアドレス <em>*</em></label>
        
        <input
          id="inputMail"
          name="entry.123456789"
          required
          placeholder="example@mail.com"
          type="email"
        />
      </div>
      <div class="bl_form_item">
        <label for="inputName">氏名 <em>*</em></label>
        
        <input
          id="inputName"
          name="entry.123456789"
          required
          placeholder="例）山田　太郎"
        />
      </div>
      <div class="bl_form_item">
        <label for="inputMessage">お問い合わせ内容 <em>*</em></label>
        
        <textarea
          id="inputMessage"
          name="entry.123456789"
          placeholder="お問い合わせ内容を入力"
          required
        ></textarea>
      </div>
      <div class="bl_form_item">
        <label>
          <input
            id="js-agree"
            name="agree"
            required
            type="checkbox"
            value="1"
          />
          <span
            >個人情報の取り扱いに関しては<a href="./privacy/"
              >プライバシーポリシー</a
            >をお読みいただき、同意のうえお問い合わせください。</span
          >
        </label>
        <p>※当フォームをご利用の際には、ご同意いただく必要があります。</p>
      </div>
    </div>
    <div class="bl_form_button">
      <button class="bl_form_send" type="submit">送信</button>
    </div>
    
    
    <input
      id="recap"
      name="entry.123456789"
      type="hidden"
      value=""
      data-sitekey="yyyyyyyyyyyyyyyyyyyyyy"
    />
  </form>
  
  <iframe name="dummyIframe" style="display:none"></iframe>
  
  <div class="bl_form_message">
    <p>お問い合わせの送信が完了しました。</p>
    <p>この度はお問い合わせをいただきまして、誠にありがとうございます。</p>
    <p>
      お問い合わせ内容を確認しまして、担当者よりご連絡をさせていただきます。
    </p>
    <p>今しばらくお待ちくださいませ。</p>
  </div>
</div>
```

`head`で reCAPCHA の JS を読み込むのも忘れずに

```html

<script src="https://www.google.com/recaptcha/api.js?render=xxxxxxxxxxxx"></script>
```

## submit 時のフォームの挙動

submit 時の挙動は js で制御します。

```js
const key = $('#recap').attr('data-sitekey'); // reCAPTCHAのsitekeyを取得
$('.bl_form').on('submit', function (e) {
  e.preventDefault(); //sumitを止める
  grecaptcha.ready(function () {
    grecaptcha.execute(key, { action: 'submit' }).then(function (token) {
      //recapchaを実行
      $('#recap').val(token); //戻り値tokenを#recapに格納
      $('.bl_form').unbind('submit').submit(); //formをsubmit
      $('.bl_form_message').show(); //送信後メッセージを表示
    });
  });
});
```

## GAS の設定

フォームの設定に合わせて GAS で、メールの自動送信と reCAPTCHA のチェックを行います。

reCAPTCHA が問題ないときのみメールを送信します。

```js
// reCAPTCHAのシークレットキー
const secret = 'xxxxxxxxxxxxxxxxxxxxxx';

function verifyCaptcha(arg) {
  const payload = { secret, response: arg }; // reCAPTCHAのシークレットキー// reCAPTCHAのシークレットキー
  const url = 'https://www.google.com/recaptcha/api/siteverify';
  const resp = UrlFetchApp.fetch(url, {
    payload,
    method: 'POST',
  }).getContentText();
  return JSON.parse(resp).success; //recapchaが成功したかboolで返す
}

function submitForm(e) {
  const itemResponses = e.response.getItemResponses();
  let userMail;
  let userName;
  let userMessage;
  let recaptcha;
  let body1;
  let body2;
  let subject;

  // フォームの入力内容を格納
  for (let i = 0; i < itemResponses.length; i++) {
    const question = itemResponses[i].getItem().getTitle();
    const answer = itemResponses[i].getResponse();
    if (question === 'メールアドレス') userMail = answer;
    if (question === '氏名') userName = answer;
    if (question === 'お問い合わせ内容') userMessage = answer;
    if (question === 'recaptcha') recaptcha = answer;
  }

  const resp = verifyCaptcha(recaptcha); //recapchaの値をチェック

  //reCAPTCHAが成功した場合
  if (resp) {
    // 自動返信メール
    subject = 'お問い合わせ内容確認';
    body1 =
      'お問い合わせの送信が完了しました。\n' +
      '受付内容' +
      '\nメールアドレス：' +
      userMail +
      '\n氏名：' +
      userName +
      '\nお問い合わせ内容：' +
      userMessage;

    GmailApp.sendEmail(userMail, subject, body1, {
      name: 'JWS',
    });

    // 通知メール
    subject = 'お問い合わせ受付完了メール';
    body2 =
      'サイトから問い合わせがありました。\n\n' +
      '受付内容' +
      '\n メールアドレス ' +
      userMail +
      '\n 氏名：' +
      userName +
      '\n 問い合わせ内容：' +
      userMessage;

    GmailApp.sendEmail('xxxx@gmail.com', subject, body2, {
      name: 'JWS',
    });
  }
}
```

## まとめ

簡単なようで、結構準備も必要なため実装に時間が掛かるかなと思います。

Google フォームの見た目を自由に変更できることで、Web サイトに埋め込むフォームとしての使い道がグッと広がるのではないかと思います。

ただ、GoogleForm の仕様変更があった場合、動作しなくなってしまうので、致命的な点もあります。。
LP など簡易なサイトなら問題ないかと思います。

### 参考サイト

以下のページを参考にさせていただきました。

- <https://zenn.dev/yurukei20/articles/9741118bfb5ee0>
- <https://www.imuza.com/entry/2020/08/16/154209>

Googleフォームをカスタマイズ＋reCAPTCHAv3導入


当サイトは、ブログを日本語 URL にしています。ブログのファイル名と画像パス等設定するときに何かと分かりやすいので、採用していたのですが、リリース後、SEO 周りの設定で色々問題が出てきていたので、注意点をまとめます。

## Sitemap.xml を日本語 URL にしていると上手く動作してくれない

これは`Next.js`に限った話ではないのですが、エンコードをせず、日本語のまま`sitemap.xml`に登録すると、正しく認識されません。

サーチコンソール上では読み込むが、反映されない？感じになります。

そのため、エンコードの加工を加えてから`sitemap.xml`に記述する必要があります。

## Next.js で Sitemap を生成する

サイトマップは、`next-sitemap`で導入すると簡単です。

ただ、URL をエンコードさせる方法が、日本語のサイトで説明しているページが無かったので、苦戦しました。。

`transform`というプロパティで`encodeURL`に`path`を渡してあげることで、実装できます。

以下のような感じです。

```js
// sitemap.config.js
module.exports = {
  siteUrl: 'https://jws.work',
  generateRobotsTxt: true,
  sitemapSize: 7000,
  transform: async (config, path) => {
    return {
      loc: encodeURI(path)
    };
  },
  outDir: './out'
};
```

### 参考

- [next-sitemap](https://github.com/iamvishnusankar/next-sitemap#readme)
- [Next.js に next-sitemap を導入して超手軽にサイトマップ sitemap.xml を生成しよう](https://fwywd.com/tech/next-sitemap)

## canonical も忘れずに

`canonical`についても忘れずに`encodeURI`しておく必要がある。

```js
<NextSeo canonical={encodeURI(`https://jws.work/blog/${props.blog.slug}/`)} />
```

## まとめ

上記設定を行うことで、ようやく日本語 URL を正しくクロールしてもらえるようになりました。

日本語 URL を扱う際は、諸々設定忘れずに。


Next.jsで日本語URLを扱う場合の注意点


なぜか僕の環境だと`Next.js`で`webpack5`を使うと HotReload がうまく動作しませんでした。

そのため、`webpack5:false`にして`webpack4`で build していたのですが、解消方法がようやく分かりました。

以下が参考になりました。

[https://github.com/vercel/next.js/issues/22317#issuecomment-863752692](https://github.com/vercel/next.js/issues/22317#issuecomment-863752692)

## 手順

`.env`ファイルをプロジェクトのルートに配置します。（`.env.local`でも OK）

以下の記述を追加します。

```env
WATCHPACK_POLLING=true
```

これだけで OK です。

`npm run dev`すれば、Hot Reload が上手く動作していると思います！

next のバージョンが問題？かもしれないので、一応以下のバージョンで動作確認しています。

```json
"next": "^11.0.1"
```

## build 時間

`webpack5`で動作させること build すると build 時間が大きく変わりました。

私の環境だと、

- webpack4 → 58s
- webpack5 → 20s

となり、大体 1/3 ぐらいの時間で build できるようになりました。

## まとめ

build の時間的にも`webpack5`は、かなり優れているなと思います。

同じように HotReload が動作しない方はお試しください！

※`Hot Reload`から`Fast Refresh`に名前変わってるみたいですね・・・


Next.jsでwebpack5使うとHotReloadが動かなかった件


`Next.js`で静的サイトの生成（SSG）する際に`<Image>`（`next/image`）を使うと上手くビルドできず、色々ハマったのでまとめます。

`next-optimized-images`の README を参考に進めます。

[https://github.com/cyrilwanner/next-optimized-images](https://github.com/cyrilwanner/next-optimized-images)

## 必要パッケージのインストール

まずは`next-optimized-images`をインストールします。

```shell
npm install next-optimized-images
```

その他一通り必要なパッケージをインストールします。

```shell
npm install imagemin-mozjpeg imagemin-optipng imagemin-gifsicle imagemin-svgo svg-sprite-loader webp-loader lqip-loader responsive-loader jimp image-trace-loader
```

## next.config の設定

場合によって異なるかと思いますが、以下のような感じで設定します。

今回は、画像パスを`@public`から開始できるようにエイリアスも設定しています。

```js
const path = require('path');
const withPlugins = require('next-compose-plugins');
const optimizedImages = require('next-optimized-images');
const { resolve } = require('path');

const nextConfig = {
  webpack: (config) => {
    // 画像パスを@publicから始められるようにエイリアスを設定
    config.resolve.alias['@public'] = resolve(__dirname, 'public');
    return config;
  },
  trailingSlash: true,
  webpack5: false,
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')]
  },
  images: {
    disableStaticImages: true
  }
};

// next-optimized-imagesの設定
const imgConfig = {
  inlineImageLimit: 8192,
  imagesFolder: 'images',
  imagesName: '[name]-[hash].[ext]',
  handleImages: ['jpeg', 'png', 'svg', 'webp', 'gif'],
  removeOriginalExtension: false,
  optimizeImages: true,
  optimizeImagesInDev: true,
  mozjpeg: {
    quality: 80
  },
  optipng: {
    optimizationLevel: 3
  },
  pngquant: false,
  gifsicle: {
    interlaced: false,
    optimizationLevel: 3
  },
  svgo: {
    // enable/disable svgo plugins here
  },
  webp: {
    preset: 'default',
    quality: 75
  }
};

module.exports = withPlugins([[optimizedImages, imgConfig]], nextConfig);
```

これで準備は完了です。

## 使い方

使う際は`require()`で画像を呼び出します。

それぞれのパターンで使い方を紹介します。

### 普通に img で使うパターン

```jsx
export default () => <img src={require('@public/images/my-image.jpg')} />;
```

### inline の svg を使うパターン

```jsx
export default () => (
  <div
    dangerouslySetInnerHTML={{
      __html: require('@public/images/my-icon.svg?include')
    }}
  />
);
```

### picture を使うパターン

```jsx
export default () => (
  <picture>
    <source
      srcSet={require('@public/images/my-image.jpg?webp')}
      type="image/webp"
    />
    <source srcSet={require('@public/images/my-image.jpg')} type="image/jpeg" />
    <img src={require('@public/images/my-image.jpg')} />
  </picture>
);
```

その他パラメーターなどは[こちら](https://github.com/cyrilwanner/next-optimized-images#query-params)に詳しく載ってます。

## まとめ

本サイトをリニューアルする際に、普通に`next/image`で書いていたところ、build 時にエラーが出ててしまい、結構色々調べて実装できました。

`Next.js`で`SSG`する際には`next-optimized-images`おすすめです。


Next.jsでSSGするときの画像圧縮・webpについて【next/image不使用】


この度、サイトをフルリニューアルいたしました！

一度、手が空いたタイミングで`Nuxt.js`を使いリニューアルさせようとしたのですが、バタバタ仕事をしている間にすっかり時間が経ってしまいました。。

## リニューアル目的

リニューアルの目的を書き出してから、サイト全体の設計を行うようにしましました。

以下がざっくりとまとめた目標です。

- **制作パートナー（フリーランスの外注）を探している制作会社様・広告代理店様との契約を増やす。**
- 現在運営している複数サイトを統合して、ドメインパワーを上げる。（別ドメインで展開しているが、`WordPress` の都合で別ドメインとして展開しているだけなので、統合した方がページ数も増えてドメインパワーが上がると考えました。）
  - [jws.work](https://jws.work)
  - [blog-jws.work](https://blog-jws.work)
  - [cssjsanimation.com](https://cssjsanimation.com)
- 記事を `markdown` 形式で書き込めるようする。
- `GitHub` 管理で記事も管理できるようにする。
- `WordPress` 管理から外すことで高速化。（アニメーションが多いのでそこまで高速化出来ているわけじゃないですが。）
- 最近流行りの `Next.js` の学習もしたい。

という感じで目標を決めて作業にとりかかりました。

## 公式サイトとしての機能

公式サイトとして、サービスの内容や、自己紹介等の掲載。

## ブログ機能

これまでブログとして運用してきた[blog-jws.work](https://blog-jws.work)を解約して、本サイトに移管しました。

ブログ機能はすべて`markdownファイル`で作成して HTML に書き出すよう設定しています。

掲載内容は以下になります。

- 技術ブログ
  - 主に Web 関連の技術などの情報を掲載しています
- 実績掲載
  - 特定されない掲載可能な範囲で実績紹介をしています
- ポートフォリオ掲載
  - 掲載可能な実績はこちらに画像付きで掲載しています
- アニメーションの掲載
  - `CodePen`で作成、実行は`CodePen`内で行い、`iframe`で貼り付け

## 感想

制作するにあたり、`Udemy`で`Next.js`の基本を学習をしてから制作に取り組みました。

これまで`Next.js`を触ったことがなかったので、かなり勉強になったかと思います。

特にアニメーション周りや、markdown→HTML 出力、画像の圧縮などで結構ハマって大変でしたが、何とか形に出来ました。
今後も本サイトは継続してページ改修を行っていければと思ってます。

技術面などは別記事にて UP したいと思います。


サイトをNext.jsを使ってフルリニューアルしました。


長いこといつか更新しないとと思っていた開発環境を時間があったので作り直しました！
あれもこれもと機能充実させていったら、トータル 3 日ぐらい使ったかもしれません。。

LP ～数ページレベルの案件だと使い勝手が良いかなと思います。
大型案件向きではありません。

だいぶオレオレ開発環境なのですが、[GitHub](https://github.com/korsmic/JWS-Template)に置いておきますので、使いたい方は `clone` して使ってみてください。

## 開発環境を変えた理由

開発環境を変えた理由はいくつかあります。

- gulp・node・webpack を最新にしたかった。
- gulp の watch 機能が微妙で、ファイル追加したときいちいち再起動が必要だった。
- js を webpack で bundle して 1 ファイルにまとめたかった。
- js を module 化して機能ごとに分離したかった。
- meta 周りを一括で変更できるようにしたかった。
- UnCSS で不要な CSS を削除したかった
- sass も node_modules から直接 import したかった。
- eslint + prettier を使ってきれいなコードを保ちたかった。
- es6 の記述で js 書きたかった。

･･･などなど、いろいろと不満があったのですが、これらをすべて解消した環境がようやくできました。
これらの機能を盛り込んで作ってみました。

## 機能紹介

### 開発環境

- gulp
- pug
- webpack
- babel
- sass
- eslint
- prettier

### ライブラリ

- jQuery
- modaal
- GSAP(TweenMax/TimelineMax)
- ScrollMagic
- Swiper

## コードなど紹介

### ファイル構成

```txt
.babelrc
.eslintrc.json
.gitignore
gulpfile.js
package-lock.json
package.json
README.md
webpack.config.js
_src
 │  index.pug
 │  test.php
 │
 ├─assets
 │  ├─images
 │  │  │  favicon.png
 │  │  │
 │  │  └─video
 │  │          video.mp4
 │  │
 │  ├─js
 │  │  │  main.js
 │  │  │
 │  │  └─modules
 │  │          animation.js
 │  │          modal.js
 │  │          slider.js
 │  │
 │  └─sass
 │      │  main.scss
 │      │  utility.scss
 │      │
 │      ├─foundation
 │      │  ├─base
 │      │  │      _base.scss
 │      │  │      _fonts.scss
 │      │  │
 │      │  ├─mixin
 │      │  │      _bgi.scss
 │      │  │      _clearfix.scss
 │      │  │      _content.scss
 │      │  │      _mediaquerys.scss
 │      │  │
 │      │  ├─reset
 │      │  │      _reset.scss
 │      │  │
 │      │  ├─var
 │      │  │      _variable.scss
 │      │  │
 │      │  └─vendor
 │      │          _vendor.scss
 │      │
 │      ├─object
 │      │      _container.scss
 │      │      _test.scss
 │      │      _wrap.scss
 │      │
 │      └─utility
 │              _display.scss
 │              _indent.scss
 │              _margin.scss
 │              _padding.scss
 │
 ├─under
 │      index.pug
 │
 ├─_data
 │      meta.json
 │
 └─_include
     │  _layout.pug
     │
     └─common
             _footer.pug
             _gabody.pug
             _gahead.pug
             _head.pug
             _header.pug
```

### package.json

```json
{
  "name": "jws-template",
  "description": "gulp + webpack + jQuery + pug + sass",
  "version": "1.0.0",
  "author": "JWS",
  "browserslist": ["last 2 versions"],
  "dependencies": {
    "gsap": "^2.1.3",
    "jquery": "^3.4.1",
    "modaal": "^0.4.4",
    "scrollmagic": "^2.0.7",
    "scrollmagic-plugin-gsap": "^1.0.3"
  },
  "devDependencies": {
    "@babel/core": "^7.6.3",
    "@babel/preset-env": "^7.6.3",
    "@babel/register": "^7.6.2",
    "babel-eslint": "^10.0.3",
    "babel-loader": "^8.0.6",
    "browser-sync": "^2.26.7",
    "connect-ssi": "^1.1.1",
    "del": "^5.1.0",
    "eslint": "^6.5.1",
    "eslint-config-prettier": "^6.4.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-loader": "^3.0.2",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-node": "^10.0.0",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-babel": "^8.0.0",
    "gulp-changed": "^4.0.2",
    "gulp-clean-css": "^4.2.0",
    "gulp-data": "^1.3.1",
    "gulp-group-css-media-queries": "^1.2.2",
    "gulp-imagemin": "^6.1.1",
    "gulp-notify": "^3.2.0",
    "gulp-plumber": "^1.2.1",
    "gulp-postcss": "^8.0.0",
    "gulp-prettify": "^0.5.0",
    "gulp-pug": "^4.0.1",
    "gulp-sass": "^4.0.2",
    "gulp-sass-glob": "^1.1.0",
    "gulp-uglify-es": "^1.0.4",
    "imagemin-mozjpeg": "^8.0.0",
    "imagemin-pngquant": "^8.0.0",
    "imports-loader": "^0.8.0",
    "postcss-import": "^12.0.1",
    "postcss-uncss": "^0.17.0",
    "prettier": "^1.18.2",
    "swiper": "^5.0.4",
    "terser-webpack-plugin": "^2.1.2",
    "uncss": "^0.17.2",
    "webpack": "^4.41.0",
    "webpack-cli": "^3.3.9",
    "webpack-stream": "^5.2.1"
  },
  "license": "ISC",
  "main": "index.js",
  "scripts": {
    "dev": "npx gulp",
    "build": "npx gulp build",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}
```

### gulpfile.js

```js
/* =========================================================
  Import
========================================================= */
/* ---------------------------------------------------------
  common
--------------------------------------------------------- */
const gulp = require('gulp');
const browserSync = require('browser-sync');
const ssi = require('connect-ssi');
const del = require('del');
const plumber = require('gulp-plumber');
const notify = require('gulp-notify');

/* ---------------------------------------------------------
  pug
--------------------------------------------------------- */
const pug = require('gulp-pug');
const fs = require('fs');
const data = require('gulp-data');

/* ---------------------------------------------------------
  sass
--------------------------------------------------------- */
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const gcmq = require('gulp-group-css-media-queries');
const sassGlob = require('gulp-sass-glob');
const postcss = require('gulp-postcss');
const uncss = require('postcss-uncss');
const cssImport = require('postcss-import');

/* ---------------------------------------------------------
  javascript
--------------------------------------------------------- */
const webpackStream = require('webpack-stream');
const webpack = require('webpack');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify-es').default;
const webpackConfig = require('./webpack.config');

/* ---------------------------------------------------------
  image
--------------------------------------------------------- */
const imagemin = require('gulp-imagemin');
const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const changed = require('gulp-changed');

/* =========================================================
  settings
========================================================= */
const paths = {
  sass: [
    './_src/assets/sass/*.scss',
    './_src/assets/sass/`/*.scss',
    './_src/assets/sass/`/`/*.scss'
  ],
  sassDist: './_dist/assets/css/',
  css: ['./_dist/assets/css/*.css'],
  pug: [
    './_src/*.pug',
    './_src/`/*.pug',
    './_src/`/`/*.pug',
    '!./_src/_*.pug',
    '!./_src/`/_*.pug',
    '!./_src/`/`/_*.pug'
  ],
  pugDist: './_dist/',
  html: ['./_src/*.html', './_src/`/*.html'],
  htmlDist: ['./_dist/*.html', './_dist/`/*.html'],
  php: ['./_src/*.php', './_src/`/*.php'],
  phpDist: './_dist/',
  js: ['./_src/assets/js/*.js', './_src/assets/js/`/*.js'],
  jsDist: './_dist/assets/js/',
  image: ['./_src/assets/images/`/*'],
  imageDist: './_dist/assets/images/',
  dist: './_dist/',
  meta: './_src/_data/meta.json'
};

/* =========================================================
  Task
========================================================= */
/* ---------------------------------------------------------
  pug
--------------------------------------------------------- */
function pugFunc(done) {
  const option = {
    pretty: true
  };
  return gulp
    .src(paths.pug)
    .pipe(
      plumber({
        errorHandler: notify.onError('Error: <%= error.message %>')
      })
    )
    .pipe(
      data(function () {
        return JSON.parse(fs.readFileSync(paths.meta));
      })
    )
    .pipe(pug(option))
    .pipe(gulp.dest(paths.pugDist))
    .pipe(browserSync.reload({ stream: true }));
}

/* ---------------------------------------------------------
  sass
--------------------------------------------------------- */
function sassFunc() {
  const plugins = [
    cssImport({
      path: ['node_modules']
    })
  ];
  return gulp
    .src(paths.sass, {
      sourcemaps: true
    })
    .pipe(plumber())
    .pipe(sassGlob())
    .pipe(
      sass({
        outputStyle: 'expanded'
      })
    )
    .pipe(postcss(plugins))
    .pipe(cleanCSS())
    .pipe(
      autoprefixer({
        cascade: false
      })
    )
    .pipe(
      gulp.dest(paths.sassDist, {
        sourcemaps: './sourcemaps'
      })
    )
    .pipe(
      browserSync.reload({
        stream: true
      })
    );
}

function sassDistFunc() {
  const plugins = [
    cssImport({
      path: ['node_modules']
    })
  ];
  return gulp
    .src(paths.sass, {
      sourcemaps: false
    })
    .pipe(plumber())
    .pipe(sassGlob())
    .pipe(
      sass({
        outputStyle: 'compressed'
      })
    )
    .pipe(postcss(plugins))
    .pipe(cleanCSS())
    .pipe(
      autoprefixer({
        cascade: false
      })
    )
    .pipe(gcmq())
    .pipe(
      sass({
        outputStyle: 'compressed'
      })
    )
    .pipe(gulp.dest(paths.sassDist))
    .pipe(
      browserSync.reload({
        stream: true
      })
    );
}

/* ---------------------------------------------------------
  uncss
--------------------------------------------------------- */
function uncssFunc(done) {
  const plugins = [
    uncss({
      html: paths.htmlDist,
      ignore: []
    })
  ];
  gulp
    .src('_dist/assets/css/utility.css')
    .pipe(
      plumber({
        errorHandler: notify.onError('Error: <%= error.message %>')
      })
    )
    .pipe(postcss(plugins))
    .pipe(gulp.dest('_dist/assets/css/'));
  done();
}

/* ---------------------------------------------------------
  image
--------------------------------------------------------- */
function imageFunc() {
  return gulp
    .src(paths.image)
    .pipe(changed(paths.imageDist))
    .pipe(
      imagemin(
        [
          mozjpeg({
            quality: 80
          }),
          pngquant()
        ],
        {
          verbose: true
        }
      )
    )
    .pipe(gulp.dest(paths.imageDist))
    .pipe(
      browserSync.reload({
        stream: true
      })
    );
}

/* ---------------------------------------------------------
  js
--------------------------------------------------------- */
function jsFunc() {
  return plumber({
    errorHandler: notify.onError('Error: <%= error.message %>')
  })
    .pipe(webpackStream(webpackConfig, webpack))
    .pipe(babel())
    .pipe(uglify())
    .pipe(gulp.dest(paths.jsDist))
    .pipe(
      browserSync.reload({
        stream: true
      })
    );
}

/* ---------------------------------------------------------
  php
--------------------------------------------------------- */
function phpFunc() {
  return gulp
    .src(paths.php)
    .pipe(gulp.dest(paths.phpDist))
    .pipe(
      browserSync.reload({
        stream: true
      })
    );
}

/* ---------------------------------------------------------
  server
--------------------------------------------------------- */
const browserSyncOptions = {
  port: 3000,
  reloadOnRestart: true,
  server: {
    baseDir: paths.dist,
    index: 'index.html',
    middleware: [
      ssi({
        baseDir: __dirname + '/_dist',
        ext: '.html'
      })
    ]
  },
  ghostMode: {
    clicks: false,
    forms: false,
    scroll: false
  }
};

function browserSyncFunc(done) {
  browserSync.init(browserSyncOptions);
  done();
}

/* ---------------------------------------------------------
  clean
--------------------------------------------------------- */

function cleanFunc(done) {
  del.sync(['./_dist']);
  done();
}

/* ---------------------------------------------------------
  watch
--------------------------------------------------------- */
function watchFunc(done) {
  const browserReload = function () {
    browserSync.reload({
      stream: true
    });
    done();
  };
  gulp.watch(paths.pug).on('change', gulp.series(pugFunc, browserReload));
  gulp.watch(paths.sass).on('change', gulp.series(sassFunc, browserReload));
  gulp.watch(paths.js).on('change', gulp.series(jsFunc, browserReload));
  gulp.watch(paths.image).on('change', gulp.series(imageFunc, browserReload));
  gulp.watch(paths.php).on('change', gulp.series(phpFunc, browserReload));
  done();
}

/* =========================================================
  Task main
========================================================= */
/* ---------------------------------------------------------
  gulp
--------------------------------------------------------- */
gulp.task(
  'default',
  gulp.series(
    gulp.parallel(pugFunc, sassFunc, jsFunc, imageFunc, phpFunc),
    gulp.series(browserSyncFunc, watchFunc)
  )
);

gulp.task(
  'build',
  gulp.series(
    gulp.series(cleanFunc),
    gulp.parallel(pugFunc, sassDistFunc, jsFunc, imageFunc, phpFunc),
    gulp.series(uncssFunc)
  )
);

gulp.task('uncss', gulp.series(uncssFunc));
```

### .babelrc

```json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": ">0.25% in JP, not ie <= 10, not op_mini all"
      }
    ]
  ]
}
```

### .eslintrc.json

```json
{
  "extends": ["standard", "prettier", "plugin:prettier/recommended"],
  "env": {
    "browser": true
  },
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "semi": true,
        "tabWidth": 2
      }
    ],
    "yoda": 0,
    "no-unused-vars": 0,
    "import/no-webpack-loader-syntax": 0,
    "no-undef": 0,
    "no-path-concat": 0
  },
  "globals": {
    "$": false
  }
}
```

## まとめ

長々とコードの羅列をしました。。。
Gulp v3 から v4 に変わっていろいろと文法が変わって苦戦しました。
開発環境は、1 年ぐらいで見直した方がよさそうです。

説明を書かないといけないんだけど、まぁとにかくやっていることが多すぎて書ききれない感じですね。
前職の先輩コーダーの方の開発コードを参考にしてみましたが、他にもいろいろ便利機能を実装されていて、凄さを実感しました！

大型案件だとこれぐらいじゃ回せないですが、LP ～数ページレベルの案件だと使い勝手がいいような環境です。
とりあえずこれをベースに開発して、ほかにも便利なものがあったら更新していくイメージでいこうと思います。
コード一式は[こちら](https://github.com/korsmic/JWS-Template)に置いておきます。


gulp＋webpack＋jQuery＋pug＋sassで開発環境構築


アメブロの RSS を表示させる際、JavaScript のみでできるだろうと思っていたのですが、JavaScript のみだと実装が難しく、ハマったのでまとめておきます。

## JavaScript のみでは簡単に他サイトの RSS を表示できない

先に結論を言うと、JavaScript のみだと CORS(Cross-Origin Resource Sharing)の問題があって、他サイトのデータを取得してくることができません。。
別途サーバーを用意して CORS の問題をクリアしてあげることもできますが、結構難しく手間がかかります。

以前は`Google Feed API`というサービスがあり、これを経由して取得すれば OK だったのですが、廃止となりました。
代替案として、`YQL`というサービスもあったのですが、これも公式では廃止となってしまいました。

ということで、php を使わざるを得ない流れになってます。

## php でアメブロ RSS を取得して、ループで取り出す

アメブロ RSS の情報を php で取得し、最終的に JavaScript で受け取っていきます。

アメブロの ID が必要になりますが、TOP ページの URL から取得できます。
`ameblo.jp`の後に続く文字列が ID となります。

```txt
https://ameblo.jp/[ここがID]/
```

実際に取得する php は以下になります。

```php
<?php
  date_default_timezone_set('Asia/Tokyo');
  $url = "http://feedblog.ameba.jp/rss/ameblo/[アメブロID]/rss20.xml";
  $rss =  simplexml_load_file($url);
  $output = '';
  $i = 0;
  // 取得件数
  $max = 5;
  if($rss){
    foreach( $rss->channel->item as $item )
    {
      /`
      * タイトル
      * $item->title ;
      * リンク
      * $item->link ;
      * 更新日時のUNIX TIMESTAMP
      * $timestamp = strtotime( $item->pubDate ) ;
      * 詳細
      * $item->description;
        */
      if(!preg_match('/^PR:/',$item->title )){
        if($i < $max){
          $timestamp = strtotime( $item->pubDate );
          $date = date( 'Y.m.d',$timestamp );
          $output .= '<li>';
          $output .= '<a href="'. $item->link .'" target="_blank">';
          $output .= '<span>' . $date . '</span>';
          $output .= '<span>'.$item->title . '</a>';
          $output .= '</li>';
          $i++;
        }
      }
    }
  }
  echo '<ul class="newslist">'. $output . '</dl>';
?>
```

`ul.newslist`に`li`をループさせたものを入れ込んで、`echo`で出力させます。

以下のような感じで、date の中身を変えてあげるとフォーマットが切り替わります。

- `date('Y.m.d')` ⇒ 2019.10.10
- `date('Y 年 m 月 d 日');` ⇒ 2019 年 10 月 10 日

必要に応じて変えて使うと良いです。

[参考](https://www.flatflag.nir87.com/date-473)

## JavaScript で php の情報を受け取って表示

まずは、HTML 上に受け取る箱を用意してあげます。

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

そして、JavaScript（jQuery）の get で php にアクセスして受け取ったデータを入れ込みます。
先ほどの php は、`rss.php`として保存しています。

```js
$.get('./rss.php', function (data) {
  $('#feed').html(data);
});
```

JavaScript の記述はめちゃくちゃ少なくて大丈夫です。
必要なデータは php で取得してありますので。

## まとめ

php はあまり使いたくなかったのですが、これが一番楽な実装方法かと思います。
また、アメブロ以外のサービスでも RSS にさえアクセスできれば同様の処理で実装できるかと思います。

たまに「アメブロでブログをやっていて新しいホームページにリンクさせたい」という要望をいただくことがあります。
WordPress を用意してアメブロから引っ越ししてあげることもできますが、

- 予算が少ないので工数を抑えたい
- WordPress の使い方を覚えるのが大変
- 自サーバーが WordPress 使えない
- DB がない

みたいな場合は、RSS でリンクさせてあげると楽でいいです。


phpとJavaScriptでアメブロRSSをリアルタイムに表示


久々のブログ更新となりました。。。
コンスタントに書きたいけど、どうしても後回しになってしまいますね。

今回は、YouTube Data API についてちょっと触ったので、備忘録を兼ねてまとめていこうと思います。
2019/10/05 現在で最新の「YouTube Data API v3」を使います。

[公式のリファレンスはこちら](https://developers.google.com/youtube/v3/getting-started?hl=ja)

## まずは API を取得して下準備

まずは Google Developer Console で API を登録しキーを取得します。

[こちらの記事](https://mamewaza.com/support/blog/get-youtube-videoid-list.html)を参考にさせていただきました。

1. プロジェクト作成
2. 左側メニューより「ライブラリ」
3. 検索窓から「YouTube Data API v3」を検索し、クリック
4. 「有効にする」をクリック
5. 「認証情報を作成」⇒「API キー」をクリック
6. API キーが出てきます。

出てきた API キーはコピーしておきましょう。
これで下準備は OK です。

## ユーザーからアップロードした動画一覧を取得

アップロードした動画一覧を取得したい場合、ちょっと面倒ですが、2 段階必要となります。

### ユーザー ID の取得

まずは、YouTube のユーザーページをブラウザで見つけてユーザー名を探します。

今回は、Google Japan を例として扱います。

以下ページが Google Japan のユーザーページです。

[https://www.youtube.com/user/googlejapan](https://www.youtube.com/user/googlejapan)

ここの`googlejapan`がユーザー名となります。

### API にアクセスしてアップロードした動画一覧のプレイリスト ID を取得

アップロードした動画一覧のプレイリスト ID が必要ですので、まずはそれを取得します。
以下がアクセスする URL となります。

```txt
https://www.googleapis.com/youtube/v3/channels?part=contentDetails&forUsername={ユーザーID}&key={APIキー}
```

ここの`ユーザー ID`と`API キー`を書き換えてアクセスします。
とりあえず説明用に API キーは「xxx」とします。

```txt
https://www.googleapis.com/youtube/v3/channels?part=contentDetails&forUsername=googlejapan&key=xxx
```

すると以下のデータがレスポンスされます。

```javascript
{
  kind: "youtube#channelListResponse",
    etag: "p4VTdlkQv3HQeTEaXgvLePAydmU/VG4-qj0TEaOqhyN9rzos1ARwLfc",
      pageInfo: {
    totalResults: 1,
      resultsPerPage: 5
  },
  items: [
    {
      kind: "youtube#channel",
      etag: "p4VTdlkQv3HQeTEaXgvLePAydmU/qMTU7TUqEmJAH6NVHxTVB_DqPKA",
    id: "UCTnRxVUPssiL7H29ON07t_Q",
    contentDetails: {
      relatedPlaylists: {
        uploads: "UUTnRxVUPssiL7H29ON07t_Q",
        watchHistory: "HL",
        watchLater: "WL"
      }
    }
    }
  ]
}
```

ここの`items⇒contentDetails⇒relatedPlaylists⇒uploads`の値がアップロードした動画一覧のプレイリスト ID となります。

今回の場合は、`UUTnRxVUPssiL7H29ON07t_Q`が該当します。
この値を使います。

### 動画一覧の情報を取得

いよいよ動画一覧の情報を取得します！

以下の URL が動画一覧を取得するための URL となります。

```txt
https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId={プレイリストID}&maxResults={件数（～50）}&key={APIキー}
```

- プレイリスト ID には、先ほど取得した`UUTnRxVUPssiL7H29ON07t_Q`
- 件数はとりあえず 3 件としておきます。
- API キーには取得した API キー（仮で xxx とします。）

```txt
https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=UUTnRxVUPssiL7H29ON07t_Q&maxResults=3&key=xxx
```

アクセスすると以下のデータがレスポンスされます。

```javascript
{
  kind: "youtube#playlistItemListResponse",
    etag: "p4VTdlkQv3HQeTEaXgvLePAydmU/Mf57YJDcvQGKekSUxBYXyp3C_o4",
      nextPageToken: "CAMQAA",
        pageInfo: {
    totalResults: 901,
      resultsPerPage: 3
  },
  items: [
    {
      kind: "youtube#playlistItem",
      etag: "p4VTdlkQv3HQeTEaXgvLePAydmU/ 31CJ0CAgWgIPI - 5uA5bdfqy7Ock",
    id: "VVVUblJ4VlVQc3NpTDdIMjlPTjA3dF9RLk9MdjlXQkVBM0VV",
    snippet: {
      publishedAt: "2019-09-30T04:03:27.000Z",
      channelId: "UCTnRxVUPssiL7H29ON07t_Q",
      title: "沖縄観光業にデジタルトレーニングを",
      description: "訪れる観光客数の伸びが著しい沖縄県。観光業のデジタル化を促進する狙いとは。",
      thumbnails: {
        default: {
          url: "https://i.ytimg.com/vi/OLv9WBEA3EU/default.jpg",
          width: 120,
          height: 90
        },
        medium: {
          url: "https://i.ytimg.com/vi/OLv9WBEA3EU/mqdefault.jpg",
          width: 320,
          height: 180
        },
        high: {
          url: "https://i.ytimg.com/vi/OLv9WBEA3EU/hqdefault.jpg",
          width: 480,
          height: 360
        },
        standard: {
          url: "https://i.ytimg.com/vi/OLv9WBEA3EU/sddefault.jpg",
          width: 640,
          height: 480
        }
      },
      channelTitle: "Google Japan",
      playlistId: "UUTnRxVUPssiL7H29ON07t_Q",
      position: 0,
      resourceId: {
        kind: "youtube#video",
        videoId: "OLv9WBEA3EU"
      }
    }
    },
{
  kind: "youtube#playlistItem",
    etag: "p4VTdlkQv3HQeTEaXgvLePAydmU / ecyoeo9iwSqtVHEPRRboqWHDXIs",
      id: "VVVUblJ4VlVQc3NpTDdIMjlPTjA3dF9RLkJRVWxVamdEYjdF",
        snippet: {
    publishedAt: "2019-10-01T02:56:35.000Z",
      channelId: "UCTnRxVUPssiL7H29ON07t_Q",
        title: "Google アシスタント｜「おやすみ〜」 篇",
          description: "いろんな機能を、ひと言で。 Google アシスタント。 いつも寝る前の支度がたくさんあって大変。 そんな時も、お任せください。 「ルーティン」に登録すれば、 例えば「OK Google, おやすみ」のひと言で、様々な操作が完了します。 自宅でも、外出先でも、どんな場面でも。 Google アシスタントの「ルーティン」なら、 いろんな機能を、ひと言で。 「ルーティン」の設定方法： https://support.google.com/assistant/answer/7672035?co=GENIE.Platform%3DAndroid&hl=ja 注意事項： ・「OK Google」と話しかけるだけで、ハンズフリーに Google アシスタント を起動するには、事前にこちらの設定をお済ませください：https://support.google.com/assistant/answer/7394306?hl=ja&co=GENIE.Platform=Android ・ドライブ中に Google アシスタント を声で操作する際は、十分運転に注意してください。 Google アシスタントの使い方： Android のスマートフォン* でホームボタンを長押しすれば、Google アシスタント が起動します。 実は、あなたの Android にも、Google アシスタントは入っています。ホームボタンを長押し、または「 OK Google 」と話しかけるだけで、起動。 Google アシスタントの詳細はこちら：https://assistant.google.com/intl/ja_jp/ *Google アシスタントを使用するには、以下を搭載したスマートフォンまたはタブレットが必要です。 ・Android 5.0 以降 ・Google アプリ 6.13 以降 ・Google Play 開発者サービス ・1.4 GB のメモリと 720p の画面解像度 ・端末の言語が上記の言語に設定されていること iPhone をお持ちの方は、Google アシスタント アプリをダウンロードしてください。 [ Google アシスタント アプリをダウンロード ] https://itunes.apple.com/jp/app/google-%E3%82%A2%E3%82%B7%E3%82%B9%E3%82%BF%E3%83%B3%E3%83%88/id1220976145?mt=8 *iOS 10.0以降。iPhone、iPadに対応。",
            thumbnails: {
default: {
        url: "https://i.ytimg.com/vi/BQUlUjgDb7E/default.jpg",
          width: 120,
            height: 90
      },
      medium: {
        url: "https://i.ytimg.com/vi/BQUlUjgDb7E/mqdefault.jpg",
          width: 320,
            height: 180
      },
      high: {
        url: "https://i.ytimg.com/vi/BQUlUjgDb7E/hqdefault.jpg",
          width: 480,
            height: 360
      },
      standard: {
        url: "https://i.ytimg.com/vi/BQUlUjgDb7E/sddefault.jpg",
          width: 640,
            height: 480
      },
      maxres: {
        url: "https://i.ytimg.com/vi/BQUlUjgDb7E/maxresdefault.jpg",
          width: 1280,
            height: 720
      }
    },
    channelTitle: "Google Japan",
      playlistId: "UUTnRxVUPssiL7H29ON07t_Q",
        position: 1,
          resourceId: {
      kind: "youtube#video",
        videoId: "BQUlUjgDb7E"
    }
  }
},
{
  kind: "youtube#playlistItem",
    etag: "p4VTdlkQv3HQeTEaXgvLePAydmU / 0GqoF1tRL1i4pgmTgsUsZCH1Ix4",
      id: "VVVUblJ4VlVQc3NpTDdIMjlPTjA3dF9RLjBDcmxSc2xBMDBn",
        snippet: {
    publishedAt: "2019-10-01T02:56:04.000Z",
      channelId: "UCTnRxVUPssiL7H29ON07t_Q",
        title: "Google アシスタント｜「今日の天気教えて」 篇",
          description: "知りたいことを、ひと言で。 Google アシスタント。 どうも雲行きが怪しいな・・・。 そんな時も、お任せください。 あなたの問いかけに応じて、 最新の天気予報をお知らせします。 自宅でも、外出先でも、どんな場面でも。 Google アシスタントがあれば、 知りたいことを、ひと言で。 注意事項： ・「OK Google」と話しかけるだけで、ハンズフリーに Google アシスタント を起動するには、事前にこちらの設定をお済ませください：https://support.google.com/assistant/answer/7394306?hl=ja&co=GENIE.Platform=Android ・ドライブ中に Google アシスタント を声で操作する際は、十分運転に注意してください。 Google アシスタントの使い方： Android のスマートフォン* でホームボタンを長押しすれば、Google アシスタント が起動します。 実は、あなたの Android にも、Google アシスタントは入っています。ホームボタンを長押し、または「 OK Google 」と話しかけるだけで、起動。 Google アシスタントの詳細はこちら：https://assistant.google.com/intl/ja_jp/ *Google アシスタントを使用するには、以下を搭載したスマートフォンまたはタブレットが必要です。 ・Android 5.0 以降 ・Google アプリ 6.13 以降 ・Google Play 開発者サービス ・1.4 GB のメモリと 720p の画面解像度 ・端末の言語が上記の言語に設定されていること iPhone をお持ちの方は、Google アシスタント アプリをダウンロードしてください。 [ Google アシスタント アプリをダウンロード ] https://itunes.apple.com/jp/app/google-%E3%82%A2%E3%82%B7%E3%82%B9%E3%82%BF%E3%83%B3%E3%83%88/id1220976145?mt=8 *iOS 10.0以降。iPhone、iPadに対応。",
            thumbnails: {
default: {
        url: "https://i.ytimg.com/vi/0CrlRslA00g/default.jpg",
          width: 120,
            height: 90
      },
      medium: {
        url: "https://i.ytimg.com/vi/0CrlRslA00g/mqdefault.jpg",
          width: 320,
            height: 180
      },
      high: {
        url: "https://i.ytimg.com/vi/0CrlRslA00g/hqdefault.jpg",
          width: 480,
            height: 360
      },
      standard: {
        url: "https://i.ytimg.com/vi/0CrlRslA00g/sddefault.jpg",
          width: 640,
            height: 480
      },
      maxres: {
        url: "https://i.ytimg.com/vi/0CrlRslA00g/maxresdefault.jpg",
          width: 1280,
            height: 720
      }
    },
    channelTitle: "Google Japan",
      playlistId: "UUTnRxVUPssiL7H29ON07t_Q",
        position: 2,
          resourceId: {
      kind: "youtube#video",
        videoId: "0CrlRslA00g"
    }
  }
}
  ]
}
```

ここの`Items`の中身が`アップロードした動画一覧`の情報となります！

## Ajax でアクセスして HTML に反映させる

Web ページ上に取得した情報を反映させるには、Ajax などでアクセスして each を使ってループさせて表示します。

`ul.yt\_\_lists`というリストの中に`li.yt\_\_list`を入れ込んで書き込む例を以下に書いておきます。

```js
var ytApiKey = 'APIキー';
var ytPlayListId = 'プレイリストID';
var num = '動画の取得数';
$.ajax({
  url:
    'https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=' +
    ytPlayListId +
    '&maxResults=' +
    num +
    '&key=' +
    ytApiKey,
  type: 'GET',
  dataType: 'json',
  timespan: 1000
})
  .done(function (data1, textStatus, jqXHR) {
    var items = data1.items;
    $.each(items, function (i, item) {
      var snippet = item.snippet;
      var title = snippet.title;
      var videoId = snippet.resourceId.videoId;
      var thumbUrl = snippet.thumbnails.medium.url;
      var link = 'https://www.youtube.com/watch?v=' + videoId;
      $('ul.yt__lists').append(
        '<li class="yt__list">' +
          '<a href=' +
          link +
          ' target="_blank">' +
          '<img src="' +
          thumbUrl +
          '" alt="' +
          title +
          '">' +
          '<span>' +
          title +
          '</span>' +
          '</a>' +
          '</li>'
      );
    });
  })
  .fail(function (jqXHR, textStatus, errorThrown) {
    // エラー処理
  })
  .always(function () {
    // 常に行う処理
  });
```

以上です！これでもう YouTube Data API も怖くない！笑

## まとめ

いかがでしたでしょうか。
YouTube で動画一覧を取得するケースも稀かと思いますが、あるかと思います。
そういった場合、参考にしてみてください。

リストを取得 ⇒ モーダルを用意 ⇒ リストクリックでモーダル内 YouTube を iframe 起動
みたいなこともできると思います。


YouTube Data API でリアルタイムに動画一覧を表示


今回は、『SNS シェア用リンク生成ツールを作ってみた』ということで書いていきます！

## なぜ SNS シェア用リンク生成ツールを作ったのか

仕事で SNS のシェア用のリンクを作成する際に間違いがあったままリリースになってしまうことが何度かございました。。。

実際、各 SNS で URL やパラメーター、日本語をエンコードしたりと結構作業が多く、web のエンコードツールからコピペしたりしていると結構ミスが出てしまいます。

そこで、必要項目を入力すればリンクをサクッと作ってくれるツールが欲しいなと思い、UI とか雑ですが、とりあえず業務用に作ってみました。

## 完成品

以下に完成品の URL を載せておきますので、ご利用ください。

[https://korsmic.github.io/JWS-Blog/sns-share/](https://korsmic.github.io/JWS-Blog/sns-share/)

仕事で使うことが多い、以下の 3 つの生成が可能です。

- `twitter`
- `LINE`
- `Facebook`

## 使い方

- 各項目に情報を入力
- `出力 BOX`にコードが吐き出されます。（日本語はエンコード処理が掛かります。）
  - 吐き出されたコードは a タグに張ったりしてご利用ください。
- `確認用ボタン`をクリックすれば別タブでリンクが開きますので、確認も楽々です。

## まとめ

こういったツールを内部的に作ることはあるのですが、外部公開したのは今回がはじめてかもしれません！
meta 周りを一括で作れるツールもあるようです。
[https://www.heymeta.com/](https://www.heymeta.com/)

こういった og のジェネレーターも作ってみたいなと思っています。
pug と HTML の両方で吐き出してあげたりすると使い勝手いいかも･･･。


SNS シェア用リンク生成ツールを作ってみた


Web アニメーション周りの知識が付いてきましたので、今後はとくに Web アニメーション周りの情報を発信していこうと思います。

アニメーションの様子を動画にまとめ、youtube に UP することで、SNS でより見てもらえるかと思い、アニメーション周りは動画もつけるようにします。

今回は、ユーザーのスクロールに合わせてナビの class を付け替えることで、ユーザーが現在どのコンテンツを見ているのか、分かりやすく表示させる表現をご紹介します。

## どんなものができるのか

### 動画

<https://youtu.be/9kMGyCMBOsg>

### Web ページ

以下ページより実際の動作をご確認いただけます。

[https://korsmic.github.io/JWS-Blog/scrollmagic_toggleClass/](https://korsmic.github.io/JWS-Blog/scrollmagic_toggleClass/)

## 用途

主に`縦に長い LP`や、`年表`のようなコンテンツなどで使われることが多いかと思います。
コンテンツが長いと、ユーザーにとっては迷子になりやすく、配慮が必要です。
`ユーザビリティ`を上げるためにも、オススメです。

## 使用ライブラリ紹介

`SctollMagic`というライブラリを利用しています。

公式サイトはこちら
[https://scrollmagic.io/](https://scrollmagic.io/)

使うメソッド（関数）はこちら
[https://scrollmagic.io/examples/basic/class_toggles.html](https://scrollmagic.io/examples/basic/class_toggles.html)

## HTML・CSS 実装例

- HTML で各種ライブラリを読み込む
- ナビに ID を振る
- ナビに`hover`時と`class`付与時に色が変わるなどのスタイルを充てる
- コンテンツの各セクションに id を振る

といった感じになります。

### ナビ周りの HTML

ナビ周りの HTML は以下のような感じです。

```html
<nav class="gnav">
  <div class="inner">
    <ul class="gnav__lists">
      <li id="nav01" class="gnav__list">
        <a href="#sec01"><span>Contents1</span></a>
      </li>
      <li id="nav02" class="gnav__list">
        <a href="#sec02"><span>Contents2</span></a>
      </li>
      <li id="nav03" class="gnav__list">
        <a href="#sec03"><span>Contents3</span></a>
      </li>
      <li id="nav04" class="gnav__list">
        <a href="#sec04"><span>Contents4</span></a>
      </li>
      <li id="nav05" class="gnav__list">
        <a href="#sec05"><span>Contents5</span></a>
      </li>
    </ul>
  </div>
</nav>
```

### コンテンツ周りの HTML

コンテンツ周りの HTML は以下のような感じです。

```html
<section id="sec01" class="content content-01">
  <div class="inner">
    <h2>Contents1</h2>
  </div>
</section>
<section id="sec02" class="content content-02">
  <div class="inner">
    <h2>Contents2</h2>
  </div>
</section>
<section id="sec03" class="content content-03">
  <div class="inner">
    <h2>Contents3</h2>
  </div>
</section>
<section id="sec04" class="content content-04">
  <div class="inner">
    <h2>Contents4</h2>
  </div>
</section>
<section id="sec05" class="content content-05">
  <div class="inner">
    <h2>Contents5</h2>
  </div>
</section>
```

## JS の実装例

ここからがメインの JS の実装になります。

とくに公式サンプルと異なる点としては、`duration`（`どこまでの範囲とするか`）という箇所を実際の高さを取得して設定する箇所になります。

### 重要な個所

重要な個所だけ以下にまとめます。

```js
new ScrollMagic.Scene({
  triggerElement: '.content-01', //どこを起点とするか
  duration: $('.content-01').outerHeight() //ここで各コンテンツの高さを取得してdurationを決める。
})
  .setClassToggle('#nav01', 'is-active') //上で設定した範囲内になったらclassをつけて、範囲外になったら外すというメソッドを入れる（今回はis-active）を付け替えます。
  .addTo(controller);
```

### 全体実装例

全体は以下のようになります。

```js
$(function () {
  var controller = new ScrollMagic.Controller();
  // 各コンテンツ事にSceneを作成
  new ScrollMagic.Scene({
    triggerElement: '.content-01',
    duration: $('.content-01').outerHeight()
  })
    .setClassToggle('#nav01', 'is-active')
    .addTo(controller);

  new ScrollMagic.Scene({
    triggerElement: '.content-02',
    duration: $('.content-02').outerHeight()
  })
    .setClassToggle('#nav02', 'is-active')
    .addTo(controller);

  new ScrollMagic.Scene({
    triggerElement: '.content-03',
    duration: $('.content-03').outerHeight()
  })
    .setClassToggle('#nav03', 'is-active')
    .addTo(controller);

  new ScrollMagic.Scene({
    triggerElement: '.content-04',
    duration: $('.content-04').outerHeight()
  })
    .setClassToggle('#nav04', 'is-active')
    .addTo(controller);

  new ScrollMagic.Scene({
    triggerElement: '.content-05',
    duration: $('.content-05').outerHeight()
  })
    .setClassToggle('#nav05', 'is-active')
    .addTo(controller);
});
```

## まとめ

いかがでしたでしょうか。

公式サンプルで`class の付け替え`ができるとあったのですが、以前は`duration`の設定がよくわからず、無理やり実装したこともありました。
要素の高さを取得してあげて、duration に入れてあげれば OK です。

使うことも比較的多い内容かなと思いますので、ぜひ取り入れてみてください。
取り入れることで、長いページではユーザビリティが上がると思います！


スクロールしたとき表示領域がどの要素に入っているのかを判別してみる『ScrollMagic』


今回は、フロントエンドエンジニアらしく、体重の推移をグラフ化してみようということでまとめてみます。

## 完成品

以下に作成したものを UP しますので、見てみてください。

<iframe src="https://korsmic.github.io/JWS-Blog/chartjs/" width="100%" height="500"></iframe>

[https://korsmic.github.io/JWS-Blog/chartjs/](https://korsmic.github.io/JWS-Blog/chartjs/)

## 使用ライブラリ紹介

`chart.js`というものを利用して実装を行います。

DL は以下の GitHub よりできます。

[https://www.chartjs.org/](https://www.chartjs.org/)

[document はこちら](https://www.chartjs.org/docs/latest/charts/line.html)

## まずはデータを用意

- エクセルなどでデータをまとめます。
- まとめたデータを配列に変換します。

これでとりあえず準備は OK です。

## HTML 実装例

- `chart.js`を読み込みます。
- `canvas 要素`を作ります。(id を myChart としています。)

```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Chart.jsでダイエット記録をグラフ描画してみる</title>
  </head>
  <body>
    <canvas id="myChart"></canvas>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    <script>
      // ここにJSを書いていきます。
    </script>
  </body>
</html>
```

## JS の実装

細かくデザインの設定も可能ですが、今回はシンプルにまとめていきます。

最初に用意したデータを入れ込んでいきます。

```js
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'line',
  data: {
    // 横軸を指定
    labels: [
      '05月20日',
      '05月21日',
      '05月22日',
      '05月23日',
      '05月24日',
      '05月25日',
      '05月26日',
      '05月27日',
      '05月28日',
      '05月29日',
      '05月30日',
      '05月31日',
      '06月01日',
      '06月02日',
      '06月03日',
      '06月04日',
      '06月05日',
      '06月06日',
      '06月07日',
      '06月08日',
      '06月09日',
      '06月10日',
      '06月11日',
      '06月12日',
      '06月13日',
      '06月14日',
      '06月15日',
      '06月16日',
      '06月17日',
      '06月18日',
      '06月19日',
      '06月20日',
      '06月21日',
      '06月22日',
      '06月23日',
      '06月24日',
      '06月25日',
      '06月26日',
      '06月27日',
      '06月28日',
      '06月29日',
      '06月30日',
      '07月01日',
      '07月02日',
      '07月03日',
      '07月04日',
      '07月05日',
      '07月06日',
      '07月07日',
      '07月08日',
      '07月09日',
      '07月10日'
    ],
    datasets: [
      {
        // 上部のタイトル指定
        label: 'ダイエット記録',
        lineTension: 0.1,
        // 色周りの指定
        backgroundColor: 'rgba(75,192,192,0.4)',
        borderColor: 'rgba(75,192,192,1)',
        // 縦軸データを指定
        data: [
          88.6, 87.2, 86.5, 86.9, 84.0, 86.6, 86.1, 85.5, 84.5, 84.5, 84.6,
          83.9, 84.0, 85.3, 85.6, 84.9, 84.6, 84.0, 83.9, 84.7, 83.4, 83.3,
          83.1, 83.1, 83.2, 82.9, 83.0, 82.5, 82.1, 82.7, 83.1, 82.1, 82.5,
          82.6, 83.9, 85.3, 83.9, 83.9, 82.8, 82.8, 82.2, 81.8, 80.9, 80.7,
          80.2, 80.0, 81.8, 82.9, 82.2, 81.5, 80.9, 80.3
        ]
      }
    ]
  },
  options: {
    scales: {
      yAxes: [
        {
          ticks: {
            // ここで最小値を指定することができる。指定しないとdataの最小値が最小値になる。
            min: 75.0,
            // ここで縦軸に単位を加えることができる。
            userCallback: function (tick) {
              return tick.toString() + 'kg';
            }
          },
          // 縦軸のラベル指定
          scaleLabel: {
            display: true,
            labelString: '体重'
          }
        }
      ]
    }
  }
});
```

## まとめ

いかがでしたでしょうか。
ちょっと手間がかかりますが、きれいなグラフが描画できたと思います。

今回は「折れ線グラフ」を使いましたが、ほかにも「棒グラフ・パイチャート・バブルチャート・レーダーチャート」などいろんなグラフを描画できるプラグインになっています。

無料で利用できますので、グラフ利用の際は使ってみてはいかがでしょうか。


Chart.jsでダイエット記録をグラフ描画してみる


本日は、実務で利用したことがある JS でのアニメーションライブラリについてご紹介します。

スクロールして表示領域に入ったらアニメーションという流れも非常に多いので、併せてスクロール系もご紹介します。

各ライブラリの使い方などは、別途記事にまとめていきたいと思います。

## 紹介するライブラリ

- アニメーション系
  - ガッツリアニメーションならこれ！「TweenMax・TimelineMax」
  - SVG のアニメーションや複雑なアニメーションなら「animejs」
  - 簡易的なアニメーションで OK なら「Animate.css」
- スクロール系
  - 複雑なスクロールイベントなら「ScrollMagic」
  - 簡易的なスクロールイベントなら「jQuery AniView」

---

## アニメーション系

アニメーションを行うライブラリです。

### ガッツリアニメーションならこれ！「TweenMax」

JS でのアニメーションだとまず一番に名前が出ると思うぐらい有名な

- `TweenMax`
  - アニメーションさせる機能
- `TimelineMax`
  - アニメーションのタイムライン管理

をご紹介します。

こんなことができますということで、CodePen のリンクを張っておきます。

[CodePen 参考](https://codepen.io/search/pens?q=tweenmax&page=1&order=popularity&depth=everything)

#### 「TweenMax」の優れている点

- 複数要素を同時にアニメーションさせる機能
- 各アニメーションのタイミング調整機能
- 有名なので、参考記事が豊富
- 豊富な easing

#### 「TweenMax」のちょっと残念な点

- SVG 周りは有料プラグインが必要なところ

こんな感じでしょうか。有料でも、ぜひ利用していきたいぐらい機能が豊富で素晴らしいプラグインです。

### SVG のアニメーションや複雑なアニメーションなら「animejs」

上の「TweenMax」でも十分ですが、個人的には「animejs」もカンタンなのでオススメです！

また、「TweenMax」では SVG 周りのアニメーションが有料なのに対し、ほぼ同じ機能を`animejs`なら無料で実装できます。

こちらは公式の Document で分かりやすくまとまっていますので、参考に張っておきます。

[公式](https://animejs.com/documentation/)

#### 「animejs」の優れている点

- 複数要素を同時にアニメーションさせる機能
- SVG のアニメーションが無料で使える
- 豊富な easing

#### 「animejs」のちょっと残念な点

- 若干複数要素のアニメーションを同時に行うのが苦手な印象
- TweenMax と比べると、参考記事が少なめな

### 簡易的なアニメーションで OK なら「Animate.css」

JS ではないのですが、簡易的なアニメーションならこれで十分です！

CSS を読み込み、class や data 属性に動きの設定を入れてあげるだけで実装できます。

公式で動きが確認できますので、用いたいアニメーションの名前を class に入れるだけで OK です。

[公式](https://daneden.github.io/animate.css/)

#### 「Animate.css」の優れている点

- とにかく簡単に実装できる

#### 「Animate.css」のちょっと残念な点

- 複雑なものはできないところ

---

## スクロール系

上記アニメーションと組み合わせることで、スクロールして表示領域に入ったらアニメーションという流れが実装できます。

### 複雑なスクロールイベントなら「ScrollMagic」

さまざまなスクロールイベントを設定できる機能豊富なライブラリです。

いろいろできるので、例を挙げると

- 指定の DOM が見えたあと 100px 下でイベント開始
- スクロール量に応じてアニメーション
- スクロール途中で領域を固定させる

といったことができます。

公式にいろいろ sample がありますので、リンクを張ります。

[公式サンプル](https://scrollmagic.io/examples/index.html)

#### 「ScrollMagic」の優れている点

- 「`TweenMax・TimelineMax`」との相性が抜群で連携が容易
- スクロール量の取得が容易
- debugger も用意されていて、実装しやすい
- 有名なので、参考記事が豊富

#### 「ScrollMagic」のちょっと残念な点

- 実装にやや手間がかかる

`TweenMax・TimelineMax`を利用するなら、`ScrollMagic`もセットで使うことが多いと思います！
非常に機能が豊富なので、読み解くのが大変かも。。

### 簡易的なスクロールイベントなら「jQuery AniView」

単純に表示領域に入ったらイベントということだけでしたら、こちらのライブラリで十分です！

`Animate.css`と組み合わせると非常に高速に実装できると思います。

[公式](https://jjcosgrove.github.io/jquery-aniview/)

#### 「jQuery AniView」の優れている点

- 軽量ライブラリ（1KB 以下）
- シンプルな機能
- 実装が簡単

#### 「jQuery AniView」のちょっと残念な点

- 機能が少ないため、複雑なことはできない

ちょこっとアニメーション入れたいけど、予算も時間もないというときに
`Animate.css` + `jQuery AniView`でサクッと実装するのもイイです！

---

## まとめ

いかがでしたでしょうか。

アニメーションを加えたいというときに、ライブラリ選びの参考としていただければと思います。

別記事で、それぞれの使い方やオススメの学習法などまとめていこうと思います。


実務で利用しているJSアニメーションライブラリについて


今回は、オススメツール紹介ということで、フリーランスになってからすぐ使い始めた『Avocode』をご紹介します。
このツールは、ガチです。ガチでヤバいです。

## デザインコード抽出とは

デザインコード抽出とは、簡単にいうと

- PSD などを Web 上などに取り込む
- ワンクリックで、どんなスタイル（CSS）が当たっているのかわかる

というめちゃくちゃ便利なツールです。

何か良いツールがないか探していたところ、Qiita に投稿されていた以下の記事を見て、試しに使ってみたところ、まさにタイトルに偽りなしでした！
[2019 年の全てのウェブ業界が使うべき、最強のデザインコード抽出/共有/履歴/管理ツール『Avocode』](https://qiita.com/ryuta69/items/d34d0f925f16f4b52946)

最強と言っていいんじゃないでしょうかね。

Avocode 公式はこちら
[https://avocode.com/](https://avocode.com/)

HTML・CSS を書くときにわざわざ PSD でフォントサイズを見たり、色を確認したりという作業をすると、非常に時間がかかり非効率です。
PSD も重いですし、スペックが低い PC だとさらに悲惨です。
少しでも作業効率を上げていくことが大事です。

## 僕のデザインコード抽出ツールの使用遍歴を振り返る

僕は Avocode を利用する前のコード抽出ツールは以下を利用してました。

- [Adobe CC Extract](https://helpx.adobe.com/jp/creative-cloud/help/extract.html)
  - 以前は Web で利用できていた気がしますが、途中から Web 版を廃止して Dreamweaver 必須になったようで（間違ってたらすみません。）VS Code を使っているのにわざわざ Dreamweaver を立ち上げるのは馬鹿らしいので使うのをやめました。
- [PSDETCH](https://studio.psdetch.com/)
  - 【Avocode】を使うまでは、もう 4 年ぐらいずっとお世話になってました。無料で使えて、機能も十分で良かったです。無料ならこれ一択でいいかも。

『Extract』をはじめて使った時は衝撃的だったのを覚えています。

## なぜ『PSDETCH』をやめて有料の『Avocode』を使い始めたのか

無料お試しが、2 週間あるので、思い切って実務で使ってみました。

正直『PSDETCH』で不満に感じていた点が解消できて、感動しました！！

基本的にできることなどは、以下の記事にいろいろ書いてあるので、参考にしてください。

[2019 年の全てのウェブ業界が使うべき、最強のデザインコード抽出/共有/履歴/管理ツール『Avocode』](https://qiita.com/ryuta69/items/d34d0f925f16f4b52946)

僕は基本的に一人でコードを書くので、共有周りはあまり関係ないのですが、チームでガッツリ使うなら共有機能も便利かと思います。

上記以外でのオススメポイントをまとめていきます。

## 個人的『Avocode』オススメポイント 3 選

今回は適当に作りましたが、以下の PSD データをもとに説明します。

### プロジェクト毎にフォルダーを作成可能

プロジェクト毎にフォルダーを作成できるのはめちゃくちゃ便利です。
（高いプランだと、サブフォルダーまで作れるのですが、一番安いプランですとサブフォルダーは作れないです。）

容量制限はないので、いくつでも UP できます。また、地味に上書き機能も便利です。
（高いプランだと、履歴を戻せますが、一番安いプランですと履歴戻せません。）

### フォントサイズが pt ではなく px で抽出される

これも『PSDETCH』異なる大きなポイントです！

フォントサイズで pt は、普通使わないのではないでしょうか？
web だと、「px、rem、em、%」あたりがメインかと思います。

『PSDETCH』では、なぜか pt がベースになっているようで、不満でしたが、『Avocode』なら px で出ます！
かなりマニアックだけど、個人的にはめちゃくちゃうれしいポイント。

### 1 レイヤー内の異なるスタイルもすべて抽出できる

またまたマニアックな内容ですが、これはかなり衝撃的でした。
これが決め手となり、採用しました。

抽出される CSS は以下になります。

```css
/* Style for "Avocode サイ" */
width: 784px;
height: 107px;
color: #333333;
font-family: 'Yu Gothic';
font-size: 45px;
font-weight: 400;
line-height: 80px;
/* Text style for "Avocode" */
font-family: ?????;
font-weight: 400;
letter-spacing: 0.81px;
/* Text style for "サイコー!!" */
color: #fc0000;
font-family: 'Yu Gothic - Bold';
font-size: 125px;
font-weight: 700;
letter-spacing: 2.25px;
```

Avocode の箇所とサイコー!!の箇所で

- font-size
- letter-spacing
- font-weight
- color

が異なるのですが、それぞれちゃんと出力されていますね。
これができるとできないのでは、作業効率が全然違います。

## 料金について

料金情報については、以下に記載があります。

[https://avocode.com/pricing](https://avocode.com/pricing)

複数人で使うという場合でなければ「Pro」の$14/月で大丈夫でしょう。（2019/7/30 時点）
$14/月 ⇒1,520 円/月の価値は確実にあるでしょう。

## まとめ

いかがでしたでしょうか。コーダーの方に本当にオススメしたいです。
『Avocode』はすべて英語ですので、ちょっと英語の苦手意識が強いと使えないかもしれませんが、UI が優れているので、読めなくても何とかなります。

4 カ月で一度だけ、不具合に遭遇（おそらくサーバーエラー）しましたが、サポートに連絡したところすぐにレスポンスがあり、運用もきちんとされているかと思います。

少しでも作業効率を上げたいコーダーの方、ぜひ無料お試しをどうぞ！

[https://avocode.com/](https://avocode.com/)

本当はオススメ Web サービス 5 選というブログを書こうと思っていたのですが、ついつい Avocode だけで長くなってしまったのでこれだけで 1 記事にしてしまいました（笑）
（これだけオススメしても 1 円も入りませんが笑）


最強のデザインコード抽出・管理ツール『Avocode』


さて、今回は当ブログで実際に行ったドメイン移管についてまとめていきます。
[広告のために WordPress のドメイン移管をした話【mixhost】 - ドメイン取得から WordPress インストールまで](https://blog-jws.com/domain-change1)の続きの記事となります。

長くなりますので、2 記事に分けてました。

- [ドメイン取得から WordPress インストールまではこちらの記事](https://blog-jws.com/domain-change1)
- [WordPress のデータ移行からドメイン移管・SEO 周りの設定はこちらの記事](https://blog-jws.com/domain-change2)

## WordPress のデータ移行

`WordPress`を旧サイトの中身をサイトからコピーしてきます。

いろいろやり方はございますが、一番簡単なプラグインを使ったやり方をご紹介します。

[All-in-One WP Migration](https://ja.wordpress.org/plugins/all-in-one-wp-migration/)というプラグインを利用します。

### All-in-One WP Migration を旧サイト（移管元）にインストール

1. WordPress 管理画面より`プラグイン`⇒`新規追加`をクリックします。
2. キーワードに`All-in-One-WP-Migration`を入力して検索し、`今すぐインストール`をクリックします。
3. インストール後に`プラグインを有効化`しておきましょう。

![All-in-One-WP-Migration](img02.jpg)

### All-in-One WP Migration で旧サイト（移管元）からエクスポート

1. 左側ナビに`All-in-One WP Migration`が出てきますので、`エクスポート`をクリック
2. `エクスポート先`から`ファイル`をクリックしてください。

![エクスポート](img03.jpg)

3. ブログデータのダウンロードというポップアップが出てきますので、クリックしてローカルに保存します。

![エクスポート](img04.jpg)

以上で、旧サイト（移管元）のデータの準備は完了です。

### 新サイト（移管先）にも All-in-One WP Migration をインストール

上の`All-in-One WP Migration を旧サイトにインストール`と同じ要領でインストールを行います。

### 新サイト（移管先）で旧サイト（移管元）のデータをインポート

1. 左側ナビに`All-in-One WP Migration`が出てきますので、`インポート`をクリック
2. `エクスポート元`から`ファイル`をクリックしてください。

![インポート](img05.jpg)

3. バックアップを取るようアラートが出ますが、空のサイトなので無視して`開始`をクリック

![インポート](img06.jpg)

4. しばらく待って、インポートが完了したら`完了`をクリックします。

![インポート](img07.jpg)

5. ログイン画面に飛ばされたら OK です。情報を入力してログインしましょう。

![インポート](img08.jpg)

6. 無事表示されればデータの移管は完了です！

![インポート](img09.jpg)

以上で、旧サイト（移管元）から新サイト（移管先）へデータ移行は完了です。ホント簡単！

（今回の移管ではなぜか画像が数枚飛んでましたので、手作業で戻しました。。。）

## 旧サイト（移管元）へのアクセスを、新サイト（移管先）へリダイレクト

サイトのデータ移管は完了ですが、まだやることはあります！
旧サイト（移管元）へのアクセスを、新サイト（移管先）へリダイレクトしてあげる必要があります。

これはプラグインよりも `.htaccess` で行った方が簡単なので、こちらを編集します。

1. FTP で旧サイト（移管元）に入ります。
2. WordPress がインストールされているディレクトリの直下に `.htaccess` がありますのでそのファイルを編集
3. 以下の記述を `.htaccess` の`一番上`に記載します。（一番下だとうまく動作しませんのでご注意ください。）
4. URL が掛かれている箇所は、新サイト（移管先）の URL を記載します。

```.htaccess

# リダイレクトの設定
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^(.*) https://blog-jws.com/$1 [R=301,L]
</IfModule>

```

4. 旧サイト（移管元）へアクセスしてみて、新サイト（移管先）へリダイレクトできているか確認します。

以上がリダイレクト処理になります。

## URL 変更処理（Google サーチコンソール）

リダイレクトまで完了しましたら、次は Google サーチコンソールの設定になります。

### 新サイト（移管先）を Google サーチコンソールに登録

まずは新サイト（移管先）を Google サーチコンソールに登録します。

1. サーチコンソールにログインします
2. 左上から、`プロパティを追加`
3. 新サイト（移管先）を Google サーチコンソールに登録
4. 所有者確認では、HTML を UP するのが一番簡単なので、FTP で UP

これで新サイト（移管先）を Google サーチコンソールに登録できました。

### 旧サイト（移管元）のアドレス変更

1. サーチコンソールにログインします
2. 新 UI の方だと場所が分からないので、旧デザインの方へ移動します。
3. 右上の箇所を`旧サイト（移管元）`にします。
4. `右上の歯車`をクリック ⇒`アドレス変更`をクリック

![サーチコンソール](img10.jpg)

5. `リストから新しいサイトを選択する`に先ほど登録した`新サイト（移管先）`をセット

![サーチコンソール](img11.jpg)

6. 他の項目もクリックすれば問題ないです。
7. 完了後に送信します。

これでサーチコンソール上での URL 変更処理が、完了し SEO の面でもきちんと移管できました。

## Google アナリティクスの設定を変更

結構長くなりましたが、これでいよいよ最後です！
ドメインが変わってますので、Google アナリティクスの設定も変更しなければいけません。

今回は、これまでのアナリティクスデータを保持しつつ、新サイトのデータを蓄積するような形にします。

1. まずは Google アナリティクスにログイン
2. `旧サイト（移管元）`の画面を開きます。
3. `プロパティ設定`より、`デフォルトの URL`を`新サイト（移管先）`に変更します。

![GA](img12.jpg)

4. 続いて、`ビューの設定`より`ウェブサイトの URL`を`新サイト（移管先）`に変更します。

![GA](img13.jpg)

以上で Google アナリティクスの設定も完了です！

これですべての移管作業が終わりました。（ほかにもやることがあるかしれませんが。。）

## まとめ

2 記事に渡り、WordPress のドメイン移管についてドメイン申請から Google の設定までまとめてみましたが、いかがでしたでしょうか。

実際にブログ用の画像をキャプチャ取りながら進めてみましたが、たかがドメイン変更といっても、プラグインを用いて極力楽に進めてもかなりやること多いなと感じました。

もしこれから WordPress でのドメイン変更作業が必要になる方がいらっしゃいましたら参考にしていただければ幸いです。

本題の`Google AdSense`への申請は、もう少し待ってクローラーが落ち着いた頃してみようと思います。
その際はまたブログでまとめていきますので、しばしお待ちください。

（ブロガーさんのブログを拝見してると、この申請がなかなか通らないらしく、たぶんガッツリとブログの中身を変えるかもです。。。めんどくさい。。。）


広告のためにWordPressのドメイン移管をした話【mixhost】-WordPressのデータ移行からドメイン移管・SEO周りの設定まで


こんにちは。
さて、今回は当ブログで実際に行ったドメイン移管についてまとめていきます。

長くなりますので、2 記事に分けてました。

- [ドメイン取得から WordPress インストールまではこちらの記事](https://blog-jws.com/domain-change1)
- [WordPress のデータ移行からドメイン移管・SEO 周りの設定はこちらの記事](https://blog-jws.com/domain-change2)

## ブログのドメインを変えた理由について

今回、当ブログのドメインを変更した理由は「`Google AdSense`」への登録のためです。
ブログで収益を上げるためには、

1. ブログを立ち上げる
2. 数記事書く
3. `Google AdSense`へ申請を出す
4. 申請が通る
5. ブログで広告を配信する
6. アクセスが多ければチャリンチャリンとお金が入る

みたいな感じで基本広告収入になりますので、これまで試したことのなかったのですが思い切ってやってみようと思いました。

しかし、申請画面で予想外の事態に。

`Google AdSense`は、基本的にメインのドメインしかできないようです。。。

詳しくは以下の公式ヘルプを見てください。
[AdSense アカウントの開設時にサイトの URL を入力する方法](https://support.google.com/adsense/answer/2784438?hl=ja)

もともとこのブログは `jws.work` のサブドメインとして `blog.jws.work` で作っていたのですが、新規でブログ用ドメインを取得して`サブドメイン`から`新ドメイン`移管する必要がでてきたというわけです。

というわけで、スタートラインに立つ前からコケるという事態に陥ってしまった訳です（笑）
スタートラインどころか試合会場到着前にコケたレベルですが（笑）

基本的にドメインを変えると SEO 的によろしくありませんので、なんかドメインが気に入らないから気分で変えるとかはしない方が良いです。
まぁ現状あまりアクセス数もないので、早めに変えることが最善という結論に至り、早速着手してみました。

## 新規ドメイン取得からネームサーバーの設定まで

### 新規ドメイン取得

ドメインの取得は、普段利用している[お名前.com](https://www.onamae.com/)から行いました。
他のサービスでも全然問題ございません。

希望ドメインで検索をかけ、購入しましょう。
私は、`blog-jws.com`のドメインが空いていたので、購入しました。

### ネームサーバーの設定

続いて、`お名前.com`上でネームサーバーを変更します。

ドメインの管理画面にて、`ネームサーバーの設定`⇒`変更したいドメインをクリック`⇒`他のネームサーバーを利用`⇒`ネームサーバー情報を入力`に情報を入力します。

私は mixhost でサーバーを契約しているので、`ns1.mixhost.jp`という感じで入力します。

mixhost のネームサーバーの設定は以下の公式サポートをご確認ください。

![mixhost ネームサーバーの設定方法](img02.jpg)

これでとりあえず`お名前.com`上の作業は完了です。

## mixhost サーバーにドメインを追加する

ここからは`mixhost`での作業になりますので、他サーバーとやり方が異なってきます。

### アドオンドメインでドメイン追加

`cPanel`にログインして、`アドオンドメイン`をクリックします。

![ドメイン追加1](img03.jpg)

![ドメイン追加2](img04.jpg)

`新しいドメイン名`に購入したドメインを入力して追加を行います。
入力が終わったら`ドメインの追加`をクリックします。

### 追加されたか確認する

実際にドメインが追加されたか確認してみましょう。
ブラウザに追加したドメインを入力して開いてみます。

![ドメイン確認](img05.jpg)

無事、ドメインが追加されたようです。
これで表示されない場合は、ドメインの反映に時間がかかっていることが、考えられます。

今回私は 5 分ぐらいで反映されてましたが、長く見積もって半日ぐらい待てば反映されているはずです。

## WordPress のインストール

追加したドメインに`WordPress`をインストールします。
`mixhost`の場合、`Softaculous Apps Installer`の`WordPress`からめちゃくちゃ簡単にインストールできます！

![wpインストール](img06.jpg)

`上画像の箇所をクリック`⇒`インストールをクリック`します。

![wpインストール2](img07.jpg)

- `ソフトウェアセットアップ`の`ドメインの選択`で先ほど追加したドメインを選択します。（ルート以外にインストールしたい場合は`ディレクトリ`に入力すれば OK）
- `管理者アカウント`の情報を入力します。
- `アドバンスドオプション`という箇所で DB 情報を変更できますので、必要な方は変更します。
- 一番下の`インストール`をクリックします。

![wpインストール3](img08.jpg)

これだけでインストールが完了しちゃいます！
他のレンタルサーバーだと、`DB の作成`⇒`WordPress インストール時に DB 情報を入力`とかやらないといけませんが、`mixhost`はめちゃくちゃ簡単です（笑）

では、さっそく管理者 URL をクリックしてみましょう。
無事管理画面が表示された完了です。

以上が、`ドメイン取得`⇒`WordPress インストール`まで流れとなります。
お疲れ様でした。

## まとめ

`Google AdSense`は、`サブドメイン`や`サブディレクトリ`での申請が基本的にできないので、これからブロガーになって広告収入を得ようと思っている人は注意が必要です！
ドメイン取得からやると結構手間ですし、ドメイン変えると SEO 的にもマイナスなので、先に知っておけばよかったと後悔しています。。。

次の記事（[広告のために WordPress のドメイン移管をした話【mixhost】 - WordPress のデータ移行からドメイン移管・SEO 周りの設定まで](https://blog-jws.com/domain-change2)）にて、移管作業にかかるイロイロな作業を最後までまとめていますので、ご覧になってください。


広告のためにWordPressのドメイン移管をした話【mixhost】-ドメイン取得からWordPressインストールまで


WordPress のテーマ作成についてまとめます。

下記記事に構築方法はまとめています。

[WordPress ローカル環境構築【Windows】](https://blog.jws.work/wp-local/)

ローカル環境で構築すすめる方法をまとめていきます。

## テーマファイルの作り方 事始め

ローカルでのディレクトリに新しく作るテーマのディレクトリを作ります。

`C:\Bitnami\wordpress-4.8.3-0\apps\wordpress\htdocs\wp-content\themes`

今回は、`kors`ディレクトリとします。

## テーマファイルの作り方 中身

できたディレクトリの中身にファイルを作っていきます。

```txt
/kors
├─ index.php
├─ style.css
```

## WordPress 関数の使い方

### body に class をつける

ページを区別するため body に class をつける。

```php
<body <?php body_class(); ?>>
```

### 記事タイトルの出力

```php
// 普通のタイトルタイトル出力
<?php the_title(); ?>

// 文字数が20文字以上の場合、後ろに「･･･」をつけて出力するサンプル
<?php
  if(mb_strlen($post->post_title, 'UTF-8')>20){
    $title= mb_substr($post->post_title, 0, 20, 'UTF-8');
    echo $title.'･･･';
  }else{
    echo $post->post_title;
  }
?>
```

### 記事本文を取得

```html
<p>本文</p>
```

という形で、p タグを含み本文が出力される。

[参考](http://www-creators.com/archives/704)

```php
// 普通の本文を出力
<?php the_content(); ?>

// 文字のみ出力
<?php
 $content = str_replace('\n', '', mb_substr(strip_tags($post-> post_content), 0, 200,'UTF-8'));
 echo $content.'･･･';
?>

// 文字数が20文字以上の場合、テキストのみ取得して後ろに「･･･」をつけて出力するサンプル
<?php
if(mb_strlen($post->post_content,'UTF-8')>20){
 $content= str_replace('\n', '', mb_substr(strip_tags($post-> post_content), 0, 20,'UTF-8'));
 echo $content.'･･･';
}else{
 echo str_replace('\n', '', strip_tags($post->post_content));
}
?>
```

### 前の記事へ、次の記事へボタン

- 前の記事は `previous_post_link();`
- 次の記事は `next_post_link();`

引数を設定することで、様々な設定が可能

[参考](https://yotsuba-d.com/blog/post-5675/)

```php
<?php previous_post_link('%link', '前の記事へ'); ?>
<?php next_post_link('%link', '次の記事へ'); ?>
```

### 投稿日時の取得

引数を設定することで、フォーマットを変えられる。

WP 全体の設定は、
「設定」→「一般」→「日付のフォーマット」
で変更可能

[参考](https://wpdocs.osdn.jp/%E6%97%A5%E4%BB%98%E3%81%A8%E6%99%82%E5%88%BB%E3%81%AE%E6%9B%B8%E5%BC%8F)

```php
<time datetime="<?php echo get_the_date('Y-m-d') ?>">
  <?php echo get_the_date() ?>
</time>
```

### カテゴリの取得

カテゴリは`the_category()`で取得する。

カテゴリ名を slag で取得して、クラスを付与し色分けすることも可能。

[参考](https://yotsuba-d.com/blog/post-5675/)

```php
// カテゴリを出力
<?php the_category() ?>

// 複数カテゴリがついたときに、間に「,」を挟むサンプル
<?php the_category(' , ') ?>


// カテゴリが単一の場合、クラス名をスラッグで取得して設定し、色分けを行うサンプル。
<span class="<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?>">
  <?php the_category() ?>
</span>
// slugを「cat1」と「cat2」とすると
<style>
  .cat1{
    background-color: blue;
  }
  .cat2{
    background-color: black;
  }
</style>
```

### 記事のループ

ポストがある分だけループして投稿記事を取得して、タイトルや本文などの情報抜き出す。

```php
// 例その1
<?php if(have_posts()): while(have_posts()): the_post(); ?>
  <div>
    <a href="<?php the_permalink(); ?>">
      <h1><?php the_title(); ?></h1>
      <div class="postinfo">
        <time datetime="<?php echo get_the_date('Y-m-d') ?>">
          <?php echo get_the_date() ?>
        </time>

        <span class="postcat <?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->slug; } ?>">
          <?php the_category(' , ') ?>
        </span>
      </div>
      <?php
        if(mb_strlen($post->post_content,'UTF-8')>200){
          $content= str_replace('\n', '', mb_substr(strip_tags($post-> post_content), 0, 200,'UTF-8'));
          echo $content.'……';
        }else{
          echo str_replace('\n', '', strip_tags($post->post_content));
        }
      ?>
    </a>
  </div>
<?php endwhile; endif; ?>

// 例その2
<?php $posts = get_posts('numberposts=7&category=3&order=DESC'); global $post; ?>
  <?php if($posts): foreach($posts as $post): setup_postdata($post); ?>
    <div class="news">
      <p class="day">
        <?php echo get_the_date("Y.m.d"); ?>
      </p>
      <p>
        <a href="<?php the_permalink(); ?>">
          <?php the_title(); ?>
        </a>
      </p>
      <?php
        if(mb_strlen($post->post_content,'UTF-8')>20){
          $content= str_replace('\n', '', mb_substr(strip_tags($post-> post_content), 0, 20,'UTF-8'));
          echo $content.'･･･';
        }else{
          echo str_replace('\n', '', strip_tags($post->post_content));
        }
      ?>
      <a href="<?php the_permalink(); ?>">すべて読む</a>
    </div>

  <?php endforeach; endif;?>
<?php wp_reset_postdata(); ?>

```


WordPressテーマ作成


仕事で WordPress 案件を扱うことが多くなりそうなので、WordPress のローカル環境の構築方法をまとめます。
今後 WordPress は結構勉強しないとなー。

## データ準備

まず、`bitnami`より`WordPress`のデータを落としてくる。

PHP や MySQL などもまとめて環境を構築してくれるので、非常に簡単！

[https://bitnami.com/stack/wordpress](https://bitnami.com/stack/wordpress)

【画像】

基本的に`next`で進めていけば大丈夫なので、とくににつまずくところはないかと。
注意が必要なのは一か所だけ。

`Bitnami Cloud Hosting というところで、チェックを外すことを忘れずに！`

インストールが完了すると

## 日本語版 WP を落としてきて入れ替える

`Bitnami`の`WordPress`は英語版なので、日本語版の WP を落としてきて、日本語版と入れ替えます。

下記から Zip を落としてきて、解凍します。

[https://ja.wordpress.org/](https://ja.wordpress.org/)

解凍したフォルダーを下記フォルダーに上書きでコピーします。

`C:\Bitnami\wordpress-4.8.3-0\apps\wordpress\htdocs`

これで OK。

## アクセスしてみる

下記にアクセスしてみてサイトが表示されていれば OK。

[http://localhost/wordpress/](http://localhost/wordpress/)

## ログインして初期設定

下記にアクセスして、インストール時に設定した ID と PW を入力。

[http://localhost/wordpress/wp-login.php](http://localhost/wordpress/wp-login.php)

これで管理画面が表示されるはず！

ついでにプラグイン画面で`WP Multibyte Patch`を有効化しておきましょう。


WordPressローカル環境構築【Windows】


`.htaccess`書くときにいつもググってるなと思い、まとめてみました。

sample を対象のドメインに書き換えれば OK です。

### Basic 認証

以下サイトを利用すると簡単に Basic 認証用`.htaccess`を生成できます。

- [http://www.htaccesseditor.com/](http://www.htaccesseditor.com/)

```apache
<Files ~ "^\.(htaccess|htpasswd)$">
deny from all
</Files>
AuthUserFile /home/sample/www/test/.htpasswd
AuthGroupFile /dev/null
AuthName "Please enter your ID and password"
AuthType Basic
require valid-user
order deny,allow
```

### www ありに統一

```apache
RewriteEngine on
RewriteCond %{HTTP_HOST} ^sample\.com
RewriteRule (.*) http://www.sample.com/$1 [R=301,L]
```

### www なしに統一

```apache
RewriteEngine on
RewriteCond %{HTTP_HOST} ^www\.sample\.com
RewriteRule (.*) http://sample.com/$1 [R=301,L]
```

### http-→https に統一

```apache
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
```

### index.html なしに統一

```apache
RewriteEngine on
RewriteCond %{THE_REQUEST} ^.*/index.html
RewriteRule ^(.*)index.html$ http://www.sample.com/$1 [R=301,L]
```

### ファイル一覧非表示

```apache
ErrorDocument 404 http://sample.com/
ErrorDocument 403 http://sample.com/
DirectoryIndex index.html index.cgi index.php .ht
```

### 通信時に圧縮させるモジュール

```apache
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary
</IfModule>
```

### ブラウザへのキャッシュの設定

```apache
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 30 minutes"
ExpiresByType text/html "access plus 30 minutes"
ExpiresByType text/css "access plus 1 days"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>
```

### 旧ディレクトリのリダイレクト

about→concept へ

```apache
RewriteRule ^about/$ http://www.sample.com/concept/ [R=301,L]
```


htaccessコピペ集


Web 系エンジニアの成長速度を上げる方法や、勉強法について私の経験から考えをまとめていきたいと思います。

これから Web の勉強をする方や、最近の新しい技術に追いつけていないエンジニアの方に少しでも参考になればと思います。

## 成長速度を上げるために絶対必要なこと

- 新しい技術への興味・関心
- 成長したいと思う強い気持ち！
- 正しい教材の選択

ちょっとざっくりしすぎですが（笑）詳しく書いていきます。

## ちょっとだけ私の話

その前にちょっとだけ私の話をします。

Web 周りの経験年数とどんなことをしていたのかまとめます。

| 経験年数     | 内容                                                                                                                    |
| :----------- | :---------------------------------------------------------------------------------------------------------------------- |
| 0 ～ 2 年目  | Web 系の企業に就職したわけではないので、EC サイトの運用など軽く HTML だけググりながら書くレベル。                       |
| 2 ～ 4 年目  | CSS や jQuery を勉強し、簡単なレスポンシブ Web サイトが作れるレベル                                                     |
| 4 ～ 6 年目  | ディレクターとして Web 制作や運用を行う会社へ就職。この頃から少しずつ技術系の勉強を始め、エンジニアになりたいと考える。 |
| 6 ～ 8 年目  | ディレクションをしながら、自らコーディングも行うようになる。いわゆる新しい技術はこのあたりから勉強を始める。            |
| 8 ～ 10 年目 | エンジニアとして、働くようになる。勉強した新しい技術を積極的に案件に取り入れたり、セミナーにも結構行くようになる。      |
| 10 年目～    | 独立して主にフロントエンドの担当しながら、まだまだ勉強中。自社サービスを作りたいと思っている。                          |

という感じで、がっつりエンジニアをやっているのは 4 年ぐらいという感じでしょうか。
主に受託案件をやってきました。

振り返ってみると、周りに相談できるエンジニアがいなかったというのもあり、もっと早く何をどう勉強すれば良いのか知りたかったなと思っています。

## 新しい技術への興味・関心

Web の技術は本当に変化・進化が速いです。
そのため、新しいものへの興味などは Web 系のエンジニアはほぼ必須かなと思っています。
飽き性な人に Web 系のエンジニアはオススメです（笑）

どうやって新しい技術を知るのか（情報収集）も非常に重要です。

### 私が普段行っている情報収集

- 技術系キュレーションサイトの活用
  - [TechFeed](https://techfeed.io)
- twitter での情報収集
  - [コリス](https://twitter.com/colisscom?s=17)
  - [こまめブログ](https://twitter.com/littlebeansinfo?s=17)
  - [鹿野壮@ICS](https://twitter.com/tonkotsuboy_com?s=17)
  - [Web クリエイターボックス](https://twitter.com/chibimana?s=17)
- セミナー・イベントへの参加
  - [connpass](https://connpass.com/)

になります。
気になった記事は`Pocket`で貯めて後で読んだりします。

[Pocket](https://app.getpocket.com/)

## 成長したいと思う強い気持ち

精神論になっちゃいますが、やっぱり成長意欲は大事です。
また、どんな仕事でも大事なことなのかと思います。

とくに最近は、働き方改革・生産性の向上など注目されていますが、
これまでのやり方を変えて、少しでも良い方法を選択することが大事だと感じます。

幸い Web の技術はすごい速度で変わっていきますので、その時その時代にあったやり方が必ずあります。
もちろん複数の選択肢がありますので、常にアンテナを張り、いろいろ試しながら最適なものを選択していくことも重要です。

働き方改革・生産性の向上などの根幹にあるのは `「成長したいと思う強い気持ち！」` なのではないでしょうかね。

## 正しい教材の選択

さて、ここからがこの記事の本題です。

何から着手していくかについては、以下の記事がとても参考になります。

[2019 年版 最先端のフロントエンド開発者になるために学ぶべきこと](https://qiita.com/baby-degu/items/da30fa71b8f48fffc568)

教材については、参考書をベースに学習されるのも良いのですが、
より更新が早くて、最新のものも豊富なオンライン学習サービスがオススメです。
書籍化されたときにはすでに次のバージョンが出ているなんてこともしょっちゅうあります。
オンライン学習ですと、次バージョンように内容もバージョン UP してくれたりするのでオススメです。

動画を見るだけでなく、実際に写経するのがベストです！
写経したコードは、GitHub にどんどん UP していきましょう。

### オススメオンライン学習サービス

- 初心者（ほとんど知識がない方）
  - 【★ オススメ】[Progate](https://prog-8.com/)
  - [ドットインストール](https://dotinstall.com/)
  - [Schoo](https://schoo.jp/)
- 中級者
  - 【★ オススメ】[Udemy](https://www.udemy.com/)
  - [egghead.io](https://egghead.io/)
  - youtube のプログラミング系チャンネル

初心者の方は、いろいろ基礎を学ぶには分かりやすい`Progate`がオススメです。
レベルとかの機能もあり、学習が進むとレベルが上がるのでちょっと楽しいです。

中級者になると、`Udemy`がオススメです。
学びたいコースを選択して、購入する形になります。
月 1 回以上セールを行っていますので、セールの時に買うのが絶対オススメです。普通に 90％OFF とかになってますので、￥ 20,000⇒ ￥ 1,300 とかで販売してます。

日本語のコースは少ないので、英語のコースで評価の高いものから選んでいきましょう。
基本写経するだけですので、何となく英語を聞き取れれば大丈夫です。
分からないところは Google 翻訳でカバーしましょう！笑
言語の問題以上に、素晴らしい内容の動画が多くありますので、英語だからという理由で躊躇わない方が絶対いいです。

## まとめ

いかがでしたでしょうか。
プログラミング初心者の時にオンライン学習をいろいろやっていれば、今とは全然スキルが違ったんじゃないかなと思います。

オンライン学習は、本を読むのは好きじゃないけど、動画なら見れるという人にもオススメです。
まだまだ勉強したいこと、できるようになりたいことはいっぱいありますので、これからも精進します。

最後にフロントエンドのロードマップの画像を紹介します。

<a target="_blank" href="https://miro.medium.com/max/1000/1*DfKcPCa8GWVvWC61P2eBRg.png" rel="noopener noreferrer"><img src="https://miro.medium.com/max/1000/1*DfKcPCa8GWVvWC61P2eBRg.png" width="100%"></a>

Web の領域はめちゃくちゃいろいろあるので、本当に飽きません（笑）


Web系エンジニアの成長速度を上げる教材や学習方法について


今回は、以前案件で一度利用したことがある、JS で SVG アニメーションを行うライブラリと使い方をご紹介しようと思います。

`令和`というテキスト（SVG）を動かしてみます。

## 完成品

以下に作成したものを UP しますので、見てみてください。

<iframe src="https://korsmic.github.io/JWS-Blog/animejs-svg/" width="100%" height="500"></iframe>

[https://korsmic.github.io/JWS-Blog/animejs-svg/](https://korsmic.github.io/JWS-Blog/animejs-svg/)

## 使用ライブラリ紹介

`anime.js`というものを利用して実装を行います。

DL は以下の GitHub よりできます。

[https://github.com/juliangarnier/anime/](https://github.com/juliangarnier/anime/)

## まずは SVG（令和）を作成

イラストレーターで作成します。

フォントをアウトライン化して、SVG で保存します。

この際、余計な余白が付いてしまうと、面倒になるので、余白を外します。

「オブジェクト」⇒「アートボード」⇒「オブジェクト全体に合わせる」で余白を外せます。

## HTML 実装例

- HTML で`animejs`を読み込みます。
- SVG を入れる要素を作り、中に作成した SVG を入れます。
- SVG の不要な部分は削除して問題ありません。

```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>令和でSVGアニメーション</title>
    <style>
      div,
      body {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .wrap {
        background-color: #000;
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 30px;
      }
      .svg {
        max-width: 800px;
        width: 100%;
        background-color: #000;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="svg">
        <svg
          version="1.1"
          id="reiwa"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 0 279.9 129"
          xml:space="preserve"
        >
          <g>
            <path
              d="M0.1,75.3c0,0-0.1,0-0.1-0.1c0-0.2,0.1-0.3,0.5-0.3h0.1c1.3-0.3,2.2-0.6,2.7-0.9c0.6-0.5,1-0.9,1.6-1.2c7.5-4.7,12.9-9.6,27-24.9l23.7-28.6c0.6-1,1.1-1.8,1.8-2.8c0.3-0.6,1.3-2,2.5-3.3c2.1-2.6,3-4.2,3-6c0-1.9-0.8-2.8-2.9-3.9c0.8-0.3,1.6-0.8,1.6-0.8l1.8-1C65.4,0.5,67.2,0,69.1,0c2.1,0,4.8,0.8,7,2C78.3,3,79,4.2,79,6c0,1.9-0.6,2.7-4,4.6c1.5,3.7,3.1,5.8,12,15l18.9,19.2l5.3,4.6l5.5,5.4c1,0.9,2.3,1.7,4.2,2.6h0.5c0.6,0.4,1.3,0.9,1.6,1l2.8,1.5c0.3,0.3,1.4,1.1,3.1,2.4c0.5,0.3,2,1.3,4.1,2.7c1,0.8,1.8,1.3,2.3,1.6c0.9,1.1,1.9,2,3,2.8c0.1,0.3,0.9,0.8,1.9,1.4l-0.2,0.8c-4.8,0.8-9,1-12,1c-2.7,0-6.1-0.9-8.7-2.1c-2.4-0.5-8.1-5.5-15.1-13.5L86.1,33.3c-0.2-0.1-0.6-0.5-1.4-0.9c-0.6-0.3-1.5-1.5-2.9-3.3c-0.6-0.8-1.8-2.3-3.4-3.9l-1.4-1.4c-0.9-1-1.6-2.1-2.5-3c-1-1.2-1.8-1.8-3.6-2.8c-0.8-0.6-0.8-0.6-1.8-1.5l-0.3,0.4c-0.8,0.6-1.2,1.1-1.4,1.2c-0.8,0.8-1.5,1.6-2.3,2.5c-0.1,0.1-0.6,0.6-1.2,1l0.1,0.8l-2.5,3.1L40.3,51.9l-4.6,4.5c-6.3,7.1-8.9,9.2-16.2,13.7l-3,2.3L13,73.9C10.8,75.4,7.3,76,3.3,76H2.1c-0.6,0-0.9-0.1-1.1-0.6L0.1,75.3z M38.1,86.5c0-1.5,0-1.8,0.1-2.5c0.1-0.5,0.8-1.2,1.9-2.4c1.5-1.8,4.2-5.1,7.9-9.8C59.8,60.3,64.5,54.6,66.6,49c-0.8-0.9-1.5-1.3-1.8-1.5c-1-0.4-2.1-0.9-3.1-1.5l-1.8-1.9c-0.1-0.2-0.5-0.3-1.1-0.6c-0.3-0.2-0.9-0.6-1.5-1.1c0.9-0.2,1.5-0.3,1.6-0.4l3.9-2c1-0.4,2.1-0.8,3.3-0.8c3.7,0,4.8,0.6,9.7,5.1c5.2,4,5.4,4.3,5.4,5.5c0,0.9-0.8,2.4-1.7,3c-0.7,0.6-0.7,0.6-5.1,1.2c-3,0.2-13.9,7.8-17.2,11.8c-4.4,5.1-5.7,7.7-7.8,15.2c0.6,0.3,1,0.6,1.3,0.6c0.3,0,0.3,0,6.1-3c9.3-3.8,12-4.8,12.3-4.8c3.1-0.9,5.4-1.5,5.7-1.8l3-2.3c0.8-0.6,2-0.9,3-0.9c4.8,0,10,3.3,12,7.7c-1.6,1.8-2.1,2.3-4.8,3.6c-2.3,1-2.4,1.3-4.3,6.1c-4.2,8-8.3,13-12.9,16.2v0.6c0,1.2,0.4,1.8,2.5,2.8c9.4,6.8,13.6,12.1,13.2,17.1c0.8,2.3,0.8,2.3,0.8,2.4c0,1.5-1.6,3.5-2.8,3.5c-0.6,0-0.6,0-6.3-2.7c-2.9-2.1-4.6-3.5-5.3-3.8c-1-0.6-1.5-0.7-2.8-1.2c-0.8-0.1-1.6-0.4-2.5-0.8c-0.5-0.3-0.9-0.4-1.4-0.6c2.4-0.3,5.8-1.5,8.7-3.2c-1.6-3-3.6-4.6-7.3-6.6c-2.7-1.5-7.6-2.8-10.3-2.8h-0.9c-5.2-2.4-6.1-3.4-6.3-7.6l1,0.3v-0.4l2.4-0.3l3.6,0.5l2.9,0.1c0.3,0,0.9,0.2,1.6,0.3l3.1,0.9c0.4-0.6,0.8-1.1,1-1.4c3.9-4.6,5.9-8.4,8.3-15.4c1.9-4.5,1.9-4.5,1.9-5.4c0-0.3-0.1-0.8-0.5-1.4c-0.9,0.1-1.9,0.6-1.9,0.6l-1.4,0.6l-2.5,0.9l-2.1,1c-3,1.5-3.1,1.5-5.5,3c-2,1.2-2.4,1.5-12.4,8c-1,0.6-1.6,0.9-2.4,0.9c-2.7,0-5.5-1.8-8.5-5.5L38.1,86.5z"
            />
            <path
              d="M175.3,72.6c-5.7,5.1-5.7,5.1-6.8,5.1c-1.5,0-4.1-0.6-5-1.2c-6-4-6-4-6.7-5.4c0.1-0.8,0.6-2.4,1.6-5.1c1,1.4,2,2.1,2.7,2.1c1.5,0,1.5,0,11.2-5.2l5.5-3.5l24.1-12.9c0.3-1.3,0.4-2.2,0.4-2.4l0.2-6.3v-4.4c-0.2-1.6-0.6-2.3-2.4-3c1.8-1.3,2.8-1.8,4.3-1.8c4,0,9.1,2.7,9.1,4.9c0,0.6-0.5,2.5-1,5.3c-0.2,0.4-0.2,0.9-0.3,1.7l0.4,0.4c6.2,0.9,8.5,2,8.5,3.9c0,1,0,1-9.4,5.4c-0.8,0.8-0.9,1-1.5,5.3c0.8,0.5,1.3,0.8,1.6,0.9c2.5,1.4,3.3,2.3,3.3,3.8c0,1.7-0.9,3.6-2.4,5.5c-4.3,5.5-4.5,6-4.5,9.5v1c1.5-0.8,2.4-1.4,5.1-3.3c3.8-2.8,6-4.3,8.8-6c-0.9,2.1-3.4,5.5-7.6,10.2c-1.6,1.7-3.3,3.2-5,4.7l-0.6,0.9l-0.9,1.3c-0.3,1-0.3,1-0.5,8.1l0.1,3.4v27c0,2-0.9,3.3-2.4,3.3c-1.4,0-2.7-0.9-3.8-2.5c-0.6-0.6-3.5-6.6-3.5-6.9l0.3-2.3v-2.3c1.8-3,1.8-3,1.9-3.4c0.5-1.7,1.4-14.4,1.4-18.6c0-1.1-0.2-2-0.6-3.3c-0.6,0.7-1.3,1.3-1.5,1.3l-1,0.8l-1.5,1.6l-4,3.6c-0.6,0.3-2.8,3.3-4.8,6.5c-1.2,1.9-2.4,3-3.5,3c-0.8,0-2.4-0.7-3-1.3c-4.3-4.8-4.3-4.8-4.3-5.3c0-0.1,0.6-2.3,0.8-2.4c0.3-0.8,0.3-0.8,4.5-3.9l2.4-2.5l3.8-3.6l1.8-2.3c3.5-3.8,3.5-3.8,8.4-12.1c1.8-3,2.1-4.8,2.1-11.8c0-1.5-0.4-2.3-1.7-2.3c-1,0.6-1.6,1-2.1,1.3l-3.8,2c-2.4,1.4-4.8,2.7-6.9,4.2c-2,1.5-3.7,2.8-5.7,4.2l-3.9,2.7L175.3,72.6z M177.7,30.9c2-1,3.9-2.3,5.7-3.3c6-3.8,9-5.9,13.9-10.3c3.8-3.1,3.9-3.3,5.7-4.9c0.9-0.6,0.9-0.9,0.9-3.1c-1.2-0.9-1.5-1.1-2.6-1.4l-1.6-0.6c2.7-1.8,4-2.4,5.1-2.4c2.3,0,6,1.1,9.1,2.7c4.5,2.4,5.9,3.6,5.9,5.7c0,1.8-0.2,1.8-4,2.4c-0.6,0-2,0.8-4,2.1c-4,2.9-6.9,4.6-7.4,4.8l-3.4,1.8l-7.9,4.2c-8.6,3-10.7,3.4-15.2,3.4c-0.6,0-0.8,0-1.5-0.1L177.7,30.9z M237.3,94.2c0.8,2.4,0.8,2.4,0.8,2.7c0,0.6-0.2,1.4-0.9,3.2c-2.3-0.2-2.8-0.6-4.6-3.3c-5.1-9-8-24-5.9-31.5c0.9,1.4,1.5,2.3,1.7,2.8c0.5,1.4,0.8,2.7,1.2,4.2c0,0.1,0.8,1,1.8,2.1l0.9-0.2l1.2-1.2c0.9-1.5,2-3,2.8-4.4c0.6-0.9,0.6-0.9,12.9-5.4c8.3-2.8,14-4.5,17.1-4.7c0.2,0,0.2,0,2.3,0.5c3.6,0.6,4.5,0.9,6.9,2.3c2.3,1.2,4.5,4.5,4.5,6.3c0,0.9-0.9,1.8-1.8,1.8h-1c-3.5,0.6-5.7,2.4-9.3,7.5c-0.6,0.7-3.8,3.5-8.4,7.2c-1.5,1.2-2.5,2.7-2.5,3.5c0,0.3,0.1,0.6,0.3,1c0.9-0.3,1.3-0.5,1.6-0.5l2-0.2l2-0.3h1.2c4.2-0.9,4.2-0.9,4.5-0.9c3.5,0,8,3.6,8,6.6c0,1-0.8,2-1.7,2c-0.3,0-0.4,0-0.8-0.3c-1,0.4-1.8,0.8-1.9,0.8c-6.8-1.4-6.8-1.4-8.1-1.4c-5.1,0-11.1,0.5-12.6,0.9c-3.8,1.2-6.5,1.8-7.5,1.8s-2.1-1.5-2.7-4c0.2-0.3,0.2-0.6,0.3-0.6c0-0.1,0.4-0.3,1-0.6c0.3-0.2,0.8-0.6,1.5-1.3c0.3-0.3,1.5-1.2,3.3-2.7c8.5-7.5,8.8-7.8,12.3-12.3l4.5-5.3c0.8-0.9,1.2-1.5,2.1-2.8c-1.2-1.5-1.8-1.9-3.5-1.9c-1.8,0-1.8,0-5.4,1.8l-10,3.3c-5.8,2.4-5.8,2.4-6.9,2.4c-0.8,0-1.5-0.2-3.7-0.6l-0.3,1.2l-0.4,0.2c-0.2,0.6-0.2,1-0.2,1.2l-0.2,2.8l-0.4,4.1l0.4,2.2l0.3,2.9l1,4.2L237.3,94.2z"
            />
          </g>
        </svg>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script defer src="anime.min.js"></script>
  </body>
</html>
```

## JS の実装

今回は、文字の線を描画 ⇒ 塗りつぶしという順にアニメーションを実装します。

- `anime.timeline()`で開始します。
- `add()`を繋げることで、アニメーションを繋げます。

こちらが参考ドキュメントになります。

[https://animejs.com/documentation/#lineDrawing](https://animejs.com/documentation/#lineDrawing)

```javascript
$(window).on('load', function () {
  anime
    .timeline({
      easing: 'easeInOutSine' //easingを指定
    })
    .add({
      targets: '#reiwa path', // pathを指定
      strokeDashoffset: [anime.setDashoffset, 50],
      stroke: '#fff', // 線の色を指定
      duration: 4000, // 描画までの時間を設定
      delay: function (el, i) {
        return i * 1500; // 2文字目以降は1500ms遅く開始
      }
    })
    .add({
      targets: '#reiwa path', // pathを指定
      duration: 500, // 時間を指定
      fill: '#fff' // 塗りつぶし色を指定
    });
});
```

## まとめ

いかがでしたしょうか。これぐらいのアニメーションであれば結構簡単にできるのではないでしょうか。

私の[ポートフォリオサイト](https://jws.work/)のオープニングは、これにもう少しアニメーションを加えて移動させたりして作っています。

今回ご紹介したのはほんの一部ですが、[CodePen](https://codepen.io/collection/XLebem/)を見ると、本当にいろんなことができるとびっくりします。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="js,result" data-user="Staak" data-slug-hash="XowdeE" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Animated Boxes (three.js + anime.js)">
  <span>See the Pen <a href="https://codepen.io/Staak/pen/XowdeE/">
  Animated Boxes (three.js + anime.js)</a> by Staak  (<a href="https://codepen.io/Staak">@Staak</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

･･･まだまだ勉強しないとですね。


令和でSVGアニメーションanime.jsの使い方


今回は、以前案件で一度利用したことがある、JS でパラパラ漫画風の表現をするライブラリと使い方をご紹介しようと思います。

サクッとできるので、手間もほとんど掛かりません。

## どんなものができるのか

以下に作成したものを UP しますので、見てみてください。

<iframe src="https://korsmic.github.io/JWS-Blog/parapara/"></iframe>

[https://korsmic.github.io/JWS-Blog/parapara/](https://korsmic.github.io/JWS-Blog/parapara/)

## 使用ライブラリ紹介

`rollerblade.js`というものを利用して実装を行います。

DL は以下の GitHub よりできます。

[https://github.com/austenpayan/rollerblade](https://github.com/austenpayan/rollerblade)

## ディレクトリ構成

今回は以下のようなディレクトリ構成にします。

```txt
└─parapara
    file_list.txt
    img1.jpg
    img2.jpg
    img3.jpg
    img4.jpg
    index.html
    jquery-2.2.4.min.js
    rollerblade.min.js
```

## HTML 実装例

- HTML で JS を読み込みます。
- パラパラ漫画を入れる要素を作り、id と`class="rollerblade"`を付与します。
- 内部に初期の画像を一枚配置しておきます。

```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>パラパラ漫画</title>
  </head>
  <body>
    <div id="target" class="rollerblade">
      <img src="./img1.jpg" alt="" />
    </div>
    <script src="jquery-2.2.4.min.js"></script>
    <script src="rollerblade.min.js"></script>
  </body>
</html>
```

## JS の実装

まず、画像（パス指定）の配列データを用意します。

それを`rollerblade`の`imageArray`に入れてあげれば OK です！

```html
<script>
  $(function () {
    // 画像の配列を定義
    var datas = ['./img1.jpg', './img2.jpg', './img3.jpg', './img4.jpg'];
    $('#target').rollerblade({
      drag: false, //ドラッグの設定
      auto: true, //自動的に動かす
      sensitivity: 125,
      imageArray: datas
    });
  });
</script>
```

## まとめ

非常に少ない記述量でパラパラ漫画を実装できます。

使う場面としては、

- 動画としては重い
- ランダムで画像を入れ替えたい
- gif だと汚い

なんて時に使えるかなと思います。

ちなみに、案件で 200 枚ぐらい画像を突っ込んで実装してみましたが、問題なく動作したので、大量の画像でも大丈夫そうです。

たとえば、画像 1 と画像 2 の間はちょっと長めにするという場合にはこのライブラリではできないので、`tweenmax`などを使いましょう。


JSで画像のパラパラ漫画を5分で実装してみる

リストなど大量の情報をまとめて html ファイルに出力する方法について書きます。

エクセルで企業リストに企業名、リンク先などの情報が記載された原稿を渡されたときなど、エクセルからのコピペでは疲弊してしまうので、pug を使って一気に html 化してしまおうという話です。

## データの用意

まずは、エクセルから以下のような形に成型します。

```json
[
  { name: 'google', url: 'http://www.google.com' },
  { name: 'yahoo', url: 'http://www.yahoo.co.jp' },
  { name: 'qiita', url: 'https://qiita.com/' }
];
```

## pug ファイルの作成

先ほど用意したデータを以下のように pug ファイルを作成します。

```pug
//- pug
- var lists = [
    {name:"google",url:"http://www.google.com"},
    {name:"yahoo",url:"http://www.yahoo.co.jp"},
    {name:"qiita",url:"https://qiita.com/"}
  ];

ul
  each list, index in lists
    li
      a(href=list.url target="_blank")=list.name
```

## 出力後 html ファイル

pug ファイルを gulp などで html に変換します。（説明は割愛）

すると、以下の html ファイルができます。

```html

<ul>
  <li><a href="http://www.google.com" target="_blank">google</a></li>
  <li><a href="http://www.yahoo.co.jp" target="_blank">yahoo</a></li>
  <li><a href="https://qiita.com/" target="_blank">qiita</a></li>
</ul>
```

## まとめ

リストの数が多ければ多いほど威力を発揮してくれると思います。

コピペがしんどい時にぜひ。

Pugを使って配列、オブジェクトをhtmlに出力する方法


Web ページに動画を埋め込む際、YouTube などを使わず、ストリーミング再生を実装したい場合に色々調べて実装することができたので、メモします。

## こんな方向け

- 動画の形式のことはよくわからない
- とりあえずストリーミングを実装したい
- mp4 ファイルだけはある
- YouTube などは利用しない（自サーバーに動画を UP する）

## 動画変換の話

### ストリーミング再生対応形式について

- MPEG-dash
  - 主に windows 系が対応している
- hls
  - 主に apple 系が対応している

の 2 種類が主流の模様ようで、ブラウザではなく、OS レベルの話で対応が変わるので注意。

[参考](https://lealog.hateblo.jp/entry/2016/12/21/112805)

### 2 つの形式に変換するのは面倒

それぞれのデバイス用に動画ファイルの作成と js での振り分けをすると面倒なので、何か便利なものはないのかと検索すると、`hls.js`というものがヒットします。

[hls.js](https://github.com/video-dev/hls.js/)

hls 非対応のブラウザを対応させる JS ライブラリで、対応しているブラウザは、そのまま hls を利用する。

```js
if (Hls.isSupported()) {
  var video = document.getElementById('video');
  var hls = new Hls();
  hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
  hls.attachMedia(video);
  hls.on(Hls.Events.MANIFEST_PARSED, function () {
    video.play();
  });
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
  video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
  video.addEventListener('canplay', function () {
    video.play();
  });
}
```

### mp4 ファイルを ffmpeg を使って hls 形式に変換

素の mp4 ではできないため、FFmpeg というソフトを使い、hls 形式（m3u8 ファイルと ts ファイル）に変換します。

[ffmpeg のインストールはこちら](https://www.ffmpeg.org/)

諸々試したところ、以下を参考にコマンドを入れるとうまく動作する模様。

[https://engineer-world.duckdns.org/2018/03/07/post-1423/](https://engineer-world.duckdns.org/2018/03/07/post-1423/)

セグメント（ts ファイル）の長さは 10 秒が推奨とのことです。
[https://developer.apple.com/jp/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/FrequentlyAskedQuestions/FrequentlyAskedQuestions.html](https://developer.apple.com/jp/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/FrequentlyAskedQuestions/FrequentlyAskedQuestions.html)

コマンドは以下の通りです。

```shell
ffmpeg -i [input file path] .mp4 -codec copy -map 0 -f segment -vbsf h264_mp4toannexb -segment_format mpegts -segment_time 10 -segment_list  [output file path] .m3u8 [output file name] -%03d.ts
```

実際入力する際は、以下のような感じです。

```shell
ffmpeg -i video\video.mp4 -codec copy -map 0 -f segment -vbsf h264_mp4toannexb -segment_format mpegts -segment_time 10 -segment_list video\video.m3u8 video\video-%03d.ts
```

以下のようなファイルが出力されれば成功です。

```text
video
 ├video.m3u8
 ├video-000.ts
 ├video-001.ts
 ├video-002.ts
 ├video-003.ts
 ├video-004.ts
 ├video-005.ts
 ├video.mp4(最初から入っているファイルです。)
```

## 実装

諸々イベントがあると便利なので、デフォルトの video は利用せず`plyr.js`を利用する。

[plyr.js](https://github.com/sampotts/plyr)

### 実装コード

コード全体は以下のような感じです。

```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.4.3/plyr.css"
    />
    <style>
      .video-content {
        width: 1000px;
        margin: 20px auto;
      }
      .video-content video {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="video-content">
      <video
        id="player"
        playsinline="playsinline"
        poster="./images/poster.jpg"
      ></video>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/0.10.1/hls.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.4.3/plyr.min.js"></script>
    <script>
      const video = document.querySelector('#player');
      const videoSrc = './video/video.m3u8';
      const hlsCheck = Hls.isSupported();
      const player = new Plyr(video);
      if (hlsCheck) {
        var hls = new Hls();
        hls.loadSource(videoSrc);
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED, function () {});
      } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = videoSrc;
        video.addEventListener('loadedmetadata', function () {});
      }
    </script>
  </body>
</html>
```

## まとめ

- youtube や vimeo など、利用しなくともストリーミング配信は可能。
- ffmpeg のコマンドは難しい。
- hls.js の存在はありがたい。
- plyr.js はイベント取得が容易。

## 参考サイト

以下サイトを参考にさせていただきました。

- [https://qiita.com/niusounds/items/6e81e79f722df16fb895](https://qiita.com/niusounds/items/6e81e79f722df16fb895)
- [http://backham.me/blog/2016/11/04/hls%E3%82%92%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E9%96%A2%E4%BF%82%E3%81%AA%E3%81%8F%E4%B8%80%E7%99%BA%E5%86%8D%E7%94%9F%E3%81%99%E3%82%8B-hls-js/](http://backham.me/blog/2016/11/04/hls%E3%82%92%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E9%96%A2%E4%BF%82%E3%81%AA%E3%81%8F%E4%B8%80%E7%99%BA%E5%86%8D%E7%94%9F%E3%81%99%E3%82%8B-hls-js/)
- [https://engineer-world.duckdns.org/2018/03/07/post-1423/](https://engineer-world.duckdns.org/2018/03/07/post-1423/)
- [http://technical.live-on.net/archives/4295](http://technical.live-on.net/archives/4295)
- [http://nico-lab.net/hls_muxer_with_ffmpeg/](http://nico-lab.net/hls_muxer_with_ffmpeg/)
- [https://github.com/dailymotion/hls.js](https://github.com/dailymotion/hls.js)
- [https://github.com/sampotts/plyr#options](https://github.com/sampotts/plyr#options)


mp4を変換してhlsストリーミング再生を実装してみる


- 「50 文字以上で三点リーダー（･･･）にしたい」
- 「3 行目以降は三点リーダー（･･･）にしたい」

などの要望があったときに、サクッと引っ張ってこれると便利なので、メモ

## 一行のみなら CSS が一番簡単

一行のみで表示させるのであれば`text-overflow: ellipsis;`が使えるので、簡単

```html
<p>三点リーダーめんどくさい三点リーダーめんどくさい三点リーダーめんどくさい</p>
```

```css
p {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
```

## 複数行を実装する方法は 2 パターン

さまざまやり方はあるが、文字数で制限を欠ける

- 文字数固定の場合
- 文字数を取得し、オーバーした分を削除して後ろに「･･･」をつける
- 行数固定の場合（3 行目まで表示）
- CSS で無理やり実装

## 文字数固定の場合（JS）

以下のような関数を用意してあげるといろんな場所で使えるので便利。

```javascript
function textCut(selector, size) {
  var afterTxt = '･･･';
  selector.each(function () {
    var textLength = $(this).text().length;
    if (size < textLength) {
      var textTrim = $(this).text().substr(0, size);
      $(this).html(textTrim + afterTxt);
    }
  });
}

textCut($('p'), '30');
```

## 行数固定の場合（3 行目まで表示）

複雑極まりないが、以下の方法で実装可能

```scss
// Variables
$container-bg: #eee;
$font-size-base: 14px;
$line-height-computed: 1.4;
$lines-to-show: 2;

p {
  margin: 0;
}

.container {
  background: #fff;
  overflow: hidden;
  width: 100%;
  p {
    font-size: $font-size-base;
    height: $font-size-base * $line-height-computed * $lines-to-show;
    line-height: $line-height-computed;
    position: relative;
    &:before,
    &:after {
      background: #fff;
      position: absolute;
    }
    &:before {
      content: '･･･';
      top: $font-size-base * $line-height-computed * ($lines-to-show - 1);
      right: 0;
    }
    &:after {
      content: '';
      height: 100%;
      width: 100%;
    }
  }
}
```

## そもそもフロントでやるべきなのか問題

WordPress などの CMS や API から情報を取得するのであれば取得した際のサーバー側で処理を行うほうが、
確実に処理速度が速いので、そもそもフロントで受け取った後やるべきではないかなと思われ。

1 行でない場合、途端に難易度が跳ね上がるので、結構しんどい


三点リーダーについて-CSSやJSを使った実装方法


js を使ったアニメーションを[anime.js](http://animejs.com/)で実装する方法について書きます。

今回は、スクロールして画面上にアニメーションしたい要素が出現したときにイベントが発生するようにするため、[jquery.inview](https://github.com/protonet/jquery.inview)を利用します。

## セッティング

各種ライブラリは以下から落としてきます。
`jQuery.inview は、なぜか jQuery2 系・3 系では使えないようなので注意`

- [anime.js](https://github.com/juliangarnier/anime)
- [jquery.inview](https://github.com/protonet/jquery.inview)

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.j"></script>
<script type="text/javascript" src="./js/jquery.inview.min.j"></script>
<script type="text/javascript" src="./js/anime.min.j"></script>
```

### HTML の記述

ライブラリ上で特に class や data 属性の指定をしないといけないというルールはないので、適当で大丈夫です。
複数要素を動かすときにそれぞれの要素に id を振ってあげると楽なので、そこだけセットしておきます。

```html
<div class="container">
  <p id="item01" class="item"><img src="./images/items/01.png" /></p>
  <p id="item02" class="item"><img src="./images/items/02.png" /></p>
</div>
```

### CSS の記述

先に要素を css 上で position:absolute 指定し、それぞれ配置したうえで、動かすようにします。

```css
/*css*/
.contaier {
  position: relative;
  width: 500px;
  margin: 0 auto;
}
.item {
  position: absolute;
  /*inviewのイベント発生が遅いので、初期で見えてしまう問題があるので初期状態は消しておく*/
  display: none;
}
#item01 {
  top: 100px;
  left: 150px;
}
#item02 {
  bottom: 200px;
  right: 50px;
}
```

## JS の設定

### まずは inview の設定

以下の記述で inview 側はセットできます。

```javascript
$('.container').one('inview', function (event, visible) {
  // .oneで一度だけイベントを発生させる（スクロールで戻ったあと2度目は発生させないため）
  if (visible) {
    // 要素が見えたときにイベントを発生
    // ここにアニメーションを記載。
  }
});
```

### 次にアニメーションの設定

以下の記述で anime の設定をします。

詳細な設定は[こちらの公式 DOCUMENT より参照](http://animejs.com/documentation/)

`complete`以下を設定してあげることで、移動後（非同期処理）の挙動も設定できます。

```javascript
$('.container').one('inview', function (event, visible) {
  if (visible) {
    // 初期のdisplayが非表示なので、fadeInで見せる。
    // 注意したいのは、これはreverseで表現できないため、jqueryのfadeInを利用する。
    $('#item01').fadeIn(1000);
    anime({
      targets: '#item01',
      translateY: 200,
      easing: 'easeInOutQuart',
      direction: 'reverse', // reverseを設定することでCSSで配置したゴール位置ところへ移動させます。
      rotate: -10,
      duration: 2000,
      scale: '*=0.6',
      complete: function () {
        //ここから先で移動後の挙動
        anime({
          targets: '#item01',
          duration: 500,
          loop: true,
          direction: 'alternate',
          rotate: 2,
          easing: 'easeInOutSine',
          loop: true
        });
      }
    });
  }
});
```

こんな感じで設定できます。

direction:reverse を設定することで、CSS であらかじめ設定した場所へ移動します。

他にも on("click")などのイベントを設定すれば click で移動させたりできます。

duration で動きの時間制御と、fadeIn()で表示の速度を制御しています。

## まとめ

- inview と初期表示と fadeIn で苦戦しました。
- jQuery.inview のチョイスは正直微妙かも。
  - メンテナンスもされていない（4 年前とか）ようなので、何かスクロールで要素が出現したときにイベントを発生させるライブラリがあれば教えてください。
- アニメーションについては、CSS のみで実装できるものも多いが、複雑な動きを表現したいときの anime.js のチョイスは良さそう
- 細かく設定していい感じに動くと楽しくなって、ついつい時間をかけすぎてしまうので注意（笑）


JSを使ったアニメーション-anime.jsについて


文字コードが`Shift_JIS`のファイルを編集しないといけないとき、VS Code だと文字化けてしまい、ローカル簡易サーバーを立てるのも一苦労です。

拡張機能の`Live Server`が`Shift_JIS`でも使えると非常に楽なのですが、設定箇所が見つからず...

そんな場合、取り急ぎ簡易的な環境を作るときに便利な`node-static`のご紹介です。

## VS Code の設定

1. ファイル → 基本設定 → 設定
2. 右側のタブを「ワークスペースの設定」に変更
3. `files.encoding`の値を`shiftjis`に設定

```json
{
  "files.encoding": "shiftjis"
}
```

これでどのファイルを開いてもワークスペース内であれば`shiftjis`で開きます。

## node-static

以下のコマンドでインストール、実行できます。

```bash
npm install node-static -g
static
```

グローバルにインストールするので、初回以降は`static`コマンドのみで大丈夫です。

## 参考

以下を参考にさせていただきました。

[https://qiita.com/tkdn/items/ed9661bce5b47b28820a](https://qiita.com/tkdn/items/ed9661bce5b47b28820a)

## まとめ

`shiftjis`はいろいろ面倒なのでなくなる日が来てほしいですね。

`Live Server`でもできるという方いらっしゃいましたらコメントいただけると幸いです。


文字コードがShift_JISの時の簡易開発環境（VS Code）


差分の納品ファイルを作ってと言われたときに細々とコピペするとミスも出てきてしまうので、git を使って差分納品ファイルを作るといいですよって話です。

## まず初めに

powershell と git bash ではコマンド置換が異なるようで、参考サイトにあるバッククォートを利用したコマンド置換はエラーを吐きます。

powershell で実行する場合は「$()」を使ってコマンド置換を行います。

### 参考

[https://webmanab-html.com/tip/extract-diff-file/](https://webmanab-html.com/tip/extract-diff-file/)

## まずは commit の ID を取得

コマンドは、以下の通り

```bash
git log --oneline
```

ここで、取得した ID（数字）を利用して差分をとります。

以下のようなものが出ます。一番下が初回のコミットになります。

```bash
5908150 (HEAD -> master) dist
504c3af initial
```

## 差分ファイルの出力

先ほど取得した commit の ID をもとに

- [to_commitID]には、変更後の ID
  - 今回の場合は、5908150
- [from_commitID]には、変更前の ID
  - 今回の場合は、504c3af
    を入力します。

コマンドは以下の通り。

### powershell 用

```bash
git archive [to_commitID] $(git diff --name-only [from_commitID] [to_commitID] --diff-filter=ACMR) -o diff.zip
```

### git bash 用

```bash
git archive [to_commitID] `git diff --name-only [from_commitID] [to_commitID] --diff-filter=ACMR` -o diff.zip
```

## 完成

diff.zip というファイルができていたら成功です。
その他の差分出力などやりたい方は調べるといろいろ出てきます。
powershell でもできるので vscode 上で完結できそうです。


gitで差分納品ファイル作成


ゲームの公式サイト更新案件を受注しました。

以前に制作したページの 3 回目の更新になります。

## 概要

- ゲーム新規公式サイト制作
- 担当
  - フロントエンド
  - スライダー
  - JS アニメーション


AI： ソムニウムファイル ニルヴァーナ イニシアチブ

ゲーム 新規公式サイト


ゲームの新規公式サイト更新案件を受注しました。

画像やテキストの追加などを行いました。

## 概要

- ゲームの新規公式サイト制作
- 担当
  - フロントエンド
  - JS アニメーション


ダンガンロンパ Xbox,Win版サイト更新

ゲーム 公式サイト更新


ゲームの公式サイト更新案件を受注しました。

以前に制作したページの 2 回目の更新になります。

## 概要

- ゲーム新規公式サイト制作
- 担当
  - フロントエンド
  - スライダー
  - JS アニメーション



ゲームのティザーサイト改修案件を受注し、無事納品いたしました。

## 概要

- ゲームのティザーサイト改修
- 担当
  - フロントエンド
  - JS アニメーション


メイドインアビスティザー改修

ゲーム ティザーサイト改修


ゲームの新規公式サイト制作案件を受注しました。

簡易な LP ですが、かなりタイトなスケジュールでした。
早めの作業で無事納品いたしました。

## 概要

- ゲームの新規公式サイト制作
- 担当
  - フロントエンド
  - JS アニメーション


ディスコエリジウム


学校法人の公式サイト保守・改修案件を受注しました。

以前フロントエンドを担当した案件から引き続きの受注になります。

機能追加や、テキスト・画像の変更など複数ページの改修を行いました。

## 概要

- 学校 公式サイト保守・改修
- 担当
  - フロントエンド
  - CMS 改修


英数学館改修


ゲームの新規公式サイト制作案件を受注しました。

簡易な LP ですが、早めの作業で無事納品いたしました。

## 概要

- ゲームの新規公式サイト制作
- 担当
  - フロントエンド
  - JS アニメーション


シレン5plus


ゲームの新規公式サイト制作案件を受注しました。

簡易な LP ですが、早めの作業で無事納品いたしました。

その後、改修案件も受注しています。

## 概要

- ゲームの新規公式サイト制作
- 担当
  - フロントエンド
  - JS アニメーション


ダンガンロンパ Xbox,Win版サイト制作


ゲームの公式サイト更新案件を受注しました。

以前に制作したページの要素追加など更新になります。

## 概要

- ゲーム新規公式サイト制作
- 担当
  - フロントエンド
  - スライダー
  - JS アニメーション



ゲーム新規公式サイト制作案件を受注しました。

メインビジュアルに pixi.js を用いてグリッチエフェクトを用いてカッコいいサイトができました。

pixi.js のフィルターと GSAP の連動でリッチなエフェクトを実装しています。

また、背景動画やスライダーのアニメーションなど、細かな演出までこだわりました。

のちに複数回運用案件も受注しております。

## 概要

- ゲーム新規公式サイト制作
- 担当
  - フロントエンド
  - スライダー
  - JS アニメーション


ダイイングライト1 Switch版サイト更新


整骨院の公式サイト改修案件を受注しました。

料金表やテキスト、画像の変更など対応しました。

その他、人材募集のフォームも作成いたしました。

## 概要

- 整骨院の公式サイト改修
- 担当
  - フロントエンド


ＢＣ－ｂｏｄｙ更新

整骨院 公式サイト更新


ゲームの公式サイト更新案件を受注しました。

多言語化対応ということで、繁体字ページの追加です。

## 概要

- ゲームの新規公式サイト更新
- 担当
  - フロントエンド
  - JS アニメーション


ダイイングライト2更新


ゲームの新規公式サイト制作案件を受注しました。

デザイン変更もあり、多少バタバタとしましたが、早めの作業で無事納品いたしました。

## 概要

- ゲームの新規公式サイト制作
- 担当
  - フロントエンド
  - JS アニメーション


ダイイングライト2


`go.jp`ドメインの政府の制作案件を受注しました。

全 10 ページで、ボリュームが結構あるページもあり、情報量は多いです。

程よくアニメーションを加え、気持ち良いサイトに仕上がりました。

スケジュールや仕様が複数回変わりましたが、何度も打ち合わせをしながら早めの作業で無事納品できました。

## 概要

- 政府 特設サイト制作
- 担当
  - フロントエンド
  - アニメーション


障害福祉

政府 特設サイト


ゲームの新規公式サイト制作案件を受注しました。

私もゲームをプレイしたことがある有名タイトルでしたので、気合を入れて作成しました。

## 概要

- ゲームの新規公式サイト制作
- 担当
  - フロントエンド
  - JS アニメーション


ダイイングライト


ポータルサイトのページ追加案件を受注しました。

`Nuxt.js`で出来ているページの一部ページ追加制作の依頼でした。
ベースのコードを理解した上で作業する必要がありました。

特急案件でしたが、早めの作業で無事納品出来ました。

## 概要

- ポータルサイト ページ追加
- 担当
  - フロントエンド


EX 旅のコンテンツポータル

ポータルサイト ページ追加


IT 企業の新規コーポレートサイト制作案件を受注しました。

WordPress も含めフロントのコーディング全般を担当しました。

諸々要件が固まっていない箇所もあったため、要件定義なども含め対応いたしました。

のちに運用案件も受注しております。

## 概要

- IT 企業の新規コーポレートサイト制作
- 担当
  - フロントエンド
  - CMS


アンドデジタル

IT企業 新規コーポレートサイト制作


ゲームの公式サイト改修を行いました。

新規 DLC の更新です。

非常に短期スケジュールでしたが、早め早めの対応で無事納品し、お客様に喜んでいただけました。

## 概要

- ページ改修
- 担当
  - フロントエンド


Ark更新

ゲーム 公式サイト改修


イベントの新規 LP を受注しました。

某テーマパークの LP で、シンプルなページですが、ホラーな演出をしています。

## 概要

- イベント 新規 LP
- 担当
  - フロントエンド


戦慄迷宮

イベント 新規LP


学校法人の公式サイト改修案件を受注しました。

以前フロントエンドを担当した案件から引き続きの受注になります。

メニューの改修を行いました。

## 概要

- 学校 公式サイト改修
- 担当
  - フロントエンド
  - CMS 改修


英数学館 フォーム改修

学校 公式サイト改修

英数学館 メニュー改修


家具の公式 LP 新規製作案件を受注しました。

短期間短納期の案件でしたが、アニメーション多めでインパクトのあるカッコいい LP ができました。

クライアントにも喜んでいただけました。

## 概要

- 家具の公式 LP 新規製作案件
- 担当
  - フロントエンド
  - パララックス
  - JS アニメーション


ITOKI LP制作

家具 公式LP


ジュエリーの公式サイト新規製作案件を受注しました。

ジュエリー関係のサイトは初めて制作したのですが、きれいめなデザインで情報量も多く分かりやすいサイトに仕上がっているかと思います。

スケジュールや仕様の変更も多かったですが、無事納品・公開まで行いました。

## 概要

- ジュエリー 公式サイト新規制作案件
- 担当
  - CMS 実装
  - フロントエンド
  - パララックス
  - JS アニメーション


yourringサイト制作　第一フェーズ

ジュエリー 公式サイト新規制作


大学の公式 LP 新規製作案件を受注しました。

複数の質問を表示し、ユーザーの選択によってページの結果の内容が変わる仕様になっている `Webアプリケーション風のLP` です。

質問と回答を`js`でオブジェクトにまとめることで、出しわけを行うという方法で実装しました。

その他、`pug` の `mixin` を用いて繰り返しの要素を効率的に書き換えできるような工夫もしています。

今回は、要件的に `Vanilla JS` で実装しましたが、`Vue` や `React` で実装しても良かったかもしれません。

## 概要

- 学校 公式 LP 新規製作案件
- 担当
  - フロントエンド
  - JS アニメーション


東京都市大学　ゲーム風LP制作

大学 公式LP


人材紹介の公式サイト改修案件を受注しました。

API の変更に伴う WordPress 改修とのことで、API の仕様を確認しながら既存コードの書き換えを行いました。

一部 php の書き換えというスポット対応になります。

## 概要

- 人材紹介の公式サイト改修
- 担当
  - CMS 改修


POD改修

人材紹介 公式サイト 改修


## 概要

ゲームの公式ティザーサイト制作案件を受注しました。

多言語対応ページで（英・繁）の制作もしております。

また、アニメーションの実装も行いました。

- ゲーム 公式ティザーサイト制作
- 担当
  - フロントエンド
  - スライダー
  - JS アニメーション


メイドインアビス ティザーサイト

ゲーム 公式ティザーサイト


以前、改修を行ったゲームアプリサイトの続編が発売されるとのことで、改修案件を受注しました。

なかなか素材が届かない事もあり、急ぎ案件になってしまいましたが、素早い対応で無事納品できました。

## 概要

- ゲームアプリの公式サイト多言語化・改修
- 担当
  - フロントエンド


ダンガンロンパV3 アプリページ3P（日本語・中国語・英語）

ゲームアプリ 公式サイト 多言語化・改修


ゲームアプリの公式ティザーサイト制作案件を受注しました。

動画でアニメーションのカンプをいただき、それに極力再現する形で実装を行いました。

オープニングから、グリッチエフェクトなど、細かな演出が多く苦戦しましたが、最終的に再現度は結構高く一発 OK をいただけました。

グリッチエフェクトやフィルター等学びが多く、良い経験につながる案件でした。

クライアントにも喜んでいただけました。

## 概要

- ゲームアプリ 公式ティザーサイト制作
- 担当
  - フロントエンド
  - グリッチアニメーション
  - JS アニメーション


ghost フロントエンド実装

ゲームアプリ 公式ティザーサイト


社団法人の公式サイトリニューアル案件を受注しました。

非常に短納期の案件でしたが、要件定義の打ち合わせからフロントコーディング、WordPress の実装、リリースまで行いました。

全 14P のテンプレートを作成し、各種カスタム投稿、各種フィールド設計、お問合せフォームなど実装しています。

短納期で要望をすべて実装し、無事リリース出来たので、クライアントに喜んでいただけました。

リリース後の運用サポートも受注しています。

## 概要

- 社団法人 公式サイトリニューアル
- 担当
  - フロントエンド
  - スライダー
  - モーダル
  - WordPress 実装


DSAサイト制作

社団法人 公式サイトリニューアル


以前ティザーサイトを制作した案件で、本サイトの制作を受注しました。

人気アニメ IP ゲームのサイト制作を行いました。

## 概要

- ゲームの新規公式サイト制作
- 担当
  - フロントエンド
  - スライダー
  - モーダル
  - JS アニメーション


Re:ゼロ本サイト

英数学館 保守・改修

学校 公式サイト保守・改修


ゲームアプリ公式サイトのイベントページ新規追加案件を受注しました。

大変凝ったデザインで、パーティクルなどアニメーションも多くカッコいいサイトができました。

また、多言語化やツイッターキャンペーンなども対応しています。

ティザー、第一弾リリース、第二弾リリースと 3 度に分けて情報を更新も行い、無事スケジュールに遅れることなく納品いたしました。

## 概要

- ゲームアプリ公式サイトのイベントページ新規追加
- 担当
  - フロントエンド
  - モーダル
  - パーティクル
  - 多言語化


SAOアリブレ特設サイト

ゲームアプリ公式サイト イベントページ追加


以前オウンドメディアの CMS 構築を行ったサイトでの CMS 改修案件を受注しました。

2 度目の改修となりますが、前回の対応含め評価していただけたので、再度ご依頼いただけました。

ページの追加と、カスタムフィールドの追加など機能追加しました。

また、要件定義なども含め対応いたしました。

## 概要

- コーポレートのオウンドメディアサイトの WordPress 改修
- 担当
  - WordPress 改修


イトーキ_オウンドメディア制作_動画ギャラリーページ追加

コーポレート オウンドメディア CMS改修


以前オウンドメディアの CMS 構築を行ったサイトでの CMS 改修案件を受注しました。

ページの追加と、カスタムフィールドの追加、関連記事の表示など諸々機能追加しました。

また、要件定義なども含め対応いたしました。

## 概要

- コーポレートのオウンドメディアサイトの WordPress 改修
- 担当
  - WordPress 改修


イトーキ オウンドメディア CMS改修


有名大学の全 2000 ページ越えの大型サイトリニューアル案件を受注しました。

ここまで大型の案件を受注するのは初めてでしたが、思い切ってお引き受けしました。

期間は 3 か月ほどで、担当領域は、フロントコーディングおよび WordPress の実装を担当しました。

仕様変更やデザイン変更などが多く大変な案件でしたが、担当分に関しては無事納品出来ました。

要素毎に分解し、修正に強いコーディングを心がけました。

勉強になった事も多く、良い経験になりました。

## 概要

- 大学公式サイトリニューアル
- 担当
  - フロントエンド
  - WordPress 構築
  - JS アニメーション
  - スライダー


大妻女子大学サイトリニューアル

大学公式サイトリニューアル


コーポレートの新卒採用サイトの改修案件を受注しました。

既存サイトをベースに新規でページを追加、改修などを行いました。

素早い対応で、クライアントに喜んでいただけました。

## 概要

- 太陽ホールディングス新卒採用サイト
- 担当
  - フロントエンド


太陽ホールディングス新卒採用サイト

コーポレート 新卒採用サイト改修


## 概要

ゲームの公式サイトページ追加案件を受注しました。

以前、作成したサイトに 3 ページを追加しました。

テキスト量が多めの 3 ページでしたが、早めの作業で無事納品いたしました。

- ゲームの公式サイトページ追加
- 担当
  - フロントエンド
  - JS アニメーション
  - モーダル


They are Billions 攻略ガイド制作

ゲーム 公式サイト ページ追加


ゲームアプリの公式サイトの多言語化ページ（英語・中国語）の追加及び改修案件を受注しました。

なかなか素材が届かない事もあり、急ぎ案件になってしまいましたが、素早い対応で無事納品できました。

個人的にゲームのファンだったこともあり、仕事に携われて嬉しかったです。

次回作の案件もご依頼いただけました。

## 概要

- ゲームアプリの公式サイト多言語化・改修
- 担当
  - フロントエンド


ダンガンロンパ2　アプリページ3P（日本語・中国語・英語）


ゲームの公式サイトの多言語化ページ追加案件を受注しました。

以前制作したサイトのページ追加だったため、素早く対応できました。

## 概要

- ゲームの公式サイトの多言語化ページ追加
- 担当
  - フロントエンド


They are Billions 繁体字サイト制作

ゲーム公式サイト 多言語化


ゲーム新規公式サイト制作案件を受注しました。

メインビジュアルに CSS でグリッチエフェクトを用いてカッコいいサイトができました。

また、背景動画やスライダーのアニメーションなど、細かな演出までこだわりました。

クライアントにも気に入っていただき、次回のページ追加案件も受注いたしました。

## 概要

- ゲーム新規公式サイト制作
- 担当
  - フロントエンド
  - スライダー
  - JS アニメーション


They are Billions


コーポレートのオウンドメディアサイトの WordPress 構築案件を受注しました。

既にフロントエンドのコーディングが済んでいるファイルをいただき、WordPress 化および諸々機能追加などを実装しました。

諸々要件が固まっていない箇所もあったため、要件定義なども含め対応いたしました。

特に人気記事のランキング機能の実装や、多くのカスタムフィールドなど機能も多く盛り込んで実装ています。

のちに複数回改修や機能追加など、運用案件も受注しております。

## 概要

- コーポレートのオウンドメディアサイトの WordPress 構築
- 担当
  - WordPress 構築


イトーキ オウンドメディアCMS構築

コーポレート オウンドメディアサイト


学校法人の公式サイトリニューアル案件を受注しました。

WordPress 化する予定のサイトで、全 24 ページのフロントのコーディング部分を実装いたしました。

テキストや画像の差し替えが多く発生しましたが、修正に強いコーディングで実装を進めましたので、素早く対応し無事納品できました。

素早い対応を評価していただき、のちにリリース後の WordPress の運用・改修案件も複数回受注しております。

## 概要

- 学校法人の公式サイトリニューアル
- 担当
  - フロントエンド
  - モーダル
  - JS アニメーション
  - スライダー


英数学館

学校 リニューアル公式サイト


納品期日が近く、特急での依頼となりました。

一部 JS の実装のみスポットで、ゲーム公式サイトの改修案件を受注しました。

メインビジュアルのパーティクルアニメーションと、ソート機能を実装しました。

特急でしたが、素早く要件確認・実装・納品を行い、クライアントに喜んでいただけました。

## 概要

- ゲームの公式サイト JS 実装
- 担当
  - フロントエンド
  - パーティクル
  - ソート機能


RPGツクール MZ 公式サイト改修

ゲーム公式サイト 改修


ゲームアプリの新規公式サイト制作案件を受注しました。

パーティクル演出にこだわり、ゲーム内で使われているパーティクル演出にできるだけ似せる形で実装しました。

その他、スライダーやモーダルやアンカーメニューなど、細かな実装も丁寧に仕上げています。

同じクライアントからその後の仕事につながりました。

## 概要

- ゲームアプリの新規公式サイト制作
- 担当
  - フロントエンド
  - JS アニメーション
  - モーダル
  - スライダー
  - パーティクル


ロンドン迷宮譚

ゲームアプリ 新規サイト


アクション RPG の新規公式サイト制作案件を受注しました。

アニメーションも多く世界観が伝わるカッコいいサイトに仕上げました。

素材動画をトリミング加工して、複数パートに編集し、背景動画してサイトに組み込みました。

先方も大変喜んでいただけたそうです。

## 概要

- ゲームの新規公式サイト制作
- 担当
  - フロントエンド
  - JS アニメーション
  - 背景動画
  - スライダー
  - モーダル


INDIVISIBLE


旅行系公式サイトにて、印刷用のレイアウト崩れが発生しており、リソースが不足しているとのことで、急遽依頼いただきました。

CSS の改修を行い、印刷時の崩れを対応しました。

短期スケジュールで早めに納品いたしました。

## 概要

- 旅行系公式サイト公式サイト改修
- 担当
  - フロントエンド


奈良うまし 印刷用レイアウト制作

旅行 公式サイト改修


インバウンド系の公式サイトを作成を行いました。

5 言語対応ページで多言語に対応可能な形で文字数に左右されず崩れないコーディングを心がけました。

また、pug の mixin を用いて入力情報を json・テンプレート化して効率的にコーディングしました。

## 概要

- 旅行 インバウンド系公式サイト
- 担当
  - フロントエンド
  - スライダー
  - モーダル
  - 多言語化


Greater Tokyo Pass

旅行 インバウンド 公式サイト


人気アニメ IP ゲームのティザーサイト制作を行いました。

低予算で非常に短期スケジュールでしたので、簡易的なアニメーションのみ実装しています。

## 概要

- ゲームの新規公式ティザーサイト制作
- 担当
  - フロントエンド
  - JS アニメーション


Re:ゼロ　ティザーサイト制作

ゲーム 新規ティザーサイト


整骨院の公式サイト改修案件を受注しました。

テキストや画像の変更など対応しました。

## 概要

- 整骨院の公式サイト改修
- 担当
  - フロントエンド



ゲームの公式サイトリニューアル案件を受注しました。

人気シリーズタイトルをまとめたポータルサイトです。

私もゲームをプレイしたことがある有名タイトルでしたので、気合を入れて作成しました。

アニメーションにパーティクルや、煙の演出、スライダーの実装など良い出来のサイトができました。

## 概要

- ゲームの新規公式サイト制作
- 担当
  - フロントエンド
- JS アニメーション
  - パーティクル
  - スライダー


侍道総合サイト制作

ゲーム 公式サイトリニューアル


新規クライアントからの問い合わせから、お仕事を受注しました。

作業内容は、一部ページの追加および、修正などです。

諸々要件が固まっていない箇所が多かったため、設計などディレクションやデザインも行いました。

要件を定義して、早め早めの対応で無事納品し、お客様に喜んでいただけました。

## 概要

- ページ改修
- 担当
  - ディレクション
    - 設計
    - 要件定義
  - フロントエンド
  - デザイン


リュックスWebサイト改修

不動産コンサル 公式サイト改修


ゲームアプリのイベントページの改修を行いました。

追従ナビゲーションおよび、モーダルの実装のみ改修しました。

非常に短期スケジュールでしたが、早め早めの対応で無事納品し、お客様に喜んでいただけました。

## 概要

- ページ改修
- 担当
  - フロントエンド


チュウニズム人気投票サイト

ゲームアプリ イベントページ改修


ゲームアプリのイベントページの新規作成をしました。

おみくじページということで年末に作業～ 1 月頭から公開となりました。

結果ページが非常に多く全 28P の制作で、pug のテンプレート機能を使ってページを量産できるよう構築しました。

また、アニメーションも大変凝った仕上がりになっており、多くの方におみくじを遊んでいただけたと思います。

## 概要

- コーポレート公式サイトリニューアル
- 担当
  - フロントエンド
- JS アニメーション
  - ローディング
  - パララックス
  - 動画


PJ-SEKAIおみくじコンテンツ

ゲームアプリ イベントページ


ガイアジムの公式サイトの制作をしました。

予算とスケジュールの関係で WordPress の有料テーマをカスタマイズしています。

ディレクション～リリースまで全ての工程を一人で実装しています。

[こちらのページで紹介しています](/works/portfolio/gaia-gym)

## 概要

- 新規公式サイト
- 担当
  - ディレクション
  - デザイン
  - フロントエンド
  - CMS 構築

## 外部サイトリンク

[ガイアジム公式サイト](https://gaiagym.com/)


ガイアジム

ガイアジム公式サイト


ゲーム公式サイトリニューアル案件を受注しました。

マウスカーソルを移動させると背景が動くなど、ワクワクするようなアニメーションを随所に取り入れたサイトとなりました。

他のサイトではあまり見ないアニメーションなので、触っていて楽しさが伝わるようにできています。

## 概要

- コーポレート公式サイトリニューアル
- 担当
  - フロントエンド
- JS アニメーション
  - ローディング
  - タブ
  - マウスアニメーション


テラリアサイト制作


総合格闘家 三浦彩佳オフィシャル Web サイトを制作しました。

もともと知り合いということもあり、応援の意味でも制作したいと申し出たところ、すぐ OK をいただけました。

全行程を一人で制作しています。

格闘家のサイトですので、「ゾンビ感、強さ、カッコよさ」をコンセプトにデザインしました。

また、YouTube でも活動されてるので、YouTube API を使用し、リアルタイムでデータを取得できる仕組みも取り入れています。

ブログは、アメブロ RSS より取得しています。

[こちらのページで紹介しています。](/works/portfolio/aya-zombie)

## 概要

- 新規公式サイト
- 担当
  - ディレクション
  - デザイン
  - フロントエンド
  - ドメイン設定
  - サーバー設定
  - アメブロ RSS

## 外部サイトリンク

[総合格闘家 三浦彩佳オフィシャル Web サイト](https://aya-zombie.com/)


AYAKA MIURA Official Web Site

総合格闘家 三浦彩佳オフィシャルWebサイト


コーポレート公式サイトリニューアル案件を受注しました。

LP ものが多かったので、久々のコーポレートサイトになりました。

短いスケジュールでしたが、急な仕様変更にもすぐ対応し、対応が早いと好評価をいただけました。

全 3P+他の下層ページの一部を担当させていただきました。

## 概要

- コーポレート公式サイトリニューアル
- 担当
  - フロントエンド
- JS アニメーション
  - ローディング
  - スライド


Project	Role	Date

ゲーム新規公式サイト	Front-end	2022-05-23
ゲーム公式サイト更新	Front-end	2022-05-10
ゲーム新規公式サイト	Front-end	2022-04-25
ゲームティザーサイト改修	Front-end	2022-04-25
ゲーム新規公式サイト	Front-end	2022-04-11
ゲーム公式サイト更新	Front-end	2022-04-05
ゲーム新規公式サイト	Front-end	2022-03-31
ゲーム新規公式サイト	Front-end	2022-03-31
ゲーム新規公式サイト	Front-end	2022-03-15
ゲーム新規公式サイト	Front-end	2022-02-07

企画をカタチに、アイデアを具現化

ABOUT

ABOUT JWS

SERVICE

WHAT I DO

Coding

Direction

Support

WORKS

Portfolio

WORKS

CLIENT

BLOGS

TECH BLOG

Googleフォームをカスタマイズ＋reCAPTCHAv3導入

Next.jsで日本語URLを扱う場合の注意点

Next.jsでwebpack5使うとHotReloadが動かなかった件

LAB

INTERACTIVE LAB

下から文字が出てくるアニメーション_clip-path

SVGグリッチエフェクト

CSS三角形トランジションワイプ

JSグリッチエフェクト

SVGテキストアニメーション

SVG ネオンエフェクト

SVGロゴアニメーション

パーティクル雪エフェクト

横から色が変わるボタン

CSSグリッチエフェクト

3Dキューブスライダー

パーティクル光エフェクト

企画をカタチに、アイデアを具現化

ABOUT

ABOUT JWS

SERVICE

WHAT I DO

Coding

Direction

Support

WORKS

Portfolio

WORKS

CLIENT

BLOGS

TECH BLOG

Googleフォームをカスタマイズ＋reCAPTCHAv3導入

Next.jsで日本語URLを扱う場合の注意点

Next.jsでwebpack5使うとHotReloadが動かなかった件

LAB

INTERACTIVE LAB

下から文字が出てくるアニメーション_clip-path

SVGグリッチエフェクト

CSS三角形トランジションワイプ

JSグリッチエフェクト

SVGテキストアニメーション

SVG ネオン エフェクト

SVGロゴアニメーション

パーティクル雪エフェクト

横から色が変わるボタン

CSSグリッチエフェクト

3Dキューブスライダー

パーティクル光エフェクト

SVG ネオンエフェクト