よしたく blog

ほぼ週刊で記事を書いています

ドットインストールの「Firebaseでウェブサイトを公開してみよう」を見た

Firebase オンライン学習

f:id:yoshitaku_jp:20181128144942p:plain

Firebaseが流行っているので、ちょっと学習したいなと思いました。いくつか動画学習サイト探していたら、ドットインストールでFirebaseでウェブサイトを公開してみようがあったので、触ってみました。

https://dotinstall.com/lessons/hosting_firebase

公開するサイトのソースコードは学習サイト内で作ったものを使用するようなので、必要があればこちらを受講することをおすすめします。

#01 Firebaseでサイトを公開してみよう 02:20

  • FirebaseにはHosting機能がある
  • Firebaseには無料枠がある
    • サイトを公開する程度なら十分
      • 容量1GB
      • 毎月の転送量10GB

#02 プロジェクトを作ってみよう 02:33

  • 公開するフォルダの名前はpublicにする
  • public配下のファイルがすべて公開される
    • 公開したくないファイルはpublicから除いておく

#03 Node.jsをインストールしよう 02:08

  • FirebaseはNode.jsを使って操作する
  • インストールだけの章
  • control + lでコンソールをクリアすることができる
    • 知らなかった

#04 firebase-toolsをインストールしよう 02:23

  • Firebaseのコマンドラインツールをインストールする
    • sudo npm install -g firebase-tools
  • firebase -Vでバージョン確認
  • firebase loginでログインをする
    • Allow Firebase to collect anonymous CLI usage and error reporting information? (Y/n)と利用情報の送信を許可するか聞かれる

#05 プロジェクトの設定をしよう 02:44

  • プロジェクトフォルダは以下でfirebase init
    • Hosting: Configure and deploy Firebase Hosting sitesでスペースキー
    • 作ったプロジェクトyoshitaku-base-7d93f (yoshitaku-base)を選択してスペースキー
    • What do you want to use as your public directory? (public)
    • Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
      • single-pageはデフォルトでNo
    • File public/index.html already exists. Overwrite? (y/N)
      • index.htmlの初期化はデフォルトでNo
    • Firebase initialization complete!が出ればOK！

#06 サイトを公開してみよう 03:00

  • プロジェクト配下にfirebase.jsonが、public/404.htmlが生成されている
  • firebase deployでデプロイが開始される
    • 最後にURLhttps://yoshitaku-base-7d93f.firebaseapp.comが生成され、デプロイが完了する

#07 サイトを更新してみよう 02:30

  • サイトを更新したいときもfirebase deployでデプロイがされる
  • コンソール上では、今までの履歴も見ることができる

#08 別のサイトを作ってみよう & #09 サイト公開の流れを確認しよう 02:47 & 02:32

  • 今までの復習

まとめ

  • 約30分ぐらいでfirebaseのhosting機能が学べる
  • 他の機能も使ってみたいがコースがないのが残念

秋の夜長の自由研究LT大会 を終えて

LT アウトプット 勉強会・イベントレポート

無事に秋の夜長の自由研究LT大会を終えることができました。同じ登壇者の方、会場に来てくださった方、リハ会に来てくださった方、スタッフの方、ありがとうございました。

engineers.connpass.com

リハーサル編はこちら

yoshitaku-jp.hatenablog.com

今年はアウトプットを頑張ると決め、ブログの更新は毎週欠かさずできていましたが、LTだけはなかなか出来ずにきてしまいました。 しかし、そんなところに 【再増枠】登壇の技術を勉強する会 #1 - connpass と出会うことができ、無事に当日まで駆け抜けました。秋の夜長の自由研究LT大会はテーマ自由ということで「サッカー」や「競馬」について話そうかと思いましたが、最終的には「銭湯」について話すことにしました。最初は銭湯についてどこまで話せるか不安でしたが、聞いてる人が聞いていて抵抗なく程よい興味を惹くものになってよかったと思います。そうなっていると信じています。

資料はこちらです。初めてSpeakerDeckで公開した。嬉しい。　12/04 一時的に公開を停止しました＞＜ 少々お待ちください…！

