「React」の記事 - Crieit

SmartHRと連携して人事データを可視化するツールを作ってみた

2023-04-11T23:29:51+09:00

個人開発でSmartHRと連携したレポーティングツールを作成してみました。

人事データ簡易分析ツール

概要

このツールはSmartHRと連携してAPI経由でデータを取得して可視化を行うためのレポーティングツールです。

SmartHRではフリープラン、労務管理プランでは分析レポートの利用が有料プランに切り替えるなどの対応を行わないと利用できません。

オプション機能として提供されていますが、そこまで細かく分析するほどでは無く現状の人事情報を可視化したい、みたいな緩い使い方でも許容できるユーザーさんを対象に簡易的なグラフ出力を提供します。

利用にはテナントIDとアクセストークンを利用しますが、サイト内にも記載がある通りこのツールはテナントIDやアクセストークンを保存したりはしません。データ取得時のみに利用します。

そのため画面をリロードしたりするともちろん情報は失われます。

再度表示したい場合は都度テナントID、アクセストークンはをもう一度入力していただく手間はありますが…

技術構成

React
rebass
styled-component
recharts
TypeScript
Vite
VItest
Axios
CloudFlare Pages

レポート出力結果

出力結果は以下のような感じでシンプルに出力しています。

もしご興味あれば是非使ってみてください。

次にテナントIDとアクセストークンについて簡単に説明します。

テナントIDについて

テナントIDはSmartHRのURLに含まれている以下の部分の文字列です。

[https://[テナントID].smarthr.jp/](https://[テナントID].smarthr.jp/)

アクセストークンについて

アクセストークンは管理画面より作成を行うため以下に手順を載せておきます。

SmartHRにログインした後、右上のユーザー名の部分をクリックするとメニューが表示されます。

その中の「共通設定」をクリックしてください。

次に左側メニューから「外部システム連携」をクリックします。

API連携より「アクセストークン」をクリックします。

「新規発行」をクリックします

「アクセストークン名」を入力します。利用する用途を名前にしておくと良いです。

例えば「分析レポート」とか…

必須項目の入力が埋まると「登録」ボタンがクリックできるようになるので登録するとアクセストークンが払い出されます。

これらのテナントIDとアクセストークンを利用して本ツールにて入力して「出力」ボタンをクリックしてもらうとレポートが出力されます。

まだまだ表示がおかしい部分があったり、追加したい機能等があるので引き続き開発を進めていきたいと思います！

採用計画や人事データを活用して分析を行いたい方は是非活用してみてください。

React (create-react-app) で Clipboard API にアクセスするために localhost:3000 をhttpsにする

2022-07-14T23:32:07+09:00

経緯

React アプリ(create-react-app(react-scripts))で Clipboard API を使おうとしたところ、次のエラーが発生してしまいました。

Uncaught TypeError: Cannot read property ‘writeText’ of undefined ...

調べてみたところ、 https でないと使用できないようです。

そこで通常 npm start で自動起動してくる http://localhost:3000/ を https://localhost:3000/ にする必要に迫られたので、その方法を書き留めておきます。

対処

今回は XAMPP の入っているPCでそのオレオレSSL証明書が既にあったので、それを流用します。

証明書を server.crt、秘密鍵を server.key という名前でコピーして、 create-react-app プロジェクト配下に設置します(今回は ssl/ ディレクトリを切りました)。

次に、 .env に次の3行を足して再度 npm start します。

HTTPS=true
SSL_CRT_FILE=./ssl/server.crt
SSL_KEY_FILE=./ssl/server.key

これで https://localhost:3000/ でアプリにアクセスでき、無事 Clipboard API も動かすことができました。

Reactでasync/awaitだけで確認ダイアログを出せるようにする

2022-02-02T08:58:21+09:00

今回はNext.jsですが、Reactで確認ダイアログを出す時、confirm関数的なものをawaitで呼べたら楽ちんだよなあと思うのでその実装方法を書きます。そのページに別途ダイアログ用のテンプレートは記述しない方法です。

例えば下記のような感じです。

const onClick = useCallback(async () => {
  const isConfirmed = await confirm('タイトル', 'OKですか？')
  if (!isConfirmed) {
    return
  }
  doSomething()
}, [])

ダイアログの状態管理を作成

まずはダイアログの状態管理を行います。今回は状態管理としてRecoilを使っています。下記のような useConfirmDialog.ts を作成します。

import { useCallback } from 'react'
import { atom, useRecoilState } from 'recoil'

type OpenArgs = {
  title?: string
  body: React.ReactNode
}

type DialogProps = OpenArgs & {
  resolve: (value: boolean) => void
}

const dialogPropsState = atom({
  key: 'confirmDialog/dialogProps',
  default: undefined,
})

export function useConfirmDialog() {
  const [dialogProps, setDialogProps] = useRecoilState(dialogPropsState)

  const close = useCallback(
    (result: boolean) => {
      console.log({ dialogProps })
      if (dialogProps.resolve) {
        dialogProps.resolve(result)
      }

      setDialogProps(undefined)
    },
    [dialogProps]
  )

  function open({ title, body }: OpenArgs): Promise {
    return new Promise((resolve) => {
      setDialogProps({
        title,
        body,
        resolve,
      })
    })
  }

  return { isOpen: !!dialogProps, open, close, dialogProps }
}

ダイアログが開いているかの isOpen、開くための関数 open、閉じるための close、ダイアログの設定である dialogProps を出力します。

ここで重要なのがPromiseのresolveをdialogPropsとして保存しているところです。これを保存しておき、ダイアログが終わるタイミングでそのresolveを呼び出すことで呼び出し元のawaitを終了させることができます。

ちなみにこのdialogPropsという形ではなく、タイトルや内容、resolveをそれぞれのstateにすることも考えられますが、これはだめでした。なぜかresolveが勝手にundefinedになってしまい即awaitが終了してしまいます。何か勝手に解放されてしまうのでしょうか。ということでここが一番の肝でした。

ダイアログの表示を行う

ダイアログ自体は ConfirmDialogProvider というコンポーネントを作り、アプリケーション全体を囲むレイアウトとして設置しておきます。

Next.jsであれば pages/_app.tsx に下記のような感じです。

function MyApp({ Component, pageProps }) {
  const colors = useColors()

  return (
    
      
        
      
    
  )
}

ConfirmDialogProviderは下記のような感じです。Chakra UIのダイアログを使った例です。

import { useConfirmDialog } from '@/hooks/dialog/useConfirmDialog'
import { useLocale } from '@/hooks/useLocale'
import {
  AlertDialog,
  AlertDialogOverlay,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogBody,
  AlertDialogFooter,
  Button,
} from '@chakra-ui/react'
import { useRef } from 'react'

type Props = {
  children: React.ReactNode
}

export default function ConfirmDialogProvider(props: Props) {
  const { isOpen, close, dialogProps } = useConfirmDialog()
  const { title, body } = dialogProps ?? {}
  const cancelRef = useRef()

  return (
    <>
      {props.children}
       close(false)}
      >
        
          
            {title && (
              
                {title}
              
            )}

            {body}

            
              
              
            
          
        
      
    
  )
}

Gatsby.js + Vercel でブログを作ってみる

2021-08-25T22:14:35+09:00

兼ねてより試してみたかった Gatsby.js + Vercel の組み合わせに着手してみました。

1. Gatsby.js のインストールと Gitリポジトリの準備

まずは Gatsby.js のプロジェクトを作って Gitホスティングサービスに push します。

> yarn init

## 略

success Saved package.json
Done in 2.33s.

適当なディレクトリで package.json を生成。

> yarn add gatsby-cli

## 略

Done in 26.05s.

続いて gatsby-cli をインストールします。一応グローバルではなくローカルで。

: Gatsby Starter | Gatsby

今回のテーマはこれにします。

> gatsby new mptotkb https://github.com/renyuanz/leonids
╔════════════════════════════════════════════════════════════════════════╗
║                                                                        ║
║   Gatsby collects anonymous usage analytics                            ║
║   to help improve Gatsby for all users.                                ║
║                                                                        ║
║   If you'd like to opt-out, you can use `gatsby telemetry --disable`   ║
║   To learn more, checkout https://gatsby.dev/telemetry                 ║
║                                                                        ║
╚════════════════════════════════════════════════════════════════════════╝
info Creating new site from git: https://github.com/renyuanz/leonids.git

Cloning into 'mptotkb'...
remote: Enumerating objects: 60, done.
remote: Counting objects: 100% (60/60), done.
remote: Compressing objects: 100% (44/44), done.
Receiving objects: 100% (60/60), 542.69 KiB | 5.32 MiB/s, done.eceiving objects: 100% (60/60)

success Created starter directory layout
info Installing packages...
info Preferred package manager set to "npm"

## 略

Your new Gatsby site has been successfully bootstrapped. Start developing it by running:

  cd mptotkb
  gatsby develop

プロジェクト作成完了。

> cd mptotkb
> gatsby develop

## 略

info
Hi from the Gatsby maintainers! Based on what we see in your site, these coming
features may help you. All of these can be enabled within gatsby-config.js via
flags (samples below)

Preserve webpack's Cache (https://github.com/gatsbyjs/gatsby/discussions/28331), which changes Gatsby's cache clearing behavior to not clear webpack's
cache unless you run "gatsby clean" or delete the .cache folder manually.
Here's how to try it:

module.exports = {
  flags: { PRESERVE_WEBPACK_CACHE: true },
  plugins: [...]
}

⠀
You can now view gatsby-starter-leonids in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle - 48.261s

OK。完了しました。

最初は手始めということでこの状態でいったん push しておきたいと思います。 Gitリポジトリに登録するのは親ディレクトリではなく作成したプロジェクト (今回は mptotkb 下) です。

GitHub でリポジトリを作成して、このリポジトリに先ほどのプロジェクトを push 。ちなみにリポジトリは public である必要があります。

2. Vercel と Gitホスティングサービスの連携

次に Vercel でアカウントを作ります。

今回は GitHub を使用しているので「Continue with GitHub」を選択。

「Authorize Vercel」で Vercel のアクセスを認証します。

ログインできました。

3. リポジトリのインポート

一度中断してしまったのでダッシュボードから。ここからであれば「New Project」で次へ進みます。

Import Git Repository から「Add GitHub Org or Account」。

インポートするリポジトリを選択します。今回は1つのリポジトリだけに Vercel に連携させます。

リポジトリの確認です。使用しているフレームワークが自動判別されるのはありがたいですね。

次の画面でフローに沿って設定を進めていきます。最初に Vercel のチームを作成する画面が有効になっていますが、今回は個人なので「Skip」。

プロジェクトの設定。出力の設定や環境変数を設定できますが、今回はそのままで。

デプロイ中。

少し待つとデプロイが完了します。そこでURLから実際の画面を表示させると……きちんとデプロイされていました！

ここまでで Gatsby.js + Vercel でブログを作成することができました。

今後の課題としては以下の通り。

サイト名や著者情報といった基本情報のカスタマイズ
どうやらブログ記事の Markdown ファイルを生成する CLI やユーティリティはなさそうで、手作業で記事をちまちま作っていくのは手間なので記事リソースを別の場所 (Headless CMS とか) で管理して JAMStack にする

あとは折角なので GraphQL にも少しは触ってみたいところですね。

参考

Gatsby.js + Vercel

【ZEIT Now】Gatsbyサイトを無料サーバーVercelで公開する方法を徹底解説 | WebCraftLog
Gatsby + microcms + Vercel でブログを作って公開したい
Vercel – Git - Vercel Documentation
- 参考記事とは画面構成が変わっていたため、最終的には Vercel のドキュメントが頼りでした

Vercel

NetlifyキラーのVercelでウェブサイトをホストしたら簡単すぎて笑顔になった | DevelopersIO

React NativeでローカルデータベースRealmを使ったスマホアプリをつくる

2021-03-01T21:16:04+09:00

本記事はブログ記事の転載です。

ユーザーが作成するデータをスマホにのみ保存し、サーバー上には保存しない React Native アプリを開発する場合、スマホ内のローカルデータベースにデータを保存することになります。本記事では、ローカルデータベースの1つである Realm を使った React Native アプリの開発方法を紹介します。

なぜサーバーではなくスマホに保存するのか

最近はFirebaseのようなmBaaS (Mobile Backend as a Service) が登場したことで、アプリ開発者がインフラを触るハードルが下がってきています。それでもなおサーバーではなくスマホにデータベースを保存するモチベーションとして、以下が挙げられます。

サーバーの障害によってアプリが使えなくなることがない
インターネットが使えない場所でもアプリを利用できる
アプリ開発者がサーバーを維持管理する必要がなくなる
- FirebaseのようなmBaaSでも、ユーザー増に伴い金銭的な負担が生じる
大規模なデータ流出は起こらない
- アプリ開発者のもとにユーザーのデータが集まらないため、データ流出の危険性は下がる

使用フレームワーク・ライブラリ

本記事では以下のフレームワーク、ライブラリを利用します。

React Native
- クロスプラットフォーム対応のスマホアプリを開発できるフレームワーク。
Realm
- オフラインデータベース。開発元はMongoDB社により2019年買収。MongoDB社が提供するMongoDB Realm(mBaaS)を使うことで、複数端末間でデータベースを同期することもできるが、本記事の対象外。

SQLiteとの比較

スマホ内にデータベースを保存する方法として、RealmのほかにSQLiteがあります。RealmとSQLiteをざっくり比較すると、以下のようになります。

RealmはSQLiteより軽い
- Realmでは、クエリの結果は遅延読み込みされる
RealmではSQLを書く必要がない
ただし、RealmはExpoで使えない（SQLiteはExpoで使える）

本記事の前提

