Fusic Developers Weblog

Posts Tagged ‘jQuery’

{ 2012.11.5 }

PHPmatsuriにいって来ました！(一人目？)

category：JavaScript, php｜author：hagiwara｜tag：jQuery, php, PHPMatsuri｜comment：non

多分久しぶりな登場の気がする萩原です。

昨年に引き続きPHP Matsuriに参加させていただきました！
(今回は福岡！)
弊社からは何と8人も参加させて頂きました。
全員LTで発表しましたので発表の最後の方にはまたFusicかとつぶやかれるくらいでした。

一人目って書きましたが別に二人目とかタイトルが続くことは多分ないんじゃないかと思います。

今回のPHP Matsuri

今回は、本当にネタが思いつかずやることが決まったのは当日14時くらいでした。
~~大して役に立たないもの~~おもしろそうなものを作ろうということは何となく事前に決めていましたが。

何とかネタは思いついたものの、時間内に出来るんだろうかとか思いながらバタバタ作っていたらなんだかんだで日付が変わったころには大体できてしまっていました。
残り時間は書いたのもを見直したり、前でファミコンやってるのを眺めてたりホークスと横浜のトレードに衝撃を受けていたり(しかも今日公式に発表されたトレード、メンツが変わってたし)してました。

今回やったこと

今回はお絵かきのアプリを作りました。
ただお絵かきするだけじゃつまらないので、
お絵描きの履歴を取っておいて速度まで再現するものを
CakePHPとJavasciptで作成しました。

具体的に何をしたかというと
・canvasを利用して絵を描きつつ、mousemove中のマウスの座標や色、線の太さ、時刻を取得。
・絵を描き終わったタイミングでAjaxでデータを送信して保存。
・保存したデータを利用して、SetTimeoutを使ってcanvasで描写。

なんてことをやってました。

え？PHPがどこにあるのかって？
saveとかfindとか使ったってば！
~~PHPmatsuriの間一つもPHPに関してググらなかったけど！~~

因みにmousemoveでとれる座標はすべて取得しているので1分くらい描き続けると保存のAjaxが30秒くらいかかります・・・。
(まぁVM使って動かしてたんで実際にやればもっと速くなるとは思いますが・・・。)

ちなみにちょっと公開する場所とかないのでお見せできないのが残念です。

ついでに言うと発表はダダすべりしました・・・。

感想

ネタは2週間くらい前から考えてたんですが、思いついたのは当日。
当日になって「エイヤ」でやっても意外となんとかなるものだなと思ってしまいました。

発表は失敗しましたが(一説にはマイクが入ってなかったとかなんとか・・・)、
作ったものを評価してくれたみたいで本とシャツをいただけました！
ありがとうございます！

前回は結構セッションをたくさん聞いたので、今回はコーディングをメインに参加しました。
やっぱりあの雰囲気でコードを書くのはとても楽しかったです！

何か次回は北海道とかいう宣言が何かなされていたので次回は北海道なのでしょう(笑)

次回も楽しみにしておきます！
~~後結局のところ私はFusicの変態枠なのでしょうか・・・~~

{ Page Top }

{ 2011.7.2 }

rails と jquery treeview でディレクトリツリーをらくらく実装する

category：JavaScript, ruby｜author：t-kawano｜tag：jQuery, Rails, ruby｜comment：2

ども、Fusic 河野です。
だいぶ久しぶりですね。

今度の rubykaigi2011 に参加させて頂くこととなりました！
会場で見かけたら、ぜひお気軽にお声をかけてくださいませ。

[rubykaigi2011]
rubykaigi.org/2011/

それと、もう一つ告知です。
来る７月２８日（木）、福岡で活動している Androidの会福岡支部、九州GTUG、
HTML5+α福岡、iDevQ、そして、AppleKnight の４つのコミュニティが
福岡県Ruby・コンテンツ産業振興センターに集結し、同時に勉強会、懇親会を行います。

ご興味のある方は、ぜひともご参加ください！！
参加登録は下記のリンク先より facebook にて参加表明をお願いいたします。

[futuresync]
futuresync.jp/

さて、わたくし、前回の記事でも書きましたが、主に ruby on rails を
やっており、ZENPRE の iPhone アプリを担当させていただいてます。

今回とあるお客様の rails 案件にて、ツリービューを作る必要がありました。
一から作ろうかと思っていたところ、jquery ui の treeview を見つけ、
使ってみたので、簡単なサンプルとともにご紹介をします。

いやー、それにしてもコレ凄く便利です！！

まずは、バージョン確認です。

$ ruby -v
ruby 1.9.2p0 (2010-08-18 revision 29036) [i686-linux]
 
$ rails -v
Rails 3.0.9

rails のプロジェクトを作成します。

$ rails new treeview_test
$ cd treeview_test/
$ rm public/index.html

prototype.js を削除ります。
サヨナラ〜、お元気で〜♪

$ vim Gemfile
 
