webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

git GUI

windows コマンドプロンプトから、「git gui」と入力。

そうするとgit GUIが出てきます。

f:id:ohta-felica:20170720223148p:plain

 

 

リモートリポジトリから、クローンを作成します。

f:id:ohta-felica:20170720223552p:plain

 

 

「target directory」は事前に作成するのでなく、この操作によって(clone)によって新たに作成される。

f:id:ohta-felica:20170720223740p:plain

 

 

「clone」の操作が終わると下のような画面になります。

f:id:ohta-felica:20170720223909p:plain

 

 

f:id:ohta-felica:20170720224033p:plain

 

 

「browse masters files」マスターブランチのファイルをブラウズします。

f:id:ohta-felica:20170720224201p:plain

 

ローカルに作ったリポジトリの中のすべてのファイルが表示されます。

適当なファイルの、ファイル名の部分をクリックしてみます。

f:id:ohta-felica:20170720224416p:plain

 visualize masters history

f:id:ohta-felica:20170720224711p:plain

 

f:id:ohta-felica:20170720224814p:plain

 SHA1 とは何ぞや?

f:id:ohta-felica:20170720225144p:plain

 

 

画面レイアウトのまま印刷ができない

、、というご指摘が。

あまり考えたことなかったですね。

キットそんなに大変なことにはならない、と感じていたので調べてみると思いのほかサクッと片付きました。よかった!

下の記事を参考に、PC用のスタイルシートを「screen」から「print, screen」に変更しました。こうして、とりあえずは大きな崩れが解消しました。

 

<link rel="stylesheet" href="./common/css/style_pc.css" media="print, screen and (min-width:768px)">
<link rel="stylesheet" href="./common/css/style_sp.css" media="screen and (max-width:767px)">
<link rel="stylesheet" href="./common/css/common.css">
<link rel="stylesheet" href="./common/css/top_pc.css" media="print, screen and (min-width:768px)">
<link rel="stylesheet" href="./common/css/top_sp.css" media="screen and (max-width:767px)">

 

 きちんとA4にプリントできるようにするにはもうひと手間が必要です。

/* print setting */
@media print {
body {
-webkit-print-color-adjust: exact;
top:0 !IMPORTANT;
left:0 !IMPORTANT;
width:200mm !IMPORTANT;
height:290mm !IMPORTANT;
}
}

 


レスポンシブで制作したWebサイトを印刷しようとしたら、レイアウトが崩れてる!

なんてこと間々ありますよね。
印刷前提のページであれば専用のcssを用意したりしますが、そうでなければ印刷のことはあまり考えませんよね。
で、最近はほとんどレスポンシブで制作していくので、いざ出来上がったサイトをお客さんが検証して印刷プレビューをしようものなら、なんじゃこりゃとなるわけです。
レスポンシブで作ったサイトが全てそうなるわけではないのですが、cssの書き方によっては印刷時にレイアウトが崩れたりします。

今回は下記の記述が原因でした。

1
@media only screenand (min-width768px) { }

レスポンシブ対応するときのよくあるメディアクエリの書き方ですよね。
この「only screen」ってやつが悪さをしてます。
読んで字の如く、「画面のみ」指定になっているんです。だから印刷時にはこのスタイルが無視されてしまってました。
なので記述を修正です。

1
@media printscreenand (min-width768px) { }

これで印刷時にもスタイルが適用されます。
もちろん印刷用CSSを用意する場合は「only screen」でないとバッティングするので、状況に応じたメディアクエリを記述しましょう。
また、min-width,max-width の指定にも注意してください。ここを考慮せず一律「print,screen」としてしまうと、モバイルだけに適用したいスタイルまで反映されてしまい、想定と異なるレイアウトになってしまいます。

ここまでやってプレビューで確認していると、ところどころ画像が出てないなーってこともよくありますよね。
原因は単純で、ブラウザのデフォルト設定が「背景の色・画像を印刷しない」となっているためです。
余計なインクを消費しない省エネ設定なんですかね?基本どのブラウザでもデフォルトはこうなっています。
そんな時はこの一文を。

