常連

注目の的

拍手喝采

自己紹介

Youtube Data APIを利用して、「複数のチャンネルのライブ配信状況をチェックし、ライブ配信中だった場合は処理をする」という動作を実装しようと思い、ネット上の記事を参考に下記のコードを書きました

その結果、処理を実装することはできたのですが、YouTube Data APIにはクォータの制限があり、現状その消費量が馬鹿にならないので、もっと無駄を省けないかと思い質問致しました

---
以下は現在のコードです

```ここに言語を入力
define('YOUTUBE_API_KEY', '###'); // APIキー
function json_get($url, $query = array(), $assoc = false) { 
    if ($query) $url .= ('?' . http_build_query($query, '', '&', PHP_QUERY_RFC3986));
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false); 
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, 10); 
    $responseString = curl_exec($curl);
    curl_close($curl);
    return ($responseString !== false) ? json_decode($responseString, $assoc) : false;
}
function h($value, $encoding = 'UTF-8') {
    return htmlspecialchars($value, ENT_QUOTES, $encoding); 
} 
function eh($value, $encoding = 'UTF-8'){
    echo h($value, $encoding); 
} 
foreach($streamers as $streamer){ //streamers配列には複数の動画配信者の情報(チャンネルID等)が含まれる
    $response = json_get('https://www.googleapis.com/youtube/v3/search', array(
        'key' => YOUTUBE_API_KEY,
        'channelId' => $streamer['channelID'], 
        'part' => 'snippet', 
        'eventType' => 'live', 
        'type' => 'video', 
    ), true);
    if($response["items"]!=null){ //ライブ中かどうかの判定(配列の内"item"の中身が空かどうかで判断)
        //ライブ中だった場合の処理
    }
}
```

Youtube Data APIから受け取る情報の内、必要なものは「ライブ配信中かどうか」という情報だけであり、それ以外については利用しておりません

もしコードの中に無駄な記述等があればご教授いただけると嬉しいです

Youtube Data APIを利用してチャンネルのライブ配信状況を取得する方法

実現したい事の追記と、最新のソースを更新しました。

---

タグで描画している部分のみ、backgroundに敷いている要素を表示し、それ以外は透明にする方法は無いでしょうか？
もちろん、必要であればjsを使うことは構いません。

## やりたいこと
波紋のように、ドーナッツ常にマスキングしたいと考えています。
ドーナッツの内側は、background-colorを指定するのではなく、透過させたいです。

### 実現したいイメージ
下記のように、枠の部分のみ背景を表示したいと考えています。
枠内部は投下されていて、枠の裏にある要素が見えるようにしたいです。

![イメージ説明](4b9799bdcba0ff37c94e03b3f8a82858.jpeg)

拙い説明画像で申し訳ありません。

## ソースコード
### HTML
cardというクラスが内側に表示される要素で、
rippleというのが枠の要素になります。

```html
<div class="card"></div>
<div class="ripple">
  <div class="ripple_circle"></div>
</div>

```
### css
説明用のコード自体はSCSSです。

```scss
body {
  margin: 0;
  display: grid;
  height: 100vh;
  place-items: center;
  background-color: #000;
}

// 真ん中に表示する要素
.card {
  height: 100px;
  width: 100px;
  background-color: red;
  margin-top: 20px;
}

// 枠要素
.ripple {
  position: absolute;
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  background: url(https://dl.dropbox.com/s/wwvut9frq0k4ukf/3_512.jpg);
  clip-path:  circle(50px at 50% 50%);
  transform: translate(-50%, -50%);
  animation: wow 2s ease-out forwards infinite;
  &_circle {
    position: absolute;
    width: 100%;
    height: 100%;
    &::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      top: 50%;
      left: 50%;
      background-color: rgba(0,0,0,0);
      background-clip: padding-box;
      transform: translate(-50%, -50%);
      animation: riple01 2s ease-out forwards infinite;
    } 
  }
}

@keyframes wow {
  0%{
    clip-path:  circle(0px at 50% 50%);
  }
  20%{
    clip-path:  circle(50px at 50% 50%);
  }
  100%{
    clip-path:  circle(200px at 50% 50%);
  }
}

@keyframes riple01 {
  0% {
  }
  20% {
    width: 0;
    height: 0;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}
```