まだReact Native 開発環境のセットアップをしていない場合、Setting up the development environment(React Nativeドキュメント)にある "React Native CLI Quickstart" の内容を読み、指示に従ってください。

また、本記事の内容は、以下の環境で動作確認しています。

macOS Big Sur 11.2.1
React Native 0.63.4
Node.js v14.16.0
Xcode 12.4
Simulator 上の iPhone 11 / iOS 14.4

Realmの準備

React Native アプリの作成

ここでは、MyRealmAppという名前のReact Nativeアプリを作成してみます。なお、ExpoではRealmを使うことができませんので注意してください。

$ npx react-native init MyRealmApp

Realmのインストール

$ cd MyRealmApp
$ npm install realm
$ cd ios && pod install && cd ..

PCにインストールされているNode.jsのバージョンが古いとエラーになることがあります。

もし、上記のnpm install realmコマンドを実行した結果、The N-API version of this Node instance is (数値). This module supports N-API version(s) (数値). This Node instance cannot run this module. というエラーが表示された場合、Node.js のバージョンを上げてください。

スキーマの定義とRealmの初期化

本記事では例としてタスク管理アプリを設計してみます。タスクを表現するTask クラスと、各 Task にはサブタスクを設定できるよう、SubTask クラスを定義します。

まず、作成した React Native プロジェクト内に src フォルダを作成します。src フォルダは、 App.js と同階層のフォルダに作成してください。次に、src フォルダ内に以下のファイルを作成します。ファイル名は realm.js とします。

./src/realm.js

// Taskの定義
const taskSchema = {
  name: 'Task',
  primaryKey: '_id',
  properties: {
    _id: 'objectId', // 'string' や 'int' でも OK
    name: 'string',
    description: 'string?', // ?をつけると optional
    isDone: 'bool',
    createdAt: 'date',
    subTasks: 'SubTask[]', // クラス名 + '[]' で1対多のリレーションを設定できる
  },
};

// SubTaskの定義
const subTaskSchema = {
  name: 'SubTask',
  primaryKey: '_id',
  properties: {
    _id: 'objectId',
    name: 'string',
    isDone: 'bool',
    createdAt: 'date',
  },
};

// Realmの初期化
export const openRealm = () => {
  const config = {
    schema: [taskSchema, subTaskSchema],
    schemaVersion: 1, // スキーマを変更したらインクリメントする(後述)
  };

  return new Realm(config);
};

export {BSON} from 'realm';

データベースの操作

React NativeでRealmを使う前に、まずRealm単体でデータベースを操作する方法を見ていきます。

このセクションのコードは、作成した React Native プロジェクトのフォルダに入っている App.js 内の適当な場所に書いた上で npx react-native run-ios コマンドを実行すると Simulator 上で動作確認できます。

（npx react-native run-ios コマンドがエラーで失敗する場合、Flipperのバージョンを変更してみてください(Stack Overflow 英語版)）

オブジェクトの新規作成

import {openRealm, BSON} from './src/realm';

const realm = openRealm();

// 更新系はすべて realm.write(() => { }) (=トランザクション)内に書く
realm.write(() => {
  // サブタスクを作成しない場合
  realm.create('Task', {
    _id: new BSON.ObjectId(),
    name: 'タスクの名前',
    isDone: false,
    createdAt: new Date(),
  });

  // サブタスクを作成する場合
  realm.create('Task', {
    _id: new BSON.ObjectId(),
    name: 'タスクの名前',
    isDone: false,
    createdAt: new Date(),
    subTasks: [
      {
        _id: new BSON.ObjectId(),
        name: 'サブタスクの名前',
        isDone: false,
        createdAt: new Date(),
      },
    ],
  });
});

オブジェクトの取得

filtered で利用可能なクエリについては公式ドキュメントを参照してください。

import {openRealm} from './src/realm';

const realm = openRealm();

// タスクを全部取得
const tasks = realm.objects('Task');

console.log(tasks[0].name); // 「タスクの名前」と表示される
console.log(tasks[1].subTasks[0].name); // 「サブタスクの名前」と表示される

// フィルタの例 — 完了しているタスクのみ取得
const done = tasks.filtered('isDone == true');
console.log(`完了しているタスクは${done.length}件です。`);

// ソートの例 — 名前順で取得
const sorted = tasks.sorted('name');
console.log(sorted[0].name);

オブジェクトの更新

JavaScriptのオブジェクトを操作するのと同じ方法でRealm上のデータを更新できます。

import {openRealm} from './src/realm';

const realm = openRealm();

realm.write(() => {
  // 更新対象のタスク
  const task = realm.objects('Task')[0];

  // 更新
  task.name = '新しいタスクの名前';
  task.isDone = !task.isDone;
});

オブジェクトの削除

import {openRealm} from './src/realm';

const realm = openRealm();

realm.write(() => {
  // 削除対象のタスク
  const task = realm.objects('Task')[0];

  if (task) {
    // まずサブタスクを削除
    realm.delete(task.subTasks);

    // 削除
    realm.delete(task);
  }
});

React NativeでRealmを使う

React Nativeアプリ内でTaskを操作できるようにするためのコンテキストと React Hook を作ります。

以下の例は、GitHubの mongodb-university/realm-tutorial-react-native リポジトリ内のコードを参考に、本記事用に書き換えたものです。

まずsrc フォルダ内にproviders フォルダを作成します。providersフォルダ内にTaskProvider.jsという名前でファイルを作成し、以下のコードを書きます。このコードの詳細については、コード中のコメントを参照してください。

./src/providers/TasksProvider.js

import React, {useContext, useState, useEffect, useRef} from 'react';
import {openRealm, BSON} from '../realm';

const TasksContext = React.createContext(null);

const TasksProvider = ({children}) => {
  const [tasks, setTasks] = useState([]);

  const realmRef = useRef(null);

  useEffect(() => {
    realmRef.current = openRealm();

    const tasks = realmRef.current.objects('Task').sorted('createdAt', true);
    setTasks(tasks);

    // Task のデータが更新されたら setTasks する
    tasks.addListener(() => {
      const tasks = realmRef.current.objects('Task').sorted('createdAt', true);
      setTasks(tasks);
    });

    return () => {
      // クリーンアップ
      if (realmRef.current) {
        realmRef.current.close();
      }
    };
  }, []);

  // タスクの新規作成
  const createTask = (newTaskName) => {
    const projectRealm = realmRef.current;
    projectRealm.write(() => {
      projectRealm.create('Task', {
        _id: new BSON.ObjectId(),
        name: newTaskName || '新しいタスク',
        isDone: false,
        createdAt: new Date(),
      });
    });
  };

  // タスクの isDone を更新する
  const setIsTaskDone = (task, isDone) => {
    const projectRealm = realmRef.current;

    projectRealm.write(() => {
      task.isDone = isDone;
    });
  };

  // タスクを削除する
  const deleteTask = (task) => {
    const projectRealm = realmRef.current;
    projectRealm.write(() => {
      projectRealm.delete(task);
    });
  };

  // useTasks フックで Task を操作できるようにする
  return (
    {{
        createTask,
        deleteTask,
        setIsTaskDone,
        tasks,
      }}>
      {children}
    
  );
};

// Task を操作するための React Hook
const useTasks = () => {
  const task = useContext(TasksContext);
  if (task == null) {
    throw new Error('useTasks() called outside of a TasksProvider?');
  }
  return task;
};

export {TasksProvider, useTasks};

以上で作成したTasksProviderをApp.jsに追加し、useTasksフックをコンポーネント内で使ってみます。ここでは、src フォルダ内にcomponents フォルダを作成し、その中にMain.js というファイルでコンポーネントを定義します。

./App.js

import React from 'react';
import {TasksProvider} from './src/providers/TasksProvider';
import {Main} from './src/components/Main';
import {StatusBar} from 'react-native';

const App = () => {
  return (
    
      
      
    
  );
};

export default App;

./src/components/Main.js

import React, {useState, useCallback} from 'react';
import {
  SafeAreaView,
  FlatList,
  View,
  Text,
  TouchableOpacity,
  TextInput,
  KeyboardAvoidingView,
  StyleSheet,
  TouchableWithoutFeedback,
  Keyboard,
} from 'react-native';
import {useTasks} from '../providers/TasksProvider';

// コンポーネント間の余白を作るための関数
const spacer = (size) => {
  return {{height: size, width: size}} />;
};

export const Main = () => {
  const [inputText, setInputText] = useState('');
  const {createTask, deleteTask, setIsTaskDone, tasks} = useTasks();

  const onSubmitEditing = useCallback(
    (event) => {
      setInputText(event.nativeEvent.text);
      createTask(inputText);
      setInputText('');
    },
    [inputText, setInputText, createTask],
  );

  return (
    
      
        
        
          {spacer(15)}
          
            My Tasks
          
          {spacer(15)}
           setInputText(e.nativeEvent.text)}
            style={styles.headerInput}
          />
          {spacer(24)}
        
      
       Keyboard.dismiss()}>
        {tasks.length > 0 ? (
           item._id.toHexString()}
            renderItem={({item}) => (
              
                 setIsTaskDone(item, !item.isDone)}>
                  
                    {item.isDone && ✓}
                  
                
                
                  
                    {item.name}
                  
                
                 deleteTask(item)}>
                  
                    Delete
                  
                
              
            )}
          />
        ) : (
          
            No Tasks
          
        )}
      
    
  );
};

// スタイル
const styles = StyleSheet.create({
  container: {flex: 1},
  header: {
    backgroundColor: '#2563EB',
  },
  headerContent: {paddingHorizontal: 24},
  headerTitle: {color: 'white', fontSize: 32, fontWeight: 'bold'},
  headerInput: {
    borderRadius: 6,
    height: 40,
    paddingHorizontal: 12,
    marginHorizontal: -12,
    fontSize: 18,
    backgroundColor: '#fff',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2.5,
    },
    shadowOpacity: 0.3,
    shadowRadius: 2.4,
    elevation: 4,
  },
  tasksContainer: {flex: 1},
  tasksContentContainer: {paddingBottom: 20},
  taskItem: {
    borderBottomWidth: 1,
    borderBottomColor: '#E5E7EB',
    flexDirection: 'row',
    alignItems: 'center',
  },
  chechboxContainer: {padding: 20},
  checkbox: {
    width: 25,
    height: 25,
    borderRadius: 12,
    borderWidth: 1.5,
    alignItems: 'center',
    justifyContent: 'center',
  },
  checkboxIcon: {color: 'white', fontWeight: 'bold', fontSize: 18},
  taskContent: {flex: 1},
  taskName: {
    fontSize: 20,
    fontWeight: '600',
  },
  deleteButton: {padding: 20},
  deleteButtonText: {color: '#EF4444'},
  emptyContent: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
  emptyMessage: {
    fontSize: 20,
    fontWeight: '500',
    color: '#9CA3AF',
  },
});

動作確認

ここまでできたら、一度動作確認してみます。今回は Simulator 上の iPhone で動作確認します。以下のコマンドで、シミュレータを立ち上げます。

（以下のコマンドがエラーで失敗する場合、Flipperのバージョンを変更してみてください(Stack Overflow 英語版)）

$ npx react-native run-ios

以下の動画のように動作すれば成功です。もしエラーが発生する場合、「DerivedDataの削除」「iosフォルダ内でpod install 再実行」などをお試しください（詳細はエラーメッセージでググってみてください）。

ここまで書いてきたコードでは、タスクの編集ができません。タスク名を自由に編集できるようにしてみると良いかもしれません（本記事では省略します）。

スキーマ変更時の注意点(schemaVersionとマイグレーション)

アプリストアで配信中のアプリをアップデートする際、データベースのスキーマが変更になる場合、schemaVersion をインクリメントする必要があります。また、必要に応じて、旧スキーマのデータを新スキーマのデータへ移行する処理(マイグレーション)を書く必要があります。

例として、TaskのisDone を変更してみます。ここまで、タスクの完了状況はisDoneで管理してきました。isDone はタスクの完了・未完了しか表すことができないため、新しくstatus として、タスクの状態を以下の3つに分類できるようにしてみます。

Open : タスク未着手
InProgress : タスク進行中
Complete : 完了

スキーマを書き換える

./realm.js に書いた Task のスキーマ定義を以下のように変更します。この作業はスキーマ定義を直接書き換えます。

// 略
const taskSchema = {
  name: "Task",
  primaryKey: "_id",
  properties: {
    _id: "objectId",
    name: "string",
    description: "string?",
    // isDone: 'bool',
    status: "string", // isDone を削除し status を追加
    createdAt: "date",
    subTasks: "SubTask[]",
  },
};
// 略

マイグレーション処理を書く

./realm.js ファイルを保存し、React Native開発環境を再度実行すると、コンソールに以下のようなエラーが表示されます。

Error: Migration is required due to the following errors:
- Property 'Task.isDone' has been removed.
- Property 'Task.status' has been added.

このエラーメッセージを日本語に訳すと以下のようになります。

エラー: 以下のエラーのため、マイグレーションが必要です
- プロパティ 'Task.isDone' が削除されました
- プロパティ 'Task.status' が追加されました

このようなエラーが表示された場合、./realm.js ファイルにある openRealm 関数内の config 定数を以下のように書き換えます。

// 略

// Realmの初期化
export const openRealm = () => {
  const config = {
    schema: [taskSchema, subTaskSchema],
    // schemaVersion: 1,
    schemaVersion: 2, // ① schemaVersion を 1 → 2 へ変更

    // ②マイグレーション処理を追加
    migration: (oldRealm, newRealm) => {
      // 現在保存されているデータの schemaVersion が 2 未満の場合に実行
      if (oldRealm.schemaVersion < 2) {
        const oldObjects = oldRealm.objects('Task');
        const newObjects = newRealm.objects('Task');
        // 全TaskデータのisDoneをstatusに変換
        for (const objectIndex in oldObjects) {
          const oldObject = oldObjects[objectIndex];
          const newObject = newObjects[objectIndex];
          newObject.status = oldObject.isDone ? 'Complete' : 'Open';
        }
      }
    },
  };

  return new Realm(config);
};