1
-webkit-print-color-adjust: exact;

ただし、このスタイルはChrome用にしかなく、FirefoxSafariでは用意されていないので、これらの場合は他の方法で対応しなきゃです。「display:list-item」を利用するとか。
また、IE8もいうこと聞いてくれません。

上記をいれて対応終わったーと思ったら、いつものあいつがやってきます。そうIE君です。。。
ご存じのとおり、IE8はそのままではレスポンシブで制作したサイトがきれいに表示されません。
そこで多くの方は対応が簡単なJS実装をされているかと思いますが、これが印刷までは対応していなかったりします。
なので印刷まで考慮されたJSに切り替えます。今回は「html5shiv-printshiv.min.js」を適用しました。

以上で対応は完了です。

今回のケースはあくまで一例です。もちろん他に原因があることもありますし、対応方法ももっといいものがあるかもしれません。
ただ他の箇所に影響を与えず対応工数もそんなにかけたくないってときには、この方法を試してみては如何でしょうか。

 

Humberger Menu 自己流備忘録

某案件のため、(PC SPの切り替えで要素の移動が激しいソースだった、、、)時に作ったハンバーガーメニュー。作った日の備忘録。

ハンバーガーメニューのコーディングは昔から大嫌いです、、、がよく作らされます。

 

1.

まず外側の正方形を作る。今回は<p> id="btn"

<a>が付いていないので、cursor: pointer;を忘れずに。

3本線の位置指定のためにposition: relative;も忘れずに。

 

header #btn{
width: 36px;
height: 36px;
border: 2px solid #91be1e;
border-radius: 4px;
position: relative;
cursor: pointer;
}

 

2.

[1]で作ったp要素の内側に <span> id="hum"を作る。

これは三本のうちの真ん中の横棒。

一番上は:before

一番下は:afterで作る。

今回は height を指定せず、border で線幅を決定してみました。

こうしておくと上下の線の位置指定が若干楽かもしれない。(真ん中に対して線対称にするには:beforeのtopと:afterのbottomの値が等しくなるから)

線幅は上下のみ(線の厚みだけ)で、左右はいらないのでborder-width: 2px  0; と指定。

このようにして線幅4pxの横線を作ました。


header p#btn>span#hum{
display: block;
width: 30px;
height: 0px;
border: solid red;
border-width: 2px 0;
border-radius: 2px;
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
transition: 0.2s;
}
header p#btn>span#hum:before{
display: block;
content: "";
width: 30px;
height: 0px;
border: solid red;
border-width: 2px 0;
border-radius: 2px;
position: absolute;
top:-18px;
bottom: 0;
left: 0;
margin: auto;
transition: 0.2s;
}
header p#btn>#hum:after{
isplay: block;
content: "";
width: 30px;
height: 0px;
border: solid red;
border-width: 2px 0;
border-radius: 2px;
position: absolute;
top:0;
right: 0;
bottom: -18px;
left: 0;
margin: auto;
transition: 0.2s;
}

 

3.

jquery

$('#btn').on('click',function(){
$('#hum').toggleClass('click');

と「.click」クラスを付与するので、以下のように記述。

このとき上の「赤」と「下」の青が一致していないとうまく動きません。

セレクトの書き方を共通にしておくこと。(ロスタイム15分、、、)


header p#btn>#hum.click {
border-color: white;
}
header p#btn>#hum.click:before {
top:0;
transform: rotate(45deg);
}
header p#btn>#hum.click:after {
bottom: 0px;
transform: rotate(135deg);
}

 

4.

globalNavは最初、見えないようにしておくので display: none;

headerバーの高さ分だけ下に表示したいので、position: fixedで top :(header barの高さの)で指定する。

#globalNav{
display: none;
width: 100%;
overflow: hidden;
position: fixed;
top:72px;
left: 0;
right: 0;
background-color: #fff;
z-index: 100;
}

 

