2018-11-18

Material-UIでヘッダーを作る【React】

Material-UIを使って、ReactのHeaderコンポーネントを作成する。

準備

以下のコマンドでMaterial-UIをインストールする。

npm install --save @material-ui/core
npm install --save @material-ui/icons

コード

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import Drawer from '@material-ui/core/Drawer';
import { Link } from 'gatsby';

const styles = {
  list: {
    width: 250,
  },
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20,
  },
};

class Header extends Component {
  state = {
    left: false,
  };

  toggleDrawer = (side, open) => () => {
    this.setState({
      [side]: open,
    });
  };

  render () {
    const { classes } = this.props;

    const sideList = (
      <div className={classes.list}>
        <List>
          <Link to="/">
            <ListItem button>
              <ListItemText primary="Home" />
            </ListItem>
          </Link>
          <Link to="/about">
            <ListItem button>
              <ListItemText primary="About" />
            </ListItem>
          </Link>
        </List>
      </div>
    );

    return (
      <div className={classes.root}>
        <AppBar position="relative" color="inherit">
          <Toolbar>
            <IconButton className={classes.menuButton} color="inherit" aria-label="Menu" onClick={this.toggleDrawer('left', true)}>
              <MenuIcon />
            </IconButton>
            <Drawer open={this.state.left} onClose={this.toggleDrawer('left', false)}>
              <div
                tabIndex={0}
                role="button"
                onClick={this.toggleDrawer('left', false)}
                onKeyDown={this.toggleDrawer('left', false)}
              >
                {sideList}
              </div>
            </Drawer>
            <strong>
              <Link to="/" style={{ boxShadow: 'none', textDecoration: 'none', color: 'inherit', fontFamily: 'Montserrat, sans-serif', }}>Post Bank Extra</Link>
            </strong>
          </Toolbar>
        </AppBar>
      </div>
    );
  }
}

Header.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(Header);

ほぼMaterial-UIのデモコードのコピペ。
stylesは、それぞれのコンポーネントに指定するCSSスタイルを記述している。
sideListで、メニューを開いたときのリンクのリストを作成する。今回はgatsbyのLinkコンポーネントを使用しているが、react-router-domとかのLinkでもOK。
メニューを開くかどうかは、stateで管理している。
withStylesは、Material UIのCSS in JSのAPIで、CSSを記述したstylesを引数にとって、classesプロパティを持ったコンポーネントを返す。className={classes.root}などと指定すると、stylesで指定したCSSスタイルを適用することが出来る。

見た目

メニューアイコンをクリックすると、左からメニューが出てくる。

f:id:john_kaz:20181118145403g:plain

まとめ

ReactのCSS適用って色々方法あってどれが最適なのかよくわからない。
上の例みたいにwithStyles使ったり、styleで直接適用するのを混ぜるのは多分間違ってる。

Post Bank Extra

2018-11-17

Gatsby.jsで爆速で爆速のブログを作った

Gatsby

Gatsbyは、React用の静的サイトジェネレーターです。
Gatsby + Github pagesでブログを作ってみました。まだまだGatsbyについては理解が整理できてないので、解説は後ほど。
とりあえず、Post Bank Extraもよろしくお願いします。
まだコンテンツが全然ないからか、Gatsbyの実力か、阿部寛のホームページ並みに爆速です。

Post Bank Extra f:id:john_kaz:20181117190129p:plain
追記 2018.12.7
すみません。こちらのブログ一旦メンテナンス中です。

阿部寛のホームページ
f:id:john_kaz:20181117223743p:plain:w300

2018-11-17

Githubのアカウント切り替えに苦労した話

技術

はじめに

仕事用にGithubのアカウントは持っていたが、プライベート用にもう一個アカウントを作って自由に切り替えられるようにしたかった。今までのアカウントは全部HTTPSでcloneとかpushしてたので、最初プライベートアカウントもHTTPSでやろうとしたけど、Permission Errorが出て解決できなかったので、プライベートはSSHでやることにした。
Permission Errorの原因は、ここに書いてあることっぽい。要は、Githubのcredential helperという認証情報を記憶する仕組みによって、仕事用のアカウントでプライベートアカウントにアクセスしようとしたのが原因。
以下には、SSHを設定する方法を記載する。

