渋谷でサボるエンジニアの日記 » JavaScript http://blog.firstlife.jp WEB技術などのメモ、他 Sun, 25 Sep 2011 10:20:16 +0000 ja hourly 1 http://wordpress.org/?v=3.2.1 JQuery Sortableを使って順番入れ替え機能の作成 http://blog.firstlife.jp/2008/11/11/jquery-sortable%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e9%a0%86%e7%95%aa%e5%85%a5%e3%82%8c%e6%9b%bf%e3%81%88%e6%a9%9f%e8%83%bd%e3%81%ae%e4%bd%9c%e6%88%90/ http://blog.firstlife.jp/2008/11/11/jquery-sortable%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e9%a0%86%e7%95%aa%e5%85%a5%e3%82%8c%e6%9b%bf%e3%81%88%e6%a9%9f%e8%83%bd%e3%81%ae%e4%bd%9c%e6%88%90/#comments Tue, 11 Nov 2008 09:26:38 +0000 kenji0302 http://blog.firstlife.jp/?p=338 WEBで表示順の入れ替え機能って作るのも、使うのも面倒なんだよね。上下に移動するボタン作ったり、表示順を数値で入力したり。

で、最近そんな機能を作成する必要が出てきまして。いろいろ考えて、そういえばWordPressのウィジェット（右側の最近の投稿やコメントがドラッグアンドドロップで入れ替え可能）って便利だよね、そんな風にできないかな、と思って調べてみたら出来たのでメモ。

とりあえず、何かしらライブラリを使えばできるだろう、と思って調べてみた。やっぱりこういうときはJQuery と YUI に当たることが多いね。

YUI Library Examples: Drag & Drop: Reordering a List

Sortable Demos (jQuery UI – Functional demos)

ちなみに、WordPressもJQueryっぽい。Sortableを使ってるかどうかはよく判らなかったけど。

で、今回は参考になる情報が多そうなJQueryを選択。参考にさせて頂いたのは以下のサイト。

jQuery Sortablesでドラッグ&ソータブル (All About)

ColdFusion（順序　並び替え） (有限会社デジタルムーン)

上の二つのサイトを見ればだいたい判ります。

参考にして作ったファイルがこれ。ちょっと詰まった部分はどうやってデータをPOST,GETするんだろう、という所。
sortable.php

見て貰えば判るように、並び替えた時にテキストボックスに順番を保存し、submitで送信してます。テキストボックスに保存できちゃえば、あとはsplitか何かで分割するだけだもんね。

よく判らなければ、ソース置いておきますので見てくださいな。

sortable.txt

]]> http://blog.firstlife.jp/2008/11/11/jquery-sortable%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e9%a0%86%e7%95%aa%e5%85%a5%e3%82%8c%e6%9b%bf%e3%81%88%e6%a9%9f%e8%83%bd%e3%81%ae%e4%bd%9c%e6%88%90/feed/ 2 iPhone用WEBページのUI http://blog.firstlife.jp/2008/08/19/iphone%e7%94%a8web%e3%83%9a%e3%83%bc%e3%82%b8%e3%81%aeui/ http://blog.firstlife.jp/2008/08/19/iphone%e7%94%a8web%e3%83%9a%e3%83%bc%e3%82%b8%e3%81%aeui/#comments Mon, 18 Aug 2008 17:30:59 +0000 kenji0302 http://blog.firstlife.jp/?p=145 前のエントリで「高くて手が出ねぇ」と書いたとはいえiPhoneは気になるわけです。iPhone対応ページもちょっとずつ増えてきてる。んじゃ、実際に自分で作るときはどうするのが良いのかな、と手元にiPhoneは無いけど妄想したりしてました。

で、Livedoorのログイン画面がiPhoneに対応した、との話を聞いて、メジャーなサイトがどういうiPhone対応をしてるか見てみました。

livedoor ログイン

これがiPhone対応のログインページ。PCでも見れるのでソースを見てみた所、iuiのcssを使ってる。

iui

以前に触ってみたんだけど確かに良くできてる。ほかにもiuiを使ってiPhone対応してるサイトもいくつかあるらしい。事実上のiPhone用のWEBページのUIの標準ってとこになりそうですね（もうなってる？）