## codepen
下記で動的に動く要素については確認できます。
[https://codepen.io/websandbag/pen/RejOZp](https://codepen.io/websandbag/pen/RejOZp)

### 追記
[jjj_aaa](https://teratail.com/users/jjj_aaa)様よりご共有いただいたソースを参考に、白い枠に要素を表示する事は実現方法を追記しました。
枠の後ろにある要素を透過する事はまだ実現できていません。
![イメージ説明](01bb384faa06d5d8b2657399b407e820.png)

[https://codepen.io/websandbag/pen/EdogaM](https://codepen.io/websandbag/pen/EdogaM)

上記のソースでは、透過したい部分を半透明にしています。  
実際は、半透明の部分を透明して後ろに配置している赤い要素を見えるようにしたいです。

[CSS]動的に動く要素でマスキングを行う方法は無いでしょうか？

三角形のボタンを作りたいと思っているのですが、作ってみると三角形の上の部分が切れてしまいます。また、三角形の部分を押すと反応するボタンを作ることはできますか？
お願いします。
```html
コード
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="ke.css">
</head>
<body>
<input id="upbutton" class="up" type="button" name="" value=" ">
</body>
</html>

```
```css
コード
.up{
	width: 0px;
	border-color: #d9534f;
	border-style: solid;
	border-width: 30px;
	border-left-color: transparent;
	border-top-color: transparent;
	border-right-color: transparent;
}
#upbutton{
	width:100px;
	height:100px;
}
```

![](af03661912fdd8e9f057d45cbe7a77f0.png)

三角形のボタンの作り方がわからない

HTML5の<audio>タグで複数のプレーヤーを配置したサイトを作ろうと思ってテストしています

複数のプレーヤーをそれぞれ再生することができてしまい、音が被ってしいます。

再生⇒停止（終了）しないと別なプレーヤーが再生できないようにする手段はないものでしょうか？

宜しくお願いいたします。

```ここに言語を入力
html5
<div class="sound"><audio src="sound_01.mp3" controls></audio></div><div class="soundtext">サウンド1</div>
<div class="sound"><audio src="sound_02.mp3" controls></audio></div><div class="soundtext">サウンド2</div>
<div class="sound"><audio src="sound_03.mp3" controls></audio></div><div class="soundtext">サウンド3</div>
```

HTML5の<audio>複数、同時再生をできないようにしたい。

### 前提・実現したいこと

WordPressで、動画検索サイトを作成しています。
一覧にあるサムネイル画像をクリックするとポップアップで動画が開いて自動再生されるように実装したいのです。

下記のテーマとプラグインを使用しています。
テーマ：Underscores（https://underscores.me/）
プラグイン：colorbox（http://www.jacklmoore.com/colorbox/）

ちなみに、動画再生はポップアップでなくても、画面サイズいっぱいに表示できればいいのですが、「閉じるボタン」をクリックして閉じるような仕様にしたいので、ポップアップで画面サイズいっぱいに表示するのがいいかと思ってそうしています。

### 困っていること
このサイト（↓）を参考に、まずはクリックするとポップアップで動画再生する機能を作成してみました。
▼colorboxを使用してポップアップしたあとに動画を自動再生したい
http://creatornote.nakweb.com/popup_autoplay/

ですが、動かずに困っています。

具体的にいうと、
「クリックすると動画が表示されるよ」という文字をクリックしても、ポップアップも開きませんし、何も起きません。

唯一、ブラウザのURLが
「http://localhost/」→「http://localhost/#movie_test」に変化します。


### 該当のソースコード

```html
<section class="movie_wrap">
  <div class="mv_map">
    <a class="inline" href="#movie_test">
      <p>クリックすると動画が表示されるよ</p>
    </a>
   </div>
  </section>
 <div style="display: none;">
    <div id="movie_test" class="movie_list_wrap">
    
    <video preload="auto" controls id="video">
    	<source src="http://creatornote.nakweb.com/wp-content/themes/giraffe/images/test.mp4" type="video/mp4" class="mv01">
    </video>
    </div>
</div>
```
```CSS
/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxContent{margin-top:20px;background:#000;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{border:5px solid #000; background:#fff;}
        #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
        #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
        #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
        
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
        #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(images/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:bottom left;}
        #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(images/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
        #cboxNext:hover{background-position:bottom right;}
        #cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(images/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
        #cboxClose:hover{background-position:bottom center;}

```
```JQuery
jQuery(document).ready(function($){
    $('.inline').on('click', function(){
        $(".inline").colorbox({
            inline: true,
            rel:'group',
                  closeButton:'true',
            onComplete: function(){
            var video = $("#video").get(0).play();
                }
            }); 
        });
    }); 
```


また、ダウンロードしたCSSとJSを読み込むため、「function.php」に下記のコードを書いています。

// CSS呼び出し
function twpp_enqueue_styles() {
	wp_enqueue_style( 'colorbox-style', 'http://localhost/wp-content/themes/underscores/colorbox.css' );
}

add_action( 'wp_enqueue_scripts', 'twpp_enqueue_styles' );

// Javascript呼び出し
if (!is_admin()) {
   function register_script(){
	   wp_register_script( 'jqery', get_template_directory_uri() .'/js/jqery.js');
	   wp_register_script( 'colorbox', get_template_directory_uri() .'/js/jquery.colorbox-min.js');
        }
    function add_script() {
        register_script();
        wp_enqueue_script('jqery');
		wp_enqueue_script('colorbox');
        }
    add_action('wp_enqueue_scripts', 'add_script');
}

### 試したこと

表示した画面で「ページのソースを表示」をして、CSSとJSが読み込めていることは確認済みです。
コードに間違いがあるのかと思い、何回も見直したりしていますが、わかりません。。

どなたかご教授お願いいたします。

### 試したこと（追記）

投稿の中にvideoタグを挿入して動画が再生されるかを試したところ、こちらは問題なく動画再生されました。
```
<video controls autoplay src="http://creatornote.nakweb.com/wp-content/themes/giraffe/images/test.mp4"/></video>
```

WordPressで、画像をクリックするとポップアップで動画再生できる画面を作成したい（Underscores、colorbox使用）

ワードプレスでオリジナルテーマを制作しました。
これから記事の公開をしていくつもりなのですが
セキュリティについてどうしても不安なので質問させてください。

私のやった対策は下記の通りです。

・WordPressのバージョン情報を非表示にする
・初期のadminユーザーの削除
・パスワードは強固なものを使う
・管理者権限は１つのみ
・wp-config.phpへのアクセスを制限する600に設定
・コメント機能は使わないのでwp-comments-post.phpへのアクセス制限
・index ofの非表示に設定
・管理画面への初期設定のログインURLを変更
・SSL通信
・wordpressのバージョン情報を隠す
・サーバーはエックスサーバなのですが下記URLを参考にセキュリティの設定をしました。
http://pasonal.com/xserver-security-settings/
・初期設定のログインURLにアクセスしたユーザーのIPをブロック
・ログイン時にユーザー名にadmin,administrator,test,サイト名,サイト名-wordpressを入力したユーザーのIPをブロック
・セキュリティ対策のプラグインのインストール(Wordfence Security、SiteGuard WP Plugin)

サイトの公開前には
・テーブル接頭辞の初期設定の「wp_」以外のものに変更
・認証用ユニークキーを設定
・管理画面へのIP制限
を設定するつもりです。

他にもおすすめ設定などがありましたら教えてください。
よろしくおねがいします。

wordpressセキュリティ対策について

http://baba-s.hatenablog.com/entry/2017/12/30/230200を使わせていただき、
上記のページにあるスクリプト（下記）は、音に合わせてy軸にスケールが上がりますが、
音に合わせて分解したポリゴンを広げたいと思ってます。

```
using UnityEngine;

public class Example : MonoBehaviour
{
    public AudioSpectrum spectrum;
    public Transform[] cubes;
    public float scale;

    private void Update()
    {
        for ( int i = 0; i < cubes.Length; i++ )
        {
            var cube = cubes[ i ];
            var localScale = cube.localScale;
            localScale.y = spectrum.Levels[ i ] * scale;
            cube.localScale = localScale;
        }
    }
}
```分解したポリゴン（下記シェーダ）_PositionFactorのパラメーターをスクリプトで弄れるようにし（上記）のスクリプトを参考に音に合わせてポリゴンを広げたいと色々調べ試していたのですが分からず詰まってしまい、わかる方がいましたら返信くださると嬉しいです。
何卒よろしくお願いいたします。
```ここに言語名を入力
Shader "Unlit/NewUnlitShader"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
	    _PositionFactor("Position Factor", Range(0.0, 1.0)) = 0.2

	}
	SubShader
	{
		Tags { "RenderType"="Opaque" }
		LOD 100
		Cull off
		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
            #pragma geometry geom
 		
			#include "UnityCG.cginc"

			struct v2g
			{
				float4 vertex : POSITION;
				float3 normal : NORMAL;
				float2 uv : TEXCOORD0;
			};

			struct g2f
			{
				float2 uv  : TEXCOORD0;
				float4 pos : SV_POSITION;
				fixed4 col : COLOR;
			};

			sampler2D _MainTex;
			float4 _MainTex_ST;
			
			v2g vert (appdata_base v)
			{
				v2g o;
				o.vertex = v.vertex;
				o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
				o.normal = v.normal;
				return o;
			}

			float _PositionFactor;

			[maxvertexcount(3)]
			void geom(triangle v2g input[3], inout TriangleStream<g2f> tristream)
			{
				g2f o;

				float3 edgeA = input[1].vertex - input[0].vertex;
				float3 edgeB = input[2].vertex - input[0].vertex;
				float3 normalFace = normalize(cross(edgeA, edgeB));

				for (int i = 0; i < 3; i++)
				{
					o.pos = UnityObjectToClipPos(input[i].vertex + float4(normalFace, 0) * _PositionFactor);
					o.uv = input[i].uv;
					o.col = fixed4(0, 0, 0, 1.);
					tristream.Append(o);
				}

				tristream.RestartStrip();
			}
			
			fixed4 frag (g2f i) : SV_Target
			{
				
				fixed4 col = tex2D(_MainTex, i.uv);
				
				return col;
			}
			ENDCG
		}
	}
}
```

Unityでオーディオの周波数に合わせて分解したポリゴンを動かす

行き詰ってしまいまして、何かとっかかりだけでもアドバイス頂けたら助かります。

したいこと→MacSafari10.Xの閲覧確認をしたい。
使えるパソコン→WIndows10/Mac OSX High Sierra(購入時にこのOS)　あとiphone7ならある。
状態→
VirtualBoxを試そうとしてosxupd10.10.5.dmgをダウンロードしてきた。
仮想マシン作成時に当該Safariの対応バージョンだったYosemite指定、ほぼデフォルト
起動時にHD聞かれたのでdmgを指定して真っ黒な画面でPressESCとなっていたが、押しても反応せずここで止まってる。

まずdmgを落として来てるの自体が間違っている気はするんですが、
検索で調べてみても過去にyosemite落としていることが前提になっているため、
ストアで購入履歴がないバージョンなので、落とせなくて行き詰っています。
また、Macのダウングレード自体は極力したくなくて仮想マシンで試そうとしての状態なのですが、
何か方法はあるのでしょうか？（該当のMac Safariさえ見られればいいので何らかのエミュレート系でも良い）
まだバージョンあがってない実機を探してくるしかないのでしょうか？

古いMac Safariを検証をしたい

audioタグで音楽を再生させ、その再生が終わった後、また別のaudioタグで別の音楽を自動的に読み込み再生させるにはどうしたら良いでしょうか？

audioタグ終了後に別のaudioを再生させるには？

ワードプレスでブログを書いています。



①自分が書いた記事のURLをコピーしてtwitterに貼り付けて投稿すると、下のように表示されてしまします。

ブログのホームのドメイン　コピーした記事のタイトル
twitterカード（表示される画像はファビコン画像、タイトルはブログのホームのタイトル、その下のサイトの説明文とドメインが表示される）

記事のURLをコピーして貼り付けているのでブログのホームドメインの表示はいらないのと、twitterカードに表示される画像は記事のアイキャッチ画像にしたいのと、タイトルは記事のタイトルにしたいのと、サイトの説明文ではなく記事の説明文を表示したいのと、サイトのホームドメインではなく記事のURLを表示したいです。



②ブログ記事からtwitter共有ボタンを押してtwitterに投稿すると、下のように表示されます。

（記事のタイトル）
（ブログ記事のドメイン）
＠（サイトのホームのドメイン）より

こんな感じで表示されます。
記事のタイトル、その下にtwitterカードで記事のアイキャッチと記事タイトルと記事概要を表示したいのですがどうすればできますでしょうか？



一日中あれこれ調べて試行錯誤しましたがわかりませんでした。
もしわかる方がいましたら教えていただけたら助かります。

ワードプレスでtwitterカードやURLをコピーして貼った時の表示のされかた

タイトル通りですが、どのように動いて、正方形が作られてるのかわからなかったので、質問致しました。

ネットで検索すると以下のような記述がありました。

```ここに言語を入力
#wrapper {
    position: relative;
    width: 100%;
}
#wrapper:before {
    content:"";
    display: block;
    padding-top: 100%;
}
#content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
```

参考URL:[https://qiita.com/ryounagaoka/items/a98f59347ed758743b8d](https://qiita.com/ryounagaoka/items/a98f59347ed758743b8d)

padding-topの100%が横幅の100%を取るのは、わかったのですが、
・beforeでなぜ指定しているのか
・なぜcontent要素にもそれが影響するのか、どうやってcontent要素の縦横が決まっているのか
がわかりません。

どなたかご教授いただけるとうれしいです。
よろしくお願い致します。

CSSで正方形のdivを作る

課題の見本に読み込みが遅いとされる以前のCSSリセットが使われていました。
指示者を通して出題者にCSSリセットが古いということを言えばいいのかと同時に初心者の場合、CSSリセットを出来たものを使うのか、自分で作るのかどうしたらいいか分かりません。
https://kumaweb-d.com/web/reset-css/
そこで課題であらかじめ作っているCSSリセットを課題で使っていいのかも含めて聞こうと思います。
もし、課題であらかじめ作っているCSSリセットが使えないなら自分で作ろうと思うのですが、何から始めていいかよく分かりません。

よろしくお願いします。
リンクのマネをすればいいでしょうか？
[初心者向けリセットCSSを自作する手順まとめ](https://creive.me/archives/10438/)

初心者の場合CSSリセットはどうすればいいか？

標準のRaspbianに開発環境や自作アプリが入った環境があります。
このままDD等でイメージ（仮にsrc.imgと呼びます）を作成するとSDカードのサイズそのものになり、他のサイズが小さいSDカードにイメージを書き込むことができないため、実際に使用しているサイズ程度のイメージ（仮にdst.imgと呼びます）を作れないか試しているのですがうまくいきません。

試したのは
1．Ubuntu環境でsrc.imgの入ったuSDCardをマウント
2．gpartedを使ってパーティション最小サイズにする
3．空のuSDCardをマウント
4．gpartedでsrc.imgのパーティションを空のuSDCardにコピーし適用する
　（前方4MB空けるなど、プロパティで確認できる範囲で同じように)
5．dst.imgでRaspberryPiを起動してみると、HDMI環境ではRaspberryが4つ表示された状態で止まります。
　キーボードは認識しているようで、Ctrl+Alt+Deleteで再起動するなどの動作はします。
　SSHではログインできませんでした。



もう一つ試したのは
1．Ubuntu環境でsrc.imgの入ったuSDCardをマウント
2．gpartedを使ってパーティション最小サイズにする
3．Windows環境に1.のuSDCardをマウント
4．同じく空のuSDCardをマウント
5．EaseUS ToDo Backupの試用版を使って、src.imgのクローンを作成
6．結果は前者と同じでした。

単にパーティションの中身をコピーするだけではうまくいかないものなのでしょうか。
それともコピー自体が上手く行っていないのでしょうか

すでにこのような環境を実現されている方がおりましたら、回答よろしくお願いいたします。

自作のRaspbianのイメージサイズを縮小してコピーしたい

PHPフレームワークの選定を行なっています。
おすすめなFWや選定の際に重視すべき点がありましたらご教授お願いいたします。

現状では以下4点を重視したいと考えております。
- 綺麗なソースコードを保てる(設計や規約がしっかりしている)※最重要
- 習得難易度が低い。且つ、文献が多い。
- 公式リファレンスが充実している(翻訳されていると尚良し)
- ベンチマークが早い(遅いと言う評判がなければ良しとする)

また、以下の情報も補足させていただきます。
- 開発人数：5人程度(初心者も含む)
- 開発規模：中規模!?
- 今までMVCモデル以外のFWは使用経験がない

調査したフレームワークの感想
##CakePHP3
- 習得難易度は低い。
- 公式リファレンスは充実している。翻訳もだいぶ進んでいる。
- 設計や規則もしっかりしている。
- 国内のシェアは多いものの人気は右肩下がり
- Cakephp3はあまり普及していない!?

##Laravel
- トレンド(世界だけではなく国内でも人気急上昇)
- 文献も徐々に増え始めている
- 設計や規約がなく、自由度が高すぎる
- ベンチマーク遅い!?

##Symfony3
- 習得難易度が高め(Symfony3で少し扱いやすくなった!?)
- 徐々に人気を伸ばしている
- 大規模開発向け!?
- ベンチマーク遅い!?
- メリットを把握できていないが評価が高い

一旦は、文献多いことを考慮しているため人気のある上記3つのFWを調査しました。

ご意見ご感想よろしくお願いいたします。

PHPフレームワーク選定

現在Twitterのようにプロフィール画像を設定して一覧などにも並ぶ想定でとあるサイトを作成しています。
そこで、**SNSアプリのプロフォール画像設定の際のような切り抜きがしたいです。**


現在は以下のプラグインをもとに作成していますが、SP版ではスマホライクに上記の様な切り抜きが出来たらと考えています。
Cropper：http://fengyuanchen.github.io/cropper/

他に良いプラグインが無いか探しています。
ピンとくるものや方法が見つかりません。



**こちらを実現するのに最適なプラグイン等ありましたら
ぜひ教えて頂きたいです**！



【**Twitter切り抜き**】
![イメージ説明](170e1944ac2d2c5fcf3f7e1ea64beec8.jpeg)

SNSアプリ(Twitterやインスタ)のような画像の切り抜きがしたい

###前提・実現したいこと
CakePHP3.5でログイン認証をしてセッション情報を得たいと考えています。
config/app.phpで設定しているデータベース以外を参照した認証や権限設定の作り方がよく分かりません。
SQL文を投げて認証出来れば、すごく分かりやすいのですが。。。

また、マスター系のデータベースは、共有で利用しているため勝手に構成や更新が出来ないので、アプリ用のデータベースとの併用になります。
参考になるサンプルコードが見つからないため、ご教授のほどお願いします。



＜実現したい手順イメージ＞
１．ログイン画面で、ユーザーIDとパスワードを入力
２．db_master.tbl_user_auths を参照して認証（登録済みのパスワードは、MD5でハッシュ化済み）
３．認証出来たら、vw_usersを参照（ユーザーIDで絞り込み抽出）
４．vw_usersで得た情報をセッション情報に記録
５．セッション情報を基に記事の編集や表示内容を制限

###データベースの構成
MySQL
│
├ db_cakeapp		・・・config/app.phpでdefultのデータソースとして設定
│　├ tbl_books	・・・記事テーブル
│　├ tbl_roles	・・・ユーザー権限テーブル
│　└ vw_users		・・・ユーザー情報ビュー（db_masterのユーザーと役職情報など、権限情報が紐付け）
│
└ db_master
　　├ tbl_user_auths 　・・・認証テーブル（パスワードはMD5でハッシュ化済み）
　　├ tbl_users	・・・ユーザー情報テーブル
　　└ tbl_posts	・・・役職テーブル


###MySQLのCREATEコード
```
-- db_cakeapp.tbl_books
-- 記事テーブル

CREATE TABLE `tbl_books` (
	`book_code` INT(11) NOT NULL,
	`user_no` CHAR(6) NOT NULL,
	`title` VARCHAR(50) NOT NULL,
	`comment` VARCHAR(50) NOT NULL,
	PRIMARY KEY (`book_code`)
)
COLLATE='utf8_general_ci'
ENGINE=InnoDB
;


-- db_cakeapp.tbl_roles
-- ユーザー権限テーブル

CREATE TABLE `tbl_roles` (
	`user_no` CHAR(6) NOT NULL,
	`user_role` VARCHAR(50) NOT NULL,
	PRIMARY KEY (`user_no`)
)
COLLATE='utf8_general_ci'
ENGINE=InnoDB
;


-- db_cakeapp.vw_users
-- ユーザー情報ビュー

SELECT m_user.user_no, user_name, m_post.post_name, t_role.user_role 
FROM db_master.tbl_users AS `m_user`
LEFT JOIN db_master.tbl_posts AS `m_post` ON m_post.post_code = m_user.post_code
LEFT JOIN db_cakeapp.tbl_roles AS `t_role` ON m_user.user_no = t_role.user_no
;



-- db_master.tbl_user_auths
-- 認証テーブル

CREATE TABLE `tbl_user_auths` (
	`user_no` CHAR(6) NOT NULL,
	`password` VARCHAR(255) NOT NULL,
	PRIMARY KEY (`user_no`)
)
COLLATE='utf8_general_ci'
ENGINE=InnoDB
;


-- db_master.tbl_users
-- ユーザー情報テーブル

CREATE TABLE `tbl_users` (
	`user_no` CHAR(6) NOT NULL,
	`user_name` VARCHAR(50) NOT NULL,
	`post_code` INT(11) NOT NULL,
	PRIMARY KEY (`post_code`)
)
COLLATE='utf8_general_ci'
ENGINE=InnoDB
;


-- db_master.tbl_posts
-- 役職テーブル

CREATE TABLE `tbl_posts` (
	`post_code` INT(11) NOT NULL,
	`post_name` VARCHAR(50) NOT NULL,
	PRIMARY KEY (`post_code`)
)
COLLATE='utf8_general_ci'
ENGINE=InnoDB
;
```

###試したこと
公式サイトのチュートリアルにて、ログイン認証の項目を同じように作成してみましたが応用が分かりません。

###補足情報(言語/FW/ツール等のバージョンなど)
CakePHP3.5.4
MySQL
Apache
XAMPP

CakePHP3.5でログイン認証の作り方

中学生への課外活動として、深層学習を体験的に学習させる機会をつくりたいと思っています。
これまで、深層学習とは？についての講義などは行ってきたため、最低限の知識はある状態の生徒たちです。
その知識をより実践的なものにするため、体験的に学習させる授業を行いたいと思っています。
50分という短い時間のため、やれることは限られているのですが、何か良いアイデアをお持ちの方がいらっしゃればご教示頂ければ幸いです。

中学生に深層学習(ディープラーニング)を体験させたい

cakephp でcsvをアップロードして、データベースに追加したいです。
初心者です。

ググってビヘイビアとかプラグインとかが出てきたのですが、
イマイチうまくいきません。
どなたかお教え願いますか？（初心者ですからできれば解りやすく教えていただけますと、幸いです）

cakephp 2.10.3です。

csvインポートのやり方

CentOS7にLAMP環境を構築してPHPの勉強をしようとしています。
エディタを開いてPHPファイルを作成し、var/www/htmlにファイルを保存しようとしたら
アクセス権限がないと表示され保存できませんでした。
ユーザーにアクセス権限を与えたいのですが、そのやり方がよく理解できません。
ホームを開いて「その他の場所」→「コンピュータ」とクリックすれば色々なフォルダが出てくるのですが
端末で「ls -l」と叩いてもvarとかがあるフォルダが表示されず、アクセス権限をユーザーに与えるには
どうしたらよいかわかりませんでした。

Linux パーミッションについて

CakePHP3でPDF出力する必要が出てきました。

既存のPDFに動的に文字を埋め込んでいく仕様なので、
TCPDF+FPDIで実装した方が良いと思い、
composerを使って下記を入れました。

・tecnickcom/tcpdf
・setasign/fpdi
・setasign/fpdi-tcpdf

現在動作確認をしているのですが、
「Class 'FPDF' not found」とエラーになってしまいます。

Error:  Class 'FPDF' not found 
File /var/www/html/app/vendor/setasign/fpdi/src/FpdfTpl.php 
Line:  20

FPDFも入れる必要があったのでしょうか？
(「$pdf = new Fpdi();」のところは当初「$pdf = new FPDI();」にしてました)

```CakePHP3
use setasign\Fpdi\Fpdi;
class PdfController extends AppController {
    public function index() {
        $pdf = new Fpdi();
        $pdf->setSourceFile("template.pdf");
        $pdf->setPrintHeader(false);
        $pdf->setPrintFooter(false);
        $pdf->SetFont('kozgopromedium');
        $pdf->AddPage();
        $pdf->Text(10, 10, 'テスト');
        $pdf->Output('sample.pdf', 'D');
    }

```