ブログ更新を通して最新技術を学ぶ / learn the latest technology through what you like

by Takuya YOSHIMURA

Slide 1

Slide 1 text

ブログ更新を通して最新技術を学ぶ 2019/1/22 @とらラボオタクが最新技術を追うライトニングトークイベント2回目

Slide 2

Slide 2 text

▶　ぷれぜんをする　　ぷれぜんをつくる　　ぷれぜんをけす

Slide 3

Slide 3 text

よしたく ----------- H　?? M　?? Lv: ?? 　はなす　　しゅみ　どうぐ　　ぐぐる ▶つよさ　　まとめ

Slide 4

Slide 4 text

SES せいべつ：おとこレベル：？？ HP：？？ MP：？？よしたく E 指し棒 E MacBookAir ID: yoshitaku_jp アイコン:

Slide 5

Slide 5 text

よしたく ----------- H　?? M　?? Lv: ?? 　はなす　　しゅみ ▶どうぐ　　ぐぐる　つよさ　　まとめ

Slide 6

Slide 6 text

E 小さなことから学ぶ気持ち E 知らない技術・サービスの単語最新技術の詳しい使い方一つの技術の深掘りどうぐ１よしたく２とらあな

Slide 7

Slide 7 text

▶はなす　　しゅみ　どうぐ　　ぐぐる　つよさ　　まとめよしたく ----------- H　?? M　?? Lv: ??

Slide 8

Slide 8 text

年間100記事達成＼2018年／

Slide 9

Slide 9 text

2018年はブログ頑張った！！！

Slide 10

Slide 10 text

2018ねんは　メダパニをとなえた 2018年はブログ頑張った？？？

Slide 11

Slide 11 text

やってみた系記事が多くなってしまったつうこんの　いちげき！

Slide 12

Slide 12 text

実戦投入力！！！＼2019年は／かいしんの　いちげき！

Slide 13

Slide 13 text

...までいかなくても、実際に動いているものを作れたら楽しそう

Slide 14

Slide 14 text

というわけで、さっそく挑戦！！！

Slide 15

Slide 15 text

挑戦したこと！！！ ● write-blog-every-weekのサイト作り ● ブログに関する情報を取得

Slide 16

Slide 16 text

挑戦したこと！！！ ● write-blog-every-weekのサイト作り ● ✝ブログに関する情報を取得

Slide 17

Slide 17 text

write-blog-every-weekとは？ ● 週1で記事をあげるSlackコミュニティ ● あげられなかったら翌週は2記事 ● 3記事分溜まったら強制退会

Slide 18

Slide 18 text

write-blog-every-weekのサイト作り ● ホスティング先に ● Vue.jsと Firebaseで実装 ● ブログの更新情報は Google Apps Scriptで取得

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

　　　　　のいいところ ● プライベートリポジトリにも対応 ● ビルドコマンドが使える ○ ローカルでビルドする必要なし ○ CIサービス挟む必要なし

Slide 21

Slide 21 text

　　　　　 .tomlの中身

Slide 22

Slide 22 text

ブログの更新情報はGoogle Apps Scriptで取得 ● Firebaseライブラリをインポート ● 各ブログを巡回 ○ タイトル、URL等を取得 ● Google Apps Scriptから、 RealtimeDatabaseにインサート

Slide 23

Slide 23 text

ブログの更新情報はGoogle Apps Scriptで取得 https://yoshitaku-jp.hatenablog.com/entry/2018/12/27/022733

Slide 24

Slide 24 text

write-blog-every-weekのサイト作りの課題 ● Realtime Databaseから　Firestoreに移行 ● Cloud Functions for Firebaseで　新規入会希望者への通知

Slide 25

Slide 25 text

挑戦したこと！！！ ● ✝write-blog-every-weekのサイト作り ● ブログに関する情報を取得

Slide 26

Slide 26 text

ブログに関する情報を取得 ● はてなブログ週間PV数 ● はてなブログ読者数 ● はてなブックマーク累計数 ● Twitterフォロワー数 ● シェアされたことを　　　　　に通知 ● 新しいフォロワーを　　　　　に通知

