Webページ制作過程 その１
眠れなかったのでこの前かった参考書のさわりだけを読んで気になったことを書き出してみます
Webページ作るのに買った本はこれになります。
本著ではスタンダードレイアウト、グリッドレイアウト、シングルページレイアウトの作り方が載っててですねー。 パラパラめくって出来上がりWebページがよかったので購入しちゃいました。
これを参考にしながらシングルページレイアウトでWebページを作るぞーがんばりますぞー
といってもどんなWebサイトにしようとか全然考えてないんですよね。 GitHubで公開しちゃうので本に載ってるものをそのままつくるのもどうなんだろう的な
いや公開なんか考えないで黙って一人でシコってろって言われたら何も言い返せないですはい
とりあえず本書の最初のほうに載ってたコーディングの注意を理解するために書き出し書き出し
- 要素名にスタイルを指定しない
- CSSのセレクタにIDではなくクラスを使用する
- IDは同ページの中では1回しか使えないので使いまわしができない
- スタイルの上書きが難しい。CSSの詳細度というスタイル適用の優先順位を決める仕組みのせいで取り回しがしずらいらしいです。
- HTMLとJavaScriptの影響範囲を分離する。
- リセットCSS・ノーマライズCSSを使う
にきれいにしちゃうスタイルシートってやつが各ブラウザで設定されてるらしいです。わー便利 。でもそれを消さないと自分の作ったWebページが特定のあるブラウザできれいに表示されても 他のブラウザじゃ上手に表示されないので、それを消すのがリセットCSSなのでそれを使うとよい
CSSの詳細度概念を個人的にうまく理解できていなかったけど、本書の解説はわかりやすかった 理解するのと使えるのは別物なのでまた触りながら覚えていく感じですがですが……
理解すれば使えるのではーとか思ったりしますが、仕組みを理解しても体におぼえこませないとダメなタイプなのです ゆっくりがんばるぞー
リセットCSSはなんぞやそんな便利なものがーって衝撃でした。 そんな初心者がこの本をやるのは早いみたいなアレがあるかもですが、まぁやってみてだめならだめで
とりあえず明日は全体をパラパラ読みながら気になったところを書き出す予定です。
GitHubに登録してWebページを公開する忘備録 その２
GitHubに登録してWebページを公開する忘備録 その２
※読みやすさ、わかりやすさは考えて書いていません。自分で見返す用です
GitHub登録まではこのサイトを見ながら進めてますー
昨日の続きからですー
GitHubに登録してWebページを公開する忘備録 その１ - 納戸の中から
まったりやっていきますー
【GitHubを使う（1） Gitコマンドでリポジトリをコピーする】
とりあえずClone or downloadをクリックして Use SSHをクリックします。 Clone with HTTPSという表示がClone with SSHに変わりました！
ところHTTPSとSSHの違いってなんぞや？ SSHは前回調べたときに
っていうのが分かったけれど
HTTPSは？ たしかWebページの頭についてるものよね HTTPはHTMLとかのコンテンツを送受信するときに使われるプロトコルで 最後のSはSSLという暗号方式つかってるよーっていう意味だったとおもうのだけれど
ここでHTTPSとSSHを切り替える意味とは？ ただ私のローカルにあるリポジトリからGitHubのリモートリポジトリへの アクセスを行うプロトコルが変わるってことだけなのかなぁ
よくわからないので調べ調べ
int128.hatenablog.com qiita.com
うーん、ここら辺のサイトかなーって思ったんですけど しっくりこなかったです。 HTTPS通信のほうが早いよーみたいな記事は何個か見つけたのですが 理由がよくわかんないなーって感じですね。 とりあえず放置で、、、 GitHubからリポジトリをクローン（複製）の通信を行うときに 暗号化の方法が二つ選べるよーって感じで理解しておきますですはい。
なんかわかりやすい記事とか本とかあれば教えてください（他力本願）
ってかこんなことばっかりやってるから全然進まない！ 今日もWebページ公開できない気がしてきたたた
次です次！
git開いてgit clone コピーしたURL でおりゃー！
無事ローカルリポジトリ（自分用のリポジトリ）にクローン（複製）できましたやったね
次にブランチ切ります。 なんだろう、ブランチを切るって個人的にパラレルワールド作ってる気分になるんですよね メインストーリがあって、最新のメインストーリがサブストーリに分岐して またメインストーリに合流する的な？
実際の開発だとサブストーリでしか物語（開発）すすまないですし メインストーリなんてうまく出来上がったサブストーリの集合体らしいですけどね
開発やったことないからよくわかんない てか開発やってたらこんなこと一人でやってない！ もっと別のことやってる！！
さて、 参考にしてる 【今日からはじめるGitHub 〜 初心者がGitをインストールして、プルリクできるようになるまでを解説】
の続きをみるとあとはgitを使ってコミット（作ったものを確定）して プッシュ（GitHubのリモートリポジトリに同期させて）してプルリク（みんなに見てもらえるようにする） するだけなのでWebページ作りにいこうかな
プルリクだすモノつくらなきゃプルリク出したくても出せないのではー
ちなみにgitの操作とかは以下のサイトを参考にしてちょっとお勉強したことがあります ほとんど忘れちゃってるけど・・・・・・
蛇足ですがGitの学習をどうやったかをまとめておきます。 は上二つのシェアスライドを見てから最後の「Gitをはじめからていねいに」をやりました
www.slideshare.net
こわくない Git from Kota Saito
www.slideshare.net
github.com
たぶんこれで何となくは理解できるー。 あとは実際に使わないとわかんないよねーって感じです
ということでとりあえずHTMLでtitleとかを適当に入れたページを用意します
はい、つくりました
じゃあtestリポジトリじゃ味気がないので新しいリポジトリを作ります 同様の手順でnandwebと名付けました
それでブランチを切っていきますー
ブランチの切り方は 最初は公開用ブランチと開発用ブランチの2本でやろうと思います。
とりあえずブランチの考え方としては以下をちょっと読んだ感じです。 www.atmarkit.co.jp
公開用のブランチ：master 開発用のブランチ：develop
まだページ数も１つですし、しばらくはこんな感じでいいかなと・・・・・・ 継ぎ足しでページ数増やしていくなら もっとちゃんとブランチ作ったほうがよさそうかなと感覚的におもうのですが 現状どんな感じにブランチを増やしていいかわからないのでこれでがんばります
がんばれ未来の私
はいはいということでこんな感じにブランチをきりーの
いろいろやってファイルをnandwebフォルダにいれーの
add ＆ commit ！
したら、 unable to auto-detect email address とでて、おっ？ あっ、testリポジトリには登録したけどこっちには登録してないや
まぁいいや、もう一度登録してcommitしてvimでコミットの説明しておわりおわり！
【GitHubへプッシュする】 おらーというわけでローカルリポジトリからリモートリポジトリにプッシュじゃ！
プルリクおくって適当にコメントうってマージすっぞ！
おらおら、これでWebページ見れるぞ！！！！ ってあれ、でない・・・なんでや・・・調べ調べ
2時間後
はあああみつけたああああ qiita.com
GitHubのリポジトリページ上で、[Setting]→[GitHub Pages]→[Source]で [master branch/docs folder]を指定しなきゃWebページ公開されないやんけ！！
うわああああ
ということで公開できました https://nandiro.github.io/nandweb/
個人的にまとめ
- ローカルdevelop -push-> リモートdevelop -marge-> リモートmaster -pull-> ローカルmasterの順でファイルを更新する
- Webページはmasterのdocsファイルに保存する
- Webページにアクセスをした際の初期画面はindex.html
- GitHubのSettingで設定を行わないとWebページは公開されない
って感じですかね…最後だけかなり大変でした……
ほかの部分はサイトみててふーんって感じでできました。 あんまり理解してないかもですが……
とりあえずはこのWebページをいろいろいじくりまわそうと思います。 GitHubのWebページはいろいろ制限がありそうなので手探り手探りって感じですかね
それではまたまたー
(2017/05/31)
GitHubに登録してWebページを公開する忘備録 その１
GitHubやるぞー
今日の目標：GitHub登録 Webページ公開
GitHub登録は以下を参考にしてすすめていくでっす
GitHub登録のまえにGit for Windowsを導入するでっす
ところでブログにスクショバシバシ張ってる人いるけど スクショとるの面倒じゃないのかな、 加工したりとか手間だよなぁって思っちゃう
みんなえらい。私は気分が乗ったらやるます
Gitをダウンロード、設定はめんどくさいので全部デフォルト ブログにのっけてる文章は一応PCでバックアップを取ってあるので 今回はそのフォルダ「zakki」をgit initします。
【環境の構築（1） ローカル環境でGitを使えるようにする】
git initをリポジトリを作成するって意味らしいけど リポジトリをよくわかってない感じです だってリポジトリはリポジトリだしみたいな感覚の人多そう。多そうであれ
個人的には共有を行っているファイルをリポジトリって感じでよんでるんですけどどうですかね 100％正しいことを言ってるつもりはないのでなんかあったら教えてください。
技術ブログとかやってる人って自分が言ってることがすべて正しい前提ではやってないとおもうのだけれど、 それでもバシバシいっぱい文章書けるのすごい 私は日本生まれ日本育ちのはずなのに文章書くのまるっと遅くてちんちくりんで 言葉普通に間違えるのでみんなほんとえらいなーって思う
【ユーザー名とメールアドレスを設定する】
とりあえずユーザ名とメールアドレスの設定 コピペで終了
【環境の構築（2） SSHの鍵を取得する】
ここでSSHのカギとはなんじゃらほいってなったので軽く調べ調べ
つまり通信暗号プロトコルってことかなって感じです。 暗号に関してはあんまり興味ないので、そういう暗号のプロトコルが必要だよーって ことでいいのかな
とりあえず生成鍵のパーミッションを読み込み書き込みのみに変更 chmod 600 ファイル名で変更ばしーん
・・・・・・
変更されないあれー(´・ω・`)なんでや
エラーメッセージないけど反応してくれない
-rw-r–r–のまんまや、なんでやAdmin以外でも読めてまう・・・・・・
とりあえず読み込み書き込みができるようにする前提だから放置でいいか・・・・・・ このPCほかの人使わないし・・・・・・ダメ？
そしてconfigをvimで開いて編集 vimは教養として少しだけやりましたけど、慣れないと普通のエディターより書くの遅くなっちゃいますね vim masterになるつもりはないのであとで表示するテキストエディタを変更しておかないとですねー
環境の構築（3） GitHubのアカウントを作成する さて、とりあえず個人的な設定は終わったからGitの設定はまるっと後にして GitHubの登録ちょちょいとします
ちょちょい
英語恐怖症で英語みると体調悪くなるゴミカスだったのでうへーってかんじでやりました 英語苦手とかなんでIT業界入っちゃったんだろうって感じですテヘペロ
ここでいったん休憩、Gitに関する自分の知識の再確認なり
とりあえずGitに対する知識としては みんなで使う共有ファイルがリモートリポジトリ 個人で使うファイルがローカルリポジトリ
基本的にローカルリポジトリでものを作って リモートリポジトリにプッシュ（アップロード申請） 問題がなさそうだったらコミット（変更確定） もし、リモートリポジトリと差分があった場合、 差分修正して再プッシュみたいな感じなんですかね
あとは開発のバージョンや開発場所に関してブランチを切る必要がある 大きな開発プロジェクトだと一人で全部の開発を行うことができないため 複数人でプログラミングする部分を分ける必要がある 一気に同じファイルでコミットしちゃったりしたら 競合（同じファイルを同時に編集してしまった時のズレ）は起きないだろうけれど プログラム同士で影響が出ちゃってなんか変なバグが起きるから（だと思ってる） ブランチって大切だよね。みたいな感じなのかな
下のサイトを流し読みして、こんな感じかなーって思ったことをメモってるだけなので 間違ってたら優しく叱ってください。
うーん、それにしてもカタカナが多くて大変ですです
一度むかしちょろっとやったことあるのですが、いやぁ、
全く覚えてないですね 原理はなんとなーくって感じです。 実際に触ってないとほんとうに使い物にならないのですなーがんばりまん まぁ一人でGit使ってもバージョン管理にしかならないですけどね…… ソースコードとか書いたら誰かがコードレビューとかしてくれて リファクタリングとかしてくれるのかしら、そんなことされたらテンションダダ上がりですね
まずソースコードを書く段階に至ってないという ま、やってればわかってくるよねーうんうん
【リポジトリを作成する】
初めの画面にstart a projectと書いてあるのでおりゃー
testって名前つけてREADME.md作りますかにチェックをつけておりゃー
testリポジトリが無事完成。ずっと触ってこなかったけど作るまでは結構簡単なのねー
【GitHubに公開鍵を登録する】
ここでちょっとつまづきました
keyにid_rsa_github.pubの中身を入力することがわからなくてつまづき id_rsa_github.pubをvimで開いてしまったがゆえにコピーの仕方でつまづきました
躓いたことは数行で書けるのに実際にかけた時間は数十分、うえぇ・・・・・・
早くほかのエディターで開けるようにしなきゃなぁ
no such identity
なんでやっておもったら.ssh/configのIdentityFileがまちがってました
Hi nandiro! You’ve successfully authenticated, but GitHub does not provide shell access. Connection to github.com closed.
わーいSSH接続確認できたーやったー
とりあえずいったん休憩です。
ここまで来るのに大体3時間ぐらいですかね これ書きながらなので結構時間かかりましたん……
要領いい人はもっとちゃんとやるんだろうなああああいいなああああああ
つづき
Atomの設定
日本語入力エディターとソースコード書くようエディターを分けようと思うよー
日本語はAtomつかって書こうと思うので今日はそれの設定。 GitHub導入とか以前の環境設定でしたわ
ソースコード書くようのVisual Stadio CodeはGitHub導入してから 設定いじくりまわそうかなー
それで今書いてるんですけど、とりあえずほしい機能としては ・パッと開ける ・英語読まなくてもよい ・見やすい文字をかければよい
ぐらいなのでちゃちゃっとやっちゃう感じで設定いじります。
とりあえず日本語化
「File」→「Setting」→installから japanese-menu で調べてでてきた一番上のものをインストールどーん インストールしてからしばらく放置で日本語化になりました。
最初インストールしてすぐに日本語にならなくてずっと原因しらべてたんですけど なんか10分ぐらい放置してから再起動したら日本語になりました。 再現性とか試すの面倒なので放置です。
次に文字設定
背景黒地に白文字で日本語書きたくないので 「ファイル」→「環境設定」→「Themes」→UI ThemesよりAtom Lightに変更
背景白くなったうれしい。フォントも見やすいうれしい。 えっ、てかこれなんのフォントだ。すごい書きやすい見やすいうれしいぞ
ということでフォントはそのまま、日本語フォントの名前調べても出てこなかった。 ほかのエディターの日本語フォントもこれにしたいのになー 知ってる人がいれば教えてください
最後に初期表示画面に出てくる奴らをもう表示しないーってして完成です。 とりあえずAtom開いたらすぐかけるようになったのでまんまんぞくです。
Markdownかけるようにしたりとかはまたほかのパッケージ拡張を追加でやるっぽ まぁ書くときになったら追記しますね
（2017/5/30）
と思ってファイルに突っ込んだらプロジェクト管理ができるツリービューが Atomの左側にでて、んぎゃってなりました。
13.3画面をメモ書き用Atomとブラウザで半分こしてるので、 このツリービューの存在はうれしいのですが常に表示し続けるの邪魔や… コマンドで何か表示切替できたらなーって感じで調べ調べて以下のサイトにたどり着きまん
といったところで「Ctrl＋￥」でできるらしいぞと ほかにもいろんなショートカットがあってキャー便利ーうれしー
やっぱりネットの先人たちは偉大だなー現代って偉大だなー検索すればなんでもでてくるなー
といったところで本日のAtom設定は終わり終わりーまたあとでがんばるぞー てかGit設定しないと前回との差分更新履歴残らないぞーはやくやらねばだぞー
（2017/5/30）
