2015-01-05

ネスト化されたstdClass ObjectからArrayに変換する方法

新サイトへ移転しました
約３秒後に自動的にリダイレクトします。

(追記)
以下の記事を書いた後、以下のブログを発見しました。
http://d.hatena.ne.jp/kasahi/20070806/1186419785

<?php
json_decode(json_obj, true)
?>

というように、第二引数にtrueを入れると、arrayにちゃんと変換されました。

以下はもはや読む必要はないのですが、せっかく書いたので残しておきます。

2015-01-05

JavascriptでJSONオブジェクトの長さを取得する方法

JavaScript

新サイトへ移転しました
約３秒後に自動的にリダイレクトします。

やりたいこと

JSONオブジェクトから長さ(要素数、length)を取得する。

方法

以下のように記述する。

var json_obj_length = Object.keys(json_obj).length;

よくやりがちな、json_obj.lengthなどとしてもundefinedと表示されて取得できない。

（参考サイト）
http://joppot.info/2014/02/21/861

2015-01-01

JavaScriptで配列に動的に要素を追加する方法

JavaScript Java

新サイトへ移転しました
約３秒後に自動的にリダイレクトします。

今日は簡単にメモ。

結論から言うと、リストを使います。
ただし、リストとして宣言しても、配列のように扱えるので、かなり柔軟ではないでしょうか。

javaだと、list.get(0)といったように書いた気がするので、普通のjavaよりも楽？な気がした。

var list = new Array();
list.push("追加したい値");

これでよい。最初から値を用意しておきたいときは

var list = new Array(2);
list[0] = "hoge";
list[1] = "huga";

などとする。

2014-12-31

jQuery＋PHPでAjaxな通信をするための実装メモ

Web Service PHP jQuery JavaScript Ajax

新サイトへ移転しました
約３秒後に自動的にリダイレクトします。

けっこう悩んだので、何をした時にダメで、どうしたらうまく動作したかをメモ。
(参考サイト)
jQuery.ajaxで簡単に非同期通信 - 背負い投げとENTER_FRAME

やりたいこと

あるページで「次へ」ボタンを押したら、そのページで表示されている画像を更新される、というページの作成。

注意点

サーバのデータベースとやりとりをして得た値を使用して要素を更新する処理を行いたい場合は、$.ajax()内successの項に書きましょう。

失敗例

javascript側で、Ajaxでの通信部分を以下のように実装していたが、反応しなかった。数カ所にデバッグ用のalert()を用意して確認したところ、理由がわかった。それは$.ajax()の外の方が先に実行されるからだった。

HTML(image_view.html)

<head>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="question_reply_form.js"></script>
</head>
<body>
  <div id="image_number">1枚目</div>
  <img id="image" src="image1.png" width="800" border="1">
  <button id="next_button">次へ</button>
</body>

javascript(image_view.js)

$(document).ready(function() {
  $(".next_button").on("click", function() {
    var image_name = “”;
    $.ajax({
      url = "get_image_name.php",
      type: "POST",
      data: {"next_id" : "2"},    // 本当は動的にidを設定したいが、とりあえず今回は手動で。
      success: function(name) {
        alert("success1 :" + image_name);    // 2番目に実行される(image_name=""の状態)
        image_name = name;
        alert("success2 :" + image_name);    // 3番目に実行される(image_name="image2.png"の状態)
      }
    });
    alert(“image_name = “ + image_name);    // 1番目に実行される(image_name=""の状態)
    var image_tag = $("<img id=‘image' src='" + image_name + "'");
    $("#image").remove();    // 古い画像の削除
    $("#image_number").after(image_tag);    // 新しい画像の追加
  });
});

php(image_view.php)

<? php
$id = $_POST["id"];
$image_name = "image2.png";  // データベースから次のidの画像名を取得して格納(コード省略)
echo $image_name;
?>

成功例

変えたのはjavascriptのみなので、そちらのみ示す。

