便利なEmmetの使い方


こんにちは。櫻井です。
今回はEmmetというHTMLとCSSの開発を手助けしてくれるとても便利なツールの使い方について実際にHTMLを構築をしながら説明しようと思います。最終的に以下のような簡単なheader構造をEmmetで構築することを目標にやっていきたいと思います。

  
    <header class="l-header">
      <h1 class="l-header_logo"><img src="./img/logo.png" alt="LOGO"></h1>
      <nav class="l-header_nav">
        <ul class="l-header_nav_item_wrapper">
          <li class="l-header_nav_item"><a href="">menu1</a></li>
          <li class="l-header_nav_item"><a href="">menu2</a></li>
          <li class="l-header_nav_item"><a href="">menu3</a></li>
        </ul>
      </nav>
    </header>
  

EmmetはCSSのセレクタと似たような構文を使ってHTMLを生成することができます。
例えばCSSで
div>pと記述した場合div要素の中のp要素にスタイルがあたりますよね。
Emmetの場合は
div>p
と記述してショートカットキーを押してHTMLを展開させた場合

  
    <div>
      <p></p>
    </div>
  

といった形になります。Emmetでは、div要素の中にp要素がある形でHTMLを生成してくれます。また、要素を<>で囲んだりする必要はありません。CSSも<>で囲まないしちょっと似てますよね。
では、例で出した「>」から紹介していきます。

子要素を作る>

>は例で挙げたように「div>p」という書き方をするんですが「>」は「左の要素(例だとdiv)の中に右の要素(例だとp)を作る」という処理をしてくれています。なので例えば
section>div>h2
これを展開した場合

  
    <section>
      <div>
        <h2></h2>
      </div>
    </section>
  

こんな感じになります。
これでもうheaderの中にh1を入れる構造はできますね。
header>h1
と記述するだけです。まだまだ完成は遠いですね。次はh1要素の兄弟要素になるnav要素を作りましょう。

兄弟要素を作る+

>を要素の間に入れた時は右のものを子要素にしましたが、+でつなげると兄弟要素になります。例えば
div+p
展開した場合は

  
    <div></div>
    <p></p>
  

このようになります。これでh1要素の兄弟要素のnav要素を入れられますね。この二つだけでもかなり完成形に近づいたんじゃないでしょうか?
header>h1+nav>ul>li>a
これをを展開すれば

  
    <header>
      <h1></h1>
      <nav>
        <ul>
          <li><a href=""></a></li>
        </ul>
      </nav>
    </header>
  

このようになります。かなり近づいてきましたね。Emmetを知らなかった方は記入量の少なさにおどいているんじゃないでしょうか?
しかしまだメニューの数が足りなかったり、ロゴを入れられてなかったりクラスがついていなかったりします。まずはh1要素にimg要素を入れるやり方から説明していきます。

親要素に戻る^

^は少しCSSのセレクタの書き方とは意味が変わってきます。左の要素の親要素の位置に戻ってくれます。説明がこれだけだとわかりにくいと思うのでもう少し掘り下げます。ここまでの説明だとdiv>pとした場合にはdivの兄弟要素をEmmetで記述することはできませんよね。^はこういったときにdiv要素に兄弟要素を作れるようにする処理をしてくれるんです。
例えば、div>p^ul>liと記述すればdivとulが兄弟要素になって以下のように展開されます。

  
    <div>
      <p></p>
    </div>
    <ul>
      <li></li>
    </ul>
  

これでh1要素の中にimg要素を入れられます。
header>h1>img^nav>ul>li>a
これを展開すれば

  
    <header>
      <h1><img src="" alt=""></h1>
      <nav>
        <ul>
          <li><a href=""></a></li>
        </ul>
      </nav>
    </header>
  

このように展開されます。次はnav要素の中のliを増やしていきましょう。

量産してくれる*

*は左の要素を*の右に書いた数字分だけ量産してくれます。
例えば、
ul>li*3
これを展開した場合

  
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  

このような形でli要素を3つ作ってくれます。
実はli要素を増やす方法として「li>a^li>a….」と記述して増やすことも可能ではあります。でもこんなことやっていたら面倒ですよね。なので*を使って量産しましょう。
header>h1>img^nav>ul>li*3>a
これを展開すれば

  
    <header>
      <h1><img src="" alt=""></h1>
      <nav>
        <ul>
          <li><a href=""></a></li>
          <li><a href=""></a></li>
          <li><a href=""></a></li>
        </ul>
      </nav>
    </header>
  

