案件急増のためにWebエンジニアを募集しています。
完全リモートワークの働きやすい環境で、弊社のプロジェクトに関わってみませんか！
みなさまのご応募を心よりお待ちしております。

詳細は下記をご確認ください。
https://web.c-brains.jp/recruit/

→リニューアル以前のデザインはこちら

今回のリニューアルにより、下記の2点が主に変更になっています。
（その他細かな部分も修正しています。）

• キービジュアルの変更
• 構成の変更

キービジュアルの変更について

爽やかな青空が広がる横浜の風景にキャッチコピーを載せています。

弊社のWeb制作事業部がもっとも大切にしていること、それは「お客様に対してどこまでも誠実な対応を誇りとする」ということです。
ファーストビュー（最初に目にする部分）を変更したことにより、コンセプトが一目で伝わるデザインとなりました。

構成について

リニューアル以前は縦長1ページで構成していたのですが、今回のリニューアルで「シーブレインにできること」「制作実績」「料金例」「会社概要」をそれぞれ階層に分けました。

縦長1ページの良さは、自然な導線で読んでもらうことができる点が挙げられますが、欲しい情報に辿り着けないとページを離脱してしまいます。
そこで今回のリニューアルでは、TOPのページでは、弊社が提供するWebサービスの内容（＋お知らせ）を伝え、階層ページでその他の内容お伝えする構成に変更しました。

ぜひサイトを訪れてみてください。
また、Webサイトのリニューアルでお悩みの方も、ぜひ弊社にご相談ください。

• 株式会社シーブレイン Webサイト制作サービス

「React」の連載第三弾ということで、シンプルなTODOアプリを実際に作ってみたいと思います。

なお、「Create React App」の公式サイトは以下になります。
https://ja.reactjs.org/docs/create-a-new-react-app.html "https://ja.reactjs.org/docs/create-a-new-react-app.html

勉強する前は、先輩がReactをつかって開発をしているのは知っているけど、実際よく分からない。
そんな状態だったので、この機会にReactについてどのような特徴があるのか一つ一つ整理してまとめてみます。

前回はブラウザから録音させてみましたので、今回は録音した音源とアップロードした音源を合成させてみます。

今回はWordPressでログインの有無やユーザー権限によってアクセスできるページを設定する方法を紹介します。

これにより、クローズドな情報などを掲載することができます。 パスワード保護もありますが、複数ページを同時にアクセス制限する場合などに使えます。

背景

外部サービスからデータをインポートする時に以下のような状態でした。（例）

Cityのcodeがユニークかと思ったら、prefecture_codeとの複合ユニークでHospitalと紐付けるには 外部キーを複数で設定する必要がありました。
インポートする時にidで紐付けるようにすればとも思ったんですが、インポート時に検索クエリを出したくないのもあり そのままインポートしました。

Compoships

今回の場合、HospitalはCityにBelongsToなのですが、LaravelのBelongsToを 設定する際に設定できる外部キーは1つだけなのでComposhipsを導入しました。

設定する時は双方のModelでComposhipを使用します。