5.

最後にJSのソースを記録しておきます。

 display: noneで初めからナビゲーションは表示されていない。

だから$('#globalNav').hideはいらないと思う。

#btnをクリックするたびに 、、、

1. #humにclick クラスが付いたり外されたりのトグル、と

2. #globalNavがslideDownとslideUpのトグルが起きる。

これが前半。

globalNavのliを選択してクリックすると

1. #humのclick クラスが外される。

2.#globalNavがslideUpする。

これが後半。

<script>
$(function() {
$('#btn').on('click',function(){
$('#hum').toggleClass('click');
$('#globalNav').slideToggle(200);
return false;
});
$('#globalNav>li').click(function(){
$('#hum').removeClass('click');
$('#globalNav').slideUp(200);
});
});
</script>

 

6.

ちなみにHTMLは、、、

<!-- for SP only
------------------------------------------------------------>
<div class="sp right upperRight">

<!-- sp HumbergerMenu-->
<p id="btn" class="sp">
<span id="hum"></span>
</p>
<!-- btn -->
</div>
<!-- sp upperRight -->

<!-- SP globalMenu -->
<ul id="globalNav" class="sp">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<!-- end sp globalMenu -->

 

追記

header バーもposition: fixed;にして、(値はglobal Navと同じ値)すぐ下にあるbx-sliderとの間に白い隙間ができて時間をかけてしまった。

resetで img:vertical-align: bottom; としていたのが原因らしい。

img: vertical-align: baseline; にしたら解決した。

ハンバーガーメニュ

ハンバーガーメニューの実装 (by yachin29)

<nav>
<div id="btn">
<
span id="hum"></span>
</
div> <ul> <li><a href="#">Home</a></li> <li><a href="#">Shop</a></li> <li><a href="#">Collections</a></li> <li><a href="#">Philosophy</a></li> <li><a href="#">Press</a></li> <li><a href="#">About</a></li> </ul> </nav>

スタイルシート

@media screen and (max-width:767px){
#btn {
width: 40px;
height: 40px;
border: 1px solid #000;
border-radius: 4px;
position: relative;
margin-left: 20px;
}
#hum {
  display: block;
  width: 30px;
  height: 2px;
  background: #000;
  position: absolute;
  top:0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  transition: 0.2s;
}
#hum:before {
  display: block;
  content: "";
  width: 30px;
  height: 2px;
  background: #000;
  position: absolute;
  top:-20px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  transition: 0.2s;
}
#hum:after {
  display: block;
  content: "";
  width: 30px;
  height: 2px;
  background: #000;
  position: absolute;
  top:0;
  right: 0;
  bottom: -20px;
  left: 0;
  margin: auto;
  transition: 0.2s;
}

#hum.click {
  background: transparent;
}
#hum.click:before {
  top:0;
  transform: rotate(45deg);
}
#hum.click:after {
  bottom: 0;
  transform: rotate(135deg);
}

nav ul {
  width:100%;
  position: fixed;
  top: 60px;
  padding-left: 10px;
  background:#f0ede7;
  display: none;
}
nav li {
  float:none;
  width:100%;
  line-height: 30px;
}
nav li a {
  text-align:left;
}
nav li a:hover {
  border-bottom: none;
  padding-bottom:0;
}

header.fixed h1 {
display: none;
}
}
// JavaScript Document

$(function() {
  if(window.innerWidth > 767){
				$(window).scroll(function() {
					if ($(window).scrollTop() > 10) {
						$('header').addClass('fixed').slideDown(900);
					} else {
						$('header').removeClass('fixed');
					}
				});
  }
$('#btn').on('click touchstart',function(){
	$('#hum').not(':animated').toggleClass('click');
	$('nav ul').not(':animated').slideToggle(200);
	});
});

修正後のjQuery

// JavaScript Document