このようになります。かなり近づいてきましたがクラスついてないしテキストが入ってないですね。次はクラスを付けていきましょう。ついでにIDの付け方も説明します。

クラスを付ける. IDを付ける#

クラスとIDはまんまCSSと同じでクラスの場合は要素の後に.クラス名、Idの場合は#ID名を付けるだけです。
例えば、div.containerを展開すれば

  
    <div class="container"></div>
  

となります。
これでさらに近づきますね。
header.l-header>h1.l-header_logo>img^nav.l-header_nav>ul.l-header_nav_item_wrapper>li.l-header_nav_item*3>a
これで展開すれば

  
    <header class="l-header">
      <h1 class="l-header_logo"><img src="" alt=""></h1>
      <nav class="l-header_nav">
        <ul class="l-header_nav_item_wrapper">
          <li class="l-header_nav_item"><a href=""></a></li>
          <li class="l-header_nav_item"><a href=""></a></li>
          <li class="l-header_nav_item"><a href=""></a></li>
        </ul>
      </nav>
    </header>
  

あとはテキストとimgのsrcとsltが入れられれば完成です。次はテキストの入れ方を説明します。

テキストを入れる{}

テキストを入れたい時は{}を使います。例えばp{テキスト}とすれば

<p>テキスト</p>

となります。この時に気をつけて欲しいのが{}の中で改行は使えないことです。改行を入れたい時は
を入れてください。
これでテキストが入りますね。header.l-header>h1.l-header_logo>img^nav.l-header_nav>ul.l-header_nav_item_wrapper>li.l-header_nav_item*3>a{menu}
これを展開すると

  
    <header class="l-header">
      <h1 class="l-header_logo"><img src="" alt=""></h1>
      <nav class="l-header_nav">
        <ul class="l-header_nav_item_wrapper">
          <li class="l-header_nav_item"><a href="">menu</a></li>
          <li class="l-header_nav_item"><a href="">menu</a></li>
          <li class="l-header_nav_item"><a href="">menu</a></li>
        </ul>
      </nav>
    </header>
  

これだとまだ数字のmenuの後ろに連番が入ってないですね。
次は連番の入れ方を説明します。

ナンバリングをしてくれる$

$はナンバリングをしてくれます。基本的に量産をしてくれる*と合わせて使うことで連番を入れてくれるのでそういう使い方をすることが多いのですが、必ずしも*と一緒に使わなければいけないわけではありません。
使い方はテキストやクラス名の後ろに$を付けるだけです。
一つだけ書くと1から始まり、二つ続けて書くと01から始まります。
例えばul>li.l-item$$*5を展開すると

  
    <ul>
      <li class="l-item01"></li>
      <li class="l-item02"></li>
      <li class="l-item03"></li>
      <li class="l-item04"></li>
      <li class="l-item05"></li>
    </ul>
  

このように展開されます。
これでテキストの横に連番を載せられます。
header.l-header>h1.l-header_logo>img^nav.l-header_nav>ul.l-header_nav_item_wrapper>li.l-header_nav_item*3>a{menu$}
このようにして展開すれば

  
    <header class="l-header">
      <h1 class="l-header_logo"><img src="" alt=""></h1>
      <nav class="l-header_nav">
        <ul class="l-header_nav_item_wrapper">
          <li class="l-header_nav_item"><a href="">menu1</a></li>
          <li class="l-header_nav_item"><a href="">menu2</a></li>
          <li class="l-header_nav_item"><a href="">menu3</a></li>
        </ul>
      </nav>
    </header>
  

次で最後です。画像のsrcとaltの入れ方を説明します。

クラスやID以外の属性を付けてくれる[]