SpeakerDeckに資料を公開するときは、いくつしか注意してほしいです。

資料のこだわった部分

  • 表紙と切り替えのスライドの黄色いページは、ケロリン桶をイメージしました。スライドのデザインもテーマに寄せていくってことができてよかったです。
  • 「わ」板と「ぬ」板で、始まりと終わりをうまく表現することができてよかったです。
  • 資料を限界まで削りました。それに加えて時間内に収めることを徹底して意識しました。

プレゼン中にこだわった部分

  • 指示棒
  • ストップウォッチで自分で時間をはかれていた
  • 前半に温泉について発表した方がいたので、うまくネタに乗っかっていけた
    • 練習段階でゆっくり話しても時間内に収められることが確定していたので、笑いを引き出すために遊べた
  • 単調に話すのではなく、抑揚をつけた（と思っている

良くなかった部分

  • 週頭から風邪を引いた
    • ご迷惑をおかけしました
  • あまり前を見れて話せていなかった
    • これはいつになっても難しい

感想ありがとうございます！

登壇者のブログです！

まとめ

初めてLTしてきましたが、楽しかったです！前に立って人に説明する経験はなかなか得られないですし、月1ぐらいでやりたいなと思いました。ずっとLTは申し込めずにいましたが、一回経験してハードルが下がったのでどんどんチャレンジしていきたいなと思います。失敗してもたった5分、1年に比べれば誤差の範囲ですしね。自分のレベルが低いと、マサカリが飛んできたらどうしよう…なんて考えていますが、どこのコミュニティに行ってもエンジニアは優しい人ばかりでした。これからもエンジニアの登壇を応援する会でレビューなどをいただきつつ、コンフォートゾーンを抜ける意味も込めて自分はどんどん外の勉強会に出ていきチャレンジし、また別の誰かの登壇を応援していきたいなと思います。

ありがとうございました。

Djangoでrequirements.txtをうまく使い分ける方法

Django Python

f:id:yoshitaku_jp:20180711100334p:plain

以前、Djangoのrequirements.txtを環境ごとに使い分けようとした結果、Herokuにてエラーが出てしまいました。これの良い解決方法です。

yoshitaku-jp.hatenablog.com

もぐもぐDjangoにて質問したところ、ベストな回答をいただけたのでメモ代わりに書いておきます。

構成

.
├── requirements.txt
└── requirements
    ├── base.txt
    ├── develop.txt
    └── production.txt

requirements.txt

requirements.txtはHeroku用として、production.txtを読み込む設定を記述します。これでHerokuに「プロジェクトルートにrequirements.txtがない」と怒られることもありません。

-r requirements/production.txt

base.txt

base.txtはすべての環境で必要なものを記述します。Dajngoとかはココに記述しておきましょう。ファイル名ですがcommon.txtとbase.txtどっちがいいのかなと気になり質問したら、common.txtは複数に共通しているもの、base.txtはなにかの土台となるものを書きましょうと言われました。勉強になりました。

#すべての環境で必要なものを書く

develop.txt

develop.txtは開発環境で必要なものを記述します。テストとかで使うようなものを書いておくといいんじゃないでしょうか

-r base.txt
#以下、開発環境に必要なもの

production.txt

production.txtは本番環境で必要なものを記述します。テストとかで使うものはいらないので、必要最低限持っていきたいですね。

-r base.txt
#以下本番環境に必要なもの

大変参考になりました。

qiita.com

stackoverflow.com

秋の夜長の自由研究LT大会のリハーサルをしました

勉強会・イベントレポート アウトプット LT

秋の夜長の自由研究LT大会で銭湯について熱く語ってくるのですが、そのリハーサル会をしました。

engineers.connpass.com

