katekichiのゆるブログ

普段の作業メモや日常の出来事とか

「Electronではじめるアプリ開発」を写経してみた ⑥

またかなり間が空いてしまったのと、写経したものの期待通りの動きではなく調査しましたが 以下の理由からかなりハマってしまっていました。

  1. Electron上でのReactのDebug方法を確立できていなかった。

  2. ES2016と、Promiseの理解不足から原因の特定に時間が掛かった。

  3. そもそもFirebaseのお作法が分かってなく、原因の特定に時間が掛かった。

※1.に関しては、以下を参考にしてDebug環境の構築をしたいと思います。 qiita.com

※2. 3.の課題については別途調査してまとめようと思います。

今回は、チャットルーム一覧の実装から

src/renderer/Rooms.jsx

import React from "react";
import { hashHistory } from "react-router";
import RoomItem from "./RoomItem";
import firebase from "firebase/firebase-browser";

const ICON_CHAT_STYLE = {
    fontSize: 120,
    color: "#DDD"
};

const FORM_STYLE = {
    display: "flex"
};

const BUTTON_STYLE = {
    marginLeft: 10
};

export default class Rooms extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            roomName: "",
            rooms: []
        };
        this.db = firebase.database();
        this.handleOnChangeRootName = this.handleOnChangeRootName.bind(this);
        this.handleOnSubmit = this.handleOnSubmit.bind(this);        
    }

    componentDidMount() {
        this.fetchRooms();
    }


    handleOnChangeRootName(e) {
        this.setState({ roomName: e.target.value });
    }

    handleOnSubmit(e) {
        const { roomName } = this.state;
        e.preventDefault();

        if (!roomName.length) {
            return;
        }

        // Make new Chatroom for a Firebase 
        const newRoomRef = this.db.ref("/chatrooms").push();
        const newRoom = {
            description: roomName
        };

        newRoomRef.update(newRoom).then(() => {
            this.setState({ roomName: "" });
            return this.fetchRooms().then(() => {
                hashHistory.push(`/rooms/${newRoomRef.key}`);            
            });
        });
    }

    fetchRooms() {
        return this.db.ref("/chatrooms").limitToLast(20).once("value").then(snapshot => {
            const rooms = [];
            snapshot.forEach(item => {
                rooms.push(Object.assign({ key: item.key }, item.val()));
            }); 

            this.setState({ rooms });  
        });
    }

    // Drawing the left pane 
    renderRoomList() {
        const { roomId } = this.props.params;
        const { rooms, roomName } = this.state;
        return (
            <div className="list-group">
                { rooms.map(r => <RoomItem room={r} key={r.key} selected={r.key == roomId} />)}
                <div className="list-group-header">
                    <form style={FORM_STYLE} onSubmit={this.handleOnSubmit} >

                        <input 
                            type="test"
                            className="form-control"
                            placeholder="New room"
                            value={roomName}
                            onChange={this.handleOnChangeRootName}
                        />

                        <button className="btn btn-default" style={BUTTON_STYLE}>
                            <span className="icon icon-plus" />
                        </button>
                    </form>
                </div>
            </div>
        );
    }

    // Drawing the right pane 
    renderRoom() {
        if (this.props.children) {
            return this.props.children;        
        } else {
            return (
                <div className="text-center">
                    <div style={ICON_CHAT_STYLE}>
                        <span className="icon icon-chat" />
                    </div>
                    <p>
                        Join a chat room from the sidebar or create your chat room.
                    </p>
                </div>                                                
            );
        }
    }

    render() {
        return (
            <div className="pane-group">
                <div className="pane-sm slider">{this.renderRoomList()}</div>
                <div className="pane">{this.renderRoom()}</div>                
            </div>
        );
    }
}

以下は、チャットルーム一覧の個々のアイテムの実装

src/renderer/RoomItem.jsx

import React from "react";
import { Link } from "react-router";

const LINK_STYLE = {
    color: "inherit",
    textDecoration: "none"
};

export default function RoomItem(props) {
    const { selected } = props;
    const { description, key } = props.room;
            
    return(
        <div className={selected ? "list-group-item selected" : "list-group-item"}>
            <Link to={`/rooms/${key}`} style={LINK_STYLE}>
                <div className="media-body">
                    <strong>{description}</strong>
                </div>
            </Link>
        </div>
    );
}