$(function() {
  if(window.innerWidth > 767){
				var $header = $('header');
				$(window).scroll(function() {
					if ($(window).scrollTop() > 160) {
						$header.addClass('fixed');
					} else {
						$header.removeClass('fixed');
					}
				});
  }
$('#btn').on('click touchstart',function(){
if($(window).innerWidth() <= 767){
  $('#hum').not(':animated').toggleClass('click');
  $('nav ul').not(':animated').slideToggle(200);
  };
});
$(window).resize(function(){
  $('nav ul').hide();//スマホの時
if($(window).innerWidth() > 768){ 
 $('nav ul').show();//タブレット以上の時
 $('#hum').removeClass('click');//PCから戻る時に邪魔な.clickを削除するため
 } 
});
});

display:none, visibility:hidden の違い

他のサイトからの転載。よくわかりました!


visibility:hiddenは名前の通り、要素はあるけど見えない状態。
display:noneは、要素も取得されず、完全にその場にない扱い。

検証準備

html

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>difference between visibility hidden and display none</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="one" class="box"></div>
    <div id="two" class="box">
        <h3>Visibility:hidden</h3>
        エレメント描画されず。けど、表示エリアは「残る」。背景色で塗りつぶした感じ。
    </div>
    <div id="three" class="box">
        <h3>display:none</h3>
        エレメントが表示エリアから消える。DOMとして存在はするけど描画されない。
    </div>
        <div id="four" class="box"></div>
</body>
</html>

css

float:leftかけておく。

2番目のボックスにvisibility:hiddenをかけて、
3番目のボックスにdisplay:noneをかけようと思います。

@charset "UTF-8";

.box{
  width:150px;
  height:150px;
  margin:10px;
  border-radius: 10px;        /* CSS3草案 */
  -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */
  -moz-border-radius: 10px;   /* Firefox用 */
  float:left;
  padding:20px;
}

#one{

  background:#000;
}

#two{
  /*visibility:hidden;*/
  background:#9eccb3;
}

#three{
  background:#f47d44;
  /*display:none;*/
}

#four{
  background:#000;
  clear:right;
}


ブラウザ

2.png

検証結果

visibility:hidden

<二番目の緑のボックス>
二番目のボックスがあった場所だけぽっかりそのまま空白に。

3.png

display:none

<三番目のオレンジのボックス>
要素自体がなくなったので、次の4番目のボックスがつまる。

5.png

visibility:hiddenは名前の通り、要素はあるけど見えない状態。
display:noneは、要素も取得されず、完全にその場にない扱い。

もしdisplay:noneで要素の横幅等を測りたかったら、
absoluteにっして-9999pxしてとばして測る。

 

 

sp pc 画像変換

レスポンシブデザインでPC用の画像と、SP用の画像を変えるときに使うスクリプト。今回の案件では、bxsliderの画像(比率)をPCとSPで変えるため、PCとSPでボタンの画像を変更するために使いました。

 

1.

画像のフォルダに、PCとSP用の画像を用意しておきます。

PC用は「******_pc.jpg」のように「_pc」を画像のファイル名につける。

同様にSP用の画像には「_sp」を末尾に着ける。

 

2.

html を記述するときは、pc用の画像を参照するように書いておく。

 

3.

<img>タグには「switch」クラスを付与。

<li><a href="#"><img src="./common/images/sliderpic1_pc.png"  class="switch"></a></li>

 

4.

PCとSPの共通のCSS(common.cssなど、、、)に以下の記述を追加する。

.switch{

visibility: hidden;

}

 

5.

以下のスクリプトを全ファイル共通のjsファイル、default.jsなど、、、に記述する。

"replace width= 767"の部分はメディアクエリーの切り替えサイズに合わせて書き換えてください。

 