// 略

このファイルを保存し、再度アプリを実行すると、マイグレーションが実行され、データベースが更新されます。まだ isDone がコード上で使われているため、必要に応じて status を使うように修正を行ってください（本記事では省略します）。

ここでのポイントは以下の2点です。

① schemaVersion を 1 → 2 へ変更

Realm にデータベーススキーマが変更になったことを伝えるため、schemaVersion をインクリメントします。schemaVersion は、データベーススキーマに変更がある場合のみ変更します。一度 schemaVersion の値を増やした場合、この数値を減らさないでください。

② マイグレーション処理を追加

ユーザーのスマホ内に保存されている古いスキーマのデータベース内のデータを、新しいスキーマのデータベースに変換する処理を書きます。多くの場合、oldRealmのデータをもとに、対応するnewRealm内のデータを全部書き換えるようなコードになると思います。もしくは、optional ではない新しいプロパティが追加された場合、そのプロパティの初期値を設定するコードになると思います。

RealmデータベースGUIで操作できる「Realm Studio」

最後に、Realm Studioを紹介します。Realm Studio はWindows、Linux、macOSに対応したRealmデータベースの管理アプリです。Realm Studio を使うことで、Realmデータベースの中身をGUI上で確認・操作することができます。

Realm Studioは、Realm 公式サイト内にあるRealm Studioのページからダウンロードできます。Realm Studio を初めて起動するとメールアドレスの登録画面が表示されるのでメールアドレスを登録します。その後、以下の画面が表示されます。

この画面が表示されたら [Open Realm file] をクリックし、Realm ファイルを開きます。Realm ファイルのパスは、以下のコードをApp.js等に書いて実行することで確認できます（コンソールにファイルパスが表示されます）。

import {openRealm} from './src/realm.js';
console.log(openRealm().path);

無事ファイルを開けると、以下のような画面になります。この画面から、データの確認・編集ができます。

おわりに

React Nativeアプリでオフラインデータを扱うライブラリとしてRealmを紹介してみました。クラウド上にデータを置かないアプリ開発の参考になれば幸いです。

参考文献

MongoDB Realm React Native SDK

📔 ブログを書く用途に特化した Gyazo のツールを開発してみた

2021-01-18T02:08:16+09:00

Gyazo を技術記事を書く用途で使っているので専用の便利ツールを作ってみた

はじめに

いつもブログ記事に載せるキャプチャ画像の編集 & アップロード先として Gyazo を利用させていただいているのですが、日々使っている中で不満に感じる点もちょくちょく出てくるようになってきました。

そのため、3連休を用いて Rust の勉強がてら Bloggimg というウェブアプリケーションを作ってみました。ソースコードは MIT ライセンスで GitHub のリポジトリにアップしております。ちなみに最初は Gyazo for Blog という名称で開発をしていたため、本記事内のスクショには Gyazo for Blog という文字列が出てきますが、現在は Bloggimg という名称になっております。。

Bloggimg を開発したのは、ブログ記事を書く際に利用する画像のアップロードから加工、マークダウンとして利用するまでのフローを最適化したかったからです。ブログ記事を書く際に、記事内で用いるスクショ画像の加工や、そのアップロードにすごく時間を取られてしまうなーと日頃から感じていたのでそれを解決したかったのです。✅

開発中に得た知見等については別途技術記事として書いて残す予定です。

考えていたこと

今回 Bloggimg の開発を行うに当たり、考えていた点は下記になります。

画像の編集ツールは引き続き Gyazo に用意されているものを使う
- 既に最高に使いやすい 👑
キャプチャ画像をアップロードする際に、自動的に特定のコレクションに紐付けるようにする
- 技術記事毎にコレクションを分けて管理しているため、技術記事を書いている最中にアップするキャプチャ画像は全て特定のコレクションにまとまっていて欲しい
ワークスペースのようなツールを目指し、ブログを書く時だけに使える機能を開発する
- 例えば、ワンクリックで画像マークダウンの記述がコピーできたり、画像のアップロードをし直しやすくするため画像削除がお手軽に出来るよう削除ボタンに即アクセス出来るようにしたり...

特にアップした画像を 自動的に特定のコレクションに紐付けるようにする については本記事で紹介しているウェブアプリケーションを作成するキッカケとなった点なので外せない点でした。

使い方

Bloggimg の使い方についてご紹介いたします。

ログインする

Bloggimg を利用するためには、まず Gyazo アカウントでログインして頂く必要がございます。トップページの右上にあるログインボタンから Gyazo アカウントでログインします。

1. トップページ右上に配置されたログインボタンから Gyazo アカウント認証を行う

2. Gyazo アカウント認証が正常に完了したら、再度トップページを開く

3. トップページを開いた時に Gyazo にアップした直近の画像が確認できるはずです

ログアウトする

ウェブアプリケーションからログアウトするには、ログイン後にトップページ右上に表示される ログアウト ボタンをクリックすることでログアウトできます。

ログイン後にトップページ右上に表示される ログアウト ボタンをクリックしてログアウトする

画像ファイルをアップロードする

画像は一枚でも複数枚でもアップロードすることが可能です。画像アップロードの方法としてドラッグ & ドロップとファイル選択ダイアログを用意しております。

画面中央の点線枠内に画像ファイルをドラッグ & ドロップするか、点線枠内をクリックしてファイル選択ダイアログから選択することで画像をアップロードできる

画像ファイルをアップロードする際に自動でコレクションを紐付ける

Gyazo トップページ左端にコレクションリストが表示されているので、画像を紐づけたいコレクションを選択します。新たにコレクションを作成する場合はコレクションリスト上部にある コレクションを作成 ボタンをクリックします。

1. コレクションリストの中から画像を紐づけたいコレクションを選択する

2. コレクションを選択後に遷移した先の URL 末尾のコレクション ID をコピーする

3. トップページの最上部に 2. で控えていたコレクション ID をペーストする

上記までのステップが完了し、正しくコレクション ID が入力できていれば、次回以降のファイルアップロード時に自動で指定したコレクションに画像が紐づくようになります。

アップロードした画像ファイルを編集する

画像ファイルのアップロード時や 画像の再読み込み ボタンをクリックすることで、最新 20件の画像リストを画面最下部にロードされます。画像リストの各項目ではプレビュー、編集、削除、マークダウンのコピーを行うことが可能です。

画像リストの各項目の機能概要図

プレビュー

サムネ画像をクリックすることで、Gyazo にアップした元画像をプレビューすることが可能です。サムネ画像では画像の判別がしにくい場合に詳細を確認するための機能となります。

アップした画像の詳細を確認するためにプレビュー機能を利用する

編集

編集は該当画像の Gyazo ページにて行えるように、タイトルをクリックすることで Gyazo ページを別タブで開きます。

別タブで開いた Gyazo ページから画像の編集作業を行う

削除

画像の削除は 画像の削除 ボタンをクリックすることで、削除を行うための画面に遷移します。削除しようとしている画像で間違いないか確認後、削除を行うという手順になっております。

Gyazo から選択した画像を削除する

マークダウンのコピー

マークダウンをコピー ボタンをクリックすることで、クリップボードにマークダウン形式で該当画像を表示するための記述をコピーすることができます。具体的には下記のような記述がコピーされます。

ブログを書く先がマークダウン形式での記述に対応していれば、そのままペーストするだけで画像を表示することが可能です。

