webプロダクトいんふぉ

webの気になった情報を発信中!!

ローカルサーバを他のPCで確認(共有)するには?

ローカルサーバの立て方

ローカルサーバを立てるには、xamppを使ったりといった方法があるが、
今回はコマンドとphpを使って行う。
rubyでもpythonでも可能

ビルドインサーバの使用

ビルドインサーバを使用するには、phpのバージョンが5.4.0以上が必要になる。
ターミナルもしくはコマンドプロンプトで下記のコマンドを打ってみて、バージョンが古い場合にはアップデートしてください。

$ php -v

phpインストール方法

windows
mac

インストールが完了したら、下記のコマンドを実行してサーバが立ち上がるか試してみましょう
下記のようになったら、http://localhost:8000にアクセスして、表示できたら成功です。

$ php -S localhost:8000
PHP 7.0.12 Development Server started at Mon Feb  6 18:39:08 2017
Listening on http://localhost:8000
Document root is /Users/xxxxxx/Desktop/xxxxxx
Press Ctrl-C to quit.

他の人にも共有する

localhostのままでは共有できないので、IPv4アドレスを使用します。
windowsの方はコマンドでipconfigとすると
f:id:front-end-engineer:20170206184442p:plain
のような画面が出てきます。使うのはIPv4アドレスと書かれている数値の部分です(xxx.xxx.xx.xxx)
macの方は、スタートメニュー → システム環境設定 → ネットワーク → Wi-Fi
の中にあるコンテンツ部分に記載されているIPアドレスを使用します。
先ほど、localhostと書いた部分をIPアドレスに置き換えます。
※サーバを止めるには、Ctrl + c で止まります

$ php -S 192.168.1.181:8000
PHP 7.0.12 Development Server started at Mon Feb  6 18:52:17 2017
Listening on http://192.168.1.181:8000
Document root is /Users/xxxxxx/Desktop/xxxxxx
Press Ctrl-C to quit.

複数人でアクセス

Listening on http://192.168.1.181:8000
となっているURLにアクセスしてみて無事にアクセスできたら別の端末でも同じURLにアクセスしてみてください。
複数人でローカルサーバが見えるはずです。
※同じwifiもしくはルータをお使いください。そうしないとIPアドレスが合致しないためwebページが見れません(ローカルサーバを立てた人のみしか見れない)。

HTMLが絡んだPHPのコードをコメントアウト

コメントアウトの仕方

PHPコメントアウトの仕方には3つあります

//を用いる

<?php
  echo "hello world!"; // hello worldを出力
?>

コメント範囲を/**/で囲う

<?php
  $a = "hello world!";
  if(!$a.empty) {
    echo $a;
  }
  /*else {
    echo "$aが空です";
  }
  elseは実行しない*/
?>

#を用いる(非推奨)

//と同じような意味なのでこちらは使用しない

<?php
  echo "hello world!"; # hello worldを出力
?>

本題のHTMLが絡んだPHPのコードをコメントアウト

以下のコードをテキストエディタのショートカット(Ctrl or Command + / )を利用してコメントアウトしてみます。

<?php
  <option value="2016年9月10日 18時~ 東京"
    <?php echo (isset($post['日時']) == '2016年9月10日 18時~ 東京' && $post['日時'] == '2016年9月10日 18時~ 東京') ? 'selected="select"' : '' ; ?>>東京 9月10日 18時~
  </option>
?>

コメントアウトした結果は以下のようになり、HTMLだけがコメントアウトされPHPコメントアウトされていないためにエラーの原因になります。

<?php
  <!-- <option value="2016年9月10日 18時~ 東京"
    <?php echo (isset($post['日時']) == '2016年9月10日 18時~ 東京' && $post['日時'] == '2016年9月10日 18時~ 東京') ? 'selected="select"' : '' ; ?>>東京 9月10日 18時~
  </option> -->
?>

エラーを起こさないためにはHTMLを含んだコードをPHPの一部とみなして、PHPの複数行コメントアウトを使用すれば両方のコードがコメントアウトされます。

<?php
  /*
  <option value="2016年9月10日 18時~ 東京"
    <?php echo (isset($post['日時']) == '2016年9月10日 18時~ 東京' && $post['日時'] == '2016年9月10日 18時~ 東京') ? 'selected="select"' : '' ; ?>>東京 9月10日 18時~
  </option>
  */
?>

一行だけであれば、//で対応しても問題ありません。HTMLが絡んだPHPのコードをコメントアウトをするときには、PHPコメントアウトを使用するように意識すれば戸惑うこともなくなるはずです。

MacBook Proの2016モデル

iPhone7

iPhone7の予約開始から2日経ちましたが、皆さんは既に予約しているのでしょうか。自分は今回見送っています。felica対応は嬉しいけれども、Apple Payに対応しているモノが所有しているやつと合わなかったのが主な理由(Suicaのみ対応とか)

現代モデルから16Gが廃止になってaplle製品が色々と値下がりしましたね。iPadProとか最上位モデルだと3万円安くなってるし、iPadProも春くらいに新型モデルが出るとか言われてますけど、我慢するか買うかは人それぞれ何で個人の采配に任せるってことで

MacBook Pro

