jQueryでname属性配列の繰り返し処理を行ったのでメモメモ

■やりたいこと テーブルのセルデータを取得して処理を行う 処理結果は結果のセルに設定する。

テーブルは↓のようなかんじ

NO データ1 データ2 結果
1 100 2
2 100 4
3 100 5

データ1とデータ2の加算結果を結果に設定する。

ソースはこんな感じ
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
// no配列の分繰り返す。
$("[name=’no[]’]").each(function() {
// $(this).text() で no 配列の処理中の値が取得できる
// data1 配列の no -1 番目の値を取得する
var data1 = $("[name=’data1[]’]").eq($(this).text()-1).text();
var data2 = $("[name=’data2[]’]").eq($(this).text()-1).text();

// 結果を設定するセルオブジェクトを取得
var result = $("[name=’result[]’]").eq($(this).text()-1);
// 結果の設定
result.text(parseInt(data1) + parseInt(data2));
});
});
</script>
<style>
table td {
border: 1px solid #000;
width: 80px;
}}
</style>
</head>
<body>
<table>
<tr><th>NO</th>
<th>データ1</th>
<th>データ2</th>
<th>結果</th></tr>
<tr><td name="no[]">1</td>
<td name="data1[]">100</td>
<td name="data2[]">2</td>
<td name="result[]"></td></tr>
<tr><td name="no[]">2</td>
<td name="data1[]">100</td>
<td name="data2[]">4</td>
<td name="result[]"></td></tr>
<tr><td name="no[]">3</td>
<td name="data1[]">100</td>
<td name="data2[]">5</td>
<td name="result[]"></td></tr>
</table>
</body>
</html>
[/html]

配列を使用する際の $(“[name=’no[]’]”) の書き方がポイントかも

同一ドメイン内のAjax通信は問題なくできたのだが、
別ドメインへのAjax通信はクロスドメインの制限にひっかかりできなかった。

なんとかできないものかとあちこちのサイトを見たり
テストをしたりしてようやく出来るようになったのでメモしておく

■やりたいこと
クライアントから別ドメインのサーバへPOST
サーバ側で処理を行い、処理結果を返す
クライアントでは処理結果を受け取って表示する。

サンプルは2つのフォームの値を足して結果を返すだけの簡単なもの

■サーバ側PHP
[php]
<?php
// クライアントからのPOSTを受け取る
$val = $_POST[‘val’];
$val2 = $_POST[‘val2’];

// 何らかの処理(サンプルなので加算するだけ)
$result = $val + $val2;

// 下記をレスポンスヘッダーに含める
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: X-Requested-With");

// 処理結果($result)などクライアントに返す値を連想配列で設定し、json_encodeを通す。
print json_encode(array(‘result’ => $result));
?>
[/php]

■クライアント側
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Ajax test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#send").click(function(){
// 送信先、送信方法、送信データを設定する。
$.ajax({
url: "サーバPHPのURL",
type: "post",
data: {
‘val’ : $("#val").val(),
‘val2’ : $("#val2").val()
},

success: function(data) {
$("#result").html("成功 : ");
          // 成功した場合、結果を取得して parseJSON でパーズする。
$("#result").append($.parseJSON(data).result);
},

error: function(XMLHttpRequest, textStatus, errorThrown) {
$("#result").html("エラー : " + textStatus);
}
});
});
});
</script>
</head>
<body>
<form method="post">
<input id="val" />
<input id="val2" />
<input id="send" type="button" value="処理" />
</form>
<div id="result"></div>
</body>
</html>
[/html]

文字コードはUTF-8で作成しています。

以上。

前回、coreserverへDrupal、Web File Manager をインストールしたので今回は設定を行います。

(CMSでファイル共有(coreserverへDrupalをインストール) を参照)

※ディレクトリ名、アップロードするファイル名に日本語を含むものは使用できません。

Drupalに管理者でログインして以下を行います。

①.ロールの作成

  ロール単位でアクセスできるディレクトリを作成するため、まずはロールを作成します。

   【管理セクション】⇒【ユーザの管理】⇒【ロール】

    ロールを追加したらそのロールの【権限の編集】をクリック

     webfmモジュールの権限を設定

      access webfm、view webfm attachments、webfm upload : ON

      administer webfm : OFF(これをONにすると他のディレクトリにもアクセスできるようになる)

②.ユーザの作成

  ユーザを作成し、アクセスできるディレクトリ(ロール)を設定します。

  1ユーザに対して複数のロールを割り当てることも、複数ユーザを1ロールに割り当てることもできます。

   【管理セクション】⇒【ユーザの管理】⇒【ユーザ】⇒【ユーザの追加】

    ロールは、このユーザがアクセスできるロール(①で作成したもの)にチェックを入れる。