ダウンロードファイルにサンプルが含まれてるので、ダウンロードして動かしてみるのがオススメです。しかもとっても簡単に使えます。

]]> http://blog.firstlife.jp/2008/08/19/iphone%e7%94%a8web%e3%83%9a%e3%83%bc%e3%82%b8%e3%81%aeui/feed/ 0 これであなたのサイトも“できる男”風に！ http://blog.firstlife.jp/2008/06/11/%e3%81%93%e3%82%8c%e3%81%a7%e3%81%82%e3%81%aa%e3%81%9f%e3%81%ae%e3%82%b5%e3%82%a4%e3%83%88%e3%82%82%e2%80%9c%e3%81%a7%e3%81%8d%e3%82%8b%e7%94%b7%e2%80%9d%e9%a2%a8%e3%81%ab%ef%bc%81/ http://blog.firstlife.jp/2008/06/11/%e3%81%93%e3%82%8c%e3%81%a7%e3%81%82%e3%81%aa%e3%81%9f%e3%81%ae%e3%82%b5%e3%82%a4%e3%83%88%e3%82%82%e2%80%9c%e3%81%a7%e3%81%8d%e3%82%8b%e7%94%b7%e2%80%9d%e9%a2%a8%e3%81%ab%ef%bc%81/#comments Wed, 11 Jun 2008 01:16:37 +0000 kenji0302 http://blog.firstlife.jp/?p=140 方法。

1. まずは落ち着く。できる男はいかなる時でも落ち着いてるものだ。仕事中なら尚更だ。

2. 深呼吸をしよう。落ち着いて深呼吸をしてる、周りからは“なんて思慮深い、さすができる男だ”と思われてるぞ！

3. おもむろに下のJavaScriptをアドレスバーに貼り付けてEnterだ。

JavaScript:with(document.body)innerHTML=innerHTML.replace (/の(?!は)(?!で)(?!が)(?!に)(?!か)(?!も)/g,'のできる男の');focus()

4. ページ全体にできる男風味が漂うぞ！

気に入ったらブックマークレットに登録しよう。これで、Yahoo! でも Google でもできる男風で無敵！できる男なら当然ブックマークに登録だ。

できる男風　←できる男はこれをブックマークに登録だ！

5. 自分のブログにもJavaScriptを埋め込んでみよう。できる男のブログだと一目でわかるようになるぞ！

とまぁ、どのサイトを見てもできる男、できる男って書いてあるので、むしゃくしゃしてやりました。反省はしてません。そんな私はいろいろできない男です。

中身はあれです、一時期はやったHGのJavaScriptと同じです。簡単なJavaScriptなのでみんなも色々作ってみよう！

]]> http://blog.firstlife.jp/2008/06/11/%e3%81%93%e3%82%8c%e3%81%a7%e3%81%82%e3%81%aa%e3%81%9f%e3%81%ae%e3%82%b5%e3%82%a4%e3%83%88%e3%82%82%e2%80%9c%e3%81%a7%e3%81%8d%e3%82%8b%e7%94%b7%e2%80%9d%e9%a2%a8%e3%81%ab%ef%bc%81/feed/ 0 RSSリーダー登録ボタン一括生成JavaScript http://blog.firstlife.jp/2008/04/23/rss%e3%83%aa%e3%83%bc%e3%83%80%e3%83%bc%e7%99%bb%e9%8c%b2%e3%83%9c%e3%82%bf%e3%83%b3%e7%94%9f%e6%88%90javascript/ http://blog.firstlife.jp/2008/04/23/rss%e3%83%aa%e3%83%bc%e3%83%80%e3%83%bc%e7%99%bb%e9%8c%b2%e3%83%9c%e3%82%bf%e3%83%b3%e7%94%9f%e6%88%90javascript/#comments Tue, 22 Apr 2008 15:36:44 +0000 kenji0302 http://blog.firstlife.jp/?p=127 RSSリーダー、使ってますか？便利ですよ。

まぁ、ブックマークレットとか設定するのが面倒で、ノートパソコンだとブックマークツールバーがじゃまだったりするんだけどね。でも、最近はRSSリーダーへの登録ボタンをつけてるサイトが増えてきた。凄く助かる。

ので、自分のサイトにもつけるため、設定の仕方を調べてみたのでまとめ。標題のJavaScriptは最後にファイルで添付してるよ。

さて、RSSリーダーといってもいくつもあって、メジャーどころで6件ピックアップ。で、以下がRSSリーダーに登録するボタンの生成ページへのリンク。

といっても、ページ一個一個生成して、リンク貼るのが面倒。パラメータにRSSのURL渡してるだけだから、JavaScriptで書けるんじゃない？なんて思ったので作ってみました。

そのしょぼい見た目は 会社関係をなんとなくわかった気になるの右上を見ていただくとして、以下がそのファイルです。

RSSリーダー登録ボタン生成JavaScript

上のテキストのHTMLを、RSSの出力を行っているページの好きなところに貼り付けてください。すると、右上にリンクが表示されます。