App\Models\Hospital.php内 (設定箇所のみ

    use Compoships;

    public function city(): BelongsTo

    {

        return $this->belongsTo(

            City::class,

            ['city_code', 'prefecture_code'], //Hospital側のキー

            ['code', 'prefecture_code'], //City側のキー

        );

    }

App\Models\City.php内（設定箇所のみ

    use Compoships;

まとめ

その他にhasOne, HasManyにも使えます。それでは素敵なRelation生活を。

背景

Jamstack流行ってますね。WordPressでもちらほら対応することが増えてきました。 ShifterやWP2Staticは自動でパスを探して出力してくれるのですが、 追加でwp-jsonのパスも出力して欲しいことがある場合もあります （URL検索ではヒットしない）。 そんな時に、出力時このパスもチェックしてね！という機能があるのでご紹介します。

Shifter

ShifterURLS::AppendURLtoAll フィルターを使います.

function append_additional_url ( $urls ) {
    $urls[] = home_url('任意のパス');
    return $urls;
}
add_action( 'init', function(){
    add_filter( 'ShifterURLS::AppendURLtoAll', 'append_additional_url' );
} );

$urlsの配列にどんどん追加して欲しいパスを書いていきます

WP2Static

Extending WP2Static の各種Filterを使います。

//追加
add_filter( 'wp2static_modify_initial_crawl_list', function ( $queue ) {
	$queue[]  = '任意のパス';

	return $queue;

} );

//削除
add_filter('wp2static_detect_xxxxxxx', '__return_false');

WP2Staticはxxxxxの箇所にsitemaps,authorsなどがあるので書き出したくないパスがあれば それも設定できます。カテゴリーパスを書き出す時に日本語のままで書き出され、CloudFrontで 日本語エラーが発生する時はwp2static_detect_categoriesで削除して、wp2static_modify_initial_crawl_list で追加してあげれば良いです。

まとめ

それでは素敵なWordPress Jamstack生活を

今まで自動テストをやってこなかったので、「React Testing Library」と「jest」を組み合わせてReactアプリケーションのテストをする方法を学んだので、アプリケーションテストの簡単なサンプルを紹介したいと思います。

create-react-appでReactアプリの雛形を作成する

まずcreate-react-appでReactアプリケーションの雛形を作成します。 （今回仕様したnode.jsのバージョンはv15.14.0になります。）

npx create-react-app rts

テスト対象のコンポーネントを作成する

そして、次にテストするReactのコンポーネントを作成します。 今回は超シンプルなToDoアプリを作成しました。

まず、srcディレクトリにTodo.jsを作成します。

import React from "react";

const Todo = () => {
    const [input, setInput] = React.useState('');
    const [list, setList] = React.useState(['タスクA', 'タスクB', 'タスクC']);
    const updateValue = (e) => {
        setInput(e.target.value);
    }
    const addNew = () => {
        let copiedList = [...list];
        copiedList.push(input);
        setList(copiedList);
        setInput('');
    }
    return (
        <div className="todo">
            <input type="text" onChange={updateValue} value={input} />
            <button disabled={!input} onClick={addNew}>Todoを追加</button>
            <ul>
                {list.map((item, index) => (
                    <li key={index}>{item}</li>
                ))}
            </ul>
        </div>
    )
}

export default Todo;

今回はあくまでテストの記事なのでコードの説明は省略しますが、仕様としてはテキストボックスを入力したらボタンのdisabledが解除されボタンを押したらTodoのリストに入力した内容が追加され、入力した内容がクリアされるという超シンプルなものです。

テストファイルを作成する

次に上記で作成したコンポーネントに対するテストファイルを作成していきます。

create-react-appでインストールした雛形には標準でテストが搭載されています。

Todo.jsのコンポーネントに対するテストファイルはTodo.test.jsという名前で作成します。

まず最初に必要なツールをimportしましょう。

import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Todo from './Todo';

まず、最初にreactをimportします。

import React from 'react';

そして次に、@testing-library/reactからrender関数とscreen関数をimportします。 '@testing-library/user-eventからrenderしたDOM要素に対してイベントを発火させるuserEventをimportします。

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

そして最後に先ほど作成したコンポーネントをimportします。

import Todo from './Todo';

これでテストの準備が整いました。

ここから実際にテストを書いていきます。

テスト1

まず、初期状態でボタンがdisabledになっているかテストを書いていきます。

describe('Todoコンポーネントテスト', () => {
  it('初期状態でdisabledになっているか', () => {
    render(<Todo />);
    const button = screen.getByRole('button');
    expect(button).toBeDisabled();
  });
});

describeというブロックの中に入れ子でit関数を使ってそれぞれテストケースを書いていきます。 it関数の第一引数にはテストケースの名前を定義し、第二引数にテストで行う一連の処理を記述します。

まず、第一にコンポーネントをレンダーします。

render(<Todo />);

そしてレンダーしたコンポーネント内の要素にアクセスするにはReact Testing Libraryのscreenを使用します。 getByRoleメソッドの引数にbuttonを使用するとレンダーしたDOMの最初のbuttonタグの要素にアクセスすることができます。 （ボタン要素が複数ある可能性があるので本来であればid指定などで要素を取得した方が良いです。）

const button = screen.getByRole('button');

次にexpect関数を使って実際にテストをします。

expect(button).toBeDisabled();

仕組みとしてはとてもシンプルでexpect関数の第一引数に検証したい値を代入し、 その後に検証したい内容に応じて、メソッドを呼び出します。 上記の例ではexpectの引数に入れたボタン要素がdisabledになっているかを検証しています。

テストケースが1つできたので、実際にこのテストを実行してみます。 Reactプロジェクトのルートディレクトリで、以下のコマンドをうちます。

npm run test

すると下記の通り、テストが実行され、1つのテストがパスしているのが分かります。

逆にこのテストがちゃんと正しく動作しているか確かめる為にあえて下記のようにボタンのdisabled属性を外してしまいます。

<button onClick={addNewTodo}>Todoを追加</button>

すると、Recieved element is not disabledとなっている通り、 button要素がdisabledになっていないので、テストが失敗していることが分かりました。

テスト2

次にまたit関数を使用して別のテストを書いていきます。 inputに値を入力すると、ボタンのdisabledが解除されるかどうかをテストします。

it('inputに値を入力するとボタンのdisabledが解除されるか', () => {
    render(<Todo />);
    const input = screen.getByRole('textbox');
    const button = screen.getByRole('button');
    userEvent.type(input, 'hoge');
    expect(button).not.toBeDisabled();
});

まず、先ほどのテストと同じように要素を取得します。inputタグの場合はテキストボックスの分類になるので、 screen.getByRole('textbox')で取得することができます。

render(<Todo />);
const input = screen.getByRole('textbox');
const button = screen.getByRole('button');

そしていよいよuserEventの出番です。 typeメソッドを使用することで、inputタグに値を入力することができます。 第一引数にイベントを発火させる要素、第二引数に入力する文字列を加えます。

userEvent.type(input, 'hoge');

そして、OOでないことを検証したい場合は下記のように、 expectのメソッドの前に.notとつけます。

expect(button).not.toBeDisabled();

こうすることによってボタンのdisabledが解除されているか検証できるようになりました。

テスト3

最後に、ボタンをクリックした後に、Todoがリストに追加されるかを検証します。

it('ボタンをクリックするとTodoが追加されるか', () => {
    render(<Todo />);
    const input = screen.getByRole('textbox');
    const button = screen.getByRole('button');
    const listItem = screen.getAllByRole('listitem');
    userEvent.type(input, 'hoge');
    userEvent.click(button);
    const listItemAfterClicked = screen.getAllByRole('listitem');
    expect(listItemAfterClicked.length).toBeGreaterThan(listItem.length);
    expect(listItemAfterClicked[listItemAfterClicked.length - 1].textContent)
        .toEqual('hoge');
});

まず、使用する要素を定義します。liは複数存在するので、getAllByRole('listitem')とすることで要素の配列を取得することができます。

render(<Todo />);
const input = screen.getByRole('textbox');
const button = screen.getByRole('button');
const listItem = screen.getAllByRole('listitem');

次にinputに値を入力した後にボタンをクリックします。 clickメソッドでは第一引数にクリックしたい要素をいれるのみです。

userEvent.type(input, 'hoge');
userEvent.click(button);

そして、改めてscreen.getAllByRole('listitem')でli要素を取得し、 toBeGreaterThanメソッドでボタンクリック前のli要素の数とクリック後のli要素の数を比較しています。

expectで渡した数値が上回っていると期待れる数値をtoBeGreaterThan要素の引数に加えます。

const listItemAfterClicked = screen.getAllByRole('listitem');
expect(listItemAfterClicked.length).toBeGreaterThan(listItem.length);

そして、最後のli要素がhogeであることも検証する場合は下記のようにします。 toEqualはexpectで渡した文字列（もしくは数値）が引数と一致するかを検証します。

expect(listItemAfterClicked[listItemAfterClicked.length - 1].textContent)
    .toEqual('hoge');

最後に

下記がTodo.test.jsの全コードになります。

import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Todo from './Todo';

describe('Todoコンポーネントテスト', () => {
  it('初期状態でボタンがdisabledになっているか', () => {
    render(<Todo />);
    const button = screen.getByRole('button');
    expect(button).toBeDisabled();
  });

  it('inputに値を入力するとボタンのdisabledが解除されるか', () => {
    render(<Todo />);
    const input = screen.getByRole('textbox');
    const button = screen.getByRole('button');
    userEvent.type(input, 'hoge');
    expect(button).not.toBeDisabled();
  });

  it('ボタンをクリックするとTodoが追加されるか', () => {
    render(<Todo />);
    const input = screen.getByRole('textbox');
    const button = screen.getByRole('button');
    const listItem = screen.getAllByRole('listitem');
    userEvent.type(input, 'hoge');
    userEvent.click(button);
    const listItemAfterClicked = screen.getAllByRole('listitem');
    expect(listItemAfterClicked.length).toBeGreaterThan(listItem.length);
    expect(listItemAfterClicked[listItemAfterClicked.length - 1].textContent)
        .toEqual('hoge');
    expect(input.value)
        .toEqual('');
  });
});

今回は非常にシンプルなアプリケーションだった為、このサンプルではテストの恩恵があまり感じられないかと思いますが、 テストケースが多かったり複雑だったりするパターンや、コードが複雑でちょっといじっただけで動かなくなってしまったっといったことを事前に防ぐ為にも今後はしっかり自動テストを活用していけたらと思います。

今回はgetUserMedia、MediaRecorderを使ってブラウザで録音してみます。

背景

弊社ではシステム開発する際にコーディングリポジトリとシステムリポジトリを分けることがあるのですが、 コーディングのCSS,JS,IMGをシステムリポジトリに反映するのが結構手間で、以前ブログに書きました gulp-directory-syncを使い、同じリポジトリで開発できるようしていました。 しかしこの方法だとファイルが2重管理になるので嬉しくありませんでした。

でAliasの設定ってないのかな（あるだろう）と思い調べていたら、 なかったのですがオプションでMultiple base directoriesというものがありました。 これを使えばdirectory-syncを使わずに効率良くできます。

例

以下のようになっているとします。本来srcにある各種ファイルをgulp, webpackなどでコーディング確認用のhtdocs/assetsに書き出していたのを、 フレームワーク用のfw_webroot/assetsに書き出します。 さらにbrowser-syncでデザイン確認時にはhtdocs/assetsが参照できるようにします。

[~/Downloads/bashalog]$ tree -I node_modules
.
├── bs-config.js
├── fw_webroot (システム用webroot)
│   └── assets (システム用assets)
│       ├── css
│       │   └── style.css
│       ├── img
│       └── js
│           └── index.js
├── htdocs
│   ├── assets (<---ここをAliasにしたい)
│   └── index.html
├── package.json
├── src (各種ソースファイル )
└── yarn.lock

BrowserSync設定(serverオプション部分のみ)

server: {

    baseDir: "htdocs",

    index: "index.htm"

}

↓

server: {

    baseDir: ["htdocs", "fw_webroot"],

    index: "index.htm"

}

まとめ

たったこれだけでhtdocs/assetsがなくてもfw_webrootもBaseDirectoryになるのでファイルを参照できるようになります。オプションはちゃんと見ましょう（自戒）。 ぜひお試しください

背景

ブログ（サイト）で別のブログを出力する場合以下のようにするのが一般的かと思います。

<mt:Entries include_blogs='x'>
...
...
...
</mt:Entries>

ただ、サイトをバックアップ、復元するとブログ、サイトのIDがずれるのでそのたびに直さないといけません。 なのでブログ名で判定し以下のようにしていました。(今回の場合ブログ名はtarget_blog_name）

<mt:Blogs>
<mt:If tag="BlogName" eq="target_blog_name">
...
...
</mt:If>
</mt:Blogs>

新しい方法

ここ何年かで弊社ではMovableType.netで構築するほうが圧倒的に多く、その時に.netの機能でブログ（サイト）に識別子を付けられ、 そこから対象のデータを表示できます。そこからヒントを得てMovableTypeにそれを実装します。参考URL

まず、システムで子サイト用のカスタムフィールドをblog_identifier(任意）:テキストで作成します。

その後、ターゲットとなるブログの設定画面からblog_identifierを入力します。

最後にテンプレートで以下のようにします。今回の場合identifierはsample

<mt:Blogs>
<mt:If tag="blog_identifier" eq="sample">
<mt:Entries>
...
...
</mt:Entries>
</mt:If>
</mt:Blogs>

まとめ

これで、include_blogsのIDズレに惑わされることなく、テンプレートの運用ができます。 include_blogsで疲れた方は是非お試しください。

今回はとある案件でURLにクエリストリングを付与したり削除したりという機能を開発していた時、URLのクエリ部分をオブジェクトにしたり、そのオブジェクトをクエリストリングに戻したりという処理がすごく面倒だったので、 クエリストリングの操作が楽になるライブラリを探していた所、JavaScript(ES6以降)標準で入っているURLクラスで簡単にいったので記事にしてみました。

今回は、チェックボックスにチェックがついたらnewKeyというパラメーターがURLに追加されるようにしようと思います。

デモ

画面収録 2021-04-14 16.56.24.mov

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>URLSearchParamsを使ってみた</title>
</head>
<body>
<label>
    <input type="checkbox" id="js-checkbox">
    <span>クエリを付与</span>
</label>
<script src="./url-polyfill.js"></script><!-- IE11対応 -->
<script> //JSの処理 </script>
</body>
</html>
</code>
</pre>

JavaScript

const checkbox = document.getElementById('js-checkbox');
let paramsStr = window.location.search.substring(1); // window.location.searchから先頭の「?」を抜いた文字列を代入
let paramsArray = paramsStr.split('&'); // クエリストリングを「&」で分割したものを配列にする。
let paramsObject = {}; // 各キーと値のオブジェクト
let newParamsStr = '?'; // クエリストリング
if (paramsStr) {
    paramsArray.forEach(function (val, i) {
        let param = paramsArray[i].split('='); // キーと値を分離
        paramsObject[param[0]] = param[1]; // オブジェクトのキーを作成
    });
} // ここまでで、やっとオブジェクトが作成される。

function resetParamsStr() { // paramsObjectが変更された時にクエリストリングを再生成する関数
    newParamsStr = '?';
    let keys = Object.keys(paramsObject); // オブジェクトのキーを配列に
    let lastKeyIndex = keys.length - 1; // 最後のキーのindex番号
    if (keys.length) {
        keys.forEach(function (key, index) {
            newParamsStr += key+'='+paramsObject[key];
            if (index === lastKeyIndex) { // ループの最後だったら後ろに「&」はいらないので終了
                return;
            }
            newParamsStr += '&'; // 「&」を後ろにつける。
        });
    } else {
        newParamsStr = ''; // キーがない（objectが空だった場合）文字列を空にする
    }
    history.pushState(null, null, window.location.pathname + newParamsStr + window.location.hash); // URLを変更
}

checkbox.addEventListener('change', function () { // checkboxにイベントを追加
    let checked = checkbox.checked; // checkboxがチェックされているかどうか
    if (checked) {
        if ('newKey' in paramsObject) {
            return; // 既にキーが存在していたら何もしない
        }
        paramsObject['newKey'] = 'newValue'; // paramsObjectにキーを追加
        resetParamsStr(); // クエリストリングを再生成
    } else {
        if (!('newKey' in paramsObject)) {
            return; // キーが存在しなかったら何もしない
        }
        delete paramsObject.newKey; // paramsObjectからキーを削除
        resetParamsStr(); // クエリストリングを再生成
    }
});

クエリストリングをオブジェクトに変換するだけでsplitで分割して、キーと値をさらに分割して...などの色んな処理を挟み、とても長くすっきりしないコードになってしまいました。

※アンカーリンクを併用する場合は、下記の順番で入れます。 「URL + クエリストリング + #アンカー」 もし、 「URL + #アンカー + クエリストリング」 という順番で入れてしまうとwindow.location.searchが取得できないようです。

これをURLクラスを使って書き換えると以下になります。

const checkbox = document.getElementById('js-checkbox');
const url = new URL(window.location.href); // 現在のURLを素としたURLクラスのインスタンスを作り、url定数に格納
checkbox.addEventListener('change', function () {
    let checked = checkbox.checked;
    if (checked) {
        if (url.searchParams.has('newKey')) {
            return;
        }
        url.searchParams.append('newKey', 'newValue'); // クエリパラメーターにnewKeyを追加
    } else {
        if (!url.searchParams.has('newKey')) {
            return;
        }
        url.searchParams.delete('newKey'); // クエリパラメーターからnewKeyを削除
    }
    history.pushState(null, null, url.href); // URLを変更
});

とてもすっきりとしたコードになりました。 まず、二行目で現在のURLを素としたURLクラスのインスタンスを作り、url定数に格納します。

const url = new URL(window.location.href);

checkboxにチェックが入っていたら、下記のようにクエリパラメーターのキーを追加します。

url.searchParams.append('newKey', 'newValue');

checkboxのチェックがはずれていたら、下記のようにクエリパラメーターのキーを削除します。

url.searchParams.append('newKey', 'newValue');

最後にURLを書き換えます。url.hrefの中身はurl.searchParamsのキーを追加したり削除したりすることでクエリストリング部分が変化します。

history.pushState(null, null, url.href);

上のコードと比べていちいち、文字列→オブジェクト、オブジェクト→文字列と変換する手間もなくよっぽどシンプルになったかと思います。

また、URLクラスはIE11では非対応なので、IE11でも動作させたい場合は、下記のpolyfillを使ってください。 https://www.npmjs.com/package/url-polyfill

最後まで読んでいただき、ありがとうございました。

インストール

npm install browser-image-compression --save
or
yarn add browser-image-compression

コード

以下が簡単な確認用コードになります。(react-create-appで作成)

import './App.css';
import { useState } from 'react';
import imageCompression from 'browser-image-compression';

function App() {

  const [image_url, setImageUrl] = useState('');

  const compressOption = {

    maxSizeMB: 1,

    maxWidthOrHeight: 1024

  };

  return (

    <div className="App">

      <form onSubmit={async (e) => {

        e.preventDefault();

        const form = new FormData(e.target);

        const postForm = new FormData();

        const file = form.get('image');

        const compressFile = await imageCompression(file ,compressOption);

        postForm.append('image', compressFile, file.name);

        alert(`default_size: ${file.size} \n compressed_size: ${compressFile.size}`);

        // fetch postForm

      }}

      >

        <input name="image" accept="image/jpeg,image/png" type="file"

          onChange={async (e) => {

            setImageUrl('');

            if (!e.target.files[0]) {

              return;

            }

            const img = e.target.files[0];

            try {

              const compressFile = await imageCompression(img, compressOption);

              const url = await imageCompression.getDataUrlFromFile(compressFile);

              setImageUrl(url);

            } catch (error) {

              console.log(error);

            }

          }}

        />

        {image_url && <figure>

          <img src={image_url} alt=''/>

        </figure>

        }

        <div className='mod-button'>

          <button type="submit">送信</button>

        </div>

      </form>

    </div>

  );

}

export defau< App;

説明

ファイルを選択したときと、送信ボタンを押した時に圧縮処理が入っています。 圧縮時のオプションですが、最大サイズを1Mにし最大縦横を1024pxにしました。 まずonChange箇所です。inputが変わった時にまず imgタグに使用するsrcの初期化を行い、ファイルが選択されていない場合は終了。選択されている場合は 圧縮しURLを取得するとimgタグのsrcに入るようしています。 (表示された画像は圧縮後のもの）

          onChange={async (e) => {
            setImageUrl('');
            if (!e.target.files[0]) {
              return;
            }
            const img = e.target.files[0];
            try {
              const compressFile = await imageCompression(img, compressOption);
              const url = await imageCompression.getDataUrlFromFile(compressFile);
              setImageUrl(url);
            } catch (error) {
              console.log(error);
            }
          }}

次にformのsubmit時です。onChangeの時と同様に、通常ファイルを取得・圧縮して、 FormDataにアタッチしています。 (ファイルオブジェクトをステートに持ちたくないため、onChangeの時と圧縮処理が2重になっています） 今回は送信せずに圧縮前後でのファイルサイズをalertするだけになっています。

        e.preventDefault();
        const form = new FormData(e.target);
        const postForm = new FormData();
        const file = form.get('image');
        const compressFile = await imageCompression(file ,compressOption);
        postForm.append('image', compressFile, file.name);
        alert(`default_size: ${file.size} \n compressed_size: ${compressFile.size}`);

        //fetch data....

まとめ

いかがでしたでしょうか、これでユーザーがスマホの場合などに送信するパケットを抑えることができます。 今回設定したオプションは最大ファイルサイズ、縦横幅（比率を保ったまま圧縮）です。 他のオプションもあるので公式サイトで確認してみてください。

今回は「コロナに負けない！シーブレイン的、withコロナ時代の楽しみ方」でも使用したSVG画像の使い方について説明をします。

背景

gulpを使う場合src, dist でソース、出力先を指定するとかと思います。

gulpfile.js

import gulp from 'gulp';
const { src, dest } = gulp;

export default () => {

  return src('src/js/*.js')

    .pipe(processA()) // 処理A

    .pipe(processB()) // 処理B

    .pipe(dest('dist/js'));

}

tree (ディレクトリ抜粋)

├── dist

│   └── js

│       └── index.js

├── gulpfile.js

└── src

    └── js

        └── index.js

gulp-rename

gulp-renameをかませると以下のようになります。

import gulp from 'gulp';
import rename from 'gulp-rename';
const { src, dest } = gulp;

export default () => {

  return src('src/js/*.js')

    .pipe(processA()) // 処理A

    .pipe(processB()) // 処理B

    .pipe(rename((path) => {

      //path = {dirname: '.', basename: 'index', extname: '.js'} <- (上記 tree内の src/js/index.jsの場合)

      return path;

    }))

    .pipe(dest('dist/js'));

}

ここで上記のpath.dirname, path.basename, path.extname を書き換えると出力を任意に変えられます。

path.dirname = '../change-dir'; //-> 出力先が dist/change-dir になります。
path.basename = 'change-name'; // -> 出力ファイルが change-name.js になります。
path.extname = '.txt'; // -> 出力ファイルが index.txt になります。

まとめ

使い所ですが、どうしても特定のファイルのみ出力時にファイル名を変えたい場合などに使用してみてください。 出力先だけを変えるなら src, dist 設定をタスク別で分けてあげれば良いんですが、1ファイルだけ対象などのときには積極的に使ってみてはいかがでしょうか？

Autolinker.js

テキストエリアで入力されたURLなどを自動でリンクにするために npmで探していたら出会いました。 Autolinker.js はURLだけでなく他にも色々変換してくれます

使い方

以下のようにAntolinker.link('変換対象', option) で変換してくれます。

<div id="before-link">
URL:  https://c-brains.jp<br>
Mail:  mail-check@test.mail.com<br>
Tel: 0120-000-9999<br>
Mention: @matsu_bouzu<br>
HashTag: #コロナ
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autolinker/3.14.2/Autolinker.min.js"></script>
<script>
  const target = document.getElementById('before-link');
  target.innerHTML = Autolinker.link(target.innerHTML, {
    stripPrefix: true, //https, http を削除した状態にしてくれる
    mention: 'twitter', //instagramなどあり
    hashtag: 'twitter' //facebook, instagramなどあり
  });
</script>

変換前

変換後

まとめ

デフォルトでURL,メール、電話番号をやってくれます。 mention, hashタグはユーザーによってどれか 検討がつかないので、必ず変換されることを通知しない限り使わないほうが良いかなと思います。 良かったら使ってみて下さい。

背景

先日アップした分割アップロードの バックエンドの処理をLaravel8で行っていました。ローカルでは問題なく動いてたのですが本番で動作確認を行うと ファイルが大きいときにエラーを出していました。

レスポンスコードを見ると、"429 (Too Many Requests)"とはじめはNginx側で制限とかあるのかなと 調べていたのですが、LaravelのApi Routeは1分間で60回のリクエスト制限があることがわかりました。

解決方法

変更方法は本サイトのRate Limiting を参考にRouteServiceProviderに以下のようにしました。

    protected function configureRateLimiting()
    {
        //元々設定された 1分間60分
        RateLimiter::for('api', function (Request $request) {
            return Limit::perMinute(60)->by(optional($request->user())->id ?: $request->ip());
        });

        //追加分

        RateLimiter::for('seventy', function () {

            return Limit::perMinute(70);

        });

    }

また元々設定されているKernel.php内の $middlewareGroups 内のthrottleをコメントアウトします。

        'api' => [
            //'throttle:api',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

最後にapi.phpを以下のように変えました。

Route::get('/get', [CheckController::class, 'get']);
↓
Route::middleware(['throttle:seventy'])->group(function() {
    Route::get('/get', [CheckController::class, 'get']);
});

結果

before (70回リクエスト)

after (80回リクエスト)

まとめ

Kernel.phpの記載を削除しないと routes/api.php内のものは駄目でした。api.php とは別のファイルを作り、Kernel.phpはそのままにroutes/xxxx.php を新たに作って 別個で管理するのも手だと思います。くれぐれも開けすぎにはご注意下さい。もちろんフロントでRequest数を調整するのもありかと思います。それでは皆さん良いお年を

背景

ファイルをアップロードするシステムを作るときに容量の要望にアップロードサイズ、アップロード時間の変更で対応するには 大きすぎるサイズだったので分割してアップロードして、結合するという方法にしました。

ファイル構成

以下のようになります。uploadsはアップロード先になりますので作成しておいて下さい。

├── js
│   └── upload.js
├── index.html
├── upload.php
└── uploads

HTML

まずは簡易HTMLです

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Upload</title>
</head>
<body>
<p>input size <span id="input-size"></span></p>
<p>progress <span id="progress"></span>%</p>
<form id="form">
<input id="file" type="file" name="file"/>
<button type="submit">アップロード</button>
</form>
<p>upload size <span id="upload-size"></span></p>
<script src="/js/upload.js"></script>
</body>
</html>

javascript

サンプルなので変数名などはすっ飛ばしてもらえると

(() => {
  const form = document.getElementById('form');
  let file = null;
  let slice_size = 2 * 1024 * 1024; //切り取るサイズ 2M
  const input = form.querySelector('input');
  let size = 0;
  let count = 0;
  let postForm = null;
  let splitData = null;
  const inputSize = document.getElementById('input-size'); //インプットサイズ
  const uploadSize = document.getElementById('upload-size'); //アップロード結合サイズ
  const progress = document.getElementById('progress'); //進捗
  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    file = input.files[0];
    size = file.size;
    const name = `${(new Date()).getTime()}-${file.name}`;  //アップロード時の名前を固定するように
    inputSize.innerText = size.toString(); //インプット時に計測されるファイルサイズを表示
    count = Math.ceil(size / slice_size); //分割数を計算
    for (let k = 0; k < count; k++) {  //分割アップロード実施
      splitData = file.slice(k * slice_size, (k + 1) * slice_size); //該当箇所をスライス
      postForm = new FormData(); //アップロード用フォーム
      postForm.append('file', splitData); //スライスしたファイルをフォームにセット
      postForm.append('name', name); //名前
      progress.innerText = Math.ceil(100 * (k + 1) / count).toString(); //進捗率を更新
      let result = await fetch('/upload.php', {
        body: postForm,
        method: 'POST',
        headers: { Accept: 'application/json' }
      }).then(res => res.json());
      uploadSize.innerText = result.size; //アップロード結合したサイズを表示
      await new Promise(res => setTimeout(() => {
        res();
      }, 1000)); //ゆっくり見せたいのでpost完了後、次のpostまで1000ms
    }
    return false;
  });

})();

PHP

PHPは以下になります(簡素)

<?php

$file_place = __DIR__."/uploads/{$_POST['name']}"; //結合するファイル場所

$file = $_FILES['file'];

file_put_contents($file_place, file_get_contents($file['tmp_name']), FILE_APPEND); //FILE_APPENDで足していく

echo json_encode(['size' => filesize($file_place)]); //結果を出力

動作

以下のようになります。PHPが入っていれば、ビルトインサーバーでも動きます。 ファイルを選択してアップロードを押すと、フロント側でのファイルサイズを表示し、アップロード毎に進捗率、アップロードされたファイルのサイズを表示します。

まとめ

いかがでしたでしょうか？簡単に実装できると思いませんか？
実際にはこの他に、分割アップロード時のエラー・リトライ処理・セキュリティ設定
をしっかりする必要がありますのでご注意下さい。

ライブラリだとResumable.jsが有名ですね

EC2にPHP5.6でLAMP環境を作る必要があったのですが、ちょっとハマったので備忘録として残します。

背景

フォーム実装していて通信中にモーダル出したいと思い、npmで探していたら 出会いました。Start数(12k超:2020/12/17時点)、Weekly Downloads数共に凄い数です。

使い方

いくつかご紹介します。詳しい使い方は公式サイト を参照下さい。

読み込み

<script src="sweetalert2/dist/sweetalert2.all.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.js"></script>

もしくは npm install して importします。

一番簡単な開くは以下です。

Swal.fire('開け　モーダル');

上の場合の文字はタイトルになり、タイトル、テキストの場合は2つ目の引数を設定します

Swal.fire('タイトル', 'テキストコンテンツだよ<br>確認してね');

基本はそれと Swal.close()で開いてるのを閉じてもらえば良いんですが凝った事をするときには Swal.fire(option)　を使います。

Swal.fire({
  icon: 'success',
  title: '保存しました',
});

上記のようにiconパラメータを渡すとアイコンを表示してくれます。 iconは他にerror, info, warning, questionとあります

他のオプションでは以下をよく使いました。

Swal.fire({
  icon: 'warning',
  showCancelButton: true, //キャンセルボタンを表示
  showCloseButton: true, //閉じるボタンを表示
  allowEscapeKey: false, //エスケープキーでモーダルを閉じないようにする
  allowOutsideClick: false, //黒いところクリックで閉じないように
});

次は押したボタンの状態を以下で取れます

Swal.fire({
  icon: 'warning',
  showCancelButton: true, //キャンセルボタンを表示
  showCloseButton: true, //閉じるボタンを表示
  showDenyButton: true, //NGボタンを表示
}).then((result) => {
  console.log(result);
  //result.isConfirmed, isDissmied, isDenied 
});

上記のresultで何が押されたかによって処理を変えたりできます

  Swal.fire({
    icon: 'info',
    title: '投稿中'
  });
  Swal.showLoading();
  setTimeout(() => {
    Swal.update({
      icon: 'success',
      title: '保存しました'
    });
    Swal.hideLoading();
  },1500);

setTimeの箇所を実処理に変えてもらい、Swal.updateでコンテンツを更新できます。（更新できないプロパティーもあります）

まとめ

いかがでしたでしょうか？ 詳しい箇所は本サイト見てもらればと思います。Swal.fire(), Swal.close(), Swal.update() で だいたいのことは出来ます。　preConfirm, queueもおすすめなので挑戦してみて下さい。

本日はMovable Type Data APIでコメントをする方法をお伝えします。

背景

フロントからコメントをする場合にはMTの通常機能でもできるのですが、コメントのカスタムフィールドも更新したかったため Data APIを使用しました。

仕様

こちらになります。 前回ご紹介した投稿時と基本は同じです。

コード

//記事基本データ
const postComment = {
  body: 'body',
  customFields: []
 };

//カスタムフィールド設定

postComment.customFields.push({

   'basename': '{カスタムフィールドの値}',

   'value': '{カスタムフィールドに入れる値}'

});

//記事作成処理

const body = new FormData();

body.append('comment', JSON.stringify(postComment));

// コメントする記事のsite_id, entry_id が必要になります

// 例:  /mt/mt-data-api.cgi/v4/sites/10/entries/101/comments

const result = fetch({path_to_data_api/sites/{site_id}/entries/{entry_id}/comments}, {

  method: 'post',

  body: body,

  headers: {

    'X-MT-Authorization': `MTAuth accessToken={DataAPIアクセストークン}`

  }

})

  .then(res => res.json())

  .then(json => !json.error);

まとめ

これでコメントをData APIで保存することができました。
一点注意ですが、このコメントを書き込むユーザーに権限を与えすぎないように注意下さい。コメントさえ書き込められば良いので、 システムでのユーザー作成には以下で（Data APIでのサインインのみ）

またブログでのユーザー権限はコメント投稿者のみにしておくことにご注意下さい。

kyamashitaです。

PowerCMSのMTPagerを使ってページングを実装したのでご紹介します。

さて、今回は、そこで発表されたPhotoshopの新機能「空を置き換え」が楽しそうだったので試して見たいと思います。

「空を置き換え」の使い方

編集→空を置き換えを選択

空を置き換えの属性ボックスが表示されます。

空を置き換えの属性ボックスで、使いたい空を選択。

「空」の項目にある矢印マークをクリックすると、登録されている空の画像が表示されます。
置き換えたい空の画像を選択します。

設定を調整してなじませる

左上の移動ツールでは適用した空の画像の位置を調整できます。
空ブラシツールは、置き換える空の範囲を編集できます。
手のひらツール、ズームツールは作業中のキャンバスの大きさ・表示位置の調整に使います。

その他の各設定の説明はこちらのページを参照ください。
https://blogs.adobe.com/japan/cc-photo-photoshop-the-worlds-most-advanced-ai-application-for-creatives/

上記ページから引用すると、以下のような機能になります。

エッジをシフト：空と元の画像との境界の開始位置を指定します。
エッジをフェード：エッジに沿って空画像から元の写真へのフェードまたはぼかしの度合いを設定します。
明るさ：空の明るさを調整します。
色温度：色温度を暖色寄りまたは寒色寄りに調整します。
拡大・縮小：空の画像のサイズを変更します。
反転：空の画像を水平方向に反転します。
照明モード：調整に使用する描画モードを指定します。
照明の調整：空とブレンドするメイン画像を明るくしたり暗くしたりする不透明度スライダーです。0 に設定すると、調整は行われません。
カラー調整：前景と空のカラーの調和の強さを指定する不透明度スライダーです。0 に設定すると、調整は行われません。
出力：画像に対する変更を新規レイヤー（マスクを含む名前付きレイヤーグループ）またはレイヤーを複製（単一の統合されたレイヤー）のどちらに配置するかを選択できます。

空との境界線に違和感があるときは、エッジのシフト・フェードを調整してみるとよいと思います。
前景（空以外の部分）の照明やカラーを調整すると空ときれいになじんできます。

出力方法を選択して「OK」をクリック

出力方法には「新規レイヤー」と、「レイヤーを複製」の２種類があります。
「新規レイヤー」の方が後からマスクや色味の調整ができるので、通常はこちらの設定にしておくのがよさそうです。

こんな感じで簡単に空を置き換えることができました。

新しい空の画像を追加して使用する

自分で新しく空の画像を追加して使用することもできます。

空を選択するウィンドウの右下にある「＋」マークをクリックして、追加したい空を選択。
これで新しい空の画像が追加されます。

あとは先程同様に、色味などを調整して完成です。

好きな画像をつかえるので、こんな感じのおもしろ画像もつくれちゃいます！

新機能の空を置き換え、便利な上に、工夫次第でいろいろな使い方ができそうですね！

参考：
https://helpx.adobe.com/jp/photoshop/using/replace-sky.htm https://blogs.adobe.com/japan/cc-photo-photoshop-the-worlds-most-advanced-ai-application-for-creatives/l

前回は three.js の example を修正して海を表示してみました。

今回は環境を作ってみましたので、ご紹介しようと思います。

本日はMovable TypeのData APIを使って記事を操作する時に、カスタムフィールドに画像アセットがある場合の登録方法をご紹介いたします。

はじめに

Data APIを使うと管理画面にログインせずに各種データの操作を行えます。
詳細

説明

本来だと以下の流れになります、今回は記事の登録箇所のみ説明いたします。(3)

1. ユーザー認証(2,3の際のリクエスト時に取得したアクセストークンを使用)
2. 画像を登録
3. 登録した画像のデータを付与して記事登録

コード

//記事基本データ
const postEntry = {
  title: 'title',
  body: 'body',
  excerpt: '',
  status: 'Publish',
  allowComments: true,
  keywords: '',
  allowTrackbacks: false,
  basename: 'basename',
  customFields: []
 };

//カスタムフィールド設定

postEntry.customFields.push({

   'basename': 'cf_image',

   'value': sanitizeHtml(`<form mt:asset-id='{アセットID}' class='mt-enclosure mt-enclosure-{アセットクラス}' style='display: inline-block;'><a href='{アセットURL}'>{アセットファイル名}</a></form>`, {

     allowedTags: [ 'form', 'a' ],

     allowedAttributes: {

       a: [ 'href' ],

       form: ['mt:asset-id', 'class', 'style']

     }

   })

});

//記事作成処理

const body = new FormData();

body.append('entry', JSON.stringify(postEntry);

fetch({DATA API 記事作成エントリーポイント}, {

  method: 'post',

  ////修正しました。(20200918)

  //body: 'entry=' + JSON.stringify(postEntry),

  body: body,

  headers: {

    //修正しました。(20200918)

    //'Content-Type': 'application/x-www-form-urlencoded',

    'X-MT-Authorization': `MTAuth accessToken={1で取得したアクセストークン}`

  }

})

  .then(res => res.json())

  .then(json => !json.error);

説明

ポイントはカスタムフィールド設定です。(投稿基本データ, 投稿作成処理は説明省きます)。 カスタムフィールドの登録は配列でbasename、value のオブジェクトをカスタムフィールド分追加して登録します。
開発者サイト
github

問題は設定する値です。MovableTypeの管理画面の記事のカスタムフィールドhiddenフィールドを見るとカスタムフィールドに紐付いた画像は 記事自体に登録されているのでなく、アセットと紐付いているだけなので紐付ける用の値を指定してあげます。 実際には以下のようなものになります。

<form mt:asset-id="{asset_id}" class="mt-enclosure mt-enclosure-{asset_class}" style="display:inline-block"><a href="{asset_url}">{asset_filename}</a></form>

ここで各 asset_id, asset_class, asset_url, asset_filename は画像の登録時もしくは画像データ取得すると返される値を使用します。
参考

data.id, data.class, data.url, data.filename

これでカスタムフィールドと画像紐付け用の値ができました。
しかしこれだけだとData API側からエラーが返され登録ができません(status code 500)。さらに作成した値をサニタイズしてあげる必要があります。
今回はsanitize-htmlを使用しました。 使用しているタグとプロパティーを許可するため以下のように設定しています。

sanitizeHtml({変換前の文字}, {
  allowedTags: [ 'form', 'a' ],
    allowedAttributes: {
      a: [ 'href' ],
      form: ['mt:asset-id', 'class', 'style']
    }
});

まとめ

いかがでしたでしょうか？みなさんも素敵なData API生活をお送りください。
参考

• Data APIドキュメント
• 画像タイプのカスタムフィールドを持つエントリーをData APIを使って投稿する
• sanitize-html