投稿者「後藤 祐一」のアーカイブ

後藤 祐一 について

フリーランスとしてWebプログラミングを行っています。 宜しくお願いします。

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")

タグ

$("p")

タグと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の日本語カレンダーを実装する方法を解説しています。

calendar

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で指定したエレメントと同じものを指定します。

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

jQuery チェックボックス全選択、解除

コメントを残す

ここではjQueryでチェックボックスを全選択、解除する方法を解説しています。

Script

$(function() {
    $('#all').click(function() {
        if (this.checked) {
            $('[name="deleteId[]"]').prop('checked', $(this).is(':checked'));
        }
        else {
            $('[name="deleteId[]"]').removeAttr('checked');
        }
    });
});

html

<form action="<?php echo $_SERVER['PHP_SELF'];?>" name="checktest" id="checktest" method="post">
<input type="checkbox" id="all">全選択／全解除<br />
<input type="checkbox" name="deleteId[]" id="deleteId" value="1"><br />
<input type="checkbox" name="deleteId[]" id="deleteId" value="2"><br />
<input type="checkbox" name="deleteId[]" id="deleteId" value="3"><br />
</form>

解説
「this.checked」と記述するとセレクタで指定したチェックボックスが選択されているかがわかるので、処理を分けています。