Month: February 2018

ISO 3166-1 alpha-2

ISO 3166-1は、IOSによって発行されている国のコード。
alpha-2は、ラテン文字2文字で、alpha-3はラテン文字3文字。

例
United States 840 USA US
United Kingdom 826 GBR GB
India 356 IND IN
Japan 392 JPN JP
France 250 FRA FR

ロゴはgif、jpg, pngのどれにするべき？

JPG：サイズが小さい、非可逆圧縮、色数が大井、圧縮すると画質が悪くなる、サムネイルなどに適す
PNG:容量が大きい、圧縮しても画質が落ちない、グラフィック画像などに適す
GIF:svgやaiと相性が良い、256色しかない、グレースケール画像・アニメーション・フォント・バナーに適す

JPGは加工に適しておらず、容量優先の際に推奨されています。
画質が求められる場合は、PNGが良いようです。

ロゴはGIFかPNGが良いようです。

$_POSTでスクリプトの送信を制限する

$postをそのまま受け取ると、htmlタグやスクリプトを受け取ってしまいます。

例えば、以下のように、h1タグでhogeを囲って送ると、送られた先のhtmlでhogeがh1で表示されるケースを考えていましょう。

<h1>hoge</h1>

この場合、”htmlspecialchars” postから受け取った値を文字列に変換します。

$_SESSION["hoge"] = htmlspecialchars($_POST["foo"]);

結果、以下のように文字列として値が表示されます。

hoge

topへ戻る:Javascript

#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
  }
  #page-top a {
    background: #EEEEEE;
    color: #fff;
    width: 80px;
    padding: 25px;
    text-align: center;
    display: block;
    border-radius: 5px;
  }
  #page-top a:hover {
    backgorund: rgba(144, 144,144, 0.8);
  }

$(function(){
	var topBtn = $('#page-top');
	topBtn.hide();
	$(window).scroll(function(){
		if($(this).scrollTop() > 450){
			topBtn.fadeIn();
		} else {
			topBtn.fadeOut();
		}
	});
	topBtn.click(function(){
		$('body,html').animate({
			scrollTop: 0
		}, 500);
		return false;
	});
});

CSSをどこに置くか？

inlineでやりたいところですが、複数のHTMLファイルに対して共通のCSSを適用するため、外部にフォルダを作成し、そこに入れて読み込むことが一般的かと思います。

<link rel="stylesheet" type="text/css" href="asset/css/styles.css" />

多数の人間が制作に関わった場合などは、パーツによって、このclassはxxx.cssファイル、このidはyyy.cssファイルを読み込む、など、1つのページでも複数のcssファイルを読み込むことがあります。

問題は、大規模サイトで、CSSファイルを5～6個位読み込んでいて、後からチームにジョインした人が改修しようとした際に、それぞれ書き方も別々の為、なにがなんだかわからなくなる、ということがあります。

そこで、コーディングガイドラインを作成しようとなります。
では、Googleのコーディングガイドラインをみてみましょう。

– Not reccomended

<!DOCTYPE html>
<title>HTML sucks</title>
<link rel="stylesheet" href="base.css" media="screen">
<link rel="stylesheet" href="grid.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<h1 style="font-size: 1em;">HTML sucks</h1>
<p>I’ve read about this on a few sites but now I’m sure:
  <u>HTML is stupid!!1</u>
<center>I can’t believe there’s no way to control the styling of
  my website without doing everything all over again!</center>

-recommended

<!-- Recommended -->
<!DOCTYPE html>
<title>My first CSS-only redesign</title>
<link rel="stylesheet" href="default.css">
<h1>My first CSS-only redesign</h1>
<p>I’ve read about this on a few sites but today I’m actually
  doing it: separating concerns and avoiding anything in the HTML of
  my website that is presentational.
<p>It’s awesome!

外部ファイルは一つにして、そこから読み込むことが推奨されています。その他も参考になります。
https://google.github.io/styleguide/htmlcssguide.html#CSS_Style_Rules

dl要素とdt要素

まず、スタイリングしていない状態です。

<body>
	<form action="/" name="search1" method="post">
		<dl class="search1">
			<dt><input type="text" name="search" value="" placeholder="Search"></dt>
			<dd><button>Search</button></dd>
		</dl>
</body>


	<style>
	dl.search {
		position:relative;
	}
	dl.search dt{
		margin-right:105px;
		padding:8px;
		background-color:#fff;
		border:1px solid #aaa;
	}
	dl.search dd{
		position:absolute;
		top:0;
		right:0;
	}
	dl.search dt input{
		width:100%;
		height:24px;
		line-heigh:24px;
		background:none;
		border:none;
	}
	dl.search dd {
		position:absolute;
		top:0;
		right:0;
	}
	dl.search dd button{
		display:block;
		width:100px;
		height:42px;
		color:#fff;
		line-height:40px;
		text-align:center;
		background-color:#f66;
		border:1px solid #c66;
	}
	</style>

php foreach でpostが動かない訳

下記のように、ループしてnameが競合するとpostが動きません。

<?php 
  			foreach($result as $key => $value){
  				echo '<form method="post" name="form1" action="result.php">
			<a href="javascript:form1.submit()">' .$value.'</a>
    		<input type="hidden" name="search" value="' .$value.'">
			</form>';
  		}
  		?>

nameをユニークにしたら、解消します。

<?php 
  			foreach($result as $key => $value){
  				echo '<form method="post" name="form'.$key.'" action="result.php">
			<a href="javascript:form'.$key.'.submit()">' .$value.'</a>
    		<input type="hidden" name="search" value="' .$value.'">
			</form>';
  		}
  		?>

これを解決するのに、2時間くらいかかりました。私はいったい馬鹿？？

Youtube api v3で動画サイトを試作してみた。。

下記コードは、Jsonの取得のところまで。

<?php

require_once('vendor/autoload.php');

$client_id = '';
$service_account_name = '';
$key_file_location = '';

$client = new Google_Client();
$client->setApplicationName('Yutube Test');
$key = file_get_contents($key_file_location);
$cred = new Google_Auth_AssertionCredentials(
	$service_account_name,
	array('https://www.googleapis.com/auth/youtube'),
	$key
);
$client->setAssertionCredentials($cred);

$youtube = new Google_Service_YouTube($client);

$array = array('viewCount','rating','date');

$query = 'X Japan';
$searchResponse = $youtube->search->listSearch('id,snippet',array(
	'q' => $query,
	'maxResults'=> 10,
	'order' => $array[0]
));

こちらがviewです。検索やソート順など、改良の余地が大いにありますね。