③.認証済み権限設定

  認証済みユーザ全員がアクセスできるディレクトリを用意しない場合は飛ばしてください。

   【管理セクション】⇒【ユーザの管理】⇒【権限】

    『認証済みユーザ』に対して①と同じ権限設定を行う。

④.Web File Managerの設定

  ※注意:coreserverの場合、PHPをCGIモードで動作させる設定をしてから本作業を行ってください。

  【管理セクション】⇒【サイトの環境設定】⇒【Web File Manager】

   【環境設定】タブ

    WebFM root directory:

      ファイル管理のルートとなるディレクトリ名(日本語不可)を設定する

      ※注意:日本語でディレクトリ名を設定してしまうと文字化けをおこし、ディレクトリの操作が出来なくなります。

   【権限】タブ

    Default File Permissions

      

    Settings for XXXXX role

      XXXXXにはロール名が入り、ロール分設定を行う

      Role Root directory:

        このロールで使用するディレクトリ名(日本語不可)を設定する。

        ※注意:日本語でディレクトリ名を設定してしまうと文字化けをおこし、ディレクトリの操作が出来なくなります。

      許可されるファイルの拡張子:

        アップロード可能な拡張子をスペース区切りで記述する。

      アップロード単位の最大ファイルサイズ:

        1回でアップロードできる最大サイズを設定する。

        上限は、php.ini のupload_max_filesizeなので、上限を変更したい場合はphp.iniを修正する。

      ユーザ単位の合計ファイルサイズ:

        このロールでアップロード可能なファイルの総容量をメガバイト単位で設定する。

    ロール分設定したら【設定の保存】をクリックする。

以上で、設定は完了です。

作成した各ユーザでログインしてメニューから Web File Manager をクリックしてみてください。

ログインしたロールに割り当てたディレクトリが表示されたら成功です。

③を設定し、④で認証済みユーザの設定を行った場合、2つのディレクトリが表示されるはずです。

やはり日本語のディレクトリ名、ファイル名が使えないのは不便なので、

今後調べて日本語を使用できるようにしたいと思います。

【Drupalを使用したファイル共有サイトの構築メモ】

・ログインユーザー個別のフォルダを用意する。

・ログインユーザー全員がアクセスできるフォルダを用意する。

-手順-