そんなこんなで自分が期待しているのは、macOS Sierraのリリースは現地時間9月21日ということで、MacBook Proの発売日は10月に来るのかなぁ〜と予想を立てながら待っています。今使っているMacBook Proが悲鳴をあげていて、そろそろ出てくれないときついので、Appleには切にお願いしたいと思っています!今の現行モデルを買うのは負けた気がするので、それだけは選択肢としてありえない。

先日のスペシャルイベントでも期待していたので、かなり残念でした!iPhone7の発表の後MVが流れた時の絶望感は今でも思い出せます(つい先日ですが)

MacBook Proが出れば、IT界隈であればiPhone7の発表よりも盛り上がることは間違いなしと思っているので、続報を待ちましょう!!

Rails標準のO/RマッパーであるActive Recordとは?

O/Rマッパー

Object/Relatinalの略で、リレーショナルデータベースとオブジェクト指向言語との橋渡しを受け持つライブラリです。

そもそも、アプリケーション(フロント)側で使用するオブジェクトモデルと、データベースが利用するリレーショナルモデルは決定的に構造が異なるため、フォームから受け取った値などをオブジェクトから一つ一つ取り出したりといった手順が必要でした。

単純な作業ではあるが、上記の手順などがアプリケーションコードの半分以上を占めていたと言われています。

このようなコードの冗長化を解消するために、オブジェクトモデルとリレーショナルモデルのミスマッチを解消するためのツールです。

例えば、usersテーブルみたいなのがあり、下記のようなカラムを用意してあげます。

  • id
  • email
  • tel
  • password

そうしたら、上記のカラムに対応するオブジェクトを用意すれば、

{id: 1

email: aaaa@aaa.com

tel: 000-0000-000

password: password}

このままデータベースに登録することができます。つまり、オブジェクトを分解してidはidカラムに対応しているというような設定が必要なくなります。

Acrive Record

Active Recordを利用することで、リレーショナルデータベース(Excelのような表形式のデータ)をあたかもオブジェクトであるかのように操作ができるようになります。

その上、基本的にはsqlコマンドを記述する必要がありません。sqlにはMySQLPostgreSQL毎に一部書き方が違いますが、O/Rマッパーは内部的にその差異を吸収してくれるので、接続先のデータベースを変更してもアプリケーションへの影響が最小限に抑えられます。

 

カルーセルスライダーを条件別にスライド位置を変える

ルーセルスライダーとは?

画像やコンテンツがスライドして別のコンテンツを切り替えて表示する方法
DEMO
Download

ライブラリとしては、良くslick.jsbxslider.jsが使われる
個人的にはslick.jsが使いやすい。カスタマイズする際、bxsliderはハマりやすい。その代わり、高機能。

今回はslick.jsを使用する。

slick-theme.cssは必須ではないですが、公式のdemoみたいな見た目にしたいのであれば入れた方がいいです。一応jQueryも読み込んでいます。

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="css/slick-theme.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

適当にヘッダー部分と、スライドコンテンツを作ります。

注意点としては、スライドさせたいコンテンツはdivタグで括ってあげることです。ulタグなどで括るとうまく動作しません。

<header id="header">
  <div id="header-inner">
    <h1>SlickSample</h1>
    <ul class="flR">
      <li><a href="#one">one</a></li>
      <li><a href="#two">two</a></li>
      <li><a href="#three">three</a></li>
    </ul>
  </div>
</header>

<div class="slide-wrapper slider">
  <div>
    <img src="img/slide_01.jpg" alt="">
  </div>
  <div>
    <img src="img/slide_02.jpg" alt="">
  </div>
  <div>
    <img src="img/slide_03.jpg" alt="">
  </div>
</div>

jsでslick.jsのメソッドを呼んでいます。中に書いている「accessibility」、「dots」などはオプションです。見た目や動きなどを変えたいときには、ここ(自分で書くjs)とslick-theme.cssをカスタムすることになります。

オプション一覧

オプション名 デフォルト 説明
accessibility bool true 左右のナビゲーションの有効/無効
autoplay bool false オートプレイの有効/無効
autoplaySpeed int 3000 スライドが切り替わる時間(ms)
dots bool false カレント表示のナビゲーション
arrows bool true 前へ/次へナビゲーションの有効/無効
initialSlide int 0 最初のスライド位置

オプションは他にも多々あるので、興味がある方は公式サイトを参考にしてみてください。settingsが該当箇所です。

$('.slide-wrapper').slick({
  accessibility: false,
  dots: true,
  arrows: false,
  autoplay: true,
  initialSlide: slide_int
});

先程、書いたjsの前に追記してあげます。ヘッダーメニューをクリックした時に、URLに付与された#***で条件判定してあげて、どのスライドを最初に出すかを選択してあげるjsです。

これで、メニューごとにスライドの初期位置を出しわけることが可能です。

var slide_int = 0;
$('.flR a').on('click', function(){
  location.reload()
});

var href = location.href.substr( location.href.indexOf("#") );
if(href == "#one") {
  slide_int = 0;
} else if(href == "#two") {
  slide_int = 1;
} else if(href == "#three") {
  slide_int = 2;
}

$('.slide-wrapper').slick({
  accessibility: false,
  dots: true,
  arrows: false,
  autoplay: true,
  initialSlide: slide_int
});