Slide 27

Slide 27 text

ブログに関する情報を取得 ● ✝はてなブログ週間PV数 ● ✝はてなブログ読者数 ● ✝はてなブックマーク累計数 ● ✝Twitterフォロワー数 ● シェアされたことを　　　　　に通知 ● 新しいフォロワーを　　　　　に通知

Slide 28

Slide 28 text

ブログに関する情報を取得まもののむれが　あらわれた ● シェアされたことを　　　　　に通知 ● 新しいフォロワーを　　　　　に通知

Slide 29

Slide 29 text

ブログに関する情報を取得 ● はてなブログ週間PV数 ● はてなブログ読者数 ● はてなブックマーク累計数 ● Twitterフォロワー数 ● ✝シェアされたことを　　　　　に通知 ● ✝新しいフォロワーを　　　　　に通知

Slide 30

Slide 30 text

ブログに関する情報を取得 ● はてなブログ週間PV数 ● はてなブログ読者数 ● はてなブックマーク累計数 ● Twitterフォロワー数 Google Apps Scriptで実装

Slide 31

Slide 31 text

はてなブログ週間PV数 ● はてなブログにログイン ● https://blog.hatena.ne.jp/yoshitaku_jp/ yoshitaku-jp.hatenablog.com/accesslog ● スクレイピングで取得

Slide 32

Slide 32 text

はてなブログ読者数

Slide 33

Slide 33 text

はてなブログ読者数 https://yoshitaku-jp.hatenablog.com/entry/2019/01/06/220000

Slide 34

Slide 34 text

はてなブックマーク累計数

Slide 35

Slide 35 text

はてなブックマーク累計数 https://yoshitaku-jp.hatenablog.com/entry/2019/01/12/210000

Slide 36

Slide 36 text

はてなブックマーク累計数 ● Twitterの自分のアカウントにアクセス ● フォロワー数を地道にスクレイピング…

Slide 37

Slide 37 text

ブログに関する情報を取得の課題 clasp なんと　TypeScript、ESLint、Prettier、 claspが　たちあがり　なかまになりたそうに　こちらを　みている

Slide 38

Slide 38 text

Prettier？？？ ● 2017年に登場した ● コードフォーマッター ○ ESLintと組み合わせて使うことが多い ● デフォルトの設定を持っている

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

clasp？？？ Google Apps Script をローカルで開発できるCLIツール ● Google公式からリリース ● お気に入りのエディタで書ける ● （ローカルで開発できる=）gitで管理できる

Slide 41

Slide 41 text

ブログに関する情報を取得の課題取得した情報をGoogle Data Studioで可視化

Slide 42

Slide 42 text

ブログに関する情報を取得の課題

Slide 43

Slide 43 text

よしたく ----------- H　?? M　?? Lv: ?? 　はなす　　しゅみ　どうぐ　　ぐぐる　つよさ　▶まとめ

Slide 44

Slide 44 text

まとめ ● ブログ更新を通して最新技術を学べた！ ● 改善点を常に探す姿勢が大切！ ○ それを最新技術で実装できたら最高！ ● やったことはアウトプットしよう！ ○ どんどん情報が入ってくる！

Slide 45

Slide 45 text

ぼうけんのしょ ● よしたくTwitter ○ https://twitter.com/yoshitaku_jp ● よしたくBlog ○ https://yoshitaku-jp.hatenablog.com/ ● write-blog-every-week ○ https://write-blog-every-week.netlify.com/ ● Netlify ○ https://www.netlify.com/ ● Vue.js ○ https://jp.vuejs.org/index.html ● Firebase ○ https://firebase.google.com/ ● Prettier ○ https://prettier.io/ ● clasp ○ https://github.com/google/clasp

Slide 46

Slide 46 text

おお　よしたく！ LTがおわってしまうとは　なさけない…。

Slide 47

Slide 47 text

感想のじゅもん

Slide 48

Slide 48 text

おつかれさまでした。このままでんげんをおきりください。