アーカイブ

‘javascript’ タグのついている投稿

[symfony]ドラッグ&ドロップの処理を実装してみた

2009 年 6 月 23 日 コメントはありません

フリッカーのグルーピングのようなドラッグ&ドロップで画像を操作する機能を実装したいと思い、色々と調べてみた。

symfonyのJavascriptヘルパーの中身を調べていたら

draggable_element()
drop_receiving_element()

の2つのヘルパーで実装できることが判明。

まずはドラッグするための機能を説明する。

  1.  <div id="product_list" class="product">
  2.  <?php foreach($products as $id => $title): ?>
  3.    <?php echo image_tag('product'.$id, array(
  4.      'id'    => 'product_'.$id,
  5.      'alt'  => $title,
  6.      'class' => 'products'
  7.    )) ?>
  8.    <?php echo draggable_element('product_'.$id, array('revert' => true)) ?>
  9.  <?php endforeach ?>
  10.  </div>

draggable_element(ドラッグさせたい要素のid, [オプション])
で指定した要素をドラッグ出来るようになる。

draggable_elementは次のパラメーターを受け取る。

パラメーター 説明
revert trueに設定した場合、要素が放たれたときに元の位置に戻るようになる。
また任意の関数を呼び出すことも可能。
ghosting 要素をクローンして、要素が放たれても元の位置に戻らないようになる。
snap falseに設定した場合、スナッピングされない。

次にドロップの機能を説明する。

  1.  <?php forearch ($labels as $label) : ?>
  2.  <div id="label_<?php echo $label->getId() ?>">
  3.  <span id="count_<?php echo $label->getId() ?>">0</span>
  4.  <span id="indicator_<?php echo $label->getId() ?>">loading now....</span>
  5.  <?= drop_receiving_element('label_'.$label->getId(), array(
  6.    'url' => 'blg/add?label_id='.$label->getId(),
  7.    'accept' => 'product',
  8.    'update' => array(
  9.      'success' => 'count_'.$label->getId(),
  10.      'failure' => 'error_'.$label->getId()
  11.    ),
  12.    'method' => 'GET',
  13.    'hoverclass' => 'label-active',
  14.    'script' => 'true',
  15.    'confirm' => '"'.$label->getLabelName().'に追加しますが、よろしいですか?"',
  16.    'loading' => 'Element.show("indicator_'.$label->getId().'")',
  17.    'complete' => 'Element.hide("indicator_'.$label->getId().'")',
  18.  )) ?>
  19.  </div>

drop_receiving_element(ドロップさせたい要素のid, [オプション])
で指定した要素をドロップ出来るようになる。

drop_receiving_elementは次のパラメーターを受け取る。

パラメーター 説明
url ドロップされたときに実行するurl
accept ドロップさせる要素を文字列またはcssクラスで指定する。
update 更新する要素を指定する。配列を指定することで成功時と失敗時の要素を指定できる。
method POST、GETなどを指定する。
script trueの場合、指定したアクションでjavascriptを実行できる
hoverclass 要素をドラッグしている最中(ドラッグしているがドロップはしていないとき)のcssクラスを指定する
confirm 確認ダイアログに表示する文字列を指定する

またdrop_receiving_elementに限ったことではないが、
symfonyのajaxヘルパーには以下のようなコールバックのトリガーが設定されている。

コールバック 説明
before クエストが初期化される前
after リクエストが初期化された直後で読み込まれる前
loading ブラウザからのデータでリモートの文章が読み込まれているとき
loaded ブラウザがリモートの文章を読み込み終えたとき
interactive ユーザーが読み込みを終えずにリモートの文章とやりとりしているとき
success XMLHttpRequest が完了し、HTTP ステータスコードが 2XX のとき
failure XMLHttpRequest が完了し、HTTP ステータスコードが 2XX でないとき
404 url が 404 ステータスを返すとき
complete XMLHttpRequest が完了したとき ( 失敗であろうと成功であろうと )

参考:第11章-Ajaxの統合
    symfony book 日本語ドキュメント Javascriptヘルパー

カテゴリー: javascript, symfony タグ: ,

[symfony]Javascriptを用いたリンク処理

2009 年 5 月 29 日 コメントはありません