手順

いろんな方が既に記事にしてる通り、
1. ローカルでSSHキーペアを生成する
2. 生成したSSHキーの公開鍵をGithubに登録する
3. ~/.sshのconfigを編集する
4. リポジトリのconfigにユーザー名、メールアドレスを設定する

1. ローカルでSSHキーペアを生成する

以下のコマンドでSSHのキーペアを生成する。

cd ~/.ssh
ssh-keygen -t rsa -C [メールアドレス] -f [キーのファイル名]

2. 生成したSSHキーの公開鍵をGithubに登録する

サブアカウントでGithubにログインして、以下のページのNew SSH keyから生成したSSHキーの公開鍵を登録する。
github.com
Titleの欄には、自分で後から見て判断しやすい名前を入力。
このコマンドで公開鍵の中身をクリップボードにコピー出来るので、Keyの欄にペースト。

cat ~/.ssh/[ファイル名].pub | pbcopy

3. `~/.ssh`のconfigを編集する

~/.ssh/configに以下を追記する。（なければ新規作成する。）

Host github.com
  HostName github.com
  User git
  Port 22
  IdentityFile ~/.ssh/[1.で生成したSSHキーのファイル名（拡張子なし）]
  TCPKeepAlive yes
  IdentitiesOnly yes

ここの設定で最初1行目をHost github.com.privateと書いていたが、これだとSSHで通信できなかった。ここの記事にあるように、リモートリポジトリを設定するときにHost名を変えなきゃいけないらしい。今回はプライベートアカウントだけSSHキー登録したので、デフォルトのHost github.comにした。

4. リポジトリのconfigにユーザー名、メールアドレスを設定する

これでPermission errorで弾かれることはなくなったが、pushしてみると、仕事用のアカウント名でpushされるので、以下のコマンドでユーザー名とメールアドレスを登録する。このコマンドは、リポジトリ毎に打たないといけない。

git config user.name [プライベートアカウントのユーザー名]
git config user.email [プライベートアカウントのメールアドレス]

これでプライベートアカウントの設定は完了。

まとめ

SSH接続自体は今回初めてではなかったが、Githubに設定したのは初めてだった。少し勉強になった。

参考

2018-11-07

人のブログばっかり読んでないで手を動かせ

ポエム

ジャバザハットリ氏のブログが面白くてずっと読んでしまう。
f:id:john_kaz:20181107210426p:plain:w500
内容は海外移住の話、技術的な話、英語学習の話、出会う人の話、公開したサービスの話などなど。どれもこれもハットリ氏が自分自身の目で見て、肌感じた経験を基に丁寧に書かれている。その一つ一つの経験が日本でのうのうと暮らしている私には、体験したことのないものばかりでキラキラして見える。このブログを読んでいると改めて感じる。やっぱり経験は宝だな、と。

お前もハットリ氏と同じエンジニアならブログばっかり読んでないで手を動かせ！（自分に向けて）

ベルリンのITスタートアップで働くジャバ・ザ・ハットリの日記

追記（2018.11.8）
憧れのジャバザハットリ氏が私の記事をツイートしてくれました！

言及ありがとうございます。私も手を動かすようにしよっと / “人のブログばっかり読んでないで手を動かせ - Post Bank” https://t.co/5aTpToObWd
— Jabba_the_Huttri (@nodenodenode1) 2018年11月7日

こんな~~クソみたいな~~始めたばっかりのブログを見てくださると思わなかったので、嬉しいです！

2018-11-06

宝島でアダルトVRを体験してきた

ポエム

個室DVD鑑賞の宝島でアダルトVRを体験した。結構良かった。
f:id:john_kaz:20181106211418p:plain

先日仕事終わり、なんかまだ家に帰りたくないなぁと思って、暇を潰せる場所を探していた。
前々から小耳には挟んでいたが、行く機会のなかった男の聖地・個室DVD鑑賞の店に行ってみようと決めた。
そもそも個室DVD鑑賞とはどういった場所かというと、その場でムフフなDVDを借りて、そのままカラオケのような個室でそれらを鑑賞しながら、一人で事を致すことのできる場所である。