$(document).ready(function() {
  $(".next_button").on("click", function() {
    var image_name = “”;
    $.ajax({
      url = "get_image_name.php",
      type: "POST",
      data: {"next_id" : "2"},    // 本当は動的にidを設定したいが、とりあえず今回は手動で。
      success: function(name) {
        alert("success1 :" + image_name);    // 2番目に実行される(image_name=""の状態)
        image_name = name;
        alert("success2 :" + image_name);    // 3番目に実行される(image_name="image2.png"の状態)
        var image_tag = $("<img id='image' src='" + image_name + "'");    // add
        $("#image").remove();    // 古い画像の削除                        // add
        $("#image_number").after(image_tag);    // 新しい画像の追加       // add
      }
    });
    alert(“image_name = “ + image_name);    // 1番目に実行される(image_name=""の状態)
    // delete : var image_tag = $("<img id=‘image' src='" + image_name + "'");
    // remove : $("#image").remove();    // 古い画像の削除
    // remove : $("#image_number").after(image_tag);    // 新しい画像の追加
  });
});

2014-12-30

PHPで日本語名を含む文字列の文字数を数えるときの注意点

PHP Security

新サイトへ移転しました
約３秒後に自動的にリダイレクトします。

やりたいこと

今回やりたいことは、

日本語を含むファイル名の拡張子部分を切り取りたい

ということです。

注意点

注意点としては

日本語を含む場合は、マルチバイト対応のメソッド(mb_***)を使おう

ということです。
当たり前のことかもしれないですが、今後繰り返さないようにメモしておきます。

改善前

以下の例では、例えば「hogehoge.txt」というファイル名は「hogehoge」となりますが、「ほげほげ.txt」は「ほげほげ.txt」のままでした。

<?php
$image_name = "" . htmlentities(mb_substr($_FILES["file"]["name"], 0, strlen($_FILES["file"]["name"])-4), ENT_QUOTES, 'UTF-8');
?>

文字列切り取りを行うときはmb_substrを使っていたのに、文字数を数えるときにマルチバイトに対応していないstrlenを利用していたのがうまくいかない理由でした。

改善後

上の例のstrlenをmb_strlenに修正するとうまくいきます。

<?php
$image_name = "" . htmlentities(mb_substr($_FILES["file"]["name"], 0, mb_strlen($_FILES["file"]["name"])-4), ENT_QUOTES, 'UTF-8');
?>

簡単な説明

mb_strlenで文字数を取得して、最初の文字～最後から4番目の文字までをmb_substrで切り出す、という感じです。

mb_strlenで指定した文字列の文字数を取得します。
http://php.net/manual/ja/function.mb-strlen.php

mb_substrで指定した文字列の部分文字列を取得します。
PHP: mb_substr - Manual

ちなみに、htmlentitiesはセキュリティ上の理由でつけてます。htmlentitiesについては以下のサイトがわかりやすかったです。
http://www.phppro.jp/phptips/archives/vol4/3

2014-12-29

jQueryのonメソッドを利用して後から追加したタグを操作する方法

jQuery JavaScript PHP Ajax

新サイトへ移転しました
約３秒後に自動的にリダイレクトします。

やりたいこと

現在、データベースに登録されているアイテムをある条件で検索し、表形式で表示するような検索フォームを勉強がてらに作っています。表示されたアイテムには「確認」「修正」「削除」といったボタンを用意されていて、これらのボタンは「検索」ボタンが押されたときに、javascriptによってあとから追加されたものです。

ここでやりたいのは、jQueryを使って、「削除」ボタンが押されたことを検出し、「削除してもよろしいですか？」という確認メッセージを出すことです。

コード例

HTML文

まずは対象となる部分のHTMLを示します。以下の様な文が、データベースに登録されているアイテムの数だけ動的に追加されるわけです。

<form action='delete.php' method='post'>
    <input type='submit' class='delete' value='問題削除'>
</form>

失敗例1

ここでは、僕が最初に書いたスクリプトを示します。

$(document).ready(function() {
    $(".delete").click(function() {
        if (!confirm("削除してもよろしいですか？")) {
            return false;
        } else {
            return true;
        }
    });
});

これではうまく行きませんでした。

失敗例2

$(document).ready(function() {
    $(".delete").on(function() {
        if (!confirm("削除してもよろしいですか？")) {
            return false;
        } else {
            return true;
        }
    });
});

これもだめでした。

成功例

次に、最終的にうまく動作した例を示します。

$(document).on("click", ".delete", function() {
    if (!confirm("削除してもよろしいですか？")) {
        return false;
    } else {
        return true;
    }
});