ルームを追加すると一覧に登録されることが確認できました。 f:id:katekichi:20170614001823p:plain f:id:katekichi:20170614001827p:plain

Firebaseのchatroomsにも登録されました。 f:id:katekichi:20170614001831p:plain f:id:katekichi:20170614001834p:plain

今回はここまで!!

Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

入門 React ―コンポーネントベースのWebフロントエンド開発

入門 React ―コンポーネントベースのWebフロントエンド開発

JavaScript フレームワーク入門

JavaScript フレームワーク入門

「Electronではじめるアプリ開発」を写経してみた ⑤

諸々立て込んでいて停滞していた写経再開しました。今回は、Firebaseの設定から実装します。

firebase.google.com

目次:

Firebaseのセットアップ

上記のサイトでアカウント生成等をして取得した接続情報 を src/render

er/app.jsに貼ります。

import React from "react";
import { render } from "react-dom";
import { Router, Route, hashHistory } from "react-router";
import Login from "./Login";
import Signup from "./Signup";
import Rooms from "./Rooms";
import Room from "./Room";

import firebase from "firebase/firebase-browser";

const appRouting = (
    <Router history={hashHistory}>
        <Route path="/">
            <Route path="login" component={Login} />
            <Route path="signup" component={Signup} />
            <Route path="rooms" component={Rooms}>
                <Route path=":roomId" component={Room} />
            </Route>            
        </Route>
    </Router>
);

if (!location.hash.length) {
    location.hash = "#/login";
}

// Firebaseの初期化 ←ココ追加
var config = {
    apiKey: "xxxxxxx",
    authDomain: "electron-chat-cyyyyyy.firebaseapp.com",
    databaseURL: "https://electron-chat-cyyyyyy.firebaseio.com",
    projectId: "electron-chat-cyyyyyy",
    storageBucket: "electron-chat-cyyyyyy.appspot.com",
    messagingSenderId: "xxxxxxxx"
};
firebase.initializeApp(config);

render(appRouting, document.getElementById("app"));

ログイン画面の実装

src/renderer/Login.jsxにゴリゴリ実装します。 Validationはもう少し後々、工夫できそうです

import React from "react";
import { Link, hashHistory } from "react-router";
import Errors from "./Errors";
import firebase from "firebase/firebase-browser";

const FORM_STYLE = {
    margin: "0, auto",    
    padding: 30
};

const SIGNUP_LINK_STYLE = {
    display: "inline-block",    
    marginLeft: 10
};

export default class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            email: localStorage.userEmail || "",
            password: localStorage.userPassword || "",
            errors: []
        };

        this.handleOnChangeEmail = this.handleOnChangeEmail.bind(this);
        this.handleOnChangePassword = this.handleOnChangePassword.bind(this);
        this.handleOnSubmit = this.handleOnSubmit.bind(this);        
    }

    handleOnChangeEmail(e) {
        this.setState({ email: e.target.value });
    }

    handleOnChangePassword(e) {
        this.setState({ password: e.target.value });
    }

    handleOnSubmit(e) {
        const { email, password } = this.state;
        const errors = [];
        let isValid = true;
        e.preventDefault();

        if (!email.length) {
            isValid = false;
            errors.push("Email address can't be blank.");
        }

        if (!password.length) {
            isValid = false;
            errors.push("Password can't be blank.");
        }

        if (!isValid) {
            this.setState({ errors });
            return;
        }

        firebase.auth().signInWithEmailAndPassword(email, password).then(() => {
            localStorage.userEmail = email;
            localStorage.userPassword = password;
            hashHistory.push("/rooms");            
        }).catch(() => {
            this.setState({ errors: ["Incorrect email or password."] });
        });
    }

    render() {
        return (
            <form style={FORM_STYLE} onSubmit={this.handleOnSubmit}>
                <Errors errorMessages={this.state.errors} />
                <div className="form-group">
                    <label>Email address*</label>
                    <input 
                        type="email"
                        className="form-control"
                        placeholder="email"
                        value={this.state.email}
                        onChange={this.handleOnChangeEmail}
                    />
                </div>
                <div className="form-group">
                    <label>Password</label>
                    <input 
                        type="password"
                        className="form-control"
                        placeholder="password"
                        value={this.state.password}
                        onChange={this.handleOnChangePassword}
                    />
                </div>

                <div className="form-group">
                    <button className="btn btn-large btn-default">Login</button>
                    <div style={SIGNUP_LINK_STYLE}>
                        <Link to="/signup">create new account</Link>
                    </div>
                </div>
            </form>
        );
    }
}