秋が深まり、夜が長くなってきましたね。 エンジニアの皆さんはそんな夜に何をされていますか？ コードを書いたり技術書を読んだりもいいですが、やっぱり自由なテーマでLTをするのが楽しいですよね。 前回のイベントに引き続き「大人の自由研究」をテーマに技術に関係ない話題のLT（Laugh Talking）大会を開催します。
ちょっとそこの「勉強会に登壇してみたいけど初めてだから緊張する」と思われている方！ こんな内容でも初登壇できるんだよっていう事を見に来ませんか？ 技術をテーマにした登壇だと強い人たちに混ざって自分なんかしゃべれんの？とか正直思いますよね。 でもこのLT大会はまっっっったくそんな事はありません。 どんなテーマでもいいので、自分の好きな事を面白く語って、プレゼンスキルを磨くような場を提供しています。 今回は事前アンケートで登壇希望者が多かった為に一般参加枠しかご用意できませんが、ぜひNewbee達の楽しい発表をお酒を片手に聞きましょう。
※次回開催時に登壇を希望される方は優先対応しますので、懇親会でお声がけください！
この勉強会は、以下のような方が登壇される予定です。 - これまで登壇経験がない方 - もしくは、登壇経験が3回以内の方 - 若手＆学生の方 - 登壇の練習をしたい方 - スライド作成スキルを磨きたい - プレゼンスキルを磨きたい - 登壇ってなんか緊張するのを克服したい - なんか面白いことやっている/やりたい方 - みんなをあっと驚かせたい方 - 技術以外でちょっとした調べ物をして知識共有したい方
参加対象者はITエンジニア/デザイナー（及びこの業界を志望される）の方とさせて頂きます。 上記以外の方についても参加禁止はしませんが、営業/勧誘を目的としたご来場は禁止いたします。

LTしたことのない自分にとってはうってつけのものでした。概要長いな

リハーサルの場所は最近有名な「とらLab」さん。秋葉原って人が多いのにカフェが少ないので助かります。と思ったら休日の個人利用は開放されていないのか…うむ…

news.toranoana.jp

リハーサル

資料

リハーサル会の1時間前にガーッと直したので、ところどころ文字だけです。50枚から構成変えずよく減らせた。自分偉い。当日までにはもっといい表現に直したい。

docs.google.com

頂いた感想 ありがとうございます！
写真とかタイトルの明るさが激しいので地の文ももう少し明るくても良いかも
全体的に見やすくてよかったです！

口頭では、切り替えスライドの黄色が目に痛いとかは言われてしまったなぁ… ケロリンの桶を意識したかったんだけど。暗さの調整もしたんだけど…

ケロリン桶 関東版 00350

ケロリン桶 関東版 00350

スライド作成

大変参考にさせていただきました。

個人的な Keynote ベストプラクティス 2017 - kakakakakku blog

Googleスライドで「いい感じ」に背景画像を設定する

時間

4/5分でした。スライド枚数多いのでサラっと流したかった。 少し早口だったかな。もっとゆっくり喋れると思うけど、聞き取りやすくはあったと言われたので良かったかな？
喋りに関しては、スライドに書いてある文字を読むだけではなく、自分の言葉で喋れたのが意識できたので良かったかな。

会場との対話

ココが一番難しかった。 漫才のように自分が話したことに対するリアクションが生で返ってくるので、相手が驚いていたらスライドを進めず少し待つとか、相手が笑っていたらもう少し掘り下げて突っ込んでみるとか、その場で臨機応変に対応しなきゃと思った。まぁ漫才やったこと無いんですけど。

その他

Googleスライドの管理ってどうやるのがいいのかな。 スライドv1 スライドv2 スライドv3 スライド_リハみたいな感じで増えていってしまっている…

【追記】 解決方法を教えてもらいました！！！

まとめ

実際にリハーサルしてみないとわからないことだらけですね。やってよかった。当日頑張るぞい。

余談

ちょっと先ですが、今年1年アウトプットを頑張ったと思うので思い切ってLT申し込んでみました。お時間あればぜひ。

今回は皆さんに熱くエモくトークして頂くLT大会になります！ このイベントでは、以下のような話題のLTを募集しています。 あなたの1年間を通じたアウトプットを振り返り、是非熱く語ってください。
今年のアウトプットによってもたらされた変化や成し遂げた成長を語る あなたが次にめざすべき成長の道のりを語る

techplay.jp