![スクリーンショット 2021-01-11 17.10.11.png](https://i.gyazo.com/a3e219b5efb8494103432b369ee99534.png)

おわりに

この記事を書くのにも実際に Bloggimg を用いましたが、個人的に今までよりも Gyazo でブログ記事内で利用する画像に関する作業効率は上がったように感じました。ブログを書くという用途に Gyazo を利用されている方のお役に立てれば幸いです。

また、今後は下記の機能実装を進めていく予定です。

画像アップ時に自動でアスペクト比を維持した状態で画像のリサイズを自動で行う機能
画像アップ時のタイトルの接頭辞が指定できるようにする機能
編集した画像が自動的にコレクションに紐づく機能
- 心残りな点として編集した画像をコレクションに紐付ける機能は API でできなかったため、現在手動で行う必要があります。。Gyazo の API がコレクションの紐づけにも対応したら対応したいと考えています ✅

React Static のサイトマップ( sitemap.xml )の loc をサイトURL始まりで出力させる

2021-01-10T00:49:33+09:00

React Static でサンプルページをビルドした際に、 sitemap.xml に記述されている loc の値がルートディレクトリからの絶対パスで記述されていたのに気付いたので、対処療法的に対処しました。

現象確認

現象を確認するために React Static をセットアップします。

> npm init -y
> yarn add react-static

ローカルインストール。

> react-static create  

? What should we name this project? rsps_l
? Select a template below... basic
Creating new react-static project...

## 略

[✓] Project "rsps_l" created (192s)

  To get started:

    cd "rsps_l"

    yarn start - Start the development server
    yarn build - Build for production
    yarn serve - Test a production build locally

react-static create でサイトを生成します。

import path from 'path'
import axios from 'axios'

export default {
  getRoutes: async () => {
    const { data: posts } = await axios.get(
      'https://jsonplaceholder.typicode.com/posts'
    )

    return [
      {
        path: '/blog',
        getData: () => ({
          posts,
        }),
        children: posts.map(post => ({
          path: `/post/${post.id}`,
          template: 'src/containers/Post',
          getData: () => ({
            post,
          }),
        })),
      },
    ]
  },
  plugins: [
    [
      require.resolve('react-static-plugin-source-filesystem'),
      {
        location: path.resolve('./src/pages'),
      },
    ],
    require.resolve('react-static-plugin-reach-router'),
    require.resolve('react-static-plugin-sitemap'),
  ],
}

ちなみに、デフォルトの状態で static.config.js は以上のような状態です。

> yarn build

まずはデフォルトの状態でビルドします。

図のように、 locタグの値がルートディレクトリからの絶対パスになっています。

サイトマップの構造について

ここでサイトマップの構造について確認します。

sitemaps.org - Protocol

required URL of the page. This URL must begin with the protocol (such as http) and end with a trailing slash, if your web server requires it. This value must be less than 2,048 characters.

sitemaps.org - Protocol

「ページのURL。このURLはプロトコル( http のような)から始まるURLでなければならない、また、Webサーバが必要とするならばスラッシュ / 終わりにしなければならない。この値は2,048文字未満にすること。」というところでしょうか。

……ということは、デフォルトの状態ではよろしくなさそうですね。

余談

ちなみに sitemap.org の日本語訳ページでは

必須ページの URL です。ウェブサーバーによっては、http などのプロトコルから始め、末尾にスラッシュを含める必要があります。この値は 2,048 文字以下で指定する必要があります。

sitemaps.org - プロトコル

となっていて、 if your web server requires it の部分が先頭に来てしまっているため、個人的には分かりづらいと感じました……。

対処

まずはどうやってカスタマイズできるか確認。

import path from 'path'
import axios from 'axios'

export default {
  getRoutes: async () => {
    const { data: posts } = await axios.get(
      'https://jsonplaceholder.typicode.com/posts'
    )

    return [
      {
        path: '/blog',
        getData: () => ({
          posts,
        }),
        children: posts.map(post => ({
          path: `/post/${post.id}`,
          template: 'src/containers/Post',
          getData: () => ({
            post,
          }),
        })),
      },
    ]
  },
  plugins: [
    [
      require.resolve('react-static-plugin-source-filesystem'),
      {
        location: path.resolve('./src/pages'),
      },
    ],
    require.resolve('react-static-plugin-reach-router'),
    [
        // react-static-plugin-sitemap にオプションを追加
        require.resolve('react-static-plugin-sitemap'),
        {
            getAttributes: route => {
                // とりあえず route に何が渡ってきているか確認
                console.log(route)
            }
        }
    ]
  ],
}

react-static-plugin-sitemap の部分にコールバックで console.log を仕込んで、 route の中身を確認します。

> yarn build

## 略

{
  path: 'blog/post/98',
  template: '__react_static_root__/src/containers/Post',
  getData: [Function: getData],
  sitemap: { noindex: false },
  data: {
    post: {
      userId: 10,
      id: 98,
      title: 'laboriosam dolor voluptates',
      body: 'doloremque ex facilis sit sint culpa\n' +
        'soluta assumenda eligendi non ut eius\n' +
        'sequi ducimus vel quasi\n' +
        'veritatis est dolores'
    }
  },
  sharedHashesByProp: {},
  sharedData: {}
}
{
  path: 'blog/post/99',
  template: '__react_static_root__/src/containers/Post',
  getData: [Function: getData],
  sitemap: { noindex: false },
  data: {
    post: {
      userId: 10,
      id: 99,
      title: 'temporibus sit alias delectus eligendi possimus magni',
      body: 'quo deleniti praesentium dicta non quod\n' +
        'aut est molestias\n' +
        'molestias et officia quis nihil\n' +
        'itaque dolorem quia'
    }
  },
  sharedHashesByProp: {},
  sharedData: {}
}
{
  path: 'blog/post/100',
  template: '__react_static_root__/src/containers/Post',
  getData: [Function: getData],
  sitemap: { noindex: false },
  data: {
    post: {
      userId: 10,
      id: 100,
      title: 'at nam consequatur ea labore ea harum',
      body: 'cupiditate quo est a modi nesciunt soluta\n' +
        'ipsa voluptas error itaque dicta in\n' +
        'autem qui minus magnam et distinctio eum\n' +
        'accusamus ratione error aut'
    }
  },
  sharedHashesByProp: {},
  sharedData: {}
}

出力結果から、 path が loc に出力されていそうなことが分かりました。

今回は諸事情により時間をあまり割くことができないので、手っ取り早く定数でサイトURLを定義してそれを渡してURLを組み立てることにしました。

import path from 'path'
import axios from 'axios'

// オリジン情報を定義
const originSiteURL = 'https://example.com/'

export default {
  getRoutes: async () => {
    const { data: posts } = await axios.get(
      'https://jsonplaceholder.typicode.com/posts'
    )

    return [
      {
        path: '/blog',
        getData: () => ({
          posts,
        }),
        children: posts.map(post => ({
          path: `/post/${post.id}`,
          template: 'src/containers/Post',
          getData: () => ({
            post,
          }),
        })),
      },
    ]
  },
  plugins: [
    [
      require.resolve('react-static-plugin-source-filesystem'),
      {
        location: path.resolve('./src/pages'),
      },
    ],
    require.resolve('react-static-plugin-reach-router'),
    [
        // react-static-plugin-sitemap にオプションを追加
        require.resolve('react-static-plugin-sitemap'),
        {
            getAttributes: route => ({
                loc: new URL(route.path, originSiteURL).href
            })
        }
    ]
  ],
}

コールバックの戻り値に loc を指定してデフォルトを上書きします。

これで yarn build 。

結果、意図通りプロトコル始まりのサイトURLに書き換えることができました。

参考

この記事で「プロトコル始まりではない絶対パスではまずいのでは？」と気付き。

URL組み立て

node.js - Can I use require("path").join to safely concatenate urls? - Stack Overflow

ここで path モジュールではなく ECMAScript の new URL() を使うと良い、というレスを見て採用。

📝 React で highlight.js を適用する方法

2020-12-24T09:42:14+09:00

React に highlight.js を組み込もうとしたのですが、若干躓いてしまったので対処法についてメモっておきます。

React は既にプロジェクトにインストール済みと仮定します。

# 一応 React をインストールするためのコマンドは ↓
npm i --save react react-dom

まずは highlight.js を NPM or Yarn でインストールします。

# NPM で highlight.js をインストールする
npm i --save highlight.js
yarn add highlight.js

その後、React ソースコードに highlight.js を組み込みます。
ソースコードの該当部分のみを載せると下記の感じになります。

import Head from 'next/head'
import styles from '../styles/Home.module.css'

import React, { useState, useEffect } from 'react';

/**
highlight.js を import する
*/
import hljs from 'highlight.js/lib/core';

/**
シンタックスハイライトしたい言語のみ import として登録する
今回は html をハイライトしたかったので xml を import した

デザインは highlight.js/styles/~ を変更することで調整可能
[https://highlightjs.org/](https://highlightjs.org/) のトップページから各種デザインについては確認可能
(コード右下にある style の右側リンククリックで各種デザインのプレビューが可能)
*/
import xml from 'highlight.js/lib/languages/xml';
import 'highlight.js/styles/github.css';

hljs.registerLanguage('xml', xml);

let inputChecker = null;
export default function Home() {
  const [user, setUser] = useState('nikaera');
  const [previewUser, setPreviewUser] = useState('nikaera');
  const [badgeCode, setBadgeCode] = useState('nikaera');
  const [style, setStyle] = useState('plastic')

  /**
  useEffect のタイミングで hightlight.js の初期化を行う。
  called プロパティを false にすることで highlight.js で、
  コードが変更された場合でも常にシンタックスハイライトすることが可能
  */
  useEffect(() => {
    hljs.initHighlighting();
    hljs.initHighlighting.called = false;
  });

  useEffect(() => {
    /**
    シンタックスハイライトしたいコード input フォームへの入力内容に応じて動的に変わる
    */
    setBadgeCode(`  
  Hello ${user}!
  }`, [user, style]);
  });

  const handleChange = (event) => {
    if (inputChecker)
      clearTimeout(inputChecker);

    inputChecker = setTimeout(() => {
      clearTimeout(inputChecker);
      inputChecker = null;

      setPreviewUser(event.target.value);
    }, 1 * 1000); // 1 seconds

    setUser(event.target.value);
  };

  return (
    
      
        Highlight
      

      
        
          Highlight sample
        

        

        
          { /* pre -> code タグ内に highlight.js で
            シンタックスハイライトしたい内容を出力する */ }
          {{ width: '80vw' }}>
            
              {badgeCode}
            
          
        
      

      
      
    
  )
}

Hugo で React + TypeScript を利用してサクッとウェブサイトに RSS リーダーを追加する

2020-12-22T16:15:41+09:00

この記事は Static Site Generator Advent Calendar 2020 22日目の記事です。

はじめに

Hugo のウェブサイトに組み込む RSS リーダーを TypeScript で開発してみたいと思い調査したところ、Hugo の最新版には ESBuild が組み込まれていて、非常に手厚く JavaScript の開発環境がサポートされていることが分かりました。 本記事では紹介していませんが Babel も利用できるようです。

また、NPM パッケージも利用できるため、普段のウェブ開発と同様の流れで開発ができ、各種ライブラリを用いた開発も非常に楽でした。
今回は Hugo で JavaScript 開発する方法を RSS リーダーの開発を例に上げ、そこで得た知見についても交える形で記事として残しておくことにしました。

ちなみに本記事内容は Hugo で JavaScript 開発する方法に焦点を絞ったものなのですが、ウェブサイトに RSS リーダーを組み込むことに焦点を絞って見たい方は RSS リーダーを Hugo の Data Templates で実装する から見ていただくことをオススメします。

Hugo で JavaScript (React + TypeScript) の開発環境を整える

まず、TypeScript のビルドは ESBuild に任せることができるため何も行う必要はありません。 そのため React 開発用パッケージのインストールのみ行えば大丈夫です。

Hugo プロジェクトのルートディレクトリで下記コマンドを実行し、package.json を作成してから、React の開発に必要なパッケージをインストールします。

npm init -y
npm install --save react react-dom

無事パッケージのインストールが完了したら、早速 TSX ファイルを assets/js/App.tsx に作成してしまいます。

// assets/js/App.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    return (
        <>
        Hello React!
        
    );
}

ReactDOM.render(
    ,
    document.getElementById("react")
);

上記のコードを見てもらえば分かる通り、レンダリング先に id が react の DOM ノードを指定しています。そのため Hugo 側で該当する DOM ノードを用意する必要があります。その際の HTML テンプレートは下記になります。




{{ with resources.Get "js/App.tsx" }}





{{ $options := dict "targetPath" "js/app.js" "minify" true "defines" (dict "process.env.NODE_ENV" "\"development\"") }}


{{ $js := resources.Get . | js.Build $options }}


{{ $secureJS := $js | resources.Fingerprint "sha512" }}


{{ end }}

ちなみに $options で指定している ESBuild でビルド時に指定可能なオプションは Hugo の公式ページに記載されています。

上記 HTML の記述を RSS リーダーを埋め込みたいページに追加します。
この状態で該当ページにアクセスすると下記のような表示が確認できるはずです。

App.tsx で定義した内容が画面に表示される

これで React + TypeScript の開発環境が整いました。

RSS リーダーを実装する

あとは一般的な Web フロントエンド開発の流れで RSS リーダーの開発を進めていくだけです。

ウェブサイトで読み込みたい RSS フィードを準備する

RSS フィードを利用する際は必ず提供しているサービスの利用規約をご確認ください。
Qiita 及び Zenn については個人利用かつ自分の情報のみを扱う範囲内であれば利用が許可されているように見受けられました。

下準備としてウェブサイトで読み込みたい RSS フィードを事前にダウンロードするためのバッチを作成します。バッチは NPM を利用して作成していきます。NPM を導入したので Hugo で利用する簡易なバッチは JavaScript でサクッと作成していきます。

まずはスクリプト作成の際に必要となるパッケージを事前にいくつかインストールします。

# html をテキスト変換にするパッケージと RSS フィードのパーサーをインストールする
npm i -D --save html-to-text rss-parser

実際のコードは下記になります。ファイル名末尾が .mjs なのは Top-Level Await を使用したいからです。

// scripts/update-rss.mjs
import { writeFileSync } from 'fs';

import pkg from 'html-to-text';
const { htmlToText } = pkg;

import Parser from 'rss-parser';
const parser = new Parser();

// 自ブログで読み込みたい RSS フィードの情報を設定する
const rssFeed = {
    Zenn: {
        rss_url: 'https://zenn.dev/nikaera/feed',
        profile_url: 'https://zenn.dev/nikaera',
    },
    Qiita: {
        rss_url: 'https://qiita.com/nikaera/feed.atom',
        profile_url: 'https://qiita.com/nikaera',
    }
}

try {
    const jsonFeed = {}

    // RSS フィード内の description を 73字で切り取り末尾に ... を付与する関数
    const spliceContent = (content) => `${htmlToText(content).slice(0, 73)}...`

    // rssFeed 変数で定義されてる情報を繰り返し処理する
    for (const [site, info] of Object.entries(rssFeed)) {

        // RSS フィードの URL から必要な情報を取得する
        const feed = await parser.parseURL(info.rss_url);

        // RSS フィードに登録されている項目で必要な情報のみを取得する
        const items = feed.items.map((i) => {
            return {
                title: i.title,
                content: spliceContent(i.content),
                url: i.link,
                date: i.pubDate
            }
        })

        // 取得内容は jsonFeed に格納する
        const { rss_url, profile_url } = info
        jsonFeed[site] = { rss_url, profile_url, items };
    }

    // 最後に jsonFeed に格納された内容を JSON 文字列として static/rss.json に出力する
    writeFileSync('./static/rss.json', JSON.stringify(jsonFeed));
} catch(err) {
    console.error(err);
}

次に package.json の scripts に登録してコマンドとして実行可能にします。

{
    "scripts": {
        "update-rss": "node ./scripts/update-rss.mjs"
    }
}

これで npm run update-rss を実行すれば自ブログで表示する際に用いる JSON ファイルとして RSS フィードの内容を static/rss.json に出力できます。また、JSON ファイルは static フォルダに出力しているため http://localhost:1313/rss.json でアクセスできます。

npm run update-rss を実行して出力した rss.json

http://localhost:1313/rss.json にアクセスして出力した rss.json が参照可能なことを確認する

RSS リーダーを React + TypeScript で実装する

準備が整ったので、早速 RSS リーダーを作成していきます。

下記は Hugo のテーマの 1つである hugo-PaperMod の archives テンプレートを利用してページに埋め込むことを想定した RSS リーダーのコードです。

// assets/js/Rss.tsx
import React, { useMemo, useState } from 'react'

import * as superagent from 'superagent';

const Rss = (props) => {
    const [feed, setFeed] = useState({});
    const { name } = props;

    useMemo(() => {
        (async () => {
            try {
                const res = await superagent.get('/rss.json');
                setFeed(res.body[name]);
            } catch (err) {
                console.error(err);
            }
        })()
    }, [name]);

    if (!("items" in feed)) return null

    return (
        
            
                {name} - RSS
            
            
                {feed.items.map((item) => {
                    return 
                        {item.title}
                        {item.date} - {item.content}
                         
                    
                })}
            
        
    )
}

export default Rss

次に assets/js/App.tsx で assets/js/Rss.tsx を読み込み画面に表示できるよう改修します。

// assets/js/App.tsx
import Rss from './Rss';

import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    return (
        <>
            
                
                    Tech 🦾
                
                
                
            
        
    );
}

ReactDOM.render(
    ,
    document.getElementById("react")
);

これで RSS リーダーを埋め込んだページを閲覧すると下記のような画面が表示されるはずです。

hugo-PaperMod で archives テンプレートを用いて RSS リーダーを表示したときの画面

もし他の RSS フィードを追加したい場合は scripts/update-rss.mjs の rssFeed 変数に情報を追加して、App.tsx にを定義することで対応できます。

RSS フィードの内容を自動で更新する

npm run update-rss を手元で実行して static/rss.json を更新して公開すれば、最新の RSS フィードの内容をページに反映できる状態ですが、都度手動で更新するのは面倒な作業です。

そこで今回は GitHub Actions の schedule を用いて static/rss.json の更新を自動化します。

GitHub Actions のワークフローファイルを作成する

実際のワークフローファイルは下記になります。schedule の項目で設定している内容がワークフローの実行スケジュールになります。今回は半日毎に更新が走るようにしました。

# .github/workflows/update-rss.yml
name: update rss json file

on:
  push:
    branches:
      - main  # Set a branch name to trigger deployment
  schedule:
    - cron: '0 */12 * * *' # 今回は半日に 1回のタイミングで更新するようにした

jobs:
  build:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2
        with:
          ref: main
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Use Node.js 14.10.1
        uses: actions/setup-node@v1
        with:
          node-version: 14.10.1

      - name: Install dependencies
        run: npm install

      - name: Update RSS Feeds
        run: npm run update-rss

      - name: Commit files
        run: |
          git config --local user.email "[email protected]"
          git config --local user.name "GitHub Action"
          git add static/rss.json
          STATUS=$(git status -s)
          if [ -n "$STATUS" ]; then
            git commit -m "Update rss.json `date +'%Y-%m-%d %H:%M:%S'`" -a
            git push origin main
          fi

上記ワークフローファイルをプロジェクトに追加して、リモートリポジトリにプッシュした後は、ワークフローが実行されるタイミングを待ちます。

無事にワークフローの実行が完了すると下記のようなコミットが追加されているはずです。

GitHub Actions が JSON ファイルを更新してコミットしている

