PHPを学ぼう!

▼PHPを学ぶチャプターです。


PHPプログラマ 緊急募集!

 

素材メニュー

 ◆Chapter 1

 ◆Chapter 2

 ◆Chapter 3

 ◆Chapter 4

 

制作ヒント

 ◆制作のヒント

 

レッスンメニュー

 ◆Chapter2 練習問題

 ◆Chapter3 DB練習問題

 

サイト運営者がPHPを学んだ
お勧めの書籍です!
これ一冊で基本的なPHPの仕組み、簡単なプログラムの作成、SQLiteを使ったデータベースなどかなり学べる要素が詰まっています!

↓↓↓ ↓↓↓

PHPレッスンブック―PHP5対応

新品価格
¥2,520から
(2013/2/24 04:38時点)

 

 

サイバーテロの技法について書かれた書籍です!
ハッカーの手法を知ることでご自身のサイトがハッカーに攻撃されたときそれを防ぐ手法を紹介しています。

↓↓↓ ↓↓↓

PHPサイバーテロの技法―攻撃と防御の実際

新品価格
¥1,890から
(2013/11/5 10:09時点)

 

 

★初年度100円! サブドメインやメールアカウントを無制限に設置できます。
PHPやCGIは勿論、WordPress、Movable Type Open Source、掲示板、ブログ、ショッピングサイトなどが簡単に導入できるので複数サイトを運営したい場合に便利なサービスです。

↓↓↓ ↓↓↓

 

PHPが動作するサーバー

 

はじめてのHP | 無料素材 | タグ辞典 | CSSガイドEX | PHPを学ぼう!

◆Chapter 4 - PC、スマホ、タブレット、携帯別に画像を自動作成

スマートフォンの普及に伴い、最近では PC (パソコン)以外でホームページにアクセスされる機会が増えています。
スマートフォンが普及する前はホームページにアクセスしてくる端末を気にすることもなかったのですが最近では Google のランキングに影響するので無視はできません。

  

PC やスマートフォン、タブレット向けに画像をいちいち用意するのは面倒ですよね・・・。
そこで画像の元ファイルがあれば、そこから端末に合せて画像をリザイズしてくれるプログラムがあれば便利ですね。
完璧なプログラムではありませんが、画像をリサイズするプログラムを作ってみましたので紹介します。

  

この PHP プログラムの特徴は、元となる画像形式( jpg、gif、png )を縦横のサイズを自由に設定しリサイズできることです。
自由にリサイズできるということは、縦横比を計算してあてはめると縦横比を保ったままリサイズができるので各端末にあった画像を作ることができます。
最適化した画像が保存されるので2回目以降は最適化画像を表示するので余計な動作はしません。
サーバーの負担が軽減できます。

  

例えばこんな利用ができます。

  • ホームページなどで表示する画像を PC、スマホ、タブレット、携帯別に作成、保存
  • 商品などの紹介でサイズを固定したサムネイルを作成
  • 画像( gif、png )の透過情報を維持してリサイズ

  

このプログラムは、次の機能を持ちます。

  • 最初にアクセスがあった端末(PC、タブレット、スマホなど)の画像が存在するか確認
  • リサイズ画像が存在すれば表示
  • 存在しなければ、リサイズ画像を制作、保存し表示
  • リサイズ画像のサイズが自由に指定できる
  • 横サイズを基準に縦横比でリサイズ
  • ホームページに書き出す html タグを育成

  

プログラムはの動作には、PHP ライブラリの GD が使えることが前提となります。
サーバーの GD で Support が enabled かどうかは、

phpinfo();

などで確認してください。

またアクセスしてきた端末を特定する PHP プログラムは含んでいません。
端末振り分けのプログラムは、「 アクセス端末別に振り分ける(準備中) 」を参考にしてください。

  

  

【Function_IMG.php】

