Google I/O 2019 フロントエンドまとめ

Web 新プロダクト / 新技術

  • web.dev というサイト
    • https://web.dev
    • フレームワーク、パフォーマンス、Web各種技術など載っているグーグルが作ったまとめサイト
    • 全部無料で学べる
    • 今フレームワークはReact.jsだけけど、今後追加予定
    • 実践 Codelab、その場で試すことはできます
    • 翻訳は今進行中らしい
  • Lighthouse Performance Budgets
  • PWA Desktop
    • PWA 今デスクトップOSにインストールできます
  • Trusted Web Activity
    • https://developers.google.com/web/updates/2019/02/using-twa
    • Chrome Custom Tab のアップグレード版、タイトルバーがない
    • よく見られるユースケースは、現存のアプリの中で、ファミリーアプリのウェブ版を入れて、ネイテイブ感を作る
    • ウェブページにはschema urlでアプリにメッセージ送れます
    • アプリは URL の後ろにパラメータ付けるならウェブページにメッセージ送れます
  • Perception Toolkit
    • https://web.dev/perception-toolkit
    • Shape Detection APIを使ってるツールキット
    • バーコード、実物、画像を取得してウェブサイトのmetaから取った情報と比較して、関連カードを出す
    • APIまだ使えないブラウザにWeb Assemblyを使う、互換性を保つ
  • Puppeteer with Firefox
    • Firefoxが使えるようになりました
    • npm i puppeteer-firefox

Synology NASに自宅で録画サーバーを立てました

なぜNASに

NASを持ってる方多いと思いますし、NASは24時間起動してるので、新しいデバイス買わなく節電できて録画サービスを任せろう。

使うもの

  • Synology NAS 一台
    • アンテナを接続してリコードする
    • DockerとVirtual Machine Manager対応機種 (機種一覧
  • PLEX USB地上波アンテナ PX-S1UD V2.0
    • 初心者に優しい地デジアンテナ
    • 高くない、4530円
    • 1チャンネルのみの視聴、録画が可能、買い足して同時受信チャンネルが増やせる
    • 買う
  • SCM IC读卡器
    • B-CASカードの読み取り用、1000円ぐらい
    • 買う
    • 型番は同じではないかも、SCMじゃないやつ届けられたら自己調整必要
    • SoftCASも使えるらしいが、私は使わない
  • HDD
    • 録画した映像保存用
  • B-CAS カード
    • テストはテレビから借りるのはいいと思います
    • アマゾンにも誰が売ってるらしいが、自己責任でお願いします
  • アンテナ分波器 / 分配器 、接続線
    • TVと同時視聴するため。必須ではない。

バディ・コンプレックス 聖地巡礼

GWなか好きな絵描きさんが渡瀬青葉を描きましたので、一年前見放したバディ・コンプレックスをまた見ていて、意外といい作品と思っています。
全部見ました昨日聖地巡礼しました。

1話ラストで未来へ行ってしまって以来、完結編の最後に至っても2014年の東京、千葉の景色が再度登場することはありませんでした
なお本作品の舞台には高校や閑静な住宅街を含みます。もし訪問される際は現地の方へ最大限配慮して行動されるようお願いしたく思います。

千葉県習志野市

通学路のカーブ
通学路のカーブ

通学路のカーブ

津田沼サイクルなくなった、リニューアル中みたいです、グーグルマップによる去年まだあるらしい、残念


ツイッターの Account Activity API 使ってみた

前日ツイッターのAccount Activity APIを使ってみました、この API が一つ webhook 登録が可能です、アカウントのリアル活動(ツィート、通知、設定)を受信します。

以下のものが含まれます:

  • ツィート
  • at 通知
  • リプライ
  • リツイート
  • 引用リツイート
  • いいね
  • ダイレクトメッセージとその受信
  • フォロー
  • ブロック
  • ミュート

使う時実際起こった問題を書きました。

Vue + TypeScript 早期体験

Vue.version < 2.5 && Vue.version >= 2.2 適用される

公式ドキュメントによるやり方

Vue 2.2 から、Vue にいろんな公式型宣言を提供しており、さっそく、単一ファイルコンポーネントに TypeScript を試してみましょう。

webpack rules に ts-loader 相関を添付しましょう

こっちは webpack2

1
2
3
4
5
6
7
8
9
10
11
module: {
rules: [
+ {
+ test: /\.ts$/,
+ exclude: /node_modules|vue\/src/,
+ loader: 'ts-loader',
+ options: {
+ appendTsSuffixTo: [/\.vue$/]
+ }
+ },
...

いくつのユーザー状態の記録方法

Cookie

昔のやり方は、Cookie に直接保存する。サーバーストレージはまだそんな安いの状況下で、たくさんのウェブサイトはユーザーの登録そういうインフォメーションを変化してサインして Cookie に保存する。

変化やサインは、md5+salt、または secret を使って双方向の暗号化するとかの方法。

ウェブサイトに二回アクセスとしたら、Cookieに指定のkeyのvalueを検証する、それはただしかどうか。

日本語ブログ始動

こんにちわ、はじめまして、こちらは xingo さんの日本語ブログ!

日本語まだ下手です、どうぞ、お気軽いに指導します、よろしくお願いします!

さて、このブログですが、まずはどのようなものかご説明したいと思います。

  • xingo さんの技術相関
  • xingo さんの作品
  • xingo さんの日常生活
  • xingo さんの旅行

このような感じで本番までお付き合いいただけたら幸いです

では、また次回