実行するとこんな感じになりました。

f:id:katekichi:20170525162743p:plain

サインアップ画面の実装

import React from "react";
import { Link, hashHistory } from "react-router";
import Errors from "./Errors";
import firebase from "firebase/firebase-browser";

const SIGNUP_FORM_STYLE = {
    margin: "0, auto",    
    padding: 30
};

const CANCEL_BUTTON_STYLE = {
    marginLeft: 10
};

export default class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            email: "",
            password: "",
            name: "",
            photoURL: "",
            errors: []
        };

        this.handleOnChangeEmail = this.handleOnChangeEmail.bind(this);
        this.handleOnChangePassword = this.handleOnChangePassword.bind(this);
        this.handleOnChangeName = this.handleOnChangeName.bind(this);
        this.handleOnChangePhotoURL = this.handleOnChangePhotoURL.bind(this);
        this.handleOnSubmit = this.handleOnSubmit.bind(this);        
    }

    handleOnChangeEmail(e) {
        this.setState({ email: e.target.value });
    }

    handleOnChangePassword(e) {
        this.setState({ password: e.target.value });
    }

    handleOnChangeName(e) {
        this.setState({ name: e.target.value });
    }

    handleOnChangePhotoURL(e) {
        this.setState({ photoURL: e.target.value });
    }


    handleOnSubmit(e) {
        const { email, password, name, photoURL } = this.state;
        const errors = [];
        let isValid = true;
        e.preventDefault();

        if (!email.length) {
            isValid = false;
            errors.push("Email address can't be blank.");
        }

        if (!password.length) {
            isValid = false;
            errors.push("Password can't be blank.");
        }
        
        if (!name.length) {
            isValid = false;
            errors.push("Name can't be blank.");
        }

        if (!isValid) {
            this.setState({ errors });
            return;
        }

        firebase.auth().createUserWithEmailAndPassword(email, password).then(newUser => {
            return newUser.updateProfile({
                displayName: name,
                photoURL
            });
        }).then(() => {
            hashHistory.push("/rooms");
        }).catch(err => {
            this.setState({ errors: [err.message] });
        });
    }

    render() {
        return (
            <form style={SIGNUP_FORM_STYLE} onSubmit={this.handleOnSubmit}>
                <Errors errorMessages={this.state.errors} />
                <div className="form-group">
                    <label>Email address*</label>
                    <input 
                        type="email"
                        className="form-control"
                        placeholder="email"
                        value={this.state.email}
                        onChange={this.handleOnChangeEmail}
                    />
                </div>
                <div className="form-group">
                    <label>Password</label>
                    <input 
                        type="password"
                        className="form-control"
                        placeholder="password"
                        value={this.state.password}
                        onChange={this.handleOnChangePassword}
                    />
                </div>
                <div className="form-group">
                    <label>User name*</label>
                    <input 
                        type="text"
                        className="form-control"
                        placeholder="user name"
                        value={this.state.name}
                        onChange={this.handleOnChangeName}
                    />
                </div>
                <div className="form-group">
                    <label>Photo URL</label>
                    <input 
                        type="text"
                        className="form-control"
                        placeholder="photo URL"
                        value={this.state.photoURL}
                        onChange={this.handleOnChangePhotoURL}
                    />
                </div>

                <div className="form-group">
                    <button className="btn btn-large btn-primary">Create new account</button>
                    <Link to="/login">
                        <button type="button" style={CANCEL_BUTTON_STYLE} className="btn btn-large btn-default">Cancel</button>                
                    </Link>                    
                </div>
            </form>

        );
    }
}

f:id:katekichi:20170525163230p:plain

ユーザ作成を実際に作成するとFirebase上にユーザが作られました。

f:id:katekichi:20170525163525p:plain

今回は、ここまで!!

Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門