//  SPimage switch
$(function(){
var $setElem = $('.switch'),
pcName = '_pc',
spName = '_sp',
replaceWidth = 767;

$setElem.each(function(){
var $this = $(this);
function imgSize(){
var windowWidth = parseInt($(window).width());
if(windowWidth >= replaceWidth) {

$this.attr('src',$this.attr('src').replace(spName,pcName)).css({visibility:'visible'});
} else if(windowWidth < replaceWidth) {
$this.attr('src',$this.attr('src').replace(pcName,spName)).css({visibility:'visible'});
}
}
$(window).resize(function(){imgSize();});
imgSize();
});
});

 

GitHubとSourceTreeの導入

GitHubとSourceTreeの導入 - WEBサイト制作の勉強からの転載

自分のレファレンス目的です、、、

GitHubとSourceTreeの導入

Git(ギット)とは、バージョン管理を行うためのツールのことです。複数人でプログラミングやコーディングを行う場合、ソースコードを効率的に管理・運用する必要があります。「誰がどのファイルのどの部分を修正したのか?」や「リリース予定の機能追加で更新するのは、どれとどれか?」といったことです。

例えば、Aさんがトップページの修正を行っている間に、Bさんがトップページの他の部分の修正を行っていたとします。お互いに修正が終わり修正内容をアップロードした場合、もちろんAさんがアップロードしたデータにはBさんが修正した内容分は反映されていないので、アップした内容はAさんの作業分しかアップロードされていない事になります。さらに、その後Bさんがデータをアップロードしてしまうと、今度はBさんが修正した分のみが反映されて、Aさんが修正した分は消えてしまいます。なので、このような事が起こらないように、事前にローカル上で互いのデータを見比べて、AさんとBさんのデータの差分をお互いにチェックしてからアップロードをする必要があります。
Gitはこういった場合に作業をより円滑に進められるようにつくられたツールで、システム開発の現場では一般的に使われているツールの一つです。

GitHubとは

Gitは通常、リモート上とローカル上を使い分けて作業を行います。GitHub(ギットハブ)とは、このリモートにあたる部分を提供しているサービスのことです。複数人での開発をサポートしてくれる便利な機能が備わっていて、現在ではエンジニアにとって欠かせないツールの一つになりました。無料でも使用する事が出来ますが、プライベート(非公開)リポジトリを利用したい場合は、有料プランに登録する必要があります。

SourceTree

Gitのクライアントツールと呼ばれ、Gitの操作を簡単にするものです。通常Gitのコマンドはターミナル上で打ち込みますが、SourceTreeを使う事でより視覚的に、簡単に作業を行う事が出来ます。

Gitで使う用語

初めてGitを触る人にとって、解り辛さの原因の1つに用語の解り辛さが挙げられます。意味をしっかりと理解出来れば作業自体は難しくないので、まずはよく使うワードとその意味をしっかりと理解しましょう。

リポジトリ

リポジトリとは、ファイルやディレクトの状態を保存する場所です。変更履歴を管理したいディレクトリなどをリポジトリの管理下に置くことで、そのディレクトリ内のファイルなどの変更履歴を記録することができます。Dreamweaverで作業する時に設定する「サイトの管理」と同じような物です。
リポジトリは自分のマシン内にある「ローカルリポジトリ」とサーバなどネットワーク上にある「リモートリポジトリ」の2箇所にあります。基本的にローカルリポジトリで作業を行い、その作業内容をリモートポジトリへプッシュする流れで行います。GitHubはこの「リモートリポジトリ」の場所を提供してくれるサービスです。


コミットとプッシュ

コミット(commit) :ファイルの追加や変更の履歴をリポジトリに保存すること。GitHubではこの際に作業者が「どこどこを変更しました」など他の人に解るようにメモを残せるような機能もついています。

プッシュ(push) :ファイルの追加や変更の履歴をリモートリポジトリにアップロードするための操作です。

基本的な作業の手順としては

  1. 「ローカルリポジトリ」のデータを変更させて
  2.   コミットしてから
  3. 「リモートリポジトリ」にプッシュする

といった感じです。

ブランチ