gem 'jquery-rails'
 
$ rails g jquery:install

ツリービューを表示するためのコントローラを作成します。

$ rails g controller Treeviews index
$ vim routes.rb
 
  root :to => "treeviews#index"

そして、本日の主役のご登場！
jquery treeview を下記よりダウンロードします。
bassistance.de/jquery-plugins/jquery-plugin-treeview/

js や css、jpg などを rails の各ディレクトリにコピーします。
画像は、images に “treeview” というディレクトリを
作成し、そこにコピーしています。
そして、jquery.treeview.css に記載されている画像のパスを
ちょっと変更します。

　images/xxxx → ../images/treeview/

treeview を取り込みます。

$ vim app/views/layouts/application.html.erb
 
<!DOCTYPE html>
<html>
<head>
  <title>TreeviewTest</title>
  <%= stylesheet_link_tag :all %>
  <%= javascript_include_tag :defaults %>
  <%= javascript_include_tag 'jquery.treeview' %>
  <%= javascript_include_tag 'jquery.treeview.edit' %>
  <%= javascript_include_tag 'jquery.treeview.async' %>
  <%= csrf_meta_tag %>
</head>
<body>
 
<%= yield %>
 
</body>
</html>

ツリービューを表示するため view を書き換えます。

$ vim app/views/treeviews/index.html.erb
 
<script type="text/javascript">
$(document).ready(function(){
  $("#example").treeview({});
});
</script>
 
<ul id="example" class="filetree">
	<li><span class="folder">Folder 1</span>
		<ul>
			<li><span class="file">Item 1.1</span></li>
		</ul>
	</li>
	<li><span class="folder">Folder 2</span>
		<ul>
			<li><span class="folder">Subfolder 2.1</span>
				<ul>
					<li><span class="file">File 2.1.1</span></li>
					<li><span class="file">File 2.1.2</span></li>
				</ul>
			</li>
			<li><span class="file">File 2.2</span></li>
		</ul>
	</li>
	<li class="closed"><span class="folder">Folder 3 (closed at start)</span>
		<ul>
			<li><span class="file">File 3.1</span></li>
		</ul>
	</li>
	<li><span class="file">File 4</span></li>
</ul>

完成です！！
いやー、ほんとめちゃくちゃ簡単ですね！！
まー、これだけだと寂しいのとせっかくの rails も意味がないので
rails にディレクトリ一覧を返す関数を作成し、ajax 使って
ディレクトリ階層を動的に表示できるように変更します。
おー！rails っぽいですね！

routes にパスを追加します。

$ vim config/routes</code>
 
  match '/treeviews/get_dir_list' => 'treeviews#get_dir_list'

さっきの view を書き換えます。

$ vim app/views/treeviews/index.html.erb
 
<script type="text/javascript">
$(document).ready(function(){
  $("#example").treeview({});
  $("#example2").treeview({
		url: "<%= treeviews_get_dir_list_path %>"
  });
});
</script>
 
<h4>通常のツリービュー表示</h4>
 
<ul id="example" class="filetree">
	<li><span class="folder">Folder 1</span>
		<ul>
			<li><span class="file">Item 1.1</span></li>
		</ul>
	</li>
	<li><span class="folder">Folder 2</span>
		<ul>
			<li><span class="folder">Subfolder 2.1</span>
				<ul>
					<li><span class="file">File 2.1.1</span></li>
					<li><span class="file">File 2.1.2</span></li>
				</ul>
			</li>
			<li><span class="file">File 2.2</span></li>
		</ul>
	</li>
	<li class="closed"><span class="folder">Folder 3 (closed at start)</span>
		<ul>
			<li><span class="file">File 3.1</span></li>
		</ul>
	</li>
	<li><span class="file">File 4</span></li>
</ul>
 
 
<h4>sync させたツリービュー表示</h4>
<ul id="example2" class="filetree"></ul>

treeview の url に先ほど routes に追加したパスを記載します。

controller もゴニョゴニョと追加します。

$ vim app/controllers/treeviews_controller.rb
class TreeviewsController < ApplicationController
 
  def index
  end
 
  def get_dir_list
    root_flg = (params["root"] == "source") ? true : false
    path = "./"
    path = params["root"] unless root_flg
    arry = []
    d = dir_list(path, arry)
    render :json => arry || [], :layout => false
  end
 
protected
  def dir_list(path, arry=[], root_flg=false)
    Dir.glob("#{path}/*").map do |d|
      classes = "file"
      classes = "folder" if FileTest.directory?(d)
      hasChildren = (FileTest.directory?(d)) ? true : false
    	h = {"id" => d, "text" => File.basename(d), "path" => File.dirname(d), "expanded" => false, "classes" => classes, "hasChildren" => hasChildren, "children" => []}
      arry << h
    end
    arry
  end
 
end

