東京ロケット CEO 兼 見習いサーバーサイドエンジニアのプログラミング学習日記

見習いサーバーサイドエンジニアのボクが、主にプログラミング学習の記録をしていきたいと思います。主にPHP。

2017年 新日本プロレス勢力図

最近めっぽうプロレスにはまっているボクですが、まだまだ新日ですら全ての選手を把握できていないお粗末な状況なわけです。
これではいかんと言うことで、ユニットごとに選手を整理しようと思い色々ググるんですが、これがバッチリなのがイマイチないんですね…。
じゃあ、自分のためにも、そして同じ境遇の人のためにも作ろうということで、この度2017年 新日本プロレス勢力図を作成しました!
選手をユニットごとに分けて、年齢も入れてあります。
年齢がわかると、先輩後輩の関係なんかも分かって面白いですよね。プロレスラーは基本テレビの前では目上の人も呼び捨てにするので分かりにくいのです。

これからプロレス好きになって、入り口として新日から入った人に役立つ情報になれば幸いです。
f:id:TRocket:20170508132700p:plain

解説

無類の新日好きのボクは、もちろん月額999円を払って新日本プロレスの試合は、全部観てるわけですが試合の内容が1番ですけど、「解説」も結構気になるわけです。
最近はミラノコレクションが多めですが、この人は苦手です。現役時代もよく知らないし、ちょっと大根なんですよね。
たまに出てくる獣神サンダーライガーもイマイチです。そんなこんなで解説に関しては満足していなかったボクなんですが、5.3博多どんたくで真壁がゲストで解説してるのを聞いて、「いいねー!」と思ったわけです。
f:id:TRocket:20170504205605p:plain
石井とケニーオメガの試合が、セミファイナルだったんですけど相変わらずケニーはうまいんですよね。
f:id:TRocket:20170504211051p:plain
個人的にはあまり応援してる選手じゃないんですけど、試合を観るとなんかうまいなーと思ってしまう。
その辺を言い得て妙なんです。
例えば試合開始スタートいきなりからの激しいスピーディな展開の後のエルボーの打ち合い。
f:id:TRocket:20170504204844p:plain
の中でケニーがチョップに代えてくるんですけど
f:id:TRocket:20170504204945p:plain
その時の真壁。
「このエルボーからチョップに変えてくるところ、うまいんですよねー。」
なるほどー。と思うわけです。
プロレスのシュートとブックの議論は色々と難しい問題で簡単には語れません。
でも、こーゆー事なんだなって感じました。
いい選手ってきっといつもこーゆー事を真面目にずっと考えてるんですよね。
お笑い芸人もそうですけど、この姿勢は見習いたいと思います。
プロレスの見方はもちろん人それぞれですけど、ボクはこーゆーところを感じたい。
そういえば、今日昼間電車の中で読んでいた本で蝶野の言葉が引用されてました。
「不安はあったほうがいい。何もないとそこで終わってしまうから」
グッと来ました。今のボクにぴったりの言葉でした。思わずページを折りました。

ティザーサイトに虫眼鏡を追加してみた

今日は鈴木先生が来る日なので、前からやろうと思っていて保留していたティザーサイトに虫眼鏡を実装をやってみました。
基本的には
OKZoom
これを使えば簡単に実装できる予定なんですが、このままだとマウスを乗せないと虫眼鏡が出ない仕様なんですね。
最初から任意の位置に出しておいて、マウスが行ったら移動させれるように改造してみました。
PCサイト用に作りましたが、スマホでもちゃんと動くように調整してます。(スマホ版はスワイプで表示です)
本当はスマホの時は、二本指と一本指で動作をgoogle map風に分けようかと思ったんですが、目的が違うなと思いとどまりサイズを小さくして端の方でスワイプできるようにしました。
では、始めます。まずは上記サイトからGithubに飛べるので
okzoom.min.jsをダウンロードしましょう。
f:id:TRocket:20170425223756p:plain
HTMLに下記のコードを貼り付けます。

<!--okzoom-->
<script src='js/okzoom.min.js'></script>
<script>
$(function(){
    $('.zoom').okzoom({
        width: 250,  // ルーペの幅
        height: 250,  // ルーペの高さ
        round: true,  // ルーペの形
        border: "8px solid black", // ルーペのボーダー指定
        shadow: null  // ルーペの影指定
    });
});
</script>

この辺は説明は大丈夫ですね。
cssでは画像のサイズは表示の1.5倍で作りました。2倍も試しましたがこの辺が丁度いいかと思います。
これで、あとは該当するイメージにクラス名zoomを追加すればOKなんですが、最近UIをちょっとお勉強し始めたボクとしては「マウス乗せないで気づかない人もいるんでない?」などど心配になり、最初に書いた任意の位置に虫眼鏡を出しておく。というのをどうしてもやりたくなってしまったわけです。
鈴木先生にokzoom.jsをハックして頂き下記のコードを追加します。
ここからがポイントですよ。

  zoom.each(function() {
    // 2回目は実行しない
    if ($(this).data('init')) {
      return;
    }
    // イメージの位置
    var offset = $(this).offset();
    // イメージの高さ
    var iHeight = $(this).height();
    // ウィンドウの高さ
    var wHeight = $(window).height();
    // ウィンドウの下端がイメージの高さの半分を超えてない時は、処理をしない
    if (scroll + wHeight < offset.top + iHeight / 2) {
      return;
    }
    // 虫眼鏡の位置の計算
    var option = {
      pageX: offset.left + $(this).data('offset-x'),
      pageY: offset.top + $(this).data('offset-y')
    };
    // イベントを偽装して発火
    $(this).data('init', true).trigger($.Event('mouseover', option));
    // ライブラリがカーソルを消すのをやめさせる
    $('body').css('cursor', 'auto');
  });

