JPG:サイズが小さい、非可逆圧縮、色数が大井、圧縮すると画質が悪くなる、サムネイルなどに適す
PNG:容量が大きい、圧縮しても画質が落ちない、グラフィック画像などに適す
GIF:svgやaiと相性が良い、256色しかない、グレースケール画像・アニメーション・フォント・バナーに適す
JPGは加工に適しておらず、容量優先の際に推奨されています。
画質が求められる場合は、PNGが良いようです。
ロゴはGIFかPNGが良いようです。
随机应变 ABCD: Always Be Coding and … : хороший
JPG:サイズが小さい、非可逆圧縮、色数が大井、圧縮すると画質が悪くなる、サムネイルなどに適す
PNG:容量が大きい、圧縮しても画質が落ちない、グラフィック画像などに適す
GIF:svgやaiと相性が良い、256色しかない、グレースケール画像・アニメーション・フォント・バナーに適す
JPGは加工に適しておらず、容量優先の際に推奨されています。
画質が求められる場合は、PNGが良いようです。
ロゴはGIFかPNGが良いようです。
$postをそのまま受け取ると、htmlタグやスクリプトを受け取ってしまいます。
例えば、以下のように、h1タグでhogeを囲って送ると、送られた先のhtmlでhogeがh1で表示されるケースを考えていましょう。
<h1>hoge</h1>
この場合、”htmlspecialchars” postから受け取った値を文字列に変換します。
$_SESSION["hoge"] = htmlspecialchars($_POST["foo"]);
結果、以下のように文字列として値が表示されます。
hoge
一度ログアウトし、再度ログインしても画面が真っ白。

閲覧できなくなった期間程度のブラウザの閲覧履歴を削除すると治ります。
Googleのヘルプページを見ても、解決策が見つからなかった時は、さすがに焦りました。
#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;
});
});
相対パスは
../hoge.php
更に上は
../../hoge.php
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
まず、スタイリングしていない状態です。
<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>

下記のように、ループして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時間くらいかかりました。私はいったい馬鹿??
下記コードは、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です。検索やソート順など、改良の余地が大いにありますね。

curl_init();により初期化
接続を行うためのcurlオブジェクトを作成します。
curl_setopt();転送用オプションを設定します。GETの場合はURLだけでOK。
curl_exec:cURL:セッションを実行する
CURLOPT_URL:provide the URL to use in the request
CURLOPT_RETURNTRANSFERにtrueを設定すると、文字列を返すようになる。変数に保存する
<?php $url = "http://www.fsa.go.jp/"; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); $html = curl_exec($ch); var_dump($html); curl_close($ch); ?>
http情報の取得
<?php $url = "http://finance.yahoo.co.jp/"; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); $info = curl_getinfo($ch); curl_close($ch); var_dump($info) ?>
array(23) { [“url”]=> string(27) “http://finance.yahoo.co.jp/” [“content_type”]=> NULL [“http_code”]=> int(0) [“header_size”]=> int(0) [“request_size”]=> int(0) [“filetime”]=> int(0) [“ssl_verify_result”]=> int(0) [“redirect_count”]=> int(0) [“total_time”]=> float(0) [“namelookup_time”]=> float(0) [“connect_time”]=> float(0) [“pretransfer_time”]=> float(0) [“size_upload”]=> float(0) [“size_download”]=> float(0) [“speed_download”]=> float(0) [“speed_upload”]=> float(0) [“download_content_length”]=> float(-1) [“upload_content_length”]=> float(-1) [“starttransfer_time”]=> float(0) [“redirect_time”]=> float(0) [“redirect_url”]=> string(0) “” [“primary_ip”]=> string(0) “” [“certinfo”]=> array(0) { } }