コミットの詳細を見ると正常に JSON ファイルが更新されていることが確認できる

コミット後 Hugo をビルド & デプロイするとページが更新されていることを確認できる

これで Zenn や Qiita 等に記事を書いた際に、都度手動で static/rss.json を更新してページに最新の内容を反映させる作業は必要なくなりました。

(余談) RSS リーダーを Hugo の Data Templates で実装する

ちなみに Hugo には Data Templates という仕組みがあり、これを用いることで実は JavaScript を利用しなくても HTML テンプレートで RSS リーダーを実現できるということを後から知りました。

そこで最後に Data Template での RSS リーダーの実装方法について記載します。

まずは、scripts/update-rss.mjs の内容を書き換えます。

// scripts/update-rss.mjs
import { writeFileSync } from 'fs';

import pkg from 'html-to-text';
const { htmlToText } = pkg;

import Parser from 'rss-parser';
const parser = new Parser();

const rssFeed = {
    Zenn: {
        rss_url: 'https://zenn.dev/nikaera/feed',
        profile_url: 'https://zenn.dev/nikaera'
    },
    Qiita: {
        rss_url: 'https://qiita.com/nikaera/feed.atom',
        profile_url: 'https://qiita.com/nikaera'
    }
}

try {
    const jsonFeed = {}

    const spliceContent = (content) => `${htmlToText(content).slice(0, 73)}...`
    for (const [site, info] of Object.entries(rssFeed)) {
        const feed = await parser.parseURL(info.rss_url);
        const items = feed.items.map((i) => {
            console.log(i);
            return {
                title: i.title,
                content: spliceContent(i.content),
                url: i.link,
                date: i.pubDate
            }
        })
        const { rss_url, profile_url } = info
        jsonFeed[site] = { rss_url, profile_url, items };

        /*
        最終的な JSON ファイルの出力先は data フォルダとなり、RSS フィード毎に出力する
        例: ./data/Qiita.json, ./data/Zenn.json, etc.
        */
        writeFileSync(`./data/${site}.json`, JSON.stringify(jsonFeed[site]));
    }
} catch(err) {
    console.error(err);
}

上記を実行することで data/Qiita.json や data/Zenn.json にファイルが出力されます。

Hugo の Data Template を用いると data フォルダ内に配置した json, yaml, toml 形式のファイルは Go の HTML テンプレートで読み込めるようになります。

例えば、data/Qiita.json に配置された JSON ファイルを読み込みたい場合は Go のテンプレートで $Qiita := $.Site.Data.Qiita のような記述でできます。

次に RSS リーダーを埋め込んでいたページを下記のように書き換えます。







    
        Tech 🦾
    
    
        
        {{ $Zenn := $.Site.Data.Zenn }}
        
            Zenn - RSS
        
        
        
            {{- range $Zenn.items }}
            
                {{ .title }}
                {{ .date }} - {{ .content }}
                
            
            {{- end }}
        
    
    
        
        {{ $Qiita := $.Site.Data.Qiita }}
        
            Qiita - RSS
        
        
        
            {{- range $Qiita.items }}
            
                {{ .title }}
                {{ .date }} - {{ .content }}
                
            
            {{- end }}

また GitHub Actions のワークフローを用いて RSS フィードの情報を更新していた場合は、.github/workflows/update-rss.yml ファイルの更新も必要になります。

# .github/workflows/update-rss.yml
name: update rss json file

on:
  push:
    branches:
      - main  # Set a branch name to trigger deployment
  schedule:
    - cron: '0 */12 * * *'

jobs:
  build:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2
        with:
          ref: main
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Use Node.js 14.10.1
        uses: actions/setup-node@v1
        with:
          node-version: 14.10.1

      - name: Install dependencies
        run: npm install

      - name: Update RSS Feeds
        run: npm run update-rss

        # Git で追加する内容を data フォルダに変更する
        # git add static/rss.json -> git add data/
      - name: Commit files
        run: |
          git config --local user.email "[email protected]"
          git config --local user.name "GitHub Action"
          git add data/
          STATUS=$(git status -s)
          if [ -n "$STATUS" ]; then
            git commit -m "Update data folder `date +'%Y-%m-%d %H:%M:%S'`" -a
            git push origin main
          fi

これで JavaScript で作成した RSS リーダーから、Hugo の Data Templates を用いて作成した RSS リーダーへ移行できました。

おわりに

Hugo で React + TypeScript 開発を楽にできそうなことが分かり、テンションが上がってしまい、そのままのノリで実際に RSS リーダーを自ブログ向けに作成してみました。

しかし、本記事内容で RSS リーダーを実装するのであれば、Hugo の Data Templates を利用することがベストなことに後から気づきました。ただ Hugo での JavaScript を用いた開発手法が理解でき勉強になったので結果ヨシとしました。

Hugo での JavaScript 開発環境は相当充実していることが分かったので、また何かアイデアを思いついたら気軽に作って自ブログに取り込んでいきます。今はザックリ WebGL/WebVR とかで何か面白いもの作れそうだなと考えています。

参考リンク

react-autosuggestをBootstrapで使う

2020-10-09T21:07:03+09:00

react-autosuggestはReactでオートコンプリートを実装できるライブラリ。しかしこれはデザインがない。自分で作るか、多分デモのやつを使う必要があるが、Bootstrapを使っている場合はそれのDropdownをそのまま使いたい。

その場合はthemeプロパティで使うクラスを指定できる。下記のように設定すればOKっぽい

      {{
          container: 'autosuggest',
          input: 'form-control',
          suggestionsContainer: 'dropdown open',
          suggestionsList: `dropdown-menu ${items.length ? 'show' : ''}`,
          suggestion: '',
          suggestionFocused: 'active'
        }}

あとはrenderSuggestionsも調整。

const renderItem = (item: Item) => (
  
    {item.name}
  
)

下記で話題に上がっている（最初の方に古くてちゃんと動かないのもあるのでご注意）。

https://github.com/moroshko/react-autosuggest/issues/64

Recoilの書き方はこんな感じかなというイメージ

2020-09-23T21:25:57+09:00

主に細かいコンポーネントをいくつも作って開発するようなプロジェクトを進め始めたので、丁度マッチしているかなと思いReduxを使い始めていたのをやめてRecoilを使ってみました。

書いているうちにRecoilがこの仕様であればだいたいこんな感じに使っていくことになるのかな……と思ったのでなんとなく書いていきます。

まず基本的なステートの定義は下記のようです。

const textState = atom({
  key: 'textState',
  default: '',
})

key-valueのハッシュみたいなもので、keyに対して値を保存するような非常にシンプルなイメージです。

これを実際に使うとなるとこのatomなどをたくさん定義していくわけですが、基本的にRecoilが必要な場面となるとその値をコンポーネントにまたがって使用したい時になると思います。そうすると複数のコンポーネントで毎回文字列でキーを指定してステートを利用していくというのはあまり望ましくないと思います。変更にも弱いですし、単なる書き間違えも発生します。

ということで、下記のどちらかのパターンになるのではないかと思います。

カスタムフックでまとめる
定義を個別のファイルで行う

後者でも良いのですが、一つ二つしか値を使わない、というパターンもそんなになさそうに思いますのでだいたいカスタムフックでまとめる形がよくある形になるのでは、という気がしています。

カスタムフックのパターン

例えばカスタムフックの場合はこんな感じです。

import { atom, useRecoilState } from 'recoil'
import { Post, createEmptyPost } from '@/models/Post'

export type Mode = 'input' | 'confirm' | 'completed'

const modeState = atom({
  key: 'post/form/mode',
  default: 'input'
})

const postState = atom({
  key: 'post/form/post',
  default: createEmtpyPost()
})

const fileState = atom({
  key: 'post/form/file',
  default: null
})

export default function usePostForm() {
  const [mode, setMode] = useRecoilState(modeState)
  const [post, setPost] = useRecoilState(postState)
  const [file, setFile] = useRecoilState(fileState)

  return {
    mode,
    setMode,
    post,
    setPost,
    file,
    setFile,
  }
}

実際にコンポーネント上で使う時は下記のような感じです。

export default function MyComponent() {
  const { mode, post, setPost } = usePostForm()

  return (
    
      {mode === 'input' ? (
         setPost({ ...post, title: e.target.value })} />
      ) : (
        {post.title}
      )}
    
  )
}

どのコンポーネントでも同様の使い方ができますので細分化も苦にならず、シンプルに使うことができます。キーを何度も入力する必要もありません。というか、結局ReduxのStoreを定義しているようなイメージになってきますね。書き方はそれよりは簡単ですが。まあ結局どういい感じに管理するかを考えると何を使うにしろ似てくるのかもしれません。

個別に定義するパターン

さっきの例でいうと、

export type Mode = 'input' | 'confirm' | 'completed'

export const modeState = atom({
  key: 'post/form/mode',
  default: 'input'
})

のような定義をそれぞれファイルとして作り、使用する場合は

import { modeState } from '../hooks/mode_state'

export default function MyComponent() {
  const [mode, setMode] = useRecoilState(modeState)
  ：
}

という感じになると思います。これもまあ間違いは少なくて良いと思いますが、アプリケーション全体で単独で使い回すという目的が大きくなってくると思いますので、あまり利用するパターンは多くなさそうな気もします。ちょっと処理が増えるとカスタムフックにしちゃえばいいか、となってしまうと思いますし。

まとめ

雑に使おうと思えば使えますが、やはり使い方をある程度決めてまとめた方があとあと困らないかなという気がします。シンプルに使えるライブラリですが、開発が進むにつれて一体どのキーがどう使われているのか、使われているのか分からなくなってしまってぐちゃぐちゃになってしまう状況をなるべく避けるように使って行ったほうが良さそうに思いました。

ハッカソンイベントで、「2」に近い式をあてるゲームを作ってみた

2020-09-20T19:25:58+09:00

こんにちは、最近「個人開発ガリガリやって実力つけたいなー」と思っているよしです。
先日、web1week に参加してきました。
色々とてんやわんやしながらも、なんとか投稿までいけたので、レポートを残しておきますー。

はじめに

web1week の概要

「1週間でお題に沿った Web サービスを作ってみよう」というハッカソン的なイベントです。

9/7～9/13の1週間でWebサービスを作るイベントです！　Hello worldレベルのサービスでもOKですのでぜひご参加をお願いします！ #駆け出しエンジニア仲間が多い方は是非シェアもお願いします～お題は「2」です。https://t.co/cl4XbPFici
— だら🎄いろいろつくってる (@dala00) September 6, 2020

参加したきっかけ

前回も参加して楽しかったので。

前回参加の時は割と使える時間が多かった一方、今回は仕事が終わった後か休日に開発することになりました。
なので、最初はどうしようかとも思いましたが、他の参加者の皆さんの多くは同じ状況下で開発されているはずなので、まぁどうにかなるだろう...くらいの気持ちで参加してました。

※前回参加時のレポート記事
- ハッカソンイベントで、React Konva 製のジグソーパズルっぽいパズルを作ってみた

自分が作ったもの

Close to 2

今回のお題は「2」ということで、
計算結果が一番「2」に近い式をあてるゲームを作りました。
一応、スマホでも遊べます。

イベントボードへの投稿から引用。

初級、中級、上級で遊べて、難易度が高いほど長い式になり、30秒で何問正答できるかな？というゲームです。
自分で作っておいてなんですが、暗算得意じゃないと無理ゲーじゃねーかと思いました。

なんでこれを作ろうとしたのか

こちらもボードへの投稿に書いていたので引用。

元々は「２」に関するクロスワードを作ろうとしていたのですが、「２」縛りで問題を考えるのがしんどいの極みだったので変えました（しかも土曜...）
その時点ですでに投稿されていた方（特に、きらぷかさんとDE-TEIUさん）の作品を見て、シンプルなゲームでも十分面白いものが作れるんだなぁと思い、今回の作品に至りました。
（他の方の作品を参考にさせていただきましたが、丸パクリレベルになってしまわないよう気を付けたつもりです）

技術構成

最初は前回同様、Docker の Node.js コンテナを使おうとしてました。
ただ、yarn コマンドやアプリ自体の動作速度、VSCode で開発する上での環境など色々考えたらめんどくさくなったので、WSL の Node.js を使いました。
（フロント開発でわざわざDocker使う意味ある？という議論も見かけたことがあったので...）

本番は GitHub Pages でホスティングしています（gh-pages でデプロイ）

使用した主なライブラリはこちら
- React：言わずと知れたUI構築ライブラリ（create-react-app で導入）
- Material UI：UI コンポーネント集
- React Share：各種 SNS のシェアボタン集
- React Snap：SPA の OGP設定
- PropTypes：props のバリデーション
- ESLint：静的解析
- Prettier：コードフォーマッター

前回同様、基本的な UI は Material UI で構築。
一部、前回作ったコンポーネントを流用したものもあります。

どんな感じで開発してたのか

大体こんなでしたが、「8日目」があるところからわかるように、1日遅刻投稿です（苦笑）

1日目：9/7(月)

「2」というお題を目にして、何を作るか悩みました。
前回、React Konva というライブラリを使用したので、今回も何かライブラリを使おうかと Reactのライブラリを調べてました。

そこで GitHub - React Crossword という、クロスワードを作れるライブラリを見つけ、これで何かやろうかな？となりました。

2日目：9/8(火)

クロスワードで何かするのであれば問題を考える必要があります。
とりあえず環境構築だけしておこうと、この日はリポジトリ作って環境構築まで。

3日目：9/9(水)

技術構成のところで書いた通り、わざわざ Docker 環境を使うの微妙だなと思ったので WSL を使う方向へ移行。
React Crossword を試してみたかったので試してみてました。

