Honmushi blog

MagicaVoxel を起動したところ真っ暗で動作しない件の対応

Wed, 02 Aug 2023 00:00:00 GMT

「ボクセルアート」なるものを始めてみようと思い、「MagicaVoxel」というアプリをインストールして初めてみました。

いきなり、アプリを起動しても真っ暗なウィンドウが表示されて動かない現象に遭遇しましたので、その時の解消方法を記録しておきます。

結論

アプリケーションディレクトリに移動して、.appファイルを一度取り出し、元に戻すことで、現象が解決できました。

インストールの手順

利用している環境は MacOS Monterey 12.6.3 です。

ダウンロード

以下のページからダウンロードします。

https://ephtracy.github.io/

ページ内 Download の先で利用している OS に対応したバージョンが見つかりませんでした。

その場合、Previous Versions から以前のバージョンのアプリケーションで OS に対応しているバージョンを探してダウンロードしましょう。

圧縮されているので解凍

ダウンロードすると「MagicaVoxel-0.99.6.2-macos-10.15.zip」というファイルになっています。 zip 圧縮されているので解凍します。

「このソフトウェアは開けません。」というメッセージが出て開けない

解凍したディレクトリの中に、MagicaVoxel.app というファイルがあるのでそれをクリックすれば起動できます。しかし、以下のようなメッセージがでて実行できませんでした。OK ボタンを押すと閉じてしまいます。

“MagicaVoxel.app”が悪質なソフトウェアかどうかをAppleでは確認できないため、このソフトウェアは開けません。

MagiczVoxel.app に対して ctrl キーを押しながらクリックするか右クリックをして、メニューを表示して「開く」を選択して実行します。

そうすると、上記と同じメッセージが表示されますが、今回は開くボタンを押すことで起動できます。

真っ暗なままで動かない現象が発生

私の環境では、上記まででアプリは立ち上がったのですが、ウィンドウの中が真っ暗でアプリは動きませんでした。

対応

上記現象の解決方法がありました。以下の手順でアプリの場所を変更すると起動できるようになりました。

解凍したディレクトリをアプリケーションディレクトリへ移動する
たとえば私のバージョンでは、解凍したディレクトリは「MagicaVoxel-0.99.6.2-macos-10.15」という名前です。これをアプリケーションのディレクトリへ移動します。ダウンロードディレクトリからドラッグドロップでアプリケーションへ移動しましょう。以下のようになります。

Applications/MagicaVoxel-0.99.6.2-macos-10.15/

.app ファイルを取り出す
上記の解凍したディレクトリの中にアプリケーションファイル「MagiczVoxel.app」があります。これを一度ディレクトリから取り出し、アプリケーション直下に移動します。
```
Applications/MagicaVoxel-0.99.6.2-macos-10.15/MagicaVoxel.app
これを以下に移動する。
Applications/MagicaVoxel.app
```
.app ファイルを元に戻す
で、そのファイルを元のディレクトに戻します。アプリケーション直下から、もとのディレクトリ内に移動します。
```
Applications/MagicaVoxel.app
これを以下に戻す。
Applications/MagicaVoxel-0.99.6.2-macos-10.15/MagicaVoxel.app
```

意味があるのかわかりませんが、これで正しく起動できるようになりました。

結論

意気揚々と MagicaVoxel を使ってボクセルアートを作ってみようと思いましたが、いきなり躓きました。解決方法はちょっと不思議ですが、問題なく起動できるようになったのでおまじないだと思っておきます。

これからちょっとずつ時間を見つけてMagiczVoxelで遊んでみます。

Android エミュレーターがインターネット接続できない時の対応

Wed, 05 Apr 2023 00:00:00 GMT

ReactNative でアプリを開発している際に、急に Android エミュレータがインターネットに繋がらなくなる現象が起きました。

この時の解決法を見つけたので記録します。

結論

エミュレータの設定にて、Use Android Studio http proxy settings を有効にする
Android OS の設定にて、IP設定を静的に変更してDNS設定を指定する

現象

ふとした時に Android エミュレータがネットワークに繋がらなくなりました。ブラウザでネットワークにアクセスできませんし、アプリ内の API へのリクエストなども通りません。困ります。

PC は正常にネットワークにアクセスできていますので、ルータなどの問題ではなくエミュレータ側に問題があります。

設定を確認すると、Wifi を使って AndroidWifi に接続してることがわかります。しかし、ネットワーク接続はできておらず未接続の状態になっていました。

対応

1. エミュレータの設定

エミュレータの設定を開き、Settings の項目を選択します。 Proxy のタブを選択して、「Use Android Studio HTTP proxy settings」の項目にチェックをつけます。その下のラジオボタンは「No proxy」のままで良いです。

2. OS のネットワーク設定

OS の設定の画面から、ネットワークとインターネットの項目を選択します。 Wifi を選択して、AndroidWifi を確認して、詳細設定をタップして項目を開きます。

DNS が「8.8.8.8」になっていない場合はこれを指定することで解決できるようです。以下その手順です。

IP アドレスとゲートウェイの設定値をメモする
上部の編集マークをタップして AndroidWifi の設定を編集する
IP 設定の項目を「静的」にする
IP アドレスをメモした値にする
ゲートウェイをメモした値にする
DNS 1を「8.8.8.8」にする
DNS 2を「8.8.4.4」にする
保存を選択

おわりに

特に何かを変更した記憶はないですが、急に Android エミュレータがネットワークに繋がらなくなってしまい困っていました。

アプリ内の API リクエストなども動作しないので開発に影響があ離ますね。

他にも解決方法はありそうですが、OS のネットワークの設定項目から解決できました。これでよしとします。

ssh の秘密鍵を複数サイトに向けて設定する

Thu, 10 Feb 2022 00:00:00 GMT

ソースコードのバージョン管理のリモートリポジトリについて、ずっと Github のみを利用していました。

最近 Bitbucket も使う機会ができたので、そちらの設定をしていました。

どちらも ssh の公開鍵を登録して、秘密鍵を使ってアクセスできます。こうすることで、リクエストのたびにパスワードを求められることを回避できるので、私は積極的に設定しています。

これら2つのサイトに向けた秘密鍵を設定した時の手順についてのメモです。

結論

ssh 秘密鍵と公開鍵の作成はいつも通り行います。
.ssh/ に config というファイルを設置することでホスト・IPアドレスごとに使用する鍵の設定ができます。

ssh 秘密鍵と公開鍵の作成

以下の記事参考に ssh-keygen で秘密鍵・公開鍵のペアを作ります。
Github にSSH公開鍵を登録

コマンド実行の際に、出力する場所を求められるので前回とは異なる場所で違いがわかるようにしましょう。

公開鍵をサービスに登録する

今回は Bitbucket に登録しました。 Github でも Bitbucket でも同じような設定方法ですので、それほど迷うことはありません。

「.pub」の公開鍵の方をサービスに登録します。間違えないようにしましょう。

Mac であれば以下のコマンドでクリップボードにコピーできます。

pbcopy < ~/.ssh/id_rsa.pub

秘密鍵のパーミッションを変更しておく

秘密鍵の方は他ログインしたユーザーなどに read できないように、パーミッションを変更しておきましょう。

たとえば以下のようなコマンドになるはずです。

chmod 600 ~/.ssh/id_rsa

ssh の設定ファイルにドメインごとの設定を記述する

.ssh/ に config というファイルを作成し、ここに ssh の設定を記述します。

以下の書式で設定します。

Host [ホスト名]
  User [ユーザー名: GitHubの場合は`git`]
  Port 22
  HostName [サービスのドメイン または IPアドレス]
  IdentityFile [秘密鍵のパス]
  IdentitiesOnly yes

たとえばこんな感じ、Github と Bitbucket にそれぞれ別の鍵を設置しました。

Host github.com
    User git
    Port 22
    HostName github.com
    identityFile ~/.ssh/id_rsa
    IdentitiesOnly yes

Host bitbucket.org
    User git
    Port 22
    HostName bitbucket.org
    identityFile ~/.ssh/bitbucket/id_rsa_bb
    IdentitiesOnly yes

おわりに

複数の鍵を登録できると便利ですね。今回は Github と Bitbucket での使い分けでしたが、個人用とか仕事用とかで分ける必要がある時なども使える設定です。

リクエストの都度パスワードを入力したりするのは手間なので、積極的に秘密鍵・公開鍵を設定しておくと快適なのでおすすめです。

掲載実績

Wed, 09 Feb 2022 00:00:00 GMT

このブログについて、以下のコンテンツにて紹介いただきました。
ありがとうございます！

掲載実績

Freelance hub フリーランスエンジニア・クリエイターの案件情報サイト「Freelance hub」にて、このブログ記事が紹介されました。「どんなアプリを開発したい？理想を確実にカタチにするために読んでほしい記事まとめ」興味のある方はぜひご覧ください。

React Native で jest を使う際の async-storage や safe-area-context のパッケージのモック

Wed, 05 Jan 2022 00:00:00 GMT

React Native でも jest を用いてテストを実装できます。

簡単なスナップショットテストであったり、ロジック部分のテストであったり、設定をしっかり行えばさまざまなテストを用意できます。

コンポーネントのテストを行う時、端末で起動していないと動作しないパッケージがあり、テストの際にエラーを返すものがあります。その場合にはモックを用意して、動作を仮の形に置き換えることでテストを実行できます。

やり方を簡単にメモしておきます。

概要

エラーになる例
@react-native-async-storage/async-storage のエラーを回避する
react-native-safe-area-context のエラーを回避する

エラーになる例

ロジックとしてデータを保存・取得するために @react-native-async-storage/async-storage を使っている場合
コンポーネントで react-native-safe-area-context を使って、端末の画面の余白などを取得している場合

このような場合、そのままだとテスト時にエラーが発生してしまいます。簡単な回避方法をそれぞれ紹介します。

他のパッケージでも同様のやり方で回避できることがあるので、基本として知っておくと良いです。

`@react-native-async-storage/async-storage` のエラーを回避する

これは実機であればasync-storage でデータの読み書きができるのですが、jest 上ではそれが使えないためエラーになります。

以下のようにパッケージをモック化してしまうのが簡単な回避方法です。jest の setup ファイルに書いておくのも良いです。

jest.mock("@react-native-async-storage/async-storage", () => jest.fn);

ライブラリの動作はキーを渡して該当するデータを取得するものです。特にロジックは含まないのでモックにして問題ないです。

取得したデータの整形やチェックする処理があるのであれば、その部分を切り出したり、テストデータを返すモックを用意するなどしてテストを行うようにしましょう。

`react-native-safe-area-context` のエラーを回避する

こちらは使用の際に要素を SafeAreaProvider で囲んでおく必要があります。

以下のような test-utils.tsx を用意しておきましょう。 @testing-library/react-native の変わりにこれを import することで、Provider を用意してコンポーネントをレンダーできます。もちろん、各テストで Provider を挟んで定義するのでも問題ないです。

import React from "react";
import { render } from "@testing-library/react-native";
import { SafeAreaProvider } from "react-native-safe-area-context";

function TestSafeAreaProvider({ children }) {  return (    <SafeAreaProvider      initialMetrics={{        frame: { x: 0, y: 0, width: 0, height: 0 },        insets: { top: 0, left: 0, right: 0, bottom: 0 },      }}>      {children}    </SafeAreaProvider>  );}
const customRender = (ui, options?) => {
  return render(ui, { wrapper: TestSafeAreaProvider, ...options });
};

// re-export everything
export * from "@testing-library/react-native";

// override render method
export { customRender as render };

この SafeAreaProvider に initialMetrics を設定しないと、要素が何もレンダリングされない現象になるので注意しましょう。

パッケージに用意されているデフォルト値を使った場合もレンダリングできない現象がおきました。適当な値でいいので自分でオブジェクトを用意して設定する必要があります。

おわりに

React Native でも jest を使ったテストは快適に行えます。ロジックの部分を切り分けることでテストが書きやすくなるのは間違いないので、まずはそれを検討しましょう。今回のようにどうしてもコンポーネントから切り出せない場合や、ページ全体など大きな部分のテストになると、パッケージのモック化が必要になります。

jest のモックはさまざまな使い方や定義が可能なので、時間がある時に知っておくとテスト実装が快適になるのでおすすめです。

React Native と jest を使う際の react-navigation のテスト実装

Wed, 05 Jan 2022 00:00:00 GMT

React Native と jest でテストを実装する際の、react-navigation のテストの書き方の紹介です。

各コンポーネント単位でテストするように実装していれば、react-navigation を使わなくてもそれぞれのコンポーネントに対して描写やロジックのテストを書くことが可能です。

screen をまるごと描写テストしたい時、ボタンタップ時のスクリーン移動のテスト、アプリ起動時のホーム画面のマウントのテストなどが必要な場合があります。その場合、react-navigation のuseNavigation や useRoute が必要になるため、テストで動かせるようにする必要があります。

概要

参考リンク
エラーになる場所
ナビゲーションクリエイターで挟む
screen の遷移をテストする
useRoute で遷移時に受け取るパラメータをモックする
test-utils などに追加するか

参考リンク

https://callstack.github.io/react-native-testing-library/docs/react-navigation

https://medium.com/@dariaruckaolszaska/testing-your-react-navigation-5-hooks-b8b8f745e5b6

エラーになる場所

useNavigation や useRoute を使う場所にてエラーになります。

画面遷移の際にパラメータとして受け取るデータなどを利用している場合も、パラメータがないためエラーになります。

ナビゲーションクリエイターで挟む

基本的には、実際のアプリの実装と同じようにするため NavigationContainer でナビゲーションを作ります。stack であれば createStackNavigator を使って Stack ナビゲーションを設定します。

こうすることで useNavigation や useRoute が動作できるようになります。

たとえば以下は useNavigation を使っている HomeScreen のテストのために、Stack ナビゲーションを用意しています。

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

const Stack = createStackNavigator();

  describe("HomeScreen", () => {
    it(`初期データ取得処理 fetchMessage を実行する`, () => {
      const params = {};
      render(
          <NavigationContainer>            <Stack.Navigator>              <Stack.Screen                name="HomeScreen"                component={HomeScreen}                initialParams={params}              />            </Stack.Navigator>          </NavigationContainer>      );
    });
  });

screen の遷移をテストする

useNavigation のページ遷移をテストしたい場合は、必要になるスクリーンを Route として設定しておけば、テストが可能です。

以下は HomeScreen からボタンをタップして DisplayScreen に遷移することをテストする例です。 Route の名前は実装で使っているものと同じでないと、遷移の際に移動先が見つからないエラーとなります。実装と同じ name を各スクリーンに設定しましょう。

    it(`ボタンを押すとupdateMessageを実行して、display screen に遷移する`, async () => {
      const params = {};
      const component = render(
          <NavigationContainer>
            <Stack.Navigator>
              <Stack.Screen                name="Home"                component={HomeScreen}                initialParams={params}              />              <Stack.Screen                name="Display"                component={DisplayScreen}                initialParams={params}              />            </Stack.Navigator>
          </NavigationContainer>
      );
      const { findByText, findByTestId } = component;
      const button = await findByTestId("navButton");
      fireEvent(button, "press");

      const nextPage = await findByTestId("displayScreen");
      expect(nextPage).toBeTruthy();
    });
  });

useRoute で遷移時に受け取るパラメータをモックする

スクリーンによっては遷移の際に前の画面から受け取ったパラメータを使用する画面もあります。

その場合はスクリーンに initialParams としてテストデータを設定することで、仮のものとして受け取ることができます。

以下はホーム画面からパラメータを受け取って表示する DisplayScreen の表示テストです。

    it(`display screen を表示する`, async () => {
      const params = {
        text: "hello",
      };
      const component = render(
          <NavigationContainer>
            <Stack.Navigator>
              <Stack.Screen name="Home" component={HomeScreen} />
              <Stack.Screen
                name="Display"
                component={DisplayScreen}
                initialParams={params}              />
            </Stack.Navigator>
          </NavigationContainer>
      );
    });

test-utils などに追加するか

test-utils に NavigationContainer を設定したカスタムレンダーを用意するのも便利です。しかし、ナビゲーションを設定するとヘッダーやボトムタブなどが描写されます。

コンポーネントのテストなどではそれは不要なので、個人的には必要な pages のテストやアプリマウント時のテストなど、必要となるテストケースの中で都度ナビゲーションを設定するようにしています。

おわりに

screen 単位のテストについてはそもそも実装しないという方針もあります。各コンポーネント単位でテストができていればいいですし、ロジックなどはなるべく切り出して screen に含まないように設計するのが望ましいです。

表示のテストやアプリマウントのテストが必要な場合、今回紹介したよう方法でテストを書くのはお手軽でですが、Detox などを使ってE2Eテストで実装するのもおすすめです。準備などは必要ですが、こちらも便利なので機会があれば設定して置けるとテストがもっと便利になります。

Expo で絶対パスを使って import できるようにする

Wed, 17 Nov 2021 00:00:00 GMT

Expo を使って React Native アプリを作成する際に、コンポーネントの import を行う際、デフォルトの状態では以下のように相対パスで指定することになります。

import { Header } from "../../Header"

通常の状態だと絶対パスを使って指定できないため相対パスで指定する必要があります。
ディレクトリの階層が浅いとそれほど気にならないですが、大きなソースコードになった場合や、import が増えてきた時に見通しがつきにくくなります。

今回は Expo を使用した React Native アプリについて、import の時に絶対パスを利用できるようにする方法を紹介します。

概要

babel のプラグインをインストール
babel.config.js にパスの定義
tsconfig.json にパスの定義
応用: パスのエイリアスを複数登録

babel のプラグインをインストール

babel-plugin-module-resolver というプラグインをインストールします。いつも通り npm でインストールしましょう。

npm install --save-dev babel-plugin-module-resolver

babel.config.js にパスの定義

babel の設定ファイルにプラグインの追加と設定を記載します。 alias として src を追加しています。今回のプロジェクトでは基本的なプログラムは src/ 以下に入っているので、そこを絶対パスの開始点にします。

module.exports = function (api) {
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [        "module-resolver",        {          alias: {            src: "./src",          },        },      ],    ],
  };
};

tsconfig.json にパスの定義

以下を TypeScript の設定に追加します。 baseUrl と使いたい絶対パスのエイリアスを記述します。babel.config.js の内容と合わせる必要があります。

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "src/*": ["./src/*"],
    }
  }
}

上記を対応することで、絶対パスでの指定が行えるようになりました。 src から始める必要がありますが階層が増えた場合でも../ で何度も遡るよりはだいぶわかりやすくなります。

import { Header } from "src/components/atoms/Header"

応用: パスのエイリアスを複数登録

上記の応用として、エイリアスは複数登録できます。開始点となるベースのディレクトリ以外にも、よく使うアセットとかのパスを登録しておいてもいいですね。

babel.config.js

module.exports = function (api) {
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          alias: {            src: "./src",            asset: "./src/asset",          },        },
      ],
    ],
  };
};

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "src/*": ["./src/*"],      "asset/*": ["./src/asset/*"],    }
  }
}

上記設定を追加すれば、直接 asset を指定できるようになります。ベースとなるディレクトリが 1 つあれば、そこから指定できるのでそれほど便利でも無いですが、何度も指定するのであれば用意しておくと快適になります。

import { Header } from "src/components/atoms/Header";
import { Icon } from "asset/Icon";

おわりに

他言語や React の開発経験などから、やっぱり絶対パスで指定できる方が便利だと感じることも多いです。

ディレクトリの設計を見直すことで、相対パスでの指定でも便利に開発できるのですが、どちらも使えるようにしておいて損することは無いですよね。

大きく遡って model を import しなければならない時は絶対パス、同じ要素のコンポーネントを import する場合は相対パスなど、ルールを決めてもいいですね。もちろん全部絶対パスで指定しよう、というのもありです。チームで設計ルールを決めて取り組むようにしましょう。

Commitizen を使って git commit のメッセージをいい感じにする

Fri, 12 Nov 2021 00:00:00 GMT

git でコミットする際のメッセージを、テンプレから作成してくれる Commitizen の紹介です。

コミットするたびにメッセージを入力しますが、たまに適当な内容にしてしまったりしますよね。後から見直した際にわかりづらくて苦労することがあります。

整ったメッセージのルールを決めておいて、それに従ってメッセージを入力すれば解決できます。しかし、コミットメッセージの書き方は人によっても異なりますし、意外と適切なメッセージを作成するのに悩んでしまうこともあります。

Commitizen を使うことで、選択肢から選んでテンプレに従ったわかりやすいコミットメッセージを作成できます。自分一人のコミットメッセージ作成に用いるのはもちろん、チーム内でのコミットメッセージのルール制定などにも役に立つのでおすすめです。

概要

ドキュメント
グローバルにインストールする
プロジェクトにインストールする
使い方

ドキュメント

https://github.com/commitizen/cz-cli

導入方法としては以下の 2通りあります。

自分の環境のグローバルにインストールする方法
プロジェクトにインストールする方法

グローバルにインストールする

npm のグローバルなスコープにインストールする使い方です。

複数のプロジェクトで同じコミットメッセージのルールで運用できるので便利です。自分一人で使いたい場合はこの使い方が便利ですね。

commitizen をインストールする

いつもどおりnpm でインストールします。プロジェクトを跨いで使えるようにグローバルにインストールです。

npm install -g commitizen

commitizen adapter もインストールする

メッセージの設定をインストールします。こちらもグローバルにインストールすることで、どこでも同じ設定でコミットメッセージを作成できます。

npm install -g cz-conventional-changelog

設定についてはいくつか種類があるので好きなものを選択してインストールしましょう。以下にサンプルがあるので見てみると良いです。基本的な利用であれば一番上のやつで十分です。

https://github.com/commitizen/cz-cli#adapters

設定ファイルを用意する

ホームディレクトリに設定ファイルを用意します。.czrc のファイル名で、以下の内容を書き込みます。
設定ファイルのパスを定義することになります。使用する adapter によって変更しましょう。

{ "path": "cz-conventional-changelog" }

commitizen を使ってメッセージを作成する

git commit の代わりに git cz コマンドを入力することで、commitizen を使ったメッセージの作成が始まります。

使い方の詳細はページの下の方へ。

プロジェクトにインストールする

プロジェクトの devDependencies に導入する使い方です。

対象のプロジェクト内でのみ有効になりますが、package.json に設定を記述して配布することになるので、チームメンバーで設定を共有できます。
チームでの git 運用のルールとして、コミットメッセージを整理したい場合に便利な使い方です。

commitizen をインストールする

いつもどおりnpm でインストールします。プロジェクトを跨いで使えるようにグローバルにインストールです。

npm install -g commitizen

init を行う

以下のコマンドで commitizen の初期設定を行い設定を作成します。使用する adapter はとりあえず cz-conventional-changelog としています。必要に応じて変更しましょう。

commitizen init cz-conventional-changelog --save-dev --save-exact

すると、package.json に必要な設定が追加され、設定ファイル .csrc が用意されます。 adapter を変更した場合これらの修正が必要になりますので覚えておきましょう。

npm script を追加して commitizen を使う

commitizen を使えるように、package.json にnpm script を追加します。

  "scripts": {
    "commit": "cz"
  }

git commit の代わりに npm run commit で、commitizen を使ったメッセージ作成が始まります。 npx cz でも可能です。

使い方

commitizen を実行すると、いくつかの質問が出てくるので、それに回答していく形でメッセージを作成できます。
adapter にcz-conventional-changelog を利用した場合は以下の選択肢になります。

? Select the type of change that you're committing
コミットのタイプを選択します。選択肢があるので適したものを選択しましょう。
? What is the scope of this change (e.g. component or file name)
変更の対象スコープを回答します。画面のURLとか、対象のコンポーネントとかファイル名とかを選択しましょう。
? Write a short, imperative tense description of the change (max 76 chars)
短い説明です。ログとかgithub 上の一覧にはここが表示されるのでわかりやりく端的な内容を入力しましょう。
? Provide a longer description of the change: (press enter to skip)
詳細な説明です。修正の目的とか、残しておきたい説明とか、修正内容の概要とかあれば入力しておきましょう。
? Are there any breaking changes?
影響の大きい重大な変更がある場合に yes を選択しましょう。
? Describe the breaking changes
影響の大きい変更についての詳細な内容を入力しましょう。
? Does this change affect any open issues?
yes を選択すると、関連する issue を設定できます。
? Add issue references (e.g. "fix #123", "re #123".)
関連する issue の番号を入力します。正しく設定しておくと github のUI上でリンクになったり、PRが issue と自動的に関連づけられたりするので便利です。

おわりに

コミット時のメッセージは後から参照する時に、大切な情報になります。考えるのがめんどくさくなって適当なメッセージにしてしまったり、気を抜くと何の情報もないメッセージにしてしまいがちです。

紹介したライブラリを使うことで悩まずに適切なメッセージを残すことができます。
チームでの開発でもルールとして用いることもできますし、個人での開発でもわかりやすいコミットメッセージの作成として力を発揮します。

他人がみた時にも親切ですし、未来の自分がみた時にもわかりやすくしておくことはとても重要ですね。

導入も簡単ですので、使ったことのない人はぜひ活用してみてください。

React Native でアプリ起動の際に`Error: No native splash screen registered for given view controller.`のアラートが出る現象の解決

Thu, 11 Nov 2021 00:00:00 GMT

React Native + Expo でアプリ開発時に、アプリ起動後スプラッシュが消えるタイミングで以下のアラートが出ていました。

[Unhandled promise rejection: Error: No native splash screen registered for given view controller. Call 'SplashScreen.show' for given view controller first.]
at node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:103:50 in promiseMethodWrapper
at node_modules/@unimodules/react-native-adapter/build/NativeModulesProxy.native.js:15:23 in moduleName.methodInfo.name
at node_modules/expo-splash-screen/build/SplashScreen.js:23:17 in hideAsync
at node_modules/expo-splash-screen/build/SplashScreen.js:19:7 in hideAsync

この現象についての原因調査と解決方法のメモです。

結論を先に言うと

AppLoading でアプリ起動時のアセットの読み込みなどを行っていました。このコンポーネントの audoHideSplash の機能が原因でした。デフォルトは有効になっているので、false を渡して機能を無効化することで解決できました。

import AppLoading from "expo-app-loading";

~~~

    <AppLoading
      ~~~
      autoHideSplash={false}    />

概要

使用しているライブラリ
エラーの内容を読む
SplashScreen.hideAsync() を取り除いてみる
他の何かが hideAsync しようとしている？
SplashScreen のサンプルソースを見ると怪しいものを発見

使用しているライブラリ

今回の現象に関連しているのは以下のライブラリでした。

expo-splash-screen
アプリ起動時のスプラッシュ画面の表示に使っています。
expo-app-loading
アプリ起動時のアセット呼び出しやデータ準備などに使っています。

エラーの内容を読む

エラーの内容を見ると、スプラッシュスクリーンが登録されていないと言われています。 SplachScreen.show を最初に呼び出してほしいとのことです。

たしかに、アセットのロードが終わるタイミングで以下を実行して、明示的にスプラッシュを非表示にしています。
この時にスプラッシュがすでに存在しなくなっているのかなと考えられます。

import * as SplashScreen from "expo-splash-screen";

~~~

    await SplashScreen.hideAsync();

しかし、これよりも先にスプラッシュ画面の呼び出しは行っているので、スプラッシュは存在しているはずです。実際に画面にもスプラッシュ画面が表示されていますしね。

    await SplashScreen.preventAutoHideAsync();

`SplashScreen.hideAsync()` を取り除いてみる

仮説として、hideAsync が不要なのではないかと考え、この行を削除してみました。

結果、スプラッシュスクリーンは表示されたままになり、ホーム画面を表示できない現象が発生。スプラッシュを隠す hideAsync は必要で、ちゃんと動作していた様子です。

この仮説はハズレでした。

他の何かが `hideAsync` しようとしている？

仮説として、明示的に hideAsync を記述しているところ以外で、スプラッシュを非表示にする処理が動いているのではと考えました。

何となく怪しいのは、ホーム画面の描写で上書きしているとか、AppLoading の起動時のアセット読み込みなどを管理するコンポーネントなどが考えられます。

`SplashScreen` のサンプルソースを見ると怪しいものを発見

スプラッシュの実装はドキュメントにも記載されているものを使っているので、それほどおかしいところはないはず。サンプルのコードがあったので覗いてみました。

https://github.com/expo/examples/tree/master/with-splash-screen https://github.com/expo/examples/blob/master/with-splash-screen/App.js

私の実装と同じようにAppLoading を使っていますが、サンプルではautoHideSplash という引数を渡しています。

      <AppLoading
        // Instruct SplashScreen not to hide yet, we want to do this manually
        autoHideSplash={false}        startAsync={startAsync}
        onError={console.error}
        onFinish={onFinish}
      />

AppLoading には確かにautoHideSplash というパラメータを渡すことができ、デフォルトでは true となっています。 https://docs.expo.dev/versions/v43.0.0/sdk/app-loading/

AppLoading コンポーネントのアンマウント時にスプラッシュ画面を非表示にしようとします。

これが原因ではと考え、autoHideSplash にfalse を渡すように修正したところ、問題のアラートが表示されなくなりました。スプラッシュもしっかりと非表示になり、問題が解決できました。

    <AppLoading
      ~~~
      autoHideSplash={false}    />

おわりに

エラーではなくアラートがログに出るだけなので、放置してもアプリの動作には問題ないはずです。しかし、こういったものが積み重なると気持ち悪いですし、もっと大きな問題の検知の遅れになったりしてしまいます。

できるだけ細かいアラートなども見逃さずメモしておいたり、コストやスケジュールを考慮して対応するタイミングを作れると良いです。

基本的には AppLoading の使い方の問題でした。サンプルみたりすると解決のヒントがあるのでとても助かりますね。またバージョン更新によって動作が変わることもあるので、都度対応していければ考えています。

i18n-js と expo-localization を利用して、多言語対応を行う

Tue, 02 Nov 2021 00:00:00 GMT

React Native のアプリで、複数言語に対応する方法のメモです。

基本的には i18n-js というパッケージを使うことで、端末に設定されている言語設定に応じて表示するテキストを切り替えることができます。

複数言語に対応しておくことは、世界中からアプリを使ってもらえる可能性が増えるので積極的に進めておきたいです。テキストを言語の数用意することが大変になりますが、実装自体は簡単なので時間見つけて対応しておくと良いです。

概要

ドキュメント
インストール
実装
テキストの用意

ドキュメント

https://github.com/fnando/i18n-js

https://docs.expo.dev/versions/latest/sdk/localization/

インストール

必要なパッケージをインストールします。
expo-localization は端末に設定されている言語設定を取得するために利用します。

expo install i18n-js expo-localization

TypeScript の場合は型情報もインストールしておきましょう。

npm install --save-dev @types/i18n-js

実装

簡単に実装の例を紹介します。

import * as Localization from 'expo-localization';
import i18n from 'i18n-js';

~~~

i18n.translations = {
  en: { welcome: 'Hello' },
  ja: { welcome: 'こんにちは' },
};
i18n.locale = Localization.locale;

~~~

      <Text style={styles.text}>
        {i18n.t('welcome')}
      </Text>

i18n に対して言語ごとのテキスト情報を定義した上で、使用する言語の種類を設定します。使用する言語については、端末に設定されている言語を expo-localization にて取得して反映します。

使用言語の設定はアプリの中で 1度だけ行えばいいので、それぞれの画面で用意するよりも共通化して置けると便利です。テキストの用意もまとめて書いておくと、追加・変更などの運用時も快適になります。

確認の際は、シミュレータなどで設定から端末の言語設定を変更することで確認ができます。

テキストの用意

i18nを共通化すると以下のようにできます。これを必要な画面で import して利用します。

import { locale } from "expo-localization";
import i18n from "i18n-js";

import { translations } from "./translations";

// Set the key-value pairs for the different languages you want to support.
i18n.translations = translations;

// Set the locale once at the beginning of your app.
i18n.locale = locale;

// When a value is missing from a language it'll fallback to another language with the key present.
i18n.fallbacks = true;

export { i18n };

テキストを別ファイル translations として用意すると以下のようになります。ついでにテキストの型定義を用意しておくと、定義漏れを発見できるのでおすすめです。

type TextDefinition = {
  drawer: {
    policy: string;
    reviewRequest: string;
    licenses: string;
  };
  placeholder: string;
};

type Translations = {
  en: TextDefinition;
  ja: TextDefinition;
};

export const translations: Translations = {
  en: {
    drawer: {
      policy: "privacy policy",
      reviewRequest: "Please cooperate with the review",
      licenses: "licenses",
    },
    placeholder:
      "Enter it and tap the button below to enlarge it on the screen.",
  },
  ja: {
    drawer: {
      policy: "プライバシーポリシー",
      reviewRequest: "レビューにご協力ください",
      licenses: "ライセンス",
    },
    placeholder: "入力して下のボタンをタップすると、画面に大きく表示できます。",
  },
};

テキストはオブジェクトで定義できるので、入れ子にしてスコープのように設定できます。画面ごとや機能ごとにスコープを用意するような形で定義するのも良いですね。

おわりに

多言語対応は少しめんどくさいですが、便利なパッケージを使えば簡単に実装できます。

日本語以外についても用意しておくことで海外のユーザーが使ってくれますし、対応しておいて損はありません。

アプリ自体の多言語対応ができたら、ストア情報やLPについても多言語対応しておきたいですね。その辺りのやり方も後日紹介する予定です。

expo-linear-gradient を使って要素をグラデーションにする

Mon, 01 Nov 2021 00:00:00 GMT

expo-linear-gradient というパッケージの紹介です。

色がグラデーションになった要素を配置できます。背景をグラデーションにしたりボタンをグラデーションにしたりすることで、デザインの選択肢も増えて便利です。

概要

ドキュメント
インストール
実装
応用
Expo を使わない場合

ドキュメント

https://docs.expo.dev/versions/latest/sdk/linear-gradient/

インストール

Expo を導入済みであればいつも通り以下のコマンドでインストールします。

expo install expo-linear-gradient

実装

実装は以下のようになります。

用意されている LinearGradient コンポーネントに色を配列で指定することで、グラデーション要素を実装できます。色の配列は要素を 2つ以上設定でき、多く色を設定すると虹色のような複雑なグラデーションも可能です。

コンポーネント自体は空の要素として配置でき、親要素として配置して中にテキストやアイコンを入れられます。

import { LinearGradient } from 'expo-linear-gradient';

~~~
      <LinearGradient
        colors={["#5c76bf", "#a4b9ed"]}
        style={styles.button}>
        <MaterialIcons
          name="loupe"
          size={40}
          style={styles.buttonIcon}
          color={Colors.white}
        />
      </LinearGradient>

応用

指定の際に、開始点や終点など色が変化する場所を指定できます。

      <LinearGradient
        colors={["#5c76bf", "#a4b9ed"]}
        start={{ x: 0.1, y: 0.3 }}
        // end={{ x: 0.9, y: 0.9 }}
        locations={[0.1, 0.4]}
        style={styles.button}>
        <MaterialIcons
          name="loupe"
          size={40}
          style={styles.buttonIcon}
          color={Colors.white}
        />
      </LinearGradient>

start

グラデーションの開始位置を指定できます。 { x: 0.1, y: 0.3 } のように、x軸と y軸の位置を指定します。0 ~ 1 までの値を指定でき、パーセントでの位置指定になります。

end

グラデーションの終了位置を指定できます。 start と同様の指定方法になっていて、{ x: 0.9, y: 0.7 } と x軸と y軸の位置を指定します。

location

色が切り替わる場所を定義できます。 colors で指定した色数と同じ要素数の配列を渡す必要があり、対応する色要素の切り替わり地点を 0 ~ 1までの値で指定します。

Expo を使わない場合

react-native-linear-garadient を使えます。使い方はほとんど一緒なので、ドキュメント通りにやれば同じように実装できます。

https://github.com/react-native-linear-gradient/react-native-linear-gradient

おわりに

画像や複雑なコンポーネントを用意しなくても、グラデーションを設定することでデザインの幅が出ます。色の使い方や置き方によっては目立つボタンにもできますし、さりげなく見やすい意匠も用意できます。

簡単に実装ができるので、積極的に使いこなせると頼もしいです。

Figma に公開されている Design System のリンク集

Sat, 30 Oct 2021 00:00:00 GMT

Figma で公開されているデザインシステムの紹介です。

私はUI設計やデザイン・プロト作成に Figma を使っています。 Figma では Community というエリアがあります。そこでは他の人が作った素材やテンプレートが公開されており、簡単に活用できます。

UIコンポーネント集だったり、端末の外枠・画面要素など、便利なものがたくさん公開されています。

今回はその中で有用そうなデザインシステムの紹介です。デザインシステムを公開してくれている企業やサービスがあり、Figma 上でこれを覗いて参考にできます。

大手のサービスのデザインシステムもあるので、UIやコンポーネントの勉強にもなりますしデザイン設計やガイドライン作成の参考にもなります。暇な時に触ってみるだけでもとても勉強になるのでおすすめです。

一覧ページ

一覧になっているページです。気になるものやよく使うサービスがあれば、ここから探してFigmaに取り込んで触ってみましょう。

https://www.designsystems.com/open-design-systems/

気になったもの

上記の一覧から気になったものと、そのアカウントが公開している他のファイルについて軽く紹介です。

Github Primer

https://www.figma.com/community/file/854767373644076713

Github で使われているデザインシステム Primer のUIコンポーネント集です。

ページサンプルなども置いてあり、開発者がよくみるGithubのUIコンポーネントを改めてみることができます。整理されておりダークモードの時のコンポーネント設定もあります。
https://www.figma.com/community/file/809920999413919915

Github で使われているアイコン集です。Primer の一部でオープンソースとして公開されておりOcticonsという名前がついてます。
https://www.figma.com/community/file/854766928300977832

色や文字などのstyle に関する設定をまとめたものです。

Primerはオープンソースになっているので参考にしやすくなっています。さらに、Figmaで確認できるようになっているというのはとても助かりますね。 https://primer.style/

Material Design

https://www.figma.com/community/file/778763161265841481

Android で用いられているマテリアルデザインのデザインシステムです。アプリなどのUI設計やプロト作成であれば、これをそのまま使うだけでかなりそれっぽくなりますね。

一通り各コンポーネントをみてみるだけでも、アプリのUIの勉強になります。
https://www.figma.com/community/file/787036571667088922

ダークモードバージョンもあります。

Microsoft Fluent

https://www.figma.com/community/file/916836509871353159

Microsoft で使われている Fluent のファイルです。Teams などはこれでデザインされてますし、他のものにも利用されています。
https://www.figma.com/community/file/836835755999342788

アイコン集です。数がとても多いですが良いですね。他にもアクセシビリティ関連などいくつもファイルがあるのでMicrosoftのアカウントはチェックしておくと良いです。

ATLASSIAN

https://www.figma.com/community/file/857042449394640587

atomic デザインでいう一番小さいAtomic階層のコンポーネント集です。結構な数とページがありますが、とても細かく分類されていてわかりやすくて良質でした。

利用する際には以下のComponent pack を利用することで、もう1つ上の階層のMolecular階層のコンポーネントを探せます。
https://www.figma.com/community/file/857042825430121165

Molecular階層のコンポーネント集です。コンポーネントを階層を分けてが公開されているのは便利ですね。

Cookpad

https://www.figma.com/community/file/847372282968994272

Cookpad のデザインシステムです。細かいコンポーネントは含まれていませんが、色やテキストなどのstyleの仕様が公開されています。
https://www.figma.com/community/file/885445931580188399

スキルマップのファイルです。好き嫌いの軸とできるできないの2軸になっており、自分のスキルの棚卸しやチーム内でのスキル共有などに活かせそうです。

おわりに

他にも Uber や Spotify ・ Salesforce などのデザインシステムも公開されています。海外のサービスが多いですが日本のものもあります。 Figma に簡単に取り込んで閲覧・編集・再利用ができるので、とても便利な取り組みです。

みるだけでももちろんですし、細かい数値を確認してみたり実際にページやコンポーネントを設計するとさらに勉強になりますね。

UI設計についての勉強になるのは当然で、デザインシステムの設計やガイドラインの作成の際にも参考になります。 Figma そのものの使い方・コンポーネントの作成方法もとても参考になるので、いろんなデザインシステムをコピーして遊んでみると勉強になります。

UIガイドラインのリンク集

Sat, 30 Oct 2021 00:00:00 GMT

UI設計やデザインの際に参考となる、各OSのガイドラインのリンク集です。更新があったら対応していきます。

各OSのガイドライン

https://material.io/

Material is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Backed by open-source code, Material streamlines collaboration between designers and developers, and helps teams quickly build beautiful products.

https://developer.apple.com/design/human-interface-guidelines/

Get in-depth information and UI resources for designing great apps that integrate seamlessly with Apple platforms.

https://www.microsoft.com/design/fluent/#/

No need to start from scratch. Fluent is an open-source, cross-platform design system that gives designers and developers the frameworks they need to create engaging product experiences—accessibility, internationalization, and performance included. Go ahead, pick a platform to get started.

UI設計の情報サイト

rss あり

rss で購読できるので登録しておくことをおすすめします。

https://www.uxbooth.com/articles/

The UX Booth is a publication by and for the user experience community. Our readership consists mostly of beginning-to-intermediate user experience and interaction designers, but anyone interested in making the web a better place to be is welcome. If you’re interested, join us and discuss best practices and trending topics, or share your experiences.

https://www.nngroup.com/

We are a UX research and consulting firm trusted by leading organizations world-wide to provide reliable guidance on user experience.

https://uxdesign.cc/

The UX Collective is an independent design publication built to elevate unheard design voices all over the world. Curated stories on user experience, visual and product design.

https://automattic.design/inclusive/

At Automattic, we are passionate about making the web a better place, and creating opportunities for anyone, anywhere. We work on WordPress.com, WooCommerce, Simplenote, Tumblr, Jetpack and many more.

https://blog.proto.io/

At Proto.io, we strive to improve the world of prototyping, through excellent customer support, intuitive features and ambitious goals.

https://goodpatch.com/blog/

これからの不確実性が高い時代においての革新は、ユーザー体験までデザインすることで初めて効果が出ます。ユーザー体験の向上によってビジネスに貢献する。事業やプロダクトの本質的な価値と、世の中の人々のニーズをつなぎ、なぜそれらが存在すべきかをオーナーの想いに寄り添いながらひもとき、構築することが重要です。Goodpatchはデザインの価値の向上のために存在しています。

rss なし

rss がないため定期的にアクセスしないといけません。

https://www.designsystems.com/

A Figma publication for design systems creators, designers, developers, and managers

https://www.edgeoftheweb.co.uk/blog/

Insights, perspectives and news from our team The Edge of the Web team delve into the details of design, development, marketing and more. Our insights can help you navigate the digital waters, whether you’re not technical at all or are an industry expert.

UI関連の指針

https://lawsofux.com/

Laws of UX is a collection of the maxims and principles that designers can consider when building user interfaces. It was created by Jon Yablonski.

https://www.sociomedia.co.jp/category/shig

ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。

便利なサイト

https://www.checklist.design/

A collection of the best design practices.

https://webframe.xyz/

Discover and be inspired by beautiful webapp designs

おわりに

OSごとに異なるガイドラインを提示しているので、どれに従うのが正しいのだろうと感じることがあります。これが常に正しいということはなく、OSによって環境によってなどで正解は異なります。

色々なガイドラインがあって、それぞれどんな思想でどんなUIを提案しているのか一通り学んでおくと、様々な場面で応用できるので良い勉強になります。

ガイドラインはたまに更新されるので、そういった新しい情報もキャッチできると良いです。

Android の Google Play に登録するスクリーンショットの用意

Tue, 12 Oct 2021 00:00:00 GMT

今回はGoogle Play のアプリスクリーンショットについてです。

iOS の App Store については iOS の App Store に登録するスクリーンショットの用意にて解説しています。そのAndroid 版です。

Android のアプリをビルドしてアップロードすることに加えて、ストアに設定が必要な掲載情報についてのメモです。必要な画像についての情報をまとめています。

概要

必要なデータ
必要な画像の形式
ストアでの見え方

必要なデータ

Google Play Console の「ストアでの表示」内の「メインのストアの掲載情報」のメニューにて、以下のデータが必要になります。

アプリのアイコン
フィーチャーグラフィック
携帯電話版のスクリーンショット

同じ画面で他にもアプリ名や説明などのテキストも登録が必要です。ここでは画像ファイルのみ解説します。

必要な画像の形式

それぞれの画像を以下の形式で用意します。

アプリのアイコン

透過 PNG または JPEGの形式。
容量は 1MB 以下で、512 x 512 ピクセル。

フィーチャーグラフィック

PNG または JPEGの形式。
容量は 1MB 以下で、1,024 x 500 ピクセル。

携帯電話版のスクリーンショット

PNG または JPEG の形式。
1枚につき 8MB 以下。
アスペクト比 16:9 または 9:16 。
縦横がそれぞれ 320 ～3840 ピクセル。
2枚以上必要で 8枚まで登録できます。

ストアでの見え方

Google Play でも、スクリーンショットが縦か横かで、一覧画面での見え方が変わります。以下参考までに。

縦向きの画像を用意した場合

以下の画像のように縦の画像が 3つ並びます。

画像が複数並ぶので、いろんな機能を紹介できます。

横向きの画像を用意した場合

以下の画像のように横の画像が 1つ表示されます。

画像が大きく表示できるので、目を引く画像出会ったり興味を持たせるような内容であれば、こちらの表示がいいですね。

おわりに

Google Play でのスクリーンショットの見え方を紹介しました。 iOS と Android ですこしずつ仕様が異なりますが、基本的には同じような表現になるので、似たような画像を用意することになります。

ストアでの見え方によって、アプリのダウンロード数などに影します。しっかり用意して、両ストアに効果的な画像を設定できるようになりましょう。

iOS の App Store に登録するスクリーンショットの用意

Tue, 12 Oct 2021 00:00:00 GMT

アプリを作成したら、各OSのストアにアップロードして公開します。

その際に、アプリの情報としてスクリーンショットがいくつか必要になります。このスクリーンショットはストアでのアプリ一覧でも表示されるので、ユーザーに気づいてもらうためであったり、使い方や特徴の説明の目的でも大切な要素です。

今回は必要なスクリーンショットの形式や、ストアでの見え方についてどうなるのか記録しています。
スマホのみのアプリを対象にしています。iPad も対象のアプリにする場合はそちらのスクリーンショットも必要になるので注意しましょう。

概要

ドキュメント
必要なデータ
必要な画像の形式
ストアでの見え方

ドキュメント

基本的にはドキュメントに書いてあるので、その内容に従って用意することになります。

App Store Connect ヘルプ

App Store アイコン、App プレビューとスクリーンショットの概要
https://help.apple.com/app-store-connect/#/devd274dd925

スクリーンショットの仕様
https://help.apple.com/app-store-connect/#/dev910472ff2

App Store アイコンの追加
https://help.apple.com/app-store-connect/#/dev8b5cb82e2

必要なデータ

必須データは以下です。JPG または PNG にします。

App Store アイコン
6.5 インチのスクリーンショット
5.5 インチのスクリーンショット

以下は任意です。

App プレビュー
動画を登録できます。M4V、MP4、MOV のいずれかの形式で、500MB 以内のサイズにします。スクリーンショットよりも先に表示され、必ず 1番目の要素になります。

必要な画像の形式

それぞれの画像を以下の形式で用意する必要があります。

App Store アイコン

1024 x 1024 px

6.5 インチのスクリーンショット

以下のいずれかのサイズで画像を用意します。該当するサイズのシミュレータでスクリーンショットを取得してそのままの画像でもいいです。他にも、端末の枠を用意してその中にはめこんで、テキストを重ねて配置するという画像もよく見ますね。

1284 x 2778 px 縦向き
2778 x 1284 px 横向き
1242 x 2688 px 縦向き
2688 x 1242 px 横向き

5.5 インチのスクリーンショット

以下のいずれかのサイズで画像を用意します。こちらも6.5 インチのスクリーンショットっと同様に画像を用意すればいいです。

1242 x 2208 px 縦向き
2208 x 1242 px 横向き

ストアでの見え方

画像の向きについては縦横どちらでも、任意のものを用意すればいいです。縦向きの画像と横向きの画像でストアの見え方が異なるので、実際の表示を紹介します。

縦向きの画像を用意した場合

以下の画像のように縦の画像が 3つ並びます。 1つ 1つは大きくないので文字が小さくなってしまいます。

3つ分の画像が見せられるので、いろんな機能を紹介したい場合は良いですね。

横向きの画像を用意した場合

以下の画像のように横の画像が 1つ表示されます。縦の画像を用意した場合よりも大きくなるので、文字がみやすいです。

横向きの画像の中で、縦にしたスマホのスクショを載せるとかも問題ありません。

一覧で見せられるのが1枚だけなので、表現できる画面数が少なくなりますね。インパクトのある画像やテーマ・キャッチコピーで目を引きたいなどの作戦であれば、こちらが良いですね。

おわりに

アプリをビルドしてからも、ストアで公開するまではいくつか必要な設定があり、今回紹介したスクリーンショットもそのうちの 1つです。

ストアでの見え方は、ユーザーに見つけてもらい興味を持ってもらうための重要な表現です。アプリのインプレッション数やインストール数に大きく影響しますので、しっかりルールを学んで効果的な画像を用意できるといいです。

React Native Web で React Navigation を使う場合の URL の設定方法

Tue, 05 Oct 2021 00:00:00 GMT

React Native Web を使って、React Native で実装したアプリケーションを Web で発信します。

その際に React Navigation を使って SPA のナビゲーションを用意した場合の、URL 統合のやり方についてのメモです。

昔の React Navigation バージョンでは、Web でも自動的にページ遷移時の URL 書き換えが行われていました。しかし、いつからか設定が必要になった様子です。

ナビゲーションについて React Navigation を利用している場合に、画面遷移時の URL 統合と URL でのページアクセスができるようにするための設定方法のメモを以下に記載しています。

概要

現象
ドキュメント
NavigationContainer に linking Props を渡す
route と URL path の対応を設定
route がネストしている場合
Netlify で発信する際、redirect rule の設定が必要

現象

React Navigation を最新にアップデートしたところ Web で開いた際の URL がずっとルートディレクトリのままになりました。 URL を入力して直接各ページにアクセスしてもかならずトップページが表示されてしまう状態になっていました。

もちろん SPA なので、トップページから各要素をクリックすればコンテンツは切り替わるので機能は利用できます。ただ、画面が切り替わってもURLが変わりません。URL が統合されていないとブラウザのブックマークとか、リンク貼る時とかに困りますよね。

ドキュメント

以下のドキュメントの内容に従って、URL path と route の対応の設定する必要があります。 https://reactnavigation.org/docs/configuring-links/

NavigationContainer に linking Props を渡す

まず、NavigationContainer に linking という props を追加する必要があります。

ドキュメントでは以下のような説明になっており、prefixes はURLスキーマなどの設定で、config の方が URL path の設定になります。今回は URL と route の対応づけを行うので config の設定を追加する必要がありました。

const linking = {
  prefixes: [
    /* your linking prefixes */
  ],
  config: {
    /* configuration for matching screens with paths */
  },
};

~~~

    <NavigationContainer linking={linking} >
      {/* content */}
    </NavigationContainer>

route と URL path の対応を設定

上記のlinking の config に以下のようなオブジェクトを渡すのが基本になります。

/feed の URL が Chat スクリーンに対応します。/user の URL は Profile スクリーンと対応します。

こうすると、Profile スクリーンに遷移すると URL が /user になりますし、URL で直接 /user にアクセスすると Profile スクリーンが開きます。

const linking = {
  prefixes: [
    /* your linking prefixes */
  ],
  config: {
    screens: {
      Chat: 'feed',
      Profile: 'user',
    },
  },
};

route がネストしている場合

単純な rouet の構造であれば上記で問題ないのですが、ナビゲーションがネストしている場合はもう少し複雑な設定が必要になります。

私のアプリでは Tab ナビゲーションの中に Stack ナビゲーションがあって、その中に Drawer ナビゲーションがあるというネストした形でした。
結論、以下の形になりました。

  const linking = {
    config: {
      screens: {
        ReactNative: {
          screens: {
            ReactNativeDrawer: {
              screens: {
                ReactNativeHome: "",
              },
            },
            Icons: "Icons",
            FlexBox: "FlexBox",
            Shadow: "Shadow",
          },
        },
        Web: {
          screens: {
            WebHome: "WebHome",
            SampleImage: "SampleImage",
          },
        },
      },
    },
  };

ちょっと解説すると、一番親として Tab ナビゲーションがあります。以下の部分です。ReactNative と Web の route があります。

config: {
  screens: {
    ReactNative: {
    },
    Web: {
    },
  },
},

で、その ReactNative は Stack ナビゲーションです。以下の部分です。
ReactNativeDrawer ・ Icons ・ FlexBox ・ Shadow の route があります。 Icons は /Icons の path が割り当てられています。FlexBox と Shadow も同様です。

ReactNative: {
  screens: {
    ReactNativeDrawer: {
    },
    Icons: "Icons",
    FlexBox: "FlexBox",
    Shadow: "Shadow",
  },
},

この中の ReactNativeDrawer も要素は 1つですが Drawer ナビゲーションを使ったネストになっています。ReactNativeHome という route があります。

ReactNativeDrawer: {
  screens: {
    ReactNativeHome: "",
  },
},

これでそれぞれの route に対して、path が設定されます。画面を遷移すると URL も更新されますし、直接 URL でアクセスすると該当の route が開くようになります。

意図通りに動かない時は、ネストの構造や指定の仕方が間違っている場合があります。親の要素から順番に確認していきましょう。

Home 画面の path

今回のアプリでは ReactNativeHome が Home 画面ですので URLを / にします。

その場合は上記でもしていますが、空文字を設定します。

    ReactNativeHome: "",

Netlify で発信する際、redirect rule の設定が必要

今回作ったシステムが、React Navigation を利用したSPAなので、リダイレクト設定が必要になります。

ローカルで動かしている時は正常にURLが解決していたのですが、Netlify にデプロイしたところうまく処理されなくなりました。ページがあるはずのURLでアクセスすると 404 エラーになる状態でした。

netlify.toml をプロジェクトのルートに設置することで Netlify の発信の設定ができるので、ここに以下の内容を追加することで解決できました。

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

おわりに

以前は設定なしでも、URLが解決されていたのですが React Navigation のバージョンアップにより設定が必要になっていました。 URL が切り替わらない SPA だと、ブラウザでのブックマークとかで困りますし、アクセスの度にホームから遷移しないといけないのは少し不便です。

ちょっと複雑ですが対応しておけば、あとは React Navigation が制御してくれるので便利です。

GET パラメータの制御などもここで行うことになります。ドキュメントに書いてあるので、必要な場合は一緒に確認しておきましょう。

React Native に関する便利ツールを作成した。

Mon, 04 Oct 2021 00:00:00 GMT

React Native Web を利用して、Web上で使える React Native の便利ツールを作りました。

React Native U-tools

概要

ツールについて
アイコン探せる @expo/vector-icons preview
影のスタイルを試せる React Native Shadow Simulato
FlexBox のスタイルを試せる React Native FlexBox Style Creator

ツールについて

GitHub リポジトリ

Gatsby とかでWeb用に作ってもよかったのですが、React Native Web を試してみたいと思い、React Native を使って Webサイトを実装しています。 ReactNative のStyle のプレビューなどを作ってみました。

ReactNative で書いたものが html に変換されているので、アプリと全く同じ表現にはなっていないはずです。ある程度は再現されていることを期待しています。

Expo を利用して、Netlify 上でビルドし発信しています。

アイコン探せる `@expo/vector-icons preview`

https://honmushi-u-tools.netlify.app/Icons/

@expo/vector-icons のアイコンを探せます。

アイコンセットのファミリーを選択して表示でき、アイコン名で絞り込みができます。コピーできるようにコードも表示しています。

@expo/vector-icons は react-native-vector-icons を使っています。基本的にはここで見つけたアイコンは react-native-vector-icons で同じアイコンを利用できます。

影のスタイルを試せる `React Native Shadow Simulato`

https://honmushi-u-tools.netlify.app/Shadow/

React Native での影のスタイルをいろいろ試すことができます。 iOS と Android で指定する属性が異なるので、その部分が簡単に確認できたらいいなと思い作成しました。

Android のelevation による指定については、CSS においてどのように変換されるのかわからなかったので未実装です。React Native Web では無視されていた様子でした。それっぽく変換してくれるライブラリなどは見つかるのですが、正しいのかわからなかったので一旦諦めています。

iOS のものについてもあくまで React Native Web で Web の CSS に変換しているものです。アプリでの表示と完全に一致するわけではないなのでご注意ください。

FlexBox のスタイルを試せる `React Native FlexBox Style Creator`

https://honmushi-u-tools.netlify.app/FlexBox/

React Native での FlexBox のスタイルをいろいろ試すことができます。 React Native Webを用いることで、アプリでFlexBoxを指定した時の挙動を再現してます。

Webとの差異や、flex関連の属性の挙動を試すことができます。

おわりに

React Native で Web ページも作れるのは簡単で便利ですね。

今回作ったものはアプリ開発時に使おうと思っているので、実際の端末で使うことは想定していません。開発時にPCのブラウザで参照する使い方を想定しています。

できればレスポンシブ対応とかできたらいいんですが、その辺の Style が React Native Web だと難しそうだったので、見送りとしています。

他にも便利そうなものを思いついたら追加していきます。

React Native Web 関連の新たな仕組みとかできたら、そちらもキャッチアップしていければと考えています。

React Native で要素に影をつける

Wed, 29 Sep 2021 00:00:00 GMT

React Native でアプリを作る際に、要素に影をつける時の指定方法とその属性の解説です。

StyleSheet を使って簡単に影を表現できますが、OS で実装が異なるのでその部分についてのメモです。とはいえ簡単に実装できるので、一度やってみたら簡単に覚えられるはずです。

ドキュメント

公式のドキュメントにも詳細書いてあります。

https://reactnative.dev/docs/shadow-props

OS ごとに影の Style の指定方法が異なる部分は要注意です。異なる OS の指定については無視されるので、OS を指定しての Style 分岐は必要なく両方指定しておけば問題ありません。

iOS の場合

要素に渡せる Style Props として以下のものが用意されています。

shadowColor

影の色を指定できます。web で指定する時の box-shadow の color プロパティにあたるものです。

const styles = StyleSheet.create({
  button: {
    shadowColor: "#333",
  },
});

shadowOffset

影のオフセットを指定できます。影の位置みたいなものですが、どの方向に伸びるのかという指定になります。 width が横方向、height が縦方向です。マイナスの値を指定できます。

web で指定する時の box-shadow の offset-x, offset-y プロパティにあたるものです。

const styles = StyleSheet.create({
  button: {
    shadowOffset: { width: 4, height: 4 },
  },
});

shadowOpacity

影の不透明度を指定できます。 shadowColor にて不透明度を指定するのと同じです。両方で指定した場合掛け合わせた数値が表示に反映されます。

const styles = StyleSheet.create({
  button: {
    shadowOpacity: 2,
  },
});

shadowRadius

影のぼかしの大きさを指定できます。 0 を指定した場合はぼかしのないくっきりした影、大きい値を指定するほどぼかしが強くなります。

web で指定する時の box-shadow の blur-radius プロパティにあたるものです。

const styles = StyleSheet.create({
  button: {
    shadowRadius: 4,
  },
});

Android の場合

Android の場合はelevation を使います。 web でいう z-index も同時に指定されます。

const styles = StyleSheet.create({
  button: {
    elevation: 4,
  },
});

React Native での影の表現を試せる Web ページを自作しました

上記実際にアプリ作って試せばすぐわかるのですが、簡単に影のStyleを調べたい時があったので、Web 上で React Native の影の表現を試せるページを自作しました。

React Native U-tools / React Native Shadow Simulator

React Native Web で作っているので、React Native のコードが Web の表現に置き換えられて表示されてます。完全にアプリのものと一致するわけではないですが、影に関するパラメータの挙動確認に役立っています。

おわりに

Web の CSS と似た形での指定になるのでわかりやすいです。この辺が React Native のいいところですね。

OS によって変えないといけない部分は少し厄介ですが、そこさえ理解しておけばいろんな表現ができます。

@testing-library/jest-native を使って、React Native のテストをもっと便利にする

Wed, 08 Sep 2021 00:00:00 GMT

以前の記事で、@testing-library/react-native を使って、テストを実装する方法を紹介しました。

@testing-library/react-native でスナップショットテスト

この情報に加えて、@testing-library/jest-native を追加で設定すると、よりテストを便利にかけるようになります。

以下、上記の内容などを参考に @testing-library/react-native を使えるようにした上でご確認ください。

ドキュメント

https://github.com/testing-library/jest-native

インストール

いつも通りです。npm もしくは yarn を使ってインストールしましょう。
テストで使うものなので、dev 環境へのインストールです。

npm install --save-dev @testing-library/jest-native

設定

パッケージをインポートする必要があります。
簡単なやり方としては、jest.config.json に以下を追加することで対応できます。

module.exports = {
  setupFilesAfterEnv: ["@testing-library/jest-native/extend-expect"],
};

これで React Native のテストをする上で、便利な matcher を利用できるようになります。

Matcher の紹介

toBeEmpty
要素が空の場合、 true になります。
toContainElement
要素の子やさらにその子とほっていき、渡されている要素が含まれるかをチェックします。
toHaveProp(string,value)
要素が特定の prop を受け取っているかをチェックできます。 prop のキーとその value をチェックできます。
toHaveTextContent(string)
要素が特定の text を要素に持っているかをチェックできます。
toHaveStyle(object)
要素が特定の style オブジェクトを受け取っているかをチェックできます。

他にもいくつかありますが、ざっと便利なのはこんな感じでしょうか。

注意点

ドキュメントに書いてありますが、ネイティブにブリッジするUI要素のみで作用するとのことです。拡張されているUIコンポーネントライブラリとかだと、上手くヒットしないことがあります。

Keep in mind that these queries will only work on UI elements that bridge to native.

その他ざっくりとしたテストのメモ

上記設定することで一通りコンポーネントUIの簡単な描写のテストはできるようになります。

たとえばいくつか紹介します。

要素がある・要素がない

    const output = component.getByDisplayValue(mockConsoleText);
    expect(output).toBeTruthy();

    const noOutput = component.queryByDisplayValue(mockConsoleText);
    expect(noOutput).toBeNull();

ここでは要素を getByDisplayValue で探しています。TextInput の入力されている文字列で検索する時に使います。
getByDisplayValue は存在すればその要素を取得できますが、ない場合は見つからないというエラーになってしまいます。

ですので、要素がないことをテストする場合は queryByDisplayValue を使います。
存在しない場合は null になるのでそれをチェックすれば検証が可能です。

getBy を使う場合は存在しないとエラー、queryBy を使う場合は存在しないと null とか空配列になります。適した用途で使い分けましょう。

特定のstyle が効いている

    const closeButton = component.getByText("close");
    fireEvent.press(closeButton);

    const touchable = component.getByTestId("fontFamilyItem");
    expect(touchable).toHaveStyle({ backgroundColor: Colors.primary });

上記でも紹介している toHaveStyle を使って、要素の背景色が意図通りになっているかチェックします。ボタンをタップするイベントを操作した後で、表示がアクティブなものになっているかのチェックなどに使えますね。

おわりに

React Native のテストがより便利になるパッケージを紹介しました。 @testing-library/react-native では jest を使っているので、さまざまな便利な使い方ができます。

https://jestjs.io/ja/docs/getting-started

一度 jest のドキュメントを見てAPIや使い方を学んでおくと、test の組み立て方やチェックすべきことの設計がやりやすくなります。

テスト書いておくと、リファクタリングにももちろんですし、さまざまな恩恵が受けられます。テストしやすいように実装することを心がけることで、より綺麗なコードになるという考えもあるので、個人的にはテストは絶対用意したい派です。

React Native ~JavaScriptによるiOS/Androidアプリ開発の実践がReact Nativeの勉強におすすめです

Mon, 06 Sep 2021 00:00:00 GMT

React Native の開発についてまとまった知識が得られる本です。

サンプルのソースコードもたくさんのっていますし、ストアやWebページのスクリーンショットなども丁寧に掲載されているので初心者でもわかりやすいです。

実際に参考のアプリを確認しながら、同じようなものを実装していくスタイルで進んでいくのでやっていることも明確にイメージできてよかったです。

TypeScript ・React Native の基本的な文法にも軽く触れていますし、言語の仕様やストアの設定の方法、おすすめのパッケージの導入・実装方法なども幅広く書かれています。ですので、この1冊があれば、基本的な構築・ビルド・ストアでの公開など一通りできるようになります。

たくさん書いてある分ページ数も700ページ近くと、かなり厚い本です。大きいだけあって内容も充実していますし、幅広くかつ必要なところはしっかり堀り下げられていますので、とてもわかりやすかったです。

React Native ~JavaScriptによるiOS/Androidアプリ開発の実践

概要

以下目次から各章のタイトルを抜粋したものです。

React/React Native の概要とその背景
TypeScriptとECMAScript2015 の基本を押さえる
開発環境の構築
React Native の基本
作成するアプリケーションの仕様策定
テストによる設計の質の向上
Navigation の概要と実装
Atomic Design とコンポーネントの実装
データフローの設計および実装
Firebase を使ったバックエンド連携
E2Eを実装する
アプリストアへの公開

前提

この本では前提として以下は学んでいるものとして書かれていますので注意しましょう。

JavaScript
HTML
CSS
Git

もちろんわからないことがあっても都度調べながらでも問題ありません。ただ、Gitとかに全く触ったことがないという場合は少し難しいです。

あとはiOSアプリの開発もあるのでmacOS環境が想定されています。 WindowsでもAndroidアプリのみであれば開発できるので、その部分だけ注意すれば問題ないです。

環境構築

環境構築についても触れられています。基本的に React Native の環境構築は簡単なので、ドキュメント見るだけでも問題ないです。この本では丁寧に説明されているので初心者でも安心です。

他にも JavaScript の基本的な構文や、TypeScript の書き方なども説明があります。全般 TypeScript を用いた形式になっているのも嬉しいところです。

品質

テストの設計方や実装方法、などについても書籍では触れられており、実際に一通りのテストの実装を行います。スナップショットテストもあれば、EtoEテストもありますし、CIを用いた自動テストも書かれています。構築に関することに止まらず品質に関する知識や技術も学ぶことができます。

実際の現場でも必要になるような知識がしっかり書かれているので、この辺りも飛ばさずにしっかり学んで欲しいです。

コンポーネント設計

コンポーネント設計としてよく取り入れられる「Atomic Design」についても実際のアプリの設計をしながら学ぶことができます。

もちろん常に Atomic Design を使うのが最善というわけではありません。大まかな概念とか基本的な構造の1パターンとして把握して置けると、他の設計パターンやルールの把握も素早くできるようになります。

印象としては、Atomic Desgin を独自にカスタマイズした設計構造を取り入れている現場が多いです。基本的な語句については理解しておくといいです。

データの扱い

Redux について解説している章もあり、Navigation なども含めて、React Native を使う上で一通り必要な知識は得ることができます。 Redux の概念は難しいので初心者は挫折しがちなイメージです。理解できなかったらとりあえず先に進めるのでもいいです。実装終わってから振り返って見た方が早く理解できることもあります。

Firebase を使ったバックエンド構築も簡単にですが書かれていますので、通信が必要な難しいアプリについての応用も方針ぐらいはわかります。

ストアでの公開

アプリ構築後のビルド、ストアへの公開もしっかりサポートされています。終盤になってちょっと早足になっていますが、各ストアのスクリーンショットなども掲載されています。初めて触る方でもなんとかリリースまで進められるはずです。

各ストアのUIは頻繁に変わるので、古くなってしまう可能性もあります。ただ、大きな概念としては参考になります。

各ストアのドキュメントも参考にすることで、ストアでの申請・リリースを正しく進められます。

ちょっと足りないところ

デバッグツール React Native のデバッグ方法とかはもうちょっと詳しく書いてあるとよかったです。基本的にエラーがコンソールに表示されますし、console.log でデバッグもできるので最初のうちはそれほど必要ないですが。

コンポーネントの描写の詳細や、Redux Store の状態など調べたいと思った時に各デバッグツールの詳しい使い方を知っていると心強いです。

React について React の描写フローとか、概念についての解説が少ないないです。詳しくわからなくても全然実装できるのですが、state の取扱とかで間違えた書き方をすると、思わぬ動作をしたりエラーになったりすることがあります。

その辺もサポートされているといいですが、流石にややこしいのでこの本に書き切るのは難しかったですかね。公式のドキュメントで学ぶことができるので、わからない時にはそちらを確認するようにしましょう。

おわりに

React Native 関連の知識が幅広く書いてあるので、これから始めようという人にもおすすめですし、すでに始めている人でも得られる知識や技術が多いです。

本がとても厚いので途中で投げ出さないようにモチベーションを維持するのが重要です。なにか作りたいものを決めて取り組むとか、目標の日付を決めて取り組むとかしてしっかり読了して欲しいです。

読み切ることとしっかり内容を身につけることができれば、かなり React Native での開発は身についていると言えます。それくらい幅広くカバーされてます。

700ページなので、本で買うよりも電子書籍で買うのがおすすめです。ソースコードのコピーとかもやりやすいですし、後から知りたい情報を読み返す時に検索ができるので便利でした。

React Native でアイコン画像の実装とアイコンの探し方

Wed, 01 Sep 2021 00:00:00 GMT

React Native でアイコンを実装するやり方です。

React Native Vector Icons で簡単にアイコンやアイコン付きのボタンが実装できます。特別難しいことはありませんがやり方を紹介します。

Expo を使っている場合は @expo/vector-icons を使うことができます。

ついでに目的のアイコンの探しかたも書いておきます。

概要

React Native Vector Icons
@expo/vector-icons
アイコンの探し方

`React Native Vector Icons`

React Native Vector Icons を使う場合の実装を紹介です。

https://github.com/oblador/react-native-vector-icons

インストール

いつも通り npm もしくは yarn でのインストールです。

npm install react-native-vector-icons

アイコンを実装

使えるアイコンセットには種類がいくつかあり、その中から必要なものを選択します。

AntDesign by AntFinance (297 icons)
Entypo by Daniel Bruce (411 icons)
EvilIcons by Alexander Madyankin & Roman Shamin (v1.10.1, 70 icons)
Feather by Cole Bemis & Contributors (v4.28.0, 285 icons)
FontAwesome by Dave Gandy (v4.7.0, 675 icons)
FontAwesome 5 by Fonticons, Inc. (v5.13.0, 1588 (free) 7842 (pro) icons)
Fontisto by Kenan Gündoğan (v3.0.4, 615 icons)
Foundation by ZURB, Inc. (v3.0, 283 icons)
Ionicons by Iconic Framework (v5.0.1, 1227 icons)
MaterialIcons by Google, Inc. (v4.0.0, 1547 icons)
MaterialCommunityIcons by MaterialDesignIcons.com (v5.3.45, 5346 icons)
Octicons by Github, Inc. (v8.4.1, 184 icons)
Zocial by Sam Collins (v1.0, 100 icons)
SimpleLineIcons by Sabbir & Contributors (v2.4.1, 189 icons)

コンポーネントの引数としてアイコンの名前を指定して表示できます。他にもサイズと色を指定できます。スタイルも渡せるので背景色や角丸・ボーダーなどの設定も可能です。

アイコン付きボタンコンポーネントも用意されています。

import Icon from "react-native-vector-icons/MaterialIcons";
~~~

   <Icon size={26} name="info" color="#666" />
   <Icon.Button
     name="info"
     backgroundColor="#888"
     onPress={()=>{}}
   >
     info
   </Icon.Button>

`@expo/vector-icons`

Expo を使っている場合はこちらで実装します。Expo のパッケージに含まれています。使い方はほとんど同じですね。内部的には React Native Vector Icons を使っているようで、バージョンによってアイコンの有無に差がありますので注意しましょう。

import { Ionicons } from '@expo/vector-icons';

~~~

    <Ionicons name="md-checkmark-circle" size={32} color="green" />;

~~~

アイコンの探し方

アイコンを探せるWebページを自作した

目的のアイコンを探すときはいつも公式のページを使っていましたが、ちょっと探しにくかったので自分でアイコン探せる web ページを作成しました。

React Native U-tools / @expo/vector-icons preview

react-native-web で Web ページとしてみれるようにしているので、アプリでの表示と異なる部分があります。アイコン探す分には十分なので私はこれを使ってます。

パッケージのバージョンなどによって、使えないアイコンとかがあるのでそこは注意してください。

公式のアイコンを探せるページ

以下は公式で用意されている一覧のページです。

アイコンセットを横断して探すことができて便利です。もちろんそれぞれのアイコンセットでフィルタリングもできます。それぞれのアイコンセットのページで探すことも可能ですが、UIがバラバラで使いにくいものもあります。

https://icons.expo.fyi/

https://oblador.github.io/react-native-vector-icons/

おわりに

アプリのUIでアイコンを使いたい場面は多いです。 React Native Vector Icons・Expo を使うことで良質なアイコンを簡単に実装できるので覚えておくと良いです。

種類がたくさんあるのでアイコン画像を探すのは結構大変です。お気に入りのアイコンセットを記録しておいて、思いついた時に使えるようにストックしておけるとデザインの幅が増えるのでおすすめです。

React Native アプリでダークモードを実装

Tue, 31 Aug 2021 00:00:00 GMT

React Native アプリでのダークモード実装の例です。

端末で設定しているテーマを取得して、それに応じてアプリの色設定も反映されるようにします。
React Native で用意されているAPIと、ライブラリの仕組みを使った簡単な実装方法を紹介します。

結論を先に言うと

パッケージを利用して provider を設定することと、各コンポーネントで色の呼び出し方を修正することで簡単に対応できます。

対応方法はいくつかありますが、今回は React Navigation を用いたやり方と React Native Paper を用いたやり方を紹介します。

React Navigation を利用した場合は、設定できる色のキーが規定の物しか使えず自由度が少ないです。 React Native Paper を利用した場合、自由に色のキーを追加できます。なので React Native Paper の方がおすすめです。

概要

端末のテーマを取得する
React Navigation でテーマを用意
React Native Paper でテーマを用意

端末のテーマを取得する

端末のテーマを以下で取得します。light または dark の文字列が取得できます。これを使って、テーマを出し分けることになります。

import { useColorScheme } from "react-native";

~~~

    const scheme = useColorScheme(); // "light" or "dark"
~~~

Expo を利用している場合

もし Expo を利用して開発している場合は、追加の対応が必要です。

https://docs.expo.dev/guides/color-schemes/

app.json で以下設定を追加することで、ユーザーの設定した外観設定が反映されるようになります。この設定をしていない場合デフォルトで常に light を返す状態になっています。

  "expo": {
~~~
    "userInterfaceStyle": "automatic",
~~~
  }

React Navigation でテーマを用意

https://reactnavigation.org/docs/themes

provider を用意する

アプリのアクセスポイントとなる App.tsx に provider を用意します。この時に theme を渡すことで、内部の react-navigation コンポーネントに theme の設定値が反映されます。渡す theme を上記 useColorScheme の値によって切り替えることでアプリのテーマ変更を反映できます。

加えて、各コンポーネントで theme に設定されている色コードを取得できるので、それを使って自分で用意したコンポーネントの色も制御できます。

import { useColorScheme } from "react-native";
import {
  NavigationContainer,
  DefaultTheme,
} from "@react-navigation/native";

~~~

  const scheme = useColorScheme();
  const lightTheme = {
    ...DefaultTheme,
    colors: {
      ...DefaultTheme.colors,
      primary: Colors.primary,
      accent: Colors.secondary,
    },
  };
  const darkTheme = {
    ...DefaultTheme,
    colors: {
      ...DefaultTheme.colors,
      primary: Colors.darkPrimary,
      accent: Colors.darkSecondary,
    },
  };

~~~

    return (
      <NavigationContainer theme={ scheme === "dark" ? darkTheme : ligheTheme }>
        <View style={styles.container}>
          <AppNavigator />
        </View>
      </NavigationContainer>
    )

各コンポーネントで theme の色設定を取得する

コンポーネントでは useTheme を使ってテーマの情報を取得できます。色の情報が格納されているので、それを取得してコンポーネントの style に反映します。

import { useTheme } from "@react-navigation/native";

~~~

  const { colors } = useTheme();

~~~

  return (
    <View style={[styles.container, { backgroundColor : colors.primary }]}>
    </View>
  );

上記のように実装することで簡単にダークモードの実装が可能です。しかしReact-Navigation を使った場合、テーマの色として設定できるキーが決まっており、以下の6つのみです。

primary
background
card
text
border
notification

個人的にはこれだけでは足りず、もっと多く設定したいと感じました。他に同様のことができるパッケージを探してみました。

React Native Paperでテーマを用意

同様のことを React-Native-Paper でも可能なことがわかりました。

しかもこちらでは任意のキーでテーマに色を追加でき、色以外にもフォントやアニメーション設定などもテーマとして用意できます。

https://callstack.github.io/react-native-paper/theming.html

provider を用意する

React-Navigation とほぼ同様の実装になります。

import { useColorScheme } from "react-native";
import { Provider as PaperProvider, DefaultTheme } from "react-native-paper";

~~~

  const scheme = useColorScheme();
  const lightTheme = {
    ...DefaultTheme,
    colors: {
      ...DefaultTheme.colors,
      primary: Colors.primary,
      accent: Colors.secondary,
      favorite: Colors.favorite,
    },
  };
  const darkTheme = {
    ...DefaultTheme,
    colors: {
      ...DefaultTheme.colors,
      primary: Colors.darkPrimary,
      accent: Colors.darkSecondary,
      favorite: Colors.favorite,
    },
  };

~~~

    return (
      <PaperProvider theme={ scheme === "dark" ? darkTheme : ligheTheme }>
        <View style={styles.container}>
          <AppNavigator />
        </View>
      </PaperProvider>
    )

各コンポーネントで theme の色設定を取得する

import { useTheme } from "react-native-paper";

~~~

  const { colors } = useTheme();

~~~

  return (
    <View style={[styles.container, { backgroundColor : colors.favorite}]}>
    </View>
  );

React-Native-Paper の場合は任意のキーで色を追加できます。フォント関連のスタイルやアニメーションなどのスタイルも設定できます。こっちの方が便利ですね。

カスタムテーマの型を用意する

上記のように、任意キーの色やプロパティを設定した場合、TypeScript だと型のエラーが出てしまいます。以下のように独自の型の定義を設定することで解決できます。App.tsx に以下の記述を追加します。

declare global {
  namespace ReactNativePaper {
    interface ThemeColors {
      favorite: string;
    }

    interface Theme {
      shadow: {};
    }
  }
}

おわりに

React-Native-paper を用いることで簡単にダークモードの実装を行うことができました。実装の方法は他にもいくつかあるのですが、今回は簡単にできるものを紹介しました。

Expo アプリでの Detox を使った End-to-End テストの実装

Mon, 30 Aug 2021 00:00:00 GMT

タイトル通り「Detox を使った End-to-End テストの実装」についての紹介です。

基本的にはドキュメント通りに進めれば実行可能です。しかし Expo を使ったアプリの場合、うまく動かない現象に遭遇しました。その解決方法も紹介します。

概要

Detox とは
インストール
Expo アプリの場合に必要なもの
テスト実行
エラーがでてテストが正常に動作しない
解決方法
Detox の簡単な使い方

Detox とは

https://github.com/wix/Detox

End-to-End テストを実装するためのパッケージです。

End-to-End テストとは、ユーザーインターフェーステストとも呼ばれる物です。システム全体に対してユーザーが実際に動かす操作を行い、期待した動作になっていることを確認します。スナップショットテストやユニットテストとは異なり、実際にアプリをシミュレータ上で動かして操作を行い期待した動作になることをテストします。

より本番環境に近い形でのテストですね。シミュレータ上で行うので CI でのテスト実行も可能です。

インストール

まずは必要なパッケージをインストールします。いつも通り npm・yarn で、テストでのみ使うので dev にインストールします。

npm install --save-dev detox detox-expo-helpers expo-detox-hook

Detox ではシミュレータを操作するので、必要なツールを brew でインストールします。

brew install --HEAD applesimutils

あとはコマンドラインで操作できるようにcliツールをグローバルにインストールしておきます。

npm install -g detox-cli

インストールが完了した後は以下のコマンドで Detox の初期設定を行うことができます。

detox init -r jest

e2e/ 以下に設定ファイルやテストケースが作成されます。

Expo アプリの場合に必要なもの

上記の init した時点で必要な設定やファイルが一式生成されます。 Expo でテストを行う場合、以下の対応も必要になります。

reloadApp に書き換え
初期の状態では device.reloadReactNative() を各テストの前に呼んでいます。これを detox-expo-helpers の reloadApp に変更する必要があります。

const { reloadApp } = require('detox-expo-helpers');
~~~

describe('Example', () => {
  beforeEach(async () => {
    await reloadApp();
  });
~~~

Expo go App を用意する
さらに、シミュレータで動かすにあたり Expo go アプリの app ソースも必要になります。
Expo go のタウンロードページにて、IPAファイルを直接ダウンロードして解凍を行います。そのディレクトリを Expo.app という名前にリネームしておきます。
プロジェクトのディレクトリに bin/ などのディレクトリを用意して上記 Expo.app を設置しておきます。

https://expo.dev/tools#client

その後 Detox の設定ファイル detoxrc.json に以下を追加します。configurations にて使用できるシミュレータを追加しています。name などは自分の使っているシミュレータに合わせて設定しましょう。

  "configurations": {
    "ios.sim": {
      "binaryPath": "bin/Expo.app",
      "type": "ios.simulator",
      "name": "iPhone 11"
    },
  }

テスト実行

テストを実行する際には Expo でエミュレータ上にアプリを起動しておき、以下のコマンドを実行します。オプションで先程設定したシミュレータを使用するように設定しています。

detox test --configuration ios.sim

すると Detox でのE2Eテストが動き始めます。

エラーがでてテストが正常に動作しない

しかし、私の場合は最初のアプリのリロードは行われるのですが、以降の操作が実行されずテストの項目もチェックされない状態になっていました。ただタイムアウトしてテストが失敗する状態です。

テスト結果には以下の出力がありました。

App has not responded to the network requests below:
  (id = -1000) isReady: {}

どうやら、detox-expo-helpers の reloadApp を実行した際に、アプリの再起動が完了したことをリッスンしているのですが、その信号をキャッチできていないとのこと。なので、アプリが起動しているにもかかわらずテストのチェックや操作が動き出さずそのままタイムアウトしています。

解決方法

解決方法を探したところ以下のissue にてやりとりされていました。

https://github.com/expo/detox-tools/issues/1

ざっくりの解決方法の方針としては、上記の内容を参考に以下のように行いました。

reloadApp にてアプリの起動完了チェックを行わない
アプリの起動完了チェックを自前で行いテストを始める

それぞれの詳細な対応について私の対応方法を以下に記載します。

`reloadApp` にてアプリの起動完了チェックを行わない

detox-expo-helpers に対して patch-package を使って、起動完了チェックを無効化するパッチを作成。

以下パッチの中身です。detox-expo-helpers+0.6.0.patch

diff --git a/node_modules/detox-expo-helpers/index.js b/node_modules/detox-expo-helpers/index.js
index 864493b..5de0839 100644
--- a/node_modules/detox-expo-helpers/index.js
+++ b/node_modules/detox-expo-helpers/index.js
@@ -70,7 +70,7 @@ const reloadApp = async (params) => {
     newInstance: true,
     url,
     sourceApp: 'host.exp.exponent',
-    launchArgs: { EXKernelDisableNuxDefaultsKey: true, detoxURLBlacklistRegex: formattedBlacklistArg },
+    launchArgs: { EXKernelDisableNuxDefaultsKey: true, detoxURLBlacklistRegex: formattedBlacklistArg, detoxEnableSynchronization: 0 },
   });

アプリの起動完了チェックを自前で行いテストを始める

テストケースのreloadAppが起動完了のチェックを行わなくなったので、直後に起動を確認する処理を追加します。アプリの起動後に開く画面、ホーム画面などにtestID={"container"} のコンポーネントを用意しておき、それが表示されたことをチェックしています。

beforeAll(async () => {
    await reloadApp();
    await waitFor(element(by.id("container")))
      .toBeVisible()
      .withTimeout(4000);
  });

~~~

上記対応で、アプリの再読み込みと起動完了のチェックが毎テストの前に正常に行われるようになりました。

テストも正常にシミュレータが動き、テストケースが順番通り実行されました。

Detox の簡単な使い方

さまざまなAPIがありますが、簡単なものだけ紹介します。

  it("should have FAB", async () => {
    await expect(element(by.id("container"))).toBeVisible();
    await expect(element(by.id("FAB"))).toBeVisible();
  });

testID で要素を検出して、toBeVisible で画面に描写されていることをテストします。

  it("should show new memo screen after tap", async () => {
    await expect(element(by.id("FAB"))).toBeVisible();
    await element(by.id("FAB")).tap();
    await expect(element(by.text("create new memo"))).toBeVisible();
  });

testID で要素を検出して、tap で要素のタップイベントを実行できます。シミュレータ上でも動作が行われ、その後の画面の要素の描写を確認することで、画面遷移などが行われたことをテストできます。

おわりに

Expo の場合はいくつか追加の設定が必要になりましたが、無事に Detox を利用できました。

エラーも発生したので Detox 使えないのかもと思いましたが、なんとか動かせました。 detox-expo-helpers の問題の様子？なので、いつか修正されるのを待ちましょう。修正されるまではとりあえずパッチを当てて確認するのがよいです。

E2Eテストが実行できるとインターフェース面でのテストが豊富に実施できるので、とても便利です。ローカル環境だけでなくCI環境でもテストを動かせるようにして、変更のチェックを行えるとさらに便利になります。

@testing-library/react-native でスナップショットテスト

Sat, 28 Aug 2021 00:00:00 GMT

React Native でテストを実装するためのパッケージ @testing-library/react-native の紹介です。

このパッケージを使うことで React Native のコンポーネントのテストを実装でき、UIの変更に対してスナップショットテストを実装することも可能です。

React Native でのスナップショットテストのやり方はいくつかあります。私は React Native Web とStorybook を組み合わせて、Storybook のアドオンで提供されている StoryShot を使っていました。

設定がややこしかったり、そもそも React Native Web を動かすのでちょっと勝手の違う部分があります。Storybook でUIコンポーネントを確認できるのはとても便利ですが。 Webアプリも同時に作っているなどであれば、恩恵をフルで受け取ることができるのでおすすめですが、私はスマホアプリのみだったのでちょっと大袈裟に感じていました。

他のテスト用パッケージを探してみたところ、@testing-library/react-native を見つけたのでこれを使うことにしました。

結論、快適にやりたかったことができたのでとても便利です。導入も簡単ですし、jest と組み合わせて動かせるので他環境のtest とほぼ同様に書くことができます。

概要

パッケージ
インストール
設定
テストケースの用意
スナップショットの上書き
Provider が必要なコンポーネントを含む場合

パッケージ

https://callstack.github.io/react-native-testing-library/

https://testing-library.com/docs/react-native-testing-library/intro

インストール

いつも通り npm・yarn でインストールします。テストにのみ利用するパッケージなのでdev環境へのインストールになります。

npm install --save-dev @testing-library/react-native

設定

とくに設定は必要ありませんでした。 Expo を使っている場合に関連するパッケージのWarnなどが出ている場合、jest 設定ファイル jest.config.js の preset を以下のように変更すると解決できました。

module.exports = {
  preset: "jest-expo",
}

テストケースの用意

例えば以下のように描きます。render メソッドで対象のコンポーネントをシミュレートでき、それに対して JSON に変換して Snapshot を撮影したり、タップイベントを発生させたりできます。

import { render, fireEvent } from "@testing-library/react-native";

~~~

import { CustomComponent } from "../../../../src/components/CustomComponent";

describe("CustomComponent", () => {
  it(`CustomComponentを描写`, () => {
    const component = render(<CustomComponent />);
    expect(component.toJSON()).toMatchSnapshot();
  });
  it(`ボタンをタップしたとき、pnPressメソッドを実行する`, () => {
    const onPressMock = jest.fn();
    const component = render(
      <CustomComponent onPress={onPressMock} />
    );

    const button = component.getByTestId("customComponentButton");
    fireEvent.press(button);
    expect(onPressMock).toBeCalled();
  });
});

スナップショットの作成のみでなく、fireEvent を使うことで要素のタップ動作のテストも行うことができます。タップさせたりする際に要素を指定する必要があります。その場合は要素の「testID」propで検索するgetByTestIdや、「」コンポーネント内の文字列で検索するgetByTextなどがあり、それらで探します。

原則的には「実装に近い形でテストが用意できるほど良い」というような考え方があるので、テストのためだけにtestID を設定するのは避けるべきとされているようです。しかし、Detoxなどend-to-end テストのツールなどでも利用できることを考慮すると、積極的に使ってもいいと考えています。実装の際にprop が1つ増えるのですが、テスト描きやすくなるので個人的にはtestIDを積極的に使う方針にしています。

スナップショットの上書き

初回にテストを実行した場合、スナップショットのファイルが生成されます。次回以降はスナップショットに差分があればtest が失敗するようになります。

テストを行いスナップショットの差分を確認して、意図した内容であれば --updateSnapshot のオプションを指定してjestを実行することでスナップショットの上書きを行うことができます。

Provider が必要なコンポーネントを含む場合

react-native-paper など、親コンポーネントにProvider を設定しておく必要があるコンポーネントの場合、そのままrender するとエラーになってしまいます。

その場合は、以下のようにカスタムrender を定義したファイルtest-util.jsを用意して、そちらのrender を利用できるようにするとテストを動かすことが可能です。

https://testing-library.com/docs/react-native-testing-library/setup

import { render } from "@testing-library/react-native";
import { Provider as PaperProvider } from "react-native-paper";

const AllTheProviders = ({ children }) => {
  return <PaperProvider>{children}</PaperProvider>;
};

const customRender = (ui, options) =>
  render(ui, { wrapper: AllTheProviders, ...options });

// re-export everything
export * from "@testing-library/react-native";

// override render method
export { customRender as render };

@testing-library/react-native ではなく、test-util.js から render をimport すれば、Provider が必要なコンポーネントもテストできます。

ちなみに、jest.config.js に以下の記述を追加することで、test-utilをパスで指定しなくてもimport { render } from 'test-utils'; で指定できます。カスタムrender を用意する場合は便利なので対応しておくと良いです。

module.exports = {
  moduleDirectories: [
    'node_modules',
    'utils', // a utility folder
    __dirname, // the root directory
  ],
}

おわりに

@testing-library/react-native を使うことで簡単にコンポーネントのテストを用意できます。

testing-library としてまとまった仕様になっており、jest を使ったテストケースの書き方なのでわかりやすく、React など他の環境でも同様の書き方になるので応用できます。

単純なユニットテストを行う分には十分なAPIが用意されているので、快適にテストを行うことができ開発の手助けになること間違いないです。

iOS シミュレータの便利コマンド

Thu, 26 Aug 2021 00:00:00 GMT

Mac で iOS シミュレータを動かしている時の便利なコマンドのメモです。

画面をタップして諸々の操作は可能ですが、物理端末とは違うのでできない操作や、動かしづらい操作があります。

開発の際に個人的によく使うコマンドをメモしています。

便利コマンド

ctrl + cmd + z 振る。Expo の場合メニューが出るので便利
cmd + s 画面のスクリーンショットを取る
cmd + k キーボードのトグル
shift + cmd + h ホーム画面へ
shift + ctrl + cmd + h App Switcher バックグラウンドアプリ選択
cmd + r 画面を録画
cmd + , シミュレータの設定
cmd + ← シミュレータを左に回転
cmd + → シミュレータを右に回転
cmd + h シミュレータを非表示
cmd + m ウィンドウ最小化
cmd + ↑ 音量アップ
cmd + ↓ 音量ダウン
shift + cmd + a ダークモード切り替え
alt + cmd + - 文字サイズ縮小
alt + cmd + + 文字サイズ拡大
cmd + / シミュレータのシステムログの表示
cmd + 1 ウィンドウを物理サイズに設定
cmd + q 終了

おわりに

シミュレータで使えるコマンドはそれほどありませんが、端末を振ってExpoのメニュー出す・スクリーンショット取る・キーボードのトグルなどは使う機会多いので、覚えておくと良いです。

Android でもコマンドあるはずなので、機会があればそちらもまとめておきます。

Neovim の terminal mode

Thu, 26 Aug 2021 00:00:00 GMT

Neovim の terminal mode の操作についてのメモです。

terminal mode は Vim 及び Neovim のウィンドウでターミナルのコマンドの実行・結果の表示ができるものです。ファイルを編集しながらコマンドを実行したりできるので、とても便利です。

使うときにちょっと癖があるので便利になる設定と基本的な使い方を以下にメモしています。

概要

terminal mode
便利なコマンドを設定

terminal mode

:terminal コマンドでterminal mode に入ります。Neovim の場合は現在のウィンドウで開かれます。短縮版の :term や :te でも同様です。

別のウィンドウで開く場合は :vs|te とかで開くのが簡単でおすすめです。画面を分割してから terminal mode に入ります。

terminal-job モードでコマンド実行

terminal mode では最初は terminal-normal モードになっていて、ターミナルへの入力はできません。ターミナルの出力を遡ったりヤンクやペーストのみできる状態です。Vim でいうノーマルモードに近いです。

iキーで terminal-job モードに入ることができます。Vim でいうインサートモードに近く、ターミナルの入力・実行ができます。

terminal-normal モードに戻る

コマンド実行後は元のファイル編集ウィンドウに戻りたいですが、job モードではウィンドウ移動ができません。 <C-\><C-n> で terminal-normal モードに戻ることができます。そうすればウィンドウの移動ができます。

便利なコマンドを設定

上記で説明しましたが、terminal-normal モードに戻る <C-\><C-n> はちょっと覚えにくく操作もしづらいですね。私は以下のコマンドを設定して <C-[> で terminal-normal モードへ戻れるようにしています。

tnoremap <C-[> <C-\><C-n>

tnoremap でterminal mode のキーマッピングを設定できます。

あとは、以下のコマンドで編集中ファイルのパスを取得してレジスタへ保存できるようにしました。

nmap <silent> <Leader><Leader>p :let @* = expand("%")<CR>

これで terminal mode に入り、npm test などを編集中ファイルのパスを渡して実行することで、編集中ファイルに対してコマンドを実行できます。

おわりに

Neovim 上でターミナルを操作できると、出力などをヤンクしたり検索したりでき、とても便利です。ちょっとモード切り替えなどに癖があるので、その部分だけコマンドを用意してあげればとても使いやすくなります。

tmux でペイン分割してターミナル操作でもいいですが、Neovim 上で解決できる方法も知っておくと便利な場合もあるのでおすすめです。

利用しているライブラリのライセンスを一覧で表示する画面を作成する

Thu, 26 Aug 2021 00:00:00 GMT

オープンソースのライブラリを利用するに当たって、ライセンスによっては使用していることを表示しないといけないものがあります。

Webページなどでは、簡単にソースを見られるのでそこで表示していることにできます。しかし、アプリの場合はソースが通常は見られないので表示用のページを作成して、そこへ書き並べることになります。

今回はその対応の内容をメモしています。

概要

ざっくりとは以下の対応です。

ライセンスの一覧情報テキストを作成
~~npm-license-crawler を利用して~~
license-ls を利用して使用しているパッケージのライセンス一覧をまとめたjsonファイルを作成。
アプリ内に表示ページを作成
上記の json ファイルを読み込んで、一覧表示するライセンス画面をアプリに実装。

ライセンスの一覧情報テキストを作成

~~いくつか方法はあるようですが、今回は npm-license-crawler というライブラリを使いました。~~

他のライブラリでlicense-lsというものが便利だったのでこちらを利用します。ライセンス情報をまとめてファイルに出力できるものです。

https://github.com/morficus/license-ls

実行

私は package.json に以下のように script を用意して実行しました。依存しているパッケージは対象にしない、json 形式で license.json に出力するなどの指定をオプションで指定してます。 package.json で指定しているライブラリのもののみが出力され、依存の依存になっているものは対象外になります。アプリが直接依存しているもののみ抽出できるのでわかりやすくなります。

  "scripts": {
    ~~~
    "license": "npx license-ls --depth=0 --prod --format=json > './src/licenses.json'",
  },

指定したファイルに json 形式で出力されているはずです。パッケージの情報のオブジェクトの配列になっています。

アプリ内に表示ページを作成

上記の json ファイルを使ってライセンスページを作成します。特に難しいことはなく FlatList でリスト表示しています。

json の中身はオブジェクトの配列になっているので、そのままFlatListに渡すことができます。 FlatList の data に渡して、各要素でURLとライセンスの名前・形式を取得しています。

タップした際には該当のパッケージのライセンスページをブラウザで開くようにしました。

const licenseFile = require("./licenses.json");

export const LicensesScreen = () => {

  const openUrl = (url: string) => {
    WebBrowser.openBrowserAsync(url);
  };

  const LicenseItem = (props) => {
    const { packageItem, onPress } = props;
    const { name, license, homepage } = packageItem;
    return (
      <TouchableOpacity
        style={styles.licenseItem}
        onPress={() => {
          onPress(homepage);
        }}>
        <Text style={styles.packageName}>{name}</Text>
        <Text style={styles.license}>{license}</Text>
        <Text style={styles.url}>{homepage}</Text>
      </TouchableOpacity>
    );
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={licenseFile}
        renderItem={({ item }) => {
          return <LicenseItem packageItem={item} onPress={openUrl} />;
        }}
      />
    </View>
  );
};

おわりに

ユーザーが使うことはない機能ですし後回しになりがちですが、ライセンスの規約に従うことは大切ですのでしっかり対応しておきたいです。

形式は特に指定がないのでそのままのテキストを表示するだけでもいいですが、必要であればStyle等を用意して整形しましょう。

現状、パッケージを追加するたびにコマンドを実行してライセンス一覧を更新する必要があります。その辺りも自動化できるように script を強化したいと考えています。

React Native の AsyncStrage が Deprecated となっているので、別のパッケージに変更する

Wed, 25 Aug 2021 00:00:00 GMT

タイトルの通りです。 React Native に含まれている AsyncStrage が、少し前からDeprecatedとなっていました。

すぐに使えなくなるわけではないようですが、別のものに交換するよう勧められていたので対応を行いました。

https://reactnative.dev/docs/asyncstorage

データ保存の実装についてはパッケージを交換しても問題ないですが、パッケージの変更に伴いデータが初期化されたりするのだろうかと懸念していました。結論、データの初期化とかは発生せず、平和に移行できました。

以下対応内容です。

対応

対応は簡単で、コミュニティで開発されている代替となるパッケージに交換するだけです。全く同じように使えるものがあったので、そちらを選択しました。以下のページで代替となるパッケージを探します。

https://reactnative.directory/?search=storage

今回は@react-native-async-storage/async-storage を選択しました。
いろんな環境に対応している様子です。さらに、もともとのコンポーネントと同様の使い方ができます。

https://github.com/react-native-async-storage/async-storage

以下のドキュメントに従ってインストールを行い、該当箇所のパッケージの呼び出し元を変更していくだけです。

https://react-native-async-storage.github.io/async-storage/docs/install/

インストール

npm install @react-native-async-storage/async-storage

使い方

使いかたはもともとの React Native の AsyncStrage と同様です。単純にキーを指定して文字列を書き込み・読み出しできます。

import AsyncStorage from '@react-native-async-storage/async-storage';

~~~
   await AsyncStorage.setItem("key", value);
   const item = await AsyncStorage.getItem("key");

おわりに

AsyncStrage はあまり複雑なことができませんが、単純なデータを保存するのみであれば便利に使えます。いずれ利用できなくなる様子なので早いうちにコミュニティで開発されているパッケージへの移動を対応しておきましょう。

今回パッケージを変更しましたが、実際に保存されているデータのパス・キーなどは変わらなかった様子で、データが初期化されるといった現象はありませんでした。懸念していた部分も問題なかったのでよかったです。

Platform Specific Extensions でOSごとにコンポーネントを分岐させる

Wed, 25 Aug 2021 00:00:00 GMT

React Native にてプラットフォームに沿ってコンポーネントを分ける場合のやり方の紹介です。 iOS の場合はこう、Androidの場合はこう、といった分岐をしたい場合の実装方法です。

大きくは以下の 2種類あります。

Platform モジュール
Platform Specific Extensions

それぞれ紹介と実装の際のコツのメモです。

Platform モジュール

以下で利用するものです。1度くらいは使ったことあるのではないでしょうか。

import { Platform } from "react-native"

Platform.OS で現在のOSの種類が取得できます。switch文などを使って、iosもしくはandroidのどちらに一致するかで処理を分岐させれば意図した実装ができます。

他にも以下のようにselect を使えば、モジュールで分岐を書くこともできます。

const valur = Platform.select({ 
  ios: 'ios です',
  android: 'android です',
});

Platform.Version でOSのバージョンを取得することも可能なので覚えておきましょう。

Platform Specific Extensions

もう 1つの方法として、Platform Specific Extensions という仕組みがあります。こちらはios用とAndroid用でコンポーネントの定義ファイルを分けて用意しておくことで、それぞれの環境で該当するものが読み込まれるというものです。

実装

たとえば、component.tsxをOSごとに分岐させる場合、iOS用のコンポーネントはcomponent.ios.tsx。Android用はcomponent.android.tsx というようにファイルを用意します。

利用する時はimport { component } from "./component"; とすることでOSごとに対応する定義ファイルがimport されます。

TypeScript の型を解決

上記のように実装した場合にTypeScriptだと型のエラーが出力されてしまいます。これは、同じディレクトリに型を定義したファイルを設置することで解決できます。上記の場合なら component.d.ts というファイルを設置します。

以下のように型を定義することで、import する際の型の解決に加えて、iOSとAndroidのコンポーネント間の差分のチェックを行うこともできます。

import { component as ios } from "./component.ios";
import { component as android } from "./component.android";

declare var test: typeof ios;
declare var test: typeof android;

export * from "./component.ios";

おわりに

実装の方法は好みでいいのですが、あえてメリットを考えてみましょう。 Platform モジュールを使う場合は、分岐の処理や他方のOSの処理もバンドルされるので、その分容量が大きくなります。 Platform Specific Extensions の方が、ビルドした際にそれぞれのOSのコンポーネントファイルのみをバンドルできるので容量が小さくなります。

とはいえ、大概の場合は少しの差になります。よほどOSごとの処理が大きい場合はその恩恵を受けられます。

それよりも、ファイルを別にすることでコードが読みやすい・管理しやすいといった恩恵もあるので、そちらの方が嬉しいですね。

react-native-dotenv で環境ごとの定数を設定

Tue, 03 Aug 2021 00:00:00 GMT

react-native-dotenv を使って、開発環境・本番環境で切り替わる定数の定義を行います。

ライブラリ

https://github.com/goatandsheep/react-native-dotenv

上記リポジトリの README に沿って設定すれば問題ないです。

インストール

まずはパッケージをインストールします。npm か yarn お好きな方で行いましょう。

npm install react-native-dotenv

babel の設定を追加

まずは babel の設定ファイルに設定を追加します。.babelrc とか babel.config.js などのファイルです。

    plugins: [
      [
        "module:react-native-dotenv",
        {
          moduleName: "@env",
        },
      ],
    ],

定数ファイルを用意

.env.development と .env.production を用意します。中身は以下のように、定数の名前とその値を定義します。環境によって有効になるファイルが切り替わるので、それぞれ開発用と本番環境用のパラメータを設定しましょう。

ANDROID_BANNER_AD_UNIT_ID=<Androidのバナー広告のユニットID>
IOS_BANNER_AD_UNIT_ID=<iOSのバナー広告のユニットID>

バナー広告のユニットIDを設定しています。この場合、開発環境用の.env.development にはテスト用広告IDを設定しておくことになります。

実装

moduleName で指定したパッケージ名としてインポートして定数を利用できます。

import {
  ANDROID_BANNER_AD_UNIT_ID,
  IOS_BANNER_AD_UNIT_ID,
} from "@env";

~~~

      <AdMobBanner
        adUnitID={Platform.select({
          ios: IOS_BANNER_AD_UNIT_ID,
          android: ANDROID_BANNER_AD_UNIT_ID,
        })}
      />

環境ごとにこの定数の中身が切り替わっています。開発環境では .env.development の中身、本番ビルドでは .env.production の中身になっています。

型情報の用意

TypeScript の場合、@env の型情報がないため注意されます。 types/env.d.ts ファイルを作成して、以下のように定数の型情報を設定することで解決できます。

declare module '@env' {
  export const ANDROID_BANNER_AD_UNIT_ID: string;
  export const IOS_BANNER_AD_UNIT_ID: string;
}

手動で作成した型情報を使ったことがない場合は、tsconfig.json に型情報の場所を設定する必要があります。

{
    "typeRoots": ["./src/types"],
}

おわりに

簡単に環境ごとの定数を切り替えることができました。私は広告IDの切り替えや、APIのURL切り替えなどに利用しています。

似たようなことができるパッケージは他にもあるので好みに合わせて使ってみると良いです。

react-native-maps を使って、アプリで地図を表示する

Fri, 30 Jul 2021 00:00:00 GMT

タイトルの通り、Expo アプリで地図を表示する際の実装です。「react-native-maps」というパッケージを使って簡単に実装できます。そのメモです。

Android ではGoogle map Apiを利用することになるので、いくつか設定が必要になります。その辺りの説明を補足しています。

基本的には以下のドキュメントに従って進めていけばいいです。

https://docs.expo.dev/versions/latest/sdk/map-view/

概要

実装アプリ側の実装は、react-native-maps を利用して簡単にできます。指定した場所にマーカーをおいたり、ユーザーの地図上での操作イベントを取得したりできます。
設定 Androidの場合はGoogle Map APIを利用するので設定が必要になります。

ざっくりとは以下の工程になります。

「Google API Manager でプロジェクト作成」
「Maps SDK for Android を有効にする」
「Play Store にて認証キーを取得」
「Credential を作成して設定」
「API key を app.json に追加」

iOS の場合はネイティブの地図機能があるので通常はそちらが利用されます。設定を行えばAndroidと同様に Google Map を使うこともできます。

詳細な手順を以下に紹介します。

パッケージ

react-native-mapsというパッケージを使って実装します。
https://github.com/react-native-maps/react-native-maps

Google Map API の設定

Google API Manager でプロジェクト作成

Google Cloud Platform にてプロジェクトを作成します。
https://console.developers.google.com/apis

アクセス量とかを確認できるので、アプリごとに作成しましょう。

Maps SDK for Android を有効にする

Google Cloud Platform の「APIとサービス」の「ライブラリ」にて、「Maps SDK for Android」を有効にします。

「Maps SDK for Android」を選択して「有効にする」ボタンを押しましょう。

Play Store にて認証キーを取得

Play Store にて、アプリごとに生成されるSHA-1 証明書のフィンガープリントをコピーします。
「リリース」の「設定」内「アプリの完全性」メニューにあります。

ストアにアプリを登録していないと取得できません。デバッグ版でいいのでstore への登録・アップロードを先に済ませておきましょう。

Credential を作成して設定

Google Cloud Platform にてCredentialを設定してAPI Key を作成します。「APIとサービス」の「認証情報」メニューにて、上部の「認証情報を作成」を選択します。

出てくるメニューの「APIキー」を選択し、キーを作成します。

不正な利用を避けるため、キーに制限をつけることができます。以下手順です。

アプリケーションの制限で「Androidアプリ」をチェック
Android アプリに使用を限定で、項目を追加してパッケージ名とSHA-1証明書のフィンガープリントを登録
API の制限で「Maps SDK for Android」を選択

下部にある保存を選択して登録します。

上記で登録した「APIキー」を選択すると、API Key 文字列を確認できるのでコピーします。

API key を app.json に追加

上記の API Key を app.json の android.config.googleMaps.apiKey に設定します。

これでGoogle Map API を利用するために必要な設定は完了です。

iOS でも利用したい場合は上記の工程を「Maps SDK for iOS」に対してもう一度行うことになります。

アプリへの実装

設定ができたらあとは実装するだけです。たとえば緯度経度を使って場所を指定するならこんな感じです。

import MapView, { Marker } from "react-native-maps";

~~~

  const marker = {
    title: title,
    latlng: {
      latitude: Number(latitude),
      longitude: Number(longitude),
    },
  };

~~~

  return (
      <View style={styles.container}>
        <MapView
          style={styles.mapStyle}
          initialRegion={{
            latitude: marker.latlng.latitude,
            longitude: marker.latlng.longitude,
            latitudeDelta: 0.0024,
            longitudeDelta: 0.0024,
          }}>
          <Marker coordinate={marker.latlng} title={marker.title} />
        </MapView>
      </View>
  );

MapViewで地図のコンポーネントを表示します。initialRegion を渡すことで初期表示の場所を設定できます。

地図常にマーカーを設置することもできます。child としてMarkerを渡せばそこにマーカーを表示できます。位置はもちろん、タイトルを設定したり任意のコンポーネントを設定できます。

おわりに

アプリによっては地図を表示することで、もっと便利な機能になります。 react-native-maps を使えば簡単に実装できるのでおすすめです。

設定が少しややこしいですが Expo のドキュメントに詳しく書いてあるので、とても親切でした。

AppTrackingTransparency の対応

Thu, 08 Jul 2021 00:00:00 GMT

少し前に、AppTrackingTransparency の対応を行いましたので、その時の対応内容をメモしています。他アプリへ反映する時のメモとして自分用に残しておきます。

結論を先に書くと

Expo のパッケージ「expo-tracking-transparency」を使って簡単に対応できました。ポップアップの出し方やテキストについては検討が必要ですが、必要な対応としては完了です。

対応が必要になったきっかけ

久しぶりにアプリをアップデートしようと思いストアに審査を申し込んだところ弾かれました。ざっくりとは以下の内容です。Guideline 5.1.2 - Legal - Privacy - Data Use and Sharing が原因です。

App Store Connect

Guideline 5.1.2 - Legal - Privacy - Data Use and Sharing

The app privacy information you provided in App Store Connect indicates you collect data in order to track the user, including Product Interaction, Advertising Data, Crash Data, Coarse Location, Device ID, and Performance Data. However, you do not use App Tracking Transparency to request the user’s permission before tracking their activity.

Starting with iOS 14.5, apps on the App Store need to receive the user’s permission through theAppTrackingTransparency framework before collecting data used to track them. This requirement protects the privacy of App Store users.

結構前から話題になっていた以下の件によるものです。

https://developer.apple.com/jp/news/?id=ecvrtzt2

アプリでのユーザー情報のトラッキングについて、ユーザーの同意が必要になるという方針です。必要であれば、SDKに用意されているポップアップを使って権限のリクエストが必要になりました。

最近ではこの内容のテレビCMも見かけますね。

この件についてずっと対応していなかったので、今回のアップデート審査にて引っかかったということです。

対応内容

Expo を利用するなら以下のパッケージを使うことで簡単に対応できます。

https://docs.expo.io/versions/latest/sdk/tracking-transparency/

import { requestTrackingPermissionsAsync } from 'expo-tracking-transparency';

~~~

   const { status } = await requestTrackingPermissionsAsync();

上記をアプリ起動後に呼ぶようにすれば、ポップアップが表示され権限のリクエストが行われます。

アプリインストール後、1 回のみリクエストが行われます

許可・拒否を一度選択すると次からはポップアップは表示されなくなります。端末の設定から変更しない限り、権限も変更できないです。

Expo SDK 41以降でないと使えません

SDK のバージョンが40以下の場合はこのパッケージが使えません。 41以上にアップデートしておきましょう。

info.plist

https://docs.expo.io/versions/latest/config/app/#infoplist

権限リクエストを行う際の説明メッセージを設定する必要があります。 info.plist に設定する必要があり、Expo の場合は app.json に以下のような記述を追加します。

    "ios": {
      "infoPlist": {
        "NSUserTrackingUsageDescription": "「許可」することで表示される広告がユーザーに最適化された内容になります。",
      }
    },

Expo go での確認の際は上記メッセージが反映されておらず、デフォルトの英語メッセージが表示されている状態でした。 Expo go に設定されているテキストでリクエストメッセージが表示されていたようです。自分のアプリをスタンドアローンでビルドしたものやストアでリリースしたものでは、意図通り info.plist に設定したメッセージが表示されることを確認しました。

App Store 再審査への提出

修正を行った後再審査へ提出します。レビューで弾かれた際のメールに以下の記述がありますので注意しましょう。

If you track users, you must implement App Tracking Transparency and request permission before collecting data used to track. When you resubmit, indicate in the Review Notes where the permission request is located.

再審査を申請する際に権限のリクエストを追加した場所をReview Notes に示す必要がある様子です。私はレビューメッセージに対する返信として、「アプリトップページに追加しました」という内容のメッセージを送った上で再申請を依頼しました。

おわりに

今回の対応が必要なことはずっと把握していたのですが後回しにしていました。審査を行う時になって初めてやらないといけないことを思い出したので、何でも早めに対応しておくこを心がけたいです。

対応自体は簡単に済みました。実際に利用するユーザーの体験としてはもう少し検討の余地があります。ただし、表示のさせ方などで審査に引っ掛かる場合があるようですので、注意して設計したいです。

表示の仕方やメッセージの内容など、その他にもいろいろありますが現時点ではこれだけの対応にしておきました。

expo release channel について

Thu, 08 Jul 2021 00:00:00 GMT

React Native でアプリを作る場合にExpoを利用することで、便利な機能を使うことができます。その中でも、ストアでの審査・公開を挟まずにアプリのアップデートを配布できるOTAアップデートはとても便利です。

この記事ではOTAアップデートを行う際に設定できる「releas channel」についての情報をまとめます。

結論を先に書くと

Expo を利用してビルドする際に「channel」を設定することで、OTAアップデートを制御できる。
同じ channel で新しい公開ビルドがあれば、OTAアップデートが行われる。
別名の channel でビルドを行えばOTAアップデートは行われない。
個人的には channel は「v2.0」の形で、メジャー・マイナーバージョンを設定している。パッチバージョンの更新のみOTAアップデートの対象にする方針。

release channel とは

https://docs.expo.io/distribution/release-channels/

リリースチャンネルを使うことでOTAアップデートにより更新を配布するか制御ができます。

ユーザーの端末のアプリに設定されている channel と同じ channel で新しいビルドが Expo にある場合、OTAアップデートが実行されます。別名の channel であればOTAアップデートの対象にはなりません。

他にも Expo SDK のバージョンが異なる場合など、OTAアップデートの対象にならない条件があります。

テスト環境用ビルドを用意したい場合やOTAアップデートを行いたくない場合に、channel を利用して制御します。そうしないと、思わぬ更新がユーザーの端末に配布されてしまう場合があります。不具合やまだ確認中の新機能や画面が公開されてしまっては困ります。

コマンド

Expo でビルドする際のコマンドを以下のようにします。

expo build:ios --release-channel <your-channel>
expo build:android --release-channel <your-channel>

特にチャンネルを指定しない場合は「default」チャンネルになっています。
前回のビルドも default チャンネルで行っている場合、OTAアップデートが有効になります。ビルドを行った時点でアップデートが配布されることになるので、意図しないアプリが配布されることにつながるので注意が必要です。

実機確認用にビルトしたい場合やリリース日をちゃんと制御したい場合であれば、チャンネルを指定してOTAアップデートが行われないように制御しましょう。

運用方針

基本的にOTAアップデートを制御できるよう、チャンネルを指定してビルドするのがおすすめです。

個人的な運用方針としては、メジャーバージョンとマイナーバージョンの数字で、channel 文字列を設定しています。たとえば、2.1.4 のバージョンのアプリをビルドする時のチャンネルは以下の文字列を指定しています。

v2.1

こうすることで、パッチバージョンの更新はOTAアップデートで配布。マイナー・メジャーバージョンの更新はOTAアップデートで配布せずにストアから審査・公開を経てアップデートする。

という形にしています。

パッチバージョンはストアでリリースしなくてもよいのですが、私はストアにも反映しています。 OTAアップデートは不具合に対する急ぎの対応や、日時を制御したいお知らせメッセージなどを審査なしで配布する目的で利用しているイメージです。

ビルドスクリプト

上記のルールで運用するにあたって、app.json の version の値を確認してコマンドを実行することになります。
毎回やるのは面倒ですしコマンドが長いので、npm script で実行できるようにしました。

  "scripts": {
    "version": "echo v$(expo config | grep '^  version:' | grep -oE '[0-9]+.[0-9]+')",
    "build:ios": "expo build:ios --release-channel $(npm run version --silent)",
    "build:android": "expo build:android --release-channel $(npm run version --silent)",
  }

version でapp.json の version の値を出力します。app.json から直接検索すればいいですが、せっかくなので expo-cli の config コマンドを利用してます。
version の行を出力して、そのメジャー・マイナーバージョン部分の文字列のみを抽出しています。sed とか使ってもできそうですが npm script に書く時のエスケープが面倒だったので、単純な grep を重ねています。

build:ios および build:android で上記のバージョン出力スクリプトを利用して、チャンネルを指定したビルドコマンドを実行します。
--silent は npm script 実行の際にログを無視して出力しないようにするオプションですね。これで version コマンドの出力のみを受け取っています。

おわりに

Expo を利用する最初のうちは channel を指定せず、基本 default チャンネルでビルドしていました。
ある日「4/1 から変更を反映したい！それまでは更新したくない！」という要件ができたとき、OTAアップデートが邪魔になりました。調べた結果、channel を使うことでOTAアップデートを制御できたので、それを使って審査用アプリ提出や当日のアップデート配布をスムーズに行えました。

とても便利ですが、default のまま運用していると思わぬ時に事故を起こす可能性があります。なるべく channnel は意図的に設定するルールがいいですね。

React Native の便利なリンク集

Wed, 09 Jun 2021 00:00:00 GMT

React Native の開発でよく参考にしているリンクのまとめです。実際の開発の参考になることもありますし、普段の情報収集としてもたまにのぞいておくと便利です。

さまざまな情報がまとまっているページ

https://github.com/jondot/awesome-react-native

Awesome React Native is an awesome style list that curates the best React Native libraries, tools, tutorials, articles and more. PRs are welcome!

ライブラリやチュートリアルなど、さまざまなジャンルのURLがまとまっているページです。 React Native で使えるライブラリがスター数と概要でリストされていたり、関連するカンファレンスの情報やブログ・動画などのリンクもあります。

量が多いので全部見るのは難しいですがカテゴリーごとに整理されています。必要な時にこのページで探してみるとヒントと出会えることが多いです。

UIコンポーネントライブラリ集

https://github.com/madhavanmalolan/awesome-reactnative-ui

React Native で利用できるUIコンポーネント集です。実際のスクショ付きで紹介されていますので、わかりやすくなっています。更新日とかスター数も表示されているので選定する際の参考にもなります。

暇な時こういったコンポーネント集に目を通しておくと、開発の際「あのコンポーネント使ったら簡単に実装できるかも」といったアイデアが生まれます。普段からの情報収集として一覧を眺めてみると面白いです。

StyleSheet と styled-components について

https://medium.com/mindorks/everything-to-know-about-styling-in-react-native-7e30aed53ad

In this article, I will talk about the two most popular ways of styling React Native Apps — StyleSheet and styled-components. We will look at how to structure the style objects and I will share a few tips!

React Native でのコンポーネントのstyle の書き方のTipsといった内容の記事です。

StyleSheet を使うか styled-components を使うかの検討ももちろんですが、以下のようなテクニックも紹介されています。ベタガキで実装してしまって後から困った経験がある人は参考にしてみると良いです。

スタイルの中でコードが解釈されるので、padding やアイコンサイズなど共通化できる
スタイルをのオブジェクトをスプレッド演算子で展開すれば、別スタイルに継承して使うことができる

React Native で使えるOSフォント集

https://github.com/react-native-training/react-native-fonts

React Native で使えるOS組み込みのフォントの一覧です。情報が少し古いようですので確認は必要ですが、カスタムフォントなしで利用できるフォントが整理されています。

Android と iOS それぞれで分けて紹介されています。実際に利用する時にはOSでの分岐が必要になります。こういった情報がまとまっているのは助かりますね。

おわりに

現時点で思いついた便利なリンク集をまとめました。新しいものを見つけたら追加していきます。

こういった便利なツール集やリンク集があるのはとても助かりますね。自分でも作りたいですが管理・更新が大変そうなのでなかなか手が出せません。

バージョンを指定して tmux をインストールする

Fri, 12 Feb 2021 00:00:00 GMT

Ubuntu で tmux のバージョンを指定してインストールする方法のメモです。

通常であれば、apt を使ってインストールすれば問題ありません。たまたま、.tmux.conf を他の環境と共通化していた時に、設定の内容でエラーが発生しました。エラーの原因は tmux のバージョンによって互換性のない記述があることでした。

解決するために、tmux のバージョンを指定して自分でビルドしてインストールする対応を行いました。そのときの手順をメモしています。

対応前の状態

Ubuntu で使っている tmux のバージョンを確認したところ 2.6 でした。

tmux -V

mac で使っている tmux のバージョンは 2.9 でした。

Ubuntu の方のバージョンが古く、apt でインストールしていたため少し古いものが入っていました。

バージョン 2.9 では、いくつかの設定の記述について後方互換製のない修正が行われています。そのためエラーに遭遇したというわけです。

今回は、各環境で使うバージョンを 2.9 に揃える対応を行いました。

対応

ざっくりやることは以下です。

必要なパッケージのインストール
バージョンを指定してgithub からcloneする
ビルドの設定を用意
ビルド

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

以下の必要なパッケージをインストールします。

sudo apt install git automake bison build-essential pkg-config libevent-dev libncurses5-dev

バージョンを指定してgithub からcloneする

git clone -b 2.9 https://github.com/tmux/tmux

ビルドの設定を用意

cd tmux
./autogen.sh
./configure --prefix=/usr/local

念の為ビルド先を指定していますが、デフォルトでも同じだったはず。

ビルド

上記で作られた Makefile ファイルを実行します。

make
make install

以上でインストールは完了です。

確認

あとは tmux のパスとバージョンを確認して、意図したものになっていれば成功です。

PATHの設定によっては元から入っているものが以前のまま有効になってしまいます。環境変数も確認しておきましょう。

おわりに

バージョンを指定してインストールしたいことがそもそも少ないですが、何かの参考になれば良いです。

同様に最新のバージョンを使いたいという場合にも、同じ手順でできるはずです。 clone するときの指定を変えるとか、チェックアウトするとかですね。その場合にも参考になるはずです。

shell のショートカットのメモ

Wed, 10 Feb 2021 00:00:00 GMT

shell で使えるショートカットです。人に教える機会があったので、ついでにメモとして残してます。

自分でも使っていないものもあります。この機会に覚えてしまって使いこなせるようになりたいです。

移動

Ctrl + f
カーソルを右に移動
Ctrl + b
カーソルを左に移動
Ctrl + a
カーソルを先頭へ移動
Ctrl + e
カーソルを末へ移動
Ctrl + c
コマンドを中断
入力中のコマンドを無視して改行
Ctrl + l
表示内容更新、現在の行が一番上に来る

検索

Ctrl + r
コマンドの履歴から検索
Ctrl + n
履歴を進む
Ctrl + p
履歴を戻る

カット・ペースト

Ctrl + h
Backspace
Ctrl + d
文字を消す
入力がない状態だとshellを終了
Ctrl + u
入力中のコマンド切り取り
Ctrl + w
前の単語を切り取り
Ctrl + k
後ろを切り取り
Ctrl + y
貼り付け

おわりに

以上です。

あまり使わないものもありますが、shell での作業は意外と多いのでこの辺のショートカットを覚えておくと何かと便利です。

これと言った情報でもないですが備忘のために残してます。何かの参考になれば。

github のリモートからの pull でエラーになる場合の対処

Fri, 08 Jan 2021 00:00:00 GMT

久しぶりに扱うリポジトリで、git pull を行ったところエラーになってしまう現象に出会いました。その時の対応をメモしておきます。

結論を先に言うと

以前SSH公開鍵を登録して、ID・PWを逐一入力しなくていいようにしました。それと一部のリポジトリのリモート設定の組み合わせによって、発生していた様子です。

以下のコマンドで、git remote の再設定を行えば解決しました。

git remote set-url origin git@github.com:[ユーザー名]/[リポジトリ].git

現象

git pull を行うと以下のエラーが発生していました。

remote: Invalid username or password. fatal: Authentication failed for ’https://github.com/kakukakug/betsumushideploy.git/’

状況

以下コマンドでremote の設定を確認します。

git remote -v

以下のような出力が得られました。remote の設定がURLによる設定になっています。ユーザー名とリポジトリ名を指定した設定に変更すれば解決しそうです。

origin https://github.com/kakukakug/betsumushideploy.git (fetch) origin https://github.com/kakukakug/betsumushideploy.git (push)

対応

以下コマンドを実行して、remote の設定を変更します。

git remote set-url origin git@github.com:[ユーザー名]/[リポジトリ].git

設定を確認すると以下のような出力になるはず。

origin git@github.com:kakukakug/betsumushideploy.git (fetch) origin git@github.com:kakukakug/betsumushideploy.git (push)

上記の設定を行ったところ、正常に git pull ができるようになりました。

おわりに

ずっと昔に git clone したものは、上記のURLによる設定になっているものが有りました。同じ現象にであったら、アカウント名を使ったリモートリポジトリの指定を使うように変更していきましょう。

Neovim のセットアップ、checkhealthを使って診断と設定を行う

Fri, 08 Jan 2021 00:00:00 GMT

Neovim 導入の際、 checkhealth を使った環境設定の診断とその結果に対しての対応を行いました。その時の対応内容を備忘としてメモします。他の環境でセットアップするときとかの参考になればと考えています。

診断

checkhealth を実行する

Neovim を起動して以下コマンドを実行すると、環境を自分で診断します。セットアップの最初の手順として、この診断が上手く通るように対応を行いました。

:checkhealth

診断結果

ざっくりとは以下の部分でアラートが出ていましたので、順番に対応していきます。

tmux true color
ruby
python2
python3

tmux true color

ターミナルの256色に縛られず、色の表現を意図通り反映するための設定です。ターミナル・tmux・nvim と順番にtrue color の対応を行う必要があります。

以下のコマンドで、true color に対応出来ているかチェックできます。それぞれで実行してみて、色の境目が滑らかに変わっていることを確認します。

curl -s https://gist.githubusercontent.com/lifepillar/09a44b8cf0f9397465614e622979107f/raw/24-bit-color.sh | bash

tmux

私は .tmux.conf に以下の設定を行うことで対応することが出来ました。環境によって異なるようです。自身の環境にあった設定を探してください。

set-option -g default-terminal "screen-256color"
set-option -ga terminal-overrides ',xterm-256color:Tc'

Neovim

Neovim 側では init.vim に以下を追加します。

set termguicolors

ruby

rbenv を使って Neovim 用の環境を用意して、特定環境の ruby を利用します。

これで rbenv を使って ruby バージョンなどの環境を変える度に、nvim のプラグインを用意しなくてよくなるメリットがあります。

rbenv のインストール

mac の場合

mac なら brew で問題なくインストールできます。rbenv install を使えるようにするため、ruby-build もインストールしましょう。

brew install rbenv
brew install ruby-build

その後、.zshrc に以下を追加します。起動時に rbenv を動作するよう設定します。

eval "$(rbenv init -)"

Ubuntu の場合

Ubuntu では github からチェックアウトするのがおすすめです。

git clone https://github.com/rbenv/rbenv.git ~/.rbenv

その後、.zshrc に以下を追加します。PATH 追加と rbenv が起動するよう設定します。

PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init -)"

rbenv install を使えるようにするため、ruby-build もインストールします。

mkdir -p "$(rbenv root)"/plugins
git clone https://github.com/rbenv/ruby-build.git "$(rbenv root)"/plugins/ruby-build

rbenv を使って ruby を用意する

ruby のバージョンを指定してインストールを行い、実行環境として設定します。

rbenv install 2.7.2
rbenv global 2.7.2

その後 nvim プラグインをインストールします。

gem install neovim

不足しているモジュールが有る場合、ruby インストールの際エラーになります。ドキュメントを参考に以下のものをインストールすると解決できました。

apt-get install autoconf bison build-essential libssl-dev libyaml-dev libreadline-dev zlib1g-dev libncurses5-dev libffi-dev libgdbm-dev libdb-dev

init.vim に設定を追加

以下のコマンドを実行して、該当プラグインの実行ファイルのパスを出力します。

rbenv which neovim-ruby-host

その内容を init.vim へ追加します。

let g:ruby_host_prog = '実行ファイルのパス'

これで ruby の設定は完了です。

python

pyenv のインストール

mac の場合

brew を使ってインストールしましょう。virtualenv を使えるよう関連モジュールもインストールします。

brew install pyenv 
brew install pyenv-virtualenv

.zshrc に以下を追加します。起動時に pyenv が動作するよう設定します。

eval "$(pyenv init -)"

Ubuntu の場合

ubuntu の場合は github からチェックアウトするのがおすすめです。

git clone https://github.com/pyenv/pyenv.git ~/.pyenv

その後、.zshrc に以下を追加します。PATH の追加と rbenv を動作するよう設定します。

PATH="$HOME/.pyenv/bin:$PATH"
eval "$(pyenv init -)"

virtualenv も github からチェックアウトしましょう。

mkdir -p "$(pyenv root)"/plugins
git clone https://github.com/pyenv/pyenv-virtualenv.git $(pyenv root)/plugins/pyenv-virtualenv

pyenv を使って python を用意する

python2 と python3 を用意します。

pyenv install 2.7.17
pyenv install 3.9.1

それぞれが動作するよう設定した環境を用意します。

pyenv virtualenv 2.7.17 py2
pyenv virtualenv 3.9.1 py3

以下コマンドで環境を有効化し、pip で必要パッケージをインストールします。それぞれの環境で行いましょう。

pyenv activate py2
pip install neovim

pyenv activate py3
pip install neovim

init.vim に設定を追加

以下コマンドで実行ファイルのパスを取得します。python2,3 それぞれの実行ファイルパスを取得しましょう。

pyenv which python

その内容を init.vim に追加します。

let g:python_host_prog  = 'python2 の実行ファイルパス'
let g:python3_host_prog = 'python3 の実行ファイルパス'

これで python の設定も完了です。

node

環境によっては node の設定も必要です。私は nvm を使って設定を行いました。

nvim 用のnode を用意して、npm install --global neovimを行います。その後実行ファイルのパスを取得して、init.vim に以下を追加しましょう。

let g:node_host_prog = '実行ファイルのパス'

おわりに

自分で環境を診断できるのはとても便利ですね。これがきちんと問題なければ、一通りのプラグインは正常に動いてくれそうです。環境の用意で使った各種ツールの導入は、それぞれのリポジトリやドキュメント通りに行えば問題なくできます。

また設定などで引っかかる点があればブログへ残していく予定です。何かの参考になればよいです。

Expo を使って iOS シミュレータにビルド済みアプリをインストールする

Tue, 01 Dec 2020 00:00:00 GMT

Expoを利用したアプリ開発にて、iOS シミュレータにビルドしたアプリをインストールする手順です。

この場合のビルドも、Expoのサーバにやってもらうことができとても簡単です。

エラーになってインストールできない場合があるので、その時の対処方法も記載しています。参考になれば。

ドキュメント

Expo のドキュメントに書いてある通りです。これを参考にやれば問題なくできます。

https://docs.expo.io/distribution/building-standalone-apps/

Expo サーバでシミュレータ用のビルドを実行

以下のコマンドで、ビルドを開始します。基本的にはExpoサーバにリクエストして、サーバにてビルドが行われます。

expo build:ios -t simulator

Expo のWebコンソールにて、ビルドの状況を確認できます。終わるまで他のことしましょう。

生成されたAPKをダウンロード

ビルドが終わっていればAPKをダウンロードでき流ようになっています。ダウンロードできるファイルは圧縮されているので、好きなアプリケーションを使って解凍しましょう。

tar -xvzf app.tar.gz

シミュレータへ D & D

上記で用意したAPKをシミュレータにドラッグアンドドロップすれば、シミュレータへのインストールができます。

以下コマンドでもインストールできるそうです、今度やってみます。

xcrun simctl install booted ./appへのパス

エラーが出たら

ビルドをリクエストした際のコンソールにも出力されているのですが、シミュレータへのインストール時に以下のエラーが出て失敗する場合があります。

… is damaged and can’t be opened.

ファイルについている属性が邪魔していることが原因です。

ls -l@とかを実行すると、OSごとに特殊な属性を確認できます。今回はcom.apple.quarantineという属性が邪魔をしているようです。

以下のコマンドで属性を削除して、再度インストールを試してください。 xattr は属性を編集するコマンドで、-r はディレクトリを再帰的に、-d は属性の削除の意味になります。

xattr -rd com.apple.quarantine ./appへのパス

終わりに

こちらも簡単にできました。

アプリ開発の場合、シミュレータでインストールして動作確認。その後、testflight を使って実機へ配布して確認。

問題なければリリースの手順にしています。

それぞれの手順を行うたびに調べるのはめんどくさいので、情報として残しておいていつでも参照できるようにしました。

できれば覚えてしまいたいところですが、結構ややこしい面もあるのでいいかなと思っています。

Expo を使って iOS のシミュレータでアプリを動かす

Mon, 30 Nov 2020 00:00:00 GMT

今更ですが、Expoを利用しているときに iOS シミュレータでアプリを動かす時の手順のメモです。

特に悩むことはなく、とても簡単にできます。説明用のメモとして書き残しています。

ドキュメント

基本的には以下のドキュメントを参考に、手順通りに進めていきば確認できます。

https://docs.expo.io/workflow/ios-simulator/

Xcode のインストール

Mac App Store から Xcode をインストールします。インストールが終わったら、Xcode の Preferences から Locations のパネルでCommand Line Toolsをインストールします。

シミュレータを起動

アプリのデバッグを開始して、Expo-cli から i コマンドを入力すると、シミュレータが起動します。デバッグしているアプリがシミュレータ上で動作するはずです。

その他の参考情報

制限されている機能

シミュレータでは以下の本体機能にはアクセスできません。

音声入力
気圧計
カメラ
加速度計
ジャイロ

Expo クライアントのアップデート

シミュレータの Expo クライアントを最新にアップデートしたい場合は以下コマンドを実行します。

expo client:install:ios

終わりに

とても簡単でした。難しいこととかややこしいことは基本的に Expo が解決してくれているので、開発に集中できます。

実機で動かす時も Expo を使っていると便利ですので、使ったことない人は是非試してみて欲しいです。

textlint を使って文章校正を行う

Thu, 05 Nov 2020 00:00:00 GMT

ブログを書く際に、textlint を使って文章の校正を自動でできるように設定しました。
以下に npm を使って textlint の設定を行う際の手順をメモしておきます。

textlint のインストール

特にデプロイ環境には不要なはずなので、devDependencies に追加します。

npm install -D textlint

校正ルールの設定

校正ルールを自分で作成することもできますが結構大変です。なので、すでに用意されているプリセットを編集して使うのがおすすめです。

ここでは以下のものを使います。日本語の技術文書を書く際のルールプリセットです。

https://github.com/textlint-ja/textlint-rule-preset-ja-technical-writing

インストール

npm install -D textlint-rule-preset-ja-technical-writing

設定

.textlintrc を作成して設定します。

{
    "rules": {
        "preset-ja-technical-writing": true 
    }
}

ルールのカスタマイズ

デフォルトではルールがかなり厳しいです。設定を変更することで自分好みに変更できますので、カスタマイズしましょう。

.textlintrc を編集して設定を行うことができます。
たとえば、以下のルールを false にすることで、！や？を使えるようにします。

{
    "rules": {
        "preset-ja-technical-writing": {
            "no-exclamation-question-mark": false,
        }
    }
}

preset-ja-technical-writing のルール一覧

デフォルトでは以下のルールが有効になっています。かなり厳しいですが、ちゃんと守ると個人的には読みやすくなりそうな印象です。むしろ普段から気をつけたいですね。

+ 1文の長さは100文字以下とする
+ カンマは1文中に3つまで
+ 読点は1文中に3つまで
+ 連続できる最大の漢字長は6文字まで
+ 漢数字と算用数字を使い分けます
+ 「ですます調」、「である調」を統一します
+ 文末の句点記号として「。」を使います
+ 二重否定は使用しない
+ ら抜き言葉を使用しない
+ 逆接の接続助詞「が」を連続して使用しない
+ 同じ接続詞を連続して使用しない
+ 同じ助詞を連続して使用しない
+ UTF8-MAC 濁点を使用しない
+ 不必要な制御文字を使用しない
+ 感嘆符!！、感嘆符?？を使用しない
+ 半角カナを使用しない
+ 弱い日本語表現の利用を使用しない
+ 同一の単語を間違えて連続しているのをチェックする
+ よくある日本語の誤用をチェックする
+ 冗長な表現をチェックする
+ 入力ミスで発生する不自然なアルファベットをチェックする
+ 対になっていない括弧をェックする

実行するためのスクリプトの用意

textlint を簡単に実行できるよう、npm script にも設定しておきます。 npx を使って実行する形式でも問題ありません。

  "scripts": {
    "textlint": "./node_modules/.bin/textlint",
    "textlint:diff": "./node_modules/.bin/textlint $(git diff master --name-only)",
  }

これで以下のコマンドで textlint を実行できるようになりました。
-- に続ける形で対象のファイルやディレクトリを npm script に渡しましょう。

npm run textlint -- dir/

チェックに引っかかった項目と、行数や場所が表示されます。
実行結果が見にくい場合は -f pretty-error などをオプションで渡すと出力の形式を設定できます。

単語の表記揺れのチェック

ついでに prh というツールを使って表記揺れを統一できるようにルールを追加します。

インストール

textlint から prh を利用できるようにツールを使います。

https://github.com/textlint-rule/textlint-rule-prh

npm install -D textlint-rule-prh

prh.yml の作成

prh.yml を作成します。例えば以下のようにすることで指定した単語の大文字小文字のチェックが適用されるようになります。

rules:

    - expected: Cookie
    - expected: Expo
      pattern: expo
    - expected: JavaScript 
      pattern: javascript

.texrlintrc の編集

.textlintrc を編集して、 prh.yml を利用し prh によるチェックが行われるように設定を追加します。

{
    "rules": {
        "preset-ja-technical-writing": {
            "no-exclamation-question-mark": false,
        },
        "prh": {
            "rulePaths": [ "./prh.yml" ]
        }
    }
}

終わりに

完璧ではありませんが textlint を使うことで、公開前に文章のチェックを行うことができるようになりました。プログラムによって行われるので融通が聞かないところもありますが、明らかにおかしいところや冗長な部分に関してはしっかりチェックが行われます。

自分で見直しをするよりも正確ですし、楽ができるのでおすすめです。文章を書く人には是非取り入れて欲しいツールです。

この辺の npm ツールを簡単に取り入れられるのは、Gatsby ブログの便利なところだと感じてます。

Netlify にて Gatsby build がエラーになった件の対応

Thu, 05 Nov 2020 00:00:00 GMT

Netlify にて Gatsby build がエラーになってしまい、デプロイに失敗する現象が発生しました。
調査して対応したところ解決できたので、その時の対応をメモしておきます。

結論を先に言うと

Netlify のビルド時に使われている Node のバージョンが古かったため発生していました。 gatsby-cli をプロジェクトの package.json に追加したタイミングで表出した様子です。

Netlify のビルド設定で Node のバージョンを指定することで解決できました。

現象

gatsby-cli の global インストールを止めるため、プロジェクトごとでインストールを行うようにしました。そのことで gatsby-cli が package.json に追加されました。

そのあとリポジトリへプッシュを行い Netlify によるビルドを行いましたが、エラーが発生して失敗していました。

ローカル環境では gatsby build は正常に動作しており、public ディレクトリ以下にソースコードも生成できています。

エラー内容

Netlify のコンソールにてビルド時のログを確認したところ、以下の内容が出力されていました。 gatsby build にてエラーが発生しています。

11:21:06 AM: $ gatsby build
11:21:07 AM: /opt/build/repo/node_modules/gatsby-cli/lib/init-starter.js:104
11:21:07 AM:   } catch {
11:21:07 AM:           ^
11:21:07 AM: SyntaxError: Unexpected token {
11:21:07 AM:     at createScript (vm.js:80:10)
11:21:07 AM:     at Object.runInThisContext (vm.js:139:10)
11:21:07 AM:     at Module._compile (module.js:617:28)
11:21:07 AM:     at Object.Module._extensions..js (module.js:664:10)
11:21:07 AM:     at Module.load (module.js:566:32)
11:21:07 AM:     at tryModuleLoad (module.js:506:12)
11:21:07 AM:     at Function.Module._load (module.js:498:3)
11:21:07 AM:     at Module.require (module.js:597:17)
11:21:07 AM:     at require (internal/module.js:11:18)
11:21:07 AM:     at Object.<anonymous> (/opt/build/repo/node_modules/gatsby-cli/lib/create-cli.js:28:20)
11:21:07 AM: 
11:21:07 AM: ┌─────────────────────────────┐
11:21:07 AM: │   "build.command" failed    │
11:21:07 AM: └─────────────────────────────┘
11:21:07 AM: 
11:21:07 AM:   Error message
11:21:07 AM:   Command failed with exit code 7: gatsby build
11:21:07 AM: 
11:21:07 AM:   Error location
11:21:07 AM:   In Build command from Netlify app:
11:21:07 AM:   gatsby build

SyntaxError が出ています。 Node のバージョンが怪しいと思いましたので log 上で確認しました。

Now using node v8.17.0 (npm v6.13.4)

v8.17.0 ということで、だいぶ古いものを使っていました。ローカル環境ではv14.12.0 となっていましたので、ここが原因の様子です。

対応内容

Netlify のビルド時に利用する Node のバージョンを設定します。

ドキュメントを確認したところ、以下 2つの方法があります。

https://docs.netlify.com/configure-builds/manage-dependencies/#node-js-and-javascript

コンソールのEnvironment variables にて NODE_VERSION を設定する
.nvmrc をプロジェクトのベースディレクトリに設置する

今回は「コンソールのEnvironment variables にて NODE_VERSION を設定する」のやり方で対応しました。

Netlify にて Site settings の項目へ移動します。 Build & deploy の画面を開き、Environment variablesの項目に以下の設定ペアを追加します。実際のバージョンについてはローカルのものと合わせておくのが良いです。

Key NODE_VERSION
Value v14.12.0

上記対応後に再度ビルド・デプロイを行いました。
log 上でのnodeのバージョンは以下になりました。無事にビルドが成功しデプロイも行われたことを確認できました。

Now using node v14.12.0 (npm v6.14.8)

ついでにビルド環境の設定の更新

ついでですが、Build image selection という項目もあったので設定しておきました。まだ設定値はBeta版のようですが、対応してみました。

変更前は以下の設定でした。

Ubuntu Trusty 14.04
Legacy build image for older sites

default で以下に設定されるようですが、前から動いているプロジェクトでは上記の設定になっているようです。以下のものに変更しておきました。

Ubuntu Xenial 16.04 (default)
Current default build image for all new site

変更を行ったところ、build log がとてもわかりやすくなりました。特に問題なくビルドもできているので概ね良さそうです。

終わりに

エラーが発生してしまいましたが、log から原因を突き止めて対応しました。 npm や nvm 周りではよく起きる現象なので、都度バージョンの確認などあたりをつけられるようにしておきたいです。

github のデフォルトブランチを master から main に変更

Wed, 04 Nov 2020 00:00:00 GMT

少し前ですが、Github にてデフォルトブランチの名前を master ではなく main にする動きがありました。新しいリポジトリを作成する際にもその旨が表示されるようになっており、大きくそういう動きがあります。

あまり日本では気にしていませんでしたが、世界的に取り組まれている方針なので従っていきます。ここでは、すでに master で稼働していたリポジトリについて、main にデフォルトブランチを変更する手順を記載しておきます。

main ブランチの作成

デフォルトブランチに設定する main ブランチを作成します。master ブランチの名前を main に変更して作成します。

git branch -m master main

これでローカルにて master ブランチが main ブランチにリネームされました。

リモートリポジトリへ push

作成した main ブランチをリモートへ push します。

git push origin HEAD

上記コマンドでも main という名前のリモートブランチが生成されますが、アップストリームに設定されているブランチが master のままになっています。

以下のコマンドでアップストリームもセットし直しましょう。pull とか差分の表示とかを行うために必要です。

git branch -u origin/main

Github のリポジトリの Settings にてデフォルトブランチを変更

Github の Settings にて、Branches に移動して Default branch の項目を main に変更します。

master ブランチを削除

master ブランチは不要になったので削除します。

リポジトリのブランチの一覧にて、master ブランチをゴミ箱マークをクリックして削除します。

終わりに

日本の文化ではそれほど気にする人はいないようですが、外国の文化なども考慮していろいろな考え方を知っておくことは大切です。世界的に大きな動きとして取り扱われていましたので、対応を行うとともに考え方や受け取り方の違いについても考えるきっかけになるといいです。

bash から zsh へ移行する

Mon, 26 Oct 2020 00:00:00 GMT

bash を使っていましたが、zshに乗り換えました。

結構前から mac のデフォルトのシェルが zsh になっています。そちらに合わせて zsh 使おうという対応です。もろもろの設定を備忘のためにメモしています。

zsh の設定ファイル

.zshenv に、常に反映したい設定を定義を定義します。 .zshrcにはシェルを起動した環境にて反映する設定を定義します。

git のブランチを表示

zsh のカレントディレクトリの情報に、現在のブランチ名を表示するように設定します。

ホームディレクトリに .zsh ディレクトリを作成して、以下のコマンドを実行してスクリプトを取得します。

curl -O https://raw.githubusercontent.com/git/git/master/contrib/completion/git-prompt.sh

そして、zshrc に以下を記述します。

fpath=(~/.zsh $fpath)
if [ -f ${HOME}/.zsh/git-prompt.sh ]; then
  source ${HOME}/.zsh/git-prompt.sh
fi

setopt PROMPT_SUBST ; PS1='%F{magenta}%c%f$(__git_ps1 " (%s)") %F{yellow}\$%f '

現在のブランチ名と、その状態が表示されるようになりました。

git のコマンド補完

zsh にて、git のコマンド補完が動作するように設定します。

.zsh ディレクトリにて、以下のコマンドを実行してスクリプトを取得します。依存しているため .bash の方のファイルも必要です。

curl -O https://raw.githubusercontent.com/git/git/master/contrib/completion/git-completion.bash
curl -O https://raw.githubusercontent.com/git/git/master/contrib/completion/git-completion.zsh

git-completion.zsh を _git にリネームします。

mv git-completion.zsh _git

そして、zshrc に以下を記述します。

if [ -f ${HOME}/.zsh/git-completion.bash ]; then
  zstyle ':completion:*:*:git:*' script ~/.zsh/git-completion.bash
fi
autoload -U compinit
compinit -u

tab キーにて git のコマンドやブランチ名などの補完が効くようになりました。

ディレクトリやユーザー名の表示内容

上記で行った設定にて、シェルの左側のユーザー名やマシン名の表示についても設定しています。

setopt PROMPT_SUBST ; PS1='%F{magenta}%c%f$(__git_ps1 " (%s)") %F{yellow}\$%f '

ざっくりとは必要ないものを削除して、わかりやすいように色をつけています。

%F{magenta} --- %f のように %F で文字色の変更ができ、%f で文字色の変更を解除できます。ちなみに f を k にすると、背景色を設定できます。

シェル右側の表示

シェルの右側にはカレントディレクトリでも表示しておきます。日付や時間でもいいですね。

RPROMPT='%F{cyan}%~%f'

デフォルトのシェルを zsh に変更

以下のコマンドを実行することで、デフォルトで起動するシェルをzshに変更できます。

chsh -s /bin/zsh

終わりに

zsh に移行できました。他にも bash で使っていたlsコマンドのエイリアスとかも設定しています。

問題なく動くことが確認できたら、github の dotfiles リポジトリなんかに push しておくと良いですよね。

tmux 上で nvim を使っているときに escape が遅い問題の対処

Fri, 23 Oct 2020 00:00:00 GMT

開発を行う際に tmux 上で Vim を使っています。最近 nvim を使うようにしたところ、escape キーを押した際の反応が遅くなるという現象を発見しました。

その問題についての対処法のメモです。

結論を先に言うと

.tmux.conf というファイルに以下の記述を追加します。

set -g escape-time 0

現象

インサートモードにて escape キーを押した際に、1秒くらい経過しないとノーマルモードに戻らない状態でした。 ctrl + [ を使えばノーマルモードに戻れるので、私にとっては影響少なめでした。ただ、このままでは気持ち悪いですし、escape キーを全く使わないわけではありません。対応が必要と考えて、調査・対応を行いました。

問題の調査

どうやら tmux で escape キー後の操作を待っている状態でした。tmux でも escape キーは意味のあるキーになっており、特別な操作のために入力待ちが発生しているようです。

特にその入力待ちは不要だと思いましたので、tmux の設定で待機時間を 0にする対応を行いました。

tmux の設定ファイル

tmux の設定を行うファイル .tmux.conf に以下の記述を追加します。

set -g escape-time 0

これで escape キーを押した際、すぐにノーマルモードへ戻るようになりました。

終わりに

問題解決です。escape キーを押した際の動作に違和感がありましたが修正できました。 tmux + nvim はとても便利なので使いこなしたいです。もちろん vscode 使ってしまうのが手取り早いですが、やっぱり入力とかコマンドとかが便利なので vim 使いたいです。今のところ特に vim から nvim に移行して、快適になったところはまだ感じ取れていません。ゆっくり使い込んでいきたいです。

React Native Upgrade Helper の紹介

Mon, 12 Oct 2020 00:00:00 GMT

React Native Upgrade Helper の紹介です。

React Native のバージョンをあげるときの参考にしているサイトで、とても助かっているので紹介します。公式でも紹介されているのでご存じの方も多いでしょう。

React Native をバージョンアップする際には、Info.plistやgradlewなど変更を必要とするファイルがいくつかあります。それらの必要な修正内容を教えてくれるサイトです。

URL

以下のURLからアクセスできます。getパラメータで対象のバージョンを指定することもできます。

https://react-native-community.github.io/upgrade-helper/

使い方

左側に現在のReact Nativeのバージョン、右側に更新先のバージョンを設定します。その後真ん中のボタンを押せば、修正が必要なファイルを差分で表示します。

package.json やPodfile、 Info.plistにbuild.gradleなどの修正が必要な箇所と内容を表示します。内容に従って、該当ファイルを修正してビルドしましょう。

おわりに

React Native のバージョンアップを行うと、関連パッケージの更新やネイティブ関連のライブラリアップデートが必要になるので、エラーを確認しながら都度対応していく必要がありました。しかし、このページのおかげで必要な修正を簡単に把握できるのでとても助かっています。

React Native で開発する上でとても便利なページですので紹介しました。他にも便利なものを見つけたら紹介します。

patch packageを使ってnpmパッケージに一時的な修正を行う

Sat, 10 Oct 2020 00:00:00 GMT

patch package の使い方のメモです。

以前に使う機会があったので、説明用にその時の手順をメモしておきます。簡単にパッケージに対してパッチを当てることができるので、一時対応として使うことが出来ます。

patch package とは

ざっくりとは npm の postinstall を使って、node module 内のパッケージを簡単に修正できる仕組みです。

もちろん、直接 node module 内のパッケージを書き換えても良いはずです。しかしこの場合は、npm install の際に修正内容を上書きしてしまう危険があります。他にも、node module 以下を github に push しない場合、自分の環境でのみ修正が行われて他の作業者に共有しにくいなどの状況が考えられます。

必要なパッケージについて、fork を行い自分で修正・管理して使うこともできます。しかし、元のパッケージの修正や開発に追従していくことや、リポジトリの管理が手間になってしまいます。

github

https://github.com/ds300/patch-package

使い方

まずは npm でインストールします。

npm install patch-package --save-dev

package.json に以下の記述を追加して、npm install を行った際に pacth package が実行されるように設定します。

{
  scripts: {
    "postinstall": "patch-package"
  }
}

その後、npde module 内の修正したいファイルに対して修正を行い、以下コマンドを実行します。

npx patch-package 対象のパッケージ名

すると /patches 以下に該当パッケージとバーションがファイル名になっているファイルを生成します。

これによって、npm の post install にて実行される patch package でファイルの中身が実行され、該当のパッケージの特定のバージョンに対して修正が行われます。

このパッチファイルを github に push しておくことで、他の開発者の環境にも共有することが出来ます。

おわりに

簡単にnpmのパッケージに対してパッチ修正を行うことが出来ました。

そもそもは、このような修正をしないといけない状況はあまり良い状態ではありません。パッケージのリポジトリにissueを上げたりして、修正を行うことを考えるべきです。ほかバージョンを戻したりして正常に動くようにしたほうが安定することもあるはずです。

ただ、今すぐ直したいときや一時的な対応ということであれば仕方ない場合もあります。使うべき状況か・他に解決方法はないかしっかり考えた上で、利用を提案していきたいです。

xcode で ReactNative のビルドに失敗する時の対応

Fri, 09 Oct 2020 00:00:00 GMT

少し前の話ですが、xcodeでReactNativeのビルドを行おうとした際にエラーが発生してしまい、ビルドが失敗する現象に出会いました。

エラーの内容とか確認しつつ、検索したら原因と解決方法がわかったので、備忘としてメモしておきます。

結論を先に言うと

原因はxcodeでビルドする際に動作する node のバージョンがおかしいことでした。 nvm ではなく homebrew で新しいバージョンのnodeをインストールすることで解決できました。

私の環境では nvm を使って、動かす node のバージョンを管理しています。ただ、xcode の GUI によるビルドプロセス上で使われる node のバージョンは、nvmにてインストールしたものではありませんでした。homebrew でインストールした node のものになっていました。

ずっと homebrew の node についてはアップデートしていなかったので、バージョンは、0.1.1 とかになってました。それは動かなさそうですよね。

エラー

ざっくりとは const とか strict modeとかの場所でエラーが出ており、JavaScript の新しい書き方がことごとくエラーになっていました。新しいと言ってもだいぶ昔から使えるようものなので、おやっ？と思いました。

node が古そう。そう考えて調べてみた所、同様の現象を見かけたので解決を試しました。

node バージョンの確認

nvm で使っている defaultの node のバージョンは十分に新しかったのですが、xcode 上からビルドする際には nvm は利用できません。nvm で管理しているものではなく本体の node が動いていました。

すなわち最初からインストールされていたものや自分でインストールし直したもの。homebrewでインストールしたものと言ったところです。

私の場合は /usr/local/lib/node/bin にあるもので、バージョンは0.1.1とかくらいになってました。絶対動かなさそうですね。

アップデートする

homebrew を使って node をアップデートします。私は一度アンインストールしてインストールし直しました。

ざっくりとはメッセージに従い以下のコマンドを実行することになるはず。

brew install node
brew link node

途中でファイルやディレクトリの権限関連でいくつかエラーが出ました。内容を確認しつつgroupや所有者を変更することで、無事に更新できました。

homebrew で node のバージョンを上げた結果、xcode でのビルドが正常に完了するようになりました。

おわりに

cuiからのビルドとかは正常に動いていたのに、xcode でのビルドは失敗するような状態でしたので、原因見つけるのに結構苦戦してしまいました。

node のバージョン管理に nvm 使っていたので正常なものが使えていると思っていましたが、思わぬ盲点でした。たまには homebrew で管理しているパッケージとかの管理や整理をしようと思いました。

あと homebrew で update する際、権限関連で書き込み出来ない旨のエラーが出たので、出力に注意して行いましょう。多分ですが、mac や以前使っていた homebrew のバージョンが古かったりすると起きるようです。

chromeのキーボード・ショートカットのmemo

Tue, 16 Jun 2020 00:00:00 GMT

google chromeのショートカット操作のメモです。基本的なショートカットキーコマンドをよく使うものに絞ってメモしておきます。

自分用メモです。公式サイトに全部載ってます。

参考URL

https://support.google.com/chrome/answer/157179?hl=ja

ウィンドウ

ctrl + n 新しいウィンドウ
ctrl + t 新しいタブ
ctrl + shift + n 新しいシークレットウィンドウ
ctrl + shift + t 閉じたタブを開く
ctrl + tab 次のタブ
alt + 右 次へ
alt + 左 前へ
ctrl + wタブを閉じる

機能

alt + f メニュー
ctrl + shift + b ブックマークバー表示
ctrl + shift + o ブックマークマネージャ
ctrl + d ブックマークに追加
ctrl + h 履歴
shift + alt + t ツールバーにフォーカス
ctrl + shift + j デベロッパーツール
ctrl + u ソースを表示
ctrl + l アドレスバーにフォーカス
ctrl + k 任意の場所から検索
ctrl + r 再読み込み
ctrl + shift + r キャッシュ無視再読込
ctrl + f ページ内検索
ctrl + g 検索次へ

その他

ctrl + p 印刷
F11 全画面
ctrl + j ダウンロード
shift + esc chrome タスクマネージャ
ctrl + shift + delete 閲覧履歴削除

おわりに

覚えておくと快適です。マウス使わずにどれだけインターネントブラウジングができるかということが重要ですね。
拡張機能入れたりしても便利になりますが、私はなるべくデフォルトで使いたい派です。

個人的にはvivaldiというブラウザ使うことのほうが多いですが、まずはchromeからメモしました。そのうちvivaldiも紹介します。

忘れたらこの記事見て思い出しながらブラウジングします。

vimのファイルエクスプローラ「NERDTree」の操作メモ

Mon, 20 Apr 2020 00:00:00 GMT

vimのファイルエクスプローラプラグインの1つ「NERDTree」の紹介です。

ざっくりとはVimFilerやNetrwと同様のもので、好みによって使い分けるのがおすすめです。見た目がGUIのように見やすいのでおすすめです。Uniteなど、他の大きいプラグインに依存していないこともおすすめポイントです。

NERDTree用の拡張プラグインもあるので、色々ためしてみると良いです。

URL

https://github.com/preservim/nerdtree

設定

とりあえず以下のコマンドをvimrcに書いておきましょう。CTRL + nでNERDTreeを起動できます。

map <C-n> :NERDTreeToggle<CR>

コマンド

ファイル

o ファイルを開く
t 別タブで開く
T 別タブでバックグラウンドに開く
i 画面分割して開く
gi プレビューで開く
s 画面分割して開く
gs プレビューで開く

ディレクトリ

o 開く・閉じる
O 再帰的に開く
x 閉じる
X 再帰的に閉じる

treeを開いているときの移動

P rootディレクトリへ
p 親ディレクトリへ
K 最初の要素
J 最後の要素
ctrl-j 次の要素
ctrl-k 前の要素
o open
o open
o open

移動

C root をここにする
u rootを1つ上げる
r リフレッシュ
R 再帰的にリフレッシュ
m メニュー開く
cd CWD
CD rootからのCWD

表示

I 隠しファイルの表示
f フィルター
F ファイルのみ
B ブックマークを開く
A NERDTreeのみにする
q 閉じる
? ヘルプ

ブックマーク

o 開く
t 別タブで開く
T 別タブにてバックグラウンドで開く
D ブックマークから削除
:Bookmark <name> ブックマークに登録
:OpenBookmark <name> ブックマークを指定して開く
:ClearBookmark <name> ブックマークを削除
:ClearAllBookmark 全部のブックマークを削除

おわりに

こんな感じで使えます。いくつかのコマンド覚えれば使えますし、ファイル作成や削除は基本メニューニマと混ていますので、迷わず使えます。

VimFilerも使いやすいですが、他プラグインに依存せず使えるNERDTreeもなかなかおすすめです。つかったことなければぜひつかってみてください。

好みに合わせていろいろ使ってみるといいですよ。

gitのバージョンをアップデートする

Mon, 20 Apr 2020 00:00:00 GMT

Githubについて褒めたばかりですが、深刻な脆弱性が発表されました。内容については各自で見ていただくとして、アップデート方法をまとめて記載しておきます。

以降、またアップデートが必要となった際に対応できるよう、手順をメモしておきます。 UbuntuとMacのやり方のみ記載していますので、ご注意ください。

バージョン確認

インストールされているgitのバージョンを確認します。

git --version

パッチが当たっているバージョンが共有されていますので、そちらに該当しない場合は以下の手順でgitのアップデートを行いましよう。

Ubuntu

apt-get

Ubuntuのaptの標準パッケージリストでは最新版のgitが登録されていませんでした。ですので、そのままupgradeしても、更新が反映されません。

パッチが当たっていないバージョンでは脆弱性が残っていますので、プライベートなパッケージ情報を使って最新版を取得します。 aptの公式ではないだけで出処は公式のgitです。心配することは特に無いです。

sudo add-apt-repository ppa:git-core/ppa
sudo apt update
apt list --upgradable
sudo apt upgrade

Mac

Homebrew

特に難しいことはないです。brew使って管理していれば簡単です。

brew update
brew upgrade git

version確認

パッチ適用バージョンは、2.17.4、2.18.3、2.19.4、2.20.3、2.21.2、2.22.3、2.23.2、2.24.2、2.25.3、2.26.1。ですので、上記のどれか以上になっていれば問題解決です。

アップデートした所、2.26.1 になりました！脆弱性解決です！

おわりに

無料のアカウントの有効範囲が増えて喜んでいたところに、ヒヤッとするニュースが飛び込んできましたね。

脆弱性についてはしっかりとソフトのアップデートを行うことで、攻撃を防ぐことができます。意識して情報のキャッチと反映を行っていくようにしましょう。gitくらいになればほっておいても情報入ってきますが、そうでもないマイナーなソフトや開発が停止してるものなどは気をつけるようにしましょう。

Ubuntuのキーボードショートカットのmemo

Sun, 19 Apr 2020 00:00:00 GMT

Ubuntuのショートカット操作のメモです。

基本的なウインドウの操作やワークスペースの操作について、コマンドをメモしておきます。

マウス使わずにキーボードだけでどんなことができるかに着眼点をおいて、操作を紹介します。

ターミナル

CTRL + ALT + t 端末を開く

ウインドウ操作

SUPER + →← ウインドウを画面の半分に固定
SUPER + TAB アプリケーション切り替え
ALT + TAB アプリケーション切り替え
ALT + ESC ウインドウ切り替え
SUPER + SHIFT + PAGEUP ウインドウを上のワークスペースに移動
SUPER + SHIFT + PAGEDOWN ウインドウを下のワークスペースに移動
SUPER + F10 アプリメニュー表示
ALT + SPACE ウインドウメニュー表示
ALT + F4 ウインドウを閉じる
ALT + F7 ウインドウを移動
ALT + F8 ウインドウのサイズ変更

ワークスペース操作

SUPER アクティビティ画面
SUPER + q Dockのアプリに数字を表示
SUPER + 1 Dockのアプリの1を起動
SUPER + SHIFT + 1 Dockのアプリの1を別ウインドウで起動
SUPER + a アプリを検索
SUPER + m カレンダー
CTRL + ALT + ↑ 上のワークスペースへ
CTRL + ALT + ↓ 下のワークスペースへ

スクリーン

Print Screen 画面のスクリーンショット
Alt + Print Screen ウィンドウのスクリーンショット
Shift + Print Screen 選択領域のスクリーンショット
Ctrl + Print Screen 画面のスクリーンショットをクリップボードにコピー
Ctrl + Alt + Print Screen ウィンドウのスクリーンショットをクリップボードにコピー
Ctrl + Shift + Print Screen 選択領域のスクリーンショットをクリップボードにコピー

おわりに

以上です。Ubuntu使って操作する際の参考になるかな。どうでしょうか。

特にアプリを入れなくてもウインドウの操作やワークスペースの操作ができるようになっているので、使いこなすととても快適です。

良ければぜひUbuntu使ってみてください。

Githubから「GitHub is now free for teams」のお知らせがあった

Wed, 15 Apr 2020 00:00:00 GMT

「GitHub is now free for teams」というお知らせが有りました。すごく嬉しいですね。

https://github.blog/2020-04-14-github-is-now-free-for-teams/

privateリポジトリへのコラボレータの追加が制限なしに。
organizationを作成しての管理やメンバー追加も無制限に！

すごいですね！無料でほとんどのことができるのでは！

しかし、CIやgithub Actions、リポジトリのサイズ制限などはあるので、フリーアカウントでは実現できないことも有ります。運用面のセキュリティなどの面で支払いを検討することがありえます。

無制限のコラボレーター

プライベートリポジトリは自分しか見れないのですが、コラボレーターに追加すればそのアカウントと共有して、一緒に開発することが出来ます。

無料アカウントでは人数に制限が有りましたが、好きなだけ登録できるようになりました。

前回の大ニュース

以前に、無料アカウントでもプライベートリポジトリを利用できるようになったと記事を書きました。2019年1月8日に書いています。あれから時間がたってteamや複数人での利用もできるようになるとは！とてもうれしいです。
以前書いた記事:GitHubのプライベートリポジトリが無料枠でも使えるようになった

おわりに

余裕が出たらteamアカウント等作成してCIやActionsを使い倒すつもりです。

このNewsが嬉しかったので記事にしました。よく使っている人、そうでない人もGithubを活用してもらえればとうれしいです。

Githubすごい！ありがとうGithub！

VimFilerの紹介

Mon, 13 Apr 2020 00:00:00 GMT

VimFilerの紹介です。 Vimのファイルのエクスプローラプラグインのひとつです。他にはNetrwとかNERDtreeなど有りますね。

デフォルトで使えるNetrwも十分に便利なのですが、私はVimFilerを愛用しています。

以前からDefx.nvimという代替となるプラグインがあるので、これからはそちらを使うほうが良さそうです。NeoVimとdeinを使うのであればDefx.nvimのほうが良さそうです。

私も機会があれば移行していきますが、vimやNeoVimのバージョンなどによって正常に動かなかったりしました。落ち着くまではVimFiler使います。

今回はコマンドや使い方を簡単にメモしています。思い出せるように自分用のメモです。

設定

デフォルトのエクスプローラに設定する場合は以下です。

let g:vimfiler_as_default_explorer = 1

使い方

基本的には:VimFilerとか:VimFilerSplitを入力すればエクスプローラーを開くことが出来ます。

開く

v プレビュー
e 開く
E 画面を分割して開く

表示

t ツリーを開く
T ツリーをすべて開く
. 隠しファイルを表示

ファイル操作

c コピー
m 移動
K ディレクトリ作成
N ファイル作成
d 削除
r 名前変更
gs セーフモードの切り替え
yy フルパスのヤンク

その他

x デフォルトのアプリで開く
Y pushd
P popd

おわりに

特にこだわりはないので他のプラグインを使ってもいいのですが、私の好みでVimfilerを使っています。使いやすくて気に入っています。

必要なときのためにデフォルトのNetrwの使い方もメモしておこうかなと思いました。

Vimでよく使われるプラグイン5つ

Mon, 13 Apr 2020 00:00:00 GMT

Vimでよく見るプラグイン5つをまとめて紹介です。 VSCodeのVimプラグインでもこれらが利用できるようになっていましたので、人気も高いです。

具体的には以下の5つで、どれも便利です。 neoBundleなどプラグイン管理を利用できるように設定したら、最初に入れておくと便利です。もちろん無くても十分便利です。

CamelCaseMotion
vim-easymotion
ReplaceWithRegister
vim-sneak
vim-surround

基本的な使い方をメモしています。VimはもちろんVSCodeでVimプラグイン使うときの参考としても参考にしていく想定です。

CamelCaseMotion

CamelCaseで移動できるようになります。

let g:camelcasemotion_key = '<leader>'

<Leader>w
<Leader>b

とかで移動することが出来ます。

vim-easymotion

画面内の任意の場所に素早く移動できます。検索を行った結果、一致する場所に表示されるキーを入力することで、その場所に素早く移動できます。

<Leader><Leader>s 1文字で検索して移動
<Leader><Leader>w 下の単語へ移動
<Leader><Leader>b 上の単語へ移動
<Leader><Leader>e 下の単語末へ移動
<Leader><Leader>ge 上の単語末へ移動
<Leader><Leader>f{char} 下の入力文字へ移動
<Leader><Leader>F{char} 上の入力文字へ移動

nmap <Leader>s <Plug>(easymotion-s2)
map <Leader>j <Plug>(easymotion-j)
map <Leader>k <Plug>(easymotion-k)
nmap g/ <Plug>(easymotion-sn)

<Leader>s 2文字で検索して移動
<Leader>j 任意の行に移動下
<Leader>k 任意の行に移動上
g/ 任意の文字数で検索して移動

ReplaceWithRegister

レジスタを利用した置換が簡単になります。

griw
"_diw + p と同じような操作になります。ブラックホールレジスタを使って削除した後に、レジスタの中身を貼り付けます。

通常、diwとすると削除したものが無名レジスタに上書きされてしまうので、もともとヤンクしていた内容が消えてしまいます。削除するときに"_diwとすれば、ブラックホールレジスタみたいなものに上書きされるので、ヤンクしてたものは消えません。
ちょっとめんどくさいなと思ったときにこのプラグインの出番です。

vim-sneak

画面内を素早く移動出来ます。fやF・tなどの検索を、行をまたいで動けるようにするイメージです。

s{char}{char}
2文字まで入力すると一致する場所がハイライトされます。その後セミコロン;で次へ、カンマ,で前へ移動できます。

vim-surround

“とかで囲まれているところを指定できるオペレータです。

ds" ""で囲まれている部分を削除
cs"' ""で囲まれてる部分の""を”に置換
ysiw] wordのまわりに[]を付ける
ysiw[ wordのまわりに[ ]を付けるスペースがつく

おわりに

<Leader>で動作したりgで動作したりプラグインによって異なるので自分の使いやすいようにカスタマイズしたいところではあります。しかし、やりすぎても混乱してしまいますし、他の環境で動かしたときにわからなくなります。
私個人はなるべくデフォルトの設定で使いたいと考えています。

先にも述べていますがVSCodeのVimプラグインでも使えるものを集めました。VSCode上ではコマンドが少し違ったりしていますが、基本は同じように使えます。

今まで使っていなかった人も一度試しに使ってみましょう。是非！

Neovimを使ってみる

Sun, 12 Apr 2020 00:00:00 GMT

特に必要ではないのですが、Neovim使ってみます。

結構前から存在は知っていたのですが、移行するのがめんどくさくて後回しにしていました。少しずつNeovimにへ移行していきたい。よりシンプルで動作も早いそうなので。

ちなみに環境はUbuntuです。

概要

Neovimのインストール
Neovimを起動
init.vim を作成
プラグインマネージャ dein.vim を準備

Neovimのインストール

aptでインストールします。すなわち以下です。python3が正常に動作しないとダメなようです。なにかうまくいかない方はpython3の動作チェックを行うと良さそうです。

sudo apt install neovim

Neovimを起動

nvim

で起動します。vimと共存しておくこともできるようなので、何かあっても引き続きvimの環境も使えます。安心ですね。

init.vim を作成

vimの.vimrcに当たるファイルです。 .config/nvim/init.vim に作成します。このファイルに.vimrcのような設定を書いていくことになります。

プラグインマネージャ dein.vim を準備

vimではneobundleを使ってました。せっかくなのでdein.vimを使ってみます。以下のURLに従って進めれば問題ないです。

https://github.com/Shougo/dein.vim

以下コマンドでdein.vimをインストール。

curl https://raw.githubusercontent.com/Shougo/dein.vim/master/bin/installer.sh > installer.sh
sh ./installer.sh ~/.cache/dein

以下をinit.vimに記述して動作を確認しましょう。

if &compatible
  set nocompatible
  endif
  " Add the dein installation directory into runtimepath
  set runtimepath+=~/.cache/dein/repos/github.com/Shougo/dein.vim

if dein#load_state('~/.cache/dein')
  call dein#begin('~/.cache/dein')

  call dein#add('~/.cache/dein/repos/github.com/Shougo/dein.vim')
  call dein#add('Shougo/deoplete.nvim')
  if !has('nvim')
    call dein#add('roxma/nvim-yarp')
    call dein#add('roxma/vim-hug-neovim-rpc')
  endif

  call dein#end()
  call dein#save_state()
endif

filetype plugin indent on
syntax enable

その後でnvim開いて、以下のコマンドを実行しましょう。

:call dein#install()

terminalを使ってみる

nvimではterminalウィンドウを使うことが出来ます。nvim内でシェルコマンドを実行できます。

以下コマンドでterminalウインドウが起動します。

:terminal

最初はコマンドモードのようになっていて、画面内を移動できます。

i を入力すればインサートモードになり、terminalにコマンドを入力できるようになります。
<C-/><C-n>でインサートモードを抜けます。通常のVimウインドウとは少し違うので注意しましょう。

おわりに

とりあえず上記でNeovimの起動とプラグインマネージャdein.vimの設定。後は.vimrcに変わるファイルinit.vimの定義が出来ました。あとあh基本的にvimと同様に設定して行けば問題ないです。

ただNeovimのバージョン等の問題で利用できないプラグインがあったりするので注意しましょう。引き続きvimも併用して使えますので特に慌てる必要はありません。ゆっくり移行していこうと考えています。

vimでtypescript使うときのオススメプラグイン「tsuquyomi」

Fri, 03 Apr 2020 00:00:00 GMT

「tsuquyomi」というvimプラグインの紹介です。

vimでTypeScriptをコーディングする際にとても便利なものです。文法の補完や、定義へのジャンプ・利用箇所の表示・文法チェックなどができます。

TypeScript使う場合は、リアルタイムにもろもろのチェックが動くと便利です。多分VSCode使うのが一番便利そうです。でも、Vimでやりたい日も有りますよね。そんなときにtsuquyomiを使うとかなり便利に出来ます。

概要

インストール
使い方

参考URL

https://github.com/Quramy/tsuquyomi

基本的に上記公式Githubに書かれていることを自分用にメモした内容です。便利な設定等もメモしているので環境の再構築・移動時の参考にする予定です。

インストール

まずは以下が必要です。

Vim (vim7.4 or later)
Node.js & TypeScript
Shougo/vimproc.vim

そしてNeoBundle使って以下でインストールします。

NeoBundle 'Shougo/vimproc.vim', {
\ 'build' : {
\     'windows' : 'tools\\update-dll-mingw',
\     'cygwin' : 'make -f make_cygwin.mak',
\     'mac' : 'make -f make_mac.mak',
\     'linux' : 'make',
\     'unix' : 'gmake',
\    },
\ }

NeoBundle 'Quramy/tsuquyomi'

使い方

Completion

<C-x> <C-o>で補完が使えます。

Navigations

<C-]>でカーソル下の要素の定義へジャンプ。

<C-t>で戻る。

:TsuTypeDefinitionでカーソル下の要素の型定義へジャンプ。

Reference

<C-^>でカーソル下の要素が参照されている場所を表示します。

Keyword search

:TsuSearch {keyword} で開いているファイル・参照されているファイルからキーワード検索ができます。

Show compile errors

バッファを保存したときにチェックが行われます。もしくは:TsuGeterrです。
:TsuGeterrProjectでプロジェクト全体をチェック出来ます。

:TsuQuickFixで修正を行えます。

Configure compile options

tsconfig.jsonで設定できます。

{
  "compilerOptions": {
      "noImplicitAny": true,
      "target": "es5",
      "module": "commonjs"
  }
}

Refuctor

:TsuRenameSymbolシンボルをリネーム。
:TsuRenameSymbolCコメントも含めてリネーム。

autocmd FileType typescript nmap <buffer> <Leader>e <Plug>(TsuquyomiRenameSymbol)
autocmd FileType typescript nmap <buffer> <Leader>E <Plug>(TsuquyomiRenameSymbolC)

tooltip

以下の設定をvimrcにしておくことで型定義などのツールチップを表示できます。 <Leader>tで表示します。

set ballooneval
autocmd FileType typescript nmap <buffer> <Leader>t : <C-u>echo tsuquyomi#hint()<CR>

Create es6 import declaration

:TsuImportをモジュールの上で実行すると、そのモジュールのインポート宣言がファイル上部に追加されます。

なるべく短いパスを指定したい場合は以下の設定をvimrcに追加します。

let g:tsuquyomi_shortest_import_path = 1

syntasticと組み合わせて使う

別のプラグイン「syntastic」と組み合わせて使うことで、タイプチェックの動作や表示をわかりやすくすることが出来ます。

デフォルトでは、バッファ保存時にコンパイルエラーをウィンドウで表示しています。行数などが表示されますが、パッと見ではわかりにくいことも有りますね。

syntasticと組み合わせて使うことで、エラー行の行数の左にエラーマークが出たり、カーソルを合わせるとエラーの内容が表示されるような動作にできます。

"let g:tsuquyomi_disable_quickfix = 1
"let g:syntastic_typescript_checkers = ['tsuquyomi'] " You shouldn't use 'tsc' checker.

syntasticの仕組み上仕方ないのですが、ファイル保存時のコンパイルチェックの動作が少し重くなりました。それ以外で、ファイルを開くのが遅いときは以下の設定を無効にすると良いです。

let g:syntastic_check_on_open = 1

おわりに

TypeScript使う上でとても便利なプラグインです。他のプラグインも使ったことが有りますが、tsuquyomiは一通り揃っていて簡単に導入できますし、安定しているのでおすすめです。

ただ、大きなプロジェクトとかでチームで開発する場合であれば、他の人と環境を合わせることが大切だったりします。 VScodeを使ってリアルタイムでのチェック等を走らせながら開発するほうが安心です。

一人で個人開発するときはVimで開発できると快適です。ぜひtsuquyomiを利用してVimでTypeScriptの開発を楽しみましょう！

bashにgitのブランチ情報を表示する

Thu, 02 Apr 2020 00:00:00 GMT

bashの表示カスタマイズの続きです。

今回はgitの現在チェックアウトしているブランチ名を表示します。

間違えてmasterにpushしたりすることもなくなりますし、作業しやすくなる便利な設定です。簡単に出来ますのでぜひ！

必要なスクリプトを取得

以下のファイルを取得します。プロンプトにgitのブランチ情報を表示するための公式スクリプトです。 https://github.com/git/git/blob/master/contrib/completion/git-prompt.sh

wget使って取得するなら以下のコマンドになります。-Oは結果をまとめて指定したファイルに書き込むオプションです。

wget https://raw.githubusercontent.com/git/git/master/contrib/completion/git-prompt.sh -O ~/.git-prompt.sh

実行権限を与える

読み取りと書き出ししか出来ないような権限になっていたので実行権限を追加しました。

chmod a+x ~/git-prompt.sh

.bashrcにスクリプトの場所を記述

上記で取得したスクリプトの場所を.bashrcに記述します。

source ~/.git-prompt.sh

PS1にスクリプトの出力を追加

ズバリ追加したいのは以下。こうすれば「(ブランチ名)」が表示されます。表示する場所や色とかは任意にカスタマイズしましょう！

$(__git_ps1 "(%s)")

オプション

いくつかオプションがあるようです。stagingに履いているファイルの存在とか、stashしているファイルがあるかどうかを表示できるようです。また調べて追記します。

おわりに

簡単にbashにブランチ名を表示できました。長いブランチ名になるとちょっと見にくくなってしまいますが、git status等使わなくてもブランチがすぐに把握できます。push等しやすくなるのではないでしょうか。

何より間違えてmasterにpushしたみたいな事故が防げます。

gitコマンドの補完を有効にする

Thu, 02 Apr 2020 00:00:00 GMT

bashにおいてgitコマンドのtab補完を有効にする方法です。

ubuntuでは最初からtab補完ができたのですが、macだと出来なかったので困っていました。やり方わかったので忘れないように記事にします。とても簡単です。

補完の設定ファイルを探して、.bashrcにパスを渡すだけです。

git statusとかの補完はもちろんで、git checkout feature/user-login-formみたいなブランチ名なんかもtabで補完できます。とても便利ですね。

設定ファイルを探す

多分gitをインストールしたときに、一緒に設定ファイルもインストールされているようです。その場所を探しましょう。必要であればsudo使いましょう。

find / -name git-completion.bash

例えば以下のような場所にあったりします。人によって違うですので上記コマンドの出力を参考にしましょう。

/Library/Developer/CommandLineTools/usr/share/git-core/git-completion.bash

.bashrcに記述する

上記で取得したパスを.bashrcに記述します。これで完了です。bash起動しなおせば、tab補完が有効になっているはずです。

source ~~~取得したパス~~~/git-completion.bash

おわりに

とても簡単です。一度やれば特に再設定の必要もないので、記事にするほどのことでもありませんね。別の環境に移行するときなんかに便利なので記事にしました。

未設定の方や、何故かtab補完ができなくて不便に思っている方はぜひ試してみてください。

bashの表示をカスタマイズ

Mon, 30 Mar 2020 00:00:00 GMT

bash の表示をカスタマイズします。

bash にて左側の部分にディレクトリがいっぱい表示されたり、パソコンの名前？が表示されてかっこ悪く思った経験あるのではないでしょうか。

表示する内容や色などを変更しておくと作業もしやすくておすすめです。bash のカスタマイズなんて今更ですが、たまに共有することがあるので記事にまとめておきます。

.bashrc を作成

ホームディレクトリに「.bashrc」を作成します。 bash 関連の設定をここに記載することで、色々と変更できます。

.bash_profile との違い

似た役割を果たすファイルとして「.bash_profile」というものも有ります。一般的な設定は特に理由がなければ.bashrc の方に書けば問題ないです。

.bash_profile ログイン時に1回だけ実行
.bashrc シェルを起動する度に実行

設定の紹介

例えば以下のように設定します。

PS1="\[\e[95m\]\W $ \[\e[0m\]"

基本的には \と 1文字で表示する内容を定義。 []で囲んだ部分はスケープシーケンスといって太字やフォントカラーなどを調整できます。

意味のある記号

表示する内容を指定する要素は以下です。

\h ホスト名
\u ユーザ名
\w ディレクトリ（フルパス）
\W ディレクトリ
\t 時間
\d 日付
\D 日時
\D{%y/%m/%d %H:%M:%S} + 18/06/20 23:29:38
\n 改行
$ 一般ユーザーは「$」、root なら「#」

エスケープシーケンス

\[ \]で囲まれているところは内容ではなく表示スタイルを指定します。以降すべてにスタイル指定がかかるので、範囲を指定する場合は無効にするエスケープシーケンスで閉じます。

シーケンス内で\e[に続けて設定を記述します。;を指定することで複数の設定を定義できます。

文字装飾

0m 装飾なし
1m 太字
2m 細字 (未対応)
3m イタリック体
4m 下線

文字色

0m 装飾なし
30m 黒
31m 赤
32m 緑
33m 黄
34m 青
35m 紫
36m 水
37m 灰
39m デフォルト

90以降にも割当がある様子です。

背景色

40m 黒
41m 赤
42m 緑
43m 黄
44m 青
45m 紫
46m 水
47m 灰
49m デフォルト

100以降にも割り当てがある様子です。

最後は \[\e[0m\] にすることで、bash右側の入力部分の修飾が無効になります。忘れないようにしましょう。

ちなみにデフォルトの設定はこんな感じなはず。

PS1="\h:\W \u\$ "

おわりに

簡単にですがbashの表示をカスタマイズできます。ちょっとしたことしか出来ませんが、自分の見やすいように設定しておくと良いです。各種環境でも使えるようにお気に入りの指定をメモしておきましょう。

他にもgitのブランチを表示したりすることもできますので、機会があれば紹介します。

エラー System limit for number of file watchers reachedの対応

Wed, 26 Feb 2020 00:00:00 GMT

React Nativeでアプリを開発しているときに、developmentサーバを立ち上げようとすると以下のエラーが発生しました。

Error: ENOSPC: System limit for number of file watchers reached,

Node.jsなどを利用しているときに発生することがある様子で、Linuxでファイル監視を行う処理がシステムで設定されている監視対象ファイルの上限数に到達すると起こります。原因と対応方法について備忘のためにまとめました。

概要

原因
inotifyの状態を確認
一時的な対応
恒久的な対応

原因

Linuxではinotifyという仕組みを使ってファイル監視を行っています。システムのデフォルトで監視対象の上限数が8192に設定されており、割と簡単にこれを越えることが有ります。

inotifyの状態を確認

以下コマンドで上限数の設定を確認できます。

cat /proc/sys/fs/inotify/max_user_watches

一時的な対応

一時的に変更したいだけであれば以下のsysctlを使って変更できます。

sudo sysctl fs.inotify.max_user_watches=24288

変更後はもう一度設定内容を確認して、変更内容が正しいことを確認しましょう。

恒久的な対応

設定をずっと書き換えておきたい場合は以下のコマンドを実行します。大きな数値にしすぎるとパフォーマンスに影響するかもしれません。必要な分だけ数値を上げることが望ましいです。どれくらいの数値が必要なのかを調べる方法がわからないので、動かしてみないとわかりません。いったん、2倍ずつ上げていくとか段階を踏んですこしずつ増やしていくのがおすすめです。

echo fs.inotify.max_user_watches=24288 | sudo tee -a /etc/sysctl.conf
sudo sysctl -p

おわりに

それほど難しい問題でなくてよかったです。いつか、また同じエラーが出たら、ここにメモしたことを思い出して対処します。

React NativeでLottieを使ってアニメーション実装

Tue, 25 Feb 2020 00:00:00 GMT

React Nativeで作成したアプリにLottieでアニメーションを実装する手順の紹介です。

Lottieはairbnbが開発したアニメーションライブラリーで、Web上で利用できる他にReact Nativeでも実装が可能です。大きな特徴としては、AdobeのAfter Effectsを使って作成したアニメーションをLottie用にエクスポートして実装します。 Lottie用にエクスポートされたデータはJsonファイルとなっており、容量の削減などが期待できます。

各OSのネイティブで実装できる他に、Webでの実装やReact Nativeでの実装が用意されています。マルチプラットフォームで利用できることも大きな特徴と言えるでしょう。

概要

ドキュメント
After Effectsの設定
インストール
実装
上手くいかなかったポイント

ドキュメント

https://airbnb.io/lottie/#/README
概要です。After EffectsでインストールするBody movinのことなども説明されています。

https://airbnb.io/lottie/#/react-native
こちらはReact Nativeすなわちアプリ側での実装方法です。

After Effectsの設定

まずはAdobe After Effects側の設定からです。「Bodymovin」というライブラリをインストールする必要が有ります。基本的に以下のドキュメントに従って進めれば問題ないです。

https://github.com/airbnb/lottie-web

プラグインをインストールして、必要な設定を変更します。

Go to Edit > Preferences > Scripting & Expressions... > and check on "Allow Scripts to Write Files and Access Network"
[編集]> [設定]> [スクリプトと式...]に移動し、[スクリプトによるファイルの書き込みとネットワークへのアクセスを許可する]をオンにします

設定がおわったらアニメーションを作成しましょう。先程インストールした「Bodymovin」は完成したアニメーションをjsonで書き出すときに使用します。

ウインドウ > 拡張機能 > Bodymovin と選択してライブラリを起動します。書き出すアニメーションを選択して出力先のディレクトリやファイル名を入力したら、チェックをつけてRenderをクリックするとjsonファイルが出力されます。

インストール

いつもどおりです。npmやyarnでインストールします。

npm install --save lottie-react-native

その後 react-native linkを実行しましょう。jsのみではなくネイティブのコードも含まれているライブラリであるため、react-native linkを行う必要が有ります。

react-native link lottie-react-native

実装

LottieViewコンポーネントをインポートして、アニメーションjsonファイルを渡して書き出せば良いです。コンポーネント自体に高さと幅を定義しておかないと要素自体が表示されませんでした。気をつけましょう。

import LottieView from "lottie-react-native";
~~~

<View style={styles.animationContainer}>
    <LottieView
        ref={animation => {
            this.animation = animation;
        }}
        style={{
            width: 200,
            height: 200,
        }}
        source={require('./assets/anime.json')}
    />
</View>
~~~

refでanimationを格納しています。アニメーションの開始や停止、再動作などを操作する場合はこのようにしてrefに格納しておきましょう。以下のようにanimationに用意されたメソッドで挙動を制御できます。

this.animation.reset();
this.animation.play();

上手くいかなかったポイント

未対応のエフェクトがある

After Effectsのすべての機能やエフェクトに対応しているわけではないらしく、思ったように動作しない・表示されない現象に出会いました。以下のリンク先で対応しているエフェクトの種類が把握できますので、対応しているものを使ってアニメーションをつくるようにしましょう。

https://airbnb.io/lottie/#/supported-features

アニメーション作成の前には必ずチェックするようにします。

アニメーションの動作チェック

上記の未対応のエフェクトなどもあるので、アニメーションが動かないときは原因の切り分けをしっかりやりましょう。

方法としては、Web版のprevierで動作を確認、その後、端末のLottieクライアントアプリでも確認。そしてアプリで実装して確認、というフローが用意できます。

Web版プレビュー
https://lottiefiles.com/preview
会員登録が必要です。出力したjsonファイルをアップロードして動作の確認ができます。
Lottieクライアントアプリ
各OSのストアからインストールできます。
上記のWeb版プレビューを行うとQRコードが取得できます。それをクライアントアプリで読み込めば、アニメーションの動作チェックを行えます。

ここまで正常に動作していれば、実際のアプリでも動作するはずです。アプリで対応していないエフェクトであれば、クライアントアプリで動作確認した際に、動かない・表示されない・エラーで停止するといった現象が発生します。

おわりに

実装はとても簡単でした。After Effectsの使い方や、アニメーションの作り方のほうが難しかったです。アニメーションの作成に慣れれば、アプリのUI表現も豊かになります。簡単なアイコンなどもアニメーションで状態遷移するようできれば完成度がぐっと上がります。

Adobeのチュートリアル動画を見ながら進めましたが、わりとReact Nativeでは対応していないエフェクトを使っていたようです。textなどのアニメーションで実機にて動かないものがあったため、少し時間を取られました。

作りたいアニメーションを実現できるかエフェクトの対応状況を確認してからアニメーション作成に入るように注意しましょう。

React NativeでStorybookを使ってUIコンポーネントを管理

Sun, 23 Feb 2020 00:00:00 GMT

React NativeでのStorybookの使い方です。

StorybookはReacやVueなどのUIコンポーネントの管理を簡単にしてくれるツールです。ざっくり言うと、コンポーネントを表示・確認するデバッグルームのようなものを用意します。ここでUIコンポーネントの表示の確認・調整・管理を行います。

ロジック・データとデザインを分離して表示することで、UI表示のみに注目した状態で監理できるようにしておきます。このことにより、仮想環境の用意やデバッグツールの利用などに苦戦してしまうエンジニア以外の人にも、表示の確認や調整がしやすくなります。デザイナーやテスター、ディレクターやクライアントなども含まれるでしょう。

React Nativeでも利用することが出来ますので、今回はそちらを紹介します。Storybook for React Nativeを使って、アプリにUIコンポーネント管理ツールを用意する方法の紹介です。Storybookをアプリ内に設置する方法と、別でstorybook serverを用意する方法の2つが有りました。

ただ、React NativeでStorybook for React Nativeを使う方法は、あまり使いやすい環境とは言えないと感じました。どうやら、React Native for Web と React版のStorybookを使うのが良さそうです。今度やってみたら別で記事にします。

概要

ドキュメント
インストール
エントリーファイルを用意
アドオン定義ファイルを作成
ストーリーブックにアクセス
ストーリーを記述
Storybook サーバーによる起動

ドキュメント

https://storybook.js.org/docs/guides/guide-react-native/

インストール

いつもどおりです。npmやyarnを使ってインストールしましょう。

npm install --save-dev @storybook/react-native

エントリーファイルを用意

ますはstorybookディレクトリをプロジェクトに作成します。ここにStorybook用のファイルをまとめて作成しれば管理しやすくなります。

つぎにエントリーファイルとなるstorybook/index.jsを作成します。内容は以下です。

import { AppRegistry } from 'react-native';
import { getStorybookUI, configure } from '@storybook/react-native';

import './rn-addons';

// import stories
configure(() => {
  require('./stories');
}, module);

// Refer to https://github.com/storybookjs/storybook/tree/master/app/react-native#start-command-parameters
// To find allowed options for getStorybookUI
const StorybookUIRoot = getStorybookUI({});

// If you are using React Native vanilla write your app name here.
// If you use Expo you can safely remove this line.
AppRegistry.registerComponent('%APP_NAME%', () => StorybookUIRoot);

export default StorybookUIRoot;

このファイルでは必要なモジュールのインポートを行います。そのうえで、利用するアドオンを定義したファイルrn-addonsのインポート。ストーリーを定義したファイルのインポートをstoriesディレクトリから行います。

アドオン定義ファイルを作成

storybook/rn-addons.jsを作成します。このファイルにStorybookで利用するアドオンを定義します。アドオンはブラウザ等にあるものと同じで追加機能みたいなものです。ログ機能だったり、メモ機能だったり色々です。

例えば以下のようにします。React Nativeの場合はWebで利用するときとは別で用意されたAddonになるので注意しましょう。

import '@storybook/addon-ondevice-knobs/register';
import '@storybook/addon-ondevice-notes/register';

ストーリーブックにアクセス

React Nativeで利用する際は、Storybookを表示するスクリーンを用意します。デバッグルームみたいなものをアプリ内に用意する必要があります。Devモードなら表示するとか、開発中は設置しておいてビルドするときに削除するとかしたらいいのでしょうか。ちょっと製品のソースコードに混ざってしまうのはイマイチですね。

任意の画面を用意して以下のようにstorybookのエントリーポイントを表示します。 StorybookのエントリーポイントはViewコンポーネントと同じように利用できます。

export default from './storybook';

ストーリーを記述

いよいよStorybookで管理するためのストーリーファイルを作成します。エントリーポイントに定義したようにstoriesディレクトリに定義します。

storybook/stories/index.jsに以下のファイルを作成します。ここに任意のコンポーネントをimportして、表示するようにすればStorybookにリストされます。

Storybookの画面からアクセスして、表示・管理ができるようになりました。こんな感じで各コンポーネントのストーリを定義していくことで、管理ができるようになります。

Storybook for ReactNativeではまだstoriesOfによる定義しかできないようです。ゆくゆくはクラスによるストーリーの定義方法などもサポートされるようです。

import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { View, Text } from 'react-native';

const style = {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#F5FCFF',
};

const CenteredView = ({ children }) => <View style={style}>{children}</View>;

storiesOf('CenteredView', module).add('default view', () => (
  <CenteredView>
      <Text>Hello Storybook</Text>
  </CenteredView>
));

Storybook サーバーによる起動

アプリ内にスクリーンを用意する以外にも、専用のサーバを立ち上げてそちらを端末で起動する方法も有ります。storyBook-serverをインストールして使います。

使ってみましたが、storybook-serverだけではストーリーの確認はできず、並列でアプリケーションを実行する必要が有ります。 storybook-serverとdevelopment-serverを同時に動かしておく必要が有り、ちょっと大げさだなと感じました。

拡張子やディレクトリなどの条件で、storybook-serverにストーリを定義したファイルを渡すことができます。そのため、アプリのソースコードにstorybook用スクリーンやリンクを設置しないですみます。ソースコードは汚れませんが、都度サーバを2つ立ち上げるのが手間に感じました。わりと用意するハードルが高いと感じました。

おわりに

UIコンポーネントを表示のみ独立して監理できることはとても便利です。ぜひReact・React Nativeを使っていて、利用したことがない人には一度使ってみてほしいです。

AtomicデザインなどコンポーネントUI設計の手法とも相性がよく、設計・開発がとても便利になります。Addonを利用することでテストにも使えるようにできますので追って紹介します。

Expoを利用しReact Native for Web製アプリをNetlifyで発信する

Fri, 21 Feb 2020 00:00:00 GMT

React Native for Webを使うことで、ネイティブアプリと同じ感覚でWebアプリを作成できます。

スマホアプリ用に作ったものをブラウザ版として公開するのもいいです。あとからのスマホアプリ展開を見越してブラウザアプリをReactNativeでつくることも意味が有ります。アプリ開発時のテスト検証用としてブラウザで動かせるようにするのもいいですし、簡易版として公開することもできます。

React Native for Webの使いみちは多い印象です。開発もコンポーネントUI設計で進められます。

今回は、Web上で簡単な便利ツールを作りたかったので、React Native for Webで作成してNetlifyで公開してみました。 Expoを使っての開発のため、全般とても簡単・快適に進められました。

いくつか覚えておきたいポイントがあったので、記録しておきます。整理すると、Expo + React Native for Web + Netlify によるWebブラウザアプリの公開についてです。何かの参考になれば。

概要

使用する技術
構築
ビルドしてみる
デプロイ方法
Netlify側の設定
Expo-cliがpackage.jsonに必要

使用する技術

React Native
クロスプラットフォームアプリ開発の仕組みです。Webアプリもつくることが出来ます。React Native for Web。
Expo
React Nativeによる開発を手助けするSDKです。Web版の開発にも大いに役立ってくれます。特にネイティブのAPIを呼ぶこともないので、Web版であればExpo利用するのが手っ取り早くていいです。
Netlify
静的なコンテンツを発信できるホスティングサービスです。HTML・CSS・JavaScriptのホスティング、他にも簡単な関数であったりフォームやCDNとしての使い方もできます。
データベースが必要な場合、Firebaseなど他のサービスが必要ですが、今回はデータ登録などはなくリクエストにレスポンスを返すだけなので、これで十分と判断しました。
リクエストの量やデータサイズなどによって料金プランが有りますが、とりあえずつかってみるのには無料の範囲で十分です。

構築

今回は create React native appコマンドを使って雛形を用意しました。Android・iOSの両OSに加えて、Webの設定も初期値に含まれているのですぐに動かすことができます。

その後expo startを実行してサーバを立ち上げブラウザで確認します。 wキーを押すことでWeb版のアプリが立ち上がり、ブラウザでタブが表示されます。

スマホアプリでは使えるけどWeb版では使えないコンポーネントやAPIもありますが、基本的なものはほとんど使える印象です。ライブラリも同様に対応しているものがおおく、アプリとほぼ同じ感覚で構築できます。

画面の大きさが異なるのでそこは注意しましょう。幅を指定しておくか、最大値を設定して真ん中寄せにするなどしておけばいいです。

「React Navigation」や「React Native Paper」なども十分にWeb版で利用できますので活用しましょう。エラーが出たときは表示に従って、必要なパッケージをインストールすれば問題なく動作しました。

ビルドしてみる

一通り機能が出来上がったら、ビルドを試しましょう。以下コマンドでWeb版のビルドが可能です。

expo build:web

デプロイ方法

Netlifyへのデプロイの設定です。ローカルでビルドした結果を手動でアップロードすることも出来ますが、githubのリポジトリを連携させてNetlifyでビルドするのがおすすめです。

Githubにリポジトリを用意しておき、プロジェクトをpushしておきます。 Netlify側でNew site from Gitを選択してサイトを追加します。
リポジトリの選択に今回のプロジェクトがない場合は、Githubがわで連携の設定を行うことで表示されるようになります。

連携が完了すれば、gihubへのpushをNetlifyが感知するようになります。リモートリポジトリへのpushを完治すると、Githubから最新のコードを取得しNetlifyのサーバでビルドをおこないます。ビルドが正常に完了すれば生成されたファイルを発信してくれます。

こんなふうにgithubへリモートプッシュするだけでNetlify側でビルド・デプロイを行ってくれるようになります。とても便利です。間違えてデプロイした場合も、GUIでデプロイ履歴からロールバックすることも可能ですし、ログなども確認できます。

Netlify側の設定

「Setting」の「Build & deploy」の項目にて以下の設定をしておきましょう。

Build settings

Build command
expo build:web --no-pwa
Publish directory
web-build/

簡単に使いたかったのでPWAは動作しないようにしています。
SEOのことやパフォーマ数を考慮するなら--no-pwaのパラメータは取ってしまいましょう。

Deploy contexts

Production branch
master
Deploy previews
Don’t deploy pull requests
Branch deploys
Deploy only the production branch

上記の設定をしないと、devやfeatureなどのブランチをリモートへプッシュした際にもビルド・デプロイが実行されてしまいました。
ですので、productionブランチとして設定されているものだけが対象となるようにしています。今回のproductionブランチはmasterです。

他にもビルドを行うOSのシステムや、nodeのバージョンなども指定できます。必要に応じて設定しましょう。

Expo-cliがpackage.jsonに必要

最初にデプロイを試した際はビルドコマンドが見つからないというログが出力され、Netlifyのビルドが失敗していました。 expo-cliがNetlify上に無いことが原因です。

大抵の場合はnpm install -g expo-cliとしてグローバルな場所にイントールしており、プロジェクト内には無いため発生してました。プロジェクト内のpackage.jsonに追加して、Netlifyのサーバでも取得してもらうようにすれば解決です。

npm install expo-cliでpackage.jsonに追加しておけば問題ないです。

おわりに

簡単にWebアプリを作成し発信できました。

Expoを利用することで簡単にReact Natvie for WebでWebアプリを構築できます。さらに静的な処理であれば、Netlifyでビルド・デプロイも自動で行うことができます。無料です。

Netlifyとても快適です。ドメインの紐付けもできますしSSHにも対応しています。かなり便利です。今回の組み合わせはかなり快適だと感じました。もっと使いこなして、いろんなサービス立ち上げていきます。

NetlifyによるJAMStackの書籍も無料で公開されているので、時間見つけて読んでみます。英語ですが。 https://www.netlify.com/oreilly-jamstack/

Ubuntuにて「apt update」にエラーが出るときの対処

Fri, 21 Feb 2020 00:00:00 GMT

sudo apt updateを行ったときに以下のエラーが出ました。関係するパッケージについて正しくアップデートされなかった様子です。

yarnのパッケージに関するキーが更新されたため、手元のキーでは照合しても正常なものと判断できなかったようです。

署名照合中にエラーが発生しました。リポジトリは更新されず、過去のインデックスファイルが使われます。
https://dl.yarnpkg.com/debian/dists/rc/InRelease の取得に失敗しました  
いくつかのインデックスファイルのダウンロードに失敗しました。これらは無視されるか、古いものが代わりに使われます。

なるべくアップデートがあれば更新しておきたいので、対処することにしました。検索した所いくつか情報がありました。以下に対処方についてまとめたものを書いています。

参考

https://github.com/yarnpkg/yarn/issues/4505#issuecomment-332698773
issueが上がってました。この内容を参考にすれば解決できます。

https://classic.yarnpkg.com/en/docs/install/#debian-stable
あまり関係ないですが、yarnのインストール手順はコチラです。

対処方

yarnのキーの更新を行います。OKと出力されます。 yarnの共通鍵を取得して、aptのキーリストに追加しているという事です。

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -

改めて apt update

共通鍵を新しいものに更新下とで、apt updateを再度行うと正常にパッケージの更新ができます。

おわりに

定期的にキーの更新を行う必要があるようです。 apt updateを行った際にyarnで同様のエラーがでた際にこの手順で対処するようにしましょう。

大した問題でなくてよかったです。

React Nativeでjestを使ってスナップショットテストを行う

Fri, 21 Feb 2020 00:00:00 GMT

React Natvie でも jest を用いることで簡単にテストを準備できます。

今回はReact Nativeにおける、 jest のセットアップとスナップショットテストの実施についての説明です。 jestを使えば大規模な開発はもちろん個人開発など小さなプロジェクトでもテストを簡単に取り入れるられます。テストによる恩恵は大きいのでぜひ身につけておきたい知識です。

jest ではユニットテストも行うことができるのですが、いくつか関連ライブラリを利用することになりますので別の機会に説明します。

概要

React Native での jest を使ったスナップショットテストの導入方法です。

ドキュメント
インストール
テストコード
テストの実施
結果
Expo を利用する場合

ドキュメント

https://jestjs.io/docs/ja/tutorial-react-native

インストール

以下コマンドでインストールします。

npm install --save-dev jest
npm install --save-dev react-test-renderer

package.json に以下のコマンドエイリアスを登録しておきましょう。

{
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "preset": "react-native"
  }
}

以下コマンドを実行することで jest の設定ファイルを作成することもできます。

jest --init

react-native initにて作成したプロジェクトの場合は、セットアップ済みなので初めから利用可能です。

テストコード

テストコードは基本的に「__test__」に書いていきましょう。ソースコードとは分けておくことで管理がしやすくなります。ソースコードとディレクトリの構成を合わせると管理しやすいです。

例えば__test__/components/header.test.jsを作成して、ヘッダーコンポーネントのスナップショットテストを定義します。

import React from 'react';
import Header from '../components/header';

import renderer from 'react-test-renderer';

test('header snapshot', () => {
  const tree = renderer.create(<Header />).toJSON();
  expect(tree).toMatchSnapshot();
});

スナップショットテストなのでtoMatchSnapshot()を実行します。他にもいくつも比較メソッドがあります。必要に応じて使い分けてユニットテストなどの実装が可能です。

テストの実施

以下コマンドでテストを実行します。

npm run test

問題なく実行できればテストは完了し結果が表示されます。

コンポーネントが正しくレンダリング出来ない場合などは、コンポーネントに引数を渡すなど工夫が必要になります。 Redux やナビゲーションが必要なときなどテストが難しくなるパターンも有りますが、大抵の場合はテストの記述が出来ます。

できる限りシンプルなコンポーネントを目指すことで、テストがしやすくなり管理も簡単になるので心がけると良いです。

結果

いくつのテストが行われ、いくつ成功・いくつ失敗したのかが記述されます。テストで取得したスナップショットは__test__/__snapshots__/内に保存されます。

今回行っているのはスナップショットテストです。正常にスナップショットが取得できなかった場合以外にも、前回のスナップショットと差分をチェックして差異がある場合も失敗として扱われます。

テストを通過できなかった箇所が、開発者の意図どおりであれば問題ありません。その場合は、スナップショットを更新するようにオプションをつけて再度テストを実行します。

npm run test -- -u

意図してない場所に影響がある場合は、必要に応じて修正を行いましょう。

Expo を利用する場合

Expo を利用する場合はjest-expoを利用するのが推奨されています。基本的にテスト記述などは同様に使うことができます。

ドキュメント

https://docs.expo.io/versions/v36.0.0/guides/testing-with-jest/

インストール

以下コマンドでインストールします。

npm install --save-dev jest-expo
npm install --save-dev react-test-renderer

package.json

以下のように設定しておきましょう。

"scripts": {
  ...
  "test": "jest"
},
"jest": {
  "preset": "jest-expo"
}

おわりに

jest を用いることで簡単にテストを行うことが出来ました。今回説明したテストはスナップショットテストとなっています。前回の構築から変更されたコンポーネントをわかるようにして、意図的に変更した所以外に影響が無いかをチェックできます。

直接変更を加えてコード以外の場所で、思わぬところに影響が出たとか動かなくなったということを未然に防ぐことができます。

jest と他のライブラリを合わせることで、詳細にユニットテストを実装することもできます。今後ユニットテストの方法についても紹介します。

Application Loaderがなくなった→TransporterでApp Storeにアップロード

Tue, 18 Feb 2020 00:00:00 GMT

久しぶりにiOSアプリのアップデートをしたいので、Xcodeを開き「Application Loader」を起動しようとした所、該当の箇所からなくなっていました。Xcode11からはApplication Loaderは利用できなくなったようです。

React Native + Expo でビルドを行った場合、Expoからipaファイルをダウンロードして自分でアップロードする必要があります。その際、私はApplication Loaderを使っていました。

この度それが使えなくなったので代わりの方法を探していた所、「Transporter」という公式のアプリケーションを見つけました。 Transporterを利用して無事にアップロードできました。その時の手順をメモしておきます。

他にもxcrun altoolというコマンドでもアップロードができるようでしたので、そちらについても記載しておきます。

概要

ApplicationLoaderがない
「Transporter」がApp Storeに公開されている
Transporterをつかってipaファイルをアップロード
「xcrun altool」というコマンドでも可能らしい

ApplicationLoaderがない

「Xcodeを起動し、XcodeのOpen Developer toolからApplication Loaderを起動する」のがいつものフローなのですがなくなってました。どうやらXcodeのアップデートがあり、現在のバージョンではApplication Loaderが利用できなくなったようです。困りました。

「Transporter」がApp Storeに公開されている

利用できなくなった代替として「Transporter」というアプリケーションがApp Storeに公開されていました。

https://apps.apple.com/jp/app/transporter/id1450874784

とりあえずの概要としては以下です。

Transporterは、Appleにコンテンツをデリバリするためのシンプルで簡単な方法です。
App Store、Apple Music、Apple TV App、Apple Books、またはiTunes Storeで配布するApp、ミュージック、映画、テレビ番組、ブックを簡単に送信できます。

通常のアプリと同様にApp storeからMacにインストールします。

Transporterをつかってipaファイルをアップロード

App Store Connectのアカウントのログインが必要なので、入力してログイン。その後手元のipaファイルを選択すれば、問題無くApp Storeへのアップドードができました！

「xcrun altool」というコマンドでも可能らしい

私は試さなかったのですが、xcrun altoolというコマンドでもipaファイルをApp Storeにアップロード可能なようです。困ったときに使える用メモしておきます。

xcrun altool --upload-app -f ファイル名.ipa -t ios -u アカウントID -p パスワード

おわりに

なんとなく、ApplicationLoaderはサポートされなくなる気がしていましたが、案の定でした。かわりにTransporterという便利なアプリが追加されたので良かったです。まったく詰まることも無くアップロードできたので良かったです。

調べるとすぐに出てきたのでそんなに困らないでしょう。 Expoなどと同様にビルドファイルが手元にある場合はTransporterを使ってApp Storeにアップロードしましょう。

React NativeでInput要素の入力後に画面を塞ぐキーボードを隠す

Mon, 17 Feb 2020 00:00:00 GMT

スマホアプリにおいて、インプット要素でソフトウェアキーボードにより要素が隠れてしまうことがあります。スマホにおいて、キーボードは画面の3分の1から2分の1を占領するため、画面に表示できる要素が少なくなります。

Androidでは戻るボタンがハードキーで用意されている、またはホームボタンの横にあることが多いのでキーボードを簡単にしまえます。
しかし、iOSでは戻るボタンが無いのでキーボードをしまえずに困る場合があります。

この現象を回避するために以下のような方法が考えられます。

入力後にインプット要素以外をタップするとキーボードが隠れる
KeybordAvoidingViewを使って、表示したい要素をキーボードを避けて上に移動させる

今回は、「入力後にインプット以外をタップするとキーボードが隠れる」実装を紹介します。
KeyboardAvoidingViewを使った実装については以前にblogで紹介していますので、参考にご活用ください。
React NativeでKeyboardAvoidingViewが意図通りに動かない場合

結論を先に言うと

TouchableWithoutFeedbackを利用して、インプット要素以外をタップした際にKeyboard.dismiss()を実行します。

インプット要素を含む画面内のなるべく大きい範囲をTouchableWithoutFeedbackで囲みます。その上で、onPressにキーボードを閉じる処理Keyboard.dismiss()を設定します。

概要

TouchableWithoutFeedback
Keyboard.dismiss()

TouchableWithoutFeedback

ドキュメント

https://facebook.github.io/react-native/docs/touchablewithoutfeedback

React Nativeの標準コンポーネントです。タップ時に任意の処理を実行できます。

他のTouchable〜コンポーネントとの違いは、タップ時の視覚的なフィードバックが無いことです。うんともすんとも言わないです。ですので、このようなフォーカスが外れるといったようなキャンセル処理に向いているとも言えます。
通常のボタンやリンクなどでは使わないほうがいいです。

インポート

以下のようにインポートして使います。通常はViewやTextもありますのでその場合は一緒に指定しましょう。

import { TouchableWithoutFeedback } from 'react-native';

実装

インプット要素を含む形で親コンポーネントにします。このコンポーネントをタップした際にonPressが実行されます。今回の要件であれば、なるべく画面全体が含まれるようにします。

<TouchableWithoutFeedback
  onPress={() => {
    // 実行したい処理
  }}>
  <View>
    <Input>
    <Input>
  </View>
</TouchableWithoutFeedback>

TouchableWithoutFeedbackの子要素は単一コンポーネントのみ受け付けます。並列に2つ以上の子要素をもたせるとエラーになるので注意しましょう。上記のようにViewで囲んでしまえば大丈夫です。

Keyboard.dismiss()

ドキュメント

https://facebook.github.io/react-native/docs/keyboard

端末のキーボードに関わるイベントを管理するモジュールです。詳細は上記のドキュメントで確認できます。キーボードを非表示にするほかにも、表示・非表示などのイベントに関数をaddListenerできます。

インポート

こちらもreact-native からインポートします。他のコンポーネントと同様ですので一緒に指定しましょう。

import { TouchableWithoutFeedback,Keyboard } from 'react-native';

実装

今回はキーボードをしまうKeyboard.dismiss()を利用します。
先程のTouchableWithoutFeedbackのonPressに設定すれば良いだけです。特に引数なども必要ありません。

<TouchableWithoutFeedback
  onPress={() => {
    Keyboard.dismiss()
  }}>

これで、Inputをタップして入力を行った後に、Input以外の場所をタップするとキーボードが隠れるようになりました。

おわりに

今回の実装は、KeyboardAvoidingViewを使うよりも簡単です。動作も直感的にわかりやすいのでシンプルになります。ただユーザー側で一度余計なタップが必要になりますので、UI的に検討したほうがいいです。

なんとなく、「インプット以外をタップするとフォーカスが外れてキーボードが隠れる」は、ユーザーが想定できる動きに私は感じます。ただ、実際のすべてのユーザーがそうなのかわかりません。リテラシーやスマホの使い方、経験によっても異なりますのでUIの検討の必要がありそうです。

どちらにしても、キーボードをしまえないのは困るのでインプット要素を実装する際は、できるだけこの実装を行いましょう。

「あるあるデザイン」を読んだ

Mon, 17 Feb 2020 00:00:00 GMT

デザインに関するアイデア集です。

以前ブログで紹介した余白を活かす『けっきょく、よはく』と同じ作者「ingectar-e」による執筆です。
さまざまなデザインのパターンにキャッチーなタイトルをつけて紹介しています。

45種類のパターンが掲載されており、つけられたタイトルが面白く実例も載っています。注目すべきポイントがわかりやすくなっていますのですぐに真似して使うことができます。

パターンにつけられたタイトルがおもしろい

デザインに特長を出すためのパターンを紹介している本ですが、注目すべきはそれぞれにキャッチーなタイトルをつけているところです。「丸インパクト」「ななめスタイリッシュ」などそのまんまであり、かつ短く覚えやすいタイトルになっています。
簡単な言葉を使って表現することでより理解しやすく、注目すべきポイントが際立ちわかりやすくなっています。

何らかのデザインを見たときに「これは丸インパクトだ！」とひらめくときにも効果がありそうです。さまざまなデザインを言語としてパターン化しておくことで、自分の中に物差しができデザインを見る力も養われます。

紹介されているデザインのパターンはシンプルなものが多く、簡単に採用できそれであって効果のある表現ばかりでした。

ボリュームは少なめ

それぞれのパターン紹介は4ページくらいとなっているので、詳細なテクニックや応用などは書かれていません。
大きなポイントは理解できますが、細かい部分や揃えるべき点の調整やより細部の隠れたポイントなどについては、解説が欲しくなりました。

しかし、その分サクサク読めますし45通りのパターンを知ることが出来ます。デザインのアイデアに困ったときなどに読むと大いに助けられそうです。

組み合わせて使ってみるのも良い

基本的に1つのテクニックを使うことでスッキリかつ目を引くデザインにできます。応用として2つ以上のパターンを組み合わせてみるのもおもしろいです。相性も有りますが、使いこなすことができれば強い武器になります。いくつも採用しすぎてモリモリにするとかっこ悪くなるので注意しましょう。

おわりに

この本のようにデザインを言語化するというのは学習においてとても重要なことです。自分なりの言葉を使って言語化することで、デザインセオリーを他人に伝えることができるようになります。メタファーを使ったり抽象化・具象化したりすることですね。そこまで来てやっと使いこなせていると言えるのではないでしょうか。実際にデザインをつくることも大切ですが、言語化して他人に説明するというのもデザインの訓練になると感じました。

書かれているパターンを真似してみることで、細かい部分の工夫や意味に気づくことができます。それぞれのパターンで共通の要素などもありますので、タグ付けを行い整理してみるのもおもしろいです。

分類することで対象的な部分や共通の部分に気づくことができ、デザインの型のようなものが浮かび上がってきます。

Reduxについての概要

Fri, 14 Feb 2020 00:00:00 GMT

以前からReact/React NativeにてReduxを利用したアプリを作成しています。

Reduxの概念について説明する機会があったので、簡単にですがまとめておきます。いったんキーワードベースでの解説としいます。サンプルコード等は少なくしました。

基本的にReduxはstateの管理を1つのストアで集約的に管理するものです。これを使うことでコンポーネントから一元管理されたstateへアクセスできるようになります。使わない場合はprops等でやり取りすることになりますね。

概要

ドキュメント
Store
Actions
Reducer
Connect

ドキュメント

https://redux.js.org/introduction/getting-started
reduxのドキュメントです。基本これのチュートリアルを順番に読んでいくことで理解が進みます。

https://react-redux.js.org/introduction/basic-tutorial
reduxをreactで使うためのライブラリーです。reduxはreact以外のフレームワークでも使えるようで、それぞれに対応したライブラリーを使うことがおすすめされています。 reactに対してはこのreact-reduxが公式でもオススメとされています。

Store

ReduxではアプリケーションのすべてのStateをひとつのオブジェクト「Store」にて管理する。

StoreはgetStoreによりデータにアクセスが可能で、dispatchによってデータの更新を行う。 subscribeによってリスナーを登録することもでき、解除もできる。

データを分割したい場合、Storeを複数つくるのではなくReducerの分割を行います。

アプリケーションに対してStoreは1つという決まり。

このStoreにてデータを一元管理すること・できることがReduxの肝心なところ。

Actions

Storeに情報を渡すためのオブジェクト。

オブジェクトでありプロパティとして「type」が必要。 typeの値には定数文字列が推奨されており、文字列リテラルでも良い。「ActionTypes」としてファイルを切り出して定義しておくのがオススメ。

payloadとしてストアに渡されるデータをまとめて定義することもある。

// Action 純粋なオブジェクト
const addTodoAction = {
  type: ADD_TODO,
  payload: {
    id: ++nextTodoId,
    content
  }
}
;

ActionCreator

引数を受け取りActionを返すメソッド。これを「dispatch」でStoreに渡すことでStoreの更新を行う。

// これは引数を受けとり、Actionを返すのでActionCreator
export const addTodo = content => ({
  type: ADD_TODO,
  payload: {
    id: ++nextTodoId,
    content
  }
});

Reducer

Storeへ渡されるActionに応じて、State更新の内容を定義しておく。
Actionの「type」によって更新内容を切り分ける。

Reducerは前のStateとActionを受け取り、次のstateを返す。 Stateに書き込むのではなく別のオブジェクトを返す。したがって、Stateを直接書き換えてはいけない。前のStateの中身を展開したものと、更新するパラメータをオブジェクトにしてまとめて返す。すなわち更新後のState。

意図せず未定義のアクションが渡された場合は前のStateをそのまま返す。
一番最初はStateが空なはずなので、Stateの初期値を与えておく。

Reducerでやってはいけない３つのこと

引数に与えられたものを直接書き換えてはいけない
書き換えるのではなく、新しいStateをつくって返す
APIの呼び出しやルーティング処理をしてはいけない
純粋でない関数を呼んではいけない
dateとかrandomとか

CombineReducer

データ定義や関連するドメインなどで分割して子Reducerを作っておき、合成して親Reducerとして扱うと良い。 Stateの一部を管理するような子Reducerを複数作成して、CombineReducerにて結合するのが良い。

動作としてはDispatchにActionを渡すと、全ての子ReducerにActionを渡して帰ってきた新しいStateを結合しているらしい？。

export default combineReducers({ todos, visibilityFilter });

Connect

Connectを使ってコンポーネントをラップすることでコンテナ化する。こうしてコンテナ化することで、Storeからのデータ取得やdispatchによるデータ更新を可能にする。

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Component);

mapStateToProps

Connectの1つ目の引数。
Storeにアクセスしてデータを取得する処理を行い、stateをコンポーネントのpropsに渡します。 Storeから必要なデータを取得・変換・編集してコンポーネントのpropsへ渡すことが目的です。

基本的にReduxはStoreに何らかの更新があると、データが再取得され再レンダリングの対象になるようです。

このメソッドを定義しなかった場合はStoreがコンポーネントのpropsに渡される？ようです。 nullとかを渡せば、更新不要なコンポーネントとして定義できるかな。

mapDispatchToProps

Connectの2つ目の引数。
Storeにdispatchして更新するための処理をコンポーネントのpropsに渡します。

コンポーネント内でdispatchを実行してもいいのですが、こちらで定義しておくことも出来ます。定義しなかった場合はdispatchがコンポーネントに渡されるので、コンポーネント内でpropsのdispatchを実行します。

おわりに

Reduxは理解するのに時間がかかるという話を聞きますが、それほどで難しいものではないです。時間を取ってドキュメントを見れば簡単に理解できます。大きなフレームワークではなく小さなライブラリーですので。

ドキュメントが英語なのでとっつきにくいですが、勉強してみるとおもしろい仕組みです。コンポーネント間で正しくデータを管理して渡せば、Reduxが無くても実装は可能です。しかし、Reduxを選択肢として使えるととても便利です。

React・React Nativeで実装するに当たって、主要ライブラリの1つですのでしっかり身につけておきたいです。

React Nativeのセットアップ

Tue, 11 Feb 2020 00:00:00 GMT

React Nativeでスマホアプリをつくる際の環境立ち上げのメモです。人に教える機会があったのでついでにまとめておきます。Ubuntuの場合です。

基本はとても簡単です。端末の接続や稼働環境の準備など必要ですが、そのあたりも追々まとめます。 Expoを使うとさらに簡単です。

概要

ドキュメント
Expoを使う場合
React native cliを使う場合

ドキュメント

https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment

上記ドキュメントに従って進めれば問題ありません。

Expoを使う場合

Expoを使う場合はとても簡単です。いくつかできなくなることも有りますが、とりあえず動かしてみるのには十分なのでとても便利です。最初はコチラを利用するのがおすすめです。

npm install -g expo-cli

上記を行うだけでExpoを使ってのデフォルトアプリの用意などできるようになります。

あとは、実際に端末で動かすために各OSストアにてExpoのクライアントアプリをインストールすればオッケーです。

React native cliを使う場合

Expoを使わない場合です。ちょっと手順が複雑になりますがネイティブ部分の実装などが必要な場合、コチラの手順が必要になります。

以下3つが必要ですのでインストールします。

Node

nvmなどを使ってインストールしましょう。

JAVA開発キット

https://adoptopenjdk.net/installation.html#linux-pkg
このページの内容に従って進めます、aptでインストールします。

Android開発環境

Android studioをインストールします。別記事でまとめました。参考にどうぞ。
Android studioのインストール手順
Android SDKのインストール
Android studioのSDKマネージャーにてインストールを行います。「Configure」から「SDKManager」を開き、以下2箇所の設定をおこないインストールします。
右下の「Show Package Details」にチェックをつけておきましょう、詳細な情報が表示されます。
1. SDK Platformsタブにて以下の項目にチェックをつけます。
  - Android 9 (Pie)のAndroid SDK Platform 28
  - Intel x86 Atom_64 System Image または Google APIs Intel x86 Atom System Image
2. SDK ToolsタブにてAndroid SDK Build-Toolsの28.0.3にチェック。
  
  OKをクリックして規約等のチェックを行い、インストールします。
環境変数にANDROID_HOMEを設定
$HOME/.bashrcか$HOME/.bash_profileに以下を追加します。
```
export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-too
```
設定変更後、bashに反映します。再度起動するかsource $HOME/.bashrcを実行。
その後、echo $PATHで環境変数にANDROID_HOMEが追加されていることを確認しておきましょう。

必要ならWatchmanをインストール

パフォーマンス的にあったほうがいいそうです。推奨されています。
https://facebook.github.io/watchman/docs/install.html#buildinstall

おわりに

基本的には上記でreact-native initコマンド、またはexpo initにてデフォルトのアプリを始めることが出来ます。 Expoを使っている場合はそのまま端末でのデバッグ等可能ですが、そうでない場合は物理端末との接続・連携が必要になります。

端末の接続・連携についてはまた別記事で紹介します。

AndroidデバイスでReact Nativeアプリを実行する準備

Tue, 11 Feb 2020 00:00:00 GMT

仮想端末では無く物理的な端末と接続してReact Nativeのアプリを動かすための準備です。やっぱり実際の端末で動かしたほうが確実ですので、設定しておくのがおすすめです。

UbuntuとAndroid端末を接続して、開発中のReact Nativeアプリを実機で動作確認します。

概要

ドキュメント
端末側にてUSBデバッグを有効にする
USBで端末と接続
アプリを起動する

ドキュメント

https://facebook.github.io/react-native/docs/running-on-device
基本ドキュメント通りに進めます。ほぼ問題なくできるくらい簡単になっます。

端末側にてUSBデバッグを有効にする

スマホの設定画面から、ビルドBuild Numberを数回タップすることで開発者オプションを変更できるようになります。そこで、USBデバッグを有効にします。

USBで端末と接続

USBでPCと接続します。

製造元コードを確認

lsusbコマンドでmanufacturer code:製造元コードを確認します。
接続前と接続後で実行して、差分として出てくるものがスマホ端末のものです。

デバイスIDの先の4桁をメモしておきます。

udev rulesに追加

以下コマンドでudev rulesに追加します。
22b8の部分を先ほど取得したコードに書き換えて実行しましょう。

echo 'SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev"' | sudo tee /etc/udev/rules.d/51-android-usb.rules

確認する

以下コマンドを実行するとdeveiceが追加されていることがわかります。

adb devices

アプリを起動する

ここまでで準備は完了です。

アプリのプロジェクトディレクトリに移動して以下コマンドを実行すれば、ビルドを行い端末でアプリが起動します。エラーが出るようでしたら、環境変数のチェックなど確認してみましょう。

react-native run-android

以降アプリの更新を行いながら開発する場合は、development serverを起動させておくことでプログラムを更新します。デフォルトのプロジェクトでは以下コマンドで起動できます。

react-native start

よくあるエラー

port:8081にて通信するので,ファイアウォールの設定が必要になる場合が有る
ufwなどのコマンドを使って設定しましょう。
仮想端末のバージョンによってはhttp 通信を受け付けない設定になっている
android.manifestに設定を追加すれば通信が許可されます。ローカルで通信に使うIPアドレスを調べて、ホワイトリストに入れて通信できるようにします。端末側で表示されるエラー内にリクエストしているIPが出力されてますので確認しておきましょう。
以下を/android/app/src/main/res/xml/network_security_config.xmlとして保存
```
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<domain-config cleartextTrafficPermitted="true">
<domain includeSubdomains="true">localhost</domain>
<domain includeSubdomains="true">10.0.2.2</domain> 
</domain-config>
</network-security-config>
```
./android⁩/app⁩/src⁩/main⁩/AndroidManifest.xmlに以下をします。
```
<application
android:networkSecurityConfig="@xml/network_security_config"> 
</application>
```

おわりに

コチラも簡単にできます。躓く所としては端末側の設定か、環境変数などです。エミュレータでの開発でも十分ですので、難しければそちらに頼りましょう。ただ実際の端末で動かすことができると確認がとても便利ですので実ビルドの前に一度は試しておきたいです。

他にエミュレータの起動等についても別の記事でまとめる予定です。

仮想端末でReact Nativeアプリを動かす準備

Tue, 11 Feb 2020 00:00:00 GMT

PCでAndroidの仮想端末を立ち上げて、React Nativeアプリを動かすための準備です。

Android studioのAVDマネージャーを使うことで簡単に設定ができます。

以下Ubuntuで作業した際の手順のメモです。

概要

ドキュメント
AVDマネージャー
Pie API Level 28 imageを選択
アプリを動かしてみる

ドキュメント

https://facebook.github.io/react-native/docs/getting-started

上記ページの「Using a virtual device」のあたりを参考に進めれば問題ないです。

AVDマネージャー

Android studioにて「Configure」からAVDマネージャーを起動します。デフォルトで端末が用意されているようですが、新しく作成しておきましょう。

「create a new AVD」を選択して次へ進みます。

エラーが表示されている場合

私の場合はそうだったのですが画面に以下のエラーが表示されている場合が有ります。

/dev/kvm device: permission denied.

メッセージの内容通りですが、現在のユーザーに/dev/kvmへの権限がないため発生しています。権限を持つグループに所属させるなどして実行できるようにしましょう。

再起動するとまたエラーになる場合

再起動すると/dev/kvmの所属グループがrootに戻る現象があるようです。以下の手順を行うことで対応出来ます。 qemu-kvmをaptでインストールすると、/dev/kvmのグループがkvmになり再起動しても変わらなくなります。
その後ログインしているユーザーをkvmグループに所属させましょう。
再起動すればグループに所属している状態になっているので、正常に動作するようになります。

sudo apt install qemu-kvm
sudo gpasswd -a $USER kvm

Pie API Level 28 imageを選択

Pie API Level 28 image.を選択して進みます。最初はimageファイルがないのでダウンロードする必要が有ります。ダウンロード後は該当のものを選択して次へ進めるようになります。

その後は必要な設定を選んで名前をつけて完成です。再生ボタンを押せば稼働端末が立ち上がります。

アプリを動かしてみる

上記で作成した仮想端末を立ち上げておき、アプリのプロジェクトディレクトリへ移動して以下のコマンドを実行すれば、仮想端末でアプリが起動します。

react-native run-android

エラーが出るかも

私が最初にやったときは以下のようなエラーが出ました。

Unable to load script from assets index.android.bundle

これはindex.android.bundleが無いために発生している様子です。以下コマンドを実行することで、該当ファイルが作られ正常に動作するようになります。

mkdir android/app/src/main/assets
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

おわりに

Android studio のSDKマネージャーとAVDマネージャーは、ReactNativeでのAndroidアプリ開発に重要なものですので、しっかり使いこなしておきたいです。ビルドやアプリの稼働チェックなど利用する機会は多いです。

ちなみにExpo使う場合は特に必要有りません、Bareで開発する場合は必須です。

どちらもわかりやすく便利ですので、それほど苦戦することはないでしょう。慌てず落ち着いてエラー等解決していきましょう。

Android studioのインストール手順

Mon, 10 Feb 2020 00:00:00 GMT

UbuntuにてAndroid Studioをインストール手順についてまとめました。

ドキュメントにしっかり手順が書かれているので躓く点はありませんが、ずっと昔に作業したので手順を忘れていました。人に教える機会があったので、ここにまとめておきます。

同じようにAndroie Studioを使い始める人は参考にどうぞ。

概要

ドキュメント
zipファイルをダウンロード
アプリケーションを移動
studio.shを実行
アプリケーションのセットアップ
シンボリックリンクの設定

ドキュメント

https://developer.android.com/studio/install?hl=ja

zipファイルをダウンロード

aptなどのパッケージ管理ツールではインストールできない様子です。 zipファイルを自分でダウンロードして任意の場所で一度解凍しておきます。

アプリケーションを移動

わかりやすい場所に移動しておきましょう。/usr/lib/とかですかね。

mv ~/Download/android-studio /usr/lib/

上記の場所へ移動して studio.shを実行

cd /usr/lib/android-studio/

移動先のディレクトリへcd。

./studio.sh

アプリケーションを実行。

アプリケーションのセットアップ

studio.shを実行するとセットアップが始まります。順番に選択していって進めて行けばオッケーです。

ReactNative等使って、端末のデバッグ・エミュレータでの確認等を行う場合は「カスタム」セットアップを選択して以下のチェックボックスがオンになっていることを確認して進めましょう。

Android SDK
Android SDK Platform
Android Virtual Device

シンボリックリンクの設定

シンボリックリンクを設定して任意の場所から起動できるようにしておきます。

cd /usr/bin
sudo ln -s /usr/lib/android-studio/bin/studio.sh  ./android-studio

おわりに

android studioのインストールとその後のセットアップによって「Android SDK」と「Android Virtual Device」もインストールされている事を覚えておきましょう。それぞれandroidの開発キットと仮想端末ということになります。アプリのビルドやエミュレータでの確認のため、必要なものが一緒にインストールされます。

一通りAndroid studioを使ってみたり、設定をいじってみましょう。便利なIDEとして利用できます。

Android での開発では仮想端末での検証などでどうしても必要になりますので、ある程度触って慣れておくと良いです。

xselコマンドを使ってクリップボードにアクセス

Tue, 04 Feb 2020 00:00:00 GMT

私はLinuxにてターミナルを常に使っています。ブラウザなどへのコピーペーストが面倒くさいので、簡単にできるしくみを探していた所見つけたTipsです。 tmux や vim を使うと選択やコピーについて、上手くいかないことがありました。それが解決できたのでだいぶ便利になりました。

ざっくりの使いみちとしては、コマンドの標準出力をクリップボードに格納します。以下コマンドです。

cat 01_sample.txt | xsel -bi

以下内容のメモです。

概要

インストール
コマンド
セレクションについて

インストール

標準では入っていないのでaptでインストールします。

sudo apt-get install xsel

コマンド

以下コマンドで、ファイルの中身がクリップボードに格納されます。

cat 01_sample.txt | xsel -bi

出力するなら以下。

xsel -b >> 01_sample.txt

-i

入力をセレクションに設定。

-a

入力をセレクションに追記。

-0

セレクションの内容を標準出力に出力。

-b

セレクションを3.CLIPBOARDにする。

-p

セレクションを1.PRIMARYにする。

-s

セレクションを2.SECONDARYにする。

引数なしでxselを実行すると、PRIMARYセレクションの内容が標準出力に出力されます。

セレクションについて

セレクションという3つの領域がある。以下の3つ。

PRIMARY
選択したテキストが格納されている、コピーとかしなくてもドラッグなどで選択しただけのものもここに入る。
SECONDARY
通常使わないもの？詳細はまだ不明です。
CLIPBOARD
いわゆるクリップボード。

おわりに

簡単にクリップボードに内容を追加、出力ができるようになりました。なんで標準で入っていないのでしょうか。

tmuxでコピーモードにして選択、とかやるのがめんどくさかったので捗ります。xsel覚えておきます。

NetlifyのFormsを活用してブログに問い合わせを設置

Fri, 17 Jan 2020 00:00:00 GMT

このブログはNetlifyで配信しています。ブログのソースはGatsbyで生成しているため静的コンテンツなのですが、Netlifyの機能でフォームを設置してデータを受け取ることができるそうです。

以前からこの機能は知っていたのですが、めんどくさそうでしたので避けていました。いい機会だと思うので、ブログにお問い合わせフォームを作ろうと思います。

その手順や情報を記載しておきます。

概要

ドキュメント
手順
送信を確認
recapthaも簡単に設置
無料の枠でどれくらい

ドキュメント

https://docs.netlify.com/forms/setup/#html-forms

手順

驚くほど簡単です。

Formタグを配置して必要な入力と決定ボタンを設置。Formタグにdata-netlify="true"またはnetlify属性を加えれば、サブミットしたときのデータをNetlifyが受け取り管理画面で表示してくれるそうです。

<form name="contact" method="POST" data-netlify="true">

    ~~~~~~
    ~~~~~~
    ~~~~~~

</form>

action属性が未設定の場合はそのフォームに送信受付のメッセージが出るそうです。action属性に任意のURLを指定すれば完了画面として表示してくれるそうです。

送信を確認

recapthaも簡単に設置

スパムなどを防ぐための仕組みも簡単に利用できます。recapthaを設置してみます。

formタグに属性を追加してform内に特定の属性を持つ空のdivを設置すれば、その場所に表示されます。こちらも簡単。

<form name="contact" method="POST" data-netlify-recaptcha="true" data-netlify="true">
  <p>
    <label>Email: <input type="text" name="name" /></label>
  </p>
  <div data-netlify-recaptcha="true"></div>
  <p>
    <button type="submit">Send</button>
  </p>
</form>

無料の枠でどれくらい

値段については以下ドキュメントに記載されています。

https://www.netlify.com/pricing/

無料なら月100件。ファイルの添付は月10MBまで。まあ個人のページであれば十分でしょうか？

おわりに

すごく簡単にフォームを設置できました。Gatsbyで作成したブログですのでバックエンドのプログラムがありません。フォームの内容を受け取ったり、どこかに保存したりは通常できませんが、Netlifyなら代わりにやってくれます。実装もすごく簡単で、formタグに属性を追加するだけです。なんて便利なんだ。

ソースコードフォーマッター「Prettier」を導入してみる

Thu, 16 Jan 2020 00:00:00 GMT

「Prettier」というツールの紹介です。コードフォーマッターと呼ばれるもので、ソースコードのインデントやスペースなどを整えてくれるものです。

https://prettier.io

以前「Expo JavaScript Style Guide」を読んでみるという記事で見つけてなんとなく利用していたのですが、改めて使い方をまとめておきます。

これ入れておけばソースコードのインデントやコーディングルールなどがある程度統一できるのでとても便利です。チーム開発でももちろんですし、個人で書いているコードも綺麗になるのでおすすめです。

概要

インストール
ルールを作成する
適用しないファイルの指定
実行してみる
pretty-quick でコミットのhookで実行
vimで利用する

インストール

npmでインストールするなら以下です。

npm install prettier --save-dev --save-exact

ルールを作成する

.prettierrcを作成して、例えば以下のようにします。Expoのリポジトリで使われているものを参考にコピーしました。

{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "jsxBracketSameLine": true,
  "trailingComma": "es5"
}

指定できるパラメータの詳細

Print Width
行の折り返し、デフォルト80
Tab Width
インデントのスペースの数デフォルト2
Tabs
インデントをスペースでなくタブにするデフォルト false
Semicolons
ステートメントの最後にセミコロンデフォルト true
Quotes
“のかわりに’を使うデフォルト false
Quote Props
オブジェクトのプロパティにクオートする
JSX Quotes
jsxでは”のかわりに’を使うデフォルト false
Trailing Commas
最後の要素のコンマを出力デフォルト none
Bracket Spacing
オブジェクトリテラルの{}の間にスペースデフォルト true
JSX Brackets
jsxの最後の>を単独行でなく、最後の行末につけるデフォルト false
Arrow Function Parentheses
関数の引数が一つでも()を付けるデフォルト avoid
Range
対象とする範囲を指定
Require pragma
ファイル先頭にプラグマのあるファイルのみを対象にするデフォルトfalse
Insert Pragma
ファイル先頭にプラグマを追加デフォルトfalse
HTML Whitespace Sensitivity
HTMLのスペースの扱いを指定
Vue files script and style tags indentation
Vueファイルのタグ内のコードをインデントするかどうかデフォルト false
End of Line
改行コードの指定。改行コードは維持するか最初に出てきたコードに合わせるそうです。デフォルト auto
lfに設定することで、Linuxやmacの\nとWindowsの\r\nの違いをこれで統一できます。

適用しないファイルの指定

.prettierignoreにprettierによる整形の対象としないファイルを指定できます。指定の仕方はgitignoreと同じです。
/node_module/などはデフォルトで無視されるようになっているようです。

他にもコードの中で特別に整形したくない場合、コメントで指定することでそのブロックを対象から外すことができるようです。

// prettier-ignore

実行してみる

まずはルールに従っているかのチェックを行います。対象のファイルを指定して実行します。
All matched files use Prettier code style!と出力されればルールに従っており修正する箇所が必要ありません。
Code style issues found in the above file(s). Forgot to run Prettier?と出力される場合はルールに沿っていない箇所があり、prettierでformatできます。

prettier --check "src/**/*.js"

--writeをオプションで与えると整形してファイルを上書きできます。

prettier --write src/index.js

pretty-quick

pretty-quickはgitなどのバージョン管理でステージングにあるファイルを対象に、prettierを実行できるパッケージです。

husky と組み合わせる

huskyはgit のコミット時などに簡単にhooksを追加できるパッケージです。これを組み合わせれば、コミット時に対象ファイルにpretty-quickを実行できます。

まずはインストール

npm install husky --save-dev

package.jsonに以下を追加

{
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  }
}

コミットするとprettierによるチェックが行われ結果が返されます。ルールに従っていた場合はコミットが通りますが、修正が必要な箇所がある場合はコミットが取りやめとなります。自分で修正するかprettierで整形をおこないコミットし直しましょう。

vimで利用する

いくつか利用可能なプラグインがあります。vim-prettierが良さそうでしたので私はこちらを利用しています。簡単に利用できます。

vimrcに以下を追加します。

NeoBundle 'prettier/vim-prettier'
let g:prettier#config#print_width = 100
let g:prettier#config#single_quote = 'true'
let g:prettier#config#jsx_bracket_same_line = 'true'
let g:prettier#config#bracket_spacing = 'true'
let g:prettier#config#trailing_comma = 'es5'

おわりに

簡単に導入でき、コードのフォーマットが自動で行われるので便利でした。ソースコードのルールが統一され見やすくなります。ソースコードを書くときはもちろんですがそれ以外の手順書などのテキストを書くときにも役に立つと思います。

コミット時に自動で実行できるようにしたり、とても便利なのでプロジェクトに導入してみてはいかがでしょうか。わたしもこれからは積極的に導入していこうと思います。

OSSへのコントリビュートするときのリポジトリの設定

Wed, 15 Jan 2020 00:00:00 GMT

OSSへのコントリビュートを経験しました。その際、リポジトリの用意など調べながら進めたのでこの記事にメモしておきます。

元のリポジトリをフォークして、修正してプルリクエストを出す。という作業をするためのリモート・ローカルリポジトリの構成の説明です。

概要

自分のアカウントへフォークする
ローカルへcloneする
作業を行うブランチを作成
リモートにブランチをpush
プルリクエストを作る
必要なら修正
フォーク元リポジトリの更新を反映する
書き込み権限があるなら

自分のアカウントへフォークする

OSSのリポジトリは間違いなく書き込む権限がありません。直接cloneしてもリモートへpushできませんし、リモートにbranchを作ることもできないと思います。

まずは自分のアカウントにフォークを行います。リポジトリの右上のボタンでできます。
自分のアカウント以下に同じリポジトリがコピーして作成されます。ここは自分の管理下なので書き込み等を行うことができます。

ローカルへcloneする

フォークしたリモートリポジトリをローカルにcloneします。

作業を行うブランチを作成

フローやコミュニティのルールにもよると思いますが、とりあえずmasterに変更を加えるのではなくローカルに作業ブランチを作成しましょう。

リモートにブランチをpush

フォークした自分のリモートリポジトリへpushして、リモートリポジトリにも作業ブランチを作成します。
以降、作業ブランチで構築を行いcommitして、リモートの作業ブランチへpushします。

プルリクエストを作る

作業が完了したらプルリクエストを作ります。
自分のアカウントのリモート作業ブランチのリポジトリにプルリクエストを作成するボタンがあるので、そこから作成します。

自分のアカウント:リポジトリ名/作業ブランチ から OSS管理者:リポジトリ名/masterへのプルリクエストを行います。開発フローによってはdevelopブランチへのプルリクエストなどもあると思いますので注意しましょう。

作業の進捗がわかるようにとか、議論ができるように早めにプルリクエストを作っておくといいそうです。コミュニティのルールや方針にもよると思います。

必要なら修正

以降はローカルの作業ブランチで修正、リモートの作業ブランチへpush。
作業が完了したら、githubにて管理者のリポジトリのmasterブランチへプルリクエストを出します。

フォーク元リポジトリの更新を反映する

フォークした自分のリポジトリには、fork元リポジトリに行われた管理者や他の開発者の変更が反映されません。放置しておくと差異が大きくなり衝突が起きる可能性が大きくなるので、pushの前などこまめに反映しておく必要が有ります。

フォーク元リポジトリ、すなわちOSS管理者:リポジトリ/master をリモートに追加して、そこからfetchとmergeをおこないます。

以下のコマンドでフォーク元のリポジトリをremoteに追加します。「upstream」という名前で登録しています。

git remote add upstream git@github.com:oss管理者/リポジトリ.git

リモートupstreamから情報をfetchします。

git fetch upstream

ローカルのブランチへ変更をmergeします。

git merge upstream/master

書き込み権限があるなら

直接リポジトリをcloneして、作業するブランチを作成。ブランチで作業が終わったらリモートにbranchを作成して、そこからリモートのmasterへプルリクエストすれば良いです。

管理が減るのでこっちのほうがスッキリしますね。OSSでは通常無いのかなと思います。管理者やプロジェクトに入ればできると思います。

おわりに

OSSへのコントリビュートできる機会があったのでやってみましたが、とても簡単な内容でしたのでそんなに自慢できるものでもありません。

ただ、初めてやってみてとても興味を持てたので、機会を見つける・自分で立ち上げる等してOSSへの貢献を目指したいと思います。

yarnインストールの際にエラーがでた

Wed, 15 Jan 2020 00:00:00 GMT

ずっとnodeモジュールの管理にnpmを使っていたのですが、ふと思い立ったのでyarnを使えるようにしてみました。

特に必要はないかもしれませんが、npmよりもyarnのほうが動作が早いとかコマンドが短いなどの利点があるようです。詳細はあまり知りませんが、大抵の場合どちらかが使えれば大丈夫かなと思います。

今回aptを使ってyarnをインストールした際に、引っかかることがあったのでメモしておきます。 Ubuntuにて発生しました。

結論を先に言うと

aptでインストールしたyarnのバージョンが古いものだったらしく、正常に動作しなかったようです。

バージョン情報を更新してからinstallし直すことで解消し、正常に動作するようになりました。

エラーの内容

yarn を実行してパッケージをインストールしようとした所以下のエラーが発生しました。

ERROR: There are no scenarios; must have at least one.

yarn install としても以下のエラーが表示されました。

ERROR: [Errno 2] No such file or directory: 'install'

解決方法

yarnの最新バージョンを確認して再インストールすれば解消しました。

yarnを削除する

sudo apt remove cmdtest
sudo apt remove yarn

パッケージの情報を更新

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update

再インストール

sudo apt-get install yarn

これで正常に動作するようになりました。

おわりに

yarnが無事にインストールできました。 npmでも特に困ってなかったのでどちらでもいいのですが、せっかくなので使ってみます。何か気づくことがあったらまた記事にします。

GithubにSSH公開鍵を登録

Tue, 14 Jan 2020 00:00:00 GMT

GithubにSSH公開鍵を登録して、手元の秘密鍵でアクセスできるようにする方法です。いちいちID/PWを入力する必要がなくなりますので早いうちにやっておくと良いです。私はずっと前から対応していましたが、人に説明する機会があったので手順をメモしておきます。

Github使っている人に取ってはいまさらですが、これから使う人の参考になればと思います。

ドキュメント

https://help.github.com/en/github/authenticating-to-github/connecting-to-github-with-ssh

概要

秘密鍵公開鍵ペアを作る
ssh-agentに秘密鍵を登録
Githubに公開鍵を登録
接続確認
リポジトリの設定の変更が必要な場合

秘密鍵と公開鍵のペアを作る

https://help.github.com/en/github/authenticating-to-github/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent

手元で秘密鍵と公開鍵のペアを作ります。このうち公開鍵をGithubに渡しておき、手元の秘密鍵を使ってログインできるようになります。公開鍵は他人に知られても大丈夫ですが、秘密鍵は他人に知られてはいけません。しっかりと管理しましょう。

以下のコマンドで鍵を追加します。メールアドレスは自分のものを使いましょう。パスフレーズの設定を求められるので登録しておきましょう。

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

ssh-agentに鍵を登録

以下のコマンドを実行して、ssh-agentに鍵を登録します。ssh時に使う鍵の候補に追加されます。

ssh-add ~/.ssh/id_rsa

Githubに公開鍵を登録

https://help.github.com/en/github/authenticating-to-github/adding-a-new-ssh-key-to-your-github-account

.ssh/以下に出力されているid_rsa.pubが公開鍵です。この内容をgithubのsettingのSSH keyの項目にて追加・登録します。

ここまでできれば準備完了です。必要なものが揃ったので接続を試します。

接続確認

https://help.github.com/en/github/authenticating-to-github/testing-your-ssh-connection

コマンドを実行しましょう。githubへssh接続を試します。

ssh -T git@github.com

以下のようなメッセージが表示されますのでyesと入力します。

The authenticity of host ‘github.com (IP ADDRESS)’ can’t be established. RSA key fingerprint is SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8. Are you sure you want to continue connecting (yes/no)?

問題なければ以下のメッセージが続けて表示されます。これでsshによる接続の準備ができました。

Hi username! You’ve successfully authenticated, but GitHub does not provide shell access.

リポジトリの設定の変更が必要な場合

gitのremoteの設定がhttps://github.com/[ユーザー名]/[リポジトリ]のような指定方法になっていると、SSH接続が上手くいかずID/PWの入力を求められます。以下のコマンドでremoteの接続先の指定を更新することで解消できます

git remote set-url origin git@github.com:[ユーザー名]/[リポジトリ].git

おわりに

別にssh鍵を登録しなくてもID/PWでリクエストは行なえますが、pushやpullのたびに入力するのは面倒なので対応しておくといいでしょう。秘密鍵・公開鍵を使ったssh接続の基礎的な理解にもつながると思います。それほど難しくもないので困ることも少ないです。

もしも上手くいかない場合は、秘密鍵と公開鍵をまちがえているとかssh-agentに正しく登録されていないなど考えられます。エラーの内容を読んで落ち着いて対処しましょう。

VimでReact NativeとTypeScript向けの設定に「tsuquyomi」を利用

Tue, 14 Jan 2020 00:00:00 GMT

React Nativeのアプリを作っていて、すこしずつTypeScriptの利用を進めています。

せっかくTypeScriptを使っているので、静的な型チェックなど便利な機能を使いたいです。普段使っているエディタVimの設定をカスタマイズしました。

同じような環境で作業している方の参考になればと思います。

結論を先に言うと

いくつか試してみて簡単に動かせた、「tsuquyomi」というVimプラグインを利用しました。さまざまなところでおすすめされているのを見かけるので良さそうです。

https://github.com/Quramy/tsuquyomi

概要

プラグインのインストール
tsconfig.jsonの設置
利用を見送ったプラグイン

プラグインのインストール

NeoBundleを利用しているのであればvimrcにて以下を記述。依存で必要なプラグインがあるのでそちらも一緒にインストールしましょう。

NeoBundle 'Quramy/tsuquyomi'

npm などを使いTypeScriptをインストールしておきtsserverを動作できるようにしておく必要があると思います。他にも@types/react と@types/react-nativeもインストールしました。

tsconfig.jsonの設置

tsconfig.jsonを設置することでビルド時の設定を変更できます。正常にビルドチェックが発生しない場合はこれを見直すといいです。

いくつかチェックのルールも変更できますので、共通の設定を作った上でチームに配布等すれば簡単にコーディングルールを配布できます。

サンプル

現在利用しているtsconfigのサンプルです。各パラメータの意味などはTypeScriptの「compiler-options」のドキュメントに載っているので参考に設定します。

https://www.typescriptlang.org/docs/handbook/compiler-options.html

{
 "compilerOptions": {
   "target": "esnext",
   "module": "esnext",
   "lib": ["esnext"],
   "jsx": "react-native",
   "noEmit": true,
   "moduleResolution": "node",
   "strict": true,
   "esModuleInterop": true,

   "noFallthroughCasesInSwitch": true,
   "noImplicitReturns": true,
   "noUnusedLocals": true,
   "noUnusedParameters": true,
   "resolveJsonModule": true,

   "allowUnreachableCode": false,
   "allowUnusedLabels": false,

   "noImplicitAny":false_
  },
  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}

利用を見送ったプラグイン

vim-lsp
vim-lsp-typescript
tsconfig.jsonを設置して型チェックの動作はできたました。しかしチェック内容が正常でなかった様子？なのと設定が難しそうだったので早めに諦めました。

おわりに

とりあえず.tsxファイルの保存時にコンパイルチェックが行われ、エラーが報告されます。tsconfigの設定などまだまだよくわかっていないので、少しずつ最適化していこうと思います。

定義へのジャンプや補間なども用意されているのでかなり便利になりました。また便利な設定やコツなど見つけたら紹介します。

「GitHub実践入門」を読んだ

Thu, 09 Jan 2020 00:00:00 GMT

Gitに関する本です。基本的な概念説明から導入準備、実際の使い方やコマンドの紹介、チームでの利用やGit Flow・Github Flowの紹介などGitの多岐にわたる内容を紹介しています。

この一冊を読めば大抵のことは理解でき、使いこなせるようになります。使い始めのときに読んでおくと学習が捗ります。実際に使ってみるのが一番わかり易いと思いますので、勉強中の方やGitを利用する予定のある方は本を読みつつ実際にGitHubを触ってみましょう。

プルリクエストの送り方や対応方法なども書かれていて、実際の現場でのフローがわかるのではないかと思います。入門の内容なので特殊な使い方やいざというときの対処方法はそれほど書かれていません、コンフリクトの解消や間違ったコミットの巻き戻しなどそういった点には注意しましょう。

業務で使ったことがあるので内容はすでに知っているものでしたが、備忘や共有の際にまとまっていると便利なのでこの記事にまとめておきます。

よく使うコマンドのメモ

Gitでよく使うコマンドのメモです。

init

リポジトリの初期化。.gitディレクトリが生成される。

status

リポジトリの状態確認。

add

ステージに追加。対象とする範囲を指定できる。.で現在のディレクトリ以下全部、ディレクトリやファイル名を指定するとその範囲のみが対象になる。

commit

ステージ領域のファイルをコミット。メッセージは1行目にコミットの内容の要約、2行目が空行、3行目以降が詳細な理由や目的、とするのが一般的です。

-mでメッセージをオプションに渡せる。

-a でaddを行っていなくても、自動で変更・削除されたファイルをコミットします。新規作成したファイルは対象になりません。

--amendで直前のコミットメッセージを修正できます。

メッセージに「#1」を含めることで該当するIssueに関連付けさせて表示することができます。また、「fix #1」とすればIssueをCloseできます。

log

リポジトリのコミットログを確認する。ディレクトリやファイル名を渡すと、その範囲が対象になります。 -pを付けると差分が表示されます。

-graph ブランチのマージなどの状況が視覚的に表示されます。

diff

現在のワークツリーとステージ領域の差分を表示。

HEADを付けることで、ワークツリーと最新コミットの差分が確認できます。この場合のHEADは作業しているブランチの最新コミットを参照するポインタとなってます。

branch

リポジトリのブランチを一覧表示します。名前を渡すと新規でブランチを作成できます。

-a でリモートブランチも含めた情報を表示。

-D xxx xxxブランチを削除します。

checkout

ブランチを切り替えます。

-b xxx を付けると、xxxという名前のブランチを新規作成し切り替えます。

- を付けると、1つ前にいたブランチに移動できます。

-b xxx yyy とするとyyyブランチを元にxxxブランチを作成して切り替えます。origin/xxxを指定して使うことがたまに有ります。

merge —no-ff xxx

xxxブランチを現在のブランチにマージします。

--no-ff を付けることでマージコミットが発生して、あとからの参照や取り消しがやりやすくなります。

reset

指定した状態にワーキングツリーを戻します。

--hard ハッシュ値 コミットのハッシュ値を指定してその位置まで戻ることができます。

rebase

コミットを押しつぶして改変する

-i HEAD~2 とするとHEADを含めた2つのコミットを対象に合体させて、新しい一つのコミットとして書き換えます。

remote

登録されているリモートリポジトリを確認。参照用の名前を表示する。

-v でpushとfetchの対象になっているURLを表示

add ローカルリポジトリに指定したリモートリポジトリを登録。

git remote add origin git@github.com:xxx/yyy.git でoriginという名前でリモートリポジトリを指定する。

remove xxx xxxで参照しているリモートリポジトリを削除。
rename xxx yyy xxxで参照しているリモートリポジトリをyyyにリネーム。

push

リモートリポジトリに送信。

git push -u origin master とすると、現在のローカルリポジトリの内容をoriginという名前のリモートリポジトリの、masterブランチに送信します。

-u でupstreamの設定を同時に行うことができ、以降pull・pushコマンドの対象がorigin masterに設定されます。

fetch

現在のブランチにリモートリポジトリのデータを取得。

pull

最新のリモートリポジトリを取得。fetchとmergeを行っている。

clone

リモートリポジトリを取得。 cloneした直後はmasterブランチなはずで、originという名前でリモートリポジトリが参照できる。

tag

タグの一覧を表示

tag xxx でxxxという名前の軽量タグを作成、現在のブランチの最新コミット（すなわちHEAD）につく

-a 注釈付きのタグとなり、作成者や日付・メッセージなどの情報がつく

tag -a xxx -m 'release' -m でメッセージを指定できる

tag -a xxx コミットのハッシュ 過去のコミットにタグを付けることも可能

push origin xxx タグは通常リモートにpushされないので、明示的にpushする必要がある

push origin --tags ローカルのタグを全部リモートへpush

Gitを用いた開発フローの例

リモートリポジトリのforkは行わないことが前提のフロー。各メンバーがローカルリポジトリとリモートリポジトリのみ管理すれば良くなるためシンプル。

GitHub Flow

シンプルなワークフローで頻繁にデプロイすることを前提としてものです。覚えやすくとっつきやすいですが、masterブランチの状態をしっかり安全にしておくために注意する必要があります。

シンプルなことも有り高速な開発フローに向いているそうです。

masterブランチは常にデプロイ可能な状態を保つ。
作業を行うときはローカルでブランチを作成してコミット。
リモートにも同名のブランチを作っておく。
定期的にリモートの同名ブランチへpushする。
必要であればmasterへプルリクエストを行いレビュー等をする。
作業が完了したら、masterへマージする。

新しいブランチはmasterから作成する。ブランチ名はやる内容がわかるようにして、レビュー等を受けやすいようにコミットの粒度をなるべく小さくする。常にデプロイできるマスターブランチを維持するためにテストやCIがとても重要です。

Git Flow

上記のGitHub Flowよりも結構ややこしいですが、その分実際の現場では役に立つことが多いと思います。コマンドとしてGit Flowをサポートするツールがあるので、そちらを使うと快適に開発に参加できます。

可能であれば仕組みやフローの理解のために、自分で環境を用意して動かしてみるといいです。

基本的には以下のブランチができます。

master
develop
feature(機能ごとに名前を付ける)
release(バージョンごとに名前を付ける)
hotfix(バージョンごとに名前を付ける)

開発からリリースまでの手順の概要は以下です。

developから作業用ブランチfeatureを作成し作業を行う
作業が終わるとリモートのfeatureブランチへpush
developへプルリクエスト問題なければmergeする
featureは削除
リリース分の作業が進んだら、developからreleaseブランチを作成
releaseにてリリース準備
リリース準備が終わったらmasterへmergeし、タグを発行
releaseをdevelopにもmergeする
masterとdevelopをリモートへpush、tagもpushする
masterブランチをリリースする
releaseは削除
不具合があった場合はタグやmasterブランチからhotfixを作成して修正
hotfixで修正をおこない完了したらリモートへpush、masterへプルリクエスト
hotfixの内容をdevelopにもプルリクエストする
hotfixは削除

おわりに

会社でGitを初めて導入する際の懸念点やメリットなども紹介されており、他のバージョン管理からの乗り換え時の検討や提案にも役に立つ知識でした。

さまざまなCI関連のツールの紹介や設定方法も書かれており、実際の開発で使えると心強い情報がたくさんありました。 Git Flowなど実際にやって見ないと理解が難しいものもありますので、事前知識として頭に入れた後は機会を見つけて積極的に参加すればすぐに身につくと思います。

React Nativeを始めるのにおすすめ書籍を紹介

Tue, 07 Jan 2020 00:00:00 GMT

2019年いくつかスマホアプリを作成しました。すべてReactNativeを利用したクロスプラットフォームアプリです。app storeとgoogle play両方で配信しています。

他にも業務提携の形で、企業のアプリ開発のお手伝いをすることも有りました。チームでの開発も経験でき、自分の中にノウハウも蓄積されてきました。

約2年勉強しながら取り組んでみてたくさんの本から情報を取り入れました。今回はその中でおすすめだった本とその概要・注意点を紹介します。よりすぐりの5冊のみ紹介します。

プログラミング経験者でReactNativeに取り掛かろうという人も、プログラミング未経験でこれから始めようという人にもおすすめです。

React Native　～JavaScriptによるiOS／Androidアプリ開発の実践

概要

React Nativeを使ったクロスプラットフォームアプリ開発について、環境の用意から開発ビルド・ストアへのアップロードまで網羅的に説明されています。発売されて間もないので情報も新しく、すぐに現場で取り入れることができるHOTな内容です。

エディタなどの準備からnpmを使った各パッケージのインストール。一通りの実装に加えて代表的なパッケージの紹介・導入も無いように含まれています。

初心者にもわかりやすく書かれていますし、経験者にも基本的な設計やツールの見直しとしてために成る情報が多いです。

TypeScriptやAtomicDesignも取り入れているので、その点でも参考になります。もちろん各専門の書籍を見たほうが情報は多いですが、この本は網羅的にチェックできるのでとてもおすすめです。

注意点

大ボリューム

700ページ近くあります。大きさが小さいので思ったよりも文字数は少ないです。それでもやはり読み進めるのに苦戦するでしょう。その分、初心者も経験者にも参考になることが書いてあり、ReactNativeを使った開発について網羅的に書かれています。
Expoは利用しない

Expo使うと簡単にビルド等ができるので、個人的には初めての人にExpoを利用することをおすすめします。しかし、この本では使っていません。初めての場合、各ストアへのアップロードやビルドで躓く可能性があります。その点は調べながら諦めずにがんばりましょう。

JavaScript Primer 迷わないための入門書

概要

JavaScriptについての入門書です。初心者にもわかりやすく書かれているのが特長で、かなり親切に説明されてます。

ECMAScript2015以降をベースとした解説になっており、新しい構文やルールなどについての言及も有ります。そのため現在進行形で発展しているJavaScriptの、新しい仕様なども把握しつつ学習できます。

プログラミングをやったことがない人にも演算子やデータ型の説明など、基礎の基礎についての説明が有るので入門に向いています。ブラウザでも実行できるので簡単に環境も用意できますので。

注意点

結構長い

500ページ近い結構大きい本です。基礎的な部分から説明が始まるので、その分容量も多くなっています。ある程度の経験があるなら飛ばしながら読むことが出来ます。逆に初心者であっても、しっかり読み込むことで言語の仕様を理解できるので、実践で役に立つ知識を得られることは間違いありません。

実際の現場でも、すべてをしっかり理解できている人は珍しいです。他にもプログラミング言語は有りますし、利用する言語すべてを暗記するのはとても大変です。わからないときやどんな挙動するんだっけ？と疑問に思ったときに、この本を使って調べながら実装するのがおすすめです。

その時の引き出しとして使えるように、内容に目を通しておくのがおすすめの使い方です。
Webで見ることができる

もともとはWebサイトとして公開されているもので、最近書籍化されました。ですので、内容はWeb上で見ることが出来ます。以下のURLです。

https://jsprimer.net/

React Native入門

概要

React Nativeの入門書です。環境の用意の部分から丁寧に書かれていて、サンプルコードもダウンロードして利用できます。

基本的な開発から、コンポーネントやレイアウトの基礎知識、サンプルアプリの作成を作り切るところまで紹介されています。ソースコードもそれほど多くないので読みやすいです。

試しに使ってみる、アプリを動かしてみるというところから、実際に思いついたアプリを作れるようになるまでの知識が得られます。

注意点

サンプルコードが動かない

ReactNative自体のアップデートが頻繁に行われているため、サンプルコードに動作しない箇所があったりします。
エラーになることがあったので注意が必要です。「ReactNavigation」を始めとして、モジュールの場所の変更や実装方法の変更があるので注意しましよう。落ち着いてエラーの内容を確認しつつ該当する箇所の修正を行う必要があります。公式のドキュメントなんかも確認しましょう。
スマホにExpoクライアントをインストールするのがおすすめ

書籍ではExpo Snackというサービスを利用して、ブラウザ上で端末のエミュレータを動かしアプリを作成します。簡単に利用できて便利ですが、無料ユーザーでは他ユーザーとサーバのリソースを共有しています。そのため、待ち時間が長くなるケースに多く出会い不便に感じました。
自分のスマホにExpoのクライアントアプリをインストールすることで、手元の端末を使ってアプリを試すことが出来ます。待ち時間が無いのでおすすめです。
アプリのビルド・ストアでの公開については情報なし

アプリをビルドする手順、ストアで公開する方法については触れられていません。
AppleやGoogleのストアのUIやフローは頻繁に更新されるのであまり書籍は参考にならないです。Webで公開されている公式の情報を参考に取り組みましょう。日本語でも用意されているので落ち着いて見れば問題なくできます。

開眼JavaScript

概要

JavaScriptのちょっと変わった言語仕様について紹介している本です。おやっ？と思った所とか、よくわからずに使っていたところがまとめられているのでおすすめです。

他のプログラミング言語を使ったことがある人は、これを読むことでJavaScriptの特徴が把握できます。

注意点

初めてプログラミングする人にはちょっと難しいと感じる部分もあります。最初は飛ばしながら読んでみて、色々作れるようになってからもう一度読むと理解が進みます。

JavaScriptの特徴的な部分や理解の難しい動作を解説されているので、JavaScriptを使っていくのであれば一度読んでおくといい本です。この本に書いてあることが理解できたら使いこなせたようなものです。

Atomic Design

概要

UI設計の手法である「Atomic Design」についての本です。ざっくり言うと小さなコンポーネントを原子として見立てて、それの組み合わせで分子や有機体を作って設計していく手法です。

意外とソースコードが多めです。ReactNativeではありませんが、全編Reactを使ったWebのソースコードなので参考にできます。

アプリを作っているうちに、コンポーネント設計のお手本や参考が欲しくなる時もあります。一人で作っていてこれでいいのかなと思ったらこの本を参考にするのがおすすめです。

ReactNativeでのプログラミングだけでなく、そこに至るまでの設計・UIデザインについても身につくので勉強になります。

注意点

設計の話なので役に立つのかピンとこないこともありますがとても大切です。 Reactと相性がいいので、オリジナルの設計をして進めるより、AtomicDesignを始めとした考え方を取り入れて進めたほうが後で得します。メンテナンスや再利用しやすいソースコードを作ることができます。

テストのやり方なども書かれているので応用することでさまざまな知識が身につくので、早いうちに覚えておきたい内容になっています。

本の中に出てくるプログラムは、ReactNativeで書かれたコードではないのでそこは注意が必要です。設計手法やテストのコツなどを都度読み替えて身につけましょう。

よく利用した公式ドキュメントの紹介

以下3つの公式ドキュメントを紹介します。他にも利用するモジュールがあれば、そのドキュメントをブックマークしておきましょう。

https://docs.expo.io/versions/latest/
Expoの公式ドキュメントです。アプリのビルドや各種設定ファイルの内容など、丁寧に説明されています。 ReactNativeのコンポーネントについても説明があるので、基本的なものについてはここで間に合います。

https://facebook.github.io/react-native/docs/getting-started
ReactNativeのドキュメントです。それほど使うことはありませんが、パラメータの内容や定義などを調べるときに使うことが有りました。

https://ja.reactjs.org/docs/react-component.html
Reactのドキュメントです。コンポーネントのstate・props・ライフサイクルについてはここで学んでおくといいです。実際にアプリを動かしながら試すと理解が早いです。

https://jsprimer.net/
JavaScriptを1から学べる書籍です。上記で書籍版を紹介していますが、Web上で公開されていますのでこちらで十分の場合もあります。どうしても手元においておきたい人は書籍版を購入しましょう。

おわりに

5つの本を紹介しました。ReactNativeは経験者であればとても簡単に初められますし、未経験でも何か作りながら学ぶことでモチベーションがあがるのでおすすめです。

ReactNativeを用いればAndroidとiOS両方のアプリの開発が 1つのコードで完了します。Web関連の知識も活かせるので簡単に始めることができます。JavaScriptを使うので割と応用の効く言語が身につきます。

Webシステムではないので制約も有りますが、サーバを借りる必要がなく手軽に始めることができます。

さらに、ReactNative For Webを使えばそのままWebで利用することできます。利用する機会はまだ少ないですがそちらにも期待です。

今年はReactNativeでアプリを作成しつつ、コミュニティへの貢献等を目標にがんばります。

2020年の目標

Mon, 06 Jan 2020 00:00:00 GMT

あけましておめでとうございます。2020年になりました。
2020年最初の投稿として1年の目標を書いておきます。
技術に関することに限らず思いついたことは何でも書いて、また1年後に振り返りたいと思います。

1年の終わりには全部達成できている状態を目指します。途中経過なんかもチェックしていくつもりです。

業務

プロジェクトを始める

受託などでプロジェクトを始めようと思います。Lancersなど利用して受注するところから初める。

メンターを始める

MENTAを使ってメンター業も初めます。チーム開発や指導の経験もあるので積極的に取り組みたい。

https://menta.work/plan/1500
MENTAにてメンタープランを作りました。良ければご利用ください。

スマホアプリの作成

ただ作るのではなく再利用性など考慮して作るように心がけます。

スマホアプリの運用・改善

リファクタリング含め改善していきます。デザインの見直しも取り組みたい。

スマホアプリの収益の増加

なによりも使ってもらって、収益を増やすことが一番の目標。インストール数の増加、継続的な利用による収益の増加。上記以外にも要素はたくさんあると思うので身につける。

広告などを利用してスマホアプリの宣伝・営業

地域のアプリを使ったので良さそうな場所に広告等を出してターゲットユーザーに気づいてもらう。もっと使ってもらえるように宣伝を行う。現在の100倍位のユーザー数が目標。

学習

コンポーネントをパッケージとして整理して再利用

いくつかアプリを作ったのでその資産を再利用しやすいように残す。パッケージとして公開してメンテナンスする。

自分らしいデザインパーツを見つける

自分らしいデザインのパーツを考えたい。特徴的でオリジナリティのあるデザインを見つけます。
「〇〇×□□」で表現できるような。

Atomic Designの理解と実装

本で読んだものが良かったので身につけたい。React・React Nativeに相性がよいので、これを基幹として知識を身に着ける。

testの実装

上記のAtomic Designでも触れられていたので積極的に取り組む。フロントエンドのテストのノウハウや経験を共有できるようにする。

各種技術に関する記事の整理

学習者向けにコンテンツを作成。
ReactやReact Nativeに関する知識や情報を整理してコンテンツとして共有する。

オライリーのレポートを読む

https://www.netlify.com/oreilly-jamstack/
JAMstackに関するレポートらしい、早いうちに読む。

コミュニティ

コミュニティの運営、なかまづくり

住んでいる地域でコミュニティを立ち上げる。Reactに関するものとかReactNativeに関するものとか。 Firebaseとか。

人を巻き込む

上記といっしょ。人を巻き込んでいくような取り組みを行いたい。一緒にやる。

地域の取り組み

地域の役に立つようなサービスを作る。

オープンな技術への貢献

React Native Communityなどに貢献する

食べたいもの

今まで食べたものの中で美味しかったものをまた食べたい。頑張って余裕を作って食べに行く。名前も正しく覚えていない店が多いけど。

京庵の京からそば
大鶴のちらしそば
兵庫のイタリアン
ASAのカレー

行きたい所

信楽
朝ドラでもやっているので、また行きたい。
ジム近所に大きなジムがあって楽しそうなので行きたい。余裕が出来たらいく。健康にも良さそう
健康診断
富山美術館
映画を見に行く

おわりに

初詣でひいたおみくじが大吉だったのでいいことあるはず。がんばります。今年もよろしくお願いします。

React Nativeにおけるimageコンポーネントの「resizeMode」の挙動

Tue, 24 Dec 2019 00:00:00 GMT

タイトルのとおりですが、React Nativeのimage関連コンポーネントに設定するstyleプロパティ「resizeMode」の挙動を確認してまとめました。

画像を設定したときのリサイズのルールを設定できます。画像のアスペクト比を維持したり要素にピッタリ合うようにリサイズしたりなど、さまざまな設定ができるはずです。ややこしくなりがちなので勉強も兼ねて一度整理してみました。

基本的な挙動はcssのbackground-imageに一致することが期待されます。実際の挙動が本当にそうなるのか試してみました。

結論を先に言うと

同じ属性値であれば基本的にWebと同じと考えて良さそうです。以下に値ごとの挙動をまとめています。

ドキュメント

https://docs.expo.io/versions/v36.0.0/react-native/image/

概要

以下の値が定義されています。コンポーネントによっては利用できないものもあるので注意しましょう。

cover
contain
stretch
repeat
center

cover

デフォルトは大体これになっている。ドキュメントでは以下の記載。

cover: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).

画像の縦横比は維持する。
画像のサイズがコンポーネントのサイズ以上になるよう画像を広げる。

かならずコンポーネント全体が画像に埋められるはず。画像が小さければ縦も横も埋められるようにリサイズされる。
リサイズするときは縦横比を維持する。

contain

ドキュメントでは以下

contain: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).

画像の縦横比は維持する。
画像のサイズがコンポーネントのサイズに収まるよう画像を縮める。

かならず画像がコンポネント内に収まるはず。画像の全体が見えているはず。画像が大きければ縦も横も収まるようにリサイズ。
リサイズするときは縦横比を維持する。

stretch

stretch: Scale width and height independently, This may change the aspect ratio of the src.

画像の縦横比は維持しない
縦と横をそれぞれコンポーネントに合わせて、画像をリサイズする

画像がコンポーネントの大きさと一致するようにリサイズされ全体を埋めているはず。画像の全体が見えているが、変形しているかも。
リサイズのときに縦横比を維持しない。

repeat

repeat: Repeat the image to cover the frame of the view. The image will keep its size and aspect ratio, unless it is larger than the view, in which case it will be scaled down uniformly so that it is contained in the view.

コンポーネントを埋めるように画像を繰り返す
小さい画像であれば縦横比とサイズは元画像のまま
大きい画像の場合は縦横比を維持してリサイズ

コンポーネントを埋め尽くすように画像を繰り返す。コンポーネントは画像で埋められるはず。
画像の縦横比は維持される。

繰り返す回数に上限がある？リサイズのルールにコンポーネントのサイズによる拡大比率のルールがあるようでしたが、あまりわかりませんでした。 repeatを使う機会は少ないですのでそれほど問題ないですが、わかったら追記しておきます。

center

center: Center the image in the view along both dimensions. If the image is larger than the view, scale it down uniformly so that it is contained in the view.[

コンポーネントの中心と画像の中心が一致するように配置
小さい画像であれば元のサイズと縦横比で表示。
大きい画像の場合は縦横比を維持してコンポーネントに収まるようにリサイズ。

おわりに

基本的にはCSSと同じですので、経験があればすぐに把握できます。 repeatは挙動に差異があったように思います。

今回まとめて改めて勉強になりました。特に憶える必要はなく、調べて実装できたら十分だと思います。

React NativeでKeyboardAvoidingViewが意図通りに動かない場合

Tue, 24 Dec 2019 00:00:00 GMT

React Nativeの「KeyboardAvoidingView」についてです。

スマホではテキストフォームにフォーカスしたときに、画面の下半分くらいはキーボードに隠れてしまいます。「KeyboardAvoidingView」はキーボードを避けるように上に移動してくれるコンポーネントです。

とても便利で欠かせないものなのですが、実装に苦戦することがあります。実装したことのある人ならわかってもらえると思いますが、意図通りの挙動にならない場合が多いです。なんかクセがあります。

いくつかアプリを作る中で、上手くいくパターンや確認すべきポイントがわかってきたのでまとめておきます。

概要

ドキュメント
「keyboardVerticalOffset」を指定する
padding
height
position
動作を指定するパラメータ「behavior」

ドキュメント

https://docs.expo.io/versions/v36.0.0/react-native/keyboardavoidingview/
Expoのドキュメントです。プロパティの定義などが書かれています。情報は少ないです。

https://medium.com/@nickyang0501/keyboardavoidingview-not-working-properly-c413c0a200d4
以前見つけた記事です。正常に動作しない場合の解決すべきパターンが書かれていました。
記事によるとjustifyContentなどの設定も関連しています。全体を囲うべきなのか必要な部分だけ囲うべきなのかなど、ベストな使い方が知りたい。

動作を指定するパラメータ「behavior」

ドキュメントにあるように挙動を制御するパラメータです。とりあえず、iOSの場合はデフォルトだと上手く動かないです。いずれかを指定するようにしましょう。個人的にはAndroidでも指定したほうが意図通りに動く印象です。

position
padding
height

それぞれの設定の挙動を以下に記載します。

position

要素の中をposition:'abusolute'の状態にして、中の要素が上に動きます。移動するときはキーボードの上端とKeyboardAvoidingViewの中の要素の下端が一致するように移動し、中の要素が上にはみ出します。中の要素のみが移動してKeyboardAvoidingView自体は移動していないようです。

要素からはみ出るので兄弟要素に重なることが可能です。親要素からはみ出すことはできないようです。たとえば、親要素がぴったり同じ大きさだと動きませんでした。Viewなどで囲むだけで動かなくなりました。

ルートやモーダルなど、大きな領域の直下に設置すれば動作するイメージです。はみ出すことができるのでKeyboardAvoidingView自体の高さは小さくても大丈夫です。

positionを指定すると、position:'absolute',overflow:'visible',が指定された状態になります。中の要素の位置が上にそろったり、高さがなくなったりしますので注意しましょう。

縦に大きいコンポーネントにすると、画面上部のフォームにフォーカスした際に画面の上にはみ出す場合があります。KeyboardAvoidingViewの全体がキーボードに隠れないように動くので、上端の方は気をつけましょう。

padding

兄弟要素をキーボードの高さ分小さくします。その分KeyboardAvoidingViewが上に移動します。

親要素の中で動き、Flexによりサイズが決まっている兄弟要素を小さします。親要素をはみ出すことはできませんし、最大でも兄弟要素のサイズ分しか移動しません。

小さくできる兄弟要素がない、兄弟要素がFlexで定義されていない場合は動かないです。兄弟要素の子要素の大きさ指定は無視されて小さくなります。

同じ親に含まれない要素には影響しません。「おじ」や「いとこ」にあたるような要素は、Flexにしていても大きさが変わりません。

兄弟要素が持っている領域分しか移動ができないので、上にはみ出すことは無いと思います。縦に大きいコンポーネントにすると、画面下部のフォームではキーボードを避けきれず隠れてしまう場合があります。

height

実際のアプリでは使ったことがありません。記事を書くために使ってみた所、以下の挙動をしました。

KeyboardAvoidingViewの自体の高さが小さくなる挙動でした。キーボードの上端と要素の下端が一致するようにheightが小さくなるようです。

しかし、KeyboardAvoidingViewの高さが小さくなっても下の要素が上に詰めるだけです。KeyboardAvoidingViewの子要素のフォームが上に動くわけではなかったので、結局キーボードに隠れてしまいました。

「keyboardVerticalOffset」を指定する

キーボードを避けるときの移動距離のオフセット値を指定できるパラメータです。ヘッダーの実装方法やOSにより必要になる場合・不要な場合があります。

基本的に「ちょっと要素が動くんだけど移動が足りなくて隠れたまま」というときは、ここを見直すといいです。キーボードが出てくる一瞬の間に少し動いていることが確認できたら調整してみましょう。

  keyboardVerticalOffset={Platform.select({
    ios: Header.HEIGHT, // iOS
    android:Header.HEIGHT + StatusBar.currentHeight, // android 
  })}

例えば、react-navigationでヘッダーを配置している場合は上記の様に指定することで正常に動作しました。

画面内に2つ設置した場合

両方が独立して動くため基本的に上手くいきません。

キーボードの上端とそれぞれのKeyboardAvoidingViewの下端が一致するように移動するため、2つのコンポーネントがキーボードの真上で重なってしまう場合があります。

おわりに

スマホアプリを作る上で、入力フォームを実装することは多いです。入力している内容がキーボードに隠れて見えなくなるのはUI的にイマイチですのでしっかり対応したいです。

そのためにもKeyboardAvoidingViewのコンポーネントは必須です。動作にクセがあるなあと個人的に思っているので、使いこなせるようになっておきたいです。

またはこれに変わるモジュールを探しておくのもいいと思います。オススメあったら教えてほしいです。

ExpoのSDK36がリリースされたのでアップデート（SDK35→SDK36）

Mon, 23 Dec 2019 00:00:00 GMT

少し前ですが、ExpoのSDK36がリリースされました。早速アップデートを試してみましたので、その時のメモを記録しておきます。

とりあえずさわってみたところだと、React Nativeのバージョンアップによって利用可能になった、「Fast Refresh」という機能がとても便利でした。開発時のデバッグがとても快適になります。

参考リンク

Expo SDK 36 is now available

概要

SDK36の変更点
SDK35からSDK36へのアップデート手順

SDK36の変更点

Expo SDK 36 is now available に記載されているものです。

React Native 0.61に対応
「React 16.9」「Fast Refresh」など対応されました。この「Fast Refresh」すごいです。 https://facebook.github.io/react-native/docs/fast-refresh

デバッグしながらソースコードを変えた際、瞬時に表示が更新されました。
以前は「Building JavaScript bundle」となり再ビルドが始まって、ビルド中は画面真っ白。ビルド完了して始めて画面に反映されていましたが、それすらなくなりました。とても快適です。更新時には画面の下の方に「Refrashing…」と表示されるだけです。

上記の関連で、以前はビルドが始まる際にデバッグしているアプリが再起動していましたが、再起動も不要になりました。同じ画面の同じ状態のままでプログラムの変更が反映されるようになりました。

Reactコンポーネント内でのプログラム修正であれば、再ビルド無しでコンポーネントを更新して再レンダリングするようです。stateの保持など出来ない・初期化されることもある様子ですが、構文エラーなどが発生したときの対処なども行うらしく便利に働きそうです。
react-native-appearanceを利用して、AndroidとWebでもダークモード
iOS以外でもダークモードの挙動を定義して利用できます。まだ試していませんが、時間見つけてダークモードへの対応もやっていきます。
Permissions APIの再構築
権限を取得する際に「expo-permissions」を利用していましたが、それぞれのモジュールで取得できるように再構築されました。カメラとかGPSとかを利用する際に、該当のモジュールのみで実装が可能になります。特に変更しなくても問題ないですが、スッキリ書けるようになりますね。

SDK35からSDK36へのアップデート手順

最新バージョンのexpo-cliを取得
npmでアップデートしましょう。
expo upgradeコマンドを実行
一部モジュールの置き換え
「CameraRoll」と「ART」のモジュールについてはそれぞれ「expo-media-library」と「react-native-svg」に置き換える
Expoのクライアントアプリも更新
Google PlayとApp Storeで各OSで更新。
ビルド済みのスタンドアローンアプリについて
公開済みのものについて、OTAアップデートではSDKのアップデートはできません。SDK36でビルドしたものをストアで配布する必要があります。

私は上記手順で問題なくアップデートできました。もしも、上記で上手くいかない場合は/node_module/ディレクトリを一度削除して、npm installを行うなどやってみると良いです。

おわりに

SDK36を動かすことが出来ました。すでに公開済みのアプリも順番に対応していこうと思います。 Fast Refreshはとても便利でした。これからの構築がとても快適になりそうです。

現時点でアップデートしてみて、特に躓くところはなかったのでドンドンアップデートしていこうと思います。

fcitxにおけるQuickphraseの使い方

Mon, 23 Dec 2019 00:00:00 GMT

「Quickphrase」の使い方の紹介です。
Quickphraseとはいわゆるユーザー辞書です。fcitxを利用している環境であれば利用できると思います。

私はPCのOSにUbuntuを使っています。ユーザー辞書を登録しようとしたときに、Mozcのものを利用しようとしたのですがなぜか利用できませんでした。別の方法を探した所、Quickphraseなるものを見つけましたのでそちらで解決できました。そのときのメモです。

Quickphraseはfcitxという入力メソッド管理フレームワークのモジュールの一つで、簡単にユーザー辞書を登録して利用できます。

fcitxの関係上、Unix系列のOSユーザーしか利用することはないと思います。Mozcや他の入力メソッドにもユーザー辞書が用意されていると思います。ですので、これが最適なのかはちょっとわかりません。ただ、Quickphraseでも十分便利に使えましたので、必要なときの選択肢として利用できればいいと思います。以下その利用方法です。

参考リンク

今回参考にしたリンクです。

https://fcitx-im.org/wiki/QuickPhrase
fcitxに関するWikiです。

https://wiki.archlinux.jp/index.php/Fcitx
こちらもWikiです。詳しく書いてあるので参考になりました。

https://gihyo.jp/admin/serial/01/ubuntu-recipe/0297?page=2
技評の連載記事です。基本的な使い方など紹介されていました。他のプラグインの情報もあったので目を通しておくと発見があります。

設定方法

入力メソッドの設定を開き、「アドオン」のタブを開きます。「clipbord」「Spell」などのアドオンが複数出てきますので、その中から「Quickphrase」を選択します。

「Quickphrase」が無い場合はインストールが必要になると思います。私の場合はデフォルトでインストールされていました。

下部にある「設定」ボタンをおして、「Quickphrase」の設定を開きます。デフォルトの設定では動作しなかったので、以下のように少し設定を変更しました。

「クイックフレーズのトリガーとなるキー」を「なし」
デフォルトは「セミコロン」になっていたのですが、動作しない様子なのでここを「なし」に変更します。
「クイックフレーズのトリガーとなる別のキー」を「Ctrl+:」こちらの別のキーで動作するように設定します。調べたところ「Ctrl+:」がオススメらしいのでこちらにしました。
「修飾キーを選択」を「なし」

これでCtrl+:でQuickphraseを呼び出せるようになりました。次は辞書のキーワードを登録します。

辞書登録

先程のキーを設定した画面の下に「クイックフレーズリスト」という項目があります。それを選択するとエディタが立ち上がります。

「QuickPhrase.md」というファイルの編集が始まるので、登録したい単語と呼び出すためのキーワードを登録します。単語とキーワードは半角スペースで区切り、改行で次の定義になります。サンプルは以下のようになります。

oh おはようございます
mm sample@gmail.com
ar ありがとうございます

ここに辞書の定義を行うことでフレーズを追加できます。

利用方法

先程設定したとおり「Ctrl+:」で立ち上がります。入力窓が出るので、そこに文字を打つと候補が表示されます。候補に対応する数字を押せば決定できます。不要であればエスケープかenterを押すことで回避できます。

デフォルトでは顔文字がたくさん入っている？様子です。

Clipboardという機能をみつけた

今回の設定の中で、Quickphrase以外のアドオンとして「Clipboard」というアドオンも有効になっていることに気づきました。

「Ctrl+;」で起動します。クリップボードの履歴から選択して貼付けすることができます。普通に便利なのでおすすめです。

私はクリップボード拡張としてCopyQを利用していましたが、こちらで十分かもしれません。他にも便利なものは有りますが、簡単に利用できるものとして覚えておくと良いと思います。

Quickphraseと同様に設定の変更ができます。記憶しておく候補数を変更できるので、デフォルトの「5」よりも増やしておくといいです。

おわりに

Quickphraseはいつでも変換されるのではなく、先に起動してキーワードを入力し候補から選択する必要があるので、少し手数がかかる印象です。ただ個人的にはこちらの動作のほうが好きですので気に入っています。

候補の設定もかんたんですし、素直に必要な機能は満たしているので十分かなと思います。もしも使う機会があれば、参考にあればと思います。

react-native-mapsを使って地図を表示

Fri, 13 Dec 2019 00:00:00 GMT

今回は「React Native Maps」を使ってみます。アプリ内に地図を表示することができます。 expoを使っていれば簡単に試せます。

スタンドアローンアプリで地図を表示するためにはGoogleMapsAPIにてプロジェクトを作成して、キーを設定しておく必要があります。
その場合はアカウント情報などの登録が必要になりますね。無料で使える範囲があるので、十分だとは思いますが注意しましょう。

こんな感じ

よく見るgoogle mapを簡単に表示することができます。

ドキュメント

https://docs.expo.io/versions/v36.0.0/sdk/map-view/
Expoのドキュメントへのリンクです。

https://github.com/react-native-community/react-native-maps
本体ドキュメントへのリンクです。さまざまな使い方や詳細なパラメータの情報が載っています。

インストール

expo install react-native-maps

expo 利用している場合はexpoコマンドでインストールすると、SDKに対応したバージョンが選択されます。利用していない場合はnpmでインストールしましょう。

テスト用の実装

とりあえずExpoクライアントでテストする場合は以下で表示できます。

import MapView from 'react-native-maps';

~~~
class MapComponent extends React.Component {
  render() {
    return (
      <MapView style={styles.mapStyle} />
    );
  }
}

const styles = StyleSheet.create({
  mapStyle: {
    width: '100%',
    height:  '100%',
  },
});

MapViewにスタイルを定義しないとエラーになりました。スタイルで幅や高さのサイズを指定すれば解決します。

実際にスタンドアローンで配信するアプリで利用する場合は、APIキーを設定する必要が有ります。この記事の最後の方に記載しています。

応用

場所を指定

    return (
      <MapView
        style={styles.mapStyle}
        initialRegion={{
          latitude: 36.28825,
          longitude: 136.7324,
          latitudeDelta: 1.0,
          longitudeDelta: 1.0,
        }}
      />
    )

緯度経度で指定した場所を中心に地図を表示できます。latitude・longitudeは緯度・経度を指定します。

latitudeDelta,longitudeDeltaは縮尺を指定します。地図に表示する範囲を指定できます。
大きな値にするとヒキになって広い範囲が表示され、小さな値にするとヨリになって狭い範囲を細かく表示する地図になります。

ピンを立てる

Mapviewコンポーネントに子要素としてMarkerコンポーネントを渡すことで、ピンを立てることが出来ます。複数立てることもできます。

import MapView, { Marker } from 'react-native-maps';

class HomeScreen extends React.Component {
  constructor(props) {
    super(props);
    this.marker = {
      title: '公園',
      discription: '遊び場',
      latlng: {
        latitude: 36.28825,
        longitude: 136.7324,
      },
    };
  }

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <MapView
          style={styles.mapStyle}
          initialRegion={{
            latitude: 36.28825,
            longitude: 136.7324,
            latitudeDelta: 0.5,
            longitudeDelta: 0.5,
          }}
        >
          <Marker
            coordinate={this.marker.latlng}
            title={this.marker.title}
            description={this.marker.description}
          />
        </MapView>
      </SafeAreaView>
    );
  }
}

その他応用

ピンの代わりにコンポーネントを渡すこともでき、任意の画像をピンの代わりに表示することもできます。
他にもdraggable属性を設定すればドラッグして動かせるピンを作れます。stateで緯度経度を処理することで、地図の任意の位置を選択できるUIも作れますね。

  <MapView
    style={styles.mapStyle}
    initialRegion={{
      latitude: 36.28825,
      longitude: 136.7324,
      latitudeDelta: 0.5,
      longitudeDelta: 0.5,
    }}
  >
    <Marker coordinate={this.marker2.latlng} >
      <View><Text>駐車場</Text></View>
    </Marker>
    <Marker draggable
      coordinate={this.state.latlng}
      onDragEnd={(e) => this.setState({ x: e.nativeEvent.coordinate })}
    />
  </MapView>

Androidで利用する場合のGoogle APIの設定

iOSで利用する場合は特に設定なしで利用できます。一方、Androidで利用する場合はGoogle APIでプロジェクトを用意して、APIキーを発行・設定する必要が有ります。

以下、expoドキュメントに載っている手順の解説です。

Build your app, take note of your Android package name (eg: ca.brentvatne.growlerprowler)
アプリをビルドしておきます。必要なのはandroidで使用するpackage nameになります。app.jsonに記載するやつです。
Open your browser to the Google API Manager and create a project.
ブラウザで「Google API manager」を開き、プロジェクトを作成します。
Once it’s created, go to the project and enable the Google Maps SDK for Android
API ライブラリにて「Maps SDK for Android」を探し有効化します。
Go back to https://console.developers.google.com/apis/credentials and click Create Credentials, then API Key.
APIからダッシュボードに戻り、プロジェクトの認証情報の画面にアクセスします。そこで上部にある「認証情報を作成」をクリックします。
In the modal that popped up, click RESTRICT KEY.
モーダルが出るのでAPIキーを選択します。
Choose the Android apps radio button under Key restriction.
不正に利用されたりするのを防ぐために制限を設けます。 Android appsを選択してアンドロイドのアプリでのみ利用できるようにします。
Click the + Add package name and fingerprint button.
パッケージネームとfingerprintの情報も制限に追加しておくことで、更に強固な制限をかけます。該当するフォームに入力していきます。
Add your android.package from app.json (eg: ca.brentvatne.growlerprowler) to the Package name field.
1でおこなったapp.jsonに記載するpackage nameを入力します。
Run expo fetch:android:hashes.
CUIで expo fetch:android:hashesを実行します。 keytoolが無いなどエラーが出る場合はJavaSDKをインストールするなどの対応が必要になります。Fingerprintなどの情報を取得できますのでメモしておきましょう。
Copy Google Certificate Fingerprint from the output from step 9 and insert it in the “SHA-1 certificate fingerprint” field.
上記コマンドで出力された、Fingerprintをコピーして貼り付けます。
google play側でアプリの署名証明書を管理している場合は、9の行程ではなくgoogle playで取得したものを設定します。すなわち、自分で証明書を用意したなら9のコマンドで得たもの、自分で用意せずにgoogle playに任せた場合は、google play→リリース管理→アプリの署名にて署名証明書のSHA-1 証明書のフィンガープリントをコピーして貼り付けます。
Copy the API key (the first text input on the page) into app.json under the android.config.googleMaps.apiKey field. See an example diff.
APIキーをコピーしてアプリのapp.jsonに貼り付けます。
Press Save and then rebuild the app like in step 1.
アプリをビルドすればAPIキーが反映されて利用できるようになっているはずです。

おわりに

簡単でした！目的の施設の位置情報などが公開されていれば、その場所周辺の地図などを表示できるので使いみちは結構あると思います。GPSと連携すれば現在地の地図も表示できます。

他にも地図に重ねてコンポーネントや図形を表示したりということもできるので、応用的な使い道は広がりそうです。操作時のイベントも複数定義されているので、それを使って操作・選択の内容を取得したり処理することも可能です。

便利な機能や使い道、躓くポイント等を見つけたらまた記事にします。

Expoでアプリに「adaptive icon」を設定する

Thu, 12 Dec 2019 00:00:00 GMT

Expoを利用しているReact Nativeアプリでadaptive iconを設定します。

今まではアイコンは通常のpng画像を使っていたのですが、この機会にadaptive iconに変えてみようと思います。

Expoを利用している場合の設定方法と、画像の用意について記載しています。参考になればと思います。

ドキュメント

Android Developers アダプティブアイコン

Expo ドキュメント

adaptive iconとは

背景画像と、それに重ねる全面画像を分けて用意してアイコンの規格です。こうすることで角丸にしたり円にしたり、ボヨヨンって揺れたりの表現を行うことができ、端末ごとに最適化された表示を行うことができます。

画像を用意

adaptive iconの仕様は以下のドキュメントに記載されています。
https://medium.com/google-design/designing-adaptive-icons-515af294c783

sketchのサンプルファイルも用意されているので、SketchやFigmaでインポートして改修していくのがおすすめです。

foregroundImage

前面に表示する画像。アイコンなどを背景透明で設定する。サイズは108dp×108dp、expoでは1024x1024のpngの仕様を進められています。マスクされる領域として各辺から1/6は空けておく必要があります。

backgroundImage

背景の画像。サイズは108dp×108dp、Expoでは1024x1024のpngの仕様を進められています。未設定でも可能で、未設定の場合は以下のbackgroundColorが適用されます

backgroundColor

上記のbackgroundImageが設定されていない場合はこちらが利用されます。単一の色背景になります。未設定の場合はデフォルトで#ffffffになります。

app.jsonに記載

画像をアプリに設置して、app.jsonでパスを指定します。通常のiconの指定も残していますが、adaptive iconの指定が優先される様子です。

背景を単一の色にする場合は以下です。背景にも画像を使いたい場合は上記のbackgroundImageを指定しましょう。

    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/foreground.png",
        "backgroundColor": "#7B5544"
      },

おわりに

上記でadaptive iconの実装ができました。
ランチャーアプリなどを使ってみれば前面画像のバウンドなどの動作があると思いますが、私は使っていないのでわかりませんでした。

何か追加で設定すべきことや、注意すべきことがあれば追記します。

「Gitが、おもしろいほどわかる基本の使い方 33」を読んだ

Wed, 11 Dec 2019 00:00:00 GMT

Gitの使い方の本です。Gitを使ったことがない、これから使うといった初心者向けの本になっています。デザイナーなどエンジニア以外にもわかりやすくなっています。
Gitの基本的な知識や使い方は学ぶことができます。かなりわかりやすくまとめられていますので、とても良い本でした。

全般通して、BitbucketとGUIツールのSoucetreeを使った手順の紹介です。CUIやGithubはほとんど出てきませんので、その部分には注意が必要です。

応用的にGitFlowなどの情報も書かれており、少しですが発展的な内容も知ることができます。

コンフリクトが起きた際の解決のコツとかはないです。かわりに衝突をなるべく防ぐために意識すべきこと・取り組むべきことが載っており役に立ちそうでした。

以下印象に残った点をメモしています。

1.バージョン管理の基本

各種ツールのインストールやサービスのサインアップを行います。この本ではBitbucketとSourcetreeを利用しますので、その準備ですね。

デモ用のリモートリポジトリが用意されていますので、そちらを利用していきます。ちなみに、MacとWindowsの手順が紹介されてます。

基本的に本の中ではずっとSourcetreeを使います。ですのでCUIが苦手とか使ったことがない人もとっつきやすくなっています。

2.Gitの基本的な使い方

変更のコミットやプッシュについての理解です。

リモート・ローカルリポジトリやチェックアウト、プッシュ・プル、フェッチ・マージなど難しい概念が出てきますが、わかりやすく整理されているので簡単に理解できます。

SourcetreeやBitbucketの画面のスクリーンショット付きで解説されていますので、真似して進めることができ親切でした。

3.複数メンバーでの運用

実際に複数のメンバーで利用するときを想定して管理を行います。
ブランチやスタッシュなど複雑な概念が出てきますので、ゆっくり時間をかけて理解しましょう。

コンフリクトについてはどうやって対処するかということより、なるべく発生しないようにするコツが紹介されています。取り組みや意識的に行うことが必要ですので、しっかり覚えておくようにしましょう。

実際の開発現場ではブランチを多数作ることが有ります。ブランチが多くなるとマージの際にめちゃくちゃ衝突したりします。できる限り複雑にならないように案件を相談したり調整することもとても大事です。
バージョン管理についても、運用面や開発面・テストの面など多面的に捉えられるように意識しましょう。

4.Gitを使った実践開発

コミットの打ち消しや、巻き戻し、GitFlowの説明などです。この辺は応用的な内容になっており、必要に応じてネットで調べながらやると良いです。

複数人での開発は実際にやってみるととてつもなく大変なことがわかるので、経験あるのみと言った考えも有ります。ある程度の事前知識を身につけておくことでパニックにならずに済むと思いますので、落ち着いて対処しましょう。

間違えたコミットも、やろうと思えば元に戻せますし、コンフリクトも詳しい人ならしっかり解決できます。焦らずにゆっくり進め、わからない難しい部分は関係する人・詳しい人に相談するように心がけましょう。チームでの開発で大切なことだと思います。

おわりに

Gitを用いたソース管理について、とてもわかり易い説明になっていました。これから使う予定のある人や、イマイチ理解できていない人はこれを読んでみると間違いないです。

CUIでの使い方やコマンドなどは紹介されていないので、そちらの知識も合わせて読んでおくのがおすすめです。Sourcetreeをつかうのであれば問題ありませんが、なんだかんだCUIで操作することが多くなります。早いうちにCUIの操作やコマンドにも慣れておくと良いです。

react-native-bundle-visualizerを使ってみる

Wed, 11 Dec 2019 00:00:00 GMT

タイトルのとおりですが、「react-native-bundle-visualizer」というパッケージを使ってみました。

以下の記事にて知ったパッケージです。利用しているパッケージのサイズを視覚的にわかりやすく表示できるものです。
Getting Started Optimizing a React Native App

アプリのサイズが大きいなとか思った時、動作が重たいなと思ったときに原因を調べる手段の一つとして覚えておくと良いです。

ドキュメント

githubは以下
https://github.com/IjzerenHein/react-native-bundle-visualizer

インストール

npmにてインストールします。アプリのビルドには不要で開発時のみ利用できればいいので、--save-devオプションです。

npm install --save-dev react-native-bundle-visualizer

インストールするとpackage.jsonの「devDependencies」に追加されるはずです。

  "devDependencies": {
    "react-native-bundle-visualizer": "^2.1.1"
  },

実行

コマンドのエイリアス等は作られません。binから実行する必要があります。

./node_modules/.bin/react-native-bundle-visualizer

CUIでの実行

上記コマンドを実行すると、少し時間がかかりますが以下のような出力が行われます。

$ ./node_modules/.bin/rea
ct-native-bundle-visualizer
Generating bundle...
Loading dependency graph, done.
info Writing bundle output to:, /tmp/react-native-bundle-visualizer/UnknownApp/ios.bundle
info Writing sourcemap output to:, /tmp/react-native-bundle-visualizer/UnknownApp/ios.bundle.map
info Done writing bundle output
info Done writing sourcemap output
Bundle is 1.5 MB in size
Unable to map 328156/1576431 bytes (20.82%)

ブラウザが立ち上がり、以下のような図が表示されます。

各パッケージをクリックすると更にその詳細を見ることもできます。

サイズと割合も表示されており、視覚的に容量を圧迫しているものや無駄なものを探せるので、パフォーマンス改善の際に役に立つと思います。

オプション

コマンドにはいくつかのオプションが設定されています。例えばAndroidで利用されるbundleを確かめたい場合は--platform androidをつけます。デフォルトはiOSの場合のものが表示されています。

./node_modules/.bin/react-native-bundle-visualizer --platform android

おわりに

簡単にパッケージの容量を調査でき、視覚的にもわかりやすく表示してくれるのでとても良かったです。

以前expoのバージョンを上げた際に容量が大きくなったので試してみたのですが、結局expoに含まれるassetが原因の様子で、あまり解決はできませんでした。ただ、他で余計なパッケージや容量が大きいパッケージを見つけることができたので、とても助かりました。

パフォーマンスの改善なので急ぎ行う必要はありませんし、開発には直接役立つものではありません。必要になった際に利用できるように存在を覚えておくと良いと思います。

Expoを使ったGPS情報取得の実装

Tue, 10 Dec 2019 00:00:00 GMT

React Nativeで作成するスマホアプリで、端末のGPSを利用して位置情報を取得する処理の実装の紹介です。案の定ですが、Expoを利用することで簡単に実装できます。

以下GPSを利用した位置情報を取得する処理の実装です。

expo-location

ドキュメントは以下
https://docs.expo.io/versions/v36.0.0/sdk/location/

こんな感じ

Androidのみですが、GPSを使って現在地の緯度・経度を取得するアプリを作成しました。

シンプルなアプリで、端末のGPSで取得した緯度・経度の情報にメモをつけて保存できます。他のアプリへの共有や、JSON形式にして出力などの機能もつけています。データが多くなると管理が大変なのでタグで検索を行える機能もあります。

google play GPSメモ

インストール

npm にてインストールを行います。ExpoのSDKを利用しているのであれば「expo」コマンドでインストールすることでSDKのバージョンに適したものがインストールされます。

expo install expo-location

app.jsonに設定を追加

パーミッションを設定する必要が有ります。以下をapp.jsonに追加します。

    "android": { 
      "permissions": [
        "ACCESS_COARSE_LOCATION",
        "ACCESS_FINE_LOCATION"
      ], 
    }

実装

以下実装の例です。権限の取得や位置情報のリクエストは非同期で行われます。

今回はasyncとawaitを使って同期的に処理を進めています。
getCurrentPositionAsyncは本来promiseを返すので、awaitを使い処理が完了してからデータを受け取るようにしています。もちろん.then()での実装も可能です。
返り値はオブジェクトです。ドキュメントに情報が有りますのでそちらを参考にして取得しましょう。特に気をつけることはありません。タイムスタンプがついていて、位置情報として方位や速度も一緒に取得します。

import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';

~~~
  componentDidMount() {
    this._getLocationAsync();
  }

  _getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== 'granted') {
      this.setState({
        submitMessage: '位置情報の取得が許可されませんでした。',
      });
    }else if(status === 'granted'){
      let location = await Location.getCurrentPositionAsync({});

      this.longitude = '経度:' + JSON.stringify(location.coords.longitude);
      this.latitude = '緯度:' + JSON.stringify(location.coords.latitude);
    }
  };
~~~

オプションで精度の調整や、キャッシュする時間の設定を渡すことができます。

ちなみにですが、expoのSDKのバージョン36なら「expo-permission」ではなく「expo-location」で権限を取得できるようになるらしいです。Loacation.getPermissionsAsync()で済むようです。試す機会があれば、実験して追記しておきます。

おわりに

今回も簡単に実装できました。expoのパッケージはとても使いやすく、ドキュメントも親切なので助かります。簡単に端末の機能を利用できるように開発が進んでいますので、初心者でもそれなりに機能のあるアプリが作れると思います。

SDKのバージョン36も公開されて、開発の活発さもうかがい知ることができます。

今回紹介したexpo-locationでは、他にも位置情報の追跡や移動の検出なんかも可能なようです。こちらも面白そうなので、使う機会を積極的に探して実装してみたいです。流行りのウォーキングアプリとか地図アプリで実装が必要になりますかね。

Expoを使ったバーコードスキャナーの実装

Mon, 09 Dec 2019 00:00:00 GMT

React Nativeで作成するスマホアプリで、端末のカメラを利用してバーコードスキャナーを実装する方法の紹介です。こちらもExpoを利用することで簡単に実装できます。

以下、QRコードスキャナーの実装の紹介です。

expo-barcode-scanner

ドキュメントは以下です。
https://docs.expo.io/versions/v35.0.0/sdk/bar-code-scanner/

こんな感じ

以前QRコードスキャナーアプリを作成しました。
iOSは純正のカメラアプリでバーコードを読み取れますが、Androidでは何らかのアプリを使う必要があります。気に入ったものがなかったので自分で作成しました。Android使っている人は自分でお気に入りのスキャナーを自作してみるのがおすすめです。

QRコードを読み取り、URLへアクセスできます。取得したURLはローカルに保存してあり、履歴として確認・再アクセスができます。
google play QRコードリーダー

インストール

expo install expo-barcode-scanner

app.jsonに設定を追加

パーミッションを指定しておく必要があります。バーコードリーダーにはもちろんカメラを利用します。パーミッションに追加しておきましょう。

    "android": { 
      "permissions": ["CAMERA"], 
    },

実装

画面のマウント時にパーミッションを尋ねます。承認が得られるまでは待機中のメッセージを表示しておき、承認が得られたタイミングでstateを更新してカメラコンポーネントを描写します。

パーミッションを取得

componentDidMountにてパーミッションを取得します。

import * as Permissions from 'expo-permissions';
import Constants from 'expo-constants';

~~~

  componentDidMount() {
    this.getPermissionsAsync();
  }

  getPermissionsAsync = async () => {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({ hasCameraPermission: status === 'granted' });
  };

~~~

カメラコンポーネント

権限を得られるまではメッセージを表示しておき、権限が承認されたらバーコードスキャナーコンポーネントを描写します。

onBarCodeScannedにてバーコード読み取り結果を受け取った際の処理を定義します。stateの更新を行い画面にデータを表示したり、ブラウザを立ち上げてアクセスしたりすることになります。

import { BarCodeScanner } from 'expo-barcode-scanner';

~~~ 

  handleBarCodeScanned = ({ type, data }) => {
    this.setState({ scanned: true, scanUrl: data });
  };

  _scanComponent = () => {
    if (this.state.hasCameraPermission === true) {
      return (
        <BarCodeScanner
          onBarCodeScanned={this.state.scanned ? undefined : this.handleBarCodeScanned}
          style={styles.scanView}
        />
      );
    }else{
      return (
        <View style={styles.scanContainer}>
          <Text style={styles.messageText}>カメラにアクセスしています</Text>
        </View>
      );
    }
  };

~~~

おわりに

こちらも簡単に実装ができました。QRコード以外でも、商品のバーコードを読み取ることもできます。たとえば本なら商品コードを読み取って、amazonやGoogleのAPIにリクエストすることで書籍の情報を取得できます。

パーミッションの承認がいるので少しややこしいですが、それ以外は特に難しいことはありません。簡単に実装できるのでおすすめです。

ほかにもExpoにはたくさんのパッケージが用意されていますので、便利なものを紹介していきます。

React Nativeでtextコンポーネントの最後の行が見切れてしまう現象

Mon, 09 Dec 2019 00:00:00 GMT

以前作ったアプリにて、一部の端末で「テキストの最後の行が見切れていて読めません」という不具合の報告をもらいました。

その際の状況と、解決方法を以下に記載しておきます。すでにSDK側などで修正されているかもしれませんが、同じ現象に出会った人の参考になればと。

結論を先に言うと

ReactNativeのテキストコンポーネントの不具合？の様子。日本語フォントの際にlineHeightの設定が正しくない端末があるらしく、最後の行が見切れることがある。

styleでlineHeightを指定することで解決できた。

現象

textコンポーネントで最後の行の内容が半分くらい見切れてしまっていました。私の開発用の端末では発生していなかったので、端末によって発生するものとしないものがある様子です。

以下の画像のようになっていました。

参考

現象を検索してみた所、以下に同じ内容の報告と解決方法の紹介がありました。
https://github.com/facebook/react-native/issues/24465

日本語フォントの場合のデフォルトのlineHeightの設定が正常でなくなる端末があるらしく、最後の行が見切れてしまうそうです。

解決方法

textコンポーネントのstyleにlineHeightを手動で設定することで解決できました。
何らかの固定の値を設定するか、フォントサイズから相対値で大きく設定することで解決できます。

テキストの表示が変わってしまうのですこしモヤっとしますが、marginBottomをつけても変わりませんでした。仕方なくこの方法で修正しました。要素の高さを固定する方法でも上手くいくと思いますが、高さが可変の要素では難しいです。

根本的な解決はReactNative側の修正を待つことになりそうです。とりあえずの回避策として、lineHeightでテキストが正しく表示されるようにしておきます。

おわりに

一部端末でしか発生していませんでしたので、ユーザーのお問合わせで初めて気が付きました。すべての端末でチェックすることは難しいので、思い当たるところを覚えておいて気をつけて作っていくしかなさそうです。

端末やOSごとの差異がまだ残っているようですが、どんどん減ってきているのも確かなようです。クロスプラットフォーム開発が快適になるようにますますの発展に期待です。

React Native Web を使ってみる

Fri, 06 Dec 2019 00:00:00 GMT

React NativeではiOSとAndroidの両方のアプリを作れる「クロスプラットフォーム開発」が可能です。少し前からWebサイトの開発も可能になる「React Native Web」というものも存在しるので、そちらを使ってみた記録です。

ずばり、同じソースコードでアプリに加えてWebサイトも作れるというものです。画期的ですね。

結論を先に言うと

簡単にWebも実装できました。もしかするとローカルのテスト時なんかには活用できるかもしれません。

ただ、「アプリを作って、全く同じモノをWebにも作る」という状況がどんなときに使うのでしょうか。 Webサービスのアプリ化はよくある話ですが、UIが異なることが多いと思うので、別で実装するのがこれまでの一般的なやり方ではないでしょうか。

確かに、同じソースコードで実装が可能なので、開発・管理・運用はとても楽になると思います。利用できるとすれば例えば以下でしょうか。

アプリ作ったのでおためし版をWebで公開
スマホでの利用はアプリで、PCではWebで利用するサービス
コンポーネントをWeb、アプリで共通化できる

まだ、プラットフォームによる挙動の差異があるようで、それを吸収する場合分けなどが必要です。その部分でソースコードが冗長になるかもしれませんが、これからの可能性を感じる機能でした。

作ってみたもの

React Native flex style creater

React NativeのflexスタイルのルールはWebとはすこし異なります。それをブラウザ上で触って確かめることができます。 ReactNativeで作っていますので、アプリでの実際の挙動になっているはず。
styleのソースコードも表示できるので、簡単なものであればここでソースコードを用意できます。

サイトはNetlifyにて配信しています。

もちろんこのプログラムをビルドすればスマホアプリにもできます。iOSとAndroid両方のアプリがビルド可能というわけです。

ドキュメント

https://docs.expo.io/versions/v35.0.0/guides/running-in-the-browser/

expoのドキュメントに手順が書かれています。

インストール

create-react-native-appでテンプレートを作成した場合はすぐに利用できます。
expo start --webコマンドで、webサーバが立ち上がりアクセスするとブラウザ上で動作します。またはexpo startを実行してから、wキーを押すとサーバが立ち上がります。

そうでなければ必要なものをインストールします。 react-native-web react-domあたりが該当します。

実装

app.jsonのplatformsにwebを追加

    "platforms": [
      "ios",
      "android",
      "web"
    ],

プログラムは基本アプリを構築するときと同じです。好きなものを作るも良し、すでに作ったものをwebで動かしてみるも良しです。
いくつかwebでは利用できないパッケージもあるので注意しましょう。admobなどが例としてあげられています。場合分けが必要であれば、react-nativeのPlatformを使うことでwebかどうか判定が可能です。

import { Platform } from 'react-native';

~~~
    if(Platform.OS === 'web'){}
~~~

先ほど紹介したアプリ React Native flex style creater ではreact-navigationなどを利用しています。

感想

アプリと全く同じというわけにはいかないようですが、ざっくりとの動作の確認であればweb上でできそうです。
アプリ開発時のローカルチェックなどで端末やエミュレータを使わずに、ブラウザで確認ということもできると思います。最終的なチェックはしっかりと端末で行う必要がありそうです。

Netlifyにデプロイするときに躓いたこと

Netlifyの設定で以下の設定をしてビルドを行います。

Build command
expo build:web
Publish directory
web-build/

ビルドコマンドが見つからないとうメッセージが出力され、ビルドに失敗しました。
expo-cliがNetlifyのサーバにないのが原因です。package.jsonにexpo-cliを追加することで解決できました。

おわりに

先に述べた結論のとおりですが、簡単にWebも実装できました。ローカルの開発テスト時に活用できるかもしれません。

確かに、同じソースコードで実装が可能なので、開発・管理・運用はとても楽になると思います。以下のような構築が必要な場合や、もっと新しい構築フローでは役に立つのではないでしょうか。

アプリ作ったのでおためし版をWebで公開
スマホでの利用はアプリで、PCではWebで利用するサービス
コンポーネントをWeb、アプリで共通化できる

まだ、プラットフォームによる挙動の差異がありますので少し注意を払う必要があります。これからの可能性を大いに感じられますので発展に期待です。

Expoを利用したアプリのapp.jsonの例

Thu, 05 Dec 2019 00:00:00 GMT

expoとReact Nativeを利用したアプリを作る際の、「app.json」ファイルの記述例です。
私がアプリ作成の際によく使っている設定内容を、以下に解説をつけて記載しています。

ドキュメント

基本的には全部ドキュメント書かれているのでこれを参考にします。最初はcreate-react-native-appなどを使って生成した雛形をそのまま使うのが簡単でおすすめです。

https://docs.expo.io/versions/v35.0.0/workflow/configuration/

app.jsonの例

私がアプリ構築で実際に設定しているものです。 expoを利用する場合のapp.jsonです。

{
  "expo": {
    "name": "my-app-name",
    "slug": "my-app-slug",
    "privacy": "unlisted",
    "sdkVersion": "35.0.0",
    "platforms": [
      "ios",
      "android"
    ],
    "version": "1.3.2",
    "orientation": "portrait",
    "primaryColor": "#FFE483",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#FFE483"
    },
    "updates": {
      "fallbackToCacheTimeout": 10000
    },
    "ios": {
      "bundleIdentifier": "my-app-id",
      "buildNumber":"1.3.2",
      "icon": "./assets/icon_ios.png",
      "splash": {
        "backgroundColor": "#FFE483",
        "image": "./assets/splash.png"
      },
      "config": {
        "googleMobileAdsAppId": "abc123"
      }
    },
    "android": {
      "package": "my-app-id",
      "permissions": [
        "ACCESS_COARSE_LOCATION",
        "ACCESS_FINE_LOCATION"
      ], 
      "versionCode": 23,
      "playStoreUrl": "https://play.google.com/store/apps/details?id=abc123",
      "config": {
        "googleMobileAdsAppId": "abc123"
      }
    }
  }
}

解説

いくつか気をつけておくべき設定を紹介します。

expo

expoを利用する場合はこれを親に付ける必要が有ります。

  "expo": {}

slug

expoのサーバ内で取り扱われるIDのようなものです。他のアプリとかぶらないようにする必要が有ります。
私は最初にドメインをつけて数字と名前をつなげることで、他の人とかぶらないようにしています。
「ドメイン-001-アプリの名前」みたいな感じです。

    "slug": "my-app-slug",

privacy

unlistedにしておくと、expo上で検索しても出てこなくなるようです。厳密に非公開になるわけではありません。URLを知っている人のみがアクセスできればいいのでそうしています。

    "privacy": "unlisted",

primaryColor

マルチタスク時のアプリ選択のヘッダー色になります。アプリ内からも呼び出すことができるので、他のアプリと共通の実装ができるコンポーネントはこういった属性値を使うように心がけています。

    "primaryColor": "#FFE483",

updates

OTAアップデートの設定です。私はアップデートのリクエストのタイムアウトを10秒にしています。 enabledを追加してfalseを指定すると、OTAアップデートを無効化できます。

    "updates": {
      "fallbackToCacheTimeout": 10000
    },

googleMobileAdsAppId

google AdmobのIDを設定します。AndroidとiOSそれぞれで設定が必要です。 Admobの管理画面で取得して、app.jsonに記載しましょう。

      "config": {
        "googleMobileAdsAppId": "abc123"
      }

おわりに

特に難しいことはありません。

自分なりの雛形を用意しておいてアプリごとに必要な箇所を変更して設定すれば問題ないと思います。package.jsonや共通のモジュールと一緒に使いまわせるようにしておくと便利です。

アナログな表現の良さがわかる「うっとりあじわいじっくりデザイン」

Thu, 05 Dec 2019 00:00:00 GMT

『なるほどデザイン』の著者が所属するデザインユニットによるデザイン書です。
表現の技法から、素材・色・配置などデザインに関する知識が書かれており、デザインに対する目の解像度が高くなるといった本です。

アナログな素材を使った表現や特長など、実際の写真を交えた解説がとてもわかり易く面白い本でした。絵の具やクレヨンを使痛くなるような印象もあり、アナログ素材の良さを感じられます。

この本を読めば、普段から細かい部分に目がいくようになりますし、デザインのアイデアとしても大きく役に立つと思います。

アナログ表現

手描きの線や筆での描写など、素材や技法がたくさん載っており、それらの写真・イメージなどが豊富に載っています。

眺めるだけでも楽しく、書籍自体のデザインもとても見やすいです。各々の手法が持つイメージや特長の表現もわかりやすいですし、掲載されている写真も印象的なものが多く、身近なものに感じられました。

タイトルの通り、「うっとり」眺めることができる本です。文章はそれほど多くありませんが時間をかけてゆっくり読むのがおすすめです。

デザインの幅広い知識

色やレイアウトなどに触れており、デザイン全般に関する知識が載っています。他の書籍でも触れられてはいますが、わかりやすい写真や解説が載っており直感的に理解できます。より深く論理的に知りたい場合は巻末にのっている参考書籍を読んで見るのがおすすめです。

完成度が下がる原因

コラムとして「完成度が下がる原因は？」という内容もありました。デジタルな表現によって不自然な表現にしてしまう場合があることを挙げられています。光や重なりなどのアナログで自然に起きている状態を、しっかり観察して理解しておくことは完成度を上げるために必要なことなのだと学びました。

他にも過度な装飾をしてしまうことなども例に挙げられており、たしかにと思うことが詰まっています。

おわりに

アナログな技法やテクスチャの紹介の部分が可愛らしく読んでいて楽しい本です。写真も印象的なものが多いので何度も読み返したくなる本です。自分でも絵の具や鉛筆を使って素材を用意してみたいなと感じました。

アプリのLPやブログのテーマに、アナログな素材を使ってみようかなと思いました。

掲載されている写真の情報や参考書籍の情報が巻末に載っています。それらも合わせて目を通すとより面白くなりそうでした。

UIコンポーネントパッケージ「React Native Paper」の紹介

Tue, 03 Dec 2019 00:00:00 GMT

今回はReact NativeのUIコンポーネントパッケージ「React Native Paper」を紹介します。
使いやすく設計されたUIコンポーネントがひとまとまりになっているパッケージです。

expoで用意されているパッケージでも問題ないですが、スタイル等が最初から設定されているので好みにあっていれば、スタイルの定義なしでかっこいいデザインにできます。

さまざまな便利なコンポーネントが用意されていることに加えて、テーマを一括で簡単に設定・変更できるのでおすすめです。

今回は実際に使ってみてわかった、UIのイメージや使い方のコツなどを紹介します。

こんな感じ

作ったアプリではほとんど利用しています。
例えば以下のようなコンポーネントが有ります。

画面ヘッダー、テキストボックス、ボタンの例です。

react-native-navigationでもヘッダーを簡単に用意できますが、自分で用意した方が便利だったので、こちらを使っています。

ドキュメント

https://callstack.github.io/react-native-paper/

インストール

npm でインストールします。いつもどおりです。

npm install react-native-paper

実装

まず、Providerでアプリ全体を囲む必要が有ります。
アプリのルートとなるapp.jsなどに記述することになります。

これがあることで、設定を渡すことでアプリ全体のテーマなどを簡単に統一、変更できるので便利です。

import { Provider as PaperProvider } from 'react-native-paper';
import App from './src/App';

export default function Main() {
  return (
    <PaperProvider>
      <App />
    </PaperProvider>
  );
}

ボタン

ボタンを配置します。modeに属性を指定することで見た目を3つのパターンから選択できます。

import { TextInput } from 'react-native-paper';

textBox = () {
  return (
    <Button
      mode='outlined'
      onPress={() => this.setState({ visible: true})}
    />決定</Button>
  );
}

text

contained

テキストボックス

簡単にテキストボックスを配置します。すでにスタイルが設定されているため、そのままでもある程度かっこいいものになります。

こちらもmodeに属性を指定することで見た目を選択できます。

import { TextInput } from 'react-native-paper';

textBox = () {
  return (
    <TextInput
      label='name'
      mode='outlined'
      value={this.state.name}
      onChangeText={text => this.setState({ name: text})}
    />
  );
}

outlined

テーマの変更

テーマを定義して渡すことで全体のテーマを一括で変更できます。

設定する色やフォント等の情報をドキュメントに記載されています。ドキュメント

import { Provider as PaperProvider,DefaultTheme } from 'react-native-paper';

export default function Main() {
  const theme = {
    ...DefaultTheme,
    roundness: 2,
    colors: {
      ...DefaultTheme.colors,
      primary: '#5468cb',
      accent: '#2489cb',
    }
  };
  return (
    <PaperProvider theme={theme}>
      <App />
    </PaperProvider>
  );
}

おわりに

簡単にかっこいいUIを利用できるパッケージでした。ここで紹介した以外にもたくさんのコンポーネントが有りますし、設定もわかりやすくおすすめです。

ヘッダーにも使えるバーコンポネントAppbarとか、画面に固定で配置できるボタンFABとか、モーダルなんかも用意されており実装できます。テキストや見出し、リスト表示なども用意されており、基本的なアプリであれば全部これを利用することも可能です。

テーマの変更なども簡単にできるので、ユーザー側で設定できるようにすることも実装できます。

このパッケージ以外にもUIコンポーネント集はたくさん存在しているので、さまざまなものを使ってみて好みに合うものを探してみましょう。

React Native Webviewを使ってアプリ内でHTMLを表示

Mon, 02 Dec 2019 00:00:00 GMT

今回は「React Native Webview」を使ってみます。

URLなどに対してブラウザを立ち上げずにアプリ内で表示します。すでにwebで実装されているサービスであれば、webviewを使うことでアプリの開発を最小限にできます。

ブラウザを立ち上げずにWebページを表示したいときやHTMLをプレビューしたいときにも使えます。

こんな感じ

以前expoを利用してマークダウンエディターを作成しました。
マークダウンエディターのアプリ

左側にmdを入力するとHTMLに変換して、右側にWebviewを使って表示します。

mdからHTMLへの変換はjsのライブラリを使いました。

ドキュメント

https://docs.expo.io/versions/v35.0.0/sdk/webview/

expoドキュメントがわかりやすいです。

インストール

expo install react-native-webview

実装

一般的な使い方は以下でしょうか。 URLを指定してリクエストを行い内容を表示します。

import { WebView } from 'react-native-webview';

~~~
  webviewComponent(){
    return(
      <WebView 
        originWhitelist={['https://honmushi.com*']}
        source={{ uri: 'https://honmushi.com' }} 
      />;
    )
  }
~~~

webブラウザを立ち上げて表示するのではなく、アプリ内でコンポーネントを用意してそこで開きます。表示崩れることがあるかもしれませんし、処理が意図通りに動作しないjsもあると思いますので注意しましょう。

originWhitelistは有効として認めるドメインを指定します。特定のドメイン以下のもののみアプリ内で表示できるようにするときに利用します。
表示するものが絞られているのであればセキュリティのために指定しておいたほうが良さそうですね。

HTMLを用意して渡す

HTMLを自分で用意して渡すこともできます。
上記のアプリではこちらの使い方をしています。

この場合はoriginWhitelistは*にする必要があります。

import { WebView } from 'react-native-webview';

~~~
  webviewComponent(){
    htmlContent = `
      <h1>title</h1>
      <p>description</p>`;

    return(
      <WebView
        originWhitelist={['*']}
        source={{ html: htmlContent }}
        style={{ marginTop: 20 }}
      />
    )
  }
~~~

おわりに

アプリ内Webviewが簡単に実装できました。

すでにWebサービスがあるものは、Webviewで実装することにより開発を短縮することができます。 web側でアプリ用のViewを実装して、webviewで呼び出すだけです。アプリ側の実装が最小限ですみます。

ただReactNative使っていると、わりとWebの知識が流用できますので、アプリで実装するほうがいいのかなとも思います。 Web側に影響ありませんし、表示などもほぼ同じように調整できパフォーマンスもいいのではないでしょうか。

昔はWebviewで実装されたアプリの話もよく聞きましたが、最近ではどうなのでしょうかね。

React コンポーネントのlifecycleメソッド

Fri, 29 Nov 2019 00:00:00 GMT

ReactにてコンポーネントをClassで定義した際の、コンポーネントで利用できるライフサイクルメソッドをメモしておきます。
React Native でもとてもよくつかうメソッドですが、覚えられないのでここにまとめて記録しておきます。

参考

React ドキュメント
 コンポーネントライフサイクルの図

クラスによるコンポーネント定義

React.Componentを継承して作成します。

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

マウント時のメソッド

constructor

コンポーネントのマウントの最初に呼ばれます。

stateの初期化や、イベントハンドラーにメソッドをバインドするときはここに記述します。
setStateはここでは使わない。直接代入を行います。
super(props)は最初に記述します。

constructor(props) {
  super(props);
  this.state = { counter: 0 };
}

getDerivedStateFromProps()

renderメソッドの直前に実行されます。
<Transition>コンポーネントなどの実装の際に利用しますが、利用する機会は少ないです。

static getDerivedStateFromProps(props, state)

render

特に詳しい説明は必要無いでしょうか。コンポーネントをレンダリングします。この中ではstateを更新しないように注意。

componentDidMount

コンポーネントがマウントされた直後に動作。DOMに対する初期化はここで行います。
イベントリスナーの登録などを行いますが、その場合はunmountで解除することを忘れないように注意。

componentDidMount(){
  this.focusListener = this.props.navigation.addListener('didFocus', () => {
    this.loadData();
  });
}

更新時のメソッド

getDerivedStateFromProps

マウント時のメソッドと同様です。更新時にも実行されます。

shouldComponentUpdate

更新が必要かどうかを判定できるメソッドです。パフォーマンスの改善の目的で利用することがあります。

stateやpropsを更新前と後で比較して、更新が必要かどうかの判定を追加します。 trueを返せば更新を行い、falseを返せば更新をスキップできます。

具体的にはfalseを返したときcomponentWillUpdate、render、componentDidUpdateがスキップされます。

shouldComponentUpdate(nextProps, nextState)

render()

マウント時と同様です。

getSnapshotBeforeUpdate()

更新の直前に呼ばれます。あまり使う機会はありませんが、更新直前のスクロール位置とか画面の情報を保持する、または更新後に利用する場合に使います。

getSnapshotBeforeUpdate(prevProps, prevState)

componentDidUpdate

コンポーネントの更新後に呼ばれます。
フォームなどの内容が更新された時にサーバへ変更を送信する場合とかに利用します。アプリではそれほど出番は無いかもしれません。

stateの更新を行う場合は無限ループが起きないように注意。

componentDidUpdate(prevProps) {
  if (this.props.text !== prevProps.text) {
    this.save(this.props.text);
  }
}

アンマウント時のメソッド

componentWillUnmount

コンポーネントがアンマウントされる直前に呼ばれます。
イベントリスナーの解除とか、バックグラウンドで動いているタイマーの解除などを実行します。

componentWillUnmount() {
  this.focusListener.remove();
}

エラーハンドリングメソッド

getDerivedStateFromError

子コンポーネントでエラーがスローされた後によばれます。
エラーがあった場合に何らかのメッセージを表示するといった用途で使えそうです。

static getDerivedStateFromError(error) {
  return { hasError: true };
}

“Render phase”中で呼ばれます。

componentDidCatch

こちらもエラーがスローされた後に呼ばれます。

引数は以下

error
スローされたエラー
info
どのコンポーネントがエラーをスローしたかについての情報を含む componentStack キーを持つオブジェクト

componentDidCatch(error, info){
  logComponentStackToMyService(info.componentStack);
}

“Commit phase”中で呼ばれます。

おわりに

よく使うものは限られていますし、それぞれ主なその用途は決まっています。処理の順番の前後とか、state更新の可否などに気をつければ問題無く使いこなせます。

パフォーマンス改善などで大きく役に立つので、そのへんのノウハウやよくあるパターンも今度記録しておこうと思います。

React Native Calendarsを使ってアプリにカレンダーを実装

Fri, 29 Nov 2019 00:00:00 GMT

今回は使って便利だった「React Native Calendars」というパッケージを紹介します。カレンダーのUIを作成するもので、以下のようなカレンダーを画面に表示できます。

カレンダーには予定などを点で表したり、年月の移動、日付をタップしたときに日のデータを渡しつつ処理を開始したりできます。

こんな感じ

React Native Calendarsの実例を見てみるとこんな感じです。

以前私がつくった「todo cale」というカレンダーアプリで利用しました。
予定日を設定するためにカレンダーで日付を選べるようにしたこととと、逆にカレンダーからその日の予定を確認できるようにしています。

App store
Google play

ドキュメント

https://github.com/wix/react-native-calendars

上記Githubで公開されています。

インストール

npmでインストールします。

npm install react-native-calendars

実装

基本のカレンダーは以下のように実装します。

import { Calendar } from 'react-native-calendars';
~~~
  calendarComponent(){
    return(
      <Calendar />
    )
  }
~~~

とりあえずカレンダーが表示されます。今日の日付に色がついているだけの状態です。

設定の追加

ここにいくつかパラメータを定義することで、表示の調整であったり、処理を追加することができます。

  calendarComponent(){
    return(
      <Calendar 
         monthFormat={'yyyy年 MM月'}
         onDayPress={(day) => {this.setState({select:day})}}
      />
    )
  }

月の表記

monthFormatに文字列でフォーマットを渡します。

日付選択時の処理

onDayPressにメソッドを渡します。日付を選択した際に実行され、日付の文字列が引数として渡されます。日付の選択や、モーダルの表示、小ページへの遷移などの処理を書いたりしますかね。

日付に印を付ける

特定の日付に対して予定などがある場合、点を着けて表示することができます。

以下は複数の点を表示する際のサンプルです。
表示する点をキーとカラー・その他の情報をオブジェクトで定義しておき、対象の日付に配列で渡します。

予めデータベースからタスクなどのデータを取得しておき、日付ごとに配列を用意して表示する点の属性を用意しておくことになります。

私はここに追加でonDayPressでモーダルを開くようにして、モーダル内でタスクを選択できるように実装しました。

const task01 = {key:'01', color: 'red'};
const task02 = {key:'02', color: 'blue'};
const task03 = {key:'03', color: 'green'};

~~~
<Calendar
  markedDates={{
    '2019-11-25': {dots: [task01, task02] },
    '2019-11-26': {dots: [task01, task03] }
  }}
  markingType={'multi-dot'}
/>

用意する印のデータが多すぎたり期間に幅が有りすぎると表示速度に影響がある様子なので、期間を絞るなどして制御するのがおすすめです。

おわりに

カレンダーのUIを作るのは結構大変です。このようなモジュールを見つけておいて必要なときにさくっと利用できるようにしておくととても捗ります。

今回紹介した以外にも、表示するカレンダーの形式や点のスタイルが有りますのでそちらも一度目を通してみると良いです。

アプリにおいてカレンダーはメジャーな機能ですので、他のモジュールもたくさん公開されているのではないかと思います。端末のカレンダーやGoogleカレンダーとの動機なんかもできるはずですので、そちらもゆくゆくは試そうと思います。

Expoを使ったAdmobの実装

Thu, 28 Nov 2019 00:00:00 GMT

React Nativeで作るスマホアプリにAdmobを実装する方法の紹介です。

Admobはアプリにバナーなどの広告を掲載して収益化するための仕組みでGoogleが提供しています。ブログなどで利用するAdsenseのアプリ版と考えたほうが早いかと思います。

Expoを利用することで簡単に実装ができます。
他にもライブラリ等は有りますが、expo-ads-admobを利用するとても実装が簡単なのでおすすめです。

以下実装の紹介です。

expo-ads-admob

ドキュメント

モジュールのインストール

npm にてインストールを行います。expoのSDKを利用しているのであれば「expo」コマンドでインストールすることでSDKのバージョンに適したものがインストールされます。

expo install expo-ads-admob

app.jsonに設定を追加

admobで作成したアプリの「アプリ ID」をapp.jsonに追加する必要があります。 Admobの管理画面にて、アプリの追加とユニットの作成を行っておきましょう。

AndroidとiOSの設定部分にそれぞれ追加します。

  "android": {
    // ...
    "config": {
      // ...
      "googleMobileAdsAppId": "ca-app-pub-3940256099942544~3347511713" // sample id, replace with your own
    }
  },

  "ios": {
    // ...
    "config": {
      // ...
      "googleMobileAdsAppId": "ca-app-pub-3940256099942544~1458002511" // sample id, replace with your own
    }
  },

実装.1 バナー広告

バナー広告の実装例は以下です。 expoによる開発中はデベロップメントモードになることを利用して、開発中はテスト用の広告IDが利用されるようにしています。

その上でreact-nativeのPlatformを利用して、OSによる広告ユニットIDの出し分けを実装しています。それぞれの広告ユニットIDの部分は自分で用意したAdmob広告のユニットIDを設定します。

import React from 'react';
import { Platform,View } from 'react-native';
import { AdMobBanner } from 'expo-ads-admob';

class BannerAd extends React.Component {
  bannerError() {
    console.log("Ad Fail error")
  }

  render(){
    return (
      <View >
        <AdMobBanner
          adUnitID={
            __DEV__ ? "ca-app-pub-3940256099942544/6300978111" // テスト広告
            : Platform.select({
              ios: "広告ユニットID" , // iOS
              android:"広告ユニットID" , // android 
            })
          }
          onDidFailToReceiveAdWithError={this.bannerError} 
        />
      </View>
    )
  }
}

export default {BannerAd}

表示のサンプル

こんな感じで表示されます。画面の下や上に固定しておくのがよく見る配置ですかね。
隣接するViewにflex:1のスタイルを設定しておくとその要素が膨らむので、広告のコンポーネントが下端によることになります。

実装.2 インタースティシャル広告

画面全体に表示される動画などの広告です。広告が終わったら閉じるボタンを押して、アプリに戻ることのできる広告です。

広告リクエストと表示を連続でやっていますが分けておいてあらかじめ用意しておくのが良いです。画面表示の際にリクエストをしておいてボタンを押したら関数を実行して広告を表示する。という形が良いパターンかと思います。

Interstitial広告はpromiseを返すので、表示に失敗したときのために.then().catch()にて例外を受け取れるようにするか、async・awaitを使って実装するかがおすすめです。

何回か使ってみると簡単にコツがつかめます。

import React from 'react';
import { Platform,View } from 'react-native';
import { AdMobInterstitial} from 'expo-ads-admob';

async function Interstitial () {
  if(__DEV__){
    AdMobInterstitial.setAdUnitID('ca-app-pub-3940256099942544/1033173712'); // テスト広告
  }else{
    if(Platform.OS === 'ios'){
      AdMobInterstitial.setAdUnitID('広告ユニットID'); //iOS
    }else{
      AdMobInterstitial.setAdUnitID('広告ユニットID'); //android
    }
  }
  await AdMobInterstitial.requestAdAsync();
  await AdMobInterstitial.showAdAsync();
}

export default {Interstitial};

表示のサンプル

こんな感じで表示されます。
画面いっぱいに表示されます。閉じることで元の画面に戻ることができ、promiseを返すので表示後の処理などを指定することもできます。

実装.3 リワード広告

ちょっとだけややこしくなります。広告を見終わったことを検出するためにイベントが用意されています。イベントリスナーを追加して処理を設定しておきます。

画面表示の際に、視聴後に実行する処理をイベントリスナーに設定しておいて、ボタンを押したときに動画広告を表示するイメージです。視聴完了のタイミングはrewardedのイベントで定義されています。他にも広告を閉じたときなど他のイベントも定義されていますので確認しておくと色んな使い方ができます。

import { AdMobRewarded } from 'expo-ads-admob';

class HomeScreen extends React.Component {

  Reward = async () => {
    if (__DEV__) {
      AdMobRewarded.setAdUnitID('ca-app-pub-3940256099942544/5224354917'); // Test ID, Replace with your-admob-unit-id
    } else {
      if (Platform.OS === 'ios') {
        AdMobRewarded.setAdUnitID('広告ユニットID'); // iOS
      } else {
        AdMobRewarded.setAdUnitID('広告ユニットID'); // android
      }
    }
    await AdMobRewarded.requestAdAsync();
    await AdMobRewarded.showAdAsync();
  };
  
  buttonPress = () => {
    this.Reward() 
  }

  componentDidMount = () => {
    AdMobRewarded.addEventListener('rewarded', () => {
      // 広告最後までみた人が実行できる処理
    });
  };
  componentWillUnmount() {
    AdMobRewarded.removeAllListeners();
  }

表示のサンプル

こんな感じで表示されます。右上の「残り○秒」が減っていき、0になると閉じることができます。
あらかじめイベントリスナーにて各種イベント時の処理を定義しておく必要があるので少しややこしいですが、アプリらしい報酬などを設定できるので使いこなせると便利です。

おわりに

広告もexpoを利用することで簡単に実装できます。
各広告のモジュールにはさまざまなタイミングでイベントが用意されていて、そのタイミングで処理を実行することもできます。広告のサイズなどを始めとしたいくつかの設定が用意されています、ドキュメントを読んで試してみましょう。

他にもexpoを用いることで簡単に実装できる機能が山ほど有ります。とても便利でよく利用していますので、少しずつ紹介していきたいと思います。

Expoによるストア公開なしでアップデート配布「Over the Air」

Thu, 28 Nov 2019 00:00:00 GMT

Expoを使ったことがある人はご存知かと思いますが、ストアでの審査なしでアプリの更新を配布することができます。

「“Over the Air” (OTA) updates」と呼ばれています。

ストアでの審査を通さなくても良いので便利です。間違ってもエラー起きるリリースとかをしないように最新の注意を払う必要があります。なんだかんだ、ストアの審査でエラーが見つかることもありますので、その辺は自己責任になります。

以下簡単に手順と必要な設定を記載します。とても簡単で、むしろデフォルトが有効になっていますので特に苦戦することもないです。

OTAアップデート

ドキュメント
上記ドキュメントに詳しいことが書かれています。英語ですがそれほど難しくはないです。専門用語が多いのでわからない点もあると思いますが、調べながら進めましょう。

app.json

app.jsonにて以下の指定をする必要があります。

  "updates": {
    "enabled": true,
    "fallbackToCacheTimeout": 30000 
  }

fallbackToCacheTimeoutはミリ秒です。「30000」がデフォルトで、更新リクエストの際に最大30秒まで待てることになります。少し減らしておいてもいいと思います。10秒位とか。

enabledをfalseに変えておけば、OTAが無効になった状態でアプリがビルドされます。不要なのであれば早いうちに変更しておきましょう。未指定の場合はtrueとして扱われます。

更新の実行

expoサーバでビルドを行えば、自動的に更新が公開され配布されます。

実際にはアプリが起動した際に上記のupdatesのenabledがtrueの場合は、更新があるかどうかexpoのサーバに問い合わせています。
更新のバージョンがあればそれをサーバからインストールしています。特にユーザー側での操作も必要ないのでとても簡単です。

OTAで更新できないこと

以下の内容に関してはOTAでの更新はできません。app.jsonで以下を変更した場合、スタンドアローンアプリをストアで公開してアップデートする必要があります。

Expo SDKのVersionアップデート
ios
android
notification keys
splash
icon
name
owner
scheme
facebookScheme
assetBundlePatterns

expoのSDKのバージョンを更新した場合は内容がOTAで配布されません。各端末のSDKと、ビルドサーバにアップしたSDKのバージョンに差異がある場合はアップデートされないようです。

ストアで新しいバージョンのSDKを含むアプリを配布することで、両環境のSDKバージョンの差異がなくなりOTAでアップデートが可能になります。

おわりに

ストアでの審査を体験したことのある人ならこの機能の便利さが伝わると思います。
ただ、絶対必要な機能というわけではないので無効にするのも方針として有りです。私はいくつかのアプリでは無効にしています。

実機でのテストをしっかり行いたい場合など邪魔になる機能ですので、開発初期段階で一度検討して方針を決めておきましょう。

Vimのおすすめプラグインを紹介するページ

Wed, 27 Nov 2019 00:00:00 GMT

突然ですが Vim のおすすめプラグインを紹介するページを作成します。

理由は特にありませんが、便利だなあと思ったプラグインを使い方とともに記録しておきます。

環境移行の際とか便利だと思いましたので、後は各種プラグインごとの設定なんかも書いておこうかなと思います。vimrc 見ればわかるのですが、コメントとか減らしたいのでここに書いておきます。

vim easymotion

http://haya14busa.com/mastering-vim-easymotion/

画面内の移動を快適にするプラグインです。検索でも全然便利なのですが、簡単に移動したいときに使うこともあります。

慣れるととても早く移動できるようになると思います。

使い方

s の後に2文字入力すると、画面の該当する箇所にセレクタが表示されますので、そのキーを押すとそこに移動できます。

vim surround

https://github.com/tpope/vim-surround

単語等の前後を’とか”で囲むことができます。プログラミングしていると文字列の指定とか配列やオブジェクトの指定などで、文字を囲む必要が何度も出てきます。 [などにも対応していますので、そのときに使っているプラグインです。

使い方

簡単には以下

ysiw'
カーソル位置にある単語を”で囲む
ds"
囲んでいる""を削除
cs[{
囲んでいる[]を{}に変更

vim-prettier

https://github.com/prettier/vim-prettier

「prettier」という便利なコードフォーマットツールがあり、それを Vim で利用できるようにしたものです。 prettier は JavaScript のコードフォーマッターで、タブや空白の数とか、カッコのスペースとか、改行などを機械的にフォーマットします。

チームでのみやすさのためにコーディングルールを儲けるのは普通のことですが、逐次ルールを共有するのではなく、こうした仕組みで整えるというのはとても良い考えだと思います。私は Expo の開発コミュニティの Contribute guide のコーディング規約でこれを見つけて、それ以降これを愛用しています。
https://github.com/expo/expo/blob/master/CONTRIBUTING.md

わかりやすいですし簡単に整形できて便利です。個人開発ではコーディングルールがおろそかになりがちだと思います。なにかコミュニティなどのルールを参考に真似するのがおすすめです。

使い方

<Leader>pで動作します。
プラグインとは別でprettier本体も必要です。npmでインストールします。

参考になる書籍

「実践 Vim」

インストールしたままの Vim で使える便利なコマンドや応用が掲載されています。私が Vim 使う上でとても参考にしている本です。よい本ですのでみなさんもぜひ。

おわりに

Vim の便利なプラグインの紹介でした。以降も追記していくつもりです。便利なものを見つけたり、おすすめの設定とか見つかったらドンドン書いていきます。
このページにまとめて書いておくことで、他の環境への移行時などに便利になることが目的です。

Expo + React Nativeによるアプリ開発環境

Wed, 27 Nov 2019 00:00:00 GMT

今までにいくつかスマホアプリを作成しました。今回はスマホアプリ開発に使っているいくつかのサービスや環境を紹介します。

ざっくりとは以下を使っている感想やおすすめポイントの紹介です。

React Native
expo

スマホアプリの開発を簡単にでも初めたい人にとって参考になる情報です。ちょっと不便に思うことやアイデアがあり、アプリを作ってみようと考えている人におすすめです。

作成したアプリの例

スマホアプリは結構たくさん作成しました。大小全部数えれば10個以上あります。
例えば以下のものがあります。どれもiOS・Android両方で公開しているアプリです。

コミュニティバス「のっティ」の時刻表アプリ
クロスプラットフォームで開発したアプリです。特別な機能はありませんが、一番最初に作ったアプリです。
Foldest Note 階層を作って管理できるノートアプリ
sqliteというRDBを使っています。ノートアプリもかんたんに作成できます。
Coffee memo シンプルメモ帳アプリ
メモごとにテーマを変えられるようにしたり、簡単なシェア機能やクリップボードなどの機能を搭載しました。メモ帳アプリで利用できそうな機能をいろいろ試してみたものです。

これらすべてのアプリは以下に紹介する環境で作成しています。どれも導入が簡単なのでおすすめです。

React Native

クロスプラットフォーム、すなわちiPhoneとAndroidの両方で動作するアプリを開発できます。

クロスプラットフォーム

以前はそれぞれのOSで使用するプログラミング言語が異なるため、同じアプリを2つの言語で作る必要がありました。現在ではクロスプラットフォーム開発向けの言語や仕組みが整ってきており、とても便利です。

ネイティブでの実装が必要であれば、それぞれの言語に分ける必要がありますが、新しく始める際の入門や、簡単な機能やプロトタイプとして作るのであれば、React Nativeで十分に開発ができます。

Web開発で得た知識を使える

JavaScriptを使ってプログラミングすることになります。アプリのため、Webとは性質や動作が異なりますが言語そのものの動作は同じです。知識を流用することが出来ます。JavaScriptの基本構文はもちろん、パッケージもアプリ開発に利用することができます。

JSXというHTMLに近いタグベースの構文でUIを作成していくので、その点もわかりやすいです。要素のスタイルをCSSに似たルールで指定するところも、Webライクですぐに理解できると思います。

Atomic designとの相性が良い

React NativeはReactというJavaScriptのフロントエンドフレームワークを元にして、アプリ開発に対応したものとして作られています。

React

そのためコンポーネント・ベースの設計に相性がよいです。「Atomic Design」という考え方に沿ってデザインやUIを設計していくと、整理された設計で構築ができ運用・改修もしやすくなるのでおすすめです。

以下の本がとても参考になります。コンポーネント設計はもちろんテストのことなども書かれてました。

expo

React Nativeでの開発を手助けするパッケージ群、ざっくりとはSDKです。
expo

利用するパッケージの例

例えばexpoには以下のパッケージがあります。必要なものをimportして実装できます。端末の機能へのアクセスも簡単にできるためとても便利です。

カメラ expo-camera
広告 expo-ads-admob
位置情報 expo-location
バーコードスキャナー expo-barcode-scanner

開発がかんたん

expoを利用していると端末での実機テストも簡単になります。

expoが提供するクライアントアプリをストアから端末にインストールしておくと、開発中のアプリのソースをPCからLAN経由で端末に送って動かすことができます。ホットリロードの機能により、ビルドせずとも保存のたびに変更が反映され動作を実機で確認しながら開発できます。

ブラウザで確認しながらWebシステムのコーディングを行うようなイメージです。

エミュレータを使って確認することもできるのですが、私は実機でアプリを動かして確認しています。 AndroidもiOSも両方の端末で動作を確認できます。操作も実際の動作が確認できますし、ログ出力も確認できます。PCの画面も圧迫しなくて済むのでおすすめです。ただ、電池の消耗は激しいです。

ビルドもかんたん

expoはSDKだけでなくオンライン上で利用できるサービスがあり、とても便利です。

アプリのビルドをexpoのオンラインサーバ上でやってもらうことができます。自分のPCやビルド用マシンでビルドする必要がないので、他の作業をしながらでも快適にできます。ただし、expoのサイトにてアカウントを作る必要があります。無料です。

ストアのキーであったり、各ストアのアカウント情報なども管理してくれますので簡単にビルドできます。管理画面から作成されたAAB・APK・IPAをダウンロードできます。

ビルドしたものはオンライン上に公開されており、他の人の作ったアプリなどを専用のクライアントアプリを使うことでストアからダウンロードすることなしに試すことができます。

容量は大きくなりがち

ただし、上記の実機でのホットリロードを利用した確認、expoサーバでのビルドを行うために、expoのSDKをアプリに含める必要があります。その分アプリの容量が大きくなりがちです。

npm

詳細な説明は不要でしょうか。React NativeはJavaScriptのパッケージですので、パッケージ管理ツールとしてnpmを使います。 expoも同様にnpm経由でinstallします。

github

バージョン管理にgithubを使います。こちらも詳細な説明は不要でしょう。

Vim

エディタはVimです。個人的なお気に入りですが、なんでもVimを使っています。 React Nativeで役に立つプラグイン等もそのうち紹介したいと思います。

PCはLinux

OSではUbuntuです。MacやWindowsも利用できるPCを持っていますが、Linuxが一番好きです。

Webシステムであれば利用するサーバーとOSを揃えておくのがおすすめです。ですので、Windowsサーバを使うならWindows使うといいです。

今回はアプリ開発なので、ズバリ何でもよいです。React NativeはJavaScriptを使うので、どのOSでも問題ないです。

あとはワードやエクセルなどのオフィスを使う必要があるのであれば考えたほうがいいです。そうでなければLinuxがおすすめです。さまざまなアプリケーションがスッキリ動きます。 iOSアプリのapp storeへのipaのアップロードの際にのみMacを使います。

おわりに

React Nativeとexpoの開発環境の紹介でした。

他にも「こんなプラグイン使うと便利だよ」とか実際の画面の動作とかも紹介していこうと思います。何より日本語の情報が少ないので、敷居の高さを感じている人もいるかもしれません。試してみるとすごく簡単なのでおすすめです。Webにも対応したり、開発も盛んなのでこれからの発展にも期待しています。

ボジョレーヌーボーも今日から解禁「The WINE」

Thu, 21 Nov 2019 00:00:00 GMT

11月の第3木曜日、ボジョレーヌーボーが解禁されました。毎年ニュースでも取り上げられますね。

前からずっと積読してあった「The WINE」という本を思い出したので読んでみました。

この本はボジョレーヌーボーに限らず、ワインを飲む際の知識として勉強になります。ただ、本が大きくワインに関する用語の種類も多いので、簡単には把握しきることは難しいです。一回読んで理解し切るのではなくゆっくり時間をかけて読みます。ワインを飲む度に思い返して読み直して理解していくのが良いです。ソムリエって大変なんですね。それがとても良くわかる本です。

とりあえず飛ばしながら読んでもたくさんの知識が得られます。それっぽいウンチクを語れるくらいになります。実際にワインを飲んで味や香りの違いを楽しもうすると長い時間が必要になりそうです。

味覚に関する感覚的なことなので想像しにくい部分も有りますが、イラストや図・グラフをたくさん使っているため直感的に理解できます。そのため本も大きく分厚いですが思ったよりサクサク読めると思います。ワインの濃さや味に関連して全体がカラフルになっており、さまざまな情報をわかりやすくインフォグラフィックスで紹介しています。

ワインそのものの知識にとどまらず、テイスティングの方法や保存のルール、提供の仕方や産地の特長などにも触れており、かなり情報量は多くなっています。

ワインを飲みながら読みたいですが、酔っていると内容を多分覚えられないと思います。読むタイミングが難しい本ですね。

ざっくり

味を決める5つの要素

甘み
酸味
渋み
アルコール度
ボディ

味覚のレベルは舌をよく見るとわかる

味覚は「味蕾-みらい」の数によって決まるそうです。舌にあるぼつぼつが多いほうが、味覚が敏感なようです。見た目でわかるんですね、舌が肥えてるかとか。知りませんでした。

もちろん訓練によってもある程度であれば味覚の感覚を成長させることができるようです。他にもタイプによって得意な味や強く感じる味があるそうです。奥が深い。

ワインの種類によって適温が異なる

保存する際には注意が必要です。個人で楽しむ程度であればワインセラーを用意できませんので、ある程度諦めるしかないです。

基本的には自分で管理せずにお店に行っていただくのがいいのかなと思いました。家で飲むのも快適でよいですが、お店の美味しい料理と一緒に飲むのがよいと思います。値段は高くなりますが管理も行き届いていると思いますし、オススメなんかも聞くことができると思います。

ワインの味によって合う食材がわかる

チーズに始まり、肉や魚・野菜・ハーブなどの各食材の相性が紹介されています。ワインによって合う食材合わない食材があるのはなんとなくわかります。チーズなんか種類も豊富ですし相性ピッタリ、食べたくなってきました。

大きく分けて9つの種類

スパークリングワイン
ライトボディの白ワイン
フルボディの白ワイン
アロマティックな白ワイン
ロゼワイン
ライトボディの赤ワイン
ミディアムボディの赤ワイン
フルボディの赤ワイン
デザートワイン

それぞれの種類の代表的なワインが紹介されています。味や香りのグラフに加えて、特長やおすすめの飲み方が書いてあります。ワインを楽しむ際の参考になります。ここに書かれているものを片っ端から飲んでみることから始めるのがいいかも。結構大量に飲まないといけませんが。。

おわりに

美味しいワインやそれに合う食べ物を自分で選べるようになったらとても素敵ですね。自分で飲むときもそうですが、誰かに進めることなんかもできたらかっこいいです。

個人で楽しむには情報が多くて大変ですが、しっかり理解できたらよりワインを楽しむことができそうです。知識があればより美味しくワインが楽しめると思います。じっくり時間をかけて読みたい本でした。

「ソフトウェアファースト」新しいITの文化づくり

Wed, 20 Nov 2019 00:00:00 GMT

ソフトウェアファーストという戦略についての本です。

ITエンジニアであれば十分に知っていることかもしれませんが、そうでない人にとって学びが多いと思います。すでに知っている人にとっても、今時の開発や事業のフローや実例がわかりますので得られるものは多いです。

IT関連の専門用語についても図解とともに説明が載っているため、詳しくない人でも理解しながら読み進められます。 ITを利用するサービスやシステムを立ち上げるための文化・組織づくりの参考に成るのと思います。

以下、参考になった点をメモとして書き残しています。

ソフトウェアファーストとは

ソフトウェア活用を軸として、事業やプロダクト開発を進めいていくことです。ソフトウェアが全てというわけではなく、あくまで一つの手段。ソフトウェアの持つ特長を理解して、手段として事業に活用していくことが求められます。

ざっくり言うと

ソフトウェアの持つ特長を理解して、それを事業に活かせる人材を育てること。それを活かせる組織であり、作っては壊す考え方を受け入れること。

課題

昔は良かったのだが、今は日本は取り残されているのではないか。

ビジネスモデルの変化や製造プロセスの大幅な変化に対応できませんでした。考え方が固定的だったり画一的なため、ユーザーが本当に欲しいモノを作れていないことが原因のようです。

例えば、サービスをプラットフォーム化する、またはハードウェアと連携してリアルにより近いサービスを提供することが勝ち筋として考えられます。

どうすればいいのか

デジタルトランスフォーメーションすなわちDX。ITを手段として捉え、新たな価値を生み出すことが目標です。

各ポジションによって取るべき行動は異なるが、ITによる小さな可能性でもわかりやすく表現していくことが大切に感じました。「言ってみたけども組織が変わらなかった」ではなく、実際にどれくらい便利なのか小さな発見でも実装して見せてみるべきです。「ソフトウェアの魅力を伝える」ことが必要です。

運用・改善のパートも初めから想定して計画できるようにしましょう。ソフトウェアの特性を活かすためにも、ないがしろにして進めてはいけません。完成したから提供して終わりではなく、公開後もユーザーの意図やフィードバックを汲み取り、ユーザーが本当に求めていたものを提供できるように取り組んでいくべきです。

ITは手段の一つであり、他にも方法はきっとあります。それらが必要になる場合もあるので、広い視野で捉えるようにしましょう。ときには組織の変革も必要で、文化ごと変わる必要があるかもしれません。できれば経営者やマネージャーが先頭に立って進められると良いです。

その結果

大きく会社やチームの文化が変わるかもしれません。そのような変化に対しても、寛容・積極的に取り組めるように成ることが重要だと思いました。これまでに築いてきた価値に縛られることなく、ユーザーとのやり取りの中で本当に求められているものを取り出し、サービスやプロダクトに反映させていく柔軟さを用意しましょう。

個人の努力ではなく、経営や文化と言った大きな集団の中でそれらが培われていくことが、これからの時代で活躍する秘訣のようです。

おわりに

経営する上での評価の参考や、個人のエンジニアのキャリアについての考察などもあり、マネージャーも現場も誰が見ても学びがある内容でした。

ソフトウェアファーストな文化のためには、個人の取り組みだけでなく企業の経営からの取り組みによる変革も必要なことがよくわかりました。さまざまな開発プロセスやフォーメーション、知識の説明・図解もあり、あまりITに詳しくない人にもわかりやすい内容でした。

ITにガッツリ携わっている人向けと言うより、これからITに関する取り組みを始める人であったり、経営や文化づくりが必要なポジションの人に読んでもらうといいと思いました。

カメラを持って出掛けたい「写真が上手くなる100のルールテクニック編」

Tue, 19 Nov 2019 00:00:00 GMT

写真を取るテクニックに関する本です。私も趣味で散歩したときなどにカメラで写真を取ります。全然いい写真が取れないので参考にしようと思い、図書館にて借りました。

初心者でもわかりやすいように単語の説明も載っており、カメラの基本機能もわかりやすく紹介されています。

100個のルールが載っているのですが、特に参考にしたいものを簡単に引用しています。興味のある方はぜひこの本を読んでみてください。

基本のカメラ設定に関するものが多いです。本にはもっと使いこなすためのテクニックも載っています。それほど実際の写真の例は多くないですが、さくっと読めて分かりやすかったです。

基本撮影モード

以下カメラの説明書にも十分に書いてあるものですが、わかりやすいので引用しています。絞りとシャーッター速度がそれぞれ設定されます。

P プログラムオート
絞りとシャッター速度が自動
A 絞り優先
絞りが任意、前後のボケとかを利用したいときに使うと良い。Avと表示されているものもある。
S シャッター速度優先
シャッター速度が任意。素早い動きをトリたいとか、意図的なブレが欲しい時とか。Tvと表示されるものもある。
M マニュアル露出
両方任意。こだわった撮影に適しており、構図やアングルを変えても設定がそのままなので、露出を一定に保つことができる。

ボケ表現

ボケの大きさは、絞り値、焦点距離、被写体と背景の位置、被写体までの距離によって決まります。

絞り値
絞りを開けるほどボケが大きくなる、F値を小さくするほど
焦点距離
望遠にするほど大きく、広角にするほど小さくなる
背景の位置
背景から遠いほど大きくなる
被写体との距離
被写体に近いほど大きくなる

露出と光線

順光
色がくっきり
逆光
シルエットに近くなる
斜光
陰影が強く出て立体感
フラット光
柔らかな階調になる

ホワイトバランス

晴天にすれば、見た通りの印象日書くなる。
曇り・日陰にすると、赤みが足される。
蛍光灯にすると、青みが足される。

ISO感度

カメラのセンサーが光を感じる度合い。

高いとシャッター速度も早くなり手ブレも減るが、画像がザラザラする。画質が劣化する。
低くすれば画質が向上するが、手ブレが起きやすいので三脚を使うと良い。

おわりに

100個のルールを全部憶えるのは難しいので、一つずつ試して見るのが良いかなと思います。実際にいい写真が撮れるか頑張ってみようと思います。ちょっと季節的に外出したくない気温ですが、頑張ります。どうしても寒かったら家の中で被写体を探します。

今回読んだ本はテクニック編となっていますが、通常編と構図編があるようです。そちらも合わせて読んでみたいと思いました。

SEによる図書館の話「システムエンジニアは司書のパートナー」

Fri, 15 Nov 2019 00:00:00 GMT

図書システムの開発に携わっていたSEによるWEBエッセイをまとめた本です。図書館に関するさまざまな話が載っており、開発に携わっていたSEならではの目線で描かれる話がとてもおもしろいです。

地方の図書館の実例や取り組みも紹介されており、一度訪れてみたいなあと思うものも多かったです。

SEのみの話でなく司書の苦労であったり工夫なども書かれており、図書館に対する考え方が変わるかも。身近にある図書館のいろんなサービスや仕組みに目が向くようになるかもしれません。

さまざまな図書館の取り組み

さまざまな図書館を見た上での取り組みの内容や特長など、訪れたからこそわかる情報が山盛りでした。現代ならではの新しい取り組みもあれば、地域とのつながりによる優しい取り組みもあり、図書館によって特長が異なるものばかりです。取り組みをでの困ったことや、仕組みなどの説明も簡単にされており、似たようなサービスを始めるのであれば参考になるかもしれません。

図書館の現場で発生するクレームの対応であったり、システムを作る上での困難など、図書館を利用していても発見できないような内容に興味を持ちました。SEとしてシステムを作ることでそれらを手助けできたり、より便利な図書館を作っていくのはとても楽しそうです。

電子書籍が発達してきたり、ネット上でのやり取りが中心になってきていることもあり、図書館のあり方も変わっているのだと思います。IT技術を持ったSEの関わり方は今まで以上に深く関わってきそうに思います。

SEからみた図書館のこれからの可能性も書かれており、アイデアの参考になりそうなものも多かったです。 WEBエッセイは結構昔のものもありますので、書かれた当時から時がたって更に進化した内容もあると思います。現在行われている図書館の新しいサービスなどを調べてみようかなと思いました。

おわりに

図書館のシステムを作るSEってとても面白そうだなあと思いました。学校の図書館のシステムなんかもつくったりするんでしょうか。興味が尽きないです。私は図書館が好きなのでということはもちろんですが、これからいろいろな進化をしていきそうな図書業界において、さまざまな取り組みが行われるのではないでしょうか。

地域とのつながりはもちろん、ITを使った取り組みもあったりして、いろいろなアイデアが生まれそうです。そんな図書館を支えるような仕事は面白そうだなあと興味を持ちました。

家の近所に図書館があります。また図書館にいきたくなりました。

「Atomic Design」で学ぶコンポーネントUI 設計

Thu, 14 Nov 2019 00:00:00 GMT

UI設計の「Atomic Design」という手法について書かれた本です。 Atomic Designとはざっくり言うと、小さいコンポーネントを組み合わせて大きなコンポーネントを作っていくという特長を持つ、設計フレームワークの一つです。一番小さな部分をAtomic すなわち原子として設計していきます。

アプリのUI開発において、学べる点が多そうだと思い手に取りました。

Reactをつかった実装例も掲載されています。結構厚めの本で内容は盛り沢山。UI設計に関わる人のみでなく、エンジニア・デザイナーにも学びが多い本でした。

実装例が豊富に掲載されており関連内容としてテストに関する内容も多く、とても参考になりました。 ReactをはじめとするWebプラットフォームでの開発はもちろん、ReactNativeによるアプリの開発にも大きく活かせると感じています。

概要

UI設計の現状
コンポーネントベースのUI開発
Atomic DesignによるUI設計
コンポーネント設計の実践
UIコンポーネントのテスト
現場におけるコンポネント・ベース開発のポイント

UI設計の現状

直感的なUI

直感的なUIについてわかりやすい定義がありました。
「UI is Communication」の著者 Everett N.McKayの定義だそうです。以下引用します。

UIの見た目から与えられる情報が適切なこと

UIが期待通りに動作すること

UIが効率的で最小の工数で目的を達成できること

UIが適切なタイミングでフィードバックを返すこと

ユーザーがミスを犯してもすぐに修正可能なこと

ユーザーが安心してアプリケーションを遷移できること

それ以外でストレスがないこと

css命名規則 BEM

Block、Element、Modifierの3つのパターンのクラスセレクターで実装するcssの設計手法。クラスセレクターを読むだけで要素の役割を把握できます。それでもCSSの言語的な仕様によって制限され、なかなかコンポーネント化による再利用には難易度があります。

Blockは独立しており再利用が可能なコンポーネント .menuや.search-formなど
Elementはコンポーネントを構成するパーツ .men__linkや.search-form__inputなど
Modifierは変化を加えることを示す .search-form__input_disableなど

コンポーネントベースのUI開発

メリット

コンポーネント単位でテストが可能
不具合のリスク・ポイントを減らせる
メンテナンスしやすい
解決する問題が小さくなる

コンポーネントは部品、つまり単語

UIとは会話です。コンポーネントは部品であり、会話における単語と通じる部分があります。複数の単語の組み合わせで会話ができるのと同じです。

同じ単語を異なる意図・用途で使ったり、それと似たような感覚です。

コンポーネントの4つの特長

カプセル化されている
置換可能である
再利用可能である
別のコンポーネントを組み合わせて作成可能

単一責任の原則と関心の分離が重要だそうです。

Atomic DesignによるUI設計

Atomic Designの粒度

Atoms 原子
Molecules 分子
Organisms 有機体
Templates テンプレート
Pages ページ

うち、上記3つは化学の用語を用いており、それらは開発者が認識する用語になっているそうです。それ以外の2つはクライアントなどにも共有すべきものという切り分けになっています。

Molecules か Organisms か

粒度によってはややこしいものもある印象です。

独立して存在できるものは「Organisms」、他のコンポーネントの機能を助けるものは「Molecules」に該当します。
動作を行うもののみはMoleculesで、その対象となる情報も含めたものがOrganismsといったところですかね。

コンポーネント設計の実践

本の例では、node,yarn,Storybookを使って実装をしています。StorybookやReactの使い方も丁寧に書かれているので、npmを利用したことがあるくらいの経験があれば十分に試すことができる優しさです。

ここからサンプルのソースコードが多くなります。私が思っていたよりもガッツリなので、開発をやっている人にはとてもおもしろい内容です。逆に設計が中心でプログラミングの役割を持たない人には、すこし重たいかもしれません。できれば目を通しておくと役に立つと思います。

UIコンポーネントのテスト

テストのやり方や実装方法が書かれています。テストフレームワークJestを使ったテストのやり方が書かれており、大いに役に立ちました。

コンポーネント設計はテストや管理もやりやすくなります。そのあたりの恩恵をもれなく手に入れるために、ぜひこのあたりは開発者に読んでほしいと思いました。

ユーザービリティテスト

Lighthouseの利用に加えてaXeの利用がおすすめ。
Chromeの拡張機能として公開されています。developer toolからチェックができ、報告の内容・修正方法もわかりやすく便利でした。対象箇所のハイライト・修正案の提示など詳細な報告が得られます。

私は試しませんでしたが、Jestで実行させることもできるようです。そうなると逐次実行する必要なくためとても便利です。時間があったら試してみます。

Chrome拡張機能 aXe のリンク

現場におけるコンポネント・ベース開発のポイント

実際の現場で起こりがちな、トップダウン対ボトムアップの構図についての考察がされています。コンポーネント設計にはそれぞれの協力が必要となり、開発フローの変更も求められることがわかります。

おわりに

概念的な話より実装的な内容が多かったように思います。サンプルコードもたくさんありますし、デザイナーよりもエンジニアよりの内容だったのか私は興味をもてました。

テスト関連の情報も豊富に載っています。今まで取り組んでいなかった方もテストをしっかり行うという目的で、Atomic Designは良い手法なのではないかと感じます。

ソースコードがあまりにも無法状態なため、どこからテストをかけばいいかわからないというプロジェクトも多いと思います。そういったものも解決できるように、予めテストや運用・保守も視野に入れて設計の段階から取り組むことが大切です。

欧文フォントを漫画で学ぶ「となりのヘルベチカ」

Thu, 07 Nov 2019 00:00:00 GMT

欧文フォントが擬人化した世界で、フォントについて学べるマンガになっています。フォントの基礎知識と言うよりは、取り上げられているフォントの由来や特徴などを知ることが出来ます。

全般4コママンガのテイストになっています。物語は繋がっていて進んでいきますが、さくっと読めますのでわかりやすいです。

フォントの擬人化はそれっぽい性格で、見た目も特徴的になっておりすんなりと記憶できそうでした。それぞれのフォントの個性が表現されていて、可愛らしいデザインです。一つ一つのフォントのエピソードはそれほど多くありませんが、十分お気に入りフォントに出会えるような内容になっています。

フォントの成り立ちはもちろん、実際に利用されている例や名前の由来なんかも書かれています。意外と知らない情報が多く、フォントの歴史の部分なんかは初めて知った内容ばかりでした。フォントが使われている映画作品のネタなんかも使われており、知っている人はちょっと楽しいかもしれません。

この本を読んだ後であれば、日常のさまざまな場所で使われているフォントの違いに気づくことができるようになりそうです。

取り上げられているフォント

設定は主人公が書体の学校？のような世界に入ってしまう物語になっています。以下のようにクラス分け・棟分けされているらしく、それぞれ仲良く暮らしているようです。

サンセリフ体

Helvetica ヘルベチカ
Futura フーツラ
Gill Sans ギル・サン
Arial アリアル
Franklin Gothic フランクリン・ゴシック
Impact インパクト
Frutiger フルティガー
DIN ディン
Optima オプティマ
Gotham ゴッサム

ローマン体

Caslon キャズロン
Garamond ギャラモン
Times New Roman タイムズ・ニュー・ローマン
Bodoni ボドニ
Didot ディド
Clarendon クラレンドン
Rockwell ロックウェル
Centaul セントール
Jenson ジェンソン

その他

Zapfino ツァッフィーノ
Mistral ミストラル
Comic Sans コミック・サン
Trajan トレイジャン
Peignot ペイニョ
Fette Fraktur フェッテ・フラクトゥール

おわりに

フォントに興味がある人もそうでない人も、マンガなので楽しく読めると思います。

お気に入りのフォントがある人はどのように表現されているか見てみるといいと思います。自分のイメージ通りかどうか確かめてみるとおもしろいです。お気に入りのフォントが特にない人も、擬人化されたフォントを見てお気に入りを探せるのではないでしょうか。

一読した後は、出てきたフォントをデザインソフトとかで使ってみるとおもしろいですよ。

よく使うLinuxコマンドのメモ

Wed, 06 Nov 2019 00:00:00 GMT

今回はLinuxのよく使うコマンドをメモとして残します。簡単なものは覚えているのですが、オプションを忘れて検索することが多いです。検索して使えるので特に問題ないですが、せっかくなら一箇所にまとめておきたいのでこの記事を作ります。

大きくはsed と grepのことを書き残そうと思ったのですが、思ったよりも書きたいコマンドが多かったです。一個ずつに分けたほうが見やすいですが、思い出すためのメモなので気にしません。この記事を見れば使い方を思い出せるのが目的です。

新しいものをやよく使うものが増え次第、ここに追加していくつもりです。
多すぎて見にくいので整理方法も考え中です。検索できるようにすればいいのか。

ls

ls -la

出力内容

ファイルタイプ
パーミッション
ハードリンク
オーナー
グループ
サイズ
タイムスタンプ
ファイル名

オプション

-t # 更新時間順
-S # ファイルサイズ順
-X # 拡張子でまとめる
-R # 再帰的に表示する、見づらいけど
-m # カンマ区切りで出力

使うとしたら上記でしょうか。

stat

stat 001.txt
ファイルのステータスや情報を確認します。

オプション

-f # ファイルシステムの情報を表示
-t # 簡易な表示にする

file

file 001.txt
形式を確認。拡張子からではなく中身から判別。

file -z
圧縮状態の元の形式を確認できます。

mv

mv 001.txt bac
ファイルやディレクトリの移動。名前変更にも使います。

オプション

-i # 上書きの確認
-n # 上書き出来ない

cp

cp 001.txt bac
ファイルやディレクトリをコピーします。

オプション

-r # 再帰的にコピーできます。
-s # シンボリックリンクを作れます。

touch

touch 001.txt
タイムスタンプの更新、なければ空のファイルを作成します。

tee

ls | tee 01.txt | less
標準出力に流しながらファイルに出力できます。

ls | tee 01.txt 02.txt 03.txt 複数のファイルに出力したい場合に使えます。

rsync

rsync -av dev/ backup/
変更を同期します。ローカルでもバックアップとかに使えますが、ほとんど使わないと思います。

ln

ファイルのハードリンクとシンボリックリンクを作ります。

ln -s ファイルリンクでシンボリックリンク
ln ファイルリンクでハードリンク

rm

rm 01.txt
ファイルを削除します。

対象ファイル名は*で副数の任意文字、?で1文字の任意文字を定義できます。

rm -r dir
ディレクトリを再帰的に削除する場合です。

mkdir

mkdir dev
ディレクトリを作成します。
オプションでパーミッションの設定とかも出来ますが、私は作ってから変更します。

mkdir -pにすると親ディレクトリが無い場合も階層ごと作成できて便利です。

cd

カレントディレクトリを移動

cd - にすると直前のディレクトリに戻ることができる。

オプション

-P # シンボリックリンクではない物理的な場所に移動

tar

tar -czf a.tgz 01.txt
アーカイブを作成、圧縮します。

tar -xzf a.tgz
アーカイブを展開します。

アーカイブにしたものが.tar。それを圧縮したものが.tgzや.tar.gzになります。

オプション

-c # 作成
-x # 展開
-z # gzip圧縮
-v # 対象ファイルのリストを表示
-f # アーカイブファイル名を指定

ssh

ssh xxx
sshで接続

ssh -l user xxx
ssh user@xxx
ログイン名を指定して接続

ssh -l user xxx ls -la > 01.txt
ログインしてコマンドを実行。結果はローカルのテキストファイルに出力。接続先ではなく接続元ということ。

オプション

-p # ポートを指定
-l # ユーザー名を指定
-i # 公開鍵を指定

alias

alias
定義されているエイリアスを表示します。

alias xxx
定義されているエイリアスxxxを表示します。

alias xxx='ls -la'
エイリアスxxxを作成します。
一時的な定義なので、よく使うものは.bashrcに定義することでいつでも使えます。

alias -p
定義されているエイリアスを定義する書式で出力します。
.bashrcに定義するときや再利用に使います。

unalias

unalias xxx
定義されているエイリアスxxxを削除します。

whoami

自分のユーザー名を表示

groups

自分が所属しているグループを表示

pwd

カレントディレクトリを表示

オプション

-P # シンボリックリンクではない物理的な場所を表示

type

type xxx
コマンドの起動先を表示します。whichみたいな感じです。

オプション

-a # 該当をすべて表示、通常一番上が実行される
-P # PATH内のみ対象にする、whichと同じ
-t # 種別を表示

echo

echo $LANG
定義されている変数の中身を出力します。

pushd

pushd dir
カレントディレクトリをディレクトリスタックに追加、さらにカレントディレクトリを移動します。
-n でスタックへの追加のみにできます。その場合は移動しません。

popd

popd
ディレクトリスタックから一つ取り出して移動します。
-n でスタックの削除のみにできます。その場合は移動しません。

dirs

dirs
ディレクトリスタックを表示します。

オプション

-c # 空にする
-p # 行に分けて表示
-v # 番号付きで表示

chmod

chmod 774 001.txt
ファイル、ディレクトリのパーミッションの変更。所有者、グループ、その他の順に設定。数値は以下を足します。 4 # 読みこみ 2 # 書き込み 1 # 実行

他の書き方

以下の書き方もできる。

# chmod ユーザー 追加か解除か アクセス権限 ファイル名
chmod o-x 01.txt # その他ユーザーの実行権限を解除
chmod u+r 01.txt # 所有者の読み取り権限を追加
chmod g+w 01.txt # グループの書き込み権限を追加

オプション

-v # 実行結果を表示
-R # 再帰的に実行

chgrp

chgrp group 001.txt
ファイル、ディレクトリの管理グループを変更します。

オプション

-v # 実行結果を表示
-R # 再帰的に実行

chown

chown user 001.txt
ファイル、ディレクトリの管理者を変更します。

オプション

-v # 実行結果を表示
-R # 再帰的に実行

groupadd

groupadd group
グループを作成

gpasswd

gpasswd -a user group
グループにユーザーを追加

gpasswd -d user group
グループのユーザーを解除

gpasswd group
グループのパスワードを設定

groupmod

groupmod -n newName oldName
グループ名を変更

groupmod -g newID oldName
グループIDを変更

groupdel

groupdel group
グループを削除

useradd

useradd user
ユーザーを作成します。adduserのほうが便利です。

adduser

adduser user
ユーザーを作成します。対話式にパスワードなどの設定が出来ます。

usermod

usermod user
ユーザーの情報を変更します。

usermod -l newuser olduser
ユーザー名を変更します。

オプション

-L # ユーザーをロック 
-U # アンロック
-l # ログイン名を変更
-p # パスワードを変更
-g # プライマリーグループを変更
-G # セカンダリーグループを変更
-G-a # セカンダリーグループを追加

userdel

userdel user
ユーザーを削除

userdel -r user
ホームディレクトリも削除

ps

実行中のプロセスを表示します。
PIDを確認してkillコマンドで終了させるとかですね。

kill

kill 111
PID 111を終了

tail

tail -f 001.log

ファイルの末尾を表示します。デフォルトは10行です。

-n 5 で行数の指定が可能。 -fでファイルの更新を監視できます。止めるときは<C-c>です。

head

ファイルの先頭を表示します。tailの逆。

head -n 8 001.log

cat

cat 001.txt
cat 001.txt 002.txt > 0102.txt

簡単に内容を確認する際に使います。別のファイルに流したり、結合させるのがもともとの役目の様子です。

オプション

-n # 行番号
-s # 連続した空行をまとめる

他にもプションはあるけど、そんなに使わないです。

less

パイプでつなげて使うとか。コマンド | less

ls -la | less

ファイルを指定してとか。

less 01.txt

オプション

-s # 連続した空行をまとめる
-S # 折り返さない
-N # 行番号を表示
-~ # 末尾以降の~チルダを表示しない

使うとすれば上記か。

キー操作

操作はjkとGとg。
dで半画面進む、uで半画面戻る。
/で検索、nとNで一致候補を前後、qで終了。

find

find ./ -name '01.txt'
ファイル名で検索します。

オプション

-type d # ディレクトリが対象
-type f # ファイルが対象 
-type l # シンボリックリンクが対象

grep

grep xxx 01.txt
ファイル中の文字列 xxx を検索

ls -la | grep xxx
コマンドの出力から文字列 xxx を検索

オプション

-G # 正規表現を使用
-r # 再帰的に検索
-5 # 前後5行を表示
-n # 行番号
-l # ファイル名のみ表示

xargs

xxx | xargs yyy
xxxの実行結果を受け取り、yyyの引数にして渡します。ややこしいけどとても便利。単体でなく、使えるパターンだけ覚えておけば良い。

xxxの実行結果が末尾に「01.txt 02.txt 03.txt」とつけられるイメージ

sed

cat ./01.txt | sed -e 's/xxx/XXX/g' > ./02.txt
sed -e 's/xxx/XXX/g' ./01.txt > ./02.txt

オプション-iをつけないと出力するだけ、付けるとファイルを上書きします。 -eはコマンドを指定するもので省略できます。複数の操作を行う場合、その度に必要。

grep 'emotion/core' -rl src/ | xargs sed -i -e 's/emotion\/core/emotion\/styled/'

よく使うのは置換のとき。emotion/coreをemotion/styledに置換しました。

オプション

-i # 結果を標準出力しないで上書き
-i.bak # 上書き前を拡張子をつけてバックアップ

-e # 処理内容を指定
-e 's/xxx/XXX/g' # 正規表現で置換
-e '30,31d' # 30,31行を以外を出力

-n # 標準の出力がなくなる -pのコマンドのみ出力
-n -e '30p' # 30行を出力

tree

tree
ツリー形式でファイルディレクトリを表示します。

tree -f -i
ツリー構造にしないでパスを表示します。ファイルリスト作るときに便利です。

オプション

-a # 隠しファイルも対象
-d # ディレクトリのみ
-L 2 # 2階層まで
-i # ディレクトリも出力
-f # 表示をツリー状にしない

apt

apt install xxx
パッケージ管理コマンド。主なコマンドは以下

list # パッケージ一覧を表示
search # パッケージを検索
show # 特定のパッケージの情報を表示
install # 指定パッケージをインストール
remove # 指定パッケージを削除
autoremove # 使われていないパッケージを削除
update # 利用可能パッケージの一覧を更新
upgrade # パッケージを更新
full-upgrade # パッケージを更新、不要なものは削除

curl

curl url > 01.txt
urlにHTTPリクエストを行います。

curl -X POST url -d 'name=user&data=text' > 01.txt
urlにHTTP POST リクエストを行います。こうなると何かしらのアプリケーション使ったほうがいいです。ブラウザ拡張とか。

xdg-open

xdg-open . 現在のディレクトリをデフォルとアプリケーションで開く。ファイル名を指定すればデフォルトアプリケーションでファイルを開きます。

おわりに

基本的にコンソールでの作業がほとんどなのでこれらを身につけられるととても快適になります。サーバエンジニアの最初の一歩でしょうか。

また新しいものや気になるものがあったら追記していく予定です。
awkに関する書籍を読んでいるので、それについても後日まとめる予定です。

UbuntuのLTSも18.04がリリースされたので頃合い見計らってアップデートしたいです。

Figmaでショートカット一覧を表示する

Mon, 28 Oct 2019 00:00:00 GMT

私はデザインやプロトタイプ、簡単な画像素材の作成にFigmaを利用しています。無料で使えますし、便利な機能も揃っているのでほとんど不自由なく使えます。

キーボード・ショートカットを探していたときに、ショートカットコマンドのチートシートを表示する方法を見つけたのでご紹介します。Ctrl + Shift + ?です。

ショートカットの解説や紹介記事等ググればいっぱい出てきます。しかし、このチートシートで探したほうが簡単でわかりやすいです。こっちのほうがおすすめです。

ショートカットコマンド一覧を表示

Ctrl + Shift + ?を押すと、画面下部にチートシートが表示されます。

チートシートの表示

複数タブを切り替えて確認できるチートシートが表示されます。

利用したものは青く表示されています

利用したことのあるコマンドは青くなっており、ゲーム感覚でチートシートを憶えることができる仕組みです。ざっと見てみた所、知らないショートカットがたくさんあり、私が利用したことのあるコマンドは全体の10分の1くらいでした。

おわりに

チートシートを使えば画面に表示しながら利用できるためとても便利です。一通り使ってみるも良し、普段から表示しっぱなしにするのも良しです。私も頑張って覚えていこうと思います。とりあえずCtrl + Shift + ?でチートシートを表示できることを覚えておけば、一々調べなくて良いです。

ちなみに、私はLinuxを使っているためFigmaのデスクトップ版が利用できません。ずっとブラウザ版を利用しています。

フォントはGoogleフォントが利用できるので便利ですが、自分でインストールしたフォント等を利用するのがちょっと難しいです。まあ、それ以外は大体同じように利用できている？っぽいのでそれほど困っていません。

Linux向けのデスクトップアプリ版Figmaが利用できるようになってほしいとちょっと思っています。

「Expo JavaScript Style Guide」を読んでみる

Fri, 25 Oct 2019 00:00:00 GMT

Expoのコーディングスタイルガイドを読んで簡単に訳してみました。

Expoの開発へ参加する場合のルールやコーディングガイドが公開されています。他のサービスでもこういったものは公開されていることがあると思います。

Contributing to Expo
Expo JavaScript Style Guide

個人開発でやっていると独自ルールになってしまい、後からソースを見たときに混乱するような状態になっていることがあります。

よく利用するサービスやシステムのルールに従うことで綺麗なソースを保つことも出来ますし、今時の現場のルールに触れることもできて良いのではないかと考えました。

私がよく利用していて、かつ開発も活発なExpoのjsコーディングルールを読んで訳していこうと思います。

概要

Expo JavaScript Style Guide

Modern JavaScript
ESLint and Prettier
- Editor Integration
Formatting
- Prettier
- Comments
- Imports
Naming
- Classes, functions, and variables
- Async functions
- Private variables
- Boolean names
Examples
BabelO

Modern JavaScript

jsはなるべく新しい、ES20xx仕様の安定バージョンを使用する。
「leading edge」すなわち先端の近く、「bleeding edge」最先端ではない。

ESLint and Prettier

Editor Integration

ESLintのプラグインを紹介
Vimの場合は以下

Vim: Syntastic:
https://github.com/vim-syntastic/syntastic/blob/master/syntax_checkers/javascript/eslint.vim
Configure it to use the nearest available copy of ESLint by searching up node_modules

Syntasticのドキュメントを読み込んでいくとtypescript用のチェッカーは削除されているらしい。
tsuquyomiというプラグインを使ってくださいって書かれてました。

ESLIntとvim-syntasticをvimで使えるようにする

ESLintのインストール
```
npm install -g eslint
```

vimで使えるようにする

NeoBundle 'vim-syntastic/syntastic'
" デフォルトの設定
set statusline+=%#warningmsg#
set statusline+=%{SyntasticStatuslineFlag()}
set statusline+=%*
let g:syntastic_always_populate_loc_list = 1
let g:syntastic_auto_loc_list = 1
let g:syntastic_check_on_open = 1
let g:syntastic_check_on_wq = 0
let g:syntastic_javascript_checkers = ['eslint']

Formatting

Prettier

コードのフォーマットにはPrettierを使用。
Prettier

設定ファイルはexpoのリポジトリにあります。
.prettier

ファイル単位でPrettierを無効にする設定ファイルもexpoのリポジトリにあります。
.prettierignore

Prettierをvimで使えるようにする

Prettier のインストール
```
npm install -g prettier
```

vimで使えるようにする
vimrcに以下を追加、<leader>pで発動する

NeoBundle 'prettier/vim-prettier'
" expoのリポジトリにあるprettierrcを参照
let g:prettier#config#print_width = 100
let g:prettier#config#single_quote = 'true'
let g:prettier#config#jsx_bracket_same_line = 'true'
let g:prettier#config#bracket_spacing = 'true'
let g:prettier#config#trailing_comma = 'es5'

Comments

以下サンプルを引用

/**
 * Gets the latest version of Android that's been released. This is a version
 * string like 7.1 instead of the code name Nougat.
*/
function getLatestAndroidVersion() {
  // Keep this logic in sync with Google's versioning scheme
  return maxBy(getAndroidVersions(/* includePrereleases */ false), linearizeSemver);
}

行でのコメントアウト使う
クラスや関数や連想配列の上ではブロックコメントを使う
行途中ではインラインのコメントも使う
コメントアウトされたコードを削除してからGitHubにプッシュ

Imports

importとrequireを次の順序でグループ化、ソートする。

importが先、requierが後
Unassignedが先、assignedが後
nodejsビルトインが先、エイリアスのある内部モジュールが次、相対モジュールが後

import 'side-effect';

import invariant from 'invariant';
import Expo, { Audio } from 'expo';
import path from 'path';

import HomeScreen from '../screens/HomeScreen';
import Colors from '../style/Colors';
import calculateViewport from '../style/calculateViewport';
import LoginButton './LoginButton';

const assert = require('assert');

インポートされたモジュールの名前でソート、割り当てられた名前ではなく元の名前。
ASCII順なのでA-Za-zの順にする。

import Z from 'Z';
import b from 'x';
import a from 'y';
import p from '@scope/package';

デフォルトのインポートが先、名前空間でのインポートが次、名前付きインポートが後。

import a, * as b, { c } from 'module';

Naming

検索しやすい名前を心がける

Classes, functions, and variables

すべての名前にキャメルケースを使用。
クラスとコンストラクター関数は大文字初め、他は小文字で始める

Async functions

非同期で完了する場合は最後に「Async」を付ける
関数自体に「async」が設定されていなくても、同じような動作をする場合は「Async」を最後に付ける
同期作業を行うが、それでもpromiseを返すことがある場合は「Async」を省略してよい

Private variables

プライベートに使う変数はアンダースコアを付ける。

Boolean names

bool変数には「is」とか動詞を先頭につけて命名する。deletedではなくisDeletedにする。

Examples

Expo JavaScript Style Guideを参照

Babel

Babelをつかって新しいjsの機能を有効にしている。対象はfinalized version of the JavaScript standard.

おわりに

これからjs書くときはこのルールにしたがってプログラミングをしていこうと思います。
ESLint と Prettierをvimで使えるように設定しました。ルールを意識しながらプログラムを書くことはもちろんですが、これらの便利なツールでチェック・整形していくことができます。そう考えるとそれほど面倒な作業もなさそうです。

あとは、すでに書いてあるものもルールに従ってリファクタリングしよう、そう思いました。

TypeScriptを学ぶジェネリックとクラス関連

Thu, 24 Oct 2019 00:00:00 GMT

TypeScriptを学ぶ型定義の基礎の続きです。クラス関連の機能が主な内容です。

TypeScriptの基礎的なことを学ぶので、忘れないように残していきます。目標としては自分が作っているReactNative製のアプリや、Gatsbyを利用しているこのブログに活かしていく予定です。

概要

ジェネリック
インターフェイスの実装
クラス
名前空間の利用

ジェネリック

プログラミングの際には型が決められない、関数実行時にはデータ型が決まっている。 anyでもいいけども、例えば「引数と戻り値の型は一致してほしい」となどの場合に動的に任意のデータ型を指定する仕組み

// <T>の形式で指定、T以外の任意の文字でも良い
function getData<T>( value : T ) : T {
    処理
}

// 関数呼び出しの際にデータ型numberで指定
data1 = getData<number>(1);
// データ型booleanで利用
data2 = getData<boolean>(true);

クラスでのジェネリック

クラスでもジェネリックは利用可能

// class クラス名<T> {
//     プロパティ名 : T ;
//     メソッド名 ( 引数名:T ): T {
//         処理
//     }
// }

// let 変数名 = new クラス名<データ型>();

複数定義して交差型も可能

function getData<T,U>( value : T , param : U ) : T & U {
    処理
}

非同期処理のジェネリック

Promiseを返す非同期処理の返り値にも型を定義可能。 resolveで返される戻り値のデータ型を定義する。

// function 非同期関数名 (引数) {
//     return new Promise<データ型>((resolve,reject) => {
//         非同期実行文
//         if ( 条件 ) {
//            resolve(戻り値);
//         }else{
//            reject(エラー);
//         }
//     });
// }

// async function Exec(){
//     let data1 = await 非同期関数名(引数1)
//     let data2 = await 非同期関数名(引数2)
// }

インターフェイスの実装

クラスのデータ型のみを定義できる。クラスに持たせるプロパティとメソッドの組み合わせに名前とデータ型を定義できます。異なる処理を共通のインターフェースとして取扱いやすくする仕組。

// インターフェイスの定義
// interface インターフェイス名{
//    プロパティ:データ型;
//    メソッド(引数:引数のデータ型): 戻り値のデータ型;
// }

// インターフェイスの実装
// let 変数名 : インターフェイス名;
// function 関数名(引数: インターフェイス名) {};

// クラスで実装
// class クラス名 implemets インターフェイス名 {
//     プロパティ名:データ型;
//
//     メソッド(引数:引数のデータ型):戻り値のデータ型 {
//         処理
//     }
// }

// 複数のインターフェイスを実装
// class クラス implemets インターフェイス1,インターフェイス2 {}

インターフェイスも継承できる

クラスのようにインターフェイスも継承して定義することが出来ます。元の定義を引き継ぐことが出来ます

// interface インターフェイス1 extends インターフェイス2{
//     プロパティ: データ型;
// }

クラス

abstract クラス

abstructが指定されたクラスは継承可能だが、そのままnewでオブジェクトを作成できません。メソッドのみ実装していて、プロパティは継承先で実装する時などにりようできます。

abstruct class Name {

}

// 以下はエラー
let data = new Name();

メソッドのオーバーライド

jsとは異なり引数などのチェックが入ります。継承したメソッドをオーバーライドする場合は、元のメソッドと同じ名前、引数、戻り値のデータ型が一致しないとオーバーライドできない。

保護 public privete protected

他の言語では利用できる機能です。

publicがクラスの外でも利用が可能
privateとprotected はクラスの外から利用不可
protectedは継承したクラスで利用可能
privateは継承したクラスでも利用不可

読み取り専用readonly

クラスのプロパティを参照できるが、変更できないようにする。コンストラクターでの初期化以外では値の変更を受け付けない。

// public readonly プロパティ: データ型;

名前空間の利用

export などで使われているもの。別の名前空間に分けることで同じ名前のクラスを定義できる。名前空間外から利用するためにexportの指定が必要。

// namespace 名前空間 {
//     export class クラス名{}
// }

// namespace 名前空間2 {
//     export class クラス名{}
// }

名前空間を別ファイルから利用する

名前空間の前にexportを指定します。

// export namespace 名前空間 {
//    export class クラス名 {}
// }

ほかファイルからの参照

// import * as 参照名 from "./ファイル"

// import {名前空間} from "./ファイル"

おわりに

クラス関連の便利な機能を学びました。他の言語では普通に使えたりするものが多く、これらが利用できるように成るTypeScriptはとても便利なように思います。ほかの言語からの移行などもやりやすくなりそうです。

基本的にはビルド時にチェックされエラーが出るというものです。エラーを無視してデプロイすれば、保護を無視して実行できるようなものが多いので注意が必要です。

他にも機能があるので、少しずつ読み進めていこうと思います。
https://www.typescriptlang.org/

React Native Paper 「Colors」の色見本

Thu, 24 Oct 2019 00:00:00 GMT

個人的にReactNativeでのアプリ開発によく使っている「React Native Paper」のメモです。
React Native Paper

Paper is a collection of customizable and production-ready components for React Native, 
following Google’s Material Design guidelines.

とのことですので、Googleのマテリアルデザインガイドラインに則ったUIが簡単に利用できます。クロスプラットフォーム対応しており、OSによる機能の差異をかなり吸収してくれます。

ReactNativeがそもそもクロスプラットフォームに対応しているのですが、まだ思ったよりもOSごとに処理や設定を分ける必要があります。その辺まるごと抑えてくれるので便利です。

TextInputやButton、Modalなんかも実装されていますし、DialogとかMenu、Headerなんかも簡単に実装できます。
今回は使う際に調べるのがめんどくさいと思っていた、Colorsの色見本を作成しました。

定義

Colorsは定数として定義されている色を取得します。自分で定数として記述すればいいのですが、簡単に使えてるのでたまに利用します。

githubのソースコードに定義の内容が書かれています。
github

ただ色の見本がないので、どんな色なのかがここではわかりませんでした。

ざっくりの使い方

定義の内容は以下が例

export const red50 = '#ffebee';  
export const red100 = '#ffcdd2';  
export const red200 = '#ef9a9a';  
export const red50 = '#ffebee';

ですので、importして該当する色名を呼べば完了

import {Colors} from 'react-native-papre';
~~~
    <Text style={{color:Colors.red300}}>赤色のテキスト</Text>

色見本

githubの定義から色のサンプルを作りました。

red50

red100

red200

red300

red400

red500

red600

red700

red800

red900

redA100

redA200

redA400

redA700

pink50

pink100

pink200

pink300

pink400

pink500

pink600

pink700

pink800

pink900

pinkA100

pinkA200

pinkA400

pinkA700

purple50

purple100

purple200

purple300

purple400

purple500

purple600

purple700

purple800

purple900

purpleA100

purpleA200

purpleA400

purpleA700

deepPurple50

deepPurple100

deepPurple200

deepPurple300

deepPurple400

deepPurple500

deepPurple600

deepPurple700

deepPurple800

deepPurple900

deepPurpleA100

deepPurpleA200

deepPurpleA400

deepPurpleA700

indigo50

indigo100

indigo200

indigo300

indigo400

indigo500

indigo600

indigo700

indigo800

indigo900

indigoA100

indigoA200

indigoA400

indigoA700

blue50

blue100

blue200

blue300

blue400

blue500

blue600

blue700

blue800

blue900

blueA100

blueA200

blueA400

blueA700

lightBlue50

lightBlue100

lightBlue200

lightBlue300

lightBlue400

lightBlue500

lightBlue600

lightBlue700

lightBlue800

lightBlue900

lightBlueA100

lightBlueA200

lightBlueA400

lightBlueA700

cyan50

cyan100

cyan200

cyan300

cyan400

cyan500

cyan600

cyan700

cyan800

cyan900

cyanA100

cyanA200

cyanA400

cyanA700

teal50

teal100

teal200

teal300

teal400

teal500

teal600

teal700

teal800

teal900

tealA100

tealA200

tealA400

tealA700

green50

green100

green200

green300

green400

green500

green600

green700

green800

green900

greenA100

greenA200

greenA400

greenA700

lightGreen50

lightGreen100

lightGreen200

lightGreen300

lightGreen400

lightGreen500

lightGreen600

lightGreen700

lightGreen800

lightGreen900

lightGreenA100

lightGreenA200

lightGreenA400

lightGreenA700

lime50

lime100

lime200

lime300

lime400

lime500

lime600

lime700

lime800

lime900

limeA100

limeA200

limeA400

limeA700

yellow50

yellow100

yellow200

yellow300

yellow400

yellow500

yellow600

yellow700

yellow800

yellow900

yellowA100

yellowA200

yellowA400

yellowA700

amber50

amber100

amber200

amber300

amber400

amber500

amber600

amber700

amber800

amber900

amberA100

amberA200

amberA400

amberA700

orange50

orange100

orange200

orange300

orange400

orange500

orange600

orange700

orange800

orange900

orangeA100

orangeA200

orangeA400

orangeA700

deepOrange50

deepOrange100

deepOrange200

deepOrange300

deepOrange400

deepOrange500

deepOrange600

deepOrange700

deepOrange800

deepOrange900

deepOrangeA100

deepOrangeA200

deepOrangeA400

deepOrangeA700

brown50

brown100

brown200

brown300

brown400

brown500

brown600

brown700

brown800

brown900

blueGrey50

blueGrey100

blueGrey200

blueGrey300

blueGrey400

blueGrey500

blueGrey600

blueGrey700

blueGrey800

blueGrey900

grey50

grey100

grey200

grey300

grey400

grey500

grey600

grey700

grey800

grey900

black

white

おわりに

他にも便利なコンポーネントはがたくさん用意されているので、そちらも機会があれば紹介します。 React Navigationと合わせて利用すればダークモードなどテーマ対応もできる様子です。その部分はこれからアプリへの実装を進めようと考えています。

Vimでよく使う正規表現

Thu, 24 Oct 2019 00:00:00 GMT

vimでよく使う正規表現の書き方のメモです。

正規表現は便利ですが覚えるのは難しいです。特にVimは他のアプリと異なるエスケープのルールがあるので混乱しがちです。 \vでモード指定することも出来ますが、私はデフォルトで使うのが好みです。

あくまでも自分用メモです。参考になるようでしたら真似してみてください。
新しい正規表現のテクニックや便利なパターンを見つけたら追記していくつもりです。

概要

正規表現を用いた置換
エスケープが必要なもの
修飾子オプション
検索文字列のエスケープ

正規表現を用いた置換

基本の使い方

:s/hoge/huga/
:s/hoge/huga/g
:%s/hoge/huga/
:10,20s/hoge/huga/

一つずつ確認する

末尾にcを付けると対象を確認しながら置換できる。
yで置換、nで次の候補へ。qで終了、aは以降全部置換、lは置換して終了。

:%s/hoge/huga/gc

後方参照として置換に利用

エスケープが必要な文字にちょっと注意。 \1,\2で置換先で参照できる。後方参照。

:s/^hoge\(.\+\)$/huga\1/

&はマッチ全体

事前に検索

直前の検索の結果が自動的に利用できます。検索に一致した部分をすべて置換する。

/hoge
:%s//huga/g

<C-r>レジスタを使って入力してもいいと思います。

エスケープが必要なもの

\+
\?
\{1,3}
\<the\>
\( \)
\(aaa\|bbb\)
\%( \)

最後の%付けるのは後方参照しないようにするため。その結果、処理が早かったりする。後方参照は多分9個までなのでそこにも影響。

特殊な文字

\s 空白文字
\d [0-9]
\x [0-9A-Fa-f]
\o [0-7]
\w [0-9A-Za-z_]
\h [A-Za-z_]
\a [A-Za-z]
\l [a-z]
\u [A-Z]
大文字にすると逆になり、それ以外にマッチする
\_sにすると改行を含む文字にマッチする

\e Esc
\t Tab
\n 改行
\r CR
\b BS

修飾子オプション

大文字小文字の厳密化

大文字小文字を厳格に区別するためには\Cを付ける。実は最初でなくてもどこにつけても良い。

:%s/\CHoge/Huga/g

モード

4つのモードがある。

magic
nomagic
very magic
very nomagic

\vを付けることで、very magic モードとなり、他と同様な文法で書くことができるという認識です。

:s/\v^hoge(.+)$/huga\1/

検索文字列のエスケープ

\や/を初めとして、文字列として使うにはエスケープしないといけない文字があります。

escapeスクリプトを使って便利に変換する方法が以下です。

レジスタｕの中身の\と/をエスケープする
1. 対象のURLをレジスタuにヤンク
2. / で検索プロンプトを表示
3. <C-r>=でExpressionレジスタのプロンプトを表示
4. =escape(@u,\/)を入力してリターン

おわりに

モードを変更すれば他のアプリケーションと同様な文法で書くことも出来ますし、設定でそれをデフォルトにすることもできます。

私は好みでデフォルトのVimルールをなるべく使っています。複雑な正規表現書くときは\v使ったほうがスッキリできるので良いと思います。

App Storeの審査でアプリの公開を却下された件 -テスト広告編-

Wed, 23 Oct 2019 00:00:00 GMT

昨日 App Storeの審査でアプリの公開を却下された件 -スクリーンショット編- という記事をアップしましたが、実は他にも似たような却下を受けた件があります。今回はその内容です。

結論、スクリーンショットにテスト用の広告が写っていると却下されます。修正はもちろん、その部分を削除する、隠すなどすればOKです。

概要

アプリを審査に出す
却下される
修正
その後

アプリを審査に出す

今回はすでに公開済みのアプリのアップデートを行いました。

すでに公開済みのアプリのアップデートの場合はApp Storeの動きが早く、レビューを依頼したその日のうちにステータスが「レビュー中」になる印象です。

翌日には結果が帰ってくるようなイメージを持っています。

却下される

朝にレビュー依頼を行い、夕方には却下の連絡がありました。
スクリーンショットにテスト確認用の広告が表示されていることが却下の理由でした。

Guideline 2.5.10 - Performance - Software Requirements

We noticed that your app or its screenshots include test advertisements. Apps or metadata items that include features that are for test or demonstration purposes are not appropriate for the App Store.

Next Steps

To resolve this issue, please revise your app to complete, remove, or fully configure any partially implemented features. Please ensure your screenshots do not include any images of demo, test, or other incomplete content.

却下された旨を示すコメントには、具体的な内容と該当するスクリーンショットが添付されていました。

修正

スクリーンショット中のテスト広告を削除しました。

その後

その日のうちに審査中・販売中とステータスがすすみ、無事にアップデートを公開することができました。

おわりに

今回のように簡単な内容であれば修正するのは簡単です。AppStoreのレビューはちょっと厳し目ですが、却下された理由などを細かく指摘してくれるので親切だと私は思ってます。

アプリの紹介

今回アップデートしたアプリです。昔に作ったメモアプリです。メモごとにタイトルとテーマを設定することができます。どことなくコーヒーをイメージした色合いになってます。コーヒー色がお好きな方はぜひダウンロードしてみてください。
メモ帳アプリ「coffee memo」をリリースしました

App Storeの審査でアプリの公開を却下された件 -スクリーンショット編-

Mon, 21 Oct 2019 00:00:00 GMT

しばらく期間が空いていましたが、いくつかスマホアプリを作成してストアに公開しました。

App Storeの方もなんとなく勝手がわかってきました。しかし、またアプリの申請が却下されたのでその時のことを記録しておきます。

結論、スクリーンショットにAndroidの画面要素、ステータスバーなどが入っていると却下されるということです。 iOSの端末でスクリーンショットを取り直せばOKです。

以下に詳細を記載しています。

概要

アプリを審査に出す
却下される
修正
再審査
その後

アプリを審査に出す

アプリを作成したので審査を依頼しました。10/18 金曜日です。今までにいくつかアプリを公開しています、これが6つ目のアプリくらいでしょうか。以前よりも次のステップに進むのが早くなった気がしました。

却下される

翌日の10/19 土曜日には却下されたという連絡がメールで届いていました。内容は以下、スクリーンショットにiOSのものではないステータスバーが含まれているため、と具体的な理由も書かれていました。

Guideline 2.3.10 - Performance - Accurate Metadata

We noticed that your app or its metadata includes irrelevant third-party platform information. 

Specifically, your app includes non-iOS status bar images in the screenshots.

Referencing third-party platforms in your app or its metadata is not permitted on the App Store unless there is specific interactive functionality.

Next Steps

To resolve this issue, please remove all instances of this information from your app and its metadata, including the app description, promotional text, What's New info, previews, and screenshots.

ちなみに該当するスクリーンショットがどれに当たるのかも添付されていました。わかりやすい指摘でありがたいです。

修正

iOS端末でスクリーンショットをちゃんと取り直しました。調べた情報によると、Androidで取得した画像でもステータスバーを削除すれば審査は通るようです。

再審査

修正は軽微かつアプリの再ビルドも必要なかったので、その日のうちにストアの情報を修正して再審査を依頼しました。 10/19 土曜日に再審査を依頼です。

その後

その日のうちに審査中のステータスに変わり、そのまま販売中のステータスになりました。

朝10時頃に再審査を依頼、12時ごろには審査中になりました。そして12時30には販売中のステータスになりました。とても快適なスピード感でした。アプリの機能や内容も単純だったためか、あっさりと進んだ印象です。

おわりに

App Storeで躓いたので内容を記録しておきました。と言っても簡単なものなのですぐに修正が出来ました。レビューの内容に具体的なことまで書かれておりかなり親切でした。

ちゃんとアプリ開発のガイドラインを読み込んで、一回日本語に訳したりしてみようかなと思います。

アプリの紹介

ちなみに今回公開されたアプリは以下です。

iOS
- todoカレ
  https://apps.apple.com/us/app/todo%E3%82%AB%E3%83%AC/id1484035100?l=ja&ls=1
  カレンダーにtodoを登録して管理できます。
  重要か緊急かのフラグを付けることが出来ますので安くの管理にご活用ください。
- Foldest note
  https://apps.apple.com/us/app/foldest-note/id1484035145?l=ja&ls=1
  フォルダで監理できるノートアプリです。階層を自由に作れるので目的のノートを簡単に整理できます。
  予定日を登録することや、ほかアプリへの共有機能なんかも搭載しています。従来のメモアプリでは生理が出来ない人におすすめのアプリです。
Android
もちろんAndroid版もあります。
- todoカレ
  https://play.google.com/store/apps/details?id=com.honmushi.todocalendar
- Foldest note
  https://play.google.com/store/apps/details?id=com.honmushi.foldestnote

TypeScriptを学ぶ型定義の基礎

Mon, 21 Oct 2019 00:00:00 GMT

ReactNativeでのアプリ開発や、Gyatsbyでブログ作る際に何度か目にしたことのある「TypeScript」です。

最近よく目にしますが、どういった仕様や機能があるのかを把握しきれてないので、一度学んでまとめてみます。
目標としてはReactNativeでのアプリ開発、並びにGyatsbyでのブログ構築をjsからTypeScriptに置き換えていくことを考えています。

とりあえずここではデータ型の指定方法のみまとめてます。続きも学んで行き次第残していく予定です。

概要

TypeScript
型を定義する
名前付き関数のデータ型を定義
関数のデータ型を定義
データ型定義の方法

TypeScript

JavaScriptに型を定義できることが大きな特徴。
型を定義してデプロイ前に静的にチェックできることなどが強み。

大人数での開発なんかではルールを定義することで保守性などに優れた堅牢なシステムが作れると思います。

準備とコンパイル

npmなどでTypeScriptをインストールすれば利用できます。

jsとの連携が簡単で、TypeScriptからjsを読み込んで利用することが出来ます。文法も踏襲されたものになっているのですぐに使い始めることが出来ます。

ちなみに「tsc」というコマンドを実行することで、CUIでTypeScriptからjsにビルド出来ます。実際の開発では使うことはないと思いますが、仕組みの理解ために試してみると良さそうです。

型を定義する

変数の型を定義する

早速一番メジャーな機能である型定義を試してみます。

// TypeScriptは 「let」を使う。jsへの変換時にvarになる
// let 名前 : データ型 = 初期値;
// let 名前 : データ型;
// let 名前 = 初期値;

let sample : number = 0;

初期値を与えなかった場合はundefinedになります。データ型を指定しなかった場合は初期値から型推論を行い使用されます。
定義してある型に一致しないデータが挿入されるプログラムになっているとビルド時にエラーがでます。

型を指定しなかった場合「any」として扱われ、通常のjsと同様に型推論が行われて動的に型付けされます。

let sample : any;
let sample ;

配列で型を定義する

配列の要素の型を定義します。指定しない場合はanyとなります。

//let array1 : Array<要素のデータ型> = [1,2,3,4]
let array1 : Array<number> = [1,2,3,4];

//let array2 : 要素のデータ型[] = [1,2,3,4]
let array2 : number[] = [1,2,3,4];

連想配列(Map)で型を定義する

連想配列の型指定です。Mapを使う場合になります。

// let 変数名 = new Map<キーのデータ型, 値のデータ型>()
let renso = new Map<string,number>([
    ["a",1],
    ["b",2],
    ["c",3],
    ["d",4],
]);

// let 変数名 : Map<キーのデータ型,値のデータ型> = new Map();

連想配列(Object)で型を定義する

Objectで連想配列を用意する場合になります。

// let 変数名 : {[key:string] : 値のデータ型 } = {} 
let renso2: {[key:string] : number } = {
    "a" : 1,
    "b" : 2,
    "c" : 3,
    "d" : 4,
};

クラスオブジェクトで連想配列の型を定義する

クラスを使ってデータ型を定義する場合です。

class Sample{
    Name : string;
    No: number;
}

let member : {[key:string]: Sample} = {
    "a" : {Name:'yamada', No:1},
    "b" : {Name:'yoshida', No:2},
    "c" : {Name:'yamamoto', No:3},
    "d" : {Name:'yasuda', No:4},
}

関数のデータ型を定義

名前付き関数のデータ型を定義

関数の引数と戻り値のデータ型を定義できます。

// function 関数名 (引数名1:データ型, 引数名2:データ型) : 戻り値のデータ型 {
//     処理
// }
function getName (id:number,type:string) : string {
    処理
}

戻り値はvoidを指定することで、戻り値なしを定義できます。

function notDo (id:number,type:string) : void{
    処理
}

匿名関数のデータ型の定義

基本ラムダ型を使えば良い。jsへの変換後は匿名関数に変換されているそうです。理解のために念の為書いておきます。

// let 関数の変数名 = function (引数名1:データ型, 引数名2:データ型): 戻り値のデータ型 {
//    処理
// }

ラムダ式のデータ型の定義

ラムダ式の場合は先に引数、戻り値のデータ型を記述しておくこともできます。その場合は関数の内容を記述する際にデータ型の定義を省略できます。

// 処理とデータ型を同時に定義する
// let ラムダ式の変数名 = (引数名1:データ型, 引数名2:データ型): 戻り値のデータ型 => {
//     処理
// }

// 1.処理を定義せずデータ型のみを先に定義する
// let ラムダ式の変数名 : (引数名1:データ型, 引数名2:データ型) => 戻り値のデータ型;
// 
// 2.処理を定義
// ラムダ式の変数名 = () => {
//     処理
// }

戻り値がない場合はvoid 処理が戻らない場合はnever

処理が終わって何も返さない場合は「void」を定義します。無限にループする場合など、処理が変えることがない場合は「never」を戻り値の型として定義します

function notEnd (id:number,type:string) : never{
    処理
}

データ型定義の方法

値の組 Tuple を使う

シンプルな値の組の定義の場合はTupleを利用できます。 Tupleを用いることでクラスの定義をしなくても、値の組み合わせを定義することができます。
値の数と順番を定義でき、後から追加したり削除したりされることを防ぐことができます。

// let 変数名 : [データ型1,データ型2, ・・・] = []
let data1 : [string,string,nomber] = [ "apple", "bus", 20 ];
// 
// function 関数名 ( 引数 ) : [ データ型1, データ型2, ・・・] {
//    処理 
// }

データ型の候補を複数定義共用体 Union

データ型の定義として、「どちらか」「どれか」一方という定義ができます。
変数はもちろん、関数の引数・戻り値でも使用可能です。関数内では typeof(prop) で型を取得するなどして条件分岐すると良さそうです。

// let 変数名 : データ型1 | データ型2 ;
let data : string | number | Date ;

null 許容型

データ型 | nullで定義すればnullになり得る共用体にできます。このときには 変数名 || 変数の値がnullの場合の使用値という書き方ができます。

let text3 : string | null ;

console.info( text3 || "テキストなし" );

undefinedの許容

undefineedを許容することもできます。
関数の引数の場合は、引数名の後に?を付けることでundefinedの許容型にできます。

// let 変数名 : データ型 | undefined ;
// 
// function 関数名 ( 引数名? : 引数のデータ型){
//     処理
// };
// 
// function 関数名 ( 引数名 : 引数のデータ型 | undefined){
//     処理
// };

タグ付き共用体

データ型の定義クラスにタグをつけておくことで、itme.tagで確認できるようになります

//データ型を定義
class Person {
    tag : 'person';
    Name : string;
    No : number;
}
class Team {
    tag : 'team';
    Name : string;
    Color: string;
}

// type を使って 型の共用体に名前を付ける 型のエイリアス
type Item = Person | Team;

// 関数の引数として共用体を指定
function getData ( item : Item ) {
    switch (item.tag){
        case "person":
            return  // 処理
        case "team":
            return  // 処理
    }
}

交差型を使った合成 Intersection

2つ以上の型を合成して利用することも出来ます。

// let 変数名 : データ型1 & データ型2 ;

// 交差型は実際のクラスではないので、newは利用できない。`<交差型のエイリアス>`の書式なら指定可能
// let 変数名 = < データ型1 & データ型2 > {} ;

おわりに

今回はここまでにします。とりあえず型定義の基礎でした。
とりあえずデータ型の定義ができることはわかったので、アプリやサイトもすこしずつ修正していこうと思います。

素材サンプル

Fri, 04 Oct 2019 00:00:00 GMT

Web素材のサンプル置き場です。 Web制作でよく使うサンプルにアクセスしやすいようにここにおいていきます。

サンプル画像

pdf-300.pdf

ExpoのSDK35がリリースされたので早速アップデート（SDK34→SDK35）

Tue, 24 Sep 2019 00:00:00 GMT

ExpoのSDK35がリリースされました。数日遅れですが早速アップデートしてみました。その時の引っ掛かりなど記録しておきます。
Expo SDK 35 is now available

SDK34で作っていたアプリは必要なら35にアップデートしていく必要があるので、その際の手順として記録しています。

概要

SDK35の変更点
SDK34からSDK35へのアップデート手順
発生したエラーとその対応
おわりに

SDK35の変更点

Expo SDK 35 is now availableに記載の内容です。

iOS13 への対応
これが大きいもののようです。 Dark ModeやApple Authenticationというものへの対応が行われており、必要なモジュールを利用すれば簡単に実装できそうです。すぐには利用する予定はないですが、ゆくゆくは使ってみようと思います。
Expo Webの改善
SSRの対応を行ったようです。すべてのExpoパッケージがサーバサイドレンダリングに対応するようになりました。私はExpo Webを利用したことがないのですが、試しにやってみようかな。
端末や環境関連のモジュールの追加
使う機会はそれほど多くないと思いますが、機種の情報やネットワーク・バッテリーの情報を取得するモジュールが用意されました。
- Device
  
  provides information about the physical device/manufacturer as well as the operating system.
- Application
  
  provides information about your application and its environment.
- Battery
  
  provides information about the power state of the device.
- Network
  
  provides information about the device’s current network connection.
- Cellular
  
  provides information about the device’s current cellular network and telephony state.
Expo client のSDK31とSDK32のサポート終了
最新のExpo clientアプリではSDK31・32で作ったアプリは動作しません。すでにビルドしてあるアプリについては特に問題ないですが、ずっと昔のアプリをExpo clientでテストする場合なんかに困ると思います。頑張ってExpo SDKのバージョンを上げましょう。
Android Branchのサポート
以下のモジュールのことらしいです。 Branch
私は利用したことがありません。機会あれば触ってみます。deep linkに関するモジュールのようです。

他にも細かい改善なんかもありますので、リリースを一度読んでおくと良いです。

Breaking Changesとして以下の記載がありましたので、Admob使う場合は修正が必要かもしれません。admobの管理画面からアプリの一意なIDを取得して、引数に加えてねということらしいです。あとで試してみて追記します。

Admob: all Admob ads now require a new configuration value in app.json, expo.[platform].config.googleMobileAdsAppId. The value can be found by following the guide in this Google Support answer. (Related PR.)

SDK34からSDK35へのアップデート手順

今回SDK34からSDK35へのアップデートの手順を以下に記載しています。基本的には最初にも記載した以下のページに載っている内容です。
Expo SDK 35 is now available

1. app.jsonの sdkVersion を “35.0.0”に変更

2. package.jsonの以下の項目を変更

react-native を ”https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz”
expo を “^35.0.0”
react を “16.8.3”
react-navigation を “^4.0.6”
jest-expo を “^35.0.0”
sentry-expo を “~2.0.0”

使っていないものは変更の必要無いです。jestとかsentryなんかは使ってない場合もあると思います。

3. react-navigation を利用する場合は「expo install react-native-gesture-handler react-native-reanimated」を行う

expoの packageに含まれなくなったため、改めてinstallする必要があるそうです。

4. プロジェクトの /node_modules/ ディレクトリを削除して npm install を行う

5. expo start -c を実行

6. Expo clientアプリをストアで更新を確認

expo-cliも確認しておきましょう。

7. Expo SDK 35 is now availableの「breaking changes」を確認

8. すでにビルドしている場合、SDKを更新するためには改めてビルドする必要がある

expo publishではアプリのSDKの更新はできないよ、という意味だと思います。

発生したエラーとその対応

上記の内容を参考にしながら進めていく中で、いくつかエラーに遭遇しました。私が対処した内容をメモしておきます。環境の差によってうまくいかない場合もあると思いますが、参考になればと思います。

expo-fontでエラー

font familyに関するエラーが発生します。以下に現象が報告されていますので、その内容通りに対応すれば良いです。 Unrecognized font family on SDK35
具体的には以下の手順です

expo install expo-fontを実行
/node_modules/フォルダーを削除
pakage-lock.jsonを削除
npm installを実行

react-navigationでエラー

Expo SDK 35 is now availableの「breaking changes」の内容に含まれている内容だと思います。react-navigationで大きめの変更があったためいくつか対応が必要です。私の場合は、以下2点対応しました。他にも環境や利用しているモジュールによって対応が必要になると思います。基本エラーに対応方法が書いてあるので、それに従えば問題ないです。必要であればドキュメントを確認しましょう。

react-navigation-stack を追加
createStackNavigatorをreact-navigation-stackからimportするように変更します npm install react-navigation-stackも実行します
react-navigation-tabs を追加
createBottomTabNavigatorをreact-navigation-tabsからimportするように変更します npm install react-navigation-tabsも実行します

上記は以前react-navigationに含まれていましたが、それぞれ分離されたようです。他のコンポーネントも分離されているのだと思います。都度対応しましょう。

おわりに

とりあえずSDK35で動作させることが出来ました。以前作っていたアプリをアップデートする必要があります。がんばります。

SDK35で追加された新しい機能も使っていこうと思います。特にiOS13への対応は結構重要だと思いますので進めていきたいです。

上記それほど重要でなければしばらくはSDK34を使い続けるというのもありです。ある程度バグとか少なくなってから利用するのも一つの手です。

expo-cliのコマンド自分用メモ

Tue, 24 Sep 2019 00:00:00 GMT

expo-cli のコマンドのメモです。それほど種類もないので簡単なのですが、オプションが結構あるので使いたいときに確認するためにブログに記録しておきます。

基本的にはExpo-CLIに書いてあることの引用です。よく使う順に並び替えて、メモを足しています。

Expo-CLI コマンドメモ

Usage: expo [options] [command]

他のコマンドと同様です。

Options:
  -V, --version                                       output the version number
  -o, --output [format]                               Output format. pretty (default), raw
  --non-interactive                                   Fail, if an interactive prompt would be required to continue. Enabled by default if stdin is not a TTY.
  -h, --help                                          output usage information

あまり使わないです。-hでヘルプ。各コマンドのヘルプを見るときはexpo [command] --helpします

よく使うコマンド

start|r [options] [project-dir]

ローカルサーバを開始

build:ios|bi [options] [project-dir]

iOSのビルドipaファイルがサーバに生成される。expo biは省略版

build:android|ba [options] [project-dir]

アンドロイドのビルドapk がサーバに生成される。expo baが省略版
expo ba -t app-bundleでaabが生成される。こっちのほうが使う。

fetch:ios:certs [options] [project-dir]

iOSの証明書やキーなどの情報を取得する。別の場所に大切に保管する。
パスワードが出力されるのでメモしておく。

fetch:android:keystore [options] [project-dir]

Androidの証明書やキーなどの情報を取得する。別の場所に大切に保管する。
パスワードが出力されるのでメモしておく。

optimize|o [options] [project-dir]

assetの圧縮、ビルド時に警告でるので気づいたら実行する。

login|signin [options]

expoへのログイン、必要なときに行う

logout

expoからのログアウト

使いそうなもの

build:status|bs [options] [project-dir]             Gets the status of a current (or most recently finished) build for your project.
eject [options] [project-dir]                       Creates Xcode and Android Studio projects for your app. Use this if you need to add custom native functionality.
diagnostics [project-dir]                           Prints environment info to console.
generate-module [options] [new-module-project]      Generate a universal module for Expo from a template in [new-module-project] directory.
init|i [options] [project-dir]                      Initializes a directory with an example project. Run it without any options and you will be prompted for the name and type.
publish:history|ph [options] [project-dir]          View a log of your published releases.
publish:details|pd [options] [project-dir]          View the details of a published release.
publish:set|ps [options] [project-dir]              Set a published release to be served from a specified channel.
publish:rollback|pr [options] [project-dir]         Rollback an update to a channel.
publish|p [options] [project-dir]                   Publishes your project to exp.host

あまり使わないもの

android [options] [project-dir]                     Opens your app in Expo on a connected Android device
build:web [options] [project-dir]                   Build a production bundle for your project, compressed and ready for deployment.
bundle-assets [options] [project-dir]               Bundles assets for a detached app. This command should be executed from xcode or gradle.
client:ios [options]                                Build a custom version of the Expo client for iOS using your own Apple credentials and install it on your mobile device using Safari.
doctor [options] [project-dir]                      Diagnoses issues with your Expo project.
export [options] [project-dir]                      Exports the static files of the app for hosting it on a web server.
fetch:android:hashes [options] [project-dir]        Fetch this project's Android key hashes needed to set up Google/Facebook authentication. Note: if you are using Google Play signing, this app will be signed with a different key after publishing to the store, and you'll need to use the hashes displayed in the Google Play console.
fetch:android:upload-cert [options] [project-dir]   Fetch this project's upload certificate needed after opting in to app signing by Google Play or after resetting a previous upload certificate.
install:ios                                         Install the latest version of Expo client for iOS on the simulator
install:android                                     Install the latest version of Expo client for Android on a connected device or emulator
ios [options] [project-dir]                         Opens your app in Expo in an iOS simulator on your computer
opt-in-google-play-signing [options] [project-dir]  Switch from the old method of signing APKs to the new App Signing by Google Play. The APK will be signed with an upload key and after uploading it to the store, app will be re-signed with the key from the original keystore.
prepare-detached-build [options] [project-dir]      Prepares a detached project for building
push:android:upload [options] [project-dir]         Uploads a Firebase Cloud Messaging key for Android push notifications.
push:android:show [options] [project-dir]           Print the value currently in use for FCM notifications for this project.
push:android:clear [options] [project-dir]          Deletes a previously uploaded FCM credential.
register                                            Sign up for a new Expo account
send [options] [project-dir]                        Sends a link to your project to an email address
upload:android|ua [options] [projectDir]            Uploads a standalone Android app to Google Play (works on macOS only). Uploads the latest build by default.
upload:ios|ui [options] [projectDir]                Uploads a standalone app to Apple TestFlight (works on macOS only). Uploads the latest build by default.
url|u [options] [project-dir]                       Displays the URL you can use to view your project in Expo
url:ipa [options] [project-dir]                     Displays the standalone iOS binary URL you can use to download your app binary
url:apk [options] [project-dir]                     Displays the standalone Android binary URL you can use to download your app binary
webhooks:set [options] [project-dir]                Set a webhook for the project.
webhooks:show [options] [project-dir]               Show webhooks for the project.
webhooks:clear [options] [project-dir]              Clear a webhook associated with this project.
whoami|w                                            Checks with the server and then says who you are logged in as

おわりに

とりあえずこんな感じ。またよく使うものとかあったら逐次足していく予定です。

マークダウンエディタアプリ「skeleton md editer」をリリース

Fri, 20 Sep 2019 00:00:00 GMT

マークダウンを編集することに特化したスマホ用エディタアプリを作成しました。いつものようにReact Native とExpoで構築しました。現在はまだAndroidしかありませんが、すぐにiOS版も公開予定です。

LPはこちら
スマートフォンでマークダウンを編集するために、エディタを作りました。

概要

機能
作るキッカケ
構築ポイント
おわりに

機能

プレビュー機能
画面右上の「<>」ボタンを押すことでプレビューのオン・オフが切り替えられます。プレビューを表示したまま編集することができ、リアルタイムで反映されます。

テキスト入力部分に重なるように表示しているのですが、どうでしょうか。画面幅が小さいのでこの方がいいかと思っていますが、しばらく様子を見て変更するかもしれません。
記号挿入ボタン
キーボードの上に張り付く形で、いくつかのボタンが表示されています。このボタンを押すと記号がカーソル位置に挿入されます。マークダウンの編集を行う上で利用頻度の高いものを設定しています。これがあるだけでだいぶ便利になっています。

作るキッカケ

スマホでちょっとした時間なんかにメモを取るのですが、できれば書式を統一したいと思いました。何かと便利なマークダウン形式で作成していたいのですが、スマホのキーボードだと完全に記号の入力がめんどくさいです。

記号に切り替えて、「#」を入力して、また切り替えてというのを頻繁に行う必要があり、不便に感じていました。

ですので、マークダウンの入力に適したエディタを作りました。記号をキーボードとは別のボタンで入力できたらいいなという要件を叶えたエディタアプリになります。

構築ポイント

React NativeとExpoを使っています。今回の構築のポイントとなったのは以下です。

プレビュー機能
markedというパッケージを使いました。テキストインプットに入力されたテキストをマークダウンとしてmarkedに渡すことで、HTMLへの変換を行うことが出来ます。

そして生成されたHTMLをExpoのWebViewに渡すことで表示しています。URLではなくHTMLそのものをWebViewに渡すことで表示を行っています。
```
<WebView
originWhitelist={['*']}
source={{ html: '<h1>Hello world</h1>' }}
/>
```
WebViewでの表示の際には独自のスタイルを設定することで、文字サイズやハイライトなどを表現しています。そのためにHTMLの頭にスタイルをつなげてWebViewに渡しています。
記号ボタン
テキストインプットのプロパティを利用しています。onSelectionChangeとselectionです。基本的にはカーソルの位置を常に追跡しておき、記号ボタンが押されたときにそのカーソルの位置に記号を挿入しています。
```
「カーソル位置までの文字列」+ 「記号」+ 「カーソル位置より後の文字列」
```
という形でJavaScriptの文字列結合を行っています。

記号挿入後のカーソル位置の扱いがAndroidとiOSで異なっていたため苦戦しました。記号の後にカーソルが移動するものと、記号の前の位置に残るものとあります。適切にカーソル位置を+1することで意図した動作になりました。
オリジナルのヘッダー要素
特に要件がなければReactNavigationのヘッダーを設置するのですが、今回は右上にプレビュー表示ボタンを設置したかったので、ヘッダーを独自実装しました。

スクリーン内に実装するのでコンポーネントの利用やpropsの利用もわかりやすいのですが、iPhoneXなどでは画面の上部が隠れてしまいます。その場合は全体をSafeAreaViewで囲うことで解決できました。

他のアプリでも同様の現象が起こっている場合がありますので修正しておこうと思います。ただしReactNavigationのヘッダーの場合は正しく調整されて表示されていますので、対応の必要はありませんでした。特別な理由がなければ基本的にReactNavigationのものを利用するのが良いです。

おわりに

このサイトはGatsbyで作成しているため、記事をmdで書いています。最終的にはこのアプリを利用して記事を書ける状態を目指して工夫していきたいです。今のところはfrontmatterなどのテンプレートを呼び出せるようにすることと、スマホから何らかの方法でPCへ共有できることを考えています。

他にもプレビューのスタイルの変更などもできると嬉しいですね。全画面プレビューなんかもあるといいでしょうか。

iOS版アプリをapp storeで公開

Mon, 02 Sep 2019 00:00:00 GMT

ReactNative+Expoを使ってアプリを開発しています。Androidでの公開はいくつも行っていたのですが、ついにapp storeにて公開することができました。

今回公開できたのは以下のアプリです。一言で説明するならシンプルなメモ帳アプリです。
coffee memoをリリースしました

ざっくリと今回の気づきを記録しておきます。各作業の詳細な手順や意味などはまた別の記事にする予定です。

概要

ReactNativeなら簡単
Expo使うとビルドも簡単
レビューで却下された例

ReactNativeなら簡単

クロスプラットフォーム開発が出来ますので、当然ですがAndoridとiOS両方での開発が1人で同時にできました。 jsの知識があれば問題なく構築できますので、敷居の低さもとても良いです。

いくつかAndoridからiOSに移行する際に躓いたところがありました。別記事にまとめていますのでよければご覧ください。
ReactNativeのアプリをiOSでも動作させる

Expo使うとビルドも簡単

私はExpoを使って開発・ビルドを行っています。app storeで公開するためのビルドについてもExpoを利用するととても簡単に出来ました。

Apple Developerで作成する証明書やバンドルIDなどを、Expo側でリクエストして作成している様子でした。もちろん自分で予め用意したものを使うことも出来ますが、特に理由がなければExpoにまかせてしまうので良さそうに感じました。

証明書作ったり、キーチェーンに登録したり、ID作成したり、profile作ったりなど、複数のややこしい行程と概念がありますが、基本Expoに任せることが出来ます。

Expoでビルドして、自分はApp storeにアプリを登録して必要な情報を登録。完了したらビルドをアップロードして、審査に申し込みと言うような簡単なフローになります。

いざというときのために、自分の環境でもビルド等できるように試してみようと思います。しかし、なにか不便などがなければExpoに任せたいと思います。

レビューで却下された例

聞いてはいましたがAndroidよりもアプリの審査は厳しいです。

例えば以下の理由で却下されました。

機能にオリジナリティが足りない
Webサイトのコンテンツをそのままアプリにしたようなものなんかは却下されます。
スクリーンショットにテスト広告が表示されている
レビューする人によって精度の差もあるかもしれませんが、テスト広告やデバッグデータ何かがアプリ内・またはスクリーンショットに含まれていると、却下される対象になるようです。

基本的にはレビューに関するガイドがあるので、それを参考にして構築すれば問題ありません。かなりボリュームがありますがその分親切に書いてあります。
App Store Review Guidelines.

おわりに

なんとかiOSのアプリも公開することが出来ました。とりあえず無事に出来たのでホッとしています。

Androidの「.abb」形式よりも容量が大きいので、容量のスリム化を考えたいです。 Expo使っていることなども原因にあると思いますが、容量削減のコツや方法を現在勉強中です。

引き続きクロスプラットフォームでの開発を進めて、ノウハウを蓄積していくつもりです。インストール数や評価などの仕組みも大きく違うと思います、そのあたりも使って行く中で理解したいと思います。

App Storeの審査で却下された

Fri, 30 Aug 2019 00:00:00 GMT

Androidで公開済みのアプリ「のっティ時刻表」App Storeの審査へ進めてみました。その結果不合格だったので、その時のことを書いてきます。いくつか修正して再審査に出して、なんとかstoreで公開したいと思っています。

審査に至るまでの手順は別の記事で残しておく予定です。 Expoを使ったビルドはとても簡単でしたが、よくわからない単語がたくさん出てくるので結構迷うこともありました。

その経過についても追記して書いていくつもりです。

概要

色々済ませていざ審査へ
審査が始まるまで
却下済みの状態に
考えられる原因
対応策の検討

色々済ませていざ審査へ

ビルドやアップロード、ストア掲載情報やスナップショットを用意し登録したので、審査を申し込みました。上記の手順については他の記事で書こうと思います。結構盛りだくさんで、今でも意味が理解しきれていない点があるので調べて見ようと思っています。

とりあえず、時間軸的には以下でした。8/28に審査に申し込んで、8/30日には却下されてしまいました。 8/29の夜のうちに審査が行われた様子で、審査中のステータスは見ることが出来ませんでした。

・提出準備中
・審査待ち 8/28
・審査中 ？
・却下済み 8/30

審査が始まるまで

審査が始まるまでの状態、すなわち「審査待ち」の状態であれば、ビルドのアップロード以外の修正であれば出来ます。例えばストアの掲載情報などでしょうか、私もスナップショットとか結構修正していました。

App Storeでは掲載情報を修正しても、都度storeに反映されるわけではなく、審査を通す必要がある？のでしょうかね。無事にstoreに公開できるころにはそのあたりも把握出来ていると思います。

却下済みの状態に

8/30日の朝に確認すると、却下済みの状態になっていました。

外部テスター向けの審査は通っていました

ストア公開の審査と同時に、外部テスター向けのビルドもアップロードしていました。こちらについては無事に「承認済み」の状態になっていましたので、基準がちょっとゆるくなっているのだと思います。

App StoreのアプリではTextFlightをつかって実機テストができるのですが、以下の2通りあります。

App Store Connectユーザ
ユーザーとして登録済みのAppleIDにテストしてもらうことが出来ます。こちらはビルドをアップロードすればすぐにテストを始めることができ、審査不要です。自分で開発して自分でテストするのであればこれで十分です。内部テスト的なイメージでしょうか。
外部テスター
こちらは登録していないアカウントに対してメールやURLを発行してテストしてもらうための仕組みのようです。こちらについてはビルドアップロード後に審査が必要になります。外部テストのイメージですかね。

考えられる原因

App Store connect上でReviewのメッセージを見ることが出来ます。英語なので戸惑うかもしれませんが、ガイドラインに沿った指摘でしたので、分かりやすかったです。

「ガイドラインの〇〇に引っかかっているぞ」と言う内容なので、そこに従って修正を行えば良さそうです。
App Store Reviewガイドライン

「Guideline 4.2 - Design - Minimum Functionality」という指摘

ガイドラインを見る限りは「主な目的がマーケティングの資料の提供、広告、Webクリッピング、コンテンツのまとめ、リンク集であるAppは許可されません。」の部分が原因かなと思いました。

今回審査に提出したアプリは時刻表アプリなのですが、乗り換え案内機能とかはありません。バス停の時刻のコンテンツをまとめただけのものだと判断されてしまったのではないかと思います。

対応策の検討

Appを作成する際は、Webサイトを単に再パッケージしたようなものではなく、優れた機能、コンテンツ、UIを作成するようにしてください。
特に便利でも、ユニークでも、「Appらしく」もない場合、そのAppをApp Storeで提供することはできません。

ということがガイドラインに書かれているので、もう少し便利な機能を付けるとか、オリジナルの要素を追加するとか、UIをAppらしくするとかの対応が必要だなと考えています。

お気に入りバス停機能とか到着予想などの、新機能の開発を考えようと思います。

おわりに

噂に聞いてはいましたが、App Storeの審査はgoogleの比べると厳しかったです。しかし、ガイドライン等もしっかりした作りになっており、開発者にとってもわかりやすいものだと感じました。これを参考にすることが良いアプリ開発の近道になるようにも思います。実際に経験できてよかったです。

いくつか対応を進めて、storeでの公開を目指そうと思います。進捗あったら追記していきます。

iOSアプリの公開に向けて「Apple Developer」に登録する

Thu, 29 Aug 2019 00:00:00 GMT

これまでいくつかアプリを作りましたが、まだAndroidでしか公開していません。そろそろapp storeでも公開しようと思いましたので現在挑戦中です。いくつも躓くところや気付きがあったので、その過程をメモします。

同じように、ReactNative + expo で作ったアプリをiOSで公開する場合の参考になればと思います。

app store公開までの大まかな手順

大まかには以下のような手順が考えられます。この記事では最初の「AppleIDとapple developerへの登録」の部分について残しています。

AppleIDとapple dveloperへの登録 [この記事で取り扱う内容]
iOSに向けたアプリの修正
iOSアプリのビルド
iOS端末による実機での確認
app store への審査申し込み
app store でのリリース

概要

AppleIDが必要
apple developerに登録
お金を払う
数日たって反映される

AppleIDが必要

app storeにアプリを公開するためにはapple developerのアカウントが必要になります。 apple developerのアカウント作成時にはAppleIDが必要です。

iCloudとかを使っているのであればすでに持っていると思います。それを使ってもいいですし、任意のメールアドレスで新しく作ることも出来ます。

私は大昔に作ったものがあったのですが、「秘密の質問」みたいなやつの答えがわからなかったので、新しく作りました。開発用のものを新しく作ることが推奨されているようですし、そのほうが良さそうです。

2ファクタ認証を有効にする必要がある

後述のapple developerに登録を進めるのですが、住所などの情報の入力に加えて、「2ファクタ認証」を有効にする必要があります。

これを有効にすると結構めんどくさいのですが、認証が強固になります。通常のID/PWに加えて、登録してある電話番号にSMSで使い捨てパスワードが届き、それを入力してログインします。一度ログインすれば端末を記憶してくれるようでした。

apple developerに登録

AppleIDを用意したらapple developerに登録します。

https://developer.apple.com/

開発用Documenntなどのいくつかの項目は利用できますが、肝心のProgram関連の項目は利用できません。アプリ公開を行うためには、お金を支払って「Apple Developer Program - 1年間のメンバーシップ」を購入する必要があります。

apple developerのアカウント画面から購入画面に進めるのでそこから支払いを進めましょう。

お金を払う

金額は11800円+消費税でクレジットカードで払いました。
クレジットカードで払うかitunesのクレジットで払うか選べます。

数日たって反映される

払ってもすぐに有効になるわけではありません。わたしは8月22日に支払いを行い、8月27日に「Welcome to the Apple Developer Program.」というメールが届きました。間に土日を挟んでいるので3日かかったというくらいです。気長に待ちましょう。あまりに時間がかかる場合は問い合わせを行うといいらしいです。

上記のメールが来てから確認すると、apple developerの画面にも項目が増えており、「Certificates, Identifiers & Profiles」や「App Store Connect」の項目が利用できるようになりました。

おわりに

これで開発者メニューが利用できるようになりました。androidと比べると金額が高いのでドキドキしますが、無事に利用できる状態になりました。

引き続き、app storeでの公開に向けての取り組みを記録していきます。

ReactNativeのアプリをiOSでも動作させる

Thu, 29 Aug 2019 00:00:00 GMT

ReactNative + Expoで作ったアプリをiOS、すなわちapp storeでも公開するために作業中です。

クロスプラットフォーム開発が可能なReactNativeですが、いくつかAndroidと同じプログラムでは旨くいかない箇所がありました。
すでにAndroidではアプリを公開していますが、iOSでの開発を進めていくなかで気づく点がありました。忘れないようにこの記事にメモしておきます。

随時増えていくと思いますので、ドンドン追記していきます。

概要

app.json にiOS関連の記述を追加する
アイコンは1024
borderRadiusが効かない場合がある
elevetionはiOSでは利用不可
ReactNavigationのStackNavigatorのヘッダースタイルに差異がある
StatusBar.currentHeightはiOSでは利用不可

app.json にiOS関連の記述を追加する

app.jsonにiOSの記述を追加する必要があります。

https://docs.expo.io/versions/v34.0.0/workflow/configuration/

重要なのは「bundleIdentifier」の項目でしょうか。app storeで管理するIDのようなものです。androidのpackageと同じと考えていいと思います。

    "ios": {
      "bundleIdentifier": "app storeで登録されるID",
      "buildNumber":"1.1.2",
      "icon": "./assets/icon_ios.png",
      "splash": {
        "backgroundColor": "#ffffff",
        "image": "./assets/splash.png"
      }
    },

アイコンは1024

iOS用のアイコンを用意する必要があります。調べた所、サイズは1024×1024で、角丸にしてはいけない、その他appleが提示する使用に従う必要があります。

上記のようにapp.jsonで専用のものを指定する必要があります。

ビルド時にはこのアイコンをリサイズしてさまざまな画像を用意してくれるそうです。ビルドをアップロードしたら、app storeで使われるstore アイコン？にもこの画像が利用されました。

borderRadiusが効かない場合

borderRadius属性が聞いていないものがたまにありました。条件は確実なものはわからなかったのですが、borderがあるか・重なっている背景、などが影響しているようです。

以下に参考となる情報がありました。
https://facebook.github.io/react-native/docs/view-style-props#borderradius

結論、iOSの場合はoverflow:'hidden'を付けることで解決できます。

elevetionはiOSでは利用不可

ドキュメントにも書かれていましたし、サンプルのアプリでも対応されていたのですでに知っていたのですが、styleの「elevetion」属性はAndroidでしか効きません。

iOSで実装する場合は以下のように「Platform」を利用して出し分ける必要があります。必要であればこれに加えて、「zIndex」を使うことになると思います。

...Platform.select({
    ios: {
        shadowColor: 'black',
        shadowOffset: { width: 0, height: 3 },
        shadowOpacity: 0.1,
        shadowRadius: 3,
    },
    android: {
        elevation: 20,
    },
}),

ReactNavigationのStackNavigatorのヘッダースタイルに差異がある

StackNavigatorで設置されるヘッダーのスタイルに以下2点の差異を見つけました。

header領域に枠線がある
header領域とscreen領域の間に枠線がでます。もともとAndroidではデフォルトでelevetionが効いてました。その代替としてborderが有効になっているのではないかと思います。

不要であればStyleで消すことができます。
headerTitleStyleに枠線が表示されない
header内のタイトル文字の装飾として下線を表示したかったのですが、iOSでは出来ませんでした。
「headerTitleStyle」で下線を指定すればAndroidでは表示されていたのですが、iOSでは表示されませんでした。

解決方法もまだわかっていません。

StatusBar.currentHeightはiOSでは利用不可

keybordAvoidingViewの動作確認時に発見しました。
以下の記述をしていたため、iOSではエラーが発生しました。

keyboardVerticalOffset = {android:Header.HEIGHT + StatusBar.currentHeight}

StatusBar.currentHeightはAndroidのみで利用できます。ドキュメントにもありました。
https://docs.expo.io/versions/v34.0.0/react-native/statusbar/

Constants currentHeight (Android only) The height of the status bar.

iOSではステータスバーの部分はアプリの領域に含まれていない様子なので、意識しなくとも問題ないようです。

KeyboardAvoidingViewに関しては、OSごとに出し分ける修正を行うことで解決しました。

<KeyboardAvoidingView 
  style={styles.avoidView}
  behavior={'position'}
  keyboardVerticalOffset={Platform.select({
    ios: Header.HEIGHT, // iOS
    android:Header.HEIGHT + StatusBar.currentHeight, // android
  })}
/>

おわりに

基本的にはそのまま動作しますが、細かいところでOSの差がでるようです。

とはいえReactNativeは十分にクロスプラットフォーム開発と言えるくらいの精度ですので、とても助かります。 1人で両方のアプリが一度に構築できるというのはとても便利です。

google playとapp storeにも、いくつもフローの違いがあるようでした。躓いた所はメモしておこうと思っています。

「AdMob は app-ads.txt のサポートを開始します」というメールがAdmobから届いたので対応する

Thu, 08 Aug 2019 00:00:00 GMT

2019年8月8日にGoogle Admobから以下のメールが届きました。

AdMob は app-ads.txt のサポートを開始します
app-ads.txt 導入の準備はお済みですか？

ざっくり言うと「app-ads.txt」が導入されるので、不正な利用を防御するために設定するといいですよとのこと。
対応しなくてもすぐに広告が停止されることはなさそうですが、念の為やっておきました

結論（対応内容）

やることは以下

admobの管理画面でコードスニペットを取得して
storeのウェブサイトに登録しているドメインのルートに
「app-ads.txt」で設置する

詳細は以下です。

1.Admob管理画面で状況を確認

Admobの管理画面に項目が追加されています。
アプリメニューで「すべてのアプリを表示」を選択すると、アプリ一覧が表示されます。その画面に以下画像のように「APP-ADS.TXT」のタブが表示されています。

タブを選択すると、アプリとそこから取得されたデベロッパーのドメインが並んでいます。私はここに出ているアプリと出ていないアプリがありました。おそらくですがアクセス数やインストール数・広告のリクエスト数などで状況が変わると予測されます。

この画面にapp-ads.txtの状況が表示されています。設置していなければ、「app-ads.txt ファイルが見つかりません」でステータスもグレーです。正しく設置すれば表示が変わり緑色に、間違っていれば赤色になるようです。

2.app-ads.txtを設置

「APP-ADS.TXT」のタブの右上の「APP-ADS.TXTの設定方法」を選択すると手順が表示されるので、それにしたがって進めます。

ざっくりとは、ここに表示されるスニペットをそのままコピーして、デベロッパーのサイトとしてストアに登録しているドメインのルートにファイル名「app-ads.txt」で設置します。
例えば、「sampledomain.com/app-ads.txt」です。

3.反映されたか確認

反映には少なくとも24時間かかるそうなので、気長に待ちましょう。反映されたら「APP-ADS.TXT」のタブの表示が変わると思いますので、正常に反映されたら画像を貼っておきます。

[追記] 翌日見ると以下の画像のようになっていました。

表示がグリーンになりました。

詳細も「app-ads.txt ファイルが見つかり、確認されました」になってます。反映されました。

自分が公開しているアプリの他に「Expo」アプリの表示もあります。多分以下のどれかが原因で「このアプリでもAdmob使ったよね」って言われているのだと思います。

Expoクライアントアプリを使って実機テストしているときに、admobのテスト広告を表示した。
ExpoSDKを使用している
Expoでアプリをビルドした

Expoアプリの所持者でもありませんし、もちろんExpoクライアントアプリで広告出すこともないので、一旦おいておきます。

app-ads.txtとは

基本的なことは以下に記載されています。
Admobヘルプ app-ads.txt の概要

Adsenseのads.txtのAdmob版のようです。なりすましの被害などを防ぐために作られたものだそうです。
ヘルプにも以下の記述があるので必須ではないようですが、簡単に出来ますので対応しておくと良いと思います。

app-ads.txt の使用は必須ではありませんが、強く推奨されています。
特に自社アプリがなりすましの被害を受けていることが懸念される場合は、使用をおすすめします。

おわりに

届いたメールには「2019-08-08よりapp-ads.txtのサポートを開始します」とあり、ちょっと焦るかもしれませんが、急いで対応しなくても多分ペナルティ等はなさそうです。

アプリのなりすまし？や広告の不正配信などで被害が有る場合は、app-ads.txtで解決できるかもとのことです。 https://www.blog.google/products/admob/app-ads-txt-protects-app-revenue-and-brand/

ただし、Adsenseのads.txtと同様に間違った内容で設置していると、警告がでるらしいです。そのまま放置すると広告のブロック等のペナルティを受けるようですので気をつけましょう。

アプリのなりすましというのはどういう攻撃なのか、今度調べようと思います。

Emmet-vimでReactNative用のsnippetを作成

Thu, 01 Aug 2019 00:00:00 GMT

React Nativeでは表示についてcssに似た記法の「Style」で指定することが出来ます。しかし、ReactNativeのStyleはキャメルケースで記述しないといけません。

例えば以下のようになります。

const styles = StyleSheet.create({
  inputName: {
    borderWidth: 1,
    borderColor: '#DDD',
    width: "80%",
    marginBottom: 20,
  },
})

これ書くのがいつも面倒だったので、なんとか出来ないかやってみました。ちなみに私は開発ではVimを使っています。UbuntuでVimです。もともとcssなんかを書く際にはEmmet-vimを使っていたので、これをカスタマイズして使うのがいいかなと思いました。

結論

Emmet-vimにオリジナルのsnippetを追加することで解決しました。

軽く調べた所、VSCodeで使えるプラグイン？で以下を見つけました。
react-native-emmet

まさにこれがやりたいのですが、vimには対応していませんでした。しかし、このプラグインのsnippetの内容が公開されていたので、それを参考にして自分用のsnippetを作成しました。
react-native-emmetのsnippetの内容

概要

カスタムsnippetファイルを作る
vimrcに設定ファイルを記載

カスタムsnippetファイルを作る

今回のReactNative用のsnippetを作成しました。snippets_custom.jsonなどの名前で保存します。 Emmetのサイトにカスタマイズの書き方など載っているので参考にするといいです。

今回は以下のVSCodeのプラグインの定義を見つけたので、そちらを書き直して作成しました。
react-native-emmetのsnippetの内容

以下snippets_custom.jsonの内容です。

{
  "javascript": {
    "filters": "html",
    "profile": "javascript",
    "snippets": {
      "create": "const styles = StyleSheet.create({})",
      "pselect": "...Platform.select({ ios: {}, android: {}})",
      "sdw": "...Platform.select({ ios: { ...shadowProperties }, android: { elevation }}),",
      "v": "<View style={{}}></View>",
      "te": "<Text style={{}}></Text>",
      "v>te": "<View><Text></Text></View>",
      "img": "<Image source={{}} style={{}} />",
      "fl":  "<FlatList data={} renderItem={} />",
      "sl": "<SectionList data={} renderItem={} />",
      "sv": "<ScrollView></ScrollView>",
      "ti": "<TextInput value={} placeholder='' underlineColorAndroid={false} onChange={} />",
      "mdl": "<Modal visible={} animation='slide'></Modal>",
      "to": "<TouchableOpacity style={} onPress={}></TouchableOpacity>",
      "twf": "<TouchableWidthoutFeedback style={} onPress={}></TouchableWidthoutFeedback>",
      "th": "<TouchableHighlight style={{}} onPress={}></TouchableHighlight>",
      "twnf": "<TouchableWithNativeFeedback style={} onPress={}></TouchableWithNativeFeedback>",
      "actind": "<ActivityIndicator color='#00ff00' />",
      "btn": "<Button color='#00ff00' title='button' onPress={} />",
      "pos": "position: 'absolute',",
      "pos:a": "position: 'absolute',",
      "pos:r": "position: 'relative',",
      "t": "top: 0,",
      "t:a": "top: 'auto',",
      "r": "right: 0,",
      "r:a": "right: 'auto',",
      "b": "bottom: 0,",
      "b:a": "bottom: 'auto',",
      "l": "left: 0,",
      "l:a": "left: 'auto',",
      "z": "zIndex: 2,",
      "ov": "overflow: 'hidden',",
      "ov:v": "overflow: 'visible',",
      "ov:h": "overflow: 'hidden',",
      "m": "margin: 4,",
      "m:a": "margin: 'auto',",
      "mt": "marginTop: 4,",
      "mt:a": "marginTop: 'auto',",
      "mr": "marginRight: 4,",
      "mr:a": "marginRight: 'auto',",
      "mb": "marginBottom: 4,",
      "mb:a": "marginBottom: 'auto',",
      "ml": "marginLeft: 4,",
      "ml:a": "marginLeft: 'auto',",
      "p": "padding: 4,",
      "pt": "paddingTop: 4,",
      "pr": "paddingRight: 4,",
      "pb": "paddingBottom: 4,",
      "pl": "paddingLeft: 4,",
      "w": "width: 120,",
      "w:a": "width: 'auto',",
      "h": "height: 120,",
      "h:a": "height: 'auto',",
      "maxw": "maxWidth: 120,",
      "maxh": "maxHeight: 120,",
      "minw": "minWidth: 120,",
      "minh": "minHeight: 120,",
      "bc": "borderColor: '#000',",
      "bc:t": "borderColor: 'transparent',",
      "bw": "borderWidth: 1,",
      "btw": "borderTopWidth: 1,",
      "brw": "borderRightWidth: 1,",
      "bbw": "borderBottomWidth: 1,",
      "blw": "borderLeftWidth: 1,",
      "btc": "borderTopColor: '#000',",
      "btc:t": "borderTopColor: 'transparent',",
      "brc": "borderRightColor: '#000',",
      "brc:t": "borderRightColor: 'transparent',",
      "bbc": "borderBottomColor: '#000',",
      "bbc:t": "borderBottomColor: 'transparent',",
      "blc": "borderLeftColor: '#000',",
      "blc:t": "borderLeftColor: 'transparent',",
      "br": "borderRadius: 4,",
      "bgc": "backgroundColor: '#fff',",
      "bgc:t": "backgroundColor: 'transparent',",
      "c": "color: '#333',",
      "c:r": "color: 'rgb(0, 0, 0)',",
      "c:ra": "color: 'rgba(0, 0, 0, 0.5)',",
      "ta": "textAlign: 'center',",
      "ta:l": "textAlign: 'left',",
      "ta:c": "textAlign: 'center',",
      "ta:r": "textAlign: 'right',",
      "ta:j": "textAlign: 'justify',",
      "td": "textDecoration: 'underline',",
      "t:s": "transform: [{ scale: 1.2 }]",
      "t:sx": "transform: [{ scaleX: 1.2 }]",
      "t:sy": "transform: [{ scaleY: 1.2 }]",
      "t:r": "transform: [{ rotate: '90deg' }]",
      "t:rx": "transform: [{ rotateX: '90deg' }]",
      "t:ry": "transform: [{ rotateY: '90deg' }]",
      "t:rz": "transform: [{ rotateZ: '90deg' }]",
      "t:tx": "transform: [{ translateX: x }]",
      "t:ty": "transform: [{ translateY: y }]",
      "lh": "lineHeight: 24,",
      "ls": "letterSpacing: 1,",
      "fw": "fontWeight: 600,",
      "fw:b": "fontWeight: 'bold',",
      "fst": "fontStyle: 'italic',",
      "fst:i": "fontStyle: 'italic',",
      "fs": "fontSize: 14,",
      "ff": "fontFamily: 'Roboto',",
      "o": "opacity: 0.5,",
      "fd": "flexDirection: 'row',",
      "fd:r": "flexDirection: 'row',",
      "fd:rr": "flexDirection: 'row-reverse',",
      "fd:c": "flexDirection: 'column',",
      "fd:cr": "flexDirection: 'column-reverse',",
      "fwrap": "flexWrap: 'wrap',",
      "fwrap:n": "flexWrap: 'nowrap',",
      "fwrap:w": "flexWrap: 'wrap',",
      "jc": "justifyContent: 'center',",
      "jc:fs": "justifyContent: 'flex-start',",
      "jc:fe": "justifyContent: 'flex-end',",
      "jc:c": "justifyContent: 'center',",
      "jc:se": "justifyContent: 'center',",
      "jc:sb": "justifyContent: 'space-between',",
      "jc:sa": "justifyContent: 'space-around',",
      "ai": "alignItems: 'center',",
      "ai:fs": "alignItems: 'flex-start',",
      "ai:fe": "alignItems: 'flex-end',",
      "ai:c": "alignItems: 'center',",
      "ai:s": "alignItems: 'stretch',",
      "f": "flex: 1,",
      "as": "alignSelf: 'center',",
      "mh": "marginHorizontal: 16,",
      "mv": "marginVertical: 16,",
      "bfv:v": "backfaceVisibility: 'visible',",
      "bblr": "borderBottomLeftRadius: 4,",
      "bbrr": "borderBottomRightRadius: 4,",
      "btlr": "borderTopLeftRadius: 4,",
      "btrr": "borderTopRightRadius: 4,",
      "rm": "resizeMode: 'cover',",
      "ovclr": "overlayColor: '#fff',",
      "bs": "borderStyle: 'dashed',",
      "elv": "elevation: 4",
      "tsc": "textShadowColor: '#000',",
      "tso": "textShadowOffset: { width: 0, height: 4 },",
      "tsr": "textShadowRadius:  2,",
      "tav": "textAlignVertical: 'center',"
    }
  }
}

vimrcに設定ファイルを記載

Emmet-vimのドキュメントにもありますが、オリジナルの設定を追加出来ます。
Emmet-vim

.vimrcに上記で作成したカスタムsnippetファイルを指定します。

let g:user_emmet_settings = webapi#json#decode(join(readfile(expand('~/.vim/custom/snippets_custom.json')), "\n"))

web-apiを有効にする

JSONパーサーを含んでいるweb-apiというプラグインが必要です。
無い場合は用意しておきましょう。Emmet-vimと同様にVimにインストールすればいいです。

おわりに

これでReactNativeのStyle定義のEmmetが動作するようになりました。ファイルが.jsすなわちJavaScriptの場合はこのsnippetが適応されるようになっています。

細かいところは改良が出来ますし、他の拡張子に対しての設定や追加・継承なんかも出来ます。

そういえばneosnippet.vimを使うという手段もあったんですが、どっちが良かったんでしょうかね。今のところはReact Nativeの記法はEmmet-vimで、JavaScriptの基本構文はneosnippetという棲み分けになってます。私はそれぞれ<C-e>と<C-k>に割り当ててます。

スマホアプリ開発でFirestoreを使ってみる

Wed, 31 Jul 2019 00:00:00 GMT

最近React NativeとExpoを利用してスマホアプリを作っています。いくつかAndroidで公開もしているので興味があればこちらからどうぞ。

そのなかでもいくつかのアプリについてはFirebaseをバックエンドとして利用しました。 Firebaseは認証やDB、ストレージなどを提供するWebアプリケーション開発プラットフォームというようなGoogleのサービスです。

今回はその中でも「Firestore」というデータベースを使った感想を記録します。

概要

サーバレスという概念
Authとの連携
NoSQL型
クエリによるデータの取得

サーバレスという概念

よく考えたらややこしいのですが。Firebaseを使う場合でもAPIを用意したり、DBとしてデータを保持します。

それってサーバじゃない？と思いますが、大きく違うのはサーバの管理が不要ということです。サーバがちゃんと動いているかとかサービス立ち上げるとかがほぼ不要で、簡単に始めることができ管理も簡単です。アプリから直接DBサーバに同期するここもでき、使いどころに注意が必要ですが簡単に難しい機能を実現できます。

最初にアプリケーションを設定が必要だったり、必要な機能を有効にしたりする必要はありますが、ブラウザから設定できます。 APIなどのソースコードをデプロイするのもとても簡単です。できることは制限されますが、その分簡単に利用できます。ログなんかもブラウザで確認出来ます。DBもです。

バックエンドの経験もある私の使用感としては、サーバ管理のコストが大幅に減ることが大きく実感しました。

Authとの連携

Firestoreにはセキュリティルールをもうけることが出来ます。誰でもデータの読み取り・書き込みできては困るので、通常制御すると思います。

Firebase のAuthenticationと組み合わせて使うことで、「ログインしている場合のみデータへのアクセス可能」と言ったセキュリティルールを実現できます。Functions経由の場合はログインは不要でした。この使い方も便利そうでした。

NoSQL型

FirestoreはNoSQLと呼ばれるDBを採用しており、RDBとは大きく違います。RDBで当たり前のようにやっていたことができなかったりしますが、そもそもの仕組みが違うため概念から改めて考え直す必要があります。

コレクション、その下に複数のドキュメントが紐づく形となっており、柔軟なデータ構造を構築できます。

速度的には単純なものであればすごく早いです。しばらくリクエストがないと休止状態になっているのか少し時間がかかりますが、連続でリクエストするととても早く動作も安定しています。

クエリによるデータの取得

以下のような点で注意が必要です。

「!=」は使えない

クエリを使ってコレクション内のドキュメントを絞り込んで取得するのですが、「=」や「>」なんかは使えますが、「!=」は利用できません。説明では「>」の結果と「<」の結果を合わせることで実現できると書かれていました。ちょっと不便ですね。

ただ、「!=」を使うことがそもそもNoSQL的には良くない操作のように感じました。ドキュメントのIDのを指定して1件のみを取り出して実現する仕組みを考えたほうがいいです。

Firebaseの料金プラン的にも、Firestoreで取り出したドキュメントの読み取り件数がカウントされています。「!=」のように大量のドキュメントを取得するかもしれない操作は避けたほうがいいです。少なくともlimit付けるようにしたほうが良いかなと思います。

「count」も工夫が必要

上記の取得件数によって料金が決まることがあり、ドキュメントの件数を取得するのにも工夫が必要です。クエリに「count」はありませんので、普通にやるのであれば全件取得して、プログラム側でlengthを取得することになります。これではFirebaseの従量にも、端末のメモリにも大きく不可を与えてしまうので避けたほうが良さそうです

公式では「分散カウンタ」と呼ばれる方式をおすすめしていました。ややこしいですが、件数が増える度に数を記録する用のコレクションに複数のドキュメントを作成しておく、というものです。

分散カウンタについて

ドキュメントが書き込まれると、件数用コレクションのドキュメントの数値を1インクリメントする。countする場合はその件数用のドキュメント1件を読み取ることで取得。
しかし、Firebaseにはドキュメントは更新後、1秒間は更新出来ません。上記のインクリメントはリアルタイムでの更新が多いと大きなボトルネックになってしまいます。
そこで、件数用コレクション内にドキュメントを複数個用意します。ドキュメント書き込みの際にはこれらのどれかをインクリメントします。countを行う際はこれらの複数個のドキュメントを取得して数値を足し合わせて取得します。
これによって、書き込み時のボトルネックは用意したドキュメントの数分軽減されます。読み取りの際はドキュメントの数分の読み取り件数が消費されますが、固定値にできます。

おわりに

こんな感じで、RDBとは似ているようで異なる概念になっており、使い勝手が大きく異なります。今までの経験からRDBの利用方法を前提として考えてしまいがちですが、そもそもの仕組みが異なりますので、一度頭を空っぽにして設計してみることが大切だと感じます。

NoSQLで得意なことや、推奨されている使い方。パフォーマンスの面など知りたいことがたくさんです。

何よりサーバ側の管理等がとても楽になるのは大きいです。RDBではないことでやりにくいこともありますが、Firestoreによる制約を考えながら設計することも結構よし設計に貢献したりします。

無料でもある程度は利用できますので、Firebaseの他の機能についてもドンドン使っていこうと思います。

React Nativeでスマホアプリを作成しました

Wed, 24 Jul 2019 00:00:00 GMT

React Nativeの勉強を兼ねて、いくつかアプリを作成しました。気になるものがあったらダウンロードしてみてください。よろしくお願いします。

どれもまだAndroidのみなのですが、ゆくゆくはiOSにも対応させる予定です。クロスプラットフォームで開発できるReact Nativeを使っていますので、対応は簡単にできるつもりです。

学んだ点や躓いた点など紹介していこうと思います。

これからも引き続き色々作ってみようと思います。

作ったアプリ一覧

のっティ時刻表

Google Play

私が住んでいる石川県野々市市のコミュニティバスの時刻表アプリです。のんキーの時刻表も確認出来ます。乗り換えアプリのほうが便利かもしれませんが、せっかく住んでいるので作ってみました。誰かの役に立っていれば嬉しいです。

特に難しい機能はないのですが、タブナビゲーションとスタックナビゲーションを使ってページ遷移をしています。

お気に入りを登録する機能を実装する予定です。

お買い物メモ

Google Play

タスクを登録するアプリです。

ずっと更新していないので使いにくいです。stateの管理とか学ぶことが出来ました。その後もいくつか作っているうちに、Reactのライフサイクルや再描写のタイミングなども理解してきたので、ちゃんと作ろうと思います。

フォームで入力した内容をAsyncStrageでローカルに保存したりしています。チェックボックスで完了状態にしたり、削除したりといった挙動を画面に反映するのがちょっとややこしかったです。

結構前にビルドしたので、まだ64bit対応されていないアプリです。8月1日までに64bitでビルドして更新するつもりです。

オンラインじゃんけんバトル

Google Play

オンラインでじゃんけんするアプリです。普通のじゃんけんなのですが、グーチョキパーのそれぞれの手に名前を付けることが出来ます。オリジナルの必殺技を手に付けて遊んでほしいです。

Firebaseを利用してバックエンドを用意しました。FirestoreとFunctionsを利用してます。

FunctionのonCallとかの関数の定義法、ReactNativeアプリでのfunctionの呼び方などマスターできました。当然ですが、Firebase functionを実行しているサーバはUSとかにあるので、時間が日本と異なります。new Date()とかでちょっとつまづきました。

FirestoreはNoSQLです。効率的な使い方がまだわかっていない気がします。RDBなら設計も実装も得意なのですが、NoSQLはまだわからないことばかりです。簡単に実装できますがこれが最適化されているのか自信が無いです。

ReactNativeのアニメーションも使ってみました。LayoutAnimation を使っています。setState時の画面表示の簡単なアニメーションならこれで出来ました。もっとこったアニメーションを実装する方法もある様子ですので、試そうと思っています。

GPSメモ

Google Play

現在地の緯度経度を端末のGPAを利用して取得し、メモ付きで記録できるアプリです。

あまり使いみちは無いと思いますが、ローカルアプリの開発時に、チェックポイントの位置なんかを記録するために作成しました。これを使ってローカルのお出かけアプリなんかを作れたらなあと考えています。

端末のGPSの利用と、それに伴う権限の取得なんかを実装しました。

データの一覧を表示する画面があるのですが、作成したメモがその画面に反映されない問題がありました。setStateしたときと、画面をマウントしたときはrenderが走りますが、それ以外では基本renderされないので発生しました。画面にforcusが載ったときに、データ取得・setStateが行われるようにイベントリスナーを登録することで意図した挙動が実現できました

QRコードリーダー

Google Play

シンプルなQRコードリーダです。QRコードの読み取りと、読み取ったデータの履歴を確認出来ます。特に複雑な機能はありません。QRコードリーダもExpoSDKに用意されていたので、それを利用して実装しています。

読み取るためのカメラの領域が小さいのがちょっと悩んでいます。画面いっぱいに大きくしたいのですが、やり方がわからず。

みんなで大文豪

Google Play

みんなの投稿によって物語を作るアプリです。お題と導入だけはこちらで作成していますので、その後の物語をみんなで作っていってもらったら、面白い作品ができる。かもしれないというものです。インストール数が少ないので全く盛り上がりませんが、いつの日か盛り上がってくれたら嬉しいです。

こちらもFirabaseを利用しており、データをFirestoreに保存しています。

今は1日1回しか投稿できないので、広告をみるとかで再投稿できるようにしようと考えています。過去の作品を静的コンテンツ化してWebで見れるようにすることで、Firebseへのリクエストを軽減するつもりです。

キーボードを表示したときに入力フォームの位置を調整するKeybordAvoidingViewというのがあるのですが、いまいち挙動が掴みきれていません。一見それらしい実装は出来ていますが、ちょっとやりたいようには出来ていない状態です。とくに、正常に位置が動かない場合があることと、逆に上に行き過ぎてしまう現象を解決したいです。

開発環境

Expoを利用しています。ビルド等もサーバにやってもらえるので、とてもラクです。何よりもテストが簡単になります。

Expoクライアントアプリをテスト端末にインストールする必要がありますが、プログラムの変更をビルド無しで反映できるホットリロードが簡単に実現できるので便利です。たまにキャッシュからアプリが立ち上がり、ホットリロードが効かなくなるときがあります。端末のキャッシュやデータを消して治ることもありますが、原因は調査中です。わかったらまとめようと思います。

ビルドもExpoを利用していますので、ejectはしていません。ネイティブモジュールを特に利用するものは作っていないので、今のところは問題ないです。 ejectして自分でビルドもやってみたいと思っています。

これからやってみたいこと

Expo ejectして自分でビルド
Flutterでの開発
iOS向けアプリの開発と公開
タブレット端末の対応
インタラクティブアニメーションの採用
プッシュ通知
通知領域へのアクセス
横向き画面
テーマなどの設定機能
アプリ容量の最適化
非同期通信によるassetのロード
いろんな広告パターンを試す
ログイン機能

おわりに

ReactNativeとExpoを使えばとても簡単にアプリの開発が出来ます。

こった作りや、ネイティブの処理などは難しいところがありそうですが、さくっと作って見るという点においては、ほっとリロードなどの機能あとても便利です。ビルドもサーバにお願いすることができるので、時間も節約できます。

何が出来て何が出来ないのかといったことがまだ把握しきれていないので、もう少し触ってみようと思います。

GatsbyのServiceWorkerを削除する

Mon, 22 Jul 2019 00:00:00 GMT

このサイトはReactとGatsbyを使って作成しています。 GatsbyStarterでよさそうなものを選んで初めたのですが、サイトの更新がすぐに反映されないことに困っていました。

ズバリ、ServiceWorkerが動いているため、ブラウザのキャッシュを使ってサイトを表示していることが原因でした。ServiceWorkerがあれば、オフラインでもサイトを閲覧できるという良い点もあるのですが、サイトのトップが更新されず、新着の記事が表示されていません。

F5などで更新すれば表示されるのですが、ブログとして望ましい形ではないので修正しました。

ServiceWorkerを削除して見たので、その時の手順をメモしています。以降はサイトの更新がすぐに反映されると思います。

概要

手順
消えたことを確認

手順

ざっくりとは以下の手順になります。

「gatsby-plugin-offline」を取り除く。
「gatsby-plugin-remove-serviceworker 」を追加する。

gatsby-plugin-offline

こちらのプラグインがあるため、ServiceWorkerがブラウザで有効になっています。ですのでこれを取り除きます。

ただしこれを取り除いただけでは、すでにブラウザにキャッシュされているServiceWorkerが無効になりません。以下のプラグインを同時に取り入れます。

gatsby-plugin-remove-serviceworker

gatsby-plugin-remove-serviceworker

こちらのプラグインはすでに動作しているServiceWorkerを削除するものです。npmでインストールしたあとにgatsby-config.jsに追加します。

gatsby-config.jsのgatsby-plugin-offlineを削除してgatsby-plugin-remove-serviceworkerを追加します。記載する順序によって旨く動作しない場合があるという情報がありましたが、削除して追加するという方法は意図通りになりました。

消えたことを確認

GoogleChromeの検証から、Applicationのタブを開きます。そこに「ServiceWorker」の項目があります。ここでブログドメインのものが「deleted」になっていれば、削除完了です。

おわりに

どうでしょうか、新しい記事の更新がちゃんと反映されていないでしょうか。ServiceWorkerという仕組みは便利ですが、普通のブログとかであればそれほど必要ではないように思います。

Googleの評価等にも影響ありそうですが、Gatsbyはもともと静的なHTMLを作成して配信していますので十分早いです。これからも他にできることがあればいろいろと直していこうと思います。

Expoクライアントアプリで「Building Javascript bundle」が動作しなくなったときの解決法

Fri, 19 Jul 2019 00:00:00 GMT

ExpoとReactNativeを使ってアプリを作成しているときに発生した問題の解決方法です。

私はスマホ端末にExpoのクライアントアプリをインストールして、実機による確認を行いながら開発しています。 Expo クライアントアプリ Android

今回はExpoのホットリロードが効かなくなり、expo startをやり直しても、端末のExpoで更新ボタンを押してもテストしたいアプリが更新されない状態になりました。修正前のテストアプリがキャッシュされて動いている印象で、他のアプリをExpoで動かしてもずっと同じアプリが立ち上がる奇妙な現象が発生しました。

急に発生したので困っていましたが解決できたので内容を記録しておきます。

結論を先に言うと

Androidの設定の「ストレージ」で、Expoアプリの「キャッシュ削除」と「データ削除」を行うことで解決出来ました。破損したデータが消去された、または領域が確保されたことによって現象が解決しました。

概要

現象
調査によりわかった状況
解決方法
注意点

現象

最初は突然ホットリロードが動作しなくなりました。手動で更新ボタンを押すことでテストアプリの開発中プログラムを反映するようにしました。

さらにしばらく立つと、ずっと同じアプリが立ち上がるようになってしまいました。プログラムを修正しても反映されず、別のアプリを動かそうと他のソースでexpo startしてもずっと同じアプリが動き出します。任意のアプリの開発が出来ず、修正した内容も検証することが出来ないので困りました。

印象としては、端末にキャッシュしているプログラムをずっと立ち上げている様子でした。ただ起動時のSplashはアプリごとの画像が表示されている様子で、expo startしたディレクトリ内の画像が表示されることがありました。

調査によりわかった状況

以下その時の状況です。

他の端末では正常に動作する。
問題の端末では、expoと連携しても「Building Javascript bundle」がコンソールに表示されず、すぐにテストアプリが動き出す。
expoの通知領域から確認できるテストアプリ情報の「SHOW MANIFEST」の内容がいつも同じで、最後の方にあるloadedFromCacheがtrueになっている
端末の再起動では解決出来ず、Expoの通知領域から選択できる「CLEAR DATA」でも解決できない
Expoクライアントアプリのデータが大きくなっている。アプリのサイズは70〜80MBで、削除する前のユーザーデータやキャッシュがかなり大きな数値。削除前の合計データ量は200MB くらい

解決方法

一度Expoクライアントのデータを削除したところ問題が解消しました。

Androidの設定の「ストレージ」からアプリのキャッシュデータを削除します。Expoは「その他のアプリ」内にあります。
「キャッシュを削除」のみでは問題は解消されず、「データを削除」を行う必要がありました。

上記で解決できました。以降は元通りホットリロードも動作しており快適に検証できています。削除後は合計データ量も100MBを下回るくらいです。

注意点

端末上でExpoアプリのデータを削除すると、Expoのログイン情報が失われます。
ログインしていない状態でも使うことは出来ますが、利用する用途によっては再度ログインを行う必要があります。

おわりに

似たような現象に遭遇した場合は一度お試しください。

今回は調べても原因や解決方法が出てこなかったので、自分でなんとか見つけました。 Expoの情報は結構多く開発も盛んな印象です。英語の情報がほとんどですが本家のForumでだいたい解決できます。

Expoで64bitビルドができるようになった

Wed, 17 Jul 2019 00:00:00 GMT

以前の記事でGoogle Play Consoleにて、警告が出るという話をしていました。
ExpoでビルドしたアプリをGoogle Play Consoleにアップすると警告「Android App Bundleの利用」と「64bitビルド」

「8月1日からは64bitデバイス向けのビルドが必要」というのが警告の概要です。Expoを利用してのビルドではそれが出来なかったのですが。この度それが解決されました、良かった！

概要

発生していた警告
64bitビルドのやり方

発生していた警告

警告
このリリースは Google Play の 64 ビット要件に準拠していません

以下の APK または App Bundle は 64 ビットのデバイスで利用できますが、32 ビット向けネイティブ コードしか含まれていません。1
2019年8月1日 以降、すべてのリリースが Google Play の 64 ビット要件に準拠していなければなりません。

アプリには 64 ビットと 32 ビットのネイティブ コードを含めます。Android App Bundle 公開形式を使用して、各デバイスのアーキテクチャが自動的に必要なネイティブ コードだけを受け取るようにします。
これにより、アプリ全体のサイズが増大することを回避できます。詳細

Google Play Consoleにapkやaabをアップロードした際に、上記の警告が出ていました。 Expoでのビルドでは64bitに対応していなかったので、できることは特に無し。デタッチして自分でビルドすればなんとかなる印象でした。

64bitビルドのやり方

以下のフォーラムでの投稿にもあるとおり、対応が行われました！SDKのバージョンが33であれば、64bit向けのビルドが作成できます。特にやり方に変更は必要なく、通常通りにビルドすれば自動的に64bit向けのビルドになっています。

https://blog.expo.io/64-bit-support-and-android-app-bundles-fe0c6a28669

必要なことは「Expo SDKのバージョンを33以降にする」ことだけです。apkもaabも対応されているそうです。見た目には特にわからないのですが、Play Consoleにアップロードしてみると確かに警告が出なくなりました。64bit向けにビルドされていることが確認できます。

おわりに

8月1日に無事に間に合ったようで良かったです。とても助かります。すでにいくつかのアプリをビルドしていますがエラーもありません。安定して利用できています。

これからもExpoのお世話になろうと思います。でも、念のためにデタッチして自分でビルドするという手順も勉強して試してみようと思います。またやってみて難しかった所など共有します。

Expoで端末のGPSを利用して緯度・経度を取得する

Fri, 12 Jul 2019 00:00:00 GMT

Expoを利用して作成したスマホアプリで、端末のGPSを利用した処理を実装しました。その手順をメモしておきます。

とても簡単でした。Expo便利です。ストアにアップする際の権限周りの設定についても記載しています。

概要

必要なモジュールをインポート
端末から権限を取得して位置情報を取得
ストアにアップする際の権限周りの設定

必要なモジュールのインポート

import Constants from 'expo-constants';
import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';

位置情報取得に必要なのが「expo-location」で、それを使う際に端末から権限をもらう必要があります。その際に他のモジュールも一緒に利用します。

端末から権限を取得して位置情報を取得

公式のドキュメントの書き方を真似して書いています。これで位置情報のオブジェクトが取得出来ます。

  componentDidMount() {
    if (Platform.OS === 'android' && !Constants.isDevice) {
      this.setState({
        errorMessage: 'Oops, this will not work on Sketch in an Android emulator. Try it on your device!',
      });
    } else {
      this._getLocationAsync();
    }
  }

  _getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== 'granted') {
      this.setState({
        errorMessage: '位置情報の取得が許可されませんでした。',
      });
    }

    let location = await Location.getCurrentPositionAsync({});
  };

緯度・経度のみでなく高度や速度、方角も取得できていました。詳細は以下のドキュメントをご確認ください。
https://docs.expo.io/versions/latest/sdk/location/#type-location

以下のようなオブジェクトが取得できます。

{
    timestanp: 時刻,
    coords:{
        latitude:緯度,
        longitude:経度,
        altitude:高度,
        heading:方角,
        speed:速度,
        accuracy:精度,
    }
}

ストアにアップする際の権限周りの設定

今回の機能では以下のように「LOCATION」で権限を要求しています。

let { status } = await Permissions.askAsync(Permissions.LOCATION);

このことからストアにアップする際にも権限を利用することを知らせる必要があります。これはapp.jsonに書くことになります。

今回の機能が何に対応しているのかわからなかったので調べてみました。以下のページに表としてまとめらているので、これを参考に「ACCESS_COARSE_LOCATION」「ACCESS_FINE_LOCATION」を今回は指定しました。

https://docs.expo.io/versions/latest/sdk/permissions/

"android": { 
  "permissions": [
    "ACCESS_COARSE_LOCATION",
    "ACCESS_FINE_LOCATION"
  ], 
}

注意点

非同期による処理なのでそのことを理解しておきましょう。もしも画面がアンマウントされている状態でstateを変更すると黄色い警告を発します。

私はcomponentWillUnMount() を使って、コンポーネントがアンマウントされた場合はフラグをONにして、フラグがONの場合は非同期処理の結果でsetStateは空振りするように対応しました。

おわりに

こんな感じでとても簡単に実装ができました。方角なんかも取得できるので、色々とできそうな気がします。 GoogleのAPIを用意しておけば地図情報なんかも取得できそうでした。機会があればやってみます。

React Navigationで画面遷移時に処理を実行する

Fri, 12 Jul 2019 00:00:00 GMT

Expoでアプリを作ってますが、ReactNavigationの利用時に難しかったことをメモしておきます。マウント時でも更新時でもなく、フォーカス時に処理を行いたいというものです。

結論「‘didFocus’ event listener」を使ってイベントリスナーを登録することで実装できました。 Reactのライフサイクルも理解出来たのでとても良い勉強になったと思います。

概要

やりたいこと
「createBottomTabNavigator」のオプションでは実現できず
「‘didFocus’ event listener」を使ってイベントを登録することで実装
別のやり方もある
Reactのライフサイクルについて

やりたいこと

Reactのライフサイクルとしては、マウント時そして更新時にそれぞれrenderによって描写が行われます。
https://ja.reactjs.org/docs/react-component.html

マウント時は画面を開いた際に処理され画面を破棄するまでのこります。更新についてはsetStateを行うことで発生します。

今回は、「すでにコンポーネントがマウント済みの状態で、他の画面から遷移して再度表示した際に画面を更新したい」というものでした。

例えば、一覧画面がありその各要素を更新・削除・追加した際とかです。各要素を一覧画面のstateにしておけば要素を編集した際にrenderが行われます。今回は編集画面を別のScreenにしていたので、編集画面で要素を更新・削除しても、一覧画面では編集前の要素が表示されたままでした。

画面に遷移した際、すなわちフォーカスされた時をどうやって実装するのかわからなかったので調べました。

「createBottomTabNavigator」のオプションでは実現できず

下部のタブを作成する際の「createBottomTabNavigator」にて、configとして以下の設定ができますが、こちらをtrueにしても意図通りの挙動にはなりませんでした。

resetOnBlur - Reset the state of any nested navigators when switching away from a screen. Defaults to false.

説明にもありますが画面から離れた際、すなわちフォーカスが外れた際にのみstateのリセットが行われます。タブナビゲーションで遷移していればこれで良さそうでしたが、今回は同一タブ内でスタックしているscreen間での遷移でしたので、意図通りに更新されませんでした。

「‘didFocus’ event listener」を使ってイベントを登録することで実装

https://reactnavigation.org/docs/en/function-after-focusing-screen.html
上記のページにズバリやりたいことがありました。こちらを参考にすることで意図した挙動を実現できました。

マウント時に、didFocusにイベントリスナーを追加しておくことで、フォーカスされた際に処理を実行できます。この中に、データの再取得とsetStateを実行するようにしました。

エクスポートする際にwithNavigationを追加すること。アンマウント時にイベントリスナーを開放することも忘れないようにしましょう。

import { withNavigation } from "react-navigation";

~~~~~~
  componentDidMount() {
    const { navigation } = this.props;
    this.focusListener = navigation.addListener("didFocus", () => {
      // The screen is focused
      // Call any action
    });
  }

  componentWillUnmount() {
    // Remove the event listener
    this.focusListener.remove();
  }
~~~~~~

export default withNavigation(TabScreen);

別のやり方もある

同じページに記載されているのですが、「withNavigationFocus」と「isFocused」を利用することでも実現ができる？ように書かれていました。

ただ、このドキュメントの例では「componentDidUpdate」の中で処理が行われているため、更新時にフォーカスが移ってきたかどうかを判定するものと判断し、利用しませんでした。

Reactのライフサイクルについて

基本的に以下のドキュメントに書いてあることですが、この機会にまとめとして記録しておきます。
https://ja.reactjs.org/docs/react-component.html

マウント

コンポーネントのマウントの際は以下の順に実行されます。

constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

使ってはいけないもの

UNSAFE_componentWillMount()

更新

更新はpropsやstateの変更によって発生する。コンポーネントが再レンダーされるときに、これらのメソッドが次の順序で呼び出されます。

static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

使ってはいけないもの

UNSAFE_componentWillUpdate()
UNSAFE_componentWillReceiveProps()

アンマウント

コンポーネントが DOM から削除されるときに呼び出されます。

componentWillUnmount()

おわりに

ReactNavigationを使うことでタブ構造やスタック構造によるページを簡単に作成することが出来とても快適です。 Expoを使ったアプリでもWebの様に利用できるため、知識を流用しやすいです。

URLとかメタタグ何かのSEO処理はちょっとややこしそうですが、アプリであればそれほど考えることもないのでさくっと実装ができます。

タブナビゲーションやスタックナビゲーションなど、それらしい形になるものが一通り揃っているので、とりあえずデフォルトのアプリでも触ってみると理解が深まって良いと思います。最初はややこしいと思いましたが、ScreenとStackとTabナビゲーションの関係をドキュメント見ながら理解するとすぐに使いこなせるようになりますよ。

Expoを利用したアプリでFirebaseを導入する方法

Thu, 04 Jul 2019 00:00:00 GMT

Firebaseの機能をスマホアプリで利用したかったので、Expoを使った実装で試してみました。特に難しい点はなく簡単に出来ます。以下手順を記載しています。

概要

Firebaseの準備
npmで「firebase」をインストール
「firebase」をインクルード
Firebase Authを利用する
Firebase Functionsを利用

Firebaseの準備

まずFirebaseの管理画面でプロジェクトを作成します。

アプリの種類はWebアプリを選択

Firebaseにてアプリを設定する際に、「Web」「Androird」「iOS」のいずれかを選択する必要があります。今回はReactNativeとExpoによるクロスプラットフォームなのでどれにするか悩みましたが、結論「Web」を選択すれば問題ありません。

npmで「firebase」をインストール

npm install firebase

ですね。firebase関連のパッケージが他にもいくつかあるのですが、これで問題ないです。必要なものをまるごとインストールする形です。プログラムで利用する際に、必要なものを選択してimportしましょう。

npm startを行うとエラー

上記firebaseパッケージをインストールした後、いつものようにnpm startでExpoを使ってローカルでアプリを立ち上げた所エラーが発生しました。監視対象のファイル数の上限を超えたことが原因でした。Linuxでファイル監視が動作しているときに起こり得るエラーらしいです。

System limit for number of file watchers reached

真っ当な解決策として、不要なパッケージを取り除いて進めたいところです。firebase関連の機能ごとのパッケージを利用する方法はどうかと考えましたがうまくいきませんでした。ですので、今回は監視対象の上限を大きな数値に設定することで解決しました。

ファイル監視数の設定を確認
```
cat /proc/sys/fs/inotify/max_user_watches
```
上記コマンドで監視ファイルの上限を確認出来ます。デフォルトは「8192」になっていました。
ファイル監視数の設定を変更
```
echo fs.inotify.max_user_watches=14288 | sudo tee -a /etc/sysctl.conf
```
上記コマンドで数値を変更できます。数値の所を適したものに変更しましょう。私はいきなり大きくするのは嫌だったので少しずつ上げて確認しました。

エラーが出なくなりfirebaseを利用する準備が出来ました。

「firebase」をインクルード

実際にプログラム内でFirebaseの機能を利用する場合は以下のようにします。必要なプラグインのimportとfirebaseSDKの初期化を行います。 Firebase.jsというファイルでcomponentとして切り出して利用できるようにしています。

import firebase from 'firebase';
require("firebase/functions");

const firebaseConfig = {
    apiKey: "管理画面で取得した情報を記載",
    authDomain: "管理画面で取得した情報を記載",
    databaseURL: "管理画面で取得した情報を記載",
    projectId: "管理画面で取得した情報を記載",
    storageBucket: "管理画面で取得した情報を記載",
    messagingSenderId: "管理画面で取得した情報を記載",
    appId: "管理画面で取得した情報を記載"
};

try {
  firebase.initializeApp(firebaseConfig);
} catch(e) {
  console.log(e);
}

export default firebase

今回アプリ内ではfireabseのAuthとFunctionsを利用します。

Firebase Authを利用する

まずはFirebaseのアカウント認証機能を利用します。管理画面で機能を有効にして、ログイン方法も必要なものを有効にしておきましょう。

アプリ内での実装

先程作成したFirebase.jsをimportします。

import firebase from '../components/Firebase';

上記を利用してログインを行います。以下は匿名認証の例です。

firebase.auth().signInAnonymously()
  .then((result)=>{
    console.log('sign in successfully');
  }).catch((error) => {
    console.log(error.message);
  })

Functionsを利用

次はFunctionsを利用してみます。こちらも管理画面で機能を有効にします。そして、アプリとは別の場所でfirebase initなどを進めて、利用する関数をFirebase Functions側に実装・デプロイしておきましょう。関数を定義する際は「onCall」で定義したものをFirebase functionsにデプロイしておきます。

exports.関数名 = functions.https.onCall((request, response) => {
    //
    // 処理
    //
}

アプリ内での実装

ファイル上部で先程作成したFirebase.jsをimportします。

import firebase from '../components/Firebase';

以下で、引数を渡してFirebase functionsにリクエストを行うことが出来ます。

let getItems = firebase.functions().httpsCallable('関数名');
getItems({date:name,skill:skill}).then((result) => { 
    //
    // 成功したときの処理
    //
}).catch(error => {
    console.log(error.message);
})

私はFunctions内でFirestoreを使ってデータのやり取りを行う形で実装しました。アプリから直接Firestoreを操作することもできます。

おわりに

とても簡単に実装が出来ました。特にExpoをejectする必要もなく、そのままExpoでビルドが行なえます。

Firebaseを使うことで簡易なサーバ側の処理を行うことが出来ますので、データ同期やログインなどの複雑な処理を行うアプリの場合選択肢として良いのではないかと思います。自分でサーバを用意しなくても良いですので管理の必要も無く快適です。

ExpoでビルドしたアプリをGoogle Play Consoleにアップすると警告「Android App Bundleの利用」と「64bitビルド」

Sat, 29 Jun 2019 00:00:00 GMT

先日、React Native + expo で作成したアプリをExpoでビルドしてアップロードしたのですが、アップロード後に警告が出ました。2つ警告が出ており、どちらもアプリのビルドに関する内容です。

これらは無視しても先に進むことができます。しかし、内容のメッセージから察すると2019年8月1日以降は状況が変わりそうですので、解決できないか調べました。

調査のためにはExpoのフォーラムなどを確認するのがよいです。英語なのですが、そもそも日本語の情報はまだまだ少ないので、本家のサイト確認するのがおすすめです。簡単な英語ばかりなのでGoogle翻訳しながら読める様なものばかりです。

Expoフォーラムサイト

結論を先に言うと

「Android App Bundle」の件
Expoでのビルドの際にオプションを設定することで解決できました。以降はこの方法でビルドを行えばいいのかなと思います。
「64bitビルド」の件
Expoはまだ未対応の様子です。コミュニティでは8月1日までに対応する予定ということですので、その情報を受けてから対応するしかなさそうです。

発生した警告

以下の2つが発生していた警告です。

1. Android App Bundleの利用

APK が最適化されていません
警告:
この APK では、使用されていないコードやリソースがユーザーに送信されます。Android App Bundle を使用すると、アプリのサイズを小さくすることができます。
デバイスの設定に合わせてアプリを最適化しないと、ユーザーのデバイスにダウンロードしてインストールするアプリのサイズが必要以上に大きくなります。
アプリは、サイズが大きくなるほどインストール成功率の低下を招き、ユーザーのデバイスのストレージを消費します。

解決策:
Android App Bundle を使用してデバイスの設定に合わせて自動的に最適化するか、複数の APK を使って自分で管理します。

解決方法

すでにExpoはAndroid App Bundleに対応しています。ズバリ、ビルドコマンドにオプションをつけることで利用できます。

expo build:android --type app-bundle

特に準備や変更が必要ないので気軽に利用できました。

2. 64bitビルド

警告
このリリースは Google Play の 64 ビット要件に準拠していません

以下の APK または App Bundle は 64 ビットのデバイスで利用できますが、32 ビット向けネイティブ コードしか含まれていません。1
2019年8月1日 以降、すべてのリリースが Google Play の 64 ビット要件に準拠していなければなりません。

アプリには 64 ビットと 32 ビットのネイティブ コードを含めます。Android App Bundle 公開形式を使用して、各デバイスのアーキテクチャが自動的に必要なネイティブ コードだけを受け取るようにします。
これにより、アプリ全体のサイズが増大することを回避できます。詳細

解決方法

こちらについてはExpoのフォーラムでも話に上がっていました。この問題は把握しており、現在対応中のようです。2019年8月1日までには対応する予定ですので、それを待ってから対応することになりそうです。

Expoの対応を待てば良さそうです。Expoのバージョンをアップデートする必要もあると思いますので、プログラムの修正が必要になる箇所があるかもしれません。8月1日までに忘れずに対応するようにしましょう。

おわりに

久しぶりにビルドしたものをアップしたら警告が出たので何事かと思いました。それほど問題もありませんでしたし、順次対応されて解決できそうなものばかりでした。ただExpoのアップデートが必要になる可能性がありますので、エラー等発生しないか要チェックです。

久しぶりに触ってみて改めて感じましたが、Google Playのリリース関連のフローはややこしいです。内部テストやクローズドテストあたりのフローについてもややこしいことが多いので、たまに触っておかないと忘れてしまいます。

こまめに触るかGoogleの変更を追いかけるかを続けようと思います。もしくは、警告を読んで対応できるように知識を蓄えておくことが必要そうです。

追記

後日、64bitビルドも対応されました。特にコマンドの変更は必要なく、通常通りにexpoでビルドを行えば64bitビルドで作成されます。

しゃがんでデザインを見る『デザインの知恵』

Mon, 24 Jun 2019 00:00:00 GMT

問題を解決するデザインというよりは、情報デザイン・社会のデザインに関する内容の本です。考え方や概念についてのスケッチが書かれており、体型的に理解することが出来ます。

芸術と科学を比較しつつ、その学びや意味を考えているような本です。著者はデザイン系の学校の教授のようで、デザインの授業などを行っています。デザインの学び方や取り組むべきことなどについて考察しているので興味があればとてもおもしろい内容です。

プロダクトやWebデザインのこと、グラフィックのことは書いてありません。非物質的なデザインとその学び方につての知識を学ぶことが出来ます。言葉のデザインといったところでしょうか。

同じデザインと言っても、いろんなジャンル考え方があるのでややこしいですね。情報デザイン、グラフィックデザイン、プロダクトデザイン、建築デザインと言ったところでしょうか。それ以外にも「デザイン」という単語は色んな意味で使われるように思います。

デザインに唯一の正答はあるか

理科や数学では一つの正しい回答が得られますが、デザインを行う場合はそうではないようです。

回答する人によって答えは異なりますし、それがいいことでもあります。更には使う人がいて始めてデザインが意味をなします。そのため使い手が多様であるためデザインもまた多様となります。

そのため学び方も難しいようです。ただ答えを探すのではなく、問題を定義することや創作を行うことなんかも挙げられています。更には野菜を育ててみたりなど内容は多岐にわたり、それらの活動の中で道具やものとの関連性を見つけていくことになります。

科学と芸術の関係

科学は一つの答えに向かって可能性を狭めながら唯一の答えに迫っていく、垂直の答え探しです。芸術は未知の世界への可能性を横へ広げて選択肢を増やしていく、水平の答え探し・答えづくりだと言えます。

科学と芸術では探求の方法・探求の狙いが根本的に異なるものです。

やって・みる・わかる

これはデザインの展開法のことらしいです。

前半の「やって・みる」は自身が体験することで何かを感じること。後半の「みる・わかる」は表現を振り返ることでその意味を見出すことだそうです。こうして進めることでデザインの考え方となるようです。

おわりに

著者が携わったデザインプロジェクトの実例なんかも載っています。デザインを行う上での発見やプロセスなどが描かれているので興味を持って読み進めることが出来ます。

デザインの学び方として、スケッチを書くというものが挙げられていました。気になったもの面白そうなものをスケッチして、どこがおもしろいのか、どうして気になったのかということを考えます。次の日や時間がたってからまたスケッチを行い、その間での変化を観察します。そうして見ることで、そのものの意味や関係性が見えてくるそうです。

好奇心に頼りしゃがみこんでものを観察することにも意味があるそうです。子どもたちと一緒に観察できるような体験ができるとデザインの勉強として効果的らしいです。どこが気になったのか、なぜそう思ったのか、どのように変化しているのかといったことを、自分の表現から振り返って考えることで、より深くものを見ることが出来ます。

面白い仕事をするのではなく、仕事を面白くするような考え方が必要です。子供の時の感覚に戻っていろいろなものに無邪気に取り組むことが、改めて必要になっているのかもしれません。

問題の根源を考えること『誰のためのデザイン？』

Fri, 21 Jun 2019 00:00:00 GMT

UIデザインの観点で良くオススメとして挙げられる本です。近所の図書館でたまたま見つけたので読んでみました。

思っていたよりも本が厚く、内容は盛り沢山。読むのに体力を結構使います、452ページあるので。その分学びも多く、UIデザイン/UXデザインの概念・目指すべきことがわかりました。

参考文献も山ほど載っているので、興味がある方はそれらにも手を伸ばしてみると良いと思います。読んでみたいと思った本がたくさんありました。

作者は認知科学者です。人間の認知能力や発見判断の能力を視点として、デザインについての言論を解説しています。普段のデザインとは異なる点からの視野を得ることが出来ますし、科学的・論理的なデザインの考え方を学ぶことが出来ました。

この本はすぐに役に立つハウツーではなく、デザイン思考の概念などが多いです。長く時間をかけて温めていく必要があります。その場で使える付け焼き刃ではなく、長く使える基礎的な知識や考え方といったところでしょうか。

デザインの要素

良いデザインにおける重要な特性は2つ。

発見可能性

何をどうすればいいのか
→ 操作すべき場所を見つけられるか、ひらくためのとってとかボタンとかがわかりやすいか
理解

何を意味しているのか、どんな使われ方をするのか
→ 開くためのボタンや取っ手をどうすればいいのか、押すのか引くのかなど

以下の3つのデザインについて考察しています。色やレイアウトよりも、インタラクションな表現であったり操作するまでの理解・ルールなどに重点が置かれている印象です。

インダストリアル・デザイン

機能・価値・外観を最適化する概念と使用を作る、形と素材を考える。
インタラクションデザイン

何ができるか、何が起きているか、についての理解を向上させる。理解可能性と使いやすさを考える心理学、デザイン、アート、情動の原則を利用する。
エクスペリエンスデザイン

質と愉しさに焦点を合わせ、製品・プロセス・サービス・イベント・環境をデザインする。情動面への影響を考える。

人間中心デザイン

人間中心デザイン（Human-Centered-Design）は心理学とテクノロジーを理解することから。ニーズと能力を取り上げ、それに合わせてデザインする。人間から機械、機械から人間へのコミュニケーションをデザインします。

特に重要なこととして、旨くいかないこと旨くいかなかったときのことを考慮することが大切です。

インタラクションの要素

インタラクションは以下の要素で構成されます。

アフォーダンス

ものと人の関係のこと、可能か不可能が明確に知覚可能であると良い
どんなことが可能なのか。「押せる」「動かせる」
シグニファイア

アフォーダンスが存在することを示すもののこと。記号とかが代表的だが、音とかも含むことが出来ます。
どこでできるのか。「丸いところを押す」「矢印の方向に動かせる」
制約

物理的、文化的、意味的、論理的の4つ。
対応付け

どのボタンがどの電気と対応しているのか。集合の中での対応のこと。どこを動かせばどこが動くのか。
フィードバック

要求に対してシステムが働いていることを知らせる手段。操作が伝わっているか、受け取っているのか。遅いと不安、多すぎても不安。
概念モデル

ものがどう動くかの説明。上記の要素が組み合わさってこれが作られる。人間はそれを理解して道具を使うことができる。マニュアルを読まないとこれが理解できないものは好ましくないと言える。
発見可能性

何が行えるのか？今はどんな状態なのか？が判断できること

行為の心理学

何かを使う時2つの隔たりに出会います。これらの隔たりへの理解を手助けするのがデザインです。これらに対して、「わからない」「自分にはできない」という判断を人間が感じてしまうのはデザインの失敗。

どう動かせばいいのかという隔たり
何が起きたのかという隔たり

行為の7段階

ゴール
どうなりたいか
何を達成したいか
プラン
どうするか
代替となる行為は何か
詳細化
なにをするか
今どの行為ができるか
実行
する
どうやってやるのか
知覚
状態が変わった
何が起こったか
解釈
ということはこうなった
それは何を意味するのか
比較
ゴールにたどり着いたのか
それで良いのか、達成したのか

3つの処理レベル

本能レベル
良いか悪いか、安全か危険かの潜在意識的な反応
行動レベル
学習によってもたらされる、パターンへの対応
内省レベル
認知的でゆっくりしている、状況や行為を評価して、予測した上で処理する

エラーの原因

根本原因解析のために5回「なぜ」を繰り返すことが紹介されています。

ほかにも、生じる前では思いつきもしなかったのに、起きたあとでは明白で予測可能だったと見えてしまうこともあります。後知恵では物事は論理的に見えるそうです。

スイスチーズのメタファー

良いメタファーだったので紹介します。エラーによる事故の発生を「スライスされたチーズ」で説明しています。

各スライスはそれぞれがタスクとなっており、それぞれに穴が複数空いています。この穴がエラーです。それらの穴が一直線に揃ってしまったとき、事故の発生です。

適切にデザインされていればエラーが起きたとしても事故にはなりません。穴を通過する事があっても次のスライスで止まるはずです。これは障害に対する回復力といえます。

事故の「まさにその」原因を探そうとするときは、チーズ一枚にだけ意識が向いており、複数のエラーが原因になっていることに気づけません。「もし〜だったら」という単一の原因を探してしまいがちですが、実際は原因は複数のものが重なっています。

このチーズのメタファーでは事故を減らすための方法として、以下の教訓を得られます。事故を防ぐためにできること、やるべきことは多面的に複数あるはずだということです。

チーズのスライスを増やす
穴の数を減らす・小さくする
穴が整列しないようにメカニズムを独立する
穴が整列しそうな場合警告する

デザイン思考

作者のモットーとして「解決するように求められている問題を決して解決しないこと」が挙げられています。求められている問題は、実際の問題でもなければ根源的な問題でもないことが多いからです。

何が本当の問題なのかを理解することなしに、目の前の問題を解決していることが多く、作者はそのことを危険だと考えています。どこから問題が来たのか根源は何なのか、根本的な問題を正しく解決できることがデザインです。「間違った問題への見事な解決」はむしろたちの悪いものとして扱っています。

デザイン思考の進め方の例として、すぐに問題を解き始めるのではなく本当の問題を探すことから初めます。周りからは後戻りしているように見えるので、進捗はマイナス。管理職からは嫌な目をされることが想像できますね。

おわりに

書いてある内容は難しめで量も多いのですが、たしかにデザインを行う上で重要な概念だと思いました。実際のプロダクトや道具に関するUI/UXの説明が多く、プロダクトデザインなんかにも通じるところがありました。

デザインを行う上で、依頼された問題のみを解決するのではなく、そもそもの問題を見つけること。この事がしっかり書いてあり、デザインを何のために使うのを理解できました。

そもそもの概念などは、なかなか学ぶ機会がありません。人に教えてもらうか本で学ぶかしか無いと思います。デザイナーに限らず、早いうちに理解しておきたい問題解決論でした。ぜひ一読をおすすめしたいです。

お手軽で快適なサーバレス開発『Firebase入門』

Fri, 14 Jun 2019 00:00:00 GMT

Googleが提供するFirebaseに関する解説書です。バックエンドの処理をサーバを用意せずクラウドで行うことができるサービスです。データベースや関数実行、ログイン機能などが利用できます。いわゆるサーバーレスアーキテクチャってやつです。

Firebaseには無料で使える枠もあるので、試しに利用することが出来ます。サーバ管理の必要はなく設定も簡単です。サーバ用意するよりも断然お手軽ですが、その分自由度と性能の面で相談することになります。Webサービスはもちろん、スマホアプリのバックエンド処理に用いられることも多く、とても便利なサービスです。

入門書を見つけたので、一通り読んで試してみました。公式のドキュメントでもそれなりに使えますが、この本ではWeb・iOS・Androidのプラットフォームでの使い方が紹介されています。実際にFirebaseの管理画面を触りながら進めると理解が深まるのでおすすめです。

アプリやWebサービスを作ってみた、次はバックエンドでデータベースやログインの実装をしたい、と考えている人に読んでほしいです。

サーバ立てて実装するか、Firebaseで済ませるか検討してみるのもおもしろいです。

サーバーレスを選択する必要性

簡単に実装できること、サーバ管理の負担がなくなることなどが挙げられます。

サーバ管理者の負担

サーバの管理は思ったより大変です。アクセス集中したサーバが落ちたり、障害が発生することもあり心配事は多いです。ハード・ソフト・デプロイ・メンテナンス・ネットワーク・データベース・電源・HDD・サイバー攻撃・アップデートとか、それはもうさまざまです。

オンプレミス以外のクラウドサービス・VPSなどの選択肢も増え、責任をサービスに任せられる形になりましたが、それでもサーバ管理・立ち上げ・運用は大変です。

専門知識も問われるので、管理する専門の人を用意しないといけないこともあります。サーバ管理者は新しい知識が得られるおもしろい領域ですが、プログラミングをガンガン書くわけではないため、縁の下の力持ちな役目になります。システム運用においてとても重要なのですが、皆さんは興味はあるでしょうか。

サーバーレスという代替案

その辺の懸念を軽くできるのがサーバーレスという手法です。代表的なプラットフォームとしてGoogleの提供するFirebaseが挙げられています。

ユーザー認証・データベース・ストレージ・ホスティング・クラウドファンクション・機械学習・アナリティクス・メッセージング・プレディクションなどの機能が利用できます。一部ベータ版の機能もありますので確認してから利用しましょう。

Firebaseでは無料プランがありますので、とりあえずこれを使ってみましょう。枠を超えると利用できなくなるので有料プランに拡張する必要があります。定額のものと従量課金のプランが用意されています。

サーバーと並行して利用する手法

中のコラムでサーバレスの利用実例がありました。巨大なWebAppをAWSのサーバで動かしており、データベースもAWSで動いているサービスです。

そこにスマホ版のアプリを作成します。アプリでのみ必要なデータに関しては、Firebaseを利用してデータを扱うようにします。アプリでのみ表示できる特集記事のデータとかでしょうかね。

このようにすでに動作しているサーバと並行して、追加のデータサービスを追加する場合などに、サーバレスを使うことがあるようです。利用用途がWebとスマホで切り分けられるのであれば確かに良い使い方だと思います。

各プラットフォームでの利用法

Webの場合、クライアント側でscriptで利用する場合と、node.jsで動かす場合が選べる。
AndroidはJavaでAndroidStudioを利用する場合。
iOSはSwiftでXcodeとCocoaPodsを利用する場合。

全編これらの実装パターンを紹介していますので、当てはまるプラットフォームの内容を読んでいけば良いです。実質3分の1位を読めば良いです。私はWebでの利用が多いので、Webの部分を重点的に読みました。

WebでFirebaseを利用する上で参考

モジュールの利用

firebasee.jsはすべての機能を含むためで容量が大きい。 firebase-app.js+各機能のパッケージを使うことで容量を削減できる。

データベースの利用

この本ではRealtime DatabaseとCloud firestore両方の情報が書いてあります。これからはCloud firestoreがメインになっていくのかと思いますが、両方の基礎的な知識と使い方が書いてあります。

whereについて

CRUDは普通に出来ます、データ取得するときに並び替え、絞り込みも可能です。絞り込みについてはちょっと特殊でした。前方一致検索の場合

doc.where("name",'>=', "検索文字").where("name",'<=',"検索文字"+ '\uf8ff').get().then()

ざっくりこんな感じです。ポイントはWhereをチェーンでつなげることと、「\uf8tt」の文字を連結したものを指定します。この文字はFirebaseのドキュメントを見たところ以下の記載がありました。覚えておこうと思います。正規表現でも利用できたら便利なんですけどね。

\uf8ff 文字は Unicode 範囲内の非常に高いコードポイントです。  
この文字は Unicode のほとんどの通常文字より後に来るため、クエリは 検索文字 で始まるすべての値に一致します。

Storageの利用にはCORSの設定が必要

FirebaseのStorageの機能を利用することでファイルをクラウドに配置しておくことが出来ます。

しかしHostingで与えられるドメインとStorageで与えられるドメインが異なるためCORSの制約に引っかかります。そのままでは利用できません。以下の内容のエラーが発生します。

No 'Access-Control-Allow-Origin' header is present on the requested resource.

ちなみに「CORS」とは「オリジン間リソース共有、 Cross-Origin Resource Sharing」の略です。異なるドメインへのフロントエンドのリクエストに関しては制御されており、許可されていないとデータは送信されません。Firebasee Storageでもこの制御があるため、設定する必要があります。

CORSの設定変更方法

Google Cloud SDKのインストール

https://cloud.google.com/sdk/ からインストールします。

Firebaseの機能は実はGCPを利用しています。ですのでStorageの機能の設定については、GCP経由で設定を行う必要があるようです。

インストールが完了したら以下のコマンドを実行します。新しい構成を作成するコマンドでGoogleアカウントでのログインが求められます。Firebaseのアカウントと同じものでログインしましょう。
```
gcloud init
```
cors.jsonの作成

以下のファイルを作成します。ファイル名は「cors.json」にします。originの部分にはHostingのドメインを設定します。
```
[
    {
        "origin": ["https://tenka-ichi.web.app"],
        "method":["GET","PUT","POST","DELETE"],
        "maxAgeSecond":3600
    }
]
```
jsonの設置

Storageに割り当てられているURLを確認します。Firebase管理画面のStorageのファイルの画面で上部に表示されています。以下のような形式のURLです。〇〇のところはプロジェクトの名称が入っています。
```
gs://〇〇.appspot.com
```
上記で確認したURLを使って以下コマンドを実行することで、cors.jsonをアップロードします。
```
gsutil cors set cors.json gs://〇〇.appspot.com
```

これで設定完了です。設定したHostingURLからStorageにリクエストを行うと、正常にデータを返してくれるようになりました。

ただ、ローカル環境からのリクエストについては引き続きエラーです。ローカルからもリクエストが通るようにしたいです、調べてみようと思います。

おわりに

Firebaseとても便利です。簡単に準備できますし、一通りのバックエンド処理も可能です。既存のフレームワーク等を利用することは出来ませんが、それくらいで実現できる簡単な要件に向いているのだと思います。サーバの管理も必要ありませんし、使えるとことでは積極的に利用を検討していきたいと考えています。

公式のドキュメントはちょっとわかりにくく親切ではありません。この本を読めば、一通りの機能のセットアップ・準備の手順と、各プラットフォームからの使い方がわかるので良かったです。

時間見つけて、Firebaseの一通りの利用方法をまとめていこうと思います。

create-react-appを使ったReactアプリの作り方とNext.jsへの期待

Thu, 13 Jun 2019 00:00:00 GMT

Reactでアプリケーションを作る場合「create-react-app」を利用することで、簡単に環境を用意することができるのでオススメです。

今回は「create-react-app」に関する説明と使い方、さらにこれから使ってみようと考えている「Next.js」についての情報を書きます。

Reactを使ってSPAを作ってみたいという人にぜひ読んでほしいです。create-react-appを使って得た経験から、簡単にできること、逆に出来ないことを紹介します。

その上でこれから時間を見つけてNext.jsを使ってみようと考えています。そのことへの期待も書いておきます。実際に使ってみた感想はまた今度書く予定です。

create-react-app

https://github.com/facebook/create-react-app

Reactを開発しているFacebookが公式に用意している、コマンドツールです。 ReactやJSXを利用するためにはいくつかの依存するツールが必要なのですが、それらを1コマンドで用意してくれるものです。

とても簡単なので勉強とかに利用するのであればオススメです。

使ってみる

npmなら以下のコマンドでインストールした後

npm install create-react-app

以下のコマンドを実行することで、「my-app」という名前でディレクトリ構成が作成されます。

npm init react-app my-app

Reactを動かすのに必要なものが一式揃っており、babelとかWebpackとかを自前で用意しなくても良いです。 package.jsonの用意や運用管理はややこしくなりがちですので、任せることができるとスムーズに出来て良いです。

開発時にローカルで動作を確認することも簡単に出来ます。必要な設定は自動で作成されます。

npm start

静的ファイルとしてのビルドも出来ます。こちらも必要最低限の設定は自動でされているので、すぐに試すことが出来ます。

npm run build

/buildディレクトリに出力されたファイルをサーバにデプロイすれば公開です。簡単ですね。Netlifyとかならホスティングサービス側でビルドすることもできるので、とても便利です。

SPAを構築するなら十分

とりあえずSPAを作る上で最低限のものは入っています。簡単なSPAやReactの勉強に使うのであれば十分な内容になってます。依存関係なんかも用意してくれるので、とても便利。

避けたほうがいい場合

バックエンドのフレームワークと合わせて利用したい場合はもっと柔軟なものを利用したほうがいいそうです。RailsやDjangoとかでサーバサイドを実装する場合ですね。SPAで作る必要がない場合も、特に利用する必要はなさそうです。
SSRを実装したい場合はNext.jsなどの利用が推薦されています。create-react-appはあくまでも静的なJS・HTML・CSSを用意するだけになっており、そのことでバックエンドの心配をなくしました。
ブログなどのコンテンツであれば、Gatsbyの利用を進められています。このブログもGatsbyで生成しています。動的に要素が変わるとかユーザーが投稿するとかであれば無理ですが、管理人が更新するだけのブログなのでGatsbyで大丈夫ということです。
もっとカスタマイズしたい場合は「Neutrino」を参考に上げています。これについてはよくわかってません。時間があったら使ってみます。

SEOのことを考えるとSSRしたい

SPAの弱点だと思うので仕方無いとも思いますが、できるならSSRを実装したいです。 OGPやSEO関連の懸念が払拭できればとても便利なのですが。

create-react-appではSSRについてのフォローはありません。公式Githubに書いてあるとおりNext.jsなどのフレームワークを利用するのがオススメらしいので、ちょっと調べてみました。

Next.js

https://nextjs.org/

Next.jsとは

Reactを使ったフレームワークです。純粋なReactだけでは実装が難しかったことについて、いくつか簡単に実装できるようになります。上記にも書きましたがSSRを実装したいという場合に、Next.jsの使用を推奨されています。ですのでSSRに対してどのくらい便利なのかという期待をもっています。

ちなみにVue.jsのフレームワークはNuxt.jsです。名前が似ているのはNext.jsを参考に作られたからだそうです。ややこしいのでやめてほしいですが仕方ないですね。

できること

Next.jsを使うことで以下のことが簡単にできるそうです。

ファイルのディレクトリ構造によるルーティング

ルーティングのルールをディレクトリ構造で指定できるということです。ややこしいですが、pagesディレクトリ以下に設置したファイル構造がそのままURLの定義として反映されるみたいなことです。
import の最適化

宣言したimport文が解釈され、必要なページに配信されるようになるようです。不要なimportとかが解決されるので便利だとは思います。
Server Side Rendering

SSRも簡単に実装できるようです。サーバ側でnode.jsを動かす必要があがます。となるとNetlifyやFirebaseでは実現できなさそうです。
Static Exporting

静的なコンテンツとしてエクスポート出来ます。これを使ってエクスポートしたページを設置すれば、SSRを実現できるという考え方がある？様子です。それはSSRなのか？とは思いましたが、SEOとかOGPとかは確かに意図したものにできそうなので、良しとしましょう。よく考えればGatsbyはこれに該当するものですね。

SSRについて

というわけで、Next.jsでSSRを実装する場合、サーバ側にNode.jsを立ち上げて動かす・または静的なHTMLとしてサイトをエクスポートして設置するの2パターンあるようです。

FirebaseやNetlifyではサーバ上でnode.jsを動かしてリクエストに答えるのは難しいので、後者の手段になります。まあサーバーレスをイメージしたサービスかと思いますので、SSRを実現しようとすることはそもそも矛盾しているのかもしれません。静的コンテンツをCDNで配信するくらいで実現できる要件に抑えることのが大切に思います。

Node.js動かすサーバがあるなら、最初からrailsとかLaravelとかでサイトを実装しそうですがどうなんでしょうか。やっぱりSPAとかサーバレスな環境では、SEOなどの問題は大きく残っている印象です。

サーバレスでさくっと作る！ → SEO観点からSSRをしたい → サーバが必要！
というような流れになる気がします。それなら最初からサーバサイドをPHPやRubyで作るところから始めるよな。と思いました。

思い切ってSSRを諦めるという決断が必要なのかもしれません。もしかすると。

おわりに

create-react-appはとても簡単で便利です。ただし、SPAなこともありOGPやSEO関連の要素については実装が難しいです。それが許容できる簡単なWebサービスを作る、サーバレスなアプケーションを作るということであれば十分です。

SSRを実装しようとした場合はNext.jsなどを利用する必要があります。結局rubyやphpをサーバに入れてバックエンドを作った方がいいような気もします。どうなんでしょうか。どういう場合に選択されるのかイマイチわからないままです。

静的要素としてExportするなどSSRの実装方法はいくつか方法がありました。静的なコンテンツとしてSSRを実現することができるので、その点で差異はあるとも思います。

何より全部jsで作るというのが嬉しいことなのかもしれません。動的なサイトか静的なサイトかの要件が変わってしまった場合でも柔軟に対応できる、と公式にも書いてありました。そんなことあるのか？と思いますけど。

Reactの基本構成を学ぶ『Reactビギナーズガイド』

Tue, 11 Jun 2019 00:00:00 GMT

オライリーのReact入門書です。

Gtasbyで作成しているこのサイトももちろんですが、私はいくつかReactを使った構築をしています。いつもディレクトリ構造やクラスの内部設計について、スタンダードな作り方がわからなくて困っていましたので手にとって見た本です。

ビギナーズガイドとあるように、Reactを動かすためのインストール方法に始まり、基礎的な構文の情報、オブジェクトの中身などの紹介がされています。JSXを使わない実装方法から始めて、JSXを利用した方法についても学んでいくので、そもそもの仕組みの理解も進みます。

応用的な面として、テストなどの知識も含まれていますので、Reactに興味を持ってこれから使ってみようという人にはとてもいい本だと思います。オライリーにしては薄く内容も簡単です、さくっと読める内容になっています。

基本的なディレクトリ構成

本の中に合った基本的な構造をメモしておきます。常にこれに従うわけではありませんが参考にしようと思います。今まで作っていた形でほぼ正しかったです。

index.html
/css
    app.css  --アプリケーション全体で使う
    /components  --特定のコンポーネントでのみ使う
        oo.css --コンポーネント名.css 
/js
    /build -JSX含まない、ブラウザで実行可能
    /source -JSX含む
        app.js   --アプリケーション全体で使う
        /components  --特定のコンポーネントでのみ使う
            oo.js  --コンポーネント名.js
/images
/scripts

1つのReactコンポーネントに、jsとcssファイルが一つずつ用意される。
コンポーネントに指定するスタイルはclassName「コンポーネント名」で定義、コンポーネントのルート要素にこのクラス名を設定する

応用的な知識

テストやビルド、デプロイに関する手順や考え方の説明です。静的な方チェックやJestを使ったテストの実装方法もあります。実際に雛形のアプリを作成してコマンドを試しながら進めていきます。あまりCUIに慣れていない人にもわかるよう親切になっており、実務でも役立ちそうな知識が詰まっていました。

ところどころに応用として一歩踏み込んだ質問がされています。特に無視しても問題はありませんが、より深く知識を得るために立ち止まって調べてみることをおすすめします。ちょうど良い難易度のものばかりで、知っているとデバッグや障害などの際に役立つ知識が多かったです。

こんな人におすすめ

ビギナーズガイドという名前の通り、Reactを使用したことが無い人向けの内容でした。書き方も親切で丁寧になっていますし、サンプルのアプリも簡単です。始めてReact触ってみるとか、これからつかってみようかなという人に読んでほしい本です。

すでに業務でつかったことがあるとか、アプリ作ったことのある人にとっては物足りない内容かもしれません。

おわりに

新しいフレームワークやソフトウェアを調べてつかってみるときに、「どんな内部設計がスタンダードなのだろうか」ということがいつも気になってしまいます。設計・実装の経験があるので作って見たらそれなりに出来ますが、フレームワーク側で推奨している方針とかがあると思うので、できる限り従いたいものです。

今回はビギナー向けの本を読みましたが、各フレームワークや言語の代表的なプロダクトのソースコードについて、目を通しておくまたはブックマークしておくのがいいなと思いました。

ただ、必要になったときに調べても情報が雑多になっていてよくわからないことが多いです。公式のドキュメントさえ、最小限の情報しか無いことが多いです。できるのであれば、詳しい人に聞くのが一番オススメだと思います。

レイアウトの基本が学べる本『知りたいレイアウトデザイン』

Mon, 10 Jun 2019 00:00:00 GMT

レイアウトデザインの基礎を学ぶことが出来る本です。

基礎的な知識の部分を厚く説明しており、1から学ぶような人におすすめしたい内容でした。すでにある程度できる人にとっては、得られるものは少ないかもしれません。

デザイン全体というよりはレイアウトに集中した内容です。フォントのことや色などの知識は少なめです。全く書いていないわけではありませんので、コンテンツを作る際には十分な量の情報は乗っています。レイアウトメインの本はちょっと珍しい気もします。しかし、内容は基礎的な知識や考え方、デザインの進め方から始まっているので、他の領域についても役に立つ内容だと感じました。デザイン全体に効果のある内容だと言えます。

レイアウトする上での基礎知識に加えて、実例として作成されたものの紹介があります。アイデアとして33個のコンテンツが紹介されています。縦組み・横組み・Webといくつかのフォーマットが紹介されていますので、それらに対して応用できる知識になっています。

Who What Howの法則

伝わるレイアウトのための基礎だそうです。レイアウトにかかわらず何にでも応用できそうです。わかりやすくまとまっておりとても参考になりました。実際に手を動かしてデザインを行う前に、しっかりと頭を使って考えることが大切です。プログラミングなんかもそうですから、何にでも当てはまる原則なのかもしれません。

時間がないときほど、すぐに取り掛かろうとしてしまいます。一息おいて、頭で考えるところから初められるような余裕を持ち続けたいものです。

Who ターゲットを理解する

具体的な対象のイメージを考える。絵にできるくらいの人物像が書けるくらいか、実在する人物を思い描けるようになっていると良いです。

What 伝えたいことを明確にする

優先順位を決めて、伝えたいことを絞ります。全部のせたくなりますが我慢しましょう。

How 見せ方を考える

ラフなどを作成して方向性を考えます、優先順位を意識して進めることがコツです。

レイアウトのルール

判読性・視認性・可読性という3つのルールを使って、レイアウトのテクニックを学びます。基礎的な使い方に加えて応用的なテクニックも紹介されています。

デザインするコンテンツの特徴に合わせたレイアウトの方法や種類も紹介されており、覚えておくと役に立つ情報ばかりです。

各説明ごとに、「誰に」と「何を」を改めて説明していますので、自分の作りたいものに当てはまるページを見つけて真似する使い方も良さそうでした。

こんな人におすすめ

デザインを勉強している、でも学ぶことが多すぎて大変。覚えられないし、理解できない。みたいなふうに感じている人におすすめしたい本です。内容も簡単にまとまっていますし、何よりレイアウトの部分に集中していますので、少しずつ身に着けていくことが出来ます。

デザインと一言で言っても、含まれている領域は幅広く、憶えるべき知識やテクニックも膨大です。こういったパートに分けた本を読みながら一つずつ身に着けていく方法がおすすめです。

おわりに

DTPの基礎的な言葉の説明やAdobeのソフトの使い方なんかも載っています。細かいところにも手が届くような本でした。

レイアウトに関する基礎的な知識と、広く浅いテクニックを同時に学ぶことができるので、レイアウトについて学び初めの人にちょうどいいと思います。レイアウト部分に集中した内容になっていますので要点をしっかり見つけられます。

この本は知りたいデザインシリーズの一つだそうです。他にも「配色」「タイポグラフィ」の本画が版されていますので、合わせて読んでみようと思いました。

覚えておきたい口癖『ITリーダーが確実にファシリテーションを身につける本』

Fri, 07 Jun 2019 00:00:00 GMT

ファシリテーションに関する本です。

ITを牽引するリーダーやマネージャーが会議などの場でファシリテーションを行う上でのコツやテクニックを紹介しています。他にもファシリテーションの基本や、それを利用したチームでの取り組み方なども紹介されています。リーダーとして周りのメンバーを巻き込む力や、一緒に考えながら進む方向を決めていくことなどができるようになると思います。

マネージャーでなくても、会議などで簡単に実践できるテクニックが載っていたので参考にしたいと思いました。日頃から口癖として身につけておくといいものや、いざというときに使える一言など、いくつも紹介されておりとても役に立つ本でした。

身につけるべき口癖

相槌を打つことや、メンバーに考えてもらうための一言が紹介されています。それぞれどんな効果があるのか、どんな場面で使うかが丁寧に書かれているのでわかりやすいです。逆に使ってはいけない場面なども記載されています。紹介されているのは11個なので、身につけるのも簡単そうです。

メンバーに頭を使ってもらうための質問や、実際に行動に取り掛かるための一言など、たしかに効果がありそうだと思うものばかりでした。他にもYesかNOで答えるような質問ではない、オープンな質問から始めるといったテクニックなども紹介されています。

会議の場でこのような発言が出来たらとても良いと思います。リーダーが発言する内容になっていますが、実際には会議の中で誰が発言しても意味はあると思います。むしろ、リーダーになりたいと思っている人こそ、この内容を学んで実践してほしいです。周りからの印象も大きくかわり、役目を任せてみようかなと思われるのではないでしょうか。

リーダーっぽい発言をしているうちに、実際にリーダーになっているのではないかということです。たった11個の発言で十分にそれらしく見えるので、とても効果的だと感じました。

なるほど
どうしてそう思ったの
・・・(無言)
ポイントを一言で
皆さんどうですか？からの、〇〇さんどうですか？
あとでもう一度聞くので考えておいて
別の言葉で表現すると
あえて
話し合いの結果として
もっと良くするためには
ありがとう

こんな人におすすめ

IT業務に携わる人でファシリテーションが必要な人。すなわちリーダーとかマネージャークラスになった人におすすめです。チームが旨く回らないとか一体感が無い、とかチームならではの問題に対して、大きな効果を発揮する知識だと思います。

それ以外の人でも、この本の内容を実践することで周りに一目置かれ、リーダー的な振る舞いを期待されて昇進できることもあると思います。

おわりに

会議中に、「この時間無駄だな〜」と思ったことは誰でもあるのではないでしょうか。話が進まなかったり、同じ人ばかり喋っていたり、結局何も残らなかったり、その後も何も行動しなかったり。よくあることではないかと思います。この本では大切なこととして、他人を変えるのではなく、まず自分を変えるということを述べていました。旨くいかないなあと思ったときに、「だめだこりゃ」とか「誰かなんとかしてくれ」ではなく、どうすれば旨く行くのか、もっと良くする方法はないか、そのために自分に何ができるのかといったことを考えるようにしましょう。

実際に意味のない会議問のはとても多いと思いますが、それを自分の行動で変えることができればメリットも大きいです。思い切って出席しないという選択肢もありますが、できるのであればファシリテーションに挑戦してより良い会議にできる用にしたいところです。

リーダーとして会議の場でのあるべき姿がわかる良い本でした。会議の場で役割を決めてしまうと、意見が出づらくなったりすることもありますが、ファシリテーションはどうしても必要だと思います。自分がそのことに気づいて仕掛けられるように意識できると、とても良いと思いました。

AdSenseの「要注意 - ads.txtファイルが含まれていないサイトがあります。」への対応

Fri, 07 Jun 2019 00:00:00 GMT

数日前からAdSenseの管理画面に以下の表示が出るようになりました。
今回はこの表示について、原因と内容の理解、解決方法について情報を書いておきます。同じような表示が出ている人は多いと思いますので、対応の際の参考になればと思います。

要注意 - ads.txtファイルが含まれていないサイトがあります。収益に重大な影響が出ないよう、この問題を今すぐ修正してください。

要注意とか今すぐ修正とか書いてあるので何事かと思いました。悪いことをしたつもりも変更したつもりもないので、AdSense側で何らかの変更があったのだと思います。すぐにGoogleに何かペナルティを食らうわけではないので、落ち着いて対応しましょう。

概要

この記事の概要です。

結論（解決方法）
原因
ads.txtの意味

結論（解決方法）

結論を先に言うと、「ads.txt」というファイルに必要な情報を記載してサイトに設置する。この作業を行うことで解決できます。以下詳細な手順です。

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

「ads.txt」というファイルを作成します。

2.「ads.txt」に必要な内容を記載する

以下の1行のみを記載します。このとき「pub-0000000000000000」の部分は自分の「サイト運営社ID」に置き換えて記載します。
0000〜のままサイトに設置すると広告の配信が停止される可能性があるので注意しましょう。

google.com, pub-0000000000000000, DIRECT, f08c47fec0942fa0

サイト運営者IDの調べ方

AdSenseの管理画面にログインして、左側のメニューの「アカウント」の項目内の「アカウント情報」を選択すると確認出来ます。「サイト運営者ID」という項目の内容をコピーしてads.txtの該当の場所を書き換えましょう。

3.「ads.txt」をサイトのルートレベルに設置

https://ドメイン/ads.txtに設置します。このサイトなら「https://honmushi.com/ads.txt」です。

これで対応は完了です。
ファイルを設置してもすぐにAdSenseの表示が消えるわけではありません。設置してから数日が経過しないとAdSense側へ反映されませんので、気長に待ちましょう。

このサイトでは2019/06/07に対応を実施しました。反映されたらまたお知らせします。

原因

要注意 - ads.txtファイルが含まれていないサイトがあります。収益に重大な影響が出ないよう、この問題を今すぐ修正してください。

上記のAdSenseの注意の最後にヘルプへのリンクがあります。
AdSenseヘルプ ads.txt で認定販売者を宣言する

ざっくりとは広告詐欺を解決するための取り組み・仕組みです。サイトに設置している広告枠が、サイト運営者が認定した販売者の広告であることを確認するために利用されます。

たとえば、何らかの方法で悪い人がサイトにニセの広告を掲載したりした場合、この広告がサイト運営者が意図的に設置した広告なのかが判別できるようになります。運営者はもちろん、サイトに訪れたユーザーも怪しい広告なのかどうかの判断ができると思います。

ads.txtの意味

ads.txtファイルには以下のような情報を記載しました。この意味がヘルプに書いてあったのでメモしておきます。ads.txtとは何か？ということです。

google.com, pub-0000000000000000, DIRECT, f08c47fec0942fa0

全部で4つのフィールドから記述されており、カンマ区切りのデータになっています。

フィールド1
広告配信システムのドメイン名
AdSenseの広告を配信しているのはgoogleなのでドメイン「google.com」を記載しています。
フィールド2
サイト運営者のアカウントID
フィールド1で指定したシステム内で販売者のアカウントに紐付いている識別子を記載します。配信サービスによって形式が異なると思いますが、AdSenseでは「pub-」と「16桁の数値」です。
フィールド3
アカウントまたは関係のタイプ
通常は「DIRECCT」を指定します。AdSenseのアカウントが広告枠の再販のような形式で委任されているものの場合は「RESELLER」を指定します。マネージャーアカウントなどを利用してパートナー管理をしている場合などのみ「RESELLER」を指定するそうです。
フィールド4
認証機関のID
認証機関で広告システムを一意に識別するID、フィールド1の内容と1対1で決まっています。Googleの場合は「f08c47fec0942fa0」です。

おわりに

要注意 - ads.txtファイルが含まれていないサイトがあります。収益に重大な影響が出ないよう、この問題を今すぐ修正してください。

この表示が出たからと言ってすぐに何かが起きるわけではなさそうです。ネガティブに考えると、アカウントの停止とか広告の配信停止なんかが考えられるわけですが、すぐにそうなるわけではありません。

まだ情報もそれほど揃っていませんので、Googleもすぐにアクションを起こすことはなさそうです。とりあえず、上記の対応を行い表示が消えるまでゆっくり待ちましょう。

もしも、広告が配信されない状態になったらads.txtの内容に間違いがあることが考えられます。サイト運営者IDが間違っていないか、変な文字やタグが混ざっていないか、ads.txtの置き場所を間違えていないか、アクセス可能か、robots.txtにクローラーのアクセスを拒否する記載をしていないかなど確認しましょう。

新しい時代のUI/UX『融けるデザイン』

Thu, 06 Jun 2019 00:00:00 GMT

インターフェイスのデザインや効果について考察している本です。

ハード・ソフト・インターネットの重ね合わせで変化していく現代において、UIデザインの領域や意味は大きくなっています。この時代に沿った新しい設計論や情報を紹介している本でした。 UI/UXに興味がある人にはとても興味が持てる本だと思います。クリエイティブなデザインとは少し違っており、技術的なことやテクノロジーの話が多いです。

UI関連の情報や技術は外国の後追いになっている印象が大きいのは確かです。著者はそんな日本のエンジニアとデザイナーをターゲットに、インターフェイスの本質を考えてほしいそうです。与えられた技術やメディアの中でのデザインではなく、新しい手法からデザインすること。新しいインターフェイスを作っていくことを目指したいという思いがありました。

フラットデザインとスキュアモーフィズム

フラットデザインはメタファを持たないデザインが特徴、単色に近いUIコンポーネントを利用している特長。メタメディアであることを活かそうとする意志がある。一方スキュアモーフィズムは現実席兄ある模様や質感を再現したものであり、そのままメタファとして取り入れることで操作感や空気を利用者に知らせていた。

見た目上のデザインの違いとして体格に取り上げることもできるが、大きな差異はメタファの有無となります。電子世界・デバイスでの体験を、現実世界の体験に似せることで表現するのではなく、電子世界ならではの表現や体験を与えることを考える必要があるようです。宇宙に新しい物理法則を見つけるようなイメージなのだと思います。

透明性

道具として意識しない状態のことを透明性と呼ぶそうです。

ハンマーは見れば何に使うのかがわかりますし、実際に使う際には使い方を意識しなくても使えるようになっています。それは手に持って使うときには体の一部となっているような状態です。体の一部であれば質量も0。これを透明な状態と呼ぶそうです。ハイデガーの「存在と時間」とかに書いたあった表現だと思います。このような身体の拡張となるような道具、そんな考え方をコンピュータやデバイス・ソフトウェアも考えていく必要があるようです。

マウスカーソル

当たり前のように利用しているマウスカーソルについてもさまざまな考察がされています。そもそも、舌の要素によってカーソルの形が変わることや、操作性・できることなど、ほぼ説明なしでも私達は理解して使いこなしています。そういう意味では透明性は高く、身体の拡張としての意味が強いです。

スマホになるとカーソルは無く、タップで操作することになりました。これに至るまでもさまざまな実験や試作があったのだと思います。デバイスの変化によって道具も変わりますし、それらの意味するものも変わっていきます。実験や思考を繰り返して、人間が道具として使いこなせるような体験を探していくことはとても重要なことだそうです。

自己帰属という概念とその状態について理解し、意識しながらさまざまなUIを見る読むしていくことが、UIの設計に必要な能力なのかなと思います。そしてそれを言語化して説明できるようになっておくのが良さそうです。ヌルヌル動くとかサクサク動くとか言いますが、そのような表現も感じたことそのものなので大切にするべきです。

こんな人におすすめ

UIデザインを考える人にはとりあえずおすすめです。UI表現の意味であったり評価の方法などが解ると思います。UI/UXはに興味を持っている人はぜひ読んでおくといい本の一つでした。

関連書籍が多く紹介されていますので、それらについても目を通すといいです。UI/の勉強を行う上での入り口として優れている本だと感じました。

おわりに

どんなデバイスも人間から見れば、目に入っているのはUI表現の部分であり、UIでの体験がそのままそのデバイスでの体験となります。

UI部分のみで感じ方が変わってしまうため、全体の印象も大きく変えてしまうことになります。逆に言えばUIの表現を旨くコントロールすることができれば、全体の完成度を向上させることができると言えるかもしれません。

操作すること、表示するところ、デバイスと人間の情報のやり取りを司る所であるUIについて、もっと詳しくなりたいと思いましたし、色々作って実験してみたいと思いました。

モノとして感じるときの身体との関係性、モノを持ったときの自分との距離のようなものについて、普段から意識できたらと思います。

Webアプリの構築準備

Tue, 04 Jun 2019 00:00:00 GMT

Webアプリの構築を進めていきます。

FirebaseでWebアプリを作る
要件を考える
仕様を考える
仕様書については別で管理したいので記事には書きませんでした。
プロトを作る
実装する
テスト
使ってみる
公開する
効果や状況を確認
カイゼンする

まずはプロト作成を兼ねてフロント側を実装します。その後サーバ側の処理を定義して利用できるようにします。

フロントエンドについてはせっかくなのでSPAで作成します。そのために今回はReactを利用します。このブログはGatsbyを使っており、Reactの扱いに関してはすでに知識があります。簡単に実装できることから選択しました。

今回は、Reactを使ってSPAのアプリケーションを作るための環境の構築をやっていきます。参考

必要なもの

基本的にはWebpack、Babel、Reactなどをインストールする必要があります。 create-react-appを利用することで簡単に用意できます。

npm install -g create-react-app
create-react-app hello-world

/hello-world/ディレクトリに必要なものが一通り用意されます。ディレクトリに入ってnpm startを実行すればローカルでの確認も始めることが出来ます。

ローカルでの動作確認

以下を実行すればローカルで動作します。URLとポート番号がコマンドラインに表示されるのでアクセスすれば動作確認が可能です。

npm start

プログラムをビルドする

以下コマンドを実行すれば、ビルドが行われデプロイ用のファイルが生成されます。/build/以下に生成されますので、その中身をFirebaseにdeployすればいいことになります。 buildコマンドを実行した後にfirebase.jsonを編集して、Hosting対象ディレクトリの設定を修正しておきましょう。

npm run build

Firebaseeへデプロイする

firebase.jsonのHostingの項目のPublicに指定しているディレクトリがデプロイの対象となりますので、設定を確認・変更しておきます。

Hostingの設定を変更した後はdeployコマンドを実行することでFirebaseにファイルを反映できます。

firebase deploy

gitにソースをコミットしておく

いよいよプログラミングっぽくなってきました。個人開発なので共有とかの必要はありませんがバージョン管理はどんなときでも利用したほうがいいです。

変更を元に戻したり出来ますし、バックアップの代わりにもなります。githubも簡単に利用ができるのでドンドン使いましょう。将来的にプロジェクトでチーム開発をやるときに備えて、gitの一通りの操作は学ぶべきです。 SVNを使っている環境もあると思いますが、gitを理解出来ていればすぐに理解できます。

gitignore

基本的に/node_module/以下のファイルはgitにコミットしないのが通例です。下記初に必要なパッケージはプロジェクトのリポジトリからpackage.jsonを取得して、各環境にてそれを参照して必要なモジュールをインストールします。環境ごとにバージョンが異なったりすると、ローカルの環境が壊れてしまうこともあるので注意しましょう。 nodeを使った開発を行う場合覚えておきましょう。

サンプルとなるgitignoreがcreate-react-appで取得・配置されているので確認しておくと良いです。以下のURLにも配置されています。 gitignoreのサンプル

ページを作成

あとはWebアプリを作成していきましょう。どこから作るか予定を立てて計画的に進めていきます。

現在もろもろ作成中です。

動作を確認

構築ができたら動作確認していきましょう。最後に確認するのではなく、出来た機能から少しづつ確認しながら進みましょう。不具合等早めに見つけて直せると良いです。細かいテストを実施するためにも、構築前に仕様や正しい挙動を明確に定義しておくことが大切です。

各2ページで言語を紹介する『プログラミング言語図鑑』

Tue, 04 Jun 2019 00:00:00 GMT

67種類のプログラミング言語を紹介しています。

そんなにあるのか！という驚きもありますが、ここにあるものも全体の一部だそうです。比較的簡単に利用できるものを優先して選んでいるそうで、もっとマイナーなものも含めれば更に数は増えるそうです。

プログラミング言語とは何かということやどんな言語を選択すればいいのか、といったことも書かれています。プログラミング言語の文法や利用方法ではなく、背景や関連・分類などメタ的な知識を得ることが出来ます。

あくまでも言語の図鑑なので、プログラムの書き方などは載っていません。こんな言語があるのかということ、どんな特長を持っているのかということを知ることが出来る本です。

見たことない言語もいっぱい

プログラマでも知らない言語がいっぱい載っています。初めて見るものも合ったりしますが、サンプルプログラムが掲載されているので試すことも出来ますし、特長や利用されている例なども載っており、おもしろい内容になっています。

AWKとかbc、sedなんかも解説されています。SQLもありました。ただし個人的に思い入れのあるColdFusionはありませんでした。

普段は意識しなかった言語の裏の顔や成り立ちなども知ることが出来ます。しかし、これを読んでもプログラミングそのものに影響はありません。新しい文法を知るわけでもなければ堅牢なプログラムを実装できるわけでもありません。
どの言語から学ぼうか、次はどれを勉強しようか、と思っている人は選択肢をたくさん知ることが出来ます。ただ、どれがオススメということとかは書かれていません。他の情報を元に選ぶのがいいです。始めてプログラミングを学ぶのであれば身近に詳しい人のいる言語。2つ目以降であれば今までとは性質の異なる言語を選ぶのがいいと思います。もちろん、仕事が多いとか学習が簡単とか、他にも選ぶ条件はあります。いろんな選択肢を渡されて悩むくらいなら「なんかかっこいいから、これだ！」と印象だけで決めてしまって、本を買ってプログラミングの勉強を初めてしまう方がいいですよ。

せっかくなので1つオススメするのであれば、ここでは実行環境の用意が簡単なJavaScriptをおすすめしておきます。Webであれば利用する機会も多いですし、入門にもいいと思います。

おわりに

「毎年1つ新しい言語の学習をする」というのがプログラマーの学習としてオススメの目標となっています。「達人プログラマー」か何かで読みました。

これに従えば、この本だけで67年は学ぶものに困らないです。ただそれぞれの言語の勉強はどうやってうやったらいいんでしょうかね？メジャーなものは大丈夫ですが、かなりマイナーなものもありました。まあ67個全部勉強したところでそれほど意味はありません。しっかりプログラミングの基礎や概念、考え方と学び方を身につけることが大切なことです。

firebaseでWebアプリを作る

Fri, 31 May 2019 00:00:00 GMT

以前の記事でFirebaseを使ってみました。一通り動かしてみることは出来たのでこれからFirebaseの機能を使ったWebアプリを作成していこうと思います。

自分のWebアプリを作っておくと、ポートフォリオや実績としても役に立ちます。プログラミング言語やシステムの勉強をある程度こなした！という人は、実際に手を動かして作ってみると良いです。

この記事を目次として作成の手順やフローを残していきます。システム作るときはこんな感じという一つの例と思ってください。ただし、システム構築の仕事はお客さまがいる場合のほうが多いです。受託開発とかSESとは大きく異なります。あくまでも個人開発の例として参考にしてみてください。

何を作るか

一番好きなものを投稿するサイトを作ります。

お題を管理者が決めるので、それに対してそれぞれユーザーが好きなものを一つ選んで投稿します。投稿するには会員登録が必要、見るだけなら不要。会員なら気が合う人を見つけることとかもできる。

お題を作成する機能と、作成されたお題によって結果一覧と回答画面が動的に生成されてほしい。できれば画像とかもアップロードできるようにしたい。

あまり新しい技術とかを使いすぎると難しくなり、実現可能性が大きく下がります。あまり風呂敷を広げすぎず、まず完成させることを目指すのがいいです。あとから改良したり機能を追加させるという方針がおすすめです。

何をするか

ざっくり以下の流れで順番にやっていきます。すぐにプログラミングや実装に取り掛からず、しっかり仕様や全体像などを考えることから初めます。一人でやるので進め方も自由なのですが、しっかり考えながらやったほうが勉強にもなるし効率もいいです。

途中戻って修正したりやり直すこともありますが、大きな流れとしては以下です。

FirebaseでWebアプリを作る
要件を考える
仕様を考える
仕様書については別で管理したいので記事には書きませんでした。
プロトを作る
実装する
テスト
使ってみる
公開する
効果や状況を確認
カイゼンする

おわりに

ここでは「やるぞ！」という宣言と、開発フローの全体像を書きました。それぞれの内容が出来たらリンク貼っていきます。

どれぐらい時間がかかるかはわかりませんが、あまり時間をかけずにさくっと作るつもりです。

Webアプリのプロトを作る

Fri, 31 May 2019 00:00:00 GMT

Webアプリのプロトタイプを作っていきます。ここでサイトのデザインについても考えます。

FirebaseでWebアプリを作る
要件を考える
仕様を考える
仕様書については別で管理したいので記事には書きませんでした。
プロトを作る
実装する
テスト
使ってみる
公開する
効果や状況を確認
カイゼンする

大体の場合は、どんなデザインにするかの「デザインカンプ」をデザイナーさんに作ってもらいます。そしてUIデザイナーやフロントエンドエンジニアが、操作や挙動についてクライアントとのすり合わせと構築時の詳細な部分の指示・認識合わせのために「プロトタイプ」を作ると思います。

他にも「ワイヤーフレーム」とかもあります。デザインカンプの前に内部的に作られるものと思います。現場によってこの辺のフローは大きく異なります。周りに合わせて柔軟に吸収しましょう。

今回はプロトタイプとデザインカンプは一緒なものとして準備します。丁寧にそれぞれ作りたいところですが時間がかかります。デザインカンプを作りプロトタイプとしても扱うつもりです。実際にブラウザで動くものは実際の構築時に初めて見ることになるでしょう。

デザインを考えるに当たって、エンジニアらしく仕様検討や概要を考慮しながら取り組めるとよいです。「このデザインや機能はこうすれば実装できる」とか、「やろうと思えば作れるだろうけど時間かかるから避けよう」とか、勘が効くようになるのが目標です。

動作や挙動の確認については、実際に構築しながら確認していくことにします。

イメージを手描きで作る

まずは手描きで紙に書いてみましょう。ノートでもメモでも何でもいいです。頭の中に思い浮かべて、それを書き出していきます。最初から便利なソフトを使ってもいいのですが、頭の中を整理するためにも実際に手を動かして書いてみると良いです。最初は全然うまくかけませんが、やっているうちに楽しくなってくると思います。

線とかまっすぐ引けなくても大丈夫です。そのあたりは後でツールを使いましょう。一旦思っているイメージを紙に書きながら頭の中を整理するつもりで始めるのが大切です。自分の作りたいものをなるべくはっきりとと頭の中に思い描けるようになっていてほしいです。

こんな感じというものがかけたら、実際にデザインソフトを使ってデータ化していきましょう。

何で作るか

昔はPhotoshopとかで作るのが一般的だったようですが、現在はAdobe XDとかFigmaなどの便利なツールが登場しています。別にエクセルとかパワーポイントでも作ろうと思えば作れます。

コンポーネント化しての再利用とか、他アカウントへの共有、修正依頼なども便利に行えるようになっているので使いこなせるといいです。

デザイナーやUIデザイナーが使うことの多いサービスですが、エンジニアもこれらに慣れておいたほうがいいです。プロトの共有をすることもありますし、簡単なものであれば自分で作成・修正できるようになります。自分のできる領域を広げるつもりでこれらのサービスにも積極的に興味を持っていきましょう。

今回はFigmaでデザインを作成します。無料でそこそこ使えるうえに十分便利です。無料で会員登録できます。
Figma

Figmaで作っていく

あまりこだわって作り込みすぎないようにしましょう。ここで力尽きてしまっては意味がないので。参考になるサイトを探して真似するのも良いです。やりたいことと似ているサービスを探して分析してみましょう。

とりあえず、必要な全ページのデザインを作成します。いくつかパターンがある場合も全部作っておきます。データが0件の場合とか、数ページ分のデータがある場合とか。必要なものをもれなく把握しておくことが大切です。こういう取り組みは見積もりなどに活きてきます。

PCとスマホ両方でアクセスできるようにしいたいので、そのことも考慮して両方のパターンが必要です。今回はレスポンシブなデザインにします。なるべく共通化して使えるように作る方針です。

できれば同じ意味のボタンや要素はコンポーネント化して使いまわせるようにしましょう。サイト全体での世界観を統一させたほうがユーザーも使いやすく、作る時もラクです。この辺のWebデザインに関する知識は書籍とかで勉強するといいです。世の中にあるサイトを研究することでも身につきますが、ノウハウ本は溢れるほどあるので一度読んでおくのがおすすめです。

デザインの検討や作成はエンジニアの本来の役目ではないかもしれませんが、こういった工程にも興味を持っておきましょう。いつか役に立ちますし、自分で考えるのは結構楽しかったりします。

ワイヤーフレームがこんな感じ

そんなにこだわらずに作ります。個人開発ですので時間を使いすぎずに進みましょう。最初に「2時間でつくる」とか時間を決めてしまうのもおすすめです。

これを利用してデザインやプロトにしていきますが、各工程で作ったものは上書きせずに残しておきましょう。あとで「どうしたこういう配置にしたのだろう」とか振り返るために必要です。修正が発生したときにその場で修正するのではなく、前の段階に戻って修正を行うようにするとツギハギにならず良い修正ができます。また、アプリが完成した後に見返したりすると、ここがイマイチだったなあとか反省が湧いてきます。ただ作るのではなく、「考えて。作って。振り返る」ということが大切です。

仕様書やデザイン等、変更がある度にしっかり修正を反映していくようにしましょう。プログラムは修正したけどもドキュメントが置いてけぼりになってしまうプロジェクトは多く、後でとても困ることになります。途中から参加したメンバへの共有であったり、しばらく時間がたってからの修正・再開発の際、仕様や実装を理解するために時間がかかってしまいます。忙しい時や早く次に進みたいときでも、しっかりと全体の整合性を保ち、保守性を意識して進めるのがポイントです。

おわりに

デザインの知識がなくてもある程度できるようになっておくといいです。こだわればこだわる分時間がかかるので、あまり時間を使いすぎずに進んだほうがいい場合もあります。とりあえずは作るシステムの見た目をイメージしながら楽しみながら用意していきましょう。完成させるためにモチベーションを上げていくのは大切です。

ただし、ここで完成のイメージをしっかり作っておくことは忘れないようにしましょう。そうでないと、あとで実装するときに迷うことが多くなり、いらぬ時間を食う場合が多くなります。なるべくプログラミング以外の部分に対して精度を高くすることが、いいシステム構築のコツだったりします。

Webアプリの要件を考える

Fri, 31 May 2019 00:00:00 GMT

Webアプリを作る記事の続きです。
Webアプリを作る

ここでは要件の定義と、仕様の検討を行います。

FirebaseでWebアプリを作る
要件を考える
仕様を考える
仕様書については別で管理したいので記事には書きませんでした。
プロトを作る
実装する
テスト
使ってみる
公開する
効果や状況を確認
カイゼンする

要件を決める

ある程度の要件については前回の記事で考えていますが、改めてまとめておきましょう。

要件を定義するに当たって

本来はこの要件でほんとにやりたいことが解決・実現できるのか？といったところも深く考える必要があります。作ってみたけどあまり意味ないことに初めて気づいた、ということも多いです。

今回は個人開発なのでそれほど固く考えなくていいですが、目標とか未来の姿を思い描いておくとモチベーションになったり達成感に繋がります。ゆっくり想像する時間を取るといいです。

要件定義は経験豊富なエンジニアや営業経験のあるディレクターなどが行うことが多いと思います。今ではあまり言わないかもしれませんが上流工程と言うやつです。

最初のうちは渡された仕様を忠実に実装するとこがプログラマの仕事になります。要件定義は難しい面もありますが、その分面白くもあります。普段から仕様よりも上位の概念があることを意識しつつ、実際の構築に取り組むことができるといいです。

もちろん、個人開発や小さなプロジェクトでは自分で考える・定義することができます。早いうちから挑戦して失敗しながら学べると大きく前進できます。IT系の試験なんかでも基礎知識を問われるのでそこでも役に立ちます。

要件

一番好きなものを投稿するサイトを作ります。

お題を管理者が決めるので、それに対してそれぞれユーザーが好きなものを一つ選んで投稿します。

お題：一番好きなラーメン

A：天下一品 
メモ：こってりがたまらなく美味しい

B：8番らーめん
メモ：親しみやすく、ファミリーでも利用しやすい

投稿は基本文字ベース、タイトルとメモくらいか。できれば画像とかもアップロードできるようにしたい。
お題ごとの結果を確認できるページがある。
一度投稿したものを修正・編集できる。
投稿するには会員登録が必要、見るだけなら不要。メールアドレスとパスワード・またはtwitterのアカウントでのログインを利用する。最低限の情報で会員登録・ログインできれば良い。
会員なら気が合う人を見つけることもできる。同じものを好きな人とは関連性が高い。そうでなければ低い。
管理者アカウントを作成しておく。管理人にはお題を作成する機能がある。作成されたお題によって結果一覧と回答画面が動的に生成されてほしい。
広告を設置できるようにしてアクセスによって報酬が得られるようにしておく。課金とかの機能は不要、ビジネスモデルは盛り込まず、ユーザーの金銭交換などは発生しない。
PC・スマホ両方でアクセスできる。
Firebaseを利用するのでスピードや安定性がどれくらいになるか懸念だが、無料の範囲でできるだけにする。使っててイライラしない程度のスピードは守る。

とても簡易で荒っぽいですが、これくらいにしておきましょう。あとでやっぱり違ったとか、これもほしいということを見つけたら足していくことにしましょう。

仕様を考える

仕様書の形には色々あると思います。

エクセルやワードで作成したり、「実際のコードが仕様だ！」という現場もあるかもしれません。プロトが仕様という場合もあれば、Wikiを作る場合もあるので現場によって大きく異なります。

今回はなるべくテキストで仕様を作ります。Gitとかで管理するつもりです。ややこしくなるので、記事には書かないで別で管理します。

なにか便利なツールとか仕様定義のフォーマットがあれば探しておきます。

おわりに

要件定義はシステム構築でとても重要です。ここでしっかり詰め切っておけるかどうかなど、後々のプロジェクトの成否に大きく関わります。構築の見積もりなどにも大きな影響があるので、なるべ精度を高くできるように努力すべきです。最初はめちゃくちゃ難しいですし、ベテランの方とか経験豊富な人が担当すると思います。

個人開発なので、それほど力を込めなくてもあとで修正することも出来ますが、実際の現場ではそういうわけにいかないです。アジャイルなど柔軟に進める手法もありますが、精度が高いに越したことはありません。

個人開発など、自分で取り組み可能な場所でしっかり練習しておくことがおすすめです。最初は絶対うまくいきません。どれくらい外してしまったか、どうすればよかったかなどをしっかり反省できるように、記録をつけて思い返せるようにしていきましょう。あとは手描きでノートや大きな紙なんかにまとめてみるのもおすすめです。思いつかなかったような関係性や欠点が見つかります。意外とアナログな道具を使うほうが捗ることも多いです。

よいUIを生み出すフローとは『UI デザイン』

Thu, 30 May 2019 00:00:00 GMT

UI/UXデザインを行う上でのチームでの取り組みの進め方を説明した本です。

UIのサンプルやパーツ実装の紹介ではなく、UIデザインを行う上での勘所やフローなどについての本です。

特長としてはチームでの取り組みが基本となっており、プロジェクト内でUIデザインを行うことの意味、より良いUIを作るための取り組み方が主な内容です。

エンジニア・デザイナーとUIデザイナーの立ち位置や関わり方なども書かれており、チームビルディングやプロジェクトの設計フェーズの進め方などの参考になると思います。

チームにおけるUIデザイナー

UIデザインをカイゼンするに当たって、いくつか需要なことを感じました。以下その所感を記載しています。

ユーザーへの実体験の調査この本でも1章を使用してユーザーインタビュー・ユーザーテストに関する情報が書かれています。どんな前提で取り組むのかといったところから、どんな質問を誰にするのかといったところまで詳細に描かれています。

クライアントへのヒアリングやすり合わせはもちろんですが、実際に使用するユーザーの感じている課題や問題についても、しっかり聞き出す能力が必要です。デザイン能力だけでなく、実際に聞き出すコミュニケーション能力や分析・理解する能力なんかも重要だと発見がありました。

始めるには小さなところから始めるのが良いそうです。最初は友達や社内の他メンバーなどから始めるのでも十分意味があるようです。実際のインタビューフローや質問の例なども書かれているので、これから取り組む方にとってはとてもいい内容です。

他職種との連携エンジニアやデザイナーとの担当範囲の切り分けであったり、お互いに助け合うべき場面なども説明があります。みんなで考えることがUIの改善には重要だそうで、それぞれのエキスパートが協力しあって始めて良い方向にたどり着けます。UIデザイナーの領域は結構広く、さまざまな場面で出番が回ってくると思います。設計時のプロトタイプ制作はもちろん、要件定義または開発でも役目があるでしょうか。作業でいっぱいいっぱいにならないように、ほか職種の方との協力や進め方の相談なんかは重要だと感じます。

UI設計

設計段階で必要になるプロトタイプ制作のコツなんかも大いに書かれています。デザインシステムの定義・作成方法や利用方法、他にもそれらを活かしたチーム単位での進め方などもあります。

大きなところで言えばツールの紹介もありますし、プロジェクトでのルールの決め方なども参考になるものが多いです。基本的に概念の説明ですので、具体的にどうするのかと言った答えは書いてありません。各環境で話し合って最適なものを探しましょう。チームでより良くするための取り組みを開始して、継続することがUIデザインの肝でした。

おわりに

全編通して、UIデザインの小手先のテクニックではなく、プロダクトやサービスの目指すべき場所の定義から、そこにたどり着くまでの各メンバーとチームの取り組み方法についての説明でした。

これらの内容を実現するには長い時間と、根気強い取り組みが必要です。チームでの認識合わせや意識の共有が重要になることは間違いなく難しさもありそうだと感じました。UIデザイナーはもちろんですが、その周りで一緒に働くマネージャーやエンジニアなんかにも内容を共有して、一緒に取り組みを進めていけると良さそうです。

Firebaseのログイン機能を試す

Wed, 29 May 2019 00:00:00 GMT

Firebaseで遊ぶ続きです。前回の記事。

Firebaseの「Authentication」の機能を使えば、会員ログイン機能を簡単に実装できます。メールアドレスとパスワードを使ったものから、TwitterやFacebookなどのSNSアカウントと連携したものまで簡単に実装できます。会員サイトを構築するのであればとても役に立ちますね。

試しに使ってみました。

概要

Authenticationを有効にする
ユーザーアカウントを作成
ログイン状態の確認
デフォルトのログインウィジェットを利用してみる
ユーザー情報の更新

Authenticationを有効にする

Firebaseの管理画面でAuthenticationの項目へ移動して、有効にします。ログイン方法としていろんな方法が用意されています。メールアドレス以外にもtwitterなどのSNSを利用することも出来ます。とりあえず「メール/パスワード」を有効にして実験してみます。

アプリとFirebaseの紐付け

先にWebアプリとして登録を行いFirebaseに接続する必要があります。

管理画面の「Project Overview」からWebアプリを作成します。

連携するHostingサイトを設定した後、firebaseの利用に必要なスクリプトが生成されます。その後、HostingページのHTMLに生成されたスクリプトを貼り付けましょう。デフォルトでHosting内に設置されていたindex.htmlにはすでに存在しています。

これらを設定することでFirebaseのプロジェクトとの紐付けが出来ます。他のスマホアプリなども、同じプロジェクトに紐付ければ、アカウントを共有したり相互にやり取りができる様子です。

ユーザーアカウントを作成

アカウントを作成してみます。基本的にはドキュメントに書いてあるのをやってみます。

これをフロント側で実行すればアカウントが出来ます。emailとpasswordに文字列入れれば出来ます。出来たアカウントを管理画面で確認しましょう。

firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // ...
});

ログイン状態の確認

アカウント作成を行うと自動的にログインされます。ログインしているかどうかは以下のメソッドをフロントで実行すれば確認可能です。

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
    console.log("login");
  } else {
    // No user is signed in.
    console.log("logout");
  }
});

ログアウトする場合は以下です。

firebase.auth().signOut().then(function() {
  // Sign-out successful.
}).catch(function(error) {
  // An error happened.
});

再度ログインする場合はこちら、emailとpasswardに必要な文字列をわたせば良いです。

firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // ...
});

これで一通りのログイン機能でしょうか。後はログインUIを作ったり、肝心のログイン時に利用できる機能を作成していきましょう。

デフォルトのログインウィジェットを利用してみる

ドキュメントに記載されている、デフォルトのログインウィジェットを利用してみます。以下を追加すればできます。簡単です。

必要なライブラリをロードします。firebaseuiという形で利用できるようです。

<script src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" />

フォーム要素に必要な設定を作成して、ログインフォームを定義します。ログイン後のリダイレクト先とか、プライバシーポリシーページへのリンクURLなど設定項目がいくつかあります。

signInOptionの部分で、ログインするために必要な情報を選択出来ます。不要なものは取り除きましょう。

var uiConfig = {
  callbacks: {
    signInSuccessWithAuthResult: function(authResult, redirectUrl) {
      // User successfully signed in.
      // Return type determines whether we continue the redirect automatically
      // or whether we leave that to developer to handle.
      return true;
    },
    uiShown: function() {
      document.getElementById('loader').style.display = 'none';
    }
  },
  signInFlow: 'popup',
  signInSuccessUrl: '<url-to-redirect-to-on-success>',
  signInOptions: [
    // Leave the lines as is for the providers you want to offer your users.
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    firebase.auth.GithubAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  // Terms of service url.
  tosUrl: '<your-tos-url>',
  // Privacy policy url.
  privacyPolicyUrl: '<your-privacy-policy-url>'
};

ログインフォームを表示させる要素をHTMLに設置しておく必要があります。 id=“firebaseui-auth-container”の要素にフォームをレンダリングするつもりです。 <body>の中においておきましょう。

<h1>Welcome to My Awesome App</h1>
<div id="firebaseui-auth-container"></div>
<div id="loader">Loading...</div>
<p id="load">Firebase SDK Loading&hellip;</p>

最後にレンダリングを開始させればフォームが表示されます。表示されたフォームでログイン等試してみましょう。簡単に実装できとても便利です。

// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);

ユーザー情報の更新

メールアドレスとパスワード、管理用の一意なIDのみがある状態です。他の情報も登録できるようなのでやってみます。表示用の名前と、電話番号とかでしょうか。

以下をフロントで実行すればユーザーアカウントの情報を取得できます。もちろんログインしていないとダメです。

var user = firebase.auth().currentUser;
var name, email, photoUrl, uid, emailVerified;

if (user != null) {
  name = user.displayName;
  email = user.email;
  photoUrl = user.photoURL;
  emailVerified = user.emailVerified;
  uid = user.uid;  // The user's ID, unique to the Firebase project. Do NOT use
  // this value to authenticate with your backend server, if
  // you have one. Use User.getToken() instead.
}
console.log(user);

いよいよ更新です。特別なことはせずドキュメントに忠実にやって試します。

var user = firebase.auth().currentUser;

user.updateProfile({
  displayName: "kos",
  photoURL: "https://example.com/jane-q-user/profile.jpg"
}).then(function() {
  // Update successful.
}).catch(function(error) {
  // An error happened.
});

もう一度アカウント情報を取得すれば変更後の内容になっています。

おわりに

とりあえずAuthenticationを使ってみることが出来ました。基本的な部分はFirebaseに丸投げできるのでとても簡単です。ログインに関する詳細な仕様や制御、ログイン状態で利用できる機能などを検討しながら、以降も遊んでいきます。

Firebaseで遊ぶ

Tue, 28 May 2019 00:00:00 GMT

Firebaseを利用して簡単なWebアプリを作ります。Firebaseの一通りの使い方を紹介するつもりです。

プログラミングの勉強で何か作ったらいいと言われたけど、どこで何したらいいかわからないという方の参考になればいいなと思います。Firebase使ってこんなことができるよ、という例にもなると思います。

背景

以前はこのサイトをFirebaseでホスティングしていたのですが、無料アカウントでのホスティング容量の上限に到達しました。それからはこのサイトはNetlifyでホスティングしています。

FirebaseeにはRealtimeDatabaseとかFinctionなどさまざまな機能があります。それらを使ってみようと思ったので遊びました。無料で使える範囲で遊んでいます。

概要

以下概要です。ざっくりとですが「プログラミングで何か作ろう」というときの例になると思います

「勉強はしている！次何したらいいかわからない」「実際に作るのが大切！らしいけど何から初めたらいいんだ！」という方の参考になったらいいです。

勉強は大切ですが何かを作ってみることも大切です。手を動かすことで、わかったつもりで本当はわかっていないことを発見できます。Firebaseは無料枠でいろいろな機能が使えるのでおすすめです。

何より自分で考えて、自分で作ったものが動く、世界に向けて発信されることは嬉しいことだと思います。プログラミングについての知識や技術を身に着けた後は、ぜひ実際に作るのがおすすめです。

以下の内容で少しずつ進めていきます。この記事では2までやります。

Firebaseの準備
Hostingにページをデプロイ
Functionを使ってみる
Databaseへの書き込み、読み出し

Firebaseの準備

アカウントを作ってプロジェクトを作ります。実際に Firebase のサイトに従って進めるといいです。

次はプロジェクト作成です。
任意の名前を入力します。URLに使われるので、なるべくわかりやすいものにしておくとおすすめです。国はJAPANにしておきましょう。私の場合はプロジェクトの名前を「tenka-ichi」にしたので、デフォルトで「tenka-ichi.web.app」というURLが対応付けられています。自分で取得したドメインを後から設定することもできるので、厳密に気にしなくてもいいです。

プロジェクト作った後はnpmで「firebase-tools」のインストール。Firebaseの管理画面で説明があるのでそれに従って進めれば問題ないです。プロンプトやCLIに慣れていない人も、こういった所から慣れていけばいいです。そんなに難しいものではありません。

npm install -g firebase-tools

もしもエラーが出てうまくいかない場合は、エラーの内容をグーグルで調べましょう。何かしら出てきますのでそれらを参考にすれば良いです。

そのあとは以下のコマンドを実行して、プロジェクトの準備をします。説明に従って必要な設定を行いましょう。

firebase login

firebase init

Hostingにページをデプロイ

最初はHostingにファイルをアップします。管理画面のHostingメニューからWebアプリのドメインにアクセスできます。この状態では何もアップされていないのでアクセスしても「Site Not Found」と表示されるエラー画面です。

以下のコマンドを実行すれば、プロジェクトのpublic/以下のディレクトリがFirebase Hostingにデプロイされます。デプロイコマンドにオプションでhostingのみ反映する用に指定しています。他の機能はセットアップが必要なので、エラーになってデプロイ出来ない場合があります。

firebasee deploy --only hosting

作成されたローカルのプロジェクトにはデフォルトでindex.htmlが用意されています。ですので上記コマンドを実行することで、そのファイルが反映されます。URLにアクセスすると、「Welcome Firebase Hosting Setup Complete」と表示されるようになります。

あとは自分でpublic/index.htmlを変更したり、他のページを作ったりしてみましょう。これだけでとりあえずWebサイトが出来ます。

Hostingでは静的なコンテンツの発信のみ有効です。PHPやRubyなど、サーバで動作するプログラムを実行させることは出来ません。HTML・CSS・JavaScriptなら発信できるということです。

Functionを使ってみる

次はCloud Functionを試します。これはHostingとは異なりプログラムを実行して結果を返すことが出来ます。JavaScriptまたはTypeScriptで作成したプログラムを設置することが出来ます。

簡単なものをデプロイ・実行してみます。functions以下にindex.jsがあり、その中にコメントアウトされているhelloWorldという関数があるのでそれを有効にします。コメントアウトを取り除けばいいだけです。メソッドの処理はテキストを返すだけですが、まずはリクエストしてみましょう。

firebasee deploy --only functions

コマンドを実行すると変更が反映されます。管理画面に関数が表示されるようになります。トリガーとなるURLが表示されているのでアクセスすると処理が実行されテキストが返されます。HostingのURLとはドメインが異なっているので注意しましょう。

もう少しやってみます。公式のドキュメントを参考に色々触ってみるのがおすすめです。

無料の枠ではHTTPリクエストで動作するメソッドのみ利用できます。課金するとサーバでスケジュールしたバッチ処理などを動かせます。やろうと思えば外部のサービスを利用して、定期的にHTTPメソッドを動かすことが出来るようです。

functions.https.onRequest()  
→ HTTPリクエストで動作する処理、無料枠で利用可  

functions.pubsub.schedule().onRun()  
→ スケジュールに従い動作する処理、有料のBlazeプランでないと利用できない

ローカルで確認できる

ちなみにfirebase deployを実行しなくてもローカルで動作を確認することが出来ます。 firebase serveを実行すると、ローカルでサーバが立ち上がります。

http://localhost:5000/?でHosting、functionも帰ってくるメッセージに記載のURL(localhost:5001で始まるやつ)で実行・確認できます。

他にもdeploy時には文法などのチェックをしてくれているようです。エラーの箇所はチェックがかかりdeployが途中で止まりました。親切ですね。

Databaseへの書き込み、読み出し

次はFirestoreを利用します。管理画面でデータベースを作成します。

ひとまずFunctionにデータベースの処理を作成して、そこからデータを書き込み・読み出ししてみます。以下のような感じでメソッドを作成して、デプロイ。URLでメソッドを実行するとデータが作成されます。超単純にGETでパラメータ渡しました。

「コレクション」や「ドキュメント」という単語を目にすることになります。このあたりはFirebaseのドキュメントを見て理解するといいです。時間あれば情報をまとめようと思います。NoSQLベースなのでRDBとは大きく異なります。注意しましょう。

exports.ichibanWrite= functions.https.onRequest((request, response) => {
  const title = "テスト";
  const name = "名前";
  const memo = "メモ";
  var docRef = db.collection('ichiban').doc('test');
  var setRecord = docRef.set({
    name: name,
    title: title,
    memo: memo
  });
  response.send("dataWriten,Thank you " + name);
});

管理画面のdatabaseのタグから登録した実データが確認出来ます。管理画面上で追加したり、編集したりもできます。

データの読み出しはドキュメントを参考に以下のようにやったら出来ます。こちらではデータをログに出力するようにしています。Firebaseの管理画面でfunction実行時のログを確認できるので、そこで正常に動作していること・出力の内容を確認しました。

exports.dataRead= functions.https.onRequest((request, response) => {
  db.collection('users').get()
    .then((snapshot) => {
      snapshot.forEach((doc) => {
        console.log(doc.id, '=>', doc.data());
      });
    })
    .catch((err) => {
      console.log('Error getting documents', err);
    });
});

おわりに

簡単にはこんな感じですね。まずはFirebaseの機能を一通り触ってみるところからです。とりあえず、Hostingとfunctionとdatabaseが動かせるので必要なものは揃いつつあります。

次はFirebaseのログイン機能を触ってみます。

だめな部分を教えてくれる『やってはいけないデザイン』

Mon, 27 May 2019 00:00:00 GMT

デザインをダサくしてしまうポイントが書かれてます。ここに書いてあることを注意して作成するだけで、かっこいいデザインに近づけることが出来ます。

ズバリ、デザイナー以外の人向けに書かれた本で、専門用語やデザインの理論的な話はなるべく少なくなっています。営業や広報の方などデザインはわからない、でもチラシやポスターなどを何かしら作らなくてはいけなくなった人におすすめの本です。

こうしたら！良くなるではなく、「これをやってはいけない」と言うNGポイントを指摘しているのが特長です。

実際に何かのデザインを作ってみて、なんかダサいなと感じたらこのNGポイントを使ってチェックしてみるといいです。簡潔にまとめられており修正案も用意されているので、すぐに修正してレベルの上がったデザインにできます。

特定の用途に限ったものではなく、ポスターや名詞、プレゼンの資料などさまざまな場面でのデザインに対応しています。レイアウトや色、フォントなどの要素に対して、「やってはいけない」を示してくれているのでわかりやすいです。

自分ではどこが悪いのかわからない

デザインをする機会って意外と多いと思います。簡単なスライド作るとかでも、時間をかけようと思えばいくらでもかけられます。できればかっこよくてわかりやすいデザインにしたいとも思います。

しかし作ってみると、「なんかダサいな」と思うことが多いです。でも何がだめなのかはわかりません。デザインを専門でやっている、何らかの方法で学んだ人にはわかるのでしょうが、素人にはとても難しいです。

この本では「ダメなデザインにありがちな点」をしっかり示してくれています。これらの項目について一度見直してみることで、悪い点に気づくことが出来ます。スッキリしたデザインになり、わかりやすさもアップします。ただ、かっこよくしようと思って余計に飾り付けをするとダサくなるので、ちょっと足りないくらいのほうが見やすくなるイメージです。

わからないと余計にごちゃごちゃ足してしまいがちですが、かっこよくてわかりやすいスライドはどれもスッキリシンプルなものが多いです。この辺も経験とか知識がないと難しいですが、この本の内容をしっかり利用して余計なものを足したりしないでおけば、結構良いものになります。

役立つ情報もたくさん

デザインのアクセントになるような写真やアイコンのフリー素材の配布サイトなども紹介されており、メモしておくと良いです。私もICOOON MONOなんかは良く利用します。

素材とかを使いこなすことも上達の道のりだと思います。普段から「こんな素材があるのか」ということを記憶してストックしておくと、デザインの際の役に立ちます。上手い人は引き出しも多いです。身の回りのデザインが上手い人の作ったものを参考にして、素材等を真似するのがわかりやすいと思います。

おわりに

最初にも書いていますが、デザイナーではない人向けの書籍です。デザインの理論や難しい事は書いていませんので、物足りなく思う人もいると思います。その分、デザインに詳しくない人にとってはスラスラ読めて親切になっています。場面や立場にもよると思いますが、スライド作成やイベントのポスターなどが多いでしょうか。急に自分がやることになってどうしようか、と悩んでいる人にぜひ手にとってほしい本でした。

料理の好奇心を刺激する本『Cooking for Geeks』

Fri, 24 May 2019 00:00:00 GMT

IT技術書で有名なオライリーが出版している料理レシピ本です。ただのレシピ本ではなく料理をサイエンスと捉えて、まるで実験のように解説しています。

料理の種類はさまざまで難しい料理も出てくるので、経験豊富な人にとっては珍しいレシピ本と感じられます。料理そのものへの理解の方法や説明がサイエンス風なアプローチになっているので、普段とは異なる目線で料理や食材を理解できます。サイエンス風に捉えることは、料理の基礎を理解するためにもいいアプローチだと思います。ですので初心者にもおすすめできます。

ただ本がかなり分厚いので、読みながら料理するには不便です。開いておいても勝手に閉じますし、立てておくことも難しいです。写真も少ない上に白黒なので、今晩のおかずに悩んでいる人にとってはあまり役に立たないと思います。時間をとってゆっくり読むのがおすすめです。

料理を初めてみて面白さに目覚め始めたとか、もっと料理のことを知りたい語りたいという人、すなわち料理への好奇心が大きい人にとっては、レシピ本というより教科書として面白く読み進めることができると思います。

化学の復習によい

熱によるタンパク質の変質など、科学的な現象を料理の中で学ぶことが出来ます。身近な生活の中に潜む化学を見つけることができおもしろいです。中学生の時にこの本に出会えればみんな化学にもっと興味を持てたはずです。夏休みの自由研究とかにすごく向いているのではないかと思います。最近の自由研究のトレンドは何なんでしょうか？プログラミングとか担っているのかもしれませんね。

料理する上での道具の話やキッチンの話など、さまざまな領域に話が広がっています。道具の整理とかする際にこの本を参考に揃えると、一通り必要なものや便利なものが揃うので良いです。道具に対してもしっかりと思考を巡らせており、料理全般に対するオタク的な考え方がとてもおもしろいです。

料理法もさまざま

各国の味付けの傾向をまとめたり、人間の味覚の不思議を説明したり、情報は多岐にわたります。データを並べて説明しているところもあり、味覚の不思議な部分なども数値やグラフなどで知ることが出来ます。

真空調理や低音加熱などの調理法も説明にあり、仕組みも理解することが出来ます。「自分で真空鍋を作ろう」見たいなコーナーもありますが、興味があればやってみるといいと思います。それなりに楽しそうです。普通はこんなことしないと思いますが、こういった料理のアプローチも面白そうですよね。

全体的に料理は洋食が多く、和食とかは全然ありません。あまり、好きではない料理や好んでは作らない料理が多いかもしれません。そういった面でもいつもと異なる料理に触れることが出来ると考えればポジティブな面でもあります。

おわりに

料理への好奇心が刺激される良い本です。情報量も多いし科学的な説明や問題も含まれていて、知識を得られた感があります。できればレシピもドンドン作っていきたいですが、何よりも本が大きく分厚いです。450ページ位ありました。

食品添加物やアレルギーに関する文も載っています。なんとなく危ないらしいけど詳しくは知らないという人も、ここを読んでおくといいです。この本の知識だけでは足りないのですが、ある程度詳しくなるので出典不明の情報に騙されにくくなります。

料理や食事・味覚に関する幅広い知識を身につけることができるので、可能であれば早いうちに読んでおくと毎日の料理が楽しくなります。毎日の料理をただの作業として捉えるのではなく、楽しい実験や遊びのように感じることができると、前向きに取り組めますし上達も速いと思います。

忙しい毎日に余白を作る『労働者のための漫画の描き方教室』

Fri, 24 May 2019 00:00:00 GMT

以前紹介した、書くための勇気の著者、川崎昌平さんの本です。

「毎日仕事が大変で消耗しているけど、息抜きのために漫画で表現しよう」というものです。漫画を書けば働くことさえ楽しくなる！という考え方であり、漫画が上手になるための本ではないです。

漫画家向けではなく、あくまでも労働者が空いた時間に漫画をちょっと書くための本です。上手に書くためのテクニックとかは無く、特に練習したわけでもない人がそれなりの漫画にするためのテクニックなどが書かれています。

絵の上達が目的ではなく、日々の感じたことなどを漫画としてアウトプットすることで、スッキリするとともに世界の見え方が変わるというものです。

アウトプットの手段は色々ありますが、やろうと思えば素早く書けて文字や言葉を中心にして表現するために、漫画というプラットフォームをオススメしています。

本がすごく厚く470ページくらいありました。手に取るのに勇気が入りますが内容は漫画の箇所が多いので、見た目よりボリュームは少ないです。

表現とは思考のための道具である

なんとなくで生きていると考えるのをやめてしまい、ただ苦しいことに耐えるだけになってしまいます。漫画として表現しようと意識することで考える必要が生まれ、日常の出来事に対して思考を行うようになります。自分が今持っているものにも目が向きますし、自分とは異なる考え方や意見も理解できるようになるかもしれません。

子供の頃ノートの端っこにパラパラマンガなんかを書いていた人も多いのではないでしょうか。あんな感時からのスタートだと思います。そこから、普段の生活での気付きや嫌なことなどをネタにしてアウトプットしていこう、という取り組みでしょうかね。

この本を読むと、日常生活の中で観察することの必要性がわかります。そこから漫画としてアウトプットする種が見つかりますし、さまざまな発見があります。観察する前から自分が変わらなかったら意味がなく、変わろうと願って観察を行う必要があるそうです。そのため、結論ありきの観察では変化は無く、意味も薄くなってしまうので注意しましょう。難しいですが、変化を恐れず柔軟に、かつしっかりと起きていることを観察しようということですね。思っていたのと違う結論や結果になったとしても、「そういうこともあるのか！」という新しい価値観を受け入れていく柔軟さが漫画を書くことに活きてきます。

敗北のデザインと変化

敗北から学び、変化していくことについて書かれています。他人や環境と比較して敗北するのではなく、しっかり自分が原因で敗北したことを理解することで、自分が変化しなければいけないこと、どのように変化する必要があるのかを学びます。

これぞという敗北とはなかなか出会うことは難しいそうですが。そんな敗北も楽しんで向き合うことが重要なようでした。著者も敗北というものに前向きに向き合うことができるようで、とてもいい価値観だなあと感心します。目を背けたり逃げ出したくなること、他人や環境に責任を押し付けたくなることは大いにあると思います。それでもしっかり自分ごとにして向き合うことは、かなり体力も使う上に勇気がいることです。

鼻とか眉毛とか背景とか表情とか

これらに対して、不要論がでてきます。漫画ではこれらは無くてもいいのではないかと。形式のためにそれらを書くぐらいなら、読者が想像するための余白として残しておくくらいがいいのではということです。昔の西洋の絵画などがどうやら参考になるそうです。

何を書いたら読者は楽しんでくれるかよりも、何を書かなかったら読者は楽しいかを考えるようです。難しいですね。そうして普段のやらなくてはいけない仕事とは関係無いこと、つまりやりたいことを考えることで前向きに取り組むことが出来るようになります。

おわりに

独特な漫画の描き方ですが、不思議と面白く読めるものです。毎日忙しくてしんどいなあという方にこそ、この本を読んで何らかのアウトプットに取り組んでほしいです。ネットでの意見は発言への付き合い方なども書かれているので、参考になると思います。

全般通して、毎日頑張って働いている人に向けて肯定してくれるようなメッセージが散りばめられています。嫌なこともたくさんあると思いますが、なにかそこから活かせることや学べることもあるかもしれません。自分にとって必要なものをしっかり選択して、未来のために活かしていけるような余裕や余白が必要なのかと思いました。

躓くような文章の方が面白い『書くための勇気』

Thu, 23 May 2019 00:00:00 GMT

批評を書くための心構えや技術についての本です。著者は作家であり、編集にも携わっている方で漫画なんかも書くようです。

途中に漫画も挟まっており、良いテンポで読めます。漫画はゆるーい感じなのですが、しっかりいいことが書いてあるので飛ばさずに読んでほしいです。

著者は他にもWEBでは出版社のエピソードや実態を描いた漫画を連載しているので、時間があれば読んでみるとおもしろいです。フィクションですが、出版社の内情のようなものがわかります。

批評性を意識することと言葉を鍛えることで、書くための勇気を手に入れることがこの本の目的です。どちらも難しいのですが、読む人の気持ちを考えて、反応を受け止めることでそれらは磨けるそうです。

きっちりとしたルールに当てはめて文章を書く進めではなく、もっと個性を活かして考える隙間を与えるような文章の書き方のコツが多かったです。編集をやっている作者なので、そういった思考を持っているのかなと思います。

おもしろいと思った部分を参考にメモしています。

書いてみること

まず、誰に書くかを考えないといけないことに気づきました。どんな人に読んでほしいか、どんな人に知って欲しいかです。それでも、届く読者は一人ではなく大多数。万巻の書物を制覇してきた知の権化だと捉えるのがいいそうです。

一万人に伝わるけど半年で忘れるものより、10人にしか伝わらないけど10年覚えてくれる方がいい。これは良い言葉ですね。メモしておきます。

わかりやすいの弊害

わかりやすくするとわかりやすい結論に引き込まれてしまいます。文章を短く書くとか、YesかNoか立場をはっきりするとか、そういった良い文章の書き方もありますが、この本ではそれらとは異なる考え方も提案しています。

わかりやすく書くための型に当てはめてしまうと、個性がなくなり自分らしい文章ではなくなってしまいます。型に当てはめることで簡単に文章は作れますが、借り物の文章の様に感じられるかもしれません。

ちょっと躓いてしまうような文章も、読み手側の考慮や思索の余地があって良い文章になるそうです。本の中で、夏目漱石や太宰修などが例として出てきますが、それらの文豪も一見読みにくい分だったりします。しかし、読者を引きつける何かがあり、その個性的な部分を大切にするべきという考え方です。

多様性という言葉の意味を考えて、YesかNoかのみの2元論ではなく、文章の間の感情を潜ませるような言葉を選べると良いです。

コトコトしない

「こと」とか「的」などの言葉を使ってしまうと、つ与えたいことが曖昧になってしまいます。わざとそうする方法もあるようですが、なるべく避けていったほうが言葉は磨かれます。

おもしろいという感情を「おもしろい」以外の言葉で、つまらないという感情を「つまらない」以外の言葉で伝える練習をすると、言葉の使い方がうまくなるそうです。

おわりに

書く行為自体が書き手にとって思考を熟成させるプロセスとなるので、書くことをやめず続けることを心がけたいと思います。

SNSがなどで誰しもが発信できるような社会になっています。より自分らしく、そして誰かを動かせるような言葉を作れるように努力していきたいと思います。

目で見て楽しい『なるほどデザイン』

Wed, 22 May 2019 00:00:00 GMT

デザインのコツをグラフィカルにわかりやすく表現しています。

副題にあるように「目で見て楽しむ」という通りで、見ているだけでも楽しさを感じられます。コツを七つ道具に例えたりなど読みやすくまとめられていますので、ザックリのテクニックを理解するのに役立ちます。

1つのテーマで複数のパターンが紹介されており、「惜しい」パターンなんかも紹介されています。いくつもパターンを作成して、その中からいいものを選ぶというプロセスはとても大切ですので、その過程を再現しているのだと思います。

レイアウトに加えて、文字組みや色、写真の使い方なども説明されています。基本的なデザイン要素は一通り学ぶことが出来ます。この本一冊あれば、一通り最初に学ぶべきことがわかるので良いです。

デザインプロセス

デザインをつくるためのプロセスには必ず正解があるわけではありませんが、一つの例として紹介されていました。

図解とラフ
方向性を決める
骨格を作る
キャラを立たせる
足し算と引き算
ブラッシュアップ

大きいものから入って段々と小さく細かいものを決めていくという進め方で、とても良いと思いました。実際のページデザインの出来上がりが順番にかかれているので、各項目の意味や範囲も理解しやすいです。フローなどの知識がないと細かいところから作りたくなったりしてしまいますが、大きなところから初めるようにしましょう。デザインに限らず何でもそうかもしれません。

デザイナー7つ道具

この本で紹介されていた、デザイナーとして大切な心構えです。鉛筆とかそういう道具のことではないです。わかりやすくてよかったので項目のみ引用してます。詳細は本を読んでほしいですが、とてもわかり易くそして記憶に残りやすくなっています。最初のうちはこれらを意識するといいと思います。

コピーも面白いですし、図やイラストも面白く分かりやすかったです。印刷してデスクなどに張ってあるといいかもしれません。

ダイジ度天秤
スポットライト
擬人化力
連想力
翻訳機
虫眼鏡
愛

おわりに

上記の他にも写真のことやグラフなどの作り方やコツもあります。デザイナーにはとても参考になる本だと思います。さまざまな技術を網羅的に取り扱っている印象でしたので、できるだけキャリアの浅いうちに読むといいです。早いうちにこれらを意識してデザインできる、またはデザインを読める用になると強いと思います。

基礎的なところをしっかり書いていますし、デザイナーならではの目線なども書かれていますので、デザイナー以外の人にも面白く読める内容だと思います。難しい話はあまりせずに楽しく読めるようになっていますので、気構えずに開いてみてほしいです。

文章も少なくさくさく読める本です。暇な時間とかちょっと悩んだときとかに開いてほしい本でした。実践的な内容も日頃からの心構えも、ちょっとしたコツも網羅的に書かれているので、手元に一冊おいておくと捗る本です。

余白を活かす『けっきょく、よはく』

Tue, 21 May 2019 00:00:00 GMT

デザインの本で、余白を活かしたデザインレイアウトをメインに解説した本です。 NGの例とそれを改良したOKの例が並べて掲載されていますので、比較しながらメソッドを理解することが出来ます。

タイトルにもあるとおりですが、余白などのレイアウトをメインに考えている本です。余白を上手に使いこなすことで、情報がしっかり整理されて、洗練された印象を与えることが出来ます。余白があるとついつい埋めたくなるという性格の人もいると思いますが、余白を怖がらずに使いこなすことで洗練されたデザインになります。

OKの例以外にもいくつかパターンが紹介されているので、デザインのサンプルとしても参考になります。作例の種類が豊富でとても情報量が多いです。基本的にレイアウトのことが多いですが、色や写真・フォントのことも少し書いてあり、そのあたりもついでに学べます。

カフェ・ナチュラル・ビジネス・スクール・和・サロン・コスメ・シーズン・ラグジュアリーという属性ごとに章で分類されています。どこから読んでもいいと思いますが、自分の気になるもの探しているものを探して読んでみるといいです。時間があれば一通り読んでおくことでデザインの引き出しも増えるのでおすすめです。

わかりやすい例

基本的に各テーマごとにNG例とOK例を比較しています。NGな理由4つと、修正したテクニックを4つ紹介しています。もっと大きな点での修正点も含まれていますが、情報が整理されているのでわかりやすいです。

ポスターやリーフレット・名詞やプレゼンのスライドなど、作例はさまざまでいろんなジャンル・場面で役に立つと思います。

余白を旨く使うというのがこの本のテーマですので、しっかりそれを活かしています。例えば以下のテクニックがありました。これらもほんの一部です。山ほどのテクニックが紹介されており、覚えておきたいものばかりでした。

全体で余白を作るのではなく、情報の周囲に余白を作る
視線の動きをイメージする
情報量を多くしすぎない
見せたい写真の周りに余白
項目の位置を揃える
無意識の違和感をなくす

おわりに

例とその修正がひたすらあり、情報も多くとても学べるところが多かったです。文章による説明はそれほどボリュームがなく、テクニック集のような印象を受けました。

実際のデザイン検討・作成の場面で役に立つ書籍だと思います。パターンも紹介されているので参考にすればさまざまな場面へ応用できそうです。

本の全体として余白を上手に使うテクニックを紹介しており、その効果によって洗練されて見やすいデザインになることがわかります。ぜひこのテクニックを利用して見やすいデザインを作れるようになりたいです。

ビジネス観が大切『SEを極める50の鉄則』

Tue, 21 May 2019 00:00:00 GMT

SEとして活躍するための鉄則が50個紹介されています。

鉄則のうち半分はSEとして信頼を得るためのもの、残り半分はマネージャとして活躍するためのものです。ですので、自分の状況によっては半分のみチェックしておけば問題ないということでもあります。できれば将来的にマネージャになることも考えて、今のうちから意識して動けるようになっておくといいとは思いますが、できるところから初めましょう。

SE以外のビジネスマンからみたSEの印象と、実際にSEが目指すべき姿は大きく違います。正しいSE観を持って働き、信頼を勝ち取れるように努力しましょうというのが大きな目標となっています。

マネジメントに関する鉄則も半分載っていますので、これから後輩ができるとか、マネージャとして参加する立場の人にとっては大きな学びを得られるものになっています。

技術的な話と言うよりもビジネス的な話がメインです。ビジネススキルを身につけることや、プロジェクトの中での立ち居振る舞いについての内容が多いです。この本に描いてあることは基本SE観以外でも大いに役に立つことだと思います。むしろこれらがしっかり身についていれば、さまざまな業界で活躍できるのではないかと思いますね。

ビジネスに強くなる

ビジネスに強くなることで、社内や協力会社への発信力も高まるため、いざというときに力を発揮できます。SEは割とビジネス観とか、販売能力みたいなものを重要視しないため弱点にもなりがちです。

ビジネス目標を達成出来て始めて勝利なので、ビジネスの行き先や未来についてもイメージしながら動けることが望ましいです。説明力や交渉力も身につくと思います。

以下、ビジネスに強くなるためにやるべきことが紹介されていますので、参考にしてメモします。

売上や目標をしっかり憶える
ビジネスマインドをしっかり持つために、基本的な数字は憶えましょう。会議とかで聞かれたときにしっかり答えられるようにします。普段から持ち歩くノートやメモ帳の最初のページに書いておいて、いつでも確認できるようにすればいいだけです。
販売活動を積極的に行う
顧客への提案活動などに積極的に参加します。営業担当に任せっきりにするのではなく、積極的に自分にできることを探しましょう。
顧客と雑談する
営業担当に言わないようなことを意外と言ってくれたりします。新プロジェクトやリピートに繋がったりします。苦手意識がある人もいると思いますが、あまり硬く考えすぎず気楽に挑めばいいです。
営業とビジネスの話をする
営業にビジネスについてわかっているアピールをすることで、ビジネスに強いイメージを持ってもらうことが出来ます。もちろん営業担当の方がビジネスには強いのですが、できる限り営業の話についていくようにしましょう。間違えることやわからないこともあると思いますが、興味があるとか意識しているということが伝われば十分です。
利益の仕組みを理解する
ビジネスの仕組みを覚えていきましょう。まずは自分の利益の仕組みから理解して、次に顧客、更には業界大手など広げていけると良いです。
会議で発言する SEは発言しないでもいいようなイメージがあるかもしれませんが、そんなことはありません。積極的な姿をアピールすることは重要です。この辺はSEに限らずどんな職種でも同じですね。意外と忘れがちですが、こういった基本的な意識が大切だったりします。

できるマネージャーの条件

SEに限らずの目指すべき姿として、部下の育成という点も強く認識しておくべきだそうです。目先の技術やタスクのこなし方よりも、本物のSEの価値観などをしっかりと伝えることが重要です。結構難しいと思いますが、経験をこなしていくことで自然とわかるようになります。自分が教えてもらったことなどノートや日記にメモしているとこういうときに役に立っていいですよ。

締め切りを守ること、部下に締め切りを守らせることなども重要です。できるように仕組みで解決するなどコツがありますが、日頃からの指導や教育などをしっかり意識し直す必要がありそうです。

おわりに

SEのとして大切なことが書いてあり、勉強になる内容でした。技術的なことよりもビジネス面の内容が多く、参考になります。SNSとかスクールとかでエンジニアになるための勉強コンテンツはたくさん溢れかえっていますが、こういったことは教えてもらえないので大切にしたほうがいいです。締め切りを守るとか基本の中の基本ですが、一番むずかしいことでもあります。すぐには解決できなくても、大事なことであると認識して対策できるように取り組むようにしましょう。

ビジネス力とかSEとしての価値観みたいなものは、まだまだ情報教材では取り上げられていないように思います。SEに限らず、こういったものは重要なので、しっかり受け止めてほしいですね。

心の中でもやっとしたときに『言ってはいけないクソバイス』

Mon, 20 May 2019 00:00:00 GMT

最近では朝の情報番組「スッキリ」のコメンテーターでもおなじみになった犬山紙子さんの本です。面白い本ですので、個人的に好きな本です。

求めてないのに言われるクソみたいなアドバイスのことを「クソバイス」という言葉で定義しています。そのクソバイスを旨くやり過ごす方法「クソバイス返し」の使い方を解説しています。

クソバイスは相手のことを思っているようで、自分の持論を押し付けるだけのアドバイスのことです。言われた方はイラッとするのに、言った方は気持ちいいという恐ろしい行為です。

上司や友人の言ってくれる言葉にはまっすぐ受け取るべきこともあります。しかし、自分の為にならないことや余計なお世話と思うことは、この本のように思い切って面白おかしく受け流せるようになりましょう。

SNSで人とつながる時間が多くなり、気を使うことが多い社会になりました。日頃の人付き合いとかで疲労してしまう人もいるのではないでしょうか。相手が何気無く言ったことを真面目に聞きすぎないこと、言われたまま受け取って余計に考えこまないことが大切です。

身の回りのクソバイザー

自分の身の回りにも、思い当たる人はいないでしょうか？誰しも一人くらいいると思います。アドバイスのつもりで言っているので本人には悪気は無く、適当にあしらうわけにもいかないのが厄介なところです。

直接言い返すことが出来なくても、心の中で唱えるなどの対象法が紹介されているので、参考になります。他には「おもしろい！」「ウケる！」って言い続けてやり過ごす方法もあるようです。昔のギャルはいろいろな人から小言を言われる機会が多いらしく、「ウケる」でやり過ごしていたのではないかという話も出てきます。なるほどなと思いました。

さまざまな立場からのクソバイス

本に出てくる話は一般の人からの相談をまとめたものです。世の中の人がこんなことにイライラしているのかということもわかります。

出てくるクソバイザーの立場もさまざまで、上司や先輩を始め、親であったり友達であったり、男性女性さまざまな人が出てきます。女性目線のものが多いのですが、男性でも共感できるものもあるので、どんな方にもおすすめできる本です。

クソバイスの返し方

相手のフォーマットを利用するとか、主語を小さく・または大きくして見るとか、いろいろあります。なんせ本では100個のクソバイスを紹介しています。

頭の回転を使うので、実践的に思いついてその場で言い返すのは難しいかもしれません。本で読んでクスっとするのがおすすめです。うまいこと言っているものや、そりゃそうだよなと納得するものもあります。

何よりも、クソバイスに対して自分もクソバイスで返してはいけません。自分もクソバイスをしてしまえば嫌な奴と同じになってしまいます。自分もそんな嫌な奴にならないように、冷静になり思いとどまって、心の中でクソバイス返しを行いましょう。

おわりに

人間は他人に対してクソバイスをするとなんだか偉くなったような気がして心地よいそうです。困った習性ですが悪気がない場合もありとても厄介です。

犬山さんによると、本当に人のためになるアドバイスというものは、いろいろな話を聞いて悩みや問題を探し、その人の気持ちになって考えているはずなので、気持ちいいものでは無いはずだそうです。辛い思いをしている人の気持ちに寄り添って考えるはずなので、アドバイスする側も苦しい気持ちになっているそうです。

自分がアドバイスをする際に、これはクソバイスになっていないかどうかという判断になります。もしも人にアドバイスをしたつもりでも、なんか言っていて気持ちいいなと感じた場合は、多分クソバイスです。これから気をつけようと思います。

書店員の仕事法『スリップの技法』

Fri, 17 May 2019 00:00:00 GMT

書店員である著者による、本屋の仕事に関する本です。本に挟まっているスリップを使った賢い仕事のやり方がかかれています。

書店員でなければそれほど参考になる情報ではありませんが、本が好きとか本屋によくいくという人であれば、その仕事の内容や考え方がよくわかり、おもしろいと思います。本屋の裏側みたいなものを覗くことも出来ます。

たまにスリップが挟まっている本があると思います。本のスリップの意味や使われ方など、書店員の人しか知らないような知識がどんどん出てきます。

もしも書店員の方であれば、もっと仕事を面白くする考え方などを知ることができると思います。何よりも著書は仕事に関する捉え方が前向きで、もっと良くしてやろうという心がけが感じられます。言われたことだけやるとか、機械に情報を入力してその結果をそのまま行うとかではなく、自分で考えて取り組むことの重要さを教えられます。他の仕事でも当てはまることは多いと思いますので、是非参考にするといいです。積極的に取り組むとか自分ごとにするとか、そういった考え方を学ぶことが出来ます。

書き込みされたスリップの写真

実際に書店で使われた書き込みされたスリップの画像がたくさん掲載されています。自分へのメモだったり、同僚への指示だったり、いろいろなパターンがあります。ここに陳列すればもっと売れるのではないか？とか、あの本と一緒に並べたらどうかなど、書店員の販売作戦がたくさん載っています。

何を一緒に並べるか、どの棚に置くのかなど、考えることはたくさんある様子です。本屋の棚が頻繁に入れ替わっていたら、書店員の試行錯誤なのかもしれません。今度近所の書店でチェックしてみようと思います。

本に書いてある考え方は、書店で働く人にとってはとても参考になる技術なのではないかと思います。他にも同僚や部下への指示の出し方とか、ターゲットへのアプローチの仕方なども学ぶところはあります。

POSレジであったり上司の意見であったりを参考にすればそれなりの答えは出てくるのかもしれませんが、やはり自分で考えて、さまざまな施策に取り組んでほしいです。書店員だからこそできること、他の仕事にも応用して考えられるものだと思います。

おわりに

書店員向けの内容というのがまず感じるところでしょうか。書店で働いている人にとっては、ためになる情報が満載です。書店で働かない人にとっては、そんなにすぐに活かせる知識はありません。ただ、書店員の働き方や商品陳列の工夫などを知ることが出来、書店の裏側を覗くことが出来ますので興味はもてるかと思います。

書店でスリップの挟まっている本を見つけたら、それに何か挟まっていたら注意して読んでみようかと思います。書いてある意味はわからないですが、何らかの作戦や意図がきっとその本にあるかもしれません。

この本を読んでみて、ある意味書店員向けの技術書と言った感じでしょう。そんなジャンルの棚はありませんので、この本こそ陳列する場所に困る本なのかもしれません。いつの日か書店員として働くことがあれば、また読みたい本でした。

デジタルへ移行する本『ぼくらの時代の本』

Thu, 16 May 2019 00:00:00 GMT

著者がブログに描いていたエッセイをまとめて翻訳したものです。著者はデザイナーであり開発者でもあるそうで、ブックデザインなんかにも実際取り組んでいます。

そんな著者による、電子書籍が活発になりつつある時代の本についてのエッセイです。

海外での実状もわかりますし、開発者でもあるためデジタルについての技術の紹介や説明が詳しいです。もちろん小難しい話になりすぎないように、わかりやすい言葉を使って説明してくれているので、デジタル書籍技術の入門としてもいいと思います。

デジタルに期待する

著者はデジタルな本について期待を持って語っています。もちろん紙の本にも多く触れているのですが、デジタルな書籍ではまた異なった体験ができることをたくさんの例で示しています。

便利なのは間違いないですし、さまざまな技術が用いられることで、より応用的な利用もできるようになると思います。

電子書籍の現状についても説明があり、現在の課題なども考えています。著者個人が思う悩みなどもあります。形がないことや輪郭がないことなど、その特長を示しており、その部分については実際に取り組みを行うことで彼なりの回答を探してみたようです。

電子書籍の発展には色んな考え方があると思いますが、私は楽しみに思っています。いつでも読めたり、重たくなかったり、場所も取らないなど、良い点はいっぱいあります。でも、やっぱり紙の本の方が好きかなあ。なんでなんでしょうか。電子書籍は新しい読書の体験として、これはこれでおもしろいものになるはずです。私も未来の本に期待しています。

電子書籍をめぐる環境

販売しているプラットフォームや、読む際のデバイスなどについても考察しています。Amazonを始めとする電子書籍サービスはいくつもありますが、選択肢があるがゆえに互換性が無く困りますよね。

電子書籍のデータもPDFだったりHTML形式だったりいろんなものがあるようです。何か統一した形式が生まれるといいですが、難しいのかもしれません。それぞれいいところと悪いところがありますし。

購入した電子書籍も、あくまでもデータを見れるだけで、手元に残るわけではありません。いつの間にか更新・変更されることもありますし、何らかの原因で配信停止・閲覧停止の状況になることも考えられます。

さまざまな可能性があるのでなんとも言いにくいのですが、好意的に捉えられるか分かれるところです。何かこう、仲良くできる選択肢があればいいですけどね。難しいのでしょうか。考えてみたいです。

おわりに

これからの時代の本について、デザイナー・開発者として考えてみたという内容でした。

本読む人にはそれぞれの読み方があるので、人によって捉え方は異なると思います。本が読み手に届くまでにはたくさんの人が関わっており、その人たちの立場によっても捉え方は異なると思います。嬉しい人もいれば嬉しくない人もいると思います。難しいことだとは思いますが、これからの電子書籍が発展する時代に、本とのうまい付き合い方が見つかるといいと思います。

『Webデザイン基礎トレーニング』

Wed, 15 May 2019 00:00:00 GMT

Webデザインに関する本です。よく使われるパターンやテクニックを紹介しています。デザインのパターンの解説やCSSでの指定方法などが書かれており、実践で利用する機会は多いと思います。

ただし、いつどのパターンを使うべきなのかということに関しては、やはり経験が大事です。場数をこなしてクライアントやプロダクトに合ったデザインを提案できるように練習していきましょう。まだ初心者のうちの引き出しを増やすための勉強として有効に活用できる内容になっています。

Webデザインのさまざまな要素

この本では以下のデザイン要素について解説されています。どの項目についても実例とソースコードが書かれていますのですぐに参考にして利用することができると思います。JSのライブラリを使ったものも含まれていますので注意しましょう。

ページレイアウト
インターフェース
タイポグラフィー
ビジュアルデザイン
コンテンツデザイン

実際のデザインの現場では、プロダクトに沿った表現を見つけるための取り組み等も必要となります。それらについては書かれていません。あくまでも、こんな表現があり、それを実現するにはどうすればいいかということのみが書かれています。

すなわち、どんな場合にどんな表現を選ぶべきかについては別の方法で身につけるようにしましょう。

実際に写経するのがおすすめ

Webでの表現はインタラクティブなものが多く、実際に実装して触ってみないと感覚がわからないと思います。本に書かれている写真を見て満足するのではなく、実際にソースコードを入力して、触って見ることがおすすめです。

いくつかのディスプレイで見てみたり、PCとスマホそれぞれで見るなどやってみましょう。いろんなブラウザを使って見ることも重要になると思います。

実際にソースコードを触って見れば、意外と簡単に実装できることも解ると思います。触れば触るほど奥が深くおもしろいのでおすすめです。サンプルコードがあれば、無理せずにダウンロードしましょう。ミスタイピングなどで余計な時間を使わなくてすみます。サンプルコードにコメントをつけながら理解していくと、効率良く学べるのでおすすめです。

おわりに

図書館で借りてみてみたのですが、ちょっと昔の本でした。今となっては結構違う常識になっている内容もありましたので注意したいと思います。あっという間にトレンドが変わっていくので、しっかりキャッチアップしておきたいですね。

タイトルにトレーニングとありますが、実際には実装方法の実例集と言った感じです。実例と言ってもこの本用に作られたサイトですので、実例ではないという感じでしょうか。実際のトレーニングには、WEBサイトのデザインを自分で作ってみるのが一番だと思います。すでにあるサイトでもいいですし自分で考えてもいいです。このサイト自分ならどう作るかなという気持ちで作り直してみると楽しいですし練習にもなっておすすめです。

ライセンスに関する基礎知識『OSSライセンスの教科書』

Tue, 14 May 2019 00:00:00 GMT

OSSの開発やコミュニティに参加している著者によるOSSライセンスのに関する基礎知識と実例、取り組み方のコツなどを紹介した本です。

OSSライセンスのは法律なども関わってくるためややこしいのですが、細かく書かれておりしっかりと理解することが出来ます。要約などもところどころに書かれているため、憶えるのにも使えると思います。基本情報などの資格試験の勉強にも良いです。まるごと暗記が必要であればそうしたらいいのですが、ライセンスに慣れておいて利用するときにライセンスの利用条件をしっかり見ることが目指すべき状態だと理解しました。

監修として弁護士の方がサポートしていることもあり、実際の法令などについての考察・解説も充実しています。この機会にOSSライセンスのルールや仕組みについてしっかり学んでおこうと思いました。

OSSライセンスの基礎

いくつかのライセンス体系についての概要が書かれていました。ここでは概要のみを引用してメモします。難しい表現に出会ったときもこれらの内容を意識しながら調べることで、しっかり理解して利用できるようになると思います。

ライセンス原文とその解説も書かれているので、これからライセンスを目にするときの練習にもなると思います。時間をとってゆっくり読んでいくことをおすすめします。

利用者に責任がある

OSSライセンスの利用に当たって、責任が開発側には一切ないことが大きな共通点です。利用する人が責任を追うことになります。それが認められない場合はOSSライセンスのを利用することは避けたほうがいいです。開発者にとっては、より開発に集中でき発展につながるので良いと言えるでしょう。

寛容型ライセンス

一般的には、著作権表記をすることと、ライセンスの表記をすることでソフトウェアの改変や頒布することが許されるそうです。場合によっては特許権についての言及があるため注意しましょう。

+ MIT
    + 利用する  
        基本的に寛容
    + 他の人に頒布する  
        適切にライセンス表記を行う、全文を表記する必要がある  
        適切に著作権表記を行う、必ず人の目に触れる場所にライセンスと著作権を表記する必要がある。

+ BSD
    + 利用する  
        BSDライセンスの以外の規約がないか確認する
        基本的に寛容
    + 他の人に頒布する  
        適切にライセンスを表記する、全文を記載する必要がある。
        適切に著作権を表記する
        BSDライセンライセンス以外に規約がないか確認する
    + 4項型、3項型の場合  
        著作権者の名前などをOSSライセンスののアピールや広告として無許可で使わない

+ Apache
    + 利用する  
        他の利用者に対して、自分の所有する特許の権利侵害の訴訟を起こすと、原著作者から自分に対する特許の利用許諾が取り消される場合がある。
    + 他の人に頒布する  
        適切にライセンスの表記を行う、全文を表記する必要があります
        NOTICEファイルがある場合は適切にその中身を表記する

+ TOPPERS
    + 利用する  
        基本的に寛容、念の為制約事項が変わっていないかは確認すべき
    + 他の人に頒布する  
        適切なライセンス表記・著作権表記を行う。または利用に関する報告を開発プロジェクトへ適切に行う

互恵型ライセンス

コピーレフト型とも呼ばれる。改変前の使用許諾が改変物にも残ることや、改変した部分も含めてソースコードを公開することが求められるなどの特徴があります。

+ GPL (GNU General Public License)  
    + 頒布時に守るべき4つの事柄  
        1. ライセンス文言を頒布を受けた人が必ず読める形にすること
        2. ソースコードの開示を行うこと、バイナリーコードであればその生成に必要な構成ファイルなども必要になる
        3. どうすればソースコードを入手できるのか明確に表記すること
        4. ソースの開示は頒布を受けた人に少なくとも3年間は継続すること
    + 入手時の注意  
        OSSライセンスのによっては利用許諾を緩和している場合がある
    + 頒布時の注意  
        GPL以上の条件を付け加えてはいけない。
        上述の4つの事柄を守る

+ LGPL (Lesser GNU Genelar Public License)  
    基本はGPLと同じです。
    条件を満たせば、そのライブラリをリンクしたソフトウェアはLGPLと全く異なるライセンスで利用許諾できる
    ライブラリをリンクしたソフトウェアのリバースエンジニアリングを禁じてはいけない。
    ライブラリ自体の頒布の際はGPLと同様の条件が課せられる。

おわりに

OSSを利用・開発する上で必須のライセンスに関する知識を身につけることが出来ました。他にも、OSSのコミュニティに参加する上で意識すべき点も書かれていました。重要なところとしてはフリーライダーはやめようといったところでしょうか。コミュニティの発展に力を貸すことで、OSSのコミュニティにもまた自分のために力を貸してくれます。傍観者を脱して実際にコミュニティを手助けすることを意識して動くことが望ましいです。

ソースコードの発展はもちろん、自分の技術力や信用の積み重ねにもつながります。積極的な参加によって支えられているOSSのコミュニティの発展に協力していきたいと思いました。

装幀は細部に宿る『「本をつくる」という仕事』

Tue, 14 May 2019 00:00:00 GMT

本を作る際にかかわるさまざまな仕事について、取材した記録をまとめた本です。

本を綴じる人や、装幀を行う人、本を書く人、書体を作る人など、1冊の本ができるまでにはさまざまな人が関わっていることが理解できます。さらにそれぞれの人の仕事の歴史や、現代での環境などについても取材されており、本への味方が変わるかもしれません。東北の震災の影響の話などもあり、これまで知らなかった本にまつわる環境の変化も知ることが出来ます。

本にまつわる仕事について理解することで、目の前の本に対する認識が変わるかもしれません。本を読んで本のことを知るというのもたまにはいいと思います。

装幀は細部に宿る

装幀の話では大抵の場合は夏目漱石の話が出てきます。ご存知の通り有名な本を執筆した方なのですが、いくつかの本に関しては自分で装幀を行ったそうです。著者が自ら装幀を行うことは珍しいそうで、よほどのこだわりか好奇心が合ったようです。しかも界隈では結構評判が良いというクオリティです。漱石の本では美しさ、そして装幀を行う自由さが現れており、装丁家の目指すべきものがここから現れる印象です。

時代が違うので、今のようにグラフィカルではないのですが、結構手が込んでいるらしく立派なものだそうです。一度見てみたいと思います。

子どもの読書

小さな子供向けの本に関する仕事にも触れられています。子供向けの本は大人が描いており、大人がおもしろいと思うものでも子どもがおもしろいと思ってくれるかどうかはわかりません。そんな面白さがあるそうです。

こどもが読書をして、次の本に進むまでの過程や選び方、本を読んでもらうためのコツなども少し書かれていました。

「魔女の宅急便」の原作者である、角野栄子さんの話もあるので興味がある方は必見です。創作に至るまでのエピソードや体験が書かれており、より深く作者と原作の絵本のことを知ることが出来ます。

おわりに

本を作るために関わる色んな人の歴史や環境についての取材でした。想像する上で大切にしていることや、仕事をするまでのエピソード、クリエイティブの種となるような体験など細かく書かれているので面白かったです。

本に興味がなくても、さまざまな仕事について知ることができる良い本でした。本や絵本に興味がある人にとってはさらにおもしろいと思います。

「クロール済み-インデックス未登録」がほとんど解消され、有効なページが200を超えました

Mon, 13 May 2019 00:00:00 GMT

ブログを初めたばかりの頃はGoogleSearchConsoleのカバレッジの項目で、ほとんどのページが「除外」の状態になっていました。

あれから数ヶ月、地道に取り組むことで「除外」状態のページも減り、「有効」としてgoogleにインデックスされるページのほうが圧倒的に多い状態になりました。今では200記事以上が有効な状態となっており、圧倒的に「除外」の状態のページが少ないです。

この記事ではそのことについての情報と、取り組んだ対策について紹介します。

サーチコンソールで「除外」状態のページがほとんどだった

以前の記事で紹介していますが、このブログの初めてしばらくの頃は、サーチコンソールのカバレッジを確認すると「除外」の扱いになっているページが多く存在していました。2019年1月のことです。

GoogleSearchConsoleの「クロール済み-インデックス未登録」状態の対処

「除外」状態になっているページはGoogleから「憶える必要のないページ」と判断されているため、SEO的に意味がなく検索結果にも出てくることはありません。困った状態です。

このときの「除外」となった詳細としては、「クロール済み-インデックス未登録」という判定でした。これは「googleのサーチボットが問題なくページを回遊できた、しかし、インデックスとしては登録していません。」という意味です。簡単に例えると「映画最後まで見たけど面白くなかったから忘れた、友達にも紹介しない」という判断を食らったということです。

「クロール済み-インデックス未登録」への対策

上記はSEO的に良くないので対策を行いました。具体的には以下の対応を行いました。

h2やh3などの見出しを作り直す
見出しを意識してつけるようにしました。さらに、それぞれの記事でユニークなものになるようにしました。「印象に残ったところ」など汎用的なものはやめて、「〇〇が□□するとは！」みたいな感じにしています。他の記事の使いまわしと判断されて、似たページとして扱われるのを避けるためです。
記事数を増やす
地道にほぼ毎日投稿をしました。平日のみですが、ほぼ記事を描いています。たまに1日に2,3本記事を上げる時もあります。サイト全体の情報量が増えることで、サイトそのものの価値ができインデックスされやすくなると考えました。
記事の文字数を増やす
調べたところどれくらいの文字数が良いのかについてはさまざまな意見がありました。私は1記事2000文字を目安として取り組みました。多分多いほどいいとは思うのですが、あまりに多いと書くのがしんどいので2000文字になりました。
インデックス登録をリクエストする
サーチコンソール上にてインデックス登録の再リクエストを行いました。「URL検査」の項目からできるのでやっておくといいです。やらなくても自動的にクロールしてくれると思いますが、「リライトしたからなるべく早く見てほしい、待てない！」という場合はやっておくといいと思います。

上記対策を行って2ヶ月後に書いた記事では、対策によってだいぶ解消されたことを紹介しています。前回の記事から2ヶ月が経過しています。この頃には「除外」状態のページよりも「有効」と扱われたページのほうが多い状態になりました。効果が出始めています。

「クロール済み-インデックス未登録」を解消する

有効なページが200を突破

その後、2ヶ月後の2019年5月には「有効」とした使われているページが200を超えており、ほとんどのページが「有効」として扱われるようになりました。

実際にだいぶ良い状態になっているので、行った対応は効果がありました。効果がわかるまではじわじわと動いていくので、結構時間がかかりました。3,4ヶ月かかっているのでそれくらい気長に取り組みを続けながら待つ必要があります。

意味のあるページをしっかり作ることが大切なのだと思います。「量と質」でしょうか。記事を見てくれた人にとって有益な情報であること。そして、検索してサイトを訪れた人がちょうど知りたかった情報を提供することができれば良い結果になると思います。

おわりに

放っておいても解決するかはわからないので色々とやってみることが重要だと思います。まずはどんな問題が起きているのか、どれくらいの数のページがいつから対象なのか、そのことによりどれくらい影響うけているのかと言うことをしっかり把握することから初めましょう。

そして、いくつか対応方法を調べて、実際に取り組んでみましょう。時間がかかるものもあれば、今までの記事を地道に直さなければならないものもあります。効果が現れるまでは時間がかかります。途中で心配になることもあると思いますが、長い目で見守りつつ諦めずに取り組むことが重要です。

改善されなかったなかった場合も、行った対応を見直し、別のアプローチを考えたり他の問題が潜んでいないか考え直したり、多面的にアプローチしてみましょう。

装丁家による電子書籍についての考察『装丁、あれこれ』

Fri, 10 May 2019 00:00:00 GMT

装丁家である桂川潤さんによる、装丁についてのエッセイをまとめたものです。主な要素としては、さまざまな装丁家の取り組みや作品についての考察・分析を行ったり、本と装丁に関するこれからの動きや流れについてになります。

ちょうど電子書籍が活発化してきたときの本でもあるので、電子書籍についての考察も多いです。装丁家からみた電子書籍の意味やありかた、電子書籍がもっと広まった際の装丁の意味や立場についての考察が多く、おもしろい内容です。

他の装丁家の活動や思考についてもたくさん触れられていますので、装丁全般の状況や雰囲気を知るのにとても良い本でした。装丁に関する関連書籍なんかもいっぱい出てきます。紹介されていた本も読んでみたいと思いました。

ブックデザイナー

装丁以上に本の版組など全体のデザインを行う人をブックデザイナーと呼ぶそうで、著者もこれに当たるそうです。本を読む際には、解釈し翻訳し再構成を行うことになります。書店の未来や本の未来なんかも考えられており、とても大変そうな印象でした。これから本がどのような方向に進んでいくのかとても楽しみでもあります。

「本は現実世界と繋がった異界」。装丁は異界への「扉」であると考えているそうです。本には本の形があり、装丁はそれと現実世界をつなぐ端のような役割のようです。買ったら中身を取り出して捨てられるパッケージとは異なるものという認識です。

装丁を眺めることで内容を想像し、本の予感を感じさせるものである。こんなふうに装丁を語っていました。人によってさまざまな捉え方があるようで、とても興味を持ちました。こればっかりは実際にやってみないとわからないものなのかなと感じています。

電子書籍と紙の本

電子書籍はとても便利ですが、もろもろの制約のある紙の本のほうが感覚による体験もあり、人間性の面から優れているのではないか。本が電子化されモノでなくなれば、装丁も必要なくなってしまうのではないか。電子書籍ならではの表現を探すべきなのかもしれません。モノからコトへ遷移する時代になっている予感です。

電子書籍は色調などの表現も豊かですし、拡大縮小も出来ます。デメリットはデバイスの画面サイズに束縛されてしまいますし、今どのへんまで進んだのかもわかりにくいです。一方、紙の書籍は開く面白さがあるといいます。ページを進んでいく感覚は紙の本でのみ得られる感覚で心地よいものです。

おわりに

著者のウェブサイトもありました。装丁に関する概要であったり、これまでの実績のいくつかを閲覧できます。個人的に電子出版をやってみたという取り組みもあり、pdfのデータをダウンロードして読むことが出来ます。桂川潤のサイト

「批判だけでなく代案を」という考え方は良いことだと思いました。私も気をつけたいと思います。

変化を創る『企画書は、手描き1枚』

Thu, 09 May 2019 00:00:00 GMT

企画書を作る際のノウハウやコツの本です。プランニングや企画のノウハウが詰まっており、企画書の作成と言うよりはそこに至るまでの頭の使い方などに関連する内容です。

タイトルの通り手書き1枚の企画書をおすすめしており、実際の企画書を作る際の考え方などもたくさん書かれています。「1枚でしかも手書きで書け！」という内容よりも、「こうすればいい企画が生まれる。」といったことについての内容が多い印象です。副題になっている「感動型プランニング術」という言い方がわかりやすいかもしれません。

著者は企画書には個性が大切で、発案者の個性をより強く持たせるためにも「手書き1枚」を推薦しているようです。企画書は会社やプロジェクトごとに規格が決まっていることもあると思います。上司や顧客の好みや指示もあると思いますので、無理に手書き1枚にするのがいいとは思いません。ですが、企画書作る上で頭の整理や内容の精査を行うために、手書き1枚に書き起こしてみることはとても意味があると思います。

時代が求めるクリエイティブのあり方や人物像についての考察もあります。

時代が求めるクリエイティブ

まず、以下のような人材を企業は必要としています。この人でないとだめだと思わせることが出来れば大成功です。

課題解決できる人
広い領域で知恵の出せる人
夢のあるイメージを描ける人
仕組みを作りスタッフを引っ張っていける人

悩みの本質を見つけること、問題の根っことなることをしっかり見つけられるかどうかが、本質的なアプローチにつながります。それらは、ゆくゆくはすべてがブランドにつながるような取り組みであることを意識しましょう。

変化を創る

約束や制約を打ち破り、新しいルールを作っていくようなオリジナルな考えかたが大切です。変化に合わせるのではなく、「変化を創る」意識です。そのためのヒントとなる姿勢が書かれていました。

何でも興味を持ち、結びつける好奇心
現場へ赴くフットワーク
知識を集めて異質な組み合わせを作る
五感をフル活用して、知るよりも感じる
曖昧な世界を論理的にロジック化する
社会的な争点を意識する
テクノロジーの進化が創造性を刺激する
オープンな考えでコラボレーションする
全体との関連を見る、総合的な視点
相手の喜びを自分の喜びにする

プランニングの原則

課題の本質を見抜くこと、何をすべきかのコンセプトを創造すること、解決策のアイデアをまとめること、この3つのことを発見することが企画書に必要な要素です。

何をどう伝えるのか、WhatとHowの2軸での捉え方を鍛える必要があります。他とは異なる個性的なアイデアを創造することで、他と差がつきます。個性そのものがアイデアなので企画書にフォーマットなどあるはずがなく、より自分らしさが出るものを選択すべきです。

企画書の作り方

企画書の中に自分の顔となるような印象があるでしょうか。そうでなければもっと自分を表現してもいいはずです。企画書では自分の個性を使って他と差をつけることが重要です。より顔が見えるようなアイデアを持っていくことで、あの人に頼みたいという印象をもたせたり、うまくいったときのことを思い出したりできるはずです。

おわりに

手書きで作ることの効果や、アナログに紙に書き出すことの意味などが書かれており、どれも納得するようなものばかりです。著者の手書きの企画書も実際に掲載されていますので、大いに参考にないると思います。図解化している部分やイラストで伝える部分、タイトルなどのコピーライティングの部分など、参考になるところが多いです。

何でもかんでもコンピューターで作るのをやめて、一度手書きの企画書なんかを作ってみるのも面白そうです。次にアプリやシステムを作るときは一度やってみようと思います。

クリエイティブは盗むこと『クリエイティブの授業』

Thu, 09 May 2019 00:00:00 GMT

クリエイティブでいるための心構えを書いた本です。元は洋書で日本語に訳されたものです。本のサイズが正方形で特殊なので、ちょっと探しにくいかもしれませんが、見た目のかっこよさもあり目に入りやすいと思います。

クリエイティブな人生を送るための10の原則を紹介しています。他人の影響を避けるのではなく受け入れることがコツという話しです。授業とタイトルにありますが、ハウトゥではないです。具体的な絵の書き方や作り方はありません。

アーティストのように盗め

アイデアはすでにあるものの組み合わせであり、バレていないだけですべて真似である。と言うような考えから始まります。それを理解した上で、周りをよく観察し使えそうなものを集め記録していきます。

真似するところからクリエイティブは始まるので、その大切さを前向きに捉えている印象です。真似するにしても以下のような敬意を払う心構えが書かれており、参考にするといいと思います。

良い盗み方

敬意を払う
本質を学び取る
大勢から盗む
権利を守る
作り変える
リミックス

悪い盗み方

作品を汚す
表面だけかすめ取る
1人から盗む
権利を侵す
ものまね
パクリ

クリエイティブに生きるためのアドバイス

著者はアートを仕事にしているのですが、結構現実的な目線を持っています。すでにあるものからアイデアは生まれるということもそうですが、周りの人との付き合い方や何を優先するべきかということも触れられています。生活のアドバイスなんかもあるのでクリエイティブ以外のところでも意外と参考になります。

自分の読みたいと思う本を描く、聞きたいと思うものを作るということが創作の始まりで、知っていることを書いても意味が薄くなってしまいます。知っていることではなく、好きなことをアウトプットすることが重要で、それが自分の作るべきものなのだそうです。

おわりに

真似する、ということを前向きに捉えている内容でした。練習のために真似することには大いに意味があり、敬意を持って盗むことで、自分の道具として使うことが出来ます。

具体的に何をするとアウトなのか、といったことは触れられていませんが、心構えであったりこうすべきであるということが書かれています。誰かの作品を参考にして何かを作りたいと思ったときなんかは一度読んでみるといいと思います。

クリエイティブでいるためには、常に周りから得られる情報に気を配り、気になったものや良いと思ったことをしっかり覚えておくことが重要です。そのことを著者は盗むという表現を使っているようです。

グーグルアドセンスのPINコードが届いた

Thu, 09 May 2019 00:00:00 GMT

先日グーグルからPINコードを送るので確認してくださいという旨の表示がありました。何日か経過してそれが無事に届いたので、その情報です。

PINコードとは

グーグルアドセンスの報酬がある程度蓄積されると送られます。これに記載されているPINコードをアドセンスの管理画面で入力することで、本人確認を行い報酬を受け取れるようになります。ですので、この工程をやるまでは報酬を受け取ることは出来ません。

簡単なレターパックのような形で登録している住所に届きます。住所とかの情報を正しく設定しておきましょう。もしも引っ越しとかしたようでしたら気をつけましょう。このPINコードは本人確認のための用途です。特定のアカウントに対してすでに紐付けられています。ですので、万が一他人の住所に届いたとしても、アドセンスのアカウントにログインできませんので意味はありません。悪用されることも無いと思います。

PINコードが届くまで

まず、アドセンスの管理画面に住所確認のためのPINコードを送ったという旨のお知らせが表示されました。 2週間から4週間位で届くという記載がありました。

私もゴールデンウィークの直前にこの表示がでて、実際にPINコードが届いたのは連休明けでしたので、ほぼ2週間で届いたことになります。

PINコードを入力する

手紙の端を切り取って中を開くと6桁の数字が記載されています。この数値をアドセンス管理画面の入力画面に入力します。3回間違えると広告の配信が止められてしまうそうですので気をつけましょう。

入力するとしれっとお知らせが消えました。特に完了画面とかは無かったので、ちょっと心配になりましたが問題ないようです。

おわりに

実際に報酬を受け取るためには、お支払基準額に到達する必要があるのでまだ少し先のようです。引き続きがんばります。

PINコードがなかなか届かなくてそわそわする人もいると思うのですが、気長に待ちましょう。2週間は結構長く感じましたし、場合によっては4週間とかかかっている人もいるようです。その間も報酬はちゃんと蓄積されているので、心配する必要はありません。

装丁家の頭の中を覗く『本の顔』

Wed, 08 May 2019 00:00:00 GMT

装丁家である坂川栄治さんの装幀ができるまでのさまざまな情報や思考を図解した本です。

まるで装丁の教科書のような本になっており、とても読みやすくおもしろい本になっています。実際の本の写真もたくさん載っており、実例を見ながらそのエッセンスを学ぶことが出来ます。いろいろなパターンの説明があり、「装丁七転び八起き」として採用案と不採用案の比較コーナーもありました。作例集としても参考になる本だと思います。

実際に本の部分やパーツの名前であったり、文字組みで使われる単語の説明などが書き込まれており、文字組みやデザインの基礎知識の習得にもつながります。本に限らずデザインの知識として情報が多い本でした。

編集者との打合せなどの部分も垣間見れるので、装丁家の仕事ぶりも良くわかります。実際に装丁の仕事に興味のあるデザイナーの方におすすめの本です。

本ができるまで

実際にデザインする以前の編集者との打ち合わせの雰囲気なども紹介されています。

打ち合わせでは「こんな人に読んでほしい」「刊行する時期」「これまでの作品の例」などの情報を受け取り、どんな顔にするのか大枠を決定します。

写真などはストックフォトを利用する場合もあれば、自ら撮影したり写真家に依頼したりもするそうです。限られた予算の中で作るためにいろいろな手段を選べると良いです。

本文組も装丁

本文のレイアウト・文字組みも装丁家の仕事です。本文組によって実際に読むときの印象は大きく変わります。本の表紙より中面の方が、読者が向き合う時間は長いはずです。本の厚さや大きさでカバーの容量も変わってくるので、本文組から先に設計します。「手に取りやすい」「疲れない」「伝わりやすい」の三要素が基準となっています。読んでいて疲れる本は内容だけでなく、文字組みなんかにも原因があるのかもしれません。外国の本を日本語に訳したもので、たまにすごく疲れる本があります。それなんかまさにこれが原因なのかもしれないです。

カバーの制作

レイアウトを数パターン作成し、編集と相談します。デザインが決まれば、カバー・帯と表紙・扉を準に設計します。用紙や加工を選択して予算を計算。そのあといよいよ印刷所へ入稿して色校正を進めます。何度かやり取りをしつつ、意図したものが出来上がるように入稿データを修正します。

文字によるタイトル

書体選びでは、硬い内容は明朝、強いイメージならゴシック、愉快なものはオリジナル書体などのイメージがあります。この辺はWebデザインなんかも同じですね。とても勉強になります。読者の年齢層が高い場合は縦組み、落ち着きや風格が出ます。若い読者向けや翻訳書は横組にして、新しさを表現します。

文字案は大きく分けて3種類あり、作りたいイメージや表情によって使い分けます。作例もしっかり見ていればこれらのパターンを利用していることがわかります。常に利用できるパターンを用意しておくこと、それを応用してデザイン案を提案することの意味がわかった気がします。

作り文字

切ったり貼ったりして素材を加工した文字のこと、個性や意外性を持たせて強い印象を与えることが出来ます。
描き文字

筆やペンで手書きしたもの。絵やタイトルだけで表現するときにも表情が出せます。
活字

印刷文字で、オーソドックスな印象です。誠実さや堅実さ普遍性が表現出来ます。

イラストによる想像

イラストは上手下手や大小よりも、読者の想像力を喚起させ、内容を想像させることが大切です。イラストが作る雰囲気をよく考えます。イラストレータに依頼するときも、その人が書くイラストの個性を見る、より明確な個性であればそれに委ねることができるのでお気に入りのようです。

イラスト案には4種類のパターンがあります。

線画

線で書いた絵。色面が弱くなりがちですが、ワンポイントに良い。画材の印象などで表情が変わりおもしろい。
ペイント

絵の具で書いたもの。大きなイメージになるのでさりげない表現ができると良さそう。
デジタル

デジタルイラスト。無機質な質感や並列・反復など。透過なども表現出来ます。
立体

造形したものを撮影したもの。物としての存在感がでる。光の当て方でも印象が変わる。

色による印象

対象となる性別や年齢によって、印象を変えて合わせていく。普段の生活の中に色の選び方のヒントは隠されており、身の回りのものを参考にして作るのが一番わかり易いそうです。色の組み合わせや隣接したときの効果などは、普段から記録しておくと良いです。見つけたものは写真に取ったりして記憶しておき、自分のお気に入りのパターンを増やしておくとデザインで役に立ちます。

写真による情報

写真は日常的に目にしている風景なのでありふれたものである印象を与えることもあります。さらに情報量も多くなってしまうこともあります。むき出しの写真ではなく、ちょっと曖昧さを残したような写真が優れていることもあるそうです。

写真案では以下のパターンが用いられます。海外の文学作品か日本の作品か、でも大きく選び方が変わるそうです。

モノ

内容を想像させるような写真を選べるかというところが難しそうです。
人物

著者本人の顔など。部位や後ろ姿を用いることで物語を想像させることも出来ます。

デジタルに飛びつかない

著者はパソコンを使わないそうです。闇雲にパソコンをいじっていても、勝手にデザインが出てくるわけではなく、パソコンはあくまでもイメージを形にする道具という認識です。

何案もイメージのアイデア・ラフを作りそれらを絞り込んでいくことが大切です。頭の中のイメージが明確化されていれば、頭の中で仕上がりが想像できます。「どういうデザインにしたいか」とイメージを作ることから取り組むそうです。

時代は進んでデジタルが優勢になり、色のパターンなどデジタルのほうが快適な部分もありますが、かならずまずは自分の中でイメージを思い描くことから始めています。

ネット書店での見え方も気にするようになっているらしく、文字の大きさなどに気を使うこともあるそうです。紙の本という制約の中で、ネット上での見え方も気にしなければならないということに、なかなか無理が生じているようにも思いました。

おわりに

装丁のデザインを行ううえでの実践的なパターンを知ることが出来ました。山ほどある装丁のデザインですが、この本で得た知識で分類してみるのもいいと思いました。似たパータンの装丁で集めてみると、なにか面白い発見があるかもしれません。

本の顔となる装丁について基礎的な知識を得ることができ、ますます興味を持ちました。ターゲットと伝えたいことをしっかりイメージして取り組むことが、装丁を始めとするデザインの基本なのかなと思います。言うほど簡単では無いのでしょうが、どこかで活かせたらいいなと思います。

忙しいときの料理『本当にうまいスパゲッティの作り方100』

Tue, 07 May 2019 00:00:00 GMT

ホテルニューオータニが監修したスパゲッティのレシピが100通り載っています。いつものスパゲッティが究極的に旨くなるそうです。

パスタは保存もできお手軽に作れるので、めんどくさい時ややる気のでない時のご飯にちょうどいいです。具だくさんにすればそこそこ美味しいものにはなるのですが、せっかく作るからにはこだわって美味しいものを作れるようになりたいです。

タイトルにあるように「スパゲッティ」の作り方なので、麺状のパスタの料理に限られます。一人暮らしなら、大抵パスタはスパゲッティでしょう。貝殻とかリボン型のやつはあまり使わないと勝手に思っています。皆さんはいかがでしょうか。

親子丼とかパスタとかチャーハンとか、簡単にできる料理を美味しく作れるとなんかかっこいいです。こだわって作るカレーとか麻婆豆腐とかが美味しいのはもちろんですが、手抜きのように思える料理が美味しいととても心強いです。

この本では100通りにも及ぶパスタのレシピに加え、パスタの茹で方・盛り付け方など基本となる部分についても記載されています。今までとりあえずで作っていた方におすすめです。基礎的な知識がしっかり身につき、美味しく作れるようになるでしょう。

いろんなパスタのレシピが掲載

100通りも掲載されているのでとても作りきれません。どれも美味しそうなものばかりです。簡単なペペロンチーノもあれば、ウニなんかを使った高級で濃厚なものも載っています。全部写真付きなので見ているだけでもお腹が空いてくる本です。

スパゲッティの基本

本に書かれていたスパゲッティの作り方のコツを紹介します。スパゲッティづくりには手際の良さが重要で、段取りをしっかり把握しておくことがコツです。

ソースを先に作り始める

麺を茹でるよりも先にソースの調理を初めておき、出来たらそのままおいておくといいです。麺と絡める直前に温め直すことも出来ますし、落ち着いて料理が出来ます。何より麺を茹ですぎることがないように注意しましょう。

食べる瞬間がアルデンテを目指す

水1リットルに対して塩は大さじ二杯入れます。結構入れているイメージですが、これくらい塩味がついている方が美味しいです。茹で加減の確認として麺だけで食べたときに、塩っ気がしっかりするくらいの味です。

標準の茹で時間より1〜2分短く茹でて、麺と絡めて温め直す際に、残りの1〜2分を使うイメージです。少し硬めで湯から取り出します。ちょうど食べる時間にアルデンテの状態を迎えられるようにします。

私が考えるちょっとした料理のコツ

以下は私が思う料理のコツです。楽するための段取りとか工夫なのですが、パスタを作る上では美味しく作ることにつながると思います。

材料は予め準備する

塩や醤油などの調味料は最初に全部測って、小皿などに分けておくといいです。フライパンで炒めながらあれこれやると忙しいですし、色んな所が汚れます。予めしっかり測って用意しましょう。野菜とかも切り分けておきます。火にかけながら色々やると、ズバリ効率が悪いです。料理は下ごしらえが大切って何処かで聞いたのですが、それです。準備をしっかりすることが、美味しい料理への近道です。

トングが必要

パスタに限ってですが、トングが入ります。菜箸では麺を持ち上げられないと考えたほうがいいです。茹で上がったら一度ザルで湯切りするのがいいそうですが、それでもトングを使ったほうがいいです。パスタ用のつかむ道具もありそうですが、他のことにも使えるので先端がゴムになっているトングがあると捗ります。

フライパンはすぐ洗う

私が鉄製のフライパンを使っているのでそうしないといけないのですが、料理が終わったらすぐいにフライパンを洗います。食べる前に必ず洗います。暖かいうちに洗ったほうが油汚れも落ちますし快適です。鍋とかも全部そうですが、食べる前に洗っておいたほうが食後の「洗い物めんどくさい」を軽減できます。フライパン洗うぐらいでは料理は冷めません。

IHは掃除が簡単

最近引っ越してコンロがIHになりました。ガスのほうが火の加減とかが便利だとは思うのですが、特にIHでも問題ないです。大きく便利になったこととして、ガス料金かからないことと掃除がラクなことが挙げられます。掃除に関しては一面をさっと拭き取るだけでいいのでとても快適です。料理する度にこまめに掃除するのが一番良いです。

おわりに

パスタは特に麺を茹でながら、ソースや具を作るので平行作業になります。段取りが大事になってくるので調理がおもしろいです。片付けとかも並行してできるようになると、それはもうかなりの料理上手と言えるでしょう。始めてやるときは台所がぐちゃぐちゃになりますが、慣れるとスッキリ料理ができるようになり、味はともかく上達した感を得られます。

ちなみに、私はよくパスタを作るのですが、どうしても盛り付けだけはうまく出来ません。具だくさんすぎるのが一番の問題のようですが、ついつい具だくさんパスタを作ってしまいます。お腹いっぱいになるので。

出版している本屋も面白そう『安西水丸さん、デザインを教えてください！』

Tue, 07 May 2019 00:00:00 GMT

安西水丸さんという方が作られた装幀を紹介して、そのデザインや作成時の思想を辿っていく本です。

装幀というのは独自のデザイン領域と思います。しかし、配置や文字などデザインの基礎的な要素も多く、一定の制約の中で情報を伝えるという点では、他のデザインと共通する点は多いと思います。個人的に最近興味のあるジャンルです。

装幀を読み解く

沢山の本の装幀について読み解いていくことでデザインの意図や効果を学ぶことが出来ます。キャンバス・構図・モチーフ・線・色・文字・視点・顔と要素ごとに章がわけられています。先輩と後輩の会話形式になっており、画像も多いためさっくり読めます。デザインの難しい単語等もそれほど出てきませんので、読みやすい本でした。

「具体的にこうする」というテクニックやハウトゥではないので、そのまま真似できるような内容ではありません。概念の理解やインプットとしてはとてもおもしろいですし、装幀が好きとか水丸さんのデザインが好きという方に特におすすめできる内容です。

どの装幀も個性的でしたので、他の人の装幀も色々見てみたいです。本屋で並んでいるときにはごちゃまぜになっているのであまリ気になりませんでしたが、集めて並べてみると装幀にはデザイナーの個性が強めに出ているように思いました。いわれてみればオライリーもそうですかね。あれはまた別でしょうか。

自分の好きなモチーフを普段から意識しておき、その効果や意味をしっかり理解しておくと、デザインする上で武器になる。というところがとても面白い発見でした。本で紹介されている水丸さんはスノードームがそれだったそうです。「自分の好きなものを仕事で利用する」ということの答えの一つだと思います。なにか自分の好きなものを作っておく、日頃から追いかけておくと意外なところで訳に立つんでしょうね。趣味とかも積極的に取り組んでいきたいと思いました。

水丸さんは手書きの文字なんかも利用していますし、背表紙や裏表紙まで繋がった装幀になっていることも多く、装幀を立体的に捉えてデザインしていることがわかります。自分で書いた本の装幀も多くあり、それらもおもしろいものばかりでした。パッと素人目で見るといわゆる「ヘタウマ」という印象に到達するのですが、デザイナーの方による解説と分析・推測なんかがされており、新しい目線で装幀を眺めることが出来ます。

装幀についてのちょっとした学び

装幀の目的・効果として、人の目を引き、タイトルや著者に視線を誘導することがあるようです。他にも本の内容をイメージさせるような装幀なんかもあります。ページを思わずめくってしまうというのも良い装幀なのかもしれません。本の世界観や雰囲気なんかも表現できます。挿絵とかのイメージが近いのかもしれませんが、それともまた異なるようです。本棚にある本も意識しながら眺めてみようと思いました。

装幀という言葉の漢字には4つ種類があります。装幀・装丁・装釘・装訂です。どれも意味は同じようですが、正しいのはどれなのかはちょっと難しい問題のようでした。人によって違うようです。この本では「装幀」でした。

おわりに

この本を出版された株式会社Hotchkissではちょっと変わった本屋も経営しています。書店兼ギャラリーの「Books under Hotchkiss」というところです。金沢の21世紀美術館のそばにあり、二階はギャラリー、一階は二階に展示した作品の作者のおすすめ本が置かれています。作者のアウトプットとインプットを両方鑑賞できるような場所のようです。

books under hotchkiss

この本も、そのギャラリーに安西水丸さんの作品を展示する際の取り組みの一貫として執筆されているようでした。

この本読むまでこんな面白そうな本屋があることを知りませんでした。今度行ってみようと思います。本屋で本と出会うのとは逆に、本で本屋と出会いました。思いがけない出会いでした。

経営者になったら読みたい本『HARD THINGS』

Wed, 01 May 2019 00:00:00 GMT

スタートアップのCEOを経験した著者による、経営者としての困難とその切り抜け方のアドバイスです。

基本的に事業を経営する際におきる問題についての考察なので、それ以外のことはほとんど出てきません。実際に企業を経営している人であれば大いに参考になると思います。

副題にあるような、答えのない問題について立ち向かうというよりは、経営者として起こる難しい問題の経験について書いた本です。

汎用的に使えるような考え方やノウハウが書かれているわけではないので注意しましょう。

私としては流石に経営者ではないので、読むのが早かったかなあという印象でした。いつの日か、自分がそういった立場になることがあれば参考にしたいと思います。

経営者として考えておくこと

経営しているとさまざまな問題が発生するようですが、事業が大きくなった証拠でもあり喜ぶべきことでもあります。本当にうまくイカなくて仕方なくやらなければいけないこともありますが、世の中の経営者たちは同じような問題に遭遇しているらしいです。

私には経験はありませんが、経営者はこんな難しい問題に対処しているのだなあという想像ができました。

一緒に事業を立ち上げた友人を解雇するとか、従業員のリストラとか、事業の売却など、事業を進める上で出くわす大きな選択が必要になります。

こんな問題が発生して実際に著者はこういう決断をした、と言うような実例がふんだんに掲載されています。中にはうまくいかなかったこともあるのですが、辛い思いもしっかり書かれているのでとても想像がつきます。

こんな人におすすめ

経営者になったぞ！でも大変過ぎてどうすればいいかわからない！という人におすすめです。会社の経営を行う人にのみ共感できるような難しい悩みが満載で、共感をしながら勇気をもらえると思います。

読む限りではスタートアップ的な事業の経営者のイメージでした。もしかすると誰しもが、こうなる可能性は持っていると思いますので読んでおいて記憶においておくといいです。経営者を目指していない人でも、こんな世界もあるのかと抽斗を広げることが出来て良いです。

おわりに

流石に読むのが早かったようです。経営者特有の問題について書かれているので、いざそのときになったら活用しようと思います。

この知識を使っていろいろな場面に応用できたらいいのですが、あまりそういった使い方はできなさそうでした。難しいことについての考え方や対応法と思って本を開いたのですがちょっと違いました。

手帳は人生を変えるツール『まずは、書いてみる』

Fri, 26 Apr 2019 00:00:00 GMT

手帳ライフ研究家の著者による、手帳の使い方の本です。アイデアや時間の使い方などを積極的にメモすることで、より生活が快適になることを教えてくれます。

悩みごとがスッキリしたり、忘れ物が減ったりなど、いい効果が生まれることを紹介しています。

手帳の使い方の例や、習慣の作り方なども書かれていますので、すぐにでも真似できると思います。どんなタイプの手帳を使うのがおすすめなのかということも、用途に合わせて紹介していますので、新しい手帳を選ぶときの参考にもなります。

年始に手帳を買ったはいいけどそれっきり使っていないとか、どうやって使うのがいいのかわからず怖くて書き込んでいないという人もいるのではないでしょうか。

手帳のイラスト

スケジュールの中にちょっとかわいいイラストが書かれていると、おしゃれに感じますよね。あれをやりたいと思ったことはあるのですが、絵心が足りず出来た試しがありません。なんかぐちゃぐちゃってなりますし、書き込むスペースも亡くなってしまいます。

著者のオススメとしては簡単な顔のパターンを覚えて、それを使いまわすそうです。目と口が5種類ずつ、眉が4種類を使いこなすことで、さまざまな表情が表現できるため書き込むハードルもぐっと下がります。5×5×4で100通りの顔が使えます、そう考えると便利そうです。

他にもシールを使ったりするアドバイスもありました。手帳を楽しく使えるようになるアドバイスがたくさん書かれています。

一日の振り返りを書く

日記を書いたこともあるのですが、やはり続きませんでした。みんなやったことあるのではないでしょうか。私は三日坊主の文字通り3日でやらなくなったことがあります。最初はやる気が溢れているのですが、やってみるとめんどくさくなりますよね。続けられる人はすごいと思います。

そこで著者は「4行日記」をおすすめしています。書きたいだけ書くのではなく、4行に絞って書く日記です。それぞれの行には意味があり、「事実」「気づき」「教訓」「宣言」の行になっており、その日あったことをそれらに当てはめて記録するそうです。 4行ならなんだか続けられるような気がしますし、しっかり改善したいことややりたいことなど未来のことも書かれているので成長できそうです。

2時間あったらしたいことリスト

将来の目標などを書いておくことで、常にそれを意識できるようになり達成に近づくことができる、というような話もありますが、なかなか見かえることが出来なかったりします。

著者ももちろん夢や目標を書くことをおすすめしていますが、それに加えて「2時間合ったらしたいことリスト」というものをおすすめしてます。その名前の通りで、ちょっとした空き時間があればやりたいことを書いておいて、実際に空き時間が出来たときにそれを見て取り組むものです。

意外と「あれいつかやろう」とおもったことは忘れてしまいがちです。気づくとスマホ見たりしていないでしょうか。小さなスキマ時間を無駄にしないために、常にやりたいことタスクリストを作って持ち歩くことで時間を有効に活用できます。

おわりに

手帳を有効に活用する参考になる本でした。実際の手帳の写真もふんだんに掲載されていますので、まねして書くと自分の手帳もおしゃれで使いやすくなると思います。

手帳はとても便利なので積極的に使いたいです。スマホでも十分に事足りるという人もいると思いますが、手書きの手帳ならではの良さやできることがあります。久しぶりに手帳を使って色々書き込もうかなと思いました。とりあえず手帳とペンを常に持ち歩くように心がけることから初めます。

装丁って面白そう『絵と言葉の一研究』

Thu, 25 Apr 2019 00:00:00 GMT

寄藤文平さんのデザインが好きな方には必見の本です。

これまでの創作活動のまとめや振り返りを行っており、仕事を始めるに至った経緯であったり、仕事の中で意識していることなどを垣間見ることが出来ます。まえがきでは「デザイナーをやめたい」みたいなことが書かれているので、驚きもあるかもしれませんが、この本書いているうちにちょうどいい休憩となり、デザイナーやめたいという気持ちもなくなったそうです。わかりやすいことの意味なども考えているので、デザイナーの方などにはとても参考になると思います。

自分の創作の中で見つけ出した、本の装丁パターンみたいなものを紹介している部分もあり、真似するだけでもいろいろなものが作れるようになりそうです。内容から装丁を考えたり、あえて関係ないとことからひねり出したり、記憶やイメージから作ったりと、創作活動のプロセスが詰まっており参考になりました。私は装丁はしたことありませんが興味を持ちました。お気に入りの本にオリジナルの装丁をして本棚に並べるとかしたら面白そうです。

データとインフォメーション

インフォグラフィックを使ってデータを紹介する仕事において、情報を「データ」と「インフォメーション」に分けているそうです。データはただの事実、インフォメーションは意味を持ったデータです。実際に目の前に存在する「空」がデータで、それを見て言った「悲しげな空だなあ」という言葉がインフォメーション。ということだそうです。

初めてインフォグラフィックを用いたグラフのデザインを作成した際の、いくつかの案なども書いてあるので参考になる部分でした。

本と装丁

仕事で行っている装丁の考え方を紹介しています。過去の仕事をただ紹介するのではなく、新しい本に対して自分用に装丁を行いながら紹介しています。「千利休無言の前衛」という本を題材に選んでいます。

たくさんの装丁パターンを実際に作成しており、その数は31個。どれも実際の本として作ったものの写真が載っており、それらしくなっていておもしろいです。本屋さんにおいてあったらつい手にとってしまいそうです。

パターンとしてはさまざまで、どれもそれっぽくなっているのでやっぱりすごいです。シンプルで目を引きますし、読んだことない本なのですが面白そうに感じます。

タイトルから考える
茶の世界から考える
内容から考える
なんとなく
前衛を形に
自分ではやらなさそう
装丁が内容に影響しない
初めての装丁
など

ブックレビュー

後半には本の紹介が載っています。7冊紹介されていますが、ジャンルもバラバラで面白そうな本ばかりです。エンジニアには有名なオープンソースに関しての本「伽藍とバザール」なんかも紹介されており、色んな本に興味を持たれているようです。ここで紹介されていた本を私も読んでみたいです。

おわりに

本を通してデザインや言葉、絵に関する考え方など、寄藤文平さんの頭の中が少し垣間見えるように感じます。「わかりやすく伝える」ことがどういうことなのか、深く考えられておりとても関心する内容でした。わかりやすいことの意味や価値について、言葉にして紹介されているのですっと理解出来たように思います。

久しぶりに読みたくなったので、他の寄藤文平さんの本も読もうと思います。自分用の装丁って面白そうでした。連休にちょっとやってみようかなと思いました。

ミルクのための本『ミルク世紀』

Thu, 25 Apr 2019 00:00:00 GMT

ミルクによるミルクのためのミルクの本。

牛乳に関する基礎知識や、知られざる効果、おすすめの牛乳料理のレシピなど、ミルクに関する情報がまとめられています。寄藤文平さんの可愛らしいイラストや、製造フローを図にした情報などで、とてもわかり易く書かれています。子どもにもおすすめですが大人が読んでも癒やされますし、役に立つレシピなんかも豊富ですので、実用書としても活躍できます。

本自体は小さい本ですのですぐ読めると思います。絵もたくさん使われていますので絵本のようなイメージで読むこともできます。牛乳が嫌いな子どもとかに読んでもらうといいかもしれないです。

ミルクの基礎知識

普段飲んでいるミルクはどうやって作られているのか。どんな栄養があるのかと言ったことを紹介しています。牛乳が白い理由や牛乳に含まれる栄養のことなど、本当に基礎的なことが改めて理解できます。

何気なく飲んでいる牛乳ですが、意外と知らないことが多いです。牛乳に限ったことではないのですが、こうして成り立ちや製造工程などを調べるとおもしろいことがたくさんありますね。

牛乳いじり

いちごミルクやカフェオレなど牛乳に何かを混ぜることで美味しくなるという事実を元に、さまざまな組み合わせを試そうという取り組みの紹介です。いくつも牛乳を使ったドリンクのレシピが紹介されますが、中にはハズレのものもあります。面白そうなので私もやってみたいですが、中には勇気のいるものもありました。ドリンクバーでやってしまう、あの感じに似ているんだと思います。

ミルクレシピ

今度は料理のレシピです。こっちは結構真面目な内容で、ちゃんと美味しいものを紹介しています。しかも、栄養面などを考慮しており、「こんな体調のときにおすすめ！」という紹介がされているのでわかりやすいです。牛乳の使いみちに困ったときとかにもおすすめです。

牛乳を飲むと気持ちがホッとする。そんな効果を再確認できるようなコーナーになっています。

おわりに

牛乳は栄養満点、美味しいですし私もよく飲みます。この本ではそんな牛乳の基礎知識を紹介しているので、更に牛乳に詳しくなれました。牛乳飲もうかなと思いますし、きっと牧場にいって牛さんに会いたいなとも感じると思います。

インフォグラフィックを使うことで、牛乳に関する情報や知識が面白く、わかりやすくなっているので、読書が苦手な方でも読めると思おいます。

牛乳いじりのところの失敗レシピもおもしろいので読んでほしいです。積極的に挑戦して美味しいものも美味しくないものも紹介しており、おもしろい取り組みだと思います。多分本当に美味しくなかったんだと想像できるようなレシピが満載です。

光と構図についての学び『写真構図の教科書』

Wed, 24 Apr 2019 00:00:00 GMT

写真に関する本です。ふらっと立ち寄った図書館で借りました。

カメラを使った写真の撮り方についての本で、「光」と「構図」に関するテクニックが載っています。知識的な面の情報が多く、実践するには時間と経験が必要そうです。しかし、これらの基礎知識をわかった上でカメラをもつことで、日常的にも光や構図を意識できるようになりそうでした。

写真を見るときにも光の向きや構図を意識できるようになるので、撮影者の意図などを汲み取ることができるようになるかもしれません。

今まではなんとなくで撮影していたり、とりあえず忘れないように写真撮ったりしていましたが、ちゃんとした写真も撮ってみたいなと思いました。

スマホでは難しいようです。今時のスマホカメラは解像度も高いので綺麗な写真は撮れるのですが、光の入り方やピント感、雰囲気などが意図したものと違うんですよね。特に色でしょうか。メモとか忘れないためにとかは便利ですし、ネットにアップするのも便利ですが、なんか違う気がします。大したものは持っていないのですが、デジカメをちゃんと持ち歩こうと思い始めました。

いくつか参考になった基礎知識をメモしておきます。次カメラを持って出かける際には意識してみようと思います。

光の基礎知識

光の向き

順光で撮れば色や形がくっきりします。全体に強い光が均等に当たるので、すべての色や形がくっきりする様子です。順光は逆光の逆、太陽がカメラの後ろにある状態ですね。逆の逆っていうとややこしいですが、正直逆光以外知らないですからね。

光が横から当たっていると影ができるため立体的に見せることが出来ます。奥行き感や動きなども表現することが出来ます。ホワイトバランスを設定して光の色の調整を行います。外での撮影であれば「太陽光」とか「晴天」が基本だそうです。オートにすると勝手に補正されるのでおすすめしないそうです。

ドラマチックな写真を取る場合逆光が効果的です。彩度が低くなりモノトーンぽくなります。被写体もシルエットのようになります。影が手前に向かって伸びることもあり、おもしろいシーンになります。

天気の光

晴れの日はコントラストや彩度が高くなります。光と影の明暗差も大きくなるので、くっきりメリハリのある写真になるはずです。

逆に曇りの日はコントラストと彩度が低くなるため、やわらかい印象の写真がとれます。写真が暗いと濁った感じになるので、明るめの露出補正をするとか、薄曇りくらいを狙って写真を取るようにしましょう。

雨の日はしっとり撮れます。雨に濡れた地面が立体的に見えたり、奥行きが生まれたりします。雨が上がった直後くらいが狙いめだそうです。雨に濡れた景色は色彩が豊かになるので、コントラストが少し高くなるそうです。

日陰で撮ると晴れの光とは異なり、コントラストが控えめになります。光の当たるところと影の部分の差が少ないためです。滑らかな印象の写真になります。

構図の基礎知識

被写体を中心にする日の丸構図。背景がシンプルな時は主役が明確になって良いそうです。

画面の中心のラインを意識する二分割構図。三分割構図より、画面全体に目を向ける効果があります。主題と副題に分けるイメージで画面を二分割します。対比効果が生まれるので、色や明暗などもうまく対比するような構図を目指せると良いようです。

そして三分割構図。印象的な方を2にして、副題を1にします。ちょうど線の交点の部分に主役を設置すると印象が良くなります。バランスの良い構図になるので迷ったらこれが良さそうです。

三角構図。三角形のラインを意識して写真に収めます。V字ですかね、これがカメラのレンズの性能にもよると思いますが、できるとかっこいいと思います。広角レンズなんかを使わないと、なかなか出来ないのかなと感じました。

大きな斜めのラインを意識することで斜線構図となります。対角線を意識してラインを設置することで安定感や奥行きがでます。二分割構図にもつながることになりますね。

おわりに

実際に写真を撮ってみないと身につかないと思います。これからあったかい季節にもなりますので積極的にやってみようと思います。お手本としてたくさんの写真が掲載されていましたので、その写真を真似て撮るのもいいかなと思いました。

どんな光や構図で、どんな印象の写真になるのかといった知識は理解出来たかなと思います。でも、いい写真が撮れるかどうかはまた別のようです。がんばります。

『ITエンジニアの英語術最強の教科書』を読んで英語のコツを学んだ

Tue, 23 Apr 2019 00:00:00 GMT

これから世界で活躍するエンジニアに必要な英語についての学習記録です。

ここではプログラミングで使う英語ではなく、外国人とのコミュニケーションに用いる英語がテーマです。プログラミングの関数や変数の命名について悩んでいる方には全く参考になりませんので、別の記事を読んでください。

書籍の紹介

『ITエンジニアエンジニアの英語術最強の教科書』という本を参考にしました。アメリカのマイクロソフトのPMの方が書いた本です。

正しさよりもスピードが命であり、チャットを始めとするスピーディーなやり取りこそITエンジニアの英語の肝であるそうです。

本もチャットでのやり取りを通して伝え方や訪ね方を学びます。実際の会話では直接役には立たないかもしれませんが、外国の方とチャットで意志の疎通ができれば、エンジニアとして働く上では最初の一歩として十分なようです。無理して会話できる状態を目指さずに、まずはチャットでやり取りができるようになるところから始めるのが良さそうです。

以下本を読んで学んだことを記録しておきます。

5秒チャットで会話力も上昇する

結論、英語力がつくと短い文章で的確に伝えることができるようになります。ですので、短い文章で伝えるチャットをマスターすることで会話力も同じくマスターされるということですね。そうなのかな？とも思いますが、なんにしろエンジニア的には会話よりもまずはチャットの方が使う機会多いかもしれません。sluckとかchatworkとかでしょうか。私は経験がありませんが、外国人の同僚とかがいるようなグローバルな会社になると普通なのかもしれません。

英語は短くする

「I have a question」で始めます。may I ask you？みたいな丁寧さは不要です。最初に要件を簡潔に伝えましょう。

日本語でいうならば、「先日の〇〇の□□の件について質問が〜」ではなく、「質問があります！」と最初に言い切るんですね。実際ITエンジニアのチャット会話は質問とその回答が多いそうで、この基本を覚えておくとスピーディに進められるので良さそうです。

英語は分割する

言いたいことは一度に一つにします。

「Can you send me your PowerPoint file?」
「You took notes」
「I want to look at the feedback」
のように一文ずつに分けます。まとめて一文にも出来ますが、難しくなってしまうので、積極的に分割したほうがいいです。これについては日本語も同じですね。一度に運びすぎないことは常に気をつけるべきかと思います。

この方がよりチャットぽいですが、実際の会話もなんだかんだこんな感じだそうです。テンポも良いですし、話すように書くことが出来ます。

英語は言い換える

簡単な英語で言えるように言い換えることが大切です。英語での表現や単語がわからない場面は多く、そんなときは言える言葉に言い換えて少しでも伝えられるようにしましょう。

主語と目的語を入れ変えたり、名詞を「溶かす」、それでどうなるか？を考えるなどのコツがあります。

「The data won’t fit in one row」このデータは一行に収まらない
「One row can’t keep the data」
のように言い換えることが出来ます。ちょうどいい動詞が思いつかない場合などは、こうして入れ替えることで簡単な単語を使って表現できる可能性があります。

英語は質問する

ITエンジニアの英語の会話力は質問力が7割だそうです。最初のうちは周りの会話についていけず防戦一方ですが、質問で積極的に切り込んでいくことで自分の意見を主張するチャンスになります。

ここで5W1Hが役に立ちます。基本のパターンとして、これを使いこなして細かい部分を修正すれば大概の場合は対応できそうです。

言っていることがわからない「What」
理由を聞く場合は「Why」
人を聞くなら「Who」
場所を尋ねるときは「Where」
幅広く使われる「How」
どれなのかを聞くための「Which」

英語は短縮する

さまざまな短縮語があるようです。ITエンジニアエンジニア業界でも特有のものが多いらしく、中には海外のオープンソースのドキュメントなんかで目にするものもあります。ほとんど知らないものばかりでした。いざというときにかっこ悪い思いをしないように、ぜひ覚えておきたいです。

単語や文章を短くしたもの

prod 「Production」本番環境
repro 「reproduce」再現する
dupe 「Duplicate」重複
admin 「administrator」管理者
app 「application」
doc 「document」
FAQ 「Frequently asked question」よくある質問
EOD 「End of day」今日中に
EOL 「End of life」保証期間の終わりやプロセスの終わりまで
ETA 「Estimated time of arrival」作業の完了見込み時間、いつまでにできる？
FTE 「Full-time employees」正規社員
POR 「plan of record」コミットした計画
SME 「subject matter expert」その分野の専門家
TBD 「To be determined」これから決めるもの、未定

チャットでつかわれるもの

yt? 「Are you there？」今いる？
? 「I hove a question」
qq? 「I hove a quick question」
k 「OK」
ic 「I see」わかりました
oic 「Oh,I see」
yep カジュアルなyes
thx 「Thanks」
np 「No problem」大丈夫
u2 「You,too」あなたもね
jk 「just kidding」冗談です
lol 「laugh out loud」それはおもしろい

頻出フレーズの短縮

AFAIK 「As far as I know」私が知る限りでは
AFAIC 「As far as I’m concerned」私に言わせてみれば
ASAIAA 「As far as I’m aware」承知している限りでは
AKA 「Also known as 〜」〜としても知られる
ASAP 「As soon as possible」できるだけ早く
NTIKO 「Not that I know of」私は知りませんが
FWIW 「For what it’s worth」参考までに
IIRC 「If I remember correctly」もし正しく記憶していれば
IMO 「In my opinion」私の考えでは

おわりに

英語で話すのは最初はやっぱり難しいと感じるのが普通だそうです。話したいことを話すのではなく、話せることを探すという発想を持つことで、最低限のコミュニケーションを取ることが出来ます。知らない単語や表現があるから諦めるのではなく、知っている単語や表現でなんとか伝えられないかということですね。多面的な捉え方をしておりとても興味を持ちました。

日本語で伝えるための文章の基礎と似ている部分もありました。英語での表現を一から学び直すことで、伝わりやすい日本語も書けるようになるように感じています。これからITエンジニアも英語が必要な機会はどんどん増えてくるのではないかと思います。海外での仕事や外国人と一緒のプロジェクトなど出てくるのではないでしょうか。

そんなときに一歩先にいけるような英語力を身に着けておければ、活躍間違いないと思います。

あえて乱読に挑む『乱読のセレンディピティ』

Mon, 22 Apr 2019 00:00:00 GMT

本を読む際のアドアバイスで、「風のように乱読する良い」という話です。

ゆっくりでは逆に読み落としてしまうこともあるので、風のように早く読んだほうが意外と得られるものが多いかもしれないとのことです。積極的に乱読することで、ゆっくり読んでいては気づけなかったことや、さまざまな出会いに気づけるかもしれません。

私はゆっくり読んだほうが良いと思うのですが、結局どうしたらいいんでしょうね。個人の好みで選べばいいのでしょうが気になります。何か研究とかありそうなので一度調べてみようかなと思います。

乱読ということ以外にも本を読む際のコツやアドバイスが載っているので、そのあたりは誰しもにとって参考になると思います。

おもしろい読書法

人の意見に頼らず、自分の判断で本を選んで、自分の金で購入する。そんな本が一番良いそうです。誰が書いたかわからない書評などを参考にしないで、自分で気になった本を買いましょう。本を選ぶところからすでに読書は始まっているとも言えます。

読み終えられなくてもいいので、どんどん読む。嫌な本だと思ったら、読んでも得られることは少ないので放り出してしまいましょう。乱読と言うとおり、闇雲に手当たりしだい読んでみるのが著者もおもしろいそうです。

アルファー読みとベーター読み

内容について予め知識がある場合を「アルファー読み」、意味がわからない文章を読む場合「ベーター読み」と名付けています。

アルファー読みは基本的な読み方であり、その分機会も多いです。しかし、ベーター読みができるようにならなければいけません。このベーター読みを教えることは難しいらしいです。例えば漢文など、意味のわからない文章を調べながら読んだりするのは、わかりやすいベーター読みの練習だそうです。

乱読を行うにはベーター読みが得意である必要があります。哲学書などもベーター読みの練習が必要です。ベーター読みができるようになれば、科学も宗教も哲学も面白く読むことが出来ます。同じジャンルの本ばかり読んでいる人はベーターよみにも挑戦したほうがいいかもしれません。

新聞や雑誌なども、いろいろなジャンルのいろいろな知識が詰まっています。ですのでベーターよみの練習になります。見出しをみて面白そうなk時を探し読み進んでいくことは乱読と言えるでしょう。

知的メタボリックシンドローム

忘れることは悪いことだと思い込み、知識を蓄えていくと知的メタボリックシンドロームのような状態になってしまいます。古い知識や一面的な知識に固執してしまい、柔軟な発想や学問を横断した発想ができなくなってしまいます。

自然に忘れていくことは大切なことであり、頭の働きを支える重要な仕組みです。忘れてはいけないと学校では教育を受けてきましたが、いらないものは整理して吐き出していくべきで、食事何かと同じであると捉えることが出来ます。

ストレスなるようなことも忘却することでスッキリすることもあります。忘却には悪い面ばかりでなく、良い面もあるのだと前向きに捉えて、柔軟な頭による積極的な乱読を目指しましょう。

おわりに

読書法のすすめとして乱読を提案されました。風のように軽やかに知識の無い新しい本を読んでいく、ということが乱読のようです。

面白くない本はさっさと諦めるとか、知識のある本ではなく知識の無い本を選ぶとか、たしかになと思うような読書法がたくさんありました。

タイトルにあるように、セレンディピティという偶然の出会いをするために乱読という読み方はとても良いなと思います。

読書の時間を用するのが大変という気持ちもありますが、「ちょっとしか無い時間で乱読する」という発想の転換によって、前向きに読書ができそうな気もします。

この本自体もさくっと読めるので乱読に良いです。

【実践技術書】Amazon Web Service 業務システム設計・移行ガイド

Fri, 19 Apr 2019 00:00:00 GMT

今度は業務システムをオンプレミスからAWSへ移行する際の、設計・構築・管理についてのノウハウ本です。かなり詳細に書かれており、AWSに移行するに当たって必要な設計のことなども身につきます。オンプレミスから移行する予定のシステムはまだまだ世の中にあると思いますので、有用な知識が得られます。

AWSの基本的な概念や使い方も書かれていて親切な本です。システムをオンプレミスからクラウドへ移行するプロジェクトの前知識として読んでおくといいです。ネットワークやシステムの知識が多数出てくるので、ある程度開発・運用の経験が無いと難しい本かと思います。

業務システムの移行をテーマにしているため、なかなか個人で体験することは無いかもしれません。プロジェクトなどの実践でやりながら憶えるのが一番いいと思いますが、イメージだけでもちゃんと作れておくと良いです。設計・開発のフローや運用での要点などもわかりますので、幅広い知識が身につきます。本自体はかなり大きく分厚いですが、その分知識も豊富に詰まっています。

AWSサービスの概要

AWSとオンプレミスの違いといったところから、料金体系、代表的なサービスの概要などの説明です。広い範囲をカバーしていますので、ここをちゃんと読んでおけばAWSについて必要な基礎知識は十分身につくと思います。

全体設計

AWSサービスのでの管理の方針と、移行に当たっての作業計画を行います。システムの構築に関するものと言うより、移行に関する実作業についてであったり、AWSで運用するに当たって変更が必要な各所への対応方法などを設定します。

移行計画のよくあるフォーマットも紹介されているので、実務的にもすぐに役に立つと思います。これを参考に移行計画の草案としていけば効率よく進められそうです。

アカウント管理と権限付与

AWSでのアカウント周りは結構ややこしいのでしっかり理解しておきましょう。大規模で権限・役割が多くなるほどややこしくなりますので、少しづつ範囲を広げて理解していくのがいいです。

アカウント管理のベストプラクティスが紹介されています。大変参考になる情報でした。セキュリティ的な問題もあるので、この部分はしっかり検討する必要があります。各所とのすり合わせ等大変になることが予測されますが、入念に取り組みましょう。権限を管理する際のコツなども載っており、AWSについてに限らず役に立ちそうな知識でした。

ネットワーク接続の設計・構築・維持管理

ルーティングやロードバランサなどの設計についての章です。オンプレミスでやっていたハード的な設定とは似ているようで結構異なるので、最初は混乱すると思います。ある程度のネットワーク知識があればすぐ理解できるのですが、それでも最初は試行錯誤になると思います。仕方ないです。

問題を調査・発見・解決するコツやパターンもある程度カバーされていますので、そういった知識を参考にして実装していくのがおすすめです。

システム設計とサービスの導入

いよいよサービスを利用したシステムの実装に入ります。DBの利用やキャッシュの利用など、AWSを使う上で切り離せない機能を利用していきます。もともとAWSについてを利用することになった目的があるはずなので、その部分について入念に確認しておきましょう。できるのであれば他の便利な機能も利用してみたいところですが、まずは優先度の高いものから着実にすすめていくようにしましょう。

システム実装の構成パターンを紹介していますので、自分のプロジェクトで当てはまるか探しておきましょう。他のパターンも参考までに読んでおくと役に立つことがあると思います。

移行テクニック

データの移行に関する知識です。どれくらいの時間がかかるかなどの算出方法や、手順・方法が載っています。方法についてはいくつかのパターンが用意されていますので、予めどれでいくか検証しておけると良いです。

運用監視の設計・実施

システム監視の方法やコツの紹介です。CloudWatchを利用した方法を紹介しており、システム運用では間違いなく必要だと思います。AWSのサポートの説明や知識なども書いてあるため、いざというときのお問い合わせにも役に立つと思います。

おわりに

システム移行の設計に関するものなので、機能の開発やプログラム等の内容は薄めです。ネットワークの設定やサーバの立ち上げ、管理方法など運用面での知識を多く身につけることができる本でした。

システムのAWSへの移行はなかなか一筋縄ではいかないので、しっかり時間を取って検証やリハーサルを行うようにしましょう。さらに移行がうまく行った後も、問題が隠れて発生していないかしっかり監視できるような体制・準備をしておきましょう。思わぬところでうまくシステムが動いていなくて、後から問題が大きくなってしまうことが多いです。

システムの運用では何でもそうだと思いますが、念入りな準備と移行後のサポートを心がけ、落ち着いて対応するようにすることが大切です。

【実践技術書】Amazon Web Services パターン別構築・運用ガイド

Thu, 18 Apr 2019 00:00:00 GMT

AWSの基礎知識とAWSを利用したWEBサービスの構築例・手順をまとめた本です。

大きく分厚い本ですが、親切にわかりやすく書かれています。基本的な概念の説明や料金体系のこと、よくある構成のサンプルなど、この本があればAWSをの基本的な使い方は理解できると思います。もちろん各サービスごとに必要な要件は異なるので、全く同じ手順で何でもできるわけではありません。しかし、この本の内容を理解しておけば、AWSのよく使われる機能はカバーできている印象があります。

作業の手順ではスクリーンショット付きで説明があるので迷わずに作業できると思います。基礎的なところから書かていますので、AWS初心者でも理解し使いこなせると思います。ただ、内容がぎっしり詰まっているので、一度に全部マスターするのは難しいです。必要なところに絞って順番に覚えていくか、概要だけ掴んで進めていくかしたほうがよいです。450ページ位あります。

AWSの基本

クラウドとは何か、オンプレミスとはといったところから始まり、AWSで利用できる各サービスの説明に至ります。サービスの全体像を解説した後は以下のサービスについて、細かい説明が書かれています。利用を検討している、何に使うものなのか知りたい場合はここから読んでおくと良いです。

EC2
EBS
S3
RDS
Elastic Beanstalk
Elastic Cache
SES
SQS
SNS
Cloud Watch
VPC
Route 53

AWSを利用する

アカウントの作り方から、実際の管理画面での操作方法まで丁寧に解説しています。最初はかなりややこしいので、しっかり理解しておくと良いです。結構アカウント周りの設定で混乱することや、うまくいかないことは多い印象です。SDKやCLIの使いかたやインストール方法も書かれています。利用する必要があれば目を通しておきましょう。

EC2やELBの起動の仕方や、秘密鍵の作り方なの手順もあります。AWS利用する上で間違いなく必要になると思いますので、覚えておきましょう。

パターン別構築例

WordPressを利用した動的サイトの立ち上げ・S3上に静的サイトの立ち上げなど、いくつかのパターンを実際に起動させて配信します。 DNSの設定やCDNの利用、Auto Scalingの設定方法など実際に利用できる応用的な部分についても取り上げられていますので、大いに参考になると思います。

バッチサーバとしての利用、メールサーバの起動などちょっとした用途で使う場合のパターンもあり、かゆいところに手が届くような印象です。このようなオプション的な用途でもAWSはよく使われるので、できるようになっておくと心強いです。

AWSのセキュリティ

IAMの設定方法など、セキュリティ関連の知識です。暗号化であったり、脆弱性の診断方法なども紹介されています。 AWS上でよくある外部攻撃の例や知識も載っており、運用でも多いに役に立つ知識です。オンプレミスでも十分に参考になります。

管理と運用

システム監視の項目です。運用、ログ、アラートなど、実務的な運用で必要な監視の設定方法が理解できると思います。ここについては実務で学んだほうがいいと思います。システムの規模や可用性などさまざまな要件によって左右される仕様です。少なくとも概念だけは理解しておくようにしましょう。

データのバックアップなどの方法もあります。システム運用の知識や基礎的な概念は流石にこの本だけでは足りないですので、他の本も参考にしましょう。

おわりに

かなり分厚く内容も満載ですが、読み終わるといろんなことができるようになっています。WEBシステムをAWSで動かす際に必要な基本的なものはすべてこの本で取り上げられていますので、基本的には困ることはないと思います。

もちろんバージョンアップなどが行われて、管理画面が変わったりすることはあると思いますが、基礎的な意味や仕組みの部分も学べているので、すぐに対応できると思います。色違いの似た本もあるのでそちらも読んでみようと思います。 AWSは大きいシステムから小さいシステムまで利用できますが、設定とか機能が多すぎてややこしく捉えがちです。このような本でまとまった知識を得ることで、足がかりとして使い始めていくことが出来ます。実装や運用の段階では、また未経験の問題と出会うことがあると思います。実際にAWSはを使用して体験することが一番早い勉強です。

紙の本から感じるインタラクティブ体験『指を置く』

Thu, 18 Apr 2019 00:00:00 GMT

平面のグラフィックに読者が「指を置く」ことで、解釈が変わることを表現した本です。立体的に見えたり、生き物がいるように見えるなど、平面でしかない本のページにいろんな効果を与えてくれます。平面という制約がある中で読者の指を関与させることで、多様な表現を実現できるという感じでしょうか。実際には動いていないはずなのですが、錯覚でインタラクティブな反応があるように感じてしまいました。

大きい本ですが、内容はグラフィックが主です。文字は少ないのでさくっと見ることが出来ますが、「指を置く」ことを書くページで行うので、ちょっと時間がかかるかもしれません。どうしてこう見えるのであろうとか、指を置く前と後での違いなど不思議に思うところが満載です。

各作品の説明や解説も載っていますので、解釈に迷っても大丈夫です。むしろ、説明とは異なる解釈を思いつくかもしれません。そうしたものも大切だと思います。

2次元の紙のグラフィックにもかかわらず、いろいろな見え方や解釈を表現できることはとても面白いと感じました。広告とかLPとかに応用できるのかもしれません。スマホ等のタッチ操作のインタラクティブ表現の参考にも良いと思います。そういう意味ではUI/UXの良い参考にもなりそうです。

指の存在

グラフィックに対して指を置くことによる解釈の変化を通して、「人間にとっての指の存在や関係」といったものを解明していく試みだそうです。すなわち「私達にとって指とは何か」を解明するということです。

なんだか難しそうですが、あまり深く考えずにとりあえず指をおいて見てみると良いです。いくつか進めていくうちにどうしてだろうか？とかなんでこう見えるようになったのだろう？とか疑問が湧いてきます。そうなったときに「指とは何か」ということについて、ゆっくり考えてみるといいです。

空間を読み解く指

例えば、指を置くことでグラフィック内の空間を理解することが出来ます。どこが奥に合って、どこが手前にあるのかといったことであったり、指によって引っ張られている状態であることがわかったりします。

指を置く前、置いた後、離した後では解釈が異なり不思議な感覚でした。指によって動いたり支えられたりしている様に見えるので、グラフィックの意味も大きく変わります。

実際にグラフィックに指をおいてみるとさまざまな印象があります。何かに見られている気がしてそわそわしたり、動かないように力を入れてしまったり、触った感触がイメージされたりします。指をおいただけで解釈が変わってしまうこと、自分が力を加えたような気分になってしまうことは印象深く、おもしろいと思いました。

自分ごとになる

指を置くことは、すなわち「自分ごととして扱う」ということだそうです。指を置くことで自分がその絵に影響を与えたかのような印象をもち、他人事であったものが自分ごとになってしまうそうです。自分が影響を与えた様に見えるため原因が自分にあると思い、絵への印象が変わってくるそうです。たしかにそんな印象を受けました。インタラクティブなUIはこういった感覚を利用しているんですね。あらためて学ぶととても勉強になります。

指を置くまではただの絵だと感じていますが、指をおいた途端に自分の指が影響したような、絵の世界の中に作用したような感覚になります。もしくは「これは指がこういう力を与えたからこの形に変化したんだろう」とかとんでもない理論を頭の中で想像してしまいます。そんなはずがないのですが、実際に目でその状況を見ているのでありえないことを、すんなり受け入れてしまう様になっっているそうです。

おわりに

指を置くことで、感触があるような、反作用を受けているような、そこに生き物がいるような感覚を味わうことが出来ます。指を置くと想像力が働き、ありもしないことや起きるはずのないことが起こしているような感覚になりました。インタラクティブな表現の勉強や参考にとても良い本でした。

グラフィック作品集なのですが、指を置くことによる解釈への影響を意識して認知できる本でした。スマホの操作などで指を使った操作は当たり前になっており、タップに対するインタラクティブな表現も多様になっています。UIに関わる重要なものですので、どんな印象を与えるのか、違和感の原因は何なのかといったことを考えれるようになると役に立ちそうです。

とてもわかりやすく、想像力を働かせるようなグラフィックが多かったので、子どもに読ませてみてもおもしろいと思います。経験が少ない子どもだと、大人とはまた異なる解釈をするのではないかと思います。多分スマホの操作でも、そういった解釈の差が生まれているかもしれないですね。

【おすすめ読書】百年の愚行

Wed, 17 Apr 2019 00:00:00 GMT

20世紀に人間によってもたらされた、世界中の悲惨な現象の写真集です。この百年の間に行われた、人間に活動による愚行としか呼ぶことが出来ない現実を振り返ることが出来ます。

100枚くらいの写真が乗っていますが、気分の悪くなるようなものもあります。読むのに勇気がいるかもしれませんが、どれも世界で起きている事実であり、今も解決されていないものもあります。絶句してしまうような写真がたくさん載っており、こんなことが起きているのかこんなひどい状態になるのかということが身にしみます。

昔のことだったり遠い外国のことではありますが、人間という種が引き起こした変化であることは間違いありません。もちろん日本の写真も含まれており、学校で習った知識もいくつか出てきます。ちょうど時代の転換期である今、一度振り返って見るのもいいのではないかと思います。

10個のジャンルに分けて紹介

水・大気・大地・動物・大量生産・核・戦争・差別・難民・貧困という10個のジャンルにわけられています。厳密には関わり合うものがあるので、複数のジャンルに所属するものが多いです。

最初の方は土地や自然が多く、中盤からは家畜やゴミ、最後は人間の写真が多くなります。最後の方に近づくに連れて、よりショッキングな写真が多くなる印象です。

それぞれの写真には、いつ・どこで取られた写真なのかという情報がついています。中には詳細な説明が加えられているものもあり、この本だけで世界で起きたいろんな事件のことをざっくり知ることができると思います。コラムやエッセイも載っており、少しですが文章もあります。ですが基本的には写真がメインです。大きい本ですが、早く読もうと思えばすぐに読めます。ですが、できれば写真をゆっくり眺めながらページを進めてほしい本です。

写真はわかり易く衝撃も大きいです。ページいっぱいに印刷された凄惨な写真は、語ることも多く信じられないような場面もたびたびあります。ですがどれも事実であり、この百年間で起きたことです。しかも原因は人間が引き起こしたものばかりです。ニュースは比較的見ている方ですが、知らない写真や覚えていない事件や事故の写真も多くあり、驚きました。

おわりに

世界中の問題をニュースなんかで取り上げますが、流れていってしまうため気づくと忘れています。こうして本として残っていることによって、いつまでも忘れずに振り返ることができるのかなと思いました。 21世紀が終わったときにもぜひ作って欲しいです。どんな写真が並ぶのでしょうか。

人口がどれだけ増えたとか、数がどれだけ減ったとか、数値ではぱっと理解できない問題もあると思います。人間良くわからないことは考えないように出来ているようなので、他人事にしてしまいがちです。特に心配しなくても生活に支障は無いことは確かです。ですが、何かできることは無いだろうかと一人ひとりが考えてみることも、そんな愚行を防ぐために必要なことなのではないかと思います。

写真によって状況を知ることができ、より当事者意識を持って考せさせられる良い本だと思います。

【おすすめ読書】サイエンスの発想法

Wed, 17 Apr 2019 00:00:00 GMT

京都大学にて行われた、科学と生物学に関する講義の内容を本にまとめたものです。

大学生に向けて行われた内容を文章に起こしたもので、生徒に語りかけるような内容になっており、課題なんかも毎週出されています。

講義を受けるためには選抜があり、「科学をに興味を持ったキッカケになった経験や言葉」を提出するそうです。その際には３つのアドバイスが与えられ、「ユニークなこと」「真実を書く」「客観的に見る」といったことを意識するように求められます。このときからすでに「サイエンス力」のようなものが問われており、この後の講義の中でもそれらを学んでいくことになります。

基本的には科学を学ぶ学生とか、興味のある人が対象になっていると思います。京都大学の人気講義ということもあり、内容はとても面白いです。生物学や科学を身の回りにあるものをメタファーに学んでいきます。ズバリ難しい化学式であったり概念も出てくるので科学的な話が多いですが、それ以外の部分でも大いに役に立つ知識や考え方が得られると思います。

サイエンス力を発揮したアイデアの考え方とか、学生が研究を行う上で必要になる力を身につけることになります。社会人であっても持っていない人のほうが多いと思いますので、読んでみるとおもしろいです。

各章の最後に実際に生徒に対して出題された課題があります。できるのであれば、都度その課題にも取り組んで見るといいと思います。

科学の合間に

遺伝子の構造やタンパク質についてなど科学の授業を進めていくのですが、その合間には研究に役立つサイエンスの発想法が出てきます。これが結構面白く、シャキで活躍するために役に立つものばかりです。

発想の定石、SCAMPER法

アイデアを出すための７つのチェックリスト、物事をこのチェックリストに当てはめながら観察することで、新たなアイデアをひらめくのではないかということです。逆にこの方法を当てはめれば、世の中のさまざまなアイデアを分解することも可能だということです。

Substitute
取り替える
Combine
組み合わせる
Adapt
適用する
Modify、Magnify、Minify
変化・拡大・縮小する
Put to other uses
他に利用する
Eliminate
除く
Reverse、Rearrange
逆にする、順番を変える

ユニークさを生む体験

ユニークなアイデアをつくることは研究者にとって大切なことです。大抵のアイデアはすでに誰かが考えついているものであり、それらを交わしてアイデアを生み出すのはとてもむずかしいものです。

ユニークさを生むのは「体験」が重要らしく、それが個人的なものであればより役に立つそうです。講義では積極的に体験をしようということや、体験を研究やアイデアに活かそうということ、そして五感でしっかりと観察しようといったことを教えてくれます。

アイデアを実行する難しさ

アイデアは思いついても実際に行わなければ意味がありません。ちょっとした発見などに対して、自分もわかっていたとか、やれば出来たとかいう人がいますが、実際にそれを試すことに意味があります。「そんなのありか！」と感じるものこそ、解決への近道だったりします。自分の中で勝手にルールを決めて狭い思考をしてしまわないように、気をつけるように教えています。

アイデアを思いついてそのままにしておくのではなく、実際にやってみよう、やってみたらどうなるのかと言うところまで進めることがサイエンスです。

おわりに

京都のローカルネタもちょっと入っています。知っているとおもしろいです。科学の講義なので難しい話ももちろんありますが、ところどころ面白い話が混じっているので最後まで読み進められるのではないでしょうか。

とても面白そうな講義だなと思います。学生のときにこのような講義が合ったら、科学に興味が持てそうですよね。できるなら高校や中学くらいで受けてみたいでもありますが、さすがに難しいでしょうか。

アイデアを出すときの参考にもなりますので、とてもいい勉強になりました。

書籍PRの仕事感を読む『進む、書籍PR! たくさんの人に読んでほしい本があります』

Wed, 17 Apr 2019 00:00:00 GMT

書籍PRという肩書で仕事をしている奥村知花さんの仕事観についての本です。どんな仕事なのかといったことから、書籍PRの仕事をするまでの経緯、仕事のコツなどが書かれています。書籍を紹介する仕事で活躍するのもすごいですし、そこから本を出版することになるというのもすごいですね。

おすすめ本の紹介ではなく、書籍PRという仕事の紹介です。面白そうな仕事なので興味がわきます。本好きで、本の宣伝てどんな感じなんだろうと思っている人は特におもしろいと思います。実際の仕事での本の選び方なんかもあるので、読書の際の参考になるかもしれません。

どんな仕事にも当てはまるような発見や知識が書かれていますので、「売り込む」ということに関心があるようでしたら参考になると思います。それほど長い文章でもないので、サクっと読めると思います。

本を売り込む仕事

本の存在をメディアに企画として売り込む仕事で、パブリシティと言うそうです。宣伝や広告など、夜に知らしめる活動をまとめてPRとしています。本をどのように説明すれば面白そうに感じてもらえるのか、どんな本に興味を持ってくれそうなのか、誰に伝えればより届くのかといったことを考えて、試行錯誤するようです。

担当する本には基本的に以下の判断があるそうです。

公序良俗に反していないか
今その本が旬なのか
メディア露出の顔となるものがあるか
映像が用意できるか

本に限らず売り込む商品を選択するための良い指針となる気がします。これを守れば必ずうまく行くわけではないでしょうが、がっかりしてしまう結果を減らセルと思います。

他にも仕事でやらかしてしまったミスや、うまくいかないときの考え方など、日頃の仕事の役に立ちそうなポジティブな考え方を知ることも出来ます。失敗談もいくつもあり勉強になります。

作者のFacebookページや、さまざまなメディアでのお仕事もインターネットで調べれば出てきます。興味を持った人は実際の企画についても、参考にしてみるといいと思います。

おわりに

売り込む仕事をやるに当たって、チームや著者、メディアの方などを「巻き込む力」が大切なように感じました。積極的に関わってくれるような取り組みであったり、相手の文化を理解することなどが書かれています。雑談の仕方や話の進め方など、商談や営業などにも役に立ちそうなスキルが詰まっており、学べることが多い本です。

最初はうまくいかなかったというところから始まる本ですので、なんとなく身近に感じられる人も多いのではないでしょうか。失敗にめげずに取り組み、失敗から教訓を得て、どんどん成功に近づいていく過程が書かれています。

これから何かを始めようとか、初めたばかりでうまくいかないことばかり、という人に勇気を与えてくれるような本だと思いました。

ネコパロディ集『名画の中のネコ: ネコ好きに贈るファンタジー』

Mon, 15 Apr 2019 00:00:00 GMT

歴史上のさまざまな名画の人物部分をネコに置き換えたものを描いた作品集です。名画のネコパロディ集といったところでしょうか。猫好きにはとてもおもしろいのでおすすめ本です。

絵画や映画をテーマにしたネコの水彩画を描いている「スーザン・ハーバート」と言う方の作品集です。ネコの絵と元になった作品の名前と作者が書かれており、他には特に文章はありません。有名な絵画がテーマに選ばれていますので、絵画に興味のある人にもおすすめです。元の作品に雰囲気を似せた水彩画で描いているようで、人間の部分を全部ネコに置き換えつつ、雰囲気や細かい描写を再現しています。

知らない絵画もたくさんありました。気になった絵については、インターネットで検索して元になった絵と比べながら読むとおもしろいです。ネコという入り口から、絵画に触れることができるおもしろい本です。絵画に興味を持つきっかけになると思います。

スーザン・ハーバートについて

作者のスーザン・ハーバートはイギリスの水彩画家で、さまざまな絵画や映画・オペラなどを題材にしたネコの作品を描いています。この本はその作品の中でも特に人気のものを集めた書籍のようです。他にも本が出版されているようなので読んでみたいと思います。

絵画だけでなく、映画やオペラなども参考になっており、いろいろな芸術作品を見ていたのだと思います。映画については、だいぶ昔の作品が多く、最近の作品で猫の絵を描いたらどうなっていたんだろうかと思います。

絵画を真似して描くこと

スーザン・ハーバートは絵画を真似して描いていますが、とても上手です。人間の部分をうまくネコに置き換えて、背景となじませながら絵を描いています。ネコも可愛いですし、人間の動きや立ち居振る舞い・表情などををネコの体や顔でうまく表現しています。元の絵の再現もかなりうまいのではないでしょうか。

今にも喋りだしそうかつ動き出しそうなネコの絵は、もちろんパロディなのですが、なんだかオリジナルの作品のような特徴的な絵になっています。

びじゅチューンという番組

話がそれますが、NHKでやっている「びじゅチューン」という番組に個人的にハマっています。年末だったか年始だったかにまとめて放送されていたので、それを録画したものをゆっくり楽しんでいます。

有名な美術作品などからインスピレーションを受けて、オリジナルの歌とアニメーションを作成するという作品です。歌に加えてアニメーションもついており見ていて楽しいです。作詞・作曲・アニメ・歌のすべてを井上涼という方が作品を作っており、独自の世界観があります。
twitterはこちら井上涼

youtubeにNHKのチャンネルがあるので、そこで見ることが出来ます。
youtube NHK びじゅチューンの動画

「なんでこんなふうに見えたんだ」と思うようなの作品が多くついつい笑ってしまいます。着眼点というか捉え方というか目の付け所がクリエィティブでおもしろいです。歌やメロディについても、なんだか心地よい感じがします。これもついつい口ずさんでしまうようなものや、感情を揺さぶられるようなものもあります。

TV版だと作者による解説があり、ためになる情報も多いです。元となった作品の背景や説明と、パロディして作った歌の説明になっています。更にコーラスをつけた編曲版？みたいなものもついており、より音楽としても楽しめるような演出になっています。自由な発想力が刺激されそうなので、学校の美術の時間にびじゅチューンを見るというのもおもしろいと思います。

本の紹介に戻りますが、そんなびじゅチューンでも取り上げられた絵画もネコになっています。ボッティチェリの「ヴィーナスの誕生」やレオナルド・ダ・ヴィンチの「モナリザ」、フェルメールの「真珠の耳飾りの少女」、ミレイの「オフィーリア」、マネの「フォリー・ベルジェールのバー」などもネコになっています。両方みて、原作も見るとおもしろいが倍増します。この人はネコにしてみたけど、こちらの人はくのいちにしてみたのか。こっちはネコだけど、こっちは委員長か。などなどとても自由な発想力・想像力を感じます。同じ絵画をみたはずなのに印象はさまざまで、その表現もまたさまざまです。

複数の人の絵画の受け取り方、そこから作り出されるアートな部分を見比べることができるので、絵画の奥深さ？やそれぞれの感性のようなものを感じることが出来ます。

おわりに

絵画を見るのもおもしろいのですが、正直私には絵画の良し悪しみたいなものはわかりません。

このようなクリエイターによる、自分の印象で作ったアートを見ると、とてもユニークでおもしろいなと思います。子供の頃に持っていた想像力なんかが刺激されているのかもしれません。「絵画よくわからん」という人にも興味をもたせることができるというのはすごい作品だと思います。

美術館に行って、これ好きだなーとかこれは嫌いだなーとかの感想を持つと思いますが、そういったものが大切なのでしょう。自分なりの解釈とか、好みとか。ネコだったらどうなるのだろうかとか、絵画全体がラーメンに見えるとか。そこから何かアウトプットしたいと思うものがあれば、そういったものにこそ意味があるのかもしれません。

【実践技術書】失敗から学ぶ RDBの正しい歩き方

Mon, 15 Apr 2019 00:00:00 GMT

「失敗から学ぶ」というタイトルの通りで、RDBの設計・構築の際のアンチパターンの紹介と解説になっています。

データベースはアプリケーションよりも寿命が長く、長い付き合いになるがゆえの特有の問題も発生します。作者がこれまでに経験してきたアンチパターンを理解することで、設計や構築の際に予め問題を回避できるような心がけが出来ます。

まえがきにも描いてあるのですが、大きく以下の注意事項があります。

データベースの停止はサービス停止を伴うことが多いため、メンテナンスしにくい
データは常に増え続けるため、リファクタリングしにくい
サービスの中核を担うため、変更の影響が大きい

他にも、複数のサービスから参照されることもあるので、サービスが終了してもデータベースだけ残されて運用することもあります。

RDBの問題はある日を境に顕在化することが多く、しかもサービスを停止させるような大きな障害を引き起こします。設計や実装・日々の運用の中で、障害が発生しない・影響の少ない・すぐに検知できるといった、いざといったときの備えをできるようになっておきたいです。

とりあえず削除フラグ

これはシステムで良く見ると思います。会員の削除とか、データの削除とかで作りがちなカラムです。

できるのであれば削除フラグは作らない方が良いです。事実のみを保存することを意識して、物理削除した上で削除済みテーブルに移動する設計が望ましいです。すでにカラムがある場合は必要なデータをViewで定義しておくような対応を検討しましょう。

削除フラグを設計することの問題として以下のことが考えられます。

削除済みデータが増えることでパフォーマンスが低下
削除済みと未削除の2つの状態しか無いのであれば、カーディナリティが低いためインデックスの効果も薄いです。
いろんなテーブルの削除フラグのチェックが必要
ユーザーのみでなく、チームや記事やカテゴリーなど、すべての関連テーブルをJoinして削除フラグをチェックすることになるかもしれません。

意味を含んだID

IDに「先頭の文字が1ならユーザー・9なら管理者」などの意味をもたせることは避けましょう。

テーブルを分けて設計しましょう。データの属性によって入る値が変わるカラムやNULLが入るカラムが発生しないか確認しましょう。複数の目的でテーブルを使いまわさないように気をつけます。

この状態では以下の問題が考えられます。

一見しただけでは本来の状態を読み取れない
アプリ側では判断出来ないため不正なデータが登録されてしまう
1桁のみで表現出来なくなるかもしれないその場合は大掛かりな修正が必要になるでしょう。

バックアップ

バックアップはちゃんと取ろうということです。

正しく取得できているか、それを確認しているか。障害が発生したときの復元はできるか、ドキュメントはあるか、定期的に練習を行っているかなど、考えるべきことはたくさんあります。いざ、なにか発生したときは心に余裕もありません。そんな状況で素早く的確に作業を行うためにも、日々の準備は大切です。

プロジェクトやチームでの文化づくりも重要ですし、作業や知識が属人化しないためのドキュメント化なども重要です。

非正規化

非正規化は基本的に行わず、必要になったタイミングでは設計に問題がないか、他の代替手段はないかを検討しましょう。多くのケースでは他の解決方法があるはずです。

以下のタイミングで非正規化を行いたくなるそうです。なんとなく覚えがあるものもあります。えいやっで非正規化に手を出さず、落ち着いて他の解決方法がないか検討しましょう。

テーブルを作って正規化するのがめんどくさい
外部キー制約によるデッドロックなどが発生している時
Joinコストが高まりパフォーマンスに影響がある

おわりに

RDBで設計する上でありがちなアンチパターンが共有されており、とても役に立つ知識でした。確かに実務の上で良くあることばかりかなと思います。

この本では、ありそうな依頼内容や開発者の気持ちなどが書かれており、「あるある」となるようなエピソードばかりです。技術的負債となって未来の自分が苦しい思いをしなくて済むように、しっかり意識して設計・運用に取り組めるようになりましょう。

一人で開発していると、なかなかアンチパターンに気づかないこともあります。複数人でレビューするなど仕組みの面でも防げるような取り組みができるといいですね。

【おすすめ読書】やりとげる力

Thu, 11 Apr 2019 00:00:00 GMT

目標などを最後までやりとげることを邪魔するもの何かについて考えた本です。作家である作者が、世の中に認められるようになるまでの苦悩と挫折の道のりが描かれています。

やりとげることが出来ずに、いつの間にかやめてしまったことが一つくらいはあると思います。やりとげることを妨げているものは何なのか、原因をしっかりと見据えることから初め、それに向き合うための心構えや姿勢を学ぶことが出来ます。

具体的なアドバイスや習慣化の方法ではなく、弱い気持ちはどんなときに出てくるか、どの感情がそれなのかといったことを言語化している印象です。著者が作家なので創作的な話が多いですが、関連のない仕事やスポーツなどなんにでも応用することができると思います。

これからの仕事や学業が大変だなあとか感じている人にぜひ読んでみてほしいです。もっと簡単な掃除や筋トレなどのことでもいいです。継続して取り組もうと思ったことが、いつも続けられないという人は一度読んでみましょう。一体何がそうさせるのか、何が足りないのかということが具体的に把握できます。

レジスタンスという存在

やりとげることを邪魔しているのは自分の中の「レジスタンス」という存在です。レジスタンスとは、創造的な活動をする際に障害となるすべての要素を指し、誰もが内面に抱えているものです。レジスタンスはとても強く、いかなる時でも、とても強い力で負の方向に引っ張ってきます。眠ることもなければ、手加減もありません。恐れによってより強い力を持つようになり、自分の魂の成長に必要なものであればあるほど、強い意志で邪魔をしてきます。

レジスタンスの持つ好きなもの・嫌うものなどについて紹介されています。これだ！という実態ではなく、性質を定義することで、レジスタンスを発見・観測できるようにしています。敵を知るために己を知ることも大切で、出来なかった理由やその時感じた気持ちなどを思い出すことになると思います。

プロ意識でやりとげる

自分なりの「プロ意識」を持つことで、レジスタンスに打ち勝つ心構えを手に入れることが出来ます。レジスタンスが何よりも狡猾であることを知り、忍耐強く仕事をやり遂げます。どんな想定外のことが起きても、その場を支配することを心がけます。周りの影響に惑わされないようにしましょう。レジスタンスは他者の意見に従うことを望んでおり、周りからの評価や発言に引きずられてしまいます。

おわりに

なんとなくやりたいことを見つけて始めるけど、あまり続かずやめてしまう。忘れた頃にまた挑戦する、という経験がある人は多いと思います。

この本を読み終える頃には、なぜやめたくなったのかということが言語化されており、何と戦わなければいけないのかがはっきりします。レジスタンスという、自分自身の中にあるものに打ち勝つことができれば、創作のコントロールを取り返すことが出来ます。

仕事や創作活動のみでなく、日常生活でもより充実した生活を送れるようになるのではないでしょうか。そんな効果が期待できる本です。

レイアウト・色・フォント『デザインの授業』

Wed, 10 Apr 2019 00:00:00 GMT

デザインの構成術について学べる本です。「デザインを見る」ということに重きをおいています。テクニックや基礎知識を1つずつ学んでいくのですが、全てに作例がついています。

作例はこの書籍用に作られたものではなく世の中にあるものを引用しており、実際に人気や実績のあるものが選ばれています。デザインの歴史の中から重要なものを選んでいるらしく、結構昔の作品も選ばれています。もちろんデザイン的に優れたものばかりですので、作例集としても使える本だと思います。

解説もわかりやすい書き方になっています。その上、この本のコンセプトが「デザインを見ること」となっており、優れたデザインの探し方、見つけたときの観察方法・見るべき視点などが学べます。この基礎的な能力を身につけることで、デザインに関する吸収力も向上できるのではないかと思いました。

デザインに興味のある人はぜひ一度、ゆっくりと読み込んでみてほしいです。

デザインの読み方

デザインする人の視点で世の中を見る。このことを意識してみます。普段の生活で常にこのことを意識するのは難しいですが、デザインを好きになることがコツの1つとして紹介されていました。好奇心や興味といったものから始めるのは、悪くない選択のようですね。

量ももちろん大切なのですが、それに加えて質を追い求めることも重要です。一般的に良いとされるデザインを見ること、そして好きか嫌いかで終わるのではなく分析的な見方をして、自分の中に蓄積していくことが必要です。

製作時に行われたさまざまな判断、その判断基準を推測することで作り手の意図を理解できるようになります。模写することも大きな効果がありますが、この本では注意深く見ることでそれに近いことを学ぼうと考えています。

制作の中でどういう判断をしたのかをできるだけ言葉にしていきます。言葉にならない経験はなかなか身につきません。言葉として整理することで脳に蓄積されます。

構成術

それぞれの章では、以下の3つテーマに分けて学んでいきます。多数の実例を参照しながら、テクニックの説明を読んでいきます。図には線を引いたりポイントに印がしてあるので、「こういうところに注目すればいいのか」ということも理解できます。

レイアウトの構成術

西洋の歴史的なデザインを始め、日本の鳥獣戯画なども例にして紹介しています。対比であったり視線の流れの動かし方など、たtだ眺めているだけでは気づかないようなことを学びます。デザインの知識としては基礎の基礎ですが、これらのことに気づけるようになることがこの本の目的です。

意図を持って要素を配置しましょう。サイコロを振って決めるようなデザインをすると、美しいものになりません。意図が細部まで行き届いた明快な構造を目指すことが重要です。

写真の選び方にもいくつか考え方が乗っています。前後の瞬間を感じさせる写真を選ぶことで、静止画であるにもかかわらず躍動感のあるデザインに近づきます。

色彩の構成術

色相・彩度・明度を意識して、調和と強調を作り出します。再度と明度を合わせたものが「トーン」で、純色に白黒グレーを混ぜることでつくることが出来ます。

デザインを見るときに意識すべきこととして、どんな色の組み合わせで調和またはアクセントを作っているか、同じトーンや色相の色はないか、ということが挙げられています。このことに注目することにより、自分が色を使う際のボキャブラリーとなって蓄積されます。

判断のための座標軸を持つこと、座標軸の目盛りを感覚的に把握できるようになると、色彩的な感覚が身についていきます。

白黒+1色でデザインするという取り組みも紹介されています。色の面積による見せ方の工夫であったり、色に持たせる役割をしっかり設計できるので、良い練習になるそうです。

タイポグラフィの構成術

多数あるフォントの関係を自分でマップ化してみます。そうすることで、それぞれのフォントの持つ特長が明確になり、デザインの際に理由や意図を持ってフォントを選べるようになります。

まず、書体には筆跡をモデルに作られたものと、幾何学的な発想で作られたものがあります。一緒に配置する写真やイラストの要素との組み合わせを考慮すると良いです。

他にもフォントを見るときには、文字の端の切り口・文字の幅・小文字の「x」の高さを見ると良いです。まとまりやクールさを重視するのか、勢いや元気良さを重視するのかといったことを決める要素になります。

ボドニーやフーツラ・ヘルベチカといったフォントを比較しながら、それぞれの特長や気をつけるべき点をまとめています。

他にも、コンピュータの発展とともに生まれたデザインフォントについても書かれています。個性が強く、特定の用途でしか使えないようなものが多いです。うまく使えば強い印象を与えることが出来ますが、扱いが難しく劇薬のようなものだそうです。

おわりに

デザインについての基礎的な知識が得られたと思います。大きくはレイアウト・色・フォントといったところです。他にもデザインを行う上で意識すべき点はたくさんあると思いますが、とりあえずこれらを記憶にとどめておきましょう。その上で、普段の生活で出会うデザインをよく観察して、その意図を理解できるように意識してみます。

「どういう意図があってこうしたのだろうか」ということがわかるようになれば、デザインの授業の成果だと思います。良いデザインとは、細かいところまで全部に作り手の意図が感じらるものなのかなと感じました。

「デザインを見る」ということに重点をおいた説明・内容になっています。読み終わった後はぜひそのことを思い返してさまざまなデザインに触れることができるようになると良いですね。

【おすすめ読書】ハイコンセプト

Tue, 09 Apr 2019 00:00:00 GMT

「新しいことを考え出す人の時代」という副題の通りで、まさにそのような人になるために必要な6つの感性をまなぶことができます。

これからの時代を生きるために意識するべき能力であったり、目指すべき指針になるようなことが書いてあります。業種によっては目指すべきものは異なるのですが、この本に書いてあることはどんな業種や年齢でも、ためになるような普遍的な知識だと思います。これからの時代で活躍するために是非読んでおきたい一冊です。

第四の波に飲まれているという時代に、「十分なお金を稼いで幸せな生活をするために必要なことは何か」を真剣に考えた結果がこの本だそうです。もちろん時代が変われば求められることは変わります。時代の流れに沿って学びを続け、アップデートしていくことが一番重要なことであると思いました。

せっかくなので本に出てくる6つの感性をメモしておきます。忘れた頃に見返して、意識できるようにしようと思います。数年後に見てどうなっているか振り返ってみるのもおもしろいです。

機能だけでなくデザイン

機能だけでは不十分であり、感情に訴えかけるようなデザインや美しさが必要になっています。デザインはビジネスで、ビジネスはデザインです。

デザインの完成を磨くためには以下のアドバイスがありました。

気になったデザインはメモします。写真でもよいです。どんどん感性が鋭くなって細かいところにも気がつくようになります。
オリジナルのものをつくります。DIYでも良いですしオーダーメイドでもよいです。自分は何が使いやすいのか・好きなのかといったことを見つめ直します。

議論より物語

効果的な議論よりも、相手を納得させる物語を語りましょう。情報の価値は変わっており、大抵のことは検索して知ることが出来ます。その時代で求められていることは、各個人の感情や物語に注目が移っています。

小さな短編小説や、自分の歴史、すなわち自分史なんかをつくって見ると物語のトレーニングが出来ます。簡単にできるところでは自己紹介でもいいのではないでしょうか。スライドとかで作成してみるとよいです。

個別よりも全体のシンフォニー

バラバラなものをつなぎ合わせて、全体感をつくる人が求められます。そんな中で、境界線を理解して超えることができる人や、新しい発明を起こせる人が活躍できるそうです。

論理ではなく共感

人々を動かせうものは論理ではなく感情です。そのことを理解して、必要な人間関係を気づくことを目指しましょう。相手の感情を読み取り、共感することができるようになると、必ず自分にとってメリットになります。相手の感情に共感することは難しいことかもしれませんが、訓練すれば必ずできるようになります。メンタリストとかもそうですが、結構それらの情報は溢れているので一度見てみるといいです。

まじめだけでなく遊び心

コンセプトの時代ではオンとオフ両方のバランスが必要で、そのためにユーモアを磨くことに意味があります。笑いによって右脳が活性化し、ストレスも軽減されます。パフォーマンスが上がり、周りに人にも良い影響を与えることが出来ます。

モノよりも生きがい

物質的には十分に豊かな時代になりました。より幸せを感じられる生きがいにシフトした社会に適応できるようになりましょう。

迷路を解いたりすることもいいですし、未来の自分を思い描くことなども効果があります。どんなことで生きがいを感じるでしょうか。一度見つめ直してみましょう。

おわりに

ここまで出てきた6つの感性は難しいなと感じるものばかりでした。これからの時代で活躍できるようにしっかりと磨いていきたいです。やるべき取り組みの中には、普段の生活にユーモアを取り入れたり、気に入ったものを記録したりと、小さなところから初められるものが多いです。感情が動いたこと・動かしたことなどをメモして、後から見直せるように心がけるだけでも、だいぶ未来は変わってくるのでは無いでしょうか。

話は盛られた方がおもしろい『「マコトよりウソ」の法則』

Tue, 09 Apr 2019 00:00:00 GMT

何度か本ブログでも紹介している外山滋比古さんの本の一つです。

物事を多面的に捉えるための考えかたが書かれているという印象です。常識に枠にとらわれず、おもしろい発想を生むための極意が書かれています。

読後は今までとは違った観点で世の中を見る意識をするようになり、様々な違和感やアイデアに出会えるようになるでしょう。

アウトサイダー的な視点

当事者と他の人が見ているものは、同じものを見ているつもりでも別の面を見ています。これを作中ではインサイダーとアウトサイダーと名前をつけています。

家事が起きた家の人と対岸から見ている人。喧嘩した人とそれを仲裁した人。インターネットに書き込んだ人とその書き込みを見た人。同じものを見ているのですが、多分アウトサイダー側の人は物事のうら面しか見れていません。

自分がどのような見方をしているのか、当事者はどんな気持ちか、自分自身の感情と差異があるかということに気づくことができるでしょうか。

人間の好奇心による心の動きによって発生してしまうそうで、自分で気づくのは難しそうです。自分が野次馬だなと感じた場合は、間違いなくアウトサイダーな見方をしています。

アウトサイダーが面白くする

歴史を語るのもアウトサイダーです。当の本人たちはすでに亡くなっており、そのことに少しはヒレやウソを付け加えて語るのが歴史とも言えます。

翻訳についてもアウトサイダー的な見方が重要で、インサイダーな目線で訳されると原作忠実を重視するあまり、面白くないものになります。

アウトサイダーによる語りがものに面白さを与え、歴史を作ってきたのは常にアウトサイダーによるものでした。

島国であった日本はインサイダー的な思考が多いらしく、アウトサイダー的な思考を取り入れるまでに時間がかかりました。アウトサイダーによる取り組みによって著作権の概念であったり、翻訳出版の仕事などがうまく回っています。著作権の概念も日本で認められたのは遅く、インサイダー的な考え方が重視されていたので海賊版も出回っていたようです。

アメリカ合衆国の大統領選挙でもアウトサイダー的な取り組みによって勝利を収めた方も最近いました。

作者の若い頃の話

就活生に向けた所感なども書いてあります。様々な考え方はあると思いますが、作者自身の経験等も書いてあるので参考になるかもしれません。流石に時代が違いすぎるので戦争のこととかは考慮しなくていいですが、自分のことのように感じられるとおもしろいと思います。

論文を読むことよりもおしゃべりすることの良さであったり、二人よりも三人、同じ専攻よりも異なる分野の専攻で話すことなど、おもしろい会話ができるコツを教えてくれます。もしもそのような機会が身近にあるのであれば、積極的に顔を出してみるといいです。

おわりに

演じる人と見る人についての観点の違い、更には第3者やそれを見つめる第4者の存在についての考察でした。

アウトサイダー的に見つめる人がいて始めて面白くなり、その見方が重要であるということが言いたかったのでしょうかね。

さまざまな例や偉人の話などを用いてわかりやすく説明しているので、理解しやすい本でした。

「マコト」はインサイダーで「ウソ」はアウトサイダーです。両方の立場の人がいること、アウトサイダーによって語られる話しや歴史が面白くなり、後世に語り継がれていきます。

【おすすめ読書】お金2.0

Mon, 08 Apr 2019 00:00:00 GMT

お金に関する本です。現代の社会や流行に合わせたお金の知識を身につけることが出来ます。専門的な用語は極力少なくしているそうで、あまり経済に知識がなくても読み切ることが出来ます。

この本を読むことで、お金や経済とは一体何なのか？といったことを知ることが出来ます。お金や経済を「ツール」として使いこなせるような知識を知れる良い本でした。

社会にモヤモヤしている若者向けの内容でした。経済の知識もつくと思いますので、経済学の入門としても良いと思います。

お金の正体

ビットコインやSNSなどについての分析をしながら、お金・経済についての成り立ちや仕組みを解説しています。共通の幻想を持つことや、寿命の設計など、普段の生活では意識できないような経済の基礎が詰まっており大変勉強になります。仮想通貨などちょっと前から出てきた小難しい知識についても説明があるので、それらの勉強にもなります。よくわからずに利用している人は知識として身につけておくと心強いです。

経済の仕組みは人間の脳の仕組みとも深く関わっています。報酬の設計などもそこから来ているようです。経済の仕組みは他の箇所でも用いられているようで、組織の運営など様々な要素に影響しています。そもそもの経済の概念は自然の仕組みに近いものがあり、それらの知識を得ることでも経済学を学ぶ足がかりとなるそうです。

価値主義について

現代では資本主義の考える価値あるものと、私達が考える価値あるものがかけ離れきています。資本主義では価値をお金で表すことが出来ますが、必ずしもお金だけが価値では無いということです。なんとなく考えたことはあるのではないでしょうか。お金が全て！でいいのだろうかという感じですね。もっと大切なものがこの世にはあるのでは！とか。

別に世の中的には価値は無いけど集めたくなるものとか、やりたくなることとか。それぞれの人が異なる観点でものに価値を感じています。

これからの世の中は可視化された「資本」ではなく、資本化される前の「価値」が中心になっていくそうです。例えばSNSに登録されている個人情報などがそうでしょうか。いいね数やフォロワー数などもそれに当たります。応援したいとか、この人のものだったら私も使いたいとか。いろいろあるようです。

価値について一度考えてみると3つの要素に分解できます。有用性としての価値・内面的な価値・社会的な価値です。それぞれざっくりとは以下のようになります。今まで自分の行ってきた活動について、これらの観点で数値化してみると良いかもしれません。他にも世の中にあるもので、自分がよく使っているものについても同じく数値化してみると良いです。

有用性としての価値
役に立つかという件店から考える価値、一般的なもので資本主義であってもこれが重要です。
内面的な価値
個人の感情に紐づく価値。ポジティブな感情を引き起こせるかどうかということが主な観点でしょう。
社会的な価値
社会に貢献し、全体の持続性を高めるようなことに価値があると言えます。

これらをしっかり抑えた上で、価値主義に移行していく社会で生き残る方法を考えていきます。

おわりに

本の中では、「お金から開放される生き方」というテーマの章があります。いくつかのメッセージのようなものが書かれており、若者に対して考えさせる内容になっています。内面的な価値を見つめ直すこと、儲かることから情熱を傾けられることを探すことなど、いくつかアドバイスがあります。一番大切なのは、誰かに伝えられるくらいの熱量を持って取り組めることを探すべきだということです。

そこに自分自身の価値があり、それを高めていくような仕事・勉強をしていくことが、これからの時代では重要になっていくでしょう。

この本ではこれからの社会や宗教・価値についての考察などもあり、この本の通りになっていくのか楽しみでもあります。若者に向けての熱中できることの探し方なども載っているので、参考にしてみると良いです。この本を読んでそのまま従わなくても、自分に取ってできるところだけとか、何年かかけて実現するとかでもいいと思います。これからの価値のあり方や自分の目指すところを考え直す、きっかけとして一読してみることをおすすめします。

【おすすめ読書】メイキング・オブ・勉強の哲学

Sun, 07 Apr 2019 00:00:00 GMT

以前紹介した「勉強の哲学」という本の作成秘話みたいなものです。

以前紹介した記事

作者は「勉強とは何か」ということを哲学を参考にして分析しました。その時の出版までの執筆や、さまざまなイベントでの自らの気づきなどについて書いた本です。実際に行われたトークイベントの内容を編集して書き起こしているそうです。

勉強に関する本を出版する際のさまざまな取り組みが、それもまた勉強になったそうで、そのことを公開するための本です。

出版という普通体験できない行為で得られる経験が書かれています。読んでみると、こんなふうに思っていたのかとか、大変だったんだろうなあとか、おもしろそうだなあとか様々な感想が湧いてくると思います。

巻末には書籍を書く中で残していた多数のメモや資料の写真が掲載されています。作者の頭の中が垣間見えるので、ぜひ目を通してみると良いです。

以下私がオススメの部分について書いています。気になった方は「勉強の哲学」も合わせて読んでみることをおすすめします。とてもおもしろい本です。

勉強のテクニック

勉強のメタゲーム

複数のジャンルの勉強を並行して行うことで、多角的に物事を見れるようになります。そうしたある意味メタな視点が、より深い理解や発展につながるそうです。

しかも、自分の享楽的な好奇心を元にして、メタなジャyンルを選択することにより、独自のメタゲームをつくることが出来ます。そこでは、他人との競争などは存在せず、自分自身の気の赴くままに勉強することになります。他人との競争に疲れることもなければ、上限やゴールもないのかもしれません。とてもおもしろい取り組みだと感じました。

複数の言語を学ぶ

慣れ親しんだ言語以外を学ぶことで、全く異なる環境に飛び込むこととなり、新しい経験ができるようになります。もっと言えば、古い言語、すなわち「失われた言語」などを学んでみるといいそうです。結構難しいそうですが、たしかにおもしろいかもしれません。

文学の勉強

文学の勉強には、感受性を豊かにするということの他にも、ある言語体型から別の言語体型に移動する際の移行可能性を鍛えるエクササイズになるのではないか。

社会学には社会学の言語体型があり、他の学問を学ぶときにはそれを一度すてて、新しい学問の言語体型に飛び込むことになります。その時の受難な言語の切り替えや学習に、文学の勉強は役に立つのではないかと言うそうです。

おわりに

全編通して哲学の用語や名前が出てくるので、難しい印象があります。しかし、メジャーなものも多く、調べていくとより理解が深まります。哲学に興味を持つための入門書としてもいいのではないでしょうか。引用の出典なども書いてありますし、この本から哲学を始めとする他の学問への興味をふくらませることができると、とてもいい勉強になるように思いました。

【おすすめ読書】文書力の基本

Sat, 06 Apr 2019 00:00:00 GMT

わかりやすく伝えるための文章のコツを77のテクニックとして紹介している本です。

一つ一つは簡単な言い方に要約されているのでわかりやすいです。文章を書く仕事を指定ない人にとっても、とても役に立つテクニックです。仕事の報・連・相であったり、ちょっとしたメモなどにも使える知識です。

悪い例とその修正案も乗っているので具体的に理解することが出来ます。

本を読んですごく役に立つなと思ったことと同時に、なぜ学校ではこのような知識を教えてくれなかったのかと後悔するばかりです。

個人的に大事なものと、意識したいものを少し記載しておきます。興味があればぜひ本を読んでみてください。

短く書く

文を短く区切ることを意識します。一つの文章で沢山の荷物を運ばないようなイメージです。これはとても大切なテクニックで、この本でも最初に出てきます。これを意識するだけでかなり伝わりやすくなります。文書としては面白くなくなるということもあるのですが、伝える文章を書くためであればこの方がよいです。

とりあえずこれだけ覚えておくのでもだいぶ違います。意識しないと文章が長くなりがちですが、わかりやすい文章は端的に短く言い切っていることがわかります。

因果関係をつかむ

文の前と後で、必ず話が繋がっているはずです。話の因果関係をしっかりと考えて、そのことを意識して順番に書くようにしましょう。

途中で余計な話を入れたり、何が何にかかっているのかわからなくならないように注意しましょう。

余計な言葉や意味はできる限り削りましょう。なるべきシンプルにすることがわかりやすい文章を書くコツです。

主役を早く登場させる

日本語にありがちですが、最後まで読まないと結局何が言いたいのかわからないということがあります。早めに言いたいことを登場させて、その後から補足をつけるようようにしましょう。

特に主語については早めに登場させるように意識します。そのほうが読みても安心して読むことができ、わかりやすい文書になります。

おわりに

一つ一つのテクニックに例文がついており、添削の例になっているので理解しやすいです。それが77個も詰まっており、身に付ければとても役に立つものばかりです。ぐんと読みやすい文章が書けるようになります。全部を一度に身につけるのは難しいのですが、それでも学ぶ意味があります。簡単にできるものから順番に意識して身につけていきましょう。

学生でも十分に役に立ちますが、どちらかと言うと社会人の方にこそ読んでほしいです。割と、基礎的な文章を書く機会は多く、このようなスキルは大事だと思います。新人研修とかでしっかりと身に着けておくのがおすすめです。

ミニマリズムとはマーケティング耐性のことかもしれない『より少ない生き方』

Wed, 03 Apr 2019 00:00:00 GMT

少し前に流行った「ミニマリズム」に関する本です。

ミニマリズムのあり方や、持ち物を少なくすることでどのように豊かになっていくのか、といったことを学ぶことが出来ます。著者の働きかけでミニマリズムの道を歩むことになった知人たちのエピソードも紹介されています。

物を手放すためのコツや考え方もたくさんありますので、スッキリ生活したいなあとか、不要なものが増えてきたなあと思っている方は、ぜひ読んでみると良いです。ミニマリスト・ミニマリズムに興味のある方は間違いなくおすすめです。

平成がもうすぐ終わります。不要なものを平成のうちに処分して、新しい年号「令和」を軽やかな気分で迎えましょう。

人生をシンプルにして本当に大切なことに集中できるようにする

物が増えると物に支配されたような状態になります。ミニマリズムという考え方を取り入れることで、自由を手に入れることが出来ます。

著者はミニマリズムのことを以下のように定義しています。「一番大切にしているものを最優先にして、その障害になるものはすべて排除すること」

ものを手放すことで得られるメリット

時間とエネルギーが増える
お金が増える
人のためになることができる
自由が増える
ストレスが減る
環境に優しい
質のいいものを持てる
子供のいい手本になれる
人に面倒をかけない
人と比べなくなる
満足できる

ミニマリズムにまつわるよくある誤解

誤解1.ミニマリズムはすべてを捨てること

正しくは少ないもので暮らすことであると考えましょう。過剰に持ちすぎないように気をつければ良いです。

誤解2.ミニマリズムとは整理整頓である

今あるものを片付けることは、一時的な解決にしかなりません。未来にもう一度片付けを行う必要があります。更に未来を考えれば、何度も片付けを行うことになります。

整理整頓について以下の気付きが挙げられています。

整理整頓は誰の利益にもならない
整理整頓は借金の問題を解決しない
整理整頓は「もっとほしい」という欲求を満たしてくれない
整理整頓をしても人生の大切な気付きには繋がらない
整理整頓をしても人生に変化はおこらない

自分なりのミニマリズムのルールを持つ

自分の目的をベースに自分なりのミニマリズムを作りましょう。こうしなければならないというものはなく、自分にあったミニマリズムの形を探して、実践することが大切です。

消費社会の罠を知る

消費を煽る広告は日常にあふれており、意識の中に入り込んでいます。自分が広告の影響を受けていることを自覚し、消費の誘惑と向き合いましょう。すなわち、物欲との戦いです。

簡単にものを変える時代になりましたし、マーケティングは個人情報を利用して的確にレコメンドしてきます。私達のことを一番知っているのは、私達自身ではなくマーケターの方なのです。「消費」=「幸せ」のようなイメージでしょうか。

しかし、人生の終わりにたどり着いたときに「もっと買えばよかった」と後悔する人はまずいないでしょう。他の大切なものを思い浮かべることができるはずです。

よく見かけるマーケティング戦略の例

必要かどうかを正しく判断できるようになりましょう。まずはマーケティング戦略にどういったものがあるのかを知るところから初めます。

ポイントカード
消費者はポイント欲しさにいらないものを買ってしまう。
小売店が発行するクレジットカード
そのお店でお得になるクレジットカードを持っていると、買い物に2倍のお金を使ってしまうデータがあるそうです。さらに買い物の傾向などのデータも取得できるのでマーケティングがさらに協力になります。
残りわずか
タイムセールなどの煽り文句で間違った決断をさせようというものです。
セール価格の値札
消費者は商品の正しい価格はわかっていません。ですので、セールで安くなっている様に見せることで、お買い得だと信じ込ませることが出来ます。
おとりの価格設定
メニューの中に1つ2つくらい高い商品を混ぜておくことで、その他がお手頃の値段に見えるため買いやすくなります。
サンプル配布
買い物中に試食などをしてしまうと、人間の脳が「今は食事の時間だ」と勘違いしてしまい、本能的に食べ物を探してしまうそうです。

これらを知った上で、自分がついつい買ってしまう弱点を探すとよいです。消費の誘惑に打ち勝てるように己を磨きましょう。

自分にとっての十分を知る

十分の基準は人によって異なりさまざまな要素によって変動します。それを知るのは大変なことですが、探そうとしなければ見つかることはありません。ものが少ないという状態を体験することで、自分にとってこれくらいあればいいのかという「十分」のしきい値を見つけることが出来ます。当たり前と思っていることを疑い、一度考え直して見ることによって、自分にとって本当に快適な量がわかります。

おわりに

ものを減らすことで豊かな生活を送れるというのがミニマリズムの概念です。

ものへの執着を捨てることは難しいことですが、それによって大きな自由を手に入れることができるはずです。誰しも最初はやってみることが大切だと思います。ミニマリズムなんて自分には無理だと思っている人にこそ、一度挑戦してみてほしいです。そしてやっぱり無理だったと感じるとともに、「最低でもこれくらいは必要」という十分を見つけてほしいです。きっと今まで余分に持っていたものの量に驚くのではないかと思います。

生産性を向上するアドバイス『プロダクティブ・プログラマ』

Tue, 02 Apr 2019 00:00:00 GMT

生産性を高めるためのテクニック集です。プログラミングを効率よく行うためのテクニックとノウハウ、そして哲学などが詰まっています。

プログラマとして早いうちに身に着けておきたいテクニックが満載です。初心者の方にこそ読んでほしい本です。

以下にこの本に書いてある、さまざまなテクニックの概要をメモしておきます。詳細なテクニックについては、今後プログラミングテクニック集として記事にしていこうと思います。

生産性を高めるために

日常的に「もっと効率の良い方法はないのか」と意識することが重要です。この本では「加速」「集中」「自動化」「正準化」という観点から、効率化するためのノウハウを学びます。

基本的には、効率化できるパターンに名前をつけてグループ化し、有効なテクニックを紹介する形になっています。どちらかといえばプログラマ本人が変わるのではなく、コンピュータにやらせるとかアプリケーションを改良することで効率化するテクニックです。

着眼点が良く新しい気づきもあるので、読み終わった後には真似するだけでなくオリジナルのテクニックも思いついていると思います。

加速

マウス入力よりもキー入力のほうが速い

ネットサーフィンとかクリエイティブなことに関しては別ですが、プログラミングをする際にはなるべくマウスを使わないようなやり方を探すと良いです。

キーボードにおいてある指をマウスに動かして、またキーボードに戻ってくるという動きが無駄です。

なるべくマウスを使わずに必要なソフトを開いたりできるようにしましょう。コマンドラインを有効に活用することはもちろん、コンピュータについている基本的な機能を見直すことが必要です。

それでも難しい場合はトラックパッドとかトラックボールとかをキーボードの手前においたり、Lenovoのトラックポイント（赤ポッチ）を検討すると良いです。それだけでもすごく捗ります。

クリップボードの拡張

クリップボードの履歴を再利用できるソフトをインストールしましょう。OSやバージョンなどによって利用できるものは異なりますが、「CLCL」とか「Clibor」とか「CopyQ」とかさまざまなものが存在しています。「クリップボード拡張」で検索すればいっぱい出てきます。

この機会にスマホにもインストールしておくと良いです。あまり使わないのですがスマホでもやっぱり便利です。

cdコマンドより便利なpushd・popd

コマンドラインでディレクトリを移動するコマンド「cd」ですが、もっと便利な「pushd」「popd」ものがあります。LinuxやMacではもちろん使えて、Windowsの場合はCygwin上などでは利用できます。コマンドプロンプトでは使えなかったと思います。

pushdはカレントディレクトリの移動に加えて、カレントディレクトリをスタックに保存します。作業が終わったらpopdを実行することでスタックに保存していたディレクトリに戻ることが出来ます。スタック形式になっているので、「FILO」先入れ後出し形式です。すなわち、popdは最後に入れたディレクトリから順番に移動します。

集中

findコマンド

ファイルを開くときには、findコマンドを利用できるようになるといいです。ファイル管理はいつもややこしくなり、目的のファイルを探すのはかなり面倒になります。普段から整理をしていても、なかなかうまく管理できないものです。

ここではいっそfindと正規表現を使ったファイルの検索方法を学ぶことで、検索によってファイルアクセスを快適にする方法を学びます。

コマンドプロンプトのカスタマイズ

プログラミングを行う上でよく使うコマンドラインですが、Windowsでは設定をショートカットごとに保存出来ます。

開くたびに、ウインドウを大きくしたり設定を変更したりしなくて済むように、カスタマイズを有効にします。カスタマイズ例都市tえ以下の提案がされています。

スクロールを無限にする
デフォルトは300行なので、実行結果やエラーのログメッセージが最後まで確認できないときがあります。大きく増やしておきましょう
横幅を最大にする
横スクロールしながら使うのは面倒なので、最大にしましょう
決まった位置にウインドウが開くようにする
利用する内容ごとに異なる位置に開くようにすることで直感的に使いやすくなります。Vimは左上、Gitは右上とか。
画面の文字や背景の色を変える
利用する内容ごとに見た目を変えることでも直感的に使いやすくなります。
簡易編集モードをオフにする
オンになっていると、表示されている文字をコピーしようとして選択すると、プロセスが一時停止してしまいます。

モニターを複数使う

デュアルディスプレイです。今時の企業であれば之くらい対応してもらえると思います。出来れば自宅でのプログラミング学習の際にも画面が2つあると良いです。お金はかかりますが間違いなく快適です。

安いものもありますが、ちょっと値をはるものであれば縦向きにできるものとかあるので、色々探してみると良いです。

自動化

ブラウザ操作をSeleniumに任せる

特にテストのときなどに活用しますが、普段のネットサーフィンでも利用できます。ブラウザでの操作を自動化してくれるので、休憩時のネットサーフィンとかも捗ります。同じことを何度もやっていることに気づいたら自動化出来ないか検討してみましょう。

正準化

バージョン管理

必ず必要です。プログラミングをするに当たって、どんな小さなものでもバージョン管理は行いましょう。ソフトの設定ファイルとか、メモとかもバージョン管理するのがいいです。Githubも無料でプライベートリポジトリが作れるようになったので、ガンガン使うといいです。

バージョン管理するべきでないファイルも中にはあります。IDやパスなどが書かれたファイルが代表的でしょうか。それらもなくなると困るので、必ずバックアップは取っておきましょう。

テスト駆動設計

この本では触りの部分についてのみの紹介です。詳細な内容は他の書籍を参考にしましょう。個人でも小さく始めることはできるので意識してみると良いです。

哲学

「本質的特性と偶発的特性」「オッカムの剃刀」「デメテルの掟」といった、昔の哲学から着想を得たプログラミング哲学が紹介されています。どれもためになるもので、目の前の問題で頭が一杯になってしまうのではなく、そこから学べることはないか・なぜ起きたのかといった観察・反省を行うことが重要です。次に起きた時、または次は起きないように学びを活かせるようになりましょう。

これらの教訓の様に、自分なりの教訓を見つけ出してノウハウ化できるといいです。

理想のツール

理想のテキストエディタ

プログラムを行う上で、自分に合ったツールを見つけることも大切です。やりたいことに合わせてさまざまなツールを使い分けましょう。

この本では、例として以下のエディタに触れられていました。触ったことがないものがあればこの機会に使ってみることをおすすめします。

Vim
Emacs
JEdit
TextMate

おわりに

生産性を向上するためのさまざまなアドバイスが書いてある本です。どれも間違いなく参考になります。もっと効率の良いやり方がないか意識することは大切ですが、忙しいときには忘れてしまいがちです。ですので、少し仕事が落ち着いたとか少し余裕あるという時間を使って、このような本の内容を試してみるといいです。中にはあまり効果がないもの、合わないものもあると思いますが、そこからの新しい発見もきっとあるはずです。本や同僚からもらえるアドバイスを柔軟かつ積極的に試してみることも、生産性を上げるためのコツだと思います。

初心者におすすめ『Unity C# ふりがなブログラミング』

Mon, 01 Apr 2019 00:00:00 GMT

Unityの入門書です。C#を使ったスクリプト作成についての解説になっています。

「ふりがなプログラミング」シリーズでもうおなじみですが、超初心者向けの内容でプログラミングに馴染みのない人でもわかりやすくなっています。これからプログラミング学習を始めようという方や、お子さんのプログラミング学習の第一歩にもいいと思います。

よく起こりがちなエラー内容の紹介や読み方もあるので、うまく行かないときの参考になります。プログラミングを学び初めのうちは、エラーの内容の意味がわからず混乱しがちです。初心者のうちに苦手意識を取り除き、ちゃんと意味を調べてエラーを理解できるようにしておくことは重要だと思います。

シリーズの特長でもありますが、すべてのソースコードにはふりがなと書き下し文が書かれており、プログラミングが苦手で敬遠していた人でも取り掛かりやすいです。サンプルコードやゲーム制作に使う画像もサイトからダウンロードすることが出来るため、素材を自分で用意することなく動作を試すことが出来ます。

利用する環境

Windows または Macを用いて「Unity hab」と「Visual Studio」を使って学びます。インストールの仕方も説明があるので、特に困ることはないと思います。私はLinuxで進めましたが、それでも特に問題はありませんでした。

Unityをはじめるなら最初は2Dのゲームが良い

Unityでは3Dのゲームも作ることができますが、最初は2Dのゲームから初めましょう。

3Dのゲームでは考慮するべきことも多くなるとともに、ゲームプレイ時の動作が想像しづらいです。3次元的な想像力がある・慣れているという人であれば簡単なのだと思いますが、最初のうちは難しいです。基礎を学ぶつもりとして、無理せずに2Dゲームから初めることをおすすめします。

素材の用意に関しても、2Dであればイラストソフトで簡単に作れてお手軽です。素材などの準備は簡単に済ませて、完成を目標として取り掛かることが重要です。

ソースコードの説明が詳しく書かれているチュートリアルを探そう

これまでいくつかのUnityチュートリアルをやってみましたが、わかりにくいものが多かったです。ゲーム制作の流れはつかめるのですが、スクリプトの意味や使っているクラス・メソッドのことがあまり理解出来ませんでした。ソースコードにコメントが書かれていても、情報量には限りがあるのであまり本質的な理解は出来ないことが多かったです。

コライダーや物理などゲーム制作の基礎知識がある、かつ、C#の型の指定方法や名前空間・クラスの基礎知識がある状態であれば、理解できるようなものが多かったです。

この本では、それらがわからない状態でも理解できるような書き方・進め方になっていました。スクリプトも必要なものしか無い簡潔なものになっていますし、難しいアルゴリズムなどは使いません。単純な繰り返しと条件分岐のみで作っているようなイメージです。

上記の理由もあるので、Unityによるゲーム入門としてこの本はおすすめです。作成するサンプルゲームも可愛らしく、シンプルでした。

おわりに

Unityを使ってのゲーム制作の入門書でした。C#のことも学べますし、Unityを使ったゲーム制作の取り掛かりとして、かなり親切でわかりやすいです。

ただし、シーンの概念についてであったり、ゲームのビルドに関することは載っていません。簡単なゲームを作成して、UnityEditer上で実行するというところまでの学習になります。シーンを複数持つゲームの作成や、フレームなどの時間の取扱、端末でのデバッグ・配布などに関しては他の書籍を参考にする必要があります。

ゲーム制作は身近なジャンルで取り掛かりやすいので、こういったところからプログラミングに興味を持つ人が増えてくれたら嬉しいです。趣味としてどうでしょうか。私のおすすめです。

【実践技術書】Unityによるモバイルゲーム開発

Fri, 29 Mar 2019 00:00:00 GMT

Unityを使ってのゲーム開発の入門書です。

Unityの基礎について学んだ後、実際にゲームを開発しながら使い方を習得できます。ゲームそのものの制作が主な内容で、Unityのコミュニティの使い方・説明はないですし、ビルドの説明も特にありません。あくまでも、Unityエディターでできる箇所に範囲が絞られています。

スマホでプレイするモバイルゲームがテーマとなっていて、2Dと3Dのゲームを1つづつ作成します。基本的な素材はダウンロードして使えますし、小難しいスクリプトはGithubから取得して使うことが出来ます。

ゲーム作成については、基本的な操作や概念を説明しているので親切でした。サンプルとなるゲームも洋風なものですが参考になります。ただし、利用しているスクリプト等がUnityチュートリアルと比較して簡単なゲームです。ですので、新しいゲームを考えたい場合は、ここから更に発展が必要になります。チュートリアルとかたくさんやってみるのがおすすめです。

Unityの基本

基本的なUnityの操作と、用語についての説明です。いくつも難しい要素が出てきます。ここだけ読んでも理解しにくいので、後のサンプルゲームの作成を進めながら都度読むのがおすすめです。

サンプルゲームでは使わない要素や知識も存在しています。デバッグ用の設定など便利なものも多いので、「この本に書いてあったな」という記憶だけは残しておきましょう。

巻末にはUnity Hubのことや、エディターのことも書いてあります。Unityのカスタマイズに関することも少し書かれているので、時間があれば読んでみるといいです。この辺に関してはやり方が色々あるので、ネットで情報を調べてみるのがいいと思いました。

ゲーム作成の練習

2Dの「井戸を降下して宝を拾って、入り口まで戻るゲーム」と、3Dの「シューティング」を作成します。ボタンをタップして入力したり、端末を傾けて移動したりするようなゲームになります。

どちらも、素材はダウンロードするURLが書かれているので、そちらからダウンロードして利用します。ゲーム内に出てくるスクリプトもGithubのURLが書かれているので、そこからコピーしてくると良いです。

サンプルゲームの作成は順序だって説明があり、作りながら要素を理解していくことになります。スクリプトを書いたり、ドラッグでオブジェクトを紐付けたりと、さまざまな操作があるのでややこしくなりがちです。ただ、設定している部分の意味と対象となっているものを理解しながら進めれば難しくないと思います。

C#のスクリプトの中身に関しては結構難しいです。他のチュートリアルと比べるとだいぶ簡潔な方だと思いますが、それでも慣れていないと難しいです。

おわりに

サンプルゲームが洋風なイメージであることが結構気になりましたが、特に躓くところはありませんでした。しっかり学べるいい本だと思います。最初にも書いてありますが、ビルドの仕方や必要な設定などについては触れられていません。あくまでもUnityを使ったゲームプログラミングの部分に重点をおいた内容になっています。実際にビルドしてストアで公開肢体となったときは、ネットで調べて情報を見つけるか別の本を参考にしましょう。

【実践技術書】Webサイトパフォーマンス実践入門

Thu, 28 Mar 2019 00:00:00 GMT

高速なWebページをつくるための施策や、メンテナンス方法などを取りまとめた本です。実践入門とあるように、すぐに実践できるテクニック的なことを中心に広く浅くカバーしている印象でした。幅広い領域からのアプローチを行っているので、一度読んでおけば解決の引き出しが大きく増えて良いと思います。

Webサイトの応答速度はUXの面はもちろんSEOの面でも有利になりますので、細かく対応を行う必要があります。

Webサイトのパフォーマンス改修

パフォーマンス改修ではさまざまな改修案が出てきます。この本ではソフトレベルの対応がメインで、cssやJavaScript、画像とフォントファイルなどのメンテナンスを提案しています。それ以外ではCDNやHTTP/2についての記載もあります。

cssのセレクタの選び方やレスポンシブにする際のコツ、preloadを使った実装など
レスポンシブな画像の設置方法、画像ファイルの軽量化
JavaScriptの最適化、async
サービスワーカーを使って処理を行う
CDNを用いた配信、HTTP/2の利用

負荷分散や、スケールアップのようなサーバの対応はありません。小規模なWebサイトを対象としている印象です。

パフォーマンスについての基礎や、その改善によって見込める効果などのデータも載っています。 Chromeの開発ツールなど基礎的なパフォーマンス測定ツールの使い方、情報などの解説もあります。スマホ実機と接続してのパフォーマンスチェックのやり方なども載っており、ちょっと応用的な方法も掲載されています。

パフォーマンス改善の進め方の注意

闇雲にやると大変なことになります。とりあえず手を付けてみて「早くなりました！」と報告するのはまずいやり方です。「どれくらい早くなったのか」とか、「本当に早くなったのか」とか、いろいろとややこしいやり取りが発生することは間違いありません。実際に早くなっていたとしても、十分なスピードに到達していなければ満足はしてもらえませんし、人によって感じ方も違います。担当者は良いと思っても、その上司にとってはまだまだ遅いといったことも十分ありえます。

まず、現在ページの応答にどれだけかかっているのか、どの要素・やファイルの読み込み、または表示にどれだけかかっているのかというデータを調査しましょう。ここは手を抜かずにしっかりと行います。一度だけでなく、何度か時間をおいて計測して、通常の値を定義しましょう。

その後、どんな対応ができるのか考えられる対策を検討します。この対応でどれくらいの改善が見込めるかをしっかり考えて、説明する必要があります。しっかりと、改善の目標とする数値を事前にすり合わせることで、改善のゴールを定義します。これはスピード改善以外の対応でも、当たり前のことですがおろそかにしてしまいがちです。

そして、改善の取り組みを行い、サイトを改修します。思ったように早くならない場合もあると思います。その突起には新しい問題等が見つかっていると思いますので、しっかりそれを共有しましょう。もちろん定めたゴールを目指す必要があるのですが、発見した問題や共有すべき事項は隠さずに伝えておくべきです。

アクセスする時間帯やサーバの調子などによっても、応答速度は変わりますし、ユーザーのネットワーク環境やPCの性能なんかでも変わることがあります。観測するときのルールを定めておこうなど丁寧に進めていくことが大切です。

おわりに

パフォーマンス改善を行う際にはもちろんですが、普段のサイト開発にも役に立つ知識がたくさんありました。サイト立ち上げの際に、この本に書いてあることを意識しながら設計することができれば、大きい効果を得られると思います。基本的にはフロントエンドの話が主になっていますので、フロントエンドに携わる人には一読の価値アリです。

HTTP/1と2の差によって、対応すべき施策が異なることにも触れられており、技術の進歩や仕様の変更によって、ベストな対策が異なることがわかります。世の中のさまざまな知見を集めて、より良くするために勉強を惜しまないことが大切だと感じました。

【おすすめ読書】才能を引き出した情報空間

Wed, 27 Mar 2019 00:00:00 GMT

さまざまな著名人に図書館の活用術について、インタビューした内容を書いた本です。

著者は「図書館情報学」を専門としており、その観点から図書館の利用やこれからのあり方などを考えています。著名な方々の子供の頃の図書館での思い出や、印象に残った本などがどんどん出てきます。

よく図書館を利用する方であれば、これからの図書館に期待することなどの発想の種になるのではないかと思います。あまり図書館を使わない人にとっても、久しぶりに行ってみようかなという気になれたらいいのですが、どうでしょうか。皆さん研究者や学者のような使い方をしているので、一般的な人には理解しにくいかもしれません。図書館に興味を持ってもらえたら良いと思います。

専門用語や小難しい表現や引用などに細かく注釈が書かれています。かなり親切に書いてあるので、図書館情報学などに詳しくない人でも読める用になっています。

図書館の思い出

もちろんですが、本に出てくる人は図書館のヘビーユーザーとでも呼べる人ばかりです。研究のために資料を取り寄せたり、過去の資料を探したりなどの使い方をしています。仕事のための利用という形ですが、インタビューの中では幼少期の本の読み方などについても質問しています。物心ついたときの読んでいた本とか、よく行った図書館とか、小中学校の図書館はどれくらい利用していたかなどです。

以下はわたしが大人になって利用した図書館のことを書いておきます。

地域の図書館

子供の頃利用した図書館は地域の図書館や、小学校の図書館が多いと思います。小学校の図書館はもう入る機会は無いと思いますが、地域の図書館は自由に入れることがあると思います。

久しぶりに行ってみると、場所や地域によっておいてある本が全く異なるのでおもしろいです。お年寄りの人と子供が多く、その町の歴史であったり絵本が多い印象です。

きれいな図書館が近所にあるといいです。実は大学の図書館の中には学生でなくても利用できるところがよくあります。本がいっぱいありますし、大学の研究などで使う難しい本などもあるため勉強になります。

野々市市立図書館

私が住んでいる野々市市にも市立の図書館があります。「カレード」という名前で呼ばれており、新しくきれいな図書館です。自習用のテーブルが合ったり、ホットドックやケーキが食べられるカフェが入っていたりして、かなり快適な施設です。

入館すると絵本コーナーが目に入ります。床に座って絵本を読める空間もあり、小さなお子さんのいる家族にとって利用しやすい形になっています。

料理教室を開けるようなキッチンスペースや、発表を行うような研修室などもあり、多目的に利用できます。定期的にイベントも開かれており、アート展や作家のイベントなどが行われていることがあります。自習用のスペースもあるので、学生が勉強している姿も見受けられます。タブレットの貸出や、動画の視聴などもできる、さまざまな人が利用しています。勉強会や料理教室などのイベントを開催しており、それなりに新しい形の図書館なのかなと思います。

本の貸出については利用カードが必要です。野々市市に住んでいる、または近隣の市に住んでいる人であれば作ってもらえます。免許証など住所がわかるものが必要です。

国会図書館関西館

以前関西に住んでいたときには京都の国会図書館関西館をよく利用していました。かなり広く特殊な雰囲気なのですが、結構快適だと思います。大きいバッグは持ち込めずロッカーに預けるルールだったりしますし、建物もかっこいいです。

私は雑誌を読むためによく使っていました。さまざまなジャンルの雑誌がおいてありました。IT系雑誌もあれば物理化学系の雑誌も揃っていたので、興味のある人にはおすすめです。普通の本屋にはおいていないようなマイナーな雑誌や専門的な雑誌もあるので良い暇つぶしになります。

かなり多くの本がありますが、基本的には閉架に置かれていて、カウンターや端末でリクエストすることで取り出してもらえます。最近の雑誌とかは開架においてあるので自由にアクセスできます。

貸出は出来ず、館内で読むことになります。必要な部分をコピーしてもらうことはできます。基本的には学生や研究者が研究目的で利用しているようでした。昔の新聞や資料などを調査してレポートを買いているように見受けられました。研修室もあり予約することで利用できます。ご飯を食べるところもあり、学食みたいなところがあります。

入場する際に利用カードが必要で、こちらも住所のわかる免許証などが必要だったと思います。2,3年で更新が必要になるはずです。

アクセスは結構不便で、祝園（ほうその）という駅が最寄りで、そこからバスでいけます。無料の駐車所が利用できるので車があると便利です。

国会図書館ということもあり、他の図書館とはちょっと方向が違うというか、異質な感じがあります。ただここにしかない資料とかもありますし、かなり特殊な空間で楽しいです。もちろん図書館なので騒いだりしてはいけませんが、テンションは上がると思います。

おわりに

私はこの本を読んで、図書館に行きたくなりました。なんとなく居心地もいいですし、何より本がたくさんあります。無料で利用できるので本屋よりも気軽です。

さまざまな図書館が生まれていますが、外国と比べると日本はまだまだ発展途上らしいです。図書館や司書の方たちも、これからどのようにしていくのか何を目指すのかといったことを考えているそうです。個人的には特定のジャンルに特化した図書館が多くなってほしいです。多分歴史とかなら、すでにあるのだと思いますが、より細分化して図書館がたくさんできるとうれしいです。

すでに図書館の活用は見直されている？注目されており、いろいろな場所に図書館が出来ています。これからも積極的に利用して行こうと思いました。

【おすすめ読書】売れるゲームのUI/UX 制作現場の舞台裏

Mon, 25 Mar 2019 00:00:00 GMT

有名なゲームのUI/UXの紹介・分析をして、それらの作成秘話の・ようなものを集めた本です。実際に開発・デザインを行った人へのインタビューなどもあり、同じようにゲームをか作っている人にとっては参考になると思います。ゲームとは関係ない業界の人でも、UI/UXの勉強として参考になる点は多いです。

UXなどの観点としては、ゲームのように達成するとご褒美をもらえることや難易度を決めることは、さまざまな分野に応用できると思います。 UXの勉強としてゲームから参考になるものは多いので、とても勉強になりました。

UIの分野についても、コンシューマーゲーム・スマホなどのモバイルゲーム・アーケードゲームと複数の形態のゲームについて取り上げられています。それぞれの物理的・利用者目線での制約は異なっており、それらに同対応するかといったことが考えられています。この辺の実装方針やデザインの考え方はWEBデザインやその他UIデザインの勉強として役に立つと思います。

UI/UXの基礎知識

設計するにあたり必要な基礎知識の紹介です。それぞれのデバイスによる物理的な制約のことや、利用する傾向が多いユーザー層の説明などが主な要素です。

利用者の年齢層や性別などのデータも載っているため、とても参考になります。それぞれどんな人なのだろうかといった考察も書かれているので、すぐにでも役に立つのではないかと思いました。

利用者のニーズをしっかり捉えること、「どうやって伝えるか」よりも「何を伝えるか」をしっかりと考えることが重要だそうです。これらは広告のクリエイティブ業界でしばしばいわれていることであり、それがゲーム業界でも同じように大切な要素となっています。

UI/UXデザインのヒント

さまざまなゲームのUI/UXが取り上げあられています。「にゃんこ大戦争」や「モンスト」「FF14」など有名なゲームが名を連ねており、それらのデザインにおけるラフ案や検討プロセスなどを知ることが出来ます。

9つのゲームを取り上げているので一つ一つはそれほど深くありませんが、異なるデバイスのゲームを取り上げているため、制約による考え方の違いなどを知ることが出来ます。一つを深く知るのではなく、広く浅く知ることが出来ます。

開発初期のデザインなど、普段見ることは出来ない情報もちらほら載っています。そこから、さまざまな検討改善を経て今のデザインにたどり着いています。検討時のプロセスやボツ案など、UI/UXデザイナーにとっては良い教科書になります。意識すべき点や工夫など学べる点ばかりでした。

デモプレイやインタビュー、問い合わせ・ご意見など、実際に遊んだユーザーの声をしっかり聞いてみるということも大切だそうです。やっぱり実際に遊んでくれるユーザーの声が、一番改善すべき点に近く、その影響は大きいそうです。ユーザーの声に耳を傾けるということの大切さを知ることが出来ます。

おわりに

UI/UXのこれからの話として、「AI」のことや「VRデバイス」などについても触れられていました。新しいプラットフォームやデバイスが出てくるたびに、それらに適応したUI/UXが求められます。

さまざまな制約やニーズを捉えてデバイスにあったUI/UXをつくる、そのために必要な考え方やプロセスが詰まった本でした。事例はすべてゲームのものですが、ゲーム以外のプロダクトにも取り入れられる考え方が満載でした。ゲーム業界の人はもちろん、それ以外でもUI/UXについて勉強したいという人であれば大いに参考になる本だと思います。

【実践技術書】スラスラ読めるPythonふりがなプログラミング

Fri, 22 Mar 2019 00:00:00 GMT

プログラミング言語Pythonの入門書です。

プログラミングをやったこと無い人向けの、超入門書になっています。この本独自の伝え方としてプログラムにふりがなをつけることで、わかりやすくしています。

内容的にもかなり初心者向けになっており、プログラミングの基礎的なことを学ぶことが出来ます。

似たような本としては以前紹介した【実践技術書】スラスラ読める JavaScript ふりがなプログラミングなどがあります。

IDLEを利用してプログラムと実行を行う

Pythonのインストール方法から説明されており、Pythonとともに利用できる「IDLE」を使ってプログラムの記述・実行を行います。

特にコマンドプロンプトやターミナル・コンソールなどを使うことはありません。実行環境としてはWindowsとMacが想定されています。といってもPythonなのでLinuxとかでも問題なく実行できます。

実際にプログラムを作って何らかのサービスを動かす場合は、サーバ上で実行するなどややこしいことになりますが、一旦基本的なことを学ぶので簡単に実行できる環境を利用しています。

ライブラリの使用まで体験する

この本で学ぶことはプログラミングの基礎的なことです。 if文やfor文に加えて、関数を作って利用したりします。配列や辞書などの型も利用します。最後の章ではライブラリの利用も体験します。

これらの基礎を使っての応用については、この本では取り上げられていません。別の本を参考に進んでみるのが良いと思います。

if文やfor文など、Pythonの基礎と言うよりもプログラミングそのものの基礎を学ぶことになります。ですので、プログラミング歴0という人に向けた内容になっています。

すでに別言語でのプログラミングの経験があるのであれば、別の本を参考にした方がいいかもしれません。

サンプルプログラムも全てダウンロードできます。ただ、自分で写経することも特に苦痛に感じないくらいの量ですので、移して理解するのがおすすめです。

プログラムにふりがながついている

このおかげでプログラム経験が無い人でも理解できるようになっています。すべてのプログラムにふりがながついているのでかなり親切です。

エラーメッセエージにもふりがながついているので、エラーの読み方をここで理解しておけると良いです。なんで動かないのだろうといったことをしっかり理解できると、問題解決がはかどります。

プログラマの最初の仕事はデバッグなどから経験することになるのではないかと思います。ですので、エラーを解決できる用になっておくことは、スタートダッシュで有利になるのではないかと思います。

おわりに

ふりがなシリーズはほかにもいくつかの言語で展開されています。これから更に増えていくかもしれません。

入門書としてはかなり親切なので、興味ある言語を選べばいいです。プログラミングをやったことあるという人にとっては、もう少し具体的な本を選んだほうが速いかもしれません。

子供の学習用とかにもいいですし、わからない人に教えるための伝え方の参考として読むのもおすすめです。

UbuntuでUnityをインストール

Tue, 19 Mar 2019 00:00:00 GMT

以前からUnityを使ってみたいと思っていました。しかし、WindowsとMac用のサポートしか無いようで、Linux版は開発中？サポートしていないようだったので様子を見ていました。

今回、Unity Hubを使うことで安定してインストールできる、開発段階だがLinux用のUnityも利用できるようだったので試しにやってみました。

結果としては無事にインストールできたようです。これからチュートリアル等進めてみようと思っています。以下にインストール方法を記載しておきます。同じように考えている人は参考にしてください。

Unity Hubのダウンロード

以下のページでダウンロードしました。
https://forum.unity.com/threads/unity-hub-release-candidate-0-20-1-is-now-available.546315/

自分のOSのリンクをクリックしてインストールします。「UnityHubSetup.AppImage」というファイルがダウンロードできます。

実行権限を与える必要があるので以下コマンドで権限を変更しました。

chmod 764 UnityHubSetup.AppImage

権限与えたら実行しましょう。あとは質問や規約などを読みながら進めれば問題ないです。ちなみに私がインストールしたUnity Hubは「1.6.0」でした。

Unityアカウントの作成

Unityのアカウントが必要なようです。個人の利用であればとりあえず無料のプランで試してみましょう。追加のサポートやトレーニングなどが受けられませんが、一旦問題ないです。

メールアドレスとアカウント情報、パスワードを入力してUnityIDを作成します。このIDを使ってログインすればオンライン上でプロジェクトの管理などができます。

ホームディレクトリに「Unity」ディレクトリが生成された

インストールが終わればUnity Hubが表示されます。最初は空っぽです。ここから「Installs」タブでUnityEditterをインストールします。複数のバージョンを利用できるようです。「~/Unity」以下のディレクトリにバージョンごとにインストールされます。パスからUnityEditterを実行することでも、任意のバージョンを使えるようです。とりあえず最新バージョン「2018.3.9fi」をインストールして設定しています。

プロジェクトを作成する

「新規」を選択してプロジェクトを作りましょう。プロジェクトを作成するディレクトリを選択できるので、任意の場所に作成します。

次からはプロジェクトを選択することで、UnityEditterを開くことができます。

おわりに

ここまで特に躓くことなく簡単にできました。現在チュートリアルを進めていますが、特に問題はなさそうです。この後はアプリの構築・ビルドまで一通りやってみて、躓くことがないか確認してみようと考えています。

Unityのチュートリアルを試す

Tue, 19 Mar 2019 00:00:00 GMT

UbuntuでUnityをインストールの記事の続きです。 Unityが無事にインストール出来た様子なので、チュートリアルを試してみました。

初めてのUnity 球転がし

結論を先に言うと

結論、開発は問題なくできそうです。チュートリアルを進めるに当たっては問題なく出来ました。これから進めていくうちに問題に当たる可能性がありますが、何か合ったら共有したいと思います。

チュートリアル

いくつかあるようでしたが、Github上に公開されているものを採用しました。動画になっているものなどもあります。今回は自分のペースでやりたかったのでドキュメントになっているものを選びました。

ざっくりとのチュートリアルの内容は、玉を転がしてアイテムを集めるゲームを作ります。チュートリアルということもあり、飾りっ気がないシンプルなものが出来ました。

基本的な要素の作り方や、コンポーネントの追加、プレハブ化といったことを学習できました。本格的にやってみたい人は、Unityに関する本を購入したり、Web上のドキュメントを参考にして真似してみるのがいいと思います。

LinuxでもUnity開発ができた

以下の構成で、チュートリアルを進めていきます。

プロジェクトの作成
ステージを作成
プレイヤーの移動
カメラを動かす
アイテム回収の追加
ゲームのuiを追加する
ゲームのクリアを追加する
障害物とリスタートの追加

特にうまく行かないところはありませんでした。Linux でも問題なくUnity開発が出来ました。良かったです。

Unityについても理解を深めていこうと思います。

おわりに

Linuxでも無事に開発できることがわかり良かったです。次はAndroid用のアプリにするためにビルドができるのか実験しようと思っています。

Linux上でビルドが難しければ、WindowsとMacでビルドすればいいだけなのですが、一度試してみようと思います。

UnityもそうですがReactNative等のクロスプラットフォームで開発できるというのはとても便利です。もちろんネイティブではないことでいくつか制約があるのでしょうが、開発も積極的に進んでいるそうなので、徐々に解決されているようです。

どこまで出来てどこから出来ないのか正確な情報はありませんが、簡単なものであればそれほど困ったことはありません。

始めて作ってみるとか概要の勉強という段階においては、このような環境で作ってみるのが手っ取り早くてよいのと思います。何より動くものを作るぞというモチベーションが高まるのでやっていて楽しいですね。

【おすすめ読書】筆ペンで描く鳥獣戯画

Mon, 18 Mar 2019 00:00:00 GMT

なんとなくやってみようと思って手にとって見た本です。筆ペンを使って鳥獣戯画を書きます。薄い線をなぞったり、移したりしながら練習できる本になっています。

応用として、さまざまな場面で使えるようなアレンジについても紹介されています。ちょっとしたメモであったり、ラクガキであったりに使うことができるとおもしろいです。年賀状とかお手紙なんかにもいいと思います。鳥獣戯画っぽい書き方を身につけると、どこかで役に立ちそうです。

鳥獣戯画

少し前に人気が上がっていました。京都の博物館とかで公開されたそうで人気だったようです。今は落ち着いたのかと思いますが、たまに見かけますね。

平安時代に書かれた戯画で、その成り立ちや情報についても紹介されています。

基本となるうさぎ・かえる・さる以外にも、他の動物も収録されています。鳥獣戯画には描かれていなかった現代の道具なども、鳥獣戯画っぽいアレンジで紹介されていおり真似することができます。

電話を書けるうさぎとか、入学式の親子うさぎとか、ユニークなものばかりでおもしろいです。

お手本を見たりなぞったり

基本的にはお手本を真似して何度か描くという本です。最初は下書きをなぞる、次はザクッとした輪郭をなぞる、次は枠の中で描く、最後に真っ白な紙に描く、といった感じです。鳥獣戯画を描くのは思ったよりも難しいですが、何故かそれっぽくなります。

書き方には書き順やポイントとなる箇所が載っているのですが、結構盛りだくさんです。ただ、筆ペンで書いていることも手助けとなり、それっぽくなります。

もともとが漫画のような立ち位置なので、ちょっと崩れたり目が寄り目になってしまっても、面白くなります。

なるべく線を細くして筆ペン感を強く出せば、なんとなくですがそれらしく見えるように思いました。

おわりに

暇なときのラクガキとおすすめです。イラストの本格的な練習には物足りないので、息抜きやアイデアの一つとして取り入れるくらいになります。

筆ペンなんて子供の頃依頼触っていないという方にもおすすめしたいです。たまに触ってみると、それっぽいものが抱えるので楽しいです。文字もそれっぽく見えますよね。年賀状なんかを手書きで書いてみるのもいいかもしれません。

【おすすめ読書】UIデザインの教科書

Mon, 18 Mar 2019 00:00:00 GMT

UI/UXの観点から設計について学ぶ本です。

スマホなどのデバイスごとでの考え方などにも重点をおいており、マルチデバイスな考え方を知ることができます。

UIという言葉からもわかるように、WEBなどのIT系の内容になっています。使いやすいインターフェースを学ぶために良い本でした。さまざまな例から学べるものを吸収して、これからの設計に活かしていきたいと思います。

物理的な制約

UIデザインのテクニックを見るよりも先に、スマホやマウスなどの操作デバイスによる物理的な制約を学びます。

現代ではさまざまな制約のもとで、UIが提供されており、使いやすい場面もあれば不便に感じる場面もあります。入力のみでなく、画面や音声などの出力にもさまざまな制約が存在しており、それらについても広く理解した上でUIデザインについて学んでいきます。

人間の認知特性による負荷

人間が視覚から情報を得る際の特性についても学ぶことができます。色や形・動きなどを人間がどのように捉えるのかということをざっくり知ることができます。

これらを踏まえた上で、UIから受け取る負荷、すなわちインタラクションコストを減らすための方法について考えます。具体的には一貫性やシンプル、共通概念といった考え方です。

ナビゲーションとインタラクション

世の中で使われている、ナビゲーションを紹介しています。ヘッダーやスライダー、メニューバーなどさまざまなものがあります。特に実装方法等は書いてないですが、どのような動き・表現なのかを写真にて説明しています。

インタラクション的な表現、ユーザーの操作に対する反応なども書いてあります。本では伝わりにくいものもあるので実際にサイトにアクセスして確認すると良いです。さまざまな表現を使いこなすことはユーザーへの負担を減らすことにつながります。

Webサイトやアプリで使われているデジタルなデザインが主な内容です。

おわりに

具体的な実装方法やサンプルではなく、基本的な技術・概念や言葉の説明となっています。

UIデザイン関連の基本的な知識を身につけることができます。概念から深く学ぶことができますので、しっかりと理解を深めたいという場合によい本だと感じました。

上記にも書いてありますが、具体的な実装方法などソースコードは書いていません。UI/UXの概念を知りたいという方や、設計するに当たっての勉強といった場面で役に立つ本だと思います。

【おすすめ読書】エンジニアのための理論でわかるデザイン入門

Mon, 18 Mar 2019 00:00:00 GMT

文字、色、配置などのデザインの基本について学ぶ本です。

エンジニアのためのとあるように、理論的な説明を心がけています。主な内容としてはWEBデザインに活かせるようなデザインやUIの解説になっています。

UIデザインなどの現場ではわかりやすい・操作しやすいデザインが求められています。情報を整理してから全体のコンセプトを捉えながら組み立てていく意識が必要だと感じました。

デザインは「ビジュアル」「文字」「色」「レイアウト」「飾り」から成り立つ

対象とするコンセプトをしっかり捉えてから、これらのデザイン要素の検討を行います。コンセプトを中心として、これらのデザイン要素に一貫性をもたせるようにします。

伝えたい情報や伝える相手などを考えて、意味のある要素を選び出すことが大切な考え方です。不要な要素を盛りすぎないように気をつけましょう。

デザインに関する基本的な知識を学ぶ

文章が多めで、理論的にわかりやすくなっています。絵や実例を見て考えるというよりも、仕組みや成り立ちから学ぶようなイメージです。フォントの選び方や、良い写真の選び方、黄金比や白銀比のこと、三分割法など、デザインの際によく使われる基本的な知識を身につけることができます。

ファッションからデザインを学ぶ

本の中に度々出てきますが、普段からファッショに気をつけることでデザイン能力を身につけることができるそうです。服の色などはもちろん、形やトーンなど、来ている人の雰囲気や属性から、それに合った服の選び方などさまざまな勉強ができます。自分でいろいろなコーディネートを試すことも大切な取り組みです。

コンセプトをしっかり意識する

デザインをする上で大切なのはコンセプトをしっかり捉えることです。ワイヤーフレームをつくるところからしっかりと行い、情報を整理して伝えたいことをしっかりと伝えられるような意識を持ちましょう。

感覚的なデザインや直感的なデザインよりも、しっかりと理由を説明できるようなコンセプトを持つことが重要視されています。それに沿ったデザインを行うことで、一貫性を保つことができ良いデザインとなります。

おわりに

「エンジニアのための」とあるように、デザインの基礎を情報ベースの説明で紹介した内容です。デザインを普段からやっている人にとっては、もっとメジャーな教科書があるのだと思います。

エンジニアとしては大変わかりやすかったと思います。ただ、この知識を身につけるためには、取り組むことが重要です。良いデザインを真似してみたり、いくつもパターンを作って比較・検討したりなどすることで、能力が磨かれていきます。なかなかその取り組みをやる時間は取れないかもしれません。

本の中では、普段の生活の中から得られる知識が書かれていました。ファッションのことであったり町中のデザインのことです。デザインのコンセプトについて意識しながら生活することで、デザイン能力を成長させていくことができるかもしれません。地道に努力したいと思います。

【実践技術書】Flutter入門

Fri, 15 Mar 2019 00:00:00 GMT

クロスプラットフォームアプリケーションをつくることができる言語「Flutter」に関する本です。タイトルの通り入門書となっており、Fluttrを使ったことが無い人向けの内容になっています。

全くのプログラミング初心者ではなく、他言語でプログラミング経験があるレベルの人が対象です。

以下の記事で以前紹介している「React Native」と立ち位置的にはにています。使用する言語や仕組みが違いますが、どちらもクロスプラットフォームのスマホアプリをつくることができます。
【実践技術書】React Native 入門

利用する環境

インストールの方法も丁寧に書かれているので、それに従って進めれば問題ありません。Windowsとmacの手順が記載されています。

Flutter SDK
Flutterでの開発に必要なものが大体ここに入っています。利用するDartという言語や他もろもろです。
Android studioまたはVisual Studio CodeまたはXcode
環境と好みによって好きなものを使えます。プラグインなどの設定方法も書かれていました。
基本的にはAndroid Studioがおすすめされています。軽快さを求めるならVisual Studio Codeです。 FlutterSDKを導入すれば、これらのIDEを使わなくとも開発可能で、例えばテキストエディタでの開発も可能です。

仮想デバイスでの確認の設定のために、AndroidStudioでの設定が必要になります。
Flutter Studio
ブラウザ上で利用できるUIデザインツールです。簡単に画面のデザインができて、そのソースコードをコピペすれば手元の開発環境で利用できます。

Flutterの特長

プロジェクト内にはテストコード用のプログラムも生成されており、ユニットテストのことも意識しながら開発ができます。非同期処理もそこに含まれており、さまざまな基本的な処理をすぐに体験することができます。

React NativeではWebと似たようなJSXやstyleの開発ができましたが、Flutterではそういうわけではありませんでした。そのかわりブラウザ上で利用できるFlutter Studioを利用することで、簡単にマテリアルデザインのUIが作れてコード化もできます。使い方は独特ですが、一度使ってみるとおもしろいです。

サンプルで作ったもの

一通りのウィジェットの解説と、グラフィック描写、複雑なUIの実装をやってから、ファイルやデータへのアクセス等を経験できます。それらが終わったら以下のサンプルアプリを作ります。

RSSリーダー
WEB上のサイトからRSSを受け取り、更新や内容をチェックできます。WEBでのリクエストやその返り値の処理を行います。
お絵かきカメラ
カメラで写真を取り、そこにタップでお絵描きして、保存します。カメラへのアクセスやcanvasでの描画。編集などを行います。

結構複雑そうに見えますが、ソースコードはシンプルでわかりやすいです。FlutterでつくるとUIはスッキリわかりやすく、ソースコードもシンプルになると感じました。

おわりに

Flutterは1つのソースコードでiOSとAndroidの両方のプログラムがかけるのでとても便利です。開発はGoogleが進めているので、これからの発展にも大いに期待できます。スマホアプリ以外の分野でも利用できるようになると思います。

React Nativeと比較すると、使い勝手や使えるモジュールなどに差があります。必要な仕様や要件によって選ぶべきです。
ただ「React Native」にはExpoを利用することで開発・ビルドがとても簡単になるので、私個人的にはそちらのほうがオススメです。最初はさくっとアプリを作って慣れてきたらFlutterにも手を出して、比較してみるのがいいかなあと思います。

「クロール済み-インデックス未登録」を解消する

Fri, 15 Mar 2019 00:00:00 GMT

以前書いた記事の続きです。
GoogleSearchConsoleの「クロール済み-インデックス未登録」状態の対処
「クロール済み-インデックス未登録」を解消するための対応をまとめます。

Googleのサーチコンソールでインデックスのカバレッジを確認すると、「除外」にされているものが多かった、という件です。なかでも「クロール済み-インデックス未登録」が多く、どうしたものかと思っていました。

あれから2ヶ月くらい経過しました。対応のおかげで大きく解消されてきています。「除外」状態のページよりも断然「有効」のページのほうが多くなりました。

実際にこれまでに実施した対応と、考察を記録しておきます。同じような現象で悩む人の参考になればと思います。

「クロール済み-インデックス未登録」を解消するために行った対応

除外になっているページを確認する

サーチコンソールの「カバレッジ」から除外状態のページを確認します。具体的にどのページが除外なのか、そこに傾向や特徴はないかといったことを確認しておきましょう。時間が経過して、増えたか減ったかということもちゃんと判断できるようにしましょう。

ここで「クロール済み-インデックス未登録」となっているページは、クローラが訪れたのにもかかわらず、Googleは覚えていない状態になっています。例えるなら、「映画を一回見たけど面白くなかったからすぐ忘れた、他の人にもちろんオススメしない」という扱いになっています。これらを頑張って解決する必要があります。

見出しをしっかりつくる

記事内の「h2」や「h3」などのことです。

昔の記事ではh2に「概要」「結論」「ここがおもしろい」「印象に残ったところ」など、どの記事でも使える共通の項目名を入れていました。しかし、除外への対応として項目名ではなく強調したい内容を入れるようにしました。他のページと同じものを入れると、使いまわしと思われるのではないかと考えたためです。
意味あるのかどうかわかりませんが、この方がメリハリも合っていいかなと思っています。

変更前
<h2>印象に残ったところ</h2>
作者はどうやら〇〇派のようでした。私もそう思います。

変更後
<h2>作者はどうやら〇〇派でした</h2>
ここが印象に残ったところです。私もそう思います。

記事の文字数を増やす

記事の文字数が短すぎると、あまり意味の無いページだと決めつけられてしまう可能性があります。どれくらいが最適なのかという確証はありませんが、私は1000文字以上を目指して書いています。
実際それで問題が解決しているので、一つの例として参考になると思います。

記事数を増やす

引き続きページ数は頑張って増やしています。ブログ全体のコンテンツ量が増えることで、全体の価値が上がるので効果はあると思います。すぐには増やせないので地道に続けることが重要です。

間違っても他人のブログの記事をコピーしたり、同じ内容のページをやたら増やしたりしてはしてはいけません。サイトを訪れる人にとってもがっかりです。そうするともちろんgoogleからペナルティを食らうはずです。地道にコツコツとやりましょう。

インデックス登録をリクエストをする

Googleに対して「もう一度インデックスしに来てください」というリクエストを依頼できます。

サーチコンソールの上部の検索窓にリクエストしたいURLを入力すると、そのページの状態が表示されます。インデックスされなかった理由等も出てくるので参考にするといいです。
特に理由が表示されていなければ、コンテンツの有用性が認められなかった可能性があります。内容を増やすなりしてから「インデックス登録をリクエスト」を押します。

すると、リクエストがGoogleへ送られます。有用なページと認められればインデックスされます。リクエストを送ってからインデックスされるまでには数日かかる印象です。

意識すべきことはやっぱり質と量

結論としては、やはり意味のあるページをつくることを心がけることが良さそうです。文字数や見出しなどを意識しながらページを書いていきます。googleはユーザーにとって価値のあるものを優先して表示したいと思っているはずですので、しっかりとユーザー目線で記事を作成するように心がけましょう。

読みやすく、情報に信頼性があり、読者にとって有益な情報であること。そして、検索して訪れた人がちょうど欲しかった情報を提供できていることが大切です。

今更あまりいないと思いますが、titleやdiscriptionなどのSEO関連のメタタグについて未対応という方は、そちらから対応しましょう。

【おすすめ読書】勉強の哲学

Thu, 14 Mar 2019 00:00:00 GMT

勉強とはどういうことなのか？ということに関する本です。勉強とは今までの自分を失うことだそうです。言い換えると自己破壊だそうです。

取り上げている勉強とは、学校での勉強と言うよりは日々の読書のほうが近いイメージです。そして哲学の本というよりは、勉強や読書を哲学的に捉えて勉強って何？を考える本だと思いました。

私達は周りの環境がつくる「ノリ」に支配されており、それを心地よいと感じています。しかし、勉強をすることで、今いる場所とは違う環境の「ノリ」を知ること、または立ち止まることになり、その結果「空気読め無いやつ」になります。この状況は避けられないものであり、変わるためには必ず必要なものです。

ボケとツッコミであったり、というようなメタファーで解説しており、新しい観点をくれる本になっています。

勉強の目的は

これまでとは違うバカになることです。今までのようなバカなことはできなくなります。その代わりに自由になる可能性を手に入れられます。

勉強によって以下の過程を辿ります。

仲間とバカなノリができる
昔の自分がいなくなる
その先で新しいバカになる

勉強の取り組み方についても書かれています。深追いを続けて完璧を求めすぎるのではなく、ユーモア・目移りに引き返すという考えなど、おもしろい考え方があります。勉強の有限化という言い方で終わるべきポイントを考えています。

勉強法と言うか、読書のコツ・メモのとり方などのアドバイスもあり、参考にすると良さそうです。インプットしたものを書き出すことの重要性についても触れています。勉強することに対して、結構得られることが多いのではないでしょうか。勉強の勉強になると思います。

おわりに

勉強について、考え方が変わるかもしれないです。当たり前のように学校で勉強をしてきましたが、改めて向き合うととても不思議なものでした。勉強についての勉強といった状態になります。この本を読んでいない人に話しても、「何言っているんだろう」となると思いますが、勉強とはそういうことなのだと理解できます。

勉強による自身の変化を「ユーモア」や「アイロニー」などの言葉で捉えています。聞きなれない言葉かもしれませんが、結構わかりやすく説明されています。他にもいくつか哲学的な概念を持ち出してくるので難しく感じることがありますが、基本的にはわかりやすい言葉で言い換えてくれています。結構スラスラ読めると思います。

哲学的な捉え方の入門としても面白い本だと思いました。

React Native + Expoによるアプリの雛形

Thu, 14 Mar 2019 00:00:00 GMT

React NativeとExpoを利用してクロスプラットフォームなアプリを作成しています。

とりあえず起動できるだけの雛形があるので、まとめておこうと思います。この雛形を参考にして立ち上げればとりあえず動くので、ここから必要な機能を作っていくことができます。

同じようにアプリ作ってみようという人は参考にしてみてください。

最低限導入しているもの

この雛形では最低限の機能として以下が使えるようになっています。それぞれの詳細は各ドキュメントを確認してください。

Admob
広告を表示するために取り入れています。広告出す場合はプライバシーポリシーの記載が必須です。無いとストアから削除されるので気をつけましょう。

Admobのアカウントを作成して、広告IDを取得することで利用できます。
React Navigation
タブなどによる画面遷移をサポートしてくれます。なくてもアプリは作れますがあると便利です。
Style
コンポーネントの見た目をまとめて定義するのに使います。こちらもなくてもアプリは作れますが、スタイルの管理がややこしくなるので、間違いなく使ったほうがいいです。
とりあえず別ファイルに切り出して実装する方針にしています。

create-react-native-appを実行する

コマンドラインでcreate-react-native-appを実行します。コマンドがまだない場合はnpmでインストールしましょう。react-nativeやexpoも必要なのでinstallしておきます。

上記のコマンドを実行すると必要な雛形ができます。そこに今回紹介する雛形を取り込めば、とりあえず動くものになります。npm startを実行すればexpoによって実機での確認ができます。

実機にExpoというアプリをインストールしておく必要があります。ストアで検索して入れておくと良いです。

以下の記事で取り上げていますので参考にどうぞ
React NativeとExpoでアプリをリリース

雛形

app.js

React-Navigationを利用しています。コンポーネントとしてページを作成して、設定することになります。ソースを見れば直感的にわかるかなと思います。

スタイル定義、プライバシーポリシーページ、フッター広告枠を外部ファイルとして切り出して定義しています。

import React from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
import { Constants } from 'expo';
import { createStackNavigator,createAppContainer } from 'react-navigation';

import styles from './common/style.js';
import Policy from './common/policy.js';
import FooterAdd from './common/add.js';


// メインコンポーネント
class Home extends React.Component {
  static navigationOptions = {
    title: 'タイトル',
    headerTinColor:'rgba(0, 0, 0, 0.6)',
  };

  constructor(props){
    super(props);
    this.state ={};
  }
  _keyExtractor = (item, index) => item.id.toString()

  render() {
    return (
      <View style={styles.container}>
        <Text 
          style={{paddingBottom:30}}
          onPress={() => {
            this.props.navigation.navigate('Policy');
          }}
        >
          プライバシーポリシーはこちら
        </Text>
        <FooterAdd/>
      </View>
    );
  }
}


const RootStack = createStackNavigator(
  {
    Home: { screen: Home },
    Policy: { screen: Policy },
  },
  {
    initialRouteName: 'Home',
  }
);

common/policy.js

アプリのプライバシーポリシーページです。ページへのリンクを貼るだけでもいいそうなのですが、アプリ内に設置するとして、このように実装しています。

Admobを利用しているので、その部分は明記しています。Firebaseは利用していないので書いてません。必要であれば追加しましょう。

import * as React from 'react';
import { StyleSheet, Text,View, ScrollView , Linking} from 'react-native';

class Policy extends React.Component {
  static navigationOptions = {
    title: 'プライバシーポリシー',
    headerStyle:{color: 'rgba(0, 0, 0, 0.6)'},
    headerTinColor:'white',
  };
  constructor(props){
    super(props);
  }

  render() {
    return (
      <View style={styles.container}>
        <ScrollView style={styles.mainView}>
          <View style={{paddingBottom:100}}>
            <Text style={styles.textTitle}>アプリケーション・プライバシーポリシー</Text>
            <Text style={styles.textDisc}>
              {`本アプリケーションを利用するにあたり、以下のプライバシーポリシーが適用されます。 お客様は、本アプリケーションを利用することにより、本アプリケーション・ポリシーに同意したものとみなされます。
          
本アプリケーション・ポリシーにおいて、個人情報とは、個人情報保護法により定義された個人情報及び特定の個人情報に結びついて使用される個人に関する属性情報（メールアドレス・利用履歴・利用料金等）を意味するものとします。`}
            </Text>
          
          <Text style={styles.textTitle}>個人情報の管理</Text>
          <Text style={styles.textDisc}>
本アプリではお客さまの個人情報を保持するにあたり、個人情報への不正アクセス・紛失・破損・改ざん・漏洩などを防止するために適切な措置を講じ、安全対策を実施し個人情報の管理を行ないます。
          </Text>
          
          <Text style={styles.textTitle}>個人情報の利用目的</Text>
          <Text style={styles.textDisc}>
本アプリでは、広告配信ツールとしてAdMob(Google Inc.)を使用しており、AdMobがご利用者の情報を自動取得する場合がございます。取得する情報、利用目的、第三者への提供等につきましては、以下の広告配信事業者のアプリケーション・プライバシーポリシーのリンクよりご確認ください。
          </Text>
          <Text style={styles.textDisc} 
            onPress={() => {
              this.props.navigation.navigate('SelectStop');
              const url = 'https://policies.google.com/technologies/ads?hl=ja'
              Linking.openURL(url).catch(err => console.error('An error occurred', err));
            }}
          >
          {`Google 広告に関するポリシー
https://policies.google.com/technologies/ads?hl=ja`}
          </Text>
          <Text style={styles.textTitle}>個人情報の第三者への開示・提供の禁止</Text>
          <Text style={styles.textDisc}>
          {`お客さまよりお預かりした個人情報を適切に管理し、次のいずれかに該当する場合を除き、個人情報を第三者に開示いたしません。
          
・お客さまの同意がある場合
・法令に基づき開示することが必要である場合
・司法または行政機関から開示を求められた場合`}
          </Text>
          <Text style={styles.textTitle}>個人情報の安全対策</Text>
          <Text style={styles.textDisc}>
個人情報の正確性及び安全性確保のために、十分なセキュリティに万全の対策を講じ、万が一、問題が発生した場合は、速やかに適当な是正対策をします。
          </Text>
          <Text style={styles.textTitle}>法令、規範の遵守と見直し</Text>
          <Text style={styles.textDisc}>
保有する個人情報に関して適用される日本の法令、その他規範を遵守するとともに、本ポリシーの内容を適宜見直し、その改善に努めます。
          </Text>
          </View>
        </ScrollView>
      </View>
    );
  }
}

export default Policy;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  mainView: {
    backgroundColor: '#EEEEEE',
    paddingTop:10,
  },
  textTitle: {
    fontSize: 14,
    marginLeft:15,
    marginTop: 30,
  },
  textDisc: {
    fontSize: 18,
    marginLeft:30,
    marginRight:30,
    marginTop: 10,
    color: 'rgba(0, 0, 0, 0.6)',
  },
});

common/style.js

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  list: {
    width:"100%",
    padding:20,
  },
  
  listItem: {
    flexDirection:"row",
    borderColor: "rgba(0,0,0,0.2)",
    borderBottomWidth: 1,
    paddingHorizontal: 10,
    paddingVertical:10,
    alignItems:"center",
  },
  
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    color: 'rgba(0,0,0,0.6)',
  },
});

export default styles;

このファイルでスタイルを定義して、利用します。コンポーネントの呼び出し時に指定することもできますが、このファイルにまとめておいたほうがラクなのではないかと思います。

複数のスタイルを併用する場合は配列にして渡すと、両方のスタイルがコンポーネントに反映されます。

<Text style={[styles.list,styles.listItem]}>テキスト</Text>

common/add.js

import React from 'react';
import { View } from 'react-native';
import { AdMobBanner } from 'expo';

class FooterAdd extends React.Component {
  render(){
    return (
      <View >
        <View >
          <AdMobBanner
            adUnitID="Admobで広告を作成してそのIDをここに設定します" // Test ID, Replace with your-admob-unit-id
          />
        </View>
      </View>
    )
  }
}

export default FooterAdd;

上記をimportしておけば、コンポーネントとして利用できます。限りなく簡潔になっています。とりあえずアプリの下部にAdmobを出すだけならこんな感じでしょう。

app.json

app.jsonは以下のようになります。バージョンなどは自身の環境で合わせてください。 slugなどの文字列も自身の使いたいものに変更します。

app.jsonを設置すればexpo-cli buildコマンドでビルドもできます。実際にストアにアップロードするAPKが生成できます。

とりあえずAndroid版についてはこんな感じでリリースまでできることを確認しました。iOSについても引き続き実験しようと考えています。

{
  "expo": {
    "name": "アプリの名前",
    "slug": "expoで表示されるslug",
    "privacy": "unlisted",
    "sdkVersion": "32.0.0",
    "platforms": [
      "ios",
      "android"
    ],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "android": {
      "package": "google play storeで表示されるID",
      "permissions": [],
      "versionCode": 1
    },
    "ios": {
      "supportsTablet": true
    }
  }
}

おわりに

React NativeとExpoを利用したアプリの雛形をまとめました。これを使えば、とりあえず動くものを見ながら開発できると思います。実際にはいろいろなコンポーネントを利用しながら開発することになると思います、よく使うものは別ファイルにして切り出すなどして再利用性を高めておくと良いです。

Expoを利用すると簡単に開発ができるのでとても便利です。ネイティブなコードを使った開発もやってみたいのですが、大変そうなのでしばらくはこの環境で進めようと思います。 React Nativeと比較される存在としてFlutterというものもあります。こちらも一度試してみます。

Androidアプリがポリシー違反によりストアから削除された

Wed, 13 Mar 2019 00:00:00 GMT

タイトルのまんまですが、以前作成したアプリのっティ時刻表が、突然Google Playストアから削除されました。

結論としては、すでに解決・解消済みです。ポリシーの内容をアプリ内に設置することで解決して、現在問題なく公開されています。

突然のメールが届く

以下のようなメールが届いていました。特に事前告知とかはなく、いきなり削除でした。実際にはユーザーから見えなくなっている非公開の状態です。データが削除されたりしていないので、管理画面は見ることができます。

〇〇 デベロッパー各位

審査の結果、 □□は、Google Play ポリシーに違反していると判断されたため、Google Play ストアから削除されました。
このアプリは、ポリシーに準拠するアップデートをご送信いただくまで、ユーザーに配布、販売されなくなりますのでご了承ください。

削除の理由:  Android 広告 ID の使用ポリシー及び Google Play デベロッパー販売 / 配布契約 4.8 への違反

アプリが個人情報や個人情報や機密情報を扱う場合、有効なプライバシーポリシーを掲載して頂く必要があります。
お客様のアプリは Android 広告 ID の収集及び転送を行うことが確認されましたので、プライバシーポリシーを掲載して頂く必要があります。

アプリが Android 広告 ID の収集を行う場合、有効なプライバシーポリシーを Play コンソールの所定の箇所及びアプリ内に掲載して頂く必要があります。
プライバシーポリシーの中でユーザープライバシーについて明記し、URL が有効であることをご確認ください。

Google Play Consoleはこんな感じ

管理画面では「削除されたよ」という情報が上部に表示されてました。

アプリ用のプライバシーポリシーを設置

とりあえずポリシーのURL設定しなくてもストアで公開ができたのでそうしていましたが、やっぱり必要ということでした。ときに広告表示にAdmobを利用しており、それがAndroid広告IDを取得するので、必ず必要ということでした。

対応は以下の2点です。

プライバシーポリシーを作成してストアのアプリ情報にURLを登録
いろんなサイトや他のデベロッパーの方を参考にして、以下の画面を用意しました。
アプリケーション・プライバシーポリシー
私のアプリでが広告配信のためにAdmobを利用しているので、そのことは必ず書く必要があります。その上で、ストアのアプリ情報にURLを設定します。
アプリ内にプライバシーポリシーを設置
アプリ内に上記ページへのリンクを設置するのでもいいらしいのですが、何故かまたすぐ削除されました。リンクがわかりにくかったとか、外部ブラウザで開くのが良くない？のかと思います。
ですので、アプリ内にページを作成しました。書いてある内容は上記にプライバシーポリシーと同じです。

解決

アプリのアップデートを行うと、削除状態が解消され公開されます。これで問題なければそのままで、引き続き問題がある場合は、次の日にはまた削除状態になっていました。現在は公開状態なので、問題は解決できたようです。

Googleから届くメールを読めば解決できるような簡単なものなので、落ち着いて対応すれば問題ないです。似たような状況になった人は参考にしてもらえばと思います。

自己分析用の質問集がすごい『メモの魔力』

Mon, 11 Mar 2019 00:00:00 GMT

SHOWROOM代表の前田裕二さんが書いた本です。

日頃から常にメモを取る癖があるそうで、そこから学んだことやそのやり方を紹介しています。

大きく言えば、いつでもどこでも何でもメモをとることと、聞いたことやわかったことに加えて応用や具体的な使い方も一緒に書くことが大切です。

アイデアを記録するためのメモ

日常で思いついた些細なことをメモします。常に持ち歩いており、何か発見したことをその場でメモするそうです。内容に加えて抽象化したことやその応用なども一緒に書き込みます。ただ記録するのではなく、その場で思考して思いついたことも書いています。気づきであったり抽象化した内容であったり、言い換えた名前で合ったりします。

メモの使い方や書き方は本に詳しく載っていますのでそちらを参考にしてください。色の使い方とか、見開きにして使う際のコツなどが書かれています。本の中には著者のメモの写真等も載っているので、参考になると思います。

自分を知るためのメモ

人生の軸を見つけるためにもメモを利用しています。すなわち自己分析を行うということです。今やりたいことや将来の夢などをメモとして書き出し、未来の予定などを作っていきます。

メモに書き出していくことで寄り具体的になりますし、見つめ直す時間ができます。取るべき行動を具体化・言語化することでモチベーションを高めることにもつながります。

巻末には自己分析用の質問

自己分析を行うための膨大の数に質問が載っています。大学のときの就活の際にやってから、それっきりという人が多いかなと思います。著者もこれをこなしたそうです。自分自身を知るために、時間を取って取り組んでみると良いです。

他にも、沢山の人にSNSで聞いた「人生の軸」の紹介があります。自分にとっての人生の軸は何かを考えてから、一通り目を通してみると何か発見があるかもしれません。

おわりに

メモを取ることのパワーとそのやり方が乗っており、積極的に取り入れたいテクニックだと思いました。新しいことを知ったときには、その用法や応用をしっかりとイメージして記録しておことが大切なようです。そうしないと、せっかくの知識も使われずに忘れられていくだけになります。

プログラミングで新しい技術や知識に触れることは多いですその都度何に応用できるか、どんな使い方が思いついたかを残しておきたいと思います。

日常から得られることや気付きは、見逃しているだけで本当は山ほどおちているのではないかと思います。それらを見逃さずに何かに活かすためにも、細かくメモを取り続ける癖をつけておくといいかなと思いました。

【おすすめ読書】観察力を磨く名画読解

Wed, 06 Mar 2019 00:00:00 GMT

数々の名画を始めとするアートに対して分析を行うことで、知覚の技法と呼ばれる4つの能力を身に着けます。美術館などに行って絵が見たくなるとともに、いろいろなところで観察力を発揮したい欲求が湧いてきます。

この本では「知覚の技法」と呼ばれるものが登場します。それは、大きなくくりで言えば観察・分析・伝達・応用の4つの核を持っています。

FBIの訓練や医者の指導などにも用いられているらしく、エピソードの中には物々しいものもあります。ですが、あまり身構えずにラクな気分で読んで問題ありませんでした。基本的にはアートの知識など全くない状態でも読むことができます。

絵や物事から核となる情報を見つけることはもちろん、優先順位をつけて整理すること、結論を導き誰かに伝えるところまでが一連の技として紹介されています。「見つけること」と「伝えること」の比重が同じくらいになっており、さまざまな場面で活かせる内容だと感じました。

なぜアートなのか

最新の脳トレとかでもいいのでしょうが、アートから学ぶことには理由があります。

昔から存在しているため何が書かれているのかが明らかになっていること、「途方もない量の経験と情報の蓄積である」ことが主な理由です。鑑賞者に対して平等に存在しており、話しかけてくることもなければ動くこともありません。解釈にかかわらず常にそこに存在します。

普段、私達は無意識に緊急度の高いものに注目してしまいます。何気ない日常や平凡に見える絵画の中におもしろいことが潜んでいます。そのことに気づかせてくれました。

アートには明確な解答があるが、自由な解釈を行うことができることもアートを題材にする意味になっています。

能動的に観察する

漫然と眺めるのではなく、頭を使って積極的に情報を収集します。能動的に観察を行う、すなわち見るだけでなく観察することが必要です。

人間は無意識に個人ごとの「フィルター」を持っており、同じものを見ても認識しているものが異なります。自分の見方が正しいのかどうか、他者にはどう見ているのかといったことを常に意識しましょう。自分と異なる見方があること、それを受け入れる寛大さをもつ必要があります。

この「フィルター」は自身の経験に基づいて生成されており、判断の原因となった要素について考えることでフィルターの影響を軽減できます。昔の経験、育った環境や場所、最近合った印象的な出来事などが原因であり、それを思い返すことが効果的です。ちなみに、幼い子供は経験が少ないためフィルターも弱いそうです。

自分の目で見た後に外部の情報や意見を参考にして、もう一度改めて見る、これが正しい見方に近づく方法です。自分のフィルター越しで見た解釈と、他の人のフィルターで見たときの解釈を比べてみましょう。自分が色眼鏡をかけていることに気づいて始めて、眼鏡を外すことができます。

観察のポイントは「誰が・何を・いつ・どこで」そして、最後に「なぜ？」を問います。

優先順位をつけて区別する

情報に正しい優先順位をつけるために、日頃自分はどんな優先順位の付け方をしているのかを把握することから始めます。

脳には特徴的なところへ無意識に集中してしまう機能があります。そのため、ありきたりな部分は見落としてしまうことが多いです。重要な情報はそういったところにひそんでいることが多く、それを見落とさないためのコツや意識の方法が書いてあります。

嫌な気分になるアートに向き合う

不安感を煽るアートを分析して的確に描写できるようになると、口にしにくい内容をうまく処理できるようになります。

目を背けたくなる気分の悪いものに、あえて向き合うことで大きく成長できます。行き着く先には、感情をコントロールできるようになり、危機的な状況でも淡々と対応できるようになりますそのことによって、真のリーダーのような振る舞いができると思います。

例えば、今感じているものが主観的な感情なのか、客観的な事実なのかを冷静に判断できれば、コミュニケーションの問題は解決できます。部下や同僚に言いにくいことを伝えるときも、このアドバイスは役に立ちそうです。

3つのR、リピート・リネーム・リフレイムによって落ち着いて解釈することができます。すぐに結論へ急がずに、ゆっくりと一呼吸をおいてから前に進むと良いです。

応用する

未完成の仕事があると、気が散ったり気なってストレスになります。未完成のものを完成したもののように扱う技術を憶えることでこの心配事を減らすことができます。

具体的な方法は、そのタスクの数や内容を確認して優先順位をつけ、対応の計画を立ててしまうことでした。そうすることで、未完成のストレスから開放され、目の前のことに集中できます

おわりに

繰り返し読みたくなる本です。

エンジニアにとっても、仕様を正しく理解できるようになったり、伝えるための文章を書く能力につながります。プログラムを読むときの手助けにもなるでしょう。問題が発生したときにも思い出すことがあると思います。細かい情報を見落とさず正確に優先度をつけて報告できるようになり、嫌な部分から目をそらさずに勇気をだして報告ができると思います。

美術館とか行くのは好きだけどなんか物足りないという方や、自分にはセンスがなくて行く意味ないのだろうかと思っている方に読んでほしいです。絵画の見方が大きく変わりより楽しくなります。ただ、絵を見終わるのに時間がかかるようになると思います。

早速、美術館に行こうと思いました。

【おすすめ読書】沈黙のWebライティング

Tue, 05 Mar 2019 00:00:00 GMT

沈黙のWebマーケティングの続編です。 SEOについて書かれた本です。

客足が遠のいている旅館がテーマで、経営を立て直すためにSEOに注力します。ざっくりとはSEOを意識したオウンドメディアの作り方についてです。

人物の会話がメインで漫画のようにスラスラ読めるので、難しい本はちょっと苦手という方におすすめです。 Web関連の基本的な知識などは省略して、Seoを意識したライティングの内容に絞られています。基本的には前作を読んだ上でこちらを読むのがいいと思います。読んでなくても問題は無いです。

オウンドメディアの運用

本ではサイトのコンテンツの書き直しと、オウンドメディアの作成に取り組むことで、SEO力を上げ集客・宿泊予約を増やすという方針になっています。

お店を経営している方であれば、Webでの集客について考えたときによく出てくる施策だと思います。参考にできるところが多いのではないでしょうか。自分で作成するという場合でも、誰かに依頼して作成する場合でも、両方の場合で参考になることが書かれています。

これからやってみようという方、続けているけど思ったより効果が出ないという方は一度読んでみると良いです。

ライターとしての取材のコツやライティングのコツなんかも書かれているので、ライターの人にとっても大いに参考になる情報です。今時ありがちな引用や著作的な問題についても触れられているので、気をつけておきたいです。

おわりに

漫画調になっているのでサクサク読めます。SEOなどの難しい話が苦手という方でも読みやすいです。細かいテクニックであったり、場面や場合ごとの対策方法などは詳細に書かれていないので、そちらが知りたい場合は別のほなお探したほうが良いです。

SEOライティングの導入として参考にすると良いです。その上で、本に書いてあることを一つ一つ意識して取り組むことができると、効果の改善が見込めると思います。

【おすすめ読書】エクストリームプログラミング

Tue, 05 Mar 2019 00:00:00 GMT

より良いソフトウェア開発のために考えられた「エクストリームプログラミング」という考え方です。

ペアプログラミングやTDDなどがメジャーな例でしょうか。それ以外にもいくつかの手法があり、適した場面で導入していくことで、寄り効率よく快適なソフトウェア開発活動を行うことができます。

少し前の本ですので、すでに導入が進んでおり「エクストリーム」と言うほど突出したものではなくなっています。それでも、まだまだ取り入れられていない現場もあれば、忘れられているような原則もあると思います。すべてそのまま取り入れればいいわけではないですが、こんなのもあったなあと思い出して、一度検討してみるのはいかがでしょうか。

エクスストリームプログラミング

ざっくりの概念的にはコミュニケーションやフィードバック・柔軟性を重視するような考えです。そのためにいくつかの仕組みやルールを儲けることで、意識的にそれらを手助けするような形になります。

古い習慣を捨て新しい習慣を取り入れていくことはエネルギーを使いますが、その分の見返りは十分に見込めると思います。基本的には個人で取り組むものではなく、チームやプロジェクト単位で取り組むものなので、より上位の立場からの働きかけが重要になると思います。

この本では価値や原則についての紹介から、実際に現場で行うべきプラクティスにまで触れています。あまり本が大きくないことと網羅的に紹介しているため、一つ一つの内容は少ないです。詳細な実行方法や手順・ノウハウは他の書籍を参考にしましょう。価値原則の部分は変わらないものであり、一番大切な箇所だと思いますのでしっかり読んでおきたいです。現場でプログラムを書いているエンジニアはもちろん、管理しているマネージャや人事の方にも参考になると思います。

これからエンジニアチームを作ろうとか、プロジェクトを立ち上げようという方にもおすすめです。

この本は完全にエンジニアの環境の本です。デザイナーを始めとする他の職種にもこのような原則とかってあるのでしょうか、知りたいです。

チームでの活動

私もペアプログラミングを体験したことがあります。最初はなれるまでに少し緊張感がありますが、慣れてしまえば快適です。発展形としてモブプラグラミングというものもあります。快適に行うためにはお互いの信頼・尊重であったり、快適なコミュニケーションが大切です。

ペアの2人のレベルが違っていても、互いに得られることがあるのでおもしろい発見もあります。学校でプログラミングの授業をするのであれば、ペアプログラミングの形式がいいんじゃないかなあと思います。二人ペアで何かやるってちょっと珍しい経験でもありますし、協調性とかも学べると思います。

一見遠回りに見えるもの

エクストリームプラグラミングに出てくる施策は、パット見では遠回りに見えたりリソースを余計に使うのではないか？という感覚もあります。しかし、実際にやってみると、手戻りが減るとか不具合が減るとか仕様の共有が快適とか、さまざま利点に気づくことができメリットが大きいです。やってみないと信じられないような大きな効果があります。結果だけに目が向いてしまいがちですが、その過程にも目を向けるとメリットがわかりやすいと思います。実際に取り組むエンジニアにとっても、これは良い印象だと思います。

概念をしっかり理解した上でエクストリーム・プログラミングに取り組むことで、プログラミングがチームで取り組むことであること、何度も書き直していく必要があること、納品して終わりではなくその後も動き続け運用・改修されていくものであること、などが改めて意識できます。

おわりに

このようなエンジニアの環境を良くしよう、という取り組みは常に現れ続けています。最善のやり方というのは時代や場所によって全然違うものなのでしょうが、それを探し続けようという意志はおもしろいです。

プロダクトを作る・納品することのみに注力するのではなく、より良い作り方を探そうという性格もプログラマ特有の考えなのかなと思います。

成長と変化を続けるプログラマの世界はどこまで広がっていくのか楽しみです。

映画を見てITの勉強ができる『「アポロ13」に学ぶITサービスマネジメント』

Mon, 04 Mar 2019 00:00:00 GMT

映画「アポロ13」を見ることでITILの実践方法を学ぼうという本です。もっと大きく言えばITサービスマネジメントについて学ぶことができます。

映画の内容について触れている本でもありますので、ネタバレでもあります。その部分については理解して読みましょう。

映画「アポロ13」とは

アポロ13は、宇宙船で月へ行き地球に帰ってくるまでの実話をもとに再現した映画です。宇宙の旅ではさまざまな事故が発生し、無事に変えることができるのかという状況になります。それを解決していくNASAや宇宙飛行士の事例を学ぶことができます。

ITILを題材にした映画ではもちろんありません。しかし、映画内で発生する数々の問題への対応が、結果的にITサービスマネジメントと似た方式担っているところに着眼しています。さまざまな場面をメタファーとして利用して、ITILの詳細を説明するという方針になっています。もともと面白い映画ですし、ITサービスマネジメントの理解・説明する際のメタファーとしても参考になります。

ちなみにニール・アームストロングが人類で初めて月面に着陸したやつはアポロ11号です。 13号は途中で事故が起こり月面着陸は断念、しかし、さまざまな危機を乗り越え乗組員が無事に地球へ帰ることができたやつです。

ITILとは

ITサービスマネジメントの教科書的な存在です。
ITIL：IT Infrastructure Library

英国政府が1980年代にまとめた成功事例集です。現在では改訂され、ITサービスマネジメントのベストプラクティスという立ち位置になっています。

戦略・設計・移行・運用の4段階のライフサイクルとして捉えています。戦略や運用の知識が多く、具体的な技術などは出てきません。SEの人でも興味のある人とない人で別れるような印象です。

アポロ計画の背景

映画では語られないアポロ計画の細かい知識などが書かれています。映画を見るときの予備知識として、参考になります。ソ連とアメリカの宇宙開発における関係や、以前の実験や成果などが紹介されています。純粋に映画を見る前の知識としても面白いです。

インシデント管理

映画の中ではインシデント対応の箇所の盛り上がりが大きく見どころです。基本的にはこれらのエピソードからさまざまな考察をしていくことになります。宇宙船ではさまざまな問題が発生します。搭乗員の命に関わるような緊迫した状況で、管制センターとやり取りしながら冷静に対応を行います。実際のインシデントでは、原状復帰を急いで行うのか再発防止のために根本原因を調査するのかといった選択を行います。その時の焦りや困惑は似たものがあるのかなと思いました。

ITILに即していないところもある

SLAなどの約束事については、映画の中では詳細に語られていません。本の中でも、このあたりの約束事はITILに沿って進められてはいなかったのかなと予測されています。このように、いくつかITILの参考にならない部分もありますが、それに関しては「もしもNASAがITILに沿って進めていたら」という形で解説されています。

「あの時ああしていれば」という反省から次に活かしていくことは、サービス運用においては重要な考え方です。PDCAの様に改善サイクルを回していくことは本の中でも説明されていますし、アポロ計画でもそれまでの蓄積された経験や知識を使っています。

運用管理をしていくなかで、より最適な状態に改善していくことを目指しましょう。

おわりに

映画を見ながらITILの勉強にすることは、とてもおもしろい試みだと思います。運用に関する研修とか、新人研修とかに良いと思います。他にも勉強になる映画があるかもしれません。そういった目線で映画を楽しむのも良いかなと思いました。

アポロ13はすごく昔に見たことがあるのですが、このような観点を持って見ていませんでした。そのため、この本のような学びはまったくありませんでした。いい下界なので時間を取ってもう一度見てみようと思います。後日、感想を追記しようと思います。

あとITILの資格とかも勉強してみようと思いました。

【おすすめ読書】論理トレーニング101題

Mon, 04 Mar 2019 00:00:00 GMT

論理的な思考力を鍛えるためのトレーニングです。文章に対して適した接続詞を選ぶ、前提となっている内容を取り出す、正しい論証を把握する、などの問題と解説が主な内容です。

タイトルの通り問題が101問、それぞれに丁寧な解説が書かれています。論理的な思考はさまざまな場面で必要になると思います。この本では文章を読み解く力を学び、論理的に考える力を伸ばすことができます。アルゴリズムとか、図解とか、他にも論理的な考え方を学ぶ方法はあると思います。いろいろなものに触れてみることが大切だと思います。

論理トレーニングは難しくておもしろい

論理的なトレーニングをするための文章問題とは、ざっくりとは国語のテストのようなイメージです。国語のテストとなんてほとんど覚えていませんが、やってみると結構難しいです。「ただし」と「しかし」の違いとか、普段あまり意識していないことであったり、どっちでもいいけど文脈を読むとこっちのほうがいいみたいなものもあります。しっかりとそこに至るまでの文脈と、後に出てくる内容の文脈を踏まえて考えることが必要になります。

先にも書いているとおり、国語のテストのような感覚です。なぞなぞやクイズとは脳の違う部分を使っている気がしておもしろいです。しかも、大人になって語彙力も上がれば、取り扱うテーマも豊富になっていますので、難易度も上がっている印象です。ただ衰えただけという可能性もありますが、実際はどうなんでしょうか。センター試験とか受けてみると如実にわかりそうです。

大人でも仕様の説明や報告には必要

プログラマであっても、仕様書などテキストとして残すための文章を書くことは多いです。そのときに、相手にどう伝わるかとを考えながら書けるようになります。間違って伝わってしまったり、論理的でなくわかりにくい文章になることを防げます。社会人になって早いうちに身に着けたい能力、その中の一つです。そう考えると学校で習った現代文の授業なんかは、とても大切な授業だったんだなあとあらためて感心します。

プログラミングを行う際にも論理的な考え方は役に立ちます。機械に対してプログラムの指示で動いてもらうので、正しく伝えなければいけません。論理的に簡潔で正しい言葉を選ぶ必要があります。この本のような論理的な思考力のトレーニングは、良いプログラムを書くためのトレーニングにもつながります。

読解力のトレーニングになる

読解力という部分でも役に立ちます。文章を作成した人が何を伝えようとしているのか、どこがわかりにくいのかといったことが判断できる用になります。長い文章の中で本当に伝えたい部分を把握することにもつながるので、速読なども得意になると思います。

文章の中で省略されてしまって隠れている前提や本意もわかるようになります。普段なんとなく聞き流している新聞やテレビのニュースを始め、さまざまな言論に対してより深い観点をもつことができます。

演繹や推測といった考え方に触れる

数学や科学っぽいですが、演繹などの書き方についても学ぶことができます。普通に生活しているとほぼ意識することは無いと思いますが、知らず知らずのうちに見ている・使っていると思います。

普段は意識していないため、怪しい文章や間違った文章に対して、なんとなくそうだなと納得してしまうことがあります。この本を読んで意識しながらさまざまな文章を眺めると、あれ？間違っているなとか、最初の話からすり替えられた気がするなとか、指摘の内容がずれているなといったことに気づけるようになります。

おわりに

問題は結構むずかしいです。もちろん人によりますが。大人になってよく文章を書いているという人でも難しいと思います。論理的な思考力を鍛えるためにとてもいい本です。かなり頭を使いますがその分トレーニングになります。

学校でもたくさん学んだように思っていましたが、大人になってもまだまだ学ぶことが多いことがわかります。「大人のための国語の教科書」のような印象で、とても勉強になりました。

【おすすめ読書】ライト、ついてますか問題発見の人間学

Fri, 01 Mar 2019 00:00:00 GMT

問題の本質を発見することに着目した本です。問題の解き方ではなく、正しい回答を得るために必要な問題の本質を発見する方法といった感じでしょうか。

なんだか回りくどい言い方に聞こえますが、問題解決に挑むに当たって重要なことです。問題を解決したつもりが全く解決していなかったとか、思うように行かなかった、ということであれば何かしら参考になる考え方があります。

問題の取り扱い方についてもあります。解決してから後悔することや、解決することで別の問題が生まれることもあります。その原因や回避方法などが書かれています。

おもしろいエピソードとユニークな挿絵によって、面白く読みやすいものになっています。それほど量はなく愉快な挿絵も多いのでさくっと読める本です。

問題とは、望まれた事柄と認識された事柄の間の相違

問題に対して回答する前に、逆に問を行うことで以下を考えます。そのための参考になるような教訓がこの本にはたくさん載っています。

何が問題なのか？
問題は何なのか？
結論は何なのか？
何を解いているのか？
誰の問題なのか？
どこからきたのか？
本当にそれを解きたいのか？

問題に飛びつく前にこれらを考えることで、より真の問題にたどり着けるはず、というものです。このリストはとても参考になります。問題を定義するタイミングで、毎回振り返って読み直してみるのがいいと思います。

ライト、ついてますか

タイトルの言葉は中盤に出てくるエピソードです。解答があまりにも難解で、これでは解決できないとき。解決方法そのものは簡単な操作で各人の頭の中にあることでした。なので、必要な場面・タイミングで問題を思い出させることができればよかった。

長々と解決方法を示すのではなく、気づいていない問題を思い出させることにした。というものです。問題を正しく捉えることで、思ったよりも簡単に解決ができたというエピソードです。

設計者や意思決定者が責任を追っているはずの問題を体験していないこと

偉い人や、管理する人が問題に対してなかなか動かないのはこういった理由があるようです。利用する人たちは問題の存在をはっきりと認識しているのですが、管理する人や責任を持っている人はそれを利用しておらず、問題に気づいていません。そのため、解決への意欲が低く優先度も低くなります。

問題はどこから来たのか

問題を自然や運命から来たものとして捉えてしまうことがあります。自然のルールだからどうしようもないとか。この場合は、あまりに遠くてどうしようもないと感じる、または自然に意志はないので制御もできないと感じてしまいます。

実際には自然が原因でないことも多く、自分自身に原因があることもあります。大きすぎてお手上げに感じていた問題に限って、意外と解決が自分自身の中に存在したということです。

そういった問題についても気づくことができます。

おわりに

問題解決に挑む際の心得であったり、真の問題を探すための良い指針になります。タイトルからはあまり感じないかもしれませんが、有名な本でありとても参考になることが多いです。

エンジニアでもデザイナーでも、タスクの本当の目的やゴールを正しく捉えることができると、より活躍できそうだと思います。

【おすすめ読書】人生は運よりも実力よりも「勘違いさせる力」で決まっている

Thu, 28 Feb 2019 00:00:00 GMT

人間が無意識に判断してしまう「錯覚資産」についての本です。錯覚資産がどういうものなのか、それによってどんな誤った判断をしているのかということについて。そして、それに踊らされない、使いこなすにはどうすればいいのかといったことが書かれています。

錯覚資産

なにか一つでもいい部分があると総合的に良いものだと判断してしまい、他の部分の判断にも影響しています。この判断について脳の中では無意識に行われており、普通は気づくことができません。都合の悪い情報は無視されるか、勝手に書き換えられてしまっています。できるのであれば、錯覚に惑わされずに論理的に考えて判断できるようになるべきです。

ブランドや信用といったものにはこういった錯覚資産が含まれています。ただし、ブランドや信用のない人がこのことを発信しても相手にされません。

地位とか役職にもこの効果があり、偉い人の言うことは正しいと思いがちです。本当にそうなのかはしっかり考えるべきです。こちらも、役職がない人がこのことを発信しても相手にされませんね。

運に左右されずに成功する優秀な人

優秀だから成功したのだと普通なら思います。しかし、実際にうまくいくかどうかの原因は運の要素が大きく、実力が占める割合はそれほど多くありません。昔から優秀だった人が成功したのではなく、成功した人は昔から優秀だったと記憶が書き換えられている状態です。

そして優秀だったという記憶と、成功したという錯覚資産によっていろいろな部分に下駄を履いたような状態になります。そのことにより、色んな面で優秀な人に見えてきます。

結果を見てから、その原因や過程を想像しているという状態です。

コントロール欲

人間は何でも自分のコントロールできる状態にしたいとう欲があります。欲がうまく満たせないときは、さまざまなところに影響が現れますが、むりやりコントロールできている状態だと思い込んでしまうこともあります。

または、コントロールできなかったことから目を背けて、コントロールできていることだけ取り上げて、うまく行っているト思い込むこともあります。

判断が困難な時、思考を放棄してデフォルト値を選んでしまう

難しい判断を行う時、人間は考えることを諦めたくなるそうです。その結果、デフォルト値の方を選択することが多くなります。「現状維持」は一番メジャーなデフォルト値です。ですので、現状維持の選択肢は錯覚の下駄を履いていると思ったほうがいいです。

ただし、常に現状維持とは逆の選択をすればいいわけではありません。論理的に選択肢を分析して選択を行うことが正しいあり方です。考えるのをやめてそのままを選んでいる時や、なかなかうまく行かない環境から脱出できないときは考えてみたほうがいいかもしれません。

難しい判断のときこそしっかり向き合い、考える癖をつけたいです。

無意識が認識を捻じ曲げてしまう

無意識が自分でも知らないうちに、認識をかえてしまいます。

「地位や名誉なんて役に立たない」と言う人は、たいてい地位も名誉も持っていない人です。どうしても手に入らないので、地位や名誉に対する認識を捻じ曲げることで自分自身を納得させています。

このことを人間は無意識にやっています。自覚がないことがとても危なく、間違った判断を取ってしまう原因になります。

このことは、現実を変えることで達成するとこを目指す意識を持つことで、変えられるかもしれません。他にも、周りの人の手を借りることなどで、達成できることもあります。

感情ヒューリスティック

好きなものはメリット大・リスク小と判断してしまい、嫌いなものはメリット小・リスク大だと判断してしまいます。メリット・リスク・好みのどこか一つでも変化すると、他のパラメータもそれに引っ張られて勘違いしてしまいます。これを利用することも、錯覚資産の利用になります。

メリットを伝えるためには好きになってもらうことが重要です。

うまく生きるためには

主張するときは一貫して片寄ったストーリーを語る。そのほうが説得力がありおもしろくなります。何事もいろいろな面を持っているはずですが、それらの情報を全部知るとややこしくなります。一方の面だけを強く語ることで、聞きやすく説得力のある内容になるわけです。

しかし、それとは逆に自分の人生の選択の場合は、徹底的に正しい判断をすることにこだわるべきです。多面的な情報をしっかり聞き分け、論理的に選びましょう。自分の内側と外側を分けて、判断を二重化する必要があります。錯覚資産を使いこなすためのコツです。

おわりに

以下、脳が判断する際の性質です。どれも無意識にやってしまうので自覚することがあまりないです。まずはこのことを知り無意識の存在に気づくことが重要です。それを利用して、錯覚資産を築きあげていくことが成功の秘訣のようです。

一貫性を求める
一貫しているものが好きで、一貫していない場合は記憶を書き換えて一貫だったようにする。
原因を求める
原因があくまでも運であっても、原因を無理やり作ってしまう。運以外の何かを重要視したい。
結論を急ぐ
データが足りなくても、それが全てだと思い込み結論を出す。すぐに思い出せないデータは、なかったものとしてしまう。デフォルト値を選んでしまう。

【おすすめ読書】理科系の作文技術

Tue, 26 Feb 2019 00:00:00 GMT

論文やレポートの書き方です。コツはどれも理系らしい考え方になっています。論理的に考えることは仕事の面でも大いに役に立ちます。

理系の大学で卒検とかをやった場合はたいていこの本に出会っていると思います。以下に参考になりそうな箇所をまとめてみました。

目標規定文を決める

文章を書く前に、何が目標なのかを決めて書き出します。

書いているうちに何について書いていたのかわからなくなったり内容が分散します。それを防ぐために、文章の目標を規定文としてあらかじめ書き出します。

途中で目標を修正したくなる時がきっとありますが、その時は規定分を変更してオッケーです。あくまでも迷わないための規定文です。ちゃんと規定分に書いた目標をイメージしながら書くことができれば問題ありません。

この本では、文章を組み立てるとき構成表のの作り方やコツなども載っています。カードを作って並び替えながら考えたり、スケッチに書いたりしています。情報野集め方なども載っており、レポートを書く際のコツが満載です。学生の頃に読んだのですがとても参考になりました。

文の構造レゲットの木

日本語の文章は、枝葉が先に出てきて最後まで読んでやっと幹の部分がわかります。逆茂木の形になっているそうです。
それに対してわかりやすい文章というのは、幹の部分が最初に書いてあり、枝葉が後から出てきて補足します。

以下のようなレゲットの木と呼ばれる図がとてもわかり易いです。左から読み進んでいくイメージです。

結論を最初に書くとか、枝葉を広げすぎない、一度に荷物を載せすぎないなど、たくさんのノウハウがこの木に詰まっていると思います。

文章を書くときには、この木をイメージしながら書くとわかりやすいです。この本で一番のおすすめの考えです。

両方の良いところを使って書くのが理想なのですが、難しければ思い切ってBの木を目指すのがいいです。面白くはないけど、端的でわかりやすくなります。

わかりやすく簡潔に書く

簡潔になるべく短く書きます。とりあえずこれを意識するところが最初の一歩です。気づくと文章は長くなりがちですし、余計な部分が多くなります。細かいテクニックもいくつかありますが、まずはこのことに気づき意識して改善していくことが効果的です。

さらには、読者がどんな意味に捉えるか、あらゆる可能性を考えられると良いです。これについてはどうすれば一意な文章になるのかという具体的なテクニックはさすがに書かれていません。経験などで身につけていくしかないのでしょうか。それでも短く簡潔に書くということは、そこに少しは近づくことができると思います。

おわりに

卒論などで悩む理系の学生におすすめです。

他にも仕事で作った資料がわかりにくいなど指摘された時、この本を読んでみると改善方法が理解できます。理系らしい書き方をすると、物語を書く場合には面白くなくなると思います。しかし、伝えるため資料などの文章を書くのであれば、こちらのほうが間違いなく良いです。

誤解のないように、簡潔にわかりやすく書くというのは想像以上に難しいです。論理的な思考で考えながら書いていかないと、ややこしくなったり冗長になったりします。理系でも皆ができるわけではないので、この本を読んでしっかり学んでおきたいです。

他にも「考える技術・書く技術」や「文章力の基本」という本を読んでみるのがおすすめです。

React NativeとExpoでアプリをリリース

Mon, 25 Feb 2019 00:00:00 GMT

React NativeとExpoを利用して「のっティ時刻表」アプリを作成しリリースしました。 Expoを利用したビルドから、Android版アプリのリリースまでの概要を記載しています。

同じようにReact Nativeでクロスプラットフォーム開発がしたいという方、Expo使うとどんな感じなのかと悩んでいる方の参考になればと思います。

リリースしたアプリ-のっティ時刻表

結論を先に言うと

React native+Expoを用いることで簡単なアプリですがすぐできました。ビルド・リリースも簡単でした。

Expoを使うことで、プログラムの変更を即時エミュレータやテスト端末に反映させることができる（ホットリロード機能）
コンポーネントが用意されているので、そのまま利用するだけでもそこそこ完成する
広告を表示するためのAdmobのコンポーネントなどを利用しました
最後までExpoを使うことでビルドも簡単、ストア認証用の鍵情報なども管理してくれる
一つのプログラムでAndorid・iOS両方のアプリが実装できる
まだ経験できていないが、Expo使っているとできないことや不便になることがあります
ネイティブAPIについて、Expo側で用意されているものしか利用できません
その場合はビルド前にExpoを取り除いてから、自分で開発してビルドすることになります

概要

Expoを使ってみる
Expoアプリをスタート
実機で動作確認
ビルド
Google Playへアップロード・必要事項を入力

Expoを使ってみる

「Snack」というWebIDEを使うことでお手軽に始めることができます。
最終的にはローカルのIDEをやエディタを利用したほうがいいですが、動作や使い勝手を試してみると言うくらいならこちらでも十分です。

こちらは「React Native 入門」という本を参考に行いました。記事にしていますので参考にどうぞ。
【実践技術書】React Native 入門

Expoアプリをスタート

npmでReact NativeやExpoをインストールします。

npm install -g react-native expo-cli create-react-native-app

そして「create-recat-native-app my-native-app」コマンドで、ローカルにアプリの雛形が生成されます。ここでプログラミングをしてアプリを作成します。

権限関係のエラーでうまく行かない場合はnodeやnpmのバージョンが影響していることがあります。  
私も発生しましたが「nvm」をインストールして、nvm経由でnode・npmを再インストールしたところ治りました。

このタイミングでgithubなどにリポジトリを作っておきましょう。

実機で動作確認

エミュレータを使ってPCで確認することができますが、自身の端末に「Expo」というアプリを入れると実機での動作確認することができます。 https://play.google.com/store/apps/details?id=host.exp.exponent

PC側のアプリの開発ディレクトリで「npm start」コマンドを実行すると、QRコードが表示されます。テスト端末でExpoを起動して、QRコードを読み込むと開発中のアプリが動きます。

Expoアプリ経由でPCとLANで接続し、アプリのソースをダウンロードして実行します。そのため同じネットワーク内でアクセスしないとできません。

ホットリロード機能があり、PC側でプログラムを修正すると即時実機に反映されます。開発の効率がよくなりとても便利でした。Android・iOSどちらでも利用できるようなので、開発の際にはこの方法がおすすめです。

ビルド

app.jsonに必要な項目を追加編集します。

{
    "expo": {
        "name": "アプリの名前", // 日本語で問題なし
        "slug": "Expoで管理する際のslug", // 半角英数とハイフン
        "privacy": "public", // Expoで公開するかどうか
        "sdkVersion": "32.0.0", // sdkのバージョン、create-recat-nativeコマンドで生成したときのまま
        "platforms": [
            "ios",
            "android"
        ],
        "version": "1.0.0", // 
        "orientation": "portrait", // 画面の縦・横持ちの設定 'default', 'portrait', 'landscape'
        "icon": "./assets/icon.png", // アプリのアイコン
        "splash": { // アプリの起動時の画面
            "image": "./assets/splash.png",
            "resizeMode": "contain",
            "backgroundColor": "#ffffff"
        },
        "ios": {
            "supportsTablet": true
        },
        "android": { 
            "package": "google playで管理する際のslug", // 半角英数とハイフンと.
            "permissions": [], // 必要な権限 []にすると最小のものになる、ただしExpoがデフォルトでいくつかの権限を必要としている
            "versionCode": 1 // google playで内部的な管理に必要なバージョン 整数 
        }
    }
}

expo-cli loginコマンドでExpoにログイン、expo-cli build:androidコマンドを実行するとビルドを行うことができます。

このとき、ネット上のExpoのサーバ内でビルドが行われており、ビルドが完了するとAPKをダウンロードするためのURLが表示されます。
https://expo.io/builds にアクセスすればビルド状況やコンソールログなどを確認できます。

実際にExpoのアプリとしてもアップロードされており、サイト内から検索することができます。

Google Playへアップロード・必要事項を入力

Google Play Consoleへアクセスしてアカウントを作成します。

Google PlayでAndroidアプリをリリースするためにはGoogle Play Consoleでdeveloper登録が必要です。初回に25ドルを支払う必要があります。

「アプリの作成」を行い必要な項目を入力します。基本的には画面に沿って入力すれば問題ないです。

以下のものが必要だったので作成しました。画像は基本Figmaで作りました。exportすることでPngなどの形式でダウンロードできます。

アプリのアイコン画像
アプリのスクリーンショット画像
キャンペーンの際に表示するヘッダ画像
アプリの概要テキスト
アプリの詳細テキスト

必要なものを登録すればアプリの公開ができます。公開されるまではしばらく時間がかかります。特定の人にだけアクセスできるテスト用のアプリや、本番リリース用のアプリなどを別々に管理できるので、必要なフェーズに合わせて試してみると良いです。

iOSも

React Nativeで実装しているので、iOSアプリとしても動作します。こちらは現在実践中ですので、終わり次第追記します。プログラムはそのままでiOS用にビルドして、開発者ツールで登録していけば、AppStoreでも公開ができるはずです。

まとめ

React Nativeを使うことで、Androidアプリ、iOSアプリ両方を構築できます。Reactの概念を利用していることも合って、コンポーネントを利用しながら簡単に実装ができました。ただし、ネイティブAPIのすべてが利用できるわけではなかったり、パフォーマンスに少し劣る部分があるそうです。要件を満たせない場合は考慮が必要です。

さらにExpoも利用することで、開発デバック時のホットリロードや、Expoサーバを利用してのビルドを行うことができました。これらを使うと開発がかなり効率化され、簡単になりました。

コンポーネントも豊富に用意されているので、お手軽に実装できた印象です。広告を表示するAdmobなどのコンポーネントもあり簡単に導入できます。今のところは問題なさそうなので、Expoでのアプリ開発を続けようと思います。

【おすすめ読書】アプレンティスシップ・パターン

Thu, 21 Feb 2019 00:00:00 GMT

中世ヨーロッパの「従弟制度」を参考に、ソフトウェア職人を目指すための技術の学び方を知ることができます。

職場で上司から教えてもらう場合であったり、独学で勉強するときのコツやノウハウがパターンとして紹介されています。適した場面・状況でパターンを思い出し活用することができれば、学習の手助けになること間違いなしです。

それぞれのパターンでは、問題と解決方法、行動が具体的に書かれています。プログラミングをやっていれば当てはまるものが結構あると思いますので状況を思い出しながら、こうすべきだったかなあといったことを考えてみると良いです。次に同じような機会が来たときに、パターンを活かして行動できるようになるはずです。

具体的なプログラミング設計テクニックではなく、心持ちや意識がけの内容が多いです。新人プログラマの人におすすめです。

無知をさらけ出す

上司やマネージャーも、あなたが何がわかって何がわからないのかを知りたがっています。わからないことを積極的に質問することで、お互いの理解を助けることができます。

質問をしないことはプライドを守れるかもしれませんが、知りたいことを知るまで遠回りになります。質問をすることで、無知をさらけ出すことになりますが、その内容ができるようになるので、その分成長したと捉えることができます。すなわち、無知をさらけ出すことで学習能力をチームに示すことができます。

最低である

自分より優れた開発者が集まるチームに所属することで、成長する余地を得ます。自分が一番弱いことになるので、誰よりも頑張らなければいけない状態となり、地道な努力が必ず必要になります。周りは自分にとって良き指導者ばかりであり、学ぶことがたくさんあるはずです。

簡単で退屈だけど必ず必要な雑務などを積極的にやりましょう。間違いなく貢献ができ、情熱を発揮できます。そういった仕事から、自分が必要であることを発揮しつつ、努力して強くなっていきます。

学びを記録する

学習した内容はブログやWikiに書きます。昔やったことは覚えていても詳細をおぼえていない、ということはよくあります。まだ覚えているだけマシですが、やったことも忘れているということすらあると思います。そうならないためにも、学習した内容は何らかの形で記録しておきましょう。

いつの日か後輩に教えるときに役に立つはずですし、同じような経験をした仲間とつながるためのきっかけになることもあります。

おわりに

熟練の職人になるために、意識すべきことはたくさんあります。長く続けることも、もちろん必要なことですが、より効率よく学んで技芸を身につけるためには、さまざまな心がけを行いながら進んでいくほうが良いです。

文字の量が多い本ですが、紹介しているパターンの数はそれほど多くありません。さくっと読める内容ですので、定期的に読んでみることをおすすめします。

【おすすめ読書】ここちいい文字

Thu, 21 Feb 2019 00:00:00 GMT

ロゴや書体の実例を集めた本です。そのプロダクト専用にデザインされたフォントが多く、商品やイメージに強く影響されたものが紹介されています。タイトルの通り心地よいというのがテーマのようで、実例もそれっぽいのが集まっています。

文字がテーマ

ロゴの紹介ですが、主に文字が主体となっているロゴが集められています。文字に装飾をつけたり変形させたりして、商品の特長を受け継ぎながら、心地よい印象を与えています。商品の写真と一緒に紹介されているので、見比べてみると良いです。

ロゴ制作の実例

たくさんのロゴの実例が掲載されています。作る際のポイントや商品の特長なども説明があります。機能性・情感・先進性をうまくバランスを取り、秩序をうまく崩すことで「ここちいい」が成り立つそうです。そこに至るまでの考え方が巻頭にかかれていますが、結構難しいです。

ロゴの実例がたくさん

作例がたくさん載っているので、そちらを眺めながら分析すると得られるものがあります。上記の作例を読むことでロゴなどのアイデアの参考になると思いますので、資料として持っておくのも良いです。ロゴを作る過程の作業もちょっとだけですが載っています。関連する仕事をしている人であれば、参考になることがあると思いますので、読んでみるといいです。

フォントはプロダクト用にオリジナルで作っているのでしょうか、見たこと無いような形や装飾のものが多いです。その点についての紹介はないので、多分オリジナルでデザインしたフォントだと思います。

心地よいロゴの作り方

機能性・情感・先進性のバランスによって作られます。秩序に少し混沌を混ぜるということのようですが、私には難しく感じました。いわれてみれば紹介されている作成では、この3つの要素を感じることが確かにできます。こうやって要素を分解して紹介してもらえると理解しやすくて良いです。新しい発見となりました。

日頃から、これはいいなと思ったロゴやデザインはしっかり記録しておいて、落ち着いたときにゆっくり分析して見るとおもしろいのかなと思います。

おわりに

文字の持つ表情や情感などについて考えつつ、可読性・情感などをしっかり抑えたロゴデザインの実例でした。クールで先進性のあるものというよりは、プロダクトに寄り添って属性を受け継いだロゴが多い印象です。

どれも見ていてここちいいものばかりでしたし、本も厚いのですがサクサク読めます。ある程度イメージごとに分類されています。作りたいイメージに沿ったテーマの箇所を開いて、参考にする読み方がおすすめです。

【おすすめ読書】コーディングを支える技術

Wed, 20 Feb 2019 00:00:00 GMT

プログラム言語に共通して出てくる構文や文法について横断的に比較することで、その意味や成り立ちを知ることができる本です。

さまざまな言語をつかって、同じ構文を比較し動作を検証することで、内部的な動作や思想を調べていきます。

比較して検証することは、効率良い学び方として紹介されており、本を読み終わったときには、どの言語でも使えるような普遍的な知識を身につけることができると思います。

次はどの言語を学習しようかなと思っている人におすすめです。

プログラミングの学び方

比較しながら学ぶことが推奨されています。一つの言語で動作した書き方でも、仕様の異なる言語では動かないこともあります。複数の言語で利用してみることでより本質的な理解が進み、効率よく使いこなせるようになります。

この本では上記のような進め方を取っており、文法ごとにいくつかのプログラミング言語での例が書かれています。JavaやRuby,Python,Scala,C言語など、バラエティに富んだソースコードが出てきます。特定の言語の学習ではなく、言語に依存しない普遍的な知識を学んでいきます。

プログラミングの文法や構文

ifやfor、関数の使い方など、基本的な文法からオブジェクト指向や正規表現まで網羅的に取り組みます。特に難しい内容はありませんが、言語ごとの詳細な違いなどを知ることができるので、おもしろいです。

その構文が作られた歴史も振り返って調べていくので、プログラミング言語の成り立ちなども知ることができます。機能や用法などの正しい知識が得られるので、なんとなく動くものが作れるようになっているという人にも、学べる内容は多いです。

整数と浮動小数点

コンピュータ科学でもややこしいところかもしれません。それほど意識しなくてもアプリケーションは作れますが、理解しておいたほうがいいです。型の紹介のパートで簡単に説明があるので、この機会に学んでおくと良いです。より詳しい内容は他の本を読んだほうがいいです。

オブジェクト指向

継承やクラスといった概念の紹介がされています。詳細な思想やデザインパターンには触れていませんが、ざっくりとした概要と歴史的な背景を知ることができます。言語ごとのさまざまな考え方を見ることができ、難しいと思っている人にも興味を持ってもらえるきっかけになるかもしれません。

おわりに

最初にも書いていますが、特定の言語の仕様に依存せずに普遍的な知識を学ぶことができます。仕様は異なっても基本的なところは同じなので、しっかりと勉強しておけばいろいろな言語で応用して考えることができます。

実際に一つプログラミング言語を使えるようになると、他の言語の理解も早いです。ある程度プログラムが書けるようになって、次は別の言語をつかってみようかなと思い始めた人におすすめしたいです。

【おすすめ読書】エンジニアの知的生産術

Tue, 19 Feb 2019 00:00:00 GMT

エンジニアとして効率よく学ぶ方法や、情報を整理アウトプットする方法についてまとめられています。主に学習方法の内容になっています。本や資料を読む際のアドバイスです。

これらの内容をしっかりと学び意識しながら取り組むことで、より生産的な活動ができると思います。意識するべき心がけや学び方を示している内容で、具体的なテクニックやツールの使い方ではありません。

新しいことを学ぶ方法

学び方についてです。本を読んで得た情報を抽象化することで身につけます。簡単にやるのであれば、整理して名前をつけることがおすすめされています。速読や、内容をメモしたりするときのコツを学びます。

何を学ぶか決める

探索範囲を広げること、人から学ぶことで効率良く学べることが紹介されます。他にも、掛け合わせることでより大きな知識として発揮できることに触れています。勉強する対象で迷っているのであれば参考になります。

具体的にこの言語がオススメとか、次はこのフレームワークが熱い、という内容ではありませんでした。

記憶の仕組み

記憶の仕組みについて学んでから、記憶力を高める方法を考えます。繰り返し反復して記憶から取り出すことが重要になります。何度か期間を開けて、繰り返し知識をアウトプットすることにより、記憶の定着が強固になります。復讐する時間をつくってしっかり記憶に定着できるようにしましょう。

やる気が出ない原因はタスクが溢れているため

一度に取り組むタスクを一つに絞る、そのために優先順位をつけることから初めます。その上でタスクの大きさ・全体像を眺めます。タスクの一つ一つに目を向ければちゃんとおわりが見えているのでやる気も湧いてきます。タスクを細かく分けることは見積もりのコツでもありますので、意識してできるようにしておくと良いです。

考えをまとめる

情報のアウトプットについてです。ごちゃごちゃになりがちなアウトプットですが、グループ化することを意識することにより、わかりやすくなります。整理するプロセスについての学びです。

アイデアを生み出すときには、調べ尽くすフェーズであったり磨き上げるフェーズなど、様々な考え方をつかってアイデアを熟成させます。すぐにぽんっと降ってくるわけではありません。アイデアの作り方についてのプロセスを理解しておくと、ふとした時にこういうことか！と感じることができます。

学習方の紹介

エンジニアが業務で悩む問題に加えて、普段の勉強などで意識するべきことについても触れています。それぞれの項目については軽めに触れるくらいですが、幅広い範囲についてカバーしている印象です。具体的なプログラミングのテクニックやソースコードなどは全然ありません。学習法が主な要素です。

タスクを進める上での基礎的なことも書かれているので、経験の浅いうちでもしっかり役に立つ本になっています。エンジニア以外の人であっても内容を参考にすれば、勉強の効率を改善するヒントになるはずです。いつでも役に立つような意識の持ち方が紹介されています。身につけておいて損はしないと思います。

これから本を読むぞ！という方におすすめ

より良い記憶の方法やアウトプットを行う際の参考になります。なかなか覚えられないとか、資格試験などで苦戦している人にも、一度時間を取って読んでみてほしいです。

おわりに

エンジニアとして効率には常に意識したいものです。仕事の効率ももちろんですが、それ以外の勉強や成長といった部分でも効率を意識することは大切です。

闇雲に手を付けるのではなく、効率的なやり方を考えながら進めることができると、他のことにも応用が効くので心がけてみるといいです。

【実践技術書】達人に学ぶSQL徹底指南書

Tue, 19 Feb 2019 00:00:00 GMT

SQLをより使いこなして上級者になるための本です。

SQLをの基礎的なことはわかっている人向けの内容で、応用的な書き方がメインになっています。といっても「CASE」とか「HAVING」といった位のものです。初心者から次のステップにいくために必要といったくらいでしょうか。

各章には練習問題もついています。SQLをどうやって勉強したら良いかわからないと悩んでいる人にもおすすめです。

ざっくり紹介

応用的な位置づけになっています。「CASE」や「HAVING」、結合などを取り扱います。初心者の次のステップというくらいかなと思います。大規模なRDBを普段から取り扱っている人にとっては、特に難しい内容ではありません。簡単なものしか取り扱ったことがなければ、とても参考になると思います。

SQLを書く際の作法なども紹介されています。スペースやインデント、大文字小文字の使い分けなど覚えて置くべきです。現場によってルールはあると思いますが、基本的なルールが書いてあるので参考になります。

他にもRDBの歴史や背景についての紹介もあります。仕組みや裏側についての情報もあるので、知らない方は読んでおくと世界が広がっていいと思います。特に実務では訳には立たないと思いますが、概念を知っておくと理解が深まります。

SQLのチューニングについて基本的なことが書かれているので参考になります。ただし、簡単に取り入れられるものばかりで大きな改善は見込めないかもしれません。SQLの書き方に関するものなので、普段から気をつけておくのがいいと思います。

例えば以下のようなものがありました。そのまますべての環境で該当するわけではないですが、普段SQLを書く際には気をつけようと思います。大きな考え方としては、中間テーブルやソートを減らすこと、インデックスを利用することによって、物理メモリへのアクセスを減らすことを目指します。

サブクエリを引数に取るときはINよりもEXISTSを使うべき

EXISTSならインデックスが有効になる。EXISTSは該当があればそこで検索を打ち切る。 INの場合はサブクエリの実行結果をワークテーブルに格納して、そこから全件走査を行います。そのため負荷が大きいです。

サブクエリを引数に取るときはINよりも結合を使うべき

サブクエリがないので中間テーブルが作られない。インデックスが利用できる

集合演算子のALLを使う

UNIONとかは暗黙的にソートが行われます。重複排除を行うためです。ソートは負荷が大きいです。重複を気にしない、重複が起きないことが事前にわかっているのであればUNION ALLを使いましょう。

DISTINCTをEXISTSで代用する

DISTINCTも重複削除のためにソートが行われます。 EXISTSを使うことでソートせずに重複削除を行うことができる場合があります。

極値関数でインデックスを使う

MAXとMINです。ソートが行われますが、インデックスがあればインデックスのスキャンだけですみます。できるのであればインデックスを対象にスべきです。

WHERE句で書ける条件はHAVING句には書かない

GROUPで集約する後にHAVINGでフィルタリングするか、集約する前にWHEREでフィルタリングするかです。 GROUP BY による集約時にソートが行われるので、先に行数を絞ったほうがよいです。WHERE句ならインデックスが利用できるかもしれません。

GROUP BYとORDER BY で指定するキーでインデックスを使う

GROUP BY とORDER BYで指定するキーはインデックスの存在するキーであれば、インデックスを利用できます。ソートが行われるので、ソートの高速化が期待できます。

索引時に加工しているとインデックスが無効

インデックスを利用するときは、条件式の左辺は裸。

WHERE column * 1.1 > 10ではなく
WHERE column > 10 / 1.1にする

IS NULLをつかった場合はインデックスが無効

インデックスにはNULLは存在しないためです。

非定型をつかっているとインデックスが無効

<>とか!=とかはインデックスが無効です。

ORをつかっているとインデックスが無効

複合インデックスがあるのに列の順番が違う

そのままです。複合インデックスは正しく設計して、正しく利用しましょう。

後方一致、または中間一致のLIKEを用いているとインデックスが無効

前方一致のみ有効です。

暗黙の型変換を行っているとインデックスが無効

オーバーヘッドも発生しますし、良くないことばかりです。正しくDBを定義を確認して明示的に方を変換して扱うようにしましょう。

HAVINGで中間テーブルを減らす

中間テーブルをつかってWHERE句に指定しがちですが、中間テーブル無しでHAVINGでできるのであればそのほうが良い。

INで複数のキーを利用する場合、一箇所にまとめる

キーを結合したり行比較を用いることで、複数のINを一つにまとめられるかもしれません。

ビューで集約関数や集合演算が入っていると速度低下の原因になりがち

集約関数、AVG,SUM,COUNT,MAX,MIN

集合演算子、UNION,INTERSECT,EXCEPT

おわりに

初級者から一歩前に出るための知識が書かれています。練習問題もあるので、しっかり取り組んでおくと実務でも使えて良いです。実際にはデータ合ってのSQLなので、これだけでは役に立たないのですが、基本はとても大切です。

仕様に沿ったSQLを書き、正しくデータを取り扱えるようになるためには経験が重要かなと思います。初心者のうちは仕様書や定義をしっかり参照できるようになることが一番大切だと思います。

【おすすめ読書】Webデザインのロジック

Mon, 18 Feb 2019 00:00:00 GMT

Webデザインの様々な事例を紹介している本です。

ロジックに沿って、各サイトを読み解いており、クライアントの狙い、デザイナーやディレクターが考えた解決策、そしてターゲットの3段階で、デザインを分析しています。

デザインの事例紹介の本

Webデザインの作り方の解説ではなく、事例や案件紹介の本です。たくさんのアイデアに触れることができる上に、その意図が書かれているのでアイデアの素としておすすめです。真似していくつか自分で作ってみるというのも勉強になるので良いと思います。

ロジックで分析

WEBデザインの概要の紹介と、クライアントとターゲットユーザーの設定、そして伝えたいメッセージの狙いとその解決策が紹介されています。すべてのサイトに対してロジックを用いて分析しています。問題解決に至るまでのロジカルな思考を再現しており、提案や設計の勉強にもなると思います。

一通り読み進めることで同じようなロジックが身につき、サイトを見る目も変わってくると思います。

デザインコンセプト

Webサイトをただ眺めているだけでは、その裏側にある解決すべき問題やコンセプトがわからない場合があります。その部分について紹介しながら解説しているので、普段は見えない裏側を覗くことができます。

ブランディングやイメージの部分の解説がされているので、よく知っている商品やサービスでも、意外と思っていることと違ったりします。実際のサイトにアクセスしながら読み込んでみると新しい発見が合っておもしろいです。

WEBサイトの説明などもありパラパラと眺めるだけでもおもしろい本です。キーとなるコンセプトの紹介から、デザインを分析してわかったデザインのコンセプトまで紹介されており、ただ眺めるだけでなく要素の分解もできるので勉強になると思います。

おわりに

この本で学んだアイデアやコンセプトを実務でも使いこなせるようになるといいですが、なかなかむずかしいです。この本の取り組みを真似して、自分なりのロジック研究を行うことで身につくのではないかと思います。ただサイトを眺めるのではなくコンセプトや狙い・解決するためのアイデアを分析しながら、サイトを見て要素を記録する取り組みができるようになると、ロジカルな分析ができるようになっているのではないでしょうか。

【実践技術書】独学プログラマー

Mon, 18 Feb 2019 00:00:00 GMT

プログラマーとして働けるようになるまでの道のりを紹介した本です。「独学」というのがポイントになっており、0から独学でPythonプログラマーになる方法を前提としています。

プログラミングの基礎的なところから仕事の探し方まで幅広くカバーしています。プログラマーの仕事について全くわからない・経験がない人におすすめです。著者の仕事・勉強上での経験談が書かれていることもわかりやすくて良いです。勉強に利用している言語はPythonで、本を通してPythonの知識を学んでいくことになります。

幅広く書いてあるのでそれぞれの内容はちょっと浅めです。すでにプログラマとして経験がある場合はあまり参考にならないと思います。まだ仕事を初めていない学生や、全然違う業種からの転職を考えている人にはおすすめです。

プログラミング入門

この本ではPythonを使ったプログラミングを試します。文法の基礎から始めて実際に動かすところまで行います。未経験の方でもわかるように丁寧に説明しています。

Pythonはインストールさえできればすぐに動かせるので簡単です。インストールの方法など丁寧に説明があるので、なんか難しそうだなと思っている人にも簡単にできると思います。

Pythonはプログラミング入門に適した言語の一つだと思います。文法もわかりやすいですし、なんとなく書いてもそれなりに見やすくわかりやすい形になります。できればルールや慣習を確認してそれにしたがってほしいですが、まずは動かすところから挑戦してやりきりましょう。

この本ではあまり込み入った内容はやりませんが、とりあえず初めてみるのには十分だと思います。

オブジェクト指向

オブジェクト指向プログラミングの入門です。概念の導入としてほんの一部を紹介しています。存在を認識しておくくらいの理解度の印象です。ですので、この本に書いてある内容だけでは実務には足りません。できれば他の書籍も活用して勉強しておくといいです。実際に使うときには現場でたくさんのルールや思想を教わることになります。

Pythonでプログラムを書く際には、たいていオブジェクト指向に沿った設計になると思いますので、知ってるほうがよいです。ただ、オブジェクト指向は座学で学ぶよりも実践して学んだほうが理解しやすいです。実務に挑戦しながら並行して学ぶのがおすすめです。効率的な勉強方法として、オブジェクト指向で書かれたプログラムを読みながら理解していくのが一番速いと思います。教えてくれる先輩や同僚がいると良いですが、いない場合は都度調べましょう。聞きなれないクラス名や関数名が出てきたら、その旅立ち止まって調べましょう。

プログラミング関連ツール

OSのコマンドや正規表現など、プログラミングを支えるツールの紹介です。普段はあまり意識しないものだと思いますが、プログラマとして働くにあたっては避けて通れません。黒い画面に苦手意識のある人も多いと思いますが頑張って体験してみてほしいです。それほど難しくはありません。

これも使ってみる以外に克服する方法は無いです。よほどわからない状態でめちゃくちゃやらない限り、環境が壊れることってありません。やらかしたエピソードばかりを目にすると思いますが、うまく行ったことは誰もエピソードにしないので、失敗ばかり印象に残っているだけです。

ググって出てきたコマンドをただコピペして実行するのではなく、コマンドの意味や動作、オプションの意味などを調査・理解してから実行するようにしましょう。それだけでもだいぶ安全です。

Linuxをインストールして触ってみるのがおすすめ

心配な方は使っていないPCや安いPCを購入して、Linuxをインストールして遊んでみるのがおすすめです。わからなくなったらOSを再インストールしてまた作り直せます。サーバサイドのインフラの勉強にはこれが一番早くてわかりやすいです。私はずっと前からLinuxのPCを普段からつかっています。自分で環境立ち上げたりコマンドでアプリケーションをインストールしたりするのは意外と楽しいです。

アルゴリズム

コンピュータ・サイエンスの入門としてアルゴリズムにも触れます。いくつか簡単なアルゴリズムを再現して考え方を学びます。簡単なアルゴリズムの紹介ですが、実務で行うことになる設計のことも理解できると思います。ビジネスロジックやデータの関係などを読み解き、整理して設計する練習になります。

仕事のこと

仕事の探しかたやチームでの動き方などを学びます。プログラミングはたいてい一人ではなくチームで行う活動です。実際の仕事の現場ではここがとても大事になると思います。

現場ごとのルールもありますのでそこに入って学ぶことも多いですが、基本的な考え方は知っておきましょう。と言っても大抵は当たり前のことなのですが、意外とうまくいかないことややってみたら出来ないことが多いかもしれません。忙しくて余裕がないとか、進捗が良くないけど報告しなかったとかあるあるだと思います。やっぱり報連相とか、見積もりとか、準備とか、当たり前のことが大切になってきます。

Web関連の情報は少ない

この本ではHTMLやCSSのことはほとんど学びません。ですのでWEB系ではない業務が想定されます。DBやインターネットの基礎知識などもありません。

利用する言語がPythonなので学術や科学・物理、機械学習系を想定しているのだと思います。これらの業界は初めてだと難しいと思いますので、最初はWEB系のことを学んでおきWEBシステムの運用・改修の仕事を探すのがいいと思います。

そう考えるとこの本だけでは、ちょっと足りないのではないかという印象を受けました。WEB関連の知識も一緒に身につけるのがおすすめです。

エラーの読み方やデバッグのコツがあればより良い

エラーの対処方やバグの探し方といったことが、内容に含まれていればよかったかなと思います。結構おろそかにしがちですが、初心者には一番大切な部分だと思います。

Pythonは簡単に動かすことができるので学習にはちょうどいいと思います。ソースコードもふんだんに出てきますが、どれも簡単です。読めばすぐに理解できるようになりますので、頑張って読み進めましょう。

おわりに

本の内容は極めて親切で分かりやすかったです。未経験の人であればこれを参考にプログラミングを始めることができると思います。実務をするためにはもう少し深い知識が必要になると思いますが、現場で教えてもらうのがおすすめです。間違えながら試行錯誤して学んでいきましょう。

基礎的なことは十分にこの本で学ぶことができます。あとは、それぞれの業界や領域に合った応用の知識を学ぶことができれば、初心者としてのスタートは切れると思います。

まるまる1冊使って最強のチャーハンを探す『男のチャーハン道』

Fri, 15 Feb 2019 00:00:00 GMT

パラパラで美味しいチャーハンをつくるための試行錯誤と実験が描かれています。美味しいチャーハンをつくるために材料や道具を変えながら、何度もチャーハンを作ります。１冊でチャーハンのレシピになっているような壮大なものです。

シンプルゆえに簡単に作れるチャーハンに対して、全力で取り組んだ全貌が書かれています。卵の投入方法や白身を使うのか否か、鍋またはフライパンはどんなものを使うか、火力や温度はどうする、鍋を大きく振る必要があるのか、など様々な要素を検討して実験しています。

ざっくりの結論としては、大きな鉄製の中華鍋をしっかり温めてから卵黄を半分を入れる。ご飯を入れる。お玉とヘラでかき混ぜて、鍋肌に押し付けていく。卵黄の半分を入れる。かき混ぜる、ネギ入れる、完成。ということです。

ざっくり紹介

料理人の意見や料理漫画の小ネタ・知識などを実際に試して、パラパラになる方法を探します。その際の、実験の取り組み方や評価方法がしっかりしていておもしろいです。実際にお店に行って食べた感想なども載っています。料理に取り組むまでの過程が充実しています。

大きな中華鍋など個人ではなかなか試すことができないものについても、購入して試しています。道具から材料まで参考になります。

温度やタイミングなど詳細に描かれていますので、わかりやすいレシピになっています。結論、鉄製の中華鍋が必要だったりするのですが、他の道具でも再現できないか試したくなりました。

おわりに

美味しいチャーハンが作れるとかっこいいですよね。冷蔵庫の中が少なくて困ったときにも簡単に作れます。いざというときにさっと作れて美味しい料理を覚えておくと、一人暮らしでは心強いです。親子丼とチャーハンとナポリタンですかね。簡単でほとんど美味しくできます。

本の最後の方に完成したパラパラチャーハンのレシピが載っています。この本を読んで、真似してつくるのもいいですし、自分なりのレシピを探すのもいいと思います。他の料理のシリーズもあるようですので、そちらも読んでみたいです。

【おすすめ読書】ビジネスモデル2.0図鑑

Thu, 14 Feb 2019 00:00:00 GMT

「ビジネスモデル2.0」では、社会性や創造性が儲けることと同じくらい重要になります。

この本では「ビジネスモデル2.0」という言葉を足がけに、これからの時代のビジネスをわかりやすく図解して説明しています。最先端のビジネスには共通するモデルが存在しており、その部分についての分析を行うことで次のビジネスを生み出すための参考になりそうです。

図解されることで、裏側であったり普段目にできないようなステークホルダーも書かれています。お金の動きのモデルなどもわかりやすいです。日本に限らず海外の事例も取り上げられています。

ざっくり紹介

最初は「ビジネスモデル2.0」の説明になっています。ビジネスモデル2.0の意味であったり、図解することによるメリットなどを取り上げています。

「ビジネスモデル2.0」とは以下の3つを満たしており、1.0と区別できます。社会性や創造性が儲けと同じぐらい重視されるようになりました。

逆説の構造

これまでの定説と逆のものです。成り立たせるのは高度な仕組みが必要です。
八方よし

「三方よし」の進化版です。売り手・買い手・世間をもっと細かくしたものです。ブラック企業とか環境への配慮が無いとかが悪い例です。信頼などの無形資産を得る必要があり、数字にできない価値を資産に変える必要があります。
儲けの仕組み

1.0は儲けの仕組みのみに着目していたものだそうです。

図解の資料は100件あります。図解の読み方も書かれているので、最初はそれに従って順番に読んでいくのがおすすめです。いくつかジャンルでわけられているので気になるところから読むのもいいです。聞いたことのないような海外のビジネスから身近なコンビニなど、種類は豊富にあります。それぞれに解説の文章も載っているので、理解はしやすいです。

最後には自分で図解してみようのコーナーがついています。図解資料で使われていた箱や矢印などのデータが用意されているので、真似してやってみることができます。自分が運営しているサービスのモデルなどを図解してみることで、新たな発展や潜んでいる問題点を見つけられるかもしれません。

おわりに

基本的に図解は3×3になっており、上段・中断・下段にそれぞれ意味があったりと、フォーマットが統一されています。揃えてこれだけ並べるとかなり統一感がでるので、見ていて楽しいです。もしかすると飽きてしまう人もいると思いますが、全部見ようとせずに自分の知っているものとか興味のあるものを選んで読むといいです。

これからの時代に活躍するであろう、ビジネスモデル2.0について具体的に要素を紹介してくれているので参考になると思います。なかなかうまくいかないと頭を悩ませている人も、ビジネスモデル2.0を意識しながら自分のビジネスを見直してみるといいと思いました。

【おすすめ読書】自分では気づかない、ココロの盲点

Thu, 14 Feb 2019 00:00:00 GMT

自分でも気づかないうちに持っている先入観などの、認知バイアスに気づかせてくれる本です。

様々な質問に対して解答を予測しますが、実際の街角アンケートの結果とは大きく異なっています。そこで、人間の持つ先入観や社会的な通例などによって歪んだ考え、すなわち認知バイアスを持っていることに気づくことができます。

認知バイアスの心理学的な名称なども載っているので、詳しく知りたい場合はそれを検索することもできます。

ざっくり紹介

「確証バイアス」や「サンクコスト効果」など人間が判断する際に、惑わされる錯覚や盲点を紹介しています。具体的な質問の後に、予想される答えと実際に多かった解答を紹介して、その差異に目を向けることで、ココロの盲点に気づくことができます。できれば質問に対して、自分なりに答えを考えてからページをめくっていくと、より楽しめます。本自体は小さく薄い本で文字数も少ないですので、すぐに読み切れる量です。

おもしろい内容が多く、そうだったのかと納得することが多いです。実際経験したことがあるような身に覚えのあることも多く参考になります。認知バイアスについては普通に生活していてもなかなか気づくことができません。当たり前のようにみんなが騙されていることばかりでした。難しいデータや単語はなく、誰が見てもわかりやすい内容になっています。

おわりに

認知バイアスについて知ることができます。読んで見ると、たくさんの種類が存在していることがわかり、それでもごく一部のみの紹介となっています。

普段目にするような新聞やテレビのニュース・SNSの投稿なんかにも、間違いなく含まれています。友達との会話の中にも含まれているかもしれません。情報を受け取る際、または発信する際は気をつけて取り扱うことができればと思います。

【おすすめ読書】minimalism 30歳からはじめるミニマル・ライフ

Thu, 14 Feb 2019 00:00:00 GMT

「持ち物を100個以下にする」などのルールに縛られるのではなくて、本当の意味での自由と開放を手にするために、ツールとしてミニマリズムを実行しているそうです。

持ち物に限らず、考え方とか人との付き合い方などにも影響しており、参考になる箇所も多いです。無理にとはいいませんができるところからやってみると、様々な束縛から開放されることができ、自由な暮らしを得られるかもしれません。

概要

イントロダクション

特定のルールがあるわけではありません。ミニマリズムを制約ではなくツールとして扱い、本当に必要なものにだけフォーカスすることです。適した状態は人によって異なるので、本人次第で適したライフスタイルを見つけ出すことが大切です。
今を生きる

一度に一つのことに集中すること、一つ一つの瞬間を大切にします。ご飯を食べながらスマホを見たりとか、歯を磨きながらメールをチェックするなどをやめます。一つのさらに一つのものだけをのせて、一つ一つ平らげて行きます。
心の成長

手放すことには勇気が必要です。しかし、記憶は自分の中にあるもので、物の中にあるものではありません。持っているだけで重荷になるものもあります。手放すことで開放されるかもしれません。
成長

自覚こそが最も貴重な自由になります。それが不要なものであると気づくこと、必要なものにのみフォーカスできるようになることがミニマリズムの真髄です。
貢献

他者に報いることで幸福を得られます。自分にとって不要な物や時間でも、他人からすると利用できたりほしいと思っているものかもしれません。もったいぶらずに差し出すことで自分も相手も幸福を得られるはずです。
パッションとミッション

自分のパッションが動くものを見つける、人生のミッションを探す。ちょっと難しいことですが、幸福を得るために大切なことです。
行動を起こす

最初の一歩は大変なものです。「したほうがいいリスト」を「マストのリスト」にすることで、やる気が湧いてきます。ただ紙に書いて、「したほうがいい」の部分を「する！」に変えて読むだけです。こうして口に出すだけでも、すぐやらなきゃという気分になります。

知性では理解している状態が「したほうがいい」状態です。しかし、感情が理解していない状態です。感情でも理解できるようになった状態が「マストのリスト」の状態になります。ツールや手法をつかって「マスト」状態にすることで行動を起こすことができます。
変化と試行錯誤

持ち物について考え直します。どうしてこれを買ったんだろうとか、本当に必要なのだろうかということを考えます。

著者はテレビも手放した上にインターネットの契約も解除しているそうです。ネットを使いたいときは近所のネットにつなげるカフェとかに行って作業するそうです。こうすることで時間を決めて、目的をしっかり考えて利用できるようになりました。ダラダラ動画を見たりすることがなくなったそうです。簡単には真似できませんが、ルータの電源切るとかで1週間だけ試してみるとかはできそうですね。

おわりに

より少なく活きるというのは、ぱっと見ると不便なように見えますが、実は快適だったりもします。余計な心配や管理がなくなり自由になることもあります。どちらがいいかということは一概には言えませんが、試して見る価値はあるのではないでしょうか。

人によって快適や自由は異なる概念なので、合う合わないが絶対にあると思います。他の人のミニマリズムのやり方を学んで、自分だったらどうするかということを考えてみるとおもしろいです。

エンジニア的には、プログラミングや仕様設計についても、ムダな部分を減らしより少なく実装することは大切な心構えです。プログラミングに限らずいろいろな場所でミニマリズムの考え方を活かすことができるのではないかと考えています。

【実践技術書】スマートフォンサイトUI図鑑

Wed, 13 Feb 2019 00:00:00 GMT

スマートフォンサイトでよく使われるUIを集めた本です。使われているサイトの紹介と実装方法も載っています。全部で43種類が掲載されています。

CSSによる表現の調整の部分が多く、実際のデータの処理に関する部分はあまり載っていませえん。よく見るUIの表現について、CSSをJSを用いて表現します。

実装の概念やパターンを知ることができるので、スマートフォン向けのサイトをつくるときの参考になります。本でも紹介されていますが、UI表現を集めたサイトがいくつか存在しているので、そちらも一緒に参考にすると表現の幅が広がります。

ざっくり紹介

CSSとjQueryをつかったUIの紹介です。jQueryのプラグインをつかった実装も多く載っていました。サンプルコードもアスキーのサポートサイトでダウンロードできます。ただし、メールアドレスをつかって会員登録が必要です。

データの処理などに関しては載っておらず、あくまでも見た目についての情報になっており、CSSの属性指定の部分が多いです。jQueryの部分では難しい処理はありません。

説明もわかりやすく書いてあるので、HTMLとCSSについて理解があれば簡単だと思います。デザイナーの人におすすめです。

おわりに

たくさんのUIの表現の例が載っています。参考になるサイトの例も載っているので、実際にスマートフォンでサイトにアクセスしてみるとわかりやすいです。

この本では見た目についての実装のみなので、かなり簡単なソースコードになっています。実際のサイトでの利用ではほかにも考慮することがあってややこしくなると思います。タイトルの通りUIの表現の図鑑として使う分には十分だと思います。デザインの部分で迷ったりしたときに読み直してみたり、インプットの一つとして暇なときに読んでみると良いです。

【おすすめ読書】未来を味方にする技術

Wed, 13 Feb 2019 00:00:00 GMT

社会を便利にしているIT技術について、未来がどう変わっていくかを考察し、それを使いこなす方法についての本です。人工知能とIOTに関する情報が多いです。

最近のトレンドに関わることから、私達が考えるべきことや知識の身につけ方など、新しい技術との付き合い方が書かれています。

概要

新しい価値はどうやってもたらされるのか

社会におけるIT技術の役割の紹介です。生活を便利にすることはもちろん、思想や常識にも影響を与えています。ビジネスとITは切り離せないほど密接したものとなりました。
いま、世界の最前線で起こっている変化

現在進行形で変化している社会の様子についてです。IT技術によって起こっている社会の変化を事例とともに紹介しています。ものを売らないサービスであったり、デジタルな情報やデータを取り扱うものであったり、新しい形態のビジネスが続々生まれています。災害の現場や個人の活動などへの影響なども取り上げています。

変化に合わせて企業側の働き方の変化も加速しています。より効率を目指したり場所や時間にとらわれない働き方もよく聞くようになっています。
未来を支える技術

人工知能・IOTに関する情報と考察です。未来についてこの点から考えています。

様々な分野に影響しており、人間の手助けをすることができるはずです。ただし、課題や限界も存在しています。任せるべきところは任せて、ほかは自分でやっるといった考え方も必要です。正しい付き合い方を考え直す必要があります。
これからの常識を自分で作り出す方法

ここまでの内容を踏まえて、活躍するための方法と考え方を紹介しています。具体的なステップや、狙うべき領域などを示してくれているので参考になると思います。そのまま真似するだけで活躍が約束されるというわけではありませんが、これを足がかりに何かを始めるのがいいと思います。

突出した人になるための3つの原則
- 課題を実感する
- トレンドの風を読む
- 試行錯誤する
どんな領域を目標とすべきかといったことも書かれています。ビジネスを立ち上げようという人にはとてもいい情報だと思います。

特長

わかりやすい図を用いて説明してくれる箇所が多く、概念の把握を手助けしてくれます。ニュースでなんとなく知っていたけども、意味はあまり理解していなかったという事柄に対して、理解を深めることができると思います。

本中の図表については、巻末に記載のURLからダウンロードすることができます。プレゼンなどの資料に利用しても言いそうです。

ITに関する包括的な情報と、現在社会にもたらしている変化についての説明が分かりやすかったです。難しい話は全然無いので、誰にでも理解できる内容だと思います。もしかすると「ホントかな？」と思うようなこともあるかもしれません。ITは想像を超えるスピードで進化しているので、ホントだと思ったほうがいいです。

おわりに

これから注目されるであろうIT関連技術である、人工知能やIOTに関するについての基礎的なことを学べる本でした。仕組みなどについては触れられていないので、そこまで知りたい場合はそれぞれの専門書を読むのがいいです。ビジネスなどに取り入れるのであれば、そこまで詳しく知らなくても十分に活用できると思います。

ITによる社会の発展から取り残されないように、身の回りの変化を積極的に感じ取ることと、そのことの意味や未来について考えることが大切です。

【おすすめ読書】エンジニアがフリーランスで年収1000万円になるための稼ぎ方

Wed, 13 Feb 2019 00:00:00 GMT

1000万の年収という大きな数字を掲げていますが、それ以外のフリーランスの基本的な情報も豊富です。会社員とフリーランスの良い点悪い点を比較しながら進めていくので、その目線でもわかりやすいです。

ざっくりとはエージェントを利用して案件を紹介してもらって、常駐案件をこなすのがおすすめ。という意見になっており、そのときの心構えやノウハウが多いです。

フリーランスになりたての人だけでなく、会社員の人やフリーランスを目指している・考えている人におすすめです。もちろん、この本を読んだ上で会社員として働き続けるという選択もあると思います。良い点悪い点をしっかり書いてあるので、どちらかを贔屓することなく考えることができると思います。

概要

これがフリーランスの「現実」だ

フリーランスのメリット・デメリットを会社員と比較しています。収入や社会的信用や自由などについて、それぞれ比較して説明しています。フリーランスでもちゃんと確定申告とかをして収入を証明できればローンとかもできるそうです。

会社員との比較がわかりやすく書かれています。独立しようか転職しようかなど悩んでいる人にとってはいい情報になります。

仕事を獲得する最良の方法

自分で営業するか、クラウドソーシングか、エージェントのいずれかが基本です。著者のおすすめは、エージェントに案件を紹介してもらって常駐案件をこなすだそうです。

著者が実際に経験した手を出してはいけない案件の特徴や、契約形態の落とし穴などの情報もあります。

最小限の労力で最大の成果をもたらすエージェントの秘密

エージェントの活用方法、選び方です。著者はエージェントの利用をおすすめしているのでその情報です。良いエージェントの探し方も載っているので、探している場合は参考にすると良いです。

良質な案件を効率的に獲得するコツ

案件の探し方、選び方です。注意すべきことや期待すべきことなど書かれています。これらは実際に経験してみないとわからないことばかりなので、とても参考になりました。

成功する商談の傾向と対策

商談についての具体的なテクニックと心構えについてです。スキルシートの書き方や商談の実際の流れなどが書いてあります。これも経験してみないとわからないことなので参考になります。会社員だとこの辺のイメージはあまり付きません。実際にやる機会が来たら参考にしたいです。

現場に入ってから契約を延長し続ける方法

契約を続けてもらうために必要な「信頼」を得る方法について書かれています。現場独自のルールやフォーマットなど、優先して学んでおくといいそうです。他にも、しっかりコミュニケーションを取っていったほうが印象もよく、何よりも信頼につながります。

エンジニアであっても、デザイナー業務もできれば手伝うなど優しさがありました。一方で、ディレクターの考えた仕様については、口を挟まずに正しいと考えて実装するというコツでした。意見を挟まないほうがいいそうです。この理由について以下になっています。

デザイナーの業務に関しては、JavaScriptなどエンジニアもできる、またはエンジニアのほうが得意な領域があります。手伝えるなら手伝ったほうがお互いにとって良いです。

しかし、ディレクターの考える仕様については、明確な解が存在しないとても難しい問題です。エンジニアにはわからない営業データやノウハウが詰まっていることがあります。実際やってみなければわからないことが多いので、意見を求められない限り口を挟まない方がいいそうです。仕様以外の部分で何かできることを探してあげるのが良いそうです。技術・実装的な問題やノウハウなどの共有ができルト役に立てるそうです。

これからフリーランスで働くなら知っておくべき5つのこと

技術力や営業力などフリーランスでなくてもためになる情報です。活躍できる人材になるために必要なことが書かれています。会社員であっても同じなのかなという印象でした。

ほかにも、最低限知っておくべきことが書いてあります。確定申告とか健康保険とか所得税のことなど基本的なことです。検索したら出てきますが、必要なことがまとまっていますので目を通しておくと良いです。

経験談が書かれているので参考になる

実際に会社員からフリーランスになった経験が書かれておりとてもためになる内容でした。タイトルのとおりフリーランスについての情報が多いです。しかし、会社員にもいいところはあるのでよく考えて選びましょうという意見になっています。大きな企業であれば部署移動のほうがいいかもしれない、という考え方も書いてあります。

ここに書いてあることが絶対の方法ではありませんが、一つの参考として真似してみるのはいいと思います。最初は全然わからないことだらけなので、参考にできる情報があるだけで安心できます。やってみて自分に合わなければ、別の方法や考え方を取り入れてみましょう。

おわりに

実際に現場で活躍して信頼を勝ち取るためのコツや考え方が満載でした。どんな案件がいいのか、どうやって探せばいいのかなど参考になりました。都会での話なので、地方在住の場合は都合が異なるかもしれません。

フリーランスに限らず会社員でも、この本に出てくることを意識できると活躍につながります。すなわち、本質的にエンジニアに求められることは、フリーランスでも会社員でも同じということだと思います。

【実践技術書】初めての自動テスト

Tue, 12 Feb 2019 00:00:00 GMT

Webシステムの自動テストを初めたい人に向けた、考え方やフレームワークなどを紹介しています。

これから始めようという人にもちろんおすすめですが、ちょっとやってみたけどうまく行かなくてそれっきりという人にこそ読んでほしいです。

初めてテストを行う人向けで、システムテストの概要やWeb・ネットワークの基礎の情報が多めです。ユニットテストの章以外はプログラマの人にはちょっと物足りない内容かもしれません。品質管理の人にで、あまりシステムに詳しくない人にはとてもいい内容です。

テストの自動化には、少なからずプログラマの協力も必要になるので、プログラマの人もできれば全部読んでおきたいです。あちこちに書いてありますが、テスターと開発者の協調が必要です。

概要

テストのピラミッド

UIテスト、統合テスト、ユニットテストからなるテストのピラミッドを定義します。それぞれがどんなものなのか、どうやって進めていくのか、システムテストの概要を説明しています。
ユーザーインターフェイステストに触れる

UIテストについてです。どんなテストなのか、何をテストするのかといった概要です。
レガシーシステムにUIテストを追加する

HTMLの属性などが正しく実装されていない場合のDOMの指定についての情報です。IDEなどを用いて指定できると、テストが簡単に実装できます。
統合テストで点と点を結ぶ

統合テストについての導入です。HTTPリクエストについての情報と、RESTについての概要です。Webの仕組みに関するところなので、詳しければ飛ばしてもよいです。
RESTfulなWebサービスの統合テスト

RESTの各要求を試してみます。
ユニットテストで基礎を固める

ユニットテストについてです。開発者向けの内容になっていますが、それ以外の人にも得られる内容があるので、飛ばしながらでも目を通しておくと良いです。

ユニットテストの設計や実装というよりは、基礎の情報の紹介です。コードカバレッジとかそういった語句の説明です。
JavaScriptをつかったブラウザ上のユニットテスト

JavaScriptをつかってユニットテストを行います。結構ソースコードが多い章です。ブラウザ上で起きることをユニットテストの領域・範囲でテストします。
ピラミッドを登る

ここまでのテストを組み合わせます。ありがちな問題や、そのことへの対処方が書かれています。

UIテストが重くなり、ユニットテストが不十分になりがちです。逆ピラミッドのような上位のテストばかりが充実してしまう問題です。なんとか下の層でカバーできたほうがよいです。

ただ、それが必ず悪なのかは決めないほうがよいです。逆ピラミッドになっていても、ピラミッドそのものが存在しないよりはマシです。最初はそうなることもよく割ることですので、諦めずに改善を続けましょう。
プログラミング初級講座

コーディングスタイルや、名前の付け方などの考え方です。プログラミングの基礎的な話なので、普段ソースコードに触れないテスター向けの内容です。開発者にとってはそれほど新しい情報はありません。
テストを整理する

テストの設計についてです。ちょっと難しいですが、テストコードの構築についてもしっかり整理して設計しておくと管理が簡単になります。頑張っておいた方が後々ラクができます。
効果的なモックの活用

モックを使うことで簡単にテストができます。ただ、できれば本物のデータやオブジェクトを利用したほうがいいです。構築時には外からテストができるように実装ができると良いです。
テストファースト

テスト駆動開発についての章です。TDDの利点やプロセスを紹介しています。テストに対してより注目して、テストを先に実装する開発手法です。これによって必ずうまく行くわけではありませんが、一つの解決方法として強力なものです。開発者テスターともに参考にしていきたいです。

テストのピラミッド

基本的なことなのですが、システムのテストの概要としてピラミッドの構造を学ぶことができます。テストする上では最初に教えられるものかと思いますが、結構おろそかになっている現場も多いと思います。なんとなく初めてしまった人や、ツギハギでやってきた人などはここから勉強してみると良いです。

参考のプログラムはRubyとjavaScript

本の末尾に環境構築の応報が載っています。他の言語をつかっている方でも参考になる内容です。

この本はプログラミングをあまりやらないテスターの方向けの内容になっています。Webやシステムテストの基礎的な情報が多く、入門書といった内容です。より詳細なシステムテストの情報については、開発者が持っていると思いますので、そちらを見せてもらうのがおすすめです。

テストそのものが無いよりがマシ

特に印象に残っているのは「テストが良くない構造になってしまったとしても、テストそのものが無いよりはマシ」ということです。自動テストの導入は結構難しく、やってみたけどうまく行かないとか、運用されなくてほったらかしになるということが多いです。しかし、それでも全くのムダではなく、失敗を繰り返すことでより良いものができていきますし、無いよりはだいぶマシというのは本当です。

おわりに

テストを作って堅牢なシステムを作りたいという意欲を忘れずに、より良いシステムや構築環境をつくるために努力していきたいです。

テストの実装については実は奥が深いです。さまざまな書籍があり、概念やパターンが存在しているので興味を持ったのであればより深く勉強してみることをおすすめします。テストを構築することは、プロダクトを作ることと同じ用に重要なことです。

【おすすめ読書】人工知能は人間を超えるか

Sat, 09 Feb 2019 00:00:00 GMT

ディープラーニングをつかった技術の原理の説明と、それらが人間の社会に対して、どのような影響をもたらすのかといったことを説明しています。人工知能に興味を持ち始めた、よくわからないから概要が知りたいという人であればおすすめです。

タイトルにあるこの問いかけは結局どういう答えが正しいのでしょうか。わからないというのが結論でしょうか。一時期は雑誌やテレビでも騒がれていた気がしますが、ちょっとブームが去ってしまった様子です。

この本では期待値と最大値を考えて、正しく期待しようということを言っています。当たればでかい！でも当たらないかもしれないという宝くじのようなものだ、ということです。

人工知能やディープラーニングの現状や到達点を知ることで、その技術に過度に期待しすぎることなく、正しく期待を持つことができるようになることが目標だそうです。

概要

広がる人工知能

導入です。
人工知能とは何か

現代すでに活躍している人工知能とその成果の紹介です。
推論と探索の時代

人工知能の歴史の紹介です。
知識を入れると賢くなる

まだうまく行かない時代の人工知能の成長についてです。
機械学習の静かな広がり

最近の研究で成長してきた内容の紹介です。この辺から現在騒がれているような人工知能らしくなってきます。
静寂を破るディープラーニング

一つのブレイクスルーとなる「ディープラーニング」という技術の紹介です。概念が難しく理解しにくいかもしれませんが、なんとなく覚えておくといいと思います。
人工知能は人間を超えるか

これらの技術がこれから先どのような進化を遂げるのか想像しています。その上で、人間との違いであるとか、考慮すべき問題などが提示されています。
変わりゆく世界

未来の社会について想像します。消えてしまう仕事であるとか、変わっていくものについて予想を立てています。どれくらい当たるのかはわかりませんが、必ずいつの日にかそんな時代が来るのではないでしょうか。

特長

人工知能の技術的な背景や原理について説明しています。難しい数式などは使わずに、なるべくわかりやすい表現や比喩を用いて説明しています。

あまり数学や科学に興味のなかった人でも頑張れば理解できると思います。それでもやっぱり難しい内容です。ですので、原理など難しいところは飛ばしながら読んで、未来感や何を変えるのかといった部分に集中して読み切るのがおすすめです。

理解できる人にとってはおもしろい内容です。複雑だった概念をわかりやすく説明しているので、理解を深めることができると思います。

人工知能の歴史についても触れられているので、これからの人工知能の活躍がどのようになっていくのか予想を立てる手助けになるかもしれません。

おわりに

人工知能関連の本の中では技術的な話が少なく、数式などもほとんどありません。ちょっとだけややこしい概念図は出てきますが、比較的知識の浅い人でも理解できるようになっています。入門というかとっかかりにはとてもいいと思います。

どちらかといえば歴史的な部分や、これから起こるであろう社会の変化などに着目しており、人工知能に関する周辺知識が豊富に書かれていて、だれでも読める内容になっています。

人工知能に興味を持ち始めたけど、難しいそうで手が付けられない人にとっては概要がわかるのでぜひお勧めしたい本でした。

【おすすめ読書】ベタープログラマ

Fri, 08 Feb 2019 00:00:00 GMT

生産性の高いプログラマになるための考え方やテクニック・習慣をまとめた本です。

以前紹介した【おすすめ読書】「プリンシプルオブプログラミング」と似たような形です。38のエッセイとしてまとめられています。こちらはより初心者にもわかりやすい、スローガン的な内容になっている印象でした。

プログラミングや設計のテクニックのみでなく、意識的なことであったりプログラマとしてのあり方も書かれているので、経験が浅い人にこそおすすめしたい内容です。

概要

you.write(code)

コードを書く際に気をつけるべきことです。いろいろな本にも書枯れていることを取りまとめて書いてあり、この本を読めば結構網羅できると思います。

プログラミングは大抵の場合、一人ではなくチームで取り組むか、担当者が変わっていくものなので、自分の独善などに従ってはいけません。コーディング規約に従って一貫性を持ったコードを維持するべきです。

DRYやなどの原則ももちろん出てきます。
練習することで完璧になる

ソフトウェア開発には以下のような側面があります。

ソフトウェア開発は芸術。創造性が必要であり、美的・職人的な環境で作られます。個人よりもチームが主体です。

ソフトウェア開発は科学。厳密さが必要で、体系的に構築されます。開発には洞察力が必要です。

ソフトウェア開発はスポーツ。チームワークや規律によって調和が保たれます。規則を決めることで手続きが具体化されています。

ソフトウェア開発はこどもの遊び。開発を通して学習していること、すべてを知らないことを認識しています。単純になぜと問いかけていくことが大切です。そして、何よりも楽しむこと。

ソフトウェア開発は退屈な仕事。きれいに掃除をしないといけないですし、裏方での働きが多いです。保守に携わることが多いです。
個人的なこと

学びを愛すること、何を学ぶべきか考えること、学ぶことを学ぶことを意識しましょう。背筋や首の向きなどの姿勢についても、早いうちに解決できると健康的で良いです。
成し遂げる

戦い方を選び、賢く勝ちましょう。タスクを分解して、完了を自分で再定義できるようにします。
人々の営み

開発は一人で行うものではなく、チームで行うことが多いです。そうでないとしても同じようなことをやっている人は必ずいるはずなので、専門家を探して協力してもらいましょう。一方的に参考にするだけでも、かなり違ってきます。

周りの人や顧客とのコミュニケーションに気を配りましょう。積極的にコミュニケーションを取ることで、良い方向に進みます。そのときには態度や身だしなみに気をつけましょう。

特長

各項目の最後には、問いかける質問とやってみようのコーナーが用意されています。その部分もしっかり読んでおくと、忘れずに身につけることができます。要点という項目も用意されており、特に重要な覚えておく点が書かれています。目を通しておきたいです。

ここでも「DRY」の原則が出てきます。コピー&ペーストして冗長なコードを書かないように気をつけましょう。基本的には、共通で使える関数にしてパラメータなどを受け取り、それぞれの処理をできるようにします。

プログラミングのテクニック的なものは前半に集中しています。後半はモチベーションであったり、効率よく成長できるための心構えなどが紹介されています。

謙虚な姿勢で周りとコミュニケーションを取ってうまくやることについてなんどか書かれています。これは確かに大切なことです。一緒に働く仲間とのコミュニケーションであったり、上司とのやり取り、顧客への対応など、プログラミングそのものよりも大事になることがあります。

本ではソフトウェア開発をいくつかのメタファーで表していますが、たしかにいろいろな面があります。どれもおもしろいので、ぜひ自分なりのメタファーを探してみたいです。

おわりに

ベタープログラマというタイトルの通り、寄り良いプログラマになるための考え方が満載です。初心者の人であれば、これを読んでそのとおりに意識すれば間違いなく成長できます。

人生の節目であったり毎年決まった時期に読み返すことがおすすめです。自分は今どれくらいできるようになったのかということをしっかり意識して、効率よく成長していけるといいです。

【おすすめ読書】発想する会社！

Fri, 08 Feb 2019 00:00:00 GMT

デザインファームIDEOから、様々なイノベーションを生む方法やプロセスを学ぶ本です。

イノベーションを生む会社にするために、どんな取り組みを行うのか、どんな考え方を持てばいいのかといったことを考えるためのネタになります。個人でも取り組めるものもあるので、誰でも参考にできると思います。

たくさんのアイデアや商品、オフィスの写真が掲載されており、イメージしやすいです。

ざっくり紹介

様々なイノベーティブな商品やアイデアの写真とともに、それに至るまでの考えや技法が書かれています。

イノベーションを生むためには、日頃からの観察や、想像力が重要になります。以下にして観察力を鍛えるのかといったことも書かれているので、書いてあることを真似するだけでも、少しはIDEOに近づくことができると思います。

タイトルは会社の経営的な意味になっていますが、個人で読んでも十分に参考になります。イノベーションを起こしたいとか、アイデアを出すために特訓がしたいという人にとってはとても参考になる本です。

もちろん会社の環境や文化的な話も載っているので、経営や人事に関する勉強にも使えると思います。基本的にすごくクリエイティブな環境で楽しそうです。オフィスの写真もたくさん載っているので、オフィスづくりの参考にもいいと思います。

例えば以下のようなアドバイスがあります。どれも大変参考になるものでした。

顧客を観察する
前向きに過ごせるような職場
名詞ではなく動詞で考える
失敗して前進する
人間らしいホットなチームをつくる
小さいところから大きいところへ、現在から未来へ橋をかける

おわりに

イノベーションを生む会社の仕事の進め方、考え方を知ることができます。この手の本は結構あると思いますが、その中でも写真が多いうえ文字もぎっしりです。結構なボリュームなので読み切るのに体力を要しますが、その分身につくこと、参考にできることも多いです。

前衛的で外国のおしゃれ企業というイメージもありますが、最近では日本でもこのような自由でおしゃれなオフィスが増えています。よりイノベーティブな環境を目指そうとすると、このような形になっていくのだと思います。

チーム全員で読んで、自分たちに必要な部分を抜き出して取り入れていくと効果的です。

【おすすめ読書】大人のための落書き帳

Fri, 08 Feb 2019 00:00:00 GMT

タイトルの通り、書き込んでいく本です。大人になって落書きなんてめったにしなくなったという人が多いかと思います。落書きをすることで子供の頃に持っていた、自由な発想力や表現力を思い出すことができます。

それが日常のふとした時であったり、仕事の場面でも生かされることがあります。デザインなどクリエイティブな業種以外の人でも、必ずいい効果があるので試してみてほしいです。

ざっくり紹介

ページごとにちょっとした絵と英語の1文章が載っています。これらは創作のヒントとなっていて、それを足がかりに自由に落書きをします。教科書の偉人の顔写真に落書きしたときのような気分です。ほんのちょっとだけの制約があるので、書き始めやすいと思います。真っ白な紙に「何か書いて」と言われるとすごく困りますが、この本ではそんな心配はありません。なんとなく思ったままに書き込んでみるといいです。

ページの絵に関してもほとんど余白のほうが大きく、いっぱい書き込む場所があります。特にテーマとか目的などもなく、ひたすら落書きできます。好きなページから始めるのもいいと思います。ただし、どのページが落書き済みで、どこが未落書きなのかわからなくなります。白いページ探す楽しみもあっていいかもしれません。

「大人の」とタイトルにありますが、子供に書かせてあげてもいいと思います。書かれている絵や文章・場面が大人っぽいと言うか独特なので、そうなっているのだと思います。子供でも楽しめると思います。

作者の絵がちょっと特徴的なので、それを真似してみるのもいいと思います。自分の世界観で描き重ねるのもいいです。

おわりに

誰でも子供の頃は落書きしたと思います。いつの間にかやらなくなったという人も、この本にガンガン書き込んで子供の頃の気持ちに戻ってみてほしいです。暇つぶしにもなりますし、自由な発想力が発揮できるようになります。ちょっとだけ絵が上手になるかもしれません。

他にも落書きに関する本がたくさん出ていた時期があるので、合わせて読んでやってみるといいです。以前紹介した【おすすめ読書】ラクガキマスターなどもおすすめです。

【実践技術書】Docker

Thu, 07 Feb 2019 00:00:00 GMT

ソフトウェア開発の中でのDockerの使用方法を学べます。開発・テスト・デプロイなど実際に開発で利用する内容を経験できます。スケールアウトについてやセキュリティなどの知識も身につきます。ただし結構難易度が高いです。インフラやネットワーク等の基礎知識が必要になります。

以前紹介した【実践技術書】プログラマのためのDocker教科書よりも応用的な内容になっています。実際の開発現場でどうやって活用するのかなどの知識が身につきます。

概要

1部では基礎的な概念の説明から操作方法を学びます。2部では開発の中でのDockerの使用方法を学びます。3部では高度なツールやテクニックの紹介です。

コンテナとは何か

1部です。概念の理解が目標です。

Dockerの歴史的なところから、プラグインなどに至るまで知ることができます。幅広い知識が必要になるので、基礎の理解については【実践技術書】プログラマのためのDocker教科書で紹介している本を参考にするのがおすすめです。
インストール

基本的にはLinux環境へのインストールを紹介しています。参考程度にですが、WindowsとMacへのインストール方法もあるので参考にしてみてください。
はじめの一歩

Docker runとかbuildなどの基礎的なコマンドを試します。
Dockerの基礎

Dockerの概念の解説です。イメージの概念に加えて、SwarmやMachineなど周辺技術を踏まえて解説します。基礎的なコマンドの意味の解説をします。
開発でのDocker利用

ここから2部です。開発での利用方法を学びます。
Webアプリケーションの作成

pythonをつかって簡単なHTMLページを作成します。
イメージの配布

Docker Hubを利用してイメージを配布します。一人でやっているとよくわからないかもしれませんが、チームなどで開発する場合重要です。
継続的インテグレーションとテスト

スケジューラであるJenkinsを利用してCIを行います。内容が複雑になってきますが、CIを取り入れることができれば安全に開発ができます。重要視されるので頑張って理解したいです。
コンテナのデプロイ

実働環境でのDockerの利用についてです。コンテナのホスティングサービスの説明もしているので試すこともできます。ただし、簡単なアプリケーションであればそこまでしなくていいと思います。したほうが後々便利なのは間違いないと思いますが。この辺は特に難しいです。
ロギングとモニタリング

ログの収集や設定方法やツールをつかったモニタリングの解説です。実働環境での運用を考えるのであれば必須の知識だと思います。
ネットワーキングとサービスディスカバリ

ここから3部です。応用的なツールやテクニックの紹介です。ネットワークやインフレ的な知識が必要になるのでかなり難易度が高いです。

ネットワークとの連携や適切なサービスへのアクセスなどの設定方法を学びます。参考になるツールの紹介もあり参考になります。
オーケストレーション、クラスタリング

Kubernetesなどをつかってコンテナオーケストレーションを行います。

クラスタリングとは、ホストをグループ化してネットワークで接続します。外からは単一のリソースのように見せます。

オーケストレーションとは、様々な作業を取りまとめて、適切にコンテナ郡を起動、操作します。
セキュリティ

Dockerを利用するに当たって考慮すべきセキュリティ問題を取り上げます。起こりそうな問題の例と、対応すべき防御について書かれており、実際にサービスに適応する場合は参考にしたほうがいいです。

特長

序盤はDockerの使い方で簡単なのですが、段々と難しくなってきます。実際の開発で用いる場合は様々なややこしいことがあります。わからないところ、うまく行かないところは飛ばしながらでも一通りやってみるといいです。終盤は難しいので飛ばしておいて、必要になったら確認するくらいがおすすめです。

開発段階の利用方法から実装・運用段階での利用まで書かれており、本格的にDockerを利用するのであれば読んでおいたほうがいいです。正しい概念を理解できていないことで、推奨されない利用方法をしてしまったりすると、せっかくのDockerの良い点が活かせません。セキュリティ関連の内容もあるので、大変参考になります。

おわりに

開発環境は、大抵はすでに動いているものに混ぜてもらう場合が多いです。詳しい人に解決してもらうことになります。ただ、基礎的な部分や触りの部分だけでも知っておく、またはやったことがあるとかなりスムーズに理解できます。

開発環境にDockerなどの仮想環境やCIなどが整備されていない場合は、頑張って理解して取り入れたほうがいいです。かなり快適で安全になります。

実働環境についてはDockerを採用することは思ったよりも難しそうです。合ったほうが便利そうですが、考慮することも多く余計に複雑になりそうです。簡単なWebサービスであれば、コストと相談して利用しないという選択のほうが多いのかなと思います。

【おすすめ読書】パソコンの仕組みの絵本

Thu, 07 Feb 2019 00:00:00 GMT

パソコンの仕組みをイラストなどで解説しています。わかりやすく説明されているので、なんとなくパソコンを難しそうだと思って避けてしまっている人におすすめです。

イラストや画像が多くサクサク読めます。専門的な知識も必要としないので、パソコンを触ったことがあるくらいの人なら誰でも読めると思います。

ざっくり紹介

パソコンの仕組みに関する本です。自作PCなどで分解したことある人には結構馴染み深い画像が多いです。大学の情報学部では、PCを分解してこの本のような勉強を行いました。

プログラミングをする上ではあまり必要ではないといってもいいです。知っておいたほうがいいですが、あまり使う知識はないです。

もっとハードウェア的な役割や名称についての内容です。パソコンまわりで使われる用語や規格に関する内容です。全然パソコンについて詳しくない人が概要をつかむために読むならおすすめです。イラストや画像が多くわかりやすいですし、なるべく難しい表現をしないようになっています。

何らかの機会にパソコンを分解する必要がある、分解してみたいという人におすすめです。この部品が何という名前で何をするための装置なのかといったことを、理解しながらすすめることができます。

プリンタやマウスなど周辺機器についての説明も含まれています。それほど詳しい内容ではありませんが概要を理解するのにちょうどいいです。

おわりに

わかりやすく解説されて入るのですが、たくさんの単語が出てくるので憶えるのは大変です。全部の意味を覚えようとしないで、この本に書いてあったな、ということをなんとなく覚えておくのがいいです。

普通に読んでも十分に理解が進むと思います。更に、パソコンを分解しながら読んでいくと理解が深まって良いです。

すでに理解している人にとっても、わからない人に説明するときの資料や説明の参考になると思います。

【実践技術書】PythonによるWebスクレイピング

Thu, 07 Feb 2019 00:00:00 GMT

WEBスクレイピングを行う際の基本的な処理から、使えるライブラリの紹介、守るべきルールや考慮すべき点などを学べます。

WebスクレイピングにはよくPythonが用いられるイメージがあるので、どこかで役に立つ知識だと思います。いくつかのライブラリや、関連ソフトが出てくるのでぜんぜんPython触ったこと無いという人にはちょっと難しいかもしれません。でもライブラリを使いこなせるようになれば、かなりできることの幅が広がると思います。

概要

内容は盛りだくさんで、複数のライブラリを用いて処理を行ったりします。巻末にはPythonの入門としてインストール方法も書かれています。

他にも巻末付録には、「Webスクレイピングの適法性と倫理」という章があります。何かの役に立つというものではないですが、結構ためになるので一読しておくと良いです。

Webスクレイピング

urllibという標準ライブラリを使い、Web上のコンテンツを取得します。
HTMLパーシング BeautifulSoupというライブラリをつかってHTMLを処理します。かなり便利なライブラリなので使い方を覚えておくと便利です。
クローリングを開始する

Wikipediaを例に用いてスクレイピングによるデータ収集を行います。リンクを辿りデータを収集します。
APIを使う

外部サービスのAPIを利用するときの手順や作法を学びます。実際にTwitterやGoogleのAPIを利用します。
データを格納

RDBであるMySQLを利用して、DBにデータを格納します。難しいまたは必要なければCSVへの格納ですすめるのもありです。
文書を読む

様々な形式のファイルを利用します。PDFやCSV、Wordなどが対象になっています。
データのクリーニング

この章以降は応用編の位置づけです。間違った文法のファイルの対応や、取得データのフィルタリングなどを行います。
自然言語の読み書き

自然言語解析を少しかじるような印象です。機械学習などを利用する場合はきっと必要になるとお思いますので試しておきましょう。興味なければ飛ばしてもいいと思います。Googleなどのインデックスの概念なども学べます。
フォームとログインでクロール

フォームのサブミットを行ったり、ログインの処理を行います。ログインが必要なページについてもスクレイピングを行うために必要になります。Basic認証を初め、サブミットが必要なフォームの通過方法を学びます。
JavaScriptのスクレイピング

静的なHTMLのみでなく、JSのフロントエンド処理が行われたページを取得します。Selenium・PhantomJSを用いることでJavaScriptの処理を実行することができます。
画像処理とテキスト認識

ライブラリをつかって画像処理を行います。画像になっている文字列を正しく認識することが目的です。
スクレイピングの落とし穴

ルールや作法についての内容です。無闇にスクレイピングを行うと、相手に迷惑がかかることがあるので、ある程度の作法は守りましょう。リクエストヘッダを調整したり、リクエストに間隔をもたせたりします。
Webサイトをスクレイイングでテスト

簡単にですがWebページのテストを行います。スクレイピングの応用として、Web表現のテストについて学びます。この本では入門の位置づけになっており詳細には書かれていません。Seleniumの本や別の資料を参考にする必要があります。
リモートスクレイピング

リモートサーバをつかってスクレイピングを行います。移植性や拡張性などの観点からリモート環境での処理を推奨しています。

付録C.Webスクレイピングの適法性と倫理

アメリカ及び国際的なスクレイピングに関する法律についてです。商標や著作権について、過去の事例などから学びます。こういったことはすべきではないとか、ここに注意するべきといったことがわかります。本格的なスクレイピング処理をつくる場合は一読しておいたほうがいいです。実際に裁判所により行われた判断も例として掲載されています。

ルールなどの整備も盛んに行われているので、気をつけた方がいいのは事実です。スクレイピングをい行う際には、対象のサービス規約などを確認するといった作法を覚えておきましょう。

特長

Pythonにはさまざまなライブラリが用意されていますので、それらを利用して行います。簡単に利用できるのでとても便利です。Pythonにはスクレイピング以外にも様々なライブラリがあるので、興味があれば試してみましょう。数学的な計算やグラフ化、自然言語処理や機械学習などが有名でしょうか。RailsやLaravelのようなWebアプリフレームワークもあります。

利用する際のインストールなどに苦戦することがあるかもしれません。プログラミングする上で避けては通れない課題なので、この機会に克服しておくと良いです。

プログラムを書く際のコツであったり構造化や設計に関する部分はあまりありません。Python書く上でのルールなどの説明もあまりないです。

おわりに

WebスクレイピングはPythonのチュートリアル的にも学んでおくと勉強になります。 Web関連の知識の習得にもなり、セキュリティ的な勉強になることもあります。

ある程度HTMLへの理解がないと難しいことがあると思いますが、HTMLの構造の勉強にもなるので良いです。

これで一通りの処理や作法に慣れてから、Pythonを利用した機械学習などに取り組むのがおすすめです。

【実践技術書】Python クローリング&スクレイピング

Thu, 07 Feb 2019 00:00:00 GMT

Pythonを用いてWebクローリング・スクレイピングを行います。基礎的な知識に加えて、実装を行う際の設計の部分でも参考になる点が多いです。

スクレイピングを行う上で必要になる知識やライブラリなどが一通り経験できます。サンプルコードにコメントが丁寧に書かれているので、勉強中の人にもおすすめです。処理の内容を読み進めながら読んでいくとわかりやすいです。

概要

クローリング・スクレイピングとは何か

基礎的な語句の説明です。Pythonは標準ライブラリが充実しているので、今回のような目的でよく使われます。すぐ試せるように作られていることも良い点だと思います。

基本的にはMacでの実装を想定しています。Windowsでも付録に記載のVagrantでLinuxの仮想環境を立ち上げて試すことができます。

この章で基礎的な理解のために、Pythonを用いずにwgetなどのLinuxのコマンドでスクレイピングを行います。
Pythonではじめるクローリング・スクレイピング

Pythonと標準ライブラリでスクレイピングを行います。
強力なライブラリの活用

サードパーティライブラリを用いて難しい処理を実装します。lxmlとBeautifulSoupを使います、pyqueryもコラムとして登場します。

データの保存先としてデータベースへの保存も行います。RDBとしてMySQL、NoSQLとしてMongoDBを試します。
実用のためのメソッド

実際のWebサイトを対象に実装します。

スクレイピングする上で気をつけるべきことや、エラー発生時の確認方法・対応方法なども載っています。実装を行う上で検討すべき設計などもあるので、システム設計の導入に良いと思います。
クローリング・スクレイピングの実践とデータの活用

取得したデータの活用方法を学びます。自然言語処理をつかったり、為替のグラフを作成したりします。 RobobrowserやSeleniumを用いて、Webページの自動操作も行います。地図への描写やBigQueryなどもつかっており、幅広い利用方法を知ることができます。
フレームワーク Scrapy

スクレイピングフレームワークの「Scrapy」を利用してクローラーの効率的な開発を体験します。フレームワークを用いることで高機能なシステムが効率的に作成できます。一通りの使い方やデバッグ方法などを知ることができます。Scrapyをつかってみたいという人にちょうどいいです。結構この章は詳しめに書いてあり、ボリュームも多めです。

取得したデータをElasticsearchをつかって検索できるようにします。OpenCVを用いた顔認識も行います。この章でも応用的な使い方が多数紹介されており、参考にしやすいです。
クローラーの継続的な運用・管理

運用する際のノウハウを学びます。

AWSでのリモート運用を行います。AWSの最低限の使い方も載っているので触ったことがない人でも確認できると思います。無料期間があるので実質お金をかけずに試せますが、アカウント作成にクレジットカードの情報が必要なので注意が必要です。

付録 Vagrantによる開発環境の構築

付録としてVagrantとVirtualBoxを用いて仮想環境の立ち上げ方が紹介されています。なくても試すことはできますが、使いこなせると後々便利です。他の開発でも役に立つと思います。Docker等利用したことがあればそちらのほうがいいかもしれません。

特長

コードがしっかり書かれており、コメントも豊富なのでわかりやすいです。プログラムにやらせたいことの定義と、行う処理をしっかり読みながら進めていくといいです。

応用の部分でのスクレイピングの活用が多く、おもしろいです。この本を読んで色々試しているうちに、あんなこともできそうだなとか、アイデアが湧いてくるかもしれません。

別で紹介している【実践技術書】PythonによるWebスクレイピングよりも、プログラムの設計や実装方法・プログラムそのものに関する内容が多いです。

実際のアプリケーションを作成しながらプログラムの実装の設計などを学ぶことができると思います。スクレイピングはWebの知識や技術を学ぶ上でいい例題になるので、基礎を学んだ後の実践にうってつけだと思います。

おわりに

Webアプリ開発の入門としておすすめです。 Webを利用したシステムを考えるときに、なんだかんだ外部APIへのリクエストなど必要になると思います。ほかサイトへのスクレイピングなどもできると、ぐっとできることの幅も広がるのでおすすめです。

結構ボリュームのある本なのですが、紹介している応用の技術も盛り沢山なので、読んでいるだけで新しいアプリのアイデアとか思いつきそうです。引き出しを増やすためにも参考になる点の多い本です。

【実践技術書】Selenium実践入門

Thu, 07 Feb 2019 00:00:00 GMT

「Selenium」をつかったブラウザテストの導入から実装、事例の紹介などを行った網羅的な本です。

網羅的に書かれていることもありますが、経験から得られる様々な知見が載っており、具体的な実装に活かすことができます。Seleniumを用いたブラウザテストの導入を検討中のテスト担当者にとって、大いに参考になります。プログラマ向きの内容ですが、テスターに対しても内容を共有できるといいです。

Seleniumの基礎知識

テスト自動化についての知識を学びます。どんな恩恵を受けられるのかといったことが主な内容です。個人的な経験では手動テストを行っている場面はまだまだ多いのではないかと思います。なかなか完全に自動化することは難しいと思いますが、取り組むだけでも大きく意味があると思います。軽く見られがちですが、構築以上にテストの工程は大切にするべきです。

WebDriverの基本

セットアップ手順から基本的なスクリプトの書き方、応用的な使い方も説明しています。様々なプログラミング言語でのセットアップ手順が用意されています。Java・Ruby・Python・javaScript・C#が挙げられていました。

テストスクリプトの書き方、運用方法についての技法も紹介されています。かなり詳しく書かれているので、一通りやるだけで大抵のことはわかるようになると思います。覚えきれないくらいなので、なんとなくこんなことしたなと言う記憶を残してサクサク進むのがいいです。

複数の言語の実装が記載

本は分厚いですが、複数の言語について書かれています。ですから、自分の該当するもののみ抜き出して読めば、思ったよりボリュームは少ないです。ソースコードはそれほど多くありません。どちらかといえば実装や運用に当たって注意すべきことと、導入方法に重きをおいたような印象です。ためになる考え方や、設計すべき点が書かれており、運用する際には役に立つと思います。チーム全員で回し読みしたりするといいと思います。

便利なライブラリの紹介

WebDriverをよりシンプルに実装できるようになる、いくつかのライブラリの紹介です。あまり詳細には読まなくてもいいと思います。あったら便利ですがなくてもできますし、余計な懸念や学習が必要になるかもしれません。

サイボウズやDeNAでの実践的な運用

テスト工程の運用で起こりがちな問題と解決方法が書かれています。他にも実際の企業での運用の経験談も書かれています。サイボウズとDeNAでの運用の実態と知見を学ぶことができます。設計段階での考察・検討や運用したうえでの評価など、実体験に基づく情報になっており学べることが多いです。ここで紹介されている運用ノウハウを真似して取り入れてみるのもいいですし、参考にしてカスタマイズするのもありだと思います。

CSSセレクタやWebDriverのリファレンス

付録にリファレンスがついており、読み終わった後もリファレンス本として参考になります。

プログラマ向けの内容

プログラミングレベルでの実装については、詳細には書かれていない印象です。基礎的なことがわかっている状態であれば、この内容を参考に十分実装できると思いますが、プログラミング経験の少ないテスト担当者とかだと難しいと思います。

プログラマとテスターが協力して、テストの環境を作り上げていく必要があります。その点でも、この本を一緒に読んで、協力しながら環境づくりに取り組むことに意味があると思います。

おわりに

構築するに当たってテストは大切なプロセスですが、軽く見られがちな時代もあったと思います。今ではTDDなど存在していますが、しっかり目を向けるべき点だと思います。

正しい実装を行うためにも、一度テストの工程を見直して見るのも効果的です。構築者がテストについても面倒を見てあげられるような環境だと良いです。プラグラミングがわからない人に導入を進めてもらうのは難しいです。

良いプロジェクトではテストも整っている印象です。テストにかけているリソースや整備状況などで、よい環境かそうでないかのある程度の判断要素になると思います。

【実践技術書】実践 Selenium WebDriver

Thu, 07 Feb 2019 00:00:00 GMT

Seleniumをつかった自動テストの本です。Java+Selenium+Firefoxを用いての実装についてです。テスト自動化を検討中の方には参考になります。他環境での導入に当たっても参考にできる情報があります。。

WebDriverとWebElementの紹介

Seleniumの歴史についてです。興味があれば読んでおけばいいですが、飛ばしてしまっても問題はありません。

一連のアクションを実行できるようにします。簡単な操作から少しづつ練習していきます。親切に書かれているので躓くことは少ないです。 3章ではスクリーンショットを取ったり、Cookieを取り扱ったりする応用的な使い方になります。応用的と言ってもWebシステムのテストをする際には必ず必要になるので、ちゃんと学習しておきましょう。

WebDriverについて

Firefoxから始まり、IEやChromeのWebDriverの説明です。固有の機能などがあるので、選択するブラウザによって該当することを読んでおき、ブラウザごとの差異があることを把握しましょう。

WebDriverのイベントの理解

イベントの存在を理解することで、各ステップで起きていることのデバッグの方法を学びます。テストそのもののデバッグやテスト対象のデバッグの際に、この知識があるととても便利です。どのイベントで現象が発生しているのか問題の切り分けをすることから初めましょう。

実際の障害発生時なども問題を切り分けることは最優先なので、そういった学習にもなると思います。

Remote WebDriver

リモートマシン上でブラウザテストを実行する方法についてです。RemoteWebDriverをつかって実装します。ここまではローカルのサーバから動作させていましたが、そうするとその間他の作業ができません。実際の運用ではテスト用にリモートサーバを立ち上げて、並行して動作させることになります。その際の手順や仕組みを学びます。

Selenium Gridについての説明もあります。ハブとなるPCからノードとなる複数のPCを動かし、ハブ上で管理集計する機能です。ややこしい内容ですが、大規模なテストであったり複数環境のテストであったりなどの場合に、テスト時間の効率化などを考えると、必要になってくる知識です。

Page Objectパターン

テストスクリプトのメンテナンス性を高めるための施策についてです。プログラミングする上で考慮すべき点は様々あると思いますが、テストスクリプトにも独自の落とし穴のようなものがあります。しっかり意識して、設計・実装を行うことで効率的に、かつ保守性高く運用できるように気をつけたいです。

iOSとAndroidアプリケーションのテスト

Appiumを用いて各スマホのアプリのテストを行う方法の紹介です。こちらを利用すればアプリのテストも自動化することができるようになります。この本の内容では簡単な触りだけ紹介しています。インストールなどの準備が大変なので、よほどで必要で無ければ飛ばしてもいいと思います。必要になってから他の本で学ぶという選択肢もあります。

対象の読者

基本的にjavaに関してプログラミングができるくらいの読者を想定しています。ブラウザテストに興味はあるけどどこから初めたらいいかわからない、Javaエンジニアにおすすめです。

普段プログラミングをしないテスト担当者には難しいです。先にJavaの入門書などでプログラミングに慣れておいたほうが良いです。

おわりに

Javaをつかったブラウザテストの自動化をするに当たっては、この本を参考にすればうまくいくと思います。バージョンの更新など、そのままではうまく行かない点がありますが、ある程度は検索すれば解決できます。

テスト関連の技術の需要はまだまだ大きいと思います。正しくテストが整備されていない、運用されていない環境はまだまだあると思いますので、基本的な知識や実運用を行うことができるととても助かります。

この本ではJavaに限られていますが、テストのノウハウを覚えてしまえば他の環境であっても簡単に応用ができます。後回し・他の人に任せっきりになりがちですが、チャンスと捉えてテストにも取り組んでいきたいです。

【おすすめ読書】OKR シリコンバレー式で大胆な目標を達成する方法

Tue, 05 Feb 2019 00:00:00 GMT

「Objectives Key Results」というKPIに変わる目標達成のフレームワークの紹介です。

メンバーのモチベーションを維持しながら、目標達成がしっかり成果につながり、全員が意識することができるようなフレームワークになっています。

後半のOKRの解説は特に参考になります。これからOKRに取り組もうとしている方や、なんとなくで進めてきたという人にはぜひ呼んでみてほしいです。

概要

前半は架空の物語で、OKRを用いて成功に向かって再生していくメンバーの成長を描いています。うまく行かずぶつかり合っていたメンバーですが、OKRを取り入れることでいつの間にか成功に向かって進んでいるというような物語です。

後半はフレームワークの説明になっており、運用ノウハウなどの説明になっています。

忙しければ後半だけ読んで取り入れるのもいいと思います。少し前からOKRを取り入れてうまく回り始めた企業の情報を、日本でも目にするようになった気がします。そちらを探して読んで見るほうがおもしろいです。

うまく行かない理由

ゴールに優先順位がない
熱意を持ってゴールを伝えていない
やり遂げるプランがない
時間が用意されていない
繰り替えさないでやめる

OKRの基本

「O」は定性的なものをひとつだけ、「KR」は定量的なものを3つくらいにします。四半期くらいを一定期間として、「KR」を確認することで「O」が達成できたかどうかを判定します。

Oの基本的な決め方

定性的で人を鼓舞する内容
時間的な縛り
各チームがそれぞれで実行できるようにする

KRの基本的な決め方

成功の意味を定義することになる
必ず測定できるものにする
難しいが不可能ではないくらいにする

運用のルール

忘れないようにチームのミーティングや進捗などに組み込む
自身度レベルを毎週調整して変化を追跡する
優先事項・障害となるものを共有する
継続的な評価を行う

特徴

OKRのイメージをつかむために前半の物語があるようです。ある程度目標達成とか、モチベーションのイメージなどがすでにできている人は飛ばしてもいいと思います。

OKRの説明の箇所では、振り返りの内容として話すべきことや、目標の決め方などが具体的に書かれています。いつでも当てはまるわけではないと思いますが、参考になります。うまく行かないパターンなども書かれているので、読んでおくと同じ罠にかからずにすみます。

簡単にはうまく行かないこと、繰り返し行動して学び修正していくことなども書かれており、継続して読んでいく方がいいです。OKRを取り入れてみたけどなかなかうまく行かないという場合も、まだまだ途中というだけかもしれないので本の内容が参考になります。

おわりに

目標を決めてもうまく運用できなかったり、振り返る頃には誰も覚えていないということがあると思います。達成できたとしても、それで目指しているゴールに近づいているのか曖昧になっているということもあります。 OKRのようなフレームワークに沿って考えることで、メンバーのモチベーションを維持しつつ、しっかりと前に進んでいくことができるので早いうちに築き上げておくべきものです。

OKRに関する本は他にはあまりない印象なので、とりあえず気になった場合はこの本から初めて見るのがいいです。

【おすすめ読書】なぜ、あなたの仕事は終わらないのか

Tue, 05 Feb 2019 00:00:00 GMT

「スピードは最強の武器である」という考え方と実践方法について、元マイクロソフトのプログラマー中島さんが書いた本です。ビル・ゲイツから学んだ時間術を紹介しています。

まるで自分のことを言っているのかのようなタイトルで、ビクッとしてしまうかもしれません。内容は参考になることが多く、プログラマーの人には特におすすめです。もちろんそれ以外の業種の方にも大いに参考になると思います。

概要

すべての人に平等に与えられる時間を最大限に、かつ効率的に運用するための考え方や方法が書かれています。「ロケットスタート時間術」といいます。方法については4,5章で紹介されているのですが、そこまでの1〜3章も意味を知る上で読んでおくといいです。共感できることが多いです。残りの6章も、応用としておもしろいです。

なぜ、あなたの仕事は終わらないのか

今までの自分の仕事を振り返ります。締め切り間近になって取り掛かる「ラストスパート型」という思考に目を向けて、その状態に陥っていないか振り返ります。

ズバリ終わらない原因は「安請け合い」「ギリギリまでやらない」「見積もりしない」ことです。これらの事実を見直し解決できれば、仕事は終わるはず！です。
時間を制するものは、世界を制す

最初から100％は目指さない。必ず作り直しになるし、評価を恐れない。時間を守れない人と思われるよりも全然マシです。

遅刻しないように、待ち合わせの30分前に自分の中で待ち合わせ時間を再定義して、スタバでゆっくりします。すなわち、約束の時間にその場所にいることが重要で、間に合う予定の電車に乗ることではありません。受け取った約束を自分の中で再定義します。
「ロケットスタート時間術」はこうして生み出された

夏休み終盤に海に誘われたが、宿題が残っていていけなかったことから意識が変わったそうです。翌年からは、さっさと夏休みの宿題を終わらせたそうです。やりたいことをやるために、やりたくないことを速攻で終わらせる考えです。

まず作ってみて、見せてみることでチャンスが生まれます。誰より速く作って動かしプレゼンすることで企画として認められたそうです。
今すぐ実践ロケットスタート時間術

「常に締め切りを守ること」は100人に1人もできないそうです。ラストスパート思考が諸悪の根源です。最後に頑張ればなんとかなる、という考え方が根底にあります。

例えば10日くらいでこれやっといてと言われた場合
```
1. 見積もり期間として2日もらう
2. この2日をロケットスタート期間として、「ほぼ完成」まで持っていく
3. 「ほぼ完成」まで行かなかった場合、スケジュールの調整を交渉
```
最初の2割の時間で8割完成させます。残りの8割の時間は流しの時間で、残った2割のブラッシュアップ・クオリティ向上に取り組みます。前倒しで仕事に取り組むことが大切です。
ロケットスタート時間術を自分のものにする

ロケットスタート時間術をさまざまな場合にカスタマイズします。長期にかかる仕事であったり、いくつか並行して進むような場合のは話です。
時間を制するものは、人生を制す

これまでの時間術を人生に役立てるためのノウハウです。勉強法であったり仕事の選び方などが紹介されています。

これまでのノウハウを活かして行動することで、自分のやるべきことに集中して取り組むことができます。自分が幸せになれることをやる、やり続けることで幸せを手にできたそうです。嫌なことにも期限を切って、自分の目指したいものにフォーカスすることが大切です。

特徴

プログラマー特有の時間管理術や見積もり術が多いです。情報系の職種であれば、そのまま取り入れることができると思います。大きな根本の部分は他のあらゆる職種で共通していることもあると思うので、参考にはなると思います。

最後には読みっぱなしで終わらないように、明日から始めるべきことや具体的な行動（明日の仕事のタスクリストをつくる・明日の仕事は午前中で終わらせる！）が書かれています。確かに、読んで満足してそのまま取り組まないということはよくあります。ですので、この本の内容に従ってこれらにもしっかり取り組めるといいです。

おわりに

タイトルからそうですが、まるでエンジニアのあるあるが詰まっており、自分のことを言い当てられているかのような印象でした。

ロケットスタートを意識して取り組むことは最初は難しいですが慣れれば簡単になります。サクサク進んで、締め切り頃には余裕がある仕事というのは気分がいいです。結局使う体力は同じはずなので、より気分良くできる方法に出会えるのが良いです。ロケットスタート時間術を使いこなして、ゆとりある時間を送れるようになりたいです。

【おすすめ読書】図で考える。シンプルになる。

Mon, 04 Feb 2019 00:00:00 GMT

いろんな概念を図にして考えることでよりシンプルに理解できるという話です。図にする時にも7つの図のパターンがあり、基本的にはこれに当てはめるだけで図を用いた整理ができます。

演習の形で例となる事象の図解化をしていくので、読みながら練習して身につけていくことができます。

簡単に読み進めることができるのですぐに実践に取り入れることができます。文章では伝わりにくいことや整理しきれないことも、図解にすることで理解しやすくなります。この本を読んで上手に整理・理解ができるよう勉強したいです。

本の概要

図にすることで考えを整理してより理解を深めることができます。ただ、図解することは結構ハードルが高く感じる人もいて、おっくうになりがちです。

この本では誰でも書けるような簡単な7つの図のパターンを紹介しています。そして、それぞれの使い方と場面を知ることができます。どの図もシンプルな要素でできており、枠に当てはめて使うことができます。演習を行うことで、手先のテクニックだけでなく実際の活用方法や考えかたが身につきます。

図にすることによって、シンプルに考えられるようになり思考プロセスも単純化することができるようになります。自分の頭の中で整理することも役に立ちますが、他人に説明・共有するときにも力を発揮します。

本の特徴

7つの図の紹介をしたあとに、基礎トレ・応用と進んでいきます。

交換の図
ツリーの図
深堀りの図
比較の図
段取りの図
重なりの図
ピラミッドの図

基礎トレではそれぞれの図の使い方のコツと、実際の事象を例に図解を行います。練習問題ごとに解説・解答が載っているので確認しながら学ぶことができます。しっかりと読み飛ばさず問題に取り組んでいけると理解も深まりますし、より効果的に学びが得られました。

応用では人生戦略を図解を用いて考えたり、図解の習慣化を取り上げています。読書であったり動画コンテンツを見たあとに、その内容を図解してみることをおすすめしています。他にも、他人に伝えるために図解にひと工夫を加えて効果を足したりすることで表現力を高めるコツもあります。他人に教える・説明する時に便利な方法が紹介されているので、そういった機会が多い方にはとても学びになる内容でした。

おわりに

慣れていないと図解するということを難しく捉えてしまいます。しかし、この本のようにいくつかのパターンに当てはめることができれば、オリジナルのセンスなどはあまりいらないように思います。

理解を深めるためであったり、よりシンプルに物事を捉えるためにも図解は大いに役に立つものです。頭の中を整理するためにも使えるようになると良いです。プログラミングでも設計でもよく役に立ちます。

難しいIT関連の概念や知識を自分で理解するときはもちろんですが、人に教える際にも役に立つ内容でしたので、とても良い勉強になりました。早速図解して開設できるようにホワイトボードを用意して見たところ、簡単に描き始める癖がつきました。おすすめです。

様々な図解の本を読んで、自分もやってみたいなあと思っている人は多いと思います。この本を読んで、日常のいろいろなものを図解してみることから初めて見るのがよさそうです。

【おすすめ読書】Joel on Software

Mon, 04 Feb 2019 00:00:00 GMT

様々な商用アプリケーションの開発に携わった著者のブログをまとめたものです

プログラミングへの取り組み方や・マネジメント・サービス運用など幅広い事柄について、ユーモアを交えて書いています。ブログに書いた内容ということもあり、主観的に書かれており、ズバッと批判的なこともあります。

技術者に必要な心のあり方などを知ることができます。エンジニアはもちろんですが、マネージャもしくは人事、もっと言えば経営者にも参考になります。

本の概要

著者が自身のブログに書いた内容を編集したものです。読みやすいように以下のような章わけがされています。

プログラミングのプラクティス

プログラミングを行う上でのアドバイスです。ただし、技術者の目線と言うよりはマネージャー的な目線での手段が多いです。作業に集中させるために環境を良くしようとか、バージョン管理やデイリービルドをしっかりしようといった感じでしょうか。今時これくらいは基本的にできている環境のほうが多いのかもしれませんが、そうでないならすぐになんとかしたほうがいいです。

最近では是非が問われるかもしれませんが「仕様書」についての考察もあります。仕様書とはこういうものだという例もあれば、誰が書くのか？管理はどうするのかという内容もあります。同じ悩みを持ったことがある人は多いと思います。

スケジュールの項目などちょっとツールなどは古いですが、基本的な部分はためになると思います。Exelを使う必要はありませんが、スケジュールに組み込むべき要素や見積もりの根拠など参考になります。
開発者のマネジメント

こちらもマネージャや人事的な話が多いです。採用の際にはこういった箇所をチェック・テストするべきだとか、報酬の考え方などです。章自体は少なめなのですが、結構参考になることは多いです。チームを立ち上げる際など一度目を通しておくのがいいです。
それほどランダムでもないトピックに関するランダムな考察

特別テーマが定まっておらず、いろいろな内容が書かれている章です。基本的には著者が経験した事件の紹介と、そこから得た教訓です。特別なテーマ等は無いので読み物としておもしろいです。

著者はMicrosoftで働いていたので、そこで経験したことも書かれています。超大手の会社なので、その実情が知れるだけでも結構おもしろいです。
.NETに関する少し行き過ぎた論評

.NETの開発の際に著者が思っていたことことです。ここは今読んでもそれほど参考になるものではないです。

本の特徴

技術者の目線で読むと、思っていたこととは違うことが書いてある印象を受けると思います。実際に起こった経験から、その時の対応や感想が書かれています。こんなことが実際に起こるのか、といったことから、こんな結果になるならあのときはどうすればよかったのだろうかなど、いろいろ考える余地があります。

経験豊かな著者による問題に対する解決方法が乗っているので、かなり参考になると思います。ただ、外国での事柄であることと、ちょっと古い内容ですので、その部分はうまく補完できるといいです。エンジニアリングの根本的なあり方みたいなものはいつの時代も変わらないのかもしれません。

1エンジニアとしてのキャリアではなく、プロジェクトをうまくすすめるためのマネジメントなどの内容が多めです。特に、自分が経営者・雇用者の立場での内容が結構多いので、普段とは異なった目線での価値観が多いと思います。

おわりに

かなり昔に書かれた内容なのですが、今でも結構参考になるところがあります。技術者というよりはマネージャや人事的な目線での捉え方なので、そういった経験がない人にとっては新しい視野になると思います。もちろん技術者でもビジネスやマネジメントの目線が合ったほうがいいので、その手始めにおすすめします。

内容もブログがもとなので、面白く書いてあり興味を持って最後まで読むことができます。1つ1つの章も短いので、気になるテーマのみ読んで見るので十分です。

【おすすめ読書】とにかくすぐやる人の仕事の習慣

Fri, 01 Feb 2019 00:00:00 GMT

仕事ができる人の特徴として、「すぐやる」という能力があると思います。すぐ終わらせることで「仕事が早い」等の良い印象を与えることができ、次の仕事を頼まれやすくなります。

ちょっとおいておくほうがいい仕事もあるかもしれませんが、すぐやることは自分にとってはいいことばかりです。

新人の人や、何をやるにも腰が重くなったという人におすすめです。仕事をする上で大切な基礎になります。

本の概要

すぐやる人の習慣を紹介しており、それを真似ることで誰でもすぐやる習慣を身につけることができます。同じやるなら「後でやる人」より、「すぐやる人」のほうが印象はいいので、積極的にすぐ動きましょう。

1部と2部に分かれています。

1部はすぐやる人の意味や得する点、意識するべきことなどを紹介しています。13のキーワードで進めていくので覚えやすいです。例えば、自分をすぐやる人であると周りにアピールすることは効果が大きいです。周りからも頼みやすくなりますし、実際にできたときの納得感がアップします。ほかにも嫌な仕事こそすぐ片付けることも大切です。意識しないとなかなかできませんが、やってみるとそれほど難しいことではありません。すぐやることを意識することで、かかる時間も短くなり、残業等も減ると思います。

2部はすぐやる人になるための習慣を30個紹介しています。これらをメモして日頃から意識することですぐやる人になることができます。できれば新人のうちから意識して取り入れたいことですね。すぐやるための小手先のテクニックばかりでなく、ビジネスマンの意識すべきこととして挙げられています。身だしなみのことであったり、できないことはしっかりNoと言うことなど、初めのうちに身に着けておくべきことです。仕事にかかった時間を計測することなども、最初のうちは思いつきもしないので、よくわからなくてもやってみるといいです。

おわりに

すぐやることは大切なスキルだと思います。意外と世の中にはすぐやることができない人が多いと思います。忙しいからとかいろいろ理由はあるのですが、頼む側からすれば関係ありません。やるかやらないか、そしてすぐやるか後でやるかという結果しかわかりません。どれが印象としていいかで言うと間違いなく「すぐやる」なので、しっかりすぐやる人を目指しましょう。

すぐやるためには時間を捻出するスキルや、かかる時間を見積もるスキルなど必要になります。このあたりのスキルは経験によるものも大きいともいます。意識しながらどんどん取り組むことで、それらの経験値もたくさん手に入れることができると思います。

【おすすめ読書】ひらめきスイッチ大全

Fri, 01 Feb 2019 00:00:00 GMT

アイデアを生み出すには、

情報や知識をインプットすること
いつもと違う視点で物事を見つめること
考え抜いた後に、気を緩めること

この手順が王道です。いろいろな本で目にします。

この本では、様々な発想のきっかけとなるような、発想の方を紹介しています。真似して考えてみることで思いつきの手助けになること間違いないです。

結構大きい本なので、読んでいるだけで夢中になっていまい、頭を空っぽにできます。行き詰まったときなどに取り出して読んでみるとおもしろい本です。

ざっくり紹介

アイデアを見つけるための発想の方がいっぱい詰まっています。基本的には箇条書きになっていて、ひらめきのスイッチとなるルールと、その説明が見開きで載っています。

225個のひらめきスイッチが載っており、見た目からわかるとおりボリューム満点です。1つ1つの内容は少ないですが、ひらめきのきっかけにはなりそうです。

アイデアを見つけるためのプロセスではなく、ひらめくためのテクニックというか刺激になることが載っています。どちらかといえば近道のような本です。しっかりアイデアの本質であったり技術を身に着けたい場合は別の本のほうがいいと思います。

おわりに

行き詰まってしまったときの気分転換にもいいかもしれません。ついでに何かひらめくことがあると思います。最初から順番に読むのではなく、なんとなく開いたページを読むのもおすすめです。

【おすすめ読書】チョコレートの手引

Thu, 31 Jan 2019 00:00:00 GMT

もう2月になります。チョコレートを目にする機会が増えました。

チョコレートについて、その奥深さを知ることができる本です。

全く知らない人にもわかりやすく、かつ詳しいことが書いてあるのでおすすめです。チョコレートってそもそもどういうものなのだろうと思ったら読んでみるといいです。チョコレート全般のことについて詳しくなります。

ざっくり紹介

チョコレート研究の仕事をしている著者による、チョコレートの奥深さを知るための本です。

カカオ豆の栽培から焙煎、チョコレートの作り方に歴史などが紹介されています。ほぼ知らないことだらけでした。写真やイラストも豊富に載っており、チョコレート色の装丁も美味しそうです。栽培している国の様子であったり、実際に取り扱う原料など、普段は見ることのできない情報が満載です。カカオ生産地の情報や、工程などコーヒーと似ている点もありますが、異なる点も多く興味深いです。

最後の方にはチョコレートの楽しみ方として、おすすめのレシピなども載っています。ホットチョコレートやコーヒーとの組み合わせかたなど、純粋に食べる目的でも楽しむことができる本です。体にもいいので積極的に口にしたいです。

楽しみ方の中には香りを見つけるための表が出てきます。チョコレートを食べてなんの香りに似ているかなんて考えることは無かったのですが、やってみるとおもしろいです。五感をつかった楽しみ方がわかるとより深く味わえそうです。

おわりに

毎年2月が近づくと読みたくなる本です。直前に騒がしくなり、スッと終わって特に何も残らないようなイベントです。一過的なイベントにしてしまうのではなく、ちょっと踏み込んで見つめ直してみるのもおもしろいと思います。味わいが豊かになりそうです。

【実践技術書】React Native 入門

Thu, 31 Jan 2019 00:00:00 GMT

React Nativeの入門書を試しました。 WEB上のIDEを利用して実際に動くアプリの作成を行うことができます。ローカルに環境を用意することなく一通り学ぶことができます。

React Nativeを用いることで、AndroidとiOS両方で動作するアプリを構築できます。たくさんのコンポーネントを利用することもでき簡単に実装できます。

ただし、この本ではストアでのアプリ公開の手順などは書かれていません。その部分は他で学ぶ必要があります。

なぜこの本を読んだか

アプリ制作の手法を学ぼうと思いました。ゆくゆくは作成したアプリをストアで公開したいです。

ReactNativeを使うことでAndroidとiOS両方で動作するアプリが作れますので、お手軽そうと感じています。実際、UIなどの部分で様々なコンポーネントが用意されているので、その点でも効率よく開発ができると感じました。

本の概要

本に出てくるソースコードはサンプルコードとして出版社のHPからダウンロードが可能です。

インストールとセットアップ

Android StudioやXcode、npmやReactNativeのインストール方法が紹介されています。いろいろな項目が合ってわかりにくいですが、必要なものを選択してセットアップしましょう。

おすすめはExpoSnackを利用してWEB上で開発する方法です。ローカルに何もインストールしなくていいので、簡単に初められます。
基本をマスター

基本の作り方とコンポーネントの基本についてです。Reactに関する知識の説明は少しありますが、詳細に知りたい場合は公式サイトか別の書籍を参考にしたほうがいいです。
UI関連のコンポーネント

スライダーやスイッチなどUI表現のコンポーネントを実装してみます。リストやフォームなどもここで出てきます。
レイアウト関連の実装方法

ヘッダーやflexboxなどの表現方法の紹介です。
OS固有の機能

AndroidとiOSそれぞれで利用できるコンポーネントや機能の紹介です。ここに関してそれほどこった作りを目指していないのであれば飛ばしても問題ないと思います。
グラフィック描写

Canvasなどをつかって図形の描写を行います。四角や丸の図形を描いて、グラデーションしたり回転縮小したりします。ここも、あまり使う機会がなければ飛ばしていいと思います。
タイマー・アニメーション・データアクセス

ちょっとむずかしくなってきますが、複雑な処理を行います。データアクセスではネットワークにアクセスしたり、ファイルの読み書き、ストレージへのアクセスなどを行います。アプリつくる上でデータ保存とかは重要なのでしっかり身につけておきたいです。
サンプルアプリ開発

3つのアプリを試しに作ります。WEBViewやストレージへのアクセスなど、これまでの知識をフル活用するので、良いまとめになります。位置情報取得や権限取得など、ここで初めて出てくる知識もあるのでぜひ体験しておいてほしいです。コードの量はそれほど多くないので、簡単に実装できます。

本の特徴

Expoを利用することで、簡単に React Nativeを利用できます。ストアを通さず独自のシステムでアプリを公開・配信したりできます。実用には耐えないと思いますが、練習やデバッグであれば十分そうです。

しかもExpoにはSnackというWEB上で利用できる開発環境が用意されています。ローカルにパッケージのインストールなどを行うことなく、WEB上で構築、実行ができます。これらの使い方が書かれているので、一度試してみることをおすすめします。

上記以外のAndorid StudioやXcodeのインストール手順や構築方法、デバッグ方法も簡単にですが紹介されていました。

ソースコードはどれも短いのでわかりやすいと思います。複雑な設計や構造ではないので理解が早いです。解説も丁寧に書かれており処理の概要が分かりやすかったです。

注意点

Expoの開発・バージョンアップが盛んです。そのままでは動作しなくなっている関数などがあるので、注意が必要です。
- Headerのiconの表示がエラーになることがありました。 Expoで利用するiconのモジュールをインストールすれば解決できそうでしたが、よくわからなかったので、その部分は取り除いて進めました。
- React Navigationの利用方法が変更されている
  
  「createStackNavigator」という関数をReactNavigationからロードして利用しますが、v3へのアップデートによる変更の影響でそのままでは動作しないときがありました。バージョンを「2.11.2」にするか、ソースコードを変更するかしましょう。エラーの内容で検索するとstackoverflowなどで解決方法を見つけられます
```
// 動かなかったソース
import { createStackNavigator } from 'react-navigation';
~~ 省略 ~~
export default createStacknavigator(
  {
    Home: { screen: FirstScreen },
    Next: { screen: SecondScreen },
    Last: { screen: Thirdcreen },
  },
  {
    initialRouteName: 'Home',
  }
);
```
```
// 動いたソース
import { createStackNavigator,createAppContainer } from 'react-navigation';
~~ 省略 ~~
const RootStack = createStackNavigator(
  {
    Home: { screen: FirstScreen },
    Next: { screen: SecondScreen },
    Last: { screen: Thirdcreen },
  },
  {
    initialRouteName: 'Home',
  }
);

// このコンテナ作成処理を自分で行う必要がある
const App = createAppContainer(RootStack);
export default App;
```
実行環境は自分のスマホにEXPOアプリをインストールして、連携して実行するのがおすすめです。

ExpoSnackではWEB上で実行できる「Appetize.io」を利用することができますが、おすすめできません。IDEの右側にスマホが表示されて、そこでアプリを動かすことができ一見便利そうです。しかし、無料のアカウントではリソースを他ユーザーと共有するようで、他ユーザーの使用状況によって待たされることが多かったです。午前中であれば、ほとんど待ち時間無しでスムーズに実行できました。

各OSのストアからExpoアプリをインストールすれば、WEB上のIDEと連携して、手元の端末で実行できます。こちらは待ち時間が全く無いのでおすすめです。端末のIDであったりQRコード読み込みで連携が開始できます。

おわりに

ReactNativeの基本的な使い方を学ぶことができます。簡単なアプリであれば、この本の内容を応用して実装することができます。

複雑なアプリを構築する場合は、もっといろいろな知識が必要なので詳しい学習が必要です。アプリのビルドやストアでの公開などの手順はこの本にはありません。実際のアプリでは設計なども必要なので、この本の内容だけではその部分についても難しいかもしれません。

ReactNativeを使ってみて、AndroidとiOSの両方のプラットホームで動くアプリが作れるのは快適でした。一度ReactNativeを利用したアプリを構築して、ストアに公開してみようと思います

【おすすめ読書】知的戦闘力を高める独学の技法

Wed, 30 Jan 2019 00:00:00 GMT

独学をシステムと捉えて効率的に運用していこうという試みだそうです。勉強するに当たって、学生の頃と違いテストは存在しません。ですから、すべて覚えることを目標にしてはいけません。「知る」ということに注目します。

私の好きな偉人エピソードなのですが、アインシュタインは簡単な質問をされて以下のように回答したそうです。

本やノートに書いてあることをどうして憶えておかなくてはならないのかね？

全部覚えることが正義ではないこと、それを正当化する根拠を感じさせてくれるところがとても好きです。当たり前と思われていることに対してNOを言えるのって素敵なことだと思います。

この本では「知的戦闘力を高める」ことを目標として捉えており、まずは知的戦闘力とは何か、なんの役に立つのかという説明から始まります。ざっくりその後の内容は、本の選び方・読み方というものです。ただ、読書以外にも応用はできると思います。

読書するなりテレビを見るなり動画を見るなり、独学をする時間手増えているのではないかと思います。速いうちにどうやって学べば効果的なのかを意識できると、上達が早まると思います。ただ、やればやる分何かしらの場面で訳には立つので、回り道でもとりあえずやってみるということは大切な心がけだと思います。

本の概要

独学のシステムを「戦略」「インプット」「抽象化・構造化」「ストック」の4つのプロセスに捉えています。単純な方法や手段のみでなく、学ぶ際の一通りの流れ全体について考えることで効果を高めることになります。

本の内容は以下の構成です

知的戦闘力をどう上げるか
戦う武器をどう集めるか
生産性の高いインプットの技法
知識を使える武器に変える
創造性を高める知的生産システム
なぜ教養が知の武器になるのか

本の特徴

学びをシステムとして各工程について着目しています。内容は長くなるのですが、その分効果はあると思います。学び方を学ぶ本になっています。自分の中に取り入れるには時間と努力が必要かと思いますが、身につくと以降の勉強の効率が上がり、良い効果を得られます。

もちろん合う人も入れば合わない人もいると思いますので、他の考え方も触れてみると良いです。やってみて良さそうだと感じたら続けていくのがよいです。

しっかり戦略を立てることや、学んだ情報や知識を抽象化・構造化して整理することは、普通の勉強ではやらなかったようなことかと思います。仕事にも言えることですが、目標や達成すべきことを具体化して取り組む効果は大きいです。よくわからないまま進んでも、迷子になってしまうだけだったりします。今一度今までの学び方を見直して、効果的な勉強法を身につけましょう。

途中には様々な偉人や、活躍している人の名言が載っています。内容に合わせた場面で、ありがたい言葉が載っているので、気分を盛り上げながら読み進めることができます。

最後にはおすすめのジャンルとジャンルごとのおすすめ書籍紹介があるので、参考に取り組んでみるといいです。

おわりに

インターネットの普及と環境の整備によって、簡単にいろんな情報に触れることができるようになっています。更には学校に行かなくても様々な学習ツールやサービスが立ち上がっており、勉強するチャンスは拡大していると感じています。

ただ、学習する機会はほぼ全員が平等です。同じものを見てどれだけのものを身に着けられるかというところで、個人で大きく差が出るのかなと思います。しっかり早いうちから勉強する方法を見直しながら進んでいくことで自分なりの勉強法が見つかり、効果的に応用できるようになりそうです。学び方を学ぶというのは一見前に進んでいなさそうですが、そこから学ぶスピードが大きく上がると思いますので、しっかり取り組みたい内容です。

【おすすめ読書】GRIT やり抜く力

Tue, 29 Jan 2019 00:00:00 GMT

人生で何を成し遂げられるかは「才能」よりも「情熱」と「粘り強さ」によって決まる。これらをまとめてGRIT、すなわち「やり抜く力」として、紹介しています。

それは一体何なのかというところから始まり、伸ばし方についての紹介までが内容です。才能以外の大切な素質に気づくことができると思います。

ざっくり紹介

平凡だと言われ続けて来た著者が、天才賞とも呼ばれるマッカーサー賞を受賞したことにより、自分の持つ力とは何かを見直している本です。それがずばり「やり抜く力」だったわけです。

何かをやり抜く！というときに役に立つ知識やテクニックを学ぶことができます。

やり抜く力とはどんなものなのかを知識として知ったあとに、内側から伸ばす方法、外から伸ばす方法を学ぶことになります。

自らの意志で伸ばすのはもちろんですが、周りの人や家族などに対しても取り組むことができます。例えば以下の4ステップが効果的です。このステップに沿って、やり抜く力の伸ばし方が構成されています。

興味

自分がやっていることを心から楽しむ
練習

昨日より上手になるように日々の努力を怠らない
目的

この仕事は重要なことで他人の役にも立つ
希望

不安になってもひたすら歩み続ける

グリットスコアのテスト、すなわちやり抜く力診断も途中で出てきますので一度やってみるといいです。他にもいくつかの性格診断のようなものもあるので、取り組んで見ると面白いです。それを伸ばす方法も紹介されているので、数カ月取り組んでみてからもう一度テストしてみると点数が変わっているかもしれません。

外から伸ばす方法の章では、自分の子供のやり抜く力を伸ばすための方法に触れられています。子育てなどの指針ぎめにもいいと思います。内容を見る限りでは、小さなうちからしっかり取り組んでおくと、立派な大人になるだろうなあと感じました。

おわりに

大きな活躍をするためには才能よりも情熱や粘り強さが大切だ、という新しい視点をもらえます。

すごい人を目の当たりにすると、「才能だ」と直結してしまいがちですが、影では計り知れない努力があります。才能によるものだと神格化することで、できない自分を無意識に正当化しているそうです。

こう考える
すごい人は才能があるからできる → 自分には才能がなかったのだからできなくて当然

でも、実際には
すごい人は努力をしたからできる → 自分は努力をしなかったせいでできない

確かにそうなのかもなと思いました。才能のせいにすれば傷つかずにすむから、そのように考えるのでしょうね。結構残酷ですがおもしろい視点です。

【おすすめ読書】沈黙のWebマーケティング

Tue, 29 Jan 2019 00:00:00 GMT

SEOやWEBマーケティング関連の入門書としてよく見かける本です。

内容はかなり初心者向けになっており、文字よりもイラストや会話などが多く読みやすいです。情報はそれほど多くありませんが、普段あまり読書しないという人でも簡単に読めるようになっています。

WEBが本業ではない企業の担当者も簡単に理解できます。普段はあまり触れることのない人が手に取ると効果絶大です。

難しい専門用語や複雑な概念を面白く書いています。ギャグの部分も多いので好き嫌いが別れると思います。

本の概要

フィクションのストーリーに沿ってWEBマーケティングのなんたるかを学ぶことができます。

オーダー家具の企業の売れ行きが好調でない、どうやらWEBをつかったマーケティングがうまく言っていない様子。主人公が参上していくつかの問題を解決していく。というものです。

企業サイトで起こりそうな問題や事件が取り上げられているので、身近な経験として持っている人も多いかもしれません。

SEOペナルティやWEBデザイン、ライティングなど幅広い問題に触れています。オウンドメディアの運営やSNSでの広報なども行っています。それぞれの問題については広く浅くといった印象で、深い掘り下げは無いです。その分理解しやすくまとめられているので、すぐに活かせることが見つかると思います。

本の特徴

WEBマーケティングのなんたるかの部分は概要的なものなので、ちゃんとやろうと思うとこの本の内容では足りないです。

個人的にWEBサイトを立ち上げたとかであればある程度参考になると思いますが、ビジネスに取り入れるのであれば、もっと踏み込んだ知識の理解と習得が必要です。

WEB関連の知識がなく単語の意味が全然わからなくて混乱している、とかの状況であれば取っ掛かりとなるのでおすすめです。

会話形式の内容なので、漫画の様に読み進められます。登場人物も少なく、ストーリー仕立てになっているので興味を持ったまま最後まで一気に読めます。章と章の間には、出てきた内容の細かめな解説が乗っているので、そこもしっかり読み込んでおくべきです。サクッと読めることもあって書いてある情報は絞られていて、もっと詳細を学びたいと感じた場合は他の本や、ネットのドキュメントなどを探すのが良いです。

SEO関連の内容もありますが、テクニック的なことについてはそれほど出てこないです。SEOの効果は絶大なのでしっかりやろう！といった意気込みを持つことができます。こんな落とし穴があるのか、といったことや今まで間違った先入観を持っていたのか、ということに気づくこともあります。

SEO関連の知識やルールはどんどん更新されています。その変化についていくためにも基礎的な知識の理解は不可欠です。ぜひこういった入門書などを読み始めて基礎的な概念と知識、そして興味をもっていけると良いです。

おわりに

自社の商品のことをよく知り、お客様の気持ちになって考えよう！という、当たり前のようで難しいことが書かれています。小手先のテクニックではなく、心持ちや態度のような部分への言及があり、はっとさせられることもあると思います。

SEOのテクニックももちろん紹介されていますが、本当に大切なことは何なのかといったことも書かれています。そういった概念や心持ちの部分についても学ぶことができるのはいいですね。

さくっと読めるので普段あまり本を読まない人、WEBに触れた経験があまりない人、かつこれからWEBサイトを初めてみようと思った人は試してみるといいです。

【実践技術書】Linuxのしくみ

Mon, 28 Jan 2019 00:00:00 GMT

Linuxの動作の仕組みを実験と図解で学べます。

C言語を使ってカーネルの操作などを実験するので、実際にLinuxの端末で真似しながら進めていくのがおすすめです。

普段のプログラミングでは全く使わないようなコマンドや出力などに触れることができるので、結構おもしろいです。

本の概要

カーネルの操作についての情報から、プロセス管理やメモリの管理を学びます。ファイルシステムやストレージデバイスについての知識も学ぶことができます。

1つ1つ実験を行い、出力を確認しながら進めていきます。プログラムに触れながら読み進めていくのでおもしろいです。読者の環境と著者の環境は一致しないと思いますが、その差についてもある程度書いてくれているので、ログや出力を読むときの参考になります。

ちなみに、PCの自作を行うときに必要な知識ではないです。OSの自作を行うのであれば知っておく必要があります。

本の特徴

実験と図解で基礎知識を学ぶことができます。 Linuxに限らず、SSDのことなども学べるのでおもしろいです。

実験の際にはC言語を使っての簡単なプログラミングを行うので、つかったことない人はぜひやってほしいです。簡単な内容ですし、丁寧に手順やソースを書いてくれているので事故が起きることは無いです。安心して実験できます。

図解もわかりやすいです。簡単な図で的確に概念を表現しており、すぐに理解できると思います。分厚く大きな本ですが図とソースコードの占める割合が多いので、意外とすぐに読めると思います。

大学の情報学部とかはこのような内容を学んでいました。

おわりに

Linuxの仕組みということなので、サーバなどに使われているOSの仕組みの部分を知ることができます。大切な知識なのでプログラミングするのであれば知っておきたい内容ですが、実際そのまま何かの役に立つことは少ないと思います。

実行速度などに厳しい制限があるとかであれば、仕組みを知った上で最適化することがあると思いますが、カーネルなどの仕組みにまで踏み込むことはあまりないと思います。

設定とかいじっていたときに見慣れないエラーが出たとか、そういった特殊な場合には何かしら役に立つと思います。OSのの性能や稼働状況を確認するコマンドや出力の見方を教えてくれるので、手持ちのパソコンで色々実験してみるとおもしろいです。

[試して理解]Linuxのしくみ ~実験と図解で学ぶOSとハードウェアの基礎知識

【おすすめ読書】Graphic Recorder

Mon, 28 Jan 2019 00:00:00 GMT

グラフィックレコーディングに関する本です。グラレコの作例もたくさん載っており、見ていて楽しいです。

実際にイラストに起こすためのコツやサンプルに加えて、グラレコのあり方や目的なども学ぶことができます。会議を有意義にすすめるための工夫としてもかなり役に立つので良かったです。

ざっくり紹介

グラフィックレコーディングとは何か

どういうものなのかということや、どんな効果があるのかということを学びます。
短い文章をグラフィックに変えてみよう

グラフィックレコーディングの作り方です。小さなところから順番にやっていくので真似しながら実際に試すことができます。しっかり勘所を教えてくれるのですぐに役に立つ知識です。
話の全体をグラフィックで1枚の紙に整理してみよう

伝えるためのコツの紹介です。情報を人に伝えるときの基本みたいなことも教えてくれるので、グラフィックレコーディングに限らず参考になります。

グラフィックレコーディングならではの書き方もあるのでおもしろいです。
グラフィックレコーディングで課題解決をしよう

実際の会議ではこんなことが起きるぞ！という例から、それを解決するにはこうだ、という紹介です。会議が終わってから、これは有意義な時間だったのだろうか、と思うことは誰でもあると思います。そんな気持ちを持ったときに、ぜひこの本の内容を用いて課題を解決できるようになるといいです。

おわりに

ただのグラレコの参考ではなく、会議そのものを良くするための考え方や取り組みと、その手段としてのグラレコの使い方が書かれており、参考になりました。

会議の場でホワイトボードなどに整理を始めるのはなかなか勇気がいることですが、実際にやってみると場が整理されて役に立ちます。最初は難しいので挑戦して慣れていくのがいいです。できる人もあまりいないので貴重な能力だと思います。

話し合った内容が文字やイラストで残っていくので、しっかりと前に進むことができ手戻りが少ないです。いろいろな場面でグラフィックレコーディングが取り入れられていったらいいなと思います。

【実践技術書】実践Vim

Fri, 25 Jan 2019 00:00:00 GMT

Vimの標準機能について説明した本です。インストールしたまんまの状態のVimでできることが書いてあります。

Vimの概念にしっかりと目を当て、Vimを使ってテキスト編集やコーディングを効率化する方法を解説しています。

プラグインを入れるとどんどん便利になっていきますが、まずはこの本を読んで基礎的な操作をできるようになっておくのがいいです。基本的な操作から応用的な操作まで網羅的に体験することができますので、Vimに興味を持ち始めた人におすすめです。

121個のTips

Viｍを使ってテキスト編集をする上で使える操作を121個のTipsとして紹介しています。

各モードの説明もあれば、基本的なコマンドや組み合わせて使う際のコツや注意なども書いてあります。そもそもVimのことがあまりわかってない、という人にもかなりおすすめです。とりあえずサーバの設定くらいは書き換えられるようになった、くらいの人であればとても学べることが多いです。実はいろいろなことができ、テキスト編集などでかなり機能を持っています。

Vimの標準機能を学べる

Vimの標準機能に注目している本です。ですのでプラグインは全然出てきません。vimrcの変更もほとんどなく、インストールしたまんまのVimでできる操作を解説しています。 Vimのコマンドの考え方や概念についても触れているので、Vimについての深い理解を得られると思います。正式な用語なども出てくるので、他のVimmerとの共通言語として覚えておくと良いです。Vimのうまい使い方や設定の方法は、先輩Vimmerの人に教えてもらうのがおすすめです。

しかし、カスタマイズして使いたい、その例が知りたいという人には向いていません。そんな人でも、見落としたり気づいていない標準機能や使い方があるかもしれませんので、一度手にとって見てほしいです。

編集する例のテキストと操作したキーとその結果が書かれているので、わかりやすいです。本を読みながら1つずつ自分の環境でも試してみましょう。

おわりに

副題にもありますが、「思考のスピードで編集しよう」と言うことを考えると、編集操作はいろいろ工夫が必要になります。 Vimを使うことで、同じことの繰り返しを避けたり、複数の対象を選択して編集できたりします。使いこなせるようになれば、大きな成長ができると思います。

実践Vim　思考のスピードで編集しよう！ (アスキー書籍)

覚えておきたいコマンド

以下に覚えておきたい操作をメモしてます。自分用です。手元に印刷したりしておいて、覚えた・使いこなしたものは捨てていくと、コマンドを憶えるのに便利です。

行をコピー・移動

:t
:m

:3t7 3行目を7行目の下にコピー
:7m. 7行目を現在行の下に移動

ビジュアルモードで選択してから使うことで、rangeを複数行にすることも可能

選択範囲にノーマルモードのコマンドを実行

: nomal .

ビジュアルモードで選択したあとnomal .とかで選択範囲にコマンドを実行できる「.」ドットなら直前のコマンドの繰り返し。

:%nomal A; ファイル全行に末尾にセミコロン

ウインドウ操作

<C-w>s 水平に分割 上下に別れる
<C-w>v 垂直に分割 左右に別れる

<C-w>c ウインドウを閉じる

:vsplitとか:qでやっていましたが、この方法でもできたんですね。

アクティブなファイルのディレクトリの相対パス

:e %:h<Tab>

%で現在のファイル、:hでファイル名を除く、タブキーで展開するそうです。この操作をすれば現在編集中のファイルのディレクトリが展開されます。

キーバインドの

<Leader>はユーザー定義用の名前空間として設定されているらしく、自由に使えそう。
nnoremap <Leader>n nzz

デフォルトでは<Leader>は\ (逆スラッシュ)が割り当てられている。他のコマンドとバッティングしないか心配な場合はとりあえずこれで試すのが良さそう

マーク

mm mに場所をマーク
'm mにマークした場所に移動
`m mにマークした行の最初に移動

mM グローバルなMマーク
'M グローバルなMに移動

グローバルにすると編集セッション感で永続化されます。いつも:e $MYVIMRCでVIMRCを開いてましたが、一度mVでマークしておけば、'Vですぐに開けるようになりました。

ヤンクレジスタ

"Op ヤンクレジスタの中身を貼り付け

Oはヤンクしたやつのみ記録されるレジスタ

マッチしたハイライトを一時的に消す

:noh 一時的にハイライトを消す

次検索したときにはハイライトがつくようになります。

自動補完

<C-n> 通常
<C-x><C-n> 現在のバッファ
<C-x><C-i> インクルードされているファイル
<C-x><C-]> tagsのキーワード
<C-x><C-k> 辞書
<C-x><C-l> 行全体を補完
<C-x><C-f> ファイル名
<C-x><C-o> オムニ補完

【実践技術書】プログラマのためのDocker教科書

Fri, 25 Jan 2019 00:00:00 GMT

Dockerの一通りの操作や使い方が把握できます。Dockerの仕組みについても説明があるので、仕組みの部分についても理解ができます。 DockerだけでなくネットワークやOSの基礎的な部分についての内容も結構充実しているので、まさに教科書といった感じです。

Docker周りの応用的なコマンドや技術も紹介されているので、とりあえず試しでDocker使ったことあるくらいの人なら学べることがたくさんあると思います。

すでにわかっている人は復習になりますし、知らない人はここで必要な知識を身につけることができます。実際にDockerを使ってローカルに環境を用意したりといったこともやるので、実務でDockerを使うことになりそうという方はぜひ一度読んで見るといいです。

本の概要

以下の構成になっています。

システムインフラの知識

Dockerの理解に当たって必要な基礎知識です。 OSI基本参照モデルとか、OSのカーネルとか、オンプレミスかクラウドかといったような内容です。知っている人は飛ばしても大丈夫です。

関連する単語ごとに説明してくれるので、基本情報の復習になると思います。
コンテナ仮想化技術

コンテナについての知識です。コンテナ技術ができる歴史的な観点から、実際の動作の説明まで紹介されます。実務で使っている処理や動作の裏側や仕組みを知ることができるので、すでに使っている人も一読しておくといいです。もちろん知らなくても使えますが、何か起きたときに仕組みを知っていると対処がしやすくなります。
Dockerのインストール

実際にDockerをインストールして動かします。基本的なコマンドの使い方を一通り経験します。 Docker Hubなども使うので、Docker周りの一通りのサービスに触れることができます。
Dockerfileを使ったサーバ構築

Dockerfileを使ってサーバを構築します。諸々の設定をやって見る箇所なので丁寧に進めていくのがいいです。このへんまでできればローカルにDockerで環境を建てられるようになっているのではないかと思います。
Dockerイメージの共有

実務でDockerを使う場合、イメージ共有をすることになるのでここも重要だと思います。プライベートレジストリを作ってアップロード、ダウンロードを試すので、結構実用的な経験ができます。
複数コンテナの管理

DockerComposeを使って複数のコンテナを管理します。実際にWordpressシステムを構築するので、割とすぐに応用できると思います。
マルチホスト環境でのDocker

Docker Machineコマンドなどを使って実行環境を構成します。Docker Swarmを使ったクラスタ構成も試して見るのでちょっとむずかしくなりますが、この辺も一緒に学んでおくと便利になります。
クラウドでのDocker

クラウド環境で使うならこんな感じという情報です。さまざまなクラウド環境について, Dockerで実装するという前提で紹介してくれます。実際にDockerで何らかのサービスをたちあげるつもりであれば、大いに参考になると思います。

Dockerの教科書

教科書となっているだけあり、基礎的な知識から知ることができます。実際に手を動かす部分も、実務で使えるような内容なので参考になりました。 DockerだけでなくネットワークやOSのカーネル関連の知識も同時に学ぶことができます。とてもいい教科書でした。ネットワークやOSの理解の手助けになると思います。

Docker ComposeやCocker Machineなど周辺の便利な機能も一緒に使うことになります。Dockerの技術はどんどん成長していっている状況ですので、基礎の部分含めて学んでおくのはとても良いです。これからの環境構築には手放せないものになる予感があります。

おわりに

この本を読んで一通り試せば、Dockerについてほぼ困ることはないと思います。現場ごとの環境で躓くことは起きるかもしれませんが、基本的なことはわかっているので対応できるようになります。躓いたところは現場の先輩に質問しましょう、この本の内容が理解できていればわからないことはありません。勇気を持って質問すれば解決できると思います。

業務でDockerを使っているところは増えていると思います。いわれるがまま再構築するのも良いのですが、一度ローカルで試してみることをおすすめしたいです。思ったよりも簡単に試すことができるので、個人開発や勉強用の環境としてもおすすめです。

すでに第2版になっているくらいなので、結構技術の更新が盛んです。引き続きDocker関連の情報をキャッチアップしていきたいです。

【おすすめ読書】水平思考の世界

Thu, 24 Jan 2019 00:00:00 GMT

論理的に考える「垂直思考」ではなく、「水平思考」という考え方を鍛えることで、新しいアイデアなどを発見するために役に立つ、という本です。

プログラミングなどにおいては論理的な思考が求められます。しかし、突飛で革新的なアイデアを思いつくためには、一見飛躍したような考え方も必要なのかもしれません。

垂直思考とはどういうものか、水平思考とはどういうものなのかをしっかり定義して、それらを使い分けるための振る舞い方を学べます。

ざっくり紹介

論理的な思考はもちろん大切なことであるが、それについてしっかり定義した上で、それとは別の水平思考を考えてみようという内容です。

論理的な思考は、順序だって深く掘り進めていくような考え方で、一歩づつ正しいことを確かめながら進んでいきます。着実に進んでいくのですが、もしも掘る場所が間違っていた場合、ゴールにはたどり着けません。できるだけ速く気づく仕組みがあればいいですが、その時点まで進んできたためもったいなくて引き返しにくいそうです。

これに対して水平思考では、これまでの概念にとらわれずあちこち掘り下げてみる、という考え方です。闇雲にほっても答えにたどり着けるかわかりませんが、革新的なアイデアであったり答えの匂いに気づくことができるかもしれません。

複雑な図形をどうやって人に伝えるか、という問題を通して、以下に自分たちが水平思考を行えていないかに気づくことができます。

間違った場所を掘ることによって得られる知見もあります。しかも、なんだかんだ、人間はどちらか一方のみを使う！という状態にはなりづらいらしく、互いに作用しあっていい方にすすめるのだそうです。

おわりに

論理的思考が必要なことはもちろんのことだと思います。何か行き詰まったときなどには頭を切りかえて水平思考もできるようになるといいです。ミーティングでのアイデア出しであったり、何か企画の初めの段階などで必要になるかもしれません。両方の思考を使い分けることができると、マルチな才能で活躍できるのではないかと思います。

昔の発明家などもこの水平思考を使うことで、これまでの歴史から大きく飛躍するような発見ができたといいます。他人が出したアイデアを簡単なことだと論理的に解釈することは容易です。しかし、そのアイデアを思いつくまでにはいくつかの飛躍などを行い、あとから理論や根拠をつくるような思考法があったのかもしれません。

そうした思考の過程を体験することもでき、頭の体操にもなります。なにか考え尽くして行き詰まったときなどに、参考にしてみると新しい道が開けることもあるのではないかと思います。

【実践技術書】ブレイクスルー JavaScript

Wed, 23 Jan 2019 00:00:00 GMT

初心者から次のステップへ進むために、オブジェクト指向やSPAのことが書かれています。再利用性、保守性、拡張性を備えたプログラムを書くためのコツを学ぶことができます。

言語の基礎的なことはわかっている前提で、実務で使うような実装方法を紹介しています。

jQueryを使ってDOMの操作くらいならできるようになりました、くらいの人が次のステップへ進むために良さそうです。オブジェクト指向などについて知識がまったくないと、ちょっと難しいですが取っ掛かりとして読むのも良さそうです。

本の概要

「フロントエンドエンジニアとして超えるべき5つの壁」として5つの章に別れています。保守性や拡張性、再利用性などを高めるための実装方法のコツなどを知ることができ、一つレベルアップできると思います。

基本的にどのサンプルもソースコードの量はそれほど多くないです。書くのも読むのも比較的すぐにできると思います。

オブジェクト指向

プロトタイプ、クロージャ、オブザーバ、thisの仕様と使い方を学ぶことができます。すぐに使いこなせるものではないと思うので、できるとこから利用していくのがいいです。他の人のプログラミングを読むときの助けになることもあると思います。

リアルタイムで文字数と必須入力のバリデーションを行うフォームを練習で作ります。
UI・インタラクティブ表現

イベント処理についての勉強です画像をモーダルで表示するプログラムを作りながら、clickイベントなどの実装を行います。
グラフィック表現

Canvasを使っての表現を練習します。あまり使う機会は無い？でしょうか。基本的な使い方を知っておくといざというときに困らないので、さくっと学んでおくのがいいです。パーティクルシステムという、ぼやっとした円が動き回って重なったりするやつを実装します。
Ajax・API連携・データ検索

Ajaxでデータを取得して、取得したデータに対して加工を行い、表示します。 PromiseやDeferredなどを利用して、非同期通信を実装します。この辺はよく使うものなのでしっかり身につけたいです。

Underscore.jsを利用します。何かよくわからず使っていることがあるので、この機会に概要だけでも確認していきたいです。

フィルタ・ソート機能付きの表を作成します。この章からサーバを用意しないとプログラムが正常に動作しません。XAMPPなどのローカルサーバを用意するとか、Github pagesを使ってもいいと思います。
シングルページアプリケーション

SPAのページを作成します。ライブラリなどは使わずに実装することで概念を学ぶことができます。 URLハンドリングや、ページ切替時のアニメーションなども実装します。

主にルーターと呼ばれるようなURL管理を行う機能の実装です。

本の特徴

入門書ではないので、ある程度理解している人向けです。JavaScript、jQueryを使ってDOMの操作ができるようになった！くらいの人なら、ちょうど得られる知見は多いと思います。

コードの説明はちょっとだけ足りないことなどがあります。サンプルコードをダウンロードしておき、詰まったら確認しながら進むのがよいです。サンプルコードにコメントが無いので、ちょっとわかりにくいと思いました。コメントがあったらもっと良かったです。

オブジェクト指向の教科書でもあるので、考え方に全く触れたことのない人にはちょっと難しいかもしれません。ですが最初はそんなものなのでとりあえず進むのがいいと思います。詳細なオブジェクト指向の考え方やデザインパターンは別の本で調べてみることをおすすめします。

フロントエンドのソースコードは複雑になりがちです。非同期でリクエストを投げたりなど、処理自体も複雑になってきているので、そこを解決するような実装方法を紹介しています。再利用性や保守性、拡張性を考慮したソースコードを書けるようになるといいことばかりです。あとから修正や改修を行う人または未来の自分のためになるので、身につけておくと良いです。

おわりに

ある程度フロントエンドの実装ができるようになった人で、一度立ち止まってオブジェクト指向の考え方を身に着けたい人などにおすすめです。自分の書いたソースは拡張性、保守性、再利用性が悪いなあと感じたら、一度読んでみるといいです。周りからも一目置かれるのではないでしょうか。

Ajaxによる非同期通信なども学べるので、WEBフロントエンドで必要になる知識の概要は知ることができます。より詳細な実装は、気に入ったWEBサイトなどを見て学ぶのがいいと思います。オブジェクト指向は意識的につかていかないと身につかないと思うので、初心者こど早めに知っておきたい情報かなと思います。

【おすすめ読書】アイデアのつくり方

Wed, 23 Jan 2019 00:00:00 GMT

「アイデアとは既存の要素の新しい組み合わせ以外の何ものでもない」というやつです。アイデアのつくりかたを5つの段階で説明しています。

調べて、観察して、一度放棄して、思いついて、チェックする。

何事にも技術を学ぶときは、第1に原理、第2に方法です。これはアイデアについても同じで、その学び方をしっかり教えてくれます。広告などを見て、おやっと心が動くことが少しでもあればだれでも何らかの想像力を持っている証拠だそうです。そこから懸命に努力することで、その才能を伸ばし想像力をいっそう高めることができます。

ざっくり紹介

アイデアの作成はたとえば車の製造と同じように一定の明確な過程があり、その技術を修練することが有効に使いこなす秘訣です。そのことの重要さと方法をしっかりと学ぶことができます。

ページ数も少なく小さい本なのですが、ためになることがたくさん詰まっています。ただ、わかっているだけでは簡単には実行できないこと、かなり強い知的労働になることも同時に書いています。この本を読んだからといって、誰でも真似できるものではないぞということです。

原理と法則が全てであり、断片的な知識は役に立ちません。特定のアイデアをどこから探すかということよりも、すべてのアイデアの源泉となる原理と方法の学び方が何よりも重要です。

以下気になった部分の抜粋・メモです。

原理

アイデアとは既存の要素の新しい組み合わせ以外の何ものでもない
新しい組み合わせに導く才能は、事物の関連性を導く才能に依存する

方法

アイデアを生み出す技術は以下の5つの段階に分かれています。それらを順番に通ることで、アイデアを生み出すことができます。ただし、前の段階が完全に完了するまでは次へ入ってはいけません。

資料を収集する

特殊資料と一般的資料を集めます。
特殊資料とは、対象に関する知識です。広告で言えば商品の情報や消費者の情報になります。

一般資料とは、人生とこの世の種々様々な出来事のことです。これは日々の生活の中で常に行うべきことでいろんなものに興味を持つことが大切です
資料を咀嚼する

資料の一つ一つを取り上げ触ってみたり、角度を変えてみたりします。いくつか並べてみたり重ねてみたり、いろいろいじってみます。何か思いつくことがあれば紙などに書き出します。ごちゃごちゃになって何も思いつかなくなるまでやります。
問題を放棄する

一旦考えるのをやめて心の外に放り出します。無意識な領域においてそこで働いてくれるのを待ちますなにか想像力や感情を刺激するものに心を移します。音楽とか映画とか本を読んだりとかです。
アイデアが訪れる

全く何も出てこないのですが、ふとした時に急に頭の中に降りてきます。厠上・馬上・枕上と言うやつですね。アイデアを探す心の緊張を説いたときに降りてきます。無意識の領域や深層心理みたいなところからふっと湧いてくるような感じですね。
具体化する

出てきたアイデアを具体的に形にします。すぐに作ることができない場合でもそのまましまいこんだりしないで、書き出したり人に聞いてもらったり批評してもらったりしましょう。この段階で消えてしまうアイデアは多いですがそれでも勇気を持って行う必要があります。

おわりに

アイデアの作り方について明確な方法を示してくれる本です。実際にやろうと思うとかなり頭を使いますし、ラクをしようと次へ次へと進んでしまったりします。一つ一つの段階を突き詰めて行い、しっかり終わらせていくことが大切です。

何度も読んだ本ですが、読むたびにこういうことだったなあと感心させられることがあります。何か新しいアイデアの発案などに行き詰まったときには、この本を読んでゆっくり時間を取って考えてみるのもいいと思います。

Emmet 操作メモ

Tue, 22 Jan 2019 00:00:00 GMT

HTML、CSSを省略して書くことができる「Emmet」の使い方を書こうと思います。

フロントエンドの実装などでHTMLやCSSを書く際に、Emmetを使えばかなり作業効率を上げられます。一度使うと手放せなくなるツールです。慣れると何倍もの速さで記述ができるようになります。

省略形をなかなか覚えられないので、都度この記事に書いて覚えようと思います。とりあえずよく使うものからメモしておいて、どんどん継ぎ足しながら整理していく方針です。

ちなみに私はvimで利用しています。他のエディタやIDEでも使えますので調べて使ってみてください。Vimでは,で展開するように設定しています。

.vimrcに以下を記述  

NeoBundle 'mattn/emmet-vim'  
let g:user_emmet_leader_key='<c-e>'

以下に公式のチートシートがあるのでこれを印刷して手元においておくのがおすすめです。
公式のチートシート

HTML

HTMLのalias

html:5  
!

階層

ul>li*3

並列

div+div+div

上の階層へ

div>p>span+em^bq

グループ化

div>(header>ul>li*2>a)+footer>p

id class

div#idname+div.classname

属性

div[data-index=index data-name=name]

連番

img[src=photo$$.jpg]*3

タグ内のテキスト

div{hello world}

CSS

概要

w100p+m10

width: 100%;
margin: 10px;

単位

p %
e em
x ex

important

m10e! margin: 10em !important;

vender prefixes

-bdrs

-webkit-border-radius: ;
-moz-border-radius: ;
border-radius: ;


w webkit
m moz
s ms
o o

配置

pos:a position:absolute;

d:b display:block;
d:f display:flex;
d:if display:inline-flex;
d:i display:inline;

色

c:ra color:rgba(0, 0, 0, .5);

マージン

m margin:;
m:a margin:auto;
mt margin-top:;

サイジング

w width:;
w:a width:auto;
h height:;
maw max-width:;
maw:n max-width:none;
mih min-height:;

border

bd border:;
bd+ border:1px solid #000;

text

va:t vertical-align:top;
ta:c text-align:center;
td:n text-decoration:none;
td:u text-decoration:underline;

おわりに

ざっくり個人的に使いそうなもの、忘れそうなものを記載しています。とても入力が簡単になるので便利です。引き続きこれは便利というものが合ったら更新・整理します。

初心者のうちは写経などでコーディングをする機会は多いと思います。早めにこのような便利なツールの使い方を覚えておきましょう。今時写経なんてしないんでしょうか。動画教材みて完了なのかもしれませんが、このようなツールに触れつつHTML/CSSを書いてみるのも理解が深まるのでおすすめです。

上にも書いてますが、チートシートを印刷して手元に置きながら使ってみるのが便利です。Vimやtmuxのショートカットなども私はそうやって覚えました。

【おすすめ読書】漫画君たちはどう生きるか

Mon, 21 Jan 2019 00:00:00 GMT

去年話題になっていた本です。気になって購入したもののずっと積読になっていたので、読みました。

原作の方も読んだことあるのですが、漫画になっているので簡単に読めます。普段本をあまり読まない人におすすめです。章の間には手紙のような形で文字だけのページもありますが、それほど長くはないので十分に読み切れると思います。

大雑把にいうと、「道徳」に関する本です。誰もが子供の頃になんとなく経験する体験について、どうすればいいのか、どのように考えればいいのかということを教えられます。大人になった今考えてみると単純なことなのですが、子供の頃はこんな考え方できなかったなあとか。大人になっても未だにどうすればいいのかわからないことだらけだなあ、としみじみ考えさせられます。主人公のコペルくんと一緒に悩んでいくことで、いろいろな価値観に気づくことができます。長い間愛されている本だけ合って、ためになることはたくさん詰まっています。

ざっくり紹介

道徳や倫理観についての本という印象です。できれば主人公のコペルくんと同じくらいの年齢の子供に読んでほしい内容です。しかし、大人でも十分に楽しめると思います。

主人公のコペルくんが学校のことでいろいろ悩みや疑問を抱えます。近所に住むおじさんが悩みを聞いて、少しだけアドバイスをしてあげて、それを出発点として、色々考えを深めていきます。少年らしい悩みの中で、人生の大切なことに気づいていくような成長があり、読んでいるこちらもハッとさせられるようなものもあります。

学校で起きるいじめであったり、一見貧乏に見える暮らしをする友達のこと、友達との約束や仲違いなどが出てきます。自分たちの学生生活にも起こっていた、または起こりうるような事件ばかりなので、実際に学校に通う小中学生に読んでほしいです。子育ての方針などの参考などにもなりそうです。

おわりに

漫画なので簡単に読めます。より深く読みたいと思った場合は原作を手にとって見るといいと思います。

道徳や倫理を学ぶというのは意識的にしていたのかよくわからないですね。なんとなく気がついたら身につけていたのか、誰かに教えられていたのか、よくわからないです。学校には道徳のテストもなかったように思います。道徳などを学ぶ手段としてこの本を読むことは、とても効果がありそうです。

xkbでキーバインドを変更する（Ubuntu）

Fri, 18 Jan 2019 00:00:00 GMT

Ubuntuにおけるキーバインド変更の方法です。「xkb」を使って設定します。

以前業務でWindowsを使っていたときはAutoHotKeyでキーバインドを変更していました。とても便利だったのでUbuntuでもやりたいと思っていたのですが、Ubuntuで設定しないまま結構たっていました。

AutoHotKeyほどテクニカルのことはできなさそうですが、別のキーに割り当てるくらいはできそうなのでxkbを使って対応しようと思います。

作業の効率、特にVimの効率が上がるのでやっておきます。以下に手順とxkbの詳細を残しておくので何かの参考になればと思います。

結論を先に書くと

以下にキーバインド設定ファイルを作成します。

~/.xkb/symbols/myswap

partial modifier_keys
xkb_symbols "swapkeys" {
    key <AB11> { [ underscore, backslash ] };
    key <MUHE>  { [ Escape, Escape ] };
    key <HENK>  { [ BackSpace, BackSpace] };
    key <HKTG>  { [ Return, Return] };
    key <LALT>  { [ Control_L, Control_L] };
    key <LCTL>  { [ Alt_L, Alt_L] };
};

以下に設定ファイルの呼び出しを定義します。
各環境で内容が異なる場合があるので、変更前に一度設定内容を確認しましょう。

~/.xkb/keymap/myxkb

xkb_keymap {
    xkb_keycodes  { include "evdev+aliases(qwerty)" };
    xkb_types     { include "complete"  };
    xkb_compat    { include "complete"  };
    xkb_symbols   { include "pc+jp+us:2+inet(evdev)+myswap(swapkeys)"   };
    xkb_geometry  { include "pc(pc105)" };
};

以下のコマンドを実行して設定を反映させます。コマンドはbash起動時などに実行されるようにするのがおすすめです。

xkbcomp -I$HOME/.xkb ~/.xkb/keymap/mykbd $DISPLAY 2> /dev/null

概要

ざっくり以下の手順です。

xkbの設定を確認する
キーコード・キーシンボルを探す
キーバインド設定ファイルを作成
xkb設定ファイルを作成
設定を反映させるコマンドを実行

以下詳細な手順を記載しています。各環境に合わせて設定してください。

xkbの設定を確認する

以下のコマンドを実行してxkbの設定を確認します。

setxkbmap -print

以下のような出力を得られます。現在有効なxkbの設定です。

xkb_keymap {
    xkb_keycodes  { include "evdev+aliases(qwerty)" };
    xkb_types     { include "complete"      };
    xkb_compat    { include "complete"      };
    xkb_symbols   { include "pc+jp+us:2+inet(evdev)"        };
    xkb_geometry  { include "pc(pc105)"     };
};

出力内容の意味

以下の順に設定されます。
今回変更するのはsymbolsの設定です。設定したキーバインドのルールを作成してsymbolsの定義に追加します。

geometry

物理キーボードの規格を指定指定します。英字キーボードか日本語キーボードかです。
type

キー配置のレベルとグループを定義します。

レベルとは、修飾キーで1つのキーに複数の機能をもたせるための設定です。aとAとかのことです。キーのレベル1に通常入力（a）、レベル2に Shift キー押下状態での機能（A）が例です。レベルは2より多く設定できるそうです。

グループとは、キーボード全体の配置を入れ替えるための設定です。英数入力と日本語入力の切り替えのことです。詳細はよくわかりません。グループは 8個まで設定できるそうです。
compat

type に対応するキーマップの設定です。
keycodes

キーコードとキーシンボルの対応関係を設定します。物理キーボードのキーに割り当てられた1~3桁の数字がキーコードです。キーシンボルはキーコードに対して分かりやすい名称を対応させたものになります。
symbols

キーシンボルに「a/A を入力する」「shift キーの機能をもたせる」といった役割を割り当てます。

キーコード・キーシンボルを探す

xev を使ってキーコードを調べます

xev

コマンドを実行すると入力待ちになるので、キーを入力します。すると入力したキーに対応するキーコード（1~3桁の数字）が出力されます。それをメモしておきます。以下の出力のkeycode ..のところです。

KeyRelease event, serial 37, synthetic NO, window 0x3e00001,
    root 0x190, subw 0x0, time 872427349, (569,389), root:(1940,496),
    state 0x0, keycode 54 (keysym 0x63, c), same_screen YES,
    XLookupString gives 1 bytes: (63) "c"
    XFilterEvent returns: False

例えば無変換は102、変換は100、ひらがなカタカナは101でした。

キーコードを使ってキーシンボルを探します

以下のファイルに対応が書かれています。開いて検索しましょう。

/usr/share/X11/xkb/keycodes/の evdevとaliasesに書かれているものが有効なものです。 aliasesの方はキーシンボルのエイリアスが書かれているものなので、ここでは必要ないです。evdevの方のみ確認しましょう。上記でメモしたキーコードを探して対応するキーシンボルをメモします。

例えば102は「MUHE」、100は「HENK」、101は「HKTG」でした。これで変更したいキーのキーシンボルがわかりました。

キーバインド設定ファイルを作成

ディレクトリを作成

mkdir  ~/.xkb/keymap

以下のような設定ファイルを作成します。

~/.xkb/keymap/myswap

partial modifier_keys
xkb_symbols "swapkeys" {
  key <MUHE>  { [ Escape,Escape ] };
  key <HENK>  { [ Return ] };
  key <HKTG>  { [ BackSpace,Delete ] };
  replace key <LCTL>  { [ Caps_Lock ] };
  replace key <CAPS> { [ Control_L ] };
};

変換・無変換をそれぞれReturn・Escに割り当てること、カタカナキーをバックスペースとデリート、ctrlとcaps lockの入れ替えをしています。カンマ区切りの箇所はレベルを指定しています。BackSpace,Deleteなので通常はバックスペースで、シフト押しながらでデリートです。 swapkeysのところは任意のルール名を定義しています。あとで設定を反映するときに使います。

xkb設定ファイルを作成

ディレクトリを作成 mkdir ~/.xkb/symbols

以下のファイルを作成

~/.xkb/keymap/mykbd

xkb_keymap {
    xkb_keycodes  { include "evdev+aliases(qwerty)" };
    xkb_types     { include "complete"  };
    xkb_compat    { include "complete"  };
    xkb_symbols   { include "pc+us+inet(evdev)+myswap(swapkeys)"    };
    xkb_geometry  { include "pc(pc105)" };
};

xkb_symbols の箇所に追記しています。先程定義したルールのルール名を追加します。

パソコンによって定義内容が違うかもしれませんので、上記をまるごとコピペはしないほうがよいです。自身の環境の設定内容を一度確認した上で追加分のルールを足しましょう。

設定を反映させるコマンドを実行

以下のコマンドを実行することで上記の設定ファイルが有効になり、キーバインドの変更が反映されます。出力をnullに送っているのは、アラートメッセージが出るためです。こうしないと設定が反映されない様子でしたので、追加しておきます。

xkbcomp -I$HOME/.xkb ~/.xkb/keymap/mykbd $DISPLAY 2> /dev/null

ログインのたびにコマンドを実行することになるので、.bashrcなどに記述して自動で実行されるようにするのがおすすめです。

これでキーバインドが変更されました。特に親指の位置にある「変換」「無変換」は仕事してない、かつ邪魔なので、早いうちに何か他のものに変えるのがおすすめです。caps lockも邪魔なので変えてしまいましょう。

【おすすめ読書】「話のおもしろい人」の法則

Thu, 17 Jan 2019 00:00:00 GMT

放送作家である著者がおもしろいと言われたい人以外にも、雑談が続かないとかちょっと印象に残るような話がしたいとかでもおすすめです。

仕事をすすめる上で関係を良くするような雑談や導入ができたらいいなといつも思います。しかし、なかなかうまくできないことが多いです。

才能によるものなのかなと悲しくなったりもしますが、著者は面白い人には法則がある、と教えてくれます。法則を再現しようと思うと準備などが必要です。ただ実際こんな人がいたら面白いだろうなと思うようなものばかりでした。ちょっと準備をしておくだけでおもしろさがプラスされるのであれば、お得かなと私は思います。

ちょっとした休憩時間の会話はもちろんですが、採用試験や面接なんかで自分をアピールするときの参考にもなると思います。

ざっくり紹介

おもしろい人の法則を48の法則にして紹介しています。面白い人はこう、つまらない人はこう、と対比させながら紹介していくので、自分が当てはまっていないかチエックすることもできます。具体的な話しの内容も書いてあって参考になります。

重要なことは「何を」「どう話すか」よりも、「誰に」話すかをしっかり抑えることだそうです。おもしろいかどうかを決めるのは話を聞いてくれる相手なので、相手にあわせた話し方や内容を考えることが大切になります。

中には面白くするためも力技なんかも紹介されています。ガリガリ君を買い占めてお客さんのところにいくとか。普通なら絶対にやらないことですが、ただコンビニで買い占めていくだけです。突っ込まれる点ができて盛り上がるはずで、たしかになと思いました。サプライズは大抵の人が好きなので、それを利用しています。常に何かしらのサプライズを用意しておくのが、おもしろい人になる近道なのかもしれません。

面白くするために事前の準備などを行います。好きなキャラのキーホルダーをつけていくとか、なかなかやらないことばかりですが、いざやろうと思えばすぐできることばかりです。

おわりに

具体的な立ち居振る舞いやテクニックが紹介されており、とても参考になります。仕事の場面でも日常的な友人との場面でも使えそうなものばかりでした。次に人と合うときには試してみようかなと思いました。

印象に残れば記憶にも残りやすいので、覚えてもらうコツにもなります。採用面接であったり、次の仕事につなげるような営業であったり、様々な場面で使えるテクニックが満載です。

【おすすめ読書】最速の仕事術はプログラマーが知っている

Thu, 17 Jan 2019 00:00:00 GMT

仕事を速くすすめるための方法や考え方を紹介しています。著者がプログラマーとして働いた中で得た経験をもとに身に着けた仕事術です。

プログラマーやITエンジニアの人はもちろんですし、プログラマー以外の方にもおすすめです。

時代が進むにあたり情報を取り扱う仕事が増えています。そんな中でずっと情報を取り扱ってきたプログラマーという職業は、他の職業よりもそのことに触れており身近なものとして捉えています。そんなプログラマーこそが最速の仕事術を身に着けているのではないかという前提で考えています。

ざっくり紹介

プログラマーが知っている、どんな業種・職種でも役立つようなテクニックが紹介されています。逆に、ずばりプログラミングそのもののコツなどはありません。プログラミングに関する知識ではなく、それ以外の業務に関するコツといったところでしょうか。

大きく分けて以下の5点で紹介しています

ムダをなくす
情報の整理
段取り
チーム
ビジネス設計

「DRY」などのプログラミングでも使われるような原則を用いて、それを一般的な仕事に当てはめて工夫しています。個人のタスクのみでなく、チームの動かし方やビジネス的な目線を持つことなども紹介されており、読む前と後ではなんとなく視野の高さや広さが変わるのではないかと思います。いつかはマネージャーとして活躍したいとか、後輩ができて上司になったという場面においても役立つことがあります。

段取り術やマネジメント術なんかもIT業界ではどんどん更新されていきますが、他の業種ではどうでしょうかね？

タスク管理ツールとかも色々便利なものがあります。もしかするとプログラマーやエンジニアには当たり前のものも、ほかの業種では全く知らないということも多々ありそうです。

問題解決の方法として、問題を分析して細かく分断するといったものや、あらかじめうまく行かなかったときのことを考えておくなども紹介されています。プログラミングするときには当たり前に必要になる考え方を一般的な仕事に当てはめて紹介しています。

日々の業務の中で身につけた考え方や問題解決法を他の場所でも使えるようになると、効率が間違いなく良くなります。

おわりに

確かにプログラミングする上で効率化というのはとても大切なことかと思います。何でも効率化すればいいというものではありませんが、できるところはどんどんやっていくのがいいですね。

プログラマーに聞いてみればいろいろなコツや独自の考え方を持っていると思います。ですので、プログラマーの友達と仲良くなることをおすすめします。便利なツールとかアプリとか紹介してくれると思います。考え方なんかもいろいろあるのでたまに変な人もいると思いますが、それも面白いところだと思ってください。

ブログをNetlifyに移動しました

Wed, 16 Jan 2019 00:00:00 GMT

このブログはGatsbyで生成した静的なファイルを、Firebaseでホスティングしていました。このたび、Netlifyへ移行しこちらで発信するようにしました。かなり便利です。

このような便利なサービスがどんどん出てきますね。使ってみてよかったです。 Netlifyでブログを発信することにした経緯と基本的な情報を書いておきます。

手順については以下の記事で記録しておきます、合わせて参考にしていただければと思います。
NetlifyでGatsbyブログを発信する手順

なぜFirebaseをやめるか

無料枠のアカウントを使っていたのですが、ファイルアップロードの容量制限に到達してしまいました。これ以上は有料なプランにしないと運用できなくなってしまいました。

詳細には以下の記事に書いていますが、容量計算の考え方が「これまでのデプロイでアップロードした累計のファイルサイズ」となっているため、実際のコンテンツのサイズよりも何倍も容量を消費していました。

Firebaseでブログをつくるのはおすすめできない

容量が1GBまでというのも原因としてあります。有料のアカウントを使うことで10GBまたは従量課金にすることができますが、あっという間にそれもいっぱいになる可能性があるので諦めました。

Netlifyとは

ホスティングサービスです。GitHub pagesやFirebase Hostingと同じです。ほかにも結構いろいろなことに使えるようです。静的コンテンツをホスティングできます。

特徴

ビルドやデプロイを自動で行う
あんまり信じてなかったんですが簡単にできました。とても便利です。

FirebaseやGitHub Pagesでは、ローカルでgatsby buildして、public/以下に生成される静的なソースをデプロイする必要がありました。しかし、Netlifyではビルドを代わりにやってくれます。

ですので、src/以下のファイルとgatsby-config.jsやgatsby-node.js、package.json などの設定ファイルのみをアップロードしておくだけでよいです。srcへの変更を察知して、Netlifyがgatsby buildを実行して、public/以下に出力されるファイルを自動でデプロイして公開してくれます。

もちろんGatsby pagesのようなイメージで、public/以下のみをアップロードしておいて、ローカルでgatsby buildをおこなってpublic/以下をアップロードして更新する方法も可能です。

Gatsby以外のブログ生成アプリにも対応しています。以下は対応してそうです。他にも使えるものがあるかもしれません
```
+ Jekyll
+ Grunt
+ Middleman
+ Hexo
+ Hugo
+ Gatsby
+ VuePress
```
GitHubなどと連携できる
GitHub・Gitlab・Bitbucketと連携できます。リポジトリからソースを持ってきてビルドできます。リポジトリにプッシュされたことをトリガーに、自動ビルド→自動デプロイができます。
HTTP/2とCDN利用によって高速
HTTP/2対応していることと、CDNを使わせてもらえるので速いはずです。これらも勝手に設定してくれます。逆に詳細に設定変えることはできなさそうです。
カスタムドメイン
独自ドメインを設定できます。お名前ドットコムなどで取得したドメインを使ってサイトを発信することができます。
SSLにも対応
無料でSSL証明書を用意してくれます。ですのでHTTPSでの配信も無料で行なえます。
アカウント作成
無料枠はメールアドレスやGitHubなどのアカウントを使って利用できます。クレジットカードの登録は必要ありませんでした。

フリープランだととりあえず以下の制限になっています。(2019/01/16時点）
```
ネットワーク転送量：100GB/月  
容量：100GB  
デプロイ時のAPIリクエスト: 500リクエスト/分、3デプロイ/分
```
チーム向けのプランもあるので、通常の無料枠では複数人での管理はできないと思います。

詳細は以下（英語です、そのうち訳してみます）
https://www.netlify.com/tos/

つかっているもの

Gatsby

node.jsとReactによる静的ブログ生成ができます。詳細なことはここには書きませんが、SPAもPWAも対応できるのでおすすめです。

記事はマークダウン形式で書いています。

GitHub

ソースの管理はGitHubを使っています。最近プライベートリポジトリが無料枠でも使えるようになったので利用しています。

Netlify

上記で説明している静的コンテンツのホスティングサービスです。

やってみた感想

便利でした。実際のサイトの発信もいまのところ問題なさそうです。

ローカルでsrc/以下のマークダウンファイルを作成・編集して、gitでコミット、GitHubへプッシュを行えば、 Netlifyが感知してbuild、deployをやってくれます。

簡単にサイトを公開できました。これからはローカルでのビルドが必要なくなるのでとても快適です。手順は以下の記事に書いてます。参考になれば。
NetlifyでGatsbyブログを発信する手順

懸念

1点、使っている容量等を確認できる画面が無い？ので心配です。容量使いすぎたりすると、何らかの形でお知らせされるのだと思います。

NetlifyでGatsbyブログを発信する手順

Wed, 16 Jan 2019 00:00:00 GMT

Netlifyを利用してGatsbyで生成したブログを発信する手順です。これまではFirebaseを利用していましたが、Netlifyに移動したのでその時の手順を記載しています。

HTTPSにも対応してくれますし、ビルド・デプロイも変わりにやってくれるので快適です。

以下の記事にてNetlifyで発信する経緯を書いてます。
ブログをNetlifyに移動しました

すでにGatsbyでサイトをビルドするとこまではやってある前提です。
そのへんの情報も知りたい方はこちらへ
Gatsby+Firebaseを利用したブログの作り方

概要

localで用意したGatsbyのソースと設定ファイルをGitHubにコミットします。
NetlifyでGitHubとの連携をおこない、コミットしたソースコードを取得します。
Netlifyでビルド・デプロイを行いサイトを発信します。
独自ドメインなどの設定を行います。

+ GitHub
    + GitHubにリポジトリ作成
+ Netlify
    + Netlifyでアカウント作成
    + 新しいサイトを作成
    + リポジトリを選択
    + buildコマンドと出力ディレクトリを設定
    + 初回のビルド
    + アクセスして確認
+ GitHubへプッシュ
+ 独自ドメインの接続
    + ドメインの入力
    + DNSのレコード設定
    + SSL証明書の発行を待つ
+ 完了

詳細

GitHub

GitHubにリポジトリを作成

ローカルのGatsbyで利用するソースコードをコミットしてプッシュします。
以下のようなファイルとディレクトリがコミットされると思います。

src/
    +…
static/
    +…
gatsby-config.js
gatsby-node.js
package.json
README.md

ビルド時に生成されるpublic/以下の実際の静的コンテンツは不要です。 src/以下とその他設定ファイルが必要になります。

プライベートリポジトリにしても問題ないです。
変更方法はこちらを参考にしてみてください。
GitHubのプライベートリポジトリが無料枠でも使えるようになった

Netlify

Netlifyのサイト

Netlifyでアカウント作成

GitHubのアカウントを使って連携します。メールアドレス等使ってアカウントを作成することもできますが、いずれかのソース管理サービスを連携することになりますので、最初から連携してしまえばいいと思います。

GitHub側で許可するかどうか質問されるので許可しましょう。

新しいサイトを作成

もろもろの入力をすませると、管理画面に移動します。 New site from Git を選択し、GitHubを選択します。

リポジトリを選択

GitHubと連携できていればリポジトリ選択ができますので、先程GitHubに作成したリポジトリを選択します。該当のリポジトリが選択できない場合は、リポジトリごとにNetlifyとの連携を確認するようになっています。 GitHub側でリポジトリ単位で連携を許可する必要があります。

下の方に「Configure the Netlify app on GitHub.」というリンクがあるのでそこからアクセスして設定の変更をしましょう。

build コマンドと出力ディレクトリを設定

デプロイに利用するブランチやビルドの設定を行います。

ブランチは実際に利用するものを選んでください。私は特に変更の必要はないのでmasterにしています。
Build commandにはgatsby build
Publish directoryにはpublic

を設定します。Gatsbyの方でデフォルトの設定で利用していればこれで問題ないです。出力先を別のディレクトリにしているとか、ビルド時に何らかのオプションを設定しているとかであれば、ここに入力しておけば反映されます。

ちなみに両方空にしておくと、リポジトリのソースがまるごとデプロイされるようです。もしも、ビルドをローカルで行って、生成されたファイルのみを直接デプロイしたい場合はこれらを空にします。

初回のビルド

下部の「Deploy site」を選択すると、デプロイが行われます。

自動的にビルドコマンド（gatsby build）が実行され、public以下に出力されるファイルがデプロイして公開されます。ログが表示されるので何かあればそこに出力されます。うまく行かなかった場合などはこのログを見て対応しましょう。

package.jsonにプラグインの記載が足りない場合や時間がかかりすぎた場合などあるかと思います。どうやらビルドに15分以上かかると失敗するそうです。サイトが大きい場合は注意してください。

アクセスして確認する

ビルドが正常完了して入れば、ビルド履歴のところが「PUBLISHED」になっています。デプロイしたサイトのURLが与えられています。画面上のリンクからアクセスしてブログが発信されていることが確認できます。

サイト名が最初は長い文字列になっています。設定から名前を変更できるのでやっておくと良いです。URLも変わります。

GitHubへプッシュ

ここまででとりあえずサイトは公開されました。

以降の更新はGitHubにプッシュすると自動でビルド・デプロイが行われます。設定を変更すれば自動で行うかどうかを変更できます。

GitHubの該当するリポジトリにpushすると、自動的にNetlifyが感知してビルドを行います。正常にビルドが完了すればpublic/以下のファイルがデプロイされて公開されます。したがって、ローカルでgatsby buildコマンドを実行する必要はなくなりました。ローカルのpublic/以下のファイルも必要ありません。

独自ドメインの接続

サイトの管理画面に「Domain Setting」のリンクがあります。クリックすると設定画面に遷移します。（Settingタブからもアクセスできます。）

ドメインの入力

「Custom domains」の項目内の「Add custom domain」を選択するとドメインを入力するフォームが表示されます。そこに自分の持っているドメインを入力します。

「Custom domains」の項目に入力したドメインが追加されます。ただし、この時点では権限を持っているか怪しいので、「Check DNS configuration」と表示されます。まだドメインにアクセスしてもブログは表示されません

DNSのレコード設定

「Check DNS configuration」をクリックすると、設定方法が表示されます。設定すべきAレコードのIPが表示されますので、その内容をメモしてDNSに設定します。

私の場合は独自ドメインをお名前ドットコムで取得しているので、お名前ドットコムの管理画面で設定しました。設定変更後しばらく待つと反映されます。

「Check DNS configuration」の文字が消えてドメインが緑色の文字になったら完了です。権限が認められました。

SSL証明書の発行を待つ

自動的にSSL証明書が作られます。しばらく時間がかかりますが、1晩たったら反映されていました。「Your site has HTTPS enabled」と表示されるようになります。これでHTTPSでのアクセスもできるようになっています。

完了

以上でNetlifyでGatsbyブログを発信する手順は完了です。他にもフォームを作ったりできる？だったり、気になる情報が満載なので、引き続き色々触ってみようと思います。

使ってみてかなり便利だったので、とりあえずはNetlifyでGatsbyブログをホスティングしようと思います。これでもなにかうまく行かないようだったら、AWSでしょうかね。

Firebaseでブログつくるのはおすすめできない

Mon, 14 Jan 2019 00:00:00 GMT

このブログはFirebaseのHostingで発信しているのですが、あっというまに容量の上限に近づいてしまいました。無料枠の上限なので有料枠に移行すれば解決できますが、それもすぐにいっぱいになりそうなので移動を考え中です。

静的なLPなどであればかなりおすすめですが、継続的にコンテンツを増やしいていくブログを書くとなったら別のサービスを利用したほうが良さそうです。

Firebase Hosting

Firebaseに用意されている機能の一つで静的なコンテンツを発信できます。HTML・JS・CSSを発信することができます。RubyやJavaなどを使ってサーバサイドで動的な処理をすることはできません。

ただしFirebase のFunctionsを使えば、動的な処理を定義することができるようです。こちらはまだ使ってないので詳細はわかりません。

いいところ

いいところを先に書いておきます。

HTTPS

Firebaseによって自動でSSL証明書が発行されるので、ドメインを接続すれば自動でHTTPSでの発信ができます。

CDNでの配信

CDNが用意されているようでコンテンツが勝手にCDNを通して配信されます。自分で用意する必要はありません。たまにブログの更新などがすぐに反映されなくて困ることはありますが、高速でレスポンスが帰ってくるはずなのでかなりいいと思います。

デプロイが簡単

FirebaseのCLIツールをインストールして、コマンドでデプロイができます。初期設定なんかも簡単にやってくれるので簡単に始めることができました。

デプロイしたソースのロールバックも行うことができます。こちらはWEB上の管理画面から操作します。

リダイレクトやリライト、ヘッダーの内容を設定できる

設定ファイルがあり、それの内容を書き換えることでリダイレクトの設定などヘッダー情報を書き換えることができます。キャッシュの生存期限など変更していました。

色んな機能がある

今回はHostingしか利用していないのですが色んな機能があります。DatabaseやStorageなんかも使えます。ただし、無料枠ではそれなりに制限がされています。

どちらかといえばスマホのアプリの開発に使うのがいい様子です。クラッシュログの監視ツールやパフォーマンス測定ツールなどが用意されていました。

無料である程度使える

私は無料枠で利用していました。特にカードの登録とかは必要なくメールアドレスで利用が初められます。 Hositing以外の機能ももちろん無料である程度使えます。

見つかった問題

Hostingするコンテンツの容量制限に届きそうです。

無料枠では「1GB」の容量が用意されており、いつかは容量に届いてしまうなと思っていました。このサイトはGatsbyで生成したHTML・JS・CSSでできており、まだ数カ月しか運用していないこともあり、まだまだ1GBには届かないはずです。

しかし、デプロイするたびにガンガン容量が増えてしまいました。ずばりFirebase Hostingの容量の計算方法が、「これまでのデプロイでアップロードした累計のファイルサイズの合計」となっているため、容量を食いつぶしてしまいました。

ブログ自体は1GBには到底届きませんが、これまでのデプロイのファイルサイズをすべてカウントして合計しているため、累計で1GBに届きそうということです。悲しい。

GatsbyではJS・CSSファイルにはファイル名にランダム？な英数字がふられており、build するたびに別名のJS・ファイルが生成されます。ブラウザキャッシュの対策とかでしょうか。それらを毎回アップしていたためにあっという間に容量の制限に到達したようです。

ブログの不要なファイルなどを削除して容量を小さくしても、今までのアップロードの累計となっているため容量の空きは作られません。

有料枠にすれば容量の枠が「10GB」に拡張されますが、すぐいっぱいになるかなと考えています。従量課金のプランもあるのですが、どうなのでしょうか。ちょっと不安です。

すなわち

ブログなどの継続的にデプロイが必要なものはFirebase Hostingで運用するのはあまり向いていないです。アプリのLPなど、作りっぱなしで良いもの、頻繁に更新しないものなどであれば良いと思います。

別のHostingサービスに移動しようか

容量いっぱいになってしまうので移動しようかと思っています。今のところはGithub Pageを候補に考えています。独自ドメイン取得して運用していたので、簡単に移行はできそうです。CDNとか結構嬉しかったのですが仕方ないです。 Netlifyも面白そうなのでどちらか試してみます。

Firebaseは新しくて面白かったので、WEBアプリなど別の目的で引き続き利用してみようかと思います。

【おすすめ読書】バナナを逆からむいてみたら

Fri, 11 Jan 2019 00:00:00 GMT

人生を豊かにするための考え方のコツを紹介しています。

人間はバナナを上からむきますが、猿は逆側からむくそうです。どうやらそのほうがきれいにむけるそうです。いわれてみればマリオカートとかで地面置くバナナのかわも、下からむいたときの形になっていますね。

なぜか人間はバナナは上からむかなくてはならない、上からむくのが当たり前という先入観を持っているようです。そんな固定概念に囚われた状態から抜け出すことで、人生の様々な困難や壁をやり過ごそうという本です。

内容はわかりやすく途中の挿絵も可愛らしいです。いわれてもすぐに取り入れられる、考え方を変えられる人は少ないと思います。ただ、ふとした時に思い出して読み直すことができると、嫌なことを乗り越える糧になると思います。


タイトル	バナナを逆から向いてみたら
著者	アーチャン・ブラーム
訳	畔上司
出版	主婦の友社
画像リンク

ざっくり紹介

人生の視点を返るようなお話が32個紹介されています。

以下のテーマごとに章わけされています。

すべてがうまくいく心の持ち方
人生で本当に大切にしたいもの
手放すことはコワイけど、手放せばラクになる
人間関係の悩みがなくなる
不安のない穏やかの心でいるために

著者の経験であったり、昔話として有名なお話であったりを参考にわかりやすく書かれています。自分ではこう思っていたけど客観的にみると逆の見方もできた、というものや、このように考えれば嫌なことも向き合うことができるといった考え方のコツが書かれています。

おわりに

この手の本を読んですぐに考え方が変わるということはあまりないと思います。しかし、何か悩んでいることがあるときにズバリのエピソードに出会えると助けられる気がします。

心が健康なときに読んでも、あまり有り難みは無いのかもしれません。何か悩んでそうだなとか感じる人が回りにいるようでしたらおすすめしてみるといいともいます。文章の量的にも簡単に読み切れる量ですのでおすすめです。

何か困ったり悩んだりしているときに読み返す本のリストに入れておくと、救われると思います。

バナナを逆からむいてみたらー人生の視点を変えるレッスン

【おすすめ読書】情熱プログラマー

Fri, 11 Jan 2019 00:00:00 GMT

ソフトウェア開発者が幸せな生き方を目指すための目指すべき指針を学べる本です。

開発者として幸福感を得られるような、退屈しない人生とはどういうものか、どうすればそれを目指せるのかといったことが書かれています。

プログラムのテクニックと言うよりはキャリアの考え方の本です。筆者の実際の経験をもとに、そこから学んだ教訓が53個紹介されています。エンジニアと下のキャリアについて全く検討もつかない人とか読んでみるといいと思います。

根本的な考え方が多く、ハッとさせられます。3年後・5年後・10年後といったより細かく具体的なキャリアステップについて考えている場合は別の本を参考にするといいです。


タイトル	情熱プログラマーソフトウェア開発者の幸せな生き方
著者	Chad Fowler
訳	でびあんぐる
出版	オーム社
画像リンク

なぜこの本を読んだのか

エンジニアとしてのキャリアパスが書かれた本ですが、私が手に取ったのはなんとなくおもしろそうというのが理由です。オーム社が出版している似たような装丁の本で「ハッカーと画家」や「アジャイルプラクティス」などの本もあり、それらのシリーズに惹かれるものを感じたことを覚えています。

エンジニアのキャリアパスに関する書籍は新しいものもたくさん出ているので、時代や立場に合ったものを参考にするのがいいと思います。

この本も結構いろいろな本から引用されていると思いますので、気になったときに読んでみるといいです。

本の概要

プログラマ・エンジニアとして退屈しないようなキャリアを進むために重要になる考え方を紹介しています。

著者の経験や意見から繰り出される53個のキーワードと、そのストーリー・学びが書かれています。「今すぐ始めよう！」のコーナーもついていて実践に移すこともできます。ただ、「今すぐ始めよう！」の箇所に関しては結構難しくハードルが高いものもありますので、機会をみてやるのがいいかなと思います。必ずしもすぐできないとだめとは思いません。

著者は、以前ミュージシャンをやっていたので、その時のエピソードもあるのですが、なかなか参考になりました。エンジニアや画家、音楽家など似ている部分があるのでしょうね。

印象に残ったこと

印象に残った箇所をいくつか書いておきます。他の本とかで引用されているのもあるので見たことあるやつもあるかもしれません。

一番の下手くそでいよう

現在所属しているチームやグループの能力によって、自分のパフォーマンスが決まります。勇気をだして、自分よりも強い人たちの中に飛び込むことで、自分もその強さに底上げされていきます。

逆に自分が一番強くなってしまった場合は、それ以上そのグループでは成長は見込めないかもしれません。

一番下手くそである環境に飛び込むと自身をなくしそうですが、たしかに効果的だなと思います。なかなか勇気のいる選択ですが、意識高く成長するにはとても効果的です。

強いチームに飛び込むときには、何もできないかもしれません。しかし、誰よりも強い情熱やエネルギーを持っていけばなんとか許してもらえるものだと思います。

失敗する方法を学ぶ

エラーを見逃さずに発生させることに始め、ミスに対処する能力を磨きましょう。誰でもミスをすることはあるので、そこから以下にリカバーできるかが腕の見せ所です。

ミスを犯すかどうかよりも、以下にリカバーできるかを見られていることのほうが多く、逆にアピールチャンスになることもあります。

ミスに対処する原則として以下が挙げられていました。参考にしたいです。

間違いに気づいたら直ちに問題として取り上げる。短い間であっても間違いを隠そうとしない。
責任を追う。自ら責任を取って先に進む。
解決策を提示する。その場でできなければ、解決策を見出すための計画を策定する。
助力を求める。プライドにこだわらず、解決に向けた協力の申し出を積極的に頼る。

あわてるな

強いスポーツ選手やヒーローは決して慌てません。実際慌てて騒いでも状況が良くなることはなく、むしろ悪化するばかりです。慌てた結果最善を尽くすべき状況で、最善を尽くすことができなくなるだけです。

慌てないというのは難しいことですが、筆者のアドバイスとして、第三者の視点になって慌てそうな状況の自分を見ることで、自分自身を笑ってみることが良いそうです。

一度我に返ってエラーメッセージの内容をゆっくり読みましょう。

ウォーターフォール式のキャリア計画はやめよう

アジャイル的な計画にしましょう。ズバリ時代の変化は速くキャリア計画も変更が必要になることは多々あります。それに備えて変化を受け入れるような反復的な手法を取り入れるべきです。

キャリアの変更は可能であるだけでなく、必要な時代になっているという考え方でした。

昨日より良く

プログラムをしていて立ちはだかる問題は簡単なものもあれば難しいものもあります。一朝一夕では解決できないような、大きな問題にぶつかるときは必ずあると思います。

そんなときに、大きくてぼんやりとした困難に立ち向かうのは精神的に不安です。こんな時のコツとして、昨日より少しでもよくすることを目指すことで、プロジェクトが終わる頃とか、ふと振り返る頃には問題が解決しているという考えです。

プログラムだけでなくキャリアなどにもこの考え方を適用するのがおすすめだそうです。

おわりに

エンジニアとしてのキャリアのアドバイスになる本です。古典とまでは行きませんが長く愛されている本だと思います。

本の中にもありましたが、キャリアについては正解はないので柔軟に変化・適応させていくことも大切だと思います。時代の変化や、環境の変化で急に変わることもあると思います。そんなときに混乱したり余計に悩んだりしないようにアジャイルな考え方を持っておくというのは興味深いと思いました。

初めの頃はキャリアとかよくわからず、なんかすごそうな人に聞きがちですが、色々見て迷うことが大切なプロセスなのかなと思います。そして自分なりの答えを考えて、間違えてリカバーしながら最適なキャリアを進んでいくのがいいと思います。

キャリアに関する本はたくさんありますので、いろいろな本を読んで自分なりのキャリアを考えてみるのがいいと思います。

情熱プログラマーソフトウェア開発者の幸せな生き方

【おすすめ読書】判断のデザイン

Fri, 11 Jan 2019 00:00:00 GMT

人が看板などの情報を見て判断するに当たって、わかりにくいと感じるものはよくあると思います。それに興味を持った筆者が、まちなかで見抱えるいろんなものを観察しています。

著者が町中で見つけた情報に対して、明瞭か不可解かをパラメータで判断して、その状況に沿っているのかどうかを解説しています。

明瞭にすることで核心をつくことができ、逆に不可解にすることで希望を与えることもできる。この情報はそのどちらにするべきなのか、あるいは中間にするべきなのかといったことの解説をしてくれます。実際の写真付きで紹介されており、情報設計の勉強になりそうです。

情報設計のデザインなどをやる人におすすめです。ただ、例の量はあまりなく本自体も小さいので、情報量は少ないです。こんな物差しで見てみるのも面白いかと言うような気付きはあると思います。

TEDトークで発表された内容の追記のようなものです。本でも紹介されているTEDトークも一緒に見ると結構学びが増えて良いです。


タイトル	判断のデザイン
著者	チップ・キッド
訳	坪野圭介
出版	朝日出版社
画像リンク

ざっくり紹介

世の中には様々なメッセージがありますが、たまにその伝え方にこれでいいのだろうかと感じるときがあると思います。人間は情報を判断する時に、明瞭（クリア）なのか不可解（ミステリアス）なのかという部分を敏感に感じるそうです。

ですので、情報を設計するに当たって、明瞭にするべきなものと不可解にするべきものがあり、正しく判断を促せる情報の例を紹介してくれます。

実際に著者が撮影した写真付きで紹介されています。各ページには不可解さメータがついており、明確なのか不可解なのか10段階で表現されていて、理解の助けになります。著者によるリデザインを行ってみた例なんかも書いてあるので、どうスべきだったか教えてもらえる例もあります。

すべて海外の写真なので身近な広告はありませんが、なんとなくこういう広告あるあるといった感想を持つことができます。

おわりに

実際の生活の中でもわかりにくい広告やメッセージなどで溢れてていると思います。もやもやしたときの気持ちをしまい込まずに、なぜそう思ったのかを考えてみることはとても大切です。著者のように写真にとって残しておいたりするのはとてもいい習慣だと思いました。真似してみようと思います。

わかりにくくなる要素の一例として、明瞭なのか不可解なのかという考え方を知ることができます。こういう考え方を頭の片隅においておくだけでも、日常生活から得られるものは増えていくと思います。

判断のデザイン (TEDブックス)

【おすすめ読書】ラクガキマスター

Fri, 11 Jan 2019 00:00:00 GMT

イラストレーターの寄藤文平さんが書いた本です。

ラクガキという誰でもやったことあるような行動について、楽しいからみんなもやってみよう、という本です。普段全然絵を書かない人に、ぜひ読んでほしい本です。

著者が落書きするときの姿勢や頭の中のこと、ラクガキのコツであったり参考になるような素材・パターンなどを紹介してくれます。

大人になると落書きという行動はあまりしなくなったかもしれません。しかし、何かを他人に説明するときなどにイラストがちょっとかけたら捗るよなーと思うことは結構あります。そんなときに向けて、このような本で練習というか、ちょっと素材を借りて使えるようにしておくといいと思います。

頭の中に描いていることを何かに書き出すことは、様々なことにも応用できますし、小さい頃を思い出してノートの端っこに落書きしてみるのもいいかもしれません。

なぜこの本を手に取ったか

数年前に発売された本ですが、この頃結構「手書きで書いてみよう」という本が多かったと思います。脳トレブームと関連しているのだと思いますが。その中で、「大人タバコ養成講座」などで目にする機会が多かった寄藤文平さんの本を見つけたので、たまたま手にとりました。

この本以外にも、独特な面白いイラストを使った本がいくつかあるのでそちらもおすすめです。結構勉強になる本もあるので、イラストに興味ない人にもおすすめです。

本の概要

著者である寄藤文平さんのラクガキに対する思いや、ラクガキのコツが主なコンテンツになっています。

ラクガキっていうのは固く考えなくていんだ。ということを始めとして、自身がラクガキに見出した面白いポイントなどを紹介してくれます。モヤモヤしたときこそラクガキとしてアウトプットすることで整理されることもあるらしく、普段の生活にも活かせるかもしれません。

他にもラクガキのコツとして、すぐにできそうなサンプル（木とか山とか人とか）であったり、身近なものをキャラクター化した例などを紹介しています。ポイントとなる部分を歯科k理示してくれているので絵の先生としてとても親切だと思いました。

本の特徴

イラストがふんだんに使われています。本の形も独特で正方形に近いです。文章も独得でおもしろいですし、飽きずに最後まで読み切ることができます。せっかくなので読んだあとは暇な時間にノートの端っこにでもラクガキをするのがいいと思います。

感情であったり、動作などを簡単に表現するコツであったり、線や曲線の効果みたいなものもわかりやすく教えてもらえるので、簡単に真似することができます。

全く同じに書くのは無理ですが、自分なりのパターンや書き方を見つけられるのではないかと思います。

おわりに

普段の仕事や生活では全然イラストなんて書かないという人に読んでほしいです。結構絵を書くことはハードル高く感じている人は多いと思います。この本では結構脱力的というか、ゆるーく捉えており、ラクガキは楽しいものだよということを教えてくれます。

上記にも書いてますが、いくつかの素材的なものも紹介されているので、いざっと言うときに役に立つと思います。真似して書いてみると、思ったよりも簡単でうまく書けたような気になります。

寄藤文平さんのイラストが好きな人は見ているだけでも楽しいと思います。

【実践技術書】スラスラ読める JavaScript ふりがなプログラミング

Thu, 10 Jan 2019 00:00:00 GMT

2018年に出版された本です。見るからに入門書なのですが、プログラムにふりがなをつけることで究極の優しさを目指したという、他に見ない着眼だったので手にとりました。

プログラミングをこれから始めるという人にはいいと思います。超入門として親切だと思います。

この本を読めばとりあえずプログラムは動かせるようになります。四則演算と条件分岐、繰り返し、関数の定義、配列への代入、ぐらいができます。あとはエラーメッセージの読み方も身につくと思います。終盤にはHTMLと連携して、DOMの書き換えをやりましたがほんとにさわりの部分だけです。 WEBサイトを作ったり、アプリに応用したりすることは難しいです。

プログラミングはやったことあるけどJavaScriptはこれから、という人は他の本を見たほうがいいと思います。

実務ですでに使っているという人には特に参考になる箇所は無いと思います。プログラミング歴0ヶ月のような人におすすめです。

なぜこの本を読んだか

プログラミングの入門書として紹介されていたので、特に必要ないかと思いました。しかし、ソースコードにふりがなをつけるという着眼が新しかったので手にとリました。

同じシリーズでPythonなどもあるので、自分の勉強したい言語に合ったものを選ぶと良いです。 JavaScriptなら簡単に実行環境が用意できるのでおすすめです。

本の概要

ざっくり要約すると以下の感じです。一個一個のテーマの内容は結構少ないので、得られる知識の量はそれほど多くないです。丁寧に写経しても3時間くらいあれば読み終わると思います。

最初の一歩
条件分岐
繰り返し
関数の定義・利用
WEBページのDOM操作

本の特徴

タイトル通りですが、プログラムにふりがなと読み下し文がついています。これがあることで、全く触ったことがない人や、プログラム言語に何故か抵抗がある人にもわかりやすくなっています。基本の説明が多いので、紹介されている要素はあまり多くなく、この本だけでは実際にWEBサイトを作ったりアプリを作ったりするのは難しいです。

実行環境にGoogleChromeを、エディタとしてAtomを使っています。とくにそれでないと困ることはないので、メモ帳とかでも全然大丈夫です。

サンプルコードのダウンロードも可能です。実際コードの量は大した量ではなく、全然自分で入力しても苦にならないくらいです。ただどうしても動かない場合に、正しいものと比較できるように用意しているくらいの印象です。差分とったりする方法も紹介されていました。

印象に残ったこと

最初に触るプログラムにJavaScriptはいいかも

ブラウザを立ち上げればすぐに実行環境が起動できることや、コンパイル不要な点など、JavaScriptはプログラミング初学者にはいいと思います。簡単に動かせますし実行環境を用意する段階でのつまずきなどが無いです。

プログラミング以外の箇所で不明なことや躓くことが少ないので、プログラミングに触れてみる段階ではJavaScriptを選択することは良いかもしれないと思いました。WEBでも使われますしサンプルもあちこちで手にに入ります。

ふりがなと読み下し文

ふりがなはプログラムを単語ごとに日本語へ変換したものです。読み下し文はプログラムを行ごとにどういう意味かを日本語に訳しています。ざっくり授業で英語や古文の授業でやったようなアプローチです。確かに、機械に命令を伝える言語と捉えて、英語や古文などと似たように扱うアプローチは良い印象でした。

エラーメッセージにもふりがな

章ごとに、発生しそうなエラーメッセージが紹介されていて、それにもふりがなと読み下し文がついています。

最初のうちはエラーが出てプログラムが動かず、よくわからなくて混乱してしまうということはあるあると思います。解決できずに長い時間困っている人ほどエラーを読んでなかったり、意味を聞いても答えられなかったりします。

エラーが発生してしまったときにはエラーメッセージの内容をちゃんと理解する、というのは基本として大切なことだよなと改めて思います。そして、このような本を通じて初学者がそのことをしっかり心に刻んでほしいです。

本の内容的にはそこまで色々できるようにはなりませんが、エラーをちゃんと理解するというところはしっかり身につけていくべきだと思います。

おわりに

JavaScriptの入門というより、プログラミングの入門くらいの親切さでした。関数やオブジェクトがどのように扱われるかなど、難しい仕組みの説明などはありません。実際に動かすことが目的です。

初学者というかプログラミングをこれから始めようと思っている人に良いと思います。お子さんにもいいと思います。この本で楽しさに気づいて夢中になってくれるといいです。

【おすすめ読書】2階から卵を割らずに落とす方法

Wed, 09 Jan 2019 00:00:00 GMT

科学や物理の発明の歴史を紹介する本です。結構分厚い本ですが、紹介している発明も35個くらいでそんなに多くありません。イラストや図も多いです。

副題にあるとおり、科学の歴史を「実験」で振り返るということなので、テーマごとに実験が用意されています。どれも家庭でちょっと準備すればできそうなものばかりなので、お子さんの夏休みの自由研究とかには良さそうです。


タイトル	2階から卵を割らずに落とす方法
著者	ショーン・コノリー
訳	古谷美央
出版	ディスカヴァー・トゥエンティ・ワン
画像リンク

ざっくり紹介

科学や物理の発明の歴史を紹介しています。

ざっくりの概要と、こんな人物が発明したんだよという紹介が主な要素です。各テーマの終わりには実験が用意されており、実際にやってみるとより興味を持てるのではないかと思います。

特に難しい知識などは必要なく、昔授業で聞いたなあと言うようなものから、初めて聞くようなものまで色々揃っています。

タイトルからは把握できませんでしたが、多大な発明には「破滅の危機」がついて回るものであり、偉大な発明家たちはその「破滅の危機」を乗り越えてきたのである。ということが通したテーマとして語られています。

理論を立証するための実験であったり、発明そのものの利用法であったり、何かしら破滅の危機を持っていた。しかし、それよりも人類の倫理や応用によって、より多くの利益を生むことができました。偉大な発明家に感謝しながら簡単な実験を行うことで、その体験を少しでも理解しようというものでした。

おわりに

科学や物理の本って難しそうに見えますが、こういう入門的なものはとても簡単です。この本は特に難しいことは書いておらず、小中学生にもおすすめです。

テーマの順番は時系列に並んでいるので、この発明はこの発明よりも前だったのか！という発見はあるかもしれません。

2階から卵を割らずに落とす方法科学の歴史を実験で振り返る本

aliasコマンドの使い方メモ

Tue, 08 Jan 2019 00:00:00 GMT

ちょっと便利にするためにaliasコマンドを使おうと思いました。改めて使い方を調べたので忘れないようにメモしておきます。

登録されているコマンドを表示する

オプションなしてコマンドを実行すると、現在登録されているコマンドの別名一覧を表示できます。

alias

以下のようなコマンドの別名が定義されていました。

alias l='ls -CF'
alias la='ls -A'
alias ll='ls -alF'
alias ls='ls --color=auto'

「~/.bashrc」ファイルに予め用意されている別名が定義されています。内容を確認する際は以下のコマンドを用います。

cat ~/.bashrc | grep alias

コマンドの別名を登録する

上記の「~/.bashrc」にコマンドを定義することで別名を登録します。その後ログインし直せば反映されます。

今回は別のファイル「~/.bash_aliases」を用意して、こちらにコマンドを定義するようにしました。

GitHubのプライベートリポジトリが無料枠でも使えるようになった

Tue, 08 Jan 2019 00:00:00 GMT

GitHubのプライベートリポジトリ設定が無料枠でも使えるようになったそうです。

いままではGitHubにコミットするとpublicな状態になり、全世界に公開されていました。有料のアカウントになればプライベートリポジトリにできるので本当は特に問題ではないのですが、クレジットカードとかむやみに登録したくない消極的な私は無料アカウントのまま利用していました。

しかし！この度、無料アカウントでもプライベートレポジトリを利用できるようになったということなので、早速やってみました。

プライベートリポジトリにすると

自分（所有者になっているアカウント）しか見れない状態にできます。他の人からはぱっと消滅したように見えるようです。

プライベート化するリポジトリの数に上限は無いそうです。ただし、プライベート化したリポジトリを共有して開発できるようにする場合、3人までしか共有できないそうです。

プライバシー設定を選択すると以下のデータが消えるようです。

以下消えます。
+ starやwatching
+ リポジトリで公開していたpages

以下もなくなります。回避したい場合planをアップグレードが必要。
+ コード所有者機能
+ これまでに作成されていたWiki
+ Insightsタブの中の各メニューが無効化される？または初期化？  
  活動状況、コントリビューター（プルリクエストしてくれた人とか）、GitHubの標準に沿って作られているかのチェック機能、アクセス数、コミット情報、最近のコードの行数の増減、各ブランチのコミット状況など
+ 共同開発は3人までに制限
+ branch保護設定

プライベート設定してみる

今まで公開状態になっていたリポジトリについて、プライベート設定をやってみました。

GitHubのリポジトリ

「Settings」タブを選択

settingsタブ

options（最初に選択されている画面）の一番下の「Danger Zone」内に該当の設定、「Make this repository private」があります。

これを選択すると以下のアラートが表示されます。下部のフォームにリポジトリの名前を入力すれば変更が完了です。

You will permanently lose:
+ All stars and watchers of this repository.
+ All pages published from this repository.

You can upgrade your plan to also avoid losing access to:
+ Codeowners functionality.
+ Any existing wikis.
+ Pulse, Contributors, Community, Traffic, Commits, Code Frequency and Network on the Insights page.
+ Unlimited collaborators. This repository will now be limited to 3 collaborators.
+ Branch protection rules.

永久になくなるもの

starやwatching
リポジトリで公開していたpages

以下もなくなる。回避したい場合planをアップグレード。

コード所有者機能
これまでに作成されていたWiki
Insightsタブの中の各メニューが無効化される？または初期化？
活動状況、コントリビューター（プルリクエストしてくれた人とか）、gitHubの仕様に沿って作られているかのチェック機能、アクセス数、コミット情報、最近のコードの行数の増減、各ブランチのコミット状況など
共同開発は3人までに制限
branch保護設定

プライベートになった

確かに所有者以外のアカウントではアクセスできなくなりました。リポジトリのページは404エラーでリポジトリの一覧にも表示されません。もちろん所有者であればアクセスできました。

insightsタブがの一部が無効化されている

こんな感じでいくつかのメニューがグレーになって選択できなくなります。

publicに戻すこともできる

Settingsからpublicに戻すこともできます。privateの設定した場所と同じところで戻すことができます。

【おすすめ読書】何をしてもうまくいく人のシンプルな習慣

Mon, 07 Jan 2019 00:00:00 GMT

「何をしてもうまくいっているように見える人」で身の回りで思い当たる人はいますか。そんな人が普段どのように考えているのかが書かれた本です。

全部当たっているというわけではないと思いますが、逆を取れば「うまくいく」とはこういうことなのだろうと考えることもできます。

うまくいっている感やうまくいきそう感を自分の中で育むための習慣や考え方が81項目載っています。すぐにでも取り入れられるような簡単なものもありますので、さくっと読んでさくっと初められます。


タイトル	何をしてもうまくいく人のシンプルな習慣
著者	ジム・ドノヴァン
訳	弓場隆
出版	ディスカヴァー・トゥエンティワン
画像リンク

ざっくり紹介

見開きごとにシンプルな一言が書かれており、このことを習慣として考え方に取り入れることによって、「何をしてもうまくいく人」になれますという内容です。

各項目には「うまくいくヒント」も書かれているので、実際に取り組んで見ると良さそうです。

習慣の内容はシンプルですが、結構抽象的なものや、簡単には受け入れにくいものもあります。自分と合わないものや、難しいものは諦めて、別のものから取り組んだほうが良いです。

うまくいく人は○時から○時はジムに行っている！とか、いつも〇〇な服装をしている！とか、二次会には絶対に行かない！などのような、成功者の具体的な習慣の例ではありません。

こんな人におすすめ

習慣化することによって物事をうまくすすめるために取り入れるべき考え方が載っています。

いくら頑張ってもうまく行っている感や幸福感が得られないような行き詰まりを感じている人にいいかもしれません。言い換えれば、何をしてもうまくいっている感を得られるようになるシンプルな習慣が81個紹介されています。

この本のとおりに習慣化できれば幸福感は高まりそうですが、全部取り入れるのは個人の性格や環境によっては難しいと思います。

できないものや合わないものは仕方ないとして、諦めるのも大切だと思います。

おわりに

「うまくいく」ためには、うまくいくまで続けることや、うまくいっている感、うまくいくだろう感などを持ち続けることが大切な要素なのだと思います。

新しいことを始める時や、時間がかかる取り組みなどを行うときには、ムダにならないか見当違いのことをやっていないかと不安になります。この本を読んでうまくいく状態に自分をコントロールできれば、それらのモチベーションをコントロールできるようになり、続けられるのではないかと思います。

そのような自分自身のモチベーションコントロールのコツが書かれていますので、参考になればと思います。

何をしてもうまくいく人のシンプルな習慣 (ディスカヴァー携書)

【おすすめ読書】機械学習入門

Mon, 07 Jan 2019 00:00:00 GMT

機械学習の基礎や入門の部分がわかりやすいイラストと魔法の鏡のメタファーで書かれています。全くわからない状態での入門やとっかかりとして読んでみるといいです。

絵や説明もかなり可愛く書かれています。題材が難しすぎますが、子供の学習にも使えるかもしれません。

機械学習やディープラーニングという複雑な内容について、いろいろなメタファーを使って簡単にして説明しているので、メタファーの使い方や説明の方法の参考にもなると思います。例えば何らかのイベントや営業で、「全くわからない人相手に機械学習を説明しないといけない」という立場の人であればとても参考になると思います。


タイトル	機械学習入門ボルツマン機械学習から深層学習まで
著者	大関真之
出版	オーム社
画像リンク

ざっくり紹介

結構前から人気なのでいまさらですが、機械学習についての超入門書です。全く機械学習について触れたことがない人向けの内容で、タイトル通り入門です。

誰でもある程度わかるように簡潔に書いてあるので、小学生や中学生の自由研究にもどうぞと書かれてました。自由研究で機械学習はテーマ難しすぎだし、そこに至るまでにすっ飛ばすものが多すぎて逆に難しいそうに感じました。

でも自由研究に機械学習とか選んでいる子供も世の中にいるんでしょうね。見たことはないですが、普通にいそうな気がしています。内容はともかくそんな子がいたらすごいですね。

物語のつかみ

魔法の鏡とお妃さまによる物語になります。

魔法の鏡（コンピュータ）にお妃さまが、「世界で一番美しいのはだれか？」という問をおこないます。この問題に答えるために、魔法の鏡は機械学習を用いて回答を行う物語です。

街の娘の写真で学習させるとか、特徴量として用いるのは肌・年齢・髪型・・・のうちどれか、とかメタファーにそって説明があるのでわかりやすいと思います。魔法の鏡は結構いいメタファーだと思います。

おわりに

序盤は機械学習のそもそもの考え方なので、メタファーの効果も相まって結構わかりやすいです。機械学習の入門書としてはわかりやすいですし、おもしろ可愛く描かれているので良いと思います。

知識が全然ない人への説明を行う際に、スライド作成やメタファーの参考としていいと思います。

終盤はより専門的な知識が出てくるので、わかりにくくなってきます。さすがにテーマが難しいです。一旦の入門として読み切って、興味があれば詳細に説明してある本などで学習するのが良いと思います。

機械学習なんかは数学的な話が多いので、実際に作って動かしてみるのが一番理解が速いと思います。「とりあえずわからないながらも触ってみる」そこから詳細な理論について学んでいくのがおすすめです。

機械学習入門ボルツマン機械学習から深層学習まで

GoogleSearchConsoleの「クロール済み-インデックス未登録」状態の対処

Mon, 07 Jan 2019 00:00:00 GMT

GoogleSearchConsoleを確認していて気づいたのですが、インデックス項目のカバレッジで「除外」となっているURLが多く存在してました。「エラー」や「警告あり」は0件です。

意図的に「noindex」の指定をしている箇所が「除外」になっているのであれば問題ないですが、件数的にそうではないようです。このままだと「除外」になっているページがgoogleの検索結果に表示されないので確認してみました。

結論を最初に言うと

推測になりますが、「インデックスして検索結果に表示するほどでないページ」とGoogleに判断されたため無視されたのではないかと考えられます。コンテンツを書き直したり追記した後でもう一度クロールしてもらい「除外」状態が解決され、インデックスに登録されることを目指します。

対応方法としては、文字数を増やす、h2+h3などの見出しをしっかりつける、検索ワードを意識して増やす、といったことが簡単にできます。他にもサイト全体のコンテンツ量が増えれば、一つ一つの記事の価値も高く評価されます。諦めずにコンテンツの量と質を目指すことにしました。

【追記】上記の対応を行った後、2ヶ月後確認したところ「除外」状態が大きく減っていました。これらの対応の効果がありました。
「クロール済み-インデックス未登録」を解消するに記載しています。参考にどうぞ。

以下詳細な調査の内容です。

SearchConsoleを確認する

「有効」と同じくらい「除外」のページがありました。除外になっているものは、Googleによってクロールされたが検索結果には出てこない状態です。望ましい状態ではありません。意図的にnoindexをしている場合も「除外」に入るのですが、今回はnoindexの指定をしていないURLでも「除外」になっていました。

詳細の箇所には以下の2つの状態が表示されており、URLがどちらの状態なのか確認できます。

noindexタグによって除外されました
noindexタグを設定しており意図的に除外している
クロール済み - インデックス未登録
意図的ではなく除外されてしまった

クロール済み - インデックス未登録の理由を調べる

上記の「クロール済み - インデックス未登録」の状態は意図した状態ではないので解決したいです。インデックス未登録とされた原因を公式のドキュメントで調べてみました。

SeachConsoleヘルプ

ヘルプによると「除外」になる理由は以下でした。山盛りな上にイマイチピンとこないです。

noindexタグを設定している
ページ削除ツールによってブロックされている
URL削除ツールを使ってURLのindexを削除した場合に該当します。今回私は行っていないので関係なかったです。
robots.txtによりブロック
未承認のリクエストが原因
401エラーが発生した場合です。ベーシック認証などが必要な画面で、クローラが認証を通れなかった場合に発生する状態です。
クロールエラー
URL取得時に4xxまたは5xxのエラーが発生した場合です。
クロール済み - index未登録
クロールはされたがインデックスには登録されていません。今後インデックスに登録される可能性がありますが、されない可能性もあります。
検出 - インデックス未登録
検出はされたが、クロールされていない状態です。サイトが高負荷だったなどの理由で、クロールの再スケジュールを行った場合です。
代替ページ
他のURLと内容が重複しており、すでに代替となるページがインデックス済みです。
ページが重複しています
他のURLと内容が重複しており、どのページも正しいページと指定されていない状態です。
非HTMLページの重複
HTML以外のコンテンツ（PDFファイルなど）が別のページと重複しています。
ユーザーがマークしたページとは異なるページが正規ページとして選択されました
別のページを正規ページとして判断しています。
見つかりませんでした
404エラーが返された場合です。
法的申し立てによりページが削除されました
ページにリダイレクトがあります
リダイレクトが発生したため、このURLはインデックスに登録されません。
クロールのキューに追加されました
数日後にクロールされます。
ソフト404
送信されたURLは削除済みです
以前インデックスに登録されていたが、何らかの理由で削除されたものです。
送信されたURLがcanonicalとして選択されていません
他のURLと内容が重複していたため、他のページが正しいページとしてindexされています。

対応方法は情報の質を磨くこと

「クロール済み - index未登録」というズバリな項目があるのでこれが該当します。しかし、どう対処すればいいのかはわかりませんでした。放っておいたらいい、でもindexするかしないかはわからないという状態です。

いろいろ調べてみたところ、コンテンツが「indexするほどの情報ではない」と判断されて除外されているようです。ヘルプに書かれていないことなので確証はありませんが、それなら納得です。対処法としては、記事のリライトや追記などをすることでインデックスしてくれるかもしれません。または、サイト全体の評価が上がることでインデックスされやすくなります。

Googleの立場で考えてみれば、検索結果に有意義でない情報は表示したくないはずです。これを信じて自分の記事の情報のクオリティを磨くのが良さそうです。

「クロール済み - index未登録」になっているコンテンツについて、リライトしたり追記を行ったりしてインデックスされないか見守ろうと思います。

追記

後日確認したところ、「除外」状態が大きく減っていました。これらの対応の効果のようです。
「クロール済み-インデックス未登録」を解消するに記載しています。参考にどうぞ。

【おすすめ読書】ブレイン・プログラミング

Tue, 25 Dec 2018 00:00:00 GMT

夢や目標を叶えるためにやるべきことが書かれています。大きな特徴としては脳の機能である「RAS」というものに注目した内容となっています。ざっくり紹介すると以下。

目標や夢をしっかり具体的に持っていることで、そのために必要な情報やチャンスに敏感になれる。
具体的に目標を持つにはどうすればいいか
途中でくじけないためにどのように振る舞えばいいか

という内容です。

IT技術的なプログラミングは全く関係ありません。人間の脳をコンピュータに例えることができるよ、という考え方から「プログラミング」という言葉が使われています。


タイトル	自動的に夢がかなっていくブレイン・プログラミング
著者	アラン・ピーズバーバラ・ピーズ
訳	市中芳江
出版	サンマーク出版
画像リンク

ざっくり紹介

RAS

網様体賦活系（RAS）という脳の仕組みがある。入ってくる情報をふるい分けして、何に注意を向けさせるかどれくらい関心を呼び起こすか、それともシャットアウトするかを判断している。
これを意識して書き換える（プログラミング）することによって、夢や目標の実現を目指します。

大半の情報はRASによって捨てられているので、本当に必要な情報のみを見つけられるようにプログラミングし直します。

ざっくりとは、何度も目標を目にすること、何をやりたいかを紙に書き出すことなどが方法として挙げられていました。

まず何をしたいかを考える

目標を立てるときにはどうすればいいかは一旦おいておいて、何をしたいのかのみをまず考えます。どうすればいいかを考えると萎縮してしまうため、まずが何をしたいのかに集中するといいそうです。

リストにして手書きで書き出すことにより、やりたいことに関する情報が目に止まりやすくなります。RASの効果によるものです。

アフォメーション

自己暗示のことです。ポジティブなことをイメージすることでそこに向かっていけるというものです。

ネガティブな習慣などは一度書き出すことで向き合います。その上でポジティブな習慣を書き出して、RASに刷り込ませることで書き換えを行います。

これを行うことでポジティブな考え方や習慣が自然と見につき、目標達成に近づくことができるという考え方です。

おわりに

今までに見たことあるような目標の掲げ方や設定方法でしたが、こんな根拠があるよと示されていた印象です。そんなに新しい情報があるわけではないですが、著者の経験から書かれているのでその体験を追いかけることができます。様々なことを経験している様子でこんな人もいるのかと驚かされます。エネルギッシュに挑戦し続ける人生はとても面白そうです。

自分で自分の意識や傾向を書き換えることができれば、自分のやりたいことに向けて集中でき、そのほうがいい結果にたどり着けるでしょう。目標や夢などを手書きで紙に書き出すことで、見える世界が変わり始めるというのは確かに納得です。

小学生の時などに教室に張ってあった「今月の目標」みたいなやつは、本当は結構効果的だったんですね。大人になってなくしたものの1つですね。

結構内容も盛り沢山なので読み切るのは大変ですが、かいつまんで読むのも効率的です。例えば、途中で格言みたいなものが挟まれているのでその付近をよむとかおすすめです。

自動的に夢がかなっていくブレイン・プログラミング

【おすすめ読書】ブランド人になれ！

Fri, 21 Dec 2018 00:00:00 GMT

雇われ人ではなく、ブランド人になって活躍するための心構えが50個書かれています。会社の自分ではなく、私自身がブランドなんだ！という意識を教えてもらえます。具体的な「やってみよう」も盛り沢山なので、行動力さえあればすぐにでも初められます。

とてもためになる本なのでおすすめです。新しいプロジェクトとか始める前に読むことをおすすめします。今がプロジェクトの途中でもとりあえず読んでおくと良いです。

コンサルタントとかを目指す人にちょうど良い本です。クライアントとの関わり方であったり目指すものが書いてある印象でした。


タイトル	トム・ピーターズのサラリーマン大逆襲作戦〈1〉ブランド人になれ!
著者	トム・ピーターズ
訳	仁平和夫
出版	CCCメディアハウス
画像リンク

ざっくり紹介

雇われ人からブランド人になる時代が来たといいます。ブランド人になるためにはどうすればいいのか、自分をどのように売り出せばいいのかということを50の項目で教えられます。

世の中を変えたいなら、まず自分から変われ

自分をブランドにできるかどうかはすなわち、署名入りのすごいプロジェクトをやり遂げられるかどうかにかかっています。そのためには、気が散るものを排除してそのプロジェクトに全力を注がなければなりません。一点集中を目指しましょう。

なかなか難しいことだと言う実感がありますが、そうしないと成功は得られないというのも実感として持っています。なにかうまい集中の仕方はないものでしょうか。目の前の作業に対する一時的な集中の方法は山ほど情報がありますが、もっと長い目で見たときの集中法というか、そういうものが知りたいです。俗世を離れて山で過ごすとかでしょうか。

金が積もれば心が萎える

冒険に旅立つのに、たいしてカネはいらない。
志と執念と、心の支えになる何人かの友と、次の一歩を踏み出そうという熱い思いさえあればいい。

資金を集めすぎると、出資者への恩義や、失うことへの恐怖で思い切ったことができなくなります。あれもないから、これもないからという言い訳は許されません。金よりも時間をともにしてくれる同士を探しましょう。

お客さんとともに生きる

ブランド人はお客さんの話をよく聞く
ブランド人はお客さんをいたわる
ブランド人はお客さんを助ける
ブランド人はお客さんと苦楽をともにする

お客さまあってのブランド人ということですね。ただ何でも尽くしてあげればいいというわけではなく、どう思われるか、どのような振る舞いをするかしっかり考えて行動することが必要です。

おわりに

プロジェクト始まる前とか、区切りのタイミングで読み直したい本の1つです。自分をブランド化するということについてやるべきことはもちろんですが、こんな大変なこともあるよといった負の部分も書かれています。それを覚悟できているかという問いかけもあり、とても好感が持てます。

章の中に、自分をリニューアルするためにやるべきことをまとめた「実践・リニューアル50」というリストがあります。かなり具体的な行動が書かれているので、やってみると良さそうです。とても疲れそうですが、効果は間違いないです。

同じシリーズの本も紹介したいです。あと、本の中に何度か出てくるジョージ・レナードの「達人のサイエンス」も紹介したいです。これらもとても面白い本ですので。

トム・ピーターズのサラリーマン大逆襲作戦〈1〉ブランド人になれ!

【おすすめ読書】自分の時間

Thu, 20 Dec 2018 00:00:00 GMT

時間の使い方に関する自己啓発本です。時短テクニックとかではなく、時間の捉え方というか考え方を教えてくれます。時間があれば金は稼げるが、金があっても時間は買えない。という考えのもとで、24時間という決まった時間を有意義に過ごすための考え方を教えてくれます。

スキマ時間をしっかり使うんだぞということと、常にこれやこれを意識しておくことで知的好奇心や集中する力なんかを身につけられます。という内容です。


タイトル	自分の時間
著者	アーノルド・ベネット
訳	渡部昇一
出版	三笠書房
画像リンク

本の特徴

本自体も小さく、文字数もそれほどないのですぐに読めます。章の数自体は多いですが、中には短い章もあるのでサクサク進む印象でした。

幸福に生きるための時間についての考え方が書かれています。時間の捉え方というのでしょうか。もともとは随分昔の本なので、時代は変わっているのですが、今でも参考になるようなことが書かれています。

時短テクニックとか、時間を絞り出す方法とかはあまりありません。時間そもそもの捉え方や、みんなの通勤時間って本当は色々できることあるよね、といったことが書かれています。

印象に残ったこと

考え方

時間があれば金は稼げるが、金があっても時間は買えない。

最近ではお金を払って家事などを代行してもらうことで時間を捻出できるのですが、それでも1日24時間を増やすことはできないということです。

朝起きるとまっさらな24時間が財布に入っている。この24時間は平等に与えられており、明日・明後日も厳格に24時間が与えられる。前借り等もできません。考え方次第では理想的な民主主義の形とも捉えることができます。

内なる1日

24時間のうち、一般的に働いている8時間以外の16時間を「内なる1日」として、自分を成長させることに使うべきだそうです。

例えば、通勤などの数十分は何か1つのことを考えてみます。途中で他のことによそ見、寄り道してしまうが頑張ってもとの思考に戻り考えきります。この取り組みを行うことで、集中力や思考の支配力・コントロール力が身につき、生活を豊かにできるはずです。

内省すること

以下の考え方が登場します。

幸福とは、肉体的・精神的快楽を得ることにあるのではない。理性を豊かにし、自らの生活心情にかなった生き方をすることにある。

で、「自らの生活心情」とはなにか？となるのですが、これを知ることが大切だといいます。すなわち、自分を知ること。そのために内省する時間を設けることが必要になります。

原因と結果の法則

原因なくしては何事も起こり得ないということを学びます。

日常の退屈に思えることからも、以下のようなことを意識することで学べることがあります。その中で身につく知的好奇心や分析力は必ず人生を豊かにしてくれます。

物事の原因と結果を絶えず頭に入れておくこと  
世の中の有為転変の姿を認識すること  
物事が継起するその実相を知ること

おわりに

時短テクニックなどではなく、平等に与えられる24時間をどのよう考えるかというような本です。小手先のテクニックというわけではないので、すぐに効果が出るような類のものではありません。でも、こういう時間の捉え方から見直すというのは大切なことだとです。

常日頃から意識しながら時間を過ごしていくことで、同じ時間でも得られることの密度が違ったりします。一度立ち止まって考え方を改めて見るのがいいですね。

テレビで紹介されているような時短テクニックを使って時間をつくるけど、結局スマホとかで時間を浪費してしまうような経験がある人におすすめです。

自分の時間 (単行本)

【おすすめ読書】「筋トレが最強のソリューションである。」

Wed, 19 Dec 2018 00:00:00 GMT

ある界隈で人気のTestosteroneさんのつぶやきをまとめた本です。タイトルの通り、筋トレのことばかり書いてあります。

トレーニングの内容とかではなく、筋肉を鍛えれば気分がよくなる！なんでもできる気がする！といったようなポジティブな考え方が主な内容です。結構冗談も入っているので見ていて面白いです。

2018年の流行語にもノミネートされおり筋トレがブームです。


タイトル	筋トレが最強のソリューションである。
著者	Testosterone
出版	ユーキャン自由国民社
画像リンク

著者のTestosterone は「テストステロン」と呼びます。筋トレなどによって生成される男性ホルモンの 1つらしいです。詳しいことはわからないので気になる方は調べてみてください。ズバリ、筋トレしてテストステロンを生成することで気分が上がり、いろんな問題を乗り越えられるぞ！ということです。

世の中の99%の問題は筋トレとプロテインで解決します。というとんでもないことを言ってます。しかし、最初はもちろんそんなはずないですが、読んでいくうちにキントレこそ最強のソリューションだと思わせるような力があります。

ざっくり紹介

ダイエットのことや、仕事のこと、人間関係のことなどいくつかのジャンルに分けて、著者がつぶやいていたコメントが紹介されます。一個一個の内容は短いですが、面白いものもあります。

マッチョになるとこんないいことがあるぞ、とか。筋トレに打ち込むことで、嫌なことも忘れられるし習慣や意志力もつくし、何より筋肉が手に入ります。自己啓発本的な要素が結構多かったです。

途中にコラム的な漫画とかもあります。ジムでのよくあることや著者の経験などが漫画になっており、思わず笑ってしまいます。

おわりに

読み終えると、筋トレやってみようかなと言う気持ちになります。すでに習慣化している人も、こんな効果があったのかと発見があるのではないでしょうか。

筋トレ続けるためには習慣化するための意志力が必要なので、結構すごいことだと思っています。やった分自分の体が強くなっていくので、成果もわかりやすくていい努力ですよね。体力つけて困ることってないですし得することばかりです。

最近寒くてサボってましたが、筋トレ始めたくなってしまいました。

筋トレが最強のソリューションであるマッチョ社長が教える究極の悩み解決法

自分の長所を知る『ストレングス・ファインダー2.0』

Wed, 19 Dec 2018 00:00:00 GMT

外国で作られた「ストレングス・ファインダー」という適正テストを受けて、自分の長所や考え方の傾向を客観的に知ることができます。短所を補うのではなく、長所を伸ばそうという考え方になっており、ビジネスの場でも参考になりそうです。

本についているシリアルコードを入力することで、ネットで適正テストを受けることができます。自分が強く持っている5つの資質を知ることになります。本ではそれらの資質についての説明や活かし方などが載っています。結構分厚い本ですが、上記の内容なので実際に目を通すところは結構少ないとも言えます。


タイトル	さあ、才能(じぶん)に目覚めよう新版ストレングス・ファインダー2.0
著者	トム・ラス
訳	古屋博子
出版	日本経済新聞出版社
画像リンク

適正テストを受ける

シリアルコードを大切に

本についているシリアルコードが必要です。古本とかで買うと、シリアルコードが利用済みになっていることがあるので注意です。

該当のページに行くとちょっと不安な翻訳ですが、テストを受けることができます。結果を受け取ったり追加のサービスの情報を受け取るためにメールアドレスなどを登録して会員登録を行う必要があります。

特に変な勧誘とかのメールが来ることもないので問題ないです。登録しないとテスト受けられないので、ここは我慢して登録しましょう。

質問は177個

適性テストでは大量の質問に答えていきます。たしか177問くらいあるので結構長いです。ゆっくり落ち着ける場所・時間にやりましょう。回答が終わるとすぐ結果が表示されます。全部で34種類ある資質のうち、自分が強く持っている5個の資質を挙げられます。これらの特長を知ることで、自分の長所やその活かし方がわかるというものです。

テストの結果

私もやってみたところ、以下の5つの資質が挙げられました。なんとなく自分でもあっている気がします。客観的に強みとなる資質を教えてもらえるので、大いに参考になり事故PRのなどでも頼りになります。

信念

揺るぎない核となる価値観を持っている。

包含

人々をグループの中に包含したい。

分析思考

データを好み、客観的で公平なことを求める。

学習欲

学ぶことが大好きで、結果や内容よりもプロセスに重きを置く。

内省

考えることが好き。

本を読む

上記の結果をもって本に戻り、該当する資質の部分を読んでいきます。正直テストの結果ページにも結構情報があるので満足できるくらいなのですが、せっかくなので本の方も見ておきましょう。

5つの項目しか読まないのか

自分に当てはまった5つ以外のところは、ほぼ興味ないですかね。ただ、他の人と一緒に受けたりしてお互いの資質を共有し合ったりすると効果的です。そんなとき手元にあると便利です。この資質が高い人の行動アイデア、この資質が高い人との付き合い方などが書かれています。興味あるなら読んでみるのもいいです。

資質の紹介の他にも、ストレングスファインダーについての説明や、長所を伸ばそう！という意気込みが書かれているのでそこは読んでおくと良いです。

まとめ

意外な資質が挙げられた場合も新しい発見があっていいですね。追加の料金を払えば6つ目以降の資質のランキングも見れるそうです。私は別にいらないかなと思っていますが。資質のワースト5なんかも短所としてみてみると役に立ちそうです。

研修に取り入れて、チーム全員でやってみて結果を共有するとかどうでしょうか。お互いの長所や傾向がわかりますし、どんな接し方をすればいいかの参考になることもあります。チームやグループで一緒に仕事する上で役に立つでしょう。

【おすすめ読書】「職場の問題地図」

Wed, 19 Dec 2018 00:00:00 GMT

少し前話題になっていた本です。働き方改革が世の中へ広まり注目されるようになりました。

どこにでもあるような、仕事や組織がうまく回らない問題の原因や解決方法が書かれています。道具や技術がいるものはそれほどないので、どのジャンルの職場でも活用できます。


タイトル	職場の問題地図
著者	沢渡あまね
出版	技術評論社
画像リンク

ざっくり紹介

職場でよく起こる問題が紹介されており、その原因と解決方法が紹介されています。問題が起こる状況の例なども書かれているので、自分の環境に当てはめやすいのです。文字もそれほど多くなく、イラストが結構あるのでさくっと読めます。

例えば、手戻りがよく発生するとか属人化しているとか、そういう問題が取り上げられています。この本が人気ということは、日本中の色んな場所で同じ問題に悩んでいる人がいるということでしょう。内容的には作業をする部下と管理する上司、両方に対する改善策が半々くらいで載っています。どの立場の人からでも結構参考になる情報があります。

制度と個人のスキルの2軸で解決しようとするのが悪いやり方で、制度・個人スキルにプロセスと場を足した4軸で解決を考える必要があります。

おわりに

さっくり読めて分かりやすかったです。このような情報が積極的に取り入れられ、働き方改革がうまく回ってくれるといいですね。

1つだけ、「職場の問題地図」というタイトルですが、あまり地図にする意味は感じませんでした。最初の見開きで様々な問題を地図にして表現しています。問題が複雑に絡み合っていることを2次元の地図で表現しているようなのですが、よくわからなかったです。迷路みたいです。

問題同士の距離や方角ではなく、問題の原因となる要素を分解している様子でしたので、地図以外の表現方法がわかりやすいのではないかと思いました。ツリーとか。それ以降、本文の中には特に地図は出てきませんし。

地図にすることで、自分の今いる場所と向かうべき場所を明らかにできる。そんな気持ちになる効果がありました。実際は、距離と方角を持たない情報を無理やり地図にしてもあまり意味がなさそうに感じました。

ただ、最後にも書かれていますが、取り組みとして自分の職場の問題地図を作ってみるのは良いと感じました。職場のみんなで集まる時間を設けて、改善のために問題を出し合う時間をつくるのはとても良いです。あまり、こういう改善のための取り組みは開かれませんし、やりっぱなしになっていることもよくあります。全員で取り組むこと、地図として目に見える形でアウトプットすることはチームづくりにおいて重要なことなのでしょう。

いくつか似たようなテーマの本もあるので機会があれば手にとって読んでみたいです。

職場の問題地図 ~「で、どこから変える?」残業だらけ・休めない働き方

【実践技術書】「Vim テクニックバイブル」

Tue, 18 Dec 2018 00:00:00 GMT

私は文字を打つときにはVimを使ってます。文字書くときだけでなく、プログラミングするときもVimを使います。

今時便利なIDEはいくつもありますが、テキストエディタであるVimが一番のお気に入りです。なれるまではかなり不便ですが、なれるとやめられなくなります。拡張性も高くいろんな環境で使えるのでとても頼れるやつです。

久しぶりにVimのテクニック本を読みました。便利なプラグインの情報が山盛りです。 Uniteとかの使い方や概念が書かれているので、その辺のプラグインをガンガン使いたい人におすすめです。ただし、結構前の本なので古い情報もあります。

サーバの管理をやるときにも設定ファイル触るのにテキストエディタとして Vim を使うことがあります。Dockerとかの環境構築も増えてくるのでぜひVim使ってほしいです。別に他の方法もあるのですが、お客様管理のインフラだと勝手にソフトをインストールすると問題になるので気をつけたほうが良いです。気づかれることのほうが少ないですが、何か合った時に不要に責任を取らないためにも重要です。 VimとかシェルとかCUIに慣れておくことは結構大切だと思っています。

今回は本の中でVimの基本的なコマンドで使えるかもと思ったものを紹介します。プラグインに関しての内容のほうが充実しているので、Uniteを始めとする便利なプラグインについては機会があれば紹介します。


タイトル	Vimテクニックバイブル
著者	Vimサポーターズ
出版	技術評論社
画像リンク

なぜこの本を読んだのか

自宅にあったものを久しぶりに見つけて読みました。もう一冊、「実践Vim」という本もあるはずですが、引っ越しの片付け中なので見つかっていません。見つけたらまた読みたいです。

この手のよく使うソフトのテクニック本は、なかなか読む機会が無いでしょうか。しかし、定期的に読み返すと新しい発見があり、作業の効率化につながります。

すぐにでも使えそうなテクニックもあったので、また思い出せるように記事にしました。

本の概要

基本的にはVimをある程度使ったことのある人向けに、より便利になるプラグインやテクニックを150のTipsとして紹介しています。 Vimの基本的な入門書ではない印象です。チュートリアルくらいは終わらせてちょっと使い込んだくらいで読むことをおすすめします。

プラグインのインストール方法や使い方・おすすめの設定なども載っています。プラグインの作者による解説等も載っています。

本の特徴

ジャンルごとに分けて書いてあり、やりたいことや気になるところから読み始められます。巻末には索引もあるので、気になるプラグインの情報などを調べることができます。

コマンドなどは詳細に書かれており、実際にやってみるのには苦労しないです。ただ画面のスクリーンショットなどは全く無いのでイメージはしにくいです。プラグインの見た目の情報とかは一切ないです、カラースキームも載ってないです。

まとめ

Vimは奥が深いです。この本にもまだまだいろんなことが書かれています。気になる人は一度手にとって見てほしいです。

初めてVimを使ったときは、サーバにリモートアクセスして設定変更したときだった記憶がありますが、かなり混乱した気がします。今となってはいろいろ自由に触れるので重宝しています。何よりもノーマルモードとインサートモードという状態を使い分けるという発想が好きです。ホームポジションを意識することでキーボードのみで不自由なく様々なことができ快適です。

個人的には、キー数が少なくてコンパクトなキーボードと組み合わせて使うのがおすすめです。

他にもプラグインを開発したりとか結構プログラム要素もあるのでとても拡張性もあります。カンファレンスが開かれるくらいコミュニティも存在していますので、興味があればぜひ使ってみてほしいです。

Vimテクニックバイブル　～作業効率をカイゼンする150の技

【おすすめ読書】「やめる勇気」

Mon, 17 Dec 2018 00:00:00 GMT

メンタルトレーニング等を行っている著者による、メンタルを打たれ強くするコツです。レジリエンスとかちょっと前によく聞きましたが、それの高め方等が丁寧に書かれています。

ざっくりとは心を強くするにはどのような考え方を持てばいいか、強くなれる目標の立て方、ストレスに遭遇したらどうすればいいかということが書かれています。

さくっと読めます。何かが負担になっているけどそれが何かわからない、といった感情を抱いているときに読んでみると良さそうです。どうしてもやめたい、もうやめることを決意はした。けど、なんだかんだ続けてしまっている。という状態の人にもおすすめです。


タイトル	やめる勇気
著者	見波利幸
出版	朝日新聞出版
画像リンク

なぜ読んだか

タイトルが面白そうだったので手に取りました。あえて逆のことをする、という天邪鬼な人のことが結構好きです。迷惑だなあと感じることのほうが多いですが、多数の人とは逆の方に張って来る人は面白いと思っています。

あえて、ここで勇気をだしてやめる！みたいな雰囲気を感じたので読んでみました。

本の概要

結論はストレスに対してどのように対処していくかということです。社会では当たり前として認識されている、ストレスフルな行いやマナーなどに対して、本当に自分にとって必要か改めて考えよう。といったことが書かれています。

自分にとって必要でないことならやめてしまい、他のことにエネルギーを使いましょう。その考えるきっかけや後押しをしてくれます。

本の特徴

それほど特徴的なことはありませんが、わかりやすいです。難しい言葉とかは全然なく、この手のストレスとの付き合い方ジャンルの入門によいです。簡単に読めるのでちょっと空いた時間にちょうどいいです。

印象に残ったこと

レジリエンスを高める

レジリエンスとはストレスを跳ね返す心の弾力性のことです。大きな木ではなく、しなやかな竹のイメージを持つのがいいそうです。

やめるというのは、負担担っているストレスのもとを見極めることと、思い切ってやめてみること。

やめてみると大抵は新たなストレスを生むけど、別の方を受け入れることで負担が軽くなることもあります。結構このことは予測ができず、やめてみないとわからないということもあります。でもとりあえずやめてみるというのでも良いはずです。次がだめだったら次の次頑張ればいいわけですし。

目標を持つと強くなれる

以下のような目標を持っておくことで、強いメンタルにつながります。

実現可能性がある。
達成することに意義を感じる。
肯定的な感情で取り組める。

自分にとって大切なものや譲れないものを考えて目標化すると、なお良いそうです。実際到達すべき目標や、そこへたどり着くために必要な能力、解決すべき問題を日頃から意識しておくと良いです。

些細なことでも何かの役に立つのではないかとアンテナが敏感になります。同じことを経験しても、経験値が10でも100にもなります。

ストレスが発生したら

感情の本質的な理由を考えます。すべきではなく、したいで行動すると軽い気持ちで取り組めますね。

実際ストレスを感じたら、めっちゃ食べるという人もいればめっちゃ寝るという人もいますし、カラオケいくとかそういう人もいます。別のことで発散するのもいいですが、もとを詰めれば同じもので取り返さないとストレスの解決にはなりません。そのことと向き合って、解決策とかを考えることが大切ということです。

ただどうしても解決できないこともありますので、そのときは別のことを考えて軽減しましょう。人に迷惑はかけず、散財しないような、自分の体を傷つけないことであれば何でもいいですね。

まとめ

内容は3章まであるのですが、最初の1章に作者がおすすめのやめるべきこと21選が書かれてます。「二次会に行くのをやめる」とか、「成功者の真似をやめる」とかです。

とりあえず、この21選を自分に取って必要なことなのか見直してみるのがいいです。当たり前のようにやっていることばかりなので勇気が入りますが、やめてみると大したことなかったりします。やめる代わりにこういうことをしたらどうか、ということも書いてあるので親切でした。

実際にやめたら何を初めたいかということを思い描いておくと、やめるモチベーションになります。嫌だからやめると言うよりは、これがやりたいから時間確保のためにこれはやめる。ちょうど好きじゃなかったしラッキーと言う考えです。

やめる勇気「やらねば! 」をミニマムにして心を強くする21の習慣

Gatsbyの記事一覧の抜粋を修正

Fri, 14 Dec 2018 00:00:00 GMT

前から気になったまま放置していたもので、Gatsby を用いたブログ記事一覧ページにおける記事の抜粋がうまく表示されていませんでした。

デフォルトではマークダウンのコンテンツの最初140文字？くらいが抜粋として表示されるようです。しかし、1文字も表示されず、いきなり「・・・」になっていました。

今回ここを修正しました。Gatsbyのプラグインであるgatsby-transformer-remarkの使用方法の設定でした。非ラテン文字を扱う場合はクエリにパラメータが必要だったという、簡単な原因でした。同じ現象にあっている人がいれば参考にしてください。

抜粋はgraphQLで取得している

抜粋の部分は記事一覧ページにてgraphQlで取得しています。「excerpt」が該当します。ここで特に設定等なければ冒頭の140文字が取得できるはずですが、今回は取得できていない場合がありました。

この抜粋部分はGatsbyのプラグインの「gatsby-transformer-remark」が生成しているようです。mdファイルの中から最初の方の文字を抜粋としてフィールドにしている様子です。

  query {
    allMarkdownRemark(
		limit: 20 
	) {
      edges {
        node {
          frontmatter {
            title
            date(formatString: "YYYY/MM/DD")
          }
		  excerpt
        }
      }
    }

修正

以下のページのトラブルシューティングに記載がありました。
Gatsbyのプラグインのドキュメント

Gatsbyのプラグインである、gatsby-transformer-remarkを利用する際の設定です。非ラテン文字を扱う場合はクエリにオプションを設定すると解決できます。

  query {
    allMarkdownRemark(
		limit: 20 
	) {
      edges {
        node {
          frontmatter {
            title
            date(formatString: "YYYY/MM/DD")
          }
		  excerpt(truncate: true)
        }
      }
    }

以下のようにいい感じに治りました。

タグごとの一覧画面などでも同様の記述になっているのでまとめて修正しておきました。

他にも言語の違いなどによる不具合はあるのでしょうか。気づいたら修正して情報を共有していきます。頑張ってGatsbyのこと勉強します！

【おすすめ読書】「自分の仕事をつくる」

Thu, 13 Dec 2018 00:00:00 GMT

働き方研究家の著者による、ワークスタイルの探検報告です。仕事や働き方に対する固定化された概念が揺さぶられます。

イマイチ自分のやっていることに意味が見いだせないという方や、このまま続けていていいのか漠然とした不安を持っている人におすすめしたいです。働くことのモチベーションや会社にもやもやすることがある人にもおすすめです。


タイトル	自分の仕事をつくる
著者	西村佳哲
出版	ちくま文庫
画像リンク

なぜ読んだか

昔会社で支給されて読んだことがありました。「主体的に仕事をする」とはどういうことなのかということで読んだのだと記憶しています。あれから結構時間もたったので、もう一度読み直してみようと思いました。

概要

著者による働き方研究の成果がまとめられています。自分の仕事とはなにか、仕事とは何かということについて様々な業界の著名な人にインタビューした内容が書かれています。

かなりクリエイティブなデザイナーなども出てくるので、自分とは程遠いのではないかと感じるでしょうか。しかし、言っていることは共感でき、はっとさせられることが多くとても面白いです。常識化している、仕事や働き方の概念が揺さぶられます。

主体的に仕事をするためのノウハウなどはありません。ただし、マネージャなどへのインタビューもあるので「組織に主体的に働いてもらうにはどのようなことを意識すればいいか」といったことは結構参考になります。

特徴

色んなジャンルの人に対して行うインタビューの形式です。都度、似た事例や参考になりそうな情報や逸話などを紹介しており、読みやすくなっています。

文字は少なめで、数値とか用語とか難しいものはあまりないのでさくっと読めます。

印象に残ったこと

仕事を「自分の仕事」にする

やっぱりクリエイティブな人はどこか違うんだなーという感想もあります。ただ、いつかどこかで誰でもが感じたことがあるような疑問などに突き動かされているのかもな、という印象も同時に抱きました。

それを突き詰めて考えるか、それともある程度で蓋をして周りに合わせるか、といった違いの様に感じました。自分がしっくりこないことを疑問に感じること。素通りせずに意識し続けること。なかなか普通の人にはできないことだなーと学びました。

主体は働く人

働くに当たって主体は「働く人」なはずなのに、仕事が主体になっており本人はまるで他人事の様な構造になっています。言われたことをやるとか、これでいいのだろうかと疑問を持ちながらこなすなどの状態です。

自分を大切にする、自分らしさを模索し続けることが大切なようです。簡単そうに言いましたが、難しいです。

要素還元

「要素還元」という方法が紹介されていました。魅力的な物事に共通する法則を見出そうとするとき、好きだけど理由がわからないものをいくつか並べてみるのだそうです。

自分が心地よく感じ安心できる場所はどんな場所・物なのか、価値観のゼロ地点を探します。このような判断をできる判断力をもってないと、他人が使って気持ちいいものも生み出すことはできません。情報に埋もれる現代においてなくしてしまった能力です。

豊かさの実感が満たされない理由

ものがいくら充足していても、豊かさの実感が満たされない理由について書かれていたので紹介します。

絶対的に必要とされ、その意義があらかじめ約束されているものがこの世の中にどれほどあるのか。例えば、「花を生けること」は必需ではない。しかし、それを「意味がない」ということに意味はなく、花を生けようとする気持ちに尊い意味があるのではないか。

足りないとかムダと指摘したり感じることに意味はなく、作りたいとかやってみたいという気持ちや興味に豊かさがあるのではないでしょうか。この気持ちは本人にしかわからず、他人には見えないものだろうなと感じます。

まとめ

自分の仕事をつくる、というテーマについて考える中で、常識化している仕事の概念が考え直させられます。

人は能力を売るというより、仕事を手に入れるため会社へ通っているのではないでしょうか。

会社は仕事を売っていて、私達はその仕事を買いに会社へ通う
仕事を買うための対価は私達の時間
会社から買った仕事をすることで社会への貢献など、社会との関係付けができ満足感を得たい

この本では仕事について、会社からもらうのではなく自給自足できるようになるべきという意見がありました。主体は自分自身にあるということなのでしょう。

消耗している人も今はそうでない人も、今一度色んな仕事のあり方に触れて仕事との向き合いかたを考えてみるのはどうでしょうか。

自分の仕事をつくる (ちくま文庫)

引っ越ししました

Tue, 11 Dec 2018 00:00:00 GMT

引っ越しました。
これまで京都に住んでいましたが、会社を退職したこともあって地元の石川県に引っ越しをしました。

石川県野々市市

石川県でも住みよさ人気が高いらしい野々市市「ののいちし」と言うところに引っ越しました。

石川県といえば金沢市しか知らないという方も多いですが、この機会に名前だけでも覚えてもらえたら。結構色々揃っているので便利です。市役所もきれいでとても快適でした。観光するような場所は全然ありませんが、きれいな図書館・おいしいパン屋さんとか、モーニングセットがある喫茶店とかあります。

この季節一気に寒くなったこともあって、風邪ひきそうです。気をつけます。

野々市の情報も書いていきたい

引き続きWEBのことや本のことを書いていきますが、機会があれば野々市市の素敵なところや情報を伝えられたらいいなと考えています。

野々市市でのプログラミングやエンジニアの情報。WEB関連の情報なんかもあれば紹介したいですし、何かイベント等もできたらいいなと考えています。

とりあえずは野々市市に関連するアプリとかを作りたいです。

「のってぃ」というコミュニティバスが100円で乗れるのですが、乗り継ぎを調べるのがちょっと不便なんです。近所の大学でコミュニティに関わるシステムの開発をやっているようなので興味があります。応援したいです。

【おすすめ読書】「測って描く旅」

Fri, 30 Nov 2018 00:00:00 GMT

建築家・インテリアデザイナーである浦一也さんによる、旅先でいろんなものを測ってスケッチした！という内容の本です。

宿泊先のホテル部屋の間取りであったり家具などのスケッチが掲載されています。スケッチするに当たって、実際に測ったうえで、数値として高さや大きさが書き込まれていることがわかります。

インテリアなどのデザインをする上で、いろんな所を測ってみることで得られることが多いそうです。メジャーで測るのもちろんですが、自分の指の長さや足の大きさなど、「身度尺」を使って測ってみることも大切だそうです。

プログラミングなどで直接活かせることは特にないですが、旅先で部屋のスケッチを書いたりするのはなんだか良さそうです。気になったものを実際に測定してみるというのもやってみたら面白そうです。

本の中には著者によって書書かれたスケッチが大量に掲載されているので、お手本にもなります。旅行の話はあまりありません、間取りのことや家具のこと、スケッチのことは本格的に書いてありました。


タイトル	測って描く旅
著者	浦一也
出版	彰国社
画像リンク

測りまくる

身の回りのいろんなものを測る癖・習慣を身につけると空間のスケール感が身につきます。

著者もいつもポケットには小さなメジャーを持っていて、ホテルのゲストルームのあらゆるところを測ってしまうそうです。面白い癖ですね。

あらゆるものを測定の対象として捉えて記録していくことで、見についたスケール感でいろんなことを表現できるようになります。知人の家や旅行先のホテル、建物や名作の家具など、何でも測ってしまいます。

自分のよく使っている椅子なんかも、数値にするとどれくらいなのかといったことはわからないですし、意識したこともありません。自分にとって使いやすいものを見つけるためにも、触れてみたものを測ってみることは大切なように感じました。

測って描く

ホテルに泊まると、その部屋の間取りや家具なんかを測って、備え付けのメモやレターペーパーにスケッチするそうです。旅行先でゆっくりした時間を味わえそうでなんかいいですね。それを持って帰ってファイリングしており、見返すと楽しいらしいです。

様々なホテルのスケッチが掲載されており、とても見ごたえがあります。豪華なホテルの客室の間取り図なので見てるだけでちょっと楽しいです。

各国のいろんなホテルのスケッチをしたことで、比較することもあるらしく新たな気づき得られます。

ヒューマンスケール

自分の体の色んな所の長さを測っておいて、マイスケールとして使うことも推奨されています。

指や手、肘までの長さや1歩の歩幅など、様々なものです。「1m」といった企画よりも、「1歩」のほうが自分にとって意味のある数字になり、より空間を把握しやすいです。部屋の間取りや家具などは、人間が使いやすいように設計されているべきなので、こういった尺度が大切になります。

ヒューマンスケール（人間的尺度）という、人間の身体的な特徴であったり運動の大きさなどからわかる尺度を用いたものが、やはり使っていて気持ちいいようです。

現代ではいろんな尺度が混ざってしまって、純粋なものはほぼなくなってしまっているようですが、測定を繰り返す中で見つかっていきます。人間の生活似合ったものを作るのであれば、このようなヒューマンスケールが大切であり、ただ便利なことを突き詰めればいいというわけではないそうです。

このようなスケール感を身につけるのは難しそうですが、自分のお気に入りのもの、机とかコップとかはどんな大きさになっているのか測ってみて、他のものと比較してみたいなと思いました。

WEBでも測る

旅行先で測るという本でしたが、訪れたWEBサイトを測るという応用もできそうです。ブラウザのアドオンなどで様々な要素を測ったりできるので、それらのツールを利用して訪れたサイトを測ってみるのは面白そうです。

デザインの勉強として、要素を真似することは結構重要なことなので、同じようにやってみるといいです。今度気になったサイトの様々な部分を測って見たいです。デザインもそうですが、UIなどについても勉強になりそうです。

測って描く旅

Amazonのアフィリエイトのリンクを設置する

Tue, 27 Nov 2018 00:00:00 GMT

以前の記事でAmazonアソシエイトの審査に合格した旨を記載しました。
Amazon アソシエイトの審査に合格しました

せっかくなのでアマゾンへのリンクを生成してサイト内に設置します。いくつか記録していた読書感想の記事内に、関連書籍のリンクを設置します。

Gatsbyを用いてブログを生成してますので、記事のマークダウンファイルへ直接貼り付けられるようにしたいと考えています。

やること

アマゾンアソシエイトの管理画面でリンクを生成
    商品を検索
    商品を決定
    リンクを作成

記事マークダウン内にリンク挿入

とりあえず以下の記事でやってみます。
【おすすめ読書】「プリンシプルオブプログラミング」

アマゾンアソシエイトの管理画面でリンクを生成

商品を検索

「商品リンク」のメニューを選び検索窓で商品の名前を検索します。ここでは「プリンシプルオブプログラミング」と入力したところ出てきました。

商品を決定

該当する商品を選択します。一旦Kindle版の書籍を選択しました。

リンクを作成

リンクの形式を選択できます。それぞれ実際に触ってみればわかりますが、テキスト/画像のみ・テキストと画像など選択できます。

選択して下部に出力されるHTMLをコピーして、自分のブログに貼り付ければ完了です。

記事内に挿入

生成されたHTMLをマークダウンの中に貼り付けてみました。特に問題なく表示されています。
紹介者のIDなど大切な情報もしっかりURLについたままですので、この設置方法で問題なさそうです。

一旦画像のみの形式で設置してます。もっといい感じの設置方法がありそうですが、HTMLの変更等やっても問題ないのでしょうか。あまりHTMLを勝手に変更しすぎると、Amazonから怒られたりするだろうか。疑問なのでちょっと調べてみます。

まとめ

Amazonアソシエイトを利用して簡単にアフィリエイトのリンクが生成できました。
Gatsbyで作っている静的ブログでも、そのまま貼り付けるだけでリンクが設置できました。

Gatsby+Firebaseを利用したブログの作り方

Mon, 26 Nov 2018 00:00:00 GMT

Gatsbyで作成したブログをFirebaseで公開するまでの手順です。最初は躓くこともありますがなれると簡単です。お手軽にブログを公開できます。日頃から書き溜めているであろうマークダウンファイルが息を吹き返します。

Firebaseに無料で使える枠があるので、独自ドメインを使わない限りは無料でできます。でも、ドメインはあったほうが良いです。1年で1000円位支払えば十分それらしいものが取得できます。

Gatsbyでローカルにコンテンツを生成します。SPAのブログができます。要素は静的なHTMLとjsなので、ホスティングするのは静的な要素のみです。データベース等は不要です。ですので、フォームとかは設置できません。広告とかは設置できます。

Firebaseのホスティングで上記を満たすので、そこにコンテンツをアップロードして公開します。ドメインの設定方法は後日追記します。

やること

Gatsbyを使ってサイトをローカルに生成する
    Gastbyのインストール
    Gatsbyでブログテンプレートを使ってプロジェクトを作成
    開発サーバー開始
    ローカルで確認
    設定を変更
    コンテンツを作成
    ビルド

生成したサイトをFirebaseで公開する
    Firebaseでプロジェクトを作成
    Hostingの設定
    Firebaseにデプロイ

Firebaseに独自ドメインを連携
    独自ドメインを取得
    Firebaseの管理画面からドメイン接続を行う
    ドメインにTXTレコードを追加
    Firebaseからドメイン所有権の確認
    ドメインに対応するIPの設定
    証明書の反映

ざっくりこんな流れです。必要なプラグイン等は都度インストールしましょう。
以下に詳細な手順を記載します。

Gatsbyを使ってサイトをローカルに生成する

ローカル上でサイトを生成します。

Gastbyのインストール

npm install -g gatsby

事前にnode.jsとnpmはインストールしておきましょう。

Gatsbyでブログテンプレートを使ってプロジェクトを作成

gatsby new sub_blog https://github.com/gatsbyjs/gatsby-starter-blog

sub_blog の部分は好きなディレクトリ名を指定、そこに必要なファイルやスクリプトが生成されます。
後半のURLはスターターというテンプレートみたいなものを指定しています。いくつか公開されているものがあるので以下の中から好きなのを探せば良いです。
Gatsbyのスターター

開発サーバー開始

cd sub_blog
gatsby develop

ローカルで確認

ブラウザで「localhost:8000」にアクセスすると、サイトが表示されます。

設定を変更

gatsby-config.jsの中身を修正します。

とりあえずデフォルトでも動きますが、サイトのtitleとか変えておきましょう。 GoogleAnaliticsとかtwitterアカウントとか用意してあれば、設定しておくのが良いです。

    {
      resolve: `gatsby-plugin-google-analytics`    ,
      options: {
       //trackingId: `ADD YOUR TRACKING ID HERE`,
      },
    },

コンテンツを作成

src/pages 以下に記事を作成します。デフォルトでは記事ごとにディレクトリを作って書いている様子です。

固定のページ作るときは.jsでファイルを作成。記事書く際は.mdでファイルを作れば自動的にHTML化されます。
基本的な記事は.mdで作りましょう。一覧ページやタグごとのページなど特殊な処理が必要な場合は.jsで作ることになります。

.mdファイルの書き方や書式はデフォルトであるファイルを参考に真似すれば問題ないです。基本的に「frontmatter」と呼ばれるファイルのアタマの部分の書式を真似して、本文はマークダウンで自由に書けば良いです。私は以下のようにしています。

---
title : 'Gatsby+Firebaseを利用したブログの作り方'
date : '2018-11-26'
tags : ["ブログ","Gatsby","Firebase"] 
category : 'blog'
---

本文をここに書く

ビルド

gatsby build

上記コマンドを実行するとコンテンツが生成されます。 public以下にファイルが生成されるので、それらをサーバに設置することで公開となります。

生成したサイトをFirebaseで公開する

先程生成したコンテンツをサーバに設置します。

Firebaseでプロジェクトを作成

Firebaseへようこその画面で「プロジェクトを追加」を選択します。

プロジェクトの名前を設定
場所を日本に設定

あとはデフォルトで大丈夫です。

Hostingの設定

画面左側のHostingを選択して、使ってみるを選択します。以降は基本画面に出る内容をそのまま実行していけば問題ないです。

Firebase ツールをインストール。

npm install -g firebase-tools

ターミナルウィンドウを開き、サイトのディレクトリに移動するか、ディレクトリを作成します。

cd sub_blog

Google にログインします。firebaseを利用しているGoogleアカウントの情報を入力します。

firebase login

プロジェクトを開始。

firebase init

とりあえずHostingをチェック、他は今のところ不要です。

projectはさっきFirebaseで作ったやつを選択、あとで変更も可能です。

publicディレクトリとして使うのはデフォルトのまま「public」。

SPA用の設定にするかというところは「yes」。

public/index.htmlは上書きしない「no」。

publicがデプロイディレクトリになっているので、この中身がFirebaseへデプロイされる対象になります。

Firebaseにデプロイ

firebase deploy

これで先程のサイトが公開されているはずです。Firebaseの管理画面のHostingからURLを選択してアクセスして確認します。

Firebaseに独自ドメインを連携

以前、以下の記事にてドメインの設定はまとめました。より詳細に見たい場合はこちらもご確認下さい。
ドメインの取得・Firebaseへの設定

独自ドメインを取得

私はお名前.comで取得しました。使いたいURLを検索して決定した後、コンビニ等でお金を払えばOKです。お名前.comの管理画面から確認できます。

Firebaseの管理画面からドメイン接続を行う

Firebase管理画面のHostingのメニューで「ドメイン接続」のボタンを選択します。接続したいドメインを聞かれるので、先程取得したドメインを入力します。

「以下の TXT レコードを DNS プロバイダに追加して〜」と表示されます。そこに記載の値をこのあと使います。この画面のままおいておきます。

google-site-verification=〜
てやつです。

ドメインにTXTレコードを追加

お名前.comではドメイン設定メニューのDNS関連機能の設定を選択して、「DNSレコード設定」を利用します。

DNSレコードの内容を追加できるフォームが表示されるので、以下のように設定して追加します。

TYPE：TXT
VALUE：google-site-verification=〜
状態：有効

上記の設定画反映されるまではしばらく時間がかかります。

Firebaseからドメイン所有権の確認

先程おいておいた画面から「確認」ボタンを押して先に進みます。

上記で行った操作の反映が済んでいれば承認完了です。失敗する場合は時間をおいてからもう一度行いましょう。場合によりますが半日くらいかかる場合もあります（サイトによると最大72時間だそうです）。

ドメインに対応するIPの設定

所有権が確認されると、FirebaseのHostingしているサイトのIPアドレスが表示されます。その内容をドメイン側に登録します。

セットアップモード：クイックセットアップ

レコードタイプ「A」、値「IPアドレス」が2行表示されるので両方ドメインに登録します。

お名前.comのドメイン設定メニューのDNS関連機能の設定を選択して、「DNSレコード設定」をもう一度利用します。 DNSレコードの内容を追加できるフォームが表示されるので、以下のように設定して追加します。 IPが2つ表示されていたので、2レコード追加することになります。

TYPE：A
VALUE：Firebaseで表示されたIP
状態：有効

反映にはまた時間がかかりますので気長に待ちましょう。

反映が終われば設定完了です。取得したドメインにアクセスするとサイトが表示されるようになります。

証明書の反映

反映されてもしばらくのうちは証明書によるアラートが表示されます。しばらく時間が立つとFirebaseが証明書を発行してくれるので、待っていると解決します。

反映の状況はFirebaseのHostingの管理画面から確認できます。

ここまでで一通りサイトの発信が完了です。

サイトの更新

以降はgatsby buildすると、public以下にサイトが出力されます。
firebase deployすることでpublic以下のファイルがFirebaseにデプロイされ、サイトが公開・更新されます。

まとめ

こんな感じで簡単にWEBサイトが公開できます。いろいろカスタマイズしたいところですが、Gatsbyのカスタマイズ方法等はまだあまり情報がないです。このブログでもどんどん試してみて紹介していきます。

自分の備忘のためにも手順まとめてみましたが、改めてやってみて簡単でした。上記の手順をまとめながら別カテゴリーの別ブログを公開してます。ドメイン等設定できたらリンク貼っておきます。

別テーマのブログ

Amazon アソシエイトの審査に合格しました

Thu, 22 Nov 2018 00:00:00 GMT

タイトルの通り、Amazonアソシエイトの審査に合格しました。前回申請した際には不合格だったのですが、しばらく時間がたって記事数も増えたので再申請したところ合格でした。

合格時点でのブログの状況を参考として記載しておきます。

合格時点のブログの状態

申込みから合格まで

Google AdSenseに2018年11月22日15時に申し込み
当日の2018年11月22日17時半に合格の連絡が来ました。2時間半で完了しました。

審査は2回目です。1回目の審査の際はコンテンツ不足で判断できないという旨のメールが届き不合格でした。

記事数

29件（2018年11月22日）

一度目の審査でコンテンツ不足を指摘されていたので、それ以降はなるべく文字数等多くするよう心がけました。 1000文字くらい目指そうというくらいです。実際、1000文字達している記事はいくつかあるくらいです。

内容

読書感想
Gatsbyでの実装方法
Firebaseの利用法

など

ポリシーの記載

プライバシーポリシーのページは設置してました。
プライバシーポリシー

作成時点では審査の合格は来てませんでしたが、広告配信についての記載はしていました。

Gatsbyを利用したSPA

SPAで実装したブログです。
Gatsbyを使って静的なHTMLを生成して、Firebaseでホスティングしています。

独自ドメインを取得済み

ブログサービスなどを利用せず、独自ドメインを取得して配信しています。

SEO関連の対応

メタタグなどの対応は行いました。 OGPタグも設定してました。

SNSのへのシェア用のリンクは設置済みで、FeedlyのRSSも設置してます。
sitemap.xmlも設置済みです。
robots.txtも設置済みです。

Google Analiticsの設定も対応済みです。アクセスの情報等確認できる状態です。
Search Consoleの設定も対応済みです。

Gatsbyで実装するに当たって

次はAmazonのリンク作成して記事に設置していきます。このブログはGatsbyで生成しているのでマークダウンで記事を書いています。
マークダウンファイルの中にいい感じでリンクを埋め込めるのかということと、SPAで正常にリンクの部分が表示されるかといったところが気になります。

また試してみたら報告します。とりあえずは読書感想の記事内に書籍のリンクを置こうと思います。

プログラミングの101個の原理原則『プリンシプルオブプログラミング』

Wed, 21 Nov 2018 00:00:00 GMT

プログラミングを行うときに意識するべきことや役に立つことを101個の原理原則としてまとめています。今までに先人たちが提唱してきたアドバイスやメソッドをわかりやすく紹介した本です。

プリンシプルとしてまとまっていますので1つ1つが薄くなっている場合もあります。詳細な意味や内容が気になる場合は出典も読むといいです。出典書籍の情報や関連書籍がしっかり掲載されているので、気になったものはそちらをチェックして掘り下げましょう。巻末にはindexもあり、気になったものを検索することもできます。

プリンシプルオブプログラミングという名前の通り、プログラミングを行う際のテクニックが多いです。もっと考え方や態度など、技術以外のエンジニアの心がけが知りたい場合はベタープログラマ ―優れたプログラマになるための38の考え方とテクニックという本がおすすめです。以下の記事でも紹介しています。
【おすすめ読書】ベタープログラマ

これからプログラミングを始めるという人には、【実践技術書】独学プログラマーなど、入門の本を先に読みましょう。プリンシプルオブプログラミングについては、ひとまずプロダクトを作ってみてから読むのがおすすめです。

プリンシプルオブプログラミングを読んで、「こんな経験したなあ」とか「昔見たけど忘れていたな」というものを思い出すきっかけになります。この記事では、WEBエンジニアの私が重要だと感じたものを取り上げて紹介します。

みなさんも自分なりのプリンシプルオブプログラミングをつくってみてはいかがでしょうか。まとめて机に貼っておくか、デスクトップ用の壁紙にでもして思い出せるようにするといいですよ。

Don’t repeat yourself

DRY（ドライ）と言われる有名な原則です。ざっくりとは同じコードを重複して書いてはいけないということです。コピペ禁止です。あちこちにコピペした結果、修正や変更の際に全部の箇所に手を入れなくてはいけません。これはあくまでも一例で、コードの改善が難しくなってしまうことはありがちな問題です。

関数化やモジュール化などを検討して、コードを抽象化することで回避できます。時間がなくて急いでいるときほどコピペしがちです。忙しくて問題が起きてほしくないときに限って問題が発生する印象があります。ですので、常に落ち着いて対処することを心がけましょう。

実際の現場ではすでに実装されている箇所への影響を防ぐために、コピペで作ろうという判断もありました。今思えば議論の余地はなく修正を行うべきだったのではないかとも思います。長い目で見れば損を産んでしまうので、忙しい時でもリファクタリングして重複を取り除くことができればよかったです。これから実装するものだけでなく、すでに実装されているものに対しても積極的に修正・リファクタリングを行っていくべきです。

プログラミングにおいてこのDRYはかなり重要な原則です。「おやっ」と思うことがあれば必ず直すべきと思ってもいいくらい強いものだと思います。予めユニットテストを準備しておくことや、リファクタリングの時間を予めスケジュールすることなどができれば、快適にこの原則を守れそうです。

ちなみに、DRYはプログラミング以外のことにも役立つと思います。テストであったりデプロイなどの作業についても、何度も繰り返しやることになります。日々のメールによる報告とかもそうでしょうか。早いうちに自動化を検討して、繰り返し行わなくていいようにしましょう。

ブルックスの法則

「人月の神話」にて出てくる言葉です。プロジェクトの進捗が悪いために新たに人員を追加すると、火に油を注ぐ形となりさらなる遅延につながります。

工数の見積もりには人月を使います。人×月なのですが、実は「人」と「月」は交換不可能になっています。すなわち2×6と6×2ではどちらも12人月なのですが、現実では同じにはなりません。

依存関係のオーバーヘッドであったり、新しく参加するに当たっての教育や共有などに時間がかかるため、この現象が発生します。リスケジュールしたり、機能に優先度をつけて一部のみ開発するなどの機能面での対応が望ましいです。それらの相談は勇気が必要ですが、それをできるかどうかが良いエンジニアを分けるのではないかと思います。良いエンジニアはプログラミング以外のところで強さを発揮すると思います。プログラミングの技術やスピードだけが良いエンジニアとは限りません。コミュニケーション力や調整力など、さまざまな技能が必要なようです。

割れた窓の法則

割れた窓を放っておくと、そばにある他の窓も割られていくというものです。割れた窓は見つけ次第直せ！ということです。

どこかで悪い・汚いコードを見つけると、他の部分もどうせそうだろうと思い同じようなレベルでコードを書いてしまうというものです。人間には他人の行動を真似る特性があり、悪いコードも無意識に真似してしまいます。自分は流されずに綺麗なコードを書くこと、悪いコードを放置せず見つけ次第直すことが求められます。

直すのには時間もかかるし、動いているものを修正するのはめんどくさいことも多々あります。それでも時間を取って、積極的に書き直していくことで美しいシステムが守られます。ただし勝手に書き直すと余計なバグを生む原因にもなります。周りのメンバーや上司と相談する機会を設けて、足並みをそろえながら取り組みましょう。こういった文化づくりも美しいシステムを維持するために重要になります。

おわりに

他にもたくさんの原理原則があり、どれも重要と感じるものばかりです。プリンシプルオブプログラミングというタイトル通りです。なんせ101個もあるので全部は紹介できません。プログラミングをしていく中でこれら以外のものと出会うこともあります。実際にプログラミングでものをつくる、納品していく中で嫌でも身にしみて覚えていくと思います。

現場や文化、作っているシステムの性質などによっても変わることがあります。できれば原則に従うことが大切だと思いますが、現場のルールや方針によってはそれに従わないという選択をする場合もあります。
原則に背くことになったとしても、それによって何を得られて何を失うのかといったことを考えておくことが重要です。
大概の場合は未来の時間を消費しています。現時点では何が起こるか、未来にどうなっているのかは正確にはわからないので、この点はしっかり抑えておきたいです。「あの時こうしておけばなあ」と感じることが合ったらしっかり覚えておいたほうがよいです。次の機会では同じことをしないように気をつけることができるようになります。

私はシステムに関する原則は他の仕事や実際の生活にも当てはまるなあと思っています。とくにDRYの原則なんかとてもそう思います。ここでは紹介しませんでしたがYAGNI（You Aren't Going to Need It）とかKISS（Keep It Simple,Stupid. Keep it Short and Simple.）なども、なんにでも当てはまるのではないかと思っています。 Less is more.なんかも素敵です。いい言葉ですね。

また機会があれば紹介します。

【おすすめ読書】「エッセンシャル思考」

Tue, 20 Nov 2018 00:00:00 GMT

「最小の時間で成果を最大にする」がテーマの本です。効率よく物事をすすめるための思考法が書かれています。

エンジニアとしてものを作る中で学べることがあると思います。効率的な働き方を探してみます。重要なことや本質的なことを見極める、それに集中するためのコツが書かれています。

もっと効率的に仕事や勉強がしたいとか、ムダなことに時間を使ってしまっているような感覚がある人におすすめです。一度立ち止まって自分の日頃の行いや作業を振り返ってみるのがいいのではないでしょうか。


タイトル	エッセンシャル思考
著者	グレッグ・マキューン
訳	高橋璃子
出版	かんき出版
画像リンク

より少なく、より良くするためには、迷わないことと流されないこと！

日々の仕事が忙しすぎて寝不足という方や、気まずくて断れない方、周りに振り回されている気がするといった方におすすめです。あと、クローゼットの掃除をしたくなりました。

仕事を覚え始めるといろんなことを任されるようになったりすると思います。しかし、それらの作業の中で本当に重要なことは少ししかないです。そういった無駄なことをしっかり判別して断っていくとこがエッセンシャル思考のようです。どうすれば、「より多くのことをできるようになるのか」ではなく、より多くの中で「どれが大切なことなのか」に注目することです。

全部大切だから全部最優先でやってという指示はよくあります。全部優先するというのは、どれも優先できないということなので、やってはいけません。実際にどれかを選ぶということはそれ以外を捨てるということになります。そのときに生まれる「もったいない」や「印象が悪くなるのではないか」といったことに立ち向かうことができるようになれば、エッセンシャル思考を身に着けたようなものかと思います。

自分の中心にエッセンシャル思考を置き、非エッセンシャルな部分を外へ押し出していくことを目指し意識していきます。

感想メモ

エッセンシャル思考とは何か

より少なく、より良く。

全部やろうとはしない。仕事を増やすよりも減らすことを考えます。現代では選択肢が多いこと、欲張りな時代、他人の意見がうるさすぎることなどにより、報告性を見失いがちになっています。

クローゼットと同じ

仕事もクローゼットと同じ、整理しないといつかいっぱいになります。

評価する
いつか着るかもではなく、大好きかどうか。また買いたいと思うか
捨てる
捨てるのは努力が必要
実行する
定期的に整理する

選択肢は限られていても、何を選ぶかは自由。外的側面（どんな選択肢があるか）ばかりに目を向けている。しかし、内的側面（選ぶ能力）に目を向けるべきです。

よく聞きますが、80対20の法則（パレートの法則）のように、大多数の情報は不要なものです。

パレートの法則はなんにでも当てはまるのでしょうか、今度調べてみたいです。

何を選ぶかは何を捨てるかということ

全部優先する、は何も優先していないのと同じです。どうすれば全部できるかよりも、どれに集中するかを考えるほうが良いです。

睡眠は8時間以上

効率が良くなります。すごい人もそれくらいは寝ているらしいです。

遊びも重要です。選択肢を広げること、ストレスを軽減すること、脳を活性化させる効果があります。

捨てる技術

断り方のレパートリーを日頃から増やしましょう。

途中でやめることを恐れない。もったいないを克服する。人間は今行っている状態を重要に感じてしまう、現状維持バイアスにとらわれてしまいます。ゼロベースで考えることが大切です。

続ける仕組み

ボトルネックを取り除く。小さく初めて、まず終わらせることが大切。小さく前進して目に見える形で測定していくことがモチベーションにつながります。

おわりに

いくつかの具体的なアドバイスもあり、わかりやすいです。全部を良くしようとするのではなく、まず対象となる大事なものを減らして、集中することで良くして行こうという考え方です。

減らすのには勇気が入りますが、たしかに対象となるものを減らせばその分一つ一つに集中できることは間違いありません。

あれもこれもと忙しくなりそうなタイミングで、手を付ける前に一度読み直してみるのがいいと思います。

【おすすめ読書】「思考をやわらかくする授業」

Tue, 20 Nov 2018 00:00:00 GMT

先入観などにとらわれない、自由度の高いアタマを作るためのセルフイノベーション術の本です。なんかややこしい言い方になってしまいましたが、自分らしく生きるために意識するべきことが61個の言葉で書かれています。

気づいたら硬い思考をしていることってよくあると思います。もっと柔らかい頭で考えられれば。と思ったことは何度もあります。なぞなぞとか脳トレによるものではなく、考え方や行動を変えることで思考を柔らかくします。

なんとなくこういった本はよく見かけますよね。同じようなことが書いてあるかもしれないですが、重要だと思うところを自分なりにまとめて見るのも面白そうです。


タイトル	思考をやわらかくする授業
著者	本田直之
出版	サンクチュアリ出版
画像リンク

印象に残ったところ

定期的に引っ越しをする

もうすぐ引っ越しの予定があります。結構遠くに引っ越します。引っ越しの準備等結構大変ですが、楽しみでもあります。何度か引っ越しの経験はありますが、いつも直前は楽しみです。新しい土地新しい部屋で新しい生活が始まります。今住んでいる土地よりも便利かもしれないしそうでないかもしれません。

近所にスーパーはほしいです。ほかは何でしょうか。駅とかバス停とか近くにほしいですが、まあ歩くのも好きなのでどちらでもいいです。本屋さんとかあったら嬉しいです。私はよく本を衝動買いしてしまうので注意したいです。

がらっと生活が変わるのってなかなかないので、この引っ越しというイベントが個人的には好きです。荷物の準備等やらなくてはならないことが山積みなので大変ですが。

実はいろんな選択肢があるのに、気づいていない忘れていることがあるので、定期的に環境をリセットして新しく作ることは効果的だそうです。

変わることを否定する人間になってはいけない

返るべきではない理由を上げ始めたらきりがありません。自分が変わらない間に周りは変わっています。私もエンジニアをしているので日々移り変わる技術を目にして、困惑することもあります。しかし、目まぐるしく変わる知識がとても楽しいとも思います。

今はまだまだあとから必死に追いかけている状態ですが、新しい波を自分で作ることができたらさぞ楽しいだろうなと思います。

自分から積極的に物事を変えようとするか、変化を起こそうとする人を応援するか、いずれかのスタンスが良いそうです。

迷ったら、捨てる

部屋にものが少ないとスッキリします。思考も軽くなる気がします。捨てられないものの大半はなくしても気が付かないものだそうです。迷ったら捨てるくらいが良いそうです。1年以上使っていないものは自分にとっていらないもの。引っ越しのときにいっぱい処分しようと思います。

ものを増やすのは簡単ですが、減らすのって難しいですよね。無料のサンプルや、誰かがただでくれるものは受け取らないのがおすすめだそうです。私は結構断る方で、プレゼントとかも不要ならすぐ捨てます。みなさんはどうでしょうか。

ものを持たない人ほど物の価値がよくわかっている証拠だそうです。

何を知っているかよりも何を生み出せるか

自らがが教えるときに最もよく学べるそうです。知識は溜め込まずどんどん発信していきましょう。相手にどうやって伝えるか、わかりやすくできるか。ポイントを整理したり、筋道を立てたりすることが、自分の理解にもつながります。

自分から発信するようになると、他の発信している人と繋がれるといったことも利点です。簡単にWEB上で発信出来る時代なので、どんどんやってるべきです。

普通の人には嫌われろ

誰かに好かれているということは、誰かに嫌われているということ。
勇気が必要ですがとても納得です。そうなのかもしれません。

おわりに

普段の行動や考え方を改めることで、柔らかい思考を目指すことができます。実際書いてあることは、そういう考え方も合ったか、と納得してしまうようなものが多いです。

当たり前だと思っていたことも別の視点から見れば全く逆だったりということはあるので、様々な考え方に触れて取り入れてみることで、新しく知ることもあると思います。

先入観にとらわれているのではないか、と日々自問しながら柔らかい思考を目指したいと思います。

【おすすめ読書】「日経LINNUX 7月号付録 Ubuntu 18.04 LTS」

Fri, 16 Nov 2018 00:00:00 GMT

突然ですが私はLinuxのPCを使っています。 NECのLaVieシリーズの薄くて軽いノートパソコンにUbuntuを入れて利用しています。もともとはWindowsが入っていましたがOS書き換えました。困ることもありますが、個人的には便利です。

ちょっと前に新しいバージョンになってから色々便利になったのですが、ちゃんとチェックしていなかったのでこの機会に学ぼうと思います。以前買いっぱなしでちゃんと読んでいなかった日経Linuxの付録冊子を読んで、覚えたいことなど記録していきます。

Ubuntuの操作

Super
アクティビティ画面起動中のアプリケーションを切り替えアプリケーションの検索やワークスペースの切り替えも可能
Super + a
アプリケーション画面インストール済みのアプリケーションを表示
Super + tab
アプリの切り替え
Super + ↑
全画面表示
Super + →←
画面右や左に寄せて表示
Super + pageup pagedown
ワークスペースの切り替え
Ctrl + alt + ↑↓でも可能
Ctrl + alt + t
端末の起動
- Ctrl + shift + t
  新しいタブ
- Ctrl + pageup
  タブ移動
- Ctrl + shift + t
  新しいウインドウ

ファイルマネージャー

ctrl + l
パスをテキスト化して選択

とりあえずそんなに情報なかったのでこれくらいにしておきます。
またどこかで便利なテクニック等見つけたら備忘のために書き足しておきます。

広告表示のためにreact-adsenseを利用する

Thu, 15 Nov 2018 00:00:00 GMT

Google AdSenseの広告を設置してみましたが、うまく表示されていません。 Gatsbyを用いてSPAでで配信しているためだと思います。どうやら、「react-adsense」というプラグインを利用することで解決できるようなので、それを使ってみました。

結果、広告は正常に表示されました。
自動広告のほうがうまく行かないようなので、様子を見て無効化しようと思います。

発生している現象

管理画面で取得した広告のタグを設置してみているが、正常に表示されません。こんな感じです。

  <ins className={"adsbygoogle"}
       style={{display:'block'}}
       data-ad-client="xxxxxxxxxxxxxxxxxxxxxx"
       data-ad-slot="xxxxxxxxxxxxxx"
       data-ad-format="auto"
            data-full-width-responsive="true"></ins>
  <script>
  {`
            (adsbygoogle = window.adsbygoogle || []).push({});
  `}
  </script>

広告が表示されない
googleが提供するjsファイルについてはhead内で一度ロードするようにしています。
HTML上には出力されていますが、動的に広告に置き換えられていない様子です。最初の画面では表示されることがあります、しかし画面遷移の場合は表示されません。 SPAで実装していることが原因と考えられます。
pluginの導入により、正しくスクリプトが動作するようになるはずです。
デザインが崩れる
文字が中央寄せになります。自動広告の設定をしているためDOMが書き換えられている様子。
記事のDOMの親として中央寄せのdivが追加されるので、これの仕業だと考えられる。自動広告をOFFにするよう設定したので、時間が経過すれば解決するはず。

プラグインを利用する

プラグインをnpmでインストールします。

npm install --save react-adsense

その後、head内に以下のjsを読み込んでいることを確認、なければ追加します。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

広告を表示したい箇所に以下のタグを挿入。各ページやtemplateに追加します。 clientとslotの箇所は広告のタグに記載の内容を設定します。

import AdSense from 'react-adsense'

~~~

<AdSense.Google 
    client={siteConfig.adClient} 
    slot={siteConfig.adSlot} 
    style={{ display: "block" }} 
    layout="in-article" format="auto" />

結果、広告が正常に表示されるようになりました。非同期でページを取得するたびに、広告を生成するスクリプトが実行されるようになったのだと思います。

詳細は今度調べてみようと思います。

Google AdSenseの広告の設定

Wed, 14 Nov 2018 00:00:00 GMT

以前記事にしましたが、Google AdSenseの審査に合格しました。現在は自動広告の設定にしているため、Googleが自動で学習して広告を設置してくれています。

ただ、以下のような問題が発生しています。

ブログ内の要素が中央寄せになる
ページ移動して戻ってくると広告が消える
広告がヘッダーよりも上に表示される

Gatsbyを用いてSPAでで実装していることが大きな原因かと思っていますが、どうなんでしょうか。
このままではまずいので、自動広告の設定をやめてちゃんと設定をし直します。

広告の設置イメージ

以下の部分に広告を設置する方針です。
思い通りに設定できるかわかりませんがとりあえず以下を目標にします。

TOPページ

記事リンクの中にテキストの広告を挟む。4記事ごとに1広告くらい。

記事ページ

記事の上部タイトル下
記事の下部

タグ一覧ページ

記事リンクの中に広告を挟む。

広告設置タグの生成

Google AdSenseの管理画面で設定します。結構細かく設定できます。

設定方法や内容については後日紹介します。とりあえずこのブログはレスポンシブなので、レスポンシブに対応した広告を設置することにします。

自動広告の無効化

Google AdSenseの管理画面にて設定変更します。サイト側のタグやスクリプトは入ったままでいい様子です

広告メニューの「自動広告」を選択
全般設定の右の方の鉛筆マークを選択
ページ内広告の種類が4つ、オーバーレイ広告の種類が2つくらい並んでいる画面が表示
この画面内のスイッチを全部オフにします。

設定変更後しばらく時間が立つとサイトに反映されるようです。

タグページへのリンク作成

Tue, 13 Nov 2018 00:00:00 GMT

タグページの作成にて、タグごとの記事一覧を作成しました。

記事内に表示されているタグの部分を、このページへのリンクに修正します。
SEO的にも関連ページへの内部リンクはあったほうが良いでしょう。

記事ページのテンプレート修正

タグに設定されている単語はGraphQLにて配列形式で取得しています。

markdownRemark(fields: { slug: { eq: $slug } }) {
  html
  frontmatter {
    title
    tags
  }
}

この配列を使って、以下のようなURLへのリンクを生成します。

タグページ(gatsby)

記事ページのテンプレートを修正します。
/src/template/blog-post.js

こんな感じですね。

タグ：{post.frontmatter.tags.map(( value , id ) => (
<Link 
  key={id}
  to={`/tags/${kebabCase(value)}/`}
>
    {value}
</Link>
))}

記事上部のタグ部分がリンクになりました。
タグで絞り込んだ一覧ページへ遷移できるようになりました。

タグ一覧ページの内容

現在はトップページとほぼ同じで、該当するタグに合致する記事のみ絞り込む状態になっています。できれば、SEOの対策としてタグごとの概要などをかければいいですが、一旦このままにしておきます。

とりあえずですが、タグのリンクはできました。結構簡単にできます。Gatsbyの情報はあまりないのですが、このへんまでなら結構見つかります。もっと独自の改修をしようと思うと困ることが多いです。

各記事の下部とかに、「同じタグのおすすめ記事」のような内部リンクを足して回遊をしやすくする機能を追加する予定もあります。また実装したら記事にします。

Google AdSenseの審査に合格しました

Mon, 12 Nov 2018 00:00:00 GMT

タイトルの通り、Google AdSenseの審査に合格しました。とりあえず自動で広告が表示されるように設定していたので、広告が表示されていることが確認できます。

合格時点でのブログの状況を参考として記載しておきます。

現時点ではデザインが崩れてしまったり、うまく表示されないことがあります。
広告の表示方法などの設定を行い、いい感じに表示できるようにしていきたいです。

合格時点のブログの状態

申込みから合格まで

Google AdSenseに2018年10月18日に申し込み
2018年11月12日に合格の連絡が来ました。

結構時間かかりましたが、一回の申請で通りました。
審査中もコンテンツの投稿や、デザインや要素の変更などやってました。

記事数

23件（2018年11月12日）

文字数は少ないです。1000文字達している記事はいくつかあるくらいです。

内容

Gatsbyでの実装方法
Firebaseの利用法
読書感想

など

ポリシーの記載

プライバシーポリシーのページは設置してました。
プライバシーポリシー

作成時点では審査の合格は来てませんでしたが、Google AdSenseの広告配信についての記載はしていました。

Gatsbyを利用したSPA

SPAで実装したブログです。
Gatsbyを使って静的なHTMLを生成して、Firebaseでホスティングしています。

独自ドメインを取得済み

ブログサービスなどを利用せず、独自ドメインを取得して配信しています。

SEO関連の対応

メタタグなどの対応は行いました。 OGPタグも設定してました。

SNSのへのシェア用のリンクは設置済みで、FeedlyのRSSも設置してます。

sitemap.xmlも設置済みです。

robots.txtも設置済みです。

Google Analiticsの設定も対応済みです。アクセスの情報等確認できる状態です。
Search Consoleの設定も対応済みです。

Gatsbyで実装するに当たって

現時点ではGoogle AdSenseの設定で、自動で広告が表示されるようにしています。
表示する場所や大きさを指定しなくても、勝手に調整して表示してくれるようです。

ただ、以下のような問題が発生している様子です。

ブログ内の要素が中央寄せになる
ページ移動して戻ってくると広告が消える
広告がヘッダーよりも上に表示される

このブログをGatsbyを用いてSPAで構築しているためだと思います。
正常な表示になるように、表示する広告の調整を行おうと思います。

とりあえず、自動での表示ではなく広告の形などを設定してタグを埋め込む形での広告配信を試してみます。

追記

自動広告をやめて、広告ユニットを用意して設置するように変更しました。

広告のサイズなどはレスポンシブを設定しているので、画面幅に合わせて変形してくれます。画面の崩れなどもなくなりましたしいい感じです。

情報を見ている限りでは自動広告は結構効果がいいらしいのでもったいないのですが、GatsbyまたはSPAと相性が悪い様子なので諦めます。

とりあえずはこのスタイルでやってみます。

広告には関連記事のリンクなど、いろいろな種類があるのでそれらも試していこうと思っています。

タグページの作成

Thu, 08 Nov 2018 00:00:00 GMT

SEO対応と記事閲覧の観点から、タグごとの記事一覧ページを作成します。
記事ごとにつけられているタグを使って、タグを使った記事絞り込みを行えるようにしました。

Gatsbyのドキュメントにざっくり実装方法書いてあります。参考にしながら実装していきます。

mdファイル側にタグを設定

マークダウンのfrontmatterにtagsを追加します。

私は勝手にカンマ区切りで設定していましたが、ドキュメントでは配列で指定するように説明されてました。
これまでの記事についても配列に直しておきます。

---
title: "A Trip To the Zoo"
tags: ["animals", "Chicago", "zoos"]
---

タグページのテンプレート作成

以下にタグページ用のテンプレートを作成します。いったんドキュメントに記載の内容で試してみました。

src/templates/tags.js

GraphQL で以下のように取得します。 tagの文字列を受け取って、filter: { frontmatter: { tags: { in: [$tag] } } }の部分で絞り込みの条件にしてます。

	query($tag: String) {
		allMarkdownRemark(
			filter: { frontmatter: { tags: { in: [$tag] } } }
	) {
		totalCount
		edges {
			node {
			  id
			  frontmatter {
				title
				date(formatString: "YYYY/MM/DD")
			  }
			  excerpt
			}
	   }
   }

gatsby-node.js でページを生成するように記述

もともと、記事詳細を作成していた処理に追加します。

graphQLでfrontmatterのtagsも取得
tagsの内容を配列にして保持し、これを使ってタグごとの一覧ページを作成

      let tags = []   
      tags = tags.concat(edge.node.frontmatter.tags)

      // Make tag pages
	  tags.forEach(tag => {
	    createPage({
	  	  path: `/tags/${_.kebabCase(tag)}/`,
          component: path.resolve(`./src/templates/tags.js`),
	  	  context: {
	  	    tag,
	  	  },
        })
      })

ドキュメントのまんまの実装で、タグに属する記事を表示するページができました。見た目はいまいちですね。

タグページ(gatsby)

/tags/ にすべてのタグをリストするページを作成

src/pages/tags.jsにページを作成

GraphQLで以下の指定を行いタグを取得。この配列を使って一覧を出力します。

query {
	allMarkdownRemark(
		limit: 2000
	) {
		group(field: frontmatter___tags) {
			fieldValue
			totalCount
		}
	}
}

こちらもドキュメントまんまの実装をして、マークダウンのtagsの部分を配列の形式で書き直したところ、以下のようにページができました。

タグ一覧ページ

タグページとタグリストページをデザイン反映

基本的にはトップページと同様の要素を並べます。
ヘッダーフッターとタグに該当する記事です。

見出しとかの要素をindexページに合わせて修正するくらいです。
先程作ったテンプレートを修正しました。

src/templates/tags.js

【おすすめ読書】「8割捨てる！情報術」

Wed, 07 Nov 2018 00:00:00 GMT

情報の扱い方についての書籍です。普段手に入る情報のうち8割はムダで、残り2割のみが重要であるという考えです。

情報過多と言われる時代なので、目に入るものすべてを取り入れていくわけには行きません。うまく取捨選択していくための技術や考え方を得られそうです。どちらかといえば、ほとんどいらないことばかりなので、見逃した情報が合ってもそれほど問題にはならないよ。という内容です。

情報の上手な取扱、取捨選択や記事のスリム化などに向けて、知識を得られればと思い読みました。


タイトル	8割捨てる！情報術
著者	理央周
出版	日本経済新聞出版社
画像リンク

感想

80：20 パレートの法則

「80：20」というパレートの法則に沿って説明されています。

取得した情報のうち8割は無駄、交換した名刺も8割は無駄です。
確かに、自分の持っている名刺なんかを見てもそうかもと思いました。2度と連絡もしないようなものが大半です。

学校で使った教科書なんかも8割は無駄なのかもしれません。基礎を身に着けておけば、以降に目に入る情報のうち8割が基礎的なことで、残り2割が新しい情報だそうです。
ここも80：20の法則です。

情報のPDCA

不要なものを切り捨てることのみでなく、情報のPDCAについても書かれてます。

情報収集
仕分け
知恵に変換
アウトプット
成果測定

これらを順番に繰り返して行くことで、情報が定着します。

しっかりアウトプットまでして、その結果の反響などを測定します。そのことによって習慣化であったり、効率的な情報術が身につきます。

アウトプットするために解釈して整理することで情報が定着する  
誰かに読まれることを意識してアウトプットを考えることが大切

目に入った情報について自分で考えることを意識します。

「何」よりも「なぜ？」を考えることが大切

見出しだけを見てわかった気になっていたり、集めるだけ集めて満足する状況に気をつけます。

わかりやすい情報には2種類あります。見た情報がどちらなのかしっかり振り返るべきです。

知らないことや難しいことを解きほぐしている
複雑なことを割愛している

成果測定はSNSの「いいね」などでもいいそうです。

習慣化

報酬や成果をしっかり把握して、自分がアウトプットするモチベーションにします。

人は「近くのものを過大評価し、遠くのものを過小評価」します。
目の前のことに手が一杯になるあまり、未来の自分に投資できなくなっていることはよくあることかと思います。

重要なことをやるためには、まずそのための時間をブロックすることが必要です。未来に向けた投資を行うために、まずまとまった時間を用意することから取り組みます。

捨てる勇気

ドラッカーが言うには、必要なものを決めるより、不要なものを決めるほうが難しいとされるそうです。
「劣後順位」を決める上で重要なのは、分析ではなく勇気です。

何でも大切だと抱え込んで一杯になってしまうときは、思い切って不要だと捨てる勇気が必要です。
8割という、物事の大半を捨てるというのがこの本のテーマで、勇気を持って捨てていきたいです。

おわりに

8割は不要と言う考え方です。ですので、大抵は必要な無いので捨てても問題ないという考え方です。ただし、残りの2割についてはしっかり仕分けして、知恵に変換していくことを進めています。

あまたある情報のうち重要な部分に着目して、しっかり自分のものにしていくことが大切な考え方です。

【おすすめ読書】「言葉にできる」は武器になる。

Wed, 07 Nov 2018 00:00:00 GMT

言葉と思考についての本です。ブログに書くに当たって、言葉選びは重要だと思います。

伝えようと思ってもうまく伝わらないことはよくあります。この問題を解決するための鍛えかたが書かれています。

正しく・わかりやすく伝えるための言葉の選び方、考え方を知ることができます。ブログに書く内容や、ここぞというときの言い回しを考えるときの参考にしたいと思います。


タイトル	言葉にできるは武器になる。
著者	梅田悟司
出版	日本経済新聞出版社
画像リンク

感想

伝わる言葉を生むためには「意見を育てるプロセスが重要」。
人から出てくる言葉は思考の上澄みなので、思考が深くなければ言葉も浅いものになってしまいます。

大きく、以下の2点が大切です。

1. 内なる言葉で意見を育てる
2. 外に向かう言葉に変換する

うまく言葉にできない

言葉にできない状態はすなわち、言葉にできるほど考えていない状態です。例えば、

抽象的に考えている
一貫性がない
同じところを巡っているなど、考えたつもりになっている状態です。

感じたことを「悲しい」や「嬉しい」といった漠然した括りでは止めない。
複雑な思いと向き合うことで考えたつもりから脱することができます。

そうでなければ、いつまでも「あるべき自分から発せられる建前」を発することになります。
これでは、どこかで借りてきたようなものになってしまい、迫力も説得力も出ません。

言葉に幅と奥行きをもたせることが理想です。

内なる言葉を磨く

思考の解像度を上げるイメージです。

頭の中は記憶域と思考域に分かれています。なんとなくもやもやしているときは、考えているのではなく思い出している状態に陥っています。

解像度を上げるには記憶ではなく思考を行う必要があります。

以下の7つのプロセスで行います。ざっくりいえば、書き出すことで記憶領域を空にして思考域を利用できるようにします。

思ったことを書き出す
T字型思考法で考える
本当に？で昔へ、それで？で未来へ、なぜ？で深くへ考えを進めます
仲間を分類する
方向と深さで分類します。
足りない箇所を埋める
時間を置く
2,3日程度が理想
真逆を考える
違う人の視点から考える

おわりに

人を動かすには思いをどれだけ込められるかが重要です。自分の内なる言葉を理解しきれない状態では人に伝わりません。ぱっと最初に出てきた言葉は感情の表面的な部分でしかなく、自分の中で深くまで考え抜くことで、本当に伝えたいことや、共感しやすい言葉が出てくるのだそうです。自分自身の言葉と向き合い、育てることによって伝わる言葉が生まれます。

上記の7つのプロセスをやろうと思うととても時間かかります。
人を動かすような言葉を考える際にはこれくらい必要なのでしょう。

細書はとても大変だと思いますが、少しずつでもやっていこうと思います。本を読んだり映画を見たりして思ったことや感じたことを言葉にしていけるように特訓してみます。

スマホアプリの作成に向けて

Wed, 07 Nov 2018 00:00:00 GMT

11月の目標としてスマホアプリを作ることを目標にしています。

今までにWEBサイトやWEBアプリは作ったことがあります。
しかし、スマホアプリは作ったことがないので勉強のつもりで作成したいと思います。

作る過程で学んだことや、引っかかたことなどこのブログに残していきます。
同じようにこれから作ってみようという人の参考になればと思います。

方針

何作るか

簡単なスマホアプリ
iOSとAndroid両方のつもり、難しければどちらか
Todoとか？簡単なゲームとか

できれば

広告とか乗っけたい
利用情報やログなどの収集
更新や改良しやすい設計と実装
再利用できる設計と実装

何使うか

このブログと同じくFirebaseを利用する
言語はReact Nativeを利用する方針

Unreal Engineなども気になるが一旦これで作り切る

開発環境等はなるべくお金がかからない方法を選択します。だれでもできるような方法で構築して、情報を記録していこうと考えています。

やること

参考書籍の購入
- スマホアプリ
- React Native
開発環境の準備
Firebaseのプロジェクトを用意

進捗

なにか進捗があれば追記します。完成に至るまでの進捗や手順など残していくつもりです。リリース後は運用しながら振り返りなどやっていきます。

【おすすめ読書】情報の編集と発信「コメントする力」

Mon, 05 Nov 2018 00:00:00 GMT

情報の編集と発信することについての書籍です。インプットした情報をアウトプットする際の技術が書かれています。

SNSなどで何かしらのコンテンツに対してコメントをすることはよくあります。そのときにどうすれば独自の目線で面白いコメントができるのかということを知ることができます。

この本を読んで、ブログでの本の紹介のパターンや方向性を考えたいと思い手に取りました。定期的に読み返したい本です。


タイトル	コメントする力
著者	竹田圭吾
出版	PHP研究所
画像リンク

感想

情報との接し方、整理する技術、発信するコツについて書かれています。これからの発信の際の参考になりそうです。文章術といったことは触れられておらず、情報の接し方、情報の整理についての内容が多い印象でした。

「情報から距離を置く」「他の人と同じことは言わない」、これらは私も意識していきたいです。

複眼思考

何度か本文中に出てきましたが、複眼思考を日頃から訓練していきたいです。

2軸で考えること。地理と時間であったり科学と芸術とか。
些細なことであってもいろんな面を持っていると思います。意識して複眼思考を身につけたいです

以下のような、著者がやらないように気をつけている表現方法が記載されていました。
逆を返せば、世の中でこのような表現を見たら思考を阻害またはコントロールされているかもしれません。これらを感じたら、一度落ち着いて別の面から考え直すようにします。

代案なき批判
極端な悲観論
未来すぎる提案
原則論

ストーリーで語る

事実を物語として再構築して発信します。付加価値をつけて提供することを目指します。
情報を扱う中で難しいことですが、日頃から五感を使うことや上記の複眼思考を磨くことで身につけていきたいです。

実際自分で体験してみたなどの五感を使った情報が、一番わかり易いと思ってます。
チェックポイントも書いてあったので、それを参考に考えていこうと思います。

言うことがなければコメントしない

これは大事かなと思いました。何でもアウトプットを増やすことは大事です。
しかし、何を言うかということは何を言わないかということでもあるので、このことは頭の片隅においておきたいです。

グレーな情報に対して白黒はっきりしてしまうのは気持ちいいですが、危ないかもしれません。
色々余白を残して、情報の多面性が残っていることがいいことなのかもしれないです。

内容ごとのまとめ

1章情報は疑え

情報の接し方

まず、情報との接し方として、以下の3点が重要です。

情報に対して自分が主人である状態を維持する
情報を選別し組み合わせて編集する、情報力
ストーリーを構成して個性的な表現で発信するコメント力

これらを実現するためにいくつかのコツがあります。私が重要だと感じたものを選択して記載します。

タテ軸-ヨコ軸で考える
「地理と時間」や「科学と芸術」など2軸で考える
全体像で見る
ズームアウト、ズームインして見る
情報は疑う
同調圧力や原則などによってごまかされやすいので注意する。

2章情報は集めるな

情報を整理しないで、大きな箱に入れるイメージです。他の情報との文脈を守るためにそうします。
あと、どこらへんにあったかといったことをざっくり把握できればいいとのことです。

本の読み方

1つのテーマに対して3冊本を読みます。
青と黄色の付箋を使って、重要は黄色、とても重要は青で付箋を貼っていくそうです。

情報源は定期的に見直したほうがいいです。

3章ストーリーで語れ

複眼思考が大切

これを日頃から鍛えておき、事実を物語として再構築して発信します。
必要な要素を並べて、その後肉付けによって魅力的になリます。何をポイントとして、何をカットするか。

情報の整理

読者の五感に訴えるような表現を目指すために、五感を使った取材やインプットが必要です。
Newsweekでは以下のようなチェックがあるそうです。

読んで面白いか
読みやすいか
文章の滑らかさ
記事全体のリズム
スピード感
展開するペース
全体と段落の構成
詩的・文学的なレトリック
ユーモア
ワクワク感

4章付加価値をつけろ

2つの奥義

言うことがないならコメントしない
ただでさえ情報が過多なので、発信する側も気をつける
刺さるコメントは目指さない
しみるコメントを目指します

複眼思考をここでも発揮する

まず「何を言わないか」を考えます

見ればわかること
一般論
他の人も言いそうなこと
怪しい話

4つの言わないようにしている論

代替なき批判
代替案や解決策なしでただただ批判のみはしないほうがいい議論は進まないので意味がありません。
極端な悲観論
もしもこうなったらということについてあまりに悲観的に考えすぎると、余計な不安を煽ってしまいます。
未来すぎる提案
解決できるかもしれないが、時間がかかり過ぎて現実的でない。これも話が進みません。
原則論
「人命が何より優先だ！」とか大きなことを言ってしうと他のことが考えられなくなるので避けます。
その場面や文脈に沿って議論・検討して解決すべきです。

自分なりの付加価値とは？

普段の生活のなかで以下の独自性を見つけ出せると良いです。

情報分析の独自性
体験の独自性
コンテクストの独自性
表現の独自性

発信する前のチェックリスト

以下の内容を他人の視点でチェックします。

誤りはないか
似た記事より工夫があるか
面白いか、発見はあるか
誰かを傷つけないか
特定の人や組織を必要以上に評価していないか
反論があるとすればどんなものか
自分の過去やこれからと整合性は取れているか

2018年10月の振り返り

Thu, 01 Nov 2018 00:00:00 GMT

このブログを立ち上げて1ヶ月が経過しました。
この一ヶ月をしっかり振り返って、記録していこうと思います。

成果

ブログの公開はできた

まずはこのブログの公開ができたこと。よかったです。使ったことない技術やサービスに挑戦できたので学びもたくさんありました。

ホスティング

Firebaseでサーバを用意して、独自ドメインを取得して公開できました。
ドメインの代金とそのオプションで1700円くらいでした。それ以外にはお金はかかってません。

CMS

初めて利用するGatsbyを使って静的なサイトとして、コンテンツ作成できました。
とても便利です。これからはマークダウン形式でメモ作成しておけば、そのまま記事にできます。

静的なHTMLで公開されるので、処理も軽いはずです。 SPAなのでちょうどいい勉強です。仕組み等継続して勉強していこうと思います。

React を使っているのも良い勉強になっています。案件で何度か使ったことがあったので作り始めも特に困ることはありませんでしたが、より理解が深まったと感じています。

Gatsbyに関連する書籍などはあまりないようなので、ちょっと不便しています。Reactに関連する書籍はいくつかあるので、購入して読み込む予定です。

広告は審査中

AmazonとGoogleを申し込みましたが、まだ審査通過していません。速いところ審査をクリアして、少しでも収益を得たいと思います。

とりあえずコンテンツの量が少ないので、記事をたくさん書こうと思います。その後、再度申請を行うつもりです。

コンテンツの作成がまだまだ

いくつかblog構築時に行ったことのメモを書きました。Gatsby関連の立ち上げの内容です。
これからは書評を中心にコンテンツをガンガン増やすつもりです。

アプリの作成、公開なども考えているので、それらの設計や構築についても残していきます。

来月の目標

可能かはわかりませんがとりあえず、来月の目標です。来月また同じような振り返りを行って反省する予定です。

収益を得る！

広告収益3万円を目指す
iOSかAndroidどちらかでアプリ公開
別カテゴリのブログ、またはWEBサイトの作成を開始

来月以降もしっかり振り返りを続けていこうと思います。

SEO関連の対応をいくつか実施

Wed, 31 Oct 2018 00:00:00 GMT

SEO対策のために以下の機能を実装しました。すべてGatsbyのプラグインで簡単に実装できました。

sitemap.xmlの設置
RSSの設置
robots.txtの設置

どれもオプションで詳細な設定ができる様子ですが、とりあえずデフォルトで実装しました。
後日詳細を確認して設定を見直そうと思います。

sitemap.xmlの設置

以下コマンドを実行して、プラグインをインストール

npm install --save gatsby-plugin-sitemap

gatsby-config.jsのpluginsに以下の記述を追加

'gatsby-plugin-sitemap',

結果/sitemap.xml にサイトマップが配置されました。
developで動かせるlocal環境では生成されていなかったので、buildした結果で確認しました。

サイトマップに出力したくないディレクトリやパスを設定できるようです。
必要そうなので後日やっておきます。

RSSの設置

以下コマンドを実行して、プラグインをインストール

npm install --save gatsby-plugin-feed

gatsby-config.jsのpluginsに以下の記述を追加

'gatsby-plugin-feed',

結果/rss.xml にフィードが配置されました。

こちらもdevelopで動作するlocal環境では生成されていなかったので、buildした結果で確認しました。

FeedlyなどでRSSを受け取れました！
サイト内にリンク設置しないといけませんね。後日対応します。

robots.txtの設置

以下コマンドを実行して、プラグインをインストール

npm install --save gatsby-plugin-robots-txt

gatsby-config.jsのpluginsに以下の記述を追加

'gatsby-plugin-robots-txt',

結果/robots.txt に配置されました。

これも同様で、developで動作するlocal環境では生成されていなかったので、buildした結果で確認しました。

オプションで内容を変更できるようです。noindexなどの設定ができると思います。
必要になったら対応します。

どれも、Gatsbyのプラグインを使って簡単に実装できました。とても便利です。

一通りの設定ができたら環境を記録しておいて、他のブログを立ち上げる時に再利用できるようにしようと思います。

読書感想アウトプットを始めます

Tue, 30 Oct 2018 00:00:00 GMT

毎週1冊以上本を読んで、まとめや感想などを書いていこうと思います。
ブログのコンテンツを増やすためと自分の勉強が目的です。

読書感想アウトプット

読んだことの備忘や学習のためにも、わかりやすくまとめてアウトプットしていこうと考えました。

できれば本を買ってみたくなる、または追加の情報や気づきを与えられるようなコンテンツが作れたらと思います。

目標として最低でも毎週1冊以上とします。
といっても、1冊以上書けると思いますので、上限は設けずガンガン書いていこうと思います。
最低1冊のペースは守りたいと思います。

内容について

基本的には以下の要素になると思います。

感想
気づき
経験からの意見
内容の要約
どんなことがわかるか
どんな人におすすめか
インフォグラフィックス
グラフィックレコーディング
実際にやってみた結果
その後

何か独自の切り口があったらいいなと思いますが、追々考えます。
とりあえずよくあるような内容ですが、始めていきます。

WEBエンジニアとして5年半働いていましたので、実際に本の内容を試してみることもできます。
内容をやってみて、継続してみて、どうなったかといったについても書きたいです。

買ったけどよくわからなかったという方や、買おうか迷っている方の参考になればいいです。

ジャンルについて

特別こだわったジャンルにはしませんが、個人的な興味で技術書が多くなります。

技術書以外の本ももちろん興味あるので、読み次第どんどん紹介していきます。
ビジネス関連の本であったり、デザイン関連も出てくると思います。

コンテンツ追加したあとは、OGP画像等の設定をしてからツイッターでも広報しようと考えています。
RSSも設定して置きたいと思います。後日対応予定です。

アフィリエイトの審査

Fri, 26 Oct 2018 00:00:00 GMT

以前「アフィリエイトの導入」という内容を投稿しました。その続きです。

アフィリエイトプログラムに申請を行ってみました。
結論、審査通らなかったので対応を行おうと思います。

基本的には以下の広告を利用する方針

Amazon アソシエイト・プログラム
https://affiliate.amazon.co.jp
google アドセンス
https://www.google.co.jp/adsense/start/#/?modal_active=none

上記に審査を依頼しています。

不合格通知が届きました

Amazonの方は翌日に不合格の通知が来ました。
ざっくりとは「コンテンツが少ないため判断不能」とのことです。

Googleの方はまだ審査中とのことです。

対応について

アフィリエイトの導入は行いたいので、対応を検討します。
まずは言われたとおりコンテンツの拡充を行います。

本格的にコンテンツを書いていくことになりそうです。目標として３０記事くらい作って再申請の依頼を行う予定です。
1記事内の文字数も1000文字くらいが目安らしいので、そのへん考えながら書いていこうと思います。

その後は他のサイトなどの情報をもとに以下のことを対応する予定です。また対応を行う際に記事としてまとめようと思います。

カテゴリごとの記事一覧
問い合わせフォーム
RSSフィード作成
サイトマップ作成
プライバシーポリシーの追記

SNSのシェアボタン・リンクを設置

Thu, 25 Oct 2018 00:00:00 GMT

各SNSへのシェアボタンやSNSアカウントへのリンクを設置します。

できればGatsbyのプラグインを有効に利用して、実装できないか調査します。

SNSシェアボタンを設置

react-shareのプラグインを利用しました。
https://github.com/nygardk/react-share

上記をnpmでインストールします。

npm install react-share --save

シェアボタンを実装する箇所で以下のコードを追加します。

import {
	  FacebookShareButton,
	  GooglePlusShareButton,
	  LinkedinShareButton,
	  TwitterShareButton,
	  FacebookIcon,
	  TwitterIcon,
	  GooglePlusIcon,
	  LinkedinIcon,
} from 'react-share';

<FacebookShareButton url={postUrl}>
    <FacebookIcon size={32} round />
</FacebookShareButton>
<GooglePlusShareButton url={postUrl}>
    <GooglePlusIcon size={32} round />
</GooglePlusShareButton>
<LinkedinShareButton url={postUrl}>
    <LinkedinIcon title={post.frontmatter.title} size={32} round />
</LinkedinShareButton>
<TwitterShareButton title={post.frontmatter.title} via="koshihonmushi" url={postUrl}>
    <TwitterIcon size={32} round />
</TwitterShareButton>

上記指定でシェアボタンが表示されます。

urlには記事のURLを指定します。
titleには記事のタイトルを指定します。

SNSへのリンクを設置

アナリティクスの導入

Fri, 19 Oct 2018 00:00:00 GMT

googleアナリティクスを導入します。

SEOとかアフィリエイトを導入するに当たって、流入であったり効果を測定する目的で導入します。
いろいろなデータを見ながら効果的に施策・運用を行えるようになりたいです。

結論

Gatsbyを使っている場合、プラグインgatsby-plugin-google-analyticsを利用することで簡単に実装できました。

アナリティクスでトラッキングID取得
プラグインを導入
gatsby-config.jsを編集

ただしシングルページアップリケーションの場合は特別な対処が必要そう。 https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications?hl=ja

非同期でURLが変わるタイミングで効果を取得するようにjsで対応する必要がありそうです。
後日対応します。

参考

https://analytics.google.com/analytics/web/provision/?authuser=0#/provision

すること

Google アナリティクスに申し込む
上記のサイトから進んで申し込み完了ドメインなど必要な情報を登録します。
トラッキングIDが発行されます。
トラッキングコードを追加する
通常はグローバルサイトタグという項目内のスクリプトをコピーしてサイトの<head>タグに貼り付けることで利用できるようです。
Gatsbyの場合は専用のプラグインがある様子なので、それを利用します。

gatsby-plugin-google-analytics

gatsby-config.jsに設定を追記します。

{
    resolve: 'gatsby-plugin-google-analytics',
    options: {
        trackingId: 'ここにはトラッキングIDを挿入する',
    },
},

オーディエンスの詳細を確認する
localの環境ではアナリティクスのタグは出力されない様子。
gatsby buildした結果のソースに出力されるので、そちらで確認する。
SPA用の対応を導入する
以下のページに記載されているような内容が必要そうです。
調査した上で対応してみます。

https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications?hl=ja

SPAの対応ができていなさそう？

シングルページアップリケーションの場合は特別な対処が必要そう。 https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications?hl=ja

非同期でURLが変わるタイミングで効果を取得するようにjsで対応する必要がありそうです。
後日対応します。

SEOタグの設計

Wed, 17 Oct 2018 00:00:00 GMT

アフィリエイトの導入にむけて、SEO関連の対応を進めます。
いくつかやるべきことがるので列挙しつつ設計を進めていきます。

SEO検索ワードの設計
各種メタタグの設計
サイトマップ
カテゴリ・タグ一覧ページの作成
PWA対応
記事の作成時の見出し等のルール・フォーマット
noindexの解除
analiticsの導入・設定

それなりにGatsbyが対応してくれる様子だが、それぞれ詳細な実装を確認しておきたい。

他にも対応必要なことがありそうだが一旦これらを対応をした後に、「noindexの解除」を行い、googleにインデックスしてもらいます。

各種メタタグの設計

title

サイト名 | ページ名

keywords

いくつかのキーワードをカンマ区切りで、
記事ページではtagとカテゴリの内容を出力する

description

サイト内で固定の内容か？
記事ページでは記事の要約を記載する？

icon

それっぽい画像を作る。

ogp タグ

以下のようなものがあります。それぞれ内容を設計して出力するように実装します。

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="">
<meta name="twitter:site" content="">
<meta name="twitter:title" content="">
<meta name="twitter:image" content="">
<link rel="canonical" href="" />
<link rel='dns-prefetch' href='' />
<link rel='https://api.w.org/' href='' />
<link rel="alternate" type="application/json+oembed" href="" />
<link rel="alternate" type="text/xml+oembed" href="" />
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:type" content="" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
<meta property="og:site_name" content="" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="">
<link rel="icon" href="" sizes="32x32" />

こちら実相しました。React-helmetというプラグインを使って簡単に実装できました。

基本的にOGPタグの対応は完了しています。SEO関連の対策はコンテンツ的な話で他にもいろいろできますので、順次そちらに取り組んでいく予定です。

OGP画像は固定になっています。できれば記事ごとに異なる画像を設定したいですが、ちょっと様子見です。

アフィリエイトの導入

Mon, 15 Oct 2018 00:00:00 GMT

ブログ動かすにあたって、ドメインの料金などの出費もあります。
できれば黒字にしたいのでアフィリエイト等の広告を掲載して収益を得ようと思います。

基本的には以下の広告を利用する方針

Amazon アソシエイト・プログラム
https://affiliate.amazon.co.jp
google アドセンス
https://www.google.co.jp/adsense/start/#/?modal_active=none

メジャーな奴を利用したいです。他に便利な奴などあれば採用してレビューしていきたいですが、一旦これらを利用する方針です。

導入に向けては審査などあると思いますので、そのあたりの対応など後日記載していきます。

画像の埋め込み

Fri, 12 Oct 2018 00:00:00 GMT

コンテンツ内に画像を表示したいです。
Gatsbyかつマークダウンでどうやってやるのか実装してみます。

以下の方法で試してみるがうまく行かず。

画像を静的コンテンツ設置ディレクトリに設置

マークダウンと同じディレクトリsrc/pages/に画像を設置しました。

マークダウン内に上記URLを指定してimgタグを記載

![My Image](./image.jpg)

マークダウンと同じディレクトリに静的コンテンツとして出力されるのではないか。
やってみた結果、表示できず。

imgタグの参照先は以下になっており、想定と異なっていました。

/2018/10/12/image/image.jpg

この記事のURLは以下

/2018/10/12/image/

以下にアクセスしても画像は表示されなかった。

/2018/10/12/image.jpg  

Cannot GET /2018/10/12/image.jpg

プラグイン入れたらできるのか？

gatsby-remark-images

このプラグインが画像をいい感じにしてくれるらしいです。次回やってみます。

画像挿入用プラグインの導入

Fri, 12 Oct 2018 00:00:00 GMT

前回の【画像の埋め込み】の記事の続きです。

記事内への画像挿入がうまくできなかったので、画像用のプラグインを導入してみます。

gatsby-remark-imagesを使ってみる

npmで必要なプラグインをインストール

https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-remark-images を参考にやってみる

npm --save install gatsby-remark-images gatsby-plugin-sharp

gatsby-config.jsに以下内容を追加

  `gatsby-plugin-sharp`,
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-images`,
          options: {
            // It's important to specify the maxWidth (in pixels) of
            // the content container as this plugin uses this as the
            // base for generating different widths of each image.
            maxWidth: 590,
          },
        },
      ],
    },
  },

表示できるようになった様子。

mdファイルと同じ場所に画像を配置すれば、前回の【画像の埋め込み】の記事のやり方で問題なく表示できるようになった。

画像を静的コンテンツ設置ディレクトリに設置

マークダウンと同じディレクトリに画像を設置しました。

マークダウン内に上記URLを指定してimgタグを記載

![My Image](./image.jpg)

画像のパスは以下のようになっており、/static/以下に配置されたうえで、パスを生成して置き換えてくれている様子。

/static/image-63f8d35deb28cd32cef133e59100e5e5-f8fb9.jpg

ドメインの取得・Firebaseへの設定

Wed, 10 Oct 2018 00:00:00 GMT

ブログ開設ということで、ドメインの取得を行いました。
広告を設置したり、グーグルアナリティクスで分析などやりたいので必要でしょう。

ドメインをお名前ドットコムにて取得

取得したい文字列で検索して、すでに存在していないかチェック。
今回は「honmushi」。問題なければ契約します。

契約時にいくつかオプションがありました。ドメインごとにいろいろ設定できます。
後日まとめます。

Firebaseでドメイン接続

ドメインの所有権の確認

Firebaseの管理画面で、契約したドメインを設定します。

ドメインを所持していることを確認するために、合言葉をドメインサービスで設定します。
Firebaseから問い合わせさせて合言葉を確認することで、ドメインを所有していることが認められます。

[Firebase]

Hostingのメニューから、「ドメインを接続」ボタンを選択
ドメインの入力を求められるので、先ほど契約したドメイン文字列を入力

「〇〇を既存のウェブサイトにリダイレクトする」の設定は、www.付きのURLの解決や、複数ドメインが存在するときの解決として利用するようです。
TXTレコードが表示されるので、値の部分をコピーする

これが合言葉になります。「google-・・・・」の部分から全部必要です。まるごとコピーしましょう。
コピーしたら「確認」ボタンを押します。

この時点ではまだドメインサービス側に設定がされていないので何も起きません。

また「ドメインを接続」を押してドメインを入力しなおせば、合言葉は何度でも確認できます。

[ドメインサービス]

ドメイン管理画面（お名前ドットコム）で上記のTXTレコードを登録

DNS関連機能設定から「DNSレコード設定」へ
```
TYPE:TXT
VALUE:「コピーした文字列」
状態:有効
```
で設定して「追加」ボタン

これで合言葉が設定されました。反映されるまではしばらく時間がかかります。

ドメイン接続の実行

[Firebase]

Hostingのメニューから、「ドメインを接続」ボタンを選択
ドメインの入力を求められるので、先ほど契約したドメイン文字列を入力
「確認」ボタンを押します。

十分に時間が立っていれば、Firebaseがドメインに問い合わせを行い、合言葉で認証されます。
ドメインの所有権が認められれば次に進めます。

認証されない場合は、もうしばらく待ってから繰り返し操作します。
Aレコードに設定するIPアドレスが表示されます。

このIPアドレスをドメインとひも付けます。メモしましょう。

[ドメインサービス]

ドメイン管理画面（お名前ドットコム）で上記のAレコードを登録

DNS関連機能設定から「DNSレコード設定」へ
```
TYPE:A
VALUE:IPアドレス
状態:有効
```
で設定して「追加」ボタン

これでドメインの参照先が登録されました。この設定の反映にもしばらく時間がかかります。

十分に時間が経ってからドメインにアクセスすると、Firebaseにホスティングしているサイトが表示されるようになります。

SSH証明書

ドメインが接続できたのでSSH証明書も設定したい。 Firebase側が用意してくれる様子なので、一旦それで済ませることにします。

https://firebase.google.com/docs/hosting/custom-domain

認証レベルがわからないので後日調べて記載します。ドメインでしょうかね。

待っていればそのうち反映される様子なので待ちます。
→ 待ちました。半日くらい待ったら反映されました。

This page is secure (valid HTTPS).

Firebaseの管理画面では以下の表示になったら反映済みの様子です。

タグとカテゴリーの実装

Wed, 10 Oct 2018 00:00:00 GMT

将来ページが増えていくことを想定して、以下を実装しようと思います。

タグとカテゴリーをコンテンツに設定
それぞれの情報からアクセスするための一覧ページを作成
各記事内にカテゴリーやタグのリンクを設置

タグとカテゴリーをコンテンツに設定

これは.mdファイルのfrontmatterにそれぞれ追加します。以降記事を書くときに設定することにします。

以下のような感じです。

---
title : 'タグとカテゴリーの実装'
date : '2018-10-10'
tags : '実装,Gatsby,ブログ構築'
category : 'blog'
---

コンテンツが増加した時に管理が面倒になりそうなので、再設定・管理できる仕組みを考えたいです。
タグの追加や削除、カテゴリーの再整理など

一覧ページの実装

カテゴリーやタグの一覧ページを作ります。
何らかの方法で渡したカテゴリーの文字列を使って記事を絞り込んで取得して、一覧で表示します。
投稿日の降順にします。

カテゴリーやタグのリンク

コンテンツテンプレートにGraphQLでfrontmatterからtagsとcategoryを取得できるように追加
上記の内容を出力するようにHTMLに追加

タグの部分は一覧ページへのリンクにする

プライバシーポリシー

Fri, 05 Oct 2018 00:00:00 GMT

個人情報の保護について

「https://honmushi.com」（以下、当サイト）を利用される方は、以下に記載する諸条件に同意したものとみなします。

個人情報の収集について

利用者は匿名のままで、当サイトを自由に閲覧する事ができます。
お問合せ等、場合によっては、利用者の氏名やメールアドレスなどの個人情報の開示をお願いする事があります。
しかし、利用者の個人情報を利用者の許可なく、当サイトから第三者へ開示・共有する事はありません。

広告の配信について

Google アドセンス

当サイトはGoogle及びGoogleのパートナーウェブサイト（第三者配信事業者）の提供する広告を設置しております。その広告配信にはCookieを使用し、当サイトを含めた過去のアクセス情報に基づいて広告を配信します。

DoubleClick Cookie を使用することにより、GoogleやGoogleのパートナーは当サイトや他のサイトへのアクセス情報に基づいて、適切な広告を当サイト上でお客様に表示できます。

Googleアカウントの広告設定ページで、パーソナライズ広告の掲載に使用される DoubleClick Cookie を無効にできます。また aboutads.info にアクセスして、パーソナライズ広告の掲載に使用される第三者配信事業者のCookieを無効にできます。

その他、Googleの広告におけるCookieの取り扱いについての詳細については、Googleのポリシーと規約ページをご覧ください。

Amazon アソシエイト

「Honmushi blog」は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。

ウェブサーバの記録

当サイトのウェブサーバは、利用者のコンピュータのIPアドレスを自動的に収集・記録しますが、これらは利用者個人を特定するものではありません。
利用者が自ら個人情報を開示しない限り、利用者は匿名のままで、当サイトを自由に閲覧する事ができます。

免責事項

利用者は、当サイトを閲覧し、その内容を参照した事によって何かしらの損害を被った場合でも、当サイト管理者は責任を負いません。
また、当サイトからリンクされた、当サイト以外のウェブサイトの内容やサービスに関して、当サイトの個人情報の保護についての諸条件は適用されません。
当サイト以外のウェブサイトの内容及び、個人情報の保護に関しても、当サイト管理者は責任を負いません。

ブログのカラーテーマを考える

Fri, 05 Oct 2018 00:00:00 GMT

デザインするにあたって大まかな色使いを決めます。結論暫定的に以下にします。

sky 75b1a9
sunglow d9b44a
mountains 4f6457
mist acd0c0

後々変更すると思いますが、一旦これで開始します。あまりに色がないと寂しいので。

前衛的なものでなく、見やすさを重視したいです。それっぽくスタイルを更新していきます。

大きなイメージはスタイリッシュ＆レトロ

sky
75b1a9

空の色のイメージのようです。

sunglow
d9b44a

日没間近の夕焼け？でしょうか。

mountains 
4f6457

遠くの山です。

mist
acd0c0

霧です。

色のイメージは結構適当です。日々運用していく中でいいデザインを見つけたら真似して変更するかもしれません。あまりころころ変えないようにしますが、久しぶりに訪れたらデザイン変わっていたということもあるかもしれませんのでご了承ください。

Gatsby のスタイルの定義

いい感じにコンポーネント化されている？様子なので、勘所掴みつつ修正していきます。現在、大まかなスタイルは「layout.css」に定義されており、各レイアウトパーツのスタイルはインラインで記載されている様子です。

意図的にそうなっているのだと思いますがどうなのでしょうか。いろいろ調査してみます。

スタイルの定義

いったんtypography.jsに追加しました。 typographyで選択しているテーマ内のスタイルを上書きできる書き方があったのでそれを試しています。それっぽくはなっていますがどうなのでしょうか。

あまりあちこちに書くのは運用するに当たって良くないので一元化したいのですが、なかなか難しいです。

プロフィール

Thu, 04 Oct 2018 00:00:00 GMT

自己紹介

石川県在住のフリーランスエンジニアです。
「自分の仕事をつくる」という目標を掲げ、IT関連の仕事・勉強・活動に取り組んでいます。
石川県の野々市市という小さな市に住んでます。

ざっくり得意なことをあげると、以下になります。

ビジネス成功に向けたデータ解析・改善の検討
Webシステムの設計・開発・運用
スマホアプリのUI/UX設計・開発
RDBを始めとするデータベースの設計・開発
読書と面白かった書籍の紹介

略歴

2013年〜2018年
Web系コンサルティング会社にてシステムエンジニア
2018年〜
フリーランスで活動

コンサルティング会社にて

新卒入社した京都の企業で2013年から2018年まで、大規模Webシステムのコンサルティングを始め、運用・構築など幅広く携わっていました。

規模の大きいサイトでサーバ運用や改善の実装などの対応を行うともに、顧客の抱える問題を解決するためのコンサルティングも担当しました。

大規模DBの設計・開発・運用。各種サーバの運用・メンテナンス。Webフレームワークを使った効率的な開発、大規模システムの運用などの知識と技術を身に着けました。

所属していたチームはデザイナーやテスター・ディレクターといった、さまざまな職種のメンバーで構成されていました。協調性を持ち、仲間とのコミュニケーションを積極的に進めるとともに、互いに力を発揮できる環境づくりに取り組むことを心がけることができます。クライアントへ改善の提案や、設計・仕様のすり合わせなども担当し成果を上げていました。

フリーランスエンジニアとして

現在、出身地である石川県にてフリーランスエンジニアとして活動しています。 Webシステムの設計・構築、ホームページ・CMSの導入支援、スマホアプリの開発・UI設計やプログラミングメンターなどをやっています。

前職にて身につけた、Webシステムの設計・開発の経験を活かして、現在はスマホアプリのUI設計・実装などに力を入れて取り組んでいます。個人開発・受託開発をいくつか経験し、UI/UX設計・デザイン・ReactNativeによる実装の部分と総合的な知識と技術を持っています。

ReactNative を利用したクロスプラットフォームアプリの開発・運用が得意です。

他にもGoProを使ったカメラ操作アプリなどの設計・開発も経験しました。IoTなども得意です。

経験

WEBシステムのコンサルティング・提案

クライアントが運用するサービスについて、運用代行や改善コンサルティングを担当しました。エンジニアとしての担当だったためシステム面からの懸念や提案を考え、問題の改善に取り組みました。
エンジニアリングの知識と技術を活かして、潜在的な問題の発見とその解決を考えることができます。

コンサルタントとしての考え方や仕事感も身についたため、ビジネスの成功・あるべき理想の姿をクライアントとともに考え、本当に価値のあるシステムや機能を定義して届けることができます。

WEBシステム設計・開発・運用

Webサーバ複数台・DBサーバ複数台を使用して、負荷分散を使ってリソースを有効に活用した、巨大なWebシステムの開発・運用を担当しました。

日々の運用業務に加え、効果改善や提案・リニューアルの設計も担当していました。時期によってはアクセスが集中することもあり、大規模サイトならではの経験や知識を多く身につけました。

大規模RDBの設計・開発・運用

RDBを使った大規模なデータ構造の設計・開発・運用経験が有ります。
IPAのデータベーススペシャリストの資格も所有しており、まとまった知識・経験を用いたDBの設計・運用・開発・SQLの改善も得意です。

もちろん最近利用が進んでいるNoSQLなども興味を持って学習しており、それらについても案件の経験があります。

業務用CMSの設計・デザイン・構築

地域の観光サイトのCMS構築を経験しました。多言語に対応したサイトの設計を行い、Wordpressを用いて構築を行いました。
他にもこのサイトを始めとした、いくつかのGatsbyを使った静的ブログ構築にも積極的に取り組んでいます。

Wordpress以外のCMSを使ったJAMStackなブログやサイトの設計構築も得意です。

個人ブログ用のWordpress導入

個人用ブログのWordpress導入の手伝い、テーマ作成を行いました。
システムやITに詳しくない方にもわかるように、丁寧な説明・サポートを心がけます。

企業コーポレートサイトのデザイン・フロントエンド開発

企業のコーポレートサイトのデザイン・フロントエンド開発を担当しました。
jestを利用したtest導入など開発をサポートする環境づくりについても知識と経験があります。

ReactNativeを使ったクロスプラットフォームアプリ開発

ReactNatvieを使ったスマホアプリ開発をチームで行いました。
クロスプラットフォームならではの悩みやノウハウを蓄えており、チームメンバーと共有しつつ開発を効率的に進めることができます。

複数人でのスクラム開発

エンジニアとして複数人でのスクラム開発も経験しました。
スクラム開発の考え方や意識を持つことができるとともに、考え方の頒布や伝達もできます。
スクラム導入やスクラムマスター的な動き方も可能です。

スマホアプリのUI/UXデザイン・開発

個人開発でもアプリを作成しており、日々アプリのUI/UXデザインの研究を行っています。
デザインの設計とアプリ開発を行えることに加えて、実践的な経験・数値に基づいた上でビジネス・開発者両方の目線でUI/UXのあり方を考えることができます。

スタートアップ企業でのアーキテクチャ設計

スタートアップ企業でのアプリのアーキテクチャの設計・相談・アドバイスなどを経験しました。
スマホアプリのソースコード、Native層の実装なども考慮した設計を行いました。
Webアプリケーションについても設計・レビューなど行います。

プログラミングメンター

MENTAにてプログラミングメンターをしています。Reactに関する相談が多いですが、RDBやWeb関連の知識も得意ですので幅広く解答できます。

DMM WebCampにてメンターをしています。初学者に向けてもわかりやすくモチベーションも維持できるように、質問や相談などに対応しています。

コンサルティング企業での業務経験があるので、問題解決やエンジニアの論理的思考の成長を心がけて教えることを意識しています。

技術

HTML,CSS,
JavaScript,TypeScript,React,Next
PHP,Ruby,ColdFusion
SQLServer,MySQL
WindowsServer,Linux
ReactNative,Expo,Electron
Firebase
VBA
Git,SVN,VSS
Vim
PhotoShop

資格

基本情報
応用情報
データベーススペシャリスト
セキュリティスペシャリスト（現在は別の資格に変わっています）

お問い合わせ・ご依頼

システム設計・構築を始め、アプリのUI/UX設計や開発、webサイトのデザイン・構築も行っています。
店舗や個人の情報サイトやLPなどの制作も可能です。
プログラミング講師やメンターなどの依頼も是非。

依頼等あればtwitterなどでお問い合わせください。

Twitterアカウント
@koshihonmushi

MENTA
https://menta.work/plan/1500

趣味

プログラミング・読書・ゲーム・旅行が趣味です。

もともと、WEB系のエンジニアをしていたこともあり、プログラミングに関心があります。 WEB関連の新しい技術やデザイン、UIなどについても興味を持っています。どんどん新しい技術がでてくるので、それをキャッチするのがとても楽しいです。数十年後の未来はどうなっているのか、妄想が膨らみます。

読書については、頻繁に大型書店によって衝動買いしてます。気に入った本についてはこの「Honmushi blog」にて紹介していきます。特にジャンルにこだわりはありません。何でも読みます。技術書を多くしていくつもりですが、時間かかるので後回しになってます。月に20冊、半年で120冊くらい読みました。どんどんブログに感想を書きのこします。

ゲームも好きなので面白いゲームなどがあれば紹介したいです。別のブログも立ち上げていますのでそちらで紹介します。
別mushi blog

このブログについて

読書好きなエンジニアによる、WEB関連のテクニカルな情報やデザインのこと、お気に入りの本の書評や試してみたことなどを紹介するブログです。

このブログはいろいろな技術の実験にも使おうと思っています。
新しく世の中に出てくる技術をどんどん取り入れていきたいと思っています。

Gatsbyを用いてHTMLを生成しており、Netlifyでホスティングしています。コンテンツの実態はマークダウンで作っていき、仕組みの部分はどんどん改造していきます。

自分の気に行ったものや好きなものについて、実際に利用・体験しておすすめすることは良いことだと思っています。訪れてくれる皆様に少しでも有意義な情報や視点を提供できればと考えてます。

よろしくお願いします。

ブログ始めます！

Thu, 04 Oct 2018 00:00:00 GMT

本日、2018年10月4日開始です。自分の勉強も兼ねています。有益な情報を訪れた方に提供できればと思います。

エンジニアによる技術的なこと
書評
デザイン関連のこと

などをアウトプットしていこうと思います。

私個人の思考として、「難しいことをわかりやすく、わかりやすいことを面白く」ということが大切だと考えています。このブログでもこの言葉をテーマに様々な情報を提供できたら良いと考えています。

まだまだ作成中

枠組みからコンテンツまで、常に改良を続けていきたいと思います。

とはいえ、目標なしにとりあえず進むのは悪手だと思っています。目下のゴールとしては以下にしました。

PV増やして広告で収入を得る
それなりに見やすいUIにすること
コンテンツを十分に増やしアクセス数を伸ばす

具体的な数値など決める必要がありますが、それは追々共有します。

このブログはGatsbyで作りました

Gatsbyを使って静的なブログを生成しています。 Reactに関する知識なども必要になるのでちょうど勉強になると思い取り入れています。

まだ日本語の情報は少ない様子なので手探り感があります。いくつも躓くポイントあると思いますが、なんとか解決して情報を載せていくつもりです。

エンジニアです

もともとWEB系のエンジニアでしたので、WEB関連の知識が多めになるつもりです。それ以外でも気になる本とかあればジャンル問わず紹介していきます。

目下の興味としてはスマホアプリの設計・構築に興味を持っています。このブログがある程度軌道に乗ったら、アプリの勉強を初めていくつもりです。

これからよろしくお願いします！

Honmushi blog

MagicaVoxel を起動したところ真っ暗で動作しない件の対応

結論

インストールの手順

ダウンロード

圧縮されているので解凍

「このソフトウェアは開けません。」というメッセージが出て開けない

真っ暗なままで動かない現象が発生

対応

結論

Android エミュレーターがインターネット接続できない時の対応

結論

現象

対応

1. エミュレータの設定

2. OS のネットワーク設定

おわりに

ssh の秘密鍵を複数サイトに向けて設定する

結論

ssh 秘密鍵と公開鍵の作成

公開鍵をサービスに登録する

秘密鍵のパーミッションを変更しておく

ssh の設定ファイルにドメインごとの設定を記述する

おわりに

掲載実績

掲載実績

React Native で jest を使う際の async-storage や safe-area-context のパッケージのモック

概要

エラーになる例

@react-native-async-storage/async-storage のエラーを回避する

react-native-safe-area-context のエラーを回避する

おわりに

React Native と jest を使う際の react-navigation のテスト実装

概要

参考リンク

エラーになる場所

ナビゲーションクリエイターで挟む

screen の遷移をテストする

useRoute で遷移時に受け取るパラメータをモックする

test-utils などに追加するか

おわりに

Expo で絶対パスを使って import できるようにする

概要

babel のプラグインをインストール

babel.config.js にパスの定義

tsconfig.json にパスの定義

応用: パスのエイリアスを複数登録

babel.config.js

tsconfig.json

おわりに

Commitizen を使って git commit のメッセージをいい感じにする

概要

ドキュメント

グローバルにインストールする

commitizen をインストールする

commitizen adapter もインストールする

設定ファイルを用意する

commitizen を使ってメッセージを作成する

プロジェクトにインストールする

commitizen をインストールする

init を行う

npm script を追加して commitizen を使う

使い方

おわりに

React Native でアプリ起動の際に`Error: No native splash screen registered for given view controller.`のアラートが出る現象の解決

結論を先に言うと

概要

使用しているライブラリ

エラーの内容を読む

SplashScreen.hideAsync() を取り除いてみる

他の何かが hideAsync しようとしている？

SplashScreen のサンプルソースを見ると怪しいものを発見

おわりに

i18n-js と expo-localization を利用して、多言語対応を行う

概要

ドキュメント

インストール

実装

テキストの用意

おわりに

`@react-native-async-storage/async-storage` のエラーを回避する

`react-native-safe-area-context` のエラーを回避する

`SplashScreen.hideAsync()` を取り除いてみる

他の何かが `hideAsync` しようとしている？

`SplashScreen` のサンプルソースを見ると怪しいものを発見

アイコン探せる `@expo/vector-icons preview`

影のスタイルを試せる `React Native Shadow Simulato`

FlexBox のスタイルを試せる `React Native FlexBox Style Creator`