Nuxtでauth-routesを動かすメモ

下の公式サイトのものをnuxt-edgeでアップグレードしているので、うまく動かなかったので動かすメモ
ついでに、Bulmaを入れる。

ja.nuxtjs.org

Nuxtのスターターテンプレートを使ってNuxtを使えるようにする。 ドキュメントにあるようにserver.jsをコピーする。
このままだとnuxt.config.jsを読み込まないので、31行以下を書き換える。
nuxt.config.js

// オプションとともに Nuxt.js をインスタンス化
let config = require('./nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')
const nuxt = new Nuxt(config)

// プロダクション環境ではビルドしない
if (config.dev) {
  const builder = new Builder(nuxt)
  builder.build()
}
app.use(nuxt.render)
app.listen(3000)
console.log('Server is listening on http://localhost:3000')

server.jsを読み込ませるためにpackage.jsonを書き換える。(ドキュメント通りと同じ)
cross-envはyarnやnpmで入れる必要がある。
package.json

"scripts": {
  "dev": "node server.js",
  "build": "nuxt build",
  "start": "cross-env NODE_ENV=production node server.js"
}

ストアはドキュメントと同じ

次に、ログイン済みの場合は指定のページにアクセスできますが、ログインしていない場合は/へ飛ばすようにする。 middlewereで作成すればmiddleware: 'auth'で使えるようになる。
auth.js

export default function({store, redirect}) {
  if(!store.state.authUser) {
    return redirect('/');
  }
}

これでとりあえず、ログインしていない場合のコントロールまで

次に、Bulmaを入れる。
Bulmaは変数を使ったりしていじりたいのでSASS/SCSSで使用する。
SASS/SCSSを使うためにsass-loader node-sassを入れる。
インストールはyarn add bulma sass-loader node-sass CSSのライブラリをグローバルで使用するためにはnuxt.config.jsへ追加する。
nuxt.config.js

module.exports = {
  css: [
    { src: 'bulma/bulma.sass', lang: 'sass' }
  ]
}

これでとりあえず、Bulmaは使えるようになるが、カスタムはできないので、assets/css/main.scssを作成してConfigの文を変える。

css: [
  { src: '@/assets/css/main.scss', lang: 'scss' }
]

あとは、main.scssでBulmaを使うためにBulma公式のSCSSのページから持ってきたソースでは動かないのでいじる。

@import "~bulma/sass/utilities/initial-variables";
@import "~bulma/sass/utilities/functions";
// 2. Set your own initial variables
// Update blue
$blue: #72d0eb;
// Add pink and its invert
$pink: #ffb3b3;
$pink-invert: #fff;
// Add a serif family
$family-serif: "Merriweather",
"Georgia",
serif;
// 3. Set the derived variables
// Use the new pink as the primary color
$primary: $pink;
$primary-invert: $pink-invert;
// Use the existing orange as the danger color
$danger: $orange;
// Use the new serif family
$family-primary: $family-serif;
// 4. Setup your Custom Colors
$linkedin: #0077b5;
$linkedin-invert: findColorInvert($linkedin);
$twitter: #55acee;
$twitter-invert: findColorInvert($twitter);
$github: #333;
$github-invert: findColorInvert($github);
// 5. Add new color variables to the color map.
@import "~bulma/sass/utilities/derived-variables.sass";
$addColors: ( "twitter":($twitter, $twitter-invert), "linkedin": ($linkedin, $linkedin-invert), "github": ($github, $github-invert));
$colors: map-merge($colors, $addColors);
// 6. Import the rest of Bulma
$variable-columns: false;
@import "~bulma/bulma";

(main.scssを汚くしたくないならこれを_bulma.scssにして、main.scss@import 'bulma'にする)

これでとりあえず、動くのでログインフォームを作る。

これらのコードは以下でいじっていく。
GitHub - NISHI3/nuxt-login: Nuxtの公式ドキュメントの認証ルートをいじってるもの

Web Componentsで遊んだ

先日、Web Components Cafe by Polymer Japanへ行った。

Web Components Cafe by Polymer Japan - connpass

そのときに聞いたaggreさんの発表(現場の Web Components)のコードを書いてみた

my-app.js

class MyApp extends HTMLElement {
    connectedCallback() {
        this.attachShadow({mode: 'open'})
        this.shadowRoot.innerHTML = `
            <style>
                h1 { color: blue; }
            </style>
            <main>
                <h1>Hello, world!</h1>
            </main>
        `
    }
}

window.customElements.define('my-app', MyApp)

index.html

<script async src="my-app.js"></script>
<my-app></my-app>

f:id:NISHI3:20180425224926p:plain

素直にでてなんか難しいイメージだったんですけどちょっと嬉しかった

また、ESMを使う例も

my-app1.js

