GAミント至上主義

Web Monomaniacal Developer.

2018-01-01から1年間の記事一覧

Docker + Google Cloud Buildを使ってCIしようとしてる

これまでLinuxの開発サーバー上のシェルコマンドでDockerのビルドやイメージのプッシュ、GKEへのデプロイをしていたけど、先日のGitHub Actionsの発表など世の中CI/CDが当たり前になっているので、DockerとGCPでできる範囲でやってみる。 Cloud Buildについ…

Firebase Functionsのデプロイ時にHTTP Error: 400, The request has errorsで失敗する

Firebase FunctionsをデプロイするときにHTTP Error: 400が出て少しハマった。 ? functions: Finished running predeploy script. i functions: ensuring necessary APIs are enabled... ? functions: all necessary APIs are enabled i functions: preparin…

Dockerで動かしたHeadless ChromeでPDFにすると日本語が化ける問題

yagish履歴書でも使っている下記のPDF変換サーバーだけど、日本語の下記のような文字がPDFにすると全部□に化けてしまっていました。 〜◯◎■□◆◇❏★☆ユーザーが使いそうなのだけ上げたので他にもありそう。github.comもちろん日本語フォントはインストールされて…

Vue Router&Firebaseの認証付きページでログアウト後に任意のページに飛ばそうと思ったらハマった話

Vue RouterとFirebase Authenticationで認証が必要なページを作っていたが、ログアウト後に任意のページに飛ばそうと思ってもうまく行かなかった。 いろいろ試したけど、イベントリスナーonAuthStateChangedを多重登録しないよう事前にUnsubscribeしたら大丈…

Vue.jsからGTMを使ってGAのイベントを送る

ブログタイトルのGAはGoogle Analytics(以下GA)ではないですが、Google Tag Manager(以下GTM)でGAを読み込んでいる場合、独自イベントの送信がちょっと面倒です。下記のようなVueプラグインもあるけど、Vue.jsの環境はVue CLI 3で、GTMのタグはindex.htm…

GCP HTTPSロードバランサーにGoogleマネージドSSL証明書(β)を使う

βリリースされていることに今更気づきました。 GAEやFirebase HostingでもマネージドSSL証明書は追加されていたのでやっと来たという感じです。ドキュメントはまだ英語のみ? Creating and Using SSL Certificates | Load Balancing | Google Cloud これまで…

【解決】puppeteerを1.10にするとPDFの日本語が文字化けする問題

2018/11/13 追記 結論 Chromium 72.0.3606.0(Developer Build)を使ったところ直ったので、次のバージョン(1.11)では直るはず。 そのため1.10をスキップするだけで問題は解決しそう。追記ここまで yagish履歴書のHTML→PDF変換で使っているpuppeteerのバージ…

Vueのテンプレートのv-bind内でもJavaScriptのテンプレートリテラルが使えた

v-bind: (省略形は:)内で文字列を連結したいときはこれまで+でがんばってつっくけてたけど、テンプレートリテラルを使えることに気づいた。環境はVue CLI 3。developer.mozilla.orgbefore <img :src="img" :alt='format.title + "テンプレート" + index'>after <img :src="img" :alt='`${format.title}テンプレート ${index}`'></li>${}の分は増えるけど、クオーテーションを閉じたり、開いたり…

Firebase FunctionsでFirebase Authenticationの認証情報を使う

ユーザー側からFirebase Functionsの関数を実行する際、そのユーザーの認証情報を使って処理をしたい。 たとえば、決済とかで。最近はAmazon Primeビデオでエウレカセブンを見直してます。最初HTTPリクエストにトークンなどをつけて、firebase-adminを使って…

Vue CLI 3のindex.htmlでif文を使い本番環境とその他で出し分けする

Vue CLI 3でのindex.htmlはVueのテンプレートシンタックスは使えませんが、webpackのものは使えます。アニメのからくりサーカスでしろがねが林原めぐみでびっくりしましたが文句なしのクオリティでした。主に使うのは環境変数になると思いますが、下記のよう…

7行から始めるVue.jsプラグイン開発

Vue.jsでは、The Progressive JavaScript Frameworkを掲げる通り、コアは小さく、拡張しやすいように作られています。今期アニメではゴブリンスレイヤーとスライムでゴブリンの違いを楽しんでます。そのため独自の機能が必要になった場合、自分でプラグイン…

ぼくが考えた最強のFirebase Functionsのファイル構成を考えてる途中

まだ全然最強感がないけど、やり始めたら1日過ぎたのでまとめる。 % tree -L 2 -I node_modules functions functions ├── index.js # メインのやつ ├── package-lock.json ├── package.json ├── src │ ├── blog-rss-to-json.js # 呼び出すやつ │ ├── globals…

Puppeteerでエラー"The previous printing job hasn't finished at Promise "

yagish履歴書で使っているhcep-pdf-serverでエラーが出ていたので調査。 Error: Protocol error (Page.printToPDF): The previous printing job hasn't finished at Promise 現在はGKEで動かしていて、このような制御できないエラーが出た場合はプロセスを終…

Firebase Functionsで関数ごとにファイルを分割し高速化とメンテナンス性向上も目指す

Firebase Functionsでは、基本的にはindex.jsにすべての関数を書くことになるので、数が増えるといろいろつらくなってきますが、2018秋アニメはAmazonでSAO新作とゴブリンスレイヤーを見ています。ファイル分割については、ググればこんな感じのが見つかりま…

Firestoreのパス管理に悩む

FirestoreとFilestoreはぱっと見違いが分からないですが、Firestoreでアプリケーションを作っていてデータが増えてくるとドキュメントとコレクションのパスの管理に困ります。yagish履歴書では、ユーザーごとに/userdir/{ユーザーID}/というドキュメントを作…