おおー、ライブラリでホントにクロスワードできたー。（公式のサンプルコード）#web1week pic.twitter.com/4dA2snPpzC
— よし (@yoshi44_lion) September 9, 2020

4日目：9/10(木)

「2」をいろんな言語の読み方にして成立するような問題を考えてました。

5日目：9/11(金)

この日も問題を考えるも、あまり進まず...。

6日目：9/12(土)

さすがに問題をどうにかしないと...と焦り出しました（遅い）

「2」をいろんな言語の読み方にして成立するような問題を考えていたものの、思いのほか難しい
↓
これ無理じゃね？
↓
読み方でなく「2」が含まれるものに関する問題（例：2月の和風月名 → キサラギ）に移行してみる
↓
縦読み、横読みを成立させるのが難しい
↓
これ無理じゃね？

みたいな感じになった結果、クロスワードは諦めることに...。

じゃあ、何を作ろうか？というところで、すでに投稿されていた他の参加者の方の作品を見て、シンプル路線にすることにしました。
ここからやっと当作品を作り始めます。

元々、2に関するクロスワード作ろうとしてたけど、問題考えるのがしんどすぎて、他のものに切り替え中。明日、とりあえず公開できる程度になればいいなぁ。#web1week
— よし (@yoshi44_lion) September 12, 2020

7日目：9/13(日)

何とか実装が進み、一旦デプロイしてみようとなりました。
前回は Firebase Hosting を使用しましたが、今回は使うまでもないかなということで GitHub Pages にホスティングすることに。

GitHub Actions でデプロイする記事を見かけたので、それでやろうと試みるもビルドで失敗。
どうも ESLint の react-hooks/exhaustive-deps ルールに引っ掛かっていたようです（.eslintrc 設定に含まれていなくても、ビルド時にチェックされる？）

対応方法を調べて試すも、なかなか解決しなかったので、一旦は無効化で対応（あまりよくないことでしょうが...）
ビルドはパスするようになり、デプロイ自体は成功しているものの、なぜか真っ白なページしか表示されず...。

この時点でもうヘロヘロで瀕死だったので、この日は諦めて終わりました。

ゲームとしてはできてるんだけど、ESLint の新ルールにビルドを阻まれ、GitHub Pages にデプロイできる GitHub Actions 試そうとしたら、デプロイ自体は成功してるっぽいのに、URL にアクセスしても何も表示されないし。やり方悪いんかな...。もう疲れた...。一旦終わろう。 #web1week
— よし (@yoshi44_lion) September 13, 2020

8日目：9/14(月)

gh-pages を使用して手動デプロイしてみても真っ白ページに。
試しに S3 にデプロイしたら普通に動作したので、GitHub Pages の問題と切り分け。

真っ白ページの原因を特定。
GitHub Pages 特有の注意点を見落としていただけだったようです。
こちらの記事にまさしくなことが書いてありました。
- create-react-appとTypeScriptでサラッと作ったSPAをgh-pagesにスルッとデプロイすっぞ！

ただ、これでもなぜか GitHub Actions でのデプロイは真っ白
ページのままだったので、以降は手動デプロイでやるように。

GitHub Pages のデプロイで動いたー。どうも package.json に homepage キーで URL を指定する必要があったらしい。そういえば Jekyll をデプロイするうえでの注意点とかで、前に見たことあったような…。なんか URL がずれておかしくなる的な。#web1week
— よし (@yoshi44_lion) September 14, 2020

無事動作確認できたし投稿するかと思いましたが、こういうのはやはり OGP 設定や Twitter シェア機能を付けた方がいいよなぁ...ということで対応することに。
この時点でもヘロヘロ気味だったので、やっつけで対応して、日が変わる直前に何とか投稿しました。

なんとか形にできたー。計算結果が一番「２」に近い式をあてるゲームを作りました。よろしければ遊んでやってください🙏Close to 2 - （9/7～9/13）１週間でWebサービスを作るイベント - お題「2」 - Boards - Crieit https://t.co/HDSKmfCsWo #Crieit #web1week
— よし (@yoshi44_lion) September 14, 2020

おおよそどんなことをやっているのか

特に変わったことはしてないと思いますので、ソースコード見てもらった方が早いかとー。
- GitHub - close-to-2

参考にさせていただいた記事はこちらなど
- JavaScriptで要素がオブジェクトの配列を日付や数値でソートする方法
- JavaScriptで重複排除を自分で実装してはいけない（Setを使う）

課題

React Hooks のこととか、もうちょっとわかったら、全体的にもっとスマートに書けるんでしょうかね...。なんかごちゃついてる感。

OGP はやっつけで5分くらいで作りました(笑)

Twitter シェアボタンは、公式のものを SPA で使うには少し工夫がいるということで、なんかうまくいきませんでした...。
なので今回は React Share を頼りました。
本当は Twitter アイコンとともにツイートと書かれたボタンにしたかったのですが、React Share だとできないっぽい？ということで妥協することに。

今回参加してどうだったか

楽しかったですが、前回以上にてんやわんやしてたなぁと(笑)
特に最後の方。まぁ、自分が前半悠長にやってたせいなんですが。

Twitter シェアボタンを導入したおかげて、遊んでくださってる方の存在を確認することができました。
確認できるとやはり嬉しいですね！

他の方の投稿を見るのも楽しい + 勉強になりますし、こういったイベントに参加するのはいい経験になりますね。
web1week はほどよくゆるい感じの雰囲気があるので、敷居が低くて参加しやすいなと。
また開催されることがありましたら、余程忙しくない限りはなるべく参加していきたいなーと思います。

ありがとうございました！

参考リンクまとめ

ReactコンポーネントをVue.jsみたいに素のHTMLに配置する

2020-09-12T11:18:02+09:00

ReactコンポーネントをVue.jsのように、コンポーネント名のタグで呼び出す小ネタです。具体的には下記のようにするとコンポーネントの実行結果が表示されるようになります。

やり方としては下記のようなコードを利用します。anyは手抜きです。単に指定したタグ名を探して、見つかった場合はその属性を取得してコンポーネントのプロパティとして渡してrenderしているだけです。

import React from 'react'
import { render } from 'react-dom'

type Components = {
  [domId: string]: any
}

function getPropertyName(originalName: string) {
  let property = ''
  for (let i = 0; i < originalName.length; i++) {
    const c = originalName.charAt(i)
    if (c === '-') {
      i++
      property += originalName.charAt(i).toUpperCase()
    } else {
      property += c
    }
  }
  return property
}

export function startComponents(components: Components) {
  for (const id in components) {
    const component = components[id]

    const targets = document.querySelectorAll(id)
    targets.forEach(target => {
      const props: { [key: string]: any } = {}
      if (target.hasAttributes()) {
        target.attributes
        for (let i = 0; i < target.attributes.length; i++) {
          const attribute = target.attributes[i]
          if (attribute.name.charAt(0) === ':') {
            props[getPropertyName(attribute.name.substring(1))] = JSON.parse(
              attribute.value
            )
          } else {
            props[getPropertyName(attribute.name)] = attribute.value
          }
        }
      }

      render(React.createElement(component, props), target)
    })
  }
}

ここのコツとして、属性は大文字小文字が関係ないようなので、キャメルケースのプロパティ名を使いたい時はこれもVue.jsと同様にハイフンを利用します。そのための変換処理も入れています。

例えばさっきのコンポーネントを使う場合は下記のように初期化します。

import MyComponent from './components/MyComponent'

startComponents({
  'my-component': MyComponent
})

これでHTML上に簡単にReactコンポーネントを表示できるようになりました。まあガッツリちゃんとやろうと思うと支障が出てくる箇所も出てくる可能性はありますので、あくまでもちょっとした手抜き対応です。

A-FrameでVR選手ロッカーを作ってみた話

2020-09-01T23:08:37+09:00

①NextJSでaframe-reactを動かす

aframe-react

ReactJSでAFrameを動かすときはこれ。
aframe-react

NextJSは一部SSR(サーバサイドレンダリング)が走るので、クライアントで動作する状態になってからロードする必要がある。
参考: aframe-next-static

windowというグローバル変数が使えるようになればクライアント側で動作する状態なので、レンダリング完了フラグで管理する。

if (typeof window !== "undefined") {
      require("aframe");
      setRendered(true);
    }

②aframe-reactで書いてみる

aframeは配置するものが多いと意外とソースが長くなるので、
1個のLockerを構成する単位でコンポーネント化しました。
選手の情報をAPIから取得して、奇数と偶数の場合で振り分けています。

if (!rendered || !teamMembers) {
    return <>;
  }
return (
    
      {teamMembers.map((member,idx)=>(
        <>
        {idx%2 === 0
          ?
          :
        }
        
      ))}
      
      
    
  );

a-skyは背景、cameraはカメラの初期位置を定義しています。

これがRightLockerのソースです。
プログラム的に難しいことはないのですが、
座標や光源の調整などが結構面倒でした。
(..planeって光透過すんの？)

import { Entity } from "aframe-react";
import { Player } from "../../model/typedef";

type diff={
    x:number,
    y:number,
    z:number,
    rot_x:number,
    rot_y:number,
    rot_z:number,
    member:Player
}

const RightLocker:React.FC = ({x,y,z,rot_x,rot_y,rot_z,member}) => {
  return (
    <>
    {{ primitive: "plane", width:1, height:2}}
      material={{ src: "/images/wood.jpg",alphaTest:0.1 }}
      position={{ x: x+0.7, y: y, z: z-4.3}}
      rotation={{ x: rot_x, y: -135+rot_y, z: rot_z }}
    />
    {{ primitive: "plane", width:1, height:2}}
      material={{ src: "/images/wood.jpg", transparent:false}}
      position={{ x: x+0.7, y: y, z: z-5 }}
      rotation={{ x: rot_x, y: rot_y-45, z: rot_z }}
    />
    {{ primitive: "plane", width:1, height:2}}
      material={{ src: "/images/wood.jpg"}}
      position={{ x: x, y: y, z: z-4.3 }}
      rotation={{ x: rot_x, y: rot_y-45, z: rot_z }}
    />
    {{ primitive: "box", width:0.5, height:0.3}}
      material={{ color:'gray' }}
      position={{ x: x+0.5, y: y-1, z: z-4.5 }}
      rotation={{ x: rot_x, y: rot_y-45, z: rot_z }}
    />
    {{ primitive: "plane", width:1, height:2}}
      material={{ src: member.ogp_image}}
      position={{ x: x+0.7, y: y, z: z-4.3}}
      rotation={{ x: rot_x, y: -135+rot_y, z: rot_z }}
    />
    {{type:"spot"}}
        material={{color:'yellow'}}
        position={{ x: x+0.3, y: y+1.3, z: z-4.5 }}
        rotation={{ x: rot_x-90, y: rot_y-10, z: rot_z-10 }}
    />
    
    );
};
export default RightLocker;

DEMO

まだ本サイトにはデプロイしていませんが、team/[チームID]/vr_lockerで各チームのVRロッカーを見ることができます。
- キャップ野球情報局・VRロッカー

GitHub OAuth Appのトークンを取得失敗した

2020-08-30T22:58:17+09:00

access tokenはクライアント側から取得できない

やりたかったこと

GitHubをJSONデータベース代わりに使いたかった. GitHub APIを使うとGitHubをREST APIから操作できるので, これにフロント付けたら簡易なデータベースを作れるのではと思ったわけです. これは結局Cross-Origin Request Blockedでできないことが分かりました.

忘れちゃうのもあれなので概要をメモしておきます.

環境

以下のパケージを利用しました.

またreact-adminで認可するロジックは以下を参考にしました.

ra-example-oauth

OAuth Applicationの作成

Creating an OAuth Appを参考にしましょう.

作成されたGitHub OAuth Appには固有の値であるclient idとclient secretが付与されるます.

Auth Provider

react-adminで認証や認可を行うにはauth providerにロジックを書きます.

const authProvider = {
    login: params => Promise.resolve(),
    logout: params => Promise.resolve(),
    checkAuth: params => Promise.resolve(),
    checkError: error => Promise.resolve(),
    getPermissions: params => Promise.resolve(),
};

取得したトークンはローカルストレージに保存します. checkAuthではこのトークンがすでに設定されているかを確認し, 無ければログイン画面が表示されます.

checkAuth: () => {
    const user_name = localStorage.getItem('username');
    console.log(`checkAuth: ${user_name}`)
    return localStorage.getItem('username')
        ? Promise.resolve()
        : Promise.reject();
},

ログイン画面では２つの処理を行います. まず認可ページで認可を行います. 認可後はAuthorization callback URLに指定したページに戻ってくるのですが, この際codeというURLパラメータが付与されます. これとclient id, client secretを使ってトークンを取得します. stateは任意ですが一応付けてます.

import { createOAuthAppAuth } from '@octokit/auth-oauth-app';

const authorizeURL = new URL('oauth/authorize', process.env.login_url);
authorizeURL.searchParams.append('client_id', process.env.client_id);
authorizeURL.searchParams.append('scope', 'public_repo');
authorizeURL.searchParams.append('state', 'QAbgG6f9Rit2C5');

const auth = createOAuthAppAuth({
    clientId: process.env.client_id,
    clientSecret: process.env.client_secret,
});

login: async (params) => {
    const { searchParams } = new URL(window.location.href);

    if (!searchParams.has('code') || !searchParams.has('state')) {
        redirectToURL(authorizeURL)
        return Promise.resolve();
    }

    const code = searchParams.get('code');
    const state = searchParams.get('state');

    const tokenAuthentication = await auth({
        type: 'token',
        code: code,
        state: state,
    });

    const { token } = tokenAuthentication;

     localStorage.setItem('username', token);

    return Promise.resolve();
},