ソフトウェアの開発では、現在リリースしてるバージョンのメンテナンスをしながら新たな機能追加やバグ修正を行うことがあります。このような、並行して行われる複数のバージョン管理を行うために、Gitにはブランチ(branch)という機能があります。
ブランチは履歴の流れを分岐して記録していくものです。分岐したブランチは他のブランチの影響を受けないため、同じリポジトリ内でそれぞれの開発を行っていくことができます。

GitHubとSourceTreeの導入方法

f:id:yachin29:20170314234848p:plain

GitHubでの作業

GitHub上での作業は非常に簡単で単純ですが、基本的にインターフェイスが英語なので、ある程度慣れが必要になります。
まずはGitHubのアカウントを作りましょう。
続いて、プランを選択します。有料のプランもありますが、無料で使えるFreeプランがあります。Freeプランはソースがオープンになってしまいますが、今回はFreeプランで登録するので、「Free」を選んでから「Finish sign up」ボタンをクリックします。

リポジトリの作成

アカウントを作った後に、そのプロジェクトのマスターがリポジトリを作成します。
GitHubにログインした状態で、「New Repository」ボタンを押します。

f:id:yachin29:20170317105000p:plain


次に表示される画面では、「Repository name」の入力のあと、必要に応じて「Description」も入力します。
また、リポジトリの種類を「Public」か「Private」を選択します。この「Private」リポジトリは、有料会員のみ作成することが可能なので、ここでは「Public」を選びましょう。
最後に、リポジトリの中にあらかじめREADMEファイルを作成しておく場合は「Initialize this repository with a README」にチェックを入れます。.gitignoreやlicenseについては後で追加や変更ができますので、Noneを選択します。

f:id:yachin29:20170317105303p:plain

必要項目の入力が終わり「Create repository」ボタンをクリックするとリポジトリの作成は完了です。
次の画面で、リモートリポジトリのアドレスが表示されますので、控えておいてください。また、このリモートリポジトリのアドレスはプロジェクトチームの他のメンバーがGitHubとSourceTreeを紐付ける時に必要になるので、他のメンバーにも教える必要があります。


SourceTreeのインストー

次に以下のサイトからSourceTreeをインストールします。
ja.atlassian.com

SourceTreeでの作業

GitHub上に作った「リモートリポジトリ」をローカル上にコピー(クローン)します。
「リモートリポジトリ」のURLをコピーし、SourceTreeの「新規リポジトリ」→「URLからクローン」を押し、先程コピーしたURLとクローン先(ローカル上)のディレクトリを指定します。
ローカル上に「リモートリポジトリ」のクローンである「ローカルリポジトリ」を作る際には中身が空のディレクトリを用意してあげる必要があります。
そしてクローンすると、新しくローカルリポジトリが作成されます。


作業開始直後はまだ何も表示されませんが、その後更新作業などを進めていくと、このようにグラフが伸びていき、作業の進捗状況なども可視化でき、解りやすくなります。
作業を進めるとこんな感じになります。
f:id:yachin29:20170317110837p:plain


以上で、GitHubとSourceTreeの導入部分は終了です。
次回は実際の作業やよく起こる問題の対処法などを説明します。とにかくこういうのは慣れなので、実際の現場仕事で致命的なミスを犯してしまう前に友人同士で練習してみる事をオススメします。

 

相対パス、絶対パス、ルートパス

相対パス (普段使い)

いまいる「ファイル」を起点にして、場所を指定する。

いま、コードを記述しているファイルが起点。

いま記述しているファイル(例えばindex.html)と同じ階層にあるファイルやフォルダ(例えばcommonフォルダ)は以下のように記述する。

./common

common

commonフォルダの中のcssフォルダの中のstyle.cssを指定するときは、、、

./common/css/style.css

common/css/style.css

のように記述する。

「./」は同じ階層という意味です

 

style.cssで同じ「common」フォルダの中にある「images」フォルダ内の「pic.jpg」をbackgroundとして指定するときは、、、

