crossline

Git 〜コミット〜

 

=================コミット=================

リポジトリ(通称リポジトリ:わたし命名)

 

f:id:ishuko:20150528094829j:plain

コミットとは、ファイルやディレクトリの追加・変更を、リポジトリくん(ファイルやディレクトリ・履歴を記憶する場所)に記録するための操作です。

 

コミットは、時系列順に繋がった状態でリポジトリくんに格納されています。

このコミットを最新のモノからたどることで過去の変更履歴やその内容を知る事ができます。だから、いついつ何時に更新されて〜...とか分かるってことですね。管理がめっちゃ楽って訳です。

 

コミットの情報から計算された重複のない英数字40桁の名前がつけられています。

この名前を指定することで、リポジトリの中からコミットを指定することができます。

※後から履歴をみて特定の内容を変更するってときに、できるだけコミットを分けてあればあるほど探しやすくなる。

 

コミットするときは、メッセージ入力を必ずします。空のままだとコミットできません。

※コメントは他の人がコミットの変更内容を調べる場合や、自分で後から履歴を見直す際に大切な情報となるので、変更内容のわかりやすいコメントをかくこと!

 

 

=================ワークツリー=================

 

Gitでは、Gitの管理下におかれた

Git

 

===========Gitとは=============

 

Gitとは、バージョン管理システムの一つです。

Gitでは、ファイルの状態を好きなときに更新履歴として保存しておくことができます。

一度編集したファイルを過去の状態に戻したり編集箇所の差分を表示したりすることができます。

 

Gitがあれば...例えば...!

・すぐ前の状態にもどせる

複数人で同じファイルを更新しても大丈夫

・更新履歴がみれる

・リリース管理も簡単

 

例えば)

共有ファイルで、それぞれのコーダーさんが同じ名前のファイルを共有したとします。

名前は一緒だから勝手に上書きされてしまったりしたら、どっちが新しいのかまったく別物で名前が同じものだったのか、などごちゃごちゃになって泣きたくなりますよね。

それを、わかりやすく管理してくれるものなんです。

※だから、バックアップ用のファイルコピーをおく必要がない。

 

===========リポジトリとは(通称リポジトリ君:わたし命名。)=============

 

f:id:ishuko:20150528094829j:plain

保存された状態は、内容の変更履歴としてリポジトリ君の体内に入ります。

変更履歴を変更したいディレクトリをリポジトリ君に入ることで、そのディレクトリ内のファイルや変更の履歴を記録することができます。

 

リポジトリくんは2種類あります。

