ねこきっくぱんちのメモ帳

ITに関することいろいろめも。たまにアニメ。

Git001　git branch

Git

主にbranchコマンドを記載

■git branch
・ローカルブランチの一覧表示
git branch

・リモートブランチの一覧表示
git branch -r

・ローカル/リモート全てのブランチを一覧表示
git branch -a

・新しいリモートブランチを自分のローカルに持ってくる
git branch new-branch origin/new-branch

・ローカルにリポジトリをpullして且つcheckoutする。
git checkout -b new-branch origin/new-branch

・現在いるブランチにマージされる　★注意
git pull origin new-branch:new-branch
※pull = fetch + merge


■参考記事
>さるぎっと
http://www.backlog.jp/git-guide/reference/
>リモートブランチをローカルへ持ってくる際の注意
http://blog.inouetakuya.info/entry/20120826/1345979787
>git branch
http://qiita.com/chihiro/items/e178e45a7fd5a2fb4599

SSH公開鍵認証の設定でやること

VPS RSA

RSA
鍵の生成から配置、ログインまで

■だいたいのやること
・鍵の生成
・鍵がセットになってるか確認
・鍵を配置
・サーバ側でrsa公開鍵認証を有効にする(無効の場合)
・鍵のパーミッション設定
・config設定でsshログインの簡素化(必要に応じ)

■参考
http://qiita.com/HamaTech/items/21bb9761f326c4d4aa65
https://webkaru.net/linux/ssh-keygen-command/
http://blog.dacelo.info/linux/entry-948.html

FuelPHP002　Apacheモジュール「mod_rewrite」機能

FuelPHP Apache

Apacheモジュール「mod_rewrite」機能

■意図
検索エンジン対策などを考慮した場合、動的に生成されたページとわかるURLだと望ましくない場合があるため、対象機能でURL読み替えを行う。
※oil createでpjt作成した場合は、デフォルトで記載済み。

■ファイル格納場所
XAMPPの初期値の場合
htdocs/ pjtName/ public
.htaccess

■記述箇所

RewriteEngin on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]


■結果
from(記述なし)
http://localhost/pjtName/public/index.php/welcome

to(記述あり)
http://localhost/pjtName/public/welcome

web027　上付き/下付き文字で利用する要素(sup/sub)　* ...

html

上付き/下付き文字で利用する要素(sup/sub)　* ...

f:id:neko_kick_panch:20170705003729p:plain

・supタグはsuperscriptの略で、上付き文字を表す際に使用します。
・下付き文字はsub(subscription)を利用する。

html

<p>必須項目の印<sup style="color: red;">*</sup></p>

■参考
<sup>－HTML5タグリファレンス
上付き文字を表すsup要素＞テキストに意味を持たせる正しいXHTMLタグ（10/20） − ＠IT

FuelPHP001　FuelPHPの概要

PHP FuelPHP

FuelPHPの概要

■コントローラ-----------------------------
・コントローラは「class」として実装する。
・コントローラクラス内のメソッドを「アクション」と呼ぶ。
・コントローラの役割はおおきく３つある。

　1.通常
Controllerクラスを拡張して作成する。

　2.テンプレートコントローラ
Controller_Templateを拡張して作成する。

　3.REST
WebAPIとしてRESTフルなリクエストに対して、XMLやJSON形式の
データを送受信するためのController_Restをを拡張するRESTコントローラ。

※REST
REST(REpresentational State Transfer)は、Webサービスの設計モデルです。
RESTなWebサービスは、そのサービスのURIに
HTTPメソッドでアクセスすることでデータの送受信を行います。

■URLセグメントとルーティング
FuelPHPでは、URLを元に、どのコントローラを呼び出すかを決めている。

例）
http://www.sample.com/index.php/sgm1/sgm2/sgm3/...
sgm1:という名前のコントローラを探す。
sgm2:アクション名と解釈される。

■View-----------------------------
・HTMLを記述したファイル。
・fuel/app/views/ここ　に格納。

■Model-----------------------------
・コントローラおよびViewModelから呼び出すことも可能。
・実装はいずれかの種類がある。

　1.Modelクラスを拡張
実際にはプロパティやメソッドが全く定義されていないクラス。
DB問合せはDBクラスを使うなどをして、クエリ生成するコードを、
モデル内に直接記述することになる。

　2.Model_Crudクラスを拡張
あらかじめCRUD用のメソッドが用意されているクラス。

　3.\Orm\Modelクラスを拡張
\Orm\Modelクラスは、ORMパッケージで提供されるクラス。
DBのテーブル間のリレーションをあらかじめクラス内に設定することで、
関連テーブルのデータを同時に取得/変更できる。


■参考
本：FuelPHP入門
REST：http://qiita.com/TakahiRoyte/items/949f4e88caecb02119aa