まず、「style.css」から一つ上の階層にでます。この階層は「css」フォルダと同じ、つまり「images」フォルダと同じ階層になります。

「../」が一つ上の階層という意味になります。

../images

この中にある、「pic.jpg」を指定します。

../images/pic.jpg

 

絶対パス(ほぼ使わない)

CDNとかそんなときしか使わない。

よそのサイトを参照するときに使います。

 

ルートパス(案件によって指定されれば)

一番最初の階層からのパス。

/index.html

/common/css/style.css

のように記述する。

/ がドキュメントルートを表している。

 

他の人がコーディングしているソースを見るときに、、、

「(なにもなし)」 「./」「../」の時は相対パス

 

「/」が先頭にある時はルートパス

くらいはわかっていると便利。

 

windows10 電源管理

f:id:ohta-felica:20170713233314p:plain

 「高速スタートアップを有効にする」チェックを外す。

 

f:id:ohta-felica:20170713233530p:plain

 先日無償アップグレードが終了した『Windows10』ですが、初期状態で有効になっている『高速スタートアップ』と呼ばれる機能が様々な不具合・異常動作の原因になっているようで、8/12現在ではこの機能を"無効"にするよう推奨されています。今回は、この『高速スタートアップ』を無効化する手順と、そもそもこの機能は何なのか?という事について簡単に紹介致します。

そもそも『高速スタートアップ』とは何なのか?

実はWindows8.1から存在しているこの『高速スタートアップ』、文字通りの意味で"スタートアップ(起動)"を"高速"にするもので、過去のOSにあった「休止状態(ハイバネーション)」に似たような仕組みになっています。(ただ、「休止状態」はWindows10にもまだあります)

Windows10では初期状態(デフォルト)で有効になっているため、基本的には以下の手法を自分で行わなければ無効化は出来ません。

有効化した場合の問題点

つい先日も、これに起因すると思われるトラブルに対処してきたのですが、現在最も多く報告されているのが、"終了時と起動時にPCの構成に変化があった際に様々な不具合が生じる"というものです。

具体例を挙げると、"USB外付けHDDを付けたままシャットダウンした後、この外付けHDDを外してからPCを起動し再度その外付けHDDを接続しても認識をしない"と言ったようなトラブルケースが考えられます。

上記以外にも、"起動は速くなるが終了が異常に遅くなる""起動時のWindowsUpdateによる更新作業が終わらない""起動時にNumlockがオンにならない""起動時にブルースクリーンエラー(BSOD)が発生する"等々、様々なものが報告されています。

 

gitを使って、チームで作業する準備

まずはリモートサーバー上での作業になります。

リモートサーバーに、

1.  チームを作る

2.  チームのメンバーを登録する

3.  チームのフォルダ(=リポジトリ)を作る

4.    各個人のフォルダ(=ローカルリポジトリ)とチームのリモートリポジトリを紐づけます。

1.から3.はbitubucketとgitをインストールして作業します。

4.に進むためにはsourcetreeをインストールする必要があります。dreamweaverでもローカルのリポジトリを使えるようになりました。

 

リモートでリポジトリを管理するためには「bitbucket」か「github」を使います。

github」で非公開のリポジトリを作成するにはお金がかかってしまいます。

「bitbucket」では非公開のリポジトリを無料で作成できますが容量の制限があります。

 

ここでは、ローカルでリポジトリを管理するために「sourcetree」を使います。

「git」をGUIで使えるアプリケーションです。

 

1. まずは「管理者」がチームを作る(チーム名の登録)

「bitbucket」をインストールする。リモート上で「gitで管理するフォルダを=リポジトリ」を操作するために使います。

インストールが完了すると下のような画面が現れるので、「plan to work with others?」

にすすむ。

まず「管理者」がbitbucketをインストールして「team」を構成する。

とにかくチームを作って、チームのプロジェクト、チームのリポジトリといった具合に

チームで作業をするためには、チームを構成する。

