masalibの日記

システム開発、運用と猫の写真ブログです

モンスト:「るろうに剣心」のコラボガチャ40連

漫画もアニメもどちらも好きです。
f:id:masalib:20180817183839j:plain
剣心とかかっこいいwwじゃないですか~
モンストの中の人の「さしみさん」ほどではないけど
あのギャップは詐欺だよ
ということで40連回しました!!

続きを読む

「Puppeteer Recorder」を試してみた

PuppeteerはSeleniumIDEのような動作を記録してくれるがなかった。2018/08/17のはてなブックマークに「Puppeteer Recorder」という拡張機能があったので試してみた

前提

Puppeteerとは

ヘッドレスブラウザをコントロールするツールです。 Google先生Chromeのチームが開発しているツールなので安心です
github.com

Puppeteer Recorderとは

Chromeでおこなった行動を記録してPuppeteerのコードにおきかえてくれるChrome拡張機能です

chrome.google.com

テスト結果

入門的な所をやってみた

googleの検索

f:id:masalib:20180817104852g:plain

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto('https://www.google.com/')
  await page.click('#lst-ib')

  await browser.close()
})()

検索ワードのイベントが消える?なぜだ?

githubのログイン

f:id:masalib:20180817105020g:plain

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto('https://github.com/login')
  await page.click('#login_field')
  await page.click('#password')
  await page.click('.btn')

  await browser.close()
})()

入力イベントが取れない・・・・

何回かやったらとれた

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto('https://github.com/login')
  await page.click('#login_field')
  await page.type('#login_field', 'masalib@gmail.com')
  await page.type('#password', 'PasswordEntryHidden')
  await page.click('#password')
  await page.click('.btn')

  await browser.close()
})()

とれる時ととれないパターンの違いがまだ把握できていない

感想

  • まだ不安定な所はあるけど、タグの要素を調べるが少し楽になるかと思う
  • 私だけかもしれないがシークレットモードが動かないので動くようにしてほしい
  • 自動入力をオフにして記録したほうがいいのかも

ReactとExpressとGraphQLの開発環境をつくるなら「React Starter Kit」が最強

社内の勉強会でReactを勉強しています
GraphQLの所ではまってしまい、また1から勉強することにしました

以前の記事でreactとexpressとつなぐとという事をやったのですが

masalib.hatenablog.com

超絶、無駄でした
今どきは一発でつくれるそうです
yarnが入っていない人はyarnをインストールしてください

github.com

昔からあるみたいなのですがGraphQLに対応してくれた所が素敵すぎwww

インストール

$ git clone -o react-starter-kit -b master --single-branch https://github.com/kriasoft/react-starter-kit.git MyApp
$ cd MyApp
$ yarn install
$ yarn start

f:id:masalib:20180817024614j:plain

これだけでReactとExpressとGraphQLの開発環境ができます

ディレクトリ構成

├── /build/                     # The folder for compiled output
├── /docs/                      # Documentation files for the project
├── /node_modules/              # 3rd-party libraries and utilities
├── /public/                    # Static files which are copied into the /build/public folder
├── /src/                       # The source code of the application
│   ├── /components/            # React components
│   ├── /data/                  # GraphQL server schema and data models
│   ├── /routes/                # Page/screen components along with the routing information
│   ├── /client.js              # Client-side startup script
│   ├── /config.js              # Global application settings
│   ├── /server.js              # Server-side startup script
│   └── ...                     # Other core framework modules
├── /test/                      # Unit and end-to-end tests
├── /tools/                     # Build automation scripts and utilities
│   ├── /lib/                   # Library for utility snippets
│   ├── /build.js               # Builds the project from source to output (build) folder
│   ├── /bundle.js              # Bundles the web resources into package(s) through Webpack
│   ├── /clean.js               # Cleans up the output (build) folder
│   ├── /copy.js                # Copies static files to output (build) folder
│   ├── /deploy.js              # Deploys your web application
│   ├── /postcss.config.js      # Configuration for transforming styles with PostCSS plugins
│   ├── /run.js                 # Helper function for running build automation tasks
│   ├── /runServer.js           # Launches (or restarts) Node.js server
│   ├── /start.js               # Launches the development web server with "live reload"
│   └── /webpack.config.js      # Configurations for client-side and server-side bundles
├── Dockerfile                  # Commands for building a Docker image for production
├── package.json                # The list of 3rd party libraries and utilities
└── yarn.lock                   # Fixed versions of all the dependencies

公式より引用

長所

  • 迷わずに1発で開発環境がつくれること
  • package.jsonが1ファイル
  • herokuのアップを意識したコマンドが用意されている

短所

残念なのはReduxなどのstate系のライブラリーが入っていません。
チュートリアルにも書いてあるのですがそちらは自力でインストールする必要があります。
100%使うののでこの部分も自動化してほしかった。
ブランチはあるのでそっちからインストールすればできるみたい(未確認)

今後

スターの数も1万8000あるので、今後もgitリポジトリは更新されると思うのでチェックしていきたい

「自衛隊の歌姫」に感激した

お恥ずかしいのですが、虎ノ門ニュースで 「自衛隊の歌姫」という存在をしりました f:id:masalib:20180815190042p:plain 調べてみて聞いてみるとマジうまい・・・

自衛隊 歌姫」でググればでるのでぜひ聞いてほしいです

鶫 真衣さん

www.youtube.com

www.youtube.com

I Believe

I Believe

  • 陸上自衛隊中部方面音楽隊, 鶫 真衣 & 柴田昌宜
  • クラシック・クロスオーバー
  • ¥250

ひまわりの約束

ひまわりの約束

  • 陸上自衛隊中部方面音楽隊, 鶫 真衣 & 柴田昌宜
  • クラシック・クロスオーバー
  • ¥250

三宅由佳莉さん

www.youtube.com

www.youtube.com

男性の方もうまいwww 低い声がかっこいいww CDもあるみたい・・・

Let It Go ~ありのままで~

Let It Go ~ありのままで~

Let It Go ~ありのままで~

Let It Go ~ありのままで~

感想

この頃のアイドルは歌に心がこもっていない これこそ歌姫!!と思った。 この人たちこそ、オリンピックで開会式で歌ってほしい。 ニコニコ超会議にでるらしいので、このためなら行ってみたい

詳しいブログはこちら
retcapt1501.hatenablog.com

PWA:Workboxでサービスワーカー導入編

f:id:masalib:20180810173837p:plain

PWAについて調べたり、実際に写経した時の自分用のメモです
サービスワーカーの概要は過去記事を参考にしてください

masalib.hatenablog.com

google先生のライブラリーのWorkboxを使って導入しました
はっきりいってPWAをおこなうならこのWorkboxしかないと思う

続きを読む

PWA:サービスワーカー導入編

f:id:masalib:20180810173837p:plain

自分用のメモですが何かの参考になれば幸いです。
参考動画を引用しているのが多々あります。 サービスワーカーの概要は過去記事を参考にしてください

masalib.hatenablog.com

サンプルソースをもとにライブラリーなしで導入する記事です。

続きを読む