GAミント至上主義

コストにうるさいWEBアプリ開発者。最近はPython, Vue.js, Kubernetesがメイン@株式会社ビズオーシャン。https://github.com/uyamazak/

Google Cloud FunctionsにPython3.7が追加されてる件

今日Cloud FunctionsってNodeのバージョン選べるっけと思ってみたら、Python3.7があることに気づく。package.jsonの代わりにrequirements.txtがありpipのパッケージを指定できるっぽい。Nodeは6系と古いままのにPythonは6月ごろに出たばっかの最新の3.7とこ…

ブログのRSSをCloud Functionsを使ってJSONに変換してajaxで使う

yagish履歴書で今後のアップデートのお知らせ用にはてなブログProを利用しようと考えている。rirekisho.yagish.jp (関係ないけどはてブ800超えてうれしい)もちろんRSSがあるので、これをVue.jsアプリ内で読み込んでもいい。 でも、RSSとかXMLとかを扱うと…

yagish履歴書がはてブ(IT)1位でうれしい

rirekisho.yagish.jpリリース出したのは7/11だけど、なぜか今朝になっていつも見てるはてブ上位にいた うれしいファビコンがルートに置いてないせいか出てないから直そう 2018/7/12 12:43追記 テクノロジー1位やったー この記事のタイトルも変えたなんでこん…

Vue.jsのPWAでLighthouse100点を目指したがPerformance77点で挫折した

WEB上だと空のプロジェクトとかでLighthouseの高得点を目指す記事はあるけど、実用的なPWAアプリでの情報は少ないので試したことをまとめてみる。履歴書をスマホで入力できてPDFで出せる新サービスyagish履歴書。 まだまだ改良の余地はあるけど使える状態。r…

Vue + PWAの開発環境をvue-cli + pwa plugin + yarnを使ってDocker上で構築する

uyamazak.hatenablog.com 2018年の2月ごろ、VueでPWAの履歴書作成アプリを作り始めて、もうすぐ本番公開だけど改めて調べると環境がすでに大きく変わっていた。 作ったのこれ↓ rirekisho.yagish.jp半年もたってないけどこの変化だからなるべく早く変更する準…

Vue.jsで要素の高さを使って入力値バリデーションする

現在、近日公開予定(サービス名も未定)の履歴書作成アプリをVue.jsとFirebaseでつくっている。 2018/07/12追記 公開しました rirekisho.yagish.jpその中で志望動機欄のような自由記述のテキストエリアのバリデーションがなんとかできたのでメモ。こんな感…

FirestoreでDateを保存すると数字になったり独自のTimestampになって困った

Firestoreはjavascriptのデータをだいたいそのままぶち込んで保存ができるので便利。だけど、Dateを保存していると、数字型(1528444872883みたいな)や独自の下記Timestamp型になって、読み込み時にエラーになって困った。Timestamp | Firebaseこのキーだけ…

uyamazak自己紹介(先頭固定)

株式会社ビズオーシャンのエンジニアリング部で技術系リーダー。 HTML+CSSからLinuxサーバー、フロントエンド、サービス企画、運用まで新規サービス作るマン。 OSはLinux(Debian系)、プログラムはPython, JavaScript, PHP, Goとシェルを少々。インフラはG…

PWAのGoogle Play登録がもうすぐできそう

Google Map GoはPWAなのにPlayに登録できてて、上のアドレスバーも表示されずに使えて、Googleずるいなぁと思っていたら、Trusted Web Activityというものを使えば、Android アプリから直でPWAを実行できるようになるらしい。アプリ側、WEB側で鍵を持つこと…

HeadlessChromeを使ったPDF変換サーバーにサイズ変更オプションを追加した

いまいち名前が気に入っていないHeadlessChrome、Express、Puppeteerを使ったPDF変換サーバーのhcep-pdf-server github.com今まではA4余白なしのみで、CSSなんとかすればいいと思ってたけど、中身が長くなり改ページされるとそのページの間が余白なしになっ…

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

Vue.js も SPAも Firebaseも初めてなので、WEB Frameworkでやるような404をどうすればできるか考えてやってみたメモ。Vue.jsは下記のPWAのテンプレートを利用し、vue routerも使っている github.com routerで指定していないパスで404を表示 これは簡単だった…

Firebase HostingからFirebase Functions を使ってGKEのアプリケーションにプロキシする

Firebase Hostingを使ったサイトで、一部のパス(/api以下等)へのリクエストを別サーバーに投げられる仕組みを考えた。別サーバーでCloud Functions(Node.js)で出来ないことをしたかった。結果として動いてしまったけどなぜこんなことしてるのか分からな…

開発用Dockerコンテナ内でVueアプリケーションをFirebase Hosting に1コマンドでdeployする

Vue + Webpackでの開発は社内サーバーのDockerコンテナで行っているが、ビルドしたファイルはFirebase Hositingを使って配信したくなった。どうせならfireabase CLIもホストには入れずDockerコンテナ上にインストールしてやってしまいたいと思い、やってみた…

Vue.js のmountedでaddEventListenerやsetIntervalするとき、後始末を忘れない

当たり前だけどvue routerで読み込んでいるコンポーネントのmountedでaddEventListenerやsetIntervalをしていると、ページの行き来のたびに登録されて、大変なことになる。destroyedで削除をセットにするのを忘れないようにする。removeEventListenerとclear…

GCPを使ったPWAのサーバー構成を考える

Vue.jsとwebpackといくつかの独自サーバー処理が必要なアプリをどうGCPでデプロイするかを考えた。静的ファイルとWEB API的な部分で分けて考える。 1、静的ファイル配信 Webpackでビルドしたjs、HTMLとかjs、CSS、画像とかメインになるファイルたち。選択肢…