DjangoをHerokuにプッシュすると出るApp not compatible with buildpack

Python Django Heroku

f:id:yoshitaku_jp:20180711100334p:plain

エラー内容

DjangoのwebアプリケーションをCircleCI経由でHerokuにpushしていたら、そこで出たエラーがでた。

#!/bin/bash -eo pipefail
git push https://heroku:$HEROKU_API_KEY@git.heroku.com/$HEROKU_APP_NAME.git master
Counting objects: 48, done.
Delta compression using up to 36 threads.
Compressing objects: 100% (18/18), done.
Writing objects: 100% (48/48), 4.55 KiB | 0 bytes/s, done.
Total 48 (delta 21), reused 47 (delta 20)
remote: Compressing source files... done.        
remote: Building source:        
remote: 
remote: -----> App not compatible with buildpack: https://buildpack-registry.s3.amazonaws.com/buildpacks/heroku/python.tgz        
remote:        More info: https://devcenter.heroku.com/articles/buildpacks#detection-failure        
remote: 
remote:  !     Push failed        
remote: Verifying deploy...        
remote: 
remote: !   Push rejected to horse-card.        
remote: 
To https://heroku:$HEROKU_API_KEY@git.heroku.com/$HEROKU_APP_NAME.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://heroku:$HEROKU_API_KEY@git.heroku.com/$HEROKU_APP_NAME.git'
Exited with code 1

（一部$HEROKU_API_KEYと$HEROKU_APP_NAMEに変更

原因

原因は、ルートにrequirements.txtがないことだった。開発環境と本番環境でrequirements.txtを使い分けたいためにフォルダ分けしたことが引き起こしたものだった。これはDjangoというよりもPythonのアプリケーションをHerokuに上げるときにおこるものだと思う。

各種ファイル...
requirements
└┬base.xt
 ├development.txt
 └production.txt

【Django関連】

yoshitaku-jp.hatenablog.com

yoshitaku-jp.hatenablog.com

VueSchoolでVue.jsの基礎を学んでみた

Vue.js オンライン学習

VueSchoolという、Vueについて学べるサイトがあります。

vueschool.io

ここでは、Vue.jsについて様々なことを学べるコースが月$12で用意されています。全編英語ではありますが、字幕は用意されていますし、再生速度も変えることができました。Vue.jsについて学べる動画はあまり展開されていないので、試してみる価値はあるのかなと思います。

今回は無料で試せる「Vue.js Fundamentals」をやってみました。無料ということもあり、Vue.jsの基礎的なことが学べる内容でした。10レッスン、計27分だったので気分転換に眺めてみるのもいいと思います。

サンプルコードもGitHub上に展開されています。

github.com

【下書きの公開前に追記】

繰り返し見てまとめていましたが、英語で理解しづらい部分もあり困りました。並行して「Vue.js入門 基礎から実践アプリケーション開発まで」を読んでいたので少しずつ理解できましたが、「Vue.js Fundamentals」単体だと難しいかも知れません。他の言語から来た人だとわかりやすいのかな…

理解が深まってきて色々直したくなってきたので、動画から学べたこととして一回アップし供養します。

Vue.js入門 基礎から実践アプリケーション開発まで

Vue.js入門 基礎から実践アプリケーション開発まで

【追記ここまで】

Vue.js Fundamentals

This Vue.js course will teach you and get you up and running with the fundamental concepts of Vue.js. Perfect if you haven't touched Vue before or you just getting started!

Get Started with Vue.js

Getting Started With Vue.js

  • CDNからVue.jsをサイトに追加する方法
  • Vueインスタンスの生成方法
    • el:'#id'の形式でマウントするポイントを指定
    • dataではVueインスタンスが使うデータを指定
  • v-modelで画面上の変数に動的に値を入力できる

https://vueschool.io/lessons/getting-started-with-vuejs

VVue.js Template Syntax And Expressions

  • VueのテンプレートでJavaScriptを実行する方法

https://vueschool.io/lessons/vuejs-user-events

Loops

  • v-forでループ処理を実行できる。

https://vueschool.io/lessons/vuejs-loops