入門 React ―コンポーネントベースのWebフロントエンド開発

入門 React ―コンポーネントベースのWebフロントエンド開発

「Electronではじめるアプリ開発」を写経してみた ④

G.W.は、何もしないで終わってしまったので、また写経を再開しました。チャットアプリ の続きをやります。

目次:

npmスクリプトの登録

package.jsonにnpmスクリプト(scripts)を記述すると コマンドのエイリアス登録をできます。

  "scripts": {
    "watch": "babel --out-dir .tmp src --watch",
    "start": "electron .",
  },

$ npm start で electron . と同様となります。

ルーティングの実装

reactreact-router で各画面とルーティングを実装していきます。

src/main/Login.jsx(ログイン画面)

import React from "react";
import { Link } from "react-router";

export default class Login extends React.Component {
    render() {
        return (
            <div>
                <h2>Login</h2>
                <Link to="/rooms">Login</Link> <br />
                <Link to="/signup">Create new account</Link>                
            </div>
        );
    }
}

src/main/SignUp.jsx(サインアップ画面)

import React from "react";
import { Link } from "react-router";

export default class Login extends React.Component {
    render() {
        return (
            <div>
                <h2>Signup</h2>
                <Link to="/rooms">Login</Link> <br />
                <Link to="/login">cancel</Link>                
            </div>
        );
    }
}

src/main/Rooms.jsx(チャットルーム一覧画面)

import React from "react";
import { Link } from "react-router";

export default class Login extends React.Component {
    render() {
        return (
            <div>
                <h2>Rooms</h2>
                <ul>
                    <li><Link to="/rooms/1">Room 1</Link></li>
                    <li><Link to="/rooms/2">Room 2</Link></li>                    
                </ul>
                <div>{this.props.children}</div>
            </div>
        );
    }
}

src/main/Room.jsx(チャットルーム詳細画面)

import React from "react";

export default class Login extends React.Component {
    render() {
        return (
            <div>
                <h3>Room</h3>
            </div>
        );
    }
}

src/renderer/app.jsx(ルーティングの実装)

import React from "react";
import { render } from "react-dom";
import { Router, Route, hashHistory } from "react-router";
import Login from "./Login";
import Signup from "./Signup";
import Rooms from "./Rooms";
import Room from "./Room";

const appRouting = (
    <Router history={hashHistory}>
        <Route path="/">
            <Route path="login" component={Login} />
            <Route path="signup" component={Signup} />
            <Route path="rooms" component={Rooms}>
                <Route path=":roomId" component={Room} />
            </Route>            
        </Route>
    </Router>
);

if (!location.hash.length) {
    location.hash = "#/login";
}

render(appRouting, document.getElementById("app"));

メニューの作成

もろもろメニュー項目を追加します。 単純作業で地味にツラったです・・

src/main/setAppMenu.jsx(ルーティングの実装)

import { app, Menu } from "electron";
import createWindow from "./createWindow";

function setAppMenu() {

    const template = [
        {
            label: "File",
            submenu: [
                { label: "New Window", accelerator: "CmdOrCtrl+N", click: createWindow },
                { type: "separator" },
                { label: "Close", accelerator: "CmdOrCtrl+W", role: "close" },                
            ],                     
        },
        {
            label: "Edit",
            submenu: [
                { label: "Copy", accelerator: "CmdOrCtrl+C", role: "copy" },
                { label: "Paste", accelerator: "CmdOrCtrl+V", role: "paste" },
                { label: "Cut", accelerator: "CmdOrCtrl+X", role: "cut" },
                { label: "Select All", accelerator: "CmdOrCtrl+A", role: "selectall" }                
            ],                     
        },
        {
            label: "View",
            submenu: [
                { 
                    label: "Reload", 
                    accelerator: "CmdOrCtrl+R", 
                    click: (item, focusedWindow) => focusedWindow && focusedWindow.reload()
                },
            ],                     
        },
        {
            label: "Toggle DevTools",
            submenu: [
                { 
                    label: "Reload", 
                    accelerator: process.platform === "darwin" ? "Alt+Command+I" : "Ctrl+Shift+I",             
                    click: (item, focusedWindow) => focusedWindow && focusedWindow.toggleDevTools()
                },
            ],                     
        },
    ];

    if (process.platform === "darwin") {

        template.unshift({
            label: app.getName(),
            submenu: [
                { role: "about" },
                { type: "separator" },
                { role: "services", submenu:[] },
                { type: "separator" },
                { role: "hide" },            
                { role: "hideothers" },
                { role: "unhide" },
                { type: "separator" },
                { role: "quit" }
            ],        
        });
    }

    template.push({
        role: "window",
        submenu: [
            { role: "minimize" },
            { role: "zoom" },            
        ]
    });

    const appMenu = Menu.buildFromTemplate(template);
    Menu.setApplicationMenu(appMenu);        
}