ブラウザでログインしたFirebaseのユーザー情報をサーバー側で取得する

前回からの引き続きやりたかったのは、Vue.jsとFirebase(ブラウザ上)でログイン済みユーザーのメールアドレスに、サーバー側からメールを送りたかった。Vue.jsのPWAでバックエンドをDjangoからFirebaseに移行した - GAミント至上主義もちろん、js側でFireb…

Vue.jsのPWAでバックエンドをDjangoからFirebaseに移行した

現在開発中のVuejsを使ったPWAで、開発当初はログインやデータの保存にDjangoを使っていたけど、ずっと気になっていたFirebaseに変更してみることにした。クライアント側のコードはほぼそのまま流用し、機能も少なかったので、1日程度でとりあえず動いたとり…

Pythonのos.chdir()はスレッドセーフではないので注意

Python3+Django内でZIPファイルを生成する処理で、複数ユーザーが同時に実行すると、一人が成功し、他が失敗するよくわからない状態になり、更にまずいことに成功したユーザーのZIPには他のユーザーのファイルが入ってしまっていた。処理は下記のようになっ…

PWAのゴールはネイティブアプリ"ではない"ことを敢えて意識する

現在、bizoceanでVue.jsを使った履歴書のPWAアプリ(リリースは夏頃できたらいいなぁ)の企画、開発中や、先日下記のセミナーに出たりした思ったことをまとめておく。japan-android-group.connpass.com 今北産業 PWAの技術を使ってもネイティブアプリと全く…

ついにGCPにマネージドRedisがきたーーーー

GCPのアンケートが来るたびにRedisが欲しいと書き続けていた甲斐があったのか、ついにはじまった。 まだベータ。cloud.google.com気になる価格は一番高い1-4GBで$0.049 per GB-hr割引無しで考えると月で$0.049 * 24 * 30 = 35.28ドルたぶんUSでの値段。フル…

Vue.jsとElementで配列操作UIをつくる

現在、Vue.js 2とElementを使って、モバイル向け履歴書作成アプリを作成しているけど、学歴、職歴などでリスト要素の操作がいろいろ必要になってつくったので整理しておく。前提としてモバイル(タッチパネル)向けなので、PCではよくあるドラッグでの移動は…

Vue.js v2で親子間以外のイベントやり取り

最近はずっとVue.jsを使ってUIを開発しているけど、ページが複雑になるにつれ、どうしても親子間以外の兄弟とか、深くなったコンポーネントからとか、グローバルなイベントのやり取りが必要になってきた。発信側はthis.$emit(’foobar’, data)と、受信するコ…

Vue.jsでPWAアプリをつくりはじめた

2018/07/12追記 公開しました rirekisho.yagish.jp 2018/7/5追記 この記事で利用したテンプレートはすでにメンテナンスに入っており、今後はvue-cliのプラグイン形式になるようです。 Webpackも3から4になっているので推奨です。旧 GitHub - vuejs-templates…

Headless Chromeを使ったPDF変換サーバーをGitHubにあげた

以前から開発していたのが、だいぶ形になってきたのと、他のプロジェクトでも使っているので、共有も含めてGitHubにあげた。github.comDockerで動いて、URLを渡すとそのページをA4のPDFに変換して返してくれるシンプルなやつ。起動時にChrome本体とページを…

Headless Chrome + puppeteerを使ったHTML→PDF変換サーバーを作る puppeteer編

Headless Chromeを使ったHTML→PDF変換サーバー第3弾。前回は下記。 ヘッドレスChrome + Node.js + express + DockerでPDF生成サーバーを作る - 仕事中の問題と解決メモ。 ヘッドレスChromeを使ったHTML→PDF変換サーバーを作る 改善編 - 仕事中の問題と解決メ…

ヘッドレスChromeを使ったHTML→PDF変換サーバーを作る 改善編

以前とりあえず作ってみたサーバーが不安定なので、書き直すことにした。Dockerで動いてGETパラメータでURLを渡したらPDFが返ってくるというシンプルなもの。PDFのサイズ(現在はA4固定)等のオプションは起動時に固定してしまうので、変えられない。ローカ…

2018/1/26 Google Kubernetes Engine & Stackdriverでログが見れない問題

いつもGKEでデプロイした後は、Cloud ConsoleからStackdriverのログを眺めているけど、一向に出てこない。しばらくこちら側のログレベル設定を確認したり、kubectl logなどを見たけど正常。Twitter検索したら同じ症状の人が見つかる。gkeでstackdriverにログ…

GKE上の Django + ManifestStaticFilesStorage + Google Cloud Storage でValueError無限ループが起きてハマった話

Templyでは、Djangoのアプリが入ったDockerコンテナをGoogle Kubernetes Engine(GKE)で動かし、ファイルはGoogle Cloud Storage(GCS)で管理している。 temply.bizocean.jp本番公開してからデプロイ時にcss、jsなどの静的ファイルが更新されず困ったので…

vimのPython環境を再構築した

基本的にPythonの開発は社内のLinuxサーバー上でVimを使い行っている。Pythonを使うからには、やっぱりPEP8を守り、見た目も統一されたソースコードにしたいので、Vimに下記のプラグインを入れ、 github.comさらに.vimrcに下記を追加して保存時走るようにし…

DjangoのAdminsにメールが送られない時のチェックリスト

Djangoではsettings.pyのADMINSにメールアドレスを指定しておくと、エラー時に通知を送ってくれるので便利。でもこれまでの開発でもよくなぜか届かない問題があり、最近Templyの開発でも起きたので備忘録。temply.bizocean.jp まず、メールサーバーの設定が…