これならばうまく動作しました。

考察

ready、click、onの説明

readyとonの説明について色々とググりました。主に参考にしたサイトは以下のサイトです。
サンプル付きで詳しく説明されていました。これらのリンクは同じサイトの別々の記事ヘ飛びます。
記事の内容を自分なりに要約したものも併記しておきます。ニュアンスに違いがあるかもしれないので、ご自身でも確認されて下さい。

jQuery入門講座使い方-readyイベント
- readyはHTMLのDOMが揃うまで、処理を保留にする。揃ってから処理を開始する。
jQuery入門講座使い方-イベント(2)
jQuery リファレンス：on
- onは指定した要素になんらかのイベントが発生した時に実行するfunctionを設定する。
jQuery リファレンス：click
- clickはonと同様に指定した要素に何らかのイベントが発生した時に実行するfunctionを設定することだが、プログラムによって後から追加された要素に対しては対応していない。

動作した/動作しなかった理由

調べた結果から、今回のソースコードが動作した/動作しなかった理由は以下のようにまとめられると思います。

失敗例1

clickメソッドは動的な要素には対応していないので、動作しなかった。

失敗例2

onメソッドを用いて入るが、onを監視している対象が$(".delete")であり、readyした段階ではまだ追加されていないので、動作しなかった。

成功例

onメソッドを用いており、監視対象が$(document)というように、ドキュメント全体だったので動作した。

もし間違った解釈をしていたどなたか指摘してくださると大変ありがたいです。

2014-12-28

無料でjQueryの基礎を学ぶことができるサイト

JavaScript jQuery Web Service

新サイトへ移転しました
約３秒後に自動的にリダイレクトします。

jQueryの勉強にとても良いサイトを発見しました。知っている人にとっては今更なのかもしれませんが、僕はつい先日知ったのでご紹介します。
サイトは英語ですが、英語の説明がわからなくても、スライドが非常にわかりやすいので、英語が苦手な人でもついていけると思います。僕は英語が苦手です。はい。

jQuery Learning Center

基本的な流れ

最初に講義があり、その後演習がある、という流れです。

講義

講義はビデオを試聴することになります。もちろん英語で説明しています。しかし、冒頭で述べたとおり、スライド自体が非常にわかりやすいので、英語が苦手な方でも比較的簡単についていけると思います。動画で用いていた資料はダウンロードが可能です。

演習

講義を受けた後は演習が有ります。講義で説明した事に関する演習です。自分でjQueryを書く欄にコードを記述すると、それがHTML上のどの部分を選択しているかがリアルタイムに分かります。また、このコードの結果、どのような処理がなされるのかもすぐに確認することが出来ます。

演習中にjQueryのコードを記述したら、submitすることで、正しいコードがかけているかどうかがチェックされます。間違っていた場合は、間違った内容に応じて何が間違っているかのかを示してくれます。

また、どうしてもわからない時はヒントや答えを表示することも可能です。

感想

日本語の色々なページを渡り歩きましたが、この英語のページが一番わかりやすいです。jQueryの基礎を勉強されたい方にはとても有用なサイトだと思います。無料で利用できます。ユーザ登録すると、進捗を保存できたりします。また、jQuery以外にもいくつかコースが用意されているようです。

ぜひみなさんお試し下さい。

Love澤's Room

技術系ネタをまとめていたブログ。現在はカテゴリにこだわらず更新中。

ネスト化されたstdClass ObjectからArrayに変換する方法

JavascriptでJSONオブジェクトの長さを取得する方法

やりたいこと

方法

JavaScriptで配列に動的に要素を追加する方法

jQuery＋PHPでAjaxな通信をするための実装メモ

やりたいこと

注意点

失敗例

成功例

PHPで日本語名を含む文字列の文字数を数えるときの注意点

やりたいこと

注意点

改善前

改善後

簡単な説明

jQueryのonメソッドを利用して後から追加したタグを操作する方法

やりたいこと

コード例

HTML文

失敗例1

失敗例2

成功例

考察

ready、click、onの説明

動作した/動作しなかった理由

失敗例1

失敗例2

成功例

無料でjQueryの基礎を学ぶことができるサイト

基本的な流れ

講義

演習

感想