export class MyApp extends HTMLElement {
    connectedCallback() {
        this.attachShadow({mode: 'open'})
        this.shadowRoot.innerHTML = `
            <style>
                h1 { color: blue; }
            </style>
            <main>
                <h1>Hello, world!</h1>
            </main>
        `
    }
}

index.html

<script type=module>
        import { MyApp } from './my-app1.js'
        window.customElements.define('my-app', MyApp)
 </script>
<my-app></my-app>

スライドにはmy-app.mjsとあったんですけどうまく行かなかったですが、.jsなら表示できた。

chromeExperimental Web Platform featuresを有効化する必要あると思ったんですけど、しなくても良くなってたんですね。
あと、Firefoxが対応しなかった(Custom Elements - Web Components | MDN)ので最初動かなくて辛かった

AngularもWeb Componentsに対応してるので遊んでみたいです!

Macの入力ソースからUSを消す方法

Macの入力ソースからUSを消す方法を紹介します。

Google 日本語入力だけを使用する際に「US」が消えないのでいらつくと思います。入力ソースからUSを消そうとしてもそのままでは消せない仕様になっています。 f:id:NISHI3:20180118161343p:plain

自分も調べたときに「ことえり」を追加したら削除できると見ましたが、いつのまにか「ことえり」が消えて、「日本語」になっていました。 f:id:NISHI3:20180118155933p:plain

「日本語」を選択して、設定の入力モードの「英字」にチェックを入れます。 f:id:NISHI3:20180118155929p:plain

こうすることで、「US」を消すことができます。 f:id:NISHI3:20180118161448p:plain

「日本語」も消します。 f:id:NISHI3:20180118161530p:plain

これでGoogle 日本語入力のみにできます。 f:id:NISHI3:20180118155923p:plain

第一回 学生セキュリティ勉強会 へ参加した

2017/9/23に第一回 学生セキュリティ勉強会へ参加しました。

student-security.connpass.com

僕自身、初心者だったのでどんなことをやるのかドキドキしました。

アキバの謎の黒いビルの中だったのでどうやって入るか迷いつつも無事にカスペルスキーの会議室へついたときは結構人がいて変な挙動をしました。(狭い空間にあんなに人いたら変なテンションになりますよね(なりますよね!!))

最初に、カスペルスキーの松岡さんに講演があり、普段あまり聞かないセキュリティ会社の人のお話でとてもためになりました。

ハンズオンは、「SQL injection」という単語が出てこないでなんだっけなんだっけって最初の方積んでいたり、XSS実践では、nameにScriptタグを入れて遊んでる中、なんか面白いのないかなってJanetterのあれを入れたりして遊びました。(Twitterに乗せてしまったので、もしやってしまった人がいたらすいません)

懇親会では、ピザとLTがあり、シェル芸のLTはとてもYABAIと思いました。

次も機会があったら参加したいです。

ionicとReact Native

(先に書いときますが、これは個人的に使った感想を簡単に書いてるだけです)

どちらも触ってみてどちらも特徴がしっかり分かれていました。

エミュレータ必須のReact Native(以後RN)はスペックがとても必要であり、ある程度スペックがないとMacが重くなり、作業へ影響がありました。ですが、起動時の安定性は高いです。

ここまで、RNについて言っていたので、次はionicについて (ここで言うIonicはv2の時のです)

IonicはAngularベースで書かかれていると言ってもなんか中身はまるっきり違っている感じで、RNと違ってWebブラウザで開発できるのでWindowsでも環境を整えると簡単に作るとこができます。 しかし、実機でするときは少し変な挙動などが見られました。あとは、リリースするときいろいろいじらないと重たいです。

以上どちらもいいですが、用途によって使い分けられるんでやってみるのも面白いです。

#ng_japan 2017へ参加しました

本日(2017/6/17)、ng-japan 2017に参加しました。
会場は、日本マイクロソフト品川本社でした

いや~どれも聞いてて楽しく、有益な情報ばかりでした