export default setAppMenu;

src/main/index.js(アプリケーションメニューを追加)

import { app } from "electron";
import createWindow from "./createWindow";
import setAppMenu from "./setAppMenu";

app.on("ready", () => {
    setAppMenu();
    createWindow();
});

app.on("window-all-closed", () => {
    if(process.platform !== "darwin") {
        app.quit();
    }
});

app.on("activate", (_e, hasVisibleWindows) => {
    if(!hasVisibleWindows) {
        createWindow();
    }
});

こんな感じになりました。

f:id:katekichi:20170514001241p:plain

f:id:katekichi:20170514001252p:plain

f:id:katekichi:20170514001259p:plain

f:id:katekichi:20170514001301p:plain

今回は、メニュー作成するのが少々単純作業で辛かったです・・。 次回は、Firebaseを使用するので、テクニカルな面白味はありそうです。

「Electronではじめるアプリ開発」を写経してみた ③

少し間が空きましたが、ぼちぼち写経しました。チャットアプリの続きをやります。

目次:

3-3 開発プロジェクトの作成

package.jsonの作成と必要なモジュールをインストールする

 npm init
 npm install electron@1.6.1 --save-dev
 npm install connors/photon --save
 npm install react@15.4.2 react-dom@15.4.2 react-router@3.0,0 --save
 npm install babel-cli@6.18.0 babel-preset-es2015@6.18.0 babel-preset-react@6.16.0 --save-dev

src/main/index.js(mainプロセス実装)

import { app } from "electron";
import createWindow from "./createWindow";

app.on("ready", () => {
    createWindow();
});

app.on("window-all-closed", () => {
    if(process.platform !== "darwin") {
        app.quit();
    }
});

app.on("activate", (_e, hasVisibleWindows) => {
    if(!hasVisibleWindows) {
        createWindow();
    }
});

src/main/createWindow.js(Window生成)

import  { BrowserWindow } from "electron";

let win;
function createWindow() {
    win = new BrowserWindow();
    win.loadURL(`file://${__dirname}/../../index.html`);
    win.on("closed",() => {
        win = null;
    });    
}

export default createWindow;

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Electron chat</title>
        <link rel="stylesheet" href="node_modules/photon/dist/css/photon.css">        
    </head>
    <body>

        <div class="window">
            <div id="app" class="window-content"></div>
        </div>
        <script>require("./.tmp/renderer/app.js")</script>
    </body>
</html>

src/renderer/app.jsx(renderプロセス実装)

import React from "react";
import { render } from "react-dom";

render(<div>Hello, Electron and React JSX</div>, document.getElementById("app"));

.babelrc(Babelの設定。ES2015、React JSX形式のファイルをトランスパイルする)

{
    "presets":["es2015", "react"]
}

Babelの実行(srcディレクトリ下層の各jsとjsxを.tmp配下にトランスパイルしたjsとして配置) –watch 指定でファイル変更を自動検知する

$ ./node_modules/.bin/babel --out-dir .tmp src --watch

package.jsonのエンドポイントを変更

  "main": "main.js",
     ↓
  "main": ".tmp/main/index.js",

実行

$ ./node_modules/.bin/electron .

こんな感じ

f:id:katekichi:20170501235715p:plain

今回は、React JSXの初歩的な書き方と、Babelを使用したトランスパイルでした。 次回は、ルーティングの実装から

「Electronではじめるアプリ開発」を写経してみた ②

今日もぼちぼち写経しました。

目次:

前回の続きから・・。Renderプロセスにformの実装をするところから

