fishのforでコマンドを使う

• fish

$ for val in ([コマンド])
       echo $val
  end

• bash

$ for val in `[コマンド]`; 
       do echo ${val};
   done;

ng-japan 2019 へ行きました

一昨年も去年も行き、今年もまたng-japan 2019に参加しました。 会場は、去年と同じ六本木ヒルズのGoogle Japanオフィスでした。

今年のng-japanはセッションの半数が英語で行われ、聞き取るので大変でした。OpenAreaでのMeetupでは普段さわらないGrapthQLやAWS AmplifyとAngularを用いたサーバーレスアプリの開発体験をやり、思ったよりかんたんにGrapthQLを組み込めることが知れたので良かったです。

気になったセッションはKeynoteで、Angularのコミュニティの成長状況やCollaboratorを増やしていることやAngularのアップデートがバージョンを上げるごとに要する時間が減っている点、Angular8の変更点、Ivyやbazelの対応についてなど、これからが楽しくなりそうな内容でした。

他には、榊原さんの「CapacitorをつかってAngularアプリの可能性を広げよう」やkawakami0717さんの「Angularでメトロノームを作った話と、 Angular + pixi JSでメトロノームにオープニングをつけた話」がありました。

almirajさんの「First step to Mobile x Angular @ the begining of 2019」では、ionicとOnsenUIを比較して、どちらにもいい点がありつつ、私は普段ionicを使っているので、違う人がどのようにして選んでいるのかあまり知ることがなかったので、聞いててなるほどなということが多かったです。

今回のng-japanも今までのと同じく「まだまだ楽しいことが多いな」と思えたので、Angularをもっと触っていきたいです。(あと、英語をもっと勉強しないと...)

Xiomi Mi In-Ear Headphones Pro HDを買った

ココ一年くらいAirPodsを使っていましたが、知り合いからMi In-Ear Headphones Pro HDを入手できたのでちょっと書きます

コスト

amazonでは3000~から出ていましたが、あっちで買えば2500円くらいと値段は低価格帯でした。 最近の低価格帯のイヤホンをそこまで知りませんが、XS/S/Lの替えイヤピースが付属してます。

音質

1BA+2DDなので、噂に聞く低音が強い感じだと思ったら、思ったより高音がよく伸びている感じでした。
エージングを全然やっていない状態なので、だいぶやってみたら変わるかもしれません。
低音がおもったより出ていなかったりしたので、人によっては微妙だと思います。

その他

音漏れは少ししますが、音量を調整すればまあどうにかなるレベル
ケーブルはやわらかく、絡まりにくいです。
中華イヤホンですが、デザインもいいのでしっかり作れらています。

HTML5 Conference 2018 へ参加しました

HTML5 Conference 2018へ参加しました。 当日は朝寝坊して基調講演途中からの参加でしたが、最後の最後まで充実したカンファレンスでした！

html5j.connpass.com

持続可能なプロダクト開発のために - フロントエンドと新陳代謝の話 【potato4d】

---

最初のセッションはココに行きました。
自分が経験した開発で思うところが結構刺さってきて辛かったですが、改善点がわ買ったような気がします。
あと、potato4dさんが同い年なのにすげーと思いました。

FIDO認証によるパスワードレスログイン実装入門 【合路健人】

---

部屋が移動していてそれを知らずに行ったため、満席立ち見で見ました。
生体認証をWebでも使えるのは知っていましたが、具体的な実装方法やどんな感じで動くのか知らなかったので聞けてよかったです。
FIDO認証によって記憶だよりの方法よりFIDO認証を使ったほうが扱いやすいと思いました。

TechFeedのつくりかた 2018 【白石俊平】

---

いつも見ているTechFeedも、もう2年位たっていたことに驚きました。
自分もIonicを用いてアプリを作るので、2年も開発保守の話を聞くのはとても楽しかったです。また、バックエンドもTSを使っている知見で出てきたnestJSをやってようと思いました。

コンパイルターゲット言語としてのWebAssembly、そしてLINEでの実践

---

最初全然わかりませんでしたが、言語を作る上で必要な作業がわかった気がしました。

HTTP の今と未来 ー BBR, HTTP/2, QUIC の基礎から 5G 試験ネットワークでのブラウザベース評価試験まで

---

始まる前の準備時間から話が始まり、時間が過ぎても話し続けていて、とても濃い講演でした。
話題のQUICの情報や、5G試験の結果があまり触れない分野でしたがわかりやすく説明を聞けたのでとてもためになりました。
「ネットワーク技術の変化をしらないWeb技術者やばい」が刺さったので、もっと知っていく必要があるなと感じました。

HTTP and 5G (fixed1) from dynamis

www.slideshare.net

#ng-japan 2018へ行きました

去年も行き、今年もまたng-japan 2018へ行きました。
会場は、六本木ヒルズのGoogle Japanでした。

ココ最近Angularの情報を見ていなかったり、使っていなかったので、前日に動かしたりリファレンスを読んだりして半年ぶんくらいの情報を一気に漁りました。
(Web Componentsを少しやったときにAngularElementを触ったことくらいしかココ最近触っていなかったので、いっぱい来ていて若干辛かった)

Ivyについてもそこまで知らなかったので、これが来たらもっとWebComponentsやAngularの実装が楽しくなり、またビルドがコンポーネント単位で行われるとかは特に楽しみだなと思いました。
Angular CDKも充実してきているので、試しに帰ってから触ってみてこんな実装しているんだなと見ていた面白かったです。
あと、PWAのお話を聞けてこれから作るWebアプリに組み込んでみたいので、手始めに今やってるものにこっそり仕込んでみようかなと思ったりしてます。
(ng-japanのサイトもPWA対応で会場で見るときに便利でした。

去年も同じことを言いましたが、来年もあったらぜひ参加したいです!!

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>

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

また、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なら表示できた。

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

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