Google Pixelbookでdockerを動かす

Linuxを入れた前回に引き続き。機種はこれGoogle Pixelbook (i5, 8 GB RAM, 128GB) [並行輸入]出版社/メーカー: Googleメディア: Personal Computersこの商品を含むブログを見るdocker公式通り行くと下記エラーで止まる $ sudo docker run python:3.7 docker…

Google Pixelbookが届いたので早速公式サポートのLinuxを動かす

ずっと欲しかったPixelbookを毎月やってるAmazonタイムセールのタイミングで買いました。 SSD128GBでお値段10万ちょっと。 開発メインだけど、なるべくクラウド使うので128GBで十分かなと思ったけど、node_modulesが容量は怖い。今年中に新機種が出るっぽい…

new Date()のミリ秒対応はブラウザによって違う

ギャラクシーエンジェルのメンバーが幼児化するのは3期14話の激辛お子様ランチですが、JavaScriptでその日の終わりをなるべく厳密に指定しようとミリ秒を指定してnew Date()したとき、動くブラウザと動かないブラウザがあってバグった。 new Date()でミリ秒…

続vue-router + Firebaseで404ページをちゃんとやる方法を考える

夏アニメが終わってしまい気持ちが落ち込む季節。以前の記事で、Firebaseで使われる404.htmlにリダイレクトして満足していたが、404.htmlへのアクセスはFirebase Hostingはステータスコード200を返してしまい、Googleにインデックスされてしまっていた。uyam…

Vue CLI 3でビルド時に古いファイルを消さずにとっておく

沢城みゆきといえばギャラクシーエンジェルのミントの声優ですが、ServiceWorkerを使ったPWAを運用していると、強力なキャッシュに困ります。ServiceWorkerのライフサイクルは通常のページとは違い、普通の再読み込みでは更新されないこともあったりと複雑で…

Google Hangouts ChatでAPIからスレッドを指定して書き込む

以前のこの記事の続き。チャットから返信できるようになったけど、ユーザーの書き込みが毎回新スレッドになるため、同一ユーザーの書き込みは同じスレッドにしたかった。uyamazak.hatenablog.com要約としては、書き込み成功のレスポンスにthread.nameが入っ…

Headless Chromeを使ったPDF変換サーバーがエラーで止まってしまったので調査

yagishで使っているPDF変換サーバーが落ちてしまったので、エラーログを確認して対策を考える。 復旧は再起動だけでひとまず完了。比較的アクセスの少ない朝4時から10時ぐらいまでの営業日だったのが幸い。昼間や連休中だったら大変だった。Stackdriverで周…

Firestore + Cloud Functions + Hangouts Chatで簡易メッセージフォームを作る

yagish履歴書で、お問合せ用にGoogleフォームは設置しているけど、もっと気軽な問合せフォームみたいのを作りたい。でも、メールで送るのも、受け取るのもちょっと面倒なので、チャットに来ればいいやと考えた。Slackも使っているけど、会社でG Suiteを使っ…

5000兆円欲しい!.cssをHeadless Chrome+Google App Engineを使いサーバーで画像化する

Headless Chromeの登場で、HTML+CSSのPDF化だけでなく、画像化においてもWEB系開発者にとっては最強の手段となった気がする。 やりたいこと この5000兆円欲しい!の装飾で動的にテキストを画像化したい。こんな素敵なCSSを公開してくれたVoQnさんに感謝と畏…

Webサービスの作り方(ふくろうの描き方)

勢いで作ってしまったけど、おおむねこれで合ってる気がするyagish履歴書の経験を元にWebサービスの作り方を1枚にまとめました pic.twitter.com/RljudgAtx3— uyamazak (@uyamazak) September 11, 2018 元ネタ:ふくろうの描き方 - Google 検索

Ubuntu再起動後dockerが使用できないとき

UbuntuのLinuxサーバーを再起動後、Docker自体が起動していないのことがよくあるのでメモ。 sudo docker run foo sudo /etc/init.d/docker startなどが反応しない。なぜかip aでdockerのネットワークが存在しないので network-manager再起動 sudo service ne…

mochaとsupertestを使ってexpressとHeadless Chromeを使ったアプリのテストを書く

Headless Chrome(以下HC)を使ったPDFサーバーのテストを書いた。github.com HCが別プロセスのため非同期処理などではまり面倒だったため、外からHTTPリクエストを投げるテストにした。結合テスト? だいぶ雑だけど今まで手でたたいていたのに比べれば効率…

Vue.js + Reactもくもく会@東銀座#43に参加8/21 Vueのデザインフレームワーク調査

個人開発のため、もくもく会を探していたところ、超近所でぴったりなテーマがあったので参加。medpeer.connpass.com やること Ubuntuが入った古いレッツノートにVue.jsの開発環境構築個人開発用のVueのUIフレームワークを選定する 以下作業中のメモ Ubuntu18…

ヘッドレスChromeを使ったPDF変換サーバーをGoogle App Engineに対応させた

yagishでも使っているHeadless Chromeを使ったHTML→PDF変換サーバーhcep-pdf-server。github.com これまでDockerコンテナだけだったけど、Google App Engineでも同一コードで動くようにいろいろ変えた。 まだ実運用はしてないのでベータ版。 現在テストで使…

Google App Engine Node.js Standard EnvironmentでPuppeteerを使ったPDF変換サーバーを動かす

yagish履歴書でも裏で使っているHTML→PDFの変換サーバー。 GitHubでも公開してます。 github.comこれがGoogle App Engineでも動きそうなので試してみた。 さすがにChromeはインストールできないのでPuppeteer付属のChroniumを使う点と、日本語フォントでちょ…