2015年版：ガラケーサイトのWEBデザインを爆速で終わらせるための注意点

f:id:tsumayouzi:20150305184100j:plain

ここにメモ もしガラケーサイトに対応しなければならないときに。

デザイン時の注意点 もしあまりにもガラケーのデザインにこだわりたいなら。

・tableはやばい tableはベベルとエンボスのようなborderが消えない機種があるので注意。 文字を最大で使っておられる方にいたっては１行ごとに改行になったりするので横並びあきらめたい。

・リンク注意 最新機種kのような奇跡の指(マウスカーソル)は出ません。(kはフルブラウザ搭載で普通のサイトが見れるから対応考えなくていい) リンク時に汚くなるのを避けたいのなら ・ボタンは長方形(or正方形)でつくる。 ・使いたい画像の下にテキストリンクを添える

・透過を使いたいときは背景色を添える 背景色を添えることで良い感じの雰囲気に （リンクにしてはいけない）

コーディング時の注意点

大前提 ・ドキュメントタイプはXHTML1.0 ・文字コードはSJIS。 ・絵文字対応するならばSJIS-WIN

これからはじめるなら。 先人たちの偉大な知恵をお借りする。 ・コーディングファイル(HTML) ・コーディングファイル(PHP) ・絵文字プラグイン

忘れないでおきたい

一番大事なのは伝えられることだと思う。 見やすくするためのデザインをすべきだと思うので、 画像をふんだんに使ったり複雑なレイアウトを駆使するのではなく、 文字サイズを特大・最小にしても読みやすいデザインや、 情報量が多いときにはタブで分けてコンパクトにしたり、 ローディングのgifを少しストレスが軽減するようなものにするなど、 UI/UXをきちんと考えないといけない。

GoogleスプレッドシートをDBのように運用したい[SELECT編]

f:id:tsumayouzi:20141110140029p:plain データってほんとにデータベースで管理しなきゃいけないんだろうか。 いちいちテーブルつくるのめんどくさい。コネクトするのめんどくさい。 安いレンサバで済ませられないし管理もめんどくさいしWEB制作程度でほんとにDB使わなきゃいけないのか模索するブログ。

その１：csvを読み込んでpg_fetch_assocライクに使う


//文字化け防止
setlocale(LC_ALL,'ja_JP');
setlocale(LC_ALL, 'ja_JP.UTF-8');
setlocale(LC_ALL, 'ja_JP.EUC-JP'); //このへんはもうやけクソ
setlocale(LC_ALL, 'ja_JP.Shift_JIS');　 //このへんはもうやけクソ


//csvを読み込み
$csv_name="ファイル名.csv";

//読み取り
$handle=fopen($csv_name,"r");


$count=0;

while ($row = fgetcsv($handle,1024, ",")) {
    
    if($count==0){
        $column=$row;
    }else{
        foreach($row as $key=>$val){
            $rows[$count][$column[$key]]=$val;
        }
    }
    $count++;
}

にすると

echo $rows[行数]['カラム名'];

で使える

２：csvを読み込んでpg_fetch_rowライクに使う

上記のオレンジ色の部分をこっちに変更

while ($row = fgetcsv($handle,1024, ",")) {
    

        foreach($row as $key=>$val){
            $rows[$count]=$val;
        }

    $count++;
}

更新管理どうしよう。

URLからサムネイル取得できるプラグインがすごく便利

wordpressのプラグインでなんとかっていうプラグインがあるのですが、 wordpressじゃなくても使える模様

使い方はimgタグ以下のURLを吐き出すだけ

＜img src="http://s.wordpress.com/mshots/v1/ここにURL?w=300"＞

DBからデータをとりだしてグリッドレイアウトで表示する（レスポンシブ対応)

f:id:tsumayouzi:20150223121954j:plain










  

{$row['title']}

{$url}

{$view}Views




HTML;
}

// MySQLに対する処理
$close_flag = mysql_close($link);


?>

【php】変数名を変数名でつけたいとき。

f:id:tsumayouzi:20150227133740p:plain

変数名を任意の変数名と合わせて使いたいとき、

jsだとシンプルにいけるもののphpの場合↓

一度{}でくくってから$変数名を使うとうまくいく模様です。

${'変数名１' . $変数名２}

 

例)連番でidつけたときの処理方法  （的策かはわからない）

 

$hogeは件数

 

 for ($i = 0; $i <= $hoge; $i++) {  

${'img_' . $i}  

}   

 

 

ちなみに

$$変数名は

${$変数名}

ってなる模様（ふーん） 

Cannot modify header information と出たときの対処方法

f:id:tsumayouzi:20150227133740p:plain

Cannot modify header information

と出たときは大体 下記のようなリダイレクト

header('location: index.php');

のファイルにechoとか出力系ぶち込んでるとなる気がするのですが、 今回原因不明であせっていたところ、

<?php

が

　　　<?php

こう隙間開いていたのが原因でした。 スペースでもタブでもだめでした。

あーびっくりした。

【php】画像名・画像サイズが一目でわかるモック画像を自動生成するプラグイン的なの

f:id:tsumayouzi:20150223121954j:plain

モック画像。 あると便利だけど用意するのがめんどくさい。 ジェネレータとかあるけどテスト環境とかから外部のサービス使うのには抵抗が。

<?php

//ヘッダーの設定

header("Content-type: image/png");

//値セット

$width = $_GET['width'];

$height = $_GET['height'];

$text = $_GET['file'];

//指定した大きさの黒画像を生成

$img = imagecreatefrompng("{$text}.png");

//$img = imagecreatetruecolor($width, $height);

//画像背景の設定

//背景色の指定

$background_color = imagecolorallocate($img, 10, 10, 10);

//画像を背景色で塗る

imagefilledrectangle($img, 0, 0, 300, 300, $background_color);

//画像に書き込むテキストの設定

//テキスト色の指定

$text_color = imagecolorallocate($img, 255, 255, 255);

//画像に文字列を書き込む

imagestring($img, 1, 15, 15, $text.$width.'*'.$height, $text_color);

//画像の出力

imagepng($img);

//画像の保存

imagepng($img, "./image/{$text}.png");

//画像の消去（メモリの解放）

imagedestroy($img);

//画像の呼び出し（これが imgのsrcに出力される）

readfile($img);

?>

というphpファイルを用意して、 使うときにimgタグで

＜img src="上記のファイル名.php?width=幅&height=高さ&file=ファイル名"＞

こうすると、ファイル名と幅高さの書かれた画像が表示されます。

一度呼び出した画像は全部このファイルのあるディレクトリの中のimageというフォルダの中に入っているので、開発中の画面なんて見ないぜっていうデザイナーさんに向けてzipでポンしても。