jQuery008　スクロールボタン

JavaScript jQuery

スクロールボタン

f:id:neko_kick_panch:20170702205202p:plain

■考え方
とある酒屋さんのコンテンツを想定した場合
・画面をローディング時、「offsetメソッドで高さを取得」し変数へ入れる。
・クリックイベント時、animate({scrollTop: topOffset }で、取得した高さまで移動する。

※注意として、readyやloadで全て読み込み完了後でもうまく高さが取得できない(値の取得はできているが変数に異なる値がはいってしまう)ため、高さ指定(height)を明示的に指定する必要がある（ように見える）。


■コード
script.js

$(window).on('load',function(){

  //menuの表示・非表示のタイミング
  $('.mobile-menu').on('click touchstart',function(){
  if ( $('.mobile-menu-list').css('display')=='none'){
    $('.mobile-menu-list:not(:animated)').fadeIn('slow');
  } else {
    $('.mobile-menu-list:not(:animated)').fadeOut('slow');
  }
  });

  //初期準備
  var mobileMenuBtn = $('#mobile-menu');
  var mobileMenuListBtn = $('#mobile-menu-list');

  var topBtn =$('#top-btn');
  var sakeBtn =$('#sake-btn');
  var kuramotoBtn =$('#kuramoto-btn');
  var accessBtn =$('#access-btn');

  var topOffset = $('#top').get( 0 ).offsetTop;
  var sakeOffset = $('#sake').get( 0 ).offsetTop;
  var kuramotoOffset = $('#kuramoto').get( 0 ).offsetTop;
  var accessOffset = $('#access').get( 0 ).offsetTop;
  console.log('#topの取得位置：'+topOffset);
  console.log('#sakeの取得位置：'+sakeOffset);
  console.log('#kuramotoの取得位置：'+kuramotoOffset);
  console.log('#accessの取得位置：'+accessOffset);
  //.get( 0 ).offsetTop;
  //.offset().top;

  //トップへ戻るボタンの表示・非表示タイミング
  //mobileMenuBtn.hide();

  $(window).scroll(function () {
    if ($(this).scrollTop() > sakeOffset) {
      mobileMenuBtn.fadeIn();
    } else {
      mobileMenuBtn.fadeOut();
      mobileMenuListBtn.fadeOut();
    }
  });
  
  //スクロールしてトップへ移動。移動スピードと停止位置の調整。
  topBtn.click(function () {
    $('body,html').animate({scrollTop: topOffset }, 500);
    $('.mobile-menu-list').css('display','none');
    return false;
  });
  
  //.sakeコンテンツへ移動
  sakeBtn.click(function () {
    $('body,html').animate({scrollTop: sakeOffset}, 500);
    $('.mobile-menu-list').css('display','none');
    return false;
  });

  //.kuramotoコンテンツへ移動
  kuramotoBtn.click(function () {
    $('body,html').animate({scrollTop: kuramotoOffset}, 500);
    $('.mobile-menu-list').css('display','none');
    console.log('#kuramotoの移動位置：'+kuramotoOffset);
    return false;
  });
  
  //.accessコンテンツへ移動
  accessBtn.click(function () {
    $('body,html').animate({scrollTop: accessOffset}, 500);
    $('.mobile-menu-list').css('display','none');
    return false;
  });

});/*onload*/

■参考
http://www.webopixel.net/javascript/538.html

web026　ハンバーガーメニュー

html css

ハンバーガーメニュー

f:id:neko_kick_panch:20170611012331p:plain

■考え方
・span要素のみで、cssで装飾していく。
・positionで配置
・擬似クラス(::before,::after)で要素を追加する。
・::afterは::beforeの直下に配置されるため、marginの取り方をうまく計算する。
・表示されるコンテンツは、jQuery(fadeToggle()など)で表示/非表示を行う。
・clickイベントには、

■コード
html

<div class="btn">
　<span></span>
</div><!-- .btn -->

css

.btn{
  width: 50px;
  height: 50px;
  border-radius: 5px;
  background: #2e4750;
  position: absolute;
  top: 3px;
  right: 3px;
  cursor: pointer;
}
.btn span{
  display: block;
  width: 30px;
  height: 3px;
  border-radius: 2px;
  background: #fff;
  position: absolute;
  top: 23px;
  right: 10px;
}
.btn span::before{
  content:"";
  display: block;
  width: 30px;
  height: 3px;
  border-radius: 2px;
  background: #fff;
  margin-top: -10px;
}
.btn span::after{
  content:"";
  display: block;
  width: 30px;
  height: 3px;
  border-radius: 2px;
  background: #fff;
  margin-top: 17px;
}

■参考
http://www.invision-inc.jp/hamburger-button_jquery/
https://blog.fenrir-inc.com/jp/2011/06/ios_android_pc_touchevent.html