①.Drupalのインストール(http://drupal.jp/

  今回使用したのは Drupal6.25 日本語ディストリビューション

  使用したサーバは coreserver なのでセットアップ前に準備をする。

    1. Drupalのルートにある .htaccess に以下を追記

[code lang=”js”]
<Files index.php>
    AddHandler application/x-httpd-phpcgi.php
</Files>
[/code]

    2. Drupalのルートに以下の内容の php.ini を作成

[code lang=”js”]
mbstring.language = neutral
mbstring.internal_encoding = UTF-8
mbstring.http_input = pass
mbstring.http_output = pass
mbstring.encoding_translation = off
mbstring.func_overload = 0
[/code]

  準備が完了したらセットアップ開始

②.Web File Managerモジュールの追加(http://drupal.org/project/webfm

    mdule フォルダにアップロードし、Drupalのメニューより

        【管理セクション】⇒【サイトの構築】⇒【モジュール】を選択

    『Web File Manager』だけを有効化した。

設定については次回

先日、某サイト制作中にWindows版のSafariでのみ日本語部分が表示されないという現象が発生した。

IE、Firefox、Chrome、Operaは問題なし、SafariでもMac版、iPhone版では問題なし。

WindowsのSafariだけという奇妙な事態。

ちなみにバージョンは、5.1.2 (Mac版も同様)

 

原因は、jQueryの Interactive Phoro Desk を組み込んだ際のcssの

font-familyに設定してある  “Myriad Pro”

 

font-familyの指定を削除するか、 “Myriad Pro”だけを削除すれば日本語が表示されるようになる。

 

WordPressのZIPファイルをローカルで解凍後、サーバにFTPでアップ

トップページから初期設定が始まる、このときは日本語なのだが

データベースの設定後のサイトタイトル、メールアドレスを設定する画面から突然英語になってしまう。

そのままセットアップを完了させてもずーっと英語のまま

設定画面にも言語設定項目は出てこない。

 

原因としては、FTP時にファイルをバイナリでアップしていないため、言語ファイルが正しく読み込めていないものと思われる。

 

対処方法は、データベースのテーブルを削除してバイナリモードでファイルをアップしなおしてから再度初期設定する。

 

jQuery の Interactive Phoro Desk を使う機会があったのでカスタマイズ時のメモ書きを・・・

これは写真(画像)が画面上に散らばった見せ方をする機能です。

一か所に集めて1枚1枚見ていくこともできるし、シャッフルして再度散らばせることもできます。

 

DLは下記サイトより

Interactive Photo Desk with jQuery and CSS3

 

◆背景の変更

 style.css の body の background を変更

◆All、Shaffle ボタンの変更

 既存ではアイコン画像とテキスト文字だったものをボタン画像に変更

 style.css の .pd_options_bar の -moz-box-shadow ~ border-radius までをコメントアウト

 同じく背景画像指定、hover 時の指定をコメントアウト

 ボタンの位置、サイズは margin、padding、width、height で調整する。

 index.html 内のボタンリンク部のAタグ内にボタン画像のimgタグを記述

 ※一度、style.css の最後に独自に pd_options_bar  の位置指定を組み込んだが見た目だけの変更で、クリックイベントは位置変更前のままだった。

  上記の方法で位置を指定してあげればクリックイベントの位置も変更される。

◆シャッフル領域の変更

 既存のままだと画面全体がシャッフルした際の移動範囲になっているが、ヘッダ部やナビゲーション部には来ないようにする。

 style.css の pd_container を変更

◆その他のデザイン

 style.css の最後のほうに独自のスタイルを記述

◆一定時間(15秒)ごとにシャッフルさせる

 index.html 内の JavaScript でインターバルタイマーを仕込む

  内容 : intervalShuffleID = setInterval(function() { shuffle()メソッドの内容をコピーしてくる }, 15000);

       ※shuffle() メソッドを呼び出せればいいのだが、なぜか見つからないというエラーになるので、メソッド内の処理をそのままコピーして記述

   ① start(); の後、これは初期表示時のタイマーセット

   ② function disperse() メソッド内の bindEvents(); の後、これはALLで一か所に集めた後、Back to Desk で戻った時のタイマーセット

   ③ function navigate() メソッド内の bindEvents(); の後、これはALLで一か所に集めた後、1枚ずづ表示させていって最後の1枚が表示されあとに散らばった状態に戻った時のタイマーセット

 index.html 内の JavaScript でインターバルタイマー停止を仕込む

   内容 : clearInterval(intervalShuffleID);

   ① function stack() メソッド内の一番最初、これはALLで一か所に集めた時

◆ブラウザによる動き

 FireFox、Chrome ・・・ シャッフル時に画像が移動+回転しながらヌルヌル動く

 Opera ・・・ シャッフル時に画像が移動+回転しながらカクカク動く

 IE ・・・ シャッフル時に画像が移動のみしながらヌルヌル動く

       (アニメーション時のパラメタで回転はしないようにしている、回転を加えると移動+回転になるが、なぜか毎回移動始点が左上になる)

 Safari ・・・ その場で回転だけする

         (ALLで一か所に集めてしまうと、Backで戻っても集まったままの位置で回転だけする)

 ※jQueryのanimateに渡すパラメタでIEの場合だけ回転させないように設定しているが、Safariも同様に回転させないようにするとIEと同様の動きになる。

   しかし、 $.browser.safari でブラウザ判定をするとChromeもSafariと判定されてしまう。

   せっかく正常に動いていたChromeがこれではもったいないので、Safrariと判定された場合、さらに独自に作ったブラウザチェックツールを使ってChromeとSafariを判別させる

   これによりChromeの場合には回転もさせるようにした。

 

CakePHP1.3 でSimpleTestをしようと最新版である v1.1.0 を使用したところ、

Call to undefined method CakeHtmlReporter::SimpleReporter()

が発生した。

 

最新版ではなく、v1.0 系を使わなければならないみたい

ということで、SimpleTestのサイト下部の Older stable releases から V1.0.1 を落として使用したところいけた。

 

今までHTML入力フォームにはJavaScriptによる処理を追加して入力チェックをしていましたが、

HTML5では <input > 要素の機能強化が行われJavaScriptを使わなくてもよくなりました

これは便利!

って思っていたのですが、まともに対応しているのは Opera のみで

他の主力ブラウザは未だ未対応

(http://www.findmebyip.com/litmus  のHTML5 Forms Inputs を参照)

 

しばらく前からこの状態は変わってないようだが実装されない?

 

対処法をいくつかメモメモ

・フォルダへのアクセス権が無い

  コマンドプロンプトを管理者で実行させる


・ダウンロードしたファイルのサイズが異なる

  キャッシュを削除して、ダウンロードし直す

 

・PHPで使用できるメモリ量が少ない

  php.ini ファイルの memory_limit を増やす

  ただし、8M、16M なら増やす余地はあるが、それ以上割り当てられている場合は別の原因が考えられる

 

・PHPのバージョン

  xampp for windows 1.7.4 で pear の install or upgrade を行うと、本エラーが発生する。

  これは、PHPのバージョンが 5.3.5 であるから

  xampp のバージョンを 1.7.3 に下げる(php 5.3.1)と正常にいく