f:id:ohta-felica:20170712235343p:plain

 

f:id:ohta-felica:20170713220507j:plain

 チームの名称は「会社+部署名」などにしておくと便利で分かりやすい。チームのフルネームなので、とにかくなんのチームかわかるようにしておく。

チームIDは、URLの一部になるので「チーム名」のわかりやすい省略形を指定する。

 チームのコード名といいますか、3letter-codeのようなものです。

 

 

2. チームの構成員を登録

チームの構成員は随時追加できるので、まずは当面一緒に作業する人をメンバーに加えておく。

それぞれのメンバーには

sourcetree 

bitbucket


git (githubではない、、、)

Git

 

以上3つアプリケーションをインストールしてもらう。

それぞれのサービスに登録する「氏名」「メールアドレス」は共通にしておくのが基本。管理者の”bit bucket”から、チームのメンバーに登録するときはアプリケーションをインストールした際のメールアドレスが必要となります。

 

3. リモートリポジトリを作成 

 チームのリモートリポジトリを作成する。

リポジトリとはgitによって管理されているフォルダのこと。

ただのフォルダではなく「.git」という名前の付いたファイルが中にあるフォルダで、

このファイルがあるとバージョンの管理ができる。

このフォルダの中にあるファイルはすべてログが記録されているということ。

とにかく「チーム」の「リモートリポジトリ」を作成する。

中身は空っぽでよい。

f:id:ohta-felica:20170713000145p:plain

 

f:id:ohta-felica:20170713000417p:plain

 上の例だと、、、

「buyou」チームの、「BYO」プロジェクトに属す「BYO」リポジトリ(フォルダ)

を作成しています。「リポジトリタイプ」は「git」,つまりGITによって管理されているリポジトリであるということ。作成をクリックして作成します。

 

 

4. ローカルにクローンを作成する 

チームのリモートリポジトリを作成したら、「リポジトリ」の「概要」を確認します。

一番左の「+」をクリックすると、、、

f:id:ohta-felica:20170713222151p:plain

 下のような画面になります。

f:id:ohta-felica:20170713222414p:plain

 「clone this repository」をクリックします。

なにをしているかというと、、、

リモートサーバー上にある「チーム」の「リモートリポジトリ(フォルダ)」からローカル上の指定したフォルダにリモートリポジトリのファイルをダウンロードするということ。

ただダウンロードするのではなく、ローカル上の指定したファイルを「ローカルリポジトリ」にしてくれます。つまり「git」で管理しているフォルダを作ってくれる。だからダウンロードとは言わないのでしょう。

f:id:ohta-felica:20170713222846p:plain

 「clone in sorce tree」をクリックすると、リモートリポジトリのURLが表示され、

ローカル上のどの場所に「ローカルリポジトリ」を作成するのか指定できますから、入力をします。このとき先に進まないときは、現在見えているウィンドウの裏に隠れている「source tree」のログインウィンドウを探してみましょう。(わたしはこれで手間取りました、、、)

 

このようにして、「リモートリポジトリ」と自分のローカルにある「ローカルリポジトリ」の同期をとる準備ができました。

「クローン」とは最初に、リモートからローカルにデータを移す時に使う言葉です。

「クローン」の後にリモートからローカルに差分データやログをダウンロードすることを「プル」といいます。

逆に、ローカルからリモートに差分データやログをアップロードすることを「プッシュ」といいます。

 

これらの言葉が「git」でバージョン管理するときのハードルになっています。しかしその用法や意味を理解すればそんなに難しくないと思います。

 

空っぽのフォルダ、、、

まだリポジトリの中が空っぽなので、管理者は自身の「ローカルリポジトリ」にプロジェクトに必要なファイルをいれます。

その後に、ローカル上で「ステージ」→「コミット」そしてリモートに「プッシュ」しておきます。 

 

こうして、リモート上にあるプロジェクトに必要なファイルを、メンバー全員で使うことができるようになりました。