手動で毎日アクセスするのが面倒な全ての人へ

## はじめに
通知機能が搭載されていないWebページについて、毎日手動でアクセスして情報を取得するのが面倒なので自動化してみました。

## スクレイピング（Webスクレイピング）について
Webスクレイピングとは主にWebサイト上に掲載されている情報を取得したのち、必要な部分のみ抽出（+保存）する作業を指します。例えば任意のページのとある情報（商品情報・天気予報・Web記事）の特定部分を抽出したい場合に利用できます。
また、似た言葉にクローリングというものがありますがこちらはWebサイト全体を網羅的に巡回しデータを収集することを指します。例えばこのクローリングという技術はGoogleの検索インデックスの構築に利用されていますね。

### Webスクレイピング実施時の注意点
ここまで聞くと「便利やん、使い倒したろ」となるかも知れませんが、チョット待って！！！
賢い方ならお気づきかもしれませんが、この技術、Webサイト運営者の立場としては少々厄介モノだったりするんですわ。個人情報に関わる情報は抽出禁止はもちろんのこと、著作権侵害の恐れもあり、短時間で大量のリクエストを実施することになるのでサーバーへ多少なりとも負荷をかけることになります。そのため、Webスクレイピングを実施する前には必ず事前に当該Webサイトを確認してください。robots.txtの内容や利用規約ページの確認が必要ですが、利用規約内には「スクレイピング」と限定した書き方ではなく、「ロボット等によるデータ抽出・収集」といった書き方がされていることが多いです。スクレイピングはもちろんそれに含まれるため、このような記載がある場合にはスクレイピングはしないように注意してください。本ブログの利用に起因するいかなる損害についても、当方は一切の責任を負いかねます。なお本ブログにおいても[利用規約](https://techblog.futosh1.com/terms)内に同様の記載をしておりますので、スクレイピングはくれぐれもお控えください。とはいえ大変便利な技術ですので早速使い方を紹介しますね。今回は私のブログでWebスクレイピングを実施してみました。自分自身のページにおけるWebスクレイピングであれば誰が文句を言えようか（以下略）。

## Pythonのスクレイピングライブラリ比較
Webスクレイピングについての概要は前述の通りですが、どうやって実施をしましょうか？まあお決まりの話ですが、Pythonなので便利なライブラリがいくつもあるんですよね。まずはいくつか代表的なものを紹介します。

### Requests & BeautifulSoup
BeautifulSoup、美味しそうですよね。こちらはHTML・XMLの解析と特定の情報の抽出に特化しており、通常Requestsライブラリと一緒に使われます。DOMツリー構造を使って操作が可能なので静的ページにはもってこいのライブラリです。初学者向けで最も学習コストが低いとも言われていますが、標準のhtml.parserだけでなくC言語で書かれたlxmlパーサーと組み合わせることもできるため、比較的高速な処理が可能で、簡単な処理には重宝されています。一方でHTMLをそのまま解析するだけなので、ブラウザ側(=JavaScript)でレンダリングされるSPAのようなWebサイトや、lazy laodが組み込まれた動的ページの解析には不向きです。

### Scrapy
こちらは膨大なデータの処理に向いており、スクレイピングとクローリングの両方が利用可能なフレームワークです。ライブラリではなくフレームワークであることがポイントで、他のライブラリと比較して幅広く機能が提供されています。また並行処理も可能であるため非常に高速な処理が期待できます。一方で、BeautifulSoupと同様に動的ページの解析には不向きです。

### Selenium
Seleniumは既出の2ライブラリとは少し毛色の違うライブラリです。一番の特徴はブラウザをどのように操作するかを指示できることにより、静的ページだけでなく動的ページからの抽出が可能であることです。これにより、例えばJavaScriptによるページの読み込みが完了してから操作を実行できたり、入力フォームへのテキスト入力・ボタン押下・スクロール動作ができたりと、さながら実際にページを手動で操作するような感覚です。RPAっぽいとも言えるかもしれませんね。ここまで褒めちぎりましたが、反対に一番のネックは処理速度です。クライアント上でブラウザを実際に起動しているので、手動よりは格段に速いですがそれはもう時間がかかります。

### 比較表
ここまでの情報を以下の通りまとめてみました。
| | BeautifulSoup | Scrapy | Selenium |
| :-- | :--: | :--: | :--: |
| HP | [URL](https://www.crummy.com/software/BeautifulSoup/) | [URL](https://scrapy.org/) | [URL](https://www.selenium.dev/ja/documentation/) |
| 特徴 | 簡単！速い！ | 大規模な処理が得意 | 動的ページの処理が可能 |
| 静的コンテンツの処理 | ✔︎ | ✔︎ | ✔︎ |
| 動的コンテンツの処理 | - | - (一部可能) | ✔︎ |
| 処理スピード | ◯ | ◎ | ▲ |
| 学習コスト | ◎ | ▲ | ◯ |

## Webスクレイピング、実際にやってみた。
### RequestsとBeautifulSoupを使ったWebスクレイピング
まずは一番簡単なこちらから。解析するページは以前執筆した[PythonでGoogle Driveにファイルをアップロード・ダウンロードする。](https://techblog.futosh1.com/blogs/python-gdrive-updownload)という記事にします。ここから`meta`タグと`h2`タグを取得してみましょう。
まずは`beautifulsoup4`タグと`requests`をインストールします。
```
pip install beautifulsoup4 requests
```
続いて以下の通りコードを書いていきましょう。
<script src="https://gitlab.com/-/snippets/4777841.js"></script>
<details>
<summary>「一行解説」を見る</summary>
<ol type="1">
<li>(l.1-2) ライブラリをインポートします。</li>
<li>(l.4) 対象のWebページのURLを用意します。</li>
<li>(l.6) <code>requests.get()</code>メソッドを使って4行目のURLに対してHTTP GETリクエストを送信し、HTMLデータを取得します。結果を<code>response</code>に格納します。</li>
<li>(l.7) 6行目の<code>response</code>を解析するためにDOMツリー構造に変換します。そのために第一引数には<code>responsex.text</code>を、第二引数には<code>html.parser</code>をセットして<code>BeautifulSoup()</code>メソッドを実行します。<code>response</code>について<code>.text</code>という属性をつけたのは、BeautifulSoupが解析可能なテキスト形式に変換する必要があるからです。また、第二引数に<code>html.parser</code>をセットしたのは、あくまでもBeautifulSoupに自体にはパース済みのHTML・XMLを操作する機能しかなく、パース自体はパーサーの役割となるからです。なお、<code>response</code>については、テキスト属性の他にも、ステータスコードを取得できる<code>.status_code</code>属性やJSONデータを取得できる<code>.json</code>属性があります。</li>
<li>(l.9) DOMツリー構造への変換が完了したので、ここからは<code>BeautifulSoup()</code>メソッド内のメソッドを使って抽出したい要素を探索します。まずは<code>find()</code>メソッドを使用して、HTML内の特定の<code>meta</code>タグを検索します。ここで第二引数に<code>{'name': 'description'}</code>を設定することで、<code>name</code>属性が<code>description</code>となっているページ名が登録されている<code>meta</code>タグのみに限定することができます。これを<code>meta_description</code>に格納します。</li>
<li>(l.10) 9行目の<code>meta_description</code>に格納された<code>meta</code>タグについて、<code>'content'</code>属性の値を<code>.get()</code>メソッドで抽出します。この<code>'content'</code>属性内の値こそが今回欲しかった値です。</li>
<li>(l.12) 続いて9行目と同様に、今度はブログ記事内の各章の見出しである<code>h2</code>タグを取得します。こちらは複数存在するため、<code>.find_all()</code>メソッドで該当する<code>h2</code>タグをすべて検索します。</li>
<li>(l.13-14) <code>h2</code>タグについて、そのまま出力するとタグごと出力されてしまうので、今回も<code>.text</code>属性を利用してテキスト部分のみ抽出し出力します。</li>
</details>
こんな具合にで簡単に取得できることが分かりましたね。処理時間も一瞬でしたね。

ちなみにこちらのブログでは記事の検索もちょっとだけ可能なのですが、検索の実行+結果からの抽出はBeautifulSoupでは難しいんですよね。。これを実現するのが、そう、Seleniumなんです。

### Seleniumを使ったWebスクレイピング実施
ということでSeleniumを使ったスクレイピングについては、検索キーワード入力→検索の実施→検索結果の出力という手順を踏みたいと思います。まずはライブラリをインストールします。
```
pip install selenium
```
続いて以下の通りコードを書いていきましょう。
<script src="https://gitlab.com/-/snippets/4777853.js"></script>
<details>
<summary>「一行解説」を見る</summary>
<ol type="1">
<li>(l.1-3) Seleniumとして利用するコンポーネントをインストールしていきます。<code>webdriver</code>とはブラウザを操作するために必要なコンポーネントです。<code>selenium.webdriver.common.keys.Keys</code>はキーボード操作を受け付けるためのモジュール、<code>selenium.webdriver.common.by.By</code>はHTMLの要素を検索する際に方法を指定するためのモジュールです。</li>
<li>(l.4) クライアントの処理に時間がかかることを想定して、<code>time</code>もインポートします。</li>
<li>(l.6-8) <code>webdriver.Chrome()</code>メソッドを利用してSeleniumのChrome WebDriverを起動します。その後URLを指定して<code>.get()</code>メソッドでページを開きます。</li>
<li>(l.10) Seleniumはクライアントでブラウザを利用して実行されるのでエラー発生を想定した処理を記述するためエラーハンドリングを記述します。</li>
<li>(l.11) 続いて検索キーワードを入力するためのフィールドを検索します。第一引数には<code>By.CSS_SELECTOR</code>とすることでCSSセレクタを使うことを指定、第二引数には<code>input</code>タグの<code>type</code>属性が<code>text</code>であることを指定して、<code>find_element()</code>メソッドでフィールドを検索します。今回はCSSセレクタを指定する方法を取りましたが、<code>TAG_NAME</code>や<code>ID</code>も利用できます。</li>
<li>(l.12-14) 検索キーワードを指定します。今回は<code>Google</code>としました。それを<code>send_keys()</code>メソッドに渡すことでフィールドへの入力を実行し、<code>send_keys(Keys.RETURN)</code>とすることでEnterキーを押下しました。これにより検索の実行が完了しました。</li>
<li>(l.17) <code>time.sleep(3)</code>として、検索結果表示までの時間を確保します。</li>
<li>(l.19-20) 続いて、検索結果の要素数をカウントします。このブログでは検索結果は長方形の<code>div</code>タグの箱で表示されるようにしていますが、クラス名はいずれも<code>ArticleItem_eachArticle</code>を含むことがわかっています。そのため、部分一致を表す<code>*=</code>でクラス名を指定して<code>find_element()</code>メソッドの第二引数に設定します。検索結果は<code>elements</code>内にリスト形式で入っているので<code>len()</code>メソッドで個数を確認します。</li>
<li>(l.23) エラーハンドリングの例外処理として<code>Except</code>を記述します。</li>
<li>(l.26) 処理が完了したら、<code>.quit()</code>でブラウザを切ります。</li>
</details>
というわけで検索キーワード入力→検索の実施→検索結果の出力が完了しました。このような動作はBeautifulSoupでは実施できないため、Seleniumの活用によりWebスクレイピングの幅を広げることができたのではないでしょうか？ただ、この程度の処理にもかかわらず約10秒要したため、使い所の見極めは大事そうです。

## まとめ
スクレイピングについて解説してきましたが、どのライブラリを使うにしろ一番のネックはWebページの構造・デザイン自体が変更されるリスクです。海外の有名なSaaSアプリ等は単なる機能追加だけでなくデザインのアップデートも頻繁になされるため、その度にコードを修正するのは骨が折れると思います。提供されているのであればWebAPI経由の方が、抜け漏れの少ない構造的な情報を取得可能なのでそちらをおすすめしたいです。

Webページの情報を自動取得する。

Next.js上でChart.jsを利用しデータ可視化をしてみました。

## はじめに
あぁぁぁWebアプリ上にダッシュボード作りてぇぇぇという気分になったのでChart.jsを触ってみることにしました。カスタマイズも少し試してみていますので良ければ参考にしてみてください。

## Chart.jsとは
[「Chart.js」](https://www.chartjs.org/)とはその名の通りデータを可視化する際に用いられるJavaScriptのライブラリで、Bar（棒グラフ）、Line（線グラフ）、Pie（円グラフ）、Radar（レーダーチャート）、Scatter（散布図）、Bubble（バブルチャート）等が描画可能です。

## 使ってみる。（基本）
描画のためのライブラリなのに文字での長ったらしい説明はうんざりですよね、なので早速グラフを作ってみましょう。今回はNext.js上での利用想定しているので、事前に以下の通り必要なライブラリをインストールしましょう。
```
npm i chart.js
npm i react-chartjs-2
```
まずは適当に用意した同じデータからBar・Line・Radarチャートを作ってみました。実際に描画できたチャートとそのコードは以下の通りです。ご覧の通り左上がBar、左下がLine、右半分がRadarです。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/chartjs-nextjs1_bnxmui"/>
<script src="https://gitlab.com/-/snippets/3752236.js"></script>
<details>
<summary>「一行解説」を見る</summary>
<ol type="1">
<li>(l.1-2) Chart.jsを利用するために必要なモジュールをインポートします。</li>
<li>(l.3) これは必須ではありませんが、画面割りを簡易化するために今回使用しています。</li>
<li>(l.5) 通常<code>Chart.register()</code>内にはスケールや凡例等の必要なコンポーネントのみを登録することでパフォーマンス向上に努める方が良しとされますが、今回は面倒なので登録可能なコンポーネントを全部登録してしまいます。そのために、<code>registerables</code>を使用します。なおregisterable内にはさまざまなコンポーネントが配列形式で用意されているため、「スプレッド構文」（<code>...</code>）を利用しないとエラーが出るのでご注意を。</li>
<li>(l.9) グラフのラベルを配列で用意しています。これはBar・LineではX軸として使われています。今回は4月-9月としました。</li>
<li>(l.10-12) Aさん-Cさんのデータを用意しました。テスト結果みたいな感じです。</li>
<li>(l.14-18) 10-12行目で用意したデータを1つにまとめて<code>datasets</code>という変数に格納します。ここでは各データに対してAさん-Cさんという名称でラベルを付与しています。9行目の<code>labels</code>とはもちろん別物なのでご注意ください。</li>
<li>(l.20-23) ここまで用意したすべての情報をまとめて<code>firstChart</code>という変数に格納します。</li>
<li>(l.28-29, l.32) Bar・Line・Radarチャートを描画します。<code><"チャート種類" /></code>に、それぞれのチャート種類を入力します。</li>
</details>
（上の例のようなデータの描画にRadarを使うことに強烈な違和感を覚えるのはさておき、）Chart.jsを利用することでデータ整形さえしっかりできていれば簡単にグラフが描画できることが分かると思います。

## 使ってみる。（応用）
続いて応用編です。今度はオプション（`options`）を利用することで、より複雑なグラフを描画してみましょう。ここでは以下のことをやってみようと思います。
- 複合グラフの作成
- カラーパレットをカスタマイズ
- ツールチップのホバー設定
- データラベルの表示

### 複合グラフの作成
実際のグラフはBarだけLineだけというよりそれらを組み合わせたものが用いられることが多いと思います。今回はBar・Lineを組み合わせて描画します。
### カラーパレットをカスタマイズ
現状のカラーパレットも良いとは思いますが、Webページ全体の構成を考えると調整したい場合もあると思うので、今回は[カラースペース]("https://mycolor.space/")というツールを利用させていただきましてカラーパレットもカスタマイズしていきます。使い方は簡単で、好きな色を選んで"Generate"ボタンを押すだけです。すると画面下部に様々な色の組み合わせが生成されるのですが、今回は"Generic Gradient"というカラーパレットを利用させていただきましょう。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/chartjs-nextjs2_old0jz"/>

### ツールチップのホバー設定
使ってみる。（基本）で作成したグラフでは、各プロットにカーソルを合わせないと正確な数値が出ませんがそれだと見づらいですよね。今回はそれを改善します。

### データラベルの表示
グラフの各要素上にその数値を表示させます。データラベルを表示させるにはプラグインを利用する必要があるため、`chartjs-plugin-datalabels`というプラグインを予めインストールしておきます。
```
npm install chartjs-plugin-datalabels
```

### 描画（応用）
では上記ポイントを踏まえてグラフを描画していきましょう。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/chartjs-nextjs3_mho4sz"/>
<script src="https://gitlab.com/-/snippets/3754540.js"></script>
<details>
<summary>「一行解説」を見る</summary>
<ol type="1">
<li>(l.1-4) 上記の使ってみる。（基本）と同様に利用するモジュールをインポートします。また4行目の通り事前にインストールしておいた<code>ChartDataLabels</code>プラグインもインポートしておきましょう。</li>
<li>(l.6-7) 上記の使ってみる。（基本）と同様に<code>registerable</code>を登録します。また、4行目でインポートした<code>ChartDataLabels</code>プラグインについては7行目の通り別途登録する必要があります。</li>
<li>(l.9-16) 上記の通りツールを利用してしてカスタムカラーパレット作成に必要な色とその情報（HEX値）が揃ったので、ここではその値を配列型で入力し<code>colorPalette1</code>に格納します。</li>
<li>(l.20-25) グラフ描画のための元データです。ここの説明は割愛します。</li>
<li>(l.27-33) 上記の使ってみる。（基本）と同様に21-25行目で用意したデータを1つにまとめて<code>datasets</code>という変数に格納します。<code>label</code>と<code>data</code>は基本と同じですが、その後に続く部分は新しく追加となったので説明します。<code>type</code>ではグラフの種類を指定できます。他にも<code>"pie"</code>というものが利用可能です。<code>backgroundColor</code>と<code>borderColor</code>はそれぞれBarとLineに指定しています。<code>order</code>は必須ではないですが、重なったデータの重なり順を指定可能です。番号は低いほど前に表示されます。</li>
<li>(l.35-58) データラベルとツールチップのホバーを設定するために、オプション（<code>options</code>）を操作します。これにはいくつかの値を設定できますが、今回は<code>plugins</code>と<code>interaction</code>の内容を修正していきます。37-39行目では凡例<code>legend</code>の表示位置を指定しています。デフォルトでは<code>"top"</code>です。40-43行目ではチャートのタイトル<code>title</code>を表示させています。44-53行目ではインポートした<code>ChartDataLabels</code>プラグインを利用してデータラベル<code>datalabels</code>について指定しています。45行目では<code>color</code>としてラベルの色を指定します。46-47行目ではラベルの表示位置を調整しています。<code>align</code>ではラベルを基準点から見てどこに表示するか、<code>anchor</code>ではその基準点をどこに置くかを設定します。それぞれ<code>context.dataset.type</code>を含む条件式を書いていますが、ここの<code>type</code>というのが28-32行目で設定しているグラフの形を参照させています。48-51行目ではラベルのフォントについて設定しています。また今回は使用していませんが、<code>formatter</code>というパラメータを利用するとラベル上に各ラベルに"kg"というような単位を設定することができるので便利です。続いて<code>interaction</code>側の設定です。<code>interaction</code>ではグラフに対してホバーやクリック等のマウス操作を実施した場合の挙動を設定できます。今回はツールチップのホバー設定を変更します。55行目で<code>mode</code>を<code>"index"</code>とすることでx軸に並ぶ全データセットのデータポイントを同時にホバーすることができます。56行目で<code>intersect</code>を<code>false</code>とすることで、ポイントの上にカーソルがなくてもツールチップを表示させることができます。</li>
<li>(l.60-63) ここまで用意したすべての情報をまとめて<code>secondChart</code>という変数に格納します。</li>
<li>(l.68) チャートを描画します。<code><"チャート種類" /></code>に<code>secondChart</code>を入力した上で<code>options</code>を指定します。</li>
</details>

## まとめ
Chart.jsを使えば本格的なグラフの描画が可能なことが分かりました。またMUIでも似たようなグラフの描画が可能なようなのでいつか試してみたいと思います。

Chart.jsを使いこなす。

News APIを使って巷のニュースを拾い上げてみた。

## はじめに
さて、最後の更新からおよそ10ヶ月経ってしまいました。毎週更新が目標だったのに。。というわけで、今後は毎月更新に下方修正してこれからも頑張りたいと思います（？）。さて復活第一弾はNews APIを使ってみた、です。RSSリーダーのような機能を自作のWebアプリにも搭載してみたいなと思い、試しに使ってみたのでここでまとめてみます。

## News APIとは
[「News API」](https://newsapi.org/)とは世界中のニュースをかき集めたサービスで、利用者はREST APIでニュースを取得できます。[無償版・有償版](https://newsapi.org/pricing)があり、HPを確認する限りでは有償版は企業でも利用されているようですが、記事更新が24時間遅れ、100リクエスト/日などの制約に目を瞑れば十分有用だと思うので今回は無償版を利用させていただきましょう。また、今回Pythonを使用してAPIを叩きますが、その他にもNode.js, Ruby, PHP, Java, C#が利用できるようです。利用までの大まかな流れは以下の通りです。めっちゃ簡単です。イージーピージー。
1. 利用登録・APIキー取得
2. APIを叩く

## 1. 利用登録・APIキー取得
一般的に、サービス利用時に求められる情報の提供さえすればAPIキーは取得可能なので、ここは省きます。

## 2. APIを叩く
News APIには「Everything」`/v2/everything`と「Top headlines」`/v2/top-headlines`の2種類のエンドポイントがありますが、今回は「Everything」を使います。それぞれパラメータが異なるので注意してください。

<script src="https://gitlab.com/-/snippets/3746930.js"></script>
<details>
<summary>「一行解説」を見る</summary>
<ol type="1">
<li>(l.1-3) <a href="https://newsapi.org/docs/client-libraries/python">公式ドキュメント</a>を確認すると<code>newsapi-python</code>というライブラリが使われているようですが、PythonでのHTTP通信によく使われる<code>requests</code>で代用可能なので今回はこちらを使います。その他、取得したデータを整形するための<code>pandas</code>もインポートします。
<li>(l.5-12) HTTPリクエスト時のパラメータを設定しています。<code>apiKey</code>はNews API登録時に取得したものです。また今回のニュース検索では検索クエリとして<code>q</code>、検索対象言語として<code>language</code>、検索条件として<code>sortBy</code>、期間指定として<code>from</code>と<code>to</code>を設定しています。<a href="https://newsapi.org/docs/endpoints/everything">検査対象言語</a>としては残念ながら日本語は設定できませんが、英語をはじめいくつかの言語が設定できるようです。デフォルトでは言語に関係なく返されますが、今回はフランス語（<code>fr</code>）を設定してみました。検索条件には<code>popularity</code>を設定しており、閲覧数の多いソース・出版社からの記事が優先されます。最後に、期間指定を指定しました。</li>
<li>(l.13-15) URLにはAPIのエンドポイントを、<code>get()</code>メソッド内にパラメーター（<code>params</code>）と一緒に設定します。レスポンスは<code>json()</code>メソッドを利用しJSON形式としてパースします。</li>
<li>(l.17) 最後にJSON形式のままでは利用しづらいため、DataFrame形式に変換しましょう。実際の記事データは、<code>articles</code>という配列の中に格納されているので、この部分だけ抜き出しますが、今回はJSON形式からの変換となるため、<code>pd.DataFrame()</code>メソッドではなく<code>json_normalize()</code>メソッドを利用します。</li>
</details>

## まとめ
今回はあえてフランス語での検索をしてみましたが、日本語のキーワードを入力すれば日本語の記事が返ってきます。しかし前述の通り日本語指定検索は非対応のため、一部中国語の記事が返されてしまいました。その後正規表現ライブラリを利用すればできなくはないですが、使いこなすには色々と工夫が必要そうです。

News APIでニュースを取得する。

Pythonを使ってGoogle Driveにファイルをアップロードしたりダウンロードしたりして遊んでみました。

## はじめに
当方Google教原理主義者につき何から何までGoogleを利用していますが、もうデータベースまでGoogle様を利用することにしました。でも敬虔故に（？）無料で使用可能なGoogle Driveを今回は利用します。

## アップロードダウンロードの準備・流れ
Google Driveへのファイルアップロード・ダウンロードには[「Google Drive API」](https://developers.google.com/drive/api/guides/about-sdk?hl=ja)というライブラリが公式で用意されているためこちらを利用しましょう。またアップロード・ダウンロードするファイルには、前回[Pythonで株価情報を取得・チャート化してみた。](https://techblog.futosh1.com/blogs/python-stock-data)で使用したデータを使ってみたいと思います。全体の流れとしては以下の通りです。
1. Google Drive APIの有効化
2. Google Drive設定
3. csvファイルのアップロード・csvファイルのダウンロード

## 1. Google Drive APIの有効化
### APIの有効化
Google Drive APIを利用するにはGoogle Cloud Platform（以下GCP）からAPIの有効化が必要です。まずは[このリンク](https://console.cloud.google.com/marketplace/product/google/drive.googleapis.com?q=search&referrer=search&hl=ja&project=) にアクセスして"有効にする"のボタンを押してください。

### サービスアカウントの作成
続いてGCPで下画像の通りサービスアカウントを作成します。

#### サービスアカウントって？
[「サービスアカウント」](https://cloud.google.com/iam/docs/understanding-service-accounts?hl=ja)とはGoogle APIを利用するための認証情報の1種です。Googleは数多くのAPIを提供していますがAPIの利用には認証が必要になります。他の認証手段としては「APIキー」と「OAuth 2.0 クライアントID」の2つがありますが、それぞれ取得情報と取得主体に応じて以下のような使い分けがされています。
* APIキー・・・一般に公開されている情報を取得する際に、直接アクセスして利用します。
* OAuth 2.0 クライアントID・・・一般への公開・非公開にかかわらず情報を取得する際に、Googleアカウントを持つユーザー認証経由でアクセスして利用します。
* サービスアカウント・・・一般への公開・非公開にかかわらず情報を取得する際に、人間ではないサービスアカウント経由でアクセスして利用します。

例えば、Googleマップの情報やYouTubeの情報を取得する場合にはAPIキーが利用できますが、今回はGoogle DriveへのアクセスとなるためOAuth 2.0 クライアントIDもしくはサービスアカウントでアクセスする必要があります。しかし、OAuth 2.0 クライアントIDの場合、現在の当方の環境（外部ユーザへ開放されている、かつTesting版）ではRefresh Tokenが7日間で失効するという制約があったため、サービスアカウントを使用することにしました。

#### サービスアカウント作成
[こちらのリンク](https://console.cloud.google.com/apis/credentials?hl=ja&project=)からも飛べますが、GCPから"APIとサービス" > "認証情報"で下の画面に行けます。この画面から、"認証情報を作成" > "サービスアカウント"をクリックしてください。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/python-gdrive-updownload1_ttvbmv">
下画像の通りサービスアカウント作成画面に遷移したら、詳細を設定していきます。まずは赤枠の通りサービスアカウント名を入力しましょう。するとサービスアカウントIDが自動で入力されるので、それで問題がない場合はそのまま使用してOKです。サービスアカウント名とサービスアカウントIDが入力できたら、一旦ここでは完了ボタンを押してください。上画像のサービスアカウント欄に今作成したサービスアカウントが確認できると思います。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/python-gdrive-updownload2_fxtxki">

#### 秘密鍵作成
次に秘密鍵を作成しましょう。サービスアカウント欄に上で新規作成されたサービスアカウントが表示されていると思いますが、一番右にペンのアイコンがあると思います。それをクリックすると下画像のような"IAMと管理"というページに飛びます。画面左のナビゲーションで"サービスアカウント"が選択されていること、主画面上のタブで"キー"が選択されていることを確認した上で、"鍵を追加" > "新しい鍵を作成"というボタンを押してください。すると下画像の通りダイアログが出てきます。ここでキーのタイプを"JSON"の状態にしたまま"作成"ボタンを押すとJSONファイルがダウンロードされます。このJSONファイルがAPIを利用する際の秘密鍵となりますので、今回作成するPythonファイルと同じディレクトリに格納しておいてください。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/python-gdrive-updownload3_jrbmrt">

## 2. Google Drive設定
#### サービアカウントのメールアドレス
GCP側の設定が終わったら次はGoogle Drive側の設定ですが、その前に1つGCP側から重要な情報を控えてくる必要があります。メールアドレスです。2つ上の画像内で、サービスアカウントIDというものが出てきましたが、ここに"abcde-460@quicstart-~~~~~.iam.gserviceaccount.com"という情報があると思います。このメーアドレスがGoogle Drive側の設定で必要になりますのでコピーしておきます。コピーできたら早速Google Driveを開きましょう（※[URL](https://drive.google.com/drive/my-drive)）。
#### Google Driveに移動・設定
ここで適当にフォルダを作ってください。参考までに`sample_folder`としました。`sample_folder`内に遷移しパンくずリストの`sample_folder`をクリックし、下画像のように"共有" > "共有"を押してください。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/python-gdrive-updownload4_daonjd">
すると下のようなダイアログが出てきます。ここで先ほど控えておいたメールアドレスを入力して（任意ですが）"通知"を外すと"共有"ボタンが出てきます。これをクリックしたらGoogle Drive側の設定は完了です。これでPythonコードからアクセスできるようになりました。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/python-gdrive-updownload5_z7dv2t">

## 3. csvファイルのアップロード・csvファイルのダウンロード
ようやく準備が整ったので、最後にcsvファイルをアップロード・ダウンロードするための記述をしていきましょう。今回は`updown_sample.py`というファイルを作ってそこに記述していきます。また、先ほど作成したJSONファイルの秘密鍵を同じディレクトリ内に格納しましょう。格納する際にはこのJSONファイル名を`client_secrets.json`に変更しておいてください。


<script src="https://gitlab.com/-/snippets/3619823.js"></script>
<details>
<summary>「一行解説」を見る</summary>
<ol type="1">
<li>(l.3-20) 参考情報として前回<a href="https://techblog.futosh1.com/blogs/python-stock-data">Pythonで株価情報を取得・チャート化してみた。</a>で使用したデータをインポートして出力しています。</li>
<li>(l.22) 入出力に関わるモジュールをインポートします。今回は<code>BytesIO()</code>メソッドをダウンロード時に利用します。</li>
<li>(l.23) サービスアカウントを用いて認証を行うために必要なモジュールをインポートします。</li>
<li>(l.24) Google API サービスのクライアントオブジェクトを作成するためのモジュールをインポートします。</li>
<li>(l.25) ファイルのアップロード・ダウンロードに使用するモジュールをインポートします。</li>
<li>(l.27) 上でディレクトリに格納済みのサービスアカウントの秘密鍵のパスです。</li>
<li>(l.28) Google Driveにおいてアップロード先・ダウンロード元のフォルダのIDを指定します。先ほど、<code>sample_folder</code>というフォルダをGoogle Drive上に作成しましたがそのフォルダのIDとなります。IDについてはフォルダを開いた際のURLから取得できます。（URLの最後のディレクトリそのものです。）</li>
<li>(l.29) 今回利用するデータをアップロードするために格納するファイルの名前です。</li>
<li>(l.31-34) サービスアカウントの秘密鍵を利用して認証を設定します。引数にはサービスアカウントの秘密鍵のパスと、Google Drive API に対する読み取り/書き込みの権限を指定する<code>scopes</code>を設定しています。今回利用するスコープではドライブにあるすべてのファイルを表示・管理できます。なお、<code>scopes</code>の種類については<a href="https://developers.google.com/drive/api/guides/api-specific-auth?hl=ja">こちら</a>、<code>service_account</code>に関わるGitHubレポジトリは<a href="https://github.com/googleapis/google-auth-library-python/blob/main/google/oauth2/service_account.py">こちら</a>をご利用ください。</li>
<li>(l.36) Google Drive APIの「クライアントライブラリ」を<code>build()</code>メソッドを用いて作成します。クライアントライブラリとはGoogleのAPIと通信を行い様々な操作（取得・作成・削除等）するためのオブジェクトのようなものです。引数にはGoogle Drive APIを指す<code>"drive"</code>、対象のAPIのバージョンを指す<code>"v3"</code>、 (l.31-34) で設定した認証情報を指定しています。</li>
<li>(l.38-41) アップロードするファイルの名前と配置先のフォルダを指定するためにメタデータを指定します。</li>
<li>(l.43) Google Drive APIの<code>MediaFileUpload</code>というクラスを利用してアップロードのためのインスタンスを作成しています。第一引数にはアップロードしたいファイルのファイルパスを指定します。第二引数には<code>resumable=True</code>とすることで、アップロードが中断された場合に再開できるように、リジューマブル（再開可能）なアップロードを有効にしています。これにより大きなファイルのアップロード時に途中で接続が切れた場合に再開が可能となります。</li>
<li>(l.44) 実際にGoogle Driveにファイルをアップロードする部分です。<code>build()</code>メソッドで作成したクライアントライブラリに対して<code>.files()</code>メソッドを呼び出すことでファイル操作関連のリソースを呼び出します。さらに<code>.create()</code>メソッドでファイルを作成し、引数として<code>body</code>と<code>media_body</code>内にそれぞれ上で作成した<code>file_metadata</code>と<code>media</code>を指定します。<code>fields</code>にはレスポンスとして返される情報として今回は<code>id</code>のみ指定しています。最後に<code>.execute()</code>メソッドを呼び出すことで、処理を実行をします。これでファイルアップロードは完了です。</li>
<li>(l.48) これ以降はファイルダウンロードに関わる部分です。ファイルの有無を検索するためのクエリを作成します。</li>
<li>(l.49-50) ここでは<code>file_path</code>が空でない（具体的なファイル名が指定されている）場合、かつ<code>folder_id</code>が指定されている場合に、<code>parents</code>フィールドが指定されたフォルダ内で検索する条件を追加しています。これにより、特定のフォルダ内で指定されたファイル名に一致するファイルを検索する条件が構築されます。</li>
<li>(l.52) 実際にGoogle Drive内からファイルを検索する部分です。ファイル作成時でも利用した、<code>build()</code>メソッドで作成したクライアントライブラリに対して<code>.files()</code>メソッドを呼び出しています。ここでは検索を実行したいので、引数として (l.48) で作成したクエリを指定することで指定条件に一致するファイルを<code>.list()</code>メソッドで検索しています。</li>
<li>(l.53) 実行結果は辞書形式でその中の<code>"files"</code>キーに検索結果のファイルリストが格納されています。<code>.get()</code>メソッドを使ってこのキーにアクセスし、検索結果を取得しています。もし<code>"files"</code>キーが存在しない場合には空のリストが返されます。</li>
<li>(l.58-59) ここでは検索結果の有無で場合分けをしていますが、存在する場合には最初に見つかったファイルの情報にアクセスし、そのファイルIDを変数<code>downloaded_file_id</code>に格納しています。見つかったファイルは後でターミナルから確認できるように、 (l.59) の通り出力しておきます。</li>
<li>(l.61) (l.44)ではアップロードするために<code>build()</code>メソッドで作成したクライアントライブラリに対して<code>.files()</code>メソッドを呼び出してファイル操作関連のリソースを呼び出した上で<code>.create()</code>メソッドでファイルを作成しました。今度はパラメータに先ほどの変数<code>downloaded_file_id</code>を指定して<code>.get_media()</code>メソッドでファイルダウンロードの準備をします。</li>
<li>(l.62-63) ここでは (l.62) と (l.63) でダウンロードするファイルに対してのその形式を指示していますが、 (l.62) についてはお試しでローカルに書き込んでいるだけなので飛ばしてもらって構いませんが、もしこのコード例のようにローカルにダウンロードしたい場合は、引数にダウンロードする際のファイル名とバイナリでの書き込みを意味する<code>"wb"</code>を指定して<code>io.FIle()</code>メソッドでファイルを開きます。続いて、 (l.63) については<code>io.BytesIO()</code>メソッドを利用することでメモリ上に一時的にダウンロードするようにします。</li>
<li>(l.64-65) その後Google Drive APIの<code>MediaIoBaseDownload</code>クラスを利用して (l.61-63) で設定した情報をもとにそれぞれローカル・メモリにダウンロードするためのインスタンスを作成します。</li>
<li>(l.67-71) この部分については、 (l.73-77) でカバーしているため省略します。</li>
<li>(l.73-77) ここからインスタンスをもとに実際にデータをダウンロードしていきます。
<ul>
<li>(l.73) いきなり<code>done1 = False</code>としていますが、変数<code>done1</code>を<code>False</code>初期化することによってダウンロードが完了したかどうかを示すフラグを用意して、次の<code>while</code>に備えています。</li>
<li>(l.74-75) <code>MediaIoBaseDownload</code>クラス内の<code>next_chunk()</code>メソッドを呼び出して、複数のかたまりに分割してGoogle Driveからファイルをダウンロードする部分です。<code>status1</code>にはダウンロードの進捗情報が含まれ、ダウンロードが完了したかどうかを示すフラグが更新されます。</li>
<li>(l.76) <code>MediaIoBaseDownload</code>クラス内の<code>.progress()</code>メソッドを利用してファイルダウンロードの進捗率を表示します。</li>
<li>(l.77) 続いて (l.63) で作成した<code>io.BytesIO()</code>のオブジェクトである<code>fh1</code>に対して、<code>.seek(0)</code>とすることでファイルポインタの位置を"0"=先頭に戻しています。通常ファイルを読み取り後に再度同じファイルを読み取る際、ファイルポインタがファイルの最後に進んだままだと何も読み取れないません。そのためファイルポインタをファイルの先頭に戻しておくことで期待通り全データを取得できるようにしています。</li>
</ul>
</li>
<li>(l.79-80) 最後に取得したデータをDataFrame形式で出力しましょう。</li>
<li>(l.82-95) (l.7-20) と同じ結果が出力されていれば成功です。</li>
</ol>
</details>


これで`updown_sample.py`によるファイルのアップロード・ダウンロード設定が完了しました。

## まとめ

今回Google Drive APIの基本操作として「アップロード」、「検索」、「ダウンロード」の3種類を実行しました。CRUDなアプリケーションを作るのには物足りないですが、個人的にはデータベース代わりに少量のデータを保管・読み取りするだけなら使えそうだなという印象です（がいかがでしょうか？）。

PythonでGoogle Driveにファイルをアップロード・ダウンロードする。

Pythonで特定の企業の株価を取得してチャート化する方法についてまとめました。

## はじめに
2024年から新NISAが始まりますがみなさん準備はできていますでしょうか？私ですか？何もしてないですよ。でもとりあえず何かやらなきゃということで、気になる企業の株価推移だけでも取得・チェックできるようになっておきましょう。

## ステップ
今回株価取得・チャート化にあたって、以下のステップで実施していきたいと思います。
1. Yahoo Finance APIでデータを取得し表形式に変換
2. 表形式にしたデータをチャート化

## 1. Yahoo Finance APIでデータを取得し表形式に変換
株価を取得するための方法についていろいろ調べてみましたが、[「yahoo_finance_api2」](https://pypi.org/project/yahoo-finance-api2/)と[「pandas-datareader」](https://pypi.org/project/pandas-datareader/)とAPIが利用できそうです。今回は前者を使わせていただきましょう。なお、pandas-datareaderについてはpandasという名前がついているように、元はpandasの一部だったようです。公式ドキュメントはそれぞれ以下の通りです。
・yahoo_finance_api2：[URL](https://github.com/pkout/yahoo_finance_api2/tree/master)
・pandas-datareader：[URL](https://pandas-datareader.readthedocs.io/en/latest/#)です。

### ライブラリインストール
yahoo_finance_api2を利用するためのライブラリと、表への変換のために利用するpandasをインストールします。
```
pip install yahoo_finance_api2
pip install pandas

```


### データ取得→表形式に変換
データ取得、表形式の変換は以下の通りです。公式のコードを参考にしております。
<script src="https://gitlab.com/-/snippets/3615959.js"></script>
<details>
<summary>「一行解説」を見る</summary>
<ol type="1">
<li>(l.2-3) <code>yahoo-finance-api2</code>の<code>share</code>モジュールをインポートします。<code>share</code>モジュールは 
 (l.17) で使用されますが株価データを取得するためのメソッドが含まれます。また、<code>yahoo-finance-api2</code>の<code>YahooFinanceError</code>モジュールはエラー表示を可能にします。</li>
<li>(l.7) 今回株価を取得する3社の証券コードになります。順番に、JR東日本・JR西日本・JR東海です。証券コードはWeb検索で出てきますので、好きなものを見つけてきてください。</li>
<li>(l.9-11) 各証券コードの末尾に".T"という文字列を付け足す処理をしています。これにより東証における証券コードであることを明示しており、4桁の数字の組み合わせが一意のものになります。</li>
<li>(l.13-26) 上の操作で東証コード化した3社の証券コードについて、APIを叩いてデータを取得していきます。取得した株価は (l.13) に格納していきます。
<ul>
 <li>(l.15-16) 各社のコードについて、try-exceptで株価を取得します。</li>
 <li>(l.17) 証券コードを引数にして、(l.2)でインポートした<code>share</code>の<code>Share</code>クラスでインスタンス化します。</li>
 <li>(l.18) 上で作成したインスタンスについて、<code>.get_historical()</code>メソッドを利用して実際に株価データを取得していきます。</li>
 <li>(l.19) <code>.get_historical()</code>メソッドの引数として<code>share.PERIOD_TYPE_YEAR</code>を記述し年次データを取得します。今回は"5"とあるように5年分のデータを取得します。</li>
 <li>(l.20) <code>.get_historical()</code>メソッドの引数として<code>share.FREQUENCY_TYPE_MONTH</code>を記述しデータの取得間隔を指定します。今回は"1"とあるように1ヶ月間隔でデータを取得します。</li>
 <li>(l.21) (l.20) まででデータ取得はできていますが、ここから (l.23) まではデータを見やすくするための処理を記述していきます。まずは"timestamp"列の情報をもとに<code>len()</code>メソッドでデータの数量を確認します。</li>
 <li>(l.22) 今回は3社の情報を取得しますがデフォルトではそれを判別する術がないので、ここでは証券コード列を株価データ<code>stock_data</code>の最終列に追加するという記述です。</li>
 <li>(l.23) 最終列に証券コードを追加した株価データ<code>stock_data</code>を (l.13) の<code>stock_data_list</code>リストに一旦格納します。これを残り2社分for文を回して実施します。</li>
 <li>(l.24) 例外処理を記述します。(l.3) で追加した<code>YahooFinanceError</code>を利用します。</li>
 <li>(l.25) エラーの場合、 (l.24) で検出したものを出力します。</li>
 <li>(l.26) エラーの場合、<code>sys.exit(1)</code>メソッドで処理を終了します。</li>
</ul>
</li>
<li>(l.28-31) APIで取得した株価データは (l.13) の通り<code>stock_data_list</code>リストに格納されているので、これを一つずつDataFrame化していきます。</li>
<li>(l.33-35) DataFrame化した株価データを、証券コード別に分けます。</li>
<li>(l.37-39) 株価データは全てtimestampがついているので、これをもとに取得時間を取得します。<code>unit="ms"</code>とすることでミリ秒まで正確に取得可能です。</li>
<li>(l.41-43) (l.37-39) で取得できている時間は日本時間ではないので、新しく時間を計算して再度株価データ<code>stock_data</code>に追加します。</li>
<li>(l.45-47) 最後に出力すると (l.40) 以降にあるように結果が出力されます。</li>
<li>(l.49) 既出のもの以外で取得できる情報として、open（始値）から順番に、high（高値）、low（安値）、close（終値）、volume（出来高）の通りです。</li>
</ol>
</details>


上記の通り3社（JR東日本・JR西日本・JR東海）の5年分の株価データを取得できたところで、続いてチャート化していきましょう。


## 2. 表形式にした株価データをチャート化
株価データのチャート化には[「matplotlib」](https://pypi.org/project/matplotlib/)というライブラリを利用します。公式のHPは[こちら](https://matplotlib.org/)です。

### ライブラリインストール
下の通りmatplotlibをインストールします。

```
pip install matplotlib
```

### 表形式の株価データ→チャート化
それでは表形式にした株価データをチャート化していきます。

<script src="https://gitlab.com/-/snippets/3616025.js"></script>
<details>
<summary>「一行解説」を見る</summary>
<ol type="1">
<li>(l.3) <code>matplotlib</code>の<code>pyplot</code>モジュールをインポートします。<code>pyplot</code>モジュールによってチャートの描画が可能になります。</li>
<li>(l.5-8) 今回は3社の株価データを折れ線グラフにして表示したいと思います。x軸を年月、y軸を株価としてデータをプロットしていくイメージです。それぞれ株価データ<code>stock_data</code>の月の列と終値の列を抜き出して変数に入れていきましょう。</li>
<li>(l.10-12) <code>pyplot</code>モジュールの<code>plot</code>メソッドでパラメータを設定していきます。(l5.8) のデータとともに<code>marker</code>（プロットする点の形式）、<code>linestyle</code>（線の種類）、<code>color</code>（色）、<code>label</code>（凡例（legend）に表示されるラベル）を設定します。今回はお試しなので色々変えてみました。</li>
<li>(l.14-16) チャートのタイトルと軸のラベルを設定します。</li>
<li>(l.18) (l.10-12) で設定した<code>label</code>をチャート内に表示します。</li>
<li>(l.20) 最後にチャートを表示します。</li>
</ol>
</details>

すると下図のようにチャートを描画することができました。下図内下方の赤枠にセーブボタンと思しきボタンがありますが、これを押下すると画像を保存できるようになります。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/python-stock-data1_stj1je"/>


## まとめ
以上で、株価データの取得とチャート化がPythonでできました。matplotlib公式に[チートシート](https://matplotlib.org/cheatsheets/)も用意されているので、これを参考にパラメータを設定してチャートをいじってみると面白いと思います。なお、これができたからと言って株に詳しくなるわけではないので悪しからず。

Pythonで株価情報を取得・チャート化してみた。

PythonからLINE Messaging APIを叩いて何かしらの情報を通知する仕組みを作ってみました。

## はじめに
物事を極めるために「継続は力なり」よく言われますが、慣れないこと・得意でないことだとつい逃避行動に走ってしまうのが人の性。でも上手く仕組み化さえできれば用を足すかの如く案外習慣化するものです。私の場合、「今年こそは資産運用に力を入れたい」と年初の抱負で毎年語るのですが、結局1年経っても資産は微増です。そこでまずは簡単なことから習慣化してみようということで「注目している銘柄の株価を毎日確認すること」だけやってみたいと思います。それを実現するために、毎日確実に利用するSNSであるLINEで通知されるようにすれば、アプリアイコン上の「通知バッジ」は消さないと気が済まない自らの性に合うと思ったのでその仕組みのベースをまずは作ってみます。※株価情報取得との組み合わせはまた別途まとめます。

## ステップ
今回は下の2つのステップで仕組みを作りたいと思います。
1. LINE Messaging API側の準備
2. Pythonで実装

## 1. LINE Messaging APIの設定
[「LINE Messaging API」](https://developers.line.biz/ja/services/messaging-api/)とはLINEが提供するAPIで、メッセージ送付の自動化等ができるものです。これの利用にあたっては「LINE Developers」への登録が必要となります。

### LINE Developersへの登録
[LINE Developers](https://developers.line.biz/ja/)登録には既存のLINEアカウント・ビジネスアカウントからも作成可能でメールアドレスさえあれば新規作成も可能なようです。ただし、ビジネスアカウントで作成すると後ほど出てきますが"あなたのユーザーID"が非表示となり今回やりたいことができなくなってしまうため、今回は既存のLINEアカウントで作成しましょう。諸々情報入力して登録が完了したら、[ここ](https://developers.line.biz/ja/services/messaging-api/)から"今すぐはじめよう"でMessaging APIを利用するためのチャネルを作成します。

### チャネル作成
チャネル作成についても基本的には利用情報を入力するだけですが、以下2点については一応仕組みを理解しておきましょう。
* プロバイダー・・・チャネルを束ねる開発者の管理情報です。既に作成済みであればそれを選択すれば良いですが今回は初めてなので、「新規プロバイダー作成」を選択してプロバイダー名を入力し、新しく作成しましょう。
* チャネル・・・プロバイダーによって作成されるサービスのことを指します。1プロバイダーに対して、チャネルは複数作成し紐付け可能です。

詳しくは[公式ドキュメント](https://developers.line.biz/ja/docs/line-developers-console/overview/#channel)にも記載があります。

### アクセストークン発行
続いてAPIを利用するためのアクセストークンを発行します。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/line-api-python1_ajfxad">
上のセクションでチャネル作成は完了したと思いますが、そのチャネル内に"Messaging API設定"タブがあるのでこれをクリックし、画面最下部までスクロールします。すると（上の画像では隠れていますが）"チャネルアクセストークン"の"発行"というボタンがあるのでこれをクリックするとアクセストークンが発行できるので、安全な場所に一度保管しておいてください。

続いて、同チャネル内"Messaging API設定"タブの横に"チャネル基本設定"というタブがあるので同様に画面最下部までスクロールすると、下から3番目あたりに"あなたのユーザーID"という項目があります。こちらもコピーだけして安全な場所に保管しておいてください。

### チャネルの友だち登録
この時点でLINEアカウント（チャネル）は既に作成されていますが、Python側からメッセージを送付するには既存のLINEアプリ側からLINEアカウント（チャネル）を友だち登録する必要があります。再度"Messaging API設定"タブ側に戻るとQRコードがあるのでこれをスマホで読み取って友だち登録しておきます。

これでLINE Messaging API側の準備が完了しました。続いてPython側で実装していきます。

## 2. Pythonで実装
実装にあたり、[公式ライブラリ](https://github.com/line/line-bot-sdk-python)が公開されているので、以下の通りインストールして効率よく実装していきましょう。
```
pip install line-bot-sdk
```
※なお[Python以外の言語](https://developers.line.biz/ja/docs/messaging-api/line-bot-sdk/#official-sdks)でも同様にライブラリが用意されているようです。

インストールが完了したら、以下の通りコードを書いていきます。

<script src="https://gitlab.com/-/snippets/3611182.js"></script>

### .envファイル
アクセストークン発行時に控えておいた、"チャネルアクセストークン"と"あなたのユーザーID"を環境変数として設定しPythonファイルから呼び出せるようにしておきます。
### line_api_sample.pyファイル
特別難しいことはしていませんが、<code>linebot</code>モジュールから<code>LineBotApi</code>をインポート、<code>linebot.models</code>から<code>TextSendMessage</code>をインポートします。それぞれ環境変数から値を呼び出して、メッセージをプッシュしてあげることでスマホの既存のLINEアプリ側にメッセージが送信されます。

## まとめ
これでPython側からメッセージを送付する仕組みを作ることができました。"Messaging API"タブを確認すると他にも"応答メッセージ"や"あいさつメッセージ"があるのでこれらを設定することでより双方向性の高いコミュニケーションが取れるようになると思います。また、このコードをHeroku等にアップロードすると、Cron設定も簡単にできるため定期的にメッセージ送付が可能になります。いずれも今後まとめようと思います。

PythonからLINEに通知する仕組みを作ってみた。

Google Search Consoleに蓄積されたデータをPythonで取得してみました。

## はじめに
以前、[Pythonで「Googleアナリティクス（以下、GA4）」のデータをAPI経由で取得する方法](/ga4-data-python)についてまとめましたが、今回は同様に「Google Search Console」でもやってみたいと思います。ちなみにGA4（およびUA）がWebページへの流入後のデータを主に取得するのに対して、Google Search Consoleでは流入前のデータを主に取得します。

## 利用するツール
PythonでAPIを叩くために今回は[「Google Search Console API」](https://developers.google.com/webmaster-tools?hl=ja)というものを使います。こちらは[無料](https://developers.google.com/webmaster-tools/pricing?hl=ja)で利用することができ、自然検索経由での流入に関連するデータを取得することができます。今回は検索クエリ、インプレッション数、クリック数、CTRを取得してみようと思います。それぞれの用語の説明は以下の通りです。
* 「検索クエリ」・・・ユーザーが検索する際に使用された単語および単語の組み合わせ。検索語句とも呼ばれる。
* 「インプレッション数」・・・WebページがGoogle検索において検索結果として表示された回数。この指標はユーザーが当該ページのリンクが確認できる部分までスクロールされなくてもカウントされる。表示回数とも呼ばれる。
* 「クリック数」・・・Google検索結果として表示されたURLがクリックされた回数。
* 「CTR」・・・クリック率 / インプレッション数で表される値。Click Through Rateの略でクリック率とも呼ばれる。

なお前提として、前回GA4データを取得した時と同じ環境で実行することを想定しているので、予めご了承ください。

## API利用
### Google Search Console側の設定（1/2）
#### Google Cloud Platform設定
前回、Google Cloud Platform（GCP）側でプロジェクトを作成しましたが今回は同じプロジェクトで実施するため、GCPでの新規プロジェクト作成は不要です。ただし、前回生成したJSONファイルはそのまま利用します。
#### Google Search Consoleの設定
GA4同様、JSONファイル内の"client_email"をGoogle Search Console内に設定していきます。[設定] → [ユーザーと権限] → [ユーザーを追加]内に、"client_email"を追加、[権限]は一旦「フル」で良いと思います。※必要に応じて変更してください。これでGoogle Search Console側の設定は完了です。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/gsc-data-python1_o0j9v6"/>

### Python設定（2/2）
続いて、Pythonプロジェクト側で[Google API Python Client](https://github.com/googleapis/google-api-python-client)というライブラリをインストールします。
```
pip install google-api-python-client
```
あとは~雰囲気的にはGA4と似ているので~GA4同様に下のようにコードを記述していくだけです。
<script src="https://gitlab.com/-/snippets/3607969.js"></script>

参考までに、[公式のパラメータ一覧](https://developers.google.com/webmaster-tools/v1/searchanalytics/query?hl=ja#dimensions)を載せておきます。GA4ほどではないですが、こちらでも色々と試してみる甲斐ありそうです。

## まとめ
これでGoogle Search Consoleに蓄積されている検索結果についても取得することができるようになりました。取得回数に制限はありますが無料で利用できるのは助かりますね。GA4と組み合わせて自分だけのダッシュボードを作ってみても良いかもしれませんね。

Google Search ConsoleのデータをPythonで取得する。

SNSシェアを想定してOGPを設定しました。

## はじめに
「OGP」とは(Open Graph Protcol)の略で、SNSでページがシェアされる際に、シェアしたコンテンツの視認性を向上させるものです。例えばネットで検索した記事をSNSでシェアしようとすると、画像と説明付きのリンクとなって投稿画面下部に出てきますよね？アレです。ではそのアレをNext.jsプロジェクトで設定してみましょう。

## Next.jsプロジェクトで設定
### next/headを利用
OGP設定を施すには`<head>`タグ内に`<meta>`タグを作成し記述していきますが、Next.jsにおいては`<Head>`コンポーネントを使用します。通常の`<head>`タグでは静的な値しか扱えない一方で、`<Head>`コンポーネントを使うことで動的に値を設定可能なためページ別に設定する情報（URL、ページタイトル）を変更することができます。この`<Head>`コンポーネントですが、より再利用しやすい形にするために、Next.jsプロジェクト内の`components`ディレクトリで設定していきましょう。今回は`components`ディレクトリ内で`SEO.js`というファイルを作成し、ここに`<Head>`コンポーネントを記述していきます。

<script src="https://gitlab.com/-/snippets/3602059.js"></script>
<details>
<summary>「一行解説」を見る</summary>
<ol type="1">
<li>(l.1) <code>&lt;Head&gt;</code>コンポーネントはNext.jsで標準で提供されているものですので、(l.1) の通りインポートしておきます。</li>
<li>(l.3) URL、ページのタイトル、ページの説明の3つをページ毎に動的に変更して設定させたいので、この<code>&lt;SEO&gt;</code>コンポーネントを呼び出した先でurl, title, descriptionというプロパティを受け取れるようにします。</li>
<li>(l.5) <code>&lt;Head&gt;</code>コンポーネントで全体を囲います。この中で (l.6) 以降で<code>&lt;meta&gt;</code>タグを設定していきます。<code>&lt;meta&gt;</code>タグはWebページにおけるメタ情報を記載するもので、Webページ上には表示されませんがChromeでは「検証ツール」から確認できます。</li>
<li>(l.6-8) <code>&lt;meta&gt;</code>タグの中でも<code>property</code>を持つものを設定していきます。<code>property</code>はFacebookやLINE等のソーシャルメディア共通で使用できるOGP情報です。※ただし、X（旧：Twitter）は通常<code>name</code>で設定されます。
<ul>
 <li>(l.6) <code>og:site_name</code>：Webサイトの名前を設定。</li>
 <li>(l.7) <code>og:url</code>：WebサイトのURLを設定。</li>
 <li>(l.8) <code>og:image</code>：Webサイトの画像を設定。</li>
</ul></li>
<li>(l.9-12) <code>&lt;meta&gt;</code>タグの中でも<code>name</code>を持つものを設定していきます。<code>name</code>は（X（旧：Twitter）情報を除いて）通常はページ間で共通の情報が設定されます。ここではX（旧：Twitter）向けの設定をしていきましょう。
<ul>
 <li>(l.9) <code>twitter:title</code>：X（旧：Twitter）表示用のタイトルを設定。</li>
 <li>(l.10) <code>twitter:site</code>：X（旧：Twitter）表示用のアカウント名を設定。</li>
 <li>(l.11) <code>twitter:card</code>：X（旧：Twitter）表示用のカードの種類を設定。※ここではX（旧：Twitter）で投稿される際の画像掲載形式を選択できます。通常<code>summary</code>もしくは<code>summary_large_image</code>を使用します。</li>
 <li>(l.12) <code>twitter:description</code>：X（旧：Twitter）表示用の説明文を設定。</li>
</ul></li>
</ol>
</details>

これで`<Head>`コンポーネントの基本設定が完了しました。しかしこれを作っただけではシェアされる時に表示されないので、実際のページ側で呼び出してあげる必要があります。

### ページ側設定（index.js）
前述の`<Head>`コンポーネントをページ側で呼び出しましょう。

<script src="https://gitlab.com/-/snippets/3602063.js"></script>
<details>
<summary>「一行解説」を見る</summary>
<ol type="1">
<li>(l.1) 上で作ったSEOコンポーネント内に<code>&lt;Head&gt;</code>コンポーネントがあるので、最初に呼び出します。</li>
<li>(l.3) （※省略してありますが）APIサーバを呼び出して<code>n</code>という<code>props</code>を持つ<code>Sample</code>というページコンポーネントを作ります。<code>n</code>には<code>title</code>, <code>url</code>, <code>description</code>があるものとします。</li>
<li>(l.5-9) return内で<code>SEO</code>という名の<code>&lt;Head&gt;</code>コンポーネントを呼び出します。<code>&lt;Head&gt;</code>コンポーネントでは<code>title</code>, <code>url</code>, <code>description</code>の3つのプロパティを動的に受け取れるようにしているため、<code>{n.~}</code>の形式でそれぞれ値を取得して、各プロパティに入れていきます。</li>
<li>(l.10-16) 通常のページ部分が下に続きますが、ここは省略します。</li>
</ol>
</details>

これで、設定は完了です。

## 実装結果確認
ここまで完了したら実際に設定できているか確認してみましょう。ここでは2つの方法を紹介します。

### 1.Chromeの「検証ツール」を確認
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/ogp-settings1_souphe"/>

Chromeを使っている場合、「検証ツール」を開いてみましょう。上の画像のように`Elements`を覗いてみると、`<head>`タグがあることが分かると思います。この中に、上で設定したように<meta>タグがあることが分かると思いますが、問題なく実装できていれば、動的に変化する3つのプロパティである`title`, `url`, `description`に、ページ固有の値が入っているはずです。

### 2.確認ツール
今回はX（旧：Twitter）についても設定しました。実際にX（旧：Twitter）に何かURLを貼り付け投稿してみても良いですが、もし本番環境にホスティングできている場合は公式の[Card Validator](https://cards-dev.twitter.com/validator)があるのでこちらを使っても良いと思います。またFacebookで確認したい場合は[シェアデバッガー](https://developers.facebook.com/tools/debug/)というツールも同様に利用できます。いずれも作成したページのURLを貼り付けるだけで、OGPのプレビューが表示されるはずです。

## まとめ
今回はOGPについて設定しました。Next.jsであれば`<Head>`コンポーネントを使うと簡単に実装できるので、SEO対策のためにも試してみると良いかもですね。

もっと見てもらうためのOGP設定forSEO対策

Django REST Frameworkをバックエンドに、Next.js+MUIをフロントエンドにして、Markdown形式で記事を投稿するブログを作成しました。【Part 3】

ブログ作成についてまとめました。

Django REST Framework + Next.js (MUI) + Markdownでブログを作る【Part 3】

Django REST Frameworkをバックエンドに、Next.js+MUIをフロントエンドにして、Markdown形式で記事を投稿するブログを作成しました。【Part 2】

Django REST Framework + Next.js (MUI) + Markdownでブログを作る【Part 2】

Django REST Frameworkをバックエンドに、Next.js+MUIをフロントエンドにして、Markdown形式で記事を投稿するブログを作成しました。【Part 1】

Django REST Framework + Next.js (MUI) + Markdownでブログを作る【Part 1】

Next.jsで作ったWebサイトがGoogle検索で出てこないので、いろいろと試しました。

## はじめに
これまでWebサイト作成についていろいろとまとめてきました。[Next.jsでWebサイト作成のための環境構築](https://techblog.futosh1.com/blogs/nextjs-tailwindcss-setup)をして、[アクセス解析のためにGA4設定](https://techblog.futosh1.com/blogs/ga4-nextjs)をして、[Vercelにデプロイして、サブドメイン設定して](https://techblog.futosh1.com/blogs/vercel-subdomain-webapp)。。。ただ、Google検索しても出てこないんです！！！これは大ごとです。せっかく作っても流入経路がTwitterしかないなんてふざけ倒しています。。。まあ、これはGoogleにインデックス登録されていないからなんですがね。
ということで、Google検索結果に出てくることを目指して、そして自然検索からの流入爆増を目指して対処しました。

## Google検索結果に表示されるまで・・・
### インデックスへの登録
そもそもここから学ぶべきなのです。Googleにおけるインデックスとは、「Googleが持つ検索エンジンの大規模なデータベース」です。（参考：[Google の検索エンジンの仕組み、検索結果と掲載順位について](https://developers.google.com/search/docs/fundamentals/how-search-works?hl=ja)）このインデックスに登録されないと、誰かがGoogle検索を実施した際、検索結果に表示されません。つまり誰にも見られないのです。ではどのような仕組みでインデックスに登録されるのでしょうか？

### ウェブクローラーによるインデックス登録
[Google の検索エンジンの仕組み、検索結果と掲載順位について](https://developers.google.com/search/docs/fundamentals/how-search-works?hl=ja)によると、Googleが持つウェブクローラーというソフトウェアが定期的にWebを探索することで、基本的には自動で見つけたページをインデックス登録されているとのことです。このウェブクローラーをGooglebotと言います。私のWebサイトは見つかっていないのですね。。。では、このGooglebotとやらにはなぜ見つけてもらえていないのでしょうか？

## インデックス登録されるには？
### インデックス登録されないワケ
いくつかあるのですが、多くの原因は下の通りです。
1. ドメインが新しいため・・・これはそういうもんだと覚えておいた方が良いかもしれません。新しいドメインはクロールの優先順位が下がるようです。
2. Googleガイドライン違反により、ペナルティを受けているため・・・Google検索には、Webサイト・アプリ制作者向けに[ガイドライン](https://developers.google.com/search/docs/essentials?hl=ja)が存在します。これに違反するとせっかく作っても掲載順位が上がらなかったり、場合によってはGoogle検索から除外されたりする可能性があるようです。詳しくは[Google ウェブ検索のスパムに関するポリシー](https://developers.google.com/search/docs/essentials/spam-policies?hl=ja)をご確認ください。要するにしょうもないことすなと書いてあります。
3. プログラムでnoindexを指定しているため・・・<head>内で`noindex`を指定してしまうと、インデックス登録がされなくなってしまいます。
4. robots.txtでクロールを禁止にしているため・・・robots.txtとは、収集されたくないコンテンツがある場合に、Googlebotに対してクロールを拒否するためのファイルです。

### インデックス登録されるための対処法
上記の通り原因をいくつか並べましたが、開発側で技術的に対処が可能な3と4の原因に対してそれぞれ対処していきましょう。
#### 3.プログラムでnoindexを指定しているため
文字通りですが、noindexを指定しなければ良いのです。<head>タグを利用している場合は、その中に以下の記述がないか確認してみてください。
<script src="https://gitlab.com/-/snippets/2581833.js"></script>
`<meta>`という記述があれば、これを消すだけで大丈夫です。

#### 4.robots.txtでクロールを禁止にしているため
robots.txtにおいて、以下の通り`Disallow`の記述をしている場合、`Disallow`の中身が空の場合は問題ありませんが、下のようにディレクトリ（もしくはディレクトリ+ページ）が記述されている場合、そのディレクトリ（今回の場合はpages以下のコンテンツ）が表示されなくなります。表示させたくないコンテンツがない場合には、`Disallow`の中身は空に保っておきましょう。
```
Disallow:/pages/
```

## Googleにインデックス登録されやすくするためには？
ここまでインデックス登録されない原因についてまとめてきましたが、全部対応したからといってすぐにインデックス登録されるわけではありません。だからと言って、ほな指咥えて待っとき！という話でもなく、インデックス登録されやすくするための工夫はできるんです。

### サイトマップ（sitemap.xml）の生成、Google Search Console（サーチコンソール）への送信
インデックスへの登録のためにGoogleはGooglebotを利用してクロールしている、しかし新しいドメインの場合はインデックス登録に時間がかかるというのは前述の通りです。というわけで、GooglebotにWebサイトの内容・構造を理解してもらうために（=クロールしてもらいやすくするために）、サイトマップを作ってあげましょう。

#### next-sitemapの利用
Next.jsのWebサイト・アプリでサイトマップを作成するためには、`next-sitemap`というパッケージを利用します。対象のGitHubリポジトリは[こちら](https://github.com/iamvishnusankar/next-sitemap)です。それではまず下の通りインストールします。
```
npm i --save next-sitemap

```

#### next-sitemap.config.jsファイルの設定
インストールできたら、プロジェクト直下に`next-sitemap.config.js`ファイルを新規作成します。ファイルの中身には以下の通り記述します。
<script src="https://gitlab.com/-/snippets/2581789.js"></script>
* 3行目にはWebサイト・アプリのURLを記述します。ここはベースとなるURLを入力してください。
* 4行目で、オプションですが`robots.txt`ファイルを生成します。デフォルトでは`false`なので、`true`の場合のみ記載しましょう。
* 5行目で、こちらもオプションですが`sitemapSize`を指定します。ここでは`7,000`という値を指定していますが、サイト内のURLが7,000を超過すると自動的にサイトマップが分割され、index（e.g. sitemap.xml）ファイルと詳細サイトマップファイル（e.g. sitemap-0.xml, sitemap-1.xml）ができるという設定です。
* 6行目で、こちらもオプションですが`exclude`を指定して、サイトマップから除外したいページ・サブディレクトリを配列形式で指定します。

#### package.jsonファイルの設定
続いて、`package.json`ファイルに必要事項を追記して、ビルド時に`public`ディレクトリの下に`sitemap.xml`ファイルを作成するようにします。
<script src="https://gitlab.com/-/snippets/2581796.js"></script>
* 3行目には`build`の記述をします。こちらはすでに記述があるかもしれません。
* 4行目には新しく`postbuild`を追加し、`next-sitemap.config.js`を実行するよう記述をします。

#### buildの実行
`npm run build`を実行します。すると、ビルドする度に、`postbuild`で記述したようにビルド後に`next-sitemap.config.js`が実行されます。
<script src="https://gitlab.com/-/snippets/2581797.js"></script>
また`postbuild`完了後には、`public`ディレクトリの下に、`sitemap.xml`ファイルと`robots.txt`ファイルが新しく生成されていると思います。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/next-googleindex1_xna4sl">

#### 生成されたsitemap.xmlファイル
`sitemap.xml`ファイルは以下の通りになっていると思います。
<script src="https://gitlab.com/-/snippets/2581801.js"></script>
* 3行目はWebサイト・アプリのURL（ベース）が表示されています。
* 5行目はWebサイト・アプリ内に存在する、別ページのURLが表示されています。今回は、`about`というページをWebサイト内に作成したため、このような表記になっているはずです。また、この下にも同Webサイト・アプリ内に存在する全てのURLが書き出されていると思います。

#### 生成されたrobotx.txtファイル
`robots.txt`ファイルは以下の通りになっていると思います。
<script src="https://gitlab.com/-/snippets/2581802.js"></script>
* 3行目は`Allow`となっていると思います。これは、今回Disallowを設定していないためです。
* 6行目にはWebサイト・アプリのURL（ベース）が表示されています。
* 9行目には今回生成されたサイトマップのURLが表示されています。これでURLとしてサイトマップにアクセスできるようになりました。

#### Vercelへのデプロイ
通常通りVercelへデプロイします。これで"https://~（Webサイト・アプリのURL（ベース））/sitemap.xml"にアクセスできるようになります。

#### Google Search Console（サーチコンソール）への登録
最後に、[Google Search Console（サーチコンソール）](https://search.google.com/search-console/welcome)にサイトマップを登録していきましょう。
何も登録されていない場合、サーチコンソールを開くと下のような画面が表示されます。「URLプレフィックス」の方に、"https://~（Webサイト・アプリのURL（ベース））/"を入力しましょう。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/next-googleindex2_jdezaz">
すると、下のような「所有権の確認」というモーダルが表示されます。「おすすめの確認方法」という表示とともに「HTMLファイル」のダウンロードが可能となっていますがこちらは利用せず、今回は「その他の確認方法」から「HTMLタグ」を選択しましょう。ここでは指示通り`<head>`タグ内に表示されているメタタグを追加します。※メタタグ追加後反映に時間がかかる可能性があります。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/next-googleindex3_do8dqq">
<script src="https://gitlab.com/-/snippets/2581834.js"></script>
少し時間を空けてから上の画面で「確認」を押すと所有権の確認が完了し、下のような管理画面に移動できます。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/next-googleindex4_zr9k1y">
管理画面に移動したら、画面左側のナビゲーションから「サイトマップ」をクリックすると「新しいサイトマップの追加」というセクションが表示されるので、ここで`sitemap.xml`と入力し、「送信」ボタンを押してください。「サイトマップを送信しました」というダイアログが表示されたらサイトマップ送信の作業完了です。ダイアログで隠れて見えませんが、「送信されたサイトマップ」のセクションが表示され、ステータスが「成功しました」となっていることが確認できます。


## まとめ
なお、作業完了後すぐにインデックス登録されているわけではないため、この時点でGoogle検索をしても検索結果には表示されないかもしれませんが、気長に待ちましょう。
### 参考
* [Google検索セントラル - Google の検索エンジンの仕組み、検索結果と掲載順位について](https://developers.google.com/search/docs/fundamentals/how-search-works?hl=ja)
* [Google検索セントラル - Google 検索の基本事項](https://developers.google.com/search/docs/essentials?hl=ja)
* [Google検索セントラル - Googleウェブ検索のスパムに関するポリシー](https://developers.google.com/search/docs/essentials/spam-policies?hl=ja)
* [GitHub - next-sitemap](https://github.com/iamvishnusankar/next-sitemap)

Next.jsで作ったWebサイトがGoogleの検索結果に出てこない！？

HerokuのDB操作を学んでみました。

## はじめに
以前からHerokuに関する記事をいくつか作成していますが、今回は諸般の事情でDBのテーブルを削除する作業が発生しました。誤って消すと面倒なのでDBは必要に応じてしか触ったことがなかったのですが、せっかくの機会なので色々な操作を学び直してみました。

## Heroku Postgres
Herokuが公式にサポートしているDBは[「Heroku Postgres」](https://jp.heroku.com/postgres)というHerokuのプラットフォーム上で動くPostgreSQLだけなので、その前提でDBを操作していきます。Heroku Postgresは、Heroku SchedulerやCloudinaryと同様に[add-ons](https://elements.heroku.com/addons/heroku-postgresql)から追加可能です。追加後、環境変数には自動でPostgreSQLのURLが追加されます。

## 操作
今回はDB操作だけでなく、Heroku CLI操作の基本も含めてまとめていきます。順序としては、ログイン〜DB情報表示〜DBバックアップの表示・作成〜DBバックアップのダウンロード〜DBテーブルのエクスポート・削除という流れで説明していきます。

### Herokuログイン〜DB情報表示
`heroku login`でログイン後、まずは`heroku pg:info`でDBの情報を確認しましょう。一部、数字をいじっていますが、こんな感じで表示されていると思います。
<script src="https://gitlab.com/-/snippets/2579216.js"></script>

### DBバックアップ表示
続いてバックアップ関連情報一覧の表示です。`heroku pg:backups`から確認できます。利用できる機能は以下の通りです。
* `=== Backups`・・・バックアップの作成履歴
* `=== Restores`・・・バックアップのリストア履歴
* `=== Copies`・・・バックアップのコピー履歴

バックアップの作成・リストアは実施履歴がないので、実施日時には何も表示されません。3行目の通り、バックアップ作成のために`capture`を利用しましょう。

<script src="https://gitlab.com/-/snippets/2579215.js"></script>

### DBバックアップ〜ダウンロード
それでは`heroku pg:backups:capture`でバックアップを作成します。8行目のように、`b002`というIDでバックアップが作成されたというメッセージが出ています。バックアップ作成後、再度`heroku pg:backups`でバックアップ情報を確認すると、`=== Backups`の欄に先ほどのIDが表示されていることが分かりますね。また同じテーブルに実施日時が表示されていますが、クソデカデータではないので2秒ぐらいで完了しているようです。

その後、`heroku pg:backups:download`で作成したバックアップをダウンロードします。コマンド実行後、デフォルトではコマンド実行時と同じ階層で、`latest.dump`という名前のファイルでダウンロードされます。

<script src="https://gitlab.com/-/snippets/2579217.js"></script>

### DBエクスポート（CSVファイル）
上の章ではDB自体のダウンロードをしましたが、こちらではより実践的にDB内のテーブルをCSVにエクスポートしてみます。
エクスポートする前に、CSVに落としたいデータがどのテーブル内にあるか確認しましょう。エクスポートしたいテーブルは`sample_group`テーブルに入っていそうです。
※なお今回は使用しませんが、SQLコマンドを操作するためには`heroku pg:psql`の他に、`$ heroku config`でHerokuで設定済みの環境変数を表示し`DATABASE_URL`の値を取得した後、`$ psql [DATABASE_URL]`でDBにアクセスする方法もあります。

<script src="https://gitlab.com/-/snippets/2579220.js"></script>
<details>
<summary>「一行解説」を見る</summary>
<ol type="1">
<li>(l.1) まずは<code>heroku pg:psql</code>でDBをSQLコマンドで操作できるようにします。今回は<code>psql</code>の後に、<code>[App Name]</code>と同時に<code>-c</code>を加えることでDBと接続させます。さらに、<code>"\d"</code>を追記することでデータベース内の全テーブルを表示します。</li>
<li>(l.10) <code>（4 rows）</code>とあるように、このDB内に4つのテーブルがあることが分かりました。エクスポートしたいテーブルは<code>sample_group</code>テーブルに入っていそうです。※ なお今回は使用しませんが、SQLコマンドを操作するためには<code>heroku pg:psql</code>の他に、<code>$ heroku config</code>でHerokuで設定済みの環境変数を表示し<code>DATABASE_URL</code>の値を取得した後、<code>$ psql [DATABASE_URL]</code>でDBにアクセスする方法もあります。</li>
<li>(l.12) 続いてエクスポートを実施します。(l.1) 同様に<code>heroku pg:psql</code>でSQLコマンドを操作できるようにします。</li>
<li>(l.18) すると今度は<code>[App Name]::DATABASE=></code>と表示されSQLが書けるようになります。ここで<code>\copy</code>を使ってテーブルを全選択した状態で最後にHEADERを加え列名が入った形でCSV出力を指示しましょう。コマンド実行時と同じ階層で<code>sample.csv</code>が作られているはずなのでこれで完了です。</li>
<li>(l.19) <code>COPY 10</code>は、列名含めて10行のデータが存在することを示しています。</li>
</ol>
</details>

#### 列を指定してエクスポートする
今回は(l.18) の通り`SELECT * FROM public.sample_group`としているのでテーブルがそのまま出力されてしまっていますが、先ほど出力した`sample.csv`を見ると`player`という名前の列があることが分かりました。そこで、`*`として全列を選択している部分について`player`に変更して改めてCSVエクスポートを実行すると`player`列の全値が出力できます。また同時に`WHERE`句を使えば、列内で条件に合った値のみを出力可能です。このあたりは一般的なSQLの構文ですので、[こちらの記事](https://qiita.com/tatsuya4150/items/69c2c9d318e5b93e6ccd)を参考にしてもらうと分かりやすいと思います。

#### Heroku Dataclipsを使用する場合
またCSVにエクスポートするだけならHerokuの[「Dataclips」](https://data.heroku.com/dataclips/)を使ってみても良いと思います。
詳しくは下の記事を参考にしてみてください。
* [HerokuのDataclips使ってみた。](https://techblog.futosh1.com/blogs/heroku-dataclips-howto)


### DBテーブル削除
バックアップ作成+CSVエクスポートの両方が完了したので最後にテーブルを削除します。
<script src="https://gitlab.com/-/snippets/2579222.js"></script>
上のコマンドを実行するだけですが、その際`ERROR: cannot drop table sample_group because other objects depend on it`というエラーが出ることがあります。これは、他のテーブルを参照しているために発生するエラーですので、関連するテーブルを削除する必要があります。問題なく任意のテーブルが消せていたら、再度`DROP`すると`ERROR: table "sample_group" does not exist`（=対象のテーブルが削除できたため）というエラーが出るはずですので、これで完了です。
## まとめ
DB削除は注意しましょう。バックアップだけは忘れないように実施しておきましょう。
### 参考
* [Heroku Postgres](https://jp.heroku.com/postgres)
* [Qiita - 【これだけ覚えてたらOK！】SQL構文まとめ](https://qiita.com/tatsuya4150/items/69c2c9d318e5b93e6ccd)

HerokuのDB操作いろいろ

Herokuのadd-onsで、画像管理サービスのCloudinaryを使って画像を保管してみました。

## はじめに
Herokuの優れている点に、多くのadd-onサービスとの連携ができることがあると私は勝手に考えています。その中でも今回利用したのは画像や動画を管理できるサービス、Cloudinaryです。画像・動画はどうしてもサイズが大きくなるのですが、Cloudinaryであれば1GBまでは無料で利用できるんです。ありがたいですよね。そこで今回はDjangoプロジェクトの画像保管先として利用するための方法についてまとめました。

## 全体の流れ
* Heroku側の設定
* Djangoプロジェクトの側の設定

## Heroku側の設定
* Herokuのadd-onは、[[ダッシュボード]](https://dashboard.heroku.com/apps/) > [Resources]タブ内に"Add-ons"という項目があり、その画面右側の「Find more add-ons」ボタンから下の画面に遷移して追加できます。Heroku Postgresを設定したことがあれば分かるかもしれませんね。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/heroku-cloudinary-setup1_clltt0">
* 今回利用するサービスは、右上の検索欄から"cloudinary"と入力すると見つかるので、表示されたアイテムをクリックしてください。
* サービスの画面に遷移すると、サービス・"Region Availability"の説明があり、その下に"Plans & Pricing"があると思います。今回は"Starter"プランを選択した状態で右横にある「Install Cloudinary」ボタンを押しましょう。
* するとダッシュボード画面に戻るので、ここで適用させたいアプリを選択し「Submit Order Form」をクリックします。
* Herokuの[ダッシュボード] > [Overview]タブに戻ると"Installed add-ons"の項目に"Cloudinary"が追加されていることが確認できます。続いて、環境変数を取得・設定する必要があるのでここをクリックして下の画像のようなCloudinaryのページにいきます。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/heroku-cloudinary-setup2_nxgqoi">
* 遷移後、トップページの画面中央部に開発言語とコードが書かれているのが確認できると思います。ここから「Python」を選択するとインストール方法と`cloud_name`, `api_key`, `api_secret`がそれぞれ表示されているのでキーと値をそれぞれ控えておき、Herokuの[ダッシュボード] > [Settings]タブにいきます
* 2つ目の項目に"Config Vars"という項目があるので、ここから「Reveal Config Vars」ボタンを押すと設定済みの環境変数と追加入力可能なフィールドが表示されます。設定済みの環境変数にはCloudinaryのURLが表示されているのが分かると思いますが、ここに先ほど控えておいた3組のキーと値をそれぞれ入力していきましょう。これでHeroku側の設定は完了です。

## Djangoプロジェクト側の設定
### パッケージインストール
* まずは"Cloudinary"のトップページに記載があったようにDjangoプロジェクトに"Cloudinary"をインストールしましょう。また、Cloudinaryのトップページには記載がなかったのですが、DjangoプロジェクトでCloudinaryを利用する際には別途`django-cloudinary-storage`と`Pillow`をインストールする必要があるのでお忘れなく。
```
$ pip install cloudinary django-cloudinary-storage pillow
```
### settings.pyファイル設定
* 続いて`settings.py`を修正していきましょう。下のソースコードのように`INSTALLED_APPS`内および静的ファイル等の記述がある画面一番下に、"Cloudinary"関連設定を追記します。#（追加）とある行が追記したコードです。
<script src="https://gitlab.com/-/snippets/2565176.js"></script>
### .envファイル設定
* 一部順番前後しますが、ローカルでの動作確認のためにも`.env`ファイルには`SECRET_KEY`や`DEBUG`に関する記述の下に3組のキー（`CLOUD_NAME`, `API_KEY`, `API_SECRET` ）と値を記述しておきます。
### models.py設定
* 次にDjangoの管理画面からCloudinaryに画像を格納するための設定をします。
<script src="https://gitlab.com/-/snippets/2565178.js"></script>
### その他ファイル設定
* `serializers.py`, `admin.py`についても設定しますが、他のモデルにおける設定と同じなので省略します。

## 画像の確認
これで設定完了です。画像を確認するためには、Djangoの管理画面から画像が格納されているデータを選択します。マスクが多く見辛くてすみませんが、下のようになっていると思います。"Currently"とある部分が現在格納されている画像のURLになっておりクリックしてみるとブラウザに画像が表示されます。その際のURLがCloudinaryの格納庫となっているわけです。ここまで記載の通り進めた場合は、"https://res.cloudinary.com/{CLOUD_NAME}/image/upload/v1/media/imgs/{img_name}"となっていると思います。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/heroku-cloudinary-setup3_y1vfzt">

## まとめ
今回CloudinaryのStarterプランを使用したわけですが、1GB超えた場合の一つ上のプランはSilver: $99/月（2023年7月時点）ということでなかなか高額なので、画像を中心としたサービスを展開する場合は別の方法を考えた方がよさそうですね。。

Herokuのadd-onsでCloudinaryを使用する方法

DjangoプロジェクトをHerokuにデプロイしました。

## はじめに
[前回の記事](http://localhost:3002/blogs/gilab-render-django)ではGitLabとRender.comを連携させる方法についてまとめました。Herokuはこれまでも何回か使っているので個人的に振り返りを含めて改めてまとめてみます。

## Herokuへのデプロイ方法
Render.comについてはGitHubに加えてGitLabもサポートしているため便利でしたが、HerokuについてはGitHubしかサポートしていません。ということでこの記事ではデプロイする方法を2種類紹介します。
1. GitHub連携（GitHubユーザー向け）
2. Gitベースデプロイメント（GitLabユーザー向け）

## 1.GitHub連携
GitHubとの連携は非常に簡単です。
* Herokuにログイン後、[ダッシュボード](https://dashboard.heroku.com/apps)から[New] > [Create new app]と進みます。
* "App name"（アプリ名）に任意の名前を入力、"region"を選択して、「Create app」ボタンで次へ進みます。※"App name"（アプリ名）に何も入力しないとランダムで名前が生成されます。
* Appが作成されると、"Deploy"タブが最初に表示されると思います。"Deploy"タブ内の上から2つ目に"Deployment method"という項目があるのでそこから「GitHub (Connect to GitHub)」を選択します。するとその下の項目に"Connect to GitHub"という項目が表示されリポジトリが検索できるので、GitHubのリポジトリ名を入力します。
* 該当のリポジトリが見つかったら「Connect」ボタンで接続しましょう。
* すると今度はその下の項目として"Automatic deploys"が表示されます。ここでbranchを選択し「Enable Automatic Deploys」を押下します。
* 自動でデプロイが走るので"Activity"タブの「View build log」からステータスを確認しましょう。下の画像のように、緑字で"Build Succeeded"とともにチェックマークとハンマーが出てきたらデプロイ完了です。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/django-heroku-deploy3_zduagl">
* "Settings"タブからスクロールダウンしてくと、"Domains"という項目とともにデプロイされた先のURLが確認できます。
* 今後はローカルからGitHubにPushする度に自動でデプロイが走るようになります。自動デプロイを解除したい場合には、再度"Deploy"タブ内の"Automatic deploys"から「Disable Automatic Settings」ボタンを押すと解除でき、手動デプロイに切り替えられます。	

## 2.Gitベースデプロイメント
こちらはHeroku CLIからHeroku Gitに直接デプロイする方法です。
* Appを作成するところまでは1.GitHub連携と同じです。"Deployment method"から「Heroku CLI」を選択すると、下画像のようにその下の項目に"Deploy using Heroku Git"という項目が表示されるので、これを参考にしつつ進めましょう。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/django-heroku-deploy4_i738rt">
* CLIから`heroku login`を実行するとHerokuの認証画面に飛ぶので、そこからログインを実行します。メールアドレス・パスワード入力後CLIに戻ります。
* その後は以下のように`heroku git:remote`でローカルリポジトリに`remote`を追加後、`git push "heroku" main`でPUSHします。
<script src="https://gitlab.com/-/snippets/2565122.js"></script>
* URLとともに`remote: Verifying deploy... done."と表示されれば、デプロイ完了です。



## 共通
1, 2どちらにしてもここでデプロイは完了していますが、URLから遷移したとてまだDjangoの管理画面は操作できないため実質まだ使えませんね。そこで管理画面にログインしてデータを入力するところまで設定しましょう。

<script src="https://gitlab.com/-/snippets/2565145.js"></script>
* HerokuにおいてShellを操作する場合には、CLIでのコマンド入力時、上の通り`$ heroku run`を先頭につけます。
* まずは`python manage.py migrate`とすることで、Djangoプロジェクトのアプリ内のマイグレーションファイルをHerokuに反映させます。
* 続いて`python manage.py createsuperuser`とCLI上で実施することでSuperuserを作成することができます。`Username`, `Email`, `Password`のうちメールアドレスは任意設定の設定項目になります。UsernameとPasswordを入力して上のコードのような記述が出て来れば完成です。後はログインして管理画面をいじっちゃってください。

## まとめ
今回紹介したのは2種類だけでしたが、他にもDockerベースでのデプロイ方法やGitLab-CI/CDを利用したものもありますので、機会があれば紹介します。

### 参考
* [Heroku - Gitを使用したデプロイ](https://devcenter.heroku.com/ja/articles/git)

DjangoプロジェクトをHerokuにデプロイする方法

脱HerokuにともないRender.comにデプロイしてみました。

## はじめに
今に始まったことではありませんが、個人開発者の味方Herokuが無料で使えなくなったことで、同様の価格帯・スペックでテスト用・POC用に利用可能なRender.comに乗り換えた方も多いのではないでしょうか？私もついに重い腰を上げてRender.comを試してみたのでデプロイまでの方法まとめておきます。

### 注意（追記）
Render.comではSSH接続・ShellはFreeプランでは利用できません。そのため、本記事によってデプロイはできても利用ができません（申し訳ありません！！）。有償に切り替えるかデプロイ前にDjangoのSuperuserを作成しておく必要があります。前者については有償利用に切り替えるだけですが、後者については本記事に記載はないので予めご了承ください。。

## デプロイまでの流れ
デプロイは以下の手順で実施していきます。

1. アカウント作成
2. 必要ファイルの作成
3. リポジトリと接続
4. デプロイ

※ちなみに、[公式ドキュメント](https://render.com/docs/deploy-django)を見るとパッケージ管理ツールに`pip`ではなく`poetry`を使っていますが、`pip`でも問題なくデプロイできました。

## 1.アカウント作成
2023年6月時点では、GitHub・GitLab・Google・Emailでのアカウント作成ができるようです。今回私はGitLabのプロジェクトをデプロイを利用したいのでGitLabを選択しました。省略しますがメール認証・パスワード設定等をしてアカウント作成完了です。

## 2.必要ファイルの作成
Render.comにデプロイするには既存ファイルの変更、新ファイルの作成が必要になります。新ファイルは全てルートディレクトリに作成します。以下、+が新ファイル、▲が変更ファイルになりますが、下の順番で作成していくとスムーズにいくと思います。
* ▲project名/settings.py
* +requirements.txt
* +build.sh
* +render.yaml


### ▲project名/settings.py
まずはsettings.pyの修正をしていきましょう。

<script src="https://gitlab.com/-/snippets/2565110.js"></script>

省略されているコードが複数箇所ありますが、変更部分は「#(追加)」とコメントアウトしている部分になります。
DBの設定部分についてはHerokuでも同様なので、Herokuから移行する場合には追記しなくでも大丈夫だと思います。
また、`WhiteNoise`はDjango REST Frameworkでは不要かもしれませんが（未検証）、公式ドキュメント通り一応設定してみています。

### +requirements.txt
次に、ローカルでインストールしたパッケージを本番環境でも利用するために、パッケージをリスト化した`requirements.txt`ファイルを作成します。

<script src="https://gitlab.com/-/snippets/2565111.js"></script>
本当はもっと多くのパッケージをインストールしていますが、紛らわしいので省略してしまっています。ただし、`settings.py`ファイル修正時に追加したパッケージ（`whitenoise`, `psycopg`, `gunicorn`等）については必ずインストールが必要です。
`requirements.txt`ファイルは以下のコマンドを実行することで作成可能です。

```
pip freeze > requirements.txt
```

### +build.sh
次に`+build.sh`ファイルを作成します。デプロイ時に実行されるコマンドを記述したファイルです。

<script src="https://gitlab.com/-/snippets/2565107.js"></script>

通常ローカルでも利用するコマンドなので説明は省略しますが、ここでは上で作成した`requirements.txt`をインストールしているのがポイントです。

### render.yaml
最後にRender.comにおける環境を設定する`render.yaml`ファイルを作成しましょう。

<script src="https://gitlab.com/-/snippets/2565109.js"></script>

ここまで上記で設定してきた内容を反映していることが分かりますね。
Herokuの場合はUSとEuropeから選択できますが、Render.comではSingaporeも選択肢にあるのが大きな違いですね。
また、上のように`envVars`に値を入力すると、デプロイ時に環境変数を手動でセットしなくても自動で設定してくれるので便利です。

## 3.リポジトリと接続
必要なファイルが作成できたら[ダッシュボード画面](https://dashboard.render.com/)にいき、下の画像のようにヘッダーにある"New"から"Web Service"を選択します。"Configure account"（画面右側中央部）からGitLabと接続しましょう。GitLabとの接続が完了したら画面中央部に接続可能なリポジトリが表示されるので、該当のプロジェクトを「Connect』ボタンをクリックして接続させます。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/gitlab-render-django1_f53brc">

## 4.デプロイ
上で「Connect」ボタンをクリックすると下のような画面に遷移します。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/gitlab-render-django2_stnfgj">

ここから"Name"に`render.yaml`ファイルで入力したプロジェクト名を転記、他の項目も必要であれば変更を加えていき（ほぼ変更不要だと思います）、ページ最下部の「Create Web Service」を押すと、下のようにデプロイが走ります（画像では途中でキャンセルしています※なお、赤い網掛け部分にはGitLabのリポジトリのパスが表示されています）。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/gitlab-render-django3_pwfsco">

下の画像のように、左ナビゲーションの"Events"から青緑色の雲マークが表示されればデプロイ完了です。あとはDjangoのSuperuserを作成して、、という流れですが、冒頭記載の通りFreeプランではShellが使えないので、よろしければこちらの[記事](https://qiita.com/kkk777/items/91a00e431d3e1d72d51e)を参考にされると良いかもしれません。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/gitlab-render-django4_ur4s9w">

## まとめ・参考
### 参考
* [Renderにデプロイ（Django）](https://qiita.com/kkk777/items/91a00e431d3e1d72d51e#django%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%82%92%E4%BD%9C%E3%82%8B)

GitLabとRender.comを連携させてDjangoプロジェクトをデプロイしてみた

TwitterのタイムラインをNext.jsのWebアプリに埋め込んでみた。

## はじめに
良いものを作れば売れる（使ってもらえる）時代はとうの昔に終わりました。何においても作る前に「誰に」どのような「目的」で使ってもらいたいか検討し、その上で作るそしてプロモーションという流れが必要です。そしてそのプロモーションにおいて有力なツールがTwitterです。とかゆうといて本能の趣くまま思いついた順で作ってしまう、単細胞の私です。、、、まあいずれにせよチャネル検討・流入施策がない製品開発は意味がないので、今回は手始めにTwitterとWebアプリの連携による流入施策の第一歩として（~手か足かどっちやねん~）、TwitterのフォローボタンとタイムラインをWebアプリに埋め込む方法を調べたのでその方法をまとめました。

## Webアプリへのタイムライン埋め込み
Webアプリにタイムラインを表示させるためには、1.埋め込みコードの生成、Webアプリへの埋め込みの大きく2ステップの実施が必要です。
### 埋め込みコードの生成（Twitter Publish）（1/2）
Webアプリに埋め込むにはTwitterが公式にリリースしている[Twitter Publish](https://publish.twitter.com/#)を利用します。これにより簡単に埋め込みコードが生成できます。埋め込み形式としては以下の3種類です。
* Embedded Tweet：ツイートの埋め込み
* Embedded Timeline：タイムラインの埋め込み
* Twitter Button：各種ボタンの生成
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/twitter-timeline-emb1_tlvgoh" />

今回は試しに[@TwitterDev](https://twitter.com/TwitterDev)のタイムラインを埋め込むこととします。
* "What would you like to embed?"の部分に、埋め込みたいTwitterアカウントのIDを入力します。
* IDを入力すると"Here are your display options"の欄にあるように、入力内容に応じてWebアプリに埋め込み可能なコンポーネントが表示されますが、今回はアカウントIDを入力したので"Embedded Tweet"は非表示になっています。今回はタイムラインを選択します。
* さて"Embedded Timeline"を選択するとその直下に埋め込みコードが出てくるので、"Developer Agreement"と"Developer Policy"を読んでからこれを生成されたスクリプト（aタグ）をコピーしましょう。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/twitter-timeline-emb2_ieznur">
* ちなみにボタンの方はというと、上の画像の中から選べます。こちらもツイートを入力するのかIDを入力するのかで表示・非表示が切り替わります。以前は"Like Button（いいね）"も埋め込み可能だったとのことですが、現在は利用できません。
 * Share Button：記事等をシェアボタン
 * Follow Button：アカウントフォローのボタン
 * Mention Button：メンションするボタン
 * Hashtag Button：ハッシュタグのボタン
 * Message Button：メッセージのボタン

### Webアプリへの埋め込み（Next.js）（2/2）
次に上でコピーしたスクリプトをNext.js上に貼り付けます。ただし以下2点修正が必要です。
1. scriptタグの記載部分の変更：Reactにおいてはそのまま埋め込みコードを貼り付けてもscriptは実行されません。したがって、マウント後に`widgets.js`を読み込ませるようにするために、貼り付け時にはscriptタグは削除した上で一部書き換えます。今回は`useEffect`を使ってscriptに追加しました。
2. class→classNameへの変更：こちらはReactを利用する場合、（当たり前ですが）修正が必要になる部分です。書き換えるだけなので楽です。

なお1点目の注意点については、こちらの[記事1](https://zenn.dev/catnose99/articles/329d7d61968efb)、[記事2](https://blog.narumium.net/2020/04/06/react%E3%81%A7twitter%E3%81%AE%E3%82%BF%E3%82%A4%E3%83%A0%E3%83%A9%E3%82%A4%E3%83%B3%E3%81%AA%E3%81%A9%E3%82%92%E5%9F%8B%E3%82%81%E8%BE%BC%E3%82%80/)を大いに参考にさせていただきました。ありがとうございました。

## まとめ・参考
自作Webアプリでも、Twitterタイムラインがあるだけでなんとなく「できてきているな」という実感が得られますよね。埋め込みだけが正解ではありませんが、検討してみはいかがでしょうか。ちなみに、先日Twitter APIのプランが大幅に変わって無償版でできることがかなり減ってしまいましたが、こちらはTwitter APIとは関係ないため気軽に始められます。そう言った意味でも（？）とりあえず試してみるのがオススメです。

### 参考
* [Home - Twitter Publish](https://publish.twitter.com/#)
* [JSでツイートを埋め込むときのベストプラクティス - Zenn](https://zenn.dev/catnose99/articles/329d7d61968efb)
* [ReactでTwitterのタイムラインなどを埋め込む - Narumium Blog](https://blog.narumium.net/2020/04/06/react%E3%81%A7twitter%E3%81%AE%E3%82%BF%E3%82%A4%E3%83%A0%E3%83%A9%E3%82%A4%E3%83%B3%E3%81%AA%E3%81%A9%E3%82%92%E5%9F%8B%E3%82%81%E8%BE%BC%E3%82%80/)

TwitterのタイムラインをWebアプリに埋め込む

Googleアナリティクスに蓄積されたデータをPythonで取得してみました。

## はじめに
Googleアナリティクスって使ったことがある人なら分かると思いますが、情報量えげつないですよね（語彙力）。ちょっと情報取得できればと思ってもどこを見たら良いのか分からず、最初はダッシュボードを使いこなすことさえままならないと思います。そんな中個人的には他のツールから取得したデータと組み合わせて別途ダッシュボードを作成したいなと思っていたところでして、調べてみるとPythonからAPIを叩けるんですね。実際に使ってみたので設定方法含めまとめます。なお、以下略称です。
* Googleアナリティクス（以下、GA）：総称
* Google Analytics 4（以下、GA4）：~最新バージョン~現行バージョン
* Universal Analytics（以下、UA）：~現行バージョン~旧バージョン

## 利用するツール
PythonでAPIを叩くために今回は[Google Analytics Data API](https://developers.google.com/analytics/devguides/reporting/data/v1/quickstart-client-libraries?hl=ja)というものを使います。似たライブラリに[Google Analytics Reporting API v4](https://developers.google.com/analytics/devguides/reporting/core/v4?hl=ja)というものがありますが、ドキュメントに記載の通りこちらはUAのみ対応（GA4非対応）のため、今回は利用しません。v4とか記載があるからGA4対応かと勘違いしてしまいますよね。そのUAは2023年7月1日をもって廃止と~なります~ました。お世話になりました。

## API利用
それではAPIを使うための設定をしていきましょう。以下大きく2ステップとなります。
### GA側の設定（1/2）
#### Google Analytics Data API設定
* はじめに[Google Analytics Data API](https://developers.google.com/analytics/devguides/reporting/data/v1/quickstart-client-libraries?hl=en)のページからStep1.のEnable the Google Analytics Data API v1ボタンをクリックするとダイヤログが開かれるので、ここでGoogle Cloud Platform（以下、GCP）上にプロジェクトを新しく作成します。ここでの入力項目はプロジェクト名のみです。Nextボタンから作成後、プロジェクト作成と同時に自動でJSONファイルがダウンロードされます。
#### GA4の設定
* 次にGA4にサービスアカウントを追加します。上でダウンロードしたJSONファイルの中身を確認すると、"client_email"という値が追加されていると思うので、こちらをGA4に追加します。<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/ga4-data-python1_tg3him" /><img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/ga4-data-python2_pgyblg" />
* 上の画像の通り、GA4の対象のプロパティを開いた状態で、[管理] → [プロパティのアクセス管理] → [+ボタン（新規ユーザーにアクセス権限を追加）]（画面右側モーダルの右上あたり）→ [ユーザーを追加] から、client_emailキーに対応する値をメールアドレス欄に追加します。同時に直接の役割とデータ制限で権限の選択を求められますが、ここでは閲覧者（Read & Analyze）以上の権限を付与する必要があります。

### ローカル側、Python設定（2/2）
* 続いて、クライアント側でライブラリをインストールします。[Python client library installation guide](https://github.com/googleapis/python-analytics-data#installation)の通り、仮想環境を作成し、その中で
```
pip install google-analytics-data
```
で対象のライブラリをインストールしておきます。
* [公式サイト](https://developers.google.com/analytics/devguides/reporting/data/v1/quickstart-client-libraries?hl=en)のコードを一部改変させていただき、地域別に累計ユーザー数を取得してみましょう。ここから1行解説です。
<script src="https://gitlab.com/-/snippets/2567496.js"></script>
1. (l.2~10)ライブラリ等から必要モジュールのインポート。
2. (l.12~13)別途、.envファイルを作成する。Google Analytics Data API設定時にダウンロードしたJSONファイルから認証情報を設定し、.envファイルに格納。`load_dotenv()`メソッドで環境変数読み込みます。
3. (l.15)対象のGA4のプロパティIDを取得し設定します。
4. (l.17)プロパティIDを引数にGA4情報を抽出する関数を作成します。
5. (l.19)今回は`BetaAnalyticsDataClient`クラスを利用します。`BetaAnalyticsDataClient`では、`runReport`メソッド、`getMetadata`メソッド、`checkCompatibility`メソッド等が提供されています。その中でも今回は`runReport`メソッドを使ってみましょう。他にもいくつかメソッドは提供されていますが、上記3メソッドはそれぞれ以下のような役割を果たします。
 * `runReport()`メソッド：GA4データの取得において最も一般的・汎用的なメソッドです。以下の通りコード例を示すので参考にしてみてください。
 * `getMetadata()`メソッド：データスキーマ・リファレンス情報を取得するためのメソッドです。利用可能なmetrics, dimensions等の詳細情報を取得できます。
 * `checkCompatibility()`メソッド：指定したクエリとパラメータにおいてAPIとの互換性確認するためのメソッドです。
6. (l.21~26)`RunReportRequest()`でリクエストを作成します。22行目〜25行目のパラメータについての説明は以下の通りです。`dimentions`と`metrics`の違いは分かりづらいですが、[Web担当者Forumさんの記事](https://webtan.impress.co.jp/e/2012/06/07/12921)が分かりやすいです。
 * `property `：上で説明したプロパティIDです。
 * `dimensions`：データの属性を指します。これに基づいてグループ化（ソート）ができます。
 * `metrics`：データの指標を指します。集計値・数値になります。
 * `date_ranges`：データを取得する期間です。開始日・終了日を一緒に指定します。
7. (l.27)`RunReportRequest()`で作成したリクエストをrunReport()メソッドに渡すことで、任意のGA4データを取得することができます。
8. (l.30~31)"dimention-metric"で対にして結果を出力します。
9. (l.37~40)結果です。

## まとめ
今回は[`runReport`](https://developers.google.com/analytics/devguides/reporting/data/v1/rest/v1beta/properties/runReport)というメソッドを使いましたが、中でもdimensions, metrics以外にも指定可能なパラメータについては[公式サイト](https://developers.google.com/analytics/devguides/reporting/data/v1/api-schema)に一覧があるので、逐一参照しつつ使いましょう。また[「GA4 Dimensions & Metrics Explorer」](https://ga-dev-tools.google/ga4/dimensions-metrics-explorer/)というツールを使えば、利用可能な`dimentions`と`metrics`の組み合わせを確認することができ、さらに、データのレスポンス形式についても事前に確認することができます。

### 参考
* [Google Analytics Data API](https://developers.google.com/analytics/devguides/reporting/data/v1/quickstart-client-libraries?hl=en)
* [Google Analytics Reporting API v4](https://developers.google.com/analytics/devguides/reporting/core/v4?hl=en)
* [googleapis/python-analytics-data - GitHub](https://github.com/googleapis/python-analytics-data#installation)
* [Web担当者Forum - Googleアナリティクスのディメンションと指標（メトリクス）の違い／意味を理解［第9回］](https://webtan.impress.co.jp/e/2012/06/07/12921)

GA4のデータをPythonで取得する。

個人開発のウェブサイトにサブドメインを設定しVercelにデプロイしてみました。

## はじめに
個人開発のWebサイト・Webアプリ。作ったからには多くの人に見てもらいたいのが人の性。カスタムドメインなぞなくとも問題なく公開はできますが、我が子のように丹精込めて作った思い入れのあるWebアプリ、そりゃ名前の一つくらい付けてあげたくなりますよね。そんな時はお名前.comを利用してオリジナルのドメインを取得・設定してあげましょう。それでも年々増える請求額、Webアプリごとに数年単位で取り続けるわけにはいかないでしょう。しかしサブドメインを取得すれば1つのドメインで複数のウェブアプリを公開することができるようになります。

## ドメインの構造
そもそもドメインとは、各PCのインターネット上での住所のようなもので、IPアドレスを人間が識別しやすくした一意のものという理解で良いと思います。対してサブドメインとは、そのドメインにさらに文字列を追加することでドメインを分割したものになります。

### ドメインの取得
ドメインの取得は[お名前.com](https://www.onamae.com/)から可能です。基本は最初の1年無料or1円ですが、2年目移行は料金がかかるので、注意してください。

## サブドメイン設定

### Vercel側の設定
* Vercelにログイン→ [Overview] →[（アプリ名）] → [Settings] → [Domains] とクリックして進んでいくと、下のような画面が現れます。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/vercel-subdomain-webapp1_bspoce">

* "mywebsite.com"というプレイスホルダーを持ったフィールドがあるので、ここにサブドメインを持った任意のURLを入力し、「Add」ボタンをクリックします。
* "Invalid Configuration"のエラー状態のドメインが表示されます。併せて"CNAME (Recommended)"というタブの下に"Type"・"Name"・"Value"という、それぞれ"CNAME・(サブドメイン名)・(URL)"の値を持った情報が現れます。これらの情報を、次はお名前.com側で設定していきましょう。
								
### お名前.com側の設定
#### ネームサーバーの設定
* お名前.comにログイン→ [ネームサーバーの設定] → [(ドメイン名のチェックボックス)] → [お名前.com各サービス利用(タブ)] → [お名前.comのネームサーバーを使う] → 「設定する」ボタンで完了となります。ちなみにこちらのサーバー利用は有料（1,500円/月 ※2022年12月時点）なので、ご利用は計画的に。。

#### DNSレコードの設定
* お名前.comにログイン→ [ドメイン] → [ドメイン機能一覧] → [DNS関連設定] → [次へ(ボタン)] → 「DNSレコード設定を利用する」とクリックして進んでいきます。
* すると、レコード入力画面が現れます。ここでは以下の表の通り5つの情報を入力・選択していきますが、まずは"TYPE"をデフォルトで設定されている"A"から"CNAME"への変更を忘れないでください。今回はサブドメインを設定していますが、"A"はドメイン設定時に使用するものであるため今回は使えません。
* "CNAME"に変更後、は下表の"ホスト名"、"TYPE"、"VALUE"に、それぞれVercel側で設定した項目を入力するだけです。プリセットされている値もあると思うので、確認しつつ入力してください。
| 項目 | 入力内容 |
| :-- | :-- |
| ホスト名 | 新しく作成するサブドメイン（Vercel側の"Name"） |
| TYPE | CNAME（Vercel側の"Type"） |
| TTL | 3600 |
| VALUE | URL（Vercel側の"Value"） |
| 状態 | 「有効」 |
* 上記入力完了後、「追加」をクリックしてDNSレコードが追加されるので、画面一番下までスクロールの上「確認画面へ進む」とすれば設定完了です。※「確認画面へ進む」クリック後"ドメインプロテクション"オプションの申し込みのダイアログが出てくると思いますがこちらは任意です。"ドメインプロテクション"はドメインに関わる各種設定の保護をしてくれる機能で、ドメイン名の不正変更等に役立ちますが、サイトの規模がまだ小さい場合は約1,000円/月を払ってまで必要ではないと個人的には思います。また他にも"Whois情報公開代行メール転送"オプションというのもありますが、こちらも設定する必要はないと思います。
* 設定完了後、反映まで少々時間がかかりますが正しく設定されていれば数時間以内には使えるようになっているはずです。

## まとめ
### 参考
* [お名前.com](https://www.onamae.com/)

Vercelで公開するWebアプリにサブドメイン設定してみた。

Next.jsで作成したWebアプリにGoogleアナリティクス4を設定してみました。

## はじめに
個人開発のWebアプリを使ってデータ分析・解析をやってみたいなと思いGoogleアナリティクスを設定しました。実は以前にもUniversal Analyticsは利用経験がありましたが、そろそろGoogle Analytics 4へ移行する必要があるとのことだったので、もろもろ設定方法をまとめてみました。
なお、以下略称まとめです。

* Googleアナリティクス（以下、GA）：総称
* Google Analytics 4（以下、GA4）：~最新バージョン~現行バージョン
* Universal Analytics（以下、UA）：~現行バージョン~旧バージョン

### 前提
* Next.jsでWebアプリ作成+公開済み
* Googleアナリティクスのアカウント未作成

今回設定の流れとしては、GA4設定 > Next.jsプロジェクト設定 > Vercel設定の大きく2ステップとなります。

## Google関連の設定
### GA4設定（1/3）- 基本設定（前半）
GA4の基本設定については、こちらの[URL](https://analytics.google.com/analytics/web/provision/?hl=ja#/provision/create)から以下の流れです。
"1.アカウントの作成" → "2.プロパティの作成" → "3.お店やサービスの詳細" → "4.ビジネスの目標" → "5.データの収集"
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/gtm-ga4-nextjs1_ofw5os">
GA4用に新しくアカウントから作っていきましょう。
#### 1.アカウントの作成（GA4）
* アカウントの詳細：
 * アカウント名を入力します。何でも大丈夫です。ここで作ったアカウントの下に複数のプロパティを作成することが可能です。
* アカウントのデータ共有設定：
 * 個人のGA4アカウントで収集したデータの、Googleへの共有範囲を管理する設定です。チェックは任意です。「次へ」を選択します。
#### 2.プロパティの作成（GA4）
* プロパティの詳細：GA利用経験はありますが、GA4用に新しくアカウントから作っていきましょう。
 * プロパティはデータを収集・分析したいWebサイトごとに作成します。プロパティ名・タイムゾーン・通貨を指定します。それぞれ何でも大丈夫ですが、タイムゾーン・通貨はとりあえず日本で良いでしょう。ちなみに通貨を設定してはいますが、今回の設定で費用は発生しませんのでご安心を。「次へ」を選択します。
#### 3.お店やサービスの詳細（GA4）
* ビジネスの詳細：
 * 今回の設定において重要な情報ではありません。Google様への貢献です。「次へ」を選択します。
#### 4.ビジネスの目標（GA4）
* ビジネスの目標：
 * この項目はダッシュボード利用時のレポート画面に影響を及ぼすため、GA4の利用目的に沿って選択しましょう。なお、「ベースラインレポート」を選択した場合は、汎用性の高いレポート画面が表示されます。「作成」を選択します。
* 利用規約：
 * ビジネスの目標を設定すると、利用規約のモーダルが表示されるので、内容を確認してチェックしたあと次に進みます。
#### 5.データの収集（GA4）
* ここで収集データの設定もできますが、一旦「今回はスキップ」を選択後、「データ収集を設定」を選択しましょう。

### GA4設定（1/3）- データストリーム作成（後半）
上記5.で「データ収集を設定」を選択後、データ収集を開始するために"データストリーム" を設定します。"データストリーム" とは、Webサイト・Webアプリ・スマホアプリ等からデータを吸い上げてプロパティに流し込むための仕組みぐらいに考えておいてください。Webサイトからの場合は"ウェブストリーム"、スマホアプリからは"アプリストリーム" を作成します。

* まずは（モーダルで隠れてしまっていますが、）プラットフォームとして「ウェブ」を選択すると以下画面のように、"データストリームの設定"というモーダルが右から出現します。※赤の網掛け部分はアカウント名やプロパティ名になります。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/gtm-ga4-nextjs2_cuz5zj">
* "ウェブストリームの設定"では"ウェブサイトのURL"と"ストリーム名"を入力していきます。この時点でいくつかのイベントがデフォルトで有効となっていますが、後から編集可能なので今回は一旦このまま「ストリームを作成」しましょう。
* すると、下画面のように「ウェブストリームの詳細」が表示されます。"ウェブサイトのURL"・"ストリーム名"は前画面で設定した通りですが、これに加えて"ストリームID"と"測定ID"が新たに生成されていることが分かります。"ストリームID"は一意の識別子として振られていますが差し当たり必要にはなりません。一方で"測定ID"については次のステップで設定時に必要になるものです。また、画面右上に「タグの実装手順を表示する」とあるように、現段階でこの測定IDが埋め込まれていないのでエラーが出ています。Google様に急かされているので仕方がありませんね、続きましてNext.jsプロジェクト側の設定です。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/gtm-ga4-nextjs3_f5blgv">

## Next.jsプロジェクトの設定
### Scriptの埋め込み（Next.js）（2/3）
基本的には[Vercel/Next.js](https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics)のレポジトリを参考にしています。
#### .envファイルの作成
<script src="https://gitlab.com/-/snippets/2570426.js"></script>
* まず`.env`ファイルにNEXT_PUBLIC_GA_TRACKING_IDと測定IDを入力して、これから作成するファイルで受け取れるようにします。こちらは一旦はローカルでしか使いません。本番環境における設定方法は次のステップでの説明となります。

#### .gitignoreファイルへの追記
<script src="https://gitlab.com/-/snippets/2570427.js"></script>
* `.env`ファイルで設定した内容はローカルでしか使わないため、`.gitignore`ファイルでそのように管理しましょう。`.env`と記載するだけですが。

#### gtag.jsファイルの作成
<script src="https://gitlab.com/-/snippets/2570428.js"></script>
* `.env`ファイルで設定した測定IDに対して、GA4にイベントデータを送信するための設定です。
* (l.4~8)：ページビューを測定しています。UAベースの設定（[URL](https://developers.google.com/analytics/devguides/collection/ga4/event-parameters?hl=ja&client_type=gtag)）になっているためGA4向けに移行が必要になりますが、ここではページのURLを送っています。
* (l.11~17)：イベントのカテゴリとラベルに応じた値を送っています。同じくUAベースでの設定（[URL](https://developers.google.com/analytics/devguides/collection/gtagjs/events?hl=ja)）となっているので、スニペット上のURLを参考にすると良いかもしれません。


#### _app.jsファイルの変更
<script src="https://gitlab.com/-/snippets/2570429.js"></script>
* データ収集のためには全ページで共通に設定させる必要があるので、`_app.js`を修正していきます。
* なおbuild時にエラーが出る場合は、`<script>`タグ内に、asyncを追加してあげると上手くいくかもしれませんので必要に応じて試してみてください。

## Vercelの設定
### 環境変数の設定（3/3）
今回はVercelにデプロイしましょう。Next.jsプロジェクト設定時に、`.env`ファイルにGA4の測定ID（Gから始まるもの）を埋め込みましたが、同時にリモートレポジトリにpushされないように`.gitignore`ファイルも用意しました。そのため、本番環境でも測定IDを利用するにはVercel側での環境変数設定が必要になります。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/gtm-ga4-nextjs5_svost5">
* 環境変数を設定するには[Settings] > [Environment Variables]で上の画面にいきます。
* `.env`ファイルと同様に、KeyにNEXT_PUBLIC_GA_TRACKING_ID、Valueに測定IDを入力後、すぐ下のProductionというチェックボックスにチェックを入れます。終わったら「Save」ボタンを押して環境変数は設定完了です。
* 最後にいつも通りデプロイを実施します。

## まとめ
うまく設定できていれば、GA4のダッシュボードは以下のようにカウントされていると思います。あとはイベントが正しくカウントされているかどうか、リアルタイム等を見ながら確認してみましょう。例えばページ内にフォームがあれば入力してみると、"form_start"のようなイベントがカウントされているかと思います。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/gtm-ga4-nextjs6_uqn4ir">
### 参考
[GitHub - Vercel/Next.js]()
[Next.js で GTM + GA4を利用する](https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics)(https://zenn.dev/keitakn/articles/nextjs-google-tag-manager)
[Next.js に Google Tag Manager を設定する](https://haramizu.com/blog/2022/02/25/nextjs-googletagmanager)

Next.jsのWebアプリにGA4設定してみた

Twitter API v2に登録して自動でツイートしてくれるbotをPythonで作ってみました。

## はじめに
個人開発で作成したアプリを手っ取り早く無料で認知拡大させるには、やっぱりTwitterですよね。とはいえ毎日ツイートを考えて投稿するのはなかなか骨が折れると思います。ということで、投稿の自動化をすべく今回はbotを作ってみました。
※本記事で利用するツールは一部利用料金がかかる可能性があります。次章で公式へのURL付きで簡単に説明しています。

## bot作成・公開の前に
今回はTwitter API v2とHerokuを使った方法をご紹介しますが、残念ながらTwitter API v2では以前利用できた機能が一部有料版の機能となったり、Herokuについては月額利用料金がかかってしまったりで、そのまま使えないかもしれませんが詳しくは公式情報参考にしつつその点だけご留意いただいた上でご覧ください。
### Twitter APIの有料化（Freeプランあり）
以前は無料版で多くの機能が使えましたが、現行の無料版では基本的には投稿・削除機能のみが利用可能で、投稿上限は1,500ツイート/月となっています。詳しくは[公式](https://developer.twitter.com/en)でご確認ください。
### Herokuの有料化（Freeプラン撤廃）
Herokuも無料で使えることから個人開発者の間で重宝されてきましたが、現在ではローエンドのプランも有料となってしまいました。こちらも詳しくは[公式](https://jp.heroku.com/pricing)をご確認ください。
### bot公開手順
ということで幸先が良いスタートではありませんが、botを公開するまでの手順については大きく以下の通りです。

* Twitter API v2への登録（１／３）
* Pythonでbotを作成（２／３）
* Herokuに公開（３／３）

今回はPythonでbotを作成しますが、Rust、PHP、JavaScript等でも作成可能です。

## bot作成
### Twitter API v2への登録（１／３）
#### Twitter APIとは
そもそも[Twitter API](https://developer.twitter.com)とは、ですが「Twitterアプリケーションを使うことなく、ツイート・いいね・リツイート等の情報を取得・投稿できるサービス」です。なお、API利用にともないv1とv2の2種類がありますが、v1は[非推奨](https://twittercommunity.com/t/deprecating-the-premium-v1-1-api/191092)となりました。また、v2についても、これまでEssential, Elevated, Academic Reseachの3種類がありましたが、こちらも非推奨となりましたのでこの記事は無料で利用可能なv2（Free）の利用について解説します。ちなみに、Freeの他にはBasicとEnterpriseがいずれも有料です。

#### アカウント作成
* 前置きが長くなりましたが、アカウント作成後はCONSUMER_KEY, CONSUMER_API_SECRET, ACCESS_TOKEN, ACCESS_TOKEN_SECRET, BEARER_TOKENが発行できるのでこれらは別途控えておいてください。
* なお、ACCESS_TOKENについては"[Read and Write](https://developer.twitter.com/en/docs/apps/app-permissions) permissions"となっていることを確認しておいてください。※これが"Read only"だとツイート投稿ができません。~前述の通りプランが変わったので、こちらの設定は不要になりました。投稿しかできないんだからそりゃそうですよね。~

### Pythonでbotを作成（２／３）
* 今回は試しにSOUL'd OUTのDiggy-moさんのアレを1日1回ツイートしてくれるbotを作ります。Pythonを使ってコードを書いていきますが、ちょうど[Tweepy](https://docs.tweepy.org/en/stable/)というライブラリがあったのでこちらを使わせてもらいましょう。楽なので。まずはライブラリインストールです。
```
pip install tweepy
```
* 続いて下の通りコードを書いていきます。一行解説始めます。
<script src="https://gitlab.com/-/snippets/2567492.js"></script>
1. (l.1)tweepyをインポートします。
2. (l.3~7)Twitter APIで発行されたキーを用意します。サンプルなので直接入力していますが、`.env`ファイル等用意しておいた方が良いと思います。
3. (l.9~15)`tweepy.Client()`にキーを入れ、`client`変数に格納します。これで認証させる感じです。
4. (l.17-19)`tweet`関数を作ります。`create_tweet`メソッドの引数に投稿したい文字列を入力します。

それでは実行してみましょう。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/twitterapi-bot1_beroig">
鳴きましたね。

### Herokuに公開（３／３）
最後に作成したPythonファイルをHerokuにデプロイします。上のようにPythonファイルを作っただけではローカルからしか投稿ないので、Herokuが提供している[Heroku Scheduler](https://elements.heroku.com/addons/scheduler)というAdd-on機能を利用して定期的にPythonファイルを実行（自動投稿）する仕組みを作りましょう。
* まずはHerokuアカウントから[Heroku Scheduler](https://elements.heroku.com/addons/scheduler)（無償）をインストールします。
* Heroku Schedulerから定期実行（Job）を設定します。下の画像中央部よりCreate jobボタンをクリックすると画面右側にモーダルが表示されるので、ここで繰り返し時間（1/10min, 1/1h or 1/day）と実行コマンドを設定します。1日1度とした場合、UTC設定となるため日本国内での実行の場合には、-9時間で調整する必要があります。
* コマンド部分にはPythonファイルの実行コマンドを入力しますが、この時点で先ほど作った`tweet_sample.py`ファイルがアクセスできる状態にしておく必要があります。そのために、HerokuとGitHubが同期されている必要がありますがその設定方法は[こちらの記事](/blogs/django-heroku-deploy)でまとめていますので別途確認ください。実行コマンドまで入力が完了したらこれで「Job」の設定は完了です。v2 Freeの投稿上限は1,500ツイート/月のため、1時間毎のツイートであれば上限値に引っかからなそうですね。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/twitterapi-bot2_jx1rfc">
* また、Twitter API利用にはCONSUMER_KEY等必要であることは2.の通りですが、Herokuへのデプロイ後は、環境変数の入力を忘れないようにしましょう。HerokuのDashboardから、[Settings]タブ > [Reveal Config Vars]ボタンで環境変数は入力可能です。

## まとめ・参考
Tweepyを使えばとても簡単にbotを作ることができますね。ただし、短いスパンで同じ内容を繰り返し投稿しようとすると、Twitter側にはねられる可能性があるようです。無料枠の範囲内でプログラム側でランダムにorユニークな投稿をする仕組みを工夫して作ってみてください。
### 参考
* [Twitter Developer Platform - Home](https://developer.twitter.com/en)
* [Heroku - Herokuの価格](https://jp.heroku.com/pricing)
* [Twitter Developer Community - Deprecating the Premium v1.1 API](https://twittercommunity.com/t/deprecating-the-premium-v1-1-api/191092)

Twitter API v2に登録して自動投稿するbotを作ってみた

HerokuのデータベースをDataclipsを使ってJSON出力してみました。

## はじめに
Herokuの無償版が近々使えなくなってしまうので、そろそろやばいと思い一旦データをどこかに出力・保管しておこう、ということでDataclipsを使ってみました。ビボーロクです。

## Dataclips使ってみた。
### Dataclipsとは
一刻も早くJSON出力したいので、ここは[公式](https://devcenter.heroku.com/ja/articles/dataclips)の説明をそのままお借りします。
> Heroku Dataclips を使用すると、Heroku Postgres データベースへの SQL クエリを作成し、その結果を同僚、サードパーティツール、パブリックと共有できます。データクリップの受信者は、そのデータをブラウザで表示できるほか、JSON および CSV 形式でダウンロードすることもできます。

要するにHerokuのダッシュボード画面からJSON・CSV形式でエクスポートできる機能ということですね。これは便利。急ぎで使ってみましょう。

### 使い方
Herokuへのログイン後は[Dashboard画面](https://dashboard.heroku.com/apps)が最初に表示されていると思うので、そこからデータクリップを操作できる画面に移動しましょう。まずは[Data画面](https://data.heroku.com/)に移動し任意のアプリケーションのDBを選択、Dataclipsタブを選択します。するとCreate Dataclipというボタンが現れるのでクリックすると下の画像のような画面が現れます。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/heroku-dataclips-howto1_oduno6">
ほとんどの項目・テーブルがグレーの網掛けでマスクしてあるので見づらくなってしまっていますが、画像上に記載の番号通り選択・記述するだけで任意のデータをエクスポートできます。
* ①・・・データクリップ名を指定します。データクリップ1つに対し、処理は1つ書くことができます。
* ②・・・プルダウンで処理を実行したいDBを選択します。
* ③・・・DB内に存在するテーブル一覧を確認することができます。
* ④・・・SQL文を書く欄です。今回はテーブルを丸ごと出力したかったので、そのように記述しました。
* ⑤・・・④で書いたSQLの結果が表示されます。
* ⑥・・・⑤で表示された結果をエクスポートする際の形式を指定します。JSONとCSVが選択可能です。

これだけ。ほんまに簡単。

### PostgreSQLとの接続
以上で出力の作業は完了していますので、暇があればこの先読んで見てください。
* ここでは、「PostgreSQLをCLIからも操作できるようにしておかないといけないなぁ」とふと思い立ったことから、接続だけできるようにということで設定方法をまとめています。というわけでまずはHerokuのPostgreSQLに接続します。
<script src="https://gitlab.com/-/snippets/2567487.js"></script>
* 早速エラーです。ローカルにPostgreSQLがインストールされている必要があるようですね。ということで親切に[公式ドキュメントのURL](https://devcenter.heroku.com/articles/heroku-postgresql#local-setup)が記載されているので中身を見てみると、[Postgres.app](https://postgresapp.com/)をインストールするように指示があるので、仰せのままに。インストール後はPATHを通すよう指示があるので実行します。
<script src="https://gitlab.com/-/snippets/2567488.js"></script>
* これでパスが通ったはずです。もう一度接続を試みます。
<script src="https://gitlab.com/-/snippets/2567489.js"></script>
* これでCLIで操作できる環境を構築することに成功しました。

## まとめ
Dataclipのおかげで我が子のように大事なデータをとりあえずローカルに保管できました。今後Herokuを使い続けるか他サービスに乗り換えるべきか検討したいです。ただし、いずれにしてもSQLは習得する必要があるので、個人的に勉強しておかないとなぁと思った次第です。今回はあえてお試しでテーブル内の全データを出力したかのような書きぶりでしたが、それしかできないだけですので、ここにて報告させていただきます。

### 参考
* [Heroku Dev Center - データクリップとのクエリ結果の共有](https://devcenter.heroku.com/ja/articles/dataclips)
* [Heroku Dev Center - Heroku Postgres, Local Setup](https://devcenter.heroku.com/articles/heroku-postgresql#local-setup)
* [Postgres.app](https://postgresapp.com/)

HerokuのDataclips使ってみた。

Next.js+Tailwind CSSの環境でGoogleフォントを設定してみました。

## はじめに
フォントってけっこう気になりません？私はとても気になります。ちょうど作成中のプロジェクトでデフォルトのフォントがあまり気に入らなかったのでGoogleフォントから好みのフォントを適用してみました。

## Googleフォント（Google Fonts）とは
Google社が提供するWeb上で利用できる無料（商用利用可）のフォントサービスです。[Wikipedia](https://en.wikipedia.org/wiki/Google_Fonts)によると、2010にサービスが開始され、2023年6月時点では1,527種類のフォントが提供されているようです。

## 利用方法
基本的には、1.使用したいフォントの選択、2.フォントの調整、3.プロジェクトへの反映の3ステップで利用できるので簡単です。
### 使用したいフォントの選択（1/3）
* まず[Googleフォント](https://fonts.google.com/)にアクセスして好きなフォントを選択しましょう。
* 今回は"Roboto"というフォントを選んでみます。選んだポイントは、、、何となくです。

### フォントの調整（2/3）
* 続いて選択したフォントを調整します。ここではフォントの重み（font-weight）、大きさ（font-size）、イタリックorNotの調整をします。
* 今回は"Light 300"というものを使ってみましょうかね。下画像の小さい赤枠のSelect Light 300 +ボタンを押すと（現在選択済みなので`Remove~`と出てしまっていいますが）、画面右側の`Selected family`に、大きい赤枠の通り選択中のフォントが表示されます。※もし右側の`Selected Family`のモーダルが出てこない場合は、画面右上の四角形3つと十字のアイコンを選択すれば出てきます。この中の情報をNext.jsプロジェクト側で設定します。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/googlefonts-nextjs-tailwindcss1_qvw2h4" />

 
### Next.jsプロジェクトへの反映（3/3）
#### pages/_app.jsの作成
* Googleフォントで選んだフォントをプロジェクト全体で利用するためには、まず`pages`ディレクトリ内に新しく`_app.js`というファイルを作成します。Next.jsの[documentation](https://nextjs.org/docs/basic-features/font-optimization#usage)内にもフォント追加ための同ファイル作成方法の記載があります。
<script src="https://gitlab.com/-/snippets/2567483.js"></script>
1. (l.1)Googleフォントで探し出した、使用したいフォントをインポートします。
2. (l.4)フォントの重みを決めます。今回は`font-weight`を300に指定します。
3. (l.5)フォントの変数を決めます。こちらは次に設定する`tailwind.config.js`から参照するために設定が必要な項目になります。

#### tailwind.config.jsへの追記
* 続いて`tailwind.config.js`を修正していきます。
<script src="https://gitlab.com/-/snippets/2567484.js"></script>
1. (l.8~l.11)`extend`内に`fontFamily`を用意し、その中で`pages/_app.js`で設定したフォントの変数を設定します。これでGoogleフォントを使うための設定は完了しました。

あとは下のようにクラス内に記述するだけで設定したフォントを適用できます。
```
<div className="font-roboto">こんにちは地元</div>;

```

## 注意
最後にこんなこと書くのもですが、2022年ドイツ、ミュンヘンの地裁でGoogleフォントがGDPR違反であるという判決を受けました。[The Hacker News](https://thehackernews.com/2022/01/german-court-rules-websites-embedding.html)によると、ユーザーのIPアドレスが許可なくGoogleに送信されているからという理由のようです。GDPRというのは四方八方から横槍入れてくれますよね〜。司法だけに。

## まとめ・参考
絶対に日本国内からしかアクセスできない情報であれば現状問題はないと思いますが、GDPR絡みのこともあるので、ローカルでホストする方法を模索する必要もありそうです。
* [Next.js - Font Optimization](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts)
* [Wikipedia - Google Fonts](https://en.wikipedia.org/wiki/Google_Fonts)
* [The Hacker News - German Court Rules Websites Embedding Google Fonts Violates GDPR](https://thehackernews.com/2022/01/german-court-rules-websites-embedding.html)

Googleフォントの使い方（Next.js + Tailwind CSS）

Next.js（+ Tailwind CSS）を始める際の環境構築について解説します。

## はじめに
みなさんはフロントエンドのフレームワークに何を使いますか？私はNext.jsです。なぜかって？名前がカッコイイからです。この記事ではNext.jsをカッコよく（？）始めるための方法をしたためておきます。

## 開発環境
* macOS 12.2.1 Monterey
* Next.js
* TailwindCSS
* Visual Studio Code

## 環境構築
DRFの環境構築同様、初学者向けですが「1行解説」、やっていきます。作業は大きく分けて3ステップです。
### ディレクトリ作成（１／３）
<script src="https://gitlab.com/-/snippets/2567429.js"></script>
1. (l.1)まずはターミナルを開いてデスクトップに移動します。今回はデスクトップにプロジェクトを作成します。
2. (l.2)プロジェクトを入れる箱として、`sampleBox`を作成します。名前は何でも大丈夫です。
3. (l.3)作成した`sampleBox`に移動します。次のステップではパッケージをインストールします。

### Next.jsプロジェクト作成（２／３）
<script src="https://gitlab.com/-/snippets/2567431.js"></script>
1. (l.1)`sampleBox`内でNext.jsのプロジェクトを作成します。プロジェクト名を`next_sample`としていますが、もちろん名前は何でも大丈夫です。
2. (l.2)`next_sample`のプロジェクトに移動します。
3. (l.3)続いてnpm installで、TailwindCSSをインストールします。
4. (l.4)それではローカルサーバを立ち上げましょう。すると下の画像のような画面が表示され一旦準備が整いました。ワクワクしてきましたね。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/nextjs-tailwindcss-setup1_kx1syp">
※なお、画像ではローカルサーバーのURLのポート番号が3001となっていますが、通常は3000となっているはずです。3000というポートが別で立ち上がっている場合に、Next.jsではその次のポートで立ち上げてくれます。
5. (l.5~6)続いてNext.js側でTailwindCSSの設定を行います。[TailwindCSS](https://tailwindcss.com/docs/guides/nextjs)のHPからNext.jsにおける設定方法を確認し、追加でプラグインのインストールを実施、初期化をします。
* そして、同ディレクトリに`components`フォルダを作成すると、最終的には下のようなディレクトリ構成となっているはずです。

<script src="https://gitlab.com/-/snippets/2567435.js"></script>

### TailwindCSS設定（３／３）
ステップ2までで、ディレクトリ構成に関わる設定を一通り終えました。ここからはTailwindCSSを利用するために各ファイル内で必要な設定をします。基本的には同ページ内の指示通り実施するだけですが。

#### Tailwind.config.css
1. (l.3~6)同ページの指示通り、`content`を一部書き換えます。

<script src="https://gitlab.com/-/snippets/2567437.js"></script>

#### global.css
1. (l.1~3)プロジェクト作成時に記載してあった内容を全て上書きする形でコピペするだけです。

<script src="https://gitlab.com/-/snippets/2567438.js"></script>

## まとめ・参考
今回TailwindCSSを利用しての環境構築を解説しましたがもちろん利用は任意です。ただこのようなCSSフレームワークを使うとCSS設計が不要と言う点でページ作成が楽になると思うのでおすすめです。最初は記述方法等で苦労するかもしれませんが、検索すると[チートシート](https://nerdcave.com/tailwind-cheat-sheet)なんかも出てくるので、参考にしてみると良いかもしれません。

###　参考
* [Installation - Tailwind CSS](https://tailwindcss.com/docs/installation)
* [Tailwind CSS Cheat Sheet](https://nerdcave.com/tailwind-cheat-sheet)

Next.js + Tailwind CSSの環境構築

Reactで作ったWebアプリをNetlifyを使って公開してみました。

## はじめに
最近Webアプリを作成する際にはNext.jsを使うので公開時には悩むことなくVercelで公開するのですが、今回シンプルにReactだけでWebアプリを作成したので、せっかくならと別のホスティングサービスを利用することにしてみました。Netlifyです。

## デプロイ方法
難しい手順はそれほどないのですが、デプロイの手順をまとめてみました。
* Netlifyにユーザーアカウントを作成します。NetlifyにデプロイするためにはGitHub・GitLab等のレポジトリと接続する必要がありますが、いずれかのアカウントがあれば特に迷うことなくサインアップできると思います。まずは下の画像から[Add new site] > [Import an existing project]を選択します。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/netlify-deployment-react1_id6e1c"/>
* すると下の画像の通りデプロイに必要なステップが示されます。1.Connect to Git provider → 2.Pick a repository → 3.Site settings, and deploy! と3ステップでデプロイ完了ということが分かりますね（見た感じ簡単そう？）。ここではGitHubを選択しましょう。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/netlify-deployment-react2_y2gdql"/>
* （1/3ステップ）NetlifyからGitHubへページ遷移するので、接続を許可するため、Authorizeボタンを押します。これでステップ1完了です。
* （2/3ステップ）次にGitレポジトリからプロジェクトを選択します。ここでは任意のプロジェクトを選択してください。これでステップ2完了です（え、もうできたん？）。
* （3/3ステップ）そして最後に諸々設定してDeploy siteボタンをクリックしてステップ3完了=デプロイ完了！！！
... と思ったらエラー発生です。世の中そんなに甘くありません。
* Deploy logからエラーの原因を探っていきましょう。ログを見たところ（一部省略してありますが）以下のようなエラーが出ているのが分かります。
<script src="https://gitlab.com/-/snippets/2593020.js"></script>
* 今回ReactとMUIを利用してWebアプリを作ったのですが、ReactのバージョンとMUIのバージョンが同等でない時に出現するエラーです。このエラーに対しては`--legacy-peer-deps`を環境変数に設定してあげることで一応？[解決](https://answers.netlify.com/t/deploy-failed-today-build-was-terminated-build-script-returned-non-zero-exit-code-1/64450)します。環境変数は下の画像の通り、ナビゲーションの[Site settings] > [Environment variables] > [Add a variable] > Add a single variableをクリックしていくと入力できます。ここでKeyに`NPM_FLAGS`、Valuesに`--legacy-peer-deps`を入れてCreate variableボタンを押した後、再度デプロイしてあげましょう。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/netlify-deployment-react3_eeycjb" />
* ... ってまたエラーかい。ということで再度ログ確認です。よく見ると気になる一文が。
<script src="https://gitlab.com/-/snippets/2593021.js"></script>
* デフォルトでは`CI=true`となっており`Warnings`が`Errors`として扱われているため、デプロイできていない模様。というわけで先ほど同様環境変数で`CI = false`を設定してあげて再デプロイ！
* ようやくPublishedの文字が！これでデプロイ完了、では早速URLをクリックして見まsy...
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/netlify-deployment-react4_f5b1eu">
* まだ出んのかい。そこでさらに調べていくと、[こちら](https://rexben.medium.com/how-to-fix-page-not-found-on-netlify-with-react-router-dom-e0520692be5)の記事に解説がありました。React Routerはクライアント側でルーティングを処理するので、サブディレクトリで枝分かれした非ルートページに遷移しようとするとNetlify側で処理できなくなるとのことです。解決方法は以下の通りです。
<script src="https://gitlab.com/-/snippets/2567013.js"></script>
* `public`フォルダ内に`_redirects`ファイル（拡張子不要）を作成して、`/* /index.html 200`とだけ入力し再度デプロイすれば問題なく（Page Not Foundが出ることなく）動作することが確認できます（参照：[Netlify Docs](https://docs.netlify.com/routing/redirects/rewrites-proxies/#history-pushstate-and-single-page-apps)）。書いてありましたね。しっかりドキュメントを読んでいなかったことが発覚したわけですが、とりあえずデプロイできました。

## まとめ・参考
個人的にはNext.jsとVercelの組み合わせの方が簡単だなぁという印象ですが、Netlifyも問題なく使えそうだなぁという発見があったのでよかったです。※言うまでもなくエラーは当方の未熟さによるものなので、決して使いづらいということはありません。

### 参考
* [Netlify Support Forums](https://answers.netlify.com/t/deploy-failed-today-build-was-terminated-build-script-returned-non-zero-exit-code-1/64450)
* [How to fix page not found on Netlify with react-router-dom
](https://rexben.medium.com/how-to-fix-page-not-found-on-netlify-with-react-router-dom-e0520692be5)
* [Netflify Docs](https://docs.netlify.com/routing/redirects/rewrites-proxies/#history-pushstate-and-single-page-apps)

WebページをNetlifyを使って公開する方法

ついついそれっぽく使ってしまうソレについてまとめました。

## はじめに
クラスとかモジュールとかなんとなく理解しているつもりになりがちですが、私自身恥ずかしながらいつも知ったかぶりをしてしまいます。と言うことで恥を忍んで自分用にもまとめました。

## 例文と図
本説明ですが少々概念的であるため、初学者にとってはなかなか理解しづらいと思います。そこで、下のような図と例文を作成してみました。一つ目が完成品メーカーにおける指示の記述、二つ目がPython世界における考え方の記述です。そもそもPythonはオブジェクト指向のプログラミング言語のため、各モジュール内にオブジェクトとしてクラスが格納されており、それを必要に応じて呼び出して使います。では、現実世界（目に見えるハードウェアの世界）で考えていましょう。あなたは完成品メーカーで管理職として働いているとします。完成品メーカーは部品メーカーから物を調達して、組み立て世に出すのが役割ですね。現在部品メーカーAから部品Dを調達していますが、例えば災害によりAの工場Bの操業が停止になってしまったとします。当然部品Dは安定供給が難しくなるため他のサプライヤーを探します。その際の指示は以下のようになるでしょう。
* ***部品メーカーAのB工場内C部門に問い合わせて、製造している部品Dで代用してください。***

<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/python-lpmcf1_mbgcuz">

これをPythonの世界で考えると以下の通りです。
* ***外部ライブラリAのBモジュール内にあるCクラスのDメソッド（関数）を利用してください。***

以上のように（？）実際にはこんなに丁寧に表現することはありませんが、より広い概念から狭い範囲まで構造化できると、各用語の関係性についてのイメージがつきやすいと思います。（~~例文が意味不明という意見は受け付けません。~~）続いて、各要素の説明に移ります。

## 各要素
### ライブラリ
先述の完成品メーカーの例でいう **部品メーカー** にあたります。
* 実にややこしいことに、ライブラリのことをパッケージと呼ぶこともありその逆もまた然りと両者は曖昧です。（ざっくりですが）パッケージをいくつかまとめた大きなものがライブラリだという理解で良いかなと思います。そして、そのライブラリには標準ライブラリと外部ライブラリの2つがあります。ラブライブはありません。

#### 標準ライブラリ
Pythonをインストールした時点で利用できるライブラリです。`pip`コマンドでインストールすることなく使用することができます。標準ライブラリだけでも膨大な量があるので、こちらの[Python標準ライブラリ（公式ドキュメント）](https://docs.python.org/ja/3/library/index.html)を常に参照できるようにしておくと良いですね。

<details>
<summary>Python 標準ライブラリ</summary>
<ul><li>組み込み関数<a href="https://docs.python.org/ja/3/library/functions.html">（公式ドキュメント）</a>
 
・・・<code>enumerate()</code>, <code>open()</code>, <code>print()</code>, <code>range()</code>, <code>str()</code>, etc.
</li>
<li>組み込み定数<a href="https://docs.python.org/ja/3/library/constants.html">公式ドキュメント</a>
 
・・・<code>False</code>, <code>True</code>, <code>None</code>, etc.
</li>
<li>組み込み型<a href="https://docs.python.org/ja/3/library/stdtypes.html">公式ドキュメント</a>
 
・・・ブール演算（<code>False</code>, <code>True</code>, <code>None</code>）, 比較（<code>></code>, <code><</code>, <code>==</code>）, 数値型（<code>int</code>, <code>float</code>）, etc.
</li>
<li>その他モジュール<a href="https://docs.python.org/ja/3/library/index.html">公式ドキュメント</a>
<a href="https://docs.python.org/ja/3/library/index.html">公式ドキュメント</a>
 
・・・数学（<code>math</code>, <code>random</code>, <code>statistics</code>）, ファイル・ディレクトリアクセス（<code>os.path</code>, <code>pathlib</code>）, etc. 
</li>
</ul>
</details>

#### 外部ライブラリ
Pythonのインストール後に`pip`コマンド等を使って別途インストールしてから使うことができるライブラリです。例えば、Webアプリケーションフレームワークの`Django`や機械学習ライブラリの`scikit-learn`等がそれにあたります。AIや機械学習で有名なPythonですが、このようなライブラリが一役買っています。

### パッケージ
先述の完成品メーカーの例でいう **部品メーカー** にあたります。
* モジュールを集めたディレクトリで、`__init__.py`ファイルが存在していることが特徴です。
<script src="https://gitlab.com/-/snippets/2565795.js"></script>
例えば、Djangoのディレクトリ構成の記事でも紹介しましたが各ディレクトリ（`sample_project`、`sample_app`）内にも同様にありますよね。`__init__.py`ファイル内には何も記述されていなくても大丈夫ですが、`__init__.py`ファイルによってディレクトリを **パッケージ** だと認識させることができ、そのディレクトリ内でモジュールを検索することができます。※ただし、version 3.3以降は`__init__.py`がなくてもディレクトリをパッケージと認識してくれます。
* 長々と説明しましたが、端的に言えばディレクトリです。

### モジュール
先述の完成品メーカーの例でいう **工場** にあたります。
* `.py`がついた、クラスやメソッド・関数がまとめられたファイルです。難しく考える必要はないですね。

### クラス
先述の完成品メーカーの例でいう **部門** にあたります。
* モジュール内にありメソッドや関数をまとめて記述した処理のものです。

### メソッド・関数
先述の完成品メーカーの例でいう **部品** にあたります。
いずれもクラス内の実際の処理内容で、並列で記載しましたが、厳密には違います。なお、下記の通り説明していますが、例外はあります。
* 関数・・・単独で呼び出し可能なものです。例えば、`print()`関数は引数を入れてあげればいつでも呼び出し可能ですね。
* メソッド・・・変数や値に`.（ドット）`を付け加える形式で呼び出すものです。例えば、リストから要素を取り出す`.pop()`はメソッドにあたります。

## 使用法
ということである程度違いが分かった（？）ところで、使い方についても見てみましょう。
Pythonでは次のようにモジュールをインポートして使えるようになります。上はパッケージ全部、下はパッケージの中でもモジュール指定でのインポートの方法です。モジュール指定してインポートするかどうかで、実際の呼び出し方が変わってきます。
<script src="https://gitlab.com/-/snippets/2566958.js"></script>
上の方法ではパッケージ全体をインポートするため、パッケージ内の複数のモジュールにアクセスできます。ただし、モジュール名を指定する必要があるのでコード自体は長くなります。一方で下の方法では特定のモジュールだけをインポートしますが、モジュール内の関数やクラスを直接使用できるためコードの可読性が向上します。ただし、モジュールごとにインポートを記載する必要があります。どちらの方法を取るかは都度決めると良いと思います。

## まとめ・参考
普段から使っていれば特に迷うことはありませんが、使い分けができていないとドキュメントを読むのに一苦労だと思うのでさっさと覚えてしまいましょう。

Pythonのライブラリ、パッケージ、モジュール、クラス、関数・メソッドの違い

複数のPCから1つのGitHubアカウントにSSHで接続する方法についてまとめました。

## はじめに
普段はLaptopを使用する私ですが、容量が足りなくなりしばらくDesktopを使用することになりました。環境構築等していつも通りGitHubにpushしようとしましたが以下のようなエラーが、、
<script src="https://gitlab.com/-/snippets/2566927.js"></script>

これは公開鍵がGitHubに登録されていない時に返されるエラーですね。ということで、Laptop・Desktopの両方からGitHubを利用できるように、公開鍵の登録方法をまとめていきます。

##　公開鍵登録
この操作にはSSHの公開鍵認証方式を利用します。
それでは「1行解説」、始めます。
<script src="https://gitlab.com/-/snippets/2566928.js"></script>

* (l.1)：まずはターミナルから`.ssh`ディレクトリに移動します。※なおここで`cd: no such file or directory: /Users/{username}/.ssh`というエラーが返ってくる場合は、`$ mkdir ~/.ssh`でフォルダを作ってあげましょう。
* (l.2)：続いて`ssh-keygen`コマンドを実行し、秘密鍵・公開鍵を一対作成します。今回は4行目〜6行目はEnterでスキップしましょう。すると、`.ssh`ディレクトリに7行目に秘密鍵`id_rsa`と8行目に公開鍵`id_rsa.pub`が作成されました。
* 続いてGitHub側の設定です。GitHubアカウントから[Settings] > [SSH and GPG keys] からNew SSH Keyという緑色のボタンをクリックすると、下のような画面に移動します。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/multiplepc-1githubaccount_moo2iq" />
* Titleには任意の名前を、Keyには公開鍵`id_rsa.pub`の中身を入力します。Keyについてはローカル側のターミナルに戻って13行目のように`cat`コマンドで中身をコピーして、GitHub側のKey内に貼り付けてAdd SSH 
 KeyボタンをクリックしてGitHub側の設定は完了です。
* そして最後にターミナルでGitHubの14行目ユーザ名と15行目メールアドレスを設定します。これで全部の設定が完了しました。これまで通りpushできるようになっています。


## まとめ・参考
なおGitHubでは無償の個人アカウントを複数所有することは規約違反となるので気をつけてください。

複数のPCから1つのGitHubアカウントを利用する方法

Djangoでの開発時よく使用されるコマンドについて調べました。

## はじめに
Djangoで必ず使用するファイルと言えば？、、、`manage.py`ですよね。これが使えないと話にならないと思います。ではこのファイルを使ったコマンドはいくつ言えますか？、、、`makemigrations`, `migrate`, `runserver`もセットで覚えると思いますが、私だけでしょうか、他は使わないからすぐ忘れてしまうんですよ。山手線ゲームやったら確実に4・5人目で切れますね。そこで今回はコマンドおよびコマンドラインユーティリティの種類・使い方についてまとめました。

## コマンドラインユーティリティ
コマンドラインユーティリティはDjangoプロジェクトを実行するために必要なものです。以下の通り3種類あります。いずれも同じ役割を果たしますが、一番はじめにプロジェクトを作る際には`django-admin`を使用します。
<script src="https://gitlab.com/-/snippets/2566313.js"></script>
* `django-admin`：
 * プロジェクト作成時に使用します。
* `python3 manage.py`：
 * 最も高頻度で使用されます。
* `python3 -m django`：
 * `manage.py`に共に使用することができます。

## コマンド
ここから上記のコマンドユーティリティを使用した頻出コマンドをまとめます。
<script src="https://gitlab.com/-/snippets/2566315.js"></script>
* `$ django-admin startproject`：
 * Djangoプロジェクトを作成するためのコマンド。まさにDjangoの根幹（1）。
* `$ django-admin startapp`：
 * Djangoアプリケーションを作成するするためのコマンド。まさにDjangoの根幹（2）。
* `$ python3 manage.py collectstatic`：
 * HTMLファイル、CSSファイル、画像ファイル等のstaticファイル（静的ファイル / assets）をまとめるためのコマンド。開発環境ではDjangoが自動で管理する一方、本番環境ではこのコマンドでstaticファイルを一つのディレクトリに集めておく。`settings.py`では、STATIC_ROOT, STATIC_URL, STATICFILES_DIRS, STATICFILES_STORAGE等を別途設定する。
* `$ python3 manage.py changepassword [username]`：
 * 任意の[username]のパスワードを変更可能。
* `$ python3 manage.py createsuperuser`：
 * Djangoの管理サイトにログインし使用するための管理者ユーザーを作成するためのコマンド。ユーザー名、メールアドレス、パスワードを指定する。
* `$ python3 manage.py dumpdata`：
 * データベースの内容をバックアップ等の目的でエクスポートするためのコマンド。JSON形式、XML形式等のフォーマットを指定しアプリケーション単位、テーブル単位でエクスポート可能。
* `$ python3 manage.py help ([command name])`：
 * 困ったときはこれ。helpと入れるだけで利用可能なコマンドを出力可能。さらに、[command name]を入力すると、そのコマンドのオプション含めた使い方を教えてくれる。
* `$ python3 manage.py loaddata`：
 * dumpしたファイルをデータベースにインポートするためのコマンド。例えばJSON形式のファイルをインポートする際には、`loaddata`以降に`sample.json`という形式で指定可能。
* `$ python3 manage.py makemigrations`：
 * `models.py`で定義した内容をデータベースに反映させるための、マイグレーションファイルを作成するためのコマンド。
* `$ python3 manage.py migrate`：
 * データベースに対して、`makemigrations`で作成したマイグレーションファイルを適用するためのコマンド。
* `$ python3 manage.py runserver`：
 * 開発環境用のローカルサーバーを起動するためのコマンド。
* `$ python3 manage.py showmigrations`：
 * 作成したマイグレーションファイル一覧を表示するためのコマンド。
* `$ python3 manage.py test`：
 * 自動でテストを実行するためのコマンド。テスト内容は`startapp`実行時に自動で作成される`test.py`内に記述する。
* `$ python3 manage.py testserver`：
 * テスト用サーバーを起動するためのコマンド。

## helpを使ってできること
このようにコマンドはたーくさんあるんですが、他にもまだまだたくさんあります。実際に`help`を使ってみると、現在インストールされているライブラリに応じて、カテゴリごとに利用可能なコマンドが確認できるので見てみましょう。
<script src="https://gitlab.com/-/snippets/2566316.js"></script>
現在"django-cloudinary-storage"というパッケージが入っているので、`[cloudinary_storage]`で利用可能なコマンドが表示されていることが分かりますね。
では次に、helpの後にコマンドを追加してみます。上でも記載しましたが、`help [command name]`とすることで、各コマンドで利用可能なオプションを簡単に説明してくれます。ここでは`createsuperuser`を入力してみます。
<script src="https://gitlab.com/-/snippets/2566348.js"></script>
すると8行目以降に利用可能なオプションが表示されます。

## まとめ・参考
とりあえず"help"を使おうということだけ言っておきます。

Djangoでよく使用するコマンド

DRF環境構築時の基本的なディレクトリ構成について詳細解説しました。

## はじめに
[Django REST Framework（以降、DRF）の環境構築](/blogs/drf-setup)にてDjangoプロジェクトを作成しましたが、いきなり膨大な量のディレクトリ・ファイルができました。全ファイルを知っておかないといけないことはありませんが、「よく分からんけど動いてはる」のは気持ち悪いじゃないですか。ということでデフォルトの構成についてまとめてみました。

## ディレクトリ構成
こんな感じになっているはずです。では、「1行解説」はじめます。
 
<script src="https://gitlab.com/-/snippets/2565795.js"></script>

### ルートディレクトリおよび全体に影響するディレクトリやファイル
DjangoプロジェクトやDjangoアプリケーション以外のものをここではまとめています。
* `drf_sample/`(l.1)：
 * ルートディレクトリです。環境構築時にプロジェクト・アプリケーションを格納する箱として任意の名前を付けて用意します。
* `drf_virtual/`(l.2)：
 * 当該API専用に使用する仮想環境です。`drf_sample`作成時にデフォルトで生成されるものではありませんが、ルートディレクトリ内に作成することもできます。
* `manage.py`(l.27)：
 * Djangoプロジェクトにおいて、ローカルサーバーの起動、マイグレーションファイルの作成等、様々なコマンドを用意しているファイルです。
* `db.sqlite3`(l.28)：
 * アプリケーションに組み込まれる形で利用される簡易的なデータベースです。Djangoではデフォルトで利用可能で、設定しない限りはこのデータベースに情報が格納されます。

### Djangoプロジェクト
* `sample_project/`(l.16)：
 * `$ django-admin startproject`コマンドでDjangoプロジェクトディレクトリおよびその傘下のファイルを作成できます。自動で生成されるファイルは以下の通りです。
* `__init__.py`(l.17)：
 * このディレクトリ（`sample_project/`）がPythonのパッケージであることをPythonに認識させるためのファイルです。空のファイルで使用しません。
* `__pycache__/`(l.18)：
 * Pythonファイル実行時にコンパイルされたこのディレクトリ内のモジュールが、それぞれ`ファイル名.cpython-39.pyc`という形式でこのディレクトリ内に生成されていきます。プログラムが変更されると書き換えられるもので、文字通りキャッシュなので（消しても問題ありませんが）残しておくと実行が速くなります。
* `asgi.py`(l.23)：
 * asgiとはAsynchronous Server Gateway Interfaceの略で、Web socket等のプロトコルをサポートし、非同期通信ができるようになります。そのエンドポイントとして使用されるファイルです。
* `settings.py`(l.24)：
 * Djangoプロジェクト全体を設定するファイルです。データベース設定、認証系の設定等が可能です。
* `urls.py`(l.25)：
 * HTTPリクエストに対して、Djangoアプリケーション内のどのViewを表示するかルーティングするためのファイルです。
* `wsgi.py`(l.26)：
 * wsgiとはWeb Server Gateway Interfaceの略で、アプリケーションがWebサーバと通信するための標準のインタフェースです。そのエンドポイントとして使用されるファイルです。

### Djangoアプリケーション
* `sample_app/`(l.7)：
 * `$ django-admin startapp`コマンドでDjangoアプリケーションディレクトリおよびそれにぶら下がるファイルを作成できます。アプリケーションではデータベース定義、Viewの作成等ができます。
* `migrations/`(l.8)：
 * `$ python3 manage.py makemigrations`を実行し生成されたマイグレーションファイルが保管されるディレクトリです。
* `__init__.py`(l.10)：
 * このディレクトリ（`sample_app/`）がPythonのパッケージであることをPythonに認識させるためのファイルです。空のファイルです。
* `admin.py`(l.11)：
 * adminサイトを管理するためのファイルです。実際にデータを入力するために、`models.py`で作成したクラスをadminサイトに表示することができます。
* `apps.py`(l.12)：
 * 作成したDjangoアプリケーションの場所をDjangoプロジェクトに認識させるために設定ファイルです。※通常、`startapp`時に自動で生成されるため設定は不要です。
* `models.py`(l.13)：
 * データベースを定義するためのファイルです。データベースフィールドをまとめたモデルを作成することで、データベースにどのような情報をどのような形式で書き込むことができるか定義します。
* `tests.py`(l.14)：
 * Djangoアプリケーションにおいて、テストを実行する際にコードを記述するファイルです。
* `views.py`(l.15)：
 * HTTPリクエストに対し、表示する情報を記述するためのファイルです。

## まとめ・参考
ここまで、前記事で環境構築時に自動（+一部手動）で生成されたディレクトリおよびファイルについて、それぞれの役割を解説してきました。DRFの場合、この他にもSerializerというものが必要になるのですが、それは次の記事でまとめます。

Django REST Frameworkのディレクトリ構成

Django REST Frameworkを始める際の環境構築についてまとめました。

## はじめに
Web開発をする際のフレームワークは数多ありますが、今回はPythonのWebフレームワークであるDjangoをバックエンドに使用した方法についてまとめました。なお、本記事はDjango初学者向けとなります。

## 開発環境
* macOS 10.15 Catalina
* Python 3.9.6
* Django 4.0.2
* Django REST Framework 3.13.1
* Visual Studio Code

## 環境構築
このタイミングで使用するツールはターミナルだけで、作業自体は大きく4ステップで完了するので難しくはないと思いますが、ここからは「1行解説」やっていきます。
### ディレクトリ作成（１／４）
<script src="https://gitlab.com/-/snippets/2565791.js"></script>
1. (l.1)まずはターミナルを開いてデスクトップに移動します。今回はデスクトップにプロジェクトを作成していきます。
2. (l.2)プロジェクト全体を入れる箱として、`drf_sample`を作成します。名前は何でも大丈夫です。
3. (l.3)作成した`drf_sample`に移動します。続いて仮想環境を作成しましょう。

### 仮想環境作成（２／４）
<script src="https://gitlab.com/-/snippets/2565792.js"></script>
1. (l.1~2)仮想環境を作成する前にPythonのバージョンを確認します。2行目の通りPython 3.9.6と出てきたので、パスが通っていることが確認できましたね。※Pythonが使える環境が最低限整っていることを意味します。
2. (l.3)それでは仮想環境を作成します。今回はPythonに標準で備わっている`virtualenv`を使用して、`drf_virtual`という名前の仮想環境を作成します。仮想環境の名前は何でも大丈夫です。
3. (l.4~5)作成した仮想環境に切り替えます。5行目の通り先頭に`(drf_virtual)`が表示されていたら、仮想環境に切り替わっている状態となります。今後API作成に必要なライブラリ・パッケージはこの仮想環境内にインストールしていきます。

### ライブラリ・パッケージのインストール（３／４）
<script src="https://gitlab.com/-/snippets/2565793.js"></script>
1. (l.1~5)`Django`, `django-cors-headers`, `djangorestframework`, `djangorestframework-simplejwt`, `djoser`をそれぞれ仮想環境にインストールしていきます。ここで`===x.x.x`と、バージョン指定をしてインストールしていますが、バージョン指定しなくてもインストールは可能です。ただし、互換性を考慮しないと正しいコードを書いても実行されない可能性があるので注意してください。
※互換性については、各ライブラリ・パッケージの概要、インストール・使用方法が併記された[Python Package Index（PyPI）](https://pypi.org/)で確認してみてください。
2. (l.6)インストールが完了したら`pip freeze`とすることで、`drf_virtual`内でインストール済みのライブラリ・パッケージを確認することができます。なお、`pip freeze > requirements.txt`とすると、インストール済みのライブラリ・パッケージが書き出されたファイルがルートディレクトリ直下に生成されます。

なお、以下はDjangoを除く各ライブラリ・パッケージについて一言解説です。
* [django-cors-headers](https://pypi.org/project/django-cors-headers/)：フロントエンドとのWebAPI連携を可能にするためのパッケージ。
* [djangorestframework](https://pypi.org/project/djangorestframework/)：今回の開発の肝となるライブラリです。Djangoを利用したWebAPIの開発ができる。DRFとも略される。
* [djangorestframework-simplejwt](https://pypi.org/project/djangorestframework-simplejwt/)：DRFでJWT認証を可能にするプラグインのパッケージ。
* [djoser](https://pypi.org/project/djoser/)：DRFにおいて認証周りの機能をサポートするライブラリ。


### Djangoプロジェクト作成（４／４）
<script src="https://gitlab.com/-/snippets/2565794.js"></script>
1. (l.1)最後のステップになります。まずは`sample_project`という名前のDjangoプロジェクトを作成します。プロジェクトとは今回のAPIにおける大枠となる設定等をまとめたものです。
2. (l.2)続いて`sample_app`という名前のDjangoアプリケーションを作成します。ここでいうアプリケーションとは、データベース定義や実際のAPI作成等をするディレクトリです。
3. (l.3)プロジェクトとアプリケーションを作成したので、ベースとなる構成は完成しました。必要なファイルも勝手に生成されるので楽ですね。それでは、一旦ローカルサーバーを立ち上げてみましょう。
4. (l.4~7)ローカルサーバーを立ち上げると、4行目〜7行目の通り情報が出力されます。`http://127.0.0.1:8000/`がローカルサーバーのURLです。下のような画面がブラウザで表示されれば、OKです。`CONTROL-C`でサーバーを切ることができます。ちなみに、画面上ではバージョン情報と時間はズレまくっていますが特に影響ないので放置しておきます。
<img src="https://res.cloudinary.com/hvz4uox2m/image/upload/v1/media/img/drf-setup1_cbvgnx" />

* また、現時点で、`drf_sample`のディレクトリは以下の通りになっているはずです。全体の構成および各ディレクトリ・ファイルの役割については[Django REST Frameworkのディレクトリ構成](/articles/drf-directory)の記事で説明しています。

<script src="https://gitlab.com/-/snippets/2565795.js"></script>

## まとめ・参考
お気づきだと思いますが、Pythonが使える環境であれば、DRFの環境設定は難なくできてしまいます。次の記事から実際にコードを書いていくフェーズに入ります。

### 参考
* [PyPi](https://pypi.org/)

Django REST Frameworkの環境構築

Markdownの書き方と良い点悪い点についてまとめました。

## はじめに
MarkdownはQiitaやTumblr等様々なメディアにおいて標準的な記述スタイルとして使われていますが、慣れれば使いやすい一方使わないとすぐ忘れてしまうのが玉に瑕。というわけでチートシート的なものを作りましてん。

## What is Markdown?
### そもそも
[Wikipedia](https://ja.wikipedia.org/wiki/Markdown)によると、HTMLをはじめとしたマークアップ言語を簡素化したもので、誰でも簡単にウェブ上で文章を書けるようにした記法ということで覚えておけば大丈夫かと思います。文章を書く際に、いちいち<>で括るの面倒ですものね。

## Pros & Cons
ここで、良い点・悪い点をまとめてみます。このセクションは飛ばしてもらっても全く問題ありません。
### Pros
1. HTMLタグ使用可能：
 * Markdown記法をしっかりと覚えていなくても、一応HTMLが使えます。~一番目に書く事ではない。~

2. 記述スピードの高速化：
 * HTMLタグは基本<>で括ります。あれかなり面倒ですよね。Markdownであれば普段からキーボード操作で使用する()や*等の記号を使って文章を作成するため、比較的直感的にかつ高速に記述することができます。

3. スタイルを引き継がない：
 * 他サイトからコピー&ペーストをしても、スタイルが引き継がれないので、楽にコピー＆ペーストができ文章作成の効率化につながります。

### Cons
1. タイポが増える場合がある：
 * 若干個人的意見が混じりますが、Markdown記法では記号を頻繁に使用しますが、HTMLと違ってタグを使用しない分、タイポに気づくのに時間がかかりがちです。ブラウザの「検証」で確認すればMarkdownもHTMLに変換されるのでタイポに早く気づけると思います。

2. 全てのHTMLタグをMarkdownに置き換えられるわけではない：
 * Prosの1つ目の裏返しですが、覚えたは良いが全要素を置き換えられるわけではないので、HTMLとMarkdownが混在してしまいかえって使いづらいと感じることもあるかもしれませんね。

## Markdownの代表的なもの（対応表）
お待たせしましたチートシートです。
下表のものはよく使うので覚えておくと楽だと思います。ちなみにこのチートシート自体もMarkdownで記述しています。
| 項目 | HTML | Markdown |
| :-- | :-- | :-- |
| 見出し | &lt;h1&gt;見出し1&lt;/h1&gt; &lt;h2&gt;見出し2&lt;/h2&gt; &lt;h3&gt;見出し3&lt;/h3&gt; &lt;h4&gt;見出し4&lt;/h4&gt; &lt;h5&gt;見出し5&lt;/h5&gt; &lt;h6&gt;見出し6&lt;/h6&gt; | # 見出し1 ## 見出し2 ### 見出し3 #### 見出し4 ##### 見出し5 ###### 見出し6 |
| 太文字 | &lt;strong&gt;太文字&lt;/strong&gt; | \** 太文字 ** |
| イタリック | &lt;em&gt;イタリック&lt;/em&gt; | \*イタリック* |
| 太文字+イタリック | &lt;strong&gt;&lt;em&gt;太文字イタリック&lt;/em&gt;&lt;/strong&gt; | \** \*太文字イタリック*** |
| 引用 | &lt;blockquote&gt;引用&lt;/blockquote&gt; | \> 引用 |
| 打ち消し・取り消し | &lt;del&gt;打ち消し・取り消し&lt;/del&gt; &lt;s&gt;打ち消し・取り消し&lt;/s&gt; | \~打ち消し・取り消し~ |
| エスケープ | &lt;要素&gt;文字列&lt;/要素&gt; | ＼要素 |
| コード | &lt;code&gt;console.log(2022)&lt;/code&gt; | \`console.log(2022)` |
| 順序のあるリスト | &lt;ol&gt; &lt;li&gt; ひ &lt;/li&gt; &lt;li&gt; ふ&lt;/li&gt; &lt;li&gt; み&lt;/li&gt; &lt;li&gt; ん&lt;/li&gt; &lt;/ol &gt; | 1. ひ 2. ふ 3. み 4. ん |
| 順序のないリスト | &lt;ul&gt; &lt;li&gt; ひ &lt;/li&gt; &lt;li&gt; ふ&lt;/li&gt; &lt;li&gt; み&lt;/li&gt; &lt;li&gt; ん&lt;/li&gt; &lt;/ul &gt; | \* ひ \* ふ \* み \* ん |
| リンク | &lt;a href="http://www.yahoo.co.jp/"&gt;Yahoo&lt;/a&gt; | \[Yahoo](http://www.yahoo.co.jp/) |
| 下線、水平線 | &lt;hr&gt; | \--- \___ \*** |

## まとめ・参考
他にもまだまだMarkdown形式で表現できるものはありますが、詳しくは以下ガイド参考にしてみてください。

### 参考
* [Wikipedia - Markdown](https://ja.wikipedia.org/wiki/Markdown)
* [Markdown Guide](https://www.markdownguide.org/about/)