見たセッションと感想

  • Keynote -Stephen Fluin (Angular Core Team)
    資料 -> 2017-06-17 - How to Think About Angular - Speaking Engagement - Google スライド
    実際に英語のスピーチを前で聞くことがないので大丈夫かなと思いましたが、テンションが上がりました。

  • Angularとionicで挑戦したモバイルアプリ開発 -Yasunobu Ikeda
    資料 ->AngularとElectronやIonicで挑戦した デスクトップ・モバイルアプリ開発
    Ionicのお話を聞けると聞いていったらAngular+Electronのお話も聞けてとてもよかったです!!
    特にタップの話はほんと対策の方法が"touchstart"にしたのは笑ってしまいました(同じこと思ってたので)

  • You need to know SSR -Yosuke Furukawa
    資料 ->You Need to know SSR // Speaker Deck
    SSR自体が名前をよく聞いてサーバーでレンダリングまでするようなあやふやなことしかしたらなかったのでちゃんと聞いてみようと思って聞きました。
    短い時間でしたが、SSRSEOや表示スピードに大きく影響を与えることがよくわかったり、「個人的にはパフォーマンスでは妥協したくない」がとても響きました。

  • Visual StudioVisual Studio Codeで快適開発生活(仮) -Saki Homma
    資料 ->Visual Studio Code で快適開発生活 -拡張を作って公開しよう-
    拡張の作り方や登録して公開する方法まで一通り分かったので活用していきたいです。

  • Web Payments + Credential Management API -Eiji Kitamura
    Web PaymentsもCredential Managemeny APIもどちらもとても聞いてて面白い話だったんですが、やっぱりCredential Managemeny APIがすごくてこれからいろいろ調べていきたいと思いました。(使いたい!!!)

  • Angular, Firebase, Cloud Functions for Firebase -Tomohiro Noguchi
    資料 ->ng-japan 2017 - Google スライド
    ちきさん転職おめでとうございます! 僕がFirebaseを使い始めるときからずっと見かけていた人でなんどか話とかも聞いてたので今回もどんな話なのかとても楽しみで、予想通りとてもためになり楽しかったです demoを使って実際にみんなで使えたりと体験もよかったですし、所々笑えることが入ってたりよかったです!

  • webrtc + Firebase + Angular でのリアクティブweb app開発 -Yuta Moriyama
    ディスカッションのシステムで容量を減らすために静止画にしてFirebaseのstorageに投げるやつはいいと思ったので活用していきたいと思いました。AngularでWebRTCはやったことがあったんですが挫折しているので僕も再挑戦したいです!

最後の2つはあまり覚えてないので割愛します。(疲れてて少し寝てしまったので)

最後に、参加できてとてもよかったので来年もあったら参加したいです!!!!

(時間ができたらもう少し整えます)

WebRTCでビデオチャット(Firebaseを添えて①)

WebRTCでビデオチャットを作成しました
最初は普通のシグナリングでやろうと思いましたが、サーバーを立てる気もないし時間もないので、WebサーバーはGitHub Pagesを使い、シグナリングサーバーを使う代わりにFirebaseを使用しました。
半分以上はWebRTCハンズオンとがねこまさしさんのFirebaseで楽々シグナリングからコードをコピペでしてますが、それに少し少し変えてます。

今回は、Firebase周りのすることだけです。(タイトルでできる感じに見えますがすいません)

サイト

f:id:NISHI3:20170520122600p:plain BootStrapを使用してまあまあ見やすいと思うサイトにしました(なにをしてるかわかりませんよね)

シグナリングサーバー

シグナリングにはsocket.ioやWebSocketを使用します。あとは、手動でシグナリングを行うこともできますが、一般的にはWebSocketが多く使われます。
また、ローカルで開発/使用するときはセキュアでなくてもいいですが、外部へ公開するときやhttps://~から取得されたHTML/JavaScriptからWebSocketサーバーに接続する場合は、セキュアでなくてはならないので証明書が必要になります。そこで今回はFirebaseのRealtime Databaseを使用して、シグナリングを行います。

Firebaseでシグナリング

Firebaseへログインして、プロジェクトを作成しておいてください。

ブラウザでFirebaseを使用するために、ライブラリを読み込みます。前は数個入れなければならなかったですが、現在は下のjsファイルを読み込めば使えます。

<script src="https://www.gstatic.com/firebasejs/4.0.0/firebase.js"></script>

次に、取得した情報を入れてます。

var config = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: ""
  };
  firebase.initializeApp(config);

(たぶん、apiKeyとdatabaseURLだけでいいと思います)

Databaseの構造

Firebaseの構造は、がねこまさしさんのやつを見たほうが早いです!

  • myAppRoot -> アプリのルート
    • multi -> ルート
      • room_*** -> ルームのルート
        • join -> メンバーの振り出し用
        • _broadcast -> ルーム内のブロードキャスト用
        • direct -> 特定メンバー宛てのメッセージ用 自分もはっきりわかってないので実際にやって見てほしいです(たぶん別の記事で書きます)

Firebaseのルール設定

これを忘れることが多分多いと思います(自分も忘れて1週間近くできね〜ってなったので)

{
  "rules": {
    ".read": "auth !=null",
    ".write": "auth !=null",
    "yourAppRoot": {
      "multi": {
        ".read": true,
        ".write": true
      }
    }
  }
}

次回

たぶん、WebRTCでビデオチャット(Firebaseを添えて②)なのでちゃんとビデオチャットをやる予定です(でも、webRTCでのビデオチャットのやり方を書いてなかったのでそれを挟むと思います)