Twitterのアイコンが小さいので、アイコンをクリックすると大きいアイコンを表示するChrome拡張を作成してみました。
現在のところ、
Twitter本家 (http://twitter.com/)
ついっぷる(http://twipple.jp/)
のアイコンに対応しています。
こちらからどうぞ → http://ponk.jp/etc/chrome/iconzoom.crx
注意点として、あくまでもアップロードされたオリジナルサイズのアイコンを表示しますので、アップロードされた画像が小さい場合は大きくなりません。
Chrome拡張機能の作成はお手軽で、プログラミングのリハビリにちょうど良いです。
今回は少し実用的なものにしようと思い、iPhoneのようなフリックスクロール（つまんでスクロール）を実装してみました。
こちらからどうぞ→ http://ponk.jp/etc/chrome/flickscroll.crx
右上に「Ｆ」のアイコンが表示され、クリックするたびにON/OFFが切り替わります。
ONのときにページ上でマウスをドラッグして離すとフリックスクロールします。
Chromeブラウザにはユーザーが機能を拡張することができるのですが、
HTMLとCSSとJavaScriptで書くという、非常にお手軽なものとなっています。
テストで以前jQuery入門で作成したジグソーパズルを拡張機能にしてみました。
Chrome持ちの方はぜひ試してみてください。
こちらから→ http://ponk.jp/etc/chrome/jigsaw.crx
Googleのギャラリーに公開するにはお金を払わなければいけない、らしいですね…。
※今回はほとんど一発ネタです。
仕事で「リアルタイムで結果を確認できるHTMLエディタを作ってくれ」という要件があり、途方に暮れました。TinyMCEかCKeditorを導入しようかとも考えたのですが、よく考えたらリアルタイムプレビューだけならJavaScript数行で実装できるじゃん、と思い自分で作ることにしました。
ベスが何かやらかしちゃったとき用に、
てへこちゃんというイラストを作ったので
「何かやらかしちゃった！」と思ったときは
上のほうにあるやらかしちゃったとき用のリンクを押すといいよ。
しつこいバージョン
iPhoneのようにシリーズ、しつこすぎですね。前回のように背景画像を移動する手法ではiPhoneのような拡大縮小ができないのですが、imgタグで画像を表示する方法ならば実現可能ではないかと考えてみました。具体的には、positionプロパティにabsoluteを指定してleftとtopで表示位置を変え、拡大縮小はwidth, heightプロパティをanimateすることで対応します。そのままでは拡大したときに画像があふれてしまうので、imgをdivタグで覆い、overflowプロパティをhiddenにすることによってあふれる部分を隠すわけです。
第18回の「iPhoneのようなフリックスクロールを実装してみる」がいろんな人に好評だったので、調子に乗って第２弾をお届けします。iPhoneは画面に入りきらない大きい画像をタッチしてスライドで動かすことができるのですが、そんなやつです。
数値しか入らないテキストフィールドにJavaScriptで入力支援する場合はどうすれば良いのでしょうか。プルダウンで選ばせるのが一般的だと思いますが、数値の範囲が広くなると大変です。他にも自由入力にして数値以外を禁止する、スピンボタンを実装する、などあると思いますが、今回はマウスの上下移動で増減する仕組みを作ってみました。
念願のiPhoneを買ったんです。触ってみると、文字入力やスクロールでのフリック（はじく）操作が心地よいのです。そこでjQueryならフリックによるスクロールも簡単に実装できるんじゃないかな？と思ってやってみました。そういえば昔持っていたFM-TOWNSというパソコンに「猫の手スクロール」というものが流行ってまして、これがまさにフリックスクロールそのものでした。
エクセルを方眼紙のようにして書類を書く人いますよね・・・自分はエクセルを方眼紙のようにしてドット絵を描いていたタイプです。そんなわけで今回はテーブルを使ったドット絵エディタを作ってみましょう。
携帯端末からも『ポンク』をご覧頂けます。