001<?php
002  #アクセス端末のサムネイルを判定、なければパスとファイル名を育成
003  function IMG_Thumbnail_CHK($targetImage, $type){
004      //IMGフォルダ内にthumbnailを設置すること(注意)
005      $outputImage = $array["dirname"]."/thumbnail/".$array["filename"]."_".$type.".".$array["extension"];
006
007    //ファイルの存在を確認
008    if(is_file($outputImage)){
009      $v[0] = "true";
010      $v[1] = $outputImage;
011      $v[2] = strtolower($array["extension"]);
012    }else{
013      $v[0] = "false";
014         $v[1] = $outputImage;
015      $v[2] = strtolower($array["extension"]);
016    }
017      return $v;
018    }
019
020
021
022
023  #PC、タブレット、スマホ、携帯用に画像を横幅を基準にリサイズ値を求める
024  function IMG_Resize_CHK($targetImage, $type){
025    $resize="noresize";
026    if($type=="pc"){
027      if($image[0]>=440){$widh=440; $resize="resize";}
028    }
029    if($type=="sm"){
030      if($image[0]>=260){$widh=260; $resize="resize";}
031    }
032    if($type=="gr")
033      if($image[0]>=240){$widh=240; $resize="resize";}
034    }
035    if($type=="tb"){
036      if($image[0]>=440){$widh=440; $resize="resize";}
037    }
038    if($resize=="resize"){
039      $height=round($image[1]/($image[0]/$widh), 0);
040    }else{
041      $widh=$image[0];
042      $height=$image[1];
043    }
044    $resize=array($widh, $height, $resize);
045    return $resize;
046  }
047
048
049
050
051  #JPEF、GIF、PNG画像のサムネイル画像を作成、保存
052  function IMG_Thumbnail_Create($targetImage, $outputImage, $width, $height){
053    //サイズを指定して、背景用画像を生成
054    $canvas = imagecreatetruecolor($width, $height);
055    $image = "";
056
057    //コピー元画像のファイルサイズを取得
058    list($image_w, $image_h) = getimagesize($targetImage);
059    $image = "";
060
061    //コピー元画像のファイルサイズを取得
062    list($image_w, $image_h) = getimagesize($targetImage);
063    if($type = exif_imagetype($targetImage)){
064      switch($type){
065        imagecopyresampled($canvas, $image, 0, 0, 0, 0, $width, $height, $image_w, $image_h);
066        case IMAGETYPE_JPEG:
067        $image = imagecreatefromjpeg($targetImage);
068        imagejpeg($canvas, $outputImage, 100);
069        break;
070
071        case IMAGETYPE_GIF:
072        $image = imagecreatefromgif($targetImage);
073        imagegif($canvas, $outputImage);
074        break;
075
076        case IMAGETYPE_PNG:
077        $image = imagecreatefrompng($targetImage);
078        imagepng($canvas, $outputImage);
079        break;
080      }
081    }
082
083    // メモリを開放する
084    imagedestroy($canvas);
085    // メモリを開放する
086    imagedestroy($image);
087  }
088
089
090
091
092  #IMGタグの書き出し
093  function IMG_SRC($targetImage, $width, $height, $type, $alt, $border, $link){
094    //サムネイルのパスを育成
095    $thumbnail_file = IMG_Thumbnail_CHK($targetImage, $type);
096    //サムネイルの確認、縦横いずれか0の場合は横を基準に画像を作る
097    if($thumbnail_file[0]=="false"){
098      if($width==0 || $height==0){
099        $value = IMG_Resize_CHK($targetImage, $type);
100      }else{
101        $value[0]=$width;
102        $value[1]=$height;
103      }
104      IMG_Thumbnail_Create($targetImage, $thumbnail_file[1], $value[0], $value[1]);
105    }
106
107    //イメージソースの書き出し
108    $img_src="<img src='{$thumbnail_file[1]}' alt='{$alt}' border='{$border}' />";
109    if($link==0){
110      echo $img_src;
111    }else{
112      if($type=="gr"){
113        echo $img_src;
114      }else{
115        echo "<a href='{$targetImage}'>{$img_src}</a>";
116      }
117    }
118  }
119?>

  

このプロモーターは、4つのカスタマイズ関数から構成されています。
IMG_Thumbnail_CHK の引数、$targetImage に元となる画像のパスを指定します。
$type には、アクセスする端末の要素を入れます。
ここで指定できる要素は、
PC の場合は " PC "、スマホは " sm "、タブレットは " tb "、携帯は " gr " となります。
画像ディレクトリの配置は基本、

./img/

サムネイルのディレクトリは次の通りです。

./img/thumbnail/

IMG フォルダ、thumbnail フォルダのパスやファイル名を変更する場合にはプログラムを修正してください。

  

このプログラムを実行すると、thumbnail フォルダに指定した端末の画像を確認します。
存在するときには True、存在しないときには False を返し、その他に thumbnail のパス、ファイル形式を Return で返します。
使用例としては次の通りです。

IMG_Thumbnail_CHK("./img/123.jpg", "pc");

  

  

  

IMG_Resize_CHK は、画像リサイズの規定値を判断するプログラムです。
横幅の規定値は、PC の場合は "440px"、スマホは "260px"、タブレットは "440px"、携帯は "260px" が設定されていて、これ以上の大きさの画像は規定値の縦横比の計算します。
縦横のサイズと共にリサイズするかどかの判断を Return で返します。
使用例としては次の通りです。

IMG_Resize_CHK("./img/123.jpg", "sm");

  

  

  

IMG_Thumbnail_Create は、jpg、gif、png の形式に対応した画像リサイズプログラムです。
$targetImage には元となる画像のパスを指定し、$outputImage にはリサイズした画像の保存先を指定します。
$width には横幅のサイズ、$height に縦幅のサイズを px 単位(ピクセル)で指定することで画像をリサイズして保存をします。
この関数単体をリサイズ用プログラムとしても使えます。

IMG_Thumbnail_Create("./img/123.jpg", "保存先", "横幅", "縦幅");

  

  

  

IMG_SRC は、ホームページ上で画像を表示させる html タグを育成、書き出すプログラムです。
既に存在する画像がある場合、その画像を読み込み表示します。
存在しない場合には関連した関数を読み込み仕様に合った画像を作り、保存、表示します。
$targetImage には元となる画像のパスを指定します。
$width には横幅のサイズ、$height に縦幅のサイズを px 単位(ピクセル)で指定することで指定したサイズで画像を作ります。
$width、$height のいずれかを ” 0 ” とした場合には、アクセスしてきた端末の規定値でリサイズします。
$type は、" pc "、" sm "、" tb "、" gr " の何れかで指定します。
$alt は、画像が表示できなかった時の代替え文字、$border は画像 boeder 値、$link は "1" を設定した場合に元の画像へのリンクは張り表示させます。

IMG_SRC($targetImage, 0, 0, "gr", "図形1", 0, 1);

携帯( gr )からアクセスした場合には、$link は " 1 " を設定した場合でも、 " 0 " として機能します。
thumbnail を保存するフォルダの属性は、" 777 " とします。

  

[2017年7月17日 公開]

  

  

一括ダウンロード

 

 

 

 

 

 

 

 

 

 

 

 

ex-mode.net | ツールEX | 素材EX | アフィモール | 初級者向 初めてのホームページ作り | Htmlタグ辞典 | 初めてのプランター菜園 | リンク・ボード
気のみ気のままなブログ | CSSガイドEX | ホビ★コレ | 班長日記!

▲UP

Copyright (C) ex-mode.net 2017. All Rights Reserved.