★最初ローカルで記録していた分を転記
投稿者: urumos
作成日: 2022年6月18日14:36
更新日: 2022年7月7日23:56
カテゴリ: Django
タグ:
◆はじめの一歩！
作成日: 2021年1月19日23:44
ついに個人開発開始！
まあ教科書（Djangoビギナーズブック）の7章をそのままやってるだけだけど(笑)
これから色々カスタマイズしていこーー！
取り敢えずHerokuにあげるとこまでやりたいなー
AWSの教科書も買ってあるから、最終的には個人でAWS契約してそこにアップしよう。
楽しみになってきた！
◆GitHubはじめました
作成日: 2021年1月28日23:44
Gitコマンドに翻弄された。
ひっかかったポイント
①GitHubでリモートリポジトリ作成時に「README.mdを作る」に☑してしまった
②デフォルトのメインブランチの名前がmasterではなくmainになっていた
①について
Pushした時に下記のエラーになった。
Updates were rejected because the remote contains work that you do not have locally.
GitHub側で作ったREADME.mdがローカルリポジトリに入ってないというエラー。
リモートリポジトリを一旦削除して、README.mdなしで再作成したら解決
②について
git push origin master で実行したら、mainではなくmasterという別ブランチが出来てしまった。
こちらも上記のリモートリポジトリ一旦削除でリセット
再作成するときのヘルプに下記のメッセージを発見
…or push an existing repository from the command line
git remote add origin https://github.com/Hase777/sugu.sakujo.git
git branch -M main
git push -u origin main
この通りにやったらできた。
以下解説
…or push an existing repository from the command line
既存のリポジトリをコマンドラインからpushする場合
git remote add origin https://github.com/Hase777/sugu.sakujo.git
URLの登録
git branch -M main
現在（カレントディレクトリ）のブランチ名をmainに変更
（これをする前にgit branch コマンドで元々のローカルリポジトリの名前を確認したら
やはり「master」になっていた。それをリモートリポジトリと同じ名前にする必要があったみたい）
git push -u origin main
今回対象とするブランチ（main）を上流ブランチとして設定する（一度指定すると次回以降も対象となる）
正直、上流ブランチのことはまだよく理解してないけど、とりあえず初めてコードをGitHubにあげられたからよしとする笑
◆勉強再開＆【毎日改善チャレンジ】開始宣言！
作成日: 2021年8月9日11:23
さぼりすぎてしまった。。
が、しかし、いよいよ仕事でAWSデプロイ周りの知識を勉強する必要性が出てきたため、
再度この日記アプリの開発を通して勉強していく。
ちなみにこの文章はタッチタイピングで打っており、
めちゃくちゃ遅い＆ストレスがやばい。
しかし両学長もタッチタイピング大事と言っていたし、
慣れれば早くなると信じて、最初は遅くても、どんなにストレスフルでも、
練習として正しい指のポジションで打つようにする。
これは仕事の時もやる。
多分ギターの難しいリフと一緒で、
最初はゆっくりでもいいので正確にやるのが大事。
スピードは後からついてくる。
予測変換機能もなるべく使わないようにしよう。
あと、キーボードはなるべく見ない！
ーーー
また、今日からこの日記アプリの【毎日改善チャレンジ】を始める
どんなに小さいことでも良いので、毎日１か所以上アプリを改善し、GitにPushする。
【目的】
・勉強したHTML、CSS、JSを実際に使ってみる
・Djangoの知識強化
・Gitに慣れる
あとAWSへのデプロイも並行して勉強する。
（まずは第一歩としてHerokuにデプロイするのも要検討）
◆【1日目】改行の適用【毎日改善チャレンジ】
作成日: 2021年8月9日12:17
【改善の詳細と着想の背景】
前回の日記を書いた際、段落のように改行を入れたにも関わらず、
2行以上の改行は適用されていなかった。
改行があった方が見やすいので、今回はそこを改善する。
【調査と実装】
「Django 改行 2行」でぐぐる
下記の記事がヒット
https://dreamerdream.hateblo.jp/entry/2018/10/14/000000
>>なんと、テンプレートの項目に”| linebreaksbr”と書いてあげるだけ！
>>{{ set_text | linebreaksbr }}
>>これで勝手に改行コードが置き換えられます。ブラウザで見ると
とのこと
DjangoMyBlog/blog/templates/blog/post_detail.html
の下記を修正
修正前
{{ post.text | linebreaks | urlize}}
修正後
{{ post.text | linebreaksbr | urlize}}
これだけで2行以上の改行も適用された！
ちょっと簡単すぎたけど初日だからいいか笑
これをgithubのリモートリポジトリにpushする。
＜push手順のおさらい＞
カレントディレクトリがPushしたいDjangoアプリプロジェクトになっていることを確認し、、
①git add . （フォルダ内の全てのファイルをステージング）
↓
②git commit -m "I modified linebreak" （全てのファイルをローカルリポジトリにコミット。コメント付き）
↓
③git push origin main （リモートリポジトリのmainブランチにプッシュ）
※ちなみにgit push origin HEADと打ってカレントブランチをリモートにプッシュでもOK
詳細結果が表示されれば成功
実際にやってみる
①git add . と入力
なにも反応なし
git status と入力すると下記の通りちゃんとステージングされてる
On branch main
Your branch is up to date with 'origin/main'.
Changes to be committed:
(use "git restore --staged <file>..." to unstage)
modified: blog/templates/blog/base.html
modified: blog/templates/blog/post_detail.html
modified: db.sqlite3
②git commit -m "I modified linebreak" と入力
[main 4fd4534] I modified linebreak
3 files changed, 4 insertions(+), 4 deletions(-)
と表示された
③git push origin main と入力
Enumerating objects: 15, done.
Counting objects: 100% (15/15), done.
Delta compression using up to 8 threads
Compressing objects: 100% (7/7), done.
Writing objects: 100% (8/8), 3.86 KiB | 1.29 MiB/s, done.
Total 8 (delta 5), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (5/5), completed with 5 local objects.
To https://github.com/Hase777/MyBlog-Django.git
7722986..4fd4534 main -> main
と表示され、成功したっぽい！
よしよし。
この作業は毎回やることになるだろうから覚えておこう。
今後ブランチ分けとか、コンフリクト解消とかもやっていきたい。
【その他】
タイトルがダサかったので変更した。
◆【2日目】カテゴリーの文字色が白【毎日改善チャレンジ】
作成日: 2021年8月10日23:12
【改善の詳細と着想の背景】
記事一覧画面のサイドバーのカテゴリーが見えないため修正。
【調査と実装】
恐らくポカミスと思われるのため、とにかく該当箇所を探す。
『Djangoビギナーズブック』も見返しながら、、探す探す、、
2時間ほど経過し、、
DjangoMyBlog/blog/templates/blog/category_and_tag_list.html
で下記を発見
<p class="menu-label">カテゴリ一覧</p>
<ul class="menu-list">
{%for category in category_list %}
<li><a href ="{% url 'blog:post_category_list' category.pk %}">{{ categroy }}</a></li>
{% endfor %}
</ul>
<p class="menu-label">タグ一覧</p>
<ul class="menu-list">
{%for tag in tag_list %}
<li><a href ="{% url 'blog:post_tag_list' tag.pk %}">{{ tag }}</a></li>
{% endfor %}
</ul>
「categroy 」！！！
カテグロイ！！！！
ここかーーーー！と思い、categoryに変更したら、無事表示されましたとさ。
疲れた。。
【その他】
スペルミス１つでこうなるのだからプログラミングってほんと繊細だ。
この部分はFor文でcategoryモデルの __str__メソッド を呼び出している部分で、
上記部分は「カテグロイ」になっていたせいで、リンクとボタンは表示されるけど、
ボタン名が表示されないということだった。
今回本を見返して思ったけど、かなり色々と忘れてるな。。
やはり学習期間に間が空いてしまうと復習からしなきゃいけなくなって効率が悪い。
KENTAさんの言う通りだ。
だからこそ毎日改善チャレンジは頑張って続けよう。
もう23時だ。。あー眠い。
同じくKENTAレッスンで「とにかく早起き」も実行しよう。
理想としては毎日仕事が始まる前に１改善終わらせたい。
あとCSSはBulmaが使われているみたいだけど、
CSSの勉強のためには自分で０からCSSをコーディングした方が良いのだろうか。。
次回以降の改善アイデアの候補だ。
もう瞼が限界なので
Githubにpushして
シャワーして寝る。
◆【3日目】ブログのロゴ付け【毎日改善チャレンジ】
作成日: 2021年8月11日23:37
【改善の詳細と着想の背景】
今日はHTMLとCSSの総復習をしたので、CSSを変更しようと思ったが、
Bulmaなのでちょっと本腰いれないと無理と判断し、
今日はHTMLをやる。
ブログのロゴを右上に追加してみる。
【調査と実装】
画像はとりあえず最近つかっている白くまちゃんにしよう
コードは今日復習したばっかだから簡単なのだ。
これだ。
<img src="ここにURLを入れる">
あれ、画像ってどうするんだっけ。。笑
教科書とノート読み返そう。
まず画像処理をするためpillowというライブラリが必要なようで、
pip install pillowでインストールした。
ちなみに今のライブラリ状況は下記
Package Version
---------- -------
asgiref 3.3.1
Django 3.1.5
Pillow 8.3.1
pip 21.2.3
pytz 2020.5
setuptools 49.2.1
sqlparse 0.4.1
ーーー
次に設定フォルダ（自分の場合はconfig）のsetting.pyに
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
と追記する。
エラー発生
NameError: name 'os' is not defined
setting.pyに下記を追加
import os
エラー解消。
次に同じく設定フォルダのurls.pyにも下記を追記
from django.conf import settings
from django.conf.urls.static import static
～略～
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
上記の設定をしないとメディアはプロジェクト直下フォルダに保存されてしまうため、
setting.py でMEDIA_ROOT = os.path.join(BASE_DIR,'media')などとすることでメディアの保存先を指定できる。
ということでプロジェクト直下フォルダに新しく「media」フォルダを追加し、
そこに白くまちゃん画像を保存する。
これで準備ＯＫなはず！
base.htmlのbodyの適当な部分に
<img src="ここにURLを入れる">
を書く。
あれ、ＵＲＬってどう書けばいいんだ。。？笑
教科書の例を見ても、動画一覧の話なので、modelとviewを使っている。。
。。。ん？
再度教科書を見てみる。
次の章が「静的ファイル」というタイトルになっている
こっちじゃね？笑
読んでみる
静的に不配信されるファイル。中身がいつも同じ、変更されないデータのこと。
具体的にはCSSファイル、jsファイル、画像ファイルなど。
こっちだ。
動画のほうと被っているコードもあるかもしれないので、上記の変更はとりあえずそのままで進めよう。
まずアプリディレクトリに「static」というフォルダを作る。
そしてその中に「blog」というフォルダを作る（テンプレートファイルのフォルダ構造と一緒）
CSSのコード例だけど、htmlファイルをこうしているのがある
{% load static%}
～略～
<link rel="stylesheet" href="{ % static 'videos/style.css' % }">
読めたぜ。
ということは
<img src="{ % static 'blog/whitebear.jpg.' % }">
こうやろ！！
。。なんか表示されたけど、エラーになっているｗ
色々試したけどだめだ～～～～
もう眠いから明日やろ。。
【翌朝追記】
「django 静的ファイル 配置」でぐぐり、
下記の記事を発見
https://qiita.com/saira/items/a1c565c4a2eace268a07
これを参考に
setting.pyの一番下に
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static")
]
を追加
結果、、、
白くまちゃんが表示された！！！！
いえええいいい
よくよく教科書も読み返したら、普通に書いてあった
「デフォルトではアプリ内のstaticディレクトリが探索されます。
プロジェクト直下といった、別の場所を指定することもできます。
（上記のコード）
これは、プロジェクト直下のstaticディレクトリも探索対象にする設定です。
こうした場合、まずプロジェクト直下のstaticディレクトリが探索され、
その後、各アプリのstaticディレクトリが探索されます。
この挙動はテンプレートファイルの探索と一緒です。」
要するに上記を書かないとプロジェクト直下staticディレクトリが探索対象になってなかったから画像が表示されなかったみたい。
解決きもちいい。
でもCSS適用されてなく、ロゴっぽくないので、今日はBulmaを外して自作CSSの作成開始しようかな
◆【4日目】.gitignoreの設定【毎日改善チャレンジ】
作成日: 2021年8月12日18:03
【改善の詳細と着想の背景】
今日ひろむとランチをしたが、Githubの共同作業の練習として
このDjango日記アプリを共同開発することになった。
そこで彼をGithubのコラボレーターに招待したが、
彼のローカル環境でサイトを立ち上げたところ、
Gitにデータベースもアップロードされたせいで、
自分の過去の投稿記事が見れてしまった（はずい笑）
ということで彼から教えてもらったgit ignore機能を使ってみる。
（これは改善なのか、、というツッコミは無視でいく笑）
【調査と実装】
データベースの名前はdb.sqlite3
サクラエディタで新規ファイルをつくり、
一行目に「db.sqlite3」と書き、「.gitignore」というファイル名で保存。
それをプロジェクト直下ディレクトリに置き、addしてcommitしてpush。
しかしgithubからは消えなかった。。
ググったところキャッシュが原因とのことで、
コマンドラインで
git rm -r --cached db.sqlite3
を実行し、再度commit,pushしたら無事Githubから消えた。
これで日記の内容はバレない笑
今後の共同作業の流れとして、
自分が改善タスクをリストアップし、彼に依頼をする流れにする。
楽しくなってきたぜ。
ということでたまきと酒や
◆【5日目】ヘッダーの色変更【毎日改善チャレンジ】
作成日: 2021年8月13日22:07
【改善の詳細と着想の背景】
昨日飲みすぎて二日酔いがやばい。
よって今日は簡単なやつにする。
ヘッダーの色を変えてみる。
【調査と実装】
「Bulma 設定」でぐぐる
https://qiita.com/ochiochi/items/de1afd2d3fc8f6d3ea55
使用できる色の一覧は次の通りです。
is-primary
is-info
is-success
is-warning
is-danger
is-white
is-black
とのこと。
base.htmlにあったis-primaryってこれだったのか。
これをis-infoに変更。
青色になった。
おわり笑
◆【6日目】今後の方向性決め【毎日改善チャレンジ】
作成日: 2021年8月14日19:04
【改善の詳細と着想の背景】
まだ若干本調子じゃないんだ。。
水たばこはもう一生吸わんぞ。。。
せっかくのお休みだけど、夕方から勉強開始。
Bulmaのさらなる改修をしようと思い
別の記事をあさる。
よさげな記事を発見
『CSSフレームワークのススメ - BULMAの導入と覚え書き』
https://qiita.com/belq/items/10ec41f656e47ee2b540
これを読んで、CSSフレームワークの全体像を知る
一番有名なのがBootstrap。
これは自社アプリにも使われている。
よく分からないけどどうやらjQueryも関連しているみたい。
他にも色々あるみたい。
めんどいのでコピペする。
ーーー
・Bootstrap
最も有名な？FW。ここまでCSSフレームワークと書いてきましたが、Webアプリケーションフレームワークとも呼ばれ、公式には「front-end component library」と紹介されています。
jQuery及び独自のjsが組み込み済み。MITライセンス。
・Foundation
Bootstrapに次いで有名とのこと。シリコンバレーにあるZURBという企業が管理している。昔の記事をググると「Bootstrapより柔軟性がある」などと書かれていました。今はまた違うかもしれませんが…。
独自のjsが組み込み済み。MITライセンス。
・Materialize
Googleが提唱した「マテリアルデザイン」を志向したFW。アメリカのカーネギーメロン大学の学生チームによって管理されているようです。
独自のjsが組み込み済み。MITライセンス。
・Semantic UI
HTTP、HTMLの設計者ティム・バーナーズ＝リーが提唱した「セマンティック・ウェブ」を志向したFW。
独自のjsが組み込み済み。MITライセンス。
・Pure.CSS
アメリカのYahoo!が提供する、シンプルさを志向したFW。
組み込みのJavaScriptは無し。Yahoo BSD License。
・BULMA
CSSのみでのフレキシブルデザイン(Flexbox)に対応したFW。
組み込みのJavaScript無し。MITライセンス。
ーーーー
Bulmaは簡単シンプルという感じか。
ここに来て、方向性をどうするか考える。
自社アプリへのエンジニアとしての参画をメインの目的とするのであれば、
同じスキルセットで練習したほうが良いのだろう。
改めて自社アプリのGithubを見てみる.
Python
35.8%
HTML
31.4%
CSS
17.3%
JavaScript
12.3%
SCSS
3.2%
・・ふむふむ・・SCSSってなに？
ということでぐぐる。
CSSの進化版みたいなものらしい。
コンパイルが必要とか書いてあってめんどくさそう。。
いったん逃げて簡単なBulmaで慣れてから戻ってくるか。。
頑張って飛び込むか。。。
でもやはり今勉強している一番の目的は自社アプリのプロジェクトへの参画（を通して実務経験を踏み、何かあればいつでもエンジニアとして他社に転職活動できるように）することだから、、
ここは頑張ろう。
ということで今後の方向性として、自社アプリで使っている技術を使って
アプリを改造していくようとしよう。
でもSCSSはややこしそうなので、まずはBootstrapから。
早速「Bootstrap 使い方」でぐぐる。
テックアカデミーの記事
https://techacademy.jp/magazine/6270
「BootstrapはTwitter社が開発したCSSの「フレームワーク」です。通常CSSを書く場合、全てのスタイルを自分で作っていく必要がありますが、このフレームワークにはよく使われるスタイルがあらかじめ定義してあるので、ルールに沿って利用するだけで整ったデザインのページを作成できます。」
へーTwitterが作ってるんか。知らんかった。
「Bootstrapを使うメリットとして、レスポンシブWebデザインに対応しているという点があります。通常、スマートフォンやタブレットなど個別に対応するスタイルを作っていると大変手間がかかります。BootstrapはCSS3のメディアクエリを使用しているので、ブラウザの横幅サイズを判断基準として、レイアウトデザインを柔軟に調整することが可能です。」
ほえー。なるほど。じゃあスマホ用とかiPad用とかを場合分けして作らなくてもよいのね。便利じゃない。
【調査と実装】
【翌朝追記】
寝落ちしてしまった笑
改善とは言えないが、方向性を決めたというのは一歩前進ということにする。
今日も楽しくやろう！
◆【7日目】具体的な技術セットの確認【毎日改善チャレンジ】
作成日: 2021年8月15日10:44
【改善の詳細と着想の背景】
昨日、このブログの改造の方向性として、
自社アプリで使われている技術セットで改造していく方向になった。
使われている技術を再度まとめてみる。
ーーーー
★サーバー周り
AWS
EC2（ウェブサーバー）
S3（画像など用のストレージ）
RDS（データベース）
Route 53 （DNSサーバー）
Simple Email Service（システムからの自動メール送信）
Simple Queue Service（キューの管理？参照：https://qiita.com/UpAllNight/items/7c5022661a1eadc8a88a）
WorkMail（noreplyメールやり取り用）
★外部API
Twilio（SMSの送信）
IP GEO Location（ユーザーの現在地を取得してデフォルト言語を決めるため）
★コード
Django
Python
HTML
CSS
SCSS
Bootstrap
JavaScript
jQuery
ーーーーー
多分だけどこんな感じかな。
AWSは紫の本で進めていくとして、ブログアプリ毎日改善チャレンジは何からやっていこうか。
今のブログアプリの技術構成はこんな感じ。
ーーーーー
★サーバー周り
なんもなし（ローカル環境）
★外部API
なんもなし
★コード
Django
Python
HTML
CSS
Bulma
ーーーーー
やっぱりまずはBulmaを外してBootstrapを導入するところから始めようかね。
【調査と実装】
【翌朝追記】
酒を飲んで続き出来なかった。
とりあえずBootstrap導入から開始することは決まった
◆【8日目】Bootstrapの導入【毎日改善チャレンジ】
作成日: 2021年8月16日23:20
【改善の詳細と着想の背景】
最近ちょっとさぼりすぎや。
改善とは言えないリサーチだけで終わることが多い。
しかし、毎日プログラミングに触れているという大義は果たしているので、
自分を責め過ぎず頑張る。笑
ということでBootstrapの導入、やってみよう！
【調査と実装】
まずはBulmaのコメントアウト。
見たところ、base.htmlにしか書かれていないっぽいので、下記部分をコメントアウト。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
すると当然だけど、ブログがとってもシンプルな見た目になった。
これをBootstrapでいけてるサイトに仕上げていく。
「Bootstrap 使い方」などでぐぐると色々なサイトが出てくる。
Bootstrapにも色々なバージョンがあるようで、自社アプリのBootstrapのバージョンを確認する。
Githubのリポジトリ内で特定のコードの検索方法が分からなかったのでぐぐると、
ヘッダー左上の検索窓で検索したいコードを入力し、候補として出てきた選択肢で
右側に「in this repository」と書かれた部分をクリックすると、
現在表示しているリポジトリ内で検索ができるよう。
早速やってみたが、no matchとのこと。
おかしいなと思い、自分のリポジトリで適当なワードでやってみたら検索できた。
恐らく自社アプリのリポジトリでは権限付与されてないのかな。
いつかPGに聞いてみよ。
しょうがないので自力で探す。
自社アプリでは教科書のように機能ごとにアプリを分けず、
何故か１つのアプリに全てをぶちこんでいると聞いていたので、
そこのテンプレートファイルbase.htmlを見る。
参照を見るとCSSはstaticディレクトリに入ってそうな雰囲気。
この前白くまちゃん画像を追加するときに見た書き方だ。
そこで
XXX/static/lesson/css
を見ると、多くのファイルが並んでいた
style.css
が怪しいと思い、見てみると、18693行にも及ぶ大ファイルだった。
これがPGがいってためちゃ長いファイルかなーと思いつつ、
ここのトップにバージョンの記載があった。
/*!
* * Bootstrap v4.3.1 (https://getbootstrap.com/)
* * Copyright 2011-2019 The Bootstrap Authors
* * Copyright 2011-2019 Twitter, Inc.
* * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* */
4.3.1バージョンね。OK。
導入方法を調べる。
ダウンロード方式とCDN方式があるようだ
自社アプリではダウンロードして、かつカスタマイズしているようだから、
ダウンロード方式にしよう。
えーっと、、、コンパイル、、、Rubyが必要、、、んん？？？
記事によって書いてあることが違ってよくわからん。
めんどそうなので、取り敢えず簡単そうなCDNでやってみる。
コード自体は変わらないだろうから、後からダウンロード方式に切り替えもできるだろう。
参照公式リンク
https://getbootstrap.jp/docs/5.0/getting-started/download/#jsdelivr-%E7%B5%8C%E7%94%B1%E3%81%AE-cdn
ここの「jsDelivr 経由の CDN」をそのままコピー。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
base.htmlの<head>内にぶちこむ。保存。
今はBulmaのプロパティの書き方がそのまま残っている状態。
サイトを表示させるとどんな感じになるのか？
見てみるとちょっと変わった笑
同じ書き方のプロパティがあったりするんだろう。
これを１つ１つ直していこう。
今日はとりあえず眠いのでとりあえず終わり！
過去2日間くらいGitにPushしてなかったからやろう。
（改善アイデア.textもフォルダに含めたから、ひろむに見てもらおう。）
今回のBootstrap導入にあたって、jQueryのこととか、Ajaxのこととかも調べたぜ。
徐々に知識が関連付きながら重なってきて面白い。
◆【9日目】Bootstrapの導入②【毎日改善チャレンジ】
作成日: 2021年8月17日22:40
【改善の詳細と着想の背景】
昨日はBootstrapの調査とCDNでの導入まで終わったので、
今日は実際にサイトの見た目を整えていく！
【調査と実装】
まずは基本的な使い方を調べようと思い、
「Bootstrap 使い方」でヒットしたサイトをさーっとみていく。
https://skillhub.jp/courses/168/lessons/915
このスキルハブというサイトが分かりやすかった。
調べていくうちにBootstrapの公式サイトにサンプルがあるのに気づく。
見てみると「ブログ」がある。
参考に（これをそのままコピペしたら楽なんじゃ。。？）してみようと思い見てみる。
しかしコードをコピペできるのではなく、単にサイトが表示されるだけだった。
おしゃれ。
どうすればコードをぱくれるかと考え、開発者ツール（F12）かと思い、開く。
見えたぜ。
Ctrl＋AやShiftなどで一括コピーしようとしてもできなかったため
「Chrome 開発者ツール HTML コード 一括コピー」でぐぐると下記がヒット
https://blog.cybercube.co.jp/chrome-element-copy
やはり大体ぐぐれば出てくる素敵な世界。
これによると上位要素をコピーすれば下位要素も一緒にコピーされるとのこと。
実際<body>部分をクリックし、コピー＆ペーストすると無事コピーできた。
あとはこれを調整していく。
が、何が何だかさっぱりわからないので、さっきのサイトで基礎学習
グリッドシステム、ブレイクポイント、container、row、colなど
基本を学習し、適用する。
昨日よりはましな見た目になった笑
まあこれからカッコよくしていこう笑
別件で、昨日pushした改善アイデアをひろむが見てくれたようで、
早速タイムゾーン変更をやってくれた！
そして人生初のPull Requestを受ける笑
なんか嬉しい！笑
今日はそちらの対応できなかったから、明日margeのやり方を復習してmergeしてみよう。
同時にやってたからもしかしたらコンフリクトが起きてるかもな。
それも良い経験になるだろう。
ひろむの協力は非常にありがたい。
恩返しできるように俺も頑張る！
日々成長していってるのが楽しいぞ～
◆【10日目】Bootstrapの導入③【毎日改善チャレンジ】
作成日: 2021年8月18日23:10
【改善の詳細と着想の背景】
今日は株式投資と証券口座の調査に時間を取られてしまった！
ということで今日は軽めに。
昨日に引き続きBootstrapのでサイトの見た目を整えていく！
今日は記事一覧の部分を修正する。
【調査と実装】
今まではずっとbase.htmlを修正してきたけど、
今日はpost_list.htmlを修正することになる。
BootstrapのComponentからCardというクラスを使ってみよう。
記事の表示はFor文になっているため、
その下にの部分を
<div class="card"> ～ </div>で囲んだらカードになった。
さらに
<div class="card-header"> ～ </div>で記事タイトル部分を囲い
<div class="card"> ～ </div>で作成日などの部分を囲い、
ヘッダー部分は色を変えてみた。
そして記事タイトルはでかすぎた（h1になっていた）のでh5に変更した。
これでちょっと落ち着いた見た目になった。
けど色の組み合わせとか幅がダサいな笑
けど今日は遅いのでこれでおしまい！
今日はAWS紫本とひろむのプルリク処理できなくて無念。明日絶対やる！
◆【11日目】Gitのpushできない問題【毎日改善チャレンジ】
作成日: 2021年8月19日23:40
【改善の詳細と着想の背景】
今日は昨日やろうと思ってたGitのpushできない問題を解決しよう。
一昨日、ひろむにコード修正をしてもらったが、
それの影響なのか、一昨日自分が編集したコードをリモリポにpushしようとしたら下記のエラーが出た。
git add のところからコピペする。
(MyBogEnv) PS C:\Dev\DjangoMyBlog> git add .
(MyBogEnv) PS C:\Dev\DjangoMyBlog> git status
On branch main
Your branch is up to date with 'origin/main'.
Changes to be committed:
(use "git restore --staged <file>..." to unstage)
modified: blog/templates/blog/base.html
modified: "\346\224\271\345\226\204\343\202\242\343\202\244\343\203\207\343\202\242.txt"
(MyBogEnv) PS C:\Dev\DjangoMyBlog> git commit -m "Botstrap導入②（記事一覧画面の改善）" [main 3444716] Bootstrap導入②（記事一覧画面の改善）
2 files changed, 61 insertions(+), 26 deletions(-)
(MyBogEnv) PS C:\Dev\DjangoMyBlog> git push origin main "
To https://github.com/Hase777/MyBlog-Django.git
! [rejected] main -> main (fetch first)
error: failed to push some refs to 'https://github.com/Hase777/MyBlog-Django.git'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
(MyBogEnv) PS C:\Dev\DjangoMyBlog>
昨日も忘れてて、またpushできなかったので、
今日はこれを解決しよう。
【調査と実装】
エラー表示とヒントのところを見る。
「エラー：プッシュに失敗しました。
ヒント：リモリポにあなたのローカルにないものが含まれるため更新は拒否されました。
これは大抵、他のリポジトリが同じRefにpushしたことが原因で起こります。
ですのでまずはgit pullなどでリモリポの変更を統合し、その後Pushすることをおすすめします。
詳しくはgit push --helpの 'Note about fast-forwards'をお読みください。」
要するにひろむがリモリポにpushしたので競合してるから、pullするなどして、ひろむの変更を反映させてからpushしてね、ということかな。
エラーをぐぐり作業してく。
色々な情報が出てくるがgit pull origin main で最新のリモリポをローカルに引っ張り、ローカルで手作業で競合解消し、pushするみたい。
さっそくやっていく。
まずはgit pull origin mainコマンド
(MyBogEnv) PS C:\Dev\DjangoMyBlog> git pull origin main
remote: Enumerating objects: 50, done.
remote: Counting objects: 100% (50/50), done.
remote: Compressing objects: 100% (24/24), done.
remote: Total 40 (delta 14), reused 38 (delta 12), pack-reused 0
Unpacking objects: 100% (40/40), 10.78 KiB | 72.00 KiB/s, done.
From https://github.com/Hase777/MyBlog-Django
* branch main -> FETCH_HEAD
ca0402c..473bff1 main -> origin/main
Auto-merging 改善アイデア.txt
CONFLICT (content): Merge conflict in 改善アイデア.txt
Removing config/pycache/wsgi.cpython-39.pyc
Removing config/pycache/urls.cpython-39.pyc
Removing config/pycache/settings.cpython-39.pyc
Removing config/pycache/init.cpython-39.pyc
Removing blog/templatetags/pycache/blog.cpython-39.pyc
Removing blog/migrations/pycache/init.cpython-39.pyc
Removing blog/migrations/pycache/0002_auto_20210810_2220.cpython-39.pyc
Removing blog/migrations/pycache/0001_initial.cpython-39.pyc
Removing blog/migrations/init.py
Removing blog/migrations/0002_auto_20210810_2220.py
Removing blog/migrations/0001_initial.py
Removing blog/pycache/views.cpython-39.pyc
Removing blog/pycache/urls.cpython-39.pyc
Removing blog/pycache/models.cpython-39.pyc
Removing blog/pycache/forms.cpython-39.pyc
Removing blog/pycache/apps.cpython-39.pyc
Removing blog/pycache/admin.cpython-39.pyc
Removing blog/pycache/init.cpython-39.pyc
Automatic merge failed; fix conflicts and then commit the result.
と出た。
次にgit statusで状況確認した
(MyBogEnv) PS C:\Dev\DjangoMyBlog> git status
On branch main
Your branch and 'origin/main' have diverged,
and have 2 and 6 different commits each, respectively.
(use "git pull" to merge the remote branch into yours)
You have unmerged paths.
(fix conflicts and run "git commit")
(use "git merge --abort" to abort the merge)
Changes to be committed:
modified: .gitignore
deleted: blog/pycache/init.cpython-39.pyc
deleted: blog/pycache/admin.cpython-39.pyc
deleted: blog/pycache/apps.cpython-39.pyc
deleted: blog/pycache/forms.cpython-39.pyc
deleted: blog/pycache/models.cpython-39.pyc
deleted: blog/pycache/urls.cpython-39.pyc
deleted: blog/pycache/views.cpython-39.pyc
deleted: blog/migrations/0001_initial.py
deleted: blog/migrations/0002_auto_20210810_2220.py
deleted: blog/migrations/init.py
deleted: blog/migrations/pycache/0001_initial.cpython-39.pyc
deleted: blog/migrations/pycache/0002_auto_20210810_2220.cpython-39.pyc
deleted: blog/migrations/pycache/init.cpython-39.pyc
deleted: blog/templatetags/pycache/blog.cpython-39.pyc
deleted: config/pycache/init.cpython-39.pyc
deleted: config/pycache/settings.cpython-39.pyc
deleted: config/pycache/urls.cpython-39.pyc
deleted: config/pycache/wsgi.cpython-39.pyc
Unmerged paths:
(use "git add <file>..." to mark resolution)
both modified: "\346\224\271\345\226\204\343\202\242\343\202\244\343\203\207\343\202\242.txt"
と出た。
改善アイデアリスト.txtの競合解消をしなきゃっぽい（,gitignoreも競合してたけどGitのほうで自動修正されたのか。。？）
Deleteのところはよく分からずなんか怖い気もするが、まあ気にせずいく笑
VSCodeで改善アイデアリスト.txtを開いたら、コンフリクト解消用画面になっていた。
手動でコンフリクト解消し、git add、git commit、git pushする。
(MyBogEnv) PS C:\Dev\DjangoMyBlog> git add . "
(MyBogEnv) PS C:\Dev\DjangoMyBlog> git status
On branch main
Your branch and 'origin/main' have diverged,
and have 2 and 6 different commits each, respectively.
(use "git pull" to merge the remote branch into yours)
All conflicts fixed but you are still merging.
(use "git commit" to conclude merge)
Changes to be committed:
modified: .gitignore
deleted: blog/pycache/init.cpython-39.pyc
deleted: blog/pycache/admin.cpython-39.pyc
deleted: blog/pycache/apps.cpython-39.pyc
deleted: blog/pycache/forms.cpython-39.pyc
deleted: blog/pycache/models.cpython-39.pyc
deleted: blog/pycache/urls.cpython-39.pyc
deleted: blog/pycache/views.cpython-39.pyc
deleted: blog/migrations/0001_initial.py
deleted: blog/migrations/0002_auto_20210810_2220.py
deleted: blog/migrations/init.py
deleted: blog/migrations/pycache/0001_initial.cpython-39.pyc
deleted: blog/migrations/pycache/0002_auto_20210810_2220.cpython-39.pyc
deleted: blog/migrations/pycache/init.cpython-39.pyc
deleted: blog/templatetags/pycache/blog.cpython-39.pyc
deleted: config/pycache/init.cpython-39.pyc
deleted: config/pycache/settings.cpython-39.pyc
deleted: config/pycache/urls.cpython-39.pyc
deleted: config/pycache/wsgi.cpython-39.pyc
modified: "\346\224\271\345\226\204\343\202\242\343\202\244\343\203\207\343\202\242.txt"
(MyBogEnv) PS C:\Dev\DjangoMyBlog> git commit -m "コンフリクト解消"
[main 7b30c82] コンフリクト解消
(MyBogEnv) PS C:\Dev\DjangoMyBlog> git push origin main
Enumerating objects: 31, done.
Counting objects: 100% (27/27), done.
Delta compression using up to 8 threads
Compressing objects: 100% (15/15), done.
Writing objects: 100% (17/17), 2.98 KiB | 2.98 MiB/s, done.
Total 17 (delta 11), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (11/11), completed with 6 local objects.
To https://github.com/Hase777/MyBlog-Django.git
473bff1..7b30c82 main -> main
無事push成功！！
Gitよくできてる～～～
リーナストーバルズさんすごいわ。
この勢いで、タイムゾーン変更のプルリクの承認とマージ作業もやっていく。
「git hub プルリクエスト 承認」でぐぐると下記記事がヒット
https://howpon.com/5895
これに従ってやっていく！
まずはプルリク画面に行き、
右側のReviewersの歯車マークから自分を選ぶ。
ページを更新すると右上に「Add your review」という緑色のボタンが現れるので押す。
レビュー用ページに移動する。
右上の「Review changes」をクリックし、「Comment」「Approve」「Request changes」から選ぶ。
これで承認完了。
プルリクのConversationタブに戻ってくる。
これで「Maerge pull request」をすれば完了なのだが、ボタンが無効化されている。
見てみると今回は,gitignoreで競合が発生していたみたい。「Resolve conflict」を押す。
db.sqlite3
blog/migrations/*
<<<<<<< feature/time_zone
*/__pycache__/*
=======
*/__pycache__/*
*/*/__pycache__/*
>>>>>>> main
とある。書き方は一緒だ。
db.sqlite3
blog/migrations/*
*/__pycache__/*
*/*/__pycache__/*
に修正し、「Mark as resolved」をクリック。
「Commit merge」をクリック。
またConversationタブに戻ってくる。
今後は「Maerge pull request」ボタンが有効になっている！^^
押す。
最終確認が出るので「Confirm merge」を押して完了！
Pull request successfully merged and closed
You’re all set—the feature/time_zone branch can be safely deleted.
と表示され、横に「Delete branch」ボタンも表示されている。
基本的にマージしたらすぐ削除するのが慣例なのかな。
取り敢えず今回は残しておこう。
これでプルリクの承認＆mainへのマージ完了！
そして再度自分のローカルリポジトリを最新状態にするため、git pull origin mainをする。
終わったあああ～～～^^
今日はかなりGitの知識が増えた！
やっぱり複数でやると勉強効率が良いわ。
ひろむに感謝！
◆【12日目】改善リストをignoreに【毎日改善チャレンジ】
作成日: 2021年8月21日19:09
【改善の詳細と着想の背景】
ひろむとの共同開発において、タスク管理を「改善アイデアリスト」というテキストで管理しようとしたが、
それだと同じタスクに取り組んでしまったり、改善アイデアリスト.txt自体が毎回競合してしまうので、
タスク管理は別の方法でやる方向に。
ということで改善アイデアをgitignoreに追加する。
【調査と実装】
改善アイデアリスト.txtを.gitignoreに追加し、add、commit、push
これは成功した。
しかし、Githubからは消えてない。
あー前にもあったキャッシュ問題だ。
前と同じ方法でキャッシュを消そうと
git rm -r --cached 改善アイデアリスト.txt
を実行すると
fatal: pathspec '改善アイデアリスト.txt' did not match any files
と出た。
あ、もしかして日本語だからダメなのかな、
以前もコマンドプロンプト上で勝手に文字変換されたと思われるときがあったし。
と思い、その部分をコピペして再実行
git rm -r --cached \346\224\271\345\226\204\343\202\242\343\202\244\343\203\207\343\202\242.txt
しかし、またエラー。
fatal: Invalid path '/346': No such file or directory
「そんなファイルないよ」とのこと。
再度その記事を見たら、
を迷ったが、
git rm -r --cached .
で全てのキャッシュを削除できるみたい。
これを実行してみる。
(MyBogEnv) PS C:\Dev\DjangoMyBlog> git rm -r --cached .
rm '.gitignore'
rm '.vscode/settings.json'
rm 'blog/__init__.py'
rm 'blog/admin.py'
rm 'blog/apps.py'
rm 'blog/forms.py'
rm 'blog/models.py'
rm 'blog/templates/blog/base.html'
rm 'blog/templates/blog/category_and_tag_list.html'
rm 'blog/templates/blog/comment_form.html'
rm 'blog/templates/blog/post_detail.html'
rm 'blog/templates/blog/post_list.html'
rm 'blog/templates/blog/search_form.html'
rm 'blog/templatetags/blog.py'
rm 'blog/tests.py'
rm 'blog/urls.py'
rm 'blog/views.py'
rm 'config/__init__.py'
rm 'config/asgi.py'
rm 'config/settings.py'
rm 'config/urls.py'
rm 'config/wsgi.py'
rm 'manage.py'
rm 'static/blog/document.png'
rm 'static/blog/whitebear.jpg'
rm '改善アイデア.txt'
ふむ。なんか全ファイルが表示されているが、キャッシュが消えるだけだから問題ないだろう。
コミット＆プッシュする。
(MyBogEnv) PS C:\Dev\DjangoMyBlog> git commit -m "改善アイデアリストがgithubから消えないのでキャッシュを全削除して再度コミット"
[main a5bdaed] 改善アイデアリストがgithubから消えないのでキャッシュを全削除して再度コミット
26 files changed, 636 deletions(-)
delete mode 100644 .gitignore
delete mode 100644 .vscode/settings.json
delete mode 100644 blog/__init__.py
delete mode 100644 blog/admin.py
delete mode 100644 blog/apps.py
delete mode 100644 blog/forms.py
delete mode 100644 blog/models.py
delete mode 100644 blog/templates/blog/base.html
delete mode 100644 blog/templates/blog/category_and_tag_list.html
delete mode 100644 blog/templates/blog/comment_form.html
delete mode 100644 blog/templates/blog/post_detail.html
delete mode 100644 blog/templates/blog/post_list.html
delete mode 100644 blog/templates/blog/search_form.html
delete mode 100644 blog/templatetags/blog.py
delete mode 100644 blog/tests.py
delete mode 100644 blog/urls.py
delete mode 100644 blog/views.py
delete mode 100644 config/__init__.py
delete mode 100644 config/asgi.py
delete mode 100644 config/settings.py
delete mode 100644 config/urls.py
delete mode 100644 config/wsgi.py
delete mode 100644 manage.py
delete mode 100644 static/blog/document.png
delete mode 100644 static/blog/whitebear.jpg
delete mode 100644 "\346\224\271\345\226\204\343\202\242\343\202\244\343\203\207\343\202\242.txt"
(MyBogEnv) PS C:\Dev\DjangoMyBlog> git push origin main
Enumerating objects: 3, done.
Counting objects: 100% (3/3), done.
Delta compression using up to 8 threads
Compressing objects: 100% (1/1), done.
Writing objects: 100% (2/2), 300 bytes | 300.00 KiB/s, done.
Total 2 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/Hase777/MyBlog-Django.git
95bcfc9..a5bdaed main -> main
そして、Githubを確認してみる。。。
！！！！！
ぜ ん ぶ き え て る や ん け ＼(＾o＾)／
なんでーーー笑
と、ここにきて気づく。
最初に実行した、
git rm -r --cached 改善アイデアリスト.txt
は正しくは
git rm -r --cached 改善アイデア.txt
の間違えだった。。笑
日本語とかでなく、単にそれが問題だったか。。
ということで、Githubにファイルを復旧することにトライ。
これも良い練習になるだろう。
まずローカルのほうはどうなっているか確認。
ローカルは全部残っているが、VSCode上で全てのファイルに「U」の文字が入っている。
VS Codeでは以前も「M」と表示されたりしていたがスルーしていたので、これを期に調べてみる。
A added 新規追加
M modified 変更あり
U untracked gitが未追跡(新規作成、add前)
D deleted 削除済み
C conflict コンフリクト発生中
R renamed ファイル名変更済み
S submodule サブモジュール
なるほど。
Git未追跡ということは、再度git addして、commit、pushすれば解決するのかもしれないな。
けれど、今回は復旧作業の勉強する良い機会なので、それについて調査しよう。
ローカルリポジトリ、リモートリポジトリ、add, commit, pushの概念をしっかり理解していない気がしたので、
紙に書いて整理してみた。
まず自分のパソコンで管理している領域。
そこからaddすることで、キャッシュゾーン（Gitローカル管理領域①）に入り、
Commitすることでローカルリポジトリ（Gitローカル管理領域②）に入り、
PushすることでGitリモートリポジトリ管理領域に入る
という感じ、と理解した。
つまり、今回「git rm -r --cached . 」をした時に何が起こったかというと、
キャッシュゾーンにあったファイルを全て削除し、
キャッシュゾーンが空の状態でcommit&pushしたからGithubが空になってしまったということだ。
よってこれを解決するためには、
キャッシュゾーンにあったファイルを全削除した動作を取り消し、
キャッシュゾーンに全てのファイルがある状態に戻ったらCommit＆pushすればよい。
「git rm -r --cached . 取り消し」でぐぐる。
pushの取り消し、commitの取り消し、addの取り消しなど、
場合によって色々と使うコマンドが違うようだ。む。。。難しい。
時間がかかりそうなので、取り敢えず今回はgit add . して、commitして、pushする。
一応これでGithubには全ファイル戻った。。。よかった。。
ちなみに今回調べた中で、どの記事でも「git rm --cached 」と書かれていた。
しかし自分が今回したのが「git rm -r --cached 」。
「-r」は何だろう？
ということで調べたら
「-r オプションは「Recursive」の頭文字を取ったものです。 Recursive モードで git rm を実行すると、ターゲット ディレクトリとそのディレクトリのすべてのコンテンツが削除されます。」
とのこと。
なるほど分からん。
「先頭のディレクトリ名が指定されている場合、再帰的な削除を許可します。」
うーん。。
「コマンドのオプションで指定したディレクトリの中のファイルが全てインデックスから削除される。」
要するに、指定したディレクトリ全体を消すためのオプションて感じか。
まあ通常使いならオプションなしで良さげ。
改善アイデア.txtが再度アップされてしまったので、再度キャッシュ削除からやる。
今度はスペルミスしないぞ。
-rオプションも無しでやる。
git rm --cached 改善アイデア.txt
を実行すると、
rm '改善アイデア.txt'
無事にできたみたい。やっぱりただのスペルミスだったのね。
コミット＆プッシュ。
無事にGithubからもファイルが消えた。
パソコンの「DjangoMyBlog」内のフォルダーからも「改善アイデア.txt」を削除（別の場所に移動）しておく。
ふう、疲れたぜ。時間がかかってしまった。
プライベートも落ち着いたので、明日からエンジン再始動してがんばっていこう！
取り敢えず5時起きで朝活！
◆【13日目】トップのデザイン改善【毎日改善チャレンジ】
作成日: 2021年8月30日7:08
【改善の詳細と着想の背景】
さぼりすぎいいい。
ワーキングツリーの理解とか難しいところを理解しようとしたら数日さぼってしまった。
毎日簡単でもいいからちょこっとが大事。
ということで、今日はちょこっとデザインをいじる。
【調査と実装】
トップページ（記事一覧ページ）で何となく見づらいと思い、
カードに影を付けれないか調査。
Bootstrapの実装の調査の作法はいまいち正解が分からない
色々調べて下記で出来そう
shadow p-3 mb-5 bg-white rounded
<div class=card>
を下記に書き換え
<div class="card shadow p-3 mb-5 bg-white rounded">
うまくカードに影ができた！^^
次に記事タイトルの背景色のオレンジがどうしようもなくダサいので変更しようと思い、
色の変更について調べた。
出来ればテーマカラー以外の色を設定したかったが、CSSでの上書き、SCSSの活用、ミックスインとか色々出てきて、
面倒くさくなり、諦めてテーマカラーのライトグレーにした。
オレンジよりはだいぶ良い。
取り敢えず今日はこれで終わり！
毎日ちょこっと！
作成日: 2021年1月19日23:44
ついに個人開発開始！
まあ教科書（Djangoビギナーズブック）の7章をそのままやってるだけだけど(笑)
これから色々カスタマイズしていこーー！
取り敢えずHerokuにあげるとこまでやりたいなー
AWSの教科書も買ってあるから、最終的には個人でAWS契約してそこにアップしよう。
楽しみになってきた！
◆GitHubはじめました
作成日: 2021年1月28日23:44
Gitコマンドに翻弄された。
ひっかかったポイント
①GitHubでリモートリポジトリ作成時に「README.mdを作る」に☑してしまった
②デフォルトのメインブランチの名前がmasterではなくmainになっていた
①について
Pushした時に下記のエラーになった。
Updates were rejected because the remote contains work that you do not have locally.
GitHub側で作ったREADME.mdがローカルリポジトリに入ってないというエラー。
リモートリポジトリを一旦削除して、README.mdなしで再作成したら解決
②について
git push origin master で実行したら、mainではなくmasterという別ブランチが出来てしまった。
こちらも上記のリモートリポジトリ一旦削除でリセット
再作成するときのヘルプに下記のメッセージを発見
…or push an existing repository from the command line
git remote add origin https://github.com/Hase777/sugu.sakujo.git
git branch -M main
git push -u origin main
この通りにやったらできた。
以下解説
…or push an existing repository from the command line
既存のリポジトリをコマンドラインからpushする場合
git remote add origin https://github.com/Hase777/sugu.sakujo.git
URLの登録
git branch -M main
現在（カレントディレクトリ）のブランチ名をmainに変更
（これをする前にgit branch コマンドで元々のローカルリポジトリの名前を確認したら
やはり「master」になっていた。それをリモートリポジトリと同じ名前にする必要があったみたい）
git push -u origin main
今回対象とするブランチ（main）を上流ブランチとして設定する（一度指定すると次回以降も対象となる）
正直、上流ブランチのことはまだよく理解してないけど、とりあえず初めてコードをGitHubにあげられたからよしとする笑
◆勉強再開＆【毎日改善チャレンジ】開始宣言！
作成日: 2021年8月9日11:23
さぼりすぎてしまった。。
が、しかし、いよいよ仕事でAWSデプロイ周りの知識を勉強する必要性が出てきたため、
再度この日記アプリの開発を通して勉強していく。
ちなみにこの文章はタッチタイピングで打っており、
めちゃくちゃ遅い＆ストレスがやばい。
しかし両学長もタッチタイピング大事と言っていたし、
慣れれば早くなると信じて、最初は遅くても、どんなにストレスフルでも、
練習として正しい指のポジションで打つようにする。
これは仕事の時もやる。
多分ギターの難しいリフと一緒で、
最初はゆっくりでもいいので正確にやるのが大事。
スピードは後からついてくる。
予測変換機能もなるべく使わないようにしよう。
あと、キーボードはなるべく見ない！
ーーー
また、今日からこの日記アプリの【毎日改善チャレンジ】を始める
どんなに小さいことでも良いので、毎日１か所以上アプリを改善し、GitにPushする。
【目的】
・勉強したHTML、CSS、JSを実際に使ってみる
・Djangoの知識強化
・Gitに慣れる
あとAWSへのデプロイも並行して勉強する。
（まずは第一歩としてHerokuにデプロイするのも要検討）
◆【1日目】改行の適用【毎日改善チャレンジ】
作成日: 2021年8月9日12:17
【改善の詳細と着想の背景】
前回の日記を書いた際、段落のように改行を入れたにも関わらず、
2行以上の改行は適用されていなかった。
改行があった方が見やすいので、今回はそこを改善する。
【調査と実装】
「Django 改行 2行」でぐぐる
下記の記事がヒット
https://dreamerdream.hateblo.jp/entry/2018/10/14/000000
>>なんと、テンプレートの項目に”| linebreaksbr”と書いてあげるだけ！
>>{{ set_text | linebreaksbr }}
>>これで勝手に改行コードが置き換えられます。ブラウザで見ると
とのこと
DjangoMyBlog/blog/templates/blog/post_detail.html
の下記を修正
修正前
{{ post.text | linebreaks | urlize}}
修正後
{{ post.text | linebreaksbr | urlize}}
これだけで2行以上の改行も適用された！
ちょっと簡単すぎたけど初日だからいいか笑
これをgithubのリモートリポジトリにpushする。
＜push手順のおさらい＞
カレントディレクトリがPushしたいDjangoアプリプロジェクトになっていることを確認し、、
①git add . （フォルダ内の全てのファイルをステージング）
↓
②git commit -m "I modified linebreak" （全てのファイルをローカルリポジトリにコミット。コメント付き）
↓
③git push origin main （リモートリポジトリのmainブランチにプッシュ）
※ちなみにgit push origin HEADと打ってカレントブランチをリモートにプッシュでもOK
詳細結果が表示されれば成功
実際にやってみる
①git add . と入力
なにも反応なし
git status と入力すると下記の通りちゃんとステージングされてる
On branch main
Your branch is up to date with 'origin/main'.
Changes to be committed:
(use "git restore --staged <file>..." to unstage)
modified: blog/templates/blog/base.html
modified: blog/templates/blog/post_detail.html
modified: db.sqlite3
②git commit -m "I modified linebreak" と入力
[main 4fd4534] I modified linebreak
3 files changed, 4 insertions(+), 4 deletions(-)
と表示された
③git push origin main と入力
Enumerating objects: 15, done.
Counting objects: 100% (15/15), done.
Delta compression using up to 8 threads
Compressing objects: 100% (7/7), done.
Writing objects: 100% (8/8), 3.86 KiB | 1.29 MiB/s, done.
Total 8 (delta 5), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (5/5), completed with 5 local objects.
To https://github.com/Hase777/MyBlog-Django.git
7722986..4fd4534 main -> main
と表示され、成功したっぽい！
よしよし。
この作業は毎回やることになるだろうから覚えておこう。
今後ブランチ分けとか、コンフリクト解消とかもやっていきたい。
【その他】
タイトルがダサかったので変更した。
◆【2日目】カテゴリーの文字色が白【毎日改善チャレンジ】
作成日: 2021年8月10日23:12
【改善の詳細と着想の背景】
記事一覧画面のサイドバーのカテゴリーが見えないため修正。
【調査と実装】
恐らくポカミスと思われるのため、とにかく該当箇所を探す。
『Djangoビギナーズブック』も見返しながら、、探す探す、、
2時間ほど経過し、、
DjangoMyBlog/blog/templates/blog/category_and_tag_list.html
で下記を発見
<p class="menu-label">カテゴリ一覧</p>
<ul class="menu-list">
{%for category in category_list %}
<li><a href ="{% url 'blog:post_category_list' category.pk %}">{{ categroy }}</a></li>
{% endfor %}
</ul>
<p class="menu-label">タグ一覧</p>
<ul class="menu-list">
{%for tag in tag_list %}
<li><a href ="{% url 'blog:post_tag_list' tag.pk %}">{{ tag }}</a></li>
{% endfor %}
</ul>
「categroy 」！！！
カテグロイ！！！！
ここかーーーー！と思い、categoryに変更したら、無事表示されましたとさ。
疲れた。。
【その他】
スペルミス１つでこうなるのだからプログラミングってほんと繊細だ。
この部分はFor文でcategoryモデルの __str__メソッド を呼び出している部分で、
上記部分は「カテグロイ」になっていたせいで、リンクとボタンは表示されるけど、
ボタン名が表示されないということだった。
今回本を見返して思ったけど、かなり色々と忘れてるな。。
やはり学習期間に間が空いてしまうと復習からしなきゃいけなくなって効率が悪い。
KENTAさんの言う通りだ。
だからこそ毎日改善チャレンジは頑張って続けよう。
もう23時だ。。あー眠い。
同じくKENTAレッスンで「とにかく早起き」も実行しよう。
理想としては毎日仕事が始まる前に１改善終わらせたい。
あとCSSはBulmaが使われているみたいだけど、
CSSの勉強のためには自分で０からCSSをコーディングした方が良いのだろうか。。
次回以降の改善アイデアの候補だ。
もう瞼が限界なので
Githubにpushして
シャワーして寝る。
◆【3日目】ブログのロゴ付け【毎日改善チャレンジ】
作成日: 2021年8月11日23:37
【改善の詳細と着想の背景】
今日はHTMLとCSSの総復習をしたので、CSSを変更しようと思ったが、
Bulmaなのでちょっと本腰いれないと無理と判断し、
今日はHTMLをやる。
ブログのロゴを右上に追加してみる。
【調査と実装】
画像はとりあえず最近つかっている白くまちゃんにしよう
コードは今日復習したばっかだから簡単なのだ。
これだ。
<img src="ここにURLを入れる">
あれ、画像ってどうするんだっけ。。笑
教科書とノート読み返そう。
まず画像処理をするためpillowというライブラリが必要なようで、
pip install pillowでインストールした。
ちなみに今のライブラリ状況は下記
Package Version
---------- -------
asgiref 3.3.1
Django 3.1.5
Pillow 8.3.1
pip 21.2.3
pytz 2020.5
setuptools 49.2.1
sqlparse 0.4.1
ーーー
次に設定フォルダ（自分の場合はconfig）のsetting.pyに
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
と追記する。
エラー発生
NameError: name 'os' is not defined
setting.pyに下記を追加
import os
エラー解消。
次に同じく設定フォルダのurls.pyにも下記を追記
from django.conf import settings
from django.conf.urls.static import static
～略～
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
上記の設定をしないとメディアはプロジェクト直下フォルダに保存されてしまうため、
setting.py でMEDIA_ROOT = os.path.join(BASE_DIR,'media')などとすることでメディアの保存先を指定できる。
ということでプロジェクト直下フォルダに新しく「media」フォルダを追加し、
そこに白くまちゃん画像を保存する。
これで準備ＯＫなはず！
base.htmlのbodyの適当な部分に
<img src="ここにURLを入れる">
を書く。
あれ、ＵＲＬってどう書けばいいんだ。。？笑
教科書の例を見ても、動画一覧の話なので、modelとviewを使っている。。
。。。ん？
再度教科書を見てみる。
次の章が「静的ファイル」というタイトルになっている
こっちじゃね？笑
読んでみる
静的に不配信されるファイル。中身がいつも同じ、変更されないデータのこと。
具体的にはCSSファイル、jsファイル、画像ファイルなど。
こっちだ。
動画のほうと被っているコードもあるかもしれないので、上記の変更はとりあえずそのままで進めよう。
まずアプリディレクトリに「static」というフォルダを作る。
そしてその中に「blog」というフォルダを作る（テンプレートファイルのフォルダ構造と一緒）
CSSのコード例だけど、htmlファイルをこうしているのがある
{% load static%}
～略～
<link rel="stylesheet" href="{ % static 'videos/style.css' % }">
読めたぜ。
ということは
<img src="{ % static 'blog/whitebear.jpg.' % }">
こうやろ！！
。。なんか表示されたけど、エラーになっているｗ
色々試したけどだめだ～～～～
もう眠いから明日やろ。。
【翌朝追記】
「django 静的ファイル 配置」でぐぐり、
下記の記事を発見
https://qiita.com/saira/items/a1c565c4a2eace268a07
これを参考に
setting.pyの一番下に
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static")
]
を追加
結果、、、
白くまちゃんが表示された！！！！
いえええいいい
よくよく教科書も読み返したら、普通に書いてあった
「デフォルトではアプリ内のstaticディレクトリが探索されます。
プロジェクト直下といった、別の場所を指定することもできます。
（上記のコード）
これは、プロジェクト直下のstaticディレクトリも探索対象にする設定です。
こうした場合、まずプロジェクト直下のstaticディレクトリが探索され、
その後、各アプリのstaticディレクトリが探索されます。
この挙動はテンプレートファイルの探索と一緒です。」
要するに上記を書かないとプロジェクト直下staticディレクトリが探索対象になってなかったから画像が表示されなかったみたい。
解決きもちいい。
でもCSS適用されてなく、ロゴっぽくないので、今日はBulmaを外して自作CSSの作成開始しようかな
◆【4日目】.gitignoreの設定【毎日改善チャレンジ】
作成日: 2021年8月12日18:03
【改善の詳細と着想の背景】
今日ひろむとランチをしたが、Githubの共同作業の練習として
このDjango日記アプリを共同開発することになった。
そこで彼をGithubのコラボレーターに招待したが、
彼のローカル環境でサイトを立ち上げたところ、
Gitにデータベースもアップロードされたせいで、
自分の過去の投稿記事が見れてしまった（はずい笑）
ということで彼から教えてもらったgit ignore機能を使ってみる。
（これは改善なのか、、というツッコミは無視でいく笑）
【調査と実装】
データベースの名前はdb.sqlite3
サクラエディタで新規ファイルをつくり、
一行目に「db.sqlite3」と書き、「.gitignore」というファイル名で保存。
それをプロジェクト直下ディレクトリに置き、addしてcommitしてpush。
しかしgithubからは消えなかった。。
ググったところキャッシュが原因とのことで、
コマンドラインで
git rm -r --cached db.sqlite3
を実行し、再度commit,pushしたら無事Githubから消えた。
これで日記の内容はバレない笑
今後の共同作業の流れとして、
自分が改善タスクをリストアップし、彼に依頼をする流れにする。
楽しくなってきたぜ。
ということでたまきと酒や
◆【5日目】ヘッダーの色変更【毎日改善チャレンジ】
作成日: 2021年8月13日22:07
【改善の詳細と着想の背景】
昨日飲みすぎて二日酔いがやばい。
よって今日は簡単なやつにする。
ヘッダーの色を変えてみる。
【調査と実装】
「Bulma 設定」でぐぐる
https://qiita.com/ochiochi/items/de1afd2d3fc8f6d3ea55
使用できる色の一覧は次の通りです。
is-primary
is-info
is-success
is-warning
is-danger
is-white
is-black
とのこと。
base.htmlにあったis-primaryってこれだったのか。
これをis-infoに変更。
青色になった。
おわり笑
◆【6日目】今後の方向性決め【毎日改善チャレンジ】
作成日: 2021年8月14日19:04
【改善の詳細と着想の背景】
まだ若干本調子じゃないんだ。。
水たばこはもう一生吸わんぞ。。。
せっかくのお休みだけど、夕方から勉強開始。
Bulmaのさらなる改修をしようと思い
別の記事をあさる。
よさげな記事を発見
『CSSフレームワークのススメ - BULMAの導入と覚え書き』
https://qiita.com/belq/items/10ec41f656e47ee2b540
これを読んで、CSSフレームワークの全体像を知る
一番有名なのがBootstrap。
これは自社アプリにも使われている。
よく分からないけどどうやらjQueryも関連しているみたい。
他にも色々あるみたい。
めんどいのでコピペする。
ーーー
・Bootstrap
最も有名な？FW。ここまでCSSフレームワークと書いてきましたが、Webアプリケーションフレームワークとも呼ばれ、公式には「front-end component library」と紹介されています。
jQuery及び独自のjsが組み込み済み。MITライセンス。
・Foundation
Bootstrapに次いで有名とのこと。シリコンバレーにあるZURBという企業が管理している。昔の記事をググると「Bootstrapより柔軟性がある」などと書かれていました。今はまた違うかもしれませんが…。
独自のjsが組み込み済み。MITライセンス。
・Materialize
Googleが提唱した「マテリアルデザイン」を志向したFW。アメリカのカーネギーメロン大学の学生チームによって管理されているようです。
独自のjsが組み込み済み。MITライセンス。
・Semantic UI
HTTP、HTMLの設計者ティム・バーナーズ＝リーが提唱した「セマンティック・ウェブ」を志向したFW。
独自のjsが組み込み済み。MITライセンス。
・Pure.CSS
アメリカのYahoo!が提供する、シンプルさを志向したFW。
組み込みのJavaScriptは無し。Yahoo BSD License。
・BULMA
CSSのみでのフレキシブルデザイン(Flexbox)に対応したFW。
組み込みのJavaScript無し。MITライセンス。
ーーーー
Bulmaは簡単シンプルという感じか。
ここに来て、方向性をどうするか考える。
自社アプリへのエンジニアとしての参画をメインの目的とするのであれば、
同じスキルセットで練習したほうが良いのだろう。
改めて自社アプリのGithubを見てみる.
Python
35.8%
HTML
31.4%
CSS
17.3%
JavaScript
12.3%
SCSS
3.2%
・・ふむふむ・・SCSSってなに？
ということでぐぐる。
CSSの進化版みたいなものらしい。
コンパイルが必要とか書いてあってめんどくさそう。。
いったん逃げて簡単なBulmaで慣れてから戻ってくるか。。
頑張って飛び込むか。。。
でもやはり今勉強している一番の目的は自社アプリのプロジェクトへの参画（を通して実務経験を踏み、何かあればいつでもエンジニアとして他社に転職活動できるように）することだから、、
ここは頑張ろう。
ということで今後の方向性として、自社アプリで使っている技術を使って
アプリを改造していくようとしよう。
でもSCSSはややこしそうなので、まずはBootstrapから。
早速「Bootstrap 使い方」でぐぐる。
テックアカデミーの記事
https://techacademy.jp/magazine/6270
「BootstrapはTwitter社が開発したCSSの「フレームワーク」です。通常CSSを書く場合、全てのスタイルを自分で作っていく必要がありますが、このフレームワークにはよく使われるスタイルがあらかじめ定義してあるので、ルールに沿って利用するだけで整ったデザインのページを作成できます。」
へーTwitterが作ってるんか。知らんかった。
「Bootstrapを使うメリットとして、レスポンシブWebデザインに対応しているという点があります。通常、スマートフォンやタブレットなど個別に対応するスタイルを作っていると大変手間がかかります。BootstrapはCSS3のメディアクエリを使用しているので、ブラウザの横幅サイズを判断基準として、レイアウトデザインを柔軟に調整することが可能です。」
ほえー。なるほど。じゃあスマホ用とかiPad用とかを場合分けして作らなくてもよいのね。便利じゃない。
【調査と実装】
【翌朝追記】
寝落ちしてしまった笑
改善とは言えないが、方向性を決めたというのは一歩前進ということにする。
今日も楽しくやろう！
◆【7日目】具体的な技術セットの確認【毎日改善チャレンジ】
作成日: 2021年8月15日10:44
【改善の詳細と着想の背景】
昨日、このブログの改造の方向性として、
自社アプリで使われている技術セットで改造していく方向になった。
使われている技術を再度まとめてみる。
ーーーー
★サーバー周り
AWS
EC2（ウェブサーバー）
S3（画像など用のストレージ）
RDS（データベース）
Route 53 （DNSサーバー）
Simple Email Service（システムからの自動メール送信）
Simple Queue Service（キューの管理？参照：https://qiita.com/UpAllNight/items/7c5022661a1eadc8a88a）
WorkMail（noreplyメールやり取り用）
★外部API
Twilio（SMSの送信）
IP GEO Location（ユーザーの現在地を取得してデフォルト言語を決めるため）
★コード
Django
Python
HTML
CSS
SCSS
Bootstrap
JavaScript
jQuery
ーーーーー
多分だけどこんな感じかな。
AWSは紫の本で進めていくとして、ブログアプリ毎日改善チャレンジは何からやっていこうか。
今のブログアプリの技術構成はこんな感じ。
ーーーーー
★サーバー周り
なんもなし（ローカル環境）
★外部API
なんもなし
★コード
Django
Python
HTML
CSS
Bulma
ーーーーー
やっぱりまずはBulmaを外してBootstrapを導入するところから始めようかね。
【調査と実装】
【翌朝追記】
酒を飲んで続き出来なかった。
とりあえずBootstrap導入から開始することは決まった
◆【8日目】Bootstrapの導入【毎日改善チャレンジ】
作成日: 2021年8月16日23:20
【改善の詳細と着想の背景】
最近ちょっとさぼりすぎや。
改善とは言えないリサーチだけで終わることが多い。
しかし、毎日プログラミングに触れているという大義は果たしているので、
自分を責め過ぎず頑張る。笑
ということでBootstrapの導入、やってみよう！
【調査と実装】
まずはBulmaのコメントアウト。
見たところ、base.htmlにしか書かれていないっぽいので、下記部分をコメントアウト。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
すると当然だけど、ブログがとってもシンプルな見た目になった。
これをBootstrapでいけてるサイトに仕上げていく。
「Bootstrap 使い方」などでぐぐると色々なサイトが出てくる。
Bootstrapにも色々なバージョンがあるようで、自社アプリのBootstrapのバージョンを確認する。
Githubのリポジトリ内で特定のコードの検索方法が分からなかったのでぐぐると、
ヘッダー左上の検索窓で検索したいコードを入力し、候補として出てきた選択肢で
右側に「in this repository」と書かれた部分をクリックすると、
現在表示しているリポジトリ内で検索ができるよう。
早速やってみたが、no matchとのこと。
おかしいなと思い、自分のリポジトリで適当なワードでやってみたら検索できた。
恐らく自社アプリのリポジトリでは権限付与されてないのかな。
いつかPGに聞いてみよ。
しょうがないので自力で探す。
自社アプリでは教科書のように機能ごとにアプリを分けず、
何故か１つのアプリに全てをぶちこんでいると聞いていたので、
そこのテンプレートファイルbase.htmlを見る。
参照を見るとCSSはstaticディレクトリに入ってそうな雰囲気。
この前白くまちゃん画像を追加するときに見た書き方だ。
そこで
XXX/static/lesson/css
を見ると、多くのファイルが並んでいた
style.css
が怪しいと思い、見てみると、18693行にも及ぶ大ファイルだった。
これがPGがいってためちゃ長いファイルかなーと思いつつ、
ここのトップにバージョンの記載があった。
/*!
* * Bootstrap v4.3.1 (https://getbootstrap.com/)
* * Copyright 2011-2019 The Bootstrap Authors
* * Copyright 2011-2019 Twitter, Inc.
* * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* */
4.3.1バージョンね。OK。
導入方法を調べる。
ダウンロード方式とCDN方式があるようだ
自社アプリではダウンロードして、かつカスタマイズしているようだから、
ダウンロード方式にしよう。
えーっと、、、コンパイル、、、Rubyが必要、、、んん？？？
記事によって書いてあることが違ってよくわからん。
めんどそうなので、取り敢えず簡単そうなCDNでやってみる。
コード自体は変わらないだろうから、後からダウンロード方式に切り替えもできるだろう。
参照公式リンク
https://getbootstrap.jp/docs/5.0/getting-started/download/#jsdelivr-%E7%B5%8C%E7%94%B1%E3%81%AE-cdn
ここの「jsDelivr 経由の CDN」をそのままコピー。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
base.htmlの<head>内にぶちこむ。保存。
今はBulmaのプロパティの書き方がそのまま残っている状態。
サイトを表示させるとどんな感じになるのか？
見てみるとちょっと変わった笑
同じ書き方のプロパティがあったりするんだろう。
これを１つ１つ直していこう。
今日はとりあえず眠いのでとりあえず終わり！
過去2日間くらいGitにPushしてなかったからやろう。
（改善アイデア.textもフォルダに含めたから、ひろむに見てもらおう。）
今回のBootstrap導入にあたって、jQueryのこととか、Ajaxのこととかも調べたぜ。
徐々に知識が関連付きながら重なってきて面白い。
◆【9日目】Bootstrapの導入②【毎日改善チャレンジ】
作成日: 2021年8月17日22:40
【改善の詳細と着想の背景】
昨日はBootstrapの調査とCDNでの導入まで終わったので、
今日は実際にサイトの見た目を整えていく！
【調査と実装】
まずは基本的な使い方を調べようと思い、
「Bootstrap 使い方」でヒットしたサイトをさーっとみていく。
https://skillhub.jp/courses/168/lessons/915
このスキルハブというサイトが分かりやすかった。
調べていくうちにBootstrapの公式サイトにサンプルがあるのに気づく。
見てみると「ブログ」がある。
参考に（これをそのままコピペしたら楽なんじゃ。。？）してみようと思い見てみる。
しかしコードをコピペできるのではなく、単にサイトが表示されるだけだった。
おしゃれ。
どうすればコードをぱくれるかと考え、開発者ツール（F12）かと思い、開く。
見えたぜ。
Ctrl＋AやShiftなどで一括コピーしようとしてもできなかったため
「Chrome 開発者ツール HTML コード 一括コピー」でぐぐると下記がヒット
https://blog.cybercube.co.jp/chrome-element-copy
やはり大体ぐぐれば出てくる素敵な世界。
これによると上位要素をコピーすれば下位要素も一緒にコピーされるとのこと。
実際<body>部分をクリックし、コピー＆ペーストすると無事コピーできた。
あとはこれを調整していく。
が、何が何だかさっぱりわからないので、さっきのサイトで基礎学習
グリッドシステム、ブレイクポイント、container、row、colなど
基本を学習し、適用する。
昨日よりはましな見た目になった笑
まあこれからカッコよくしていこう笑
別件で、昨日pushした改善アイデアをひろむが見てくれたようで、
早速タイムゾーン変更をやってくれた！
そして人生初のPull Requestを受ける笑
なんか嬉しい！笑
今日はそちらの対応できなかったから、明日margeのやり方を復習してmergeしてみよう。
同時にやってたからもしかしたらコンフリクトが起きてるかもな。
それも良い経験になるだろう。
ひろむの協力は非常にありがたい。
恩返しできるように俺も頑張る！
日々成長していってるのが楽しいぞ～
◆【10日目】Bootstrapの導入③【毎日改善チャレンジ】
作成日: 2021年8月18日23:10
【改善の詳細と着想の背景】
今日は株式投資と証券口座の調査に時間を取られてしまった！
ということで今日は軽めに。
昨日に引き続きBootstrapのでサイトの見た目を整えていく！
今日は記事一覧の部分を修正する。
【調査と実装】
今まではずっとbase.htmlを修正してきたけど、
今日はpost_list.htmlを修正することになる。
BootstrapのComponentからCardというクラスを使ってみよう。
記事の表示はFor文になっているため、
その下にの部分を
<div class="card"> ～ </div>で囲んだらカードになった。
さらに
<div class="card-header"> ～ </div>で記事タイトル部分を囲い
<div class="card"> ～ </div>で作成日などの部分を囲い、
ヘッダー部分は色を変えてみた。
そして記事タイトルはでかすぎた（h1になっていた）のでh5に変更した。
これでちょっと落ち着いた見た目になった。
けど色の組み合わせとか幅がダサいな笑
けど今日は遅いのでこれでおしまい！
今日はAWS紫本とひろむのプルリク処理できなくて無念。明日絶対やる！
◆【11日目】Gitのpushできない問題【毎日改善チャレンジ】
作成日: 2021年8月19日23:40
【改善の詳細と着想の背景】
今日は昨日やろうと思ってたGitのpushできない問題を解決しよう。
一昨日、ひろむにコード修正をしてもらったが、
それの影響なのか、一昨日自分が編集したコードをリモリポにpushしようとしたら下記のエラーが出た。
git add のところからコピペする。
(MyBogEnv) PS C:\Dev\DjangoMyBlog> git add .
(MyBogEnv) PS C:\Dev\DjangoMyBlog> git status
On branch main
Your branch is up to date with 'origin/main'.
Changes to be committed:
(use "git restore --staged <file>..." to unstage)
modified: blog/templates/blog/base.html
modified: "\346\224\271\345\226\204\343\202\242\343\202\244\343\203\207\343\202\242.txt"
(MyBogEnv) PS C:\Dev\DjangoMyBlog> git commit -m "Botstrap導入②（記事一覧画面の改善）" [main 3444716] Bootstrap導入②（記事一覧画面の改善）
2 files changed, 61 insertions(+), 26 deletions(-)
(MyBogEnv) PS C:\Dev\DjangoMyBlog> git push origin main "
To https://github.com/Hase777/MyBlog-Django.git
! [rejected] main -> main (fetch first)
error: failed to push some refs to 'https://github.com/Hase777/MyBlog-Django.git'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
(MyBogEnv) PS C:\Dev\DjangoMyBlog>
昨日も忘れてて、またpushできなかったので、
今日はこれを解決しよう。
【調査と実装】
エラー表示とヒントのところを見る。
「エラー：プッシュに失敗しました。
ヒント：リモリポにあなたのローカルにないものが含まれるため更新は拒否されました。
これは大抵、他のリポジトリが同じRefにpushしたことが原因で起こります。
ですのでまずはgit pullなどでリモリポの変更を統合し、その後Pushすることをおすすめします。
詳しくはgit push --helpの 'Note about fast-forwards'をお読みください。」
要するにひろむがリモリポにpushしたので競合してるから、pullするなどして、ひろむの変更を反映させてからpushしてね、ということかな。
エラーをぐぐり作業してく。
色々な情報が出てくるがgit pull origin main で最新のリモリポをローカルに引っ張り、ローカルで手作業で競合解消し、pushするみたい。
さっそくやっていく。
まずはgit pull origin mainコマンド
(MyBogEnv) PS C:\Dev\DjangoMyBlog> git pull origin main
remote: Enumerating objects: 50, done.
remote: Counting objects: 100% (50/50), done.
remote: Compressing objects: 100% (24/24), done.
remote: Total 40 (delta 14), reused 38 (delta 12), pack-reused 0
Unpacking objects: 100% (40/40), 10.78 KiB | 72.00 KiB/s, done.
From https://github.com/Hase777/MyBlog-Django
* branch main -> FETCH_HEAD
ca0402c..473bff1 main -> origin/main
Auto-merging 改善アイデア.txt
CONFLICT (content): Merge conflict in 改善アイデア.txt
Removing config/pycache/wsgi.cpython-39.pyc
Removing config/pycache/urls.cpython-39.pyc
Removing config/pycache/settings.cpython-39.pyc
Removing config/pycache/init.cpython-39.pyc
Removing blog/templatetags/pycache/blog.cpython-39.pyc
Removing blog/migrations/pycache/init.cpython-39.pyc
Removing blog/migrations/pycache/0002_auto_20210810_2220.cpython-39.pyc
Removing blog/migrations/pycache/0001_initial.cpython-39.pyc
Removing blog/migrations/init.py
Removing blog/migrations/0002_auto_20210810_2220.py
Removing blog/migrations/0001_initial.py
Removing blog/pycache/views.cpython-39.pyc
Removing blog/pycache/urls.cpython-39.pyc
Removing blog/pycache/models.cpython-39.pyc
Removing blog/pycache/forms.cpython-39.pyc
Removing blog/pycache/apps.cpython-39.pyc
Removing blog/pycache/admin.cpython-39.pyc
Removing blog/pycache/init.cpython-39.pyc
Automatic merge failed; fix conflicts and then commit the result.
と出た。
次にgit statusで状況確認した
(MyBogEnv) PS C:\Dev\DjangoMyBlog> git status
On branch main
Your branch and 'origin/main' have diverged,
and have 2 and 6 different commits each, respectively.
(use "git pull" to merge the remote branch into yours)
You have unmerged paths.
(fix conflicts and run "git commit")
(use "git merge --abort" to abort the merge)
Changes to be committed:
modified: .gitignore
deleted: blog/pycache/init.cpython-39.pyc
deleted: blog/pycache/admin.cpython-39.pyc
deleted: blog/pycache/apps.cpython-39.pyc
deleted: blog/pycache/forms.cpython-39.pyc
deleted: blog/pycache/models.cpython-39.pyc
deleted: blog/pycache/urls.cpython-39.pyc
deleted: blog/pycache/views.cpython-39.pyc
deleted: blog/migrations/0001_initial.py
deleted: blog/migrations/0002_auto_20210810_2220.py
deleted: blog/migrations/init.py
deleted: blog/migrations/pycache/0001_initial.cpython-39.pyc
deleted: blog/migrations/pycache/0002_auto_20210810_2220.cpython-39.pyc
deleted: blog/migrations/pycache/init.cpython-39.pyc
deleted: blog/templatetags/pycache/blog.cpython-39.pyc
deleted: config/pycache/init.cpython-39.pyc
deleted: config/pycache/settings.cpython-39.pyc
deleted: config/pycache/urls.cpython-39.pyc
deleted: config/pycache/wsgi.cpython-39.pyc
Unmerged paths:
(use "git add <file>..." to mark resolution)
both modified: "\346\224\271\345\226\204\343\202\242\343\202\244\343\203\207\343\202\242.txt"
と出た。
改善アイデアリスト.txtの競合解消をしなきゃっぽい（,gitignoreも競合してたけどGitのほうで自動修正されたのか。。？）
Deleteのところはよく分からずなんか怖い気もするが、まあ気にせずいく笑
VSCodeで改善アイデアリスト.txtを開いたら、コンフリクト解消用画面になっていた。
手動でコンフリクト解消し、git add、git commit、git pushする。
(MyBogEnv) PS C:\Dev\DjangoMyBlog> git add . "
(MyBogEnv) PS C:\Dev\DjangoMyBlog> git status
On branch main
Your branch and 'origin/main' have diverged,
and have 2 and 6 different commits each, respectively.
(use "git pull" to merge the remote branch into yours)
All conflicts fixed but you are still merging.
(use "git commit" to conclude merge)
Changes to be committed:
modified: .gitignore
deleted: blog/pycache/init.cpython-39.pyc
deleted: blog/pycache/admin.cpython-39.pyc
deleted: blog/pycache/apps.cpython-39.pyc
deleted: blog/pycache/forms.cpython-39.pyc
deleted: blog/pycache/models.cpython-39.pyc
deleted: blog/pycache/urls.cpython-39.pyc
deleted: blog/pycache/views.cpython-39.pyc
deleted: blog/migrations/0001_initial.py
deleted: blog/migrations/0002_auto_20210810_2220.py
deleted: blog/migrations/init.py
deleted: blog/migrations/pycache/0001_initial.cpython-39.pyc
deleted: blog/migrations/pycache/0002_auto_20210810_2220.cpython-39.pyc
deleted: blog/migrations/pycache/init.cpython-39.pyc
deleted: blog/templatetags/pycache/blog.cpython-39.pyc
deleted: config/pycache/init.cpython-39.pyc
deleted: config/pycache/settings.cpython-39.pyc
deleted: config/pycache/urls.cpython-39.pyc
deleted: config/pycache/wsgi.cpython-39.pyc
modified: "\346\224\271\345\226\204\343\202\242\343\202\244\343\203\207\343\202\242.txt"
(MyBogEnv) PS C:\Dev\DjangoMyBlog> git commit -m "コンフリクト解消"
[main 7b30c82] コンフリクト解消
(MyBogEnv) PS C:\Dev\DjangoMyBlog> git push origin main
Enumerating objects: 31, done.
Counting objects: 100% (27/27), done.
Delta compression using up to 8 threads
Compressing objects: 100% (15/15), done.
Writing objects: 100% (17/17), 2.98 KiB | 2.98 MiB/s, done.
Total 17 (delta 11), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (11/11), completed with 6 local objects.
To https://github.com/Hase777/MyBlog-Django.git
473bff1..7b30c82 main -> main
無事push成功！！
Gitよくできてる～～～
リーナストーバルズさんすごいわ。
この勢いで、タイムゾーン変更のプルリクの承認とマージ作業もやっていく。
「git hub プルリクエスト 承認」でぐぐると下記記事がヒット
https://howpon.com/5895
これに従ってやっていく！
まずはプルリク画面に行き、
右側のReviewersの歯車マークから自分を選ぶ。
ページを更新すると右上に「Add your review」という緑色のボタンが現れるので押す。
レビュー用ページに移動する。
右上の「Review changes」をクリックし、「Comment」「Approve」「Request changes」から選ぶ。
これで承認完了。
プルリクのConversationタブに戻ってくる。
これで「Maerge pull request」をすれば完了なのだが、ボタンが無効化されている。
見てみると今回は,gitignoreで競合が発生していたみたい。「Resolve conflict」を押す。
db.sqlite3
blog/migrations/*
<<<<<<< feature/time_zone
*/__pycache__/*
=======
*/__pycache__/*
*/*/__pycache__/*
>>>>>>> main
とある。書き方は一緒だ。
db.sqlite3
blog/migrations/*
*/__pycache__/*
*/*/__pycache__/*
に修正し、「Mark as resolved」をクリック。
「Commit merge」をクリック。
またConversationタブに戻ってくる。
今後は「Maerge pull request」ボタンが有効になっている！^^
押す。
最終確認が出るので「Confirm merge」を押して完了！
Pull request successfully merged and closed
You’re all set—the feature/time_zone branch can be safely deleted.
と表示され、横に「Delete branch」ボタンも表示されている。
基本的にマージしたらすぐ削除するのが慣例なのかな。
取り敢えず今回は残しておこう。
これでプルリクの承認＆mainへのマージ完了！
そして再度自分のローカルリポジトリを最新状態にするため、git pull origin mainをする。
終わったあああ～～～^^
今日はかなりGitの知識が増えた！
やっぱり複数でやると勉強効率が良いわ。
ひろむに感謝！
◆【12日目】改善リストをignoreに【毎日改善チャレンジ】
作成日: 2021年8月21日19:09
【改善の詳細と着想の背景】
ひろむとの共同開発において、タスク管理を「改善アイデアリスト」というテキストで管理しようとしたが、
それだと同じタスクに取り組んでしまったり、改善アイデアリスト.txt自体が毎回競合してしまうので、
タスク管理は別の方法でやる方向に。
ということで改善アイデアをgitignoreに追加する。
【調査と実装】
改善アイデアリスト.txtを.gitignoreに追加し、add、commit、push
これは成功した。
しかし、Githubからは消えてない。
あー前にもあったキャッシュ問題だ。
前と同じ方法でキャッシュを消そうと
git rm -r --cached 改善アイデアリスト.txt
を実行すると
fatal: pathspec '改善アイデアリスト.txt' did not match any files
と出た。
あ、もしかして日本語だからダメなのかな、
以前もコマンドプロンプト上で勝手に文字変換されたと思われるときがあったし。
と思い、その部分をコピペして再実行
git rm -r --cached \346\224\271\345\226\204\343\202\242\343\202\244\343\203\207\343\202\242.txt
しかし、またエラー。
fatal: Invalid path '/346': No such file or directory
「そんなファイルないよ」とのこと。
再度その記事を見たら、
を迷ったが、
git rm -r --cached .
で全てのキャッシュを削除できるみたい。
これを実行してみる。
(MyBogEnv) PS C:\Dev\DjangoMyBlog> git rm -r --cached .
rm '.gitignore'
rm '.vscode/settings.json'
rm 'blog/__init__.py'
rm 'blog/admin.py'
rm 'blog/apps.py'
rm 'blog/forms.py'
rm 'blog/models.py'
rm 'blog/templates/blog/base.html'
rm 'blog/templates/blog/category_and_tag_list.html'
rm 'blog/templates/blog/comment_form.html'
rm 'blog/templates/blog/post_detail.html'
rm 'blog/templates/blog/post_list.html'
rm 'blog/templates/blog/search_form.html'
rm 'blog/templatetags/blog.py'
rm 'blog/tests.py'
rm 'blog/urls.py'
rm 'blog/views.py'
rm 'config/__init__.py'
rm 'config/asgi.py'
rm 'config/settings.py'
rm 'config/urls.py'
rm 'config/wsgi.py'
rm 'manage.py'
rm 'static/blog/document.png'
rm 'static/blog/whitebear.jpg'
rm '改善アイデア.txt'
ふむ。なんか全ファイルが表示されているが、キャッシュが消えるだけだから問題ないだろう。
コミット＆プッシュする。
(MyBogEnv) PS C:\Dev\DjangoMyBlog> git commit -m "改善アイデアリストがgithubから消えないのでキャッシュを全削除して再度コミット"
[main a5bdaed] 改善アイデアリストがgithubから消えないのでキャッシュを全削除して再度コミット
26 files changed, 636 deletions(-)
delete mode 100644 .gitignore
delete mode 100644 .vscode/settings.json
delete mode 100644 blog/__init__.py
delete mode 100644 blog/admin.py
delete mode 100644 blog/apps.py
delete mode 100644 blog/forms.py
delete mode 100644 blog/models.py
delete mode 100644 blog/templates/blog/base.html
delete mode 100644 blog/templates/blog/category_and_tag_list.html
delete mode 100644 blog/templates/blog/comment_form.html
delete mode 100644 blog/templates/blog/post_detail.html
delete mode 100644 blog/templates/blog/post_list.html
delete mode 100644 blog/templates/blog/search_form.html
delete mode 100644 blog/templatetags/blog.py
delete mode 100644 blog/tests.py
delete mode 100644 blog/urls.py
delete mode 100644 blog/views.py
delete mode 100644 config/__init__.py
delete mode 100644 config/asgi.py
delete mode 100644 config/settings.py
delete mode 100644 config/urls.py
delete mode 100644 config/wsgi.py
delete mode 100644 manage.py
delete mode 100644 static/blog/document.png
delete mode 100644 static/blog/whitebear.jpg
delete mode 100644 "\346\224\271\345\226\204\343\202\242\343\202\244\343\203\207\343\202\242.txt"
(MyBogEnv) PS C:\Dev\DjangoMyBlog> git push origin main
Enumerating objects: 3, done.
Counting objects: 100% (3/3), done.
Delta compression using up to 8 threads
Compressing objects: 100% (1/1), done.
Writing objects: 100% (2/2), 300 bytes | 300.00 KiB/s, done.
Total 2 (delta 0), reused 0 (delta 0), pack-reused 0
To https://github.com/Hase777/MyBlog-Django.git
95bcfc9..a5bdaed main -> main
そして、Githubを確認してみる。。。
！！！！！
ぜ ん ぶ き え て る や ん け ＼(＾o＾)／
なんでーーー笑
と、ここにきて気づく。
最初に実行した、
git rm -r --cached 改善アイデアリスト.txt
は正しくは
git rm -r --cached 改善アイデア.txt
の間違えだった。。笑
日本語とかでなく、単にそれが問題だったか。。
ということで、Githubにファイルを復旧することにトライ。
これも良い練習になるだろう。
まずローカルのほうはどうなっているか確認。
ローカルは全部残っているが、VSCode上で全てのファイルに「U」の文字が入っている。
VS Codeでは以前も「M」と表示されたりしていたがスルーしていたので、これを期に調べてみる。
A added 新規追加
M modified 変更あり
U untracked gitが未追跡(新規作成、add前)
D deleted 削除済み
C conflict コンフリクト発生中
R renamed ファイル名変更済み
S submodule サブモジュール
なるほど。
Git未追跡ということは、再度git addして、commit、pushすれば解決するのかもしれないな。
けれど、今回は復旧作業の勉強する良い機会なので、それについて調査しよう。
ローカルリポジトリ、リモートリポジトリ、add, commit, pushの概念をしっかり理解していない気がしたので、
紙に書いて整理してみた。
まず自分のパソコンで管理している領域。
そこからaddすることで、キャッシュゾーン（Gitローカル管理領域①）に入り、
Commitすることでローカルリポジトリ（Gitローカル管理領域②）に入り、
PushすることでGitリモートリポジトリ管理領域に入る
という感じ、と理解した。
つまり、今回「git rm -r --cached . 」をした時に何が起こったかというと、
キャッシュゾーンにあったファイルを全て削除し、
キャッシュゾーンが空の状態でcommit&pushしたからGithubが空になってしまったということだ。
よってこれを解決するためには、
キャッシュゾーンにあったファイルを全削除した動作を取り消し、
キャッシュゾーンに全てのファイルがある状態に戻ったらCommit＆pushすればよい。
「git rm -r --cached . 取り消し」でぐぐる。
pushの取り消し、commitの取り消し、addの取り消しなど、
場合によって色々と使うコマンドが違うようだ。む。。。難しい。
時間がかかりそうなので、取り敢えず今回はgit add . して、commitして、pushする。
一応これでGithubには全ファイル戻った。。。よかった。。
ちなみに今回調べた中で、どの記事でも「git rm --cached 」と書かれていた。
しかし自分が今回したのが「git rm -r --cached 」。
「-r」は何だろう？
ということで調べたら
「-r オプションは「Recursive」の頭文字を取ったものです。 Recursive モードで git rm を実行すると、ターゲット ディレクトリとそのディレクトリのすべてのコンテンツが削除されます。」
とのこと。
なるほど分からん。
「先頭のディレクトリ名が指定されている場合、再帰的な削除を許可します。」
うーん。。
「コマンドのオプションで指定したディレクトリの中のファイルが全てインデックスから削除される。」
要するに、指定したディレクトリ全体を消すためのオプションて感じか。
まあ通常使いならオプションなしで良さげ。
改善アイデア.txtが再度アップされてしまったので、再度キャッシュ削除からやる。
今度はスペルミスしないぞ。
-rオプションも無しでやる。
git rm --cached 改善アイデア.txt
を実行すると、
rm '改善アイデア.txt'
無事にできたみたい。やっぱりただのスペルミスだったのね。
コミット＆プッシュ。
無事にGithubからもファイルが消えた。
パソコンの「DjangoMyBlog」内のフォルダーからも「改善アイデア.txt」を削除（別の場所に移動）しておく。
ふう、疲れたぜ。時間がかかってしまった。
プライベートも落ち着いたので、明日からエンジン再始動してがんばっていこう！
取り敢えず5時起きで朝活！
◆【13日目】トップのデザイン改善【毎日改善チャレンジ】
作成日: 2021年8月30日7:08
【改善の詳細と着想の背景】
さぼりすぎいいい。
ワーキングツリーの理解とか難しいところを理解しようとしたら数日さぼってしまった。
毎日簡単でもいいからちょこっとが大事。
ということで、今日はちょこっとデザインをいじる。
【調査と実装】
トップページ（記事一覧ページ）で何となく見づらいと思い、
カードに影を付けれないか調査。
Bootstrapの実装の調査の作法はいまいち正解が分からない
色々調べて下記で出来そう
shadow p-3 mb-5 bg-white rounded
<div class=card>
を下記に書き換え
<div class="card shadow p-3 mb-5 bg-white rounded">
うまくカードに影ができた！^^
次に記事タイトルの背景色のオレンジがどうしようもなくダサいので変更しようと思い、
色の変更について調べた。
出来ればテーマカラー以外の色を設定したかったが、CSSでの上書き、SCSSの活用、ミックスインとか色々出てきて、
面倒くさくなり、諦めてテーマカラーのライトグレーにした。
オレンジよりはだいぶ良い。
取り敢えず今日はこれで終わり！
毎日ちょこっと！