JavaScriptですし、改変や商用不可なんて堅いことは言いませんので、自由に改造して使ってください。で、綺麗なのが出来たら私にも使わせてください。

]]> http://blog.firstlife.jp/2008/04/23/rss%e3%83%aa%e3%83%bc%e3%83%80%e3%83%bc%e7%99%bb%e9%8c%b2%e3%83%9c%e3%82%bf%e3%83%b3%e7%94%9f%e6%88%90javascript/feed/ 2 フレーム越しにフォントサイズの変更（JavaScript） http://blog.firstlife.jp/2008/02/28/%e3%83%95%e3%83%ac%e3%83%bc%e3%83%a0%e8%b6%8a%e3%81%97%e3%81%ab%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%b5%e3%82%a4%e3%82%ba%e3%81%ae%e5%a4%89%e6%9b%b4%ef%bc%88javascript%ef%bc%89/ http://blog.firstlife.jp/2008/02/28/%e3%83%95%e3%83%ac%e3%83%bc%e3%83%a0%e8%b6%8a%e3%81%97%e3%81%ab%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%b5%e3%82%a4%e3%82%ba%e3%81%ae%e5%a4%89%e6%9b%b4%ef%bc%88javascript%ef%bc%89/#comments Thu, 28 Feb 2008 14:52:28 +0000 kenji0302 http://blog.firstlife.jp/2008/02/28/%e3%83%95%e3%83%ac%e3%83%bc%e3%83%a0%e8%b6%8a%e3%81%97%e3%81%ab%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%b5%e3%82%a4%e3%82%ba%e3%81%ae%e5%a4%89%e6%9b%b4%ef%bc%88javascript%ef%bc%89/ <head> <title>フレームサンプル </head> <frameset cols=”50%,50%”> <frame src=”test1.html” name=”frame_test1″> <frame src=”test2.html” name=”frame_test2″> </frameset> </html> nameを設定するのがポイント。 で、test2.htmlに文章があって、test1.htmlからフォントサイズの変更をしたい、とします。そういう場合のtest1.htmlの内容はこう。 <html> <head> <title>フォントサイズ変更テスト</title></head> <body> <input type=”button” onClick=”window.parent.frame_test2.document.body.style.fontSize = 1″ value=”右側のfontsizeを10にする”> </body> </html> window.parent でフレームやその下のデータの参照や変更が出来るって訳。ただ、注意しなくちゃいけないのは、同一ドメイン内のURLしかアクセスできないって事。まぁ、別ドメインのパラメータの変更・参照ができるなら、いろいろ悪いこと思いついちゃいますしね。 ポップアップウィンドウの処理もこんな感じ。window.opener で親ウィンドウが参照できます。 何かの参考になれば。]]> 結構な間更新してなかったので、今日聞かれたことをちょっとメモ。

最近Yahoo!ニュースとかで、フォントサイズが変更できるボタンがあるよね。あれをフレーム越しにやろう、って話。知ってればたいした話じゃないけど、知らないとちょっと悩むかも･･･まぁ、今更フレームってのもあんまり無いんだけど。

まずフォントサイズの変更だけど、簡単に書いちゃうと、

<input type=”button” onClick=”document.body.style.fontSize = 10″ value=”fontsizeを10にする”/>

こんな感じ。大きくしたり小さくする部分は自分で書いてね。

で、フレーム越しにやる場合どうするか。まず、下のようなフレームを作成したとしましょう。

<html>
<head>
<title>フレームサンプル
</head>
<frameset cols=”50%,50%”>
<frame src=”test1.html” name=”frame_test1″>
<frame src=”test2.html” name=”frame_test2″>
</frameset>
</html>

nameを設定するのがポイント。

で、test2.htmlに文章があって、test1.htmlからフォントサイズの変更をしたい、とします。そういう場合のtest1.htmlの内容はこう。

<html>
<head>
<title>フォントサイズ変更テスト</title></head>
<body>
<input type=”button” onClick=”window.parent.frame_test2.document.body.style.fontSize = 1″ value=”右側のfontsizeを10にする”>
</body>
</html>

window.parent でフレームやその下のデータの参照や変更が出来るって訳。ただ、注意しなくちゃいけないのは、同一ドメイン内のURLしかアクセスできないって事。まぁ、別ドメインのパラメータの変更・参照ができるなら、いろいろ悪いこと思いついちゃいますしね。

ポップアップウィンドウの処理もこんな感じ。window.opener で親ウィンドウが参照できます。

何かの参考になれば。

]]> http://blog.firstlife.jp/2008/02/28/%e3%83%95%e3%83%ac%e3%83%bc%e3%83%a0%e8%b6%8a%e3%81%97%e3%81%ab%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%b5%e3%82%a4%e3%82%ba%e3%81%ae%e5%a4%89%e6%9b%b4%ef%bc%88javascript%ef%bc%89/feed/ 2