ところがauthでtokenを取得しようとすると失敗します. リバース・プロキシを設置してやるといけるようですが, 試してません.

OAuth Github web flow doesn't support CORS

補足

Next.jsとreact-adminを使うとDocument is not definedというエラーが出ます. hisotryというパッケージが内部でDOM APIを利用しているのですがNext.jsは最初ローカル側(サーバー側)で動くのでこの時点ではDOMが存在しません. クライアント側かどうか調べる必要があります. getStaticPropsはロカールで実行され, ファイルなどを取得してpropsとしてページ・コンポーネントに渡すことができます. この処理が終了するとブラウザ側の処理に移ることを利用するとコンポーネントを切り替えることができるようです.

How to prevent parent component from re-rendering with React (next.js) SSR two-pass rendering?

Semantic UI ReactのForm.Inputとはなんなのか

2020-07-05T23:38:19+09:00

Semantic UI React を使っていて Input と Form.Input の違いがよくわかっていなかったので、ちゃんと調べてみました。

バージョンは次のとおりです。

React: 16.13.1
Semantic UI React: 0.88.2

はじめに

リファレンスで Form.Input を選択すると書かれている通り、 Form.Input はのシンタックスシュガーです。

Sugar for .

さらに From.Field の項目を読むと、次のように書かれています。

A field is a form element containing a label and an input.

しかし、バリデーションエラー用のLabelも重要な役割を担っているので、 From.Field は次の3つを含む複合コンポーネントだと捉えた方が良いでしょう ¹ 。

項目名を表すlabel
メインの入力欄であるInput
バリデーションエラー用のLabel

さて、 Form.Field の中身を記述する方法は、大きく分けて次の2つがあります。

control を指定する方法（ Form.Input を使ったときに発生）
children （子要素）を指定する方法

個人的には後者の方が暗黙的な挙動が少なくて好きですが、前者の方が記述は楽です。
この記事では、同じDOM構造を実現するための2種類の書き方を比較することで、 Form.Input を使った場合に行われることを理解します。

2種類の記述方法を比較する

ここでは次の2つの記述方法でほぼ同じDOM構造を実現します。

Form.Input のみを使う
Form.Field の子要素に Input を含める

ソースコードは次の通りです。

import React, { useState } from "react";
import { Form, Input, Label } from "semantic-ui-react";

const FormExampleFieldError = () => {
  const [firstName, setFirstName] = useState("");
  const handleChange = e => {
    setFirstName(e.target.value);
  };
  const error = firstName === "" ? "First name is required" : undefined;

  return (
    
      {/* 1. Form.Inputのみを使う */}
      

      {/* 2. Form.Fieldの子要素にInputを含める */}
      
        First name
        
        {error && (
          
            {error}
          
        )}
      
    
  );
};

export default FormExampleFieldError;

レンダリング結果: エラー無しの場合

エラーが無い場合、レンダリング結果は次のようになりました。同等のDOM構造になっていることがわかります。なお aria-invalid="false" はデフォルト値なので、属性が無いのと同じ意味です。


    
    First name
        
    

    
    First name

レンダリング結果: エラー有りの場合

エラーが有る場合、レンダリング結果は次のようになりました。こちらも同等のDOM構造になっています。 Form.Input を使うと、 aria-invalid や aria-describedby などのアクセシビリティ関連の属性が自動で追加されていることがわかります。


    
    First name
        
        
            First name is required
    

    
    First name
        
        
            First name is required

まとめ

Semantic UI Reactでは、 Form.Input を使うことで、少ない記述で次の3要素を持つ入力欄を作成できます。

項目名を表すlabel
メインの入力欄であるInput
バリデーションエラー用のLabel

特にバリデーションエラーの表示は自前で記述するとそれなりに大変なので、積極的に使っていきたいです。

参考

Form.Fieldのソースコード

おまけ: 子要素にinputを含めた場合

リファレンスに書かれているように、 Form.Field には Input の代わりに、HTMLの input 要素を含めることもできます。この場合、若干異なるDOM構造が生成されるものの、見た目は同じになりました。DOM構造の差異は、inputが

によって囲まれない点だけです。

ソース

      {/* 3. Form.Fieldの子要素にhtmlのinputを含める */}
      
        First name
        
        {error && (
          
            {error}
          
        )}

レンダリング結果: エラー無しの場合

    
    First name

レンダリング結果: エラー有りの場合

    
    First name
        
            First name is required

エラーの有無にかかわらず、見た目では区別がつきません。

Material UIの TextField と同じようなイメージです。 ↩︎

NextJSでマークダウンエディタを扱う際の注意点

2020-06-07T23:44:07+09:00

SSR(サーバサイドレンダリング)の影響

draft.jsやtui-editorに共通して言えることですが、
元々ブラウザでの動作を想定して作られているので、
NextJSなどのSSR環境下ではwindow、documentなどの変数の中身がundefinedになり、動作しなくなります。

Next.JSではSSRを無効にできる

With no SSR

インポート方法を変えることでSSRを無効にできるオプションがあります。
dynamic import自体はES2020で導入される構文だとか。

const DraftEditorNoSSR = dynamic(
  () => import('../components/DraftEditor') as any,
  { ssr: false }
)

Draft.jsを断念した理由

draft.jsでは再描画した際にカーソルが行の先頭に戻るというバグがあります。
公式リポジトリでは行の最後に移動する対処も議論されていますが、文章の中で編集したくなったらどうするんだ....という声もちらほら。

How to stop DraftJS cursor jumping to beginning of text?

さっさと見切りをつけてToastUI editorに移りました。
そうです、crieitにも採用されているエディタですね。

Toast UI Editorで実装できた!

ただし、Toast UI Editorはrefを使わないと値が取れず、
マウントされていない状態でrefがnullになってしまうことにかなり苦しめられました。

changeイベントがeditorで発火するのでフラグを更新するようにして、外側でrefを使ってデータを取り出すという実装になりました。
それから、画像アップロードをdisabledにしました。

editorコンポーネントを使いまわしたかったので、
表示用の初期値initialValueと値を更新して外部に渡すsetFuncをpropsとして与えています。

const DraftEditor = ({ initialValue, setFunc }) => {
  const editorRef = createRef();
  const [changed, setChanged] = useState(false);

  useEffect(() => {
    if (editorRef.current && changed) {
      setFunc(editorRef.current.getInstance().getMarkdown());
      console.log("set");
      setChanged(false);
    }
  }, [editorRef.current, changed]);

  return (
    {{
        width: "100vw",
      }}
    >
      
        {{
            change: (e) => {
              setChanged(true);
            },
          }}
        />
      
    
  );
};

export default DraftEditor;

export type DraftEditorProp = {
  initialValue: string;
  setFunc: Dispatch;
};

ハッカソンイベントで、React Konva製のジグソーパズルっぽいパズルを作ってみた

2020-05-29T13:19:06+09:00

個人開発って何作るか悩んだり、モチベを保つのが難しかったりしますよね。
そんな自分が、先日web1weekというイベントで個人開発にチャレンジしました。
何とかリリースまでできたので、使用した技術やどんなことをやったのかといった内容を残しておきます。

はじめに

web1weekって？

簡単に言うと「1週間でお題に沿ったWebサービスを作ってみよう」というイベントです。
当コミュニティ Crieit の運営者である、だらさん主催で行われました。

5/18～5/24の1週間でWebサービスを作るイベントです！　Hello worldレベルのサービスでもOKですのでぜひご参加をお願いします！ #駆け出しエンジニア仲間が多い方は是非シェアもお願いします～お題は「Like」です。 https://t.co/ORZQGb6Yu2 #Crieit #web1week #StayHome
— だら🎄サービスづくりひたすら (@dala00) May 17, 2020

参加しようと思ったきっかけ

主な背景としては
- 個人開発に使える時間があった
- 前回の開催時も面白そうと気になっていた（今回は2回目の開催）
- 個人開発をやってみたかった（+こういったイベントならモチベも保てるかなと思った）
といった感じです。

個人開発は以前からやりたいと思うことはありつつ、結局モチベが続かなくて止めてしまったりということが多かったのです...。
もし何か作ることができたら、1つの実績にできて自分の財産になるかなーと思いました。

これは...やるしかない。

ということで参加。

自分が作ったもの

Jigsaw Like Puzzle

ちょっとしたパズルを作りました。
PC向け。スマホ対応は現状してません。

なんでパズル？

イベント記事への投稿にも書いていたので引用します。

「Like」ということで
好きなもの → 趣味とかかな？ → 絵を描くこと（最近全然描いてないけど） → Canvasでお絵描き実装ができるらしい → でも、ただ絵を描くだけじゃつまらない → もしかしてジグソーパズル作れそう？といった感じで行きつきました。

ジグソーパズル特有の形は再現できてないので、あくまで「ジグソーパズルっぽいもの」ですね。
完全に後付け理由ですが、Like って「～ようなもの」って意味もありますし、意図せずテーマに沿ったものになりました（笑）
こんなことあるんですねー。

構成

構成図描こうかなとも思ったんですが、大した構成でもないのでざっくり文面で書きます。

開発はDockerのNode.jsコンテナで。
本番はFirebase Hostingでホスティングしています。

使用した主なライブラリはこちら（正確には他にもあります）
- React：言わずと知れたUI構築ライブラリ（create-react-appで導入）
- React Konva：Canvasを扱うライブラリであるKonva.jsのReact版
- React Router：ルーティング
- Material UI：UIコンポーネント集
- PropTypes：propsのバリデーション
- ESLint：静的解析
- Prettier：コードフォーマッター

基本的なUIはMaterial UIで構築しました。
Boxコンポーネントがすごい便利でしたね。おかげであまりCSSを書かずにすみました。divがその分増えましたが。
パズル部分はReact Konvaで構築しています。

React KonvaとFirebaseについては初めて使ったので、まだまだちゃんとわかってないことも多いです。

どんな感じで開発してたのか

ざっくりこんな感じでした。

1日目：5/18(月)

お題に沿って何を作るか案がなかなか出てこなかったです。
React Konvaに行きついてからドキュメントをひたすら読んで、夕方くらいにやっとパズルいけるかも？ってなりました。

2日目：5/19(火)

午後からやっと手元の環境で動かしてみました。
色々試してみて、なんとなくいけそうかな？という手ごたえがありました。

パズルっぽいものを作成チャレンジ。 #web1week pic.twitter.com/JL4D2noURE
— よし (@yoshi44_lion) May 19, 2020

ただ、そこからパズルの元となる画像の適切なサイズ割り出しに時間かかりました...。3パターンできれいに割れて、適度な大きさのサイズがいいよねってなりまして。

3日目：5/20(水)

ようやく画像サイズを決定。

720 * 480
初級：120 * 120 → 6 * 4 = 24
中級：80 * 80 → 9 * 6 = 54
上級：60 * 60 → 12 * 8 = 96

その後、ストップウォッチの実装をどうやるかめっちゃ悩みました...。
記事を参考にしながら試すも、うまくいかずドはまり。
時間かかりつつも一応実装できました。

この時点でいまだにリポジトリを作っていなかったので、とりあえず作成だけ。

4日目：5/21(木)

ルーティングやOGP、画像の取り扱いをどうしようか悩みました。
結果的には、最低限遊べるレベルのリリースができればいいやということで、一旦は妥協することにしました。

午後からやっとプロジェクトのセットアップ。
Issueやプルリクのテンプレ、Dockerで開発環境構築ともろもろ必要な準備を整えました。

ピース位置チェック（正解位置に置かれたらはまる）のやり方がなんとなくわかって、よーし作っていくぞーという流れへ。

5日目：5/22(金)

パズル画面に背景テクスチャをいれようとしましたが、迷ったので結局止めました。

黙々と進めて、ぼんやりとしたイメージで作っていった画面のモックがおおよそできました。

やっとモック的なものができた #web1week pic.twitter.com/r9GK4fwEuM
— よし (@yoshi44_lion) May 22, 2020

モックに続いて、難易度選択モーダル、ピース生成ロジックを作成。

6日目：5/23(土)

ポーズモーダル、クリアモーダルを作成。

ここまでで、とりあえず最低限遊べることは確認できたのでリリースすることに。
コンポーネントを多少分けてはいましたが、ファイル分割とか全然できてなかったので、そこまでリファクタやってからリリースするかとも考えたのですが、もうやっちゃえとなりました。

ホスティングに関しては、多少慣れてるNetlifyでやる手もあるなと思いました。
ただ、今後機能拡張していくとしたらFirebaseの方が色々やれてよさそうと思い、こちらにすることにしました。

リリース（v0.1.0）して投稿。
リリースと言いつつ、色々と足りてないものがまだあるのでプレリリースみたいなものですね。

パズルリリースしましたー。 https://t.co/028WAbS7W9 よかったら遊んでみてください。 PC向け。簡易的なものなので、クオリティはご容赦ください🙏（5/18～5/24）１週間でWebサービスを作るイベント - お題「Like」 - Boards の投稿 - Crieit https://t.co/FldwX4odRN #Crieit #web1week #StayHome
— よし (@yoshi44_lion) May 23, 2020

おおよそどんなことをやっているのか

ソースコードはリファクタやったりして変わる可能性があるので、リポジトリ見ていただいた方が確実かもしれません（あまりきれいなコードではないですが...）
一応、Issue書いたりしながら進めました。
- GitHub - jigsaw-like-puzzle

以下の内容は執筆時点（v0.1.4）での実装のものとなります。
有識者の方からすると、この実装イケてないとかあると思いますがご容赦ください。

ストップウォッチ

概要

setInterval()とclearInterval()を使って実装。
恥ずかしながら自分はこの関数を使用したことがなかったこともあり、最初はストップウォッチってどうやって実装したらいいんだろう？という状態でした。

