はてなブックマーク

今回作成させていただいた案件では、クライアントさんが更新する会員専用ページを作る必要がありました。 初めは簡単に、そのディレクトリに.htaccessをかければ良いかな？と思っていたのですが、CMSとしてWordPressを選んだのが災い（？）したのか（…してないと思いますが）、ちょっと面倒である事が判明し、他の方法を探してみました。 以下参考にさせていただいたページです。 wordpressで非公開コミュニティサイトを作る（1）認証機能をつける WordPressサイト全体にパスワードプロテクトをかけるプラグイン …で今回は、上記の２番目のページで紹介されている Angsuman’s Authenticated WordPress Plugin を使い、ログインしないとページを閲覧できないようにして、サイト全体にパスワードプロテクトをかけました。 各自、自分に与えられた権限（編集者、購読

Sexy sliding JavaScript side bar menu｜prototype.js 今月号のWeb Designingに載っていたAjaxライブラリ、Sexy sliding JavaScript side bar menu（長ッ！）を紹介してみます。 画面右端にタブが表示されていて、クリックするとメニューエリアがスライドして表示されます。ここまででもカッコイイのですが、例えば、Lightboxのようなライブラリと組み合わせる事で、もう１つ凝った演出も可能になるというのだから、使わない手はないと思います。 （僕の場合、Lightboxまで使うと演出過多のような気がしたので、シンプルなサンプルにしましたが…） サンプルはこんな感じです。 ↑このサンプルはこちらからダウンロードできます。 おなじみの「prototype.js」と「script.aculo.us」の「effec

Flashを起動せず更新可｜web creators 2008 7月号 バタバタしておりまして、すっかり更新をサボっております…。 少し古いネタで申し訳ないんですが、今回はweb creators 2008 7月号の「動くサイト、感じるサイトをつくる」という特集に紹介されていた「外部ファイルで内容を管理するスライドメニュー」を作ってみます。 ボタンテキストや読み込み画像を外部ファイルで管理しているので、更新も楽ですし、AS2.0を使用しているので、プログラムが苦手な方でも難しくないハズです。 何はともあれ、サンプルです。 ↑このFlashデータはこちらからダウンロードできます。 基本的には、web creators 2008 7月号を読んでもらって理解して欲しいんですが、ザックリ説明すると、以下のようになります。 -------------------- １）外部画像読み込み用MC 外部画

今作成している案件で、結構ボリュームのある一覧表を載せるページがありまして…。 縦に長い表だと、視認性を上げるために１行おきに背景色を変更するなんてコトも常套手段となる訳です。 これまでは手作業で、tr要素にclass指定をして、CSSで背景色を変更したりしていたんですが、この方法だと表の途中で追加したり、削除したりという修正がとても手間…というか、ほとんどやり直しになってしまいます。 Javascriptを使えば、何か手軽な方法があるんだろうなぁとは思っていたモノの、なかなか必要に迫られずにサボっていました。 前置きが長くなりましたが、 調べた所、jQueryを使えばとても簡単だ！というコトが分かり、紹介してみます。 参考にしたのは、「sukechan.net」さんの「jQuery でテーブルの背景色を 1 行置きに変更する」というページです。 まず、jQueryから最新のスクリプトをダ

DIV要素をクロスフェード このところバタバタしておりまして…。ストックネタという訳でもないんですが、今回はかなり定番の結構便利なスクリプトを紹介してみます。 「Flashを使うまでもないんだけど、ちょっとした演出が欲しい…」という時などにはうってつけです。 「Brand Spanking New」で紹介されている「Crossfader.js」というスクリプトです。ご存知の方も多いかもしれないですね。 このスクリプトの優れている所は、画像ではなくDIV要素に対してクロスフェードさせられるトコロです。…なので、使い方を工夫すれば、いろいろと凝ったアプローチができると思います。しかも、設置は至って簡単！使わない手はないでしょう。 とりあえず、サンプルです。 ↑このデータはこちらからダウンロードできます。 だいたいはソースを見てもらえば分かると思いますが、 クロスフェードさせたい項目ごとに<di

