月別アーカイブ: 2014年2月

PHP 画像アップロード

ここではPHPでの画像のアップロードについて解説しています。

HTML

<form action="<?php echo $_SERVER['PHP_SELF'];?>" name="img_up" method="post" enctype="multipart/form-data">
<input type="file" name="img_file" />
</form>

画像をアップロードするにはformにenctypeを指定します。

php

<?php

    // ファイル名をランダムに
    $img_name = md5(uniqid(rand(), true));
    $img_name .= '.'.substr(strrchr($_FILES['img_file']['name'];, '.'), 1);
    $img_path = "./img/{$img_name}";
    if (!move_uploaded_file($_FILES['img_file']['tmp_name'], $img_path)) {
        echo "Error";
        exit();
    }

画像をアップロードするには「move_uploaded_file」を使用します。

書式
bool move_uploaded_file ( string $filename , string $destination )

filename
アップロードしたファイルのファイル名。
今回は例としてランダムでファイル名を決めています。

destination
ファイルの移動先。
画像をアップロードするパスを指定してください。

返り値
画像のアップロードに成功した場合は「true」を返します。

PHP textarea 改行

コメントを残す

ここではPHPでtextareaをブラウザ表示するときの改行がうまくいかないときの対処法を解説しています。

nl2brを使用する

<?php

    // 特殊文字を HTML エンティティに変換
    $var = htmlspecialchars($_POST["textarea"]);
    // 改行文字の前に HTML の改行タグを挿入
    $textarea = nl2br($var);
    echo $textarea;

「nl2br」は改行文字の前にHTMLの改行タグを挿入してくれる関数です。
textareaから[$_POST]で取得して、ブラウザ表示させるタイミングで使用します。

jQuery セレクタ

コメントを残す

ここではjQueryのセレクタについて解説しています。

id

$("#id")

class

$(".class")

タグとidやclass

$("p#id_p")
$("p.class_p")

name

$('[name="name1"]')

aタグのhref

$("a[href]")

aタグのhrefをidで指定

$("a[href = '#id']")

imgタグのsrcを取得

var src = $("#img_id").attr('src'); 
var src = $(".img_class").attr('src');

aタグのhrefを取得

var href = $("#a_id").attr('href'); 
var href = $(".a_class").attr('href');

検索エンジンにインデックスさせない方法

コメントを残す

ここでは検索エンジンにインデックスさせない方法を解説しています。

Googleのウェブマスターツールのヘルプで確認できます。
https://www.google.com/webmasters/
ヘルプ→ヘルプセンター→Google と相性の良いサイト→サイト管理→ホスティング企業や IP アドレスの変更→メタタグ

head

<head>
<meta name="robots" content="noindex,nofollow,noarchive" />
</head>

ウェブマスターツールより抜粋
noindex: ページをインデックスに登録しないようにします
nofollow: Googlebot がページのリンクを追跡しないようにします
noarchive: Google でページのキャッシュリンクを表示しないようにします

METAタグにコンマ「,」区切りで設定します。

インデックスされてしまったものの削除

インデックスされてしまったものの削除をするにはGoogleに削除したいURLをリクエストします。

Google インデックス→URL の削除
から削除したいURLをリクエストします。

jQuery UI datepicker 日本語カレンダー

コメントを残す

ここではjQuery UI datepickerの日本語カレンダーを実装する方法を解説しています。

head

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/flick/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/i18n/jquery.ui.datepicker-ja.js"></script>

CSSの選択
http://jqueryui.com/themeroller/

CSSはお好みのものをこちらから選択できます。
左側のメニューからGalleryから選択してください。
今回の例ではflickのCSSを選択しています。

読み込むCSSの変更
UI darknessを選択した場合

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/ui-darkness/jquery-ui.css" />

このように読み込むCSSをお好みに合わせて変更してください。

jqueryとjqueryUIはGoogleから読み込んでいます。
https://developers.google.com/speed/libraries/devguide?hl=ja

日本語化
日本語化をするには、4行目の

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/i18n/jquery.ui.datepicker-ja.js"></script>

を記述します。

日本語化した場合のレイアウトのずれを修正

<style type="text/css">
    .ui-datepicker select.ui-datepicker-month,
    .ui-datepicker select.ui-datepicker-year {
        width:auto;
    }
</style>

日本語化した場合横幅が足りなくなってレイアウトが崩れてしまうので修正しています。

Script

$(function() {
    $("#datepicker").datepicker({
        changeMonth: true,
        changeYear: true
    });
});

年と月をセレクトボックスに表示させています。

html

<input type="text" id="datepicker" />

Scriptで指定したエレメントと同じものを指定します。

これでテキストフィールドをクリックしたときにカレンダーを表示させることができます。