User Inputs & Vue Devtools

  • v-modelで入力した値をdataに格納できる
  • Vue Devtoolsの紹介
    • ChromeとFireFoxで利用できる
    • 開発やバグを見つける際に便利

https://vueschool.io/lessons/vuejs-user-inputs-vue-devtools

User Events

  • v-onでイベントを設定できる
    • v-on:は@に置き換えられる
  • clickやkeyup.enterで様々なイベントに対応できる

https://vueschool.io/lessons/vuejs-user-events

Vue Methods

  • メソッドを利用することで冗長的なコードを排除できる
    • Vue Schoolの中では扱われていなかったが、computedとの違いはなにか気になった。

https://vueschool.io/lessons/vue-methods

Conditional Rendering

  • v-ifとv-elseを使って、動的にページを変化できる
    • dataの配下にstateを用意し管理している
    • この形が標準的に使われているのか気になった

https://vueschool.io/lessons/vuejs-conditionals

Attribute Bindings

  • v-bind でHTML属性をバインドできる

https://vueschool.io/lessons/vuejs-attribute-bindings

Dynamic Classes

  • v-bind:classにオブジェクトを渡すことで動的に変えることができる
  • v-bind:classには配列を渡すこともできる

https://vueschool.io/lessons/vuejs-dynamic-classes

Computed Properties

  • ComputedはVueの特徴の1つである
  • dataに対する処理をtemplateへ最新の変数として再利用できる

https://vueschool.io/lessons/vuejs-computed-properties

まとめ

  • 30分でVueの基礎を学べた

  • 英語がわからないと辛い

    • 辛かった
    • その他のコースも受講しようか迷ったが、英語なので一旦思いとどまる
  • methodとcomputedの違いを調べてみる

OSS Gateにサポーターとして参加しました。

OSS Gate oss 勉強会・イベントレポート

10/27はOSS Gateにサポーターとして参加しました。会場はGMOペパボさんです。ありがとうございます。

3月にビギナーとして参加し約半年経ちました。サポーターとしても貢献したいなとは思っていましたが、本当に自分がサポータとして参加するとは思ってもみませんでした。残念ながら自分自身はOSSに対して貢献できていませんが…OSS Gateへ参加することもOSSへの貢献だと思って参加を決めました。

3月にビギナーとして参加した記事はこちらです

https://yoshitaku-jp.hatenablog.com/entry/2018/03/11/321/

OSS Gateとは

https://oss-gate.github.io/

「OSS Gate」は、OSS開発に参加する「入り口」を提供する取り組みです。 OSS開発に未参加の人を参加する人へ、少し参加したことがある人を継続的に参加する人へ。そうやってOSS開発に参加する人を継続的に増やしていく。それが「OSS Gate」の目的です。

ビギナーさんと顔合わせ

今回は、SIer出身のビギナーの方と組むことになりました。アイスブレイクでお話を聞いていると、自分がビギナーとして参加したときの気持ちとすごく似ていて、親近感が湧きました。

世の中で動いているソフトウェアの多くにOSSが使われていて 自分も何らかの形で貢献してみたいと思ったが、 心理的な障壁が大きく自律的に始めるきっかけになればと思いはじめた。

ビギナーさんの作業ログ

当日の作業ログはこちらです。Jupyter notebookについてやりました。

https://github.com/oss-gate/workshop/issues/981

サポーターとして参加した感想・気をつけたこと

当日サポーターとして参加した感想ですが、思ったよりも緊張しませんでした。やはり大きな部分では「自分がビギナーで体験したこと」を提供すればいいんだと思うようにしていたからだと思います。逆に言えば、OSS Gateにビギナーとして参加していない方は、やりにくさや難しさを感じてしまうかも知れません。 今はワークショップをビギナーとサポーター1on1でやっていますが、個人的には1:2でもやれるのではないかと思いました。しかし、自分が担当したビギナーさんが自身で進める力を持っていたので余裕があった面は否めないと思います。