情報ブロックをスライドさせて表示｜web creators 2008 9月号 以前、このブログの「JavaScriptでプルダウンメニュー」という記事に「ロールオーバー時、サブメニューを下では無く上に出したい際はどうすれば良いですか？」というコメントが付き、「これっ！」という対策がなかったので、Flashで作ることをおすすめしましたが、web creators 2008 9月号の「表現の制約を乗り越えるWEBデザインの技」という特集に載っていたサンプルを使えば、なんとか作れそうなので紹介してみます。 「Andrew Sellick - Fancy Sliding Tab Menu V2」というページからライブラリがダウンロードできます。 デモ画面は以下のURLでも見るコトができます。 ・www.andrewsellick.com/examples/tabslideV2/ プルアップメニュー

Flashを使わずにフェードするスライドショー｜Rico JavaScriptライブラリ 昨日紹介したRicoというライブラリを使うと、フェードインで画像を切り替えるFlashのような演出も可能です。これも右の本に載ってますので、興味のある方は参考にしてみて下さい。しかし、画像が切り替わるだけですが、Flashを使ってこの程度の演出しかやっていないサイトもまだまだありますよね。そんなサイトにはうってつけだと思います。 １つ気がかりなのは、windowsのIE6で表示させてみると、最初に全画像を読み込むのが見えて多少不細工です。ウチの環境が悪いんですかねぇ…。何か対応策があるのでしょうか？ サンプルはこんな感じです。

jQuery - BackgroundPosition plugin 今回もまたweb creators 2009年1月号の「Web Design Style-UP Tips」からのテクニックの紹介です。 jQueryの「BackgroundPosition plugin」というプラグインを使うと、メニューボタンにロールオーバーした際にFlashのような滑らかなアニメーションを施してくれます。 ちなみにサンプルは下記のページ。 →jQuery Background Test 仕組みとしては、メニューボタンの下に配置する変化のある背景画像を用意し、その背景画像をJavaScriptで移動させるコトによって、ロールオーバー時にアニメーションさせる…というモノです。 下記のサイトからJavaScriptをダウンロードして読み込ませます。 →Downloading jQuery - jQuery

Flashのような滑らかなアニメーション｜MenuMatic このブログでも何回かプルダウンメニューのサンプルを紹介しましたが、web creators 2009年1月号の「Web Design Style-UP Tips」に載っていた「MenuMatic」というライブラリが面白かったので、紹介してみます。 ちなみにサンプルは下記のページ。 →horizontal（水平）のサンプル →vertical（垂直）のサンプル メニューの仕組みは単純です。Spryを使ったプルダウンメニューと同じようにul要素を入れ子にするコトで多重階層が実現できます。 …で、このライブラリが面白のは、Flashのような滑らかなアニメーションが加わるトコロ！JavaScriptだけでこれだけの動きが付くのなら、Flashで作る必要はなくなりますね。 サンプルはこちら。 ↑このデータはこちらからダウンロードできます。

Firefoxの拡張機能「Pencil Project」｜web creators 2008年10月 今回もweb creators 10月号の「webデザイン スタイルアップ Tips」というコーナーで紹介されていますが、PowerPointなど既成のソフトウエアを使わず、Webサイトなどのラフデザインを作成できるFirefoxの拡張機能「Pencil Project」をこのブログでも紹介してみます。 まずサイトにアクセスして、ページ上部の「Downloads」をクリック。ダウンロード後、Firefoxを再起動して、ツールメニューから「Pencil Sketching」を選択します。 すると、作成画面が表示されるので、左側の「shape collection」の中からパーツを選び、右側のキャンバスにドラッグ＆ドロップで配置していきます。 なかなか既成のソフトウエアのように痒いトコロまで手