2-4 最初のアプリケーションを作成する

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>My first Electron app</title>
    </head>
    <body>
        <h1>CommentBox</h1>
        <form id="comment-form">
            <input type="text" id="comment-input" placeholder="コメント">
            <input type="submit" value="投稿">            
        </form>
        <ul id="comments"></ul>
        <script src="render.js"></script>
    </body>
</html>

render.js

※ひさびさに生JSを書いた

document.addEventListener("DOMContentLoaded", () => {
    document.getElementById("comment-form").onsubmit = () => {
        const commentInput = document.getElementById("comment-input");

        if (commentInput.value === "") {
            return false;
        }

        const newComment = document.createElement("li");
        newComment.innerText = commentInput.value;
        document.getElementById("comments").appendChild(newComment);

        commentInput.value = "";
        return false;
    };
});

f:id:katekichi:20170425185434p:plain

とりあえず、ここまでは普通にWeb開発やっているときとそんなに大差ない感じ。 Mainプロセスがクライアントアプリ感出ているくらい

3 チャットアプリを作ろう

Firebase使うぽいので、ちょっと楽しみ

3-1 Electronが使われているチャットアプリケーション

  • SlackRocker.chatの紹介
  • WebSocketやWebRTCのようなリアルタイムで双方向通信する仕組みが必要
  • Firebaseもその一つ

3-2 開発するチャットアプリケーション

React使ってSPAで作るよって話し。 機能としては、ログイン、サインアップ、メイン(チャットルーム一覧と詳細画面)

facebook.github.io

次回は、 3-3 開発プロジェクトの作成から

「Electronではじめるアプリ開発」を写経してみた ①

最近、あまり手を動かせてないなあと思い先日購入してツンドク状態になっていた

gihyo.jp

を写経してみようと思った次第。 Reactもついでにやれそうな内容だったので丁度良いかなと

1-1 Electron概要

1-2 ElectronとWeb技術の進化

1-3 Electron特徴

ざっと読んだ

2-1 Node.jsをインストールする

$ node -v

v6.2.2

※とりあえず6系をインストール済みだったので、スルー

2-2 アプリケーション作成の準備

package.jsonの作成

$ mkdir electron_first_app

$ mkdir electron_first_app

$ npm init

※基本は、デフォルトのまま。「entry point」はmain.js

Electronのインストール

$ npm install electron@1.6.1

$ ./node_modules/.bin/electron

実行してみる

おお!! f:id:katekichi:20170424160103p:plain

2-3 Elactronのアプリケーション構成

Mainプロセス(Nodeから呼ばれるエントリポイント)とRenderプロセス がある(Mainプロセスから作成されたWebページが動く)。

Renderプロセスから、PCのネイティブリソースへのアクセス可

2-4 最初のアプリケーションを作成する

Hello World的なもの

main.js

const { app, BrowserWindow } = require("electron");
let win;

function createWindow() {
    win = new BrowserWindow({width: 800, height: 600});
    console.log("abx");
    win.loadURL(`file://${__dirname}/index.html`);
    win.on("closed",() => {win = null;});
}

app.on("ready", createWindow);
app.on("window-all-closed", () => {
    if (process.platform !== "drawin") {
        app.quit();
    }
});
app.on("active", () => {
    if (win === null) {
        createWindow();
    }
});

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>My first Electron app</title>
    </head>
    <body>
        <h1>Hello Electron!</h1>
    </body>
</html>

$ ./node_modules/.bin/electron .

f:id:katekichi:20170424183022p:plain

今日は、これくらいで

JAWS DAYS 2017に行ってきた

ひさびさに書きます。前回は、2015年でした・・。しかもしょうもない内容だった。

JAWS DAYS 2017に行ってきたので、その感想なんかとまとめようと思います。 昨年までの「ベルサール新宿グランド」から「TOC五反田メッセ」に変更になりました。 会場は広く感じましたが、レシーバーがあったのでスピーカーの方の声は非常に聞きやすかったです。

f:id:katekichi:20170312001504j:plain

