第22回 リアルタイムプレビュー付きのHTMLエディタを作ろう – jQuery入門

2009 年 11 月 14 日 投稿者: naga3

※今回はほとんど一発ネタです。

仕事で「リアルタイムで結果を確認できるHTMLエディタを作ってくれ」という要件があり、途方に暮れました。TinyMCECKeditorを導入しようかとも考えたのですが、よく考えたらリアルタイムプレビューだけならJavaScript数行で実装できるじゃん、と思い自分で作ることにしました。

HTMLエディタのデモ

セキュリティ的にまずい気がするのでzipです。ローカルで実行してください。
htmleditor.zip
続きを読む »

てへこちゃん

2009 年 11 月 14 日 投稿者: naga3

ベスが何かやらかしちゃったとき用に、
てへこちゃんというイラストを作ったので
「何かやらかしちゃった!」と思ったときは
上のほうにあるやらかしちゃったとき用のリンクを押すといいよ。

しつこいバージョン

第21回 iPhoneのように画像をダブルクリックした地点を中心に拡大縮小する – jQuery入門

2009 年 10 月 25 日 投稿者: naga3

iPhoneのようにシリーズ、しつこすぎですね。前回のように背景画像を移動する手法ではiPhoneのような拡大縮小ができないのですが、imgタグで画像を表示する方法ならば実現可能ではないかと考えてみました。具体的には、positionプロパティにabsoluteを指定してleftとtopで表示位置を変え、拡大縮小はwidth, heightプロパティをanimateすることで対応します。そのままでは拡大したときに画像があふれてしまうので、imgをdivタグで覆い、overflowプロパティをhiddenにすることによってあふれる部分を隠すわけです。

拡大縮小のデモ

画像の上でダブルクリックするとマウスの座標を中心に拡大縮小します。写真画像はフリー写真素材 Futta.NET様の素材をお借りしています。

続きを読む »

第20回 iPhoneのように大きい画像の表示領域をマウスのドラッグで移動してみる – jQuery入門

2009 年 10 月 24 日 投稿者: naga3

第18回の「iPhoneのようなフリックスクロールを実装してみる」がいろんな人に好評だったので、調子に乗って第2弾をお届けします。iPhoneは画面に入りきらない大きい画像をタッチしてスライドで動かすことができるのですが、そんなやつです。

画像移動のデモ

画像の上でマウスボタンを押してドラッグすると表示領域を移動することができます。写真画像はフリー写真素材 Futta.NET様の素材をお借りしています。

続きを読む »

第19回 テキストフィールドの数値をマウスの上下移動で増減する – jQuery入門

2009 年 10 月 23 日 投稿者: naga3

数値しか入らないテキストフィールドにJavaScriptで入力支援する場合はどうすれば良いのでしょうか。プルダウンで選ばせるのが一般的だと思いますが、数値の範囲が広くなると大変です。他にも自由入力にして数値以外を禁止する、スピンボタンを実装する、などあると思いますが、今回はマウスの上下移動で増減する仕組みを作ってみました。

デモ

テキストフィールド上でマウスのボタンを押して上下に移動すると数値が増減します。移動距離が大きいほど増減量が多くなります。

続きを読む »

第18回 iPhoneのようにページをマウスで掴んではじいてスクロール(フリックスクロール)を実装してみる – jQuery入門

2009 年 10 月 21 日 投稿者: naga3

念願のiPhoneを買ったんです。触ってみると、文字入力やスクロールでのフリック(はじく)操作が心地よいのです。そこでjQueryならフリックによるスクロールも簡単に実装できるんじゃないかな?と思ってやってみました。そういえば昔持っていたFM-TOWNSというパソコンに「猫の手スクロール」というものが流行ってまして、これがまさにフリックスクロールそのものでした。

フリックスクロールのデモ

ウインドウの真ん中あたりでマウスボタンを押したまま上下に動かして離してみてください。ソースが必要ならば右クリックから保存してください。
flick.html(別ウインドウで開きます)
通常のページもフリックスクロール対応にしてみたかったので、ブックマークレットも作りました。このリンク(フリックスクロール)をアドレスバーにドラッグすればjQueryを読み込んでいるページならフリックスクロールします。jQueryが入ってないページはjQuerifyページのブックマークレットを先に実行すればたぶん大丈夫だと思います。
続きを読む »

竜王の地図 – ドラクエ9日記

2009 年 10 月 19 日 投稿者: naga3

以前ほど頻繁に立ち上げてませんが
未だにプレイしています。

最近は竜王と闘う毎日です。

初代ドラクエで最初に竜王を見たときの衝撃は今でも忘れられません。
圧倒的な存在感、圧倒的な強さ、耳に残る東洋的な音楽
どれも素晴らしく、ドラクエが「ドラゴン」クエストたるゆえんであります。

ドラクエ9における宝の地図の竜王でも、その強さは健在です。
そんなわけで、竜王とバトル中の緊迫感あふれる一枚をどうぞ。

ryuou
竜王の前でひるねするがいこつくん

第17回 テーブルを使ったシンプルなドット絵エディタを作ってみる – jQuery入門

2009 年 10 月 17 日 投稿者: naga3

エクセルを方眼紙のようにして書類を書く人いますよね・・・自分はエクセルを方眼紙のようにしてドット絵を描いていたタイプです。そんなわけで今回はテーブルを使ったドット絵エディタを作ってみましょう。

ドット絵エディタのデモ

16×16ドット限定です。下に一列に並んだパレットから色をクリックして塗ります。

続きを読む »

第16回 カラムでソートできるテーブルを自作してみる – jQuery入門

2009 年 10 月 15 日 投稿者: naga3

やってきました車輪の再発明シリーズ。今回はテーブルのソートです。自作なんて面倒だ、という方はcsv2tableが高機能で日本語でオススメです。

テーブルソートのデモ

列名をクリックすると、昇順・降順にソートできます。

続きを読む »

第15回 jQuery UI Draggableを使って付箋(sticky)を作ってみる – jQuery入門

2009 年 10 月 11 日 投稿者: naga3

デスクトップに仮想的に貼り付けられる付箋アプリを使っている人は多いと思います。今回はブラウザ上の自由な位置に貼り付けてドラッグできる付箋を作ってみましょう。jQuery UIのモジュールであるDraggableを使うと、簡単に要素をドラッグすることが可能となります。

付箋のデモ

sticky.html
newボタンを押すと新しい付箋作成、ダブルクリックで文章編集、ドラッグで移動ができます。ソースが欲しければ右クリックからどうぞ。
続きを読む »