夜９時ごろとある町の宝島という個室DVD鑑賞の店の前に着いた。店の前は人通りが多くなかなかに入りづらい場所ではあったが、誰も見ちゃいないさと自分に言い聞かせながら、こそこそと入店。中に入ると、狭い店内には男なら一度は見たことのあるあっち系のDVDがびっしり。（申し訳程度に普通のDVDもありました。）
一度に６枚まで借りられるらしいということで、入り口付近に置いてあったカゴをとり、最新作の棚やメーカー毎、女優毎に並んだ棚を物色し、DVDを選ぶ。６枚を結構時間かけて選んだが、６枚も見られないので、こんなに一気に借りなくても良かったなと後から反省。
選んだDVDは結果的に全然観なかったので、あんまり覚えてない。紗倉まなちゃんと河合あすなちゃんと春咲りょうちゃんあたりを借りた。
f:id:john_kaz:20181106224146p:plain:w300
f:id:john_kaz:20181106224204p:plain:w300
f:id:john_kaz:20181106224218p:plain:w300

受付にDVDを入れたカゴを置くと、利用時間を聞かれる。（受付の人から顔が見えないようになっている。） VRを体験してみたかったので、VRの２時間コースを選択。このコースは大人のおもちゃ付きだ。大人のおもちゃはハード系、ソフト系、看護師系の３つから選べるのだが、どれがいいのかさっぱりわからず、ハード系を選んだ。軽くVRの操作の説明を聞いた後、部屋の鍵、さっき選んだDVD、VRセット、大人のおもちゃ、おしぼり等が入ったカゴを手渡される。カラオケと同じように部屋には案内してくれない。部屋の階数を教えてくれるので、そのフロアに行って部屋番号を頼りに自分の部屋を探す。

部屋の前に着く。部屋の鍵は開いていたのでそのまま入室して鍵を閉める。ここからワクワクタイムの始まりだ。
早速VRゴーグルをつけてみる。最初、操作方法がわからず、ゴーグルを何回も外してゴーグルの操作方法の説明書きを見るはめになった。あと右のこめかみあたりに操作のタッチパネルや戻るボタンがあるので、その操作に慣れるのも少し時間がかかった。

操作方法がわかったところで、オンライン上の動画をVRで再生してみる。（VRで借りたDVDは見ることができない。VR内蔵のものかオンライン配信されているものしか再生できない。）
衝撃だった。
目の前に鈴村あいりちゃんがいる！
f:id:john_kaz:20181106224315p:plain:w300
顔ちっちゃ！可愛すぎる！
リアルに触れそうな感じで、そういうお店で実際に女の子が目の前に現れたような感覚に陥った。すごい臨場感だった。オイルに濡れた体がすぐ目の前に確かに存在していた。顔を目を動かせば現実世界と同じようにVRの世界も動いた。あまりこのすごさを語れる言葉を持っていないので、興味があれば一度体験してみてほしい。
この圧倒的な没入感の中で私は果てたのだった。

全て終わった後は、軽く部屋を綺麗にして、部屋を後にし、受付に鍵、VRセット、DVDを返却する。店を出ると道ゆく人の視線が若干痛かったが、そんなのは気にしない。賢者モードに浸りながら、私は群衆の中に紛れた。

Post Bank

よわいエンジニアのブログ

Material-UIでヘッダーを作る【React】

準備

コード

見た目

まとめ

Gatsby.jsで爆速で爆速のブログを作った

Githubのアカウント切り替えに苦労した話

はじめに

手順

1. ローカルでSSHキーペアを生成する

2. 生成したSSHキーの公開鍵をGithubに登録する

3. `~/.ssh`のconfigを編集する

4. リポジトリのconfigにユーザー名、メールアドレスを設定する

まとめ

参考

人のブログばっかり読んでないで手を動かせ

宝島でアダルトVRを体験してきた

まとめ

良かった点

今ひとつだった点

準備

コード

見た目

まとめ

はじめに

手順

1. ローカルでSSHキーペアを生成する

2. 生成したSSHキーの公開鍵をGithubに登録する

3. ~/.sshのconfigを編集する

4. リポジトリのconfigにユーザー名、メールアドレスを設定する

まとめ

参考

まとめ

良かった点

今ひとつだった点

3. `~/.ssh`のconfigを編集する