Adobeのサイトみたいにはできませんが… 今回も例によって１月号のWeb creatorsからの使えそうなテクニックを…。 AdobeのCreative Suite 3のサイトようにコンテンツにカーソルをロールオーバーすると、フォーカスされて拡大率・不透明度・ぼかし等が変更するといったFlashです。 本をパラパラ見ていた時は「すぐ作れそう」と思っていましたが、実際やってみると少しはまりましたね。初期設定で拡大率・不透明度・ぼかしを設定するんですが、どうやって設定するかで試行錯誤してしまいました。（Webデザイナーとして恥ずかしい話ですが…） さて、サンプルです。 ↑このFlashデータはこちらからダウンロードできます。 肝となるActionScriptは下記の通りです。 /*---------------------------- 初期値設定 ---------------------

テーブルをもっと便利に使いやすく１｜Highlight table rows Web Designing４月号の「Ajaxハジメマシタ」に“テーブルをもっと便利に使いやすく”と題して便利なスクリプトが載っていましたので、紹介してみます。 Highlight table rowsというスクリプトなんですが、マウスオーバーした行の色を変えることができます。情報量の多いデータテーブルなどに使うと便利なのではないでしょうか。 また、最近は結構いろんなページで使われているので、見たことがある人も多いでしょう。 サンプルはこちら ↑このサンプルはこちらからダウンロードできます。 設定の仕方もいたって簡単です。 highlight.jsを読み込み、 <head>〜</head>の間に下記のスクリプトを記述。 <script type="text/javascript"> <!-- window.onlo

最近、Flashの勢いが復活してきたようだ。一時期はSEOに弱いと言われ、Webにとって諸悪の根元のように嫌われていたのだが、映像を取り込むという伝家の宝刀を手に入れたコトによってWeb表現の可能性が飛躍的に上がった。その影響が大きいんだろう。やっぱり見ていて楽しい方が良いからね。 作り手にとっては、技術やセンスが今まで以上に問われるので厳しい時代だが、面白い時代に突入してきたと思ってちょっとワクワクだ。 さて、前置きが長くなってしまいましたが、今回はブラウザのサイズに合わせて背景画像は拡大縮小、しかし、その他の要素は各ポジションを保つというサンプルです。htmlの方でもエラスティックレイアウトという手法が出てきているけれど、ディスプレイ解像度がドンドン高くなっている現在、知ってて損はないスキルだと思います。 →サンプルを新規ウィンドウで開く →このFlashデータをダウンロードする 下記

Ajaxによるフォーム入力作業のサポート｜Web Designing 5月号 フォーム入力に関するJavaScriptはいろいろありますが、Web Designing５月号「Ajaxハジメマシタ」に載っていたスクリプトもなかなか便利そうなので紹介してみます。 サンプルでは３つのライブラリが盛り込まれ、ユーザーに親切なフォーム入力が作れます。どんな機能があるかというと…、 １）空欄と入力データ形式をチェック（JSVallidareライブラリ） ２）郵便番号から住所を自動入力（AjaxZip2.0ライブラリ） ３）日付の入力時にカレンダーを表示（protocalenderライブラリ） …以上の３つです。 早速、サンプルはこちらです。 ↑このサンプルはこちらからダウンロードできます。 設定は難しくありません。本を買っていただくのが一番早いですが、簡単に説明すると… １）JSVallidareライ

リセットCSSとフォントCSS｜Web Designing 4月号 Web Designing４月号の特集「“読みやすさ”のためのXHTML＋CSSデザイン」は、スタイルシート中級者とって非常に役立つ特集でした。 僕も今まで本や既存のサイトを参考にしながら、毎回いろいろと試行錯誤してCSSを組んできましたが、リセット用CSSとフォント用CSSに関しては、今回スッキリとまとまったような気がします。 基本はYahoo! UI Libraryの「YUI Reset CSS」と「YUI Fonts CSS」を使います。ただし、YUI Fonts CSSは英字を想定しているので、カスタマイズした方がいいです。 それでは、サンプルはこちらから（それぞれのスタイルシートが開きますので、コピーしてお使い下さい） リセット用CSS フォント用CSS また、もっと上級者の方には下記のサイトで実践と解説されてい

jQuery Google Charts｜web creators 2009年6月 今回もweb creators 6月号の「Webデザイン スタイルアップ Tips」に紹介されているテクニックです。 「Google Chart API」は、簡単にグラフを作るコトができる便利なサービスですが、パラメータの記述がややこしい。そこで登場するのが、今回紹介する「jQuery Google Charts」です。 「jQuery Google Charts」にアクセスすると、ページの右側に「↓Download」というボタンがあるのでダウンロードして下さい。いろいろとファイルが入っていますが、とりあえず必要なのは、jgcharts.jsとjquery.jsです。 まずは、サンプルです。（このブログのアクセス数と訪問者数をグラフにしてみました） ↑このサンプルはこちらからダウンロードできます。 各種パラ

カレント表示対応版｜styleswitcher.js 以前、｢JavaScriptで文字サイズを変更｣という記事を書きましたが、カレント表示（現在どのサイズで表示されているか）でつまずき、結局画像を使ったボタンにして、どのサイズで表示されているか？というコトが分からないサンプルを紹介しました。 実際に文字サイズを変更するような案件が出てきたコトもあり、何か対策がないものかと考えていると、灯台もと暗しというか何というか…、非常に簡単であるコトに気づきました。 styleswitcher.jsで読み込むalternate stylesheetにそれぞれのボタンの状態を記述すれば良いだけだったんですね。 …という訳でサンプルです。 ↑このサンプルはこちらからダウンロードできます。 今回、｢小 中 大｣の文字も画像にしてしまったため、ソース上のテキストはdisplayプロパティで消してしまってます

画像を利用したスライドメニュー｜imageMenu.js またまた１月号のWeb creatorsからの使えそうなテクニックを…。 前回はFlashでauのオフィシャルサイトのようなアコーディオンメニューを作ってみましたが、今回はJavaScriptを使って同じようなモノを作ってみます。 サンプルはPhatfusionというサイトで確認するコトができます。肝心のJavaScript、imageMenu.jsのダウンロードページはないので、ブラウザにソースを表示してコピー＆ペーストして下さい。 また、mootools.jsも必要なのでサイトからダウンロードします。その時、Core、Class、Class.Extras、Array、String、Function、Number、Element、Element.Event、Element.Filters、Element.Slectors、Fx.B

Flash モーションライブラリ｜Google Tweener また今月のWeb creatorsからの使えそうなテクニックを…。 今度は、auのオフィシャルサイトで使われているようなFlashを使ったアコーディオンメニューが簡単に作れるモーションライブラリを紹介してみます。 Flashコンテンツ制作者なら、一度は作ってみようと思ったり、クライアントから要望された経験があるのではないでしょうか？でも実は、矛盾のでないようにスクリプトを組むのが思いの外難しかったりします。…僕も凝った仕組みは作れません。 しかし、Google codeの「Tweener」というライブラリを使えば、あら不思議？！　簡単に作れてしまいます。 サンプルはこんな感じです。 ↑このFlashデータはこちらからダウンロードできます。 方法です。 「Tweener」のページからtweener_1_26_62_as2.zip

タブメニューでスライドするコンテンツ｜jQueryのCoda-Slider 今月のWeb creatorsは、「いま流行のWebデザインを身につける」と題して、いろいろと使えそうなAjaxやActionScriptを紹介しています。 まずは、タブをクリックするコトで、コンテンツをスライド表示させるjQueryのCoda-Sliderを紹介してみます。サイトから最新版のソースをダウンロードできますので、試してみて下さい。うまく作れば、こんなサイトも夢ではありませんよ！ 映画やドラマで、刑事とか探偵が昔の新聞などをプロジェクタのようなモノに映して「ザッサー、ザッサー」と探し読みしている雰囲気がありませんか？（分かりにくい説明ですいません） サンプルはこんな感じです。 ↑このサンプルはこちらからダウンロードできます。 タブで表示内容を切り替えるAjaxは以前にもこのブログで紹介しました。１つは、

CSSを切り替えるJavaScript｜styleswitcher.js ユーザビリティを考えると、文字の大きさを可変できるコトは必須だと思う。僕もCSSを組む時は、WindowsのIEでも文字サイズを可変できるように相対的な数値を指定している。ただ、文字サイズを変えるメニューがどこにあるのかも分からないユーザーも多い。特に高齢者で大きい文字の方が読みやすい方たちに多いと思う。 また、ブラウザで一律に文字を拡大してしまうと、レイアウトが崩れてしまうので、デザイナーにとっては必要以外のトコロは元のサイズのままで、できるだけ体裁を保ちたいという欲求もある。 そこで今回のJavaScriptの登場です。 A List Apartが紹介しているstyleswitcher.jsというJavaScriptが有名らしい。 何ができるかというと、JavaScriptを使ってCSSを切り替えるコトができる。

Ajaxで作る階層型メニューバー｜SpryMenuBar.js 以前、「JavaScriptでプルダウンメニュー（DropDownMenu.js）」という記事をこのブログで紹介しました。するとこの前、階層を増やしたサンプルはできませんか？という問い合わせがあり、試しに作ってみたしだいです。 以前プルダウンメニューを作る際、実は右の本に出ていたSpryMenuBar.jsを使って作ろうと思っていました。ただ、CSSの設定が結構複雑でちょっと触るとレイアウトが崩れてしまうし、ウチの環境では、IE6で２階層目のメニューがズレて表示されてしまうので、別の方法で作りました。それが前回のDropDownMenu.jsを使った方法です。 しかし、DropDownMenu.jsで３階層目を作ろうとした所、結構大変だという事が分かり、もう一度、SpryMenuBar.jsに挑戦せざるを得なくなりました。 S

swf上にHTML要素をレイヤー表示する際の解決策 少し前に「JavaScriptでプルダウンメニュー（DropDownMenu.js）」という記事をこのブログで紹介してみたトコロ、結構なアクセスがあったので、気をよくしての第２弾です。 この前かかわった仕事で、JavaScriptのプルダウンメニューの下にFlashコンテンツを表示したいというページがあった。いろいろと試してみるとFirefoxなどでは、Flash上で画面が書き変わってしまうと、最上位面に表示されてしまい、その時にプルダウンメニューが表示されているとFlashの下に隠れてしまうコトが分かった。 何とかならないかと思っていたのだが、解決作が見つからず、そのページはFlashを使わない事にしてもらった。…しかし、開発の人間としては何か解決策がないだろうかと、その仕事が終わった後もいろいろ本を眺めていた。 するとやっぱりあるんで

ドロップダウンメニュー｜DropDownMenu.js プルダウンメニュー化する方法もいろいろあるみたいですが、今回紹介させてもらうのは、JavaScript + Ajax 実践サンプル集さんのドロップダウンメニューです。 タブの「分割コード」をクリックすると、JavaScript、css、htmlのソースが記述されているので、コピー＆ペーストで使えるようになっています。 いままでプルダウンメニューをいろいろと試してみたんですが、ブラウザによる表示のズレもなく、画像も問題なく使えました。何よりいつも使っているJavaScript（画像のロールオーバー時に使用）との相性も良かったので気に入っています。 編集も簡単なのでオススメの一品です。 では、サンプルです。 ↑このサンプルはこちらからダウンロードできます。 他にもfaLogさんのCSS(とJS)でシンプルなドロップダウンメニュー - 2と

先日飼っている猫がなくなりました。 元々嫁さんが飼っていた御年18歳のじいちゃん猫でした。 名前はせつ（別名：チャイコ）。 実はもう1匹、こっちは僕が飼っていた2歳下の猫がいます。 こちらも十分じいちゃんです。 こっちの名前はジジ（別名：ボボタ） …で、チャイコはボボタに比べてよく吐きました。 平均すると1週間に1回は吐きました。毛が少し長いのと、よく噛んで食べないからなのかと思ってました。 あと、4〜5年前から便に血がつくようになっていましたね。 ワクチンを注射する時に便を持っていった事も何回かあったのですが、動物病院では何も言われなかったです。 また、数年前からヘルニアを患っていて、便秘しがちな猫だったので、時折踏ん張っても便が出ない時は苦しそうでしたね。 そんな時もよく吐いてました。 おかしいなと思い始めたのは、昨年（2017年）の11月頃ですか…。 食べる度に少し柔らかめの便が出て