srcやhref、jsで使うdata属性などを付けたい時は[]を使います。 使い方は{}と同じです。
例えばa[href=”https://knap.jp/”]を展開すると

  
    <a href="https://knap.jp/"></a>
  

このようになります。続けて書くこともできるので header.l-header>h1.l-header_logo>img[src=”./img/logo.png” alt=”LOGO”]^nav.l-header_nav>ul.l-header_nav_item_wrapper>li.l-header_nav_item*3>a{menu$}
こんな形で入れて展開すれば

  
    <header class="l-header">
      <h1 class="l-header_logo"><img src="./img/logo.png" alt="LOGO"></h1>
      <nav class="l-header_nav">
        <ul class="l-header_nav_item_wrapper">
          <li class="l-header_nav_item"><a href="">menu1</a></li>
          <li class="l-header_nav_item"><a href="">menu2</a></li>
          <li class="l-header_nav_item"><a href="">menu3</a></li>
        </ul>
      </nav>
    </header>
  

これで目標としていた形になりましたね。お疲れ様でした。

まとめ

Emmetがいかに便利か伝わりましたか?慣れるまでは少し難しいかもしれませんが少しずつでも使っていけば鎖状効率の違いに気付けると思います。
実はEmmetにはまだまだ実用的な機能が色々あります。()で囲むことでグループ化できたり、CSSでも使うことができます。
今回説明した内容だけでも十分扱えると思いますがもっと詳しく知りたい場合は英語になりますが以下の公式ドキュメントを読んでみてください。
https://docs.emmet.io/

エディタに入れてるプラフインの紹介


こんにちは。櫻井です。
今日は僕が普段使っているAtomというエディタに入れている便利なプラグインを紹介しようと思います。

japanese-menu

インストールするだけでAtomのメニューとかを日本語に翻訳してくれるものです。
これがないと何書いてあるかわからなくて困ります。

autoprefixer

cssのベンダープレフィックスと呼ばれる「-webkit-」とかを付けないとcssがちゃんと聞いてくれないものを補完してくれるプラグインです。gulpを使っている案件の時は不要ですが全ての案件でgulpを使っているわけではないのでそんな時は使います。
使い方は「⌘(command) + Shift + p」を押して出てくるダイアログに「Autoprefixer」と打つと出てくる「Autoprefixer: Prefix」をクリックするだけです。テストアップする直前に使ったりします。

atom-beautify

人によってもエディタによってもインデントの揃い方って変わってくるのでデータを引き継いだ時などに重宝してます。
使い方は「⌃(control) + ⌥(option) + b」または右クリックして出てくる「Beautify Editor contants」クリックすれば出来上がりです。

emmet

超大事なプラグインです。これが使えないと開発にかかる時間が1.5倍から2倍に膨れ上がるんじゃないかってくらい時短に協力してくれてるプラグインです。
例えば、「!」を入力してタブキーをクリックするだけでmeta付きのhtmlを展開してくれたりします。htmlの生成に特に使っているんですがemmetの便利な機能の紹介は後日したいと思います。

local-server-express

絶対に入れて置くことをお勧めするプラグインです。
案件によっては絶対パスで組まなければならないものもあると思いますが。このプラグインを入れておけばトップページになるファイル開いて「⌃(control) + ⌥(option) + ⌘(command) + s」でエディタが仮想サーバーを構築してくれます。

file-icons

ファイルの拡張子をみなくてもファイルの種類がわかる便利なやつです。なくても困らないと言えば困らないけど、あると便利な子。

highlight-selected

自分が選択したワードで付近にあるものをわかりやすく白い枠で囲ってくれるプラグインです。「⌘(command) + f」で検索すればわかることですが、検索するより早く知覚的に場所を教えてくれます。微妙なスペルミスを見つけるときとか、タブを跨いで教えてくれるので例えば、htmlだとクラス名が「message」というのがあったとしてcssの方が「massage」になっていたとしてcssの「massage」を選択すればhtmlの方は白い枠で囲まれないのでひっそりと控えめにスペルが間違っていることを教えてくれたりするいい子です。

indent-guide-improved

インデント位置をわかりやすく縦線を引いて教えてくれます。 インデントめちゃくちゃにならないように注意するのにちょうどいいです。

show-ideographic-space

日本語打ち込んで英語に戻してって 繰り返してると半角スペース打ったつもりが全角スペース打ってたってことあるじゃないですか。これそんな全角スペースを白い四角で囲ってくれるプラグインです。

platformio-ide-terminal

atom上でターミナルを扱わせてくれるプラグインです。このプラグインの特に気に入っているポイントとして開いたプロジェクトの位置までターミナルを移動してくれているところです。

pigments

複数の色を使っているときに間違えて別の色を修正してしまったりっていうのを防ぐのにちょうどいいプラグインです。

まとめ

今回はAtomのプラグインを紹介しました。最近はVSコードが主流になってきてるみたいで僕もいつか切り替えるかもしれません。ですがもしAtomを使ってみようと思ったらご紹介したプラグインを試してみてください。

配列のHOW TO


こんにちは。櫻井です。
今日はJSの配列の扱いについてお話ししたいと思います。
連想配列を扱えるようになると開発時にかなり時短になるんです。

See the Pen arrayDemo by knap_develp (@knap_develp) on CodePen.

例えばこんな感じで使います。
何をやっているのか説明すると。
まずdataItemに流し込むデータが入っています。
次にある変数allProduct、vegetableProduct、fruitProductにはそれぞれあとでJSで生成するhtmlを入れます。これらの変数はただ定義しただけだとあとで「+=」で足して行くときに「undefined」になってしまうのであえて「’’」にしておきます。

次はfor文です。for文を使ってdataItem内のデータを正確に特定していきます。for in文とか使えばもっと簡単にできるんでしょうがまずは基本のfor文です。JSを普段あまり触らない人からするとfor文を書くのは気が引けるかもしれません。
for文はまずカッコの中に何回周すのかを定義します。
for文の()の中を翻訳すると「iがdataItem.lengthより小さい間は{}の中の処理をして終わったらiに1を足すっていうのを繰り返してね。iがdataItem.lengthと同じかそれ以上になったら終わっていいよ。」って感じのことが書かれてます。
「let i =0」というのが始まりの数です。今回はiにしてますが定義する名前はなんでも構いません。翻訳した文章の主語になっているiはここで定義しています。
次の「i < dataItem.length」はdataItem.lengthが流し込むデータの数を表しています。「iがdataItem.lengthと同じかそれ以上になったら終わっていいよ。」っていういつまでやり続けるのか決めているのがこの部分です。
最後の「i++」は「終わったらiに1を足す」の部分です。{}の中が終わったらどうするのか決めているのがこの部分です。

ではfor文の中をみていきましょう。
はじめに定義したallProductの中にhtmlの構造を足しています。これはES6の書き方(IE11では使えないです。)なんですが足す内容を“で囲むと${}の中だけ変数が展開されるんです。今回は楽がしたいので楽なこの方法を選んでます。
例えば${dataItem[i].name}ですがこれはdataItemのi番目のnameの値を呼び出してます。
${dataItem.name}ではダメなんです。JSはdataItemの[]の中の{}を一つの塊として扱ってくれます。中のデータを参照するには[]の中の南蛮めのデータなのかを明記しなければいけなません。例えば、dataItemの[]の中の五番目のデータが欲しかったらJSは数字の始まりが1ではなく0からなのでdataItem[4]とすれば中のデータがもらえます。iにはfor文で周回させている数字が入ります。なのでdataItemの中の全部のデータを参照してくれるんです。
allProductのhtmlを入れる処理の後にはif文が現れました。
これは何をやっているのかというと「もしdataItemのi番目のcategoryが野菜だったら{}の処理をしてね。」っていう処理をしてます。中で行っている処理はallProductの時の処理同じでvegetableProductの中にhtmlの構造を足して行く処理です。
次に出てくるif文もやっていることは同じです。

説明は以上になりますがいかがでしょうか?出来そうな感じがしてくれてたらいいのですが。。
これと同じことをJSONを使ってできるとすごく便利になります。
実際、J.フロント建装様のときにはさらにこれに加えて検索機能をつけたりしました。
僕自身まだまだ完璧に使いこなせている気はしませんが割と開発に役立てることが出来ています。是非扱えるように練習してみてください。

人に伝える難しさ


こんにちは。櫻井です。
最近NuxtとかNextとかGatsbyとかいわゆる「静的サイトジェネレータ」に興味を持ってあれこれ調べてるんですが、どうもどの記事を読んでも専門用語が多すぎて何言ってるのかよくわからないんですよね。
一応知らない言葉は調べるんですがそれでも「で?だからこれはなんなの?」ってなっちゃうんです。

母から急にきた連絡

わからなすぎてちょっとご機嫌斜めのときに母から急にLINEがきたんです。普段は滅多に来ないので何かと思ったら一言目が

「Adobeクラウドファンディングって何?」

Adobeクラウドファンディング??Adobeクラウドならわかりますけど念のため聞いたら確かにAdobeクラウドファンディングだっていうんです。検索してもヒットしないしまさか新手の詐欺か何かと思って念のためそれがどうしたのか聞いたら

「よくわかんないけど弟が通ってる大学が提供してるとかなんとか」

なら弟に聞けや!ってなりましたがどうも弟は説明することを放棄したみたいで僕に聞いてきたみたいでした。
母が言っている「Adobeクラウドファンディング」は学生向けのAdobeクラウドのパッケージのことだと思ったんでそのURLを送ったんですが。何をするためのものか理解できてなかったみたいなので「Adobeだからクリエイティブ系のアプリのサブスクだと思うよ」って伝えたんです。そしたら
「カタカナ並べないで」

まさか理解されないと思ってなかったので驚きです。そりゃ弟も説明を放棄しますよ。
さてどうやって説明するか。別に「クリエイティブ」も「アプリ」も「サブスク」も専門用語ではないと思うんです。でも母からしたら専門用語なわけです。
どう噛み砕くか。
結果的に「Adobeはデザインとかプログラムとか映像とか創造的なものを作るためのアプリ制作してる会社でそれを月極で使わせてくれる会社だからそれ系のサービスだと思うよ。」
これで理解してくれました。よかった。本当によかった。これで理解してくれなかった放り投げようと思ってたのでよかったです。

小学生に説明するように

さて、長々とエピソード書きましたが、僕は「静的サイトジェネレータ」に興味を持って調べたわけです。読んでも理解できなかったのは母と同じように知らない言葉、理解できない言葉が多かったからです。では理解するにはどうすればいいのか。僕は母に説明するとき意識したのは「小学生にもわかるようにする」ということです。
つまりわからないならわからないことを小学生でもわかるレベルまで紐解いていけば理解できるわけです。
逆に人に説明するときは小学生にもわかるように説明すればいいんです。
でも、そんな簡単にできることでもないです。僕は母に説明するとき文章打つのに30分はかかりました。
説明する力、伝える力を身につけるにはどうすればいいのか。こればっかりはやっぱり実践あるのみかと思うんです。人に話たり、ブログを書いたり。そう!ブログです。
なんやかんやで毎日ブログを投稿して一週間以上が経過しました。文章を書く力、伝える力に少しは変化はあるでしょうか?まだまだ未熟ではありますが、これからも継続してブログを書いていけたらいいなと思います。

web開発でよく使うツール5選


こんにちは。櫻井です。
社内でどんなツールを使っているかって意外と共有されていなかったりってしませんか?
web開発に限らず意外と周りが知らない便利なツールを自分だけが使っていたり、逆に周りは使っているけど自分が知らないツールってあるかもしれません。
そんな訳で今回は桜井が開発時によく使うツールをご紹介します。

codic

https://codic.jp/

個人的に使う頻度が一番高いツールです。
calss名を英語にする時は必ずと言っていいくらい使います。

HTML5 入れ子チートシート

https://yoshikawaweb.com/element/

今でもたまに今でもたまに「liにdivって入れちゃダメだったよな?どうだっけ?」ってなる時あるんで迷ったら即座にこのサイトで確認です。

CSS三角形作成ツール

http://apps.eky.hk/css-triangle-generator/ja

cssで三角形作るのってどうもやり方忘れがちで(絶対これ使ってるからなんですが)毎回これで作ってコピペしてます。

Table Tag Generator

https://tabletag.net/ja/

テーブルを組み上げるのってかなり面倒なんで表組みがある時はほぼ毎回使ってます。何がいいって一番面倒なセルの接合した時のhtmlも吐き出してくれるところです。

Ultimate CSS Gradient Generator

https://www.colorzilla.com/gradient-editor/

photoshopのcssをコピーする機能使ってそのまま貼り付けてもあまりデザインと同じ感じにならないのでグラデーションがある時はここで調整してからコピペです。

まとめ

今回はこの5つを紹介させていただきました。
細かいのでいうと三角関数の計算してくれるものだったりとかbox-shadowのcssとかもあったりします。というか探してみると意外となんだってあったりします。
みなさん是非こういうツールあったらなっていうのがあったら探してみてください。そして教えてくれると嬉しいです。

KNAPのGit講座(4) ブランチモデル


第4回はブランチモデルについてです。
ブランチモデルというのはブランチをどうやって切るのかを予め決めておくルールのことです。
なぜそんなルールをわざわざ用意しなければならないのかというと複数人で作業している場合、何も決めずにブランチを切っていると「このブランチは何?なんのためにここで切ってるの?マージはされているの?」ってことになったりするからです。
という訳でルールを決めていこうと思います。
ブランチモデルには有名なものでgit-flowとGitHub Flowというのがあります。
KNAPではgit-flowを採用しようと思いますので今回はgit-flowについて説明します。

git-flowで作成する6つのブランチ

git-flowでは6つのブランチを使って作業を進めます。
それぞれ役割があるので一つずつ説明していきます。

masterブランチ

masterブランチは基本的に公開されたデータをマージするためのブランチとして使います。
つまり、すでに公開されているもので公開データが欲しい時はmasterブランチからデータをもらえば言い訳です。逆に開発中のデータはmasterブランチにあげてはいけないのがgit-flowのルールです。Gitを使い始めの方はmasterブランチにあげていた方も多いとは思いますがgit-flowを採用するのであればこれからはmasterブランチにあげないようにしましょう。

developブランチ

developブランチは開発を進めるためのブランチです。ただし、複数人で作業していく場合全員がdevelopブランチのデータを直接作業してコミットし始めたら大変なことになります。なのでdevelopブランチは作業を行なったファイルを一つにまとめるためのブランチとして使います。

featureブランチ

featureブランチはdevelopブランチと同様に開発を進めるためのブランチですがこちらは実際に作業を行うためのブランチです。featureブランチは複数個できることが考えられるブランチなのでブランチ名を記入する時は「feature/〇〇」といった形でブランチを作りましょう。〇〇には開発を行う箇所について単語にすると良いでしょう。例えば、コンタクトページを作成する場合は「feature/contact」といった感じです。

releaseブランチ

releaseブランチはその名の通りリリース、つまり公開するときに使うブランチです。
例えば、公開前に画像を圧縮したり、cssやjsのコメントを削除したりなどを行うときに使うと良いでしょう。

hotfixブランチ

公開が完了した後に「ここのテキストが間違ってました。直してください。」ってことたまにあると思うんです。そういう時はhotfixブランチの出番です。
そういった公開後の修正やcssの崩れ、jsのバグ修正などの際に使うのがこのブランチです。

supportブランチ

supportブランチは旧バージョンをサポートするためのブランチです。せっかくのgit-flowの最後のブランチですがあまり使う機会はないと思うのでこのブランチの説明はこれで終わりです。

最後に

Git講座は今回で一旦お開きです。
本当はスタッシュとかの機能についても説明したほうがいいんでしょうがひとまずこれでSourcetreeを使って充分にgitを使えるだろうと思うの頑張ってみてください。

KNAPのGit講座(3) ブランチ操作とマージ


第三回はブランチ操作とマージについてです。
これは複数の人と同時に並行して作業を行うときに必要なことです。

ブランチとは

ブランチとは、並行して作業を進めるためにコミットの流れを分岐させたものです。
最初にある大元のブランチをmasterブランチと呼びます。

マージとは

マージとは、複数のブランチやコミットを合体させることです。

ブランチの作成

ブランチはコミットが一つもない状態からいきなり作ることはできないのでまずはなんでもいいので一度コミットしてから行うようにしてください。
では、ブランチの作成方法について説明していきます。
1. ブランチをクリックします。
2. 「新規ブランチ」に新しく作成するブランチ名を入力してください。
3. 新しいブランチの起点となる位置を選択してください。現在作業しているところからでよければ「作業コピーの親」を洗濯してください。それ以外の場合は「指定のコミット」を選択してください。
4. 最後にブランチを作成をクリックしたらブランチの出来上がりです。

ブランチの切り替え

一人で作業していても現在作業している内容とは違う内容の作業を行わなければならないことってあると思います。
そんな時は一度現在作業している分をコミットした上でブランチを切り替えることで現在作業している内容はそのままに全く異なる作業を行うことができます。
1. サイドバーにあるブランチをホバーした時に表示される「表示」をクルックしてください。
2. 切り替えたいブランチをダブルクリックして左側に黒い丸がついたら切り替え完了です。

マージの仕方

ブランチを作成して複数人で作業を行なった後、今度はその作業分をマージすることによって一つにまとめる必要があります。
1. まずはブランチを切り替えるんですが作業を行なったブランチではなく一つにまとめる方のブランチを選択します。
2. 作業を行なったブランチまたはコミットの上で右クリック
3. 「〇〇(作業を行なったブランチまたはコミット名が入ります。)を〇〇(一つにまとめる方のブランチ名が入ります。)にマージ」をクリックしてください。下に「現在の変更を〇〇にリベース」と書いてあると思いますが、リベースは行わないように注意してください。
4. OKをクリックすればマージの完了です。

ブランチの削除

マージを行なったもののブランチをそのままにしておくと後々どのブランチをマージしてどのブランチがまだマージされていないのかわかりづらくなっていきます。
なのでマージを済ませたブランチは基本的に削除するようにしましょう。
1. ブランチをクリックしてください。
2. 削除をクリックしてください。
3. 削除するブランチにチェックを付けてください。
4. OKをクリックしたらブランチの削除の完了です。

KNAPのGit講座(2) コミットとプッシュ


第二回はコミットとプッシュについて説明します。
これはクローンしたあとファイルを追加したり、クローンしたファイルに変更した後にする必要のあることです。

コミットとは

コミットとは、ファイルを追加したり、変更したりした記録を一つのグループにしてリポジトリに登録(バージョン管理)しておくことです。コミットされた変更内容そのもののことも指します。
要するに「このファイルを追加して、あのファイルはここを変更したよ」っていうメモをとっておいてくれる便利な機能です。

プッシュとは

プッシュとは、ローカルリポジトリに登録されたコミットをリモートリポジトリにも反映させてあげることです。

コミットとプッシュの仕方

1. まずはファイルを追加したり、変更したら左上にあるコミットをクリックします。
2. コミットしたいファイルにチェックを付けます。
3. 何を追加したのか何を変更したのかがわかるようにコメントを入力します。(このテキストをコミットメッセージといいます。)※このコメントをちゃんと書かないと後々「あの頃のデータに戻したい」となったときに探すのが大変になります。
4. コミットした後すぐにプッシュしていい場合はコメント入力欄の下にある「コミットをただちに〇〇にプッシュする」にチェックを入れてください。※プッシュ後だとコミットメッセージが修正できなかったりするの気をつけてください。
5. 最後に右下にあるコミットをクリックしたらコミットの完了です。
6. 「コミットをただちに〇〇にプッシュする」にチェックを入れていなかった場合は右上のプッシュをクリックして出てきたダイアログの左下にあるOKをクリックすればプッシュ完了です。

コミットを取り消したい時(プッシュしている場合はNG)

コミットした後で「あのファイルをコミットするの忘れてた」ってことがあると思います。
別にそのファイルだけ再度コミットすればいい話しではあるんですが、そのファイルを含めて一つのコミットとしておきたい場合もあるはずです。
そんな時は一度コミットを取り消して再度コミットし直す必要があります。
ではコミットを取り消し方を説明していきます。(プッシュをすでにしてしまっている場合はこの方法は使えないので注意してください。)

1. まずは取り消したいコミットの一つ前のコミットの上で右クリック
2. 「〇〇をこのコミットまで戻す」をクリック
3. モードをsoftにする
4. OKをクリックしたらコミットの取り消しの完了です。

直前のコミットメッセージの修正(プッシュしている場合はNG)

「コミットメッセージに誤字が。。直したい。。」ってことがあると思います。そんな時はコミットしたすぐ後でならなおずことができます。こちらもプッシュしてしまっている場合は使えません。

1. まずはコミットをクリックします。
2. コミットオプションから「直前のコミットを上書き」をクリックします。
3. コミットメッセージを書き換えてコミットを押したら修正完了です。

プッシュを取り消したい時

ここまでの説明で一度プッシュすると修正できないように感じるかと思いますが一応プッシュしていても修正できないことはないです。プッシュしたこと自体をなかったことにすれば言い訳ですから。ただ、リモートリポジトリは自分以外にも作業を行っている人がいることが前提のリポジトリです。もし、プッシュしたデータを他の人がすでに取り込んでいてその後でプッシュしたことがなかったことになってしまった場合、データを取り込んでしまった人は取り込んだはずのデータが消えてしまって訳のわからないことになってしまいます。Gitはそういったことが起こらないようにプッシュを取り消した場合はプッシュを取り消したという履歴が残ります。photoshopのヒストリーでも取り消したりするとその履歴が残りますよね。そんな感じです。
ではやり方を説明していきたいと思います。

1. まずはプッシュを取り消したいコミットの一つ前のコミットの上で右クリック
2. コミット適用前に戻すをクリックします。
3. OKをクリックします。
4. コミットメッセージの前に「revert」というのがついていれば完了です。※この「revert」というのが取り消したという履歴です。

KNAPのGit講座(1) リモートリポジトリのクローンの仕方


前々から社内で使いたいねーとは言っていたんですがなかなか実際に導入できていなかったGitですがなんで導入できていなかったかというと使い方が難しいっていうのがいちばんの理由だった訳です。
使い方がわからない、難しいっていうなら取説作るしかないじゃないですか。ということでSourcetreeを使ったGit講座の始まりです。
初回はリモートリポジトリのクローンの仕方です。

リポジトリとは

リポジトリとは、GItで管理されたファイルなどが保管してある場所のことをいいます。
自分の使っているPCの中にあるものローカルリポジトリ、サーバーなどPCの外にあるものをリモートリポジトリといいます。

クローンとは

クローンとはリモートリポジトリを自分のPC内に複製してローカルリポジトリを作成することをいいます。

クローンの仕方

クローンしたい時はリモートリポジトリに対象となる案件がある場合とない場合でやり方が少し変わってきます。

リモートリポジトリに対象となる案件がある場合

リモートリポジトリに対象となる案件がある場合はクローンしたいリモートリポジトリの右にあるクローンをクリックしてください。 画像の1の箇所です。クリックしたら続きは「リポジトリをクローン」で続きを解説します。

リモートリポジトリに対象となる案件がない場合

リモートリポジトリに対象となる案件がない場合は左上にある新規のボタンをクリックして出てくる「URLからクローン」をクリックします。
画像の1の箇所です。クリックしたら続きは「リポジトリをクローン」で続きを解説します。

リポジトリをクローン

リモートリポジトリに対象となる案件がある場合でもない場合でも「リポジトリをクローン」というダイアログが表示されたかと思います。
リモートリポジトリに対象となる案件がない場合は「ソースURL」の箇所が空欄になっているのでここにリポジトリのURLをコピペします。リモートリポジトリに対象となる案件がある場合は「ソースURL」の箇所にURLが既に入っていると思うのでそのままにしてください。画像の1に当たります。

次に「保存先のパス」を入力してください。この時指定したディレクトリはからの状態にしてください。(まだ存在しないディレクトリを指定する)
「名前」になんの案件か把握できるものを入力してください。
最後にクローンをクリックしたらクローンは終わりです。

新サービスを作るときのURLはどうするべき?


こんにちは。櫻井です。
新しくサービス、ブランドを作るときサイトのURLはどうするべきなんでしょうか?
新しくルートドメインを作成するのがいいのか、サブドメインを作成するのがいいのか、サブディレクトリを作成するのがいいのか調べてみました。

ルートドメインとは?

ルートドメインというのはそのまんまなんですがrootにあるドメイン、つまり根元にあるドメインのことです。例えば以下のような形のものです。
https://example.com

サブドメインとは?

サブドメインはこれまたそのまんまですが、ルートドメインのサブに当たるドメインのことです。例えば以下のような形のものです。
https://aaa.example.com

サブディレクトリとは?

サブディレクトリはルートドメインの下に作成したディレクトリ、つまりルートドメインの下層のことです。例えば以下のような形のものです。
https://example.com/aaa/

SEOの観点からみて

SEOの観点から見るとルートドメインもサブドメインもサブディレクトリも変わりません。
インターネット上の情報を集めてくれるgoogleのクローラーは全て平等に集めてくれるそうです。
ただ、そうは言っても一度にクローラーが全ての情報を集めて持ち帰ってくれる訳ではないみたいであまりサブディレクトリの場合あまり階層が深いとなかなか集めてくれなかったり、重要度が低いと勝手に判断されてしまったりするそうです。

サブドメインにしようかなと思っている方の中には関連性のある外部リンクを得ることがSEOで有利に働くことを知っていて、ルートドメインにリンクさせて外部リンクを稼ごうと考えている方もいるかもしれませんがサブドメインをリンクさせても内部リンクを同じ扱いになるそうです。
ならルートドメイン新しく作ればいいじゃんって話しなんですが、それぞれメリット・デメリットがあります。

まず、サブドメインを新しく作った場合はルートドメインが得ているSEOの恩恵が引き継がれているかもしれないみたいです。つまり初めからある程度SEOで有利な状態で始められるかもしれないというメリットがあります。デメリットはルートドメインにリンクさせても内部リンクと同じ扱いにしかならないということです。デメリットってほどデメリットではないかもしれませんが。

ルートドメインを新しく作った場合は全く新しいドメインからのスタートになるのでSEOでも0からのスタートになります。つまり検索結果の上位に上げるのが大変なんです。メリットは外部リンクを付けられることくらいです。

結局どのURLがいいのか

結局どれがいいのかというと新しく作るサービス、ブランドの内容次第で変わってくるという答えになります。
googleはコンテンツの関連性を重視しています。
なので、ルートドメインと同じテーマ、コンセプトのことだったらサブディレクトリに。
ルートドメインとテーマは一緒だけどコンセプトは違うことだったらサブドメインに。
ルートドメインとテーマもコンセプトも違うことだったら新しいルートドメインに。
といった感じで分けるのが良いでしょう。

Scroll to top