JavaScript

ブラウザやOSのCSSクラスを追加するJavaScript「CSS Browser Selector」を読み解く

angry数年前の自分なら読めなかった感が漂っていたので、初心者向けにちょっと読み解いてみようという記事です。中級以上の方にはアクビの出る内容だと思います!ごめんね!

「CSS Browser Selector」は、JavaScriptで<html class=” webkit chrome win js”>のようにクラス定義してくれます。 CSSハックを使わなくてもブラウザ毎に分離して記述できるので便利です。

「CSS Browser Selector」にはPHP版も用意されており、そちらを読み解くのはあまり難しくないのですが、JS版は幾分合理的なソースになっています。 続きを読む

jQueryもあるWEB屋向けギークTシャツ50枚+α

twitter「ぐだぐだ言ってないでコード書けよハゲ」的なギークTシャツないかなぁと探してたんですが、楽天とかアマゾンには少ししかなくて、「あんま需要ないのかな?」と諦めかけたそのとき、大量のギークTシャツを扱うネットショップを見つけました。

zazzle というサイトなんですが「何を今更」だったらごめんなさい。はじめて知りました。デザインの量とカスタマイズ出来る範囲が半端ない!ギークなのがザクザクある!

オーダーメイドのようで、Tシャツはもちろん、ロンTやパーカーにもプリントできて色も自在。かなり自分好みの一枚を作れそう。ちと高いのは仕方ないか・・・。 続きを読む

ニコ動風にツイートを表示するjQueryプラグイン tweetDance.js

TwitterAPIのバージョンアップに伴い、tweetDance.jsの設置には専用のPHPスクリプトの設置が必要になりました。こちらの記事をご参照ください。
tweetDance.jsをバージョンアップ

上のサンプルのように、画像にツイッターの検索結果をニコ動風に表示するjQueryプラグインを公開しました。ツイートをクリックでツイッターに、画像には別にリンク指定できます。IE8,FF,Chrome,safariで動作確認済。

新着コメントが表示されるので、普通の画像よりもグッとアピール度が高いと思います。反面、騒がしい印象もするので使い所を選びます。盛り上がっている感の演出に向いてそうです。

上のロックスミスは発売されたばかりゲームで旬ワードなので、コメント鮮度も高いですが、例えば「コマンドー」などは思うように結果が出ない場合があります。そんな時は検索ワードを工夫します。 続きを読む

File APIを使った複数ファイルのドラッグ&ドロップアップロードwith進捗プログレスバー表示でハマり道中記

新しいWEBサービスでファイルアップロードを実装することに。できれば複数ファイルをドラッグ&ドロップできるようなイマドキなの。この分野はライブラリの開発も盛んに行われており、

  • Uploadify
  • Plupload
  • jQuery File Upload

などを試してみるが、痒い所に手が届かず自作することに。

一つのファイルをアップするだけならinputのtype=fileで一発なんだけど、ドラッグ&ドロップとなると難易度も上がる。実現方法としてHTML5のFile APIという機能を使うと比較的楽に作れる。しかし対応はモダンブラウザのみでIE8も未対応。mixiでもこの方式を採用している。

もう一つFlashを利用する方法があるが、その開発はコストに見合わない。幸いにもサイトのターゲットにIE使いは少なそうなので、IEの複数ファイルアップロードには対応しないことに。 続きを読む

WEBで録音を実現する「WAMI recorder」が便利すぎてワラタ

WEBサイトに録音機能を追加したくてリサーチ開始。Flashで簡単に出来そうだと軽い気持ちで。しかしFlashでマイクを認識するまではいいが、録音データをクライアントに溜められないのでストリーミングサーバーを用意する必要があった。

ストリーミングサーバーは高価なFlashMediaServerかフリーのRed5。Red5を使う場合、開発はサーバー側がJavaでクライアント側はAS3。「ただ録音するだけなのに・・・」という感じ。(´・ω・`)

しかしFlashプラグイン10.1からクライアントに録音データを溜められるようになりストリーミングが必要なくなった事を知る。さらに手軽に録音できる「WAMI recorder」ライブラリを発見→録音機能あっという間に実装完了!そんなわけで「WAMI recorder」を紹介したいと思います。 続きを読む

jQueryコピペ一発でスクロールアウト後も要素を追従させるIE6対応

最近よく見るアドセンスなどの広告がスクロールについてくる機能を、CSSの追加なしjQueryのみで行います。

文字で説明すると分かりにくいですね、百聞は一見にしかず、当ブログのメニュー最下部に実装されてます。 長いページでないと確認できないのでトップページなどで確認してみて下さい。

本来なら空白が表示され続ける場所ですが、広告やソーシャルブックマークボタンなどに有効利用できます。対象はclass指定するだけなので、どんな場所でも固定できますが、性質的に使えるのはメニュー最下部に限られる気もします。 続きを読む

iPhone5サイトの動画にWEBデザイナーが命削ってるぞ

欲しいな欲しいな~ってiPhone5のWEBサイトを眺めている人がこの瞬間にも10万人位いそうです( ^o^)/ ハイッ!

そのiPhoneのカテゴリー「デザイン」に、恐ろしく高度な技術が使われていました。

このページ。一見何でもない感じです。大きくiPhoneの写真が配置されてて、読み込みと同時に少しだけ画面が動きます。

アップル – iPhone 5 – iPhone 5を生み出した方法をご紹介します。

この数秒の動画、実はWEBデザイナーの執念とも言える動画で、約1MのJPEGファイルからJavaScriptで計算しまくってリアルタイムで動画を作っています。 続きを読む

今日からPHPの関数名をJavaScriptライクに切り替え

PHPを本格的に始めて3年。3年前までGETとかPOSTとかセッションとかのWEBの知識はほとんどなくて、守備範囲はHTMLとCSSと少しJavaScript。あとはデザイナーとしてSmartyのテンプレートをいじってたくらい。

いっぽう言語歴はBASIC→C→Visual C++ときて4年ブランク、そこにPHPとJavaScriptが入ってきた。

初めてPHPを触った時は「何て簡単な言語なんだ!」と驚いた。かといってPHP開発陣に入れるレベルはない永遠の中級者ではある。Visual C++とWindowsのような感じで、PHPはWEBの知識も一緒に覚えないと使えない。最初はPHPよりWEBの知識に頭をひねることが多かった。

そんな私が感じた関数名についての雑感。 続きを読む

映画のハッカーみたいなデザインを再現 JustGage

映画に登場するハッキングシーンはビジュアル的にかなり格好いいですが、実際はUNIXのターミナルを使うことになるので、現実はやっぱり地味なのが残念な今日この頃。ブラウザでサーバー等のシステムを監視する管理画面をデザインすることも増えてきました。

デジタル時計のようにズラっと数字が並んでいるのもいいですが、デザインに遊びゴコロを入れる余地(予算)があるのなら、こんなUVメーターのようなアナログ表示も検討したいものです。

続きを読む

jQueryでtextareaのカーソル位置の行数を取得・設定(スクロール対応)

textarea内のカーソル位置や行数を取得したり、指定行のみ置換したりなどをJavaScriptでサラリと出来るかな?と思ったら、それなりに大変だったという記録です。

一部jQueryオブジェクトですがjQueryの機能は使っていないので依存しない改造も簡単だと思います。 続きを読む