dir_list() の関数でディレクトリ情報の hash を作成し、view 側に json で返します。
返された json を treeview 側が解析してツリービューを表示します。
返す hash の id のところがミソでして、ここにパスを記載していると
treeview にてディレクトリを選択された場合、params["root"] に選択された
ところのパスが渡されます。
一番上のルートの場合には、params["root"] には、”source” という文字が渡ってきます。

今回もいつもの如くソースは github にあげてます。
また、サンプルをここに置いてますので実際の動作を確認できます。
今回始めて dotcloud を使ってみました。
これまためちゃくちゃ便利ですねー！
dotcloud で rails を動かす方法とかは、また次回にでも、デモ。

それでは、良い rails ライフを〜。

[ソース]
github.com/sora0513/TreeViewTest

[デモ]
8befe980.dotcloud.com/

{ Page Top }

{ 2010.12.24 }

[jQuery プラグイン]draggableの使い方

category：JavaScript｜author：hagiwara｜tag：draggable, fac2010, javascript, jQuery｜comment：non

アドベントカレンダーも最終日になりました。

誕生日プレゼントに次いで、アンカーというクリスマスプレゼントまでもらってしまった、弊社安元に続いてまさかの4回目の登場の萩原です。

~~まぁ今年はクリスマスは中止なわけですが~~

[jQuery プラグイン]draggableの使い方

今回はjQueryプラグイン、draggableの紹介をします。

draggableはその名の通り、divやsqpnなどのドラッグ＆ドロップを簡単に実装できるプラグインです。

まずはこちらからｊQuery UIをダウンロードします。

その中から以下のjsファイルを使用します。
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.mouse.js
jquery.ui.draggable.js

実際のコードを見てもらった方が早いと思うので早速コードを。

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery.ui.mouse.js"></script>
<script type="text/javascript" src="jquery.ui.draggable.js"></script>
<script type="text/javascript">
	$(function(){
		$('div').draggable({
			helper:'clone',//ドラッグ時に要素を複製する
			opacity:'0.5',//不透明度の指定
			drag:function(){},//ドラッグ中
			stop:function(){}//ドラッグ終了時
	});
	})
</script>
<div style="border-color:black;border-style:solid;border-width:1px;width:50px;">
	テスト
</div>あああ

draggableにはいくつもオプションが準備されていまして、ドラッグする時の要素の動きから、
ドラッグ中やドラッグ終了時に関数を指定することもできます。
関数の中ではthisを使うことでドラッグ中の要素を取得することもできますので、
DIVを左の枠から右の枠に移すと言った動きを作ることもできます。

(というか今回draggableを使用した目的がそれでした。)

他にもたくさんオプションが準備されていますので、多分一通りはできるのではないかと思います。

少しは役に立つかもしれない化学知識

毎度おなじみになってきた化学知識コーナー第4回です。
皆さんクロロホルムってご存知だと思います。
ドラマとか推理アニメとか~~バーローとか~~に出てくるあれです。
ハンカチにクロロホルムをしみこませて、かがせることで即おねんね、という描写が良くなられてますが、あれは大ウソです。

化学ではかなり一般的に使われるもので、主に水に溶けないものを溶かすことに使われています。
蒸発しやすく結構強烈な匂いがします。(少なくとも私は苦手です･･･)

まぁ匂いを把握していることからわかるとおり、嗅いだら即気絶するようなものじゃありません。
濃厚なクロロホルムを10分以上かぐと気絶したりするらしいですが･･･

何でクロロホルムがあんな扱いなのか不思議ですね。
昔麻酔に使われていたせいらしいですが・・・

あ、因みに絶対に試したりしないで下さいね。
発がん性とかありますし。

総括

最後なんで簡単に総括もさせていただきます。
アドベントカレンダーをご覧下さった皆さん、Fusicの皆さん、24日お疲れ様です。
感想としては、まず結構登場人物が割と偏っていたなぁという感じですね。
担当を決めるルーレットをテストしていた際は、特に偏ったりしていなかったようなのですが･･･
特に、企画者の小山が一人だけ当たらないという展開あり、4回当たりが二人もと･･･
社内もある意味スリリング(?)な24日でした。

内容も汎用的に使えそうなものから、なかなかコアなものまで多様な記事が登場しました。
記事の傾向から弊社の何某はどういった分野が得意か、等もわかったんじゃないかなと思います。

最後に

これで、Fusicアドベントカレンダーはおしまいです。
普段Fusicブログに登場しない人物も登場していい企画だったなと思います。
それではまたお会いしましょう。

Fusicアドベントカレンダーエキストララウンド(!?)にご期待下さい？

{ Page Top }

Fusic Developers Weblog

Posts Tagged ‘jQuery’

PHPmatsuriにいって来ました！(一人目？)

今回のPHP Matsuri

今回やったこと

感想

rails と jquery treeview でディレクトリツリーをらくらく実装する

[jQuery プラグイン]draggableの使い方

[jQuery プラグイン]draggableの使い方

少しは役に立つかもしれない化学知識

総括

最後に

Official

tag