普通にウェブプログラミングをしていると、ハイパーリンク内で特定のスクリプトのトリガーを引きたくなるときがある。

「戻る」や「ポップアップ」機能がその代表例とも言えるだろう。

symfonyにはjavascriptヘルパーが用意されており、これらを用いると比較簡単にリンク処理をすることができる。

  1.  <?php
  2.  
  3.  echo link_to_function('戻る', 'history.back()');
  4.  // <a href="#" onclick="history.bakc()">戻る</a>
  5.  
  6.  echo button_to_function('削除', 'if confirm("本当に削除してもよろしいですか?"){ do_delete(); }');
  7.  // <input type="button" onclick='if confirm("本当に削除してもよろしいですか?"){ do_delete(); }' value="削除" />
  8.  
  9.  ?>

ちなみにpear内のJavascriptHelper.phpには次のように書かれていた。

  1.  <?php
  2.    /**
  3.    * Returns a link that'll trigger a javascript function using the
  4.    * onclick handler and return false after the fact.
  5.    *
  6.    * Examples:
  7.    *  <?php echo link_to_function('Greeting', "alert('Hello world!')") ?>
  8.    *  <?php echo link_to_function(image_tag('delete'), "if confirm('Really?'){ do_delete(); }") ?>
  9.    */
  10.    function link_to_function($name, $function, $html_options = array())
  11.    {
  12.      $html_options = _parse_attributes($html_options);
  13.  
  14.      $html_options['href'] = isset($html_options['href']) ? $html_options['href'] : '#';
  15.      $html_options['onclick'] = $function.'; return false;';
  16.  
  17.      return content_tag('a', $name, $html_options);
  18.    }
  19.  
  20.    /**
  21.    * Returns a button that'll trigger a javascript function using the
  22.    * onclick handler and return false after the fact.
  23.    *
  24.    * Examples:
  25.    *  <?php echo button_to_function('Greeting', "alert('Hello world!')") ?>
  26.    */
  27.    function button_to_function($name, $function, $html_options = array())
  28.    {
  29.      $html_options = _parse_attributes($html_options);
  30.  
  31.      $html_options['onclick'] = $function.'; return false;';
  32.      $html_options['type']    = 'button';
  33.      $html_options['value']  = $name;
  34.  
  35.      return tag('input', $html_options);
  36.    }
  37.  
  38.  ?>

ヘルパーのファイルを探索すれば、意外に便利なものが見つかるかもしれない。

カテゴリー: javascript, symfony タグ: , ,

[JavaScript]canvas要素でビジュアルな画像を(1) ~基本的な使い方~

2008 年 4 月 25 日 コメントはありません

今回はHTML5で脚光を浴びるであろうcanvas要素の基本について紹介する。

・概要

HTMLはウェブ関連技術の標準団体「W3C」(World Wide Web Consortium)によって定められていて、現在はHTML4だが2010年からHTML5が正式にリリースされるらしい。

【参考】
HTML5が持つ本当の意味:http://www.atmarkit.co.jp/news/200801/25/html.html

HTML5草案:http://www.w3.org/html/wg/html5/

canvas要素は決して新しくないがあまり使われていないのが事実。
しかし使いこなせばこんなこともできるらしいw

【参考】
Canvascape – 3D Walker:http://www.abrahamjoffe.com.au/ben/canvascape/
Canvas 3D Rendererデモ:http://tapper-ware.net/canvas3d/

canvas要素はWeb ページ上でインタラクティブな画像生成を行う技術で、従来 Java や Flash などを使わなければできなかったようなビジュアル的表現が、プラグインや特殊なツールなしで実現できる。
しかし、現在ではIEではcanvas要素に対応しておらず、Safari,Opera9,Firefox1.5などで使えるらしい。

・canvasを利用する流れ

まずはcanvas要素で描画領域を確保し、JavaScriptを用いて描画領域に図形を描画する。
canvas要素での描画領域の確保は以下のようにする。

  1.  <canvas  id="mycanvas" width="200" height="200">代替文章</canvas>

javascriptでcanvas要素を使うのでidを指定する。width,heightは描画領域のサイズでこれは必須らしい。IEなどのcanvas要素が使えないブラウザではcanvasタグにはさまれた代替文章が表示されるので入力しておいて方がよいかも。
</canvas>の閉じタグを忘れるとの後の部分が表示されないので注意すること。