実装のやり方についてはこちらの記事をとても参考にさせていただきました。
- 【1から始めるReact】ストップウォッチを作る

1秒ごとに秒数カウントを+1して、その秒数カウントをもとに時、分、秒を計算して更新していくというものです。

問題点

同画面で開始と停止を行う上では問題なかったのですが、今回の場合は
- パズル画面の「一時停止」ボタンを押す → ストップウォッチを停止してポーズモーダルを開く
- ポーズモーダルの「復帰」ボタンを押す → ポーズモーダルを閉じて、ストップウォッチ再開

という仕様だったので、再開時に時間が最初からになってしまう問題が起きました。

秒数カウントはstateで管理してない変数だったので、再レンダリング時に値がリセットされていたんだろうなと。
そのため、秒数カウントの値をバックアップを取っておく感じでstateでも保持するようにしました。
1秒ごとの更新処理の際に、秒数カウント（変数）が0 だったらstateを確認して、バックアップがあればそこから復元するイメージです。

秒数カウントを最初からstateで管理すればいいのでは？となるかもしれませんが、stateでやるとうまく動いてくれなかったので、こういった形をとりました。

パズル

概要

React Konvaで実装していますが、その実体はCanvasです。
Canvasを扱うKonva.jsというライブラリがあり、そのReact版だそうです。

Canvasを扱うにはKonva.jsが便利らしいみたいな記事は複数見かけたんですが、自分はCanvas自体を使ったことがなかったため、いまいちピンとこず...。
なので、最初はひたすらドキュメントを読んで、おおよそどんなことができるものなのかを見ていきました。
その結果、パズルいけそうだなという目途がついたので使ってみたという背景があります。

Konva.jsの構造としては、以下のようになっています（公式より引用）

Shapeは複数種類があり
- Rect（長方形）
- Circle（円）
- Ellipse（楕円）
- Line（線）
- Image（画像）
- Text（テキスト）
- Star（星）

などがあてはまります。

これらは上位の要素を基準とした x、y座標であったり、横幅、縦幅、色、影などを指定することで、Canvasに描画をしていけるようになっています。

パズルの元画像

Imageコンポーネントを使用。
普通に画像パスを渡すのではダメらしく、use-imageライブラリのuseImageフックを使って生成した、DOM画像を渡すようにしています。
- GitHub - use-image

ちなみにピース数の計算との兼ね合いで、画像サイズおよびこのImageコンポーネントのサイズは 720 * 480 で固定しています。

パズルの額縁

Lineコンポーネントを使用。
4つの点の座標を指定して繋ぐことで図形を描画。これを上下左右で4つ作成しています。
ただの塗りつぶしだと安っぽくなるので、グラデーション指定にしてみました。

パズルのピース

Imageコンポーネントを使用。
useImageフックによる DOM 画像を渡しているのは同様ですが、cropを指定することで画像の切り抜きをしています。

例として初級の場合であれば、ピースサイズは 120 * 120 なので
1行目
- {x:0 y:0 width:120 height:120}
- {x:120 y:0 width:120 height:120}
- {x:240 y:0 width:120 height:120}
.
.
.

2行目
- {x:0 y:120 width:120 height:120}
- {x:120 y:120 width:120 height:120}
- {x:240 y:120 width:120 height:120}
.
.
.

みたいな感じです。
合わせてコンポーネント自体のサイズも 120 * 120 を指定になります。

draggableを有効化してドラッグアンドドロップができるように。
そのうえ、onDragStartとonDragEndでイベント処理を実装しています。

ピースドラッグ時の挙動

scaleを変えて、少しだけピースが大きくなるようになっています。
（公式デモのコードそのまま持ってきた感じです）

それに加えて、ドラッグしているピースが必ず最前面に来るような処理をしています。
Canvas要素は、あとに定義したものが前面に来るようになっているようです。
そのため、この処理をやらないと場合によっては、はめ込まれたピースの背面にドラッグ中のピースが隠れてしまい操作不能になってしまうことがあります。
そんなことなったら一気に萎えちゃいますよね。

ピースドロップ時の挙動

scaleを元に戻します。durationも設定してるので、ポヨンと大きさが戻るような見た目になってます。
（これも公式デモのコードをそのまま持ってきた感じです）

加えて、ドロップされた座標と正解位置の座標を比較。
誤差の範囲内であれば、draggableを無効 + ピースの座標を正解位置の座標に更新することで、ピースがはめこまれるような挙動を実現しています。
この処理はこちらの公式デモを参考にしました。
- Konva.js - Animals on the Beach Game

ゲームの流れ

これまでの内容を踏まえて、ゲームの流れとしてはおおまかにこんな感じです。
（並列で処理しているところもあります）

難易度選択
↓
難易度に応じたピース数（縦、横）、ピースサイズの値をセット
↓
この3つの値の変更を検知して、初期化ロジック実行
ピースの情報を持ったオブジェクトの配列を生成後、その順番をシャッフル
↓
ピースの情報を持ったオブジェクトの配列をもとにピースのコンポーネントが描画される
↓
ゲーム開始（ストップウォッチ開始）
↓
ピースのドラッグアンドドロップ
ドロップ座標が正解位置の座標の誤差範囲であればはめこまれ、正解ピース数が+1される
（これを全てのピースがはめ込まれるまで繰り返す）
↓
正解ピース数の値の変更を検知して、総ピース数と一致すればクリア（ストップウォッチ停止）

今回参加してみてどうだったか

楽しかったです！ただ、疲れました（笑）
お題があったとはいえ、ほぼ一から自分で考えて作る必要があったので、普段よりもいっぱい頭使ったからかなと思います。

とはいえ、個人開発として無事にリリースまでできたのはこれが初めてなので素直に嬉しいですね。
他の方の投稿を見るのも楽しいですし、学ばせていただく機会にもなりました。
こういった機会を設けてくださり、ありがとうございました！

ちょっとしたレポート記事を書くつもりがすっかり長くなってしまいました...。
ここまで読んでくださった方、ありがとうございます！

パズルの方は今後も合間を見つけて改修していこうかなと思ってます。
ちなみに最初に導入したGoogle Analyticsがちゃんと動いておらず、投稿時のアクセス数を見られなかったというヘマをやらかしていましたが、修正して現在は無事に動いてます（冷や汗）

もしお暇な時があれば、パズル部屋を覗いてみてください。

参考リンクまとめ

アニメのレコメンドサービス、NextJS化しました。

2020-05-16T23:29:13+09:00

先週アニメのレコメンドサービスを作ったばかりなのですが、
業務でNext.jsとReact hooksが必要になり、
勉強がてらソースコードの少ないものをリメイクしてみました。

サービスのURL

Annictさじぇすと!

Next.js

Next.jsはReactJSを用いたフレームワークです。
Next.jsの環境構築【これからはじめるNext.js】

Next.jsのメリットとしては読み込むファイルが軽量になった分パフォーマンスが向上することでしょうか。

環境構築

今回環境構築の参考にしたのはこちら

(プロジェクトルート)
　├ components (コンポーネント類)
　├ context (React contextを格納するフォルダ)
　├ hooks　(React hooksを格納するフォルダ)
　├ lib
　│　└ gtag.js　(analytics)
　├ pages
　│　├ _app.tsx　(レイアウト)
　│　├ _document.tsx　(index.htmlに相当)
　│　├ index.tsx
　│　└ works
　│　　　└ [id].tsx　(idは可変なのでdynamic routes)
　├ public
　│　└ images
　└ styles　(CSS)

pages

ファイルシステムの構造がそのままWEBシステムのパスになります。
例外として、_app.tsxと_document.tsxがあります。

_app.tsx

レイアウトを担当。

const App = ({Component,pageProps}:AppProps) => {
    Router.events.on('routeChangeComplete', url => gtag.pageview(url));
    return(
        
            
                
            
        
    );
}

_document.tsx

いわゆるindex.htmlに相当。
あれ、これclass構文だったわ。（コピペ）

class MyDocument extends Document {
  render() {
    return(
      
        
        　
        
        
        
        
        
      
      )
  }
}

export default MyDocument;

index.tsx

export interface Work{
      image:{
        recommendedImageUrl:string
      },
      twitterUsername:string,
      annictId:number,
      watchersCount:number,
      title:string,
      seasonYear:string,
      seasonName:string,
      wikipediaUrl:string,
      syobocalTid:string
  }


const Index:NextPage = () => {
    const [pageNum,setPageNum] = useState(1);
    const [data,setData] = useState();
    const store = useContext(storeContext);

    useEffect(() => {
      const f = async()=>{
        let resData;
        if(store.query.length === 0){
          resData = await fetchSeasonWorks(store.seasonName);
        }else{
          resData = await fetchByTitle(store.query);
        }
        setData(resData);
        console.log(resData);
      }
      f();
    },[store.seasonName,store.query]);

    const myRef = useRef(null);

    ....

hooks

hooksを格納する....はずなのですが、ビューとロジック分離するの失敗してるので
またどこかで使うでしょう(笑)

context

今回はreduxの代わりにcontextで全体の状態を管理します。
【React + Typescript】useContext の値を子コンポーネントから更新

type StoreContext = {
  seasonName: string;
  query:string;
  setSeasonName: (seasonName: string) => void;
  setQuery: (query: string) => void;
};

const defaultContext: StoreContext = {
  seasonName: CURRENT_SEASON,
  query:'',
  setSeasonName: () => {},
  setQuery: () => {},
};

export const storeContext = createContext(defaultContext);

export const useSeasonName = (): StoreContext => {
  // state名はThemeContext typeのプロパティに合わせる。
  const [seasonName, setSeason] = useState(CURRENT_SEASON);
  const [query, setQ] = useState('');
  // 関数名はThemeContext typeのプロパティに合わせる。
  const setSeasonName = useCallback((current: string): void => {
    setSeason(current);
  }, []);
  const setQuery = useCallback((current: string): void => {
    setQ(current);
  }, []);
  return {
    seasonName,
    query,
    setSeasonName,
    setQuery
  };
};

個々のコンポーネントでも状態を持っています。

gtag

Next.jsでGoogle Analyticsを適用する

lintに苦戦...

がっつりtypescriptを書いていたわけではなかったので、
nextjsはなかなかビルドを通してくれませんでした。
ParsedUrlQuery typings should allow undefined values

function isString(value: unknown): value is string {
      return typeof value === "string"
    }
    const id = isString(router.query.id) ? router.query.id : ""
    useEffect(()=>{
      const f = async () => {
        if(router !== undefined && router.query !== undefined){
          const resData = await fetchByWorkId(id);
          setData(resData);
        }
      }
      f();
    },[router.query]);

netlifyにデプロイ

netlify.tomlに必要なルーティングを記述します。

[build]
  base = "/"

  # next exportの出力先
  publish = "out/"

  # next buildからのnext exportでファイル生成
  command = "yarn run build && yarn run export"

[context.production]
  command = "NODE_ENV=production yarn run build && yarn run export"

[[redirects]]
  from = "/"
  to = "/index.html"
  status = 200
[[redirects]]
  from = "/works/*"
  to = "/works/[id].html"
  status = 200

アニメのレコメンドサービスを作りました。

2020-05-08T19:25:38+09:00

サービスURL

https://annict-suggest.netlify.app/

アニメの類似性をどう計算するか

コサイン類似度

人工知能を使わずにアニメのレコメンドサービスを作ろうと思ったのがきっかけです。
ユークリッド距離は触ったことがあるので、他の指標としてコサイン類似度が面白そうだと思いました。
ユークリッド距離は2点間の距離、コサイン類似度は2点のベクトル同士の角度です。

使った指標

約3300の作品に対して「見た」「見てない」のベクトルを作ってコサイン類似度を算出しようとしました。
「あにこれ」のように成分分析されているタグの類似度を計算するのもありだと思いました。

挫折

導入は比較的楽なように思えたのですが、計算量が尋常ではありませんでした。事前にフィルタリングを何もかけていなかったため、3300レコードx3300レコードの計算をしようとしていて、あまりに時間がかかるので諦めました。

アイテムの類似性について考察してみる

結局SQL

例:ID4342の作品を見たユーザを抽出して、
それらのユーザが他に見た作品のうち共通している人数が多い順に30件を取得する。

select 
    sum(st2.watch_status) as count,
    st2.work_id,
    w.title
from status st2
-- ID:4342の作品を見たユーザを取得
inner join (
    select 
        st.user_id 
    from status st
    where st.work_id = 4342
 )st3
on st2.user_id = st3.user_id
inner join works w
on w.annict_id = st2.work_id
-- 作品自身を除く
where st2.work_id != 4342
group by st2.work_id
order by count desc
limit 30

今回使った技術

GraphQL(Annict API)
ReactJS
NodeJS(TypeScript)
twitterAPI
netlify

データの棲み分け

最新のデータが欲しい場合はAnnictAPI(GraphQL)、分析データが欲しい場合はDBから読み込み、というようにデータの棲み分けを行っています。

GraphQLでエイリアスを使う

Annict API
ユーザが見たアニメと見ているアニメ両方が欲しい場合、
エイリアスを使うと複数条件が記述できる。

query {
      user(username:"${username}"){
       annictId,
       works(state:WATCHED){
         nodes{
           annictId
           title
         }
       }
      ing:works(state:WATCHING){
         nodes{
           annictId
           title
         }
       }
      }
    }

CSP(コンテンツセキュリティポリシー)

アニメのOGPがない場合は公式twitterアカウントの画像を使用しているが、CSPなどで同じサイトでないコンテンツは表示できなくなったので、
URLに「twitter」が含まれる場合はサーバにプロキシさせて画像を読み込むようにした。

ご意見

こちらから使ってみた感想・ご意見をお寄せください。