気をつけたことは、あくまでビギナーさんの背中を押す活動だと思うので、手取り足取り教えないようにしました。ビギナーさんが躓いてそうな雰囲気があれば、「どうしました？」と入ったり、「インストール手順のところが分かりづらそうなのでフィードバックできるポイントになりませんか？」と促したりしました。この加減が難しくは感じました。

まとめ

一日を通して、誰かのサポートをする体験が初めてだったので、貴重な経験となりました。人に教えるってのは難しいけど最高に楽しいですね。自分が通った道でもありますし、そこで立ち止まっている人の背中を押すことができたことがすごく嬉しいです。もちろん自分ひとりの力ではないです。全体を見てくださっていた司会役の方と、サポートメンターの方、参加してくださったビギナー・サポーターの方に感謝します。

余談

OSS Gateの運営方法で気がついた点

もっと運営が楽になったり、継続的に参加してもらうためにはどうしたらいいだろうかを考えました。

  • サポーターとビギナーの座る位置を固定したほうが良いのでは？
    • 「どちらがサポーターですか？」と聞いているタイミングが合ったので固定したほうが楽ではないかな…サポーターメンターもどちらがビギナーでサポーターかわかって動きやすそう？
  • ワークショップが終わったあとのフォローにも力を入れてみては？

おしまい

GitHubで画像を保存してREADME.mdに表示する

GitHub

初級者の人や、プロジェクトにあとから入ってきた人がわかりやすいようにGitHubのREADME.mdを詳細に書いていくことは大切です。しかし、文字ばかりになるのも味気ないですし、やはり絵や図があったほうがわかりやすいはずです。ふと、画像を貼るにはどうしたらいいのだろうと思ったので調べて実践してみました。

README.mdに画像を貼る手段はいくつかあるようで、外部サービスを利用するものもあります。外部サービスに保存し、そこを参照しに行く方法です。

GitHubでREADME.mdに画像を使用したい - Qiita

個人的にはGitHubの同じリポジトリの中だけで閉じておきたいなと思ったので、空のブランチを用意しその中に画像だけ保存しておく方法を選択しました。今回はそのメモです。

空のブランチを作る方法

空のimagesのブランチを作成します。orphanオプションをつけることによって、元のブランチの情報を引き継がないブランチを作成できます。

git checkout --orphan images

空のブランチに画像を入れる方法

フォルダの中を削除し、表示したい画像をコミットし、最後はプッシュします。

今回使う画像はこちらです。 f:id:yoshitaku_jp:20181025163045p:plain

git rm -rf .
git add dog_akitainu.png
git commit -m "犬の画像を追加しました"
git push origin images

これで独立したimagesブランチとdog_akitainu.pngがGitHub上にあがりました。masterには一番最初に作ったREADME.mdがあります。 f:id:yoshitaku_jp:20181025163157p:plain

README.mdに画像を表示する

masterブランチに移動し、README.mdを編集します。

git checkout master
vim README.md

vimでREADME.mdに書く内容です。

![秋田犬](https://github.com/yoshitaku-jp/test_doc/blob/images/dog_akitainu.png)

masterブランチにコミットしてプッシュします。

git add README.md
git commit -m "画像を表示"
git push origin master

完成

f:id:yoshitaku_jp:20181025163144p:plain

GitHub - yoshitaku-jp/test_doc: Githubで画像を保存してREADME.mdに表示するブログ記事のリポジトリ

夏休みに九州・四国をまわってきました〜四国編〜

旅行

f:id:yoshitaku_jp:20181023103557p:plain

もういつだよって話ですが、8月の末に夏休みをいただき、九州・四国をまわってきました。

ほぼ写真です。

九州はこちら

yoshitaku-jp.hatenablog.com

愛媛

高知

香川

おしまい

夏休みに九州・四国をまわってきました〜九州編〜

旅行

f:id:yoshitaku_jp:20181023103534p:plain

もういつだよって話ですが、8月の末に夏休みをいただき、九州・四国をまわってきました。

ほぼ写真です。

四国はこちら

yoshitaku-jp.hatenablog.com

宮崎

鹿児島

熊本

佐賀

長崎

福岡

大分

おしまい