・リモートリポジトリ(専用のサーバに配置して複数人で共有できるリポジトリ

・ローカルリポジトリ(ユーザーひとりが利用するために、自分の手元のマシン上に配置するリポジトリ

 

リポジトリくんが二つそろうことで、普段の作業はローカルリポジトリをつかってすべて手もののマシン上で行えます。リモートリポジトリは、自分のローカルリポジトリで作業した内容を公開したい時にアップロードして使います。

※リモートリポジトリを通して、他の人の作業内容をみることもできます。

 

手元にローカルリポジトリを作成するときは、

・全く新しいリポジトリを作成

・リモート利もジトリをコピー

の2種類あります。

 

 

 

▼もっと早く知りたかった!Gitが鬼のようにわかるスライド厳選7選

http://www.find-job.net/startup/7-git-slides

 

サルでもわかるGit入門

http://www.backlog.jp/git-guide/intro/intro1_1.html

 

Sass Koalaインストール

 

--Sassインストール--

・「sudo gem install sass」と入力してreturn

・管理者パスワード入力してreturn

完了!いーじーぴーじー

 

--GUIソフトをインストール--

※ウェブブラウザでは、CSSはそのままでも分かってくれるけど、

Sassはそのままの状態で表示できないため、書いたものをコンパイルする必要ある!

 

それを簡単にしてくれるのがKoala

f:id:ishuko:20150526123541p:plain

http://koala-app.com/

ちょっと目にきゅん。笑

 

ちなみにわたしの場合(Mac)、これ開こうとしたら↓これでてきてまっじかあー!ってちょっとびびったけど。

f:id:ishuko:20150526123806p:plain

 

右クリックで「開く」押したら普通に開けた。わっと あ りりーふ。

 

 

--ダウンロードしたら初期設定--

Compassを使えるようにするため、左上歯車のSass→compass/General→Languageで日本語にも設定しちゃう。

 

Dreamweaverをあまりつかわないほうがいいかも....って、わたしはドリちゃん使ってないので関係ないかもしれないけど、DWは元々scssを認識しないので、初期設定もめんどくさいとか色々あるみたいです。

 

 

Sass メモ

========================================================

 

 

〜Sassとは〜

http://sass-lang.com/

サス・Syntactically Awesome Stylesheets(←直訳:構文的にめっちゃすごいスタイルシート

ざっとまとめると、「CSSのコーディングをより便利にするモノ」。

 

※コーダーによってコーディングするときそれぞれ癖がでてしまう。

※複雑な継承(たくさんのclass名など)。

※似たようなスタイルがあってコピペめんどくさい。

 

そんな面倒なことを簡単にしてくれるのがSassさん。 ” 構文的にめっちゃすごいスタイルシート ”なのです。めっちゃすごいんです、オーサム。awesome。

 

========================================================

 

コンパイラー〜

SassさんはそのままだとWebブラウザで認識されません。

Sassファイル(.sass / .scss)をコンパイラーに通す事で.cssファイルを生成することができます。

 

========================================================

 

〜記述〜

Sassでの記述は、だいたいCSSと似ています。でも、ちょいと変数とか、ネスト構造になってたりする。

拡張子が.sass / .scssと二つあるのは、簡単に言えば、

・.sassは最初にSASS記法で決められていてコーディングが簡単になる。

・.scssはSCSS記法(Sassy CSS)記法で新しい方であり、CSSに近いためコーディングはかどるかも。←現在こっちが主流!!!

 

例)

【.sass】

body

  color: #000;

 

【.scss】

body {

        color:#000;

}

これをコンパイルすると

【.css

body {

  .color: #000;

}

 

========================================================

 

〜SASS記法とSCSS記法の違い〜

 

f:id:ishuko:20150526095641p:plain

 

 

 

アイディアマン

 

 

最近公開された映画で「脳内ポイズンベリー」っていうのあるんですが。

https://www.toho.co.jp/movie/lineup/poisonberry.html

 

〈ポジティブ〉〈ネガティブ〉〈衝動〉〈記憶〉〈理性〉

脳内で感情を現すものを5人の擬人化に例えて、主人公の脳内を「脳内会議」とし色々な感情をコミカルに描いているんですが。

 

これは元々漫画だったらしく。

なんかこういう誰も発想しないような考え、すごい面白い!

なんだろう、普通、脳内のことを5人いるとか思いかないし、そう考えただけですごく面白い...

 

こんなアイディアマンになりたーーーーーい!

見てすごい、真似したい、きれい、かわいいって思う事はよくあっても、なにか発明するってすごいユニークだなあ、って思ったなあ。

 

まだこの映画見てないんだけどね。笑

映画館でみるのは迫力満点アクション洋画限定なんです。フォーカスおもしろそうだなあ...

 

なんか、アイディアマンっていってたらすごいいろんな面白いもの見つけたくなったからぺたり。

 

これ大丈夫かな、すわって。笑

f:id:ishuko:20150525185930j:plain

 

こんなベッドー!ほしい!

f:id:ishuko:20150525190059j:plain

 

う〜ん。トイレしにくいべ。笑

f:id:ishuko:20150525190256j:plain

 

ああーーーー読めない。笑

f:id:ishuko:20150525190600j:plain

 

まじかあ。笑

f:id:ishuko:20150525190705j:plain

 

これでみんなむっきむき。ほれてまうやろ〜〜

f:id:ishuko:20150525190920j:plain

 

HTML。そっちね。笑

f:id:ishuko:20150525191324j:plain

 

 

 

だめだ、こういうの見てるとなんか作りたくなるー!

おもしろいポスターつくってみようかな。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2015 trend for Web design

 

やっぱり外人さんの書いたブログなんかを見ているとやっぱり感覚も感じ方もまったくちがってユニークだなあ感じますー。

 

なんか常に最新のものができて流行りが変わって、日本エレキテル連合とかもういないのかな・・・とかてかすぎちゃんは?って悲しくなる瞬間もあります。

 

でもやっぱ新しいものは面白いしわくわくするけどね。

 

The big web design trends for 2015 - The Creative Edge

 

10 Web Design Trends You Can Expect to See in 2015

 

▼印象的だったこと。

なんか、今年はマテリアルデザインみたいな、ただのフラットだけじゃないデザインもあるそう。素材感を残しつつフラットみたいな。

ちょっとボタンも陰とか、境界線いれてボタンぽくわかるようにね。

あとは、fix-widthがカムバックするらしい。100%でぐにゃぐにゃ動かないって。

私fix-width個人的に好きだからうれしい。

 

なんかどうしてもこう思ってしまうんだけど、

今は女子高生のなかでは紺ソ当たり前だけど昔ルーズソックスが流行ってまたルーズソックスが流行りだしてきた・・・・とか、

小さい頃はアンパンマン好きで、中学生になったらもはやアニメもみずに存在忘れていたはずなのに、高校になったとたん急にアンパンマングッズ(肩掛けの小さい財布とか)もち出してなんかみんなどうした…とか。あたしは全く分からなかったけど。

 

そんなように、そうやってデザインの流行も、てかすべてのモノがまたもとに戻ってサイクルされていくのだろうか…どうなんだ…って思ったりしちゃう。

 

いや、きっとそっちは女子高生の特徴なのかなw

 

 

 

jQuery -noConflict()-

 

かなり嬉しい瞬間ナンバーワンとも言える...

自分でバッティングを解決できたときのあのテンションでの投稿です。

でもよくバッティングとか多いんですよね...ほんとに気持ちいいくらいバッティングすることありますよね...

 

そのときなぜか意地を張ってでも解決しようと自分と戦う私。

 

でもあの解決できたときのスッキリ感はマジでヤバいですね。

 

 

今回苦戦していたのが、タブのそれぞれの中に入れていたjQueryのバッティング。

 

タブの切替 | よく使うjQueryベースのスクリプト

jQueryでGoogle画像検索の様なUIを実装する実験(レスポンシブ対応) | BlackFlag

jQuery Content Slider | Responsive jQuery Slider | bxSlider

 

上記3つのjQueryが、どうしてもうまく動きませんでした。

タブとgoogleUIは正常に動くのですが、どうしてもbx-sliderのimgが表示されないんです。要素の検証をみてみると、どうやら指定してもいないのに[display: none;]になってしまっているんです。

 

ここでの解決策は、

<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
</script>

という魔法のコード。これは、前に指定していたライブラリのオブジェクトを上書いてくれるそう。

                  +

CSSの指定やbx-sliderのjQueryのwidth(100%になっている部分の調整)をすれば、見事表示されなかったimg aが表示されました!

noConflict() | jQuery Core - jQuery リファレンス

jQueryを使う際の25個Tips | Magicalog

 

 

以上、すっきりバッティング解決のメモでした。