次にJavaScriptでcanvas要素のオブジェクトにgetContextというメソッドを呼び出し、オブジェクトを取得する。

  1.  var canvas = document.getElementById("mycanvas");
  2.  var context = canvas.getContext("2d");

最後に描画コンテキストに実装されたメソッドも用いてcanvas内に描画していく。
サンプルは以下

  1.  <html>
  2.  <head>
  3.  <meta http-equiv="Content-Type" Content="text/html;charset=UTF-8">
  4.  <title>test</title>
  5.  <script type="text/javascript">
  6.  <!--
  7.  function inite() {
  8.  var canvas = document.getElementById("mycanvas");
  9.  if(!canvas.getContext) {
  10.  // canvas対応ブラウザではないとき
  11.  return;
  12.  } else {
  13.  var ctx = canvas.getContext("2d");
  14.  ctx.fillStyle = "rgb(200,0,0)";
  15.  ctx.fillRect (30, 30, 50, 50);
  16.  
  17.  // パスを使って三角形を描く
  18.  ctx.beginPath();
  19.  ctx.moveTo(70, 70);
  20.  ctx.lineTo(105,120);
  21.  ctx.lineTo(25,125);
  22.  ctx.lineTo(70, 70);
  23.  ctx.stroke();
  24.  
  25.  // 円弧(円)
  26.  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
  27.  ctx.beginPath();
  28.  ctx.arc(100, 100, 50, 0, 2*Math.PI, true);
  29.  ctx.fill();
  30.  }
  31.  }
  32.  // -->
  33.  </script>
  34.  </head>
  35.  <body onload="inite()">
  36.  <canvas id="mycanvas" width="150" height="150"></canvas>
  37.  </body>
  38.  </html>

実行結果はこちら
描画コンテキストのメソッドについては次回に詳しく触れる。

カテゴリー: html, javascript タグ: ,

[JavaScript]簡易版リッチテキストエディタを作ってみた

2008 年 3 月 23 日 コメントはありません

アルバイト先でちゃんとしたのを作ったのだが、知識の定着のために簡易版リッチテキストエディタを作ってみた。

簡易版リッチテキストエディタ:http://www.y2-space.com/www/program/richtext.html

(IE,firefoxで動作確認済み)

リッチテキストエディタ(WYSIWYG)はブログの作成画面などで結構メジャーなもので、htmlをしらなくてもリンクや画像、文字サイズなどを編集できる。

・designMode

リッチテキストエディタはまず編集エリアとしてインライン要素のiframeを用いる。このiframeのdesignModeという属性をOnにすることによってリッチテキストによる編集が可能になる。

ただブラウザにかなり依存するようなので、実際にはfirefoxとIEで以下のような感じで分ける必要がある。

  1.  // firefox
  2.  document.getElementById("iframe").contentDocument.designMode="On";
  3.  // IE
  4.  document.frames[0].document.designMode="On";
・execCommand

テキストを装飾するにはexecCommandを用いる。実際にテキストをBold(太字)にしたい場合、以下のようになる。※以下からfirefoxを基準にして書く

  1.  // boldにする場合
  2.  document.getElementById("iframe").contentDocument.execCommand("Bold",false,null);

基本的にexecCommandの第2引数はfalseであり、第1引数にコマンド名、第3引数に渡したい値(linkの場合などはurlを渡したりする)という感じになっているらしい。

リッチテキストの仕様などはこちらで
firefox
http://www.mozilla-japan.org/editor/midas-spec.html
IE
http://msdn2.microsoft.com/en-us/library/ms533049(VS.85).aspx
http://msdn2.microsoft.com/en-us/library/ms533720.aspx

作成した簡易版リッチテキストエディタでは”iframeの中身”というボタンを押下すると、リッチテキストをタグに直したhtmlタグ形式のテキストエリアが別に出力される。

またリッチテキスト入力とプレーンテキストへの切り替えはチェックボックスで切り替える。

本当はすべてのコマンドを確かめたかったが、ちょっとめんどくさかったので5つくらいに限定した。

ソースはちょっと汚いのであしからずww

カテゴリー: javascript タグ: ,
Get Adobe Flash player