Cromeの検証ツールを使って色々調べて行くんですが、イベントを偽装して発火するところがなかなか苦労していました。(ボクは見てるだけ…。)
でも、JavaScriptはやっぱり勉強するのも楽しいですね。作ってる感がとてもあります。
PHPの勉強はちょっとお休みして、しばらくJSをゴリゴリやろうかと思い始めました。
最後にHTMLのイメージに付けるクラスのところも位置を個別に調整できるように下記のように追加します。

<html>
<div class="col-md-6"> <img class="img-responsive zoom" src="images/feature-mobile_5.png" data-offset-x="260" data-offset-y="400"> </div>
</html>

さあ、ティザーサイトがますますCOOLになっちゃいました。
内容もリニューアルしています。ぜひ虫眼鏡で遊んでみてくださいねー。
suke-dachi.jp

クッキーについて

Cookiesのセットと取得を理解するのに分かりやすいコードを書いてみました。
$cookies()を使い10秒間有効なクッキーをセットします。
$_COOKIE[]で値を参照します。

最初はクッキーが無いので、「クッキーがありません」と表示されます。
f:id:TRocket:20170413153958p:plain
10秒以内にリロードをすればその回数をカウントして、クッキーの枚数が増えます。
f:id:TRocket:20170413154015p:plain

<?php
//setcookie("キー","値","有効期限")
//取り出し方  $_COOKIE["キー"]

//はじめに$countに1を入れる
$count = 1;
//setcookies()の値を取り出す $_COOKIE["キー"]
//もし$_COOKIE["count"]に値があれば
if (isset($_COOKIE["count"])) {
	$count = $_COOKIE["count"]; //$countに$_COOKIE["count"]の値を代入して
	$count++; //$countに1足す
}
setcookie("count", $count, time() + 10 );//有効期限10秒で
//setcookies("キー","値","期限")
?>

<HTML>
<HEAD>
<TITLE>クッキーのテスト</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
</HEAD>
<BODY>
クッキーのテスト<BR>
<BR>

<?php //もし$countが1だったら、「初めての…」それ以外は$countを表示していく
  
if ($count == 1) {
print "クッキーはありません。<BR>このページをリロードしてください。<BR>";
} else {
  print "クッキーは";
  print $count ;
  print "枚です。<BR>";
  print "10秒以内にリロードするとクッキーの枚数が増えます。";
}
?>

配列をソートする。色々なsort

配列のデータやキーを並べかえる機会は多いと思います。
そんな時はsort関数を使うわけですが、種類が色々あります。
実戦では鈴木先生曰く、usort()を使うみたいですが手元に本には記載がなかったので、今回は基本的な6つを紹介します。

①sort()
②rsort()
連想配列をソート
③asort()
④arsort()
⑤ksort
⑥krsort
それぞれの違いはこんな感じです。

<?php
//配列をソートする
$numbers = [100,74,2,15];

sort($numbers);
print_r($numbers);
print "sortはデータを昇順";
print "<br>";

rsort($numbers);
print_r($numbers);
print "rsortはデータを降順";
print "<br>";


  //連想配列をソートする
$sales = ["staff1"=>"ヨウイチ","staff2"=>"イシン","staff3"=>"スズキ"];

asort($sales);
print_r($sales);
print "asortはデータを昇順";
print "<br>";
  
arsort($sales);
print_r($sales);
print "arsortはデータを降順";
print "<br>";

ksort($sales);
print_r($sales);
print "ksortはキーを昇順";
print "<br>";

krsort($sales);
print_r($sales);
print "krsortはキーを降順";
print "<br>";

?>

結果はこうです。
f:id:TRocket:20170412111006p:plain

ちなみにusort()はこちらを参照してください。
PHP: usort - Manual

implode()とexplode() 配列<->文字列

配列を文字列にしたり、文字列を配列にしたりすることは多いです。
そんな時はこの二つの関数を用います。
まずは配列から文字列です。

<?php
//配列から文字列を作成する
$data =["ぞう","キリン","くま","さる"];
$result =implode(',',$data); //implode(区切り文字,文字列);

print $result;

?>

こんな感じです。
f:id:TRocket:20170411164240p:plain

次は逆です。文字列から配列を作ります。

<?php
//文字列から配列を作成する
$string ="ぞう,キリン,くま,さる";
$array =explode(',',$string); //explode(区切り文字,文字列);

print"<pre>"; //preタグはvar_dumpやprint_rを使う時にセットで使うと見やすくなります。
var_dump($array);
print"</pre>";
?>

こうなります。
f:id:TRocket:20170411164526p:plain

str_replace関数 文字列を置き換える

これはよく使う関数です。特に便利だなーと思ったので書いておきます。
では、自己紹介文のボクの名前をイシンに変えてみたいと思います。

<?php

$profile ='私はロケ太郎です。'; //$pofileに文字列を格納します。
$result =str_replace('ロケ太郎','イシン',$profile); //str_replace関数を使います。
//第1引数は「変えたい文字」第2引数は「変えた後の文字」第3引数は「文字列を入れた変数名」
print $result;

?>

ね。便利でしょ。