Cloud Functions for Firebaseについて調べていたら、公式のGitHubに非常に多くのサンプルがありましたので紹介します。
中には45本ものサンプルスクリプトがあるので眺めるだけで勉強になります。
2019/4/18に発表されたCloud Functions for Firebaseで定期実行できる機能のサンプルプログラムもありました。
以前、定期実行する機能はありませんでした。そのため自分はGoogle Apps Scriptsなどで代替したり、GCPと連携して実行するようにしたり、いろいろ工夫して実装している人がいました。
Cloud Functions for Firebaseの定期実行を軽く触ってみた感想ですが、そもそも料金のプランを無料から従量課金制にする必要があったりで実装の前段階でのハードルがあるような気がしました。
今回はVue.jsでCSVファイルを取り込んで、そのまま画面に表示することをしたいと思います。
今回のソースは過去のツイート情報を表示することを想定しています。
全ツイート履歴をダウンロードする方法は公式を御覧ください。
全ツイート情報は、jsファイルでダウンロードできますが、JSONに拡張子を変更しそこからCSVに変更してください。自分は目的と違うところでつまづきたくなかったので次のサービスを利用しました。
<template>
<div>
<h1>CSVインポート</h1>
<input @change="fileRead" type="file" id="file_input_expense" name="file_input_expense">
<li v-for="worker in workers" v-bind:key='worker.id'>
<a v-bind:href=worker.url target="_blank">https://twitter.com/yoshitaku_jp/status/{{ worker.id }}</a> <button v-on:click="delTweet(worker)" type="button" id="delTweet" name="delTweet">delTweet</button>
</li>
</div>
</template>
<script>
export default {
data: function() {
return {
workers: []
};
},
methods: {
fileRead: function(e) {
var _this = this;
let file = e.target.files[0];
let csv = [];
let reader = new FileReader();
reader.onload = function() {
let lines = reader.result.split("\n");
lines.forEach(element => {
let workerData = element.split(",");
let worker = {
id: workerData[8],
url: "https://twitter.com/yoshitaku_jp/status/" + workerData[8],
};
csv.push(worker);
});
_this.workers = csv;
};
reader.readAsBinaryString(file);
}
};
</script>
ソースはほぼこちらを参考にさせていただきました。 https://qiita.com/WallyNegima/items/67a16915fbd77e2e0f03 https://qiita.com/tantai/items/5cf98364efa4a80324bd
参考先では次のように書かれていましたが、自分なりに模索していたら上記のような形になりうまくいきました。少しスッキリできてよかったです。
const loadFunc = () => {
///処理
};
reader.onload = loadFunc;
これまでVue.jsでいくつかサイトを作ったりしてきました。Firebaseを組み合わせたりして手軽に実装でき、まだまだ改良すべき点はありますが非常にいい成功体験となりました。次に作るものはバックエンド含めて自分で実装してみたいと思い、今回はRailsを選んで取り組んでいます。
今回は、RailsとVue.jsの環境構築についてです。
なお、RubyとRailsはすでに導入されているものとします。 自分は次の環境で実施しました。
ruby 2.5.3 Rails 5.2.3
rails new rails_vue_todo --api --webpack=vue
rails newをして作成します。今回はオプションに--apiと--webpack=vueを使います。
--api--api をつけることで、普通にnewをするよりか少ないファイルで作成することができます。
- 利用するミドルウェアを通常よりも絞り込んでアプリケーションを起動するよう設定します。特に、ブラウザ向けアプリケーションで有用なミドルウェア（cookiesのサポートなど）を一切利用しなくなります。
- ApplicationControllerを、通常のActionController::Baseの代わりにActionController::APIから継承します。ミドルウェアと同様、Action Controllerモジュールのうち、ブラウザ向けアプリケーションでしか使われないモジュールをすべて除外します。
- ビュー、ヘルパー、アセットを生成しないようジェネレーターを設定します。
--webpack=vue--webpack=vue をつけることで、Webpackerを使う設定をいれることができます。Webpackerを使うと、JavaScriptプリプロセッサおよびwebpack を使う手間が省けるうえに、RailsでJavaScriptアプリケーションのような形で管理できます。
--webpack=vue の vueをつけることで、Yarnを使用してVueとその必要なライブラリを追加します。 サンプルコンポーネントはapp / javascriptでプロジェクトに追加されるので、すぐにVueを試すことができます。
--webpack=react にすることで、reactの設定を追加することもできます。
最後にwebpackerの導入とvueの導入をおこないます。
rails webpacker:install rails webpacker:install:vue
./bin/webpack-dev-server を実行してコンパイルをします。
Windowsの場合は、ruby ./bin/webpack-dev-server を実行します。
rails sでサーバを起動して、ブラウザで画面を確認できれば終了です。
今後は、素振りとしてTodoアプリの作成をおこなっていきます。
以前の記事でGridsomeを使う設定をおこないました。今回はCMSを導入し使う設定をおこないます。使うCMSはNetlifyCMSです。
すでに海外の方が使える設定を公開していて参考にさせてもらいました。
YOUR_DIRRECYORYE/static/adminディレクトリを作成し、配下に2つのファイルを作成します。
index.htmlとconfig.ymlです。
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Content Manager</title> </head> <body> <!-- Include the script that builds the page and powers Netlify CMS --> <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script> </body> </html>
backend:
name: github
branch: master # ブランチ名を記入します
repo: yoshitaku-jp/challenge-every-month # 自分のリポジトリを記入します
media_folder: "static/images/uploads" # YOUR_DIRRECYORYE/staticの配下に画像のアップロード先を指定します。
public_folder: "/images/uploads" # The src attribute for uploaded media will begin with /images/uploads
collections:
- name: "blog" # Used in routes, e.g., /admin/collections/blog
label: "Blog" # Used in the UI
folder: "blog" # The path to the folder where the documents are stored
create: true # Allow users to create new documents in this collection
slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
fields: # The fields for each document, usually in front matter
- {label: "Layout", name: "layout", widget: "hidden", default: "blog"}
- {label: "Title", name: "title", widget: "string"}
- {label: "Publish Date", name: "date", widget: "datetime"}
- {label: "Featured Image", name: "thumbnail", widget: "image"}
- {label: "Body", name: "body", widget: "markdown"}
次の画面が出れば成功です
git rebase でマージコミットを表示する方法
git rebase -i -p HEAD~~~と-pオプションを付けることでマージコミットは表示できます。
なんで表示されないのかわからず、詰まってしまったのでメモを書いておきます
masterブランチでコミットして、devブランチを作成しコミットし、またmasterに戻ってきてコミットをするところまでです。
mkdir sandbox-git cd sandbox-git/ git init touch master.txt git add . git commit -m "this is master" git checkout -b dev touch dev.txt git add . git commit -m "this is dev 1" git checkout master touch return-master.txt git add . git commit -m "this is return-master"
-pオプションなしdevブランチをマージして、-iオプションなしで表示してみます。
git merge dev git rebase -i HEAD~~
-pオプションありdevブランチをマージして、-iオプションありで表示してみます。
git merge dev git rebase -i -p HEAD~~
おしまい。
Cannot have a has_many :through association 'Hoge#fuga' which goes through 'Hoge#hoge_fuga' before the through association is defined.
ユーザが持っている本の一覧を中間テーブルを経由して取得したかった。 下記のコードを書いていた。
class User < ApplicationRecord
has_many :books, through: :user_books
has_many :user_books
end
Railsのバージョンが上がってから、has_many の順番が重要になったようで、順番を入れ替えたら解決した。
class User < ApplicationRecord
has_many :user_books
has_many :books, through: :user_books
end
CircleCIのManual Approval機能を触ってみました。 設定方法と注意点について記載しておきます。
公式サイトはこちら。
https://circleci.com/docs/2.0/workflows/#holding-a-workflow-for-a-manual-approval
大まかな枠組みを記述しました。
version: 2
jobs:
build:
# buildの処理
deploy:
# deployの処理
workflows:
version: 2
build_and_deploy:
jobs:
- build
- approval-deploy:
type: approval
- deploy:
requires:
- approval-deploy
type: approval を記述すると、そのjobがCicleCIの画面上で承認ボタンを押さなければならない部分になります。
承認ボタンを押すことで次に処理が進みます。
注意ですが、このtype: approvalを設定したjobsにはなにも記述しないのが正しいようです。
後続の処理には、requires: - approval-deployを記述します。requiresは、指定されたjobsが終了したら自分自身を実行する設定になります。つまりこの場合は、「approval-deployjobsが終了したら、deployjobsを実行します」という意味になります。
type: approvalとrequires: - approval-deployの2つを使うことで、承認ボタンを押さないとデプロイを実行できないフローが完成します。
CircleCI上での一連の流れのキャプチャを載せておきます。
おしまい。
Vue.js製の静的サイトジェネレーターを見つけました。Gridsomeです。 最近よく聞くReact.js製のGatsbyと似たような構成のようです。
今回はサイトを作ってから、Netlifyにpushするまでを実施してみたいと思います。
まずはnpmでインストールをおこないます。
npm install --global @gridsome/cli
次にgridsome createコマンドでプロジェクトを作成します。そして、delelopコマンドを実行し開発用サーバを立ち上げます。
gridsome create gridsome-demo cd gridsome-demo gridsome develop
http://localhost:8080をブラウザで開くと、下の画面が表示されます。
ファイルサービスを利用するために
npm install --save @gridsome/source-filesystem を実行します。
Markdownで記述するために
npm install --save @gridsome/transformer-remark を実行します。
gridsome.config.js で、先程インストールしたモジュールを有効にするため設定を変更します。
module.exports = {
transformers: {
remark: {
externalLinksTarget: '_blank',
externalLinksRel: ['nofollow', 'noopener', 'noreferrer'],
anchorClassName: 'icon icon-link',
plugins: [
]
}
},
plugins: [
{
use: '@gridsome/source-filesystem',
options: {
path: 'goal/*.md',
typeName: 'GoalPost',
route: '/goal/:year/:month/:day',
remark: {
plugins: [
]
}
}
}
]
}
gridsome.config.js のPathに書いたようにファイルを作成します。今回はgoal/post1.mdとし、中身を記述します。
--- title: はじめての内容だよ date: 2019-03-03 01:00:00 description: "はじめての内容" tags: "contents" --- はじめての内容が入るよ
src/pages/index.vueを作成します。
<template>
<Layout>
<h1>Contents</h1>
<div v-for="item in $page.allGoalPost.edges" :key="item.path" class="post">
<h2>
<g-link :to="item.node.path">{{ item.node.title }}</g-link>
</h2>
<dl>
<dt>{{ item.node.date }}</dt><dd>{{ item.node.fields.tags}}</dd>
</dl>
<p>{{ item.node.fields.description }}</p>
<div class="content" v-html="item.node.content" />
</div>
</Layout>
</template>
<page-query>
query Home ($page: Int) {
allGoalPost (page: $page) {
edges {
node {
_id
title
date (format: "YYYY年MM月DD日 HH:mm:ss")
fields {
description
tags
}
content
}
}
}
}
</page-query>
<script>
export default {}
</script>
これでURLhttp://localhost:8080/にアクセスすると下の画像が表示されます。
非常に直感的にも連携作業はできますが、公式のドキュメントを見てGitHubと連携します。
https://www.netlify.com/docs/continuous-deployment/
Netlifyで設定する際、途中でBuildコマンドを設定するタイミングがあります。 下記の値を設定しましょう。
https://gridsome.org/docs/deploy-to-netlify
サイトをデプロイしたらアクセスして確認しましょう。 無事に表示できていたら完了です。
下記は自分がデプロイしているサイトです。
https://challenge-every-month.netlify.com
月に1つLTするという年の目標を設けているので、その継続となります。
今月はLTではありませんでしたが、Laravel JP Conferenceにて、PHPテストワークショップを実施しました。
詳しくはこちら。
真冬こそ激アツの自由研究LT大会で、運営のリーダーと司会をやりました。リーダーとしては正直名ばかりだった気がしていて、周りの人に本当に助けられてばかりでした。ありがとうございました。 司会としては皆が楽しめる雰囲気を作り出そうとテンションを上げてやりきりました。司会良かったと嬉しいフィードバックもいただけてよかったです。また機会があればやってみたいです。
2月の目標として後述しますが、非常にいい経験となりましたので無理のない範囲で継続します。
忙しかったわけではなく、更新したと思ったら忘れていました。 2月4週目分を2月5週目分にプラスし、解消していきます。
周りのイベントごとに気を配りすぎて自分の時間を取ることが難しかったです。 振り返りの時間もまともにできませんでした。
2月は3000字を超えないと投稿してはいけないルールを引いてみましたが思ったよりも難しかったです。 なおかつ、伝いたい・書きたい本筋から逸脱するような内容を水増しするのはどうなのかと思いました。 このルールは来月には適応しないこととします。
イベントごとに参加する回数を減らします。いろいろお誘いいただくの嬉しいですが、予定詰め込めすぎて手が回らなくなることを避けたいと思います。
週1でサシ飲みをする。
週一は守れなかったが、5人（5週分）とサシ飲みできた。
振り返りおしまい。
Google Apps Scriptを使用する上で設定しなければいけないのが.clasp.jsonです。自分は.clasp.jsonを正しく設定することを忘れてしまったためにミスをしてしまいました。そこで今回は.clasp.jsonの書き方をまとめておきたいと思います。
GitHub上での説明は下記にあります。
https://github.com/google/clasp#project-settings-file-claspjson
.clasp.jsonはプロジェクト設定ファイルとも呼ばれ、clasp cloneやclasp createをしたときにカレントディレクトリへ作成されます。
GitHubにあった例を記述しておきます。
{
"scriptId": "",
"rootDir": "build/",
"projectId": "project-id-xxxxxxxxxxxxxxxxxxx",
"fileExtension": "ts",
"filePushOrder": ["file1.ts", "file2.ts"]
}
Google Scriptプロジェクトを特定するためのIDが記述される場所です。
URLとしてある、https://script.google.com/d/<SCRIPT_ID>/edit の<SCRIPT_ID>と同じ値が入ります。
どのディレクトリのファイルをプロジェクト上にpushするかを決める項目です。必須項目ではないために指定がない場合は現在のディレクトリをpushします。
新規で開発をしていたとき、node_modulesと同じディレクトリで開発していました。そして、pushをしてしまった結果は対象のファイルがpushの対象となっており長時間結果が帰ってこない結果となりました。
開発する際ソースコードはsrc配下で開発をし、.clasp.jsonの "rootDir": "src/",とすることをおすすめします。こうすることでプロジェクトにpushされるのはsrc配下だけとなります。
claspがどのGoogle Cloud PlatformのIDと紐付いているかを特定する項目です。
開発しているソースコードの拡張子を指定します。必須項目ではないため、書かなくても大丈夫なようです。
ファイルをプッシュする順番を指定します。説明文には、実行順に依存するものがある場合に役立ちますとありますが具体的には思いつきませんでした。すべてがアップロードされてから実行すると思うのですが…。
今回はrootDirを正しく設定していないことで問題が発生し、.clasp.jsonを調査することになりました。
しかし、結果として自分が気がついていない機能を発見できてよかったです。
Google Apps Scriptで手軽に開発することが増えてきましたので、今後も調査していきたいと思います。
おしまい。