参加は、今年で3回目です。昨年は、1週間の怒涛の常住作業後の参加だったので、ほとんど覚えてないす(- -;

今回は、内容的にDevOpsとサーバーレスの話題が多かったように感じました。 いくつか、印象に残ったセッションについてまとめました。

AWS SECURITY DEATH m/ ~セキュ鮫様からのお告げ~ by Security-JAWS | セッション | JAWS DAYS 2017

AWSのネットワーク設計の基礎的なものから、WAFやAWS Shild(マネージドDDoS保護サービス) のセッションでした。

AWS Shildは、ELB、ALB、Route53、CloudFrontが対象とのこと。DDos攻撃による請求金額が跳ね上がってしまった分 も保護されるようです。Shield Standardは、無料のようなので、まずはここから導入してみても良さそうです。

EXCEL構成管理からの脱却と次世代MSPとDevOps 2.0 by OpsJAWS | セッション | JAWS DAYS 2017

現状のDevOpsとこれからの話(2.0)でした。普段の弊社の業務的にDevとOpsって担当が、一緒なことがほとんどなので 実際の俗にいうDevOpsとは違うのかなあと思いつつも、構成管理はちゃんとやりたいなあと思っていたので EC2 Systems Managerは、使えそうです。 SSHでログインせずに、マネジメントコンソール上でOSレベルでの操作履歴が分かるのは良いなと思ったので、即日導入したいと 思います。

また、AWS Configと合わせて統合的な管理をすればAWSリソースの操作履歴(削除されたインスタンス情報も分かるとのこと)だったので、AWSを扱えるエンジニアも増えてきたので導入を検討したいです。

今度、Ops側が、次世代MSP(障害を検知するのではなく、事前に検知する)が進んでくると、Ops側からのフィードバックがDev 側に返ってきて、OpsDevになるのではというお話しでした。

サーバレスの今と未来 | セッション | JAWS DAYS 2017

以前、ぎーらぼでお話しして頂いた吉田 真吾さんのセッションで サーバレスについての話題でした。

f:id:katekichi:20170312002213j:plainf:id:katekichi:20170312002238j:plain

www.slideshare.net

Lambda を使用した事例からSPAアプリケーションでの実装方法まで実践的な内容を でした(スライドを公開して頂いたので、再度復習させてもらえればと思います)。

また、「Serverless Single Page Apps」の 翻訳をされたそうで、近々日本語版が出版されるとのことで非常に楽しみです。

f:id:katekichi:20170312001923j:plain

おとなのたしなみ、おコンテナ by JAWS-UGコンテナ支部 | セッション | JAWS DAYS 2017

Dockerのお話しでした。最近、自分もぼちぼち使用し始めたものの、いまいち本番環境への導入イメージが ぱっとしなかったので、参考になるセッションでした。

Dockerの運用で、なんかぱっとしない場合は、「The Twelve-Factor App」に即していない可能性があるので このプラクティスを見直してみれば良いとのことでした。

デプロイの自動化で重要なのは、DB migrateの適用順にアプリケーション側が左右されない設計にする必要があるというのが印象的でした(弊社のDjangoの案件では、「DB migrate」⇒ 「アプリケーション」という順序になっています。どのように運用して良いのかイメージがわかないので、社内のエンジニアと会話してみたいと思います)

また、Dockerを使用したデプロイをする場合、環境によって挙動が変わるのは、ポリシーに反するとのことで、環境設定のファイル(本番用/ステージング用/開発用)を分けるのではなく、Docker run時に環境変数にて渡すことを推奨されていました。 こちらも運用イメージが現状、いまいち沸かないので検討の予知がありそうです。

社内でAWS育成講座を運営したよもやま話 | セッション | JAWS DAYS 2017

AWSの社内勉強会を実施された際のセッションでした。 私も社内での勉強会の企画に関わっている立場のため非常に興味深くお話しを聞かせて頂きました。 座学とハンズオンを組み合わせて、「AWS 認定デベロッパー – アソシエイト」受験に向けて 勉強会を開催されたということで、今後の参考にさせて頂こうと思いました。

セッション終了後に、質問させて頂きましたが、ご丁寧に対応して下さりました。 この場を借りてお礼、申し上げます。

f:id:katekichi:20170312001708j:plain

さいごに

毎回、JAWS DAYS参加する度に良い刺激になると同時にそろそろ、長野支部の活動もなんとかしないとねという 気持ちにもなると思うので、気張らずに出来ることから再開していければと思っています(弊社の事例紹介とか初心者向け ハンズオンとか)。